MONITORING TEKANAN DARAH, KADAR GULA DARAH, ASAM …

RANCANG BANGUN APLIKASI PENCATATAN DAN

MONITORING TEKANAN DARAH, KADAR GULA DARAH,

ASAM URAT, DAN KOLESTEROL BERBASIS WEBSITE

MENGGUNAKAN FRAMEWORK LARAVEL

Laporan Skripsi

MUHAMMAD RIFKY HAIKAL 4817071043

PROGRAM STUDI D4 TEKNIK INFORMATIKA

JURUSAN TEKNIK INFORMATIKA DAN KOMPUTER

POLITEKNIK NEGERI JAKARTA

2021

RANCANG BANGUN APLIKASI PENCATATAN DAN

MONITORING TEKANAN DARAH, KADAR GULA DARAH,

ASAM URAT, DAN KOLESTEROL BERBASIS WEBSITE

MENGGUNAKAN FRAMEWORK LARAVEL

Laporan Skripsi

Dibuat untuk Melengkapi Syarat-Syarat yang Diperlukan untuk

Memperoleh Diploma Empat Politeknik

Muhammad Rifky Haikal

4817071043

PROGRAM STUDI D4 TEKNIK INFORMATIKA

JURUSAN TEKNIK INFORMATIKA DAN KOMPUTER

POLITEKNIK NEGERI JAKARTA

2021

i

HALAMAN PERNYATAAN ORISINALITAS

Skripsi/Tesis/Disertasi ini adalah hasil karya saya sendiri, dan semua sumber

baik yang dikutip maupun dirujuk telah saya nyatakan dengan benar.

Nama : Muhammad Rifky Haikal

NPM : 4817071043

Tanggal : 20 Juni 2021

Tanda Tangan :

iii

KATA PENGANTAR

Puji syukur penulis panjatkan atas kehadirat Allah SWT karena atas rahmat dan

karunia Nya-lah laporan skrispsi ini dapat diselesaikan. Skripsi ini berjudul

“Rancang Bangun Aplikasi Pencatatan dan Monitoring Tekanan Darah, Kadar Gula

Darah, Asam Urat, dan Kolesterol Berbasis Website Menggunakan Framework

Laravel”. Pada kesempatan ini penulis mengucapkan banyak terima kasih kepada

berbagai pihak atas bantuan, bimbingan dan dukungannya sehingga penulisan ini

berjalan lacncar.

a) Allah SWT yang telah memberikan penulis rezeki berupa kesehatan dan

akal sehat yang sangatlah berharga bagi penulis sehingga laporan ini dapat

terselesaikan dengan baik.

b) Bapak Mauldy Laya, S.Kom., M.Kom., selaku dosen pembimbing skripsi

yang telah meluangkan waktu, tenaga, dan pikiran untuk membimbing dan

membantu penulis dalam menyusun laporan skripsi.

a) Orang tua dan keluarga penulis yang setiap saat mendoakan penulis serta

memberikan dukungan dan bantuan moral maupun material kepada penulis.

b) Sahabat dan teman-teman yang telah banyak membantu penulis dalam

menyelesaikan penyusunan skripsi.

Akhir kata, penulis berharap Allah SWT berkenan membalas segala kebaikan kita

semua dan semoga laporan skripsi ini dapat bermanfaat, khususnya bagi penelitian

selanjutnya.

Depok, 20 Juni 2021

Penulis

iv

HALAMAN PERNYATAAN PERSETUJUAN PUBLIKASI

SKRIPSI UNTUK KEPENTINGAN AKADEMIS

Sebagai sivitas akademik Politeknik Negeri Jakarta, saya yang bertanda tangan di

bawah ini :

Nama : Muhammad Rifky Haikal

NIM : 4817071043

Program Studi : Teknik Informatika

Jurusan : Teknik Informatika dan Komputer

Jenis Karya : Skripsi/Tesis/Disertasi/Karya Ilmiah Lainnya*

demi pengembangan ilmu pengetahuan, menyetujui untuk memberikan kepada

Politeknik Negeri Jakarta Hak Bebas Royalti Noneksklusif (Non-exclusive

Royalty- Free Right) atas skripsi saya yang berjudul :

Rancang Bangun Aplikasi Pencatatan dan Monitoring Tekanan darah, Kadar Gula


Laravel.

beserta perangkat yang ada (jika diperlukan). Dengan Hak Bebas Royalti

Noneksklusif ini Politeknik Negeri Jakarta berhak menyimpan,

mengalihmedia/format-kan, mengelola dalam bentuk pangkalan data (database),

merawat, dan memublikasikan skripsi saya selama tetap mencantumkan nama saya

sebagai penulis/pencipta dan sebagai pemilik Hak Cipta.

Demikian pernyataan ini saya buat dengan sebenarnya.

Dibuat di : Jatiranggon, Kota Bekasi, pada tangal : 20 Juni 2021

Yang menyatakan

(Muhammad Rifky Haikal)

*Karya ilmiah: karya akhir, makalah non seminar, laporan kerja praktek, laporan

magang, karya profesi dan karya spesialis.

v Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

Rancang Bangun Aplikasi Pencatatan dan Monitoring Tekanan Darah, Kadar Gula


Laravel

Abstrak

Tiap orang mempunyai pola makan dan gaya hidup yang berbeda dan juga riwayat

kesehatan yang berbeda pula, dibarengi dengan beberapa faktor, seperti faktor genetik contohnya, bukan tidak mungkin bahwa kondisi ini membuat setiap orang memiliki

masalah tersendiri bagi kesehatan dan juga pola hidupnya. Masalah tekanan darah dan

juga kadar gula dalam darah yang tinggi misalnya, ini merupakan salah satu indikator

yang melibatkan faktor genetik. Tetapi bukan berarti orang yang tidak mempunyai riwayat genetika yang bermasalah dengan tekanan darah dan kadar gula dalam darah bakal

terbebas dari masalah kesehatan, pola makan dan gaya hidup yang diaplikasikan

seseorang dalam kehidupannya sehari-hari pun juga akan berpengaruh bagi riwayat kesehatan sesorang. Untuk itu, dibuatlah rancang bangun aplikasi untuk pencatatan dan

monitoring untuk mengetahui tekanan darah, kadar gula dalam darah, asam urat, dan juga

kolesterol agar riwayat kesehatan akan lebih terkontrol. Aplikasi ini akan mengandalkan data yang dicatat oleh user setelah melakukan pengecekan dengan alat ukur tekanan darah

(sphygmomanometer), dan GCU meter (blood Glucose, Cholesterol and Uric acid meter)

untuk memonitoring tekanan darah, kadar gula dalam darah, asam urat, dan juga

kolesterol user. Aplikasi ini nantinya juga akan memberitahukan bilamana ada indikator yang melebihi batas normal, dan akan diperingatkan dan segera diberikan saran untuk

segera minum obat, ataupun segera konsultasi ke dokter serta melihat panduan yang akan

disediakan di menu navigasi aplikasi.

Kata Kunci : GCU (blood Glucose, Cholesterol and Uric acid), monitoring, pencatatan,

rancang bangun aplikasi, riwayat kesehatan, tekanan darah

vi Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

DAFTAR ISI

HALAMAN PERNYATAAN ORISINALITAS ................................................... i

LEMBAR PENGESAHAN .................................................................................. ii

KATA PENGANTAR ........................................................................................ iii

HALAMAN PERNYATAAN PERSETUJUAN PUBLIKASI SKRIPSI UNTUK

KEPENTINGAN AKADEMIS ........................................................................... iv

Abstrak ................................................................................................................ v

DAFTAR ISI ...................................................................................................... vi

DAFTAR TABEL ............................................................................................ viii

DAFTAR GAMBAR .......................................................................................... ix

DAFTAR LAMPIRAN ....................................................................................... xi

BAB I .................................................................................................................. 1

PENDAHULUAN ............................................................................................... 1

1.1 Latar Belakang ........................................................................................... 1

1.2 Rumusan Masalah ...................................................................................... 2

1.3 Batasan Masalah ......................................................................................... 2

1.4 Tujuan dan Manfaat .................................................................................... 3

1.5 Metode Pelaksanaan Skripsi ....................................................................... 3

1.5.1 Urutan Metode Waterfall ...................................................................... 3

BAB II ................................................................................................................. 5

TINJAUAN PUSTAKA....................................................................................... 5

2.1 Penelitian Terdahulu ................................................................................... 5

2.2 Pengertian Pencatatan ................................................................................. 5

2.3 Pengertian Monitoring ................................................................................ 5

2.4 Pengertian Rancang Bangun ....................................................................... 6

2.5 Pengertian Tekanan Darah, Kadar Gula Darah, Asam Urat, dan Kolesterol . 6

2.6 Pemrograman Website ................................................................................ 7

2.7 PHP ............................................................................................................ 9

2.8 Hypertext Markup Language (HTML) ........................................................ 9

2.9 Framework Laravel .................................................................................. 10

2.10 Database ................................................................................................. 11

2.11 MySQL .................................................................................................. 11

vii Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

2.12 Voice-to-Text atau Speech-to-Text ......................................................... 11

2.13 Unified Modelling Language (UML) ...................................................... 12

2.14 Use Case Diagram .................................................................................. 12

2.15 Mockup .................................................................................................. 15

2.16 Software Development Life Cycle (SDLC) ............................................. 16

2.17 Black- Box Testing ................................................................................. 18

BAB III.............................................................................................................. 19

PERENCANAAN DAN REALISASI ATAU RANCANG BANGUN ............... 19

3.1 Perancangan Program Aplikasi ................................................................. 19

3.1.1 Deskripsi Aplikasi .............................................................................. 19

3.1.2 Cara Kerja Program Aplikasi.............................................................. 20

3.1.3 Analisis Kebutuhan ............................................................................ 21

3.1.4 Rancangan Program Aplikasi ............................................................. 26

3.1.5 Desain Mockup .................................................................................. 44

3.2 Realisasi Program Aplikasi ....................................................................... 52

BAB IV ............................................................................................................. 70

PEMBAHASAN ................................................................................................ 70

4.1 Pengujian.................................................................................................. 70

4.2 Deskripsi Pengujian .................................................................................. 70

4.3 Prosedur Pengujian ................................................................................... 70

4.4 Data Hasil Pengujian ................................................................................ 72

4.5 Analisis Data Hasil Pengujian ................................................................... 83

BAB V ............................................................................................................... 84

PENUTUP ......................................................................................................... 84

5.1 Simpulan .................................................................................................. 84

5.2 Saran ........................................................................................................ 84

DAFTAR PUSTAKA ........................................................................................ xii

viii Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

DAFTAR TABEL

Tabel 1. Simbol Use Case .................................................................................. 14

Tabel 2 Acuan Hasil Cek ................................................................................... 60

Tabel 3 Rencana Pengujian ................................................................................ 71

Tabel 4 Pengujian Autentikasi............................................................................ 72

Tabel 5 Pengujian Autorisasi ............................................................................. 73

Tabel 6 Hak Akses ............................................................................................. 73

Tabel 7 Uji Tampilan Fitur Pada Halaman User ................................................. 74

Tabel 8 Uji Tampilan Fitur Pada Halaman Admin .............................................. 74

Tabel 9 Uji Fitur Pada User ................................................................................ 75

Tabel 10 Uji Fitur Pada Admin .......................................................................... 76

Tabel 11 Hasil Kuesioner Beta Testing .............................................................. 77

Tabel 12 Skor Skala Tingkat Kepuasan .............................................................. 79

Tabel 13 Rincian Hasil Kuesioner Pertanyaan pertama....................................... 79

Tabel 14 Rincian Hasil Kuesioner Pertanyaan kedua .......................................... 80

Tabel 15 Rincian Hasil Kuesioner Pertanyaan ketiga.......................................... 80

Tabel 16 Rincian Hasil Kuesioner Pertanyaan keempat ...................................... 81

Tabel 17 Rincian Hasil Kuesioner Pertanyaan kelima ........................................ 81

Tabel 18 Rincian Hasil Kuesioner Pertanyaan keenam ....................................... 82

Tabel 19 Rincian Hasil Kuesioner Pertanyaan ketujuh ....................................... 82

ix Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

DAFTAR GAMBAR

