Tutorial Laravel Splade #6 - Edit dan Update Data ke Dalam Database

Rafi Taufiqurrahman
Sebaik baiknya manusia adalah yang bermanfaat bagi orang lain.
21 November 2024
Tutorial Laravel Splade #6 - Edit dan Update Data ke Dalam Database

Setelah berhasil melakukan Insert data baru sekarang kita akan belajar bersama-sama bagaimana caranya melakukan update data ke dalam database.

Langkah - 1 Menambahkan Method Edit dan Update

Sekarang, silahkan teman-teman buka file app/Http/Controllers/PostController.php, kemudian ubah kode-nya sampai berikut ini :

<?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'));
    }
}

Dari perubahan kode di atas, pertama kita melakukan import Facade Storage dari Laravel. Ini akan kita gunakan untuk menghapus file gambar yang ada di project laravel kita.

use Illuminate\Support\Facades\Storage;

Kemudian kita menambahkan sebuah method baru dengan nama edit dan di dalamnya kita lakukan route model binding dengan nama $post

/**
*  display form edit
*/
public function edit(Post $post)
{
	// masukan kode disini...
}

Di dalam method tersebut kita melakukan sebuah render view yang nanti akan di buat yaitu : resource/views/posts/edit.blade.php. Jika teman-teman cari file tersebut, maka tidak akan menemukannya karena disini kita akan membuatnya nanti.

// render view
return view('posts.edit', [
    'post' => $post
]);

Setelah itu, kita juga membuat sebuah method baru dengan nama update. Method ini kita gunakan untuk melakukan proses update data kedalam database kita dan tidak lupa pada method ini kita lakukan route model binding

/**
 *  update post data by id
 */
public function store(Post $post, Request $request)
{
		// masukan kode disini...
}

Di dalam method tersebut, pertama-tama kita membuat sebuah validasi terlebih dahulu, fungsinya untuk memastikan data yang dikirimkan sudah sesuai.

// validate request
$this->validate($request, [
    'image'     => 'nullable|image|mimes:jpeg,jpg,png',
    'title'     => 'required|min:5',
    'content'   => 'required|min:10'
]);

Dari validasi di atas, kurang lebih penjelasannya seperti berikut ini :

KEY VALIDATION KETERANGAN
image nullable field tidak wajib diisi
image fied harus berupa gambar
mimes:jpeg, jpg, png field harus memiliki ekstensi jpeg, jpg dan png
title required field wajib diisi
min:5 field minimal memiliki 5 karakter/huruf.
content required field wajib diisi
min:10 field minimal memiliki 10 karakter/huruf.

Jika data yang dikirimkan sudah sesuai dengan validasi diatas, maka langkah selanjutnya kita melakukan update data berdasarkan id post data tersebut.

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

Di atas, kita melakukan update data tanpa melakukan update data gambar kita.

// 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(),
    ]);
}

Selanjutnya kita melakukan pengecekan apakah user mengirimkan request yang berjenis file yang bernama image. Request tersebut merupakan file yang dikirimkan oleh form kita.

Setelah itu, kita upload gambar tersebut menggunakan method storeAs dan kita simpan file tersebut ke dalam folder storage/app/public/posts dan nama file gambar tersebut akan di generate secara acak menggunakan method hashName().

Kemudian kita melakukan hapus data gambar yang lama menggunakan Storage::delete.

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

Dan yang terakhir kita melakukan proses update data gambar kita ke dalam database.

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

Jika proses update data berhasil dilakukan, maka kita akan melakukan render sebuah view dengan nama posts.index.

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

Langkah - 2 Membuat View Edit

Setelah berhasil membuat 2 method baru di dalam controller, maka kita bisa lanjutkan dengan membuat sebuah view untuk menampilkan halaman ubah data posts kita.

Silahkan teman-teman buat file baru dengan nama update.blade.php di dalam folder resource/views/posts, kemudian masukan kode berikut ini :

