Perancangan Antar Muka Anggota - Perancangan Antarmuka

ANALISIS DAN PERANCANGAN

3.1 Analisis Sistem

3.2.2 Perancangan Antarmuka

3.2.2.2 Perancangan Antar Muka Anggota

Antar muka anggota terdiri dari halaman beranda, halaman profil, halaman produk, halaman cara belanja, halaman hubungi kami, halaman kategori, halaman detail produk, halaman keranjang belanja, halaman pencarian, halaman registrasi anggota, halaman login, halaman lupa password, halaman profil saya, halaman lanjut belanja, halaman informasi, detail halaman faktur dan halaman konfirmasi pesanan. Perancangan antar muka anggota tersebut dapat dilihat pada gambar berikut ini:

1. Perancangan Antar Muka Halaman Beranda

Berikut adalah gambar 3.33, merupakan perancangan antar muka halaman beranda dari pembangunan aplikasi penjualan buku pelajaran di TB. Fadhil berbasisis web:

AN01

< LOGO >

Produk Terbaru Gambar Produk Terlaris Gambar Gambar Gambar Gambar Gambar < Keterangan > Masukkan ke Keranjang Detail

< Keterangan > Masukkan ke Keranjang Detail

Beranda Profil Produk Cara Belanja Hubungi Kami

Keranjang Belanja > Keranjang Saya Kategori > Pelajaran SD > Pelajaran SMP > Pelajaran SMA Lupa Username/Password Login Member Username/E-mail Password Login Registrasi Pencarian Keterangan: · Klik Beranda Menuju

AN01

· Klik Profil Menuju AN02

· Klik Produk menuju AN03

· Klik Cara Belanja Menuju AN04

· Klik Hubungi Kami Menuju AN05

· Klik Kategori Menuju AN06

· Klik Detail Produk Menuju AN07 · Klik Keranjang Belanja Menuju AN08 · Klik Pencarian Menuju AN09 · Klik Registrasi Menuju AN10

· Klik Login Menuju AN11

· Klik Lupa Password Menuju AN12

· Klik Profil Saya Menuju AN13

· Klik Ubah Profil Menuju AN14

· Klik Ubah Password Menuju AN15

· Klik Lanjut Belanja Menuju AN16

· Klik History Pemesanan Menuju AN17

· Klik Faktur Menuju AN18 · Klik Konfirmasi Pesanan Menuju AN19 Join Us Customer Service Gambar Gambar JNE Tracking Gambar

2. Perancangan Antar Muka Halaman Profil

Berikut adalah gambar 3.34, merupakan perancangan antar muka halaman profil dari pembangunan aplikasi penjualan buku pelajaran di TB. Fadhil berbasisis web:

AN02

< LOGO >

Produk Terbaru

Gambar

Produk Terlaris

Gambar

Beranda Profil Produk Cara Belanja Hubungi Kami

· Klik Beranda Menuju AN01

· Klik Profil Menuju AN02

· Klik Produk menuju AN03

· Klik Cara Belanja Menuju AN04

· Klik Hubungi Kami Menuju AN05

· Klik Kategori Menuju AN06

· Klik Detail Produk Menuju AN07 · Klik Keranjang Belanja Menuju AN08 · Klik Pencarian Menuju AN09 · Klik Registrasi Menuju AN10

· Klik Login Menuju AN11

· Klik Lupa Password Menuju AN12

· Klik Profil Saya Menuju AN13

· Klik Ubah Profil Menuju AN14

· Klik Ubah Password Menuju AN15

· Klik Lanjut Belanja Menuju AN16

· Klik History Pemesanan Menuju AN17

· Klik Faktur Menuju AN18 · Klik Konfirmasi Pesanan Menuju AN19 Join Us Customer Service Gambar Gambar JNE Tracking Gambar Profil Profil

3. Perancangan Antar Muka Halaman Produk

Berikut adalah gambar 3.35, merupakan perancangan antar muka halaman produk dari pembangunan aplikasi penjualan buku pelajaran di TB. Fadhil berbasisis web:

AN03

< LOGO >

Produk Terbaru Gambar Produk Terlaris Gambar Gambar Gambar Gambar Gambar < Keterangan >

