BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. …

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.


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.


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.


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

email

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


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


Tabel IV.11 Spesifikasi Tabel Komentar


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


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


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


61

Tabel IV.14 Spesifikasi Tabel pembeli


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



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


Tabel IV.16 Spesifikasi Tabel Transaksi



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



<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" />


$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" />


$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

{

?>


alert("Data GAGAL terhapus");

history.go(-1);

</script>

<?php exit();

}

}

?>

<?php


if($_POST["cmdkosong"])

{


//hapus data inputan kedalam DB

$hapus = "delete from detail_transaksi where no_struk = '$no_struk'";


$qryhapus = mysql_query($hapus,$koneksi);

//Jika data terhapus, maka munculkan pesan dan hapus gambar

if($qryhapus)

{

?>


alert("Data sudah terhapus");


</script>

<?php exit();

} else

{

?>


alert("Data GAGAL terhapus");

history.go(-1);

78

var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1",

"integer");

</script>

<?php exit();

}

}

?>

<?php


if($_POST["cmdtambah"])

{


$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' ";


$qrytambah = mysql_query($tambah,$koneksi);

//Jika data tertambah, maka munculkan pesan dan tambah gambar

if($qrytambah)

{

?>


alert("Data sudah tertambah");


</script>

<?php exit();

} else

{

?>


alert("Data GAGAL tertambah");

history.go(-1);

</script>

<?php exit();

}

}

79

?>



<div class="clear"></div>

</div>

<div class="new_products"></div>


</div>

<?php include("kanan_user.php")?>




</div>

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

([email protected]

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


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


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


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


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

http://www.nusamandiri.ac.id/

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 :

http://anugerahfoam.com/

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

BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. …

Documents

Transcript of BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. …