Anda di halaman 1dari 99

BAB 4

RANCANGAN SISTEM YANG DIUSULKAN

4.1 Usulan Sistem Baru

Berdasarkan hasil evaluasi yang disesuaikan dengan permasalahan yang sedang dihadapi

oleh Sonic Gear Gallery, maka kami mengusulkan sebuah sistem baru dengan memanfaatkan

sebuah situs web yang dapat memberikan pelayanan pemasaran secara online. Web ini diharapkan

dapat membantu distributor dalam memperluas area pemasarannya serta dapat dimanfaatkan

sebagai alat promosi yang dapat meningkatkan volume penjualan dalam jangka waktu panjang,

serta sebagai alat guna meningkatkan pelayanan kepada pelanggan dengan menampilkan

informasi-informasi produk yang tersedia.

Apabila dilihat dari sisi user, situs web ini dapat memberikan informasi produk secara

detail. Selain itu user juga dapat melakukan transaksi pemesanan produk, jika user tersebut sudah

mendaftarkan diri sebagai user member, tetapi jika user belum mendaftarkan diri sebagai user

member maka user tersebut tidak bisa melakukan transaksi pemesanan produk. Sistem pembayaran

hanya dilakukan dengan dua cara yaitu transfer dan tunai. Bagi pelanggan yang membayar dengan

cara transfer maka pada saat barang sampai ditempat pelanggan tersebut harus sudah mempunyai

bukti transfer pembayaran atas barang yang dipesannya, tetapi jika pembayaran dilakukan dengan

cara tunai maka setelah barang dikirim pelanggan langsung membayar dengan uang tunai.

48
4.1.1 Fasilitas Pada Situs Web

Fasilitas yang disediakan pada situs web ini terbagi tiga bagian yaitu fasilitas untuk user

yang belum menjadi member situs web, untuk user yang sudah menjadi member situs web,

dan fasilitas untuk admin situs web.

• User yang belum menjadi member situs web

Bagi para user yang belum menjadi member situs web ini mereka hanya dapat melihat

informasi detail produk yang tersedia tetapi tidak bisa melakukan transaksi pemesanan

online sebelum mereka menjadi member situs web ini. Selain itu juga mereka bisa memberi

saran dan pertanyaan-pertanyaan tentang produk dari Sonic Gear Gallery maupun tentang

fasilitas yang disediakan oleh distributor.

• User yang sudah menjadi member situs web

Bagi para user yang sudah menjadi member situs web ini user dapat melihat informasi

detail produk yang tersedia, dapat melakukan transaksi pemesanan barang secara online

dan juga dapat memberikan saran dan pertanyaan kepada Sonic Gear Gallery melalui

email.

• Fasilitas untuk admin situs web

Fasilitas admin untuk situs web meliputi pengaturan, pemeliharaan serta mengupdate

database dari situs web tersebut.

4.2 Arsitektur Sistem

49
Data

Server

Internet

ISP
ISP
(Internet Server Provider)
(Internet Server Provider)

User
User

ISP
(Internet Server Provider)

User

Gambar 4.1 Arsitektur Sistem

User mengaktifkan koneksinya ke internet melalui internet servis provider, lalu memasuki

alamat yang berada di internet cukup dengan mengetikkan nama alamat dari web yang dituju, lalu

akan terhubung dengan server yang berada di Sonic Gear Gallery. Apabila pengguna melakukan

transaksi maka data-data akan disimpan dan diolah di database server. Kemudian data yang telah

diolah akan diteruskan kembali ke pelanggan.

4.3 Rancangan Struktur Menu

Ini merupakan hirarki pada web kami:

50
Home

Forget Sign In Produk User Profile Contack Us FAQ Logout


Password

Tampil Tampil Tampil Tampil


Produk User Profile Contack Us FAQ

Input Login

Admin Member

Produk User Profile Contack Us FAQ Logout Produk User Profile Contact US FAQ Logout

Search Change Verify


My Profile Order

Manage
Change My Manage Event View Cart Search
Product Manage
Profile Change
Transaction
Password

Manage Manage Manage FAQ Pemesanan


User Profile Cart Produk

Change
Add New Delete User Add New Edit Event Delete Event
Password
Product Transaction Event

Edit User Delete Edit FAQ Delete FAQ


Profile User Cart

Gambar 4.2 Struktur Menu

Gambar 4.2 menggambarkan alur dari web kami. Layar Home merupakan layar utama yang dapat

berhubungan dengan layar-layar yang lain.

4.4 Rancangan Layar

4.4.1 Rancangan Layar Menu Untuk User

51
Rancangan Layar “Home”

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

Login
About Sonic Gear Gallery
User Id :

Password :

Enter Clear

Sign In !
Forget Password?

News & Events Gambar Gambar Gambar Gambar

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.3 Rancangan Layar “Home”

Gambar 4.3 merupakan rancangan layar Home. Pada rancangan layar ini terdapat logo Sonic Gear

Gallery pada bagian atas layar, beberapa gambar produk sonic gear, form untuk login bagi member

dan admin, informasi mengenai sonic gear gallery, kolom News & Events yang berfungsi untuk

menampilkan informasi terbaru tentang Sonic Gear, dan menu-menu seperti :

Product, untuk link ke menu produk.

User profile, untuk link ke menu user profile.

Contact Us, untuk link ke menu contact us.

52
FAQ, untuk link ke menu FAQ.

Logout, untuk link ke menu sebelum login.

Rancangan Layar “Sign In”

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

Login New Member? Join us now


User Id : User Name :

Password :

Confirm :
Password :
Name :

Sex :
Enter Clear
Telephone :

Sign In ! Company :
*
Forget Password? Address :

Email Address :
News & Events
Question :

Your Answer :

Submit Clear
* May not be filled

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.4 Rancangan Layar “Sign In”

Gambar 4.4 merupakan rancangan layar Form Sign In, menu ini digunakan user untuk mendaftar

menjadi member. Untuk pendaftaran member, pada pengisian user name, jika user name yang diisi

sudah ada atau sama dengan data yang ada pada database maka pada bagian bawah layar akan

terdapat pesan “Sorry, your user name already used” dan pada pengisian email address, jika format

53
email yang diisi tidak valid maka pada bagian bawah layar akan terdapat pesan “Your email does

not valid”, sedangkan jika user sudah mengisi semua data dengan benar maka pada bagian bawah

layar akan terdapat pesan “Your new profile is now active”.

Rancangan Layar “Forget Password”

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

Login Forget Password? Just fill the form below!


User Id : User Name :

Name :

Password : Sex :

Telephone :

Company :
Enter Clear
Address :
Sign In ! Question :
Forget Password?
Your Answer :

Send Through :
News & Events
Submit Clear

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.5 Rancangan Layar “Forget Password”


Gambar 4.5 merupakan rancangan layar Form Forget Password, menu ini digunakan untuk user

yang sudah menjadi member tetapi lupa passwordnya, sehingga member tersebut bisa

mendapatkan kembali passwordnya.

Rancangan Layar “Product”

54
Logo Sonic Gear Gallery
Home Product User Profile Contact Us FAQ Logout

Login Quick Search Here !


User Id : Search Item :

View By Category : Search


Password :

Enter Clear

Sign In !
Forget Password?

News & Events

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.6 Rancangan Layar “Product”

Gambar 4.6 merupakan rancangan layar menu Product. Menu ini digunakan untuk mencari dan

menampilkan informasi seluruh produk atau hanya produk tertentu saja. Untuk menampilkan data

suatu produk, user harus menekan tombol search terlebih dahulu.

Rancangan Layar “ Search Product”

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

55
Login Quick Search Here !
User Id : Search Item :

View By Category : Search


Password :

View Result
Enter Clear
Gambar
Sign In ! Product * select picture for more information and ordering

Forget Password?

Gambar
News & Events Product * select picture for more information and ordering

Gambar
Product * select picture for more information and ordering

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.7 Rancangan Layar “ Search Product”


Gambar 4.7 merupakan rancangan layar Search Product. Pada menu ini akan ditampilkan semua

data product yang dicari. Gambar product tersebut merupakan sebuah link, dan jika di klik akan

menuju ke tampilan information product.

Rancangan Layar “Item’s Information Product”

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

56
Login Item's Information
User Id : Name :

Gambar Price :
Password : Produk
*Login is needed for ordering

Enter Clear

Sign In !
Find Other
Forget Password?

News & Events

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.8 Rancangan Layar “Item’s Information Product”

Gambar 4.8 merupakan rancangan layar Item Information product. Menu ini berguna untuk

menampilkan informasi dan harga product. Pada menu ini, user dapat melakukan pemesanan

product, tetapi sebelumnya user harus menjadi member terlebih dahulu. Pada menu ini juga

terdapat sebuah link yang bernama “Find Other”, link ini menuju ke tampilan awal menu product.

Rancangan Layar “User Profile”

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

57
Login You need to Login to view this page
User Id :

Password :

Enter Clear

Sign In !
Forget Password?

News & Events

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.9 Rancangan Layar “User Profile”

Gambar 4.9 merupakan rancangan layar menu User Profile. Untuk masuk ke menu ini, user harus

login terlebih dahulu.

Rancangan Layar “Contact Us”

Logo Sonic Gear Gallery

58
Home Product User Profile Contact Us FAQ Logout

Login Contact Us
User Id :

Password :

Enter Clear

Sign In !
Forget Password?

News & Events

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.10 Rancangan Layar “Contact Us”

Gambar 4.10 merupakan rancangan layar menu Contact Us. Pada menu ini terdapat data alamat,

nomor telephone dan email Sonic Gear Gallery. Menu ini berguna bagi user yang ingin

menghubungi Sonic Gear Gallery untuk memberikan kritik, saran ataupun pertanyaan-pertanyaan

yang berkaitan dengan Sonic Gear.

Rancangan Layar “FAQ”

Logo Sonic Gear Gallery

59
Home Product User Profile Contact Us FAQ Logout

Login List of Our Frequently Asked Question


User Id :

Password :

Enter Clear

Sign In !
Forget Password?

News & Events

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.11 Rancangan Layar “FAQ”

Gambar 4.11 merupakan rancangan layar menu FAQ. Menu ini berfungsi untuk menampilkan

pertanyaan-pertanyaan tentang Sonic Gear yang paling sering ditanyakan beserta jawabannya.

4.4.2 Rancangan Layar Menu Untuk Member

Rancangan Layar “Home” Member

Logo Sonic Gear Gallery

60
Home Product User Profile Contact Us FAQ Logout

Welcome
About Sonic Gear Gallery
“Nama Member”

News & Events

Gambar Gambar Gambar Gambar

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.12 Rancangan Layar “Home” Member

Gambar 4.12 merupakan rancangan layar Home untuk Member yang sudah login, rancangan layar

ini hampir sama dengan rancangan layar home untuk user yang bukan member, perbedaannya pada

sebelah kiri atas setelah logo Sonic Gear, terdapat nama member yang sedang login.

Rancangan Layar “Product” Member

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

61
Welcome Quick Search Here !
“Nama Member”
Search Item :
View By Category : Search
News & Events

View Cart

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.13 Rancangan Layar “Product” Member


Gambar 4.13 merupakan rancangan layar menu Product untuk Member. Rancangan layar ini

hampir sama dengan rancangan layar product untuk user yang bukan member, perbedaannya, pada

menu ini terdapat sebuah link yang bernama View Cart. Link ini akan menuju ke menu view cart.

Rancangan Layar “View Cart” Member

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

Welcome Please verify your order


“Nama Member”
Back

Number Of Order To Verify : None


News & Events

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.14 Rancangan Layar “View Cart” Member

Gambar 4.14 merupakan rancangan layar View Cart. Rancangan layar ini hanya terdapat pada

Member. Menu ini berfungsi bagi member untuk memeriksa kembali data product yang akan

62
dipesan. Pada menu ini juga terdapat link yang bernama back, link ini menuju ke menu

sebelumnya, yaitu menu product.

Rancangan Layar “Search Product” Member

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

Welcome Quick Search Here !


“Nama Member” Search Item :
View By Category : All Category Search
News & Events
View Cart

View Result

Gambar
Product * select picture for more information and ordering

Gambar
Product * select picture for more information and ordering

Gambar
Product * select picture for more information and ordering

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.15 Rancangan Layar “Search Product” Member

63
Gambar 4.15 merupakan rancangan layar Search Product untuk Member. Fungsi menu ini sama

dengan rancangan layar menu search product untuk user yang bukan member, hanya saja, pada

menu ini terdapat link View Cart.

Rancangan Layar “Item’s Information Product” Member

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

Welcome Item's Information


“Nama Member” Name :

Gambar Price :
News & Events Produk
Number of Order :

Add To Cart

Find Other

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.16 Rancangan Layar “Item’s Information Product” Member

Gambar 4.16 merupakan rancangan layar Item Information Product untuk Member. Fungsi menu

ini hampir sama dengan menu item information product untuk user yang bukan member, hanya

saja pada menu ini, member dapat melakukan pemesanan product. Pada menu ini terdapat tombol

Add To Cart. Jika member telah mengisi jumlah product yang diinginkan lalu menekan tombol

64
tersebut, maka pada bagian bawah layar terdapat pesan “To verify cart click here”. Kata “here”

pada pesan tersebut merupakan sebuah link yang menuju ke menu View Cart. Sedangkan jika

member menekan tombol Add To Cart tanpa mengisi jumlah product yang diinginkan, maka pada

bagian bawah tombol tersebut akan keluar pesan “Please input the number of order correctly”

Rancangan Layar “User Profile” Member

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

Welcome Your Current Profile :


“Nama Member” Name :
Telephone :
News & Events
Company :
Address :
Email :
Change My Profile Change My Profile

Shopping Cart :
No item To verified

Transaction in Progress :
No Transaction In Progress

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.17 Rancangan Layar “User Profile” Member

Gambar 4.17 merupakan rancangan layar menu User Profile untuk Member. Pada menu ini

terdapat data member, data pemesanan dan data transaksi. Di menu ini juga terdapat sebuah link

65
yang bernama Change My Profile dan Change My Password. Jika member ingin mengubah

datanya, maka dapat menggunakan link Change My Profile dan jika member ingin mengubah

passwordnya maka dapat menggunakan link Change My Password.

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

Welcome Your Current Profile :


“Nama Member” Name :
Telephone :
News & Events Company :
Address :
Email :

BACK

Change Your Profile


Name :

Telephone :

Company :

Address :

Email :

Update Clear

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.18 Rancangan Layar “Change My Profile” Member.

Gambar 4.18 merupakan rancangan layar menu Change My Profile untuk Member. Menu ini

berguna untuk mengubah data member. Pada menu ini terdapat tombol Update dan Clear. Jika

member menekan tombol Update tanpa mengisi data, maka pada bagian bawah layar akan keluar

66
pesan “Please enter the input correctly”, sedangkan jika member sudah mengisi semua data baru

lalu menekan tombol Update maka secara otomatis data lama akan berubah dan akan kembali ke

menu user Profile. Tombol Clear pada menu ini berfungsi untuk mengosongkan kembali form

yang sudah diisi. Disini juga terdapat sebuah link yang bernama Back, link tersebut menuju ke

menu user profile.

Rancangan Layar “Login” Member

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

Welcome Change Password


“Nama Member”
New Password :
News & Events Confirm Password :

Submit Reset

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.19 Rancangan Layar “Login” Member

Gambar 4.19 merupakan rancangan layar menu Change My Password untuk Member. Menu ini

berfungsi untuk mengubah password.

Rancangan Layar “Contact Us” Member

Logo Sonic Gear Gallery

67
Home Product User Profile Contact Us FAQ Logout

Welcome Contact Us
“Nama Member”

News & Events

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.20 Rancangan Layar “Contact Us” Member

Gambar 4.20 merupakan rancangan layar menu Contact Us untuk Member. Fungsi menu ini sama

dengan fungsi menu Contact Us untuk user yang bukan member.

Rancangan Layar “FAQ” Member

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

68
Welcome
“Nama Member”
List of Our Frequently Asked Question

News & Events

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.21 Rancangan Layar “FAQ” Member

Gambar 4.21 merupakan rancangan layar menu FAQ untuk Member. Fungsi menu ini sama

dengan fungsi menu FAQ untuk user yang bukan member.

4.4.3 Rancangan Layar Menu Untuk Admin

Rancangan Layar “Home” Admin

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

69
Welcome
About Sonic Gear Gallery
“Nama Admin”

News & Events

Gambar Gambar Gambar Gambar

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.22 Rancangan Layar “Home” Admin

Gambar 4.22 merupakan rancangan layar Home untuk Admin yang sudah login. Rancangan layar

ini hampir sama dengan rancangan layar Home untuk member, hanya saja nama yang tampil

adalah, nama admin yang sedang login.

Rancangan Layar “Product” Admin

Logo Sonic Gear Gallery

Home Product User Profile Contact Us FAQ Logout

70
Welcome Quick Search Here !
“Nama Admin”
Search Item :
View By Category : Search
News & Events

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.23 Rancangan Layar “Product” Admin

Gambar 4.23 merupakan rancangan layar menu Product untuk Admin. Menu ini digunakan untuk

mencari dan menampilkan informasi seluruh produk atau hanya produk tertentu saja.