Masukkan ke Keranjang Detail

< Keterangan >

Masukkan ke Keranjang Detail

< Keterangan >

Masukkan ke Keranjang Detail

< Keterangan >

Masukkan ke Keranjang Detail

Beranda Profil Produk Cara Belanja Hubungi Kami

· Klik Beranda Menuju AN01

· Klik Profil Menuju AN02

· Klik Produk menuju AN03

· Klik Cara Belanja Menuju AN04

· Klik Hubungi Kami Menuju AN05

· Klik Kategori Menuju AN06

· Klik Detail Produk Menuju AN07 · Klik Keranjang Belanja Menuju AN08 · Klik Pencarian Menuju AN09 · Klik Registrasi Menuju AN10

· Klik Login Menuju AN11

· Klik Lupa Password Menuju AN12

· Klik Profil Saya Menuju AN13

· Klik Ubah Profil Menuju AN14

· Klik Ubah Password Menuju AN15

· Klik Lanjut Belanja Menuju AN16

· Klik History Pemesanan Menuju AN17

· Klik Faktur Menuju AN18

· Klik Konfirmasi Pesanan Menuju AN19

4. Perancangan Antar Muka Halaman Cara Belanja

Berikut adalah gambar 3.36, merupakan perancangan antar muka halaman cara belanja dari pembangunan aplikasi penjualan buku pelajaran di TB. Fadhil berbasisis web:

PE05

< LOGO >

Produk Terbaru Gambar Produk Terlaris Gambar Cara Belanja

Beranda Profil Produk Cara Belanja Hubungi Kami

· Klik Beranda Menuju AN01

· Klik Profil Menuju AN02

· Klik Produk menuju AN03

· Klik Cara Belanja Menuju AN04

· Klik Hubungi Kami Menuju AN05

· Klik Kategori Menuju AN06

· Klik Detail Produk Menuju AN07 · Klik Keranjang Belanja Menuju AN08 · Klik Pencarian Menuju AN09 · Klik Registrasi Menuju AN10

· Klik Login Menuju AN11

· Klik Lupa Password Menuju AN12

· Klik Profil Saya Menuju AN13

· Klik Ubah Profil Menuju AN14

· Klik Ubah Password Menuju AN15

· Klik Lanjut Belanja Menuju AN16

· Klik History Pemesanan Menuju AN17

· Klik Faktur Menuju AN18

· Klik Konfirmasi Pesanan Menuju AN19

5. Perancangan Antar Muka Halaman Hubungi Kami

Berikut adalah gambar 3-37, merupakan perancangan antar muka halaman hubungi kami dari pembangunan aplikasi penjualan buku pelajaran di TB. Fadhil berbasisis web:

AN05

< LOGO >

Produk Terbaru Gambar Produk Terlaris Gambar Hubungi Kami

Beranda Profil Produk Cara Belanja Hubungi Kami

· Klik Beranda Menuju AN01

· Klik Profil Menuju AN02

· Klik Produk menuju AN03

· Klik Cara Belanja Menuju AN04

· Klik Hubungi Kami Menuju AN05

· Klik Kategori Menuju AN06

· Klik Detail Produk Menuju AN07 · Klik Keranjang Belanja Menuju AN08 · Klik Pencarian Menuju AN09 · Klik Registrasi Menuju AN10

· Klik Login Menuju AN11

· Klik Lupa Password Menuju AN12

· Klik Profil Saya Menuju AN13

· Klik Ubah Profil Menuju AN14

· Klik Ubah Password Menuju AN15

· Klik Lanjut Belanja Menuju AN16

· Klik History Pemesanan Menuju AN17

· Klik Faktur Menuju AN18

· Klik Konfirmasi Pesanan Menuju AN19

6. Perancangan Antar Muka Halaman Kategori

Berikut adalah gambar 3-38 merupakan perancangan antar muka halaman kategori dari pembangunan aplikasi penjualan buku pelajaran di TB. Fadhil berbasisis web:

AN06

< LOGO >

Produk Terbaru Gambar Produk Terlaris Gambar Gambar Gambar Gambar Gambar < Keterangan >

