Membuat

CRUD Sederhana
Persiapkan perangkat yang dibutuhkan:
Text Editor : SublimeText3
Browser : Google Chrome
Web server : Xampp

Bagi yang belum punya, silakan download terlebih dahulu di link berikut

SublimeText3
https://download.sublimetext.com/Sublime%20Text%20Build
%203211%20x64%20Setup.exe
Xampp 32bit
https://xamppguide.com/dls/xampp-32-bit.exe
Xampp 64bit
https://downloadsapachefriends.global.ssl.fastly.net/8.1.1/xampp-windows-x64-
8.1.1-2-VS16-installer.exe?from_af=true

Pastikan perangkat yang dibutuhkan telah terinstall di pc / laptop.

Kita akan coba membuat aplikasi seperti gambar di bawah ini

Penjelasan singkat mengenai CRUD.

CRUD adalah sebuah singkatan dari Create Read Update Delete,
dimana kita dapat membuat, membaca, mengedit dan menghapus sebuah
data. Kalau kemarin kita hanya fokus dengan HTML dan CSS, maka di
materi CRUD ini kita akan membahas sedikit tentang Database dan juga
PHP. Untuk bagian database, saya harap pelajaran pak Fadhil sudah
kalian pahami dengan baik terutama tentang query SQL.

1
PWPB – SMK KESUMA BANGSA 2 DEPOK
 Dalam pembuatan CRUD ini kita akan membuat 2 tahap, yang
pertama kita buat dulu databasenya kemudian kita akan buat file PHPnya.
Sekarang kita masuk ke tahap yang pertama.

1. Membuat Database
Buka Xampp yang telah kamu install, lalu klik start pada bagian
Apache dan MySQL. Kemudian klik Admin, pada baris MySQL

Setelah itu akan terbuka web browser yang akan mengarahkan ke

alamat localhost/phpmyadmin
Secara umum, tampilannya akan seperti ini

2
PWPB – SMK KESUMA BANGSA 2 DEPOK
 Lalu kita klik tombol Baru atau New di sebelah kiri, kita akan
membuat databasenya. Pada Database Name, beri nama crud_db

Lalu klik tombol Buat atau Create. Sampai disini kita telah
membuat databasenya, lalu di dalam database kita akan membuat
tabel user dengan jumlah kolomnya 4. Lalu klik Kirim atau Go.

Setelah itu, kita isi fieldnya seperti gambar di bawah ini

Perhatikan kolom yang diberi tanda warna merah saja. Kalau

sudah, klik tombol Simpan atau Save. Maka, hasilnya akan seperti
ini

3
PWPB – SMK KESUMA BANGSA 2 DEPOK
 Sampai disini kita telah selesai membuat Databasenya.
Atau kita bisa menggunakan cara lain yaitu dengan membuat
databasenya melalui query SQL:

/* Create Database and Table */

create database crud_db;

use crud_db;

CREATE TABLE `users` (

`id` int(11) NOT NULL auto_increment,
`name` varchar(100),
`email` varchar(100),
`mobile` varchar(15),
PRIMARY KEY (`id`)
);

selanjutnya kita akan mencoba mengisi databasenya terlebih

dahulu.
Klik tombol Tambahkan atau Insert pada menu di atas

4
PWPB – SMK KESUMA BANGSA 2 DEPOK
 Kemudian isi datanya pada kolom Nilai atau Value
Kalau sudah, klik Kirim atau Go. Jika data berhasil ditambahkan,
maka akan muncul notif bertuliskan 1 baris ditambahkan atau 1
row inserted. Kalau kita Klik tombol Jelajahi atau Browse, maka
datanya akan tampil seperti ini

Pada PhpMySql ini kita memang bisa membuat data, melihat,

mengedit dan menghapus data seperti pada gambar di atas. Tapi
kita akan coba membuat agar proses CRUD tadi bisa lewat
aplikasi web yang kita buat.
Sekarang kita masuk ke tahap kedua, yaitu membuat file PHPnya.

2. Membuat File PHP

Berbeda dengan file HTML yang sebelumnya pernah kita buat,

kita bisa menyimpannya di dalam folder manapun. Untuk file PHP
ini kita harus menempatkannya di dalam folder tertentu agar
terbaca oleh server lokal. Maka dari itu silakan buka path
C:\xampp\htdocs
Lalu buat Folder baru, beri nama BelajarCRUD.

5
PWPB – SMK KESUMA BANGSA 2 DEPOK
 Pertama, agar file PHP dan database kita terhubung, kita
membutuhkan 1 file PHP yang akan menghubungkan database
dengan file PHP yang akan kita buat.

Buka text editor yang ada di laptop / pc, disini saya menggunakan
SublimeText3.

6
PWPB – SMK KESUMA BANGSA 2 DEPOK
 Lalu ketik kode berikut di sublime:
<?php
$databaseHost = 'localhost';
$databaseName = 'crud_db';
$databaseUsername = 'root';
$databasePassword = '';

$mysqli = mysqli_connect($databaseHost, $databaseUsername,

$databasePassword, $databaseName);
?>

Simpan dengan nama config.php

Pastikan file disimpan di dalam folder BelajarCRUD tadi.

Kembali lagi ke sublime, tekan tombol kombinasi CTRL+N untuk

membuat lembar kerja baru.
Ketik kode berikut ini:
<?php
include_once("config.php");
$result = mysqli_query($mysqli, "SELECT * FROM users ORDER BY
id ASC");
?>

<html>
<head>
<title>Homepage</title>
</head>

<body>
<a href="add.php">Tambah User</a><br/><br/>

<table width='80%' border=1>

<tr>
<th>Name</th> <th>Nomor Telpon</th> <th>Email</th>
<th>Update</th>
</tr>
<?php
while($user_data = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>".$user_data['name']."</td>";
echo "<td>".$user_data['mobile']."</td>";
echo "<td>".$user_data['email']."</td>";
echo "<td><a href='edit.php?id=$user_data[id]'
>Edit</a> | <a href='delete.php?id=$user_data[id]'
>Delete</a></td></tr>";
}
?>

7
PWPB – SMK KESUMA BANGSA 2 DEPOK
 </table>
</body>
</html>
Simpan dengan nama index.php

Sekarang kita coba buka melalui Browser, ketikkan alamat:

Localhost/BelajarCRUD
Maka akan tampil halaman index yang menampilkan data dari
database yang sudah kita buat

Untuk tombol Edit dan Delete belum bisa diklik karena kita belum
membuat file PHPnya. Dan kita juga masih belum bisa
menambahkan data.

Agar bisa diedit dan didelete, kita kembali lagi ke sublime. Tekan
tombol kombinasi CTRL + N untuk membuat lembar kerja baru,
lalu ketikan kode program di bawah ini
<?php
include_once("config.php");

if(isset($_POST['update']))
{
$id = $_POST['id'];
$name=$_POST['name'];
$mobile=$_POST['mobile'];
$email=$_POST['email'];

// update user data

$result = mysqli_query($mysqli, "UPDATE users SET
name='$name',email='$email',mobile='$mobile' WHERE id=$id");

// Redirect ke index lagi

header("Location: index.php");
}
?>

<?php
$id = $_GET['id'];

$result = mysqli_query($mysqli, "SELECT * FROM users WHERE

id=$id");

while($user_data = mysqli_fetch_array($result))
{

8
PWPB – SMK KESUMA BANGSA 2 DEPOK
 $name = $user_data['name'];
$email = $user_data['email'];
$mobile = $user_data['mobile'];
}
?>

<html>
<head>
<title>Edit User Data</title>
</head>

<body>
<a href="index.php">Home</a>
<br/><br/>

<form name="update_user" method="post" action="edit.php">

<table border="0">
<tr>
<td>Name</td>
<td><input type="text" name="name" value=<?php echo
$name;?>></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" value=<?php
echo $email;?>></td>
</tr>
<tr>
<td>Mobile</td>
<td><input type="text" name="mobile" value=<?php
echo $mobile;?>></td>
</tr>
<tr>
<td><input type="hidden" name="id" value=<?php echo
$_GET['id'];?>></td>
<td><input type="submit" name="update"
value="Update"></td>
</tr>
</table>
</form>
</body>
</html>
Simpan dengan nama edit.php

9
PWPB – SMK KESUMA BANGSA 2 DEPOK
 Kembali lagi ke sublime, tekan CTRL + N. Lalu ketikkan kode
program di bawah ini,
<html>
<head>
<title>Tambah Users</title>
</head>

<body>
<a href="index.php">Go to Home</a>
<br/><br/>

<form action="add.php" method="post" name="form1">

<table width="25%" border="0">
<tr>
<td>Name</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>Mobile</td>
<td><input type="text" name="mobile"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="Kirim"
value="Add"></td>
</tr>
</table>
</form>

<?php
if(isset($_POST['Kirim'])) {
$name = $_POST['name'];
$mobile = $_POST['mobile'];
$email = $_POST['email'];

include_once("config.php");

$result = mysqli_query($mysqli, "INSERT INTO

users(name,email,mobile)
VALUES('$name','$email','$mobile')");

echo "User berhasil ditambahkan. <a href='index.php'>View

Users</a>";
}
?>
</body>
</html>
Simpan dengan nama add.php
Terakhir, kita buat file untuk delete.

10
PWPB – SMK KESUMA BANGSA 2 DEPOK
 Kembali ke sublime, tekan CTRL+N lalu ketikkan kode program di
bawah

<?php
include_once("config.php");

$id = $_GET['id'];
$result = mysqli_query($mysqli, "DELETE FROM users WHERE
id=$id");
header("Location:index.php");
?>
Simpan dengan nama delete.php

11
PWPB – SMK KESUMA BANGSA 2 DEPOK