Press "Enter" to skip to content

Membuat CRUD dalam 1 Halaman dengan Livewire

Published November 16, 2021 by fadli
fadli 0
Membuat CRUD dalam 1 Halaman dengan Livewire

Membuat CRUD dalam 1 Halaman dengan Livewire – Assalaamualaikum wr wb, halo semua nya, apa kabar? Semoga sehat selalu..

Kali ini kita akan coba mempelajari tentang Laravel Livewire, kita akan langsung masuk kedalam studi kasus nya yaitu membuat CRUD dengan Laravel Livewire dalam 1 halaman..

Membuat CRUD dalam 1 Halaman dengan Livewire

Jika kalian belum mengetahui tentang apa itu livewire, kalian bisa cari sendiri di google yah, karena sudah banyak yang menjelaskan nya..

Tapi kurang lebih intinya livewire itu adalah sebuah full-stack untuk laravel yang bisa digunakan untuk membuat antar muka yang dinamis dengan sangat mudah..

yang biasanya bagian backend dan front-end dipisah menggunakan API, pada livewire kita bisa menggunakan keduanya secara langsung persis seperti framework laravel pada umumnya dengan memanggil view Blade Template..

Kalo kalian sudah merasakannya, pasti dijamin akan ketagihan, karena livewire ini powerfull sekali, akan sangat mempermudah kamu dalam mengembangkan suatu sistem..

Baiklah kalo begitu, kita langsung aja masuk ke praktek nya..

Persiapan

Sebelum melanjutkan, ada beberapa hal yang perlu kita siapkan, kita mulai dari instalasi Laravel nya terlebih dahulu yaa..

Trending
Cara Looping Diantara 2 Tanggal Menggunakan PHP

Instalasi Laravel 8

Untuk versi laravel yang saya gunakan yaitu yang terbaru untuk saat ini, kebetulan saat ini versi terbaru nya adalah versi 8..

Untuk cara instalasi nya, bisa kamu kunjungi halaman resmi laravel nya disini..

Konfigurasi Database

Setelah instalasi laravel nya sudah selesai, sekarang kalian buka phpmyadmin nya, dan buat database baru disana, misalkan untuk nama database nya yaitu “livewire”.. Untuk nama database bisa kalian sesuaikan sendiri..

Kemudian kalian hubungkan database nya dengan project kita yang sekarang melalui file .env, kalian isi seperti berikut:

Membuat CRUD dalam 1 Halaman dengan Livewire

Buat Model Siswa beserta migrations nya

Setelah database nya terhubung, sekarang kita buat file model nya beserta migration nya dengan menjalankan perintah:

php artisan make:model Siswa -m

Dengan satu perintah tersebut, akan menciptakan 2 buah file baru, yaitu file model yang berada di “../App/Models/Siswa.php”, dan file migration yang berada didalam folder “../database.migrations/….create_siswas_table.php”..

Sekarang buka file migration nya, dan kalian isi seperti berikut:

....
    public function up()
    {
        Schema::create('siswas', function (Blueprint $table) {
            $table->id();
            $table->string('nama')->nullable();
            $table->string('nip')->nullable();
            $table->text('alamat')->nullable();
            $table->timestamps();
        });
    }
....

Dengan perintah diatas, akan tercipta 6 kolom pada table siswas, yaitu:

  1. Kolom id sebagai auto increment dan primary key
  2. Kolom nama
  3. Kolom nip
  4. Kolom alamat
  5. Kolom created_at
  6. Kolom updated_at

Setelah itu kalian jalankan perintah:

php artisan migrate

Maka seharusnya didalam database livewire akan terbentuk beberapa table baru, dan salah satu diantaranya adalah table siswas..

Membuat CRUD dalam 1 Halaman dengan Livewire

Buat data dummy dengan teknik Seeding dan Factory..

Setelah database nya terhubung dan juga table nya terbentuk, sekarang kita isi table siswas nya dengan data dummy, kalian bisa gunakan teknik seeding dan factory, untuk tutorialnya sudah saya buatkan, silahkan kalian kunjungi disini..

Kalo sudah berhasil, maka nanti kurang lebih nya data nya akan menjadi seperti ini:

Membuat CRUD dalam 1 Halaman dengan Livewire

Instalasi Livewire

Nah sekarang kita masuk ke proses untuk instalasi Livewire nya, untuk versi livewire yang digunakan yaitu versi 2.x..

Pertama kalian jalankan perintah berikut:

composer require livewire/livewire

Jika proses instalasi nya sudah selesai, sekarang kita tambahkan assets livewire nya kedalam file view layout kita..

Karena sekarang kita belum punya view layout nya, kita buat baru saja didalam folder “../resources/views/layout.blade.php”.

Kemudian didalam nya kita isi seperti berikut:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    @livewireStyles

</head>

<body>

    {{ $slot }}

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>

    @livewireScripts

</body>

</html>

Coba kita perhatikan pada baris ke-13, kita menambahkan @livewireStyles..

Dan pada baris ke-31, kita menambahkan @livewireScripts..

Kemudian jika kamu perhatikan, di tengah2 element body juga terdapat variable $slot, fungsinya untuk meng include file view livewire kita..

Menampilkan Data Dengan Livewire

Sekarang kita mulai masuk untuk proses menampilkan data nya dengan livewire..

Pertama kita buat component nya terlebih dahulu dengan menjalankan perintah berikut:

php artisan make:livewire siswa.index

Setelah menjalankan perintah tersebut, nanti akan tercipta 2 file baru:

  1. “../App/Http/Livewire/Siswa/Index.php”..
  2. “../resources/views/livewire/siswa/index.blade.php”..

Sekarang kita buatkan query untuk get data siswa nya, karena sekarang di table siswa saya terdapat banyak sekali data dummy, ada sekitar 1000 an row, maka di query nya kita limit 100 dulu saja..

Tapi sebelumnya kita buatkan route baru terlebih dahulu didalam file web.php seperti berikut:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TodoListController;

use App\Http\Livewire\Siswa\Index;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::get('/list-siswa', Index::class);

Coba kamu perhatikan pada baris ke-6, kita memanggil class Index.php yang mana file tersebut hasil dari generate livewire nya..

Kemudian di baris ke-23 adalah contoh pembuatan route pada livewire, dimana terdapat 2 parameter, parameter pertama yaitu url web nya, dan parameter kedua yaitu file Component livewire nya..

Sekarang selanjutnya kita buka file index.php nya, kemudian didalam function render tambahkan script seperti berikut:

<?php

namespace App\Http\Livewire\Siswa;

use App\Models\Siswa;
use Livewire\Component;

class Index extends Component
{
    public function render()
    {
        $data = Siswa::limit(100)->get();

        return view('livewire.siswa.index', compact('data'))
            ->layout('layout');
    }
}

Function render() ini adalah sebuah function yang akan selalu dijalankan ketika terdapat perubahan pada suatu property atau component tanpa perlu melakukan refresh / reload halaman.. Jadi akan otomatis ter eksekusi setiap kali ada perubahan..

Didalam function render() kita membuat sebuah variabel $data yang isinya yaitu query get data siswa dengan limit data sebanyak 100 row..

Kemudian variable tersebut kita lempar kedalam view siswa/index.blade.php dengan menggunakan perintah compact()..

Untuk menentukan file layout mana yang akan kita gunakan, kita bisa menggunakan perintah layout().. Pada contoh diatas, kita menggunakan file layout.blade.php sebagai layout nya..

Sekarang selanjutnya kita buka file view “../livewire/siswa/index.blade.php” nya, dan isi seperti berikut:

<div>
    {{-- Success is as dangerous as failure. --}}
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Nama</th>
                            <th>Nip</th>
                            <th>Alamat</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data as $dt)
                            <tr>
                                <td>{{ $dt->nama }}</td>
                                <td>{{ $dt->nip }}</td>
                                <td>{{ $dt->alamat }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Pada baris ke-15 kita melakukan perulangan atau mem-foreach variable data..

Yang mana jika kita buka halaman web nya dengan mengakses url “../list-siswa”, maka seharusnya akan tampil seperti berikut:

membuat crud dalam 1 halaman dengan livewire

Membuat Pagination Dengan Livewire

Sebelumnya, kita menampilkan data siswa dengan memberinya limit sebanyak 100 data saja..

Nah sekarang bagaimana caranya kalo kita ingin menampilkan semua data nya yang berisi ribuan data tanpa harus memberatkan dari sisi server dan juga client? Solusinya yaitu dengan pagination..

Teman-teman pasti sudah tidak asing lagi dengan yang namanya fitur pagination, di laravel sendiri sudah menyediakan fitur pagination, dan di livewire pun juga sudah disediakan..

Beda nya kalo di livewire, fitur pagination nya sudah canggih, tanpa reload halaman, jadi akan terasa lebih cepat..

Lantas bagaimana caranya? Langsung saja kita masuk ke contoh koding nya..

Kita buka kembali file “../app/Http/Livewire/Siswa/index.php”, kemudian kalian ubah seperti berikut:

laravel livewire pagination

<?php

namespace App\Http\Livewire\Siswa;

use Livewire\WithPagination;

use App\Models\Siswa;
use Livewire\Component;

class Index extends Component
{
    use WithPagination;

    public function render()
    {
        $data = Siswa::orderBy('id', 'desc')->paginate(10);

        return view('livewire.siswa.index', compact('data'))
            ->layout('layout');
    }
}

Coba kalian perhatikan script diatas..

  • Pada baris ke-5 kita memanggil class WithPagination..
  • Kemudian pada baris ke-12 kita use Class tersebut..
  • Pada baris ke-16, kita ubah query nya menjadi seperti diatas, paginate(10) artinya kita akan menampilkan 10 data dalam 1 halaman nya, dan 10 data berikutnya akan ditampilkan pada halaman selanjutnya, begitu seterusnya..

Nah sekarang di file view nya ada sedikit perubahan juga, kalian buka file “../livewire/siswa/index.blade.php” nya, kemudian modifikasi seperti berikut:

<div>
    {{-- Success is as dangerous as failure. --}}
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Nama</th>
                            <th>Nip</th>
                            <th>Alamat</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data as $dt)
                            <tr>
                                <td>{{ $dt->nama }}</td>
                                <td>{{ $dt->nip }}</td>
                                <td>{{ $dt->alamat }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            {{ $data->links() }}
        </div>
    </div>
</div>

Coba kamu perhatikan script diatas, pada baris ke-25 kita menambahkan sebuah baris script “{{ $data->links() }}”, ini fungsinya untuk menampilkan button “next” dan “previous” agar kita bisa berpindah-pindah halaman..

Kalo kamu refresh kembali halaman “../list-siswa”, maka seharusnya akan tampil seperti berikut:

Membuat CRUD dalam 1 Halaman dengan Livewire

Menentukan Jumlah Paging Secara Dinamis..

Kalo tadi kita menentukan jumlah data dalam 1 halaman hanya 10 row saja, lantas bagaimana caranya kalo kita ingin menampilkan 50 data dalam 1 halaman? Caranya kita harus bongkar kodingan nya terlebih dahulu..

Cara ini tidak efisien, karena kebutuhan client pasti berbeda2, solusinya kita buat dinamis saja, jadi terdapat pilihan angka untuk menentukan berapa jumlah data yang ingin ditampilkan dalam 1 halaman..

Oleh karena itu, kita perlu melakukan modifikasi lagi pada file “../app/Http/Livewire/Siswa/index.php” nya dengan menambahkan sebuah property baru seperti berikut:

<?php

namespace App\Http\Livewire\Siswa;

use Livewire\WithPagination;

use App\Models\Siswa;
use Livewire\Component;

class Index extends Component
{
    use WithPagination;

    public $paging;

    public function mount()
    {
        $this->paging = 5;
    }

    public function render()
    {
        $data = Siswa::orderBy('id', 'desc')->paginate($this->paging);

        return view('livewire.siswa.index', compact('data'))
            ->layout('layout');
    }
}

Coba kalian perhatikan script diatas:

  • Pada baris ke-14 kita membuat sebuah property baru dengan nama $paging..
  • Kemudian pada baris ke-16 kita membuat sebuah function baru dengan nama mount, function ini sama seperti construct, jadi setiap perintah yang ada didalam function mount ini, akan dijalankan pertama kali oleh sistem saat halaman baru pertama kali dibuka.. didalam function ini kita men-set nilai dari property $paging denga angka 5..
  • Kemudian pada baris ke-23, kita ubah sedikit query nya, yang mana pada sebelumnya kita memberikan nilai hardcode 10 pada perintah paginate nya, sekarang untuk nilai paginate nya kita ambil dari property $paging..

Selanjutnya kita juga perlu melakukan modifikasi pada file view nya, yaitu pada file “../resources/views/livewire/siswa/index.blade.php”, kalian ubah seperti berikut:

laravel livewire pagination

<div>
    {{-- Success is as dangerous as failure. --}}
    <div class="container">

        <div class="row">
            <div class="col-md-3">
                <select class="form-control" wire:model="paging">
                    <option value="1">1</option>
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="500">500</option>
                    <option value="1000">1000</option>
                </select>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Nama</th>
                            <th>Nip</th>
                            <th>Alamat</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data as $dt)
                            <tr>
                                <td>{{ $dt->nama }}</td>
                                <td>{{ $dt->nip }}</td>
                                <td>{{ $dt->alamat }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            {{ $data->links() }}
        </div>
    </div>
</div>

Terdapat penambahan element pada baris ke-5 sampai baris ke-18, dimana didalam nya terdapat sebuah select option yang akan menentukan nilai dari paging nya..

Didalam select form tersebut kita juga sudah memberikan option value mulai dari 1, 5, 10, 20, 50, 100, 500, dan 1000..

Coba di perhatikan pada bagian select option nya, disana terdapat wire:model=”paging”..

<select class="form-control" wire:model="paging">

Ini disebut dengan data binding, yaitu untuk menghubungkan nilai yang ada di select form ini dengan property $paging yang sebelumnya sudah kita buat..

Kalo kalian refresh halaman list siswa nya, seharusnya akan muncul seperti berikut:

membuat crud dalam 1 halaman dengan livewire

Jika kalian ubah nilai yang ada di form select option nya, maka otomatis data list siswa yang tampil juga akan ikut berubah, nilai nya sesuai dengan yang dipilih pada select option nya..

Membuat Pencarian Data Siswa

Tidak lengkap rasanya jika pada halaman list data siswa tidak kita lengkapi dengan fitur pencarian data seraca real-time..

Di livewire, hal seperti ini dapat dilakukan dengan sangat mudah sekali..

Pertama kita perlu menambahkan satu property lagi dengan nama $search pada file “../app/Http/Livewire/Siswa/index.php” seperti berikut:

membuat crud dalam 1 halaman dengan livewire

<?php

namespace App\Http\Livewire\Siswa;

use Livewire\WithPagination;

use App\Models\Siswa;
use Livewire\Component;

class Index extends Component
{
    use WithPagination;

    public $paging, $search;

    public function mount()
    {
        $this->paging = 5;
    }

    public function render()
    {
        if ($this->search) {
            $data = Siswa::where(function ($query) {
                $query->where('nama', 'like', "%$this->search%")
                    ->orWhere('nip', 'like', "%$this->search%")
                    ->orWhere('alamat', 'like', "%$this->search%");
            })->orderBy('id', 'desc')->paginate($this->paging);
        } else {
            $data = Siswa::orderBy('id', 'desc')->paginate($this->paging);
        }

        return view('livewire.siswa.index', compact('data'))
            ->layout('layout');
    }
}

Coba kamu perhatikan script diatas:

  • Pada baris ke-14 kita membuat sebuah property baru dengan nama $search..
  • Kemudian pada baris ke-23 sampai ke-31 kita membuat sebuah kondisi pada query get data siswa nya, dimana jika property search ini berisi nilai, maka akan menjalankan query yang ada dibaris ke-25, tapi jika tidak, maka akan menjalankan query pada baris ke-30..

Kemudian di view nya pada file “../resources/views/livewire/siswa/index.blade.php”, kalian modifikasi lagi menjadi seperti berikut:

....
        <div class="row">
            <div class="col-md-3">
                <select class="form-control" wire:model="paging">
                    <option value="1">1</option>
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="500">500</option>
                    <option value="1000">1000</option>
                </select>
            </div>

            <div class="col-md-4">
                <input wire:model="search" type="text" class="form-control" placeholder="Cari Data..">
            </div>
        </div>
....

Diatas, pada baris ke-16 sampai 18 kita membuat sebuah element baru, yaitu sebuah inputan untuk pencarian data, dan didalam inputan tersebut juga sudah terdapat data binding yang mengarah ke property $search..

.... wire:model="search" ....

Sekarang kalo kalian refresh halaman list siswa nya, maka seharusnya akan tampil seperti berikut:

membuat crud dalam 1 halaman dengan livewire

Disamping list option pagination, terdapat 1 inputan baru dengan tipe text untuk melakukan pencarian data, jika kamu mengetikkan suatu keyword pada inputan tersebut, maka data yang tampil sesuai dengan keyword yang kita ketik..

Create Data Siswa Baru

Setelah sebelumnya kita sudah berhasil membuat modul untuk menampilkan list data siswa, beserta dengan pagination dan pencarian data nya..

Sekarang kita akan masuk untuk modul pembuatan data siswa baru, langkah pertama yang perlu kita lakukan yaitu membuat property baru didalam file “../app/Http/Livewire/Siswa/Index.php”..

Property baru yang akan kita buat yaitu nama, nip, dan alamat seperti berikut:

post livewire

....
    use WithPagination;

    public $paging, $search;

    public $nama, $nip, $alamat;

    public function mount()
    {
        $this->paging = 5;
    }
....

Setelah itu, kita juga perlu membuatkan sebuah form untuk penginputan data siswa di file view nya, kalian buka kembali file “../resources/views/livewire/siswa/index.blade.php”, dan tambahkan element form baru seperti berikut:

<div>
    {{-- Success is as dangerous as failure. --}}
    <div class="container">

        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <form role="form" wire:submit.prevent="store">
                    <div class="box-body">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Nama</label>
                            <input wire:model="nama" type="text" class="form-control" placeholder="Nama">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Nip</label>
                            <input wire:model="nip" type="text" class="form-control" placeholder="Nip">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Alamat</label>
                            <textarea wire:model="alamat" rows="5" class="form-control"></textarea>
                        </div>
                    </div>
                    <!-- /.box-body -->

                    <div class="box-footer">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3">
                <select class="form-control" wire:model="paging">
                    <option value="1">1</option>
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="500">500</option>
                    <option value="1000">1000</option>
                </select>
            </div>

            <div class="col-md-4">
                <input wire:model="search" type="text" class="form-control" placeholder="Cari Data..">
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Nama</th>
                            <th>Nip</th>
                            <th>Alamat</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data as $dt)
                            <tr>
                                <td>{{ $dt->nama }}</td>
                                <td>{{ $dt->nip }}</td>
                                <td>{{ $dt->alamat }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            {{ $data->links() }}
        </div>
    </div>
</div>

Coba kamu perhatikan script diatas, pada baris ke-5 sampai ke-29, kita membuat sebuah element baru untuk penginputan data siswa nya..

Di form tersebut terdapat 3 inputan yaitu inputan nama, nip, dan juga alamat, dimana masing-masing dari inputan tersebut memiliki data binding menggunakan perintah wire:model ke property yang sebelumnya sudah kita buat..

Untuk submit form nya pun kita tidak lagi menggunakan perintah form action, tapi menggunakan perintah wire:submit.prevent=”store”, seperti yang ada pada baris ke-7..

Maka nanti ketika button submit di klik, sistem akan menjalankan function store yang ada didalam file index.php..

Karena function store nya belum kita buat, maka sekarang kita buatkan dulu function nya didalam file “../app/Http/Livewire/Siswa/Index.php” seperti berikut:

<?php

namespace App\Http\Livewire\Siswa;

use Livewire\WithPagination;

use App\Models\Siswa;
use Livewire\Component;

class Index extends Component
{
    use WithPagination;

    public $paging, $search;

    public $nama, $nip, $alamat;

    public function mount()
    {
        $this->paging = 5;
    }

    public function store()
    {
        // /
        $data = new Siswa;
        $data->nama = $this->nama;
        $data->nip = $this->nip;
        $data->alamat = $this->alamat;
        $data->save();
    }

    public function render()
    {
        if ($this->search) {
            $data = Siswa::where(function ($query) {
                $query->where('nama', 'like', "%$this->search%")
                    ->orWhere('nip', 'like', "%$this->search%")
                    ->orWhere('alamat', 'like', "%$this->search%");
            })->orderBy('id', 'desc')->paginate($this->paging);
        } else {
            $data = Siswa::orderBy('id', 'desc')->paginate($this->paging);
        }

        return view('livewire.siswa.index', compact('data'))
            ->layout('layout');
    }
}

Coba perhatikan pada baris ke-23 sampai ke-31, kita membuat query insert data dengan teknik eloquent, yang mana nilai-nilai nya diambil dari property yang sudah kita buat sebelumnya dan sudah di binding dengan inputan form nya..

Sekarang coba kalian refresh lagi halaman list siswa nya, dan pastikan sudah ada form untuk input data siswa baru nya seperti berikut:

membuat crud dalam 1 halaman dengan livewire

Kalian coba-coba aja inputkan data siswa baru, kemudian klik button submit, maka nanti data yang baru akan tersimpan dan otomatis akan langsung masuk ke list siswa yang ada di table bawah nya tanpa perlu reload halaman..

Membuat validasi input

Tadi kita sudah berhasil membuat modul untuk insert data siswa baru, nah akan lebih baik lagi jika kita menambahkan validasi pada setiap inputan nya..

Anggap saja pada semua inputan nya wajib diisi, jika ada yang tidak diisi maka kita akan menampilkan pesan validasi nya..

Validation pada livewire terjadi secara realtime, jadi tanpa harus reload halaman terlebih dahulu, pesan error validasi akan muncul dengan sendirinya..

Yang perlu kalian lakukan yaitu memodifikasi sedikit pada function store nya seperti berikut:

....
    public function store()
    {
        // /
        $this->validate([
            'nama' => 'required',
            'nip' => 'required',
            'alamat' => 'required',
        ]);

        $data = new Siswa;
        $data->nama = $this->nama;
        $data->nip = $this->nip;
        $data->alamat = $this->alamat;
        $data->save();
    }
....

Perhatikan pada baris ke-5 sampai ke-9, kita memberikan validasi pada setiap inputan nama, nip, dan alamat dengan ketentuan wajib diisi / required..

Untuk menampilkan pesan validasi nya juga mudah, kalian cukup tambahkan script seperti berikut didalam file view pada element form nya, “../resources/views/livewire/siswa/index.blade.php”..

....
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <form role="form" wire:submit.prevent="store">
                    <div class="box-body">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Nama</label>
                            <input wire:model="nama" type="text" class="form-control" placeholder="Nama">

                            @error('nama')
                                <span style="color: red">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Nip</label>
                            <input wire:model="nip" type="text" class="form-control" placeholder="Nip">

                            @error('nip')
                                <span style="color: red">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Alamat</label>
                            <textarea wire:model="alamat" rows="5" class="form-control"></textarea>

                            @error('alamat')
                                <span style="color: red">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <!-- /.box-body -->

                    <div class="box-footer">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
....

Untuk cara menampilkan pesan error nya, seperti pada contoh diatas baris ke 10-12, atau baris ke 18-20, atau baris ke 26-28..

Nah nanti jika kita melakukan submit data tanpa mengisi data apapun, maka akan muncul pesan validasi seperti gambar berikut:

membuat crud dalam 1 halaman dengan livewire

Me-Reset inputan setelah berhasil submit data..

livewire validation

Ketika kita melakukan proses submit data siswa baru, data histori sebelumnya tidak hilang, masih menempel di inputan nya..

Untuk me-reset form inputan nya, kita bisa menggunakan perintah $this->reset() seperti pada berikut, kita tambahkan di function store nya..

....
    public function store()
    {
        // /
        $this->validate([
            'nama' => 'required',
            'nip' => 'required',
            'alamat' => 'required',
        ]);

        $data = new Siswa;
        $data->nama = $this->nama;
        $data->nip = $this->nip;
        $data->alamat = $this->alamat;
        $data->save();

        $this->reset(['nama', 'nip', 'alamat']);
    }
....

Perhatikan script diatas pada baris ke-17..

Edit Data Siswa

Sekarang kita masuk ke modul untuk edit data siswa nya..

Pertama kita buatkan dulu button edit siswa nya pada list table nya.. kita tambahkan 1 kolom baru dengan nama action seperti berikut:

“../resources/views/livewire/siswa/index.blade.php”..

<div>
    {{-- Success is as dangerous as failure. --}}
    <div class="container">

        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <form role="form" wire:submit.prevent="store">
                    <div class="box-body">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Nama</label>
                            <input wire:model="nama" type="text" class="form-control" placeholder="Nama">

                            @error('nama')
                                <span style="color: red">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Nip</label>
                            <input wire:model="nip" type="text" class="form-control" placeholder="Nip">

                            @error('nip')
                                <span style="color: red">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Alamat</label>
                            <textarea wire:model="alamat" rows="5" class="form-control"></textarea>

                            @error('alamat')
                                <span style="color: red">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <!-- /.box-body -->

                    <div class="box-footer">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3">
                <select class="form-control" wire:model="paging">
                    <option value="1">1</option>
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="500">500</option>
                    <option value="1000">1000</option>
                </select>
            </div>

            <div class="col-md-4">
                <input wire:model="search" type="text" class="form-control" placeholder="Cari Data..">
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Nama</th>
                            <th>Nip</th>
                            <th>Alamat</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data as $dt)
                            <tr>
                                <td>{{ $dt->nama }}</td>
                                <td>{{ $dt->nip }}</td>
                                <td>{{ $dt->alamat }}</td>
                                <td>
                                    <button wire:click.prevent="edit({{ $dt->id }})"
                                        class="btn btn-xs btn-warning">Edit</button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            {{ $data->links() }}
        </div>
    </div>
