BAB IV IMPLEMENTASI DAN PENGUJIAN

Transkripsi

1 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 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 GHz b. Media Storage Harddisk 160GB c. Memory (RAM) 2GB 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

2 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 pada url addressnya, sehingga muncul tampilan seperti pada gambar 4.1 Gambar 4.1 Tampilan phpmyadmin

3 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

4 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

5 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 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.

6 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 beserta password, Admin memasukkan username password.

7 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 :

8 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

9 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

10 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

11 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

12 91 e. Tampilan Contact us Gambar 4.17 Tampilan Contact us Keterangan : berisi nomor telepon yang bisa dihubungi, akun media sosial instagram f. Tampilan My account Gambar 4.18 Tampilan My account Berisi menu pilihan menu :

13 92 1. Tampilan Personal Data (gambar 4.13), berisi data pribadi pelanggan (first name, last name, date of birth, , 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

14 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

15 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.

16 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

17 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.

18 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.

19 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

20 99 Gambar 4.30 Tampilan Report Ms. Excel Gambar 4.31 Tampilan ouput to pdf

21 100 Gambar 4.32 Tampilan Report PDF i. Tampilan Informasi Order Ke Pelanggan Gambar 4.33 Tampilan Informasi Order Melalui

22 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 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 2 Halaman Klik menu Login Login login gin 3 Halaman Klik menu Register Register register gister 4 Halaman Klik menu Forgot password Forgot forgot password, isi Password rgotpassword pelanggan system akan mengirim password

23 102 baru untuk customer 5 Halaman Klik menu My Account My personal data Account er/account 6 Halaman Klik menu Personal data Personal personal data data er/account 7 Halaman Klik menu History/Confirmation history/con firmation er/confirm history confirmation 8 Halaman Klik menu Change Password Change change password password er/account2 9 Halaman About us Klik menu About Us out_us About us 10 Halaman product Klik menu Product t2 product 11 Halaman contact us Klik menu Contact Us ntact_us contact us

24 Skenario pengujian terhadap menu utama Admin No Item yang diuji Cara Pengujian Hasil Yang Diharapkan Hasil Pengujia n 1 Halaman menu Login Login login min/login 2 Halaman Klik menu Register Admin Register register admin, user Admin min/register, ada pilihan detail, edit admin bisa diedit delete dihapus 3 Halaman Klik menu Manage User Manage 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 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 pesanan yang berisi min/orders, ada pilihan view edit data informasi pesanan yang masuk, admin bisa view edit /ubah status

25 104 6 Halaman Klik menu report Order Report Order min/orders report order yang admin bisa memilih tanggal atau status pesanan yang ingin dicetak. 7 Halaman Klik menu report Stock Report report stock yang Stock min/stockreport admin bisa memilih tanggal atau mencari id produk yang ingin dicetak. 8 Halaman Klik menu report User Report report user yang User min/userreport admin bisa memilih tanggal atau mencari nama customer yang ingin dicetak. 9 Halaman Report Payment Klik report Payment min/paymentreport report payment yang admin bisa memilih tanggal atau status pembayaran yang ingin dicetak.