BAB 3
PERANCANGAN APLIKASI
3.1 Pemodelan Sistem
Diagram pohon dan merancang sketsa yang tepat adalah sebuah langkah awal yang dapat dilakukan dalam memulai persiapan sebelum menuangkan ide perancangan. Halaman awal
yang digunakan dalam aplikasi ini dibuat dengan nama ”home”, pada halaman ini terdapat link menuju ke halaman selanjutnya. Adapun diagram pohon untuk perancangan aplikasi
pengajaran berbantuan komputer dengan tutorial pelajaran bilologi untuk Mahasiswa kedokteran dapat dilihat pada Gambar 3.1 dibawah ini
Gambar 3.1 Diagram Pohon Perancangan Aplikasi Pengajaran Berbantuan Komputer Mengenai Anatomi dan Kerusakan Mata Manusia
User
Home
Materi Latihan
Contoh Soal Profil
Kerusakan pada Mata
Anatomi dan Fungsi
Lapisan pada Retina
Sirkulasi Retina
Tes Mata
Perancangan Aplikasi Pengajaran Berbantuan Komputer Mengenai Anatomi dan Kerusakan Mata Manusia
Universitas Sumatera Utara
3.2 Data Flow Diagram
DFD Data Flow Diagram adalah sebuah alat yang digunakan untuk membuat suatu model aplikasi dengan menggambarkan sistem sebagai suatu jaringan proses fungsional yang
dihubungkan satu sama lain dengan alur data. DFD ini sering disebut juga dengan nama Bubble Chart atau diagram alur kerja. DFD berfungsi apabila fungsi sistem merupakan
bagian yang lebih penting dan kompleks dari pada data yang digunakan untuk menjelaskan aliran data dan transformasi data yang bergerak dari pemasukan data hingga keluar.
Untuk memudahkan dalam tahap pembacaan DFD, maka penggambaran DFD disusun sesuai dengan tingkatan atau level dari atas sampai ke bawah, yaitu :
1. Diagram Level 0
Diagram level 0 adalah diagram paling atas yang terdiri dari suatu proses. Hal yang digambarkan dalam diagram level 0 ini adalah hubungan terminator dengan sistem dan juga
sistem dalam suatu proses, yang direpresentasikan dengan lingkaran tunggal yang dapat mewakili keseluruhan dari sistem.
2. Diagram Level 1
Diagram level 1 adalah diagram yang menggambarkan proses utama dari DFD. Hal yang dapat digambarkan dalam Diagram level 1 adalah hubungan entity, proses, alur data dan
data store.
3. Diagram Level 2
Diagram level 2 adalah penguraian dalam proses yang ada pada diagram level 1. Diagram yang paling rendah dan tidak dapat diuraikan lagi.
Universitas Sumatera Utara
Diagram level 0,1 dan 2 pada perancangan aplikasi pengajaran berbantuan komputer dengan model tutorial mengenai anatomi mata tingkat universitas dapat dilihat pada gambar
3.2; 3.3 ; 3.4 dan 3.5
Gambar 3.2 Diagram Level 0
Output Pilihan Pilihan Menu
USER
Aplikasi PBK Pelajaran
Biologi Anatomi Mata
Fungsi
Universitas Sumatera Utara
Gambar 3.3 Diagram Level 1
output_pilihan output_pilihan
output_pilihan output_piliha
n
Pilihan_menu
Pilihan_menu
Pilihan_menu
Pilihan_menu Pilhan_menu
output_pilihan
USER
Tombol Profil
T.2
Tombol Materi
T.3 Tombol
Menu T.1
Tombol Latihan
T.5 Tombol
Contoh Soal
T.4
Universitas Sumatera Utara
Gambar 3.4 Diagram Level 2 untuk Proses Tombol Materi
Pilihan_menu
L api
san R
et ina
S ir
kul as
i R etina
K er
us aka
n M
at a
A na
to m
i F
ungs i
ma ta
Pilihan_menu
Pilihan_menu
Pilihan_menu
Pilihan_menu Tombol
materi T.3
Tombol Anatomi
Fungsi Mata T.3.1
Tombol Kerusakan
Mata T.3.2
Tombol Lapisan
Retina T.3.3
Tombol Sikulasi
Retina T.3.4
user
Tombol Tes Mata
T.3.5 Pilihan_menu
Universitas Sumatera Utara
Gambar 3.5 Diagram level 2 untuk proses Tombol latihan
3.3 Perancangan Tampilan