Tutorial : Delete data dari Database Di Laravel Splade

Tutorial : Delete data dari Database Di Laravel Splade

Halo DEV! bahagia sekali masih bisa bertemu pada pembahasan kali ini, semoga Kalian semua di beri kesahatan dan kemurahan rizki yang berlimpah, amin. Mari kita lanjutkan pembahasan berikutnya mengenai Laravel Splade, dimana kita sudah melewati beberapa langkah, dari Instal Laravel Splade , hingga yang terahir kita bahas yaitu Edit dan Update data Laravel Splade. Untuk kali ini kita lanjutkan pembahasan mengenai Tutorial : Delete data dari Database di Laravel Splade.

Pendahuluan

Dalam dunia pengembangan web, Laravel adalah salah satu framework PHP yang banyak digunakan karena menawarkan berbagai fitur dan kemudahan dalam membuat aplikasi web yang modern dan profesional. Laravel juga memiliki sistem templating yang disebut Splade, yang memungkinkan kita untuk membuat tampilan web yang dinamis dan elegan dengan sintaks yang sederhana dan intuitif. Dalam artikel ini, kita akan belajar bagaimana menggunakan Splade untuk menghapus data dari database dengan mudah dan cepat.

Langkah 1: Menambahkan Method Destroy

Untuk dapat menghapus data dari database, kita perlu membuat sebuah method yang dapat melakukan operasi tersebut. Method ini akan diberi nama destroy dan ditempatkan pada controller yang sesuai dengan model data yang ingin dihapus. Dalam kasus ini, kita akan menggunakan controller PostController yang sudah kita buat sebelumnya.

Method destroy akan menerima sebuah parameter berupa id dari data yang ingin dihapus. Parameter ini akan dikirimkan melalui URL ketika user mengklik tombol delete pada halaman web kita. Method destroy akan menggunakan model Post yang sudah kita definisikan untuk mencari dan menghapus data yang memiliki id yang sama dengan parameter yang diterima.

Setelah data berhasil dihapus, method destroy akan mengembalikan user ke halaman posts dengan mengirimkan sebuah pesan status yang memberitahu bahwa data telah berhasil dihapus. Pesan ini akan ditampilkan pada halaman web menggunakan session flash data.

Berikut adalah kode lengkap dari method destroy yang kita buat:

<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use ProtoneMedia\Splade\SpladeTable;
class PostController extends Controller
{
    /**
     * display all post data
     */
    public function index()
    {
        // get all post data
        $posts = Post::latest()->paginate(7);
        // render view
        return view('posts.index', [
            'posts' => SpladeTable::for($posts)
            ->column('image')
            ->column('title')
            ->column('content')
            ->column('action')
        ]);
    }
    /**
     *  display form create
     */
    public function create()
    {
        // render view
        return view('posts.create');
    }
    /**
     *  insert new post data
     */
    public function store(Request $request)
    {
        // validate request
        $this->validate($request, [
            'image'     => 'required|image|mimes:jpeg,jpg,png',
            'title'     => 'required|min:5',
            'content'   => 'required|min:10'
        ]);
        // upload image
        $image = $request->file('image');
        $image->storeAs('public/posts', $image->hashName());
        // insert new post to db
        Post::create([
            'title' => $request->title,
            'content' => $request->content,
            'image' => $image->hashName(),
        ]);
        // render view
        return redirect(route('posts.index'));
    }
    /**
     *  display form edit
     */
    public function edit(Post $post)
    {
        // render view
        return view('posts.edit', [
            'post' => $post
        ]);
    }
    /**
     *  update post data by id
     */
    public function update(Post $post, Request $request)
    {
        // validate request
        $this->validate($request, [
            'image'     => 'nullable|image|mimes:jpeg,jpg,png',
            'title'     => 'required|min:5',
            'content'   => 'required|min:10'
        ]);
        // update post data by id
        $post->update([
            'title' => $request->title,
            'content' => $request->content,
        ]);
        // check if user upload new image

        if($request->file('image')){

            // upload image

            $image = $request->file('image');

            $image->storeAs('public/posts', $image->hashName());
            // delete old image
            Storage::delete('public/posts/'. $post->image);
            // update post data image
            $post->update([
                'image' => $image->hashName(),
            ]);
        }
        // render view
        return redirect(route('posts.index'));
    }
    /**
     *  delete post data by id
     */
    public function destroy(Post $post)
    {
        // delete post image
        Storage::delete('public/posts/'. $post->image);
        // delete post data by id
        $post->delete();
        // render view
        return back();
    }
}

 

Langkah 2: Menambahkan Button Delete

