i-Vinci TechBlog
株式会社i-Vinciの技術ブログ

入社したての新人がJavaのServletを用いてCRUDアプリを作ってみた！

皆さんはじめまして！業界未経験入社の中嶋です。
僕の会社ではナカジマが3人いるので、名前を呼ぶとみんな反応してくれます笑
先日、有給を使って6泊7日でタイに行ってきました！
マンゴーが大変甘くて美味しかったので、お土産にドライマンゴーを買ったのですが、酸っぱくて悲しかったです(ﾉД`)ｼｸｼｸ

今回は、入社したての新人でも簡単に作れるWebアプリを作っていきたいと思います！
以下のツールを使って開発環境を構築し、ユーザーアカウントのCRUDができるWebアプリを作っていきます。

■ Windows 10 ( Mac でも可)
■ Eclipse Version : 2023-12 (4.30.0)
■ Tomcat Version : 10.1.18
■ XAMPP Version : 8.0.30 / PHP 8.0.30
■ Apache Version : 2.4.58
■ MySQL (MariaDB) Version : 10.4.32

構成図

目次

長いので折りたたんでます。

CRUDとは？

CRUD とは 4 つの操作の頭文字を取ったものになります。

  • Create (作成): データを新たに作成します。通常、データベースに新しいレコードを挿入する操作です。
  • Read (読み取り): データを取得します。データベースから既存のデータを取得する操作で、クエリや検索が含まれます。
  • Update (更新): データを変更・更新します。データベース内の既存のレコードを変更するための操作です。
  • Delete (削除): データを削除します。データベースから既存のレコードを削除する操作です。

⇒CRUD アプリは、データベースや情報システムなどで、基本的なデータ操作のできるアプリになります！

環境構築

XAMPP 編

ダウンロード&インストール

  1. Cドライブ直下に C:\00_TechBlog\CRUDapp を作成します。
    ㌽ フォルダ名に日本語や長い文字列を含めると、プログラムが正常に動作しない可能性があります。

  2. XAMPP にアクセスし、バージョン：8.0.30 / PHP 8.0.30 を ダウンロード します。
    XAMPPDL

  3. ダウンロードされた xampp-windows-x64-8.0.30-0-VS16-installer.exe ファイルを開きます(実行)。

  4. ユーザーアカウント制御がでたら はい を押し、警告(Warning)も OK を押します。
    XAMPPDL

  5. Installation folder が出るまで Next を押します。
    ※ Select Components は デフォルトで問題ありません。
    XAMPPDL

  6. Installation folder がでたらインストール先フォルダを変更します。

    1. 変更前：C:\xampp
    2. 変更後：C:\00_TechBlog\CRUDapp\xampp
      XAMPPDL

  7. 残りの Setup 画面は Next を押して、Finish まで進めます。

    1. インストールが始まると結構長いです(体感は 10 分くらい？)。
    2. Finish画面ではチェックを付けたままにしておくと自動で、XAMPPのコントロールパネルが開きます。
      XAMPPDL
      起動場所：C:\00_TechBlog\CRUDapp\xampp\xampp-control.exe

Apache と MySQL 起動

  1. XAMPPコントロールパネルを開きます。
  2. Apache と MySQL の Start を押します。
    ApacheMySQL
  3. それぞれにアクセス許可を与えます。
    ApacheMySQL

phpMyAdmin 起動

  1. MySQL の Admin を押します。
    MySQL
    ※利用しない場合はXAMPPを閉じる前に必ず Stop を押し、停止します。

  2. phpMyAdmin が起動します。
    phpMyAdmin

ECLIPSE 編

ダウンロード&インストール(解凍)

  1. Pleiades All in One Eclipse 2023 から Windows x64 Java をダウンロード する

  2. ダウンロード後 pleiades-2023-12-java-win-64bit-jre_20231211.exe ファイルを開きます(管理者として実行)。

    1. ユーザーアカウント制御は はい を押します。 ※出ない場合もあります
    2. 詳細情報 を押します。 ※出ない場合もあります
    3. 実行 を押します。 ※出ない場合もあります

  3. 作成先フォルダを変更し 解凍 を押します（解凍が始まる...体感 5 分くらい？）。

    1. 変更前：C:\pleiades\2023-12
    2. 変更後：C:\00_TechBlog\CRUDapp\pleiades2023-12
      EclipseDL

ECLIPSE 起動

  1. C:\00_TechBlog\CRUDapp\workspace_CRUDapp フォルダを作成します。
  2. C:\00_TechBlog\CRUDapp\pleiades2023-12\eclipse\eclipse.exe を開きます(実行)。
  3. キャッシュのクリーンアップが開始されます(体感 1 分くらい)。
  4. ワークスペース- ディレクトリーを変更し、起動 を押します。
    1. 変更前：../workspace
    2. 変更後：C:\00_TechBlog\CRUDapp\workspace_CRUDapp
      EclipseDL

実装

データベース編

DB 作成

  1. C:\00_TechBlog\CRUDapp\xampp\xampp-control.exe を開きます(実行)。
  2. Apache と MySQL の Start を押します。
  3. MySQL のAdminを押します。
  4. データベース タブを選択します。
  5. tech_blog と入力し 作成 を押します。
    DB

テーブル作成

  1. SQL タブを選択し以下のクエリを実行します。
    ※やり直せるようにデータベースの削除から記載しますが、注意して取り扱ってください。

    -- 既存の tech_blog データベースがあれば削除
DROP DATABASE IF EXISTS tech_blog;

-- 新しい tech_blog データベースを作成
CREATE DATABASE tech_blog;

-- tech_blog データベースを使用
USE tech_blog;

-- 既存の r_user テーブルがあれば削除
DROP TABLE IF EXISTS r_user;

-- r_userテーブルの作成
CREATE TABLE r_user (
  USER_NO INT AUTO_INCREMENT NOT NULL, -- ユーザー番号（自動採番）
  USER_ID INT NOT NULL, -- ユーザーID（必須）
  USER_NAME VARCHAR(255) NOT NULL, -- ユーザー名（必須）
  USER_PASSWD INT(8) NULL, -- パスワード（任意）
  USER_BIRTHDAY DATE NULL DEFAULT NULL, -- 誕生日（任意）
  DELETE_FLAG BOOLEAN NOT NULL DEFAULT false, -- 削除フラグ（false: 有効, true: 削除済み）
  PRIMARY KEY (USER_NO) -- 主キーはユーザー番号
) ENGINE = InnoDB;

オートインクリメントとは

  1. オートインクリメント（自動採番）は、データベースに新しい行を挿入する際に、その行のプライマリキーの値を自動的に増分させる機能です。主にプライマリキーの値を一意にするために使用されます。

メリット:

  • 各行に一意の数値が割り当てられるため、データの一意性が確保されます。
  • データの管理が容易になります。
  • 同じ値が誤って挿入されるリスクが低減します。

デメリット:

  • データベースは新しい行の値を自動的に増分します。特定の値から始めたい場合は、初期値の管理が必要になることがあります。
  • 分散環境や複数のデータベースサーバーを使用する場合、値の重複により競合や同期の問題が発生する可能性があります。

⇒オートインクリメントを利用することで、データベースの管理がより効率的になり、データの整合性を保つことができます。

データ挿入

  1. SQL タブを選択し以下のクエリを実行する

    -- レコードの挿入
INSERT INTO r_user (USER_ID, USER_NAME, USER_PASSWD, USER_BIRTHDAY, DELETE_FLAG)
VALUES
( 20240101, '20240101', 20240101, '2024-01-01', 'false'),
( 20240102, '20240102', 20240102, '2024-01-02', 'false'),
( 20240103, '20240103', 20240103, '2024-01-03', 'false');

ソースコード編

動的 WEB プロジェクト作成

  1. ファイル(F)⇒ 新規(N)⇒ その他⇒ 動的 Web プロジェクト の順に押します。
  2. 新規動的 Web プロジェクト
    1. プロジェクト名：CRUDapp
    2. その他はデフォルトのまま
      プロジェクト作成
      プロジェクト作成
  3. web.xml デプロイメントにチェックを付けます。
    プロジェクト作成
  4. CRUDapp のプロジェクトが作成されます。

ソースコードの追加

  1. i-Vinci_Blog-Java-CRUD-Appsリポジトリ からダウンロードしたsrcフォルダをC:\00_TechBlog\CRUDapp\workspace_CRUDapp\CRUDapp配下にペーストし、置き換えます。

  2. Eclipseのプロジェクト・エクスプローラーをリフレッシュします。

    プロジェクト作成

プロジェクトルート

  1. src配下のプロジェクトルートが以下と同じか確認します。

    C:\00_TechBlog\CRUDapp\workspace_CRUDapp\CRUDapp ※一部省略
|__ src
  |__ main
     |__ java
     |   |__ jp
     |      |__ co
     |         |__ controller
     |         |   |__ UserAddServlet.java
     |         |   |__ UserDeleteServlet.java
     |         |   |__ UserDeleteServlet_v1.java
     |         |   |__ UserEditServlet.java
     |         |   |__ UserRestoreServlet.java
     |         |   |__ UserServlet.java
     |         |__ model
     |            |__ DatabaseConnector.java
     |            |__ User.java
     |            |__ UserDao.java
     |__ webapp
        |__ META-INF
        |   |__ MANIFEST.MF
        |__ WEB-INF
        |   |__ lib
        |   |   |__ mysql-connector-j-8.3.0.jar(この後の手順で追加)
        |   |__ web.xml
        |__ login.jsp
        |__ userAdd.jsp
        |__ userEdit.jsp
        |__ userList.jsp

MVC モデルとは

MVC（Model-View-Controller）モデルは、ソフトウェア開発におけるデザインパターンの一つであり、アプリケーションの内部構造を構築するために使用されます。このモデルは、アプリケーションを3つの主要なコンポーネントに分割します。

  • Model（モデル）: ビジネスロジックやデータ処理を担当する部分で、データの操作や更新、バリデーションなどの機能が含まれます。
  • View（ビュー）: ユーザーインターフェースを表示する部分で、データの表示やユーザーからの入力を受け付けます。
  • Controller（コントローラ）: ユーザーからの入力を受け取り、それに基づいてModelとViewを制御する部分で、ビジネスロジックとユーザーインターフェースの間の仲介役として機能します。

⇒MVCモデルは、アプリケーションの構造化とメンテナンス性を向上させるために使用され、特に大規模なプロジェクトや複雑なアプリケーションに適しています。

フロントエンド（JSP）

ユーザーインターフェースの表示とユーザーの入力を受け付けます。
ユーザーからの情報をサーバーに送信し、結果を表示します。

View処理詳細
login.jspログイン画面
userAdd.jsp新規データ入力画面
userEdit.jspデータ編集画面
userList.jspデータ一覧画面(削除・復元画面)

バックエンド（Java/Servlet）

CRUD 操作やビジネスロジックを担当します。
データベースとの通信やデータの処理は主にここで行います。

controller処理詳細
UserAddServlet.javaデータの新規追加
UserDeleteServlet.javaデータの物理削除※1
UserDeleteServlet_v1.javaデータの論理削除※1
UserEditServlet.javaデータの編集
UserRestoreServlet.javaデータの論理削除の復元
UserServlet.javaデータの一覧表示

※1 論理削除と物理削除の違い

  • 論理削除: データを残して削除フラグを立てる。復元可能。
  • 物理削除: データを完全に削除。復元不可。
model処理詳細
DatabaseConnector.javaデータベース接続情報
User.javaユーザー情報
UserDao.javaデータベース操作

Mysql ドライバーの追加（超重要）

  1. MySQL Community Downloads にアクセスした後、Connector/J 8.3.0 の Select Operating System : Platform Independent を選択し、ダウンロードする。

  2. ダウンロードされたzipファイルを解凍し、mysql-connector-j-8.3.0.jar ファイルをコピーする。

  3. C:\00_TechBlog\CRUDapp\workspace_CRUDapp\CRUDapp\src\main\webapp\WEB-INF\lib 配下にペーストする。

  4. mysql-connector-j-8.3.0.jar ファイル⇒ 右クリック⇒ ビルド・パス(B) ⇒ビルド・パスに追加(A) の順で押す

    Mysqlドライバー

  5. 参照ライブラリーに追加される

    Mysqlドライバー

Maven プロジェクトへ変換（超重要）

元々動的プロジェクトではMySQLと接続が困難と勘違いしていたため。現段階では変換しなくても接続できるため不要

pom.xml：マッピングや設定

同上のため不要

実行編

Webサーバーの実行(画面表示)

  1. Eclipse を開く。
    C:\00_TechBlog\CRUDapp\pleiades2023-12\eclipse\eclipse.exe (実行)
  2. リソースをサーバーに追加する。 Tomcat10_Java21 ⇒右クリック ⇒追加及び除去(A) の順で押す
    Webサーバーの実行
  3. CRUDapp ⇒追加 ⇒完了 の順で押す
    Webサーバーの実行
  4. /CRUDapp/src/main/webapp/login.jsp ファイル ⇒右クリック ⇒デバック ⇒1サーバーでデバック の順で押す
    Webサーバーの実行
  5. Tomcat10_Java21 ⇒☑このプロジェクトを実行するときは常にこのサーバーを使用(P) ⇒完了(F) の順で押す
    Webサーバーの実行
  6. Googleなどのブラウザで http://localhost:8080/CRUDapp/login.jsp Login画面が開けば成功
    Webサーバーの実行

DB接続

  1. XAMPP Control Panelを開く
    C:\00_TechBlog\CRUDapp\xampp\xampp-control.exe (実行)
  2. MySQL の Start を押す
  3. ブラウザの Login ボタンを押下後、 User List 画面にデータが挿入されていれば成功
    一覧・削除画面

知識をくれたサイト

既存の r_user テーブルを削除

   -- 1~3のやってることは一緒！
   -- 1
   DELETE FROM `r_user`;
   --auto_increment（オートインクリメント）の連番をリセット
   ALTER TABLE `r_user` auto_increment = 1;
   -- 2
   DROP TABLE `r_user`;
   -- 3
   DROP TABLE IF EXISTS `r_user`;

参考サイト：SQL文 DELETE・TRUNCATE・DROPの違い, AUTO_INCREMENT の使用

Mavenプロジェクトでのアプリの作り方

知識がないと動的Webプロジェクトを作った後にMavenプロジェクトに変換するミスをします。
参考サイト：Eclipseを使ってTomcat+JSP+Servlet+MySQLでメモアプリ作成

MySQL接続方法

今はこんな簡単に接続できます。時代の進歩は恐ろしい、、、
参考サイト：【Java】MySQLを絶対に接続させたい!!!～JDBCドライバの取得とJARファイル位置について～

MySQLでのエラー対処法

大事なデータがあるのにMySQLが起動しない事があり、環境構築をやり直せれば良いですが、そうもいかないとき助かりました。
原因を探ってもなかなかエラーにたどり着けないですよね。
参考サイト：XAMPP で MySQL が予期せずシャットダウンするエラー

最新記事