BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1 Implementasi Setelah dilakukan analisa perancangan secara rinci maka tahap selanjutnya adalah sistem siap di implementasikan. Implementasi merupakan tahap membuat aplikasi hingga dapat siap untuk digunakan. Penulisan kode program merupakan kegiatan terbesar dalam tahap implementasi aplikasi. 4.1.1 Spesifikasi Perangkat Hardware Dalam menunjang sistem ini maka diperlukan sebuah perangkat keras yang digunakan dalam pembuatan aplikasi antara lain : a. Processor Intel Pentium (R) Dual Core CPU E5200 @2.50 GHz b. Media Storage Harddisk 160GB c. Memory (RAM) 2GB 4.1.2 Spesifikasi Perangkat Lunak Adapun dari segi perangkat lumak untuk mendukung dalam pembuatan aplikasi antara lain : a. Sistem Operasi Microsoft Windows XP Service Pack 3 b. PHPMyAdmin c. MySQL, sebagai database d. Framework CodeIgniter e. Dreamweaver CS 5 Dalam pengujian aplikasi penulis menggunakan 2 web browser, Google Chrome Mozilla. 80
81 4.1.3 Implementasi basis data Pada pembuatan aplikasi penulis menggunakan Basis data MySQL. Perangkat lunak yang digunakan dalam pengolahan basis data MySQL adalah phpmyadmin yang merupakan salah satu paket perangkat lunak yang ada pada XAMPP. Berikut merupakan langkah-langkah dalam implementasi basis data : a. Pertama buka browser kemudian ketikkan http://localhost/phpmyadmin pada url addressnya, sehingga muncul tampilan seperti pada gambar 4.1 Gambar 4.1 Tampilan phpmyadmin
82 b. Pada menu Database, isi kotak Create Database. Penulis menggunakan nama database ciaobell_db, jika sudah terisi kemudian tekan Create Gambar 4.2 Tampilan membuat basis data c. Database berhasil dibuat, akan terlihat pada sidebar dengan nama database yang sudah diketik di kolom Create Database Gambar 4.3 Tampilan basis data sukses dibuat
83 d. Masuk ke dalam database yang telah dibuat, klik Create Table yang ada pada sidebar kemudian isi kotak (Table Name) kemudian isi juga kolom name, type, lenght/values sebagainya dengan perancangan basis data yang telah dibuat kemudian. Jika sudah selesai klik save untuk menyimpan. Gambar 4.4 Tampilan membuat tabel atribut-atributnya
84 e. Buat tabel-tabel lainnya yang dibutuhkan, pada gambar 4.5 merupakan tabeltabel yang ada digunakan pada aplikasi. Gambar 4.5 Tampilan tabel product yang digunakan pada aplikasi 4.1.4 Implementasi antar muka Antar muka yang telah dirancang kemudian diimplementasikan menggunakan bahasa pemrograman PHP yang terintergrasi dengan CSS Jquery. CSS Jquery digunakan oleh penulis untuk memformat tampilan halaman web sehingga tampilan itu menjadi lebih menarik gan keinginan. File-file tersebut selanjutnya dapat diakses akan menjadi penghubung antara pengguna dengan sistem. Untuk mempermudah menjelaskan bentuk dari implementasi antar muka berikut ini adalah beberapa antar muka aplikasi yang telah dibuat.
85 4.1.4.1 Tampilan Form Login Gambar 4.6 Tampilan login pelanggan Gambar 4.7 Tampilan login admin Keterangan: tampilan login antara pelanggan admin dibedakan. Pelanggan memasukkan alamat email beserta password, Admin memasukkan username password.
86 4.1.4.2 Tampilan Form Menu-menu aplikasi Gambar 4.8 Tampilan menu utama pelanggan Gambar 4.9 Tampilan menu utama admin Keterangan : tampilan utama antara pelanggan admin. Pelanggan dapat melihat menu pilihan :
87 a. Tampilan Menu About us Gambar 4.10 Tampilan About us Keterangan : berisi tentang penjelasan nama ciaobella b. Tampilan Menu Product Gambar 4.11 Tampilan Product
88 Keterangan : berisi tentang produk yang dijual dalam website, pelanggan klik button Add to cart untuk melanjutkan proses pembelian. c. Tampilan Checkout Gambar 4.12 Tampilan Checkout Keterangan : berisi data produk yang akan dibeli oleh pelanggan
89 d. Tampilan Pembayaran Gambar 4.13 Tampilan Pembayaran Keterangan : ada 2 metode yang ditampilkan, Pembayaran dengan metode transfer (melalui Bank : BCA, Mandiri, BNI) metode pembayaran kartu kredit (Doku Myshortcart Payment) Gambar 4.14 Tampilan Pembayaran transfer
90 Gambar 4.15 Tampilan Pembayaran kartu kredit Keterangan : pada gambar 4.14 tampilan pada metode pembayaran transfer antar bank, pilih diantara ketiga pilihan Bank yang akan di transfer lalu tekan Confirm. Di gambar 4.15 jika pelanggan memilih Visa/Mastercard lalu akan tampil pesan total belanja button untuk lanjut ke halaman Doku Myshortcart (seperti pada gambar 4.16 dibawah ini). Gambar 4.16 Tampilan Doku Myshortcart
91 e. Tampilan Contact us Gambar 4.17 Tampilan Contact us Keterangan : berisi nomor telepon yang bisa dihubungi, email akun media sosial instagram f. Tampilan My account Gambar 4.18 Tampilan My account Berisi menu pilihan menu :
92 1. Tampilan Personal Data (gambar 4.13), berisi data pribadi pelanggan (first name, last name, date of birth, email, phone, address, zip code). 2. Tampilan History Confirmation, berisi tampilan data history belanja pelanggan juga konfirmasi pembayaran pesanan. Gambar 4.19 Tampilan history/confirmation 3. Tampilan Change password, jika pelanggan ingin mengganti password login. Gambar 4.20 Tampilan change password 4. Signout, jika pelanggan ingin keluar dari account pada aplikasi
93 Untuk admin dapat melihat menu pilihan : a. Tampilan Register Admin Gambar 4.21 Tampilan register admin Keterangan : berisi tentang informasi user admin, ada pilihan edit,delete change password. b. Tampilan Manage User Gambar 4.22 Tampilan manage user
94 Keterangan : berisi data pelanggan-pelanggan yang terdaftar dalam aplikasi, admin bisa mengubah menghapus. c. Tampilan Manage Stock Gambar 4.23 Tampilan manage stock Keterangan : berisi data produk yang akan ditampilkan pada menu product, admin bisa melihat, merubah atau menghapus.
95 d. Tampilan Manage Order Gambar 4.24 Tampilan manage stock Keterangan : berisi data pesanan pelanggan dengan infromasi (Order No, Order Date, Customer, Status Actions). Button Actions untuk admin bisa melihat merubah pesanan. e. Tampilan Report Order Gambar 4.25 Tampilan report order
96 Keterangan : memilih tanggal berikut status yang dipilih yang akan dicetak, dengan keluaran laporan berbentuk microsoft excel. f. Tampilan Report Stock Gambar 4.26 Tampilan report stock Keterangan : memilih tanggal berikut button search yang digunakan untuk memilih nomor produk yang akan dicetak dengan keluaran laporan berbentuk microsoft excel.
97 g. Tampilan Report User Gambar 4.27 Tampilan report user Keterangan : memilih tanggal berikut button search yang digunakan untuk memilih nama pelanggan yang akan dicetak dengan keluaran laporan berbentuk microsoft excel.
98 h. Tampilan Report Payment Gambar 4.28 Tampilan report user Keterangan : memilih tanggal berikut status yang dipilih yang akan dicetak, dengan keluaran laporan berbentuk microsoft excel. Gambar 4.29 Tampilan ouput to Ms. Excel
99 Gambar 4.30 Tampilan Report Ms. Excel Gambar 4.31 Tampilan ouput to pdf
100 Gambar 4.32 Tampilan Report PDF i. Tampilan Informasi Order Ke Pelanggan Gambar 4.33 Tampilan Informasi Order Melalui Email
101 4.2 Pengujian Pada tahap ini merupakan kelanjutan dari tahap implementasi yaitu melakukan pengujian terhadap aplikasi yang dibuat. Tahap ini bertujuan untuk mengetahui apakah aplikasi yang dibuat berjalan dengan baik dengan apa yang telah diterapkan pada tahap perancangan sebelumnya. Dalam pengujiannya penulis menggunakan metode black box. Metode black box digunakan untuk menentukan apakah aplikasi yang dibuat memenuhi kebutuhan yang disebutkan dalam spesifikasi. Pada blackbox testing, cara pengujian dilakukan dengan menjalankan atau mengeksekusi unit atau modul kemudian diamati apakah hasil dari unit atau modul itu sesaui dengan proses bisnis yang diinginkan. 4.2.1 Skenario pengujian terhadap menu utama Pelanggan No Item yang diuji Cara Pengujian Hasil Yang Diharapkan Hasil Pengujia n 1 Halaman Dari website, masukkan halaman Website address aplikasi : utama website https://ciaobellasnack.com/index.php/ 2 Halaman Klik menu Login Login https://ciaobellasnack.com/index.php/lo login gin 3 Halaman Klik menu Register Register https://ciaobellasnack.com/index.php/re register gister 4 Halaman Klik menu Forgot password Forgot https://ciaobellasnack.com/index.php/fo forgot password, isi Password rgotpassword email pelanggan system akan mengirim password
102 baru untuk customer 5 Halaman Klik menu My Account My https://ciaobellasnack.com/index.php/us personal data Account er/account 6 Halaman Klik menu Personal data Personal https://ciaobellasnack.com/index.php/us personal data data er/account 7 Halaman Klik menu History/Confirmation history/con firmation https://ciaobellasnack.com/index.php/us er/confirm history confirmation 8 Halaman Klik menu Change Password Change https://ciaobellasnack.com/index.php/us change password password er/account2 9 Halaman About us Klik menu About Us https://ciaobellasnack.com/index.php/ab out_us About us 10 Halaman product Klik menu Product https://ciaobellasnack.com/index.php/car t2 product 11 Halaman contact us Klik menu Contact Us https://ciaobellasnack.com/index.php/co ntact_us contact us
103 4.2.2 Skenario pengujian terhadap menu utama Admin No Item yang diuji Cara Pengujian Hasil Yang Diharapkan Hasil Pengujia n 1 Halaman menu Login Login https://ciaobellasnack.com/index.php/ad login min/login 2 Halaman Klik menu Register Admin Register https://ciaobellasnack.com/index.php/ad register admin, user Admin min/register, ada pilihan detail, edit admin bisa diedit delete dihapus 3 Halaman Klik menu Manage User Manage https://ciaobellasnack.com/index.php/ad manage user, admin User min/customers, ada pilihan detail, edit bisa mengedit delete menghapus pelaggan yang terdaftar dalam aplikasi. 4 Halaman Klik menu Stock Stock https://ciaobellasnack.com/index.php/ad product berisi data min/products,ada pilihan detail produk, admin tambah,view,edit delete. bisa menambahkan, melihat, mengedit menghapus 5 Halaman Klik menu Order Order https://ciaobellasnack.com/index.php/ad pesanan yang berisi min/orders, ada pilihan view edit data informasi pesanan yang masuk, admin bisa view edit /ubah status
104 6 Halaman Klik menu report Order Report Order https://ciaobellasnack.com/index.php/ad min/orders report order yang admin bisa memilih tanggal atau status pesanan yang ingin dicetak. 7 Halaman Klik menu report Stock Report https://ciaobellasnack.com/index.php/ad report stock yang Stock min/stockreport admin bisa memilih tanggal atau mencari id produk yang ingin dicetak. 8 Halaman Klik menu report User Report https://ciaobellasnack.com/index.php/ad report user yang User min/userreport admin bisa memilih tanggal atau mencari nama customer yang ingin dicetak. 9 Halaman Report Payment Klik report Payment https://ciaobellasnack.com/index.php/ad min/paymentreport report payment yang admin bisa memilih tanggal atau status pembayaran yang ingin dicetak.