BAB III PEMBAHASAN. pada web e-commerceyang ada yaitu untuk mempermudah customer dalam

(1)

26 3.1. Analisa Kebutuhan

Berdasarkan pengamatan penulis mengenai analisis sistem yang berjalan pada web e-commerceyang ada yaitu untuk mempermudah customer dalam melakukan perawatan kecantikan dimanapun dan kapanpun,yang mana kecantikan merupakan hal yang umum dan lumrah yang sering diperbincangkan, dilakukan, serta dijaga oleh wanita masa kini.

Website ini dibuat atas dasar kebutuhancustomer yaitu pemesanan layanan salon secara online, yaitu untuk mempermudah customer, sehingga dapat menghemat waktu dan energi, maka penulis mencoba merancang sebuah web e-commerce untuk mempermudah customer. Adapun analisa kebutuhan pada sistem informasi pemesanan layanan salon berbasisweb ini adalah sebagai berikut : 1. Kebutuhan Pengguna

Kebutuhan Pengguna dalam perancangan ini terbagi menjadi kebutuhan pelanggan dan kebutuhan pemilik website.

a. Kebutuhan Pelanggan

1) Pelanggan yang memiliki akun di website ini yang dapat melakukan pemesanan, pemesanan dilakukan dengan cara memilih kategori apa saja yang ingin dilakukan, namun pelanggan yang tidak berminat memiliki akun ini atau tidak ingin memesan, tetapi dapat melihat-lihat layanan apa saja yang telah

(2)

disediakan di website ini, atau bisa melihat halaman-halaman lainnya.

2) Tampilan layanan yang disediakan dibagi menjadi beberapa kategori, sehingga memudahkan customer dalam memilih layanan apa saja yang diingin kan dalam tahap perawatan.

b. Pemilik Website.

1) Pemilik website dapat memasarkan produk melalui webhalaman admin/backend.

2) Pemilik website memberikan halaman kontak kami, guna untuk memudahkancustomer dalam melakukan hubungan secara langsung kepada pemilik website, jika ingin bertanya secara langsung, serta juga dapat melihat lokasi vanesha salon berada.

2. Kebutuhan Sistem

Kebutuhan sistem pada rancangan ini terbagi menjadi beberapa prosedur, beberapa prosedur, antara lain:

a. Prosedur Pendaftaran Pelangan

1) Pelanggan mengunjungi websitePemesanan Layanan Salon customer mendapatkan halaman utama (home) dari website tersebut.

2) Pada halaman utama (home) akan ada kategori, dimana kategori tersebut merupakan layanan apa saja yang tersedia untuk melakukan tahap perawatan yang diinginkan pada websitePemesan Layanan Salon BerbasisWeb ini.

(3)

3) Jika customer berminat untuk memesan maka customer harus terlebih dahulu pilih menu daftar yang berada di menu akun, bagi customer baru diharuskan untuk melakukan daftar akun baru dan mengisi form pendaftaran yang telah ditentukan untuk mendapatkan akun customer pada halaman daftar jika ingin melakukan pemesanan,sedangkan bagi customer lama, customer tinggal memasukkan alamat e-mail serta password yang telah melakukan pendaftaranpada menu masuk kemudian login.

b. Prosedur Pemesanan

1) Setelah itu customer dapat memilih kategori layananapa saja yang diinginkan untuk tahap perawatan.

2) Jika customer sudah menentukan kategori layanan apa saja yang dipilih maka customer akan diarahkan ke halaman keranjang, pada halaman keranjang,customer dapat memproses pesanan lalu akan mendapatkan detail harga layanan yang dipilih.

3) Kemudian customer diarahkan pada halaman checkout, dimana halaman tersebut menampilkan keseluruhan perihal pemesanan, mulai dari layanan kategori, alamat, serta total pembayaran keseluruhan.

4) Kemudian customer harus men-transfer total bayaran untuk layanan yang telah dipilih, dan diberi waktu selama 4jam lamanya sebelum tanggal pemesanan, jika lebih dari tanggal pemesanan, maka pesanan akan otomatis dibatalkan, dan customer juga dapat memilih jenis pembayaran dimana nantinya customer bisa

(4)

memilih layanan pengiriman sesuai dengan apa yang customer inginkan.

5) Terakhir, Jika customer telah selesai memilih dan men-transfer jenis pembayaran, lalucustomerdiharuskan mengkonfirmasi pembayaran dengan memilih tombol konfirmasi yaitutombol untuk membuktikan bahwacustomer telah melakukan pembayaran dengan meng-uploadbukti pembayaran tersebut.

c. Prosedur Pembayaran

1) Apabila customer sudah melakukan total bayaran secara transfer bank, customer diharuskan melakukan konfirmasi pembayaran, dengan cara masuk pada menu akun customer lalu pilih menu pembayaran, setelah itu customer memilih konfirmasi pembayaran dan mengisi data-data pembayaran yang telah ditentukan.

2) Apabila customer masih bingung dengan cara pemesanan serta pembayarannya, makacustomerdapat mengunjungi pagecara pembayaran yang menjelaskan tata cara pemesanan serta pembayaran dan konfirmasi pembayaran dihalaman tentang kami yang telah kami buat.

d. Prosedur Akun Pelanggan

1) Pada halaman akun ini customer mendapatkan beranda keranjang pada halaman akun yang berisi layanan-layanan apa saja yang telah dipesan.

(5)

2) Pada halaman akun ini customer mendapatkan beranda checkout pada halaman akun, yang mana informasi mengenai pemesanan. 3) Pada halaman akun saya, customer mendapatkan akun sendiri

yang berisikan informasi apa saja mengenai customerserta disini juga dapat mengganti kata sandi dari customertersebut.

4) Pada halaman ini costumer dapat melihat kembali daftar pesanan yang telah dilakukan.

e. Prosedur keluar Akun

1) Jika customeringin keluar dari akun customer, maka customerdapat memilih menu keluar yang telah disediakan di dalam akun.

3.2. Perancangan Perangkat Lunak

