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

~ヘルニアでHell near~

PHPとMySQLでECサイトをフルスクラッチ開発!⑮カテゴリ別ページの作成、html/cssでスタイリングしてECサイトの完成!

calendar

前回、ECサイトの商品購入決定画面を作成しました。↓

 

今回は、カテゴリ別ページの作成、html/cssでスタイリングしてECサイトを完成させたいと思います。

ECサイトカテゴリ表

星マークはすでに作成済みのページになります。雲マークの商品カテゴリページを、今回作成します。

今商品のカテゴリは5つとしているので、5つのファイルを作成します。

内容的にはデータベースのSELECTする部分が変わるだけですので、1つのカテゴリを抜粋して説明しようかと思います。

スポンサーリンク

商品カテゴリ別ページ

shop_list_book.php

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

このページは、カテゴリ別の商品(上記では書籍)が一覧表示されるページになります。

もう説明するまでもありませんね、至って簡単なページです。

ただ単に、商品テーブルからカテゴリ”書籍”を選択してループで表示させているだけです。

カテゴリ書籍一覧

1つ作成できれば、残りの4つはコピーしてSELECTの「カテゴリー」部分だけ変更すればOKです。

スタイリングはまだしてませんので少し殺風景ですが、一応これでスタッフ、商品管理とECサイトの完成です。

15回に分けて「ECサイトのスクラッチ開発」をまとめて参りましたが、少しでも参考になれば幸いでございます。

一応ここまで作成してきたページをまとめまてDLできますので、興味ある方は自由に利用してください。↓

解凍後、htdocs配下に展開していただければOKです。

HTML/CSSでスタイリング

shop_list.php

最後に、ここから先は特に説明する事はありませんが、例としてhtml/cssの追加でスタイリングしたものを載せておきます。

抜粋して、トップページの記述になります。↓

htmlでマークアップして、cssでスタイルを付けていくだけです。javascriptも埋め込めば利便性が向上します。

div要素などをループ内で埋め込んでいけば、商品がリストカードのように表示されますね。トップ画面はこんな感じになります。↓

topページ

今回のサイトではやっていませんが、requireで各パーツ(header,main.side,footer)を分けて管理し、インクルードすれば、管理もしやすいし記述もすっきりすると思います。

完成したサイトは下記リンクにて公開していますので、是非ご覧ください。↓

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

スタイリング済のファイルは下記よりDL出来ます。

ファイルをDL

 

htdocs配下に全て展開すればOKです。

長くなりましたが、15回にわたり、ECサイトのフルスクラッチ開発をまとめました。

基礎的な内容ばかりではあると思いますが、私のような初心者にはちょうど良い内容だと思いますので、是非参考にして下さい!

ECサイトの作成は今回で完成しましたが、次回、WEBサーバーにアップロードし、公開するまでの手順をまとめて、終了とさせていただきます。