3.2. perancangan perangkat lunak...sistem operasi : microsoft windows 7 ultimate 32-bit b. editor...

20

lunak selalu menyertai perangkat keras ( hardware ) yang ada. Adapun perangkat

lunak yang digunakan adalah sebagai berikut :

a. Sistem Operasi : Microsoft Windows 7 Ultimate 32-bit

b. Editor Web : Adobe Dreamweaver CS5

c. Web Server : Apache2Triad

d. Web Browser : Mozilla Firefox,google chrome

3.2. Perancangan Perangkat Lunak

Dalam spesifikasi rancangan website ini dibahas mengenai bentuk-bentuk

maupun dokumen-dokumen yang mempunyai peranan dalam proses pengolahan

data. Masing-masing program dirancang harus saling berhubungan satu dengan yang

lainnya.

3.2.1. Rancangan Antar Muka

A. Rancangan User / Pengunjung

1. Rancangan Home (Belum Login)

Home adalah halaman utama pada website jika belum login. Di halaman

home terdapat beberapa link yang apabila di klik dapat menuju ke halaman lainnya

21

Gambar III.2

Rancangan Halaman Home (Belum Login)

Keterangan rancangan halaman Home :

a. Header1 : Banner dan logo website.

b. Header2 : Banner dan logo website.

c. Status : Untuk menyatakan status login/belum

d. Pencarian : Untuk Pencarian Produk.

e. Home : Untuk menuju ke halaman Home.

f. Barang : Untuk menuju ke halaman produk-produk.

g. Contact Us : Untuk menuju ke halaman Contact Us.

h. Panduan : Untuk menuju ke halaman Panduan Berbelanja.

i. Konfirmasi : Untuk menuju ke halaman Konfirmasi Pembayaran.

j. Login : Untuk menuju ke halaman Masuk/Login .

Konfirmasi Home profil Barang Panduan

Copyright © 2016 All Rights Reserved by Sony Putra perdana

Header2

Kontak fb

username

Status

Login

Kategori

Header1

Content

Pencarian

Sign Up

22

k. Sign Up : Untuk menuju ke halaman Pendaftaran User .

l. Kategori : Untuk menuju ke halaman Kategori.

m. Content : Kolam ini berisi foto produk.

n. Footer : Berupa tulisan Copyright © 2016 All Rights Reserved

By Sony putra perdana

2. Rancangan Sign Up

Sign Up adalah halaman pendaftaran user pada website. Di halaman Sign Up

terdapat link Daftar yang apabila di klik kita sudah mendapatkan user login untuk

berbelanja setelah mengisi biodata dengan lengkap

Gambar III.3

Rancangan Halaman Sign Up

Keterangan rancangan halaman Sign Up :


b. Status : Untuk menyatakan status login/belum

c. Pencarian : Untuk Pencarian Produk.

Konfirmasi Home Profil barang Panduan


Kontak Email

Telepon

Status

Login

Kategori

Header1

Content

Pencarian

User : Pass :

Login

Sign Up

23

d. Home : Untuk menuju ke halaman Home.

e. Barang : Untuk menuju ke halaman produk-produk.

f. Contact Us : Untuk menuju ke halaman Contact Us.

g. Panduan : Untuk menuju ke halaman Panduan Berbelanja.

h. Konfirmasi : Untuk menuju ke halaman Konfirmasi Pembayaran.

i. Login : Untuk menuju ke halaman Masuk/Login .

j. Sign Up : Untuk menuju ke halaman Pendaftaran User .

k. Kategori : Untuk menuju ke halaman Kategori.

3. Rancangan Home (Sudah Login)

Home adalah halaman utama pada website jika sudah login. Di halaman home

terdapat beberapa link yang apabila di klik dapat menuju ke halaman lainnya

Gambar III.4

Rancangan Halaman Home (Sudah Login)

Konfirmasi Home Profil Barang Panduan


Header2

Kontak Email

Telepon

Status

Transaksi

Keranjang belanja

Tampilan Trans

Logout

Kategori

Header1

Content

Pencarian

24

Keterangan rancangan halaman Home (Sudah Login) :


b. Header2 : Banner dan logo website.

c. Status : Untuk menyatakan status login/belum

d. Pencarian : Untuk Pencarian Produk.

e. Home : Untuk menuju ke halaman Home.

f. Barang : Untuk menuju ke halaman produk-produk.

g. Contact Us : Untuk menuju ke halaman Contact Us.

h. Panduan : Untuk menuju ke halaman Panduan Berbelanja.

i. Konfirmasi : Untuk menuju ke halaman Konfirmasi Pembayaran.

j. Keranjang Belanja : Untuk menuju ke halaman Keranjang Belanja.

k. Tampilan Transaksi : Untuk menuju ke halaman Tampilan Transaksi.

l. Logout : Untuk keluar sebagai User.

m. Kategori : Untuk menuju ke halaman Kategori.

n. Content : Kolam ini berisi foto produk.

l. Footer : Berupa tulisan Copyright © 2014 All Rights Reserved

By Sony putra perdana

4. Rancangan Barang

Pada halaman Barang berisi tentang seluruh produk sparepat yang akan dijual.

Dalam Barang ini terdapat macam´produk yang bisa di klik.

25

Gambar III.5

Rancangan Halaman Barang

Keterangan rancangan halaman Barang :









i. Keranjang Belanja : Untuk menuju ke halaman Keranjang Belanja.

j. Tampilan Transaksi : Untuk menuju ke halaman Tampilan Transaksi.

k. Logout : Untuk keluar sebagai User.



Kontak Email

Telepon

Status

Transaksi

Keranjang belanja

Tampilan Trans

Logout

Kategori

Header1

Content

Pencarian

26



m. Footer : Berupa tulisan Copyright © 2014 All Rights Reserved

By Sony Putra Perdana

5. Rancangan Konfirmasi Pembayaran

Pada halaman Konfirmasi Pembayaran berisi tentang pengisian form untuk

mengkonfirmasi kepada penjual sudah di transfer atau belum.

Gambar III.6

Rancangan Halaman Konfirmasi

Keterangan rancangan halaman Konfirmasi :







Kontak Email

Telepon

Status

Transaksi

Keranjang belanja

Tampilan Trans

Logout

Kategori

Header1

Content

Pencarian

27





i. Keranjang Belanja : Untuk menuju ke halaman Keranjang Belanja.

j. Tampilan Transaksi : Untuk menuju ke halaman Tampilan Transaksi.

k. Logout : Untuk keluar sebagai User.



n. Footer : Berupa tulisan Copyright © 2014 All Rights Reserved

By Sony Putra Perdana

B. Rancangan Admin

1. Rancangan Login Admin

Setelah melakukan proses login, link langsung menuju ke halaman

Dashboard. Di dalam dashboard terdapat beberapa link yang mempunyai fungsi

masing-masing untuk menuju ke halaman berikutnya.

28

Gambar III.7

Rancangan Login Admin

2. Rancangan Halaman Home

Pada halaman Home menyatakan anda login sebagai administrator.

Gambar III.8

Rancangan Halaman Home

Home

Header

Password Admin

Data Provinsi

Data Kategori

Data Barang

Laporan

Konfirmasi Transfer

Pemesanan Barang

Data Pelanggan

Logout

Content

Login

Header

Usernama :12123

Password :******

Login

29

Keterangan rancangan Halaman Home :

a. Header : Terdapat Tabel menu admin.

b. Home : Menyatakan bahwa login sebagai Administrator.

c. Password Admin : Untuk Mengganti Password Admin.

d. Data Provinsi : Untuk Menambah, Merubah dan Menghapus data

Provinsi.

e. Data Kategori : Untuk Menambah, Merubah dan Menghapus data

Kategori.

f. Data Barang : Untuk Menambah, Merubah dan Menghapus data

Barang.

g. Data Pelanggan : Untuk melihat Biodata Pelanggan dan dapat

menhapus data jika sudah nonaktif.

h. Pemesanan Barang : Untuk men-set data pelanggan menjadi „Lunas‟.

i. Konfirmasi transfer : Untuk melihat data pelanggan yang sudah

mengkonfirmasi transaksi.

j. Laporan : Untuk melihat laporan data provinsi, data kategori,

data barang, data pelanggan, laporan pemesanan

masuk dan laporan pemesanan lunas.

k. Logout : Untuk keluar dari halaman admin.

30

3.3.2. Rancangan Basis Data

A. Entity Relationship Diagram

pelanggan pemesanan

provinsi

pemesanan_item barang

kategori

Melakukan

Memiliki

Memiliki

Memiliki

Memiliki

kd_provinsi

nm_provinsi

biaya_kirim

kd_pelanggan

nm_pelanggan

kelamin

email

username password tgl_daftar

no_telepon

kd_pelanggan

tgl_pemesanan

nama_penerima

alamat_lengkap

kd_provinsi

kota

kode_pos

no_telepon

no_pemesanan

status_bayar

no_pemessanan

kd_barang

harga

jumlah

id

harga_modal

harga_jual

stok

keterangan

nm_barangkd_barang

kd_kategori

file_gambar

kd_kategori nm_kategori

Gambar III.9

Entity Relationship Digram (ERD)

31

B. Logical Relational Structure(LRS)

admin

username

password

provinsi

kd_provinsi *

nm_provinsi

biaya_kirim

pelanggan

kd_pelanggan *

nm_pelanggan

kelamin

email

no_telepon

username

password

tgl_daftar

barang

kd_barang *

nm_barang

harga_modal

harga_jual

stok

keterangan

file_gambar

kd_kategori **

pemesanan

no_pemesanan *

kd_pelanggan **

tgl_pemesanan

nama_penerima

alamat_lengkap

kd_provinsi **

kota

kode_pos

no_telepon

status_bayar

konfirmasi

id *

no_pemesanan

kd_pelanggan

jumlah_transfer

keterangan

tanggal

pemesanan_detail

id *

no_pemesanan **

kd_barang **

jumlah

kategori

kd_kategori *

nm_kategori

tmp_keranjang

id *

kd_barang **

harga

jumlah

tanggal

kd_pelanggan **

Keterangan:

* : Primary Key / Kunci Utama

** : Foreign Key / Kunci Tamu

: Hubungan One to One

: Hubungan One to Many

Gambar III.10

Logical Relation Structure (LRS)

C. Spesifikasi File

Spesifikasi file di dalam database yang digunakan dalam perancangan website

yang digunakan didalam program perancangan ini terdiri dari beberapa file data.

Berikut adalah penjelasan dari spesifikasi file tersebut

1. Tabel Admin

Nama File : Admin

Akronim : Admin

32

Fungsi : Untuk Penyimpanan data admin sebagai

Tempat input data, delete data, dan update

data.

Tipe file : File Master

Organisasi File : Indexed sequential

Akses File : Random

Media : Harddisk

Panjang Record : 32

Kunci Field : Id

Software : MySQL

Tabel III.1 Spesifikasi File Admin

No Elemen Data Nama Field Tipe Size Ket

1 Id Id Integer 2 Primary Key

2 Username Username Varchar 10

3 Password Password Varchar 20

2. Tabel Barang

Nama File : Barang

Akronim : Barang

Fungsi : Sebagai tempat mengelola produk,input,tambah dan

hapus


33


Akses File : Random

Media : Harddisk

Panjang Record : 85

Kunci Field : kd_barang

Software : MySQL

Tabel III.2 Spesifikasi File Barang


1 Kode barang Kd_barang Char 5 Primary key

2 Nama barang Nm_barang Varchar 30

3 Harga modal Harga_modal Interger 6

4 Harga jual Harga_jual Integer 6

5 Stok Stok Integer 4

6 Keterangan Keterangan Text

7 File gambar File_gambar Varchar 30

8 Kode kategori Kd_kategori Char 4

3. Tabel Kategori

Nama File : Kategori

Akronim : Kategori

Fungsi : Sebagai tempat menambahkan mengedit dan

menghapus kategori

34



Akses File : Random

Media : Harddisk

Panjang Record : 34

Kunci Field : kd_kategori

Software : MySQL

Tabel III.3 Spesifikasi File Kategori


1 Kode kategori Kd_kategori Char 4 Primary key

2 Nama kategori Nm_kategori Varchar 30

4. Tabel Konfirmasi

Nama File : Konfirmasi

Akronim : Konfirmasi

Fungsi : Sebagai tempat penyimpanan data konfirmasi

pelanggan yang sudah mengirim transfer



Akses File : Random

Media : Harddisk

Panjang Record : 54

35

Kunci Field : Konfirmasi

Software : MySQL

Tabel III.4 Spesifikasi File Konfirmasi


1 Id Id Integer 4 Primary key

2

Nomor

pemesanan No_pemesanan Varchar 8 Foreign key

3 Nama

pelanggan Nm_pelanggan Varchar 30

4 Jumlah transfer Jumlah_transfer Integer 12

5 Keterangan Keterangan Text

6 Tanggal Tanggal Date

5. Tabel Pelanggan

Nama File : Pelanggan

Akronim : Pelanggan

Fungsi : Sebagai tempat data pribadi member



Akses File : Random

Media : Harddisk

Panjang Record : 126

36

Kunci Field : kd_pelanggan

Software : MySQL

Tabel III.5 Spesifikasi File Pelanggan


1 Kode pelanggan Kd_pelanggan Char 6 primary key

2

Nama

pelanggan Nm_pelanggan Varchar 30

3 Kelamin Kelammin Enum

4 Email Email Varchar 30

5 Nomor telepon No_telepon Varchar 20

6 Username Username Varchar 20

