見出し画像

Laravelキャッチアップ④<画面遷移編>

こんにちは!!😸
株式会社リヴェル 採用担当兼エンジニアのチノです😊
本日は華金ですね🌸
お読みいただきありがとうございます✨

夕方、外出していた営業メンバーが戻ってきた際にわらび餅を差し入れてくださいました~~~!!!✨

わらび餅大好きです😙💛

あと、今朝起きたら、、、、

まさかの!

雪が積もっていたのでびっくりしました😮
雨も降っていたので、足元もぐちょぐちょでしたね👣☔
朝、通り道にポストがあるのですが、ポストの上に雪だるまが作られていて朝からほっこりしました⛄(写真撮るの忘れました・・) 
雨は止んで晴れたので雪は溶けるかもしれませんが、皆様も足元気を付けられてくださいね!✨

今回は昨日に引き続き、Laravelについて学んでいきます。 

では、早速参ります💨💨


1.URLを作成する

まず、index.blade.phpを編集し、<li>タグの中にリンクを作成します。

リロードすると、下の画像になりました!!
🔽🔽🔽

Title A、Title B、Title Cがリンクになりました。
Title Aを押下すると、Not Found画面に遷移します。

TitleA=$posts/0なので、正しく配列のインデックスを取得出来ていることが確認出来ます✨
🔽🔽🔽
🌟PostController.php

public function index()
    {
        $posts = [
            'Title A', //🌟配列の値0番目🌟ここを取得しています
            'Title B', //1番目
            'Title C', //2番目
        ];

        return view('index')
            ->with(['posts' => $posts]);
    }

🔽🔽🔽

2.URLにパラメータを設定する

🌟web.php

Route::get('/posts/0', [PostController::class, 'show']);
Route::get('/posts/1', [PostController::class, 'show']);
Route::get('/posts/2', [PostController::class, 'show']);

上記のように書きたいのですが、数が多くなると厄介なので、
URLをパラメータ化(引数化)する書き方があります。

🌟web.php posts/0→{id}で$idにします

Route::get('/posts/{id}', [PostController::class, 'show']);

その後、PostController.phpshowメソッドを作成し、引数として$idを渡します。

続いて、showのviewを作成していきます!
🔽🔽🔽

3.遷移先ページを作成する

ルーティングに合わせたフォルダ構成にしていきます。
ルーティングが「Route::get('/posts/{id}', [PostController::class, 'show']);」なので、views配下にpostsフォルダを作成し、show.blade.phpを作成し、<h1>タグを記載します。

viewsの中にフォルダを作成した場合、PostController.phpも変更する必要があります!
🔽🔽🔽
これで画面遷移させるまでの準備が整ったので、
ブラウザをリロードして確認します✨
🔽🔽🔽
正しくTitle Aが表示されました!!
🔽🔽🔽

このままだと遷移元画面へ戻れないので、こちらのページにリンクを作成します。

🔽🔽🔽

ブラウザをリロードすると、遷移元へ戻るリンクが反映されました!

4.ルーティングに名前を付ける

ルーティングに名前を付けることにより、URLの構造が変わった際に全ての構造を修正する必要がなくなるようにします。

この後、index.blade.phpshow.blade.phpを修正します!

これでブラウザをリロードすると
🔽🔽🔽
遷移出来ました!

これで、URLが変わった場合はweb.phpのみを修正すれば済むようになりました✨

基礎編ですが、少し複雑になってきた感じがします!
沢山触って慣れて行けるように頑張ります😊💪

次回に続きます!!


今日の夜はサウナに行くので、整ってきます🧖
久しぶりのサウナなので汗出るか不安です😂

結びになりますが、株式会社リヴェルでは一緒に働いてくださるエンジニアを募集しております😙!!
興味を持ってくださった方は、是非こちらをご覧ください✨

今後も、弊社の採用情報・会社情報について随時発信をしてまいりますのでお楽しみに🌸

それでは、本日もお読みいただきありがとうございました😸💛
皆様、体調に気を付けて、良い週末をお過ごしください🥰

この記事が参加している募集

やってみた

仕事について話そう