【JavaサンプルWebアプリ#3】テーブルからデータを取得して一覧表示する

今回の記事はこちらの記事の続きとなっております。サーブレットとjspを使ってTodoWebアプリケーションを作成します。現時点ではMySQLでのデータベース、テーブルの準備、Eclipseを使ったプロジェクトの準備が終わっているので、今回は実際にテーブルからデータを取得してWebブラウザ上で一覧表示してみます。

今回作るものの流れを説明すると、home.htmlにformを作成します。そこからListServletにリクエストを送ります。ListServletではリクエストを受け取って、データベースへ接続しデータを取得します。そのデータを扱いやすい形に成型してlist.jspに処理を移します。list.jspでデータを表示します。

home.html

最初の画面になります。非常にシンプルな作りです。<h1>タグを使ったタイトルを表示します。formによって「Todo一覧を表示」と書かれたボタンを表示します。これが押されるとactionに指定したlist-servletに処理が移ります。リクエスト方法はgetとします。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
</head>
<body>
	<h1>Todo 管理Webアプリケーション</h1>
	<form action="list-servlet" method="get">
		<input type="submit" value="Todo一覧を表示">
	</form>

</body>
</html>

ListServlet

home.htmlのTodo一覧を表示が押されるとこのListServletに処理が来るようにします。まずはサーブレットを作ります。srcフォルダの中にservletというパッケージを作成してください。その後右クリックをして新規→その他を選択します。

次にWebのなかにあるサーブレットを選択します。

クラス名をListServletと入力して次へを押します。そのまま進んで完了を押します。

すると新しくListServlet.javaが作られます。この13行目の@WebServletのなかの(“/ListServlet”)を(“/list-servlet”)に変更します。これは先ほど作ったhome.htmlのformタグのactionでlist-servletにリクエストが投げられるように設定したからです。

そして28行目あたりからdoGetメソッドが書かれているはずです。先ほどのformでメソッドをgetにしたためformが提出されるとdoGetメソッドが実行されます。formのなかのメソッドをPOSTにしていた場合は36行目からのdoPostメソッドが実行されます。

今回作るdoGetメソッドの中身は以下のようになります。順番に解説していきます。

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	// TODO Auto-generated method stub
	String sql = "select * from todoTable";

	List<Todo> todoList = new ArrayList<>();

	try(Connection con = DBConnection.getConnection();
		Statement stmt = con.createStatement();
		ResultSet rs = stmt.executeQuery(sql);){

		while(rs.next()) {
			int id = rs.getInt("id");
			String todo = rs.getString("todo");
			String timeLimit = rs.getString("timeLimit");

			todoList.add(new Todo(id, todo, timeLimit));
		}

	}catch(SQLException | ClassNotFoundException e) {
		e.printStackTrace();
	}

	request.setAttribute("todoList", todoList);
	RequestDispatcher rd = request.getRequestDispatcher("list.jsp");
	rd.forward(request, response);
}

 



データベースからデータを取得し、Listに値を追加していきます。select文の実行についてはこちらの記事で詳しく解説しているので、よかったら読んでみてください。

try(Connection con = DBConnection.getConnection();
	Statement stmt = con.createStatement();
	ResultSet rs = stmt.executeQuery(sql);){

	while(rs.next()) {
		int id = rs.getInt("id");
		String todo = rs.getString("todo");
		String timeLimit = rs.getString("timeLimit");

		todoList.add(new Todo(id, todo, timeLimit));
	}

}catch(SQLException | ClassNotFoundException e) {
	e.printStackTrace();
}

ここが今回の肝になります。request.setAttributeによってデータを追加して作成されたtodoListを次のjspでも使えるようにします。取り出すときの名前として第一引数にtodoListとしています。

request.getRequestDispatcherによって次にどこに処理を移すか指示しています。引数でlist.jspを指定したのでfowardメソッドを使うことで指定したURLに処理を移すことができます。

request.setAttribute("todoList", todoList);
RequestDispatcher rd = request.getRequestDispatcher("list.jsp");
rd.forward(request, response);

list.jsp

サーブレットからforwardされてlist.jspに処理が移ります。全体のコードは次のようになります。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.util.List, java.util.ArrayList, model.Todo"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Todo List</title>
</head>
<body>
	<%
		List<Todo> todoList = (List) request.getAttribute("todoList");
	%>

	<% for(Todo todo: todoList){  %>
		<%=todo.getTodo() %> 期限:<%=todo.getTimeLimit() %><br>
	<% } %>


</body>
</html>

まずこのjsp内でもListを使いたいので一番初めにインポートします。またTodoクラスも利用するのでこちらも合わせてインポートしておきます。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.util.List, java.util.ArrayList, model.Todo"%>

bodyタグの中身です。まずは先ほどのサーブレットで作成したtodoListを取り出します。jspでは<%%>の間にJavaのコードを記述することができます。TodoのListであるtodoListを作成しrequestのgetAttributeメソッドを使うことでサーブレットでsetAttributeしたものを取り出せます。

<%
	List<Todo> todoList = (List) request.getAttribute("todoList");
%>

for文でtodoListの要素を一つづつ取り出して表示していきます。非常に読みにくいですが、先ほどと同じく<%%>の間にJavaのコードが記述されています。<%=todo.getTodo() %>のところにはtodo.getTodo()の戻り値が表示されるようになります。

<% for(Todo todo: todoList){ %>
    <%=todo.getTodo() %> 期限:<%=todo.getTimeLimit() %><br>
<% } %>

 



動作確認

ここまでコードがかけたら実際にサーバーを起動してWebブラウザで確認してみます。home.htmlを右クリックして「実行」→「サーバで実行」を選択します。

サーバを選択し、完了をクリックします。するとコンソールに何やら文字がいっぱい出てきた後自動でWebブラウザが立ち上がります。

おそらく下記画像のようなページが出てきます。

「Todo一覧を表示」ボタンを押すと画面遷移して下記のような感じでデータベースに保存してあったデータが取り出され表示されます。CSSを書いていないのでなんとも物寂しい見てくれですが、そこは追々整えていけばいいでしょう。

次回予告

次はデータの追加とか行えるようにしたいなーと考えています。

おすすめの参考書

私はプログラミング学習はUdemyで行うのが以下のような理由で圧倒的におすすめです。

  • 動画で好きなときに学べる
  • 一流のエンジニアから教えてもらえる
  • 好きな技術を体系的に学べる
  • 実際に手を動かしながら学ぶことができる
  • セール時であれば1500円〜2000円ほどで購入できる(大半の技術書より安い)
  • 講座自体がアップデートされていくので情報が古くなりにくい
  • UdemyにはJava x MySQLでWebアプリの作り方が学べる講座 もあるので興味がある方は一度チェックしてみてください!

    また無料でJavaのWebアプリ開発が学べるプログラミングスクールもあります!説明会も行っているので、一度参加してJavaを学んでみるのもオススメです!

    コメント

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