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

●フォームに入力する

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

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

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

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

[作成]
1.エクリプス、新規動的Project作成から「joytas7」アプリケーションを作成する。
2.modelの作成。modelパッケージにProductクラスを以下のように作成
●model.Product.java
03 | import java.io.Serializable; |
05 | public class Product implements Serializable{ |
08 | private String updated; |
10 | public Product(String name,String price,String updated){ |
15 | public String getName() { |
18 | public void setName(String name) { |
21 | public String getPrice() { |
24 | public void setPrice(String price) { |
27 | public String getUpdated() { |
30 | public void setUpdated(String updated) { |
31 | this .updated = updated; |
3.viewの作成。以下の図のようなフォルダ構成としmain.jspを作成する。

●main.jsp
01 | <%@ page language= "java" contentType= "text/html; charset=UTF-8" |
02 | pageEncoding= "UTF-8" import = "model.*,java.util.*" %> |
04 | List<Product> list=(List<Product>)application.getAttribute( "list" ); |
05 | String err=(String)request.getAttribute( "err" ); |
06 | String msg=(String)request.getAttribute( "msg" ); |
11 | <meta charset= "UTF-8" /> |
12 | <meta name= "viewport" content= "width=device-width, initial-scale=1, shrink-to-fit=no" > |
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> |
18 | <div class = "container" style= "margin-top:20px;" > |
21 | <div class = "alert alert-danger" role= "alert" > |
26 | <div class = "alert alert-success" role= "alert" > |
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;" > |
35 | <div class = "form-group" > |
36 | <label for = "price" >価格:</label> |
37 | <input type= "number" id= "price" name= "price" class = "form-control" style= "width:200px;" > |
39 | <button type= "submit" class = "btn btn-primary" >登録</button> |
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> |
51 | var forms=document.getElementsByClassName( "form-control" ); |
52 | var alerts=document.getElementsByClassName( "alert" ); |
53 | for (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" ; |
4.controllerの作成。以下のようなフォルダ構成とし、Main.java(Servlet)を作成する。

●controller.Main.java
03 | import java.io.IOException; |
04 | import java.text.SimpleDateFormat; |
05 | import java.util.ArrayList; |
09 | import javax.servlet.RequestDispatcher; |
10 | import javax.servlet.ServletContext; |
11 | import javax.servlet.ServletException; |
12 | import javax.servlet.annotation.WebServlet; |
13 | import javax.servlet.http.HttpServlet; |
14 | import javax.servlet.http.HttpServletRequest; |
15 | import javax.servlet.http.HttpServletResponse; |
20 | public class Main extends HttpServlet { |
21 | private static final long serialVersionUID = 1L; |
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); |
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" ); |
32 | list= new ArrayList<>(); |
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" , "未記入の項目があります!" ); |
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); |
45 | application.setAttribute( "list" , list); |
46 | request.setAttribute( "msg" , "1件登録しました。" ); |
48 | doGet(request,response); |
5.以下のアドレスにリクエストして、実行例のようになることを確認する。
http://localhost:8080/joytas7/main
コメント