I am working on an application where i have a slider made in bootstrap but in slider there are two images in one slide show instead of one, so i have wrote a simple select query to get record but the problem is that it showing same images on boxes, i dont know how i can get next data in one loop
here is the code
<div class="carousel-inner">
<?php if($blog) : $counter = 0; foreach($blog as $blogs) : $counter++; ?>
<?php if($counter === 1) : ?>
<div class="item active">
<?php else : ?>
<div class="item">
<?php endif; ?>
<div class="row">
<div class="col-md-6">
<div class="panel">
<div class="panel-heading">
<h3>
<?php echo substr($blogs -> heading, 0, 30); ?> <br> <br> <br>
<p> <?php echo substr($blogs -> description, 0, 300); ?> <br><br>
Read the full story </p><br>
<img src="<?php echo base_url().$blogs -> image; ?>">
</h3>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel">
<div class="panel-heading">
<h3>
<?php echo substr($blogs -> heading, 0, 30); ?> <br> <br> <br>
<p> <?php echo substr($blogs -> description, 0, 300); ?> <br><br>
Read the full story </p><br>
<img src="<?php echo base_url().$blogs -> image; ?>">
</h3>
</div>
</div>
</div>
</div><!--.row-->
</div><!--.item-->
<?php endforeach; endif; ?>
</div><!--.carousel-inner-->
<a data-slide="prev" href="#blog" class="left carousel-control">‹</a>
<a data-slide="next" href="#blog" class="right carousel-control">›</a>
</div><!--.Carousel-->
the above is the result but i want the second image to be the next data from db
try this:
<div class="carousel-inner">
<?php if($blog) : $counter = 0; foreach($blog as $blogs) : $counter++; ?>
<?php if($counter === 1) : ?>
<div class="item active">
<?php else : ?>
<div class="item">
<?php endif; ?>
<div class="row">
<div class="col-md-6">
<div class="panel">
<div class="panel-heading">
<h3>
<?php echo substr($blogs -> heading, 0, 30); ?> <br> <br> <br>
<p> <?php echo substr($blogs -> description, 0, 300); ?> <br><br>
Read the full story </p><br>
<img src="<?php echo base_url().$blogs -> image; ?>">
</h3>
</div>
</div>
</div>
<?php endforeach; endif; ?>
What outputs if you post this?
Related
I want to display data use card-deck. So every three data from database, it will make a new line. So, one line just have 3 datas, how to fix it?
Here my code, it display one line with all data from database and how to fix it?
<?php for($i=0; $i<count($data); $i++){
if($i % 3 == 0){?>
<div class="card-deck ml-2 mr-2 mb-3">
<?php $no=1; foreach ($data as $d ){?>
<div class="card border-dark">
<img class="card-img-top" src="<?php echo base_url('assets/koceng.jpeg')?>" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text"><?php echo $no++ ?>
<?php echo $d->nim ?>
<?php echo $d->nama ?>
<?php echo $d->kelas ?>
<?php echo $d->nama_jurusan ?>
<?php echo $d->fakultas ?></p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<?php }?>
</div>
<?php }}?>
Thankyou.
Take a look at this tutorial.
<?php $i = 0;foreach ($data as $d ){?> <!-- i is for count number of cards -->
<?php if($i%3 == 0){ ?> <!-- printing card-deck per 3 cards -->
<div class="card-deck ml-2 mr-2 mb-3">
<?php } ?>
<div class="card border-dark">
<img class="card-img-top" src="<?php echo base_url('assets/koceng.jpeg')?>" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text"><?php echo $no++ ?> <!-- i don't know why $no is used for -->
<?php echo $d->nim ?>
<?php echo $d->nama ?>
<?php echo $d->kelas ?>
<?php echo $d->nama_jurusan ?>
<?php echo $d->fakultas; $i++;?></p> <!-- increment i by one per card -->
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<?php if($i%3 == 0){ ?>
</div>
<?php } } ?>
Have a website in three languages. The porducts select from a mysql database and showed wiht a do-while-loop.
<!-- Shop Page Area Start-->
<div class="shoppage-area">
<div class="container">
<div class="about-desc">
<h2>
<?php echo $page['subtitle']; ?>
</h2>
<?php echo $page['content']; ?>
</div>
<div class="row">
<?php
do {
?>
<!--Product Start-->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="sngle-product">
<div class="product-thumb">
<img src="<?php echo $product['img']; ?>" alt=""/>
<h2>
<a href="#">
<?php echo $product['name']; ?>
</a>
</h2>
</div>
<h3>
<?php echo $product['desc']; ?>
</h3>
<span><?php echo $product['size']; ?></span> <span class="price"><?php echo $product['price']; ?> LE</span>
<div class="product-overlay">
<ul>
<li>
<div class="product-quantity">
<div class="input-number">
<input type="text" value="1" name="quantity">
</div>
</div>
</li>
<li><a class="orderbtn" href="#" data-uid="<?php echo $product['uniqueid']; ?>">ORDER</a></li>
</ul>
</div>
</div>
</div>
<!-- Product End -->
<?php
} while ($product = $res->fetch_assoc()) ?>
</div>
<!-- end Row -->
</div>
</div>
The problem is that in one language showed correctly and in the other i get a lot spaces between the products. See the image
enter image description here
How i can solve this
Add an additional class flex-row to the product wrapping row element. And try applying the following styles.
.flex-row{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
You can divide your column like this
<div class="shoppage-area">
<div class="container">
<div class="about-desc">
</div>
<div class="row">
<?php $i=1;
do {
?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="sngle-product">
<div class="product-thumb">
<img src="<?php echo "test"; ?>" alt=""/>
<h2><?php echo "test"; ?> </h2>
</div>
<h3><?php echo ($i==2)? " testtesttesttesttesttest testtesttesttest test": "test"; ?></h3>
<span><?php echo "test"; ?></span> <span class="price"><?php echo 12321; ?> LE</span>
<div class="product-overlay">
<ul>
<li>
<div class="product-quantity">
<div class="input-number">
<input type="text" value="1" name="quantity">
</div>
</div>
</li>
<li><a class="orderbtn" href="#" data-uid="<?php echo "1231"; ?>">ORDER</a></li>
</ul>
</div>
</div>
</div>
<?php
echo $i%4;
if($i%4== 0 && $i > 1) {
echo '</div><div class="row">';
}
$i++;
} while ($i<=10) ?>
</div>
</div>
</div>
I am doing a dynamic site in php. I have divided the page into 2 columns. The first section shows a person's profile and the second section shows the article written by him/her. The problem is when i am adding more than one article. The second article is coming below the profile. I have tried using class clearfix. Its not working. Can someone please help me?
This is my page
<div class="container">
<?php
session_start();
$q = $_SESSION['id'];
$con=mysql_connect("localhost","root","");
mysql_select_db("demo_db",$con);
$sql="select * from personal_details where id=$q";
$res=mysql_query($sql);
while($ar=mysql_fetch_array($res))
{
?>
<div>
<div class="row">
<div style="background-color:rgba(125, 178, 194, 0.43); margin-bottom:10px;" class="col-sm-8 col-md-8 col-lg-8">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<img style="margin:20px;" src="uploads/<?php echo $ar[17]; ?>">
</div>
<div class="col-sm-8 col-md-8 col-lg-8">
<h3><b>Dr. <?php echo $ar[1];?></b></h3>
<h5><?php echo $ar[8];?>, <?php echo $ar[12];?></h5>
<h5><?php echo $ar[2];?>, <?php echo $ar[7];?> years of experience</h5>
<p><?php echo $ar[16];?></p>
</div>
</div>
<div style="margin:20px;">
<h4><b>Services</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[18]; ?></h5>
</li>
</ul>
<h4><b>Specialisations</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[2]; ?></h5>
</li>
</ul>
<h4><b>Education</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[8]; ?> - <?php echo $ar[9]; ?> , <?php echo $ar[10]; ?> , <?php echo $ar[11];?></h5>
</li>
</ul>
<ul>
<li>
<h5><?php echo $ar[12]; ?> - <?php echo $ar[13]; ?> , <?php echo $ar[14]; ?> , <?php echo $ar[15];?></h5>
</li>
</ul>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<h3>Articles by <?php echo $ar[1];?></h3><?php } ?>
<hr>
<?php
$sql1="select * from article_tb where id=$q";
$res1=mysql_query($sql1);
while($ar=mysql_fetch_array($res1))
{
$_SESSION['id'] = $q;
?>
<h4><b><?php echo $ar[1]; ?></b></h4>
<div class="row">
<div class="col-sm-7 col-lg-7 col-md-7">
<img src="uploads/<?php echo $ar[3]; ?>" width="170px" height="88">
</div>
<div class="col-sm-5 col-md-5 col-lg-5">
<form action="blog.php">
<input type="submit" class="btn btn-info" name="read" value="read" />
</form>
</div>
</div>
<hr>
</div>
<?php } ?>
</div>
</div>
I start web development about 3 weeks ago. Today I ran into this issue where only the first while($query->fetch()) works, and the second one doesn't.
I searched around and I'm supposed to use a $rows array, but I guess I implemented it wrong since it didn't work.
<div class="container-fluid">
<div class="row">
<aside class="sidebar col-md-3 col-md-offset-1 col-md-push-8">
<div class="widget">
<h2>Recent Posts</h2>
<ul>
<?php while($query->fetch()): ?>
<li><?php echo "<a href='post.php?
id=$post_id'>$title</a>" ?></li>
<?php endwhile ?>
</ul>
</div>
</aside>
<div class="col-md-8 posts col-md-pull-4">
<div class="row">
<?php
while($query->fetch()):
$lastspace = strrpos($content, ' ');
?>
<article class="post-excerpt">
<div class="col-md-6 post">
<a href="#">
<img src="../img/blog_posts/<?php echo $image ?>" class="img-responsive">
</a>
<header>
<a href="#">
<h3><?php echo $title ?></h3>
</a>
<p class="post-meta">
<?php echo $category ?>
<span><?php echo $date ?></span>
</p>
</header>
<p>
<?php echo substr($content, 0, $lastspace)."<a href='post.php?id=$post_id'> ..Read More</a>" ?>
</p>
</article>
<?php endwhile ?>
</div>
</div>
<?php
if($prev > 0){
echo "<a href='blog.php?p=$prev'>Prev</a>";
}
if($page < $pages){
echo "<a href='blog.php?p=$next'>Next</a>";
}
?>
</div>
</div>
</div>
Query:
$query = $db->prepare("SELECT id, title, date, image, LEFT(content,500) AS content, category FROM blog INNER JOIN categories ON categories.category_id=blog.category_id order by id desc limit $start, $per_page");
$query->execute();
$query->bind_result($post_id, $title, $date, $image, $content, $category);
if you want to fetching the data twice form result set means you need to use $query->data_seek(0); before second while loop to reset the internal data pointer to 0 . otherwise you will get error .
update 1: use this one before second loop
$query->data_seek(0);
I solved it by using an array in the first loop and then echoing it in a for loop where the second while loop was.
<div class="container-fluid">
<div class="row">
<div class="col-md-8 posts">
<div class="row">
<?php
while($query->fetch()):
$lastspace = strrpos($content, ' ');
$link[] = "<li><a href='post.php?id=$post_id'>$title</a></li>";
?>
<article class="post-excerpt">
<div class="col-md-6 post">
<a href="#">
<img src="../img/blog_posts/<?php echo $image ?>" class="img-responsive">
</a>
<header>
<a href="#">
<h3><?php echo $title ?></h3>
</a>
<p class="post-meta">
<?php echo $category ?>
<span><?php echo $date ?></span>
</p>
</header>
<p>
<?php echo substr($content, 0, $lastspace)."<a href='post.php?id=$post_id'> ..Read More</a>" ?>
</p>
</div>
</article>
<?php endwhile ?>
</div>
<div class="col-md-6 pagination">
<?php
if($prev > 0){
echo "<a href='blog.php?p=$prev' id='previous'>Prev</a>";
}
if($page < $pages){
echo "<a href='blog.php?p=$next' id='next'>Next</a>";
}
?>
</div>
</div>
<aside class="sidebar col-md-3">
<div class="widget">
<h2>About me</h2>
<p>
I'm Yousef. Aspiring web, mobile, and soon-to-be game developer. Well I'm also a geek, a nerd, and I love comic books and comic book accesories. One day I will make the world's coolest website.
</p>
</div>
<div class="widget">
<h2>Recent Posts</h2>
<ul>
<?php
for ($x = 0; $x <= 2; $x++) {
echo $link[$x];
}
?>
</ul>
</div>
</aside>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have the following PHP code, which dynamically generates content:
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php foreach ($this->getItems() as $_item): ?>
<div class="col-sm-3">
<a class="product-image" href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_item->getName()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(75); ?>" width="75" height="75" alt="<?php echo $this->escapeHtml($_item->getName()) ?>" /></a>
<div class="product-details">
<h3 class="product-name"><?php echo $this->escapeHtml($_item->getName()) ?></h3>
<?php echo $this->getPriceHtml($_item, true) ?>
<button type="button" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_item) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<ul class="add-to-links">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><?php echo $this->__('Add to Wishlist') ?></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_item)): ?>
<li><span class="separator">|</span> <?php echo $this->__('Add to Compare') ?></li>
<?php endif; ?>
</ul>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
The above code outputs the following structure:
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3">product1</div>
<div class="col-sm-3">product2</div>
<div class="col-sm-3">product3</div>
<div class="col-sm-3">product4</div>
<div class="col-sm-3">product5</div>
<div class="col-sm-3">product6</div>
.
.
.
etc..
</div>
</div>
</div>
I want to create this structure:
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3">product1</div>
<div class="col-sm-3">product2</div>
<div class="col-sm-3">product3</div>
<div class="col-sm-3">product4</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3">product1</div>
<div class="col-sm-3">product2</div>
<div class="col-sm-3">product3</div>
<div class="col-sm-3">product4</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3">product1</div>
<div class="col-sm-3">product2</div>
<div class="col-sm-3">product3</div>
<div class="col-sm-3">product4</div>
</div>
</div>
.
.
.
etc...
</div>
How do I change the dynamic structure so they get what they want?
Thanks in advance!
In order to create the structure you want:
You need to put <div class="item active"> in the foreach loop as well, because in order to have many items, you want that to be repeated many times too.
You have to remove active from <div class="item active"> as it will be added to every item, while we only want it to be in the first one.
You have to create a checking variable, so that the class active is added to the first item only.
Your final code should look like:
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
<?php
$i = 0; /* This is the checking variable */
$active; /* This is the variable containing the class 'active' */
foreach ($this->getItems() as $_item):
$i++; /* We increment the checking variable in each loop */
$active = ($i === 1) ? "active" : ""; /* We make the check */
?>
<div class="item <?php echo $active;?>">
<!-- The rest of your code as it is -->
</div>
<?php
endforeach;
?>
</div>
</div>
[EDIT]:
Considering your comment, in the case of wanting four products in each item, you would need to use another loop inside <div class = "row">.
The key part you are doing wrong in your code, however, that doesn't change, is that you don't loop the <div class = "item"> and that's way you have only one.
A preview of how your code inside <div class="item"> should be:
<div class="item <?php echo $active;?>">
<div class="row">
<?php
for ($i = 0; $i <= 4; ++$i):
?>
<div class="col-sm-3"><!-- The rest of the code --></div>
<?php
endfor;
?>
</div>
</div>
Try this:
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php foreach ($this->getItems() as $key=>$_item): // add $key in for loop
if($key != 0 && $key % 4 == 0) { // just add this code - it will check if 4 records has been displayed re create row div...
echo '</div><div class="row">';
}
?>
<div class="col-sm-3">
<a class="product-image" href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_item->getName()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(75); ?>" width="75" height="75" alt="<?php echo $this->escapeHtml($_item->getName()) ?>" /></a>
<div class="product-details">
<h3 class="product-name"><?php echo $this->escapeHtml($_item->getName()) ?></h3>
<?php echo $this->getPriceHtml($_item, true) ?>
<button type="button" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_item) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<ul class="add-to-links">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><?php echo $this->__('Add to Wishlist') ?></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_item)): ?>
<li><span class="separator">|</span> <?php echo $this->__('Add to Compare') ?></li>
<?php endif; ?>
</ul>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>