<x-layout>
    <x-slot name="header">
        {{ __('Posts Edit') }}
    </x-slot>

    <x-panel>
        <x-splade-form :default="['title' => $post->title, 'content' => $post->content]" :action="route('posts.update', $post->id)" class="flex flex-col gap-4" method="put">
            <div class="flex gap-4">
                {{-- form input --}}
                <div class="w-1/2 flex flex-col gap-4">
                    <div class="border-b p-2">
                        <h1 class="text-lg text-gray-700 font-semibold">UPDATE POST</h1>
                    </div>
                    <x-splade-file name="image" :show-filename="true" label="Image" />
                    <x-splade-input name="title" type="text" label="Title" placeholder="Input your title post" />
                    <x-splade-textarea name="content" autosize label="Content" />
                    <div class="flex gap-2 items-center">
                        <button type="submit"
                            class="bg-gray-700 p-2 text-white rounded-md text-sm flex items-center gap-1 hover:bg-gray-800">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                class="icon icon-tabler icon-tabler-device-floppy w-4 h-4" width="24" height="24"
                                viewBox="0 0 24 24" stroke-width="1.2" stroke="currentColor" fill="none"
                                stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2"></path>
                                <path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
                                <path d="M14 4l0 4l-6 0l0 -4"></path>
                            </svg>
                            Update
                        </button>
                        <Link href="/posts"
                            class="bg-rose-700 p-2 text-white rounded-md text-sm flex items-center gap-1 hover:bg-rose-800">
                        <svg xmlns="http://www.w3.org/2000/svg"
                            class="icon icon-tabler icon-tabler-arrow-narrow-left w-4 h-4" width="24" height="24"
                            viewBox="0 0 24 24" stroke-width="1.2" stroke="currentColor" fill="none"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M5 12l14 0"></path>
                            <path d="M5 12l4 4"></path>
                            <path d="M5 12l4 -4"></path>
                        </svg>
                        Back
                        </Link>
                    </div>
                </div>
                {{-- preview image --}}
                <div class="w-1/2">
                    <div class="flex flex-col gap-4" v-if="form.image">
                        <div class="border-b p-2">
                            <h1 class="text-lg text-gray-700 font-semibold">PREVIEW IMAGE</h1>
                        </div>
                        <img v-if="form.image" :src="form.$fileAsUrl('image')" class="rounded-md" />
                    </div>
                </div>
            </div>
        </x-splade-form>
    </x-panel>
</x-layout>

Dari penambahan kode diatas, pertama-tama kita gunakan sebuah component layout yang telah disedikan oleh splade.

<x-layout>

// masukan kode disini...

</x-layout>

Kemudian kita set nama header pada component layout kita dengan nama Posts Update.

<x-slot name="header">
	{{ __('Posts Update') }}
</x-slot>

Selanjutnya kita membuat sebuah form dari component splade form yang d mana action-nya kita arahkan ke dalam route yang bernama posts.update dan kita berikan paramater ID, kemudian route tersebut akan memanggil sebuah method update yang berada pada PostController kita. tidak lupa di sini kita memanfaat fitur component splade form untuk melakukan binding data kita yang sebelumnya dengan mendifinisikan sebauh attribute default dan kita isikan dengan berbagai macam data sesuai dengan kebutuhan kita, disini kita melakukan binding untuk data title dan content.

<x-splade-form :default="['title' => $post->title, 'content' => $post->content]" :action="route('posts.update', $post->id)" class="flex flex-col gap-4" method="put>

	// masukan kode disini...
	
</x-splade-form>

Disini kita juga memanggil beberapa component splade yang telah disediakan diantaranya :

  • <x-splade-file/>

    Pada component ini kita gunakan untuk melakukan proses upload gambar kedalam form kita, kemudian kita juga mendefinisikan beberapa attribute diantaranya name, show-filename, dan label.

  • <x-spade-input/>

    Pada component ini kita gunakan untuk melakukan proses input title dari posts kita, disini kita juga mendefinisikan beberapa attribute diantaranya name, type, label, dan placeholder.

  • <x-splade-textarea/>

    Pada component ini kita gunakan untuk melakukan proses input content dari posts kita, disni kita juga mendefinisikan beberapa attribute diantaranya name dan content.

Langkah - 3 Uji Coba Update Data Post

Silahkan teman-teman klik button dengan icon edit pada halaman posts.index atau bisa juga ke URL berikut ini http://localhost:8000/posts/1/edit, jika berhasil maka akan menampilkan hasil seperti berikut ini :

post-create

Silahkan masukan data-data yang diinginkan, kemudian klik button Save. Jika berhasil maka kita akan di arahkan ke halaman posts.index.

post-store

Membangun Aplikasi Inventory Dengan Laravel & Tailwind CSS: https://santrikoding.com/ebook/membangun-aplikasi-inventory-dengan-laravel-tailwind-css?ref=8659VS4962

Membangun Website Online Course Dengan Laravel, Alpine.js dan Tailwind CSS: https://santrikoding.com/ebook/membangun-website-online-course-dengan-laravel-alpinejs-dan-tailwind-css?ref=8659VS4962

Laravel SPA Tailwind CSS
Rafi Taufiqurrahman
Sebaik baiknya manusia adalah yang bermanfaat bagi orang lain.

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

TRAKTEER SAWERIA
KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami