Laravel Livewire Tutorial Step by Step Build CRUD Modals Bootstrap Application Example

This Step by Step Tutorial How to Build Laravel Livewire CRUD Application Example with Laravel 8 and Modals Bootstrap

By
JogjaTech
-
0
3885

Hello Laravel lovers, i write this tutorial is for you, in this article you will learn step by step build CRUD Modals Bootstrap application with laravel livewire. This tutorial laravel livewire step by step build crud application example with Laravel 8 and modals bootstrap is best practice tutorial for you, this tutorial will guide simple and easy way build crud application example using Laravel 8 and laravel livewire.

This laravel livewire tutorial will explain a step by step how to build crud example tutorial, so if you are looking tutorial to build crud application using framework Laravel 8 and livewire this tutorial is for you. Laravel livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.

In this tutorial i will share with you how to build simple crud application example using Laravel, and Livewire, and also Modals Bootstrap, let’s scroll and follow below step by step for this tutorial.

Laravel Livewire Tutorial Step by Step Build CRUD Modals Bootstrap Application Example

Halo teman-teman pecinta framework Laravel, Livewire adalah sebuah full-stack framework untuk Laravel yang dapat digunakan untuk membangun interfaces aplikasi yang dinamis tanpa harus menghilangkan kenyaman dari framework Laravel itu sendiri.

Pada seri tutorial Laravel kali ini, sebuah pembahasan yang cukup menarik saat ini untuk dibaca dan diikuti, yaitu tutorial tentang bagaimana membuat contoh aplikasi CRUD modals bootstrap dengan Laravel Livewire, sehingga pada tutorial ini kita akan mempraktikkan bagaimana menggunakan Laravel Livewire pada project Laravel untuk mencipatakan aplikasi CRUD dengan Modals Bootstrap, tutorial kali ini akan disajikan dengan detail, menyajikan cara basic dan sederhana sampai membuat aplikasi CRUD sederhana dengan Laravel dan Livewire disertai penggunaan modals bootstrap.

Tutorial CRUD Laravel 8 dengan Livewire ini akan saya suguhkan secara lengkap dimulai dari tahap dasar seperti melakukan instalasi project Laravel 8, kemudian menghubungkan project Laravel dengan database, instalasi Livewire sampai mengolah data dengan teknik operasi CRUD dengan Laravel Livewire.

Adapun secara tahapan, step by step tutorial laravel livewire CRUD application example ini akan dibagi kedalam 14 step, sehingga diharapkan tutorial ini dapat dengan mudah diikuti dan dipraktikkan secara langsung pada project Laravel 8 dan Laravel Livewire. Adapun 14 step membangun aplikasi CRUD Laravel Livewire dengan Modals Bootstrap tersebut adalah seperti berikut :

Step 1. Install Project Laravel 8 pada Web Server
Step 2. Konfigurasi Project Laravel 8 ke Database MariaDB
Step 3. Login Auth Scaffolding di Laravel 8 Menggunakan Bootstrap UI
Step 4. Laravel 8 Database Migrations
Step 5. Laravel 8 Tinker Factory Faker
Step 6. Install Laravel Livewire
Step 7. Laravel Livewire Components
Step 8. Routing Laravel 8 Livewire
Step 9. Laravel 8 Livewire CRUD Application Example
Step 10. Laravel 8 File Blade
Step 11. Menampilkan Record Data ke Dalam Components Laravel Livewire (Read)
Step 12. Input Data ke Database MariaDB pada Laravel Livewire (Create)
Step 13. Edit Data Laravel 8 Livewire (Update)
Step 14. Hapus Data Laravel 8 Livewire (Delete)

Oke, berikut ini adalah tahap demi tahap Laravel Livewire membangun aplikasi CRUD sederhana dengan Laravel 8 :

  1. Install Project Laravel 8 pada Web Server

