【完成】ポートフォリオ用ショッピングサイトの制作
前回、新たなポートフォリオを作成しているとの日記を書きましたが、随分日が経ってしまいました。
しかし、ようやく簡易ショッピングサイトが正式に完成し、サーバーにUP出来ましたので報告致します。
今回ショッピングサイトを作るきっかけでもあり、多くの内容を参考にさせて頂いたのが、谷藤賢一氏著書の『気づけばプロ並み PHP ショッピングカート作りにチャレンジ！』という書籍です。
生のPHPを用いて、
- データベースを用いて、管理者ログイン及び商品の登録や変更、削除の実施。
- 一般ユーザーとして商品の選択、カートへの追加、数量の決定や削除。
- 入力フォーム、そしてメール送信。
これら一連の処理を一通り作成してシミュレーションを行える本で、自分も何回か通しでコードを完成させました。
ですが、現在ではセキュリティ関連の処理が古いのと、cssとの連携の概念は無かったので、前々からこの書籍を参考にデザインやセキュリティ向上も含めた本格的なショッピングサイトを制作したいと思い、今日まで頑張ってきました。下記サイトが完成品です。
このサイトの構成ですが、下記となります。
- フレームワークを用いず、生のPHPで作成。
- デザインレイアウトについてはBootstrap4は使わず、CSSのGrid Layout（grid-template等）にてレスポンシブを作成。
- デザインカンプはFigmaを用い、全て私オリジナルで考案、制作。
- データベースはMysql。
- 開発環境はVagrantによるCentOS7で実施。
- アニメーション等はjQueryを使わず、生のJavascriptを使用。
PHPの大半の部分は上記の書籍を参考にさせて頂きましたが、CSSとの連携やpassword_hashによるパスワード管理、カート内商品の個数をセレクトボックスによって管理、入力フォームのバリデーション処理等は全てオリジナルです。出来上がってしまうと「意外と単純だな」と思いますが、上手く動作させるまでが非常に大変でした。いかにAmazonや楽天等のサイトが恐ろしい事をやっているのか、その片鱗を垣間見えただけでも大きな収穫だったと思います。
また、Bootstrap4を使わなかった理由については、どうしても自由なデザインがしづらかった事ですね。初の本格的なGrid Layoutへの挑戦でしたが、慣れるとそれ程苦も無く組み立てられます。flex boxやfloatとの共存も比較的容易に出来るので、Grid Layoutの可能性を見出だせたかなと。Bootstrapの便利さは実感していますが...。
会員登録機能等、まだ搭載していないものがあるにはありますが、まずは一般ユーザーとして商品の閲覧にカートへの投入、購入手続き等を疑似体験して頂ければ幸いです。
【トップページ】
【管理者画面】
【商品修正画面（スマホ）】
