Membuat CRUD Livewire – Belajar Laravel Part 4

Tekno Clarity – Membuat CRUD Livewire – Belajar Laravel Part 4, Pada kesempatan kali ini admin akan melanjutkan tutorial belajar laravel dari nol kita bagian yang ke empat.

Artikel Menarik Lainnya :

Pada artikel ini admin akan menunjukkan bagaimana cara membuat CRUD Livewire pada sebuah projekan laravel versi 8. Sebenarnya versi terbaru pun masih bisa menggunakan cara yang sama kok, oleh karena itu kalian bisa mencoba aja tutorial yang admin berikan yah.

Bila membahas tentang pengertian dari livewire ini sendiri menurut Appkey.id, Laravel Livewire adalah sebuah library yang memungkinkan Anda untuk membangun reactive and dynamic interface (antarmuka yang dinamis dan reaktif) menggunakan kode-kode Blade dan sedikit kode-kode JavaScript.

Nah jadi kita bisa membuat sistem dinamis jauh lebih mudah apabila menggunakan fitur laravel livewire ini. Lalu bagaimana cara membuatnya ? Silahkan baca artikel ini sampai habis yah karena admin memberikan tutorial tertulis dan video tutorialnya di bawah.

Cara Membuat CRUD Livewire di Laravel

Sekarang admin akan memberikan tutorial cara membuat CRUD Livewire di Laravel dengan sangat mudah, berikut ini adalah langkah-langkahnya :

  1. Silahkan buka projek framework laravel kalian, atau kalian bisa membuat ulang projekan dengan cara mengeksekusi perintah berikut di terminal/cmd kalian : 
    composer create-project --prefer-dist laravel/laravel=^8.* tekno-clarity-crud
  2. Nah setelah berhasil membuat projekan baru, silahkan kalian instal Jetstream dan juga Livewire dengan cara mengeksekusi kode berikut pada terminal di dalam folder projek kalian : 
    composer require laravel/jetstream
lalu jalankan perintah,
php artisan jetstream:install livewire
  3. Nah setelah berhasil menginstal livewire dan jetstream, jangan lupa kalian eksekusi perintah php artisan migrate terlebih dahulu
  4. Setelah itu silahkan kalian buat file migration dan model pada projekan kalian terlebih dahulu yang akan menggunakan fitur CRUD nih, contohnya kita akan membuat Migration dan Model bernama post. Berikut ini adalah caranya : 
    php artisan make:model Category -m

Untuk belajar Migration dan Model lebih lengkap, silahkan klik link berikut ini : Cara Membuat Migration dan Model – Belajar Laravel Part 2
  5. Setelah berhasil membuat Migration dan Model, pada file Migration silahkan anda tambahkan 2 kolom tabel sehingga migration terlihat seperti berikut : 
    public function up()
{
Schema::create('alternatifs', function (Blueprint $table) {
$table->id();
$table->string('judul');
$table->string('title');
$table->timestamps();
});
}
  6. Lalu pada bagian model silahkan kalian buat variabel $fillable, seperti yang terlihat pada baris kode berikut ini : 
     protected $fillable = ['judul', 'title'];
  7. Membuat component livewire pada projekan kalian untuk menempatkan fitur CRUD livewirenya, silahkan masukkan kode berikut di Terminal projek kalian : 
     php artisan make:livewire Kategori
  8. Maka akan terbuat dua buah file yakni file kategori.php di app/http/livewire dan kategori.blade.php di bagian views/livewire
  9. Pada post.php silahkan kalian masukkan kode seperti berikut ini : 
     <?php

namespace App\Http\Livewire;

use App\Models\Category;

use Livewire\Component;

class Kategori extends Component

{

    public $id_kategori, $kode, $title, $judul;

    public $isModalOpen1=0;

    private function resetCreateForm(){

        $this->kode = '';

        $this->judul='';

        $this->title = '';

    }

    public function render()

    {

        $this->all_docs = Category::all();

        return view('livewire.kategori');

    }

    public function delete($id){

        Category::find($id)->delete();

        return redirect()->route('categories');

    }

    public function openModal1()

    {

        $this->isModalOpen1 = true;

    }

    public function tambahkategori(){

        $this->resetCreateForm();

        $this->openmodal1();

    }

    public function edit($id){

        $kategori = Category::findOrFail($id);

        $this->kode = $kategori->kode;

        $this->id_kategori = $kategori->id;

        $this->judul = $kategori->judul;

        $this->title = $kategori->title;

        $this->openModal1();

    }

    public function store()

    {

        $this->validate([

            'kode' => 'required',

            'title' => 'required',

            'judul' => 'required',

        ]);

        Category::updateOrCreate(['id' => $this->id_kategori], [

            'kode' => $this->kode,

            'judul' => $this->judul,            

            'title' => $this->title,

        ]);

        session()->flash('message', $this->id_kategori ? 'Decisioner updated.' : 'Decisioner created.');

        $this->resetCreateForm();

        return redirect()->to('dashboard/categories');

    }

}
  10. Pada bagian view kategori.blade.php silahkan kalian gunakan view seperti berikut : 
    @if($isModalOpen1)

