Scaffolding for bootstrap grid with PHP loop & mysqli - php

thanks for taking a look at my question.
I'm trying to get PHP to output bootstrap rows that only contain 2 col-md-6 columns, instead of outputting 1 row with 1 col for each iteration.
Searching here on Stackoverflow I found a solution that makes sense but when I implement it, the HTML that I get makes no sense!
I should be getting this:
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
...But I'm getting this:
<div class="col-md-6">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
CODE:
<?php
require_once('somedb.php');
$query = mysqli_query($conn, "SELECT * FROM notyourbusiness");
$rowCount = mysqli_num_rows($query);
$i = 0;
echo '<div class="row">';
if($rowCount > 0){
while($row = mysqli_fetch_assoc($query)){
?>
<?php echo '<div class="col-md-6">'; ?>
<img src="img/project/<?php echo $row['thumb'] ?>" class="work-thumbnail" width="100">
<h2><?php echo $row["name"]; ?></h2>
<?php echo '</div>'; ?>
<?php
$i++;
if ($i%2 == 0) echo '</div><div class="row">';
} ?>
<?php } ?>
</div>
Any help will be greatly appreciated, thanks!

Can you provide us more information? It seems that the first is comming from outside of this php code.

You can try this
<?php
$query = mysqli_query($conn, "SELECT * FROM notyourbusiness");
$rowCount = mysqli_num_rows($query);
$i = 0;
if($rowCount > 0){
while($row = mysqli_fetch_assoc($query)){
$row_draw = ($i % 2 == 0) ? true : false;
# Start row div
if ($row_draw)
{
print "<div class='row'>";
}
# Print Column
print "<div class='col-md-6'>";
?>
<img src="img/project/<?php echo $row['thumb'] ?>" class="work-thumbnail" width="100">
<a href="javascript:void(0);">
<h2><?php echo $row["name"]; ?></h2>
</a>
<?php
print "</div>";
# End row div
if ($row_draw)
{
print "</div>";
}
$i++;
}
}
?>

Related

How i can display blob elements is same row with php?

I want to display images in same row,but i can display only under each other. I tried in css display: inline-block; but dont working. Any idea what i need to do? Thanks
The code for display images:
require_once 'dbConfig.php';
$result = $db->query("SELECT image FROM images ORDER BY uploaded DESC");
?>
<?php if($result->num_rows > 0){ ?>
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3" >
<a class="lightbox">
<?php while($row = $result->fetch_assoc()){
echo '<img src="data:image/jpeg;base64,'.base64_encode($row['image']).'" width="250", " height="250">';}?>
<?php }else{ ?>
<p class="status error">Image(s) not found...</p>
<?php } ?>
</a>
</div>
</div>
It's because you large col is only 3.
Inspect element result
if you are using these images for lightbox thumbnail I would suggest d-flex rather than column system....
Try this code it will work .. now it will loop your columns as well
require_once 'dbConfig.php';
$result = $db->query("SELECT image FROM images ORDER BY uploaded DESC");
?>
<?php if($result->num_rows > 0){ ?>
<div class="row">
<?php while($row = $result->fetch_assoc()){
<div class="col-sm-6 col-md-4 col-lg-3" >
<a class="lightbox">
echo '<img src="data:image/jpeg;base64,'.base64_encode($row['image']).'" width="250", " height="250">';}?>
</a>
</div>
<?php }else{ ?>
<p class="status error">Image(s) not found...</p>
<?php } ?>
</div>

How can I fetch an array in a row with two colums?

I am fetching with mysqli_fetch_array 100 rows and put in in a col-md-6.
But how can I trigger a line break after 50 rows so that I have two col-md-6 for a better view?
<div class="row">
<div class="col-md-6">
<?php
while($row = mysqli_fetch_array($sql)) {
echo '<input type="checkbox">$row['name']</input>';
}
?>
</div>
</div>
Simply use a counter.
<div class="row">
<div class="col-md-6">
<?php
$i = 1;
while($row = mysqli_fetch_array($sql)) {
echo '<input type="checkbox">', $row['name'], '</input>';
if($i++ == 50) echo '</div>', PHP_EOL, '<div class="col-md-6">', PHP_EOL;
}
?>
</div>
</div>
Note: $row['name'] must either be interpolated within echo-quotes or printed out.

