laravel8掲示板作成してみた

#今回の完成品
formで投稿データを受け取り、dbでアップロードします。
降順で、dbに入っている投稿内容を表示させます。
![スクリーンショット 2021-06-03 14.52.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1299864/54a5aae8-b68a-d7f8-ad40-37be84fcb1b7.png)
![スクリーンショット 2021-06-03 15.18.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1299864/95a9d3be-5fc0-b25b-90b6-d191eafae12d.png)

![スクリーンショット 2021-06-03 15.06.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1299864/d19ed7de-a4a7-0230-4e36-be7157d6a34e.png)



#設計
- 掲示板の制作
  - Controllerの制作
  - Viewの制作

#今回使用したテーブル構成
![スクリーンショット 2021-06-02 21.15.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1299864/c0bcfe52-6354-2629-8ce4-c22e5e3ccf77.png)

#routesの内容
```web.php
Route::get('/log', "CompanyController@index");
Route::post('/create', "CompanyController@create");
```

#前提
1. make:migrationを使ってCompanyテーブルを作成する
2. make:modelを使ってCompanyクラスを作成する
3. make:controllerを使ってCompanyControllerクラスを作成する
4. ルーティングを変更してCompanyControllerを設定する<br>

この辺りの処理は、省略しました。この辺りの内容は、他の記事を参考にしてください
おすすめ記事：[掲示板を作ろう(前編)](https://note.com/laravelstudy/n/n731ccef3756c#826Q0)

#Controllerの設計
まずControllerの中身を以下のように書き込みます。

```CompanyController.php
<?php

namespace App\Http\Controllers;
use App\Models\Company;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class CompanyController extends Controller
{
    function index(){
		//@TODO 投稿一覧画面を表示

		$item_list = テーブル名::orderBy('id', 'desc')->get();
        return view("/Bulletin_board/top_board", [
			"item_list" => $item_list
		]);

    }
    //@TODO 投稿処理を行う
    function create(Request $request){
        
        $id = Auth::id();
        $input = $request->only('author', 'title', 'body', 'image');
        
        $path = $request->file('image')->store('public/company');
        $path2 = basename($path); 
        $entry = new Modelのクラス名();
        $entry->author_id = $id;
        $entry->author = $input["author"];
        $entry->title = $input["title"];
        $entry->image_path = $path2;
        $entry->body = $input["body"];
        
        $entry->save();
        return redirect('/log')->with([
            "image"  => basename($path)]);
    }
    
}
```

この部分では、/logにアクセスされると働くようになっています。中身は、「 テーブル名 」のテーブルからそれぞれの投稿に割り振られたid番号の大きい順に並び直しviewにデータを送る処理をしています。ちなみにdescは、降順でascが昇順になります:smirk:。

```
    function index(){
		//@TODO 投稿一覧画面を表示

		$item_list = テーブル名::orderBy('id', 'desc')->get();
        return view("/Bulletin_board/top_board", [
			"item_list" => $item_list
		]);

    }
```
ここでは、postでviewのフォーム画面からデータが送られてきた時に、Eloquentのメソッド saveを用いてdbにアップロードしています。その後画像のパスのみをbasename()を用いて取り出し、redirectを使って、viewに返しました。
さらに詳しく述べると、変数inputにpostデータを連想配列にして入れます。あとで画像も表示したいので、画像自身もフォルダに入れる処理を行い、modelのオブジェクトを作成して、それぞれに対応したデータを入れアップロードしていると言った形です:relieved::relieved:。

```
    //@TODO 投稿処理を行う
    function create(Request $request){
        
        $id = Auth::id();
        $input = $request->only('author', 'title', 'body', 'image');
        
        $path = $request->file('image')->store('public/company');
        $path2 = basename($path); 
        $entry = new Modelのクラス名();
        $entry->author_id = $id;
        $entry->author = $input["author"];
        $entry->title = $input["title"];
        $entry->image_path = $path2;
        $entry->body = $input["body"];
        
        $entry->save();
        return redirect('/log')->with([
            "image"  => basename($path)]);
    }
```

#Viewの設計

```top.php
<!-- 投稿フォーム -->
@include("/Bulletin_board/form")

<h2>記事一覧</h2>


@php
    $i = 0;
@endphp

@foreach ($item_list as $item)
    @php
        if ($i >= 3){
        break;
        }
    @endphp
    <div class="entry">
        <h5>{{ $item->title }}</h5>
        <div>
            {!! nl2br(e($item->body)) !!}
        </div>
        <div>

        <img src="{{ asset("/storage/company") }}/{{ $item->image_path }}" alt="">


        </div>
        <!-- @if(Session::has('image'))
            <div>
                <img src="{{ asset("/storage/company") }}/{{ session('image') }}" alt=""> 
            </div>
        @endif -->
    </div>
    @php
        $i++;
    @endphp
@endforeach        
@if(count($item_list) < 1)
<p>投稿がありません</p>
@endif
```

```second.php
<form method="post" action="/create" enctype="multipart/form-data">
	@csrf

	<div>
		<label>Name</label><br />
		<input type="text" name="author" value="" placeholder="お名前" />
	</div>

	<div>
		<label>Title</label><br />
		<input type="text" name="title" value="" placeholder="タイトル" />
	</div>

	<div>
		<label>Body</label><br />
		<textarea name="body"></textarea>
	</div>

    <div>
        <input type="file" name="image">
    </div>

    <input type="submit" value="投稿" /> 
</form>
```
今回は、またフォーム画面の内容を共有する可能性を考慮して、formと投稿結果を分けて書くようにしました！
もちろん今回の内容は、一つのファイルで書くことはできます！（中身が少し変える必要がありますが、、、）
さて構成の説明に移ります。

```
@include("/Bulletin_board/form")

<h2>記事一覧</h2>


@php
    $i = 0;
@endphp

@foreach ($item_list as $item)
    @php
        if ($i >= 3){
        break;
        }
    @endphp
    <div class="entry">
        <h5>{{ $item->title }}</h5>
        <div>
            {!! nl2br(e($item->body)) !!}
        </div>
        <div>

        <img src="{{ asset("/storage/company") }}/{{ $item->image_path }}" alt="">

    @php
        $i++;
    @endphp
@endforeach        
```
まず```@include("/Bulletin_board/form")```はbladeの@includeディレクティブを用いて、もう一つのviewの画面を持ってきました。

```
@php
    $i = 0;
@endphp

@foreach ($item_list as $item)
    @php
        if ($i >= 3){
        break;
        }
    @endphp

@php
    $i = 0;
@endphp
```
今は、viewに降順で指定したテーブルの情報を全部持ってきています。しかし全体を表示すると多くて鬱陶しいので、データを3個だけ取り出すように動かします。仕組みは、foreachでテーブルのデータを繰り返して取り出す際に、カウントアップ関数を入れます。そしてカウントが3以上になるとbreakが動いて、foreachが止まります。（0,1,2の3回です。）余談ですがデータを制限して表示するやり方には、ページネーションを使った方法もあります。
あとの内容は、取り出してきたデータを表示しています。

#参考にしたサイト
[laravelの掲示板作成](https://note.com/laravelstudy/n/n731ccef3756c#826Q0)
[dbの取り出し方一覧](https://blog.capilano-fw.com/?p=665#latest)
[descとASCについて](https://mgate.info/computer/software/msoffice/access/456/)
[foreachで繰り返す回数を指定する](https://hacknote.jp/archives/20229/)

#終わりに
今回は掲示板をlaravel8を使って制作しました。制作期間は、二日ほどなので、比較的簡単な内容になっていると思います。最後にもしいい記事だった:laughing::laughing:と思っていただけた際は、フォローお願いします！！！