XOOPS輕鬆架 - 線上書籍

:::

8-1 安裝marvinlabs/laravel-html-bootstrap-4套件

Laravel 5.6 入門講義
================

1. 先來製作發佈測驗的前端界面
2. 修改或建立 `/專案/resources/views/exam/create.blade.php`，簡易版可以這樣寫： 
    ```markup
    @extends('layouts.app')
    @section('content')
        <h1>{{ __('Create Exam') }}</h1>
        @can('建立測驗')
            {{ bs()->openForm('post', '/exam') }}
                {{ bs()->text('title')->placeholder('請填入測驗標題') }}
                {{ bs()->radioGroup('enable', [1 => '啟用', 0 => '關閉'])
                    ->selectedOption(1)
                    ->inline() }}
                {{ bs()->submit('建立測驗') }}
            {{ bs()->closeForm() }}
        @else
            @component('bs::alert', ['type' => 'danger'])
                @slot('heading')
                無建立測驗的權限
                @endslot
            @endcomponent
        @endcan
    @endsection
    ```
3. 先用`@can('建立測驗')`來判斷有無權限，若有，就製作表單。若無，則進入`@else`顯示警告畫面。  
     ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/37/l56_039.png)
4. `{{ bs()->openForm('post', '/exam') }}`是用來產生表單，以`{{ bs()->closeForm() }}`做結尾，裡面的設定說明如下：
    
    
    - 回顧一下用來儲存的路由：動作是post，路徑是`/exam`，別名是`exam.store`，[詳情請看這裡](https://campus-xoops.tn.edu.tw/modules/tad_book3/page.php?tbdsn=1018)。
    - 用`url('/exam')`來設定表單欲傳送的位址，因為是用post方式傳遞，所以路徑直接指向測驗的路徑即`/exam`即可，不需要指定`/exam/store`。
5. 簡易版的看起來像這樣  
     ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/37/l56_040.png)
6. 可以加入表單群組，做成水平表單 
    ```markup
    @extends('layouts.app')
    @section('content')
        <h1>{{ __('Create Exam') }}</h1>
        @can('建立測驗')
            {{ bs()->openForm('post', '/exam') }}
                {{ bs()->formGroup()
                        ->label('測驗標題', false, 'text-sm-right')
                        ->control(bs()->text('title')->placeholder('請填入測驗標題'))
                        ->showAsRow() }}
    
                {{ bs()->formGroup()
                        ->label('測驗狀態', false, 'text-sm-right')
                        ->control(bs()->radioGroup('enable', [1 => '啟用', 0 => '關閉'])
                                    ->selectedOption(1)
                                    ->inline())
                        ->showAsRow() }}
    
                {{ bs()->formGroup()
                        ->label('')
                        ->control(bs()->submit('建立測驗'))
                        ->showAsRow() }}
            {{ bs()->closeForm() }}
        @else
            @component('bs::alert', ['type' => 'danger'])
                @slot('heading')
                無建立測驗的權限
                @endslot
            @endcomponent
        @endcan
    @endsection
    
    ```
7. 看起來像這樣：![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/37/l56_041.png)
 
[![到GitHub觀看此單元程式異動](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/34/to_github.png)](https://github.com/tad0616/exam56/commit/e71cc46f7d5734c45709fc8600d5d165c8afd191)

:::

書籍目錄

展開 | 闔起

快速登入

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1165

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器