Perancangan merupakan proses yang dilakukan oleh perancang sistem untuk mengerjakan spesifikasi sistem, membuat keputusan tentang bagaimana komponen sistem diaktualisasikan, proses ini menyangkut tujuan sistem tersebut, audience, perancangan yang baik harus mengetahui bagaimana mendapatkan efek yang dibutuhkan oleh spesifikasi tersebut dengan cara paling fleksibel, efisien dan elegan.

Dalam hal ini, sistem yang akan dibuat adalah dengan menggunakan PHP, HTML, CSS dan Javascriptsebagai bahasa pemrogramannya dan MySQL sebagai database nya serta Sublime text sebagai media untuk membuat web e-commerce ini. Adapun spesifikasi serta target terhadap sistem yang akan dibuat yaitu:

(6)

1. Perancangan yang akan dibuat yaitu “Perancangan Sistem Informasi Pemesanan Layanan Salon Berbasis Web” yang menyediakan informasi-informasi tentang cara pemesanan layanan dan lainnya.

2. Tujuan dalam perancangan web e-commerce ini adalah diharapkan costumer mendapatkan informasi mengenai kategori layanan apa saja yang telah disediakan, sehingga dapat memudahkan masyarakat untuk melakukan perawatan kecantikan dan diharapkan pula dapat memberikan kemudahan bagi masyarakat luas.

3.2.1. Rancangan Antar Muka A. Rancangan Antar Muka

1. Rancangan Antar Muka LoginAdmin

Login adminadalah halaman awal untuk masuk ke halaman admin, dimana admin harus melakukan login terlebih dahulu dengan mengisi username beserta passwordsebelum masuk kehalaman admin.

Gambar III.1.

(7)

2. Rancangan Antar Muka Admin Status Salon

Halaman statun salon admin adalah halaman untuk mengubah apakah customerdapat melakukan pemesanan atau tidak, dimana pada halaman ini mencakup salon sedang buka atau tutup.

Gambar III.2.

Rancangan antar Muka Admin Status Salon 3. Rancangan Antar Muka AdminHome Banner

Halaman home banner admin adalah halaman untuk mengubah konten banner dihalaman home user.

Gambar III.3.

(8)

4. Rancangan Antar Muka Admin Testimony Index

Halaman admin testimony indexadalah halaman untuk mengelola data testimony yang mana akan ditampilkan pada halaman home.

Gambar III.4.

Rancangan Antar Muka Admin Testimony Index 5. Rancangan Antar Muka Admin TestimonyTambah

Halaman admin testimony tambah adalah halaman untuk menambah data testimony yang baru.

Gambar III.5.

(9)

6. Rancangan Antar Muka Admin TestimonyPerbaharui

Halaman admin testimony perbaharui adalah halaman untuk memperbaharui data testimony yang sudah ada.

Gambar III.6.

Rancangan Antar Muka Admin TestimonyPerbaharui 7. Rancangan Antar Muka Admin Tentang Kami Index

Halaman admin tentang kami adalah halaman untuk mengelola data tentang kami, halaman ini berisi visi, misi, dan apapun hal yang berhubungan dengan profile salon.

Gambar III.7.

(10)

8. Rancangan Antar Muka Admin Tentang Kami Tambah

Halaman admin tentang kami tambah adalah untuk menambah data tentang kami (salon).

Gambar III.8.

Rancangan Antar Muka Admin Tentang Kami Tambah 9. Rancangan Antar Muka Admin Tentang Kami Perbaharui

Halaman admin tentang kami perbaharui adalah halaman untuk memperbaharui data tentang kami (salon) yang sudah ada namun diperbaharui.

Gambar III.9.

(11)

10. Rancangan Antar Muka Admin Layanan Index

Halaman admin layanan index adalah halaman untuk mngelola data layanan salon tersebut.

Gambar III.10.

Rancangan Antar Muka Admin Layanan Index 11. Rancangan Antar Muka Admin Layanan Tambah

Gambar III.11.

(12)

12. Rancangan Antar Muka Admin Layanan Perbaharui

Gambar III.12.

Rancangan Antar Muka Admin Layanan Perbaharui 13. Rancangan Antar Muka Admin Kategori Layanan Index

Halaman admin kategori layanan index adalah halaman untuk mengelola data kategori layanan yang nantinya akan digunakan untuk mengelola layanan.

Gambar III.13.

(13)

14. Rancangan Antar Muka Admin Kategori Layanan Tambah

Halaman admin kategori layanan tambah adalah halaman untuk menambahkan data kategori layanan.

Gambar III.14.

Rancangan Antar Muka Admin Kategori Layanan Tambah 15. Rancangan Antar Muka Admin Kategori Layanan Perbaharui

Halaman admin kategori layanan perbaharui adalah halaman untuk mengubah atau memperbaharui data kategori layanan yang telah tersimpan didalam database.

Gambar III.15.

(14)

16. Rancangan Antar Muka Admin Artikel Index

Halaman admin artikel index adalah halaman untuk mengelola data artikel.

Gambar III.16.

Rancangan Antar Muka Admin Artikel Index 17. Rancangan Antar Muka Admin Artikel Tambah

Halaman admin artikel tambah adalah halaman untuk menambahkan data artikel baru.

Gambar III.17.

(15)

18. Rancangan antar Muka Admin Artikel Perbaharui

Halaman admin artikel perbaharui adalah halaman untuk mengubah atau memperbaharui data artikel yang sudah ada.

Gambar III.18.

Rancangan Antar Muka Admin Artikel Perbaharui 19. Rancangan Antar Muka Admin Kota Index

Halaman admin kota index adalah halaman untuk mengelola data kota.

Gambar III.19.

(16)

20. Rancangan Antar Muka Admin Kota Tambah

Halaman admin kota tambah adalah halaman untuk menambahkan data kota baru.

Gambar III.20.

Rancangan Antar MukaAdminKota Tambah 21. Rancangan Antar Muka Admin Kota Perbaharui

Halaman admin kota perbaharui adalah halaman untuk mengubah atau memperbaharui data kota yang sudah ada.

Gambar III.21.

(17)

22. Rancangan Antar Muka Admin Lokasi Index

Halaman admin lokasi adalah halaman untuk mengelola data lokasi.

Gambar III.22.

Rancangan Antar Muka AdminLokasi Index 23. Rancangan Antar Muka Admin Lokasi Tambah

Halaman admin lokasi tambah adalah halaman untuk menambah data lokasi baru.

Gambar III.23.

(18)

24. Rancangan Antar Muka AdminLokasi Perbaharui

Halaman admin lokasi perbaharui adalah halaman untuk mengubah atau memperbaharui data lokasi yang sudah ada.

Gambar III.24.

Rancangan Antar Muka AdminLokasi Perbaharui 25. Rancangan antar Muka AdminPelanggan Index

Halaman admin lokasi index adalah halaman untuk mengelola data pelanggan, pada halaman ini admin hanya bisa melihat data pelanggan dan mengubah data pelanggan menjadi aktif atau tidak aktif.

Gambar III.25.

(19)

26. Rancangan Antar Muka Admin Pesanan Index

Halaman admin pesanan index adalah halaman untuk mengelola data pesanan, pada halaman ini admin hanya bisa melihat rincian dan mengubah status pesannya saja.

Gambar III.26.

Rancangan Antar MukaAdminPesanan Index 27. Rancangan Antar Muka AdminPesananDetail

Halaman admin pesanan detail adalah halaman untuk melihat rincian data pesanan dari mulai data siapa yang memesan sampai dengan layanan apa saja yang telah dipesan.

Gambar III.27.

(20)

28. Rancangan Antar Muka Admin Pesanan Perbaharui

Halaman admin pesamam perbaharui adalah halaman untuk memperbaharui status pemesanan.

Gambar III.28.

Rancangan Antar Muka AdminPesanan Perbaharui 29. Rancangan Antar Muka Amin Konfirmasi Index

Halaman konfirmasi index adalah halaman untuk mengelola data konfirmasi pembayaran yang telah dilakukan oleh pelanggan.

Gambar III.29.

(21)

30. Rancangan Antar Muka AdminKonfirmasiDetail

Halaman konfirmasi detail adalah halaman untuk melihat rincian konfirmasi pembayaran. Pada halaman ini admin juga dapat mengubah status konfirmasi.

Gambar III.30.

Rancangan Antar Muka AdminKonfirmasi Detail 31. Rancangan Antar Muka Admin Kontak Kami Perbaharui

Halaman admin kontak kami perbaharui adalah halamann untuk memperbaharui konten kontak kami di halaman user.

Gambar III.31.

(22)

B. Rancangan Antar Muka User

1. Rancangan Antar MukaUser Index

Halaman user index adalah halaman saat pertama kali user membuka website.

Gambar III.32.

(23)

2. Rancangan Antar MukaUserTentang Kami

Halaman user tentang kami adalah halaman yang berisi data mengenai toko, data berupa visi dan misi ataupun hal lain yang berhubungan dengan profil toko.

Gambar III.33.

(24)

3. Rancangan Antar MukaUserLayanan

Halaman user layanan adalah halaman yang menampilkan semua layanan berdasarkan kategori layanan tertentu yang diakses, pada halaman ini user dapat memesan layanan apa saja yang ingin dipesan dengan syarat harus terdaftar sebagai pelanggan terlebih dahulu.

Gambar III.34.

(25)

4. Rancangan Antar Muka UserArtikel

Halaman user artikel adalah halaman daftar artikel yang berisikan hal-hal apa saja yang berhubungan dengan perawatan kecantikan.

Gambar III.35.

(26)

5. Rancangan Antar MukaUserArtikel Detail

Halaman artikel detail adalah halaman yang berisi rincian artikel.

Gambar III.36.

Rancangan Antar MukaUserArtikelDetail 6. Rancangan Antar MukaUserKontak Kami

Halaman user kontak kami adalah halaman yang berisi menampilkan kontak dari pemilik atau info dari salon, isi content dari halaman ini dapat diubah melalui halaman admin.

Gambar III.37.

(27)

7. Rancangan Antar Muka User Daftar

Halaman user daftar adalah halaman untuk mendaftar sebagai pelanggan, jika pendaftaran berhasil maka user sudah resmi menjadi pelanggan dan sudah dapat melakukan pemesanan melalui website ini.

Gambar III.38.

Rancangan Antar MukaUser Daftar 8. Rancangan Antar Muka UserMasuk

Halaman user masuk adalah halaman untuk user login sebagai pelanggan agar bisa memesan beberapa layanan salon yang ada di website.

(28)

Gambar III.39.

Rancangan Antar Muka UserMasuk 9. Rancangan Antar MukaUserAkun Saya

Halaman akun saya adalah halaman untuk memperbaharui data akun pelanggan.

Gambar III.40.

(29)

10. Rancangan Antar MukaUserGanti Kata Sandi

Halaman user ganti kata sandi adalah halaman untuk mengubah kata sandi yang dipakai saat pelanggan melakukan login.

Gambar III.41.

Rancangan Antar MukaUser Ganti Kata Sandi 11. Rancangan Antar MukaUserDaftar Pesanan

Halaman user daftar pesanan adalah halaman untuk melihat seluruh riwayat pesanan baik pesanan itu berstatus finished ataupun canceled.

(30)

Gambar III.42.

Rancangan Antar MukaUser Daftar Pesanan 12. Rancangan Antar MukaUserKonfirmasi Pesanan

Halaman userkonfirmasi pesanan adalah halaman untuk mengkonfirmasi pesanan jika pembayaran sudah dilakukan dengan jumlah transfersesuai dengan yang telah diberitahukan.

Gambar III.43.

(31)

13. Rancangan Antar MukaUserKeranjang

Halaman user keranjang adalah halaman daftar pesan layanan sebelum proses checkout. Pada halaman ini menampilkan layanan yang telah dipesan serta total harga dari semua layanan yang telah dipesan.

Gambar III.44.

Rancangan Antar MukaUserKeranjang 14. Rancangan Antar MukaUser Checkout

Halaman user checkout adalah halaman untuk mengkonfirmasi kemana pesanan akan dilakukan setelah pemesanan layanan. Ketika tombol selesai diklik maka data akan disimpan. Tahap selanjutnya adalah melakukan konfirmasi pemesanan, konfirmasi pemesanan dilakukan jika sudah melakukan pembayaran.

