XOOPS輕鬆架 - 線上書籍

:::

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

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

1. 先來製作發佈測驗的前端界面
2. 修改或建立 `/專案/resources/views/exam/create.blade.php`，簡易版可以這樣寫： ```
  <pre data-line="4-18">
  ```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. 可以加入表單群組，做成水平表單 ```
  <pre data-line="6-21">
  ```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

書籍目錄

快速登入

計數器