RANCANG BANGUN APLIKASI KLINIK BERBASIS ANDROID RONA AGUSYANA 41511110011 PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS ILMU KOMPUTER UNIVERSITAS MERCU BUANA JAKARTA 2016
RANCANG BANGUN APLIKASI KLINIK BERBASIS ANDROID Laporan Tugas Akhir Diajukan Untuk Melengkapi Salah Satu Syarat Memperoleh Gelar Sarjana Komputer Oleh : RONA AGUSYANA 41511110011 PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS ILMU KOMPUTER UNIVERSITAS MERCU BUANA JAKARTA 2016
LEMBAR PERNYATAAN Yang bertanda tangan dibawah ini: NIM : 41511110011 Nama : RONA AGUSYANA Judul Skripsi : RANCANG BANGUN APLIKASI KLINIK BERBASIS ANDROID Menyatakan bahwa skripsi tersebut diatas adalah hasil karya saya sendiri dan bukan plagiat. Apabila ternyata ditemukan didalam laporan skripsi saya terdapat unsur plagiat, maka saya siap untuk mendapatkan sanksi akademik yang terkait dengan hal tersebut. Jakarta,... Rona Agusyana ii
LEMBAR PERSETUJUAN NIM : 41511110011 Nama : RONA AGUSYANA Judul Skripsi : RANCANG BANGUN APLIKASI KLINIK BERBASIS ANDROID SKRIPSI INI TELAH DIPERIKSA DAN DISETUJUI JAKARTA,. Dr. Ida Nurhaida, MT Pembimbing Sabar Rudiarto, S.Kom.,M.Kom. Kaprodi Teknik Informatika Nia Kusuma Wardhani, S.Kom.,MM. Koord. Tugas Akhir Teknik Informatika iii
KATA PENGANTAR Alhamdulillahirabbil'alamin, Segala pujian hanyalah kepunyaan Allah SWT. Selawat serta salam saya curahkan kepada junjungan Nabi Muhammad SAW. Segala rahmat dan karunianya, serta untuk semua ketetapannya sehingga penulis dapat menyelesaikan laporan tugas akhir ini sebagai salah satu syarat untuk menyelesaikan program studi strata satu pada Jurusan Teknik Informatika Universitas Mercu Buana. Penulis menyadari segala yang terdapat dalam laporan ini masih jauh dari kata sempurna. Penulis membuka sebesar-besarnya segala kritik serta saran yang dapat mendorong kemajuan di masa depan. Bantuan, bimbingan dan motivasi dari semua pihak sehingga laporan tugas akhir dapat diselesaikan, segala hormat saya mengucapkan banyak terima kasih kepada : 1. Ibu Dr. Ida Nurhaida, MT., selaku pembimbing tugas akhir pada Jurusan Teknik Informatika Universitas Mercu Buana. Membimbing saya dengan penuh kesabaran dan memberikan selalu motivasi kepada saya. 2. Bapak Sabar Rudiarto, S.Kom., M.Kom., selaku Kepala Program Studi pada Jurusan Teknik Informatika Universitas Mercu Buana. 3. Ibu Nia Kusuma Wardhani S.Kom,. MM, selaku Koordinator Tugas Akhir pada Jurusan Teknik Informatika Universitas Mercu Buana. 4. Seluruh Dosen Teknik Informatika Mercu Buana yang telah memberikan ilmu yang membantu dalam penulisan tugas akhir ini. 5. Orang tua saya, ayah dan ibu yang selalu mendoakan saya tanpa henti. Keluarga saya yang pengertian untuk menyelesaikan tugas akhir ini. 6. Angkatan Umb TI XIX yang selalu saling mendukung. Rekan satu kerja saya yang selalu memberikan motivasi dan bantuan kepada saya untuk segera menyelesaikan tugas akhir ini. Semoga Allah SWT membalas kebaikan dan selalu mencurahkan hidayah serta taufiknya, Amin. Jakarta, 25 januari 2016 Rona Agusyana iv
v
vi
DAFTAR ISI LEMBAR PERNYATAAN... ii LEMBAR PERSETUJUAN... iii KATA PENGANTAR... iv ABSTRACT... v ABSTRAK... vi DAFTAR ISI... vii DAFTAR GAMBAR... x DAFTAR TABEL... xiii DAFTAR LAMPIRAN... xiv 1. Report pemeriksaan. xiv 2. Basis Data... xiv 3. Source Code... xiv BAB I PENDAHULUAN... 1 1.1. Latar Belakang... 1 1.2. Perumusan Masalah... 2 1.3. Tujuan Penelitian dan Manfaat Penelitian... 2 1.4. Batasan Masalah... 2 1.5. Metodologi Penelitian... 3 1.5.1. Studi Pustaka... 3 1.5.2. Pemodelan Aplikasi.... 3 1.5.3. Implementasi... 4 1.5.4. Pengujian... 4 1.6. Sistematika Penulisan... 4 BAB II LANDASAN TEORI... 7 2.1. Pengertian Klinik... 7 2.2. Metodologi Rekayasa Perangkat Lunak... 7 2.3. Sistem Operasi Android... 10 2.4. Aplikasi Hibrid... 10 2.5. HTML5... 11 2.6. CSS3... 11 2.7. JQuery Mobile... 12 vii
2.8. BackboneJs + RequireJs... 12 2.9. PhoneGap... 13 2.10. NodeJs... 14 2.11. PHP + Slim Framework... 15 2.12. MySql... 15 2.13. Basis data... 15 2.14. XAMPP... 16 2.15. Eclipse... 16 2.16. RESTful WS... 16 2.17. Pengujian Black Box... 17 2.18. Unified Modelling Language... 17 1. Diagram Use case... 17 2. Class Diagram... 18 3. Diagram Aktivititas... 19 4. Diagram Sequence... 20 BAB III ANALISIS DAN PERANCANGAN... 23 3.1. Analisis Masalah... 23 3.2. Analisis Kebutuhan... 23 3.3. Alur Kerja Ideal... 23 3.4. Perancangan Aplikasi... 24 1.1.1. Diagram Use Case... 24 1.1.2. Class Diagram... 28 1.1.3. Diagram Aktivitas... 29 1.1.4. Diagram Sequence... 39 3.5. Perancangan Alur Data... 46 3.6. Perancangan Basis Data... 47 3.7. Perancangan Antarmuka... 55 3.8. Bahan yang digunakan... 60 3.9. Skenario Pengujian... 61 BAB IV IMPLEMENTASI DAN PENGUJIAN... 65 4.1. Bahan yang digunakan... 65 1. Spesifikasi Sistem... 65 viii
4.2. Instalasi Perangkat... 66 4.3. Implementasi Kode... 68 4.1.1 Implementasi pembuatan basis data.68 4.1.2 Implementasi tampilan user... 73 4.4. Pemetaan Navigasi Aplikasi... 93 4.5. Pengujian... 95 4.5.1 Skenario Pengujian aplikasi... 95 4.5.2 Analisa Pengujian aplikasi... 96 BAB V KESIMPULAN DAN SARAN... 97 5.1. Kesimpulan... 97 5.2. Saran... 97 DAFTAR PUSTAKA... 98 LAMPIRAN... 100 ix
DAFTAR GAMBAR Gambar 2.1. Model Waterfall. 8 Gambar 2.2. Format HTML5.. 11 Gambar 2.3. Alur Kerja PhoneGap. 14 Gambar 2.4. InstalasiPhoneGap.. 14 Gambar 3.1. Diagram Use Case pasien.. 25 Gambar 3.2. Diagram Use Case Petugas Klinik. 26 Gambar 3.3. Class Diagram... 29 Gambar 3.4. Diagram Aktivitas Login... 30 Gambar 3.5. Diagram Aktivitas Pendaftaran Pasien.. 31 Gambar 3.6. Diagram Aktivitas Pendaftaran Pasien Oleh Petugas 32 Gambar 3.7. Diagram Aktivitas Pendaftaran Antrian. 33 Gambar 3.8. Diagram Aktivitas Pendaftaran Antrian Oleh Petugas.. 35 Gambar 3.9. Diagram Aktivitas Pencatatan Pemeriksaan.. 36 Gambar 3.10. Diagram Aktivitas Antrian On/Off.. 37 Gambar 3.11. Diagram Aktivitas Antrian Suspend 38 Gambar 3.12. Diagram Aktivitas Logout... 39 Gambar 3.13. Diagram Sequence Login.... 39 Gambar 3.14. Diagram Sequence Pendaftaran Pasien... 40 Gambar 3.15. Diagram Sequence Pendaftaran Pasien Oleh Petugas. 41 Gambar 3.16. Diagram Sequence Pendaftaran Antrian... 42 Gambar 3.17. Diagram Sequence Pendaftaran Antrian Oleh Petugas 43 Gambar 3.18. Diagram Sequence Pencatatan Pemeriksaan 44 Gambar 3.19. Diagram Sequence Antrian On/Off.. 45 Gambar 3.20. Diagram Sequence Antrian Suspend 45 Gambar 3.21. Diagram Sequence Logout.. 46 Gambar 3.22. Alur Data Aplikasi... 47 Gambar 3.23. Relasi Basis Data. 48 Gambar 3.24. Rancangan Tampilan Login. 55 Gambar 3.25. Rancangan Tampilan Utama Petugas.. 56 Gambar 3.26. Rancangan Tampilan Utama Pasien 56 x
Gambar 3.27. Rancangan Tampilan Kategori Dokter 57 Gambar 3.28. Rancangan Tampilan Detail Kategori Dokter.. 57 Gambar 3.29. Rancangan Tampilan Antrian Pasien... 58 Gambar 3.30. Rancangan Tampilan Detail Pasien Antrian 58 Gambar 3.31. Rancangan Tampilan Pengaturan Antrian... 59 Gambar 3.32. Rancangan Tampilan Kartu Pasien.. 59 Gambar 3.33. Rancangan Tampilan Informasi Pengingat Obat. 60 Gambar 4.1. Tampilan Kode Unduh PhoneGap. 66 Gambar 4.2. Proses Unduh Selesai. 66 Gambar 4.3. Kode Pembuatan Proyek 67 Gambar 4.4. Kode Pembuatan Proyek Selesai 67 Gambar 4.5. Kode Pembuatan Platform Android... 67 Gambar 4.6. Kode Proses Pembuatan Platform Selesai. 67 Gambar 4.7. Kode Pengecekan Platform 67 Gambar 4.8. Basis Data.. 68 Gambar 4.9. Tabel Dokter.. 69 Gambar 4.10. Tabel Jadwal Dokter 69 Gambar 4.11. Tabel Obat 69 Gambar 4.12. Tabel Pasien. 70 Gambar 4.13. Tabel Pemeriksaan... 70 Gambar 4.14. Tabel Pendaftaran 71 Gambar 4.15. Tabel Resep Obat. 71 Gambar 4.16. Tabel Ruangan. 72 Gambar 4.17. Tabel Status Antrian. 72 Gambar 4.18. Tabel Ruangan Dokter. 73 Gambar 4.19. Tabel User 73 Gambar 4.20. Struktur File Aplikasi... 74 Gambar 4.21. Potongan main.js.. 75 Gambar 4.22. Potongan HeaderView.js.. 76 Gambar 4.23. Halaman Login. 76 Gambar 4.24. Potongan Kode LoginView.. 77 Gambar 4.25. Halaman Pendaftaran... 78 xi
Gambar 4.26. Potongan Kode Pendaftaran. 79 Gambar 4.27. Halaman Utama Home Petugas... 80 Gambar 4.28. Potongan Kode Pada Router Untuk Halaman Utama.. 81 Gambar 4.29. Halaman Utama Pasien 81 Gambar 4.30 Halaman Ruangan Petugas 82 Gambar 4.31. Potongan Kode Pada Router Untuk Halaman Ruangan... 83 Gambar 4.32. Halaman Ruangan Pasien. 84 Gambar 4.33. Halaman Detail Ruangan. 85 Gambar 4.34. Potongan Kode Pada Router Untuk Halaman Detail Ruangan 86 Gambar 4.35. Halaman Antrian Pasien... 87 Gambar 4.36. Potongan Kode Pada Router Untuk Halaman Antrian. 88 Gambar 4.37. Halaman Pengaturan Setting Antrian... 88 Gambar 4.38. Potongan Kode Pada Router Untuk Halaman Setting. 89 Gambar 4.39. Halaman Detail Antrian Pasien 90 Gambar 4.40. Potongan Kode Pada Router Untuk Halaman Detail Antrian 91 Pasien. Gambar 4.41. Halaman Kartu Pasien.. 91 Gambar 4.42. Potongan Kode Pada Router Untuk Halaman Kartu Pasien 92 Gambar 4.43. Gambar 4.43. Halaman Detail Pengingat Obat 93 Gambar 4.44. Pemetaan Navigasi Aplikasi... 94 xii
DAFTAR TABEL Tabel 2.1 Notasi Diagram Use Case.. 17 Tabel 2.2 Notasi Class Diagram... 19 Tabel 2.3 Notasi Diagram Aktivitas.. 20 Tabel 2.4 Notasi Diagram Sequence.. 21 Tabel 3.1. Keterangan Use Case... 26 Tabel 3.2. tb_dokter 48 Tabel 3.3. tb_jadwal_dokter.. 49 Tabel 3.4. tb_user.. 49 Tabel 3.5. tb_obat.. 50 Tabel 3.6. tb_status_antrian..... 50 Tabel 3.7. tb_pasien.... 51 Tabel 3.8. tb_pendaftaran.. 51 Tabel 3.9. tb_pemeriksaan. 52 Tabel 3.10. tb_resep_obat... 53 Tabel 3.11. tb_ruangan.... 54 Tabel 3.12. tb_ruangan_dokter. 54 Tabel 3.13. Bahan Pendukung Aplikasi 60 Tabel 3.14. Skenario Pengujian. 62 Tabel 4.1 Hasil Pengujian. 94 xiii
DAFTAR LAMPIRAN 1. Report pemeriksaan. 100 2. Basis Data 101 2.1. Basis Data.. 101 2.1.1. Basis Data Klinik........ 101 2.1.2. Tabel Dokter........ 101 2.1.3. Tabel Jadwal Dokter....... 101 2.1.4. Tabel Obat........... 101 2.1.5. Tabel Pasien........ 102 2.1.6. Tabel Pemeriksaan.......... 102 2.1.7. Tabel Pendaftaran........ 103 2.1.8. Tabel Resep Obat........ 103 2.1.9. Tabel Ruangan......... 104 2.1.10. Tabel Ruangan Dokter...... 104 2.1.11. Tabel Status Antrian...... 104 2.1.11. Tabel Status Antrian...... 104 2.1.12. Tabel User......... 104 3. Source Code 101 3.1. Index.html......... 105 3.1. Main.js....... 105 3.2. Router.js........ 106 3.4. Models....... 131 3.4.1. antrianmodel.js....... 131 3.4.2. doktermodel.js........ 131 3.4.3. historydetaildoktermodel.js...... 131 3.4.4. historydoktermodel.js.... 132 3.4.5. jadwalmodel.js....... 132 3.4.6. obatmodel.js....... 132 3.4.7. pasienmodel.js........ 132 3.4.8. pemeriksaanmodel.js...... 133 3.4.9. rekammodel.js........ 133 xiv
3.4.10. reportpasieninfomodel.js...... 134 3.4.11. reportpasienmodel.js....... 134 3.4.12. resepmodel.js...... 134 3.4.13. ruanganmodel.js...... 134 3.5. Views......... 134 3.5.1. AntrianDetailsView.js....... 134 3.5.2. AntrianListView.js..... 137 3.5.3. AntrianSettingView.js.... 137 3.5.4. AntrianView.js....... 138 3.5.5. ConfigPageView.js..... 139 3.5.6. DaftarPasienView.js....... 140 3.5.7. DataAwalAddPageView.js..... 141 3.5.8. DataAwalSuskesView.... 142 3.5.9. DokterAddUpPageView.js..... 142 3.5.10. DokterDetailsView.js....... 144 3.5.11. DokterListView.js........ 144 3.5.12. DokterView.js...... 144 3.5.13. FooterView.js....... 145 3.5.14. HeaderView.js...... 146 3.5.15. HistoryDetailDokterView.js..... 147 3.5.16. HistoryDetailListDokterView.js...... 147 3.5.17. HistoryDokterListView.js.... 147 3.5.18. HistoryDokterView.js...... 148 3.5.19. HomeView.js....... 148 3.5.20 JadwalAddUpPageView.js...... 150 3.5.21. JadwalDetailsView.js...... 150 3.5.22. JadwalListView.js........ 151 3.5.23. JadwalView.js...... 151 3.5.24. LoginView.js........ 152 3.5.25. ObatAddUpPageView.js...... 152 3.5.26. ObatDetailsView.js...... 154 3.5.27. ObatListView.js....... 154 xv
3.5.28. ObatView.js...... 154 3.5.29. PasienAddUpPageView.js.... 155 3.5.30. PasienCardView....... 157 3.5.31. PasienListView.js..... 157 3.5.32. PasienView.js....... 158 3.5.33. RekamListView.js........ 158 3.5.34. RekamView.js...... 159 3.5.35. ReportPasienInfoListView.js... 159 3.5.36. ReportPasienInfoView.js..... 159 3.5.37. ReportPasienListView.js...... 160 3.5.38. ReportPasienView.js....... 160 3.5.39. ReportView.js...... 161 3.5.40. ResepAddPageView.js.... 162 3.5.41. ResepObatAddPageView.js.... 163 3.5.42. ResepObatListView.js..... 165 3.5.43. ResepObatView.js....... 166 3.5.44. RuanganAddUpPageView.js... 166 3.5.45. RuanganDetailsView.js.... 167 3.5.46. RuanganListView.js..... 168 3.5.47. RuanganView.js....... 169 3.6. Tpl......... 169 3.6.1. antriandetailtemplate.html.... 169 3.6.2. antrianlisttemplate.html....... 170 3.6.3. antriansettingtemplate.html...... 171 3.6.4. configpagetemplate.html...... 172 3.6.5. daftarpasientemplate.html..... 172 3.6.6. dataawaladdtemplate.html...... 173 3.6.7. dataawalsuksestemplate.html..... 174 3.6.8. dokteraddtemplate.html....... 174 3.6.9. dokterdetailtemplate.html... 175 3.6.10. dokterlisttemplate.html....... 175 3.6.11. dokteruptemplate.html.... 175 xvi
3.6.12. footertemplate.html..... 176 3.6.13. HeaderTemplate.html...... 176 3.6.14. historydetaillistdoktertemplate.html.... 176 3.6.15. historydokterlisttemplate.html..... 177 3.6.16. homepasientemplate.html...... 177 3.6.17. hometemplate.html....... 177 3.6.18. jadwaladdtemplate.html..... 178 3.6.19. jadwaldetailtemplate.html..... 179 3.6.20. jadwallisttemplate.html....... 180 3.6.21. jadwaluptemplate.html...... 180 3.6.22. logintemplate.html....... 182 3.6.23. obataddtemplate.html.... 182 3.6.24. obatdetailtemplate.html..... 183 3.6.25. obatlisttemplate.html..... 183 3.6.26. obatuptemplate.html...... 183 3.6.27. pasienaddtemplate.html..... 184 3.6.28. pasiencardtemplate.html.... 185 3.6.29. pasienlisttemplate.html....... 186 3.6.30. pasienuptemplate.html...... 186 3.6.31. rekamlisttemplate.html....... 187 3.6.32. reportpasieninfolisttemplate.html..... 187 3.6.33. reportpasienlisttemplate.html..... 188 3.6.34. reporttemplate.html...... 188 3.6.35. resepaddtemplate.html...... 189 3.6.36. resepobataddtemplate.html... 190 3.6.37. resepobatlisttemplate.html.... 192 3.6.38. ruanganaddtemplate.html... 192 3.6.39. ruangandetailtemplate.html.... 192 3.6.40. ruanganlisttemplate.html...... 193 3.6.41. ruanganuptemplate.html.... 193 3.7. PHP....... 194 xvii