XOOPS輕鬆架 - 線上書籍

:::

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

### 一、載入SweetAlert2

1. 直接刪除實在太可怕，一個不小心就會把所有資料刪掉，因此，在刪除之前加個確認動作會比較好一點
2. 開啟`\專案\resources\views\layouts\app.blade.php`主視圖，引入js以及子視圖，並新增一個 `@yield` 命令，已方便各個子視圖放置一些各自的 javascript 語法： ```
  <pre data-line="16,17,22">
  ```markup
  
  <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
  
      
      <meta name="csrf-token" content="{{ csrf_token() }}">
  
      <title>{{ config('app.name', 'Laravel') }}</title>
  
      
      <script src="{{ asset('js/app.js') }}" defer></script>
      <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
      <script src="https://unpkg.com/sweetalert2@7.18.0/dist/sweetalert2.all.js"></script>
  
  
      
  
      @yield('js')
  </body>
  
  </html>
  ```
  ```
 
### 二、題目的確認後刪除

1. 開啟`\專案\resources\views\layouts\show.blade.php`子視圖，先把刪除題目的按鈕簡化為一般的按鈕，在class中，我們加入`btn-del-topic`好讓jquery可以偵測刪除題目的按鈕是否有被按下，並利用`data-id`來紀錄題目編號，等一下刪除時會用到。 ```
  <pre data-line="3">
  ```markup
  <h3>            
  @can('建立測驗')
      <button type="button" class="btn btn-danger btn-del-topic" data-id="{{ $topic->id }}">刪除</button>
      <a href="{{route('topic.edit', $topic->id)}}" class="btn btn-warning">編輯</a>
      （{{$topic->ans}}）
  @endcan
  {{ bs()->badge()->text($key+1) }}
  {{ $topic->topic }}
  </h3>
  ```
  ```
2. 接著在同一個檔案下方，利用`@section('js')`加入 sweetalert2 語法，語法可參考<https://sweetalert2.github.io/>： 
  ```markup
  @section('js')
      <script>
          $(document).ready(function(){
              $('.btn-del-topic').click(function(){
                  var topic_id=$(this).data('id');                
                  swal({
                      title: "確定要刪除題目嗎？",
                      text: "刪除後該題目就消失救不回來囉！",
                      type: 'warning',
                      showCancelButton: true,
                      confirmButtonColor: "#DD6B55",
                      confirmButtonText: "是！含淚刪除！",
                      cancelButtonText: "不...別刪",
                  }).then((result) => {
                      if (result.value) {                        
                          axios.delete('/topic/' + topic_id)
                          .then(function(){
                              return swal("OK！刪掉題目惹！", "該題目已經隨風而逝了...", "success");
                          }).then(function () {
                              location.reload();
                          });
                      }
                  })
              });
          });
      </script>
  @endsection
  ```
  
  
  - 利用 `$('.btn-del-topic').click()`來偵測該刪除按鈕被按下的事件。
  - 利用jquery的`data()`函數取的`data-id`的值，這樣才知道要刪除哪一篇
  - 若使用者有按確定刪除，我們就利用axios以ajax的方式來執行HTTP的刪除動作，關於axios的使用可參考：<https://www.kancloud.cn/yunye/axios/234845>
  - 刪除後，會執行`location.reload();`以更新畫面
3. 由於刪除已經改成用ajax的方式來執行，因此，我們修改題目的控制器`\專案\app\Http\Controllers\TopicController.php`，把刪除的部份再簡化（無須轉向），到此，題目的確認後刪除就大公告成了！ 
  ```php
  public function destroy(Topic $topic)
  {
      $topic->delete();
  }
  ```
 
### 三、測驗的確認後刪除

1. 一樣開啟`\專案\resources\views\layouts\show.blade.php`子視圖，先把測驗的刪除按鈕簡化為一般的按鈕，在class中，我們加入`btn-del-exam`好讓jquery可以偵測測驗的刪除按鈕是否有被按下，並利用`data-id`來紀錄測驗編號。 ```
  <pre data-line="4">
  ```markup
  <h1 class="text-center">
      {{$exam->title}}
      @can('建立測驗')            
          <button type="button" class="btn btn-danger btn-del-exam" data-id="{{ $exam->id }}">刪除</button>
          <a href="{{route('exam.edit', $exam->id)}}" class="btn btn-warning">編輯</a>
      @endcan
  </h1>
  ```
  ```
2. 接著在`@section('js')`裡面再加上測驗刪除的事件，複製上方得來修改即可。 
  ```javascript
  // 刪除按鈕點擊事件
  $('.btn-del-exam').click(function() {
      // 獲取按鈕上 data-id 屬性的值，也就是編號
      var id = $(this).data('id');
      // 調用 sweetalert
      swal({
          title: "確定要刪除測驗嗎？",
          text: "刪除後該測驗連同所有題目就消失救不回來囉！",
          type: 'warning',
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "是！含淚刪除！",
          cancelButtonText: "不...別刪",
      }).then((result) => {
          if (result.value) {
              swal("OK！刪掉測驗惹！", "該測驗所有資料已經隨風而逝了...", "success");
              // 調用刪除介面，用 id 來拼接出請求的 url
              axios.delete('/exam/' + id).then(function () {
                  location.href='/exam';
              });
          }
      });
  });
  ```
  
  
  - 利用 `$('.btn-del-exam').click()`來偵測測驗刪除按鈕被按下的事件。
  - 利用jquery的`data()`函數取的`data-id`的值，這樣才知道要刪除哪一篇測驗
  - 刪除後，會執行`location.href`做轉向。
3. 接著修改題目的控制器`\專案\app\Http\Controllers\ExamController.php`，一樣把刪除的部份再簡化即可！ 
  ```php
  public function destroy(Exam $exam)
  {
      $exam->delete();
  }
  ```
 
[![到GitHub觀看此單元程式異動](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/34/to_github.png)](https://github.com/tad0616/exam56/commit/723202dcaf5121caa9700297afdf55fb7ae5251f)

</body></html>

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

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

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器