@include('livewire.formkategori')

@endif

<div class="body flex-grow-1">

    <div class="container-lg">

            <div class="card">

                <div class="card-body">

                  {{-- <div class="d-flex justify-content-between">

                    @if (session()->has('message'))

                        <div class="alert alert-success">

                        {{ session('message') }}

                        </div>

                    @endif

                  </div>    <br> --}}

                  <div class=" justify-content-between">

                    <button class="form-control btn btn-success" wire:click="tambahkategori()">Tambah Kategori</button><p></p>

                    <table class="table table-striped" id="example">

                      <thead>

                      <tr>

                        <th>No.</th>

                        <th>Kode</th>

                        <th>Nama</th>

                        <th>Aksi</th>

                      </tr>

                    </thead>

                    <tbody>

                      @foreach($all_docs as $docs)

                      <tr>

                        <td>{{$loop->iteration}}</td>

                        <td>{{$docs->kode}}</td>

                        <td>{{$docs->judul}}</td>

                        <td><button wire:click="edit({{ $docs->id }})" class="btn btn-primary">Edit</button> <button class="btn btn-danger" wire:click="delete({{ $docs->id }})">Hapus</button></td>

                      </tr>

                      @endforeach

                    </tbody>

                    <tfoot>

                      <tr>

                        <th>No.</th>

                        <th>Kode</th>

                        <th>Nama</th>

                        <th>Aksi</th>

                      </tr>

                    </tfoot>

                    </table>

                  </div>

              </div>

            </div>

    </div>

</div>
  11. Lalu kita akan membuat sebuah component livewire satu lagi yang bernama formkategori, dengan cara yang sama yakni : 
    php artisan make:livewire formkategori
  12. Pada bagian views formkategori.blade.php silahkan kalian copy paste form berikut, ingat pastikan wire:model nya itu sama dengan variabel dan kolom yang kalian buat yah : 
    <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>

        <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="exampleFormControlInput1"

                                class="block text-gray-700 text-sm font-bold mb-2">Kode</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="exampleFormControlInput1" placeholder="Masukkan Kode" wire:model="kode">

                            @error('kode') <span class="text-red-500">{{ $message }}</span>@enderror

                        </div>

                        <div class="mb-4">

                            <label for="exampleFormControlInput1"

                                class="block text-gray-700 text-sm font-bold mb-2">Judul Bahasa Indonesia</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="exampleFormControlInput1" placeholder="Masukkan Judul B.Indonesia" wire:model="judul">

                            @error('judul') <span class="text-red-500">{{ $message }}</span>@enderror

                        </div>

                        <div class="mb-4">

                            <label for="exampleFormControlInput1"

                                class="block text-gray-700 text-sm font-bold mb-2">Judul Bahasa Inggris</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="exampleFormControlInput1" placeholder="Masukkan Judul B.Inggris" wire:model="title">

                            @error('title') <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="btn btn-success">

                            Simpan

                        </button>

                    </span>

                    <span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">

                        <a href="/dashboard/categories" class="btn btn-danger">

                            Kembali

                        </a>

                    </span>

                </div>

            </form>

        </div>

    </div>

</div>
  13. Pada bagian Route web.php jangan lupa berikan kode seperti berikut ini : 
    Route::get('dashboard/categories', Kategori::class)->name('categories');

dan tambahkan penggunaan livewire kategori pada bagian atas file route web.php :

use App\Http\Livewire\Kategori;
  14. Save lalu silahkan coba jalankan program kalian dengan cara mengeksekusi perintah php artisan serve dan buka di web browser localhost:8000 dan silahkan buka route kalian nih.
  15. Tampilannya kurang lebih akan terlihat seperti berikut ini :Membuat CRUD Livewire - Belajar Laravel Part 4
  16. Selesai deh.

Nah jadi begitulah cara membuat CRUD livewire di laravel dengan mudah cepat dan tidak repot sama sekali, karena kita hanya bermain kebanyakan pada bagian view saja.

Video Cara Membuat CRUD Livewire di Laravel

Untuk kalian yang mempunyai pertanyaan silahkan ajukan di kolom komentar youtube, setelah melihat tutorial dalam bentuk videonya yah. Berikut ini adalah video cara membuat CRUD Livewire di laravel versi 8:

Nah jadi itulah yang dapat admin sampaikan tentang Membuat CRUD Livewire – Belajar Laravel Part 4. Semoga bermanfaat dan terima kasih banyak telah berkunjung di Tekno Clarity.

Sekian dan Wassalamualaikum Warahmatullahi Wabarakatu.