Scribd
Upload
7 views10 pages

Membuat Datatable Dengan AJAX Part 1

Uploaded by

A.C Studio
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views10 pages

Membuat Datatable Dengan AJAX Part 1

Uploaded by

A.C Studio
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Membuat Datatable Dengan AJAX (Asynchronous JavaScript and XML)

(Menu Sorting – Search – Pagination dan Halaman)


(PART 1)
Bisa Baca Referensi Langsung Ke WEB Laravael - https://laravel.com/docs/10.x/database

1. Buat Project Baru Dengan Nama Toko


2. Buat Database dengan nama db_toko dan konfigurasi file .env
3. Buat model, migrasi dan controller dengan penamaan jamak langsung
php artisan make:model Employees -mc

4. Edit file migrasi Employees (tambahkan tiga field)


public function up()
{
Schema::create('employees', function (Blueprint $table) {
$table->id();
$table->string('username');
$table->string('name');
$table->string('email');
$table->timestamps();
});
}

5. Lakukan Migrasi Database


php artisan migrate

6. Edit file model Employees.php


<?php

namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Employees extends Model


{
use HasFactory;

protected $fillable = [
'username','name','email'
];
}
7. Buat Rute Baru (Hapus semua rute bawaan) Rute index untuk menampilkan view
langsung di public dan Rute getEmployees untuk Method Ajax untu Datatable
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\EmployeesController;

Route::get('/', [EmployeesController::class, 'index']);


Route::get('/getEmployees', [EmployeesController::class, 'getEmployees'])->name('getEmployees');

8. Edit file controller Employees


<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Employees;

class EmployeesController extends Controller


{
public function index(){

// Load index view


return view('index');
}

// Fetch records
public function getEmployees(Request $request){

## Read value
$draw = $request->get('draw');
$start = $request->get("start");
$rowperpage = $request->get("length"); // Rows display per page

$columnIndex_arr = $request->get('order');
$columnName_arr = $request->get('columns');
$order_arr = $request->get('order');
$search_arr = $request->get('search');

$columnIndex = $columnIndex_arr[0]['column']; // Column index


$columnName = $columnName_arr[$columnIndex]['data']; // Column name
$columnSortOrder = $order_arr[0]['dir']; // asc or desc
$searchValue = $search_arr['value']; // Search value

// Total records
$totalRecords = Employees::select('count(*) as allcount')->count();
$totalRecordswithFilter = Employees::select('count(*) as allcount')-
>where('name', 'like', '%' .$searchValue . '%')->count();

// Fetch records
$records = Employees::orderBy($columnName,$columnSortOrder)
->where('employees.name', 'like', '%' .$searchValue . '%')
->select('employees.*')
->skip($start)
->take($rowperpage)
->get();

$data_arr = array();

foreach($records as $record){
$id = $record->id;
$username = $record->username;
$name = $record->name;
$email = $record->email;

$data_arr[] = array(
"id" => $id,
"username" => $username,
"name" => $name,
"email" => $email
);
}

$response = array(
"draw" => intval($draw),
"iTotalRecords" => $totalRecords,
"iTotalDisplayRecords" => $totalRecordswithFilter,
"aaData" => $data_arr
);

return response()->json($response);
}
}
9. Buat View Dengan nama index.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Datatables AJAX pagination with Search and Sort in Laravel
10</title>

<!-- Meta -->


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">

<!-- Datatable CSS (CSS Ini Online Dari CDN) -->


<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css"/>

<!-- jQuery Library (Konfigurasi AJAX Online Dari CDN) -->


<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></
script>

<!-- Datatable JS -->


<script
src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>

</head>
<body>

<table id='empTable' width='100%' border="1" style='border-collapse:


collapse;'>
<thead>
<tr>
<td>S.no</td>
<td>Username</td>
<td>Name</td>
<td>Email</td>
</tr>
</thead>
</table>

<!-- Script -->


<script type="text/javascript">
$(document).ready(function(){

// DataTable
$('#empTable').DataTable({
processing: true,
serverSide: true,
ajax: "{{route('getEmployees')}}",
columns: [
{ data: 'id' },
{ data: 'username' },
{ data: 'name' },
{ data: 'email' },
]
});
});
</script>
</body>
</html>

10. Buka localhost – toko –public (Pastikan Internetnya aktif ya, karena kita
menggunakan CSS, AJAX dan JS Datatabel online dari CDN)

Kolom pencarian

Silahkan di klik pada No, Username, Name atau Email untuk Sorting a – z atau z-a

Untuk Next no nomor halaman selanjutnya

11. Wah ternyata datanya kosong ya… yuk kita bikin data fakenya.
php artisan make:seeder EmployeesSeeder

12. Edit file EmployeesSeeder tersebut


<?php