(32)

Gambar III.45.

Rancangan Antar MukaUser Checkout 15. Rancangan Antar MukaUser Checkout Review

Rancangan Antar Muka User Checkout Review adalah halaman untuk melihat keseluruhan pemesanan yang telah dilakukan oleh customer.

(33)

Gambar III.46.

Rancangan Antar MukaUser Checkout Review 3.2.2. Rancangan Basis Data

Rancangan basis data untuk sistem informasi pemesanan layanan salon webini diawali dengan membuat Entity Relationship Diagram (ERD), kemudian diubah menjadiLogical Record Structure(LRS), gambaran dari LRS tersebut akan menghasilkan sebuah tabel relasi basis data. Tabel basis data tersebut kemudian dinormalisasikan untuk mencegah terjadinya duplikasi maupun redudansi data.

(34)

(35)

Gambar III.47.

Entity Relationship Diagram (ERD B. Logical Record Structure (LRS)

Gambar III.48.

Logical Record Structure (LRS) C. Spesifikasi File

Spesifikasi fileyang ada pada perancangan websitepemesanan layanan salon ini merupakan kumpulan data yang berawal dari penginputan data. Data tersebut akan diproses untuk mendapatkan hasil yang menunjang sistem kerja yangdiinginkan. Dalam perancangan website ini terdapat beberapa table yang

(36)

menunjukanadanya relasi antar 13 tabel, dan memiliki satu database yaitu vaneshasalon. Secara detail spesifikasi file adalah sebagai berikut :

1. Spesifikasi File Admin

Nama File : admin

Akronim : admin

Fungsi : Untuk mengelola data admin Tipe File : FileMaster

Organisasi File : IndexedSequential

Akses File : Random

Media : Hardisk

Panjang Record : 231 karakter Kunci Field : AdminID

Software : MySQL

Tabel III.1 Spesifikasi File Admin

No. Element Data Nama Field Tipe Siz e

Ket

1. Id Administrator AdminID Int 11 Primary Key 2. Username Administrator AdminUserName Varchar 20 3. Password Administrator AdminPassword Varchar 50

4. Nama Administrator AdminName Varchar 50 5. Email Administrator AdminEmail Varchar 50 6. Nama Pembuat

Administrator

AdminEntryName Varchar 50

(37)

Administrator

2. Spesifikasi File City

Nama File : city

Akronim : city

Fungsi : Untuk mengelola data city Tipe File : FileMaster

Media : Hardisk

Panjang Record : 84 karakter Kunci Field : CityID

Software : MySQL

Tabel III.2 Spesifikasi FileCity

No. Element Data Nama Field Tipe Size Ket

1. Id Kota CityID Varchar 20 Primary Key

2. Id Administrator AdminID Varchar 11 Foreign Key 3. Nama Kota CityName Varchar 50

4. Status Tampil Kota CityShow Int 1 5. Tanggal Diubah

Kota

CityDate Datetime

(38)

3. Spesifikasi File Confirmation

Nama File : confirmation Akronim : confirmation

Fungsi : Untuk mengelola data confirmation Tipe File : File Master

Organisasi File : Indexed Sequential

Media : Hardisk

Panjang Record : 112 karakter Kunci Field : ConfirmationID

Software : MySQL

Tabel III.3

Spesifikasi File Confirmation

1. Id Konfirmasi ConfirmationID Varchar 20 Primary Key 2. Id Order OrderID Varchar 20 Foreign Key 3. Id Member MemberID Varchar 20 Foreign Key 4. Bukti Konfirmasi ConfirmationImage Text 5. Status Konfirmasi ConfirmationStatus Int 1 6. Tanggal Konfirmasi ConfirmationDate Datetime 7. Nama Pemilik Konfirmasi ConfirmationName Varchar 50

(39)

8. Nama Bank Konfirmasi

ConfirmationAccou nt

Int 1

4. Spesifikasi File Location

Nama File : location Akronim : location

Fungsi : Untuk mengelola data location Tipe File : File Master

Organisasi File : Indexed Sequential

Media : Hardisk

Panjang Record : 98 karakter Kunci Field : LocationID

Software : MySQL

Tabel III.4 Spesifikasi FileLocation

1. Id Lokasi LocationID Varchar 20 Primary Key

2. Id City CityID Varchar 20 Foreign Key

3. Id

Administrator

AdminID Int 1 Foreign Key

4. Nama Lokasi LocationTitle Varchar 50 5. Kode Pos

Lokasi

LocationKodePos Varchar 5

(40)

Lokasi 7. Status Tampil Lokasi LocationShow Int 1 8. Tanggal Diperbaharui atau Ditambahkan Lokasi LocationDate Datetime

5. Spesifikasi File Member

Nama File : member

Akronim : member

Fungsi : Untuk mengelola data pelanggan Tipe File : FileMaster

Media : Hardisk

Panjang Record : 254 karakter Kunci Field : MemberID

Software : MySQL

Tabel III.5 Spesifikasi FileMember

1. Id Member MemberID Varchar 20 Primary Key

(41)

3. Id Lokasi LocationID Varchar 20 Foreign Key 4. Nama Pelanggan MemberName Varchar 50 5. Email Pelanggan MemberEmail Varchar 40 6. Nomor Telepon Pelanggan MemberPhone Varchar 13 7. Alamat Pelanggan MemberAddress Text 8. Kata Sandi Pelanggan MemberPassword Varchar 40 9. Status Aktif Pelanggan MemberActive Int 1 10. Lokasi Pelanggan MemberLocation Varchar 50

6. Spesifikasi File Mitra

Nama File : mitra

Akronim : mitra

Fungsi : Untuk mengelola data mitra Tipe File : FileMaster

Media : Hardisk

(42)

Kunci Field : MitraID

Software : MySQL

Tabel III.6 Spesifikasi File Mitra

1. Id Mitra MitraID Varchar 20 Primary Key

2. Id City CityID Varchar 20 Foreign Key

3. Alamat Mitra MitraAddress Text 4. Nomor Telepon

Mitra

MitraPhone Varchar 13

5. Email Mitra MitraEmail Varchar 50 6. Kata Sandi Mitra MitraPassword Varchar 40 7. Tanggal Aktif Mitra MitraDate Datetime

7. Spesifikasi File Services

Nama File : services Akronim : services

Fungsi : Untuk mengelola data layanan Tipe File : FileMaster

Media : Hardisk

Panjang Record : 114 karakter Kunci Field : ServicesID

(43)

Software : MySQL

Tabel III.7 Spesifikasi FileServices

No. Element Data Nama Field Tipe Size Ket 1. Id Layanan ServicesID Varch

ar 20 Primary Key 2. Id Kategori Layanan ServicesCategory ID Varch ar 20 Foreign Key

3. Id Administrator AdminID Int 1 Foreign Key 4. Nama Layanan ServicesName Varch

ar

50

5. Harga Layanan ServicesPrice Int 11 6. Deskripsi Layanan ServicesDescripti

on

Text

7. Gambar Layanan ServicesImage Text 1 8. Tanggal Diperbaharui atau Ditambahkan Layanan ServicesDate Date 9. Status Tampil Layanan ServicesShow Int 1 10. Status Keistimewaan Layanan ServicesFeatured Int 1

(44)

8. Spesifikasi File ServicesCategory

Nama File : servicescategory Akronim : servicescategory

Fungsi : Untuk mengelola data kategori layanan Tipe File : FileMaster

Media : Hardisk

Panjang Record : 142 karakter

Kunci Field : ServicesCategoryID

Software : MySQL

Tabel III.8

Spesifikasi FileServicesCategory

No. Element Data Nama Field Tipe Siz e

Ket

1. Id Kategori Layanan

ServicesCategoryID Varchar 20 Primary Key 2. Id Administrator AdminID Int 1 Foreign

Key 3. Nama Kategori Layanan ServicesCategoryNam e Varchar 50 Foreign Key 4. DeskripsiKategor i Layanan ServicesCategoryDesc ription Text 5. LinkKategori Layanan ServicesCategoryPerm alink Varchar 60

(45)

6. Status TampilKategori Layanan ServicesCategorySho w Int 1 7. Tanggal Diperbaharui atau DitambahkanKate gori Layanan ServicesCategoryDate Datetime

9. Spesifikasi File Status

Nama File : status

Akronim : status

Fungsi :Untuk mengelola data status salon apakah salonbuka atau tutup.

Tipe File : FileMaster

Media : Hardisk

Panjang Record : 32 karakter Kunci Field : StatusID

Software : MySQL

Tabel III.9 Spesifikasi FileStatus

(46)

2. Id Administrator AdminID Int 1 Foreign Key

3. Status Salon StatusActive Int 1

4. Tanggal Diperbaharui Status

StatusDate Datetime

10. Spesifikasi File TrOrder

Nama File : trorder Akronim : trorder

Fungsi : Untuk mengelola data pesanan Tipe File : FileTransaksi

Media : Hardisk

Panjang Record : 102 karakter Kunci Field : OrderID

Software : MySQL

Tabel III.10 Spesifikasi FileTrOrder

1. Id Pesanan OrderID Varchar 20 Primary Key

2. Id Pelanggan MemberID Varchar 20 Foreign Key 3. Id Lokasi LocationID Varchar 20 Foreign Key

4. Id Kota CityID Varchar 20

(47)

6. Total Harga Pesanan Dikeranjang

OrderCart Int 11

7. Status Pesanan OrderStatus Int 8. Tanggal Berakhir

Pesanan

OrderExpired Datetime

9. Tanggal Pesanan OrderDate Datetime

11. Spesifikasi File TrOrderDetail

Nama File : trorderdetail Akronim : trorderdetail

Fungsi : Untuk mengelola data detail pesanan Tipe File : File Transaksi

Media : Hardisk

Panjang Record : 73 karakter Kunci Field : OrderDetailID

Software : MySQL

Tabel III.11

Spesifikasi FileTrOrderDetail

1. Id Detail Pesanan OrderDetailID Varchar 20 Primary Key

2. Id Pesanan OrderID Varchar 20 Foreign Key

(48)

4. Jumlah Detail Pesanan

OrderDetailQuantity Int 2

5. Jumlah Harga Detail Pesanan

OrderDetailSubtotal Int 11

3.2.3. Rancangan Struktur Navigasi 1. Struktur Navigasi Halaman Admin

(49)

Gambar III.49.

Struktur Navigasi Halaman Admin 2. Struktur Navigasi Halaman User

(50)

Gambar III.50.

Struktur Navigasi Halaman User 3. Struktur Navigasi Halaman Pelanggan

Gambar III.51.

Struktur Navigasi Halaman Pelanggan 4. Struktur Navigasi Halaman Mitra

Gambar III.52.

Struktur Navigasi Halaman Mitra 3.3. Implementasi dan Pengujian Unit

(51)

3.3.1. Implementasi

1. Implementasi Rancangan Antarmuka

Implementasi antarmuka menggambarkan dari aplikasi yang dibangun yaitu implementasi antarmuka sistem pemesanan layanan salon berbasis web. Berikut ini adalah implementasi antarmuka dari aplikasi yang dibuat:

A. Tampilan Halaman Administrator 1. Halaman Login Admin

Administrator harus melakukan login terlebih dahulu untuk dapatmengelola website.Jika login berhasil maka menu untuk adminakan ditampilkan dan dapat langsung mengelola website.

Gambar III.53.

Tampilan Halaman Login Admin

(52)

Gambar III.54.

Tampilan Halaman Admin Status Salon 3. Halaman Admin Home Banner

Gambar III.55.

Tampilan Halaman Admin Home Banner

(53)

Gambar III.56.

Tampilan Halaman Admin Testimony Index 5. Halaman Admin Testimony Tambah

Gambar III.57.

Tampilan Halaman Admin Testimony Tambah

(54)

Gambar III.58.

Tampilan Halaman Admin Testimony Perbaharui 7. Halaman Admin Tentang Kami Index

Gambar III.59.

Tampilan Halaman Admin Tentang Kami Index

(55)

Gambar III.60.

Tampilan Halaman Admin Tentang Kami Tambah 9. Halaman Tentang Kami Perbaharui

Gambar III.61.

Tampilan Halaman Admin Tentang Kami Perbaharui

(56)

Gambar III.62.

Tampilan Halaman Admin Layanan Index 11. Halaman Admin Layanan Tambah

Gambar III.63.

Tampilan Halaman Admin Layanan Tambah

(57)

Gambar III.64.

Tampilan Halaman Admin Layanan Perbaharui 13. Halaman Admin Kategori Layanan Index

Gambar III.65.

Tampilan Halaman Admin Kategori Layanan Index

(58)

Gambar III.66.

Tampilan Halaman Admin Kategori Layanan Tambah 15. Halaman Admin Kategori Layanan Perbaharui

Gambar III.67.

Tampilan Halaman Admin Kategori Layanan Perbaharui

(59)

Gambar III.68.

Tampilan Halaman Admin Artikel Index 17. Halaman Admin Artikel Tambah

Gambar III.69.

Tampilan Halaman Admin Artikel Tambah

(60)

Gambar III.70.

Tampilan Halaman Admin Artikel Perbaharui 19. Halaman Admin Kota Pelanggan

Gambar III.71.

Tampilan Halaman Admin Kota Pelanggan 20. Halaman Admin Kota Tambah

(61)

Gambar III.72.

Tampilan Halaman Admin Kota Tambah 21. Halaman Admin Lokasi Pelanggan

Gambar III.73.

Tampilan Halaman Admin Lokasi Pelanggan

(62)

Gambar III.74.

Tampilan Halaman Admin Lokasi Tambah 23. Halaman Admin Pesanan Index

Gambar III.75.

Tampilan Halaman Admin Pesanan Index

(63)

Gambar III.76.

Tampilan Halaman Admin Pesanan Detail 25. Halaman Admin Konfirmasi Index

Gambar III.77.

Tampilan Halaman Admin Konfirmasi Index

(64)

1. Halaman User Index

Gambar III.78.

Tampilan Halaman User Index 2. Halaman User Tentang Kami

(65)

Gambar III.79.

Tampilan Halaman User Tentang Kami 3. Halaman User Layanan

(66)

Gambar III.80.

Tampilan Halaman User Layanan 4. Halaman User Artikel

(67)

Gambar III.81.

Tampilan Halaman User Artikel 5. Halaman User Artikel Detail

(68)

Gambar III.82.

Tampilan Halaman User Artikel Detail 6. Halaman User Akun Saya

(69)

Gambar III.83.

Tampilan Halaman User Akun Saya

(70)

Gambar III.84.

Tampilan Halaman User Ganti Kata Sandi 8. Halaman User Daftar Pesanan

Gambar III.85.

Tampilan Halaman User Daftar Pesanan

(71)

Gambar III.86.

Tampilan Halaman User Pesanan Detail 10. Halaman User Kontak Kami

Gambar III.87.

Tampilan Halaman User Kontak Kami 2. Spesifikasi Sistem Komputer

(72)

Berikut ini adalah spesifikasi perangkat keras dan perangkat lunak minimumyang dibutuhkan untuk mengimplementasikan webPemesanan Layanan Salon Berbasis Web.

A. Perangkat Keras (Hardware) 1. Server

a) CPU

