Javaで作るサンプルWebアプリケーション

2021/10/06：DBをMysqlからPostgreSQLに変更しました。

今回のチュートリアルではサーブレットとjspを使ってWebアプリケーション(Todoアプリ)を開発していく方法を解説します。
この記事を読むことでサーブレットやjspの使い方そしてデータベースとどのように連携するのかということがわかります。

開発環境は以下のようになります。統合開発環境としてeclipseを使用します。データベースにPostgreSQLを使用します。(2021年10月6日MySQLからPostgreSQLに変更しました）

macOS Catalina 10.15.7
Java 8
Tomcat 8
psql (PostgreSQL) 13.4

その他の機能はこちらにまとめています。
ご質問等あればこちらのTwitterアカウントまでお願いします。

「独学だと何から勉強したら良いかわからない」という方にはDig Skillがおすすめです！
Dig Skillでは月1000円でオリジナルのカリキュラムを使ってWebアプリの開発方法を学ぶことができます！30日間の無料体験もあるので、公式サイトをチェックしてみてください！

Eclipseでの事前準備
1. EclipseでWebアプリプロジェクトの作成
2. データベースの準備
次回予告

Eclipseでの事前準備

EclipseでWebアプリプロジェクトの作成

アプリの開発を進める前にまずは準備をしていきます。
Eclipseを開いて新規プロジェクトを作成します。この時普通にJavaプロジェクトを作成するのではなく「その他」を選択します。

すると新しいタブが開くので「Web」の中にある動的Webプロジェクトを選択し「次へ」を押します。

プロジェクトの初期設定をするタブが出現するのでプロジェクト名を入力した後、ターゲット・ランタイムでTomcat8（Java８）を選択します。

次の画面は何もせず次へを選択します。

最後にチェックマークを入れて、完了をおします。

これでプロジェクトの作成が終わりました。次にデータベースの準備を進めていきます。

データベースの準備

次にPostgreSQLの方で設定を行なっていきます。データベースの作成を行います。

PostgreSQLが起動した状態でターミナルで以下のコマンドを実行します。
先頭の「$」はターミナルでコマンドを実行していることを表します。
実際に入力する必要はありません。

PostgreSQLでのデータベース作成方法はこちらの記事で解説していますので、こちらも参考にしてみてください。

$ createdb tododb -O uha-blog

データベースを作成した上でテーブルの作成を行います。
先ほど作成したデータベースに接続しましょう。

$ psql -U uha-blog tododb

接続に成功すると「$」が「tododb=>」に変わります。
変わっていたら接続に成功しています。
接続した上でテーブルの作成を行います。

今回作るテーブルはそれぞれのTodo項目を管理するためのidをint型、todoをvarchar、期限を管理するtimeLimitをdate型として作成しました。

tododb=>create table todo(id SERIAL PRIMARY KEY, todo varchar(255) not null, timeLimit timestamp );

最初にデータをいくつか入れておきます。

insert into todo(todo, timeLimit) values('create todo app', '2021-06-30'), ('Read book', '2021-05-31'), ('Cook lunch', '2021-05-31');

正しくデータが入っているか確認してみます。

select * from todoTable;

以下のように表示されたら今回の作業は完了です。

+----+-----------------+------------+
| id | todo            | timeLimit  |
+----+-----------------+------------+
|  1 | create todo app | 2021-06-30 |
|  2 | Read book       | 2021-05-31 |
|  3 | Cook lunch      | 2021-05-31 |
+----+-----------------+------------+