Perancangan Antarmuka Perancangan Arsitektur

4. Perancangan Antarmuka Daftar Produk A03 Nama Layar : A 01 Ukuran layar : 1024 x 768 Font : Calibri Warna Background : Putih - Klik daftar komentar menuju A02 - Klik daftar produk menuju A03 - Klik daftar customer menuju A04 - Klik daftar transaksi menuju A05 - Klik retur pembelian menuju A06 - Klik biaya pengiriman menuju A08 Daftar Produk SIDEBAR MENU Daftar Komentar Customer search Daftar Katagori Produk Daftar Produk Daftar Customer Daftar Transaksi Retur pembelian Daftar Konfirmasi Pembayaran Biaya Pengiriman Edit Harga Dolar Edit Account Sign Out - Klik daftar konfirmasi pembayaran menuju A07 - - Klik edit harga dolar menuju A09 Klik edit account menuju A10 - Klik sign out menuju A11 Search Katagori ; Tambah produk Gambar 3.30 Perancangan Antarmuka Daftar Produk 5. Perancangan Antarmuka Daftar Customer A 04 Nama Layar : A 01 Ukuran layar : 1024 x 768 Font : Calibri Warna Background : Putih - Klik daftar komentar menuju A02 - Klik daftar produk menuju A 03 - Klik daftar customer menuju A 04 - Klik daftar transaksi menuju A05 - Klik retur pembelian menuju A06 - Klik biaya pengiriman menuju A 08 Daftar Customer : SIDEBAR MENU Daftar Komentar Customer Daftar Katagori Produk Daftar Produk Daftar Customer Daftar Transaksi Retur pembelian Daftar Konfirmasi Pembayaran Biaya Pengiriman Edit Harga Dolar Edit Account Sign Out - Klik daftar konfirmasi pembayaran menuju A 07 - - Klik edit harga dolar menuju A 09 Klik edit account menuju A10 - Klik sign out menuju A 11 : Gambar 3.31 Perancangan Antarmuka Daftar Customer 6. Perancangan Antarmuka Daftar Transaksi A 05 Nama Layar : A 01 Ukuran layar : 1024 x 768 Font : Calibri Warna Background : Putih - Klik daftar komentar menuju A02 - Klik daftar produk menuju A03 - Klik daftar customer menuju A 04 - Klik daftar transaksi menuju A05 - Klik retur pembelian menuju A06 - Klik biaya pengiriman menuju A08 Daftar Transaksi : SIDEBAR MENU Daftar Komentar Customer Transaksi Status Gagal Transaksi Status Proses Daftar Katagori Produk Daftar Produk Daftar Customer Daftar Transaksi Retur pembelian Daftar Konfirmasi Pembayaran Biaya Pengiriman Edit Harga Dolar Edit Account Sign Out - Klik daftar konfirmasi pembayaran menuju A 07 - - Klik edit harga dolar menuju A 09 Klik edit account menuju A10 - Klik sign out menuju A11 Transaksi Status Sukses Gambar 3.32 Perancangan Antarmuka Daftar Transaksi 7. Perancangan Antarmuka Retur Pembelian A 06 Nama Layar : A 01 Ukuran layar : 1024 x 768 Font : Calibri Warna Background : Putih - Klik daftar komentar menuju A02 - Klik daftar produk menuju A 03 - Klik daftar customer menuju A 04 - Klik daftar transaksi menuju A05 - Klik retur pembelian menuju A 06 - Klik biaya pengiriman menuju A 08 Retur Pembelian : SIDEBAR MENU Daftar Komentar Customer Retur Status Gagal Retur Status Proses Daftar Katagori Produk Daftar Produk Daftar Customer Daftar Transaksi Retur pembelian Daftar Konfirmasi Pembayaran Biaya Pengiriman Edit Harga Dolar Edit Account Sign Out - Klik daftar konfirmasi pembayaran menuju A07 - - Klik edit harga dolar menuju A 09 Klik edit account menuju A10 - Klik sign out menuju A 11 Retur Status Sukses Gambar 3.33 Perancangan Antarmuka Retur Pembelian 8. Perancangan Antarmuka Daftar Konfirmasi Pembayaran A07 Nama Layar : A 01 Ukuran layar : 1024 x 768 Font : Calibri Warna Background : Putih - Klik daftar komentar menuju A02 - Klik daftar produk menuju A03 - Klik daftar customer menuju A 04 - Klik daftar transaksi menuju A05 - Klik retur pembelian menuju A06 - Klik biaya pengiriman menuju A 08 Konfirmasi Transfer: SIDEBAR MENU Daftar Komentar Customer Daftar Katagori Produk Daftar Produk Daftar Customer Daftar Transaksi Retur pembelian Daftar Konfirmasi Pembayaran Biaya Pengiriman Edit Harga Dolar Edit Account Sign Out - Klik daftar konfirmasi pembayaran menuju A 07 - - Klik edit harga dolar menuju A09 Klik edit account menuju A10 - Klik sign out menuju A11 Gambar 3.34 Perancangan Antarmuka Daftar Konfirmasi Pembayaran 9. Perancangan Antarmuka Biaya Pengiriman A08 Nama Layar : A 01 Ukuran layar : 1024 x 768 Font : Calibri Warna Background : Putih - Klik daftar komentar menuju A02 - Klik daftar produk menuju A03 - Klik daftar customer menuju A 04 - Klik daftar transaksi menuju A05 - Klik retur pembelian menuju A06 - Klik biaya pengiriman menuju A 08 Daftar Harga Per Kota SIDEBAR MENU Daftar Komentar Customer search Daftar Katagori Produk Daftar Produk Daftar Customer Daftar Transaksi Retur pembelian Daftar Konfirmasi Pembayaran Biaya Pengiriman Edit Harga Dolar Edit Account Sign Out - Klik daftar konfirmasi pembayaran menuju A 07 - - Klik edit harga dolar menuju A 09 Klik edit account menuju A10 - Klik sign out menuju A11 Search Provinsi : Tambah Provinsi Tambah Kota Gambar 3.35 Perancangan Antarmuka Biaya Pengiriman 10. Perancangan Antarmuka Edit Harga Dolar A09 Nama Layar : A 01 Ukuran layar : 1024 x 768 Font : Calibri Warna Background : Putih - Klik daftar komentar menuju A02 - Klik daftar produk menuju A03 - Klik daftar customer menuju A 04 - Klik daftar transaksi menuju A05 - Klik retur pembelian menuju A06 - Klik biaya pengiriman menuju A 08 Edit Account Login SIDEBAR MENU Daftar Komentar Customer Perhatian Daftar Katagori Produk Daftar Produk Daftar Customer Daftar Transaksi Retur pembelian Daftar Konfirmasi Pembayaran Biaya Pengiriman Edit Harga Dolar Edit Account Sign Out - Klik daftar konfirmasi pembayaran menuju A 07 - - Klik edit harga dolar menuju A 09 Klik edit account menuju A10 - Klik sign out menuju A11 Harga Dolar save Harga Dolar Rp. 9000 Update Dolar Otomatis Gambar 3.36 Perancangan Antarmuka Edit Harga Dolar 11. Perancangan Antarmuka Edit Account A10 Nama Layar : A 01 Ukuran layar : 1024 x 768 Font : Calibri Warna Background : Putih - Klik daftar komentar menuju A02 - Klik daftar produk menuju A03 - Klik daftar customer menuju A 04 - Klik daftar transaksi menuju A05 - Klik retur pembelian menuju A06 - Klik biaya pengiriman menuju A 08 Edit Account Login SIDEBAR MENU Daftar Komentar Customer Perhatian Daftar Katagori Produk Daftar Produk Daftar Customer Daftar Transaksi Retur pembelian Daftar Konfirmasi Pembayaran Biaya Pengiriman Edit Harga Dolar Edit Account Sign Out - Klik daftar konfirmasi pembayaran menuju A07 - - Klik edit harga dolar menuju A 09 Klik edit account menuju A10 - Klik sign out menuju A11 Username save Berikut ini adalah untuk pengubahan LogIn kedalam halaman Admin. Password Re-Password Gambar 3.37 Perancangan Antarmuka Edit Account 12. Perancangan Antarmuka Sign out L01 Nama Layar : L 01 Ukuran layar : 1024 x 768 Font : Calibri Warna Background : Putih - Klik login menuju A 01 Nadiah Shop Username : - Password Login Administrator Gambar 3.38 Perancangan Antarmuka Sign Out

