article

Thursday, April 7, 2022

Laravel Jquery Ajax List All Data | Laravel 9

Laravel Jquery Ajax List All Data | Laravel 9

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

Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js

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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//blog\app\Http\Controllers\MemberController.php
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Models\Member;
 
class MemberController extends Controller
{
    public function index(){
        return view('show');
    }
 
    public function getMembers(){
        $members = Member::all();
 
        return view('memberlist', compact('members'));
    }
 
}

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\2022_04_07_054037_create_members_table.php

edit code 
blog\database\migrations\2022_04_07_054037_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\2022_04_07_054037_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

Creating Routes

blog\routes\web.php
?
1
2
3
4
5
6
7
8
9
10
11
//blog\routes\web.php
<?php
use Illuminate\Support\Facades\Route;
 
//Route::get('/', function () {
//    return view('welcome');
//});
 
Route::get('/', 'MemberController@index');
  
Route::get('/show', 'MemberController@getMembers');
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">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel Jquery Ajax List All Data | Laravel 9</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
<div class="container">
    @yield('content')
</div>
  
@yield('script')
</body>
</html>
blog\resources\views\memberlist.blade.php
?
1
2
3
4
5
6
7
8
9
10
//blog\resources\views\memberlist.blade.php
@foreach($members as $member)
    <tr>
        <td>{{ $member->firstname }}</td>
        <td>{{ $member->lastname }}</td>
        <td><a href='' class='btn btn-success' data-id='{{ $member->id }}'> Edit</a>
            <a href='' class='btn btn-danger' data-id='{{ $member->id }}'> Delete</a>
        </td>
    </tr>
@endforeach
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
38
39
40
41
42
43
44
//blog\resources\views\show.blade.php
@extends('app')
  
@section('content')
<h1 class="page-header text-center">Laravel Jquery Ajax List All Data | Laravel 9</h1>
<div class="row">
    <div class="col-md-10 col-md-offset-1">
        <h2>Members Table
            <button type="button" id="add" class="btn btn-primary pull-right"><i class="fa fa-plus"></i> Member</button>
        </h2>
    </div>
</div>
<div class="row">
    <div class="col-md-10 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 id="memberBody">
            </tbody>
             
        </table>
    </div>
</div>
@endsection
  
@section('script')
    <script type="text/javascript">
        $(document).ready(function(){
 
            showMember();
  
        });
  
        function showMember(){
            $.get("{{ URL::to('show') }}", function(data){
                $('#memberBody').empty().html(data);
            })
        }
         
    </script>
@endsection


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:57 AM . Under .

Related Post