i want to set a limit in my card-text to like 200 words, so it does not display the whole text in the card box field.
Is there a way to do that without script? Or when there is only a solution with script, how would you implement that in my code?
Any help would be nice, thank you!
if(mysqli_num_rows($res) > 0) { $i = 0; // Ein Zähler um zusehen, wann eine neue Reihe erstellt werden soll $beitrag .= "
<div class='album py-5 bg-light'>
<div class='container'>
<div class='row'>"; while($row = mysqli_fetch_assoc($res)) { $beitrag_id = $row['beitrag_id']; $titel = $row['titel']; $miete = $row['miete']; $einkauf = $row['einkauf']; $freizeit = $row['freizeit']; $sonstiges = $row['sonstiges']; $g_kosten = $row['g_kosten']; $p_text
= $row['p_text']; $beitrag .= "
<div class='col-md-4'>
<div class='card mb-4 box-shadow'>
<div class='card-header'>
<a href='siehe_beitrag.php?pid=$beitrag_id'>
<h4 class='my-0 font-weight-normal'>$titel</h4>
</a>
<h4 class='my-0 font-weight-normal'>$g_kosten€</h4>
</div>
<div class='card-body'>
<p class='card-text'>$p_text</p>
<div class='d-flex justify-content-between align-items-center'>
</div>
</div>"; if(isset($_SESSION["login"]) && $_SESSION["login"] == 1) { //Buttons loeschen und bearbeiten anzeigen, falls es ein angemeldeter Nutzer ist $beitrag .= "
<div class='btn-group'>
<a href='loeschen_beitrag.php?pid=$beitrag_id'>
<button type='button' class='btn btn-sm btn-outline-danger'>Loeschen</button>
<a href='bearbeiten_beitrag.php?pid=$beitrag_id'>
<button type='button' class='btn btn-sm btn-outline-secondary'>Bearbeiten</button>
</div>"; } $beitrag .= " </div>
</div>"; $i++; if($i % 3 == 0) { // Drei Ergebnisse in der div -> Starte eine neue $beitrag .= "
</div>
</div>
</div>"; $beitrag .= "
<div class='album py-5 bg-light'>
<div class='container'>
<div class='row'>"; } } if(($i - 1) % 3 != 0) { // An der letzten Schleife schließen $beitrag .= "
</div>
</div>
</div>"; }
Related
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;
}
I'm trying to create a categories list, where user will be able to choose item with certain category, but as soon as I'm opening any of the categories, where "soon = '2'", there is only one item coming up. Everything else works.
The code bellow is for categories, where user can chose which caegory s/he want to see.
//navbar.php
<!-- Categories -->
<div class="dropdown-item menu_cat" type="button" id="catMenuButton"><i class="fas fa-caret-left"></i> Categories</div>
<form method="POST" class="dropdown-menu dropleft categories_menu row" id="cat_dropdown">
<button class="dropdown-item" name="candle"> Candles</button>
<button class="dropdown-item" name="cloth"> Clothes</button>
<button type="submit"class="dropdown-item" name="tech"> Tech</button>
</form>
Than here is everything else, that is suppose to exectute commands that will show products from category that user choose. The issue comes upp where 'if($row["soon"] == "2")' is.
//products.php
<?php
if(isset($_POST['candle'])){
$sql = "SELECT * FROM products WHERE category = 'candle'";
}else if(isset($_POST['cloth'])){
$sql = "SELECT * FROM products WHERE category = 'cloth'";
}else if(isset($_POST['tech'])){
$sql = "SELECT * FROM products WHERE category = 'tech'";
}else{
$sql = "SELECT * FROM products";
}
$result = $conn->query($sql);
if (!empty($result) && $result->num_rows > 0) {
while ($row = $result->fetch_assoc()){
if($row["soon"] == "2"){
?>
<div class="product_card col-xl-3 col-lg-4 col-md-5 col-sm-12 box-shadow">
<div class="card-header">
<h3 class="product_name my-0 font-weight-normal"> <?php echo $row["productName"] ?> </h3>
</div>
<div class="card-body">
<h2 class="card-title pricing-card-title"> </h2>
<img class="pic" src="productsImages\<?php echo $row["productID"]; ?>.jpeg" height="150px" width="120px"></img>
<br>
<p>
<?php echo $row["productPrice"]; ?> SEK
</p>
<a class="toProduct" href="products_index.php?id=<?php echo $row['productID'] ?>">
<div class="row">
<button class="btn_to_product btn btn-lg btn-outline-dark col-lg-10 col-md-10"> Go to product <i type="button" class="fas fa-arrow-alt-circle-right"></i></button>
</div>
</a>
</div>
</div>
<?php }else if($row['soon'] == "1" && isset($_POST['tech']) || isset($_POST['candle'])){?>
<div class="product_card col-xl-3 col-lg-4 col-md-5 col-sm-12 box-shadow">
<div class="card-header">
<h3 class="product_name my-0 font-weight-normal"> <?php echo $row["productName"] ?> </h3>
</div>
<div class="card-body">
<h2 class="card-title pricing-card-title"> </h2>
<img class="pic_soon" src="productsImages/comingSoon.png" height="150px" width="120px"></img>
<style>
</style>
<br>
<p>
<?php echo $row["productPrice"]; ?> SEK
</p>
<a class="toProduct" href="products_index.php?id=<?php echo $row['productID'] ?>">
<div class="row">
<button class="btn_to_product btn btn-lg btn-outline-dark col-lg-10 col-md-10"> Go to product <i type="button" class="fas fa-arrow-alt-circle-right"></i></button>
</div>
</a>
</div>
</div>
<?php
}
}
}
else if(empty($result) || $result->num_rows == 0){
echo "<h2 class='col-12'> Sorry! </h2>";
echo "<h3 class='col-12'> There is not any product in this category yet! </h3>";
}
$conn->close();
?>
In the original post was duplicate $row = $result->fetch_assoc(); statement.
In updated post there is first condition out of the while loop.
Solution bellow is wrapping all the if($row['soon'] into the while loop:
<div class="card-deck col-lg-12 col-md-12 col-sm-12 justify-content-center text-center">
<?php
if(isset($_POST['candle'])){
$sql = "SELECT * FROM products WHERE category = 'candle'";
}else if(isset($_POST['cloth'])){
$sql = "SELECT * FROM products WHERE category = 'cloth'";
}else if(isset($_POST['tech'])){
$sql = "SELECT * FROM products WHERE category = 'tech'";
}else{
$sql = "SELECT * FROM products";
}
$result = $conn->query($sql);
if (!empty($result) && $result->num_rows > 0) {
while ($row = $result->fetch_assoc()){
if($row['soon'] == "1" && isset($_POST['tech']) || isset($_POST['candle'])){
echo "<h2 class='col-12'> Sorry! </h2>";
echo "<h3 class='col-12'> This product will be soon avaiable </h3>";
}
if($row["soon"] == "2"){
?>
<div class="product_card col-xl-3 col-lg-4 col-md-5 col-sm-12 box-shadow">
<div class="card-header">
<h3 class="product_name my-0 font-weight-normal"> <?php echo $row["productName"] ?> </h3>
</div>
<div class="card-body">
<h2 class="card-title pricing-card-title"> </h2>
<img class="pic" src="productsImages\<?php echo $row["productID"]; ?>.jpeg" height="150px" width="120px"></img>
<br>
<p>
<?php echo $row["productPrice"]; ?> SEK
</p>
<a class="toProduct" href="products_index.php?id=<?php echo $row['productID'] ?>">
<div class="row">
<button class="btn_to_product btn btn-lg btn-outline-dark col-lg-10 col-md-10"> Go to product <i type="button" class="fas fa-arrow-alt-circle-right"></i></button>
</div>
</a>
</div>
</div>
<?php
}
}
}else if($result->num_rows == 0){
echo "<h2 class='col-12'> Sorry! </h2>";
echo "<h3 class='col-12'> There is not any product in this category yet! </h3>";
}
$conn->close();
?>
</div>
}
}else if($result->num_rows == 0){
echo "<h2 class='col-12'> Sorry! </h2>";
echo "<h3 class='col-12'> There is not any product in this category yet! </h3>";
}
$conn->close();
?>
</div>
Recommendation: Always debug your scripts with enabled PHP Error Reporting!
products.php
<?php
if(isset($_POST['candle'])){
$sql = "SELECT * FROM products WHERE category = 'candle'";
}else if(isset($_POST['cloth'])){
$sql = "SELECT * FROM products WHERE category = 'cloth'";
}else if(isset($_POST['tech'])){
$sql = "SELECT * FROM products WHERE category = 'tech'";
}else{
$sql = "SELECT * FROM products";
}
$result = $conn->query($sql);
if (!empty($result) && $result->num_rows > 0) {
while ($row = $result->fetch_assoc()){
if($row["soon"] == "2"){
?>
<div class="product_card col-xl-3 col-lg-4 col-md-5 col-sm-12 box-shadow">
<div class="card-header">
<h3 class="product_name my-0 font-weight-normal"> <?php echo $row["productName"] ?> </h3>
</div>
<div class="card-body">
<h2 class="card-title pricing-card-title"> </h2>
<img class="pic" src="productsImages\<?php echo $row["productID"]; ?>.jpeg" height="150px" width="120px"></img>
<br>
<p>
<?php echo $row["productPrice"]; ?> SEK
</p>
<a class="toProduct" href="products_index.php?id=<?php echo $row['productID'] ?>">
<div class="row">
<button class="btn_to_product btn btn-lg btn-outline-dark col-lg-10 col-md-10"> Go to product <i type="button" class="fas fa-arrow-alt-circle-right"></i></button>
</div>
</a>
</div>
</div>
<?php }else if($row['soon'] == "1" && isset($_POST['tech']) || isset($_POST['candle'])){?>
<div class="product_card col-xl-3 col-lg-4 col-md-5 col-sm-12 box-shadow">
<div class="card-header">
<h3 class="product_name my-0 font-weight-normal"> <?php echo $row["productName"] ?> </h3>
</div>
<div class="card-body">
<h2 class="card-title pricing-card-title"> </h2>
<img class="pic_soon" src="productsImages/comingSoon.png" height="150px" width="120px"></img>
<style>
</style>
<br>
<p>
<?php echo $row["productPrice"]; ?> SEK
</p>
<a class="toProduct" href="products_index.php?id=<?php echo $row['productID'] ?>">
<div class="row">
<button class="btn_to_product btn btn-lg btn-outline-dark col-lg-10 col-md-10"> Go to product <i type="button" class="fas fa-arrow-alt-circle-right"></i></button>
</div>
</a>
</div>
</div>
<?php
}
}
}
else if(empty($result) || $result->num_rows == 0){
echo "<h2 class='col-12'> Sorry! </h2>";
echo "<h3 class='col-12'> There is not any product in this category yet! </h3>";
}
$conn->close();
?>
i'm new to web development; I have been trying to populate bootstrap pills dynamically from the database, generating the pill itself and also the content dynamically. So far only the Pills are being generated but the contents don't seem to be generated. The pills are meant to display contents that are individual pdf files obtained from the database sorted based on the category matching the pill being iterated in the while loop. Here is my code. Thanks.
//HTML Bootstrap
<div class="row bd-sidebar">
<div class="col-2 border-right">
<h3 class="pl-2">Categories</h3><hr>
<div class="nav flex-column nav-pills overflow-auto" id="v-nav-tab" role="tablist" aria-orientation="vertical">
<?php include_once '.assets/_server/category_data.php'; ?>
<?php echo $category_menu; ?>
<div class="col-10">
<div class="tab-content" id="v-pills-tabContent">
<?php echo $category_content;?>
</div>
</div>
</div>
</div>
</div>
//category_data.php
<?php
include_once("dbConfig.php");
$query = "SELECT * FROM `categories` GROUP BY `categoryName` ";
$categoryResult = mysqli_query($link, $query);
$category_menu = "";
$category_content = "";
$count = 0;
while($row = mysqli_fetch_array($categoryResult)){
$value = $row['categoryId'];
$categoryName = $row['categoryName'];
if($count == 0){
$category_menu .= '
<a class="nav-link active" id="v-pills-'.$value.'-tab" data-toggle="pill" href="#v-pills-'.$value.'" role="tab" aria-controls="v-pills-'.$value.' aria-selected="false">'.$categoryName.'</a>
';
$category_content .= '
<div class="tab-pane fade show active" id="v-pills-'.$value.'" role="tabpanel" aria-labelledby="v-pills-'.$value.'-tab">
<div class="row">
';
}else{
$category_menu .= '
<a class="nav-link" id="v-pills-'.$value.'-tab" data-toggle="pill" href="#v-pills-'.$value.'" role="tab" aria-controls="v-pills-'.$value.' aria-selected="false">'.$categoryName.'</a>
';
$category_content .= '
<div class="tab-pane fade" id="v-pills-'.$value.'" role="tabpanel" aria-labelledby="v-pills-'.$value.'-tab">
<div class="row">
';
}
$content_query = "SELECT * FROM `books` WHERE `categoryId` = '.$value.' GROUP BY `file_name`";
$content_result = mysqli_query($link, $content_query);
while($sub_row = mysqli_fetch_array($content_result)){
$category_content .= '
</div>
<div class="col-1">
<a class="material text-secondary text-decoration-none" href=".assets/pdf.js/web/viewer.html?file=materials/'.$sub_row['file_name'].'" data-toggle="tooltip" data-delay="300" data-animation="" data-html="true" title="'.$sub_row['file_name'].'">
<div class="mycard justify-content-center" style="width: 7rem;">
<img style="width: 70px; height: 70px;" src="img/book-thumbs/pdf_ico.png" class="mx-auto d-block" alt="pdf thumbnail">;
<div class="bookcardTitle">
<p class="text-center" id="bookcardTitle">'.$sub_row['file_name'].'</p>
</div>
</div>
</a>
</div>
';
}
$category_content .= '<div style="clear:both"></div></div></div>';
$count++;
}
?>
The immediate error in your code is the $content_query line:
$content_query = "SELECT * FROM `books` WHERE `categoryId` = '.$value.' GROUP BY `file_name`";
The string is quoted with double quotes but the $value part is surrounded by single quotes. The solution would be to replace the quotes:
$content_query = "SELECT * FROM `books` WHERE `categoryId` = ".$value." GROUP BY `file_name`";
You can see how the syntax highlight shows the error.
But there's a deeper problem here regarding sql injection. You should not concatenate values obtained from somewhere else in a query. Please see this question: How can I prevent SQL injection in PHP? and this website: https://phpdelusions.net/sql_injection for more information.
<?php
include_once("dbConfig.php");
$query = "SELECT * FROM `categories` GROUP BY `categoryName` ";
$categoryResult = mysqli_query($link, $query);
$category_menu = "";
$category_content = "";
$count = 0;
while($row = mysqli_fetch_array($categoryResult)){
$value = $row['categoryId'];
$categoryName = $row['categoryName'];
if($count == 0){
$category_menu .= '
<a class="nav-link " id="v-pills-'.$value.'-tab" data-toggle="pill" href="#v-pills-'.$value.'" role="tab" aria-controls="v-pills-'.$value.' aria-selected="false">'.$categoryName.'</a>
';
$category_content .= '
<div class="tab-pane fade " id="v-pills-'.$value.'" role="tabpanel" aria-labelledby="v-pills-'.$value.'-tab">
<div class="nav justify-content-center navbar-light bg-light">
<form class="form-inline v-pills-search" action="">
<input class="form-control rounded-pill mr-2" type="search" name="query" id="book_query" placeholder="Search...">
<button class="btn rounded-pill btn-outline-primary my-2 my-sm-0" type="submit"><i class="fas fa-search"></i></button>
</form>
</div>
<div class="row">
';
}else{
$category_menu .= '
<a class="nav-link" id="v-pills-'.$value.'-tab" data-toggle="pill" href="#v-pills-'.$value.'" role="tab" aria-controls="v-pills-'.$value.' aria-selected="false">'.$categoryName.'</a>
';
$category_content .= '
<div class="tab-pane fade" id="v-pills-'.$value.'" role="tabpanel" aria-labelledby="v-pills-'.$value.'-tab">
<div class="nav justify-content-center navbar-light bg-light">
<form class="form-inline v-pills-search" action="">
<input class="form-control rounded-pill mr-2" type="search" name="query" id="book_query" placeholder="Search...">
<button class="btn rounded-pill btn-outline-primary my-2 my-sm-0" type="submit"><i class="fas fa-search"></i></button>
</form>
</div>
<div class="row">
';
}
$content_query = "SELECT * FROM `books` WHERE `categoryId` = '".$row['categoryId']."' GROUP BY `file_name`";
$content_result = mysqli_query($link, $content_query);
if(mysqli_num_rows($content_result) < 0) {
$conRow_html .= '<br>No items found in this category!';
}
while($sub_row = mysqli_fetch_array($content_result)){
$category_content .= '
<div class="col-1 mr-4">
<a class="material text-secondary text-decoration-none" href=".assets/pdf.js/web/viewer.html?file=materials/'.$sub_row['file_name'].'" data-toggle="tooltip" data-delay="0" data-animation="true" data-html="true" title="'.$sub_row['file_name'].'">
<div class="mycard justify-content-center" style="width: 7rem;">
<img style="width: 70px; height: 70px;" src="img/book-thumbs/pdf_ico.png" class="mx-auto d-block" alt="pdf thumbnail">
<div class="bookcardTitle">
<p class="text-center book_name" id="bookcardTitle">'.$sub_row['file_name'].'</p>
</div>
</div>
</a>
</div>
';
}
$category_content .= '<div class="clear:both"></div></div></div>';
$count++;
}
?>
So I want to show my posts with a variable and echo the html form out.
The problem is, that I need
<div class='container'>
<div class='row'>
cause I want it to be displayed in a row. But cause every post got that div classes, it doesnt work and displays the posts completely wrong...
Moreover it shows my buttons "Loeschen" and "Bearbeiten" on top but it should be right below the text field.
How it should look:
How it actually looks now:
<?php
$ort = 'Beiträge';
include ("head.php");
include("database.php");
include("navigation.php");
?>
<!--Beitrage auflisten-->
<?php
$sql = "SELECT * FROM beitrag ORDER BY beitrag_id DESC";
$res = mysqli_query($db, $sql) or die(mysqli_error());
$beitrag = "";
if(mysqli_num_rows($res) > 0) {
while($row = mysqli_fetch_assoc($res)) {
$beitrag_id = $row['beitrag_id'];
$titel = $row['titel'];
$leistung = $row['leistung'];
$bezugsort = $row['bezugsort'];
$kosten = $row['kosten'];
$p_text = $row['p_text'];
$beitrag .= "
<div class='album py-5 bg-light'>
<div class='container'>
<div class='row'>
<div class='col-md-4'>
<div class='card mb-4 box-shadow'>
<div class='card-header'>
<a href='siehe_beitrag.php?pid=$beitrag_id'><h4 class='my-0 font-weight-normal'>$titel</h4></a
<h4 class='my-0 font-weight-normal'>$kosten€</h4 >
</div>
<div class='card-body'>
<p class='card-text'>$p_text</p>
<div class='d-flex justify-content-between align-items-center'>
</div>
</div>
</div>
</div>";
if (isset($_SESSION["login"])){
if($_SESSION["login"] == 1){
echo "
<div class='btn-group' >
<a href='loeschen_beitrag.php?pid=$beitrag_id'>
<button type='button' class='btn btn-sm btn-outline-secondary'>Loeschen</button>
<a href='bearbeiten_beitrag.php?pid=$beitrag_id'>
<button type='button' class='btn btn-sm btn-outline-secondary'>Bearbeiten</button>
</div>";
}else{
echo "";
}
}
}
echo $beitrag;
} else {
echo "Keine Beiträge vorhanden ";
}
?>
<a href='neuer_beitrag.php' target='_blank'>Neuer Beitrag</a>
The final version:
Thanks to aynber and the others, now it works like I imagined it <3
You have two issues: 1) You aren't closing all of the div tags, and 2) you're creating a new container with a width of 4 columns for each row. You'll want to create a new container outside of the loop, and only close/reopen if there are more than 3 results:
if(mysqli_num_rows($res) > 0) {
$i = 0; // Create a counter to see when to start a new row
$beitrag .= "
<div class='album py-5 bg-light'>
<div class='container'>
<div class='row'>";
while($row = mysqli_fetch_assoc($res)) {
$beitrag_id = $row['beitrag_id'];
$titel = $row['titel'];
$leistung = $row['leistung'];
$bezugsort = $row['bezugsort'];
$kosten = $row['kosten'];
$p_text = $row['p_text'];
$beitrag .= "
<div class='col-md-4'>
<div class='card mb-4 box-shadow'>
<div class='card-header'>
<a href='siehe_beitrag.php?pid=$beitrag_id'><h4 class='my-0 font-weight-normal'>$titel</h4></a
<h4 class='my-0 font-weight-normal'>$kosten€</h4 >
</div>
<div class='card-body'>
<p class='card-text'>$p_text</p>
<div class='d-flex justify-content-between align-items-center'>
</div>
</div>";
if(isset($_SESSION["login"]) && $_SESSION["login"] == 1) {
$beitrag .= "
<div class='btn-group' >
<a href='loeschen_beitrag.php?pid=$beitrag_id'>
<button type='button' class='btn btn-sm btn-outline-secondary'>Loeschen</button>
<a href='bearbeiten_beitrag.php?pid=$beitrag_id'>
<button type='button' class='btn btn-sm btn-outline-secondary'>Bearbeiten</button>
</div>";
}
$beitrag .= " </div>
</div>";
$i++;
if($i % 3 == 0) { // 3 results in the div, start a new one
$beitrag .= "
</div>
</div>
</div>";
$beitrag .= "
<div class='album py-5 bg-light'>
<div class='container'>
<div class='row'>";
}
}
if(($i - 1) % 3 != 0) { // It would have been closed on the last loop
$beitrag .= "
</div>
</div>
</div>";
}
echo $beitrag;
}
You have an error in the html, you are not closing the link of the buttons.
<div class='btn-group' >
<a href='loeschen_beitrag.php?pid=$beitrag_id'>
<button type='button' class='btn btn-sm btn-outline-secondary'>Loeschen</button></a>
<a href='bearbeiten_beitrag.php?pid=$beitrag_id'>
<button type='button' class='btn btn-sm btn-outline-secondary'>Bearbeiten</button></a>
</div>
I'm trying to create some div's that are supposed to be some articles in a webshop using bootstrap 4 alpha and PHP.
I think I need modulo (%) for this but I can't achieve what I want, I have read this and tried playing around with it but I can't get it to work, because I don't really understand what it does.
What I need is 1 row, 4 columns, and this repeating. I hope you understand where I'm going.
Here is the HTML example, there could be more rows and div's as you can see in the PHP below it:
<div class="row">
<div class="sm-col-3">
<div class="card-deck-wrapper">
<div class="card-deck">
<div class="card card-outline-secondary">
<img class="card-img-top m-x-auto d-block placeholder" src="empty.png" alt="Product">
<div class="card-block">
<h4 class="card-title">Product</h4>
<p class="card-text">
<span>Omschrijving van het product. </span><br>
<span>€ 1,00</span><br>
<span>Voorraad: 1</span>
</p>
Koop
</div>
</div>
<div class="card card-outline-secondary">
<img class="card-img-top m-x-auto d-block placeholder" src="empty.png" alt="Product">
<div class="card-block">
<h4 class="card-title">Product</h4>
<p class="card-text">
<span>Ik zal hier ook maar wat in knallen zodat niet alle kaarten even groot zijn.</span><br>
<span>€ 1,00</span><br>
<span>Voorraad: 1</span>
</p>
Koop
</div>
</div>
<div class="card card-outline-secondary">
<img class="card-img-top m-x-auto d-block placeholder" src="empty.png" alt="Product">
<div class="card-block">
<h4 class="card-title">Product</h4>
<p class="card-text">
<span>Deze kaart zal ook net even iets groter zijn om het uit te testen want ik snap er geen reet van.</span><br>
<span>€ 1,00</span><br>
<span>Voorraad: 1</span>
</p>
Koop
</div>
</div>
<div class="card card-outline-secondary">
<img class="card-img-top m-x-auto d-block placeholder" src="empty.png" alt="Product">
<div class="card-block">
<h4 class="card-title">Product</h4>
<p class="card-text">
<span>Omschrijving van het product.</span><br>
<span>€ 1,00</span><br>
<span>Voorraad: 1</span>
</p>
Koop
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="sm-col-3">
<div class="card-deck-wrapper">
<div class="card-deck">
<div class="card card-outline-secondary">
<img class="card-img-top m-x-auto d-block placeholder" src="empty.png" alt="Product">
<div class="card-block">
<h4 class="card-title">Product</h4>
<p class="card-text">
<span>Omschrijving van het product.</span><br>
<span>€ 1,00</span><br>
<span>Voorraad: 1</span>
</p>
Koop
</div>
</div>
<div class="card card-outline-secondary">
<img class="card-img-top m-x-auto d-block placeholder" src="empty.png" alt="Product">
<div class="card-block">
<h4 class="card-title">Product</h4>
<p class="card-text">
<span>Omschrijving van het product.</span><br>
<span>€ 1,00</span><br>
<span>Voorraad: 1</span>
</p>
Koop
</div>
</div>
</div>
</div>
</div>
PHP what I have now:
$categorie = mysqli_real_escape_string($mysqli, $_GET['categorie']);
$sql = "SELECT * FROM producten WHERE categorie = '$categorie' AND voorraad > 0";
$result = mysqli_query($mysqli, $sql) or die(mysqli_error($mysqli));
if (mysqli_num_rows($result) == 0) {
echo "<div class=\"card card-inverse card-warning text-xs-center\">\n";
echo " <div class=\"card-block\">\n";
echo " <blockquote class=\"card-blockquote\">\n";
echo " <span>Deze categorie bestaat niet!</span>\n";
echo " </blockquote>\n";
echo " </div>\n";
echo "</div>\n";
}
else {
echo "<h3>Categorie: " . ucfirst($_GET['categorie']) . "</h3>\n";
$i = 0;
while ($row = mysqli_fetch_array($result)) {
if ($i % 3 == 0) {
echo "<div class=\"row\">\n";
echo " <div class=\"sm-col-3\">\n";
echo " <div class=\"card-deck-wrapper\">\n";
echo " <div class=\"card-deck\">\n";
}
echo " <div class=\"card card-outline-secondary\">\n";
if ($row['plaatje'] == "") {
echo " <img class=\"card-img-top m-x-auto d-block placeholder\" src=\"empty.png\" alt=\"". $row['naam'] . "\">\n";
}
else {
echo " <img class=\"card-img-top m-x-auto d-block placeholder\" src=\"" . $row['plaatje'] . "\" alt=\"". $row['naam'] . "\">\n";
}
echo " <div class=\"card-block\">\n";
echo " <h4 class=\"card-title\">" . $row['naam'] . "</h4>\n";
echo " <p class=\"card-text\">\n";
echo " <span>" . nl2br($row['omschrijving']) . "</span><br>\n";
echo " <span>€ " . str_replace(".", ",", number_format($row['prijs'], 2)) . "</span><br>\n";
echo " <span>Voorraad: " . $row['voorraad'] . "</span><br>\n";
echo " </p>";
echo " Koop\n";
echo " </div>\n";
echo " </div>\n";
if ($i % 3 == 2) {
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
echo "</div>\n";
}
if ($i % 3 != 0) {
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
echo "</div>\n";
}
$i++;
}
It's probably a easy solution but I can't see it!
Thanks for your time.
From the link in your question, this works for me:
$i = 0;
while ($row = mysqli_fetch_array($result)) {
if ($i % 3 == 0){
echo '<div class="row">';
}
echo '<div class="col-lg-4 col-md-4 col-sm-4">';
//Your column data here
echo '</div>';
if ($i % 3 == 2){
//Close the .row div
echo '</div>';
}
$i++;
}
if ($i % 3 != 0){
//Close the .row div in case there aren't enough items left to fill up to 3
echo '</div>';
}
http://www.devchunks.com/web-development/using-the-php-modulus-operator/