PEMBAHASAN
3.1. Analisa Perancangan Web 3.1.1 Tinjauan Kasus
Perkembangan zaman yang begitu maju dan begitu pesat akan selalu diikuti dengn perkembangan teknologi yang maju juga. Seperti perkembangan teknologi informasi, sehingga sekarang ini manusia telaj dimanjakan dengan teknologi tersebut dalam melakukan segala kegiatan, seperti tersedianya pengolahan informasi secara
online yang dapat diakses setiap detik dengan informasi yang ter up to date, sehingga
menghemat waktu bagi manusia dalam memperoleh suatu informasi.
Bisnis penjualan sepatu memiliki kemampuan bersaing di pasaran saat ini. Proses transaksi yang berjalan saat ini masih banyak yang dilakukan secara konvensional dengan pembeli harus datang langsung ke toko atau tempat penjualan jika ingin melakukan pembelian. Maka penulis mencoba membuat website untuk memudahkan proses transaksi pembelian yang dilakukan oleh pelanggan. Website ini nantinya akan memiliki dua antarmuka, antarmuka untuk pelanggan dan antarmuka untuk administrator.
Dalam hal ini penulis uraikan tunjauan kasusnya. Tinjauan kasus terbagi menjadi 2 yaitu:
1. Sisi Admin
a. Data Kota
Pada proses ini admin dapat melihat data kota yang telah dimasukan dan pada proses ini juga admin dapat menambah, mengubah, dan menghapus data kota.
b. Data Ukuran Sepatu
Pada proses ini admin dapat melihat data ukuran sepatu yang telah dimasukan dan pada proses ini juga admin dapat menambah, mengubah, dan menghapus data ukuran sepatu.
c. Data Kategori
Pada proses ini admin dapat melihat data kategori barang yang telah dimasukan dan pada proses ini juga admin dapat menambah, mengubah, dan menghapus data kategori barang.
d. Data Barang
Pada proses ini admin dapat melihat data barang yang telah dimasukan dan pada proses ini juga admin dapat menambah, mengubah, dan menghapus data barang.
e. Data Bank Pembayaran
Pada proses ini admin dapat melihat data bank pembayaran yang telah dimasukan dan pada proses ini juga admin dapat menambah, mengubah, dan menghapus data bank pembayaran.
f. Data Pelanggan
Pada proses ini admin dapat melihat pelanggan yang telah menjadi anggota.
g. Pemesanan Barang
Pada proses ini admin dapat melihat transaksi yang telah dilakukan oleh member.
h. Konfirmasi Transfer
Pada proses ini admin dapat melihat data konfirmasi transfer dari member yang telah melakukan pembayaran.
2. Sisi Pelanggan
a. Login Pelanggan
Pada proses ini pelanggan mengisi form login. Tujuan dari proses ini adalah untuk membatasi siapa saja yang dapat berbelanja.
b. Daftar Menjadi Pelanggan
Sebelum pelanggan menjadi anggota pelanggan dan ingin memesan, pelanggan diharuskan untuk menjadi anggota atau member terlebih dahulu dengan mengisi form pendaftaran pelanggan. Karena pemesanan hanya dapat dilakukan jika pelanggan sudah melakukan login sebagai member.
c. Produk
Pada proses ini pelanggan dapat melihat barang yang akan dijual dan dapat melakukan pemesanan barang.
3.2. Spesifikasi Rancangan Web
Pada sub bab ini, penulis membuat gambaran dari website yang dibuat. A. Rancangan Web Admin
1. Rancangan Halaman Login
Gambar III.1.
Tampilan Rancangan Halaman Login Keterangan:
Nama program : Menu Login Akronim : loginadmin.php
Fungsi : untuk menampilkan halaman login Bahasa program : HTML, PHP dan Mysql
Proses : Ketika kita mau ke halaman admin untuk melakukan proses data kita akan diminta masuk ke dalam halaman login terlebih dahulu
2. Rancangan Halaman Muka Admin
Gambar III.2.
Tampilan Rancangan Halaman Muka Admin Keterangan:
Nama program : Menu Utama
Akronim : index.php
Fungsi : untuk menampilkan halaman muka Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran A.2
Proses : Setelah Melakukan Login Kita akan masuk Kedalam Beranda yang khusus untuk admin
3. Rancangan Halaman Menu Data Pelanggan
Gambar III.3.
Tampilan Rancangan Halaman Menu Pelanggan Admin Keterangan:
Nama program : Menu Data Pelanggan Akronim : PelangganTampil.php
Fungsi : Menampilkan Data Pelanggan Bahasa program : HTML, PHP dan Mysql
Proses : Ketika Admin ingin melihat data tentang pelanggan tinggal klik menu data pelanggan
4. Rancangan Halaman Menu Data Barang
Gambar III.4.
Tampilan Rancangan Halaman Menu Data Barang Keterangan:
Nama program : Menu Data Barang Akronim : ProdukTampil.php
Fungsi : Menampilkan dan memanipulasi data barang Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran A.4
Proses : Ketika admin mau melakukan manipulasi atau melihat data klik menu data barang
5. Rancangan Halaman Menu Pembayaran Bank
Gambar III.5.
Tampilan Rancangan Halaman Menu Pembayaran Bank Keterangan:
Nama program : Menu Pembayaran Bank Akronim : pembayaran.php
Fungsi : Untuk Menambah Data Bank Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran A.5
Proses : Ketika admin mau melakukan penambahan data obat, klik menu tambah data Bank
6. Rancangan Halaman Menu Data Kategori
Gambar III.6.
Tampilan Rancangan Halaman Data Kategori Keterangan:
Nama program : MenuKategori Akronim : kategori.php
Fungsi : Menampilkan Data Kategori Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran A.6
Proses : Ketika admin ingin melihat data Kategori Barang
7. Rancangan Halaman Menu Kota
Gambar III.7.
Tampilan Rancangan Halaman Menu Kota Keterangan:
Nama program : Menu Kota
Akronim : kota.php
Fungsi : Untuk Merubah Kota Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran A.7
Proses : ketika admin mau merubah atau menambahkan kota
8. Rancangan Halaman Menu Admin
Gambar III.8.
Tampilan Rancangan Halaman Menu Admin Keterangan:
Nama program : Menu Admin Akronim : profil.php
Fungsi : Untuk Merubah Data Admin Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran A.8
9. Rancangan Halaman Pemesanan Admin
Gambar III.9.
Tampilan Rancangan Halaman Menu Pemesanan Keterangan:
Nama program : Menu Data Pemesanan Akronim : pemesanan.php
Fungsi : Untuk data pemesanan Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran A.9
Proses : ketika admin mau merubah dan melihat data pemesan
10.Rancangan Halaman Menu Data Konfirmasi Transfer
Gambar III.10.
Tampilan Rancangan Halaman Menu Data Konfirmasi Transfer Keterangan:
Nama program : Menu Data Konfirmasi Transfer Akronim : konfirmasitransfer.php
Fungsi : Untuk menampilkan data Transfer Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran A.10
11.Rancangan Halaman Menu Home Page Admin
Gambar III.11.
Tampilan Rancangan Halaman Menu Homepage Admin Keterangan:
Nama program : Menu Data Home Page Admin Akronim : homepageadmin.php
Fungsi : Untuk menampilkan halaman ke admin Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran A.11
12.Rancangan Halaman Menu Laporan Data Barang
Gambar III.12.
Tampilan Rancangan Halaman Laporan Data Barang Admin Keterangan:
Nama program : Menu Data Laporan data barang Admin Akronim : laporandatabarang.php
Fungsi : Untuk menampilkan laporan data barang Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran A.12
13.Rancangan Halaman Menu Laporan Data Kategori
Gambar III.13.
Tampilan Rancangan Halaman Laporan Data Kategori Admin Keterangan:
Nama program : Menu Data Laporan data kategori Admin Akronim : laporandatakategori.php
Fungsi : Untuk menampilkan laporan data kategori Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran A.13
14.Rancangan Halaman Menu Laporan Data Pelanggan
Gambar III.14.
Tampilan Rancangan Halaman Laporan Data Pelanggan Admin Keterangan:
Nama program : Menu Data Laporan data pelanggan Admin Akronim : laporandatapelanggan.php
Fungsi : Untuk menampilkan laporan data pelangggan Bahasa program : HTML, PHP dan Mysql
15.Rancangan Halaman Menu Laporan Data Kota
Gambar III.15.
Tampilan Rancangan Halaman Laporan Data Kota Admin Keterangan:
Nama program : Menu Data Laporan data kota Admin Akronim : laporandatakota.php
Fungsi : Untuk menampilkan laporan data kota Bahasa program : HTML, PHP dan Mysql
16.Rancangan Halaman Menu Laporan Data Pemesanan masuk
Gambar III.16.
Tampilan Rancangan Halaman Laporan Data Pemesanan masuk Admin Keterangan:
Nama program : Menu Data Laporan data pemesanan masuk Akronim : laporandatapemesanan masuk.php
Fungsi : Untuk menampilkan laporan data pemesanan Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran A.16
17.Rancangan Halaman Menu Laporan Data Pelunasan Perperiode
Gambar III.17.
Tampilan Rancangan Halaman Laporan Data Pelunasan Perperiode Keterangan:
Nama program : Menu Data Laporan data pelunasan perperiode Akronim : laporandatapelunasanperperiode.php
Fungsi :Untuk menampilkan laporan pelunasan
perperiode
Bahasa program : HTML, PHP dan Mysql
18.Rancangan Halaman Menu Laporan Data Pelunasan Pertanggal
Gambar III.18.
Tampilan Rancangan Halaman Laporan Data Pelunasan Pertanggal Keterangan:
Nama program : Menu Data Laporan data pelunasan pertanggal Akronim : laporandatapelunasanpertanggal.php
Fungsi :Untuk menampilkan laporan pelunasan
pertanggal
Bahasa program : HTML, PHP dan Mysql
19.Rancangan Halaman Menu detail Pemesanan
Gambar III.19.
Tampilan Rancangan Halaman detail Pemesanan Keterangan:
Nama program : Menu Data data detail Pemesanan Akronim : detailpemesanan.php
Fungsi :Untuk menampilkan data detail transaksi pemesanan
Bahasa program : HTML, PHP dan Mysql
20.Rancangan Halaman Menu Data Ukuran Sepatu
Gambar III.20.
Tampilan Rancangan Halaman Data Ukuran Sepatu Keterangan:
Nama program : Menu Data data ukuran sepatu
Akronim : ukuran.php
Fungsi :Untuk menampilkan data uuran sepatu Bahasa program : HTML, PHP dan Mysql
A. Rancangan Antar Muka Halaman Member
1. Rancangan Halaman Cari Produk Halaman Member
Kontak YM Telepon Transaksi Kategori Cari
Text Judul
Home Profil Produk Panduan Konfirmasi
Cari Barang :
Footer
Header
Area Hasil Pencarian
Halaman Gambar Produk
Gambar Produk
Gambar III.21.
Tampilan Rancangan Halaman Cari Produk Member Keterangan:
Nama program : Menu Cari Produk Akronim : cariproduk.php
Fungsi : untuk menampilkan halaman cari Produk Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran B.1
Proses : Ketika pelanggan pertama masuk kedalam website mengetikan nama barang yang dicari
2. Rancangan Halaman Data Produk Member Kontak YM Telepon Transaksi Kategori Cari Text Judul
Home Profil Produk Panduan Konfirmasi
Cari Barang :
Footer
Header
Area Data Produk Gambar Produk
Gambar Produk
Gambar Produk
Halaman
Gambar III.22.
Tampilan Rancangan Halaman Produk Keterangan:
Nama program : Menu Daftar Produk Akronim : daftar.php
Fungsi : Menampilkan Daftar Produk Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : Lihat Lampiran B.2
Proses : Untuk melihat daftar produk yang dijual, klik menu produk
3. Rancangan Halaman Histori Transaksi (Daftar Pemesanan Member) Kontak YM Telepon Transaksi Kategori Cari Text Judul
Home Profil Produk Panduan Konfirmasi
Cari Barang :
Footer
Header
No. No.Pesan Tanggal Nama Penerima Total (Rp) Biaya Kirim (Rp) Status Tools
Gambar III.23.
Tampilan Rancangan Halaman Daftar Pemesanan Member Keterangan:
Nama program : Menu daftar pemesanan Akronim : daftarpemesanan.php
Fungsi : Menampilkan daftar pemesanan Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran B.3
4. Rancangan Halaman Index member Kontak YM Telepon Transaksi Kategori Cari
Text Judul
Home Profil Produk Panduan Konfirmasi
Cari Barang :
Footer
Header
Gambar Home
Area Koleksi Barang Gambar Produk
Gambar Produk
Halaman
Gambar III.24.
Tampilan Rancangan Index Member Keterangan:
Nama program : Menu index Member Akronim : index.php
Fungsi : Menampilkan Halaman Index Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran B.4
5. Rancangan Halaman Kategori Produk Member Kontak YM Telepon Transaksi Kategori Cari
Text Judul
Home Profil Produk Panduan Konfirmasi
Cari Barang :
Footer
Header
Area Koleksi Barang Kategori Gambar Produk
Gambar Produk
Halaman
Gambar III.25.
Tampilan Rancangan Kategori Produk Member Keterangan:
Nama program : Menu Kategori Member Akronim : kategori.php
Fungsi : Menampilkan Katagori Produk Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran B.5
6. Rancangan Halaman Keranjang Member Kontak YM Telepon Transaksi Kategori Cari
Text Judul
Home Profil Produk Panduan Konfirmasi
Cari Barang :
Footer
Header
Gambar Produk
Gambar Nama Barang Harga (Rp) Jumlah Total (Rp) Tools
Lanjutkan
Text Nama Brg Text Harga Text Total Delete
Grand Total:
Ubah Data Text Grand Total:
Gambar III.26.
Tampilan Rancangan Keranjang Belanja Member Keterangan:
Nama program : Menu Kaeranjang Belanja Akronim : keranjang.php
Fungsi : Menampilkan menyimpan belanja Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran B.6
7. Rancangan Halaman Komfirmasi pemesanan Member Kontak YM Telepon Transaksi Kategori Cari Text Judul
Home Profil Produk Panduan Konfirmasi
Cari Barang : Footer Header No. Pemesan Nama Penerima Bank Tujuan Bank Asal Jumlah Transfer (Rp) Keterangan Kirim Gambar III.27.
Tampilan Rancangan Konfirmasi Pemesanan Member Keterangan:
Nama program : Menu Komfirmasi Pemesanan Akronim : komfirmasipemesanan.php
Fungsi : Menampilkan komfirmasi pemesanan Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran B.7
Proses : Ketika User Ingin mengkomfirmasi pemesanan
8. Rancangan Halaman Panduan Belanja Member
Cari
Text Judul
Home Profil Produk Panduan Konfirmasi
Cari Barang :
Area Panduan Belanja
Footer Header Kontak YM Telepon Transaksi Kategori Gambar III.28.
Tampilan Rancangan Panduan Belanja Member Keterangan:
Nama program : Menu Panduan Belanja Member Akronim : Panduanbelanja.php
Fungsi : Menampilkan tata cara belanja Bahasa program : HTML, PHP dan Mysql
Proses : Ketika User Ingin mengetahui cara belanja 9. Rancangan Halaman Detail Produk Member
Kontak YM Telepon Transaksi Kategori Cari Text Judul
Home Profil Produk Panduan Konfirmasi Cari Barang :
Footer
Header
Area Detail Produk
Area Koleksi Barang Sejenis Gambar Produk
Beli
Gambar III.29.
Tampilan Rancangan Produk Member Keterangan:
Nama program : Menu Produk Member Akronim : produk.php
Fungsi : Menampilkan produk member Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran B.9
10.Rancangan Halaman Profil Member
Cari
Text Judul
Home Profil Produk Panduan Konfirmasi
Cari Barang : Area Profil Footer Header Kontak YM Telepon Transaksi Kategori Gambar III.30.
Tampilan Rancangan Profil Member Keterangan:
Nama program : Menu Profil Member Akronim : profil.php
Fungsi : Menampilkan profil member Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran B.10
11.Rancangan Halaman checkout Member Kontak YM Telepon Transaksi Kategori Cari
Text Judul
Home Profil Produk Panduan Konfirmasi
Cari Barang :
Footer
Header
No. Nama Barang Harga (Rp) Jumlah Total (Rp)
Text Nama Barang Text Harga Text Jumlah Text Total (Rp)
Grand Total Nama Penerima Alamat Tujuan Provinsi Tujuan Kota Tujuan Kode Pos No. Telepon
Simpan dan Lanjutkan Transaksi Pilih Ukuran
Gambar III.31.
Tampilan Rancangan Checkout Member Keterangan:
Nama program : Menu Checkout Member Akronim : checkout.php
Fungsi : Menampilkan proses transaksi member Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran B.11
B. Rancangan Antar Muka Halaman Pengunjung
1. Rancangan Halaman Cari Produk Halaman Pengunjung
Kontak YM Telepon Login Kategori Cari Text Judul
Home Profil Produk Panduan Konfirmasi
Cari Barang :
Footer
Header
Area Hasil Pencarian
Halaman Gambar Produk
Gambar Produk
Gambar III.32.
Tampilan Rancangan Halaman Cari Produk Pengunjung Keterangan:
Nama program : Menu Cari Produk Akronim : cariproduk.php
Fungsi : untuk menampilkan halaman cari Produk Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran C.1
Proses : Ketika pelanggan pertama masuk kedalam website mengetikan nama barang yang dicari
12.Rancangan Halaman Data Produk Member Kontak YM Telepon Login Kategori Cari Text Judul
Home Profil Produk Panduan Konfirmasi
Cari Barang :
Footer
Header
Area Data Produk Gambar Produk
Gambar Produk
Gambar Produk
Halaman
Gambar III.33.
Tampilan Rancangan Halaman Produk Keterangan:
Nama program : Menu Daftar Produk Akronim : daftar.php
Fungsi : Menampilkan Daftar Produk Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : Lihat Lampiran C.2
Proses : Untuk melihat daftar produk yang dijual, klik menu produk
13.Rancangan Halaman Index Pengunjung
Cari
Text Judul
Home Profil Produk Panduan Konfirmasi
Cari Barang : Footer Header Kontak YM Telepon Login Kategori Gambar Home
Area Koleksi Barang Gambar Produk
Gambar Produk
Halaman
Gambar III.34.
Tampilan Rancangan Index Pengunjung Keterangan:
Nama program : Menu index Pengunjung Akronim : index.php
Fungsi : Menampilkan Halaman Index Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran C.3
14.Rancangan Halaman Kategori Produk Pengunjung Kontak YM Telepon Login Kategori Cari Text Judul
Home Profil Produk Panduan Konfirmasi
Cari Barang :
Footer
Header
Area Koleksi Barang Kategori Gambar Produk
Gambar Produk
Halaman
Gambar III.35.
Tampilan Rancangan Kategori Produk Pengunjung Keterangan:
Nama program : Menu Kategori pengunjung Akronim : kategori.php
Fungsi : Menampilkan Katagori Produk Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran C.4
15.Rancangan Halaman Komfirmasi pemesanan Pengunjung Kontak YM Telepon Login Kategori Cari Text Judul
Home Profil Produk Panduan Konfirmasi
Cari Barang : Footer Header No. Pemesan Nama Penerima Bank Tujuan Bank Asal Jumlah Transfer (Rp) Keterangan Kirim Gambar III.36.
Tampilan Rancangan Konfirmasi Pemesanan Pengunjung Keterangan:
Nama program : Menu Komfirmasi Pemesanan Akronim : komfirmasipemesanan.php
Fungsi : Menampilkan komfirmasi pemesanan Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran C.5
Proses : Ketika User Ingin mengkomfirmasi pemesanan
16.Rancangan Halaman Panduan Belanja Pengunjung
Cari
Text Judul
Home Profil Produk Panduan Konfirmasi
Cari Barang :
Area Panduan Belanja
Footer Header Kontak YM Telepon Login Kategori Gambar III.37.
Tampilan Rancangan Panduan Belanja Pengunjung Keterangan:
Nama program : Menu Panduan Belanja Pengunjung Akronim : Panduanbelanja.php
Fungsi : Menampilkan tata cara belanja Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran C.6
17.Rancangan Halaman Detail Produk pengunjung Kontak YM Telepon Login Kategori Cari
Text Judul
Home Profil Produk Panduan Konfirmasi
Cari Barang :
Footer
Header
Area Detail Produk
Area Koleksi Barang Sejenis Gambar Produk
Beli
Gambar III.38.
Tampilan Rancangan Detail Produk Pengunjung Keterangan:
Nama program : Menu Produk Pengunjung Akronim : detailproduk.php
Fungsi : Menampilkan detail produk pengunjung Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran C.7
18.Rancangan Halaman Profil Pengunjung
Cari Text Judul
Home Profil Produk Panduan Konfirmasi Cari Barang : Area Profil Footer Header Kontak YM Telepon Login Kategori Gambar III.39.
Tampilan Rancangan Profil Pengunjung Keterangan:
Nama program : Menu Profil Pengunjung Akronim : profil.php
Fungsi : Menampilkan profil pengunjung Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran C.8
19.Rancangan Halaman Pendaftaran pelanggan Baru Pengunjung Kontak YM Telepon Login Kategori Cari Text Judul
Home Profil Produk Panduan Konfirmasi
Cari Barang : Footer Header Nama Pelanggan Kelamin E-Mail No. Telepon DATA LOGIN Username Password Password (Lagi) Daftar Gambar III.40.
Tampilan Rancangan Pendaftaran Keterangan:
Nama program : Menu pendaftaran Akronim : pendaftaran.php
Fungsi : Menampilkan form pendafataran Bahasa program : HTML, PHP dan Mysql
Bentuk tampilan : lihat lampiran C.9
3.3. Rancangan Struktur Navigasi
Struktur navigasi yang digunakan adalah navigasi campuran (composite). Melalui struktur navigasi ini, terlihat bagaimana isi dan susunan dari sebuah website
secara menyeluruh. Pembuatan struktur navigasi website ini akan sangat membantu nantinya ketika akan membuat rancangan seluruh halaman website.
1. Struktur Navigasi Administrator
Merupakan halaman yang dapat diakses oleh pengguna yang mempunyai
username dan password saja.
Login
Index
Home Password Admin Data Admin Data Kota Data Kategori Data Barang Data Bank Pembayaran Data Pelanggan
Pemesanan Barang
Konfirmasi
Transfer Laporan Logout
Laporan Data Provinsi Laporan Data Kategori Laporan Data Barang Laporan Data Pelanggan Laporan Pemesanan Masuk - Periode Laporan Pemesanan Lunas – Tanggal Laporan Pemesanan Lunas - Periode Gambar III.41.
2. Struktur Navigasi Pengunjung
Merupakan halaman yang akan ditampilkan untuk pengunjung yang mengakses website tersebut.
Index
Home
Profil
Produk
Panduan
Konfirmasi
Pendaftaran Baru
Login
Kategori
Cari
Beli
Detail Produk
Gambar III.42. Struktur Navigasi Pegunjung
3. Struktur Navigasi Member
Index
Home Profil Produk Panduan Konfirmasi
Pendaftaran Baru
Transaksi Kategori Cari Beli Detail Produk
Keranjang Belanja
Tampilkan Transaksi
Logout
Lanjutkan Ubah Data
Simpan & Lanjutkan Transaksi
Gambar III.43. Struktur Navigasi Member
3.4 Normalisasi
1.Bentuk Tidak Normal (Unnormalized)
Gambar III.44.
Normalisasi Bentuk Tidak Normal
kd_kategori kd_bank status_bayar
nm_kategori nm_bank kd_kota
kd_barang kd_size id
nm_barang kd_kota harga
harga_modal nm_kota jumlah
harga_jual biaya_kirim kd_barang
stok id no_pemesanan
keterangan nm_pelanggan kd_size
file_gambar bank_asal size
kd_kategori jumlah_transfer no_rekening
kd_pelanggan ket nm_pemilik
nm_pelanggan tanggal kelamin no_pemesanan email tgl_pesan no_telepon nm_penerima username alamat_lengkap password kode_pos tgl_daftar no_telepon
2. Bentuk Normal Kesatu (1 NF)
Gambar III.45.
Bentuk Normal Kesatu (1NF)
Keterangan:
* Candidate key
kd_kategori* no_telepon no_pemesanan*
nm_kategori username tgl_pesan
kd_barang* password nm_penerima
nm_barang tgl_daftar alamat_lengkap
harga_modal kd_bank* kode_pos
harga_jual nm_bank no_telepon
stok no_rekening status_bayar
keterangan nm_pemilik biaya_kirim
file_gambar id* id
nm_kota nm_pelanggan harga
kd_pelanggan* bank_asal jumlah
nm_pelanggan jumlah_transfer kd_size*
kelamin ket kd_kota*
3. Bentuk Normal Kedua (2 NF)
Gambar III.46.
Bentuk Normal Kedua (2 NF) Keterangan:
* = Kunci Primer (Primary Key) = Satu Ke Satu (One To One)
**= Kunci Tamu (Foreign Key) = Satu Ke Banyak (One To Many)
kategori kd_kategori* nm_kategori bank kd_bank* nm_bank no_rekening nm_pemilik konfirmasi id* nm_pelanggan bank_asal jumlah_transfer ket tanggal kd_bank** no_pemesanan** barang kd_barang* nm_barang harga_modal harga_jual stok keterangan kd_kategori** pemesanan no_pemesanan* tgl_pesan nm_penerima alamat_lengkap kota kode_pos no_telepon status_bayar kd_kota** kd_pelanggan** kd_barang** kd_size** pelanggan kd_pelanggan* nm_pelanggan kelamin email no_telepon username password tgl_daftar kota kd_kota* nm_kota biaya_kirim size kd_size* size
4. Bentuk Normal Ketiga (3 NF)
Gambar III.46.
Bentuk Normal Kedua (2 NF) Keterangan:
* = Kunci Primer (Primary Key) = Satu Ke Satu (One To One)
**= Kunci Tamu (Foreign Key) = Satu Ke Banyak (One To Many)
kategori kd_kategori* nm_kategori bank kd_bank* nm_bank no_rekening nm_pemilik konfirmasi id* nm_pelanggan bank_asal jumlah_transfer ket tanggal kd_bank** no_pemesanan** barang kd_barang* nm_barang harga_modal harga_jual stok keterangan kd_kategori** pelanggan kd_pelanggan* nm_pelanggan kelamin email no_telepon username password tgl_daftar kota kd_kota* nm_kota biaya_kirim Pemesanan_item id* harga jumlah kd_barang** no_pemesanan** kd_size** pemesanan no_pemesanan* tgl_pesan nm_penerima alamat_lengkap kota kode_pos no_telepon status_bayar kd_kota** kd_pelanggan** size kd_size* size
3.5. Spesifikasi File
Menjelaskan tentang file atau table yang terbentuk dari transformasi normalisasi (dan atau file-file penunjang untuk web). File-file ini tersimpan pada database
sepatu_db.sql dengan parameter-parameter sbb: 1. Tabel Admin
a. Nama File : Tabel admin b. Akronim File : admin
c. Fungsi : Untuk menyimpan data admin d. Tipe File : File Master
e. Organisasi File : Index sequential
f. Akses : Random
g. Media File : Hard Disk
h. Panjang Record : 230 karakter
i. Software : Mysql
j. Record Key : username
Tabel III.1 Spesifikasi file admin
No Elemen Data Nama File Tipe Size Ket
1 User Name Username varchar 30 Primary Key
2. Tabel Bank
a. Nama File : Tabel Bank b. Akronim File : bank
c. Fungsi : Untuk menyimpan data bank d. Tipe File : File Master
e. Organisasi File : Index sequential
f. Akses : Random
g. Media File : Hard Disk
h. Panjang Record : 35 karakter
i. Software : Mysql
j. Record Key : kd_bank
Tabel III.2
Spesifikasi file data bank
No Elemen Data Nama File Tipe Size Ket
1 Kode Bank kd_bank varchar 5 Primary Key
2 Nama Bank nm_bank varchar 30
3. Tabel Barang
a. Nama File :Tabel Barang b. Akronim File : barang
c. Fungsi : Untuk menyimpan data barang d. Tipe File : File Master
e. Organisasi File : Index sequential
f. Akses : Random
g. Media File : Hard Disk
h. Panjang Record : 257 karakter
i. Software : Mysql
j. Record Key : kd_barang
Tabel III.3 Spesifikasi file barang
No Elemen Data Nama File Tipe Size Ket
1 Kode Barang kd_barang Char 5 Primary Key
2 Nama Barang nm_barang varchar 100 3 Harga Modal harga_modal Int 12
4 Harga Jual harga_jual Int 12
5 Stok stok Int 4
6 Size Tersedia size_tersedia Varchar 20 7 Keterangan keterangan Text
8 File Gambar file_gambar Varchar 100
4. Tabel Kategori
a. Nama File :Tabel Kategori b. Akronim File : kategori
c. Fungsi : Untuk menyimpan data kategori barang d. Tipe File : File Master
e. Organisasi File : Index sequential
f. Akses : Random
g. Media File : Hard Disk
h. Panjang Record : 104 karakter
i. Software : Mysql
j. Record Key : kd_kategori
Tabel III.4 Spesifikasi file Kategori
No Elemen Data Nama File Tipe Size Ket
1 Kode Kategori kd_kategori Char 4 Primary Key
2 Nama Kategori nm_kategori varchar 100
5. Tabel Konfirmasi Pembayaran
a. Nama File :Tabel Konfirmasi Pembayaran b. Akronim File : konfirmasi
c. Fungsi : Untuk menyimpan data Konfirmasi Pembayaran d. Tipe File : File Transaksi
e. Organisasi File : Index sequential
f. Akses : Random
g. Media File : Hard Disk
h. Panjang Record : 159 karakter
i. Software : Mysql
j. Record Key : id
Tabel III.5
Spesifikasi file Konfirmasi Pembayaran No Elemen Data Nama File Tipe Size Ket 1 Id
Pembayaran
Id Int 4 Primary Key
2 Nomor Pemesanan
no_pemesanan varchar 8 Foreign Key
3 Nama Pelanggan
nm_pelanggan Varchar 100
4 Kode Bank kd_bank varchar 5 Foreign Key
5 Bank Asal bank_asal varchar 30 6 Jumlah
Transfer
jumlah_transfer Int 12
7 Keterangan Ket Text
6. Tabel Pelanggan
a. Nama File : Tabel Pelanggan b. Akronim File : konten
c. Fungsi : Untuk menyimpan data Pelanggan d. Tipe File : File Master
e. Organisasi File : Index sequential
f. Akses : Random
g. Media File : Hard Disk
h. Panjang Record : 346 karakter
i. Software : Mysql
j. Record Key : kd_pelanggan
Tabel III.6
Spesifikasi file pelanggan
No Elemen Data Nama File Tipe Size Ket 1 Kode
Pelanggan
kd_pelanggan Char 6 Primary Key
2 Nama Pelanggan
nm_pelanggan Varchar 100
3 Jenis Kelamin Kelamin Enum (‘laki-laki’,’per empuan’)
4 Email Email Varchar 100 5 Nomor
Telepon
no_telepon Varchar 100
6 User Name Username Varchar 20
7 Password Password Varchar 100
8 Tanggal Daftar
tgl_daftar Date
7. Tabel Pemesanan
a. Nama File :Tabel Pemesanan b. Akronim File : pemesanan
c. Fungsi : Untuk menyimpan data pemesanan pelanggan d. Tipe File : File Transaksi
e. Organisasi File : Index sequential
f. Akses : Random
g. Media File : Hard Disk
h. Panjang Record : 303 karakter
i. Software : Mysql
Tabel III.7
Spesifikasi file Pemesanan
No Elemen Data Nama File Tipe Size Ket 1 Nomor
Pemesanan
no_pemesanan Char 8 Primary Key
2 Kode Pelanggan
kd_pelanggan Char 6 Foreign Key
3 Tanggal Pemesanan tgl_pesan Date 4 Nama Penerima nm_penerima varchar 60 5 Alamat Lengkap alamat_lengkap varchar 200
6 Kode Kota kd_kota Char 3 Foreign Key
7 Kode Pos kode_pos Varchar 6
8 Nomor telepon
no_telepon Varchar 20
9 Status Bayar status_bayar Enum (‘pesan’ ,’lunas’, ’batal’)
8. Tabel Pemesanan Item
a. Nama File : Tabel Pemesanan Item b. Akronim File : pemesanan_item
c. Fungsi : Untuk menyimpan data detail pemesanan pelanggan d. Tipe File : File Transaksi
e. Organisasi File : Index sequential
f. Akses : Random
g. Media File : Hard Disk
h. Panjang Record : 32 karakter
i. Software : Mysql
j. Record Key : -
Tabel III.8
Spesifikasi file Pemesanan Item
No Elemen Data Nama File Tipe Size Ket
1 Id Pesan Id Int 4
2 Nomor Pemesanan
no_pemesanan Char 8 Foreign Key
3 Kode barang kd_barang Char 5 Foreign Key
4 Harga Harga Int 12
5 Jumlah Jumlah Int 3
9. Tabel kota
a. Nama File :Tabel kota b. Akronim File : kota
c. Fungsi : Untuk menyimpan data kota d. Tipe File : File Master
e. Organisasi File : Index sequential
f. Akses : Random
g. Media File : Hard Disk
h. Panjang Record : 115 karakter
i. Software : Mysql
j. Record Key : kd_kota
Tabel III.9
Spesifikasi file Data Kota
No Elemen Data Nama File Tipe Size Ket
1 Kode Kota kd_kota Char 3 Primary Key
2 Nama Kota nm_kota varchar 100
10.Tabel Size
a. Nama File : Tabel Size
b. Akronim File : Size
c. Fungsi : Untuk menyimpan data ukuran sepatu d. Tipe File : File Master
e. Organisasi File : Index sequential
f. Akses : Random
g. Media File : Hard Disk
h. Panjang Record : 25 karakter
i. Software : Mysql
j. Record Key : -
Tabel III.10 Spesifikasi file Size
No Elemen Data Nama File Tipe Size Ket
1 Kode size kd_size Varchar 5 Primary Key
3.6. Spesifikasi Sistem Komputer
Sebelum melakukan suatu sistem komputerisasi, diperlukan beberapa persiapan, baik dalam hal kebutuhan akan perangkat keras (hardware) maupun perangkat lunak (software) sebagai sarana pendukung program yang akan di jalankan. Sarana pendukung tersebut harus mampu membantu aplikasi program atau komputerisasi sistem yang efektif dan efisien.
1. Perangkat keras (Hardware)
Perangkat keras (Hardware) adalah seluruh komponen yang membentuk suatu sistem komputer dan perlalatan lainnya yang memungkinkan komputer dapat melaksanakan tugasnya. Dalam hal ini perangkat keras yang penulis butuhkan diantaranya :
a. Monitor : 1366 x 768 HD LED LCD
b. Processor : intel Core i3 4.0 GHz
c. Memory : 2 GB
d. -Harddisk : 500 GB
e. Keyboard : 86 keys
2. Perangkat Lunak(sofware)
Dalam suatu perancangan program tidak terlepas dari perangkat lunak
(sofware) yang akan digunakan dalam menyusun program aplikasi serta
sistem operasi yang akan penulis gunakan untuk menjalankan program. Aplikasi tersebut
Perangkat lunak (software) sering di istilahkan dengan program. Program bukanlah sesuatu yang harus dipegang atau di jamah sebagaimana layaknya
Hardware. Pemakaian komputer tidak terlepas dari penggunaan software
untuk mengolah data dan sebagai sarana pendukung program yang akan dibuat
Adapun perangkat lunak yang penulis gunakan dalam pembuatan program tugas akhir ini yaitu :
a. Sistem Operasi : Microsoft windows 7
b. Program Aplikasi Design : Adobe Dreamweaver CS5 c. Bahasa Script : PHP, Javascript
d. Web Server : XAMPP
e. Web Pengunjung Web : Mozilla Firefox, Google Chrome