Tugas 10: Simple CRUD (Create, Read, Update & Delete) Aplikasi Pendaftaran Siswa Using HTML & PHP
Pada tugas ini saya menggunakan API mysqli untuk menghubungkan PHP dan MySQL sebagai database.
Langkah 1: Menyiapkan Database, PHP & phpMyAdmin
Untuk database sendiri saya menggunakan Docker Compose, kurang lebih seperti ini untuk setupnya:
version: '3.7'
services:
php-httpd:
build:
context: .
dockerfile: Dockerfile
container_name: app
ports:
- 80:80
volumes:
- ./www:/var/www/html
mysql:
image: mysql
container_name: db
volumes:
- vol-mysql:/var/lib/mysql
environment:
MYSQL_ALLOW_EMPTY_PASSWORD: "no"
MYSQL_ROOT_PASSWORD: "secret"
MYSQL_USER: "crud"
MYSQL_PASSWORD: "crudpass"
MYSQL_DATABASE: "pweb"
tty: true
command:
- "--log_bin_trust_function_creators=1"
phpmyadmin:
image: phpmyadmin/phpmyadmin
links:
- mysql:db
ports:
- 8181:80
volumes:
vol-mysql:
Menambahkan ekstensi mysqli
FROM php:7.4-apache
RUN docker-php-ext-install mysqli
Langkah 2: Membuat tabel
CREATE TABLE `pweb`.`calon_siswa` (
`id` INT NOT NULL AUTO_INCREMENT ,
`nama` VARCHAR(64) NOT NULL ,
`alamat` VARCHAR(255) NOT NULL ,
`jenis_kelamin` VARCHAR(16) NOT NULL ,
`agama` VARCHAR(16) NOT NULL ,
`sekolah_asal` VARCHAR(64) NOT NULL ,
PRIMARY KEY (`id`)
) ENGINE = InnoDB;
INSERT INTO `calon_siswa` (`id`, `nama`, `alamat`, `jenis_kelamin`, `agama`, `sekolah_asal`) VALUES(NULL, 'John Doe', '123 Main Street, Anytown', 'laki-laki', 'Kristen Katolik', 'SMPN 1 Anytown'),(NULL, 'Jane Smith', '456 Oak Avenue, Othertown', 'perempuan', 'Kristen Protestan', 'SMPN 2 Othertown'),(NULL, 'Ahmad', 'Jl. Kenanga No. 7, Jakarta', 'laki-laki', 'Islam', 'SMPN 10 Jakarta');Langkah 3: Membuat Koneksi ke Database MySQL
Untuk membuat koneksi ke database kita perlu membuat file php, dengan name config.php. Untuk kredensial sesuaikan dengan environment di Docker Compose:
<?php
$server = "db";
$user = "root";
$password = "secret";
$nama_database = "pweb";
$db = mysqli_connect($server, $user, $password, $nama_database);
if( !$db ){
die("Gagal terhubung dengan database: " . mysqli_connect_error());
}
?>
Langkah 4: Membuat halaman index.php
Membuat halaman utama
<!DOCTYPE html>
<html>
<head>
<title>Pendaftaran Siswa Baru | SMK Coding</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h3>Pendaftaran Siswa Baru</h3>
<h1>SMK Coding</h1>
</header>
<h4>Menu</h4>
<nav>
<ul>
<li><a href="form-daftar.php">Daftar Baru</a></li>
<li><a href="list-siswa.php">Pendaftar</a></li>
</ul>
</nav>
<?php if(isset($_GET['status'])): ?>
<p>
<?php
if($_GET['status'] == 'sukses'){
echo "Pendaftaran siswa baru berhasil!";
} else {
echo "Pendaftaran gagal!";
}
?>
</p>
<?php endif; ?>
</body>
</html>
Langkah 5: Menampilkan data
Lalu kita perlu membuat halaman dengan nama list-siswa.php, dimana halaman ini nanti digunakan untuk menampilkan data dari siswa. Halaman ini terhubung ke database melalui file config.php.
<?php include("config.php"); ?>
<!DOCTYPE html>
<html>
<head>
<title>Pendaftaran Siswa Baru | SMK Coding</title>
</head>
<body>
<header>
<h3>Siswa yang sudah mendaftar</h3>
</header>
<nav>
<a href="form-daftar.php">[+] Tambah Baru</a>
</nav>
<br>
<table border="1">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Jenis Kelamin</th>
<th>Agama</th>
<th>Sekolah Asal</th>
<th>Tindakan</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM calon_siswa";
$query = mysqli_query($db, $sql);
while($siswa = mysqli_fetch_array($query)){
echo "<tr>";
echo "<td>".$siswa['id']."</td>";
echo "<td>".$siswa['nama']."</td>";
echo "<td>".$siswa['alamat']."</td>";
echo "<td>".$siswa['jenis_kelamin']."</td>";
echo "<td>".$siswa['agama']."</td>";
echo "<td>".$siswa['sekolah_asal']."</td>";
echo "<td>";
echo "<a href='form-edit.php?id=".$siswa['id']."'>Edit</a> | ";
echo "<a href='hapus.php?id=".$siswa['id']."'>Hapus</a>";
echo "</td>";
echo "</tr>";
}
?>
</tbody>
</table>
<p>Total: <?php echo mysqli_num_rows($query) ?></p>
</body>
</html>Langkah 6: Menambahkan data
Untuk menambahkan data baru ke list siswa, kita perlu membuat file form-daftar.php, dimana untuk action di formnya menggunakan method POST
<!DOCTYPE html>
<html>
<head>
<title>Formulir Pendaftaran Siswa Baru | SMK Coding</title>
</head>
<body>
<header>
<h3>Formulir Pendaftaran Siswa Baru</h3>
</header>
<form action="proses-pendaftaran.php" method="POST">
<fieldset>
<p>
<label for="nama">Nama: </label>
<input type="text" name="nama" placeholder="nama lengkap" />
</p>
<p>
<label for="alamat">Alamat: </label>
<textarea name="alamat"></textarea>
</p>
<p>
<label for="jenis_kelamin">Jenis Kelamin: </label>
<label><input type="radio" name="jenis_kelamin" value="laki-laki"> Laki-laki</label>
<label><input type="radio" name="jenis_kelamin" value="perempuan"> Perempuan</label>
</p>
<p>
<label for="agama">Agama: </label>
<select name="agama">
<option>Islam</option>
<option>Kristen</option>
<option>Hindu</option>
<option>Budha</option>
<option>Atheis</option>
</select>
</p>
<p>
<label for="sekolah_asal">Sekolah Asal: </label>
<input type="text" name="sekolah_asal" placeholder="nama sekolah" />
</p>
<p>
<input type="submit" value="Daftar" name="daftar" />
</p>
</fieldset>
</form>
</body>
</html>Lalu buat file proses-pendaftaran.php
<?php
include("config.php");
// cek apakah tombol daftar sudah diklik atau blum?
if(isset($_POST['daftar'])){
// ambil data dari formulir
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$jk = $_POST['jenis_kelamin'];
$agama = $_POST['agama'];
$sekolah = $_POST['sekolah_asal'];
// buat query
$sql = "INSERT INTO calon_siswa (nama, alamat, jenis_kelamin, agama, sekolah_asal) VALUE ('$nama', '$alamat', '$jk', '$agama', '$sekolah')";
$query = mysqli_query($db, $sql);
// apakah query simpan berhasil?
if( $query ) {
// kalau berhasil alihkan ke halaman index.php dengan status=sukses
header('Location: index.php?status=sukses');
} else {
// kalau gagal alihkan ke halaman indek.php dengan status=gagal
header('Location: index.php?status=gagal');
}
} else {
die("Akses dilarang...");
}
?>
Langkah 7: Menghapus data
Untuk menghapus data siswa pada list, perlu membuat file baru dengan nama hapus.php. Dimana untuk menghapus data kita bisa menggunakan id (GET by ID).
<?php
include("config.php");
if( isset($_GET['id']) ){
// ambil id dari query string
$id = $_GET['id'];
// buat query hapus
$sql = "DELETE FROM calon_siswa WHERE id=$id";
$query = mysqli_query($db, $sql);
// apakah query hapus berhasil?
if( $query ){
header('Location: list-siswa.php');
} else {
die("gagal menghapus...");
}
} else {
die("akses dilarang...");
}
?>
Langkah 8: Update data
Tambahkan file form-edit.php
<?php
include("config.php");
// kalau tidak ada id di query string
if( !isset($_GET['id']) ){
header('Location: list-siswa.php');
}
//ambil id dari query string
$id = $_GET['id'];
// buat query untuk ambil data dari database
$sql = "SELECT * FROM calon_siswa WHERE id=$id";
$query = mysqli_query($db, $sql);
$siswa = mysqli_fetch_assoc($query);
// jika data yang di-edit tidak ditemukan
if( mysqli_num_rows($query) < 1 ){
die("data tidak ditemukan...");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Formulir Edit Siswa | SMK Coding</title>
</head>
<body>
<header>
<h3>Formulir Edit Siswa</h3>
</header>
<form action="proses-edit.php" method="POST">
<fieldset>
<input type="hidden" name="id" value="<?php echo $siswa['id'] ?>" />
<p>
<label for="nama">Nama: </label>
<input type="text" name="nama" placeholder="nama lengkap" value="<?php echo $siswa['nama'] ?>" />
</p>
<p>
<label for="alamat">Alamat: </label>
<textarea name="alamat"><?php echo $siswa['alamat'] ?></textarea>
</p>
<p>
<label for="jenis_kelamin">Jenis Kelamin: </label>
<?php $jk = $siswa['jenis_kelamin']; ?>
<label><input type="radio" name="jenis_kelamin" value="laki-laki" <?php echo ($jk == 'laki-laki') ? "checked": "" ?>> Laki-laki</label>
<label><input type="radio" name="jenis_kelamin" value="perempuan" <?php echo ($jk == 'perempuan') ? "checked": "" ?>> Perempuan</label>
</p>
<p>
<label for="agama">Agama: </label>
<?php $agama = $siswa['agama']; ?>
<select name="agama">
<option <?php echo ($agama == 'Islam') ? "selected": "" ?>>Islam</option>
<option <?php echo ($agama == 'Kristen') ? "selected": "" ?>>Kristen</option>
<option <?php echo ($agama == 'Hindu') ? "selected": "" ?>>Hindu</option>
<option <?php echo ($agama == 'Budha') ? "selected": "" ?>>Budha</option>
<option <?php echo ($agama == 'Atheis') ? "selected": "" ?>>Atheis</option>
</select>
</p>
<p>
<label for="sekolah_asal">Sekolah Asal: </label>
<input type="text" name="sekolah_asal" placeholder="nama sekolah" value="<?php echo $siswa['sekolah_asal'] ?>" />
</p>
<p>
<input type="submit" value="Simpan" name="simpan" />
</p>
</fieldset>
</form>
</body>
</html>Lalu buat file baru dengan nama proses-edit.php, untuk memvalidasi update-an.
<?php
include("config.php");
// cek apakah tombol simpan sudah diklik atau blum?
if(isset($_POST['simpan'])){
// ambil data dari formulir
$id = $_POST['id'];
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$jk = $_POST['jenis_kelamin'];
$agama = $_POST['agama'];
$sekolah = $_POST['sekolah_asal'];
// buat query update
$sql = "UPDATE calon_siswa SET nama='$nama', alamat='$alamat', jenis_kelamin='$jk', agama='$agama', sekolah_asal='$sekolah' WHERE id=$id";
$query = mysqli_query($db, $sql);
// apakah query update berhasil?
if( $query ) {
// kalau berhasil alihkan ke halaman list-siswa.php
header('Location: list-siswa.php');
} else {
// kalau gagal tampilkan pesan
die("Gagal menyimpan perubahan...");
}
} else {
die("Akses dilarang...");
}
?>
Tampilan halaman pendaftaran
Sumber Referensi: https://www.petanikode.com/tutorial-php-mysql/
Komentar
Posting Komentar