Membuat CRUD Sederhana Dengan PHP Dan Bootstrap

Membuat CRUD Sederhana dengan PHP dan
Bootstrap
Kali ini kita akan belajar cara membuat CRUD sederhana dengan PHP dan Bootstrap serta
menggunakan mySQL untuk databasenya. Aplikasi CRUD merupakan aplikai yang paling dasar
dan umum untuk programmer web. CRUD sendiri merupakan singkatan dari Create, Read,
Update dan delete. Kita biasanya membuat aplikasi ini untuk mengelolah data di database.
Fungsi-fungsi seperti insert data kedalam tabel, tampilkan data dengan perintah select. Hapus
dengan perintah delete, semua telah tercover pada aplikasi CRUD.
Untuk tampilannya kita mengggunakan framework bootstrap, komponen-komponen yang akan

kita gunakan pada bootstrap diantaranya membuat tabel, button, alert (pemberitahuan) dan form.
Apa saja yang akan kita buat?
▪ Konfigurasi Database
▪ Membuat file PHP untuk koneksi ke database
▪ Konfigurasi Framework Bootstrap
▪ Membuat file index.php
▪ Membuat file create.php
▪ Membuat file update.php
Apa yang kita butuhkan?
▪ Xampp untuk web server (localhost) dan database mysql

▪ Aplikasi teks editor seperti notepad++ dan sejenisnya
▪ Download offline file bootstrap
▪ Browser mozzila atau chrome
Konfigurasi Database
Tahap pertama kita buat dulu databasenya. kita gunakan database mysql. Kalian bisa
membuatnya melalui CMD atau dari tools phpMyAdmin
Pada contoh ini saya membuat database dengan nama crud. Namun kalian bisa menyesuailkan
dengan projek aplikasi web yang kalian buat.
create database crud;
Buat Tabel di Database

Untuk mengelolah data tentunya kita memerlukan tabel untuk menampung data tersebut. Pada
contoh kali ini saya membuat tabel dengan nama mahasiswa.
create table anggota(
id_anggota int not null auto_increment primary key,
username varchar (50),

nama varchar(50),
alamat varchar(50),
email varchar(30),
no_hp char(13)
);
Membuat folder didalam htdocs
Saya membuat folder dengan nama crud didalam folder htdocs xampp.
Sesuaikan saja dengan nama aplikasi yang kalian buat.
Konfigurasi Bootstrap
Download bootstrap pada halaman resminya di getbootstrap.com
Untuk mempersingkat tutorial yang saya berikan, saya tidak perlu lagi membahas bagaimana
mengkonfigurasikan bootstrap ke projek yang sedang kita buat. Kalian bisa pelajari di modul
CARA MENGGUNAKAN BOOTSTRAP 4.
Untuk Project kali ini pergunakan cara CARA #2 yang terdapat pada modul CARA
MENGGUNAKAN BOOTSTRAP 4.
Dengan cara :
- Copy folder Bootstrap-4.5.0-dist ke folder c:\xampp\
- RENAME folder bootstrap-4.5.0-dist menjadi Bootstrap

Koneksikan file PHP ke Database
Kita buat file PHP, untuk mengkoneksikan ke database akademik yang sudah kita buat
sebelumnya
<?php
$host="localhost";
$user="root";
$password="";
$db="crud";
$kon = mysqli_connect($host,$user,$password,$db);
if (!$kon){
die("Koneksi gagal:".mysqli_connect_error());
?>
Buat file input data kedatabase (Create)

Pada tahap pertama kita buat fungsi create untuk input data ke database. Buatlah file PHP
simpan dengan nama create.php (kalian bisa gunakan nama lain yang sesuai dengan projek
kalian). Simpan dalam folder htdocs/crud yang tlah kita buat diatas.
<!DOCTYPE html>
<html>
<head>
<title>Form Pendaftaran Anggota</title>

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<?php
//Include file koneksi, untuk koneksikan ke database
include "koneksi.php";
//Fungsi untuk mencegah inputan karakter yang tidak sesuai
function input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
//Cek apakah ada kiriman form dari method post
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username=input($_POST["username"]);
$nama=input($_POST["nama"]);
$alamat=input($_POST["alamat"]);
$email=input($_POST["email"]);
$no_hp=input($_POST["no_hp"]);
//Query input menginput data kedalam tabel anggota
$sql="insert into anggota (username,nama,alamat,email,no_hp) values
('$username','$nama','$alamat','$email','$no_hp')";
//Mengeksekusi/menjalankan query diatas
$hasil=mysqli_query($kon,$sql);
//Kondisi apakah berhasil atau tidak dalam mengeksekusi query diatas
if ($hasil) {
header("Location:index.php");
else {
echo "<div class='alert alert-danger'> Data Gagal disimpan.</div>";
?>
<h2>Input Data</h2>
<form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<div class="form-group">
<label>Username:</label>
<input type="text" name="username" class="form-control" placeholder="Masukan
Username" required />
</div>
<label>Nama:</label>
<input type="text" name="nama" class="form-control" placeholder="Masukan Nama"
required/>
</div>
<label>Alamat:</label>
<textarea name="alamat" class="form-control" rows="5"placeholder="Masukan
Alamat" required></textarea>
</div>
<label>Email:</label>
<input type="email" name="email" class="form-control" placeholder="Masukan
Email" required/>
</div>
<label>No HP:</label>
<input type="text" name="no_hp" class="form-control" placeholder="Masukan No
HP" required/>
</div>
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Penjelasan sintak:
Mungkin saya akan sedikit jelaskan beberapa bagian sintak yang menurut saya penting untuk
dijelaskan.
yang pertama untuk menggunakan bootstrap saya meload data bootstrap yang telah saya
download dan simpan dialam folder htdoc/crud. untuk menggunakannya saya load css
bootstrapnya di bagian <head>. sintaknya adalah
Kemudian saya membuat koneksi database dengan cara include file koneksi yang kita buat
terpisah dengan file projek kita. disini kita menggunakan perintah include
Selanjutnya saya membuat fungsi untuk mencegah karakter-karakter yang tidak sesuai,
misalnya pengguna memasukan kode-kode atau tag html dan javascript atau biasanya dikenal
dengan istilah Cross Site Scripting (XSS). Nah untuk mencegah inputan-inputan yang tersebut
kita gunakan beberapa fungsi PHP misalnya htmlspecialchars(), fungsi trim() dan stripslashes().
return $data;
Kemudian kita masuk kebagian selanjutnya yaitu terdapat kondisi untuk mengecek apakah ada
kiriman form dengan method post pada form tersebut.
if ($_SERVER["REQUEST_METHOD"] == "POST")
Jika kondisi bernilai benar (true) maka sistem akan mengambil setiap nilai (value) dari isian form
tersebut. yang mana ada berapa inputan seperti username, nama, alamat, email dan no hp yang
masing-masing disimpan menggunakan variabel dan menggunakan fungsi input() yang telah kita
buat diatas.
Nantinya sistem akan menjalankan perintah sql untuk input data berdasarkan nilai dari variabel
masing-masing
$sql="insert into anggota (username,nama,alamat,email,no_hp) values
('$username','$nama','$alamat','$email','$no_hp')";
Terakhir kondisi untuk mengecek apakah query tersebut berhasil eksekusi, jika ya maka
halaman akan diarahkan ke file index.php yang akan kita buat selanjutnya dan apabila gagal
maka menampilkan pemberitahuan gagal input data
if ($hasil) {
else {
echo "<div class='alert alert-danger'> Data Gagal disimpan.</div>";
}
Membuat file untuk menampilkan data anggota (Read)
Pada tahap ini kita membuat sebuah file PHP dengan nama index.php didalam file ini nantinya
kita akan menampilkan data anggota yang diambil dari tabel anggota pada database crud yang
telah kita buat sebelumnya.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<br>
<h4>CRUD Sederhana dengan PHP dan Bootstrap</h4>
<?php
//Cek apakah ada nilai dari method GET dengan nama id_anggota
if (isset($_GET['id_anggota'])) {
$id_anggota=htmlspecialchars($_GET["id_anggota"]);
$sql="delete from anggota where id_anggota='$id_anggota' ";
//Kondisi apakah berhasil atau tidak
if ($hasil) {
else {
echo "<div class='alert alert-danger'> Data Gagal dihapus.</div>";
?>
<table class="table table-bordered table-hover">
<br>
<thead>
<tr>
<th>No</th>
<th>Username</th>
<th>Nama</th>
<th>Alamat</th>
<th>Email</th>
<th>No HP</th>
<th colspan='2'>Aksi</th>
</tr>
</thead>
<?php
$sql="select * from anggota order by id_anggota desc";
$no=0;
while ($data = mysqli_fetch_array($hasil)) {
$no++;
?>
<tbody>
<tr>
<td><?php echo $no;?></td>
<td><?php echo $data["username"]; ?></td>
<td><?php echo $data["nama"]; ?></td>
<td><?php echo $data["alamat"]; ?></td>
<td><?php echo $data["email"]; ?></td>

<td><?php echo $data["no_hp"]; ?></td>
<td>
<a href="update.php?id_anggota=<?php echo
htmlspecialchars($data['id_anggota']); ?>" class="btn btn-warning" role="button">Update</a>
<a href="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]);?>?id_anggota=<?php echo $data['id_anggota']; ?>"
class="btn btn-danger" role="button">Delete</a>
</td>
</tr>
</tbody>
<?php
?>
</table>
<a href="create.php" class="btn btn-primary" role="button">Tambah Data</a>
</div>
</body>
</html>
Penjelasan Sintak:
Pada file index.php file ini akan menjadi file utama yang akan diload saat crud dipanggil lewat
localhost. Disini kita menampilkan datanya menggunakan tabel dengan bootstrap.
Untuk menampilkan data anggota dari tabel anggota didatabase, kita gunakan perintah sql
berikut, dimana perintah ini akan menampilkan semua data anggota pada tabel anggota dan di
urutkan berdasarkan id_anggota secara descending (dari besar ke kecil).
$sql="select * from anggota order by id_anggota desc";
Selanjutnya untuk menampilkan data anggota sintaknya kita gunakan perulangan while dan
menggunakan fungsi mysqli_fetch_array()
while ($data = mysqli_fetch_array($hasil))
Nantinya data hasil query akan disimpan dalam bentuk array dan ditampilkan menggunakan
perulangan. untuk menampilkannya kita cukup menyebut nama field pada tabel anggota yang
telah tersimpan pada array $data dengan jenis assosiatif.
<td><?php echo $data["username"]; ?></td>
<td><?php echo $data["nama"]; ?></td>
<td><?php echo $data["alamat"]; ?></td>
<td><?php echo $data["email"]; ?></td>
<td><?php echo $data["no_hp"]; ?></td>
Selanjutnya kita membuat button untuk aksi update dan delete, nantinya ketika pengguna
mengklik tombol update maka akan di arahkan ke halaman update berdasarkan id_anggota yang
ingin di update.
<a href="update.php?id_anggota=<?php echo htmlspecialchars($data['id_anggota']);
?>" class="btn btn-warning" role="button">Update</a>
<a href="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]);?>?id_anggota=<?php echo $data['id_anggota']; ?>"
class="btn btn-danger" role="button">Delete</a>
Begitu juga dengan hapus, ketika tombol delete diklik maka akan mengerjakan sintak pada
bagian ini
<?php
$id_anggota=htmlspecialchars($_GET["id_anggota"]);
$sql="delete from anggota where id_anggota='$id_anggota' ";

//Kondisi apakah berhasil atau tidak
if ($hasil) {
else {
echo "<div class='alert alert-danger'> Data Gagal dihapus.</div>";
?>
Disini saya memang sengaja membuat fungsi hapus data digabung pada file index.php agar
tidak terlalu banyak file yang kita buat. Kalian bisa membuat fungsi delete dengan file terpisah,
silahkan saja kalian explore. tapi pada contoh disini saya gabubungkan dengan file index.php.
Buat file untuk mengubah data (Update)

Pada bagian terakhir dari pembahasan membuat CRUD dengan PHP sederhana. Kita membuat
fungsi update, jadi pengguna bisa mengubah data secara langsung lewat aplikasi tanpa harus
membuka databasenya. Buat sebuah file dengan nama update.php
<!DOCTYPE html>
<html>
<head>
<title>Form Pendaftaran Anggota</title>
</head>
<body>
<?php
//Include file koneksi, untuk koneksikan ke database
//Fungsi untuk mencegah inputan karakter yang tidak sesuai
return $data;
//Cek apakah ada nilai yang dikirim menggunakan methos GET dengan nama id_anggota
$id_anggota=input($_GET["id_anggota"]);
$sql="select * from anggota where id_anggota=$id_anggota";
$data = mysqli_fetch_assoc($hasil);
//Cek apakah ada kiriman form dari method post
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$id_anggota=htmlspecialchars($_POST["id_anggota"]);
//Query update data pada tabel anggota
$sql="update anggota set
username='$username',
nama='$nama',
alamat='$alamat',
email='$email',
no_hp='$no_hp'
where id_anggota=$id_anggota";
//Mengeksekusi atau menjalankan query diatas
//Kondisi apakah berhasil atau tidak dalam mengeksekusi query diatas
if ($hasil) {
else {
echo "<div class='alert alert-danger'> Data Gagal diupdate.</div>";
?>
<h2>Update Data</h2>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
<label>Username:</label>
<input type="text" name="username" class="form-control" value="<?php echo
$data['username']; ?>" placeholder="Masukan Username" required />
</div>
<label>Nama:</label>
<input type="text" name="nama" class="form-control" value="<?php echo
$data['nama']; ?>" placeholder="Masukan Nama" required/>
</div>
<label>Alamat:</label>
<textarea name="alamat" class="form-control" rows="5" placeholder="Masukan
Alamat" required><?php echo $data['alamat']; ?></textarea>
</div>
<label>Email:</label>
<input type="email" name="email" class="form-control" value="<?php echo
$data['email']; ?>" placeholder="Masukan Email" required/>
</div>
<label>No HP:</label>
<input type="text" name="no_hp" class="form-control" value="<?php echo
$data['no_hp']; ?>" placeholder="Masukan No HP" required/>
</div>
<input type="hidden" name="id_anggota" value="<?php echo $data['id_anggota']; ?>"
/>
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Beberapa fungsi sama dengan fungsi yang sudah saya jelaskan diatas.
Untuk menampilkan data anggota yang ingin di update maka akan diambil nilai id_anggota yang
dikirim dari file index.php saat pengguna mengklik tombol update.
$id_anggota=input($_GET["id_anggota"]);
$sql="select * from anggota where id_anggota=$id_anggota";
$data = mysqli_fetch_assoc($hasil);
Nantinya data anggota akan ditampilkan pada masing-masing inputan berdasarkan fieldnya
masing-masing, untuk memasukan nilai pada form inputan kita gunakan atribut value. seperti
contoh pada sintak dibawah ini kita memasukan nilai username dari query yang dijalankan
diatas,
value="<?php echo $data['username']; ?>"
Selanjutnya ketika pengguna telah memperbaharui data anggota melalui form update lalu
mengklik tombol update, maka query update data pda tabel anggota akan dijalankan.
$sql="update anggota set
username='$username',
nama='$nama',
alamat='$alamat',
email='$email',
no_hp='$no_hp'
where id_anggota=$id_anggota";
Apabila berhasil maka halaman akan diarahkan kembali ke file index.php. Namun jika gagal
akan menampilkan pemeritahuan gagal.
if ($hasil) {
else {
echo "<div class='alert alert-danger'> Data Gagal diupdate.</div>";
Uji Coba
Tahap terakhir kita uji coba, dengan menginput data terlebih dahulu.
http://localhost/crud/create.php
Setelah semua from inputan di isi dan tombol submit diklik, maka akan tampil data yang kita
inputkan tersebut.
Selanjutnya kita akan coba untuk merubah data tersebut dengan cara klik tombol update pada
kolom aksi.
Kita coba merubah username dan nama dari yang sebelumnya usernamenya adalah dimas95
diganti menjadi dimas12 dan nama sebelumnya Setiawan Dimas diganti menjadi Setiawan
Dimas Arimurti. dan kemudan di klik tombol submit maka akan diarahkan kembali ke file
index.php dan kondisi kolom username dan nama telah berubah.
Terakhir untuk menghapus data tersebut cukup dengan menekan tombol delete maka data akan
langsung terhapus dari database.

Membuat CRUD Sederhana Dengan PHP Dan Bootstrap

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Membuat CRUD Sederhana Dengan PHP Dan Bootstrap

Diunggah oleh

Hak Cipta:

Membuat CRUD Sederhana dengan PHP dan

Untuk tampilannya kita mengggunakan framework bootstrap, komponen-komponen yang akan

Apa saja yang akan kita buat?

Apa yang kita butuhkan?

▪ Xampp untuk web server (localhost) dan database mysql

create database crud;

Buat Tabel di Database

create table anggota(

id_anggota int not null auto_increment primary key,

username varchar (50),

Membuat folder didalam htdocs

Sesuaikan saja dengan nama aplikasi yang kalian buat.

- RENAME folder bootstrap-4.5.0-dist menjadi Bootstrap

Buat file input data kedatabase (Create)

<title>Form Pendaftaran Anggota</title>

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

//Include file koneksi, untuk koneksikan ke database

//Cek apakah ada kiriman form dari method post

//Query input menginput data kedalam tabel anggota

$sql="insert into anggota (username,nama,alamat,email,no_hp) values

//Mengeksekusi/menjalankan query diatas

//Kondisi apakah berhasil atau tidak dalam mengeksekusi query diatas

echo "<div class='alert alert-danger'> Data Gagal disimpan.</div>";

<form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">

<input type="text" name="username" class="form-control" placeholder="Masukan

Username" required />

<input type="text" name="nama" class="form-control" placeholder="Masukan Nama"

<textarea name="alamat" class="form-control" rows="5"placeholder="Masukan

<input type="email" name="email" class="form-control" placeholder="Masukan

<input type="text" name="no_hp" class="form-control" placeholder="Masukan No

<button type="submit" name="submit" class="btn btn-primary">Submit</button>

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

$sql="insert into anggota (username,nama,alamat,email,no_hp) values

echo "<div class='alert alert-danger'> Data Gagal disimpan.</div>";

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

<h4>CRUD Sederhana dengan PHP dan Bootstrap</h4>

$sql="delete from anggota where id_anggota='$id_anggota' ";

//Kondisi apakah berhasil atau tidak

echo "<div class='alert alert-danger'> Data Gagal dihapus.</div>";

$sql="select * from anggota order by id_anggota desc";

while ($data = mysqli_fetch_array($hasil)) {

<td><?php echo $no;?></td>

<td><?php echo $data["username"]; ?></td>

<td><?php echo $data["nama"]; ?></td>

<td><?php echo $data["alamat"]; ?></td>

<td><?php echo $data["email"]; ?></td>

<a href="update.php?id_anggota=<?php echo

htmlspecialchars($data['id_anggota']); ?>" class="btn btn-warning" role="button">Update</a>

<a href="<?php echo

htmlspecialchars($_SERVER["PHP_SELF"]);?>?id_anggota=<?php echo $data['id_anggota']; ?>"

class="btn btn-danger" role="button">Delete</a>

<a href="create.php" class="btn btn-primary" role="button">Tambah Data</a>

$sql="select * from anggota order by id_anggota desc";

<td><?php echo $data["username"]; ?></td>

<td><?php echo $data["nama"]; ?></td>

<td><?php echo $data["alamat"]; ?></td>

<td><?php echo $data["email"]; ?></td>

<td><?php echo $data["no_hp"]; ?></td>

<a href="update.php?id_anggota=<?php echo htmlspecialchars($data['id_anggota']);

?>" class="btn btn-warning" role="button">Update</a>

<a href="<?php echo

htmlspecialchars($_SERVER["PHP_SELF"]);?>?id_anggota=<?php echo $data['id_anggota']; ?>"

class="btn btn-danger" role="button">Delete</a>

$sql="delete from anggota where id_anggota='$id_anggota' ";