Masukkan ke Keranjang Detail

< Keterangan >

Masukkan ke Keranjang Detail

< Keterangan >

Masukkan ke Keranjang Detail

< Keterangan >

Masukkan ke Keranjang Detail

Beranda Profil Produk Cara Belanja Hubungi Kami

· Klik Beranda Menuju AN01

· Klik Profil Menuju AN02

· Klik Produk menuju AN03

· Klik Cara Belanja Menuju AN04

· Klik Hubungi Kami Menuju AN05

· Klik Kategori Menuju AN06

· Klik Detail Produk Menuju AN07 · Klik Keranjang Belanja Menuju AN08 · Klik Pencarian Menuju AN09 · Klik Registrasi Menuju AN10

· Klik Login Menuju AN11

· Klik Lupa Password Menuju AN12

· Klik Profil Saya Menuju AN13

· Klik Ubah Profil Menuju AN14

· Klik Ubah Password Menuju AN15

· Klik Lanjut Belanja Menuju AN16

· Klik History Pemesanan Menuju AN17

· Klik Faktur Menuju AN18

· Klik Konfirmasi Pesanan Menuju AN19

7. Perancangan Antar Muka Halaman Detail Produk

Berikut adalah gambar 3-39, merupakan perancangan antar muka halaman detail produk dari pembangunan aplikasi penjualan buku pelajaran di TB. Fadhil berbasisis web:

AN07

< LOGO >

Produk Terbaru Gambar Produk Terlaris Gambar Gambar < Keterangan > Masukkan ke Keranjang

Beranda Profil Produk Cara Belanja Hubungi Kami

· Klik Beranda Menuju AN01

· Klik Profil Menuju AN02

· Klik Produk menuju AN03

· Klik Cara Belanja Menuju AN04

· Klik Hubungi Kami Menuju AN05

· Klik Kategori Menuju AN06

· Klik Detail Produk Menuju AN07 · Klik Keranjang Belanja Menuju AN08 · Klik Pencarian Menuju AN09 · Klik Registrasi Menuju AN10

· Klik Login Menuju AN11

· Klik Lupa Password Menuju AN12

· Klik Profil Saya Menuju AN13

· Klik Ubah Profil Menuju AN14

· Klik Ubah Password Menuju AN15

· Klik Lanjut Belanja Menuju AN16

· Klik History Pemesanan Menuju AN17

· Klik Faktur Menuju AN18

· Klik Konfirmasi Pesanan Menuju AN19

8. Perancangan Antar Muka Halaman Keranjang Belanja.

Berikut adalah gambar 3-40, perancangan antar muka halaman keranjang belanja dari pembangunan aplikasi penjualan buku pelajaran di TB. Fadhil berbasisis web:

AN08

< LOGO >

Produk Terbaru

Gambar

Produk Terlaris

Gambar

Beranda Profil Produk Cara Belanja Hubungi Kami

Judul Harga Jumlah Total Aksi

Sub-Total

Selesai Belanja Ubah

Lanjut Belanja

Keterangan:

· Klik Beranda Menuju AN01

· Klik Profil Menuju AN02

· Klik Produk menuju AN03

· Klik Cara Belanja Menuju AN04

· Klik Hubungi Kami Menuju AN05

· Klik Kategori Menuju AN06

· Klik Detail Produk Menuju AN07 · Klik Keranjang Belanja Menuju AN08 · Klik Pencarian Menuju AN09 · Klik Registrasi Menuju AN10

· Klik Login Menuju AN11

· Klik Lupa Password Menuju AN12

· Klik Profil Saya Menuju AN13

· Klik Ubah Profil Menuju AN14

· Klik Ubah Password Menuju AN15

· Klik Lanjut Belanja Menuju AN16

· Klik History Pemesanan Menuju AN17

· Klik Faktur Menuju AN18

· Klik Konfirmasi Pesanan Menuju AN19

9. Perancangan Antar Muka Halaman Pencarian

Berikut adalah gambar 3-41, merupakan perancangan antar muka halaman pencarian dari pembangunan aplikasi penjualan buku pelajaran di TB. Fadhil berbasisis web:

