いよいよ本格的にWebアプリケーションを作成します。
今回の開発ではWebアプリの定番CRUD操作も入ってきますし、Laravelのミドルウェアも使います。
また開発でも機能単位での開発になるのでこのタスクからは本格的にgit-flowを使うことが推奨されています。
参考：git-flow図解
git-flowはWeb開発の現場では当たり前に使われているそうなので、この機会に慣れておきたいですね！
#注意事項
2020年/20/19日現在Laravel 8のリリースにより最新版のLaravelを導入した場合本記事やリンク先の参考記事の通りの実装だと動かなくなる可能性があるのでLaravelのプロジェクト作成時には以下のコマンドで7.25.0で作成することをおススメします。
cd /var/www/html //まずはアプリを公開するnginxの公開ディレクトリに移動
composer create-project --prefer-dist laravel/laravel myapp2 "7.25.0" //Laravelを7.25.0バージョンで構築します
#まずは認証系を作っていきましょう
下記参考記事をなぞりながら認証機能を導入していきます
参考：[Laravel 6.x laravel/uiを利用してbootstrap 4を適用する] (https://blog.hrendoh.com/laravel-6-setup-bootstrap4-with-laravel-ui/)
cd myapp2
composer require laravel/ui "2.*" //フロント側のログインのテンプレートを一発で導入できるLaravel/uiを入れます
npm install
php artisan ui bootstrap --auth
npm install cross-env
npm install
npm run dev
npm run devでエラーが出た場合は下記コマンドで対応
rm ./package-lock.json
rm -rf ./node_modules/
npm install
補足： npm run devは導入したjsやcss等のライブラリやフレームワークをビルドするコマンド、上記の場合で言うとimportしたbootstrap関連のscss,jsファイルなどをまとめていい感じにpublicに配置してくれます。
なお、ビルドには多少時間かかるので面倒な場合は一先ずbladeとかに書きなぐっておいて、後ほどSassやjsファイルに突っ込んでビルドするのもいいかもしれないです。
参考：
dotenvとcross-envで環境変数を設定して開発環境の処理を切り替える
npm run devに関して：Readouble
ここまでやったら一先ず新しく構築したアプリへ公開ディレクトリを移しておきましょう
sudo vi /etc/nginx/conf.d/default.conf
/var/www/html/yps/public;
↓
/var/www/html/myapp2/public;
※3か所くらいあります
WebサーバーとPHP-FPMを再起動
sudo systemctl restart nginx && sudo systemctl restart php-fpm
キャッシュクリア
php artisan cache:clear &&php artisan config:clear && php artisan route:clear &&php artisan view:clear
composer clear-cache && composer dump-autoload --optimize
※上記のコマンドは割と使うので.bashrc等でエイリアスに指定しておくのがおススメ
オーナーとディレクトリ権限変更
sudo chown -R centos:nginx /var/www/
sudo chmod -R 777 storage/ bootstrap/cache/
※このコマンドも新しいファイルやディレクトリ作ったり、ファイルを移動したりすると稀に使うのでエイリアス登録推奨
ここまでやると画面右上にLOGIN REGISTERという認証用のリンクが出ているはずです。
**いざ！アプリ構築！** いよいよ、アプリを構築していきます。 とはいえ、いきなりだと何から手を付けていいか分からないと思うので、最初はハンズオンで…
php artisan make:model Task -m //-mオプションでマイグレーションファイルも同時に作成します
参考：Readouble:マイグレーション
（ザックリ言うとDBとやり取りするのを任せるファイル、このファイルを通じてLaravelではSQLのデータ型やカラムの構造などを含めたデータベース操作を行います）
アプリで使うデータベースを作成
mysql -u root -p
create database myapp2db;
exit
作成したDBをLaravelと連携させます
vi .env
//下記を編集
DB_DATABASE=myapp2db
DB_USERNAME=root
DB_PASSWORD="パスワード"
設定が終わったら実際に接続します
php artisan migrate
//念のためテーブルがちゃんと作られているか確認
mysql -u root -p -D myapp2db
show tables;
※tasksテーブルが作成されています
+--------------------+
| Tables_in_myapp2db |
+--------------------+
| failed_jobs |
| migrations |
| password_resets |
| tasks |
| users |
+--------------------+
あとは下記参考リンクのコードを模写しながらタスク管理アプリを実装します。
なお、本タスクのクリア要件は
- ユーザー登録後に送信されたメールで認証したユーザーのみログイン可能
- ログイン後にタスク一覧画面に変遷
- タスク一覧及び個別画面はログインしていないと見られない
- ログアウト機能の実装
だそうです。
参考：
サンプルソース(GitHub)
※サンプルソースに一部修正が必要な個所があります↓
クリア要件：画面の変遷
#補足
gmailによる認証はセキュリティの関係でハマりやすいのと、別アカウントを取る手間もあるのでおススメは下記ブログで紹介されているmailtrapというWebサービス。メール関係の実装のテストなんかに気軽に使えて便利です。
簡単にできてしまった方は追加機能開発をしてみるのがおススメです。（結構沼れます）
- タスクのソート機能
- 期限を過ぎたタスクの色変更
- メールでの期限通知
- 検索機能
- ユーザーにタスクを紐づけ
- その他モロモロ
私は
- ソート機能（ライブラリ使用）
- 表示色変更
- ユーザーに紐づけ（自分の物しか見られない）
上記に加えて下記参考リンクのカレンダー機能をガッチャンコしてみました（これがかなりの沼だった…）
具体的には上記参考リンクの臨時休業の設定に当たる部分を流用して簡易的なシフトの入力（日勤、夜勤、休み）を入力できるようにしました。
もう少し発展させて管理者画面から操作できるようにしてあげればシフト管理アプリとしても使えそうですね…今後の課題として作り込みをゆっくりやっていきたいと思います。
Task6は結構カスタマイズのしがいもあると思うので、是非色々自分好みのカスタマイズを行ってみましょう！