Gambar 2. 1 Contoh Use Case Diagram ............................................................. 15

Gambar 2. 2 Urutan Metode Waterfall ............................................................... 16

Gambar 3. 1 Flowchart Aplikasi......................................................................... 20

Gambar 3. 2 Pertanyaan kuesioner mengenai rutinitas dalam melakukan cek tensi

darah, kadar gula darah, asam urat, dan kolesterol .............................................. 21

Gambar 3. 3 Pertanyaan kuesioner mengenai tempat melakukan pengecekan atau

kontrol untuk mengetahui tensi darah, kadar gula darah, asam urat, dan kolesterol

.......................................................................................................................... 22

Gambar 3. 4 Pertanyaan Kuesioner Mengenai manakah yang paling sering

dikontrol atau dicek ........................................................................................... 23

Gambar 3. 5 Pertanyaan Kuesioner Mengenai Kemungkinan Mencatat hasil dari

pemeriksaan atau cek tensi darah, kadar gula darah, asam urat, dan kolesterol ... 23

Gambar 3. 6 Pertanyaan Kuesioner Mengenai media yang dipakai untuk mencatat

hasil pemeriksaan............................................................................................... 24

Gambar 3. 7 Pertanyaan Kuesioner Mengenai Kemungkinan kesulitan bila harus

menghafal resep, obat, atau pantangan terhadap makanan tertentu terkait dengan

hasil pengecekan atau kontrol anda .................................................................... 25

Gambar 3. 8 Usecase Diagram ........................................................................... 27

Gambar 3. 9 Activity Diagram Registrasi ........................................................... 28

Gambar 3. 10 Activity Diagram Login ............................................................... 29

Gambar 3. 11 Activity Diagram Input Hasil Periksa ........................................... 30

Gambar 3. 12 Activity Diagram Melihat Grafik Hasil Pemeriksaan .................... 31

Gambar 3. 13 Activity Diagram membaca Artikel .............................................. 32

Gambar 3. 14 Activity Diagram Voice To Text .................................................. 33

Gambar 3. 15 Activity Diagram Melihat Histori Hasil Pencatatan dan Monitoring

.......................................................................................................................... 34

Gambar 3. 16 Activity Diagram membaca Panduan ........................................... 35

Gambar 3. 17 Activity Diagram Mencetak Riwayat Pemeriksaan dan Grafik ..... 36

Gambar 3. 18 Activity Diagram Akses Data User dan Admin ............................ 37

Gambar 3. 19 Activity Diagram Edit dan Update Panduan ................................. 38

Gambar 3. 20 Activity Diagram Edit dan Update Artikel ................................... 39

Gambar 3. 21 Activity Diagram Logout ............................................................. 40

Gambar 3. 22 Entity Relationship Diagram Admin ............................................ 41

Gambar 3. 23 Entity Relationship Diagram User ................................................ 43

Gambar 3. 24 Mockup Halaman Registrasi ........................................................ 44

Gambar 3. 25 Mockup Halaman Login .............................................................. 45

Gambar 3. 26 Mockup Halaman Home ............................................................. 45

Gambar 3. 27 Mockup Halaman Checkup .......................................................... 46

Gambar 3. 28 Mockup Halaman Warning .......................................................... 47

Gambar 3. 29 Mockup Halaman Article ............................................................ 47

Gambar 3. 30 Mockup Halaman Graph .............................................................. 48

Gambar 3. 31 Mockup Halaman Voice To Text ................................................. 49

x Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

Gambar 3. 32 Mockup Halaman Akses User Untuk Admin ................................ 49

Gambar 3. 33 Mockup Halaman Checkup History ............................................. 50

Gambar 3. 34 Mockup Halaman Article Admin ................................................. 51

Gambar 3. 35 Mockup Halaman Guide (Panduan) ............................................ 51

Gambar 3. 36 Mockup Halaman Graph Admin .................................................. 52

Gambar 3. 37 Tampilan Halaman Login............................................................. 53

Gambar 3. 38 Source Code Halaman Login ....................................................... 54

Gambar 3. 39 Tampilan Halaman Register ......................................................... 55

Gambar 3. 40 Source Code Halaman Register .................................................... 56

Gambar 3. 41 Tampilan Halaman Home ............................................................ 57

Gambar 3. 42 Source Code Halaman Home ....................................................... 57

Gambar 3. 43 Tampilan Halaman Checkup ........................................................ 58

Gambar 3. 44 Source Code Halaman Checkup ................................................... 60

Gambar 3. 45 Tampilan Halaman Checkup_Create ............................................ 60

Gambar 3. 46 Source Code Halaman Checkup_Create ....................................... 61

Gambar 3. 47 Tampilan Halaman Warning ........................................................ 62

Gambar 3. 48 Source Code Halaman Warning ................................................... 62

Gambar 3. 49 Tampilan Halaman Article ........................................................... 63

Gambar 3. 50 Source Code Halaman Article ...................................................... 64

Gambar 3. 51 Tampilan Halaman Graph ............................................................ 64

Gambar 3. 52 Source Code Halaman Graph ....................................................... 65

Gambar 3. 53 Tampilan Halaman Voice to Text................................................. 65

Gambar 3. 54 Source Code Halaman Voice to Text............................................ 66

Gambar 3. 55 Tampilan Halaman User_Access (Admin) ................................... 66

Gambar 3. 56 Source Code Tampilan Halaman User_Access (Admin) ............... 67

Gambar 3. 57 Tampilan Halaman Article_Admin .............................................. 67

Gambar 3. 58 Tampilan Halaman Guide (Panduan)............................................ 68

Gambar 3. 59 Tampilan Halaman Checkup History (Admin) ............................. 69

Gambar 3. 60 Tampilan Halaman Graph (Admin) .............................................. 69

xi Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

DAFTAR LAMPIRAN

Lampiran 1 Daftar Riwayat Hidup .................................................................... xiii

Lampiran 2 Data Hasil Kuesioner ..................................................................... xiv

Lampiran 3 Data Hasil Kuesioner Pengujian Beta Testing ............................... xvii

1 Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

BAB I

PENDAHULUAN

1.1 Latar Belakang

Perkembangan zaman yang sudah sangat modern dan signifikan ini mendukung

banyak sekali perubahan, mulai dari skala mikro yaitu pada lingkungan sosial

masyarakat, sampai dengan skala makro, yaitu kehidupan berbangsa dan bernegara.

Gaya hidup dan kegiatan sehari-hari tak lepas dari barang-barang elektronik

canggih yang dilengkapi dengan berbagai fitur. Pada masa sekarang, segala sektor

kehidupan sangat terpengaruh dengan kehadiran dan inovasi dari teknologi terkini.

Seperti pada sektor kesehatan misalnya, sudah banyak sekali teknologi yang dapat

membantu kegiatan pada sektor kesehatan.

Setiap orang mempunyai pola makan dan gaya hidup yang berbeda dan juga riwayat

kesehatan yang berbeda pula, dibarengi dengan beberapa faktor, seperti faktor

genetik contohnya, bukan tidak mungkin bahwa kondisi ini membuat setiap orang

memiliki masalah tersendiri bagi kesehatan dan juga pola hidupnya. Masalah

tekanan darah dan juga kadar gula dalam darah yang tinggi misalnya, ini merupakan

salah satu indikator yang melibatkan faktor genetik, Bukan berarti orang yang tidak

mempunyai riwayat genetika yang bermasalah dengan tekanan darah dan kadar

gula dalam darah bakal terbebas dari masalah kesehatan, pola makan dan gaya

hidup yang diaplikasikan seseorang dalam kehidupannya sehari-hari pun juga akan

berpengaruh bagi riwayat kesehatan sesorang.

Sudah banyak sekali barang elektronik ataupun media semacamnya yang dijual

bebas di pasaran untuk mengukur tekanan darah, kadar gula darah, asam urat, dan

kolesterol. Banyak dari para konsumen membeli alat tersebut hanya untuk

mengetahui hasil dari pemeriksaan yang dilakukan, tanpa mau mengingat ataupun

mencatat hasilnya pada media lain, seperti kertas misalnya, agar bisa dijadikan

media kontrol dan juga monitoring kesehatan secara mandiri perihal tekanan darah,

kadar gula darah, asam urat, dan kolesterol.

Untuk itu, dibuatlah aplikasi untuk pencatatan dan monitoring untuk mengetahui

tekanan darah, kadar gula dalam darah, asam urat, dan juga kolesterol agar riwayat

2

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

kesehatan akan lebih terkontrol. Aplikasi ini akan mengandalkan data yang dicatat

oleh user setelah melakukan pengecekan dengan alat ukur tekanan darah

(sphygmomanometer), dan GCU meter (blood Glucose, Cholesterol and Uric acid

meter) untuk memonitoring tekanan darah, kadar gula dalam darah, asam urat, dan

juga kolesterol user. Aplikasi ini nantinya juga akan memberitahukan bilamana ada

indikator yang melebihi batas normal yang ditampilkan pada riwayat pencatatan,

dan juga menyediakan pencatatan hasil pemeriksaan dalam bentuk grafik. Aplikasi

ini juga dapat mencetak hasil riwayat pencatatan dari user yang dapat menjadi

media kontrol atau monitoring pada saat dilakukan pemeriksaan, kontrol, maupun

konsultasi dengan petugas kesehatan di fasilitas kesehatan. Penelitian ini

menerapkan sebuah merode Software Development Life Cycle (SDLC), yaitu

metode waterfall. Dimana, metode ini menerapkan tahapan-tahapan yang sistematis

yang memudahkan untuk diimplementasikan.

1.2 Rumusan Masalah

Berdasarkan latar belakang yang telah diuraikan di atas, maka perumusan masalah

dalam pembuatan sistem ini adalah :

a) Bagaimana membuat aplikasi pencatatan dan monitoring untuk tekanan darah,

kadar gula darah, asam urat, dan kolesterol?

b) Bagaimana user dapat mengetaui kadar normal dan tidak normal (melebihi

batas rata-rata) pada setiap hasil pemeriksaan?

c) Bagaimana membuat fitur yang dapat menampilkan daftar riwayat pencatatan

dan monitoring untuk tekanan darah, kadar gula darah, asam urat, dan

kolesterol?

1.3 Batasan Masalah

Batasan masalah dalam pembuatan aplikasi ini adalah :

a) Aplikasi ini hanya melakukan pencatatan dan monitoring (riwayat pencatatan)

user dari hasil pemeriksaan tekanan darah, kadar gula darah, asam urat, dan

kolesterol.

b) Aplikasi ini dapat menampilkan tampilan daftar riwayat pencatatan dari hasil

pemeriksaan tekanan darah, kadar gula darah, asam urat, dan kolesterol.

3


c) Aplikasi ini dapat mencetak daftar riwayat pencatatan dari hasil pemeriksaan

tekanan darah, kadar gula darah, asam urat, dan kolesterol user yang dapat

menjadi media kontrol atau monitoring pada saat dilakukan pemeriksaan,

kontrol, maupun konsultasi dengan petugas kesehatan di fasilitas kesehatan.

d) Aplikasi ini berbasis website dengan menggunakan framework laravel dan

database MySQL.

1.4 Tujuan dan Manfaat

Tujuan dari pembuatan aplikasi ini adalah, membuat aplikasi pencatatan dan

monitoring untuk tekanan darah, kadar gula darah, asam urat, dan kolesterol yang

mudah diakses user yang dikemas secara ringkas dalam satu kesatuan media.

Adapun manfaat yang dapat diperoleh dari pembuatan aplikasi ini antara lain adalah

:

a) Memudahkan user dalam melakukan pencatatan untuk monitoring riwayat

tekanan darah, kadar gula darah, asam urat, dan kolesterol.

b) Memberikan opsi alternatif yang dapat menjadi media kontrol atau monitoring

pada saat dilakukan pemeriksaan, kontrol, maupun konsultasi dengan petugas

kesehatan di fasilitas kesehatan.

1.5 Metode Pelaksanaan Skripsi

Untuk menyelesaikan aplikasi ini akan digunakan metode waterfall, metode

waterfall merupakan model pengembangan perangkat lunak yang menekankan

fase-fase yang berurutan dan sistematis. Urutan dalam Metode Waterfall bersifat