Untuk menghasilkan contoh aplikasi CRUD dengan Laravel 8 Livewire, maka tutorial ini saya awali dengan melakukan instalasi project Laravel 8 pada web server. Perlu diketahui untuk dapat menggunakan Laravel 8 Anda harus menggunakan PHP minimal versi PHP >= 7.3 keatas serta mengaktifkan beberapa PHP Extension seperti BCMath PHP Extension, Ctype PHP Extension, Fileinfo PHP Extension, JSON PHP Extension, Mbstring PHP Extension, OpenSSL PHP Extension, PDO PHP Extension, Tokenizer PHP Extension, XML PHP Extension.

Dalam membuat tutorial Laravel Livewire Step by Step CRUD Application Example ini saya menggunakan WAMPSERVER sebagai web server, sehingga saya melakukan istalasi project Laravel 8 pada folder root www, jika Anda menggunakan XAMPP sebagai web server pada local PC atau Laptop Anda, maka Anda dapat melakukan instalasi project Laravel pada folder root htdocs.

Untuk menginstal project Laravel 8, maka dapat dilakukan dengan menjalankan perintah composer, buka jendela Terminal/ Command Prompt, lalu dengan perintah change directory (cd) arahkan pada folder root www atau htdocs pada web server, kemudian jalankan perintah composer berikut :

composer create-project –prefer-dist laravel/laravel livewire-crud

Sehingga proses instalasi framework Laravel 8 melalui jendela Terminal/ Command Prompt adalah seperti berikut :

Laravel Livewire CRUD Modals Bootstrap Project Installation Progres
Laravel Livewire CRUD Modals Bootstrap Project Installation Progres
  1. Konfigurasi Database MariaDB Project Laravel 8

Seperti pada versi-versi sebelumnya, untuk melakukan konfigurasi database pada Laravel 8 dan database MariaDB dapat dilakukan melalui 2 (cara), pertama kita dapat menghubungkan project Laravel ke database MariaDB melalui file environment (.env) yang terletak pada root directory project Laravel Anda. Cara ke-dua untuk melakukan konfigurasi project Laravel dengan database MariaDB dapat dilakukan melalui file “database.php” yang dapat kita jumpai pada folder “config\database.php”.

Pada project Laravel tutorial kali ini saya menggunakan file environment (.env) dalam menghubungkan project ke database MariaDB pada baris berikut :

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3307 //port MariaDB
DB_DATABASE=livewire_crud //nama database
DB_USERNAME=root //user root database
DB_PASSWORD=   //password database jika ada

  1. Login Auth Scaffolding pada Laravel 8 Menggunakan Bootstrap UI

Pada tutorial Laravel 8 Livewire disini saya menggunakan framework Bootstrap untuk membuat user interfaces (UI) sebagai desain antarmuka pengguna, sebagai PHP framework Laravel memberikan kemudahan bagi penggunanya dimana Laravel telah menyiapkan beberapa paket instalasi yang dapat digunakan untuk membuat auth login scaffolding pada Laravel. Pada versi 8 framework Laravel menyediakan beberapa paket yang dapat digunakan untuk membuat athentications, akan tetapi pada tutorial ini saya memilih menggunakan paket desain antarmuka yang tersedia pada Laravel versi sebelumnya yakni meggunakan versi Bootstrap UI, sehingga dalam membuat desain antarmuka auth login scaffolding pada project Larave 8 Livewire ini saya menjalankan paket instalasi composer seperti berikut, dengan perintah change directory (cd) arahkan pada core project Laravel 8 Anda, lalu jalankan perintah berikut :

composer require laravel/ui

Lalu saya menjalankan perintah artisan seperti berikut :

php artisan ui vue –auth

Kemudian saya menjalankan perintah npm seperti berikut :

npm install && npm run dev

Untuk melihat hasil instalasi project Laravel 8 diatas maka kita bisa menjalankan perintah artisan server development seperti berikut :

php artisan serve

