公司導入 Laravel 分享 - 10. 進階實作 - 修改視圖

create.blade.php
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="page-header">
        <h1>新增文章</h1>
    </div>
    {!! Form::open(['route' => 'post.store', 'class' => 'form-horizontal']) !!}
        <div class="form-group">
            {!! Form::label('title', '標題', ['class' => 'col-sm-2 control-label']) !!}
            <div class="col-sm-10">
                {!! Form::text('title', null, ['class' => 'form-control']) !!}
            </div>
        </div>
        <div class="form-group">
            {!! Form::label('content', '內容', ['class' => 'col-sm-2 control-label']) !!}
            <div class="col-sm-10">
                {!! Form::textarea('content', null, ['class' => 'form-control']) !!}
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                {!! Form::submit('送出', ['class' => 'btn btn-primary']) !!}
            </div>
        </div>
    {!! Form::close() !!}
</div>
@endsection
edit.blade.php
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="page-header">
        <h1>編輯文章</h1>
    </div>
    {!! Form::model($post, ['route' => ['post.update', $post->id], 'method' => 'put', 'class' => 'form-horizontal']) !!}
        <div class="form-group">
            {!! Form::label('title', '標題', ['class' => 'col-sm-2 control-label']) !!}
            <div class="col-sm-10">
                {!! Form::text('title', null, ['class' => 'form-control']) !!}
            </div>
        </div>
        <div class="form-group">
            {!! Form::label('content', '內容', ['class' => 'col-sm-2 control-label']) !!}
            <div class="col-sm-10">
                {!! Form::textarea('content', null, ['class' => 'form-control']) !!}
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                {!! Form::submit('更新', ['class' => 'btn btn-primary']) !!}
            </div>
        </div>
    {!! Form::close() !!}
</div>
@endsection

有沒有發現一樣的地方?沒有使用套件的時候,編輯畫面表單的值需要我們自己去填充,如果表單欄位很多的時候超級麻煩,而且因為這一點點的不一樣使得我們表單要拉出來寫也不是,不拉出來又覺得詭異,雖然我們也可以自己判斷 isset($post->title) ? $post->title : null 這樣寫下去樣板就更髒了,這時候套件的好處就體現出來了。

所以我們再修改一下
create.blade.php
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="page-header">
        <h1>新增文章</h1>
    </div>
    {!! Form::open(['route' => 'post.store', 'class' => 'form-horizontal']) !!}

        @include('post._form')

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                {!! Form::submit('送出', ['class' => 'btn btn-primary']) !!}
            </div>
        </div>
    {!! Form::close() !!}
</div>
@endsection
edit.blade.php
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="page-header">
        <h1>編輯文章</h1>
    </div>
    {!! Form::model($post, ['route' => ['post.update', $post->id], 'method' => 'put', 'class' => 'form-horizontal']) !!}

        @include('post._form')

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                {!! Form::submit('更新', ['class' => 'btn btn-primary']) !!}
            </div>
        </div>
    {!! Form::close() !!}
</div>
@endsection
_form.blade.php
<div class="form-group">
    {!! Form::label('title', '標題', ['class' => 'col-sm-2 control-label']) !!}
    <div class="col-sm-10">
        {!! Form::text('title', null, ['class' => 'form-control']) !!}
    </div>
</div>
<div class="form-group">
    {!! Form::label('content', '內容', ['class' => 'col-sm-2 control-label']) !!}
    <div class="col-sm-10">
        {!! Form::textarea('content', null, ['class' => 'form-control']) !!}
    </div>
</div>

留言