AN09

< LOGO >

Produk Terbaru Gambar Produk Terlaris Gambar Gambar Gambar Gambar Gambar < Keterangan >

Masukkan ke Keranjang Detail

< Keterangan >

Masukkan ke Keranjang Detail

< Keterangan >

Masukkan ke Keranjang Detail

< Keterangan >

Masukkan ke Keranjang Detail

Beranda Profil Produk Cara Belanja Hubungi Kami

· Klik Beranda Menuju AN01

· Klik Profil Menuju AN02

· Klik Produk menuju AN03

· Klik Cara Belanja Menuju AN04

· Klik Hubungi Kami Menuju AN05

· Klik Kategori Menuju AN06

· Klik Detail Produk Menuju AN07 · Klik Keranjang Belanja Menuju AN08 · Klik Pencarian Menuju AN09 · Klik Registrasi Menuju AN10

· Klik Login Menuju AN11

· Klik Lupa Password Menuju AN12

· Klik Profil Saya Menuju AN13

· Klik Ubah Profil Menuju AN14

· Klik Ubah Password Menuju AN15

· Klik Lanjut Belanja Menuju AN16

· Klik History Pemesanan Menuju AN17

· Klik Faktur Menuju AN18

· Klik Konfirmasi Pesanan Menuju AN19

10. Perancangan Antar Muka Halaman Registrasi Anggota

Berikut adalah gambar 3-42, merupakan perancangan antar muka halaman registrasi anggota dari pembangunan aplikasi penjualan buku pelajaran di TB. Fadhil berbasisis web:

A13

< LOGO >

Beranda Profil Produk Cara Belanja Hubungi Kami Keranjang Belanja > Keranjang Saya Halaman Pendaftaran Username Password Alamat Nama Lengkap E-mail Provinsi Kota Kecamatan Kode Pos Simpan Kategori > Pelajaran SD > Pelajaran SMP > Pelajaran SMA > Buku Paket Informasi Anggota Selamat Datang Lihat Profil Saya

> Buku LKS Keluar

Ubah Password

Keterangan: · Klik Beranda Menuju

A01

· Klik Profil Menuju A02

· Klik Produk menuju A03

· Klik Cara Belanja Menuju A04

· Klik Hubungi Kami Menuju A05

· Klik Detail Menuju A06

· Klik Keranjang Belanja Menuju A07

· Klik Kategori Menuju A08

· Klik Login Nenuju A09

· Klik Daftar Anggota Menuju A10

· Klik Lupa Password Menuju A11

· Klik Lanjut Belanja Menuju A12

· Klik Profil Saya Menuju A13

· Klik Pengaturan Profil Saya A14

· Klik Informasi Detail Pemesanan Klik A14

· Klik Faktur Menuju A15

· Klik Konfirmasi Pesanan A16

11. Perancangan Antar Muka Halaman Login

Berikut adalah gambar 3-43, merupakan perancangan antar muka halaman login dari pembangunan aplikasi penjualan buku pelajaran di TB. Fadhil berbasisis web:

AN11

< LOGO >

Produk Terbaru Gambar Produk Terlaris Gambar Gambar Gambar Gambar Gambar < Keterangan >

Masukkan ke Keranjang Detail

< Keterangan >

Masukkan ke Keranjang Detail

< Keterangan >

Masukkan ke Keranjang Detail

< Keterangan >

Masukkan ke Keranjang Detail

Beranda Profil Produk Cara Belanja Hubungi Kami

· Klik Beranda Menuju AN01

· Klik Profil Menuju AN02

· Klik Produk menuju AN03

· Klik Cara Belanja Menuju AN04

· Klik Hubungi Kami Menuju AN05

· Klik Kategori Menuju AN06

· Klik Detail Produk Menuju AN07 · Klik Keranjang Belanja Menuju AN08 · Klik Pencarian Menuju AN09 · Klik Registrasi Menuju AN10

· Klik Login Menuju AN11

· Klik Lupa Password Menuju AN12

· Klik Profil Saya Menuju AN13

· Klik Ubah Profil Menuju AN14

· Klik Ubah Password Menuju AN15