(1) Processor intel® Pentium ® 4 2.00 Ghz (2) RAM 2048MB

(3) Hardisk 320 GB b) Standart Mouse c) Standart Keyboard

d) Monitor dengan resolusi minimum 1024 * 768 e) Koneksi internet dengan kecepatan 2 Mbps 2. Client

a) CPU

(1) Processor intel® Pentium ® 4 2.00 Ghz (2) RAM 2048MB

(3) Hardisk 320 GB b) Standart Mouse c) Standart Keyboard

d) Monitor dengan resolusi minimum 1024 * 768 e) Koneksi internet dengan kecepatan 2 Mbps

(73)

B. Perangkat Lunak (Software) 1. Server

a) Sistem operasi yang digunakan seperti :Microsoft Windows, Machintosh, dan Linux.

b) Aplikasi bundle web server seperti XAMPP yang terdiri dari beberapa komponen, diantaranya :

(1) Aplikasi phpMyadmin Versi 2.11.1 (2) Aplikasi MySql Versi 5.0.45

c) Aplikasi Web Browserseperti :Mozilla Firefox, Google Chrome dan Opera Mini.

2. Client

a) Sistem operasi yang digunakan seperti :Microsoft Windows, Machintosh dan Linux.

b) Aplikasi Web Browserseperti :Mozilla Firefox, Google Chrome dan Opera Mini.

