Tutorial CRUD Laravel Livewire SPA #7 : Insert Data ke Database


Fika Ridaul Maulayya
Software Engineer | Content Creator | Founder & Author di SantriKoding.com

Tutorial CRUD Laravel Livewire SPA #7 : Insert Data ke Database - Halo teman-teman semuanya, pada artikel kali ini, kita semua akan belajar bagaimana cara memasukkan atau insert data ke dalam database di Laravel Livewire.

Disini kita akan menggunakan component yang sebelumnya sudah pernah kita buat, jadi kita akan melakukan atau menambahkan beberapa kode di dalam component tersebut. Langsung saja kita mulai.

Langkah 1 - Component Post Create

Pertama, kita akan membuat sebuah function store di dalam component Post Create, dimana ini digunakan untuk menyimpan data inputan dari from nanti.

Silahkan teman-teman buka file app/Http/Livewire/Post/Create.php dan ubahlah kodenya menjadi seperti berikut ini :

<?php

namespace App\Http\Livewire\Post;

use App\Post;
use Livewire\Component;

class Create extends Component
{

    /**
     * define public variable
     */
    public $title;
    public $content;

    /**
     * store function
     */
    public function store()
    {
        $this->validate([
            'title'   => 'required',
            'content' => 'required',
        ]);

        $post = Post::create([
            'title'     => $this->title,
            'content'   => $this->content
        ]);

        //flash message
        session()->flash('message', 'Data Berhasil Disimpan.');

        //redirect
        return redirect()->route('post.index');
    }

    public function render()
    {
        return view('livewire.post.create');
    }
}

Dari penambahan kode diatas, kita menambahkan 2 public variable yaitu : $title & $content. Kemudian kita juga menambahkan 1 function yang bernama function store, function ini akan kita gunakan untuk memperoses data inputan dari form dan menyimpannya kedalam database.

Di dalam function store kita juga menambahkan sebuah validation, dimana jika validation ini tidak terpenuhi maka akan menampilkan sebuah error mesage di dalam form.

Langkah 2 - Membuat Form Create Post di View

Selanjutnya kita akan membuat form yang akan kita gunakan untuk input datanya, silahkan teman-teman buka file resources/views/livewire/post/create.php dan ubahlah kodenya menjadi seperti berikut ini :

<div>
    <div class="card">
        <div class="card-body">
            <form wire:submit.prevent="store">
                <div class="form-group">
                    <label>TITLE</label>
                    <input type="text" wire:model="title" class="form-control @error('title') is-invalid @enderror" placeholder="Masukkan Title">
                    @error('title')
                        <span class="invalid-feedback">
                                {{ $message }}
                         </span>
                    @enderror
                </div>
                <div class="form-group">
                    <label>KONTEN</label>
                   <textarea wire:model="content" class="form-control @error('content') is-invalid @enderror" rows="4" placeholder="Masukkan Konten"></textarea>
                   @error('content')
                        <span class="invalid-feedback">
                                {{ $message }}
                         </span>
                    @enderror
                </div>
                <button type="submit" class="btn btn-primary">SIMPAN</button>
            </form>
        </div>
    </div>
</div>

Jika kita perhatikan dari action formnya, jika akan mengarahkannya ke dalam function store yang sebelumnya kita sudah buat di dalam component.

Kemudian dari kode diatas, kita juga membuat message/alert validation apabila inputan atau formnya tidak terpenuhi.

Langkah 3- Uji Coba Aplikasi

Sekarang teman-teman bisa menguji aplikasinya, teman-teman bisa klik button tambah pada Post Index, disini teman-teman akan diarahkan ke dalam form tanpa melakukan reload page atau biasanya disebut Single Page Application (SPA).

Kurang lebih seperti berikut ini :


Jika teman-teman menyimpan tanpa mengisikan formnya, maka teman-teman akan mendapatkan message validation kurang lebih seperti berikut ini :


SOURCE CODE

Untuk teman-teman yang ingin mengunduh source codenya : https://github.com/maulayyacyber/CRUD-Laravel-Livewire-SPA

KESIMPULAN

Pada tutorial kali ini kita semua telah belajar bagaimana cara membuat form dengan validation & kita juga belajar bagaimana cara memasukkan data ke dalam database menggunakan compnent Laravel Livewire.

Jika teman-teman ada pertanyaan atau kendala saat mencoba, silahkan teman-teman bisa bertanya melalui kolom komentar dibawah artikel ini.

Terima Kasih


Fika Ridaul Maulayya
Software Engineer | Content Creator | Founder & Author di SantriKoding.com

Jika Anda menyukai konten kami, silakan pertimbangkan untuk membeli kopi untuk kami.
Terima kasih atas dukungan Anda!

Buy me a coffeeBuy me a coffee
KEBIJAKAN KOMENTAR

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

KOMENTAR