授業第11回 jQuery Mobileショッピングサイト
1、ショッピングサイトを作る準備
前期mobile webの時間に作成した、jQueryと、JSPを連携させたアプリケーションを、
jQuery mobileにしたのが、これです。
使用しているテーブルは同じで、
「ログイン」＞「商品の選択」＞「確認」＞「注文」
の流れも同じです。
もう一度、/2011/jqueryLect3.html を見直し、
このページのようなショッピングアプリケーションをjQuery mobileで作ってみましょう。
サンプル（JSPの部分だけを単純化して、シンプルにしたもの。全然見当もつかない人は、以下のサンプルをまず作り、
それから、jQuery mobileのアプリケーションとして、作り直す。
１、商品一覧表示(cart.jsp)
<%@ page contentType="text/html; charset=UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<fmt:requestEncoding value="UTF-8"/>
<fmt:setLocale value="ja_JP" />
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Shop JSPのみの版</title>
<meta charset="utf-8" />
</head>
<body>
<sql:setDataSource dataSource="jdbc/hanrin"/>
<sql:query sql="select id from jq_items;" var="rc" />
<!-- 商品一覧を表示．購入情報を、次のJSPに送信するフォーム -->
<form action="confirm.jsp" method="post">
<fieldset>
<legend>注文フォーム</legend>
<table border="1">
<tr>
<td>画像</td>
<td>商品ID</td>
<td>商品名</td>
<td>価格</td>
<td>在庫数</td>
<td>注文個数</td>
</tr>
<c:forEach items="${rs.rows}" var="i">
<tr>
<td><img src="/hanrin/jQueryMobile/img/${i.img}" alt="img" width="100" height="100"/></td>
<td>${i.id}</td>
<td>${i.name}</td>
<td>${i.price}</td>
<td>${i.stock}</td>
<td><input type="text" name="quantity" size="2" value="0" />
<!-- 隠しタグ -->
<input type="hidden" name="iid" value="${i.id}" />
<input type="hidden" name="name" value="${i.name}" />
<input type="hidden" name="price" value="${i.price}" />
<input type="hidden" name="stock" value="${i.stock}" /></td>
</tr>
</c:forEach>
</table>
<input type="submit" value="カートに追加する" />
</fieldset>
</form>
</body>
</html>
２、送信内容の確認(confirm.jsp)
<%@ page contentType="text/html; charset=UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<fmt:requestEncoding value="UTF-8"/>
<fmt:setLocale value="ja_JP" />
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>確認フォーム</title>
<meta charset="utf-8" />
</head>
<body>
<!-- ユーザーIDを仮にセット（本当はパラメーターでセット) -->
<c:set var="userid" value="c01" />
<!-- 商品の配列を取得 -->
<c:set var="itemid" value="${paramValues.iid}" />
<c:set var="itemname" value="${paramValues.name}" />
<c:set var="itemprice" value="${paramValues.price}" />
<c:set var="itemquantity" value="${paramValues.quantity}" />
<!-- 「注文を確定する」が押されたら、データベースに書き込む -->
<form action="fix.jsp" method="post">
<fieldset>
<legend>注文確認</legend>
<table border="1">
<tr>
<td>商品ID</td>
<td>商品名</td>
<td>価格</td>
<td>注文個数</td>
</tr>
<c:forEach items="${itemid}" var="i" varStatus="x">
<fmt:parseNumber var="qt" value="${itemquantity[x.index]}" />
<fmt:parseNumber var="pr" value="${itemprice[x.index]}" />
<c:if test="${qt > 0}">
<tr>
<td>${i}<input type="hidden" name="iid" value="${i}" /></td>
<td>${itemname[x.index]}<input type="hidden" name="name" value="${itemname[x.index]}" /></td>
<td>${itemprice[x.index]}<input type="hidden" name="price" value="${itemprice[x.index]}" /></td>
<td>${itemquantity[x.index]}<input type="hidden" name="quantity" value="${itemquantity[x.index]}" /></td>
</tr>
</c:if>
</c:forEach>
<input type="hidden" name="uid" value="${userid}" />
</table>
<a href="cart.jsp"><input type="button" value="戻る" /></a>
<input type="submit" value="注文を確定する" />
</fieldset>
</form>
</body>
</html>
３、データベースへの書き込み(fix.jsp)
<%@ page contentType="text/html; charset=UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<fmt:requestEncoding value="UTF-8"/>
<fmt:setLocale value="ja_JP" />
<sql:setDataSource dataSource="jdbc/hanrin" />
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DB書き込み</title>
<meta charset="utf-8" />
</head>
<body>
<c:set var="pm1" value="${paramValues.iid}" />
<c:set var="pm2" value="${paramValues.quantity}" />
<c:set var="pm" value="${param.uid}" />
<sql:transaction isolation="serializable">
<c:forEach items="${pm1}" var="i" varStatus="x">
<fmt:parseNumber var="qt" value="${pm2[x.index]}" />
<c:if test="${qt > 0}">
<sql:update sql="insert into jq_orders(cid,iid,quantity) values(?,?,?);">
<sql:param value="${pm}" />
<sql:param value="${i}" />
<sql:param value="${qt}" />
</sql:update>
<sql:update sql="update jq_items set stock = stock - ? where id = ?">
<sql:param value="${qt}" />
<sql:param value="${i}" />
</sql:update>
</c:if>
</c:forEach>
</sql:transaction>
注文を確定しました
<a href="cart.jsp"><input type="button" value="戻る" /></a>
</body>
</html>
問題１
上のようなショッピングサイトアプリケーションを、
作りなさい。必ず、jQuery mobileを使う事。上のサンプルを元に、jQuery mobileでアプリケーションを作り直すのが問題なので、これをやっていない人には、点は与えません。
入力される値のチェック（空白を許可しない、在庫以上の数字は入力しない、数字以外は許可しない、など）の処理は全部作ってください。(JSP側で確認するのでも、jQueryを使って確認するのでも、どちらも可）
または、在庫数を元に、<select>タグで、在庫以上の数は選べないようにする、でもよろしい。
データベースに、おかしなデータ（例えば、数字なのに文字列が入っている、０個の注文など）が入ると、データベースの信頼性が無くなります。
問題２
売れ筋商品（売り上げ金額合計が多い商品）の横に「売れています」という文字を表示しなさい。
出来る人は、ページング、ログイン認証を作ってください。
（これはJSPとセッションを使わないと無理でしょう）
ショッピングカート専用のDBを作り、確認画面で数量を変更したり、
注文を取り消したり出来るようにしなさい。（JSP、jQueryのどちらでも可）
（後からlocalStorageを勉強しますが、これを利用するのも可）
また、「商品ごとの売り上げ金額の合計」のグラフをSVGまたはcanvasを使って、表示するページを作りなさい。
これら問題は、多くの要素を含んでいるので、自分の出来る範囲で作る事。
難しいと感じる人は、出来るところまでで良いので（商品の一覧ページしか出来ないひとは、それでもよい）がんばって作る事。
この問題を完璧に作った人には、100点あげます。
（くれぐれも、他人の作品をコピーしたりしないように。コピーしたひとは大きな減点になります。出来ないなりに自分で作る事こそが大事で、自分でアプリケーションをどのように作ったか、説明出来ないようなアプリケーションは、作ること自体が無意味です。そこを良く理解してください。）