</div>

Perhatikan pada baris ke-70 dan ke-80, kita membuat sebuah kolom baru dengan nama action..

Pada kolom tersebut kita isi dengan sebuah button edit, yang mana didalam button tersebut terdapat perintah wire:click.prevent=”edit({{ $dt->id }})”..

Perintah tersebut berfungsi untuk mengarahkan kita ke function edit ketika button tersebut di klik.. Sekaligus kita juga mengirim parameter id siswa nya ke function tersebut..

Karena didalam file “../app/Http/Livewire/Siswa/Index.php” nya kita belum membuat function edit nya, sekarang kita buatkan dulu seperti berikut:

<?php

namespace App\Http\Livewire\Siswa;

use Livewire\WithPagination;

use App\Models\Siswa;
use Livewire\Component;

class Index extends Component
{
    use WithPagination;

    public $paging, $search;

    public $nama, $nip, $alamat;

    public $id_edit;

    public function mount()
    {
        $this->paging = 5;
    }

    public function edit($id)
    {
        $this->id_edit = $id;

        $siswa = Siswa::find($id);

        $this->nama = $siswa->nama;
        $this->nip = $siswa->nip;
        $this->alamat = $siswa->alamat;
    }

    public function store()
    {
        // /
        $this->validate([
            'nama' => 'required',
            'nip' => 'required',
            'alamat' => 'required',
        ]);

        if ($this->id_edit) {
            //
            $data = Siswa::find($this->id_edit);
            $data->nama = $this->nama;
            $data->nip = $this->nip;
            $data->alamat = $this->alamat;
            $data->save();
        } else {
            $data = new Siswa;
            $data->nama = $this->nama;
            $data->nip = $this->nip;
            $data->alamat = $this->alamat;
            $data->save();
        }

        $this->reset(['nama', 'nip', 'alamat', 'id_edit']);
    }

