KYO

PHPとAjaxとBootstrap4で作るストレスレスなECサイトの作成(ソースコードあり)

2018年7月10日 PHP , , ,

PHPとjQueryのAjaxとBootstrap4を使ってストレスレスなECサイトを勉強がてら作ってみました。今回はそのソースコードを全公開します。そしてちょとした解説も行います。
今回作るECサイトは、ショッピングカート機能と注文画面、そして管理画面の作成まで行なっています。

Bootstrap4のモーダルとAjaxを利用することで、ストレスのないオシャレな作りになっています。jQueryを利用することで、恐ろしいほどに画面遷移のストレスを減らします。

なぜ作ったか?

プログラミングスクールでECサイトを最終的に作り上げるまでやります!ということを言っていたので、とりあえずその辺まで作れるかな?と思いやってみた。
Ajaxは参考にしたサイトが古い情報だったので、書き方が古いですが新しい書き方に変えるのはそれほど大変ではありません。

 

ECサイトを作る

ソースコードはGitHubにあります

トップページでは商品情報と、カートの操作など、必要なものが全て揃っています。カートに入れるボタンを押すと、画面上部のショッピングカートアイコンの横の金額が変化します。

この処理ですがコメントにある通りの処理を行なっています。
ajaxの処理の書き方が古いようです。今時はthenで書くのが主流らしいです。
処理に成功した場合は、reflesh_cartメソッドが呼び出されるので、これによってヘッダーの値段表示が変化しています。

cart.phpにはdata:{id:id, name:name, price:price, num:num,action:action}の情報が送られるので、cart.phpでそれらを処理しているのです。

全文載せていますが、送られてきた情報を元にセッションの情報を更新しています。
これでセッションの状態が変化するのですが、クライアント側はこの処理が目に見えていません。カートに入れるボタンを押すだけで、ここまでの処理が流れます。

ショッピングカートアイコンをクリックするとモーダルが表示されます。
モーダルはBootstrapを利用することで完全に表現することができますので、非常に便利です。ここにカートを空にするボタンや、注文画面へのボタンを表示しています
モーダルの内容は別ファイルにしています。

注文確認画面

注文確認画面ではjQueryによるバリデーションを行なっています。

フォーカスが外れた時にその値を検査してします。
これもストレスのないサイト作りに役立っています。フォームからPOST送信を行なってPHP側でバリデーションチェックを行い結果を返却するという流れでは、ページの読み込みが行われてしまいますが、jQueryを使えばそういった時間をカットしリアルタイムでバリデーションチェックを行うことができます。

管理画面

管理画面もストレスなく利用できる仕組みを施しました。
一度のページ読み込みで、商品の追加も編集も削除も行うことができます。

特に手をかけたのが商品編集機能です。

編集ボタンを押すと、その場でinput要素が表示されて編集できるようになっています。

編集アイコンをクリックして不要な要素を隠し、必要な要素を表示させています。
編集アイコンをクリックすると、セーブアイコンが表示させるのもこの仕組みです。

最終的にセーブボタンを押すと、簡単なチェックを行いajaxの機能を使ってphpファイルと連携しています。最後にリロード処理を行えば画面に編集結果が反映されているということです。

終わり

簡単ではありますが解説を入れました。
詳しくはソースコードを見てみてください!
jQueryとAjaxとPHPが手を組むとすごい!というのが感想です(笑)


関連記事

PHPでシンプルな掲示板を作るチュートリアル

2018年5月29日

全体のソースコードgithub     今回はPHPの勉強がてらシンプルな掲示板を作っていきます。 本当にシンプルで新規スレッド作成と、コメントができるというだけの掲示板です。   ちょっと長いです     フレームワークはbootstrap4を使います データベースはmysqlを使います...

デザインパターン-PHPでTemplateMethodの入門

2018年6月12日

デザインパターンとはオブジェクト指向を理解するために最高の設計方法です。 オブジェクト指向を知っているからデザインパターンが使えるのではなく、オブジェクト指向を理解するためにデザインパターンを勉強するという意見もあります。   今回は中でも使用頻度の高いTemplateMethodを実装していきます。    ...