BAB III ANALISIS DAN PERANCANGAN

Transkripsi

1 BAB III ANALISIS DAN PERANCANGAN Bab ini berisi penjelasan tentang analisis, identifikasi masalah, perancangan sistem kerangka pemikiran, struktur tabel basis data dan perancangan antarmuka aplikasi. Dalam subbab analisis berisi analisis-analisis yang meliputi analisis pembuatan sistem, analisis pengguna, analisis kebutuhan, dan spesifikasi kebutuhan sistem. Dalam subbab perancangan sistem berisi diagram-diagram yang digunakan untuk merancang aplikasi. Pada subbab struktur tabel basis data menjelaskan tabeltabel yang terlibat dalam aplikasi. Subbab terakhir pada menu ini yaitu perancangan antarmuka sistem, yaitu perancangan antarmuka aplikasi berisi model atau bentuk awal antarmuka aplikasi yang akan diterapkan. 3.1 ANALISIS Analisis Pembuatan Sistem Sistem dibangun menggunakan server web dengan bahasa pemrograman PHP, CSS, Javascript. Aplikasi antarmuka berbasis web digunakan oleh Administrator pada area ruang lingkup data pasien. Dalam penerapannya menggunakan mysql sebagai databasenya dan dan XAMPP sebagai web servernya. Aplikasi yang digunakan bidan adalah aplikasi mobile berbasis android. Aplikasi android dibuat menggunakan phonegap yang berfungsi sebagai framework dengan JSON sebagai data penerjemah ke server web. Aplikasi antarmuka berbasis android digunakan dengan sistem online untuk menerima informasi terkait dengan pengelolaan data pasien bidan Analisis Pengguna Analisis pengguna menerangkan tipe-lipe level user yang akan digunakan dalam aplikasi. Berikut adalah tabel analisis pengguna dari aplikasi yang akan dibuat. 26

2 Tabel 4 Tabel Pengguna No. Pengguna Deskrip 1 Bidan si Merupakan level pengguna yang mengakses aplikasi berbasis android. Bidan dapat melihat data pasien, melihat list antrian dan memberikan rekam medis. 2 Administrator Merupakan level pengguna yang memiliki akses login web dan memegang penuh control. Dapat melakukan manipulasi data pasien yaitu tambah, ubah, dan hapus data pasien. Selain itu juga dapat memanipulasi data bidan, dan mengisi data antrian atau pesanan periksa dari pasien. Setelah pasien daftar untuk periksa, administrator dapat mengirim pemberitahuan ke bidan. 3 Pasien Pasien hanya mendapat report dari sistem berupa sms Analisa Kebutuhan Dalam membangun aplikasi sistem informasi bidan dilakukan beberapa tahap analisa kebutuhan yaitu: 1. Melihat kebutuhan pengguna terkait penggunaan aplikasi untuk sistem informasi bidan berbasis web. 2. Menyediakan aplikasi berbasis web untuk melayani pasien dalam pendaftaran dan informasi terkait pasien dan bidan. 3. Menyediakan aplikasi berbasis Android berkestensi.apk yang digunakan oleh bidan untuk melihat data pasien, antiran pasien serta rekam medis pasien Spesifikasi Kebutuhan Sistem Spesifikasi sistem merupakan rinci kebutuhan yang dipenuhi dalam membangun sistem, sehingga tercapainya tujuan dari aplikasi tersebut. Spesifikasi kebutuhan tersebut mencangkup spesifikasi server, spesifikasi perangkat client. 27

3 a. Spesifikasi Server Spesifikasi server adalah analisa spesifikasi kebutuhan dari sistem yang akan digunakan sebagai server. Spesifikasi server meliputi sistem operasi, perangkat keras, dan peramba web atau browser sebagai media penunjang berjalannya antarmuka. Berikut rinci spesifikasi server yang dibutuhkan: Sistem operasi : Windows 7 64 bit Memory : Min. 2 GB Disk space : Min. free storage 20 GB Server web : Apache Library PHP : PHP Database : MySQL Interface Database : phpmyadmin Browser : Internet Explorer 10 atau versi diatasnya, Firefox 31 atau versi diatasnya, Chrome 31 atau versi diatasnya, Safari 7 atau versi diatasnya, Opera 28 atau versi diatasnya. Phonegap jquery JSON b. Spesifikasi Client Perangkat client adalah perangkat seluler yang digunakan oleh bidan. koneksi perangkat client yang dibutuhkan adalah dapat terhubung ke server melalui internet. Kebutuhan minimum perangkat berbasis sistem operasi android versi 2.3 Gingerbread. 28

