repository.bsi.ac.id · Web viewBAB IV. RANCANGAN SISTEM DAN PROGRAM USULAN. 4.1. Analisis Kebutuhan Software. Tahapan Analisis. Sistem pemesanan tas online berbasis web dimana penjual

BAB IV

RANCANGAN SISTEM DAN PROGRAM USULAN

4.1. Analisis Kebutuhan Software

A. Tahapan Analisis

Sistem pemesanan tas online berbasis web dimana penjual dan pembeli

tidak bertatap muka secara langsung. Calon pembeli melakukan pemesanan

tas melalui media browser. Berikut ini spesifikasi kebutuhan (system

requirement) dari sistem e-commerce.

Halaman Front-page:

A.1. User dapat memilih barang yang akan dibeli dan ditambahkan ke

keranjang belanja.

A.2. User dapat melakukan konfirmasi pembayaran.

A.3 Sistem dapat melakukan kalkulasi jumlah pemesanan dan total

pembelian.

A.4. User dapat melakukan checkout

Halaman Admin:

B.1. Admin dapat mengelola data produk tas.

B.2. Admin dapat mengelola data transaksi pemesanan tas.

B.3. Admin dapat menyaring pesan yang masuk.

B.4. Admin dapat membuat laporan pemesanan tas.

20

21

B. Use Case Diagram

Use case diagram adalah deskripsi fungsi dari sebuah sistem perspektif

pengguna. Use case terdiri dari sekumpulan skenario yang dilakukan oleh

seorang actor

1. Use Case Diagram Belanja Online Halaman User

Gambar IV.1.

Use Case Diagram Belanja Online Halaman User

Tabel IV.1

Deskripsi Use Case Diagram Belanja Online Halaman User

Use Case Name CheckoutRequirements A.2, A.3, A.4, A.5

Goal User dapat melakukan pembelian secara online via web

Pre-Conditions User memilih barangPost-Conditions -

Failed end Conditions

User membatalkan checkout, kemungkinan user ingin menambah barang kembali atau membatalkan pembelian.

Primary Actors User

Main Flow/Basic Path

1) User memilih icon checkout.2) System menampilkan rincian belanja.3) User memasukan alamat pengiriman dan

melanjutkan.4) System menampilkan pilihan metode

pembayaran.5) User memilih metode pembayaran dan

melanjutkan.6) System memproses penjualan dan mengirimkan

rincian penjualan ke email user.Invariant A: -

22

2. Use Case Diagram Penjualan Online Halaman Admin

Gambar IV.2.

Use Case Diagram Penjualan Online Halaman Admin

Tabel IV.2

Deskripsi Use Use Case Diagram Pemesanan Online Halaman Admin

Use Case Name Mengelola Data BarangRequirements -Goal -Pre-Conditions -Post-Conditions -Failed end Conditions -Primary Actors -Main Flow/Basic Path -

Alternate Flow/Invariant A

A.2. Admin mengetikkan nama barang atau kode barangA.3. Admin memilih tombol “Search”A.2. System menampilkan data barang yang dicari.A.2.Admin memilih tombol “Edit”A.2.System menampilkan form data barang.A.2.Admin mengedit data barang.

Invariant B:

B.2. Admin memilih barang.B.3.Admin memilih tombol hapus.B.4. System menampilkan dialog konfirmasi penghapusan.B.5. Admin memilih tombol “YES”B.6. System menghapus data barang.

23

C. Activity Diagram

1. Activity Diagram Belanja Online Halaman Front Page

Gambar IV.3.

Activity Diagram Belanja Online Halaman Front Page

2. Activity Diagram Belanja Online Halaman Admin

Gambar IV.4.

Activity Diagram Belanja Online Halaman Admin

24

4.2. Desain

Pada tahapan ini akan menjelaskan tentang desain database, desain

software architecture, dan desain interface dari sistem yang sedang dibuat.

4.2.1. Database

Menggambarkan hubungan antar tabel yang dibuat beserta relasi antar

tabel. Dalam penggambarannya penulis menggunakan ERD (Entity Relationship

Diagram) dan spesifikasi filenya.

1. Entity Relationship Diagram

Entity Relationship Diagram atau diagram hubungan entitas dari sistem

penjualan yang diusulkan berfungsi untuk menggambarkan model basis data yang

akan dipakai. Model basis data yang digunakan adalah basis data relasional,

dimana setiap entitas saling memiliki hubungan dengan entitas lain. Entitas dan

hubungan yang digambarkan dalam model ERD tersebut nantinya akan dipakai

untuk merancang basis data sistem penjualan. Berikut ERD sistem usulan :

Gambar IV.5.

Diagram ERD

25

2. Logical Record Structure

Gambar IV.6.

