Laravel 8: Laravel Livewire Membuat CRUD Application Example

Tutorial Laravel Livewire CRUD SPA (Single Page Application) Example with Laravel 8, this step by step tutorial Laravel 8 CRUD application example using Laravel Livewire

0
4546

Laravel Livewire CRUD Application Example – Hello Laravel lover’s, today i want to share with you about Laravel Livewire CRUD Application example tutorial. This Laravel 8 tutorial will guide how to create CRUD application example using Laravel 8 and Laravel Livewire. This example tutorial will give you simple guide and easy way how to creating CRUD application using Laravel livewire. So, i think if you’re looking tutorial for Laravel livewire CRUD application example this article will help you.

Laravel Livewire CRUD Application Example in this tutorial will give you step by step how to create CRUD operation using laravel livewire, this tutorial also can implemented in Laravel 6, Laravel 7, and also Laravel 8.

Livewire is a full-stack framework for Laravel framework that makes building dynamic interfaces simple, without leaving the comfort of Laravel. So, let’s scroll below to follow step by step to create CRUD application example using laravel livewire.

Halo teman-teman, setelah sebelumnya saya memposting tentang tutorial Laravel 8 tentang cara Menggunakan Laravel Livewire Pada Laravel 8, dimana pada tutorial tersebut kita telah berhasil melakukan instalasi laravel livewire pada project Laravel 8. Maka pada tutorial kali ini saya akan membahas bagaimana membuat sebuah contoh aplikasi CRUD yang cukup simple dan sederhana sehingga saya berharap tutorial ini dapat diikuti dan dipraktikkan dengan mudah, adapun tutorial CRUD SPA (Single Page Application) disini saya buat menggunakan framework Laravel 8 serta Laravel Livewire yang tengah populer saat ini.

Untuk project tutorial Laravel Livewire CRUD Application Example disini saya melakukan instalasi project Laravel 8 dari awal, dimulai dari tahap instalasi, sehingga tutorial ini dituliskan secara step by step untuk menghasilkan contoh aplikasi CRUD Laravel Livewire, adapun prosesnya dapat dilihat seperti berikut dibawah ini.

Step 1 – Instalasi Project Laravel 8 Pada Web Server

Dalam membuat tutorial Laravel Livewire CRUD Application Example ini saya melakukan instalasi project Laravel pada web server saya, dengan perintah artisan berikut saya melakukan instalasi project laravel.

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

Step 2 – Setup Database Configuration

Stelah berhasil melakukan instalasi project Laravel 8 pada web server, maka tahap selanjutnya yang saya lakukan adalah melakukan konfigurasi database. Untuk melakukan setting database pada tahap konfigurasi ini saya melakukannya pada file environment “.env” seperti berkut :

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

Step 3 – Install Laravel Livewire

Tahap selanjutnya adalah saya melakukan instalasi Laravel Livewire pada project laravel 8, melalui jendela Terminal/ Command Prompt jalankan perintah composer berikut untuk melakukan instalasi Laravel Livewire pada project Laravel Anda.

composer require livewire/livewire

Step 4 – Create Livewire Components

Setelah sukses melakukan instalasi Laravel Livewire, maka tahap selanjutnya yang saya lakukan adalah membuat livewire components, gunakan perintah artisan berikut untuk membuat laravel livewire components.

php artisan make:livewire Registration

Perintah artisan diatas akan menciptakan components seperti berikut :

Laravel 8 Livewire CRUD Creating Components
Laravel 8 Livewire CRUD Creating Components

Selanjutnya adalah saya melakukan modifikasi file components “app/Http/Livewire/Registration.php” sehingga menjadi seperti berikut :

<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\User;
class Registration extends Component
{
    public $name;
    public $email;
    public $password;
    public $user_id;
    public function render()
    {
        $user = User::all();
        return view(‘livewire.registration’,[‘user’=>$user])->layout(‘user’);   
    }
    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 Post Successfully.’);
            return redirect()->to(‘/user’);
        }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(‘/user’);
        }
        
    }
    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(‘/user’);
        }
    }  
}

Step 5 – Install Laravel UI Authentication Scaffold

Tahap selanjutnya adalah saya melakukan instalasi kebutuhan Authentication Laravel UI, dalam jendela Terminal/ Command Prompt jalankan perintah composer berikut untuk membuat Laravel UI Authentication Scaffold.