4 3.2 KERANGKA PEMIKIRAN Gambar 8 Kerangka Pikiran Dari perumusan masalah,1) Bagaimana membuat aplikasi sistem informasi data pasien bidan berbasis web yang dapat mengelola data pasien bidan,mengatur antrian dan rekam medis pasien? 2) Bagaimana membuat aplikasi berbasis Android? Kemudian dilakukan penelusuran literatur dan menganalisis kebutuhan istem yang akan diimplementasikan. Setelah aplikasi dibuat, dilakukan pengujian untuk membuktikan fungsionalitas dari sistem. 3.3 PERANCANGAN SISTEM Berdasarkan analisis diatas, dibangun aplikasi berbasis web dengan perangkat lunak XAMPP yang didalamnya terdapat Apache server web, dan MySQL untuk database-nya. Aplikasi yang digunakan oleh bidan untuk melihat antrian pasien, data pasien dan rekam medis dibuat menggunakan Eclipse dengan menggunakan Phonegap. Sebelum memulai tahap implementasi, perlu dilakukan perancangan yang dapat menggambarkan bagaimana sistem dibentuk dan mendefinisikan kebutuhan-kebutuhan fungsionalitas aplikasi. Berikut diagram-diagram yang dibuat: 29

5 3.3.1 Entity Relationship Diagram Gambar 9 Entity Relationship Diagram Pada aplikasi sistem informasi data pasien bidan, tabel rekam medis dapat diisi oleh banyak pasien. Bidan dapat melakukan pengisian rekam medis pada pasien, pada data pasien akan memiliki banyak rekam medis. Untuk memenuhi kebutuhan dalam pengelolaan data, maka diperlukan media yang dapat meenyimpan data data aplikasi sehingga memudahkan aplikasi dalam proses penyimpanan, perubahan dan penghapusan data-data tersebut. Perancangan basis data pada subbab ini mendeskripsikan mengenai penjelasan dari tabel, field, tipe data, dan ukuran data. Tabel tabel yang digunakan untuk membangun aplikasi ini yaitu sebagai berikut Rancangan Tabel Pasien Tabel pasien digunakan untuk menyimpan data pasien. Tabel ini terdiri dari kode pasien, nama pasien, nama suami, tanggal lahir, alamat, no telp, tanggal registrasi. Berikut penjelasan rinci tabel pasien. 30

6 Tabel 5 rancangan tabel pasien Nama Field Tipe data Panjang Keterangan kode_pasien int 5 PRIMARY KEY, NOT NULL,AUTO_INCREMENT nama_pasien varchar 50 nama_suami varchar 50 tgl_lahir Date alamat Varchar 50 no_tlp Varchar 20 tgl_registrasi date Rancangan Tabel Account Tabel Account digunakan untuk menyimpan data administrator dan bidan. Tabel ini terdiri dari kode account, username, password, nama, alamat, no telp, level. Pada password menggunakan enkripsi MD5 Berikut penjelasan rinci tabel account. Tabel 6 Rancangan Tabel Account Nama Field Tipe data Panjang Keterangan kode_account int 5 PRIMARY KEY, NOT NULL,AUTO_INCREMENT username Varchar 30 password Varchar 32 nama Varchar 50 alamat Varchar 50 no_tlp Varchar 20 Level varchar 30 31

7 Rancangan Tabel Rekam Medis Tabel rekam medis digunakan untuk menyimpan data rekam medis pasien. Tabel ini terdiri dari kode rm,tgl rm, nama pasien, keluhan, kode account, diagnosa, tindakan, biaya, keterangan. Berikut penjelasan rinci tabel rekam medis. Tabel 7 Rancangan Tabel Rekam Medis Nama Field Tipe data Panjang Keterangan kode_rm varchar 10 PRIMARY KEY, NOT NULL,AUTO_INCREMENT tgl_rm date kode_pasien int 5 FOREIGN KEY, NOT NULL keluhan Varchar 200 kode_account int 5 FOREIGN KEY, NOT NULL diagnosa Varchar 200 tindakan varchar 200 biaya int 11 keterangan varchar Rancangan Tabel Ruang Tabel ruang digunakan untuk menyimpan data ruangan. Tabel ini terdiri dari kode ruang, nama ruang, biaya, fasilitas. Tabel ini terdiri dari kode ruang, nama ruang, biaya ruang, fasilitas ruang. Berikut penjelasan rinci tabel ruang. 32

