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

Indonesia, tempat pencucian sepeda dan mobil saat ini belum banyak yang menerapkan
system informasi yang dapat mempermudah pendataan jumlah pelanggan yang
memanfaatkan jasa carwash, kemudian mempermudah dalam penyediaan paket carwash,
Sistem antrian, Rincian pendapatan dari carwash baik harian bulanan serta tahunan. Melihat
masalah diatas, maka dalam laporan ini kami menggunakan metode pendekatan berorientasi
objek, sedangkan dalam pengembangannya menggunakan pengembangan system prototype
serta menggunakan bahasa pemrograman HTML, PHP, dan javascript. Hasil dari penelitian
menunjukan memang belum adanya suatu aplikasi yang dapat menunjang aktivitas pelayanan
carwash, sehingga peneliti ingin merancang sebuah aplikasi yang dapat menunjang aktivitas
di sorum tempat pencucian mobil dan sepeda. Diharapkan sistem informasi ini dapat
menjaditambahan suatu sistem terapan yang baru, bagi masyarakat Indonesia.

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
RINGKASAN .............................................................................................................................................. i

KATA PENGANTAR................................................................................................................................... ii

DAFTAR ISI.............................................................................................................................................. iii

DAFTAR TABEL ........................................................................................................................................ v

DAFTAR GAMBAR................................................................................................................................... vi

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

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

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

1.3 Ruang Lingkup Penelitian a. Waktu dan Tempat Penelitian ........................................................ 2

1.4 Tujuan dan Manfaat Penelitian..................................................................................................... 2

BAB II RANCANGAN SISTEM .................................................................................................................. 3

2.1 Use Case Diagram ......................................................................................................................... 3

2.1.1 Pengertian Use Case Diagram . ............................................................................................. 3

2.1.2 Manfaat dari Use Case Diagram. ........................................................................................... 3

2.1.3 Komponen Use Case ............................................................................................................ 3

2.2 Entity Relation Diagram (ERD) Database..................................................................................... 6

2.2.1 Pengertian ERD. ..................................................................................................................... 6

2.2.2 Komponen Umum Penyusun ERD i. ...................................................................................... 6

2.3 Application Programing Interface (API)....................................................................................... 7

2.3.1 Pengeertian APIr .................................................................................................................... 7

2.3.2 Arsitektur API. ........................................................................................................................ 7

2.4 PhpMyAdmin ................................................................................................................................ 7

2.5 Database ....................................................................................................................................... 8

2.6 Visual Studio Code........................................................................................................................ 8

2.7 Xampp ........................................................................................................................................... 9

2.8 Flutter ........................................................................................................................................... 9

BAB III METODE PENELITIAN ................................................................................................................ 10

3.1 Understanding ............................................................................................................................ 10

3.2 Diverge ........................................................................................................................................ 10

3.3 Dicide .......................................................................................................................................... 17

iii
 3.4 Prototype .................................................................................................................................... 17

3.5 Validate....................................................................................................................................... 18

BAB IV HASIL PENGUJIAN..................................................................................................................... 19

4.1 Struktur Table Database ............................................................................................................ 19

4.1.1 Desain Database................................................................................................................... 19

4.1.2 Struktur Tabel Database Nb-Carwash .................................................................................. 19

4.2 Hasil (Form Web and Mobile) .................................................................................................... 22

4.2.1 Form Web ............................................................................................................................ 22

4.2.2 Form Mobile 1) Tampilan Halaman Splash Screen .............................................................. 25

4.3 Hasil Pengujian Blackbox Testing dan Scenario Test Seluruh fitur Mobile ................................. 29

4.3.1 Scenario Test seluruh fitur Mobile....................................................................................... 29

4.3.2 Pengujian Sistem Pengujian Blackbox (Blackbox Testing) .................................................. 30

4.4 Hasil Pengujian Blackbox Testing dan Scenario Test seluruh fitur Web .................................. 31

4.4.1 Scenario Test seluruh fitur Web Secnario Test .................................................................... 31

4.4.2 Pengujian Sistem Pengujian Blackbox (Blackbox Testing) .................................................. 32

4.5 Usability Testing Aplikasi Web................................................................................................... 34

4.6 User Acceptence Testing Mobile. .............................................................................................. 34

BAB V SOLUSI PERMASALAHAN........................................................................................................... 36

5.1 Panduan Penggunaan Aplikasi Mobile ...................................................................................... 36

5.2 Panduan Penggunaan Aplikasi Web Nb-Carwash ..................................................................... 38

BAB VI LAMPIRAN ................................................................................................................................ 43

6.1 Tabel Pembagian Tugas dalam Kelompok ................................................................................. 43

6.1.1 Organizational Structure ...................................................................................................... 43

6.1.2 Authorization ....................................................................................................................... 43

6.2 Dokumentasi Foto ...................................................................................................................... 44

iv
 DAFTAR TABEL
Table 4. 1 Table Relation Database ....................................................................................................... 19
Table 4. 2 Table Database Wash-Type .................................................................................................. 19
Table 4. 3 Table Database Users ........................................................................................................... 19
Table 4. 4 Table Database Transaction ................................................................................................. 20
Table 4. 5 Table Database Spends ........................................................................................................ 20
Table 4. 6 Table Database Profits ......................................................................................................... 20
Table 4. 7 Table Database Employees .................................................................................................. 21
Table 4. 8 Table Database Bookings ..................................................................................................... 21
Table 4. 9 Pengujian Sistem Mobile..................................................................................................... 30
Table 4. 10 Pengujian Sistem Web........................................................................................................ 33
Table 6. 1 Pembagian Tugas Kelompok ................................................................................................ 43
Table 6. 2 Authorization ........................................................................................................................ 43

v
 DAFTAR GAMBAR
Gambar 2. 1 Use Case ............................................................................................................................. 4
Gambar 2. 2 ERD.................................................................................................................................... 6
Gambar 3. 1 Storyboard Web Dinda ..................................................................................................... 11
Gambar 3. 2 Lanjutan Storyboard Web Dinda ...................................................................................... 11
Gambar 3. 3 Lanjutan Storyboard Web Dinda ...................................................................................... 11
Gambar 3. 4 Storyboard Mobile Dinda ................................................................................................. 11
Gambar 3. 5 Storyboard Web Malik ..................................................................................................... 12
Gambar 3. 6 Lanjutan Storyboard Web Malik ...................................................................................... 12
Gambar 3. 7 Storyboard Mobile Malik ................................................................................................. 13
Gambar 3. 8 Storyboard Web Adi ......................................................................................................... 13
Gambar 3. 9 Lanjutan Storyboard Web Adi .......................................................................................... 14
Gambar 3. 10 Lanjutan Storyboard Web Adi ........................................................................................ 14
Gambar 3. 11 Storyboard Mobile Adi ................................................................................................... 15
Gambar 3. 12 Storyboard Web Andre .................................................................................................. 15
Gambar 3. 13 Lanjutan Storyboard Web Andre ................................................................................... 16
Gambar 3. 14 Lanjutan Storyboard Web Andre ................................................................................... 16
Gambar 3. 15 Stroyboard Mobile Andre............................................................................................... 17
Gambar 4. 1 Implementasi Login Web ................................................................................................. 22
Gambar 4. 2 Implementasi Dashboard Web ........................................................................................ 22
Gambar 4. 3 Implementasi Data Pengeluaran Web ............................................................................. 22
Gambar 4. 4 Implementasi Data Transaksi Web .................................................................................. 23
Gambar 4. 5 Implementasi Data Reservasi ........................................................................................... 23
Gambar 4. 6 Implementasi Data Tarif ................................................................................................... 24
Gambar 4. 7 Implementasi Data Jumlah Keuntungan .......................................................................... 24
Gambar 4. 8 Implementasi Data Karyawan .......................................................................................... 25
Gambar 4. 9 Implementasi Data Rekapan ............................................................................................ 25
Gambar 4. 10 Implementasi Splash Screen Mobile .............................................................................. 26
Gambar 4. 11 Implementasi Halaman Login......................................................................................... 26
Gambar 4. 12 Implementasi Halaman Transaksi .................................................................................. 27
Gambar 4. 13 Implementasi Halaman Reservasi Mobile ...................................................................... 28
Gambar 4. 14 Implementasi Halaman Logout ...................................................................................... 28
Gambar 4. 15 Scenario Test Mobil V 0.1............................................................................................... 29
Gambar 4. 16 Scenario Test Mobile V 0.2............................................................................................. 29
Gambar 4. 17 Scenario Test Web V 0.1 ................................................................................................ 31
Gambar 4. 18 Scenario Test Web V 0.2 ................................................................................................ 31
Gambar 4. 19 Scenario Test Web V 0.3 ................................................................................................ 32
Gambar 4. 20 Usability Testing Web..................................................................................................... 34
Gambar 4. 21 User Acceptance Testing ................................................................................................ 35
Gambar 5. 1 Splash Screen Mobile ....................................................................................................... 36
Gambar 5. 2 Login Mobile ..................................................................................................................... 36
Gambar 5. 3 Halaman Transaksi Mobile ............................................................................................... 37
Gambar 5. 4 Halaman Reservasi Mobile ............................................................................................... 37
Gambar 5. 5 Logout Mobile .................................................................................................................. 38
Gambar 5. 6 Halaman Login Web ......................................................................................................... 38
Gambar 5. 7 Halaman Dashboard Web ................................................................................................ 39
Gambar 5. 8 Halaman Data Pengeluaran Web ..................................................................................... 39

vi
Gambar 5. 9 Halaman Transaksi ........................................................................................................... 39
Gambar 5. 10 Halaman Data Reservasi................................................................................................. 40
Gambar 5. 11 Halaman Data Reservasi Untuk melihat daftar antrian dan dalam proses .................... 40
Gambar 5. 12 Halaman Tarif Web ........................................................................................................ 41
Gambar 5. 13 Halaman Jumlah Keuntungan ........................................................................................ 41
Gambar 5. 14 Halaman Data Karyawan ................................................................................................ 42
Gambar 5. 15 Halaman Data Rekapan .................................................................................................. 42
Gambar 6. 1 Dokumentasi Foto ............................................................................................................ 44

vii
 BAB I
PENDAHULUAN
1.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

1.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.”

1.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.

1.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
2.1 Use Case Diagram
2.1.1 Pengertian Use Case Diagram
Use Case 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.
2.1.2 Manfaat dari Use Case Diagram
Manfaat Use Case 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.
2.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

5
2.2 Entity Relation Diagram (ERD) Database
2.2.1 Pengertian ERD
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.
2.2.2 Komponen Umum Penyusun ERD
Komponen Umum Penyusun ERD antara 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

6
2.3 Application Programing Interface (API)
2.3.1 Pengeertian API
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
2.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.

2.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
merupakan alat untuk memudahkan dalam mengoperasikan database MySQL,

7
 PhpMyAdmin sendiri digunakan sebagai alat untuk mengelola/ mengatur data pada
MySQL. Sedangkan,MySQL adalah database tempat penyimpanan data.

2.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.

2.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.

8
2.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).

2.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.

9
 BAB III
METODE PENELITIAN
3.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.

3.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

10
 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

11
2. Ide dari Muhammad Maulana Malik Ibrahim

Gambar 3. 5 Storyboard Web Malik

Gambar 3. 6 Lanjutan Storyboard Web Malik

12
 Gambar 3. 7 Storyboard Mobile Malik

3. Ide dari Muhammad Adi Saputro

Gambar 3. 8 Storyboard Web Adi

13
Gambar 3. 9 Lanjutan Storyboard Web Adi

Gambar 3. 10 Lanjutan Storyboard Web Adi

14
 Gambar 3. 11 Storyboard Mobile Adi

4. Ide dari Andre Kharisma Dwi Thansa

Gambar 3. 12 Storyboard Web Andre

15
Gambar 3. 13 Lanjutan Storyboard Web Andre

Gambar 3. 14 Lanjutan Storyboard Web Andre

16
 Gambar 3. 15 Stroyboard Mobile Andre

3.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

3.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

17
 builder, Adobe XD dan lain-lainnya. Berikut link hasil mockup kelompok kami:
https://www.figma.com/file/oTa6AllX4dBLiFepUYPgEh/NB-Carwash?node-
id=0%3A1&t=pexn7oVexHBY9FJA-0.

3.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.

18
 BAB IV
HASIL PENGUJIAN
4.1 Struktur Table Database
4.1.1 Desain Database
Table 4. 1 Table Relation Database

4.1.2 Struktur Tabel Database Nb-Carwash

1) Table Wash-Type

Table 4. 2 Table Database Wash-Type

2) Table Users

Table 4. 3 Table Database Users

19
3) Table Transaction

Table 4. 4 Table Database Transaction

4) Table Spends

Table 4. 5 Table Database Spends

5) Table Profits

Table 4. 6 Table Database Profits

20
6) Table Employee

Table 4. 7 Table Database Employees

7) Table Bookings

Table 4. 8 Table Database Bookings

21
4.2 Hasil (Form Web and Mobile)
4.2.1 Form Web
1) Login

Gambar 4. 1 Implementasi Login Web

2) Halaman Dashboard

Gambar 4. 2 Implementasi Dashboard Web

3) Halaman Data Pengeluaran

Gambar 4. 3 Implementasi Data Pengeluaran Web

22
4) Halaman Data Transaksi

Gambar 4. 4 Implementasi Data Transaksi Web

5) Halaman Data Reservasi

Gambar 4. 5 Implementasi Data Reservasi

23
6) Halaman Data Tarif

Gambar 4. 6 Implementasi Data Tarif

7) Halaman Jumlah Keuntungan

Gambar 4. 7 Implementasi Data Jumlah Keuntungan

24
 8) Halaman Data Karyawan

Gambar 4. 8 Implementasi Data Karyawan

9) Halaman Data Rekapan

Gambar 4. 9 Implementasi Data Rekapan

4.2.2 Form Mobile

1) Tampilan Halaman Splash Screen
Tampilan Splash Screen merupakan layer awal yang dibuka sebelum
aplikasi dijalankan.

25
 Gambar 4. 10 Implementasi Splash Screen Mobile

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 4. 11 Implementasi Halaman Login

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

26
 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 4. 12 Implementasi Halaman Transaksi

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…..

27
 Gambar 4. 13 Implementasi Halaman Reservasi Mobile

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….

Gambar 4. 14 Implementasi Halaman Logout

28
4.3 Hasil Pengujian Blackbox Testing dan Scenario Test Seluruh fitur Mobile
4.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

Gambar 4. 15 Scenario Test Mobil V 0.1

2) Mobile V 0.2

Gambar 4. 16 Scenario Test Mobile V 0.2

29
 4.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.
Table 4. 9 Pengujian Sistem Mobile

Modul yang Prosedur Masukkan Keluaran yang Hasil yang Kesimpulan

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

30
4.4 Hasil Pengujian Blackbox Testing dan Scenario Test seluruh fitur Web
4.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

Gambar 4. 17 Scenario Test Web V 0.1

2) Web V 0.2

Gambar 4. 18 Scenario Test Web V 0.2

31
 3) Web V 0.3

Gambar 4. 19 Scenario Test Web V 0.3

4.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.

32
 Table 4. 10 Pengujian Sistem Web

Modul yang diuji Prosedur Masukkan Keluaran yang Hasil yang Kesimpulan
Pengujian diharapkan diharapkan

Login -Buka aplikasi Nb- Memilih aplikasi Memunculkan Memunculkan Berhasil

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

Data Pengeluran -Buka Aplikasi Memilih data Memunculkan data Memunculkan data Berhasil
Nb-Carwash pengeluaran pengeluaran per pengeluaran per
didalam aplikasi bulan bulan
-Pilih Data
Pengeluaran

Transaksi -Buka aplikasi Nb- Memilih transaksi Memunculkan data Memunculkan data Berhasil
Carwash di dalam aplikasi transaksi transaksi
Nb-Carwash
-Pilih transaksi

Reservasi -Buka aplikasi Nb- Memilih reservasi Memunculkan data Memunculkan data Berhasil
Carwash di dalam aplikasi reservasi reservasi
Nb-Carwash
-Pilih reservasi

Tarif -Buka aplikasi Nb- Memilih tarif di Memunculkan data Memunculkan data Berhasil
Carwash dalam aplikasi Nb- tarif tarif
Carwash
-Pilih tarif

Jumlah -Buka aplikasi Nb- Memilih jumlah Memunculkan Memunculkan Berhasil

Keuntungan Carwash keuntungan di jumlah keuntungan jumlah keuntungan
dalam aplikasi Nb- per-bulan dan daftar per-bulan dan daftar
-Pilih jumlah
Carwash gaji karyawan gaji karyawan
keuntungan

Karyawan -Buka aplikasi Nb- Memilih karyawan Memunculkan data Memunculkan data Berhasil
Carwash di dalam aplikasi karyawan karyawan
Nb-Carwash
-Pilih Karyawan

Rekapan -Buka aplikasi Nb- Memilih reservasi Memunculkan data Memunculkan data Berhasil
Carwash di dalam aplikasi rekapan rekapan
Nb-Carwash
-Pilih data rekapan

Logout -Buka aplikasi Nb- Memilih tanda Memunculkan Memunculkan Berhasil

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

33
4.5 Usability Testing Aplikasi Web

Gambar 4. 20 Usability Testing Web

4.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.

34
Gambar 4. 21 User Acceptance Testing

35
 BAB V
SOLUSI PERMASALAHAN
5.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

Gambar 5. 1 Splash Screen Mobile

4) Kemudian akan diarahkan pada menu login

Gambar 5. 2 Login Mobile

36
5) Masukkan Username dan Password. Setelah dimasukkan dengan benar, klik
button Login.
6) Sehingga akan menampilkan halaman Utama seperti pada gambar.

Gambar 5. 3 Halaman Transaksi Mobile

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

Gambar 5. 4 Halaman Reservasi Mobile

37
 9) Setelah customer/pelanggan melakukan transaksi dan reservasi,customer dapat
mengklik ikon tanda panah disamping kanan atas dan akan muncul sebuah pesan
seperti Gambar….

Gambar 5. 5 Logout Mobile

5.2 Panduan Penggunaan Aplikasi Web Nb-Carwash

Untuk memulai akses terhadap aplikasi Nb-Carwash :
1) Bukalah aplikasi pada link berikut :
2) Maka pada layer akan tampak menu Halaman Pembuka/Awal situs Nb-Carwash
seperti pada gambar

Gambar 5. 6 Halaman Login Web

38
3) Maka akan diarahkan kepada dashboard

Gambar 5. 7 Halaman Dashboard Web

4) Apabila admin ingin mengetahui jumlah pengeluaran perbulan dapat dilihat pada fitur
Data Pengeluaran. Admin juga bisa menambahkan jumlah pengeluaran perhari dengan
mengklik tombol tambah data. Admin juga bisa menghapus data yang telah disimpan tadi
dengan mengklik tanda hapus yang tersedia di sebelah kanan data tersimpan tadi.

Gambar 5. 8 Halaman Data Pengeluaran Web

5) Apabila admin ingin melihat trnasaksi setiap harinya. Admin juga dapat menghapus
data yang sekiranya tidak diperlukan atau terdapat kesalahan didalam data yang
disimpan tadi.

Gambar 5. 9 Halaman Transaksi

39
 6) Admin juga dapat melihat data customer yang telah melakukan pemesanan
sebelumnya.

Gambar 5. 10 Halaman Data Reservasi

Didalam data reservasi,admin dapat melihat daftar antrian dan juga dalam proses. Yang
artinya admin dapat melihat daftar antrian customer yang telah melakukan pemesanan
dan juga customer yang masih dalam proses atau sudah melakukan pemesanan tetapi
sudah dilayani oleh karyawan. Didalam data reservasi terdapat tombol reservasi yang
berfungsi untuk mengconfirmasi bahwa customer yang melakukan pemesanan telah
dilayani oleh karyawan

Gambar 5. 11 Halaman Data Reservasi Untuk melihat daftar antrian dan dalam proses

7) Admin dapat melihat daftar tarif/harga setiap pencucian. Didalam Data tarif admin
juga dapat mengubah/mengedit isi data dengan mengklik tombol “pensil” dikanan
disetiap data yang tersimpan.

40
 Gambar 5. 12 Halaman Tarif Web

8) Apabila admin ingin mengetahui jumlah keuntungan setiap bulannya, admin dapat
melihat di data jumlah keuntungan. Didalam data jumlah keutungan juga dapat melihat
daftar karyawan yang masuk dan juga dapat menentukan gaji karyawan.

Gambar 5. 13 Halaman Jumlah Keuntungan

9) Admin juga dapat melihat daftar karyawan yang ada. Admin juga dapat menambahkan
daftar karyawan dengan mengklik tambah data maka akan muncul data yang harus diisi
secara lengkap dan valid. Dan admin juga dapat menghapus data jika terjadi kesalahan
dengan mengklik tombol hapus disamping kanan data yang telah disimpan.

41
 Gambar 5. 14 Halaman Data Karyawan

10) Data Rekap digunakan admin jika ingin membuat laporan pengeluaran dan
pemasukan per bulannya. Didalam data rekapan terdapat tombol export yang digunakan
untuk mengexport data yang telah ada didalam table.

Gambar 5. 15 Halaman Data Rekapan

42
 BAB VI
LAMPIRAN
6.1 Tabel Pembagian Tugas dalam Kelompok
6.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
Table 6. 1 Pembagian Tugas Kelompok

6.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

Table 6. 2 Authorization

43
6.2 Dokumentasi Foto

Gambar 6. 1 Dokumentasi Foto

44