BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition...

44
1 BAB IV PERANCANGAN SISTEM 1.1. Tahap Perancangan Sistem Mengidentifikasi kebutuhan yang diperoleh berdasarkan kebutuhan pengguna dan kebutuhan sistem, Kemudian merancang sebuah sistem yang dapat diaplikasikan untuk mempermudah dalam melakukan pemesanan di Stadareva Collection. 4.1.1 Analisa Kebutuhan Dalam melakukan suatu perancangan sistem penulis akan melakukan analisa kebutuhan sehingga dapat mengetahui proses yang terjadi dan menemukan masalah-masalah yang terjadi dalam suatu sistem. Analisa kebutuhan pada Stadereva Collection adalah sebagai berikut: A. Kebutuhan Pengguna Didalam web Stadereva Collection ini ada dua pengguna yang saling berinteraksi dengan sistem, yaitu: Member, Non-Member dan Admin. Ketiga pengguna tersebut memiliki karakteristik yang berbeda-beda dan juga mempunyai kebutuhan informasi yang berbeda-beda pula, seperti berikut A1. Skenario Kebutuhan Bagian Member a) Member dapat melakukan registrasi dan login b) Pengunjung dapat melihat informasi produk c) Pengunjung dapat melihat profil perusahaan

Transcript of BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition...

Page 1: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

1

BAB IV

PERANCANGAN SISTEM

1.1. Tahap Perancangan Sistem

Mengidentifikasi kebutuhan yang diperoleh berdasarkan kebutuhan

pengguna dan kebutuhan sistem, Kemudian merancang sebuah sistem yang

dapat diaplikasikan untuk mempermudah dalam melakukan pemesanan di

Stadareva Collection.

4.1.1 Analisa Kebutuhan

Dalam melakukan suatu perancangan sistem penulis akan melakukan

analisa kebutuhan sehingga dapat mengetahui proses yang terjadi dan

menemukan masalah-masalah yang terjadi dalam suatu sistem. Analisa

kebutuhan pada Stadereva Collection adalah sebagai berikut:

A. Kebutuhan Pengguna

Didalam web Stadereva Collection ini ada dua pengguna yang saling

berinteraksi dengan sistem, yaitu: Member, Non-Member dan Admin. Ketiga

pengguna tersebut memiliki karakteristik yang berbeda-beda dan juga

mempunyai kebutuhan informasi yang berbeda-beda pula, seperti berikut

A1. Skenario Kebutuhan Bagian Member

a) Member dapat melakukan registrasi dan login

b) Pengunjung dapat melihat informasi produk

c) Pengunjung dapat melihat profil perusahaan

Page 2: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

d) Member dapat memilih pesanan berdasarkan kategori

e) Member dapat melakukan pemesanan sesuai kebutuhan

f) Member dapat melihat hasil dan mencetak hasil transaksi

g) Member bisa melakukan konfirmasi pembayaran

h) Member dapat melihat nomor resi pengiriman

i) Member dapat melakukan logout

A2. Halaman non-Member

a) Pengunjung dapat mendaftar menjadi anggota atau member

b) Pengunjung dapat melihat informasi produk

c) Pengunjung dapat melihat profil perusahaan

A3. Skenario Kebutuhan Admin

a) Admin dapat melakukan login

b) Admin dapat melihat pesananan produk

c) Admin dapat mengelolah data barang

d) Admin dapat melihat detail transaksi penjualan

e) Admin dapat mengelola resi pengiriman

f) Admin dapat melakukan konfirmasi pembayaran

g) Admin dapat melakukan logout

B. Kebutuhan Sistem

a) Pengguna harus melakukan registrasi terlebih dahulu untuk masuk

kedalam website dengan masukan username dan password dan data diri

agar bisa login sebagai member dan privasi masing-masing pengguna

agar tetap terjaga.

b) Pengguna harus melakukan logout setelah menggunakan aplikasi.

Page 3: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

c) Sistem menampilkan jenis pakaian terlaris, harga bahan dan detail

produk pada halaman website.

d) Sistem akan melakukan kalkulasi pada setiap transaksi pembelian sesuai

dengan harga dan total ongkir yang sudah ditentukan.

e) Sistem menampilkan detail transaksi yang dapat dicetak langsung oleh

member

f) Sistem menyimpan dan menampilkan histori keranjang transaksi setiap

pembelian

g) Sistem menampilkan status konfirmasi pembayaran pada halaman

website

4.1.2. Rancangan Diagram Use Case

Diagram Use case bekerja dengan cara mendeskripsikan tipikal antara

pengguna sebuah sistem dengan sistemnya sendiri melalui sebuah cerita bagaimana

sistem itu dapat berjalan dan dapat dipergunakan..

Page 4: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

1. Use Case Diagram Member Dan Non Member

Gambar IV.1

UseCase Diagram Halaman Member

a). Deskripsi Use Case Diagram Login / Register

Tabel IV.1.

Deskripsi Use Case Diagram Login

Use Case Name Login

Requirements Dapat melakukan login.

Goal Dapat melakukan Login setelah melakukan

registrasi.

Pre-Conditions Member melakukan input id email dan

