Tampilan Menu Utama Tampilan Halaman Katalog Product Tampilan Halaman Product Tampilan Daftar Pelanggan Tampilan Form Keranjang Belanja Tampilan Form About Us Tampilan Form Contact Us

4. Membutuhkan Browser, dan disarankan Google Chrome. 5. Untuk perancangan sistem menggunakan Microsoft Visio dan Powerdesigner. 6. Web server untuk pengolahan data menggunakan XAMPP

4.2 Implementasi

Pada bagian ini akan dijelaskan fungsi-fungsi utama yang berjalan pada aplikasi penjualan online. Dengan penjelasan yang mencakup tampilan pada aplikasi dan fungsi yang mengatur aplikasi penjualan online ini.

4.2.1 Tampilan Menu Utama

Pada tampilan menu utama terdiri dari home, products, about us, contact us, account dan icon keranjang belanja. Dapat terlihat pada gambar 4.1 Gambar 4.1 Tampilan Menu Utama

4.2.2 Tampilan Halaman Katalog Product

Tampilan halaman katalog product menampilkan data product terbaru dan produk yang best seller. Dapat terlihat pada gambar 4.2. Gambar 4.2 Tampilan Halaman katalog product

4.2.3 Tampilan Halaman Product

Tampilan halaman product menampilkan data product yang dijual. Dapat terlihat pada gambar 4.3. Gambar 4.3 Tampilan Halaman product

4.2.4 Tampilan Daftar Pelanggan

Tampilan daftar pelanggan berguna bagi pelanggan untuk dapat melakukan transaksi pembelian barang dengan cara mendaftarkan identitas pelanggan. Form daftar pelanggan menghasilkan sebuah informasi bagi Admin mengenai data-data pelanggan yaitu email, nama, alamat, password, jenis kelamin, tanggal lahir, kota, telepon, provinsi, telepon dan capthca. Seperti terlihat pada gambar 4.4. Gambar 4.4 Tampilan Daftar Pelanggan

4.2.5 Tampilan Form Keranjang Belanja

Tampilan form keranjang belanja berfungsi untuk menampung data barang yang akan dibeli pelanggan. Dalam form keranjang belanja, Pelanggan dapat menambahkan barang dan menghapus barang. Dari form keranjang belanja menghasilkan sebuah informasi transaksi penjualan. Seperti terlihat pada gambar 4.5. Gambar 4.5 Tampilan Form Keranjang Belanja

4.2.6 Tampilan Form About Us

Tampilan form about us berguna untuk menjelaskan latar belakang berdiri nya perusahaan dan segala sesuatu mengenai CV. Abilindo Mitra Sejahtera. Seperti terlihat pada gambar 4.6. Gambar 4.6 Tampilan Form About Us

4.2.7 Tampilan Form Contact Us

Tampilan form contact us berguna untuk menginformasikan alamat CV. Abilindo Mitra Sejahtera, kontak yang bisa dihubungi baik itu media sosial maupun telepon. Seperti terlihat pada gambar 4.7. Gambar 4.7 Tampilan Form Contact Us

4.2.8 Tampilan Form Payment Confirmation