October 13, 2019

30天成爲Laravel萌新（第26天） - 客製化404錯誤頁面

HTTP協議上存在許多狀態碼，其中400系列、500系列錯誤可能是最常見到。200、300很難被注意到。恐怕又以404錯誤、403錯誤、500錯誤、503錯誤最常見。一個好的錯誤提示頁面，可以帶來很好的使用體驗。你可以看看別人怎麼設計(以及2018年不可錯過的創意404報錯設計)，甚至更有404 PAGE TEMPLATE (https://www.404pagefree.com/) 可以直接下載404錯誤頁面模板(這網址真有趣)，裡頭模板多以CC-BY 3.0姓名標示授權，可用於商業用途。

404 Page image

那麼在Laravel要怎麼客製化這些錯誤提示頁面？以404錯誤頁面為例，可以建立resources/views/errors/404.blade.php檔案，寫入以下內容：

@extends("base",['title'=>'哎呀，找不著頁面'])

@section('title', '哎呀，找不著頁面')

@section('body')
    <h1>{{__('404 error message')}}</h1>
    <b>哎呀，找不著頁面</b>
    <p>
        <ul>
            <li><a href="/">點擊我，回到首頁</a></li>
            <li><a href="{{route('blog/post.index')}}">我的網誌</a></li>
        </ul>
    </p>
@endsection

同樣的…CSS不是本系列重點……

October 12, 2019

30天成爲Laravel萌新（第25天） - 紀錄檔

使用Logging

現在，要再回到laradock來。不過同樣的，Lavavel儲存紀錄檔的地方也是在storage/logs。這裡會儲存使用Log::info()所寫下的紀錄。

docker-compose exec workspace bash -c "tail -f storage/logs/最新的log"

如果使用Linux的話，也可以直接：

tail -f storage/logs/最新的log

當然你也可以直接把紀錄檔，用文字編輯器開啟。不過上述會這麼做，是因為如次可以更簡單的在開發時除錯。有時候，Laravel錯誤訊息頁面提供的訊息並非一目瞭然，會需要用到printf方式除錯(我假設…你不動gdb，但用過最基本的除錯手法…)。在這裡，使用一系列Log::的方法，其中，Log::debug()就對應除錯資訊。這和我曾經寫過的瀏覽器console.log()外的一些其他用法有些像。

October 11, 2019

30天成爲Laravel萌新（第24天） - 頁面清單下篇(使用Pagnation和刪除按鈕)

就先來看看使用Laravel提供Pagination能夠多麼簡單。

首先，控制器只需要使用BlogPost::paginate($limit)查詢就好，並將查詢結果直接傳遞給視圖。

    public function index()
    {
        // 如果想要將每頁顯示數量變成可以調整的，
        // index需要傳入 (Request $request)，並由下方方式取得$limit傳入paginate
        // $limit = $request->query('limit', 30);
        $posts = BlogPost::paginate(30);

        return view("blog/index",[
            "posts"=>$posts,
        ]);
    }

BlogPost::paginate($limit)會自動根據Request的page參數取得存取的頁面，自動計算offset，並根據給予的每頁顯示數量限制來查詢。甚至連index()都不需要傳入Request $request。傳給視圖的也少了不少。說到視圖，立馬來看看變得多簡潔：

@section('body')
    <div class="container">
        <ul>
        @foreach ($posts as $post)
            <li>
                <a href="{{route('blog/post.show',['id'=>$post->id])}}">{{ $post->title }}</a>
            </li>
        @endforeach
        </ul>
    </div>

    {{ $posts->links() }}
@endsection

列出文章清單的部份，大致什麼太大變化。但是頁面頁數選項不再那麼複雜，沒錯，只需要$post->links()就好。他會自動生成符合Bootstrap的Pagination。在瀏覽器接受到的HTML樣子可能如下：

呵呵，根本不需要寫這麼麻煩…也太簡單了吧！

October 10, 2019

30天成爲Laravel萌新（第23天） - 頁面清單上篇

因為重點不在於CSS，不在於Bootstrap。其實大可以將頁面弄的很美觀。在Laravel專案資料夾中，其實有一個給npm使用的package.json檔案。不過還是來把重點放在Laravel上。

使用Pagnation前

Laravel提供一個超級簡單的方式，來處理分頁問題。不過在使用前，來看看原本要怎麼實現index()。不但要取得頁數，並計算檢索數量，然後從資料庫透過offset()、linit()的方式取得資料。

    public function index(Request $request)
    {
        $offset = $request->query("offset", 0);
        $limit = $request->query("limit", 30);
        $page = $request->query("page");

        if($page){
            $offset = ($page - 1) * $limit;
        }else{
            $page = ($offset / $limit) + 1;
        }

        $request->merge([
            "offset" => $offset,
            "page" => $page,
        ]);

        $posts = BlogPost::orderBy('activity_id','ASC')
                    ->offset($offset)
                    ->limit($limit)
                    ->get();
        return view("blog/index",[
            "posts"=>$posts,
            "page"=>$page,
            "total_pages" => $total_pages,
        ]);
    }

October 9, 2019

30天成爲Laravel萌新（第22天） - 資源控制器(Resource Controller) 下篇

最終，我決定將index()和destroy()另外寫。一個是寫完create()和edit()，destroy()也就不怎麼難。但是index()意外也能有豐富內容能寫…（加上有另一種用法我還不太會）

總體來說，這篇程式還是有些趕工粗糙….

重點觀念

@method的使用相當於隱藏欄位_method。
@csrf的使用

建立頁面模板

同樣的，先建立一個編輯頁面的模板resource/views/blog/edit.blade.php：

@extends("base",['title'=>'編輯文章'])

@section('title', '編輯文章')


@section('body')
    <form method="post" action="{{($type=="edit") ?
                    route("blog/post.update", ["id"=>$id]) :
                    route("blog/post.store")}}">
        @csrf
        @method(($type=="edit")? "patch" : "post")

        <label for="title">標題：</label>
        <input name="title" type="text" value="{{$title}}" id="title" />
        <br/>
        <label for="content">內容：</label>
        <textarea cols="30" id="content" name="content" rows="10">{{$content}}</textarea>
        <br/>
        <input name="" type="submit" value="儲存"/>
    </form>
@endsection

October 8, 2019

30天成爲Laravel萌新（第21天） - 資源控制器(Resource Controller) 中篇

現在，要正式把控制器與資料庫連結起來。順便偷埋之後兩個主題☻。

引入所需使用的套件

首先，得先把之前建立好的Model引入。另外，我們在偷偷引入一個Illuminate\Support\Facades\Log。

use Illuminate\Support\Facades\Log;
use App\BlogPost;
use Parsedown;

完成CRUD操作

Create / Store

    public function store(Request $request)
    {
        $title = $request->input("titile", "未命名文章");
        $content = $request->input("content");

        $post = new BlogPost;
        $post->title = $title;
        $post->content = $content;
        $post->save();

        Log::info("Store New Blog Post: id = $post->id");

        return redirect()->action(
            'Blog\PostController@show', ['id' => $post->id]
        );
    }

可以透過Request的input方法，取得POST來的資料，還可以補上預設參數。這邊取得標題與內容後，建立一個新的PostBlog實體存入資料庫。

Read / Show

    public function show($id){
        $post = BlogPost::find($id);

        if(! $post){
            abort(404);
        }

        $content = $post->content;

        {
            $Parsedown = new Parsedown();
            $content = $Parsedown->text($content);
        }

        return view("blog.post", [
            "title" => $post->titile,
            "content" => $content,
        ]);
    }

讀取與之前控制器的內容差不多。不同的是，需要先從資料庫尋找資料，如果找不到就回傳404找不到錯誤頁面。之後會對該頁面進行修改。現在http://localhost/blog/post/12 將會顯示404錯誤頁面，只有http://localhost/blog/post/1 才會出現之前填入的內容。