How show results in another column via "Foreach"? - php

I want to display more results in another column via foreach from the database but I can't get it to work.
<div class="row">
<div class="col-md-4">
<?php
if (is_array($results))
{
foreach ($results as $data) { ?>
<!-- User item starts -->
<div class="user-item">
<!-- User action buttons -->
<div class="user-btns">
<i class="fa fa-pencil"></i>
<i class="fa fa-times"></i>
</div>
<!-- Image -->
<img src="<?php echo $data->avatar ?>" alt="" class="img-responsive">
<!-- User details -->
<div class="u-details">
<h5><i class="fa fa-user"></i><?php echo $data->first_name . ' ' . $data->last_name ?></h5>
<h5><i class="fa fa-envelope"></i> <?php echo $data->email ?></h5>
<h5><i class="fa fa-user-md"></i> <?php echo $data->username ?></h5>
</div>
<div class="clearfix"></div>
</div>
<!-- User item ends -->
<?php } } ?>
</div>
<div class="col-md-4">
<?php
if (is_array($results))
{
foreach ($results as $data) { ?>
<!-- User item starts -->
<div class="user-item">
<!-- User action buttons -->
<div class="user-btns">
<i class="fa fa-pencil"></i>
<i class="fa fa-times"></i>
</div>
<!-- Image -->
<img src="<?php echo $data->avatar ?>" alt="" class="img-responsive">
<!-- User details -->
<div class="u-details">
<h5><i class="fa fa-user"></i><?php echo $data->first_name . ' ' . $data->last_name ?></h5>
<h5><i class="fa fa-envelope"></i> <?php echo $data->email ?></h5>
<h5><i class="fa fa-user-md"></i> <?php echo $data->username ?></h5>
</div>
<div class="clearfix"></div>
</div>
<!-- User item ends -->
<?php } } ?>
</div>
</div>
As you can see, it's two different columns. I want to do foreach and show one set of information in one column and the other set in another. However, the code below returns the same value in both columns.
how can I do this? Thanks.

You are iterating through each item of results in both loops, so their results are the same. Why not try something like this
<?php
$cols = 3;
?>
<div class="row">
<?php
if (is_array($results))
{
for($i = 0 ; $i < $cols ; $i++)
{
echo "
<div class='col-md-".(12/$cols)."'>";
for ($j = 0 ; $j < (count($results) / $cols) + 1 ; $j++)
{
if ($i * $cols + $j < count($results)) // make sure it won't give errors for array out of range....
{
echo "
<div class='user-item'>
<div class='user-btns'>
<a href='#' class='btn btn-green btn-xs'><i class='fa fa-pencil'></i></a>
<a href='#' class='btn btn-red btn-xs'><i class='fa fa-times'></i></a>
</div>
<img src='".$results[$i* $cols + $j]->avatar."' alt=' class='img-responsive'/>
<div class='u-details'>
<h5><i class='fa fa-user'></i>".$results[$i* $cols + $j]->first_name . ' ' . $results[$i* $cols + $j]->last_name."</h5>
<h5><i class='fa fa-envelope'></i>".$results[$i* $cols + $j]->email."</h5>
<h5><i class='fa fa-user-md'></i>".$results[$i * $cols + $j]->username."</h5>
</div>
<div class='clearfix'></div>";
}
}
echo "
</div>";
}
}
?>
</div>

Related

Bootstrap card element stretching

So the problem is that the cards are really stretching and I have tried everything to fix it and still haven't achieved the fix. Any way to fix this since I'm out of the clues? And what is the problem and where?
My container that holds cards
<div class="container mt-5">
<div class="row align-items-center">
<div class="col-sm-12 mx-auto">
<div class="card-group">
<?php
$companies = new Companies();
$companies->showAllCompanies();
?>
</div>
</div>
</div>
</div>
My PHP showAllCompanies code
public function showAllCompanies(){
$datas = $this->getAllCompanies();
foreach ($datas as $data){
$name = $data['name'];
$orgnr = $data['organization_number'];
$notes = empty($data['notes']) ? "No notes" : $data['notes'];
$id = $data['id'];
echo "
<div class='card me-2 d-block' style='width: 18rem;'>
<div class='card-body'>
<h4 class='card-title'>$name</h4>
<p class='card-text'><i class='bi bi-stickies'></i> $notes</p>
</div>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>Stores Owned <span class='badge text-bg-primary'>XX</span></li>
<li class='list-group-item'>Organization Number <span
class='badge text-bg-primary'>$orgnr</span></li>
</ul>
<div class='card-body'>
<a href='#' class='btn btn-primary'>Edit</a>
<a href='#' class='btn btn-danger'>Delete</a>
</div>
</div>
";
}
return;
}
You're squeezing all your cards onto one row.
If you limit the amount of cards you display to 6 per row you can update your function to this:
public function showAllCompanies(){
$cardsPerRow = 6;
$i = 0;
$datas = $this->getAllCompanies();
foreach ($datas as $data){
$name = $data['name'];
$orgnr = $data['organization_number'];
$notes = empty($data['notes']) ? "No notes" : $data['notes'];
$id = $data['id'];
if($i == 0){
echo '<div class="row">';
}
echo "
<div class='card me-2 d-block' style='width: 18rem;'>
<div class='card-body'>
<h4 class='card-title'>$name</h4>
<p class='card-text'><i class='bi bi-stickies'></i> $notes</p>
</div>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>Stores Owned <span class='badge text-bg-primary'>XX</span></li>
<li class='list-group-item'>Organization Number <span
class='badge text-bg-primary'>$orgnr</span></li>
</ul>
<div class='card-body'>
<a href='#' class='btn btn-primary'>Edit</a>
<a href='#' class='btn btn-danger'>Delete</a>
</div>
</div>
";
if(++$i >= $cardsPerRow){
echo '</div>';
$i = 0;
}
}
return;
}

How to insert multiple products slider in php

The following section creates a product slider from the first 6 database elements. How can I insert the next database elements(from row 6 to row 12) in a new product slider?
<section class="food" id="food">
<div class="swiper product-slider">
<div class="swiper-wrapper">
<?php
$sql = "SELECT* FROM products";
$res = mysqli_query($conn, $sql);
$counter = 0;
if(mysqli_num_rows($res) > 0){
while($row = mysqli_fetch_assoc($res)){
++$counter;
if($counter <= 6){
$id = $row['productId'];
$image = $row['productImg'];
$name = $row['productName'];
$price = $row['productPrice'];
$quantity = $row['productQuantity'];?>
<form action="food.php" method="post" class="swiper-slide box">
<img src="<?php echo $image?>" alt="">
<h3><?php echo $name?></h3>
<div class="price"> $ <?php echo $price?></div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
add to cart
</form><?php
}
}
}
?>
</div>
</div>
</section>
Assuming your Carousel is configured to work on the class product-slider and not on the id="food", you can place an if in your foreach loop to start a new slider after 6 elements.
Something like
++$counter;
if($counter == 7){
?>
</div>
</div>
<div class="swiper product-slider">
<div class="swiper-wrapper">
<?php
}
Furthermore, you need to change your breakpoint from 6 elements to 12. So you could just change your existing if from <=6 to <=12. However, the best practice would be instead of limiting the PHP array to limit the original SQL query.
So edit your initial query to
SELECT * FROM products LIMIT 12
Here's the complete code
<section class="food" id="food">
<div class="swiper product-slider">
<div class="swiper-wrapper">
<?php
$sql = "SELECT * FROM products LIMIT 12";
$res = mysqli_query($conn, $sql);
$counter = 0;
if(mysqli_num_rows($res) > 0){
while($row = mysqli_fetch_assoc($res)){
++$counter;
if($counter == 7){
?>
</div>
</div>
<div class="swiper product-slider">
<div class="swiper-wrapper">
<?php
}
$id = $row['productId'];
$image = $row['productImg'];
$name = $row['productName'];
$price = $row['productPrice'];
$quantity = $row['productQuantity'];?>
<form action="food.php" method="post" class="swiper-slide box">
<img src="<?php echo $image?>" alt="">
<h3><?php echo $name?></h3>
<div class="price"> $ <?php echo $price?></div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
add to cart
</form><?php
}
}
?>
</div>
</div>
</section>

