現代のインターネットの継続的な発展に伴い、情報リストと対応する詳細情報ページを使用してさまざまなカテゴリの情報を表示する Web サイトがますます増えています。 Webサイト制作のプロセスにおいて、情報一覧ページから詳細情報ページへのジャンプをいかに実現するかは非常に重要なステップです。この記事では、PHPを使用してこの機能を実現する方法を紹介します。
1. 前提知識
この記事を読む前に、次の前提知識を習得する必要があります:
2. 実装方法
実際にどのように行うのか見ていきましょう。この機能を実装するには :
まず、情報リストとその詳細を保存するテーブルをデータベースに構築する必要があります。例として「products」を取り上げ、次のフィールドを含む「products」という名前のテーブルをデータベースに作成します。
<!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>
div 要素を使用して、主に画像、タイトル、説明、「詳細」ボタンなどのさまざまな製品を表示します。ただし、「詳細」ボタンにはまだ機能を追加していません。
PHP ジャンプまず、各「詳細」ボタンに URL パラメータを追加して、現在の製品の ID をマークします。例:
<a href="details.php?id=1">详细信息</a>
この例では、詳細ページの URL として「details.php」を使用し、製品 ID パラメーター「id=1」をページに渡します。
次に、詳細ページで PHP を使用してこのパラメーターを取得し、データベースから製品の詳細を取得する必要があります。まず、詳細ページに次のコードを追加して、URL パラメーターを取得する必要があります。
<?php if (isset($_GET['id'])) { $id = $_GET['id']; } else { header('Location: index.php'); exit; } ?>
このコードでは、isset() 関数を使用して、$_GET に "id" パラメーターが存在するかどうかを確認します。配列 (存在する場合) 値を取得し、それを $id 変数に割り当てます。それ以外の場合は、ユーザーを情報リスト ページにリダイレクトし、header() 関数を使用してジャンプを実装します。
次に、SQL クエリ ステートメントを使用して、データベースから製品の詳細情報を取得し、ページに表示する必要があります。これを実現するには、次のコードを使用します。
<?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>
このコードでは、まず mysqli_connect() 関数を使用して MySQL データベースに接続し、SELECT ステートメントを使用して ID に対応する製品データを取得します。データベースから。製品が存在しない場合は、echo ステートメントを使用して「製品が存在しません」と出力し、スクリプトを終了します。それ以外の場合は、製品データを $product 配列に保存し、HTML および PHP コードを使用してページに表示します。
3. まとめ
この記事では、PHPを使って情報一覧ページから詳細情報ページにジャンプする方法を紹介します。この機能を実現するには、データベースのクエリ文、HTML、CSS、PHPなど複数の知識を習得する必要があります。この記事が、PHP を使用して詳細ページに移動する方法をより深く理解するのに役立つことを願っています。
以上がPHPで詳細ページに飛ぶ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。