副業におすすめなサイトを見る→

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

アプリリリースのお知らせ

予定を探すアプリyoteipickerをリリースしました。

アプリの利用用途:暇だから何か予定入れたいけど今週の土日は何しようかな〜?ってときに使えるアプリです。

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

表示されましたね。

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

>>ココナラと似てるおすすめの副業サイトを確認する

>>リモートワークもあるおすすめの転職サイトを確認する

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

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

コメント

コメント一覧 (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

    • ご指摘ありがとうございます!
      上記の内容を修正させていただきました。

      こちらの凡ミスで、開発の手が止まってしまい申し訳ないです。
      また、このサイトにご訪問くださり、そして勉強してくださり、大変嬉しいです。

カモメのススメ へ返信する コメントをキャンセル

CAPTCHA


Contents
閉じる