serial yang dimulai dari proses perencanaan, analisa, desain, implementasi pada

sistem, dan verifikasi.

1.5.1 Urutan Metode Waterfall

a) Requirement Analysis

Sebelum melakukan pengembangan perangkat lunak, seorang pengembang harus

mengetahui dan memahami bagaimana informasi kebutuhan penggguna terhadap

sebuah perangkat lunak. Metode pengumpulan informasi ini dapat diperoleh

dengan berbagai macam cara diantaranya, diskusi, observasi, survei, wawancara,

dan sebagainya. Informasi yang diperoleh kemudian diolah dan dianalisa sehingga

4


didapatkan data atau informasi yang lengkap mengenai spesifikasi kebutuhan

pengguna akan perangkat lunak yang akan dikembangkan.

b) Design

Informasi mengenai spesifikasi kebutuhan dari tahap Requirement Analysis

selanjutnya di analisa pada tahap ini untuk kemudian diimplementasikan pada

desain pengembangan. Perancangan desain dilakukan dengan tujuan membantu

memberikan gambaran lengkap mengenai apa yang harus dikerjakan.

c) Implementation

Tahap implementation and unit testing merupakan tahap pemrograman. Pembuatan

perangkat lunak dibagi menjadi modul-modul kecil yang nantinya akan

digabungkan dalam tahap berikutnya. Disamping itu, pada fase ini juga dilakukan

pengujian dan pemeriksaan terhadap fungsionalitas modul yang sudah dibuat,

apakah sudah memenuhi kriteria yang diinginkan atau belum.

d) Integration and Testing

Setelah seluruh unit atau modul yang dikembangkan dan diuji di tahap

implementasi selanjutnya diintegrasikan dalam sistem secara keseluruhan. Setelah

proses integrasi selesai, selanjutnya dilakukan pemeriksaan dan pengujian sistem

secara keseluruhan untuk mengidentifikasi kemungkinan adanya kegagalan dan

kesalahan sistem.

e) Operation and Maintenance

Pada tahap terakhir dalam Metode Waterfall, perangkat lunak yang sudah jadi

dioperasikan pengguna dan dilakukan pemeliharaan. Pemeliharaan memungkinkan

pengembang untuk melakukan perbaikan atas kesalahan yang tidak terdeteksi pada

tahap-tahap sebelumnya.


BAB II

TINJAUAN PUSTAKA

2.1 Penelitian Terdahulu

Penelitian terdahulu yang pernah dilakukan yang berhubungan dengan monitoring

adalah penelitian oleh Lili Rusdiana dan Heri Setiawan (2018), yaitu merancang

aplikasi monitoring kesehatan ibu hamil untuk memudahkan pembangunan aplikasi

melalui gambaran dalam bentuk diagram dan sketsa digital untuk monitoring

kesehatan Ibu hamil pada Bidan praktik mandiri. Perancangan ini sebagai salah satu

tahapan dalam membangun aplikasi dengan permasalahan dari pengolahan data saat

ini hanya menggunakan buku besar yang dimiliki Bidan sebagai media pencatatan

riwayat kesehatan Ibu hamil untuk monitoring yang dilakukan oleh Bidan. Yang

dilengkapi dengan akses yang memudahkan Bidan disertai fitur seperti hak akses

login, input data, dan penyimpanan data yang digunakan untuk monitoring

kesehatan Ibu hamil.

2.2 Pengertian Pencatatan

Menurut Gunandi (2008:9) menjelaskan bahwa Pencatatan adalah : “Pencatatan

adalah proses data perusahaan dengan teknik tertentu dan mengolahnya sehingga

dapat disusun menjadi laporan”.

2.3 Pengertian Monitoring

Monitoring sebagai suatu proses mengukur, mencatat, mengumpulkan, memproses

dan mengkomunikasikan informasi untuk membantu pengambilan keputusan

manajemen program atau proyek (Calyton dan Petry 1983)

6


2.4 Pengertian Rancang Bangun

Rancang bangun terdiri dari dua kata, yaitu rancang dan bangun. Kata rancang itu

sendiri menurut Pressman (2009) perancangan atau rancang merupakan

serangkaian prosedur untuk menterjemahkan hasil analisa dan sebuah sistem ke

dalam bahasa pemrograman untuk mendeskripsikan dengan detail bagaimana

komponen-komponen sistem di-implementasikan.

Sedangkan kata bangun menurut Pressman (2009) pengertian pembangunan atau

bangun sistem adalah kegiatan menciptakan sistem baru maupun mengganti atau

memperbaiki sistem yang telah ada secara keseluruhan. Jadi dapat disimpulkan

bahwa Rancang Bangun adalah penggambaran, perencanaan, dan pembuatan sketsa

atau pengaturan dari beberapa elemen yang terpisah kedalam suatu kesatuan yang

utuh dan berfungsi. Dengan demikian pengertian rancang bangun merupakan

kegiatan menerjemahkan hasil analisa ke dalam bentuk paket perangkat lunak

kemudian menciptakan sistem tersebut atau memperbaiki sistem yang sudah ada.

2.5 Pengertian Tekanan Darah, Kadar Gula Darah, Asam Urat, dan

Kolesterol

Tekanan darah merujuk kepada tekanan yang dialami darah pada pembuluh arteri

darah ketika darah di pompa oleh jantung ke seluruh anggota tubuh manusia.

Tekanan darah dibuat dengan mengambil dua ukuran, yaitu Sistole adalah tekanan

ketika jantung mempompa darah, sedangkan diastole adalah tekanan pada jantung

saat periode istirahat di antara detak jantung. Sebagai contoh, jika seseorang

memiliki tekanan darah 120/80 mmHg (tekanan darah normal), yang artinya

tekanan darah sistole nya adalah 120 mmHg dan tekanan darah diastole nya 80

mmHg.

Kadar gula darah adalah banyaknya zat gula atau glukosa di dalam darah. Kisaran

kadar gula darah normal pada tubuh: Sebelum makan: sekitar 70-104 mg/dL. Dua

jam setelah makan: kurang dari 140 mg/dL. Setelah tidak makan (puasa) selama

setidaknya delapan jam: kurang dari 104 mg/dL.


Penyakit asam urat atau gout adalah sejenis penyakit sendi yang terjadi akibat kadar

asam urat yang terlalu tinggi dalam darah. Pada kondisi normal, asam urat larut

dalam darah dan keluar melalui urine. Tetapi dalam kondisi tertentu, tubuh dapat

menghasilkan asam urat dalam jumlah berlebih atau mengalami gangguan dalam

membuang kelebihan asam urat, sehingga asam urat menumpuk dalam tubuh. kadar

normal asam urat dalam darah 3 sampai 7,2 miligram perdesiliter (mg/dl) bagi laki-

laki, dan 2 sampai 6 mg/dl pada perempuan.

Kolesterol adalah metabolit yang mengandung lemak sterol yang ditemukan pada

membran sel dan disirkulasikan dalam plasma darah. Merupakan sejenis lipid yang

merupakan molekul lemak atau yang menyerupainya. Kolesterol merupakan jenis

khusus lipid yang disebut steroid. Kolesterol membantu tubuh memproduksi

vitamin D, sejumlah hormon, dan asam empedu untuk mencerna lemak. Secara

umum, kadar kolesterol total yang sehat adalah di bawah 200 mg/dL. Kadar

kolesterol 200–239 mg/dL dianggap masuk pada ambang batas tinggi. Kadar

kolesterol di atas 240 mg/dL dianggap tinggi.

2.6 Pemrograman Website

Website ini sendiri nantinya akan dikembangkan seperti pembuatan website pada

umumnya. Dalam pembuatannya, website terbagi kedalam dua sisi baik tampilan

depan atau biasa disebut frontend, maupun tampilan belakang yang biasa disebut

dengan backend. Didalam pengembangan kedua sisi tersebut, baik frontend

maupun backend didukung oleh teknologi yang sesuai. Teknologi yang digunakan

untuk mendukung pengembangan frontend adalah HTML, CSS, serta Bootstrap.

Disisi lain pengembangan backend didukung oleh Bahasa pemrograman PHP

dengan framework Laravel dibantu dengan GitHub. Menurut Binanto (2009:1) kata

program dan pemrograman dapat diartikan sebagai berikut :

a) Mendeskripsikan instruksi-instruksi tersendiri yang biasanya disebut source

code yang dibuat oleh programmer.

b) Mendeskripsikan suatu keseluruhan bagian dari software yang executable.

c) Program merupakan himpunan atau kumpulan instruksi tertulis yang dibuat

oleh programmer atau suatu bagian executable dari suatu software.


d) Pemrograman berarti membuat program komputer.

e) Pemrograman merupakan suatu kumpulan urutan perintah ke komputer untuk

mengerjakan sesuatu.

Perintah-perintah ini membutuhkan suatu bahasa tersendiri yang dapat dimengerti

oleh komputer. Sedangkan menurut Yulikuspartono (2009:29), mengemukakan

bahwa, “program merupakan sederetan instruksi atau statement dalam bahasa yang

dimengerti oleh komputer yang bersangkutan”. Menurut Shelly dan Vermaat

(2012:664), program komputer adalah sekumpulan perintah yang memberitahukan

komputer bagaimana mengerjakan tugas-tugasnya. Programmer komputer,

terkadang disebut pengembang, menulis dan memodifikasi komputer. Untuk

menciptakan sebuah program, pemrograman biasanya menulis atau membuat kode

perintah-perintah dalam program dengan menggunakan bahasa pemrograman.

Sedangkan untuk pengertian website itu sendiri, menurut Bekti (2015:35)

menyimpulkan bahwa: “Website merupakan kumpulan halaman-halaman yang

digunakan untuk menampilkan informasi teks, gambar diam atau gerak, animasi,

suara,dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis

yang membentuk satu rangkaian bangunan yang saling terkait, yang masing-masing

dihubungkan dengan jaringan-jaringan halaman”. Sedangkan Menurut Rahmadi

(2013:1), website (lebih dikenal dengan sebutan situs) adalah sejumlah halaman

web yang memiliki topik saling terkait, terkadang disertai pula dengan berkas-

berkas gambar, video atau jenis-jenis berkas lainnya. Sedangkan menurut Ippho

Santoso dalam Rahmadi (2013:1), membagi website menjadi golongan kanan dan

golongan kiri. Dalam website dikenal dengan sebutan website dinamis dan website

statis.

a) Website statis

Website statis adalah website yang mempunyai halaman konten yang tidak

berubah-ubah.

b) Website dinamis

Website dinamis merupakan website yang secara struktur ditujukan untuk update

sesering mungkin.


Jadi, dari beberapa pengertian diatas, website merupakan kumpulan halaman-

halaman yang dapat menampilkan teks, gambar, animasi, video, suara yang masing-

masing dihubungkan dengan jaringan-jaringan halaman yang dimaksudkan untuk

memberikan hak akses kepada user untuk kebutuhan data dan informasi.

2.7 PHP

PHP yang merupakan merupakan kependekan dari Hypertext Preprocessor adalah

bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak

dipakai untuk memprogram situs web dinamis. Menurut Arief (2011c:43), PHP

adalah Bahasa server-side –scripting yang menyatu dengan HTML untuk membuat

halaman web yang dinamis. Karena PHP merupakan server-side-scripting maka

sintaks dan perintah-perintah PHP akan diesksekusi diserver kemudian hasilnya

akan dikirimkan ke browser dengan format HTML. Dengan demikian kode

program yang ditulis dalam PHP tidak akan terlihat oleh user sehingga keamanan

halaman web lebih terjamin. PHP dirancang untuk membuat halaman web yang

dinamis, yaitu halaman web yang dapat membentuk suatu tampilan berdasarkan

permintaan terkini, seperti menampilkan isi basis data ke halaman web. Sedangkan

menurut Nugroho (2006 b:61), “PHP atau singkatan dari Personal Home Page

merupakan bahasa skrip yang tertanam dalam Hypertext Markup Language

(HTML) untuk dieksekusi dan bersifat server side”. PHP termasuk dalam open

source product, sehingga source code PHP dapat diubah dan didistribusikan secara

bebas.

2.8 Hypertext Markup Language (HTML)