New containing div after every 3 records

I would like to create a new containing <div> after 3 results, using PDO result loop.
For my self-study-project I have to made a product page with bootstrap and after every 3rd record I have to make a new row and show again 3 col-md-4's, etc, etc.
Now I have this as my code:
<div class="row">
<?php
while ($row = $stmt->fetch(PDO::FETCH_OBJ)) {
?>
<div class="col-md-4">
<div class="product">
<div class="title"><?php echo $row->pname ?></div>
<div class="img"><img
src="../product/img/<?php echo $row->pnumber ?>/<?php echo $row->pthumbnail ?>.jpg?$pop210x210$"/>
</div>
<div class="vijftien"></div>
<div class="deliver">Levertijd: <strong><?php echo $row->pdelivertime ?></strong></div>
<div class="vijf"></div>
<div class="other"></div>
<div class="row">
<div class="col-md-6">
<div class="price"><?php echo $row->pprice ?></div>
</div>
<div class="col-md-6">
<div class="order">
<button class="log_in" id="doLogin">Meer informatie</button>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
I have visited and studied other questions but I do not really get the idea of how they are doing it and how I can implement the correct method into my code.
As tadman stated in the comment under your question. The best approach should use a modulus operator (%) with 3.
Place your separating condition at the start of each iteration. (Demo)
Like this:
$x=0; // I prefer to increment starting from zero.
// This way I can use the same method inside a foreach loop on
// zero-indexed arrays, leveraging the keys, and omit the `++` line.
echo "<div class=\"row\">";
foreach($rows as $row){
if($x!=0 && $x%3==0){ // if not first iteration and iteration divided by 3 has no remainder...
echo "</div>\n<div class='row'>";
}
echo "<div>$row</div>";
++$x;
}
echo "</div>";
This will create:
<div class="row"><div>one</div><div>two</div><div>three</div></div>
<div class='row'><div>four</div><div>five</div><div>six</div></div>
Late Edit, here are a couple of other methods for similar situations which will provide the same result:
foreach(array_chunk($rows,3) as $a){
echo "<div class=\"row\"><div>",implode('</div><div>',$a),"</div></div>\n";
}
or
foreach ($rows as $i=>$v){
if($i%3==0){
if($i!=0){
echo "</div>\n";
}
echo "<div class=\"row\">";
}
echo "<div>$v</div>";
}
echo "</div>";
To clarify what NOT to do...
Sinan Ulker's answer will lead to an unwanted result depending on the size of your result array.
Here is a generalized example to expose the issue:
Using this input array to represent your pdo results:
$rows=["one","two","three","four","five","six"];
Sinan's condition at the end of each iteration:
$i=1;
echo "<div class=\"row\">";
foreach($rows as $row){
echo "<div>$row</div>";
if($i%3==0)echo "</div>\n<div class='row'>"; // 6%3==0 and that's not good here
// 6%3==0 and will echo the close/open line after the content to create an empty, unwanted dom element
$i++;
}
echo "</div>\n\n";
Will create this:
<div class="row"><div>one</div><div>two</div><div>three</div></div>
<div class='row'><div>four</div><div>five</div><div>six</div></div>
<div class='row'></div> //<--- this extra element is not good
You need to add a new closure tag and open new one every 3th iteration.
<div class="row">
<?php
$sql = "SELECT * FROM products";
$stmt = $conn->query($sql);
$stmt->execute();
$i=1;
while ($row = $stmt->fetch(PDO::FETCH_OBJ)) {
?>
<div class="col-md-4">
<div class="product">
<div class="title"><?php echo $row->pname ?></div>
<div class="img"><img
src="../product/img/<?php echo $row->pnumber ?>/<?php echo $row->pthumbnail ?>.jpg?$pop210x210$"/>
</div>
<div class="vijftien"></div>
<div class="deliver">Levertijd: <strong><?php echo $row->pdelivertime ?></strong>
</div>
<div class="vijf"></div>
<div class="other"></div>
<div class="row">
<div class="col-md-6">
<div class="price"><?php echo $row->pprice ?></div>
</div>
<div class="col-md-6">
<div class="order">
<button class="log_in" id="doLogin">Meer informatie</button>
</div>
</div>
</div>
</div>
</div>
<?php
if($i%3==0)echo "</div><div class='row'>";
$i++;
} ?>
$x = 0;
echo "";
foreach($rows as $row)
{
/* added one more condition for removing empty div.... */
if ($x != 0 && $x % 3 == 0 && $x < count($rows))
{
echo "</div>\n<div class='row'>";
}
echo "<div>$row</div>";
++$x;
}
echo "";

div inside while loop in php

The search results should display like this
But my results are stacking on top of each.
Here is my code :
<div class="container">
<?php
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("thesis") or die(mysql_error());
$search = trim( $_POST['SearchKeywords']);
$query = " SELECT * FROM new_data WHERE Product_Title or Product_link LIKE'%$search%' ";
$sql = mysql_query($query) or die(mysql_error());
$count = mysql_num_rows($sql);
$count == 0;
if ($count == 0) {
echo "Sorry, Nothing Found !!";
}else{
while ($row = mysql_fetch_array($sql))
{
$img = $row ['Product_Img'];
$link = $row ['Product_link'];
$title = $row ['Product_Title'];
$price = $row ['Product_Price'];
?>
<div class="card">
<div class="front alert alert-success">
<?php echo "$title";
echo "<img src='$img' width='80px' height='100px'>";
echo "$price"; ?>
</div>
</div>
<?php
};
};
?>
</div> <!-- Container -->
Those div blocks are inside a container.
I added a bootstrap class in order for better a design.
You can use thumbnails with custom content
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
</div>
</div>
I used a counter inside while loop.
Which will check, when there are already 4 blocks/ products in a single row then it will create a new row
<?php
if($productCount == 0)
{
echo "<div class='row'>"; }
}
$productCount++;
if($productCount==4)
{
echo "</div>" ;
$productCount = 0;
}
?>

