LAPORAN PROJECT

APIKASI MANAJEMEN KEUANGAN DAN DAN TRANSAKSI

WEB DAN MOBILE

Disusun oleh :

ADINDA EKA MAYANG WIJAYANTI E41210730

MUHAMMAD MAULANA MALIK IBRAHIM E41210689
MUHAMMAD ADI SAPUTRO E41210759
ANDRE KHARISMA DWI THANSA E41210734

GOLONGAN B

PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN TEKNOLOGI INFORMASI
POLITEKNIK NEGERI JEMBER
2021
RINGKASAN

i
 KATA PENGANTAR

Puji syukur kepada Allah SWT, karena atas nikmat dan karunia-Nya sehingga Kami
dapat menyelesaikan laporan pratikum yang berjudul PEMBUATAN APLIKASI POINT OF
SALE TOKO KELONTONG BERBASIS DESKTOP “SMART POS“ laporan ini disusun
sebagai penyelesaian pratikum mini project di semester 3 pada Program Studi Teknik
Informatika Jurusan Teknologi Informasi di POLITEKNIK NEGERI JEMBER.

Kami menyadari selama menyusun laporan ini, penulis telah banyak menerima
bantuan dan sumbangan pemikiran dari berbagai pihak. Pada kesempatan ini Kami ingin
menyampaikan rasa terimakasih kepada pihak yang telah membantu dalam menyelesaikan
penyusunan laporan ini. Ucapan terimakasih ini Kami sampaikan kepada:

1. Bapak / Ibu dosen pengampu mata kuliah Workshop Pengembangan Perangkat Lunak pada
Program studi Teknik Informatika yang telah meluangkan waktunya dalam pelaksanaan
bimbingan, pengarahan, dan dorongan untuk menyelesaikan laporan ini.

2. Teman-teman angkatan 2021 dan Kelompok kami yang selama ini membantu dalam
banyak hal dan semua pihak yang telah banyak membantu.

Kami menyadari sepenuhnya, bahwa dalam penyusunan laporan ini masih banyak
kekurangan baik dalam penulisan maupun penyajian materinya, sehingga kami selaku
penyusun sangat mengharapkan kritik dan saran yang membangun dari pembaca sekalian.
Akhir kata semoga laporan praktikum ini dapat memberikan manfaat untuk kelompok kami
khususnya dan masyarakat.

Jember, 25 Desember 2022

Penyusun

ii
DAFTAR ISI

iii
DAFTAR TABEL

iv
 DAFTAR GAMBAR
Gambar 2. 1 Use Case............................................................................................................................2
Gambar 2. 2 ERD..................................................................................................................................2
Gambar 3. 1 Storyboard Web Dinda......................................................................................................2
Gambar 3. 2 Lanjutan Storyboard Web Dinda.......................................................................................2
Gambar 3. 3 Lanjutan Storyboard Web Dinda.......................................................................................2
Gambar 3. 4 Storyboard Mobile Dinda..................................................................................................2
Gambar 3. 5 Storyboard Web Malik......................................................................................................2
Gambar 3. 6 Lanjutan Storyboard Web Malik.......................................................................................2
Gambar 3. 7 Storyboard Mobile Malik..................................................................................................2

v
 BAB I
PENDAHULUAN
I.1 Latar Belakang
Sistem informasi merupakan serangkaian subsistem informasi yang menyeluruh
dan terkoordinasi secara rasional terpadu yang mampu mentransformasi data sehingga
menjadi informasi lewat serangkaian cara yang menuntut adanya ketelitian dan
ketepat waktu. Sebagai bentuk hasil dari kemajuan teknologi informasi perkembangan
sistem informasi ini sudah banyak diimplementasikan disemua bidang kegiatan, baik
di bidang bisnis penyedia jasa, kebutuhan sistem informasi yang terkomputerisasi
semakin terasa dibutuhkan, pada bidang bisnis kepuasan pelanggan dengan pelayanan
yang diberikan merupakan modal utama, selain dari kualitas pemberian pelayanan
jasanya sendiri.

