Hai Para Developer,
Kali ini, saya akan menunjukkan kepada Anda livewire crud dengan jetstream di aplikasi laravel 8. Kita akan mempelajari contoh aplikasi laravel 8 jetstream livewire yang masih fress. Saya ingin berbagi dengan Anda bagaimana cara melakukan live-opeartion live dengan jetstream di aplikasi laravel 8.
Artikel ini akan memberi Anda contoh yang mudah dan sederhana dari contoh aplikasi laravel 8 jetstream livewire. Dalam contoh ini saya akan menunjukkan tahapan demi tahapan aplikasi laravel 8 livewire crud dengan modal tailwind css.
Laravel 8 jetstream dirancang oleh Tailwind CSS dan mereka menyediakan auth menggunakan livewire dan Inertia. saya akan menunjukkan cara membuat modul dengan livewire di auth jetstream default di laravel 8.
Di sini saya akan memberi Anda contoh lengkap untuk contoh aplikasi laravel 8 jetstream livewire. Jadi mari kita ikuti langkah demi langkah berikut:
Step 1 : Install Laravel 8 App
Pada langkah pertama, kita perlu mendapatkan aplikasi versi laravel baru menggunakan perintah di bawah ini. Jadi mari kita buka terminal dan jalankan perintah di bawah ini.
composer create-project --prefer-dist laravel/laravel blog
Step 2 : Create Jetstream Auth with Livewire:
Anda dapat mengikuti perintah di bawah ini yang diketikan pada terminak seperti bawah ini:
composer require laravel/jetstream
Berikutnya kita membuat authentifikasi dengan perintah yang mana ini merupakan dasar untuk login, register dan email verification, dan anda juga dapat menambahkan opsi kolaborasi dengan menambahkan parameter team. Berikut perintahnya :
php artisan jetstream:install livewire
Dan kemudian kita sertakan node js paket :
npm install
Dilajutkan dengan menjalakan node js :
npm run dev
Sekarang kita memerlukan migrasi dengan perintah sebagai berikut :
php artisan migrate
Step 3 : Create Migration and Model
Pada langkah ini, kita harus membuat migrasi untuk tabel blog menggunakan perintah di bawah artisan. Jadi mari kita buka terminal dan jalankan perintah di bawah ini:
php artisan make:migration create_blogs_table
database/migrations/2021_04_12_092627_create_blogs_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateBlogsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('blogs', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('body');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('blogs');
}
}
Kemudian jalankan perintah berikut :
php artisan migrate
Dilanjutkan lagi dengan membuat model dengan perintah ini :
php artisan make:model Blog
App/Models/Blog.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Blog extends Model
{
use HasFactory;
protected $fillable = [
'title', 'body',
];
} Step 4 : Create Blog Component
Pada langkah ini, kita harus membuat komponen livewire blog menggunakan perintah di bawah ini. Jadi mari kita buka terminal dan jalankan perintah bello:
php artisan make:livewire blogs
Sekarang mereka membuat dua file di dengan path:
app/Http/Livewire/Blogs.php
resources/views/livewire/blogs.blade.php
Step 5 : Update Component File
Di sini Kami akan menulis metode render (), create (), openModal (), closeModal (), resetInputFields (), store (), edit () dan delete () untuk aplikasi crud kita.
Jadi, mari, perbarui file berikut.
app/Http/Livewire/Blogs.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Blog;
class Blogs extends Component
{
public $blogs, $title, $body, $blog_id;
public $isOpen = 0;
public function render()
{
$this->blogs = Blog::all();
return view('livewire.blogs');
}
public function create()
{
$this->resetInputFields();
$this->openModal();
}
/**
* The attributes that are mass assignable.
*
* @var array
*/
public function openModal()
{
$this->isOpen = true;
}
/**
* The attributes that are mass assignable.
*
* @var array
*/
public function closeModal()
{
$this->isOpen = false;
}
/**
* The attributes that are mass assignable.
*
* @var array
*/
private function resetInputFields(){
$this->title = '';
$this->body = '';
$this->blog_id = '';
}
/**
* The attributes that are mass assignable.
*
* @var array
*/
public function store()
{
$this->validate([
'title' => 'required',
'body' => 'required',
]);
Blog::updateOrCreate(['id' => $this->blog_id], [
'title' => $this->title,
'body' => $this->body
]);
session()->flash('message',
$this->blog_id ? 'Blog Updated Successfully.' : 'Blog Created Successfully.');
$this->closeModal();
$this->resetInputFields();
}
/**
* The attributes that are mass assignable.
*
* @var array
*/
public function edit($id)
{
$blog = Blog::findOrFail($id);
$this->blog_id = $id;
$this->title = $blog->title;
$this->body = $blog->body;
$this->openModal();
}
/**
* The attributes that are mass assignable.
*
* @var array
*/
public function delete($id)
{
Blog::find($id)->delete();
session()->flash('message', 'Blog Deleted Successfully.');
}
}
Step 6 : Update Blade Files
Di sini, kira akan memperbarui daftar file berikut untuk halaman create page, membuat halaman.Jadi, mari, perbarui file berikut.
resource/views/livewire/blogs.blade.php
<x-slot name="header"><h2 class="font-semibold text-xl text-gray-800 leading-tight">
Manage blogs (Laravel 8 Jetstream Livewire CRUD App Example - ikhwansaputera.blogspot.com)
</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">Create New Blog</button>
@if($isOpen)
@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">Body</th>
<th class="px-4 py-2">Action</th>
</tr>
</thead>
<tbody>
@foreach($blogs as $blog)
<tr>
<td class="border px-4 py-2">{{ $blog->id }}</td>
<td class="border px-4 py-2">{{ $blog->title }}</td>
<td class="border px-4 py-2">{{ $blog->body }}</td>
<td class="border px-4 py-2">
<button wire:click="edit({{ $blog->id }})" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Edit</button>
<button wire:click="delete({{ $blog->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>resources/views/livewire/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>
<!-- 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="exampleFormControlInput1" 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="exampleFormControlInput1" placeholder="Enter Title" wire:model="title">
@error('title') <span class="text-red-500">{{ $message }}</span>@enderror
</div>
<div class="mb-4">
<label for="exampleFormControlInput2" class="block text-gray-700 text-sm font-bold mb-2">Body:</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="exampleFormControlInput2" wire:model="body" placeholder="Enter Body"></textarea>
@error('body') <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>
</div>
</form>
</div>
</div>
</div>
Step 7 : Add Route
Pada langkah ini, kita akan membuat rute untuk jetstream crud dengan livewire
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Livewire\Blogs;
/*
|--------------------------------------------------------------------------
| 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::get('blog', Blogs::class);
Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () {
return view('dashboard');
})->name('dashboard');
Sekarang kita siap untuk menjalankan contoh aplikasi laravel 8 jetstream livewire crud jadi jalankan perintah di bawah ini untuk menjalankan dengan cepat dan mudah :
php artisan serve
Sekang Anda dapat membuka browser dengan alamat :
localhost:8000/blog
Perlu saya ingatkan terlebih dahulu Anda register agar bisa menggunakan seperti gambar dibawah ini
