25
PEMBAHASAN
3.1. Analisa kebutuhan
Sistem penjualan secara online berbasis web dimana penjual dan pembeli tidak bertatap muka secara langsung. Calon pembeli melakukan pembelian melalui media browser. Berikut ini spesifiikasi kebutuhan (system requirement) dari sistem e-commerce.
Halaman Pembeli
1. Pembeli memilih barang yang akan dibeli dan ditambahkan kedalam keranjang belanja
2. Sistem melakukan kalkulasi jumlah barang dan total pembelian
3. Pembeli dapat login dengan account yang telah dibuat apabila belanja di lain hari
4. Pembeli bisa mengisi data registrasi account, pengiriman dan metode pembayaran barang.
5. Pembeli dapat melakukan konfirmasi pembayaran.
Halaman Administrator
1. Admin dapat mengelola data barang
2. Admin dapat mengelola data pelanggan
3. Admin dapat mengelola account
3.2 P erancangan Perangkat Lunak
3.2.1. Rancangan Antar Muka
Menjelaskan tampilan antar muka (interface) yang terdapat pada aplikasi
e-commerce untuk penjualan secara online.
A. Rancangan Antar Muka Login Administrator
Gambar III.1
Rancangan Antar Muka Login Administrator
B. Rancangan Antar Muka Beranda Admin
Gambar III.2
C. Rancangan Antar Muka Kategori
Gambar III.3
Rancangan Antar Muka Kategori
D. Rancangan Antar Muka Tambah Kategori
Gambar III.4
E. Rancangan Antar Muka Produk
Gambar III.5
Rancangan Antar Muka Produk
F. Rancangan Antar Muka Tambah Produk
Gambar III.6
G. Rancangan Antar Muka Member
Gambar III.7
Rancangan Antar Muka Member
H. Rancangan Antar Muka Transaksi
Gambar III.8
I. Rancangan Antar Muka Keluar
Gambar III.9
Rancangan Antar Muka Keluar
J. Rancangan Antar Muka Beranda
Gambar III.10
K. Rancangan Antar Muka Profil
Gambar III.11 Rancangan Antar Muka Profil
Gambar III.12
Rancangan Antar Muka Produk
M. Rancangan Antar Muka Cara Pembelian
Gambar III.13
Rancangan Antar Muka Cara Pembelian
Gambar III.14
Rancangan Antar Muka Testimonial
O. Rancangan Antar Muka Member Area
Gambar III.15
3.2.2 Rancangan Basis Data
Perancangan basis data menghasilkan pemetaan table-table yang digambarkan dengan Entity Relationship Diagram (ERD).
A. Entity Relationship Diagram (ERD)
Gambar III.17
B. Logical Relational Structure (LRS)
Gambar III.18
C. Spesifikasi File
Menjelaskan tentang file atau table yang terbentuk dari transformasi ERD (dan atau file-file penunjang untuk web). File-file ini tersimpan pada wos.sql dengan parameter-parameter sebagai berikut:
1. Spesifikasi File Member
Nama : Member
Akronim : Member
Fungsi : Untuk melihat siapa saja yang sudah
menjadi anggota kedalam website tersebut
Tipe File : File Master
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 255
Kunci Field : id_member
Tabel III.1
Spesifikasi File Member
No Elemen Data Nama Field Tipe Size Ket
1 Id Member Id_member Int 11 Primary Key
2 Nama Member Nama_member Varchar 30
3 Jenis Kelamin Jenis_kelamin Varchar 1
4 Email Email Varchar 100
5 Alamat Alamat Text
6 No Telp No_Telp Varchar 13
7 Password Password Varchar 100
8 Tgl Registrasi Tgl_registrasi Datetime
2. Spesifikasi File Kategori
Nama : Kategori
Akronim : Kategori
Fungsi : Untuk menentukan nama-nama kategori
produk
Tipe File : File Master
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 111
Kunci Field : id_kategori
Tabel III.2
Spesifikasi File Kategori
No Elemen Data Nama Field Tipe Size Ket
1 Id kategori Id_kategori Int 11 Primary Key
2 Kategori Kategori Varchar 100
3. Spesifikasi File Transaksi
Nama : Transaksi
Akronim : Transaksi
Fungsi : Untuk mengetahui waktu dan status
customer Saat order tersebut
Tipe File : File Transaksi
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 39
Kunci Field : id_Transaksi
Tabel III.3
Spesifikasi File Transaksi
No Elemen data Nama Field Tipe Size Ket
1 Transaksi Id_transaksi Int 11 Primary Key
2 Invoice Invoice Varchar 15
3 Id Member Id_member Int 11
4 Tgl Transaksi Tgl_transaksi Datetime
5 Status Status Varchar 2
4. Spesifikasi File Item
Nama : Item
Akronim : Item
Fungsi : Untuk mengetahui barang apa saja yang
telah dibeli oleh customer
Tipe File : File Transaksi
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 47
Kunci Field : id_item
Tabel III.4 Spesifikasi File Item
No Elemen Data Nama Field Tipe Size Ket
1 Item Id_item Int 11 Primary Key
2 Transaksi Id_transaksi Int 11
3 Member Jml_member Int 11
4 Produk Jml_produk Int 11
5 Jumlah Jumlah Int 3
5. Spesifikasi File Produk
Nama : Produk
Akronim : Produk
Fungsi : Untuk menentukan berbagai jenis produk
Tipe File : File Transaksi
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 147
Kunci Field : id_produk
Tabel III.5 Spesifikasi File Produk
No Elemen Data Nama Field Tipe Size Ket
1 Produk Id_produk Int 11 Primary key
2 Nama Produk Nama_produk Varchar 100
3 Deskripsi Deskripsi Text
4 Harga Harga Int 11
5 Stok Stok Int 11
6 Berat Berat Float
7 Tgl Masuk Tgl_Masuk Datetime
8 Gambar Gambar Text
8 Diskon Diskon int 3
8 Id Kategori Id_kategori int 11
3.2.3 Rancangan Struktur Navigasi
a. Struktur Navigasi Admin
Struktur navigasi admin digunakan untuk menggambarkan isi dari halaman admin. Navigasi yang digunakan adalah navigasi campuran (composite), agar terlihat bagaimana isi dan susunan dari halaman admin secara keseluruhan sehingga
Index Admin
Beranda Kategori Produk Member Transaksi Logout Login Admin
Tambah Kategori Tambah Produk
Edit Kategori Edit Produk
Hapus Kategori Hapus Produk
Hapus Member Transaksi Pending
Transaksi Proses
Transaksi Completed
Gambar III.19 Struktur Navigasi Admin
b. Struktur Navigasi User
Struktur navigasi halaman user digunakan untuk menggambarkan secara garis besar isi dari seluruh tampilan web. Dalam rancangan halaman ini menggunakan navigasi campuran (composite), terlihat akan mempermudah dalam menyusun rancangan sebuah tampilan halaman website.
Gambar III.20 Struktur Navigasi User
3.3. Implementasi dan Pengujian Unit 3.3.1. Implementasi
A. Implementasi rancangan antar muka pada aplikasi elearning berdasarkan
hasil rancangan antar muka.
1. Halaman Login Admin
Tampilan login adalah rancangan tampilan saat akan membuka admin, yaitu dengan memasukkan username dan password. Dibuat untuk mengubah data yang ada di website Click Shoes.
Gambar III.21 Halaman Login Admin
2. Halaman Beranda Admin
Halaman ini merupakan halaman utama pada ruang admin
Gambar III.22 Halaman Beranda Admin
3. Halaman Kategori
Halaman ini merupakan halaman untuk membuat penambahan kategori produk ke dalam website.
Gambar III.23 Gambar Kategori
4. Halaman Produk
Halaman ini merupakan halaman untuk menambahkan produk pada setiap
Gambar III.24 Halaman Produk
5. Halaman Member
Halaman ini merupakan halaman untuk melihat pelanggan yang sudah menjadi member.
Gambar III.25 Halaman Member
6. Halaman Transaksi
halaman ini merupakan halaman untuk melihat status transaksi yang sudah dilakukan oleh member.
Gambar III.26 Halaman Transaksi
7. Halaman Transaksi Completed
Rancangan halaman ini merupakan halaman untuk melihat Order barang yang sudah terkirim kepada customer.
Gambar III.27
Halaman Transaksi Completed
9. Halaman Beranda User
Halaman ini merupakan halaman yang berisi tentang produk produk terbaru dari
Click Shoes.
Gambar III.28 Halaman Beranda User
10. Halaman Produk
Halaman ini merupakan halaman yang berisi produk-produk yang dijual di
website ini
Gambar III.29 Halaman Produk Sepatu
11. Halaman Cara Pembelian
Halaman ini merupakan halaman untuk mengetahui cara-cara pembelian di
website tersebut
Gambar III.30 Halaman Cara Pembelian
12. Halaman Testimonial
Halaman ini merupakan halaman untuk memberikan komentar baik kritik ataupun saran dari pelanggan
Gambar III.31 Halaman Testimonial
13. Halaman Member Area
halaman ini merupakan halaman yang disediakan untuk login yang sudah menjadi member dan registrasi untuk menjadi member
Gambar III.32 Halaman Member Area
14. Halaman Cek Keranjang
halaman ini merupakan halaman untuk melihat barang apa saja dan totalan harga belanjaan yang harus dibayar oleh customer
Gambar III.33 Halaman Cek Keranjang
15. Halaman Order
Rancangan halaman ini merupakan halaman untuk melihat pesanan yang telah dipesan oleh customer.
Gambar III.34 Halaman Order
B. Spesifikasi Sistem Komputer
Berikut ini adalah spesifikasi perangkat keras dan perangkat lunak minimum yang dibutuhkan untuk mengimplementasikan aplikasi e-commerce untuk penjualan online.
1. Spesifikasi Perangkat Keras
Perangkat keras adalah seluruh komponen peralatan yang berbentuk suatu
sistem computer dan peralatan lainnya yang memungkinkan computer bisa melaksanakan tugasnya, termasuk juga untuk mesin-mesin pembantu penyimpanan data dan alat komunikasi lainnya. Pada perancangan website untuk penjualan Sepatu Sports, penulis menggunakan computer dengan spesifikasi seperti dibawah ini:
Microprocessor : Processor Intel Core i3
Memory Size : 2GB RAM
Monitor : LCD 14,5
Harddisk : 320 GB
Keyboard : 102 Keys
Mouse : Standard Mouse
2. Spesifikasi Perangkat Lunak 1. Server
Perangkat lunak (software) adalah komponen dalam data processing
system yang berupa program-program dan teknik lain untuk mengontrol sistem.
Fungsi software adalah untuk mengidentifikasi dan menyiapkan aplikasi program sehingga tata kerja seluruh peralatan komputer dapat terkontrol, serta membuat
pekerjaan lebih efisien. Adapun software yang digunakan selama perancangan website adalah
Sistem Operasi : Microsoft Windows 7
Program Aplikasi Design :Adobe Photoshop CS4, Adobe Dreamweaver
CS5
Bahasa Script : PHP
Web server : XAMPP
Web Pengunjung web : Mozilla Firefox / Google Chroom
Database : PHPMyAdmin
3.3.2. Pengujian Unit
Pengujian terhadap program yang dibuat menggunakan blackbox testing yang fokus terhadap proses masukan dan keluaran program.
A. Pengujian Terhadap Form Login Admin
Tabel III.10
Hasil Pengujian Black Box Testing Halaman Login Admin
No Skenario
Pengujian
Test case Hasil yang
diharapkan
Hasil Pengujian
Kesimpulan
1 User Name dan password tidak di isi kemudian klik login User Name: (kosong) Password: (kosong) Sistem akan menolak akses user dan menampilkan “Belum Diisi” Sesuai harapan Valid 2 Mengetikkan
User Name dan password kosong kemudian klik tombol login User Name: (administrat or) Password: (kosong) Sistem akan menolak akses user dan menampilkan“Bel um Diisi” Sesuai harapan Valid
3 User Name tidak diisi (kosong) dan password diisi kemudian klik tombol login User Name: (kosong) Password: (123456789 0) Sistem akan menolak akses user dan menampilkan “Belum Diisi” Sesuai harapan Valid 4 Mengetikkan salah satu kondisi salah pada User Name atau password kemudian klik tombol login User id: (administrat or) Password: (12345678) salah Sistem akan menolak akses user dan menampilkan ”Login Error” Sesuai harapan Valid 5 Mengetikkan
User Name dan
password dengan data yang benar kemudian klik tombol login User Name: (administrat or) Password: (123456789 0) Sistem akan menerima akses login dan kemudian langsung menamplikan menu utama Sesuai harapan Valid
B. Pengujian Terhadap Form Login User
Tabel III.11
Hasil Pengujian Black Box Testing Halaman Login User
No Skenario
Pengujian
Test case Hasil yang
diharapkan
Hasil Pengujian
Kesimpulan
1 User Name dan password tidak di isi kemudian klik login User Name: (kosong) Password: (kosong) Sistem akan menolak akses user dan menampilkan ”Belum Diisi” Sesuai harapan Valid 2 Mengetikkan
User Name dan password kosong kemudian klik tombol login User Name: (ramadhanki ki0304@gma il.com) Password: (kosong) Sistem akan menolak akses user dan menampilkan”Bel um Diisi” Sesuai harapan Valid
3 User Name tidak diisi (kosong) dan password diisi kemudian klik tombol login User Name: (kosong) Password: (123456) Sistem akan menolak akses user dan menampilkan ”Belum Diisi” Sesuai harapan Valid 4 Mengetikkan salah satu kondisi salah pada User Name atau password kemudian klik tombol login User id: (ramadhanki ki0304@gma il.com) Password: (12345) salah Sistem akan menolak akses user dan menampilkan ”Login Error” Sesuai harapan Valid 5 Mengetikkan
User Name dan
password dengan data yang benar kemudian klik tombol login User Name: (ramadhanki ki0304@gma il.com) Password: (123456) Sistem akan menerima akses login dan kemudian langsung menamplikan menu utama website Sesuai harapan Valid
