ヘルニアクソ野郎エンジニアblog

~ヘルニアでHell near~

PHPとMySQLでECサイトをフルスクラッチ開発!⑩ECサイトのトップ画面作成

calendar

前回、商品管理ページの作成が終わりました。↓

 

今回より、いよいよ公開するECサイトの作成に入ります。

はじめに、これから作成するECサイトの完成形を載せておきます。↓

サイトは下記URLから飛べますので、是非ログインして架空の商品を購入したり、色々試してみて下さい。

これからまとめる内容を覚えれば、これらの事が可能になります。

フルスクラッチECサイトへ

それではまず、これから作成する公開サイトの構図から説明いたします。

 

スポンサーリンク

公開サイトの構図

全体像

ECサイト概要

おおまかに分けると、4つのブロックから成り立ちます。

1つは、「商品閲覧のページ」

2つ目は「会員登録・ログインページ」

3つ目は「商品をカートに入れるページ」

4つ目は「購入の手続きページ」になります。

図のように、ユーザーが商品を購入する流れとしては、

①サイトの商品を閲覧し、希望の商品を選択。

②カートに商品を入れる以降のページには、ログインしている事が条件なので、ログインしていなければ会員登録、ログインを促す。

③会員登録・ログインを実行。

④商品の購入手続き。購入決定後、内容をmailにてユーザーに通知。

ざくっとですが、このような流れの仕組みのECサイトを作ります。

作成ページの構成

ECサイトページ構成

図のような流れの公開画面を作成します。とりあえず今回は、トップページのshop_list.php、商品選択時の shop_product.phpの2ページを作成します。

ファイルの格納場所は、htdocsディレクトリ配下に新たにshopディレクトリを作成し、その中に格納していきます。

TOPページを作成すれば、前回までに登録した商品がズラリと表示されるので、少し感動すると思いますよ!

TOPページ 商品一覧画面

shop_list.php

shopディレクトリ内にshop_list.phpを作成します。

このページは、ECサイトのトップページにあたり、商品管理ページでデータベースに登録した商品の一覧を表示させています。

記述に関しては、今までの応用となりますので、抜粋して説明していきます。

先頭のsessionは、ログインしているかの確認をしています。

今回作成するサイトは、商品購入時のみログイン必須にしたいと思いますので、商品を閲覧するページはログイン無しでも見れるようにしています。したがって、このページでは特にログインを促すようにしていません。

データベースに接続後、SQLで商品管理テーブルmst_productからすべてのテーブルを選択しています。

その後はお馴染みのwhileとfetchで取り出したレコードの情報をどんどん表示させていきます。

商品をクリックした際に、その商品を選択したページへ飛ばしたいのでaタグでリンクを貼っています。商品の識別には商品codeが必要ですので、「GET」でコードの情報を載せています。リンクの?以降の部分ですね。

「カートを見る」と下部のカテゴリ別のリンク先は後ほど作成しますが、先にリンクだけ貼っています。

127.0.0.1/shop/shop_list.phpにアクセスするとこのような画面が出るはずです。↓

ECトップ
ECトップ2

※マークアップやcssを適用していないので少し味気ないですが、今回はphp/mysqlメインで進めたいので、スタイリングは割愛して進めます。スタイリングしたい場合は、print “<div class=….などをループに埋め込んでやれば簡単に可能です。

商品選択画面

shop_product.php

shopディレクトリにshop_product.phpを作成します。

このページでは、選択した商品のみが画面に表示されるようにしています。カートに入れる前の画面ですね。

商品の情報は、商品コードがURLに乗っているのでGETで受け取ります。

そのコードをもとに、データベースから情報を引き出し、画面に表示させます。

このページで「カートに入れる」リンクを貼っているので、カートに入れる際はそのページへ商品コードの情報を渡す必要があるため、GETで値を送るようにしておきます。

商品選択画面

次回は、会員登録画面、ログイン画面を作成したいと思います。