【Java】サンプルWebアプリの作り方をコード付きで解説！

今回のチュートリアルではサーブレットとjspを使ってWebアプリケーション(Todoアプリ)を開発していく方法を解説します。

サーブレットとjspはJavaでWebアプリを開発する際に活用される技術です。
この記事を読むことでサーブレットやjspの使い方そしてデータベースとどのように連携するのかということがわかります。

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

Eclipseのインストールはこちらの記事を参考にしてみてください。

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

Udemyの動画講座でわかりやすくサーブレットを勉強する

Eclipseでサンプルwebアプリの準備をする
1. EclipseでWebアプリプロジェクトの作成
2. データベースの準備
次回予告

Eclipseでサンプルwebアプリの準備をする

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 |
+----+-----------------+------------+