user3051460 user3051460 - 4 months ago 10
SQL Question

Load data from sql to a list in html

I have a list in

html
that defined as follows

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<?php include "connect.php"; ?>
<div id="view">
<div id="container">
<ul>
<!-- row 01 -->
<a href="#"><li class="clearfix">
<img src="images/modern-castle-kitchen.png" alt="thumb" class="thumbnail">
<h2>Full-Room Mansion with Open Kitchen</h2>
<p class="desc">Rental located in Pheonix, AZ. 2 bedrooms 1.5 baths. </p>
<span class="price">S2,650/month</span>
</li></a>

</ul>
</div>
</div>

</body>
</html>


Another connect.php file to configure a connection to my database as

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "room_seeker";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}

$sql = "SELECT image, detail, money FROM room";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
echo "image: " . $row["image"]. " - detail: " . $row["detail"]. " " . "money:". $row["money"]. "<br>";
}
} else {
echo "0 results";
}

mysqli_close($conn);
?>


In my above html file, I just define a fixed data. How can I make a code to get data from my database (
room_seeker.sql
) and insert to the list in my above html file. Thank you for your help

Update: Based on the suggestion, I update my html file as

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<?php include "connect.php"; ?>
<div id="view">
<div id="container">
<ul>
<!-- Assume sql has five rooms, so each room will be displayed in one list -->
<a href="#"><li class="clearfix">
<img src="images/modern-castle-kitchen.png" alt="thumb" class="thumbnail">
<h2><?php echo $row['image']?></h2>
<p class="desc"><?php echo $row['detail']?></p>
<span class="price"><?php echo $row['money']?></span>
</li></a>

</ul>
</div>
</div>

</body>
</html>


But the ouput is was wrong (have nothing in page)

Answer

Try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<?php include "connect.php"; ?>
<?php 
    $sql = "SELECT image, detail, money FROM room";
    $result = mysqli_query($conn, $sql);
?>

<div id="view"> 
        <div id="container">
            <ul>
            <?php
                if (mysqli_num_rows($result) > 0) {
                    while($row = mysqli_fetch_assoc($result)) {
            ?>
                <!-- row 01 -->
                <a href="#"><li class="clearfix">
                        <img src="images/modern-castle-kitchen.png" alt="thumb" class="thumbnail">
                        <h2>Full-Room Mansion with Open Kitchen</h2>
                        <p class="desc">Rental located in Pheonix, AZ. 2 bedrooms 1.5 baths. </p>                       
                        <span class="price">S2,650/month</span>
                </li></a>

                <a href="#"><li class="clearfix">
                        <img src="<?php echo $row["image"]; ?>" alt="thumb" class="thumbnail">
                        <h2>Full-Room Mansion with Open Kitchen</h2>
                        <p class="desc"><?php echo $row["detail"]; ?></p>                       
                        <span class="price"><?php echo $row["money"]; ?></span>
                </li></a>
            <?php } 
            } ?>
            </ul>
        </div>
 </div>      

</body>
</html>

I modified connect.php so it looks like this

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "room_seeker";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

?>