Page 5: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

password.

Post-Conditions Member berhasil login.

Failed end Condition Member gagal login .

Actors Member.

Main Flow/ Basic Path 1. Member input id email

2. Member Input password

Alternate Flow/Invariant A A1. Masuk via Facebook

A2. Lupa Pasword

Invariant B B1. Member Melakukan Logout

b). Deskripsi Use Case Diagram Memilih Kategori

Tabel IV.2.

Deskripsi Use Case Diagram Memilih Kategori

Use Case Name Kategori

Requirements Member dapat memilih kategori pakaian.

Goal Member dapat mengakses menu kategori .

Pre-Conditions Member berhasil login.

Post-Conditions Member berhasil mengelola menu memilih

kategori.

Failed end Condition Member memilih kategori.

Actors Member

Main Flow/ Basic Path 1. Member memilih menu ketegori.

2. Sistem menampilkan submenu kategori.

Alternate Flow/Invariant

A

A1. Sistem menampilkan jenis kategori

pakaian

A2. Member memilih pakaian yang ingin

dipesan

Invariant B B1. Member melanjutkan transaksi.

c). Deskripsi Use Case Diagram Melakukan Pembayaran

Tabel IV.3.

Deskripsi Use Case Diagram Melakukan Pembayaran

Page 6: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Use Case Name Melakukan Pembayaran.

Requirements Member dapat melakukan pembayaran.

Goal Member dapat mengakses menu pembayaran .

Pre-Conditions Member berhasil login.

Post-Conditions Member berhasil melakukan pembayaran.

Failed end Condition Member gagal melakukan pembayaran

pesanan.

Actors Member

Main Flow/ Basic Path 1. Member memilih menu pembayaran.

2. Sistem menampilkan submenu

pembayaran.

Alternate Flow/Invariant

A

A1. Sistem menampilkan kode resi

pembayaran

A2. Member melakukan Pembayaran Sesuai

Harga

Invariant B B1. Member mendapat kode resi

pembayaran.

d). Deskripsi Use Case Diagram Hasil Transaksi

Tabel IV.4.

Deskripsi Use Case Diagram Hasil Transaksi

Use Case Name Transaksi.

Requirements Member dapat melihat transaksi dan

mencetak bukti transaksi.

Goal Member dapat mengakses menu transaksi .

Pre-Conditions Member berhasil login.

Post-Conditions Member berhasil melakukan transaksi.

Failed end Condition Member gagal mencetak bukti transaksi.

Actors Member

Main Flow/ Basic Path 1. Member memilih menu transaksi.

2. Sistem menampilkan submenu transaksi.

Alternate Flow/Invariant

A

A1. Sistem menampilkan rincihan transaksi

A2. Member melakukan pembayaran

Invariant B B1. Member mencetak bukti transaksi.

B2. Member mempunyai bukti transaksi

e). Deskripsi Use Case Diagram Konfirmasi Pembayaran

Tabel IV.5.

Page 7: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Deskripsi Use Case Diagram Konfirmasi Pembayaran

Use Case Name Konfirmasi pembayaran.

Requirements Member dapat melakukan konfirmasi

pembayaran.

Goal Member dapat mengakses menu konfirmasi

setelah melakukan pembayaran.

Pre-Conditions Member berhasil login.

Post-Conditions Member berhasil menlakukan konfirmasi

pembayaran.

Failed end Condition Member gagal melakukan konfirmasi.

Actors Member

Main Flow/ Basic Path 1. Member memilih menu kofirmasi

pembayaran.

2. Sistem menampilkan submenu konfirmasi

pembayaran.

Alternate Flow/Invariant

A

A1. Member melakukan konfirmasi

pembayaran

A2. Sistem gagal mengkonfirmasi

pembayaran

Invariant B B1. Member mendapatkan bukti resi

pembayaran

f). Deskripsi Use Case Diagram Non Member

Table IV.6.

Deskripsi Use Case Diagram non Member

Use Case Name Non Member.

Requirements Non member dapat melihat produk dan profil.

Goal Non Member dapat mengakses menu profil

dan menu produk pakaian.

Pre-Conditions Non member belum melakukan registrasi.

Post-Conditions Non member berhasil melihat menu profil dan

produk.

Failed end Condition Non member tidak memesan pakaian.

Actors Non member

Main Flow/ Basic Path 1. Non Member memilih menu profil.

2. Sistem menampilkan form profil .

Alternate Flow/Invariant

A

A1. Non member memilih menu produk

A2. Sistem menampilkan submenu produk

Invariant B B1. Non Member sudah melakukan registrasi

Page 8: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

g). Deskripsi Use Case Diagram Registrasi

Table IV.6.

Deskripsi Use Case Diagram Registrasi

Use Case Name Registrasi

Requirements Non member dapat melakukan registrasi.

Goal Non Member dapat mengakses menu

registasi.

Pre-Conditions Non member belum melakukan registrasi.

Post-Conditions Non member berhasil melakukan registrasi

Failed end Condition Non member tidak melakukan registrasi.

Actors Non member

Main Flow/ Basic Path 1 Non Member memilih menu registrasi.