· Klik Lanjut Belanja Menuju AN16

· Klik History Pemesanan Menuju AN17

· Klik Faktur Menuju AN18

· Klik Konfirmasi Pesanan Menuju AN19

12. Perancangan Antar Muka Halaman Lupa Password

Berikut adalah gambar 3-43, merupakan perancangan antar muka halaman lupa password dari pembangunan aplikasi penjualan buku pelajaran di TB. Fadhil berbasisis web:

A10

< LOGO >

Beranda Profil Produk Cara Belanja Hubungi Kami

Lupa Username/Password Login Member Username/E-mail Password Login Daftar Anggota Pencarian Lupa Username/Password Username/E-mail Kirim Keterangan: · Klik Beranda Menuju

A01

· Klik Profil Menuju A02

· Klik Produk menuju A03

· Klik Cara Belanja Menuju A04

· Klik Hubungi Kami Menuju A05

· Klik Detail Menuju A06

· Klik Keranjang Belanja Menuju A07

· Klik Kategori Menuju A08

· Klik Login Nenuju A09

· Klik Daftar Anggota Menuju A10

· Klik Lupa Password Menuju A11

· Klik Lanjut Belanja Menuju A12

· Klik Profil Saya Menuju A13

· Klik Pengaturan Profil Saya A14

· Klik Informasi Detail Pemesanan Klik A14

· Klik Faktur Menuju A15

· Klik Konfirmasi Pesanan A16

13. Perancangan Antar Muka Halaman Profil Saya

Berikut adalah gambar 3-45, merupakan perancangan antar muka halaman profil saya dari pembangunan aplikasi penjualan buku pelajaran di TB. Fadhil berbasisis web:

A12

< LOGO >

Beranda Profil Produk Cara Belanja Hubungi Kami

Keranjang Belanja > Keranjang Saya

Pencarian _{Selamat Datang}

Informasi Data Pemesanan Kategori > Pelajaran SD > Pelajaran SMP > Pelajaran SMA > Buku Paket Informasi Anggota Selamat Datang Lihat Profil Saya

> Buku LKS Keluar

Informasi Data Informasi Nama : Alamat : Kecamata : Kota : Kode Pos :

No.Pemesanan Tanggal Pembayaran Jumlah Bayar Status Aksi

Keterangan: · Klik Beranda Menuju

A01

· Klik Profil Menuju A02

· Klik Produk menuju A03

· Klik Cara Belanja Menuju A04

· Klik Hubungi Kami Menuju A05

· Klik Detail Menuju A06

· Klik Keranjang Belanja Menuju A07

· Klik Kategori Menuju A08

· Klik Login Nenuju A09

· Klik Daftar Anggota Menuju A10

· Klik Lupa Password Menuju A11

· Klik Lanjut Belanja Menuju A12

· Klik Profil Saya Menuju A13

· Klik Pengaturan Profil Saya A14

· Klik Informasi Detail Pemesanan Klik A14

· Klik Faktur Menuju A15

· Klik Konfirmasi Pesanan A16

14. Perancangan Antar Muka Halaman Ubah Profil Saya

Berikut adalah gambar 3-46, merupakan perancangan antar muka halaman ubah profil saya dari pembangunan aplikasi penjualan buku pelajaran di TB. Fadhil berbasisis web:

AN15

< LOGO >

Beranda Profil Produk Cara Belanja Hubungi Kami

Keranjang Belanja

> Keranjang Saya

Pencarian _{Ubah Profil}

Kategori > Pelajaran SD > Pelajaran SMP > Pelajaran SMA Informasi Anggota Selamat Datang Lihat Profil Saya Keluar Nama Lengkap : Username : Email : Alamat : Provinsi : Keterangan:

· Klik Beranda Menuju AN01

· Klik Profil Menuju AN02

· Klik Produk menuju AN03

· Klik Cara Belanja Menuju AN04

· Klik Hubungi Kami Menuju AN05

· Klik Kategori Menuju AN06

· Klik Detail Produk Menuju AN07 · Klik Keranjang Belanja Menuju AN08 · Klik Pencarian Menuju AN09 · Klik Registrasi Menuju AN10

