Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

GlassFishからアプローチするJava~入門編~
第5回「Webアプリケーションの作成 MySQL Workbenchを使う」

買い物かごへの追加機能の実装

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

ダウンロード サンプルコード (13.0 KB)

 第4回では芋焼酎のカタログ表示まで実装しました。今回はカタログを少し改良して、明細を選択し[買い物かごに追加]ボタンを押せるようにします。選択された銘柄は買い物かごに追加されます。Ajaxは使わずに第2回のServletと第3回のJSPの知識だけで実装します。また、前回までほとんど説明できなかったMySQL Workbenchについても少し触れます。

目次

はじめに

 この連載では、「GlassFish」という製品を利用して、Java言語に親しんでもらうことを目的としています。今回と次回で、これまで作成してきた芋焼酎酒店のサンプルWebアプリケーションに買い物かご機能を実装していきます。

対象読者

  • Javaでなにかしらのアプリケーションを作成したことのある方
  • Javaの変数の宣言や、if文・for文・while文の制御文など簡単な文法を知っており、アプリケーションを作成したことのある方

 オブジェクト指向プログラミングができなくとも構いません。徐々に学んでいければと考えています。また、学びやすいWebアプリケーションをサンプルとするので、Webアプリケーションとは違った分野を勉強したい方には当連載は向いていません。

本稿で想定する主要技術のバージョン

 Java EE 5を使用するため、主な技術要素のバージョンは以下の通りです。EJBに関しては応用編で扱う予定です。

  • Servlet:2.5
  • JSP:2.1
  • JSTL:1.2
  • JTA:1.1
  • EJB:3.0(応用編)

芋焼酎酒店に買い物かごを追加

 前回は芋焼酎の銘柄のカタログを表示できるよう実装しました。今回と次回は、ネットショップになくてはならない買い物かごを実装します。

 具体的には、カタログから芋焼酎の銘柄を選択し[買い物かごに追加]ボタンをクリックすると買い物かごに追加され、買い物かごの芋焼酎の銘柄を選択し[削除する]ボタンをクリックすると買い物かごから削除されるようにします。また、買い物かごの本数欄で本数を増減できるようにします。本数に0を入力し[買い物かごを再表示する]ボタンを押すと買い物かごからその銘柄がなくなるようにします。

 第7回で認証機能を説明しますが、今回と次回は普通のネットショップのようにブラウザを閉じても、買い物かごには銘柄は保存されません。第7回、その機能を実装します。

 整理すると今回と第6回で実装する仕様は以下の通りです。

  1. カタログの芋焼酎の銘柄を選択し[買い物かごに追加]ボタンをクリックすると、買い物かごに芋焼酎の銘柄が追加される。追加した場合の本数の初期値は1本とする。ただし、既に買い物かごに存在する場合は、本数は増加させない。
  2. 本数を増減させたい場合、直接、本数のテキストフィールドに本数を入力する。本数が0本になった場合、買い物かごから削除する。[買い物かごを再表示する]をクリックすると0本にした銘柄が買い物かごからなくなっている
  3. 買い物かごの銘柄の明細には単価、本数、金額(単価と本数をかけたもの)が表示される
  4. 買い物かごには明細の金額の合計と送料、合計と送料を足した総合計が表示される
  5. [レジへ進む]ボタンをクリックすると買い物かごは空になる

 今回は1の追加機能のみの紹介となります。買い物かごを実装するには、その情報を格納するテーブルを作成できる能力が求められるため、MySQL Workbenchの紹介もします。これだけでもページ数が多くなることから、削除・更新機能、送料・合計金額機能は第6回で説明します。

実装方針

 上記仕様を満たすためには以下のことを決定する必要があります。

  • 買い物かごに何を表示するか
  • 買い物かごをどのように見せるか

買い物かごに何を表示するか

 買い物かごには「銘柄名」「単価」「本数」「金額」を1明細としたテーブル形式で表示し、テーブルの下には「合計」「送料」「総合計」を表示します。

 「銘柄名」と「単価」はカタログから取得し表示し、「本数」はテーブルに保存した値を表示します。本数を変更した場合はその値を表示します。

 「金額」は単価と本数をかけた値を表示し、「合計」は銘柄の「金額」をすべて足した値を表示します。「送料」は一律、1,500を表示し、「総合計」は「合計」と「送料」を足した値を表示します。

買い物かごをどのように見せるか

 一般的なネットショップではカタログまでは認証を経ずに見せます。購入したくなった時点で[ログイン]ボタンをクリックし、買い物かごを表示しているようです。今回は難しいことは行わず、デフォルトでユーザidを「tomoharu」に固定します。次回、認証機能を設けることにより、ユーザごとに買い物かごが用意されるように改良します。また、見せ方も至ってシンプルにカタログの下に買い物かごを置くことにします。実際のネットショップでは膨大なカタログがあり、このような見せ方は非常に操作性が悪くなりますが、1つの画面で操作内容が即座に分かるようにするのがその理由です。


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

著者プロフィール

  • 川久保 智晴(カワクボ トモハル)

    haruプログラミング教室(https://haru-idea.jp/)主宰。 COBOL、FORTRANで13年、Javaを中心としたWeb開発で11年。3つしか言語知らないのかというとそうでもなく、sed/awk、Perl、Python, PHP,  C#, JavaScript...

バックナンバー

連載:GlassFishからアプローチするJava
All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5