Rancangan Layar “Search Product” Admin

Logo Sonic Gear Gallery

71
Home Product User Profile Contact Us FAQ Logout

Welcome Quick Search Here !


“Nama Admin” Search Item :
View By Category : All Category Search
News & Events
View Result

Gambar
Product * select picture for more information and ordering

Gambar
Product * select picture for more information and ordering

Gambar
Product * select picture for more information and ordering

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.24 Rancangan Layar “Search Product” Admin

Gambar 4.24 merupakan rancangan layar Search Product untuk Admin. Fungsi menu ini sama

dengan rancangan layar menu search product untuk user.

Rancangan Layar “Item’s Information Product” Admin

72
Logo Sonic Gear Gallery
Home Product User Profile Contact Us FAQ Logout

Welcome Item's Information


“Nama Admin”
Name :
News & Events Gambar Price :
Produk
*Login is needed for ordering

Find Other

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.25 Rancangan Layar “Item’s Information Product” Admin

Gambar 4.25 merupakan rancangan layar Item Information product untuk Admin. Fungsi menu ini

sama dengan menu item information product untuk user.

73
Rancangan Layar “User Profile” Admin

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

Welcome Your Current Profile :


“Nama Admin” Name :
Telephone :
News & Events Company :
Address :
Email :
Change My Profile Change My Password

Perform Administrator Activities


1. Manage : Member Profile
2. Manage : Product
3. Manage : Cart
4. Manage : Transaction
5. Manage : FAQ
6. Manage : Event

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.26 Rancangan Layar “User Profile” Admin.

Gambar 4.26 merupakan rancangan layar menu User Profile untuk Admin. Pada menu ini terdapat

data admin, dan menu-menu seperti :

Manage : Member Profile, untuk link ke menu Manage Member Profile.

Manage : Product, untuk link ke menu Manage Product.

Manage : Cart, untuk link ke menu Manage Cart.

Manage : Transaction, untuk link ke menu Manage Transaction.

Manage : FAQ, untuk link ke menu Manage FAQ.

74
Manage : Event, untuk link ke Menu Manage Event.

Di menu ini juga terdapat link Change My Profile dan link Change My Password. Jika admin ingin

mengubah datanya, maka dapat menggunakan link Change My Profile dan jika admin ingin

mengubah passwordnya maka dapat menggunakan link Change My Password.

Rancangan Layar “Login” Admin

Logo Sonic Gear Gallery

Home Product User Profile Contact Us FAQ Logout

Welcome Change Password


“Nama Admin”
New Password :

News & Events Confirm Password :

Submit Reset

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.27 Rancangan Layar “Login” Admin

Gambar 4.27 merupakan rancangan layar menu Login untuk Admin. Menu ini berfungsi untuk

mengubah password.

Rancangan Layar “Change My Profile” Admin

75
Logo Sonic Gear Gallery
Home Product User Profile Contact Us FAQ Logout

Welcome Your Current Profile :


“Nama Admin” Name :
Telephone :
News & Events Company :
Address :
Email :
BACK

Change Your Profile


Name :

Telephone :

Company :

Address :

Email :

Update Clear

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.28 Rancangan Layar “Change My Profile” Admin

Gambar 4.28 merupakan rancangan layar menu Change My Profile untuk Admin. Fungsi menu ini

sama dengan menu Change My Profile pada member.

Rancangan Layar “Manage Member Profile” Admin

76
Logo Sonic Gear Gallery

Home Product User Profile Contact Us FAQ Logout

Welcome Search Based : Contain text :


Search Now
xt :
“Nama Admin”
ID : Name : Company : Edit

News & Events


Back

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.29 Rancangan Layar “Manage Member Profile” Admin

Gambar 4.29 merupakan rancangan layar menu Manage Member Profile pada Admin. Menu ini

berfungsi untuk mengubah data member. Untuk mengubah data member, admin harus memilih

menu edit, yang merupakan link yang menuju ke menu Change My Profile. Pada menu ini juga

terdapat link yang bernama back, link ini menuju ke menu User Profile. Pada menu ini admin juga

dapat mencari data member dengan menggunakan form untuk search.

Rancangan Layar “Manage Product” Admin

77
Logo Sonic Gear Gallery
Home Product User Profile Contact Us FAQ Logout

Welcome Quick Search Here !


“Nama Admin” Search Item :

View By category : Search


News & Events

Add New Product Back

View Result

Gambar
Edit Delete
Produk

Gambar
Edit Delete
Produk

Gambar
Edit Delete
Produk

Gambar
Edit Delete
Produk

Gambar
Edit Delete
Produk

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.30 Rancangan Layar “Manage Product” Admin

78
Gambar 4.30 merupakan rancangan layar menu Manage Product pada Admin. Fungsi menu ini

untuk mengatur data product. Pada menu ini, admin dapat mengubah, menghapus dan

menambahkan data product, dengan memilih menu-menu seperti :

Edit, untuk link ke menu Edit Product.

Delete, untuk menghapus data product.

Add New Product, untuk link ke menu Add New Product.

Back, untuk link ke menu User Profile.

Rancangan Layar “Add New Product” Admin

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

Welcome BACK

“Nama Admin”
Please Fill this form to Add new Product
News & Events
New ID Product :

Series :

Price :

Picture Path :

Keyword :

Update Clear

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.31 Rancangan Layar “Add New Product” Admin

79
Gambar 4.31 merupakan rancangan layar menu Add New Product pada Admin. Menu ini

berfungsi untuk menambahkan product baru. Jika admin menekan tombol Update tanpa mengisi

data, maka pada bagian bawah tombol akan keluar pesan “Please enter the input correctly”. Fungsi

tombol clear adalah untuk menghapus data pada form. Form price hanya dapat diisi angka, jika

tidak maka pada bagian bawah tombol akan keluar pesan “Price must be numeric. Please re-enter

input”.

Rancangan Layar “Edit Product” Admin

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

Welcome Current Item Profile :


ID Product :
“Nama Admin”
Series :
Price :
News & Events
Picture Path :
Keyword :

BACK

Change This Product


Series :

Price :

Picture Path :

Keyword :

Update Clear

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.32 Rancangan Layar “Edit Product” Admin

80
Gambar 4.32 merupakan rancangan layar menu Edit Product pada Admin. Menu ini berfungsi

untuk mengubah data product. Jika admin menekan tombol Update tanpa mengisi data, maka pada

bagian bawah tombol akan keluar pesan “Please enter the input correctly”. Fungsi tombol clear

adalah untuk menghapus data pada form. Form price hanya dapat diisi angka, jika tidak maka pada

bagian bawah tombol akan keluar pesan “Price must be numeric. Please re-enter input”. Jika data

yang diisi sudah benar maka akan kembali ke menu Manage Product dan pada bagian bawah layar

akan keluar pesan “Data has been succesfully updated”. Selain itu ada sebuah link back yang

menuju ke menu Manage Product.

Rancangan Layar “Manage Cart” Admin

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

Welcome List Of Unverified Order


“Nama Admin” Search Based : Contain text :
Search Now

News & Events


Delete

Back Delete All

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.33 Rancangan Layar “Manage Cart” Admin

Gambar 4.33 merupakan rancangan layar menu Manage Cart pada Admin. Menu ini berfungsi

untuk melihat data pemesanan yang sudah lebih dari tiga hari dan tidak diverifikasi. Pada menu ini

81
admin dapat menghapus data dengan memilih menu Delete atau Delete All (untuk menghapus

seluruh data). Selain itu juga tersedia fasilitas search untuk memudahkan pencarian, dan menu

back yang merupakan link untuk menuju ke menu User Profile.

Rancangan Layar “Manage Transaction” Admin

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

Welcome List Of The Transaction :


“Nama Admin” Search Based : Contain text :
Search Now

News & Events


Delete

Back Delete All

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.34 Rancangan Layar “Manage Transaction” Admin

Gambar 4.34 merupakan rancangan layar menu Manage Transaction pada Admin. Menu ini

berfungsi untuk melihat data transaksi. Pada menu ini Admin dapat menghapus data dengan

memilih menu Delete atau Delete All (untuk menghapus seluruh data). Selain itu juga tersedia

fasilitas search untuk memudahkan pencarian, dan menu back yang merupakan link untuk menuju

ke menu User Profile.

Rancangan Layar “Manage FAQ” Admin

82
Logo Sonic Gear Gallery
Home Product User Profile Contact Us FAQ Logout

Welcome Add New Back

“Nama Admin”
List of Our Frequently Asked Question
News & Events Edit Delete

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.35 Rancangan Layar “Manage FAQ” Admin

Gambar 4.35 merupakan rancangan layar menu Manage FAQ pada Admin. Menu ini berfungsi