2 Sistem menampilkan form registrasi .

Alternate Flow/Invariant

A

A1. Sistem gagal menampilkan form

registrasi

Invariant B B1. Non Member sudah melakukan registrasi

2. Use Case Diagram Admin

Page 9: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Input Username

Dan Password

Login

Mengelola Data Kategori

Mengelola Data Member

Mengelola Data Produk

Mengelola Data Pesanan

Mengelola Data

Konfirmasi Pesanan

Mengelola Laporan

Transaksi

Logout

Admin

Gambar IV.2

UseCase Diagram Halaman Admin

a). Deskripsi Use Case Diagram Login

Tabel IV.7.

Deskripsi Use Case Diagram Login Admin

Use Case Name Login Admin.

Requirements Dapat melakukan login.

Goal Admin dapat melakukan login dan masuk ke

halaman utama admin dan mengelola

submenu halaman utama admin.

Pre-Conditions Admin input id admin dan password.

Page 10: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

b).

Desk

ripsi

Use

Case

Diagram Mengelola Data Member

Tabel IV.8.

Deskripsi Use Case Diagram Mengelola Data Member

c).

Desk

ripsi

Use

Case

Diag

ram

Men

gelol

a

Data Produk

Table IV.9.

Deskripsi Use Case Diagram Mengelola Data Produk

Post-Conditions Admin berhasil login .

Failed end Condition Admin gagal login.

Actors Admin .

Main Flow/ Basic Path 1. Admin input id admin.

2. Admin input password admin.

Alternate Flow/Invariant A A1. Admin dapat mengelola submenu

halaman utama .

Invariant B B1. Admin dapat logout.

Use Case Name Data Member.

Requirements Dapat mengupdate/menghapus data member.

Goal Admin dapat mengkases menu data member.

Pre-Conditions Admin telah login.

Post-Conditions Admin berhasil mengelola data member.

Failed end Condition Admin menghapus data member.

Actors Admin.

Main Flow/ Basic Path 1. Admin memilih menu data member.

2. Sistem menampilkan form mengelola data

member.

Alternate Flow/Invariant A A1. Admin memilih form mengelola data

member

A2. Admin mengelola data member.

Invariant B B1. Admin mengupdate data member.

Page 11: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

d).

Desk

ripsi

Use

Case

Diag

ram

Data

Kate

gori

Tabl

e

IV.10.

Deskripsi Use Case Diagram Data Kategori

Use Case Name Data Produk.

Requirements Dapat mengupdate stok Produk.

Goal Admin dapat mengakses menu data produk

dan dapat mengelola submenu data produk.

Pre-Conditions Admin telah login.

Post-Conditions Admin berhasil mengelola data produk.

Failed end Condition Admin gagal melakukan update data produk.

Actors Admin.

Main Flow/ Basic Path 1. Admin memilih data produk.

2. Sistem akan menampilkan submenu data

produk.

Alternate Flow/Invariant A A1. Admin memilih data produk.

A2. Sistem menampilkan form data produk.

Invariant B B1. Admin memperbarui data produk

B2. Sistem menampilkan form data produk

Use Case Name Data kategori.

Requirements Dapat menambah atau update data kategori.

Goal Admin dapat mengakses menu data kategori

dan dapat mengelola sub menu kategori.

Pre-Conditions Admin telah login.

Post-Conditions Admin berhasil mengelola data katagori

pakaian.

Failed end Condition Admin gagal melakukan update data katagori

pakaian.

Actors Admin.

Main Flow/ Basic Path 1. Admin memilih data kategori.

2. Sistem akan menampilkan submenu data

Page 12: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

e).

Desk

ripsi

Use

Case

Diag

ram Data Pesanan

Table IV.11.

Deskripsi Use Case Diagram Data Pesanan

f).

Desk

ripsi

Use

Case

Diag

ram

Konf

irma

si

Pesa

nan

Tabl

e IV.12.

kategori.

Alternate Flow/Invariant A A1. Admin memilih submenu kategori

pakaian.

A2. Sistem menampilkan form kategori

kamar.

Invariant B B1. Admin memilih kategori pakaian jersey.

B2. Sistem menampilka form kategori jersey

B3. Admin mengupdate stok jersey .

Use Case Name Data Pesanan.

Requirements Dapat melihat data pesanan.

Goal Admin dapat mengkases menu data pesanan

dan dapat mengelola submenu data pesanan.

Pre-Conditions Admin telah login.

Post-Conditions Admin berhasil mengelola data pesanan .

Failed end Condition Admin gagal mengakses data pesanan

Actors Admin

Main Flow/ Basic Path 1. Admin memilih menu data pesanan

2. Sistem akan menampilkan submenu data

pesanan

Alternate Flow/Invariant A A1. Admin memilih submenu data pesanan

A2. Sistemn menampilkan form data pesanan

A3. Admin mengelola data pesanan

Invariant B B1. Admin memilih submen pesanan.

B2. Sistem menampilkan form pesanan.

B3. Admin mengubah status pesanan

Page 13: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Deskripsi Use Case Diagram Konfirmasi Pesanan

g).

Desk

ripsi

Use

Case

Diag

ram