7 Password Password Varchar 20

8 Tanggal daftar Tgl_daftar Date

6. Tabel Pemesanan

Nama File : Pemesanan

Akronim : Pemesanan

Fungsi : Sebagai tempat menyimpan data saat ada transaksi



Akses File : Random

Media : Harddisk

37

Panjang Record : 403

Kunci Field : no_pemesanan

Software : MySQL

Tabel III.6 Spesifikasi File Pemesanan


1

Nomor

pemesanan No_pemesanan Char 8

Primary

key

2 Kode pelanggan Kd_pelanggan Char 6

Foreign

key

3

Tanggal

pemesanan Tgl_pemesanan Date

4 Nama penerima Nm_penerima Varchar 60

5 Alamat lengkap Alamat_lengkap Varchar 200

6 Kode provinsi Kd_provinsi Char 3

7 Kota Kota Varchar 100

8 Kode pos Kode_pos Varchar 6

9 Nomor telepon No_telepon Varchar 20

10 Status bayar Status bayar Enum

6. Tabel Pemesanan Item

Nama File : Pemesanan Item

Akronim : Pemesanan Item

38

Fungsi : Untuk menyimpan semua data barang yang dipesan



Akses File : Random

Media : Harddisk

Panjang Record : 32

Kunci Field : id

Software : MySQL

Tabel III.7 Spesifikasi File Pemesanan Item



2

Nomor

pemesanan No_pemesanan Char 8 Foreign key

3 Kode barang Kd_barang Char 5

4 Harga Harga Integer 12

5 Jumlah Jumlah Integer 3

8. Tabel Provinsi

Nama File : Provinsi

Akronim : Provinsi

Fungsi : Sebagai tempat menyimpan daftar nama provinsi

untuk menyimpan besarnya biaya kirim

39



Akses File : Random

Media : Harddisk

Panjang Record : 39

Kunci Field : kd_provinsi

Software : MySQL

Tabel III.8 Spesifikasi File Provinsi


1 Kode provinsi kd_provinsi Char 3 Primary key

2 Nama provinsi Nm_provinsi Varchar 30

3 Biaya kirim Biaya_kirim Integer 6

9. Tabel Temporery Keranjang

Nama File : Temporary Keranjang

Akronim : tmp_keranjang

Fungsi : Sebagai tempat menampung barang yang dipesan

namun hanya sementara karena jika sudah fix data

akan pindah ke tabel pemesanan_item



Akses File : Random

40

Media : Harddisk

Panjang Record : 31

Kunci Field : id

Software : MySQL

Tabel III.9 Spesifikasi File tmp_keranjang



2 Kode barang Kd_barang Char 4 Foreign key

3 Harga Harga Integer 12

4 Jumlah Jumlah Integer 3

5 Tanggal Tanggal Date

6 Kode

pelanggan Kd_pelanggan Char 6

3.3.3 Rancangan Struktur Navigasi

Dalam pembuatan website tentang penjualan sparepat ini, penulis

menggunakan struktur navigasi. Struktur navigasi sendiri merupakan urutan

informasi dari suatu aplikasi multimedia. Hal ini dimaksud agar mempunyai suatu

pedoman dan arah informasi yang jelas.

41

A. Rancangan Struktur Navigasi Pengunjung

Gambar III.11

Struktur Navigasi Halaman Pengunjung

B. Rancangan Struktur Navigasi Administrator

Gambar III.12

Struktur Navigasi Halaman Administrator

Home Barang Contact

Us

Panduan

Belanja

Konfirmasi Kategori

INDEX

Login

Home

Password

admin

Data

Provinsi

Data

Kategori

Data

Barang

Data

Pelanggan

INDEX

Pemesanan

Barang

Konfirmasi

Transfer

Laporan

Logout

42

3.4. Implementasi Dan Pengujian Unit

3.4.1. Implementasi

A. Implementasi Rancangan Antar Muka

Implementasi rancangan antar muka pada web ecommerce berdasarkan hasil

rancangan antar muka.

1. Halaman Login Admin

Administrator harus melakukan login terlebih dahulu untuk dapat

menggunakan modul-modul yang tersedia Jika login berhasil, maka menu-menu yang

sesuai dengan kategori user tersebut akan ditampilkan.

43

2. Halaman Tabel Admin

3. Halaman Table Provinsi

44

4. Halaman Tabel Kategori

5. Halaman Daftar Pemesanan

45

6. Halaman Konfirmasi Transfer

7. Halaman Beranda

46

8. Profil

9. Barang

10. Panduan

47

11. Konfirmasi

B. Spesifikasi Sistem Komputer

