Contoh Tutorial CRUD dengan Laravel 8 Jetstream dan Tailwind CSS

Sekarang, mari kita lihat artikel contoh laravel 8 livewire . Tutorial ini akan
memberi Anda contoh sederhana dari laravel 8 livewire crud dengan
jetstream & tailwind css. saya ingin menunjukkan laravel 8 livewire crud
dengan modal. Kita akan melihat contoh aplikasi crud laravel 8 jetstream
livewire.
Dalam contoh ini saya akan menunjukkan langkah demi langkah aplikasi
laravel 8 livewire crud dengan modal tailwind css.
Laravel 8 jetstream dirancang oleh Tailwind CSS dan mereka menyediakan
autentikasi menggunakan livewire dan Inertia. saya akan menunjukkan
cara membuat modul dengan livewire di auth jetstream default di laravel 8.
Di sini, di bawah saya menulis langkah demi langkah, sehingga Anda dapat
dengan mudah memulai master posting sederhana dengan step up auth
laravel 8 jetstream Anda yang sudah ada dengan tailwind css. Anda hanya
perlu mengikuti beberapa langkah di bawah ini dan Anda akan
mendapatkan layout seperti di bawah ini:

Langkah 1: Instal Laravel 8

Di sini, kita perlu menginstal aplikasi laravel 8 menggunakan perintah

komposer.

Laravel new blog

Langkah 2: Buat Auth dengan Jetstream Livewire

Sekarang, pada langkah ini, kita perlu menggunakan perintah komposer
untuk menginstal jetstream, jadi jalankan perintah di bawah dan install
library di bawah.

composer require laravel/jetstream

sekarang, kita perlu membuat otentikasi menggunakan perintah di bawah

ini. Anda dapat membuat login dasar, register , dan verifikasi email. Jika
Anda ingin membuat manajemen tim maka Anda harus melewati
parameter penambahan. Anda dapat melihat perintah di bawah ini:

php artisan jetstream:install livewire

Sekarang, mari install paket node js:

npm install

ayo jalankan paket:

npm run dev

sekarang, kita perlu menjalankan perintah migrasi untuk membuat tabel

database:

php artisan migrate

Langkah 3: Buat Migrasi dan Model

Disini kita perlu membuat migrasi database untuk tabel file dan juga akan
membuat model untuk tabel file.

php artisan make:migration create_posts_table

Migration:

<?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->text('body');
            $table->timestamps();
        });
  }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
  {
        Schema::dropIfExists('posts');
  }
}
php artisan migrate

Sekarang kita akan membuat model Post dengan menggunakan perintah

berikut:

php artisan make:model Post

App/Models/Post.php
<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Post extends Model
{
    use HasFactory;
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'title', 'body'
    ];
}
Langkah 3: Buat Komponen Posting

Sekarang di sini kita akan membuat komponen livewire menggunakan

perintah mereka. jadi jalankan perintah di bawah untuk membuat
komponen aplikasi post crud.

php artisan make:livewire posts

Sekarang mereka membuat fies di kedua path:

app/Http/Livewire/Posts.php
resources/views/livewire/posts.blade.php

Langkah 4: Perbarui File Komponen

Di sini, kita akan menulis metode render(), create(), openModal(),

closeModal(), resetInputFields(), store(), edit() dan delete() untuk aplikasi
mentah kita.
Jadi, mari, perbarui file berikut.

app/Http/Livewire/Post.php

<?php
  
namespace App\Http\Livewire;
  
use Livewire\Component;
use App\Models\Post;
  
class Posts extends Component
{
    public $posts, $title, $body, $post_id;
    public $isOpen = 0;
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function render()
  {
        $this->posts = Post::all();
        return view('livewire.posts');
  }
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    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->post_id = '';
  }
   
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function store()
  {
        $this->validate([
            'title' => 'required',
            'body' => 'required',
        ]);
  
        Post::updateOrCreate(['id' => $this->post_id], [
            'title' => $this->title,
            'body' => $this->body
        ]);
  
        session()->flash('message', 
            $this->post_id ? 'Post Updated Successfully.' : 'Post Created
Successfully.');
  
        $this->closeModal();
        $this->resetInputFields();
  }
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function edit($id)
  {
        $post = Post::findOrFail($id);
        $this->post_id = $id;
        $this->title = $post->title;
        $this->body = $post->body;
    
        $this->openModal();
  }
   
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function delete($id)
  {
        Post::find($id)->delete();
        session()->flash('message', 'Post Deleted Successfully.');
  }
}
Langkah 5: Perbarui File Blade

Di sini, kami akan memperbarui daftar file berikut untuk halaman daftar
kami, buat page. Jadi, mari perbarui semua file seperti di bawah ini:

resource/views/livewire/posts.blade.php

<x-slot name="header">
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
      Manage Posts (Laravel 8 Livewire CRUD with Jetstream & Tailwind
CSS - Medikre.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 Post</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($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->body }}</td>
                        <td class="border px-4 py-2">
                        <button wire:click="edit({{ $post->id }})" class="bg-blue-500
hover:bg-blue-700 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>

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>
        </form>
      </div>
        
    </div>
  </div>
</div>

Langkah 6: Tambahkan Route

Langkah ke enam, kami akan membuat route untuk beberapa file upload.
jadi buat dua route dengan contoh route GET dan POST.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Livewire\Posts;
  
/*
|--------------------------------------------------------------------------
| 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('post', Posts::class);

Sekarang Anda dapat menjalankan aplikasi Anda dengan perintah di

bawah ini:

php artisan serve

sekarang Anda dapat menjalankan aplikasi dan masuk sebagai pengguna,

lalu Anda dapat membuka url berikut:

localhost:8000/post

sekarang berhasil ...