article

Thursday, April 14, 2022

Laravel 9 CRUD (Create, Read, Update and Delete) - Bootstrap 5 Modal Add Edit and Delete

Laravel 9 CRUD (Create, Read, Update and Delete) - Bootstrap 5 Modal Add Edit and Delete

Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

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=laravel9
DB_USERNAME=root
DB_PASSWORD=

Creating Controller

php artisan make:controller MemberController 
C:\xampp\htdocs\laravel9\blog>php artisan make:controller MemberController

controller created file located at :  youproject/app/Http/Controller
blog\app\Http\Controllers\MemberController.php

change it with the following codes:

blog\app\Http\Controllers\MemberController.php
blog\app\Http\Controllers\MemberController.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
//blog\app\Http\Controllers\MemberController.php
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Models\Member; //add Member Models
 
class MemberController extends Controller
{
    public function index(){
        return view('show');
    }
 
    public function getMembers(){
        $members = Member::all();
 
        return view('show')->with('members', $members);
    }
 
    public function save(Request $request){
        $member = new Member;
        $member->firstname = $request->input('firstname');
        $member->lastname = $request->input('lastname');
        $member->save();
 
        return redirect('/');
    }
 
    public function update(Request $request, $id){
        $member = Member::find($id);
        $input = $request->all();
        $member->fill($input)->save();
 
        return redirect('/');
    }
 
    public function delete($id)
    {
        $members = Member::find($id);
        $members->delete();
  
        return redirect('/');
    }
}
Create Model

php artisan make:model Member -m
C:\xampp\htdocs\laravel9\blog>php artisan make:model Member -m

This will create our model in the form of Member.php file located : blog\app\Models\Member.php

we put -m when we create our model.
this will automatically make the migration for our model and you will see that in yourproject/database/migrations
blog\database\migrations\create_members_table.php
edit code blog\database\migrations\create_members_table.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
//blog\database\migrations\create_members_table.php
<!--php
   
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
    
class CreateMembersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('members', function (Blueprint $table) {
            $table--->increments('id');
            $table->string('firstname');
            $table->string('lastname');
            $table->timestamps();
        });
    }
    
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('members');
    }
}
Database Migration

php artisan migrate

C:\xampp\htdocs\laravel9\blog>php artisan migrate
Migration table created successfully.
check database table created table created member
blog\app\Models\Member.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
//blog\app\Models\Member.php
<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Member extends Model
{
    use HasFactory;
    protected $fillable  = ['firstname', 'lastname'];
}
Creating Routes
blog\routes\web.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
////blog\routes\web.php
<?php
 
use Illuminate\Support\Facades\Route;
 
//Route::get('/', function () {
//    return view('welcome');
//});
  
Route::get('/', 'MemberController@index');
 
Route::get('/', 'MemberController@getMembers');
 
Route::post('/save', 'MemberController@save');
 
Route::patch('/update/{id}', ['as' => 'member.update', 'uses' => 'MemberController@update']);
 
Route::delete('/delete/{id}', ['as' => 'member.delete', 'uses' => 'MemberController@delete']);
Creating Views
blog\resources\views\app.blade.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//blog\resources\views\app.blade.php
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Laravel 9 Crud - Bootstrap 5 Modal Add Edit and Delete</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
    @yield('content')
</div>
@include('modal')
 
</body>
</html>
blog\resources\views\show.blade.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
//blog\resources\views\show.blade.php
@extends('app')
 
@section('content')
<h1 class="page-header text-center">Laravel 9 CRUD (Create, Read, Update and Delete) - Bootstrap 5 Modal Add Edit and Delete</h1>
<div class="row">
    <div class="col-md-12 col-md-offset-1">
        <h2>Members Table
            <button type="button" data-bs-toggle="modal" data-bs-target="#addnew" class="btn btn-primary pull-right"><i class="fa fa-plus"></i> Member</button>
        </h2>
    </div>
