System Requirement Spesification (SRS) Proyek Perancangan Sistem

Informasi Batavia Coffee (Studi Kasus: UMKM Batavia Coffee)

Tim Mahasiswa:
Raka Shakuralim Kusmana 41819010056
Ahmad Wildan 41819010006
Muhammad Rizki 41819010005

DOSEN PENGAMPU: PUJI RAHAYU, Dr, MT

Tugas ini ditunjukan untuk melengkapi syarat tugas Mata Kuliah Proyek Pengembangan
Sistem Informasi

UNIVERSITAS MERCU BUANA

2022
 DAFTAR ISI

DAFTAR ISI............................................................................................................................. 2
DAFTAR GAMBAR ................................................................................................................ 3
DAFTAR TABEL .................................................................................................................... 5
KATA PENGANTAR .............................................................................................................. 6
ABSTRAK ................................................................................................................................ 7
ABSTRACT .............................................................................................................................. 7
BAB 1 PENDAHULUAN ........................................................................................................ 8
1.1 Latar Belakang ............................................................................................................ 8
1.2 Rumusan Masalah ....................................................................................................... 8
1.3 Batasan Masalah .......................................................................................................... 9
1.4 Tujuan.......................................................................................................................... 9
1.5 Struktur Organisasi ...................................................................................................... 9
1.6 Metode Pengerjaan .................................................................................................... 10
1.7 Timeline Proyek ........................................................................................................ 13
BAB 2 PERANCANGAN SISTEM ..................................................................................... 15
2.1. Analisis Proses Bisnis ............................................................................................... 15
2.2. Judul Dan Filosofi Aplikasi....................................................................................... 16
2.3. Tagline Sistem ........................................................................................................... 16
BAB 3 KEBUTUHAN FUNGSIONAL ............................................................................... 17
3.1. Analisis Kebutuhan Fungsional ................................................................................ 17
3.2. Analisis Kebutuhan Non Fungsional ........................................................................ 18
3.3. Definisi Unified Modelling Language ...................................................................... 18
3.3.1. Use Case Diagram................................................................................................. 18
3.3.2. Scenario Use Case Diagram.................................................................................. 19
3.3.3. Activity Diagram.................................................................................................... 27
BAB 4 PENGEMBANGAN SISTEM .................................................................................. 49
4.1 User Interface ................................................................................................................. 49
BAB 5 KESIMPULAN DAN SARAN .................................................................................. 61
5.1 Kesimpulan .................................................................................................................... 61
5.2 Saran .............................................................................................................................. 61
 DAFTAR GAMBAR

Gambar 1. 1 Struktur Organisasi ............................................................................................... 9

Gambar 1. 2 SDLC Agile......................................................................................................... 11
Gambar 1. 3 Timline Proyek .................................................................................................... 14
Gambar 2. 1 Proses Bisnis ....................................................................................................... 15
Gambar 3. 1 Use Case Diagram ............................................................................................... 19
Gambar 3. 2 Activity Diagram Melihat Menu ......................................................................... 27
Gambar 3. 3 Activity Diagram Melihat Keranjang .................................................................. 28
Gambar 3. 4 Activity Diagram Order ...................................................................................... 29
Gambar 3. 5 Activity Diagram Login ...................................................................................... 30
Gambar 3. 6 Activity Diagram Monitoring Cafe ..................................................................... 31
Gambar 3. 7 Activity Diagram Pesanan Dine in...................................................................... 32
Gambar 3. 8 Activity Diagram Pesanan Take Home ............................................................... 34
Gambar 3. 9 Activity Diagram Menambahkan Menu .............................................................. 35
Gambar 3. 10 Activity Diagram Menambahkan Pelanggan..................................................... 36
Gambar 3. 11 Activity Diagram Menambahkan Meja ............................................................. 38
Gambar 3. 12 Activity Diagram Menambahkan Mitra ............................................................ 39
Gambar 3. 13 Activity Diagram Menambahkan Promo........................................................... 40
Gambar 3. 14 Activity Diagram Menambahkan Bahan Baku.................................................. 41
Gambar 3. 15 Activity Diagram Pengeluaran Cafe .................................................................. 43
Gambar 3. 16 Activity Diagram Arus Kas ............................................................................... 44
Gambar 3. 17 Activity Diagram Laporan Pengeluaran ............................................................ 45
Gambar 3. 18 Activity Diagram Statistik Cafe ......................................................................... 46
Gambar 3. 19 Activity Diagram Manajemen User .................................................................. 47
Gambar 4. 1 Halaman Landing Page ....................................................................................... 49
Gambar 4. 2 Halaman Order ................................................................................................... 50
Gambar 4. 3 Halaman Checkout .............................................................................................. 50
Gambar 4. 4Halaman Login ..................................................................................................... 51
Gambar 4. 5 Halaman Dashboard ........................................................................................... 52
Gambar 4. 6 Halaman Monitoring Cafe .................................................................................. 52
Gambar 4. 7 Halaman Pesanan Dine in ................................................................................... 53
Gambar 4. 8 Halaman Pesanan Take Home ............................................................................. 53
Gambar 4. 9 Halaman Pesanan Cafe....................................................................................... 54
Gambar 4. 10 Halaman Delivery Order ................................................................................... 54
Gambar 4. 11 Halaman Menu .................................................................................................. 55
Gambar 4. 12 Halaman Daftar pelanggan................................................................................ 56
Gambar 4. 13 Halaman Bahan Baku........................................................................................ 56
Gambar 4. 14 Halaman Meja ................................................................................................... 57
Gambar 4. 15 Halaman Promo................................................................................................. 57
Gambar 4. 16 Halaman Mitra .................................................................................................. 57
Gambar 4. 17 Halaman Pemebelian Bahan Baku .................................................................... 58
Gambar 4. 18 Halaman Pengeluaran Café ............................................................................... 58
Gambar 4. 19 Halaman Arus Kas ............................................................................................ 59
Gambar 4. 20 Halaman Laporan Transaksi ............................................................................. 59
Gambar 4. 21 Halaman Statistik Cafe...................................................................................... 60
 DAFTAR TABEL

Tabel 3. 1 Use Case Login ....................................................................................................... 19

Tabel 3. 2 Melakukan Monitoring ........................................................................................... 19
Tabel 3. 3 Menambahkan Pesanan Baru .................................................................................. 20
Tabel 3. 4 Melihat Pesanan ...................................................................................................... 20
Tabel 3. 5 Melihat Aktifitas Delivery order............................................................................. 21
Tabel 3. 6 Menambahkan Menu .............................................................................................. 21
Tabel 3. 7 Menambahkan Pelanggan ....................................................................................... 22
Tabel 3. 8 Menambahkan Bahan Baku .................................................................................... 22
Tabel 3. 9 Menambahkan Meja ............................................................................................... 23
Tabel 3. 10 Menambahkan Promo ........................................................................................... 23
Tabel 3. 11 Menambahkan Mitra ............................................................................................. 24
Tabel 3. 12 Menambahkan Pembelian Bahan Baku ................................................................ 24
Tabel 3. 13 Melihat dan Menambahkan Pengeluaran .............................................................. 25
Tabel 3. 14 Melihat Arus Kas .................................................................................................. 25
Tabel 3. 15 Melihat Laporan transaksi .................................................................................... 26
Tabel 3. 16 Melihat Statistik Cafe ........................................................................................... 26
Tabel 3. 17 Menambahkan User .............................................................................................. 26
 KATA PENGANTAR

Segala puji Segala puji syukur kehadirat Tuhan Yang Maha Esa, yang telah melimpahkan
rahmat dan karunia-Nya kepada penulis, sehingga dapat menyelesaikan proyek yang berjudul
“Proyek Perancangan Sistem Informasi “Batavia Coffee” dengan baik dan tepat pada
waktunya. Proyek dibuat untuk memenuhi syarat mata kuliah Proyek Pengembangan Sistem
Informasi program studi Sistem Informasi di Universitas Mercu Buana. Tanpa bimbingan dan
dorongan dari semua pihak, penyusunan laporan proyek ini tidak akan lancar. Melalui laporan
proyek diucapkan terimakasih kepada yang terhormat:
1. Puji Rahayu, Dr, MT, selaku dosen Mata Kuliah Proyek Pengembangan Sistem
Informasi yang senantiasa memberikan kami saran dan arahan selama pembuatan
proyek berlangsung.
2. Rekan rekan mahasiswa program studi Sistem Informasi di Universitas Mercu Buana
yang telah memberikan rasa kekeluargaan selama ini.
3. Pihak Batavia Coffee yang telah memberikan kesempatan dan kepercayaan untuk
dijadikan sebagai objek untuk Proyek Pengembangan Sistem Informasi.
4. Semua pihak terkait yang telah memberikan kritik dan saran dalam penyelesaian
pembuatan laporan proyek.

Penulisan laporan ini disadari masih jauh dari sempurna. Oleh karena itu, mohon kritik
dan saran yang bersifat membangun demi kesempurnaan penulisan di masa akan datang.
Semoga laporan ini dapat berguna bagi para pembaca.
Jakarta, Oktober 2022

Penyusun
 ABSTRAK

Perkembangan teknologi informasi pada jaman sekarang ini sangat memudahkan industri
dari berbagai sektor dalam bertukar informasi salah satunya industri kuliner. Sejak Pandemi
Covid-19, industri kuliner yang sering dikunjungi oleh masyarakat adalah Kedai Kopi atau
lebih dikenal dengan Coffee Shop. Adapun manajemen dari mayoritas kedai kopi masih
menggunakan cara manual dari mulai melakukan pemesanan bahan baku sampai dengan
melakukan pemesanan pelanggan. Batavia Coffee adalah kedai kopi yang menjual beberapa
produk makanan dan minuman seperti kedai kopi pada umumnya. Batavia Coffee masih
menerapkan manajemen secara manual dan hanya kasir yang menggunakan media digital
namun tidak terintegrasi dengan keseluruhan manajemen yang ada. Oleh karena itu, dilakukan
perancangan sistem berbasis Website yang dapat mengelola manajemen Batavia Coffee.
Adapun bahasa pemrograman yang digunakan adalah Javascript dan PHP dengan
menggunakan metodologi Agile. Dengan adanya sistem berbasis Website ini pada khususnya
dapat menjadi solusi untuk mempermudah dalam melakukan pengelolaan Batavia Coffee agar
setiap proses dapat terintegrasi secara efektif dan efisien.

Kata kunci: Coffee Shop, Agile, PHP, Javascript, Website

ABSTRACT

The development of information technology today greatly facilitates industries from

various sectors in exchanging information, one of which is the culinary industry. Since the
Covid-19 Pandemic, the culinary industry that is often visited by the public is the Coffee Shop
or better known as the Coffee Shop. The management of the majority of coffee shops still uses
the manual method from ordering raw materials to placing customer orders. Batavia Coffee is
a coffee shop that sells several food and beverage products like coffee shops in general. Batavia
Coffee still applies manual management and only cashiers use digital media but it is not
integrated with the overall management. Therefore, it is necessary to design a website-based
system that can manage Batavia Coffee's management. The programming language used is
Javascript and PHP using Agile methodology. With this website-based system in particular, it
can be a solution to simplify the management of Batavia Coffee so that each process can be
integrated effectively and efficiently.

Keywords: Coffee Shop, Agile, PHP, Javascript, Website

 BAB 1
PENDAHULUAN

1.1 Latar Belakang

Perkembangan teknologi informasi yang sangat pesat di era globalisasi saat ini telah
memberikan banyak manfaat dalam kemajuan diberbagai aspek . Penggunaan teknologi oleh
manusia dalam membantu menyelesaikan pekerjaan merupakan hal yang menjadi keharusan
dalam kehidupan. Perkembangan teknologi ini juga harus diikuti dengan perkembangan pada
Sumber Daya Manusia (SDM).
Saat ini, teknologi informasi merupakan salah satu media yang sangat dibutuhkan dalam
segala bidang kehidupan. Perkembangan teknologi informasi di Indonesia telah banyak
mengalami kemajuan, didukung dengan teknologi komunikasi yang menunjukkan peningkatan
yang sangat signifikan merupakan alternatif yang tepat bagi suatu perusahaan untuk menunjang
kinerja dari perusahaan tersebut agar dapat berjalan dan bekerja dengan baik. Perkembangan
teknologi informasi ini merupakan suatu peluang yang dapat dimanfaatkan untuk
mempermudah segala pekerjaan dan sebagai salah satu sarana promosi.
Batavia Coffee merupakan badan usaha yang bergarak dalam bidang Food&Beverage
(F&B), Batavia Coffee juga termasuk dalam Usaha Mikro, Kecil, dan Menengah (UMKM).
Pada saat ini Batavia Coffee mengalami kesulitan dalam sistem manajamen seperti pengelolaan
bahan baku, arus kas, dan laporan transaksi masi menggunakan sistem manual, tidak hanya
kesulitan dalam sistem manajemen, Batavia Coffee juga ingin membuat sistem delivery order
untuk customer yang tidak bisa datang ke tempat secara langsung. dengan melihat
permasalahan yang ada, kami ingin membantu dengan menciptkan aplikasi berbasis website
untuk bisa mempermudah Batavia Coffee dalam sistem manajamen dan penjualan, untuk
merancang aplikasi berbasis website ini kami menggunakan metode Agile, dan alasan kami
menggunakan metode Agile adalah karna sangat mudah untuk diaplikasikan, Dengan adanya
website ini kami berharap bisa mempermudah sistem manajemen Batavia Coffee.

1.2 Rumusan Masalah

Berdasarkan uraian latar belakang maka ditemukan beberapa rumusan masalah, diantara
sebagai berikut :
1. Bagaimana cara merancang sebuah aplikasi berbasis website untuk mempermudah
pengelolaan atau sistem manajamen?
2. Bagaimana cara membantu karyawan memanfaatkan teknologi aplikasi berbasis web
dalam pengelolaan atau sistem manajamen?
3. Bagaimana cara membuat sistem yang dapat mempemudah karyawan dalam
pengelolaan atau sistem manajamen?

1.3 Batasan Masalah

Berdasarkan latar belakang masalah dan rumusan masalah di atas, pembuatan website ini
memberikan batasan, diantara sebagai berikut :
4. Pembuatan aplikasi berbasis website ini menggunakan metode Agile.
5. Karyawan dan pelanggan hanya bisa menggunakan ini melalui browser
6. Pelanggan hanya bisa menggunakan website ini untuk delivery order

1.4 Tujuan

Tujuan dari terciptanya aplikasi berbasis website ini adalah :

7. Membantu pemilik untuk mengembangkan usaha
8. Mempermudah pekerjaan Karyawan
9. Mempermudah pelanggan yang ingin memesan tanpa harus keluar rumah

1.5 Struktur Organisasi

Gambar 1. 1 Struktur Organisasi

Dalam proses pembuatan aplikasi berbasis website ini terdapat kontribusi dari Tim
Wilkariz Official yang terdiri dari :
1. Raka Shakuralim Kusmana (Project Management & Front-End Developer)
 - Membuat timeline dari proyek pengembangan sistem informasi Manajemen Cafe
- Mengembangkan Front End berdasarkan desain dan Analisa Proses Bisnis yang telah
dibuat
2. Ahmad Wildan (Backend Developer)
- Mengembangkan Front End berdasarkan desain dan Analisa Proses Bisnis yang telah
dibuat
3. Muhamad Rizki (Asset, Documentation & System Analyst)
- Menganalisa proses bisnis Batavia Coffee
- Membuat skema ERD dan flowchart
- Dokumentasi

1.6 Metode Pengerjaan

