ANALISIS SISTEM DARI WEB

QURBANCARE.ORG

LAPORAN TUGAS AKHIR SEMESTER

Sebagai Syarat Untuk Melanjutkan Tugas Akhir Semester Pada Program
Studi Teknik Informatika

Disusun Oleh:

IKHSAN ADI PRAYOGO : 20210410700008

IRSYADI HANIF ELNUR : 20210410700015
SANDHI ALFIANDA GHIFARI : 20210410700017
MUHAMMAD FADHIL HABIBIE : 20210410700011
M. ALBI AKBAR FILAYATI : 20210410700018
MUHAMMAD ABIS REZA : 22040760001

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JAKARTA
2023
 ABSTRACT

AQL Qurban Care is a program from the Ar-Rahman Quranic Learning Center
(AQL) which serves the provision and delivery of qurban animals based on a
website so that anyone who is going to make qurban can do it more easily, more
efficiently, but without compromising on quality. This program can be accessed
on the qurbancare.org website where it provides features for selecting qurban
animal packages, information on qurban procedures & conditions, qurban
documentation galleries, and so on. From the analysis that has been carried out,
several obstacles were found, namely in terms of selecting a qurban package
which is complicated in the form filling process and has not been integrated with
any bank or payment method so that the payment process takes quite a long time.
With this it is necessary to develop these constraints and can be illustrated by
Hierarchy Input Process Output (HIPO) and Unified Modeling Language (UML)
diagrams, and improvement solutions in the form of depictions using the Unified
Modeling Language (UML) and mockups of the qurban package selection menu
contained in AQL Qurban Care website.

Keywords: Ar-Rahman Quranic Learning Center (AQL), qurbancare.org, Unified

Modelling Language (UML), Hierarchy Input Output Process (HIPO)

i
 ABSTRAK

AQL Qurban Care merupakan suatu program dari Ar-Rahman Quranic Learning
Center (AQL) yang melayani penyediaan dan pengiriman hewan qurban yang
berbasis website sehingga bagi siapapun yang akan berqurban dapat
melakukannya dengan lebih mudah, lebih efisien, namun tidak mengesampingkan
kualitas. Program ini dapat diakses pada website qurbancare.org dimana di
dalamnya menyediakan fitur pemilihan paket hewan qurban, informasi tata cara &
syarat berqurban, galeri dokumentasi qurban, dan lain sebagainya. Dari analisis
yang sudah dilakukan ditemukan beberapa kendala yaitu dalam hal pemilihan
paket qurban yang rumit pada proses pengisian formulir dan belum terintegrasi
dengan bank atau metode pembayaran apapun sehingga proses pembayarannya
membutuhkan waktu yang cukup lama. Dengan ini perlu adanya pengembangan
dari kendala tersebut dan dapat digambarkan dengan diagram Hierarchy Input
Proses Output (HIPO) dan Unified Modeling Language (UML), dan solusi
perbaikan berupa penggambaran dengan Unified Modeling Language (UML) dan
mockup terhadap menu pemilihan paket qurban yang terdapat pada web AQL
Qurban Care.

Kata kunci: Ar-Rahman Quranic Learning Center (AQL), qurbancare.org, Unified

Modelling Language (UML), Hierarchy Input Proses Output (HIPO)

ii
 DAFTAR ISI

ABSTRACT ............................................................................................................. i
DAFTAR ISI .......................................................................................................... iii
DAFTAR TABLE.................................................................................................... v
DAFTAR GAMBAR ............................................................................................. vi
DAFTAR LAMPIRAN ......................................................................................... vii
BAB I ...................................................................................................................... 1
PENDAHULUAN .................................................................................................. 1
1.1 Latar Belakang .............................................................................................. 1
1.2 Identifikasi Masalah ...................................................................................... 1
1.3 Rumusan Masalah ......................................................................................... 1
1.4 Batasan Masalah ............................................................................................ 2
1.5 Tujuan Penelitian ........................................................................................... 2
1.6 Manfaat Penelitian ......................................................................................... 2
1.7 Metodologi Penelitian ................................................................................... 2
1.8 Sistematika Penulisan .................................................................................... 3
BAB II ..................................................................................................................... 5
LANDASAN TEORI .............................................................................................. 5
2.1. Analisis Sistem ............................................................................................. 5
2.2. Unified Modelling Language (UML) ........................................................... 6
2.2.1 Use Case Digram .................................................................................... 6
2.2.2 Activity Diagram ..................................................................................... 7
2.3 Digram HIPO (Hierarchy Plus Input Output) ............................................... 8
2.4 User Interface .............................................................................................. 10
2.5 Wireframe .................................................................................................... 10
BAB III ..................................................................................................................11
GAMBARAN UMUM INSTANSI........................................................................11
3.1 Profil Instansi ...............................................................................................11
3.2 Sejarah Instansi .............................................................................................11
3.3 Visi dan Misi.................................................................................................11
3.4 Struktur Organisasi ...................................................................................... 12

