46 BAB III ANALISA DAN PERANCANGAN SISTEM 3.1 Sejarah Perusahaan Batalion Barbershop adalah salah satu usaha jasa perawatan rambut yang berada di Jakarta Selatan. Batalion Barbershop merupakan usaha yang masih memakai sistem pemesanan tradisional. Batalion Barbershop berada di Jalan H. Muchtar Raya, Petukangan Utara Jakarta Selatan. 3.2 Struktur Organisasi PEMILIK KASIR PEGAWAI Gambar 3.1 Struktur Organisasi pada Batalion Barbershop 3.3 Analisis Sistem Berjalan Untuk melakukan pemesanan pelanggan harus menulis nama terlebih dahulu untuk mendapatkan nomor antrian kemudian pelanggan memilih jenis perawatan rambut yang diinginkan dan kasir mencatat pesanan pelanggan secara manual. Setelah pelanggan sudah selesai memotong rambut, kasir menulis total pembayaran dan memberikan bukti pembayaran kepada pelanggan. Analisis sistem berjalan ini divisualisasikan dan di dokumentasikan dengan alat bantu UML melalui diagram use case, skenario use case, activity diagram dan sequnce
47 diagram. Analisis sistem yang sedang berjalan pada Batalion Barbershop adalah sebagai berikut : 3.3.1 Gambaran Umum Sistem Berjalan Gambaran Umum Sistem Berjalan ini bertujuan untuk mengetahui lebih jelas bagaimana cara kerja sistem tersebut dan masalah apa yang sedang di hadapi untuk dapat dijadikan usulan perancangan sistem. Gambaran Umum Sistem Berjalan dapat dilihat pada Gambar 3.2 1. Menginput Nama Untuk Mendapatkan Nomor Antrian Kasir 4. Kasir Memberikan Bukti Pembayaran 2. Mencatat Pesanan Gambar 3.2 Gambaran Umum Sistem Berjalan 3.3.2 Prosedur Sistem Berjalan Adapun proses pemesanan jasa perawatan rambut adalah sebagai berikut : Pertama pelanggan harus menginput nama di kasir untuk mendapatkan nomor antrian, kemudian kasir mencatat pesanan pelanggan secara manual. Setelah pelanggan sudah selesai memotong rambut, kasir menulis total pembayaran dan memberikan bukti pembayaran kepada pelanggan. Masalah yang sedang dihadapi pada sistem ini adalah kasir masih mencatat pesanan pelanggan secara manual dan hasilnya pun belum tentu efektif.
48 3.3.3 Analisa Permasalahan Sistem yang Berjalan Sistem yang dijalankan atau dilakukan pada saat melakukan pemesanan masih secara manual. Sistem manual adalah pelanggan harus datang terlebih dahulu ke Batalion Barbershop, kemudian pelanggan menginput nama untuk mendapatkan nomor antrian dan pelanggan melakukan pemesanan ke kasir dan kasir mencatat pesanan pelanggan secara manual. Setelah pelanggan sudah selesai memotong rambut, kasir menulis total pembayaran dan memberikan bukti pembayaran kepada pelanggan. Dari kegiatan manual diatas maka akan muncul berbagai kendala permasalahan salah satunya yaitu pelanggan harus menunggu dengan waktu yang cukup lama jika barbershop sedang ramai dan akhirnya pelanggan memilih untuk pulang dan membatalkan pesanannya. Hal di atas dapat diatasi dengan cara menggunakan pemesanan online dengan media android. Dengan adanya aplikasi pemesanan perawatan rambut berbasis android ini dapat memberikan kemudahan kepada pelanggan dalam melakukan pemesanan tanpa harus mengantri atau menunggu dengan waktu yang cukup lama dan sekaligus bisa menentukan jenis perawatan, barberman, tanggal dan waktu yang dapat ditentukan sendiri. 3.3.4 Analisa Kebutuhan Sistem Sistem yang akan dibangun adalah aplikasi jasa perawatan rambut berbasis android. Ada beberapa kebutuhan yang harus dapat dipenuhi oleh sistem agar sistem dapat dikatakan bermanfaat dan dapat mencapai tujuan yang telah ditetapkan sebelumnya. Kebutuhan utama dari aplikasi adalah harus dapat memberikan hasil yang lebih efektif kepada siswa jika dibandingkan pemesanan perawatan rambut secara manual tanpa bantuan aplikasi. Berikut ini adalah beberapa fasilitas dan fitur dari sistem yang dapat memenuhi kebutuhan pelanggan di atas. Aplikasi mempunyai fleksibilitas untuk memilih perawatan rambut, barberman, tanggal dan waktu. Hal ini dapat dilakukan dengan memberikan fitur
49 booking dimana dalam fitur tersebut ada menu perawatan, menu batalkan pemesanan, menu cek status, dan halaman kembali ke menu utama. Dengan menghubungkan aplikasi ke database secara online maka akan dapat dipenuhi kebutuhan sistem diatas sehingga akan diperoleh manfaat hasil yang lebih baik jika dibandingkan dengan datang langsung ke barbershop tanpa menggunakan aplikasi. 3.4 Perancangan Sistem yang Diusulkan Tujuan dari perancangan sistem adalah untuk memenuhi kebutuhan pelanggan mengenai gambaran yang jelas tentang perancangan sistem yang akan dibuat serta diimplementasikan. Untuk memulai membangun suatu program yang berupa Aplikasi Pemesanan Jasa Perawatan Rambut Berbasis Android, maka terlebih dahulu merencakanakan alur kerja berdasarkan kebutuhan user yang akan menggunakan Aplikasi Pemesanan Jasa Perawatan Rambut Berbasis Android ini dengan menggunakan diagram UML. 3.4.1 Gambaran Umum Sistem Yang Diusulkan Pembuatan aplikasi pemesanan jasa perawatan rambut yang akan dibuat mampu menampilkan menu jasa perawatan rambut secara digital dan pemesanan secara online yang dilakukan oleh pelangggan memanfaatkan koneksi internet sehingga dapat terkoneksi langsung antara admin menggunakan smartphone android.
50 4. Konfirmasi Aplikasi Pada Smartphone Android Admin 1. Memesan Perawatan Rambut 3. Menampilkan Data 2. Menyimpan Data Internet Gambar 3.4 Gambaran Umum Sistem yang Diusulkan Perangkat lunak pada server yaitu web server yang ditangani oleh script PHP dan MySQL sebagai database berfungsi untuk menangani koneksi client yang berbasis android. Setiap request dari client akan ditangani oleh webserver. Aplikasi pada client (pembeli) dibuat menggunakan platform android, aplikasi ini akan dipasangkan pada smartphone / tablet android yang digunakan oleh client (pembeli). Aplikasi ini berfungsi untuk melakukan pemesanan jasa perawatan rambut dengan data yang dikirim ke web server dan selanjutya diproses ke kasir. Pada bagian kasir menggunakan komputer sebagai antarmuka berbasis web dan internet sebagai penghubung untuk melakukan koneksi ke webserver. 3.4.2 Perancangan Prosedur Yang Diusulkan Proses perancangan ini merupakan tahapan awal dari perancangan aplikasi pemesanan jasa perawatan rambut yang dilakukan sebagai pemecah masalah yang ada pada proses aplikasi pemesanan jasa perawatan rambut ketika digunakan.
51 3.4.3 Pemodelan Diagram Use Case Use Case menjelaskan manfaat sistem jika dilihat menunjukkan pandangan orang yang berada di luar sistem (actor), diagram use case juga menunjukan fungsionalitas suatu sistem atau kelas dan bagaimana sistem berinteraksi dengan dunia luar. Secara umum pemodelan use case pada aplikasi ini dapat dilihat pada gambar dibawah ini: Register Memilih Menu Perawatan Login Memilih Barber Man Memilh Tanggal & Waktu Konfirmasi Pesanan Admin Cek Status Gambar 3.5 Use Case Diagram Sistem Usulan Kelebihan dari perancangan sistem yang diusulkan adalah sebuah sistem yang dibuat mampu mempermudah pemesanan di Batalion Barbershop, berbeda dengan sistem yang lama atau sistem yang sedang berjalan, sistem yang diusulkan yang nantinya akan mampu menampilkan menu perawatan rambut secara digital dan pemesanan secara online yang dilakukan oleh pembeli memanfaatkan koneksi internet sehingga dapat terkoneksi langsung antara pelanggan dan kasir menggunakan smartphone android.
52 3.4.4 Skenario Use Case Skenario Use Case digunakan untuk memudahkan dalam menganalisa skenario yang akan digunakan pada fase-fase selanjutnya dengan melakukan penilaian terhadap skenario tersebut. Berikut skenario use case yang diusulkan : Tabel 3.5 Skenario Use Case Diagram Register Nama Use Case Aktor Pre-kondisi Tindakan Post Kondisi Register Masuk di Halaman Login dan Pilih Button Registrasi Mengisi Data-Data Terutama Email dan Password Masukkan Email dan Password di Halaman Login Tabel 3.6 Skenario Use Case Diagram Memilih Menu Perawatan Nama Use Case Aktor Pre-kondisi Tindakan Post Kondisi Memilih Menu Perawatan Masuk di Menu Utama Memilih Menu Perawatan Pesanan Akan Masuk kedalam Database Tabel 3.7 Skenario Use Case Diagram Memilih Barber Man Nama Use Case Aktor Pre-kondisi Tindakan Post Kondisi Memilih Barber Man Masuk ke Menu Pilih Barber Man Memilih Barber Man Pesanan Akan Masuk kedalam Database
53 Tabel 3.8 Skenario Use Case Diagram Memilih Tanggal dan Waktu Nama Use Case Aktor Pre-kondisi Tindakan Post Kondisi Memilih Tanggal dan Waktu Masuk ke Menu Pilih Tanggal dan Waktu Memilih Tanggal dan Waktu yang diinginkan Pesanan Langsung Terkirim ke Admin Tabel 3.9 Skenario Use Case Diagram Cek Status Nama Use Case Aktor Pre-kondisi Tindakan Post Kondisi Cek Status Masuk ke Menu Cek Status Mengecek Pesanan dengan Memasukkan Nomor Antrian Status Pesanan akan muncul, jika belum dikonfirmasi maka tidak akan muncul Tabel 3.10 Skenario Use Case Diagram Login Nama Use Case Login Aktor Admin, Pre-kondisi - Tindakan Aktor Memasukkan Email dan Password Untuk Masuk Post Kondisi User Masuk ke dalam Sistem Tabel 3.11 Skenario Use Case Diagram Konfirmasi Pesanan Nama Use Case Aktor Pre-kondisi Tindakan Post Kondisi Konfirmasi Pesanan Admin Sudah Melakukan Pemesanan Melakukan Konfirmasi Pesanan Pesanan Akan Tersimpan
54 3.4.5 Activity Diagram Activity Diagram digunakan untuk model perilaku dalam proses bisnis, dalam berbagai hal activity diagram dapat dipandang sebagai diagram aliran data yang canggih yang digunakan dalam hubungan analis terstruktur. Dalam diagram ini akan digambarkan berbagai aliran activity dalam sistem, yang bertujuan untuk mengetahui alur proses pada sistem yang diusulkan. Berikut adalah diagram activity yang mengacu pada setiap skenario use case yang sudah dibuat sebelumnya. a. Activity Diagram Registrasi System Membuka Aplikasi Menampilkan Halaman Login Pilih Button Registrasi Menampilkan Form Registrasi Gagal Mengisi Form Registrasi Menyimpan Data Berhasil Gambar 3.6 Activity Diagram Registrasi Pada gambar 3.6 membuka aplikasi lalu muncul halaman login, kemudian pelanggan memilih tombol registrasi untuk pengisian data pengguna.
55 Setelah registrasi berhasil maka pelanggan dapat login dengan memasukkan email dan password. b. Activity Diagram Login System Masukkan Email dan Password Validasi Ditolak Diterima Gambar 3.7 Activity Diagram Login Pada gambar 3.7 pelanggan melakukan login sebelum melakukan pemesanan dengan memasukan email dan password yang sudah didaftarkan. Jika email dan password yang dimasukan benar maka sistem akan menampilkan halaman member.
56 c. Activity Diagram Memilih Menu Perawatan System Membuka Menu Perawatan Menampilkan Menu Perawatan Memiih Menu Perawatan yang diinginkan Menginput Pesanan yang dipilih Mengirim Data Pesanan Memilih Barber Man Gambar 3.8 Activity Diagram Memilih Menu Perawatan Pada gambar 3.8 membuka menu perawatan kemudian akan muncul jenis-jenis perawatan, setelah itu pelanggan memilih menu perawatan yang diinginkan, setelah menginput pesanan yang dipilih kemudian akan muncul menu untuk memilih Barber Man.
57 d. Activity Diagram Memilih Barber Man System Memiih Barber Man Menampilkan Menu Barber Man Memilih Menu Barber Man yang diinginkan Menginput Pesanan yang dipilih Mengirim Data Pesanan Memilih Tanggal dan Waktu Gambar 3.9 Activity Diagram Memilih Barber Man Pada gambar 3.9 Pertama akan muncul menu pilihan Barber Man nya, kemudian pelanggan memilih Barber Man yang diinginkannya, setelah pelanggan menginputkan data nya kemudian akan muncul menu pilih tanggal dan waktu.
58 e. Activity Diagram Memilih Tanggal dan Waktu System Memilih Tanggal dan Waktu Menampilkan Tanggal dan Waktu Memilih Tanggal dan Waktu yang diinginkan Menginput Tanggal dan Waktu yang dipilih Menyimpan Data Pesanan Pesanan Masuk ke Admin Gambar 3.10 Activity Diagram Memilih Tanggal dan Waktu Pada gambar 3.10 Pertama akan muncul menu pilihan tanggal dan waktu, setelah itu pelanggan memilih tanggal dan waktu yang diinginkannya, setelah pelanggan menginputkan tanggal dan waktu nya kemudian data akan masuk ke admin.
59 f. Activity Diagram Cek Status System Membuka Menu Cek Status Menampilkan Pencarian Cek Status Menginput Nomor Antrian Untuk Cek Status Menampilkan Status Pesanan Gambar 3.11 Activity Diagram Cek Status Pada gambar 3.11 membuka aplikasi lalu memilih menu cek status lalu menginputkan nomor antrian pada kolom cek status setelah itu akan tampil apakah pesanan sudah di konfirmasi oleh admin atau belum.
60 g. Activity Diagram Konfirmasi Pesanan Admin System Login Sebagai Admin Menampilkan Menu Admin Memilih Menu Pesanan Menampilkan Detail Pesanan Konfirmasi Pesanan Mengirimkan Konfirmasi Pesanan Gambar 3.12 Activity Diagram Konfirmasi Pesanan Pada gambar 3.12 Admin dapat melakukan konfirmasi pesanan dengan melakukan login, setelah login admin dapat melakukan konfirmasi pesanan dengan memilih pilihan konfirmasi.
61 3.4.6 Sequence Diagram Sequence Diagram adalah suatu diagram yang menggambarkan interaksi antara obyek dan mengindikasikan komunikasi diantara obyek-obyek tersebut. Diagram ini juga menunjukkan serangkaian pesan yang dipertukarkan oleh obyek-obyek yang melakukan suatu tugas atau aksi tertentu. Obyek-obyek tersebut kemudian diurutkan dari kiri ke kanan, aktor yang menginisiasi interaksi biasanya ditaruh di paling kiri dari diagram. Berikut adalah diagram sekuensial yang menggambarkan fungsionalitas Sistem aplikasi pemesanan jasa perawatan rambut berbasis android. a. Sequence Diagram Registrasi Form Registrasi Sistem Login 1. Mengisi Nama Lengkap, Email, No Hp, Password() 2. Register() 3. Validasi() 4. Registrasi Gagal() 5. Registrasi Berhasil() 6. Tampil Halaman Login Gambar 3.13 Sequence Diagram Registrasi Pada Gambar 3.13 di atas menggambarkan proses yang sedang terjadi saat pelanggan melakukan registrasi pada aplikasi pemesanan jasa perawatan rambut. Prosesnya dimulai saat pelanggan memilih menu register dan kemudian
62 pelanggan mengisi data pada form register, jika berhasil sistem akan menampilkan halaman login. b. Sequence Diagram Memilih Menu Perawatan Rambut Menu Utama Menu Perawatan Rambut Form Menu Perawatan 1. Masuk Menu Utama() 2. Pilih Booking Lalu pilih Menu Perawatan Rambut() 3. Input Data Perawatan() Simpan 4. Menampilkan Menu Pilh Barber Man () Gambar 3.14 Sequence Diagram Memilih Menu Perawatan Rambut Pada Gambar 3.14 Masuk ke menu utama setelah itu memilih menu perawatan rambut kemudian pelanggan menginputkan jenis perawatan yang diinginkan, selanjutnya akan tampil menu untuk memilih Barber Man.
63 c. Sequence Diagram Memilih Barber Man Menu Pilih Barber Man Form Pilih Barber Man 1. Masuk Menu Pilih Barber Man() 2. Pilih Barber Man Yang diinginkan() 3. Simpan 4. Menampilkan Menu Pilih Tanggal dan Waktu() Gambar 3.15 Sequence Diagram Memilih Barber Man Pada Gambar 3.15 akan masuk ke menu pilih Barber Man, kemudian pelanggan menginput Barber Man yang diinginkan setelah itu akan muncul menu pilih tanggal dan waktu.
64 d. Sequence Diagram Memilih Tanggal dan Waktu Menu Pilih Tanggal dan Waktu Form Pilih Tanggal dan Waktu 1. Masuk Menu Pilih Tanggal dan Waktu() 2. Pilih Tanggal dan Waktu yang diinginkan() 3. Simpan 4. Menampilkan Detail Semua Pesanan dan Rincian() Gambar 3.16 Sequence Diagram Memilih Tanggal dan Waktu Pada Gambar 3.16 akan masuk ke menu pilih tanggal dan waktu, kemudian pelanggan menginput tanggal dan waktu yang diinginkan setelah itu akan muncul detail semua pesanan dan rincian.
65 e. Sequence Diagram Cek Status Menu Cek Status Form Cek Status Cek Status 1. Masuk Menu Cek Status() 2. Memasukkan Nomor Antrian() 3. Cek Status Pesanan() 4. Menampilkan Status Pesanan() Gambar 3.17 Sequence Diagram Cek Status Pada Gambar 3.17 memilih menu cek status kemudian memasukkan nomor antrian pada form cek status setelah itu pelanggan mengklik tombol cek status dan status akan muncul apakah sudah dikonfirmasi atau belum oleh admin.
66 f. Sequence Diagram Konfirmasi Pesanan Admin Menu Utama Menu Konfirmasi Pesanan Form Konfirmasi Pesanan Input username(), dan password() Login gagal() Validasi Pilih data_pesanan() Ubah status_pesanan() Save() Exit() Gambar 3.18 Sequence Diagram Konfirmasi Pesanan Pada Gambar 3.18 Admin melakukan login dengan memasukkan username dan password, setelah berhasil melakukan login maka akan tampil halaman utama untuk menampilkan menu konfirmasi pesanan. Kemudian admin dapat melihat pesanan pelanggan dan mengkonfirmasi pesanan pelanggan yang akan disimpan.
67 3.4.7 Class Diagram Diagram ini digunakan untuk mengidentifikasi kelas-kelas serta paketpaket yang terdapat dalam system, kemudian dilanjutkan dengan mengidentifikasi hubungan antar kelas. Berikut ini Class Diagram aplikasi. Admin -*username : string -password : string -nama_lengkap : string -email : string -no_telepon : string -level : string +save() +edit() +konfirmasipesanan() 1 * Barberman -*id_barberman : int -nama_barberman : string +add() +save() +delete() +edit() 1 * * * * Service -*id_service : int -jenis_perawatan : string -harga : int +add() +save() +delete() +edit() * * Member -*id : int -email : string -nama_lengkap : string -alamat : string -no_telepon : string -password : string +save() +delete() +edit() * Pesan -*id : int -nama : string -telpon : string -jenis_perawatan : string -barberman : string -status : string -tanggal_pesan : string -jam_pesan : string +add() +save() +delete() +edit() Gambar 3.19 Class Diagram Usulan 3.4.8 Perancangan Basis Data Basis data adalah tempat penyimpanan paling optimal oleh sebab itu diperlukan Perancangan Basis Data untuk menentukan susunan data. Tujuan dari perancangan ini adalah untuk pengoptimalisasi pengambilan data dan penyimpanan data. Tabel 3.12 Tabel Admin No Nama Field Type Data Panjang Keterangan 1 Username Varchar 20 Primary Key 2 Password Varchar 20 Password Admin 3 Nama_Lengkap Varchar 30 Nama Admin
68 4 Email Varchar 30 Email Admin 5 No_Telepon Varchar 15 Telepon Admin 6 Level Varchar 5 Level Admin Tabel 3.13 Tabel Member No Nama Field Type Data Panjang Keterangan 1 Id Integer 3 Primary Key 2 Nama Varchar 20 Email Member 3 Nama Varchar 30 Nama Member 4 Alamat Varchar 30 Alamat Member 5 Telpon Varchar 15 Telepon Member 6 Username Varchar 30 Email Member 7 Password Varchar 20 Password Member Tabel 3.14 Tabel Service No Nama Field Type Data Panjang Keterangan 1 Id_service Integer 2 Identitas Perawatan 2 Jenis_Perawatan Varchar 20 Jenis Perawatan 3 Harga Integer 6 Harga Perawatan Tabel 3.15 Tabel Barber Man No Nama Field Type Data Panjang Keterangan 1 Id Integer 2 Identitas Barber Man 2 Nama_Barberman Varchar 30 Nama Barber Man Tabel 3.16 Tabel Pesan No Nama Field Type Data Panjang Keterangan 1 Id Integer 2 Identitas Perawatan 2 Nama Varchar 30 Nama Pemesan 3 Telpon Varchar 15 Telpon Pemesan
69 4 Jenis_Perawatan Varchar 30 Jenis Perawatan 5 Barberman Varchar 30 Barberman 6 Status Varchar 30 Status Pemesanan 7 Tanggal_Pesan Date - Tanggal Pemesanan 8 Jam_Pesan Time - Jam Pemesanan 3.5 Perancangan Antar Muka Perancangan tampilan aplikasi merupakan rancangan dari desain aplikasi yang akan dibangun. Desain akan menetukan sebuah karakteristik dari aplikasi yang dibangun, serta memperlihatkan dilingkungan seperti apa aplikasi nanti di tempatkan. Berikut ini desain tampilan dari aplikasi yang akan dibangun : 3.5.1 Rancangan Halaman Login Tampilan dibawah ini adalah rancangan antar muka Halaman Login pada aplikasi android. (Logo) Batalion Barbershop Login Email Password Login Register Gambar 3.20 Rancangan Halaman Login
70 3.5.2 Rancangan Halaman Registrasi pelanggan. Pada halaman ini berisikan rancangan halaman tampilan registrasi (Logo) Batalion Barbershop Register Email Nama Lengkap Alamat No Telepon Password Register Gambar 3.21 Rancangan Halaman Registrasi 3.5.3 Rancangan Halaman Utama Pada halaman ini berisikan rancangan tampilan halaman utama aplikasi android. Halaman utama adalah halaman yang dapat diakses oleh user setelah melakukan login. Pada tampilan menu utama ini terdapat 5 button yaitu, menu perawatan, tentang, lokasi Batalion Barbershop, kontak, exit. Pada setiaap menu tersebut kita bisa melihat fitur aplikasi tersebut.
71 (Logo) Batalion Barbershop Tentang Informasi Booking Lokasi Bantuan Exit Gambar 3.22 Rancangan Halaman Utama 3.5.4 Tampilan Menu Perawatan Pada halaman ini berisikan rancangan tampilan menu perawatan. Di halaman ini pelanggan bisa memilih jenis perawatan yang diinginkan dan melihat harga jenis perawatannya. (Logo) Batalion Barbershop Menu Perawatan Barber Text Rp. 50.000 Text Rp. 50.000 Text Rp. 50.000 NEXT Gambar 3.23 Rancangan Halaman Menu Perawatan
72 3.5.5 Tampilan Menu Pilih Barber Man dan Pilih Tanggal Waktu Pada halaman ini adalah lanjutan dari menu perawatan setelah klik tombol next. Di halaman ini pelanggan bisa memilih barber man, tanggal dan waktu yang diinginkan. (Logo) Batalion Barbershop Pilih Barber Man Agung Rizky Pilih Tanggal & Waktu Tanggal mm/dd/yyyy Jam 00:00 BOOKING Gambar 3.24 Rancangan Halaman Menu Pilih Barber Man Tanggal dan Waktu
73 3.5.6 Tampilan Detail Order Aplikasi Pemesanan Android Tampilan dibawah ini adalah rancangan antar muka Detail Order Aplikasi Pemesanan pada Android. Disini pelanggan bisa melihat detail pesanannya dan total harganya. (Logo) Batalion Barbershop Detail Pemesanan Jenis Perawatan : Tanggal : Jam : Total : Gambar 3.25 Rancangan Halaman Detail Order
74 3.5.7 Tampilan Login Web Tampilan dibawah ini adalah rancangan antar muka menu login pada web. Aplikasi Pemesanan Jasa Perawatan Rambut Email admin Password ********** Login Gambar 3.26 Rancangan Halaman Login Web Admin Pada halaman ini admin harus melakukan login terlebih dahulu sebelum dapat mengakses halaman admin. Data ini diisi sesuai data yang terdaftar sesuai pada database admin. 3.5.8 Tampilan Master Web Tampilan dibawah ini adalah rancangan antar muka menu admin pada web. Master Transaksi Pengaturan Keluar Member Service Gambar 3.27 Rancangan Halaman Admin pada Web Pada menu ini terdapat 2 sub menu yaitu member dan service. Pada menu tersebut admin dapat mengelola atau pun merubah isi dari 2 sub menu tersebut.
75 3.5.9 Tampilan Transaksi Web Tampilan dibawah ini adalah rancangan antar muka menu transaksi pada web. Master Transaksi Pengaturan Keluar Pemesanan Gambar 3.28 Rancangan Halaman Menu Transaksi pada Web Pada menu transaksi terdapat sub menu pemesanan. Pada menu tersebut admin dapat mengelola atau pun merubah isi dari sub menu tersebut dan mengkonfirmasi pesanan pelanggan.
76 3.5.10 Tampilan Pengaturan Web web. Tampilan dibawah ini adalah rancangan antar muka menu pengaturan pada Master Transaksi Pengaturan Keluar Ganti Password Gambar 3.29 Rancangan Halaman Pengaturan pada web Pada menu pengaturan terdapat sub menu ganti password dimana admin dapat mengubah password sendiri pada menu ini.