How do I group a div in some class on MySQL while

I want add a different class on my MySQL result.
<?php while ($fetch = $db->fetch($query)) { ?>
<div class="result"><?php echo $fetch['title']; ?></div>
<?php } ?>
Output should be like this
<div class="group">
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
</div>
<div class="group">
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
</div>
<div class="group">
<div class="result">Title</div>
<div class="result">Title</div>
<div class="result">Title</div>
</div>
Here, every 6 results will have <div class="group"></div>.
Let me know
<div class="group">
<?php
$count = 0;
while ($fetch = $db->fetch($query)) {
if (++$count == 6) {
echo '</div><div class="group">';
$count = 0;
}
echo '<div class="result">' . $fetch['title'] . '</div>';
}
?>
</div>
create a counter that increments every time the loop is ran, then at the beginning of each loop check the value. if the value == 6 then close the current div and open a new one with the class change (you could make 2 counters to flip flop back and forth). Reset your counter after the div change.
--edit added code--
Make yourself 2 'group' div classes, 'group1' and 'group0' for the flip-flop
<div class="group1">
<?php
$count = 0;
$divstyle = 1;
while ($fetch = $db->fetch($query)) {
if (++$count == 6) {
echo '</div><div class="group'.(++$divstyle % 2).'">';
$count = 0;
}
echo '<div class="result">' . $fetch['title'] . '</div>';
}
?>
</div>
This might be a bit bad...
<?php $cnt=0;while ($fetch = $db->fetch($query)) { ?>
<div class="result"><?php if($cnt%6==0){echo "<div class=\"group\">";} echo $fetch['title'];if($cnt%6==0){echo "</div>";} $cnt++;?></div>
<?php } ?>

Categories