3.3.2. Pengujian Unit

Pengujian yang dilakukan terhadap program yang dibuat menggunakan blackbox testing yang fokus terhadap proses masukan dan keluaran program untuk mengetahui kekurangan dari program dan program berjalan sesuai dengan yang diharapkan.

(74)

A. Pengujian Terhadap Form Login

Tabel III.14

Halaman PengujianBlack Box Testing Halaman Login Admin

No .

Skenario

Pengujian Test Case

Hasil yang diharapkan Hasil Pengujian Kesimpulan 1 Seluruh field tidak diisi, kemudian klik tombol login. Username : (kosong) Password : (kosong) Sistem menolak login dan menampilkan pesan ”maafUsername dan Passwordmasih kosong” Sesuai Harapan Valid 2 Mengetikka n username dan Password tidak di isi,kemudia nlogin Username : (admin) Password: (kosong) Sistem akan

menolak untuk login dan menampilkan pesan “Enter Password !” Sesuai Harapan Valid 3 Mengetikka n usernameda n passwordya ng salah, kemudianlo gin Username : (fuji) Password : (vanesha) Sistem akan

menolak untuk login dan akan kembali kehalaman login Sesuai Harapan Valid 4 Mengetikka n usernameda n password yang benar, kemudian login Username : (admin) Password : (admin) Sistem menerima untuk login danmenampilkan ruangadministrator Sesuai Harapan Valid

B. Pengujian Terhadap Form LoginPelanggan Tabel III.15

