Pengujian AplikasiPerbaikan BugDashboard RingkasanDokumentasiArtikel 15 dari 16
Rapikan dan Uji Coba: Pengujian Fungsi Aplikasi, Perbaikan Bug, Dashboard Ringkasan, dan Dokumentasi Aplikasi
Lewat pengujian aplikasi web, ubah proyek PHP & MySQL kamu dari “asal jalan” menjadi prototype yang layak demo.
⏱️
±12 menit
Estimasi baca
๐ฏ
Lanjut
Level
๐
2026
Tahun
Bayangkan kamu sedang demo aplikasi pendaftaran kunjungan pasien di depan dosen. Kamu klik Simpan dengan keluhan kosong… dan data tetap tersimpan. Atau lebih parah: layar putih berisi error panjang. Malu? Pasti. Padahal masalahnya bukan di kemampuan coding-mu, melainkan di langkah yang sering dilewati: pengujian aplikasi web.
Artikel ini adalah bagian ke-15 dari 16 seri Pemrograman Web D4 MIK. Kamu akan menguji fungsi aplikasi SIMKES Mini, memperbaiki bug yang ketemu, membuat dashboard ringkasan, lalu menulis dokumentasinya. Semua praktik memakai XAMPP, phpMyAdmin, dan Sublime Text dengan data pasien fiktif. Siap merapikan karyamu?
๐ฏTujuan pembelajaran (CPMK 5 · Sub-CPMK 10): mahasiswa mampu menguji fungsi aplikasi, memperbaiki kesalahan operasional, mendokumentasikan aplikasi, dan menghasilkan prototype aplikasi web sederhana untuk kebutuhan MIK.
Pengujian Aplikasi Web: Cek Tanda Vital Sebelum Aplikasi Dipakai
Di poli, perawat selalu mengecek tensi, nadi, dan suhu sebelum pasien bertemu dokter. Tujuannya sederhana: masalah ditemukan lebih awal, saat masih murah ditangani. Pengujian aplikasi web bekerja dengan logika yang sama. Kamu memeriksa “tanda vital” aplikasi, yaitu form, penyimpanan data, tampilan data, dan laporan, sebelum pengguna sungguhan menyentuhnya. Di bidang MIK ini penting, karena data kesehatan yang salah bisa berubah menjadi laporan yang salah.
Tanpa disiplin, menguji hanya berarti “klik-klik sampai kelihatan jalan”. Supaya terukur, pakai alur berikut.
๐ Rumus Alur Pengujian
Skenario → Data Uji → Hasil Diharapkan → Hasil Aktual → Status → Perbaikan → Uji Ulang
Status “Lulus” jika hasil aktual sama dengan hasil diharapkan. Jika berbeda, kamu menemukan bug.
Teknik paling cocok untuk pemula adalah black box testing: kamu menguji dari sisi pengguna tanpa membuka kodenya. Setelah gagal, barulah kamu membongkar kode untuk mencari penyebab. Berikut peta jenis pengujian yang kamu pakai di praktikum ini.
Tabel 1. Jenis pengujian aplikasi web dan contohnya di SIMKES Mini
Jenis
Yang Diperiksa
Contoh di SIMKES Mini
Black box
Fungsi dari sisi pengguna, tanpa melihat kode
Isi form kunjungan, lalu cek hasilnya di tabel
White box
Alur logika di dalam kode
Membaca kondisi validasi tanggal di PHP
Regresi
Perbaikan tidak merusak fitur lain
Uji ulang semua skenario setelah bug diperbaiki
Penerimaan pengguna (UAT)
Kesesuaian dengan kebutuhan pengguna
Teman sekelas mencoba sebagai petugas pendaftaran
๐ฅ Fakta Menarik
Kata “bug” sudah dipakai insinyur jauh sebelum era komputer. Kisah populernya: pada 1947, tim yang mengoperasikan komputer Harvard Mark II menemukan ngengat tersangkut di relay, lalu menempelkannya di buku log sebagai “bug” pertama yang benar-benar ditemukan. Sejak itu, debugging jadi istilah sehari-hari programmer.
Praktik 1: Siapkan Proyek dan Skenario Pengujian Aplikasi Web
Kamu butuh XAMPP di komputer lab Windows dan proyek SIMKES Mini dari artikel sebelumnya. Supaya semua mahasiswa mulai dari titik yang sama, kita siapkan database-nya dengan data fiktif.
1
Nyalakan layanan XAMPP
Buka XAMPP Control Panel, lalu klik Start pada Apache dan MySQL sampai modulnya berlatar hijau.
2
Buat database lewat phpMyAdmin
Buka http://localhost/phpmyadmin, klik tab SQL, tempel skrip berikut, lalu klik Go. Jalankan sekali saja agar data contoh tidak dobel.
๐ db_simkes.sql (tab SQL phpMyAdmin)
CREATE DATABASE IF NOT EXISTS db_simkes CHARACTER SET utf8mb4;
USE db_simkes;
CREATE TABLE IF NOT EXISTS pasien (
id_pasien INT AUTO_INCREMENT PRIMARY KEY,
no_rm VARCHAR(10) NOT NULL UNIQUE,
nama VARCHAR(100) NOT NULL,
tgl_lahir DATE,
jenis_kelamin ENUM('L','P')
) ENGINE=InnoDB;
CREATE TABLE IF NOT EXISTS poli (
id_poli INT AUTO_INCREMENT PRIMARY KEY,
nama_poli VARCHAR(50) NOT NULL
) ENGINE=InnoDB;
CREATE TABLE IF NOT EXISTS kunjungan (
id_kunjungan INT AUTO_INCREMENT PRIMARY KEY,
id_pasien INT NOT NULL,
id_poli INT NOT NULL,
tgl_kunjungan DATE NOT NULL,
keluhan VARCHAR(255) NOT NULL,
FOREIGN KEY (id_pasien) REFERENCES pasien(id_pasien),
FOREIGN KEY (id_poli) REFERENCES poli(id_poli)
) ENGINE=InnoDB;
-- DATA FIKTIF, bukan data pasien asli
INSERT INTO pasien (no_rm, nama, tgl_lahir, jenis_kelamin) VALUES
('RM-0001','Ani Wijaya','1995-03-12','P'),
('RM-0002','Budi Santoso','1988-07-21','L'),
('RM-0003','Citra Dewi','2018-01-05','P'),
('RM-0004','Dimas Pratama','2001-11-30','L');
INSERT INTO poli (nama_poli) VALUES ('Poli Umum'),('Poli Anak'),('Poli Gigi');
INSERT INTO kunjungan (id_pasien,id_poli,tgl_kunjungan,keluhan) VALUES
(1,1,CURDATE(),'Demam 3 hari'),
(2,1,CURDATE(),'Batuk pilek'),
(3,2,CURDATE(),'Kontrol tumbuh kembang'),
(4,3,DATE_SUB(CURDATE(), INTERVAL 1 DAY),'Sakit gigi');
3
Siapkan folder kerja
Buat folder C:\xampp\htdocs\simkes-mini, lalu buka folder itu di Sublime Text lewat File → Open Folder.
4
Buat file koneksi
Simpan kode berikut sebagai koneksi.php. Baris pertama membuat setiap kesalahan MySQL muncul sebagai pesan yang jelas, sesuai dokumentasi resmi PHP tentang mysqli_report.
Sebagai bahan uji, simpan kode berikut sebagai tambah_kunjungan.php. Ini pola yang sering ditulis pemula. Pastikan form kunjunganmu memakai nama field id_pasien, id_poli, tgl_kunjungan, dan keluhan.
Tulis skenario pengujian aplikasi web, lalu jalankan
Isi kolom Hasil Diharapkan lebih dulu, baru coba satu per satu lewat browser di http://localhost/simkes-mini/. Catat hasil aktualnya.
๐ก Tips
Dalam pengujian aplikasi web, tulis hasil yang diharapkan sebelum mencoba. Kalau tidak, otak kita cenderung menyesuaikan harapan dengan apa yang muncul di layar, lalu bug yang jelas-jelas salah terasa “sudah benar”.
Tabel 2. Skenario pengujian aplikasi web untuk modul kunjungan (hasil pada kode lama)
ID
Skenario & Data Uji
Hasil Diharapkan
Hasil Aktual
Status
TC-01
Data valid: pasien 1, Poli Umum, tanggal hari ini, keluhan “Demam 3 hari”
Muncul “Kunjungan tersimpan”, ada baris baru di tabel
Hasilnya: tiga skenario gagal. Kabar baiknya, kamu punya bukti, bukan firasat.
Praktik 2: Perbaikan Bug dari Hasil Pengujian Aplikasi Web
Bug yang ditemukan lewat pengujian aplikasi web dan punya langkah reproduksi sudah setengah sembuh. Pola kerjanya: catat, cari penyebab, perbaiki, uji ulang.
1
Catat di bug log
Buat tabel sederhana di Excel atau buku catatan: ID bug, skenario, langkah reproduksi, tingkat keparahan, dan status. Dari tabel tadi kamu punya tiga: BUG-01 keluhan kosong tersimpan, BUG-02 tanggal masa depan diterima, BUG-03 tanda kutip memicu error SQL.
2
Tampilkan error secara eksplisit
XAMPP biasanya sudah menampilkan error, tetapi menulisnya sendiri membuatmu tidak bergantung pada pengaturan komputer lab. Tambahkan dua baris ini tepat di bawah <?php pada koneksi.php.
Dua baris di atas hanya untuk komputer lab dan laptop pribadimu. Di server sungguhan, pesan error justru membocorkan nama tabel dan folder ke pengunjung. Dan jangan pernah menguji dengan data pasien asli: pakai data fiktif saja.
3
Cari penyebabnya
Baca pesan error dari baris paling atas, karena biasanya paling jujur. Untuk mengintip isi variabel, tulis sementara var_dump($_POST); exit; lalu hapus setelah selesai. Log Apache ada di C:\xampp\apache\logs\error.log. Ketiga bug punya akar yang jelas: tidak ada validasi, tidak ada cek tanggal, dan query digabung langsung dengan input.
4
Tulis ulang dengan validasi dan prepared statement
Ganti isi tambah_kunjungan.php dengan kode berikut. Prepared statement memisahkan perintah SQL dari data, cara yang dianjurkan dokumentasi PHP dan OWASP untuk mencegah SQL injection (topik artikel 14).
๐ tambah_kunjungan.php (VERSI PERBAIKAN)
<?php
require 'koneksi.php';
$id_pasien = (int) ($_POST['id_pasien'] ?? 0);
$id_poli = (int) ($_POST['id_poli'] ?? 0);
$tgl = trim($_POST['tgl_kunjungan'] ?? '');
$keluhan = trim($_POST['keluhan'] ?? '');
$errors = [];
if ($id_pasien < 1 || $id_poli < 1) $errors[] = 'Pasien dan poli wajib dipilih.';
if ($keluhan === '') $errors[] = 'Keluhan wajib diisi.';
$d = DateTime::createFromFormat('Y-m-d', $tgl);
if (!$d || $d->format('Y-m-d') !== $tgl) {
$errors[] = 'Format tanggal tidak valid.';
} elseif ($tgl > date('Y-m-d')) {
$errors[] = 'Tanggal kunjungan tidak boleh di masa depan.';
}
if ($errors) {
foreach ($errors as $e) echo '<p>' . htmlspecialchars($e) . '</p>';
exit;
}
$stmt = $koneksi->prepare(
'INSERT INTO kunjungan (id_pasien, id_poli, tgl_kunjungan, keluhan) VALUES (?, ?, ?, ?)'
);
$stmt->bind_param('iiss', $id_pasien, $id_poli, $tgl, $keluhan);
$stmt->execute();
echo 'Kunjungan tersimpan';
5
Uji ulang semua skenario
Jalankan TC-01 sampai TC-04 lagi, termasuk yang tadinya lulus. Inilah uji regresi: memastikan perbaikan tidak merusak fitur lain. Hasil yang diharapkan: keempatnya berstatus Lulus, dan tanda kutip pada TC-04 tersimpan utuh.
๐ Analisis: Apa yang Berubah Setelah Bug Diperbaiki?
Sebelum (kode lama) • Input langsung masuk query • Keluhan kosong lolos • Tanggal 2099 lolos • Tanda kutip merusak SQL
Sesudah (kode perbaikan) • Input dibersihkan dan divalidasi • Pesan error jelas untuk pengguna • Tanggal dicek terhadap hari ini • Data dikirim lewat prepared statement
Praktik 3: Dashboard Ringkasan Data Kunjungan Pasien
Dashboard itu seperti papan informasi di ruang tunggu: sekali lirik, petugas tahu kondisi hari ini. Teknisnya, dashboard memakai fungsi agregat SQL seperti COUNT() dan GROUP BY untuk meringkas banyak baris menjadi beberapa angka.
1
Buat dashboard.php
Simpan kode ini di folder simkes-mini.
๐ dashboard.php
<?php
require 'koneksi.php';
$totalPasien = $koneksi->query('SELECT COUNT(*) AS n FROM pasien')->fetch_assoc()['n'];
$hariIni = $koneksi->query('SELECT COUNT(*) AS n FROM kunjungan
WHERE tgl_kunjungan = CURDATE()')->fetch_assoc()['n'];
$perPoli = $koneksi->query('SELECT p.nama_poli, COUNT(k.id_kunjungan) AS jumlah
FROM poli p
LEFT JOIN kunjungan k ON k.id_poli = p.id_poli
GROUP BY p.id_poli, p.nama_poli
ORDER BY jumlah DESC');
?>
<h1>Dashboard SIMKES Mini</h1>
<p>Total pasien: <b><?= $totalPasien ?></b></p>
<p>Kunjungan hari ini: <b><?= $hariIni ?></b></p>
<table border="1" cellpadding="8">
<tr><th>Poli</th><th>Jumlah Kunjungan</th></tr>
<?php while ($r = $perPoli->fetch_assoc()): ?>
<tr>
<td><?= htmlspecialchars($r['nama_poli']) ?></td>
<td><?= $r['jumlah'] ?></td>
</tr>
<?php endwhile; ?>
</table>
2
Buka di browser
Akses http://localhost/simkes-mini/dashboard.php. Kalau kamu membukanya tepat setelah impor SQL awal (belum ada data uji), hasilnya: total pasien 4, kunjungan hari ini 3, Poli Umum 2, Poli Anak 1, Poli Gigi 1.
3
Cross-check dengan phpMyAdmin
Jalankan SELECT COUNT(*) FROM kunjungan WHERE tgl_kunjungan = CURDATE(); di tab SQL. Angkanya harus sama dengan dashboard. Cocok berarti TC-05 Lulus.
⚡ Insight Penting
Kenapa memakai LEFT JOIN, bukan JOIN biasa? Dengan JOIN biasa, poli yang belum punya kunjungan hilang dari laporan. Dengan LEFT JOIN, poli itu tetap tampil dengan angka 0, dan nol pun informasi. Dalam laporan MIK, data yang “hilang diam-diam” lebih berbahaya daripada angka nol.
Praktik 4: Dokumentasi Aplikasi Web agar Mudah Dipahami
Dokumentasi adalah rekam medis untuk aplikasi. Tanpa catatan, “dokter” berikutnya, termasuk kamu sendiri bulan depan, harus menebak-nebak riwayatnya. Cukup lima bagian: tujuan, cara menjalankan, fitur, hasil pengujian aplikasi web, dan catatan perubahan.
Buat file README.md di Sublime Text. Tulis seakan-akan pembacanya belum pernah melihat aplikasimu.
๐ README.md
# SIMKES Mini
Prototype pendaftaran kunjungan pasien (DATA FIKTIF).
## Kebutuhan
- XAMPP (Apache, PHP, MySQL) di Windows
- Sublime Text
## Cara Menjalankan
1. Salin folder ke C:\xampp\htdocs\simkes-mini
2. Start Apache dan MySQL di XAMPP
3. Impor db_simkes.sql lewat phpMyAdmin
4. Buka http://localhost/simkes-mini/dashboard.php
## Fitur
- Input kunjungan dengan validasi
- Dashboard ringkasan kunjungan
## Hasil Pengujian
Lihat docs/bug-log.md (5 skenario, semua lulus)
## Changelog
- v0.2: perbaikan BUG-01 s.d. BUG-03, tambah dashboard
- v0.1: input kunjungan
3
Simpan bukti pengujian
Tekan Windows + Shift + S untuk mengambil tangkapan layar hasil tiap skenario, lalu simpan di docs/screenshot-uji. Dosen akan lebih percaya pada bukti daripada pada kata “sudah saya tes”.
๐ก Tips
Minta teman menjalankan aplikasimu hanya dengan membaca README. Di langkah mana dia buntu, di situlah dokumentasimu perlu diperbaiki.
Error yang Sering Muncul & Cara Mengatasinya
Selama pengujian aplikasi web, beberapa pesan error hampir pasti kamu temui. Simpan tabel ini sebagai contekan.
Tabel 3. Error umum saat pengujian aplikasi web dengan PHP dan MySQL
Pesan / Gejala
Penyebab
Cara Mengatasi
Access denied for user 'root'@'localhost' atau koneksi ditolak
MySQL belum Start, atau password di koneksi.php tidak sesuai
Start MySQL di XAMPP. Pada instalasi default, password root kosong
Unknown column 'nama' in 'field list'
Nama kolom di query berbeda dengan di tabel
Buka tab Structure di phpMyAdmin, samakan ejaannya
Undefined array key "keluhan"
Field tidak terkirim: atribut name salah, atau file dibuka langsung lewat URL
Periksa atribut name di form; pakai operator ?? pada PHP
headers already sent
Ada output (spasi atau echo) sebelum header()
Pindahkan header() ke atas, hapus spasi sebelum tag pembuka PHP
foreign key constraint fails
id_pasien atau id_poli belum ada di tabel induk
Pastikan data pasien dan poli sudah tersimpan lebih dulu
Halaman putih kosong
Error tidak ditampilkan
Aktifkan display_errors, lalu cek log Apache
Dashboard menampilkan 0 padahal data ada
Tanggal data tidak sama dengan tanggal komputer
Jalankan SELECT CURDATE(); dan bandingkan dengan data
Latihan Mandiri
Kerjakan ketiga tugas ini. Semuanya melatih Sub-CPMK 10: pengujian aplikasi web, perbaikan bug, dan dokumentasi.
1
Perluas skenario uji
Tambahkan minimal 5 skenario baru untuk fitur edit, hapus, dan pencarian pasien, misalnya mencari nama yang tidak ada. Jalankan, isi hasil aktual, temukan sedikitnya satu bug, perbaiki, lalu catat di bug log.
2
Perkaya dashboard
Tambahkan dua ringkasan: jumlah pasien per jenis kelamin dan jumlah kunjungan 7 hari terakhir. Bandingkan hasilnya dengan query manual di phpMyAdmin.
3
Lengkapi dokumentasi dan uji pengguna
Tambahkan bagian Fitur dan Batasan pada README, tulis panduan pengguna satu halaman, lalu minta temanmu mencoba (UAT mini) dan catat tiga masukannya. Hasilnya jadi bahan demo di artikel 16.
๐
Kesimpulan: Pengujian Aplikasi Web Membuat Tugasmu Layak Demo
Pengujian terukur mengikuti alur skenario → data uji → hasil diharapkan → hasil aktual → status.
Bug yang dicatat dengan langkah reproduksi lebih cepat diperbaiki, dan uji regresi menjaga fitur lain tetap aman.
Dashboard dengan COUNT() dan GROUP BY memberi gambaran cepat, asal selalu dicocokkan dengan phpMyAdmin.
README, bug log, dan changelog membuat aplikasi mudah dipahami orang lain.
Kebiasaan menjalankan pengujian aplikasi web inilah yang membedakan “tugas yang jalan” dengan prototype yang siap dipresentasikan di artikel berikutnya. Bug apa yang paling bikin kamu geregetan selama praktik? Ceritakan di komentar, dan bagikan artikel ini ke temanmu yang sedang berjuang dengan debugging.
saifiahmada.com adalah blog belajar programming Indonesia, membahas lengkap materi bahasa pemrograman: code HTML, CSS, Bootstrap, Desain, PHP, MySQL, coding Java, Query, SQL, dan dunia linux
No comments:
Post a Comment