CRUD (Create, Read, Update, Delete) Data Menggunakan Modal Bootstrap dan DataTables

CRUD (Create, Read, Update, Delete) Data Menggunakan Modal Bootstrap dan DataTables

CRUD (Create, Read, Update, Delete) Data Menggunakan Modal Bootstrap dan DataTables – Selamat datang di blog.kristiandes.com Site Blogging And Learning. Pada Kesempatan ini, Saya akan memberikan tutorial tentang penggunaan DataTables , php , dan mysql beserta penggunaan modal bootstrap untuk kebutuhan CRUD (Create,read,update,delete) + dengan searching,paging,dan sorting di dalamnya.

Apa itu Datatables

DataTables adalah plug-in untuk pustaka Javascript jQuery. Ini adalah alat yang sangat fleksibel, dibangun di atas dasar peningkatan progresif, yang menambahkan semua fitur canggih ini ke tabel HTML apa pun.

Sumber : https://datatables.net/

Apa itu Bootstrap

Bootstrap adalah kerangka kerja CSS yang sumber terbuka dan bebas untuk merancang situs web dan aplikasi web. Kerangka kerja ini berisi templat desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, navigasi, dan komponen antarmuka lainnya, serta juga ekstensi opsional JavaScript.

Sumber : https://id.wikipedia.org/wiki/Bootstrap_(kerangka_kerja)

Bagaimana membuat CRUD DataTables dengan modal Bootstrap, pasti Anda menginginkan sebuah data dapat diolah dengan mudah dan cepat. Terdapat fungsi searching, paging, dan sorting di dalamnya. Saya berikan gambaran dashboard untuk pengolahan data nya seperti dibawah ini :

DataTables

DataTables
DataTables

DataTables + Modal CRUD

DataTables+ModalBootstrap
DataTables+ModalBootstrap

Ini adalah tampilan dashboard data user yang akan kita olah nanti. Sudah sangat lengkap di dalamnya terdapat berbagai fitur seperti :

  1. Tambah Data
  2. Update Data
  3. Delete Data
  4. Delete Selected Data
  5. Modal Bootstrap
  6. Searching
  7. Paging
  8. Checkbox
  9. Sorting

Saya sengaja merangkumnya dalam sebuah pekerjaan saja, supaya lebih mudah untuk di terapkan dan di kembangkan kedepannya. Untuk pekerjaan kali ini Saya menggunakan database mysql dan xampp versi terbaru ya, Saya harap Kalian sudah menginstall webserver ini pada komputer kalian masing – masing.

Baiklah , sekarang kita mulai bagaimana membuat CRUD DataTables dengan modal Bootstrap

STEP 1

Create Database akses_opr

STEP 2

Create Table user_akses

CREATE TABLE `user_akses` (
  `id_user_akses` int(250) NOT NULL,
  `username` varchar(250) NOT NULL,
  `password` text NOT NULL,
  `status_akses` int(2) NOT NULL,
  `update_create` datetime NOT NULL,
  `update_time` time NOT NULL,
  `update_date` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `user_akses`
--

INSERT INTO `user_akses` (`id_user_akses`, `username`, `password`, `status_akses`, `update_create`, `update_time`, `update_date`) VALUES
(1, 'Administrator', '123', 1, '2020-04-16 20:41:03', '20:41:03', '2020-04-16');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `user_akses`
--
ALTER TABLE `user_akses`
  ADD PRIMARY KEY (`id_user_akses`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `user_akses`
--
ALTER TABLE `user_akses`
  MODIFY `id_user_akses` int(250) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
COMMIT;

copy-paste query ini pada menu sql di phpmyadmin sesuai database Anda. Jika mengalami kegagalan dapat di buat secara manual

Hasilnya seperti ini :

database
database

STEP 3

Create file dengan nama conn.inc

<?php
$conn = new mysqli("localhost", "root", "", "akses_opr");
?>

script ini adalah koneksi ke database, Anda dapat mengubahnya sesuai database Anda masing -masing

STEP 4

Create File dengan nama user.php

copy-paste script diatas. lalu jalankan pada webserver Anda masing – masing. Sampai disini proses pembuatan dashboard untuk pengolahan data selesai. Hasil dari script diatas sudah dapat menjalankan banyak fitur yang Anda butuhkan. Jika di jalankan hasil nya akan seperti di bawah ini :

DataTables-demo
DataTables-demo

Jika mengalami kesulitan dapat memberikan komentar pada kolom di bawah ya.

Demikian ulasan mengenai bagaimana membuat CRUD DataTables dengan modal Bootstrap. Tetap semangat untuk menulis, dan berikan ilmu kepada Siapa saja ya. Sekian dari Saya semoga bermanfaat.

Summary
CRUD (Create, Read, Update, Delete) Data Menggunakan Modal Bootstrap dan DataTables
Article Name
CRUD (Create, Read, Update, Delete) Data Menggunakan Modal Bootstrap dan DataTables
Description
Tutorial Penggunaan DataTables , php , dan mysql beserta modal bootstrap untuk kebutuhan CRUD (Create,read,update,delete) + dengan searching,pagging,dan sorting
Author
Publisher Name
kristiandes.com
Publisher Logo

One Reply to “CRUD (Create, Read, Update, Delete) Data Menggunakan Modal Bootstrap dan DataTables”

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.