3.2.3.1.2 Perancangan Antarmuka Konsumen

1. Perancangan antarmuka setelah login berhasil B 01 Nama Layar : A 01 Ukuran layar : 1024 x 768 Font : Calibri Warna Background : Putih - Klik Product menuju B 02 - Klik Profil menuju B 03 - Klik Informasi menuju B 04 - Klik Akun Saya menuju B 05 - Klik Log Out menuju B 06 SEMUA PRODUK SIDEBAR MENU SEMUA PRODUK SHORT PANTS LONG PANTS SWEATERS T-SHIRTS JACKETS POLO SHIRTS . Product Profil Informasi Akun Saya Log Out Gambar 3.39 Perancangan Antarmuka Product 113

BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM

4.1 Implementasi Sistem

Tahap implementasi merupakan tahap penciptaan perangkat lunak, tahap kelanjutan dari kegiatan perancangan sistem. Tahap ini merupakan tahap dimana sistem siap untuk dioperasikan, yang terdiri dari penjelasan mengenai lingkungan implementasi, dan implementasi program.

4.1.1 Lingkungan Implementasi

Untuk mendukung aplikasi yang akan diterapkan pada lingkungan implementasi, maka dalam hal ini menggunakan perangkat keras dan perangkat lunak yang menunjang dalam pembangunan aplikasi E-Commerce berbasis web pada Nadiyah Shop.

