CoretanKode – Membuat CMS Blogging (Part 3) – Membuat CRUD Livewire Laravel 8, Setelah berhasil membuat CMS blogging hingga tahap login dan authentikasi di episode sebelumnya sekarang admin akan lanjut membahas ke materi cara membuat crud dengan laravel versi 8 (Livewire CRUD).

Di Part sebelumnya kita telah berhasil menginstal Jetstream dan juga Livewire pada projek laravel yang telah kita buat, nah selanjutnya adalah bagaimana cara membuat konten pada CMS blog kita ?

SERI MEMBUAT CMS SENDIRI DENGAN LARAVEL 8:

CRUD (Create, Read, Update dan Delete) konten adalah jawabannya, kita harus membuat sebuah sistem pembuatan konten pada projek laravel kita, dan cara termudah membuat CRUD pada laravel versi 8 iyalah dengan menggunakan LiveWire.

Apa itu LiveWire ?

LiveWire adalah sebuah framework yang bekerja secara full-stack pada framework PHP yakni laravel terutama untuk versi 8+ yang membuat pengerjaan back-end dan front-end berat menjadi lebih ringan lagi.

LiveWire ini juga sangat istimewa karena dapat melakukan pengecekan error inputan secara live, jadi kalian bisa langsung mengetahui dimana letak kesalahan kalian pada saat mengalami Error.

Jadi LiveWire sendiri bisa dikatakan sebagai Front-End frameworknya untuk projek laravel. Selain itu kalian juga sangat bisa membuat sebuah SPA (Single Page Application) tanpa ribet lagi mainin JS secara manual loh pada saat menggunakan LiveWire ini.

Membuat CRUD Jetstream Livewire Laravel 8

Cara membuatnya cukup mudah sebenarnya untuk membuat crud dengan livewire di laravel 8 ini tetapi pastikan kalian telah menginstal Jetstream beserta Livewire terlebih dahulu untuk projek laravel 8 kalian yang ini.

Cara menginstalnya dapat kalian baca pada Part 2 dari Seri Membuat CMS Blogging ini, nah bila kalian sudah menginstal Jetstream dan juga sudah ada LiveWire maka kalian bisa lanjut ke proses pembuatan LiveWire.

CRUD yang akan kita buat ini adalah CRUD bersifat SPA (Single Page Application) jadi kalian tidak perlu repot lama menunggu proses loading perpindahan halaman pada saat ingin melakukan sebuah update ataupun create dan delete.

Membuat Migration dan Model Konten

Nah sebelum kita memulai membuat CRUD-nya maka terlebih dahulu kita harus menyiapkan tabel untuk menyimpan data inputan kita dalam database yang digunakan. Disini admin menggunakan MySQL lokal menggunakan XAMPP.

  • Silahkan buka terminal pada projek laravel kalian
  • Silahkan ketikkan perintah php artisan make:model Konten -m
  • File Migration akan terbuat dan buatlah kolom tabel sesuai dengan kebutuhan anda contohnya :

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateKontensTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('members', function (Blueprint $table) {
$table->id();
$table->string('judul');
$table->string('shortdescription');
$table->string('kategori');
$table->longText('isikonten');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('members');
}
}

  • Silahkan eksekusi perintah php artisan migrate

Nah dengan kode diatas kita telah berhasil membuat sebuah tabel migration laravel dengan 6 kolom yang nantinya tidak semua kolom tersebut dapat kita inputkan secara manual yah, hanya beberapa kolom yang kita set bisa diisi dan itu akan kita setting pada Model dari migration tersebut.

Setting Model pada Migration table Konten :

  • Silahkan buka file Model Konten pada App\Models
  • dan tambahkan protected $fillable = ['judul', 'shortdesc', 'kategori', 'isikonten'];
  • Save model anda

Nah pada saat migration dan model telah selesai dibuat maka selanjutnya kita akan terjun ke pembuatan LiveWire dan proses CRUD-nya.

Membuat LiveWire Baru

Tugas selanjutnya adalah kita akan membuat sebuah LiveWire yang nantinya akan bertugas sebagai FrontEnd dan juga BackEnd dari projek kita. Silahkan ikuti langkah dibawah ini :

  • Silahkan buka terminal kalian dan masukkan perintah php artisan make:livewire kontens
  • Selanjutnya silahkan kalian buka file livewire kontens kalian di folder LiveWire (app/Http/Livewire/Kontens.php)
  • Isi menggunakan Contoh dibawah ini :

<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Konten;
class Kontens extends Component
{
public $kontens, $judul, $shortdescription, $isikonten, $kategori, $konten_id;
public $isModal = 0;
//Function Halaman Awal
public function render()
{
$this->kontens = konten::orderBy('created_at', 'DESC')->get();
return view('livewire.kontens');
}
//Function Tombol Create
public function create()
{
$this->resetFields();
$this->openModal();
}
//Function Tutup Modal
public function closeModal()
{
$this->isModal = false;
}
//Function Buka Modoal
public function openModal()
{
$this->isModal = true;
}
//Function Reset Kolom Inputan
public function resetFields()
{
$this->judul = '';
$this->shortdescription = '';
$this->isikonten = '';
$this->kategori = '';
$this->konten_id = '';
}
//Function Store ke Database
public function store()
{
$this->validate([
'judul' => 'required|string',
'shortdescription' => 'required',
'kategori' => 'required',
'isikonten' => 'required'
]);
Konten::updateOrCreate(['id' => $this->konten_id], [
'judul' => $this->judul,
'shortdescription' => $this->shortdescription,
'isikonten' => $this->isikonten,
'kategori' => $this->kategori,
]);
session()->flash('message', $this->konten_id ? $this->judul . ' Diperbaharui': $this->judul . ' Ditambahkan');
$this->closeModal();
$this->resetFields();
}
public function edit($id)
{
$konten = Konten::find($id);
$this->konten_id = $id;
$this->judul = $konten->judul;
$this->isikonten = $konten->isikonten;
$this->shortdescription = $konten->shortdescription;
$this->kategori = $konten->kategori;
$this->openModal();
}
public function delete($id)
{
$konten = Konten::find($id);
$konten->delete();
session()->flash('message', $konten->judul . ' Dihapus');
}
}

  • Save file dan lanjut membuat View

