人気記事

SpringBoot

クイズアプリをSpringBoot+PostgreSQL+MyBatis+Thymeleafで作る(1)【環境構築】

更新日:

SpringBootの勉強としてクイズアプリを作ってみました。

完成したアプリ動画は以下です。

 

今回はWebアプリのプロジェクト作成とデータベース構築までを実施します。

 

開発環境

    OS: macOS Catalina

    フレームワーク:SpringBoot

 データベース:PostgreSQL 

    テンプレートエンジン:Thymeleaf

    O/Rマッパー:MyBatis

  ビルドツール:Maven

    IDE:Eclipse  Version: 2020-03

    

構成図

プロジェクト作成

Eclipseのファイル>新規>プロジェクトからSpring スターター・プロジェクトを選択します。

名前は今回はQuestionSampleとします。

プロジェクト依存関係は以下を選択します。

 ・Spring Boot DevTools

 ・Lombok

 ・MyBatis Framework

 ・PostgreSQL Driver

 ・Thymeleaf

 ・Spring Web

 

プロジェクトの作成が完了しました。

 

pom.xmlがMavenというビルドツールで使用する設定ファイルになっています。中身を見るとSpringBootのバージョン等が記載されています。

src/main/javaにサーバサイドのJavaファイルを作成していきます。src/main/resourceにフロントエンドで使用するHTML,CSS,JavaScriptを作成していきます。

データベース構築

application.propertiesの作成

まずはPostgreSQLデータベースを作成していきます。

src/main/resoures/application.propertiesに以下のコードを入力します。

server.portはブラウザから今回作成するアプリにアクセスする際に使用するポート番号です。「localhost:8085」でアクセスすることにします。

PostgreSQLデータベースにアクセスするポート番号は5432番とします。

データベース名はquizdbとします。

PostgreSQLのユーザ名とパスワードは両方ともpostgresとします。

 

データベース作成

PostgreSQLをインストールします。インストール方法は割愛します。

インストールしたらターミナルソフトを開いてデータベースの初期化を行います。

次にPostgreSQLを起動します。

postgresユーザに切り替えます。このユーザ名と先ほどのapplication.propertiesで設定したユーザ名は一致させます。

パスワードが聞かれたらpostgresと入力します。こちらのパスワードもapplication.propertiesと一致させます。

ユーザ名が切り替わると、 postgres=# が先頭になります。データベースを表示させてみます。

データベースの初期化状態ではpostgres,template0,template1というデータベースが存在しています。

次にquizdbという今回使用するデータベースを作成します。

再度、データベースを表示させます。

quizdbが作成されていることが分かります。

quizdbに接続してみます。

先頭が quizdb=# となりquizdbデータベースに接続できました。

 

問題テーブル question 作成

続いてテーブルを作成します。

今回、下表のカラムを持つテーブルquestionを作ることとします。

id question choice1 choice2 choice3 choice4 answer description answerd misstake

<各カラムの役割>

id:クイズのidを表す。

question:クイズの問題文

choice1〜choice4:選択肢

answer:正解の選択肢の番号

description:解説

answered:クイズに解答済かを表す。true:解答済。

       解答済以外の出題をするために使用する。

misstake:解答の正解・不正解を表す。true:不正解。

       結果集計の際の正解率を求めるために使用する。

 

テーブルを作成するために以下のコマンドをターミナルに入力します。

 

テーブルへデータ流し込み(SQL作成)

テーブルが作成できたら、今度はテーブルにデータを流し込みます。

src/main/resourcesの配下にquestion.sqlというファイルを作成し、試しに10問のクイズを入力します。

question.sqlをテーブルに挿入するために以下コマンドを実行します。

select文を用いてテーブル内容を確認します。

 

テーブルの作成が完了しました。

 

出題用テーブル my_quiz 作成

今回のクイズアプリでは最初に出題数を選択して、questionテーブルからその問題数だけを出題用テーブルmy_quizとして作成する設計とします。

出題用テーブルmy_quizの雛形を作成しておきます。

 

my_quizテーブルの作成が完了しました。

今回はここまでとして次回からWebアプリ製作に取り掛かります。

 

クイズアプリをSpringBoot+PostgreSQL+MyBatis+Thymeleafで作る(2)【サーバサイド〜SpringBoot起動まで】

 

 

 

 

-SpringBoot
-, , , ,

Copyright© ITエンジニアへの転身 , 2021 All Rights Reserved Powered by STINGER.