Post on 31-Oct-2021
37
BAB IV
RANCANGAN SISTEM DAN PROGRAM USULAN
4.1. Analisis Kebutuhan Software
Kebutuhan perangkat lunak adalah kondisi, kriteria, syarat atau
kemampuan yang harus dimiliki oleh perangkat lunak untuk memenuhi apa yang
disyaratkan atau diinginkan pemakai. Bab ini berisi mengenai segala sesuatu yang
dibutuhkan untuk dapat melakukan analisis kebutuhan perangkat lunak (software
requirement analysis).
Analisis kebutuhan perangkat lunak (software requirement analysis)
merupakan aktivitas awal dari siklus hidup pengembangan perangkat lunak
(software). Untuk proyek-proyek perangkat lunak yang besar, analisis kebutuhan
dilaksanakan setelah tahap rekayasa sistem atau informasi dan software project
planning.
1. Tahapan Analisis
Sistem penjualan secara online berbasis web dimana penjual dan pembeli
perlu bertemu atau bertatapan muka secara langsung. Calon pembeli atau
pelanggan hanya perlu melakukan pembelian melalui media browser. Berikut ini
adalah spesifikasi kebutuhan (system requiretment) dari sistem e-commerce.
Halaman User:
A1. Pembeli dapat melihat produk.
A2. Pembeli melihat keranjang belanja
A3. Pembeli dapat mengirim pesan
38
Halaman Administrasi:
B1. Admin dapat mengelola produk.
B2. Admin dapat mengelola data transaksi penjualan.
B3. Admin dapat mengelola laporan penjualan.
1. Use Case Diagram
Diagram usecase digunakan untuk mendeskripsikan apa yang seharusnya
dilakukan oleh sistem. Diagram usecase menyediakan cara mendiskripsikan
pandangan eksternal terhadap sistem dan interaksi-interaksinya terhadap dunia
luar. Dengan cara ini diagram usecase menggantikan diagram konteks pada
pendekatan konvensional.
39
Input Barang
Browse Barang
Tentang Kami
Artikel
Register
member
Konfirm Bayar
Kategori
Kontak Kami
Keranjang
Cara Transaksi
Produk
Home
Beranda
Approve Bayar
Login/Logout
Browse Berita
Laporan
Input Berita
Melihat Produk
Administrator
Member
Pengunjung
Gambar IV.2 Use Case Diagram Sistem Usulan
Tabel IV.1 Dokumentasi Use Case Usulan
Use Case Index Member dan Index Pengunjung
Brief Description Use case ini memungkinkan member untuk melakukan
semua yang disediakan oleh web seperti melihat
produk, transaksi sedangkan pengunjung hanya bisa
melihat produk dan berita.
Actor Member dan Pengunjung
Precondition Member dan pengunjung melihat halaman-halaman
40
web.
Main Flow Use case index member dimulai pada saat member
sudah login. Sedangkan pengunjung, ketika membuka
web.
Alternatif Flow Jika member dan pengunjung tidak ingin melihat
halaman indexnya. Masing-masing dapat menutup
browser
Post Condition Jika member berhasil melakukan login kemudian
member dapat melakukan transaksi yang diinginkan.
41
Adapun Use Case Detailnya terbagi atas :
a. Use Case Diagram Member
Gambar IV.3 Use Case Diagram Admin
Tabel IV.2 Dokumentasi Use Case Admin
Use Case Index Admin
Brief Description Use case ini memungkinkan member untuk melakukan
semua yang disediakan oleh web seperti melihat
produk, transaksi, berita sedangkan pengunjung hanya
bisa melihat produk dan berita.
Actor Admin, Member dan Pengunjung
Precondition Member dan pengunjung melihat halaman-halaman
web.
Main Flow Use case index member dimulai pada saat member
sudah login. Sedangkan pengunjung, ketika membuka
web.
Alternatif Flow Jika member dan pengunjung tidak ingin melihat
halaman indexnya. Masing-masing dapat menutup
browser
Post Condition Jika member berhasil melakukan login kemudian
member dapat melakukan transaksi yang diinginkan.
42
Adapun Use Case Detailnya terbagi atas :
b. Use Case Diagram Register Member
Register Member
pengunjung
Admin
<<include>>
<<extend>>
isi form register
member
register member
data member
Gambar IV.4 Use Case Diagram Register Member
Tabel IV.3 Dokumentasi Use Case Register Member
Use Case Register Member
Brief Description Pada use case ini memungkinkan pengunjung
membuka web , melakukan registrasi member untuk
dapat menjadi member.
Actor Pengunjung dan Admin
Precondition Pengunjung menggunakan browser internet untuk
memasuki halaman register member agar mengisi form
pendaftaran register member pada web .
Main Flow Use case ini dimulai pada saat pengunjung ingin
melakukan transaksi. Pertama kali pengunjung
langsung menuju ke halaman index . Kemudian
pengunjung mengisi form register dengan benar agar
43
data tersimpan dalam data member dan dapat
melakukan login member.
Alternatif Flow Jika pengunjung menjalankan form register dan masih
ada yang kurang dalam pengisian, maka sistem
otomatis akan menampilkan pesan dan sistem
mengijinkan pengunjung untuk memasukkan form
register dengan benar.
Post Condition Jika use case berhasil dijalankan, data pengunjung
yang diisi melalui form register akan tersimpan di
database sistem dan pengunjung mendapatkan sebuah
link ke email pengunjung. Jika tidak maka status
pengunjung tidak berubah
b. Use Case Diagram Login
Login
pengunjung
Admin
<<include>>
<<extend>>
register member
ruang member
email dan password
Gambar IV.5 Use Case Diagram Login
Tabel IV.4 Dokumentasi Use Case Login
Use Case Login
44
Brief Description Use case ini memungkinkan Member dan admin
membuka web dan melakukan login untuk masuk ke
dalam hak aksesnya .
Actor Member dan Admin
Precondition Member dan admin menggunakan internet browser
untuk melihat halaman web . Member dan admin
dapat mengisi form login dengan memasukkan
username dan password secara benar.
Main Flow Use case ini dimulai pada saat member dan admin
ingin menggunakan hak aksesnya. Pertama kali
member dan admin akan menuju ke halaman index .
Kemudian member dan admin ke form login dengan
mengisi username dan password secara benar. Jika
user atau password salah maka sistem akan
memberikan pesan.
Alternatif Flow Jika member dan admin memilih login, maka
member dan admin akan ditampilkan form login agar
dapat memasukkan username dan password.
Post Condition Jika member dan admin berhasil dalam melakukan
langkah-langkah tersebut maka member dan admin
dapat masuk ke dalam sistem pengaksesan.
45
c. Use Case Diagram Cara Pemesanan Produk
Cara Pemesanan
Member admin
cara pemesanan
update cara
pemesanan
<<extend>>
halaman cara
pemesanan
<<include>>
Gambar IV.6 Use Case Diagram Cara Pemesanan Produk
Tabel IV.3 Dokumentasi Use Case Cara Pemesanan Produk
Use Case Cara Pemesanan Produk
Brief Description Use case ini memungkinkan member membuka web
dan menuju halaman cara pemesanan produk, disini
member melihat isi dari tata cara pemesanan
melakukan transaksi. Dan admin berhak akses untuk
mengupdate cara pemesanan.
Actor Member dan Admin
Precondition Member menggunakan internet browser untuk dapat
melihat cara dan ketentuan dalam pemesanan. Serta
admin masuk kedalam aksesnya untuk dapat
46
mengedit/mengupdate cara dan ketentuan pemesanan.
Main Flow Use case ini dimulai pada saat member ingin
mengetahui informasi tentang cara dan ketentuan
pemesanan. Pertama kali member akan langsung
menuju ke halaman index. Kemudian member menuju
ke halaman cara pemesanan untuk mengetahui tata
cara pemesanan dalam web . Jika sudah, member dapat
memesan produk yang diinginkan. Sedangkan admin
pertama kali harus login untuk mendapatkan hak
aksesnya sehingga dapat mengupdatenya jika ada
perubahan.
Alternatif Flow Jika member sudah mengetahui tata cara dan ketentuan
tentang pemesanan member dapat melakukan
transaksinya dengan mudah. Jika member masih belum
paham tentang info cara dan ketentuan pemesanan,
member dapat menghubungi admin untuk dapat
menerima info hingga member benar-benar mengerti.
Post Condition Jika member sudah mengerti dengan info tentang cara
dan ketentuan pemesanan, member dapat melakukan
transaksi dengan mudah.
47
d. Use Case Diagram Pesan Barang
Gambar IV.7 Use Case Diagram Pesan Barang
Tabel IV.5 Dokumentasi Use Case Pesan Barang
Use Case Pesan Barang
Brief Description Use Case ini memungkinkan member membuka web ,
melakukan login member dan masuk ke halaman produk
untuk melakukan pemilihan produk mana yang akan
dibelinya.
Actor Member dan Admin
Pre Condition Member harus masuk kedalam sistem akses member.
Main Flow Member dapat memilih menu sesuai dengan yang
dikehendaki.
Alternative Flow Jika member memilih menu produk maka member akan
dapat melihat semua produk-produk yang disediakan oleh
-online.com lalu tekan tombol beli untuk memilih dan
menginput barang.
48
Post Condition Jika use case berhasil dijalankan, barang yang dipesan
akan tersimpan di database sistem dan member harus
segera membayar jika barang ingin cepat dikirim. Jika
tidak maka barang tidak dikirim.
e. Use Case Diagram Keranjang Belanja
Keranjang Belanja
Member
Admin
Keranjang Belanja
<<include>>
<<extend>>
<<extend>>
selesai belanja
pesan lagi
<<extend>>ubah jumlah
hapus pesanan
<<extend>>
pesan barang
Gambar IV.8 Use Case Diagram Keranjang Belanja
Tabel IV.6 Dokumentasi Use Case Keranjang Belanja
Use Case Keranjang Belanja
Brief
Description
Use Case ini memungkinkan member membuka halaman
keranjang belanja untuk melihat semua transaksi pembelian
yang sudah dilakukan oleh member.
Actor Member dan Admin
Pre Condition Member harus masuk kedalam sistem akses member
Main Flow Member dapat memilih produk yang akan dibeli. Untuk
melihat semua transaksi pembelian maka dapat memilih
49
menu keranjang belanja.
Alternative Flow Jika member memilih menu keranjang belanja maka member
dapat melihat semua transaksi pembelian yang telah
dilakukan.
Post Condition Jika proses telah berhasil maka member melihat rincian
produk yang akan dibelinya serta disini member dapat
melihat total keseluruhan nominal harga yang harus dibayar.
f. Use Case Diagram Konfirmasi Pembayaran
member
Form
Konfirmasi
Konfirmasi
Bayar
Data
konfirmasi
<< extend >>
<<include>>
admin
Gambar IV.9 Use Case Diagram Konfirmasi Pembayaran
Tabel IV.7 Dokumentasi Use Case Konfirmasi Pembayaran
Use Case Konfirmasi Pembayaran
Brief Description Use Case ini memungkinkan Member membuka halaman
ubah konfirmasi Pembayaran untuk mengisi form
konfirmasi pembayaran sebagai bukti member telah
melakukan transfer pada norek .
Actor Member
50
Pre Condition Member harus menggunakan browser internet untuk
mengakses website .com serta melakukan login dan
bertransaksi.
Main Flow Ketikkan pada address bar .com saat pertama kali diakses
melalui browser internet, member menuju login member
untuk dapat mengaksesnya.
Alternative Flow Jika member login member maka tampil form login
member yang telah ada dan memasukan username dan
password sebagai kunci keamanan data.
Post Condition Jika proses telah berhasil maka akan tampil halaman
index member untuk selanjutnya member melakukan
transaksi dan menstransfer pembayarannya maka
dilakukan konfirmasi pembayaran.
g. Use Case Diagram Kontak Kami
Kontak Kami
Member admin
<<include>>
<<extend>>
data kontak
isi form kontak
kontak kami
Gambar IV.10 Use Case Diagram Kontak Kami
51
Tabel IV.8 Dokumentasi Use Case Kontak Kami
Use Case Kontak Kami
Brief Description Use Case ini memungkinkan pengguna web .com
membuka halaman kontak kami untuk dapat
mengirimkan kritik dan saran serta konsultasi melalui
media email
Actor Member dan admin
Precondition Member harus menggunakan browser internet untuk
mengakses website
Main Flow Saat website pertama kali diakses melalui browser
internet, member akan menuju pada halaman utama
yaitu index.php untuk kemudian dapat memilih menu
sesuai dengan yang dikehendaki
Alternatif Flow Jika member memilih menu kontak kami maka
member akan dapat mengisi di form untuk mengirim
kritik dan saran serta menanyakan seputar yang ada
di dalam .
Post Condition Jika proses telah berhasil data akan terkirim ke
database sistem.
2. Activity Diagram
Activity diagram menggambarkan berbagai alir aktivitas dalam sistem yang
sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin
52
terjadi dan bagaimana mereka berakhir. Activity diagram juga dapat
menggambarkan proses paralel yang mungkin terjadi pada beberapa eksekusi.
a. Activity Diagram Member
Member
Menutup
Browser
Website
Benar Salah
Proses Simpan Data
Konfirmasi
pembayaran
Logout
Membuka Browser
Login Member Login Gagal
Input Username
dan Password
Kirim Data
Login
Ruang
Member
tampil
Data
Melihat
Informasi
Lihat produk/
katalog
Pesan barang
Simpan data
Gambar IV.11 Activity Diagram Member
53
b. Activity Diagram Register Member
Pengunjung website
register member tampil form register member
input data member
simpan data
Data valid
tampil data berhasil disimpan
batal
Cek Email anda
register
Tidak
Gambar IV.12 Activity Diagram Register Member
c. Activity Diagram Login Member
WebsiteMember
Login Tampil Form Login
Input username dan password
login member
batal
tampil halaman utama memberLogin valid
Login tidak
valid
Gambar IV.13 Activity Diagram Login Member
54
d. Activity Diagram Keranjang Belanja
Gambar IV.14 Activity Diagram Keranjang Belanja
55
e. Activity Diagram Admin
ADMIN
Menutup
Browser
WEB
Benar Salah
Proses
Simpan
Data
Tampil Data
Logout
Membuka Browser
Halaman
Ruang
Login AdminLogin Gagal
Input Username
dan Password
Kirim Data
Login
Ruang Admin
Simpan
Data
Input/Edit
Database
Proses
Simpan
Informasi
Tampil Informasi
Simpan
Informasi
Input/Edit
Informasi
Web
Gambar IV.15 Activity Diagram Admin
56
3. Component Diagram
Component diagram digunakan untuk merepresentasikan dunia riil item
yaitu component software. Component software menetap di komputer bukan di
benak para analis, berikut gambar component software:
Gambar IV.16 Component Diagram
4. Development Diagram
Deployment diagram menunjukan susunan fisik suatu sistem, menunjukan
perangkat lunak mana yang berjalan pada perangkat lunak mana.
Gambar IV.17 Deployment Diagram
57
4.2. Desain
4.2.1. Database
1. ERD (Entity Relationship Diagram)
pembeli
hp
kodeposalamat
nama_lengkap
telpon_rumah
password
jml_transfer
melakukan
transaksi
no_struk tgl_struk
email total
M detail_transaksi barang
harga_barang
tgl_update
kategori_barang
detail_barang
email_adminkd_barang
gambar_barang
nama_barang
jumlah
kd_barangno_struk
1
M
1
Konfirmasi_
pembayaran
kirim
1
tgl_transferno_Struk
no_rek nama_transfer
bank_transfer
emailupload_struk
approve
M
suntotal
tgl_konfirmasi
Gambar IV.18
ERD (Entity Relationship Diagram)
58
2. Logical Structure Record
Produk
Kategori
Order Isi
emailNo_struk
Kd_barang
Kd_kategoriKonfirmasi
Id_pelanggan
No_struk
Pelanggan
Gambar IV.11.
Logical Record Structure Penjualan Online
3. Spesifikasi File
Dalam web ecommerce ini terdapat satu database yaitu database
“dbanugerah_foam” yang memiliki delapan tabel yaitu:
a. Tabel admin
Tabel ini berfungsi untuk menyimpan data admin. Tabel ini terdiri dari field-
field sebagai berikut:
Tabel IV.9 Spesifikasi Tabel admin
No Elemen Data Akronim Type Size Ket
1 Email Admin Email_admin Varchar 50 Primary Key
2 Nama Admin Nama_admin Varchar 100
3 Password password Varchar 100
b. Tabel Barang
Tabel ini berfungsi untuk menyimpan data barang. Tabel ini terdiri dari
field-field sebagai berikut:
59
Tabel IV.10 Spesifikasi Tabel Barang
No Elemen Data Akronim Type Size Ket
1 Kode Barang Kd_barang Varchar 8 Primary Key
2 Nama Barang Nm_barangg Varchar 100
3 Harga Barang Harga_barang Int 6
4 Detail Barang Detail_barang Blob
5 Gambar Barang Gambar_barang Varchar 30
6 Id_Kategori Id_Kategori Int 3
7 Email Admin Email_admin Int 5
8 Tanggal Update Tgl_update datetime
c. Tabel Komentar
Tabel ini berfungsi untuk menyimpan data komentar. Tabel ini terdiri dari
field-field sebagai berikut:
Tabel IV.11 Spesifikasi Tabel Komentar
No Elemen Data Akronim Type Size Ket
1 Id Komentar id_komentar Int 5 Primary Key
2 Id Berita id_berita Int 5
3 Nama Komentar nama_komentar Varchar 100
4 Isi Komentar isi_komentar Text
5 Tanggal Tgl datetime
6 Aktif Aktif char “1”,”2”
d. Tabel Berita
Tabel ini berfungsi untuk menyimpan data berita. Tabel ini terdiri dari field-
field sebagai berikut:
60
Tabel IV.12 Spesifikasi Tabel Berita
No Elemen Data Akronim Type Size Ket
1 ID Berita Id_berita Int 5 Primary Key
2 Judul Berita Judul_berita Varchar 100
3 Flash Berita Flash_berita Blob
4 Isi Berita Isi_berita Blob
5 Sumber Berita Sumber_berita Varchar 100
6 Id Admin Id_admin Varchar 10
7 Tanggal Update Tgl_update
e. Tabel detail_transaksi
Tabel ini berfungsi untuk menyimpan data detail transaksi. Tabel ini terdiri
dari field-field sebagai berikut:
Tabel IV.13 Spesifikasi Tabel Detail_transaksi
No Elemen Data Akronim Type Size Ket
1 Nomor Struk No_struk Varchar 14 Primary Key
2 Kode Barang Kd_barang Varchar 8
3 Jumlah Pesan Jml_pesan Int 3
4 Subtotal Int 8
f. Tabel pembeli
Tabel ini berfungsi untuk menyimpan data pembeli. Tabel ini terdiri dari
field-field sebagai berikut:
61
Tabel IV.14 Spesifikasi Tabel pembeli
No Elemen Data Akronim Type Size Ket
1 Email pembeli Email Varchar 100 Primary Key
2 Nama Lengkap Nama_lengkap Varchar 100
3 Alamat Pembeli Alamat Blob
4 Telepon Rumah Telpon_rumah Varchar 10
5 Handphone Hp Varchar 20
6 Kode pos Kodepos Varchar 5
7 Password Password 100
8 Aktif Aktif 1 ‘1’,’2’
g. Tabel konfirmasi_bayar
Tabel ini berfungsi untuk menyimpan data konfirmasi pembayaran. Tabel
ini terdiri dari field-field sebagai berikut:
Tabel IV.15 Spesifikasi Tabel konfirmasi_pembayaran
No Elemen Data Akronim Type Size Ket
1 Nomor Struk No_struk Varchar 15 Primary Key
2 Tanggal Transfer Tgl_transfer Date
3 Nama pentransfer Nama_transfer Varchar 100
4 No rekening No_rekening Varvhar 100
5 Bank Transfer Bank_transfer Varchar 100
6 Jumlah Transfer Jml_transfer Int 11
7 Bukti Struk Upload_struk Varchar 100
8 Email pentrasfer Email Varchar 100
9 Tanggal Konfirmasi Tgl_konfirmasi Datetime
10 Persetujuan Approve Char 1
62
h. Tabel Transaksi
Tabel ini berfungsi untuk menyimpan data transaksi. Tabel ini terdiri dari
field-field sebagai berikut:
Tabel IV.16 Spesifikasi Tabel Transaksi
No Elemen Data Akronim Type Size Ket
1 Nomor Struk No_struk Varchar 14 Primary Key
2 Tanggal Struk Tgl_struk Datetime
3 Email pembeli Email Varchar 100
4 Total pembelian Total Int 8
4.2.2. Software Architecture
1. Component Diagram
Component Diagram menggambarkan struktur dan hubungan antar
komponen perangkat lunak, termasuk ketergantungan diantaranya. Komponen
juga dapat berupa interface, yaitu kumpulan layanan yang disediakan sebuah
komponen untuk komponen lain, berikut gambar diagramnya.
Web Server
{documentation = HTML and PHP Response}
Database Server
{documentation = SQL response}
Browser
{documentation = HTML request}
-End1*-End2*
-End3*-End4*
Gambar IV.10.
Component Diagram
63
2. Deployment Diagram
Deployment Diagram atau Physical Diagram menggambarkan detail
bagaimana komponen di-deploy dalam infrastruktur sistem dengan menyediakan
gambaran bagaimana sistem secara fisik akan terlihat. Sistem terdiri dari node-
node dimana setiap node diwakili oleh sebuah kubus, berikut gambar diagramnya.
ServerServer
Workstation
Web ServerDatabase Server
Web Browser
-End1*
-End2*
-End3
*
-End4
*
Gambar IV.11.
Deployment Diagram
4.2.3. User Interface
Adapun tampilan – tampilan dari website yang penulis rancang terdiri dari :
Halaman Beranda
Halaman beranda adalah tampilan yang muncul di awal dari website yang
pertama kali di lihat oleh pengunjung web
64
Gambar IV.20 Tampilan Halaman Beranda
Halaman Register dan Log in Member
Halaman register member adalah tampilan yang muncul pada saat
pengunjung ingin menjadi member untuk bertransaksi atau pemesanan. Setelah
Register maka dapat dilakukan Log in.
65
Gambar IV.21 Tampilan Halaman Register Member
Halaman Beranda Member
Halaman ini akan tampil apabila member telah login dengan benar. Sehingga
dapat melakukan transaksi atau pemesanan.
66
Gambar IV.22 Tampilan Halaman Beranda Member
Halaman Produk
Pada halaman ini, member dapat melihat produk-produk yang dijual oleh
toko dan dapat bertransaksi atau dapat melakukan pemesanan. Tampilan dari
halaman ini
67
Gambar IV.23 Tampilan Halaman Produk
68
Halaman Keranjang Belanja
Pada halaman ini, member dapat melihat produk apa saja yang sudah
dipesan atau yang masuk ke dalam keranjang belanja. Member juga dapat
mengedit pemesanan. Tampilan dari halaman ini :
Gambar IV.24 Tampilan Halaman Keranjang Belanja
Halaman Cetak Invoice
Pada halaman ini, member mendapatkan invoice sebagai bukti bahwa telah
melakukan transaksi pemesanan. Tampilan dari halaman ini :
69
Gambar IV.25 Tampilan Halaman Cetak Invoice
Halaman Konfirmasi Pembayaran
Pada halaman ini, member mengkonfirmasi pembayarannya jika telah
menstransfer uangnya ke rekening . Tampilan dari halaman ini :
70
Gambar IV.26 Tampilan Konfirmasi Pembayaran
Halaman Login Admin
Pada halaman ini, administrator wajib login untuk keamanan data agar dapat
memasuki halaman atau ruang administrator. Tampilan dari halaman ini :
71
Gambar IV.28 Tampilan Halaman Login Admin
Halaman Home Admin
Halaman home Admin adalah halaman home yang hanya dapat dilihat oleh
administrator saja dan tidak dapat di lihat oleh pengunjung atau member lainnya.
Gambar IV.29 Tampilan Halaman Home admin
72
Halaman Input Barang
Halaman ini ditampilkan untuk user khususnya administrator untuk dapat
menginput barang baru . Berikut tampilannya :
Gambar IV.30 Tampilan Halaman input barang
Halaman Laporan
Halaman ini juga digunakan untuk mencetak transaksi serta barang yang
masuk ke dalam toko .
73
Gambar IV.32 Tampilan Halaman Laporan
Halaman Approve Bayar
Halaman ini juga digunakan untuk menyatakan lunas transaksi yg telah
dilakukan di toko .
Gambar IV.33 Tampilan Halaman Approve Bayar
4.3. Code Generation
Form Keranjang Belanja
<?php
include("sesi_user.php");
include("atas_user.php");
$no_strukweb = $_SESSION["no_struk_session"];
?>
<div class="center_content">
74
<div class="left_content">
<div class="title"><span class="title_icon"><img
src="images/bullet1.gif" alt="" title="" /></span>Keranjang barang</div>
<div class="feat_prod_box">
<!--Mulai ketik -->
<script src="SpryAssets/SpryValidationTextField.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet"
type="text/css" />
<table width="100%" border="0" cellspacing="2" cellpadding="1"
bgcolor="#003333" style="font-size:10px">
<tr>
<td bgcolor="#FFFF99"><strong>Kode barang</strong></td>
<td bgcolor="#FFFF99"><strong>Nama barang</strong></td>
<td bgcolor="#FFFF99"><strong>Harga barang</strong></td>
<td bgcolor="#FFFF99"><strong>Gambar</strong></td>
<td bgcolor="#FFFF99"><strong>Subtotal</strong></td>
<td bgcolor="#FFFF99"><strong>Tambah</strong></td>
<td bgcolor="#FFFF99"><strong>Hapus</strong></td>
</tr>
<?php
//buat query untuk ambil semua data keranjang
$keranjang = "SELECT
barang.kd_barang
, barang.nm_barang
, barang.harga_barang
, barang.gambar_barang
, detail_transaksi.jml_pesan
, detail_transaksi.subtotal
, transaksi.no_struk
, transaksi.tgl_struk
, pembeli.email
, pembeli.nama_lengkap
FROM
detail_transaksi
INNER JOIN barang
ON (detail_transaksi.kd_barang = barang.kd_barang)
INNER JOIN transaksi
ON (detail_transaksi.no_struk = transaksi.no_struk)
INNER JOIN pembeli
ON (transaksi.email = pembeli.email)
where transaksi.no_struk = '$no_strukweb' and transaksi.email = '$email'";
75
//echo $keranjang;
//jalankan query diatas
$query_keranjang = mysql_query($keranjang, $koneksi);
//lakukan perulangan dgn WHILE untuk tampilkan di web
while($isi_keranjang = mysql_fetch_array($query_keranjang))
{
?>
<tr>
<td valign="top" bgcolor="#FFFFFF"> <?php echo
$isi_keranjang["kd_barang"];?> </td>
<td valign="top" bgcolor="#FFFFFF"><?php echo
$isi_keranjang["nm_barang"];?></td>
<td align="right" valign="top" bgcolor="#FFFFFF">Rp. <?php echo
number_format($isi_keranjang["harga_barang"],2,",",".");?></td>
<td align="center" valign="top" bgcolor="#FFFFFF">
<a href="barang/<?php echo $isi_keranjang["gambar_barang"];?>"
class="pirobox" title="<?php echo $isi_keranjang["nm_barang"];?><br><?php
echo $isi_keranjang["detail_barang"];?>">
<img src="barang/<?php echo $isi_keranjang["gambar_barang"];?>"
width="75">
</a>
</td>
<td align="right" valign="top" bgcolor="#FFFFFF">Rp. <?php echo
number_format($isi_keranjang["subtotal"],2,",",".");?></td>
<td valign="top" bgcolor="#FFFFFF"><form id="form1" name="form1"
method="post" action="">
<span id="sprytextfield1">
<input name="jml_pesan" type="text" id="jml_pesan" size="5"
maxlength="3" value="<?php echo $isi_keranjang["jml_pesan"];?>" />
<span class="textfieldRequiredMsg">A value is required.</span><span
class="textfieldInvalidFormatMsg">Invalid format.</span></span>
<input type="submit" name="cmdtambah" id="cmdtambah"
value="Tambah" />
<input name="no_struk" type="hidden" id="no_struk" value="<?php echo
$no_strukweb;?>" />
<input name="kd_barang" type="hidden" id="kd_barang" value="<?php
echo $isi_keranjang["kd_barang"];?>" />
<input name="harga_barang" type="hidden" id="harga_barang"
value="<?php echo $isi_keranjang["harga_barang"];?>" /></form></td>
<td valign="top" bgcolor="#FFFFFF"><form id="form2" name="form1"
method="post" action="">
<input type="submit" name="cmdhapus" id="cmdhapus" value="Hapus" />
<input name="no_struk" type="hidden" id="no_struk" value="<?php echo
$no_strukweb;?>" />
<input name="kd_barang" type="hidden" id="kd_barang" value="<?php
echo $isi_keranjang["kd_barang"];?>" />
76
</form></td>
</tr>
<?php
$total = $total + $isi_keranjang["subtotal"];
} ?>
<tr>
<td colspan="6" align="right" bgcolor="#FFFFFF">Total</td>
<td align="right" bgcolor="#FFFFFF">Rp. <?php echo
number_format($total,2,",",".");?></td>
</tr>
<tr>
<td colspan="7" align="center" bgcolor="#FFFFFF"><form id="form3"
name="form1" method="post" action="">
<input type="submit" name="cmdkosong" id="cmdkosong"
value="Kosongkan Keranjang Belanja" />
<input name="no_struk" type="hidden" id="no_struk" value="<?php echo
$no_strukweb;?>" />
</form></td>
</tr>
</table>
<p>Catatan : </p>
<p>Periksa kembali data keranjang belanja anda, jika sudah sesuai dengan
pesanan anda, silahkan klik <a href="struk.php">CHECK OUT</a> untuk
mencetak struk belanja anda, jika sudah mencetak harap hubungi admin untuk
konfirmasi data pesanan.</p>
<?php
//Jika mau hapus salah satu barang dr keranjang belanja
if($_POST["cmdhapus"])
{
$no_struk = mysql_real_escape_string(htmlentities($_POST["no_struk"]));
$kd_barang =
mysql_real_escape_string(htmlentities($_POST["kd_barang"]));
//hapus data inputan kedalam DB
$hapus = "delete from detail_transaksi where no_struk = '$no_struk' and
kd_barang = '$kd_barang' ";
//Jalankan query diatas
$qryhapus = mysql_query($hapus,$koneksi);
//Jika data terhapus, maka munculkan pesan dan hapus gambar
if($qryhapus)
{
?>
<script language="javascript">
alert("Data sudah terhapus");
77
document.location="keranjang_barang.php";
</script>
<?php exit();
} else
{
?>
<script language="javascript">
alert("Data GAGAL terhapus");
history.go(-1);
</script>
<?php exit();
}
}
?>
<?php
//Jika mau hapus salah satu barang dr keranjang belanja
if($_POST["cmdkosong"])
{
$no_struk = mysql_real_escape_string(htmlentities($_POST["no_struk"]));
//hapus data inputan kedalam DB
$hapus = "delete from detail_transaksi where no_struk = '$no_struk'";
//Jalankan query diatas
$qryhapus = mysql_query($hapus,$koneksi);
//Jika data terhapus, maka munculkan pesan dan hapus gambar
if($qryhapus)
{
?>
<script language="javascript">
alert("Data sudah terhapus");
document.location="keranjang_barang.php";
</script>
<?php exit();
} else
{
?>
<script language="javascript">
alert("Data GAGAL terhapus");
history.go(-1);
78
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1",
"integer");
</script>
<?php exit();
}
}
?>
<?php
//Jika mau hapus salah satu barang dr keranjang belanja
if($_POST["cmdtambah"])
{
$no_struk = mysql_real_escape_string(htmlentities($_POST["no_struk"]));
$kd_barang =
mysql_real_escape_string(htmlentities($_POST["kd_barang"]));
$jml_pesan =
mysql_real_escape_string(htmlentities($_POST["jml_pesan"]));
$harga_barang =
mysql_real_escape_string(htmlentities($_POST["harga_barang"]));
$subtotal = $jml_pesan * $harga_barang;
//update data inputan kedalam DB
$tambah = "update detail_transaksi set jml_pesan = '$jml_pesan',subtotal =
'$subtotal' where no_struk = '$no_struk' and kd_barang = '$kd_barang' ";
//Jalankan query diatas
$qrytambah = mysql_query($tambah,$koneksi);
//Jika data tertambah, maka munculkan pesan dan tambah gambar
if($qrytambah)
{
?>
<script language="javascript">
alert("Data sudah tertambah");
document.location="keranjang_barang.php";
</script>
<?php exit();
} else
{
?>
<script language="javascript">
alert("Data GAGAL tertambah");
history.go(-1);
</script>
<?php exit();
}
}
79
?>
<!--Akhir ketik -->
<div class="clear"></div>
</div>
<div class="new_products"></div>
<div class="clear"></div>
</div><!--end of left content-->
<?php include("kanan_user.php")?>
<!--end of right content-->
<div class="clear"></div>
</div><!--end of center content-->
<?php include("bawah.php")?>
4.5. Testing
1. Pengujian Terhadap Halaman Login
Tabel III.10.
Pengujian Halaman Login
No. Skenario Pengujian Test Case Hasil yang
diharapkan
Hasil
Pengujian
Kesimpulan
80
1. Mengisi data alamat
email ke field id
admin dan password
yang sudah di
enkripsi pada field
password kemudian
klik tombol login
Id_admin:
(user@yahoo.co
m
Password :
(password)
Data email dan
password benar,
maka akan
masuk ke
halaman admin
Sesuai
harapan
Valid
2. Id admin dan
password tidak diisi
kemudian klik
tombol login
Id_admin:
(kosong)
Password :
(kosong)
Sistem akan
menolak
akses user dan
menampilkan
“Id admin
dan password
tidak
dikenal
Sesuai
harapan
Valid
2. Pengujian Terhadap Menu Produk
Tabel III.11.
Pengujian Input Data Produk
No. Skenario Pengujian Test Case Hasil yang
diharapkan
Hasil
Pengujian
Kesimpulan
1. Mengisi form data
produk dengan
lengkap
Klik button
simpan
Data produk
yang sudah diisi
tersimpan di
database
Sesuai
harapan
Valid
81
3. Pengujian Terhadap Menu Katalog Produk
Tabel III.13.
Pengujian Menu Pesan Produk
No. Skenario Pengujian Test Case Hasil yang
diharapkan
Hasil
Pengujian
Kesimpulan
1. Menampilkan data
produk dengan
tampilan gambar dan
harga dengan button
pesan untuk
melakukan transaksi
pemesanan
Klik button
pesan
Secara otomatis
tersambung ke
keranjang
belanja
Sesuai
harapan
Valid
4. Pengujian Terhadap Menu Keranjang Belanja
Tabel III.14.
Pengujian Menu Keranjang Belanja
No. Skenario Pengujian Test Case Hasil yang
diharapkan
Hasil
Pengujian
Kesimpulan
1. Menampilkan table
keranjang belanja
yang berisikan
rincian produk
belanjaan
Klik link
keranjang
setelah
melakukan
proses belanja
Table keranjang
berhasil
ditampilkan
Sesuai
harapan
Valid
2. Menuju tahap Klik tombol Form Sesuai Valid
82
selanjutnya yaitu
form konfirmasi
pembayaran
proses setelah
selesai belanja
konfirmasi
pembayaran
muncul
harapan
3. Kembali ke catalog
produk untuk
memilih produk
yang diinginkan
Klik link
belanja lagi
Pelanggan
dapat kembali
ke catalog
produk
untuk memilih
kembali
belanjaan yang
baru
Sesuai
harapan
Valid
4. Data belanjaan
yang dipesan
terhapus
Klik tombol
hapus pada
data pesanan
yang akan di
hapus .
Data belanjaan
yang di hapus
berhasil
terhapus
Sesuai
harapan
Valid
5. Jumlah beli produk
yang
di update,
berhasil berubah
Klik tombol
Update pada
pesanan
yang akan
dihapus .
Jumlah beli
produk
yang berada di
keranjang
berhasil
berubah
Sesuai
harapan
Valid
83
5. Pengujian Terhadap Menu Pembeli
Tabel III.15.
Input Data Pemesanan
No. Skenario Pengujian Test Case Hasil yang
diharapkan
Hasil
Pengujian
Kesimpulan
1. Mengisi form biodata
lengkap pembeli
Klik button
simpan
Data pembeli
terismpan ke
dalam database
Sesuai
harapan
Valid
4.5.Support
Didalam mengimplementasikan perancangan dan pembuatan situs web yang
penulis jadikan sebagai penulisan skripsi tentunya membutuhkan sarana-sarana
pendukung / tools, yaitu terdiri dari perangkat keras dan perangkat lunak.
4.5.1. Publikasi Web
A. Nama Domain
Nama domain (domain name) adalah nama unik yang diberikan untuk
mengidentifikasi nama server komputer seperti web server atau email server di
jaringan komputer ataupun internet. Nama domain berfungsi untuk mempermudah
pengguna di internet pada saat melakukan akses ke server, selain juga dipakai
untuk mengingat nama server yang dikunjungi tanpa harus mengenal deretan
angka yang rumit yang dikenal sebagai IP address. Nama domain ini juga dikenal
sebagai sebuah kesatuan dari sebuah situs web seperti contoh
“www.nusamandiri.ac.id”. Nama domain kadang-kadang disebut pula dengan
84
istilah URL, atau alamat website. Untuk itu toko ingin memiliki nama domain
sendiri, dengan nama domain atau URL : http://anugerahfoam.com.
B. Kapasitas Hosting
Hosting adalah jasa layanan internet yang menyediakan server-server
untuk disewakan sehingga memungkinkan organisasi atau individu menempatkan
informasi di internet. Kapasitas hosting yang ditawarkan penyedia jasa hosting
pun cukup beragam. Melihat kebutuhan storage database pada web ini sedikit
lebih besar, maka kapasitas hosting dari web ini adalah sebesar 14 MB. Storage
sebesar itu cukup untuk menangani database yang ada.
4.5.2. Spesifikasi Hardware dan Software
Suatu sistem pada program tidak dapat berdiri sendiri, melainkan
membutuhkan sarana pendukung untuk dapat berjalan dengan baik. Sarana
pendukung yang dibutuhkan antara lain sebagai berikut : perangkat keras
(hardware), perangkat lunak (software) dan pengguna (brainware).
1. Spesifikasi Hardware
Perangkat keras yang dimaksud disini adalah seperangkat alat atau elemen
elktronik yang dapat membantu system yang diusulkan sehingga program yang
diusulkan penulis dapat bekerja dengan baik. Perangkat keras yang dibutuhkan
dibagi atas dua bagian yaitu perangkat keras untuk web server dan perangkat
keras client.
Adapun perangkat keras minimal yang diperlukan oleh server adalah
sebagai berikut :
85
a. Processor : Pentium IV 2.4 Mhz
b. Memory Size (RAM) : 1 GB (DDRAM)
c. Monitor : SVGA Colour 15”
d. Harddisk : 80 GB
e. Keyboard : 107 Keys/P
f. Mouse : Standard Mouse
Adapun perangkat keras minimal yang diperlukan oleh client adalah
sebagai berikut :
a. Processor : Pentium II-400 Mhz
b. Memory Size (RAM) : 256 MB (DDRAM)
c. Monitor : SVGA Colour 15”
d. Harddisk : 20 GB
e. Keyboard : 107 Keys/P
f. Mouse : Standard Mouse
g. Printer : Deksjet
2. Spesifikasi Software
Perangkat lunak adalah suatu rangkaian atau susunan instruksi yang harus
benar-benar sesuai dengan urutan yang benar. Fungsi software untuk menyiapkan
aplikasi program sehingga kinerja seluruh peralatan yang ada pada komputer
dapat dikontrol.
Adapun perangkat lunak minimal yang diperlukan web server adalah
sebagai berikut :
a. Operating System : Windows XP Professional
86
b. Bahasa Program : PHP
c. Interpreter : PHP Engine versi 4.3.1
d. Database Server : MySQL Server versi 4.3.1
e. Web Server : Apache versi 1.3.27 (for windows)
f. Database Tools : PhpMyAdmin versi 2.7.0-p14
Adapun perangkat lunak minimal yang diperlukan untuk client adalah
sebagai berikut:
a. Operating System : Windows 9x/ME/2000/XP
b. Browser : Mozilla Firefox
Selain komponen sistem perangkat keras dan perangkat lunak yang telah
disebutkan, ada komponen tambahan yang dibutuhkan untuk mendukung
pembuatan E-commerce . Perangkat lunak lainnya tersebut diantara lain:
1. PHP Editor, berfungsi sebagai media untuk menuliskan scripts PHP. Dalam
penulisan skripsi ini , digunakan PHP Editor dan Adobe Dreamweaver CS3.
2. Browser, berfungsi untuk melihat tampilan perintah-perintah PHP yang telah
dijalankan di web server. Dalam hal ini penulis menggunakan Mozilla
Firefox.
3. Photo Editor, berfungsi untuk membuat ataupun mengubah gambar. Dalam
hal ini penulis menggunaka Adobe Photoshop CS3.
4.6. Spesifikasi Dokumen Sistem Usulan
1. Analisa Keluaran
Adapun analisa keluaran yang dihasilkan dari sistem yang berjalan adalah
sebagai berikut :
87
1. Nama Masukan : Bukti Pembelian Online
Sumber : Administrasi
Fungsi : Sebagai bukti pembelian
Media : kertas
Rangkap : 1 (satu) lembar
Frekuensi : Setiap ada transaksi pembelian barang
Format : Lihat Lampiran B – 1
Hasil Analisa : Sudah cukup baik untuk keperluan analisa
2. Analisa Masukan
Adapun analisa masukan yang dihasilkan dari sistem yang berjalan adalah
sebagai berikut :
1. Nama Masukan: Laporan Penjualan
Sumber : Administrasi
Fungsi : Sebagai bukti penjualan
Media : kertas
Rangkap : 1 (satu) lembar
Frekuensi : Setiap sebulan sekali
Format : Lihat Lampiran B – 2
Keterangan : Admin memberikan laporan penjualan kepada pimpinan
perusahaan
Hasil Analisa : Sudah cukup baik untuk keperluan analisa