Out put html div conflict - php

Question

I am having the weirdest time with the html output. the first output works fine if you look at //start gallery row that is where my problems begin.
This is how the output should look
<div class='row'>
<div class='col-md-12'>
<div id='gallery-slider' class='slider responsive'>
<img class='img-responsive' src='cdn/assets/gallery/1.jpg'>
<img class='img-responsive' src='cdn/assets/gallery/3.jpg'>
<img class='img-responsive' src='cdn/assets/gallery/2.jpg'>
<img class='img-responsive' src='cdn/assets/gallery/4.jpg'>
<img class='img-responsive' src='cdn/assets/gallery/5.jpg'>
</div>
</div>
</div>
at the start of // gallery when I view source this is the out put
<div class='row'>
<div class='col-md-12'>
<div id='gallery-slider' class='slider responsive'>
<img class='img-responsive' src='cdn/assets/gallery/1.jpg'></div>
</div>
</div>
<img class='img-responsive' src='cdn/assets/gallery/3.jpg'>
<img class='img-responsive' src='cdn/assets/gallery/2.jpg'>
<img class='img-responsive' src='cdn/assets/gallery/4.jpg'>
<img class='img-responsive' src='cdn/assets/gallery/5.jpg'>
but no matter where I put the last output DIV it causes issues
<?php
$stmt = $db->prepare("my query");
$stmt->execute();
$result = $stmt->get_result();
$output = "";
$checker = [];
while ($row = mysqli_fetch_assoc($result)) {
$ID = $row['ID'];
$FullName = $row['FullName'];
$Email = $row['Email'];
$JobTitle = $row['JobTitle'];
$Bio = $row['Bio'];
$Photo = $row['Photo'];
$GalleryImage = explode(',', $row['GalleryImage']);
if (isset($Photo) && ! empty($Photo)) {
$ProfileImage = "$Photo";
} else {
$ProfileImage= "avatar.jpg";
}
if(!in_array($row['ID'], $checker)) {
$output .= "
<div class='container yep team-wrap'>
<div class='row'>
<div class='col-md-6'>
<img class='img-responsive' src='cdn/assets/artist/$ProfileImage'>
</div>
<div class='col-md-6'>
<strong>$FullName<br>$JobTitle</strong>
<br>
<p>$Bio</p>
<a href='mailto:$Email' class='btn btn-info'>Contact Me</a>
</div>
</div>";
//End of info row
$output .="<br /><br /><br />";
//Start Gallery Row
$output .= "
<div class='row'>
<div class='col-md-12'>
<div id='gallery-slider' class='slider responsive'>
";
}
foreach ($GalleryImage as $img){
//Display this row as many times as needed by data in this row.
$output .= "<img class='img-responsive' src='cdn/assets/gallery/$img'>";
}
$output .= "
</div>
</div>
</div>";
// End gallery row
array_push( $checker, $row['ID']);
}
$output .= "</div>";
echo $output;
?>
sql
$stmt = $db->prepare("
SELECT U.ID,
U.FullName,
U.Email,
U.JobTitle,
U.Bio,
U.Photo, G.GalleryImage
FROM users U
LEFT join gallery G
ON U.ID = G.ID
");
$stmt->execute();
$result = $stmt->get_result();

Answer 1

Ok, so I believe the best course of action is to loop through your $result and filter out all the repeated values as well as assigning images to an array with the row['ID'] as the key and then loop through them after CHECK IT!
$checker = array();
$profileArray = array();
while ($row = mysqli_fetch_assoc($result))
{
if($row['GalleryImage'])
{
$profileArray[$row['ID']]['GalleryImages'][] = $row['GalleryImage'];
}
if(!in_array($row['ID'], $checker))
{
while (list ($key, $value) = each($row))
{
if($key != 'GalleryImage')
{
$profileArray[$row['ID']][$key] = $value;
}
}
$checker[] = $row['ID'];
}
}
foreach ($profileArray as $row)
{
$ID = $row['ID'];
$FullName = $row['FullName'];
$Email = $row['Email'];
$JobTitle = $row['JobTitle'];
$Bio = $row['Bio'];
$Photo = $row['Photo'];
$GalleyImages = $row['GalleryImages'];
if (isset($Photo) && !empty($Photo))
{
$ProfileImage = "$Photo";
}
else
{
$ProfileImage = "avatar.jpg";
}
$output .= "
<div class='container yep team-wrap'>
<div class='row'>
<div class='col-md-6'>
<img class='img-responsive' src='cdn/assets/artist/$ProfileImage'>
</div>
<div class='col-md-6'>
<strong>$FullName<br>$JobTitle</strong>
<br>
<p>$Bio</p>
<a href='mailto:$Email' class='btn btn-info'>Contact Me</a>
</div>
</div>";
//End of info row
$output .= "<br /><br /><br />";
//Start Gallery Row
$output .= "
<div class='row'>
<div class='col-md-12'>
<div id='gallery-slider' class='slider responsive'>";
if(!$GalleyImages)
{
foreach ($GalleyImages as $img)
{
//Display this row as many times as needed by data in this row.
$output .= "<img class='img-responsive' src='cdn/assets/gallery/$img'>";
}
}
else
{
$output .= "HTML THAT YOU WANNA DISPLAY instead of images";
}
$output .= "
</div>
</div>
</div>
</div>";
}
echo $output;

Answer 2

Ok, first of all it is always good to format your code properly so you don't make these mistake.
Your first output is missing a closing div
<div class='container yep team-wrap'>
<div class='row'>
<div class='col-md-6'>
<img class='img-responsive' src='cdn/assets/artist/$ProfileImage'>
</div>
<div class='col-md-6'>
<strong>$FullName<br>$JobTitle</strong>
<br>
<p>$Bio</p>
<a href='mailto:$Email' class='btn btn-info'>Contact Me</a>
</div>
</div>
</div> <!-- This was missing-->
lastly you had close your if statement to quickly around the below code:
//Start Gallery Row
$output .= "
<div class='row'>
<div class='col-md-12'>
<div id='gallery-slider' class='slider responsive'>
";
} // CLOSED AT THE WRONG SPOT
Try the below:
<?php
$stmt = $db->prepare("my query");
$stmt->execute();
$result = $stmt->get_result();
$output = "";
$checker = [];
while ($row = mysqli_fetch_assoc($result)) {
$ID = $row['ID'];
$FullName = $row['FullName'];
$Email = $row['Email'];
$JobTitle = $row['JobTitle'];
$Bio = $row['Bio'];
$Photo = $row['Photo'];
$GalleryImage = explode(',', $row['GalleryImage']);
if (isset($Photo) && ! empty($Photo)) {
$ProfileImage = "$Photo";
} else {
$ProfileImage= "avatar.jpg";
}
if(!in_array($row['ID'], $checker)) {
$output .= "
<div class='container yep team-wrap'>
<div class='row'>
<div class='col-md-6'>
<img class='img-responsive' src='cdn/assets/artist/$ProfileImage'>
</div>
<div class='col-md-6'>
<strong>$FullName<br>$JobTitle</strong>
<br>
<p>$Bio</p>
<a href='mailto:$Email' class='btn btn-info'>Contact Me</a>
</div>
</div>
</div> <!-- This was missing-->
";
//End of info row
$output .="<br /><br /><br />";
//Start Gallery Row
$output .= "
<div class='row'>
<div class='col-md-12'>
<div id='gallery-slider' class='slider responsive'>
";
foreach ($GalleryImage as $img) {
//Display this row as many times as needed by data in this row.
$output .= "<img class='img-responsive' src='cdn/assets/gallery/$img'>";
}
$output .= "
</div>
</div>
</div>
";
// End gallery row
array_push( $checker, $row['ID']);
}
}
$output .= "</div>";
echo $output;
?>

