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
43
3.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.
3.2.1
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
44
System
Order Disini «extends» «include»
Pelanggan
Login
History Pesanan «include» «include» Ganti Password
Logout
Gambar 3.2 Diagram Use case Halaman Pelanggan
System
Data Order
«include» Login «include»
Master Data
«include»
Admin «include» Data Laporan
«include»
Ganti Password
Logout
Gambar 3.3 Diagram Use case Halaman khusus Admin
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.
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.
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.
3.2.2
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).
3.2.2.1 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.
48
User
Sistem
*
*
Melakukan aktivitas login
Memasukkan username dan password
Menampilkan menu
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
3.2.2.2 Diagram Activity Halaman Admin a. Diagram Activity Manajemen Order Pemesanan
49
Admin
Sistem
*
* Tidak Valid
Melakukan aktivitas login Validasi login
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.
50
b. Diagram Activity Menu Master Data Pada Pelayanan Admin
Sistem
*
*
Melakukan aktivitas login
Tidak Valid
Validasi login valid Memilih menu manajemen master data
Menampilkan Halaman Admin 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.
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.
52
3.2.2.3 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).
53
3.2.2.4 Diagram Activity Halaman User (Pelanggan) a. Diagram Activity Register User (Pelanggan)
User
Sistem
*
*
Melakukan aktivitas klik pada login
Memasukkan klik pada link untuk register
Menampilkan halaman form login
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.
54
b. Diagram Activity Order Pemesanan
User
Sistem
*
* Melakukan aktivitas klik pada login
Mengisi username dan password
Menampilkan halaman login
Validasi user
Tidak valid
valid Melakukan klik pada menu order pesanan
Mengisi form data pemesanan
Melakukan klik pada tombol "pesan sekarang"
Menampilkan halaman user
Menampilkan form data user sebagai data pemesanan
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.
55
c. Diagram Activity User(Pelanggan) Menu Status Pesanan
User
Sistem
*
* Melakukan aktivitas klik pada login
Mengisi username dan password
Menampilkan halaman login Tidak valid Validasi user valid
Melakukan klik menu status pesanan
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.
56
d. Diagram Activity User (Pelanggan) Menu Ganti Password
User
Sistem
*
* Melakukan aktivitas klik pada login
Menampilkan halaman login Tidak valid
Mengisi username dan password Melakukan klik menu ganti password
Validasi user 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.
57
3.2.2.5 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
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.
3.2.3
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.
3.2.3.1 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
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
60
3.2.3.2 Diagram Sequence Halaman Admin Halaman Admin Order Pesan
Admin Mulai
Master Data
Laporan Ganti Password Logout
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.
61
3.2.3.3 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.
62
3.2.3.4 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.
63
3.3
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
3.3.1
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
Tb_pemesanan
tabeluser
tabeluser
bukutamu
bukutamu
pelayanan
pelayanan
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
65
Gambar 3.23 Atribut untuk entitas bukutamu
Gambar 3.24 Atribut untuk entitas pelayanan
Gambar 3.25 Relasi antar atribut
66
3.3.2 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
3.3.3
Struktur Tabel Berikut ini pendefinisian objek data (berupa entitas), atribut dan tipe data
dari atribut objek yang terdapat pada Aplikasi Database Pemesanan Pelayanan
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, Email, 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
18
4
Email
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
68
3. bukutamu Pada entitas bukutamu terdapat 7atribut yaitu : id, nama, email, 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
10
3
Email
Varchar
30
4
Komentar
Varchar
50
5
Date
Datetime
6
art_id
Varchar
10
7
art_url
Varchar
10
4. tabeluser Pada entitas tabeluser terdapat 7 atribut yaitu : 1d,username, nama, email 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
20
4
Email
Varchar
25
5
J_kelamin
Varchar
25
6
Password
Varchar
50
7
Level
Varchar
15
69
3.4
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
SELAMAT DATANG
FOOTER
Gambar 3.27 Rancangan halaman utama web
Masuk
Register
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 Masuk
Register
LOGIN MEMBER Gambar Username : Password : Login
Reset
FOOTER
Gambar 3.28 Rancangan halaman login adminidtrator dan user
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
LOGIN
PELANGGAN BARU
Masuk
Nama
:
Email
:
J Kelamin
:
Username
:
Password
:
Ulang Password : Register
FOOTER
Gambar 3.29 Rancangan halaman input daftar user(pelanggan)
Register
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
KATEGORI Informasi
KATALOG
SALON
BUKUTAMU
Daftar Pelayanan No
Jenis Order
LOGIN Harga
Harga Pelayanan Terima Rias
FOOTER
Gambar 3.30 Rancangan halaman katalog
Masuk
Register
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 Komentar Bukutamu
............................................. ................................ ....................
FOOTER
Gambar 3.31 Rancangan halaman bukutamu
Register
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, email, alamat, pukul, pilih rias, total harga. Halaman pemesanan dapat dilihat pada gambar 3.32 dibawah ini.
BANNER ORDER BERANDA
GANTI
DISINI
HISTORY PESAN
PASSWORD
Form Pemesanan
Email Baru : Kirim
:
Alamat
:
Pukul
:
Telepon
:
Jmlh P
:
:
Kirim
FOOTER
Gambar 3.32 Rancangan halaman pemesanan rias
LOGOUT
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
Email
Pukul
Tgl_butuh
Jmlh_p
Status OK
FOOTER
Gambar 3.33 Rancangan halaman status pemesan
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
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 BERANDA
ORDER
DATA MASTERDATA
LAPORAN
LOGOUT
SELAMAT DATANG ADMINISTRATOR
FOOTER
Gambar 3.35 Rancangan halaman utama administrator
78
10. 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, Email, Status, tombol simpan). Halaman utama administrator input data pelanggan dapat dilihat pada gambar 3.36 dibawah ini.
BANNER
BERANDA
DATA
MASTER
DATA
ORDER
DATA
LAPORAN
LOGOUT
DATA PEMESANAN No
Nama
JK
Almt
STATUS
Email
ENTRY
Pukul
EDIT
Tgl_butuh
Jmlh_p
HAPUS
FOOTER
Gambar 3.36 Rancangan halaman administrator data pemesanan
Status
79
11. 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
MASTER
DATA
ORDER
DATA
LAPORAN
LOGOUT
DATA DAFTAR PELAYANAN NO
NAMA
..
..
..
..
HARGA
.. ENTRY
EDIT
HAPUS
FOOTER
Gambar 3.37 Rancangan halaman utama manajemen pelayanan
80
12. 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, Email, Status dan tombol simpan). Halaman utama administrator input data pemesanan dapat dilihat pada gambar 3.38 dibawah ini.
BANNER HALAMAN
DATA
MASTER
DATA
ADMIN
ORDER
DATA
LAPORAN
LOGOUT
ENTRY DATA Email Baru : Kirim
:
Alamat
:
Pukul
:
Telepon
:
Jmlh P
:
Status
:
:
SIMPAN
FOOTER
Gambar 3.38 Rancangan halaman utama input data pemesanan
81
13. 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, Email, Status dan Tombol simpan). Halaman utama administrator edit data pemesanan dapat dilihat pada gambar 3.39 dibawah ini.
BANNER HALAMAN
DATA
MASTER
DATA
ADMIN
ORDER
DATA
LAPORAN
LOGOUT
EDIT DATA Email
:
Kirim
:
Alamat
:
Pukul
:
Telepon
:
Jmlh P
:
Status
: SIMPAN
FOOTER
Gambar 3.39 Rancangan halaman edit data pemesanan
82
14. 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
DATA
MASTER
DATA
ADMIN
ORDER
DATA
LAPORAN
LOGOUT
DATA USER USERNAME
ENTRY
PASSWORD
EDIT
LEVEL
HAPUS
FOOTER
Gambar 3.40 Rancangan halaman utama manajemen user
83
15. 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
DATA
MASTER
DATA
ADMIN
ORDER
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