iii
BAB IV ................................................................................................................. 13
ANALISA DAN HASIL ....................................................................................... 13
4.1 Analisa Sistem berjalan ............................................................................... 13
4.1.1 Tampilan Website qurbancare.org ......................................................... 13
4.1.2 Prosedur Ssistem Berjalan .................................................................... 16
4.1.3 Diagram HIPO Sistem Berjalan ........................................................... 17
4.1.4 Use Case Diagram Sistem Berjalan ..................................................... 17
4.1.5 Activity Diagram ................................................................................... 19
4.2 Analisis Permasalahan ............................................................................... 19
4.3 Alternatif Permasalahan............................................................................... 20
4.3.1 Use Case Diagram Usulan Pemilihan Paket Hewan Qurban ............... 21
4.3.2 Use Case Diagram Usulan Pembayaran ............................................... 21
4.3.3 Activity Diagram Usulan Pemilihan Paket Hewan Qurban .................. 22
4.3.4 Activity Diagram Usulan Pembayaran .................................................. 23
4.3.5 Rancangan pemecahan masalah pada tampilan Pemilihan Paket
Hewan Qurban ............................................................................................... 24
4.3.6 Rancangan pemecahan masalah pada tampilan Pembayan ............. 25
BAB V ................................................................................................................... 27
PENUTUP ............................................................................................................. 27
5.1 Kesimpulan .................................................................................................. 27
5.2 Saran ............................................................................................................ 27
DAFTAR PUSTAKA ............................................................................................ 28
LAMPIRAN .......................................................................................................... 29

iv
 DAFTAR TABLE

1. Tabel 2.1 Simbol Use Case Diagram (Hari Purwanto, 2019.)………………..7

2. Tabel 2.2 Simbol pada Activity Diagram (Rosa A. dan Shalahuddin, M,
2018)………………………………………………………………….............8

v
 DAFTAR GAMBAR

1. Gambar 2.1 Contoh Diagram HIPO (Haryanto, 2020)……………………….9

2. Gambar 3.1 Struktur Organisasi AQL……………………………………….12
3. Gambar 4.01 Tampilan halaman utama……………………………………...13
4. Gambar 4.02 Tampilan halaman artikel……………………………………..14
5. Gambar 4.03 Tampilah halaman galery……………………………………..14
6. Gambar 4.04 Tampilan halaman konsultasi…………………………………15
7. Gambar 4.05 Tampilan halaman tentang kami………………………………15
8. Gambar 4.06 Tampilan halaman program…………………………………...16
9. Gambar 4.07 Diagram HIPO Sistem Berjalan………………………………17
10. Gambar 4.08 Use Case Diagram Sistem Berjalan…………………………..18
11. Gambar 4.09 Activity Diagram Sistem Berjalan………………………...19
12. Gambar 4.10 Tampilan Pilihan Paket Hewan Qurban………………………20
13. Gambar 4.11 Use Case Diagram Usulan Pemilihan Paket Hewan
Qurban……………………………………………………………………….21
14. Gambar 4.12 Use Case Diagram Usulan Pembayaran……………………...21
15. Gambar 4.13 Activity Diagram Usulan Pemilihan Paket Hewan
Qurban……………………………………………………………………….22
16. Gambar 4.14 Activity Diagram Usulan Pembayaran………………………..23
17. Gambar 4.15 Tampilan Wireframe pilih paket qurban……………………...24
18. Gambar 4.16 Rancangan usulan tampilan pemilihan paket hewan qurban...24
19. Gambar 4.17 Tampilan wireframe pemesanan……………………………....25
20. Gambar 4.18 Tampilan wireframe pembayaran……………………………..25
21. Gambar 4.19 Rancangan usulan tampilan metode pembayaran……………26
22. Gambar 4.20 Rancangan usulan tampilan pembayaran…………………….26

vi
 DAFTAR LAMPIRAN

Gambar 6.1 Usia responden……………………………………………………...29

Gambar 6.2 Kunjungan responden……………………………………………….29
Gambar 6.3 Pertanyaan 1……………………………………………………...…29
Gambar 6.4 Pertanyaan 2……………………………………………………...…30
Gambar 6.5 Pertanyaan 3………………………………………………………...30
Gambar 6.6 Pertanyaan 4………………………………………………………...30
Gambar 6.7 Pertanyaan 5……………………………………………………...…31
Gambar 6.8 Pertanyaan 6………………………………………………………...31
Gambar 6.9 Pertanyaan 7………………………………………...………………31
Gambar 6.10 Pertanyaan 8………………………………………….……………32
Gambar 6.11 Pertanyaan 9……………………………………………….………32
Gambar 6.12 Pertanyaan 10……………………………...………………………32
Gambar 6.13 Saran dan Masukan…………………………………..……………33
Gambar 6.14 Saran dan masukan……………………………………………...…33

vii
 BAB I
PENDAHULUAN

1.1 Latar Belakang

Qurban merupakan ibadah dalam agama Islam yang merujuk pada
penyembelihan hewan seperti sapi, unta, kambing dan domba pada saat
perayaan Idul Adha. Dalam tradisi qurban, umat Muslim yang mampu secara
finansial dianjurkan untuk menyembelih hewan dan membagikan dagingnya
kepada orang-orang yang membutuhkan. Qurban dilakukan sebagai bentuk
pengabdian dan ketaatan kepada Allah SWT.
Qurbancare.org merupakan sebuah website yang mewadahi pequrban
untuk melaksanakan qurban secara online dengan mudah dan cepat, pequrban
hanya perlu memilih paket qurban dan membayar secara non tunai tanpa
harus mencari hewan, menyembelih dan membagikannya secara manual.
Namun web tersebut masih ditemukan permasalahan pada proses pemilihan
paket qurban dan sistem pembayaran di dalam website tersebut.