Sedangkan untuk membuat kerangka dari website-nya itu sendiri menggunakan

HTML. Menurut Lia Kuswayatno : “HTML merupakan halaman yang berada pada

suatu situs internet atau web”. HTML merupakan metode yang menautkan (link)

satu dokumen ke dokumen lain melalui teks. Menurut Arief (2011:23) “HTML

merupakan salah satu format yang digunakan dalam pembuatan dokumen atau

aplikasi yang berjalan di halaman web”. Sedangkan menurut Astamal (2006:8),

Hyper Text Markup Language (HTML) adalah simbol-simbol atau tag-tag yang


dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada

web browser. Tag-tag HTML selalu diawali dengan dan diakhiri dengan dimana x

tag HTML seperti b, i, u dan sebagainya. Namun ada juga tag yang tidak diakhiri

dengan tanda. Berikut merupakan penjelasan dari HTML per kata :

a) Hypertext adalah metode dimana kita “berpindah” disekeliling web, dengan

meng-klik sebuah teks yang bernama hyperlink. Hyperlink adalah sebuah teks

khusus di internet, dimana saat teks tersebut diklik, akan membawa kita ke

halaman web selanjutnya atau halaman web lain yang telah ditentukan.

b) Mark Up adalah hal yang dilakukan oleh tag HTML kepada teks yang ada

didalamnya. HTML menandai teks yang berada didalamnya sebagai tipe teks

tertentu. Misalnya saja jika kita menandai sebuah teks dengan tag html <i>,

maka teks tersebut akan berubah menjadi italic (huruf yang miring). Sedangkan

jika kita menandainya dengan <b>, maka teks tersebut akan berubah menajadi

bold (huruf tebal).

c) Language yang artinya bahasa, HTML adalah sebuah bahasa yang memiliki

kata kata berupa kode dan syntax seperti bahasa yang lain.

2.9 Framework Laravel

Pembuatan website ini sendiri menggunaka framework laravel sebagai

pengembangan backend. Laravel adalah framework bahasa pemrograman

Hypertext Preprocessor (PHP) yang ditujukan untuk pengembangan aplikasi

berbasis web dengan menerapkan konsep Model View Controller (MVC).

Framework ini dibuat oleh Taylor Otwell dan pertama kali dirilis pada tanggal 9

Juni 2011. Laravel berlisensi open source yang artinya bebas digunakan tanpa harus

melakukan pembayaran. Alamat website resmi dari framework Laravel adalah

https://laravel.com. Fitur-fitur modern Laravel yang sangat membantu developer

dalam membuat aplikasi adalah Bundles, Eloquent ORM (Object-Relational

Mapping), Query Builder, Application Logic, Reverse Routing, Resource

Controller, Class Auto Loading, View Composers, Blade, IoC Containers,

Migration, Database Seeding, Unit Testing, Automatic Pagination, Form request,

dan Middleware. Framewok Laravel juga memiliki beberapa keunggulan sebagai

berikut :


a) Menggunakan Command Line Interface (CLI) Artisan.

b) Menggunakan package manager PHP Composer.

c) Penulisan kode program lebih singkat, mudah dimengerti, dan ekspresif.

2.10 Database

Menurut Kristanto (1994:1), Database adalah kumpulan file-file yang saling

berelasi, relasi tersebut biasa ditunjukkan dengan kunci dari tiap file yang ada. Satu

database menunjukan satu kumpulan data yang dipakai dalam satu lingkup

perusahaan, instansi. Data yang ada didalam aplikasi nya di input dan disimpan

didalam tabel-tabel yang telah ditentukan dulu pada Database yang telah dirancang.

Database yang digunakan dalam pengembangan Aplikasi ini adalah MySQL

2.11 MySQL

Menurut Wardani (2012:1), MySQL adalah sebuah perangkat lunak sistem

manajemen basis data SQL atau yang dikenal dengan DBMS (Database

Management System), database ini multithread, multiuser. Beberapa alasan yang

mendasari pemilihan MySQL sebagai database yang digunakan dalam

pengembangan Aplikasi ini adalah karena MySQL dapat dengan mudah di Backup

dan di Restore sehingga kemungkinan kehilangan data menjadi lebih kecil, lalu

MySQL dapat dikoneksikan dengan berbagai macam Bahasa pemrograman lainya

seperti C, C++, Java, PHP dan Python sehingga dalam pengembangan Aplikasi ini

untuk jangka panjang tidak harus mengubah database yang ada meskipun harus

mengubah teknologi yang digunakan saat ini yaitu dengan menggunakan Bahasa

pemrograman PHP.

2.12 Voice-to-Text atau Speech-to-Text

Menurut penelitian yang dilakukan oleh (Elizabeth Irenne Yuwono dan Tony

Antonio, 2015) yang berjudul “Studi Format Audio dan Teks Untuk Modul Speech

to Text” menjelaskan bahwa akurasi hasil speech to text dipengaruhi oleh

keterbatasan pemrosesan audio pada format tertentu. Selain format audio,


kompleksitas karakteristik ucapan manusia juga merupakan aspek penting yang

harus diperhitungkan dalam pengembangan modul speech to text. Modul speech to

text harus dapat mencakup ragam karakter huruf dalam berbagai bahasa yang ada

di dunia. Jadi, Speech to text (STT) adalah sistem yang berfungsi untuk mengubah

bahasa lisan menjadi bahasa tulisan. Masukan sistem adalah ucapan manusia,

selanjutnya sistem akan mengidentifikasikan kata atau kalimat yang diucapkan dan

menghasilkan teks yang sesuai dengan apa yang diucapkan.Sinyal ucapan pertama

kali akan dilewatkan pada bagian penganalisis ucapan untuk mendapatkan besaran-

besaran atau ciri-ciri yang mudah diolah pada tahap berikutnya. Untuk setiap

ucapan yang berbeda akan dihasilkan pola ciri yang berbeda.

2.13 Unified Modelling Language (UML)

Dalam pengaplikasiannya, pembuatan website ini melalui beberapa tahapan, salah

satunya adalah pemodelan kebutuhan (requirement), membuat analisis, serta

desain. Menurut Booch (2005:7) UML adalah Bahasa standar untuk membuat

rancangan software. UML biasanya digunakan untuk menggambarkan dan

membangun, dokumen artifak dari software –intensive system. Sedangkan Menurut

Nugroho (2009:4), Unified Modeling Language (UML) adalah Metodologi

kolaborasi antara metoda-metoda Booch, Object Modeling Technique (OMT), serta

Object Oriented Software Enggineering (OOSE) dan beberapa metoda lainnya,

merupakan metodologi yang paling sering digunakan saat ini untuk analisa dan

perancangan sistem dengan metodologi berorientasi objek mengadaptasi maraknya

penggunaan bahasa “pemrograman berorientasi objek” (OOP). Ada juga Menurut

Herlawati (2011:10), bahwa beberapa literature menyebutkan bahwa UML

menyediakan sembilan jenis diagram, yang lain menyebutkan delapan karena ada

beberapa diagram yang digabung, misanya diagram komunikasi, diagram urutan

dan diagram pewaktuan digabung menjadi diagram interaksi.

2.14 Use Case Diagram

Untuk memenuhi kebutuhan pemodelan dari kebutuhan website, maka dibuatlah

use case Duagram. Menurut Murad (2013:57)[7], “Diagram Use Case adalah


diagram yang bersifat status yang memperlihatkan himpunan use case dan aktor-

aktor (suatu jenis khusus dari kelas). Diagram ini memiliki 2 fungsi, yaitu

mendefinisikan fitur apa yang harus disediakan oleh sistem, dan menyatakan sifat

sistem dari sudut pandang user”. Menurut Triandini (2012:18)[8], langkah-langkah

membuat diagram use case adalah sebagai berikut :

a) Mengidentifikasi aktor. Perhatikan bahwa aktor sebenarnya adalah peran yang

dimainkan oleh pengguna. Alih-alih menyusun daftar aktor sebagai sebuah

individu, sebaiknya identifikasi peran spesifik yang dimainkan oleh orang-

orang tersebut. Ingatlah orang yang sama mungkin memainkan berbagai peran

karena ia menggunakan sistem. Sistem lain juga dapat menjadi aktor dari

sistem.

b) Setelah peran aktor teridentifikasi, langkah berikutnya adalah menyusun

tujuan-tujuan yang ingin dicapai oleh peran-peran tersebut dalam penggunaan

sistem. Tujuan tersebut merupakan tugas yang dilakukan oleh aktor untuk

mencapai beberapa fungsi bisnis yang memberikan nilai tambah bagi bisnis.


Tabel 1. Simbol Use Case

NO SIMBOL DESKRIPSI

1

Aktor, dalam Use Case aktor

merupakan Subjek yang melakukan

pekerjaan maupun aktivitas.

Didalam Use Case peran sebagai

Aktor biasanya di isi oleh User.

2

Use Case, merupakan bagian sistem

yang dapat dikerjakan oleh Aktor,

biasanya Use Case didefinisikan

dengan kata kerja.

3

Association, adalah penghubung

antara Aktor dan Use case yang

saling terkait dan terjadi Interaksi.

4

Direct Association, adalah

hubungan antara Aktor dan Use

case yang terjadi 1 arah.

5

Include merupakan penghubung

antar Use Case dimana Use Case

yang dihubungkan tidak dapat

berdiri sendiri apabila Use Case

penghubung tidak ada

6

Extends merupakan penghubung

antara Use Case dimana Use Case

yang dihubungkan merupakan

tambahan fungsional dari Use Case

Penghubung

< include >

< extends >


Gambar 2. 1 Contoh Use Case Diagram

2.15 Mockup

Selain dalam memenuhi kebutuhan dalam sisi requirement, kebutuhan akan desain

tampilan website juga tak kalah penting, maka dari itu dibuatlah desain rancangan

tampilan dari website ini nantinya, atau biasa disebut denga mockup. Mockup

merupakan media visual yang digunakan untuk melihat preview sebuah konsep

desain. Selanjutnya diberikan efek visual sehingga hasil gambar terlihat

menyerupai wujud yang sebenarnya. Mockup akan memberikan gambaran desain

sebelum diaplikasikan menjadi wujud sebenarnya, sehingga memudahkan dalam

pengerjan pembuatan website. Mockup pun akan membantu desain terlihat nyata


dan lebih menarik karena variasi dua dimensi dan tiga dimensi. Mockup

mempunyai beberapa fungsi sebagai berikut :

a) Melihat preview desain sebelum dicetak atau diproduksi.

b) Biaya yang dikeluarkan hemat karena tidak perlu mencetak desain yang belum

fix.

c) Sebagai kontrol untuk menjaga display desain agar tidak melenceng dari

konsep awal.

d) Menjadi pedoman teknis perancangan desain.

e) Dapat melihat gambaran nyata bagaimana desain saat sudah diproduksi.

2.16 Software Development Life Cycle (SDLC)

Dalam pembuatan website ini, metode pengembangan yang diterapkan adalah

dengan menggunakan metode Software Development Life Cycle (SDLC). Menurut

Susanto (2016), SDLC adalah metodologi umum yang digunakan untuk

mengembangkan sistem informasi. SDLC terdiri dari beberapa fase yang dimulai

dari fase perencanaan, analisis, perancangan, implementasi hingga pemeliharaan

sistem. Konsep SDLC ini mendasari berbagai jenis model pengembangan

perangkat lunak untuk membentuk suatu kerangka kerja untuk perencanaan dan

pengendalian pembuatan sistem informasi. Model SDLC yang sering digunakan

antara lain Waterfall dan Prototyping. Model yang digunakan dalam pengembangan

website ini adalah Waterfall Model.

Gambar 2. 2 Urutan Metode Waterfall


Menurut Susanto, Andriana, (2016). Model waterfall adalah model pengembangan

perangkat lunak yang paling sering digunakan. Model pengembangan ini bersifat

linear dari tahap awal pengembangan sistem yaitu tahap perencanaan sampai tahap

akhir pengembangan sistem yaitu tahap pemeliharaan. Tahapan berikutnya tidak

akan dilaksanakan sebelum tahapan sebelumnya selesai dilaksanakan dan tidak bisa

