Tutorial Laravel Datatables Yajra #3 : Installasi dan Konfigurasi Yajra/laravel-datatables-oracle


Syahrizal Ali Sadikin
Full-Stack Web Developer
Tutorial Laravel Datatables Yajra #3 : Installasi dan Konfigurasi Yajra/laravel-datatables-oracle

Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara menginstall package Laravel Yajra/laravel-datatables-oracle di project kita.

Pada tutorial kali ini kita semua akan belajar menginstall & konfigurasi tentang Laravel Yajra/laravel-datatables-oracle. Langsung saja kita mulai.

Langkah 1 - Install Laravel Yajra/laravel-datatables-oracle

Silahkan teman-teman install Laravel Yajra/laravel-datatables-oracle dengan perintah dibawah ini :

composer require yajra/laravel-datatables-oracle:"~9.0"

Silahkan teman-teman proses installasi Laravel Yajra/laravel-datatables-oracle sampai selesai, proses ini teman-teman harus terhubung ke internet.

Langkah 2 - Membuat Controller Home

Sekarang kita akan belajar membuat controller untuk menampilkan data di Yajra DataTables. Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya.

php artisan make:controller HomeController

jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 1 file baru dengan nama HomeController.php yang berada di dalam folder app/Http/Controllers.

Silahkan buka file tersebut dan ubah semua kode-nya menjadi seperti berikut ini.

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Yajra\DataTables\Facades\DataTables;

class HomeController extends Controller
{
    public function index()
    {
        if (request()->ajax()) {
            $users = User::query();
            return DataTables::of($users)

                ->make();
        }
        return view('home');
    }
}

Dari penambahan kode di atas, pertama-tama kita import Model User.

use App\Models\User;

Dari penambahan kode di atas, pertama kita import Facades DataTables. Karena kita akan menggunakan DataTables Yajra disini.

use Yajra\DataTables\Facades\DataTables;

Kemudian di dalam class HomeController kita menambahkan 1 method baru, yaitu :

  1. function index

Method ini akan kita gunakan untuk menampilkan list data users dari database. Disini kita menggunakan Yajra DataTables untuk mendapatkan data dari database melalui Model User

Di dalam function index pertama kita tambahkan sebuah kondisi, sama seperti kita menggunakan if statment.

Jadi di dalam if kita memeriksa apakah ada sebuah request dari ajax, jika ada maka kita akan melakukan ekseskusi kode di dalam closoure function, yang isinya adalah menampilkan data yang dikirmkan ajax.

if (request()->ajax()) {
    $users = User::all();
    return DataTables::of($users)->make();
    }

Kemudian kita urutkan data yang ditampilkan berdasarkan yang paling terbaru menggunakan method latest()

Dan kita akan return ke dalam view yang berada folder di dalam resources/views

Langkah 3 -Menambahkan Route Home

Setelah berhasil membuat controller Home, sekarang kita lanjutkan untuk membuat route-nya. Silahkan buka file routes/web.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.

<?php

use App\Http\Controllers\HomeController;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', [HomeController::class,'index'])->name('home');

Dari penambahan kode di atas, pertama kita import Controller Home . Karena kita akan menggunakan Controller Home disini

use App\Http\Controllers\HomeController;

Di atas, pertama kita set agar url "/" merupakan URL yang secara default di akses

kita mengubah kode

Route::get('/', function () {
    return view('welcome');
});

ubah menjadi seperti berikut ini :

Route::get('/', [HomeController::class,'index'])->name('home');

Langkah 4 -Menambahkan View Home

Sekarang silahkan buat folder baru dengan nama layouts di dalam folder resources/views dan di dalam folder layouts tersebut, silahkan buat file baru dengan nama apps.blade.php, kemudian masukkan kode berikut ini di dalamnya.

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <!-- Styles -->
    <link  href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav mr-auto">

                    </ul>

                    <!-- Right Side Of Navbar -->

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

        <main class="py-4">
            @yield('content')
        </main>
    </div>
    @stack('scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

Dari penambahan kode di atas, pertama kita import Jquery DataTables menggunakan cdn.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link  href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">

setelah itu kita buat file home.blade.php di dalam resources/view, kemudian masukkan kode berikut ini di dalamnya.

@extends('layouts.apps')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Daftar User</div>

                <div class="card-body">
                    <a href="#" class="btn btn-sm btn-success mb-2">Tambah Data</a>
                    <table id="tbl_list" class="table table-striped table-bordered" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Name</th>
                            <th>Email</th>

                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script type="text/javascript">
$(document).ready(function () {
   $('#tbl_list').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ url()->current() }}',
        columns: [
            { data: 'id', name: 'id' },
            { data: 'name', name: 'nama_lengkap' },
            { data: 'email', name: 'email' },

        ]
    });
 });
</script>
@endpush

Langkah 5 -Uji Coba Halaman Home

Sekarang silahkan reload halaman http://localhost:8000/ . Dan jika berhasil maka akan menampilkan hasil seperti berikut ini.

Di atas, data user masih kosong, temen-temen bisa menambahkan data dummy di tabel users untuk lihat hasil nya, terimakasih.


Syahrizal Ali Sadikin
Full-Stack Web Developer

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami