How to I display a div for each row of data in a database?

Question

I have a database that stores information of an item including an image source path, descriptions etc. Currently the data is static, as shown in the code snippet below. Basically I need to output a new 'thumbnail' for each row of data in the table. I think this is done by a for loop, however I'm not sure how to implement this. Thank you.

<div class='panel-heading' contenteditable='false'>Your items for sale</div>
<div class='panel-body'>
    <div class='row'>
        <div class='col-md-4'>
            <div class='thumbnail'>
                <img alt='300x200' src='http://lorempixel.com/600/200/people'>
                <div class='caption'>
                    <h3>
                        Rover
                    </h3>
                    <p>Cocker Spaniel who loves treats.</p>
                    <p></p>
                </div>
            </div>
        </div>
        <div class='col-md-4'>
            <div class='thumbnail'>
                <img alt='300x200' src='http://lorempixel.com/600/200/city'>
                <div class='caption'>
                    <h3>
                        Marmaduke
                    </h3>
                    <p>Is just another friendly dog.</p>
                    <p></p>
                </div>
            </div>
        </div>
        <div class='col-md-4'>
            <div class='thumbnail'>
                <img alt='300x200' src='http://lorempixel.com/600/200/sports'>
                <div class='caption'>
                    <h3>
                        Rocky
                    </h3>
                    <p>Loves catnip and naps. Not fond of children.</p>
                    <p></p>
                </div>
            </div>
        </div>
    </div>
</div>

My attempt:

<? $sql = "SELECT srcpath FROM images";
$res = mysql_query($sql) or die(mysql_error());

$result = mysql_query($sql);

echo '<div"><ul>';

while ($fetch = mysql_fetch_array($result)) {
    $petname = $fetch['username'];
    echo '<li><P>'.$fetch['description'].'</P>';
    echo '<img src="'.$fetch['srcpath'].'" alt="" />';
    echo '</li>';
}
echo '</ul></div>';

?>

I think people will want to see your shot at it before giving an answer. Have you found any tutorials or anything you've tried to follow? Any PHP code you've tried? — the-nick-wilson, May 08 '15 at 14:10
Apologies, you're right. I've attempted it to a degree and will add to main post. — Tom Reeves, May 08 '15 at 14:12
Are you getting some kind of error? As I see it, the "username" and "description" fields are not present in your query, — Gonzalo Acosta, May 08 '15 at 14:18
you're also using `mysql_query` twice which I don't know why. — Funk Forty Niner, May 08 '15 at 14:18
Right. What @GonzaloAcosta said is true. Those will never appear because you've only chosen one column in your SELECT. — Funk Forty Niner, May 08 '15 at 14:21
Here, debug your code. Add error reporting to the top of your file(s) right after your opening PHP tag for example ` — Funk Forty Niner, May 08 '15 at 14:25
Please, [stop using `mysql_*` functions](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php). They are no longer maintained and are [officially deprecated](https://wiki.php.net/rfc/mysql_deprecation). Learn about [prepared statements](http://en.wikipedia.org/wiki/Prepared_statement) instead, and consider using PDO, [it's not as hard as you think](http://jayblanchard.net/demystifying_php_pdo.html). — Jay Blanchard, May 08 '15 at 14:25
@JayBlanchard that ^ may also be ignored Sam. But, not by moi ;-) — Funk Forty Niner, May 08 '15 at 14:27
*Ignnored until the server is updated Ralph*. Merci @Fred-ii- ;-) — Jay Blanchard, May 08 '15 at 14:28
Something else to consider is that this is exactly what Angular JS was built for. Might be worth researching. — the-nick-wilson, May 10 '15 at 00:04

score 0 · Answer 1 · answered May 08 '15 at 14:47

I still disencourage to use mysql, you should use mysqli or some other as mysql is deprecated.

Anyway, I'd recommend preparing the whole html loop via php and then print it, like this:

First of all, this would be your php part:

<?
$sql = "SELECT username, description, srcpath FROM images"; // Note that I included the fields you're actually using.

$res = mysql_query($sql) or die(mysql_error());

$result = mysql_query($sql);

$divHtml ='<div class='panel-body'>'; // Here's where you add the main div that holds the others.

//now in the loop you've got to be careful with the css classes, as your html shows, they won't be always the same. But this should give you some insight on how it works.

while($fetch = mysql_fetch_array($result)){

    $divHtml .='<div class="row">';// add css classes and the like here. In case you don't know, the .= operators concatenate the strings that will make your html code.
    $divHtml .='    <div class="col-md-4">'; // be careful with this class, as you might need to evaluate it for every run of the loop
    $divHtml .='        <div class="thumbnail">';
    $divHtml .='            <li><P>' . $fetch['description'] .'</P>';
    $divHtml .='            <img src="'.$fetch['srcpath'].'" alt="" />';
    $divHtml .='            </li>';
    $divHtml .='        </div>';
    $divHtml .='    </div>';
    $divHtml .='</div>';
}

$divHtml .= '</div>'; // And here you close the main div.
?>

Then your html will look just like this:

<div class='panel-heading' contenteditable='false'>Your items for sale</div>
          <?php echo $divHtml; ?>

How to I display a div for each row of data in a database?

1 Answers1