# テーブル(表)の中にサーブレットから取得した内容をいれる
## 前回作成したもの
https://hackmd.io/@ka-777/HJPtNyi5O
前回のは上記を参照してください
この時はサーブレットから取得した内容をJSPに入れる際にそのままプリントアウトしましたが、表の中に入れる方法を書き忘れてたのでここに書いていきます
## ファイル構造

今回も新しく作るのはサーブレットとJSPファイルだけなのですぐ作れます
## コード内容
ほとんどが前回と同じなので説明は割愛します
SQL文
```
CREATE DATABASE kadai03 DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
USE kadai03;
CREATE TABLE purchase(
id int PRIMARY KEY AUTO_INCREMENT,
item varchar(256),
shop varchar(256),
price int,
date datetime
);
```
Purchase.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 Purchase
*/
@WebServlet("/Purchase")
public class Purchase extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Purchase() {
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/kadai03?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 purchase ORDER BY id DESC";
pstmt1 = conn.prepareStatement(sql);
rs = pstmt1.executeQuery();
//データの取り出し
while (rs.next()) { //DBの中にデータがある限りループ処理
//今回はすべてを表示(IDはあとで見えなくさせる)するので
String[] data = new String[5];
data[0] = rs.getString("id");
data[1] = rs.getString("item");
data[2] = rs.getString("shop");
data[3] = rs.getString("price");
data[4] = 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("/purchase.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 item = request.getParameter("item");
String shop = request.getParameter("shop");
String price = request.getParameter("price");
//メモが空文字じゃなければ処理を続ける
if (!item.equals("")) {
// データベース接続に必要な情報
final String DSN = "jdbc:mysql://localhost:3306/kadai03?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 purchase(item,shop,price,date) VALUES(?,?,?,now())";
pstmt1 = conn.prepareStatement(sql);
pstmt1.setString(1, item);
pstmt1.setString(2, shop);
pstmt1.setString(3, price);
pstmt1.executeUpdate();
} catch (Exception e) {
//何もしない.本来は例外処理を書く
//↓エラー文を段階的に表示してくれる
e.printStackTrace();
}
}
doGet(request, response);
}
}
```
今回もDBのところは各自設定を変えてください
たしかデフォルトがrootでパスワードないのでそのパターンの記述で書いてあります
また、接続するDBは今回はDB作成時のSQL文もあるのでエラーにはならないと思います
purchase.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");
%>
<!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="Purchase">
買ったもの:<input type="text" name="item"><br /> 買ったところ:<input
type="text" name="shop"><br /> 支払った金額:<input type="text"
name="price"><br /> <input type="submit" value="登録">
</form>
<p>
<table border=1>
<tr>
<td>日時</td>
<td>買ったもの</td>
<td>買ったところ</td>
<td>金額</td>
</tr>
<%
for (int i = 0; i < list.size(); i++) {
String[] data = list.get(i);
out.print("<tr><td>"+data[4]+"</td>"); //日付
out.print("<td>"+data[1]+"</td>"); //買ったもの
out.print("<td>"+data[2]+"</td>"); //買った場所
out.print("<td>\\"+data[3]+"</td></tr>"); //金額
}
%>
</table>
</body>
</html>
```
今回大きく変わったのはJSPの方で、表の中にサーブレットからもってきた内容を入れる方法が2種類あります
まず1つ目は、上記のようにJavaのコードの中にHTMLタグを記述する方法です
もう1つは、<% %>を複数使い、最初にfor文を記述して{}を閉じないことで、HTMLのタグ内に<% %>をつけて表示したいものを記述する方法もあります
基本JSPの時はfor文とかで{}を閉じてしまうと引数を使うのに再度宣言が必要ですが閉じていない場合は1度だけで済むので便利です
## 実行結果

このようになります
今回は表示させていないIDが自動生成であり、そのIDで順番を整えているので最新の登録ほど上に来ます