Javaで簡易な掲示板を作成する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaで簡易な掲示板を作成する方法について解説しています。ここでは「名前」「メッセージ」を入力し投稿を行う掲示板を構成するコードを紹介します。全体の構造と処理の流れを見てみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

Javaで簡易な掲示板を作成する方法について解説します。実際にプログラムを書いて説明しているので、ぜひ理解しておきましょう。

 

なお本記事は、TechAcademyのJava講座の内容をもとに作成しています。

 

 

田島悠介

今回は、Javaに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

簡易な掲示板を作成する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

掲示板の設計

名前とメッセージを入力して投稿する簡易的な掲示板を作成します。掲示板の内容はデータベースに保存し、投稿機能でデータ追加、ページアクセスでデータを全件表示します。

作成するものは以下です。

  • データベース
  • データモデル
  • データベースアクセスオブジェクト(DAO)
  • 投稿したメッセージの一覧表示と、投稿フォームをもつ画面
  • データベースからデータを全件取得し、取得データを画面へ引き渡すサーブレット
  • 画面の入力フォームの内容を元に、データベースに一件データを追加するサーブレット

eclipse Maven MySQL を用いて実装します。またローカルのtomcatへデプロイをして動作確認を行います。

 

実際に作成してみよう

eclipseで動的WEBプロジェクトを新規作成してからMavenプロジェクトへ変換します。pom.xmlに以下3つの依存関係を追加します。

<dependencies>
  <dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.45</version>
  </dependency>
  <dependency>
    <groupId>org.apache.taglibs</groupId>
    <artifactId>taglibs-standard-impl</artifactId>
    <version>1.2.5</version>
  </dependency>
  <dependency>
    <groupId>javax.servlet.jsp.jstl</groupId>
    <artifactId>javax.servlet.jsp.jstl-api</artifactId>
    <version>1.2.1</version>
  </dependency>
</dependencies>

データベースとテーブルを作成します。

create database sample default character set utf8;

create table board (id int(11) auto_increment NOT NULL PRIMARY KEY, name VARCHAR(10) NOT NULL, content TEXT );

テーブルにメッセージ登録者の名前と、メッセージ内容、メッセージを識別するためのidを持たせます。idフィールドは自動採番とします。

データモデルをテーブルの定義に対応した構造で作成します。

package sample_board;

public class Board {

  int id;

  String name;

  String content;

  /**
  * @return id
  */
  public int getId() {
    return id;
  }

  /**
  * @param id セットする id
  */
  public void setId(int id) {
    this.id = id;
  }

  /**
  * @return name
  */
  public String getName() {
    return name;
  }

  /**
  * @param name セットする name
  */
  public void setName(String name) {
    this.name = name;
  }

  /**
  * @return content
  */
  public String getContent() {
    return content;
  }

  /**
  * @param content セットする content
  */
  public void setContent(String content) {
    this.content = content;
  }



}

 

 

DAOを作成します。全件取得のメソッドと一件追加のメソッドを用意します。

 

package sample_board;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class BoardDAO {
  // データベース接続と結果取得のための変数
  private Connection con;
  private PreparedStatement pstmt;
  private ResultSet rs;

  //全件取得用メソッド
  public List<Board> selectAllBoard() {
    // メソッドの結果として返すリスト
    List<Board> results = new ArrayList<Board>();

    try {
      //ドライバを読み込み、DBに接続
      this.getConnection();

      // Statementオブジェクトの作成
      pstmt = con.prepareStatement("select * from board");

      //Select文実行
      rs = pstmt.executeQuery();

      // 6. 結果を表示する
      while (rs.next()) {
        // 1件ずつCountryオブジェクトを生成して結果を詰める
        Board Board = new Board();
        Board.setId(rs.getInt("id"));
        Board.setName(rs.getString("name"));
        Board.setContent(rs.getString("content"));

        // リストに追加
        results.add(Board);
      }
    } catch (SQLException e) {
      e.printStackTrace();
    } catch (ClassNotFoundException e) {
      e.printStackTrace();
    } finally {
      this.close();
    }

    return results;
  }

  //1件登録用メソッド
  public void insertBoard(Board board) {

    try {
      //ドライバを読み込み、DBに接続
      this.getConnection();

      // Statementオブジェクトの作成
      pstmt = con.prepareStatement("insert into board(name,content) values(?,?)");

      pstmt.setString(1, board.getName());
      pstmt.setString(2, board.getContent());



      //Select文実行
      pstmt.executeUpdate();



    } catch (SQLException e) {
      e.printStackTrace();
    } catch (ClassNotFoundException e) {
      e.printStackTrace();
    } finally {
      this.close();
    }
  }



  public void getConnection() throws SQLException, ClassNotFoundException {
    //ドライバクラス読込
    Class.forName("com.mysql.jdbc.Driver");

    // DBと接続
    con = DriverManager.getConnection("jdbc:mysql://localhost/sample?useSSL=false&characterEncoding=utf8", "ユーザ", "パスワード");
    // ※ユーザとパスワードはMySQLに設定済みのものを記載してください。
  }

  private void close() {
    // 接続を閉じる
    if (rs != null) {
      try {
        rs.close();
      } catch (SQLException e) {
        e.printStackTrace();
      }
    }
    if (pstmt != null) {
      try {
        pstmt.close();
      } catch (SQLException e) {
        e.printStackTrace();
      }
    }
    if (con != null) {
      try {
        con.close();
      } catch (SQLException e) {
        e.printStackTrace();
      }
    }
  }
}

