Laravelの講義をする機会があったのですが、チュートリアルが古かったので最新に合わせたもの+ほとんどコピペなので私なりに考えた追加実習とGitHub及び本番環境に上げるまでです。
初心者は5時間、中級者は1時間半程度で出来る内容となっております。
Laravalはドキュメントが豊富なので書籍がなくても学習の幅はかなり広いと思います。
まずはタスクリストから作成しましょう。
- 準備するもの
- Unix環境 8000ポートは開けておくこと
- MySQL 出来れば5.7.9以降
charset=utf8mb4推薦
チュートリアル
基本のタスクリスト
まずはインストールしてきたら、.envをコピーしてMySQLの設定をしましょう。
$ composer create-project laravel/laravel quickstart --prefer-dist
$ cd quickstart
$ cp .env.example .env
$ php artisan key:generate
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=xxxxxxxx
DB_USERNAME=xxxxxxxx
DB_PASSWORD=xxxxxxxx
$ php artisan migrate
php artisan serveコマンドでhttp://127.0.0.1:8000にLaravel初期画面が表示されます。
$ php artisan serve
以下、チュートリアルで詰まるところや違いのあるところを書いていきます。
Routingの設定が最新バージョンだとapp/Http/routes.phpではなくroutes/web.phpで定義します。welcome.blade.phpを表示するように設定してあるので、コメントアウトしておきましょう。
use App\Task;
use Illuminate\Http\Request;
/*Route::get('/', function () {
return view('welcome');
});*/
Route::get('/', function () {
$tasks = Task::orderBy('tasks.created_at', 'asc')->get();
return view('tasks', [
'tasks' => $tasks
]);
});
...
$ php artisan serve
MySQLの設定がcharset=utf8の場合、
[PDOException] SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytesと表示されます。
Laravel5.4以上、MySQL5.7.7未満 でusersテーブルのマイグレーションを実行すると Syntax error が発生するの記事を参照に、MySQLのバージョン上げるか、my.cnfをcharset=utf8mb4に修正するか、app/Providers/AppServiceProvider.phpを修正しましょう。
編集が終わったら途中までマイグレーションされてしまっているのでマイグレーション実行前にテーブルを削除しましょう。念の為php artisan config:cacheも実行しておくと良いかと思います。
app/Providers/AppServiceProvider.phpを修正した場合、routes/web.phpのValidatorも変更しましょう。
エラーが出なかった場合は対応不要です。
Route::post('/task', function (Request $request) {
$validator = Validator::make($request->all(), [
//'name' => 'required|max:255',
'name' => 'required|max:191',
]);
...
}
...
チュートリアルのCSS部分はだいぶ端折ってあります。resources/views/layouts/app.blade.phpは追加実習のphp artisan make:authで自動生成できるので、一旦おいておきましょう。resources/views/tasks.blade.phpは以下の<div>を足しておくと、追加実習時に見た目が良くなります。
...
<!-- CSSとJavaScript -->
...
<!-- ナビバーの内容 -->
...
...
<!-- Bootstrapの定形コード -->
<div class="container">
<div class="col-sm-offset-2 col-sm-8">
<div class="panel panel-default">
<div class="panel-body">
...
</div>
</div>
</div>
</div>
...
チュートリアルは終了です。無事動いているでしょうか？
追加実習
ほぼコピペで終わってしまいました。物足りないと思うので自分の頭で考えて作ってみましょう。
ユーザ登録・認証の実装
LaravelのAuthはコマンドでも実装できます。以下のURLを参考に作成しましょう。
https://readouble.com/laravel/5.7/ja/authentication.html
タスクの登録・削除時に認証設定
ログインしていないとタスクの登録・削除が出来ないにしましょう。
上記URLより、認証済みユーザーの取得の項を参考に、Auth::check()がfalseの時はログインページに遷移するようにしましょう。
投稿ユーザ名表示
タスクを登録したときにユーザIDも登録するようにしましょう。
まずはDBマイグレーションを実施しtaskテーブルのカラムを増やしてみましょう。
$ php artisan make:migration add_user_id_to_tasks_table --table=tasks
...
public function up()
{
Schema::table('tasks', function (Blueprint $table) {
$table->integer('user_id')->after('name');
});
}
...
public function down()
{
Schema::table('tasks', function (Blueprint $table) {
$table->dropColumn('user_id');
});
}
...
$ php artisan migrate
次に、登録時にAuthのユーザIDを取得し、登録するようにします。以下のURLを参考に作成しましょう。
https://readouble.com/laravel/5.7/ja/queries.html
次に、一覧表示の時にユーザ名・登録日時を表示します。
ルーティングとビューをいじって実装してみましょう。
tasksとusersのidとnameが被ってしまうため、select()関数を使い別名を付けること、leftJoin()関数を使えば二つのテーブルからデータを取得できます。
タスクの変更の実装
変更ボタンを作成します。
Route::put('/task/{id}', ~~~)を作成し、タスクの内容を変更できるようにしましょう。
新しいページで入力する、resources/views/tasks.blade.phpを改造し横にフォームを表示する、どちらでもよいです。
...
Route::put('/task/{id}', function (Request $request, $id) {
if (!Auth::check()) {
return redirect('/login');
}
$user = Auth::user();
$validator = Validator::make($request->all(), [
'name' => 'required|max:255',
]);
if ($validator->fails()) {
return redirect('/')
->withInput()
->withErrors($validator);
}
$task = Task::where('id', $id)->first();
$task->name = $request->name;
$task->user_id = $user->id;
$task->save();
return redirect('/');
});
...
GitHub
GitHubに新規のリポジトリquickstart(名称は何でも良いです)を作成し、先ほど作成したLaravelプロジェクトをプッシュしましょう。
touch README.md
git init
git add .
git commit -m 'first commit'
git remote add origin git@github.com:xxxxxxxx/quickstart.git
git push -u origin master
本番環境にデプロイ
HerokuCLIを使ってLaravel+Mysqlを本番にデプロイの記事を参考に、無料のサーバーHerokuを使って本番環境にあげてみましょう。
- 設定する環境変数
- APP_DEBUG=false
- APP_ENV=production
- APP_NAME=xxxxxxxx
- APP_KEY=xxxxxxxx
- DB_CONNECTION=mysql
- DB_HOST=xxxxxxxx
- DB_DATABASE=xxxxxxxx
- DB_USERNAME=xxxxxxxx
- DB_PASSWORD=xxxxxxxx
終わりに
無事本番アップロードまで出来たでしょうか？
変更・削除が自分でなくても出来てしまうなどの欠点もあるので、いろいろと模索して編集してみてください。
お疲れ様でした