Javaを使って、データベースを使わない簡単な匿名掲示板を作る方法！

Javaを使って簡単な匿名掲示板を作りたいと思います！

実行環境

OSはmacOS

Eclipse

Tomcat

Java11

完成系

f:id:takeru232423:20210107163853p:plain

こんな感じで入力した文字列がフォームの下に、どんどん表示される感じです。

ソースコード

tweet.java

package servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

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;


@WebServlet("/tweet")
public class tweet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	List<String> tweetlist = new ArrayList<String>();

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		RequestDispatcher dispatcher = request.getRequestDispatcher("/WEB-INF/jsp/main.jsp");
		dispatcher.forward(request, response);

	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		String tweet = request.getParameter("tweet");
		tweetlist.add(0,tweet);

		ServletContext application = this.getServletContext();
		application.setAttribute("tweet", tweetlist);

		RequestDispatcher dispatcher = request.getRequestDispatcher("/WEB-INF/jsp/main.jsp");
		dispatcher.forward(request, response);

	}

}

main.jsp

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

<%
	List<String> t = (List<String>) application.getAttribute("tweet");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="form.css">
<title>sns</title>
</head>
<body>
	<section class="box">
		<form action="/tweet_a/tweet" method="post">
			<h3>What's up?</h3>
			<textarea name="tweet" rows="5" style="width: 485px"></textarea>
			<div>
				<input type="submit" value="tweet" style="width: 40%; height: 20%;">
			</div>
		</form>
	</section>
	<%
		if (t != null) {
	%>
	<%
		for (String a : t) {
	%>
	<p><%=a%></p>
	<%
		}
	}
	%>

</body>
</html>

コードの説明

まずList tweetlist = new ArrayList();というつぶやきを入れるリストを作る。

tweet.javaにアクセスがあった場合、doGet()メソッドが実行され、main.jspにフォワード。

<%
	List<String> t = (List<String>) application.getAttribute("tweet");
%>

リストはnull

だから

<%
		if (t != null) {
	%>
	<%
		for (String a : t) {
	%>
	<p><%=a%></p>
	<%
		}
	}
	%>

は実行されない。

ユーザーがつぶやく

tweet.javaのdoPost()メソッドが実行される。

String tweet = request.getParameter("tweet");

リクエストパラメータからつぶやきを得る。

tweetをリストの先頭に入れる。

アプリケーションスコープにリストを入れ、main.jspでもリストが使えるようにする。

<%
	List<String> t = (List<String>) application.getAttribute("tweet");
%>

が前のようにnullでないので

<%
		if (t != null) {
	%>
	<%
		for (String a : t) {
	%>
	<p><%=a%></p>
	<%
		}
	}
	%>

が実行され、リストの中に入っているつぶやきが全部p要素として表示される。

感想

データベースと連携させると、本格的なwebアプリが作れそうですね。またcssのソースは載せないので自分でオリジナルの掲示板をデザインしてみてください。

たけるのプログラミング

作ったものとか、気ままにアップします。