How to implement left navigation function in php-PHP Problem-php.cn

How to implement left navigation function in php

PHPz

Release： 2023-04-11 15:50:16

Original

806 people have browsed it

With the rapid development of web applications, website applications are becoming more and more complex, and the interfaces are becoming more and more cumbersome. For users, a simple and easy-to-use interface is particularly important. The left navigation bar is a classic UI design in web applications, providing users with necessary navigation and operation functions. Below we will introduce how to implement left navigation in PHP.

1. HTML

First, we need to write HTML code. In the left column, we can use ul and li elements to implement a vertically arranged navigation bar. For example:

<ul>
    <li><a href="#">导航项1</a></li>
    <li><a href="#">导航项2</a></li>
    <li><a href="#">导航项3</a></li>
    <li><a href="#">导航项4</a></li>
    <li><a href="#">导航项5</a></li>
</ul>

Copy after login

Here we use the a element to display the navigation link, that is, when the user clicks on the navigation item, it will jump to the corresponding page. We can beautify the navigation bar through CSS.

2. PHP

Next, we will use php to implement left navigation. PHP can easily generate HTML code and make it highly integrated with the content in the database. For example, we can use php code to get the navigation items from the database:

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

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检测连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

$sql = "SELECT id, title, link FROM navigation";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // 输出数据
    while($row = $result->fetch_assoc()) {
        echo "<li><a href=&#39;" . $row["link"]. "&#39;>". $row["title"]. "</a></li>";
    }
} else {
    echo "0 结果";
}
$conn->close();
?>

Copy after login

In this code, we connect to the database and extract the navigation items from it. Then, we use a while loop to output the navigation items, and the connection and title are obtained from the database.

3. Complete code

Finally, we combine the HTML and PHP code to generate a complete left navigation.

<!DOCTYPE html>
<html>
<head>
<style>
/* CSS代码用于美化导航栏 */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</style>
</head>
<body>
<!-- HTML代码用于创建左侧导航栏 -->
<ul>
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

$sql = "SELECT id, title, link FROM navigation";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "<li><a href=&#39;" . $row["link"]. "&#39;>". $row["title"]. "</a></li>";
    }
} else {
    echo "0 结果";
}
$conn->close();
?>
</ul>
</body>
</html>

Copy after login

Summary

Implementing left navigation through PHP can easily handle dynamic data, making the UI design of the website more flexible, easier to maintain and coordinate. Through the method introduced in this article, you can better master the method of implementing left navigation in PHP.

The above is the detailed content of How to implement left navigation function in php. For more information, please follow other related articles on the PHP Chinese website!