20 3.1 Analisa Kebutuhan
Sebuah rancangan website diperlukan ketelitian agar rancangan website
dapat dimengerti oleh siapa saja yang mengaksesnya. Maka dari itu harus bisa meninjau permasalahan yang ada sampai tidak ada.
Media internet merupakan salah satu cara yang sangat efektif dalam
memasarkan suatu produk. Apapun dapat diperoleh di internet tak terkecuali
berjualan. Dengan memanfaatkan kemajuan teknologi ini, penjualan sepatu ini
memasarkan produk ada ke dunia internet agar para customer dapat
mengaksesnya dimanapun dan kapanpun.
Penulis mencoba membuat suatu rancangan website penjualan yang
sederhana. Dimana dapat memberikan informasi tentang penjualan sepatu dan produk seta tata cara pembelian yang akan dilakukan.
3.2 Perancangan Perangkat Lunak 3.2.1. Rancangan Antar Muka
1. Rancangan Antar Muka Login Admin
Rancangan tampilan pada saat akan membuka form admin. Dengan
memasukan username dan password yang bener maka admin akan masuk ke
dalam ruang kerja admin. Rancangan Tampilan sebagai berikut.
Gambar III.1.
Rancangan Antar Muka Login Admin
Username
Password
Header
GAMBAR III.2.
Rancangan Antarmuka Home Admin 3. Rancangan Kategori Produk
GAMBAR III.3. Rancangan Kategori Produk
Logout Beranda Kategori i Produk Transaksi Pembeli Karyawan Logout No Jenis Kode Prod uk Nama Produk Jumbe l Tolbay Aksi Logout
NO Nama Kategori Aksi
Logout Karyawan Pembeli Transaksi Produk Kategori produk Beranda
4. Rancangan Antarmuka index Website
GAMBAR III.4.
Rancangan Antarmuka Index Website HEADER Menu LOGO FOOTER KATEGORI PRODUK PRODUK
5. Rancangan Antarmuka Daftar PembeliBaru
GAMBAR III.5.
Rancangan Antarmuka Daftar Pembeli Baru HEADER MENU LOGO NAMA No.Telepon Alamat Login Informasi Email Passwod
Keranjang Belanja Tagihan Daftar Masuk
6. Rancangan Antarmuka Keranjang Belanja
GAMBAR III.6.
Rancangan Antarmuka Keranjang Belanja HEADER
MENU
LOGO
Keranjang Belanja
NO Nama Produk Harga Produk Jumlah Beli Subtotal
Checkout Belanja Lagi
Produk Terbaru
IMAGES IMAGES IMAGES
FOOTER
3.2.2. Rancangan Basis data
1. Entity Relationship Diagram ( ERD )
pembeli nama id_pembeli no_telp alamat email password konfirmasi id_konfirm id_pembeli id_transaksi tanggal bukti transaksi tgl_transaksi id_jenis id_transaksi id_pembeli id_admin status melakukan melakukan menambahkan detail_transaksi id_transaksi id_produk jumlah_beli sub_total
menambahkan jenis id_jenis jenis memilih produk gambar id_produk harga id_kategori nama_produk keterangan stok kode_produk admin username password nama jenis blokir id_admin kategori_produk id_kategori kategori gambar memilih memilih menambahkan 1 M 1 M 1 M 1 M 1 M M 1 1 M 1 M GAMBAR III.7.
2. Logical Relationship Structure ( LRS ) pembeli konfirmasi transaksi jenis detail_transaksi admin produk kategori_produk id_pembeli PK nama no_telp alamat email password id_konfirm PK id_pembeli id_transaksi tanggal bukti id_transaksi PK id_jenis tgl_transaksi id_pembeli id_admin status id_jenis PK jenis id_transaksi id_produk jumlah_beli sub_total id_admin PK username password nama jenis blokir id_produk PK id_kategori nama_produk gambar harga keterangan stok id_kategori PK kategori gambar 1 M 1 M 1 M 1 M 1 M 1 M 1 1 M M kode_produk GAMBAR III.8.
3. Spesifikasi File
Dalam web e-commerce Toko Sepatu Futsal ini, terdapat satu buah
database yang bernama “futsal” dan memiliki delapan tabel, yaitu :
a. Spesifikasi file admin
Nama File : Admin
Akronim : admin
Fungsi : untuk menyimpan data admin
Tipe File : File Master
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 170 byte
Kunci Field : id_admin
Software : Phpmyadmin
Tabel III.1. Spesifikasi File admin
NO Element Data Nama Field Type Size Ket
1 Id admin id_admin Int 11 Primary Key
2 Username username Varchar 50
3 Passwrod password Varchar 50
4 Nama nama Varchar 50
5 Jenis jenis Tinyint 4
6 Blokir blokir Tinyint 5
b. Spesifikasi File pembeli
Nama File : Data Pembeli
Fungsi : untuk menyimpan data pembeli
Tipe File : File Master
Organisasi File : Indexed Sequential
Akses File : Random
Media : Harddisk
Panjang Record : 356 byte
Kunci Field : id_pembeli
Software : PhpMyadmin
Tabel III.2. Spesifikasi File pembeli
No Element Data Nama Field Type Size Ket
1 Id Pembeli id_pembeli Int 11 Primary Key
2 Nama nama Varchar 50
3 No_telp no_telp Varchar 20
4 Alamat alamat Varchar 150
5 Email email Varchar 50
6 Password password Varchar 75
c. Spesifikasi File kategori_produk
Nama File : Data Kategori Produk
Akronim : kategori_produk
Fungsi : untuk menyimpan data kategori
Tipe File : File Master
Akses File : Random
Media : Harddisk
Panjang Record : 141 byte
Kunci Field : id_kategori
Software : PhpMyadmin
Tabel III.3.
Spesifikasi File kategori_produk
No Element Data Nama Field Type Size Ket
1 Id Kategori id_kategori Int 11 Primary Key
2 kategori kategori Varchar 30
3 Gambar gambar Varchar 100
d. Spesifikasi File produk
Nama File :Data Produk
Akronim : produk
Fungsi : untuk menyimpan data produk
Tipe File : File Master
Organisasi File : Indexed Sequential
Media : Harddisk
Panjang Record : 238 byte
Kunci Field : id_produk
Software : PhpMyadmin
Tabel III.4. Spesifikasi File produk
No Element Data Nama field Type Size Ket
1 Id produ id_produk int 11 Primary Key
2 Kode_produk kode_produk Varchar 10
3 Id_kategori id_kategori int 11
4 Nama_produk nama_produk Varchar 75
5 Gambar gambar Varchar 120
6 Harga harga Double -
7 Keterangan keteranagan Text -
8 Stok stok Int 11
e. Spesifikasi File transaksi
Nama File : Data Transaksi
Akronim : transaksi
Fungsi : untuk menyimpan data transaksi
Tipe File : File Master
Organisasi File : Indexed Sequential
Media : Harddisk
Panjang Record : 55byte
Kunci Field : id_transaksi
Software : PhpMyadmin
Tabel III.5.
Spesifikasi File transaksi
No Element Data Nama Field Type Size Ket
1 Id transaksi id_transaksi Int 11 Primary Key
2 Id jenis id_jenis Int 11
3 Tgl_transaksi tgl_transaksi datetime -
4 Id pembeli id_pembeli Int 11
5 Id admin id_admin Int 11
6 Status status Int 11
f. Spesifikasi File jenis
Nama File :Data Jenis
Akronim : jenis
Fungsi : untuk menyimpan jenis transaksi
Tipe file : File Master
Akses File : Random
Media : Harddisk
Panjang Record : 46 byte
Kunci Field : id_jenis
Software : PhpMyadmin
Tabel III.6. Spesifikasi File jenis
No Element Data Nama Field Type Size Ket
1 Id jenis id_jenis Int 11 Primary Key
2 Jenis jenis Varchar 35
g. Spesifikasi File detail_transaksi
Nama File : Data Detail_Transaksi
Akronim : detail_transaksi
Fungsi : untuk menyimpan data transaksi secara rinci
Tipe File : File Master
Organisasi : Indexed Sequential
Media : Harddisk
Kunci Field : -
Software : PhpMyadmin
Tabel III.7.
Spesifikasi File detail_transaksi
h. Spesifikasi File konfirmasi
Nama File : Data Konfirmasi
Akronim : konfirmasi
Fungsi : untuk menyimpan data konfirmasi
transaksi
Tipe File : File Master
Organisasi File : Indexed Sequential
Akses File : Random
No Element Data Nama Field Type Size Ket
1 Id transaksi id_transaksi Int 11
2 Id produk id_produk Int 11
3 Jumlah_beli jumlah_beli Double -
Media : Harddisk
Panjang Record : 68 byte
Kunci Field : id_konfirm
Software : PhpMyadmin
Tabel III.8.
Spesifikasi File konfirmasi
No Element Data Nama Field Type Size Ket
1 Id konfirm id_konfirm Int 11 Primary Key
2 Id pembeli id_pembeli Int 11
3 Id transaksi id_transaksi Int 11
4 Tanggal tanggal datetime -
5 Bukti bukti varchar 35
3.2.3. Rancangan Struktur Navigasi
Stuktur navigasi Website digunakan untuk menggambarkan secara garis
besar isi dari seluruh website, serta hubungan antara isi-isi dari website tersebut.
Melalu struktur navigasi dapat terlihat bagaimana isi dan susunan dari sebuah
website secara menyeluruh. Pembuatan struktur navigasi ini akan membantu
ketika merancang seluruh halaman website. Adapun susunan struktur navigasi
Login
Halaman Admin
Halaman Utama
Informasi Terkini
Data Kategori
Tambah Kategori View Kategori
Data Produk
Tambah Produk View Produk
Data Transaksi
Penjualan Repeat Order
View Transaksi Penjualan
View Data Repeat Order
Tambah Data Repeat Order
Data Pembeli
View Pembeli
Data Karyawan
View Data Karyawan Tamabah Karyawan Logout
Gambar III.9.
Struktur Navigasi Halaman admin
B. Struktur Navigasi Halaman Member Login
Index
Home Profil Toko How To Order and Buy Keranjang Belanja Kategori Brand Logout Produk Terbaru
Produk Detail Pilih Produk Lihat Produk Beli Belanja lagi
Tampil Keranjang Belanja Pilih Produk Selesai Hitung Konfirmasi Pembayaran Konfirmasi Bukti Transaksi
League Specs Nike Adidas
Struktur Navigasi Halaman Member
C. Struktur Navigasi Halaman Pengunjung
Index
Home Profil How To Order and Buy
Kategori
Produk Sign Up
League Specs Nike Adidas
Chart Detail Chart Detail Chart Detail Chart Detail Informasi Halaman Home Informasi Halaman Profil Toko Informasi halaman cara pemesanan Tampilan Halaman Login dan daftar Daftar Login Produk Detail Gambar III.11.
3.3. Implementasi dan Pengujian Unit
Tahap implementasi sistem merupakan tahap penerapan sistem agar dapat dioperasikan secara optimal sesuai kebutuhan. Implementasi antarmuka yang dibuat pada tahap perancangan, diimplementasi menjadi bentuk halaman
web yang dibangun dengan menggunakan perangkat lunak yang dijelaskan pada
implementasi program.
3.3.1. Implementasi
1. Implementasi Rancangan Antarmuka
Berikut ini adalah tampilan halaman-halaman dari website Penjualan
Sepatu futsal diantaranya yaitu :
a. Halaman Login Admin
Administrator harus melakukan login terlebih dahulu untuk
menggunakan modul-modul yang tersedia, jika login berhasil maka
menu-menu yang sesuai dengan kategori user tersebut akan ditampilkan.
Gambar III.12. Tampilan Login Admin
b. Halaman Home Admin
Gambar III.13. Tampilan Home Admin c. Halaman Link Karyawan
Digunakan untuk menambahkan Admin dan Password baru, dapat digunakan untuk mengubah password atau menghapus data karyawan dan password.
Gambar III.14. Tampilan Link Karyawan d. Halaman Link Produk Admin
Digunakan untuk menambahkan, merubah, dan menghapus data produk.
Gambar III.15. Tampilan Produk Admin
e. Halaman Link Kategori Produk Admin
Digunakan untuk menambahkan, merubah, dan menghapus data kategori produk
Gambar III.16.
Tampilan Kategori Produk Admin f. Halaman Link Data Transaksi Penjualan Admin
Gambar III.17.
g. Halaman Index Website
Gambar III.18. Tampilan Index Website h. Halaman Link Pendaftaran Pembeli Baru
Digunakan untuk menambahkan pembeli baru jika ingin membeli
Gambar III.19.
Tampilan Pendaftaran Pembeli Baru
i. Halaman Link Keranjang Belanja
Digunakan untuk pemesanan produk
Gambar III.20.
Tampilan Keranjang Belanja j. Halaman Link Konfirmasi Pembayaran
Gambar III.21.
Tampilan Konfirmasi Belanja
2. Spesifikasi Sistem Komputer
Berikut ini adalah spesifikasi perangkat keras dan perangkat lunak
minimun yang dibutuhkan untuk mengimplementasi aplikasi e-commerce.
A. Spesifikasi Hardware
Hardaware atau perangkat keras adalah peralatan di sistem komputer yang secara fisik dapat terlihat dan dapat disentuh.
Adapun perangkat keras minimal yang diperlukan oleh server sebagai
berikut : 1. Laptop a. Pentium Dual-Core b. Ram 2GB c. Hard Disk 465GB 2. Mouse
4. Monitor dengan resolusi layar maximum 1366x768
5. Koneksi internet dengan kecepatan 10 Mbps
Adapun perangkat keras minimal yang diperlukan oleh client sebagai
berikut :
1. CPU
a. Pentium Dual – Core
b. Ram 2GB
c. Hard Disk 350 GB
2. Mouse
3. Keyboard
4. Monitor SVGA 15”
5. Koneksi internet dengan kecepatan 10 Mbps
B. Spesifikasi Software
Software atau perangkat lunak merupakan salah satu bagian penting lain
yang digunakan dalam pengelolahan data atau menjalankan suatu
program.
Adapun perangkat lunak minimal yang diperlukan oleh server sebagai
berikut : 1. Server
a. Sistem operasi yang umum digunakan seperti: Microsoft
Windows10 Profesional
b. Aplikasi bundle web server seperti: Xampp, yang terdiri dari
komponen, diantaranya:
(2) Aplikasi PHP Server v5.6.31
(3) Aplikasi MySQL Server v5.6.31
(4) Aplikasi phpMyAdmin v2.11.7
c. Aplikasi Web Browser seperti Mozilla Firefox, Google Chrome,
Internet Explorer.
2. Client
a. Sistem operasi yang umum digunakan seperti: Microsoft Windows7
Profesional
b. Aplikasi web browser seperti Mozilla Firefox, Google Chrome,
Internet Explorer.
3.3.2. Pengujian Unit
A. Pengujian Form Login Pembeli
Tabel III.9.
Hasil Pengujian Black Box Testing Halaman Login Pembeli
No Skenario Pengujian Test Case
Hasil yang Diharapkan Hasil Pengujian Kesimpulan 1 Username dan
Password tidak diisi kemudian klik tombol login Username: (kosong) Password: (kosong) Sistem akan menolak akses member dan menampilkan Sesuai Harapan Valid
Gagal Silahkan Ulang Kembali”
2 Mengetikkan
Username terisi dan
untuk Password
tidak diisi atau kosong kemudian
klik tombol login
Username : Ok Password : (kosong) Sistem akan menolak akses member dan menampilkan “ Login Gagal Silahkan Ulang Kembali” Sesuai Harapan Valid 3 Username tidak diisi atau kosong sementara untuk Passworddiisi kemudian klik tombol login Username: (kosong) Password: Ok Sistem akan menolak akses member dan menampilkan “ Login Gagal Silahkan Ulang Sesuai Harapan Valid
Kembali”
4 Mengetikkan salah
satu kondisi salah
pada username atau
Password kemudian
klik tombol login
Username: Ok (benar) Password: Ok (salah) Sistem akan menolak akses member dan menampilkan “ Login Gagal Silahkan Ulang Kembali” Sesuai Harapan Valid 5 Mengetikkan Usernamedan Password
dengan data yang benar kemudian
klik tombol login
Username : Ok (benar) Password: Ok (benar) Sistem menerima akses login dan kemudian langsung menampilkan halaman member. Sesuai Harapan Valid
B. Pengujian Form Daftar Pembeli Baru Tabel III.10.
No Skenario Pengujian Test Case
Diharapkan Pengujian n
1 Nama,
Email,Telpon,Alama t,,Password tidak diisi kemudian klik tombol daftar Nama:(kos ong) Email: (kosong) Telpon: (kosong) Alamat: (kosong) Password: (kosong) Sistem akan menolak akses daftar Member dan menampilkan “Silahkan isi semua form yang telah disediakan dengan benar” Sesuai Harapan Valid 2 Mengetikan Nama terisi, sementara
untuk Email tidak
diisi atau kosong, untuk Telpon tidak diisi atau kosong, untuk Alamat tidak diisi atau kosong, untuk tidak diisi atau kosong, dan
untuk Password Username :Ok Kata Sandi: (kosong) Nama Lengkap: (kosong) Alamat: (kosong) No Sistem akan menolak akses daftar Member dan menampilkan “Silahkan isi semua form yang telah disediakan dengan benar” Sesuai Harapan Valid
tidak diisi atau kosong kemudian klik tombol daftar
Telp/HP: (kosong)
Email: (kosong)
3 Nama tidak diisi
atau kosong, sementara untuk
Email diisi, untuk Telpon tidak diisi atau kosong, untuk Alamat tidak diisi atau kosong, untuk tidak diisi atau kosong, dan untuk
Password tidak diisi atau kosong kemudian klik tombol daftar Nama:(kos ong) Email: Ok Telp: (kosong) Alamat: (kosong) Password: (kosong) Sistem akan menolak akses daftar Member dan menampilkan“ Silahkan isi semua form yang telah disediakan dengan benar” Sesuai Harapan Valid
4 Nama tidak diisi
atau kosong, untuk
Email tidak diisi atau kosong, sementara untuk
Telpondiisi, untuk
Nama:(kos ong) Email: (kosong) Telpon: Ok Sistem akan menolak akses daftar Member dan menampilkan
atau kosong, untuk tidak diisi atau kosong, dan untuk
Email tidak diisi atau kosong kemudian klik tombol daftar (kosong) : Password: (kosong) yang telah disediakan dengan benar”
5 Nama tidak diisi
atau kosong, untuk
Email tidak diisi atau kosong, untuk Telpon tidak diisi atau kosong, sementara untuk
Alamat diisi, untuk tidak diisi atau kosong, dan untuk
Password tidak diisi atau kosong kemudian klik tombol daftar Nama:(kos ong) Email: (kosong) Nama Lengkap: (kosong) Alamat: Ok Password: (kosong) Sistem akan menolak akses daftar pelanggandan menampilkan“ Silahkan isi semua form yang telah disediakan dengan benar” Sesuai Harapan Valid
6 Nama tidak diisi
atau kosong, untuk
Nama:(kos ong)
Sistem akan
Email tidak diisi atau kosong, untuk Telpon tidak diisi atau kosong, untuk Alamat tidak diisi atau kosong, sementara untuk
diisi, dan untuk
Password tidak diisi atau kosong kemudian klik tombol daftar Email: (kosong) Telpon: (kosong) Alamat: (kosong) Password: (kosong) daftar pelanggandan menampilkan “Silahkan isi semua form yang telah disediakan dengan benar” Harapan
7 Nama tidak diisi
atau kosong, untuk
Email tidak diisi atau kosong, untuk Telpon tidak diisi atau kosong, untuk Alamat tidak diisi atau kosong, untuk tidak diisi atau kosong, sementara
untuk Password
diisi kemudian klik
Nama:(kos ong) Email: (kosong) Telpon: (kosong) Alamat: (kosong) : (kosong) Password: Ok Sistem akan menolak akses daftar pelanggandan menampilkan “Silahkan isi semua form yang telah disediakan dengan benar” Sesuai Harapan Valid
8 Mengetikan Nama, Email, Telpon, Alamat,, Password
dengan data yang benar kemudian klik tombol daftar
Nama:Ok (benar) Email: Ok (benar) Telpon: Ok (benar) Alamat: Ok (benar) Password: Ok (benar) Sistem menerima akses daftar pelanggandan kemudian langsung menampilkan login pelanggan. Sesuai Harapan Valid
C. Pengujian Form Login Admin
Tabel III.11.
Hasil Pengujian Black Box Testing Halaman Login Admin
No Skenario Pengujian Test Case Hasil yang Diharapkan Hasil Pengujian Kesimpulan 1 Username dan
Password tidak diisi
Username
: (kosong)
Sistem akan menolak
kemudian klik tombol login Password: (kosong) akses login dan menampilka n “Username dan Password Salah!” Sesuai Harapan Valid 2 Mengetikkan Username terisi sementara untuk
Password tidak diisi atau kosong
kemudian
klik tombol login
Username : Ok Password : (kosong) Sistem akan menolak akses login dan menampilka n “Username dan Password Salah!” Sesuai Harapan Valid
diisi atau kosongsementara untuk Password diisi kemudian klik tombol login (kosong) Password: Ok menolak akses login dan menampilka n “Username dan Password Salah!” Sesuai Harapan Valid 4 Mengetikkan Username dan Password
dengan data yang benar kemudian
klik tombol login
Username : Ok (benar) Password: Ok (benar) Sistem menerima akses login dan kemudian menampilka n halaman Admin. Sesuai Harapan Valid