Jika semua berjalan dengan baik, maka akan kita jumpai halaman front user project Laravel 8 disertai dengan tombol login dan register, dimana tombol tersebut dapat kita gunakan untuk login dan registrasi akun pada project Laravel seperti berikut :

Laravel Livewire CRUD Login Register Form
Laravel Livewire CRUD Login Register Form
  1. Laravel 8 Database Migrations

Seperti pada versi sebelumnya untuk menggunakan fitur database migrations pada framework Laravel dapat dilakukan melalui jendela Terminal/ Command Prompt dengan menjalankan artisan migrate seperti berikut :

php artisan migrate

Jika pada saat menjalankan perintah database migrations terjadi error seperti berikut :

Database migrations error
Database migrations error

Maka dapat kita atasi dengan memodifikasi file php pada folder “app/Providers/AppServiceProvider.php” sperti berikut :

<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema; // tambahkan
class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Schema::defaultStringLength(191); // lalu tambahkan
    }
}

Lalu jangan lupa untuk menjalankan perintah artisan migrate rollback seperti berikut :

php artisan migrate:rollback

Kemudian jalankan kembali perintah artisan migrate seperti berikut :

php artisan migrate

Jika berjalan dengan baik perintah artisan migrate diatas akan mengeksekusi database migrations dan menciptakan beberapa tabel dalam database project Laravel seperti berikut :

Laravel Livewire artisan migrate
Laravel Livewire artisan migrate
  1. Laravel 8 Tinker Factory Faker

Laravel tinker factory faker sebenarnya sudah pernah saya bahas pada tutorial “Laravel 8: Laravel Factory Tinker Example Usage“, akan tetapi saya sertakan kembali pada tutorial laravel livewire crud application example with laravel 8 and modals bootstrap disini. Tujuan dari penggunaan factory faker adalah untuk menciptakan dummy record data untuk kebutuhan testing aplikasi yang sedang di develop, untuk dapat menggunakan laravel tinker factory faker maka tahap pertama adalah kita buatkan file database factories dengan perintah artisan berikut :

php artisan make:factory NamafileFactory

perintah diatas akan membuat file factory pada folder “database\factories”, ada kasus kali ini saya akan meng-generate dummy data untuk tabel user, sehingga isi file factory pada folder “database\factories\UserFactory.php” akan menjadi seperti berikut :

<?php
namespace Database\Factories;
use App\Models\User;
use Illuminate\Database\Eloquent\Factories\Factory;
use Illuminate\Support\Str;
class UserFactory extends Factory
{
    /**
     * The name of the factory’s corresponding model.
     *
     * @var string
     */
    protected $model = User::class;
    /**
     * Define the model’s default state.
     *
     * @return array
     */
    public function definition()
    {
        return [
            ‘name’ => $this->faker->name,
            ’email’ => $this->faker->unique()->safeEmail,
            ’email_verified_at’ => now(),
            ‘password’ => ‘$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi’, // password
            ‘remember_token’ => Str::random(10),
        ];
    }
}

Selanjutnya untuk meng-generate dummy record data maka kita jalankan perintah artisan tinker berikut pada terminal/ command prompt :

php artisan tinker

sehingga akan terminal akan menjalankan laravel tinker, lalu lanjutkan dengan menjalankan perintah generate dummy record data berikut :

$users = User::factory()->count(20)->create();

Laravel Livewire Laravel Tinker Factory faker
Laravel Livewire Laravel Tinker Factory faker

Perintah diatas akan meng-generate dummy record data sebanyak 20 record seperti yang kita perintahkan pada perintah count(20) diatas.

  1. Install Laravel Livewire

Untuk dapat menggunakan framework Livewire pada project Laravel, maka terlebih dahulu kita harus menginstalnya pada project Laravel. Instalasi Laravel Livewire pada project laravel dapat dilakukan melalui jendela Terminal/ Command Prompt dengan menjalankan perintah composer berikut :

composer require livewire/livewire

  1. Laravel Livewire Components