8 Tabel 8 Rancangan Tabel Ruang Nama Field Tipe data Panjang Keterangan kode_ruang int 5 PRIMARY KEY, NOT NULL,AUTO_INCREMENT Nama_ruang varchar 30 Biaya_ruang int 11 Fasilitas_ruang Varchar Rancangan Tabel FAQ Tabel FAQ digunakan untuk menyimpan data pertanyaan dan jawaban. Tabel ini terdiri dari kode faq, username, judul faq, konten faq. Berikut penjelasan rinci tabel FAQ. Tabel 9 Rancangan Tabel FAQ Nama Field Tipe data Panjang Keterangan kode_faq int 3 PRIMARY KEY, NOT NULL,AUTO_INCREMENT Kode_account int 5 FOREIGN KEY, NOT NULL Judul_faq varchar 100 Konten_faq varchar Rancangan Tabel Transaksi Tabel transaksi digunakan untuk menyimpan data transaksi. Tabel ini terdiri dari no kwitansi, nama pasien, telah terima, jumlah pembayaran, nama bidan, rawat inap, tanggal keluar, tanggal bayar. Berikut penjelasan rinci tabel transaksi. 33

9 Tabel 10 Rancangan Tabel Transaksi Nama Field Tipe data Panjang Keterangan no_kwitansi int 5 PRIMARY KEY, NOT NULL,AUTO_INCREMENT Kode_pasien int 5 FOREIGN KEY, NOT NULL telah_terima Varchar 50 jml_pembayaran int 11 Kode_account int 5 FOREIGN KEY, NOT NULL rawat_inap int 11 tgl_keluar tgl_bayar date date Diagram Use Case Use Case menjelaskan manfaat suatu sistem jika dilihat menurut pandangan orang yang berada di luar sistem (aktor), menunjukkan fungsionalitas suatu sistem atau kelas dan bagaimana sistem berinteraksi dengan aktor. Secara umum pemodelan use case pada aplikasi ini sebagai berikut: 34

10 Menambah data pasien System Mengubah data pasien Menghapus data pasien Menambah data bidan / admin Mengubah data bidan/ admin <<include>> <<include>> <<include>> <<include>> <<include>> <<include>> <<include>> Menghapus data bidan / admin <<include>> login <<include>> Menambah data periksa pasien <<include>> Admin Menambah Antrian Mengubah Password <<include>> <<include>> <<include>> Melihat data pasien dan rekam medis Bidan informasi pemeriksaan Kelola Ruangan Pasien Kelola FAQ Transaksi Gambar 10 Diagram Use Case SIBID Penjelasan diagram use case aplikasi sistem informasi bidan sebagai berikut: Tabel 11 Use Case Login Nama Use Case : Login Aktor : Admin dan Bidan Deskripsi : Pada aplikasi ini semua pengguna diharuskan memasukkan username dan password. Hal ini sebagai keamanan sistem untuk mencegah orang yang tidak berhak menggunakan aksesnya. 35

11 Tabel 12 Menambah Data Pasien Nama Use Case : Menambah data pasien Aktor : Admin Deskripsi : Pasien yang belum terdaftar wajib mengajukan data diri keadmin dengan menunjukan kartu identitas. admin menginput data pasien baru ke dalam basis data untuk pemeriksaan pertama dan selanjutnya Tabel 13 Mengubah Data Pasien Nama Use Case : Mengubah data pasien Aktor : Admin Deskripsi : Admin dapat melakukan pengubahan data pasien yang salah atau terdapat perubahan seperti alamat. Jika pasien merasa datanya ada yang tidak sesuai dapat segera meminta diubah. Tabel 14 Menghapus Data Pasien Nama Use Case : Menghapus data pasien Aktor : Admin Deskripsi : Admin dapat melakukan penghapusan data pasien. Proses ini akan mempengaruhi data di tabel antri dan tabel periksa jika pasien sudah pernah melakukan pemeriksaan. Tabel 15 Menambah Data Bidan Atau Admin Nama Use Case : Menambah data bidan atau admin Aktor : Admin Deskripsi : Bidan yang belum terdaftar dapat mendatangi admin. admin menginput data bidan baru ke dalam basis data untuk dapat melakukan pemeriksaan. Tabel 16 Mengubah Data Bidan Atau Admin Nama Use Case : Mengubah data bidan atau admin Aktor : Admin 36

