以前、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にインポートします。
URIに下記を入力
gistc0f85a6930c05066cca93848abe9aeb7
そのままNextボタンを押下
何かいろいろやるので終わったらNextボタン押下
これで無事eclipseにインポートされます。
動かすための準備
インポートしたプロジェクトを右クリックして「Maven」→「Update Project」を選択してダイアログが出てくるのでOKボタンを押下。
プロジェクトを右クリックして「Run As」→「Maven Clean」を選択してCleanを実行。
プロジェクトを右クリックして「Run As」→「Maven install」を選択してbuildを実行。
Tomcat設定
次にWebサーバーを設定します。
事前にTomcatをローカルにダウンロードしてください。
Apache Tomcat® – Apache Tomcat 9 Software Downloads
プロジェクトを右クリックして「Run As」→「Run on Server」を選択。
Webサーバーを選択できるので、ダウンロードしたTomcatのバージョンを指定します。
今回は、Tomcat9。
Finishボタン押下すると、Tomcatが起動してHello World画面がeclipse内に表示されると思います。
次に「Servers」→「Tomcat v9.0.5」→「Add and Remove」を選択。
今回のプロジェクト「web-sample」を追加してFinishボタンを押下してください。
これで準備完了!!
動作確認
さて動作確認です。
ブラウザに下記URLを入力するとポートフォリオっぽい画面が表示されます。
gist7ea5ef810ed4e31df9d7a955b099cf8f
さらに下記URLでログイン画面。
gist8763aa97a0215e7c4ffab66b6cfa2735
ログインID、パスワードはloginテーブルにinsertした値(testlogin, testpass)です。
入力してEnterボタン押下で一覧画面に遷移します。
一覧画面の機能としては下記の通り。
・画面右上のログアウトボタン押下でログイン画面に遷移
・1ページの表示件数変更(10, 25, 50, 100)
・データの検索(1文字ずつ入力する毎にフィルタされます)
・テーブルの列名(ユーザーID、名前・・・)をクリックでソート
・新規登録ボタンで更新画面遷移(新規登録モード)
・ユーザーIDのリンク押下で更新画面遷移(更新モード)
更新画面に遷移するとこんな感じです。
【新規登録】
【更新】
最後に
ボリュームは少しありますが1つずつ丁寧にやってけば大丈夫です。
なかなか、JavaでDBのデータを画面に表示するサンプルってネットにたくさんあるんですがうまくいかないんですよね。
私の感覚としては環境、ライブラリのバージョン、手順もれが原因ではないかと思います。
この記事では1つずつ確認しながら作ってたので安心してこの記事通りに進めていただければと思います。
コメント