Untuk membuat livewire components pada tutorial Laravel 8 disini saya kan menggunakan sub-folder, hal ini dimaksudkan jika kita mengembangkan aplikasi pada setiap modul akan kita kelompokkan pada folder tersendiri, sehingga file tidak tercampur baur dengan penggunaan file modul lainnya.

Untuk membuat components pada laravel livewire dapat dilakukan melalui jendela Terminal/ Command Prompt dengan menjalankan perintah artisan livewire berikut

php artisan make:livewire Pengaturan.Pengguna

Laravel Livewire CRUD artisan livewire components
Laravel Livewire CRUD artisan livewire components
  1. Routing Laravel 8 Livewire

Seperti pada umumnya untuk mendefinisikan perintah baris routing pada laravel, dapat kita lakukan pada folder “routes/web.php”, sedangkan untuk kebutuhan route pada tutorial Laravel Livewire CRUD Application Example ini adalah seperti berikut :

Route::get(‘/pengguna’, App\Http\Livewire\Pengaturan\Pengguna::class)->name(‘pengguna’)->middleware(‘auth’);

  1. Laravel 8 Livewire CRUD Application Example

CRUD berarti kita melakukan operasi pengolahan data dari dan ke database. Seperti diketahui CRUD merupakan kependekan dari operasi Create, Read, Update, dan Delete. Nah disini kita akan membuat operasi CRUD menggunakan components laravel livewire.

  1. Laravel 8 File Blade

Untuk kebutuhan operasi CRUD Laravel livewire application example disini saya akan mengolah data dari tabel users dari database, sehingga saya menambahkan satu buah file blade dengan nama “pengaturan.blade.php” yang saya letakkan pada folder “resources\views\pengaturan.blade.php”. dan berikut isi dari file blade tersebut.

@extends(‘layouts.app’)
@section(‘content’)
<div class=”container”>
    <div class=”row justify-content-center”>
        <div class=”col-md-12″>
            <div class=”card”>
                <div class=”card-header”>Laravel Livewire Manajemen User
                     
                </div>
                
                @if (session(‘message’))
                    <div class=”alert alert-success” role=”alert”>
                        {{ session(‘message’) }}
                    </div>
                @endif
                <div class=”card-body”>   
                                
                    @livewire(‘pengaturan.pengguna’)
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Kemudian saya lakukan modifikasi file blade pada folder “resources\views\layouts\app.blade.php” dengan menambahkan  @livewireStyles dalam tag <head> dan saya tambahkan pula @livewireScripts pada tag sebelum </body>.

Selanjutnya adalah melakukan modifikasi components livewire pada folder “App\Http\Livewire\Pengaturan\Pengguna.php” dengan memanggil file layout seperti berikut :

public function render()
    {
        return view(‘livewire.pengaturan.pengguna’)->layout(‘pengaturan’);
    }

Sehingga jika project Laravel Livewire CRUD application example ini kita jalankan maka akan ditampilkan halaman seperti berikut :

Laravel Livewire Menampilkan Layout Pengaturan
Laravel Livewire Menampilkan Layout Pengaturan
  1. Menampilkan Record Data ke Dalam Components Laravel Livewire (Read)

Operasi Read atau menampilkan record data dari tabel users. Untuk menampilkan atau record data dari tabel users maka pertama yang perlu kita lakukan adalah memanggil file Model “User.php” dan kita definisikan pada controller livewire components pada folder “App\Http\Livewire\Pengaturan\Pengguna.php”  seperti berikut :

use App\Models\User;

Kemudian kita lanjutkan dengan melakukan query dari tabel users, disini saya menggunakan perintah query builder, masih aktif pada “App\Http\Livewire\Pengaturan\Pengguna.php” lalu kita lakukan modifikasi dengan menambahkan potongan kode seperti berikut pada fungsi render.

    public $name;
    public $email;
    public $password;
    public $user_id;
    public function render()
    {
        $user = User::all();
        return view(‘livewire.pengaturan.pengguna’,[‘user’=>$user])->layout(‘pengaturan’);
    }

