BAB III ANALISIS DAN PERANCANGAN

Transkripsi

1 BAB III ANALISIS DAN PERANCANGAN 3.1 Analisis Masalah Sub ini membahas pemesanan dan pelayanan untuk pelanggan yang tersedia di Salon Meylan. Banyak pengunjung yang datang untuk memesan rias atau perawatan pelayanan langsung ke tempat Salon. Pelanggan datang untuk mengisi formulir data pelayanan serta melakukan proses transaksi, namun sebelum menerima pelayanan biasanya pelanggan bisa membuang waktu yang cukup lama hanya untuk memilih jenis-jenis pelayanan dan melihat daftar harga sebelum memesan. Mengetahui harga pelayanan salon agar tidak terkejut oleh harga yang tidak bersahabat dengan kantong dan memilih mana yang sesuai dengan kebutuhan utama. Hal ini membuat karyawan akan lama memasukkan data pelanggan dan juga karena proses memasukkan data serta laporan data pelayanan pelanggan yang masih dilakukan secara manual yaitu didalam buku besar dan microsoft Excel. Salon tidak setiap hari datang banyak pelanggan, namun jika sewaktu-waktu banyak pengunjung datang maka akan membuat pelayanan Salon akan mengantri lebih lama dan pelanggan akan kembali pulang. Melihat proses tersebut diatas, tentu tidak efisien jika dibandingkan saat ini adalah jaman teknologi maju, terutama dengan adanya internet. Maka penulis membangun sebuah apliasi informasi pelayanan berbasis web agar pelanggan update mengetahui jenis pelayanan, daftar harga, pemesanan rias, dan informasi terbaru dari Salon. Ini membantu kemungkinan data pelanggan yang tercecer dan hilang serta pihak salon mendapat kemudahan untuk membuat laporan dari data pelanggan. 42

2 Perancangan Aplikasi Berdasarkan analisis permasalahan diatas, penulis membuat sebuah perancangan aplikasi informasi pemesanan dan pelayanan Salon Meylan berbasis web mengunakan PHP dan MySQL untuk membuat aplikasi tersebut. Agar dapat lebih mudah dipahami maka penulis menjelaskan dalam bentuk diagram pemodelan yang meliputi diagram use case, diagram sequence dan diagram activity Diagram Use Case Diagram use case untuk menggambarkan fungsionalitas sistem yang akan dibuat. Aktor memperlihatkan himpunan pengguna use case, himpunan sesuatu yang berinteraksi dengan sistem yang akan kita kembangkan. Kita harus mengidentifikasi aktor dan memahami bagaimana aktor akan menggunakan dan berinteraksi dengan sistem. Sebuah aktor mencirikan suatu bagian outside user atau susunan yang berkaitan dengan user yang berinteraksi dengan sistem. Dalam model use case, aktor merupakan satu-satunya kesatuan eksternal yang berinteraksi dengan sistem. Secara umun pemodelan use case aplikasi ini dapat dilihat pada Gambar 3.1 System Halaman Utama Beranda Katalog User Tentang Salon Buku tamu Gambar 3.1 Diagram Use case Halaman User

3 44 System Order Disini «extends» Pelanggan History Pesanan «include» Login «include» Ganti Password «include» Logout Gambar 3.2 Diagram Use case Halaman Pelanggan System Data Order «include» «include» Login Admin Master Data Data Laporan «include» «include» «include» Ganti Password Logout Gambar 3.3 Diagram Use case Halaman khusus Admin

4 45 Berikut penjelasan dari masing-masing diagram use case dapat dilihat pada skenario sebagai berikut : A. Dari Sisi Admin 1. Nama Use Case :Login Aktor : Admin Deskripsi : Use Case ini memungkinkan admin untuk masuk ke halaman admin namun user harus melakukan login terlebih dahulu, dengan mengetikkan username dan password. 2. Nama Use Case : Data Order Aktor : Admin Deskripsi : Admin dapat me-manage data order atau pemesanan rias setelah melakukan login terlebih dahulu. Kemudian sistem akan dapat me-manage data pemesanan antara lain input data pesanan, ubah data pesanan, dan hapus data pesanan. 3. Nama Use Case : Master Data Aktor : Admin Deskripsi : Admin dapat me-manage data diadministrator setelah melakukan login. Kemudian sistem menampilkan master data dari data pelayanan, user, dan data order yang tersedia sehingga data input data, ubah data, dan hapus data. 4. Nama Use Case : Data Laporan Aktor : Admin Deskripsi : Admin dapat melihat hasil keseluruhan laporan daftar order pesanan rias atau pelayanan yang diorder oleh pelanggan. Admin juga dapat mengubah status pengerjaan order oleh pelanggan.

