英和辞書アプリの作成を前回の続きから行う。
準備
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を修正して、検索ワードと一...
joytas.net
2017.09.21
コメント