BAB II LANDASAN TEORI
ANALISA DAN PERANCANGAN SISTEM
I.22 Konseptual Disain Sistem e-Commerce Motor Honda
III.3.2 Perancangan Dialog ( User Interfaces )
III.3.2.1 Perancangan Halaman Web
1. Rancangan halaman index (awal)
Halaman ini adalah halaman awal yang ditampilkan saat user membuka alamat web ASTRA MOTOR yang dibangun. Rancangan halaman index sebagai berikut :
Gambar 3.17Rancangan Halaman Index
Menu “Admin area” bertipe “hiden” dan hanya diketahui oleh admin saja, sedangkan menu “welcome” disediakan untuk pengunjung.
2. Rancangan halaman pengunjung
Jika menu “welcome” di-klik, maka halaman yang akan tampil adalah rancangan halaman “Depan”.
Halaman “HOME”
Halaman ini menampilkan fasilitas untuk pengecekan status order, potongan berita-berita terbaru tentang ASTRA MOTOR dan gambar-gambar produk motor Honda yang baru.
Gambar 3.18 Rancangan Halaman Home Halaman Semua Kategori
Halaman ini menampilkan semua kategori motor Honda, pengunjung bisa meng-klik nama kategori untuk melihat motor Honda apa saja yang termasuk dalam kategori tersebut. Rancangan tampilan halaman untuk semua kategori adalah :
Tampilan yang dinamis,trendy dan elegan, hadir pada anda motor Honda SUPRA
Tampilan yang dinamis,trendy dan elegan, hadir pada anda motor Honda SUPRA X
Revo you’re style…
Matic Vario..skuter matic khusus bagi anda penggemar matic
MEGA PRO kini hadir dengan teknologi terbaru dari Honda..lebih keren
Gambar 3.19 Rancangan Halaman Semua Kategori Halaman Detail Kategori
Halaman ini akan tampil apabila pengunjung memilih salah satu kategori pada halaman “All Type”. Halaman ini menampilkan fitur utama dan pilihan motor untuk kategori yang dipilih. Rancangan tampilan halaman adalah sebagai berikut :
keterangan singkat tentang fitur utama
keterangan singkat tentang fitur utama
keterangan singkat tentang fitur utama
keterangan cara berbelanja atau melakukan pemesanan on line motor Honda
Gambar 3.20 Rancangan Halaman Detail Kategori Halaman Detail Motor
Halaman ini menampilkan daftar spesifikasi dari motor yang dipilih pada halaman detail kategori sebelumnya. Rancangan tampilan halaman detail motor adalah sebagi berikut :
15450000 keterangan cara berbelanja atau melakukan pemesanan on line motor Honda spesifikasi motor
Gambar 3.21 Rancangan Halaman Detail Motor
Halaman data motor yang dipesan danformuntuk input data pemesan Jika pengunjung memilih menu “beli sekarang” pada halaman detail motor, maka pengunjung akan dibawa ke halaman ini. Halaman ini menampilkan data motor yang dipilih sebelumnya dan sekaligus juga
menampilkanform untuk penginputan data-data pemesan. Rancangan tampilannya adalah sebagi berikut :
Supra X 125R Merah 12500000
12500000 300000 12200000
Gambar 3.22 Rancangan Halaman Pesanan Halaman Informasi Order
Jika konsumen meng-klik tombol “simpan” pada halaman Pesanan, maka halaman yang akan ditampilkan adalah halaman yang menyajikan informasi order yang telah dilakukan sebelumnya. Berikut adalah rancangan tampilannya :
Gambar 3.23 Rancangan Halaman Informasi Order Halaman Lihat Status Pemesanan
Konsumen akan dibawa kehalaman ini apabila konsumen mengisikan alamat email dan sandi dengan benar pada form pengecekan status
pemesanan yang ada pada halaman home. Rancangan tampilan halaman lihat status pemesanan adalah sebagai berikut :
Gambar 3.24 Rancangan Halaman Informasi Order
3. Rancangan halaman untuk admin Halaman Input Login Admin
Halaman ini digunakan untuk menginputkan username dan password agar seorang admin dapat melakukan proses pengupdetan data-data yang ada pada database. Jika menu “admin area” pada halaman index di-klik maka halaman ini akan tampil, rancangan tampilannya adalah :
Login AS
Halaman menu admin kepala divisi penjualan
Jika login yang dilakukan berjalan dengan sukses dan seorang admin login sebagai ”Kepala Divisi Penjualan”, maka admin akan dibawa kehalaman menu admin seperti berikut :
UPDATE DATA ORDER LIHAT DATA PEMBAYARAN LIHAT DATA PENGIRIMAN
Gambar 3.26Rancangan Halaman Menu Admin Login Kepala Divisi Penjualan
Halaman Daftar Order Status Pesan
Jika admin memilih menu ”update data order”, maka halaman yang muncul adalah halaman yang menyajikan daftar order yang statusnya masih proses pesan (statusdefaultdari pemesanan). Admin bisa memilih menu ”detail” untuk melihat detail order dan menu hapus
untuk menghapus data order. Rancangan tampilannya adalah sebagai berikut : nama admin UPDATE DAT A ORDE R LIHAT DATA PEMB AYARAN LIHAT DATA
PEN GIRIM AN 001 01-02-07 meli sapen,jogja
Gambar 3.27Rancangan Halaman Daftar Order Status Pesan Halaman Daftar Order Status Bayar
Jika admin memilih menu ”Lihat data pembayaran”, maka halaman yang muncul adalah halaman yang menyajikan daftar order yang statusnya ”bayar”. Admin bisa memilih menu ”detail” untuk melihat detail order dan menu hapus untuk menghapus data order status bayar. Rancangan tampilannya adalah sebagai berikut :
nama admin UP DATE DATA ORDE R LIHAT DATA PEMB AY ARAN LIHAT DATA PEN GIRIM AN
01-01-07 01-0702- meli sapen,j ogja
Gambar 3.28Rancangan Halaman Daftar Order Status Bayar
Halaman Daftar Order Status Kirim
Jika admin memilih menu ”Lihat data pengiriman”, maka halaman yang muncul adalah halaman yang menyajikan daftar order yang statusnya ”kirim”. Admin bisa memilih menu ”detail” untuk melihat detail order dan menu edit untuk mengedit tgl kirim, apabila tgl kirim berbeda dengan tgl bayar. Rancangan tampilannya adalah sebagai berikut :
nama admin 01-01-07 02-01-07 03-01-07 meli sapen,jogja edit edit
Gambar 3.29Rancangan Halaman Daftar Order Status Kirim Halaman Detail Order
Halaman detail order adalah halaman yang menampilkan semua data dari pemesan dan data motor apa yang dipesan. Pada halaman ini juga seorang admin dapat merubah status order. Rancangan tampilannya adalah sebagai berikut :
nama admin
bayar
Halaman menu admin untuk web admin
Jika login yang dilakukan pada halamanform login sukses dan admin memilih login sebagai ”admin web” maka rancangan halaman menu admin yang tampil adalah sebagai berikut :
Gambar 3.31Rancangan Halaman Menu Admin Login Admin Web Halaman Input Data Kategori Motor
Halaman ini digunakan untuk menambahkan kategori baru kedalam tabel kategori. Seorang admin akan menjumpai halaman ini apabila memilih menu ”Update Kategori”, pada halaman Update Kategori admin memilih menu ”tambah kategori baru”. Rancangan tampilannya adalah sebagai berikut :
nama admin update spek motor update warna&stok motor update kategori update fitur uta ma update data login update data rekening
Gambar 3.32Rancangan Halaman Input Data Kategori Baru Halaman Input Spesifikasi Motor
Halaman ini digunakan untuk menambahkan satu spesifikasi motor kedalam tabel motor. Seorang admin akan menjumpai halaman ini apabila memilih menu ”Update Spesifikasi Motor”, pada halaman Update Spesifikasi Motor admin memilih menu ”tambah motor baru”. Rancangan tampilannya adalah sebagai berikut :
nama admin update spek motor update warna&stok motor update kategori update fitur uta ma update data login update data rekening
Gambar 3.33Rancangan Halaman Input Data Motor Baru Halaman Input Data Warna dan Stok Motor
Setiap satu spesifikasi motor pasti mempunyai paling sedikit satu warna dan mempunyai stok berdasarkan warna tersebut. Seorang
admin dapat menginputkan data warna dan stok untuk setiap spesifikasi motor pada halaman ini. Rancangan tampilannya adalah sebagai berikut : nama admin update spek motor update warna&stok motor update kategori update fitur uta ma update data login update data rekening
Gambar 3.34Rancangan Halaman Input Data Motor Baru Halaman Input Data Kategori ke dalam Daftar Kategori Terbaru Rancangan tampilan untuk halaman ini adalah sebagai berikut :
nama admin update spek motor update warna&stok motor update kategori update fitur uta ma update data login update data rekening cw_0
06 vario info umum
BAB IV
