JSP & Servlet-7日目(Applicationスコープ)

JSP&Servlet

Applicationスコープを利用して製品登録アプリを作ってみよう。デザインは管理画面をサクッと作る際にとても役にたつBootstrapを利用する。
[実行例]
●スタート画面

●フォームに入力する

●登録ボタンを押すと、登録しましたというメッセージが表示されるとともに下部にリストアップ。

●フォーム部品にフォーカスするとメッセージが消える

●未入力のまま登録ボタンを押すとエラーメッセージが表示される。

●入力した情報が蓄積されていく。下図は3件登録したところ

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

01package model;
02 
03import java.io.Serializable;
04 
05public class Product implements Serializable{
06  private String name;
07  private String price;
08  private String updated;
09  public Product(){}
10  public Product(String name,String price,String updated){
11    this.name=name;
12    this.price=price;
13    this.updated=updated;
14  }
15  public String getName() {
16    return name;
17  }
18  public void setName(String name) {
19    this.name = name;
20  }
21  public String getPrice() {
22    return price;
23  }
24  public void setPrice(String price) {
25    this.price = price;
26  }
27  public String getUpdated() {
28    return updated;
29  }
30  public void setUpdated(String updated) {
31    this.updated = updated;
32  }
33   
34 
35}

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

●main.jsp

01<%@ page language="java" contentType="text/html; charset=UTF-8"
02    pageEncoding="UTF-8" import="model.*,java.util.*"%>
03<%
04List<Product> list=(List<Product>)application.getAttribute("list");
05String err=(String)request.getAttribute("err");
06String msg=(String)request.getAttribute("msg");
07%>
08<!DOCTYPE html>
09<html>
10<head>
11<meta charset="UTF-8"/>
12<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
13<!-- Bootstrap CSS -->
14<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
15<title>Joytas7(Applicationスコープ)</title>
16</head>
17<body>
18<div class="container" style="margin-top:20px;">
19<p>商品を登録してください。</p>
20<% if(err !=null){%>
21<div class="alert alert-danger" role="alert">
22<%=err %>
23</div>
24<%} %>
25<% if(msg !=null){%>
26<div class="alert alert-success" role="alert">
27<%=msg %>
28</div>
29<%} %>
30<form action="/joytas7/main" method="post" >
31  <div class="form-group">
32    <label for="name">製品名:</label>
33    <input type="text" id="name" name="name" class="form-control" style="width:200px;">
34  </div>
35  <div class="form-group">
36    <label for="price">価格:</label>
37    <input type="number" id="price" name="price" class="form-control" style="width:200px;">
38  </div>
39  <button type="submit" class="btn btn-primary">登録</button>
40</form>
41<%if(list != null){%>
42<table class="table table-striped mt-4">
43<tr><th>製品名</th><th>価格</th><th>登録日</th></tr>
44<%for(Product p:list) {%>
45<tr><th><%=p.getName() %></th><td><%=String.format("%,3d円",Integer.parseInt(p.getPrice())) %></td><td><%=p.getUpdated() %></td></tr>
46<%} %>
47</table>
48<%} %>
49</div>
50<script>
51var forms=document.getElementsByClassName("form-control");
52var alerts=document.getElementsByClassName("alert");
53for(var i=0;i<forms.length;i++){
54  forms[i].addEventListener("focus",function(){
55    for(var j=0;j<alerts.length;j++){
56      alerts[j].style.display="none";
57    }
58  });
59}
60</script>
61</body>
62</html>

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

●controller.Main.java

01package controller;
02 
03import java.io.IOException;
04import java.text.SimpleDateFormat;
05import java.util.ArrayList;
06import java.util.Date;
07import java.util.List;
08 
09import javax.servlet.RequestDispatcher;
10import javax.servlet.ServletContext;
11import javax.servlet.ServletException;
12import javax.servlet.annotation.WebServlet;
13import javax.servlet.http.HttpServlet;
14import javax.servlet.http.HttpServletRequest;
15import javax.servlet.http.HttpServletResponse;
16 
17import model.Product;
18 
19@WebServlet("/main")
20public class Main extends HttpServlet {
21  private static final long serialVersionUID = 1L;
22           
23  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
24    RequestDispatcher rd= request.getRequestDispatcher("/WEB-INF/view/main.jsp");
25    rd.forward(request, response);
26  }
27   
28  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
29    ServletContext application =this.getServletContext();
30    List<Product> list=(List<Product>)application.getAttribute("list");
31    if(list == null){
32      list=new ArrayList<>();
33    }
34    request.setCharacterEncoding("UTF-8");
35    String name=request.getParameter("name");
36    String price=request.getParameter("price");
37    if(name.isEmpty() || price.isEmpty()){
38      request.setAttribute("err","未記入の項目があります!");
39    }else{
40      Date date=new Date();
41      SimpleDateFormat sdf=new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
42      String updated=sdf.format(date);
43      Product product=new Product(name,price,updated);
44      list.add(0,product);
45      application.setAttribute("list", list);
46      request.setAttribute("msg","1件登録しました。");
47    }  
48    doGet(request,response);   
49  }
50}

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

コメント

タイトルとURLをコピーしました