JSP & Servlet-6日目(Session) | ジョイタスネット

Sessionを利用して、以下のようなお問い合わせフォームを作成しよう。
[実行例]
●スタート画面

●フォームに入力する

●確認ボタンを押すと、確認画面に遷移する。

●戻るを押すと、フォームに戻る(その際、入力内容が表示されている)

●内容を編集する

●確認を押す

●送信を押すと遷移してメッセージが表示される。

●送信後、再びフォーム画面をリクエストすると。入力がクリアされている。

[作成]
1.エクリプス、新規動的Project作成から「joytas6」アプリケーションを作成する。
2.modelの作成。modelパッケージにPersonクラスを以下のように作成
●model.Person.java

01package model;
02 
03import java.io.Serializable;
04 
05public class Person implements Serializable{
06  private String name;
07  private String email;
08  private String memo;
09  public Person(){}
10  public Person(String name,String email,String memo){
11    this.name=name;
12    this.email=email;
13    this.memo=memo;
14  }
15  public String getName() {
16    return name;
17  }
18  public void setName(String name) {
19    this.name = name;
20  }
21  public String getEmail() {
22    return email;
23  }
24  public void setEmail(String email) {
25    this.email = email;
26  }
27  public String getMemo() {
28    return memo;
29  }
30  public void setMemo(String memo) {
31    this.memo = memo;
32  }
33 
34}

3.viewの作成。以下の図のようなフォルダ構成としファイルを作成する。

●form.jsp

01<%@ page language="java" contentType="text/html; charset=UTF-8"
02    pageEncoding="UTF-8" import="model.*"%>
03<%
04Person person=(Person)session.getAttribute("person");
05String name=person==null? "":person.getName();
06String email=person==null? "":person.getEmail();
07String memo=person==null? "":person.getMemo();
08%>
09<!DOCTYPE html>
10<html>
11<head>
12<meta charset="UTF-8"/>
13<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
14<link rel="stylesheet" href="/joytas6/css/main.css">
15<title>Joytas6(Session)</title>
16</head>
17<body>
18<h1>お問い合わせフォーム</h1>
19<form action="/joytas6/contact" method="post">
20<table>
21<tr><th>お名前</th><td><input type="text" name="name" value="<%=name%>"></td></tr>
22<tr><th>メールアドレス</th><td><input type="email" name="email" value="<%=email%>"></td></tr>
23<tr><th>お問い合わせ内容</th><td><textarea name="memo"><%=memo%></textarea></td></tr>
24</table>
25<input type="submit" value="確認" class="button">
26</form>
27</body>
28</html>

●confirm.jsp

01<%@ page language="java" contentType="text/html; charset=UTF-8"
02    pageEncoding="UTF-8" import="model.*"%>
03<%
04Person person=(Person)session.getAttribute("person");
05%>
06<!DOCTYPE html>
07<html>
08<head>
09<meta charset="UTF-8"/>
10<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
11<link rel="stylesheet" href="/joytas6/css/main.css">
12<title>Joytas6(Session)</title>
13</head>
14<body>
15<h1>お問い合わせフォーム</h1>
16<p class="normalP">以下の内容でよろしいですか？</p>
17 
18<table>
19<tr><th>お名前</th><td><%=person.getName() %></td></tr>
20<tr><th>メールアドレス</th><td><%=person.getEmail() %></td></tr>
21<tr><th>お問い合わせ内容</th><td><%=person.getMemo() %></td></tr>
22</table>
23<div id="btBox"><a href="/joytas6/contact?mode=back" class="button2">戻る</a><a href="/joytas6/contact?mode=send" class="button2">送信</a></div>
24 
25</body>
26</html>

●send.jsp

01<%@ page language="java" contentType="text/html; charset=UTF-8"
02    pageEncoding="UTF-8"%>
03<!DOCTYPE html>
04<html>
05<head>
06<meta charset="UTF-8"/>
07<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
08<link rel="stylesheet" href="/joytas6/css/main.css">
09<title>Joytas6(Session)</title>
10</head>
11<body>
12<h1>お問い合わせフォーム</h1>
13<p class="normalP">送信完了！</p>
14</body>
15</html>

●main.css

01@charset "UTF-8";
02h1{
03  box-sizing:border-box;
04  width:700px;
05  margin:20px auto;
06  background:#f4a895;
07  color:white;
08  padding:10px;
09  border-left:10px solid #e33234;
10 
11}
12table{
13  width:700px;
14  margin:0 auto;
15}
16th,td{
17  border:1px solid #555;
18  padding:10px;
19}
20th{
21  background:#f4a895;
22  color:white;
23}
24 
25input{
26  width:100%;
27}
28textarea{
29  width:100%;
30  height:100px;
31}
32.button{
33  display:block;
34  width:200px;
35  height:50px;
36 
37  margin:30px auto;
38  border-radius:10px;
39  border:2px solid #f4a895;
40  color:#f4a895;
41  background:white;
42}
43.button2{
44  display:inline-block;
45  width:200px;
46  height:50px;
47  margin-top:30px;
48  border-radius:10px;
49  border:2px solid #f4a895;
50  color:#f4a895;
51  background:white;
52  line-height:50px;
53  text-decoration:none;
54 
55}
56.button:hover,
57.button2:hover{
58  cursor:pointer;
59  background:#f4a895;
60  color:white;
61  transition-duration: 300ms;
62 
63}
64 
65.normalP{
66  width:700px;
67  margin:20px auto 10px;
68}
69#btBox{
70  text-align:center;
71}
72 
73.button2:first-child{
74  margin-right:30px;
75 
76}

