Penyusun
Kelompok 5
Asisten
Rekayasa Kebutuhan
Rekayasa kebutuhan atau Requirement Engineering adalah nama lain dari analisis kebutuhan
dimana setiap proses pengembangan perangkat lunak pasti melalui fase analisis kebutuhan.
Rekayasa kebutuhan itu sendiri adalah sebuah proses untuk membangun layanan atau produk
yang dibutuhkan oleh pelanggan atau pengguna beserta batasan-batasan yang diberlakukan
atau aturan yang harus dipatuhi ketika produk atau layanan tersebut digunakan dan beroperasi
serta ketika produk dan layanan tersebut sedang dibangun atau dikembangkan.
Aktivitas-aktivitas dalam rekayasa kebutuhan dapat diwujudkan dengan cara-cara yang luas
dan beragam namun memiliki tujuan untuk dapat memahami pemahaman apa yang dibutuhkan
oleh pengguna atau pelanggan.
Kebutuhan itu sendiri mengacu pada standar IEEE nomor: IEEE-STD-1220-1998, menyatakan
bahwa kebutuhan adalah sebuah pernyataan yang mengidentifikasi produk atau proses, baik
secara operasional maupun fungsional, atau diperlukan batasan atau karakteristik dari desain,
yang tidak ambigu, dapat diuji, atau terukur, dan agar produk dan prosesnya dapat diterima oleh
konsumen atau sesuai dengan petunjuk penjaminan mutu secara internal. Selain itu,
berdasarkan CMMI v1.3, sebuah kebutuhan adalah sebuah kondisi atau kemampuan sistem
yang diperlukan oleh seorang pengguna untuk menyelesaikan suatu permasalahan atau untuk
mencapai suatu tujuan. Suatu kondisi atau kemampuan sistem tersebut harus dapat dipenuhi
atau dimiliki oleh suatu produk, layanan, komponen produk atau komponen layanan untuk
memenuhi perjanjian dengan supplier, standar, spesifikasi, atau dokumen yang diakui secara
formal. Selain itu, sebuah representasi kebutuhan dalam bentuk dokumentasi dari suatu kondisi
atau kemampuan sistem tersebut juga diperlukan.
Kebutuhan pengguna secara umum dibagi menjadi dua kategori utama, yaitu Kebutuhan
fungsional dan kebutuhan non-fungsional. Kebutuhan fungsional menggambarkan apa yang
sistem lakukan, sedangkan kebutuhan non-fungsional menggambarkan batasan-batasan yang
harus dipenuhi oleh sistem dalam hal batasan kualitas dan batasan penggunaan (usability).
Secara umum, kebutuhan memiliki tiga tingkatan, yakni:
1. Kebutuhan normal: yaitu kebutuhan yang harus dipenuhi dan dinyatakan secara eksplisit
oleh pengguna/stakeholder seperti fungsionalitas sistem dan performa sistem
2. Kebutuhan yang diharapkan (expected): yaitu kebutuhan yang tidak dinyatakan secara
eksplisit namun menentukan kepuasan pelanggan, seperti: kemudahan interaksi dengan
sistem, akurasi dan kebenaran proses
3. Kebutuhan yang mengejutkan (exciting): yaitu kebutuhan yang melebihi kebutuhan
normal untuk dapat lebih memuaskan customer, seperti fungsionalitas tambahan sistem
lainnya yang lebih memuaskan customer ketika menggunakan sistem dalam
menyelesaikan masalah, mencapai tujuan pengguna, dengan lebih efisien.
Hasil atau wujud nyata dari proses rekayasa kebutuhan memiliki beberapa fungsi dalam proses
rekayasa perangkat lunak, yaitu:
1. Sebagai bentuk kesepakatan antara developer, customer dan pengguna akhir akan
kebutuhan yang harus dipenuhi.
2. Menyediakan dasar yang akurat bagi proses perancangan perangkat lunak atau sistem
selanjutnya.
3. Menjadi referensi bagi proses validasi perangkat lunak untuk memastikan bahwa seluruh
kebutuhan yang telah dispesifikasikan benar, lengkap, dan konsisten.
Aktivitas-aktivitas dalam rekayasa kebutuhan terdiri dari 4 proses utama, yaitu:
1. Penggalian dan analisis kebutuhan (software requirement elicitation and analysis).
Dalam proses ini, developer harus bekerja bersama-sama dalam memahami domain
aplikasi/sistem, layanan-layanan sistem yang harus disediakan, unjuk kerja sistem yang
diperlukan, batasan-batasan perangkat keras dan sejenisnya. Proses ini lebih
difokuskan pada APA (WHAT) yang harus ada/dilakukan oleh sistem dan BUKAN
bagaimana (HOW) proses dalam sistem bekerja.
2. Spesifikasi kebutuhan (software requirement specification). Proses untuk menjelaskan
kebutuhan perangkat lunak yang telah didefinisikan sebelumnya secara lebih detail,
tepat, dan terukur, dimana pernyataan spesifikasi kebutuhan yang didefinisikan dalam
proses ini akan menjadi dasar bagi perancangan dan implementasi. Spesifikasi adalah
proses final dalam proses rekayasa kebutuhan yang akan menghasilkan dokumen SRS
(Software Requirement Specification)
3. Validasi & verifikasi kebutuhan (software requirement validation and verification). Proses
pemeriksaan untuk menjamin bahwa pernyataan kebutuhan yang telah didefinisikan
dalam dokumen SRS telah dispesifikasikan dengan benar, akurat, dan lengkap. Proses
ini dilakukan bersama-sama antara customer dan developer dan sangat penting untuk
dilakukan karena kesalahan di dalam menentukan kebutuhan akan berdampak pada
keseluruhan proses yang mengikutinya.
4. Manajemen kebutuhan (software requirement management). Aktivitas untuk melakukan
kendali terhadap kebutuhan yang sedang maupun telah didefinisikan jika terjadi
perubahan ketika sistem sedang dibangun dan dikembangkan serta setelah sistem
digunakan secara operasional.
Sebelum menggunakan aplikasi ini pengguna akan diminta untuk melakukan registrasi
terlebih dahulu. Setelah melakukan registrasi, data akan diverifikasi oleh administrator. Jika
pengguna akun telah diverifikasi maka pengguna dapat langsung login dan akan segera
masuk ke tampilan utama aplikasi. Pengguna dapat memesan dan memilih jasa antara Rapid
Test atau Swab Test. Setelah pesanan diproses, pengguna akan memilih terlebih dahulu untuk
melakukannya secara Drive Thru atau On The Spot. Setelah itu, barulah pengguna akan diberi
pilihan tempat-tempat yang menyediakan layanan tersebut.
Aplikasi ini menawarkan 2 metode pembayaran, yaitu secara cash (tunai) atau
menggunakan e-wallet. Setelah melakukan pembayaran, pengguna akan dibawa ke menu
review di aplikasi dan pengguna dapat memberikan review atau feedback kepada Rumah
Sakit atau penyedia layanan kesehatan yang bertujuan agar menjadi masukkan untuk Rumah
Sakit atau penyedia layanan kesehatan tersebut sehingga layanan yang diberikan dapat
menjadi lebih baik kedepannya.Tentunya, selain ada pengguna juga ada dokter.
Pada aplikasi ini juga menampilkan profil atau informasi dari pengguna. Dimana, profil
tersebut berisi data-data pribadi pengguna (nama lengkap, nomor handphone, alamat, dan
email) yang digunakan untuk membantu menghubungkan pengguna dengan penyedia
layanan kesehatan terdekat. Selain itu, aplikasi ini juga memungkinkan pengguna untuk dapat
melihat riwayat pemesanan yang telah dilakukan sebelumnya dan pengguna juga bisa
memberi kritik dan saran kepada developer aplikasi melalui formulir yang telah disediakan.
Dokter yang berperan pada aplikasi ini. Dimana, dokter dapat melihat informasi
pengguna dan memberikan hasil tes laboratorium pengguna pada aplikasi Go-Fit. Selain itu,
dokter juga dapat melihat review yang diberikan pengguna kepadanya serta dokter dapat
melihat riwayat pesanan yang telah dilakukan sebelumnya.
Aplikasi ini juga memiliki Administrator berperan dalam memverifikasi akun pengguna
serta yang juga dapat melihat review yang diberikan pengguna kepada dokter atau penyedia
layanan dan melihat riwayat transaksi yang telah dilakukan melalui aplikasi.
Go-Fit juga dibantu oleh Customer Service (CS) yang selalu sedia saat jam kerja untuk
memberikan respon terhadap kritik dan saran apa saja yang telah masuk. Hal ini dilakukan
karena kepuasan dan kenyamanan pengguna merupakan prioritas dari Go-Fit serta
diharapkan aplikasi ini dapat terus berkembang kedepannya.
Requirement Engineering
[SUO]
Seorang pengguna merasakan gejala covid-19. Ia ingin melakukan swab test, tetapi khawatir
mengurus registrasi untuk swab di rumah sakit karena perlu mengantri. Dengan aplikasi Go-Fit,
pengguna dapat melakukan pemesanan layanan rapid test dan/atau swab test secara online.
Pengguna dapat menggunakan aplikasi dengan melakukan registrasi akun terlebih dahulu agar
memudahkan keaslian data administrasi.
[SUO]
Seorang influencer ingin melakukan rapid test antigen sebagai syarat bepergian untuk
pekerjaannya. Ia perlu melakukan test dalam waktu dekat dan memerlukan hasil test
secepatnya. Untuk itu ia mengharapkan dapat memesan layanan rapid antigen test terdekat
dari tempatnya dan dapat memilih untuk melakukan rapid test Drive Thru atau On The Spot.
[FIR]
Seorang pengguna telah melakukan tes rapid dan tes SWAB pada tempat yang telah ditentukan
sebelumnya. Tes tersebut membutuhkan beberapa waktu untuk dapat mengetahui hasilnya.
Dibutuhkan beberapa pemberitahuan kepada pengguna apabila hasil tes yang telah dilakukan
sudah keluar dengan bantuan notifikasi. Diharapkan fitur ini dapat memudahkan pengguna
untuk mengetahui informasi mengenai hasil tes rapid dan SWAB yang telah dilakukan
pengguna. Setelah mendapatkan informasi bahwa hasil tes rapid dan SWAB sudah keluar
pengguna pun dapat melihat hasil tes yang telah dilakukan.
[FIR]
Seorang teller bank yang setiap hari harus keluar rumah untuk bekerja melakukan pemesanan
untuk tes rapid dan SWAB secara rutin setiap satu minggu sekali. Dia memanfaatkan aplikasi
Go-Fit untuk melakukan pemesanan tes rapid dan SWAB karena memberi berbagai kemudahan
untuk pengguna. Salah satu kemudahannya adalah pilihan pembayaran tagihan tes yang bisa
menyesuaikan dengan keinginan dari pengguna. Pembayaran tagihan tes dapat dilakukan
dengan dua metode, yaitu pembayaran secara cash (tunai) dan pembayaran melalui e-wallet.
Untuk memudahkan pengguna, pengguna bebas memilih metode pembayaran yang ingin
dilakukan.
[ARM]
GoFit merupakan aplikasi yang baru dibuat, dan umumnya aplikasi yang baru dibuat tidak
selalu mudah digunakan dan perlu banyak perbaikan, CEO dari GoFit ingin mengembangkan
aplikasinya sebaik mungkin demi membantu penggunanya agar merasa puas dan nyaman saat
menggunakan GoFit. Karena CEO tersebut ingin mengembangkan aplikasi semaksimal
mungkin, maka cara terbaik adalah mendengar respon pengguna, CEO menginginkan feedback
dari pengguna tentang aplikasi GoFit yang ia buat. CEO menginginkan manajer developer
aplikasi GoFit selalu mendengar respon pengguna dan segera melakukan pengembangan
terhadap aplikasi GoFit agar pengguna selalu puas dan nyaman saat menggunakan aplikasi
GoFit, oleh karena itu CEO membuat Customer Service yang selalu siap sedia 24 jam untuk
menerima setiap kritik dan saran yang masuk dari pengguna, agar bisa disampaikan kepada
CEO untuk segera diperbaiki oleh manajer developer dari aplikasi GoFit.
[ARM]
Aplikasi GoFit ingin memberikan feedback kepada rumah sakit atau layanan kesehatan yang
sudah bekerja sama dengan GoFit. Aplikasi GoFit akan meminta pengguna layanannya untuk
memberikan feedback berupa review kepada rumah sakit atau penyedia layanan kesehatan
tempat ia memesan rapid test atau swab test, yang kemudian review tersebut akan disimpan
oleh aplikasi GoFit dan akan diberikan ke pihak rumah sakit atau penyedia layanan kesehatan
untuk meningkatkan kualitas layanan mereka.
[DRA]
Aplikasi yang akan memudahkan para pengguna ini akan sangat berperan penting dalam
pencegahan penularan COVID-19. Keberadaan aplikasi GoFit akan menjadi jembatan antara
pasien rumah sakit yang disebut sebagai pengguna/user dengan rumah sakit itu sendiri. Hal ini
dapat mencegah persebaran COVID-19 karena secara tidak langsung, Aplikasi ini akan
mencegah terjadinya perkumpulan orang-orang yang menjadi sarang penyakit termasuk
COVID-19. Pada fitur ini, aplikasi akan menampilkan tempat-tempat terdekat yang dapat Swab
Test ataupun Rapid Test beserta dengan jumlah kuota yang tersisa pada tempat tersebut.
[DRA]
Pada aplikasi GoFit ini juga memiliki fitur yang akan memverifikasi akun-akun pengguna dan
mensinkronisasikan dengan data yang ada saat proses registrasi. Dengan hal tersebut, dokter
dan penyedia layanan kesehatan akan lebih mudah melakukan pendataan mulai dari riwayat
transaksi hingga data-data yang telah disimpan oleh pengguna seperti alergi obat-obatan
tertentu, terakhir pemeriksaan, dan sebagainya.
[FMS]
User melakukan pemesanan dan mendapatkan jadwal untuk rapid test atau swab test. Pada
suatu saat User baru menyadari bahwa ia berhalangan untuk melakukan tes pada jadwal yang
telah ditentukan. Oleh karena itu User melakukan pembatalan pesanan agar uang yang telah
dibayarkan tidak sia-sia.
[FMS]
User melakukan pemesanan dan mendapatkan jadwal untuk rapid test atau swab test. Pada
suatu saat User baru menyadari bahwa ia berhalangan untuk melakukan tes pada jadwal yang
telah ditentukan. Akhirnya User memutuskan melakukan penjadwalan ulang agar tes tersebut
dapat dilakukan pada waktu yang berbeda.
[FIR]
1 Aktivitas Pemberian Hasil Test
Output Notifikasi pemberitahuan bahwa hasil tes telah keluar dan hasil tes
rapid dan SWAB
[FIR]
2 Aktivitas Pembayaran
Proses
Output Notifikasi pembayaran berhasil
[SUO]
3 Aktivitas Registrasi
Proses
[SUO]
4 Aktivitas Pemesanan
Input Layanan yang dipesan (rapid test atau swab test), Cara melakukan test
(drive thru atau on the spot), tempat test, waktu test
Proses
[ARM]
[ARM]
6 Aktivitas Melakukan review terhadap rumah sakit & penyedia layanan kesehatan
Proses
[DRA]
1 Aktivitas Memilih tempat
Proses
Output Tempat yang dituju dan kuota untuk Swab Test atau Rapid Test
[DRA]
[FMS]
[FMS]
6 ACT-AP-06 Rumah Sakit & Maria adalah seorang direktur rumah sakit.
Penyedia Layanan Sebagai direktur ia memiliki visi untuk
Kesehatan meningkatkan layanan rumah sakitnya dan
memajukan bidang kesehatan Indonesia. Selama
masa pandemi, ia menyadari banyak orang
membutuhkan rapid test atau swab test, dan
seringkali rumah sakit penuh berdesakan, dan
malah menyebabkan peningkatan penyebaran
covid-19.Oleh karena itu Maria berkeinginan
untuk membuat layanannya bisa diakses secara
online, yaitu dengan cara bekerja sama dengan
aplikasi kesehatan. Selain itu, maria juga ingin
aplikasi tersebut bisa memberikan feedback
berupa review agar bisa digunakan untuk
meningkatkan layanan rumah sakitnya. Selain itu,
rumah sakit dapat menerima pembayaran secara
tunai (cash) dari user dan memvalidasinya
pembayaran tersebut.
1. Adakah aktor yang berperan sebagai “Sistem” dalam gambaran sistem yang diuraikan
dalam User Story? Mengapa? Jelaskan dengan detail dan spesifik!
Jawab:
Ada, karena perlunya kontrol pada sistem tersebut dengan hak yang berbeda pada
setiap aktornya. Masing-masing aktor dapat menggunakan sistem dengan batasan
peran yang telah diberikan.
3. Siapa saja aktor yang harus log in ke dalam sistem? Mengapa? Jelaskan dengan detail
dan spesifik!
User, Administrator, Customer Service, Dokter, Layanan Kesehatan, E-wallet Karena
user ingin menggunakan layanan aplikasi, tentu saja ia harus login agar sistem dapat
mengenali setiap user yang menggunakan layanannya dan mengetahui data dari user
tersebut. Begitu juga dengan administrator, ia bertugas menangani segala hal yang
terjadi di aplikasi, ia harus login untuk memproses pemesanan, menerima kritik user,
melakukan maintenance dan lain sebagainya. Selain itu, customer service juga perlu
login, agar ia dapat merespon kritik dan saran user. Dokter perlu melakukan login pada
sistem karena bertugas untuk upload hasil tes kepada pengguna dan juga perlu melihat
review yang diberikan pengguna sehingga perlu melakukan login. Layanan kesehatan
perlu melakukan login karena salah satu tugas mereka adalah memproses pesanan
layanan rapid test maupun swab test dan memvalidasi pembayaran tunai oleh user
sehingga dapat diverifikasi oleh administrator. Selain itu, Layanan Kesehatan juga harus
login karena akan update kuota test secara live. E-wallet perlu melakukan login pada
sistem karena mereka bertugas untuk memvalidasi pembayaran melalui e-wallet yang
dilakukan oleh user supaya pembayaran bisa diverifikasi oleh administrator.
Tugas IV: User Requirement
Identifikasi seluruh kebutuhan pengguna sebagaimana yang telah dideskripsikan dalam User
Story. Uraikan kebutuhan pengguna (user requirements) dengan kalimat yang jelas, tepat, dan
tidak ambigu. Kebutuhan pengguna yang baik adalah kebutuhan yang dinyatakan dalam
sebuah kalimat yang memiliki tujuan pengguna yang jelas dan memiliki nilai (value) atau
manfaat bagi penggunanya.
Untuk setiap anggota kelompok, setidaknya dapat mengidentifikasi sekurang-kurangnya 3
kebutuhan dari pengguna termasuk berdasarkan user story yang telah diuraikan dalam uraian
User Story maupun user story yang diuraikan sendiri oleh anggota kelompok dalam Tugas I.
User Requirement
Kode UR Requirement
5 USR-UR-05 User menggunakan sistem untuk memesan layanan rapid test SUO
dan swab test pada rumah sakit / penyedia layanan kesehatan
7 USR-UR-07 User menggunakan sistem untuk memberikan kritik dan saran ARM
8 USR-UR-08 User mencari tempat dengan kuota yang tersisa pada hari itu DRA
9 USR-UR-09 User memperbarui profil jika ada kebutuhan khusus dan tracking DRA
tanggal terakhir test
USR-UR-12 User menggunakan sistem agar dapat mengetahui status dan FMS
9 besarnya pengembalian dana dari pembatalan pemesanan rapid
test atau swab test
USR-UR-13 User menggunakan sistem agar dapat mengetahui beban biaya FMS
10 baru setelah melakukan perubahan jadwal
[DOK-AP-02] Dokter
Kode UR Requirement
11 DOK-UR-01 Dokter menggunakan sistem untuk memberikan hasil test pada FIR
user
[ADM-AP-03] Administrator
Kode UR Requirement
Kode UR Requirement
27 KES-AP-04 Rumah Sakit & Penyedia Layanan Kesehatan akan update data DRA
terkait jumlah kuota yang tersisa
[WAL-AP-05] E-Wallet
Kode UR Requirement
[CEO-AP-06] CEO
Kode UR Requirement
31 CEO-UR-01 CEO menggunakan sistem untuk melihat saran dan kritik dari ARM
pengguna untuk dibuat rencana pengembangan sistem.
Kode UR Requirement
Kode UR Requirement
System Requirement
1 FIR-SR-01 Sistem dapat memberikan notifikasi ketika hasil tes sudah keluar FIR
2 FIR-SR-02 Sistem dapat menampilkan hasil tes yang telah dilakukan user FIR
4 FIR-SR-04 Sistem dapat support dokter untuk mengupload hasil tes user FIR
9 SUO-SR-02 Sistem dapat memberikan notifikasi terkait validasi akun melalui SUO
email
11 SUO-SR-04 Sistem dapat menampilkan rumah sakit atau penyedia layanan SUO
kesehatan yang tersedia
12 SUO-SR-05 Sistem dapat menampilkan waktu yang tersedia untuk melakukan SUO
layanan rapid test dan/atau swab test
16 ARM-SR-02 Sistem dapat menerima saran dan kritik dari user ARM
17 ARM-SR-03 Sistem dapat menyimpan review yang masuk dari user ARM
18 ARM-SR-04 Sistem dapat menyimpan saran dan kritik yang masuk dari user ARM
19 ARM-SR-05 Sistem dapat support untuk maintenance yang akan dilakukan ARM
administrator
21 ARM-SR-07 Sistem dapat menampilkan saran dan kritik yang masuk kepada ARM
CEO
24 DRA-SR-01 Sistem dapat menunjukkan kuota yang tersisa untuk Rapid Tes t DRA
dan Swab Test secara langsung
25 DRA-SR-02 Sistem dapat mencari tempat untuk Rapid Test dan Swab Test DRA
berdasarkan history pengguna
27 DRA-SR-04 Sistem dapat menampilkan Rumah Sakit & Penyedia Layanan DRA
Kesehatan rekomendasi jika tempat yang dituju tidak tersedia
28 DRA-SR-05 Sistem dapat melakukan singkronisasi data dengan inputan user DRA
serta Rumah Sakit & Penyedia Layanan Kesehatan-nya
25 FMS-SR-02 sistem dapat melakukan permintaan perubahan jadwal dari User FMS
26 FMS-SR-03 Sistem dapat menampilkan status keberhasilan dari pembatalan FMS
pesanan
27 FMS-SR-04 Sistem dapat menampilkan status keberhasilan dan biaya baru FMS
dari perubahan jadwal
30 FMS-SR-07 Sistem dapat menampilkan besaran dana yang terpotong dari FMS
pembatalan pesanan
31 FMS-SR-08 Sistem dapat menampilkan total biaya baru dari perubahan jadwal FMS
pemesanan
User Requirement
Kode UR Requirement
3
4
Kode UR Requirement
System Requirement
Ubah sudut pandang kebutuhan pengguna ke dalam sudut pandang sistem yang diturunkan
dari kebutuhan pengguna. Satu kebutuhan pengguna dapat diturunkan ke dalam beberapa
kebutuhan sistem. Tuliskan kebutuhan sistem (system requirement) dalam format:
Sistem bisa <melakukan fungsionalitas> [opsional: <constraint>].
Functional Requirement
No. [USR-AP-01] Userr
Ins.
Kode Kode Software Requirement Statement Level
UR SRS
1 USR- USR- Sistem dapat menyediakan notifikasi ketika hasil tes norm FIR
UR-01 SRS- sudah keluar al
01
2 USR- USR- Sistem dapat menampilkan hasil tes yang sudah norm FIR
UR-02 SRS- diupload oleh dokter al
02
3 USR- USR- Sistem dapat menampilkan tagihan pembayaran yang norm FIR
UR-03 SRS- harus dibayarkan user setelah melakukan pemesanan al
03
5 USR- USR- Sistem dapat menyediakan laman register untuk user norm SU
UR-04 SRS- yang belum melakukan registrasi al O
05
8 USR- USR- Sistem dapat langsung ter-log in setelah user telah exciti SU
UR-04 SRS- memvalidasi email. ng O
08
9 USR- USR- Sistem dapat menampilkan pilihan layanan rapid atau norm SU
UR-05 SRS- swab test dan pilihan metode secara drive thru atau on al O
09 the spot
10 USR- USR- Sistem dapat memfilter dan menampilkan pilihan rumah norm SU
UR-05 SRS- sakit atau penyedia layanan kesehatan yang tersedia al O
10 sesuai dengan pilihan layanan dan metode yang telah
dipilih user
11 USR- USR- Sistem dapat menampilkan pilihan rumah sakit atau expe SU
UR-05 SRS- penyedia layanan kesehatan yang tersedia dengan cted O
11 urutan paling atas yang terdekat dengan alamat user
12 USR- USR- Sistem dapat menampilkan berapa jarak dalam Km dari exciti SU
UR-05 SRS- alamat user ke rumah sakit atau penyedia layanan ng O
12 kesehatan
16 USR- USR- Sistem dapat menerima saran dan kritik dari user norm AR
UR-07 SRS- al M
16
17 USR- USR- Sistem dapat memberikan feedback atas saran dan expe AR
UR-07 SRS- kritik yang telah diberikan oleh user cted M
17
19 USR- USR- Sistem dapat akan menampilkan update data kuota norm DR
UR-08 SRS- yang tersisa untuk Rapid Test dan Swab Test secara live al A
19
21 USR- USR- Sistem akan menampilkan notifikasi jika user sudah norm DR
UR-09 SRS- dapat melakukan Test untuk selanjutnya al A
21
26 USR- USR- Sistem dapat menampilkan beban biaya baru setelah expe
UR-12 SRS- melakukan perubahan jadwal dalam aktivitas cted FM
26 pemesanan S
[DOK-AP-02] Dokter
27 DOK- USR- Sistem dapat menyediakan fitur upload hasil test yang norm FIR
UR-01 SRS- dapat dilakukan oleh dokter al
27
28 DOK- USR- Sistem dapat menampilkan data diri user, riwayat norm FIR
UR-01 SRS- pemesanan user, dan review yang telah dilakukan user al
28 untuk dokter
[ADM-AP-03] Administrator
29 ADM- USR- Sistem dapat memverifikasi status pembayaran yang norm FIR
UR-01 SRS- dilakukan user al
29
32 ADM- USR- Sistem dapat menyimpan review yang masuk dari user norm AR
UR-04 SRS- al M
32
33 ADM- USR- Sistem dapat mengirimkan rekap review yang sudah exciti AR
UR-04 SRS- dibuat administrator kepada layanan kesehatan yang ng M
33 bersangkutan secara otomatis pada setiap jangka waktu
yang sudah diatur oleh administrator
34 ADM- USR- Sistem dapat menyimpan saran dan kritik yang masuk norm AR
UR-05 SRS- dari user al M
34
35 ADM- USR- Sistem dapat menyimpan data Rumah Sakit & norm DR
UR-07 SRS- Penyedia Layanan Kesehatan terkait alamat dan kuota al A
35
39 ADM- ADM- Sistem dapat melakukan pembaruan jadwal setelah ada norm FM
UR-09 SRS- permintaan perubahan al S
39
40 ADM- ADM- Sistem dapat menerima informasi besar potongan dana norm
UR-10 SRS- al FM
40 S
41 ADM- ADM- Sistem dapat mengelola secara akurat besar potongan expe
UR-10 SRS- dana cted FM
41 S
42 ADM- ADM- Sistem dapat mengirim notifikasi total biaya setelah norm
UR-11 SRS- perubahan jadwal pesanan al FM
42 S
43 ADM- ADM- Sistem dapat mengelola besar biaya setelah perubahan expe
UR-11 SRS- jadwal pesanan cted FM
43 S
44 KES-A USR- Sistem dapat memvalidasi pembayaran secara tunai norm FIR
P-01 SRS- (cash) dalam kurun waktu kurang dari 24 jam al
44
48 KES-A USR- Sistem akan mendapatkan informasi dari Rumah Sakit norm DR
P-04 SRS- & Penyedia Layanan Kesehatan terhadap update data al A
48 dan jumlah kuota yang tersisa
[WAL-AP-05] E-Wallet
49 WAL- USR- Sistem dapat memvalidasi pembayaran user melalui norm FIR
UR-01 SRS- e-wallet dalam kurun waktu kurang dari 24 jam al
49
52 WAL- WAL- Sistem dapat menerima transfer dari biaya baru expe FM
UR-03 SRS- perubahan jadwal pemesanan cted S
52
53 CEO- USR- Sistem dapat menampilkan saran dan kritik yang masuk norm AR
UR-01 SRS- kepada CEO al M
53
54 CEO- USR- Sistem dapat menyaring saran dan kritik yang masuk exciti AR
UR-01 SRS- merupakan spam atau bukan spam ng M
54
56 CSR- USR- Sistem menghilangkan notifikasi saran dan kritik masuk expe AR
UR-01 SRS- yang sudah direspon oleh customer service cted M
56
57 MGD- USR- Sistem dapat support untuk membuat dasar rencana norm AR
UR-01 SRS- pengembangan aplikasi berdasarkan rekap kritik dan al M
57 saran yang telah dibuat administrator
Non-Functional Requirement
No. Kode Kode Software Requirement Statement Level Ins.
UR SRS
2 UXL0 NFR0 Sistem dapat memproses pesanan lebih dari 1000 expe FIR
2 2 pesanan bersamaan dalam satu waktu cted
4 UXL0 NFR0 Sistem dapat diakses dengan response time kurang dari expe SU
4 4 7 detik cted O
5 UXL0 NFR0 Server mampu menampung lebih dari 10000 user expe SU
5 5 dalam satu waktu cted O
6 UXL0 NFR0 Sistem mampu dijalankan pada sistem operasi Android expe AR
6 6 iOS, dan Windows. cted M
7 UXL0 NFR0 Sistem memiliki cloud storage yang bisa digunakan exciti AR
7 7 untuk menyimpan daftar transaksi user ng M
8 UXL0 NFR0 Sistem akan menjamin keamanan data yang sudah expe DR
8 8 diinput oleh user cted A
9 UXL0 NFR0 Sistem akan membuat data masuk secara otomatis jika norm DR
9 9 user ingin memesan lagi tanpa harus input data ulang al A
10 UXL NFR1 Sistem tidak memerlukan waktu lama untuk dipahami exciti FM
10 0 penggunaannya ng S
Functional Requirement
No. [Kode Aktor] Nama Aktor
Ins.
Kode Kode Software Requirement Statement Level
UR SRS
Non-Functional Requirement
No. Kode Kode Software Requirement Statement Level Ins.
UR SRS
4
Analisis dan Desain Sistem Informasi
Program Studi Sistem Informasi
Penyusun
Kelompok 5
FatihSamudra-195150400111006-FMS
DivaArdellia-195150400111014-DRA
FirdaDestiara-195150400111020 -FIR
SarahOctavia-195150400111026-SUO
AlifMaulana-195150400111027-ARM
Asisten
2.Tujuan Praktikum
Tujuan dari pelaksanaan praktikum mata kuliah ADSI dengan materi desain terstruktur
antara lain:
a. Mahasiswa mampu memahami komponen-komponen penyusunan pada diagram
desain perangkat lunak dengan pendekatan terstruktur.
b. Mahasiswa mampu memahami aturan-aturan penyusunan komponen pada
diagram yang dibutuhkan untuk pengembangan perangkat lunak dengan
pendekatan terstruktur.
c. Mahasiswa mampu mendesain perangkat lunak berdasarkan kebutuhan dengan
pendekatan terstruktur.
3.Dasar Teori
3.1. Elemen Analisis Pemodelan
3 tujuan dari pemodelan antara lain:
a. Mendeskripsikan kebutuhan customer,
b. Sebagai basis dari tahap implementasi pengembangan software, dan
c. Sebagai acuan untuk proses validasi atas kebutuhan terhadap software yang
dibangun.
Elemen pembentuk pemodelan terstruktur didefnisikan pada Gambar 1 berikut:
Gambar 1 Elemen Analisis Pemodelan Terstruktur
Pada model diatas terdapat data dictionary yang merupakan Inti dari
pemodelan dengan pendekatan terstruktur. Data dictionary merupakan sebuah
repository yang mendeskripsikan tiap data yang digunakan pada suatu perangkat
lunak. Terdapat 3 diagram yang mengacu pada objek/data didalam data dictionary
yaitu, Entity Relationship Diagram (ERD), Data Flow Diagram (DFD) dan State
Transition Diagram (STD).
ERD mendefinisikan hubungan antar objek atau data. ERD merupakan notasi
yang digunakan untuk memodelkan aktifitas dan hubungan antar data. Atribut pada
tiap objek data dideskripsikan kedalam data object description.
DFD memiliki 2 fungsi utama yaitu:
a. Memberikan gambaran transformasi data ketika berjalan didalam sistem.
b. Mendefinisikan proses-proses yang mentranformasikan aliran data.
Deskripsi dari tiap proses dalam DFD terdapat pada penjelasan berupa teks yang
disebut dengan Process Specification (PSPEC)
Sedangkan STD menggambarkan perilaku dari sistem ketika di-trigger
(dikontrol) oleh event dari luar sistem. Informasi mengenai kontrol dari suatu
perangkat lunak dijelaskan dalam Control Specification (CSPEC).
Hubungan antar objek merupakan hal yang penting pada pemodelan data.
Contoh dari hubungan antar data yang didefinisikan kedalam ERD terdapat pada
gambar 3 berikut:
Gambar 3 Entity Relationship Diagram
3.3. Pemodelan Fungsional dan Alur Informasi
Informasi berubah ketika berjalan melalui sebuah sistem berbasis komputer.
Sistem menerima input dalam berbagai jenis dan bentuk dan pada perjalanannya
informasi dirubah oleh software, hardware maupun human sehingga menghasilkan
output yang juga bermacam-macam. Pemodelan terstruktur dimulai dari proses
mendefinisikan informasi ke dalam teknik flow modeling. Contoh dari flow modeling
terdapat pada Gambar 4 berikut:
STD memiliki notasi berupa: Notasi kotak yang merepresentasikan states dari
sistem. Tanda panah merepresentasikan transisi yang terjadi antar state didalam
sistem. Setiap panah dilengkapi dengan dua buah deskripsi, deskripsi yang berada
di atas mengindikasikan event yang menyebabkan perubahan pada state di dalam
sistem. Sedang untuk deksripsi yang berada dibawah mengindikasikan
aksi/feedback sebagai konsekuensi dari perubahan event.
Transaction Flow memiliki ciri satu data item yang disebut transaction yang
men-trigger pengeksekusian data flow lain pada jalur yang berbeda. Transaction flow
memiliki 3 elemen yaitu transaction – data tunggal yang mentrigger atau atau
beberapa aliran data. Transaction center – proses yang menghubungkan aliran
data dari transaction menjadi aliran data yang menuju jalur yang berbeda. Action
path – aliran/jalur informasi yang akan dipilih sebagai output dari proses trigger dari
data transaction. Perlu diingat bahwa kemungkinan bagi transform flow dan
transaction flow berada pada satu DFD yang sama sangat besar.
b. Tentukan apakah DFD tsb. memiliki karakteristik tipe transform flow atau
transaction flow
c. Tentukan batas antara incoming flow, transform center dan outgoing flow
d. Bangun first level factoring. Pada proses ini jika terdapat transform flow maka
DFD akan dipetakan kedalam 3 proses yang merepresentasikan alur
informasi yaitu incoming, transform dan outgoing. Pada gambar 15
didefinisikan struktur sebagai berikut: Sensor input controller mendefinisikan
aktifitas incoming information secara umum. Alarm condition controller
mendefinisikan aktifitas transform information secara umum. Alarm output
controller mendefinisikan secara umum aktifitas outgoing information.
e. Bangun second level factoring. Proses ini dilaksanakan dengan memetakan
proses-proses pada outgoing flow yang sebelumnya pada proses first level
factoring didefinisikan menjadi satu struktur utama outgoing flow yaitu alarm
output controller. Pada DFD SafeHome terlihat bahwa terdapat 6 proses
terkait struktur alarm output controller yang menjadi outgoing information
yaitu Format display 🡪 generate display. Generate alarm. Set up connection
to phone net 🡪 Genereate pulses to line. Enam proses ini kemudian akan
digambarkan sebagai struktur dengan hirarki dibawah struktur alarm output
controller. Gambar 16 menggambarkan proses second level factoring pada
sistem SafeHome. Proses dilakukan secara menyeluruh pada tiap incoming,
transform dan outgoing information sehingga menghasilkan struktur yang
komprehensif.
f. Refine first iteration
Gambar 15 Pendefinisian Struktur pada First Level Factoring
b. Tentukan apakah DFD tsb. memiliki karakteristik tipe transform flow atau
transaction flow. Pada gambar 17 diatas merupakan tipe transaction flow
dengan proses invoke command processing menjadi transaction center yang
mentrigger proses read system data, activate/deactivate system serta read
password. Perlu diingat bahwa data/informasi dapat diteruskan ke salah satu
dari 3 jalur tersebut.
c. Tentukan batas antara incoming path/transaction, transaction center dan
action path
d. Bangun first level factoring. Dari DFD yang telah didefinisikan pada Gambar
17 kemudian dibangun first level factoring. Pada first level factoring ini
struktur user interaction executive menjadi struktur utama sedang proses
pada incoming flow disusun pada hirarki di bawah struktur utama dan
menempati bagian kiri. Sedangkan transaction center yaitu Invoke command
processing membawahi action path yang di trigger oleh transaction center itu
sendiri, antara lain system configuration controller, activate/deactivate system
dan password processing controller. Gambar 18 merupakan pendefinisian
struktur dalam first level factoring.
e. Bangun second level factoring
f. Refine first iteration
Gambar 18 First Level Factoring Transaction Mapping
4.Summary
Analisis terstruktur merupakan pendekatan yang banyak digunakan untuk
menggambarkan pemodelan dari kebutuhan. Analisis terstruktur disusun dengan
berbasis pada data modeling dan flow modeling yang direpresentasikan dengan diagram
yang disebut entity-relationship diagram, dan data flow diagram, dengan diagram ini
pengembang perangkat lunak dapat melihat data object yang penting serta dapat
mendefiniskan alur serta proses transformasi data didalam perangkat lunak/sistem. Data
dan control flow diagram digunakan sebagai basis untuk mengidentifikasikan data dan
kontrol flow dari sebuah sistem. Behavioral model dirancang dengan menggunakan state
transition diagram dan isi dari data serta kontrol didefinisikan didalam data dictionary.
5.User Story
Go-Fit merupakan salah satu aplikasi dalam bidang kesehatan yang menawarkan
pemesanan layanan Rapid Test dan Swab Test secara online. Dimana, aplikasi ini akan
menghubungkan pengguna dengan Rumah Sakit atau penyedia layanan kesehatan
lainnya (seperti klinik) yang melayani Rapid Test dan Swab Test.
Aplikasi ini menawarkan 2 metode pembayaran, yaitu secara cash (tunai) atau
menggunakan e-wallet. Setelah melakukan pembayaran, pengguna akan dibawa ke
menu review di aplikasi dan pengguna dapat memberikan review atau feedback kepada
Rumah Sakit atau penyedia layanan kesehatan yang bertujuan agar menjadi masukkan
untuk Rumah Sakit atau penyedia layanan kesehatan tersebut sehingga layanan yang
diberikan dapat menjadi lebih baik kedepannya.
Pada aplikasi ini juga menampilkan profil atau informasi dari pengguna. Dimana,
profil tersebut berisi data-data pribadi pengguna (nama lengkap, nomor handphone,
alamat, dan email) yang digunakan untuk membantu menghubungkan pengguna
dengan penyedia layanan kesehatan terdekat. Selain itu, aplikasi ini juga
memungkinkan pengguna untuk dapat melihat riwayat pemesanan yang telah dilakukan
sebelumnya dan pengguna juga bisa memberi kritik dan saran kepada developer
aplikasi melalui formulir yang telah disediakan.
Tentunya, selain ada pengguna juga ada dokter yang berperan pada aplikasi ini.
Dimana, dokter dapat melihat informasi pengguna dan memberikan hasil tes
laboratorium pengguna pada aplikasi Go-Fit. Selain itu, dokter juga dapat melihat review
yang diberikan pengguna kepadanya serta dokter dapat melihat riwayat pesanan yang
telah dilakukan sebelumnya.
Aplikasi ini juga memiliki Administrator berperan dalam memverifikasi akun pengguna
serta yang juga dapat melihat review yang diberikan pengguna kepada dokter atau
penyedia layanan dan melihat riwayat transaksi yang telah dilakukan melalui aplikasi.
Go-Fit juga dibantu oleh Customer Service (CS) yang selalu sedia saat jam kerja
untuk memberikan respon terhadap kritik dan saran apa saja yang telah masuk. Hal ini
dilakukan karena kepuasan dan kenyamanan pengguna merupakan prioritas dari Go-Fit
serta diharapkan aplikasi ini dapat terus berkembang kedepannya.
6.Soal-soal Latihan
6.1. Tugas I: Pemodelan ERD
Berdasarkan User Story tentukan objek data yang mewakili entitas didalam
user story, atribut dari tiap objek data dan relationship antar objek data dalam
bentuk deskriptif.Setelah didefinisikan tiap objek data, atribut dan relationship
kedalam bentuk Entity Relationship Diagram
A. Objek Data dan Atribut
Definisikan Objek Data dan atributnya dengan menggunakan format tabel
seperti di bawah ini
A. Terminator
Tentukan terminator atau external entity dengan menggunakan format
sebagai berikut:
C. Proses
Tentukan proses yang harus ada di dalam DFD dengan memetakannya
ke dalam deskripsi pada kebutuhan
D. Penggambaran DFD
[FIR]
User Story 1
[SUO]
User Story 2
[ARM]
User Story 1
[ARM]
User Story 2
[DRA]
User Story 2
A. Process Specification
Process Specification dideskripsikan dengan menggunakan format
sebagai berikut:
User Story 1
01 PSPEC - FIR
Nama Proses Mengambil Sampel Tes
Batasan -
Algoritma
IF Id_Pesanan == TRUE
sampelTes = TRUE
ELSE
sampelTes = FALSE
END IF
02 PSPEC - FIR
Nama Proses Melakukan Tes
Batasan -
Algoritma
IF sampelTes == TRUE
laboratorium_Test
IF hasilTes ==TRUE
sendHasilTest = TRUE
ELSE
ambil_Sempel
END IF
03 PSPEC - FIR
Nama Proses Memberikan hasil tes
Input Hasil Tes
Batasan -
Algoritma
IF hasilTes == TRUE
system.input(hasil_tes)
var sendHasilTes = TRUE
sendNotification (“Hasil tes telah keluar”)
FALSE
sendNotification (“Menunggu hasil tes”)
END IF
User Story 2
01 PSPEC - FIR
Nama Proses Melakukan transaksi
Output Id_Transaksi
Algoritma
IF kuotaTersedia == TRUE
var pesanTes = TRUE
ELSE
send_notif(“Kuota tes tidak tersedia”)
END IF
02 PSPEC - FIR
Nama Proses Memberi tagihan pembayaran
Input Id_Pemesanan
Algoritma
IF Id_Pemesanan == TRUE
sendTagihan
ELSE
sendNotification (“Pemesanan belum dapat diproses”)
END IF
03 PSPEC - FIR
Nama Proses Memvalidasi pembayaran
Input Id_Pemesanan,
Batasan -
Algoritma
IF Payment == TRUE
validationPayment = TRUE
paymentSuccess
ELSE
validationPayment = FALSE
paymentFail
END IF
04 PSPEC - FIR
Nama Proses Memberi notifikasi status pembayaran
Output Notifikasi
Batasan -
Algoritma
IF paymentSuccess == TRUE
sendNotification (“Pembayaran berhasil”)
ELSE
sendNotification (“Pembayaran gagal”)
END IF
User Story 1
01 PSPEC - SUO
02 PSPEC - SUO
03 PSPEC - SUO
User Story 2
01 PSPEC - SUO
02 PSPEC - SUO
03 PSPEC - SUO
User Story 1
01 PSPEC - ARM
Batasan -
Algoritma
IF pilihanMenuKritikSaran == TRUE
system.input(kritik_saran)
var sendKritikSaran = TRUE
ELSE
sendNotification(“masukkan kritik & saran anda”)
var sendKritikSaran = FALSE
END IF
02 PSPEC - ARM
Batasan -
Algoritma
IF sendKritikSaran == TRUE
Object[] kritik_saran
send_object(“Customer Service”, kritik_saran)
var objectSent = TRUE
ELSE
var objectSent = FALSE
END IF
03 PSPEC - ARM
Batasan -
Algoritma
IF objectSent == TRUE
receiveFeedback = TRUE
ELSE
receiveFeedback = FALSE
END IF
04 PSPEC - ARM
05 PSPEC - ARM
Batasan -
Algoritma
IF dataKritikSaranRecorded == TRUE
evaluateObject(rekapanKritikSaran)
Object[] dasarRencanaPengembangan = createObject(“dasar
rencana pengembangan aplikasi”)
sendObject(rencanaPengembangan)
ELSE
sendNotificationError(object “rekapan kritik & saran” didn’t
exist)
Object[] rencanaPengembangan = NULL
END IF
06 PSPEC - ARM
Batasan
Algoritma
IF dasarRencanaPengembangan != NULL
Object[] rencanaPengembanganAplikasi = createObject(“rencana
pengembangan aplikasi”)
sendObject(rencanaPengembanganAplikasi)
ELSE
sendNotificationError(object “dasar rencana pengembangan”
didn’t exist)
Object[] rencanaPengembanganAplikasi = NULL
END IF
07 PSPEC - ARM
END IF
User Story 2
01 PSPEC - ARM
Batasan -
Algoritma
IF pemesananLayananSelesai== TRUE
system.show(halaman review)
system.input(user_data, review)
var receiveReview = TRUE
ELSE
sendNotification(“masukkan review anda”)
var receiveReview = FALSE
END IF
02 PSPEC - ARM
Batasan -
Algoritma
IF dataReviewRecorded == TRUE
sendObject(recapReview, data_rumah_sakit)
04 PSPEC - ARM
Batasan
Algoritma
IF recapReview != NULL
evaluateObject(recapReview)
var serviceEnancement = TRUE
ELSE
var serviceEnchancement = FALSE
User Story 1
01 PSPEC - DRA
Batasan -
Algoritma
IF Alamat_RS == TRUE
system.show(tempat_swab)
ELSE
system.show(rekomendasi)
END IF
02 PSPEC - DRA
Output -
Batasan -
Algoritma
IF (search == TRUE)
system.input(FOTO_RS)
system.input(ALAMAT_RS)
ELSE
sendNotificationError()
END IF
03 PSPEC - DRA
Input KUOTA_UPDATE
Batasan -
Algoritma
IF (KUOTA == TRUE)
system.input(kuota)
system.show(kuota)
ELSE
system.show(“System Not Updated”)
END IF
User Story 2
01 PSPEC - DRA
Batasan -
Algoritma
IF (TEST == TRUE)
system.setDate(input date)
system.show(tanggal_rekomendasi_test)
IF (ALERGI == TRUE)
system.input(alergi)
ELSE
system.show(“masukkan tanggal dan penyakit / alergi”)
END IF
02 PSPEC - DRA
Input Submission
Output -
Batasan -
Algoritma
IF SUBMIT == TRUE
system.setData(klik);
ELSE
system.show(“Harap Masukkan Data”)
END IF
03 PSPEC - DRA
Input -
Output Profile telah update
Batasan -
Algoritma
IF (terisi == TRUE)
DATA = TRUE
ELSE
system.show(“Harap Masukkan Data”)
END IF
User Story 1
01 PSPEC - FMS
Batasan -
Algoritma
IF Id_Pesanan != NULL
var pembatalanPesanan = TRUE
sendNotificattion(“Pesanan berhasil dibatalkan.”)
ELSE
var pembatalanPesanan = FALSE
END IF
02 PSPEC - FMS
Batasan -
Algoritma
int danaUser
float potongan
float pengembalianDana
IF batasWaktuPotonganDana < 12
var danaTerpotong = TRUE
int danaUser = 200000
float potongan = danaUser * 5/100
float pengembalianDana = danaUser - potongan
sendNotification(“Dana berhasil dikembalikan sebesar ”
pengembalianDana “dengan potongan sebesar” potongan)
ELSE
var danaTerpotong = FALSE
END IF
User Story 2
01 PSPEC - FMS
Batasan -
Algoritma
IF Id_Pesanan != NULL
var pengubahanPesanan = TRUE
sendNotificattion(“Jadwal pesanan berhasil diubah.”)
ELSE
var pengubahanPesanan = FALSE
END IF
02 PSPEC - FMS
Batasan -
Algoritma
int danaUser
int potongan
float tambahanBiaya
IF batasPengubahan == 1
var bebanBiayaBaru = TRUE
int danaUser = 200000
float tambahanBiaya = danaUser * 5/100
sendNotification(“Tambahan biaya untuk pengubahan
jadwal sebesar ” tambahanBiaya)
ELSE
var bebanBiayaBaru = FALSE
END IF
B. Control Specification
Control Specification dideskripsikan dengan menggunakan format dan
acuan sebagai berikut:
01 CSPEC - FIR
- Proses memberikan hasil tes
True True 1 1
True False 0 0
False D/C 0 0
02 CSPEC - FIR
- Proses pembayaran
Melakukan Status Pemberian Pemberian
transaksi pembayaran notifikasi notifikasi
(Event 1) (Event 2) pembayaran pembayaran
berhasil gagal(Activity/Feed
(Activity/Feedback back 2)
1)
True True 1 0
True False 0 1
False D/C 0 0
01 CSPEC - SUO
- Proses melakukan registrasi
True True 1 1
True False 0 0
False D/C 0 0
02 CSPEC - SUO
- Proses melakukan pemesanan
True True 1 1
True False 0 0
False D/C 0 0
01 CSPEC - ARM
- Proses memberikan kritik & saran
02 CSPEC - ARM
- Proses memberikan review
01 CSPEC - DRA
- MEMILIH TEMPAT
02 CSPEC - DRA
- PROFILE UPDATE
01 CSPEC - FMS
- Proses membatalkan pesanan
02 CSPEC - FMS
- Proses mengubah jadwal
C. Data Dictionary
Data dictionary dideskripsikan dengan menggunakan 2 format tabel.
Untuk format tabel pertama adalah format tabel seluruh data dan format
tabel kedua menggambarkan detail dari data pada tabel pertama. Data
dictionary dituliskan dengan format sebagai berikut:
Format data pertama yang mendata seluruh data atau kontrol yang
digunakan perangkat lunak
DD_1 - FIR
DD_2 - FIR
DD_3 - FIR
DD_4 - FIR
DD_5 - FIR
Nama Data Email User
Alias -
Penggunaan Sebagai otorisasi kepemilikan akun user
Deskripsi Data
Terdiri dari nama email dan domain email yang telah terdaftar di akun
user
DD_6 - FIR
DD_7 - FIR
DD_8 - FIR
Nama Data Jenis_Kelamin User
Alias -
Penggunaan Sebagai identifikasi jenis kelamin user
Deskripsi Data
Terdiri dari satu huruf yang merupakan huruf depan jenis kelamin
DD_9 - FIR
DD_10 - FIR
Nama Data ID_rekapan
Alias -
Penggunaan Sebagai identifikasi tiap satu rekapan dengan
rekapan yang lain
Deskripsi Data
Terdiri dari maksimal 25 karakter yang bersifat unik
DD_11 - FIR
DD_12 - FIR
Nama Data Tanggal Rekapan
Alias -
Penggunaan Sebagai identifikasi tanggal rekapan dibuat
Deskripsi Data
Terdiri dari tanggal, bulan, dan tahun dengan format hh-bb-tttt
DD_13 - SUO
Nama Data ID_admin
Alias -
Penggunaan Sebagai identifikasi kepemilikan akun admin
Deskripsi Data
Terdiri dari maksimal 25 karakter yang bersifat unik
DD_14 - SUO
Nama Data Password Admin
Alias -
Penggunaan Sebagai pengaman akun admin
Deskripsi Data
Terdiri dari kombinasi angka, huruf besar, dan huruf kecil dengan
ketentuan minimal 8 digit dan maksimal 25 digit
DD_15 - SUO
Nama Data Nama Admin
Alias -
Penggunaan Sebagai identifikasi kepemilikan akun admin
Deskripsi Data
Nama depan = merupakan data tipe varchar yang terdiri dari maksimal
150 karakter
Nama belakang = merupakan data tipe varchar yang terdiri dari
maksimal 150 karakter
DD_16 - SUO
Nama Data Jenis_kelamin Admin
Alias -
Penggunaan Sebagai identifikasi jenis kelamin admin
Deskripsi Data
Terdiri dari satu huruf yang merupakan huruf depan jenis kelamin
DD_17 - SUO
Nama Data Email Admin
Alias -
Penggunaan Sebagai otorisasi kepemilikan akun admin
Deskripsi Data
Terdiri dari nama email dan domain email yang telah terdaftar di akun
admin
DD_18 - SUO
Nama Data ID_CEO
Alias -
Penggunaan Sebagai identifikasi kepemilikan akun CEO
Deskripsi Data
Terdiri dari maksimal 25 karakter yang bersifat unik
DD_19 - SUO
Nama Data Password CEO
Alias -
Penggunaan Sebagai pengaman akun CEO
Deskripsi Data
Terdiri dari kombinasi angka, huruf besar, dan huruf kecil dengan
ketentuan minimal 8 digit dan maksimal 25 digit
DD_20 - SUO
Nama Data ID_manager
Alias -
Penggunaan Sebagai identifikasi kepemilikan akun Manager
Deskripsi Data
Terdiri dari maksimal 25 karakter yang bersifat unik
DD_21 - SUO
Nama Data Password Manager
Alias -
Penggunaan Sebagai pengaman akun Manager
Deskripsi Data
Terdiri dari kombinasi angka, huruf besar, dan huruf kecil dengan
ketentuan minimal 8 digit dan maksimal 25 digit
DD_22 - SUO
Nama Data ID_pemesanan
Alias -
Penggunaan Sebagai identifikasi tiap satu pemesanan
dengan pemesanan yang lain
Deskripsi Data
Terdiri dari maksimal 25 karakter yang bersifat unik
DD_23 - SUO
Nama Data Jenis_pemesanan
Alias -
Penggunaan Sebagai identifikasi jenis tes yang dipesan
Deskripsi Data
Terdiri dari varchar dengan maksimal 45 karakter
DD_24 - SUO
Nama Data Tempat pemesanan
Alias -
Penggunaan Sebagai identifikasi alamat rumah sakit/layanan
kesehatan
Deskripsi Data
Terdiri dari varchar dengan maksimal 100 karakter
DD_25 - ARM
Nama Data Review
Alias -
Penggunaan Sebagai isi dari review yang diberikan oleh user
Deskripsi Data
Terdiri dari varchar dengan maksimal 255 karakter
DD_26 - ARM
Nama Data Metode_pembayaran
Alias -
Penggunaan Sebagai identifikasi metode pembayaran yang
dipilih oleh user
Deskripsi Data
Terdiri dari varchar dengan maksimal 25 karakter
DD_27 - ARM
Nama Data Jadwal
Alias -
Penggunaan Sebagai identifikasi tempat dan tanggal tes
Deskripsi Data
Tempat tes = merupakan tipe data varchar dengan maksimal 100
karakter
Tanggal tes = merupakan tipe data varchar dengan maksimal 60
karakter
DD_28 - ARM
Nama Data ID_Rumah_Sakit
Alias -
Penggunaan Sebagai identifikasi tiap rumah sakit dengan
rumah sakit lainnya
Deskripsi Data
Terdiri dari tipe data varchar dengan maksimal 25 karakter yang
bersifat unik
DD_29 - ARM
Nama Data Nama Rumah Sakit
Alias -
Penggunaan Sebagai identifikasi nama rumah sakit tempat
melakukan tes
Deskripsi Data
Terdiri dari tipe data varchar dengan maksimal 60 karakter
DD_30 - ARM
Nama Data Rating Rumah Sakit
Alias -
Penggunaan Sebagai informasi mengenai kepuasan
pelanggan terhadap layanan rumah sakit
Deskripsi Data
Terdiri dari tipe data varchar dengan maksimal 60 karakter
DD_31 - ARM
Nama Data Alamat Rumah Sakit
Alias -
Penggunaan Sebagai informasi mengenai alamat dari tiap
rumah sakit
Deskripsi Data
Terdiri dari tipe data varchar dengan maksimal 100 karakter
DD_32 - ARM
Nama Data ID_customer_service
Alias -
Penggunaan Sebagai identifikasi mengenai kepemilikan akun
customer service
Deskripsi Data
Terdiri dari tipe data varchar dengan maksimal 25 karakter yang
bersifat unik
DD_33 - ARM
Nama Data Nama Customer Service
Alias -
Penggunaan Sebagai identifikasi kepemilikan akun customer
service
Deskripsi Data
Nama depan = merupakan data tipe varchar yang terdiri dari maksimal
150 karakter
Nama belakang = merupakan data tipe varchar yang terdiri dari
maksimal 150 karakter
DD_34 - ARM
Nama Data Email Customer Service
Alias -
Penggunaan sebagai otorisasi kepemilikan akun customer
service
Deskripsi Data
Terdiri dari nama email dan domain email yang telah terdaftar di akun
customer service
DD_35 - ARM
Nama Data Jenis_kelamin Customer Service
Alias -
Penggunaan sebagai identifikasi jenis kelamin customer
service
Deskripsi Data
Terdiri dari satu huruf yang merupakan huruf depan jenis kelamin
DD_36 - ARM
Nama Data ID_dokter
Alias -
Penggunaan Sebagai identifikasi kepemilikan akun dokter
Deskripsi Data
Terdiri dari tipe data varchar dengan maksimal 25 karakter yang
bersifat unik
DD_37 - DRA
Nama Data Password Dokter
Alias -
Penggunaan Sebagai pengamanan akun dokter
Deskripsi Data
Terdiri dari kombinasi angka, huruf besar, dan huruf kecil dengan
ketentuan minimal 8 digit dan maksimal 25 digit
DD_38 - DRA
Nama Data Nama Dokter
Alias -
Penggunaan Sebagai identifikasi kepemilikan akun dokter
Deskripsi Data
Nama depan = merupakan data tipe varchar yang terdiri dari maksimal
150 karakter
Nama belakang = merupakan data tipe varchar yang terdiri dari
maksimal 150 karakter
DD_39 - DRA
Nama Data Tempat_kerja
Alias -
Penggunaan Sebagai informasi nama tempat kerja dan
alamat tempat kerja dokter
Deskripsi Data
Nama tempat kerja = merupakan data dengan tipe varchar terdiri dari
maksimal 60 karakter
Alamat tempat kerja = merupakan data dengan tipe varchar terdiri dari
maksimal 100 karakter
DD_40 - DRA
Nama Data Rating Dokter
Alias -
Penggunaan Sebagai informasi mengenai kepuasan
pelanggan terhadap layanan dokter
Deskripsi Data
Terdiri dari tipe data varchar dengan maksimal 60 karakter
DD_41 - DRA
Nama Data ID_e-wallet
Alias -
Penggunaan Sebagai identifikasi kepemilikan akun E-wallet
Deskripsi Data
Terdiri dari tipe data varchar dengan maksimal 25 karakter yang
bersifat unik
DD_42 - DRA
Nama Data Password E-Wallet
Alias -
Penggunaan Sebagai pengamanan akun e-wallet
Deskripsi Data
Terdiri dari kombinasi angka, huruf besar, dan huruf kecil dengan
ketentuan minimal 8 digit dan maksimal 25 digit
DD_43 - DRA
Nama Data Nama_E-Wallet
Alias -
Penggunaan Sebagai identifikasi kepemilikan akun E-wallet
Deskripsi Data
Data dengan tipe data varchar dengan maksimal 60 karakter
DD_44 - DRA
Nama Data Email E-Wallet
Alias -
Penggunaan sebagai otorisasi kepemilikan akun E-wallet
Deskripsi Data
Terdiri dari nama email dan domain email yang telah terdaftar di akun
customer service
DD_45 - DRA
Nama Data Jenis_test
Alias -
Penggunaan Sebagai identifikasi jenis test yang dipesan
Deskripsi Data
Terdiri dari tipe data varchar dengan jumlah maksimal 15 karakter
DD_46 - DRA
Nama Data Hasil_test
Alias -
Penggunaan Sebagai penanda hasil dari test yang dilakukan
Deskripsi Data
Terdiri dari tipe data varchar dengan jumlah maksimal 200 karakter
DD_47 - DRA
Nama Data Tanggal Pemesanan
Alias -
Penggunaan Sebagai identifikasi tanggal pemesanan layanan
Deskripsi Data
Terdiri dari tanggal, bulan, dan tahun dengan format hh-bb-tttt
DD_48 - DRA
Nama Data Nama_pasien
Alias -
Penggunaan Sebagai identifikasi nama pemesan layanan
Deskripsi Data
Nama depan = merupakan data tipe varchar yang terdiri dari maksimal
150 karakter
Nama belakang = merupakan data tipe varchar yang terdiri dari
maksimal 150 karakter
DD_49 - FMS
Nama Data Nama_dokter
Alias -
Penggunaan Sebagai identifikasi nama dokter yang
melakukan layanan pemesanan
Deskripsi Data
Nama depan = merupakan data tipe varchar yang terdiri dari maksimal
150 karakter
Nama belakang = merupakan data tipe varchar yang terdiri dari
maksimal 150 karakter
DD_50 - FMS
Nama Data ID_proposal
Alias -
Penggunaan Sebagai identifikasi tiap satu proposal dengan
proposal yang lain
Deskripsi Data
Terdiri dari tipe data varchar dengan maksimal 25 karakter yang
bersifat unik
DD_51 - FMS
Nama Data Tanggal Proposal
Alias -
Penggunaan Sebagai identifikasi tanggal proposal dibuat
Deskripsi Data
Terdiri dari tanggal, bulan, dan tahun dengan format hh-bb-tttt
DD_52 - FMS
Nama Data Data Proposal
Alias -
Penggunaan Sebagai isi dari proposal mengenai rencana
pengembangan aplikasi
Deskripsi Data
Terdiri dari beberapa lembar dokumen tentang rencana
pengembangan aplikasi yang sudah dibuat
DD_53 - FMS
Nama Data ID_Layanan Test
Alias -
Penggunaan Sebagai identifikasi tiap satu layanan test
dengan layanan test yang lain
Deskripsi Data
Terdiri dari tipe data varchar dengan maksimal 25 karakter yang
bersifat unik
DD_54 - FMS
Nama Data Nama_LayananTest
Alias -
Penggunaan Sebagai identifikasi nama layanan test
Deskripsi Data
Terdiri dari tipe data varchar dengan jumlah maksimal 25 karakter
DD_55 - FMS
Nama Data Metode_LayananTest
Alias -
Penggunaan Sebagai identifikasi metode layanan test
Deskripsi Data
Terdiri dari tipe data varchar dengan jumlah maksimal 50 karakter
DD_56 - FMS
Nama Data Jumlah biaya
Alias -
Penggunaan Sebagai total pemabayaran biaya untuk tes
Deskripsi Data
Terdiri dari angka dengan ketentuan maksimal 11 digit
DD_57 - FMS
Nama Data Besar potongan
Alias -
Penggunaan Sebagai penentu besar pengembalian dana dan
tambahan baiaya
Deskripsi Data
Terdiri dari angka dengan operasi aritmetika dari jumlah biaya
dikurangi perkalian jumlah biaya dengan angka desimal yaitu 5/100,
ketentuan maksimal 11 digit
DD_58 - FMS
Nama Data Dana kembali
Alias -
Penggunaan Sebagai pengembalian dana untuk user
Deskripsi Data
Terdiri dari angka dengan ketentuan maksimal 11 digit
DD_59 - FMS
Nama Data Tambahan biaya
Alias -
Penggunaan Sebagai tambahan biaya untuk User akibat
merubah jadwal lebih dari satu kali
Deskripsi Data
Terdiri dari angka dengan operasi aritmatika dari perkalian jumlah
biaya dengan angka desimal yaitu 5/100, ketentuan maksimal 11 digit
[FIR]
User Story 1
User Story 2
[SUO]
User Story 1
User Story 2
[ARM]
User Story 1
User Story 2
[DRA]
User Story 1
User Story 2
[FMS]
User Story 1
User Story 2
A.2 Gambarkan proses first level factoring dari DFD menjadi struktur diagram.
Contoh dapat dilihat pada Gambar 15
[FIR]
Proses Memberikan Hasil Tes
[FIR]
Proses Pembayaran
[SUO]
Proses Registrasi
[SUO]
Proses Memesan Layanan
[ARM]
Proses Memberikan Kritik & Saran
[ARM]
Proses Memberikan Review Rumah Sakit
[DRA]
Proses Memilih Tempat
[FMS]
Proses mengubah jadwal pesanan
A.3 Gambarkan proses second level factoring dari DFD menjadi struktur
diagram yang komprehensif
[FIR]
Proses Memberikan Hasil Tes
[FIR]
Proses Pembayaran
[SUO]
Proses Registrasi
[SUO]
Proses Pemesanan Layanan
[ARM]
Proses Memberikan Kritik & Saran
Proses Memberikan Review Rumah Sakit
[DRA]
Proses Memilih Tempat
Proses Memperbarui Profile
[FMS]
Proses membatalkan pesanan
[FMS]
Proses mengubah jadwal pesanan
B. TRANSACTION MAPPING
B.1 Pada sub bab ini digambarkan bagian dari DFD yang memiliki ciri
transaction mapping. Pada sub bab ini juga digambarkan b atasan antara
transaction center, transaction dan action path. Contoh dapat dilihat pada
Gambar 17.
B.2 Gambarkan proses first level factoring dari DFD menjadi struktur diagram.
Contoh pada Gambar 18
B.3 Gambarkan proses second level factoring dari DFD menjadi struktur
diagram yang komprehensif
C. ARSITEKTUR PROGRAM
Gambarkan arsitektur program dengan menggabungkan hasil factoring
dari transform mapping dan transaction mapping
Analisis dan Desain Sistem Informasi
Program Studi Sistem Informasi
Modul Pendekatan Pemodelan Berorientasi Object
Penyusun
Kelompok 5
FatihSamudra-195150400111006-FMS
DivaArdellia-195150400111014-DRA
FirdaDestiara-195150400111020 -FIR
SarahOctavia-195150400111026-SUO
AlifMaulana-195150400111027-ARM
Asisten
2. Tujuan Praktikum
Tujuan dari pelaksanaan praktikum mata kuliah ADSI dengan materi desain
terstruktur antara lain:
a. Mahasiswa mampu memahami komponen-komponen penyusunan pada diagram
desain perangkat lunak dengan pendekatan berorientasi objek.
b. Mahasiswa mampu memahami aturan-aturan penyusunan komponen pada diagram
yang dibutuhkan untuk pengembangan perangkat lunak dengan pendekatan
berorientasi object.
c. Mahasiswa mampu mendesain perangkat lunak berdasarkan kebutuhan dengan
pendekatan object.
3. Dasar Teori
Berikut ini beberapa pengertian Rekayasa Perangkat Lunak
a. IEEE Computer Society : Rekayasa Perangkat Lunak sebagai penerapan suatu
pendekatan yang sistematis, disiplin dan terkuantifikasi atas pengembangan,
penggunaan dan pemeliharaan perangkat lunak, serta studi atas
pendekatan-pendekatan ini, yaitu penerapan pendekatan engineering atas perangkat
lunak.
b. Roger R. Pressman: Rekayasa Perangkat Lunak adalah pengubahan perangkat
lunak itu sendiri guna mengembangkan, memelihara, dan membangun kembali
dengan menggunakan prinsip reakayasa untuk menghasilkan perangkat lunak yang
dapat bekerja lebih efisien dan efektif untuk pengguna.
3.1. Konsep Perancangan
Perancangan adalah sebuah proses mendefinisikan sesuatu yang akan
dikerjakan dengan teknik bervariasi serta di dalamnya melibatkan deskripsi
mengenai arsitektur serta detail komponen dan juga keterbatasan yang akan dialami
dalam proses pengerjaannya (Rizky, 2011). Menurut Pressman (2010), perancangan
perangkat lunak adalah proses dimana analisis diterjemahkan menjadi blueprint
untuk membangun perangkat lunak. Awalnya, blueprint menggambarkan pandangan
menyeluruh perangkat lunak, yaitu desain pada abstraksi tingkat tinggi yang dapat
langsung ditelusuri pada sistem tertentu, objektif, data rinci, dan fungsionalitas.
Namun perbaikan berikutnya mengarah pada representasi desain dengan tingkat
abstraksi yang jauh lebih rendah.
3.2. Konsep OOAD
Menurut Kendall dan Kendall (2011), Object Oriented Analysis and Design merupakan
sebuah pendekatan untuk memikirkan suatu masalah dengan menggunakan model yang
dibuat menurut konsep sekitar dunia nyata. Dasar pembuatan adalah objek merupakan
kombinasi antara struktur data dan perilaku dalam satu entitas.
Beberapa konsep yang menjadi dasar dalam perancangan sistem dengan Object
Oriented Analysis and Design menurut Whitten dan Bentley (2007) adalah:
1. Objek adalah sesuatu yang ada atau dapat dilihat, disentuh, atau dirasakan dan
pengguna menyimpan data serta mencatat perilaku mengenai sesuatu itu.
2. Atribut adalah data yang mewakili karakteristik tentang sebuah objek.
3. Object instance adalah setiap orang khusus, tempat, sesuatu, atau kejadian, dan juga
nilai untuk atribut dari objek.
4. Behavior adalah kumpulan dari sesuatu yang dapat dilakukan oleh objek dan terkait
dengan fungsi-fungsi yang bertindak pada data objek (atribut). Pada siklus berorientasi
objek, perilaku objek merajuk kepada metode, operasi, atau fungsi.
5. Enkapsulasi adalah pengemasan beberapa item ke dalam unit.
Pendekatan ini menggunakan sebuah standar untuk pemodelan sistem berorientasi
objek yang disebut UML (Unified Modeling Language). UML bukanlah sebuah metode untuk
mengembangkan sistem, melainkan hanya notasi yang saat ini menjadi standar untuk
memodelkan desain berorientasi objek. Berbagai diagram UML, antara lain: use case
diagram, activity diagram, class diagram, object diagram, state machine diagram, composite
structure diagram, sequence diagram, communication diagram, interaction overview
diagram, timing diagram, component diagram, deployment diagram, dan package diagram
(Whitten dan Bentley, 2007).Unified Model Language (UML) adalah bahasa umum untuk :
● Memvisualisasikan grafis model yang tepat.
● Menetapkan model yang tepat, lengkap, dan tidak ambigu untuk mengambil
semua keputusan penting dalam analisis, desain dan implementasi.
● Membangun model yang dapat dihubungkan langsung dengan bahasa
pemrograman.
● Mendokumentasikan semua informasi yang dikumpulkan oleh tim sehingga
memungkinkan untuk berbagi informasi.
3.3. Diagram-diagram UML (Unified Modeling Language)
Unified Modeling Language (UML) memiliki beberapa diagram yang digunakan untuk
menggambarkan suatu sistem. Tujuan pembuatan diagram ini adalah agar sistem mudah
dimengerti oleh semua pihak.
1. Use Case Diagram
Use case diagram dipakai untuk menggambarkan relasi antara sistem, sistem eksternal,
dan user dengan kasus yang disesuaikan dengan langkah-langkah yang telah ditentukan
(Whitten dan Bentley, 2007). Use case diagram merupakan cara atau metode yang cocok
untuk menggambarkan interaksi yang jelas antara sistem dengan pengguna. Use case
diagram tidak menjelaskan secara detail tentang penggunaan use case, namun hanya
memberi gambaran singkat hubungan antara use case, aktor, dan sistem. Melalui use case
diagram, dapat diketahui fungsi-fungsi apa saja yang ada pada sistem. Nama suatu usecase
harus didefinisikan sesederhana mungkin dan dapat dipahami.
Berikut ini adalah simbol-simbol dalam use case diagram yang terdapat pada Tabel 3.1.
Tabel 3.1 Simbol-simbol pada use case diagram
Simbol Deskripsi
Use case mendeskripsikan fungsi dari
sebuah sistem dilihat dari sudut pandang
pengguna.
Actors merupakan sesuatu yang
berinteraksi dengan sistem untuk saling
bertukar informasi. Actors tidak harus
berupa manusia, tetapi dapat berupa suatu
organisasi atau sistem informasi.
3. Activity Diagram
Menurut Whitten dan Bentley (2007), activity diagram merupakan gambaran dari alur
yang berurutan dari aktivitas use case atau proses bisnis. Activity diagram juga bisa dipakai
untuk memodelkan berbagai aksi yang dilakukan saat sebuah operasi dieksekusi, dan
memodelkan hasil dari aksi tersebut. Dari diagram ini, dapat dilihat bagaimana aktivitas
dalam suatu sistem, dari mulai hingga saat sistem berakhir. Activity diagram dibentuk oleh
beberapa notasi, antara lain initial node, actions, flow, decision, merge, fork, join, dan activity
final. Swimlane terkadang digunakan untuk mempartisi aksi yang terjadi berdasarkan
pelaku. Activity diagram secara grafis digunakan untuk menggambarkan rangkaian aliran
aktivitas baik proses bisnis maupun use case.
Fungsi dari activity diagram antara lain :
● Menggambarkan proses bisnis dan urutan aktivitas dalam sebuah proses
● Memperlihatkan urutan aktifitas proses pada sistem
● Activity diagram dibuat berdasarkan sebuah atau beberapa use case pada use
case diagramSimbol-simbol dalam activity diagram terdapat pada Tabel 3.3.
Tabel 3.3 Simbol-simbol pada activity diagram
Simbol Deskripsi
Initial node berupa lingkaran penuh
yang menggambarkan titik mulai
suatu proses.
Actions adalah notasi yang
menggambarkan langkah-langkah
yang terjadi.
Flow (alur) merupakan panah dalam
diagram yang mengindikasikan alur
antar–actions.
Decision memiliki bentuk seperti wajik
dengan satu alur masuk dan dua atau
lebih alur keluar, alur keluar
ditentukan dengan kondisi tertentu.
Merge adalah wajik dengan dua atau
lebih alur masuk dan satu alur keluar
untuk menggabungkan alur yang
sebelumnya terpisah oleh decision.
Fork adalah bar hitam dengan satu
alur masuk dan dua atau lebih alur
keluar, aksi di bawah percabangan
dapat terjadi dalam urutan apapun
atau bahkan secara bersamaan.
Join adalah bar hitam dengan dua
atau lebih alur masuk dan satu alur
keluar untuk menyatukan lagi alur
aksi yang dipisahkan oleh fork.
Activity final berbentuk lingkaran
penuh dengan satu lingkaran di
luarnya untuk menggambarkan titik
akhir proses.
Sumber: Whitten dan Bentley (2007)
Sedangkan menurut Sugiarti (2013), activity diagram juga dapat digunakan untuk
memodelkan action yang akan dilakukan saat sebuah operasi dieksekusi, dan memodelkan
hasil dari action tersebut. Contoh activity diagram terdapat pada Gambar 3.1.
Gambar 3.1 Activity diagram untuk memodelkan action
Sumber: Sugiarti (2013)
4. Sequence Diagram
Sequence diagram secara grafis menggambarkan bagaimana objek berinteraksi dengan
satu sama lain melalui pesan pada sekuensi sebuah use case atau operasi. Diagram ini
mengilustrasikan bagaimana pesan terkirim dan diterima oleh objek dalam sekuensi atau
timing (Sugiarti, 2013). Pesan dapat berupa sinyal atau panggilan terhadap suatu operasi.
Notasi pesan untuk panggilan terhadap suatu operasi dapat dituliskan dalam sintaks UML
atau sintaks bahasa pemrograman tertentu. Simbol-simbol dalam sequence diagram
terdapat pada Tabel 3.4.
Tabel 3.4 Simbol-simbol pada sequence diagram
Simbol Deskripsi
Go-Fit merupakan salah satu aplikasi dalam bidang kesehatan yang menawarkan
pemesanan layanan Rapid Test dan Swab Test secara online. Dimana, aplikasi ini akan
menghubungkan pengguna dengan Rumah Sakit atau penyedia layanan kesehatan
lainnya (seperti klinik) yang melayani Rapid Test dan Swab Test.
Aplikasi ini menawarkan 2 metode pembayaran, yaitu secara cash (tunai) atau
menggunakan e-wallet. Setelah melakukan pembayaran, pengguna akan dibawa ke menu
review di aplikasi dan pengguna dapat memberikan review atau feedback kepada Rumah
Sakit atau penyedia layanan kesehatan yang bertujuan agar menjadi masukkan untuk
Rumah Sakit atau penyedia layanan kesehatan tersebut sehingga layanan yang diberikan
dapat menjadi lebih baik kedepannya.
Pada aplikasi ini juga menampilkan profil atau informasi dari pengguna. Dimana,
profil tersebut berisi data-data pribadi pengguna (nama lengkap, nomor handphone,
alamat, dan email) yang digunakan untuk membantu menghubungkan pengguna dengan
penyedia layanan kesehatan terdekat. Selain itu, aplikasi ini juga memungkinkan pengguna
untuk dapat melihat riwayat pemesanan yang telah dilakukan sebelumnya dan pengguna
juga bisa memberi kritik dan saran kepada developer aplikasi melalui formulir yang telah
disediakan.
Go-Fit juga dibantu oleh Customer Service (CS) yang selalu sedia saat jam kerja
untuk memberikan respon terhadap kritik dan saran apa saja yang telah masuk. Hal ini
dilakukan karena kepuasan dan kenyamanan pengguna merupakan prioritas dari Go-Fit
serta diharapkan aplikasi ini dapat terus berkembang kedepannya.
[FIR]
UC-001
[FIR]
UC-002
[SUO]
UC-003
[SUO]
UC-004
[ARM]
UC-005
[ARM]
UC-006
[DRA]
UC-007
[DRA]
UC-008
[FMS]
UC-009
[FMS]
UC-010
Analisis Use Case
[FIR]
UC-001
Asosiasi
Aktivitas
Include Extend
Mengambil Login dan Mendapatkan
sampel tes memberikan sampel tes
id_Pemesanan
Melakukan Memberikan Mendapatkan
tes sampel tes hasil tes
Memberikan Melakukan Mendapatkan
hasil tes login notifikasi dan
mendapatkan
hasil tes
[FIR]
UC-002
Asosiasi
Aktivitas
Include Extend
Melakukan Login dan Mendapatkan
transaksi melakukan id_Pemesana
pemesanan n
Memberikan Memberikan Mendapatkan
tagihan id_Pemesanan tagihan
pembayaran pembayaran
Memvalidasi Memberikan -
pembayaran id_Pemesanan,
kode
pembayaran,
dan bukti
pembayaran
Memberikan - Mendapatkan
informasi notifikasi
status status
pembayaran pembayaran
[SUO]
UC-003
Asosiasi
Aktivitas
Include Extend
Melakukan Mengisi form -
registrasi registrasi dan
Memvalidasi
email
[SUO]
UC-004
Asosiasi
Aktivitas
Include Extend
Memilih Login -
jenis
layanan test
Memilih Memilih jenis -
metode layanan test
layanan test
Memilih Memilih metode -
tempat layanan test
layanan test
Memilih Memilih tempat Checkout
waktu test layanan test pemesanan
layanan
Mendapatka Checkout -
n notifikasi pemesanan
pemesanan layanan
diproses
[ARM]
UC-005
Asosiasi
Aktivitas
Include Extend
Memberikan - Menerima
kritik & feedback
saran
Membuat - Mengirim
rekapan hasil rekapan
kritik &
saran
Mengirim Notifikasi kritik -
notifikasi & saran
kritik &
saran
Mengevalua Mengirim hasil Membuat
si rekapan rekapan saran dasar
kritik & & kritik rencana
saran pengembang
an aplikasi
Membuat - Mengirim
rencana rencana
pengemban pengembang
gan aplikasi an aplikasi
Memberikan Notifikasi Kritik -
feedback & Saran
Melakukan Menerima -
update rencana
sistem pengembangan
aplikasi
[ARM]
UC-006
Asosiasi
Aktivitas
Include Extend
Memberikan - Mendapatkan
review rekomendasi
rumah sakit rumah sakit
Membuat - -
rekap
review
Mengirim - -
hasil rekap
review
Mengevalua - Memperbaiki
si rekap layanan
review sesuai review
[DRA]
UC-007
Asosiasi
Aktivitas
Include Extend
Memasukan - Mendapatkan
keyword rekomendasi
tempat tes tempat tes
yang dituju Memasukkan
data tempat
Cek data Memasukkan -
sesuai data tempat
pencarian
user
[DRA]
UC-008
Asosiasi
Aktivitas
Include Extend
Mengisi Data terakhir Mendapatkan
form profile test rapid/swab rekomendasi
di luar Data alergi tempat
pendaftaran
Menyimpan Memperbarui -
data user data
Memberikan
notifikasi
[FMS]
UC-009
Asosiasi
Aktivitas
Include Extend
Memesan login, mengisi melihat daftar
tes detail pesanan, ketersediaan
dan mendapat layanan
tagihan
Membatalka - Mendapatkan
n pesanan notifikasi
Mendapatka - Mendapatkan
n notifikasi
pengembali
an dana
Menentukan mendapatkan -
besarnya detail pesanan
pengembali dan login
an dana
Memperbar login dan -
ui mengirim
ketersediaa notifikasi
n layanan
Mengirim login,
pengembali mendapatkan
an dana detail
pesanan,
mengirim
notifikasi
[FMS]
UC-009
Asosiasi
Aktivitas
Include Extend
Memesan login, mengisi melihat daftar
tes detail pesanan, ketersediaan
dan mendapat layanan
tagihan
Mengubah - Mendapatkan
jadwal notifikasi
pesanan
Mendapatka - Mendapatkan
n tagihan notifikasi
baru
Memperbar login dan -
ui jadwal mengirim
pesanan notifikasi
Menentukan mendapatkan -
besarnya detail pesanan,
tagihan
biaya baru
Generalisasi Aktor
Aktor Aktor Generalisasi
User User
Dokter Dokter
CEO CEO
Customer Customer Service
Service
Manager Manager Development
Developme
nt
Rumah Rumah Sakit
Sakit
Administrat Administrator
or
E-wallet E-wallet
Actor: User
Description: Menjelaskan proses pembayaran
Usecase Goal: User mengetahui status pembayaran yang telah dilakukan
Preconditions: Memiliki akun valid, telah melakukan pemesanan, telah melakukan
pembayaran baik tunai maupun melalui e-wallet
Main Flow: 1. User membuka aplikasi
2. User melakukan login pada aplikasi
3. User melakukan pemesanan untuk melakukan tes
4. Sistem mengirimkan tagihan pembayaran
5. User melakukan pembayaran
6. Sistem melakukan validasi pada id_Pemesanan, kode
pembayaran dan bukti pembayaran
7. Sistem mengirimkan notifikasi status pembayaran
8. User mendapatkan notifikasi status pembayaran
Alternative Flow - 1: - Sistem mengirimkan notifikasi status pembayaran gagal
Alternative Flow - 2:
Postconditions: User mendapatkan notifikasi status pembayaran
Actor: User
Description: Menjelaskan proses registrasi
Usecase Goal: User dapat terdaftar akun Go-Fit
Preconditions: Mengunduh aplikasi dan membuka halaman registrasi
Main Flow: 9. User mengunduh aplikasi
10. User membuka aplikasi
11. User memilih menu registrasi
12. User mengisi form registrasi
13. User mengirimkan form registrasi
14. User menunggu email validasi
15. Sistem mengirimkan email validasi
16. User mendapatkan email validasi
17. User memvalidasi akun melalui email yang dikirim
18. Sistem mengirimkan notifkasi akun berhasil terdaftar
19. User mendapatkan notifikasi akun berhasil terdaftar
Alternative Flow - 1: 6a1.User menunggu email validasi
6a2.Apabila email validasi tidak diterima, user dapat memilih kirim
ulang email validasi
6a3.User menunggu lagi email
Alternative Flow - 2:
Postconditions: Akun user terdaftar
Actor: User
Description: Menjelaskan proses pemesanan
Usecase Goal: User dapat memesan layanan test
Preconditions: Memiliki akun valid, telah melakukan login
Main Flow: 1. User memilih menu pemesanan
2. User memilih jenis layanan test
3. User memilih metode layanan test
4. Sistem menampilkan tempat layanan test yang tersedia
5. User memilih tempat layanan test
6. User memilih waktu test
7. User melakukan checkout pemesanan layanan
8. Sistem mengirimkan notifikasi pemesanan diproses
9. User mendapatkan notifikasi pemesanan diproses
Alternative Flow - 1: 9a1 User tidak mendapatkan notifikasi pemesanan diproses
9a2 User mendapatkan notifikasi pemesanan gagal diproses
9a3 User kembali ke main flow 7
Alternative Flow - 2:
Postconditions: User berhasil melakukan pemesanan layanan test
Alternative Flow - 1: 4.a Sistem gagal menyimpan review kritik & saran
4.b Sistem menampilkan kembali form kritik & saran
4.c User mengisi ulang form kritik & saran
4.d Sistem menyimpan kritik & saran user
Alternative Flow - 2: -
Postconditions: User mendapatkan feedback dan sistem melakukan update
Main Flow
Precondition Activity
Activity Aktor
Alternative Flow
Precondition Activity
Activity Aktor
Main Flow
Precondition Activity
Activity Aktor
Alternative Flow
Precondition Activity
Activity Aktor
Main Flow
Activity Aktor Precondition Activity
Alternative Flow
Precondition Activity
Activity Aktor
Main Flow
Activity Aktor Precondition Activity
Alternative Flow
Precondition Activity
Activity Aktor
Main Flow
Precondition Activity
Activity Aktor
Alternative Flow
Precondition Activity
Activity Aktor
Main Flow
Precondition Activity
Activity Aktor
Alternative Flow
Precondition Activity
Activity Aktor
Main Flow
Precondition Activity
Activity Aktor
Aplikasi telah
Membuka aplikasi User terinstall
Melakukan login User Aplikasi telah
aplikasi terbuka
Memasukkan keyword User Memiliki keyword
pencarian test alamat yang dituju
Mencari data yang Sistem Tempat test telah
tersimpan mengisi kebutuhan
data
Mensinkronisasikan Sistem Tempat test telah
data yang telah ada mengisi kebutuhan
dengan keyword data
Menambahkan data Administrator tempat test
yang akan disimpan memasukkan data
terbaru seperti kuota
test secara live
Memberikan Sistem User telah update
rekomendasi tempat data pada profile
sesuai dengan data update dan aplikasi
telah mendata
seluruh tempat
Mendapatkan User proses pencarian
rekomendasi tempat telah selesai
Alternative Flow
Precondition Activity
Activity Aktor
Main Flow
Precondition Activity
Activity Aktor
Aplikasi telah
Membuka aplikasi User terinstall
Melakukan login User Aplikasi telah
aplikasi terbuka
Mengisi form profile User Memiliki data berupa
diluar pendaftaran tanggal terakhir test
dan riwayat alergi
Menyimpan data user Administrator User telah submit
form
Memberikan notifikasi Sistem User telah submit
bahwa data sudah form
diperbarui
Mendapatkan notifikasi User seluruh proses telah
data telah terupdate selesai
Alternative Flow
Precondition Activity
Activity Aktor
Main Flow
Precondition Activity
Activity Aktor
Alternative Flow
Precondition Activity
Activity Aktor
Main Flow
Precondition Activity
Activity Aktor
Alternative Flow
Precondition Activity
Activity Aktor
Berdasarkan pemodelan Activity Diagram pada tugas II, buatlah sequence diagram dari
activity diagram tersebut. Isikan data sesuai dengan tabel dibawah ini yaitu aktor yang
melakukan, boundary kelas, entitas pada kelas yang berhubungan, control kelas sebagai
penghubung dengan boundary dan message sebagai pesan yang dikirimkan atau diterima.
User
Sifat
Attribut Tipe data
Private Public Protected
id_User Integer ✔
nama String ✔
No_HP String ✔
Alamat String ✔
Email String ✔
Tanggal String ✔
_Lahir
Jenis_K String ✔
elamin
saldo_E String ✔
-wallet
Method param Return
getIdUs - integer ✔
er()
setNam nama - ✔
a(nama
)
getNam - string ✔
a()
setNoH no_H - ✔
P(no_H P
P)
getNoH - string ✔
P()
setAlam Alama - ✔
at(alam t
at)
getAlam - string ✔
at()
setEmai Email - ✔
l(Email)
getEmai - string ✔
l()
setTang Tangg - ✔
galLahir al_La
(Tangga hir
l_Lahir)
getTang - String ✔
galLahir
()
setJenis Jenis_ - ✔
Kelamin Kelam
(jenis_K in
elamin)
getJeni - string ✔
sKelami
n()
getSald - string ✔
oEwalle
t()
Dokter
Sifat
Attribut Tipe data
Private Public Protected
id_Dokt Integer ✔
er
nama String ✔
Email String ✔
Jenis_K String ✔
elamin
Method param Return
getIdDo - integer ✔
kter()
setNam nama - ✔
a(nama
)
getNam - string ✔
a()
setEmai Email - ✔
l(Email)
getEmai - string ✔
l()
setJenis Jenis_ - ✔
Kelamin Kelam
(jenis_K in
elamin)
getJeni - string ✔
sKelami
n()
setHasil hasil_ - ✔
Tes(has Tes
il_Tes)
inputHa hasil_ - ✔
silTes(h Tes
asil_Tes
)
id_Pesa String ✔
nan
id_USer Integer ✔
hasil_Te String ✔
s
Method param Return
setHasil hasil_ ✔
Tes(has Tes
il_Tes)
cekHasi - string ✔
lTes()
getHasil - string ✔
Tes()
Hasil Tes
Sifat
Attribut Tipe data
Private Public Protected
id_Pem String ✔
esanan
jenis_Te String ✔
s
hasil_Te String ✔
s
tanggal String ✔
_Tes
nama_ String ✔
Pasien
nama_ String ✔
Dokter
Method param Return
getHasil - string ✔
Tes()
Notifikasi
Sifat
Attribut Tipe data
Private Public Protected
Id_User Integer ✔
id_Pesa String ✔
nan
statusH String ✔
asilTes
Method param Return
sendNo - string ✔
tification
()
User
Sifat
Attribut Tipe data
Private Public Protected
id_User Integer ✔
nama String ✔
No_HP String ✔
Alamat String ✔
Email String ✔
Tanggal String ✔
_Lahir
Jenis_K String ✔
elamin
saldo_E String ✔
-wallet
Method param Return
getIdUs - integer ✔
er()
setNam nama - ✔
a(nama
)
getNam - string ✔
a()
setNoH no_H - ✔
P(no_H P
P)
getNoH - string ✔
P()
setAlam Alama - ✔
at(alam t
at)
getAlam - string ✔
at()
setEmai Email - ✔
l(Email)
getEmai - string ✔
l()
setTang Tangg - ✔
galLahir al_La
(Tangga hir
l_Lahir)
getTang - String ✔
galLahir
()
setJenis Jenis_ - ✔
Kelamin Kelam
(jenis_K in
elamin)
getJeni - string ✔
sKelami
n()
getSald - string ✔
oEwalle
t()
Transaksi
Sifat
Attribut Tipe data
Private Public Protected
id_User Integer ✔
id_Pesa String ✔
nan
id_Tagi String ✔
han
String ✔
id_pem
bayaran
Method param Return
inputDa order - ✔
taOrder
(order)
getData - string ✔
Order()
inputPa paym - ✔
yment(p ent
ayment)
sendNo - string ✔
tification
()
Data Transaksi
Sifat
Attribut Tipe data
Private Public Protected
id_trans String ✔
aksi
dataTra String ✔
nsaksi
tanggal String ✔
Method param Return
validate - validati ✔
Paymen on
t()
setData - string ✔
Order()
sendNo - string ✔
tification
()
Notifikasi
Sifat
Attribut Tipe data
Private Public Protected
id_User Integer ✔
id_Pesa String ✔
nan
id_Tran String ✔
saksi
String ✔
validasi
Transak
si
Method param Return
validatio - validati ✔
n() on
validate string ✔
()
notValid - string ✔
ated()
Control data
Sifat
Attribut Tipe data
Private Public Protected
validity boolean ✔
Method param Return
getData - string ✔
User()
dataVali - void ✔
dity()
tampilM - void ✔
essage
Error()
tampilH - void ✔
alaman
Utama()
Data User
Sifat
Attribut Tipe data
Private Public Protected
id_User Integer ✔
nama String ✔
No_HP String ✔
Alamat String ✔
Email String ✔
Tanggal String ✔
_Lahir
Jenis_K String ✔
elamin
passwo string ✔
rd
Method param Return
setData id_Us - ✔
User() er,
nama,
no_H
P,
alama
t,
email,
Tangg
al_La
hir,
Jenis_
Kelam
in,
passw
ord
Order
Sifat
Attribut Tipe data
Private Public Protected
Jenis_T string ✔
est
Metode string ✔
_Test
Tempat string ✔
_Test
Waktu_ string ✔
Test
Method param Return
getJeni - string ✔
s_Test()
getMeto - string ✔
de_Test
()
getTem - string ✔
pat_Tes
t()
getWakt - string ✔
u_Test()
setJenis Jenis_ - ✔
_Test test
setMeto Metod - ✔
de_Test e_test
setTem Temp - ✔
apt_Tes at_tes
t t
setWakt Waktu - ✔
u_Test _test
sendDe - string ✔
tailOrde
r()
Checkout
Sifat
Attribut Tipe data
Private Public Protected
validity boolean ✔
Method param Return
dataVali - void ✔
dity()
tampilM - void ✔
essage
Gagal()
tampilM - void ✔
essage
Diprose
s()
Data Pemesanan
Sifat
Attribut Tipe data
Private Public Protected
id_User integer ✔
Jenis_T string ✔
est
Metode string ✔
_Test
Tempat string ✔
_Test
Waktu_ string ✔
Test
Method param Return
setData - string ✔
Order()
Administrator
Sifat
Attribut Tipe data
Private Public Protected
id_Admi Integer ✔
n
passwo String ✔
rd
Method param Return
setIdAd id_Ad - ✔
min(id_ min
Admin)
getIdAd - integer ✔
min()
setPass passw - ✔
word(pa ord
ssword)
getPass - string ✔
word()
CEO
Sifat
Attribut Tipe data
Private Public Protected
id_CEO Integer ✔
passwo String ✔
rd
Method param Return
setIdAd id_CE - ✔
min(id_ O
CEO)
getIdCE - integer ✔
O()
setPass passw - ✔
word(pa ord
ssword)
getPass - string ✔
word()
Manager Development
Sifat
Attribut Tipe data
Private Public Protected
id_Man Integer ✔
ager
passwo String ✔
rd
Method param Return
getIdMa - integer ✔
nager()
setPass passw - ✔
word(pa ord
ssword)
getPass - string ✔
word()
Customer Service
Sifat
Attribut Tipe data
Private Public Protected
id_Cust Integer ✔
omer_S
ervice
Nama String ✔
passwo String ✔
rd
Method param Return
getIdCu - integer ✔
stomer
Service(
)
setNam - - ✔
a(Nama
)
getNam - string ✔
a()
setPass passw - ✔
word(pa ord
ssword)
getPass - string ✔
word()
Notifikasi
Attribut Tipe data Sifat
Private Public Protected
id_Notifi Integer ✔
kasi
Method param Return
getIdNo - integer ✔
tification
()
showSu - string ✔
ccessN
otificatio
n()
showUn - string ✔
success
fulNotifi
cation()
Controller
Sifat
Attribut Tipe data
Private Public Protected
dataUs ✔
string
er
kritik_sa ✔
string
ran
Method param Return
saveDat ✔
a()
inputDa ✔
ta()
saveFai ✔
lure()
inputUn ✔
success
ful()
inputSu ✔
ccess()
Update Aplikasi
Sifat
Attribut Tipe data
Private Public Protected
id_Upd ✔
integer
ate
data_P ✔
string
atch
id_Man ✔
integer
ager
passwo ✔
rd_Man string
ager
Method param Return
prepare id_Ma ✔
Update( nger,
ID_Man
passw
ager,
ord_M
passwo
anage
rd_Man
ager) r
setUpd data_ ✔
ate(data Patch
_Patch)
applyin data_ ✔
gUpdat Patch
e(data_
Patch)
Administrator
Sifat
Attribut Tipe data
Private Public Protected
id_Admi Integer ✔
n
passwo String ✔
rd
Method param Return
setIdAd id_Ad - ✔
min(id_ min
Admin)
getIdAd - integer ✔
min()
setPass passw - ✔
word(pa ord
ssword)
getPass - string ✔
word()
Rumah Sakit
Sifat
Attribut Tipe data
Private Public Protected
id_Rum Integer ✔
ah_Saki
t
nama String ✔
rating String ✔
alamat ✔
Method param Return
setIdRu id_Ru - ✔
mahSak mah_
it(id_Ru Sakit
mah_S
akit)
getIdRu - integer ✔
mahSak
it()
setNam nama - ✔
a(nama
)
getNam - string ✔
a()
setRatin rating - ✔
g(rating
)
getRati - string ✔
ng()
setAlam Alama - ✔
at(alam t
at)
getAlam - string ✔
at()
Controller
Sifat
Attribut Tipe data
Private Public Protected
dataUs ✔
array
er
review string ✔
Method param Return
saveDat ✔
a()
inputDa ✔
ta()
saveFai ✔
lure()
inputUn ✔
success
ful()
inputSu ✔
ccess()
Review
Sifat
Attribut Tipe data
Private Public Protected
id_Revi ✔
string
ew
review string ✔
Method param Return
setIdRe id_Re - ✔
view(id_ view
Review)
getIdRe - integer ✔
view()
setRevi review - ✔
ew(revi
ew)
getRevi - string ✔
ew()
Rekomendasi
Sifat
Attribut Tipe data
Private Public Protected
id_Reko ✔
mendas string
i
nama_ ✔
Rumah string
_Sakit
Method param Return
setIdRe id_Re - ✔
komend kome
asi(id_R ndasi
ekomen
dasi)
getIdRe - integer ✔
komend
asi()
setNam nama - ✔
aRuma _Rum
hSakit(n ah_Sa
ama_R kit
umah_
Sakit)
getNam - string ✔
aRuma
hSakit()
Peningkatan Layanan
Sifat
Attribut Tipe data
Private Public Protected
id_Rum ✔
ah_Saki string
t
passwo ✔
rd_Rum
string
ah_Saki
t
rekap_r ✔
string
eview
Method param Return
readDo id_Ru - ✔
cument( mah_
ID_Rum Sakit,
ah_Saki passw
t, ord_R
Passwo umah
rd) _Sakit
evaluat rekap -r ✔
eDocu _revie
ment(re w
kap_rev
iew)
setServi rekap - ✔
ceImpor _revie
vement( w
rekap_r
eview)
[DRA] Mencari tempat test (CD-007)
User
Sifat
Attribut Tipe data
Private Public Protected
id_User Integer ✔
nama String ✔
No_HP String ✔
Alamat String ✔
Email String ✔
Tanggal String ✔
_Lahir
Jenis_K String ✔
elamin
Method param Return
getIdUs - integer ✔
er()
setNam nama - ✔
a(nama
)
getNam - string ✔
a()
setNoH no_H - ✔
P(no_H P
P)
getNoH - string ✔
P()
setAlam Alama - ✔
at(alam t
at)
getAlam - string ✔
at()
setEmai Email - ✔
l(Email)
getEmai - string ✔
l()
setTang Tangg - ✔
galLahir al_La
(Tangga hir
l_Lahir)
getTang - String ✔
galLahir
()
setJenis Jenis_ - ✔
Kelamin Kelam
(jenis_K in
elamin)
getJeni - string ✔
sKelami
n()
setKey - - ✔
wordt()
getKeyo - String ✔
word()
getData - String ✔
User()
Controller
Sifat
Attribut Tipe data
Private Public Protected
dataUs ✔
array
er
availabl ✔
e_place string
s
Method param Return
saveDat - String ✔
a()
inputDa - String ✔
ta()
check_ - string ✔
places()
setInfor - ✔
mation()
getInfor - string ✔
mation()
searchP - string ✔
laces()
Administrator
Sifat
Attribut Tipe data
Private Public Protected
id_Admi Integer ✔
n
passwo String ✔
rd
Method param Return
setIdAd id_Ad - ✔
min(id_ min
Admin)
getIdAd - integer ✔
min()
setPass passw - ✔
word(pa ord
ssword)
getPass - string ✔
word()
saveDat - - ✔
a()
setInfor - - ✔
mation()
getInfor - string ✔
mation()
Rumah Sakit
Sifat
Attribut Tipe data
Private Public Protected
idRS Integer ✔
nama_ String ✔
RS
rating String ✔
alamat String ✔
Method param Return
setIdRS id_Rs - ✔
(idRS)
getIdRS - integer ✔
()
setNam nama - ✔
a(nama _RS
_RS)
getNam - string ✔
aRS()
setRatin rating - ✔
g(rating
)
getRati - string ✔
ng()
setAlam Alama - ✔
at(alam t
at)
getAlam - string ✔
at()
update - String
Kuota()
User
Sifat
Attribut Tipe data
Private Public Protected
id_User Integer ✔
nama String ✔
No_HP String ✔
Alamat String ✔
Email String ✔
Tanggal String ✔
_Lahir
Jenis_K String ✔
elamin
Tanggal DateTime ✔
_Terakh
ir_Test
Alergi String ✔
NoRek_ integer ✔
EWALL
ET
Method param Return
getIdUs - integer ✔
er()
setNam nama - ✔
a(nama
)
getNam - string ✔
a()
setNoH no_H - ✔
P(no_H P
P)
getNoH - string ✔
P()
setAlam Alama - ✔
at(alam t
at)
getAlam - string ✔
at()
setEmai Email - ✔
l(Email)
getEmai - string ✔
l()
setTang Tangg - ✔
galLahir al_La
(Tangga hir
l_Lahir)
getTang - String ✔
galLahir
()
setJenis Jenis_ - ✔
Kelamin Kelam
(jenis_K in
elamin)
getJeni - string ✔
sKelami
n()
setTang Tangg - ✔
galTest( al_Ter
) akhir_
Test
getTang - String ✔
galTest(
)
setAlerg alergi - ✔
i(alergi)
getAler - string ✔
gi()
setNoR NoRe - ✔
EK() k_EW
ALLE
T
getNoR - integer ✔
EK()
getData - String ✔
User()
Controller
Sifat
Attribut Tipe data
Private Public Protected
dataUs ✔
array
er
Method param Return
saveDat - String ✔
a()
inputDa - String ✔
ta()
setInfor - ✔
mation()
getInfor - string ✔
mation()
Administrator
Sifat
Attribut Tipe data
Private Public Protected
id_Admi Integer ✔
n
passwo String ✔
rd
Method param Return
setIdAd id_Ad - ✔
min(id_ min
Admin)
getIdAd - integer ✔
min()
setPass passw - ✔
word(pa ord
ssword)
getPass - string ✔
word()
saveDat - - ✔
a()
setInfor - - ✔
mation()
getInfor - string ✔
mation()
User
Sifat
Attribut Tipe data
Private Public Protected
id_User Integer ✔
passwo String ✔
rd
nama String ✔
e_mail String ✔
gender String ✔
tanggal integer ✔
_lahir
saldo_e integer ✔
wallet
Method param Return
getId() - integer ✔
setNam nama ✔
a(nama
)
getNam - String ✔
a()
setPass passw - ✔
word(pa ord
ssword)
getPass - string ✔
word()
setEmai email - ✔
l(email)
getEmai - String ✔
l()
setGen gende ✔
der(gen r
der)
getGen - String ✔
der
setTang tangg ✔
galLahir al
(tanggal
)
getTang - integer ✔
galLahir
()
getSald - integer ✔
o()
pay() - integer ✔
Administrator
Sifat
Attribut Tipe data
Private Public Protected
id_Admi Integer ✔
n
passwo String ✔
rd
nama String ✔
e_mail String ✔
gender String ✔
data String ✔
Method param Return
getIdAd - integer ✔
min()
setNam nama ✔
a(nama
)
getNam - String ✔
a()
setPass passw - ✔
word(pa ord
ssword)
getPass - string ✔
word()
setData data String ✔
()
setEmai email - ✔
l(email)
getEmai - String ✔
l()
setGen gende ✔
der(gen r
der)
getGen - String ✔
der
getIdUs - integer ✔
er()
deleteJ - - ✔
adwal()
Ewallet
Sifat
Attribut Tipe data
Private Public Protected
id_Ewal Integer ✔
let
passwo String ✔
rd
nama String ✔
e_mail String ✔
Method param Return
getIdAd - integer ✔
min()
setNam nama ✔
a(nama
)
getNam - String ✔
a()
setPass passw - ✔
word(pa ord
ssword)
getPass - string ✔
word()
setEmai email - ✔
l(email)
getEmai - String ✔
l()
data pemesanan
Sifat
Attribut Tipe data
Private Public Protected
id_pem Integer ✔
esanan
data[] String ✔
Method param Return
getId() - integer ✔
setWakt waktu ✔
u(waktu
)
getWakt - String ✔
u()
setTang tangg - ✔
gal(tang al
gal)
getTang - String ✔
gal()
setBula bulan - ✔
n(bulan)
getBula - String ✔
n()
setTahu tahun - ✔
n(tahun
)
getTahu - String ✔
n()
getIdUs - integer ✔
er()
getIdAd - integer ✔
min()
setValid valid - ✔
asiPem
esanan(
valid)
getValid - integer ✔
Pemesa
nan()
data pemebayaran
Sifat
Attribut Tipe data
Private Public Protected
id_pem Integer ✔
bayaran
data[] String ✔
Method param Return
getId() - integer ✔
getWakt - String ✔
u()
getTang - String ✔
gal()
getBula - String ✔
n()
getTahu - String ✔
n()
setValid valid - ✔
asiPem
esanan(
valid)
getValid - integer ✔
Pemesa
nan()
[FMS] Mengubah jadwal pesanan (CD-010)
User
Sifat
Attribut Tipe data
Private Public Protected
id_User Integer ✔
passwo String ✔
rd
nama String ✔
e_mail String ✔
gender String ✔
tanggal integer ✔
_lahir
saldo_e integer ✔
wallet
Method param Return
getId() - integer ✔
setNam nama ✔
a(nama
)
getNam - String ✔
a()
setPass passw - ✔
word(pa ord
ssword)
getPass - string ✔
word()
setEmai email - ✔
l(email)
getEmai - String ✔
l()
setGen gende ✔
der(gen r
der)
getGen - String ✔
der
setTang tangg ✔
galLahir al
(tanggal
)
getTang - integer ✔
galLahir
()
getSald - integer ✔
o()
pay() - integer ✔
Administrator
Sifat
Attribut Tipe data
Private Public Protected
id_Admi Integer ✔
n
passwo String ✔
rd
nama String ✔
e_mail String ✔
gender String ✔
data String ✔
Method param Return
getIdAd - integer ✔
min()
setNam nama ✔
a(nama
)
getNam - String ✔
a()
setPass passw - ✔
word(pa ord
ssword)
getPass - string ✔
word()
setData data String ✔
()
setEmai email - ✔
l(email)
getEmai - String ✔
l()
setGen gende ✔
der(gen r
der)
getGen - String ✔
der
getIdUs - integer ✔
er()
updateJ - - ✔
adwal()
Ewallet
Sifat
Attribut Tipe data
Private Public Protected
id_Ewal Integer ✔
let
passwo String ✔
rd
nama String ✔
e_mail String ✔
Method param Return
getIdAd - integer ✔
min()
setNam nama ✔
a(nama
)
getNam - String ✔
a()
setPass passw - ✔
word(pa ord
ssword)
getPass - string ✔
word()
setEmai email - ✔
l(email)
getEmai - String ✔
l()
data pemesanan
Sifat
Attribut Tipe data
Private Public Protected
id_pem Integer ✔
esanan
data[] String ✔
Method param Return
getId() - integer ✔
setWakt waktu ✔
u(waktu
)
getWakt - String ✔
u()
setTang tangg - ✔
gal(tang al
gal)
getTang - String ✔
gal()
setBula bulan - ✔
n(bulan)
getBula - String ✔
n()
setTahu tahun - ✔
n(tahun
)
getTahu - String ✔
n()
getIdUs - integer ✔
er()
getIdAd - integer ✔
min()
setValid valid - ✔
asiPem
esanan(
valid)
getValid - integer ✔
Pemesa
nan()
data pemebayaran
Sifat
Attribut Tipe data
Private Public Protected
id_pem Integer ✔
bayaran
data[] String ✔
Method param Return
getId() - integer ✔
getWakt - String ✔
u()
getTang - String ✔
gal()
getBula - String ✔
n()
getTahu - String ✔
n()
setValid valid - ✔
asiPem
esanan(
valid)
getValid - integer ✔
Pemesa
nan()
5.5 Tugas V : Pemodelan Data
Tahapan berikutnya adalah membuat pemodelan data untuk kebutuhan implementasi pada
DBMS. Pada class diagram sudah dilakukan analisa atribut yang bisa digunakan sebagai
acuan penyusunan data model.
Lakukan analisis kelas dan sub kelas untuk masing – masing entitas yang terdapat pada
sequence diagram. Identifikasi relasi yang mungkin antar entitas yang telah diidentifikasi
beserta kardinalitas dan modalitas pada relasi tersebut
Berdasarkan kelas yang digambarkan tersebut detailkan tabel berikut ini dan pastikan
bahwa tipe data yang ditentukan sesuai dengan contoh data yang diberikan pada setiap
atribut yang diuraikan.
Nama Kelas Atribut Tipe dan Key (Primary, Constraint Contoh data
Entitas Panjang Data foreinkey)
User ID_User Varchar(50) Primary Key Not Null USR88
Nama Varchar(50) Not Null Shawn
Mendes
Password Varchar(50) Not Null smendes88
No_HP Varchar(50) Not Null, 0813131313
Unique 13
Alamat Varchar(50) Not Null Jalan
Mawar no 8
rt.1/rw.01,
Cilandak,
Jakarta
Selatan
Email Varchar(50) Not Null, shawnmend
Unique es8@gmai.c
om
Tanggal_Lahi Date 8 Agustus
r 1998
Saldo_E-wall Integer Not Null 800.000
et
Jenis_Kelami Char Laki-laki
n
Akun Id_akun Varchar(50) Primary Key Not Null shawnmend
es8
Nama_Lengk Varchar(50) Not Null Shawn
ap Peter Raul
Mendes
No_HP Varchar(50) Not Null, 0813131313
Unique 13
Alamat Varchar(50) Not Null Jalan
Mawar no 8
rt.1/rw.01,
Cilandak,
Jakarta
Selatan
Email Varchar(50) Not Null, shawnmend
Unique es8@gmai.c
om
Administrator ID_admin Varchar(50) Primary Key Not Null ADM12
Password Varchar(50) Not Null 4dm1n
Nama Varchar(50) Not Null Fatih Meru
Jenis_kelami Char Not Null Laki-laki
n
Email Varchar(50) Primary Key Not Null fatihmeru@
gmail.com
CEO ID_CEO Varchar(50) Not Null CEO01
Password Varchar(50) Primary Key Not Null 03C30
Manager ID_manager Varchar(50) Not Null MGR56
Development Password Varchar(50) Not Null M4n493r
Dokter ID_dokter Varchar(50) Primary Key Not Null DOC19
Password Varchar(50) Not Null d0ct3r19
Nama Varchar(50) Not Null Alif Rizal
Tempat_kerja Varchar(50) Not Null RS Siloam
Kuningan
Rating Varchar(50) 4,9
Customer ID_customer Varchar(50) Not Null CUS39
Service _service
Nama Varchar(50) Not Null Firda
Destiara
Email Varchar(50) destiara@g
mail.com
Jenis_kelami Char Perempuan
n
Pemesanan ID_pemesan Varchar(50) Primary Key Not Null RS0120220
an 1
Jenis_pemes Varchar(50) Not Null Rapid Test
anan
Tempat Varchar(50) Not Null RS Siloam
Kuningan
Review Varchar(50) Not Null Sangat
higienis &
bersih,
protokol
kesehatan
sangat ketat
Metode_pem Varchar(50) Not Null E-wallet
bayaran
Jadwal Varchar(50) Not Null Senin, 19
April 2021
pukul 07.00
Rekapan ID_rekapan Varchar(50) Primary Key Not Null RKP302
Data Varchar(255) Not Null Rapid test
:50 orang
Swab test :
35 orang
Tanggal Date Not Null 18/04/2021
E-wallet ID_e-wallet Varchar(50) Primary Key Not Null EWA012
Password Varchar(50) Not Null 3w4113t
Nama_E-Wal Varchar(50) Not Null OVO
let
Email Varchar(50) Not Null shawnmend
es8@gmail.
com
Hasil test ID_pemesan Varchar(50) Primary Key Not Null RS0120220
an 1
Jenis_test Varchar(50) Not Null Rapid Test
Hasil_test Varchar(50) Not Null negatif
Tanggal Date Not Null 17 April
2021
Nama_pasie Varchar(50) Not Null Shawn
n mendes
Nama_dokter Varchar(50) Not Null Alif Rizal
Rencana ID_proposal Varchar(50) Primary Key Not Null PROP0111
pengembang Tanggal Date Not Null 18/04/2021
an aplikasi Data Varchar(255) Not Null Pengemban
gan UI/UX
review
Review Id_Review Varchar(50) Primary Key Not Null REV0095
Review Varchar(255) Not Null Sangat
aman,
bersih, dan
efisien
Kritik_dan_S Id_Kritik_Sar Varchar(50) Primary Key Not Null KRSA0065
aran an
Kritik_Saran Varchar(255) Not Null diharapkan
UI/UX
dikembangk
an lagi,
untuk
pelayanan
test sudah
baik
Rumah sakit ID_Rumah_S Varchar(50) Primary Key Not Null RSS039
akit
Nama Varchar(50) Not Null RS SILOAM
KUNINGAN
Rating Varchar(50) Not Null 4,7
Alamat Varchar(50) Not Null Jalan
Garnisiun
Dalam No
2-3
Layanan Test ID_LayananT Varchar(50 Primary Key Not Null LYN0310
est
Nama_Layan Varchar(50 Not Null Rapid Test
anTest
Metode_Lay Varchar(50 Not Null Drive thru
ananTest
Pseudo-Code PSD-002
ID:
Pseudo-Code Melihat status hasil tes pada informasi pemesanan
title:
Method Name: cekHasilTes()
Created By: Firda Destiara Last Updated By: Firda Destiara
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input ID Pemesanan
Proses BEGIN
cekHasilTes()
if (status= TRUE)
write (“Hasil tes: Telah selesai”)
else
write (“Hasil tes: on progress”)
END
Output Menampilkan status mengenai hasil tes pada ID Pemesanan tersebut
Pseudo-Code PSD-003
ID:
Pseudo-Code Melihat hasil tes
title:
Method Name: getHasilTes()
Created By: Firda Destiara Last Updated By: Firda Destiara
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input ID Pemesanan
Proses BEGIN
getHasilTes()
END
Output Hasil tes
Pseudo-Code PSD-004
ID:
Pseudo-Code Mengirimkan notifikasi hasil tes telah keluar
title:
Method Name: sendNotification()
Created By: Firda Destiara Last Updated By: Firda Destiara
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-005
ID:
Pseudo-Code Memasukan data pesanan
title:
Method Name: inputDataOrder(order)
Created By: Firda Destiara Last Updated By: Firda Destiara
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-006
ID:
Pseudo-Code Melihat detail data pesanan
title:
Method Name: getHasilTes()
Created By: Firda Destiara Last Updated By: Firda Destiara
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input ID Pemesanan
Proses BEGIN
getHasilTes()
END
Output Menampilkan informasi data pesanan yang telah diinputkan
Pseudo-Code PSD-007
ID:
Pseudo-Code Melakukan pembayaran
title:
Method Name: inputPayment(payment)
Created By: Firda Destiara Last Updated By: Firda Destiara
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input Pembayaran
Proses BEGIN
inputPayment(payment)
END
Output Pembayaran akan diterima dan diproses oleh sistem
Pseudo-Code PSD-008
ID:
Pseudo-Code Melakukan validasi pembayaran
title:
Method Name: validatePayment()
Created By: Firda Destiara Last Updated By: Firda Destiara
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input Pembayaran
Proses BEGIN
if (validatePayment = success)
validate()
else
notValidate()
END
Output Pembayaran akan diterima dan diproses oleh sistem
Pseudo-Code PSD-009
ID:
Pseudo-Code Mengirimkan notifikasi pembayaran
title:
Method Name: sendNotification()
Created By: Firda Destiara Last Updated By: Firda Destiara
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input pilihan
Proses BEGIN
selectMenu(Kritik & Saran)
END
Output Form Kritik & Saran
Pseudo-Code PSD-0010
ID:
Pseudo-Code Memilih menu registrasi
title:
Method Name: selectMenui(Registrasi)
Created By: Sarah Uli Octavia Last Updated By: Sarah Uli Octavia
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-0011
ID:
Pseudo-Code Menampilkan form registrasi
title:
Method Name: formRegistrasi()
Created By: Sarah Uli Octavia Last Updated By: Sarah Uli Octavia
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input registrasi
Proses BEGIN
formRegistrasi()
END
Output Form registrasi
Pseudo-Code PSD-0012
ID:
Pseudo-Code Validasi data user
title:
Method Name: dataValidity()
Created By: Sarah Uli Octavia Last Updated By: Sarah Uli Octavia
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-0013
ID:
Pseudo-Code Menampilkan pesan error
title:
Method Name: tampilMessageError()
Created By: Sarah Uli Octavia Last Updated By: Sarah Uli Octavia
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-0014
ID:
Pseudo-Code Memilih menu pemesanan
title:
Method Name: selectMenu(Pemesanan)
Created By: Sarah Uli Octavia Last Updated By: Sarah Uli Octavia
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-0015
ID:
Pseudo-Code Memilih jenis layanan test
title:
Method Name: setJenisTest(Jenis_Test)
Created By: Sarah Uli Octavia Last Updated By: Sarah Uli Octavia
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-0016
ID:
Pseudo-Code Memilih metode layanan test
title:
Method Name: setMetodeTest(Metode_Test)
Created By: Sarah Uli Octavia Last Updated By: Sarah Uli Octavia
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-0017
ID:
Pseudo-Code Memilih tempat layanan test
title:
Method Name: setTempatTest(Tempat_Test)
Created By: Sarah Uli Octavia Last Updated By: Sarah Uli Octavia
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-0018
ID:
Pseudo-Code Memilih checkout
title:
Method Name: setWaktuTest(Waktu_Test)
Created By: Sarah Uli Octavia Last Updated By: Sarah Uli Octavia
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input Waktu tes
Proses BEGIN
setWaktuTest(Waktu_Test);
if (Waktu_Test != NULL)
next();
END
Output Halaman checkout
Pseudo-Code PSD-0019
ID:
Pseudo-Code Memilih dan konfirmasi checkout
title:
Method Name: checkout()
Created By: Sarah Uli Octavia Last Updated By: Sarah Uli Octavia
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input confirm
Proses BEGIN
checkout();
boolean confirmCheckout = false;
print “Anda yakin untuk checkout?”;
If (confirmCheckout = true)
print “Pesanan diproses”;
else
print “Pesanan gagal diproses”;
END
Output Pesanan diproses
Pseudo-Code PSD-001
ID:
Pseudo-Code Memilih menu kritik & saran
title:
Method Name: selectMenu(Kritik & Saran)
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input pilihan
Proses BEGIN
selectMenu(Kritik & Saran)
END
Output Form Kritik & Saran
Pseudo-Code PSD-002
ID:
Pseudo-Code Menampilkan form kritik & saran
title:
Method Name: formKritikSaran()
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-003
ID:
Pseudo-Code Memberikan kritik & saran
title:
Method Name: inputData(dataUser, kritik_saran)
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-004
ID:
Pseudo-Code Menampilkan notifikasi input kritik & saran
title:
Method Name: inputSuccess() & input Unsuccess()
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-006
ID:
Pseudo-Code Mengirim feedback kepada user
title:
Method Name: sendFeedback(Feedback)
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input Feedback
Proses BEGIN
sendFeedback(Feedback)
END
Output Feedback berhasil dikirim
Pseudo-Code PSD-007
ID:
Pseudo-Code Menampilkan notifikasi terkait pengiriman feedback
title:
Method Name: showSuccessNotification()
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-008
ID:
Pseudo-Code Mengambil data kritik & saran user dari database
title:
Method Name: collectData(ID_Admin, Password)
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-009
ID:
Pseudo-Code Membuat dokumen rekap kritik & saran
title:
Method Name: createDocument("Rekap Kritik & Saran", Kritik & Saran)
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-010
ID:
Pseudo-Code Mengirim rekap kritik & saran
title:
Method Name: createDocument("Rekap Kritik & Saran", Kritik & Saran)
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-011
ID:
Pseudo-Code Menampilkan notifikasi terkait pengiriman rekap kritik & saran
title:
Method Name: createDocument("Rekap Kritik & Saran", Kritik & Saran)
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-012
ID:
Pseudo-Code Menerima dokumen rekap yang sudah dikirim
title:
Method Name: receiveDocument(id_CEO, password)
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-013
ID:
Pseudo-Code Membuat dokumen rencana pengembangan aplikasi
title:
Method Name: createDocument(“Rencana Pengembangan Aplikasi”, id_CEO, password)
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-014
ID:
Pseudo-Code Mengirim rencana pengembagan aplikasi
title:
Method Name: createDocument(“Rencana Pengembangan Aplikasi”, id_CEO, password)
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-015
ID:
Pseudo-Code Menampilkan notifikasi terkait pengiriman rencana pengembangan aplikasi
title:
Method Name: showSuccessNotification()
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-016
ID:
Pseudo-Code Melakukan maintenance untuk persiapan update aplikasi
title:
Method Name: prepareUpdate(ID_Manager,Password)
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-017
ID:
Pseudo-Code Membuat data update dari dokumen rencana pengembagan aplikasi
title:
Method Name: createUpdate(rencana pengembagan aplikasi)
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-018
ID:
Pseudo-Code Melakukan update pada sistem aplikasi
title:
Method Name: applyingUpdate(Data patch)
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-019
ID:
Pseudo-Code Menekan tombol menyelesaikan layanan
title:
Method Name: finishLayanan()
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input pilihan
Proses BEGIN
finishLayanan()
END
Output Menyelesaikan layanan
Pseudo-Code PSD-020
ID:
Pseudo-Code Menampilkan form review setelah melakukan layanan
title:
Method Name: sendForm(review)
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-021
ID:
Pseudo-Code Memberikan review dari layanan
title:
Method Name: inputData(dataUser, review)
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-022
ID:
Pseudo-Code Memberikan notifikasi berhasil input review dan memberikan rekomendasi
title: rumah sakit
Method Name: showSuccessNotification() & sendRecommendation()
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input Status data terkirim
Proses BEGIN
IF inputData == True
showSuccessNotification()
sendRecommendation()
ELSE
write “Review gagal dikirim”
END
Output notifikasi dan rekomedasi
Pseudo-Code PSD-023
ID:
Pseudo-Code Mengambil data review user dari database
title:
Method Name: collectData(ID_Admin, Password)
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-024
ID:
Pseudo-Code Membuat rekap review
title:
Method Name: createDocument(“Rekap Review”)
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input Review
Proses BEGIN
createDocument(“Rekap Review”)
END
Output Rekap review
Pseudo-Code PSD-025
ID:
Pseudo-Code Mengirim rekap review
title:
Method Name: sendRekapDocument()
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input Rekap review
Proses BEGIN
IF createDocument == True
sendRekapDocument()
ELSE
write “Dokumen rekap belum dibuat”
END
Output Rekap review berhasil terkirim
Pseudo-Code PSD-026
ID:
Pseudo-Code Menampilkan notifikasi terkait pengiriman rekap review
title:
Method Name: showSuccessNotification()
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-027
ID:
Pseudo-Code Menerima dokumen rekap review dari aplikasi
title:
Method Name: receiveDocument(ID_Rumah_Sakit, password)
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-028
ID:
Pseudo-Code Melakukan evaluasi rekap review dan membuat dokumen untuk
title: meningkatkan layanan rumah sakit
Method Name: evaluateDocument("Rekap Review")
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-029
ID:
Pseudo-Code Melakukan peningkatan terhadap layanan di rumah sakit
title:
Method Name: setServiceImporvement("Dokumen peningkatan layanan")
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-030
ID:
Pseudo-Code Menampilkan notifikasi terkait hasil peningkatan layanan di rumah sakit
title:
Method Name: showSuccessNotification()
Created By: Alif Rizal Last Updated By: Alif Rizal
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Pseudo-Code PSD-001
ID:
Pseudo-Code memasukkan data berupa tempat test
title:
Method Name: inputData()
Created By: Diva Ratna Last Updated By: Diva Ratna
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input PSD-001
Proses BEGIN
IF saveData.contains(dataUser)
data = dataUser
ELSE
write “Harap input data terlebih dahulu”
END
Output form pengisian detail tempat
Pseudo-Code PSD-002
ID:
Pseudo-Code menyimpan data history pencarian pengguna
title:
Method Name: saveData()
Created By: Diva Ratna Last Updated By: Diva Ratna
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input PSD-002
Proses BEGIN
IF saveData.contains(dataUser)
data == saved
ELSE
write “Harap input data terlebih dahulu”
END
Output data history pengguna
Pseudo-Code PSD-003
ID:
Pseudo-Code memasukkan informasi tempat terkait
title:
Method Name: setInformation()
Created By: Diva Ratna Last Updated By: Diva Ratna
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input PSD-003
Proses BEGIN
IF setInformation.contains(information)
setInformation = Information
ELSE
write “Masukkan informasi: ”
END
Output list tempat yang tersimpan
Pseudo-Code PSD-004
ID:
Pseudo-Code mendapatkan informasi terkait tempat yang dicari
title:
Method Name: getInformation()
Created By: Diva Ratna Last Updated By: Diva Ratna
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input PSD-004
Proses BEGIN
IF getInformation != null
print (informasi)
ELSE
write “Masukkan informasi ulang”
END
Output informasi lainnya terkait tempat test
Pseudo-Code PSD-005
ID:
Pseudo-Code memeriksa keberadaan tempat yang dicari
title:
Method Name: check_Places()
Created By: Diva Ratna Last Updated By: Diva Ratna
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input PSD-005
Proses BEGIN
IF check_places.contains(available_places==true)
checkplacess == success
ELSE
write “Harap masukkan informasi lainnya ”
END
Output halaman pencarian & penyimpanan tempat
Pseudo-Code PSD-006
ID:
Pseudo-Code pencarian tempat
title:
Method Name: searchPlaces()
Created By: Diva Ratna Last Updated By: Diva Ratna
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input PSD-006
Proses BEGIN
IF searchplaces==true
print (iplaces)
ELSE
print(rekomendasi)
END
Output informasi keberadaan tempat yang dicari
Pseudo-Code PSD-007
ID:
Pseudo-Code memasukkan data berupa data diri, alergi, informasi e-wallet, dan tanggal test
title: terakhir kali
Method Name: inputData()
Created By: Diva Ratna Last Updated By: Diva Ratna
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input PSD-007
Proses BEGIN
IF saveData.contains(dataUser)
data = dataUser
ELSE
write “Harap input data terlebih dahulu”
END
Output form data diri tebaru, infromasi e-wallet, dan tanggal terakhir test
Pseudo-Code PSD-008
ID:
Pseudo-Code menyimpan data diri terbaru
title:
Method Name: saveData()
Created By: Diva Ratna Last Updated By: Diva Ratna
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input PSD-008
Proses BEGIN
IF saveData.contains(dataUser)
data == saved
ELSE
write “Harap input data terlebih dahulu”
END
Output halaman konfirmasi ulang profile
Pseudo-Code PSD-009
ID:
Pseudo-Code memasukkan informasi terkait data diri terbaru
title:
Method Name: setInformation()
Created By: Diva Ratna Last Updated By: Diva Ratna
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input PSD-009
Proses BEGIN
IF setInformation.contains(information)
setInformation = Information
ELSE
write “Masukkan informasi: ”
END
Output halaman admin
Pseudo-Code PSD-010
ID:
Pseudo-Code mendapatkan informasi yang cocok sesuai dengan data terbaru
title:
Method Name: getInformation()
Created By: Diva Ratna Last Updated By: Diva Ratna
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Input PSD-0010
Proses BEGIN
IF getInformation != null
print (informasi)
ELSE
write “Masukkan infotmasi ulang”
END
Output notifikasi bahwa profile berhasil di update
UI-ID: UI-001
UI-title: Halaman informasi Pesanan
UI Function : Output
Created By: Firda Destiara Last Updated By: Firda Destiara
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
UI-ID: UI-002
UI-title: Halaman hasil tes
UI Function : Output
Created By: Firda Destiara Last Updated By: Firda Destiara
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
UI-ID: UI-004
UI-ID: UI-005
UI-title: Halaman pemesanan
UI Function : Input
Created By: Firda Destiara Last Updated By: Firda Destiara
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
UI-ID: UI-006
UI-title: Halaman Awal
UI Function : Input
Created By: Sarah Uli Octavia Last Updated By: Sarah Uli Octavia
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
UI-ID: UI-009
UI-title: Halaman Pemesanan
UI Function : Input
Created By: Sarah Uli Octavia Last Updated By: Sarah Uli Octavia
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
UI-ID: UI-0010
UI-title: Halaman Pemesanan
UI Function : Input
Created By: Sarah Uli Octavia Last Updated By: Sarah Uli Octavia
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
UI-ID: UI-0011
UI-title: Halaman Pemesanan
UI Function : Input
Created By: Sarah Uli Octavia Last Updated By: Sarah Uli Octavia
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Form Element Fungsi Element
Digunakan untuk
kembali ke halaman
sebelumnya
Pemesanan Title - text Digunakan untuk
menampilkan judul
layout
Waktu Test - text Digunakan untuk
menampilkan
pertanyaan terkait
pemesanan
box date - dropdown Digunakan untuk
memilih tanggal, bulan,
dan tahun melakukan
test
Text area - text area Digunakan untuk
menampilkan informasi
waktu dan kuota test
yang tersisa
Next - button Digunakan untuk
mengarahkan ke
halaman selanjutnya
UI-ID: UI-0012
UI-title: Halaman checkout
UI Function : Output
Created By: Sarah Uli Octavia Last Updated By: Sarah Uli Octavia
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
UI-ID: UI-0013
UI-title: Menu Utama
UI Function : Navigasi Utama
Created By: Alif Rizal Maulana Last Updated By: Alif Rizal Maulana
Date Created: 18 April 2021 Date Last Updated: 23 April 2021
UI-ID: UI-0016
UI-title: Halaman Stakeholder
UI Function : Output
Created By: Alif Rizal Maulana Last Updated By: Alif Rizal Maulana
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
UI-ID: UI-019
UI-title: Halaman Layanan
UI Function : Output
Created By: Alif Rizal Maulana Last Updated By: Alif Rizal Maulana
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
UI-ID: UI-020
UI-title: Halaman Rumah Sakit
UI Function : Input
Created By: Alif Rizal Maulana Last Updated By: Alif Rizal Maulana
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
UI-ID: UI-023
UI-title: Halaman pencarian
UI Function : Output
Created By: Diva Ratna Last Updated By: Diva Ratna
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
UI-ID: UI-024
UI-title: Halaman tempa test
UI Function : Output
Created By: Diva Ratna Last Updated By: Diva Ratna
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
UI-ID: UI-025
UI-title: Halaman form data
UI Function : Output
Created By: Diva Ratna Last Updated By: Diva Ratna
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
UI-ID: UI-026
UI-title: Halaman admin
UI Function : Output
Created By: Diva Ratna Last Updated By: Diva Ratna
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
UI-ID: UI-027
UI-title: Halaman profile
UI Function : Output
Created By: Diva Ratna Last Updated By: Diva Ratna
Date Created: 18 April 2021 Date Last Updated: 18 April 2021
Form Element Fungsi Element
name, username, mengisikan informasi
email, password - sesuai dengan kalimat
TEXT di sebelah kirinya
kalender - kalender gambar tersebut dan
tulisannya dapat di klik
untuk menyambungkan
pada kalender
sesungguhnya dan
tinggal di klik tanggal
terakhir testnya
input data - button digunakan untuk
menyambungkan pada
halaman yang
berisikan data e-wallet
yang dimiliki
submit - button menyimpan data yang
telah diisi versi terbaru
Edit Profile - Text Untuk Memberikan
keterangan halaman
saat ini
Back - button Digunakan untuk
kembali pada halaman
sebelumnya atau
halaman utama
Analisis dan Desain Sistem Informasi
Modul Evaluasi
Penyusun
Kelompok 5
FatihSamudra-195150400111006-FMS
DivaArdellia-195150400111014-DRA
FirdaDestiara-195150400111020 -FIR
SarahOctavia-195150400111026-SUO
AlifMaulana-195150400111027-ARM
Asisten
Daftar Isi 2
Dasar Teori 3
Implementasi Kode 3
Kualitas Implementasi Perangkat Lunak 3
Dokumentasi Penjaminan Kualitas 4
Traceability Matrix 4
Evaluasi Dokumen 6
Tugas I: Data Definition Language 6
Tugas II: Program Implementation Code 7
Tugas III: UI Implementation Code 8
Tugas IV: Traceability Matrix SRS-SDD 9
Dasar Teori
Implementasi Kode
Fase implementasi perangkat lunak merupakan fase dimana rancangan perangkat lunak yang
telah disusun sebelumnya pada tahap perancangan dikodekan kedalam bentuk kode program
dengan menggunakan Bahasa pemrograman tertentu agar dapat dijalankan.
Pondasi pada fase ini adalah pemrograman, sedangkan tools yang digunakan untuk pembuatan
program disebut dengan bahasa pemrograman. Programmer membuat program dengan
menggunakan acuan Software Design Document (SDD), namun pada umumnya programmer
juga memeriksa dari dokumen sebelumnya yaitu Software Requirement Specification (SRS)
untuk memeriksa konsistensi dari dokumentasi-dokumentasi yang ada.
Implementasi hasil dari perancangan ke dalam coding sesuai dengan sintaks dari bahasa
pemrograman yang digunakan. Sedangkan metode pemrograman nya disesuaikan dengan
metoda rancangannya.
Traceability Matrix
Traceability Matrix adalah dokumen yang menghubungkan 2 (dua) dokumen yaitu dokumen
Software Requirement Specification (SRS) dan Software Design Document (SDD). Traceability
matrix digunakan untuk melacak persyaratan dan untuk memeriksa persyaratan project telah
terpenuhi pada dokumen tersebut.
Keuntungan-keuntungan dengan menerapkan traceability matrix pada pengembangan sebuag
sistem adalah :
1. Change impact analysis
Jika terdapat perubahan pada kebutuhan, pengembang dapat dengan mudah melihat
keterkaitan antara suatu kebutuhan dengan kebutuhan lainnya. Sehingga waktu dan
biaya dapat ditentukan terkait dampak terhadap perubahan kebutuhan.
2. Coverage Analysis
Dengan traceability yang baik memastikan bahwa tidak ada kebutuhan yang terabaikan
olah pengembang.
3. Project Status Analysis
Pengembang dapat dengan mudah memantau pelacakan status proyek.
Evaluasi Dokumen
Setiap anggota melakukan validasi kesesuaian antara PDM dengan DDL yang
diimplementasikan berdasarkan format tabel berikut ini.
No. Traceability PDM dan DDL
Inisial Validasi
PDM DDL(tuliskan query DDL) (√)
(tuliskan nama
tabel dan entitas)
1. Dokter FIR √
CREATE TABLE DOKTER(
RATING VARCHAR(50));
3. E-Wallet FIR √
CREATE TABLE E_WALLET(
[FIR - SC01]
Melihat Detail Pesanan
1 <?php
2
3 require "db_config.php";
4
5 class User
6 {
7 protected $db;
8 protected $id_user;
9 protected $nama;
10 protected $alamat;
11 protected $email;
12 protected $no_HP;
13 protected $saldo_e_wallet;
14 protected $tanggal_lahir;
15 protected $jenis_kelamin;
16
17 public function
18 __construct($id_user,$nama,$alamat,$email,$no_HP,$saldo_e_wallet,
19 $tanggal_lahir, $jenis_kelamin) {
20 $this->id_user = $id_user;
21 $this->nama = $nama;
22 $this->alamat = $alamat;
23 $this->email = $email;
24 $this->$no_HP = $no_HP;
25 $this->saldo_e_wallet = $saldo_e_wallet;
26 $this->tanggal_lahir = $tanggal_lahir;
27 $this->jenis_kelamin = $jenis_kelamin;
28
29 $this->db = new
30 mysqli(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_NAME);
31 if (mysqli_connect_errno()) {
32 echo "Maaf, gagal koneksi ke database";
33 exit;
34 }
35 }
36 public function setNama($nama)
37 {
38 $this->nama = $nama;
39 }
40 public function getNama()
41 {
42 echo $this->nama;
43 }
44 public function setAlamat($alamat)
45 {
46 $this->alamat = $alamat;
47 }
48 public function getAlamat()
49 {
50 echo $this->alamat;
51 }
52 public function setEmail($email)
53 {
54 $this->email = $email;
55 }
56 public function getEmail()
57 {
58 echo $this->email;
59 }
60 public function setNoHp($no_HP)
61 {
62 $this->no_HP = $no_HP;
63 }
64 public function getNoHp()
65 {
66 echo $this->no_HP;
67 }
68 public function setTanggalLahir($tanggal_lahir)
69 {
70 $this->tanggal_lahir = $tanggal_lahir;
71 }
72 public function getTanggalLahir()
73 {
74 echo $this->tanggal_lahir;
75 }
76 public function setSaldoEWallet($saldo_e_wallet)
77 {
78 $this->saldo_e_wallet = $saldo_e_wallet;
79 }
80 public function getSaldoEWallet()
81 {
82 echo $this->saldo_e_wallet;
83 }
84 public function setJenisKelamin($jenis_kelamin)
85 {
86 $this->jenis_kelamin = $jenis_kelamin;
87 }
88 public function getJenisKelamin()
89 {
91 echo $this->jenis_kelamin;
92 }
93 }
94
95 class controller
96 {
97
98 public $id_kritik_saran;
99 public $kritik_saran;
100
101 public function getIdUser(){
102 $mysqli = new
103 mysqli(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_NAME);
104 $data['id_User'] = $mysqli->query("select id_User from
105 pengguna");
106 return $data;
107 }
108
109 public function getIdAkun(){
110 $mysqli = new
111 mysqli(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_NAME);
112 $data['id_Akun'] = $mysqli->query("select id_Akun form Akun");
113 return $data;
114 }
115
116 public function getDataOrder(){
117 $mysqli = new
118 mysqli(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_NAME);
119 $hasil=mysql_query("SELECT * FROM pesanan") or die
120 (mysql_error);
121 $row=mysql_fetch_array($hasil);
122 return $row;
123 }
124
125 public function sendDataOrder($row){
126 while($row = $run->fetch_array());
127 include 'db.php';
}
[SUO - SC02]
Memilih dan konfirmasi checkout
1
2 <?php
3
4 require "db_config.php";
5
6 class User
7 {
8 protected $db;
9 protected $id_user;
10 protected $nama;
11 protected $alamat;
12 protected $email;
13 protected $no_HP;
14 protected $saldo_e_wallet;
15 protected $tanggal_lahir;
16 protected $jenis_kelamin;
17
18 public function
19 __construct($id_user,$nama,$alamat,$email,$no_HP,$saldo_e_wallet,
20 $tanggal_lahir, $jenis_kelamin) {
21 $this->id_user = $id_user;
22 $this->nama = $nama;
23 $this->alamat = $alamat;
24 $this->email = $email;
25 $this->$no_HP = $no_HP;
26 $this->saldo_e_wallet = $saldo_e_wallet;
27 $this->tanggal_lahir = $tanggal_lahir;
28 $this->jenis_kelamin = $jenis_kelamin;
29
30 $this->db = new
31 mysqli(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_NAME);
32 if (mysqli_connect_errno()) {
33 echo "Maaf, gagal koneksi ke database";
34 exit;
35 }
36 }
37 public function setNama($nama)
38 {
39 $this->nama = $nama;
40 }
41 public function getNama()
42 {
43 echo $this->nama;
44 }
45 public function setAlamat($alamat)
46 {
47 $this->alamat = $alamat;
48 }
49 public function getAlamat()
50 {
51 echo $this->alamat;
52 }
53 public function setEmail($email)
54 {
55 $this->email = $email;
56 }
57 public function getEmail()
58 {
59 echo $this->email;
60 }
61 public function setNoHp($no_HP)
62 {
63 $this->no_HP = $no_HP;
64 }
65 public function getNoHp()
66 {
67 echo $this->no_HP;
68 }
69 public function setTanggalLahir($tanggal_lahir)
70 {
71 $this->tanggal_lahir = $tanggal_lahir;
72 }
73 public function getTanggalLahir()
74 {
75 echo $this->tanggal_lahir;
76 }
77 public function setSaldoEWallet($saldo_e_wallet)
78 {
79 $this->saldo_e_wallet = $saldo_e_wallet;
80 }
81 public function getSaldoEWallet()
82 {
83 echo $this->saldo_e_wallet;
84 }
85 public function setJenisKelamin($jenis_kelamin)
86 {
87 $this->jenis_kelamin = $jenis_kelamin;
88 }
89 public function getJenisKelamin()
91 {
92 echo $this->jenis_kelamin;
93 }
94
95 public function isiDetailPemesan($nama, $alamat, $email, $no_hp){
96 $sql="SELECT * FROM Akun WHERE nama='$nama'OR
97 email='$email'";
98 $check = $this->db->query($sql) ;
99 $count_row = $check->num_rows;
100 if ($count_row == 0){
101 $sql1="INSERT INTO account SET nama='$nama',
102 alamat='$alamat', email='$email', no_hp='$no_hp'";
103 result $sql1;
104 }
105 }
106
107
108
109 }
110
111
112 class controllerCheckout
113 {
114
115 public $id_pemesanan;
116 public $dataOrder;
117
118 public function getIdUser(){
119 $mysqli = new
120 mysqli(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_NAME);
121 $data['id_User'] = $mysqli->query("select id_User from pengguna");
122 return $data;
123 }
124
125 public function getIdAkun(){
126 $mysqli = new
127 mysqli(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_NAME);
128 $data['id_Akun'] = $mysqli->query("select id_Akun form Akun");
129 return $data;
130 }
131
132
133 public function checkout()
134 {
135 if(isset($_POST['submit'])){
136 $sql = "insert into dataOrder (id_pemesanan,dataOrder) values
137 (:id_pemesanan,:dataOrder)";
138 echo "Apakah Anda yakin untuk memesan layanan ini?";
139 if (isset($_POST['Ya'])){
140 $query = $this->db->query($sql);
141 if($query){
142 echo "Pemesanan diproses";
143 }
144 else{
145 echo "Maaf, Pemesanan Anda gagal diproses";
146 }
147 }
148 }
149 }
150 }
151
152
153
154
[ARM - SC03]
Controller (Kritik & Saran)
1 <?php
2
3 require "db_config.php";
4
5 class User
6 {
7 protected $db;
8 protected $id_user;
9 protected $nama;
10 protected $alamat;
11 protected $email;
12 protected $no_HP;
13 protected $saldo_e_wallet;
14 protected $tanggal_lahir;
15 protected $jenis_kelamin;
16
17 public function
18 __construct($id_user,$nama,$alamat,$email,$no_HP,$saldo_e_wallet,
19 $tanggal_lahir, $jenis_kelamin) {
20 $this->id_user = $id_user;
21 $this->nama = $nama;
22 $this->alamat = $alamat;
23 $this->email = $email;
24 $this->$no_HP = $no_HP;
25 $this->saldo_e_wallet = $saldo_e_wallet;
26 $this->tanggal_lahir = $tanggal_lahir;
27 $this->jenis_kelamin = $jenis_kelamin;
28
29 $this->db = new
30 mysqli(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_NAME);
31 if (mysqli_connect_errno()) {
32 echo "Maaf, gagal koneksi ke database";
33 exit;
34 }
35 }
36 public function setNama($nama)
37 {
38 $this->nama = $nama;
39 }
40 public function getNama()
41 {
42 echo $this->nama;
43 }
44 public function setAlamat($alamat)
45 {
46 $this->alamat = $alamat;
47 }
48 public function getAlamat()
49 {
50 echo $this->alamat;
51 }
52 public function setEmail($email)
53 {
54 $this->email = $email;
55 }
56 public function getEmail()
57 {
58 echo $this->email;
59 }
60 public function setNoHp($no_HP)
61 {
62 $this->no_HP = $no_HP;
63 }
64 public function getNoHp()
65 {
66 echo $this->no_HP;
67 }
68 public function setTanggalLahir($tanggal_lahir)
69 {
70 $this->tanggal_lahir = $tanggal_lahir;
71 }
72 public function getTanggalLahir()
73 {
74 echo $this->tanggal_lahir;
75 }
76 public function setSaldoEWallet($saldo_e_wallet)
77 {
78 $this->saldo_e_wallet = $saldo_e_wallet;
79 }
80 public function getSaldoEWallet()
81 {
82 echo $this->saldo_e_wallet;
83 }
84 public function setJenisKelamin($jenis_kelamin)
85 {
86 $this->jenis_kelamin = $jenis_kelamin;
87 }
88 public function getJenisKelamin()
89 {
91 echo $this->jenis_kelamin;
92 }
93 }
94
95
96 class controller
97 {
98
99 public $id_kritik_saran;
100 public $kritik_saran;
101
102 public function getId(){
103 $mysqli = new
104 mysqli(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_NAME);
105 $data = $mysqli->query("select id_User, id_Akun from pengguna");
106 return $data;
107
108 }
109
110
111 public function sendData()
112 {
113 if(isset($_POST['submit'])){
114 $param = array('id_kritik_saran'=>$_POST['id_kritik_saran'],
115 'kritik_saran'=>$_POST['kritik_saran']);
116 $sql = "insert into kritik_saran (id_kritik_saran,kritik_saran)
117 values (:id_kritik_saran,:kritik_saran)";
118 $query = $this->db->query($sql,$param);
119 if($query){
120 echo "Kritik & Saran Anda telah Terkirim";
121 }
122 else{
123 echo "Maaf, Kritik & Saran Anda gagal terkirim";
124 }
125
126 }
127 }
128 }
129
130
131
[DIV- SC04]
Mencari Tempat Test
1 <?php
2
3 require "db_config.php";
4
5 class User
6 {
7 protected $db;
8 protected $id_user;
9 protected $nama;
10 protected $alamat;
11 protected $email;
12 protected $no_HP;
13 protected $tanggal_lahir;
14 protected $jenis_kelamin;
15
16 public function __construct($id_user,$nama,$alamat,$email,$no_HP,
17 $tanggal_lahir, $jenis_kelamin) {
18 $this->id_user = $id_user;
19 $this->nama = $nama;
20 $this->alamat = $alamat;
$this->email = $email;
$this->$no_HP = $no_HP;
$this->tanggal_lahir = $tanggal_lahir;
$this->jenis_kelamin = $jenis_kelamin;
$this->db = new
mysqli(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_NAME);
if (mysqli_connect_errno()) {
echo "Maaf, gagal koneksi ke database";
exit;
}
}
public function setNama($nama)
{
$this->nama = $nama;
}
public function getNama()
{
echo $this->nama;
}
public function setAlamat($alamat)
{
$this->alamat = $alamat;
}
public function getAlamat()
{
echo $this->alamat;
}
public function setEmail($email)
{
$this->email = $email;
}
public function getEmail()
{
echo $this->email;
}
public function setNoHp($no_HP)
{
$this->no_HP = $no_HP;
}
public function getNoHp()
{
echo $this->no_HP;
}
public function setTanggalLahir($tanggal_lahir)
{
$this->tanggal_lahir = $tanggal_lahir;
}
public function getTanggalLahir()
{
echo $this->tanggal_lahir;
}
public function setJenisKelamin($jenis_kelamin)
{
$this->jenis_kelamin = $jenis_kelamin;
}
public function getJenisKelamin()
{
echo $this->jenis_kelamin;
}
}
class controller
{
public $dataUser;
public $available_places;
public function saveData(){
$mysqli = new
mysqli(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_NAME);
$data['dataUser'] = $mysqli->query("select id_User, Nama, No_HP,
Alamat, Email, Tanggal_Lahir, Jenis Kelamin from user");
return $data;
}
echo available_places;
}
else{
echo check_places;
}
}
}
}
[FMS- SC05]
Setiap anggota melakukan validasi kesesuaian antara kode sumber dengan class diagram/
arsitektur modul yang diimplementasikan berdasarkan format tabel berikut ini.
[ Inisial penulis ]
[ Implementasi Kode Antarmuka ]
[FIR-IM-001]
Halaman Informasi Pesanan
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Informasi Pesanan</title>
8 <style>
9 .nav {
10 font-size: 30px;
11 margin-top: 30px;
12 margin-bottom: 30px;
13 margin-left: 30px;
14 }
15
16 .nav img{
17 float: left;
18 height: 30px;
19 margin-right: 15px;
20 }
21
22 .center {
23 margin-left: auto;
24 margin-right: auto;
25 width: 50%;
26 }
27
28 </style>
29 </head>
30 <body>
31 <nav class="navbar fixed-top navbar-light bg-light">
32 <div class="container-fluid">
33 <div class="nav">
34 <a class="navbar-brand">
35 <img
37 src="https://pbs.twimg.com/media/E0MabU8UYAEftor?format=png&name=sma
38 ll" class="d-inline-block align-text-top">
39 Informasi Pesanan
40 </a>
41 </div>
42 </div>
43 </nav>
44 <br>
45 <table class="center" border="1" cellspacing="0" cellpadding="10">
46 <tr>
47 <td>ID Pesanan: AB-23145xx</td>
48 </tr>
49 <tr>
50 <td>
51 <p>Tempat tes: RSUD xxxxxx</p>
52 <p>Tanggal: xx-xx-xxxx</p>
53 <p>Waktu: xx:xx WIB</p>
54 <br>
55 <p>Status pembayaran: Success</p>
56 <p>Hasil Tes: On progress</p>
57 </td>
58 </tr>
59 </table>
60 <br>
61 <table class="center" border="1" cellspacing="0" cellpadding="10">
62 <tr>
63 <td>ID Pesanan: AC-23145xx</td>
64 </tr>
65 <tr>
66 <td>
67 <p>Tempat tes: RSUD xxxxxx</p>
68 <p>Tanggal: xx-xx-xxxx</p>
69 <p>Waktu: xx:xx WIB</p>
70 <br>
71 <p>Status pembayaran: Success</p>
72 <p>Hasil Tes: Done</p>
73 </td>
74 </tr>
75 </table>
76 </body>
77 </html>
[FIR-IM-002]
Halaman Hasil Tes
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Hasil Tes</title>
8 <style>
9
10 .nav {
11 font-size: 30px;
12 margin-top: 30px;
13 margin-bottom: 30px;
14 margin-left: 30px;
15 }
16
17 .nav img{
18 float: left;
19 height: 30px;
20 margin-right: 15px;
21 }
22
23 .download img{
24 float: right;
25 height: 30px;
26 margin-right: 30px;
27 margin-top: 30px;
28 }
29
30 .center {
31 margin-left: auto;
32 margin-right: auto;
33 width: 60%;
34 }
35
37 </style>
38 </head>
39 <body>
40 <nav class="navbar fixed-top navbar-light bg-light">
41 <div class="container-fluid">
42 <div class="nav">
43 <a class="navbar-brand">
44 <img
45 src="https://pbs.twimg.com/media/E0MabU8UYAEftor?format=png&name=sma
46 ll" class="d-inline-block align-text-top">
47 Hasil Tes
48 </a>
49 </div>
50 </div>
51 </nav>
52 <br>
53 <table class="center" border="1" cellspacing="0" cellpadding="20" >
54 <tr>
55 <td>ID Pesanan: AB-23145xx</td>
56 </tr>
57 </table>
58 <br>
59 <table class="center" border="1" cellspacing="0" cellpadding="10">
60 <tr>
61 <td>
62 <p>Berikut adalah lampiran mengenai hasil tes oleh saudara:</p>
63 <p>Nama: Budi xxx</p>
64 <p>Usia: 24 thn</p>
65 <p>Jenis kelamin: Laki-laki</p>
66 <br>
67 <p>Yang dilaksanakan pada:</p>
68 <p>Hari: Selasa</p>
69 <p>Tanggal: 26-04-2021</p>
70 <p>Tempat: RSUD xxxx</p>
71 <br>
72 <p>Menyatakan bahwa saudara negatif virus COVID-19</p>
73 </td>
74 </tr>
75 </table>
76
77 <br>
78 <div class="col-sm-6 text-right">
79 <div class="row">
80 <a href="#" class="download">
81 <img
82 src="https://pbs.twimg.com/media/E0R_XLAUUAIcb_A?format=png&name=90
83 0x900" alt="">
84 </a>
85 </div>
86 </div>
87 </body>
88 </html>
[FIR-IM-003]
Halaman Utama Dokter
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Home</title>
8 <style>
9 p{
10 font-size: 30px;
11 font-style: normal;
12 color: black;
13 text-decoration: none;
14 margin-left: 30px;
15 margin-bottom: 20px;
16 }
17
18 .header{
19 margin-bottom: 20px;
20 margin-left: 30px;
21 margin-right: 30px;
22 }
23
24 .user{
25 float: left;
26 }
27
28 .logo{
29 margin-left: auto;
30 margin-right: auto;
31 text-align: center;
32 margin-top: 10px;
33 }
34
35 .bell{
36 float: right;
37 margin-top: -60px;
38 }
39
40 .card img{
41 height: 120px;
42 margin-left: auto;
43 margin-right: auto;
44 }
45
46 .card-text p{
47 font-size: 20px;
48 }
49
50 .menu-grup{
51 margin-left: auto;
52 margin-right: auto;
53 }
54 </style>
55 </head>
56 <body>
57 <nav class="header">
58 <nav class="navbar navbar-light bg-light">
59 <div class="container-fluid">
60 <a class="user" href="#">
61 <img
62 src="https://pbs.twimg.com/media/E0XHs_qVoAE6g-i?format=png&name=me
63 dium" alt="" width="30" class="d-inline-block align-text-top">
64 </a>
65 <a class="logo" >
66 <p>Go-Fit</p>
67 </a>
68 <a class="bell" href="#">
69 <img
70 src="https://pbs.twimg.com/media/E0XH3ZOVkAAs9kP?format=png&name=9
71 00x900" alt="" width="30" class="d-inline-block align-text-top">
72 </a>
73 </div>
74 </nav>
75 </nav>
76 <p>Selamat Datang, User</p>
77 <div class="menu" >
78 <table class="menu-grup" border="1" cellspacing="0" cellpadding="10">
79 <tr>
80 <td>
81 <div class="card" style="width: 18rem;">
82 <img
83 src="https://pbs.twimg.com/media/E0XVbV-VcAASTjK?format=png&name=sm
84 all" class="card-img-top" >
85 <div class="card-body">
86 <p class="card-text">Jadwal Kerja</p>
87 </div>
88 </div>
89 </td>
91 <td>
92 <div class="card" style="width: 18rem;">
93
94
95 <img
96 src="https://pbs.twimg.com/media/E0XVbV-UUAMhuVL?format=png&name=3
97 60x360" class="card-img-top" >
98 <div class="card-body">
99 <p class="card-text">Upload Hasil Tes</p>
100 </div>
101 </div>
102 </td>
103 </tr>
104 <tr>
105 <td>
106 <div class="card" style="width: 18rem;">
107 <img
108 src="https://pbs.twimg.com/media/E0XVbV_UUAAh5eJ?format=png&name=s
109 mall" class="card-img-top" >
110 <div class="card-body">
111 <p class="card-text">Review</p>
112 </div>
113 </div>
114 </td>
115 <td>
116 <div class="card" style="width: 18rem;">
117 <img
118 src="https://pbs.twimg.com/media/E0XVbV_VIAI9PPC?format=png&name=90
119 0x900" class="card-img-top" >
120 <div class="card-body">
121 <p class="card-text">Customer Service</p>
122 </div>
123 </div>
124 </td>
125 </tr>
126 </table>
127
128 </div>
129 </div>
130 </body>
131 </html>
[FIR-IM-004]
Halaman Upload Hasil Tes
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Upload Hasil Tes</title>
8 <style>
9 p{
10 font-size: 20px;
11 margin-left: 80px;
12 margin-bottom: 20px;
13 }
14
15 .nav {
16 font-size: 30px;
17 margin-top: 30px;
18 margin-bottom: 30px;
19 margin-left: 30px;
20 }
21
22 .nav img{
23 float: left;
24 height: 30px;
25 margin-right: 15px;
26 }
27
28 .center {
29 margin-left: auto;
30 margin-right: auto;
31 margin-top: 10px;
32 margin-bottom: 10px;
33 width: 50%;
34 }
35
37 .upload{
38 float: right;
39 }
40
41 .btn{
42 margin-right: 30px;
43 margin-top: 20px;
44 }
45
46 </style>
47 </head>
48 <body>
49 <nav class="navbar fixed-top navbar-light bg-light">
50 <div class="container-fluid">
51 <div class="nav">
52 <a class="navbar-brand">
53 <img
54 src="https://pbs.twimg.com/media/E0MabU8UYAEftor?format=png&name=sma
55 ll" class="d-inline-block align-text-top">
56 Upload Hasil Tes
57 </a>
58 </div>
59 </div>
60 </nav>
61 <p>Upload Hasil Tes</p>
62 <table class="center" border="1" cellspacing="0" cellpadding="10">
63 <tr>
64 <td>ID Pesanan: AB-23145xx</td>
65 </tr>
66 <tr>
67 <td>
68 <p>Tempat tes: RSUD xxxxxx</p>
69 <p>Tanggal: xx-xx-xxxx</p>
70 <p>Waktu: xx:xx WIB</p>
71 <br>
72 <p>Status pembayaran: Success</p>
73 <p>Hasil Tes: On progress</p>
74 </td>
75 </tr>
76 </table>
77 <table class="center" border="1" cellspacing="0" cellpadding="10">
78 <tr>
79 <td>Tambah Hasil Tes</td>
80 </tr>
81 <tr>
82 <td>
83 <form action="">
84 <input type="file" id="myFile" name="filename">
85 </form>
86 </td>
87 </tr>
88 </table>
89 <div class="upload">
90 <button class="btn">Upload</button>
91 </div>
92 </body>
93 </html>
[FIR-IM-005]
Halaman Pemesanan
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Pemesanan</title>
8 <style>
9 p{
10 font-size: 30px;
11 text-align: center;
12 }
13
14 .nav {
15 font-size: 30px;
16 margin-top: 30px;
17 margin-bottom: 30px;
18 margin-left: 30px;
19 }
20
21 .nav img{
22 float: left;
23 height: 30px;
24 margin-right: 15px;
25 }
26
27 .center {
28 margin-left: auto;
29 margin-right: auto;
30 margin-top: 10px;
31 margin-bottom: 10px;
32 width: 50%;
33 font-size: 20px;
34 }
35
37 .selesai{
38 float: right;
39 margin-right: 30px;
40 margin-top: 30px;
41 }
42
43 </style>
44 </head>
45 <body>
46 <nav class="navbar fixed-top navbar-light bg-light">
47 <div class="container-fluid">
48 <div class="nav">
49 <a class="navbar-brand">
50 <img
51 src="https://pbs.twimg.com/media/E0MabU8UYAEftor?format=png&name=sma
52 ll" class="d-inline-block align-text-top">
53 Pemesanan
54 </a>
55 </div>
56 </div>
57 </nav>
58 <p>Form Pemesanan</p>
59 <table class="center" cellspacing="0" cellpadding="10">
60 <tr>
61 <td><label for="JenisTes"><b>Jenis Tes</b></label></td>
62 <td><input type="Text" placeholder="Enter Jenis Tes" name="JenisTes"
63 required></td>
64 </tr>
65 <tr>
66 <td><label for="Tanggal"><b>Tanggal</b></label></td>
67 <td><input type="Text" placeholder="Tanggal Tes" name="Tanggal"
68 required></td>
69 </tr>
70 <tr>
71 <td><label for="Tempat"><b>Tempat</b></label></td>
72 <td><input type="Text" placeholder="Tempat" name="Tempat"
73 required></td>
74 </tr>
75 </table>
76 <div class="selesai">
77 <button class="btn">Selesai</button>
78 </div>
79 </body>
80 </html>
[SUO-IM-006]
Halaman Awal
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>Mockup</title>
8 <link rel="stylesheet"
9 href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.cs
10 s"
11
12 integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8
13 xmyTe9GYg1l9a69psu" crossorigin="anonymous">
14 <style>
15 body {
16 height: 100%;
17 font-family: Verdana, Tahoma, sans-serif;
18 display: flex;
19 align-items: center;
20 padding-top: 40px;
21 padding-bottom: 40px;
22 background-color: #f5f5f5;
23 }
24 .form-signin {
25 width: 100%;
26 max-width: 330px;
27 padding: 15px;
28 margin: auto;
29 }
30
31 .form-signin .form-floating:focus-within {
32 z-index: 2;
33 }
34
35 .form-signin input[type="text"] {
36 margin-bottom: -1px;
37 border-bottom-right-radius: 0;
38 border-bottom-left-radius: 0;
39 }
40
41 .form-signin input[type="password"] {
42 margin-bottom: 10px;
43 border-top-left-radius: 0;
44 border-top-right-radius: 0;
45 }
46
47 hr {
48 border: 1px solid #f1f1f1; margin-bottom: 25px;
49 }
50 /* Set a style for all buttons */
51 button {
52 margin: 15px 0;
53 width: 100%;
54 }
55
56 /* logo style*/
57 .logo {
58 height: 100px;
59 margin: 80px 0 50px;
60 float: center;
61 }
62 .containerlogo{
63 border: 1px solid rgb(187, 187, 187);
64 height: 100px;
65 width: 100px;
66 }
67
68
69 </style>
70 </head>
71 <body>
72 <main class="form-signin">
73 <form action="login.php" style="border:1px solid #ccc">
74 <div class="logo">
75 <div class="containerlogo center-block">
76 <img src="logo.png" alt="Logo Aplikasi" >
77 </div>
78 </div>
79 <hr>
80 <div class="form-floating">
81 <input type="text" class="form-control" placeholder="Username or
82 email address" name="username" required>
83 </div>
84
85 <br>
86 <input type="password" class="form-control" placeholder="Password"
87 name="psw" required>
88
89 <button class="w-100 btn btn-lg btn-primary" type="submit">Log
91 in</button>
92 </form>
93 </main>
94
95 </body>
96 </html>
97
[SUO-IM-007]
Halaman Sign up
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>Halaman awal</title>
8 <link rel="stylesheet"
9 href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.cs
10 s"
11
12 integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8
13 xmyTe9GYg1l9a69psu" crossorigin="anonymous">
14 <style>
15 body {
16 height: 100%;
17 font-family: Verdana, Tahoma, sans-serif;
18 display: flex;
19 align-items: center;
20 padding-top: 40px;
21 padding-bottom: 40px;
22 background-color: #f5f5f5;
23 }
24
25 .form-signup {
26 width: 100%;
27 background-color: rgb(240, 240, 240);
28 max-width: 450px;
29 margin: auto;
30 }
31
32 .form-signup .form-floating:focus-within {
33 z-index: 2;
34 }
35
36 .form-signup input[type="text"] {
37 margin-bottom: 15px;
38 border-bottom-right-radius: 0;
39 border-bottom-left-radius: 0;
40 }
41
42 .form-signup input[type="email"] {
43 margin-bottom: 15px;
44 border-bottom-right-radius: 0;
45 border-bottom-left-radius: 0;
46 }
47
48 .form-signup input[type="password"] {
49 margin-bottom: 15px;
50 border-top-left-radius: 0;
51 border-top-right-radius: 0;
52 }
53
54 hr {
55 border: 1px solid #f1f1f1; margin-bottom: 25px;
56 }
57
58 button {
59 margin: 15px 0;
60 width: 90%;
61 }
62
63 /* logo style*/
64 .logo {
65 height: 100px;
66 margin: 80px 0 50px;
67 float: center;
68 }
69 .containerlogo{
70 border: 1px solid rgb(187, 187, 187);
71 height: 100px;
72 width: 100px;
73 }
74
75 .forms{
76 padding: 15px;
77 }
78 .forms2{
79 margin-bottom: 15px;
80 }
81
82 .birthdate{
83 margin-bottom: -20px;
84 }
85 </style>
86 </head>
87 <body>
88 <main class="form-signup">
89 <form action="login.php" style="border:1px solid #ccc">
91 <div class="logo">
92 <div class="containerlogo center-block">
93 <img src="logo.png" alt="Logo Aplikasi" >
94 </div>
95 </div>
96 <hr>
97 <div class="col-sm-6">
98 <div class="form-floating"></div>
99 <input type="text" class="form-control" placeholder="First name"
100 name="firstname" required>
101 </div>
102 <div class="col-sm-6">
103 <div class="form-floating">
104 <input type="text" class="form-control" placeholder="Last name"
105 name="lastname" required>
106 </div>
107 </div>
108 <div class="forms text-center">
109 <div class="form-floating">
110 <input type="text" class="form-control" placeholder="Username"
111 name="username" required>
112 </div>
113
114 <div class="form-floating">
115 <input type="email" class="form-control" placeholder="Email"
116 name="username" required>
117 </div>
118 <div class="text-left birthdate">
119 <label>Birthdate</label>
120 </div>
121 </div>
122
123 <div class="form-row">
124 <div class="col-sm-4">
125 <input type="text" class="form-control" id="tanggal"
126 placeholder="day" required>
127 </div>
128 <div class="col-sm-4">
129 <input type="text" class="form-control" id="bulan"
130 placeholder="month" required>
131 </div>
132 <div class="col-sm-4">
133 <input type="text" class="form-control" id="tahun"
134 placeholder="year" required>
135 </div>
136 </div>
137
138 <div class="forms text-center">
139 <div class="forms2 form-floating">
140 <select class="form-control">
141 <option selected>Choose...</option>
142 <option value="1">Laki-laki</option>
143 <option value="2">Perempuan</option>
144 </select>
145 </div>
146
147 <div class="form-floating">
148 <input type="text" class="form-control" placeholder="Phone
149 number" name="telepon" required>
150 </div>
151
152 <div class="form-floating">
153 <input type="text" class="form-control" placeholder="Address"
154 name="alamat" required>
155 </div>
156
157 <div class="form-floating">
158 <input type="password" class="form-control"
159 placeholder="Password" name="psw" required>
160 </div>
161 <button class="w-100 btn btn-lg btn-primary"
162 type="submit">Register</button>
163 <button class="w-100 btn btn-lg btn-danger" type="submit">Register
164 with Google</button>
165 </div>
166
167 </form>
168 </main>
169
170 </body>
171 </html>
172
173
[SUO-IM-008]
Halaman Pemesanan-1
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Pemesanan</title>
8 <link rel="stylesheet"
9 href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.cs
10 s"
11
12 integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8
13 xmyTe9GYg1l9a69psu" crossorigin="anonymous">
14 <style>
15 body {
16 height: 100%;
17 font-family: Verdana, Tahoma, sans-serif;
18 display: flex;
19 align-items: center;
20 padding-top: 40px;
21 padding-bottom: 40px;
22 background-color: #f5f5f5;
23 }
24
25
26
27 .form-pemesanan {
28 width: 100%;
29 max-width: 450px;
30
31 margin: auto;
32 }
33 .nav img{
34 float: left;
35 height: 30px;
36 margin-right: 15px;
37 }
38
39 .center {
40 margin-left: auto;
41 margin-right: auto;
42 margin-top: 10px;
43 margin-bottom: 10px;
44 width: 50%;
45 font-size: 20px;
46 }
47 .containerQ{
48 margin: 90px;
49 }
50
51 .next{
52 float: right;
53 margin-right: 30px;
54 margin-top: 130px;
55 }
56
57
58
59 </style>
60 </head>
61 <body>
62 <main class="form-pemesanan">
63 <div class="container-fluid">
64 <div class="nav">
65 <a class="navbar-brand">
66 <img
67 src="https://pbs.twimg.com/media/E0MabU8UYAEftor?format=png&name=sm
68 all" class="d-inline-block align-text-top">
69
70 </a>
71 <h3>Pemesanan</h3>
72 </div>
73 </div>
74
75 <div class="containerQ">
76 <h2>Jenis Test</h2>
77 </div>
78
79 <table class="center" cellspacing="0" cellpadding="20">
80 <tr>
81 <td><button type="input" class="btn btn-default btn-lg">Rapid
82 Test</button></td>
83 <td><button type="input" class="btn btn-default btn-lg">Swab
84 Test</button></td>
85 </tr>
86 </table>
87
88
89 <br><br>
91 <div class="next">
92 <button type="button" class="btn btn-info">Next<span class="glyphicon
93 glyphicon-menu-right" aria-hidden="true"></span></button>
94 </div>
95
96 </main>
97
98 </body>
99 </html>
[SUO-IM-009]
Halaman Pemesanan-2
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Pemesanan</title>
8 <link rel="stylesheet"
9 href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.cs
10 s"
11
12 integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8
13 xmyTe9GYg1l9a69psu" crossorigin="anonymous">
14 <style>
15 body {
16 height: 100%;
17 font-family: Verdana, Tahoma, sans-serif;
18 display: flex;
19 align-items: center;
20 padding-top: 40px;
21 padding-bottom: 40px;
22 background-color: #f5f5f5;
23 }
24
25
26
27 .form-pemesanan {
28 width: 100%;
29 max-width: 450px;
30
31 margin: auto;
32 }
33 .nav img{
34 float: left;
35 height: 30px;
36 margin-right: 15px;
37 }
38
39 .center {
40 margin-left: auto;
41 margin-right: auto;
42 margin-top: 10px;
43 margin-bottom: 10px;
44 width: 50%;
45 font-size: 20px;
46 }
47 .containerQ{
48 margin: 90px;
49 }
50
51 .next{
52 float: right;
53 margin-right: 30px;
54 margin-top: 130px;
55 }
56
57
58
59 </style>
60 </head>
61 <body>
62 <main class="form-pemesanan">
63 <div class="container-fluid">
64 <div class="nav">
65 <a class="navbar-brand">
66 <img
67 src="https://pbs.twimg.com/media/E0MabU8UYAEftor?format=png&name=sm
68 all" class="d-inline-block align-text-top">
69
70 </a>
71 <h3>Pemesanan</h3>
72 </div>
73 </div>
74
75 <div class="containerQ">
76 <h2>Metode Test</h2>
77 </div>
78
79 <table class="center" cellspacing="0" cellpadding="20">
80 <tr>
81 <td><button type="input" class="btn btn-default btn-lg"><h3>On
82 The Spot</h3></button></td>
83 <td><button type="input" class="btn btn-default btn-lg"><h3>Drive
84 thru</h3></button></td>
85 </tr>
86 </table>
87
88
89 <br><br>
91 <div class="next">
92 <button type="button" class="btn btn-info">Next<span class="glyphicon
93 glyphicon-menu-right" aria-hidden="true"></span></button>
94 </div>
95
96 </main>
97
98 </body>
99 </html>
[SUO-IM-010]
Halaman Pemesanan-3
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Pemesanan</title>
8 <link rel="stylesheet"
9 href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.cs
10 s"
11
12 integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8
13 xmyTe9GYg1l9a69psu" crossorigin="anonymous">
14 <style>
15 body {
16 height: 100%;
17 font-family: Verdana, Tahoma, sans-serif;
18 display: flex;
19 align-items: center;
20 padding-top: 40px;
21 padding-bottom: 40px;
22 background-color: #f5f5f5;
23 }
24
25 p{
26 font-size: 13px;
27 }
28
29 .form-pemesanan {
30 width: 100%;
31 max-width: 450px;
32 margin: auto;
33 }
34 .nav img{
35 float: left;
36 height: 30px;
37 margin-right: 15px;
38 }
39
40 .center {
41 margin-left: auto;
42 margin-right: auto;
43 margin-top: 10px;
44 margin-bottom: 10px;
45 width: 50%;
46 font-size: 20px;
47 }
48 .containerQ{
49 margin: 50px 0px 50px 90px;
50 }
51
52 .logo {
53 height: 100px;
54 margin: 80px 0 50px;
55 float: center;
56 }
57 .containerlogo{
58 border: 1px solid rgb(187, 187, 187);
59 height: 100px;
60 width: 100px;
61 }
62
63 .thumbnail{
64 border-radius: 4px;
65 margin: 30px;
66 padding: 10px;
67 size: 30%;
68 transition: all 0.5s;
69 cursor: pointer;
70 }
71
72 .thumbnail:hover{
73 background-color: rgb(228, 228, 228);
74 cursor: pointer;
75 }
76
77 .next{
78 float: right;
79 margin-right: 30px;
80 margin-top: 30px;
81 }
82
83 </style>
84 </head>
85 <body>
86 <main class="form-pemesanan">
87 <div class="container-fluid">
88 <div class="nav">
89 <a class="navbar-brand">
91
92
93 <img
94 src="https://pbs.twimg.com/media/E0MabU8UYAEftor?format=png&name=sm
95 all" class="d-inline-block align-text-top">
96
97 </a>
98 <h3>Pemesanan</h3>
99 </div>
100 </div>
101
102 <div class="containerQ">
103 <h2>Tempat Test</h2>
104 </div>
105
106 <div class="row thumbnail">
107 <div class="col-sm-6 containerlogo">
108 <img src="logo.png" alt="Layanan kesehatan" >
109 </div>
110 <div class="caption col-sm-6">
111 <h4>Rumah sakit</h4>
112 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
113 </div>
114 </div>
115 <div class="row thumbnail">
116 <div class="col-sm-6 containerlogo">
117 <img src="logo.png" alt="Layanan kesehatan" >
118 </div>
119 <div class="caption col-sm-6">
120 <h4>Rumah sakit</h4>
121 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
122 </div>
123 </div>
124 <div class="row thumbnail">
125 <div class="col-sm-6 containerlogo">
126 <img src="logo.png" alt="Layanan kesehatan" >
127 </div>
128 <div class="caption col-sm-6">
129 <h4>Rumah sakit</h4>
130 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
131 </div>
132 </div>
134
135 <div class="next">
136 <button type="button" class="btn btn-info">Next<span class="glyphicon
137 glyphicon-menu-right" aria-hidden="true"></span></button>
138 </div>
139 </main>
140
141 </body>
142 </html>
[SUO-IM-011]
Halaman Pemesanan-4
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Pemesanan</title>
8 <link rel="stylesheet"
9 href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.cs
10 s"
11
12 integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8
13 xmyTe9GYg1l9a69psu" crossorigin="anonymous">
14 <style>
15 body {
16 height: 100%;
17 font-family: Verdana, Tahoma, sans-serif;
18 display: flex;
19 align-items: center;
20 padding-top: 40px;
21 padding-bottom: 40px;
22 background-color: #f5f5f5;
23 }
24
25 p{
26 font-size: 13px;
27 }
28
29 .form-pemesanan {
30 width: 100%;
31 max-width: 450px;
32 margin: auto;
33 }
34 .nav img{
35 float: left;
36 height: 30px;
37 margin-right: 15px;
38 }
39
40 .center {
41 margin-left: auto;
42 margin-right: auto;
43 margin-top: 10px;
44 margin-bottom: 10px;
45 width: 50%;
46 font-size: 20px;
47 }
48 .containerQ{
49 margin: 50px 0px 50px 50px;
50 }
51
52 .logo {
53 height: 100px;
54 margin: 80px 0 50px;
55 float: center;
56 }
57 .containerlogo{
58 border: 1px solid rgb(187, 187, 187);
59 height: 100px;
60 width: 100px;
61 }
62
63 .thumbnail{
64 margin: 30px 10px 10px 30px;
65 padding: 10px;
66 size: 30%;
67 }
68
69 .forms{
70 margin: 10px;
71 }
72
73 .forms2{
74 margin-top: 100px;
75 }
76
77 .next{
78 float: right;
79 margin-right: 30px;
80 margin-top: 30px;
81 }
82
83 </style>
84 </head>
85 <body>
86 <main class="form-pemesanan">
87 <div class="container-fluid">
88 <div class="nav">
89 <a class="navbar-brand">
91 <img
92 src="https://pbs.twimg.com/media/E0MabU8UYAEftor?format=png&name=sm
93 all" class="d-inline-block align-text-top">
94
95 </a>
96 <h3>Pemesanan</h3>
97 </div>
98 </div>
99
100 <div class="containerQ">
101 <h2>Waktu Test</h2>
102 </div>
103
104 <div class="form-row forms">
105 <div class="col-sm-4">
106 <div class="form-group">
107 <select class="form-control">
108 <option selected>day</option>
109 <option value="1">1</option>
110 <option value="2">2</option>
111 <option value="3">3</option>
112 <option value="4">4</option>
113 <option value="5">5</option>
114 <option value="6">6</option>
115 <option value="7">7</option>
116 <option value="8">8</option>
117 <option value="9">9</option>
118 <option value="10">10</option>
119 <option value="11">11</option>
120 <option value="12">12</option>
121 <option value="13">13</option>
122 <option value="14">14</option>
123 <option value="15">15</option>
124 <option value="16">16</option>
125 <option value="17">17</option>
126 <option value="18">18</option>
127 <option value="19">19</option>
128 <option value="20">20</option>
129 <option value="21">21</option>
130 <option value="22">22</option>
131 <option value="23">23</option>
132 <option value="24">24</option>
133 <option value="25">25</option>
134 <option value="26">26</option>
135 <option value="27">27</option>
136 <option value="28">28</option>
137 <option value="29">29</option>
138 <option value="30">30</option>
139 <option value="31">31</option>
140 </select>
141 </div>
142 </div>
143 <div class="col-sm-4">
144 <div class="form-group">
145 <select class="form-control">
146 <option selected>month</option>
147 <option value="1">1</option>
148 <option value="2">2</option>
149 <option value="3">3</option>
150 <option value="4">4</option>
151 <option value="5">5</option>
152 <option value="6">6</option>
153 <option value="7">7</option>
154 <option value="8">8</option>
155 <option value="9">9</option>
156 <option value="10">10</option>
157 <option value="11">11</option>
158 <option value="12">12</option>
159 </select>
160 </div>
161 </div>
162 <div class="col-sm-4">
163 <div class="form-group">
164 <select class="form-control">
165 <option selected>year</option>
166 <option value="1">2020</option>
167 <option value="2">2021</option>
168 </select>
169 </div>
170 </div>
171 </div>
172
173 <div class="forms2">
174 <div type="input" class="thumbnail btn btn-default">
175 <h4>07.00-08.00</h4>
176 <p>Kuota tersedia : 30</p>
177 </div>
178 <div type="input" class="thumbnail btn btn-default">
179 <h4>08.00-09.00</h4>
180 <p>Kuota tersedia : 30</p>
181 </div>
182 <div type="input" class="thumbnail btn btn-default">
183 <h4>09.00-10.00</h4>
184 <p>Kuota tersedia : 30</p>
185 </div>
186 <div type="input" class="thumbnail btn btn-default">
187 <h4>10.00-11.00</h4>
188 <p>Kuota tersedia : 30</p>
189 </div>
190 </div>
191
192 <div class="next">
193 <button type="button" class="btn btn-info">Next<span class="glyphicon
194 glyphicon-menu-right" aria-hidden="true"></span></button>
195 </div>
196 </main>
197
198 </body>
199 </html>
[SUO-IM-012]
Halaman Checkout
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Pemesanan</title>
8
9
10 <link rel="stylesheet"
11 href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.cs
12 s"
13
14 integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8
15 xmyTe9GYg1l9a69psu" crossorigin="anonymous">
16 <style>
17 body {
18 height: 100%;
19 font-family: Verdana, Tahoma, sans-serif;
20 display: flex;
21 align-items: center;
22 padding-top: 40px;
23 padding-bottom: 40px;
24 background-color: #f5f5f5;
25 }
26
27 .thumbnail .btn .btn-default .caption p{
28 width: 140px;
29 font-size: 10px;
30 word-break: keep-all;
31 }
32
33 .form-pemesanan {
34 width: 100%;
35 max-width: 450px;
36 margin: auto;
37 }
38 .nav img{
39 float: left;
40 height: 30px;
41 margin-right: 15px;
42 }
43
44 .center {
45 margin-left: auto;
46 margin-right: auto;
47 margin-top: 10px;
48 margin-bottom: 10px;
49 width: 50%;
50 font-size: 20px;
51 }
52 .containerQ{
53 margin: 10px;
54 }
55
56 .logo {
57 height: 100px;
58 margin: 80px 0 50px;
59 float: center;
60 }
61 .containerlogo{
62 border: 1px solid rgb(187, 187, 187);
63 height: 100px;
64 width: 100px;
65 }
66
67 .thumbnail{
68 margin: 10px;
69 padding: 10px;
70 size: 30%;
71 }
72
73 .next{
74 float: right;
75 margin-right: 30px;
76 margin-top: 30px;
77 }
78
79 </style>
80 </head>
81 <body>
82 <main class="form-pemesanan">
83 <div class="container-fluid">
84 <div class="nav">
85 <a class="navbar-brand">
86 <img
87 src="https://pbs.twimg.com/media/E0MabU8UYAEftor?format=png&name=sm
88 all" class="d-inline-block align-text-top">
89
91 </a>
92 <h3>Checkout</h3>
93 </div>
94 </div>
95
96 <div class="containerQ">
97 <h3>Jenis Test</h3>
98 </div>
99 <div type="input" class="thumbnail">
100 <h4>Rapid Test</h4>
101 </div>
102 </div>
103 <div class="containerQ">
104 <h3>Metode Test</h3>
105 </div>
106 <div type="input" class="thumbnail">
107 <h4>On The Spot</h4>
108 </div>
109 <div class="containerQ">
110 <h3>Tempat Test</h3>
111 </div>
112 <div class="row thumbnail">
113 <div class="col-sm-6 containerlogo">
114 <img src="logo.png" alt="Layanan kesehatan" >
115 </div>
116 <div class="caption col-sm-6">
117 <h4>Thumbnail label</h4>
118 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
119 </div>
120 </div>
121 <div class="containerQ">
122 <h3>Waktu Test</h3>
123 </div>
124 <div type="input" class="thumbnail">
125 <h4>10.00-11.00</h4>
126 <p>Kuota tersedia : 30</p>
127 </div>
128
129 <div class="next">
130 <button type="button" class="btn btn-info">Next<span class="glyphicon
131 glyphicon-menu-right" aria-hidden="true"></span></button>
132 </div>
133 </main>
134
</body>
</html>
[ARM-IM-001]
Homepage
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Homepage Go-Fit</title>
9 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
10 rel="stylesheet">
11 <link
12 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min
13 .css" rel="stylesheet"
14
15 integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+r
16 P48ckxlpbzKgwra6" crossorigin="anonymous">
17 <link rel="stylesheet"
18 href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.c
19 ss" />
20 <style>
21 .row {
22 padding: auto;
23 margin: auto;
24
25 }
26
27 .menu-border {
28 background-color: #2ABB9B;
29 border-radius: 15px;
30 }
31
32 .profile-jumbotron {
33 background-color: #2ABB9B;
34 border-radius: 20px;
35 position: relative;
36 width: 95%;
37
38 }
39
40 .edit-text {
41 opacity: 50%;
42 }
43
44 img {
45 height: 100px;
46 width: 100px;
47 }
48
49 #control {
50
51 width: 100%;
52 opacity: 1;
53 border-radius: 0px 0px 20px 20px;
54
55 }
56
57 color: #cbcbcb;
58 #control>div {
59 font-size: 1.4rem;
60 }
61
62 #control>div>p {
63 font-size: 1rem;
64 }
65
66 #frame {
67 width: 450px;
68 border: 1px black solid;
69 padding: 0;
70 padding-top: 10px;
71 border-radius: 20px;
72 }
73
74 .main-menu {
75 margin-left: 3%;
76 margin-right: 3%;
77 }
78 </style>
79 </head>
80
81 <body>
82 <div class="container-sm mt-3" id="frame">
83
84 <div class="row">
85 <div class="col-1 pt-1"> <span class="material-icons">
86 menu
87 </span></div>
88 <div class="col-8">
89 <div class="lead">Homepage</div>
91 </div>
92 <div class="col">
93 <img src="logo.png" alt="Logo Aplikasi" style="width: 70px;height:
94 70px;">
95 </div>
96 </div>
97
98 <div class="row">
99 <div class="col">
100 <div class="fs-2" style="margin-left: 1% !important;">Selamat datang,
101 User</div>
102
103 </div>
104 </div>
105 <br>
106 <div class="d-flex justify-content-center container profile-jumbotron pt-3 pb-3
107 ">
108 <div class="row">
109 <div class="col">
110 <p class="fs-2 fw-bold">Alif Rizal Maulana</p>
111 <div class="lead edit-text">Edit Profile</div>
112 </div>
113 <div class="col-3"> <img
114 src="http://www.pngall.com/wp-content/uploads/5/Profile-PNG-Clipart.png"
115 class="rounded float-end" alt="Profile Picture"></div>
116 </div>
117 </div>
118
119 <div class="row mt-5 main-menu">
120 <div class="col-6 pt-3 pb-3 menu-border text-center border border-5
121 border-white">
122 <img src="menu1.svg" alt="Pemesanan Layanan">
123 <div class="lead">Hasil Test</div>
124 </div>
125
126 <div class="col-6 pt-3 pb-3 menu-border text-center border border-5
127 border-white">
128 <img src="menu2.svg" alt="">
129 <div class="lead">Berita Covid-19</div>
130 </div>
131 </div>
132 <div class="row main-menu">
133 <div class="col-6 pt-3 pb-3 menu-border text-center border border-5
134 border-white">
135 <img src="menu3.svg" alt="">
136 <div class="lead">Jadwal Test</div>
137 </div>
138 <div class="col-6 pt-3 pb-3 menu-border text-center border border-5
139 border-white">
140 <img src="menu4.svg" alt="">
141 <div class="lead">Customer Service</div>
142 </div>
143 </div>
144
145 <div class="row text-center border mt-5" id="control"
146 style="background-color: white">
147 <div class="col-3 pt-2" style="color: #2ABB9B">
148 <i class="bi-house-door-fill"></i>
149 <p>Home</p>
150 </div>
151 <div class="col-3 p-2">
152 <i class="bi-search"></i>
153 <p>Cari</p>
154 </div>
155 <div class="col-3 p-2">
156 <i class="bi bi-clock-history"></i></i>
157 <p>Pemesanan</p>
158 </div>
159 <div class="col-3 p-2">
160 <i class="bi-person"></i>
161 <p>Akun</p>
162 </div>
163 </div>
164 </div>
165 </body>
166
167 </html>
[ARM-IM-002]
Halaman Kritik & Saran
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Halaman Kritik & Saran</title>
9
10 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
11 rel="stylesheet">
12 <link
13 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min
14 .css" rel="stylesheet"
15
16 integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+r
17 P48ckxlpbzKgwra6" crossorigin="anonymous">
18 <link rel="stylesheet"
19 href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.c
20 ss" />
21 <style>
22 .row {
23 padding: auto;
24 margin: auto;
25
26 }
27
28 .profile-jumbotron {
29 background-color: #2ABB9B;
30 border-radius: 20px;
31 position: relative;
32 width: 95%;
33
34 }
35
36 .edit-text {
37 opacity: 50%;
38 }
39
40 img {
41 height: 100px;
42 width: 100px;
43 }
44
45 #control {
46
47 width: 100%;
48 opacity: 1;
49 border-radius: 0px 0px 20px 20px;
50
51 }
52
53 #control>div {
54 font-size: 1.4rem;
55 color: #cbcbcb;
56 }
57
58 #control>div>p {
59 font-size: 1rem;
60 }
61
62 #frame {
63 width: 450px;
64 border: 1px black solid;
65 padding: 0;
66 padding-top: 10px;
67 border-radius: 20px;
68 }
69 textarea{
70 width: 100%;
71 }
72 </style>
73 </head>
74
75 <body>
76 <div class="container-sm mt-3" id="frame">
77
78 <div class="row">
79 <div class="col-1"><img src="back.svg" style="width: 30px;
80 height:40px;"></div>
81 <div class="col-8">
82 <div class="lead pt-1">Halaman Kritik & Saran</div>
83 </div>
84 <div class="col">
85 <img src="logo.png" alt="Logo Aplikasi" style="width: 70px;height:
86 70px;">
87 </div>
88 </div>
89
91
92 <br>
93 <div class="d-flex justify-content-center container profile-jumbotron pt-3
94 pb-3 ">
95 <div class="row">
96 <div class="col">
97 <p class="fs-2 fw-bold">Alif Rizal Maulana</p>
98 <div class="lead edit-text">Edit Profile</div>
99 </div>
100 <div class="col-3"> <img
101 src="http://www.pngall.com/wp-content/uploads/5/Profile-PNG-Clipart.png"
102 class="rounded float-end" alt="Profile Picture"></div>
103 </div>
104 </div>
105
106 <div class="row mt-5">
107 <div class="col ">
108 <div class="fs-5" style="margin-left: 12px;">Masukkan Kritik & Saran
109 Anda: </div>
110 </div>
111 </div>
112 <div class="container">
113 <div class="row">
114 <div class="col">
115 <textarea name="kritik_saran" id="" cols="54"
116 rows="20"></textarea>
117 </div>
118 <div class="w-100"></div>
119 <div class="col">
120 <div class="d-grid gap-2 d-md-flex justify-content-md-end">
121 <button class="btn btn-primary" type="button">Kirim</button>
122 </div>
123 </div>
124 </div>
125 </div>
126
127 <div class="row text-center border mt-5" id="control"
128 style="background-color: white">
129 <div class="col-3 pt-2" style="color: #2ABB9B">
130 <i class="bi-house-door-fill"></i>
131 <p>Home</p>
132 </div>
133 <div class="col-3 p-2">
134 <i class="bi-search"></i>
135 <p>Cari</p>
136 </div>
137 <div class="col-3 p-2">
138 <i class="bi bi-clock-history"></i></i>
139 <p>Pemesanan</p>
140 </div>
141 <div class="col-3 p-2">
142 <i class="bi-person"></i>
143 <p>Akun</p>
144 </div>
145 </div>
146 </div>
147 </body>
148
149 </html>
[ARM-IM-003]
Halaman Admin
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Halaman Admin</title>
9 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
10 rel="stylesheet">
11 <link
12 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min
13 .css" rel="stylesheet"
14
15 integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+r
16 P48ckxlpbzKgwra6" crossorigin="anonymous">
17 <link rel="stylesheet"
18 href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.c
19 ss" />
20 <style>
21 .row {
22 padding: auto;
23 margin: auto;
24
25 }
26
27 .profile-jumbotron {
28 background-color: #2ABB9B;
29 border-radius: 20px;
30 position: relative;
31 width: 95%;
32
33 }
34
35
36 img {
37 height: 100px;
38 width: 100px;
39 }
40
41 #control {
42
43 width: 100%;
44 opacity: 1;
45 border-radius: 0px 0px 20px 20px;
46
47 }
48
49 #control>div {
50 font-size: 1.4rem;
51 color: #cbcbcb;
52 }
53
54 #control>div>p {
55 font-size: 1rem;
56 }
57
58 #frame {
59 width: 450px;
60 border: 1px black solid;
61 padding: 0;
62 padding-top: 10px;
63 border-radius: 20px;
64 }
65
66 .btn{
67 height: 100px;
68 width: 80%;
69 border-radius: 25px;
70 }
71
72 .grey{
73 background-color: #2ABB9B;
74 border: none;
75 color:black;
76 }
77
78 </style>
79 </head>
80
81 <body>
82 <div class="container-sm mt-3" id="frame">
83
84 <div class="row">
85 <div class="col-1 pt-2"><span class="material-icons">
86 menu
87 </span></div>
88 <div class="col-8">
89 <div class="lead pt-1">Halaman Admin</div>
91 </div>
92 <div class="col">
93 <img src="logo.png" alt="Logo Aplikasi" style="width: 70px;height:
94 70px;">
95 </div>
96 </div>
97
98
99 <br>
100 <div class="d-flex justify-content-center container profile-jumbotron pt-3
101 pb-3 ">
102 <div class="row">
103 <div class="col">
104 <p class="fs-2 fw-bold">Administrator</p>
105 </div>
106 <div class="col-3"> <img
107 src="http://www.pngall.com/wp-content/uploads/5/Profile-PNG-Clipart.png"
108 class="rounded float-end" alt="Profile Picture"></div>
109 </div>
110 </div>
111
112 <br><br><br>
113 <div class="container">
114 <div class="row">
115 <button type="button" class="btn btn-primary mx-auto grey
116 fs-3">Collect Data</button>
117 </div>
118 <br>
119 <div class="row">
120 <button type="button" class="btn btn-primary mx-auto grey
121 fs-3">Create Rekap</button>
122 </div>
123 <br>
124 <div class="row">
125 <button type="button" class="btn btn-primary mx-auto grey
126 fs-3">Send Document</button>
127 </div>
128 <br>
129 <div class="row">
130 <button type="button" class="btn btn-primary mx-auto grey
131 bg-danger fs-3">Logout</button>
132 </div>
133 </div>
134
135 <div class="row text-center border mt-5" id="control"
136 style="background-color: white">
137 <div class="col-3 pt-2" style="color: #2ABB9B">
138 <i class="bi-house-door-fill"></i>
139 <p>Home</p>
140 </div>
141 <div class="col-3 p-2">
142 <i class="bi-search"></i>
143 <p>Cari</p>
144 </div>
145 <div class="col-3 p-2">
146 <i class="bi bi-clock-history"></i></i>
147 <p>Pemesanan</p>
148 </div>
149 <div class="col-3 p-2">
150 <i class="bi-person"></i>
151 <p>Akun</p>
152 </div>
153 </div>
154 </div>
155 </body>
156
157 </html>
[ARM-IM-004]
Halaman Stakeholder
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Halaman Stakeholder</title>
9 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
10 rel="stylesheet">
11 <link
12 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min
13 .css" rel="stylesheet"
14
15 integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+r
16 P48ckxlpbzKgwra6" crossorigin="anonymous">
17 <link rel="stylesheet"
18 href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.c
19 ss" />
20 <style>
21 .row {
22 padding: auto;
23 margin: auto;
24
25 }
26
27 .profile-jumbotron {
28 background-color: #2ABB9B;
29 border-radius: 20px;
30 position: relative;
31 width: 95%;
32
33 }
34
35
36 img {
37 height: 100px;
38 width: 100px;
39 }
40
41 #control {
42
43 width: 100%;
44 opacity: 1;
45 border-radius: 0px 0px 20px 20px;
46
47 }
48
49 #control>div {
50 font-size: 1.4rem;
51 color: #cbcbcb;
52 }
53
54 #control>div>p {
55 font-size: 1rem;
56 }
57
58 #frame {
59 width: 450px;
60 border: 1px black solid;
61 padding: 0;
62 padding-top: 10px;
63 border-radius: 20px;
64 }
65
66 .btn {
67 height: 100px;
68 width: 80%;
69 border-radius: 25px;
70 }
71
72 .grey {
73 background-color: #2ABB9B;
74 border: none;
75 color: black;
76 }
77 </style>
78 </head>
79
80 <body>
81 <div class="container-sm mt-3" id="frame">
82
83 <div class="row">
84 <div class="col-1 pt-2"><span class="material-icons">
85 menu
86 </span></div>
87 <div class="col-8">
88 <div class="lead pt-1">Halaman Stakeholder</div>
89 </div>
91 <div class="col">
92 <img src="logo.png" alt="Logo Aplikasi" style="width: 70px;height:
93 70px;">
94 </div>
95 </div>
96
97
98 <br>
99 <div class="d-flex container profile-jumbotron pt-3 pb-3 ">
100 <div class="row">
101 <div class="col">
102 <p class="fs-2 fw-bold">Chief Executive Officer</p>
103 </div>
104 <div class="col-3"> <img
105 src="http://www.pngall.com/wp-content/uploads/5/Profile-PNG-Clipart.png"
106 class="rounded float-end" alt="Profile Picture"></div>
107 </div>
108 </div>
109
110 <br><br><br>
111 <div class="container">
112 <div class="row">
113 <button type="button" class="btn btn-primary mx-auto grey
114 fs-3">Collect Data</button>
115 </div>
116 <br>
117 <div class="row">
118 <button type="button" class="btn btn-primary mx-auto grey
119 fs-3">Attach Document <i
120 class="bi bi-file-earmark-plus"></i></button>
121 </div>
122 <br>
123 <div class="row">
124 <button type="button" class="btn btn-primary mx-auto grey
125 fs-3">Send Document</button>
126 </div>
127 <br>
128 <div class="row">
129 <button type="button" class="btn btn-danger mx-auto grey
130 fs-3">Logout</button>
131 </div>
132 </div>
133
134 <div class="row text-center border mt-5" id="control"
135 style="background-color: white">
136 <div class="col-3 pt-2" style="color: #2ABB9B">
137 <i class="bi-house-door-fill"></i>
138 <p>Home</p>
139 </div>
140 <div class="col-3 p-2">
141 <i class="bi-search"></i>
142 <p>Cari</p>
143 </div>
144 <div class="col-3 p-2">
145 <i class="bi bi-clock-history"></i></i>
146 <p>Pemesanan</p>
147 </div>
148 <div class="col-3 p-2">
149 <i class="bi-person"></i>
150 <p>Akun</p>
151 </div>
152 </div>
153 </div>
154 </body>
155
156 </html>
[ARM-IM-005]
Sistem Aplikasi
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Sistem Aplikasi</title>
9 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
10 rel="stylesheet">
11 <link
12 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min
13 .css" rel="stylesheet"
14
15 integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+r
16 P48ckxlpbzKgwra6" crossorigin="anonymous">
17 <link rel="stylesheet"
18 href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.c
19 ss" />
20 <style>
21 .row {
22 padding: auto;
23 margin: auto;
24
25 }
26
27 .profile-jumbotron {
28 background-color: #2ABB9B;
29 border-radius: 20px;
30 position: relative;
31 width: 95%;
32
33 }
34
35
36 img {
37 height: 100px;
38 width: 100px;
39 }
40
41 #control {
42
43 width: 100%;
44 opacity: 1;
45 border-radius: 0px 0px 20px 20px;
46
47 }
48
49 #control>div {
50 font-size: 1.4rem;
51 color: #cbcbcb;
52 }
53
54 #control>div>p {
55 font-size: 1rem;
56 }
57
58 #frame {
59 width: 450px;
60 border: 1px black solid;
61 padding: 0;
62 padding-top: 10px;
63 border-radius: 20px;
64 }
65
66 .border-gear {
67
68 margin-left: 8%;
69 margin-right: 8%;
70 border-radius: 20px;
71
72
73 }
74
75 .gear-icon {
76 width: 100%;
77 height: 100%;
78
79 }
80
81 .btn {
82 height: 100px;
83 width: 85%;
84 border-radius: 25px;
85 }
86
87 .grey {
88 background-color: #2ABB9B;
89 border: none;
91 color: black;
92 }
93 </style>
94 </head>
95
96 <body>
97 <div class="container-sm mt-3" id="frame">
98
99 <div class="row">
100 <div class="col-1 pt-2"><span class="material-icons">
101 menu
102 </span></div>
103 <div class="col-8">
104 <div class="lead pt-1">Sistem Aplikasi</div>
105 </div>
106 <div class="col">
107 <img src="logo.png" alt="Logo Aplikasi" style="width: 70px;height:
108 70px;">
109 </div>
110 </div>
111
112
113 <br><br><br>
114 <div class="container">
115 <div class="row">
116 <div class="col border-gear text-center">
117 <img src="maintenance.svg" alt="Maintenance icon"
118 class="gear-icon">
119 </div>
120 </div>
121 </div>
122 <br><br><br>
123 <div class="container">
124 <div class="row">
125 <button type="button" class="btn btn-warning mx-auto grey
126 fs-3">Apply Update</button>
127 </div>
128 </div>
129
130 <div class="row text-center border mt-5" id="control"
131 style="background-color: white">
132 <div class="col-3 pt-2" style="color: #2ABB9B">
133 <i class="bi-house-door-fill"></i>
134 <p>Home</p>
135 </div>
136 <div class="col-3 p-2">
137 <i class="bi-search"></i>
138 <p>Cari</p>
139 </div>
140 <div class="col-3 p-2">
141 <i class="bi bi-clock-history"></i></i>
142 <p>Pemesanan</p>
143 </div>
144 <div class="col-3 p-2">
145 <i class="bi-person"></i>
146 <p>Akun</p>
147 </div>
148 </div>
149 </div>
150 </body>
151
152 </html>
[ARM-IM-006]
Halaman Customer Service
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Halaman Customer Service</title>
9 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
10 rel="stylesheet">
11 <link
12 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min
13 .css" rel="stylesheet"
14
15 integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+r
16 P48ckxlpbzKgwra6" crossorigin="anonymous">
17 <link rel="stylesheet"
18 href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.c
19 ss" />
20 <style>
21 .row {
22 padding: auto;
23 margin: auto;
24
25 }
26
27 .menu-border {
28 background-color: #2ABB9B;
29 border-radius: 15px;
30 }
31
32 .profile-jumbotron {
33 background-color: #2ABB9B;
34 border-radius: 20px;
35 position: relative;
36 width: 95%;
37
38 }
39
40
41
42 img {
43 height: 100px;
44 width: 100px;
45 }
46
47 #control {
48
49 width: 100%;
50 opacity: 1;
51 border-radius: 0px 0px 20px 20px;
52
53 }
54
55 #control>div {
56 font-size: 1.4rem;
57 color: #cbcbcb;
58 }
59
60 #control>div>p {
61 font-size: 1rem;
62 }
63
64 #frame {
65 width: 450px;
66 border: 1px black solid;
67 padding: 0;
68 padding-top: 10px;
69 border-radius: 20px;
70 }
71
72 .area-box {
73 padding: 10px;
74
75 border: black 1px solid;
76
77 }
78
79 .box {
80 background-color: #c4c4c4;
81 padding: 10px;
82 border-radius: 20px;
83
84 }
85
86 .btn {
87 height: 70px;
88 width: 45%;
89 border-radius: 25px;
91 margin-left: auto;
92 }
93
94 .grey {
95 background-color: #2ABB9B;
96 border: none;
97 color: black;
98 }
99 </style>
100 </head>
101
102 <body>
103 <div class="container-sm mt-3" id="frame">
104
105 <div class="row">
106 <div class="col-1 pt-1"> <span class="material-icons">
107 menu
108 </span></div>
109 <div class="col-8">
110 <div class="lead">Halaman Customer Service</div>
111 </div>
112 <div class="col">
113 <img src="logo.png" alt="Logo Aplikasi" style="width: 70px;height:
114 70px;">
115 </div>
116 </div>
117
118
119 <br>
120 <div class="d-flex justify-content-center container profile-jumbotron pt-3
121 pb-3 ">
122 <div class="row">
123 <div class="col">
124 <p class="fs-2 fw-bold">Customer Service</p>
125
126 </div>
127 <div class="col-3"> <img
128 src="http://www.pngall.com/wp-content/uploads/5/Profile-PNG-Clipart.png"
129 class="rounded float-end" alt="Profile Picture"></div>
130 </div>
131 </div>
132 <br><br>
133 <div class="container">
134 <div class="row">
135 <div class="col area-box">
136 <div class="row">
137 <div class="col">
138 <div class="box mt-3">
139 <div class="lead">Aplikasi tidak memiliki fitur verifikasi
140 pembayaran secara
141 otomatis</div>
142 </div>
143 </div>
144 <div class="col-4">
145 <img
146 src="http://www.pngall.com/wp-content/uploads/5/Profile-PNG-Clipart.png"
147 class="rounded float-end" style="width: 100%; height:
148 80%;" alt="Profile Picture">
149 <div class="lead text-center">Alif Rizal</div>
150 </div>
151
152 </div>
153 </div>
154 </div>
155 <div class="row">
156 <div class="col area-box" style="height: 200px;">
157 <div class="lead">
158 Terimaksih atas kritik anda Alif, kami akan segera
159 memperbaikinya |
160 </div>
161 </div>
162 </div>
163 </div>
164 <br><br>
165 <div class="container">
166 <div class="row">
167 <button type="button" class="btn btn-warning grey fs-4">Send
168 Feedback</button>
169 </div>
170 </div>
171 <div class="row text-center border mt-5" id="control"
172 style="background-color: white">
173 <div class="col-3 pt-2" style="color: #2ABB9B">
174 <i class="bi-house-door-fill"></i>
175 <p>Home</p>
176 </div>
177 <div class="col-3 p-2">
178 <i class="bi-search"></i>
179 <p>Cari</p>
180 </div>
181 <div class="col-3 p-2">
182 <i class="bi bi-clock-history"></i></i>
183 <p>Pemesanan</p>
184 </div>
185 <div class="col-3 p-2">
186 <i class="bi-person"></i>
187 <p>Akun</p>
188 </div>
189 </div>
190 </div>
191
192
193 </body>
194
195 </html>
[ARM-IM-007]
Halaman Layanan
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Halaman Layanan</title>
9 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
10 rel="stylesheet">
11 <link
12 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min
13 .css" rel="stylesheet"
14
15 integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+r
16 P48ckxlpbzKgwra6" crossorigin="anonymous">
17 <link rel="stylesheet"
18 href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.c
19 ss" />
20 <style>
21 .row {
22 padding: auto;
23 margin: auto;
24
25 }
26
27 .menu-border {
28 background-color: #2ABB9B;
29 border-radius: 15px;
30 }
31
32 .profile-jumbotron {
33 background-color: #2ABB9B;
34 border-radius: 20px;
35 position: relative;
36 width: 95%;
37
38 }
39
40
41
42 img {
43 height: 100px;
44 width: 100px;
45 }
46
47 #control {
48
49 width: 100%;
50 opacity: 1;
51 border-radius: 0px 0px 20px 20px;
52
53 }
54
55 #control>div {
56 font-size: 1.4rem;
57 color: #cbcbcb;
58 }
59
60 #control>div>p {
61 font-size: 1rem;
62 }
63
64 #frame {
65 width: 450px;
66 border: 1px black solid;
67 padding: 0;
68 padding-top: 10px;
69 border-radius: 20px;
70 }
71
72 .area-box {
73 padding: 10px;
74
75 border: black 1px solid;
76
77 }
78
79 .box {
80 background-color: #c4c4c4;
81 padding: 10px;
82 border-radius: 20px;
83
84 }
85
86 .btn {
87 height: 50px;
88 width: 75%;
89 border-radius: 25px;
91 margin-left: auto;
92 }
93
94 .grey {
95 background-color: #2ABB9B;
96 border: none;
97 color: black;
98 }
99
100 .lead {
101 font-size: normal;
102 }
103
104 .detail-form {
105 border: black 1px solid;
106 background-color: #c4c4c4;
107 }
108 </style>
109 </head>
110
111 <body>
112 <div class="container-sm mt-3" id="frame">
113
114 <div class="row">
115 <div class="col-1"><img src="back.svg" style="width: 30px;
116 height:40px;"></div>
117 <div class="col-8">
118 <div class="lead pt-1">Halaman Layanan</div>
119 </div>
120 <div class="col">
121 <img src="logo.png" alt="Logo Aplikasi" style="width: 70px;height:
122 70px;">
123 </div>
124 </div>
125
126
127 <br>
128 <div class="container">
129 <div class="row detail-form">
130 <div class="col-1"><img src="x.svg" style="width: 30px;
131 height:40px;"></div>
132 <div class="col d-flex justify-content-between">
133 <div class="lead pt-1 fw-bold">Detail Pemesanan</div>
134 <div class="lead pt-1">ID : XX-XXXXXXXX</div>
135 </div>
136 </div>
137 <div class="row detail-form">
138 <div class="row">
139 <div class="col">Tempat Pemesanan : RSUD Pelita Harapan
140 Surabaya</div>
141 </div>
142 <div class="row">
143 <div class="col">Tanggal : 25-03-2021</div>
144 </div>
145 <div class="row">
146 <div class="col">Waktu Test : 20.00 WIB</div>
147 </div>
148 <div class="row">
149 <div class="col">Jenis Test : Rapid Test</div>
150 </div>
151 <div class="row">
152 <div class="col">Status : Selesai</div>
153 </div>
154 <div class="row"><br>
155 </div>
156 <div class="row">
157 <div class="fs-4">Detail Hasil Test</div>
158 </div>
159 <div class="row">
160 <div class="col">Swab dan PCR tak terpisahkan dalam metode
161 tes untuk menegakkan diagnosis Covid-19.
162 Swab adalah cara untuk memperoleh bahan pemeriksaan (
163 sampel ) . Swab dilakukan pada nasofaring
164 dan atau orofarings. Pengambilan ini dilakukan dengan cara
165 mengusap rongga nasofarings dan atau
166 orofarings dengan menggunakan alat seperti kapas lidi khusus.
167
168 Adapun PCR adalah singkatan dari polymerase chain reaction.
169 PCR merupakan metode pemeriksaan
170 virus SARS Co-2 dengan mendeteksi DNA virus. Uji ini akan
171 didapatkan hasil apakah seseorang
172 positif atau tidak SARS Co-2.
173
174 Dibanding rapid test, pemeriksaan RT-PCR lebih akurat.
175 Metode ini jugalah yang direkomendasikan
176 WHO untuk mendeteksi Covid-19. Namun akurasi ini dibarengi
177 dengan kerumitan proses dan harga
178 alat yang lebih tinggi. Selain itu, proses untuk mengetahui
179 hasilnya lebih lama ketimbang rapid
180 test.</div>
181 </div>
182
183 <div class="row pt-3 pb-3">
184 <button type="button" class="btn btn-success mx-auto
185 grey">Selesaikan Layanan</button>
186 </div>
187
188 </div>
189 </div>
190 <br><br>
191
192 <div class="row text-center border mt-5" id="control"
193 style="background-color: white">
194 <div class="col-3 pt-2">
195 <i class="bi-house-door-fill"></i>
196 <p>Home</p>
197 </div>
198 <div class="col-3 p-2">
199 <i class="bi-search"></i>
200 <p>Cari</p>
200 </div>
201 <div class="col-3 p-2" style="color: #2ABB9B">
202 <i class="bi bi-clock-history"></i></i>
203 <p>Pemesanan</p>
204 </div>
205 <div class="col-3 p-2">
206 <i class="bi-person"></i>
207 <p>Akun</p>
208 </div>
209 </div>
210 </div>
211
212
213 </body>
214
215 </html>
[ARM-IM-008]
Halaman Rumah Sakit
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Halaman Rumah Sakit</title>
9 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
10 rel="stylesheet">
11 <link
12 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min
13 .css" rel="stylesheet"
14
15 integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+r
16 P48ckxlpbzKgwra6" crossorigin="anonymous">
17 <link rel="stylesheet"
18 href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.c
19 ss" />
20 <style>
21 .row {
22 padding: auto;
23 margin: auto;
24
25 }
26
27 .profile-jumbotron {
28 background-color: #2ABB9B;
29 border-radius: 20px;
30 position: relative;
31 width: 95%;
32
33 }
34
35
36 img {
37 height: 100px;
38 width: 100px;
39 }
40
41 #control {
42
43 width: 100%;
44 opacity: 1;
45 border-radius: 0px 0px 20px 20px;
46
47 }
48
49 #control>div {
50 font-size: 1.4rem;
51 color: #cbcbcb;
52 }
53
54 #control>div>p {
55 font-size: 1rem;
56 }
57
58 #frame {
59 width: 450px;
60 border: 1px black solid;
61 padding: 0;
62 padding-top: 10px;
63 border-radius: 20px;
64 }
65
66 .btn {
67 height: 100px;
68 width: 80%;
69 border-radius: 25px;
70 }
71
72 .grey {
73 background-color: #2ABB9B;
74 border: none;
75 color: black;
76 }
77 </style>
78 </head>
79
80 <body>
81 <div class="container-sm mt-3" id="frame">
82
83 <div class="row">
84 <div class="col-1 pt-2"><span class="material-icons">
85 menu
86 </span></div>
87 <div class="col-8">
88 <div class="lead pt-1">Halaman Rumah Sakit</div>
89 </div>
91 <div class="col">
92 <img src="logo.png" alt="Logo Aplikasi" style="width: 70px;height:
93 70px;">
94 </div>
95 </div>
96
97
98 <br>
99 <div class="d-flex container profile-jumbotron pt-3 pb-3 ">
100 <div class="row">
101 <div class="col">
102 <p class="fs-2 fw-bold">Rumah Sakit</p>
103 </div>
104 <div class="col-3"> <img
105 src="http://www.pngall.com/wp-content/uploads/5/Profile-PNG-Clipart.png"
106 class="rounded float-end" alt="Profile Picture"></div>
107 </div>
108 </div>
109
110 <br><br><br>
111 <div class="container">
112 <div class="row">
113 <button type="button" class="btn btn-primary mx-auto grey
114 fs-3">Receive Rekap</button>
115 </div>
116 <br>
117 <div class="row">
118 <button type="button" class="btn btn-primary mx-auto grey
119 fs-3">Evaluate Document</button>
120 </div>
121 <br>
122 <div class="row">
123 <button type="button" class="btn btn-primary mx-auto grey fs-3">Set
124 Service Improvement</button>
125 </div>
126 <br>
127 <div class="row">
128 <button type="button" class="btn btn-danger mx-auto grey
129 fs-3">Logout</button>
130 </div>
131 </div>
132
133 <div class="row text-center border mt-5" id="control"
134 style="background-color: white">
135 <div class="col-3 pt-2" style="color: #2ABB9B">
136 <i class="bi-house-door-fill"></i>
137 <p>Home</p>
138 </div>
139 <div class="col-3 p-2">
140 <i class="bi-search"></i>
141 <p>Cari</p>
142 </div>
143 <div class="col-3 p-2">
144 <i class="bi bi-clock-history"></i></i>
145 <p>Pemesanan</p>
146 </div>
147 <div class="col-3 p-2">
148 <i class="bi-person"></i>
149 <p>Akun</p>
150 </div>
151 </div>
152 </div>
153 </body>
154
155 </html>
[ARM-IM-009]
Halaman Admin
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Halaman Layanan</title>
9 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
10 rel="stylesheet">
11 <link
12 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min
13 .css" rel="stylesheet"
14
15 integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+r
16 P48ckxlpbzKgwra6" crossorigin="anonymous">
17 <link rel="stylesheet"
18 href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.c
19 ss" />
20 <style>
21 .row {
22 padding: auto;
23 margin: auto;
24
25 }
26
27
28
29
30 img {
31 height: 100px;
32 width: 100px;
33 }
34
35 #control {
36
37 width: 100%;
38 opacity: 1;
39 border-radius: 0px 0px 20px 20px;
40
41 }
42
43 #control>div {
44 font-size: 1.4rem;
45 color: #cbcbcb;
46 }
47
48 #control>div>p {
49 font-size: 1rem;
50 }
51
52 #frame {
53
54 width: 450px;
55 border: 1px black solid;
56 padding: 0;
57 padding-top: 10px;
58 border-radius: 20px;
59 }
60
61 .area-box {
62 padding: 10px;
63
64 border: black 1px solid;
65
66 }
67
68 .box {
69 background-color: #c4c4c4;
70 padding: 10px;
71 border-radius: 20px;
72
73 }
74
75 .btn {
76 height: 50px;
77 width: 50%;
78 border-radius: 25px;
79 margin-left: auto;
80 }
81
82 .grey {
83 background-color: #2ABB9B;
84 border: none;
85 color: black;
86 }
87
88 .lead {
89 font-size: normal;
91 }
92
93 .border-spec {
94 border: black 1px solid;
95
96 }
97
98 #pop-up {
99
100 width: 400px;
101 padding: 0;
102 padding-top: 10px;
103 border-radius: 20px;
104
105
106 }
107
108
109
110 .rating {
111 width: 100%;
112 height: 70%;
113 }
114
115 .input-box {
116 border: black 1px solid;
117 margin-bottom: 20px;
118 padding: 10px;
119 }
120 </style>
121 </head>
122
123 <body>
124 <div class="container mx-auto bg-dark" style="position: relative; ">
125 <div class="container" id="pop-up"
126 style="position: absolute; z-index: 2; margin-left: auto;margin-right:
127 auto; left: 0;right: 0;text-align: center; top:100px; ">
128 <div class="row border-spec bg-white">
129 <div class="col-1"><img src="x.svg" style="width: 30px;
130 height:40px;"></div>
131 <div class="col">
132 <div class="lead pt-1 text-center">Rumah Sakit Pelita Harapan
133 Surabaya</div>
134 </div>
135 </div>
136 <div class="row border-spec bg-white">
137 <div class="row"><br></div>
138 <div class="row">
139 <div class="col text-center">
140 <img src="hospital.svg" alt="Foto Rumah Sakit" style="width:
141 50%; height: 100%; ">
142 </div>
143 </div>
144 <div class="row"><br></div>
145 <div class="row">
146 <div class="col d-flex" style="height: 100px;">
147 <img src="star.svg" alt="" class="rating">
148 <img src="star.svg" alt="" class="rating">
149 <img src="star.svg" alt="" class="rating">
150 <img src="star.svg" alt="" class="rating">
151 <img src="star-half.svg" alt="" class="rating">
152 </div>
153 <div class="w-100"></div>
154 <div class="col">
155 <div class="input-box">
156 <div class="lead">
157 Layanan sangat baik, hasil test diberikan dengan cepat,
158 dokter juga ramah dan
159 professional
160 </div>
161 </div>
162 </div>
163 </div>
164 <div class="row mb-3">
165 <button type="button" class="btn btn-primary mx-auto grey
166 fs-3">Submit</button>
167 </div>
168 </div>
169 </div>
170 <div class="container-sm mt-3" id="frame"
171 style="background-color: #C0C0C0; position: absolute; z-index: 1;
172 margin-left: auto; margin-right: auto;left: 0;right: 0;text-align: center;">
173
174 <div class="row">
175 <div class="col-1"><img src="back.svg" style="width: 30px;
176 height:40px;"></div>
177 <div class="col-8">
178 <div class="lead pt-1">Halaman Layanan</div>
179 </div>
180 <div class="col">
181 <img src="logo.png" alt="Logo Aplikasi" style="width: 70px;height:
182 70px;">
183 </div>
184 </div>
185
186
187 <br>
188 <div class="container">
189 <div class="row border-spec">
190 <div class="col-1"><img src="x.svg" style="width: 30px;
191 height:40px;"></div>
192 <div class="col d-flex justify-content-between">
193 <div class="lead pt-1 fw-bold">Detail Pemesanan</div>
194 <div class="lead pt-1">ID : XX-XXXXXXXX</div>
195 </div>
196 </div>
197 <div class="row border-spec">
198 <div class="row">
199 <div class="col">Tempat Pemesanan : RSUD Pelita Harapan
200 Surabaya</div>
201 </div>
202 <div class="row">
203 <div class="col">Tanggal : 25-03-2021</div>
204 </div>
205 <div class="row">
206 <div class="col">Waktu Test : 20.00 WIB</div>
207 </div>
208 <div class="row">
209 <div class="col">Jenis Test : Rapid Test</div>
210 </div>
211 <div class="row">
212 <div class="col">Status : Selesai</div>
213 </div>
214 <div class="row"><br>
215 </div>
216 <div class="row">
217 <div class="fs-4">Detail Hasil Test</div>
218 </div>
219 <div class="row">
220 <div class="col">Swab dan PCR tak terpisahkan dalam metode
221 tes untuk menegakkan diagnosis
222 Covid-19.
223
224 Swab adalah cara untuk memperoleh bahan pemeriksaan (
225 sampel ) . Swab dilakukan pada
226 nasofaring
227 dan atau orofarings. Pengambilan ini dilakukan dengan cara
228 mengusap rongga nasofarings dan
229 atau
230 orofarings dengan menggunakan alat seperti kapas lidi
231 khusus.
232
233 Adapun PCR adalah singkatan dari polymerase chain
234 reaction. PCR merupakan metode pemeriksaan
235 virus SARS Co-2 dengan mendeteksi DNA virus. Uji ini akan
236 didapatkan hasil apakah seseorang
237 positif atau tidak SARS Co-2.
238
239 Dibanding rapid test, pemeriksaan RT-PCR lebih akurat.
240 Metode ini jugalah yang
241 direkomendasikan
242 WHO untuk mendeteksi Covid-19. Namun akurasi ini
243 dibarengi dengan kerumitan proses dan harga
244 alat yang lebih tinggi. Selain itu, proses untuk mengetahui
245 hasilnya lebih lama ketimbang
246 rapid
247 test.</div>
248 </div>
249
250 <div class="row pt-3 pb-3">
251 <button type="button" class="btn btn-success mx-auto
252 grey">Selesaikan Layanan</button>
253 </div>
254
255 </div>
256 </div>
257 <br><br>
258
259 <div class="row text-center border mt-5" id="control"
260 style="background-color: white">
261 <div class="col-3 pt-2">
262 <i class="bi-house-door-fill"></i>
263 <p>Home</p>
264 </div>
265 <div class="col-3 p-2">
266 <i class="bi-search"></i>
267 <p>Cari</p>
268 </div>
269 <div class="col-3 p-2" style="color: #2ABB9B">
270 <i class="bi bi-clock-history"></i></i>
271 <p>Pemesanan</p>
272 </div>
273 <div class="col-3 p-2">
274 <i class="bi-person"></i>
275 <p>Akun</p>
276 </div>
277 </div>
278 </div>
279 </div>
280
281 </body>
282
283 </html>
[DRA-IM-0013]
halaman Pencarian
1 //foto hanya contoh//
2
3 <!DOCTYPE html>
4 <html lang="en" id="home">
5 <head>
6 <meta charset="utf-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge">
8 <meta name="viewport" content="width=device-width, initial-scale=1">
9 <!-- The above 3 meta tags *must* come first in the head; any other head
10 content must come *after* these tags -->
11 <title>Bootstrap 101 Template</title>
12
13 <!-- Bootstrap -->
14 <link rel="stylesheet"
15 href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
16 "
17 integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8
18 xmyTe9GYg1l9a69psu" crossorigin="anonymous">
19
20 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and
media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script
src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script
src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<head>
<title>Pencarian</title>
<style type="text/css">
body {
margin: 20% auto;
padding: 10px;
}
*{
box-sizing: border-box;
}
form.example button:hover {
background: #0b7dda;
}
/* Clear floats */
form.example::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="search">
<!-- Load icon library -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-aweso
me.min.css">
[DRA-IM-0014]
halaman Tempat Test
1 <!doctype html>
2 <html lang="en" id="home">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <!-- The above 3 meta tags *must* come first in the head; any other head
8 content must come *after* these tags -->
9 <title>Halaman Tempat Test</title>
10
11 <!-- Bootstrap -->
12 <link rel="stylesheet"
13 href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
14 "
15 integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8
16 xmyTe9GYg1l9a69psu" crossorigin="anonymous">
17
18 </head>
19 <html, body>
20 <!-- navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a href="#LOGO" class="navbar-brand page-scroll">LOGO</a>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<div class="searchh">
<input type="text" class="search" placeholder="Search..">
<i class="bi bi-search"></i>
</div>
</div>
</div>
</nav>
<!-- akhir navbar -->
<div class="form">
<br>
<img src="" alt="FOTO TOKO">
<div class="desc">
<p>KEYWORD:</p>
<p>KUOTA</p>
<p>ADDRESS</p>
</div>
<br>
<hr>
<br>
<img src="" alt="FOTO TOKO">
<input type="text" class="isi">
<div class="desc">
<p>KEYWORD:</p>
<p>KUOTA</p>
<p>ADDRESS</p>
</div>
<br>
<hr>
<br>
<img src="" alt="FOTO TOKO">
<div class="desc">
<p>KEYWORD:</p>
<p>KUOTA</p>
<p>ADDRESS</p>
</div>
<br>
<hr>
</body>
</html>
--CSS
.search {
float: right;
width: 80%;
}
.searchh{
padding: 1.5%;
}
.isi {
float: right;
width: 80%;
border: none;
}
body {
background-color: #006064;
padding: 5%
}
.user {
float: right;
font-weight: bold;
}
.form {
padding-top: 10%;
}
.box {
margin-left: auto;
margin-right: auto;
padding: 50%
max-width: 100%;
height: auto;
}
.judul {
font-size: 100%;
font-weight: bold;
}
.desc {
diplay: inline
}
[DRA-IM-0015]
halamanAdmin
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Halaman Admin</title>
9 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
10 rel="stylesheet">
11 <link
12 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min
13 .css" rel="stylesheet"
14
15 integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+r
16 P48ckxlpbzKgwra6" crossorigin="anonymous">
17 <link rel="stylesheet"
18 href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.cs
19 s" />
20 <style>
.row {
padding: auto;
margin: auto;
.profile-jumbotron {
background-color: #2ABB9B;
border-radius: 20px;
position: relative;
width: 95%;
img {
height: 100px;
width: 100px;
}
#control {
width: 100%;
opacity: 1;
border-radius: 0px 0px 20px 20px;
#control>div {
font-size: 1.4rem;
color: #cbcbcb;
}
#control>div>p {
font-size: 1rem;
}
#frame {
width: 450px;
border: 1px black solid;
padding: 0;
padding-top: 10px;
border-radius: 20px;
}
.btn {
height: 100px;
width: 80%;
border-radius: 25px;
}
.grey {
background-color: #2ABB9B;
border: none;
color: black;
}
.jumboo {
font-size: 100%;
}
</style>
</head>
<body>
<div class="container-sm mt-3" id="frame">
<div class="row">
<div class="col-1 pt-2"><span class="material-icons">
menu
</span></div>
<div class="col-8">
<div class="lead pt-1">Halaman Admin </div>
</div>
<div class="col">
<img src="logo.png" alt="Logo Aplikasi" style="width: 70px;height:
70px;">
</div>
</div>
<br>
<div class="d-flex container profile-jumbotron pt-3 pb-3 ">
<div class="row">
<div class="col jumboo">
<p class="fs-2 fw-bold">Administrator</p>
</div>
<div class="col-3"> <img
src="http://www.pngall.com/wp-content/uploads/5/Profile-PNG-Clipart.png"
class="rounded float-end" alt="Profile Picture"></div>
</div>
</div>
<br><br><br>
<div class="container">
<div class="row">
<button type="button" class="btn btn-primary mx-auto grey
fs-3">Save Newest Profile Data</button>
</div>
<br>
<div class="row">
<button type="button" class="btn btn-primary mx-auto grey
fs-3">Save Newest Place Data</button>
</div>
<br>
<div class="row">
<button type="button" class="btn btn-danger mx-auto grey
fs-3">Logout</button>
</div>
</div>
<div class="row text-center border mt-5" id="control"
style="background-color: white">
<div class="col-3 pt-2" style="color: #2ABB9B">
<i class="bi-house-door-fill"></i>
<p>Home</p>
</div>
<div class="col-3 p-2">
<i class="bi-search"></i>
<p>Cari</p>
</div>
<div class="col-3 p-2">
<i class="bi bi-clock-history"></i></i>
<p>Pemesanan</p>
</div>
<div class="col-3 p-2">
<i class="bi-person"></i>
<p>Akun</p>
</div>
</div>
</div>
</body>
</html>
[DRA-IM-0016]
halaman Form Data
1 <!DOCTYPE html>
2 <html lang="en" id="home">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <!-- The above 3 meta tags *must* come first in the head; any other head
8 content must come *after* these tags -->
9 <title>FORM RUMAH SAKIT</title>
10
11 <!-- Bootstrap -->
12 <link rel="stylesheet"
13 href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
14 "
15
16 integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8
17 xmyTe9GYg1l9a69psu" crossorigin="anonymous">
18
19 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and
20 media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script
src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script
src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<body>
<div class="user">
hello, <br>
#username
</div>
<div class="form">
<br>
<label for="fname">NAMA RS</label>
<input type="text" class="isi">
<br>
<hr>
<br>
<label for="fname">KUOTA</label>
<input type="text" class="isi">
<br>
<hr>
<br>
<label for="fname">ALAMAT</label>
<input type="text" class="isi">
<br>
<hr>
<br>
<label for="fname">INFORMASI LAINNYA</label>
<input type="text" class="isi">
<br>
<hr>
<div class="box">
<a class="button" href="#popup1" </a> <svg
xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-plus-square-dotted" viewBox="0 0 16 16">
<path d="M2.5 0c-.166 0-.33.016-.487.048l.194.98A1.51 1.51 0 0 1 2.5
1h.458V0H2.5zm2.292 0h-.917v1h.917V0zm1.833 0h-.917v1h.917V0zm1.833
0h-.916v1h.916V0zm1.834 0h-.917v1h.917V0zm1.833
0h-.917v1h.917V0zM13.5 0h-.458v1h.458c.1 0
.199.01.293.029l.194-.981A2.51 2.51 0 0 0 13.5 0zm2.079 1.11a2.511 2.511 0
0 0-.69-.689l-.556.831c.164.11.305.251.415.415l.83-.556zM1.11.421a2.511
2.511 0 0 0-.689.69l.831.556c.11-.164.251-.305.415-.415L1.11.422zM16
2.5c0-.166-.016-.33-.048-.487l-.98.194c.018.094.028.192.028.293v.458h1V2.5
zM.048 2.013A2.51 2.51 0 0 0 0
2.5v.458h1V2.5c0-.1.01-.199.029-.293l-.981-.194zM0
3.875v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0
5.708v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0
7.542v.916h1v-.916H0zm15 .916h1v-.916h-1v.916zM0
9.375v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16
.916v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16 .917v.458c0
.166.016.33.048.487l.98-.194A1.51 1.51 0 0 1 1 13.5v-.458H0zm16
.458v-.458h-1v.458c0
.1-.01.199-.029.293l.981.194c.032-.158.048-.32.048-.487zM.421
14.89c.183.272.417.506.69.689l.556-.831a1.51 1.51 0 0
1-.415-.415l-.83.556zm14.469.689c.272-.183.506-.417.689-.69l-.831-.556c-.11.
164-.251.305-.415.415l.556.83zm-12.877.373c.158.032.32.048.487.048h.458v
-1H2.5c-.1 0-.199-.01-.293-.029l-.194.981zM13.5 16c.166 0
.33-.016.487-.048l-.194-.98A1.51 1.51 0 0 1 13.5 15h-.458v1h.458zm-9.625
0h.917v-1h-.917v1zm1.833
0h.917v-1h-.917v1zm1.834-1v1h.916v-1h-.916zm1.833
1h.917v-1h-.917v1zm1.833 0h.917v-1h-.917v1zM8.5 4.5a.5.5 0 0 0-1
0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
</svg>
<p>
INPUT PHOTO
</p>
</div>
<!-- Optional JavaScript; choose one of the two! -->
--CSS
.isi {
float: right;
width: 65%;
border: none;
}
body {
background-color: #006064;
padding: 5%
}
.user {
float: right;
font-weight: bold;
}
.form {
padding: 10%;
}
.box {
margin-left: auto;
margin-right: auto;
padding: 50%
max-width: 100%;
height: auto;
}
[DRA-IM-0017]
halamanProfile
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Halaman Profile</title>
9 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
10 rel="stylesheet">
11 <link
12 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min
13 .css" rel="stylesheet"
14
15 integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+r
16 P48ckxlpbzKgwra6" crossorigin="anonymous">
17 <link rel="stylesheet"
18 href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.cs
19 s" />
20
<body>
</body>
</html>
--CSS
.isi {
float: right;
width: 80%;
border: none;
}
body {
background-color: #006064;
padding: 5%
}
.user {
float: right;
font-weight: bold;
}
/*
.form {
padding: 10%;
} */
.box {
margin-left: auto;
margin-right: auto;
padding: 50%
max-width: 100%;
height: auto;
}
.judul {
font-size: 100%;
font-weight: bold;
}
.acc {
padding-top: 5%;
padding-down: 5%;
color: grey;
font-size: 120%;
}
.tanggal {
float: right;
border: none;
}
.drop {
padding: 5%;
}
.inputdata{
float: right;
width: 30%;
}
footer p {
color: #aaa;
font-size: 1em;
}
.submit {
width: 100%;
}
Setiap anggota melakukan validasi kesesuaian antara kode sumber antarmuka dengan sketsa
modul yang dimplemetasikan berdasarkan format tabel berikut ini.
1 UI-001 FIR-IM-001 √
2 UI-002 FIR-IM-002 √
3 UI-003 FIR-IM-003 √
4 UI-004 FIR-IM-004 √
5 UI-005 FIR-IM-005 √
6 UI-006 SUO-IM-006 √
7 UI-007 SUO-IM-007 √
8 UI-008 SUO-IM-008 √
9 UI-009 SUO-IM-009 √
10 UI-010 SUO-IM-010 √
11 UI-011 SUO-IM-011 √
12 UI-012 SUO-IM-012 √
13 UI-013 DRA-IM-13 √
14 UI-014 DRA-IM-14 √
15 UI-015 DRA-IM-15 √
16 UI-016 DRA-IM-16 √
17 UI-017 DRA-IM-17 √
Tugas IV: Traceability Matrix SRS-SDD
Validasi dokumen SRS-SDD mulai dari kebutuhan sampai dengan implementasi kode dengan
mengikuti format tabel traceability matrix dibawah ini.