Having trouble in creating a while loop - php

I have written CSS for two column layout and I have a "users" database with notes of the users.
So when I run a while loop like this: while($row = mysqli_fetch_array($result))
PHP should dynamically create html like this (depending on no. of users):
<div class="row">
<div class="col">
<div class="col-content"><?php echo $row['notes'] ?></div>
<!-- Notes of user 1 -->
</div>
<div class="col">
<div class="col-content"><?php echo $row['notes'] ?></div>
<!-- Notes of user 2 -->
</div>
</div>
<div class="row">
<div class="col">
<div class="col-content"><?php echo $row['notes'] ?></div>
<!-- Notes of user 3 -->
</div>
<div class="col">
<div class="col-content"><?php echo $row['notes'] ?></div>
<!-- Notes of user 4 -->
</div>
</div>
If there's is only one user, html should be like this:
<div class="row">
<div class="col">
<div class="col-content"><?php echo $row['notes'] ?></div>
<!-- Notes of user 1 -->
</div>
</div>
And similarly if there are 3 users, there should one row with two columns and another row with one column.
Is there any way to do that?
Edit: Added my php code here.
<?php
$query = "SELECT * FROM users";
$result = mysqli_query($conn, $query);
while($row = mysqli_fetch_array($result)){
?>
<div class="row">
<div class="col">
<div class="col-content"><?php echo $row['notes'] ?></div>
</div>
</div>
<?php } ?>
Problem with that code is it's creating a new row with "one column" for every user. My goal is to have "two columns" in the row.

you can achieve things like that with the modulo operator (%) within loops.
$i = 0;
$rowCount = mysqli_num_rows($result);
$rowsHTML = '';
while($row = mysqli_fetch_array($result)){
$notesHTML = '<div class="col">
<div class="col-content">'.$row['notes'].'</div>
<!-- Notes of user 1 -->
</div>';
if($i%2 == 0){
$notesHTML = '<div class="row">'.$notesHTML;
// check if its the last item and the row has to be closed after 1 col
if($i+1 == $rowCount){
$notesHTML = $notesHTML.'</div>';
}
} else {
$notesHTML = $notesHTML.'</div>';
}
$rowsHTML .= $notesHTML;
$i++;
}
echo $rowsHTML;

<?php
$query = "SELECT * FROM users";
$result = mysqli_query($conn, $query);
$i = 0;
?>
<div class="row">
<?php
while($row = mysqli_fetch_array($result)){
if($i>1 && $i%2==0) echo '</div><div class="row">';
$i++;
?>
<div class="col">
<div class="col-content"><?php echo $row['notes'] ?></div>
</div>
<?php } ?>
</div>

Related

How to print out mySQL database into a div table?

Grades table is this:
username assignment weight mark
a a1 10% 50%
b a1 10% 60%
How would I print this out using php/html?
<div class="a">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableHead">Username</div>
<div class="divTableHead">assignment</div>
<div class="divTableHead">weight</div>
<div class="divTableHead">mark</div>
</div>
</div>
<div class="divTableBody">
<?php
include("config.php");
$sql = "SELECT username, assignment, weight, mark FROM grades";
$result = mysqli_query($db,$sql);
while($row = $result->fetch_assoc()) {
?>
<div class="divTableRow">
<div class="divTableCell">$row['username']</div>
<div class="divTableCell">$row['assignment']</div>
<div class="divTableCell">$row['weight']</div>
<div class="divTableCell">$row['mark']</div>
</div>
</div>
</div>
$db is the connected database that is from config.php. How would I keep looping through and output the grades table?
accidental edit
You're missing to echo your record values.
From just $row['username'] changed to <?php echo $row['username']; ?>
And you missed } to close your while loop. Closed it as well with - <?php } ?>
Updated code:
<div class="divTable blueTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableHead">Username</div>
<div class="divTableHead">assignment</div>
<div class="divTableHead">weight</div>
<div class="divTableHead">mark</div>
</div>
</div>
<div class="divTableBody">
<?php
include("config.php");
$sql = "SELECT username, assignment, weight, mark FROM grades";
$result = mysqli_query($db,$sql);
while($row = $result->fetch_assoc()) {
?>
<div class="divTableRow">
<div class="divTableCell"><?php echo $row['username']; ?></div>
<div class="divTableCell"><?php echo $row['assignment']; ?>/div>
<div class="divTableCell"><?php echo $row['weight']; ?></div>
<div class="divTableCell"><?php echo $row['mark']; ?></div>
</div>
<?php } ?>
</div>
</div>
Don't forget to output your values
<?php echo $row['username']; ?>

