XOOPS輕鬆架 - 線上書籍

:::

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

### 一、載入SweetAlert2

1. 直接刪除實在太可怕，一個不小心就會把所有資料刪掉，因此，在刪除之前加個確認動作會比較好一點
2. 開啟`\專案\resources\views\layouts\app.blade.php`主視圖，引入js以及子視圖，並新增一個 `@yield` 命令，已方便各個子視圖放置一些各自的 javascript 語法： 
    ```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`來紀錄題目編號，等一下刪除時會用到。 
    ```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`來紀錄測驗編號。 
    ```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

書籍目錄

快速登入

計數器