Mit der kontinuierlichen Weiterentwicklung des modernen Internets nutzen immer mehr Websites Informationslisten und entsprechende Detailinformationsseiten, um verschiedene Informationskategorien anzuzeigen. Im Prozess der Website-Entwicklung ist es ein sehr wichtiger Schritt, den Sprung von der Informationslistenseite zur detaillierten Informationsseite zu realisieren. In diesem Artikel wird erläutert, wie Sie PHP verwenden, um diese Funktion zu erreichen.
1. Vorkenntnisse
Bevor wir diesen Artikel studieren, müssen wir die folgenden Voraussetzungen beherrschen:
II , Implementierungsmethode
Schauen wir uns an, wie diese Funktion implementiert wird:
Zuerst müssen wir eine Tabelle in der Datenbank erstellen, um die Informationsliste und ihre Details zu speichern. Nehmen wir als Beispiel „Produkte“ und erstellen Sie in der Datenbank eine Tabelle mit dem Namen „Produkte“, die die folgenden Felder enthält:
Als nächstes müssen wir eine Informationslistenseite erstellen, um verschiedene Produkte anzuzeigen. Wir verwenden HTML und CSS, um diese Seite zu erstellen, wie unten gezeigt:
<!DOCTYPE html>
<html>
<head>
<title>产品列表</title>
<style>
.product {
margin-bottom: 30px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
display: inline-block;
width: 30%;
vertical-align: top;
margin-right: 3%;
margin-left: 3%;
}
.product img {
margin-bottom: 10px;
width: 100%;
height: 200px;
object-fit: cover;
}
.product h2 {
font-size: 20px;
margin-bottom: 5px;
}
.product p {
font-size: 16px;
margin-bottom: 10px;
}
.product a {
display: block;
text-align: center;
background-color: #333;
color: #fff;
padding: 10px;
border-radius: 5px;
text-decoration: none;
}
</style>
</head>
<body>
<div class="product">
<img src="https://via.placeholder.com/200x200.png?text=Product+1" alt="Product 1">
<h2>Product 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="">详细信息</a>
</div>
<div class="product">
<img src="https://via.placeholder.com/200x200.png?text=Product+2" alt="Product 2">
<h2>Product 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="">详细信息</a>
</div>
<div class="product">
<img src="https://via.placeholder.com/200x200.png?text=Product+3" alt="Product 3">
<h2>Product 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="">详细信息</a>
</div>
</body>
</html>Wir verwenden div-Elemente, um verschiedene Produkte anzuzeigen, hauptsächlich einschließlich Bilder, Titel, Beschreibungen und „Details“-Schaltflächen. Wir haben der Schaltfläche „Details“ jedoch noch keine Funktionalität hinzugefügt.
Jetzt müssen wir zur detaillierten Informationsseite des Produkts springen, nachdem wir auf die Schaltfläche „Details“ geklickt haben. Wir können PHP verwenden, um diese Funktion zu erreichen.
Fügen Sie zunächst URL-Parameter zu jeder Schaltfläche „Details“ hinzu, um die ID des aktuellen Produkts zu markieren. Zum Beispiel:
<a href="details.php?id=1">详细信息</a>
In diesem Beispiel verwenden wir „details.php“ als URL der Detailseite und übergeben den Produkt-ID-Parameter „id=1“ an die Seite.
Dann müssen wir PHP auf der Detailseite verwenden, um diesen Parameter abzurufen und die Produktdetails aus der Datenbank abzurufen. Zuerst müssen wir der Detailseite den folgenden Code hinzufügen, um die URL-Parameter abzurufen:
<?php
if (isset($_GET['id'])) {
$id = $_GET['id'];
} else {
header('Location: index.php');
exit;
}
?>In diesem Code verwenden wir die Funktion isset(), um zu prüfen, ob der Parameter „id“ im Array $_GET vorhanden ist und ob Es existiert, holen Sie es. Der Wert wird der Variablen $id zugewiesen. Andernfalls leiten wir den Benutzer zur Informationslistenseite weiter und verwenden die Funktion header(), um den Sprung zu implementieren.
Als nächstes müssen wir SQL-Abfrageanweisungen verwenden, um die detaillierten Informationen des Produkts aus der Datenbank abzurufen und sie auf der Seite anzuzeigen. Um dies zu erreichen, können wir den folgenden Code verwenden:
<?php
$db = mysqli_connect('localhost', 'username', 'password', 'database');
$query = "SELECT * FROM products WHERE id = $id";
$result = mysqli_query($db, $query);
if (mysqli_num_rows($result) == 0) {
echo '产品不存在';
exit;
} else {
$product = mysqli_fetch_assoc($result);
}
?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $product['name']; ?></title>
<style>
.product {
margin-bottom: 30px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
width: 100%;
}
.product img {
margin-bottom: 10px;
width: 100%;
height: 200px;
object-fit: cover;
}
.product h2 {
font-size: 20px;
margin-bottom: 5px;
}
.product p {
font-size: 16px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="product">
<img src="<?php echo $product['image']; ?>" alt="<?php echo $product['name']; ?>">
<h2><?php echo $product['name']; ?></h2>
<p><?php echo $product['description']; ?></p>
<p>价格：<?php echo $product['price']; ?></p>
</div>
</body>
</html>In diesem Code verwenden wir zunächst die Funktion mysqli_connect(), um eine Verbindung zur MySQL-Datenbank herzustellen, und verwenden die SELECT-Anweisung, um die Produktdaten entsprechend der ID aus der Datenbank abzurufen. Wenn das Produkt nicht existiert, verwenden Sie die Echo-Anweisung, um „Produkt existiert nicht“ auszugeben und das Skript zu beenden. Andernfalls speichern wir die Produktdaten im Array $product und zeigen sie mithilfe von HTML- und PHP-Code auf der Seite an.
3. Zusammenfassung
In diesem Artikel wird erläutert, wie Sie mit PHP von der Informationslistenseite zur detaillierten Informationsseite springen. Bei der Realisierung dieser Funktion müssen wir mehrere Wissensaspekte beherrschen, z. B. Datenbankabfrageanweisungen, HTML, CSS und PHP. Ich hoffe, dieser Artikel kann Ihnen helfen, besser zu verstehen, wie Sie mit PHP zur Detailseite springen.
Das obige ist der detaillierte Inhalt vonSo springen Sie zur Detailseite in PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