Print $variable value using jQuery is not working properly?

I have a small interface Site (check site interface once) where I am showing articles count in yellow box I am trying to print the value with help of jQuery in the column but value is printing 1 column after every yellow box
I have tried a lot but nothing works
<div class="news-card NewsList">
<div class="row">
<div class="col-md-2 ">
<div class="news-left pb-0">
<div class="view-more">
<a data-toggle="collapse" class="listSimilarNews" href="#collapse<?=$i?>" role="button" aria-expanded="true" aria-controls="#collapse<?=$r?>">
<span id="listSimilarNews"><?php echo (count($nestedarr)); ?></span><br>
Articles
<i class="accordionarrow icofont-rounded-down"></i>
</a>
</div>
</div>
</div>
</div>
</div>
$('#listSimilarNews').html( <?php echo (count($nestedarr)); ?>);
for more reference complete code with PHP
<?php
$mainarr = [];
for($i=0; $i < count($row); $i++){
?>
<div class="news-card NewsList">
<div class="row">
<div class="col-md-2 ">
<div class="news-left pb-0">
<div class="view-more"><a data-toggle="collapse" class="listSimilarNews" href="#collapse<?=$i?>" role="button" aria-expanded="true" aria-controls="#collapse<?=$r?>">
<span id ="listSimilarNews"><?php print_r(count($nestedarr)) ; ?>
</span><br>Articles <i class="accordionarrow icofont-rounded-down"></i></a>
</div>
</div>
</div>
</div>
</div>
<?php
$nestedarr=[];
while(($j) < count($row) && ($id == (string) $row[$j]['_id'])){
$i++;
$j++;
array_push($nestedarr, $row[$j]['newsSources']);
}
array_push($arr, $nestedarr);
?>
<script language='javascript'>
$('#listSimilarNews').html( '<?php echo (count($nestedarr)); ?>');
</script>
<?php
}
?>

Add Another Card to the Right PHP SQL

How can i add another user to its right, when i limit it to 5 it goes down not to the right im pretty stuck here how can i align it, i dont know the term or what you call that thing thanks in advance
<h2>Recently Added</h2>
<?php
include_once('connection.php');
$sql = "SELECT * FROM tblstdpro
ORDER BY StdID DESC LIMIT 0, 5";
$result = mysqli_query($conn,$sql);
$count = 0;
while($row = mysqli_fetch_array($result)){
$StudentID="<a href='ProfileRecords.php?id=".$row['StdID']."'>".$row['StdID']."</a>";
$StdName="<a href='ProfileRecords.php?id=".$row['StdID']."'>" . $row['Fname'] . ' ' . $row['Lname'] . "</a>";
?>
<div class="col-md-6">
<!-- USERS LIST -->
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title">Latest Members</h3>
<div class="box-tools pull-right">
<span class="label label-danger"> New Members</span>
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body no-padding">
<ul class="users-list clearfix">
<li>
<img src="<?php echo $row['StdImage'];?>" alt="User Image">
<a class="users-list-name" href="#"><?php echo "$StdName" ?></a>
<span class="users-list-date"><?php echo "$StudentID" ?></span>
<?php } ?>
<div class="box-footer text-center">
View All Users
</div><!-- /.box-footer -->
</div><!--/.box -->
</div><!-- /.col -->
</div><!-- /.row -->

bootstrap 2.3 multiple images / items in carousel

