CRUD Manajemen Artikel - Menghapus Artikel

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

/** ... **/
use Illuminate\Http\JsonResponse;
use Symfony\Component\HttpFoundation\Response;
/** ... **/

class ArticleController extends Controller
{
    /** ... **/

    /**
     * Remove the specified resource from storage.
     */
    public function destroy(Article $article): JsonResponse
    {
        try {
            if ($article->feature_image_url) {
                $filePath = "$this->storagePath/$article->feature_image_url";

                if (Storage::exists($filePath)) {
                    Storage::delete($filePath);
                }
            }

            $article->delete();

            return response()->json(['message' => 'Data berhasil dihapus!']);
        } catch (\Exception $e) {
            report($e);

            return response()->json(['message' => 'Data tidak berhasil dihapus!'], Response::HTTP_INTERNAL_SERVER_ERROR);
        }
    }
}

1
2
3
4
5

import 'laravel-datatables-vite';
import './bootstrap';
import htmx from 'htmx.org';

window.htmx = htmx;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

/** ... **/

    /**
     * Build the DataTable class.
     *
     * @param QueryBuilder<Article> $query Results from query() method.
     */
    public function dataTable(QueryBuilder $query): EloquentDataTable
    {
        return (new EloquentDataTable($query))
            ->addColumn('action', function (Article $article) {
                $action = [
                    "<a href='".route('articles.show', $article)."' class='btn btn-sm btn-primary'><i class='bi bi-eye-fill'></i></a>",
                    "<a href='".route('articles.edit', $article)."' class='btn btn-sm btn-success'><i class='bi bi-pencil-fill'></i></a>",
                    "<a
                        hx-vals='{\"_token\": \"".csrf_token()."\"}'
                        hx-delete='".route('articles.destroy', $article)."'
                        hx-confirm='Apakah kamu yakin akan menghapus data ini?'
                        hx-swap='none'
                        hx-on::after-request=\"onDeleteAfterRequest(event)\"
                        class='btn btn-sm btn-danger'
                    >
                        <i class='bi bi-trash3-fill'></i>
                    </a>",
                ];

                return implode(' ', $action);
            })
            ->rawColumns(['status', 'action'])
            ->setRowId('id');
    }

    /**
     * Optional method if you want to use the html builder.
     */
    public function html(): HtmlBuilder
    {
        return $this->builder()
                    ->drawCallback('function () {
                        htmx.process(this.api().table().node());
                    }')
                    ->setTableId('article-table')
                    ->columns($this->getColumns())
                    ->minifiedAjax()
                    ->orderBy(5)
                    ->buttons([
                        Button::make('excel'),
                        Button::make('csv'),
                        Button::make('pdf'),
                        Button::make('print'),
                    ]);
    }

    /**
     * Get the dataTable columns definition.
     */
    public function getColumns(): array
    {
        return [
            Column::computed('action')
                  ->exportable(false)
                  ->printable(false)
                  ->addClass('text-center')
                  ->width(125)
                  ->title(''),
            Column::make('title')->title('Judul'),
            Column::make('status')->title('Status'),
            Column::make('published_at')->title('Waktu Publikasi'),
            Column::make('created_at')->title('Waktu Pembuatan'),
            Column::make('updated_at')->title('Waktu Pembaruan'),
        ];
    }

/** ... **/

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

/** ... **/

@push('scripts')
    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}

    <script type="module">
        window.onDeleteAfterRequest = (ev) => {
            const { status, responseText } = ev.detail.xhr;
            const response = JSON.parse(responseText);

            if (status === 200) {
                const instance = $('#{{ $dataTable->getTableAttributes()['id'] }}').DataTable();
                instance.ajax.reload(null, false);
            }

            alert(response.message);
        }
    </script>
@endpush