■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
                      2008年04月06日

    楽しいJava講座 - 初心者から達人へのパスポート
                  vol.098

                                セルゲイ・ランダウ
 バックナンバー: http://www.flsi.co.jp/Java_text/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


[このメールマガジンは、画面を最大化して見てください。]


========================================================
◆ 01.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ユーザー規約■

第1条(なんとかかんとか)

ほにゃらら。

第2条(なんとかかんとか2)

ほにゃらら2。

  <<以下省略>>


  </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ユーザー規約■

第1条(なんとかかんとか)

ほにゃらら。

第2条(なんとかかんとか2)

ほにゃらら2。

  <<以下省略>>


  </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. 不許無断複製