How to install laravel 9
https://tutorial101.blogspot.com/2022/02/how-to-install-laravel-9.html
Connecting our Database
open .env file root directory.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraveldb
DB_USERNAME=root
DB_PASSWORD=
Livewire https://laravel-livewire.com/ is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.
Livewire completely sends Ajax requests to do all its server-side communication without writing any line of Ajax script.
Install Livewire Package:
C:\xampp\htdocs\laravel\laravelproject>composer require livewire/livewire
Create Model and Migration:
C:\xampp\htdocs\laravel\laravelproject>php artisan make:model Student
app/Models/Stuent.php
//app/Models/Stuent.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Student extends Model
{
use HasFactory;
protected $table = 'students';
protected $fillable = [
'name',
'email',
'course',
];
}
Creating Migration C:\xampp\htdocs\laravel\laravelproject>php artisan make:migration create_students_table
laravelproject\database\migrations\create_students_table.php
//laravelproject\database\migrations\create_students_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up()
{
Schema::create('students', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email');
$table->string('course');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('students');
}
};
Database Migration php artisan migrate
C:\xampp\htdocs\laravel\laravelproject>php artisan migrate
Migration table created successfully.
check database table
Creating Controller
C:\xampp\htdocs\laravel\laravelproject>php artisan make:controller StudentController
//app/Http/Controllers/StudentController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class StudentController extends Controller
{
public function index()
{
return view('student.index');
}
}
Install Livewire in Laravel with the following command: C:\xampp\htdocs\laravel\laravelproject>composer require livewire/livewire
Install Auth Scaffolding with the following command:
C:\xampp\htdocs\laravel\laravelproject>composer require laravel/ui
C:\xampp\htdocs\laravel\laravelproject>php artisan ui:auth
Open resources/views/layouts/app.blade.php and include livewire bootstrap cdn link
https://getbootstrap.com/docs/5.1/components/modal/
https://getbootstrap.com/docs/5.1/getting-started/introduction/
//resources/views/layouts/app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
@livewireStyles
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<main class="py-4">
@yield('content')
</main>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
@livewireScripts
</body>
</html>
create Student Livewire component C:\xampp\htdocs\laravel\laravelproject>php artisan make:livewire StudentShow
Created Livewire component
app/Http/Livewire/StudentShow.php
resources/views/livewire/student-show.blade.php
Open app/http/livewire/StudentShow.php add code
//app/http/livewire/StudentShow.php
<?php
namespace App\Http\Livewire;
use Livewire\WithPagination;
use App\Models\Student;
use Livewire\Component;
class StudentShow extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
public $name, $email, $course, $student_id;
public $search = '';
protected function rules()
{
return [
'name' => 'required|string|min:6',
'email' => ['required','email'],
'course' => 'required|string',
];
}
public function updated($fields)
{
$this->validateOnly($fields);
}
public function saveStudent()
{
$validatedData = $this->validate();
Student::create($validatedData);
session()->flash('message','Student Added Successfully');
$this->resetInput();
$this->dispatchBrowserEvent('close-modal');
}
public function editStudent(int $student_id)
{
$student = Student::find($student_id);
if($student){
$this->student_id = $student->id;
$this->name = $student->name;
$this->email = $student->email;
$this->course = $student->course;
}else{
return redirect()->to('/students');
}
}
public function updateStudent()
{
$validatedData = $this->validate();
Student::where('id',$this->student_id)->update([
'name' => $validatedData['name'],
'email' => $validatedData['email'],
'course' => $validatedData['course']
]);
session()->flash('message','Student Updated Successfully');
$this->resetInput();
$this->dispatchBrowserEvent('close-modal');
}
public function deleteStudent(int $student_id)
{
$this->student_id = $student_id;
}
public function destroyStudent()
{
Student::find($this->student_id)->delete();
session()->flash('message','Student Deleted Successfully');
$this->dispatchBrowserEvent('close-modal');
}
public function closeModal()
{
$this->resetInput();
}
public function resetInput()
{
$this->name = '';
$this->email = '';
$this->course = '';
}
public function render()
{
$students = Student::where('name', 'like', '%'.$this->search.'%')->orderBy('id','DESC')->paginate(3);
//$students = Student::select('id','name','email','course')->get();
return view('livewire.student-show', ['students' => $students]);
}
}
open resources/views/livewire/student-show.blade.php add code
//resources/views/livewire/student-show.blade.php
<div>
@include('livewire.studentmodal')
<div class="container">
<div class="row">
<div class="col-md-12">
@if (session()->has('message'))
<h5 class="alert alert-success">{{ session('message') }}</h5>
@endif
<div class="card">
<div class="card-header">
<h4>Student CRUD with Bootstrap Modal
<input type="search" wire:model="search" class="form-control float-end mx-2" placeholder="Search..." style="width: 230px" />
<button type="button" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#studentModal">
Add New Student
</button>
</h4>
</div>
<div class="card-body">
<table class="table table-borderd table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Course</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@forelse ($students as $student)
<tr>
<td>{{ $student->id }}</td>
<td>{{ $student->name }}</td>
<td>{{ $student->email }}</td>
<td>{{ $student->course }}</td>
<td>
<button type="button" data-bs-toggle="modal" data-bs-target="#updateStudentModal" wire:click="editStudent({{$student->id}})" class="btn btn-primary">
Edit
</button>
<button type="button" data-bs-toggle="modal" data-bs-target="#deleteStudentModal" wire:click="deleteStudent({{$student->id}})" class="btn btn-danger">Delete</button>
</td>
</tr>
@empty
<tr>
<td colspan="5">No Record Found</td>
</tr>
@endforelse
</tbody>
</table>
<div>
{{ $students->links() }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Create Bootstrap Modal File resources/views/livewire/studentmodal.blade.php
//resources/views/livewire/studentmodal.blade.php
<!-- Insert Modal -->
<div wire:ignore.self class="modal fade" id="studentModal" tabindex="-1" aria-labelledby="studentModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="studentModalLabel">Create Student</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
wire:click="closeModal"></button>
</div>
<form wire:submit.prevent="saveStudent">
<div class="modal-body">
<div class="mb-3">
<label>Student Name</label>
<input type="text" wire:model="name" class="form-control">
@error('name') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<div class="mb-3">
<label>Student Email</label>
<input type="text" wire:model="email" class="form-control">
@error('email') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<div class="mb-3">
<label>Student Course</label>
<input type="text" wire:model="course" class="form-control">
@error('course') <span class="text-danger">{{ $message }}</span> @enderror
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" wire:click="closeModal"
data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
<!-- Update Student Modal -->
<div wire:ignore.self class="modal fade" id="updateStudentModal" tabindex="-1" aria-labelledby="updateStudentModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updateStudentModalLabel">Edit Student</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" wire:click="closeModal"
aria-label="Close"></button>
</div>
<form wire:submit.prevent="updateStudent">
<div class="modal-body">
<div class="mb-3">
<label>Student Name</label>
<input type="text" wire:model="name" class="form-control">
@error('name') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<div class="mb-3">
<label>Student Email</label>
<input type="text" wire:model="email" class="form-control">
@error('email') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<div class="mb-3">
<label>Student Course</label>
<input type="text" wire:model="course" class="form-control">
@error('course') <span class="text-danger">{{ $message }}</span> @enderror
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" wire:click="closeModal"
data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Update</button>
</div>
</form>
</div>
</div>
</div>
<!-- Delete Student Modal -->
<div wire:ignore.self class="modal fade" id="deleteStudentModal" tabindex="-1" aria-labelledby="deleteStudentModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteStudentModalLabel">Delete Student</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" wire:click="closeModal"
aria-label="Close"></button>
</div>
<form wire:submit.prevent="destroyStudent">
<div class="modal-body">
<h4>Are you sure you want to delete this data ?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" wire:click="closeModal"
data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Yes! Delete</button>
</div>
</form>
</div>
</div>
</div>
include the livewire component data in blade file laravelproject\resources\views\index.blade.php from your StudentController
//laravelproject\resources\views\index.blade.php
@extends('layouts.app')
@section('content')
<div>
<livewire:student-show>
</div>
@endsection
@section('script')
<script>
window.addEventListener('close-modal', event => {
$('#studentModal').modal('hide');
$('#updateStudentModal').modal('hide');
$('#deleteStudentModal').modal('hide');
})
</script>
@endsection
Route laravelproject\routes\web.php
//laravelproject\routes\web.php
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
});
Auth::routes();
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
Route::get('/student', [App\Http\Controllers\StudentController::class, 'index'])->name('student');
Run C:\xampp\htdocs\laravel\laravelproject>php artisan serve Starting Laravel development server: http://127.0.0.1:8000