Answer 3

Most of the time try to separate your PHP from HTML that you can see errors easily.
$stmt = $db->prepare("query");
$stmt->execute();
$result = $stmt->get_result();
$output = "";
$checker = [];
while ($row = mysqli_fetch_assoc($result)) {
$ID = $row['ID'];
$FullName = $row['FullName'];
$Email = $row['Email'];
$JobTitle = $row['JobTitle'];
$Bio = $row['Bio'];
$Photo = $row['Photo'];
$GalleryImage = explode(',', $row['GalleryImage']);
if (isset($Photo) && !empty($Photo)) {
$ProfileImage = "$Photo";
} else {
$ProfileImage = "avatar.jpg";
}
if (!in_array($row['ID'], $checker)) : ?>
<div class='container yep team-wrap'>
<div class='row'>
<div class='col-md-6'>
<img class='img-responsive' src='cdn/assets/artist/<?php echo $ProfileImage; ?>'>
</div>
<div class='col-md-6'>
<strong><?php echo $FullName; ?><br><?php echo $JobTitle; ?></strong>
<br>
<p><?php echo $Bio; ?></p>
<a href='mailto:$Email' class='btn btn-info'>Contact Me</a>
</div>
</div>
<!-- End of info row-->
<br/><br/><br/>
<!-- Start Gallery Row-->
<div class='row'>
<div class='col-md-12'>
<div id='gallery-slider' class='slider responsive'>
<!-- Display this row as many times as needed by data in this row.-->
<?php foreach ($GalleryImage as $img) : ?>
<img class='img-responsive' src='cdn/assets/gallery/<?php echo $img; ?>'>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
<!-- // End gallery row-->
<?php array_push($checker, $row['ID']); endif;
}
?
Example output