Maison > développement back-end > Problème PHP > Comment implémenter la fonction de navigation à gauche en php

Comment implémenter la fonction de navigation à gauche en php

PHPz
Libérer: 2023-04-11 15:50:16
original
806 Les gens l'ont consulté

Avec le développement rapide des applications Web, les applications de sites Web deviennent de plus en plus complexes et les interfaces de plus en plus lourdes. Pour les utilisateurs, une interface simple et facile à utiliser est particulièrement importante. La barre de navigation de gauche est une conception d'interface utilisateur classique dans les applications Web, offrant aux utilisateurs les fonctions de navigation et d'exploitation nécessaires. Ci-dessous, nous présenterons comment implémenter la navigation à gauche en PHP.

1. HTML

Tout d'abord, nous devons écrire du code HTML. Dans la colonne de gauche, nous pouvons utiliser les éléments ul et li pour implémenter une barre de navigation disposée verticalement. Par exemple :

<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>
Copier après la connexion

Ici, nous utilisons l'élément a pour afficher le lien de navigation, c'est-à-dire que lorsque l'utilisateur clique sur l'élément de navigation, il passera à la page correspondante. Nous pouvons embellir la barre de navigation via CSS.

2. PHP

Ensuite, nous utiliserons php pour implémenter la navigation à gauche. PHP peut facilement générer du code HTML et le rendre hautement intégré au contenu de la base de données. Par exemple, nous pouvons récupérer les éléments de navigation de la base de données en utilisant le code php :

<?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();
?>
Copier après la connexion

Dans ce code, nous nous connectons à la base de données et en extrayons les éléments de navigation. Ensuite, nous utilisons une boucle while pour afficher les éléments de navigation, et la connexion et le titre sont tous deux obtenus à partir de la base de données.

3. Code complet

Enfin, nous combinons le code HTML et PHP pour générer la navigation complète à gauche.

<!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>
Copier après la connexion

Résumé

La mise en œuvre de la navigation à gauche via PHP peut facilement gérer les données dynamiques, rendant la conception de l'interface utilisateur du site Web plus flexible, plus facile à maintenir et à coordonner. Les méthodes présentées dans cet article peuvent vous aider à mieux maîtriser la méthode d'implémentation de la navigation à gauche en PHP.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal