| ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 2008年04月06日 楽しいJava講座 - 初心者から達人へのパスポート vol.098 セルゲイ・ランダウ バックナンバー： http://www.flsi.co.jp/Java_text/ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ [このメールマガジンは、画面を最大化して見てください。] ======================================================== ◆ ０１．Tomcatのアプリケーション開発 ======================================================== では、続いてユーザー登録のWebページを作りましょう。 ユーザー登録のWebページは、インターネット・ショッピングの顧客 （= 購入者 = 当Webアプリケーションのユーザー）の住所・氏名と ユーザーIDをデータベースに登録します。 なお、後で問題が起きないようにするために、登録の前にユーザーに 規約を読んでもらって同意してもらうようにします。 というわけで、下記のようなuserReg.jspファイルをitemSelect.html と同じ場所に作成してください。 -------------------------------------------------------- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="Shift_JIS" %> <HTML> <HEAD> <TITLE>ユーザー登録</TITLE> </HEAD> <BODY bgcolor="#77ffff" text="#fa5a00"> <%@ include file="userRegBody.jsp" %> -------------------------------------------------------- ここで、 <%@ include file="ファイルのURL" %> という新しいコードが出てきましたが、これは別のファイルの内容をこのファイル の中に取り込むためのJSPのコードです。 では、userRegBody.jspファイルのほうは、下記のように作成してください。 （いつものようにitemSelect.htmlと同じ場所に作成してください。） -------------------------------------------------------- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="Shift_JIS" %> <H1>ユーザー登録</H1> <FORM action="servlet/userreg" method="POST"> 当店でご注文いただくためには、ユーザー登録していただく必要があります。 <BR> ユーザー登録するためには、下記にお客様の情報を入力し、INTSHOPユーザー規約に同意の上 <BR> 「規約に同意しユーザー登録をする」ボタンをクリックしてください。 <BR> <BR> <TABLE border="1" width="100%"> <TR> <TH WIDTH="20%">ユーザID（必須）：</TH> <TD><INPUT TYPE="text" NAME="userId" VALUE="" SIZE=10 MAXLENGTH=5></TD> </TR> <TR> <TH>パスワード（必須）：</TH> <TD><INPUT TYPE="password" NAME="password" VALUE="" SIZE=10></TD> </TR> <TR> <TH>氏名（必須）：</TH> <TD><INPUT TYPE="text" NAME="name" VALUE="" SIZE=20></TD> </TR> <TR> <TH>郵便番号（必須）：</TH> <TD><INPUT TYPE="text" NAME="zipCode" VALUE="" SIZE=10></TD> </TR> <TR> <TH>住所（必須）：</TH> <TD><INPUT TYPE="text" NAME="address" VALUE="" SIZE=100></TD> </TR> </TABLE> <BR> <BR> <DIV ALIGN="center"> <TEXTAREA rows=15 cols=100> ■INTSHOPユーザー規約■ 第１条（なんとかかんとか） ほにゃらら。 第２条（なんとかかんとか２） ほにゃらら２。 ＜＜以下省略＞＞ </TEXTAREA> <BR> <BR> <INPUT TYPE="submit" NAME="register" VALUE="規約に同意しユーザー登録をする"> </DIV> </FORM> </BODY> </HTML> -------------------------------------------------------- ここで新たにDIVというタグとTEXTAREAというタグが登場しました。 TEXTAREAというのは、複数行のデータを表示したり入力したりするためのタグで、 Webブラウザー上では、スクロール・バー付きの矩形（四角形）として表示されます。 そして、その矩形の高さはrowsという属性によって行数で指定し、幅はcolsという 属性によって桁数(文字数)で指定します。 DIVというタグは、<DIV>と</DIV>で囲まれた範囲に対して位置揃えを指定するため のものです。ALIGN属性によって、中央揃え（center）か右揃え（right）かまたは 左揃え（left）を指定することができます。ここではcenterを指定しています。 では、続いてサーブレットを作成しましょう。 下記のようなUserRegServletを作成して下さい。 -------------------------------------------------------- package jp.co.flsi.lecture.webapp.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import jp.co.flsi.lecture.webapp.db.CustomerDbManager; import jp.co.flsi.lecture.webapp.entity.Customer; import jp.co.flsi.lecture.webapp.entity.Order; public class UserRegServlet extends HttpServlet { public void doPost(HttpServletRequest req, HttpServletResponse res) throws IOException, ServletException { req.setCharacterEncoding("Shift_JIS"); HttpSession session = req.getSession(); String customerNum = req.getParameter("userId"); String customerName = req.getParameter("name"); String customerZipCode = req.getParameter("zipCode"); String customerAddress = req.getParameter("address"); if (customerNum == null || customerName == null || customerZipCode == null || customerAddress == null) { getServletContext().getRequestDispatcher("/wrongUserInfo.jsp").forward(req,res); } else { Customer customer = new Customer(); customer.setNum(customerNum); customer.setName(customerName); customer.setZipCode(customerZipCode); customer.setAddress(customerAddress); session.setAttribute("CUSTOMER",customer); CustomerDbManager customerDb = new CustomerDbManager(); customerDb.selectData(customerNum); if (customerDb.getCustomerList().size() > 0) { getServletContext().getRequestDispatcher("/userReg2.jsp").forward(req,res); } else { customerDb.insertData(customer); getServletContext().getRequestDispatcher("/userInfo.jsp").forward(req,res); } } } public void doGet(HttpServletRequest req, HttpServletResponse res) throws IOException, ServletException { getServletContext().getRequestDispatcher("/bookmarkinvalid.html").forward(req,res); } } -------------------------------------------------------- このサーブレットでは、まず、Webページ（userreg.html）でちゃんとデータが 入力されていたかどうかを確認し、入力されていないものがあった場合には、 その旨を伝えて入力し直しを要求するためのWebページ（wrongUserInfo.jsp） を返します。 （なお、この手のチェックは、いちいちサーブレットが行うまでもありません。 通常のWebアプリケーションでは、WebページにJavaScriptのコードを組み込む ことによって、Webブラウザー側でチェックし、入力されていないデータが あればその場で入力を要求します。 このJavaScriptを使った方法については別の機会に説明致します。 今回は、とりあえずサーブレット側に簡単なコードを組んでおくだけで 済ませておきます。） すべてちゃんと入力されていた場合は、入力されたユーザーIDが既に使用済み でないかどうかを確認し、もし、入力済みだった場合は、userReg2.jspという Webページを返して、既にユーザーIDが入力済みである旨を伝えるとともに ユーザーIDの入力し直しを要求します。 入力されたユーザーIDが未使用のものであれば、これらの情報を使って CUSTOMERテーブルに顧客のデータを追加したあと、userInfo.jspの Webページを返します。 userInfo.jspでは、ユーザー登録が完了したことを示したあと、 ショッピングを続ける（商品の検索のページに進む）か注文操作に 進めるかを聞きます。 以上をふまえてUserRegServletのソース・コードを確認してください。 では、web.xmlにこのサーブレットを登録しましょう。 下記のようにweb.xmlを編集してください。 -------------------------------------------------------- <?xml version="1.0" encoding="ISO-8859-1"?> <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> <servlet> <servlet-name>TestServlet</servlet-name> <servlet-class>jp.flsi.lecture.servlet.TestServlet</servlet-class> </servlet> <servlet> <servlet-name>TestServlet2</servlet-name> <servlet-class>jp.flsi.lecture.servlet.TestServlet2</servlet-class> </servlet> <servlet> <servlet-name>AgeCalcServlet</servlet-name> <servlet-class>jp.co.flsi.lecture.webapp.servlet.AgeCalcServlet</servlet-class> </servlet> <servlet> <servlet-name>CustomerServlet</servlet-name> <servlet-class>jp.co.flsi.lecture.webapp.servlet.CustomerServlet</servlet-class> </servlet> <servlet> <servlet-name>ItemServlet</servlet-name> <servlet-class>jp.co.flsi.lecture.webapp.servlet.ItemServlet</servlet-class> </servlet> <servlet> <servlet-name>OrderItemServlet</servlet-name> <servlet-class>jp.co.flsi.lecture.webapp.servlet.OrderItemServlet</servlet-class> </servlet> <servlet> <servlet-name>OrderProcessServlet</servlet-name> <servlet-class>jp.co.flsi.lecture.webapp.servlet.OrderProcessServlet</servlet-class> </servlet> <servlet> <servlet-name>ConfirmOrderServlet</servlet-name> <servlet-class>jp.co.flsi.lecture.webapp.servlet.ConfirmOrderServlet</servlet-class> </servlet> <servlet> <servlet-name>CompleteOrderServlet</servlet-name> <servlet-class>jp.co.flsi.lecture.webapp.servlet.CompleteOrderServlet</servlet-class> </servlet> <servlet> <servlet-name>UserRegServlet</servlet-name> <servlet-class>jp.co.flsi.lecture.webapp.servlet.UserRegServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>TestServlet</servlet-name> <url-pattern>/servlet/test</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>TestServlet2</servlet-name> <url-pattern>/servlet/test2</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>AgeCalcServlet</servlet-name> <url-pattern>/servlet/age</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>CustomerServlet</servlet-name> <url-pattern>/servlet/customers</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>ItemServlet</servlet-name> <url-pattern>/servlet/items</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>OrderItemServlet</servlet-name> <url-pattern>/servlet/orderitems</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>OrderProcessServlet</servlet-name> <url-pattern>/servlet/orderprocess</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>ConfirmOrderServlet</servlet-name> <url-pattern>/servlet/confirmorder</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>CompleteOrderServlet</servlet-name> <url-pattern>/servlet/completeorder</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>UserRegServlet</servlet-name> <url-pattern>/servlet/userreg</url-pattern> </servlet-mapping> </web-app> -------------------------------------------------------- では、今度はwrongUserInfo.jspを作成しましょう。 下記のようなwrongUserInfo.jspファイルをitemSelect.htmlと同じ場所に 作成してください。 -------------------------------------------------------- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="Shift_JIS" %> <HTML> <HEAD> <TITLE>ユーザー登録</TITLE> </HEAD> <BODY bgcolor="#77ffff" text="#fa5a00"> 入力した情報が不足しています。下記のすべての項目を、再度入力し直してください。 <%@ include file="userRegBody.jsp" %> -------------------------------------------------------- このように<%@ include file="ファイルのURL" %>を使用するとファイルを節約 できますね。 では、続いて、下記のようなuserReg2.jspをitemSelect.htmlと同じ場所に 作成してください。 -------------------------------------------------------- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="Shift_JIS" %> <HTML> <HEAD> <TITLE>ユーザー登録</TITLE> </HEAD> <BODY bgcolor="#77ffff" text="#fa5a00"> <%@ page import="jp.co.flsi.lecture.webapp.entity.*" %> <jsp:useBean class="jp.co.flsi.lecture.webapp.entity.Customer" id="CUSTOMER" scope="session" /> 入力されたユーザーID(<%= CUSTOMER.getNum() %>)は既に使用されています。 別のユーザーIDを入力し直してください。 <H1>ユーザー登録</H1> <FORM action="servlet/userreg" method="POST"> 当店でご注文いただくためには、ユーザー登録していただく必要があります。 <BR> ユーザー登録するためには、下記にお客様の情報を入力し、INTSHOPユーザー規約に同意の上 <BR> 「規約に同意しユーザー登録をする」ボタンをクリックしてください。 <BR> <BR> <TABLE border="1" width="100%"> <TR> <TH WIDTH="20%">ユーザID（必須）：</TH> <TD><INPUT TYPE="text" NAME="userId" VALUE="" SIZE=10 MAXLENGTH=5></TD> </TR> <TR> <TH>パスワード（必須）：</TH> <TD><INPUT TYPE="password" NAME="password" VALUE="" SIZE=10></TD> </TR> <TR> <TH>氏名（必須）：</TH> <TD><INPUT TYPE="text" NAME="name" VALUE="<%= CUSTOMER.getName() %>" SIZE=20></TD> </TR> <TR> <TH>郵便番号（必須）：</TH> <TD><INPUT TYPE="text" NAME="zipCode" VALUE="<%= CUSTOMER.getZipCode() %>" SIZE=10></TD> </TR> <TR> <TH>住所（必須）：</TH> <TD><INPUT TYPE="text" NAME="address" VALUE="<%= CUSTOMER.getAddress() %>" SIZE=100></TD> </TR> </TABLE> <BR> <BR> <DIV ALIGN="center"> <TEXTAREA rows=15 cols=100> ■INTSHOPユーザー規約■ 第１条（なんとかかんとか） ほにゃらら。 第２条（なんとかかんとか２） ほにゃらら２。 ＜＜以下省略＞＞ </TEXTAREA> <BR> <BR> <INPUT TYPE="submit" NAME="register" VALUE="規約に同意しユーザー登録をする"> </DIV> </FORM> </BODY> </HTML> -------------------------------------------------------- (次回に続く) では、今日はここまでにします。 何か、わからないところがありましたら、下記のWebページまで質問を お寄せください。 ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ★ホームページ： http://www.flsi.co.jp/Java_text/ ★このメールマガジンは 「まぐまぐ（http://www.mag2.com）」 を利用して発行しています。 ★バックナンバーは http://www.flsi.co.jp/Java_text/ にあります。 ★このメールマガジンの登録／解除は下記Webページでできます。 http://www.mag2.com/m/0000193915.html ★このメールマガジンへの質問は下記Webページにて受け付けて います。わからない所がありましたら、どしどしと質問をお寄 せください。 http://www.flsi.co.jp/Java_text/ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ Copyright (C) 2008 Future Lifestyle Inc. 不許無断複製 |