Lapo

ran

Tran

saksi

Table IV.13.

Deskripsi Use Case Diagram Laporan Transaksi

Use Case Name Konfirmasi pesanan.

Requirements Dapat mengupdate status pesanan.

Goal Admin dapat mengkases menu konfirmasi

pesanan.

Pre-Conditions Admin telah login.

Post-Conditions Admin berhasil mengelola konfirmasi

pesanan .

Failed end Condition Admin gagal update status pesanan

Actors Admin

Main Flow/ Basic Path 1. Admin memilih menu konfirmasi pesanan

2. Sistem akan menampilkan submenu

konfirmasi pesanan

Alternate Flow/Invariant A A1.Admin memilih submenu data konfirmasi

pesanan

A2.Sistem menampilkan form konfirmasi

pesanan

A3.Admin mengubah status pesanan

Invariant B B1. Admin berhasil melakukan update

status pembayaran.

Use Case Name Laporan transaksi.

Requirements Admin dapat mencetak laporan transaksi.

Goal Admin dapat mengakses menu laporan

transaksi.

Pre-Conditions Admin telah login.

Post-Conditions Admin berhasil mengelola laporan transaksi

dan mencetak laporan transaksi.

Page 14: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

4.1.3

Ran

cang

an

Diag

ram

Activity

Diagram Activity memodelkan workflow proses bisnis dan urutan rancangan

aktifitas dalam sebuah proses.

1. Diagram Activity

a). Diagram Activity Pemesanan Pakaian Oleh Member

Failed end Condition Admin gagal mencetak laporan transaksi.

Actors Admin

Main Flow/ Basic Path 1. Admin memilih menu laporan transaksi

2. Sistem akan menampilkan form submenu

data laporan transaksi

Alternate Flow/Invariant A A1. Admin memilih submenu laporan

transaksi.

A2. Sistem menampilkan form laporan

transaksi

A3. Admin mengelola laporan transaksi

Invariant B B1.Admin mencetak data laporan transaksi.

B2.Admin melakukan logout

Page 15: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

PEMESAN SISTEMMEMBER

Membuka Halaman Utama

Pilih Kategori

Pesan

Add To Cart

Melakukan Input Data Pemesanan

Login

Menampilkan Kategori

Menampilkan Detail Produk

Menampilkan Total Pembayaran

Input Bukti Pembayaran

Submit

Mencetak Bukti Resi Pemesanan

Ya

Lanjut Transaksi

Tidak

Submit

Konfirmasi Pembayaran

Gambar IV.3

Diagram Activity Pemesanan Baju

b). Diagram Activity Admin

Page 16: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

PEMESAN SISTEMADMIN

Tampil Form Konfirmasi Pembayaran

Cancel

Mengisi Data Pemesanan

Menampilkan Data Pembayaran

Submit

Memilih Produk

Mmenampilkan Data Pemesanan

Dengan Status Pembayaran

"Lunas"

Proses

Gambar IV.4

Diagram Activity Pembayaran

4.1.4. Rancangan Dokumen Sistem Usulan

Page 17: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Spesifikasi dokumen usulan adalah rangkaian dari spesifikasi file dan Website

dimana diperlukan dokumen masukan yang menghasilkan dokumen keluaran.

Adapun spesifikasi sistem usulan pada website Stadereva Collection adalah sebagai

berikut:

A. Spesifikasi Dokumen Masukan

1. Nama Dokumen : Identitas Calon Member

Fungsi : Sebagai syarat menjadi customer

Sumber : Calon Customer

Tujuan : Tabel Customer ke database

Media : Kartu

Jumlah : 1 buah

Frekuensi : setiap melakukan pendaftaran

Bentuk : Lihat lampiran C.1

2. Nama Dokumen : Bukti pembayaran pemesanan

Fungsi : Sebagai bukti pembayaran pemesanan

Sumber : Customer

Tujuan : Admin

Media : Kertas

Jumlah : 1 lembar

Frekuensi : setiap terjadi pemesanan

Bentuk : Lihat lampiran C.2

3. Nama Dokumen : Desain Pakaian

Fungsi : Sebagai bukti desain pakaian yang kita buat

Page 18: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Sumber : Customer

Tujuan : Admin

Media : Gambar.jpg

Jumlah : 1 gambar

Frekuensi : setiap terjadi pemesanan

Bentuk : Lihat lampiran C.3

4. Nama Dokumen : Data Produk

Fungsi : Sebagai tambah produk baru yang ingin di display

Sumber : Admin

Tujuan : Customer

Media : Gambar.jpg

Jumlah : 1 gambar

Frekuensi : setiap produk baru masuk

Bentuk : Lihat lampiran C.4

5. Nama Dokumen : Data Kategori

Fungsi : Untuk menambah kategori produk

Sumber : Admin

Tujuan : Customer

Media : Gambar.jpg

Jumlah : 1 gambar

Frekuensi : setiap terjadi pemesanan

Bentuk : Lihat lampiran C.5

B. Spesifikasi Dokumen Keluaran

1. Nama Dokumen : Bukti Total Pembayaran

Page 19: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Fungsi : Sebagai bukti total biaya yang harus di transfer

