04-16-2019

Laravel _頁面撰寫

 

今天我們要來撰寫要顯示的頁面,

之前我們為Work建立了4個頁面,home、work、create、edit,

上次我們簡單的做了home的頁面,今天我們要來調整成我們一開始設計的格式。

 

Step1.

 

修正home頁面

 

在上一篇我們已經有改了一些home的內容,所以在這邊我就只寫foreach內的內容。

 

這邊要特別拿出來講的是delete的功能,在這邊我們使用form的方式,

這裡一樣需要開頭跟結束。

 

{{ Form::open(['method' => 'DELETE', 'route' => ['works.destroy', $work->id], 'style'=>'display:inline']) }}

{{ Form::submit('Delete', ['class' => 'btn btn-xc btn-danger']) }}

{{ Form::close() }}

 

開啟表單,進行http的刪除方式,並將路徑導向destroy function的頁面,

中間的form是delete button的形式,完成後關閉。



 

在還沒新增時是長這樣~

 

 

有文章之後的樣子~~



Step2.

製作work頁面

 

這邊的部分就是要將輸入的資料顯示在頁面上,

寫上{{ $work->content }} 後面名稱的部份是要填跟當初建立table的名稱一樣喔,

要不然會找不到欄位下的內容喔~~

 

文章內的樣子,嗯,看起來不怎麼樣~哈,但目前都有顯示出來了。

 

Step3.

 

製作create頁面

 

 

因為中間內容比較多所以我先合起來,在container的外要加入兩行功能。

 

<form action="{{ route('works.store') }} " method="post" enctype="multipart/form-data">

</form> 一樣需要開始跟結束,這裡的動作要導向store function並執行http的post。

<input type="hidden" name="_token" value=" {{ csrf_token() }}">

透過CSRF來做檢查及保護post的執行

 

 

input的寫法,在這裡有分成3種類別,

分別是text(詞)、textarea(文)、file(檔案),

其餘相同性質的東西就照寫只是改 ' ' 中的內容。

 

 

在整個input都寫完後,加入送出的按鈕。

 

 

出來後會變這樣~~

 

Step4.

 

製作edit頁面

 

一樣中間的內容我就先收起來。

 

{!! Form::model($work, ['route' => ['works.update', $work->id],

'method' => 'POST', 'files' => true]) !!}

 

這裡的意思是開啟model的內容,做update( )的工作,

並執行http post的指令,但因為HTML 只能支援post跟get的指令,

所以我們要加入下一行字來輔助不能執行的patch。

 

{{ method_field('PATCH') }}

加入隱藏的method來執行patch。

 

input的寫法,一樣分成3種類別,分

別是text(詞)、textarea(文)、file(檔案),

因為大致都相同所以我就只列出中間部分。

 

<input class="form-control" type="text" name="title" id="title"  value="{{ $work->title}}" required>

<input class="file" type="file" name="cover_image" id="cover_image" id="cover_image">

 

{{ Form::textarea('content', null, ['class' => 'textarea']) }}

送出的寫法是跟store是一樣的喔。

 

以上是頁面的初步撰寫~