Untuk mengetahui sarana pendukung program ini, penulis akan menjelaskan

antara lain adalah perangkat lunak (Software).

1. Perangkat Lunak (Software)

Perangkat lunak (software) adalah program-program yang digunakan untuk

menjalankan perangkat kerasnya di antaranya adalah sistem operasi (Operating

System) dan aplikasi program (Application Software) atau bahasa pemrograman.

Adapun spesifikasi perangkat lunak yang digunakan dalam mendukung

perancangan program ini adalah:

1. Sistem Operasi : Windows 7

2. Program Design : Adobe Dreamweaver CS6

3. Bahasa Script : PHP, CSS, JavaScript

48

4. Web Server : Apache2Triad

5. Web Browser : Mozilla Firefox 18.0

6. Database : MySQL

3.4.2. Pengujian Unit

Pengujian terhadap program yang dibuat mengunakan blackbok testing yang

fokus terhadap proses masukan dan keluaran program.

A. Pengujian Terhadap Forn Login Member

Table III.10. Hasil Pengujian Black Box Testing Halaman Login Member

No skenario

pengujian

Test case Hasil yang

diharapkan

Hasil

pengujian

kesimpulan

1.

Email dan password tidak

diisi kemudian klik tombol login

Email : (kosong) Password :

(kosong)

Sistem akan menolak akses

pelanggan dan menampilkan “email dan

password tidak boleh kosong.

Sesuai harapan

Valid

2.

Mengetikan

salah satu kondisi salah

Email :

[email protected] (benar) Password : 1234

(Salah)

Sistem akan

menolak akses user dan akan menampilkan

“WARNING ! Kesalahan Input :

1.Data Username kosong, silahkan isi dengan benar

2.Data Password kosong, silahkan

isi dengan benar 3.Data Username dan Password

yang Anda masukan belum

benar”

Sesuai

harapan

Valid

mailto:[email protected]

49

3.

Username tidak diisi (kosong)

dan password diisi kemudian

klik tombol login

Email: (kosong)

password: 12345

Sistem akan menolak akses

user dan akan menampilkan

“WARNING ! Kesalahan Input : 1.Data Username

kosong, silahkan isi dengan benar

2.Data Username dan Password yang Anda

masukan belum benar”

Sesuai harapan

Valid

4.

Mengetikan

username dan password

dengan data yang benar kemudian klik

tombol login

Email :

[email protected]

Password : 123456

Sistem menerima

akses login dan kemudian

langsung menampilkan menu utama

Sesuai

harapan

Valid

B. Pengujian Terhadap Form Sign Up

Table III.11. Hasil Pengujian Black Box Testing Halaman Form Sign Up

No skenario pengujian

Test case Hasil yang diharapkan

Hasil penguji

an

kesimpulan

1.

Nama

pelanggan, kelamin, email, no.telepon,

username, password,

password(lagi) tidak diisi kemudian klik

tombol daftar

Nama

pelanggan: (Kosong) kelamin:

(Kosong) email: (Kosong)

no.telepon: (Kosong) username:

(Kosong) password:

(kosong) password(lagi):(kosong)

Sistem akan

menolak akses user dan akan menampilkan “1.

Data Nama Pelanggan masih

kosong 2. Data Jenis Kelamin belum

dipilih 3. Data Alamat

Email masih kosong 4. Data No.

Sesuai

harapan

Valid

50

Telepon masih kosong

5. Data Username masih kosong

6. Data Password masih kosong”

2.

Mengetikan

nama pelanggan,

email, no.telepon, username,

password, password(lagi),

tetapi kelamin tidak diisi kemudian klik

tombol daftar

Nama

pelanggan: baim kelamin:

(Kosong) email: ibrahim@yahoo.

com no.telepon:

021876543 username: baim password: 123

password(lagi):123

Sistem akan

menolak akses user dan akan

menampilkan “ Data Jenis Kelamin belum

dipilih”

Sesuai

harapan

Valid

3.

Mengetikan

nama pelanggan,

kelamin, email, no.telepon, username,

password tetapi password(lagi)

tidak diisi kemudian klik tombol daftar

Nama

pelanggan: baim kelamin: laki-

laki email: ibrahim@yahoo.

com no.telepon:

0218787654 username: baim password: 123

password(lagi):(kosong/beda dengan password

yang awal)

Sistem akan

menolak akses user dan kolom

email akan menampilkan “Data Password ke

2 tidak sama dengan

sebelumnya”

Sesuai

harapan

Valid

3.2. perancangan perangkat lunak...sistem operasi : microsoft windows 7 ultimate 32-bit b. editor...

Documents