Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

ECサイトの設計書を理解しよう!
プログラミング未経験から始めるPHP入門~応用編(1)

第8回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/05/15 14:00

 今回から応用編として、ECサイトを作成していきます。本稿ではまず、アプリケーション作成に必要な設計書について説明します。なお、本連載では、PHPまたはプログラミング初心者の方を対象に、PHPを用いたWebアプリケーションの作成方法を説明していきます。

目次

はじめに

 本連載では、PHPまたはプログラム初心者の方を対象に、PHPを用いたWebアプリケーションの作成方法を説明していきます。今回からは応用編として、ECサイトを作成します。本稿ではまず、アプリケーション作成に必要な設計書について説明します。PHPの環境構築に関しては第2回を参照ください。

対象読者

  • プログラミングが初めてでこれから学習する予定の方
  • プログラミング経験はあるがPHPを初めて学習する方

これまでの連載

動作確認環境

 PHPが動作する環境が必要となります。以下に、今回のアプリケーション作成/動作確認に用いた環境を示します(インストールにあたっては最新安定版の使用を推奨します)。

 また、上記のサーバ環境を一括でインストールできるパッケージ「XAMPP」がありますので、こちらもご活用ください。インストール方法は第2回を参照ください。なお、本連載ではWindows版XAMPPをインストールした前提で、「Cドライブ」→「xampp」→「htdocs」がApacheの監視フォルダ(ドキュメントルート)であるものとして説明をします。本稿のサンプルソースは、「XAMPP」コントロールパネルより「Apache」および「MySQL」を開始したうえでご利用ください。

プロジェクト概要

 これまで7回にわたり、PHPを用いたWebアプリケーション作成に必要な下記の5つの基礎知識を説明してきました。

  • 変数
  • 条件分岐
  • 繰り返し
  • 入力フォームを使った送受信
  • PHPとデータベースの連携

 今回からは応用編として、これらの基礎知識を利用しながらECサイトを制作していきます。実際の制作に必要ないくつかの新たな命令も、必要に応じて随時紹介していきます。

 今回作成するサイト名は「楽器通販サイト oh yeah !!」としてみました。データベースから検索した商品情報を画面で閲覧し、最終的にショッピングカート内の商品を注文するサイトです。

まずはサンプルサイトを触ってイメージを固めよう

 それでは、実際にどのようなサイトを制作していくのか、先に完成形を見てみましょう。

 私のWebサイトにサンプルページを用意しておきました。まずは、http://nextia.jp/tmp/ec/item_list.php5をブラウザで開いてみてください。この画面が今から構築していくWebサイトのトップページとなります。

※注1

 Webサーバ環境の関係で、上記のサイトでは、すべてのファイル名の末尾(拡張子)が「php」ではなく「php5」となっていますが、実際にはすべて「php」で制作していくので、今の段階では特に気にする必要はありません。

今後作成していく楽器通販サイト「oh yeah !!」トップページ
楽器通販サイト「oh yeah !!」トップページ

 それでは、どれか1つ、商品をクリックしてください。

商品一覧の中から1つを選び、クリックして詳細を表示
商品一覧の中から1つを選び、クリックして詳細を表示します。

 商品の詳細情報が表示され、URLがitem_detail.php5に変わったはずです。

 次に個数を選択し、[カートに入れる]をクリックしましょう。URLがcart.php5に変わり、カートに商品が追加されたはずです。その後、左側の[商品一覧]メニューをクリックし別の商品をカートに追加してみてください。複数商品がカートに入るはずです。

続けて商品を選択して[カートに入れる]をクリックすると、複数商品が追加される
続けて商品を選択して[カートに入れる]をクリックすると、複数商品が追加されます。

 現時点ではログインをしていないため、注文確定はできません。

 ログインするために、左側のメニューより[会員登録]を選び、会員登録をしましょう。

※注2

 実在の個人情報ではなく、架空の情報を入力してください。また、エラーが表示された場合は、他の方とIDが重複している可能性があります。別のIDを入力し、再度試してみてください。

左側メニューより[会員登録]を選択し、架空の情報を入力
左側メニューより[会員登録]を選択し、架空の情報を入力します。

 会員登録完了時に、PHPプログラムではSQLのINSERT文を実行し、データベースの会員情報を保持するテーブルにレコードを追加しています。会員登録ができたら、会員登録時に入力したID、パスワードで、左側メニューよりログインしてください。

会員登録後、設定したIDとパスワードでログインしてみましょう。
会員登録後、設定したIDとパスワードでログインしてみましょう。

 ログイン後、左側メニューの[カートの中]をクリックしてください。カート画面に[注文確定]ボタンが現れたはずです。

ログイン後に[カートの中]をクリックすると、カート画面に[注文確定]ボタンが現れる
ログイン後に[カートの中]をクリックすると、カート画面に[注文確定]ボタンが現れます。

 これで、注文完了です。この時、PHPプログラムではINSERT文を実行することで、注文情報レコードをデータベースに追加しています。本来は注文履歴を閲覧できるサイト管理者向けの画面も制作する必要がありますが、今回の応用編では一般のお客様向けの画面のみを制作していきます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 大家 正登(オオイエ マサト)

    デジタルハリウッド『PHP 講座』講師。学生時代、スペイン語を専攻していたものの何故かプログラム言語に心が傾き、近所のフリープログラマーに弟子入り修行。その後中堅 SIer に 3 年間所属し、現在はフリーエンジニア。仕事の傍らジャズを演奏し、コントラバス 2 台と同居中。 (ITエンジニア・大家...

バックナンバー

連載:プログラミング未経験から始めるPHP入門

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5