こんにちは!
PHPのLaravelやJavaScriptでWeb開発をしているフリラーンスエンジニアのファドと申します!
こちらの記事は応用Laravel教材の第1回目の記事になります。
その他の応用Laravel教材を学習したい方は下記リンクから直接教材へ飛ぶことができます。
-
応用Laravel
【応用Laravel教材②】Laravelでタスク管理アプリ実装!〜テンプレートの作成からログイン画面作成編〜
-
応用Laravel
【応用Laravel教材③】Laravelでタスク管理アプリ実装!〜プロジェクト一覧機能実装からログイン後のリダイレクト先変更編〜
-
応用Laravel
【応用Laravel教材④】Laravelでタスク管理アプリ実装!〜タスク一覧機能実装編〜
-
応用Laravel
【応用Laravel教材⑤】Laravelでタスク管理アプリ実装!〜プロジェクト追加機能実装からタスク追加機能実装編〜
-
応用Laravel
【応用Laravel教材⑥】Laravelでタスク管理アプリ実装!〜タスク編集機能実装編〜
作成するアプリ
Laravelで基本のCRUD操作ができるようになったので、いよいよ本格的なアプリを作成していきましょう。
今回作成するアプリは、「タスク管理アプリ」です。
アプリ作成準備
さっそくLaravel教材で作成したfirst-app
と同じLaravel
ディレクトリにsailコマンド
でプロジェクトを作成していきましょう。
ターミナルで下記コマンドをLaravel
ディレクトリ上で実行してください。
Laravelプロジェクト作成
$ curl -s "https://laravel.build/task-app" | bash
実行が終わったらsail upコマンド
で起動させましょう。
ターミナルで下記コマンドをLaravel
ディレクトリ上で実行してください。
sail up
$ cd task-app && ./vendor/bin/sail up -d
これでタスク管理アプリのプロジェクト作成が完了しました。
phpMyAdminインストール
次にphpMyAdminのインストールをしていきましょう。task-app/docker-compose.yml
を下記の通り編集してください。
# For more information: https://laravel.com/docs/sail
version: '3'
services:
# --- ここから追加 ---
phpmyadmin:
image: phpmyadmin/phpmyadmin
links:
- mysql:mysql
ports:
- 8888:80
environment:
PMA_HOST: mysql
networks:
- sail
# --- ここまで追加 ---
laravel.test:
# --- 以下省略 ---
編集が完了したら、一旦開発環境をオフにします。
ターミナルで下記コマンドをtask-app
ディレクトリ上で実行してください。
$ ./vendor/bin/sail stop
もう一度起動させるので、ターミナルで下記コマンドをtask-app
ディレクトリ上で実行してください。
$ ./vendor/bin/sail up -d
これでphpMyAdminがインストールできたので、さっそくhttp://localhost:8888へアクセスして下記画像のような画面が表示されればOKです。
データベースにアクセスするためのユーザー名
とパスワードはtask-app/.env
に記述されているので確認してみましょう。
# --- 以上省略 ---
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=task_app
DB_USERNAME=sail
DB_PASSWORD=password
# --- 以下省略 ---
DB_〇〇
となっているところがデータベースに関する情報です。
データベース名がtask_app
でユーザー名がsail
、パスワードがpassword
となります。
phpMyAdminで上記のユーザー名とパスワードを入力してログインしてください。
task_app
というデータベースが作成されていればOKです。
初期設定
Laravelをインストールした直後にしておく初期設定をしておきましょう。
初期設定で行うことは下記の4つです。
- アプリケーション名変更
- タイムゾーン変更
- 言語設定
- 日本語ファイルダウンロード
アプリケーション名変更
それでは、アプリケーション名を変更するためにtask-app/.env
を下記の通り編集してください。
# APP_NAME=Laravelから下記に変更
APP_NAME="タスク管理アプリ"
APP_ENV=local
# --- 以下省略 ---
タイムゾーン・言語設定・日本語ファイルダウンロード
次はタイムゾーン・言語設定・日本語ファイルダウンロードを一気に行っていきます。
task-app/config/app.php
を下記の通り編集してください。
// 'timezone' => 'UTC'から下記に変更(72行目付近)
'timezone' => 'Asia/Tokyo',
// 'locale' => 'en'から下記に変更(85行目付近)
'locale' => 'ja',
// 'faker_locale' => 'en_US'から下記に変更(111行目付近)
'faker_locale' => 'ja_JP',
編集箇所はLaravel教材の時と全く同じです。
最後にアプリケーション名と、タイムゾーン、言語設定の変更をアプリケーションに反映させるためにターミナルにて、下記コマンドをtask-app
ディレクトリ上で実行してください。
$ ./vendor/bin/sail php artisan cache:clear && ./vendor/bin/sail php artisan config:clear
これでアプリケーション名とタイムゾーン、言語設定を変更することができました。
最後に日本語ファイルのダウンロードを行っておきましょう。
こちらはドキュメントにも載っていますが、下記3コマンドで完了します。
さっそくターミナルにて、下記コマンドをtask-app
ディレクトリ上で実行してください。
$ ./vendor/bin/sail php -r "copy('https://readouble.com/laravel/8.x/ja/install-ja-lang-files.php', 'install-ja-lang.php');"
$ ./vendor/bin/sail php -f install-ja-lang.php
$ ./vendor/bin/sail php -r "unlink('install-ja-lang.php');"
コマンド実行後、task-app/resources/lang/ja
ディレクトリが作成されていればOKです。
これで開発の準備は整ったので、さっそく開発していきましょう。
ログイン機能実装
まずはログイン機能を実装していきます。
Laravelにはログイン機能を実装するためにLaravel Breeze
が提供されています。
このLaravel Breezeを使用すると、たった数コマンドで認証機能が実装できてしまいます。
新規登録機能やログイン機能、ログアウト機能は認証機能と言われるので、覚えておきましょう。
それではさっそくLaravel Breezeを導入していきましょう。
ターミナルで下記コマンドをtask-app
ディレクトリ上で実行してください。
$ ./vendor/bin/sail composer require laravel/breeze
このコマンドでLaravel Breezeに関するデータがインストールされたので、次はそれらのデータをLaravelに反映させていきましょう。
ターミナルで下記コマンドをtask-app
ディレクトリ上で実行してください。
$ ./vendor/bin/sail php artisan breeze:install
コマンドの実行が終わると様々なファイルが追加されています。
追加されているファイルを覚える必要はありませんが、下記のようなファイルが追加されています。
app/Http/Controllers/Auth/AuthenticatedSessionController.php
app/Http/Controllers/Auth/ConfirmablePasswordController.php
app/Http/Controllers/Auth/EmailVerificationNotificationController.php
app/Http/Controllers/Auth/EmailVerificationPromptController.php
app/Http/Controllers/Auth/NewPasswordController.php
app/Http/Controllers/Auth/PasswordResetLinkController.php
app/Http/Controllers/Auth/RegisteredUserController.php
app/Http/Controllers/Auth/VerifyEmailController.php
app/Http/Requests/Auth/LoginRequest.php
app/View/Components/AppLayout.php
app/View/Components/GuestLayout.php
resources/views/auth/confirm-password.blade.php
resources/views/auth/forgot-password.blade.php
resources/views/auth/login.blade.php
resources/views/auth/register.blade.php
resources/views/auth/reset-password.blade.php
resources/views/auth/verify-email.blade.php
resources/views/components/application-logo.blade.php
resources/views/components/auth-card.blade.php
resources/views/components/auth-session-status.blade.php
resources/views/components/auth-validation-errors.blade.php
resources/views/components/button.blade.php
resources/views/components/dropdown-link.blade.php
resources/views/components/dropdown.blade.php
resources/views/components/input.blade.php
resources/views/components/label.blade.php
resources/views/components/nav-link.blade.php
resources/views/components/responsive-nav-link.blade.php
resources/views/dashboard.blade.php
resources/views/layouts/app.blade.php
resources/views/layouts/guest.blade.php
resources/views/layouts/navigation.blade.php
routes/auth.php
tailwind.config.js
tests/Feature/AuthenticationTest.php
tests/Feature/EmailVerificationTest.php
tests/Feature/PasswordConfirmationTest.php
tests/Feature/PasswordResetTest.php
tests/Feature/RegistrationTest.php
ファイル名や拡張子を確認すると、コントローラーやビューなどのファイルがインストールされていることがわかるかと思います。
次にターミナルで下記コマンドをtask-app
ディレクトリ上で実行してください。
$ ./vendor/bin/sail npm install && ./vendor/bin/sail npm run dev
実行に時間がかかることもありますが、このコマンドを実行することで認証に関する画面が無事に表示できるようになります。
試しにhttp://localhostへアクセスしてみると、画面右上にLoginボタン
とRegisterボタン
が表示されます。
「Log in」ボタンをクリックすると、下記のようにログイン画面が表示されます。
「Register」ボタンをクリックすると、下記のように新規登録画面が表示されます。
今のままだと画面は表示できるのですが、ユーザー情報を登録するテーブルが作成されていないので、新規登録やログインをすることはできません。
そのため、最後に認証に関するusersテーブル
などを作成するためにマイグレーションを行いましょう。
ターミナルで下記コマンドをtask-app
ディレクトリ上で実行してください。
$ ./vendor/bin/sail php artisan migrate
Laravel教材では削除したデフォルトのマイグレーションファイルが実行され、認証用のテーブルが作成されます。
実際に作成されるテーブルはfailed_jobsテーブル
、 migrationsテーブル
、password_resetsテーブル
、personal_access_tokensテーブル
、usersテーブル
の5つが作成されます。
今回使用するのはusersテーブル
です。
ユーザー作成
以上でLaravel Breezeの導入は終了ですが、新規登録やログインができることを確認しておきましょう。
http://localhost/registerへアクセスして、新規登録を行いましょう。
登録するデータは下記の通りです。
ラベル | データ |
---|---|
Name | fdsa |
fdsa@fdsa.fdsa | |
Password | fdsafdsa |
Confirm Password | fdsafdsa |
無事に登録が完了すれば、下記画面へリダイレクトされます。
右上のユーザー名fdsa
をクリックするとLog Outボタン
が出てくるのでログアウトしましょう。
http://localhost/loginへアクセスして、ログインを行いましょう。
ログイン情報は下記の通りです。
ラベル | データ |
---|---|
fdsa@fdsa.fdsa | |
Password | fdsafdsa |
ログインが無事に完了すれば、下記画面へリダイレクトされます。
これで新規登録とログイン、ログアウトの動作確認が完了しました。
テストデータ作成
次にユーザーのテストデータを作成しておきましょう。
テストデータの作成はLaravel教材の時と全く同じです。
まずはシーダーファイルを作成しましょう。
ターミナルで下記コマンドをtask-app
ディレクトリ上で実行してください。
$ ./vendor/bin/sail php artisan make:seeder UsersTableSeeder
作成したtask-app/database/seeders/UsersTableSeeder.php
を下記の通り編集してください。
<?php
namespace Database\Seeders;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB; // ここを追加
class UsersTableSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
DB::table('users')->insert([
'name' => 'test',
'email' => 'test@test.test',
'password' => bcrypt('testtest'),
'created_at' => date('Y-m-d H:i:s'),
'updated_at' => date('Y-m-d H:i:s'),
]);
}
}
Laravelでは、ユーザーのパスワード登録時にセキュリティの観点から必ず暗号化して登録します。
暗号化のためのヘルパーメソッドであるbcryptメソッド
も用意されており、簡単に暗号化することができます。
Laravelでユーザーのテストデータを作る際には、パスワードを暗号化することを覚えておきましょう。
次にtask-app/database/seeders/DatabaseSeeder.php
を下記の通り編集してください。
<?php
namespace Database\Seeders;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
/**
* Seed the application's database.
*
* @return void
*/
public function run()
{
$this->call([
UsersTableSeeder::class,
]);
}
}
これでusersテーブル
のテストデータを作成する準備が整いました。
それでは、ターミナルで下記コマンドをtask-app
ディレクトリ上で実行してください。
$ ./vendor/bin/sail php artisan db:seed
コマンドの実行が完了すると、ユーザー名test
というテストデータが作成されます。
念の為、皆さんはphpMyAdminなどで確認しておきましょう。
現在usersテーブル
には新規登録画面から登録したユーザー名fdsa
のデータとシーダーで登録したユーザー名test
の2つのユーザーデータが存在してることになります。
どちらのユーザーでもログインができるかなどは確かめておきましょう。
ID | ユーザー名 | メールアドレス | パスワード |
---|---|---|---|
1 | fdsa | fdsa@fdsa.fdsa | fdsafdsa |
2 | test | test@test.test | testtest |
・新規登録
http://localhost/registerアクセス
・ログイン
ログアウト後、http://localhost/loginへアクセス
次の教材
次の教材は下記から簡単に飛ぶことができます!
引き続きプログラミングを楽しんでいきましょう!
プログラミング学習サポートについて
「独学で挫折した。。。」
「一人でのプログラミング学習がしんどい。。。」
「未経験からエンジニア転職をしたいけど何をしたら良いかわからない。。。」
このような悩みをお持ちの方向けに、本教材作成者のファドがMENTAという学習サイトにてあなたのプログラミング学習とエンジニア転職を徹底サポートいたします!
サポート価格はなんと1日あたりたったの約300円!
教材で分からない箇所のサポートはもちろんのこと、本サイトで公開しているすべての課題の解答も公開しております。
また、MENTAで学習を終わらせていただいた方限定で懇意にしていただいている企業さんを紹介することもあります!
なお、サポート内容の詳細は下記の通りです。
- 目標設定
- マインドセット
- オリジナル教材見放題
- オリジナル課題見放題
- オリジナル課題の解答見放題
- 課題コードレビュー
- 教材への無制限質問
- 課題への無制限質問
- ポートフォリオ作成アドバイス
- 褒めのコーチング
いくつかのプランを用意させていただいておりますので、下記より一度ご覧ください!
コメント