XAMPP环境下PHP文件无法在Localhost打开及数据库显示问题求助

问题场景 #

使用XAMPP服务器，访问localhost/easeltd时页面出错，需要正确展示数据库easeltd中branch表的所有详情，已附上错误截图、数据库详情截图及表结构截图。

原代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Retreat Reservation System</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <h1>Retreat Reservation System</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Branches</a></li>
            <li><a href="#">Rooms</a></li>
            <li><a href="#">Bookings</a></li>
            <li><a href="#">Suppliers</a></li>
            <li><a href="#">Login</a></li>
        </ul>
    </nav>
    <main>
        <h2>Branches</h2>
        <ul>
            <li>
<?php
// Database credentials
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'easeltd';

// Connect to database
$connection = new mysqli($dbhost, $dbuser, $dbpass, $dbname);

// Check connection
if (!$connection->connect_error) {
    die("Connection failed: " . !$connection->connect_error);
}
//read all rows
$sql= "SELECT * FROM branch";
$result = $connection->query($sql);

if (!$result){
die("Invalid query: ". $connection->error);
}

//read data of each row
while($row = $result->fetch_assoc()){
echo "<tr>
<td>" . $row["branch_id"] . "</td>
<td>" . $row["branch_name"] . "</td>
<td>" . $row["adderess"] . "</td>
<td>" . $row["phone_number"] . "</td>
<td>" . $row["branch_id"] . "</td>
</tr>";
}
?>

            </li>
            <li><a href="#">Branch 2</a></li>
            <li><a href="#">Branch 3</a></li>
        </ul>
        <h2>Rooms</h2>
        <ul>
            <li><a href="#">Room 1</a></li>
            <li><a href="#">Room 2</a></li>
            <li><a href="#">Room 3</a></li>
        </ul>
        <h2>Bookings</h2>
        <ul>
            <li><a href="#">Booking 1</a></li>
            <li><a href="#">Booking 2</a></li>
            <li><a href="#">Booking 3</a></li>
        </ul>
        <h2>Suppliers</h2>
        <ul>
            <li><a href="#">Supplier 1</a></li>
            <li><a href="#">Supplier 2</a></li>
            <li><a href="#">Supplier 3</a></li>
        </ul>
        <h2>Login</h2>
        <form action="" method="post">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
            <input type="submit" value="Submit">
        </form>
    </main>
    <footer>
        <p>&copy; 2023 Retreat Reservation System</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

代码错误分析 #

1. 数据库连接判断逻辑颠倒：if (!$connection->connect_error) 会在连接成功时执行终止操作，正确逻辑应是当connect_error存在（连接失败）时终止程序。
2. HTML结构冲突：用<tr><td>表格标签包裹数据，但外层是<ul><li>列表结构，导致页面渲染异常。
3. 字段名拼写错误：$row["adderess"]应为$row["address"]（匹配表结构中的字段名）。
4. 冗余硬编码内容：列表中手动添加的Branch 2、Branch 3会和数据库数据冲突，需移除。

修正后的代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Retreat Reservation System</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <h1>Retreat Reservation System</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Branches</a></li>
            <li><a href="#">Rooms</a></li>
            <li><a href="#">Bookings</a></li>
            <li><a href="#">Suppliers</a></li>
            <li><a href="#">Login</a></li>
        </ul>
    </nav>
    <main>
        <h2>Branches</h2>
        <!-- 用表格替代列表展示结构化数据 -->
        <table border="1">
            <tr>
                <th>Branch ID</th>
                <th>Branch Name</th>
                <th>Address</th>
                <th>Phone Number</th>
                <th>Actions</th>
            </tr>
            <?php
            // Database credentials
            $dbhost = 'localhost';
            $dbuser = 'root';
            $dbpass = '';
            $dbname = 'easeltd';

            // Connect to database
            $connection = new mysqli($dbhost, $dbuser, $dbpass, $dbname);

            // 修正连接判断逻辑
            if ($connection->connect_error) {
                die("Connection failed: " . $connection->connect_error);
            }

            // 查询分支数据
            $sql = "SELECT * FROM branch";
            $result = $connection->query($sql);

            if (!$result) {
                die("Invalid query: ". $connection->error);
            }

            // 循环输出每行数据
            while($row = $result->fetch_assoc()){
                echo "<tr>
                <td>" . htmlspecialchars($row["branch_id"]) . "</td>
                <td>" . htmlspecialchars($row["branch_name"]) . "</td>
                <td>" . htmlspecialchars($row["address"]) . "</td>
                <td>" . htmlspecialchars($row["phone_number"]) . "</td>
                <td>" . htmlspecialchars($row["branch_id"]) . "</td>
                </tr>";
            }

            // 关闭数据库连接
            $connection->close();
           ?>
        </table>

        <h2>Rooms</h2>
        <ul>
            <li><a href="#">Room 1</a></li>
            <li><a href="#">Room 2</a></li>
            <li><a href="#">Room 3</a></li>
        </ul>
        <h2>Bookings</h2>
        <ul>
            <li><a href="#">Booking 1</a></li>
            <li><a href="#">Booking 2</a></li>
            <li><a href="#">Booking 3</a></li>
        </ul>
        <h2>Suppliers</h2>
        <ul>
            <li><a href="#">Supplier 1</a></li>
            <li><a href="#">Supplier 2</a></li>
            <li><a href="#">Supplier 3</a></li>
        </ul>
        <h2>Login</h2>
        <form action="" method="post">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
            <input type="submit" value="Submit">
        </form>
    </main>
    <footer>
        <p>&copy; 2023 Retreat Reservation System</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

额外优化说明 #

• 添加htmlspecialchars()转义输出内容，防止XSS攻击。
• 增加表头<th>，让表格数据展示更清晰。
• 补充数据库连接关闭操作，释放服务器资源。

内容的提问来源于stack exchange，提问作者dbafix