ANALISIS DAN PERANCANGAN SISTEM
B. Analisis Kebutuhan
5. Rancangan Desain Interface untuk Pengunjung Halaman Utama
Gambar 3.12 Perancangan Desain Interface Halaman Utama Pengunjung
Halaman Utama untuk pengunjung mempunyai 4 menu utama, yaitu Halaman Utama, Profil, Artikel, dan Produk. Beberapa fasilitas untuk user pada halaman utama, yaitu buku tamu, pendaftaran anggota, pendaftaran perusahaan, serta pencarian. Selain itu juga terdapat uraian singkat tentang berita terbaru.
Fasilitas buku tamu dapat digunakan oleh pengunjung untuk mengisi kritik atau saran yang bisa ditujukan untuk perusahaan, untuk produk ataupun untuk sistem ini. Fasilitas pencarian dapat digunakan
Banner dan Logo Yogya
Tanggal hari ini Halaman utama | Profil Perusahaan | Produk | Artikel
Pencarian Login Anggota Daftar Anggota Buku Tamu Berita terbaru Password Username LOGIN Kategori CARI Lihat Daftar Anggota Halaman Utama Profil Perusahaan Produk Artikel 10 barang terlaris Pendaftaran Perusahaan Login Perusahaan Ucapan selamat datang untuk pengunjung Footer
pengunjung untuk mencari informasi tertentu dengan cara mengetikkan kata kunci dan pilih kategori yang akan dicari. Kategori meliputi perusahaan, produk, dan artikel. kemudian klik CARI untuk melanjutkan pencarian. Jika kata kunci yang dicari telah ditemukan maka sistem akan menampilkan data yang ada berdasar kata kunci dan kategori tersebut, tetapi jika kata kunci yang dicari tidak ditemukan, maka sistem akan memberitahukan kepada pengunjung bahwa hasil pencarian tidak ada. Klik Lihat Anggota untuk melihat daftar anggota yang telah ada.
Halaman Utama – Fasilitas Buku Tamu
Gambar 3.13 Perancangan Desain Interface Buku Tamu Pengunjung
Untuk pengisian buku tamu, pengunjung harus mengisi nama, email, serta komentarnya. Kemudian klik Kirim untuk mengirimkan komentar tersebut dan klik Batal jika pengunjung ingin membatalkan
Buku Tamu
pengisian buku tamu. Jika pengunjung ingin melihat daftar buku tamu, maka klik Lihat buku tamu.
Halaman Utama – Fasilitas Daftar Anggota
Gambar 3.14 Perancangan Desain Interface Daftar Anggota Pengunjung
Untuk melakukan pendaftaran anggota, pengunjung harus memasukkan data yang diperlukan dengan lengkap. Username dan password digunakan oleh pengunjung untuk login sebagai anggota. Kemudian klik KIRIM untuk melakukan pendaftaran dan klik BATAL jika pengunjung ingin membatalkan pendaftaran anggota.
Halaman Utama – Fasilitas Pendaftaran Perusahaan
Gambar 3.15 Perancangan Desain Interface Pendaftaran Perusahaan
untuk Pengunjung
Untuk melakukan pendaftaran perusahaan, pengunjung harus memasukkan data yang diperlukan dengan lengkap. Password digunakan oleh pengunjung untuk login sebagai perusahaan anggota. Kemudian klik
DAFTAR untuk melakukan pendaftaran dan klik BATAL jika pengunjung
Halaman Utama – Profil Perusahaan
Gambar 3.16 Perancangan Desain Interface Menu Profil Perusahaan
untuk Pengunjung
Menu profil ini digunakan anggota untuk melihat informasi suatu perusahaan yang tergabung dalam sistem ini. Pertama, sistem akan menampilkan semua nama perusahaan yang sudah bergabung dengan sistem ini. Untuk melihat detail dari profil perusahaan, klik Detail.Informasi perusahaan tersebut meliputi kode perusahaan, nama perusahaan, alamat perusahaan, kode pos perusahaan, telepon, faximile, email, pimpinan, deskripsi, serta gambar atau logo perusahaan. Perusahaan yang tergabung dalam sistem sebanyak 1 perusahaan : >> Dwika Batik Perusahaan ini bergerak di bidang pengadaan berbagai macam barang batik Detail
Halaman Utama – Produk
Gambar 3.17 Perancangan Desain Interface Menu Produk untuk
Pengunjung
Menu produk pada sistem akan menampilkan semua produk yang diproduksi oleh masingmasing perusahaan yang tergabung dalam sistem ini. Data produk yang ditampilkan meliputi kode produk, nama produk, nama, ukuran, stok, bahan, harga, kapasitas serta keterangannya. Produk dari perusahaan…….. (nama perusahaan yang dipilih user) Gambar produk Kode produk : …….. Nama Produk : ……. Ukuran :... Stok : ... Bahan : ... Harga : ... Keterangan : ………. Gambar produk Kode produk : …….. Nama Produk : ……. Ukuran :... Stok : ... Bahan : ... Harga : ... Keterangan : ………. Gambar produk Kode produk : …….. Nama Produk : ……. Ukuran :... Stok : ... Bahan : ... Harga : ... Keterangan : ……….
Halaman Utama – Artikel
Gambar 3.18 Perancangan Desain Interface Menu Artikel untuk
Pengunjung
Menu artikel menyediakan berbagai macam artikel tentang batik ataupun informasiinformasi lainnya. Pertama sistem akan menampilkan paragraf index dari suatu artikel. Untuk melihat detail salah satu artikel, klik
Konfirmasi Login Anggota Anda berhasil Login ! Lanjut *Tekan lanjut untuk melanjutkan 6. Desain Interface untuk Anggota Login Anggota
Gambar 3.19 Perancangan Desain Interface Login untuk Anggota
Pada login anggota, anggota harus mengisikan username dan password. Jika username dan password masukan dari anggota tersebut benar, maka akan tampil halaman konfirmasi Login Anggota. Tetapi jika username atau password salah, maka sistem akan menampilkan pesan bahwa username atau password salah dan anda tidak diijinkan untuk mengakses halaman anggota.
Gambar 3.20 Perancangan Desain Interface Konfirmasi Login untuk
Halaman Utama untuk Anggota
Gambar 3.21 Perancangan Desain Interface Halaman Utama untuk
Anggota
Halaman khusus untuk anggota terdapat menu utama yang dapat digunakan oleh anggota. Menu tersebut meliputi : menu Profil Perusahaan, Produk, Artikel, Buku tamu, Pemesanan, Status Pemesanan, Konfirmasi Pembayaran, serta menu Edit data pribadi. Selain menu utama tersebut, juga disediakan fasilitas tambahan yaitu Ganti Password.
Menu Profil Perusahaan, Artikel serta menu Produk pada anggota ini sama dengan menu pada pengunjung. Tetapi dalam menu anggota, anggota dapat melakukan pemesanan untuk berbagai macam produk dari suatu perusahaan. Menu Konfirmasi Pembayaran dapat digunakan oleh anggota
Banner dan Logo Yogya
Tanggal hari ini Halaman utama | Ganti Password | Logout
Profil Perusahaan Produk Artikel Buku tamu Pemesanan Status pemesanan Konfirmasi Pembayaran Edit data pribadi Pencarian Ucapan selamat datang untuk anggota Berita terbaru Kategori CARI Footer
jika ingin memberi tahu bahwa anggota telah melakukan pembayaran sesuai dengan yang dilakukannya. Menu Status Pembayaran ini disediakan supaya anggota dapat mengetahui status pemesanan yang telah dilakukannya. Misalnya status pemesanannya sedang dalam status pemesanan, proses pembuatan, pengiriman dan selesai. Menu edit data pribadi digunakan jika anggota ingin melakukan perubahan pada data pribadinya. Menu Ganti Password dapat digunakan jika anggota ingin mengubahanpasswordnya.
Halaman Profil Perusahaan untuk Anggota
Gambar 3.22 Perancangan Desain Interface Profil Perusahaan
untuk Anggota
Menu Profil Perusahaan ini sama dengan menu Profil perusahaan
yang terdapat pada pengunjung. Perusahaan yang tergabung dalam sistem sebanyak 8 perusahaan : >> Dwika Batik Perusahaan ini bergerak di bidang pengadaan berbagai macam barang batik Detail
Halaman Artikel untuk Anggota
Gambar 3.23 Perancangan Desain Interface Artikel
untuk Anggota
Menu artikel pada anggota sama dengan menu artikel yang terdapat pada menu pengunjung. Menu artikel disini menyediakan berbagai macam artikel tentang batik ataupun informasiinformasi lainnya. Untuk melihat salah satu artikel, klik detail pada sebelah kanan paragraf indexnya, maka berita atau informasi akan ditampilkan secara lengkap.
Halaman Produk untuk Anggota
Gambar 3.24 Perancangan Desain Interface Produk
untuk Anggota
Halaman Produk ini dapat digunakan oleh anggota untuk melakukan pemesanan terhadap suatu produk tertentu. Jika anggota ingin pesan produk, maka klik Pesan yang terdapat pada setiap produk yang ditawarkan. Setelah klik pesan, apabila ingin mengakhiri pemesanan, maka klik tombol
SELESAI yang terdapat di bawah. Produk dari perusahaan…….. (nama perusahaan yang dipilih user) Gambar produk Kode produk : …….. Nama Produk : ……. Ukuran :... Stok : ... Bahan : ... Harga : ... Keterangan : ………. Pesan Gambar produk Kode produk : …….. Nama Produk : ……. Ukuran :... Stok : ... Bahan : ... Harga : ... Keterangan : ………. Pesan
Halaman Form Pemesanan Anggota
Gambar 3.25 Perancangan Desain Interface Form Pemesanan
untuk Anggota
Halaman Form Pemesanan ini dapat digunakan untuk melihat pemesanan yang sudah dilakukan oleh anggota. Anggota hanya memilih no nota yang diinginkan dan klik tombol OK, maka sistem akan menampilkan detail produk yang dipesan dalam no nota tersebut.
Halaman Konfirmasi Pembayaran untuk Anggota
Gambar 3.26 Perancangan Desain Interface Konfirmasi
Pembayaran untuk Anggota Pemesanan Anda
No Nota : …….(otomatis)
Tanggal Pesan : …….
No Kode produk Nama produk jumlah Harga satuan subtotal Total Pemesanan Total pembelian Anda sebesar Rp. 5000,00 Konfirmasi Pembayaran No nota : Tanggal Tranfer : Jumlah : Jenis transfer : Atas nama : OK BATAL Pilih Pilih
Halaman Konfirmasi Pembayaran ini digunakan oleh anggota untuk memberi tahu bahwa anggota telah melakukan proses pembayaran untuk no nota tertentu. No nota tersebut dipilih oleh anggota, kemudian anggota mengisikan tanggal transfer, jumlah, jenis transfer, dan atas nama. Klik BATAL untuk membatalkan konfirmasi pembayaran. Klik OK untuk mengirimkan konfirmasi pembayaran tersebut.
Halaman Status Pemesanan untuk Anggota
Gambar 3.27 Perancangan Desain Interface Status Pemesanan
untuk Anggota
HalamanStatus Pemesanan ini dapat digunakan oleh anggota untuk mengetahui status pemesanan yang telah dilakukannya. Status pemesanan ini meliputi Pemesanan, Pembuatan, Pengiriman, serta Selesai.
Status Pemesanan Anda No nota Tangal
pesan pemesanan Total pemesanan Status Pembuatan
7. Rancangan Desain Interface untuk Perusahaan