ANALISA DAN PERANCANGAN SISTEM
7. KODEPOS_ PELANGGAN
5 NOTELP Text No telpon
5. KOTA_ PELANGGAN Varchar (75) Kota Pelanggan 6. PROPINSI_PELANGGA
N Varchar (50) Propinsi Pelanggan
7. KODEPOS_ PELANGGAN
Numeric
(8.0) Kode Pos Pelanggan 8. VERIFIKASI_
PELANGGAN Varchar (1) Verifikasi Pelanggan 9. STATUS_ PELANGGAN Varchar (1) Status Pelanggan
3.7 Per ancangan Antar Muka / Interface
Perancangan antarmuka / interface sangat diperlukan dalam membuat
website E-Commerce. Dengan dibuatnya perancangan antar muka / interface
maka pembuatan sistem akan lebih cepat, sebaliknya jika tanpa adanya rancangan
interface maka pembuatan website E-Commerce ini akan lama. Interface sangat diperlukan dalam pengolahan website. Hal ini sedikit akan mempengaruhi banyaknya pengunjung yang berkunjung ke website. Semakin bagus desain
interface yang dibuat maka secara tidak langsung pengunjung lebih nyaman didalam mengakses website E-Commerce ini. Tetapi jika desain interface terlihat kurang bagus, maka pengunjung tidak betah lama-lama dalam menjelajah di
website ini.
Pada Website e-commerce ini akan digambarkan 3 macam desain interface
yaitu untuk halaman pengunjung, halaman pelanggan dan halaman admin. Untuk itu berikut perancangan antar muka / interface seperti gambar di bawah ini :
1.5.1 Halaman Utama Pengunjung
Tampilan website E-Commerce pada halaman pengunjung seperti pada website
umumnya. Disini terdapat beberapa menu seperti Home, Gallery Produk,
Checkout, Login dan beberapa kategori yang berisikan macam-macam tipe batik
yang ada bisa dilihat pada Gambar 3.13
Ga mbar 3.13 Tampilan Halaman Pengunjung Umum
Dari halam utama atau beranda, pengunjung bisa melihat beberapa produk dan harga yang ditawarkan. Berikut adalah perancangan interface halaman pengunjung Perancangan interface (antarmuka) merupakan suatu perancangan
Home | Gallery Produk | Check Out | Login
HEADER Welcom e t o ~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~ Foot er LOGIN Username : Passw ord : Login Keranjan g KATEGORI - Kat egori 1 - Kat egori 2 - Kat egori 3 - Kat egori 4 - Kat egori 5 Pr od Rp. 000 Pr od Rp. 000 Pr od Rp. 000 Pr od Rp. 000 Pr od Rp. 000 Pr od Rp. 000
yang dibangun untuk membantu user dalam memudahkan berinteraksi dengan program yang akan digunakan.
Gambar 3.14 merupakan interface yang berisikan detail dari data barang yang ada di dalam di E-Comerce Batik Toko Lamongan sehingga pengunjung bisa leluasa melihat nama barang, harga barang, diskon barang, merek, ukuran dan status stok masih ada atau sudah kosong. Bilah calon pembeli berniat untuk membeli tinggal meng-klik tombol Buy dan otomatis masuk ke chart belanja. Dalam halaman tersebut ada beberapa kategori yang bisa dipilih sesuai dengan barang yang dibutuhkan ole calon pembeli.
Gambar 3.14 Tampilan Halaman Pengunjung Umum Detail Produk Hom e | Gallery Produk | Check Out | Login
HEADER KATEGORI - Kat egori 1 - Kat egori 2 - Kat egori 3 - Kat egori 4 - Kat egori 5 Keranjang Best Seller Det ail Produk
Foot er LOGIN Usernam e : Passw ord : Login P1 P2 P3
Nama Pro duk
M er k : Ukuran : St at us : Harga : Diskon : Ket erangan : BUY
1.5.2 Halaman Utama Pelanggan
Untuk Halaman utama pelanggan sama dengan halaman utama pada Pengunjung umum. Perbedaan pada halaman Pelanggan, Pelanggan bisa mengganti Profil baik itu foto maupun data profil yang lain. Adapun halaman
login bisa dilihat pada Gambar 3.15.
Ga mbar 3.15 Tampilan Halaman Pelanggan
1.5.3 Halaman Admin
Halaman untuk Admin berbeda dengan halaman untuk pengunjung dan pelanggan. Halaman Admin adalah pusat untuk mengontrol seluruh aktifitas dalam
website E-Commerce ini, maka dari itu halaman Admin didesain dengan
sederhana sehingga bisa memudahkan dalam pengontrolan pesanan. Desain
halaman login Admin bisa dilihat pada Gambar 3.16. Home | Gallery Produk | Check Out | Logout
HEADER KATEGORI - Kat egori 1 - Kat egori 2 - Kat egori 3 - Kat egori 4 Keranjang Best Seller Daft ar Produk Foot er LOGIN Username Logout P1 P2 P3 Fot o Prod Rp. 000 Prod Rp . 000 Prod Rp . 000 Prod Rp. 000 Prod Rp . 000 Prod Rp . 000
Gambar 3.16 Tampilan Login Admin
Halaman Administrator Control Panel digunakan untuk mengontrol semua data, mulai data Barang, data Pelangan, data Pesanan, data Laporan dan data Master. Desain halaman Administrator Control Panel bisa dilihat pada Gambar 3.17.
Gambar 3.17 Tampilan Control Panel
Gambar 3.18 Halaman data barang untuk menampilkan informasi semua barang yang sudah dimasukkan pada E-Commerce. Desain halaman Data Barang bisa dilihat pada Gambar 3.18.
LOGIN ADM INISTRATOR Username : Passw ord : LOGIN ADM INISTRATOR DESKRIPSI ~~~~~~~~ ~~~~~~~~ ~~~~~~~~ ~~~~~~~~ ~~~~~~~~ ~~~~~~~~ ~~~~~~~~ ~~~~~~~~ CONTROL PANEL Foot er Dat a Barang Dat a Pelangg Dat a Pesana Dat a Lapora Dat a M ast er
1
Gambar 3.18 Tampilan Halaman Data Barang
Halaman data pelanggan untuk menampilkan informasi semua Pelanggan yang sudah daftar pada E-Commerce. Desain halaman Data Pelanggan bisa dilihat pada Gambar 3.19
Gambar 3.19 Tampilan Halaman Data Pelanggan
Halaman ini digunakan untuk menampilkan semua pelanggan oleh administrator
serta digunakan untuk menghapus data pelanggan, jika pelanggan tersebut tidak sesuai dengan ketentuan yang diberikan oleh admin. Admin juga bisa merubah data pelanggan apabila data yang sudah masuk mengalami perubahan.
ADM INISTRATOR LOGOUT
M ENU M enu 1 M enu 2 M enu 3 M enu 4 DATA PELANGGAN
Foto Nama Email Tgl M asuk
…… ……. ……. Hapus …… ……. ……. Hapus Foot er ADM INISTRATOR M ENU M enu 1 M enu 2 M enu 3 M enu 4 DATA BARANG
Gambar Nama Har ga Jumlah
…… ……. …….
…… ……. …….
Pada bab ini merupakan implementasi dan pembahasan dari Analisa dan Perancangan Sistem dari Website E-Commerce pada Batik Lamongan yang didalamnya meliputi uji kelayakan dan pemeliharaan sistem. Implementasi dan Pembahasan Website E-Commerce pada Batik Lamongan ini untuk mengetahui bagaimana cara pembuatan Website E-Commerce.
4.1 Menu Sistem
Website E-Commerce pada Batik Lamongan ini bisa diakses dengan
alamat http://localhost/ujian/index.php yang terdapat 3 halaman utama yaitu Halaman Pengunjung Umum, Halaman Pelanggan dan Halaman Administrator.
4.1.1 Halaman Pengunjung Umum
Halaman Pengunjung Umum Website E-Commerce pada Batik Lamongan ini sangat penting, karena disini pengunjung bisa memilih atau sekedar melihat produk - produk yang ada. Desain Halaman Utama Pengunjung juga mempengaruhi jumlah pengunjung. Apabila tampilan desain dari website menarik maka pengunjung akan tertarik lebih jauh untuk membuka ataupun juga membeli produk yang ada. Di bawah ini merupakan tampilan halaman utama pengunjung dengan warna dominan hitam dan kombinasi hijau.
Gambar 4.1 Tampilan Halaman Pengunjung Umum
Secara umum tampilan Halaman Utama Pengunjung dengan Halaman Pelanggan itu sama, yang membedakan terletak pada menu tambahan ketika pelanggan sudah login. Pada Halaman Utama Pengunjung ini hanya terdapat 4 menu yaitu Home, Checkout, dan Contact. Menu Home digunakan untuk beralih ke halaman awal website, menu Checkout berfungsi untuk memesan produk yang
ada pada Batik Lamongan, menu Contact berfungsi untuk informasi alamat Batik Lamongan secara detail.
Pengunjung disini bebas membuka halaman dan bebas memilih produk produk yang ada pada website. Produk yang ada pada Batik Lamongan sudah tertata rapi sesuai dengan kategori yang berada pada left sidebar dan pengunjung bebas memilih produk berdasarkan kategori yang ada. Halaman kategori bisa dilihat pada Gambar 4.2
Gambar 4.2 Tampilan Kategori Produk
Semua produk yang dipilih atau di klik secara otomatis masuk kedalam
Shopping Cart yang ada pada right sidebar tetapi tidak bisa checkout sebelum pengunjung melakukan daftar sebagai pelanggan. Tampilan Shopping Cart seperti pada Gambar 4.3.
Pendaftaran pengunjung bisa melalui link DAFTAR yang ada pada right sidebar Login seperti Gambar 4.4
Gambar 4.4 Tampilan Login & Daftar
Yang kemudian dilanjutkan dengan mengisi form yang sudah ada dengan lengkap yang sudah ada. Form Pendaftaran bisa dilihat pada Gambar 4.5.
Selanjutnya pengunjung diminta untuk mengkonfirmasi email yang sudah dikirim
ke email pengunjung dengan cara mengklik link konfirmasi yang ada. Dengan itu
maka pengunjung sudah menjadi pelanggan yang bisa memesan produk pada Batik Lamongan.
4.1.2 Halaman Pelanggan
Halaman Pelanggan pada Website E-Commerce ini secara umum sama. Yang membedakan adalah adanya tambahan menu yang khusus dimunculkan ketika pelanggan sudah login ke halaman website. Menu tambahan tersebut antara lain menu Profile yang berfungsi untuk mengetahui profile pelanggan secara detail, menu Logout yang berfungsi untuk keluar dari status pelangan dan menu Konfirmasi yang berfungsi untuk konfirmasi pembayaran oleh pelanggan kepada
admin. Halaman Pelanggan bisa dilihat pada Gambar 4.6.
Halaman pelanggan hanya bisa diakses oleh pelanggan yang mempunyai akun dan harus login terlebih dahulu dengan mengisikan email dan password yang diperoleh ketika daftar. Jika pelanggan lupa password untuk login maka pelanggan bisa memilih link LUPA PASSWORD di right sidebar bagian bawah dan mengisikan form yang ada. Form lupa password bisa dilihat pada Gambar 4.7
Gambar 4.7 Halaman Lupa Password
Selanjutnya pelanggan tinggal membuka link yang sudah terkirim ke email
yang dimasukkan ke form lupa password dan mengisikan form pada halaman
resetpassword bisa dilihat pada Gambar 4.8.
Pelanggan bisa menghapus dan meng-update produk yang sudah masuk kedalam Shopping Cart dengan mudah. Apabila pelanggan ingin menghapus pesanan tinggal meng-klik gambar delete yang ada dalam Shopping Cart dan apabila ingin meng-update jumlah produk tinggal mengganti angka yang ada pada
form jumlah. Berikut gambar tampilan Shopping Cart yang ada pada Website
E-Commerce pada Batik Lamongan dapat dilihat pada Gambar 4.9.
Ga mbar 4.9 Tampilan Shopping Cart
Setelah produk sudah fix dipesan, maka pelanggan tinggal meng-klik link
Checkout yang berada di bawah daftar keranjang belanja dan mengisikan alamat
baru jika barang dikirim ke alamat lain.
Setelah pelanggan memesan produk-produk yang ada pada Batik Lamongan, selanjutnya pelanggan harus men-transfer sejumlah uang ke nomor rekening 140-00-1043962-9 Bank Mandiri Cabang Lamongan atas nama Mohammad Zubet. Jika transfer pembayaran sudah dikirim pelanggan harus
mengkonfirmasi pembayaran melalui menu konfirmasi yang ada pada halaman pelanggan atau bisa melalui email dan SMS. Berikut adalah gambar form konfirmasi pembayaran pada Gambar 4.10.
Gambar 4.10 Form Konfirmasi Pembayaran
4.1.3 Halaman Administr ator
Sebelum masuk ke halaman Administrator, seorang admin harus memasukkan username dan password sehingga bisa membuka halaman
administrator. Pada login administrator ini ada 2 jenis yaitu administrator, dan Kasir. Di bawah ini adalah gambar dari halaman LoginAdministrator :
Administrator mempunyai hak akses penuh yang bisa mengontrol semua aktifitas pesanan dan juga bisa menambah dan menghapus akun kasir. Pada halaman Super administrator semua menu akan ditampilkan terlihat pada Gambar 4.12.
Gambar 4.12 Halaman Super Administrator
Menu Admin digunakan untuk menambah, meng-edit dan menghapus akun
Administrator dan Kasir yang ada di Website E-Commerce pada Batik Lamongan.
Ada beberapa menu yang ada pada halaman Adminitrator diantaranya:
4.1.4 Menu Admin
Halaman ini hanya bisa diakses oleh Administrator. Untuk membuat akun ini harus mengisikan Username, Email, Jenis Admin dan Password. Tapi yang
digunakan untuk loginAdministrator adalah email dan password. Berikut adalah tampilan dari halaman kelola admin pada Gambar 4.13.
Gambar 4.13 Halaman Menu Admin
4.1.5 Menu User
Halaman kelola user ini berfungsi untuk mengatur user / pelanggan yang sudah membuat akun dan memesan produk pada Website Batik Lamongan. Ada 2 sub menu yang ada pada halaman ini yaitu User dan User Blokir. Sub menu User
berfungsi untuk memblokir user yang dianggap bermasalah yang nantinya user
yang diblokir tersebut akan masuk pada halaman User Blokir. Menu user bisa dilihat pada Gambar 4.14.
User Blokir berfungsi untuk menampikan Akun User yang sudah diblokir oleh Administrator dengan alasan tertentu. User yang terblokir tersebut bisa untuk diaktifkan lagi atau bahkan dihapus.
4.1.6 Menu Kategor i
Gambar 4.15 Halaman Menu Kategori
Halaman Menu Kategori ini berfungsi untuk menambah, mengedit atau menghapus kategori dari produk helm yang dijual pada Batik Lamongan. Kategori ini ditambah oleh Administrator menyesuaikan dengan jenis batik yang ada. Semakin banyak jenis batik maka semakin banyak juga kategori yang dibuat.
4.1.7 Menu Pesanan
Menu Pesanan ini digunakan untuk melihat dan mengatur pesanan dari pelanggan. Disini seorang Admintrator bisa mengetahui berapa pesanan yang ada dan jenis Batik apa yang sering dipesan oleh pelanggan. Tampilan pesanan secara detail bisa dilihat seperti gambar di bawah ini :
Gambar 4.17 Halaman Kelola Pesanan Detail
Pada halaman ini juga Administrator dapat meng-update Status Pembayaran, Status Pengiriman dan Status Penerimaan. Apabila pelanggan sudah membayar dan melakukan konfirmasi, maka administrator akan merubah status dari pelanggan tersebut. Lihat pada Gambar 4.18
4.1.8 Menu Pr oduk
Menu Produk ini berfungsi untuk menambah, merubah dan menghapus produk-produk dari Batik Lamongan diantaranya gambar dari produk, kategori produk, nama produk, harga produk dan tanggal memasukkan produk tersebut terlihat pada Gambar 4.19.
Gambar 4.19 Halaman Produk
Untuk menambah produk tinggal meng-klik menu tambah produk yang ada pada kanan atas. Lihat pada Gambar 4.20
Untuk mengedit produk yang sudah ada tinggal meng-klik link edit yang ada pada kanan produk. Pada Edit Produk juga bisa untuk mengganti gambar dari produk dengan meng-klik tombol Upload yang ada pada bawah gambar. Terlihat pada Gambar 4.21
Gambar 4.21 Halaman Edit Produk 4.1.9 Menu Report
Halaman ini berfungsi untuk memberikan informasi kepada Administrator
tentang berapa jumlah produk yang terjual. Dan juga bisa mengetahui produk dengan kategori apa yang sering dipesan oleh pelanggan. Dengan Halaman Report
ini administrator bisa mengetahui total penghasilan yang diperoleh dari produk yang telah terjual. Halaman Report bisa dilihat pada Gambar 4.22
Untuk Halaman Kasir sama dengan Halaman Administrator, perbedaannya seperti pada Tabel 4.1 berikut :
Tabel 4.1 Akses Level Admin
Administrator Kasir
Bisa kelola admin Tidak bisa Bisa kelola Kategori Tidak bisa Bisa kelola Produk Tidak bisa Bisa kelola Pesanan Bisa Bisa kelola Report Bisa
4.2 Pemelihar aan Sistem
Didalam suatu aplikasi khususnya website dalam jangka waktu yang dekat atau lama pasti mengalami masalah atau error. Agar website ini terhindar dari
error maka pengelola website ini harus sering melakukan check baik checking
hosting, domain ataupun database-nya. Website E-Commerce ini tergolong mudah
dalam pemeliharaannya yang tanpa memerlukan uang berlebih untuk mengatasi masalah hardwarenya karena website ini langsung online sehingga bisa diakses dengan komputer kapan saja dan dimana saja. Meskipun perangkat keras yang kita pakai rusak, website E-Commerce ini tidak ikut mengalami kerusakan.
Yang harus diperhatikan dalam pemeliharaan website ini adalah Hosting,
Domain dan yang lebih penting lagi adalah Database. Untuk mengurangi
kehilangan data baik file maupun database, sebaiknya file dan database tersebut di backup secara berkala. Kelebihan jika Website E-Commerce ini di backup
secara berkala, pengelola tidak perlu bingung ketika data didalamnya rusak atau terhapus karena pengelola masih mempunyai backup data yang bisa di restore