Membuat Blade View Files

Selanjutnya pada saat backend menggunakan livewire telah selesai kita buat, makan membuat form dan tampilan lainnya adalah langkah selanjutnya yang akan kita laksanakan sekarang. Nah sekarang kita akan membuat halaman awal-nya terlebih dahulu.

Halaman awal dimana akan menampilkan beberapa data Konten yang telah kita buat dan juga tombol untuk manajemennya (Buat, Edit dan Hapus).

Membuat Halaman Render

Menurut livewire yang telah kita buat kita menggunakan nama view kontens, oleh karena itu kita akan membuka file didalam view livewire yang bernama kontens (livewire/kontens.blade.php)

Isi kodingan kontens.blade.php :

<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Manajemen Konten
</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-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded my-3">Tambah Post</button>
@if($isModal)
@include('livewire.create')
@endif
<table class="table-fixed w-full">
<thead>
<tr class="bg-gray-100">
<th class="px-4 py-2">Judul</th>
<th class="px-4 py-2">Short Description</th>
<th class="px-4 py-2">Action</th>
</tr>
</thead>
<tbody>
@forelse($kontens as $row)
<tr>
<td class="border px-4 py-2">{{ $row->judul }}</td>
<td class="border px-4 py-2">{{ $row->shortdescription }}</td>
<td class="border px-4 py-2">
<button wire:click="edit({{ $row->id }})" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Edit</button>
<button wire:click="delete({{ $row->id }})" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Hapus</button>
</td>
</tr>
@empty
<tr>
<td class="border px-4 py-2 text-center" colspan="5">No Record</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>

Membuat Halaman Create.blade.php untuk Buat dan Edit Konten Lama

Nah selanjutnya pada saat kalian telah selesai membuat halaman index alias halaman Read yang disertai Delete dan tombol Edit, maka selanjutnya kita akan membuat halaman Create/Edit yang nanti akan diload kedalam Modal yang telah kita sediakan.

  • Buatlah file dengan nama create.blade.php pada folder resources/views/livewire
  • Isi file blade tersebut dengan sintak seperti dibawah ini:

<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>
<!-- This element is to trick the browser into centering the modal contents. -->
<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="formjudul" class="block text-gray-700 text-sm font-bold mb-2">Judul:</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="formjudul" wire:model="judul">
@error('judul') <span class="text-red-500">{{ $message }}</span>@enderror
</div>
<div class="mb-4">
<label for="formKategory" class="block text-gray-700 text-sm font-bold mb-2">Email:</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="formKategory" wire:model="kategori">
@error('kategori') <span class="text-red-500">{{ $message }}</span>@enderror
</div>
<div class="mb-4">
<label for="formShortdescription" class="block text-gray-700 text-sm font-bold mb-2">Short Description:</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="formShortdescription" wire:model="shortdescription">
@error('shortdescription') <span class="text-red-500">{{ $message }}</span>@enderror
</div>
<div class="mb-4">
<label for="formIsikonten" class="block text-gray-700 text-sm font-bold mb-2">Isi Konten:</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="formIsikonten" wire:model="isikonten">
@error('isikonten') <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-green-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green transition ease-in-out duration-150 sm:text-sm sm:leading-5">
Save
</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-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5">
Cancel
</button>
</span>
</form>
</div>
</div>
</div>
</div>

  • Save File Create.blade.php anda

Selesai deh sampai tahap ini nah selanjutnya kalian membuat sebuah route

Membuat Route CRUD LiveWire

Disini kalian bisa langsung saja untuk membuka file web.php pada folder Routes projek kalian yah dan langsung menambahkan beberapa sintak dibawah ini :

  • Header aksesor livewire : use App\Http\Livewire\Kontens;
  • Route url dengan akses class dari LiveWire: Route::get('konten', Kontens::class)->name('member');
  • Save

Nah terakhir kalian hanya perlu mengekseskusi perintah php artisan servedan silahkan cek lagi fungsionalitas CRUD pada projek laravel 8 kalian sekarang.

Bagaimana sangat simpel sekali bukan bila kalian ingin membuat sebuah CRUD berbasis SPA pada laravel versi 8 ini, dengan adanya LiveWire proses Back-end dan juga Front-End dari laravel 8 sangatlah terasa jauh lebih mudah.

Dan terlihat sangat jelas bahwa Framework PHP yang satu ini sangat-sangat serius dikembangkan oleh komunitas dan developernya. Sekian dulu untuk postingan Part ke-3 ini semoga bermanfaat dan bila ada pertanyaan kalian bisa langsung bertanya via DM instagram ataupun Chat FB yah.

Terima kasih telah berkunjung dan Assalamualaikum Warahmatullahi Wabarakatu.