Selanjutnya adalah melakukan modifikasi file blade pada folder “resources\views\livewire\pengaturan\pengguna.blade.php”, buka file tersebut lalu lakukan modifikasi dengan menambahkan code seperti berikut :

<div>
<table id=”tbl_list” class=”table table-striped table-bordered” cellspacing=”0″ width=”100%”>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>  
        @foreach($user as $row)
        <tr>
            <td>{{$row->id}}</td>
            <td>{{$row->name}}</td>
            <td>{{$row->email}}</td>
            <td>
                <button type=”button” data-toggle=”modal” data-target=”#modal-add” wire:click=”edit({{ $row->id }})” class=”btn btn-info btn-sm”>Edit</button>
                <button wire:click=”delete({{ $row->id }})” type=”button” class=”btn btn-danger btn-sm”>Hapus</button>
            </td>
        </tr>
        @endforeach                          
    </tbody>
</table>
</div>

Perhatikan pada penulisan code diatas kita telah melakukan operasi pemanggilan record data dari tabel user melalui variabel $user dan kemudian dimasukkan dalam perintah perulangan @foreach, sehingga jika kita akses kembali project Laravel Livewire dengan menjalankan url localhost:8000/pengguna maka akan kita jumpai halaman dengan record data seperti berikut :

Laravel Livewire CRUD Read data user
Laravel Livewire CRUD Read data user
  1. Input Data ke Database MariaDB pada Laravel Livewire (Create)

Tahap selanjutnya adalah kita melakukan salah satu dari operasi CRUD yaitu melakukan input data (Create) pada project Laravel Livewire, Untuk kebutuhan input data disini saya akan memanfaatkan form Modals Boostrap, oke langsung saja disini saya menambahkan tombol button pada file blade pada folder “resources\views\pengaturan.blade.php” seperti berikut :

<button class=”btn btn-success” data-toggle=”modal” data-target=”#modal-add” ><i class=”fa fa-plus”></i> Tambah</button>  

Kemudian saya lanjutkan dengan melakukan modifikasi file blade yang berada pada folder “resources\views\livewire\pengaturan\pengguna.blade.php” disini saya menambahkan form Modals Bootstrap, sehingga setelah mengalami penambahan akan terlihat seperti berikut :

<div>
<table id=”tbl_list” class=”table table-striped table-bordered” cellspacing=”0″ width=”100%”>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>  
        @foreach($user as $row)
        <tr>
            <td>{{$row->id}}</td>
            <td>{{$row->name}}</td>
            <td>{{$row->email}}</td>
            <td>
                <button type=”button” data-toggle=”modal” data-target=”#modal-add” wire:click=”edit({{ $row->id }})” class=”btn btn-info btn-sm”>Edit</button>
                <button wire:click=”delete({{ $row->id }})” type=”button” class=”btn btn-danger btn-sm”>Hapus</button>
            </td>
        </tr>
        @endforeach                          
    </tbody>