untuk mengatur isi dari FAQ, seperti menambah, mengubah dan menghapus isi FAQ. Pada menu

ini terdapat menu-menu seperti :

Add New, untuk link ke menu Add New FAQ.

Edit, untuk link ke menu Edit FAQ.

Delete, untuk menghapus isi FAQ.

Back, untuk link ke menu User Profile.

83
Rancangan Layar “Add New FAQ” Admin

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

Welcome BACK

“Nama Admin”
Add Another Frequently Asked Question
News & Events Question :

Answer :

Add Clear

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.36 Rancangan Layar “Add New FAQ” Admin

Gambar 4.36 merupakan rancangan layar menu Add New FAQ pada Admin. Fungsi menu ini

untuk menambahkan isi FAQ. Jika admin menekan tombol Add tanpa mengisi data maka pada

bagian bawah tombol akan keluar pesan “Please enter the input correctly”, sedangkan jika data

sudah diisi dengan benar maka data tersebut akan ditambahkan ke menu FAQ dan tampilan akan

kembali ke menu Manage FAQ. Tombol Clear digunakan untuk menghapus isi form. Selain itu

pada menu ini juga terdapat menu back yang merupakan link ke menu Manage FAQ.

Rancangan Layar “Edit FAQ” Admin

Logo Sonic Gear Gallery

84
Home Product User Profile Contact Us FAQ Logout

Welcome Edit This FAQ


“Nama Admin” Question :
Answer :
News & Events
BACK

Replace With :
Question :

Answer :

Add Clear

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.37 Rancangan Layar “Edit FAQ” Admin

Gambar 4.37 merupakan rancangan layar menu Edit FAQ pada Admin. Fungsi menu ini untuk

mengubah isi FAQ yang sudah ada. Jika admin menekan tombol Add tanpa mengisi data maka

pada bagian bawah tombol akan keluar pesan “Please enter the input correctly”, sedangkan jika

data sudah diisi dengan benar maka data tersebut akan ditambahkan ke menu FAQ dan tampilan

akan kembali ke menu Manage FAQ. Tombol Clear digunakan untuk menghapus isi form. Selain

itu pada menu ini juga terdapat menu back yang merupakan link ke menu Manage FAQ.

Rancangan Layar “Manage Event” Admin

Logo Sonic Gear Gallery

85
Home Product User Profile Contact Us FAQ Logout

Welcome Add New Back

“Nama Admin”
Event List Currently Displayed :
News & Events Time Of Event : This Autumn Edit Delete

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.38 Rancangan Layar “Manage Event” Admin

Gambar 4.38 merupakan rancangan layar menu Add New FAQ pada Admin. Menu ini berfungsi

untuk mengatur isi dari Event, seperti menambah, mengubah dan menghapus isi Event. Pada menu

ini terdapat menu-menu seperti :

Add New, untuk link ke menu Add New Event.

Edit, untuk link ke menu Edit Event..

Delete, untuk menghapus isi Event..

Back, untuk link ke menu User Profile.

Rancangan Layar “Add New Event” Admin

86
Logo Sonic Gear Gallery
Home Product User Profile Contact Us FAQ Logout

Welcome BACK

“Nama Admin”
Add Another Event
News & Events Time Of Event :

Event Comment :

Add Clear

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.39 Rancangan Layar “Add New Event” Admin

Gambar 4.39 merupakan rancangan layar menu Add New Event pada Admin. Fungsi menu ini

untuk menambahkan isi Event. Jika admin menekan tombol Add tanpa mengisi data maka pada

bagian bawah tombol akan keluar pesan “Please enter the input correctly”, sedangkan jika data

sudah diisi dengan benar maka data tersebut akan ditambahkan ke menu Event dan tampilan akan

kembali ke menu Manage Event. Tombol Clear digunakan untuk menghapus isi form. Selain itu

pada menu ini juga terdapat menu back yang merupakan link ke menu Manage Event.

Rancangan Layar “Edit Event” Admin

87
Logo Sonic Gear Gallery
Home Product User Profile Contact Us FAQ Logout

Welcome Edit This Event


“Nama Admin” Time Of Event :
Event Comment :
News & Events
BACK

Replace With
Time Of Event :

Event Comment :

Add Clear

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.40 Rancangan Layar “Edit Event” Admin

Gambar 4.40 merupakan rancangan layar menu Edit Event pada Admin. Fungsi menu ini untuk

mengubah isi Event yang sudah ada. Jika admin menekan tombol Add tanpa mengisi data maka

pada bagian bawah tombol akan keluar pesan “Please enter the input correctly”, sedangkan jika

data sudah diisi dengan benar maka data tersebut akan ditambahkan ke menu Event dan tampilan

akan kembali ke menu Manage Event. Tombol Clear digunakan untuk menghapus isi form. Selain

itu pada menu ini juga terdapat menu back yang merupakan link ke menu Manage Event.

Rancangan Layar “Contact Us” Admin

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

88
Welcome
Contact Us
“Nama Admin”

News & Events

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.41 Rancangan Layar “Contact Us” Admin

Gambar 4.41 merupakan rancangan layar menu Contact Us untuk Admin. Fungsi menu ini sama

dengan fungsi menu Contact Us untuk user.

Rancangan Layar “FAQ” Admin

Logo Sonic Gear Gallery


Home Product User Profile Contact Us FAQ Logout

Welcome
List of Our Frequently Asked Question
“Nama Admin”

News & Events

©All Rights Reserved. 2004. Sonic Gear Audio Development

Gambar 4.42 Rancangan Layar “FAQ” Admin

Gambar 4.42 merupakan rancangan layar menu FAQ untuk Admin. Fungsi menu ini sama dengan

fungsi menu FAQ untuk user.

4.5 Rancangan DFD (Data Flow Diagram) dari Sistem Yang Diusulkan

89
DFD dari sitem yang diusulkan terdiri dari lima diagram, yaitu Diagram Konteks, Diagram

Nol, Diagram Rinci Sistem Login (1.0), Diagram Rinci Admin_Activities (2.0), Diagram Rinci

Customer_Activities (3.0).

4.5.1 Diagram Konteks dari Sistem Yang Diusulkan

Admin

Ask_Admin_Access

Grant_Admin_Access

Report_dbchanges
Deny_Admin_Access
Change_Database
Query_Event Add_Email_List
Event Req_Pass
Ret_Query_Event Del_Email_List

Query_dbOrder

Ret_Query_dbOrder
Trans_Order Query_Pass
Del_Order
Login
Report_Query_Transaction Ret_Query_Pass

Query_Form
Query_Transaction Sistem_Sonic_
Trans_History
Add_Transaction Gear_Gallery Ret_Query_Form

Query_FAQ
Report_Request_Verification

FAQ Ret_Query_FAQ
Query_dbProduct
Report_Request_Item
Request_Verification
Grant_Cust_Access

Deny_Cust_Access
Ask_Cust_Access

Mtr_Product
Ret_Query_Product
Request_Item

Customer

Gambar 4.43 Diagram Konteks dari Sistem yang Diusulkan

Gambar 4.43 merupakan Diagram Konteks dari sistem yang diusulkan. Pada sistem pemasaran ini

berinteraksi dengan dua eksternal entity yaitu customer dan admin.

4.5.2 Diagram Nol dari Sistem Yang Diusulkan

90
Add_Email_List
Ask_Cust_Access Req_Pass
Del_Email_List
Grant_Cust_Access
1.0
Customer
Change_Pass Sistem_Login
Ret_Notification

Query_Pass
Ask_Admin_Access
Login
Ret_Query_Pass
Grant_Admin_Access

Change_Cust_Pass

Ret_Cust_Notification
Query_Form
Mtr_User
Ret_Query_Form
Querry_Guest_Profil
e
Ret_Guest_Profile

Query_FAQ
Change_Database Ret_Query_FAQ
FAQ
2.0
Admin
Report_db_Changes Admin_Activities

Query_dbProduct
Mtr_Product
Ret_Query_Product

Query_Event
Event
Ret_Query_Event Query_dbOrder
Trans_Order
Del_Order

Query_db_History
Trans_History
Ret_Query_History

Query_Transaction
Request_Item
Add_Transaction
Report_Request_Item 3.0
Add_Order
Customer Customer_Activitie
Request_Verification
s Query_Order_Cust
Report_Trans
Respond_Query_Cust

Gambar 4.44 Diagram Nol dari Sistem yang Diusulkan

Gambar 4.44 merupakan Diagram Nol sistem yang diusulkan. Pada sistem pemasaran ini terbagi

atas beberapa proses yaitu proses sistem ogin, proses admin activities dan proses customer

activities.

4.5.3 Diagram Rinci Sistem Login (1.0) dari Sistem yang Diusulkan