画面のjspは以下のようにします。

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<% request.setCharacterEncoding("UTF-8"); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>board</title>
</head>
<body>

  <h2>○○掲示板</h2>
  <table border="1">
    <tbody>
      <tr>
        <th>id</th>
        <th>名前</th>
        <th>メッセージ</th>
      </tr>
      <c:forEach var="message" items="${list}" varStatus="status">
        <tr>
          <td><c:out value="${message.id}" /></td>
          <td><c:out value="${message.name}" /></td>
          <td><textarea><c:out value="${message.content}" /></textarea></td>
        </tr>
      </c:forEach>
    </tbody>
  </table>
  <br /><br />

  <form method="POST" action="<c:url value='/insert' />">
    <label for="name">名前</label><br />
    <input type="text" name="name"/>
    <br /><br />
    <label for="content">メッセージ</label><br />
    <textarea name="content"></textarea>
    <br /><br />
    <button type="submit">投稿</button>
  </form>



</body>
</html>

 

<c:forEach>タグを使って、取得データをテーブルに一覧表示します。入力フォームのactionで後で記載するinsertサーブレットを起動するようにします。

 

insertサーブレットは下記のようにします。

package sample_board;

import java.io.IOException;

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 SelectServlet
*/
@WebServlet("/insert")
public class InsertServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;

  /**
  * @see HttpServlet#HttpServlet()
  */
  public InsertServlet() {
    super();
    // TODO Auto-generated constructor stub
  }

  /**
  * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
  * response)
  */
  protected void doGet(HttpServletRequest request, HttpServletResponse response)
  throws ServletException, IOException {

  }

  /**
  * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
  * response)
  */
  protected void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {

    request.setCharacterEncoding("UTF-8");

    Board b = new Board();

    b.setName(request.getParameter("name"));
    b.setContent(request.getParameter("content"));

    BoardDAO boardDAO = new BoardDAO();

    //1件追加
    boardDAO.insertBoard(b);

    //追加後トップページへリダイレクト
    response.sendRedirect(request.getContextPath() + "/toppage");

  }

}

 

最後にトップページを表示するサーブレットです。

package sample_board;

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;

/**
* Servlet implementation class SelectServlet
*/
@WebServlet("/toppage")
public class SelectServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;

  /**
  * @see HttpServlet#HttpServlet()
  */
  public SelectServlet() {
    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");

    BoardDAO boardDAO = new BoardDAO();

    //全件取得
    List<Board> list = boardDAO.selectAllBoard();

    request.setAttribute("list", list);

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

  }

  /**
  * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
  * response)
  */
  protected void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {

    doGet(request, response);
  }

}

 

サーバへデプロイし

http://localhost:8080/sample_board/toppage

へアクセスし、掲示板の表示と登録機能を確認しましょう。

本サンプルは簡易的なものですので、こちらを元に投稿内容を充実させたり、バリデーションをかけたり、画面装飾をつけたりとアレンジをしてみてください。

 

[PR] Javaで挫折しない学習方法を動画で公開中

監修してくれたメンター

長屋雅美

独立系SIerで7年勤務後、現在はフリーのエンジニアとして自宅をオフィスとして活動しています。
JavaやC♯、shellscriptを用いた開発を主に担当し、TechAcademyではJavaコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

オンラインのプログラミングスクールTechAcademyでは、Java講座を開催しています。

JavaやServletの技術を使ってWebアプリケーションの開発を学ぶことができます。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間で習得することが可能です。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。