kembali atau mengulang ke tahap sebelumnya. Didalam waterfall model secara

garis besar langkah langkah yang dilakukan adalah sebagai berikut :

a) Analisis Kebutuhan

Pada tahapan analisis kebutuhan, tahapan ini melakukan pengumpulan data dari

sistem yang ada. Pengumpulan datanya bisa melalui beberap media seperti

penelitian, wawancara, studi literature dan lain lain. Pada tahap ini bagian yang

bertanggung jawab adalah Sistem Analis, dan hasil yang diperoleh adalah user

requirement system, yang nantinya akan menjadi acuan dalam pembuatan design

system.

b) Desain Sistem

Pada tahapan design system, system designer akan melakukan penerjemahan dari

hasil analisis atau user requirement system menjadi sesuatu yang dapat

merepresentasikan gambaran aplikasi, seperti UML, Prototype maupun User

Interface. Hasil dari tahapan ini nantinya akan menjadi acuan dalam pengembangan

sistem.

c) Implementasi

Pada tahapan implementasi, hasil yang didapat dari tahap design system akan di

kembangkan dalam penulisan script. Programmer merupakan pemegang tanggung

jawab dari tahapan ini. Dengan menggunakan Teknologi yang diperlukan,

programmer melakukan pembuatan aplikasi sesuai dengan desain yang ada. Tidak

hanya dibuat programmer bertanggung jawab untuk mengembangkan aplikasi yang

memiliki kinerja yang baik, seperti tidak adanya bug dan error. Setelah aplikasi jadi,

maka aplikasi akan melalui proses testing untuk menyempurnakan Aplikasi yang

sudah dibuat. Beberapa test yang dapat dilakukan dalam masa pengembangan


aplikasi adalah blackbox testing maupun whitebox testing. Quality Assurance

memegang tanggung jawab dalam melakukan testing aplikasi.

d) Penerapan

Setelah aplikasi melewati tahap Implementasi, aplikasi harus melalui tahapan

penerapan. Pada tahapan ini bisa aplikasi akan diterapkan kedalam penerapan yang

sesungguhnya.

e) Pemeliharaan

Aplikasi yang sudah jadi pasti akan mengalami pemeliharaan serta pengembangan

untuk mengikuti kemajuan teknologi serta kebutuhan kedapanya. Oleh sebab itu

apabila aplikasi sudah di rilis dan diterapkan secara publik, maka untuk mendukung

adanya perubahan serta pengembangan maka aplikasi akan melalui tahap ini.

2.17 Black- Box Testing

Black Box Testing merupakan pengujian yang didasarkan pada detail aplikasi

seperti tampilan aplikasi, fungsi-fungsi yang ada pada aplikasi, dan kesesuaian alur

fungsi dengan bisnis proses yang diinginkan oleh customer. Black-box Testing ini

lebih menguji ke tampilan luar (interface) dari suatu aplikasi agar mudah digunakan

oleh Customer. Pengujian ini tidak melihat dan menguji souce code program.

Black-box Testing bekerja dengan mengabaikan struktur kontrol sehingga

perhatianya hanya terfokus pada informasi domain.


BAB III

PERENCANAAN DAN REALISASI ATAU RANCANG BANGUN

3.1 Perancangan Program Aplikasi

Proses perancangan sistem dari rancang bangun aplikasi pencatatan dan monitoring

tekanan darah, kadar gula darah, asam urat, dan kolesterol berbasis website ini

dibangun dengan menggunakan framework laravel dan dikembangan dengan

metode waterfall. Metode waterfall ini memiliki beberapa pendekatan terstruktur

mulai dari analisis kebutuhan, desain sistem, pemrograman, dan pengujian. Pada

bab ini akan menjelaskan tentang deskripsi aplikasi, cara kerja aplikasi, dan

penjabaran dari pendekatan metode waterfall.

3.1.1 Deskripsi Aplikasi

Aplikasi ini akan mengandalkan data yang dicatat oleh user setelah melakukan

pengecekan dengan alat ukur tekanan darah (sphygmomanometer), dan GCU meter

(blood Glucose, Cholesterol and Uric acid meter) untuk memonitoring tekanan

darah, kadar gula dalam darah, asam urat, dan juga kolesterol user yang dapat

ditampilkan dalam riwayat pencatatan dan juga menampilkan pencatatan hasil

pemeriksaan dalam bentuk grafik. Aplikasi ini dilengkapi dengan fitur panduan

untuk membaca hasil pemeriksaan dan juga artikel yang berisikan artikel seputar

kesehatan yang diharapkan dapat membantu untuk menambah pengetahuan bagi

user. Aplikasi ini juga bisa mencetak hasil riwayat pencatatan dari user yang dapat

menjadi media kontrol atau monitoring pada saat dilakukan pemeriksaan, kontrol,

maupun konsultasi dengan petugas kesehatan di fasilitas kesehatan. Selain itu, juga

tersedia fitur voice-to-Text yang dapat digunakan untuk mencatat menggunakan

suara yang akan dikonversi kedalam bentuk teks.

20


3.1.2 Cara Kerja Program Aplikasi

Untuk menggambarkan cara program aplikasi, maka diperlukan diagram flowchart.

Proses yang dimiliki sistem ini, yaitu sebagai berikut :

a) Flowchart Aplikasi

Gambar 3. 1 Flowchart Aplikasi

Pertama, User perlu untuk mendaftarkan data terlebih dahulu untuk masuk kedalam

aplikasi ini nantinya, data yang diminta berupa nama, jenis kelamin, e-mail, dan

password. Setelah User mendaftarkan datanya pada form login sebelumnya, maka

user diperkenankan untuk masuk kedalam aplikasi ini dengan mengisi form login

terlebih dahulu, dengan memasukkan User Name dan juga Password. Lalu, Setelah

user berhasil masuk kedalam aplikasi ini, maka user diperkenankan untuk meng-

input atau mencatat hasil dari pemeriksaan tekanan darah, kadar gula darah, asam

urat dan juga kolesterol untuk selanjutnya diproses dan disimpan.

21


3.1.3 Analisis Kebutuhan

a. Analisis kebutuhan User

Analisis kebutuhan ini dilakukan untuk mendapatkan data dan juga informasi yang

dibutuhkan dalam rangka pemenuhan kebutuhan untuk membangun aplikasi ini

nantinya. Pendekatan ini dilakukan secara intensif untuk mengetahui secara

mendetail kebutuhan aplikasi, agar dapat dipahami dan digunakan oleh user.

Pengumpulan kebutuhan dan informasi ini dilakukan dengan cara menyebarkan

kuesioner secara online yang ditujukan kepada resonden atau calon user yang berisi

beberapa pertanyaan yang berkaitan dengan pembuatan aplikasi ini. Berikut adalah

penjabaran dari hasil analisis yang dilakukan pada tahap ini :

1. Pertanyaan pertama, Apakah anda termasuk orang yang rutin melakukan cek

tensi darah, kadar gula darah, asam urat, dan kolesterol?

Gambar 3. 2 Pertanyaan kuesioner mengenai rutinitas dalam melakukan cek tensi

darah, kadar gula darah, asam urat, dan kolesterol

Dapat dilhat pada gambar 3.2 diatas, bahwa Dari sekian responden, semuanya

melakukan cek tensi darah, kadar gula darah, asam urat, dan kolesterol dengan

intensitas yang berbeda-beda.

22


2. Pertanyaan kedua, Dimanakah anda biasanya melakukan pengecekan atau

kontrol untuk mengetahui tensi darah, kadar gula darah, asam urat, dan

kolesterol?

Gambar 3. 3 Pertanyaan kuesioner mengenai tempat melakukan pengecekan atau

kontrol untuk mengetahui tensi darah, kadar gula darah, asam urat, dan kolesterol

Untuk diagram pertanyaan selanjutnya, analisis dari hasil jawaban dari gambar 3.3

diatas. beberapa responden dapat dilihat dari diagram lingkaran diatas, para

responden biasanya melakukan pemeriksaan atau checkup dirumah, klinik, maupun

fasilitas dan layanan kesehatan lainnya, seperti di pengobatan alternatif.

23


3. Pertanyaan ketiga, dari keempat pengecekan tersebut, manakah yang paling

sering dikontrol atau dicek?

Gambar 3. 4 Pertanyaan Kuesioner Mengenai manakah yang paling sering

dikontrol atau dicek

Pada gambar 3.4 diatas, dapat diketahui bahwa responden minimal melakukan

pemeriksaan terhadap dua jenis pemeriksaan.

4. Pertanyaan keempat, Apakah anda mencatat hasil dari pemeriksaan atau cek

tensi darah, kadar gula darah, asam urat, dan kolesterol?

Gambar 3. 5 Pertanyaan Kuesioner Mengenai Kemungkinan Mencatat hasil dari

pemeriksaan atau cek tensi darah, kadar gula darah, asam urat, dan kolesterol

24


Pada gambar 3.5 diatas, dapat dilihat hasil analisis dari pertanyaan keempat,

Kebanyakan dari responden pun, juga tidak lupa mencatatkan hasil pemeriksaannya

sebagai media kontrol maupun acuan mereka dan untuk berjaga-jaga.

5. Pertanyaan kelima, Di media apakah anda biasanya mencatat hasil pemeriksaan?

Gambar 3. 6 Pertanyaan Kuesioner Mengenai media yang dipakai untuk mencatat

hasil pemeriksaan

Hasil analisis dari pertanyaan yang tertera pada gambar 3.6 diatas merupakan salah

satu alasan mengapa aplikasi ini dibuat, kebanyakan dari para responeden tidak lupa

mencatatkan hasil pemeriksaannya pada media kertas, terlihat dari gambar diatas,

yang dikhawatirkan dapat dengan mudah hilang dan juga tercecer.

6. Pertanyaan keenam, Apakah anda sering kesulitan bila harus menghafal resep,

obat, atau pantangan terhadap makanan tertentu terkait dengan hasil pengecekan

atau kontrol anda?

25


Gambar 3. 7 Pertanyaan Kuesioner Mengenai Kemungkinan kesulitan bila harus

menghafal resep, obat, atau pantangan terhadap makanan tertentu terkait dengan

hasil pengecekan atau kontrol anda

Pada gambar 3.7 diatas dapat disimpulkan bahwa, dari sekian responden, masih

terdapat beberapa responden yang terkadang mengalami masalah bila harus

mengingat perihal resep obat, pantangan, dan anjuran, terlihat pada gambar diatas.

Ini juga merupakan alasan utama dari dibuatnya fitur voice to text.

b. Analisis Kebutuhan Fungsional dan Non-Fungsional

Analisis ini dilakukan untuk memastikan bahwa spesifikasi dari perangkat dan

software yang digunakan dapat menjalankan sistem, sehingga sistem tersebut dapat

berjalan sesuai dengan keinginan dan kebutuhan user.

1. Kebutuhan Fungsional

Sistem dapat menerima inputan

Sistem dapat menampilkan hasil inputan

Sistem dapat mencetak hasil inputan

Sistem dapat menampilkan grafik hasil inputan

Sistem dapat mencetak grafik hasil inputan

Sistem dapat merekam suara

Sistem dapat meng-konversi suara menjadi teks

26


Sistem dapat mendengarkan hasil rekaman suara

Sistem dapat melakukan CRUD

2. Kebutuhan Non-Fungsional

Sistem dapat berjala pada perangkat penulis, dengan spesifikasi sebagai berikut :

Laptop ASUS A456U

Intel Core i5

OS Windows 10

RAM 8GB

HDD 1TB

Laravel versi 8.33.1

XAMPP versi 3.2.4

PHP versi 7.4.2

MySQL versi 10.4.11

phpMyAdmin versi 5.0.1

notepad ++ versi 7.9.5

3.1.4 Rancangan Program Aplikasi

Untuk merealisasikan rancang bangun dari aplikasi ini, maka dibuatlah rancangan

program dari aplikasi yang akan dibuat dengan membuat usecase, activity diagram,

maupun ERD yang akan menjadi dasar acuan pembuatan mekanisme sistem dari

program aplikasi nantinya.

27


a. Use Case Diagram

Gambar 3. 8 Usecase Diagram

Gambar diatas merupakan Use Case Diagram dari aplikasi ini, yang diperankan

