Tutorial CRUD Laravel 8 dengan Jetstream Livewire

Admin・ 4 Juni 2021

14 min read ・ 12938 views

Laravel Livewire CRUD Jetstream - Pada artikel sebelumnya sudah pernah dibagikan tentang tutorial menggunakan laravel 8 dan livewire untuk membuat live search, pagination, tambah data tanpa reload page, dan lain-lain. Dan di artikel ini, kita mengkombinasikan laravel, livewire dan jetstream untuk membuat sistem CRUD sederhana.

Pendahuluan

Laravel merupakan web application framework  dengan syntax yang ekspresif dan elegan. Dengan framework laravel, kita bisa dengan mudah membuat aplikasi berbasis web dengan fitur-fitur canggih yang telah disediakan oleh laravel. Laravel berusaha untuk memberikan pengalaman development yang luar biasa dengan tersedianya syntax-syntax seperti  dependency injection, expressive database abstraction layer, queues and scheduled jobs, unit and integration testing dan masih banyak lagi. Livewire merupakan fullstack framework untuk laravel yang digunakan untuk membuat interface dinamis menjadi sederhana tanpa meninggalkan kenyamanan laravel. Sedangkah Jetstream merupakan package atau starter kit yang dirancang untuk membuat authentication yang sangat indah sekali di laravel. Jetstream menyediakan starter kit untuk membuat sistem login, register, verifikasi email, two-factor authentication, session management, API via Laravel Sanctum dan fitur team management. Nah, pada artikel ini, kita akan mengkombinasikan antara laravel, livewire dan jetstream untuk membuat sistem CRUD sederhana.

Mulai Koding

Seperti kebanyakan artikel tutorial yang pernah dibagikan, pada artikel ini kita juga akan memulainya dari nol yaitu dimulai dengan install laravel terbaru (saat ini versi 8), install livewire, install jetstream sampai membuat fitur-fitur Create, Read, Update dan Delete.

Install Laravel

composer create-project laravel/laravel laravel-livewire-crud-jetstream

Kita mulai dengan install laravel terbaru via composer. Buka terminal, kemudian jalankan perintah seperti contoh di atas. Pada percobaan membuat CRUD dengan laravel 8 dan jetstream livewire kali ini, kita akan menamakan project tersebut dengan nama laravel-livewire-crud-jetstream. Jika proses installasi sudah selesai, silahkan masuk ke direktori project dengan cd laravel-livewire-crud-jetstream.

Buat Database Baru

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel-livewire-crud-jetstream
DB_USERNAME=root
DB_PASSWORD=

Selanjutnya, buat database baru untuk percobaan membuat fitur CRUD dengan laravel dan jetstream livewire. Jika kalian menggunakan xampp sebagai local server, silahkan buat database baru di localhost/phpmyadmin. Disini saya beri contoh, saya membuat database baru dengan nama laravel-livewire-crud-jetstream. Kemudian jangan lupa juga untuk menyesuaikan DB_DATABASE pada file .env seperti pada contoh di atas.

Buat Model dan File Migration

php artisan make:model Post -m

Pada percobaan ini, kita akan membuat simple CRUD untuk mengelola data post, untuk itu kita perlu membuat file Post Modal dan file Post Migration. Jalankan perintah seperti di atas untuk membuat kedua file tersebut.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->longText('desc');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
} 

Kemudian buka file migration yang terdapat pada folder database/migrations/ [timestamps] _create_posts_table.php. Tambahkan 2 field baru yaitu title dan desc. Dan sekarang secara keseluruhan, kode yang ada di file create_posts_table.php akan seperti contoh di atas. 

protected $guarded  = [];

Tidak lupa juga untuk menambahkan protected $guarded = []; pada models/Post.

Install Jetstream dan Livewire

composer require laravel/jetstream

Sebelum dapat menggunakan jetstream pada project percobaan membuat crud dengan laravel dan jetstream livewire kali ini, kita harus terlebih dahulu install jetstream. Untuk itu silahkan jalankan perintah seperti di atas pada terminal untuk mulai install jetstream. 

php artisan jetstream:install livewire

Setelah menginstall package jetstream, kita dapat menjalankan perintah php artisan jetstream:install. Perintah tersebut menerima stack yang kita inginkan (livewire atau inertia). Selain itu, kita juga dapat menambahkan --teams untuk membuat fitur team management.

Pada project percobaan kali ini kita akan menggunakan jetstream dengan livewire. Untuk itu silahkan jalankan perintah seperti di atas untuk menginstall jetstream dengan livewire.

npm install && npm run dev

Selanjutnya, kita harus mengkompilasi asset-asset yang akan digunakan dengan menjalankan perintah seperti di atas.

php artisan migrate

Kemudian kita juga harus memigrasi tabel-tabel ke database yang baru saja kita buat pada langkah sebelumnya dengan menjalankan perintah php artisan migrate.

Buat Components Livewire

php artisan make:livewire PostCrud