</table>
<!– Modal –>
<div wire:ignore.self class=”modal fade” id=”modal-add” tabindex=”-1″ role=”dialog” aria-labelledby=”exampleModalLabel” aria-hidden=”true”>
  <div class=”modal-dialog” role=”document”>
    <div class=”modal-content”>
      <div class=”modal-header”>
        <h5 class=”modal-title” id=”exampleModalLabel”>Form Data Pengguna</h5>
        <button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”>
          <span aria-hidden=”true”>&times;</span>
        </button>
      </div>
        <div class=”modal-body”>
            <form wire:submit.prevent=”submit” class=”form-horizontal”>
                <div class=”form-group”>
                    <label for=”exampleFormControlInput1″>Name</label>
                    <input type=”text” name=”name” wire:model=”name” class=”form-control” id=”exampleFormControlInput1″ placeholder=”Enter Name”>
                    @error(‘name’) <span class=”text-danger”>{{ $message }}</span>@enderror
                </div>
                <div class=”form-group”>
                    <label for=”exampleFormControlInput2″>Email address</label>
                    <input type=”email” wire:model=”email” name=”email” class=”form-control” id=”exampleFormControlInput2″ placeholder=”Enter Email”>
                    @error(’email’) <span class=”text-danger”>{{ $message }}</span>@enderror
                </div>
                <div class=”form-group”>
                    <label for=”exampleFormControlInput2″>Password</label>
                    <input type=”password” name=”password” wire:model=”password” class=”form-control” id=”exampleFormControlInput2″>
                    @error(‘password’) <span class=”text-danger”>{{ $message }}</span>@enderror
                </div>
                <div class=”modal-footer”>       
                    <input type=”hidden” name=”user_id” wire:model=”user_id”>            
                    <button type=”submit” class=”btn btn-success”>Save</button>
                </div>
            </form>
        </div>
    </div>
  </div>
</div>
<div>

Setelah form kita siapkan, maka selanjutnya adalah melakukan modifikasi pada file controller livewire pada folder “App\Http\Livewire\Pengaturan\Pengguna.php” dengan menambahkan method submit() seperti berikut :

public function submit()
    {
        $this->validate([
            ‘name’   => ‘required’,
            ’email’ => ‘required|email’,
            ‘password’ => ‘required’
        ]);
        if($this->user_id==””){
            User::create([
                ‘name’ => $this->name,
                ’email’ => $this->email,
                ‘password’ => bcrypt($this->password)
            ]);
            session()->flash(‘message’, ‘Users Create Successfully.’);
            return redirect()->to(‘/pengguna’);
        }else{
            $user = User::find($this->user_id);
            $user->update([
                ‘name’ => $this->name,
                ’email’ => $this->email,
                ‘password’ => bcrypt($this->password)
            ]);
            session()->flash(‘message’, ‘Users Update Successfully.’);
            return redirect()->to(‘/pengguna’);
        }
    }
Berikut adalah tampilan dari form input data.
Laravel Livewire Modals Bootstrap Create Data
Laravel Livewire Modals Bootstrap Create Data
  1. Edit Data Laravel 8 Livewire (Update)

Untuk melakukan operasi CRUD edit update data pada laravel livewire, saya menggunakan form Modals Bootstrap yang sama dengan form untuk melakukan input data diatas.

Kemudian saya lakukan modifikasi pada file controller laravel livewire pada folder “App\Http\Livewire\Pengaturan\Pengguna.php” dengan menambahkan method edit() seperti berikut :

public function edit($id)
    {        
        $user = User::where(‘id’,$id)->first();
        $this->user_id = $id;
        $this->name = $user->name;
        $this->email = $user->email;
    }
Dan berikut adalah tampilan dari form edit data.
Laravel Livewire Modals Bootstrap Edit Update Data
Laravel Livewire Modals Bootstrap Edit Update Data
  1. Hapus Data Laravel 8 Livewire (Delete)

Untuk melakukan operasi CRUD penghapusan data (Delete), maka saya menambahkan method delete() pada file controller laravel livewire pada folder “App\Http\Livewire\Pengaturan\Pengguna.php” dengan menambahkan code seperti berikut :

public function delete($id)
    {       
        if($id){
            User::where(‘id’,$id)->delete();
            session()->flash(‘message’, ‘Users Deleted Successfully.’);
            return redirect()->to(‘/pengguna’);
        }
    }

Sehingga secara keseluruhan file-file pada pembahasan tutorial Laravel Livewire Step by Step Build CRUD Application Example with Laravel 8 and Modals Bootstrap adalah seperti berikut.

Livewire controller components “App\Http\Livewire\Pengaturan\Pengguna.php”

<?php
namespace App\Http\Livewire\Pengaturan;
use App\Models\User;
use Livewire\Component;
class Pengguna extends Component
{
    public $name;
    public $email;
    public $password;
    public $user_id;
    public function render()
    {
        $user = User::all();
        return view(‘livewire.pengaturan.pengguna’,[‘user’=>$user])->layout(‘pengaturan’);
    }
    public function submit()
    {
        $this->validate([
            ‘name’   => ‘required’,
            ’email’ => ‘required|email’,
            ‘password’ => ‘required’
        ]);
        
        if($this->user_id==””){
            User::create([
                ‘name’ => $this->name,
                ’email’ => $this->email,
                ‘password’ => bcrypt($this->password)
            ]);
            session()->flash(‘message’, ‘Users Create Successfully.’);
            return redirect()->to(‘/pengguna’);
        }else{
            $user = User::find($this->user_id);
            $user->update([
                ‘name’ => $this->name,
                ’email’ => $this->email,
                ‘password’ => bcrypt($this->password)
            ]);
            session()->flash(‘message’, ‘Users Update Successfully.’);
            return redirect()->to(‘/pengguna’);
        }
        
    }
    public function edit($id)
    {        
        $user = User::where(‘id’,$id)->first();
        $this->user_id = $id;
        $this->name = $user->name;
        $this->email = $user->email;
    }
    public function delete($id)
    {       
        if($id){
            User::where(‘id’,$id)->delete();
            session()->flash(‘message’, ‘Users Deleted Successfully.’);
            return redirect()->to(‘/pengguna’);
        }
    }
}

File blade “resources\views\layouts\app.blade.php”

<!doctype html>
<html lang=”{{ str_replace(‘_’, ‘-‘, app()->getLocale()) }}”>
<head>
    <meta charset=”utf-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <!– CSRF Token –>
    <meta name=”csrf-token” content=”{{ csrf_token() }}”>
    <title>{{ config(‘app.name’, ‘Laravel’) }}</title>
    <!– Scripts –>
    <script src=”{{ asset(‘js/app.js’) }}” defer></script>
    <!– Fonts –>
    <link rel=”dns-prefetch” href=”//fonts.gstatic.com”>
    <link href=”https://fonts.googleapis.com/css?family=Nunito” rel=”stylesheet”>
    <!– Styles –>
    <link href=”{{ asset(‘css/app.css’) }}” rel=”stylesheet”>
    @livewireStyles
</head>
<body>
    <div id=”app”>
        <nav class=”navbar navbar-expand-md navbar-light bg-white shadow-sm”>
            <div class=”container”>
                <a class=”navbar-brand” href=”{{ url(‘/’) }}”>
                    {{ config(‘app.name’, ‘Laravel’) }}
                </a>
                <button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-expanded=”false” aria-label=”{{ __(‘Toggle navigation’) }}”>
                    <span class=”navbar-toggler-icon”></span>
                </button>
                <div class=”collapse navbar-collapse” id=”navbarSupportedContent”>
                    <!– Left Side Of Navbar –>
                    <ul class=”navbar-nav mr-auto”>
                    </ul>
                    <!– Right Side Of Navbar –>
                    <ul class=”navbar-nav ml-auto”>
                        <!– Authentication Links –>
                        @guest
                            <li class=”nav-item”>
                                <a class=”nav-link” href=”{{ route(‘login’) }}”>{{ __(‘Login’) }}</a>
                            </li>
                            @if (Route::has(‘register’))
                                <li class=”nav-item”>
                                    <a class=”nav-link” href=”{{ route(‘register’) }}”>{{ __(‘Register’) }}</a>
                                </li>
                            @endif
                        @else
                            <li class=”nav-item dropdown”>
                                <a id=”navbarDropdown” class=”nav-link dropdown-toggle” href=”#” role=”button” data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”false” v-pre>
                                    {{ Auth::user()->name }}
                                </a>
                                <div class=”dropdown-menu dropdown-menu-right” aria-labelledby=”navbarDropdown”>
                                    <a class=”dropdown-item” href=”{{ route(‘logout’) }}”
                                       onclick=”event.preventDefault();
                                                     document.getElementById(‘logout-form’).submit();”>
                                        {{ __(‘Logout’) }}
                                    </a>
                                    <form id=”logout-form” action=”{{ route(‘logout’) }}” method=”POST” class=”d-none”>
                                        @csrf
                                    </form>
                                </div>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>
        <main class=”py-4″>
            @yield(‘content’)
        </main>
    </div>
    @livewireScripts
