LAPORAN TUGAS BESAR

PROYEK DASAR-DASAR PENGEMBANGAN PERANGKAT

LUNAK

Disusun Oleh :
Kelompok 6

1. Imam Piro (G1F022010)

2. Tanya Dwi Agustin (G1F022014)
3. Muhammad Jhian Efendi (G1F022022)
4. Salsabila Refiani Safitri (G1F022030)

Asisten Dosen :
1. Aisyah Karina Wandayani (G1F020032)
2. Dahuri Halomoan Harahap (G1F021014)

Dosen Pengampu :
1. Desi Andreswari, S.T., M.Cs.
2. Soni Ayi Purnama, S.Kom., M.Kom.

PROGRAM STUDI SISTEM INFORMASI

FAKULTAS TEKNIK
UNIVERSITAS BENGKULU
TAHUN AJARAN
2023/2024
 KATA PENGANTAR

Puji syukur kami panjatkan kehadirat Tuhan Yang Maha Esa yang telah
menganugerahkan banyak nikmat sehingga kami dapat menyusun laporan praktikum DDPPL ini
dengan baik. Laporan ini berisi tentang uraian hasil riset mengenai “Mockup Aplikasi
Kesehatan”.

Laporan ini kami susun secara cepat dengan bantuan dan dukungan berbagai pihak
diantaranya; ibu Desi Andreswari, S.T., M.Cs. dan bapak Soni Ayi Purnama, S.Kom., M.Kom.
selaku dosen mata kuliah Dasar-Dasar Pengembangan Perangkat Lunak, mbak Aisyah Karina
Wandayani dan abang Dahuri Halomoan Harahap dan selaku kepala asisten dosen serta Teman-
teman Sistem Informasi Angkatan 2022 yang telah turut membantu dan memberikan masukan
yang berguna bagi penulis. Laporan ini dibuat untuk memenuhi mata Kuliah Proyek Dasar-Dasar
Pengembangan Perangkat Lunak. Penulis berharap laporan ini bisa bermanfaat bagi semua dan
menjadi referensi dalam menambah wawasan dan ilmu pengetahuan. Oleh karena itu kami
sampaikan terima kasih atas waktu, tenaga dan pikirannya yang telah diberikan.

Dalam penyusunan laporan ini, kami menyadari bahwa hasil laporan praktikum ini masih
jauh dari kata sempurna. Sehingga kami selaku penyusun sangat mengharapkan kritik dan saran
yang membangun dari pembaca sekalian. Akhir kata Semoga laporan praktikum ini dapat
memberikan manfaat untuk kelompok kami khususnya, dan masyarakat Indonesia umumnya.

Bengkulu, 14 November 2023

Kelompok 6

DAFTAR ISI
 BAB I
PENDAHULUAN

1. 1 Latar Belakang

Perkembangan teknologi merupakan suatu kebutuhan yang sangat diperlukan oleh semua
masyarakat di dunia, terutama sistem informasi yang merupakan peran penting pada suatu
perusahaan yang dapat menangani dan mengegolah data operasional pada sebuah organisasi
bisnis. Dalam penerapan sistem informasi memiliki fungsi yang sangat membantu seperti
mengegolah semua transaksi bisnis secara cepat dan akurat,mengontrol proses yang berjalan dan
membangun sebuah bisnis yang tersistematis. Banyak perusahaan yang telah menerapkan sistem
infromasi pada pengelolahan bisnis baik itu perusahaan kecil maupun perusahaan besar.
Teknologi sistem informasi telah memudahkan user yang ada di perusahaan tersebut dapat
mencapai tujuan bisnis secara efektif dan efisian serta akurat.

Dalam proses perancangan sistem sangatlah penting bagi sebuah perusahaan, karena
setiap perusahaan mempunyai sistem cara bekerja yang berbeda. Sehingga kebutuhan setiap
perusahaan terhadap sistem berbeda-beda, untuk mengetahui kebutuhan sebuah perusahaan
terhadap sistem yang mereka minta harus di analisa dan visualisasikan ke kehidupan nyata
bagaimana sistem atau proses mereka dalam bekerja. Salah satu bahasa atau alat perancangan
sebuah sistem adalah Unified Modelling Language.

Pemodelan adalah salah satu proses awal dalam pengembangan suatu aplikasi atau
produk. Tahap ini dilakukan untuk meminimalkan kesalahan pada produk akhir. Salah satu
metode pemodelan berorientasi objek yang banyak digunakan adalah pemodelan UML (Unified
Modeling Language). Dalam UML suatu sistem dipandang sebagai kumpulan objek yang
memiliki atribut dan method.

Apabila sistem yang diterapkan oleh perusahaan tersebut sudah sesuai dengan kebutuhan
mereka. Maka, user yang ada didalam perusahaan tersebut akan lebih mudah dalam
menggunakannya. Apabila sebaliknya sistem yang diterapkan tidak sesuai dengan kebutuhan
user. Maka, akan menyebabkan ketidak-nyamanan terhadap user dalam penggunaan sistem tsb.

1. 2 Rumusan Masalah
 1.2.1 Bagaimana cara mendeskripsikan sebuah sistem aplikasi kesehatan yang telah
dirancang?

1.2.2 Bagaimana cara membuat suatu diagram UML dari sistem aplikasi kesehatan
yang telah dirancang?

1.2.3 Bagaimana cara melakukan Desain Interface(UI) darri sistem aplikasi kesehatan
pada suatu aplikasi figma?

1. 3 Tujuan Masalah

1.3.1 Mengetahui bagaimana cara mendeskripsikan sebuah sistem aplikasi kesehatan

yang telah dirancang.

1.3.2 Mengetahui bagaimana cara membuat suatu diagram UML dari sistem aplikasi
kesehatan yang telah dirancang.

1.3.3 Mengetahui bagaimana cara melakukan Desain Interface(UI) darri sistem aplikasi
kesehatan pada suatu aplikasi figma.
 BAB II
LANDASAN TEORI

2. 1 Desain Interface(UI)

User interface adalah bagian dimana user bisa melihat sekaligus berinteraksi
dengan komputer, website, atau aplikasi dengan tujuan agar user experience yang lebih mudah
dan intuitif. Desain User Interface (UI) adalah proses yang digunakan desainer untuk membuat
tampilan dalam perangkat lunak atau perangkat terkomputerisasi, dengan fokus pada tampilan
atau gaya. Tujuan dari desainer UI adalah untuk membuat desain antarmuka yang membuat
pengguna mudah untuk digunakan dan menyenangkan.

2.1.1 Figma

Figma adalah alat desain UI/UX berbasis web yang dirancang khusus untuk
membantu para desainer dalam membuat desain produk digital, seperti aplikasi web,
mobile, atau desktop. Figma memberikan solusi lengkap untuk mengatasi tantangan
dalam proses desain, mulai dari desain awal hingga pengembangan produk. Figma
memungkinkan para desainer untuk membuat desain dengan lebih cepat dan efisien
karena platform ini bersifat kolaboratif dan berbasis cloud. Artinya, desain dapat
dibagikan dengan tim dan klien dalam waktu nyata, sehingga setiap orang dapat melihat
dan memberikan masukan pada desain tersebut. Figma juga menawarkan banyak fitur
yang mendukung kreativitas dan produktivitas para desainer, seperti komponen dan
library, prototyping, dan integrasi dengan berbagai tools terkait.

Beberapa keuntungan menggunakan Figma sebagai alat desain UI/UX adalah

sebagai berikut:

a) Kolaboratif dan bersifat cloud-based: Figma memungkinkan banyak orang untuk

mengakses dan bekerja pada satu desain secara bersamaan, dari mana saja dan kapan saja.

b) Fitur prototyping yang lengkap: Figma memiliki fitur prototyping yang memungkinkan
desainer untuk membuat prototipe yang interaktif dengan cepat dan mudah.
c) Komponen dan library: Figma memiliki fitur komponen dan library yang memungkinkan
para desainer untuk membuat desain secara konsisten dan efisien.

d) Integrasi dengan berbagai tools terkait: Figma memiliki integrasi dengan berbagai tools
terkait seperti Sketch, Adobe Illustrator, dan Slack, sehingga memudahkan para desainer
dalam bekerja dengan berbagai tools yang digunakan.Mudah digunakan: Figma dirancang
dengan antarmuka yang mudah digunakan dan intuitif, sehingga cocok untuk para
desainer yang baru memulai.

2.1.2 Prototype

Prototype adalah model awal darisebuah produk atau sistem yang dibuat dengan
tujuan untuk diuji, dievaluasi, dan dikembangkan lebih lanjut sebelum
diimplementasikan secara penuh. Dalam konteks desain produk digital, prototype adalah
model atau simulasi dari antarmuka pengguna (UI) atau pengalaman pengguna (UX)
yang dibuat untuk menguji desain, fungsionalitas, dan pengalaman pengguna.

Prototype dibuat pada tahap awal proses desain untuk membantu desainer dalam
menguj dan mengevaluasi desain mereka sebelum mengimplementasikannya secara
penuh. Dengan membuat prototype, desainer dapat menguji desain dan menemukan
potensi masalah atau kekurangan pada desain sebelum diimplementasikan, sehingga
meminimalkan kesalahan dan biaya yang lebih tinggi pada tahap produksi.

Terdapat beberapa jenis prototype yang biasa digunakan dalam desain produk
digital, antara lain:

a) Paper Prototype: prototipe ini dibuat dengan cara manual, yaitu dengan membuat sketsa
antarmuka pada kertas atau karton.

b) Digital Prototype: prototipe ini dibuat menggunakan alat desain seperti Figma, Sketch,
atau Adobe XD. Prototype digital memungkinkan desainer untuk membuat interaksi yang
lebih realistis dan terlihat seperti produk akhir.

c) Functional Prototype: prototipe ini dibuat untuk menguji fungsi atau fitur pada produk
secara langsung. Functional prototype biasanya dibuat pada tahap pengembangan produk
yang lebih lanjut.
 2. 2 Diagram UML

UML (Unified Modelling Language) adalah suatu metode pemodelan dengan cara visual
yang dipakai sebagai alat atau sarana perancangan suatu sistem yang berorientasi objek
sebagaimana dikenal juga dengan sebutan OOP. UML juga telah digunakan sebagai standar
visualisasi, perancangan, pendokumentasian sistem, hingga penyusunan suatu blueprint.

Awalnya UML diciptakan dengan versi 1.0 pada bulan Januari 1997 oleh Object
Management Group. Dengan adanya UML, diharapkan pengembangan perangkat lunak akan
lebih mudah dan dapat memenuhi semua yang dibutuhkan oleh pengguna. Sebab, perancangan
dan pemodelan yang disiapkan secara matang merupakan awal dari terciptanya sebuah sistem
yang baik. Berikut ini adalah jenis-jenis UML:

2.2.1 Use Case Diagram

Use Case Diagram yaitu sebuah diagram UML yang memberikan penjelasan tentang
interaksi antara actor dengan sistem dan juga hubungan antara keduanya. Selain itu, dalam
Use Case Diagram juga dibahas tentang hubungan antara use case di dalam sistem
serta actorI-nya.
Use case atau kasus pengguna adalah deskripsi tentang bagaimana pengguna berinteraksi
dengan sistem atau produk. Perusahaan membangun kasus penggunaan untuk melakukan
skennario keberhasilan, skenario kegagalan, dan varian atau pengecualian penitng lainnya.
Setiap use case dirancang khusus untuk menncakup hanya satu aplikasi sistem. Meskipun
demikian, keuntungan utama dari pemodelan use case adalah ia juga mencakup semua potensi
masalah. Menemukan persyaratan kecil di awal proyek akana menghemat banyak waktu
dengan mengidentifikasi pengecualian pada skenario yang berhasil.
Dalam use case terdapat elemen kasus penggunaan, sebagai berikut :
 Aktor, merupakan orang atau benda yang berinteraksi dengan sistem anda.
Seseorang aktor dapat berupa individu, perusahaan, tim atau sesuatu lain.
 Sistem, sistem yang diperoleh sebagian orang disebut sebagai adegan. Terdiri dari
sejumlah keputusan dan interaksi yang dibuat oleh aktor.
 Sasaran, merupakan hasil interaksi aktor dengan sistem adalah tujuan anda. Ssitem
tersebut akan mennghasilkan beberapa keluaran dalam beberapa keadaan dan
hanya mnneghasilkan satu keluaran pada keadaan lain.
  Prasyarat atau kondisi, merupakan persyaratan atau kenyataan mengenai apa yang
harus terjadi sebelum dan sesudah use case.
 Aturan dasar, kasus pengguaan yang beroperasi dengan sempurna dan persis
seperti yang dimaksudkan tanpa pengecualian atau kesalahan dalam
pengoperasiannya dikenal sebagai alur fundamental atau skenario keberhasilan
utama.
 Aliran alternatif, merupakan penyimpanan dari skenario keberhasilan utama atau
biasanya muncul ketik aterjadi kesalahan tingkat sistem.

2.2.2 Activity Diagram

Activity Diagram atau diagram aktivitas merupakan suatu diagram UML untuk
memberikan gambaran tentang proses dari sebuah sistem. Segala proses di dalam sistem
akan digambarkan oleh diagram ini dengan lengkap dan rinci tahapan demi tahapannya,
dari masukan hingga keluaran dari sistem tersebut.
Diagaram activity menggambarkan bagaimana aktifitas dikoordinasikan untuk
menyediakan layanan yang dapat berada pada tingkat abstraksi berbeda. Biasanya, suatu
peristiwa perlu dicapai oleh beberapa operasi, khususnya jika operasi tersebut
dimaksudkan untuk mencapai sejumlah hal berbeda yang memerlukan koordinasi atau
bagaimana peristiwa dalam satu kasus penggunaan berhubungan satu sama lain.
Sebelum memulai membuat diagram aktivitas, terlebih dahulu harus memahamai
susunannya. Beberapa komponen paling umum diagram aktivitas, meliputi :
 Tindakan : sebuah langkah dalam aktivitas, di mana pengguna atau perangkat lunak
melakukan tugas tertentu. Dalam luadchart, tindakan dikembangjan dengan persegi
panjang bermata bulat.
 Node keputusan : cabang bersyarat dalam aliran yang diwakili oleh berlian. Ini
mencakup satu masukan dan dua atau lebih.
 Arus kontrol : nama lain untuk konektor yang menunjukkan aliran langkah dalam
diagram.
 Node awal : dilambangkan dengan limgkaran hitam sebagai awal dari sebuah proses.
 Node akhir : node kahir biasanya diwakili oleh lingkaran hitam yang digariskan
sebagai akhir dalam sebuah proses.
2.2.3 ERD (Entity Relationship Diagram)
ERD adalah sebuah gambar atau diagram yang digunakan untuk menggambarkan
hubungan antara entitas(objek) dalam sebuah database. ERD atau diagram hubungan
entitas adalah sebuah diagram yangg digunakan untuk perancangan suatu database dan
menunjukkan relasi atau hubungan antar objek atau entitas beserta atribut-atributnya
secara detail. Bentuknya seperti diagram yang menjelaskan hubungan antar objek data.

a) Komponen Entity Relationship Model (ERD)

Entity Relationship Model (ERD) adalah model konseptual yang digunakan untuk
menggambarkan hubungan antara entitas dalam suatu sistem. Berikut adalah
penjelasan mengenai komponen-komponen dalam ERD:

1) Entitas, adalah objek atau persegi panjang yang direpresentasikan dalam ERD.
Setiap entitas memiliki atribut atau ciri-ciri yang menjelaskan karakteristik dari
entitas tersebut. Misalnya, pada ERD sistem perpustakaan, entitas bisa berupa
buku, anggota, peminjaman, dan lain-lain.

2) Atribut, adalah ciri-ciri atau karakteristik yang dimiliki oleh sebuah entitas dalam
ERD. Setiap atribut memiliki tipe data yang berbeda-beda seperti angka, teks,
tanggal dan lain-lain. Misalnya, atribut pada entitas buku bisa berupa judul,
pengarang, penerbit, tahun terbit dan lain-lain.

3) Relasi (Hubungan), adalah keterkaitan atau ketergantungan antara entitas dalam

ERD. Terdapat tiga jenis hubungan dalam ERD, yaitu hubungan one-to-one, one-
to-many dan many-to-many.

 Relasi one-to-one: satu entitas pada satu sisi hubungan hanya dapat terhubung
dengan satu entitas pada sisi lain. Misalnya, satu buku hanya dapat dipinjam
oleh satu anggota pada satu waktu tertentu.

 Relasi one-to-many: satu entitas pada satu sisi hubungan dapat terhubung
dengan banyak entitas pada sisi lain. Misalnya, satu anggota dapat meminjam
banyak buku pada waktu yang berbeda-beda.

 Relasi many-to-many: banyak entitas pada satu sisi hubungan dapat terhubung
 dengan banyak entitas pada sisi lain. Misalnya, banyak anggota dapat
meminjam banyak buku pada waktu yang berbeda-beda.

4) Kardinalitas, menggambarkan jumlah entitas pada setiap sisi hubungan antara

entitas dalam ERD. Terdapat tiga jenis kardinalitas dalam ERD, yaitu satu, banyak
dan nol.

 Kardinalitas satu: satu entitas pada satu sisi hubungan hanya dapat terhubung
dengan satu entitas pada sisi lain.

 Kardinalitas banyak: satu entitas pada satu sisi hubungan dapat terhubung
dengan banyak entitas pada sisi lain.

 Kardinalitas nol: satu entitas pada satu sisi hubungan tidak selalu terhubung
dengan entitas pada sisi lain.

5) Skema Basis Data, adalah representasi keseluruhan struktur ERD yang telah dibuat.
Skema basis data terdiri dari beberapa tabel yang mewakili entitas dalam ERD dan
relasi antar tabel yang menggambarkan hubungan antar entitas. Skema basis data
digunakan untuk membuat basis data dan memudahkan dalam memanipulasi data
dalam sistem.

6) Primary Key, adalah atribut yang unik dan menjadi identitas dari setiap entitas
dalam ERD. Setiap entitas harus memiliki primary key yang berbeda-beda untuk
membedakan satu entitas dengan entitas lainnya dalam sistem. Primary key juga
digunakan sebagai kunci untuk menghubungkan antara satu tabel dengan tabel
lainnya pada skema basis data.

7) Foreign Key, adalah atribut pada satu tabel yang merujuk pada primary key dari
tabel lain. Foreign key digunakan untuk menghubungkan antara satu tabel dengan
tabel lainnya dalam skema basis data. Misalnya, pada ERD sistem perpustakaan,
atribut kode buku pada tabel peminjaman merupakan foreign key yang merujuk
pada primary key kode buku pada tabel buku.
2.2.4 Sequence Diagram

Diagram urutan didefinisikan sebagai jenis diagram UML (Unified Modeling

Language) yang digunakan dalam rekayasa perangkat lunak dan desain sistem untuk
memvisualisasikan interaksi dan komunikasi antara berbagai komponen atau objek dalam
suatu sistem. Diagram urutan sangat berguna untuk menggambarkan perilaku dinamis
suatu sistem dan bagaimana berbagai komponen berkolaborasi untuk mencapai tugas atau
tujuan tertentu. Elemen dan konsep kunci dalam diagram urutan meliputi:

 Lifelines: Ini mewakili objek atau komponen individual yang terlibat dalam
interaksi. Setiap garis hidup biasanya digambarkan sebagai garis vertikal, dan
namanya sering kali ditempatkan di bagian atas garis tersebut.

 Pesan: Ini adalah panah atau garis horizontal yang menghubungkan jalur hidup, yang
menunjukkan urutan pesan yang diteruskan antar objek. Pesan bisa sinkron
(memblokir) atau asinkron (non-pemblokiran), dan biasanya memiliki label yang
menjelaskan tindakan atau metode yang dipanggil.

 Bilah Aktivasi: Ini mewakili periode di mana suatu objek aktif dan memproses
pesan. Mereka digambarkan sebagai kotak atau persegi panjang vertikal pada garis
hidup dan menunjukkan durasi keterlibatan objek dalam interaksi.

 Return Messages: Ini menunjukkan respons dari suatu objek terhadap pesan yang
diterimanya. Mereka biasanya diwakili oleh garis putus-putus dan diberi label untuk
menunjukkan hasil atau nilai yang dikembalikan.

 Fragmen Opsional: Diagram urutan juga dapat menyertakan fragmen opsional, seperti
loop, kondisional, dan jalur alternatif, yang membantu menggambarkan berbagai
skenario dan titik keputusan dalam interaksi.

2.2.5 Class Diagram

Diagram kelas menggambarkan struktur sistem berorientasi objek dengan

menunjukkan kelas-kelas dalam sistem itu dan hubungan antar kelas. Diagram kelas juga
menunjukkan batasan dan atribut kelas. Diagram kelas adalah salah satu jenis diagram yang
paling berguna dalam UML karena diagram tersebut dengan jelas memetakan struktur
sistem tertentu dengan memodelkan kelas, atribut, operasi, dan hubungan antar objek.
Dengan Perangkat lunak diagram UML, membuat diagram ini tidaklah sesulit kelihatannya.
Panduan ini akan menunjukkan cara memahami, merencanakan, dan membuat diagram
kelas Anda sendiri. Notasi Diagram Kelas, sebagai berikut :

a) Kelas

 Atribut, Bagian atribut kelas mencantumkan setiap atribut kelas pada baris
terpisah. Bagian atribut bersifat opsional, tetapi bila digunakan berisi setiap
atribut kelas yang ditampilkan dalam format daftar. Baris tersebut
menggunakan format berikut: nama : tipe atribut (misalnya nomor kartu :
Integer).

 Operasi, Operasi tersebut didokumentasikan di kompartemen bawah persegi

panjang diagram kelas, yang juga bersifat opsional. Seperti halnya atribut,
operasi suatu kelas ditampilkan dalam format daftar, dengan setiap operasi
pada barisnya sendiri. Operasi didokumentasikan menggunakan notasi ini:
nama (daftar parameter) : jenis nilai yang dikembalikan (misalnya, hitungPajak
(Negara, Negara Bagian) : Mata Uang).

b) Hubungan

 Asosiasi, beberapa objek terdiri dari objek lain. Asosiasi menentukan

hubungan "memiliki" atau "keseluruhan/bagian" antara dua kelas.

 Asosiasi searah - Dalam asosiasi searah, dua kelas terkait, tetapi hanya satu
kelas yang mengetahui bahwa hubungan tersebut ada. Asosiasi searah
digambar sebagai garis padat dengan mata panah terbuka yang menunjuk
ke kelas yang diketahui.

 Asosiasi dua arah (standar) - Asosiasi adalah hubungan antara dua kelas.
Asosiasi selalu diasumsikan bersifat dua arah; ini berarti bahwa kedua
kelas mengetahui satu sama lain dan hubungannya, kecuali Anda
 mengkualifikasikan asosiasi tersebut sebagai tipe lain. Asosiasi dua arah
ditandai dengan garis tegas antara kedua kelas.

 Beragam, Tempatkan notasi multiplisitas di dekat ujung asosiasi. Simbol-

simbol ini menunjukkan jumlah instance dari satu kelas yang terhubung ke satu
instance dari kelas lainnya.

 Visibilitas, digunakan untuk menandakan siapa yang dapat mengakses

informasi yang terdapat dalam suatu kelas yang dilambangkan dengan +, -, #
dan ~ .

 Generalisasi, adalah hubungan antara suatu hal yang umum (disebut

superkelas) dan hal yang lebih spesifik (disebut subkelas).

 Kelas dan metode Abstrak, Dalam hierarki pewarisan, subkelas

mengimplementasikan detail spesifik, sedangkan kelas induk mendefinisikan
kerangka subkelasnya.

 Realisasi, adalah hubungan antara dua hal di mana satu hal (antarmuka)
menentukan kontrak yang dijamin akan dilaksanakan oleh hal lain (kelas)
dengan mengimplementasikan operasi yang ditentukan dalam kontrak itu.

 Ketergantungan, menunjukkan hubungan "penggunaan" antara dua kelas.

Dalam diagram kelas, hubungan ketergantungan ditampilkan sebagai garis
putus-putus.

2.2.6 Statemachine Diagram

State Machine Diagram sendiri merupakan diagram yang menggambarkan

perubahan dan transisi keadaan (dari satu status ke status lainnya) sebuah objek pada
program sebagai akibat dari stimulan yang diterima. Termasuk ke dalam Behavioral
Diagrams karena diagram ini berfungsi untuk memodelkan metode/behavior
(lifecycle) sebuah kelas atau objek untuk menunjukkan urutan kejadia sesaat (status)
yang dilewati sebuah objek, transisi dari sebuah status ke status lainnya. State
Machine Diagram itu sendiri berfungsi untuk menggambarkan seluruh state/status
 yang membolehkan objek-objek dalam kelas dapat dipunyai dan kejadian yang
memicu status berubah. Perubahan dalam suatu status juga disebut transisi
(transition). Yang mana pada diagram ini nantinya akan menggambarkan setiap
transisi keadaan yang dialami oleh setiap aktornya. Contohnya pada sebuah sistem
berbasis web, keadaan atau proses yang dilalui oleh seorang user ketik menggunakan
sistem tersebut akan digambarkan pada state machine diagram.. Simbol Pada State
Machines Diagram, sebagai berikut :

 State: simbol State Machines Diagram yang memiliki bentuk seperti persegi panjang
dengan sudut yang membulat serta mempunyai nama berdasarkan kondisi sekarang
ini. Notasi atau simbl ini berguna untuk menggambarkan beberapa kondisi apakah
akan melakukan kegiatan atau menunggu event.

 Transition: sebuah simbol yang digunakan untuk menggambarkan hubungan yang

terjadi antara dua state di mana state yang pertama melakukan tindakan khusus serta
memasuki state yang kedua ketika terjadinya peristiwa tertentu serta kondisi yang
akan dipenuhi.

 Start: merupakan titik awal yang digunakan untuk memberikan gambaran seputar
awalan dari suatu kejadian di dalam diagram.

 End: merupakan titik akhir yang digunakan untuk menjelaskan maupun memberikan
gambaran mengenai akhir dari suatu kejadian yang ada di dalam State Machines
Diagram.

2.2.7 Component Diagram

Component Diagram merupakan salah satu diagram pada UML yang digunakan untuk
menampilkan komponen pada sistem serta hubungan atau interaksi yang terjadi di antara
sistem tersebut. Hal fisik yang terdapat pada sistem nanti akan dimodelkan ketika sistem akan
dieksekusi. Component Diagram adalah perluasan dari diagram objek yang menunjukkan
objek bersama dengan pesan yang melakukan perjalanan dari satu ke yang lain. Selain asosiasi
antara objek, Component Diagram menunjukkan pesan yang dikirimkan oleh objek satu sama
lain. Diagram ini dapat membantu dalam memodelkan mekanisme dalam desain arsitektur
sistem dan menangkap interaksi yang menunjukkan pesan yang dilewatkan antara objek.
 2.2.8 Communication Diagram

Communication Diagram adalah perpanjangan dari diagram objek yang menunjukkan

objek beserta pesan yang berpindah dari satu objek ke objek lainnya. Selain asosiasi antar
objek, Communication Diagram menunjukkan pesan yang dikirimkan objek satu sama lain.
Sebuah Communication Diagram adalah jenis diagram interaksi yang menunjukkan objek yang
terlibat dalam skenario dan pesan yang mereka kirimkan satu sama lain. Communication
diagram dapat membantu memodelkan logika sistem yang kompleks, interaksi antara
komponen yang berbeda, dan skenario alternatif dalam sebuah use case.

2.2.9 Diployment Diagram

Deployment Diagram adalah salah satu jenis diagram dalam Unified Modeling
Language (UML) yang digunakan untuk menggambarkan bagaimana komponen perangkat
lunak dan perangkat keras (hardware) diimplementasikan dan diatur pada berbagai perangkat
fisik. Diagram ini memberikan pandangan jelas tentang bagaimana komponen-komponen
sistem berinteraksi dengan perangkat keras dan bagaimana mereka didistribusikan di berbagai
lokasi fisik.

2.2.10 Composite Structure Diagram

Composite Structure Diagram adalah salah satu artefak baru yang ditambahkan ke UML
2.0. Composite Structure Diagram adalah diagram struktural UML yang berisi kelas,
antarmuka, paket, dan hubungannya, dan yang memberikan pandangan logis dari semua, atau
bagian dari sistem perangkat lunak. Ini menunjukkan struktur internal (termasuk bagian dan
konektor) dari pengklasifikasi atau kolaborasi terstruktur.

2.2.11 Interaction Overview Diagram

Interaction Overview Diagram merupakan sebuah diagram yan digunakan untuk

melakukan visualisasi mengenai kerja sama yang terjadi antara sequence diagram dengan
activity diagram. Interaction Overview Diagram adalah salah satu jenis diagram dalam UML
(Unified Modeling Language) yang digunakan untuk memodelkan interaksi antara beberapa
diagram aktivitas atau fragmen aktivitas dalam satu tampilan yang terpadu.
 BAB III
PEMBAHASAN

3. 1 Deskripsi Sistem

Aplikasi sehat jasmani adalah aplikasi yang dibuat untuk membantu pengguna melakukan
pola hidup yang sehat, di dalam aplikasi ini terdapat beberapa fitur mulai dari resep masakan
sehat, olahraga, artikel dll. Proses aplikasi ini dimulai dengan login bagi yang sudah mempunyai
akun maka langsung saja login memasukkan username dan password tetapi untuk yang belum
ada akun harus daftar dulu memasukkan username, email dan password, ketika sudah berhasil
membuat akun maka user perlu menambahkan data berat badan, tinggi badan, usia dan jenis
kelamin, lalu proses selanjutnya akan masuk ke loading screen yang dimana di loading screen ini
terdapat deskripsi fitur yang ada dan kata kata motivasi untuk pola hidup sehat, lalu dilanjutkan
dengan proses masuk ke halaman dashboard/home dari aplikasi sehat jasmani yang terdiri dari
fitur resep, olahraga, artikel, serta tugas harian yang terdiri dari cek konten kesehatan, catat
asupan makanan & minuman, catat aktivitas gerak jalan, catat asupan air, catat berat badan, poin
dan halaman akun yang dimana pada setiap halaman ini memiliki fitur yang berbeda beda seperti
pada menu resep itu terdapat kumpulan resep sehat yang menampilkan informasi kalori, porsi,
waktu, tingkat kesulitan, rincian nutrisi kalori, lemak, protein, karbohidrat serta bahan, lalu untuk
halaman olahraga terdapat kumpulan latihan serta manfaat dari latihan tersebut, untuk halaman
artikel itu memuat artikel artikel tentang kesehatan, pola hidup sehat dan tips and trick hidup
sehat.

Selanjutnya halaman cek konten kesehatan yang dimana user membaca artikel tentang
kesehatan yang nantinya akan mendapatkan tambahan poin, lalu halaman catat asupan makanan
dan minuman yang dimana user dapat mencatat asupan apa saja yang mereka makan dalam
sehari, serta ada asupan maksimal dan minimal user, lalu halaman catat aktivitas gerak yang
dimana user dapat mencatat langkah mereka dalam sehari yang sudah ada targetnya, lalu halaman
catat asupan air yang dimana user diharuskan untuk minum 8 gelas sehari, lalu halaman berat
badan yang dimana user dapat melihat perkembangan berat badannya, selanjutnya untuk halaman
menu akun terdapat nama pengguna, level, dan point, lalu untuk halaman data personal terdapat
data jenis kelamin, tanggal lahir, berat badan, tinggi badan, terget program, terget pengurangan
berat badan dalam seminggu, target berat badan, frekuensi olahraga dan tingkat keaktifan
pengguna, kemudian untuk halaman data asupan terdapat data informasi nutrisi user mulai dari
karbohidrat, lemak, protein dan serat, lalu halaman data aktivitas itu mencakup aktivitas gerak
jalan dan berat badan user yang tercatat dan dapat dipantau perkembangannya, kemudian
halaman papan peringkat terdapat peringkat poin dan langkah pengguna aplikasi lain, jadi jika
pengguna memiliki poin dan langkah yang banyak maka akan di akumulasikan dan di tampilkan
peringkatnya, poin dan langkah ini memiliki batas tanggal, ketika sudah mencapai target tanggal
maka poin dan langkah yang sudah terkumpul akan teriset kembali dan di halaman papan
peeingkat ini terdapat riwayat poin, lalu untuk menu pusat bantuan & informasi itu terdapat
kebijakan privasi dan menu keluar dari akun yang dimana ketika keluar ini user akan keluar dari
akun dan berada pada halaman login.

3. 2 Diagram UML

a. Use Case

b. Activity Diagram

c. Entity Relationship Diagram (ERD)

d. Sequence Diagram

e. Class Diagram

f. Statemachine Diagram

g. Communication Diagram

h. Component Diagram

i. Deployment Diagram

j. Composite Structure Diagram

k. Interaction Overview Diagram

l. Package Diagram
3. 3 Desain Interface (UI)

Gambar 3.13 Halaman Awal Selamat Datang

Penjelasan :

Pada gambar diatas terdapat haaman awal selamat datang yaitu Welcome to Sehat
Jasmani, halaman ini digunakan untuk menyambut user yang masuk. User dapat menekan tombol
“click here to start!” untuk melanjutkan dan masuk ke halaman login.

Gambar 3.14 Halaman Login

Penjelasan :

Pada halaman ini user dihadapkan dengan 2 pilihan yaitu Login dan Daftar. User bebas
memilih piihan tersebut. Bila memiih login maka akan diminta email dan passowrd akun terlebih
dahulu yang nantinya akan langsung masuk pada homescreen, user juga bisa menekan tombol
“Daftar” untuk masuk kembali ke halaman Registrasi (Daftar akun).

Gambar 3.15 Halaman Daftar

Penjelasan :

Bila pada halaman login tadi user memiih untuk daftar, maka tampilan inilah yang akan
muncul nantinya. Pada halaman daftar, user diminta membuat username (nama lengkap), email
dan password untuk akun yang akan dibuat. Lalu jika sudah tekan tombol “Daftar” untuk
melanjutkan ke halaman pengisian data diri, user juga bisa menekan tombol “Login” untuk
masuk kembali ke halaman login.

Gambar 3.16 Halaman Pengisian Data Diri

Penjelasan :
 Setelah user daftar maka akan menuju ke halaman pengisian data diri ini. Pada pengisian
data diri, user diminta memasukkan data diri mereka mulai dari berat badan, tinggi badan, usia
dan gender dari user. Silahkan tekan tombol “Lanjut” untuk menuju halaman selanjutnya.

Gambar 3.17 Halaman Loading Aplikasi

Penjelasan :

Pada halaman ini adalah 2 halaman yang akan muncul setelah halaman pengisian data
diri, ini adalah halaman loading sebelum masuk ke aplikasinya yang memuat sedikit gambaran isi
aplikasi tersebut seperti fiturnya, lalu ada halaman selanjutnya yang berisi motivasi untuk hidup
sehat. User dapat menekan tombol “Lanjut” untuk menuju halaman selanjutnya.

Gambar 3.18 Halaman Homescreen

Penjelasan :
 Dihalaman inilah user bisa dengan bebas menjelajahi semua fitur yang ada pada aplikasi
mulai dari menu poin, menu tugas harian yang terdiri dari cek konten kesehatan, catat asupan
makanan & minuman, catat aktivitas gerak jalan, catat asupan air dan catat berat badan lalu ada
menu resep, menu olahraga, menu artikel dan menu akun. User hanya perlu menekan tombol
yang di inginkan,setelah itu akan langsung masuk ke halaman selanjutnya yang telah dipilih oleh
user tadi.

Gambar 3.19 Halaman Tugas Harian Cek Konten Kesehatan

Penjelasan :

Pada halaman ini user bisa mengerjakan tugas harian yang nantinya akan dapat poin jika
mengerjakannya, pada tugas harian cek konten kesehatan ini terdapat beberapa konten-konten
tentang kesehatan mulai dari konten olahraga, pola hidup sehat dan konten makanan sehat. Jika
user menyelesaikan tugas harian tersebut maka user bisa mendapatkan poin.
 Gambar 3.20 Halaman Catat Asupan Makanan & Minuman

Penjelasan :

Pada halaman ini user bisa mengerjakan tugas harian yang nantinya akan dapat poin jika
mengerjakannya, pada tugas harian catat asupan makanan & minuma ini user bisa mencatat
makanan dan minuman apa saja yang mereka konsumsi dalam sehari, disini juga terdapat asupan
minimal dan asupan maksimal user serta total kalori yang dikonsumsi user dalam sehari.

Gambar 3.21 Halaman Catat Aktivitas Gerak Jalan

Pejelasan :

Pada halaman ini user bisa mengerjakan tugas harian yang nantinya akan dapat poin jika
mengerjakannya, pada tugas harian catat aktivitas gerak jalan ini user dapat mencatat total
langkah mereka dalam sehari dan disana juga terdapat target langkah user dalam sehari.
 Gambar 3.22 Halaman Catat Asupan Air

Penjelasan :

Pada halaman ini user bisa mengerjakan tugas harian yang nantinya akan dapat poin jika
mengerjakannya, pada tugas harian catat asupan air ini user diharuskan minum 8 gelas air per
hari ketika user sudah meminum 1 gelas air maka user hanya perlu menekan 1 gambar gelas
maka otomatis akan tercatat dan ketika user sudah menyelesaikan tugas minumnya maka akan
mendapatkan poin dan kata kata motivasi untuk user.

Gambar 3.23 Halaman Catat Berat Badan

Penjelasan :

Pada halaman ini user bisa mengerjakan tugas harian yang nantinya akan dapat poin jika
mengerjakannya, pada tugas harian catat berat badan ini user dapat menginput berat badan
mereka dan ini akan tercatat serta terpantau, disini user juga dapat melihat goals berat badan
yang di inginkan.

Gambar 3.23 Halaman Peringkat Poin

Penjelasan :

Pada halaman ini user dapat melihat peringkat poin dan langkah yang mereka dapatkan
selama menggunakan aplikasi Sehat Jasmani, user hanya perlu mengumpulkan poin dan jalan
kaki sesering mungkin agar bisa di posisi peringkat pertama, perlu di perhatikan di sana juga
terdapat tanggal berlakunya peringkat tersebut dan akan direset kembali di kurun waktu yang
sudah di tentukan. Dibawah peringkat poin juga terdapat level dari akun si user.

Gambar 3.24 Halaman Riwayat Poin

Penjelasan :
 Pada halaman riwayat poin ini adalah halaman yang akan memuat poin poin yang di
kumpulkan user, jika tugas dan poinya sudah dikerjakan maka seluruh poin yang user kumpulkan
akan tampil di halaman ini.

Gambar 3.25 Halaman Tombol Resep

Penjelasan :

Pada halaman tombol “Resep” ini jika di klik akan menampilkan halaman ini yang berisi
rekomendasi resep resep sehat untuk user yang terdiri dari resep es cincau, bobor bayam dan teh
jahe lemon , user juga bisa kembali ke halaman sebelumnya.

Gambar 3.26 Halaman Rekomendasi Resep

Penjelasan :
 Pada halaman rekomendasi resep ini terdiri dari resep-resep yang ada pada halaman
sebelumnya dan jika di klik akan memuat resepnya mulai dari informasi kalori, informasi porsi
umum dan bahan bahan yang di butuhkan untuk membuat resep tersebut.

Gambar 3.27 Halaman Tombol Olahraga

Penjelasan :

Pada halaman tombol “Olahraga” ini jika di klik akan menampilkan halaman ini yang
berisi rekomendasi Olahraga dan Workout sehat untuk user yang terdiri dari Back Blaster, Stay
sharp and Strong dan Dynamic upper body workout.

Gambar 3.28 Halaman Rekomendasi Olahraga

Penjelasan :
 Pada halaman rekomendasi olahraga ini terdiri dari olahraga dan workout yang ada pada
halaman sebelumnya dan jika di klik akan memuat workoutnya mulai deskripsi dan manfaat dari
latihan workout dan persiapannya yang di butuhkan untuk melakukan olahraga tersebut.

Gambar 3.29 Halaman Tombol Artikel

Penjelasan :

Pada halaman tombol “Artikel” ini jika di klik akan menampilkan halaman ini yang berisi
rekomendasi artikel artikel sehat untuk user yang terdiri dari 3 artikel yang memuat tips tips
basmi koesterol dan lainnya, user bisa kembali ke halaman sebelumnya.

Gambar 3.30 Halaman Rekomendasi Artikel

Penjelasan :
 Pada halaman rekomendasi artikel ini terdiri dari tips tips yang ada pada halaman
sebelumnya dan jika di klik akan memuat tipsnya dan user bisa kembali ke halaman sebelumnya.

Gambar 3.31 Halaman Menu Akun

Penjelasan :

Pada halaman ini memuat tampilan menu akun user yang terdiri dari nama pengguna
(Atantis 22), level user, poin, data personal, data asupan, data aktivitas, papan peringkat,
kebijakan privasi dan keluar dari akun.

Gambar 3.32 Halaman Data Personal

Penjelasan :

Pada halaman ini terdapat data-data dari user mulai dari data jenis kelamin, tanggal lahir,
berat badan, tinggi badan, target program, target turun berat badan dalam seminggu, target berat
badan, frekuensi olahraga dalam seminggu dan tingkat keaktifan user.

Gambar 3.33 Halaman Data Asupan

Penjelasan :

Pada halaman ini terdapat data asupan makanan dan minuman user yang dimana terdapat
karbohidrat, lemak, serat dan protein yang di konsumsi user dalam sehari.

Gambar 3.34 Halaman Data Aktivitas

Penjelasan :

Pada halaman data aktivitas diatas terdapat aktivitas gerak jalan dan data aktivitas berat
badan user, disini user bisa memantau aktivitas yang diakukannya dalam seminggu atau sebuan
kedepan karena ini akan tercatat.

Gambar 3.35 Halaman Kebijakan Privasi

Penjelasan :

Pada halaman kebijakan privasi ini terdapat kebijakan privasi umum layanan sehat
jasmani yang terdiri dari kebijakan pribadi dan pendahuluan dari aplikasi sehat jasmani itu
sendiri.
 BAB IV
PENUTUP

4. 1 Kesimpulan

Desain User Interface (UI) adalah proses yang digunakan desainer untuk membuat
tampilan dalam perangkat lunak atau perangkat terkomputerisasi, dengan fokus pada tampilan
atau gaya. Figma memungkinkan para desainer untuk membuat desain dengan lebih cepat dan
efisien karena platform ini bersifat kolaboratif dan berbasis cloud.

UML (Unified Modelling Language) adalah suatu metode pemodelan dengan cara visual
yang dipakai sebagai alat atau sarana perancangan suatu sistem yang berorientasi objek
sebagaimana dikenal juga dengan sebutan OOP. UML juga telah digunakan sebagai standar
visualisasi, perancangan, pendokumentasian sistem, hingga penyusunan suatu blueprint. Di mana
diagram UML yang digunakan, ialah use case, activity diagram, erd, squence diagram, class
diagram, statemachine diagram, communication diagram, component diagram, deployment
diagram, composite structure diagr, interaction overview diagram, package diagram.

4. 1 Saran

Dalam penyusunan dan penulisan laporan praktikum ini, kami menyadari bahwa laporan
yang kami buat masih terdapat kekurangan baik dalam penulisan kata atau kekurangan lainnya.
Untuk itu, mohon kiranya asisten dosen dapat menyampaikan saran, kritik, dan perbaikan yang
harus dilakukan agar laporan ini menjadi lebih baik. Dengan demikian, ilmu yang didapatkan
dapat bermanfaat ke depannya.
DAFTAR PUSTAKA