Setelah berhasil install jetstream dan livewire, selanjutnya kita akan membuat component livewire untuk membuat fitur CRUD post. Jalankan perintah seperti di atas untuk membuat 2 component yang terletak pada folder app/Http/Livewire/PostCrud.php dan di resources/views/livewire/post-crud.blade.php.

Edit PostCrud.php

<?php

namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Post;

class PostCrud extends Component
{
    public $posts, $title, $desc, $post_id;
    public $isModalOpen = 0;

    public function render()
    {
        $this->posts = Post::all();
        return view('livewire.post-crud');
    }

    public function create()
    {
        $this->resetCreateForm();
        $this->openModal();
    }

    public function openModal()
    {
        $this->isModalOpen = true;
    }

    public function closeModal()
    {
        $this->isModalOpen = false;
    }

    private function resetCreateForm(){
        $this->title = '';
        $this->desc = '';
    }
    
    public function store()
    {
        $this->validate([
            'title' => 'required',
            'desc' => 'required',
        ]);
    
        Post::updateOrCreate(['id' => $this->post_id], [
            'title' => $this->title,
            'desc' => $this->desc,
        ]);

        session()->flash('message', $this->post_id ? 'Data updated successfully.' : 'Data added successfully.');

        $this->closeModal();
        $this->resetCreateForm();
    }

    public function edit($id)
    {
        $post = Post::findOrFail($id);
        $this->post_id = $id;
        $this->title = $post->title;
        $this->desc = $post->desc;
    
        $this->openModal();
    }
    
    public function delete($id)
    {
        Post::find($id)->delete();
        session()->flash('message', 'Data deleted successfully.');
    }
} 

Sekarang buka file di app/Http/Livewire/PostCrud.php, kemudian sesuaikan kode yang ada dengan kode-kode seperti di atas. Pada file PostCrud.php ini kita membuat beberapa method antara lain:

• render(), untuk menampilkan view dari file post-crud.blade.php.
• create(), memanggil method resetCreateForm untuk me-reset field dan method openModal untuk menampilkan modal yang berisi form input untuk tambah atau edit data.
• openModal(), untuk menampilkan modal.
• closeModal(), untuk menutup modal.
• resetCreateForm(), digunakan untuk me-reset form input title dan desc.
• store(), method ini dijalankan saat menambahkan atau edit data. Dan di dalam method ini terdapat perintah validasi, resetCreateForm dan closeModal.
• edit(), untuk menampilkan modal dengan form input yang terisi data-data yang akan diedit.
• delete(), dijalankan untuk perintah menghapus data dengan parameter id, kemudian menampilkan session()->flash() dengan pesan "Data deleted successfully".

Menambahkan Route

Route::get('posts', PostCrud::class)->name('posts');

selanjutnya, kita tambahkan route baru untuk fitur CRUD manage posts. Letakkan route tersebut di dalam middleware auth agar saat mangakses /posts, user tersebut sudah login atau jika belum login maka akan diarahkan ke halaman login. Dan jangan lupa untuk menambahkan use App\Http\Livewire\PostCrud;

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Livewire\PostCrud;

