Introduction

Panduan ini untuk Siapa?

• Panduan ini ditujukan untuk orang yang sudah bisa menggunakan framework Laravel;
• Panduan ini bukan untuk orang yang ingin belajar Laravel;
• Jika ingin belajar menguasai Laravel, silahkan gunakan https://bit.ly/buku-laravel-vue .

Mohon dipahami untuk siapa ebook ini dibuat sebelum membeli.

Tujuan Panduan

Panduan ini TIDAK bertujuan untuk:

• Mengajari membuat aplikasi Laravel dari 0;

Harapan setelah membaca panduan ini, pembaca bisa:

• Mengintegrasikan DataTables pada projek Laravel dengan pemrosesan di server;
• Paham bagaimana mengkonfigurasi Datatables untuk berbagai macam use case sampai advanced use case;
• Memahami konfigurasi yang tersedia untuk DataTable ;
• Memahami konfigurasi yang tersedia pada plugin-plugin bawaan DataTable seperti plugin HTML builder dan Buttons;
• Memahami alur dan perubahan yang diperlukan untuk melakukan kustomisasi menyeluruh terhadap elemen DataTable;
• Lebih lengkap bisa dilihat di daftar isi.

Persyaratan Sistem

Dalam menuliskan panduan ini, saya menggunakan framework Laravel dan beberapa tool maupun package yang diperlukan.
Untuk kelancaran dalam mengikuti panduan ini, pastikan kamu menggunakan versi yang sama atau lebih baru:

• Composer versi 2.0.7
• Laravel Installer versi 4.1.1
• Laravel Framework versi 8.12
• NodeJS versi minimal 12.14
• Yajira Laravel/Datatables versi 1.5

Sebelum memulai mempraktikkan apa yang ada di panduan ini, kamu harus sudah memasang composer dan/atau laravel installer serta NodeJS.

NodeJS diperlukan untuk melakukan build terhadap asset javascript yang digunakan oleh DataTable.

Sementara untuk framework Laravel dan package yajra/laravel-datatables akan kita pasang setelah ini, kamu tinggal ikuti saja secara langkah demi langkah.

Persiapan

Berikut persiapan yang harus kamu ikuti dan praktikan di komputermu.

• Clone project dari https://github.com/Literasikode/laravel-datatables-starter
• Buat database baru misalnya latihan-datatable untuk project latihan di panduan ini menggunakan phpmyadmin atau tool lain sesuai favoritmu
• Sesuaikan konfigurasi database pada file .env

  DB_CONNECTION=mysql
  DB_HOST=127.0.0.1
  DB_PORT=3306
  DB_DATABASE=latihan-datatable
  DB_USERNAME=root
  DB_PASSWORD=password
  

  DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=latihan-datatable DB_USERNAME=root DB_PASSWORD=password
• Jalankan perintah php artisan migrate
• Jalankan perintah php artisan db:seed
• Jalankan server dengan php artisan serve --port xxxx (ganti xxxx dengan angka port yang kamu inginkan)
• Buka localhost:xxxx (ganti xxxx dengan PORT pilihanmu pada langkah sebelumnya)

Instalasi yajra/laravel-datatables

DataTable sebetulnya merupakan sebuah pustaka untuk jQuery yang bisa digunakan untuk membuat table interaktif dengan mudah, alamat websitenya adalah https://datatables.net.

Jika ingin menggunakan datatable di Laravel secara langsung akan cukup merepotkan, oleh karena itu kita akan menggunakan package yajra/laravel-datatables yang akan membuat integrasi DataTable ke Laravel menjadi lebih nyaman dan terasa seperti di rumah, karena kita akan menggunakan sintaks dan kemudahan fitur di Laravel.

Selain itu, package yajra/laravel-datatables ini sudah secara bawaan mendukung pemrosesan DataTable melalui server, bukan client side only, dengan jauh lebih mudah dan sederhana (dengan cara Laravel).

Sebelum menggunakannya, kita harus menginstall terlebih dahulu dan melakukan konfigurasi awal terhadap package ini. Mari kita mulai.

Install yajra/laravel-datatables

Buka terminal / cmd lalu pindah ke direktori projek yang sudah kamu clone sebelumnya.

Jalankan perintah berikut di terminal:

composer require yajra/laravel-datatables

Jika berhasil, maka package laravel-datatables akan terpasang di project kita.

Publish vendor assets

Setelah itu kita perlu melakukan publish assets datatables yang akan kita gunakan dengan perintah berikut:

php artisan vendor:publish --tag=datatables

Jika sudah maka kita akan dapati pesan kurang lebih seperti berikut:

Copied File [/vendor/yajra/laravel-datatables-oracle/src/config/datatables.php] To [/config/datatables.php]
Publishing complete.

Itu artinya publish telah berhasil dan sekarang kita memiliki file konfigurasi DataTable pada config/datatables.php.

Lalu kita juga perlu mempublish asset untuk plugin DataTable yaitu Buttons dengan perintah ini:

php artisan vendor:publish --tag=datatables-buttons

Jika sudah kamu akan mendapati pesan log di terminal kurang lebih seperti ini:

Copied File [/vendor/yajra/laravel-datatables-buttons/src/config/config.php] To [/config/datatables-buttons.php]
Copied File [/vendor/yajra/laravel-datatables-buttons/src/resources/assets/buttons.server-side.js] To [/public/vendor/datatables/buttons.server-side.js]
Copied Directory [/vendor/yajra/laravel-datatables-buttons/src/resources/views] To [/resources/views/vendor/datatables]

Itu menandakan assets yang diperlukan sekarang sudah dipublish, yaitu file:

• /config/datatables-button.php
• /public/vendor/datatables/buttons.server-side.js dan
• /resources/views/vendor/datatables

Aset di atas akan kita pakai setelah ini.

Konfigurasi laravel/ui

Berikutnya kita juga memasang package laravel/ui, ini karena sejak Laravel versi 8, laravel/ui merupakan package terpisah. Selain itu, kita memasang laravel/ui juga karena DataTables memerlukannya.

Jalankan perintah ini:

composer require laravel/ui --dev 

Kemudian kita juga akan mengaktifkan otentikasi bawaan dengan laravel/ui dan menggunakan bootstrap sebagai CSS frameworknya, sekali lagi karena datatable memerlukan bootstrap, jalankan perintah berikut:

php artisan ui bootstrap --auth

Perintah tersebut selain menginstall dependency juga akan membuat sebuah file yaitu resources/scss/app.scss yang akan kita pakai untuk menaruh asset datatable.

Install node dependencies

Setelah itu kita perlu menginstall dependency javascript dengan perintah berikut:

yarn install

atau jika kamu menggunakan NPM, gunakan perintah berikut:

npm install 

Install datatables.net Assets

Jika sebelumnya kita sudah mempublish asset package yajra/laravel-datatables maka sekarang kita perlu juga menginstall asset yang diperlukan oleh pustaka datatables.net yang akan dicompile ke file javascript kita menggunakan laravel mix.

Oleh karena itu kita akan menginstallnya menggunakan yarn atau npm seperti ini:

yarn add datatables.net-bs4 datatables.net-buttons-bs4

Jika menggunakan npm:

npm install datatables.net-bs4 datatables.net-buttons-bs4 --save

Register assets in bootstrap.js dan app.scss

Setelah itu, kita buka file resources/js/bootstrap.js kemudian tambahkan kode di bawah ini:

// .... kode sebelumnya ... //

require('bootstrap');
require('datatables.net-bs4');
require('datatables.net-buttons-bs4');
resources/js/boostrap.js

Dan kita buka file resources/scss/app.scss kemduian tambahkan kode berikut:

// ... kode sebelumnya ... //

// DataTables
@import "~datatables.net-bs4/css/dataTables.bootstrap4.css";
@import "~datatables.net-buttons-bs4/css/buttons.bootstrap4.css";
resources/scss/app.scss

Compile assets

Jika sudah maka sekarang kita perlu melakukan kompilasi asset untuk javascript dan css kita, karena kita sudah melakukan penambahan-penambahan asset di atas.

Jalankan perintah:

yarn dev 

atau jika menggunakan npm:

npm run dev

Jika sudah selesai perintah tersebut dieksekusi, kita siap untuk membuat datatable pertama kita.

Modifikasi layouts/app

Buka file resources/views/layouts/app.blade.php kemudian pada bagian head hapus script berikut:

<script src="{{ asset('js/app.js') }}"></script>

Kemudian setelah </body> tambahkan script yang diperlukan untuk DataTable berikut:

<script src="{{ mix('js/app.js') }}"></script>
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
@stack('scripts')

Kemungkinan Error

Jika kamu sudah mengikuti seluruh step di atas, kemudian mengalami kendala Table tidak muncul terutama terkait error Datatable is not a function.
Kamu bisa coba tambahkan javascript berikut di view mu:

try {
window.$ = window.jQuery = require('jquery');
} catch (e) {}

Error ini mungkin akan dialami oleh kamu yang mencoba integrate dengan Template css atau menggunakan starter Jetstream.

Kesimpulan

Untuk menggunakan DataTable di Laravel, pertama kita perlu melakukan instalasi package yajra/laravel-datatbles kemudian melakukan konfigurasi dan penyesuaian awal. Penyesuaian ini hanya dilakukan sekali saja yaitu sesaat setelah menginstall di projek Laravel kita.

HTML Builder

Sebelumnya kita telah belajar beberapa cara untuk mengubah DataTable yang dihasilkan oleh package yajra/laravel-datatables.

Kita menggunakan instance dari dataTable maupun plugin HTML builder.

Pada bab ini, kita akan lebih berfokus lagi pada fungsi-fungsi yang disediakan oleh plugin HTML builder.

Sebagai pengingat kembali bahwa package yajra/laravel-datatables terdiri dari package inti yaitu dataTable ditambah dengan 3 plugin tambahan yaitu HTML builder, buttons dan editor.

Plugin HTML builder ini memudahkan kita untuk membuat markup yang dibutuhkan untuk menampilkan DataTable, sementara package dataTable sendiri lebih bertanggungjawab terhadap pengambildan dan pemrosesan data untuk DataTable. Seperti yang telah kita pelajari sebelumnya pada bab "Datatable service".

Baik, langsung saja kita mulai membahas lebih detail plugin HTML builder.

Konfigurasi

Pertama tentu konfigurasi, sebelumnya kita sudah mengupas konfigurasi global pada bab "Konfigurasi". Pada bab tersebut, konfigurasi yang kita bahas adalah konfigurasi untuk package inti dataTable.

Sementara konfigurasi di sini adalah konfigurasi khusus terkait plugin HTML builder.

Jika kamu belum mempublish asset konfigurasi HTML builder, maka kamu jalankan perintah berikut pada terminal/cmd untuk mempublikasikannya:

php artisan vendor:publish --tag=datatables-html

Maka kamu akan mendapatkan pesan kurang lebih seperti ini:

Copied Directory [/vendor/yajra/laravel-datatables-html/src/resources/views] To [/resources/views/vendor/datatables]
Copied File [/vendor/yajra/laravel-datatables-html/src/resources/config/config.php] To [/config/datatables-html.php]

Kemudian kamu buka file config/datatabels-html.php kamu akan mendapati beberapa konfigurasi yang bisa kamu ubah. Untuk memahaminya kita akan bahas satu per satu sekarang.

namespace

Konfigurasi ini mengatur namespace javascript yang akan digunakan di browser. Nilai bawaan dari konfigurasi ini adalah LaravelDataTables.

table

Ini merupakan konfigurasi yang mengatur terkait element table yang digunakan untuk merender DataTable di sisi klien. Terdapat 2 konfigurasi yaitu:

class

class digunakan untuk memberikan class pada element html table yang digunakan untuk merender DataTable. Nilai bawaannya adalah table.

id

id digunakan untuk memberikan atribut id pada elemen html table yang digunakan untuk merender DataTable. Nilai bawaannya adalah dataTableBuilder. Mungkin juga untuk dioverride dengan setTableId.

callback

callback bernilai Array yang berisi string. Masing-masing string pada Array ini ditandai sebagai callback sehingga tidak akan diubah menjadi string oleh HTML builder. Nilai bawaanya adalah ['$', '$.', 'function']

script

script digunakan untuk mengatur, file views mana yang akan dipakai untuk merender script, yakni saat kita memanggil $table->scripts() seperti pada file resources/views/users/index.blade.php.

Nilai bawaanya adalah datatables::script yang mereferensikan file resources/views/vendor/datatables/script.blade.php.

editor

editor digunakan untuk mengatur, file views mana yang akan dipakai untuk merender editor.

Nilai bawaanya adalah datatables::editor yang mereferensikan file resources/views/vendor/datatables/editor.blade.php.

Demikianlah konfigurasi untuk plugin HTML builder pada package yajra/laravel-datatables. Selanjutnya kita akan kembali berkutat dengan kode.

Pengaturan Judul Kolom

Sebelumnya kita sudah berhasil melakukan penambahan maupun menampilkan kolom pada DataTable. Judul kolomnya masih menggunakan perilaku bawaan yaitu, nama kolom dijadikan tiap awal huruf kapital. Misalnya email menjadi Email sebagai judul kolom. Atau created_at menjadi Created At.

Nah, kita bisa juga mengganti judul kolom secara custom untuk tiap-tiap kolom dengan perintah title pada saat mendefinisikan kolom seperti ini:

Buka file app/DataTables/UsersDataTable.php lalu pada method getColumns() kita akan mengubah judul kolom email dengan Surel dan name dengan Nama Lengkap maka kita lakukan seperti ini:

protected function getColumns()
{
  return [
      Column::computed('action')
            ->width(160)
            ->addClass('text-center'),
      Column::make('id'),
      Column::make('email')->title('Surel'),
      Column::make('name')->title('Nama Lengkap'),
      Column::make('created_at'),
      Column::make('updated_at'),
  ];
}

Silahkan refresh kembali halaman http://localhost:xxxx/users, maka kamu akan melihat kolom Email menjadi Surel dan kolom Name menjadi Nama Lengkap.

Pencarian per Kolom

Sejauh ini DataTable kita sudah memiliki input pencarian di sisi kanan atas. Selain input ini kita juga bisa menambahkan input pencarian di tiap-tiap kolom.

Kita buka kembali file app/DataTables/UsersDataTable.php, kemudian pada method html() kita akan mengkonfigurasikan HTML builder untuk menggunakan method parameters().

Method parameter() ini digunakan untuk memberikan atribut DataTable, di sini kita bisa memberikan Javascript callback.

Dengan memanfaatkan callback yaitu pada initComplete alias sesaat setelah DataTable berhasil dibuat di sisi klien, kita akan menambahkan input pencarian di footer masing-masing kolom dengan kode javascript.

Pertama kita definisikan dulu callback initComplete seperti ini:

public function html()
{
    return $this->builder()
                ->setTableId('users-table')
                ->columns($this->getColumns())
                ->minifiedAjax()
                ->dom('Bfrtip')
                ->orderBy(2, 'desc')
                ->parameters([                    'initComplete' => 'function(){                        alert("Hello")                    }'                ])                ->buttons(
                    Button::make('create'),
                    Button::make('export'),
                    Button::make('print'),
                    Button::make('reset'),
                    Button::make('reload')
                );
}

Perhatikan pada baris 9 - 13, kita menggunakan method parameter() yang menerima associative Array, dan memberikan initComplete bernilai string yang berisi kode fungsi javascript. Fungsi javascript tersebut hanya menggunakan alert("Hello") untuk memudahkanmu memahami apa yang sedang terjadi.

Sekarang simpan, dan refresh http://localhost:xxx/users maka kamu akan melihat browser alert "Hello".

Sudah kebayang kan cara kerja callback pada method parameter() di atas? Kita akan lanjutkan untuk membuat input pencarian.

Baik, mari kita lanjutkan untuk membuat input pencarian di masing-masing kolom. Pertama, kita harus looping dulu terhadap kolom yang ada di DataTable menggunakan javascript seperti ini:

->parameters([
    'initComplete' => 'function(){
      this.api().columns().every(function(index){         let column = this;      })    }'
])

Kemudian kita akan membuat elemen input seperti ini:

->parameters([
    'initComplete' => 'function(){
      this.api().columns().every(function(index){
         let column = this;
         let input = document.createElement("input")      })
    }'
])

Lalu kita akan meletakkan input yang kita buat di footer masing-masing kolom seperti ini:

->parameters([
    'initComplete' => 'function(){
      this.api().columns().every(function(index){
         let column = this;
         let input = document.createElement("input")

         $(input)         .appendTo($(column.footer()).empty())         .on(\'change\', function () {             column.search($(this).val(), false, false, true).draw();         });
      })
    }'
])

Tapi kita juga harus mencegah kolom yang sudah kita setting tidak bisa dicari searchable(false) atau blacklist atau computed seperti pada bab sebelumnya, supaya tidak perlu ditambahkan input, caranya seperti ini:

->parameters([
    'initComplete' => 'function(){
      this.api().columns().every(function(index){
         let column = this;
         let input = document.createElement("input")

         let isSearchable = this.settings()[0].aoColumns[index].bSearchable;          if(!isSearchable) return;
         $(input)
         .appendTo($(column.footer()).empty())
         .on(\'change\', function () {
             column.search($(this).val(), false, false, true).draw();
         });

      })
    }'
])

Perhatikan pada baris yang dihighlight, 7-8, kita mengecek apakah kolom termasuk yang bisa disearch, jika tidak bisa maka kita return alias tidak menambahkan input pencarian.

Sekarang kode parameters() pada method html() di file app/DataTables/UsersDataTable.php terlihat seperti ini:

public function html()
{
    return $this->builder()
                ->setTableId('users-table')
                ->columns($this->getColumns())
                ->minifiedAjax()
                ->dom('Bfrtip')
                ->orderBy(2, 'desc')
                ->parameters([                    'initComplete' => 'function(){                        this.api().columns().every(function (index) {                            let column = this;                            let input = document.createElement("input");                            let isSearchable = this.settings()[0].aoColumns[index].bSearchable;                             if(!isSearchable) return;                            $(input)                            .appendTo($(column.footer()).empty())                            .on(\'change\', function () {                                column.search($(this).val(), false, false, true).draw();                            });                        });                    }'                ])                ->buttons(
                    Button::make('create'),
                    Button::make('export'),
                    Button::make('print'),
                    Button::make('reset'),
                    Button::make('reload')
                );
}

Silahkan disimpan, lalu kamu coba buka http://localhost:xxxx/users, maka seharusnya sekarang tetap belum muncul, kenapa?

Karena secara bawaan DataTable kita tidak menampilkan footer, padahal kita menaruh input pencarian di footer. Oleh karena itu kita perlu sedikit memodifikasi file resources/views/users/index.blade.php.

Ubah kode berikut:

{{$dataTable->table()}}

Menjadi seperti ini:

{{$dataTable->table([], true)}}

Parameter kedua true memerintahkan DataTable untuk merender footer. Sementara parameter pertama merupakan atribut yang ingin kita berikan ke table, karena kita tidak perlu menambahkan apa-apa, kita berikan saja Array kosong.

Sekarang coba refres halaman localhost:xxxx/users maka kamu akan melihat tampilan input pencarian di footer masing-masing kolom yang searchable.

Coba cari dengan keyword tertentu, lalu tekan Enter atau klik di luar input. Maka datatable akan menampilkan hasil sesuai keyword mu.

Kurang lebih tampilannya menjadi seperti ini (bisa sedikit berbeda sesuai settingan searchable, blacklist dan computed di kode getColumns() dan dataTable() mu):

Menghilangkan Input Pencarian Global

Cara Pertama

DataTable sebetulnya memiliki parameter bFilter yang bisa kita set false agar tidak menampilkan input pencarian global di kanan atas. Masalahnya ini akan menonaktifkan semua bentuk filter atau pencarian, termasuk jika kita menambahkan pencarian di masing-masing kolom seperti di bagian sebelumnya.

Jika bFilter di set ke false, pencarian per kolom tetap bisa menampilkan input pencarian, tetapi jika dilakukan pencarian dengan mengetik keyword tertentu, fungsi pencarian tersebut tidak jalan.

Maka, kita harus menggunakan cara sedikit manual, yaitu dengan mengubah style CSS.

Pertama kita ubah dulu layout yang kita pakai resources/views/layouts/app.blade.php dan tambahkan kode berikut:

@stack("styles");

Letakkan kode di atas di antara <head> </head> atau lebih tepatnya setelah deklarasi link CSS berikut:

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

Gunanya agar layouts tersebut menerima styles dari views di bawahnya.

Oke, selanjutnya kita buka file views DataTable kita yaitu pada resources/views/uses/index.blade.php kemudian kita tambahkan kode berikut:

@push('styles')
  <style>
    .dataTables_filter{
      display: none
    }
  </style>
@endpush

Jika sudah kamu simpan kedua file di atas, lalu refresh http://localhost:xxxx/users dan sekarang input pencarian di kanan atas DataTable sudah tidak muncul. Dan pencarian di tiap-tiap kolom tetap berfungsi. Great!

Cara Kedua

Cara pertama yang kita lakukan merupakan cara manual, di situ kita jadi tahu bahwa kita bisa memodifikasi bagian dari DataTable asal kita tahu class dari elemen tertentu.

Tapi kabar baiknya, DataTable sudah memiliki pengaturan untuk menyembunyikan input pencarian global tanpa menghilangkan fungsi filter secara keseluruhan --beda dengan bFilter.

Bagaimana caranya? Jika kamu perhatikan pada UsersDataTable pada method html() terdapat konfigurasi ->dom("Bfrtip" bukan?

Apa sih kata-kata aneh itu? Bfrtip? itu bukan mantra atau sesuatu yang abstrak. Tetapi memiliki arti karena kata tersebut merupakan konfigurasi tampilan DataTable bawaan.

Untuk menghilangkan input pencarian global, kita cukup hapus huruf f di situ, yang berarti filter sehingga menjadi Brtip saja, seperti ini:

->dom('Brtip')

Silahkan coba kamu ubah, kemudian bahkan kamu hapus deklarasi CSS yang sebelumnya dilakukan pada cara pertama. Maka kamu akan mendapati tampilan input pencarian global tetap tidak muncul dan fitur pencarian per kolom tetap berfungsi seperti sediakala.

Nah setelah ini kita bahas sebentar mengenai arti dari huruf-huruf lain pada Bfrtip ya.

Konfigurasi Tampilan DataTable

Berikut adalah arti dari konfigurasi tampilan DataTable yang sebelumnya kita pakai.

Untuk menggunakan konfigurasi di atas dengan yajra/laravel-datatables kita gunakan HTML builder dengan method dom() seperti sebelumnya, misalnya kita hanya ingin menampilkan tombol print dst dan tabel saja maka kita gunakan dom("Bt") atau menampilkan pencarian juga seperti ini dom("Bft").

Urutan dari huruf-huruf tersebut juga berpengaruh ya, misalnya Bfrtip dengan Bptipf itu akan berbeda juga urutan elemen terkait di halaman DataTable.

Itu berarti jika kita ingin menampilkan tombol-tombol di bawah table maka kita harus letakkan B setelah t seperti ini misalnya dom("tB").

Parameter

Parameter digunakan untuk mengirimkan parameter yang akan dipakai oleh DataTable. Method ini sudah kita gunakan saat kita membuat pencarian per kolom, yaitu untuk mendefinisikan javascript callback initComplete.

Selain untuk keperluan callback, parameter() ini bisa kita berikan opsi lain sesuai dengan option yang disediakan oleh http://datatables.net,

Opsi lengkap bisa dibaca di https://datatables.net/reference/option/

Events / Callbacks

Selain option untuk DataTable, method parameter() pada HTML builder juga bisa digunakan untuk set javascript callback DataTable. Berikut daftar callback yang bisa digunakan.

Menambahkan Checkbox

Dengan plugin HTML builder, kita juga bisa menambahkan kolom checkbox menggunakan method addCheckbox seperti ini:

public function html()
{
    return $this->builder()
                ->setTableId('users-table')
                ->columns($this->getColumns())
                ->minifiedAjax()
                ->dom('Bfrtip')
                ->orderBy(2, 'desc')
                ->addCheckbox() /** <-- perhatikan */                ->buttons(
                    Button::make('create'),
                    Button::make('export'),
                    Button::make('print'),
                    Button::make('reset'),
                    Button::make('reload')
                );
}
app/DataTables/UsersDataTable.php

Coba refresh halaman localhost:xxxx/users maka kamu seharusnya melihat ada kolom yang berisi checkbox sebagai kolom paling kanan.

Untuk menjadikan checkbox berada di paling kiri, kita bisa gunakan parameter kedua bernilai true seperti ini:

->addCheckbox([], true);

Parameter pertama merupakan atribut jika kita ingin menambahkan atribut ke dalam checkbox.

Sekarang coba refresh kembali dan sekarang posisi checkbox sudah berpindah.

Saat ini chekcbox kita belum berguna, kita akan membuatnya berguna di bab "Advanced Use Case".