SDLC adalah kependekan dari Systems development life cycle atau dalam bahasa
Indonesia disebut siklus hidup pengembangan sistem. Dalam pengertian lain SDLC adalah
tahapan kerja yang bertujuan untuk menghasilkan sistem berkualitas tinggi yang sesuai dengan
keinginan pelanggan atau tujuan dibuatnya sistem tersebut. SDLC menjadi kerangka yang
berisi langkah-langkah yang harus dilakukan untuk memproses pengembangan suatu perangkat
lunak. Sistem ini berisi rencana lengkap untuk mengembangkan, memelihara, dan
menggantikan perangkat lunak tertentu.
Agile merupakan sebuah metodologi pengembangan perangkat lunak yang didasarkan
pada proses pengerjaan yang dilakukan secara berulang dimana aturan dan solusi yang
disepakati dilakukan dengan kolaborasi antar tiap tim secara terorganisir dan terstruktur. Agile
Metodologi sendiri merupakan model pengembangan perangkat lunak dalam jangka pendek.
Kemudian, membutuhkan adaptasi yang cepat dalam mengatasi setiap perubahan. Nilai
terpenting dari Agile development ini adalah memungkinkan sebuah tim dalam mengambil
keputusan dengan cepat, kualitas dan prediksi yang baik, serta memiliki potensi yang baik
dalam menangani setiap perubahan. Berikut ilustrasi gambar metode Agile pada gambar
dibawah ini :
 Gambar 1.2 SDLC Agile
Aplikasi berbasis website ini dikembangan dengan metode Agile, Penggunaan Agile
dalam sebuah pembuatan perangkat lunak sangatlah penting karena dengan menggunakan
metode Agile, perangkat lunak dapat menyesuaikan dengan kebutuhan yang ada.

Tahapan – Tahapan metode Agile:

1. Planning
Ini merupakan tahapan utama yang harus dilakukan jika suatu pembuatan perangkat
lunak menggunakan metode SDLC atau software development life cycle yaitu perencanaan.
Dalam tahapan ini project manager melakukan sebuah proses perencanaan terhadap kebutuhan
pengguna (user specification) tentang masalah masalah yang dihadapi oleh pengguna. Selain
itu itu dilakukan juga studi-studi kelayakan (feasibility study) terhadap perangkat lunak yang
akan dibuat, sehingga nantinya ketika perangkat lunak sudah jadi, perangkat lunak tersebut
benar-benar sesuai yang dibutuhkan dengan pengguna. Di tahap ini juga dilakukan proses
perencanaan waktu pembuatan perangkat lunak, sehingga waktu yang dibutuhkan untuk proses
developing bisa terjadwal dengan baik.
2. Analysis
Setelah tahapan perencanaan sudah selesai dilakukan, selanjutnya tahapan berikutnya
adalah analisa. Tahapan ini dilakukan sebuah proses analisa bagaimana sistem perangkat
lunaknya akan berjalan nantinya mengacu para permasalahan yang dihadapi pada proses
perencanaan. Dalam tahapan ini penting hukumnya untuk mengidentifikasi kebutuhan sistem
yang akan berjalan mengacu pada permasalahan yang ada. Selain itu, dilakukan juga proses
penentuan prioritas sistem yang akan dibuat, dengan tujuan perangkat lunak yang digunakan
tepat guna nantinya sesuai kebutuhan yang diinginkan oleh pengguna. Proses ini merupakan
tanggung jawab dari business analyst.
3. Design
Setelah semua kebutuhan sudah didokumentasikan, langkah selanjutnya adalah
perancangan terhadap perangkat lunak yang akan dibuat. Perancangan ini meliputi banyak hal,
mulai dari perancangan UI/UX nya sehingga mudah digunakan, perancangan alur data dalam
perngkat lunak, serta pembuatan diagram proses. Semua perancangan ini buat dengan tujuan
perangkat lunak yang dibuat nantinya bisa berjalan sebaik dan seefisien mungkin dengan
beracuan pada permasalahan yang dihadapi oleh pengguna. Tidak ada fitur yang terbuang dan
tidak ada fitur yang kurang. Tahapan ini merupakan tanggung jawab dari system analyst.
4. Development
Setelah perancangan dari sistem di tahap ke tiga sudah selesai, selanjutnya adalah
melakukan implementasi dari rancangan yang sudah dibuat. Disinilah proses develop dari
sebuah perangkat lunak dilakukan. Tugas dari developer adalah membuat perangkat lunak
sedemikian rupa dengan mengacu pada rancangan yang dibuat oleh system analyst pada tahap
sebelumnya. Developer hanya mengikuti apa yang dibuat oleh system analyst tanpa perlu
memikirkan rancangan perangkat lunaknya lagi.
5. Testing & Integration
Setelah proses implementasi atau develop sudah selesai dilakukan oleh developer. Proses
selanjutnya akan dilakukan oleh software tester. Dalam tahapan ini software tester mencoba
perangkat lunak yang sudah dibuat dan menentukan apakah perangkat lunak yang sudah dibuat
sesuai dengan kebutuhan pengguna seperti dalam tahap analisis dan apakah sesuai dengan
rancangan yang sudah dibuat oleh system analyst. Jika perangkat lunak yang dibuat belum
sesuai dengan design dan analisa, maka tahapan selanjutnya bersifat iterative, yaitu kembali
lagi ke tahap sebelumnya dengan tujuan dilakukannya perbaikan sedemikian rupa sehingga
perangkat lunak tersebut sesuai dengan kebutuhan pengguna. Tujuan dari pengujian yang
dilakukan oleh software tester adalah mengurangi cacat yang ada pada program (defect)
sehingga perangkat lunak yang dibuat nantinya benar-benar mampu menyelesaikan
permasalahan yang dihadapi oleh pengguna.
6. Maintenance
 Ketika semua tahap sudah terlewati, artinya perangkat lunak yang dibuat sudah siap
digunakan. Namun tidak berhenti sampai disitu, ketika sebuah perangkat lunak sudah
digunakan maka diperlukan proses maintenance atau pemeliharaan terhadap perangkat lunak
sehingga performa dari perangkat lunak bisa terjaga. Selain itu, jika terjadi kerusakan sistem
maka akan diperbaiki diproses ini juga. Proses pemeliharaan merupakan tanggung jawab dari
Implementer Support.

1.7 Timeline Proyek

Berikut adalah jadwal waktu perencaan proyek pada proses pembuatan aplikasi berbasis
website
Task Name Duration Start Finish % Complete
Perencanaan 3 days Sun 05/06/22 Tue 07/06/22 100%
Pembagian Tugas & Tanggung Jawab 3 days Sun 05/06/22 Tue 07/06/22 100%
Analisa & Design Sistem 13 days Wed 08/06/22 Fri 24/06/22 100%
Analisa proses bisnis Batavia Cafe
3 days Wed 08/06/22 Fri 10/06/22 100%
(Wawancara)
Membuat Flowchart proses bisnis 3 days Sat 11/06/22 Tue 14/06/22 100%
Membuat Entity Relationship Diagram
5 days Wed 15/06/22 Tue 21/06/22 100%
(ERD)
Membuat kamus data & Requirement
3 days Wed 22/06/22 Fri 24/06/22 100%
System
Desain Aplikasi 21 days Sat 25/06/22 Fri 22/07/22 100%
Membuat desain Landing Page Sistem 7 days Sat 25/06/22 Mon 04/07/22 100%
Membuat desain Halaman Order 7 days Tue 05/07/22 Wed 13/07/22 100%
Membuat desain Halaman Manajemen 7 days Thu 14/07/22 Fri 22/07/22 100%
Programming 30 days Sat 23/07/22 Thu 01/09/22 95%
Membuat Front End Sistem 15 days Sat 23/07/22 Thu 11/08/22 90%
Membuat Back End Sistem 15 days Fri 12/08/22 Thu 01/09/22 100%
Testing Sistem 20 days Fri 02/09/22 Thu 29/09/22 95%
Membuat Test Case 5 days Fri 02/09/22 Thu 08/09/22 100%
Melakukan Usability Testing 6 days Fri 09/09/22 Fri 16/09/22 90%
Melakukan Testing Integrasi Sistem 5 days Mon 19/09/22 Fri 23/09/22 100%
Memberikan catatan list outstanding
5 days Sat 24/09/22 Thu 29/09/22 90%
issue
Dokumentasi 33 days Fri 30/09/22 Tue 15/11/22 64%
Membuat presentasi terkait sistem 5 days Fri 30/09/22 Thu 06/10/22 40%
Membuat dokumen SRS 21 days Fri 07/10/22 Fri 04/11/22 90%
Membuat dokumen Manual Book 8 days Sat 05/11/22 Tue 15/11/22 10%
Training & Presentasi 9 days Wed 16/11/22 Mon 28/11/22 0%
Melakukan presentasi sistem 3 days Wed 16/11/22 Fri 18/11/22 0%
Melakukan pemaparan sistem 4 days Sat 19/11/22 Wed 23/11/22 0%
 Membuat video tutorial & presentasi
3 days Thu 24/11/22 Mon 28/11/22 0%
sistem

Gambar 1. 2 Timline Proyek

 BAB 2
PERANCANGAN SISTEM

2.1. Analisis Proses Bisnis

Berikut adalah gambaran mengenai proses bisnis yang ada pada Batavia Coffee:

Gambar 2. 1 Proses Bisnis

Dari hasil observasi yang telah dilakukan oleh tim kami dengan pemilik Batavia Coffee,
pada saat ini tahapan proses pengelolaan internal Batavia Coffee masih menggunakan rekapan
berupa manual dan pelanggan harus mengunjungi Batavia Coffee agar dapat melakukan
pemesanan walaupun pelanggan tersebut memilih take home untuk pesanan nya. Oleh karena
itu, tim kami sebagai tim peneliti melakukan perancangan sistem berbasis website yang sesuai
dengan nama kedai, yaitu “Batavia Coffee” dimana dalam website tersebut dapat melakukan
pengelolaan bahan baku, pesanan, pelanggan, accounting, sampai dengan customer melakukan
pemesanan melalui website secara online. Hal tersebut dapat memudahkan tim manajemen
Batavia Coffee untuk mengelola kebutuhan bisnis yang ada serta memudahkan pelanggan agar
tidak perlu mengunjungi kedai jika melakukan pesanan take home.

Adapun tahapan proses bisnis yang kami rancang yaitu customer mengunjungi website
Batavia Coffee bila ingin membuat pesanan take home atau mengunjungi langsung kedai
Batavia Coffee bila ingin membuat pesanan dine in. Kemudian untuk pelanggan yang take
home akan diarahkan ke menu order pesanan, memilih menu dan checkout pesanan. Setelah
checkout pesanan kurir akan mengantarkan pesanan ke alamat pelanggan. Untuk pelanggan
yang dine in akan dilayani oleh admin yang kemudian admin akan meminta nama pelanggan,
alamat pelanggan, nomor hp, dan email. Hal ini berguna untuk menghitung data statistik Cafe
dan menghimbau promosi. Setelah data pelanggan tersedia, kasir membuat pesanan baru
kemudian setelah pesanan sudah sesuai dengan pelanggan maka pelanggan akan diminta untuk
melakukan pembayaran. Setelah melakukan pembayaran, waitress akan mengantarkan pesanan
pelanggan. Jika pelanggan sudah selesai dan meninggalkan meja maka kasir akan close table
pelanggan dan data transaksi tersebut akan tersimpan di website Batavia Coffee. Website
Batavia Coffee ini juga berguna untuk waiters, kurir, dan dapur agar setiap ada pesanan baru
maka setiap pengguna dapat melihat update pesanan tersebut.

2.2. Judul Dan Filosofi Aplikasi

Sistem yang tim kami rancang adalah sebuah sistem manajemen dan pemesanan berbasis
website yang bernama “Batavia Coffee”. Nama sistem ini mengambil langsung dari nama kedai
kopi yang dilakukan penelitian oleh tim kami yaitu “Batavia Coffee”. Sistem ini diharapkan
selain memudahkan customer dalam melakukan pemesanan take home yang tidak perlu
mengunjungi kedai secara langsung, juga memudahkan manajemen Batavia Coffee dalam
mengelola kebutuhan bisnis yang ada. Sistem ini dirancang berdasarkan permasalahan yang
ada di lapangan yaitu pengelolaan kebutuhan bisnis yang masih dilakukan secara manual dan
pemesanan take home yang masih harus mengunjungi kedai secara langsung, dengan adanya
sistem ini akan memudahkan baik dari segi customer maupun manajemen Batavia Coffee
sehingga dapat meningkatkan angka penjualan kedai.

2.3. Tagline Sistem

Tagline sistem Batavia Coffee sesuai dengan tagline kedai Batavia Coffee yaitu “Service
Is Number One”. Tagline tersebut dipilih agar setiap pelanggan yang mengunjungi kedai kopi
Batavia Coffee ataupun mengunjungi website Batavia Coffee dapat selalu mengingat bahwa
hal yang dijunjung oleh Batavia Coffee adalah pelayanan yang baik, karena dari pelayanan
yang baik akan memberikan feedback yang baik juga namun tidak hanya baik tetapi efisien dan
efektif.
 BAB 3 KEBUTUHAN FUNGSIONAL

3.1. Analisis Kebutuhan Fungsional

User adalah sebutan pengguna dari sebuah aplikasi atau webiste, setiap masing masing
user memiliki akses yang berbeda, dan dalam aplikasi berbasis website ini terdapat 2 user yang
mempunyai akses sebagai berikut:

1. Admin
- Melakukan Login
- Melakukan Monitoring
- Menambahkan Pesanan baru
- Melihat Pesanan
- Melihat Aktifitas Delivry order
- Menambahkan Menu
- Menambahkan Pelanggan
- Menambahkan Bahan Baku
- Menambahkan Meja
- Menambahkan Mitra
- Membuat Promo
- Menambahkan Pembelian bahan baku
- Melihat dan menambahkan pengeluaran
- Melihat arus kas
- Melihat laporan transaksi
- Melihat Statisktik
- Menambahkan User

2. Pelanggan (Customer)
- Melihat Menu
- Melihat Keranjang
- Melakukan Order
- Melakukan Transaksi
3.2. Analisis Kebutuhan Non Fungsional

Dalam aplikasi ini untuk mendukung, untuk mendukung kebutuhan perangkat jaringan
seperti:
1. Sistem dapat beroperasi pada web browser
2. Sistem dapat diakses menggunakan perangkat PC atau laptop
3. Sistem dapat berjalan pada sistem operasi windows
4. Autentifikasi user dengan password untuk menjamin keamanan data agar terhindar dari
penyalahgunaan akun
5. Sistem dilengkapi dengan panduan penggunaan agar dapat dipergunakan dengan baik
oleh user.

3.3. Definisi Unified Modelling Language

3.3.1. Use Case Diagram

 Gambar 3. 1 Use Case Diagram

3.3.2. Scenario Use Case Diagram

Tabel 3. 1 Use Case Login

Use Case Name Login

Actor Admin
Description Dilakukan oleh admin
Pre-Condition Admin mengakses aplikasi
Scenario ● Admin menginput Username dan password yang sudah
terdaftar untuk melakukan login
● Admin dapat mengakses aplikasi web

Post-Condition Admin masuk ke dalam aplikasi

Tabel 3. 2 Melakukan Monitoring

Use Case Name Melakukan Monitoring

Actor Admin
Description Dilakukan oleh admin
Pre-Condition Admin melakukan monitoring cafe
Scenario ● Admin mengakses aplikasi web
● Admin melihat nomer meja yang terisi dan kosong
● Admin melakukan set active ketika meja sudah terisi
● Admin melakukan set leave ketika meja sudah kosong

Post-Condition Admin dapat melakukan monitoring cafe

 Tabel 3. 3 Menambahkan Pesanan Baru

Use Case Name Menambahkan pesanan baru

Actor Admin
Description Dilakukan oleh admin
Pre-Condition Admin mengakses aplikasi web
Scenario ● Pilih menu pesanan baru
● Pilih meja
● Pilih nama pelanggan
● Masukan Jumlah tamu
● Klik next untuk pilih menu
● Pilih Kategori makanan
● Pilih makanan
● Klik proses pesanan
● Masukan Nominal pesanan
● Klik proses pembayaran atau bayar nanti
Post-Condition Admin melakukan pesanan baru

Tabel 3. 4 Melihat Pesanan

Use Case Name Melihat pesanan

Actor Admin
Description Dilakukan oleh admin untuk melihat pesanan
Pre-Condition Admin sudah mengakses aplikasi web
Scenario ● Admin memilih menu melihat pesanan
● Admin telah melihat daftar pesanan
● Admin bisa melakukan update pesanan, bayar dan
batalkan pesanan

Post-Condition Admin melihat daftar pesanan

 Tabel 3. 5 Melihat Aktifitas Delivery order

Use Case Name Melihat aktifitas delivery order

Actor Admin
Description Dilakukan oleh admin untuk melihat aktifitas delivery order
Pre-Condition Admin sudah mengakses aplikasi web
Scenario ● Admin memilih menu delivery order
● Admin telah melihat daftar delivery order
Post-Condition Admin melihat daftar delivery order

Tabel 3. 6 Menambahkan Menu

Use Case Name Menambahkan Menu

Actor Admin
Description Dilakukan oleh admin untuk menambahkan menu
Pre-Condition Admin sudah mengakses aplikasi web
Scenario ● Admin memilih menu data master
● Admin memilih sub menu menu
● Admin memilih tambah menu
● Admin memasukan spesifikasi menu yang ingin
ditambahkan
● Admin memilih simpan menu baru

Post-Condition Admin meanmbahkan menu baru

 Tabel 3. 7 Menambahkan Pelanggan

Use Case Name Menambahkan pelanggan

Actor Admin
Description Dilakukan oleh admin untuk menambahkan menu
Pre-Condition Admin sudah mengakses aplikasi web
Scenario ● Admin memilih menu data master
● Admin memilih sub menu pelanggan
● Admin memilih tambah pelanggan
● Admin memasukan data pelanggan yang ingin
ditambahkan
● Admin memilih simpan

Post-Condition Admin meanmbahkan menu baru

Tabel 3. 8 Menambahkan Bahan Baku

Use Case Name Menambahkan bahan baku

Actor Admin
Description Dilakukan oleh admin untuk menambahkan bahan baku
Pre-Condition Admin sudah mengakses aplikasi web
Scenario ● Admin memilih menu data master
● Admin memilih sub menu bahan baku
● Admin memilih tambah bahan baku
● Admin memasukan data bahan baku yang ingin
ditambahkan
● Admin memilih simpan bahan baku
● Admn melihat daftar bahan baku yang telah
ditambahkan

Post-Condition Admin meanmbahkan bahan baku

 Tabel 3. 9 Menambahkan Meja

Use Case Name Menambahkan Meja

Actor Admin
Description Dilakukan oleh admin untuk menambahkan meja
Pre-Condition Admin sudah mengakses aplikasi web
Scenario ● Admin memilih menu data master
● Admin memilih sub menu meja
● Admin memilih tambah meja
● Admin memasukan data meja yang ingin ditambahkan
● Admin memilih simpan meja
● Admin melihat daftar meja beserta deskripsinya

Post-Condition Admin meanmbahkan meja

Tabel 3. 10 Menambahkan Promo

Use Case Name Menambahkan Promo

Actor Admin
Description Dilakukan oleh admin untuk menambahkan promo
Pre-Condition Admin sudah mengakses aplikasi web
Scenario ● Admin memilih menu data master
● Admin memilih sub menu promo
● Admin memilih tambah promo
● Admin memasukan data promo yang ingin
ditambahkan
● Admin memilih simpan promo
● Admin melihat daftar promo beserta deskripsinya

Post-Condition Admin meanmbahkan promo

 Tabel 3. 11 Menambahkan Mitra

Use Case Name Menambahkan Mitra

Actor Admin
Description Dilakukan oleh admin untuk menambahkan meja
Pre-Condition Admin sudah mengakses aplikasi web
Scenario ● Admin memilih menu data master
● Admin memilih sub menu mitra
● Admin memilih tambah mitra
● Admin memasukan data mitra yang ingin ditambahkan
● Admin memilih simpan mitra
● Admin melihat daftar mitra beserta deskripsinya

Post-Condition Admin menambahkan mitra

Tabel 3. 12 Menambahkan Pembelian Bahan Baku

Use Case Name Menambahkan pembelian bahan baku

Actor Admin
Description Dilakukan oleh admin untuk menambahkan pembelian bahan
baku
Pre-Condition Admin sudah mengakses aplikasi web
Scenario ● Admin memilih menu pengeluaran
● Admin memilih sub menu pembelian bahan baku
● Admin memilih tambah pembelian
● Admin memasukan data pembelian yang ingin
ditambahkan
● Admin memilih proses
● Admin melihat daftar pembelian beserta deskripsinya

Post-Condition Admin meanmbahkan pembelian bahan baku

 Tabel 3. 13 Melihat dan Menambahkan Pengeluaran

Use Case Name Melihat dan Menambahkan pengeluaran

Actor Admin
Description Dilakukan oleh admin untuk menambahkan meja
Pre-Condition Admin sudah mengakses aplikasi web
Scenario ● Admin memilih menu pengeluaran
● Admin memilih sub menu pengeluaran cafe
● Admin memilih tambah pengeluaran
● Admin memasukan data pengeluaran yang ingin
ditambahkan
● Admin memilih simpan
● Admin melihat daftar pengeluaran cafe beserta
deskripsinya

Post-Condition Admin melihat dan menambahkan pengeluaran resto

Tabel 3. 14 Melihat Arus Kas

Use Case Name Melihat Arus kas

Actor Admin
Description Dilakukan oleh admin untuk melihat arus kas
Pre-Condition Admin sudah mengakses aplikasi web
Scenario ● Admin memilih menu laporan & statistik
● Admin memilih sub menu arus kas
● Admin melihat arus
Post-Condition Admin melihat arus kas
 Tabel 3. 15 Melihat Laporan transaksi

Use Case Name Melihat Laporan transaksi

Actor Admin
Description Dilakukan oleh admin untuk melihat laporan transaksi
Pre-Condition Admin sudah mengakses aplikasi web
Scenario ● Admin memilih menu laporan & statistik
● Admin memilih sub menu arus kas
● Admin melihat arus
Post-Condition Admin melihat laporan transaksi

Tabel 3. 16 Melihat Statistik Cafe

Use Case Name Melihat statistik cafe

Actor Admin
Description Dilakukan oleh admin untuk melihat statistik cafe
Pre-Condition Admin sudah mengakses aplikasi web
Scenario ● Admin memilih menu laporan & statistik
● Admin memilih sub menu statistik cafe
● Admin melihat arus
Post-Condition Admin melihat laporan transaksi

Tabel 3. 17 Menambahkan User

Use Case Name Menambahkan User

Actor Admin
Description Dilakukan oleh admin untuk menambahkan user
Pre-Condition Admin sudah mengakses aplikasi web
Scenario ● Admin memilih menu setting cafe
● Admin memilih sub menu manajamen user
● Admin menambahkan data user untuk ditambahkan
● Admin pilih simpan
● Admin melihat daftar user
Post-Condition Admin melihat laporan transaksi
3.3.3. Activity Diagram

Gambar 3. 2 Activity Diagram Melihat Menu

Berikut adalah penjelasan mengenai Activity Diagram Melihat Menu:
1. Customer mengunjungi halaman website Batavia Coffee
2. Sistem menampilkan landing page
3. Customer klik menu cafe di halaman website
4. Sistem menampilkan daftar menu cafe
5. Customer memilih menu
6. Sistem memasukan menu yang dipilih customer ke keranjang
7. Apakah pesanan sudah sesuai? Jika belum maka customer memilih menu kembali dan
jika sudah sesuai maka selesai
 Gambar 3. 3 Activity Diagram Melihat Keranjang
Berikut adalah penjelasan mengenai Activity Diagram Melihat Keranjang:
1. Customer mengunjungi halaman website Batavia Coffee
2. Sistem menampilkan halaman landing page
3. Customer klik menu cafe
4. Sistem menampilkan halaman menu cafe
5. Customer klik keranjang di website
6. Sistem menampilkan pesanan dalam keranjang
7. Customer menghapus pesanan yang tidak sesuai
8. Sistem menghapus pesanan
9. Apakah pesanan sudah sesuai? Jika belum sesuai maka customer menghapus kembali
pesanan, jika sudah sesuai maka selesai
 Gambar 3. 4 Activity Diagram Order
Berikut adalah penjelasan mengenai Activity Diagram Order:
1. Customer mengunjungi halaman website Batavia Coffee
2. Sistem menampilkan halaman landing page
3. Customer klik menu cafe
4. Sistem menampilkan halaman menu cafe
5. Customer klik keranjang di website
6. Sistem menampilkan pesanan dalam keranjang
7. Customer klik checkout pesanan
8. Sistem menampilkan halaman checkout
9. Customer mengisi formulir checkout pesanan
10. Sistem menyimpan informasi pemesanan
11. Customer klik pesan sekarang
12. Sistem menampilkan pop-up konfirmasi pesanan sudah sesuai
13. Selesai

Gambar 3. 5 Activity Diagram Login

Berikut adalah penjelasan mengenai Activity Diagram Login:
1. Admin mengunjungi halaman website Batavia Coffee
2. Sistem menampilkan halaman landing page
3. Admin klik tombol login
4. Sistem menampilkan halaman login
5. Admin mengisi username dan password yang sesuai
6. Sistem menyimpan username dan password
7. Admin klik tombol masuk
8. Sistem menampilkan halaman dashboard
 Gambar 3. 6 Activity Diagram Monitoring Cafe
Berikut adalah penjelasan mengenai Activity Diagram Monitoring Cafe:
1. Admin mengunjungi halaman website Batavia Coffee
2. Sistem menampilkan halaman landing page
3. Admin klik tombol login
4. Sistem menampilkan halaman login
5. Admin mengisi username dan password yang sesuai
6. Sistem menyimpan username dan password
7. Admin klik tombol masuk
8. Sistem menampilkan halaman dashboard
9. Admin klik menu monitoring cafe
10. Sistem menampilkan halaman monitoring cafe
 11.Jika meja tersedia maka admin klik set meja aktif, dan jika meja masih diisi
oleh customer maka admin klik set meja non aktif

Gambar 3. 7 Activity Diagram Pesanan Dine in

 Berikut adalah penjelasan mengenai Activity Diagram Pesanan Dine in:
1. Admin mengunjungi halaman website Batavia Coffee
2. Sistem menampilkan halaman landing page
3. Admin klik tombol login
4. Sistem menampilkan halaman login
5. Admin mengisi username dan password yang sesuai
6. Sistem menyimpan username dan password
7. Admin klik tombol masuk
8. Sistem menampilkan halaman dashboard
9. Admin klik menu pesanan baru
10. Sistem menampilkan halaman pemilihan tipe pesanan
11. Admin memilih dine in
12. Sistem menampilkan halaman pilihan menu
13. Admin memilih makanan dan minuman sesuai permintaan customer
14. Sistem menyimpan data pesanan
15. Admin klik tombol proses pesanan
16. Sistem menampilkan halaman pembayaran
17. Admin melakukan pembayaran sesuai customer
18. Sistem menyimpan transaksi
 Gambar 3. 8 Activity Diagram Pesanan Take Home
Berikut adalah penjelasan mengenai Activity Diagram Pesanan Take Home:
1. Admin mengunjungi halaman website Batavia Coffee
2. Sistem menampilkan halaman landing page
3. Admin klik tombol login
4. Sistem menampilkan halaman login
5. Admin mengisi username dan password yang sesuai
6. Sistem menyimpan username dan password
7. Admin klik tombol masuk
8. Sistem menampilkan halaman dashboard
9. Admin klik menu pesanan baru
10. Sistem menampilkan halaman pemilihan tipe pesanan

Gambar 3. 9 Activity Diagram Menambahkan Menu

Berikut adalah penjelasan mengenai Activity Diagram Menambahkan Menu:
1. Admin mengunjungi halaman website Batavia Coffee
2. Sistem menampilkan halaman landing page
3. Admin klik tombol login
4. Sistem menampilkan halaman login
5. Admin mengisi username dan password yang sesuai
6. Sistem menyimpan username dan password
7. Admin klik tombol masuk
8. Sistem menampilkan halaman dashboard
9. Admin klik menu data master kemudian submenu menu cafe
10. Sistem menampilkan halaman menu cafe
11. Admin memasukan detail menu yang ingin ditambahkan
12. Sistem menyimpan data menu

Gambar 3. 10 Activity Diagram Menambahkan Pelanggan

 Berikut adalah penjelasan mengenai Activity Diagram Menambahkan Pelanggan:
1. Admin mengunjungi halaman website Batavia Coffee
2. Sistem menampilkan halaman landing page
3. Admin klik tombol login
4. Sistem menampilkan halaman login
5. Admin mengisi username dan password yang sesuai
6. Sistem menyimpan username dan password
7. Admin klik tombol masuk
8. Sistem menampilkan halaman dashboard
9. Admin klik master data kemudian submenu pelanggan
10. Sistem menampilkan halaman pelanggan
11. Admin mengisi formulir detail pelanggan
12. Sistem menyimpan data pelanggan
 Gambar 3. 11 Activity Diagram Menambahkan Meja
Berikut adalah penjelasan mengenai Activity Diagram Menambahkan Meja:
1. Admin mengunjungi halaman website Batavia Coffee
2. Sistem menampilkan halaman landing page
3. Admin klik tombol login
4. Sistem menampilkan halaman login
5. Admin mengisi username dan password yang sesuai
6. Sistem menyimpan username dan password
7. Admin klik tombol masuk
8. Sistem menampilkan halaman dashboard
9. Admin klik master data kemudian submenu meja
10. Sistem menampilkan halaman meja
11. Admin mengisi formulir detail meja
12. Sistem menyimpan data meja
 Gambar 3. 12 Activity Diagram Menambahkan Mitra
Berikut adalah penjelasan mengenai Activity Diagram Menambahkan Mitra:
1. Admin mengunjungi halaman website Batavia Coffee
2. Sistem menampilkan halaman landing page
3. Admin klik tombol login
4. Sistem menampilkan halaman login
5. Admin mengisi username dan password yang sesuai
6. Sistem menyimpan username dan password
7. Admin klik tombol masuk
8. Sistem menampilkan halaman dashboard
9. Admin klik master data kemudian submenu mitra
10. Sistem menampilkan halaman mitra
11. Admin mengisi formulir detail mitra
12. Sistem menyimpan data mitra

Gambar 3. 13 Activity Diagram Menambahkan Promo

Berikut adalah penjelasan mengenai Activity Diagram Menambahkan Promo:
1. Admin mengunjungi halaman website Batavia Coffee
2. Sistem menampilkan halaman landing page
3. Admin klik tombol login
4. Sistem menampilkan halaman login
5. Admin mengisi username dan password yang sesuai
6. Sistem menyimpan username dan password
7. Admin klik tombol masuk
8. Sistem menampilkan halaman dashboard
9. Admin klik master data kemudian submenu promo
10. Sistem menampilkan halaman promo
11. Admin mengisi formulir detail promo
12. Sistem menyimpan data promo

Gambar 3. 14 Activity Diagram Menambahkan Bahan Baku

 Berikut adalah penjelasan mengenai Activity Diagram Menambahkan Bahan Baku:
1. Admin mengunjungi halaman website Batavia Coffee
2. Sistem menampilkan halaman landing page
3. Admin klik tombol login
4. Sistem menampilkan halaman login
5. Admin mengisi username dan password yang sesuai
6. Sistem menyimpan username dan password
7. Admin klik tombol masuk
8. Sistem menampilkan halaman dashboard
9. Admin klik master data kemudian submenu bahan baku
10. Sistem menampilkan halaman bahan baku
11. Admin mengisi formulir detail bahan baku
12. Sistem menyimpan data bahan baku
 Gambar 3. 15 Activity Diagram Pengeluaran Cafe
Berikut adalah penjelasan mengenai Activity Diagram Pengeluaran Cafe:
1. Admin mengunjungi halaman website Batavia Coffee
2. Sistem menampilkan halaman landing page
3. Admin klik tombol login
4. Sistem menampilkan halaman login
5. Admin mengisi username dan password yang sesuai
6. Sistem menyimpan username dan password
7. Admin klik tombol masuk
8. Sistem menampilkan halaman dashboard
9. Admin klik pengeluaran kemudian submenu pengeluaran cafe
10. Sistem menampilkan halaman pengeluaran cafe
11. Admin mengisi formulir detail pengeluaran cafe
12. Sistem menyimpan data pengeluaran

Gambar 3. 16 Activity Diagram Arus Kas

Berikut adalah penjelasan mengenai Activity Diagram Arus Kas:
1. Admin mengunjungi halaman website Batavia Coffee
2. Sistem menampilkan halaman landing page
3. Admin klik tombol login
4. Sistem menampilkan halaman login
5. Admin mengisi username dan password yang sesuai
6. Sistem menyimpan username dan password
7. Admin klik tombol masuk
8. Sistem menampilkan halaman dashboard
9. Admin klik menu laporan & statistik kemudian submenu arus kas
10. Sistem menampilkan halaman arus kas

Gambar 3. 17 Activity Diagram Laporan Pengeluaran

Berikut adalah penjelasan mengenai Activity Diagram Laporan Pengeluaran:
1. Admin mengunjungi halaman website Batavia Coffee
2. Sistem menampilkan halaman landing page
3. Admin klik tombol login
4. Sistem menampilkan halaman login
5. Admin mengisi username dan password yang sesuai
6. Sistem menyimpan username dan password
7. Admin klik tombol masuk
8. Sistem menampilkan halaman dashboard
9. Admin klik menu laporan & statistik kemudian submenu laporan transaksi
10. Sistem menampilkan halaman laporan transaksi
11. Admin memilih tahun yang ingin dilihat laporan transaksi tersebut
12. Sistem menampilkan detail transaksi
13. Admin klik cetak laporan tahun
14. Sistem menampilkan printout laporan tahun

Gambar 3. 18 Activity Diagram Statistik Cafe

Berikut adalah penjelasan Activity Diagram Statistik Cafe:
1. Admin mengunjungi halaman website Batavia Coffee
2. Sistem menampilkan halaman landing page
3. Admin klik tombol login
4. Sistem menampilkan halaman login
5. Admin mengisi username dan password yang sesuai
6. Sistem menyimpan username dan password
7. Admin klik tombol masuk
8. Sistem menampilkan halaman dashboard
9. Admin klik menu laporan & statistik kemudian submenu statistik cafe
10. Sistem menampilkan halaman statistik cafe

Gambar 3. 19 Activity Diagram Manajemen User

 Berikut adalah penjelasan mengenai Activity Diagram Manajemen User:
1. Admin mengunjungi halaman website Batavia Coffee
2. Sistem menampilkan halaman landing page
3. Admin klik tombol login
4. Sistem menampilkan halaman login
5. Admin mengisi username dan password yang sesuai
6. Sistem menyimpan username dan password
7. Admin klik tombol masuk
8. Sistem menampilkan halaman dashboard
9. Admin klik menu setting cafe kemudian submenu manajemen user
10. Sistem menampilkan halaman manajemen user
11. Admin mengisi formulir detail user
12. Sistem menyimpan data user
 BAB 4
PENGEMBANGAN SISTEM

4.1 User Interface

Berikut merupakan tampilan antarmuka setiap menu yang ada pada sistem manajemen
Batavia Cafe:
a. Landing Page
Halaman landing page yang diusulkan merupakan halaman yang berisikan
informasi sederhana mengenai kedai kopi Batavia Coffee yang ditujukan untuk customer
dalam melakukan pesanan take home dan admin untuk mengelola manajemen cafe.
Untuk customer dapat langsung melakukan pemesanan tanpa harus melakukan login
terlebih dahulu dan untuk admin harus melakukan login terlebih dahulu untuk mengelola
manajemen cafe. Tampilan landing page dapat dilihat pada gambar 4.1.

Gambar 4. 1 Halaman Landing Page

b. Halaman Order
Halaman order ini merupakan halaman yang menampilkan menu yang tersedia
pada Batavia Coffee dan dapat dipesan. Pada halaman ini customer tidak perlu login
untuk dapat melakukan pemesanan, yaitu customer cukup menambahkan menu yang
ingin dipesan dan menu tersebut akan masuk ke keranjang pesanan. Kami menerapkan
hal seperti ini agar customer tidak membutuhkan waktu yang lama untuk melakukan
pemesanan sehingga jika customer sudah melakukan pembayaran maka akan
dikonfirmasi oleh admin melalui Whatsapp atau Telepon mengenai pesanan tersebut.
Sehingga hal tersebut mengurangi penggunaan database untuk data pelanggan yang tidak
mengunjungi kedai kopi Batavia Coffee. Tampilan halaman order dapat dilihat pada
gambar 4.2.
 Gambar 4. 2 Halaman Order
c. Halaman Checkout
Pada halaman checkout ini menampilkan pesanan apa saja yang sudah dimasukan
kedalam keranjang oleh customer dan pada tahap ini customer akan diarahkan untuk
melengkapi informasi customer dan metode pembayaran. Untuk saat ini metode
pembayaran yang disediakan didalam sistem adalah metode Cash on Delivery (COD).
Setelah customer mengkonfirmasi pesanan tersebut maka pihak Batavia Coffee akan
memproses pesanan dan mengirimkan pesanan tersebut ke alamat customer. Tampilan
halaman checkout dapat dilihat pada gambar 4.3.

Gambar 4. 3 Halaman Checkout

d. Halaman Login
Halaman login ini merupakan halaman untuk dapat mengakses ke halaman
dashboard manajemen Batavia Coffee, pengguna yang memiliki akses untuk masuk
kedalam dashboard sistem adalah internal manajemen Batavia Coffee. Hal ini diterapkan
agar tidak ada penyalahgunaan sistem oleh pihak lain sehingga keamanan sistem cukup
terjaga. Kami juga menerapkan penambahan user login pada halaman dashboard dan
hanya administrator yang dapat menambahkan user login tersebut, sehingga tidak semua
pengguna dapat membuat user login baru. Username dan password menjadi mandatory
untuk dapat memasuki halaman dashboard dan jika salah satu mandatory tersebut salah
maka sistem akan menolak. Tampilan halaman login dapat dilihat pada gambar 4.4.

Gambar 4. 4Halaman Login

e. Halaman Dashboard
Halaman dashboard ini menampilkan ringkasan dari manajemen Batavia Coffee, yang
mana ringkasan manajemen tersebut berupa jumlah pengunjung, jumlah pelanggan, rasio
profit, dan jumlah transaksi harian. Pada halaman ini admin dapat mengakses berbagai
menu dan fitur yang ada di sistem sehingga untuk melakukan penambahan data master
dan perubahan pada pengelolaan sistem dapat diakses oleh admin. Tampilan halaman
dashboard dapat dilihat pada gambar 4.5.
 Gambar 4. 5 Halaman Dashboard
f. Halaman Monitoring Cafe
Halaman monitoring cafe yang disediakan merupakan halaman untuk memonitoring
meja yang tersedia dan yang sedang terisi. Dengan adanya hal tersebut, admin dapat
mengetahui jumlah meja yang masih kosong dan jumlah meja yang sudah terisi sehingga
jika terdapat pengunjung yang baru mendatangi Batavia Coffee dapat dipastikan oleh
admin mengenai meja yang masih tersedia. Pada halaman ini admin memiliki akses untuk
melakukan setting meja aktif atau non aktif. Tampilan halaman monitoring cafe dapat
dilihat pada gambar 4.6

Gambar 4. 6 Halaman Monitoring Cafe

g. Halaman Pesanan Dine in
Sebelum menuju ke halaman pesanan dine in, admin akan diarahkan ke halaman
pemilihan pesanan baru. Pada halaman tersebut admin dapat memilih tipe pesanan yang
ingin dilakukan oleh customer. Setelah masuk ke halaman pesanan dine in, admin akan
diarahkan untuk memilih meja dan mengisi nama pelanggan yang tersedia serta
banyaknya pelanggan tersebut. Jika data pelanggan belum tersedia maka admin dapat
menambahkan data master pelanggan terlebih dahulu. Jika pemilihan meja dan pengisian
nama customer sudah dilakukan maka admin akan diarahkan ke halaman memproses
pesanan yaitu pemilihan menu. Tampilan halaman pesanan dine in dapat dilihat pada
gambar 4.7
 Gambar 4. 7 Halaman Pesanan Dine in
h. Halaman Pesanan Take Home
Untuk customer yang ingin melakukan pesanan dan langsung membawa pesanan pulang
maka admin dapat menambahkan pesanan di menu pesanan take home. Karena pada
menu ini admin tidak perlu memilih meja yang akan ditempati oleh customer. Pada
halaman ini admin cukup mengisi nama pelanggan serta menu apa saja yang dipilih oleh
customer. Setelah hal tersebut sesuai maka admin dapat langsung memproses pesanan.
Tampilan halaman pesanan take home dapat dilihat pada gambar 4.8.

Gambar 4. 8 Halaman Pesanan Take Home

i. Pesanan Cafe
Pada halaman pesanan cafe tampilan yang disediakan adalah daftar semua tipe pesanan
yang dilakukan, baik pesanan dine in maupun pesanan take home. Pada halaman ini
 admin dapat melihat seluruh pesanan yang ada, fungsi nya adalah admin dapat
mengetahui pesanan mana yang sedang diproses, sudah selesai ataupun belum diproses.
Sehingga jika terdapat customer yang belum melakukan pembayaran maka admin dapat
menagih pembayaran tersebut kepada customer terkait. Tampilan halaman pesanan cafe
dapat dilihat pada gambar 4.9.

Gambar 4. 9 Halaman Pesanan Cafe

j. Delivery Order

Pada halaman delivery order tampilan yang disediakan adalah daftar semua pesanan yang
dilakukan melalui delivery order, admin dapat melihat seluruh pesanan yang ada, fungsinya
adalah admin dapat mengetauhi pesanan yang dilakukan melalui delivery order, tampilan
halaman delivery order bisa dilihat pada gambar 4.10

Gambar 4. 10 Halaman Delivery Order

k. Menu

Pada halaman menu tampilan yang disediakan adalah daftar menu yang ada dalam batavia
coffee, admin dapat melihat seluruh menu dan admin bisa melakukan penambahan menu jika
itu dibutuhkan, tampilan halaman menu bisa dilihat pada gambar 4.11

Gambar 4. 11 Halaman Menu

l. Daftar Pelanggan

Pada halaman pelanggan yang disediakan adalah daftar pelanggan yang ada dalam Batavia
coffee, fungsi dari daftar pelanggan ini adalah untuk membuat data pelanggan yang
berkunjung ke tempat Batavia coffee, dan juga sebagai tolak ukur untuk batavi coffee
terhadap pelanggan yang datang, selain itu admin juga bisa terus update untuk daftar
pelanggan, tampilan halaman daftar pelanggan bisa dilihat pada gambar 4.12
 Gambar 4. 12 Halaman Daftar pelanggan

m. Bahan baku

Pada halaman bahan baku yang disediakan adalah seluruh daftar bahan baku yang digunakan
dan diperlukan dalam Batavia coffee, fungsi dari daftar bahan baku ini adalah untuk
mengelola kebutuhan bahan baku Batavia coffee, tampilan halaman bahan baku dapat dilihat
pada gambar 4.13

Gambar 4. 13 Halaman Bahan Baku

n. Meja

Pada halaman meja yang disediakan adalah seluruh daftar meja yang ada dalam Batavia
coffee, fungsi daftar meja ini adalah untuk bisa memonitoring meja yang ada di Batavia
coffee, admin bisa mengetauhi meja yang terisi dan juga kosong, disamping itu admin juga
bisa menambahkan daftar meja jika dipelrukan, tampilan halaman meja dapat dilihat pada
gambar 4.14
 Gambar 4. 14 Halaman Meja
o. Promo

Pada halaman promo yang disediakan adalah daftar promo yang bisa digunakan Ketika
transaksi di Batavia coffee, fungsi dari daftar promo ini adalah untuk bisa memonitoring
promo yang berlaku di Batavia dan bisa menambahkan promo jika diperlukan, tampilan
halaman promo bisa dilihat pada gambar 4.15

Gambar 4. 15 Halaman Promo

p. mitra

Pada halam mitra yang disediakan adalah daftar mitra yang bekerjasama dengan Batavia
coffee, fungsi dari daftar mitra ini adalah untuk melihat dan menambahkan mitra yang ingin
atau sudah bekerjasama dengan Batavia coffee, selain itu halaman mitra ini juga berfungsi
untuk catatan Batavia coffee Ketika ingin restock bahan baku, tampilan halaman mitra bisa
dilihat pada gambar 4.16

Gambar 4. 16 Halaman Mitra

q. Pembelian Bahan baku

Pada halaman pembelian bahan baku yang disediakan adalah daftar pembelian bahan baku
yag digunakan oleh Batavia coffee, fungsi dari halaman ini adalah untuk bisa mengelola
pengeluaran bahan baku Batavia coffee, tampilan halaman pembelian bahan baku dapat
dilihat pada gambar 4.17

Gambar 4. 17 Halaman Pemebelian Bahan Baku

r. Pengeluaran Café

Pada halaman pengeluaran café yang disediakan adalah daftar pengeluaran café yang ada di
Batavia coffee, fungsi dari halaman ini adalah untuk bisa melihat pengeluaran tetap pada
Batavia coffee, seperti gaji pegawai, listrik, operasional dll, selain itu halama ini berguna
untuk menambahkan daftar pengeluaran jika dibutuhkan, perbedaan halaman pengeluaran
café dan pembelian bahan baku adalah bentuk pengeluaranya yang dikeluarkan oleh Batavia
coffee, tampilan halaman pengeluaran café bisa dilihat pada gambar 4.18

Gambar 4. 18 Halaman Pengeluaran Café

s. Arus Kas

Pada halaman arus kas yang disediakan adalah daftar seluruh pesmasukan dan pengeluaran
Batavia coffee, mulai dari pembelian bahan baku, pengeluaran pokok, fungsi dari arus kas ini
adalah untuk memonitoring seluruh pemasukan dan pengeluaran yang ada didalam Batavia
coffee, tampilan halaman arus kas bisa dilihat pada gambar 4.19

Gambar 4. 19 Halaman Arus Kas

t. Laporan Transaksi

Pada halaman transaksi yang disediakan adalah seluruh laporan transaksi secara detail dari
setiap tahun dan bulan yang ada di Batavia coffee, fungsi dari laporan transaksi adalah untuk
melihat seluruh transaksi masuk dan keluar yang ada di Batavia coffee, tampilan halaman
laporan transaksi bisa dilihat pada gambar 4.20

Gambar 4. 20 Halaman Laporan Transaksi

u. Statistik Cafe

Pada halama ini yang disediakan adalah statistik pemasukan harian, tipe pesanan, dan menu
terlaris, fungsi dari fitur ini adalah untuk bisa melihat dan menjadi tolak ukur kemajuan dari
Batavia coffee, tampilan statistik café bisa dilihat pada gambar 4.21

Gambar 4. 21 Halaman Statistik Cafe

 BAB 5 KESIMPULAN DAN SARAN

5.1 Kesimpulan
Dengan adanya website Batavia coffee ini dapat diambil kesimpulan sebagai berikut:

1. Web ini telah berhasil dibangun dengan menggunakan PHP dengan javascript dan
database MySQL.
2. Web ini dibuat untuk memudahkan sistem manajamen yang ada di Batavia coffee.
3. Web ini telah berhasil dibangun secara khusus untuk Batavia coffee.
4. Web ini dapat dapat digunakan untuk mengelola sistem manajamen Batavia coffee yang
sebelumnya manual, banyak fitur yang dapat digunakan dalam web ini, seperti
pemesanan, daftar meja, daftar pelanggan, daftar menu, laporan transaksi dll.

5.2 Saran

1. Beberapa saran yang dapat diambil dari proses analisa sampai pada pembuatan website
Batavia coffee, sebagai berikut:
2. Web ini diharapkan bisa dikembangkan lebih lanjut.
3. Web ini bisa digunakan untuk mempermudah seluruh pengelolaan dalam Batavia coffee
4. Perlu adanya salinan data (back up) untuk mencegah hal-hal yang tidak diinginkan
5. Harus adanya pelatihan administrator agar dapat menjalankan web ini dengan baik
.