How to fill HTML list using data from a MySQL database?

Question

I have an html webpage, and it contains a unordered list .So i want to fill this list using items that are stored in a MySQL database, an example item is provided to be clear.

<ul class="content">
    <li class="class1">
        <p id="id1">paragraph1</p>
        <div class="class1sub">
            <p>paragraph1sub</p>
        </div>
    </li>

So i want to retrieve the whole list items from the database and display it on the webpage. The problem is that each list item is stored in the database besides its CSS classes and IDs to be styled. Here is an example of a couple of items:

liclass - id - paragraph1 - divclass - paragraph2

So I'm thinking of maybe using JavaScript/PHP and MySQL ... but no starting code on my mind...any help ?

Answer 1

PHP is definitely the way to get this done. I've used the CodeIgniter php framework in a lot of my projects. It's very easy to set up and use, but feel freed to shop around to find what's best for you. I'll try not to be too CodeIgniter specific here, but if you do go this route you can check out this video on basic database function with CodeIgniter .

Basically whatever you choose to do there are going to have few basic parts. Some config area where you type in you Database name, and username and password.

Example Database Config file:

$db['default']['hostname'] = "localhost";
$db['default']['username'] = "myusername";
$db['default']['password'] = "mypassword";
$db['default']['database'] = "mydatabse";
$db['default']['dbdriver'] = "mysql";

Now that the php knows how to talk to your database it's time to get the data and send it to be displayed.

This next part is more specific to CodeIgniter, mostly because that's what I have the most experience with, but many of the other frameworks will be something similar. The next three code snips will be represent three different files. The idea is to abstract/remove the backend database stuff from the front end content. This is referred to as Model-View-Controller(MVC)

Run your query (Model):

function getData()
{
    $query = $this->db->get('myTable');
    return $query->result();
}

Set that data and send it to your view(Contorller):

function addReceipt()
{
    $data = array();

    if($query = $this->my_model->getData())
    {
        $data['content'] = $query;
    }   
    $this->load->view('my_view', $data);
}

Lastly display your data by looping through records and using php echo(View):

<ul class="content">
<?php if(isset($content)) : foreach($content as $row) : ?>
    <li class="<?php echo $row->liclass; ?>">
        <p id="<?php echo $row->ID; ?>"><?php echo $row->paragraph1; ?></p>
            <div class="<?php echo $row->divclass; ?>">
                    <p><?php echo $row->paragraph2; ?></p>
            </div>
    </li>
    <?php endforeach; ?>
</ul>

Answer 2

This would be interesting if you showed your php code here: but this is what you should do

<?php

mysql_connect('hostname','username','password');
mysql_select_db('dbname');
$sql = "select *from tablename";
$run = mysql_query($sql);
echo "<table>";
echo "<tr><th>NAME</th><th>SURNAME</th><th>GENDER</th><th>BIRTHDAY</th></tr>";
 $i = 1;
while($row = mysql_fetch_array($run)){
   if($i%2 == 0) $bgcolor = 'lightblue';else $bgcolor = 'white';
   $i++;
   echo "<tr style='backgroundcolor".$bgcolor."'><td>NAME</td><td>".$row['SURNAME']."</td><td>".$row['GENDER']."</td><td>".$row['BIRTHDAY']."</td></tr>";
}
echo "</table>";
?>