/*
|--------------------------------------------------------------------------
| 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::middleware(['auth:sanctum', 'verified'])->group(function () {
    Route::get('posts', PostCrud::class)->name('posts');
    Route::get('/dashboard', function () {
        return view('dashboard');
    })->name('dashboard');
}); 

Sehingga secara keseluruhan, kode yang ada di routes/web.php akan seperti contoh di atas.

Edit post-crud.blade.php

<x-slot name="header">
    <h2 class="text-center">Tutorial CRUD Laravel dengan Jetstream Livewire</h2>
</x-slot>
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg px-4 py-4">
            @if (session()->has('message'))
            <div class="bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md my-3"
                role="alert">
                <div class="flex">
                    <div>
                        <p class="text-sm">{{ session('message') }}</p>
                    </div>
                </div>
            </div>
            @endif
            <button wire:click="create()" class="bg-green-700 text-white font-bold py-2 px-4 rounded my-3">Create Posts</button>
            @if($isModalOpen)
            @include('livewire.create')
            @endif
            <table class="table-fixed w-full">
                <thead>
                    <tr class="bg-gray-100">
                        <th class="px-4 py-2 w-20">No.</th>
                        <th class="px-4 py-2">Title</th>
                        <th class="px-4 py-2">Desc</th>
                        <th class="px-4 py-2">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($posts as $post)
                    <tr>
                        <td class="border px-4 py-2">{{ $post->id }}</td>
                        <td class="border px-4 py-2">{{ $post->title }}</td>
                        <td class="border px-4 py-2">{{ $post->desc}}</td>
                        <td class="border px-4 py-2">
                            <button wire:click="edit({{ $post->id }})"
                                class="bg-blue-500  text-white font-bold py-2 px-4 rounded">Edit</button>
                            <button wire:click="delete({{ $post->id }})"
                                class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Delete</button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

Kita sudah mempunyai file post-crud.blade.php dari hasil menjalankan perintah php artisan make:livewire PostCrud, selanjutnya kita edit file tersebut untuk membuat tampilan index manage posts berserta button untuk create, edit dan delete. Buka file tersebut di resources/views/livewire/post-crud.blade.php, kemudian replace kode yang ada dengan kode seperti di atas.

Pada kode di atas, kita membuat button create posts yang ketika diklik maka akan memanggil method create yang telah kita buat pada file PostCrud.php dan akan menampilkan modal yang tampilannya mengambil dari file create.blade.php yang akan kita buat file tersebut pada langkah berikutnya. Kemudian ada button edit yang akan memanggil method edit dengan parameter post id. Selain itu kita juga membuat button delete yang akan memanggil method delete dengan parameter post id.

Tambah File create.blade.php

<div class="fixed z-10 inset-0 overflow-y-auto ease-out duration-400">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity">
            <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>?
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
            role="dialog" aria-modal="true" aria-labelledby="modal-headline">
            <form>
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="">
                        <div class="mb-4">
                            <label for="title"
                                class="block text-gray-700 text-sm font-bold mb-2">Title</label>
                            <input type="text"
                                class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                id="title" placeholder="Enter Title" wire:model="title">
                            @error('title') <span class="text-red-500">{{ $message }}</span>@enderror
                        </div>
                        <div class="mb-4">
                            <label for="desc"
                                class="block text-gray-700 text-sm font-bold mb-2">Desc</label>
                            <textarea
                                class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                id="desc" wire:model="desc"
                                placeholder="Description"></textarea>
                            @error('desc') <span class="text-red-500">{{ $message }}</span>@enderror
                        </div>                     
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
                        <button wire:click.prevent="store()" type="button"
                            class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-red-600 text-base leading-6 font-bold text-white shadow-sm hover:bg-red-700 focus:outline-none focus:border-green-700 focus:shadow-outline-green transition ease-in-out duration-150 sm:text-sm sm:leading-5">
                            Store
                        </button>
                    </span>
                    <span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
                        <button wire:click="closeModal()" type="button"
                            class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-bold text-gray-700 shadow-sm hover:text-gray-700 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5">
                            Close
                        </button>
                    </span>
                </div>
            </form>
        </div>
    </div>
</div>

Pada langkah sebelumnya kita telah membuat button create yang akan memanggil method create dan akan menampilkan modal create form. Tapi kita belum mempunyai file untuk tampilan modal tersebut, apa solusinya ? ya kita buat file baru dengan nama create.blade.php, kemudian copy seluruh kode di atas dan paste pada file yang baru saja dibuat tersebut.

File create.blade.php ini tidak hanya ditampilkan saat kita klik button create, tapi juga saat kita klik button edit. Itu karena file ini ditampilkan saat isModalOpen bernilai true. Jika kita lihat kembali method create dan edit pada file PostCrud.php, kedua method tersebut saat dipanggil akan sama-sama memanggil method openModal. 

Edit navigation-menu.blade.php

<x-jet-nav-link href="{{ route('posts') }}" :active="request()->routeIs('posts')">
        Posts
</x-jet-nav-link>

Untuk memudahkan kita berpindah-pindah halaman, tambahkan nav link posts pada file navigation-menu.blade.php. Tambahkan kode di atas tepat di bawah nav link untuk dashboard. Nav link tersebut ditampilkan saat project dibuka pada desktop.

<x-jet-responsive-nav-link href="{{ route('posts') }}" :active="request()->routeIs('posts')">
       Posts
</x-jet-responsive-nav-link>

Agar nav link posts juga muncul saat dibuka pada versi mobile, tambahkan kode di atas pada section yang terdapat comment <!-- Responsive Navigation Menu -->. 

Pengujian

Setelah melewati proses-proses mulai dari install laravel, jetstream, livewire, hingga membuat component-component CRUD, sekarang waktunya pengujian. Silahkan coba dengan menjalankan php artisan serve terlebih dahulu, kemudian buka project pada browser.

Karena pada route/web.php kita sudah memberikan middleware untuk /posts, maka jika kita langsung buka url 127.0.0.1:8000/posts akan diarahkan ke halaman login. Untuk itu, sebelum mencoba CRUD posts, silahkan coba register user baru terlebih dahulu.

Setelah sukses register, maka kita akan di arahkan ke halaman dashboard. Dari sini, silahkan klik nav link Posts untuk melihat tampilan CRUD posts. Tampilan CRUD atau manage Posts bisa dilihat seperti pada gambar di atas. Disini kita sudah bisa melakukan create, edit dan delete data.

Kesimpulan

Pada artikel ini kita telah sama-belajar bagaimana cara membuat sistem CRUD sederhana dengan laravel 8 dan jetstream livewire. Dengan livewire, kita bisa dengan mudah membuat sistem CRUD tanpa reload page. Dan dengan jetstream, kita bisa dengan mudah membuat sistem authentication dengan fitur lengkap dan tampilan yang luar biasa.

Sekian artikel tutorial membuat sistem CRUD dengan laravel 8 dan jetstream livewire kali ini. Jika ada kritik, saran, masukan atau apapun itu yang ingin didiskusikan, jangan sungkan-sungkan untuk meninggalkan komentar pada form komentar yang tersedia di bawah ini. See you

Web illustrations by Storyset