Logical Record Structure Penjualan Online

3. Spesifikasi File

Spesifikasi file yang terdiri dari tabel-tabel yang terintegrasi pada database

rolex group data tersebut diproses untuk mendapatkan hasil yang menunjang

sistem kerja yang diinginkan. Adapun penjelasan dan spesifikasi file tersebut

adalah sebagai berikut :

a. Spesifikasi File Tabel Customers

Nama Database : toko

Nama File : customers

Akronim : customers.myd

Tipe File : File Master

Akses File : Random Access File

Panjang Record : 224 byte

Kunci Field : id konsumen

26

Tabel IV.3

Spesifikasi File Tabel Customers

No Elemen Data Nama Field Type Size Keterangan(collation)

1 Id konsumen id konsumen Varchar 13 Primary Key

2 Nama Nama Varchar 50

3 Alamat Alamat Text

4 Propinsi Propinsi Varchar 50

5 Kota Kota Varchar 50

6 Kodepos Kodepos Varchar 5

7 Phone Phone Varchar 20

8 Email Email Varchar 50

9 Nama_bank nama_bank Varchar 40

10 Cabang Cabang Varchar 40

11 Atas_nama atas_nama Varchar 50

12 Rekening Rekening Varchar 20

b. Spesifikasi File Tabel Orders


Nama File : orders

Akronim : orders.myd



Panjang Record : 547byte

27

Kunci Field : no_faktur

Tabel IV.4

Spesifikasi File Tabel Orders


1 No_faktur no_faktur Varchar 13 Primary Key

2 Idkonsumen idkonsumen Varchar 13

3 Id_product id_product Int 11

4 Jumlah Jumlah Int 5

5 Subtotal Subtotal Double

6 Tanggal Tanggal Date

7 Status Status Varchar 1

c. Spesifikasi File Tabel Carts


Nama File : carts

Akronim : carts.myd




Kunci Field :

28

Tabel IV.5

Spesifikasi File Tabel Carts


1 Id Id Int 5

2 Nofaktur Nofaktur Varchar 13

3 Jumlah jumlah Int 3

4 Id_product id_product Int 11

5 Subtotal subtotal Double

d. Spesifikasi File Tabel Categories


Nama File : categories

Akronim : categories.myd




Kunci Field : no

Tabel IV.6

Spesifikasi File Categories

No Elemen Data Nama Field Type Size Keterangan

1 Id Id_category Int 11

2 Category Category Varchar 30

29

e. Spesifikasi File Tabel Product


Nama File : product

Akronim : product.myd




Kunci Field : id_produk

Tabel IV.7

Spesifikasi File Tabel Product


1 Id_product id_product Int 11 Primary Key

2 Id_category id_category Int 11

3 Nama Nama Varchar 100

4 Id_merk id_merk Int 11

5 Gambar gambar Text

6 Harga harga Double

7 Stok Stok Int 5

8 Spesifikasi spesifikasi Text

9 Keterangan keterangan Text

10 Tanggal_masu

k

tanggal_masuk Datetime

30

4.2.2. Software Architecture

A. Component Diagram

Component diagram menggambarkan struktur dan hubungan antar komponen

piranti lunak, termasuk ketergantungan diantaranya. Component Diagram juga

dapat berupa interface yang berupa kumpulan layanan yang disediakan oleh

komponen untuk komponen lainnya.

Gambar IV.7

Component Diagram

deployment Deployment

Workstation

Windows 7 Mozilla Firefox

WebServer

Apache

Database Server

PHP

31

B. Deployment Diagram

Deployment diagram menyediakan gambaran bagaimana sistem secara fisik

akan terlihat. Sistem terdiri dari node-node dimana setiap node diwakili untuk

sebuah kubus. Garis yang menghubungkan antara 2 kubus menunjukkan

hubungan diantara kedua node tersebut. Berikut gambaran deployment diagram.

Gambar IV.8

Deployment Diagram

4.2.3. User Interface

Menggambarkan tampilan program dari sistem usulan.

a. Halaman Home

32

Gambar IV.9

Tampilan Halaman Home

b. Halaman Tentang Kami

Gambar IV.10

Tampilan Tentang Kami

c. Halaman Komentar

\

Gambar IV.11

Tampilan Halaman Komentar

33

d. Halaman Produk

Gambar IV.12

Tampilan Halaman Produk

e. Halaman invoice online

Gambar IV.13

Tampilan Halaman Invoice Online

34

f. Halaman Login Admin

Gambar IV.14

Tampilan Halaman Login Admin

g. Halaman Beranda Admin

35

s

Gambar IV.15

Tampilan Halaman Beranda Admin

h. Halaman Produk Admin

Gambar IV.16