Sumber : Admin

Tujuan : Customer

Media : Gambar

Jumlah : 1 lembar

Frekuensi : Setiap melakukan konfirmasi pembayaran

Bentuk : Lihat Lampiran D.1

2. Nama Dokumen : Laporan pesanan

Fungsi : Sebagai bukti pesanan perhari

Sumber : Admin

Tujuan : Kepala Toko

Media : Kertas

Jumlah : 1 lembar

Frekuensi : Setiap sehari sekali

Bentuk : Lihat Lampiran D.2

4.1.5. Racanganan Prototype

A. Halaman non-member

1. Interface Halaman Utama Website Stadereva Collection

Halaman ini menampilkan halaman non-member dimana user hanya bisa

melihat tampilan web berupa Home (hanya bisa melihat produk) dimana ada 3 (tiga)

kategori berupa sport, kaos dan sweeter, profil perusahan, tampilan login (jika

memiliki akun), dan daftar . User tidak dapat melakukuan pemesanan jika belum

memiliki akun dan daftar.

Page 20: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Gambar IV.5

Halaman Utama Website Stadereva Collection

2. Interface Halaman Login Stadereva Collection

Tampilan login untuk user yang ingin melakukan pemesanan secara online

jika sudah memiliki akun masukan user name dan password.

Page 21: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Gambar IV.6

Halama Login Website Stadereva Collection

3. Interface Halaman Daftar Pada Stadereva Collection

Dimana user yang tidak memiliki akun harus melakukan registrasi berupa

input data diri agar terdaftar dan memiliki akun untuk proses pemesanan yang

berisikan nama, alamat, nomor telpon, email dan password.

Gambar IV.7

Halaman Daftar Member Stadereva Collection

Page 22: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

4. Interface Halaman Profil Perusahaan Pada Stadereva Collection

Tampilan ini berisikan tentang profil perusahaan dimana didalamnya terdapat

sejarah perusahaan dan informasi lainya.

Gambar IV.8

Halaman Profil Website Stadereva Collection

5. Interface Halaman Katalog Stadereva Collection

Jika sudah melakukan login atau daftar, akan muncul tampilan seperti di

bawah ini dan user dapat melakukan pemesanan.

Page 23: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Gambar IV.9

Halaman Katalog Website Stadereva Collection

6. Interface Halaman Pemesanan Pada Website Stadereva Collection

Dalam halaman pemesanan ini user dapat men-input quantity, size dan akan

muncul secara otomatis tampilan harga. Dan jika ingin menggunakan design sendiri

klik button choice file lalu input design yang ingin dipakai. Jika ingin menambah

keranjang klik add cart setelah men-input jumlah barang dan size.

Page 24: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Gambar IV.10

Halaman Pemesanan Website Stadereva Collection

7. Interface Halaman Input Alamat Tujuan Pengiriman Website Stadereva

Collection

Halaman ini berisikan tentang pengisian alamat tujuan untuk proses

pengiriman yang berisikan kode barang, alamat tujuan, kota tujuan, kode pos dan

status pembayaran.

Page 25: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Gambar IV.11

Halaman Input Alamat Pemesanan

8. Interface Halaman Bukti Pembayaran pada Stadereva Collection

Setelah selesai melakukan pemesanan akan muncul tampilan struk total harga

yang harus di transfer.

Gambar IV.12

Halaman Bukti Pembayaran Website Stadereva Collection

Page 26: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

B. Halaman Admin

1. Interface Halaman Login Admin Pada Stadereva Collection

Gambar IV.13

Halaman Admin Website Stadereva Collection

2. Interface Halaman Home Pada Admin Stadereva Collection

Gambar IV.14

Halaman Home Admin Website Stadereva Collection

3. Interface Halaman Data Customer Pada Admin Stadereva Collection

Page 27: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Gambar IV.15

Halaman Admin Data Coustomer Website Stadereva Collection

4. Interface Halaman Data Produk pada Admin Stadereva Collection

Gambar IV.16

Halaman Admin Data Produk Website Stadereva Collection

5. Interface Data Kategori Admin Pada Stadereva Collection

Gambar IV.17

Halaman Admin Data Kategori Website Stadereva Collection

6. Interface Halaman Data Pesanan Pada Admin Stadereva Collection

Page 28: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Gambar IV.18

Halaman Admin Data Pesanan Website Stadereva Collection

7. Interface Data Konfirmasi Pada Admin Stadereva Collection

Gambar IV.19

Halaman Admin Data Konfirmasi Stadereva Collection

8. Interface Data Tambah Kategori Pada Admin Stadereva Collection

Gambar IV.20

Halaman Admin Data Tambah Kategori Website Stadereva Collection

9. Interface Data Tambah Produk Pada Admin Stadereva Collection

18

Page 29: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Gambar IV.21

Halaman Admin Data Tambah Produk Website Stadereva Collection

10. Interface Laporan Admin Pada Stadereva Collection

Gambar IV.22

Halaman Admin Laporan Penjualan

4.2. Perancangan Perangkat Lunak

Perancangan lunak ini difokuskan pada enam atribut, yaitu ERD, LRS,