12 Deskripsi : Admin dapat melakukan pengubahan data bidan yang salah atau terdapat perubahan seperti nomor HP. Jika bidan merasa datanya ada yang tidak sesuai dapat segera meminta diubah. Tabel 17 Menghapus Data Bidan Atau Admin Nama Use Case : Menghapus data bidan atau admin Aktor : Admin Deskripsi : Admin dapat melakukan penghapusan data bidan. Proses ini akan mempengaruhi data di tabel antri dan tabel periksa jika bidan sudah pernah melakukan pemeriksaan. Tabel 18 Menambah Data Periksa Pasien Nama Use Case : Menambah data Periksa Pasien Aktor : Bidan Deskripsi : Bidan dapat melakukan pengisian data periksa atau rekam medis pasien. Data ini akan bisa dilihat kembali pada catatan rekam medis pasien. Tabel 19 Menambah Antrian Pasien Nama Use Case : Menambah Antrian Aktor : Admin Deskripsi : Pasien yang ingin cek kandungan atau melahirkan dapat mendatangi admin untuk mendaftarkan diri sebelum periksa. admin akan menambahkan data dan membuat jadwal periksa. Tabel 20 Mengubah Password Nama Use Case : Mengubah Password Aktor : Admin dan Bidan Deskripsi : Admin dan Bidan dapat mengubah password untuk login ke aplikasi. 37

13 Tabel 21 Melihat Data Pasien dan Rekam Medis Nama Use Case : Melihat data pasien dan rekam medis Aktor : Admin dan Bidan Deskripsi : Admin dan Bidan dapat melihat data pasien setelah melakukan login dan dapat melihat rekam medis pasien. Tabel 22 Informasi Pemeriksaan Nama Use Case : Informasi Pemeriksaan Aktor : Bidan dan pasien Deskripsi : Bidan mengirimkan informasi pemeriksaan kepada pasien menggunakan sms. Tabel 23 Kelola Ruangan Nama Use Case : Kelola Ruangan Aktor : Admin Deskripsi : Admin melakukan pengelolaan ruangan dari menambah, mengubah dan menghapus. Tabel 24 Kelola FAQ Nama Use Case : Kelola FAQ Aktor : Admin Deskripsi : Admin dapat mengelola tentang masalah, pertanyaan serta jawaban seputar aplikasi baik menambah, merubah dan menghapus Tabel 25 Kelola Transaksi Nama Use Case : Kelola Transaksi Aktor : Admin Deskripsi : Admin seputar transaksi utuk rawat inap, untuk transaksi yang lainya belum dapat diterapkan di aplikasi ini. 38

14 3.3.3 Diagram Aktivitas Diagram aktivitas adalah diagram yang menggunakan sebuah skema aktivitas yang terjadi pada pengujian aplikasi tersebut Diagram Aktivitas Login Pada diagram aktivitas ini, menggambarkan tentang cara mengakses halaman utama dari aplikasi, pengguna baik admin maupun bidan diharuskan untuk login dengan memasukkan username dan password. Jika akun tidak sesuai dengan database maka akan muncul peringatan dan kembali diarahkan ke halaman login. Jika login berhasil, maka akan langsung diarahkan ke halaman utama. SIBID Pengguna Sistem Mengakses aplikasi Halaman Login N Masukan Username dan Password Y Halaman utama Phase Gambar 11 Diagram Aktivitas Login 39

15 Diagram Aktivitas Tambah Data Pasien Pada diagram aktivitas ini, menggambarkan tentang cara menambah pasien baru yang belum terdaftar di sistem informasi bidan. Penambahan dilakukan oleh administrator dengan web di halaman pasien. Pasien terlebih dahulu menunjukan kartu identitas diri kepada administrator untuk dimasukan datanya kedalam sistem. Data pasien harus terisi semua. pasien dicek terlebih dahulu apakah sudah ada yang menggunakan atau belum. SIBID Pengguna Sistem Pasien memberikan data informasi diri Admin mengakses aplikasi Halaman Login Tambah Pasien Halaman pasien Mengisi data Pasien Validasi Kelengkapan data N Y Menyimpan data Pasien Phase Gambar 12 Diagram Aktivitas Tambah Pasien 40

16 Diagram Aktivitas Ubah Data Pasien Pada diagram aktivitas ini, menggambarkan tentang cara mengubah pasien. Perubahan dilakukan oleh administrator dengan web di halaman pasien. Data perubahan pasien harus terisi semua. SIBID Pengguna Sistem Mengakses aplikasi Halaman Login Mencari data pasien yang akan diubah Halaman pasien Mengubah data pasien Validasi Perubahan data N Y Menyimpan Perubahan data Pasien Phase Gambar 13 Diagram Aktivitas Ubah Data Pasien Diagram Aktivitas Hapus Data Pasien Pada diagram aktivitas ini, menggambarkan tentang cara menghapus pasien. Penghapusan dilakukan oleh resepsionis dengan web di halaman pasien. Berikut diagramnya: 41

17 SIBID Pengguna Sistem Mengakses aplikasi Halaman Login Mencari data pasien yang akan dihapus Halaman pasien Peringatan hapus data N Y Menghapus data pasien Phase Gambar 14 Diagram Aktivitas Hapus Data Pasien Diagram Aktivitas Tambah Data Bidan Pada diagram aktivitas ini, menggambarkan tentang cara menambah bidan baru yang belum terdaftar di sistem informasi bidan. Penambahan dilakukan oleh administrator dengan web di halaman account. Data bidan harus terisi semua dan username untuk login dicek terlebih dahulu apakah sudah ada yang menggunakan atau belum. 42

18 SIBID Pengguna Sistem Mengakses aplikasi Halaman Login Tambah Bidan Halaman Account Mengisi data Bidan Validasi Kelengkapan data N Y Menyimpan data Bidan Phase Gambar 15 Diagram Aktivitas Tambah Data Bidan Diagram Aktivitas Ubah Data Bidan Pada diagram aktivitas ini, menggambarkan tentang cara mengubah data bidan. Perubahan dilakukan oleh administrator dengan web di halaman account. Data perubahan bidan harus terisi semua dan username untuk login bidan dicek terlebih dahulu apakah sudah ada yang menggunakan atau belum. 43

19 SIBID Pengguna Sistem Mengakses aplikasi Halaman Login Mencari dan memilih data bidan yang diubah Halaman Account Mengubah data Bidan Validasi Perubahan data N Y Menyimpan Perubahan data Bidan Phase Gambar 16 Diagram Aktivitas Ubah Data Bidan Diagram Aktivitas Hapus Data Bidan Pada diagram aktivitas ini, menggambarkan tentang cara menghapus data bidan. Penghapusan dilakukan oleh admin dengan web di halaman account. Berikut diagramnya: 44

20 SIBID Pengguna Sistem Mengakses aplikasi Halaman Login Mencari data bidan yang akan dihapus Halaman Account Peringatan hapus data N Y menghapus data bidan Phase Gambar 17 Diagram Aktivitas Hapus Data Bidan Diagram Aktivitas Tambah Antrian Pada diagram aktivitas ini, menggambarkan tentang cara menambah antrian sebelum periksa. Hal ini dilakukan oleh administrator dengan web di halaman antri. Berikut diagramnya: 45

21 SIBID Pengguna Sistem Login Web Halaman Dashboard Tambah Antrian Halaman Antrian Mengisi data Antri Menyimpan data Antri Phase Gambar 18 Diagram Aktivitas Tambah Antrian Diagram Aktivitas Melihat Data Pasien dan Rekam Medis Pada diagram aktivitas ini, menggambarkan tentang bidan dapat melihat data pasien dan melihat rekam medis pemeriksaan pasien sebelumnya. Berikut diagramnya: 46

22 SIBID Pengguna Sistem Login Web atau android Halaman Dashboard mencari data pasien, klik nama pasien Halaman rekam medis Menampilkan data rekam medis Phase Gambar 19 Diagram Aktivitas Melihat Data Pasien dan Rekam Medis Diagram Aktivitas Menambahkan Data Pasien dan Rekam Medis Pada diagram aktivitas ini, menggambarkan tentang bidan yang dapat menambah data pemeriksaan pasien. Data ini akan dimasukan ke dalam tabel rekam medis yang dapat dilihat tabel rekam medis. Berikut diagramnya: 47

