PHPで簡単ショッピングカート！【1.トップページと商品一覧】

前回の記事でデータベースを使わず簡単な
ショッピングカートを作りました。

これまでデータベースを使ったショッピングカートが
当たり前で他に選択肢がないかの様に記事を書いてきましたが・・・。

PHPでショッピングカートを作りたいと思っている方にとって
いきなりデータベースを使って作るのは
やっぱり、ちょっと、ハードルが高いのではないかと、今更ですが・・・。

そりゃそうだろう、いきなりデータベースは難しいぞ。
と思う方もいらっしゃるでしょうしね。
私もそう思います。

ははは、ちょっと言い訳してみると
私が初めて学び作ったショッピングカートは
データベースを使ったものだったのでした。

データベースを触ったことがあったので、全然抵抗なく
それが当然かのように勘違いしていたのかも・・・。

前回の最後にも書きましたが、初めからデータベースを
使わないショッピングカートを作ろうと思っている方に
前回の記事だけで作ろうとしても・・・どうなんでしょうね。

一応今までの記事を紹介しています。

なので結果、あっち読んでこっち読んでして、
さらにその記事ではデータベースを扱っているので
混乱を招くというかわからなくなるかもしれません・・・。

ということで、前回の記事の完成版をベースにして
データベースを使わないショッピングカートを
再度、作っていきましょう。

ちょっと前置きが長すぎましたが・・・。

今回は、トップページと商品一覧、商品詳細ページを
作っていきます。
それもHTMLとCSSのみです。

ごめんなさい、カートは次回からです。

ECサイトトップページと商品一覧ページ

まず初めに、ショッピングカートだけを作っても
その使い方がわからなくなることもあるので、
ショッピングカートを導入するECサイトのイメージが
わかるような簡単なものを作ってみます。

ECサイトの構成としては、
トップページ[index.html] ＞商品一覧
＞商品詳細ページ＞ショッピングカート
という流れになります。

今回は、商品一覧からではなく商品詳細ページから
ショッピングカートに入れることにします。

では、トップページ、とても簡単なものを作ります。
今回はCSSを別のファイルにします。

ショップ名を「さかなショップ」とし、
商品一覧とトップページ以外のリンクはダミーです。

トップページのHTMLとCSS

ファイル名：index.html

＜記述例＞

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="fshopstyle.css">
    <title>さかなショップトップページ</title>
  </head>
  <body>
    <header>
      <h1>さかなショップ</h1>
    <nav>
      <ul>
        <li><a href="index.html">トップページ</a></li>
        <li><a href="items/item_list.html">商品一覧</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
    </header>
    <main>
      <section>
        <h3>商品のご案内</h3>
        <p>上部メニューの商品一覧または以下のボタンをクリックすると商品の一覧を見ることができます。</p>
        <p><button type="button" onclick="location.href='items/item_list.html'">商品一覧へ</button></p>
      </section>
      <br><br><br><br><br><br>
    </main>
    <footer>
      <ul>
        <li><a href="#">利用規約</a></li>
        <li><a href="#">特定商取引法</a></li>
        <li><a href="#">プライバシーポリシー</a></li>
      </ul>
      <p>Copyright 2020 Fish Shop</p>
    </footer>
  </body>
</html>

ファイル名：fshopstyle.css

/*   fshopstyle.css   */

body{
  background: azure;
}
nav ul,footer ul{
  text-align: center;
  margin: 0 auto;
  padding: 10px;
  width: 90%;
}
nav ul li,footer ul li{
  display: inline-block;
  width: 30%;
  background: lightblue;
  padding: 6px 0;
}
nav ul li a,footer ul li a{
  text-decoration: none;
  text-align: center;
  display: block;
}
h1{
  text-align: center;
}
main {
  background: honeydew;
  width: 80%;
  margin: 20px auto;
  padding: 10px;
}
footer p{
  text-align: center;
}
ul.itemlist{
  margin: 10px;
  padding: 10px;
  list-style: none;
}
ul.itemlist li{
  line-height: 30px;
  width: 300px;
}
ul.itemlist li:nth-child(even) {
  background: honeydew;
}
ul.itemlist li:nth-child(odd) {
  background: lightgreen;
}

＜表示例＞

ここでは、ul li を使って列記しています。

商品一覧ページ

ファイル名：item_list.html

＜記述例＞

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../fshopstyle.css">
    <title>さかなショップ商品一覧</title>
  </head>
  <body>
    <header>
      <h1>さかなショップ</h1>
    <nav>
      <ul>
        <li><a href="../index.html">トップページ</a></li>
        <li><a href="item_list.html">商品一覧</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
    </header>
    <main>
      <section>
<h3>商品一覧</h3>
商品を選択して商品詳細ページをご覧ください。<br>
<ul class="itemlist">
  <li><a href="item01.html">01.マアジ</a></li>
  <li><a href="item02.html">02.ブリ</a></li>
  <li><a href="item03.html">03.ヒラメ</a></li>
  <li><a href="item04.html">04.カサゴ</a></li>
  <li><a href="item05.html">05.カツオ</a></li>
  <li><a href="item06.html">06.クロマグロ</a></li>
  <li><a href="item07.html">07.マサバ</a></li>
  <li><a href="item08.html">08.サケ</a></li>
  <li><a href="item09.html">09.サンマ</a></li>
  <li><a href="item10.html">10.マダイ</a></li>
</ul>
      </section>
    </main>
    <footer>
      <ul>
        <li><a href="#">利用規約</a></li>
        <li><a href="#">特定商取引法</a></li>
        <li><a href="#">プライバシーポリシー</a></li>
      </ul>
      <p>Copyright 2020 Fish Shop</p>
    </footer>
  </body>
</html>

＜表示例＞

ここでも ul li を使って商品の一覧を表示し、
各商品詳細ページヘのリンクを張っています。

商品詳細ページ

ここでは、10商品全部を載せると多くなるので
商品ID：1、商品名：マアジの記述例を載せます。

ファイル名：item01.html

＜記述例＞

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../fshopstyle.css">
    <title>さかなショップ商品詳細ページ</title>
  </head>
  <body>
    <header>
      <h1>さかなショップ</h1>
    <nav>
      <ul>
        <li><a href="../index.html">トップページ</a></li>
        <li><a href="item_list.html">商品一覧</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
    </header>
    <main>
      <section>
<h3>商品詳細ページ</h3>
数量を入力しカートに入れるボタンをクリックするとショッピングカートに入ります。<br>
<form method="post" action="../cart/item_cart.php">
  <ul class="itemlist">
    <li><img src="img/item01.jpg"></li>
    <li>商品ID：01<input type="hidden" name="id" value="1"></li>
    <li>商品名：マアジ<input type="hidden" name="name" value="マアジ"></li>
    <li>商品価格：500 円<input type="hidden" name="price" value="500"></li>
    <li>数量：<input type="text" name="num" value="1" style="width:30px;"></li>
    <li><input type="submit" value="カートに入れる"></li>
  </ul>
</form>
      </section>
    </main>
    <footer>
      <ul>
        <li><a href="#">利用規約</a></li>
        <li><a href="#">特定商取引法</a></li>
        <li><a href="#">プライバシーポリシー</a></li>
      </ul>
      <p>Copyright 2020 Fish Shop</p>
    </footer>
  </body>
</html>

＜表示例＞