91
Ask_Admin_Access Ret_Cust_Notification

Request_Admin_Pass Change_Cust_Pass

Input_Admin_Pass 1.1 Ask_Cust_Access


Login
Change_Pass Req_Cust_Pass

Ret_Notification Input_Change_Pass

Query_Change_Pass
Query_Pass Login

Provi de_Pass
Ret_Query_Pass

Grant_Admin_Access Grant_Cust_Access
1.2
Admin Customer
Deny_Admin_Acess Check_Login Deny_Cust_Access
Provide_Form
Allow_Li st
Deny_List

Ret_Query_Access

Query_Form Mtr_User

Req_Old_Pass
Req_Old_Admin_Pass
Req_Cust_Registration
Request_Registration
1.3 Input_Cust_Registration
Provide_Registration Forget_Password
Grant_Cust_True_Email
Grant_Password_True_Email
Deny_Password_True_Email Deny_Cust_True_Email

Add_Email_List
Req_List
Del_Email_List
Gambar
4.45 Diagram Rinci Sistem Login (1.0) dari Sistem yang Diusulkan
Gambar 4.45 merupakan Diagram Rinci Sistem Login (1.0) dari sistem yang diusulkan. Pada

proses sistem login terdapat tiga proses yang saling berinteraksi yaitu proses login, proses check

login dan proses forget password.

4.5.4 Diagram Rinci Admin_ Activities (2.0) dari Sistem yang Diusulkan

92
change_history query_dbProduct

trans_history
2.1
report_history_changes Managing_History ret_query_history

change_cart
query_dbOrder

2,2 trans_order
report_chart_changes Managing_Cart
ret_query_order

change_profile query_guest_profile
2.3
Admin MtrUser
managing_Profile
report_profile_changes ret_guest-profile

change_product query_dbProduct

2.4 MtrProduct
report_product_changes Managing_product ret_query_product

change_FAQ query_FAQ

2.5
FAQ
report_FAQ_changes Managing_FAQ ret-query_FAQ

Change_Event
Query_Event
2.6
Event
Report_Event_Change Managing_Event
Ret_Query_Event

Gambar 4.46 Diagram Rinci Admin_ Activities (2.0) dari Sistem yang Diusulkan

Gambar 4.46 merupakan Diagram Rinci Admin_Activities (2.0) dari sistem yang diusulkan. Pada

proses admin activities terdapat enam proses yang saling berinteraksi yaitu proses managing

history, proses managing cart, proses managing profile, proses managing product, proses managing

FAQ dan proses managing event.

4.5.5 Diagram Rinci Customer_Activities (3.0) dari Sistem yang Diusulkan

93
request_item 3.1 add_order
Trans_order
Add_order

report_request_item

Customer

query_order
request_verification

3..2
Verify_order
report_trans respond_query

Trans_history
add_transaction

Gambar 4.47 Diagram Rinci Customer_Activities (3.0) dari Sistem yang Diusulkan

Gambar 4.47 merupakan Diagram Rinci Customer Activities (3.0) dari sistem yang diusulkan.

Pada proses customer activities terdapat dua proses yang saling berinteraksi yaitu proses add order

dan verify order.

4.6 Rancangan STD (State Transition Diagram)

STD digunakan untuk memperjelas secara manual sistem yang digunakan.

Penggambarannya diuraikan dalam beberapa bagian sebagai berikut:

94
URL

Ketik Alamat
Web

Tampil Layar
Utama

Home

Menunggu
Pilihan

Pilih Forget Pilih Contact


Pilih Home Password Pilih Sign In Pilih Login Pilih Produk Pilih User Profile US Pilih FAQ Pilih Logout
Tampil Layar Tampil Layar Tampil Layar Tampil Layar
Tampil Layar Tampil Layar Tampil Layar Tampil Layar Tampil Layar
Home Username & Produk Home
Forget Password Sign In User Profile Contact Us FAQ
Password

Home Forget Login Produk User Contact FAQ


Sign In Profile
Password Us

Gambar 4.48 STD Home

STD Home

• User, member atau admin memasukkan alamat dari website yaitu http://localhost/Sonic

Gear/main1.asp kemudian tampil layar home.

• Pada layar home, user, member atau admin dapat memilih menu-menu yang ada yaitu layar

login, sign in, forget password, product, user profile, contack us, FAQ, dan logout.

95
Login

Input Username dan Apabila Username


Password dan Password tidak
valid
Tampil Layar Login
Tampil Layar Login

Menunggu
Input dan
Validasi

Input True
Tampil Layar Admin
atau Member

Admin Member

Gambar 4.49 STD Login

STD Login

• Setelah member atau admin masuk ke layar login, member atau admin tersebut dapat

mengisi username dan password yang dimilikinya.

• Jika username dan password benar maka akan tampil layar untuk member atau admin

sesuai dengan statusnya, tapi jika username atau password ada yang salah maka member

atau admin tidak akan bisa masuk ke menu selanjutnya dan akan dimunculkan kembali

layar login.

96
Sign In

Input True Input False


Tampil Menu Member Tampil Form Sign In

Menu
Member

Gambar 4.50 STD Sign In

STD Sign In

• Jika user yang belum mempunyai username dan password, user dapat mendaftarkan diri

untuk menjadi member dengan mengisi formulir new member.

Forget
Password

Input True Input False


Tampil Change Tampil Form Forget
Password atau Email Password

Change Email
Password

Gambar 4.51 STD Forget Password

STD Forget Password

• Jika member atau admin lupa password, maka member atau admin tersebut dapat mengisi

formulir forget password, dan password tersebut akan dikirim sesuai dengan permintaan.

97
Pengiriman password dilakukan dengan dua cara yaitu melalui email atau password

langgsung diganti pada saat itu juga.

Product

Check Status

Status Status Admin


Member dan User

Tampil Tampil
Member Admin dan
Produk User Product

Product Product

Pilih View
Pilih Search
Cart
Tampil Layar
Tampil Layar
Produk dan
Cart
Pemesanan

View Product dan


Cart Pemesanan

Gambar 4.52 STD Product

STD Product

• Pada layar product admin dan user sama, hanya dapat melihat jenis produk dan harga,

tetapi tidak bisa memesan produk.

• Sedangkan pada layar product member, dapat melihat jenis produk, harga produk,

memesan produk dan melihat daftar pesanan produk yang telah dipesan tetapi belum di

verified.

98
User Profile

Check Status

Status Status Admin


Member
Tampil User Tampil User
Profile Admin
Profile

User Profile User Profile


Member
Admin

Pilih Change My Pilih Change My Pilih Verify Pilih Event


Password My Order Pilih Change My Pilih Product
Profile Pilih Transaction
Tampil Verify Password Tampil Layar
Tampil User Tampil Change My Tampil Layar Tampil Layar
Order Tampil layar Change Event
Profile Password Product Transaction
My Password

Change My Change My Verify Manage


Password Order Change My Manage Manage
Profile Transaction
Password Product Event

Pilih Change Pilih Member Pilih cart Pilih FAQ


My Profile Product Tampil Layar
Tampil Layar Cart
Tampil Layar Tampil Layar FAQ
Admin Profile Member Profile

Change Manage Manage Cart Manage FAQ


Admin Profile Member Profile

Gambar 4.53 STD User Profile

STD User Profile

• Pada layar ini member dan admin dapat mengubah profilenya dengan memilih change my

profile.

• Pada layar ini member dan admin dapat mengubah passwordnya dengan memilih change

my Password.

• Member yang sudah memesan produk dapat melihat pesanannya dengan memilih verify my

order, order yang sudah di verify dapat di verified agar pengiriman dapat dijalankan.

99
• Pada user profile admin, admin dapat mengatur, memelihara serta mengupdate database

pada web tersebut.

Manage
Member
Profile

Pilih Back Pilih Edit

Tampil User Tampil Layar


Profile Admin Member Profile

User Profile Edit Member


Admin Profile

Pilih Update

Tunggu
Validasi

Validasi
Edit
Member

Gambar 4.54 STD Manage Member Profile

STD Manage Member Profile

• Pada layar ini admin dapat mengubah member profile.

Manage
Product

Pilih Add
Pilih Back Pilih Search
New Product
Tampil User Tampil Layar Add Tampil Layar
Profile Admin New Product Product

Add New Edit Product Delete


User Profile
Product Product
Admin

Pilih Update Pilih Update

Tunggu Tunggu
Validasi Validasi

Validasi Add Validasi Edit


New Product Product

Gambar 4.55 STD Manage Product

100
STD Manage Product

• Pada layar ini admin dapat mengubah, menghapus, dan menambah menu produk.

Manage Cart

Pilih Back Pilih Delete

Tampil User Tunggu


Profile Admin Validasi

User Profile
Validasi
Admin
Delete Cart

Gambar 4.56 STD Manage Cart

STD Manage Cart

• Pada layar ini admin dapat mnghapus pemesanan member yang belum di verified selam

tiga hari pemesanan karena dianggap tidak jadi membeli.

Manage
Transaction

Pilih Back Pilih Delete

Tampil user Tunggu


Profile Admin Validasi

User Profile
Validasi
Admin
Delete
Transaction

Gambar 4.57 STD Manage Transaction

STD Manage Transaction

101
• Pada layar ini admin dapat menghapus transaksi member yang telah dikirim dan transaksi

yang dibatalkan oleh member.

Manage FAQ

Pilih Add
Pilih Edit Pilih Back Pilih Delete
Now
Tampil Layar
Tampil Layar Tampil User Tunggu
Add New
FAQ Profile Admin Validasi
FAQ

Edit FAQ User Profile Add New FAQ


Validasi
Admin
Delete FAQ
Pilih Update Pilih Update

Tunggu Tunggu
Validasi Validasi

Validasi Validasi Add


edit FAQ New FAQ

Gambar 4.58 STD Manage FAQ

STD Manage FAQ

• Pada layar ini admin dapat mengubah, menambah, dan menghapus pertanyaan dan jawaban

di menu FAQ.

102
Manage News
and Event

Pilih Add
Pilih Back Pilih Edit Pilih Delete
New
Tampil User Tampil Layar Event
Tampil Layar Tunggu
Profil Admin
Add New Validasi

Edit News and Validasi


User Profile Add New News
Event Delete News
Admin and Event
and Event

Pilih Update Pilih Update

Tunggu Tunggu
Validasi Validasi

Validasi Add Validasi Edit


New Event Event

Gambar 4.59 STD Manage Event

STD Manage News and Event

• Pada layar ini admin dapat mengubah, menambah, dan menghapus news and event.

Contact US

Pilih Here
Ta mpilkan
Ou tlo ok
Exp re ss

Outlook
Express

Gambar 4.60 STD Contack Us

STD Contack Us

• Pada layar contack us ini member dapat memilih tombol here yaitu layar outlook express

yang digunakan untuk memberikan kritik, saran ataupun pertanyaan-pertanyaan yang

berkaitan dengan Sonic Gear.

4.7 Rancangan Spesifikasi Basisdata

103
File Name : MtrProduct

Description : Master Product

Primary Key : IDProduct

Tabel 4.1 Spesifikasi File Master Product


Field Name Data Type Size Description

IDProduct varchar 20 primary key product

Series varchar 50 menunjukkan series product yang keluar

Harga money 8 menunjukkan harga product

Gambar varchar 300 menunjukkan path gambar product

Keyword varchar 300 pencarian product

File Name : Login

Description : Master Login

Primary Key : UserName

Foreign Key : IDUser

Tabel 4.2 Spesifikasi File Master Login


Field Name Data Type Size Description

UserName nvarchar 20 username untuk login

Pass nvarchar 20 password untuk login

Status nvarchar 1 menunjukkan status admin atau user

IDUser nvarchar 20 foreign key menunjuk MtrUser

Question nvarchar 1 pertanyaan apabila pelanggan lupa password

Answer nvarchar 200 jawaban dari pertanyaan lupa password

File Name : TransOrder

104
Description : Database Cart Pelanggan

Primary Key : UserName

Foreign Key : IDUser dan IDProduct

Tabel 4.3 Spesifikasi File Database Cart Pelanggan


Field Name Data Type Size Description

IDOrder varchar 50 username untuk login

IDUser varchar 50 password untuk login

IDProduct varchar 50 menunjukkan status admin atau user

Jumlah Int 4 foreign key menunjuk mtrUser

Total Money 8 pertanyaan apabila pelanggan lupa password

Tanggal datetime 8 jawaban dari pertanyaan lupa password

Nama File : Event

Description : Master Event

Primary Key : IDEvent

Tabel 4.4 Spesifikasi File Master Event


Field Name Data Type Size Description

EventDate varchar 50 Komentar mengenai kapan event akan diadakan

Comment varchar 200 Keterangan mengenai event

IDEvent varchar 5 Primary key untuk table event

105
File Name : TransHistory

Description : Transaksi Yang Sedang Berjalan

Primary Key : IDTrans

Foreign Key : IDUser dan IDProduct

Tabel 4.5 Spesifikasi File Transaksi Yang Sedang Berjalan


Field Name Data Type Size Description

IDTrans varchar 50 primary key barang yang sudah disetujui user

IDUser varchar 50 primary key menunjuk ke MtrUser

IDProduct varchar 50 primary key menunjuk ke MtrProduct

Jumlah int 4 jumlah barang yang sudah disetujui

Total money 8 total harga yang harus dibayar

Tanggal datetime 8 tanggal persetujuan

File Name : FAQ

Description : Master FAQ

Primary Key : IDFAQ

Tabel 4.6 Spesifikasi File Master FAQ


Field Name Data Type Size Description

IDFAQ varchar 5 primary key untuk FAQ

Question varchar 1000 pertanyaan FAQ

Answer varchar 1000 jawaban pertanyaan FAQ

106
File Name : MtrUser

Description : Master User

Primary Key : IDUser

Tabel 4.7 Spesifikasi File Master User


Field Name Data Type Size Description

IDUser varchar 20 primary key user

Nama varchar 50 nama user

Sex char 1 menunjukkan jenis kelamin user

Telepon varchar 50 menunjukkan nomor telepon user

Company varchar 150 menunjukkan perusahaan user

Add varchar 150 menunjukkan alamat user

Email varchar 150 Menunjukkan email user

4.8.1 ERD (Entity Relation Diagram)

Dari database yang ada digambarkan entity relation diagram sebagai berikut:

107
Login

UserName
Pass MtrUser
Status
IDUser
1 1 IDUser 1
Question Nama
Answer Sex
Telepon
Company
Add
Email

Mtr Product

IDProduct 1
Series
Harga
Gambar
Keyword

TransHistory

IDTrans
IDUser ~
IDProduct ~
Jumlah
Total
Tanggal

TransOrder
IDOrder
IDUser ~
IDProduct ~
Jumlah
Total
Tanggal

Gambar 4.61 Entity Relation Diagram

108
4.8 Rancangan Spesifikasi Proses

4.8.1 Layar User

Modul Home

Begin

Menampilkan “About Sonic Gear Gallery”

Menampilkan Beberapa Gambar Produk Sonic Gear

Menampilkan “News & Events”

Menampilkan form Login

If Sign In.click then Sign In.show

If Forget Password.click then Forget Password.show

If Home.click then Home.show

If Product.click then Product.show

If User Profile.click then User Profile.show

If Contact Us.click then Contact Us.show

If FAQ then.click FAQ.show

If Logout.click then Logout and Home.show

Function Form Login

Begin

Input User ID

Input Password

If Enter.click then

If All input = NULL then

Display “Login Failed”

109
End if

If User ID <>Record Member or Record Admin then

Display” Login Failed”

End if

If Password <> Record Member or Record Admin then

Display “Login Failed”

End if

If User ID and Password = Record Member then login as Member

If User ID and Password = Record Admin then login as Admin

Else if Clear.click then clear all form

End if

End

End

Modul Sign In

Begin

Menampilkan form New Member

Function form New Member

Begin

Input User Name

Input Password

Input Confirm

Input Name

110
Input Sex

Input Telephone

Input Company

Input Address

Input Email Address

Input Question

Input Your Answer

If Submit click then

If All input = NULL then

Display “You must fill this form complete”

End if

If User Name = NULL then

Display “You must fill this form complete”

Else if User Name = RecordMember then

Display “Sorry, your username already used”

End if

If Password = NULL then

Display “You must fill this form complete”

Else if Password < 6 digit then

Display “Sorry, Password required minimum six digit character”

End if

If Confirm = NULL then

Display “You must fill this form complete”

111
Else if Confirm <> Password then

Display “Your password confirmation does not match

please try again”

End if

If Name = NULL then

Display “You must fill this form complete”

End If

If Sex =NULL then

Display “You must fill this form complete”

End if

If Telephone = NULL then

Display “You must fill this form complete”

End if

If Company = NULL then

Display “You must fill this form complete”

End if

If Address = NULL then

Display “You must fill this form complete”

End if

If Email Address = Null then

Display “Your email does not valid”

End if

If Question = NULL then

112
Display “You must fill this form complete”

End if

If Your Answer = NULL then

Display “You must fill this form complete”

End if

If All Input = TRUE then

Display “Your new profile is now active”

End if

Else if Clear click then Clear all form

End if

End

End

Modul Forget Password

Begin