23 SIBID Pengguna Sistem Login android Halaman Dashboard pilih antrian pasien Halaman Antrian Isi data periksa Simpan rekam medis Phase Gambar 20 Diagram Aktivitas Melihat Data Pasien dan Rekam Medis Diagram Aktivitas Mengubah Password Pada diagram aktivitas ini, menggambarkan tentang administrator dan bidan dapat mengubah password untuk login di aplikasi android. Berikut diagramnya: 48

24 SIBID Pengguna Sistem Login android Halaman Dashboard Masukan password lama dan masukan password baru Ubah Password Kembali Ke Halaman Dashboard Phase Gambar 21 Diagram Aktivitas Mengubah Password 3.4 RANCANGAN ANTARMUKA Rancangan layar dari aplikasi ini dibuat untuk menampilkan informasi dan memudahkan dalam pencarian saat ingin melakukan perubahan perubahan yang diperlukan. Ada satu rancangan layar pada aplikasi ini yaitu layar untuk Antarmuka web dan antarmuka aplikasi android. Adapun rancangan antarmuka adalah sebagai berikut: Rancangan Antarmuka Halaman Login WEB Rancangan ini merupakan index atau halaman utama untuk aplikasi web. Di halaman utama ini berisi form login untuk menggunakan aplikasi untuk pengguna administrator. 49

25 Gambar 22 Rancangan Antarmuka Halaman Login WEB Keterangan gambar : a. Username : textfield untuk memasukkan username b. Password : textfield untuk memasukkan password c. Login : tombol untuk login, setelah pengguna memasukan username dan password dan klik login akan divalidasi ke basis data. Jika salah akan ditampilkan bahwa login salah, Jika benar akan diarahkan ke halaman utama sebagai administrator atau sebagai resepsionis Rancangan Antarmuka Halaman List Antrian. Rancangan ini merupakan halaman setelah user dapat masuk ke aplikasi. Di halaman utama ini berisi list antrian pasien yang dapat dilihat oleh administrator. 50

26 Gambar 23 Rancangan Antarmuka Halaman List Antrian Keterangan gambar : a. Tabel menampilkan list antrian pasien yang dapat dilihat oleh administrator. b. administrator dapat melakukan aksi hapus antrian Rancangan Antarmuka Halaman Tambah dan Ubah Antrian. Rancangan ini merupakan tampilan form untuk menambah reservasi antrian yang dilakukan oleh administrator. Berikut tampilannya: Gambar 24 Rancangan Antarmuka Tambah dan Ubah Antrian 51

27 Keterangan gambar : a. Dari Form diatas semuanya harus dilengkapi. b. Kolom bidan dapat disesuaikan dengan permintaan pasien, dimana pasien dapat memilih bidan yang diinginkannya Rancangan Antarmuka Halaman List Pasien Rancangan ini merupakan tampilan tabel untuk daftar pasien yang dilihat oleh Administrator. Di halaman ini dapat melakukan pengelolaan data baik mengubah maupun menghapus data. Gambar 25 Rancangan Antarmuka List Pasien Keterangan gambar: a. Tabel menampilkan data pasien b. Tombol Search digunakan untuk melakukan pencarian pasien berdasarkan string yang berada pada tabel pasien. c. Di tabel terdapat tombol ubah atau hapus. Jika di klik hapus akan ada konfirmasi untuk menghapus data pasien tertentu. Jika klik tombol ubah, akan tampil halaman form untuk ubah data pasien. 52

28 3.4.5 Rancangan Antarmuka Halaman Tambah dan Ubah Pasien Rancangan ini merupakan tampilan form untuk pasien baru atau untuk mengubah data pasien. Perbedaannya adalah untuk form tambah pasien text field masih kosong, sedangkan untuk form ubah pasien sudah terisi dengan data didalam basis data. Berikut tampilannya: Gambar 26 Rancangan Antarmuka Tambah dan Ubah Pasien Keterangan gambar: a. Dari form diatas semua isian harus diisi. b. Data akan langsung tersimpan pada database pasien yang nantinya digunakan terus menerus Rancangan Antarmuka Halaman List account Rancangan ini merupakan tampilan list data account yang berisi data bidan dan administrator. Pada list account administrator dapat merubah informasi tentang bidan dan dapat mengelola account baik mengubah maupun menghapus data bidan. Berikut tampilannya: 53