5 46 B. Dari Sisi User 1. Nama Use Case : Login Aktor : User (pelanggan) Deskripsi : Use Case ini memungkinkan user untuk masuk ke halaman pelanggan namun user harus melakukan login terlebih dahulu untuk mengakses menu khusus pelanggan, dengan mengetikan username dan password. 2. Nama Use Case : Halaman Order Disini Aktor : User (pelanggan) Deskripsi : User dapat melakukan aktifitas pada menu pelanggan setelah melakukan login. Menu ini form pemesanan rias dan alat hitung pelayanan rias. 3. Nama Use Case : Menu History Pesanan Aktor : User (pelanggan) Deskripsi : Setelah pelanggan melakukan login, pelanggan dapat melihat menu history pesanan yaitu status pesanan, form komentar, dan download modul. 4. Nama Use Case : Menu Ganti Password Aktor : User (pelanggan) Deskripsi : Pelanggan melakukan login terlebih dahulu dengan mengetikan username dan password, untuk masuk ke halaman menu ganti password. Lalu pelanggan mengubah ganti password untuk keamanan. 5. Nama Use Case : Menu Katalog Aktor : User Deskripsi : User tidak perlu login untuk melihat menu katalog, ini berisi informasi terima rias dan daftar data pelayanan.

6 47 6. Nama Use Case : Menu Tentang Kami Aktor : User Deskripsi : User tidak perlu login untuk melihat menu tentang kami, berisi informasi tentang salon. 7. Nama Use Case : Menu Buku Tamu Aktor : User Deskripsi : User tidak perlu login untuk melihat menu buku tamu pelanggan yang telah meninggalkan komentarnya Diagram Activity Diagram Activity adalah diagram yang menggambarkan sebuah skema aktivitas yang terjadi di dalam pengunaan aplikasi tersebut. Diagram Activity mempunyai peran seperti halnya flowchart, akan tetapi perbedaan dengan flowchart adalah diagram ini mengandung perilaku paralel sedangkan flowchart tidak bisa (Munawar, 2005:109) Diagram Activity Login Diagram Activity berikut ini menjelaskan bahwa untuk menggunakan sistem yang telah dibuat dibutuhkan validasi user, user diharuskan mengisikan username dan password terlebih dahulu dan selanjutnya sistem akan mencocokan dengan database. Jika valid maka sistem akan menampilkan halaman user sesuai hak akses dan jika tidak valid maka akan menampilkan pesan username dan password salah dan user harus mengisi kembali username dan password. Lihat pada gambar 3.4 yaitu dibawah ini.

7 48 User Sistem * * Melakukan aktivitas login Menampilkan menu Memasukkan username dan password Mengecek username dan password Pengguna tidak valid Validasi user Pengguna Valid Melakukan penyimpanan Hasil aktifitas admin ke dalam database Gambar 3.4 Aktivitas pada halaman login Diagram Activity Halaman Admin a. Diagram Activity Manajemen Order Pemesanan

8 49 Admin Sistem * * Melakukan aktivitas login Validasi login Tidak Valid valid Memilih menu manajemen order pemesanan Menampilkan Halaman Admin Menampilkan halaman manajemen order pemesanan Melakukan proses data Melakukan penyimpanan hasil aktifitas admin ke dalam database Gambar 3.5 Aktivitas pada halaman admin manajemen order Pada Gambar 3.5 Menjelaskan aktivitas yang dilakukan ketika admin pada halaman manajemen order pemesanan rias. Untuk mengakses halaman ini, admin harus melakukan login terlebih dahulu. Jika login sukses, admin dapat melakukan proses terhadap halaman admin. Halaman manajemen pemesanan, pada menu ini admin dapat memanage menambahkan, mengubah, dan menghapus data yang ada di dalasm database sistem.

