• Contact Us
Friday, December 23, 2022
-18 °c
Teman Ngoding
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English
No Result
View All Result
Teman Ngoding
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English
No Result
View All Result
Plugin Install : Cart Icon need WooCommerce plugin to be installed.
Teman Ngoding
No Result
View All Result
Home Tutorial Laravel

Implementasi Datatables di Laravel

admin by admin
September 13, 2022
in Laravel, Tutorial
0 0
0
implementation of Datatables in Laravel

implementation of Datatables in Laravel

0
SHARES
67
VIEWS
Share on FacebookShare on Twitter

This post is also available in: English

Hallo apa kabar teman semuanya, kali ini kita akan membahas laravel kembali. Untuk pemabahasannya, kamu dapat implementasi Datatables pada Laravel.

Package laravel yang akan kita gunakan yaitu Yjra Datatbles Server Side. Package ini sangat berguna ketika kamu mempunyai ribuan data dan kamu ingin sekali memmiliki tampilan yang lebih user friendly maka kita harus menggunakan package laravel. Kali ini kita akan menampilkan data dinamis dengan beberapa fitur seperti pagination dan search.

DataTables adalah plug-in yang didukung oleh jQuery yang sering dikenal sebagai perpustakaan Javascript. Ini adalah alat yang sangat fleksibel dan dinamis.

Kita langsung saja ke dalam pembahasannya:

  1. Install Laravel
  2. Buat Database & Setup .ENV
  3. Instal Laravel Datatables
  4. Set Up Model and Migrations
  5. Create DataTable Controller
  6. Tentukan Rute
  7. Display Data Dengan Yajra Datatables

Kamu dapat mempelajari tutorial lainnya di sini:

Integrasi Social Media Share di Laravel

Integrasi Paypal Payment Gateway Dengan Laravel

Error Handling di Laravel

Install Laravel

laravel new laravel-datatables

Langkah pertama yang kita lakukan adalah install projek laravel. Ataug gunakan printah di bawah ini untuk melakukan install.

composer create-project laravel/laravel laravel-datatables

Kita telah melakuakn install projek larave menggunakan composer. Selanjutkan kita akan lakuakn configurasi database.

Buat Database & Setup .ENV

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_datatables
DB_USERNAME=root
DB_PASSWORD=

Kali ini kamu harus buat terlebih dahulu databasenya dan atur konfigurasi database di .ENV.

Instal Laravel Datatables

Plugin ini menangani pekerjaan sisi server dari plugin DataTables jQuery melalui opsi AJAX dengan mempertimbangkan Eloquent ORM, Fluent Query Builder atau Collection.

Masukan perintah di bawah ini untuk melakukan install package datatables.

composer require yajra/laravel-datatables-oracle

atau

composer require yajra/laravel-datatables-oracle:"^10.0"

Setelah melakuakan instal package selesai, masukan service provider di bawah ini ke dalam config/app.php.

.....
.....
'providers' => [
	....
	....
	Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
	....
	....
	'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
.....
.....

Jalankan perintah di bawah ini:

php artisan vendor:publish --provider="Yajra\DataTables\DataTablesServiceProvider"

Set Up Model and Migrations

Buatlah sebuah database produk.

php artisan make:migrations create_products_table

Buka file database/migrations/timestamp_create_products_table.php. Dan sesuaikan kodenya seperti di bawah ini:

public function up()
{
    Schema::create('students', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('product_code');
        $table->string('product_name');
        $table->timestamps();
    });
}

Langkah selanjutnya buatlah model product.

php artisan make:model Products -m

Dan sesuaikan kodenya seperti di bawah ini:

<?php

namespace App\Models;

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

class Product extends Model
{
    use HasFactory;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'product_code','product_name'
    ];
}

Jalankan perintah migrasi, dengan perintah di bawah ini:

php artisan migrate

Setelah lakukan migrate dan telah terbuah tabel product di database, kamu harus lakukan input data atau buat sebuah data dummy sebanyak banyaknya. Karena kita akan lakukan uji coba pada aplikasi yang kita buat.

Create DataTable Controller

Langkah selanjutnya kita buat sebuah controller yang berfungsi untuk menampilkan data yang akan kira kirim datanya ke datatables. Buatlah sebiah controller seperti di bawah ini.

php artisan make:controller ProductController

Buka file controller di app/Http/Controllers/StudentController.php dan sesuai kodenya seperti di bawah ini.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Product;
use DataTables;
class StudentController extends Controller
{
    public function index()
    {
        return view('welcome');
    }

    public function index()
    {
        if(\request()->ajax()){
            $data = Product::latest()->get();
            return DataTables::of($data)
                ->addIndexColumn()
                ->addColumn('action', function($row){
                    $actionBtn = '<a href="javascript:void(0)" class="edit btn btn-success btn-sm">Edit</a> <a href="javascript:void(0)" class="delete btn btn-danger btn-sm">Delete</a>';
                    return $actionBtn;
                })
                ->rawColumns(['action'])
                ->make(true);
        }
        return view('products.index');
    }
}

