このシリーズの前のパートでは、デモアプリケーションを更新して、データベース内のリストにリンクを整理しました。 メインアプリケーションビューに、データベース内に現在登録されているすべてのリストを含むメニューが表示されるようになりましたが、メニューにはまだアクティブなリンクがありません。

このセクションでは、アプリケーション内に新しいルートを作成して、リストごとにリンクを表示します。 また、使用方法も学びます where() Eloquentのメソッドは、データベースクエリの結果をより適切にフィルタリングします。

開始するには、 routes/web.php コードエディタのファイル:

routes/web.php

このファイルには現在、次の内容が含まれています。

ルート/web.php
<?php
 
use Illuminate\Support\Facades\Route;
use App\Models\Link;
use App\Models\LinkList;
 
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
 
Route::get('/', function () {
    $links = Link::all()->sortDesc();
    return view('index', [
        'links' => $links,
        'lists' => LinkList::all()
    ]);
});
 

The Route::get callは、アプリケーションエントリページのHTTPGETルートを定義します。 リクエストがあったとき / アプリケーションに対して行われると、このコールバック関数がトリガーされてインデックスビューが返されます。

次に、リストslugに基づいてリンクのリストを表示する2番目のルートを作成します。 スラッグは、ユーザーフレンドリーなURLを作成するために通常使用される短い文字列です。 新しいルートはデータベースにクエリを実行する必要があります link_lists 提供されたURLパラメータをそのとして持つリストのテーブル slug 分野。 そのスラッグのリストが見つからない場合、アプリケーションはHTTP404またはnotfoundエラーでユーザーに通知する必要があります。

次のコードは、動的パラメーター(によって定義される)を使用してGETルートを作成します。 {slug})、名前付き link-list. この意志:

  • 使用 LinkList データベースをクエリするためのEloquentモデル where() slugを検索条件として使用する方法。 The first() メソッドは、1つのオブジェクトのみが返されることを確認します。
  • 指定されたスラッグのリストが見つからない場合は、404エラーがスローされます。 abort 方法。
  • 有効なリストが見つかると、インデックスビューがレンダリングされ、リストがテンプレートパラメータとして提供されます。

The $lists リストメニューを作成するためのパラメータが提供され、 $links パラメータは、現在のバージョンのインデックスビューとの互換性のために提供されています。これは、その名前の変数をループするためです。

の下部に次のコードを含めます routes/web.php ファイル:

ルート/web.php
Route::get('/{slug}', function ($slug) {
    $list = LinkList::where('slug', $slug)->first();
    if (!$list) {
        abort(404);
    }
 
    return view('index', [
        'list' => $list,
        'links' => $list->links,
        'lists' => LinkList::all()
    ]);
})->name('link-list');
 

完了したらファイルを保存します。

Eloquentモデルを参照するルートを実装するためのショートカットがありますが、このチュートリアルでは、 where() 学習目的の方法。

新しいルートが期待どおりに機能することをテストするには、ブラウザに移動して、デフォルトのリストページのリンクにアクセスします。 これまでにこのシリーズのすべての手順を実行し、データベースが空でない場合は、デフォルトのリストページが次のローカルアドレスで利用できるはずです。

http://localhost:8000/default

以前と同じページが表示されますが、リンクはdefaultリストのリンクに制限されています。 追加のリストがある場合は、強調表示されたリストを置き換えることでそれらのページにアクセスできます default あなたのリストのスラッグでURLをスラッグします。

新しいルートを設定すると、 route テンプレートビューからリンクリストのURLを動的に生成するBladeメソッド。 ページヘッダーをカスタマイズして、リストが利用可能な場合にリストに関する情報を表示することもできます。

を開きます resources/views/index.blade.php コードエディタのファイル:

resources/views/index.blade.php

このファイルには、更新が必要な2行があります。 まず、このシリーズの別のパートで作成したメニューを含む字幕段落を見つけます。 これが今のように見えます:

resources / views / index.blade.php
        <p class="subtitle">
            @foreach ($lists as $list)<a href="#" title="{{ $list->title }}" class="tag is-info is-light">{{ $list->title }}</a> @endforeach
        </p>

更新します href リストページの現在のURLを含めるためのハイパーリンク route ブレード方式。 このメソッドは、ルートの名前を最初の引数として想定し、URLパラメーターはメソッド呼び出しへの追加の引数として提供されます。 交換してください # 次の強調表示されたコンテンツを持つ文字:

resources / views / index.blade.php
        <p class="subtitle">
            @foreach ($lists as $list)<a href="{{ route('link-list', $list->slug) }}" title="{{ $list->title }}" class="tag is-info is-light">{{ $list->title }}</a> @endforeach
        </p>

次に、リンクセクションと foreach 内でループします。 に別の呼び出しを含める必要があります route() リンクごとにリスト名を出力する方法。 これは前の例と似ていますが、リストオブジェクトへのアクセス方法が異なります。 $link 変数:

resources / views / index.blade.php
            <p>{{$link->url}}</p>
            <p class="mt-2"><a href="{{ route('link-list', $link->link_list->slug) }}" title="{{ $link->link_list->title }}" class="tag is-info">{{ $link->link_list->title }}</a></p>

次に、追加情報が提供されている場合は、リストに関する情報を含めることができます。 あなたはの存在を確認することができます $list 変数を指定し、その変数が使用可能な場合にのみリストのタイトルを出力します。

あなたの title 次の強調表示されたコードを含むセクション:

        <h1 class="title">
            @if (isset($list))
                {{ $list->title }}
            @else
                Check out my awesome links
            @endif
        </h1>

これがどのように index.blade.php 終了するとファイルが表示されます。 便宜上、変更点が強調表示されています。

resources / views / index.blade.php
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Awesome Links</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
 
    <style>
        html {
            background: url("https://i.imgur.com/BWIdYTM.jpeg") no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
 
        div.link h3 {
            font-size: large;
        }
 
        div.link p {
            font-size: small;
            color: #718096;
        }
    </style>
</head>
<body>
<section class="section">
    <div class="container">
        <h1 class="title">
            @if (isset($list))
                {{ $list->title }}
            @else
                Check out my awesome links
            @endif
        </h1>
        <p class="subtitle">
            @foreach ($lists as $list)<a href="{{ route('link-list', $list->slug) }}" title="{{ $list->title }}" class="tag is-info is-light">{{ $list->title }}</a> @endforeach
        </p>
 
        <section class="links">
            @foreach ($links as $link)
                <div class="box link">
                    <h3><a href="{{ $link->url }}" target="_blank" title="Visit Link: {{ $link->url }}">{{ $link->description }}</a></h3>
                    <p>{{$link->url}}</p>
                    <p class="mt-2"><a href="{{ route('link-list', $link->link_list->slug) }}" title="{{ $link->link_list->title }}" class="tag is-info">{{ $link->link_list->title }}</a></p>
                </div>
            @endforeach
        </section>
    </div>
</section>
</body>
</html>

内容の更新が完了したら、ファイルを保存します。

これで、ブラウザからアプリケーションのメインページにアクセスできます。 付属のDockerComposeセットアップを使用している場合、アプリケーションは次のローカルアドレスから利用できる必要があります。

http://localhost:8000

次のスクリーンショットのようなページが表示されます。

このシリーズの次のパートでは、LaravelEloquentでクエリ結果を並べ替える方法を学びます。