PHPで詳細ページに飛ぶ方法

PHPz
リリース: 2023-04-24 09:21:17
オリジナル
723 人が閲覧しました

現代のインターネットの継続的な発展に伴い、情報リストと対応する詳細情報ページを使用してさまざまなカテゴリの情報を表示する Web サイトがますます増えています。 Webサイト制作のプロセスにおいて、情報一覧ページから詳細情報ページへのジャンプをいかに実現するかは非常に重要なステップです。この記事では、PHPを使用してこの機能を実現する方法を紹介します。

1. 前提知識

この記事を読む前に、次の前提知識を習得する必要があります:

  1. PHP の基本構文
  2. 基礎知識データベースの概要
  3. Webサイト開発の基礎知識
  4. フロントエンドの基礎知識

2. 実装方法

実際にどのように行うのか見ていきましょう。この機能を実装するには :

  1. データベースの構築

まず、情報リストとその詳細を保存するテーブルをデータベースに構築する必要があります。例として「products」を取り上げ、次のフィールドを含む「products」という名前のテーブルをデータベースに作成します。

  • id: 製品 ID
  • name: 製品名
  • description:商品説明
  • price:商品価格
  • image:商品画像url
  • created_at:作成時刻
  • updated_at:更新時刻
    #ページの構築
  1. ##次に、さまざまな製品を表示する情報リスト ページを構築する必要があります。以下に示すように、HTML と CSS を使用してこのページを構築します。
<!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 ジャンプ
  1. 「詳細」ボタンをクリックして、製品の詳細情報ページにジャンプする必要があります。 PHP を使用してこの機能を実現できます。

まず、各「詳細」ボタンに URL パラメータを追加して、現在の製品の ID をマークします。例:

<a href="details.php?id=1">详细信息</a>
ログイン後にコピー

この例では、詳細ページの URL として「details.php」を使用し、製品 ID パラメーター「id=1」をページに渡します。

次に、詳細ページで PHP を使用してこのパラメーターを取得し、データベースから製品の詳細を取得する必要があります。まず、詳細ページに次のコードを追加して、URL パラメーターを取得する必要があります。

<?php
if (isset($_GET[&#39;id&#39;])) {
    $id = $_GET[&#39;id&#39;];
} else {
    header(&#39;Location: index.php&#39;);
    exit;
}
?>
ログイン後にコピー

このコードでは、isset() 関数を使用して、$_GET に "id" パラメーターが存在するかどうかを確認します。配列 (存在する場合) 値を取得し、それを $id 変数に割り当てます。それ以外の場合は、ユーザーを情報リスト ページにリダイレクトし、header() 関数を使用してジャンプを実装します。

次に、SQL クエリ ステートメントを使用して、データベースから製品の詳細情報を取得し、ページに表示する必要があります。これを実現するには、次のコードを使用します。

<?php
$db = mysqli_connect(&#39;localhost&#39;, &#39;username&#39;, &#39;password&#39;, &#39;database&#39;);

$query = "SELECT * FROM products WHERE id = $id";
$result = mysqli_query($db, $query);
if (mysqli_num_rows($result) == 0) {
    echo &#39;产品不存在&#39;;
    exit;
} else {
    $product = mysqli_fetch_assoc($result);
}
?>

<!DOCTYPE html>
<html>
<head>
    <title><?php echo $product[&#39;name&#39;]; ?></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[&#39;image&#39;]; ?>" alt="<?php echo $product[&#39;name&#39;]; ?>">
        <h2><?php echo $product[&#39;name&#39;]; ?></h2>
        <p><?php echo $product[&#39;description&#39;]; ?></p>
        <p>价格:<?php echo $product[&#39;price&#39;]; ?></p>
    </div>
</body>
</html>
ログイン後にコピー

このコードでは、まず mysqli_connect() 関数を使用して MySQL データベースに接続し、SELECT ステートメントを使用して ID に対応する製品データを取得します。データベースから。製品が存在しない場合は、echo ステートメントを使用して「製品が存在しません」と出力し、スクリプトを終了します。それ以外の場合は、製品データを $product 配列に保存し、HTML および PHP コードを使用してページに表示します。

3. まとめ

この記事では、PHPを使って情報一覧ページから詳細情報ページにジャンプする方法を紹介します。この機能を実現するには、データベースのクエリ文、HTML、CSS、PHPなど複数の知識を習得する必要があります。この記事が、PHP を使用して詳細ページに移動する方法をより深く理解するのに役立つことを願っています。

以上がPHPで詳細ページに飛ぶ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート