Laravelで簡易掲示板をつくってみた

2021年7月4日 11:47

1時間くらいの掲示板作成動画を10時間かけてやっと完成させたためテンションハイでなかなか眠れませんでした。どうもふぁみまです。

前回はLaravelインストールまでを行ったということで、今回は下記の方(もんしょーさん)の動画を参考に簡易掲示板を作ってみました！

Laravelインストールまでは自分で行ったのと、2020.8月時点の動画ということもあったためかちょこちょこ変更点もありました。

ということで、この動画について素人目線で躓いた部分を解説していこうと思います。

コードはGitHubに公開しているみたいなんですが、そもそも私はGitHubも使ったことのないド素人なので、概要欄にあったこの動画と同じ内容のブログ記事も参考に作ってみました。動画も記事も作成してくださっているので非常に参考になりました！！！感謝！！！！

前提条件がいろいろありますが、今回コードを記述していくこともあってテキストエディタが必要です。私はVSCodeを既にインストールしていたのですが、まだの方はインストールしてからがおすすめです！

それでは早速箇条書きでまとめてみます。

1. .envファイルの設定

MySQLを触ったことがなかったので、ここは悩みました・・・。自分の設定に合わせて.envファイルを修正するのですが、自分の設定とは・・・？となってしまいました。

実際の自分の設定の確認方法なんですが、まずはMAMPを起動した状態で「Open WebStart page」をクリックします。

そうするとMAMPのページが立ち上がってきてMySQLという下記のような記述があります。(これがだいたいデフォルトな気がする・・・)

この情報が自分の設定になるので、以下は記入できますね！

・DB_HOST⇒Hostの欄(localhost)を記入

・DB_PORT⇒Portの欄(3306)を記入

・DB_USERNAME⇒Userの欄(root)を記入

・DB_PASSWORD⇒Passwordの欄(root)を記入

最後にDB_DATABASEについてです。こちらは自分でMySQLでデータベースを作成する必要があります。

作成するにはさきほどのMAMPのページから「Tools」⇒「phpMyAdmin」を選択します。

phpMyAdminはMySQLを視覚的に操作することができるものです。

phpMyAdminを開いたら「Databases」をクリックします。（Databaseって複数形あるんだ・・・・ｗ)

クリックするとDatabaseの一覧と作成ボタンが出てきます。というわけでここで任意の名前でデータベースを作ってみましょう！

私は「sample」というデータベースを作成しました。他は文字コードを選択する部分だと思うのですが、とりあえずそのまま「utf8_general_ci」にしました。絵文字を使いたい！という方などは文字化けしてしまうみたいなので何がいいか調べてみてください～。私は絵文字等は使用しなくてもOKだったので特に「utf8_general_ci」でも動作に問題なかったです。

これで.envファイルでさきほど作ったDB名をDB_DATABASEに記入することで設定は完了です！

2. マイグレーション

マイグレーションとはDBのテーブル操作時に使っていくもの、だそうです。

私はマイグレーションコマンドを打ったときに「could not find driver」というエラーが出てきてしまいました。

それについてはこちらの方の記事で解決しました。どうやらまたphp.iniの設定が足りていなかったようです。

3. bootstrap導入

bootstrapは見た目の部分を補ってくれるとのことで、とりあえずデザインよりLaravelとPHPを勉強だ！という人にとって非常に便利です。

ですが「npm install && npm run dev」でまたエラーに・・・・。どうやらアップグレードでwebpack.mix.jsの仕様が変更になったみたいですね。

ちなみに私はこの動画で掲示板を作成する前にJavaScriptの勉強がてらnode.jsのインストールで試行錯誤してたので、もしかしたらいろいろ他にも別のエラーが出るのかもしれません・・・；；

npmとはなんぞや、node.jsってなんぞや状態なので、ここはもう少し勉強しようと思います。

4. ルーティング作成

ここですがLaravelのバージョンアップでweb.phpの記述方法が結構変わっていたようです。(ここでだいぶ時間を要しました)

/*
Route::get('/home', 'HomeController@index')->name('home');
*/
Route::get('/home', [HomeController::class, 'index'])->name('home');

/* Route::resource('posts', 'PostController', ['only' => ['index','show', 'create', 'store']]); */
Route::resource('posts', PostController::class);
/* Route::get('posts/edit/{id}', 'PostController@edit'); */
Route::get('posts/edit/{id}', [PostController::class, 'edit']);
/* Route::post('posts/edit', 'PostController@update'); */
Route::post('posts/edit', [PostController::class, 'update']);
/* Route::post('posts/delete/{id}', 'PostController@destroy'); */
Route::post('posts/delete/{id}', [PostController::class, 'destroy']);

一応前のコードも残しているんですが最終的にこんな感じで記述しました。

詳しくはこの方を参考にさせていただきました。

私の入れたLaravelはバージョン8以降だったんだ・・・、とバージョンすら確認できていない自分ですがこのまま突っ走ります(笑)

あ、web.phpの上部にuseを記述するのも忘れずに！

use App\Http\Controllers\HomeController;
use App\Http\Controllers\PostController;

5. コントローラー編集

ここで記述するPostControllerですが、どうやらこのあと出てくるモデル「Post.php」と「User.php」があるディレクトリの階層が動画の方と違うようで修正が必要でした。

動画ではapp直下にあったみたい？ですが、私はapp/Http/Controllers/Models配下にありました。

これに合わせてPostControllerを修正していきます。まずはuseの部分を以下のように変更しました。

変更前：App\Post ⇒　変更後：App\Models\Post

この下にあるeditファンクションも以下のように変更してます。

変更前：$post = App\Post::findOrFail($id)

変更後：$post = Post::findOrFail($id)

public function edit($id)
   {
       // $usr_id = $post->user_id;
       $post = Post::findOrFail($id);

       return view('posts.edit',['post' => $post]);
       // return view('posts.edit');
   }

これでPostControllerは完成です！(不足点あったらすみません・・・)

5. モデルファイル編集

こちらではさきほどあった階層の違いからPost.phpとUser.phpのnamespaceを以下のように修正しています。

変更前：namespace App;

変更後：namespace App\Models;

6. viewファイル編集

いよいよ最後です・・・！ほとんどコピペでやってみたんですが、最後の最後でedit.blade.phpで変数idが定義されてないよ！というエラーが出てしまいました。

コピペばっかしてるから分からんぞ！となりつつ最後は感覚的に書き直したらうまくいってしまいました・・・(笑)

変更前：<input name="post_id" type="hidden" value="{{$id}}" >

変更後：<input name="post_id" type="hidden" value="{{$post->id}}" >

edit.blade.phpのどのあたりの記述かどうかは実際にもんしょーさんのコードを見ながら確かめてみてください。

というわけで、完成！！！

前回説明したLaravel起動のコマンド「php artisan serve」でLaravelを立ち上げてブラウザで確認してみましょう！

いや～、長かったけど完成品を眺めるとほとんどコピペではありますが感無量です。ここからいろいろレイアウトをいじってみたり理解を深めていきたいなと思います。

長くなりましたが、掲示板作成は以上です。

最後になりますが、この動画を作ってくださったもんしょーさんに大いに感謝しております。ありがとうございました！

それではまた～！

この記事が気に入ったらサポートをしてみませんか？