I am working on a PHP based website which is using Twitter Bootstrap 2. I am pulling the users from MySQL database and trying to display them in multiple frames/items of carousel on a screen rather than a single item using while loop.
This is what my carousel looks like at present, as you will notice user 5 is not supposed to appear the way it is right now and is only supposed to appear when i click on arrow on right side of the carousel.
This is what my php code looks like
<div class="carousel slide" id="myCarousel">
<h4 class="carousel-title">Text title</h4>
<div class="carousel-inner">
<?php
while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
?>
<div class="item active">
<div class="span3 mef-3">
<div class="about portrait">
<div class="tooltip-demo">
<a href="#" rel="tooltip" data-placement="top" data-toggle="tooltip"
data-title="">
<img class="img-circle" width="180" height="200" data-src="holder.js/360x270"
alt="270x280"
style="" src="assets/img/adviser.png"></a>
</div>
<div class="caption">
<h3 class="name" style="text-align: center"><?php echo $row['fname']." ".$row['lname'] ?></h3>
<p style="text-align: center">
Specialities</p>
</div>
<div class="mefradio">
<input type="radio" name="adviser" id="adviser" value='<?php echo $row['user_id']."|".$row['fname']." ".$row['lname'] ?>'><br>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
<a data-slide="prev" href="#textCarousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#textCarousel" class="right carousel-control">›</a>
</div>
I will really appreciate any guidance on how to get it to work
UPDATE
This is the updated code that is working, thanks to #I can Has Kittenz
<div class="carousel slide" id="myCarousel">
<h4 class="carousel-title">Text title</h4>
<div class="carousel-inner">
<?php
$i = 1;
$next_item = true;
while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
if ($i == 1) {
echo '<div class="item active">';
} elseif ($next_item == true) {
echo '<div class="item">';
}
?>
<div class="span3 mef-3">
<div class="about portrait">
<div class="tooltip-demo">
<a href="#" rel="tooltip" data-placement="top" data-toggle="tooltip"
data-title="">
<img class="img-circle" width="180" height="200" data-src="holder.js/360x270"
alt="270x280"
style="" src="assets/img/adviser.png"></a>
</div>
<div class="caption">
<h3 class="name"
style="text-align: center"><?php echo $row['fname'] . " " . $row['lname'] ?></h3>
<p style="text-align: center">
Specialities</p>
</div>
<div class="mefradio">
<input type="radio" name="adviser" id="adviser"
value='<?php echo $row['user_id'] . "|" . $row['fname'] . " " . $row['lname'] ?>'><br>
</div>
</div>
</div>
<?php
$next_item = false;
if ($i % 4 == 0) {
echo '</div>';
$next_item = true;
}
$i++;
}
?>
</div>
<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
</div>
The JS that needs to go with this is as following
<script>
$(document).ready(function(){
$('#myCarousel').carousel({
pause: true,
interval: false
});
});
$('#myCarousel').on('slid', '', function() {
var $this = $(this);
$this.find('.carousel-control').show();
if($('.carousel-inner .item:first').hasClass('active')) {
$this.find('.left.carousel-control').hide();
} else if($('.carousel-inner .item:last').hasClass('active')) {
$this.find('.right.carousel-control').hide();
}
});
</script>
Updated:
As per the way Bootstrap 2.3 carousel works, multiple items like the way you have done won't show 4 items in a row and only one .item class can have an .active class to it, so here's what we would do:
<div class="item active">
<div class="span3"><img></div>
<div class="span3"><img></div>
<div class="span3"><img></div>
<div class="span3"><img></div>
</div>
<div class="item">
<div class="span3"><img></div>
<div class="span3"><img></div>
<div class="span3"><img></div>
<div class="span3"><img></div>
</div>
That's how we are going to structure your elements to look like. So code in:
<!-- code follows -->
<div class="carousel-inner">
<?php
$i = 1;
$next_item = true;
while ($i < 10)
{
if ($i == 1)
{
echo '<div class="item active">';
}
elseif ($next_item == true)
{
echo '<div class="item">';
}
?>
<div class="span3 mef-3">
<!-- code follows -->
</div>
<?php
$next_item = false;
if ($i % 4 == 0)
{
echo '</div>';
$next_item = true;
}
$i++;
}
?>
Also, since you name your carousel as id=myCarousel, your prev and next button's href should be href="#myCarousel" and not href="#textCarousel".
Here's a demo of what it looks like.

Categories