Halaman Pengujian Black Box TestingHalaman Login Pelanggan No

.

Skenario pengujian

Test case Hasil yang diharapkan

Hasil Pengujian

Kesimpu lan 1. Email dan Email (kosong) Sistem akan Sesuai Valid

(75)

Password: tidakdiisi, kemudian klik tombol login password (kosong) menolak aksespelanggan dan akan mengarahkan kembali kehalaman login serta menampilkan peringatan “masukan Email! Dan masukan Paswword!”. harapan 2. Mengetikan email dan password tidak disi atau kemudian kilk tombol login Email [email protected] password: kosong Sistem akan memolak akses pengunjung dan akanmenampilkan peringatan "masukan password !”. Sesuai harapan Valid 3. Email tidak diisi dan password diisi Email (kosong) Password : putih Sistem akan menolak akses pengunjung dan akanmenampilkan peringatan “Masukan email”. Sesuai harapan Valid 4. Mengetik salah satu kondisi salah pada username namunpass wordbenar kemudian klik tombollogin email: cantika@domai n.com(salah) password:putih (benar). Sistem akan menolak akses pengunjung dan akan menampilkan peringatan “please enter an email address” Sesuai harapan Valid 5. Mengetik salah satu kondisi benar pada username namunpass wordsalah kemudian klik tombol login email: [email protected] (benar) password:putih (catty). Sistem akan menolak akses pengunjung dan akan menampilkan peringatan “please enter a password” Sesuai harapan Valid

(76)

(benar) Password : (benar) [email protected] password: putih akses pengunjung dan kemudian langsung menapilkanpesan “berhasil masuk, selamat datang bunga”. harapan

C. Pengujian Terhadap Form Proses PembuatanLayanan Tabel III.16

Halaman Pengujian Black Box TestingProses PembuatanLayanan No

.

Skenario

Hasil yang diharapkan Hasil Pengujian Kesimpu lan 1 Seluruh field yang ada pada tambah layanan tidak di isi, kemudian klik simpan. Pilih kategori(kosong ) Namalayanan(k osong) Harga layanan (kosong) Deskripsi (kosong) Gambar (kosong) Featured (kosong) Show/hide (kosong) Sistem akan menolak akses dan mengarahkan kembali ke halaman Tambah Layanan Sesuai Harapan Valid 2 Hanya mengisi pilih kategori kemudian klik simpan. Pilih Kategori(diiisi) Nama Layanan(kosong ) Harga Layanan (kosong) Deskripsi (kosong) Gambar (kosong) Featured (kosong) Show/hide(koso ng) Sistem akanmenolak akses dan menampilkan peringatan pada setiap field yang belum diisi Sesuai Harapan Valid 3 Hanya mengisi Pilih kategori(diisi) Sistem akan menolak akses dan

Sesuai Harapan

(77)

pilih kategori dan nama layanan. Nama layanan(diisi) Harga layanan(kosong) Deskripsi (kosong) Gambar (kosong) Featured (kosong) Show/hide(koso ng) menampilkan peringatan pada setiap field yang belum diisi 4 Hanya mengisi pilih kategori, nama layanan dan harga layanan. Pilih kategori(diisi) Nama layanan(diisi) Harga layanan(diisi) Deskripsi (kosong) Gambar (kosong) Featured (kosong) Show/hide(koso ng) Sistem akan menolak akses dan menampilkan peringatan pada setiap field yang belum diisi kan kategori Sesuai Harapan Valid 5 Hanya mengisi pilih kategori, nama layanan, harga layanan dan deskripsi Pilih kategori(diisi) Nama layanan(diisi) Harga layanan(diisi) Deskripsi (diisi) Gambar (kosong) Featured(kosong ) Show/hide(koso ng) Sistem akan menolak akses dan menampilkan peringatan pada setiap field yang belum diisi Sesuai Harapan Valid 6 pilih kategori, nama layanan, harga layanan deskripsi, dan gambar Pilih kategori(diisi) Nama layanan(diisi) Harga layanan(diisi) Deskripsi (diisi) Gambar (diisi) Sistem akan menolak akses dan menampilkan peringatan pada setiap field yang belum diisi

Sesuai Harapan

(78)

diisi Featured (kosong) Show/hide(koso ng) 7 Semua field diisi namun show/hide tidak diisi Pilih kategori(diisi) Nama layanan(diisi) Harga layanan(diisi) Deskripsi (diisi) Gambar (diisi) Featured (diisi) Show/hide(koso ng) Sistem akan menolak akses dan menampilkan peringatan pada setiap field yang belum diisi Sesuai Harapan Valid 8 Semua field diisi dengan benar Pilih kategori(diisi) Nama layanan(diisi)Ha rga layanan(diisi) Deskripsi (diisi) Gambar (diisi) Featured (diisi) Show/hide(diisi) Sistem akan menolak akses dan menampilkan peringatan pada setiap field yang belum diisi

Sesuai Harapan

Valid

D. Pengujian Terhadap Form Proses Pembuatan Kategori Layanan Tabel III.17

Halaman Pengujian Black Box TestingProses Pembuatan Kategori Layanan No

.

Skenario

Hasil yang diharapkan Hasil Pengujian Kesimpu lan 1 Seluruh field yang ada pada tambah kategori layanan tidak di isi, kemudian klik simpan. Nama kategori layanan (kosong) deskripsi (kosong) Show / hide (kosong) Sistem akan menolak akses dan mengarahkan kembali ke halaman Tambah Kategori Layanan Sesuai Harapan Valid

(79)

mengetikan nama kategori layanan kemudian klik simpan. layanan (diisi) Deskripsi (kosong) Show / hide (kosong)

menolak akses dan mengarahkan kembali ke halaman Tambah Kategori Layanan Harapan 3 Mengetikan nama kategori layanan dan deskripsi, show/hide tidak diisi. Nama kategori layanan (diisi) Deskripsi (diisi) Show/hide (kosong) Sistem akan menolak akses dan mengarahkan kembali ke halaman Tambah Kategori Layanan Sesuai Harapan Valid 4 Semua field diisi dengan benar dan konten akan ditampilkan (show) kemudian klik simpan Nama kategori layanan (diisi) Deskripsi (diisi) Show (dipilih) Sistem akan

