In this article, we will learn you how to create a Laravel 8 Jetstream Livewire CRUD Example Tutorial. Laravel Jetstream Livewire is a library and we can easily build modern, reactive, dynamic interfaces.
Laravel Jetstream designed by Tailwind CSS. The Jetstream provides the login, registration, email verification, two-factor authentication, session management, API support via Laravel Sanctum, and optional team management.
Now, we follow the below steps for creating the laravel 8 Jetstream Livewire CRUD(Laravel 8 Jetstream Livewire CRUD example). so you can see our laravel 8 tutorial.
Overview
Step 1: Install Laravel 8
Step 2: Setting Database Configuration
Step 3: Create Jetstream Auth with Livewire
Step 4: Create Migration and Model
Step 5: Create Student Component
Step 6: Update Component File
Step 7: Update Blade Files
Step 8: Add Route
Step 9: Run Our Laravel Application
Step 1: Install Laravel 8
We are going to install laravel 8, so first open the command prompt or terminal and go to xampp htdocs folder directory using the command prompt. after then run the below command for laravel 8 install.
composer create-project --prefer-dist laravel/laravel laravel8_jl_crud
Step 2: Setting Database Configuration
After the complete installation of laravel. we have to database configuration. now we will open the .env file and change the database name, username, password in the .env file. See below changes in a .env file.
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=Enter_Your_Database_Name(laravel8_jl_crud) DB_USERNAME=Enter_Your_Database_Username(root) DB_PASSWORD=Enter_Your_Database_Password(root)
Step 3: Create Jetstream Auth with Livewire
We will install a Jetstream package using the below php artisan command.
composer require laravel/jetstream
Now, We will install a Jetstream With Livewire package using the below php artisan command.
php artisan jetstream:install livewire
After installing Jetstream With Livewire, We have to install and build your NPM dependency and migrate our database using the below command.
npm install && npm run dev php artisan migrate
Step 4: Create Migration and Model
Now, We need to create a migration. so we will below command using create the students table migration.
php artisan make:migration create_students_table --create=students
After complete migration. we need below changes in the database/migrations/create_students_table file.
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateStudentsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('students', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('first_name');
$table->string('last_name');
$table->text('address');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('students');
}
}
?>Run the below command. after the changes above file.
php artisan migrate
Here below command help to create the model.
php artisan make:model Student
Student.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Student extends Model
{
use HasFactory;
protected $fillable = [
'first_name','last_name', 'address'
];
}
?>Step 5: Create Student Component
We will create the student component using below command. so you can follow below command.
php artisan make:livewire students
After created component, two files are created so you can see path.
app/Http/Livewire/Students.php resources/views/livewire/students.blade.php
Step 6: Update Component File
In this step, we will update the some method in this file. so you can see our following file.
app/Http/Livewire/Students.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Student;
class Students extends Component
{
public $students, $first_name, $last_name, $address, $student_id;
public $isOpen = 0;
/**
* The attributes that are mass assignable.
*
* @var array
*/
public function render()
{
$this->students = Student::all();
return view('livewire.students');
}
/**
* 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->first_name = '';
$this->last_name = '';
$this->address = '';
$this->student_id = '';
}
/**
* The attributes that are mass assignable.
*
* @var array
*/
public function store()
{
$this->validate([
'first_name' => 'required',
'last_name' => 'required',
'address' => 'required',
]);
Student::updateOrCreate(['id' => $this->student_id], [
'first_name' => $this->first_name,
'last_name' => $this->last_name,
'address' => $this->address
]);
session()->flash('message',
$this->student_id ? 'Student Updated Successfully.' : 'Student Created Successfully.');
$this->closeModal();
$this->resetInputFields();
}
/**
* The attributes that are mass assignable.
*
* @var array
*/
public function edit($id)
{
$student = Student::findOrFail($id);
$this->student_id = $id;
$this->first_name = $student->first_name;
$this->last_name = $student->last_name;
$this->address = $student->address;
$this->openModal();
}
/**
* The attributes that are mass assignable.
*
* @var array
*/
public function delete($id)
{
Student::find($id)->delete();
session()->flash('message', 'Student Deleted Successfully.');
}
}
?>Step 7: Update Blade Files
So finally, first we need to update the following blade file. so you can see our blade files.
resources/views/livewire/students.blade.php
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Laravel 8 Jetstream Livewire CRUD Example Tutorial - XpertPhp
</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 Student</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">First Name</th>
<th class="px-4 py-2">Last Name</th>
<th class="px-4 py-2">Address</th>
<th class="px-4 py-2">Action</th>
</tr>
</thead>
<tbody>
@foreach($students as $student)
<tr>
<td class="border px-4 py-2">{{ $student->id }}</td>
<td class="border px-4 py-2">{{ $student->first_name }}</td>
<td class="border px-4 py-2">{{ $student->last_name }}</td>
<td class="border px-4 py-2">{{ $student->address }}</td>
<td class="border px-4 py-2">
<button wire:click="edit({{ $student->id }})" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Edit</button>
<button wire:click="delete({{ $student->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="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="exampleFormControlInput1" class="block text-gray-700 text-sm font-bold mb-2">First Name:</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 First Name" wire:model="first_name">
@error('first_name') <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">Last Name:</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="exampleFormControlInput2" placeholder="Enter Last Name" wire:model="last_name">
@error('last_name') <span class="text-red-500">{{ $message }}</span>@enderror
</div>
<div class="mb-4">
<label for="exampleFormControlInput3" class="block text-gray-700 text-sm font-bold mb-2">Address:</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="exampleFormControlInput3" wire:model="body" placeholder="Enter Address"></textarea>
@error('address') <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 8: Add Route
We have to need put below student resource route in routes/web.php.
routes/web.php
use App\Http\Livewire\Students;
Route::get('student', Students::class);Step 9: Run Our Laravel Application
We can start the server and run this example using the below command.
php artisan serve
Now we will run our example using the below Url in the browser.
http://127.0.0.1:8000/student
