Membuat aplikasi CRUD Bootsrap dengan PHP MySQL

Dalam pembuatan aplikasi sistem informasi, kita selalu berhubungan dengan database. Sistem informasi tersebut harus dapat melakukan proses create, read, update dan delete data yang terhubung dengan database. Mekanisme ini sering disingkat dengan istilah CRUD. (In developing information system application, we always dealing with the database. The information system should be able create, read, update and delete data connected to database. This mechnism always called CRUD).

Dalam tutorial ini kita akan membuat sebuah contoh aplikasi sistem informasi sederhana dengan Bootstrap sebagai front-end (In this tutorial, we'll develop a simple information system application with Bootstrap as front-end).

Berikut ini output dari akhir tutorial dengan mengclick link Live Preview ( Here is the output of the final tutorial by clicking Live Preview).

Live Preview

Jika anda telah melihat live preview, tentunya anda sudah ada bayangan kita akan membuat aplikasi apa. Dalam tutorial ini kita akan membagi dua percobaan (If you have seen the live preview, of course you have understood what aplication that we will do ?. In this tutorial, we divide it in two sections):

• Percobaan  pertama, fokus pada pembuatan interface (First section, we concern about developing interface).
• Percobaan  kedua, kita mengimplementasikan php dengan database (Second section, we implement php with database).

Percobaan pertama (First section)

Pada percobaan pertama, terdapat lima buah file  yang terdiri dari(In the first section, there are five sections which contain):

Step -1 : Membuat file index.html (Create file index.html)

Pada file index.htm terdapat 4 tombol berupa (In file index.html there 4 buttons) :

• Insert data,proses  untuk mencreate data (Insert data where we create data).
• Read
• Update
• Delete

index.html

Step -2 : Membuat file insert.html (Create file insert.html)

insert.html

Step -3 : Membuat file read.html (Create file read.html)

read.html

Step -4 : Membuat file update.html (Create file update.html)

update.html

Step -5 : Membuat file delete.html (Create file delete.html)

delete.html

Anda dapat mengdownload keseluruhan file pada link bawah ini :

• Download

Percobaan kedua (Second section)

Step -1 : Membuat database (Create database)

Buatlah database yang diberinama biodata dan tabel users  seperti dibawah ini (Create a database "biodata" and table "users" as show by script sql below):

CREATE TABLE IF NOT EXISTS `users` (
  `No` int(11) NOT NULL AUTO_INCREMENT,
  `FName` varchar(20) NOT NULL,
  `LName` varchar(20) NOT NULL,
  `Age` int(11) NOT NULL,
  `Gender` enum('Male','Female') NOT NULL,
  PRIMARY KEY (`No`)
) ENGINE=MyISA

Step -2 : Membuat file connection.php (Create a file connection.php)

<?php
   $con=mysqli_connect("localhost","root","","biodata");
?>

Step -3 : Membuat file index.php (Create a file index.php)

Step -4 : Membuat file insert.php (Create a file insert.php)

Step -5 : Membuat file read.php (Create a file read.php)

Step -6 : Membuat file update.php (Create a file update.php)

Step -7 : Membuat file delete.php (Create a file delete.php)

Karena source code terlalu panjang untuk step-3 s.d step-7,maka anda dapat mendownload keseluruhan source codenya (Because source code is too long for step-3 until step-7, then you can download all source code).

• 4shared

Untuk databasenya, anda dapat mendownload dibawah ini ( For database, you can download it below):

• 4shared