Spesifikasi File, Class Diagram, Sequence Diagram, dan Spesifikasi Hardware serta

Software.

4.2.1. Entity Relationship Diagram (ERD)

Page 30: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Perancangan dari sebuah sistem akan menghasilkan table-tabel yang saling

berhubungan yang digambarkan menggunakan Entity Relationship Diagram (ERD)

Gambar IV.23

Entity Realitionship Diagram (ERD

4.2.2. Logical Record Structure (LRS)

Page 31: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Tbl_Konfirmasi

Jumlah_tarnsfer

No_pesan

Tanggal

Bukti_transfer

Tbl_pesan

Kd_customer

Kd_kota

Kode_pos

Status_bayar

Alamat_tujuan

Tgl_pesan

Detail_pesan

No_pesan

Jumlah

Total_harga

Tbl_kategori

Kd_kategori

No_pesan

Kd_barangNama_kategori

Tbl_customer

Kd_customer

Alamat

No_telepon

Email

Password

Nm_customer

Tbl_kota

Kd_kota

Biaya_kirim

Nm_kota

Tbl_barang

Kd_barang

Nm_barang

Harga

Ukuran

Keterangan

File_gambar

Kd_kategori

1

m

1

1

m

m

m

m

m

1

1

1

Gambar IV.24

Logical Structure Recent (LRS)

4.2.3. Spesifikasi File

Berikut adalah spesifikasi file dari tabel master, tabel reservasi, tabel kamar, tabel

kategori, dan tabel konfirmasi sebagai berikut :

A. Spesifikasi File Table Konfirmasi

Nama File : Konfirmasi

Akronim : Konfirmasi.myd

Page 32: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Fungsi : untuk melakukan konfirmasi

Tipe File : Master

Organisasi File : Indexed Sequential

Akses File : Random

Media : Harddisk

Panjang record : 90 Byte

Kunci Field : no_pesan

Software : Mysql

Tabel IV.14.

Spesifikasi File Table Konfirmasi

No Elemen Data Nama_filed Tipe Size Keterangan

1 Jumlah Transfer Jumlah_Transfer Varchar 30

2 No Pesan No_Pesan Varchar 20 Primary Key

3 Tanggal Tanggal Date 20

4 Bukti Transfer Bukti_Transfer Text 20

B. Spesifikasi File Table Pesan

Nama File : Pesan

Akronim : Pesan.myd

Fungsi : untuk melakukan Pesan

Tipe File : Master

Organisasi File : Indexed Sequential

Akses File : Random

Page 33: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Media : Harddisk

Panjang record : 107 Byte

Kunci Field : kd_customer

Software : Mysql

Tabel IV.15.

Spesifikasi File Tabel Pesan

No Elemen Data Nama_filed Tipe Size Keterangan

1

Kode

customer

Kd_customer Varchar 20 Primary Key

2 Kode Kota Kd_Kota Varchar 20 Foreign Key

3 No pesan No_pesan Varchar 15 Primary Key

4 Kode pos Kode_pos Varchar 7

5 Status bayar Status_bayar Varchar 10

6 Alamat tujuan Alamat_tujuan Varchar 25

7 Tgl pesan Tgl_pesan Date 10

C. Spesifikasi File Table Customer

Nama File : Customer

Akronim : Customer.myd

Fungsi : untuk melakukan pendaftaran

Tipe File : Master

Organisasi File : Indexed Sequential

Akses File : Random

Page 34: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Media : Harddisk

Panjang record : 144 Byte

Kunci Field : kd_customer

Software : Mysql

Tabel IV.16.

Spesifikasi File Tabel Customer

No Element Data Nama_filed Tipe Size Keterangan

1 Kode customer Kd_customer Varchar 20 Primary Key

2 Nama customer Nm_customer Varchar 20

3 Alamat Alamat Varchar 25

4 No telepon No_telepon Varchar 12

5 Email Email Varchar 25

6 Password Password Varchar 12

D. Spesifikasi File Detail Pesan

Nama File : Pesan

Akronim : Pesan.myd

Fungsi : untuk melakukan pemesanan

Tipe File : Master

Organisasi File : Indexed Sequential

Akses File : Random

Media : Harddisk

Panjang record : 44 Byte

Kunci Field : no_pesan

Page 35: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Software : Mysql

Tabel IV.17.

Spesifikasi File Detail Pesan

No Element Data Nama_filed Tipe Size Keterangan

1 No pesan No_pesan Varchar 20 Primary Key

2 Kd barang Kd_barang Vvarchar 15

3 Jumlah Jumlah Varchar 2

4 Harga Harga Varchar 7

E. Spesifikasi File Table Kota

Nama File : Kota

Akronim : Kota.myd

Fungsi : untuk melakukan pemilihan area kota

Tipe File : Master

Organisasi File : Indexed Sequential

Akses File : Random

Media : Harddisk

Panjang record : 28 Byte

Kunci Field : kd_kota

Software : Mysql

Tabel IV.18.

Spesifikasi File Tabel Kota

No Element Data Nama_filed Tipe Size Keterangan

Page 36: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

1 Kode Kota Kd_kota Varchar 10 Primary Key

2 Nama Kota Nm_kota Varchar 10

3 Biaya kirim Biaya_kirim Varchar 8

F. Spesifikasi File Tabel Barang

Nama File : Barang

Akronim : Barang.myd

Fungsi : untuk mengetahui detail barang

Tipe File : Master

Organisasi File : Indexed Sequential

Akses File : Random

Media : Harddisk

Panjang record : 90 Byte

Kunci Field : kd_kategori

Software : Mysql

Tabel IV.19.

Spesifikasi File Tabel Barang

No Element Data Nama_filed Tipe Size Keterangan

1 Kode barang Kd_barang Varchar 20 Foreign Key

Page 37: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

2 Kode kategori Kd_kategori Varchar 10 Primary Key

3 Nama barang Nm_barang Varchar 20

4 Harga Harga Int 10

5 Ukuran Ukuran Varchar 10

6 Keterangan Keterangan Varchar 20

7 File gambar File_gambar Text -

G. Spesifikasi File Tabel Kategori

Nama File : Kategori

Akronim : Kategori.myd

Fungsi : untuk mengetahui Kategori

Tipe File : Master

Organisasi File : Indexed Sequential

Akses File : Random

Media : Harddisk

Panjang record : 30 Byte

Kunci Field : kd_kategori

Software : Mysql

Tabel IV.20.

Spesifikasi File Tabel Kategori

No Element Data Nama_filed Tipe Size Keterangan

1 Kode kategori Kd_kategori Varchar 20 Primary Key

Page 38: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

2

Nama

kategori

Nm_kategori Varchar 10

4.2.4. Class Model/Class Diagram

Page 39: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Tbl_Konfirmasi

- Jml_transfer : int

- No_pesan : int

- Bukti_transfer : date

- Tangga : int

- Keterangan : var

Tbl_Pesan

-No_pesan : int

-Kd_customer : int

-Tgl_pesan : date

-Alamat_tujuan : var

-Kd_kota : var

-Kode_Pos : int

-Status_bayar : var

Detail_Pesan

-No_pesan : int

-Kd_barang : int

-Jumlah : int

-Total_harga : int

Tbl_Kota

- Kd_kota : var

- Nm_kota : var

- Biaya_Kirim : int

+ Create() : void

+ GetNo_pesan() : int

+ GetJml_transfer() : int

+ GetTanggal() : date

+ GetBukti_transfer() : var

+ GetKeterangan() : var

+ SetNo_pesan() : void

+ SetJml_transfer() :void

+ SetKeterangan() :void

+ SetTanggal() :void

+ SetBukti_transfer() :void

+Create() : void

+Delet() : void

+Read() : void

+Update() : void

+GetNo_pesan() : int

+GetKd_customer() : int

+GetKd_kota() : var

+GetTgl_pesan() : date

+GetAlamat_tujuan() : var

+GetKode_pos() : var

+GetStatus_bayar() : void

+SetNo_pesan() : void

+SetKd_customer() : void

+SetTgl_pesan() : void

+SetAlamat_tujuan() : void

+SetKd_kota() : void

+SetStatus_bayar() : void

+Create() :void

+Update() : void

+GetId_kota() : var

+GetNm_kota() : var

+GetBiaya_kirim() : int

+SetKd_kota() : void

+SetNm_kota() : void

+SetBiaya_kirim() : void

Tbl_Barang

-Kd_barang : int

-Kd_kategori : var

-Nm_barang :var

-Harga : Int

-Ukuran : var

-Keterangan : var

-File_gambar : var

+Create() :void

+Read(): void

+Update() : void

+Delete(): void

+GetNm_barang() : var

+GetKd_barang() : var

+GetKd_kategori() : var

+GetHarga() : int

+GetUkuran() : int

+GetKeterangan() : var

+GetFile_gambar() : var

+SetKd_barang() : void

+SetNm_barang() : void

+SetKd_kategori() : void

+SetUkuran() : void

+SetHarga() : void

+SetKeterangan() : void

+SetFile_gambar() :void

Tbl_Kategori

- Kd_kategori : var

- Nm_kategori : var

+ GetKd_kategori() :var

+ GetNm_kategori() :var

+ SetKd_kategori() :void

+ SetNm_kategori() :void

Tbl_Customer

- Email : var

- Password : var

- Id_customer : int

- Nm_customer : var

- Alamat : var

- No_telepon : int

+ Create() : void

+ Delete () : void

+ Read () : void

+ Updat() : void

+ GetId_customer() : int

+ GetNm_customer() : var

+ GetNo_telepon() : int

+ Getalamat() : var

+ Getemail() : var

+ Getpassword() : var

+ SetKd_customer() : void

+ SetNm_customer() :void

+ Setalamat() :void

+ SetNo_telepon() :void

+ SetEmail() :void

+ SetPassword() :void

+Create() :void

+Read() : void

+GetNo_pesan() : int

+GetKd_barang() : int

+GetJumlah() : int

+GetToral_harga() : int

+SetKd_barang() : void

+SetNo_pesan() : void

+SetJumlah() : void

+SetTotal_harga() : void

1 m m

1

m

m

m

1

m

m

m

1

Gambar IV.27

Class Model/Class Diagram

4.2.5. Squence Diagram

Page 40: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Berikut adalah Squence Diagram dari sistem transaksi pemesanan pada

Stadereva Collection Bekasi

a). Squence Diagram Transaksi Pemesanan

