<画面設計における**ワイヤーフレーム**とは>

WEBページのレイアウトを定めるもの
完成イメージを作る。

＜LaravelにおけるBladeとは＞

Blade→Laravelでviewを作るためのテンプレートエンジン→見た目を作る手助けをしてくれる。
ワイヤーフレームの作成　（Google Drive）→diagrams.netを使用する。

開発用Gitブランチを新規作成

実行コマンド

//必ずLaravelのrootディレクトリに移動してからbranchを作る。
cd ~/environment/ディレクトリ名
git checkout -b ブランチ名

❶view(ビュー)を表示する。

ルーティングファイルの配置場所は、routes/web.php
ルーティングとは、HTTPリクエストを検知したとき、それを受け付けるか受け付けないかの判断をする。
下記の場合は、routes/web.php内のpostsフォルダ内にあるindex.blade.phpを指定している。

routes/web.php

Route::get('/', function () {
    return view('posts/index');
//postsフォルダ内のindex.blade.phpを指定。.blade.php省略
});

❷画面に表示したいファイルはresouces内のviews内にある.blade.phpファイルに書いていく

index.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Blog</title>

       
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;600&display=swap" rel="stylesheet">

       
   </head>
    <body>
        <h1>Blog Name</h1>Ï
        <div class="posts">
            @foreach($posts as $post)
            <div class="post">
                <h2 class="title">{{$post->title}}</h2>
                <p class="body">{{$post->body}}</p>
            </div>
            @endforeach
        </div>
    </body>
</html>

❸起動していく

実行コマンド

php artisan serve --port= ~

❶contorollerの段階でデータを取得してviewに返す方法。

routes/web.php

Route::get('/',PostContoroller@index)　//'/'の時にPostContorollerのindexメソッドを実行

❷withメソッドを使う

ViewにController内で取得した変数を渡したい場合は、Viewインスタンスに対してwithメソッドを使用する。
with('変数名' => 値)→ContorollerからViewにデータを呼び出せるようになる。
PostContorollerファイルを下記のように修正↓

PostContoroller.php

public function index(Post $post)　//function 関数名(Post $post)とは、変数に、Postクラスのインスタンスを代入しているというころである。→メソッドインジェクション
    {
    return view('posts/index')->with(['posts' =>$post->get()]);
    }
//->get()で全件データを取得

❸view側でデータを受け取って表示するようにする。
index.blade.phpに埋め込んでいく.

変数をbladeファイル内に書く時は、**{{$post}}**となる。→{{}}で囲む。
@foreach($posts as $post) {} @endforeachで囲む。

index.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Blog</title>


        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;600&display=swap" rel="stylesheet">


   </head>
    <body>
        <h1>Blog Name</h1>Ï
        <div class="posts">
            @foreach($posts as $post) //$posts(変数)は、return view('posts/index')->with(['posts' =>$post->get()]);でviewに渡す時に指定している
            <div class="post">
                <h2 class="title">{{$post->title}}</h2>
                <p class="body">{{$post->body}}</p>
//postsテーブルから取得している。
            </div>
            @endforeach
        </div>
    </body>
</html>
/*
+----+--------+----------------+---------------------+---------------------+------------+
| id | title  | body           | created_at          | updated_at          | deleted_at |
+----+--------+----------------+---------------------+---------------------+------------+
|  3 | title3 | This is body3. | 2021-10-19 18:23:28 | 2021-10-19 18:23:28 | NULL       |
|  4 | title4 | This is body4. | 2021-10-19 18:23:41 | 2021-10-19 18:23:41 | NULL       |
+----+--------+----------------+---------------------+---------------------+------------+
//❶mysql -u dbuser -pでログイン
　　　　❷use データベース名でデータベース切り替え
　　　　❸select * from テーブル名で、中身を表示。
　　*/

データ取得と表示の応用

　
->get()で全件取得してしまうのはまずいので、最大件数を指定したり、取得するデータの条件を指定する。

データベースとのデータのやりとりを行う、Postモデル（Post.php）を編集する。

条件は最大10件まで表示で、新しい順に表示↓
関数の引数には型を指定できる(array、bool、float、int、string、クラス名・インスタンス名など）

Post.php

public function getByLimit(int $limit_count = 10)
{
//updated_atで新しい順に並べた後、limitで制限をかける。
return $this->orderBy('updated_at' ,'DESC')->limit($limit_count)->get();
//(例)　orderBy('id',desc)または[asc]
//limit関数でデータから取得する件数を指定

モデルクラスの修正完了
コントローラークラスを修正する。

PostContoroller.php

public funcion index(Post $post)
{
return view('posts/index')->width(['posts'=>$post->getByLimit()]);

❷ページネーション設定
paginate

Post.php

 public function getPaginateByLimit(int $limit_count = 10)
    {
        return $this->orderBy('updated_at','DESC')->paginate($limit_count);
    }

上記を実行すると今までのCollecrtionインスタンスではなく、Paginationインスタンスが返ってくるようになる。

PostController.php

 public function index(Post $post)
    {
    return view('posts/index')->with(['posts' =>$post->getPaginateByLimit(1)]); //関数部分変更
    }

❸viewファイルにpaginate追加

view/index.blade.php

<div class="paginate">
{{$posts->links}}
</div>

Laravel基礎、view、ブログ一覧ページ

データ取得と表示の応用