Tampilan Halaman Produk Admin

i. Halaman Struk Pemesanan

36

Gambar IV.17

Tampilan Halaman Daftar Pemesanan

j. Halaman Laporan

Gambar IV.18

Tampilan Halaman Laporan

4.3. Code Generation

Dalam program ini penulis menggunakan code generation permrograman

terstrusktur. Pada tahapan ini penulis menampilkan listing program pada form

yang terkait.

A. Listing Indeks

<?php $this->element('rupiah'); ?>

<table width="100%" align="center">

37

<tr>

<td valign="top" width="48%"><h3> <font color="#0000FF">

Produk Baru </font> </h3>

<?php

foreach ($products as $product):

$gambar = $product['Product']['gambar'];

$nama = $product['Product']['nama'];

?>

<table width="100%">

<tr>

<td valign=top width=80>

<?php

echo $this->Html->image("products/$gambar",

array ('width' => 75, 'height' => 75)); ?></td>

<td valign="top"> <?php echo $this->Html-

>link($nama, array('action' => '../products/view', $product['Product']

['id_product'])); ?> <br>

Rp. <?php echo rupiah($product['Product']['harga']);

?> </td>

</tr>

</table>

<?php endforeach; ?>

</td>

<td width="4%"></td>

38

<td valign="top" width="48%"><h3><div align="right"> <font

color="#0000FF"> Promo Baru </font> </h3>

<?php

foreach ($promotions as $promotion):

$keterangan = $promotion['Promotion']['keterangan'];

$keterangan = substr ($keterangan, 0, 250);

$promo = $promotion['Promotion']['nama'];

?>

<table width="100%">

<tr>

<td align="justify"> <?php echo $this-

>Html->link($promo, array('action' => '../promotions/view',

$promotion['Promotion']['id'])); ?> <br>

<?php echo $keterangan; ?>

<br><br>

</td>

</tr>

</table>


</td>

</tr>

</table>

<table>

39

<tr>

<td align="center" colspan="2"> <h4> <font color=#0000FF>

BEST PRODUCTS </font> </h4> </td>

</tr>

<?php

$kolom = 2;

$i = 0;

foreach($orders as $order):

$image = $order['Product']['gambar'];

$isi = $order['Product']['spesifikasi'];

$isi = substr ($isi, 0, 250);

$harga = $order['Product']['harga'];

if ($i >= $kolom) {

echo "<tr></tr>";

$i = 0;

}

$i++;

?>

<td align=center width=20% valign=top>

<div id=kotak>

<?php echo $this->Html->link($order['Product']['nama'],

array('action' => '../products/view', $order['Product']['id_product'])); ?>

</div>

<div id=kotakisi>

40

<table border=0 width=100%>

<tr>

<td height=150 valign=top>

<?php echo $this->Html-

>image("products/$image", array ('width' => 75, 'height' => 75)); ?>

<br /></td>

<td width=80% valign=top> <?php

echo $isi; ?> ... <br /><br />

<strong>Rp.</strong> <?php echo

rupiah($harga); ?>

</td>

</tr>

</table>

</td>


</table>

B. Listing Produk

<h4><?php echo $form->Html->link(__('Add Data', true), 'add'); ?></h4>

<table border=1 cellpadding=0 cellspacing=0>

<tr>

<th width=30> <?php echo $paginator->sort('id_product'); ?></th>

<th width=80> <?php echo $paginator->sort('id_category'); ?> </th>

<th width=150> <?php echo $paginator->sort('product'); ?> </th>

<th width=60> <?php echo $paginator->sort('harga'); ?> </th>

41

<th colspan=3> Action </th>

</tr>

<?php

foreach ($products as $product):

?>

<tr>

<td> <?php echo $product['Product']['id_product']; ?> </td>

<td align=center> <?php echo $product['Product']['id_category']; ?> </td>

<td> <?php echo $product['Product']['nmbrg']; ?> </td>

<td align=right> <?php echo $product['Product']['harga']; ?> </td>

<td width=50 align=center> <?php echo $form->Html->link('View',

array('action' => 'view', $product['Product']['id_product'])); ?> </td>

<td width=50 align=center> <?php echo $form->Html->link('Edit',

array('action' => 'edit', $product['Product']['id_product'])); ?> </td>

