英和辞書アプリの作成を前回の続きから行う。
準備
1.META-INFの直下にcontext.xmlを配置する。passwordのところはusernameとpasswardはDB接続時に必要な値を入れる。
もし、パスワードの設定を指定にない人はpasswordの行を削除してよい。
<?xml version="1.0" encoding="UTF-8" ?> <Context> <Resource name="ejword" auth="Container" type="javax.sql.DataSource" driverClassName="com.mysql.jdbc.Driver" url="jdbc:mysql://localhost:3306/ejword" connectionProperties="autoReconnect=true;verifyServerCertificate=false;useSSL=false;requireSSL=false;useUnicode=true;characterEncoding=UTF-8;" username="root" password="root" validationQuery="select 1"/> </Context>
modelの作成
2.srcフォルダの中にmodelパッケージを作成し、Word.javaを作成する。
●model.Word.java
package model; import java.io.Serializable; public class Word implements Serializable{ private int id; private String title; private String body; public Word() { } public Word(String title, String body) { this.title = title; this.body = body; } public Word(int id, String title, String body) { this(title,body); this.id = id; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getBody() { return body; } public void setBody(String body) { this.body = body; } }
DAOの作成
3.daoパッケージを作成して、WordDAO.javaを作成する。
(以下のソースはswitch文での文字列比較が入っている。Java SE 7未満の人はif文で比較すること)
●dao.WordDAO.java
package dao; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import javax.naming.Context; import javax.naming.InitialContext; import javax.naming.NamingException; import javax.sql.DataSource; import model.Word; public class WordDAO { private Connection db; private PreparedStatement ps; private ResultSet rs; private void connect() throws NamingException, SQLException { Context context=new InitialContext(); DataSource ds=(DataSource)context.lookup("java:comp/env/ejword"); this.db=ds.getConnection(); } private void disconnect() throws SQLException { if(rs !=null) { rs.close(); } if(ps !=null) { ps.close(); } if(db != null) { db.close(); } } public List<Word> getListBySearchWord(String searchWord,String mode){ List<Word> list=new ArrayList<>(); switch(mode) { case "startsWith": searchWord=searchWord+"%"; break; case "contains": searchWord="%"+searchWord+"%"; break; case "endsWith": searchWord="%"+searchWord; } try { this.connect(); ps=db.prepareStatement("SELECT * FROM words WHERE title LIKE ?"); ps.setString(1, searchWord); //System.out.println(ps); rs=ps.executeQuery(); while(rs.next()) { String title=rs.getString("title"); String body=rs.getString("body"); Word w=new Word(title,body); list.add(w); } } catch (NamingException e) { e.printStackTrace(); } catch (SQLException e) { e.printStackTrace(); }finally { try { this.disconnect(); } catch (SQLException e) { e.printStackTrace(); } } return list; } }
viewの作成
4.WEB-INFフォルダの中にviewフォルダを作り、main.jspを配置する。
●main.jsp(WEB-INF/view/main.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="model.*,java.util.*"%> <% List<Word> list=(List<Word>)request.getAttribute("list"); %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>EJWord</title> </head> <body> <form action="/ejword/main" method="post"> <input type="text" name="searchWord" value=""> <select name="mode"> <option value="startsWith">で始まる</option> <option value="contains">含む</option> <option value="endsWith">で終わる</option> <option value="match">一致する</option> </select> <button type="submit">検索</button> </form> <% if(list !=null && list.size() > 0){ %> <table border="1"> <% for(Word w:list){ %> <tr><th><%=w.getTitle() %></th><td><%=w.getBody() %></td></tr> <%} %> </table> <%} %> </body> </html>
controllerの作成
5.controllerパッケージを作成し、その中にMain.java(Servlet)を配置する。
●controller.Main.java
package controller; import java.io.IOException; import java.util.List; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import dao.WordDAO; import model.Word; @WebServlet("/main") public class Main extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { RequestDispatcher rd=request.getRequestDispatcher("/WEB-INF/view/main.jsp"); rd.forward(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String searchWord=request.getParameter("searchWord"); String mode=request.getParameter("mode"); WordDAO dao=new WordDAO(); List<Word> list=dao.getListBySearchWord(searchWord, mode); request.setAttribute("list", list); doGet(request, response); } }
動作確認
ここまでできたら動作を確認してみよう。Main.javaをサーバーで実行する。
フォームに検索したい単語と、一致モードを選択して検索ボタンを押す。
検索結果が表示されれば成功だ。
現在は検索した言葉とモードが結果表示の際消えてしまう。次回はここの修正も含めてさらに作り込んでいく。
JSP & Servlet-16日目(英和辞書アプリの作成3)
英和辞書アプリの作成を前回の続きから行う。入力内容の復元1.今のままでは送信ボタンを押した後、結果は表示されるが検索ワードと一致モードの内容がリセットされてしまう。消えないように修正しよう。まずはMain.javaを修正して、検索ワードと一...
コメント