Menampilkan form Forget Password

Function form Forget Password

Begin

Input User Name

Input Name

Input Sex

Input Telephone

Input Company

113
Input Address

Input Question

Input Your Answer

Input Send Through

If Submit Click then

If All input = NULL then

Display “Sorry your Username is not found”

End if

If User Name <> RecordMember then

Display “Sorry your Username is not found”

Else if User Name = Record Member And (Name, Sex, Company, Address,

Question, Your Answer) = NULL or <> Record Member then

Display “Sorry, you must fill this form identically with your data”

End if

If Name <> RecordMember then

Display “Sorry your Username is not found”

End If

If Sex <> RecordMember then

Display “Sorry your Username is not found”

End if

If Telephone<> Record Member then

Display “Sorry your Username is not found”

End if

114
If Company <> RecordMember then

Display “Sorry your Username is not found”

End if

If Address <> RecordMember then

Display “Sorry your Username is not found”

End if

If Question <> RecordMember then

Display “Sorry your Username is not found”

End if

If Your Answer <> RecordMember then

Display “Sorry your Username is not found”

End if

If Send Through = Email then

Send Password to email

Display “Your password will be sent to your email”

Else Automatic Login

Change Password.show

Display “You have been granted permission Please input new

password”

End If

Else if Reset click then Clear all form

End if

End

115
End

Modul Product

Begin

Menampilkan form Search Product

Function form Search Product

Begin

Input Search Item

Input View By Category

If Search click then

If Search Item <> Record Produck then

Display “No Similar data is found”

Else Display Gambar dan Data Product berdasarkan Category

yang dipilih.

If Gambar Product.click then form Item’s Information

Product.show

End if

End if

End

End

Modul Item’s Information Product

Begin

116
Menampilkan Gambar dan Informasi Product

If Find Other.click then Product.show

End

Modul User Profile

Begin

Menampilkan “You need to Login to view this page”

End

Modul Contact Us

Begin

Menampilkan Alamat, telephone, email Sonic Gear Gallery

If Here.click then Launch Outlook Express

End if

End

Modul FAQ

Begin

Menampilkan List of Our Frequently Asked Question

End

4.8.2 Layar Member

Modul Home

Begin

117
Menampilkan “About Sonic Gear Gallery”

Menampilkan Beberapa Gambar Produk Sonic Gear

Menampilkan “News & Events”

Menampilkan Nama Member

If Home.click then Home.show

If Product.click then Product.show

If User Profile.click then User Profile.show

If Contact Us.click then Contact Us.show

If FAQ then.click FAQ.show

If Logout.click then Logout member and Home.show

End

Modul Product

Begin

Menampilkan form Search Product

If View Cart.click then form View Cart.show

Function form Search Product

Begin

Input Search Item

Input View By Category

If Search click then

If Search Item <> Record Produck then

Display “No Similar data is found”

118
Else Display Gambar dan Data Product berdasarkan

Category yang dipilih.

If Gambar Product.click then form Item’s Information

Product.show

End if

End if

End

End

Modul Item’s Information Product

Begin

Menampilkan Gambar dan Informasi Product

Menampilkan form Add To Cart

If Find Other.click then Product.show

Function form Add To Cart

Begin

Input Number Of Order

If Add To cart.click then

If Number Of Order = Null then

Display “Please input the number of order

correctly”

If Number Of Order <= 0 then

Display “The number Requested must be over than

119
0”

Else

Display “This item have been added to your cart

list”

Display “To verify cart click here”

If Here.click then View Cart.show

End if

End if

End if

End

End

Modul View Cart

Begin

Menampilkan data pemesanan

If Back.click then Product.show

If Order More click then Product.show

If Verify.click or Verify All.click then

Pindahkan data yang diverify ke table Transaction In Progress

Display “Your Order has been verified, please check at the user

profile section”

End if

If Delete.click then

120
Delete data yang dipilih

Display “The item have been deleted”

End if

End

Modul User Profile

Begin

Menampilkan Data Member

Menampilkan Data Shopping Cart

Menampilkan Data Transaction In Progress

If Change My Profile.click then form Change My Profile.show

If Verify My Order.click then View Cart.show

If Contact Us.click then Contact Us.show

End

Modul Change My Profile

Begin

Menampilkan Current Profile

Menampilkan form Change Profile

If Back.click then User Profile.show

Function form Change Profile

Begin

Input Name

121
Input Telephone

Input Company

Input Address

Input Email

If Update.click then

If All input = NULL then

Display “Please enter the input correctly”

End if

If Name = NULL then

Display “Please enter the input correctly”

End if

If Telephone = NULL then

Display “Please enter the input correctly”

End if

If Company = NULL then

Display “Please enter the input correctly”

End if

If Address = NULL then

Display “Please enter the input correctly”

End if

If Email = NULL then

Display “Please enter the input correctly”

End if

122
If All input = TRUE then

Update data dan kembali ke menu User Profile

End if

Else if Clear.click then clear all form

End if

End

End

Modul Change My Password

Begin

Menampilkan form Change Pasword

If Back.click then User Profile.show

Function form Change My Password

Begin

Input New Password

Input Confirm Password

If Submit.click then

If New Password = NULL or < 6 digit then

Display “Sorry, Password Required Six Digit Character

Please Reenter Password”

End if

If Confirm Password <> New Password then

Display “Sorry your confirmation didn't match Please

Reenter Password”

123
End if

If All input =TRUE then

Display “Your password has been succesfully changed”

End if

End

End

Modul Contact Us

Begin

Menampilkan Alamat, telephone, email Sonic Gear Gallery

If Here.click then Launch Outlook Express

End if

End

Modul FAQ

Begin

Menampilkan List of Our Frequently Asked Question

End

4.8.3 Layar Admin

Modul Home

Begin

Menampilkan “About Sonic Gear Gallery”

124
Menampilkan Beberapa Gambar Produk Sonic Gear

Menampilkan “News & Events”

Menampilkan Nama Admin

If Home.click then Home.show

If Login.click then Login.show

If Product.click then Product.show

If User Profile.click then User Profile.show

If Contact Us.click then Contact Us.show

If FAQ then.click FAQ.show

If Logout.click then Logout Admin and Home.show

End

Modul Product

Begin

Menampilkan form Search Product

Function form Search Product

Begin

Input Search Item

Input View By Category

If Search click then

If Search Item <> Record Produck then

Display “No Similar data is found”

Else Display Gambar dan Data Product berdasarkan

125
Category yang dipilih.

If Gambar Product.click then form Item’s Information

Product.show

End if

End if

End

End

Modul Item’s Information Product

Begin

Menampilkan Gambar dan Informasi Product

If Find Other.click then Product.show

End

Modul User Profile

Begin

Menampilkan Data Admin

If Change My Profile.click then form Change My Profile.show

If Manage Member Profile.click then form Manage Member Profile.show

If Manage Product.click then form Manage Product.show

If Manage Cart.click then form Manage Cart.show

If Manage Transaction.click then form Manage Transaction.show

126
If Manage FAQ.click then form Manage FAQ.show

If Manage Event.click then form Manage Event.show

End

Modul Change My Profile

Begin

Menampilkan Current Profile

Menampilkan form Change Profile

If Back.click then User Profile.show

Function form Change Profile

Begin

Input Name

Input Telephone

Input Company

Input Address

Input Email

If Update.click then

If All input = NULL then

Display “Please enter the input correctly”

End if

If Name = NULL then

Display “Please enter the input correctly”

127
End if

If Telephone = NULL then

Display” Please enter the input correctly”

End if

If Company = NULL then

Display “Please enter the input correctly”

End if

If Address = NULL then

Display “Please enter the input correctly”

End if

If Email = NULL then

Display “Please enter the input correctly”

End if

If All input = TRUE then

Update data dan kembali ke menu User Profile

End if

Else if Clear.click then clear all form

End if

End

End

Modul Change My Password

Begin

128
Menampilkan form Change Pasword

Function form Change Password

Begin

Input New Password

Input Confirm Password

If Submit.click then

If New Password = NULL or < 6 digit then

Display “Sorry, Password Required Six Digit Character

Please Reenter Password”

End if

If Confirm Password <> New Password then

Display “Sorry your confirmation didn't match Please

Reenter Password”

End if

If All input =TRUE then

Display “Your password has been succesfully changed”

End if

End

End

Modul Manage Member Profile

Begin

Menampilkan Data Member

129
Menampilkan form Search Member

If Back.click then User Profile.show

If Edit.click then form Edit Member Profile.show

Function form Search Member

Begin

Input Search Based

Input Contain Text

If Search.click then

If Contain text <> Record Member then

Display “No keyword found”

Else display all Data Found.

End if

End if

End

End

Modul Edit Member Profile