<td width=50 align=center> <?php echo $form->Html->link('Delete',

array('action' => 'delete', $product['Product']['id_product']), null, 'Are you

sure you want to delete this product?'); ?> </td>

</tr>


</table>

<?php echo $this->element('paging'); ?>

C. Listing Login Admin

42

<table width="100%" border="0" align="left">

<tr>

<td colspan="2" align="left" width="80%"><p>

<font color="#0033CC" size="3" face="Tahoma">Selamat

Datang</font>

<font color="#0033CC"

size="2"><br>................................................................................................

..................................</font></p>

</td>

</tr>

<tr>

<td width="10%"> </td>

<td width="90%" align="justify"><font face="Tahoma" size="2">Hai

<strong>Administrator</strong>, selamat datang di halaman

Administrator website toko rolex group.

Silahkan klik menu pilihan yang berada di sebelah kiri untuk mengelola

content website.</font></td>

</tr>

</table>

4.4. Testing

Toko Rolex Group telah menggunakan sistem web aplikasi penjualan

online dimana produk disana sudah bisa dibeli secara online. Sistem disini harus

43

bisa menampilkan informasi pemesanan tas pada Toko Rolex Group secara

online.

1. Pengujian Form Login Admin

Penulis menguji form pemesanan tas agar costumer bisa memilih dan

memesan jenis-jenis tas yang ditampilkan pada sistem pemesanan di Toko

Rolex Group

Tabel IV.14

Hasil Pengujian Black Box Testing Form Login Admin

No Skenario Pengujian Testcase Hasil yang di harapkan Hasil Pengujian Kesimpulan

1 Mengisi data username

dan mengosongkan

data password

Username: admin

Password: (kosong)

Login gagal, Username dan

Password Anda tidak bener

Sesuai Harapan Valid

2 Mengisi data password

dan mengosongkan

data username

Username: admin

Password: admin

Login benar, Username dan

Password Anda benar

Sesuai Harapan Valid

4.5. Support

4.5.1. Publikasi Web

Publikasi web portal Toko Rolex Group dilakukan dengan

mempromosikan situs ke search engine (mesin pencari) local maupun dunia

sehingga mempermudah masyarakat umum ataupun pihak-pihak yang berminat

untuk mengetahui lebih jauh dan detail.

1. Nama Domain

44

Untuk domain names, penulis mencoba mendaftarkan Toko Rolex Group

pada www. dapurhosting .com yaitu salah satu web hosting yang cukup

terjangkau dan handal telah banyak dipergunakan oleh pembuat web untuk

menguji coba hasil karyanya.

Setelah mencoba mendaftar, telah didapatkan domain names sebagai

berikut : www.rolex-group.com

2. Kapasitas Hosting

Kapasitas hosting yang penulis dapakan pada penggunaan web hosting ini

sebesar 300 MB disk free untuk file, 50 MB MySQL space untuk penyimpanan

database dan 1 GB bandwith.

4.5.2. Spesifikasi Hardware dan Software

A. Spesifikasi Hardware

Perangkat keras yang dimaksud disini adalah seperangkat alat atau elemen

elektronik yang dapat membantu sistem yang diusulkan sehingga program yang

diusulkan oleh penulis dapat bekerja dengan baik.

Adapun perangkat keras minimal yang diperlukan adalah sebagai berikut :

1. Processor : Intel Core B960

2. Memory Size (RAM) : 2GB DDR3

3. Monitor : 14.0”

4. Harddisk : 320 GB

5. Keyboard : Standart Keyboard

6. Mouse : Standard Mouse

7. Printer : Canon

http://www.rolex-group.com/

http://www.dapurhosting.com/

45

B. Spesifikasi Software

Perangkat lunak adalah suatu rangkaian atau susunan instruksi yang harus

benar dengan urutan-urutan yang benar pula. Keberadaan perangkat lunak selalu

menyertai perangkat lunak yang ada.

Adapun perangkat lunak minimal yang diperlukan adalah sebagai berikut :

1. Sistem Operasi : Microsoft Windows 7

2. Program Aplikasi : Macromedia Dreamweaver 8

MySQL, PHP

4.6. Spesifikasi Dokumen Sistem Usulan

Merupakan semua bentuk dokumen yang terlibat dengan system yang

dibahas. Adapun sistem usulan yang penulis buat yaitu sebagai berikut :

1. Nama Dokumen : Invoice Online

Fungsi : Sebagai bukti transaksi pemesanan tas

Sumber : Admin

Tujuan : Customers

Media : Tampilan

Frekuensi : Setiap terjadi transaksi pemesanan

Format : Lampiran B.1

2. Nama Dokumen : Laporan Pemesanan

Fungsi : Sebagai bukti laporan

Sumber : Admin

46

Tujuan : Pemilik Toko

Media : Tampilan

Frekuensi : Setiap laporan hasil penjualan

Format : Lampiran B.2

Documents

repository.bsi.ac.id · Web viewBAB IV. RANCANGAN SISTEM DAN PROGRAM USULAN. 4.1. Analisis Kebutuhan Software. Tahapan Analisis. Sistem pemesanan tas online berbasis web dimana penjual