oleh dua aktor yaitu, user dan admin atau operator

28


User dapat melakukan hampir semua fungsi dan fitur dari aplikasi ini, kecuali

untuk edit atau update artikel maupun panduan.

Sedangkan admin atau operator tidak dapat akses fitur input atau pencatatan

sebagaimana yang dipunyai oleh user, tetapi mendapatkan hak akses untuk edit

dan update artikel.

b. Activity Diagram

Selanjutnya adalah activity diagram, yang dimana memuat gambaran bagaimana

mekanisme antara user dan sistem yang saling berinteraksi dalam aplikasi.

1. Register

Gambar 3. 9 Activity Diagram Registrasi

29


Registrasi atau register adalah sebuah aktifitas dimana calon pengguna harus

mendaftar dahulu sebelum bisa masuk kedalam sebuah sistem atau aplikasi, dan

gambar 3.9 menunjukkan gambaran dari proses registrasi pada aplikasi ini.

2. Login

Gambar 3. 10 Activity Diagram Login

Aktifitas login ini dapat dilakukan oleh kedua role yang berbeda, yaitu user dan

admin. Dimana, sebelum proses login berlangsung, pengguna diminta untuk

memasukkan username dan juga password untuk masuk ke halaman aplikasi,

gambaran dari proses login dapat dilihat pada gambar 3.10 diatas.

30


3. Checkup

Gambar 3. 11 Activity Diagram Input Hasil Periksa

Pada halaman ini, aktifitas yang dilakukan oleh user adalah meng-input hasil

pemeriksaan yang telah dilakukan, dengan memasukkan angka kedalam kolom

yang sesuai, yang telah disediakan, terlihat dari gambar 3.11 yang tertera diatas.

31


4. Graph

Gambar 3. 12 Activity Diagram Melihat Grafik Hasil Pemeriksaan

Aktifitas pada halaman grafik cenderung sederhana, karena hanya terdapat

penyajian grafik batang yang ditampilkan pada halaman ini, dan dapat dilakukan

oleh user maupun admin, gambar 3.12 menjelaskan alur dari activity pada proses

ini.

32


5. Article

Gambar 3. 13 Activity Diagram membaca Artikel

Pada halaman artikel, yang berperan pada aktifitas ini adalah user, yaitu membaca

artikel dengan opsi show, dapat dilihat pada gambar 3.13 diatas.

33


6. Voice to Text

Gambar 3. 14 Activity Diagram Voice To Text

Di halaman Voice to Text ini, baik user maupun admin dapat melakukannya.

Aktifitas yang dilakukan pada halaman ini berupa rekaman suara yang akan

dikonversi kedalam bentuk teks, prosesnya seperti yang tertera pada gambar 3.14

diatas.

34


7. Lihat histori checkup

Gambar 3. 15 Activity Diagram Melihat Histori Hasil Pencatatan dan Monitoring

User yang sudah pernah meng-input hasil pemeriksaan kedalam aplikasi ini, dapat

melihat kembali historinya dengan memasuki halaman checkup, untuk prosesnya

seperti yang tergambar pada gambar 3.15 diatas.

35


8. Panduan (Guide)

Gambar 3. 16 Activity Diagram membaca Panduan

Pada halaman panduan merupakan halaman yang berisikan panduan mengenai

membaca hasil pemeriksaan yang dapat dilihat pada halaman awal atau halaman

home dari aplikasi ini, dan untuk proses activity diagram-nya dapat dilihat pada

gambar 3.16 diatas.

36


9. Cetak (print) histori dan grafik

Gambar 3. 17 Activity Diagram Mencetak Riwayat Pemeriksaan dan Grafik

Histori atau hasil dari pemeriksaan yang sudah diinput kedalam aplikasi ini dan

juga grafiknya, dapat dicetak ke media kertas, activity diagram-nya dapat dilihat

pada gambar 3.17 diatas.

37


10. Akses data user atau admin

Gambar 3. 18 Activity Diagram Akses Data User dan Admin

Yang mempunyai otoritas ntuk melihat ataupun mengakses data user atau admin

adalah admin, dengan cara login kedalam aplikasi menggunakan akun admin yang

akan diteruskan sistem memasuki halaman admin, untuk prosesnya tertera pada

gambar 3.18 diatas.

38


11. Edit atau update panduan

Gambar 3. 19 Activity Diagram Edit dan Update Panduan

Admin mempunyai otoritas untuk meng-edit dan juga update halaman panduan

yang tertera pada halaman awal (home) dengan cara masuk sebagai admin dan

masuk ke halaman guide, untuk proses alurnya dapat dilihat pada gambar 3.19

diatas.

39


12. Edit atau update artikel

Gambar 3. 20 Activity Diagram Edit dan Update Artikel

Otoritas untuk melakukan perubahan dan atau update terhadap artikel adalah milik

admin, dengan masuk sebagai admin, lalu masuk ke halaman article, dengan proses

yang dapat dilihat pada gambar 3.20 diatas.

40


13. Logout

Gambar 3. 21 Activity Diagram Logout

Logout dilakukan setelah user atau admin telah selesai melakukan aktifitasnya

didalam aplikasi, dan ingin keluar dari aplikasi, prosesnya dapat dilihat pada

gambar 3.21 activity diagram diatas.

41


c. ERD (Entity Relationship Diagram)

ERD (Entity Relationship Diagram) menjelaskan keterkaitan atau relasi antara role

dengan variabel-variabel yang ada.

1. ERD (Entity Relationship Diagram) Admin

Gambar 3. 22 Entity Relationship Diagram Admin

42


Pada gambar 3.22 diatas, dapat dilihat bahwa, terdapat tujuh entitas yang tertera

pada role admin yang antara lain adalah admin, user_access, Checkup_History,

Graph_Admin, Guide_Admin, Article_Admin, dan Voice_to_Text. Dimana

semuanya mempunyai korelasi dan keterkaitan satu dengan lainnya.

43


2. ERD (Entity Relationship Diagram) User

Gambar 3. 23 Entity Relationship Diagram User

44


Pada gambar 3.23 diatas, dapat dilihat bahwa ERD (Entity Relationship Diagram)

User mempunyai enam buah entitas, yang antara lain adalah, User, Checkup,

Graph, Guide, Article, dan Voice To Text. Keenam entitas tersebut mempunyai

korelasi anatara satu dengan yang lainnya.

3.1.5 Desain Mockup

Untuk merealisasikan desain sistem kedalam mode tampilan, maka dibutuhkanlah

mockup agar desain antarmuka dari aplikasi yang akan dibuat bisa tervisualisasikan.

a. Register

Gambar 3. 24 Mockup Halaman Registrasi

Halaman registrasi ini natinya akan berisikan field yang akan diisi oleh calon user

untuk memasukkan identitas yang akan digunakan sebagai sarana untuk masuk

kedalam aplikasi ini nantinya, yang tampilannya dapat dilihat pada gambar 3.24

diatas.

45


b. Login

Gambar 3. 25 Mockup Halaman Login

Pada halaman login ini, nantinya user yang telah melakukan registrasi sebelumnya,

dapat melakukan proses login yang dimana membutuhkan email dan password

untuk masuk kedalam aplikasi ini nantinya, tampilan halamannya dapat dilihat pada

gambar 3.25 diatas.

c. Home

Gambar 3. 26 Mockup Halaman Home

46


Gambar 3.26 menggambarkan tampilan halaman home atau tampilan beranda dari

aplikasi ini.

d. Checkup

Gambar 3. 27 Mockup Halaman Checkup

Halaman checkup yang tampilannya akan seperti pada gambar 3.27 diatas ini

nantinya akan menampilkan halaman dimana user dapat meng-input hasil

pemeriksaan yang sudah dilakukan sebelumnya kedalam aplikasi ini, dan juga, user

dapat melihat histori dari hasil pemeriksaan untuk melakukan monitoring.

47


e. Warning

Gambar 3. 28 Mockup Halaman Warning

Halaman warning ini akan menampilkan hasil inputan yang melebihi batas normal,

tampilan halamannya akan seperti pada gambar 3.28

f. Article

Gambar 3. 29 Mockup Halaman Article

48


Halaman article akan berisikan pilihan artikel dan bacaan yang dapat dipilih sendiri

oleh user dan dibaca untuk memenuhi dan menambah wawasan bagi user, tampilan

halamannya akan terlihat seperti pada gambar 3.29

g. Graph

Gambar 3. 30 Mockup Halaman Graph

Pada halaman graph, hasil pemeriksaan yang sudah di-input pada halaman checkup,

akan dikonversi kedalam bentuk diagram batang, agar dapat memberikan opsi dan

juga memudahkan user saat melakukan monitoring, tampilan halamannya akan

seperti pada gambar 3.30

49


h. Voice to Text

Gambar 3. 31 Mockup Halaman Voice To Text

Halaman Voice to Text ini akan digunakan untuk menjadi media dan memudahkan

user dalam mengingat sesuatu hal, karena cara kerjanya adalah dengan

mengonversi suara kedalam bentuk teks, maupun sebaliknya, tampilan halamannya

akan seperti pada gambar 3.31.

i. User, pada halaman Admin

Gambar 3. 32 Mockup Halaman Akses User Untuk Admin

50


Halaman akses data user dan admin seperti yang tertera pada gambar 3.32 diatas

digunakan oleh admin untuk mengakses data yang berkaitan dengan user dan

admin.

j. Checkup History

Gambar 3. 33 Mockup Halaman Checkup History

Halaman checkup_history pada gambar 3.33 akan digunakan untuk melihat histori

pemeriksaan keseluruhan.

51


k. Article, pada halaman admin

Gambar 3. 34 Mockup Halaman Article Admin

Halaman article pada admin bertujuan untuk memberikan akses kepada admin

untuk memperbarui maupun mengedit tampilan maupun isi konten pada artikel,

tampilan halamannya akan seperti gambar 3.34 diatas.

l. Guide

Gambar 3. 35 Mockup Halaman Guide (Panduan)

52


Tampilan halaman guide seperti pada gambar 3.35 diatas, bertujuan untuk

memberikan akses kepada admin untuk mempeprbarui dan mengedit konten

panduan yang tertera pada halaman home.

m. Graph, pada halaman admin

Gambar 3. 36 Mockup Halaman Graph Admin

Halaman graph pada admin mempunyai fungsi untuk menampilkan kompilasi

histori hasil pemeriksaan dari user dalam bentuk diagram batang, dan tampilannya

akan seperti pada gambar 3.36 diatas.

3.2 Realisasi Program Aplikasi

Pada bagian ini akan dijelaskan perihal realisasi dari perancangan sistem yang akan

dibangun. Pembahasan pada bagian ini dikhususkan pada implementasi dari

rancangan sistem dan desain aplikasi yang sudah dipaparkan sebelumnya.

53


a. Halaman Login

Gambar 3. 37 Tampilan Halaman Login

Halaman Login seperti yang tertera pada gambar 3.37 diatas, merupakan halaman

awal pada tampilan antar muka pada aplikasi ini. Pada halaman ini disajikan field

yang digunakan untuk mengisikan username dan password untuk masuk ke

halaman beranda aplikasi. Selain itu, juga terdapat opsi tombol register yang akan

dialihkan ke halaman resgister, untuk melakukan registrasi bagi pengguna baru.

54


Gambar 3. 38 Source Code Halaman Login

Seperti yang tertera pada tampilan halaman login dan source code gambar 3.38

diatas, pengguna memasukkan email dan password yang semestinya. Jika

sebaliknya, maka sistem akan menampilkan pesan error.

55


b. Halaman Register

Gambar 3. 39 Tampilan Halaman Register

Pada gambar 3.39 halaman register, calon user disediakan field yang harus diisi

berdasarkan dengan identitas user itu sendiri, seperti nama, gender, email, dan

password yang nantinya akan digunakan untuk Login ke halaman beranda aplikasi.

56


Gambar 3. 40 Source Code Halaman Register

Berdasarkan pada gambar 3.40 diatas, calon user diharuskan mengisi nama, gender,

email dan password untuk membuat akun.

57


c. Home

Gambar 3. 41 Tampilan Halaman Home

Halaman awal Home pada gambar 3.41, menampilkan panduan cara membaca hasil

