Perancangan Antar Muka - Perancangan Sistem

BAB IV ANALISIS DAN PERANCANGAN SISTEM

4.2. Perancangan Sistem

4.2.5. Perancangan Antar Muka

5 Keterangan

1. Menunjukan nomor urut pemesanan

2. Menunjukan inisialisasi tanggal pemesanan 3. Menunjukan bulan pemesanan

4. Menunjukan tahun pemesanan 5 Menunjukan Inisialisasi pemesanan

4.2.5 Perancangan Antar Muka

Perancangan antar muka merupakan penggambaran tampilan yang digunakan secara langsung oleh pengguna, interaksi yang dapat dilakukan oleh pengguna dalam sistem. Adapun dalam antar muka ini terdapat beberapa bagian yang harus dilakukan,

yaitu dari mulai menentukan struktur menu yang ada dalam aplikasi, tampilan input dan output pada setiap fungsi yang telah ditentukan, diuraikan sebagai beriku

4.2.5.1 Struktur Menu

Struktur menu yang terdapat dalam perancangan ini dapat mengintegrasikan sebuah data dalam sistem dan disertai dengan intruksi yang ada pada pilihan menu. Sebenarnya struktur menu dibedakan berdasarkan hak akses yang dimiliki oleh masing - masing tipe user.

1. Struktur Menu Frontend a. Konsumen tidak teregistrasi

Home

Cara Pemesanan

dan Pembayaran ^{Tanya Jawab} ^Testimonial ^{Tarif Kirim}

Detail Produk ^Konfirmasi

Pembayaran

b. Konsumen teregistrasi Home

Cara Pemesanan

dan Pembayaran ^{Tanya Jawab} ^Testimonial ^{Tarif Kirim} Login

Detail Produk Akun User

Logout Kirim Testimonial Histori Pesanan User Data Pesanan User Ubah Password Profil User Keranjang Belanja Informasi Pengiriman Produk Konfirmasi Order Konfirmasi Pembayaran

Gambar 4.16 Struktur menu Konsumen teregistrasi 2. Struktur Menu Backend

Marketing

Home Data Member Data Barang Ubah Password Logout

Detail Member ^{Tambah Data}_Barang

Detail Barang

Data Tanya Jawab Data Testimonial Data Kategori Barang Tarif Pengiriman Data Pemasaran Relasi Data Pemasaran Lihat Pengiriman Lihat Pembayaran

Lihat Pemesanan Backup

Detail Pemesanan ^{Tambah Data}_Pembayaran

Detail Pembayaran

Detail Pengiriman ^{Tambah Data}_Pemasaran

Detail Pemasaran Tambah Data Pengiriman Detail Data Pengiriman Tambah Data Kategori Detail Kategori

Detail Testimoni ^{Detail Tanya}_Jawab

4.2.5.2 Perancangan Input

Perancangan input merupakan awal dimulainya suatu proses sistem yang berasal dari informasi atau data yang berkaitan langsung dengan sistem. Data merupakan masukan untuk sistem informasi, akurat tidaknya suatu data dari sistem informasi tidak lepas dari data yang dimasukkan. Jika data yang dimasukkan kurang lengkap maka hasilnya tidak akan optimal dalam menunjang pengambilan keputusan. Untuk mencegah ketidakakuratan dari suatu hasil sistem infromasi, maka perlumemperhitungkan data apa yang harus diinputkan kedalam sistem sehinggahasilnya dapat berguna secara optimal dalam pengambilan keputusan khususnya penyelesaian suatu permasalahan yang dihadapi. Adapun rancangan inputnya adalah sebagai berikut :

1. Perancangan Halaman Registrasi

Halaman registrasi merupakan halaman pendaftaran Konsumen yang akan melakukan proses pemesanan produk.

Home Cara Pemesanan dan Pembayaran Tanya Jawab Testimonial _{Tarif Kirim} Banner Email Password Login Ulang Nama Email Ulangi Email Password Telepon

Anda Mengetahui Web ini dari Facebook Kaskus Search di Google Twitter Tokobagus.com Teman / Saudara Youtube Berniaga.com DLL Daftar

2. Perancangan Menu Login

Menu login merupakan menu untuk login pada saat pertama kali membuka aplikasi.

Password

Gambar 4.19. Perancangan menu login 3. Perancangan Halaman Pengiriman Produk

Halaman pengiriman produk merupakan halaman untuk memberikan informasi data pengiriman produk yang telah dipesan.

Informasi Pengiriman Produk

Alamat Pengiriman Nama Penerima

Alamat pengiriman harus lengkap

“Sesuaikan dengan KTP”

Kabupaten / Kota Telepon

Selesai

4. Perancangan Halaman Isi Testimoni

Halaman isi testimoni merupakan halaman untuk memberi testimonial kepada owner perusahaan sebagai penilaian baik dari segi produk maupun Marketingan.

Home Cara Pemesanan dan Pembayaran Tanya Jawab Testimonial _{Tarif Kirim} Banner

Email Password

SILAHKAN KIRIMKAN TESTIMONIAL ANDA TENTANG KAMI

Nama