4.controllerの作成。以下のようなフォルダ構成とし、Contact.java(Servlet)を作成する。

●controller.Contact.java

01package controller;
02 
03import java.io.IOException;
04 
05import javax.servlet.RequestDispatcher;
06import javax.servlet.ServletException;
07import javax.servlet.annotation.WebServlet;
08import javax.servlet.http.HttpServlet;
09import javax.servlet.http.HttpServletRequest;
10import javax.servlet.http.HttpServletResponse;
11import javax.servlet.http.HttpSession;
12 
13import model.Person;
14 
15@WebServlet("/contact")
16public class Contact extends HttpServlet {
17  private static final long serialVersionUID = 1L;
18        
19  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
20    String path=null;
21    String mode=request.getParameter("mode");
22    if(mode == null || mode.equals("back")){
23      path="/WEB-INF/view/form.jsp";
24    }else {
25      path="/WEB-INF/view/send.jsp";
26      HttpSession session=request.getSession();
27      session.invalidate();
28    }
29    RequestDispatcher rd=request.getRequestDispatcher(path);
30    rd.forward(request, response);    
31  }
32   
33  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
34    request.setCharacterEncoding("UTF-8");
35    String name=request.getParameter("name");
36    String email=request.getParameter("email");
37    String memo=request.getParameter("memo");
38    Person person=new Person(name,email,memo);
39    HttpSession session=request.getSession();
40    session.setAttribute("person", person);
41    RequestDispatcher rd=request.getRequestDispatcher("/WEB-INF/view/confirm.jsp");
42    rd.forward(request, response);
43  }
44 
45}

5.以下のアドレスにリクエストして、実行例のようになることを確認する。
http://localhost:8080/joytas6/contact

自動返信メール

お問い合わせをした人に自動返信メールを送ってみよう。

1.まずは以下の二つのファイルをダウンロードし/WEB-INF/libフォルダ内にコピペで配置する。

commons-email-1.5.jar

1 ファイル 53.22 KB

ダウンロード

javax.mail.jar

1 ファイル 643.59 KB

ダウンロード

2.controller.Contact.javaを以下のように修正する。
今回はyahooのメールサーバーを利用してるので各自yahooのidとパスワードを入力すること。

01package controller;
02 
03import java.io.IOException;
04 
05import javax.servlet.RequestDispatcher;
06import javax.servlet.ServletException;
07import javax.servlet.annotation.WebServlet;
08import javax.servlet.http.HttpServlet;
09import javax.servlet.http.HttpServletRequest;
10import javax.servlet.http.HttpServletResponse;
11import javax.servlet.http.HttpSession;
12 
13import org.apache.commons.mail.DefaultAuthenticator;
14import org.apache.commons.mail.Email;
15import org.apache.commons.mail.EmailException;
16import org.apache.commons.mail.SimpleEmail;
17 
18import model.Person;
19 
20 
21@WebServlet("/contact")
22public class Contact extends HttpServlet {
23  private static final long serialVersionUID = 1L;
24 
25  protected void doGet(HttpServletRequest request, HttpServletResponse response)
26      throws ServletException, IOException {
27    String path = null;
28    String mode = request.getParameter("mode");
29    if (mode == null || mode.equals("back")) {
30      path = "/WEB-INF/view/form.jsp";
31    } else {
32      HttpSession session = request.getSession();
33      Person person = (Person) session.getAttribute("person");
34      StringBuilder sb = new StringBuilder();
35      sb.append("以下のように受け付けました");
36      sb.append(System.lineSeparator());
37      sb.append("お名前:" + person.getName());
38      sb.append(System.lineSeparator());
39      sb.append("email:" + person.getEmail());
40      sb.append(System.lineSeparator());
41      sb.append("お問い合わせ内容:" + person.getMemo());
42      sb.append(System.lineSeparator());
43 
44      try {
45        Email email = new SimpleEmail();
46        email.setHostName("smtp.mail.yahoo.co.jp");
47        email.setSmtpPort(465);
48        email.setAuthenticator(new DefaultAuthenticator("yahooアカウント", "yahooパスワード"));
49        email.setSSLOnConnect(true);
50        email.setFrom("yahooアカウント@yahoo.co.jp");
51        email.setSubject("お問い合わせありがとうございます。");
52        email.setMsg(sb.toString());
53        email.addTo(person.getEmail());
54        email.send();
55      } catch (EmailException e) {
56        e.printStackTrace();
57      }
58      session.invalidate();
59      path = "/WEB-INF/view/send.jsp";
60    }
61    RequestDispatcher rd = request.getRequestDispatcher(path);
62    rd.forward(request, response);
63  }
64 
65 
66  protected void doPost(HttpServletRequest request, HttpServletResponse response)
67      throws ServletException, IOException {
68    request.setCharacterEncoding("UTF-8");
69    String name = request.getParameter("name");
70    String email = request.getParameter("email");
71    String memo = request.getParameter("memo");
72    Person person = new Person(name, email, memo);
73    HttpSession session = request.getSession();
74    session.setAttribute("person", person);
75    RequestDispatcher rd = request.getRequestDispatcher("/WEB-INF/view/confirm.jsp");
76    rd.forward(request, response);
77  }
78 
79}

3.フォームから送信してみよう。入力したメールアドレス宛に自動返信メールが届くはずだ。