Gambar IV.28

Squence Diagram Transaksi Pemesanan

b). Squence Diagram Konfirmasi Pemesanan

sd transaksi pemesanan

home

customer

proses memilih

barang

form detail barang proses hitung proses simpan

transaksi

form data

pemesanan

bukti transaksi

pilih jumlah barang(jumlah)

setHarga()

input data pemesanan

(alamat, kota, kode_pos)

setKd_barang()

pil ih barang(nm_barang, harga)

tampil bukti transaksi pemesanan(kd_barang, ukuran,

jumlah, harga, total)

masukan desain(fi le_gambar)

setTotal()

menyimpan data pemesanan

(no_pesan, kd_barang, harga,

jumlah)

add to cart()

pil ih tombol submit()

memilih kategori(sport, kaos, sweeter)

tampil qty barang(jumlah)

setJumlah()

hitung(jumlah, harga)

pilih ukuran(m, s, xl)

setUkuran()

tampil detail barang(nm_barang, harga)

Page 41: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

Gambar IV.29

Squence Diagram Konfirmasi Pemesanan

4.2.6. Spesifikasi Hardware dan Software

1. Spesifikasi Hardware

a. Server

1) CPU

(a) Processor Intel Caleron CPU 1000 M @ 1.80 GHz

(b) RAM DDR2 2 GB

