Modul ini merupakan modul praktikum yang membahas dasar pembuatan aplikasi web dinamis
berbasis client-server yang mengacu pada Paket Soal Uji Kompetensi SMK program keahlian Rekayasa
Perangkat Lunak (RPL).
Untuk memulai pengerjaan pembuatan aplikasi ini, diasumsikan bahwa program aplikasi yang
dibutuhkan sudah tersedia dan siap digunakan, meliputi Apache web server, PHP engine, MySQL dan
Macromedia Dreamweaver. Pada modul ini paket web server yang digunakan adalah WAMPServer2.0c.
Sebelumnya, ada baiknya jika kita bahas dulu garis besar dari aplikasi yang akan dibuat ini. Pada
aplikasi ini terdapat 2 kategori hak akses, diantaranya adalah Administrator yang memegang kendali
penuh pada aplikasi ini, terutama pada bagian pengolahan data yang berhubungan dengan data rawat
jalan. Disamping itu ada kategori akses sebagai user atau pengunjung biasa, dalam hal ini pengunjung
hanya bisa melihat atau mencari daftar pasien yang menjalani proses rawat jalan.
Pada proses pengerjaannya, terdapat beberapa bagian proses diantaranya :
a. Pembuatan database meliputi table, relasi dan pengisian masing-masing tabel.
b. Membuat struktur hierarki folder dan nama-nama subfolder aplikasi.
c. Membuat design/layout dan menuliskan kode-kode program berbasis bahasa pemrogramanan PHP.
Selanjutnya pada bagian inilah akan diuraikan langkah-langkah pengerjaan aplikasi web dinamis
Rumah sakit berbasis client-server (intranet).
1. Pembuatan Database pada program MySQL
Langkah awal yang harus dilakukan sebelum membangun sistem ini adalah membuat
perancangan database yang akan digunakan. Database ini nantinya akan terbagi kedalam beberapa
tabel yang dijadikan sebagai tempat penyimpanan berbagai informasi mengenai pasien,dokter, obat
dan yang berhubungan dengannya.
Berikut ini adalah struktur tabel dan relasinya.
Dalam pembuatan database dan struktur tabel terdapat dua cara, yang pertama dengan
menggunakan MySQL Command Line/Console atau yang kedua dengan aplikasi bantuan yaitu
phpMyAdmin. Pada modul ini, cara yang dibahas adalah menggunakan aplikasi phpMyAdmin.
Berikut ini adalah langkah-langkahnya :
Eko Sugiharto 1
a. Aktifkan terlebih dahulu paket WAMPServer, sehingga terlihat ikon pada System Tray di
pojok kanan bawah layar monitor.
b. Aktifkan web browser seperti Internet Explorer, Mozilla Firefox atau lainnya.
c. Pada bagian address, ketik localhost/phpmyadmin
d. Pada bagian Create new database ketik nama database misalnya RumahSakit, kemudian klik
tombol Create.
e. Pada bagian Create new table, ketik nama tabel penulis di bagian Name.
f. Pada bagian Number of fields, isi dengan nilai 5, kemudian klik tombol Go.
2 : isi jumlah fields
h. Atur KodePsn sebagai Primary key dengan meng-klik ikon di sebelah kanan layar seperti
contoh dibawah ini.
Eko Sugiharto 2
Sebelumnya klik terlebih dahulu Database: RumahSakit di bagian atas layar, kemudian
buatlah 7 buah tabel sesuai dengan ketentuan berikut ini.
klik Database
Eko Sugiharto 3
Membuat Halaman index.php
Untuk memulai pembuatan halaman utama Administrator, lakukan langkah-langkah
berikut ini :
1) Aktifkan terlebih dahulu program aplikasi Macromedia Dreamweaver 8
2) Pada pilihan Create New, klik pada pilihan PHP
klik PHP
4) Ubah mode tampilan menjadi Code, dengan meng-klik Code di bagian kiri
Eko Sugiharto 4
Membuat halaman login.html
Untuk pembuatan halaman login.html, berikut ini langkah-langkahnya :
1) Buat halaman baru dengan cara: klik File – New
2) Pada bagian Category: pilih Basic page, pada bagian Basic page: pilih HTML, kemudian
klik tombol Create 2 : pilih HTML
1 : pilih Basic
page
Eko Sugiharto 5
6) Pada bagian Properties, atur Align menjadi Center
7) Pada baris pertama, atur terlebih dahulu tampilan menjadi seperti berikut ini
8) Simpan pointer pada baris kedua, kemudian ubah Common menjadi Form
1 : ubah
menjadi
Forms
Eko Sugiharto 6
11) Ubah Form menjadi Common
Eko Sugiharto 7
19) Ulangi langkah no. 16 sampai 18 untuk pembuatan Textfield yang kedua dengan
pengaturan sebagai berikut
Eko Sugiharto 8
else
{
echo “<div align=center><strong>Admin Id atau Password
salah!</strong></div>”;
include “login.html”;
exit;
}
?>
Eko Sugiharto 9
Berikutnya adalah membuat halaman menu_utama.php yang berisi perintah untuk
menampilkan menu yang dimiliki oleh Administrator. Berikut ini adalah langkah-langkah
pembuatannya :
1) Buatlah file baru dengan tipe PHP
2) Kemudian sisipkan kode berikut ini diantara tag Body
<?php
require("../include/session.php");
require("../include/koneksi.php");
$menu=$_POST[‘lstMenu’];
$Input=$_POST[‘btnInput’];
$Edit=$_POST[‘btnEdit’];
$Laporan=$_POST[‘btnLaporan’];
$Logout=$_POST[‘btnLogout’];
require_once "menu.html";
echo “<hr>”;
// Dikerjakan apabila tombol Input di-klik
if ($Input)
{
// memeriksa Form (droplist ) menu
if(!isset($menu)) $menu='';
if($menu==’pasien’) include "in_pasien.html";
}
// di kerjakan apabila tombol Edit di-klik
else if ($Edit)
{
// memeriksa Form (droplist ) menu
if(!isset($menu)) $menu='';
if($menu==’pasien’) include “olah_pasien.php”;
}
//dikerjakan apabila tombol Laporan di-klik
else if ($Laporan)
{
// memeriksa Form (droplist ) menu
if(!isset($menu)) $menu='';
if($menu==’pasien’) include “lap_pasien.php”;
}
// dikerjakan apabila tombol Logout di-klik
else if ($Logout)
{
require_once "logout.php";
}
?>
3) Simpan di folder admin dengan nama menu_utama.php
Selanjutnya adalah membuat tampilan menu untuk Administrator. Berikut ini adalah
langkah-langkah pembuatannya :
1) Buatlah file baru dengan kategori Basic page bertipe HTML
2) Ubah mode tampilan menjadi Design
3) Buatlah tabel dengan ketentuan sebagai berikut :
Eko Sugiharto 10
4) Ubah properti Align menjadi Center untuk mengatur posisi tabel menjadi di tengah
5) Pastikan pointer berada di dalam tabel, kemudian sisipkan komponen Form dan atur
bagian Properties seperti berikut ini :
6) Kemudian buatlah tabel di dalam area form tadi dengan ketentuan sebagai berikut :
Eko Sugiharto 11
7) Kemudian gabungkan kolom pada baris pertama dengan cara blok 4 kolom tersebut,
kemudian di bagian properties klik ikon Merge selected cells using spans
1 : blok 4 kolom
8) Lakukan hal yang sama untuk menggabungkan kolom pada baris kedua.
9) Pada baris pertama, ketik teks Pengelolaan Halaman Administrator, dan atur warna
background-nya
10) Pada baris kedua, tambahkan List/Menu
11) Atur bagian properti name menjadi lstMenu, kemudian klik tombol List Values...
12) Isi sesuai dengan ketentuan sebagai berikut :
Item Label Value
--> Pilih bagian yang ingin dikelola <-- bkn_pilihan
--------------------------------------------------- bkn_pilihan
Pasien pasien
Dokter dokter
Poliklinik poliklinik
Obat obat
Resep resep
Pendaftaran pendaftaran
Pembayaran pembayaran
13) Buatlah 4 buah Button di baris ketiga dengan ketentuan sebagai berikut :
Button Name Value
btnInput Input Data
btnEdit Edit Data
btnLaporan Laporan
btnLogout Logout
14) Hingga tampilan akhirnya bisa dilihat seperti contoh di bawah ini
Eko Sugiharto 12
Langkah selanjutnya adalah membuat halaman Input Data yang merupakan interface
atau antarmuka untuk melakukan input data. Ada 7 halaman Input Data yaitu :
in_pasien.html
in_dokter.php
in_poliklinik.html
in_obat.html
in_resep.php
in_pendaftaran.php
in_pembayaran.php
3) Atur posisi tabel menjadi Center, kemudian pada baris pertama ketikkan teks INPUT DATA
PASIEN, sekaligus atur warna latarbelakangnya
6) Kemudian buatlah tabel di dalam area form yang telah dibuat sebelumnya dengan
ketentuan sebagai berikut :
Eko Sugiharto 13
7) Atur lebar kolom sesuai kebutuhan dan ketikkan teks yang diperlukan, khusus untuk kolom
kedua, ketiklah : pada setiap sel-nya
8) Tambahkan Textfield di bagian Kode, kemudian atur bagian properties seperti berikut ini :
9) Tambahkan Textfield di bagian Nama, kemudian atur bagian properties seperti berikut ini :
10) Tambahkan List/Menu di bagian Jenis Kelamin, kemudian atur bagian properties seperti
berikut ini :
Eko Sugiharto 14
11) Masih di bagian List/Menu lstJK, klik tombol List Values..., kemudian tambahkan Item
Label seperti contoh berikut ini :
12) Pada bagian Initially selected klik Laki-laki untuk dijadikan pilihan pertama pada Jenis
Kelamin
13) Tambahkan Textfield di bagian Umur, kemudian atur bagian properties seperti berikut ini :
14) Tambahkan Textfield di bagian No. Telepon, kemudian atur bagian properties seperti
berikut ini :
15) Tambahkan Textarea di bagian Alamat, kemudian atur bagian properties seperti berikut ini:
16) Tambahkan Button di bagian bawah, kemudian atur bagian properties seperti berikut ini :
Eko Sugiharto 15
Selanjutnya adalah membuat halaman antarmuka untuk menentukan data mana yang
ingin diperbaharui maupun dihapus. Berikut ini adalah halaman-halaman yang akan kita buat:
olah_pasien.php
olah_dokter.php
olah_poliklinik.php
olah_obat.php
olah_resep.php
olah_pendaftaran.php
olah_pembayaran.php
3) Atur posisi tabel menjadi Center, kemudian pada baris pertama ketikkan teks OLAH DATA
PASIEN, sekaligus atur warna latar belakangnya
Eko Sugiharto 16
6) Kemudian buatlah tabel di dalam area form yang telah dibuat sebelumnya dengan
ketentuan sebagai berikut :
7) Gabungkan 2 (dua) kolom pada baris pertama sehingga tampilannya menjadi seperti
berikut ini :
8) Kemudian tambahkan List/Menu, lalu atur bagian properti name menjadi lstPasien, pada
bagian List Values... isi sesuai dengan ketentuan sebagai berikut :
Item Label Value
--> Tentukan Nama Pasien <-- bkn_pilihan
------------------------------------------- bkn_pilihan
9) Tambahkan Button di bagian kiri, kemudian atur bagian properties seperti berikut ini :
10) Tambahkan Button di bagian kanan, kemudian atur bagian properties seperti berikut ini :
Eko Sugiharto 17
12) Tambahkan kode program di bagian lstPasien untuk mengambil data pasien dari tabel
Pasien, dengan cara klik lstPasien, kemudian ubah mode tampilan menjadi Code
13) Kemudian sisipkan kode program berikut ini diantara tag <select> :
Catatan :
Hilangkan tanda kutip (“) diantara
bkn_pilihan dan selected
Selanjutnya adalah membuat halaman antarmuka atau form untuk proses update data.
Namun secara prinsip dan tampilan, hampir sama dengan antarmuka form input data. Yang
membedakan hanyalah jika form input data semua komponen form semuanya kosong,
sedangkan form update data semua komponen sudah terisi dengan data yang telah diinput
sebelumnya untuk selanjutnya akan kita update atau perbaharui jika memang diperlukan.
Berikut ini adalah halaman-halaman yang akan kita buat:
ed_pasien.php
ed_dokter.php
ed_poliklinik.php
ed_obat.php
ed_resep.php
ed_pendaftaran.php
ed_pembayaran.php
Eko Sugiharto 18
6) Klik btnSimpan untuk melakukan proses perubahan. Ubah properti Button name menjadi
btnUpdate dan Value menjadi Update
7) Ubah tampilan menjadi mode Code, kemudian sisipkan kode php setelah <body> seperti
contoh berikut ini:
8) Tambahkan kode value=”<?php echo “$KodePsn”; ?>” pada objek txtKode sehingga
menjadi seperti berikut ini :
10) Tambahkan value=”<?php echo “$UmurPsn”; ?>” pada objek txtUmur sehingga menjadi
seperti berikut ini :
11) Tambahkan value=”<?php echo “$TeleponPsn”; ?>” pada objek txtTelp sehingga
menjadi seperti berikut ini :
12) Sisipkan kode <?php echo “$AlamatPsn”; ?> pada objek textarea txtAlamat sehingga
menjadi seperi berikut ini :
13) Terakhir lakukan penyimpanan setelah melakukan seluruh proses modifikasi sebelumnya.
Eko Sugiharto 19
exe_dokter.php
exe_poliklinik.php
exe_obat.php
exe_resep.php
exe_pendaftaran.php
exe_pembayaran.php
Eko Sugiharto 20
Membuat File Laporan
Selanjutnya adalah membuat halaman untuk menampilkan data yang telah diinput
sebelumnya atau biasa disebut halaman report. Berikut ini adalah halaman yang akan dibuat :
lap_pasien.php
lap_dokter.php
lap_poliklinik.php
lap_obat.php
lap_resep.php
lap_pendaftaran.php
lap_pembayaran.php
Eko Sugiharto 21
5) Sisipkan kembali tabel baru di baris kedua pada tabel pertama dengan ketentuan seperti
berikut ini :
6) Ketik teks di masing-masing kolom tabel dan atur lebar kolom sesuai dengan kebutuhan
sehingga hasilnya seperti contoh berikut ini :
7) Ubah mode tampilan menjadi Code, kemudian sisipkan kode php setelah tag <body>
seperti berikut ini :
8) Kemudian sisipkan kembali kode php diantara tag penutup </tr> pertama dan tag pembuka
<tr> yang kedua seperti contoh berikut ini :
Eko Sugiharto 22
Membuat file logout.php
Terakhir adalah membuat halaman/file logout yang berfungsi untuk menghapus data yang
tersimpan di variabel session setiap kali berhasil melakukan proses login. File ini berfungsi untuk
keamanan data/halaman yang telah kita buat sebelumnya agar setiap kali telah melakukan
proses logout, beberapa halaman yang penting tidak dapat diakses sebelum melakukan proses
login ulang.
Berikut ini adalah langkah-langkah pembuatan file logout.php :
1) Tambahkan sebuah halaman baru bertipe PHP
2) Ubah mode tampilan menjadi Code, kemudian ketik kode berikut ini :
<?php
echo “<center><b>Anda telah Logout dari Sistem!</b></center>”;
session_unset();
session_destroy():
include “login.html”;
?>
3) Kemudian simpan di folder admin dengan nama logout.php
Eko Sugiharto 23