Using PHP/MySQL to insert information into DIVs

Question

Okay, so what I am trying to achieve is a "News Feed" type of thing with PHP and a MySQL database. I have the database and tables setup, and a CMS setup that inserts info into the database, and have successfully called individual rows of the table into my HTML layout using the SELECT statement.

Now, what I am trying to do is have a home page, which contains 12 divs, each one being an image that links to an individual post page, and dynamically generated from my table in DESC order. That way, the 12 most recent designs are displayed on the homepage.

Then, I want to achieve the same type of thing except on a page that is sorted by category, which I am assuming would be done by adding a WHERE category=categoryname to my SELECT statement. Just hoping someone with more knowledge could give me some guidance on how to proceed with this.

Here's my HTML (I inserted Needs to be dynamically generated in the links and img src):

/* Other relevant Code */
<div class="homeContent">
    <div class="newsItems">
        <div class="newsItem1">
            <a href="**Needs to be dynamically generated**"><img src="**Needs to be dynamically generated**" alt="" class="newsItem" /></a>
        </div>
        <div class="newsItem2">
            <a href="**Needs to be dynamically generated**"><img src="**Needs to be dynamically generated**" alt="" class="newsItem" /></a>
        </div>
        <div class="newsItem3">
            <a href="**Needs to be dynamically generated**"><img src="**Needs to be dynamically generated**" alt="" class="newsItem" /></a>
        </div>
        <div class="newsItem4">
            <a href="**Needs to be dynamically generated**"><img src="**Needs to be dynamically generated**" alt="" class="newsItem" /></a>
        </div>
        <div class="newsItem5">
            <a href="**Needs to be dynamically generated**"><img src="**Needs to be dynamically generated**" alt="" class="newsItem" /></a>
        </div>
        <div class="newsItem6">
            <a href="**Needs to be dynamically generated**"><img src="**Needs to be dynamically generated**" alt="" class="newsItem" /></a>
        </div>
        <div class="newsItem7">
            <a href="**Needs to be dynamically generated**"><img src="**Needs to be dynamically generated**" alt="" class="newsItem" /></a>
        </div>
        <div class="newsItem8">
            <a href="**Needs to be dynamically generated**"><img src="**Needs to be dynamically generated**" alt="" class="newsItem" /></a>
        </div>
        <div class="newsItem9">
            <a href="**Needs to be dynamically generated**"><img src="**Needs to be dynamically generated**" alt="" class="newsItem" /></a>
        </div>
        <div class="newsItem10">
            <a href="**Needs to be dynamically generated**"><img src="**Needs to be dynamically generated**" alt="" class="newsItem" /></a>
        </div>
        <div class="newsItem11">
            <a href="**Needs to be dynamically generated**"><img src="**Needs to be dynamically generated**" alt="" class="newsItem" /></a>
        </div>
        <div class="newsItem12">
            <a href="**Needs to be dynamically generated**"><img src="**Needs to be dynamically generated**" alt="" class="newsItem" /></a>
        </div>
    </div>
</div>

I haven't gotten very far with the PHP for this part, as I am not sure which direction to go, and I have slowly learned that if you choose the wrong direction with PHP it usually involves starting over. Thanks in advance for any help!

Long Story Short, how can I get the img src and links to be dynamically generated into these predefined DIVs from a MySQL table using PHP, and get them to be in DESC order?

Have you thought of an RSS feed for your homepage to consume? — Jared Farrish
– Jared Farrish, Commented Aug 11, 2012 at 23:18

David · Accepted Answer · 2012-08-11 23:25:49Z

1

The following code will take the data from your database and display a new <div>, link, and image.

Image.php:

<?php
$query = "SELECT id, link, image FROM images ORDER BY id DESC";
?>

<html>
   <body>
      <?php while($row = mysql_fetch_assoc($query)): ?>
          <div class="NewsItem<?php echo $row['id']; ?>">
              <a href="<?php echo $row['link']; ?>"><img src="<?php echo $row['image']; ?>" alt="" class="newsItem" /></a>
          </div>
      <?php endwhile; ?>
   </body>
</html>

This assumes you have a table with the following columns:

ID (AUTO INCREMENT) INT
image TINYTEXT - URL to image file
link TINYTEXT - Link to where you want the link to go.

answered Aug 11, 2012 at 23:25

David

3,8112 gold badges31 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jon Egeland Over a year ago

Don't use SELECT *..., it's a bad practice

Jon Egeland · Accepted Answer · 2012-08-11 23:43:04Z

This answer assumes you have the following:

A MySQL connection in PHP (here, this is stored in the $sql variable).
image_src, url, and created_at columns in your MySQL table (we'll call the table my_table).

Querying for Everything

First off, let's go over the query.

We want to get all the data for all twelve rows at the same time so we don't have to query multiple times. We also want everything ordered in a descending fashion, which is where created_at comes into play.

It could look something like this:

SELECT m.image_src, m.url, m.created_at
FROM my_table AS m
ORDER BY m.created_at DESC
LIMIT 12

Let's store this query in a variable. We'll make it simple and call it $query

$query = /* The query we just wrote above */

Displaying the Results

Now we just have to figure out how to make the result look nice. I'll assume you know how to run the query, seeing how you've managed it already.

Looking at your example, we want each result to be in it's own div element, with a unique class attribute. I would recommend making those into ids instead, since they will be unique. We can add a newsItem class to each one instead.

To do what we want, we'll create a while loop to iterate over each row and print out the appropriate HTML. It could look like this:

<div class="newsItems">
  <?php
    $result = $sql->query($query);

    $count = 0;
    while(null !== ($r = $result->fetch_assoc()): ?>
      <div id="newsItem<?php echo ++$count; ?>" class="newsItem">
        <a href="<?php echo $r['url']; ?>"><img src="<?php echo $r['image_src']; ?>" alt="" /></a>
      </div>
  <?php
    endwhile;
  ?>
</div>

A Couple of Things

Take careful notice of the while condition. With new versions of PHP, it is important that you compare the $r variable against a null value. It used to be possible to use false instead, but now that it isn't, a statement like this one will throw an error:
```
while(false !== ($r = $result->fetch_assoc())):
```
Be careful with your statements.
Note how we only put the newsItem class on the div elements. Because the a and img tags are inside of the div, you can select either of them using .newsItem a or .newsItem img in your stylings.
If you have a series of unique classes, it is better to make them ids than classes for clarity. There is no point in having a class that only gets used once.

Enjoy and good luck with your project!

Collectives™ on Stack Overflow

Using PHP/MySQL to insert information into DIVs

2 Answers 2

1 Comment

Querying for Everything

Displaying the Results

A Couple of Things

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Querying for Everything

Displaying the Results

A Couple of Things

Comments

Your Answer

Sign up or log in

Post as a guest

Related