How would i change a CSS class for each item i'm retrieving from a DB?

How would i change the bootstrap CSS grid class for each item i'm retrieving from a DB?
'while($row = mysqli_fetch_array($retval, MYSQLI_ASSOC)) {'
so they are nested in a 3x3 grid.
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="panel-body"><?php echo '<img class = "resize" src="images/'.$product_image.'" />'; ?></div>
</div>
</div>
</div>
Try like this I hope this will work.
<div class="container">
<div class="row">
<?php
while($row = mysqli_fetch_array($retval, MYSQLI_ASSOC)) { ?>
<div class="col-sm-4">
<div class="panel-body"><?php echo '<img class = "resize" src="images/'.$product_image.'" />'; ?></div>
</div>
<?php
} ?>
</div>
</div>

How to style tables in articles page?

I imported a database in phpMyAdmin that contains articles. I want it to be regulated, to automatically post the image, title, and contents in the articles page. And to direct it to another page when clicked.
But when rendering the articles page, the second row has two columns offset. I think it's the content of the first 2 articles that's making the problem since I did another tables with few contents in it then it renders exactly the way I want(a row that contains 3 articles an no offset below it). I'm a newbie here, feel free to suggest if there's a better way. I genuinely appreciate it. Thank you!
<div class="blogs-2" id="blogs-2">
<div class="container">
<div class="row">
<div class="col-md-10">
<div class="row">
<?php
$sql = "SELECT * FROM news LIMIT 20";
$result= $DBcon->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
?>
<div class="col-md-4" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0; ">
<div class="card card-plain card-blog" style="max-height:300px;float:left;">
<div class="card-image">
<a href="../news/article.php?id=<?php echo $row['id']; ?>">
<img class="img img-raised" src="<?php header("Content-type: image/png"); echo $row['featured_image'] ?>" style="max-height:300px;" />
</a>
</div>
<div class="card-content">
<h4 class="card-title">
<a href="../news/article.php?id=<?php echo $row['id']; ?>">
<?php echo $row['title']; ?>
</a>
</h4>
<p class="card-description" style="overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;">
<?php echo $row['content']; ?>
</p>
<p class="card-description">
Read More
</p>
</div>
</div>
</div>
<?php
}
}
else {
echo "<p>No News Articles to Display</p>";
}
?>
</div>
</div>
<div class="col-md-2">
<h4 class="title">Recent News</h4>
<ul>
<?php
$sql = "SELECT * FROM news LIMIT 5";
$result= $DBcon->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "<li style='list-style:none;color:black;padding-top:5px;padding-bottom:5px;'><a href='../news/article.php?id={$row['id']}'>" .$row['title']. "</a></li>";
}
}
else {
echo "<li style='list-style:none;'>No Recent News</li>";
}
?>
</ul>
</div>
</div><!--row-->
</div><!--container-->
</div><!--blogs-->

Add a Row After 6 Records Automatically