4.1.1.1 Perangkat keras yang digunakan

Spesifikasi perangkat keras yang digunakan dalam pembangunan aplikasi E- Commerce berbasis web di Nadiyah Shop adalah tercantum pada tabel 4.1. Tabel 4.1 Perangkat Keras Yang Digunakan No Perangkat Keras Spesifikasi 1 Processor Intel Core 2 Duo 2.0 GHz 2 RAM 2048 MB 3 Harddisk 320 GB 4 Monitor Resolusi 1024 x 768 5 VGA NVIDIA 512 MB 6 Lan Card 10100 Mbps 7 Koneksi Internet 128 kbps 8 Printer HP 3970 4.1.1.2 Perangkat Lunak yang di gunakan Spesifikasi perangkat lunak yang digunakan dalam membangun aplikasi E- Commerce berbasis web di Nadiyah Shop adalah sebagai berikut: Tabel 4.2 Perangkat Lunak Yang Digunakan No Perangkat Lunak Keterangan 1 Sistem Operasi Windows 7 2 Web Browser Mozilla firefox 9.0.1, Google Chrome 5 dan Opera 10 3 Bahasa Pemrograman PHP 4 DBMS MySQL 5.0.27 5 Code Editor Adobe Dreamweaver CS4 6 DFD Modeler Microsoft Visio 2007 7 Web Server Wamp Server

4.2 Implementasi Database

Pembuatan database dilakukan dengan menggunakan aplikasi PHPMyOperator. Implementasi database dalam bahasa SQL adalah sebagai berikut: 1. Tabel admin CREATE TABLE IF NOT EXISTS `admin` `id_user` int11 NOT NULL AUTO_INCREMENT, `username` varchar20 NOT NULL, `password` varchar20 NOT NULL, PRIMARY KEY `id` ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ; 2. Tabel barang CREATE TABLE IF NOT EXISTS `barang` `id_barang` varchar5 NOT NULL, `nama_barang` varchar40 NOT NULL, `bahan` varchar40 NOT NULL, `warna` varchar15 DEFAULT NULL, `harga` int11 DEFAULT NULL, `keyword` varchar100 DEFAULT NULL, `id_katagori` int11 DEFAULT NULL, `diskon` int11 NOT NULL, PRIMARY KEY `id_barang`, KEY `id_katagori` `id_katagori` ENGINE=InnoDB DEFAULT CHARSET=latin1; ALTER TABLE `barang` ADD CONSTRAINT `barang_ibfk_1` FOREIGN KEY `id_katagori` REFERENCES `katagori` `id_katagori` ON UPDATE CASCADE; 3. Tabel barang_det CREATE TABLE IF NOT EXISTS `barang_det` `id_barang_det` varchar15 NOT NULL, `size` varchar20 NOT NULL, `berat` float NOT NULL, `stok` int11 NOT NULL, `id_barang` varchar5 NOT NULL, PRIMARY KEY `id_barang_det`, KEY `id_barang` `id_barang` ENGINE=InnoDB DEFAULT CHARSET=latin1; ALTER TABLE `barang_det` ADD CONSTRAINT `barang_det_ibfk_1` FOREIGN KEY `id_barang` REFERENCES `barang` `id_barang` ON DELETE CASCADE ON UPDATE CASCADE; 4. Tabel commen CREATE TABLE IF NOT EXISTS `commen` `id_commen` varchar20 NOT NULL, `commen` varchar500 NOT NULL, `tgl` datetime DEFAULT NULL, `id_konsumen` int11 DEFAULT NULL, PRIMARY KEY `id_commen`, KEY `id_konsumen` `id_konsumen`