103 3.5.6
Rancangan State Transition Diagram (STD)
Berikut ini akan digambarkan state transition diagram yang menjelaskan sistem yang akan dirancang. 3.5.6.1 STD pada Online Store
Gambar 3.51 STD Layar Index Sebelum Login
Pada index sebelum login, user bisa mengakses beberapa tampilan dengan menekan tombol-tombol atau link yang tersedia. Karena user belum login, maka form login akan muncul saat link “Add To Cart” ditekan. Apabila link pada nama produk yang ada pada daftar Hot Products ditekan, maka halaman yang sesuai dengan produk yang dipilih akan ditampilkan.
104
Gambar 3.52 STD Layar Index Setelah Login
Pada layar index setelah login, user bisa mengakses beberapa tampilan dengan menekan tombol-tombol atau link yang tersedia. Karena user telah login, maka produk yang dipilih akan langsung masuk ke cart saat link “Add To Cart” ditekan. Apabila link pada produk yang ada pada daftar Hot Products atau Related Items ditekan, maka halaman yang sesuai dengan produk yang dipilih akan ditampilkan. Pada index setelah login terdapat menu Add Reference, yang menunjuk pada tampilan Add Referrence, dan Shopping Cart, yang menunjuk pada tampilan Shopping Cart.
105
Gambar 3.53 STD Layar Choose Register
Pada layar register, menu-menu yang muncul diperuntukan bagi user yang belum login. Apabila “Register Now” ditekan, maka akan ditampilkan layar selanjutnya sesuai keadaan pilihan dalam drop down box.
106
Gambar 3.54 STD Layar Corporate Registration 1 Pada layar ini, terdapat tombol “Next” untuk masuk ke layar Corporate Registration 2 yang merupakan lanjutan dari Corporate Registration 1. Menu-menu lain yang berupa link, apabila ditekan akan menampilkan halaman yang sesuai dengan menu yang ditekan.
107
Gambar 3.55 STD Layar Corporate Registration 2
Pada layar ini, terdapat tombol “Next” untuk masuk ke layar Corporate Registration 3 yang merupakan lanjutan dari Corporate Registration 2. Menu-menu lain yang berupa link, apabila ditekan akan menampilkan halaman yang sesuai dengan menu yang ditekan.
108
Gambar 3.56 STD Layar Corporate Registration 3
Pada layar ini, terdapat tombol “Submit” yang apabila ditekan akan menampilkan layar Corporate Registration Status. Menu-menu lain yang berupa link, apabila ditekan akan menampilkan halaman yang sesuai dengan menu yang ditekan.
Gambar 3.57 STD Layar Corporate Registration Status
109
Menu-menu yang yang ditampilkan adalah link, yang apabila ditekan akan menampilkan halaman yang sesuai dengan menu yang ditekan.
Gambar 3.58 STD Layar Personal Registration 1
Pada layar ini, terdapat tombol “Next” untuk masuk ke layar Personal Registration 2 yang merupakan lanjutan dari Personal Registration 1. Menu-menu lain yang berupa link, apabila ditekan akan menampilkan halaman yang sesuai dengan menu yang ditekan.
110
Gambar 3.59 STD Layar Personal Registration 2
Pada layar ini, terdapat tombol “Next” untuk masuk ke layar Personal Registration 3 yang merupakan lanjutan dari Personal Registration 2. Menu-menu lain yang berupa link, apabila ditekan akan menampilkan halaman yang sesuai dengan menu yang ditekan.
111
Gambar 3.60 STD Personal Registration 3
Pada layar ini, terdapat tombol “Submit” yang apabila ditekan akan menampilkan layar Result Personal Registration. Menu-menu lain yang berupa link, apabila ditekan akan menampilkan halaman yang sesuai dengan menu yang ditekan.
112
Gambar 3.61 STD Layar Result Personal Registration Menu-menu yang disediakan adalah link, yang apabila ditekan akan menampilkan halaman yang sesuai dengan menu yang ditekan.
Gambar 3.62 STD Layar Login
Pada saat tombol login ditekan, reaksinya tergantung kesesuaian inputan dengan database. Bila usernama dan password terdaftar, maka akan tampil layar Index, apabila tidak maka akan kembali menampilkan form Login dalan keadaan kosong.
113
Gambar 3.63 STD Layar Company Profile Sebelum Login
Pada halaman ini, terdapat beberapa tombol atau link yang akan menampilkan layar sesuai dengan nama menu pada tombol atau link. Apabila “Add To Cart” ditekan, layar Login akan ditampilkan untuk mengaktifkan menu Shopping Cart.
114
Gambar 3.64 STD Layar Company Profile Setelah Login Pada halaman ini, terdapat beberapa tombol atau link yang akan menampilkan layar sesuai dengan nama menu pada tombol atau link. Apabila “Logout” ditekan, layar Index akan ditampilkan.
Gambar 3.65 STD Layar News Sebelum Login
115
Apabila “see details” ditekan, maka akan tampil halaman Detail Newsyang akan menampilkan keseluruhan berita sesuai dengan judul yang dipilih.
Gambar 3.66 STD Layar Detail News Sebelum Login
Pada halaman ini, terdapat beberapa tombol atau link yang akan menampilkan layar sesuai dengan nama menu pada tombol atau link. Apabila “Back to News page” ditekan, halaman News akan tampil kembali.
116
Gambar 3.67 STD Layar News Setelah Login Apabila “see details” ditekan, maka akan tampil halaman Detail Newsyang akan menampilkan keseluruhan berita sesuai dengan judul yang dipilih.
Gambar 3.68 STD Layar Detail News Setelah Login
117 Pada halaman ini, terdapat beberapa tombol atau link yang akan menampilkan layar sesuai dengan nama menu pada tombol atau link. Apabila “Back to News page” ditekan, halaman News akan tampil kembali.
Gambar 3.69 STD Layar Catalog Main Sebelum Login
Pada Catalog Main terdapat beberapa link yang akan menampilkan layar sesuai dengan nama menu pada link. ditampilkan.
Apabila “Add to cart” ditekan, layar Login akan
118
Gambar 3.70 STD Layar Catalog Main Setelah Login Pada Catalog Main terdapat beberapa link yang akan menampilkan layar sesuai dengan nama menu pada link. Apabila “Add to cart” ditekan, produk akan ditampilkan ke dalam Shopping Cart.
Gambar 3.71 STD Layar Catalog Browse Sebelum Login
119
Pada Catalog Browse, terdapat beberapa tombol atau link yang akan menampilkan layar sesuai dengan nama menu pada tombol atau link.
Gambar 3.72 STD Layar Catalog Browse Setelah Login
Pada layar ini, terdapat beberapa tombol atau link yang akan menampilkan layar sesuai dengan nama menu pada tombol atau link.
120
Gambar 3.73 STD Layar Catalog Search Sebelum Login
Pada layar ini, terdapat beberapa tombol atau link yang akan menampilkan layar sesuai dengan nama menu pada tombol atau link. Apabila “Add To Cart” ditekan, layar Login akan ditampilkan untuk mengaktifkan menu Shopping Cart.
121
Gambar 3.74 STD Layar Catalog Search Setelah Login
Pada layar ini, terdapat beberapa tombol atau link yang akan menampilkan layar sesuai dengan nama menu pada tombol atau link.
Gambar 3.75 STD Layar Contact Us Sebelum Login
122
Pada layar ini, terdapat beberapa tombol atau link yang akan menampilkan layar sesuai dengan nama menu pada tombol atau link. Apabila “Add To Cart” ditekan, layar Login akan ditampilkan untuk mengaktifkan menu Shopping Cart.
Gambar 3.76 STD Layar Contact Us Setelah Login
Pada layar ini, terdapat beberapa tombol atau link yang akan menampilkan layar sesuai dengan nama menu pada tombol atau link. Apabila “Add To Cart” ditekan, barang yang dipesan akan dicantumkan pada shopping cart..