29 Gambar 27 Rancangan Antarmuka halaman list account Keterangan gambar: a. Tabel menampilkan data account b. Tombol Search digunakan untuk melakukan pencarian bidan maupun administrator berdasarkan string yang berada pada tabel pasien. c. Di tabel terdapat tombol ubah atau hapus. Jika di klik hapus akan ada konfirmasi untuk menghapus data account tertentu. Jika klik tombol ubah, akan tampil halaman form untuk ubah data account Rancangan Antarmuka Halaman Tambah dan Ubah account Rancangan ini merupakan tampilan form untuk account baru atau untuk mengubah data bidan dan administrator. Perbedaannya adalah untuk form tambah account text field masih kosong, sedangkan untuk form ubah account sudah terisi dengan data didalam basis data. Berikut tampilannya: 54

30 Gambar 28 Rancangan Antarmuka Halaman Tambah dan Ubah Account Keterangan gambar: a. Dari form diatas semua isian harus diisi. b. Kolom username saat di ketik akan dilakukan pengecekan ke basis data apakah username sudah digunakan oleh pasien lain. Minimal karakter username yaitu 3 karakter. c. Pada kolom password terdapat aturan yaitu minimal 6 karakter terdiri dari huruf dan angka. d. Pada kolom level dapat diisi administrator untuk admin dan bidan untuk bidan Rancangan Antarmuka Halaman List Ruang Rancangan ini merupakan tampilan list data Ruang yang berisi data spesifikasi ruang. Pada list Ruang administrator dapat merubah informasi tentang data ruang dan dapat mengelola ruang baik mengubah maupun menghapus data ruang. Berikut tampilannya: 55

31 Gambar 29 Rancangan Antarmuka List Ruang Keterangan gambar: a. Tabel menampilkan data ruang b. Tombol Search digunakan untuk melakukan pencarian ruang maupun berdasarkan string yang berada pada tabel ruang. c. Ditabel terdapat tombol ubah atau hapus. Jika di klik hapus akan ada konfirmasi untuk menghapus data ruang tertentu. Jika klik tombol ubah, akan tampil halaman form untuk ubah data ruang Rancangan Antarmuka Halaman Tambah dan Ubah Ruang Rancangan ini merupakan tampilan form untuk ruang baru atau untuk mengubah data ruang. Perbedaannya adalah untuk form tambah ruang text field masih kosong, sedangkan untuk form ubah ruang sudah terisi dengan data didalam basis data. Berikut tampilannya: 56

32 Gambar 30 Rancangan Antarmuka Tambah dan Ubah Ruang Keterangan gambar: a. Dari form diatas semua isian harus diisi. b. Kolom biaya ruang berisi informasi harga sewa inap pada ruangan. c. Kolom Fasilitas berisi informasi tentang fasilitas apa saja yang terdapat pada ruangan Rancangan Antarmuka Halaman List FAQ Rancangan ini merupakan tampilan list data faq yang berisi data pertanyaan dan jawaban. Pada list faq administrator dapat merubah informasi tentang pertanyaan dan jawaban dan dapat mengelola faq baik mengubah maupun menghapus data faq. Berikut tampilannya: 57

33 Gambar 31 Rancangan Antarmuka List Faq Keterangan gambar: a. Tabel menampilkan data faq b. Tombol Search digunakan untuk melakukan pencarian ruang maupun administrator berdasarkan string yang berada pada tabel ruang. c. Ditabel terdapat tombol ubah atau hapus. Jika di klik hapus akan ada konfirmasi untuk menghapus data faq tertentu. Jika klik tombol ubah, akan tampil halaman form untuk ubah data faq Rancangan Antarmuka Halaman Tambah dan Ubah FAQ Rancangan ini merupakan tampilan form untuk faq baru atau untuk mengubah data pertanyaan dan jawaban. Perbedaannya adalah untuk form tambah faq text field masih kosong, sedangkan untuk form ubah faq sudah terisi dengan data didalam basis data. Berikut tampilannya: 58

34 Gambar 32 Rancangan Antarmuka halaman Tambah dan Ubah faq Keterangan gambar: a. Dari form diatas semua isian harus diisi. b. Kolom pertanyaan dan jawaban diisi sesuai informasi tentang aplikasi sistem informasi bidan Rancangan Antarmuka Halaman Login Bidan Rancangan ini merupakan index atau halaman utama untuk aplikasi android. Di halaman utama ini berisi form login untuk menggunakan aplikasi untuk bidan.berikut tampilannya: 59

