# サーブレット＆JSPとDBを使った簡易掲示板
[前回](https://hackmd.io/@ka-777/BypnltOKO)DBへの接続をやったので今回はそれを用いた簡易掲示板を作ります
今回もxamppを使っています
---
## 最終的なファイル構造
今回はjavaリソースの中のsrcはサーブレットのChat.javaが入っていて、WebContentの直下にJSPのchat.jspがあります
またWebContentの中のWEB-INFの中のlibにjarファイルがありますが「mysql-connector-java-5.1.40-bin.jar」というのを今回は使っています(かなり古いバージョンです)
[ここ](https://downloads.mysql.com/archives/c-j/)にアクセスすると、DLできるので最新のをダウンロードして動くかはわかりませんが、過去のバージョンもDLできるのでDLしておいてください
---
## サーブレットの作成
今回はメインの画面がJSPなのでサーブレットの方は裏方のお仕事をするだけです。
また、今回はただのテストアプリなのでdoGetとdoPostでそれぞれでDBに接続しています。
今回doGetではSQL文をみると分かりますが、DBの内容を取得してIDを降順(大きい順)に並べています。
また、JSPで入力した後にまたJSPの画面に戻すためにフォワード処理を使っています。
また、doPostでは今回はchat.jspで入力した内容をINSERTを使ってDBに内容を追加しています。
詳しくはコード内に記述してあるのでそっちを参考にしてください
Chat.java
```
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class Chat
*/
@WebServlet("/Chat")
public class Chat extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Chat() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 文字化け対策
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
// データベース接続に必要な情報
final String DSN = "jdbc:mysql://localhost:3306/Ren01?characterEncoding=utf8";
final String USER = "root";
final String PASSWORD = null;
//DBの内容を表示するための準備
ResultSet rs = null;
//今回ArrayListにはStringの配列を入れるため<>の中はこうなる
ArrayList<String[]> list = new ArrayList<String[]>();
// データベース接続情報管理
Connection conn = null;
// SQL 情報管理
PreparedStatement pstmt1 = null;
try {
// JDBC ドライバのロード
Class.forName("com.mysql.jdbc.Driver");
// データベース接続
conn = (Connection) DriverManager.getConnection(DSN, USER, PASSWORD);
//SQL文(追加処理)の作成と実行
String sql = "SELECT * FROM CHAT ORDER BY CHATID DESC";
pstmt1 = conn.prepareStatement(sql);
rs = pstmt1.executeQuery();
//データの取り出し
while (rs.next()) { //DBの中にデータがある限りループ処理
//今回はID,名前、内容、日付のすべてを表示(IDはあとで見えなくさせる)するので
String[] data = new String[4];
data[0] = rs.getString("chatid");
data[1] = rs.getString("name");
data[2] = rs.getString("memo");
data[3] = rs.getString("date");
list.add(data);
}
//DBを切断する処理
rs.close();
pstmt1.close();
conn.close();
} catch (Exception e) {
//何もしない.本来は例外処理を書く
//↓エラー文を段階的に表示してくれる
e.printStackTrace();
}
//↓ここでhttprequestにデータを格納している
request.setAttribute("data", list);
// サーブレットの転送
ServletContext sc = getServletContext();
RequestDispatcher rd = sc.getRequestDispatcher("/chat.jsp");
rd.forward(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 文字化け対策
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
//requestオブジェクトから取得
String name = request.getParameter("name");
String memo = request.getParameter("memo");
//メモが空文字じゃなければ処理を続ける
if (!memo.equals("")) {
// データベース接続に必要な情報
final String DSN = "jdbc:mysql://localhost:3306/Ren01?characterEncoding=utf8";
final String USER = "root";
final String PASSWORD = null;
// データベース接続情報管理
Connection conn = null;
// SQL 情報管理
PreparedStatement pstmt1 = null;
try {
// JDBC ドライバのロード
Class.forName("com.mysql.jdbc.Driver");
// データベース接続
conn = (Connection) DriverManager.getConnection(DSN, USER, PASSWORD);
//SQL文(追加処理)の作成と実行
String sql = "INSERT INTO chat(name,memo,date) VALUES(?,?,now())";
pstmt1 = conn.prepareStatement(sql);
pstmt1.setString(1, name);
pstmt1.setString(2, memo);
pstmt1.executeUpdate();
} catch (Exception e) {
//何もしない.本来は例外処理を書く
//↓エラー文を段階的に表示してくれる
e.printStackTrace();
}
}
//↓名前を保存
request.setAttribute("name", name);
doGet(request, response);
}
}
```
---
## JSPの作成
今回JSP(HTMLをメインに記述)でのJavaの内容はサーブレットでDBから受け取った内容(ID,名前,内容,日付)を取得して出力するだけです
JSPはHTMLの中にJavaの内容を組み込むのであまり多くのJavaの内容を書く場合(今回だとDBに接続してSQL文を実行するなど)はすべてサーブレットにかいたほうが楽です。反対にサーブレットにHTMLの内容を書こうとすると出力のための行数があまりにも多くてめんどくさいのであまりおすすめはしません
chat.jsp
```
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.ArrayList"%>
<%
ArrayList<String[]> list = (ArrayList<String[]>)request.getAttribute("data");
//↓名前を保存しておいてるのでそれを呼び出す
String name = (String)request.getAttribute("name");
%>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>一言チャット</title>
</head>
<body>
<h1>一言チャット</h1>
<form method="post" action="Chat">
名前：<input type="text" name="name" value="<%= name %>"><br/>
一言：<input type="text" name="memo"><br/>
<input type="submit" value="送信">
</form>
<hr>
<%
for(int i=0;i<list.size();i++){
String[] data = list.get(i);
// 出力しない out.print(data[0]+":"); //ID
out.print(data[1]+":"); //名前
out.print(data[2]); //内容
out.print("("+data[3]+")"); //日付
out.println("<br>"); //改行
}
%>
</body>
</html>
```
## 実行
最終的に実行するとこのような感じで直線より上はフォームでそこで登録すると、直線より下で掲示板のように名前、内容、日付の順番に1行ずつ表示されています。
また、名前を保存しているので最初にアクセス時はnullですが2回目以降は前回入力した名前が名前欄にすでに入力されています。
また、掲示板は上の方が最新の状態になっているのが、時間を見るとわかると思います
## まとめ
今回はこれで完成です
ほぼコードに説明をかいてしまったのでここに書くことは少ないのでかなり短めになってしまいました
Sign in with Wallet
Connect another wallet