Here Is The Code
<div class="row">
<div class="col-md-9 column">
<div class="services-listing">
<?php if(!empty($data)):
foreach ($data as $rows ) : ?>
<div class="service">
<div class="service-img"><span><img src="dashboard/uploads/<?php echo $rows['img'];?>" alt="" /></div>
<div class="service-detail">
<h3><?php echo $rows['name'];?></h3>
</div>
</div>
<!-- Service -->
<?php endforeach; else : echo "No Record Found Against This Services"; endif;?>
</div>
<!-- Service Listing -->
</div>
i want to start design from <div class="row"> not from <div class="service"> now it repeating this div i want new <div class="row"> genrated after every 6 records
<div class="row">
<div class="col-md-9 column">
</div>
</div>
Looking for something like this, let me know if it works for you
<?php
$start = 6;
$end = 1;
if(!empty($data)){
foreach ($data as $rows ) {
if ($start % 6 == 0) { ?>
<div class="row">
<div class="col-md-9 column">
<?php } ?>
<div class="services-listing">
<div class="service">
<div class="service-img"><span><img src="dashboard/uploads/<?php echo $rows['img'];?>" alt="" /></div>
<div class="service-detail">
<h3><?php echo $rows['name'];?></h3>
</div>
</div>
<!-- Service -->
</div>
<?php if ($end % 6 == 0) { ?>
</div>
</div>
<?php } $start++; $end++;
}
}
else{ echo "No Record Found Against This Services"; }
?>
you need to wrap div row with foreach first and then:
<?php $i = 0; ?>
<?php if(!empty($data)):
foreach ($data as $rows ) : ?>
<?php $i++; ?>
<div class="row">
<div class="col-md-9 column">
<div class="services-listing">
<div class="service">
<div class="service-img"><span><img src="dashboard/uploads/<?php echo $rows['img'];?>" alt="" /></div>
<div class="service-detail">
<h3><?php echo $rows['name'];?></h3>
</div>
<!-- Service -->
</div>
<!-- Service Listing -->
</div>
<!-- col-md-9 column -->
</div>
<!-- Row -->
</div>
<?php if($i%6==0):?>
<div class="row">
<div class="col-md-9 column">
</div>
</div>
<?php endif; ?>
<?php endforeach; else : echo "No Record Found Against This Services"; endif;?>
just please re-check all divs structure to be sure whether all of them are closed

loop through Row PHP mysql

I was able to retrieve data from Mysql database however every 4 column I need to close row and start and new row
Following is my HTML code that I am trying to loop through columns and after every 4 columns close the row and keep adding columns from database.
Here is my code (I know this is not PDO and I am trying to learn so I can convert to PDO MySQLi connection)
<div class="row">
<div class="row margin-bottom-20">
<?php
include('dbconnect.php');
$query = "SELECT * FROM selection";
mysql_set_charset("UTF8");
$result = mysql_query($query) or die(mysql_error());
for($i=1; $row = mysql_fetch_array($result); $i++){
?>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-tasks"></i> <strong><?php echo $row['Title']; ?></strong></h3>
</div>
<div class="panel-body">
<p>
<?php echo $row['ContactInfo']; ?><br/>
<img class="img-responsive" src="http://myurl.com/selections/<?php echo $row['file_url']; ?>" >
</p>
</div>
</div>
</div>
<?php
}
?>
I need to add a new for loop but I haven't been successful so far. Thank you for your help.
if($i%4==0)
{
//close the existing div and start new row div here
}
That will start a new row after every 4 iterations
Try this
<?php
include('dbconnect.php');
$query = "SELECT * FROM selection";
mysql_set_charset("UTF8");
$res = mysql_query($query) or die(mysql_error());
while($rows = mysql_fetch_array($res)){
$result[] = $rows;
}
$array = array_chunk($result, 4);
foreach ($array as $value) {
foreach ($value as $row){
?>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-tasks"></i> <strong><?php echo $row['Title']; ?></strong></h3>
</div>
<div class="panel-body">
<p>
<?php echo $row['ContactInfo']; ?><br/>
<img class="img-responsive" src="http://myurl.com/selections/<?php echo $row['file_url']; ?>" >
</p>
</div>
</div>
</div>
<?php
}
}

Categories