1.2 Identifikasi Masalah

Permasalahan yang ditemukan pada website qurbancare.org dapat
membuat pengguna kesulitan dalam melakukan transaksi. Atas latar belakang
dan permasalahan yang ada, maka penulis mengidentifikasi masalah sebagai
berikut:
1. Rumitnya proses pada pemilihan paket qurban
2. Sistem pembayaran yang lambat karena harus dilakukan melalui aplikasi
pihak ketiga (WhatsApp)

1.3 Rumusan Masalah

Berdasakan latar belakang dan identifikasi masalah tersebut, maka
dapat dibuat sebuah rumusan masalah yaitu:
1. Bagaimana menyederhanakan proses pemilihan paket qurban?

1
 2. Bagaimana membuat sistem pembayaran langsung pada website tanpa
melalui WhatsApp?

1.4 Batasan Masalah

Dalam hal ini penulis membatasi permasalahan dengan memfokuskan
pada:
1. proses pada pemilihan paket qurban
2. Sistem pembayaran yang mudah, cepat dan aman tanpa melalui
WhatsApp

1.5 Tujuan Penelitian

Penelitian ini bermanfaat untuk menyederhanakan proses pada
pemilihan paket qurban dan membuat sistem pembayaran langsung pada
website.

1.6 Manfaat Penelitian

Memudahkan para pequrban untuk berqurban secara online melalui
website dengan mudah, cepat dan aman tanpa harus berbelit-belit, serta
mendukung pelaksanaan qurban yang lebih modern.

1.7 Metodologi Penelitian

Dalam analisis dan pengembangan sistem menggunakan metodologi
design thinking pada website qurbancare.org. Langkah-langkahnya antara
lain:
1. Emphatise
Pada tahap ini tim penulis melakukan observasi langsung dan survei
kebutuhan pengguna dengan kuesioner untuk merancang solusi yang
tepat sasaran.
2. Define
Berdasarkan penemuan dari tahap empati, tim penulis mendefinisikan
tantangan tersebut sebagai berikut:

2
 a. rumitnya proses pemilihan paket qurban
b. sistem pembayaran yang berbelit-belit.
3. Ideate
Tim penulis melakukan diskusi untuk menemukan solusi pada
permasalahan yang dihadapi, solusi tersebut antara lain :
a. Membuat tampilan proses pemilihan paket qurban yang lebih
sederhana.
b. Membuat sistem pembayaran langsung pada website.
4. Prototipe
Tim penulis membuat prototipe tampilan paket qurban dan sistem
pembayaran langsung pada website, prototipe ini mencakup gambar
hewan, teks dan button.

1.8 Sistematika Penulisan

Dalam penyusunan hasil analisis website diperlukan penulisan yang
sistematis untuk memudahkan pembaca mengambil kesimpulan dan
memahami isi dari hasil analisis yang telah dibuat secara keseluruhan. Hasil
analisis ini dibagi atas 5 bab dimana masing-masing bab akan membahas
sebagai berikut:
BAB I PENDAHULUAN
Bab ini membahas tentang latar belakang masalah, identifikasi masalah,
rumusan masalah, tujuan penelitian, manfaat penelitian, metodologi penelitian dan
sistematika penulisan.
BAB II LANDASAN TEORI
Bab ini berisikan landasan teori-teori yang dibutuhkan pada hasil analisis
website ini, yaitu konsep dasar sistem, konsep dasar sistem, konsep dasar
informasi, analisis sistem dan teori-teori lainnya.
BAB III GAMBARAN UMUM PERUSAHAAN
Bab ini menjelaskan tentang profil instansi, visi misi instansi, dan bagan
struktur organisasi instansi.

3
BAB IV HASIL DAN PEMBAHASAN
Bab ini menjelaskan tentang sistem yang telah digunakan, analisis
permasalahan dan alternatif pemecahan masalah yang diusulkan.
BAB V PENUTUP
Bab ini berisi kesimpulan dan saran berdasarkan uraian dari bab
sebelumnya.

4
 BAB II
LANDASAN TEORI

2.1. Analisis Sistem

