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

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

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

＜Laravelにおける`Blade`とは＞

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

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

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

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

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

```csharp:routes/web.php
Route::get('/', function () {
    return view('posts/index');
//postsフォルダ内のindex.blade.phpを指定。.blade.php省略
});
```
❷画面に表示したいファイルは**resouces内のviews内にある.blade.phpファイルに書いていく**

```csharp: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>
```
❸起動していく

```csharp:実行コマンド
php artisan serve --port= ~
```

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

```csharp:routes/web.php
Route::get('/',PostContoroller@index)　//'/'の時にPostContorollerのindexメソッドを実行
```
❷`withメソッド`を使う

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

```csharp: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で囲む。



```csharp: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、クラス名・インスタンス名など）

```csharp: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関数でデータから取得する件数を指定
```
モデルクラスの修正完了
コントローラークラスを修正する。

```csharp:PostContoroller.php
public funcion index(Post $post)
{
return view('posts/index')->width(['posts'=>$post->getByLimit()]);
```
❷ページネーション設定
paginate

```csharp:Post.php
 public function getPaginateByLimit(int $limit_count = 10)
    {
        return $this->orderBy('updated_at','DESC')->paginate($limit_count);
    }
```

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

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

❸viewファイルにpaginate追加

```csharp:view/index.blade.php
<div class="paginate">
{{$posts->links}}
</div>