Dalam dunia otomotif, kegiatan bisnis berupa pelayanan perawatan mobil dan
motor seringkali disebut dengan salon mobil atau salon motor. Bisnis salon mobil atau
motor bukan hanya bertumpu pada kegiatan pelayanan perawatan mobil dan motor
atau jasa perawatan mobil dan motor ada faktor – faktor tertentu yang memang
mampu mendukung kegiatan bisnis, yang memiliki fasilitas tempat yang cukup
nyaman, pelayanan kepada pelanggan yang baik dan memuaskan, dan juga untuk
mempertahankan kelangsungan bisnis yang harus ditunjang dengan sistem, baik
pembukuan atau pencatatan ataupun dari bidang manajemen.

Dalam kegiatan seluruh transaksinya masih dicatat secara manual. Pada transaksi
pelayanan servis mobil dan motor harus mengantri, tidak diservis pada saat itu,
membuat pelanggan kecewa, disamping itu stok barang pada salon mobil dan motor
hanya dicatat pada buku sehingga tidak dapat dikontrol untuk jumlah barang yang
masih atau yang sudah habis. Salon mobil dan motor Nb-Carwash adalah tempat
perawatan motor dan mobil,mencuci motor dan mobil yang dibutuhkan oleh
pelanggan. Saat ini persaingan salon motor dan mobil bukan hanya dipengaruhi oleh
factor harga, melainkan juga mengarah pada persaingan dalam memberi pelayanan
yang terbaik pada setiap pelanggan. Digudang salon mobil dan motor Nb-Carwash
terdapat system pengolahan data. Pengolahan data salon mobil dan motor Nb-
Carwash masih menggunakan manual. Pembuatan laporan transaksi yang dapat

1
 dimanipulasikan transaksi oleh admin dan karyawan, maka diperlukan sebuah system
pada salon mobil dan motor Nb-Carwash.

Dengan pertimbangan hal-hal diatas maka penyusun merasa dibutuhkan adanya

system informasi yang berfungsi sebagai informasi pembookingan, pencatatan
pemesanan, pencatatan persediaan barang sampai pengolahan data dan pelayanan
mengusulkan penelitian untuk membangun sebuah system informasi yang berjudul
“APLIKASI BERBASIS WEB DAN MOBILE YANG DIGUNAKAN UNTUK
MENDATA PEMASUKKAN DAN PEMBAGIAN KEUNTUNGAN UNTUK
KARYAWAN,OWNER DAN UNTUK BIAYA OPERASIONAL

I.2 Rumusan Masalah

Berdasarkan uraian dari latar belakang diatas maka didapatkan suatu rumusan
masalah yaitu : “Rancang Bangun Sistem Informasi Pengolahan Data Pada Salon
Mobil Dan Motor Nb-Carwash Berbasis Web dan Mobile.”

I.3 Ruang Lingkup Penelitian

a. Waktu dan Tempat Penelitian
Penelitian dilakukan pada bulan….bertempat dijalan…..

b. Batasan Masalah

Dengan mempertimbangkan berbagai keterbatasan waktu,tenaga,serta

kemampuan, maka penulis perlu membuat pembatasan masalah,sehingga
permasalahan yang dibahas tidak menyimpang pada tujuan semula. Oleh karena hal
tersebut dalam pembahasan in penulis hanya membatasi dalam pembuatan system
informasi yang meliputi informasi pengolahan data jasa servis, pembookingan, serta
melakukan transaksi.

I.4 Tujuan dan Manfaat Penelitian

Adapun tujuan yang ingin dicapai dari Sistem Informasi Salon Mobil dan
Motor pada Salon Mobil dan Motor Nb-Carwash merupakan membuat suatu
perancangan dan system informasi salon mobil dan motor sehingga dapat
memudahkan karyawan dalam pengolahan data pelayanan dan menghasilkan suatu
informasi yang berguna bagi customer maupun pemilik dalam memperoleh berbagai
laporan sehingga dapat membantu dalam pengambilan keputusan.

2
 BAB II
RANCANGAN SISTEM
II.1 Use Case Diagram

II.1.1 Use Case Diagram adalah salah satu jenis diagram UML (United Modelling
Language) yang menggunakan hubungan interaksi antara system dan actor. Use
Case dapat mendeskripsikan tipe interaksi antara si pengguna system dengan
sistemnya. Adapun fungsi dari use case diagram antara lain :
a) Berguna memperlihatkan proses aktivitas secara urut dalam system.
b) Mampu menggambarkan proses bisnis bahkan menampilkan urutan aktivitas
pada sebuah proses
c) Sebagai brigde atau jembatan antara pembuat dengan konsumen untuk
mendeskripsikan sebuah system.
II.1.2 Manfaat dari Use Case Diagram antara lain :
a) Menggunakannya sebagai kebutuhan validasi
b) Menjadi gambaran interface dari sebuah system karena setiap system yang
dibangun haruslah memili interface.
c) Memudahkan proses komunikasi antara dominan expert dan end user.
II.1.3 Komponen Use Case
a) Sistem : Sebuah system digambarkan kedalam bentuk persegi. Fungsi untuk
membatasi Use Case dengan interaksi dari luar system.
b) Actor : Fungsi actor menjelaskan siapa yang berinteraksi dengan system. Actor
akan memberikan kontrol terhadap system, namun hanya memberikan gambaran
mengenai hubungan dengan system.
c) Use Case : Komponen gambaran fungsional dalam system. Sehingga konsumen
maupun pembuat saling mengenal alur system yang akan dibuat. Use Case Diagram
yang dibuat oleh kelompok kami

3
 Gambar 2. 1 Use Case

Penjelasan singkat :

Dapat dilihat pada use case diatas, terdapat 3 aktor yang berbeda. Yaitu : Admin,
Customer, dan Karyawan

1. Admin

 Admin mengakses aplikasi berbasis web

 Admin melakukan login untuk memulai aplikasi
 Admin bisa melihat data pada dashboard
 Admin bisa mengelola data pengeluaran
 Admin bisa melihat dan mengelola data transaksi
 Admin bisa melihat data reservasi yang dilakukan customer
 Admin bisa mengelola jumlah keuntungan
 Admin bisa mengelola data tarif
 Admin bisa mengelola data karyawan
 Admin bisa mengelola dan membuat laporan pada data rekapan

2. Customer

 Customer bisa melakukan reservasi pada halaman web yang sudah disediakan
tanpa melakukan login terlebih dahulu

4
 3. Karyawan

 Karyawan melakukan login ke aplikasi mobile

 Karyawan bisa menambah transaksi pelanggan
 Karyawan bisa memverifikasi data reservasi pelanggan yang sudah
melakukan reservasi sebelumnya

II.2 Entity Relation Diagram (ERD) Database

II.2.1 Entity Relation Diagram (ERD) adalah diagram yang digunakan perancangan
suatu database dan menujukkan relasi antar objek atau entitas beserta atribu-
atributnya secara detail. Fungsi ERD adalah untuk memodelkan struktur dan
hubungan antar data yang relatif kompleks.
II.2.2 Komponen Umum Penyusun ERD anatara lain :
a) Entity (Entitas) : Sebuah objek berwujud nyata yang dapat dengan objek sesuatu
yang benar-benar atau dapat bersifat abstrak atau konkret.
b) Atribut (field) : Digunakan untuk mendeskripsikan karakteristik dari suatu
entitas.
c) Relasi (Relation) : Hubungan antar entitas yang berasal dari himpunan entitas
yang berbeda.
d) Garis : Dalam ERD sendiri garis digunakan untuk menunjukkan huubungan
entitas dalam ERD. Selain menjadi penghubung, garis juga dapat menujukkan alur
atau flow dari suatu ERD. Hasil ERD yang telah dibuat oleh kelompok kami.

Gambar 2. 2 ERD

5
II.3 Application Programing Interface (API)

II.3.1 API merupakan singkatan dari Application Programing Inteface . API

merupakan interface yang dapat menghubungkan satu aplikasi dengan aplikasi lain.
Dengan kata lain API merupakan perantara antar berbagai aplikasi berbeda.
Manfaat API antara lain :
a) Memudahkan membangun aplikasi yang fungsional
b) Pengembangan aplikasi menjadi lebih efisien
c) Meringankan beban server
II.3.2 Arsitektur API
a) RPC : Teknologi untuk membuat komunikasi antara client side dan server side
bisa dilakukan dengan konsep sederhana. RPC memiliki dua jenis yaitu XML-RPC
dan JSON-RPC. Sesuai dengan Namanya XML-RPC menggunakan formal XML
digunakan untuk media perpindahan data. Sehingga JSON-RPC menggunakan
JSON digunakan untuk perpindahan data.
b) SOAP : Simple Object Acces Protocol (SOAP) merupakan jenis API yang
menggunakan XML (Extensible Markup Language) yang memungkinkan semua
data disimpan dalam dokumen.
c) REST : Representational State Tranfer merupakan arsitektur API yang
menggunakan JSON sebagai bentuk datanya sehingga lebih ringan.

II.4 PhpMyAdmin
PhpMyAdmin adalah sebuah aplikasi open source berbasis World Wide Web yang
ditulis dalam bentuk Bahasa Pemrograman PHP yang digunakan untuk menangani
administrasi database MySQL melalui jaringan local maupun internet. PhpMyAdmin
berfungsi sebagai pengelola basis data (database), PhpMyAdmin mendukung berbagai
operasi MySQL, diantaranya (mengelola basis data, table-tabel, bidang (field), relasi
(relations), indeks, pengguna (user), perijinan (permissions), dan lainnya). Pengguna
yang ingin menggunakan web pengelola database ini cukup mengakses link
http://localhost/phpmyadmin. PhpMyAdmin menyediakan layanan untuk pengguna
agar dapat mengubah,menghapus,import, serta export.
Perbedaan PhpMyAdmin dengan MySQL terletak pada fungsi. PhpMyAdmin

6
 merupakan alat untuk memudahkan dalam mengoperasikan database MySQL,
PhpMyAdmin sendiri digunakan sebagai alat untuk mengelola/ mengatur data pada
MySQL. Sedangkan,MySQL adalah database tempat penyimpanan data.

II.5 Database
Database adalah kumpulan data yang disimpan dengan system tertentu, dan saling
berhubungan, sehingga dapat dikelola dengan mudah. Database penting untuk
mengatur data yang jumlahnya banyak, dan selalu bertambah. Sebagai contoh
program website, aplikasi dan lainnya. Katakanlah anda sedang membangun website
toko online. Tentunya anda akan memiliki banyak data,seperti gambar
produk,deksripsi produk,informasi harga dan lainnya. Tanpa database,data tersebut
hanya akan tersimpan pada computer saja dan tidak bisa diakses oleh konsumen.
Atau,konsumen harus mengakses data dari computer anda dulu secara langsung
(Wijayanti, 2021)
Fungsi database adalah untuk menghindari data ganda (multi ganda) yang
tersimpan. Sebuah database management system (DBMS) dapat diatur agar dapat
mengenali duplikasi data Ketika diinput,menglompokkan data dan informasi,
memudahkan dalam mengenali data, memudahkan proses akses menyimpan, akses
pembaruan,dan akses penghapusan data, menjadi alternatif terkait masalah
penyimpanan ruang dalam sebuah aplikasi, menjaga kualitas data yang diakses sesuai
value yang ada, menunjang kinerja aplikasi yang memerlukan penyimpanan data.

II.6 Visual Studio Code

Visual Code adalah code editor gratis yang bisa dijalankan di perangkat
desktop berbasis windows,linux.MacOS. Visual Code bisa dipakai untuk membuat
dan mengedit source code berbagai Bahasa pemrograman misalnya seperti
javascript,typescript,dan Node Js. Berdasarkan survey dari Stack Overflow, Visual
Studio Code merupakan editor terpopuler di kalangan developer professional. Dari
21% aplikasi text editor saingannya,Visual Studio Code berada diperingkat satu
dengan presentase user mencapai 71,07%. Visual Studio Code juga sangat ringan dan
mudah Ketika dipakai sehingga pengguna tidak terlalu membutuhkan perangkat
berspesifikasi tinggi. Selain itu,Visual Studio Code menawarkan ekstensi dan
ekosistem yang cukup luas. Hal ini membuatnya memiliki kompabilitas tinggi dengan
Bahasa atau runtime environment lain, diantaranya termasuk Bahasa pemrograman
Python,PHP,.NET dan Java.

7
II.7 Xampp
XAMPP adalah sebuah aplikasi web server instan dan lengkap dikarenakan
segala yang anda butuhkan untuk membuat sebuah situs web dengan Content
Management System(Joomla) bisa dicoba di dalam aplikasi ini. XAMPP adalah
sebuah paket installer AMP (Apache, MySQL, dan Php) yang sangat mudah untuk
diaplikasikan dalam komputer anda yang belum memiliki server untuk dapat melihat
situs yang anda buat menggunakan bahasa server dan database server tersebut (Azura
2018).

II.8 Flutter
Flutter adalah SDK untuk pengembangan aplikasi mobile dengan kinerja
tinggi,aplikasi untuk iOS dan android dari satu codebase (basis code) yang dibuat oleh
Google dengan lisensi open source. Tujuannya adalah memungkinkan pengembang
untuk menghadirkan aplikasi berkinerja tinggi. Yang terasa alami pada platform yang
berbeda. Untuk membuat aplikasi Flutter diperlukan untuk mengerti Bahasa Dart.
Dart merupakan Bahasa pemrograman yang dikembangkan oleh Google untuk
kebutuhan umum (general-purpose programming language). Dart bisa digunakan
untuk membuat aplikasi android,front-end web, loT,backend (CLI) dan Game. Dart
merupakan Bahasa pemrograman tersebut termasuk kedalam Bahasa pemrograman
bertipe dinamis. Dart mudah digunakan dalam pengembangan aplikasi modern dan
memiliki implementasi berkinerja tinggi serta dapat digunakan sebelum dikompilasi.

8
 BAB III
METODE PENELITIAN
III.1 Understanding
Tujuan dari tahap ini adalah untuk Memahami Masalah Utama dari
client/pengguna serta menggali informasi kebutuhan pengguna sedetail-detailnya.
Poin yang dibutuhkan adalah proses mengidentifikasi: Siapa nama mitra tersebur?;
Siapa saja yang menggunakan aplikasi tersebut?; Apa yang dibutuhkan oleh mitra
tersebut?; Apa permasalahan dari usaha tersebut sehingga ingin dibuatkan aplikasi?;
Desain yang diinginkan seperti apa? Dapat melibatkan Ahli/Narasumber/Sprint
Master seperti Dosen dan client. Maka hasil Understanding dari kami adalah sebagai
berikut:

1. Menetapkan judul untuk aplikasi yakni “Nb-Carwash”

2. Admin/owner,Karyawan dan customer/pelanggan yang dapat memakai aplikasi ini

3. Mitra tersebut membutuhkan aplikasi yang bisa mempermudah dalam hal

mengelola admistrasi usahanya.

4. Permasalahan dalam mitra tersebut meliputi

a) Pencatatan transaksi di usaha tersebut masih dilakukan secara manual

b) Pendataan karyawan dan rekapan juga dilakukan secara manual

c) Pembagian komisi/hasil atau gaji juga masih dilakukan secara manual

5. Untuk desain,mitra tidak menetapkan apapun. Jadi,untuk desainnya bisa

disesuaikan dari tim kami.

III.2 Diverge
Pada tahap ini, semua anggota wajib mengeluarkan seluruh ide, mulai dari ide
kecil sampai besar berdasarkan hasil analisa di hari pertama (understanding).
Selanjutnya masing-masing anggota membuat sketsa solusi untuk permasalahan
tersebut dengan mengikuti aturan-aturan Sprint. Anggota tim diberikan kebebasan dan
berhak mendapatkan kesetaraan memberikan ide. Diharapkan muncul inovasi (ide
baru) yang membedakan dengan kompetitor. Berikut hasil Diverge masing masing
anggota:
1. Ide dari Adinda Eka Mayang Wijayanti

9
 Gambar 3. 1 Storyboard Web Dinda

Gambar 3. 2 Lanjutan Storyboard Web Dinda

Gambar 3. 3 Lanjutan Storyboard Web Dinda

Gambar 3. 4 Storyboard Mobile Dinda

10
2. Ide dari Muhammad Maulana Malik Ibrahim

Gambar 3. 5 Storyboard Web Malik

Gambar 3. 6 Lanjutan Storyboard Web Malik

11
 Gambar 3. 7 Storyboard Mobile Malik

3. Ide dari Muhammad Adi Saputro

4. Ide dari Andre Kharisma Dwi Thansa

12
13
III.3 Dicide
Pada tahap ini, setiap ide dalam bentuk sketsa yang telah dibuat di masing-
masing anggota tim pada hari kedua wajib dipresentasikan oleh masing-masing
pemilik ide. Pada saat presentasi anggota tim lain harus menyimak dengan seksama
dan tidak diperbolehkan mengkritik/mencela ide rekannya, harus mengedepankan
sikap saling menghormati. Selanjutnya setelah semua anggota tim presentasi
kemudian dilakukan voting (pemilihan) ide terbaik untuk diimplementasikan. Diakhiri
dengan membuat storyboard dari ide yang terpilih. Berikut storyboard yang telah
dipilih yang dapat dilihat dari Gambar

III.4 Prototype
Pada tahap ini, kegiatan yang dilakukan adalah membuat mock-up
(prototype/purwarupa). Sebuah gambaran user interface, desain ini memuat fungsi-
fungsi apa saja yang akan dibuat dalam sistem informasi masing-masing tim, agar ide
yang diusulkan dapat divisualisasikan dengan baik. Mock up dibangun berdasarkan
storyboard yang telah dibuat sebelumnya. Tampilkan semua fitur-fitur yang akan
dimiliki sistem/aplikasi. Fokus pada fungsi bukan “mempercantik” tampilan. Salah
satu contoh fungsi yang harus dibuat, misalkan dalam sistem informasi yang dibangun
ada menu login, maka ketika fitur/menu login tersebut di klik akan menuju halaman
baru untuk memasukan username dan password. Tim dapat memanfaatkan beberapa
aplikasi untuk membuat mock-up, seperti: microsoft power point, canva, mockup
builder, Adobe XD dan lain-lainnya. Berikut link hasil mockup kelompok kami:

14
 https://www.figma.com/file/oTa6AllX4dBLiFepUYPgEh/NB-Carwash?node-
id=0%3A1&t=pexn7oVexHBY9FJA-0.

III.5 Validate
Pada tahap ini, saatnya tim mendemonstrasikan (menunjukkan dan
mempraktikan) prototype yang telah dibuat kepada pengguna sesungguhnya diluar
anggota tim pengembang. Tim dapat memilih calon pengguna yang paling relevan
dengan permasalahan. Contoh jika sistem yang akan dibangun mengenai Sistem
informasi Akademik sebuah sekolah, Maka calon pengguna yang paling tepat adalah
Guru/kepala sekolah/admin sekolah dan mungkin siswa. Dalam tahapan ini, sekaligus
tim harus bisa memperoleh masukan, keinginan-keinginan pengguna (yang mungkin
belum ada dalam prototype). Feedback dari calon pengguna akan sangat membantu di
dalam penyempurnaan fungsi yang akan dibangun.

15
 BAB IV
HASIL PENGUJIAN
IV.1 Struktur Table Database

IV.1.1 Desain Database

IV.1.2 Struktur Tabel Database Nb-Carwash

IV.2 Hasil (Form Web and Mobile,OOP dan Trigger)

IV.2.1 Form Web

Gambar…..Tampilan Halaman Login

Gambar….Tampilan Halaman Dashboard

16
 Gambar….Tampilan Halaman Data Pengeluaran

3)Tampilan Halaman Transaksi

Halamman Transaksi merupakan halaman tampilan untuk menginput data transaksi dan
menghapus data transaksi
Gambar….Tampilan Halaman Reservasi
Gambar….Tampilan Halaman Tarif
5) Tampilan Halaman Tarif
Halaman Tarif merupakan tampilan halaman untuk mengubah atau mengedit data yang
diambil dari data transaksi sebeumnya

17
Gambar…..Tampilan Halaman Jumlah Keuntungan
Gambar…..Tampilan Halaman Karyawan

Gambar……Tampilan Halaman Data Rekapan

18
IV.2.2 Form Mobile
1) Tampilan Halaman Splash Screen
Tampilan Splash Screen merupakan layer awal yang dibuka sebelum
aplikasi dijalankan.

Gambar……….Tampilan Awal

2) Tampilan Halaman Login

Halaman Login merupakan halaman yang pertama muncul pada saat mulai
menjalankan aplikasi. Halaman Login berfungsi untuk memberikan keamanan
didalam system. Customer terlebih dahulu mengisi username dan password
yang benar sebelum masuk kedalam system. Tampilan Halaman Login dapat
dilihat pada Gambar….

Gambar……Tampilan Halaman Login

19
 Apabila tombol LOGIN di klik username / Password yang
dimasukkan tidak sesuai dengan basis data, muncul pesan peringatan yang
memberitahukan bahwa username/password salah dan pengguna tidak dapat
masuk kedalam system. Tampilan pesan peringatan dapat dilihat pada
Gambar….

Gambar…..Tampilan Pesan Username/Password salah

3) Tampilan Halaman Transaksi

Setelah customer/pengguna berhasil memasukkan username dan

password, muncul halaman transaksi. Halaman transaksi merupakan halaman
tampilan untuk menginputkan data transaksi yang dilakukan customer atau
menampilkan jumlah pembayaran. Tampilan halaman Transaksi dapat diliat
pada Gambar…..

Gambar….Tampilan Halaman Transaksi

20
 4) Tampilan Halaman Reservasi

Setelah customer/pengguna mengisi data diri di data transaksi, muncul

halaman reservasi. Halaman Reservasi adalah halaman yang digunakan oleh
customer/pelanggan untuk melakukan pemesanan yang dilakukan beberapa
waktu sebelumnya. Tampilan Halaman Reservasi dapat dilihat pada Gambar…..

Gambar….Tampilan Halaman Reservasi

5) Tampilan Halaman Log Out

Setelah customer/pelanggan melakukan transaksi dan reservasi,customer

dapat mengklik ikon tanda panah disamping kanan atas dan akan muncul sebuah
pesan seperti Gambar….

21
 Gambar…..Tampilan Halaman Logout

IV.3 Hasil Pengujian Blackbox Testing dan Scenario Test Seluruh fitur Mobile
IV.3.1 Scenario Test seluruh fitur Mobile
Scenario Test merupakan dokumen yang berisi sekumpulan Langkah-langkah
sistematis yang disusun agar system yang akan dites dapat memenuhi keinginan
oleh user,memenuhhi standar,serta dapat berfungsi dengan baik. Berikut scenario
Test yang telah disusun oleh kelompok kami.
1) Mobile V 0.1

2) Mobile V 0.2

IV.3.2 Pengujian Sistem

Pengujian Blackbox (Blackbox Testing) adalah suatu metode pengujian perangkat
lunak yang berfokus pada sisi fungsionalitas, khususnya pada input data dan output
aplikasi (apakah sudah sesuai dengan apa yang diharapkan atau belum). Berikut
blackbox testing yang telah dibuat oleh kelompok kami.

Modul yang Prosedur Masukkan Keluaran yang Hasil yang Kesimpulan

22
diuji Pengujian diharapkan diharapkan

Splash Screen -Buka aplikasi Memilih Memunculkan Memunculkan Berhasil

Nb-Carwash aplikasi Nb- tampilan splash tampilan splash
Carwash di screen screen
perangkat
android dan
klik aplikasi
Nb-Carwash

Login -Buka aplikasi Memilih Memunculkan Memunculkan Berhasil

Nb-Carwash aplikasi Nb- username dan username dan
Carwash di password password
perangkat
android dan
klik aplikasi
Nb-Carwash

Transaksi -Buka aplikasi Memilih Memunculkan Memunculkan Berhasil

Nb-Carwash transaksi di data transaksi data transaksi
dalam aplikasi
-Pilih transaksi
Nb-Carwash

Reservasi -Buka aplikasi Memilih Memunculkan Memunculkan Berhasil

Nb-Carwash reservasi di data reservasi data reservasi
dalam aplikasi
-Pilih reservasi
Nb-Carwash

Logout -Buka aplikasi Memilih tanda Memunculkan Memunculkan Berhasil

Nb-Carwash panah notifikasi “iya” notifikasi “iya”
disebelah atau “tidak” atau “tidak”
-Pilih tanda
kanan atas
panah
didalam
disebelah
aplikasi Nb-
kanan atas
Carwash

23
IV.4 Hasil Pengujian Blackbox Testing dan Scenario Test seluruh fitur Web

IV.4.1 Scenario Test seluruh fitur Web

Secnario Test merupakan dokumen yang berisi sekumpulan Langkah-langkah
sistematis yang disusun agar system yang akan dites dapat memenuhi keinginan
oleh user,memenuhhi standar,serta dapat berfungsi dengan baik. Berikut scenario
Test yang telah disusun oleh kelompok kami.
1) Web V 0.1

2) Web V 0.2

24
 3) Web V 0.3

IV.4.2 Pengujian Sistem

Pengujian Blackbox (Blackbox Testing) adalah suatu metode pengujian perangkat
lunak yang berfokus pada sisi fungsionalitas, khususnya pada input data dan output
aplikasi (apakah sudah sesuai dengan apa yang diharapkan atau belum). Berikut
blackbox testing yang telah dibuat oleh kelompok kami.
Modul yang Prosedur Masukkan Keluaran yang Hasil yang Kesimpulan
diuji Pengujian diharapkan diharapkan

25
IV.5 Usability Testing Aplikasi Web

IV.6 User Acceptence Testing Mobile

User Acceptance Testing merupakan pengujian akhir dari perkembangan sebuah
produk untuk memvalidasi bahwa system yang dibangun telah sesuai dengan
kebutuhan pengguna. Berikut hasil UAT yang telah dibuat oleh kelompok kami.

26
27
 BAB V
SOLUSI PERMASALAHAN
V.1 Panduan Penggunaan Aplikasi Mobile
Untuk memulai akses terhadap aplikasi Nb-Carwash :
1) Bukalah aplikasi yang sudah anda download melalui Playstore
2) Maka akan muncul tampilan halaman depan aplikasi Nb-Carwash
3) Maka pada layer akan tampak menu Halaman Pembuka/Awal situs Nb-Carwash
seperti pada gambar

4) Kemudian akan diarahkan pada menu login

5) Masukkan Username dan Password. Setelah dimasukkan dengan benar, klik

button Login.
6) Sehingga akan menampilkan halaman Utama seperti pada gambar.

28
7) Maka customer akan diminta untuk mengisi data diri di transaksi. Setelah selesai
mengisi klik tombol button Tambah.
8) Setelah mengisi data diri di transaksi,maka customer akan diarahkan ke data
reservasi guna untuk melakukan pemesanan yang dilakukan beberapa waktu
sebelumnya. Seperti pada gambar

9) Setelah customer/pelanggan melakukan transaksi dan reservasi,customer dapat

mengklik ikon tanda panah disamping kanan atas dan akan muncul sebuah pesan
seperti Gambar….

29
V.2

30
 BAB VI
LAMPIRAN
VI.1 Tabel Pembagian Tugas dalam Kelompok

VI.1.1 Organizational Structure

Peranan Tanggung Jawab
No Nama Peranan Posisi
1. Muhammad Maulana Malik Scrum Master,Mobile Ketua,Project manager
Ibrahim Developer, Quality
Assurance, Web
App,UI/UX designer for
Mobile App
2. Muhammad Adi Saputro Product Owner,Web Anggota
Developer,Quality
Assurance Mobile App
3. Adinda Eka Mayang Wijayanti UI/UX Designer for Web Anggota,Project
App,Tester,Technical Sponsor
Writer
4. Andre Kharisma Dwi Thansa UI/UX Designer for Anggota
Web,Web Developer,Tester

VI.1.2 Authorization
APPROVED BY : PROJECT MANAGER Date

Muhammad Maulana Malik Ibrahim 30/12/2022

APPROVED BY : PROJECT SPONSOR Date

Adinda Eka Mayang Wijayanti 30/12/2022

31
VI.2 Dokumentasi Foto

32