composer require laravel/ui

Lalu lanjutkan dengan perintah artisan berikut :

php artisan ui vue –auth

Kemudian lanjutkan dengan menjalankan perintah npm seperti berikut :

npm install && npm run dev

Step 6 – Add Route

Tahap selanjutnya adalah kita perlu menambahkan routing pada project Laravel Livewire, buka file “routes\web.php” lalu tambahkan route code berikut :

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

Step 7 – Add File Blade View

Disini saya menambahkan file blade “user.blade.php” pada folder “resources/views/user.blade.php”, kemudian isikan code seperti berikut :

@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 User Registration</div>
                @if (session(‘message’))
                    <div class=”alert alert-success” role=”alert”>
                        {{ session(‘message’) }}
                    </div>
                @endif
                <div class=”card-body”>                    
                    @livewire(‘registration’)
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Step 8 – Modify File Blade Layout

Pada tahap ini saya melakukan modifikasi file “app.blade.php” pada folder  “resources/views/layouts/app.blade.php”, disini saya menambahkan @livewireStyles dan @livewireScripts, sehingga setelah mengalami modifikasi maka isi file blade tersebut akan menjadi seperti berikut :

<!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>

Step 9 – Modify File Blade Livewire Registration

Pada tahap ini saya melakukan modifikasi file balde pada folder “resources/views/livewire/registration.blade.php”, pada file blade ini saya mendefinisikan kebutuhan CRUD operation dan kebutuhan routing, sehingga saya menambahkan kode seperti berikut :

<div>
@include(‘livewire.create’)
<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” 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>

Step 10 – Add File Blade Create View

Tahap selanjutnya adalah saya menambahkan file blade “create.blade.php” dan saya letakkan pada folder “resources/views/livewire/create.blade.php”, file blade ini saya gunakan untuk melengkapi form CRUD operation, file blade ini saya gunakan sekaligus untuk melakukan operasi CRUD Input data dan operasi CRUD Update data, dimana saya meletakkan satu baris field hidden pada isi blade tersebut, sehingga penulisan code tag html nya akan menjadi seprti berikut ini :

<form wire:submit.prevent=”submit”>
    <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>
    <input type=”hidden” name=”user_id” wire:model=”user_id”>
    <button type=”submit” class=”btn btn-success”>Save</button>
</form>
<br>

Sehingga setelah kita melakukan semua hal diatas, maka kebutuhan tutorial Laravel Livewire CRUD Application Example ini telah kita lengkapi, dan sekarang kita telah siap menjalankan project Laravel Livewire CRUD Application, gunakan perintah artisan laravel server development berikut :

php artisan serve

Lalu buka web browser Anda dan jalankan url localhost:8000/user, jika memerlukan login maka isilah seperti akun yang telah Anda daftarkan pada aplikasi Anda, sehingga jika semua berjalan dengan baik maka akan ditampilkan halaman seperti berikut :

Laravel 8 Laravel Livewire CRUD Read Operation Example
Laravel 8 Laravel Livewire CRUD Read Operation Example

Dan berikut adalah jika kita berhasil melakuan input data

Laravel 8 Laravel Livewire CRUD Create Operation Example
Laravel 8 Laravel Livewire CRUD Create Operation Example

Berikut adalah ketika kita melakukan edit data dengan memilih salah satu record dengan meng-klik tombol edit

Laravel 8 Laravel Livewire CRUD Edit Operation Example
Laravel 8 Laravel Livewire CRUD Edit Operation Example

Berikut adalah ketika berhasil melakukan update data

Laravel 8 Laravel Livewire CRUD Update Operation Example
Laravel 8 Laravel Livewire CRUD Update Operation Example

Dan berikut adalah ketika berhasil melakukan penghapusan record data.

Laravel 8 Laravel Livewire CRUD Delete Operation Example
Laravel 8 Laravel Livewire CRUD Delete Operation Example

Akhir kata semoga tutorial Laravel 8: Laravel Livewire CRUD Application Example ini dapat memberi manfaat bagi yang membutuhkan, tidak lupa kami berterimakasih kepada Anda yang telah meluangkan waktu mengunjungi website kami Jogjatech.com, and happy coding 🙂