wrap div to every 3 items data coming from database - php

<div class="accordion-content default">
<div class="row">
<div class="col-xs-12 equal">
<!-- <div >content comming from database</div> -->
<!-- <div >content comming from database</div> -->
<!-- <div >content comming from database</div> -->
</div>
<div class="col-xs-12">
<div class="line-border"> </div>
</div>
</div>
<div class="row">
<div class="col-xs-12 equal">
<!-- <div >content comming from database</div> -->
<!-- <div >content comming from database</div> -->
<!-- <div >content comming from database</div> -->
</div>
<div class="col-xs-12">
<div class="line-border"> </div>
</div>
</div>
<div class="row">
<div class="col-xs-12 equal">
<!-- <div >content comming from database</div> -->
</div>
<div class="col-xs-12">
<div class="line-border"> </div>
</div>
</div>
</div>
Above is the HTML code i the div which says content coming from database are the content coming from database and i need to show it 3 per div if in total it comes 19 then it should show 3 each x 6 = 18 and 1 is left that should also be wrapped with the

You have to declare a counter for your loop and reset it every 3 loops. Use the modulo operator to do so.
<?php
$i = 0;
foreach($data as $record) {
if($i == 0) {
echo '<div class="wrapper">';
}
echo $record['some-data'];
if($i%2 == 0 && $i > 0) {
echo '</div>';
$i = 0;
}
else {
$i++;
}
}

Related

Laravel Edit forms shows blank screen first load

Laravel Crud operation
When i open the edit option initially from button link it shows me blank screen as attached in both browser Chrome and FireFox
But when i reload it from the URL by hitting enter it loads the screen
Also when i save the form it return me the GIF image in ajax response.
the module name is advertisement
Is there possibilities the word advertisement can cause the issue?
AdvtController.php
public function edit($uuid)
{
Languages::setBackLang();
$checkPermission = Permissions::checkActionPermission('edit_advertisement');
if ($checkPermission == false) {
return view('backend.access-denied');
}
$advertisementData = Advertisement::loadAdvertise($uuid, Languages::EN);
if (empty($advertisementData)) {
Helper::log('Advertisement edit : No record found');
return redirect()->back()->with('error', trans('backend/common.oops'));
}
$languages = Languages::where('language_id', Languages::EN)->select('language_id', 'name')->first();
$language_id = Languages::getBackLanguageId();
return view('backend.advertisement.edit', compact('languages', 'advertisementData'));
}
edit.blade.php
#extends('backend.layout')
#php
$lang = \App\Models\Languages::getBackLang();
#endphp
#section('scripts')
<script src="{{asset('backend/dist/js/jquery.validate.min.js')}}"></script>
<script src="{{asset('backend/dist/js/pages/custom.js')}}"></script>
<script src="{{asset('backend/dist/js/pages/advt.js')}}"></script>
#endsection
#section('content')
<div class="content-wrapper">
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">{{trans('backend/advertisement.advertisement')}}</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb {{($lang == 'ar') ? 'float-sm-left':'float-sm-right'}} ">
<li class="breadcrumb-item">{{trans('backend/common.home')}}</li>
<li class="breadcrumb-item">{{trans('backend/advertisement.advertisement')}}
</li>
<li class="breadcrumb-item active">{{trans('backend/common.edit')}}</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</section>
<!-- /.content-header -->
<section class="content">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">{{trans('backend/advertisement.edit_advertisement')}}</h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<div id="display_message" class="col-md-12 display-none">
<div class="alert display-none alert-success"></div>
<div class="alert display-none alert-danger"></div>
</div>
#include('backend.advertisement.form')
</div>
<!-- /.card-body -->
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
</div>
#endsection

The listed items doesn't align and skip 2 item space in a row

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');
?>

Why doesn't this br tag do anything