pemeriksaan, dan menjadi hlaman beranda pada antarmuka aplikasi ini.

Gambar 3. 42 Source Code Halaman Home

58


Gambar 3.42 menunjukkan source code halaman home yang berisi panduan,

dimana pada gambar diatas tertera fungsi route yang dimana ini sebagai pengantar

untuk menampilkan panduan (guide) pada halaman beranda (home).

d. Checkup

Gambar 3. 43 Tampilan Halaman Checkup

Halaman Checkup pada gambar 3.43 diatas berisikan riwayat hasil inputan dari

user, yang dapat digunakan sebagai media untuk monitoring perihal kesehatan.

59


60


Gambar 3. 44 Source Code Halaman Checkup

Pada gambar 3.44, diatas dapat dilihat bahwa terdapat acuan dalam hasil

pemeriksaan atau cek pada tabel, yaitu sebagai berikut :

Tabel 2 Acuan Hasil Cek

NO Pemeriksaan Rendah Sedang

(Baik) Tinggi

1 Tensi Darah < 120/80 120/80 > 120/80

2 Kolesterol < 200 > 200

3

Asam Urat

Pria < 3 3 - 7,2 > 7,2

Wanita < 2 2 - 6,0 > 6,0

4

Gula Darah

Puasa (>8 jam) < 70 70 - 104

Sewaktu 105 - 140 > 140

e. Checkup_Create

Gambar 3. 45 Tampilan Halaman Checkup_Create

Pada halaman ini seperti yang tertera pada gambar 3.45 diats, disediakan form untuk

meng-input hasil pemeriksaan atau cek kedalam aplikasi.

61


Gambar 3. 46 Source Code Halaman Checkup_Create

Pada gambar 3.46 diatas, merupakan source code dari halaman checkup_create

yang dimana dijelaskan bagaimana proses inputan hasil pemeriksaan berdasarkan

dengan tabel acuan hasil cek yang tertera pada tabel 2 diatas.

62


f. Warning

Gambar 3. 47 Tampilan Halaman Warning

Pada fitur halaman warning pada gambar 3.47 ini, akan menampilkan kepada user,

apa saja kategori yang sudah diatas normal.

Gambar 3. 48 Source Code Halaman Warning

63


Pada source code 3.48 diatas menjelaskan bahwa fitur warning ini bekerja dengan

mengacu kepada tabel acuan cek yang dapat dilihat pada tabel 2, dimana jika ada

hasil inputan yang diatas dari kadar normal, maka akan masuk kedalam halaman

ini.

g. Article

Gambar 3. 49 Tampilan Halaman Article

Pada halaman article seperti yang tertera pada gambar 3.49 diatas, user dipersilakan

untuk memilih artikel untuk dibaca.

64


Gambar 3. 50 Source Code Halaman Article

Gambar 3.50 diatas, menunjukkan source code dari halaman article.

h. Graph

Gambar 3. 51 Tampilan Halaman Graph

Halaman graph pada gambar 3.51 diatas menampilkan konversi dari hasil inputan

pada halaman checkup ke diagram batang.

65


Gambar 3. 52 Source Code Halaman Graph

Gambar 3.52 diatas menjelaskan source code dari halaman graph dan bagaimana

graph dapat terbentuk.

i. Voice to Text

Gambar 3. 53 Tampilan Halaman Voice to Text

Fitur Voice to Text seperti pada gambar 3.53 diatas berfungsi untuk mengkonversi

suara kedalam bentuk teks.

66


Gambar 3. 54 Source Code Halaman Voice to Text

Pada gambar 3.54 diatas, merupakan source code dari halaman voice to text.

j. User_Access (Admin)

Gambar 3. 55 Tampilan Halaman User_Access (Admin)

Halaman pada gambar 3.55 ini berfungsi bagi admin untuk mengakses data

pengguna (show,delete).

67


Gambar 3. 56 Source Code Tampilan Halaman User_Access (Admin)

Gambar 3.56 merupakan source code dari halaman user_access (admin) yang

dimana terdapat field nama, gender, email, dan role yang dapat diperbarui dan diedit

oleh admin.

k. Article_Admin

Gambar 3. 57 Tampilan Halaman Article_Admin

68


Gambar 3.57 merupakan halaman yang berisikan opsi managing article (create,

show, edit, delete) bagi admin.

l. Guide (Admin)

Gambar 3. 58 Tampilan Halaman Guide (Panduan)

Halaman pada gambar 3.58 ini berfungsi untuk me-manage modul panduan cara

membaca hasil pemeriksaan atau cek yang dapat diedit, ditambahkan, dan dihapus

oleh admin.

69


m. Checkup History (Admin)

Gambar 3. 59 Tampilan Halaman Checkup History (Admin)

Gambar 3.59 merupkana tampilan halaman checkup_history yang berisikan riwayat

hasil inputan dari para user.

n. Graph (Admin)

Gambar 3. 60 Tampilan Halaman Graph (Admin)

70

BAB IV

PEMBAHASAN

4.1 Pengujian

Setelah selesai Tahap perancangan sistem dan realisai tahap ini akan dijelaskan

tentang pengujian, Pengujian mulai dari deskripsi pengujian, prosedur pengujian,

data hasil pengujian bertujuan untuk memastikan bahwa sistem yang dibangun telah

sesuai dengan kebutuhan yang telah ditentukan sebelumnya.

4.2 Deskripsi Pengujian

Tahap ini merupakan tahap sebelum aplikasi digunakan secara utuh, tahap

pengujian dapat dilakukan setelah tahap sebelum-sebelumnya selesai. Tujuan dari

pengujian ini adalah untuk meminimalisir terjadinya kesalahan pada sistem dan

memastikan keluaran yang dihasilkan telah sesuai dengan yang diinginkan oleh

pengguna aplikasi.

4.3 Prosedur Pengujian

Prosedur pengujian dari aplikasi ini memiliki dua tahapan, yaitu alpha testing dan

juga beta testing. Alpha testing merupakan pengujian yang dilakukan oleh

pengembang itu sendiri, sedangkan beta testing adalah pengujian yang dilakukan

oleh calon user atau tester, sebelum pada akhirnya dipublikasikan.

a. Alpha Testing

Pengujian dengan tahapan alpha testing dilakukan dengan metode black box

testing dengan target fungsionalitas dari sistem. Rencana pengujian dapat dilihat

pada tabel dibawah ini :

71


Tabel 3 Rencana Pengujian

NO Item yang diuji Detail Pengujian Jenis

Pengujian

1 Autentikasi

Melakukan

Registrasi

Black Box

Testing

Melakukan Login

Melakukan Logout

2 Autorisasi Hak

Akses

Mengidentidfikasi

role (User/Admin)

Memberikan hak

akses tergantung dari

role yang dijalankan

3 Halaman fitur untuk

user

Menampilkan

halaman home

(Panduan/Guide)

Menampilkan

halaman untuk input

hasil pengecekan

Menampilkan artikel

Menampilkan

halaman grafik dari

hasil input

pengecekan

Menampilkan

halaman voice to text

4 Halaman fitur untuk

admin

Menampilkan

halaman home

(Panduan/Guide)

Menampilkan

halaman user

Menampilkan

halaman checkup

history dari user

Menampilkan

halaman Artikel

(Show, Edit, Delete

Artikel)

Menampilkan

halaman guide

Menampilkan

halaman grafik

Menampilkan

halaman voice to text

72


4.4 Data Hasil Pengujian

Tahap ini dilakukan dengan pengujian alpha testing. Alpha testing dilakukan secara

berkali-kali dalam masa pengembangan, pengujian ini dilakukan dengan teknik

black box testing untuk melihat hasil kesesuaian output system dengan yang

diharapkan oleh pengguna.

Pengujian ini dilakukan menggunakan aplikasi yang berjalan pada server local,

dengan spesifikasi sebagai berikut :

1. Laptop ASUS A456U

2. Sistem Operasi Windows 10

3. XAMPP versi 3.2.4

4. PHP versi 7.4.2

Tabel 4 Pengujian Autentikasi

NO Skenario Pengujian

Pengamatan dan

hasil yang

diharapkan

Hasil Pengujian

A1

Registrasi tanpa

mengisi field

ataupun meng-klik

drop-down list yang

sudah disediakan

Menampilkan pesan

error bahwa field

harus diisi, dan drop-

down list harus

dipilih

Berhasil

A2 Login menggunakan

akun user yang salah

Menampilkan pesan

error bahwa, "email

atau password salah"

Berhasil

A3

Login menggunakan

akun admin yang

salah

Menampilkan pesan

error bahwa, "email

atau password salah"

Berhasil

A4 Klik Logout pada

user

Menampilkan

halaman awal login Berhasil

A5 Klik Logout pada

admin

Menampilkan

halaman awal login Berhasil

73


Tabel 5 Pengujian Autorisasi


Pengamatan dan

hasil yang

diharapkan

Hasil Pengujian

B1 Login menggunakan

akun user

Menampilkan

halaman utama user Berhasil

B2 Login menggunakan

akun admin

menampilkan

halaman utama

admin

Berhasil

Tabel 6 Hak Akses


Pengamatan dan

hasil yang

diharapkan

Hasil Pengujian

C1 Akses halaman awal

user beserta fiturnya

Akun dengan role

user dapat

mengakses halaman

utama user beserta

buka halaman

fiturnya

Berhasil

C2

Akses halaman awal

admin beserta

fiturnya

Akun dengan role

admin dapat

mengakses halaman

utama admin beserta

buka halaman

fiturnya

Berhasil

74


Tabel 7 Uji Tampilan Fitur Pada Halaman User


Pengamatan dan

hasil yang

diharapkan

Hasil Pengujian

D1 Klik halaman home

(Panduan/Guide)

Menampilkan

halaman home

(Panduan/Guide)

Berhasil

D2 Klik halaman

checkup

Menampilkan

halaman checkup Berhasil

D3

Klik halaman Artikel

untuk membaca

artikel

Menampilkan

halaman artikel Berhasil

D4 Klik halaman grafik Menampilkan

halaman grafik Berhasil

D5 Klik halaman voice

to text

menampilkan

halaman voice to text Berhasil

Tabel 8 Uji Tampilan Fitur Pada Halaman Admin


Pengamatan dan

hasil yang

diharapkan

Hasil Pengujian

E1 Klk halaman home

(Panduan/Guide)

Menampilkan

halaman home

(Panduan/Guide)

Berhasil

E2 Klik halaman user Menampilkan

halaman user Berhasil

E3 Klik halaman

checkup history

Menampilkan

halaman checkup

history

Berhasil

E4 Klik halaman artikel Menampilkan

halaman artikel Berhasil

E5 Klik halaman guide Menampilkan

halaman guide Berhasil

E6 Klik halaman grafik Menampilkan

halaman grafik Berhasil

E7 Klik halaman voice

to text

Menampilkan

halaman voice to text Berhasil

75


Tabel 9 Uji Fitur Pada User


Pengamatan dan

hasil yang

diharapkan

Hasil Pengujian

F1 Masuk ke halaman

home

Muncul halaman

panduan cara

membaca hasil

pemeriksaan atau

cek

Berhasil

F2 Masuk ke halaman

checkup

Dapat meng-input

hasil pemeriksaan

atau cek,

menampilkan

history-nya (jika

ada), dan print hasil

Berhasil

F3 Masuk ke halaman

artikel

Dapat menampilkan

halaman artikel dan

pilihan artikel

Berhasil

F4 Masuk ke halaman

grafik

Dapat menampilkan

halaman grafik dan

grafik hasil input-an

pada halaman

checkup (jika ada),

dan print grafik

Berhasil

F5 Masuk ke halaman

voice to text

Dapat menambahkan

catatan via suara Berhasil

76


Tabel 10 Uji Fitur Pada Admin


Pengamatan dan

hasil yang

diharapkan

Hasil Pengujian

G1 Masuk ke halaman

home

Muncul halaman

panduan cara

membaca hasil

pemeriksaan

Berhasil

G2 Masuk ke halaman

user Akses data pengguna Berhasil

G3 Masuk ke halaman

checkup history

Melihat hasil

checkup user dan

print

Berhasil

G4 Masuk ke halaman

artikel Akses artikel Berhasil

G5 Masuk ke halaman

guide Akses Panduan Berhasil

G6 Masuk ke halaman

grafik Menampilkan grafik Berhasil

G7 Masuk ke halaman

voice to text

Menambahkan

catatan via suara Berhasil

Setelah melakukan pengujian, tahap berikutnya adalah melakukan penghitungan

persentase dari hasil pengujian untuk menentukan keberhasilan dari aplikasi ini,

dengan rumus sebagai berikut :

Persentase Keberhasilan =

Jumlah item uji berhasil

X 100% Jumlah seluruh item uji

Alpha Testing memiliki 33 skenario, berikut adalah jumlah persentase dari hasil

Alpha Testing :

Persentase Keberhasilan =

33

X 100% 33

77


Berdasarkan hasil dari pengujian alpha, maka dapat disimpulkan bahwa pengujian

alpha telah berjalan dengan baik, semua fungsi dapat berjalan seperti yang

diharapkan, 33 item uji berhasil dan pengujian dengan alpha testing telah berjalan

sesuai dengan semua skenario yang ada, dengan persentase sebesar 100%.

b. Beta Testing

Pada tahapan pengujian selanjutnya, yaitu beta testing, aplikasi akan dioperasikan

oleh tester atau calon pengguna untuk untuk memvalidasi hipotesis tentang

bagaimana pengguna akan menggunakan aplikasi, mengetahui bagaimana

tanggapan atau feedback dari tester mengenai aplikasi ini, yang akan diketahui

dengan mengisi kuesioner setelah menguji aplikasi.

Tabel 11 Hasil Kuesioner Beta Testing

NO Pertanyan Responden Skala

1 2 3 4 5

1

Menurut anda, apakah aplikasi ini

memiliki tampilan antarmuka yang

mudah dikenali?

1

2

3

4

5

6

7

2 Menurut anda, apakah aplikasi ini

memiliki fitur yang cukup memadai?

1

2

3

4

5

6

7

78


3

Menurut anda, apakah fitur-fitur yang

tersedia pada aplikasi ini cukup mudah

untuk diakses

1

2

3

4

5

6

7

4 Apakah anda puas dengan fitur-fitur

yang tersedia?

1

2

3

4

5

6

7

5 Menurut anda, apakah aplikasi ini sudah

optimal dalam pengimplementasiannya?

1

2

3

4

5

6

7

6

Menurut anda, apakah aplikasi ini dapat

dijadikan media interaktif dan alternatif

untuk pencatatan dan monitoring tensi,

gula darah, asam urat, dan kolesterol?

1

2

3

4

5

6

7

7 Menurut anda, apakah aplikasi ini

bermanfaat bagi anda?

1

2

3

4

5

6

7

Berdasarkan dari data hasil kuesioner diatas, dapat dicari persentase dari masing-

masing pertanyaan, dengan skala tingkat kepuasan sebagai berikut :

79


Tabel 12 Skor Skala Tingkat Kepuasan

Tingkat Kepuasan Skala

Sangat Setuju 5

Setuju 4

Cukup Setuju 3

Kurang Setuju 2

Tidak Setuju 1

Dan dengan rumus sebagai berikut :

Y = X X 100%

Skor Ideal

Keterangan :

a. Y : Nilai Persentase yang dicari

b. X : Jumlah nilai kategori jawaban dikalikan dengan frekuensi (Ʃ = N.R)

c. N : Nilai dari setiap jawaban

d. R : Frekuensi

e. Skor Ideal : Nilai skala tertinggi dikalikan dengan jumlah sampel atau

responden (5x7=35)

Berikut adalah hasil hitung berdasarkan pada perhitungan diatas :

1. Menurut anda, apakah aplikasi ini memiliki tampilan antarmuka yang mudah

dikenali?

Tabel 13 Rincian Hasil Kuesioner Pertanyaan pertama

Pertanyaan NO Keterangan Skala Responden N . R

1

1 Sangat Setuju 5 3 15

2 Setuju 4 4 16

3 Cukup Setuju 3 0 0

4 Kurang Setuju 2 0 0

5 Tidak Setuju 1 0 0

Jumlah 7 31

80


Y= 31

x 100% = 88,57%

35

2. Menurut anda, apakah aplikasi ini memiliki fitur yang cukup memadai?

Tabel 14 Rincian Hasil Kuesioner Pertanyaan kedua


2


2 Setuju 4 4 16




Jumlah 7 27

Y= 27

x 100% = 77,14%

35

3. Menurut anda, apakah fitur-fitur yang tersedia pada aplikasi ini cukup mudah

untuk diakses?

Tabel 15 Rincian Hasil Kuesioner Pertanyaan ketiga


3


2 Setuju 4 5 20




Jumlah 7 30

Y= 30

x 100% = 85,71%

35

81


4. Apakah anda puas dengan fitur-fitur yang tersedia?

Tabel 16 Rincian Hasil Kuesioner Pertanyaan keempat


4


2 Setuju 4 6 24




Jumlah 7 27

Y= 27

x 100% = 77,14%

35

5. Menurut anda, apakah aplikasi ini sudah optimal dalam

pengimplementasiannya?

Tabel 17 Rincian Hasil Kuesioner Pertanyaan kelima


5


2 Setuju 4 4 16




Jumlah 7 25

Y= 25

x 100% = 71,42%

35

6. Menurut anda, apakah aplikasi ini dapat dijadikan media interaktif dan

alternatif untuk pencatatan dan monitoring tensi, gula darah, asam urat, dan

kolesterol?

82


Tabel 18 Rincian Hasil Kuesioner Pertanyaan keenam


6


2 Setuju 4 4 16




Jumlah 7 31

Y= 31

x 100% = 88,57%

35

7. Menurut anda, apakah aplikasi ini bermanfaat bagi anda?

Tabel 19 Rincian Hasil Kuesioner Pertanyaan ketujuh


7


2 Setuju 4 6 24




Jumlah 7 29

Y= 29

x 100% = 82,85%

35

Untuk persentase dari hasil pengujian beta testing didapatkan hasil sebagai berikut:

Persentase pengujian

beta testing =

Ʃ%Y

Jumlah Pertanyaan

Persentase pengujian

beta testing =

Ʃ%(88,57 + 77,14 + 85,71 + 77,14 + 71,42 + 88,57 + 82,85)

7

= 81,62%

83


Berdasarkan hasil dari beta testing, dapat disimpulkan bahwa pengujian beta dari

setiap rangkaian yang ada dan hasil dari kuesioner, sangatlah berpengaruh terhadap

hasil dari pengujian ini, dari sinilah pengembang aplikasi dapat mengetahui perihal

penggunaan dan pemanfaatan aplikasi kedepannya.

4.5 Analisis Data Hasil Pengujian

Berdasarkan pada hasil pengujian diatas, yaitu menggunakan metode alpha testing

dengan black box testing, bahwa aplikasi ini sudah berjalan optimal dan juga

semestinya, karena hasilnya sesuai dengan skenario pengujian yang telah

ditentukan sebelumnya dengan capaian sebesar 100% yang dilakukan melalui 33

skenario yang ada.

Sementara untuk pengujian beta testing sendiri, feedback yang diberikan oleh

tester berdasarkan hasil dari kuesioner pun telah menunjukkan bahwa aplikasi ini

sudah memenuhi aspek-aspek yang dibutuhkan sebelum bisa dipublikasikan,

dengan capaian persentase sebesar 81,62%.


BAB V

PENUTUP

5.1 Simpulan

Berdasarkan hasil dari penelitian mengenai rancang bangun pembuatan aplikasi

pencatatan dan monitoring tekanan darah, kadar gula darah, asam urat, dan

kolesterol berbasis website menggunakan framework laravel, didapatkan hasil

analisis data pengujian yang telah dilakukan dengan kesimpulan sebagai berikut :

1. Perancangan dan pembangunan aplikasi pencatatan dan monitoring tekanan

darah, kadar gula darah, asam urat, dan kolesterol berbasis website

menggunakan framework laravel berhasil dilakukan dengan mengacu kepada

hasil pengujian alpha testing melalui 33 skenario, dengan tingkat keberhasilan

sebesar 100%.

2. Berdasarkan hasil dari pengujian beta testing yang dilakukan terhadap user,

diperoleh feedback yang baik dari user terhadap sistem aplikasi yang berjalan,

dengan capaian persentase sebesar 81,62%.

5.2 Saran

Berdasarkan pada apa yang telah dikerjakan dan dilakukan, dan juga menurut

kelemahan dan kekurangan dari aplikasi ini, maka saran yang harus diaplikasikan

untuk aplikasi ini selanjutnya adalah :

1. Penambahan fitur fungsi “lupa password”, sebagai opsi bagi pengguna yang

lupa password.

2. Meningkatkan keamanan pada sistem aplikasi, yang dapat berupa perlindungan

privasi data pengguna dengan pemasangan firewall untuk membantu

mengamankan sistem dari serangan cyber.

xii Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

DAFTAR PUSTAKA

Dadang Iskandar Mulyana, I. B. (2018) ‘Rancang Bangun Aplikasi Speech

ToText Berbasis Android Pada Elevenia’, STIKOM Cipta Karya Informatika,

11(1), pp. 48–60. Available at:

http://jurnal.stikomcki.ac.id/index.php/cos/article/download/38/37.

Dewi, C. and Nindya Pramono, K. N. P. (2016) ‘Pembuatan Aplikasi Pencatatan

Servis Mobil di PT. Armada International Motor Berbasis Android’, Jurnal

Nasional Teknik Elektro dan Teknologi Informasi (JNTETI), 4(4).

doi:10.22146/jnteti.v4i4.164.

HADIYOSO, S. et al. (2019) ‘Sistem Pengukur Tekanan Darah secara Online

untuk Aplikasi Remote Monitoring Kesehatan Jantung’, ELKOMIKA: Jurnal

Teknik Energi Elektrik, Teknik Telekomunikasi, & Teknik Elektronika, 7(1), p.

1. doi: 10.26760/elkomika.v7i1.1.

Rusdiana, L. and Setiawan, H. (2019) ‘Perancangan Aplikasi Monitoring

Kesehatan Ibu Hamil Berbasis Mobile Android’, Sistemasi, 8(1), p. 169. doi:

10.32520/stmsi.v8i1.391.

Sulehu, M. and Senrimang, A. H. (2018) ‘Program Aplikasi Alat Pengukur Kadar

Glukosa Dalam Darah Non Invasive Bebasis Desktop’, Inspiration : Jurnal

Teknologi Informasi dan Komunikasi, 8(1), pp. 16–24.

doi:10.35585/inspir.v8i2.2454.

SYUKRONI, MUH FARHAN (2017) RANCANG BANGUN KNOWLEDGE

MANAGEMENT SYSTEM BERBASIS WEB PADA MADRASAH

MUALIMIN AL-ISLAMIYAH UTERAN GEGER MADIUN. Skripsi thesis,

Universitas Muhammadiyah Ponorogo.

Wahid, A. (2020) ‘Rancang Bangun Aplikasi E-Kompen Berbasis Android

Berbasis Android’.

http://jurnal.stikomcki.ac.id/index.php/cos/article/download/38/37

xiii

Lampiran 1 Daftar Riwayat Hidup

DAFTAR RIWAYAT HIDUP PENULIS

Muhammad Rifky Haikal

Lahir di Jakarta, 1 Oktober 1999.

Lulus dari Madrasah Ibtidaiyah Al-

Ishlah Kota Bekasi pada tahun

2011, MTsN 29 Jakarta Timur pada

tahun 2014, dan MAN 2 Jakarta

Timur pada tahun 2017. Saat ini

sedang menempuh pendidikan

Diploma IV Program Studi Teknik

Informatika, Jurusan Teknik

Informatika dan Komputer di

Politeknik Negeri Jakarta.

xiv

Lampiran 2 Data Hasil Kuesioner

xv

(lanjutan)

xvi

(lanjutan)

xvii

Lampiran 3 Data Hasil Kuesioner Pengujian Beta Testing

xviii

(lanjutan)

xix

(lanjutan)

Documents

MONITORING TEKANAN DARAH, KADAR GULA DARAH, ASAM …