(c) Hard Disk 500 GB

2) Mouse

3) Keyboard

4) Monitor dengan resolusi layar minimum 1024x768

5) Koneksi internet dengan kecepatan 2 Mbps.

b. Client

1) CPU

(a) Processor Intel Caleron

sd konfirmasi pembayaran

customer

Form konfirmasi

pembayaran

proses konfirmasi

pembayaran

getno_pesan()

menampilkan validasi()

Terimakasih sudah melakukan konfirmasi pembayaran()

menyimpanKonfirmasiPembayaran(no_pesan, jml_transfer, keterangan, tanggal, bukti_transfer)

masukan bukti transfer(fi le_gambar .jpg)

input data konfirmasi pembayaran

(jml_transfer, keterangan)

proses simpan

database()

Page 42: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

(b) RAM DDR2 1GB

(c) Hard Disk 20 GB

2) Mouse

3) Keyboard

4) Monitor dengan resolusi layar minimum 1024x768

5) Koneksi internet dengan kecepatan 56 kbps.

2. Spesifikasi Software

1. Server

a. Sistem operasi yang umum digunakan seperti: Microsoft Windows atau Linux

(Ubuntu, Fedora, dll).

b. Aplikasi bundle web server seperti: Xampp, WampServer, php2triad yang

terdiri dari beberapa komponen, diantaranya:

(1) Aplikasi Apache Server v2

(2) Aplikasi PHP Server v5

(3) Aplikasi MySQL Server v5

(4) Aplikasi phpMyAdmin v3

c. Aplikasi Web Lihatr seperti Mozilla Firefox, Opera, Safari, Internet

Explorer, Google Chrome.

2. Client

a. Sistem operasi yang umum digunakan seperti: Microsoft Windows atau Linux

(Ubuntu, Fedora, dan lain-lain).

b. Aplikasi web browser seperti Mozilla Firefox, Opera, Safari, Internet

Explorer, Google Chrome.

4.3. Jadwal Implementasi

Tabel IV.21.

Jadwal Implementasi

Page 43: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email

No KEGIATAN

WAKTU

BULAN I BULAN II BULAN III

BULAN

IV

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

1

Persiapan data

awal

2 Analisa

3

Desain Kasar

Sistem

4

Pembuatan

Desain Website

5

Tes Sistem

Desain

6 Pelatihan

7

Pembuatan

Buku Petunjuk

8

Evaluasi &

Operasional

Deskripsi Implementasi

Berikut kegiatan selama pembuatan Tugas Akhir dari awal sampai selesainya

Tugas Akhir

1. Persiapan data awal untuk mengumpulkan data-data keuuhan Tugas Akhir

2. Analisa Kebutuhan sistem dari stadereva collection

3. Design kasar sistem dimana saya membuat gambaran kasar dari sebuah

sistem yang ingin saya rancang

4. Design website dimana saya mendesign prototype untuk kebutuhan

perancangan sistem pemesanan pakaian berbasis web pada stadereva

collection

5. Tes sistem design web memastikan agar design yang saya buat sesuai alur

6. Pelatihan agar saya memahami alur dari sistem yang berjalan yang saya buat.

7. Pembuatan buku untuk data yang kita pakai untuk siding dan laporan ke

tempat riset

8. Evaluasi keseluruhan dari Tugas Akhir yang di buat

Page 44: BAB IV PERANCANGAN SISTEM · password. Post-Conditions Member berhasil login. Failed end Condition Member gagal login. Actors Member. Main Flow/ Basic Path 1. Member input id email