Laravelの無料チュートリアル③つぶやきの作成と保存と表示
425 回閲覧されました
みなさんこんにちは、jonioです。
今回はつぶやきを作成するページでつぶやきを作成してそれを保存して作成したつぶやきの一覧を表示するまでの解説です。
1回目の解説から読んで欲しいのですが読んでない方は↓からどうぞ。
今回から難しく感じるはずですが頑張って下さい。
まずはつぶやきの作成と保存です。
目次
つぶやきの作成と保存する時の考え方
ユーザーがつぶやきを投稿する時をイメージして欲しいのですがつぶやきを投稿するページに移動してつぶやきを作成して保存します。
という事は以下でルーティング・コントローラー・ビューの処理が必要になります。
- つぶやきを投稿するページの表示
- つぶやきの保存
つぶやきの作成はつぶやきを投稿するページでやるのでつぶやきを作成するためのルーティング・コントローラー・ビューの処理は必要ないです。
ルーティングに関しては2回目の解説でリソースコントローラーを使っている場合はweb.phpの24行目しか書かなくていいいと説明したので書かなくていいです。
だからコントローラーを書きますがまずはつぶやきを投稿するページを表示するための記述をして次につぶやきの保存の記述をします。
つぶやきを作成するページを表示するコントローラー
前回の解説で処理を4つに分けているのがCRUDでLaravelでは細かく分けて7つにしていると解説しました。
- index : つぶやき一覧の表示
- create : つぶやきの作成
- show : 複数あるつぶやきの内の1つの表示
- store : 作成したつぶやきの保存
- update : つぶやきを編集した時の更新
- edit : つぶやきの内容の編集
- destroy : つぶやきの削除
つぶやきを作成するのは上から2つ目のcreateなのでPostController.phpのcreateアクションに記述します。
26行目を修正していて「post.create」ですがなぜこれになるかはターミナルで「php artisan route:list」をすれば分かります。
↓の赤枠です。
前回は説明しませんでしたがCRUDを細かく分けた7つのアクション名がpost.createのcreateやpost.indexのindexやpost.storeのstoreなどに対応します。
対応は下記になります。
- アクション名がindex : 表示するページはpost.index
- アクション名がcreate : 表示するページはpost.create
- アクション名がshow : 表示するページはpost.show
- アクション名がstore : 表示するページはpost.store
- アクション名がupdate : 表示するページはpost.update
- アクション名がedit : 表示するページはpost.edit
- アクション名がdestroy : vpost.destroy
今回はアクション名がcreateなので表示するページは「post.create」になります。
これでコントローラーはできたので次はビューを作ります。
つぶやきを作成するページを作る
既に作成したpostフォルダの下にcreate.blade.phpを作成します。
create.blade.phpを作成したら中身のコードを↓にします。
そして「http://localhost:8888/post/create」に接続しますが「/post/create」は↓の青枠から判断しました。
青枠の探し方ですがcreateアクションでのURLなので↑の一覧の中からcreateを探して見つけました。
このやり方をすればindexアクションならURLが「post」でdestroyアクションならURLが「post/{post}」と簡単に探す事ができると思います。（ネット上で探し方を教えている説明を見つける事ができなくて最初苦労しました）
話を戻してページに接続して表示が↓になれば大丈夫です。
コードの説明
HTMLに関しては説明しないので自分で調べて下さい。
分からないのが1行目・2行目17行目のはずなのでそれの説明をします。
1行目の@extendsは「ファイルをコピーしますよ」という意味になります。
どのファイルをコピーするかですが@extends(‘layouts.app’)のlayouts.appで「layoutsフォルダの中のapp.blade.php」をコピーするという意味です。
「.blade.php」は省略します。
今は@extends(‘layouts.app‘)ですがもし@extends(‘layouts.kkk’)だったら「layoutsフォルダの中のkkk.blade.php」をコピーするという意味になります。
次は2行目を説明しますが一旦app.blade.phpの中身を見ます。
79行目に「@yield(‘content‘)」がありますがcontentの所にcreate.blade.phpの@section(‘content’)〜endsectionの間の3行目〜16行目が入るという意味になります。
まとめて説明すると@extends(‘layouts.app’)でapp.blade.phpをコピーして@section(‘content’)〜@endsectionがapp.blade.phpの@yield(‘content’) に入りますよという意味になります。
コピーするけど部分的に内容を変えますよというイメージです。
難しく感じると思うのですが（私も最初は感じました）すぐ慣れるのでとりあえず「そんなもんだ」として見慣れていくか理解したいなら↓の記事を読めば理解が深まるかもしれません。
これでつぶやきを作成するページを表示する為の記述が終わったので次はつぶやきを保存するための処理です。
作成したつぶやきを保存する時はつぶやきを作成するページで「つぶやく」ボタンを押すだけでページは必要ないのでコントローラーだけを作成します。
この様に保存するとか削除するとか場合によってはページ（ビュー）が必要ない場合があります。
つぶやきを保存する為のコントローラー
コントローラーを書く前にモデルについて追加の説明をします。
2回目の解説でコントローラーがモデルに連絡してモデルがデータベースから情報を持って来ると説明しました。
つぶやきを保存する時はデータベースに保存するのですがコントローラーがモデルに連絡してデータベースに保存をします。
だからモデルを作成しないといけません。
モデルを作成するときのターミナルのコマンドは「php artisan make:model モデル名」です。
今回のモデル名はつぶやきの投稿なので「Post」とします。
またデータベースのテーブルにつぶやきを保存するためのカラムを作らないといけないのですがそれをマイグレーションファイルでする事ができるのでそれも作成します。
↓の赤枠がMAMPのデータベースのカラムです。
カラムが何かを知らない方は調べて下さい。
モデルと一緒にマイグレーションファイルを作成する時のコマンドは「php artisan make:model モデル名 -m」です。
だからコマンドは「php artisan make:model Post -m」とします。
コマンドを叩いたらマイグレーションファイルを編集してカラムを追加しますがbodyカラムを追加します。
マイグレーションファイルは「Laravelのプロジェクト > databaes > migrations > 本日の日付_create_posts_table.php」にあります。
マイグレーションファイルを開いて↓の記述をします。
18行目を追加しています。
「$table->text(‘body‘);」ですが「text」・「body」以外はそのまま書いていいです。
bodyは追加するカラム名です。
textはざっくりとした説明をすると長い文字列を使うカラムに対して使用します。
逆にタイトルみたいに短い文字列に使う場合はtextではなくstringにします。
とりあえずこれ位の理解でいいです。
18行目の追加が終わったらマイグレーションファイルの内容をデータベースに反映させる為に「php artisan migrate」を使います。
するとMAMPのphpMyAdminのpostテーブルにbodyカラムが追加されているのが確認できます。
それではPostController.phpに記述を追加しますが7つのアクションは↓でした。
- index : つぶやき一覧の表示
- create : つぶやきの作成
- show : 複数あるつぶやきの内の1つの表示
- store : 作成したつぶやきの保存
- update : つぶやきを編集した時の更新
- edit : つぶやきの内容の編集
- destroy : つぶやきの削除
保存するのは上から4つ目のstoreアクションなのでPostController.phpのstoreアクションのコードに記述します。
コードを↓にします。
41行目の「Post」ですがこれはPostモデルです。
Postモデルを使える様にする為に6行目の「use App\Models\Post; 」があります。（名前空間と言います）
App\Models\Postは階層構造になっていてuseがappフォルダの下にあるModelsフォルダの下にあるPost.phpを使いますという意味です。
41行目の「new Post();」でPostモデルのインスタンスを作成していてこれでデータベースのbodyカラムにデータを追加できる様になります。
「インスタンスの作成って何？」って思った方はPHPの内容なのですが理解をするか今回は「こんなもんか」と考えて先に進めて下さい。
42行目の「$posts->body = $request->body;」ですが「$posts->body」がpostテーブルのbodyカラムで「$request->body」がhttp://localhost:8888/post/createで書いたつぶやきの内容（↓の赤枠）です。
だから42行目は「↑の赤枠に書いた内容をpostテーブルのbodyカラムに入れますよ」という意味になります。
43行目で情報の保存をして44行目で情報の保存が終わったらつぶやきを作成するページに戻りますという意味になります。
ひとまずつぶやきを保存する為のコントローラーの記述は終わりましたがつぶやきを作成する為のページ（create.blade.php）もデータベースに情報を保存できる様にする為の記述を追加します。
create.blade.phpを開きます。
そしてコードを↓にします。
7行目の「method=”post”」のpostですが他にgetがあります。
postのざっくりとした説明はフォームの内容をURLに表示しない場合に使いgetはURLに表示してもいい場合に使います。
つぶやきの内容は個人情報であってURLに表示したくないのでpostを使います。
詳しくは↓を読んで下さい。
また7行目の「action=“{{route(‘post.store‘)}}“」ですが保存する為のURLですがターミナルで「php artisan route:list」のコマンドを叩けば見つける事ができます。
「{{route(‘post.store‘)}}」に「{{}}」がありますがこれはxss（クロスサイトスプリクティング）対策です。
ネットで調べればすぐに見つける事ができるので私は説明しませんがざっくりとした説明としてxssはハッキングです。
8行目の「@csrf」はcsrf（クロスサイトリクエストフォージェリ）対策でformタグを使う場合は必ず書かないといけなく書かなかったらエラーになります。
これもネットを探せば見つかりますがハッキングです。
PHPで直接書く事もできますが、その場合コードが大変になるけどLaravelだと{{}}や@csrfだけでできます。
Laravelはセキュリティ対策がしっかりしていてハッキングに強いから人気があるんだと思います。
これでつぶやきを作成する画面でつぶやきを作成して保存できるようになったので「http://localhost:8888/post/create」にアクセスして確認して下さい。
つぶやきを保存しても画面が変わらないと思いますがphpMyAdminのpostテーブルを見るとつぶやきを保存されているのが確認できます。
それではつぶやき作成するページでつぶやきを複数作成して下さい。
私は↓にしました。
それではつぶやきを表示します。
ルーティングは書かなくていいのでコントローラーとビューが必要になります。
ビューは2回目の解説で使ったindex.blade.phpを使います。
つぶやき一覧を表示する為のコントローラー
7つのアクションがありましたが一覧の表示はindexアクションだったのでPostController.phpのindexアクションを修正します。
20行目ですが「Post::all();」でPostモデルを使ってデータベースに保存した全てのつぶやきを取得します。
コントローラーからビューにURLを渡しますがその時にモデルが持ってきた情報も渡す事ができてそれが21行目の「compact(‘posts‘)」になります。
postsは20行目の$postsの$を取ったものです。
これでコントローラーは終わったので次はビューです。
つぶやき一覧を表示するビュー
index.blade.phpを修正します。
これで↓に「」アクセスすると↓になります。
コントローラーからビューに渡した変数（$posts）ですが3行目のforeach文で使っています。（foreach文を知らない人は調べて下さい）
8行目で「{{$post->body}}」がありますが「$post」がPostモデルの内容で「->body」がbodyカラムになります。
だから「{{$post->body}}」が「Postモデルのつぶやきの内容」という事になります。
今回はここまでにします。
次回はつぶやきの内容の編集と削除の解説をします。
今回の解説で難しいと思った方へ
今回の内容は1回目・2回目の解説と違って難しく感じたと思います。（私がLaravelを始めたての時は絶対に難しく感じたと思います）
プログラミングは慣れなので1回目に戻って最初からやり直してみて下さい。
そうすれば3回目の解説をまた見た時に難しいと思った印象が少しは薄れると思います。