9 50 b. Diagram Activity Menu Master Data Pada Pelayanan Admin Sistem * * Melakukan aktivitas login Tidak Valid Memilih menu manajemen master data Validasi login Menampilkan Halaman Admin valid Menampilkan halaman manajemen pelayanan Melakukan proses data Melakukan penyimpanan hasil aktifitas admin ke dalam database Gambar 3.6 Aktivitas pada halaman admin manajemen pelayanan Pada Gambar 3.6 Menjelaskan aktivitas yang dilakukan ketika admin pada halaman menu master data pada manajemen pelayanan yaitu daftar harga salon. Untuk mengakses halaman ini, admin harus melakukan login terlebih dahulu. Jika login sukses, admin dapat melakukan proses terhadap halaman admin. Halaman manajemen pelayanan, pada menu ini admin dapat memanage dengan sistem menambahkan, mengubah, dan menghapus data yang ada di dalam database sistem.

10 51 c. Diagram Activity Managemen Laporan Admin Sistem * * Melakukan aktivitas login Tidak Valid Validasi login valid Memilih menu manajemen master data Menampilkan Halaman Admin Menampilkan halaman manajemen laporan Melakukan proses data Melakukan penyimpanan hasil aktifitas admin ke dalam database Gambar 3.7 Aktivitas pada halaman admin manajemen laporan Pada Gambar 3.7 Menjelaskan aktivitas yang dilakukan ketika admin pada halaman manajemen data laporan. Untuk mengakses halaman ini, admin harus melakukan login terlebih dahulu. Jika login sukses, admin dapat melakukan proses terhadap halaman admin. Halaman manajemen laporan, pada menu ini admin dapat memanage data laporan dengan sistem menambahkan, mengubah, menghapus dan menampilkan data yang ada di dalam database sistem.

11 Diagram Activity Halaman Ganti Password Admin Sistem * * Melakukan aktivitas login Tidak Valid Validasi login valid Memilih menu manajemen master data Menampilkan Halaman Admin Menampilkan halaman manajemen ganti password Melakukan proses data Melakukan penyimpanan hasil aktifitas admin ke dalam database Gambar 3.8 Aktivitas ganti password untuk admin dan user(pelanggan) Pada Gambar 3.8 Menjelaskan aktivitas yang dilakukan ketika admin atau user(pelanggan) pada halaman manajemen data ganti password. Untuk mengakses halaman ini, admin dan user harus melakukan login terlebih dahulu. Jika login sukses, admin dan user dapat melakukan proses terhadap halaman admin dan user(pelanggan).

12 Diagram Activity Halaman User (Pelanggan) a. Diagram Activity Register User (Pelanggan) User Sistem * * Melakukan aktivitas klik pada login Menampilkan halaman form login Memasukkan klik pada link untuk register Menampilkan halaman form pendaftaran Mengisi form pendaftaran Menyimpan ke database Tersimpan di database Menampilkan link untuk login Gambar 3.9 Aktivitas pada halaman register pelanggan Pada Gambar 3.9 Menjelaskan aktivitas yang dilakukan ketika user pada halaman utama. Untuk menjadi user(pelanggan), user harus melakukan register terlebih dahulu. Jika register sukses, user dapat melakukan proses terhadap halaman user(pelanggan). Halaman register, pada menu ini user dapat mengisi username, password dan data yang ada di dalam database sistem.

13 54 b. Diagram Activity Order Pemesanan User Sistem * * Melakukan aktivitas klik pada login Mengisi username dan password Melakukan klik pada menu order pesanan Menampilkan halaman login Validasi user valid Menampilkan halaman user Tidak valid Mengisi form data pemesanan Menampilkan form data user sebagai data pemesanan Melakukan klik pada tombol "pesan sekarang" Menyimpan order pesanan ke database Gambar 3.10 Aktivitas pada menu order pesanan Pada Gambar 3.10 Menjelaskan aktivitas yang dilakukan ketika seorang user (pelanggan) ingin memesan pesanan rias ke rumah. Sebelum memesan, user diharuskan untuk login terlebih dahulu. Jika sukses, user(pelanggan) dapat mengorder pilih pesanan.

