How to display data in multiple divs with one query?

Hi guys,
I am trying to add futured post into my website, its two columns divs side by side,
I need to select 6 articles from database and display one article as futured in first column and 5 articles in second column.
its seems simple, but my head just stopped working.

Here is my query:

$stmt = $pdo->prepare("SELECT * FROM posts WHERE post_post_id = ? LIMIT 6");
$stmt->execute([$_POST['catId']]);
if($stmt->rowCount() > 0){
  while($row = $stmt->fetch()){
  }
}

And my html first column which I need to display one post in it :


  <div class="col-sm-6">
    <div class="whats-news-single mb-40 mb-40">
      <div class="whates-img">
        <img src="..." alt="">
      </div>
      <div class="whates-caption">
        <a href="latest_news.html">Secretart for Economic Air plane that looks like</a>
        <p>Struggling to sell one the market won’t stop actress and the and singer Jennifer Lopez.</p>
        <span class="small">by Alice cloe - Jun 19, 2020</span>
      </div>
    </div>
  </div

And my html second column which I need to display 5 post in it :

  <div class="col-sm-6">
    <div class="card mb-3">
      <div class="row g-3">
        <div class="col-4">
          <img class="rounded" src="..." alt="">
        </div>
        <div class="col-8">
          <h6><a href="post-single-2.html" class="btn-link stretched-link text-reset fw-bold">The pros and cons of business agency</a></h6>
          <div class="small mt-1">May 17, 2021</div>
        </div>
      </div>
    </div>
  </div>

Thanks for all helps

=>

$articles = $stmt->fetchAll(PDO::FETCH_ASSOC);

Then it is an array like any other.

Yes its sorry. I set PDO::FETCH_ASSOC in connection. mine should be fetchAll();

1 Like

How do you decide which article goes in the “featured” (I presume that’s what you meant) div as opposed to the other div?

1 Like

I would love to display first post (without condition) in ‘featured’ column, but if needed I can add a condition ‘futured’ in database.
first post in first <div class="col-sm-6"> and rest 5 in second <div class="col-sm-6">

From experience, that’s going to be hard without having some kind of indication which rows are featured.

yes, I thing it will be a function. but have no idea how to do it :frowning:

No, it’s just SQL related. You create a column for indication. In PHP, you check against that indication to see if it’s the status for “featured”. If it’s not, wrap it in col-sm-6. If it’s “featured”, wrap it in col-lg-12 or whatever size you want.

The problem I see with your OP logic is that there’s no indication so if you want to feature say number 4, you really can’t do that. It’s not as flexible as you’d like it to be. Then the next problem is, I believe SQL orders your query in ascending mode by default. That means if you’re going to make more new articles, you’ll only end up with the 6 oldest articles no matter how much new articles you make. So you should order them in descending mode.

If you want to do it based on it being the first post, you’d need to add an order by clause on your query, unless you just want it to be the first that is retrieved, regardless of which one it actually is. As for deciding which <div> to output

$first = true;
while $row = $stmt->fetch() {
  if ($first == true) { 
    $div = "featured-div-name";
    $first = false;
    }
  else {
    $div = "normal-div-name";
    }
  echo $div;
  echo $postcontents;
}
2 Likes

Thanks, I was going to use array_slice(); but wasnt sure if its safe.
will try your example now.

question : where that echo $postcontents; come from ?

That’s your post contents, retrieved from the database. I just picked a random variable name, obviously you’ll have to change it to use your actual data.

I changed div to components in second example, it works but displays only one article in each. I want it display 1 in firs and 5 in second same as in image.
RQ287

You’ve changed the variable name in the else clause, or was that just in the forum?

Probably need to see the code as it is now to see why it’s having a problem. I was really just illustrating one way to do something different on the first iteration of a loop.

I removed components works fine now, needed to change fetchAll(); to fetch(); its strange.

Thank you so much.

Here is the code if someone need it :

$id = "1";
if(isset($id)){ 

	$stmt = $pdo->prepare("SELECT * FROM posts WHERE post_catId = ? LIMIT 6");
	$stmt->execute([$id]);
	if($stmt->rowCount() > 0){

    $first = true;
    while ($row = $stmt->fetch()) {
      if ($first == true) { 
        $div = '<div class="col-sm-6 float-start">
                    <div class="whats-news-single">
                      <div class="whates-img">
                        <img src="https://preview.colorlib.com/theme/news/assets/img/gallery/xwhats_news_details1.png.pagespeed.ic.FIr5kNjO4A.webp" alt="">
                      </div>
                      <div class="whates-caption">
                        <a href="latest_news.html">'.$row['post_title'].'</a>
                        <p>'.$row['post_desc'].'</p>
                        <span class="small">by Alice cloe - Jun 19, 2020</span>
                      </div>
                    </div>
                  </div>';
        $first = false;
        }
      else {
        $div = '<div class="col-sm-6 float-end ps-2">
                    <div class="card mb-3">
                      <div class="row g-3">
                        <div class="col-4">
                          <img class="rounded" src="assets/fake_images/blog/4by3/thumb/01.jpg" alt="">
                        </div>
                        <div class="col-8">
                          <h6><a href="'.$row['post_seo_url'].'-'.$row['post_id'].'" class="btn-link stretched-link text-reset fw-bold">'.$row['post_title'].'</a></h6>
                          <div class="small mt-1">'.$row['post_created_at'].'</div>
                        </div>
                      </div>
                    </div>
                  </div>';
        }
      echo $div;
    }
  }
}

That’s only because of the way the while() loop in that sample code was working. You could easily have used fetchAll() and then used a foreach() loop to step through the array instead. Glad it’s working for you now.

2 Likes