フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

【Java DB】Webアプリケーションサンプル

スポンサーリンク

スポンサーリンク

以前、Springを使ってDBのデータを画面に表示する記事を書きましたが、ログイン、一覧、更新画面まで作成したのでサンプルを紹介します。

 

 

今回のサンプルでできること

使う技術は多いですが

・ポートフォリオっぽい画面を表示

・ログイン画面(DBのID、パスワードをみてログイン可否)

・一覧画面(ログインした後、DBのデータを表示して一覧画面を表示、ページャー、フィルタも使える)

・更新画面(一覧で選択したデータを更新、削除または新規登録)

 

環境

環境は以下の通りです。

・eclipse Oxygen

・tomcat 9.0

・java 9

・Docker

・MySQL 5.6

 

※あとPCはMACなのと、言語を英語にしてるのでそこはすいません。

 

eclipse

eclipseをインストールしてください。

あとSpringを使うのでプラグインも必要なので下記記事を参考に。

【Java】Eclipse + Spring(STS) でMVCサンプル簡単作成 - フリーランス チャレンジ!!

 

 

DataBase

DBは好きにインストールしてください。

個人的にはDockerにDB(MySQL)をインストールするのがすごく楽ですし、Dockerは覚えておいて損はないのでチャレンジした方がいいかなーと思います。

【Docker入門】5分でMySQLのDB、テーブル作成 - フリーランス チャレンジ!!

 

DBを作成したら下記SQL文でテーブルを作成してください。

※下記はDB名を"test_mysql"としてるので適宜変えてくださいね。

gist6b68c7ab5adee45a34d155a306b7f83e

 

 次にデータも入れてください。

gista43e808ab58f4dfee8b345f422692c75

  

eclipseにインポート

gitから直接cloneしてeclipseにインポートします。

f:id:ksakae1216:20191218215503p:plain

 

f:id:ksakae1216:20191218215517p:plain

 

f:id:ksakae1216:20191218215727p:plain


URIに下記を入力

gistc0f85a6930c05066cca93848abe9aeb7

 

f:id:ksakae1216:20191218215835p:plain


そのままNextボタンを押下

f:id:ksakae1216:20191218220123p:plain

 

f:id:ksakae1216:20191218220348p:plain

 

何かいろいろやるので終わったらNextボタン押下

f:id:ksakae1216:20191218220555p:plain

 

これで無事eclipseにインポートされます。

 

動かすための準備

インポートしたプロジェクトを右クリックして「Maven」→「Update Project」を選択してダイアログが出てくるのでOKボタンを押下。

f:id:ksakae1216:20191218220926p:plain


 プロジェクトを右クリックして「Run As」→「Maven Clean」を選択してCleanを実行。

f:id:ksakae1216:20191218221315p:plain

 

 プロジェクトを右クリックして「Run As」→「Maven install」を選択してbuildを実行。

f:id:ksakae1216:20191218221342p:plain

 

Tomcat設定

次にWebサーバーを設定します。

事前にTomcatをローカルにダウンロードしてください。

Apache Tomcat® - Apache Tomcat 9 Software Downloads

 

プロジェクトを右クリックして「Run As」→「Run on Server」を選択。

f:id:ksakae1216:20191218221704p:plain

 

Webサーバーを選択できるので、ダウンロードしたTomcatのバージョンを指定します。

今回は、Tomcat9。

f:id:ksakae1216:20191218222130p:plain

 

Finishボタン押下すると、Tomcatが起動してHello World画面がeclipse内に表示されると思います。

 

次に「Servers」→「Tomcat v9.0.5」→「Add and Remove」を選択。

f:id:ksakae1216:20191219075017p:plain

 

今回のプロジェクト「web-sample」を追加してFinishボタンを押下してください。

f:id:ksakae1216:20191219075352p:plain

 

これで準備完了!!

 

動作確認

 さて動作確認です。

 

ブラウザに下記URLを入力するとポートフォリオっぽい画面が表示されます。

gist7ea5ef810ed4e31df9d7a955b099cf8f

f:id:ksakae1216:20191219075850p:plain

 

 さらに下記URLでログイン画面。

gist8763aa97a0215e7c4ffab66b6cfa2735

f:id:ksakae1216:20191219080605p:plain

 

ログインID、パスワードはloginテーブルにinsertした値(testlogin, testpass)です。

入力してEnterボタン押下で一覧画面に遷移します。

f:id:ksakae1216:20191219080633p:plain

 

一覧画面の機能としては下記の通り。

・画面右上のログアウトボタン押下でログイン画面に遷移

・1ページの表示件数変更(10, 25, 50, 100)

・データの検索(1文字ずつ入力する毎にフィルタされます)

・テーブルの列名(ユーザーID、名前・・・)をクリックでソート

・新規登録ボタンで更新画面遷移(新規登録モード)

・ユーザーIDのリンク押下で更新画面遷移(更新モード)

 

更新画面に遷移するとこんな感じです。

【新規登録】

f:id:ksakae1216:20191219081723p:plain

 

【更新】

f:id:ksakae1216:20191219081741p:plain

 

最後に

ボリュームは少しありますが1つずつ丁寧にやってけば大丈夫です。

なかなか、JavaでDBのデータを画面に表示するサンプルってネットにたくさんあるんですがうまくいかないんですよね。

 

私の感覚としては環境、ライブラリのバージョン、手順もれが原因ではないかと思います。

この記事では1つずつ確認しながら作ってたので安心してこの記事通りに進めていただければと思います。