Analisis dan perancangan sistem merupakan langkah awal dalam
pengembangan sistem untuk menentukan kebutuhan, permasalah yang dapat
diatasi dari adanya sebuah sistem yang akan dibangun, dan sistem
seperti apa yang akan dibuat (Azis, Pribadi, & Nurcahya, 2020). Analisis
sistem adalah sebuah istilah yang secara kolektif mendeskripsikan fase-fase
awal pengembangan sistem. Analisis sistem adalah teknik pemecahan
masalah yang menguraikan bagian-bagian komponen dengan mempelajari
seberapa bagus bagian-bagian komponen tersebut bekerja dan berinteraksi
untuk mencapai tujuan mereka (Syarif & Nugraha, 2020).
Langkah – Langkah sistem
● Identify, Yaitu, mengidentifikasi atau mendeteksi masalah adalah
langkah pertama dalam fase analisis sistem. Masalah dapat diidentifikasi
sebagai pertanyaan yang perlu dipecahkan. Masalah ini menyebabkan
tujuan dari sistem tidak dapat dicapai.
Tugas yang harus dilakukan dalam identifikasi masalah:
a. Mengidentifikasi penyebab masalah
b. Mengidentifikasi titik keputusan
c. Mengidentifikasi personil – personil kunci
● Understand, yaitu memahami kerja dari sistem yang ada.
Langkah ini dapat dilakukan dengan mempelajari secara rinci bagaimana
sistem yang ada beroperasi. Beberapa tugas yang perlu dilakukan yaitu :
a. Memahami kerja sistem yang ada
b. Merencanakan jadwal penelitian
c. Mengatur jadwal wawancara
d. Mengatur jadwal observasi
e. Mengatur jadwal pengambilan sampel
f. Membuat penugasan penelitian

5
 ● Analyze, yaitu menganalisis sistem, Langkah ini dilakukan berdasarkan
data yang telah diperoleh dari hasil yang telah dilakukan.
● Report, yaitu membuat laporan hasil analisis.

2.2. Unified Modelling Language (UML)

UML adalah salah satu standar bahasa yang banyak digunakan
didunia industri untuk mendefinisikan requirement, membuat analisis dan
desain, serta menggambarkan arsitektur dalam pemrograman berorientasi
objek (Lidiawati, Jaka, & Joni, 2018). UML merupakan bahasa visual untuk
pemodelan dan komunikasi mengenai sebuah sistem dengan menggunakan
diagram dan teks-teks pendukung”. Beberapa pemodelan yang termasuk
kedalam pemodelan UML seperti use case diagram, class diagram, activity
diagram, dan sequence diagram (Syarif & Nugraha, 2020)

2.2.1 Use Case Digram

Use Case atau diagram use case merupakan model dari perilaku
sistem informasi yang akan dibuat. Use case menggambarkan interaksi satu
atau lebih aktor dengan sistem informasi yang muncul. Dapat dikatakan
bahwa use case digunakan untuk mengetahui fungsi-fungsi apa saja yang
tersedia dalam sistem informasi dan siapa saja yang diperbolehkan untuk
menggunakan fungsi-fungsi tersebut. Simbol dalam use case diagram.

6
 Tabel 2.1 Simbol Use Case Diagram (Hari Purwanto, 2019.)

2.2.2 Activity Diagram

Diagram aktivitas atau activity diagram menggambarkan aliran kerja
atau aktivitas dari sebuah sistem atau proses bisnis (Lidiawati, Jaka, & Joni,
2018). Simbol-simbol yang digunakan dalam activity diagram. Adapun
simbol-simbol pada activity diagram.

7
Tabel 2.2 Simbol pada Activity Diagram (Rosa A. dan Shalahuddin, M, 2018)

2.3 Digram HIPO (Hierarchy Plus Input Output)

HIPO adalah sebenarnya adalah alat dokumentasi program. Akan
tetapi sekarang, banyak digunakan sebagai alat desain dan teknik
dokumentasi dalam siklus pengembangan sistem yang berbasis pada fungsi,
yaitu tiap-tiap modul di dalam sistem digambarkan oleh fungsi utamanya.
HIPO dapat digunakan sebagai alat pengembangan sistem dan teknik
dokumentasi program. HIPO dirancang dan dikembangkan secara khusus
untuk menggambarkan suatu struktur bertingkat guna memahami fungsi dari
modul-modul suatu sistem, HIPO juga dirancang untuk menggambarkan
modul-modul yang harus diselesaikan oleh pemrogram (Muqorobin, Rais, &
Efendi, 2021). Sasaran HIPO adalah :
a. Untuk menyediakan suatu struktur guna memahami fungsi dari sistem.
b. Untuk lebih menekankan fungsi-fungsi yang harus diselesaikan
oleh program.

8
c. Untuk menyediakan penjelasan dari input dan output pada masing -
masing tiap tingkatan dari HIPO.
Untuk menyediakan output yang tepat dan sesuai kebutuhan
pengguna ada beberapa diagram dalam paket HIPO:
a. Visual Table of Contents (VTOC)
Diagram ini menggambarkan hubungan dari fungsi-fungsi di
sistem secara berjenjang.
b. Overview Diagram
Diagram ini menggambarkan hubungan antara input, proses dan
output. Elemen data yang akan digunakan bagian proses ditampilkan di
area input. Bagian proses berisi beberapa langkah yang menjelaskan cara
kerja fungsi. Bagian output berisi data yang dibuat atau diubah dalam
langkah-langkah proses.
c. Detail Diagram
Diagram ini merupakan diagram tingkatan paling rendah di
diagram HIPO. Diagram ini berisi dengan elemen-elemen dasar dari
paket yang menggambarkan secara rinci kerja dari fungsi.

Gambar 2.1 Contoh Diagram HIPO (Haryanto, 2020)

9
 Gambar di atas adalah contoh diagram HIPO VTOC (visual table of
contents) yaitu menggambarkan fungsi – fungsi secara berjenjang. Pada
gambar diatas menunjukan ada 6 fungsi di dalam sistem. Fungsi 1.0, 2.0, dan
3.0 adalah fungsi dengan tingkatan tertinggi, fungsi 1.1 dan fungsi 1.2 adalah
fungsi di bawah fungsi 1.0, sedangkan fungsi 1.1.1 dan 1.2.1 adalah fungsi di
bawah 2.2.

2.4 User Interface

User Interface adalah input dan output yang langsung melibatkan
sistem pengguna akhir. Antarmuka pengguna dapat digunakan langsung oleh
pengguna internal atau eksternal sistem. Desain dari user interface sendiri
bisa bervariasi banyak tergantung pada faktor-faktor seperti tujuan
antarmuka, karakteristik pengguna, dan karakteristik perangkat interface
tertentu (Fernando, 2020). Sebuah sistem atau aplikasi yang dapat dikatakan
mudah dalam penggunaannya, ketika menggunakan tampilan yang baik juga
mudah dimengerti oleh pengguna dari segi fitur tampilan lainnya pada
aplikasi itu. Pengguna akan memberikan pendapat yang bersifat membangun
dan juga memberikan feedback akan aplikasi yang digunakan dan hal ini akan
mempermudah penggunanya dalam proses yang dilakukan (Buana & Sari,
2022).

2.5 Wireframe
“Wireframe adalah kerangka dasar atau blueprint dari suatu halaman
aplikasi yang akan dibangun oleh pengembang aplikasi. Secara garis besar di
dalam wireframe ini menempatkan elemen-elemen penting dari halaman
aplikasi tersebut pada posisinya masing-masing seperti banner, body content,
menu link, kolom, footer maupun fitur-fitur lainnya yang ada dalam aplikasi
nantinya.” (Anggitama, Tolle, & Az-Zahra, 2018). Secara visual tampilan dari
wireframe ini hanya terdiri dari kotak dan garis yang menandakan posisi dari
masing-masing elemen dari layout halaman aplikasi.

10
 BAB III
GAMBARAN UMUM INSTANSI

3.1 Profil Instansi

AQL Qurban Care merupakan salah satu unit kerja organisasi AQL
yang melaksanakan berbagai program Qurban, dalam program tersebut calon
kostumer diberikan pelayanan dengan alur memilih hewan qurban yang di
inginkan, lalu melakukan pembayaran, dan AQL memproses kegiatan qurban
pada hewan yang telah dipilih dan dibayarkan oleh kostumer, setelah proses
berqurban selesai, kostumer akan mendapatkan laporan proses dan hasil
qurban tersebut.

3.2 Sejarah Instansi

AQL hadir sejak 2011 dan telah konsisten melaksanakan program
Qurban yang dikelola secara baik. Namun, sebagai lembaga khusus yang
professional, program Qurban ini diberikan tema “Tebar Qurbanku Terbaik”
yang dinaungi oleh salah satu unit kerja AQL yaitu Laznas AQL. Saat tahun
2014, “Tebar Qurbanku Terbaik” bertransformasi menjadi “Tebar Qurban ke
Dunia Islam” dengan harapan tidak hanya di Indonesia namun di beberapa
negara Islam dapat menikmati hidangan daging Qurban. Setelah 6 tahun,
program Qurban ini semakin meluaskan manfaatnya. Pada tahun 2020,
program ini dialihfungksikan ke unit kerja AQL yang lain yang diberi nama
unit AQL Qurban Care.

3.3 Visi dan Misi

Adapun visi dan misi dari perusahaan ini adalah sebagai berikut:
1. Visi
Visi AQL adalah Optimalisasi Dampak Sosial dan Ekonomi dalam Ibadah
Qurban.
2. Misi
a. Meningkatkan Kualitas dan Kuantitas Ibadah Qurban Umat.

11
 b. Mengoptimalkan Dampak Sosial dan Ekonomi dalam Ibadah Qurban
bagi Kesejahteraan Umat.
c. Memperluas Peranan Dakwah Ibadah Qurban di tingkat Nasional dan
Internasional.

3.4 Struktur Organisasi

Gambar 3.1 Struktur Organisasi AQL

12
 BAB IV
ANALISA DAN HASIL

4.1 Analisa Sistem berjalan

Analisis sistem berjalan pada penulisan ini ada pada Website
qurbancare.org yang memiliki tujuan untuk membantu umat muslim dalam
menjalankan ibadah qurban dengan terbaik. Berikut adalah analisis sistem
berjalan pada website qurbancare.org:

4.1.1 Tampilan Website qurbancare.org

Qurbancare.org adalah sebuah website yang menyediakan informasi
dan layanan terkait dengan praktik qurban atau qurban hewan selama perayaan
Idul Adha dalam tradisi Islam. Situs web ini memiliki tujuan untuk
memudahkan orang-orang yang ingin melakukan qurban dengan menyediakan
platform yang memfasilitasi proses tersebut. Tidak hanya qurban website
qurbancare.org juga menyediakan layanan untuk orang-orang bersedekah dan
aqikah.

1. Tampilan Halaman Utama (Dashboard) Website qurbancare.org

Gambar 4.01 Tampilan halaman utama

Gambar 4.01 adalah tampilan dashboard yang terdapat menu
beranda, artikel, galery, konsultasi, tentang kami, dan program.

13
2. Tampilan Halaman Artikel

Gambar 4.02 Tampilan halaman artikel

Gambar 4.02adalah tampilan gambar untuk membaca atau
mengetahui perihal tentang berqurban, bersedekah, dan aqikah. Pada
halaman ini juga terdapat kolom perncarian untuk judul atau kata kunci
untuk artikel yang ingin dicari.

3. Tampilan Halaman Galery

Gambar 4.03 Tampilah halaman galery

Gambar 4.03 adalah tampilan halaman galery yang menampilkan
foto-foto dokumentasi dari pelaksanaan program qurban yang telah
dilaksanakan didalam negri maupun yang diluar negri.

14
4. Tampilan Halaman Konsultasi

Gambar 4.04 Tampilan halaman konsultasi

Gambar 4.04 adalah tampilan gambar dari halaman konsultasi
untuk mengajukan pertanyaan perihal qurban, sedekah, dan aqikah.
Didalamnya perlu memasukkan nama, email, nomor Whatsapp dan
pertanyaan. Dan terdapat tombol submit untuk mengirim pertanyaan
kepada admin dari qurbancare.org.

5. Tampilan Halaman Tentang Kami

Gambar 4.05 Tampilan halaman tentang kami

Gambar 4.05 adalah tampilan gambar dari halaman tentang AQL
Qurban Care, yang berisikan informasi tentang AQL Qurban Care, visi
misi, keunggulan Aql Qurban Care dan program-program yang
disediakan oleh Aql Qurban Care.

15
 6. Tampilan Halaman Program

Gambar 4.06 Tampilan halaman program

Gambar 4.06 adalah tampilan dari halaman program, yang
menampilan program- program yang tersedia pada AQL Qurban Care
beserta penjelasan tentang programnya, dari halaman ini juga bisa
diarahkan kepada tahap selanjutnya untuk melakukan administrasi atau
pendaftaran untuk berqurban, sedekah, dan juga aqikah.

4.1.2 Prosedur Ssistem Berjalan

Prosedur sistem berjalan pada website qurbancare.org adalah sebagai berikut:
1. Prosedur Untuk Berqurban
Setelah masuk ke website qurbancare.org pada halaman utama
pengguna bisa untuk menekan tombol “Qurban Sekarang” untuk
memulai administrasi berqurban, selanjutnya tekan tombol “Mulai
Berqurban” dan pengguna akan dialihkan pada halaman pemilihan paket
hewan qurban, selanjutnya tekan tombol “Pilih Hewan Qurban” dan
pengguna akan lanjut ke tahap pemilihan hewan dan juga memasukkan
nama orang yang berqurban.
2. Prosedur Memasukkan Data Peng-Qurban
Setelah memilih paket hewan qurban dengan menekan tombol
“Selanjutnya” pengguna akan mengisi data pemesan, yang nantinya akan
dikonfirmasi oleh admin dari Aql Qurban Care.

16
4.1.3 Diagram HIPO Sistem Berjalan

Gambar 4.07 Diagram HIPO Sistem Berjalan

Gambar 4.07 menjelaskan susunan diagram HIPO sistem berjalan
website qurbancare.org yang dibatasi pada penjabaran menu beranda (home),
artikel, galery, konsultasi, tentang kami dan program, mulai dari tingkatan
tertinggi yaitu website qurbancare.org, terdapat 6 menu pada tingkatan
dibawahnya, pada menu artikel memiliki submenu cari artikel dan list artikel,
pada menu galery memiliki submenu list dokumentasi yang terbagi lagi pada
submenu qurban luar negri dan qurban dalam negri, pada menu konsultasi
terdapat form pertanyaan, pada menu tentang kami berisi submenu visi misi,
keunggulan, dan program, dan pada menu program memiliki submenu qurban
jelajahi negri, sedekah aqikah, sedekah abon, dan teknak berdaya.

4.1.4 Use Case Diagram Sistem Berjalan

Use case diagram mendeskripsikan interaksi antara aktor dengan
sistem, sedangkan actor adalah sebuah peran yang dimainkan oleh pengguna
dalam interaksinya dengan sistem. Use Case Diagram dalam penulisan ini
menjelaskan interaksi yang dapat dilakukan oleh user kepada website
qurbancare.org.

17
 Gambar 4.08 Use Case Diagram Sistem Berjalan
Pada gambar 4.08 user pada use case diatas adalah orang yang akan
berqurban yang menggunakan website qurbancare.org sebagai jembatan
untuk berqurban.

Spesifikasi use case:

a. Use case : mengakses website qurbancare.org
Actor : orang yang berqurban
Pre-condition : pengguna mengakses halaman situs
https://qurbancare.org
Post-condotion : pengguna sudah masuk kehalaman utama dan
berinteraksi dengan website
Description : pengguna perlu untuk mengakses situs qurbancare.org
untuk dapat menggunakan website qurbancare.org

b. Use case : transaksi

Actor : orang yang berqurban
Pre-condition : pengguna memilih paket qurban dan mengisi form
pequrban
Post-condotion : pengguna telah memilih paket hewan qurban dan
memilih metode pembayaran
Description : pengguna memilih paket hewan qurban dan
mengisi data pada form pendaftaran, dan juga memilih metode
pembayaran.

18
 4.1.5 Activity Diagram
Diagram aktivitas adalah diagram yang memperlihatkan aliran dari
suatu aktivitas ke aktivitas lainnya dalam suatu sistem. Activity Diagram
dalam penulisan ini menjelaskan aktivitas-aktivitas yang dapat dilakukan
oleh pengguna dalam website qurbancare.org.

Gambar 4.09 Activity Diagram Sistem Berjalan

Pada gambar 4.09 pequrban bisa untuk memilih paket hewan
qurban yang tersedia pada AQL Qurban Care, dan juga pengisian data
pada form pequrban, setelah dikonfirmasi pesanannya maka selanjutnya
pequrban akan memilih metode pembayaran dengan diakhri dengan
pendataan penerimaan qurban.

4.2 Analisis Permasalahan

Pada website qurbancare.org, pequrban rumit atau panjang dalam
megakses pemilihan paket hewan qurban, dengan menampilkan semua
pilihan hewan tanpa dikelompokkan sesuai dengan paketnya, dan juga lambat
dan kurang efisiennya sistem pembayaran.

19
 Gambar 4.10 Tampilan Pilihan Paket Hewan Qurban
Pada gambar 4.10 yaitu, pengguna tidah dapat memilih lansung paket
hewan qurbannya dengan meng “klik” kolom pilihan. Namun, pengguna akan
diarahkan pada tombol “pilih hewan qurban” yang mengharuskan pengguna
untuk melewati tahapan panjang untuk memilih hewan qurban.

4.3 Alternatif Permasalahan

Terdapat 2 alternatif atau solusi yang di tawarkan pada website
qurbancare.org:
1. Menyederhanakan User Interface pada paket qurban dan formular
pequrban.
2. Membuat sistem pembayaran lansung pada website.

20
 4.3.1 Use Case Diagram Usulan Pemilihan Paket Hewan Qurban

Gambar 4.11 Use Case Diagram Usulan Pemilihan Paket Hewan Qurban
Pada gambar 4.11 use case diagram usulan pemilihan paket hewan
qurban adalah pengguna atau orang yang akan berkurban akan memilih paket
hewan qurban yang sudah disediakan, menentukan jumlah dan siapa
pequrban dan melakukan pemesanan paket hewat qurban.

4.3.2 Use Case Diagram Usulan Pembayaran

Gambar 4.12 Use Case Diagram Usulan Pembayaran

21
 Pada gambar 4.12 use case diagram usulan pembayaran adalah
pengguna atau pequrban akan memilih metode pembayaran dari pemesanan
paket qurban.

4.3.3 Activity Diagram Usulan Pemilihan Paket Hewan Qurban

Gambar 4.13 Activity Diagram Usulan Pemilihan Paket Hewan Qurban

Pada gambar 4.13 menjelaskan aktivitas pengguna dalam memilih
paket hewan qurban, memilih jumlah hewan beserta pequrbannya, setelah
pengguna mengisi pemilihan paket, selanjutnya pengguna akan mengisi form
pemesanan yang kemudian sistem akan menyimpan data pengguna atau
pequrban.

22
4.3.4 Activity Diagram Usulan Pembayaran

Gambar 4.14 Activity Diagram Usulan Pembayaran

Pada gambar 4.14 menjelaskan aktivitas pengguna dalam memilih
metode pembayaran, melakukan pembayaran sesuai dengan total bayar
pemesanan, yang selanjutnya akan siverifikasi oleh sistem, jika verifikasi
gagal sistem akan mengalihkan ke pemilihan metode pembayaran, dan jika
verifikasi sukses akan ada pemilihan cetak struk atau tidak.

23
 4.3.5 Rancangan pemecahan masalah pada tampilan Pemilihan Paket
Hewan Qurban
Alternatif pemecahan masalah pada tampilan detail pemilihan paket
hewan qurban dengan menggunakan tools figma dan wireframe berikut
adalah tautan dari rancangan usulan:
https://www.figma.com/proto/f9JYhfEi2BymGPwVHyQoH7/UI-
Qurban-Care?type=design&node-id=1-4&t=a65MMYgtCE0puQWq-
1&scaling=scale-down&page-id=0%3A1&starting-point-node-
id=1%3A4&show-proto-sidebar=1&mode=design

Gambar 4.15 Tampilan Wireframe pilih paket qurban

Gambar 4.16 Rancangan usulan tampilan pemilihan paket hewan qurban

24
 Masalah pada tampilan menu pemilihan paket hewan qurban adalah
panjang dan rumitnya pemilihan hewan qurban sehingga menu pemilihan
paket tidak efisien. Sehingga penulis memberikan alternatif pemecahan
masalah yaitu dengan memperbaiki alur pengisian paket menjadi pengisian
paket yang lansung dalam satu halaman, pequrban bisa lansung melihat dan
mengisi jumlah hewan qurban yang akan di pilih.

4.3.6 Rancangan pemecahan masalah pada tampilan Pembayan

Gambar 4.17 Tampilan wireframe pemesanan

Gambar 4.18 Tampilan wireframe pembayaran

25
 Gambar 4.19 Rancangan usulan tampilan pemesanan

Gambar 4.20 Rancangan usulan tampilan pembayaran

Masalah pada pembayaran web qurbancare.org adalah pembayaran
yang belum secara lansung melalui website dan masih menggunakan pihak
ketiga (Whatsapp) dan respon dari pihak AQL Qurban Care yang cukup lama
karena semua pesanan dialihkan ke Whatsapp, Alternatif pemecahan masalah
yaitu dengan menambahkan menu pembayaran lansung dari website dan
pequrban bisa lansung membayar melalui ATM ataupun Mobile Banking.

26
 BAB V
PENUTUP

5.1 Kesimpulan
Setelah melakukan penelitian dari sistem yang dipakai oleh
qurbancare.org dalam pemilihan paket serta pembayaran hewan qurban,
kesimpulan yang dapat diambil ialah:
1. Analisis Sistem Informasi Website qurbacare.org dengan membuat desain
User Interface menggunakan tools Figma.
2. Dalam sistem memiliki 2 actor yaitu user sebagai pembeli yang ingin
membeli ataupun membayar hewan qurban dan penjual sebagai wadah
yang menyediakan pembelian paket hewan qurban serta menerima
pembayaran dan memberikan verifikasi bahwa qurban tersebut sudah
melewati beberapa proses yang dilakukan hingga selesai sehingga bisa
diterima oleh pembeli hewan qurban tersebut.

5.2 Saran
Saran penulis agar analisis website qurbancare.org ini dapat
diterapkan oleh penjual hewan qurban tersebut agar pembuatan website
didalam proses pembelian tidak terlalu banyak menggunakan slide-slide yang
ada serta sistem pembayaran yang harus melalui aplikasi dan mungkin
kedepannya agar lebih memudahkan pembeli untuk memilih dan membeli
qurban di dalam proses website tersebut yang tidak terlalu rumit
menggunakannya dan lebih memudahkan pembeli untuk memesan dan
membayar qurban yang disediakan oleh website tersebut.

27
 DAFTAR PUSTAKA

Azis, N., Pribadi, G., & Nurcahya, M. S. (2020). Analisa dan Perancangan
Aplikasi Pembelajaran Bahasa Inggris Dasar Berbasis Android. Jurnal
IKRA-ITH Informatika, 1-5.
Buana, W., & Sari, B. N. (2022). Analisis User Interface Meningkatkan
Pengalaman Pengguna. Journal of Computer and Information Technology,
91-97.
Fernando, F. (2020). PERANCANGAN USER INTERFACE (UI) & USER
EXPERIENCE (UX). Jurnal Tanra, 101-111.
Lidiawati, J. S., & J. I. (2018). ANALISIS DAN PERANCANGAN SISTEM
INFORMASI REKAM MEDIS PASIEN UMUM PADA . Jurnal IPSIKOM,
vol 6.
Lidiawati, Suwita, J., & Iskandar, J. (2018). ANALISIS DAN PERANCANGAN
SISTEM INFORMASI REKAM MEDIS PASIEN UMUM PADA .
JURNAL IPSIKOM, 1-18.
Muqorobin, Rais, N. A., & Efendi, T. F. (2021). APLIKASI E-VOTING
PEMILIHAN KETUA BEM DI INSTITUT TEKNOLOGI. Proceeding
Seminar Nasional & Call For Papers, 309-320.
Syarif, M., & Nugraha, W. (2020). PEMODELAN DIAGRAM UML SISTEM
PEMBAYARAN. Jurnal Teknik Informatika Kaputama (JTIK), 64-70.
Purwanto, H. (2020). Rancangan Sistem informasi penjualan Barang Koperasi
XYZ. JURNAL SISTEM INFORMASI UNIVERSITAS SURYADARMA,
6(1). https://doi.org/10.35968/jsi.v6i1.278
Anggitama, D. R., Tolk, H., & Az-Zahro, H. M. (2018. Desember). Evaluasi
danPerancangan User Interfeze Untuk Meningkatkan User
ExperienceMenggumakan Metode Human Centered Design dan Hewistic
Evaluationada Aplikasi EzyPay. Jurnal Pengembangan Teknologi Informasi
danJimu Komputer, pp. 5152-6159.

28
 LAMPIRAN

Lampiran Hasil Kuisioner.

Gambar 6.1 Usia responden

Gambar 6.2 Kunjungan responden

Gambar 6.3 Pertanyaan 1

29
Gambar 6.4 Pertanyaan 2

Gambar 6.5 Pertanyaan 3

Gambar 6.6 Pertanyaan 4

30
Gambar 6.7 Pertanyaan 5

Gambar 6.8 Pertanyaan 6

Gambar 6.9 Pertanyaan 7

31
Gambar 6.10 Pertanyaan 8

Gambar 6.11 Pertanyaan 9

Gambar 6.12 Pertanyaan 10

32
Gambar 6.13 Saran dan Masukan

33
Gambar 6.14 Saran dan masukan

34