Begin

Menampilkan Current Member Profile

Menampilkan form Change Profile

If Back.click then form Manage Member Profile.show

Function form Change Profile

Begin

130
Input Name

Input Telephone

Input Company

Input Address

Input Email

If Update.click then

If All input = NULL then

Display “Please enter the input correctly”

End if

If Name = NULL then

Display “Please enter the input correctly”

End if

If Telephone = NULL then

Display” Please enter the input correctly”

End if

If Company = NULL then

Display “Please enter the input correctly”

End if

If Address = NULL then

Display “Please enter the input correctly”

End if

If Email = NULL then

Display “Please enter the input correctly”

131
End if

If All input = TRUE then

Update data dan kembali ke menu Manage Member Profile

End if

Else if Clear.click then clear all form

End if

End

End

Modul Manage Product

Begin

Menampilkan form Search

If Back.click then User Profile.show

If Add New Product.click then form Add New Product.show

Function form Search

Begin

Input Search Item

Input View By Category

If Search click then

If Search Item <> Record Produck then

Display “No Similar data is found”

Else Display Gambar dan Data Product berdasarkan

Category yang dipilih.

132
If Gambar Product.click then form Item’s Information

Product.show

If Edit.click then form Edit Product.show

If Delete then delete data

End if

End if

End

End

Modul Add New Product

Begin

Menampilkan form Add New Product

If Back.click then form Manage Product.show

Function form Add New Product

Begin

Input New IDProduct

Input Series

Input Price

Input Picture Patch

Input Keyword

If Update.click then

If All input = NULL then

Display “Please enter the input correctly”

133
End if

If New IDProduct = NULL then

Display “Please enter the input correctly”

End if

If Series = NULL then

Display “Please enter the input correctly”

End if

If Price = NULL then

Display “Please enter the input correctly”

End if

If Picture Path = NULL then

Display “Please enter the input correctly”

End if

If Keyword = NULL then

Display “Please enter the input correctly”

End if

If All input = TRUE then

Automatic Add New product

Product.show

End if

Else if Clear.click then clear all form

End if

End

134
End

Modul Edit Product

Begin

Menampilkan Current Item Profile

Menampilkan form Change Product

If Back.click then Product.show

Function form Change Product

Begin

Input Series

Input Price

Input Picture Patch

Input Keyword

If Update.click then

If All input = NULL then

Display “Please enter the input correctly”

End if

If Series = NULL then

Display “Please enter the input correctly”

End if

If Price = NULL then

Display “Please enter the input correctly”

End if

135
If Picture Path = NULL then

Display “Please enter the input correctly”

End if

If Keyword = NULL then

Display “Please enter the input correctly”

End if

If All input = TRUE then

Automatic Update Product

Product.show

End if

Else if Clear.click then clear all form

End if

End

End

Modul Manage Cart

Begin

Menampilkan List Of Unverified Order

Menampilkan form Search

If Back.click then User Profile.show

If Delete.click or Delete All.click then Delete Data

Function Search

136
Begin

Input Search Based

Input Contain Text

If Search.click then

If Contain text <> Record Member then

Display “No keyword found”

Else Display All Data Found.

End if

End if

End

End

Modul Manage Transaction

Begin

Menampilkan List Of The Transaction

Menampilkan form Search

If Back.click then User Profile.show

If Delete.click or Delete All.click then Delete Data

Function Search

Begin

Input Search Based

Input Contain Text

If Search.click then

137
If Contain text <> Record Member then

Display “No keyword found”

Else Display All Data Found.

End if

End if

End

End

Modul Manage FAQ

Begin

Menampilkan List of Our Frequently Asked Question

If Back.click then User Profile.show

If Delete.click then Delete Data

If Edit.click then form Edit FAQ.show

If Addnew.click then form Add New FAQ.show

End

Modul Add New FAQ

Begin

Menampilkan form Add FAQ

If Back.click then form Manage FAQ.show

Function form Add FAQ

138
Begin

Input Question

Input Answer

If Add.click then

If All input = NULL then

Display “Please enter the input correctly”

End if

If Question = NULL then

Display “Please enter the input correctly”

End if

If Answer = NULL then

Display “Please enter the input correctly”

End if

If All input = TRUE then

Add New FAQ

Form Manage FAQ.show

End if

Else if Clear.click then clear all form

End if

End

End

Modul Edit FAQ

139
Begin

Menampilkan Current FAQ

Menampilkan form Edit FAQ

If Back.click then form Manage FAQ.show

Function form Edit FAQ

Begin

Input Question

Input Answer

If Update.click then

If All input = NULL then

Display “Please enter the input correctly”

End if

If Question = NULL then

Display “Please enter the input correctly”

End if

If Answer = NULL then

Display “Please enter the input correctly”

End if

If All input = TRUE then

Add New FAQ

Form Manage FAQ.show

End if

Else if Clear.click then clear all form

140
End if

End

End

Modul Manage Event

Begin

Menampilkan Event List Currently Displayed

If Back.click then User Profile.show

If Delete.click then Delete Data

If Edit.click then form Edit Event.show

If Addnew.click then form Add New Event.show

End

Modul Add New Event

Begin

Menampilkan form Add Event

If Back.click then form Manage Event.show

Function form Add Event

Begin

Input Time Of Event

Input Event Comment

If Add.click then

If All input = NULL then

141
Display “Please enter the input correctly”

End if

If Time Of Event = NULL then

Display “Please enter the input correctly”

End if

If Event Comment = NULL then

Display “Please enter the input correctly”

End if

If All input = TRUE then

Add New Event

Form Manage Event.show

End if

Else if Clear.click then clear all form

End if

End

End

Modul Edit Event

Begin

Menampilkan Current Event

Menampilkan form Edit Event

If Back.click then form Manage Event.show

Function form Edit Event

142
Begin

Input Time Of Event

Input Event Comment

If Update.click then

If All input = NULL then

Display “Please enter the input correctly”

End if

If Time Of Event = NULL then

Display “Please enter the input correctly”

End if

If Event comment = NULL then

Display “Please enter the input correctly”

End if

If All input = TRUE then

Add New Event

Form Manage Event.show

End if

Else if Clear.click then clear all form

End if

End

End

143
Modul Contact Us

Begin

Menampilkan Alamat, telephone, email Sonic Gear Gallery

If Here.click then Launch Outlook Express

End if

End

Modul FAQ

Begin

Menampilkan List of Our Frequently Asked Question

End

4.9 Fungsi Administrasi

Sebelum sampai pada implementasi sistem, ada baiknya kita jelaskan sedikit tentang fungsi

Administrator. Fungsi modul utama Administrator yaitu untuk menampilkan dan mengatur data.

Fungsi-fungsi dari modul utama Administrator dapat dijabarkan sebagai berikut:

• Untuk melihat data berupa data member baik berupa informasi personal, ataupun melihat

data transaksi yang telah dilakukan oleh member.

• Sebagai sarana untuk mengedit atau memanipulasi data-data tertentu pada system

basisdata. Misalnya untuk menghapus, mengubah atau menambah data produk, beserta

dengan gambar produk asli tersebut.

144
4.10 Implementasi Sistem

Implementasi sistem pemasaran Sonic Gear Gallery yang diusulkan terdiri dari spesifikasi

kebutuhan perangkat keras (hardware), spesifikasi kebutuhan perangkat lunak (software),

kebutuhan sumber daya manusia (SDM) dan cara penggunaan pemasaran online (e-marketing).

4.10.1 Spesifikasi Kebutuhan Perangkat Keras (Hardware)

Sarana penunjang pertama yang dibutuhkan adalah perangkat keras dari komputer dimana

pemasaran online Sonic Gear Gallery ini akan diimplementasikan. Kebutuhan ini dapat dibagi

menjadi dua bagian yaitu komputer server dan komputer client.

Spesifikasi minimum untuk masing-masing komputer adalah sebagai berikut:

1. Server

• Internet Servis Provider

• Provider Web Hosting

• Router

2. Client

• Internet Servis Provider

4.10.2 Spesifikasi Kebutuhan Perangkat Lunak (Software)

Sarana penunjang kedua adalah perangkat-perangkat lunak yang dibutuhkan untuk

mengimplementasikan aplikasi pemasaran online Sonic Gear ini. Sama halnya dengan perangkat

keras, kebutuhan akan perangkat lunak ini pun dibagi kembali menjadi dua bagian, yaitu untuk

server dan client.

Kebutuhan pada masing-masing bagian adalah sebagai berikut:

145
1. Server

• Windows 2000 Advance Server

• Internet Information Servis (IIS 5.0)

• SQL Server 2000

• Internet Explorer 5.0

2. Client

• Windows 98

• Internet Explorer 5.0

146