14 55 c. Diagram Activity User(Pelanggan) Menu Status Pesanan User Sistem * * Melakukan aktivitas klik pada login Mengisi username dan password Melakukan klik menu status pesanan Menampilkan halaman login Validasi user valid Tidak valid Menampilkan halaman user Menampilkan halaman status pesanan Gambar 3.11 Aktivitas pada halaman pelanggan menu status pesanan Pada Gambar 3.11 Menjelaskan aktivitas yang dilakukan ketika seorang user(pelanggan) pada halaman pelanggan. Aktivitas pertama kali yang dilakukan adalah apakah user (pelanggan) akan melihat status pesanan pada halaman pelanggan dengan login menggunakan username dan password. Jika sukses, user(pelanggan) dapat melakukan proses terhadap halaman pelanggan.

15 56 d. Diagram Activity User (Pelanggan) Menu Ganti Password User Sistem * * Melakukan aktivitas klik pada login Menampilkan halaman login Mengisi username dan password Melakukan klik menu ganti password Validasi user valid Tidak valid Menampilkan halaman user Menampilkan halaman ganti password Menyimpan hasil aktifitas pelanggan ke dalam database Gambar 3.12 Aktivitas user(pelanggan) mengakses ganti password Pada Gambar 3.12 Menjelaskan aktivitas user(pelanggan) pada halaman pelanggan. User(pelanggan) akan melakukan ganti password pada halaman pelanggan dengan login menggunakan username dan password. Jika sukses, user(pelanggan) dapat melakukan proses terhadap halaman pelanggan. Menu ganti password, pada menu ini pelanggan dapat mengubah password pengguna sehingga keamanan dapat ditingkatkan karena password yang digunakan bisa diubah setiap saat oleh pengguna.

16 Diagram Activity Halaman User a. Diagram Activity User Mengakses Menu Katalog jenis kategori User Sistem * * Melakukan klik menu pesanan order rias Menampilkan halaman katalog jenis kategori yang dipilih Gambar 3.13 Aktivitas user mengakses menu katalog b. Diagram Activity User Mengakses Menu Tentang Salon Kami User Sistem * * Melakukan klik menu Tentang kami Menampilkan halaman tentang kami Gambar 3.14 Aktivitas user mengakses menu tentang kami c. Diagram Activity User Mengakses Menu Buku Tamu User Sistem * * Melakukan klik menu buku tamu Menampilkan halaman buku tamu Gambar 3.15 Aktivitas user mengakses menu buku tamu

17 58 d. Diagram Activity User Mengakses Menu Login User Sistem * * Melakukan klik menu login Menampilkan halaman login Gambar 3.16 Aktivitas user mengakses menu login Pada Gambar 3.13, Gambar 3.14, Gambar 3.15 dan Gambar 3.16 Menjelaskan aktifitas seseorang user pada halaman user biasa. Menu katalog, menu buku tamu, menu tentang salon kami dan menu login dapat diakses tanpa mengharuskan user untuk login terlebih dahulu Diagram Sequence Sequence diagram (diagram urutan) adalah suatu diagram yang memperlihatkan atau menampilkan interaksi-interaksi antar objek di dalam sistem yang disusun pada sebuah urutan atau rangkaian waktu. Interaksi antar objek tersebut termasuk pengguna, display, dan sebagainya berupa pesan/message. Sequence Diagram digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai sebuah respon dari suatu kejadian/even untuk menghasilkan output tertentu. Sequence Diagram diawali dari apa yang metrigger aktivitas tersebut, proses dan perubahan apa saja yang terjadi secara internal dan output apa yang dihasilkan Diagram Sequence Halaman Login Pada saat aplikasi dijalankan user dapat memilih menu login, user harus memasukkan username dan password terlebih dahulu untuk mengakses modul user. Selanjutnya sistem akan mengecek level user login, lalu sistem akan

18 59 menampilkan halaman sesuai dengan level user. Jika username dan password yang dimasukkan valid maka system akan menampilkan website halaman admin. Berikut gambar diagram sequence halaman login : Halaman Utama Login proses Login Database Actor1 Tampilan Halaman Belum Login Menu Login Validasi username dan password Koneksi database Validasi username dan password Cek status Login sukses Tutup menu Gambar 3.17 Diagram Sequence Login User

19 Diagram Sequence Halaman Admin Halaman Admin Order Pesan Master Data Laporan Ganti Password Logout Admin Mulai Masuk menu Selesai Masuk menu Selesai Masuk menu Selesai Masuk menu Selesai Masuk menu Selesai Gambar 3.18 Aktivitas halaman admin Diagram Sequence ini menggambarkan skenario yang dilakukan sistem pada saat admin berada pada halaman admin. Admin bisa melakukan perubahan data yang berhubungan dengan halaman admin seperti, manajemen user yang akan menambah, mengubah maupun menghapus data user.

20 Diagram Sequence Halaman User(Pelanggan) Halaman Order History Pesanan Ganti Password Logout Pelamggan Mulai Masuk menu Selesai Masuk menu Selesai Masuk menu Selesai Gambar 3.19 Aktivitas halaman user(pelanggan) Diagram Sequence ini menggambarkan skenario yang dilakukan sistem pada saat user berada pada halaman user(pelanggan). User(pelanggan) bisa melakukan transaksi data yang berhubungan dengan pemesanan rias dan melihat hasil status pemesanan.

21 Diagram Sequence Halaman User Halaman Utama Katalog Tentang Kami Buku Tamu User Mulai Masuk menu Selesai Masuk menu Selesai Masuk menu Selesai Gambar 3.20 Aktivitas halaman user Diagram Sequence ini menggambarkan skenario yang dilakukan sistem pada halaman user. User tanpa harus login bisa melihat isi website pada halaman awal user ntuk melihat informasi dan daftar-daftar pelayanan salon.

22 Perancangan Basis Data Rancangan data digunakan sebagai media penyimpanan data yang dipergunakan dalam aplikasi ini dan data membantu pemrograman dalam memodifikasi. Perancangan konsep basis data terdiri dari entitas ; - tb_pemesanan - tabeluser - bukutamu - pelayanan Perancangan Basis Data Secara Konseptual Tahap ini adalaha mendisain database secara konseptual, semua informasi yang telah terkumpul akan sangat berguna pada tahapan ini. tahapan ini sering dilakukan dengan mengunakann E-R tujuannya adalah untuk menciptakan gambaran sederhana tentang data yang mirip dengan pemikiran pengguna(user). Dan berikut adalah gambaran dari perancangan basis data konseptual: a. Entitas: Merupakan obyek yang mewakili sesuatu dalam dunia nyata dan dapat dibedakan antara satu dengan lainnya (unique). Berikut adalah enttitas dari aplikasinya: Objek Dasar Simbol Entitas tb_pemesanan tabeluser bukutamu pelayanan Tb_pemesanan tabeluser bukutamu pelayanan

23 64 b. Atribut : karakteristik dari entity atau relationship yang menyediakan detail tentang entity atau relationship tersebut sehingga dapat dibedakan. Nilainya jarang berubah. Merupakan karakteristik dari sebuah entitas (biasanya berhubungan dengan field dalam sebuah tabel). Penentuan atribut bagi suatu entitas didasarkan pada relevansinya terhadap entitas tersebut. Gambar 3.21 Atribut pada entits tb_pemesanan Gambar 3.22 Atribut pada entitas tabeluser

24 65 Gambar 3.23 Atribut untuk entitas bukutamu Gambar 3.24 Atribut untuk entitas pelayanan Gambar 3.25 Relasi antar atribut

25 Hubungan Antar Tabel Model Entity Relationship yang berisi komponen-komponen Himpunan Entitas dan Himpunan Relasi yang masing-masing dilengkapi dengan atributatribut yang merepresentasikan seluruh fakta dari dunia nyata yang kita tinjau, dapat digambarkan dengan lebih sistematis dengan menggunakan Diagram Entity Relationship (ERD). Berikut ini gambar ERD yang memberikan gambaran atas keterhubungan antar entitas dari aplikasi ini : Gambar 3.26 Diagram ERD Struktur Tabel Berikut ini pendefinisian objek data (berupa entitas), atribut dan tipe data dari atribut objek yang terdapat pada Aplikasi Database Pemesanan Pelayanan

26 67 Pada Salon Meylan Berbasis Web Menggunakan PHP dan Mysql, yang disajikan dalam bentuk tabel sebagai berikut: 1. tb_pemesanan Pada entitas tb_pemesanan terdapat 9 atribut yaitu : Id_pemesan, Username, Jenis_kelamin, Telepon, , Tanggal_butuh, Pukul, Alamat_tujuan, Jumlah_p, Status. Lihat pada Tabel 3.1 dibawah ini. Tabel 3.1 Tabel tb_pemesanan No. Nama Field Tipe Ukuran Keterangan 1 Id_pemesan Int 3 Primary Key 2 Username Varchar 10 3 Telepon Varchar Varchar 30 5 Tanggal_butuh Varchar 20 6 Pukul Varchar 8 7 Alamat_tujuan Varchar 80 8 Jumlah_pesanan Varchar 5 9 Status Varchar 4 2. pelayanan Pada entitas pelayanan terdapat 3 atribut yaitu : Id_pelayanan, Nama_order, Harga. Lihat pada Tabel 3.2 dibawah ini. Tabel 3.2 Tabel pelayanan No. Nama Field Tipe Ukuran Keterangan 1 Id_pelayanan Int 3 Primary Key 2 Nama_order Varchar 25 3 Harga Varchar 9

27 68 3. bukutamu Pada entitas bukutamu terdapat 7atribut yaitu : id, nama, , komentar, date, art_id, art_url. Lihat pada Tabel 3.3 dibawah ini. Tabel 3.3 Tabel bukutamu No. Nama Field Tipe Ukuran Keterangan 1 Id Int 3 Primary Key 2 nama Varchar Varchar 30 4 Komentar Varchar 50 5 Date Datetime 6 art_id Varchar 10 7 art_url Varchar tabeluser Pada entitas tabeluser terdapat 7 atribut yaitu : 1d,username, nama, j_kelamin, password, level. Lihat pada Tabel 3.4 dibawah ini. Tabel 3.4 Tabel tabeluser No. Nama Field Tipe Ukuran Keterangan 1 Id Int 3 Primary Key 2 Username Varchar 10 3 Nama Varchar Varchar 25 5 J_kelamin Varchar 25 6 Password Varchar 50 7 Level Varchar 15

28 Perancangan Antarmuka Pada bagian ini penulis akan menggambarkan rancangan antar muka, dimana rancangan antar muka ini dibuat agar pengguna dapat dengan mudah mengerti cara mengakses aplikasi order pemesanan yang berkaitan dengan level user, maka user diharuskan login terlebih dahulu. 1. Antarmuka halaman utama web (index) Perancangan halaman utama web ini terdapat beranda, katalog, galeri, tentang salon, bukutamu dan login serta menu-menu yang ada pada kategori seperti daftar pelayanan, sewa barang, dan terima rias. Jika user ingin memesan pelayanan yang ada pada salon maka user (pelanggan) harus melakukan login terlebih dahulu agar dapat mengakses menu untuk order. Memiliki tampilan banner, gambar slide, selamat datang dan footer. Halaman utama web dapat dilihat pada gambar 3.27 dibawah ini. BANNER TENTANG BERANDA KATALOG SALON BUKUTAMU LOGIN Gambar Slide Masuk Register SELAMAT DATANG FOOTER Gambar 3.27 Rancangan halaman utama web

29 70 2. Antarmuka halaman login (administrator dan pelanggan) Perancangan halaman administrator dan user(pelanggan) login merupakan perancangan halaman login user (pelanggan). Pada halaman login ini juga terdapat link untuk registrasi user(pelanggan) yang belum memiliki akun. Halaman ini memiliki beberapa tampilan form username dan password, tombol login untuk masuk ke sistem aplikasi. Halaman administrator dan pelanggan login dapat dilihat pada gambar 3.28 dibawah ini. BANNER TENTANG BERANDA KATALOG SALON BUKUTAMU LOGIN LOGIN MEMBER Masuk Register Gambar Username : Password : Login Reset FOOTER Gambar 3.28 Rancangan halaman login adminidtrator dan user

30 71 3. Antarmuka halaman input daftar user(pelanggan) Perancangan pada halaman input daftar user(pelanggan) sebagai member memiliki beberapa tampilan yaitu form data (username, password, Ketikkan ulang password), tombol register now. Halaman input daftar user(pelanggan) dapat dilihat pada gambar 3.29 dibawah ini. BANNER TENTANG BERANDA KATALOG SALON BUKUTAMU PELANGGAN BARU Nama : J Kelamin : Username : Password : LOGIN Masuk Register Ulang Password : Register FOOTER Gambar 3.29 Rancangan halaman input daftar user(pelanggan)

31 72 4. Antarmuka halaman katalog Perancangan halaman katalog memiliki tampilan kategori informasi antara lain informasi, harga pelayanan, dan terima rias. Halaman katalog pada daftar pelayanan dapat dilihat pada gambar 3.30 dibawah ini. BANNER TENTANG BERANDA KATALOG SALON BUKUTAMU KATEGORI Daftar Pelayanan LOGIN Informasi No Jenis Order Harga Masuk Register Harga Pelayanan Terima Rias FOOTER Gambar 3.30 Rancangan halaman katalog

32 73 5. Antarmuka halaman bukutamu Perancangan halaman bukutamu memiliki beberapa tampilan antara lain adalah daftar halaman komentar pengunjung yang telah meninggalkan kritik dan saran. Halaman bukutamu dapat dilihat pada gambar 3.31 dibawah ini. BANNER TENTANG BERANDA KATALOG SALON BUKUTAMU LOGIN Masuk Register Komentar Bukutamu FOOTER Gambar 3.31 Rancangan halaman bukutamu

33 74 6. Antarmuka halaman pemesanan user(pelanggan) Perancangan halaman pemesanan user(pelanggan) memiliki tampilan yaitu form pemesanan rias untuk datang ketempat pelanggan antara lain nama, jenis kelamin, telepon, , alamat, pukul, pilih rias, total harga. Halaman pemesanan dapat dilihat pada gambar 3.32 dibawah ini. BANNER ORDER GANTI BERANDA DISINI HISTORY PESAN PASSWORD LOGOUT Form Pemesanan Baru : : Kirim : Alamat : Pukul : Telepon : Jmlh P : Kirim FOOTER Gambar 3.32 Rancangan halaman pemesanan rias

34 75 7. Antarmuka halaman status pemesan Perancangan pada halaman data pemesan pada user(pelanggan) memiliki tabel data dari data pemesan dengan konfirmasi status apakah admin bersedia atau tidak.halaman data pemesan user(pelanggan) dapat dilihat pada gambar 3.33 dibawah ini. BANNER GANTI BERAND ORDER HISTORY PASSWOR LOGOU A DISINI PESAN D T STATUS PEMESANAN No Nama JK Almt Pukul Tgl_butuh Jmlh_p Status OK FOOTER Gambar 3.33 Rancangan halaman status pemesan

35 76 8. Antarmuka halaman ganti password Perancangan halaman ganti password memiliki tampilan form antara lain password lama, password baru, konfimasi password. Halaman ganti password dapat dilihat pada gambar 3.34 dibawah ini. BANNER BERAND ORDER HISTORY GANTI A DISINI PESAN PASSWORD LOGOUT GANTI PASSWORD Username : Password : Ulang Password : Kirim FOOTER Gambar 3.34 Rancangan halaman ganti password

36 77 9. Antarmuka halaman utama administrator Perancangan pada halaman utama administrator pada manajemen data user(pelanggan). Menu utama halaman web administrator antara lain (manajemen order, data pelayanan, data user, ganti password)tombol pilih. Halaman utama administrator dapat dilihat pada gambar 3.35 dibawah ini. BANNER DATA DATA BERANDA ORDER MASTERDATA LAPORAN LOGOUT SELAMAT DATANG ADMINISTRATOR FOOTER Gambar 3.35 Rancangan halaman utama administrator

37 Antarmuka halaman utama administrator manajemen order pemesanan Perancangan pada halaman utama administrator dapat mengedit, menghapus, menambah data order pemesanan rias user(pelanggan) oleh admin. Menu utama halaman data order pemesanan antara lain (No, Nama, Jenis kelamin, Telepon, Alamat, Tanggal, , Status, tombol simpan). Halaman utama administrator input data pelanggan dapat dilihat pada gambar 3.36 dibawah ini. BANNER BERANDA DATA ORDER MASTER DATA DATA LAPORAN LOGOUT DATA PEMESANAN No Nama JK Almt Pukul Tgl_butuh Jmlh_p Status STATUS ENTRY EDIT HAPUS FOOTER Gambar 3.36 Rancangan halaman administrator data pemesanan

38 Antarmuka halaman utama manajemen pelayanan Perancangan halaman utama manajemen pelayanan yaitu berisi daftar harga pelayanan tebaru dari Salon. Pada menu pelayanan, tampilan tabel list daftar harga, tombol tambah (tambah data), ubah data (edit) dan hapus data (hapus), tombol pencarian data, footer. Halaman utama manajemen pelayanan dapat dilihat pada gambar 3.37 dibawah ini. BANNER BERANDA DATA ORDER MASTER DATA DATA LAPORAN LOGOUT DATA DAFTAR PELAYANAN NO NAMA HARGA ENTRY EDIT HAPUS FOOTER Gambar 3.37 Rancangan halaman utama manajemen pelayanan

39 Antarmuka halaman utama administrator input data pemesanan Perancangan pada halaman utama administrator input data pemesanan memiliki beberapa tampilan antara lain, menu utama halaman web administrator, tampilan form data (No, Nama, Jenis kelamin, Telepon, Alamat, Tanggal, , Status dan tombol simpan). Halaman utama administrator input data pemesanan dapat dilihat pada gambar 3.38 dibawah ini. BANNER HALAMAN ADMIN DATA ORDER MASTER DATA DATA LAPORAN LOGOUT ENTRY DATA Baru : : Kirim : Alamat : Pukul : Telepon : Jmlh P : Status : SIMPAN FOOTER Gambar 3.38 Rancangan halaman utama input data pemesanan

40 Antarmuka halaman utama administrator edit data pemesanan Perancangan pada halaman utama administrator edit data pemesanan memiliki beberapa tampilan antara lain adalah menu utama halaman web administrator, tampilan form data data (No, Nama, Jenis kelamin, Telepon, Alamat, Tanggal, , Status dan Tombol simpan). Halaman utama administrator edit data pemesanan dapat dilihat pada gambar 3.39 dibawah ini. BANNER HALAMAN ADMIN DATA ORDER MASTER DATA DATA LAPORAN LOGOUT EDIT DATA Kirim : Alamat : Pukul : Telepon : Jmlh P : Status : SIMPAN FOOTER Gambar 3.39 Rancangan halaman edit data pemesanan

41 Antarmuka halaman utama administrator manajemen user (data user) Perancangan halaman utama administrator manajemen user (data user) memiliki beberapa tampilan antara lain adalah tombol-tombol pada menu utama, tampilan tabel list data user, tombol hapus (hapus data user) dan merefresh. Halaman utama administrator manajemen user (data user) dapat dilihat pada gambar 3.40 dibawah ini. BANNER HALAMAN ADMIN DATA ORDER MASTER DATA DATA LAPORAN LOGOUT DATA USER USERNAME PASSWORD LEVEL ENTRY EDIT HAPUS FOOTER Gambar 3.40 Rancangan halaman utama manajemen user

42 Antarmuka halaman administrator manajemen laporan Perancangan halaman utama administrator manajemen laporan memiliki beberapa tampilan antara lain adalah tombol-tombol pada menu utama, tampilan laporan data order, data pelayanan, bukutamu. Halaman utama administrator manajemen user (data user) dapat dilihat pada gambar 3.41 dibawah ini. BANNER HALAMAN ADMIN DATA ORDER MASTER DATA DATA LAPORAN LOGOUT 1. LAPORAN ORDER PESANAN 2. LAPORAN BUKUTAMU 3. LAPORAN PELAYANAN 4. LAPORAN DATA USER FOOTER Gambar 3.41 Rancangan halaman utama manajemen laporan