David Schure
asked on
Formatting a Query
I need to format the results from this query. Right now they are stacking vertically. I want the records to line up horizontally. Also the details and name field should be the same width as the photo.
while ($data = $query->fetch_assoc()) {
printf("<img src='/resources/images/Therapist/%s' height='100px' width='100px'>", $data['photo']);
//printf("<p>%s</p>", $data['therapist_id']);
printf("<p>%s</p>", $data['therapist_name']);
printf("<p>%s</p>", $data['details']);
}
try
while ($data = $query->fetch_assoc()) {
printf("<table><tr>");
printf("<td><img src='/resources/images/Therapist/%s' height='100px' width='100px'></td>", $data['photo']);
//printf("<td>%s</td>", $data['therapist_id']);
printf("<td>%s</td>", $data['therapist_name']);
printf("<td>%s</td>", $data['details']);
printf("</tr></table>"")
}
If you're going to go with the table approach, you should only have the rows in the loop - define the table itself outside of the loop, otherwise you end up with a table per record, which isn't great
what chris says is:
printf("<table>");
while ($data = $query->fetch_assoc()) {
printf("<tr>");
printf("<td><img src='/resources/images/Therapist/%s' height='100px' width='100px'></td>", $data['photo']);
//printf("<td>%s</td>", $data['therapist_id']);
printf("<td>%s</td>", $data['therapist_name']);
printf("<td>%s</td>", $data['details']);
printf("</tr>");
}
printf("</table>");
printf("</br>"); // extra space maybe
ASKER
....how do you do it without tables? Div's and CSS? If so how? also i need to make this a form...
ASKER
thank you Hain...need it to responsive
Are you using BootStrap CSS at all ?
ASKER
yes its there in some form...have been customizing each page though since they are all so unique
then use divs
<div class="container">
<div class="row">
<div class="col-sm"></div>
<div class="col-sm"></div>
<div class="col-sm"></div>
</div>
</div>
ieprintf("<div class='container'>");
while ($data = $query->fetch_assoc()) {
printf("<div class='row'>");
printf("<div class='col-sm'><img src='/resources/images/Therapist/%s' height='100px' width='100px'></div>", $data['photo']);
//printf("<div class='col-sm'>%s</div>", $data['therapist_id']);
printf("<div class='col-sm'>%s</div>", $data['therapist_name']);
printf("<div class='col-sm'>%s</div>", $data['details']);
printf("</div>");
}
printf("</div>");
OK. With BootStrap, you can just use the row / column setup:
<div class="container">
<div class="row">
<div class="col-3">Column 1</div>
<div class="col-3">Column 2</div>
<div class="col-3">Column 3</div>
<div class="col-3">Column 4</div>
</div>
</div>
The general idea of the BootStrap grid system is that a row is made up of 12 columns, so in the above example, that's split into 4 * 3-width columns, (you could easily have a 2, 2, 5, 3 setup - whatever you need). You can also dictate that columns are set up based on the media size, so you may want 4 columns on desktop, but on mobiles, split the 4 columns over 2 rows. This is what makes it nice as a responsive setup.
ASKER
Ahh I see. Question. If I setup three divs and I only have one or two therapist (records show up. What happens? Will the other div be there? Or will the modal adjust to the lesser number of records?
Question. If I setup three divs and I only have one or two therapist (records show up. What happens? Will the other div be there? Or will the modal adjust to the lesser number of records?
try and see :)
The DIVs you set up are for the columns, so they represent the fields from your database - if your query returns 4 fields, then you set up 4 columns. The number of records returned is irrelevant because you'll build the rows / columns inside a loop. If you have 1 record, you'll end up with this:
<div class="row">
<div class="col-3">....</div>
<div class="col-3">....</div>
<div class="col-3">....</div>
<div class="col-3">....</div>
</div>
If you have 2 records, you'll end up with this:
<div class="row">
<div class="col-3">....</div>
<div class="col-3">....</div>
<div class="col-3">....</div>
<div class="col-3">....</div>
</div>
<div class="row">
<div class="col-3">....</div>
<div class="col-3">....</div>
<div class="col-3">....</div>
<div class="col-3">....</div>
</div>
<div class="row">
<div class="col-3">....</div>
<div class="col-3">....</div>
<div class="col-3">....</div>
<div class="col-3">....</div>
</div>
If you have 2 records, you'll end up with this:
<div class="row">
<div class="col-3">....</div>
<div class="col-3">....</div>
<div class="col-3">....</div>
<div class="col-3">....</div>
</div>
<div class="row">
<div class="col-3">....</div>
<div class="col-3">....</div>
<div class="col-3">....</div>
<div class="col-3">....</div>
</div>
ASKER
ASKER
I tried this
<div class="row">
<div class="col-sm"></div>
<div class="col-sm"></div>
<!--div class="col-sm"></div-->
</div>
and thisprintf("<div class='row'>");
printf("<div class='col-sm'><img src='/resources/images/Therapist/%s' height='100px' width='100px'></div>", $data['photo']);
//printf("<div class='col-sm'>%s</div>", $data['therapist_id']);
printf("<div class='col-sm'>%s</div>", $data['therapist_name'],$data['details']);
//printf("<div class='col-sm'>%s</div>", $data['details']);
printf("</div>");
every 3 rec, you need a new row, modulus can be used...
printf("<div class='container'>");
$r=0;
while ($data = $query->fetch_assoc()) {
$r++;
if ($r % 3)==1 {printf("<div class='row'>");}
printf("<div class='col-sm'>");
printf("<img src='/resources/images/Therapist/%s' height='100px' width='100px'>", $data['photo']);
printf("<p>%s</p>", $data['therapist_name']);
printf("<p>%s</p>", $data['details']);
printf("</div>");
if ($r % 3)==0 {printf("</div>");}
}
if ($r % 3)!=0 {printf("</div>");} // fix forlast row </div>
printf("</div>");
link pls...
and code pls...
ASKER
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
if(!empty($_GET['id'])){
// Database configuration
$dbHost = 'localhost';
$dbUsername = '';
$dbPassword = '';
$dbName = '';
$db = new mySQLi($dbHost, $dbUsername, $dbPassword, $dbName);
$sql = <<< EOT
SELECT therapist_id, therapist_name, photo, details FROM tbl_answers_therapist
JOIN tbl_answers USING(country,state)
WHERE tbl_answers.client_id = 316 AND tbl_answers_therapist.status = 'Yes'
LIMIT 3
EOT;
$query = $db->query($sql);
printf("<div class='container'>");
$r=0;
while ($data = $query->fetch_assoc()) {
$r++;
if ($r % 3)==0 {printf("<div class='row'>");}
printf("<div class='col-sm'>");
printf("<img src='/resources/images/Therapist/%s' height='100px' width='100px'>", $data['photo']);
printf("<p>%s</p>", $data['therapist_name']);
printf("<p>%s</p>", $data['details']);
printf("</div>");
if ($r % 3)==0 {printf("</div>");}
}
printf("</div>");
}else{
echo 'Content not found....';
}
?>
ASKER
<div class="modal-content">
<div class="modal-header">
<!--button type="button" class="close" data-dismiss="modal">×</button-->
<h4 class="modal-title">Please Select Your Therapist</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-sm"></div>
<div class="col-sm"></div>
<div class="col-sm"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
line 25 should be
if ($r % 3)==1 {printf("<div class='row'>");}
I fıxed it earlier...
+ add this before line 35
if ($r % 3)!=0 {printf("</div>");} // fix forlast row </div>
this should work...
$r=0;
while ($data = $query->fetch_assoc()) {
$r++;
if ($r % 3)==1 {printf("<div class='row'>");};
printf("<div class='col-sm'>");
printf("<img src='/resources/images/Therapist/%s' height='100px' width='100px'>", $data['photo']);
printf("<p>%s</p>", $data['therapist_name']);
printf("<p>%s</p>", $data['details']);
printf("</div>");
if ($r % 3)==0 {printf("</div>");}
}
if ($r % 3)!=0 {printf("</div>");}; // fix forlast row </div>
printf("</div>");
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
ASKER
I see. What I am trying to do is make the details a little more narrow. Is that possible? I feel it's a little too wide. I tried this.
<style>
.bioData{
text-align: center;
width:150px;
}
</style>
ASKER
Yess, no were talking! Last thing is I need the name field in bold. I do I distinguish that field from the rest when using printf as the class? can classes be added in the query?
no class needed
printf("<p>%s</p>", $data['therapist_name']);
>>>
printf("<p><b>%s</b></p>", $data['therapist_name']);
printf("<p>%s</p>", $data['therapist_name']);
>>>
printf("<p><b>%s</b></p>", $data['therapist_name']);
ASKER
Wow. I like that!!!!!!!!!!!! Thank you! This was a tremendous help!
You have a few options. You could create a <table>, with a row <tr> for each record. Tables are considered old-school in many cases because of their lack of responsiveness.
You could use div's as columns which is particularly easy if you're using something like bootstrap, although it's fairly trivial to create your own with the Flex options you have in CSS these days.