</div>
<div class="row">
    <div class="col-md-12 col-md-offset-1">
        <table class="table table-bordered table-responsive table-striped">
            <thead>
                <th>Fisrtname</th>
                <th>Lastname</th>
                <th>Action</th>
            </thead>
            <tbody>
                @foreach($members as $member)
                    <tr>
                        <td>{{$member->firstname}}</td>
                        <td>{{$member->lastname}}</td>
                        <td>
                            <a href="#edit{{$member->id}}" data-bs-toggle="modal" class="btn btn-success"><i class='fa fa-edit'></i> Edit</a>
                            <a href="#delete{{$member->id}}" data-bs-toggle="modal" class="btn btn-danger"><i class='fa fa-trash'></i> Delete</a>
                            @include('action')
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection
blog\resources\views\modal.blade.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
//blog\resources\views\modal.blade.php
<!-- Add Modal -->
<div class="modal fade" id="addnew" tabindex="-1" aria-labelledby="addnewModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="addnewModalLabel">Add New Member</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
                {!! Form::open(['url' => 'save']) !!}
                    <div class="mb-3">
                        {!! Form::label('firstname', 'Firstname') !!}
                        {!! Form::text('firstname', '', ['class' => 'form-control', 'placeholder' => 'Input Firstname', 'required']) !!}
                    </div>
                    <div class="mb-3">
                        {!! Form::label('lastname', 'Lastname') !!}
                        {!! Form::text('lastname', '', ['class' => 'form-control', 'placeholder' => 'Input Lastname', 'required']) !!}
                    </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="fa fa-times"></i> Cancel</button>
            <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Save</button>
            {!! Form::close() !!}
        </div>
    </div>
  </div>
</div>
Class "Collective\Html\HtmlServiceProvider" not found

composer require laravelcollective/html --prefer-source
C:\xampp\htdocs\laravel9\blog>composer require laravelcollective/html --prefer-source
blog\resources\views\action.blade.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
//blog\resources\views\action.blade.php
<!-- Edit Modal -->
<div class="modal fade" id="edit{{$member->id}}" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="myModalLabel">Edit Member</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
                {!! Form::model($members, [ 'method' => 'patch','route' => ['member.update', $member->id] ]) !!}
                    <div class="mb-3">
                        {!! Form::label('firstname', 'Firstname') !!}
                        {!! Form::text('firstname', $member->firstname, ['class' => 'form-control']) !!}
                    </div>
                    <div class="mb-3">
                        {!! Form::label('lastname', 'Lastname') !!}
                        {!! Form::text('lastname', $member->lastname, ['class' => 'form-control']) !!}
                    </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="fa fa-times"></i> Cancel</button>
            {{Form::button('<i class="fa fa-check-square-o"></i> Update', ['class' => 'btn btn-success', 'type' => 'submit'])}}
            {!! Form::close() !!}
        </div>
    </div>
  </div>
</div>
 
<!-- Delete Modal -->
<div class="modal fade" id="delete{{$member->id}}" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="myModalLabel">Delete Member</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            {!! Form::model($members, [ 'method' => 'delete','route' => ['member.delete', $member->id] ]) !!}
                <h4 class="text-center">Are you sure you want to delete Member?</h4>
                <h5 class="text-center">Name: {{$member->firstname}} {{$member->lastname}}</h5>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="fa fa-times"></i> Cancel</button>
            {{Form::button('<i class="fa fa-trash"></i> Delete', ['class' => 'btn btn-danger', 'type' => 'submit'])}}
            {!! Form::close() !!}
        </div>
    </div>
  </div>
</div>
Edit RouteServiceProvider.php
blog\app\Providers\RouteServiceProvider.php
uncomment protected $namespace = 'App\\Http\\Controllers';

Run C:\xampp\htdocs\laravel9\blog>php artisan serve
Starting Laravel development server: http://127.0.0.1:8000

Posted by ednalan at 12:00 AM . Under .

Related Post