· Klik Login Menuju AN11

· Klik Lupa Password Menuju AN12

· Klik Profil Saya Menuju AN13

· Klik Ubah Profil Menuju AN14

· Klik Ubah Password Menuju AN15

· Klik Lanjut Belanja Menuju AN16

· Klik History Pemesanan Menuju AN17

· Klik Faktur Menuju AN18 · Klik Konfirmasi Pesanan Menuju AN19 Kab/kota : Kecamatan : Kode Pos : Simpan Kembali

15. Perancangan Antar Muka Halaman Ubah Password

Berikut adalah gambar 3-47, merupakan perancangan antar muka halaman ubah password dari pembangunan aplikasi penjualan buku pelajaran di TB. Fadhil berbasisis web:

AN15

< LOGO >

Beranda Profil Produk Cara Belanja Hubungi Kami

Keranjang Belanja > Keranjang Saya Pencarian Kategori > Pelajaran SD > Pelajaran SMP > Pelajaran SMA Informasi Anggota Selamat Datang Lihat Profil Saya Keluar

Keterangan:

· Klik Beranda Menuju AN01

· Klik Profil Menuju AN02

· Klik Produk menuju AN03

· Klik Cara Belanja Menuju AN04

· Klik Hubungi Kami Menuju AN05

· Klik Kategori Menuju AN06

· Klik Detail Produk Menuju AN07 · Klik Keranjang Belanja Menuju AN08 · Klik Pencarian Menuju AN09 · Klik Registrasi Menuju AN10

· Klik Login Menuju AN11

· Klik Lupa Password Menuju AN12

· Klik Profil Saya Menuju AN13

· Klik Ubah Profil Menuju AN14

· Klik Ubah Password Menuju AN15

· Klik Lanjut Belanja Menuju AN16

· Klik History Pemesanan Menuju AN17

· Klik Faktur Menuju AN18 · Klik Konfirmasi Pesanan Menuju AN19 Ubah Password Password Lama : Password Baru : Ulangi Password : Simpan Kembali

16. Perancangan Antar Muka Halaman Lanjut Belanja

Berikut adalah gambar 3-48, merupakan perancangan antar muka halaman lanjut belanja dari pembangunan aplikasi penjualan buku pelajaran di TB. Fadhil berbasisis web:

< LOGO >

Produk Terbaru Gambar Produk Terlaris Gambar Gambar Gambar Gambar Gambar < Keterangan >

Masukkan ke Keranjang Detail

< Keterangan >

Masukkan ke Keranjang Detail

< Keterangan >

Masukkan ke Keranjang Detail

< Keterangan >

Masukkan ke Keranjang Detail

Beranda Profil Produk Cara Belanja Hubungi Kami

· Klik Beranda Menuju AN01

· Klik Profil Menuju AN02

· Klik Produk menuju AN03

· Klik Cara Belanja Menuju AN04

· Klik Hubungi Kami Menuju AN05

· Klik Kategori Menuju AN06

· Klik Detail Produk Menuju AN07 · Klik Keranjang Belanja Menuju AN08 · Klik Pencarian Menuju AN09 · Klik Registrasi Menuju AN10

· Klik Login Menuju AN11

· Klik Lupa Password Menuju AN12

· Klik Profil Saya Menuju AN13

· Klik Ubah Profil Menuju AN14

· Klik Ubah Password Menuju AN15

· Klik Lanjut Belanja Menuju AN16

· Klik History Pemesanan Menuju AN17

· Klik Faktur Menuju AN18

· Klik Konfirmasi Pesanan Menuju AN19 AN16

17. Perancangan Antar Muka Halaman Informasi Detail Pemesanan

Berikut adalah gambar 3-49, merupakan perancangan antar muka halaman informasi detail pemesanan dari pembangunan aplikasi penjualan buku pelajaran di TB. Fadhil berbasisis web:

AN17

< LOGO >

Beranda Profil Produk Cara Belanja Hubungi Kami

Keranjang Belanja > Keranjang Saya

Dalam dokumen Pembangunan Aplikasi Penjualan Buku Pelajaran Di TB. Fadhil Berbasis web (Halaman 168-187)