Tentukan Rute

Setelah kita membuat contoller, maka kita buat route. Buka file routes/web.php dan sesuaikan kodenya.

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController;
/*
|--------------------------------------------------------------------------
| 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::resource('products', ProductController::class);

Display Data Dengan Yajra Datatables

Langkag terakhir kita buat sebuah blade untuk menampilkan database yang telah kita buat sebelumnya. Saya tambahkan beberapa plugin untuk mendukung tampilan yang menarik.

Buka file resources/views/welcome.blade.php. Masukan kode di bawah ini.

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Datatables Tutorial</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"/>
    <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
</head>
<body>
    
<div class="container mt-5">
    <h2 class="mb-4">Laravel Yajra Datatables Example</h2>
    <table id="myTable" class="table table-bordered">
        <thead>
            <tr>
                <th>No</th>
                <th>Kode Barang</th>
                <th>Nama Barang</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
   
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
    $(function () {
          var table = $('#myTable').DataTable({
              processing: true,
              serverSide: true,
              ajax: "{{ route('products.index') }}",
              columns: [
                  {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                  {data: 'kode_barang', name: 'kode_barang'},
                  {data: 'nama_barang', name: 'nama_barang'},
              ]
          });

        });
</script>
</html>

Selanjutnya kita jalankan perintah php artisan serve untuk melihat hasil dari progres yang kamu buat menggunakan browser.

php artisan serve

http://127.0.0.1:8000/products

Demikian tutorial kali ini yang dapat saya sampaikan, semoga bermanfaat. Jika ada yang ingin di tanyakan, silahkan komen di bawah.

Terimakasih.

Previous Post

JavaScript Dasar Part 5 : Operator JavaScript

Next Post

Membaca QR dan Barcode Menggunakan Webcam dengan html5-qrcode

Next Post
QR and Barcode Scanner Using Webcam with html5-qrcode

Membaca QR dan Barcode Menggunakan Webcam dengan html5-qrcode

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Trending
  • Comments
  • Latest
Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

June 2, 2022
Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

June 8, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

May 30, 2022
REST API Login dan Register Node.js dengan JWT

REST API Login dan Register Node.js dengan JWT

July 28, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

5
Rekomendasi tempat belajar pemrograman

Rekomendasi tempat belajar pemrograman

3
Menghilangkan Public dan Index.php dari URL Codeigniter 4

Menghilangkan Public dan Index.php dari URL Codeigniter 4

2
Membuat Sitemap Otomatis Codeigniter 4

Membuat Sitemap Otomatis Codeigniter 4

1
Access MongoDB With Node.JS

Akses MongoDB Dengan Node.JS

September 26, 2022
Teorema Structured Control

Basic Programming – Structured Control Theorem

September 23, 2022
WEB CRUD LocalStorage Menggunakan JavaScript

WEB CRUD LocalStorage Menggunakan JavaScript

September 22, 2022
DOM dan GOM Javascript

Perbedaan BOM Dan DOM Pada JavaScript

September 20, 2022
Teman Ngoding

Teman Ngoding tempat berbagi tutorial pemrograman
Read more

Categories

  • Berita
  • C++
  • Codeigniter
  • Events
  • Flutter
  • Golang
  • Java
  • Javascript
  • Laravel
  • MongoDB
  • News
  • Node JS
  • Pemrograman
  • PHP
  • Problem Solution
  • React JS
  • SQL
  • Tutorial
  • TypeScript
  • TypeScript
  • Video Codeigniter
  • Video Git
  • Video Laravel
  • Video Tutorial

Tags

ajax belajar golang belajar reactjs blog browser seluler Cara mendapatkan Uang dari Blog codeigniter codeigniter 3 codeigniter 4 codeigniter4 embed html Error Handling flutter flutter vs react native golang golang dasar html infinite scroll javascript javascript tutorial laravel laravel 8 laravel9 laravel 9 load more ajax Menggunakan Multiple select2 dan menyimpan dengan format json mongodb nodejs pdf pemrograman ajax pemrograman golang pemrograman php reactjs reactjs tutorial reactjs vs react native rest api rest api codeigniter 4 tutorial codeigniter 4 tutorial golang tutorial javascript tutorial laravel tutorial laravel 8 tutorial nodejs tutorial reactjs uang dari blog

Recent News

Access MongoDB With Node.JS

Akses MongoDB Dengan Node.JS

September 26, 2022
Teorema Structured Control

Basic Programming – Structured Control Theorem

September 23, 2022

© 2022 Teman Ngoding.

No Result
View All Result
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English

© 2022 Teman Ngoding.

Login to your account below

Forgotten Password?

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
  • English
  • Indonesia