demo prototype aplikasi web mik

🎤💻🏥

Prototype Aplikasi Web Demo & Presentasi PHP & MySQL Proyek Akhir MIK

Showtime! Presentasi dan Demo Prototype Aplikasi Web Sederhana untuk Kebutuhan MIK

Praktikum penutupmu: siapkan data fiktif, uji kesiapan sistem, susun skenario, lalu tampil percaya diri.

⏱️ ±12 menit

Estimasi baca

🎯 Lanjut

Level

📅 2026

Tahun

Bayangkan kamu berdiri di depan kelas, proyektor menyala, dosen penguji menatapmu, lalu halaman aplikasimu menampilkan tulisan Fatal error. Jantung langsung lari maraton? Tenang, hampir semua mahasiswa pernah ada di posisi itu.

Kabar baiknya, demo yang mulus bukan soal keberuntungan, tapi persiapan. Di artikel penutup seri Pemrograman Web D4 MIK ini, kamu akan belajar menyiapkan, menguji, dan mempresentasikan prototype aplikasi web MIK lengkap dengan data pasien fiktif, kode PHP & MySQL, dan skenario demo 10 menit. Kalau kamu mahasiswa D4 MIK semester 5 yang ingin tampil meyakinkan tanpa drama, artikel ini memang untukmu.

📚 Artikel 16 dari 16 — seri “Pemrograman Web D4 MIK”

Capaian belajar (CPMK 5, Sub-CPMK 10): setelah praktik ini kamu mampu menguji fungsi aplikasi, memperbaiki kesalahan operasional, mendokumentasikan aplikasi, dan menghasilkan prototype aplikasi web sederhana untuk kebutuhan MIK.

Mengenal Prototype Aplikasi Web MIK: Apa yang Sebenarnya Dinilai Saat Demo?

Anggap prototype seperti maket rumah milik arsitek. Maket itu belum bisa ditinggali, tapi calon pemilik sudah bisa melihat tata ruang dan memberi masukan. Begitu juga prototype aplikasi web MIK: belum dipakai untuk pasien sungguhan, tapi fungsi intinya, misalnya mendaftarkan pasien, mencatat kunjungan poli, dan melihat ringkasan, sudah bisa dicoba.

📌 Definisi Kerja

Prototype aplikasi web MIK adalah versi awal aplikasi web yang fungsi intinya sudah berjalan, memakai data fiktif, dan dibuat untuk didemonstrasikan serta dievaluasi sebelum dikembangkan menjadi sistem sungguhan.

Data Fiktif Siap + Fungsi Teruji + Skenario Jelas + Dokumentasi Rapi = Demo Meyakinkan

Dosen penguji umumnya melihat lima hal berikut. Simpan tabel ini sebagai daftar periksa pribadimu:

Aspek	Yang Diperlihatkan	Contoh di MIK
Fungsi	Fitur inti jalan tanpa error	Tambah pasien, catat kunjungan
Kesesuaian kebutuhan	Menjawab masalah nyata MIK	Cari pasien lewat No. RM
Kualitas data	Data valid, konsisten, fiktif	No. RM unik, tanggal lahir benar
Dokumentasi	Orang lain bisa memakai dan merawat	Panduan instalasi, hasil uji
Penyampaian	Alur jelas, waktu terjaga	Demo 10 menit + tanya jawab

🔥 Fakta Menarik

Kata prototype berasal dari bahasa Yunani prōtotypos, gabungan prōtos (pertama) dan typos (bentuk). Jadi prototype memang “bentuk pertama”: wajar belum sempurna, asalkan fungsi intinya bisa dicoba dan dievaluasi.

🔍 Analisis: Demo Gagal vs Demo Meyakinkan

😰 Demo yang Gagal

Data asal ketik (“asdf”, “test123”). Baru dijalankan 5 menit sebelum tampil. Klik sana-sini tanpa alur. Saat error muncul, langsung panik. Tidak punya cadangan.

😎 Demo yang Meyakinkan

Data fiktif realistis. Sudah gladi resik. Alur berurutan seperti cerita. Error ditangani tenang karena ada Plan B: backup database dan tangkapan layar.

Praktik 1: Siapkan Data Fiktif dan Uji Kesiapan Prototype Aplikasi Web MIK

Koki profesional selalu melakukan mise en place: mengecek bahan dan kompor sebelum restoran buka. Kita lakukan hal yang sama untuk prototype aplikasi web MIK. Studi kasusnya tetap “SIMPOLI mini” (pasien, poli, kunjungan) dan semua data di bawah ini fiktif.

⚡ Insight Penting

Rekam medis sungguhan bersifat rahasia (lihat Permenkes No. 24 Tahun 2022 tentang Rekam Medis). Karena itu prototype wajib memakai data fiktif. Menambahkan kata “(fiktif)” pada alamat menunjukkan bahwa kamu paham etika data kesehatan.

1

Nyalakan XAMPP. Buka XAMPP Control Panel, klik Start pada Apache dan MySQL sampai keduanya berwarna hijau.

2

Buka phpMyAdmin. Ketik http://localhost/phpmyadmin di browser, lalu pilih tab SQL.

3

Jalankan SQL data demo. Salin kode SQL di bawah, tempel ke kotak SQL, lalu klik tombol Kirim (atau Go).

4

Buat file pemeriksa. Di Sublime Text, buat file baru, tempel kode PHP kedua, lalu simpan sebagai cek_demo.php di C:\xampp\htdocs\prototype_mik\.

5

Jalankan di browser. Buka http://localhost/prototype_mik/cek_demo.php dan baca hasilnya.

📄 data_demo.sql (phpMyAdmin → tab SQL)

CREATE DATABASE IF NOT EXISTS db_prototype_mik
  CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
USE db_prototype_mik;

CREATE TABLE IF NOT EXISTS poli (
  id_poli   INT AUTO_INCREMENT PRIMARY KEY,
  nama_poli VARCHAR(50) NOT NULL
);

CREATE TABLE IF NOT EXISTS pasien (
  id_pasien INT AUTO_INCREMENT PRIMARY KEY,
  no_rm     VARCHAR(10) NOT NULL UNIQUE,
  nama      VARCHAR(80) NOT NULL,
  tgl_lahir DATE NOT NULL,
  alamat    VARCHAR(150)
);

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(150),
  FOREIGN KEY (id_pasien) REFERENCES pasien(id_pasien),
  FOREIGN KEY (id_poli)   REFERENCES poli(id_poli)
);

-- Reset data demo (HAPUS isi 3 tabel, lalu isi ulang)
SET FOREIGN_KEY_CHECKS = 0;
TRUNCATE TABLE kunjungan;
TRUNCATE TABLE pasien;
TRUNCATE TABLE poli;
SET FOREIGN_KEY_CHECKS = 1;

INSERT INTO poli (nama_poli) VALUES
  ('Poli Umum'), ('Poli Gigi'), ('Poli Anak');

INSERT INTO pasien (no_rm, nama, tgl_lahir, alamat) VALUES
  ('RM-0001', 'Siti Aminah',   '1995-03-12', 'Jl. Melati No. 1 (fiktif)'),
  ('RM-0002', 'Budi Santoso',  '1988-07-21', 'Jl. Kenanga No. 2 (fiktif)'),
  ('RM-0003', 'Dewi Lestari',  '2015-11-05', 'Jl. Mawar No. 3 (fiktif)');

INSERT INTO kunjungan (id_pasien, id_poli, tgl_kunjungan, keluhan) VALUES
  (1, 1, '2026-10-05', 'Demam dan batuk'),
  (2, 2, '2026-10-06', 'Sakit gigi geraham'),
  (3, 3, '2026-10-06', 'Kontrol tumbuh kembang'),
  (1, 1, '2026-10-08', 'Kontrol ulang');

⚠️ Perhatian

Perintah TRUNCATE menghapus seluruh isi tabel dan tidak bisa di-undo. Jalankan hanya di database demo db_prototype_mik, bukan di database tugasmu yang lain. Kalau ragu, ekspor dulu.

📄 htdocs/prototype_mik/cek_demo.php

<?php
// cek_demo.php - Pemeriksa kesiapan demo (data fiktif)
$host = "localhost";
$user = "root";
$pass = "";
$db   = "db_prototype_mik";
$file_wajib = ["index.php", "dashboard.php"]; // sesuaikan dengan file prototype-mu

mysqli_report(MYSQLI_REPORT_OFF);
$hasil = [];

$koneksi = @mysqli_connect($host, $user, $pass, $db);
$hasil[] = ["Koneksi ke database $db", $koneksi ? true : false];

if ($koneksi) {
    foreach (["pasien", "poli", "kunjungan"] as $tabel) {
        $q  = mysqli_query($koneksi, "SELECT COUNT(*) AS total FROM $tabel");
        $ok = $q && mysqli_fetch_assoc($q)["total"] > 0;
        $hasil[] = ["Tabel $tabel berisi data", $ok];
    }
}

foreach ($file_wajib as $f) {
    $hasil[] = ["File $f tersedia", file_exists(__DIR__ . "/" . $f)];
}

$lolos = 0;
?>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Cek Kesiapan Demo</title>
</head>
<body style="font-family:Arial;padding:20px">
  <h2>Cek Kesiapan Demo Prototype MIK</h2>
  <table border="1" cellpadding="8" cellspacing="0">
    <?php foreach ($hasil as $baris):
        if ($baris[1]) { $lolos++; } ?>
    <tr>
      <td><?= htmlspecialchars($baris[0]) ?></td>
      <td><?= $baris[1] ? "✅ OK" : "❌ GAGAL" ?></td>
    </tr>
    <?php endforeach; ?>
  </table>
  <p><b>Skor: <?= $lolos ?> / <?= count($hasil) ?></b></p>
</body>
</html>

Hasil yang diharapkan: tabel berisi enam baris pemeriksaan (koneksi, tiga tabel, dua file) yang semuanya bertanda ✅ OK, dengan skor 6 / 6. Kalau dashboard.php belum ada, ubah daftar $file_wajib sesuai nama file prototype-mu. Tanda ❌ bukan musibah, justru itu tujuannya: masalah ketahuan sebelum penguji melihatnya.

Satu catatan keamanan: query di cek_demo.php hanya memakai nama tabel tetap dari kodemu sendiri, bukan input pengguna. Begitu query memakai data dari form, wajib pakai prepared statement (lihat OWASP SQL Injection Prevention Cheat Sheet dan PHP Manual di bagian referensi).

💡 Tips

Sebelum tampil, ekspor databasenya: di phpMyAdmin pilih db_prototype_mik → tab Ekspor → metode Cepat → format SQL → Kirim. Simpan file di flashdisk dan cloud. Kalau database bermasalah saat demo, kamu tinggal mengimpornya lagi dalam hitungan detik.

Praktik 2: Susun Skenario Demo Prototype Aplikasi Web MIK Berdurasi 10 Menit

Demo yang baik itu seperti trailer film: bukan memutar seluruh film, tapi menunjukkan cerita yang membuat orang paham. Jadi jangan keliling semua menu. Ceritakan perjalanan satu pasien fiktif dari pendaftaran sampai muncul di ringkasan. Berikut alurnya:

[Buka App] --> [Daftarkan Pasien] --> [Catat Kunjungan]
                                              |
                  [Tanya Jawab] <-- [Dashboard] <-----+

Menit	Bagian	Yang Kamu Lakukan
0–1	Pembuka	Sebut masalah MIK yang kamu selesaikan
1–2	Gambaran sistem	Jelaskan alur dan teknologi: XAMPP, PHP, MySQL
2–6	Demo inti	Daftarkan pasien fiktif baru, catat kunjungan, cari lewat No. RM
6–8	Dashboard & pengujian	Tunjukkan ringkasan dan tabel hasil uji fungsi
8–9	Dokumentasi	Perlihatkan panduan pemakaian dan catatan perbaikan bug
9–10	Penutup	Sampaikan keterbatasan jujur dan rencana pengembangan

Agar skenario itu benar-benar siap dipakai, lakukan gladi resik berikut:

1

Tulis naskah enam poin sesuai tabel di atas, satu kalimat pembuka untuk tiap poin.

2

Latihan dengan stopwatch. Targetnya selesai di bawah 10 menit, termasuk jeda berbicara.

3

Siapkan data input demo. Tulis di kertas satu pasien fiktif baru (misalnya RM-0004) yang belum ada di database, supaya input langsung tidak bentrok dengan No. RM yang sudah ada.

4

Siapkan Plan B: file backup SQL, tangkapan layar tiap langkah, dan rekaman layar singkat.

5

Cek ulang 15 menit sebelum tampil. Nyalakan XAMPP, jalankan cek_demo.php, tutup tab lain, lalu perbesar zoom browser dengan Ctrl + + agar terbaca dari bangku belakang.

Error yang Sering Muncul Saat Demo Prototype Aplikasi Web MIK & Cara Mengatasinya

Murphy’s Law berlaku di laboratorium komputer: yang bisa error, akan error, biasanya tepat saat dosen menatapmu. Kenali daftar ini supaya kamu tinggal mengeceknya satu per satu:

Gejala	Penyebab Umum	Cara Mengatasi
Apache gagal Start (port 80 dipakai)	Aplikasi lain, misalnya IIS atau server web lain, memakai port 80	Hentikan aplikasi itu, atau ubah Listen 80 menjadi Listen 8080 lewat Config → httpd.conf, lalu akses http://localhost:8080/
MySQL shutdown unexpectedly	Port 3306 dipakai MySQL lain atau proses sebelumnya belum tertutup	Tutup instance MySQL lain (cek di Services Windows), lalu Start ulang dan baca pesan di tombol Logs
Access denied for user 'root'@'localhost'	Password MySQL di kode berbeda dengan di server	Samakan variabel $pass dengan password MySQL di komputermu
Table 'db.pasien' doesn't exist	Salah nama database atau SQL belum dijalankan	Cek nama database di phpMyAdmin, lalu jalankan ulang SQL data demo
Cannot modify header information - headers already sent	Ada echo, spasi, atau baris kosong sebelum header() atau session_start()	Pindahkan header() ke paling atas dan hapus spasi sebelum <?php
Warning: Undefined array key	Atribut name di form salah atau halaman dibuka tanpa kirim form	Samakan name di form dengan $_POST['...'], dan cek dengan isset()
404 Not Found	File tidak ada di htdocs atau salah nama folder di URL	Pastikan file ada di htdocs\prototype_mik\ dan URL cocok dengan nama folder serta file

Setiap kali kamu memperbaiki salah satu error di atas, catat di log perbaikan: gejala, penyebab, perbaikan, dan tanggal. Catatan itu langsung menjadi bahan dokumentasi dan bukti bahwa kamu mampu memperbaiki kesalahan operasional.

Latihan Mandiri: Selesaikan Prototype Aplikasi Web MIK-mu

Tugas 1 — Uji Fungsi. Buat tabel pengujian minimal 8 skenario (kolom: fitur, langkah uji, hasil diharapkan, hasil aktual, status Lulus/Gagal). Jalankan semuanya di prototype-mu dan isi hasilnya apa adanya.

Tugas 2 — Perbaiki & Catat. Pilih minimal 2 kegagalan dari Tugas 1 (atau dari tabel error di atas), perbaiki, lalu tulis log perbaikan: kondisi sebelum, penyebab, dan kondisi sesudah.

Tugas 3 — Dokumentasi & Gladi Demo. Tulis README singkat (cara menyalakan XAMPP, mengimpor SQL, menjalankan aplikasi, daftar fitur, keterbatasan). Lalu presentasikan demo 10 menit di depan temanmu dan minta dia mengajukan 3 pertanyaan penguji.

🏁 Kesimpulan: Selamat, Seri Ini Tuntas!

Kamu sampai di artikel ke-16, penutup seri Pemrograman Web D4 MIK. Ringkasnya: prototype aplikasi web MIK adalah versi awal yang fungsinya bisa diuji dan memakai data fiktif. Siapkan datanya dengan SQL, periksa kesiapannya dengan cek_demo.php, ceritakan lewat skenario 10 menit, kenali error umum, dan simpan Plan B.

Prototype aplikasi web MIK yang kamu demokan hari ini adalah bukti bahwa kamu bisa mengubah masalah layanan kesehatan menjadi solusi digital. Bagian demo mana yang paling bikin deg-degan buatmu? Ceritakan di kolom komentar, dan bagikan artikel ini ke temanmu yang sebentar lagi tampil.

💬 Tulis Komentar 📤 Bagikan via WhatsApp

📖 Referensi

• PHP Documentation Group. PHP Manual: MySQL Improved Extension (mysqli). php.net/manual/en/book.mysqli.php
• PHP Documentation Group. PHP Manual: htmlspecialchars. php.net/manual/en/function.htmlspecialchars.php
• PHP Documentation Group. PHP Manual: mysqli prepared statements. php.net/manual/en/mysqli.quickstart.prepared-statements.php
• OWASP. SQL Injection Prevention Cheat Sheet. cheatsheetseries.owasp.org
• Oracle. MySQL 8.0 Reference Manual. dev.mysql.com/doc/refman/8.0/en/
• Apache Friends. XAMPP. apachefriends.org
• Kementerian Kesehatan RI. Peraturan Menteri Kesehatan Nomor 24 Tahun 2022 tentang Rekam Medis.

🏷️ Tag:

#PemrogramanWeb #D4MIK #PrototypeAplikasi #DemoAplikasi #ProyekAkhirMIK

📂 Label:

Prototype Aplikasi Web MIK Demo & Presentasi Aplikasi Showtime Proyek Akhir

📚

Pemrograman Web D4 MIK

Artikel ini bagian dari seri “Pemrograman Web D4 MIK”. Lihat semua artikel dan urutan belajarnya di daftar isi.

Buka Daftar Isi Artikel

⬅️ Artikel Sebelumnya

Artikel 15: “Rapikan dan Uji Coba: Pengujian Fungsi Aplikasi, Perbaikan Bug, Dashboard Ringkasan, dan Dokumentasi Aplikasi”

Artikel Selanjutnya 🏁

Ini artikel terakhir

pengujian dokumentasi aplikasi web

🧪🐞📊📚

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.

📄 koneksi.php

<?php
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
$koneksi = new mysqli('localhost', 'root', '', 'db_simkes');
$koneksi->set_charset('utf8mb4');

5

Simpan versi lama form proses

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.

📄 tambah_kunjungan.php (VERSI LAMA)

<?php
require 'koneksi.php';
$id_pasien = $_POST['id_pasien'];
$id_poli   = $_POST['id_poli'];
$tgl       = $_POST['tgl_kunjungan'];
$keluhan   = $_POST['keluhan'];
$koneksi->query("INSERT INTO kunjungan (id_pasien, id_poli, tgl_kunjungan, keluhan)
                 VALUES ($id_pasien, $id_poli, '$tgl', '$keluhan')");
echo 'Kunjungan tersimpan';

6

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	Data tersimpan	Lulus
TC-02	Keluhan dikosongkan	Ditolak, pesan “Keluhan wajib diisi”	Data kosong tetap tersimpan	Gagal
TC-03	Tanggal kunjungan 2099-01-01	Ditolak karena tanggal masa depan	Data tersimpan	Gagal
TC-04	Keluhan: Nyeri dada 'ringan' (memakai tanda kutip)	Tersimpan apa adanya tanpa error	Fatal error: SQL syntax	Gagal
TC-05	Buka dashboard.php	Angka sama dengan query di phpMyAdmin	Belum bisa diuji	Tertunda

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.

📄 koneksi.php (tambahan)

ini_set('display_errors', '1');
error_reporting(E_ALL);

⚠️ Perhatian

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.

1

Rapikan struktur folder

Pisahkan file program dari bukti pengujian.

📁 Struktur folder

simkes-mini/
├── koneksi.php
├── tambah_kunjungan.php
├── dashboard.php
├── README.md
└── docs/
    ├── bug-log.md
    └── screenshot-uji/

2

Tulis README.md

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.

💬 Tulis komentar📤 Bagikan via WhatsApp

Tag topik

#PemrogramanWeb#D4MIK#PengujianAplikasi#DebuggingPHP#DokumentasiAplikasi

Label artikel

Pengujian Aplikasi WebPerbaikan Bug PHPDashboard RingkasanDokumentasi AplikasiPrototype Aplikasi MIK

📚 Referensi

• PHP Manual: Prepared statements (mysqli)
• PHP Manual: mysqli_driver::$report_mode
• PHP Manual: error_reporting
• MySQL 8.0 Reference Manual: Aggregate (GROUP BY) Functions
• OWASP: SQL Injection

📘

Pemrograman Web D4 MIK

Lihat daftar isi lengkap seri 16 artikel, dari dasar HTML sampai demo prototype.

Buka Daftar Isi Artikel →

⬅️

Artikel Sebelumnya

Artikel 14

Amankan Data Pasien: Hak Akses Pengguna, Hash Password, Perlindungan SQL Injection dan XSS

➡️

Artikel Selanjutnya

Artikel 16

Showtime! Presentasi dan Demo Prototype Aplikasi Web Sederhana untuk Kebutuhan MIK