    public function render()
    {
        if ($this->search) {
            $data = Siswa::where(function ($query) {
                $query->where('nama', 'like', "%$this->search%")
                    ->orWhere('nip', 'like', "%$this->search%")
                    ->orWhere('alamat', 'like', "%$this->search%");
            })->orderBy('id', 'desc')->paginate($this->paging);
        } else {
            $data = Siswa::orderBy('id', 'desc')->paginate($this->paging);
        }

        return view('livewire.siswa.index', compact('data'))
            ->layout('layout');
    }
}

Perhatikan script diatas..

Pada baris ke-18, kita membuat sebuah property baru dengan nama $id_edit.. Nantinya property ini akan digunakan untuk menentukan apakah data tersebut ingin di update atau ingin dibuat baru..

Pada baris ke-25 sampai ke-34 kita membuat sebuah function dengan nama edit, dimana pada function tersebut memiliki 1 parameter yaitu id siswa nya..

Didalam function tersebut pada baris ke-27 kita memberikan nilai dari property id_edit dengan parameter id nya..

Kemudian pada baris ke-29 kita get data siswa nya berdasarkan dari parameter id nya..

Kemudian pada baris ke-31 sampai ke-33, kita membarikan nilai property nama, nip, dan alamat sesuai dengan data siswa yang baru kita get sebelumnya..

