ketyiaの作ってみた

このサイトでは作ってみたことを記事にまとめていきます!

Laravelでイベントの出席管理システムを作成してみる!②システム設計篇

こんにちは!Keitaです。

PHPフレームワーク「Laravel」を使用した複数人体制のプロジェクトがあり、そのアウトプットとして、開発工程を記事にまとめていきたいと思います。

今回は、前回の「作成物の紹介と開発環境を構築する」の続きから、設計の部分であるデータベースの設計と画面の設計についてまとめていこうと思います。

それでは、始めていきます!

データベース設計


システムの基盤となるデータベースを先に設計します!

テーブルは、下記5つ用意します!

・ユーザ //Laravelの既存認証Bleezeを使用
・時間テンプレート
・イベント
・出席パスワード
・出席者

これをうまい感じでリレーションでつないでいきます!
A5m2というアプリでER図を作成します。

 


テーブルはこのように作成していきます。

フレームワークでは、migrateという方法でテーブルを作成するので、MySQLは今回使用しません!ここは後程~

では次進みましょう!

画面設計


画面設計を行っていきます。

設計通りに作成できる保証はありませんが、こんな感じで作ろう!というのを決めておきます!

デザインはFigmaで作っていきます。
画面としては「イベント管理者」と「イベント受講者」の2パターンで作成していきます!

「イベント管理者」の画面はこのように作成しました!
興味ありましたら、こちらを見てみてください。
※画像は一部を切り取りました


「イベント受講者」はこちらです!
興味ありましたら、こちら見てみてください。


こんな感じに作成出来たら素敵ですね。。
とりあえず設計としてはこんな感じです!

では、最後にLaravelで使うDBの設定を行って、システムの設計を終了にします

LaravelのDB設定


では、DBの設定をしていきます。

ここでは、以下のことをしていきます。
・Cloude9内にMariaDBをインストール
・Laravelで使用するデータベース名とユーザを設定

コマンドに関しては下記を参考にしています。

https://github.com/yamazakidaisuke/GsCodeSample/blob/master/AmazonLinux2_PHP8_Laravel9


では、MariaDBのインストールから開始していきます。
下記コマンドを実行していきます

//MariaDBをインストール
sudo amazon-linux-extras install mariadb10.5 -y
//起動
sudo systemctl start mariadb
sudo mysql_secure_installation

//MariaDB常時起動
sudo systemctl enable mariadb


これでインストールはできるはずです。

続きまして、DBの作成とユーザの作成をします。

下記コードを実行していきます。
値は置き換えてください!

//MySQLを起動
mysql -u root -p ※-u ->ユーザ名
root パスワード
//データベース作成
create database DBNAME;
//ユーザの作成
create user USERNAME identified by 'PASSWORD';
//権限追加 ※ここでは全特権を付けますが、それぞれの判断でお願いします。
grant all on *.* to USERNAME;


とこんな感じで実行していきます!
一応、権限の確認をしておきましょう。「show grants for USERNAME」で確認できます。


ALLになっているので、権限付与はできてますね!

これで、データベースの作成からユーザの作成まで完成しました。
セキュリティ面では推奨される方法ではないですが、とりあえずご了承ください~

では、これをLaravelの設定に反映させます。

.envファイルに下記の部分を更新していきます。
値は置き換えてください。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=DBNAME
DB_USERNAME=USERNAME
DB_PASSWORD=PASSWORD


これで実行してみてください。
実行方法は下記です。

//プロジェクトフォルダに移動
cd プロジェクト名
//実行
php artisan serve --port=8080

 


こんなコマンド結果になっていたら、実行成功です。
「エラーが出ていない=設定もとりあえずOK」と現段階では考えておきましょう!

ここまでやって、やっとプログラミングの作業に入れます。
長かったですね。。

では、次回は開発部分のプログラミングをメインに行っていきます。

ここまで読んでいただきありがとうございました。