Setelah membuat method destroy pada controller, kita perlu membuat sebuah button yang dapat memicu method tersebut ketika user ingin menghapus data. Button ini akan ditempatkan pada file view yang menampilkan data yang ingin dihapus. Dalam kasus ini, kita akan menggunakan file view posts/index.blade.php yang sudah kita buat sebelumnya.

Button delete ini akan berupa sebuah form yang mengirimkan data melalui method post. Form ini akan memiliki dua input tersembunyi, yaitu @method('delete') dan @csrf. Input pertama digunakan untuk menentukan bahwa form ini akan mengirimkan request dengan method delete, yang sesuai dengan route yang kita definisikan sebelumnya. Input kedua digunakan untuk mencegah serangan CSRF, yang merupakan fitur keamanan dari Laravel.

Form ini juga akan memiliki sebuah action yang berisi URL yang mengarah ke method destroy pada controller, dengan parameter id dari data yang ingin dihapus. Parameter ini akan diambil dari variabel $post yang dikirimkan dari controller ke view. Form ini akan memiliki sebuah button dengan class btn btn-danger yang akan menampilkan teks Delete.

Berikut adalah kode lengkap dari button delete yang kita tambahkan pada file view:

 

<?php



namespace App\Http\Controllers;



use App\Models\Post;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use ProtoneMedia\Splade\SpladeTable;



class PostController extends Controller
{
    /**
     * display all post data
     */
    public function index()
    {
        // get all post data
        $posts = Post::latest()->paginate(7);



        // render view
        return view('posts.index', [
            'posts' => SpladeTable::for($posts)
            ->column('image')
            ->column('title')
            ->column('content')
            ->column('action')
        ]);
    }



    /**
     *  display form create
     */
    public function create()
    {
        // render view
        return view('posts.create');
    }



    /**
     *  insert new post data
     */
    public function store(Request $request)
    {
        // validate request
        $this->validate($request, [
            'image'     => 'required|image|mimes:jpeg,jpg,png',
            'title'     => 'required|min:5',
            'content'   => 'required|min:10'
        ]);



        // upload image
        $image = $request->file('image');
        $image->storeAs('public/posts', $image->hashName());



        // insert new post to db
        Post::create([
            'title' => $request->title,
            'content' => $request->content,
            'image' => $image->hashName(),
        ]);



        // render view
        return redirect(route('posts.index'));
    }




    /**
     *  display form edit
     */
    public function edit(Post $post)
    {
        // render view
        return view('posts.edit', [
            'post' => $post
        ]);
    }



    /**
     *  update post data by id
     */
    public function update(Post $post, Request $request)
    {
        // validate request
        $this->validate($request, [
            'image'     => 'nullable|image|mimes:jpeg,jpg,png',
            'title'     => 'required|min:5',
            'content'   => 'required|min:10'
        ]);



        // update post data by id
        $post->update([
            'title' => $request->title,
            'content' => $request->content,
        ]);



        // check if user upload new image
        if($request->file('image')){
            // upload image
            $image = $request->file('image');
            $image->storeAs('public/posts', $image->hashName());



            // delete old image
            Storage::delete('public/posts/'. $post->image);



            // update post data image
            $post->update([
                'image' => $image->hashName(),
            ]);
        }



        // render view
        return redirect(route('posts.index'));
    }



    /**
     *  delete post data by id
     */
    public function destroy(Post $post)
    {
        // delete post image
        Storage::delete('public/posts/'. $post->image);



        // delete post data by id
        $post->delete();



        // render view
        return back();
    }
}

 

Langkah 3 : Uji coba

Langkah terakhir adalah melakukan uji coba untuk memastikan bahwa fungsi hapus data yang kita buat sudah bekerja dengan benar. Untuk itu, kita perlu menjalankan aplikasi web kita dan mengakses halaman posts yang menampilkan daftar data yang tersimpan di database.

Pada halaman posts, kita akan melihat button delete yang kita tambahkan sebelumnya pada setiap baris data. Button ini akan menghapus data yang sesuai dengan id yang tertera pada baris tersebut. Untuk menghapus data, kita cukup mengklik button delete dan mengkonfirmasi aksi yang kita lakukan.

Jika proses penghapusan data berhasil, kita akan diarahkan kembali ke halaman posts dengan sebuah pesan yang memberitahu bahwa data telah berhasil dihapus. Pesan ini akan muncul pada bagian atas halaman dengan warna hijau. Pesan ini akan hilang setelah beberapa detik.

Dengan demikian, kita telah berhasil membuat fungsi hapus data dari database menggunakan Laravel Splade. Kita dapat mengulangi proses ini untuk menghapus data lain yang tidak dibutuhkan lagi. Selamat, Anda telah menyelesaikan tutorial ini! 😊

Published on February 02, 2024
Last updated on June 03, 2026