これまでこのシリーズのすべてのパートをフォローしてきた場合は、アプリケーションのデータベースとコマンドをアップグレードして、リンクのリストを含める必要があります。

アプリケーションのメインルートには現在、データベース内のすべてのリンクが表示され、リストに関する情報は表示されません。 このセクションでは、新しいアーキテクチャを反映するために、メインのフロントエンドビューを更新します。

ORMシステムを使用する最大の利点の1つは、データベーステーブルの行をコードベース内のオブジェクトとして操作できることです。 Eloquentは、モデルから直接アクセスしてデータベースにクエリを実行し、SQLステートメントを記述せずに結果をフィルタリングできるいくつかのメソッドを提供します。 典型的な SELECT テーブルからすべての行を取得するためのクエリ。純粋なSQLでは次のようになります。 SELECT * FROM links、次のようなコードを使用してEloquentで実行できます。

$links = Link::all();

結果セットは、 Eloquent Collection として返されます。これは、配列と同様に動作する反復可能なオブジェクトですが、map / reduceメソッドや、参照される「ハイドレイト」(新しいデータをプル)する機能などの拡張機能を提供します。必要な場合にのみオブジェクトを作成します。これは、データベースとの対話中の全体的なパフォーマンスに役立ちます。

インデックスルートの更新

インデックスルートが定義されているメインアプリケーションルートファイルを調べると、現在のアプリケーションコードが Link::all() 電話。 を開きます routes/web.php コードエディタのファイル:

routes/web.php

これがどのように / ルートは現在このファイルで定義されています:

ルート/web.php
Route::get('/', function () {
    $links = Link::all()->sortDesc();
    return view('index', [
        'links' => $links
    ]);
});

名前が示すように、 sortDesc() メソッドは、結果を最後から最初に降順で並べ替えるために使用されます。 これはと同じではありません ORDER BY SQLクエリの句。 sortDesc メソッドはコードレベルで機能し、コレクションを並べ替えます。 このシリーズの次のセクションで結果の注文について詳しく説明するため、この方法は今のところ無視してかまいません。

次に、このコードを編集して、データベース内に現在登録されているすべてのリストのコレクションを取得します。これにより、後でフロントエンドビューで使用して、すべてのリスト名を表示できます。

まず、 use ファイルの先頭での宣言、参照 LinkList モデル。 この宣言は、クラスを参照するたびに完全なクラス名を入力する必要がないことを確認するために使用されます。

ルート/web.php
<?php
 
use Illuminate\Support\Facades\Route;
use App\Models\Link;
use App\Models\LinkList;
...

次に、 return 含めるメインルート定義の lists 登録されているすべてのリストを含む変数:

ルート/web.php
return view('index', [
        'links' => $links,
        'lists' => LinkList::all()
    ]);

これが完成したファイルの外観です。 強調表示された変更に注意してください。

ルート/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()
    ]);
});
 

更新が完了したら、ファイルを保存することを忘れないでください。

インデックスビューの更新

メインルートを更新してリストに関する情報も提供したら、参照されているビューファイルを編集できます。 を開きます resources/views/index.blade.php コードエディタのファイル:

resources/views/index.blade.php

このファイルには、アプリケーションがメインのインデックスページで使用する単一のフロントエンドビューファイルが含まれています。 このファイル内で、 @foreach ループするブレードブロック $links 変数。 次のようになります。

resources / views / index.blade.php
...
            @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>
                </div>
            @endforeach
...

ループ内のコードには、リストに関する情報はまだ含まれていません。 これで、リンクが保存されているリストのタイトルを含むリンクURLの直後に新しい行が含まれます。 あなたは使用することができます tag この情報をタグとしてスタイル設定するためのBulmaのCSSクラス:

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

強調表示された行をファイルに追加します。 リンクは、このシリーズの今後のパートで個々のリストページを設定するときに調整されます。

次に、クラスがある段落を見つけます subtitle、直後に来る <h1> タグを付け、リンクを含むセクションの前。 その領域で使用されている一般的なテキストを、以前にで利用可能にしたリンクリストに基づくメニューに置き換えます。 lists でデフォルトルートを編集したときの変数 routes/web.php.

字幕セクションのテキストを強調表示されたコンテンツに置き換えます。

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>

リストタグのスタイルは以前とは少し異なり、各タグの色を反転するis-light追加のCSSクラスがあります。

これはあなたの方法です 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">
            Check out my awesome links
        </h1>
        <p class="subtitle">
            @foreach ($lists as $list)<a href="#" 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="#" title="{{ $list->title }}" class="tag is-info">{{ $link->link_list->title }}</a></p>
                </div>
            @endforeach
        </section>
    </div>
</section>
</body>
</html>
 

完了したらファイルを保存します。 これで、メインのフロントエンドビューで、リンクリストに関する更新情報を表示できるようになりました。

必要に応じて、 link:new 新しいリンクを含め、更新されたアプリケーションをテストするためのArtisanコマンド:

  1. docker-compose exec app php artisan link:new
[secondary_label Output
Link URL:
> https://laravel.com/docs/8.x/
 
Link Description:
> Laravel Docs
 
Link List (leave blank to use default):
> laravel
 
New Link:
https://laravel.com/docs/8.x/ - Laravel Docs
Listed in: laravel
 
Is this information correct? (yes/no) [no]:
> yes
 
Saved.

次に、ブラウザでアプリケーションページをリロードします。 付属のDockerComposeセットアップを使用している場合、アプリケーションは次のローカルアドレスで利用できるはずです。

http://localhost:8000

次のようなページが表示されます。

このシリーズの次のパートでは、リンクリストの個々のページを設定し、を使用してデータベースにクエリを実行する方法を学習します。 where() よりきめ細かい結果を得るための方法。