Aktivitas / Pekerjaan Isi Testimoni

Kirim

5. Perancangan Halaman Profil

Halaman profil merupakan halaman untuk merubah data Konsumen yang sudah teregistrasi.

Home Cara Pemesanan dan Pembayaran Tanya Jawab Testimonial _{Tarif Kirim} Banner Email Password Login Ulang Profil Anda Nama Email No Telepon Ubah

6. Perancangan Halaman Ubah Password

Halaman ubah password merupakan halaman untuk merubah password lama dengan password baru Konsumen yang sudah teregistrasi.

Home Cara Pemesanan dan Pembayaran Tanya Jawab Testimonial _{Tarif Kirim} Banner

Email Password

Silahkan Ubah Password Dengan Benar Password Lama

Password Baru Ulangi Password Baru

Ubah

7. Perancangan Halaman Konfirmasi Pembayaran

Halaman konfirmasi pembayaran merupakan halaman untuk melakukan konfirmasi pembayaran.

Home Cara Pemesanan dan Pembayaran Tanya Jawab Testimonial _{Tarif Kirim} Banner Email Password Login Ulang Kode Pemesanan Cek Pemesanan Kode Pesanan Keterangan Atas Nama Tujuan Bank Tanggal Pembayaran Cek Pemesanan

Gambar 4.24 Perancangan halaman konfirmasi pembayaran 4.2.4.3 Perancangan Output

Perancangan output adalah hasil pengolahan data setelah suatu masukan lengkap dan kemudian diproses hingga menghasilkan keluaran (Output). Dalam suatu sistem informasi yang paling penting adalah hasil output harus sesuai dengan keinginan dan kebutuhan pengguna(user). Proses menampilkan output ada dua

bagian, yang pertama output data kelayar dan yang kedua output data ke printer atau output data yang dicetak. Adapun tampilan output yang dihasilkan dari perancangan sistem adalah sebagai berikut.

1. Perancangan Halaman Katalog Utama

Halaman katalog utama merupakan tampilan produk utama.

Home Cara Pemesanan dan Pembayaran Tanya Jawab Testimonial _{Tarif Kirim} Banner

Email Password

GAMBAR GAMBAR GAMBAR

GAMBAR GAMBAR GAMBAR Text 1 Text 2 Text 3 Text 4 Text 1 Text 2 Text 3 Text 4 Text 1 Text 2 Text 3 Text 4 Text 1 Text 2 Text 3 Text 4 Text 1 Text 2 Text 3 Text 4 Text 1 Text 2 Text 3 Text 4 Text 1 Text 2 Text 3 Text 4 Text 1 Text 2 Text 3 Text 4 Text 1 Text 2 Text 3 Text 4

2. Perancangan Halaman Detail Produk

Halaman detail produk merupakan tampilan yang menjelaskan deskripsi produk.

Home Cara Pemesanan dan Pembayaran Tanya Jawab Testimonial _{Tarif Kirim} Banner Email Password Login Ulang GAMBAR Nama Produk Harga Asal Diskon Menjadi Merk Deskripsi Masukan Keranjang >>

3. Perancangan Halaman Keranjang Belanja

Halaman keranjang belanja merupakan tampilan data produk yang akan dipesan.

Keranjang Belanja Anda

Hapus No Produk Harga sebelumnya Diskon Qty Sub Berat Sub Total

Total

Gambar 4.27 Perancangan halaman keranjang belanja 4. Perancangan Halaman Data Pesanan

Halaman data pesanan merupakan tampilan yang memberikan informasi pemesanan.

Tgl Pemesanan Total

Kode

Pemesanan ^{Status Kirim} ^Aksi

Metode Kirim / No. Resi Alamat Pengiriman Status Grand Total Bayar Biaya Kirim per Kg / Total Biaya

kirim Item / Berat Diskon / Pot.

Harga Info terbaru dan pesanan dan pengiriman anda

Daftar Produk Yang Dipesan dan Cara Pembayarannya

No Produk _Sebelumnya^Harga Diskon Qty Subtotal

5. Perancangan Halaman Histori Pesanan

Halaman histori pesanan merupakan tampilan riwayat pesanan Konsumen.

Tgl Pemesanan Total Kode

Pemesanan ^Status ^Lihat

Grand Total Bayar Biaya Kirim per Kg / Total Biaya

kirim Item / Berat

Diskon / Pot. Harga Histori Pesanan Anda

Gambar 4.29 Perancangan halaman histori pesanan

6. Perancangan Bukti Data Pesanan

Bukti data pesanan merupakan tampilan print out bukti pemesanan.

BANNER

Kode Pesanan Tgl Pemesanan Total

Disc / Potongan Harga Tambahan Item / Berat

Biaya Kirim Per Kg / Total Biaya Kirim Grand Total Bayar

Status

Nama Penerima Alamat Penerima Kota Telepon _Pengiriman^Metode No. Resi Status Pengiriman

No Produk _Sebelumnya^Harga Diskon Qty Subtotal

Dalam dokumen Sistem informasi penjualan pakaian berbasis web pada Butik Herman Collection Bandung (Halaman 104-118)