JSP & Servlet-15日目(英和辞書アプリの作成2)

JSP&Servlet

英和辞書アプリの作成を前回の続きから行う。

準備

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を修正して...

コメント

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