Tutorial: Insert Data Ke Dalam Database Di Laravel Splade

Halo Sobat Dev, kembali lagi pada pembahasan Laravel Splade. Setelah kita berhasil menjalankan Tutorial: Membuat View dan Menampilkan Data Di Laravel Splade , mari kita lanjutkan project kita di laravel splade. Untuk pembahasan kali ini kita akan melakukan Tutorial: Insert Data Ke Dalam Database Di Laravel Splade.

Pengertian Insert Data

Seperti yang kalian ketahui, Insert data adalah sebuah metode memasukan data ke dalam database. Ada berbagai macam model database, namun pada pembahasan kali ini kita akan  belajar tutorial: insert data ke dalam database di laravel splade. Untuk melakukan insert data di laravel splade, langkah pertama adalah membuat model dan migration yang telah kita pelajari pada pembahasan lalu. Mari langsung saja kita mulai belajar insert data kedalam database di laravel splade.

Langkah - Langkah Tutorial: Insert Data Ke Dalam Database Di Laravel Splade

-Method Create Dan Store

Seperti biasa, pertama buka file app/Http/Controller/PostController.php , lalu ubahlah kodenya menjadi seperti di bawah ini :

<?php

namespace App\Http\Controllers;

use App\Models\Post;
use Illuminate\Http\Request;
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'));
    }
} 

Setelah perubahan kode terjadi, langkah awal kalian tambahkan method baru namai dengan create

/**
*  display form create
*/
public function create()
{
	// masukan kode disini...
}

Lakukanlah sebuah render view dalam method tadi, untuk pembuatanya nanti. gunakan render view dengan resource/view/post/create.blade.php.

// render view
return view('posts.create');

Kemudian  buatlah Sebuah method baru juga namai dengan store . Fungsi dari method store adalah untuk insert data ke dalam databasenya.

/**
 *  insert new post data
 */
public function store(Request $request)
{
		// masukan kode disini...
}

Buatlah Validasi dalam method diatas,untuk memastikan kesesuaian data yang di kirimkan.

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

Berikut adalah penjelasan dari validasinya :

KEY	VALIDATION	KETERANGAN
image	required	wajib di isi
	image	berupa gambar
	mimes : jpeg, jpg, png	ekstensi field jpeg, jpg, dan png
title	required	wajib di isi
	min : 5	minimal 5 huruf/karakter
conten	required	wajib di isi
	min : 10	minimal 10 huruf/karakter

Untuk selanjutnya adalah upload gambar, namun pastikan dulu data yang dikirim sesuai dengan validasi.

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

Penjelasan perintah di atas adalah kalian buat variable dengan nama $image, lalu isi request jenis filenya bernama image. Request di atas adalah file form yang telah dikirim oleh form yang telah kita buat.

Kemudian uploadlah gambar di atas dengan menggunakan method storeAs, lalu simpan filenya dalam folder storage/app/public/post, dan nanti nama file gambar akan di generat menggunakan method hasName() secara acak.

Setelah berhasil upload gambar, kemudian untuk tahap selanjutnya yaitu insert data baru ke database, insert datanya ke dalam tabel posts, Manfaatkanlah Fitur eloquent dan model pada proses insert data kedalam database kalian.

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

Apabila dalam proses insert data berhasil, maka lakukanlah render view, namai dengan posts.index .

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

-Buat View Create

Selanjutnya jika 2 method baru  dalam controller berhasil di lakukan, kalian bisa langsung membuat sebuah view. Tujuanya adalah untuk menampilkan halaman tambah data post kalian.

Buatlah file baru namai dengan create.blade.php , buatlah dalam folder resource/view/posts lalu masukan kode di bawah ini :

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

    <x-panel>
        <x-splade-form action="/posts" class="flex flex-col gap-4" enctype='multipart/form-data'>
            <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">CREATE NEW 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>
                            Save
                        </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> 

Setelah kode di atas di tambahkan, langkah awal kalian gunakan sebuah component layout yang tersedia di splade.

<x-layout>

// masukan kode disini...

</x-layout>

Pada component layout, kalian set nama headernya namai dengan posts create .

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

Lalu buatlah sebuah form dari component splade form, kemudian arahkan action-nya kedalam route bernama posts.store, lalu routnya akan melakukan panggilan sebuah method store yang berada di postController kalian.

<x-splade-form action="/posts" class="flex flex-col gap-4">

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

Lalu panggil beberapa component splade yang telah di sediakan seperti di bawah ini :

<x-splade-file/>

Gunakan component ini untuk proses upload gambar ke dalam form kalian, lalu definisikan atribute name , show-filenam , label.

<x-spade-input/>

Gunakan componen ini untuk proses input title dari post kalian, definisikan attribute name , type , label , dan placeholder .

<x-splade-textarea/>

Gunakan component ini untuk proses input content dari post kalian , definisikan beberapa props name dan content .

-Uji Coba Insert Data Post

Setelah semua proses di lakukan silahkan kalian lakukan pengujian terhadap project kalian. Caranya, buka URL browser http://localhost:8000/posts/create, atau biasa juga pada halaman posts.index klik tombol Add New Post . Apabila kalian sukses membuat projectnya maka akan nampak seperti di bawah ini :

Cobalah masukan data yang di inginkan lalu klik tombol save. apabila sukses maka secara langsung akan di alihkan ka halaman post.index .

Penutup

Selamat mencoba project kalian, jangan lupa terus kembangkan project project baru di laravel, karena menurut saya sendiri laravel sangat bagus dan mudah untuk di pelajari. Jika kalian suka dengan artikel ini maka teruslah untuk mengembangkan ilmu kalian dan jangan lupa berbagi pada yang membutuhkan ilmu kalian, terimakasih !

Published on December 07, 2023
Last updated on June 03, 2026