menerima akses dan akan menampilkan kan kategori Sesuai Harapan Valid 5 Semua field diisi dengan benar dan konten akan disembunyi kan (hide) kemudian klik simpan Nama kategori layanan (diisi) Deskripsi (diisi) hide (dipilih) Sistem akan menerima akses namun tidak akan menampilkan kan kategori

Sesuai Harapan

Valid

E. Pengujian terhadapInputPendaftaran Pelanggan Tabel III.18

Halaman Pengujian Blackbox TestingHalaman Pendaftaran Pelanggan No Skenario

pengujian

Test Case Hasil yang diharapkan Hasil Pengujian Kesimpu lan 1 Email, Password, Konfirmasi Password, Nama, Kota , Lokasi, No Telepon, Almat, tidak di isi atau kosong Mengklik daftar tanpa mengisi data Sistem akan

menolak akses akan kembali kehalaman “Daftar”

Sesuai Harapan

(80)

kemudian klik tombol daftar 2 Salah satu field tidak diisi

Data diisi semua tetapiemail(tida k diisi ) lalu klik daftar

Sistem akan menolak akses dan menampilkan peringatan kemudian akan kembali kehalaman “Daftar” Sesuai Harapan Valid 3 Semua data diisi dengan data yang sudah pernah digunakan sebelumnya kemudian klik tombol daftar

Data diisi oleh data yang telah pernah

digunakan

Sistem akan menolak akses dan akan menampilkan peringatan kemudian akan kembali kehalaman “Daftar” Sesuai Harapan Valid 4. Sema field diisi dengan benar dan belum pernah digunakan sebelumnya Email : diisi Password : diisiKonfirmasi Password : diisi Nama : diisi Kota :diisiLokasi : diisi No : diisi Telepon : diisi Almat : diisi kemudian klik tombol daftar Sistem akan

menerima akses dan langsung muncul kehalaman selanjutnya.

Sesuai harapan

F. Pengujian Terhadap Proses Pembelian Tabel III.19

Halaman PengujianBlackbox TestingProses Pembelian No Skenario

pengujian

Test Case Hasil yang diharapkan Hasil Pengujian Kesimpu lan 1. Tidak mempunyai akun Belum melakukan pendaftaran

Sistem tidak akan bisa melakukan aksesnya untuk melakukan pembelian Sesuai Harapan Valid

(81)

mempunyai akun melakukan pendaftaran digunakan untuk melakukan pembelian Harapan 3. Status salon tutup Telah melakukan pendaftaran, dan mengklik salah satu layanan yang ingin dipesan Sistem menolak pesanan dan akan menampilkan peringatan “Maaf salon untuk sementara ditutup”. Sesuai Harapan Valid 5. Status salon Buka Telah melakukan pendaftaran, dan mengklik salah satu layanan yang ingin dipesan Sistem akan

menerima akses dan diizinkan untuk memesan layanan. Sesuai Harapan Valid 6 Salah satu kategori layanan di pilih saat salon buka Mengklik “Pesan Sekarang” pada salah satu kategori layanan Sistem akan menerima aksesnya dan akan menampilkan peringatan“daftar pesanan keranjang” Sesuai Harapan Valid 5. Salah satu kategori layanan di pilih namun ingin menambah layanan kategori lain Mengklik “Lanjutakan Memesan” pada daftar kerangan. Sistem akan

menerima akses nya dan akan menampilkan peringatan“home” kembali untuk memesan layanan yang lain Sesuai Harapan Valid 6. Pemesanan layanan salon telah dipilih kemudian akan diarahkan ke checkout tetapi tanggal dan jam tidak diisi Tidak melengkapi halaman checkout Sistem akan menolak akses dan akan menampilkan peringatan“isi tanggal pemesanan, isi waktu pemesanan” Sesuai Harapan Valid 7. Pemesanan layanan salon telah dipilih Tidak melengkapi halaman checkout Sistem akan menolak akses dan akan menampilkan peringatan“isi waktu

Sesuai Harapan

(82)

kemudian akan diarahkan ke checkout,da n hanya mengisi tanggal. pemesanan” 8. Pemesanan layanan salon telah dipilih kemudian akan diarahkan ke checkout,da n tanggal, jam diisi. Melengkapi halaman checkout Sistem akan menolak akses dan akan menampilkan pesan “pemesanan berhasil”. Sesuai Harapan Valid

G. Pengujian Terhadap Konfirmasi Pembayaran Tabel III.20

Halaman Pengujian Blackbox Testing Konfirmasi Pembayaran No Skenario

pengujian

Test Case Hasil yang diharapkan Hasil Pengujian Kesimpu lan 1 Total pembayaran harus di transfer dalam 4 jam Tidak mengkonfirmasi pembayaran Sistem akan otomatis membatalkan pemesanan yang telah dilakukan. Sesuai Harapan Valid 2 Telah melakukan transfer , nama sesuai buku tabungan tidak diisi, rekening tujuan dan unggah bukti pembayaran diisi Mengklik tombol “simpan” data belum diisi semua Sistem akan menolak akses nya dan akan

menampilkan peringatan “Nama tidak boleh kosong”.

Sesuai Harapan

(83)

3 Telah melakukan transfer, semua field diisi, rekening tujuan tidak diisi Mengklik tombol “simpan” rekening tujuan tidak diisi Sistem akan menolak akses nya dan akan

menampilkan peringatan “rekening tujuan tidak boleh kosong”.

Sesuai Harapan Valid 4 Telah melakukan transfer, semua field diisi, unggah bukti pembayaran tidak diisi Mengklik tombol “simpan” unggah bukti pembayaran tidak diisi Sistem akan menolak akses nya dan akan menampilkan peringatan “Please select a file”. Sesuai Harapan Valid 5 Telah melakukan transfer, semua field diisi Mengklik tombol “simpan” Sistem akan menerima aksesnya dan akan menampilkan peringatan “Data Konfirmasi berhasil disimpan”. Sesuai Harapan Valid