</body>
</html>

File blade “resources\views\pengaturan.blade.php”

@extends(‘layouts.app’)
@section(‘content’)
<div class=”container”>
    <div class=”row justify-content-center”>
        <div class=”col-md-12″>
            <div class=”card”>
                <div class=”card-header”>Laravel Livewire Manajemen User
                    <button class=”btn btn-success” data-toggle=”modal” data-target=”#modal-add” ><i class=”fa fa-plus”></i> Tambah</button>   
                </div>
                
                @if (session(‘message’))
                    <div class=”alert alert-success” role=”alert”>
                        {{ session(‘message’) }}
                    </div>
                @endif
                <div class=”card-body”>   
                                
                    @livewire(‘pengaturan.pengguna’)
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Livewire components “resources\views\livewire\pengaturan\pengguna.blade.php”

<div>
<table id=”tbl_list” class=”table table-striped table-bordered” cellspacing=”0″ width=”100%”>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>  
        @foreach($user as $row)
        <tr>
            <td>{{$row->id}}</td>
            <td>{{$row->name}}</td>
            <td>{{$row->email}}</td>
            <td>
                <button type=”button” data-toggle=”modal” data-target=”#modal-add” wire:click=”edit({{ $row->id }})” class=”btn btn-info btn-sm”>Edit</button>
                <button wire:click=”delete({{ $row->id }})” type=”button” class=”btn btn-danger btn-sm”>Hapus</button>
            </td>
        </tr>
        @endforeach                          
    </tbody>
</table>
<!– Modal –>
<div wire:ignore.self class=”modal fade” id=”modal-add” tabindex=”-1″ role=”dialog” aria-labelledby=”exampleModalLabel” aria-hidden=”true”>
  <div class=”modal-dialog” role=”document”>
    <div class=”modal-content”>
      <div class=”modal-header”>
        <h5 class=”modal-title” id=”exampleModalLabel”>Form Data Pengguna</h5>
        <button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”>
          <span aria-hidden=”true”>&times;</span>
        </button>
      </div>
        <div class=”modal-body”>
            <form wire:submit.prevent=”submit” class=”form-horizontal”>
                <div class=”form-group”>
                    <label for=”exampleFormControlInput1″>Name</label>
                    <input type=”text” name=”name” wire:model=”name” class=”form-control” id=”exampleFormControlInput1″ placeholder=”Enter Name”>
                    @error(‘name’) <span class=”text-danger”>{{ $message }}</span>@enderror
                </div>
                <div class=”form-group”>
                    <label for=”exampleFormControlInput2″>Email address</label>
                    <input type=”email” wire:model=”email” name=”email” class=”form-control” id=”exampleFormControlInput2″ placeholder=”Enter Email”>
                    @error(’email’) <span class=”text-danger”>{{ $message }}</span>@enderror
                </div>
                <div class=”form-group”>
                    <label for=”exampleFormControlInput2″>Password</label>
                    <input type=”password” name=”password” wire:model=”password” class=”form-control” id=”exampleFormControlInput2″>
                    @error(‘password’) <span class=”text-danger”>{{ $message }}</span>@enderror
                </div>
                <div class=”modal-footer”>       
                    <input type=”hidden” name=”user_id” wire:model=”user_id”>            
                    <button type=”submit” class=”btn btn-success”>Save</button>
                </div>
            </form>
        </div>
    </div>
  </div>
</div>
<div>

RELATED ARTICLESMORE FROM AUTHOR