【市場価値がわかる】エンジニア転職におすすめなサイト

Docker×Laravel8もくもく会のアプリ作成4(一覧画面の作成①)

20代の転職ならマイナビジョブ

Docker×Laravel8で作るもくもく会アプリの一覧画面作成編です。

前回の記事まで完了していることが前提となります。もしまだの人は、以下の記事をご参照ください。

Contents

モデルを作成する

まずは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 配下にモデルが作成されます。

コントローラーを作成する

次に、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 配下にそれぞれコントローラーが作成されます。

一覧画面を簡易的に表示させる

前回の記事で一覧画面を表示確認しましたが、今回はコントローラーからビューを返すように変更します。

STEP
ルーティングを修正する
STEP
コントローラーに追記する

ルーティングを修正します。

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\EventController; // 追加

// もくもく会一覧画面
Route::get('/', [EventController::class, 'index'])
    ->name('event.index');

laravel6とlaravel8では、ルーティングの書き方も違うので注意が必要です。

ルーティングについて記事をまとめているので、不安がある方は以下の記事をご参照ください。

eventControllerで一覧画面に遷移できるように追記します。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class EventController extends Controller
{
    /**
     * イベント一覧画面
     */
    public function index()
    {
        return view('event.index');
    }
}

ビュー画面も修正します。

<h1>もくもく会一覧画面</h1>

これで準備が整ったので、/にアクセスしたときにもくもく会一覧画面が表示されるか確認しましょう。
私の環境では、localhost:90でweb画面にアクセスできるので、localhost:90に接続したときにもくもく会一覧画面が表示されるはずです。

表示されているのでOKですね。

同様にカテゴリー一覧画面も表示させていきましょう。

カテゴリー一覧画面用のルーティングの追加

<?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');

カテゴリー一覧画面用のコントローラーの追記

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class CategoryController extends Controller
{
    /**
     * カテゴリー一覧画面
     */
    public function index()
    {
        return view('category.index');
    }
}

カテゴリー一覧画面用のビューの追加

<h1>カテゴリー一覧画面</h1>

ビューを確認してみましょう!今回はルーティングで/category/indexでカテゴリー一覧画面に設定しているので、localhost:90/category/indexでカテゴリー一覧画面が表示されるはずです。

localhost:90/category/index

表示されましたね。

次回の記事では、実際にデータベースに値を入れて一覧画面に表示できるか解説していきます。

20代の転職ならマイナビジョブ

現役エンジニアに相談するならMENTA(おすすめ)

スキルを売り買いするならココナラ

動画教材ならUdemy

コメント

コメントする

CAPTCHA


Contents
閉じる