Im trying to add a group onto some bootstrap cards so that a the cards are displaying the data first and then the relevant cards after, e.g:
22 March 2018
1st-Card 2nd-Card
23 March 2018
1st-Card
At the moment I have this, but this displays all of my cards on a row:
<div class="card">
<div class="card-body">
<div class="card-header"><i class="material-icons floatleft">today</i><div floatleft>'.date("d/m/Y", strtotime($row['Date'])).'</div></div>
<h5 class="card-title">'.$row['Firstname'].' '.$row['Surname'].'</h5>
<p class="card-text">'.$row['Notes'].'</p>
</div>
<div class="card-footer">
<small class="text-muted">Added: '.date("d/m/Y", strtotime($row['timestamp'])).'</small>
</div>
</div>
</div>
Is their anyway to group by date?
This is my PHP for each row:
<?php
$no = 1;
$total = 0;
while ($row = mysqli_fetch_array($tablequery))
{
$amount = $row['LineRef'] == 0 ? '' :
number_format($row['LineRef']);
echo
' <div class="col-sm-3 OMHCardPadding">
<div class="card">
<div class="card-body">
<div class="card-header"><i class="material-icons floatleft">today</i>
<div floatleft>'.date("d/m/Y", strtotime($row['Date'])).'</div></div>
<h5 class="card-title OMHCardPadding">'.$row['Firstname'].' '.$row['Surname'].'</h5>
<p class="card-text OMHCardPadding">'.$row['Notes'].'</p> </div> <div class="card-footer">
<small class="text-muted">Added: '.date("d/m/Y",strtotime($row['timestamp'])).'</small>
</div>
</div>
</div>
';
$total += $row['LineRef'];
$no++;
}?>
My actual query is just a simple SELECT statement:
SELECT * FROM APPOINTMENTS
Related
enter image description here
I'm trying to make a dashboard
When placing small boxes in the board
The boxes that are in the new row go outside the bounds of the page
The boxes in the first row appear correctly, but the problem starts when they go down to the second and third row, and so on.....
How can I solve this problem please?`
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-hc">
<div class="inner text-hc">
<?php
$stmt = $conn->prepare("SELECT * FROM ticket_prices ");
$stmt->execute();
$total = 0;
foreach ($stmt as $srow) {
$subtotal = $srow['TicketPrice'];
$total += $subtotal;
}
echo "<h3>" . $total, 2 . " AED</h3>";
?>
<p>Total Sales from products</p>
</div>
<div class="icon">
<i class="fa fa-shopping-cart"></i>
</div>
<a href="../booking/index.php" class="small-box-footer">More info <i
class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-hc">
<div class="inner text-hc">
<?php
$stmt = $conn->prepare("SELECT * FROM ticket_prices ");
$stmt->execute();
$total = 0;
foreach ($stmt as $srow) {
$subtotal = $srow['TicketPrice'];
$total += $subtotal;
}
echo "<h3>" . $total, 2 . " AED</h3>";
?>
<p>Total Sales from products</p>
</div>
<div class="icon">
<i class="fa fa-shopping-cart"></i>
</div>
<a href="../booking/index.php" class="small-box-footer">More info <i
class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-hc">
<div class="inner text-hc">
<?php
$stmt = $conn->prepare("SELECT * FROM ticket_prices ");
$stmt->execute();
$total = 0;
foreach ($stmt as $srow) {
$subtotal = $srow['TicketPrice'];
$total += $subtotal;
}
echo "<h3>" . $total, 2 . " AED</h3>";
?>
<p>Total Sales from products</p>
</div>
<div class="icon">
<i class="fa fa-shopping-cart"></i>
</div>
<a href="../booking/index.php" class="small-box-footer">More info <i
class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-hc">
<div class="inner text-hc">
<?php
$stmt = $conn->prepare("SELECT * FROM ticket_prices ");
$stmt->execute();
$total = 0;
foreach ($stmt as $srow) {
$subtotal = $srow['TicketPrice'];
$total += $subtotal;
}
echo "<h3>" . $total, 2 . " AED</h3>";
?>
<p>Total Sales from products</p>
</div>
<div class="icon">
<i class="fa fa-shopping-cart"></i>
</div>
<a href="../booking/index.php" class="small-box-footer">More info <i
class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-hc">
<div class="inner text-hc">
<?php
$stmt = $conn->prepare("SELECT * FROM ticket_prices ");
$stmt->execute();
$total = 0;
foreach ($stmt as $srow) {
$subtotal = $srow['TicketPrice'];
$total += $subtotal;
}
echo "<h3>" . $total, 2 . " AED</h3>";
?>
<p>Total Sales from products</p>
</div>
<div class="icon">
<i class="fa fa-shopping-cart"></i>
</div>
<a href="../booking/index.php" class="small-box-footer">More info <i
class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
</section>`
Your HTML structure is wrong. You can see it clearly in sublime or vs code or any of the html editor.
Assuming that you are going to Loop either the 'Box' or the 'Row of 4 Boxes', I have re-structured the HTML without the "PHP" code.
Looping Option 1 :
Look for <!-- Looping Option 1 -->, You can loop the boxes from here.
Looping Option 2 :
Look for <!-- Looping Option 2 -->, You can loop the row of 4 boxes from here.
<section>
<div class="container">
<!-- Lopping option 2 -->
<div class="row">
<!-- Lopping option 1 -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-hc">
<div class="inner text-hc">
<h3></h3>
<p>Total Sales from products</p>
</div>
<div class="icon">
<i class="fa fa-shopping-cart"></i>
</div>
<a href="../booking/index.php" class="small-box-footer">More info <i
class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- Lopping option 1 -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-hc">
<div class="inner text-hc">
<h3></h3>
<p>Total Sales from products</p>
</div>
<div class="icon">
<i class="fa fa-shopping-cart"></i>
</div>
<a href="../booking/index.php" class="small-box-footer">More info <i
class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-hc">
<div class="inner text-hc">
<h3></h3>
<p>Total Sales from products</p>
</div>
<div class="icon">
<i class="fa fa-shopping-cart"></i>
</div>
<a href="../booking/index.php" class="small-box-footer">More info <i
class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-hc">
<div class="inner text-hc">
<h3></h3>
<p>Total Sales from products</p>
</div>
<div class="icon">
<i class="fa fa-shopping-cart"></i>
</div>
<a href="../booking/index.php" class="small-box-footer">More info <i
class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
</div>
<!-- Lopping option 2 -->
</div>
</section>
I have problem in listing the products 3 in a row the line get broken at the 4th
when it's at the 4th item it's listing them like
1. row 1 1 1
2. row 0 0 1
3. row 1 0 0
4. row 1 1 1
5. row 0 0 1
I can't find where is the problem.
I checked the bootstrap container structure. It's says the first col after the row is the left the second is the center and the third is the right.
I made 3 col in a row but that didn't work i can't use the left side it's like the container has only center and right side. So the size of the items not fitting the container thats why it's skipping as i find when i make the item size <div class="col-md-2"> the items get in the line correct but they become smaller. I need them <div class="col-md-3"> everything get broken when it's become 3 or 4
<?php
include "header.php";
$id=isset($_GET['kategori_id']) ? $_GET['kategori_id']:"";
$kitap_cek_miktar = 12;
$sql=$db->prepare("SELECT COUNT(*) AS kayit_sayisi FROM kitap_bilgi where kategori_id=$id ");
$sql->execute();
$kayit_say=$sql->fetch(PDO::FETCH_ASSOC);
$kayit_sayisi = $kayit_say['kayit_sayisi'];
$sayfa_sayisi=ceil($kayit_sayisi/$kitap_cek_miktar);
if (!isset($_GET['sayfa'])) {
$sayfa=1;
}else{
$sayfa=$_GET['sayfa'];
}
$ilk_kayit=($sayfa-1)*$kitap_cek_miktar;
$resim=$db->prepare("SELECT kitap_ad,kitap_resim, kitap_fiyat,kitap_id from kitap_bilgi where kategori_id=$id LIMIT ".$ilk_kayit.",".$kitap_cek_miktar);
$resim->execute();
$veri = $resim->fetchAll(PDO::FETCH_ASSOC); // tablo verilerini oku
?>
<div class="container">
<!--- this stucture is like a banner for an e-commerce website --->
<div class="row">
<div class="col-md-12">
<div class="page-title-wrap">
<div class="page-title-inner">
<div class="row">
<div class="col-md-4">
<div class="bread">Home › Category</div>
<div class="bigtitle">Category</div>
</div>
<div class="col-md-3 col-md-offset-5">
<button class="btn btn-default btn-red btn-lg">Purchase Theme</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^--->
<div class="row">
<div class="col-md-9"><!--Main content-->
<div class="title-bg"> <!--- this stucture is to change the list way an e-commerce website --->
<div class="title">Category - All products</div>
<div class="title-nav">
<i class="fa fa-th-large"></i>grid
<i class="fa fa-bars"></i>List
</div>
</div> <!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^--->
<div class="row prdct"><!--Products listing the products pic, price, name -->
<?php foreach($veri as $kayit): ?>
<div class="col-md-4"> <!-- items list size -->
<div class="productwrap">
<div class="pr-img">
<a href="urun_detay.php?kitap_id=<?= $kayit['kitap_id']?>">
<img src="images/<?= $kayit['kitap_resim']?>" alt="<?= $kayit['kitap_ad']?>" class="img-responsive">
</a>
<div class="pricetag">
<div class="inner"><?= $kayit['kitap_fiyat'].'₺'?></div>
</div>
</div>
<span class="smalltitle">
<?= $kayit['kitap_ad'].$kayit['kitap_id']?>
</span>
</div>
</div>
<?php endforeach; ?>
</div><!--Products ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^--->
<ul class="pagination shop-pag"><!--pagination making the pages 1.2.3 next -->
<?php for ($sayfa=1;$sayfa<=$sayfa_sayisi;$sayfa++)
{
echo '<li>
' . $sayfa . '
</li> ';
} ?>
</ul><!--pagination--><!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^--->
</div><!--Main content-->
<div class="col-md-3"><!--sidebar listing the categories -->
<div class="title-bg">
<div class="title">Categories</div>
</div>
<div class="categorybox">
<?php categories();?>
</div>
</div><!--sidebar-->
</div>
</div>
<?php
include('footer.php');
?>
I need to display cards horizontally from my database using PHP
My code is below
function getHighlights($conn){0
$q = "SELECT *, MONTHNAME(date) AS themonth, DAYOFMONTH(date) AS theday, YEAR(date) AS theyear FROM highlights ORDER BY date DESC LIMIT 0,3";
$r = mysqli_query($conn, $q);
while($page = mysqli_fetch_assoc($r)){
echo '
<div class="container">
<div class="row-fluid">
<div class="card-deck mt-5 mb-4">
<div class="card col-md-6 col-lg-4 col-xs-12">
<img src="../thadd/images/'.$page['image'].'" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">'.$page['title'].'</h5>
<p class="card-text mb-5">'.$page['message'].'</p>
<div class="text-center mb-3">
Read More →
</div>
<div class="card-footer text-muted">
Posted on Tuesday by '.$page['author'].'
</div>
</div>
</div>
</div>
</div>
</div>
';
}
Generally, move the row out of the loop as shown in the following pseudo code.
<div class="container">
<div class="row">
-- WHILE LOOP --
<div class="col">
-- OUTPUT DATA --
</div> <!-- col -->
-- END WHILE --
</div><!-- row -->
</div> <!-- container -->
Read the bootstrap grid
https://getbootstrap.com/docs/4.3/layout/grid/
I'm trying to have each element of an array to start on a new line while allowing other content to be on the same line.
//arrays of plannames
$planname_num=array(1=>"Alpha","Omega","Gamma");
//arrays of planlevels
$planlevels_num=array(1=>"Bronze","Silver","Gold");
/*
*
* Get The Length of Plan Name Array
*
*
*/
$planname_array_length=count($planname_num);
/*
*
* Get The Length of Plan Level Array
*
*
*/
$planlevel_array_length=count($planlevels_num);
$pnArrayLength=$planname_array_length;
$plArrayLength=$planlevel_array_length;
for ($pn=1; $pn <= $pnArrayLength; $pn++) {//loop to create plan name indicators
for ($pl=1; $pl <= $plArrayLength; $pl++) {//loop to create plan level indicators
//Create pricing for each plan from db
$getplansql = "SELECT SUM(`planPrice`) AS planPrice,planDescription FROM `plans`
WHERE planName = '$planname_num[$pn]' AND planLevel = '$planlevels_num[$pl]'";
$resultplans = $conn->query($getplansql);
while($plan = mysqli_fetch_assoc($resultplans)) {$i++;// output data of each row
//calculate sales price
$finalpricing = ($plan['planPrice'] * 0.7) + ($plan['planPrice']);
//create plan card
$resultplanarray.= '
<div class="col-lg-2">
<div class="panel price panel-red">
<div class="panel-heading text-center">
<h3>'.$planname_num[$pn].'</h3>
<h3>'.$planlevels_num[$pl].'</h3>
</div>
<div class="panel-body text-center">
<p class="lead panel-body-pricing" style=""><strong>$'.round($finalpricing).'/month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="icon-ok text-danger"></i>
'.$plan['planDescription'].'
</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-danger" href="#">BUY</a>
</div>
</div>
</div>';
}}}
//print result outside of while loop
echo $resultplanarray;
This code will output as follow until the grid of 12 is filled:
Alpha Alpha Alpha Omega Omega Omega
Bronze Silver Gold Bronze Silver Gold
I'd like the array to split and print the different plan groups each on a new line like this:
Alpha Alpha Alpha
Bronze Silver Gold
Omega Omega Omega
Bronze Silver Gold
How can this be achieved?
Add outer container for all plan name
$planname_num = array(1=>"Alpha","Omega","Gamma");
$planlevels_num = array(1=>"Bronze","Silver","Gold");
$planname_array_length = count($planname_num);
$planlevel_array_length = count($planlevels_num);
$resultplanarray = '';
for($i = 1; $i <= $planname_array_length ; $i++)
{
$resultplanarray .= '<div class="row">';
for($j = 1; $j <= $planlevel_array_length ; $j++)
{
//YOUR QUERY DATA
}
$resultplanarray .= '</div>';
}
I have added <div class='row'>
Please check it and let me know if you have any issue
You could also do this with css without adding to the markup.
This works by styling every 3rd div from an index of 1 (3n+1), so will add the clear to divs 4,7,10 etc..
.col-lg-2 {
display: block;
float: left;
}
.col-lg-2:nth-child(3n+1) {
clear: left;
}
<div class="col-lg-2">
<div class="panel price panel-red">
<div class="panel-heading text-center">
<h3>Alpha</h3>
<h3>Bronze</h3>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="panel price panel-red">
<div class="panel-heading text-center">
<h3>Alpha</h3>
<h3>Silver</h3>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="panel price panel-red">
<div class="panel-heading text-center">
<h3>Alpha</h3>
<h3>Gold</h3>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="panel price panel-red">
<div class="panel-heading text-center">
<h3>Omega</h3>
<h3>Bronze</h3>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="panel price panel-red">
<div class="panel-heading text-center">
<h3>Omega</h3>
<h3>Silver</h3>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="panel price panel-red">
<div class="panel-heading text-center">
<h3>Omega</h3>
<h3>Gold</h3>
</div>
</div>
</div>
I got a simple search query that works, but shows all results when the search button is clicked without a search input.
It also shows results with parent_id 26 or cattid 26 which I want to prevent in my query. Why is it still showing results with those id's and how can I prevent every result appearing on the result page when there is no search input?
How it is build:
HTML:
<li>
<div class="mn-wrap">
<form method="post" class="form" action="zoeken/">
<div class="search-wrap">
<button class="search-button animate" type="submit" title="Start zoeken">
<i class="fa fa-search"></i>
</button>
<input type="text" name="zoekterm" class="form-control search-field" placeholder="Zoek...">
</div>
</form>
</div>
</li>
.htaccess:
RewriteRule ^zoeken/ /zoeken.php?zoeken=1 [L]
Queries:
if ($_GET['zoeken'] != '') {
$zoekterm = $_POST['zoekterm'];
// zoeken
$zoeken = "SELECT * FROM `lb_content` WHERE catid NOT IN ('1', '26', '27', '28') and introtext LIKE '%".$conn->real_escape_string($zoekterm)."%' OR title LIKE '%".$conn->real_escape_string($zoekterm)."%'";
$zoekencon = $conn->query($zoeken);
$zoekeni = array();
while ($zoekeni[] = $zoekencon->fetch_array());
// zoeken c
$zoekc = "SELECT * FROM `lb_categories` WHERE parent_id NOT IN ('1', '26', '27', '28') and level = 2 and description LIKE '%".$conn->real_escape_string($zoekterm)."%' OR title LIKE '%".$conn->real_escape_string($zoekterm)."%'";
$zoekccon = $conn->query($zoekc);
$zoekci = array();
while ($zoekci[] = $zoekccon->fetch_array());
}
And finally the result page:
<div class="row multi-columns-row alt-features-grid">
<?
$aantal = count($zoekeni) + count($zoekci) - 2;
if($aantal == 0){
echo '<div class="col-sm-6 col-md-4 col-lg-4">
<div class="alt-features-item align-center">
<div class="alt-features-icon">
</div>
<h3 class="alt-features-title font-alt">Er zijn geen resultaten</h3>
</div>
</div>';
}
if($zoekeni[0]['id']){
foreach ($zoekeni as $resultaat) {
if($resultaat['introtext']){
echo '
<div class="col-sm-6 col-md-4 col-lg-4">
<div class="alt-features-item align-center">
<div class="alt-features-icon">
</div>
<h3 class="alt-features-title font-alt">'.$resultaat['title'].'</h3>
<div class="alt-features-descr align-left">
'.IntroText($resultaat['introtext']).'<br><br>
<div class="align-right">
Lees meer
</div>
</div>
</div>
</div>
';
}
}
}
if($zoekci[0]['id']){
foreach ($zoekci as $resultaat) {
if($resultaat['description']){
echo '
<div class="col-sm-6 col-md-4 col-lg-4">
<div class="alt-features-item align-center">
<div class="alt-features-icon">
</div>
<h3 class="alt-features-title font-alt">'.$resultaat['title'].'</h3>
<div class="alt-features-descr align-left">
'.IntroText($resultaat['description']).'<br><br>
<div class="align-right">
Lees meer
</div>
</div>
</div>
</div>
';
}
}
}
?>
</div>