![](https://www.kamome-susume.com/wp-content/uploads/2021/09/2660944.jpg)
Docker×Laravel8で作るもくもく会アプリの一覧画面作成編です。
前回の記事まで完了していることが前提となります。もしまだの人は、以下の記事をご参照ください。
![](https://www.kamome-susume.com/wp-content/uploads/2020/12/a9e887bfa478fbd8a741e96287362251-300x158.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2020/12/a9e887bfa478fbd8a741e96287362251-300x158.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2021/07/041ddc3101b587b3e24a9ce21e659fe7-300x158.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2021/07/041ddc3101b587b3e24a9ce21e659fe7-300x158.webp)
休日で空いた時間の暇つぶしを探せるアプリを公開しています。
モデルを作成する
まずはcategoryとeventのモデルを作成します。
// categoryモデルの作成
/var/www/html# php artisan make:model Category
Model created successfully.
// eventモデルの作成
/var/www/html# php artisan make:model Event
Model created successfully.
app > Models 配下にモデルが作成されます。
![](https://www.kamome-susume.com/wp-content/uploads/2021/11/092c10e95679e75ca927dfb0272200e9.png)
![](https://www.kamome-susume.com/wp-content/uploads/2021/11/092c10e95679e75ca927dfb0272200e9.png)
コントローラーを作成する
次に、categoryとeventのコントローラーを作成します。
// カテゴリーコントローラーの作成
/var/www/html# php artisan make:controller CategoryController
Controller created successfully.
// イベントコントローラーの作成
/var/www/html# php artisan make:controller EventController
Controller created successfully.
app > Http > controllers 配下にそれぞれコントローラーが作成されます。
![](https://www.kamome-susume.com/wp-content/uploads/2021/11/2b95a9800583493d22107f41df1ad9d4.png)
![](https://www.kamome-susume.com/wp-content/uploads/2021/11/2b95a9800583493d22107f41df1ad9d4.png)
一覧画面を簡易的に表示させる
![](https://www.kamome-susume.com/wp-content/uploads/2021/09/2660944.jpg)
![](https://www.kamome-susume.com/wp-content/uploads/2021/09/2660944.jpg)
![](https://www.kamome-susume.com/wp-content/uploads/2021/09/2660944.jpg)
前回の記事で一覧画面を表示確認しましたが、今回はコントローラーからビューを返すように変更します。
ルーティングを修正します。
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\EventController; // 追加
// もくもく会一覧画面
Route::get('/', [EventController::class, 'index'])
->name('event.index');
laravel6とlaravel8では、ルーティングの書き方も違うので注意が必要です。
ルーティングについて記事をまとめているので、不安がある方は以下の記事をご参照ください。
![](https://www.kamome-susume.com/wp-content/uploads/2021/10/d27c93d8ac508a95f472d0e658ea4f73-300x158.png)
![](https://www.kamome-susume.com/wp-content/uploads/2021/10/d27c93d8ac508a95f472d0e658ea4f73-300x158.png)
eventControllerで一覧画面に遷移できるように追記します。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class EventController extends Controller
{
/**
* イベント一覧画面
*/
public function index()
{
return view('event.index');
}
}
ビュー画面も修正します。
<h1>もくもく会一覧画面</h1>
![](https://www.kamome-susume.com/wp-content/uploads/2021/09/2660944.jpg)
![](https://www.kamome-susume.com/wp-content/uploads/2021/09/2660944.jpg)
![](https://www.kamome-susume.com/wp-content/uploads/2021/09/2660944.jpg)
これで準備が整ったので、/にアクセスしたときにもくもく会一覧画面が表示されるか確認しましょう。
私の環境では、localhost:90でweb画面にアクセスできるので、localhost:90に接続したときにもくもく会一覧画面が表示されるはずです。
![](https://www.kamome-susume.com/wp-content/uploads/2021/11/ea31fa4036788492c26eec5c4d0b7996.png)
![](https://www.kamome-susume.com/wp-content/uploads/2021/11/ea31fa4036788492c26eec5c4d0b7996.png)
表示されているのでOKですね。
同様にカテゴリー一覧画面も表示させていきましょう。
![](https://www.kamome-susume.com/wp-content/uploads/2021/09/2660944.jpg)
![](https://www.kamome-susume.com/wp-content/uploads/2021/09/2660944.jpg)
![](https://www.kamome-susume.com/wp-content/uploads/2021/09/2660944.jpg)
カテゴリー一覧画面用のルーティングの追加
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\EventController;
use App\Http\Controllers\CategoryController; // 追加
// もくもく会一覧画面
Route::get('/', [EventController::class, 'index'])
->name('event.index');
// カテゴリー一覧画面
Route::get('/category/index', [CategoryController::class, 'index'])
->name('category.index');
![](https://www.kamome-susume.com/wp-content/uploads/2021/09/2660944.jpg)
![](https://www.kamome-susume.com/wp-content/uploads/2021/09/2660944.jpg)
![](https://www.kamome-susume.com/wp-content/uploads/2021/09/2660944.jpg)
カテゴリー一覧画面用のコントローラーの追記
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class CategoryController extends Controller
{
/**
* カテゴリー一覧画面
*/
public function index()
{
return view('category.index');
}
}
![](https://www.kamome-susume.com/wp-content/uploads/2021/09/2660944.jpg)
![](https://www.kamome-susume.com/wp-content/uploads/2021/09/2660944.jpg)
![](https://www.kamome-susume.com/wp-content/uploads/2021/09/2660944.jpg)
カテゴリー一覧画面用のビューの追加
<h1>カテゴリー一覧画面</h1>
![](https://www.kamome-susume.com/wp-content/uploads/2020/07/2629950.jpg)
![](https://www.kamome-susume.com/wp-content/uploads/2020/07/2629950.jpg)
![](https://www.kamome-susume.com/wp-content/uploads/2020/07/2629950.jpg)
ビューを確認してみましょう!今回はルーティングで/category/indexでカテゴリー一覧画面に設定しているので、localhost:90/category/indexでカテゴリー一覧画面が表示されるはずです。
localhost:90/category/index
![](https://www.kamome-susume.com/wp-content/uploads/2021/11/d10f964fccdaa2654f9729cf77f3ef3a.png)
![](https://www.kamome-susume.com/wp-content/uploads/2021/11/d10f964fccdaa2654f9729cf77f3ef3a.png)
表示されましたね。
次回の記事では、実際にデータベースに値を入れて一覧画面に表示できるか解説していきます。
![](https://www.kamome-susume.com/wp-content/uploads/2021/11/dockerlaravel-300x169.jpg)
![](https://www.kamome-susume.com/wp-content/uploads/2021/11/dockerlaravel-300x169.jpg)
![](https://www.kamome-susume.com/wp-content/uploads/2020/12/a9e887bfa478fbd8a741e96287362251-300x158.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2020/12/a9e887bfa478fbd8a741e96287362251-300x158.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2021/07/041ddc3101b587b3e24a9ce21e659fe7-300x158.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2021/07/041ddc3101b587b3e24a9ce21e659fe7-300x158.webp)
休日で空いた時間の暇つぶしを探せるアプリを公開しています。
コメント
コメント一覧 (2件)
初めてコメントさせていただきます。
Laravelについて仕事で必要になり、様々なサイト、書籍、Udemyなどなどで情報収集してお勉強しております。その中でもダントツでこのサイト一番わかりやすく親切だなと思いました。まだ ”Docker×Laravel8もくもく会のアプリ作成” をやりはじめたばかりですが、もっと早くこのサイトを見つけられれば良かったと思っています。素敵なサイトありがとうございます。引き続きお勉強させていただきます。
さて、一つ勉強中に気づいたことがありましたのでコメントさせていただきます。
https://www.kamome-susume.com/mokumoku-index-first/
のページ中の
「カテゴリー一覧画面用のルーティングの追加」の下の黒いコードが記載されているブロックの右上のファイルのpathのところが
「src/resources/views/event/index.blade.php」( src/routes/web.php かと思います。)
になっているようです。
このサイトを訪問する私以外の方にもぜひこのサイトの利用をしていただきたいので、ここでつまずいてしまうのも可愛そうだと思いおせっかいではございますがご連絡させていただきましたm(__)m
ご指摘ありがとうございます!
上記の内容を修正させていただきました。
こちらの凡ミスで、開発の手が止まってしまい申し訳ないです。
また、このサイトにご訪問くださり、そして勉強してくださり、大変嬉しいです。