namespace Database\Seeders;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use Illuminate\Support\Str;
use Illuminate\Support\Arr;
use App\Models\Employees;
use Faker\Factory as Faker;

class EmployeesSeeder extends Seeder


{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
// Insert predefined data
Employees::create([
'username' => 'Zulfikarch',
'name' => 'Zulfikar Chaniago',
'email' => '[email protected]',

]);

// Memasukkan data fake

$faker = Faker::create('id_ID');

for ($i=1; $i <= 100; $i++) {

Employees::create([
'username' => $faker->username,
'name' => $faker->name,
'email' => $faker->name,

]);
}

}
}

13. Eksekusi File Seeder tersebut


php artisan db:seed --class=EmployeesSeeder

14. Gimana…. Cek lagi halaman localhost – toko –public udah ada isi belum… kalau
belum…. Anda belum beruntung….. Coba Lagi ya….

15. Tambahan..

Silahkan buat CRUD untuk melengkapinya. Namun bauatkan rute baru, controller baru dan
View Baru untuk CRUD tersebut.
Lanjutan CRUD.

16. Buat Kelas Baru Dengan Nama Karyawan


php artisan make:controller KaryawanController

17. Buat Rute Baru Dengan Nama Karyawan


<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\EmployeesController;

Route::get('/', [EmployeesController::class, 'index']);


Route::get('/getEmployees', [EmployeesController::class, 'getEmployees'])-
>name('getEmployees');

Route::resource('/karyawan', \App\Http\Controllers\
KaryawanController::class);

18. Edit File Controller Untuk Menampilakan Data


<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class KaryawanController extends Controller


{
public function index(){

// Load index view


return view('index');
}

// Fetch records
public function getEmployees(Request $request){

## Read value
$draw = $request->get('draw');
$start = $request->get("start");
$rowperpage = $request->get("length"); // Rows display per page

$columnIndex_arr = $request->get('order');
$columnName_arr = $request->get('columns');
$order_arr = $request->get('order');
$search_arr = $request->get('search');

$columnIndex = $columnIndex_arr[0]['column']; // Column index


$columnName = $columnName_arr[$columnIndex]['data']; // Column
name
$columnSortOrder = $order_arr[0]['dir']; // asc or desc
$searchValue = $search_arr['value']; // Search value

// Total records
$totalRecords = Employees::select('count(*) as allcount')->count();
$totalRecordswithFilter = Employees::select('count(*) as allcount')-
>where('name', 'like', '%' .$searchValue . '%')->count();

// Fetch records
$records = Employees::orderBy($columnName,$columnSortOrder)
->where('employees.name', 'like', '%' .$searchValue . '%')
->select('employees.*')
->skip($start)
->take($rowperpage)
->get();

$data_arr = array();

foreach($records as $record){
$id = $record->id;
$username = $record->username;
$name = $record->name;
$email = $record->email;

$data_arr[] = array(
"id" => $id,
"username" => $username,
"name" => $name,
"email" => $email
);
}

$response = array(
"draw" => intval($draw),
"iTotalRecords" => $totalRecords,
"iTotalDisplayRecords" => $totalRecordswithFilter,
"aaData" => $data_arr
);
return response()->json($response);
}
}
19. Buat folder karyawan di dalam folder resources dan View. Kemudian buat file
dengan nama index.blade.php dan isikan koding berikut.
<!DOCTYPE html>
<html>
<head>
<title>CRUD + SEED + FAKE </title>
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.mi
n.css">
</head>
<body>

<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="text-center my-4">Menampilkan Data</h3>
<h5 class="text-center"><a
href="https://umri.ac.id">www.umri.ac.id</a></h5>

<div class="card border-0 shadow-sm rounded">


<div class="card-body">
<a href="" class="btn btn-md btn-success mb-3">TAMBAH
POST</a>

<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Nama</th>
<th>NISN</th>
<th>No HP</th>
<th>Email</th>
<th>Alamat</th>
<th>Created At</th>
<th>Updated At</th>
</tr>
</thead>
<tbody>
@foreach($siswas as $siswa)
<tr>
<td>{{$siswa->nama}}</td>
<td>{{$siswa->nisn}}</td>
<td>{{$siswa->no_hp}}</td>
<td>{{$siswa->email}}</td>
<td>{{$siswa->alamat}}</td>
<td>{{$siswa->created_at}}</td>
<td>{{$siswa->updated_at}}</td>
</tr>
@endforeach
</tbody>
</table>
</div>

</div>
</div>
</div>

<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.j
s"></script>
</body>
</html>

20. Buat Model dengan nama Karyawan


php artisan make:model Karyawan

21. Edit File Model Karyawan.php


<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Karyawan extends Model


{
use HasFactory;
protected $fillable = [
'username','name','email'
];
}

22.

You might also like