Pada turorial ini akan membahas Cara Menampilkan Data dengan Datatables di Laravel 8, untuk dapat menampilkan data dengan datatables kita memerlukan bantuan sebuah library jquery table yang bernama datatables. Kita akan menampilkan sebuah data yang telah ada di database ditampilkan di views.
Tutorial sebelumnya yaitu :
- Install Laravel versi 8 di Windows 10
- Cara Membuat Database di Laravel 8
- Generate Key Aplikasi di Laravel 8
- Cara Mengatur Zona Waktu Indonesia di Laravel 8
- Cara Mengatur Validasi ke bahasa Indonesia di Laravel 8
- Blade Templating di laravel 8
- Cara membuat fitur Login Logout di Laravel 8
- Cara Mengatur Hak Akses di Laravel 8
- Cara Membuat Helper di Laravel 8
Berikut adalah Cara Menampilkan Data dengan Datatables di Laravel 8 :
Tahap 1 – Load terlebih dahulu jquery datatables yang diperlukan di template blade yang telah kita buat sebelumnya, buka file resources/views/template/layout.blade.php dan isikan seperti script di bawah ini :
<!DOCTYPE html>
<!-- language -->
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- csrf -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- title -->
<title>@yield('title','Index')</title>
<!-- favicon -->
<link rel="shortcut icon" href="{{ asset('') }}dist/assets/compiled/svg/favicon.svg" type="image/x-icon"/>
<link rel="stylesheet" href="{{ asset('') }}dist/assets/compiled/css/app.css" />
<link rel="stylesheet" href="{{ asset('') }}dist/assets/compiled/css/app-dark.css" />
<link rel="stylesheet" href="{{ asset('') }}dist/assets/compiled/css/iconly.css" />
<!-- untuk tempat sisipkan script css -->
@stack('costum-css')
</head>
<body>
<script src="{{ asset('') }}dist/assets/static/js/initTheme.js"></script>
<!-- panggil library jquery datatable -->
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/2.0.3/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/2.0.3/js/dataTables.bootstrap5.js"></script>
<div id="app">
<!-- panggil file sidebar.blade.php di folder template -->
@include('template.sidebar')
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<!-- untuk tempat sisipkan isi konten bersifat dinamis -->
@yield('content')
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2023 © Mazer</p>
</div>
<div class="float-end">
<p>
Crafted with
<span class="text-danger"
><i class="bi bi-heart-fill icon-mid"></i
></span>
by <a href="https://saugi.me">Saugi</a>
</p>
</div>
</div>
</footer>
</div>
</div>
<script src="{{ asset('') }}dist/assets/static/js/components/dark.js"></script>
<script src="{{ asset('') }}dist/assets/extensions/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="{{ asset('') }}dist/assets/compiled/js/app.js"></script>
<!-- Need: Apexcharts -->
<script src="{{ asset('') }}dist/assets/extensions/apexcharts/apexcharts.min.js"></script>
<script src="{{ asset('') }}dist/assets/static/js/pages/dashboard.js"></script>
<!-- untuk tempat sisipkan script javascript -->
@stack('costum-script')
</body>
</html>
libary jquery yang kita panggil berupa CDN jadi dipastikan koneksi internet harus ada untuk menjalankan library datatables ini.
berikut adalah jquery yang kita harus load :
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/2.0.3/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/2.0.3/js/dataTables.bootstrap5.js"></script>Tahap 2 – Panggil data dari model yang telah di buat sebelumnya di file controller dan lakukan parasing data ke view, buka app/Http/Controllers/PostController.php dan buat script seperti ini :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
//MODEL
use App\Models\Post;
class PostController extends Controller
{
public function index()
{
//get data post dari model
$data=Post::all();
//Tampilan index di dalam folder data_post, dan parsing variabel data ke view data_post
return view('data_post.index',compact('data'));
}
}
berikut adalah model yang telah dibuat sebelumnya yaitu app/Models/Post.php seperti ini:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
protected $table = 'post';
protected $guarded = ['id'];
}Tahap 3 – buat file view resources/data_post/index.blade.php seperti ini :
@extends('template.layout') <!-- panggil file layout.blade.php di folder template -->
@section('title', 'Data Post') <!-- replace nama title jika halaman ini dipanggil -->
@section('content') <!-- replace isi konten jika halaman ini dipanggil -->
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Data Post</h3>
<p class="text-subtitle text-muted">kelola data post.</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{route('dashboard')}}">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Data Post</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="card">
<div class="card-header d-flex justify-content-between">
<h4 class="card-title">Data Post</h4>
<div>
<a href="" class="btn btn-light-primary">Tambah Data</a>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="table" class="table table-striped table-bordered table-hover">
<thead>
<th class="text-center">No</th>
<th class="text-center">Judul</th>
<th class="text-center">Deskripsi</th>
<th class="text-center">Waktu Post</th>
<th class="text-center">Action</th>
</thead>
<tbody>
<!-- looping data -->
@php $no=1; @endphp
@foreach($data as $dt)
<tr>
<td>{{$no++}}</td>
<td>{{$dt->title}}</td>
<td>{{$dt->desc}}</td>
<td>{{$dt->updated_at}}</td>
<td>
<a href="" class="btn btn-info" title="Edit">Edit</a>
<a href="" class="btn btn-danger" title="Hapus">Hapus</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</section>
</div>
<!-- jalankan datatable di id dengan nama table -->
<script>
$('#table').DataTable();
</script>
@endsection <!-- penutup isi konten -->kurang lebih hasil akhirnya seperti ini :
selesai selamat mencoba.
Artikel selanjutnya akan membahas Cara Tambah data dengan Validasi di Laravel 8