Kemudian pada function store nya juga kita modifikasi sedikit..

Pada baris ke-45, jika ternyata property $id_edit nya memiliki nilai, maka kita akan menjalankan query update data, tapi jika tidak, maka akan menjalankan query insert data..

Kemudian pada baris ke-60 kita juga menambahkan value id_edit kedalam reset property nya..

Sekarang kalo kalian refresh kembali halaman list siswa nya, seharusnya sudah ada button edit seperti berikut:

crud livewire update data

Kalo kalian klik button edit nya, maka otomatis form data yang diatas akan berisi nilai dari siswa tersebut..

Hapus Data Siswa

Sekarang part terakhir yaitu hapus data siswa..

Yang pertama perlu kita lakukan yaitu membuat button hapus nya terlebih dahulu, kita letakkan saja disamping button edit seperti berikut:

Membuat CRUD dalam 1 Halaman dengan Livewire

....
<tbody>
    @foreach ($data as $dt)
        <tr>
            <td>{{ $dt->nama }}</td>
            <td>{{ $dt->nip }}</td>
            <td>{{ $dt->alamat }}</td>
            <td>
                <button wire:click.prevent="edit({{ $dt->id }})"
                    class="btn btn-xs btn-warning">Edit</button>

                <button wire:click.prevent="hapus({{ $dt->id }})"
                    class="btn btn-xs btn-danger">Hapus</button>
            </td>
        </tr>
    @endforeach
</tbody>
....

Perhatikan pada baris ke-12, kita membuat sebuah button baru untuk hapus data, yang mana pada button tersebut mengarahkan kita ke function hapus dan juga sekaligus mengirim parameter id nya..

Sekarang kita buka lagi file “../app/Http/Livewire/Siswa/Index.php” nya, dan tambahkan sebuah function baru disana dengan nama hapus seperti berikut:

....
public function hapus($id)
{
    Siswa::where('id', $id)->delete();
}
....

Sekarang coba kalian reload halaman list siswa nya, maka akan tampil seperti berikut:

livewire delete data

Kemudian coba kalian lakukan hapus data pada salah satu row, maka datanya akan terhapus tanpa melakukan reload halaman, keren kan??

Cara Upload Photo Dengan Livewire

Di livewire, kita bisa melakukan upload photo dengan sangat mudah, tanpa reload dan dengan preview gambar nya..

Untuk modul ini sudah saya siapkan artikel terpisah, bisa kalian kunjungi disini..

Sekian untuk tutorial kali ini, semoga bermanfaat.. Terima Kasih..

Support Us

Jika artikel ini bermanfaat untuk kamu, membantu menyelesaikan masalah yang sedang kamu hadapi, kamu juga bisa dukung kami dengan mengunjungi halaman berikut: https://saweria.co/sangcahayaid

Terima kasih..

fadli

fadli

Published in Tutorial Laravel and Tutorial Livewire

%d bloggers like this: