Datatables, HTML, Javascript, mysql, PHP

Membuat CRUD Dengan JQuery Tabledit + Datatables ServerSide + Bootstrap dan PDO

Initekno.com – Gak kerasa sudah lama tidak posting lagi dalam blog ini, Hey.. apa kabar. semoga baik ya. Kali ini saya akan membagikan tutorial bagus nih, yaitu jquery tabledit. Jaman sekarang pengolahan data musti serba cepat. Kebiasaan bekerja menggunakan excel membuat sebagian orang malas untuk berurusan dengan form html yang dibuat secara umum.

Bayangkan untuk melakukan ubah data, dan entri data saja sebuah sistem dalam platform web masih ada yang menggunakan cara manual, yaitu tambah data muncul form, bapus data muncul alert box.. Semua itu serba lambat. Bagaimana jika kita melakukan ubah data dari beribu-ribu data. Mungkin bisa mencret kita.

Membuat Tabel

Ok, dari permasalahan diatas, ada baiknya kita langsung koding saja. Tapi seperti biasa buat terlebih dahulu design tabelnya seperti berikut ini :

Tahap 1 : yaitu masuk terlebih dahulu kedalam program kerja mysql

Tahap 2 : Cek database yang sudah kamu buat dan gunakan.

disini saya menggunakan nama database “initekno_learn” dan tabel “mahasiswa”. Kemudian buat struktur table seperti berikut ini:

Menulis Baris Kode

Setelah selesai membuat data, silahkan isi table yang kamu buat, setelah itu mari kita koding. Buka teks editor visual studio code dan buat struktur file seperti berikut ini :

  • initekno_learn
    • mahasiswa
      • conn.php
      • edit.php
      • fetch.php
      • index.php 

Struktur folder diatas menggambarkan dengan jelas bahwa project web ini bernama initekno_learn. Berupa folder yang harus kamu letakkan pada folder c:->xampp->htdocs

Sekarang ketik kode koneksi seperti berikut ini

Ketik edit.php

Ketik kode fetch.php

Terakhir yaitu index.php

Pastikan kamu terkoneksi dengan jaringan internet, karena semua komponen css dan javascript akan berbentuk link url yang otomatis mendownload.

Sekarang coba jalankan pada browser project yang kamu buat. Maka kamu akan mendapatkan hasil seperti berikut ini :

Diatas ketika kamu melakukan edit, maka otomatis langsung terbentuk form dalam datatables kita. ketika kamu klik simpan maka data langsung akan terupdate.

Sekarang coba kamu kembangkan fiturnya lebih lagi. berikan fitur tambah data. Karena saya tidak membuat fitur tambah data untuk kasus ini.

Sekian, semoga bermanfaat buat kamu yang lagi belajar web programming.