35 Gambar 33 Rancangan Antarmuka Login Bidan Keterangan gambar : a. Username : textfield untuk memasukkan username b. Password : textfield untuk memasukkan password c. Login : tombol untuk login, setelah pengguna memasukan username dan password dan klik login akan divalidasi ke basis data. Jika salah akan ditampilkan bahwa login salah, Jika benar akan diarahkan ke halaman utama sebagai bidan Rancangan Antarmuka Halaman Utama Bidan Rancangan ini merupakan halaman setelah user dapat masuk ke aplikasi. Di halaman utama ini antrian, data pasien, rekam medis, pesan, faq, ubah password yang dapat dilihat oleh bidan. Berikut tampilannya: 60

36 Gambar 34 Rancangan Antarmuka Halaman Utama Bidan Keterangan gambar : a. Halam ini menampilkan menu menu yang dapat diakses oleh bidan. b. Terdapat menu antrian, data pasien, rekam medis, pesan, faq dan ubah account yang dapat pergunakan oleh bidan Rancangan Antarmuka Halaman Rekam medis Rancangan ini merupakan tampilan list rekam medis yang berisi data rekam medis pasien. Pada list rekam medis bidan dapat melihat informasi tentang rekam medis. Berikut tampilannya: 61

37 Gambar 35 Rancangan Antarmuka Rekam Medis Keterangan gambar : a. Halam ini menampilkan informasi rekam medis pasien. b. Pada tombol detail akan memberikan informasi detail rekam medis pasien yang berisi informasi pada tabel rekam medis Rancangan Antarmuka Halaman Pasien Rancangan ini merupakan tampilan list data pasien yang berisi data informasi tentang pasien. Pada list pasien bidan dapat melihat informasi tentang data pasien. Berikut tampilannya: 62

38 Gambar 36 Rancangan Antarmuka Halaman Pasien Keterangan gambar : a. Halam ini menampilkan informasi data pasien. b. Pada tombol detail akan memberikan informasi detail data pasien yang berisi informasi pada tabel data pasien Rancangan Antarmuka Halaman List Antrian Rancangan ini merupakan tampilan list Antrian pasien yang berisi data informasi tentang antrian. Pada list pasien bidan dapat mengisi data periksa yang nantinya akan masuk kedata rekam medis. Berikut tampilannya: 63

39 Gambar 37 Rancangan Antarmuka Halaman List Antrian Keterangan gambar : a. Halam ini menampilkan informasi data antrian. b. Pada tombol isi data periksa akan ada form data periksa yang nantinya data akan masuk kedalam rekam medis Rancangan Antarmuka Halaman Pesan Rancangan ini merupakan tampilan form pesan yang berisi data pasien da n isi koneten pesan yang akan dikirim oleh bidan. Berikut tampilannya: 64

40 Gambar 38 Rancangan Antarmuka Halaman Pesan Keterangan gambar : a. Text field nama pasien diisi kepada nama pasien yang akan dikirimi pesan. b. Text field isi pesan diisi konten tentang pesan yang akan dikirm oleh bidan kepada pasien Rancangan Antarmuka Halaman Faq Rancangan ini merupakan tampilan list faq yang berisi informasi tentang sistem informasi bidan yang didalamnya terdapat pertanyaan dan jawaban perilah sistem informasi bidan. Berikut tampilannya: 65

41 Gambar 39 Rancangan Antarmuka Halaman Faq Keterangan gambar : a. Halam ini menampilkan informasi tentang sistem infrormasi bidan yang didalamnya terdapa informasi pertanyaan dan jawaban. b. Pada tombol detail akan informasi tentang faq yang berisi tentang pertanyaan dan jawaban seputar aplikasi Rancangan Antarmuka Halaman Ubah Account Rancangan ini berisi informasi bidan dan terdapat juga ubah password pada halaman tersbut yang akan diakses dan diubah oleh bidan. Berikut tampilannya: 66

42 Gambar 40 Rancangan Antarmuka Halaman Ubah Account Keterangan gambar : a. Halam ini menampilkan informasi tentang account bidan yang didalamnya terdapa informasi tentang bidan. b. Pada tombol change password akan terdapat form untuk merubah password yang digunakan oleh bidan apabila bidan akan merubah password. 67