Rancangan layar yang dibuat untuk aplikasi penjualan pada CV Tyas Collection terdiri dalam bentuk storyboard dapat dilihat pada gambar 3.8 s/d 3.44.
Gambar 3.8 Rancangan Layar Beranda untuk Pengunjung
Pada Gambar 3.8 ini merupakan perancangan layar halaman beranda untuk pengunjung. Di bagian header terdapat logo perusahaan dan di bawah header terdapat menu-menu yang dapat diakses oleh pengunjung. Form login di bagian kiri layar untuk memasukkan akun dan sandi atau jika belum mempunyai akun, pengunjung tetap bisa melihat produk barang yang dijual. Namun apabila pengunjung ingin membeli barang, harus melakukan registrasi terlebih dahulu. Pengunjung akan berubah menjadi pelanggan jika sudah melakukan registrasi.
Gambar 3.9 Rancangan Layar Produk untuk Pengunjung
Pada Gambar 3.9 ini merupakan perancangan layar halaman produk untuk pengunjung, pada halaman ini pengunjung dapat melihat produk dan harga barang, tetapi pengunjung tidak dapat melakukan transaksi dikarenakan pengunjung belum terdaftar menjadi pelanggan.
Pada Gambar 3.10 ini merupakan perancangan layar prosedur pemesanan untuk pengunjung yang sudah menjadi pelanggan. Dihalaman ini di jelaskan cara pelanggan memilih produk lalu melihat produk yang sudah dipilih dan cara melakukan pembayaran.
Gambar 3.11 Rancangan Layar Tentang Kami
Pada Gambar 3.11 ini merupakan perancangan layar tentang kami dimana pengunjung dapat melihat visi dan misi perusahaan serta pengunjung dapat mengetahui informasi tentang perusahaan.
Gambar 3.12 Rancangan Layar Registrasi untuk Pengunjung
Pada Gambar 3.12 ini merupakan perancangan layar halaman registrasi dimana pengunjung harus mengisi biodata yang diberikan untuk menjadi pelanggan.
Pada Gambar 3.13 ini merupakan perancangan layar beranda ketika pengunjung sudah menjadi pelanggan. Disebelah kiri terdapat menu-menu dari website dan pelanggan dapat memilih menu tersebut.
Gambar 3.14 Rancangan Layar Produk Pelanggan
Pada Gambar 3.14 ini merupakan perancangan layar halaman produk ketika pengunjung sudah menjadi pelanggan, ketika pelanggan klik gambar produk maka pelanggan mengisi jumlah barang yang akan di pesan dan klik masukan ke keranjang untuk masuk ke keranjang belanja.
Gambar 3.15 Rancangan Layar Keranjang Belanja Pelanggan
Pada Gambar 3.15 ini merupakan perancangan layar keranjang belanja dimana pelanggan bisa melihat hasil pesanan yang telah dilakukan, dan pelanggan bisa menghapus barang yang tidak sesuai. Apabila barang yang di pilih sudah sesuai semua maka pelanggan mengisi alamat pengirim di mana barang yang di pesan akan di kirim ke alamat tersebut, dan klik masukan transaksi agar barang diproses.
Pada Gambar 3.16 ini merupakan perancangan layar transaksi yang pernah pelanggan lakukan, dibagian transaksi pelanggan klik detail untuk melihat pesanan, dan klik cetak untuk mencetak detail pesanan. Dan pelanggan juga dapat melihat status transaksi apabila pelanggan sudah membayar maka akan berubah menjadi lunas, apabila pelanggan belum membayar maka status belum lunas, apabila pelanggan belum bayar dari tanggal yang ditentukan maka status transaksi batal. Pelanggan bisa melihat bukti transaksi yang pernah di kirimkan.
Gambar 3.17 Rancangan Layar Detail Transaksi Pelanggan
Pada Gambar 3.17 ini merupakan perancangan layar detail transaksi pelanggan dimana pelanggan bisa melihat detail produk apasaja yang pernah pelanggan pesan, dan pelanggan bisa memasukan bukti transaksi berupa foto.
Gambar 3.18 Rancangan Layar Cetak Transaksi Pelanggan
Pada Gambar 3.18 ini merupakan perancangan layar cetak transaksi pelanggan dimana pelanggan bisa mencetak transaksi yang pernah dilakukan.
Pada Gambar 3.19 ini merupakan perancangan layar bukti transaksi pelanggan dimana pelanggan bisa melihat bukti yang pernah di kirim.
Gambar 3.20 Rancangan Layar Profil Pelanggan
Pada Gambar 3.20 ini merupakan perancangan layar profil pelanggan dimana pelanggan dapat mengganti data diri pelanggan dan pelanggan dapat merubah password.
Gambar 3.21 Rancangan Layar Beranda untuk Pelanggan Sekolah
Pada Gambar 3.21 ini merupakan perancangan layar beranda untuk pelanggan sekolah setelah melakukan login, sekolah dapat melihat dan memesan produk yang ada dan juga sekolah dapat memesan produk dengan desain sendiri.
Pada Gambar 3.22 ini merupakan perancangan layar masukan desain, sebelum sekolah memasukan desain yang di inginkan apabila sekolah ingin memasukan desain maka harus klik masukan desain baru.
Gambar 3.23 Rancangan Layar Tambah Desain Baru Pelanggan Sekolah
Pada Gambar 3.23 ini merupakan perancangan layar untuk menambah desain baru yang di inginkan pelanggan sekolah, desain dapat di masukan dengan klik browser dan memilih desain yang sudah di siapkan dan klik masukan.
Gambar 3.24 Rancangan Layar Detail Desain Pelanggan Sekolah
Pada Gambar 3.24 ini merupakan perancangan layar detail desain pelanggan sekolah yang pernah di pesan, dan pihak sekolah tinggal menunggu contoh produk yang telah di buat dan akan di kirimkan ke sekolah.
Pada Gambar 3.25 ini merupakan perancangan layar masuk untuk admin, admin tinggal mengisi akun dan sandi yang telah di sediakan dan klik masuk.
Gambar 3.26 Rancangan Layar Pengaturan Web Admin
Pada Gambar 3.26 ini merupakan perancangan layar pengaturan web untuk admin dimana admin dapat mengatur aktifitas beranda yang ada pada web.
Gambar 3.27 Rancangan Layar Pengaturan Kontak Admin
Pada Gambar 3.27 ini merupakan perancangan layar pengaturan kontak untuk admin dimana admin dapat mengatur kontak yang bisa di hubungi pada halaman web.
Pada Gambar 3.28 ini merupakan perancangan layar pelanggan untuk admin dimana admin dapat melihat semua pelanggan yang aktif dan jenis pelanggan.
Gambar 3.29 Rancangan Layar Detail Pelanggan Admin
Pada Gambar 3.29 ini merupakan perancangan layar detail data pelanggan yang dimana admin hanya dapat merubah status pelanggan menjadi aktif atau blokir.
Gambar 3.30 Rancangan Layar Kategori Produk Admin
Pada Gambar 3.30 ini merupakan perancangan layar data kategori produk untuk admin dimana admin dapat menambahkan, mengubah, dan menghapus kategori produk yang ada pada web.
Pada Gambar 3.31 ini merupakan perancangan layar tambah kategori produk untuk admin di mana admin dapat menambahkan kategori baik SD, SMP maupun SMA yang akan ditampilkan pada web.
Gambar 3.32 Rancangan Layar Ubah Kategori Produk untuk Admin
Pada Gambar 3.32 ini merupakan perancangan layar ubah kategori produk untuk admin dimana admin dapat mengubah kategori produk yang sudah ada dan di tampilkan pada web.
Gambar 3.33 Rancangan Layar Data Produk Admin
Pada Gambar 3.33 ini merupakan perancangan layar data produk untuk admin dimana admin dapat menambah, merubah, dan menghapus produk yang sudah ada pada web.
Pada Gambar 3.34 ini merupakan perancangan layar tambah produk untuk admin, dimana admin dapat memasukan produk yang baru dan di tampilkan pada web.
Gambar 3.35 Rancangan Layar Ubah Produk Admin
Pada Gambar 3.35 ini merupakan perancangan layar ubah produk untuk admin dimana admin dapat merubah detail produk yang sudah ada untuk ditampilkan pada web.
Gambar 3.36 Rancangan Layar Data Desain Admin
Pada Gambar 3.36 ini merupakan perancangan layar data desain dari sekolah untuk admin, dimana admin dapat melihat desain produk yang diberikan dari sekolah dan dapat melihat detail dari sekolah tersebut.
Pada Gambar 3.37 ini merupakan perancangan layar detail desain sekolah untuk admin dimana admin dapat melihat detail desain yang dipesan oleh sekolah dan admin akan mengirim contoh desain yang diminta ke alamat sekolah tersebut.
Gambar 3.38 Rancangan Layar Data Transaksi Admin
Pada Gambar 3.38 ini merupakan perancangan layar data transaksi untuk admin dimana admin dapat melihat semua transaksi yang telah berjalan dapat juga melihat detail transaksi, cetak transaksi, dan bisa melihat bukti transaksi.
Gambar 3.39 Rancangan Layar Detail Transaksi Admin
Pada Gambar 3.39 ini merupakan perancangan layar detail data transaksi untuk admin dimana admin dapat melihat transaksi yang dilakukan oleh pelanggan dan admin dapat merubah status transaksi lunas apabila pelanggan telah melakukan pembayaran, dan batal apabila pelanggan tidak melakukan pembayaran dari batas yang di tentukan.
Pada Gambar 3.40 ini merupakan perancangan layar cetak transaksi untuk admin dimana admin dapat mencetak transaksi yang penah dilakukan oleh pelanggan.
Gambar 3.41 Rancangan Layar Laporan Transaksi Admin
Pada Gambar 3.41 ini merupakan perancangan layar laporan pemesanan untuk admin dimana admin dapat melihat laporan harian, bulanan, dan tahunan dan semua transaksi yang pernah dilakukan oleh pelanggan.
Gambar 3.42 Rancangan Layar Laporan Transaksi Harian Admin
Pada Gambar 3.42 ini merupakan perancangan layar laporan transaksi harian untuk admin dimana admin dapat mencetak laporan transaksi harian yang dilakukan oleh pelanggan.
Pada Gambar 3.43 ini merupakan perancangan layar laporan transaksi bulanan untuk admin dimana admin dapat mencetak laporan transaksi bulanan yang dilakukan oleh pelanggan.
Gambar 3.44 Rancangan Layar Laporan Transaksi Tahunan untuk Admin
Pada Gambar 3.44 ini merupakan perancangan layar laporan transaksi tahunan untuk admin dimana admin dapat mencetak laporan transaksi tahunan yang dilakukan oleh pelanggan.
Rancangan navigasi layar yang digambarkan dalam bentuk state transition diagram dapat dilihat pada gambar 3.45 s/d 3.81.
• Navigasi Layar
Gambar 3.45 Navigasi Layar Beranda Pengunjung
Pada State Transition Diagram yang ditunjukkan gambar 3.45 merupakan navigasi layar beranda untuk pengunjung.
Gambar 3.46 Navigasi Layar Produk Pengunjung
Pada State Transition Diagram yang ditunjukkan gambar 3.46 merupakan navigasi layar produk untuk pengunjung.
Pada State Transition Diagram yang ditunjukkan gambar 3.47 merupakan navigasi layar prosedur pemesanan untuk pengunjung.
Gambar 3.48 Navigasi Layar Tentang Kami
Pada State Transition Diagram yang ditunjukkan gambar 3.48 merupakan navigasi layar tentang kami untuk pengunjung.
Pada State Transition Diagram yang ditunjukkan gambar 3.49 merupakan navigasi layar registrasi pengunjung. Setelah melakukan Registerasi, pengunjung akan menjadi pelanggan dan bisa melakukan login.
Gambar 3.50 Navigasi Layar Beranda Pelanggan
Pada State Transition Diagram yang ditunjukkan gambar 3.50 merupakan navigasi layar beranda untuk pelanggan.
Pada State Transition Diagram yang ditunjukkan gambar 3.51 merupakan navigasi layar produk untuk pelanggan.
Gambar 3.52 Navigasi Layar Keranjang Belanja Pelanggan
Pada State Transition Diagram yang ditunjukkan gambar 3.52 merupakan navigasi layar keranjang belanja untuk pelanggan.
Pada State Transition Diagram yang ditunjukkan gambar 3.53 merupakan navigasi layar transaksi saya untuk pelanggan.
Gambar 3.54 Navigasi Layar Detail Transaksi
Pada State Transition Diagram yang ditunjukkan gambar 3.54 merupakan navigasi layar detail transaksi untuk pelanggan.
Pada State Transition Diagram yang ditunjukkan gambar 3.55 merupakan navigasi layar cetak transaksi untuk pelanggan.
Gambar 3.56 Navigasi Layar Bukti Transaksi
Pada State Transition Diagram yang ditunjukkan gambar 3.56 merupakan navigasi layar bukti transaksi.
Pada State Transition Diagram yang ditunjukkan gambar 3.57 merupakan navigasi layar profil saya atau profil pelanggan.
Gambar 3.58 Navigasi Layar Beranda Pelanggan Sekolah
Pada State Transition Diagram yang ditunjukkan gambar 3.58 merupakan navigasi layar beranda untuk pelanggan sekolah.
Pada State Transition Diagram yang ditunjukkan gambar 3.59 merupakan navigasi layar masukan desain untuk pelanggan sekolah.
Gambar 3.60 Navigasi Layar Masukan Desain Baru
Pada State Transition Diagram yang ditunjukkan gambar 3.60 merupakan navigasi layar submit desain baru untuk pelanggan sekolah.
Pada State Transition Diagram yang ditunjukkan gambar 3.61 merupakan navigasi layar detail desain yang penah dikirim dari sekolah.
Gambar 3.62 Navigasi Layar Masuk Admin
Pada State Transition Diagram yang di tunjukkan gambar 3.62 merupakan navigasi layar masuk untuk admin. Setelah melakukan login akan masuk ke pengaturan web admin.
Pada State Transition Diagram yang ditunjukkan gambar 3.63 merupakan navigasi layar pengaturan web untuk admin, yang merupakan default saat login admin.
Gambar 3.64 Navigasi Layar Pengaturan Kontak
Pada State Transition Diagram yang ditunjukkan gambar 3.64 merupakan navigasi layar pengaturan kontak untuk halaman web.
Pada State Transition Diagram yang ditunjukkan gambar 3.65 merupakan navigasi layar data pelanggan untuk admin.
Gambar 3.66 Navigasi Layar Detail Pelanggan
Pada State Transition Diagram yang ditunjukkan gambar 3.66 merupakan navigasi layar data detail pelanggan untuk admin.
Pada State Transition Diagram yang ditunjukkan gambar 3.67 merupakan navigasi layar data kategori untuk pelanggan.
Gambar 3.68 Navigasi Layar Tambah Kakegori Produk
Pada Stasste Transition Diagram yang ditunjukkan gambar 3.68 merupakan navigasi layar tambah kategori produk untuk admin.
Pada State Transition Diagram yang ditunjukkan gambar 3.69 merupakan navigasi layar ubah kategori produk untuk admin.
Gambar 3.70 Navigasi Layar Produk
Pada State Transition Diagram yang ditunjukkan gambar 3.70 merupakan navigasi layar produk untuk admin.
Pada State Transition Diagram yang ditunjukkan gambar 3.71 merupakan navigasi layar tambah produk untuk admin.
Gambar 3.72 Navigasi Layar Ubah Produk
Pada State Transition Diagram yang ditunjukkan gambar 3.72 merupakan navigasi layar ubah produk untuk admin.
Pada State Transition Diagram yang ditunjukkan gambar 3.73 merupakan navigasi layar desain untuk admin.
Gambar 3.74 Navigasi Layar Detail Desain
Pada State Transition Diagram yang ditunjukkan gambar 3.74 merupakan navigasi layar detail desain untuk admin.
Pada State Transition Diagram yang ditunjukkan gambar 3.75 merupakan navigasi layar detail desain untuk admin.
Gambar 3.76 Navigasi Layar Detail Transaki
Pada State Transition Diagram yang ditunjukkan gambar 3.76 merupakan navigasi layar detai transaksi untuk admin.
Pada State Transition Diagram yang ditunjukkan gambar 3.77 merupakan navigasi layar cetak transaksi untuk admin.
Gambar 3.78 Navigasi Layar Laporan Transaksi
Pada State Transition Diagram yang ditunjukkan gambar 3.78 merupakan navigasi layar Laporan transaksi untuk admin.
Pada State Transition Diagram yang ditunjukkan gambar 3.79 merupakan navigasi layar cetak laporan transaksi harian untuk admin.
Gambar 3.80 Navigasi Layar Cetak Laporan Bulanan
Pada State Transition Diagram yang ditunjukkan gambar 3.80 merupakan navigasi layar cetak laporan transaksi bulanan untuk admin.
Gambar 3.81 Navigasi Layar Cetak Laporan Tahunan
Pada State Transition Diagram yang ditunjukkan gambar 3.81 merupakan navigasi layar cetak laporan transaksi tahunan untuk admin.