I have a PHP loop listing results from a database:
What I have done is write an if statement in PHP so that every time 4 results have been outputted, execute a line of code. I then put a break tag inside this loop so that every 4 results, there would be a break <br /> tag. It looks like this:
if ($i %4 == 0){
echo "<br />";
echo $i;
}
When I look at the source code of the site the <br /> tag is there, but it doesn't move the rest of the information to another line. When I add a different line of code it shows, for example, if I print <p>Hello</p>, it outputs 'Hello'.
It just seems to be the <br /> that doesn't work. This results in all the results after the first 4 being off the end of the screen.
Here is the whole page and a screenshot of the output:
<section class="hero is-dark is-halfheight is-bold">
<div class="hero-head">
</div>
<div class="hero-body">
<div class="container has-text-centered">
<div class="columns">
<?php
$i = 0;
foreach($_SESSION['all'] as $result) {
echo '<div class="column is-3">';
echo '<a href="#">';
echo '<div class="box has-text-centered">';
echo $result;
echo '</div>';
echo '</a>';
echo '</div>';
$i++;
if ($i %4 == 0){
echo "<br />";
echo $i;
}
}
?>
</div>
</div>
</div>
</section>
And...
My best bet is because your CSS styling overrides br behavior. Take a look below snippet (open in full page), multiple brs doesn't do anything.
I presume you're using bulma CSS, and not going to talk about why does it work since there already well explained docs written.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<section class="hero is-dark is-halfheight is-bold">
<div class="hero-body">
<div class="container has-text-centered">
<div class="columns">
<div class="column is-3">
<div class="box has-text-centered">
Box 1 1
</div>
</div>
<div class="column is-3">
<div class="box has-text-centered">
Box 1 2
</div>
</div>
<div class="column is-3">
<div class="box has-text-centered">
Box 1 3
</div>
</div>
<br>
<br>
<br>
<br>
<div class="column is-3">
<div class="box has-text-centered">
Box 2 1
</div>
</div>
<div class="column is-3">
<div class="box has-text-centered">
Box 2 2
</div>
</div>
<div class="column is-3">
<div class="box has-text-centered">
Box 2 3
</div>
</div>
</div>
</div>
</div>
</section>
Instead, wrap those column within another columns container. Just like below,
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<section class="hero is-dark is-halfheight is-bold">
<div class="hero-body">
<div class="container has-text-centered">
<div class="columns">
<div class="column is-3">
<div class="box has-text-centered">
Box 1 1
</div>
</div>
<div class="column is-3">
<div class="box has-text-centered">
Box 1 2
</div>
</div>
<div class="column is-3">
<div class="box has-text-centered">
Box 1 3
</div>
</div>
</div>
<div class="columns">
<div class="column is-3">
<div class="box has-text-centered">
Box 2 1
</div>
</div>
<div class="column is-3">
<div class="box has-text-centered">
Box 2 2
</div>
</div>
<div class="column is-3">
<div class="box has-text-centered">
Box 2 3
</div>
</div>
</div>
</div>
</div>
</section>
Then so, you're PHP code would likely to be as follow,
<section class="hero is-dark is-halfheight is-bold">
<div class="hero-body">
<div class="container has-text-centered">
<?php
$i = 0;
$nextClosingDivShouldBePrinted = [];
foreach($_SESSION['all'] as $result) {
if ($i % 4 == 0){
echo '<div class="columns">';
$nextClosingDivShouldBePrinted[] = $i + 3; // there will be 3 'column' to wrap in for modulus 4.
}
echo '<div class="column is-3">';
echo '<a href="#" class="box has-text-centered">';
echo $result;
echo '</a>';
echo '</div>';
if (in_array($i, $nextClosingDivShouldBePrinted)) {
echo '</div>';
}
$i++; //always put loop increment at lowest part.
}
?>
</div>
</div>
</section>
As mentioned in the comments, Br will not work, you will have to wrap your code in a row div like so:
<section class="hero is-dark is-halfheight is-bold">
<div class="hero-head">
</div>
<div class="hero-body">
<div class="container has-text-centered">
<div class="columns">
<?php
$i = 0;
foreach($_SESSION['all'] as $result) {
if ($i %4 == 0){
echo '<div class="row">';
echo $i;
}
echo '<div class="column is-3">';
echo '<a href="#">';
echo '<div class="box has-text-centered">';
echo $result;
echo '</div>';
echo '</a>';
echo '</div>';
$i++;
if ($i %4 == 0){
echo "</div>";
echo $i;
}
}
?>
</div>
</div>
</div>
</section>
<style>
.row {
margin-bottom: 15px;
}
</style>

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

make row wrap in foreach

I wanna make 4 column wrap a .row container, below is what I tried but there is a row in last not what I want.. How to remove the last row make it correct
<div class="article-list-container">
<?php $column_count = 1; ?>
<div class="row">
<?php foreach ($data_select_top_hits['article'] as $each_data_select_top_hits) { ?>
<div class="article-list">
<!-- .. -->
</div>
<?php if (($column_count % 4) == 0) { ?>
<div class="clear"></div>
</div>
<div class="row">
<?php } ?>
<?php $column_count++;?>
<?php } ?>
<div class="clear"></div>
</div>
</div>
output
<div class="article-list-container">
<div class="row">
<div class="article-list"></div>
<div class="article-list"></div>
<div class="article-list"></div>
<div class="article-list"></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="article-list"></div>
<div class="article-list"></div>
<div class="article-list"></div>
<div class="article-list"></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="clear"></div>
</div>
</div>
You could try something like this. Adding the rows into arrays and then going through that array and wrapping the rows.
<?php
$column_count = 1;
foreach ($data_select_top_hits['article'] as $each_data_select_top_hits) {
$row_chunk.="<div class='article-list'>$each_data_select_top_hits</div>";
if (($column_count % 4) == 0) {
$chunk_array[]=$row_chunk;
$row_chunk="";
}
$column_count++;
}
?>
<div class="article-list-container">
<?php foreach($chunk_array as $rows){ ?>
<div class="row">
<?php echo $rows; ?>
<div class="clear"></div>
</div>
<?php } ?>
</div>

Categories