Skip to content
  • About Us
  • Contact Us
  • Privacy Policy
  • Terms & Conditions
  • Site Map

XpertPhp

Expertphp Is The Best Tutorial For Beginners

  • Home
  • Javascript
    • Jquery
    • React JS
    • Angularjs
    • Angular
    • Nodejs
  • Codeigniter
  • Laravel
  • Contact Us
  • About Us
  • Live Demos
Laravel 8 Jetstream Livewire CRUD Example Tutorial

Laravel 8 Jetstream Livewire CRUD Example Tutorial

Posted on November 5, 2020September 26, 2021 By XpertPhp

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.

PHP
1
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.

PHP
1
2
3
4
5
6
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.

1
composer require laravel/jetstream

Now, We will install a Jetstream With Livewire package using the below php artisan command.

1
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.

1
2
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
1
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?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
1
php artisan migrate

Here below command help to create the model.

1
php artisan make:model Student

Student.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?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.

1
php artisan make:livewire students

After created component, two files are created so you can see path.

PHP
1
2
3
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<?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

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<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

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
    <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

1
2
3
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.

1
php artisan serve

Now we will run our example using the below Url in the browser.

1
http://127.0.0.1:8000/student

Please follow and like us:
error
fb-share-icon
Tweet
fb-share-icon

Recommended Posts:

  • Laravel 7 MongoDB CRUD Tutorial Example
  • Laravel 8 Newsletter Tutorial With Example
  • Laravel 8 Jetstream Authentication Example Tutorial
  • laravel eloquent WhereDay query example
  • Laravel 8 Rest API CRUD Example with Passport Auth
Laravel Tags:Laravel 8 CRUD, laravel 8 crud example, laravel livewire examples, laravel livewire tutorial

Post navigation

Previous Post: Laravel 8 Rest API Example With JWT Authentication
Next Post: install bootstrap 4 in angular 11 with example

Latest Posts

  • How to Convert Date and Time from one timezone to another in php
  • how to get current date and time in php
  • Drag and Drop Reorder Items with jQuery, PHP & MySQL
  • Laravel 9 Toastr Notifications Example Tutorial
  • Laravel 9 CRUD Operation Example Using Google Firebase
  • Laravel 9 CKeditor Image Upload With Example
  • Laravel 9 Summernote Image Upload With Example
  • Laravel 9 Stripe Payment Gateway Integrate Example
  • How To Send Email Using Mailtrap In Laravel 9
  • Laravel 9 Fullcalendar Ajax Example Tutorial

Tools

  • Compound Interest Calculator
  • Hex to RGB Color Converter
  • Pinterest Video Downloader
  • Age Calculator Online
  • Convert JSON to PHP Array Online
  • JavaScript Minifier
  • CSS Beautifier
  • CSS Minifier
  • JSON Beautifier
  • JSON Minifier

Categories

  • Ajax
  • Angular
  • Angularjs
  • Bootstrap
  • Codeigniter
  • Css
  • Htaccess
  • Javascript
  • Jquery
  • Laravel
  • MongoDB
  • MySql
  • Nodejs
  • Php
  • React JS
  • Shopify Api
  • Ubuntu

Tags

angular 10 tutorial angular 11 ci tutorial codeigniter 4 image upload Codeigniter 4 Tutorial codeigniter tutorial CodeIgniter tutorial for beginners codeigniter with mysql crud operation eloquent relationships file upload File Validation form validation Image Upload jQuery Ajax Form Handling jquery tricks jquery tutorial laravel 6 Laravel 6 Eloquent Laravel 6 Model laravel 6 relationship laravel 6 relationship eloquent Laravel 6 Routing laravel 7 Laravel 7 Eloquent laravel 7 routing laravel 7 tutorial Laravel 8 laravel 8 example laravel 8 tutorial laravel 9 example laravel 9 tutorial Laravel Framework laravel from scratch Laravel Socialite laravel social login nodejs pagination payment gateway php with mysql react js tutorial rewrite rule send mail validation wysiwyg editor

Copyright © 2018 - 2022,

All Rights Reserved Powered by XpertPhp.com