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 + Modal CRUD

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 :

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 :

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

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

Kristian Des Natalis

Publisher Name

kristiandes.com

Publisher Logo