BAB IV PERENCANAAN DAN ANALISA PERANCANGAN SISTEM

BAB IV

PERENCANAAN DAN ANALISA PERANCANGAN SISTEM

4.1 Perencanaan

Perencanaan sistem yang akan dibuat termasuk hal yang paling utama dan inti dalam membangun suatu sistem berbasis web. Perencanaan harus dibuat secara teliti dan matang, sehingga sistem yang akan dibangun dapat berjalan dengan lancar. Penulis kali ini berencana untuk membangun aplikasi e-commerce desain interior berbasis web.

4.2 Analisa dan Kebutuhan Sistem

Tahap analisa dan kebutuhan sistem sangat diperlukan untuk mendapat data-data yang akan digunakan untuk sistem, yaitu :

4.2.1 Analisa Kebutuhan Hardware (Perangkat Keras)

Spesifikasi minimal hardware yang dapat digunakan untuk perancangan sistem ini sebagai berikut :

1. Processor Intel(R) Celeron(R) CPU 1000M @ 1.80GHz 2. RAM 2GB

3. Harddisk 500GB 4. Mouse

5. Keyboard 6. Monitor 7. Printer

4.2.2 Analisa Kebutuhan Software (Perangkat Lunak)

Kebutuhan perangkat lunak software yang dibutuhkan untuk perancangan sistem ini antara lain :

1. Sistem Operasi Windows 7

2. Web Browser : [Google Chrome: 70.0.3538.110]

3. Bahasa Pemrograman [PHP: 5.3.8]

4. Web Server [XAMPP: 1.7.7]

5. Database [MySql: 5.5.16]

6. Web Editor [Sublime Text: 3.14.3]

4.2.3 Analisa Kebutuhan User

Dalam melakukan pemasaran PT. Daya Cipta Karya Sempurna masih menggunakan sistem penawaran melalui handpone dengan cara sms ataupun menelpon pembeli dan untuk pelayanan konsultasi seputar stok kayu yang di jual dari Marketing PT. Daya Cipta masih melakukan pengiriman gambar kayu yang tersedia di gudang barang jadi masih melalui Whatsapp maupun Email Cara ini dirasakan kurang efektif oleh Marketing yang akan memasarkan profil kayu dengan hanya mengandalkan brosur dan kepintaran ingatan mereka agar dapat menarik minat pembeli.

Berdasarkan masalah tersebut, maka penulis membuat sebuah aplikasi E-commerce desain interior berbasis Web yang dapat membantu proses penjualan. Aplikasi yang dapat mempermudah admin untuk mengelola data penjualan desain interior dan mempermudah pemasaran serta memberikan akses yang lebih mudah bagi pelanggan untuk melakukan pembelian kayu.

4.3 Perancangan Sistem

Pada tahap perancangan sistem ini akan menggambarkan elemen-

elemen dalam sistem. Merupakan tahap pembuatan desain model setiap

aktifitas yang dilakukan pengguna sistem berdasarkan hak aksesnya dalam

sistem tersebut. Terdapat beberapa diagram yang akan menggambarkan

sistem secara menyeluruh. Perancangan sistem dibangun dengan

menggunakan Unified Modelling Language (UML) yang terdiri dari use case

diagram, sequence diagram, activity diagram dan class diagram.

4.3.1 Use Case Diagram

Use case diagram merupakan pemodelan untuk sistem yang akan dibuat. Menampilkan relasi antar aktor dengan use case dan use case dengan use case. Berikut dalam gambar 4.1 usecase diagram website penjualan PT. Daya Cipta Karya Sempurna berbasis PHP dan Mysql :

Gambar 4.1 Use Case Diagram.

Pada usecase diagram gambar 4.1, terlihat 2 aktor sebagai gambaran relasi dengan usecase.

Skenario use case diagram : 1) Skenario Kelola Data Produk

Skenario kelola data produk terdapat dalam tabel 4.1 Tabel 4.1 Skenario Kelola Data Produk Nama use case : kelola data Produk

Aktor : admin

Deskripsi : admin dapat melakukan tambah, ubah, dan hapus data produk.

Pre-kondisi : admin melakukan login untuk dapat mengakses halaman admin.

Post-kondisi : perubahan data desain interior dalam database.

Aktor Sistem

1. mengakses halaman login admin.

2. menampilkan halaman login admin.

3. memasukkan username dan password.

4. jika username dan password valid maka login

Kelola Data Produk

Kelola Data Pembelian

Daftar Costumer

Order Barang

Costumer

Riwaya Pembelian Admin

Kelola Data Costumer

sukses dan sistem menampilkan halaman admin, jika username dan password tidak valid maka login gagal dan sistem kembali menampilkan halaman login admin.

5. memilih menu kelola data produk.

6. menampilkan data produk Skenario Alternatif Tambah Data

7. melakukan tambah data produk dengan klik tombol

“tambah”.

8. menampilkan form tambah data.

9. mengisi data produk pada form tambah data.

10. meyimpan data produk yang akan ditambahkan dengan klik tombol

“simpan”.

11. memeriksa valid tidaknya data masukan.

12. menyimpan data yang ditambahkan.

13. menampilkan halaman produk dengan data produk yang sudah ter- update.

Skenario Alternatif Ubah Data 14. melakukan ubah data

produk dengan klik tombol

“ubah” pada desain yang ingin diubah.

15. menampilkan form ubah data.

16. mengubah data produk pada form ubah data.

17. menyimpan data produk yang telah diubah dengan klik tombol “simpan”.

18. memeriksa valid tidaknya data masukan.

19. menyimpan data yang telah diubah.

20. menampilkan halaman produk dengan data produk yang sudah ter- update.

Skenario Alternatif Hapus Data 21. melakukan hapus data

produk dengan klik tombol

22. menghapus data produk

yang telah dipilih.

“hapus” pada desain yang ingin dihapus.

23. menyimpan perubahan data.

24. menampilkan halaman produk dengan data desain yang sudah ter-update.

Pada table 4.1 adalah proses skenario kelola data produk.

2) Skenario Kelola Data Pembelian

Skenario kelola data pembelian terdapat pada table 4.2 Tabel 4.2 Skenario Kelola Data Pembelian Nama use case : kelola data pembelian

Aktor : admin

Deskripsi : admin dapat melakukan pelunasan data pembelian dan cetak nota penjualan.

Pre-kondisi : admin melakukan login untuk dapat mengakses halaman admin.

Post-kondisi : perubahan data penjualan dalam database.

Aktor Sistem

1. masuk halaman admin dan memilih menu pembelian.

2. Menampilkan data pembelian produk.

Skenario Alternatif Ubah Status Pembayaran 3. memilih data pembelian

yang akan diubah status transaksi atau pun stok barang.

4. menampilkan halaman detail pembelian.

5. mengubah status pembayaran data pembelian menjadi lunas.

6. menyimpan perubahan data pembelian.

7. menampilkan data pembelian yang sudah ter- update.

Skenario Alternatif Cetak Nota Penjualan 8. memilih data pembelian

yang akan dicetak.

9. menampilkan halaman detail pembelian.

10. memilih / menekan tombol cetak.

11. nota pembelian tercetak.

Pada table 4.1 adalah proses skenario kelola data pembelian, proses dimana antara actor dengan sistem.

3) Skenario Kelola Data Costumer

Skenario kelola data costumer terdapat pada table 4.3

Tabel 4.3 Skenario Kelola Data Costumer Nama use case : kelola data costumer

Aktor : admin

Deskripsi : admin dapat menghapus data costumer yang telah terdaftar sebagai member.

Pre-kondisi : admin melakukan login untuk dapat mengakses halaman admin.

Post-kondisi : perubahan data penjualan dalam database.

Aktor Sistem

1. masuk halaman admin dan memilih menu costumer.

2. menampilkan data costumer.

Skenario Alternatif Hapus Data Pelanggan 3. melakukan hapus data

costumer dengan klik tombol “hapus” pada data yang ingin dihapus.

4. menghapus data costumer yang dipilih.

5. menyimpan perubahan data.

6. menampilkan halaman costumer dengan data yang sudah ter-update.

Pada table 4.3 adalah proses skenario kelola data costumer, proses dimana antara actor dengan ssstem.

4) Skenario Riwayat Pembelian

Skenario riwayatpembelian terdapat pada table 4.4 Tabel 4.4 Skenario Riwayat Pembelian Nama use case : Riwayat Pembelian

Aktor : costumer

Deskripsi : costumer mengakses halaman riwayat pembelian untuk melihat hasil pembelian barang.

Pre-kondisi : costumer mengakses halaman utama website e- commerce.

Post-kondisi : tampil detail dari riwayat pembelian.

Aktor Sistem

1. masuk halaman utama / halaman riwayat pembelian.

2. menampilkan halaman pembelian.

3. Melihat detail transaksi 4. klik tombol “detail” pada

order barang untuk melihat detail pembelian.

5. menampilkan halaman

detail riwayat pembelian.

5) Skenario Order Barang

Skenario order barang terdapat pada table 4.5 Tabel 4.5 Skenario Order Barang Nama use case : order barang

Aktor : costumer

Deskripsi : costumer dapat melakukan order barang dan mengelola keranjang belanja.

Pre-kondisi : costumer mengakses halaman utama website e- commerce.

Post-kondisi : costumer melakukan order barang.

Aktor Sistem

1. masuk halaman utama / halaman costumer.

2. menampilkan halaman costumer.

3. mencari barang yang diinginkan.

Skenario Alternatif Tambah Order Desain 4. klik tombol “order” pada

barang yang diinginkan.

5. menambahkan data barang terpilih ke dalam keranjang belanja.

6. menampilkan halaman keranjang belanja.

Skenario Alternatif Ubah Jumlah Order 7. klik tombol “detail” pada

barang untuk melihat detail barang.

8. menampilkan halaman detail data barang.

9. mengubah jumlah order barang.

10. klik tombol “order”. 11. menambahkan data barang terpilih ke dalam keranjang belanja.

12. menampilkan halaman keranjang belanja.

Skenario Alternatif Hapus Order Desain 13. klik tombol “hapus” pada

barang yang akan dihapus pada keranjang belanja.

14. menghapus data order

barang yang dipilih.

15. menampilkan keranjang belanja dengan data barang yang ter-update.

16. melakukan checkout dengan klik tombol

”checkout”.

17. memproses data pembelian barang.

6) Skenario Daftar costumer

Skenario daftar costumer terdapat pada table 4.6 Tabel 4.6 Skenario Daftar costumer Nama use case : daftar costumer

Aktor : costumer

Deskripsi : costumer dapat melakukan pendaftaran akun costumer.

Pre-kondisi : costumer mengakses halaman utama website e- commerce.

Post-kondisi : costumer melakukan daftar costumer.

Aktor Sistem

1. masuk halaman utama / halaman costumer.

2. menampilkan halaman costumer.

3. memilih menu daftar costumer.

4. menampilkan form pendaftaran costumer.

5. melakukan input nama, email, password, alamat, telepon, klik tombol

“daftar”.

6. Jika data masukan valid maka pendaftaran berhasil, sistem akan menyimpan akun dan menampilkan halaman login, jika data masukan invalid maka pendaftaran gagal dan sistem akan reload kembali form pendaftaran costumer.

4.3.2 Activity Diagram

Activity diagram website e-commerce ini membahas mengenai aktifitas-aktifitas yang dilakukan aktor dalam menjalankan sistem.

Berikut activity diagram website penjualan online (e-commerce) PT.

Daya Cipta Karya Sempurna berbasis PHP dan Mysql :

a. Activity Diagram Kelola Data Produk

Activity diagram kelola data produk terdapat pada gambar 4.2

Gambar 4.2 Activity Diagram Kelola Data Produk

Terlihat gambar 4.2 adalah aktivitas actor dalam menjalankan sistem

kelola data produk.

b. Activity Diagram Kelola Data Pembelian

Activity diagram kelola data pembelian terdapat pada gambar 4.3

Gambar 4.3 Activity Diagram Kelola Data Pembelian

Terlihat gambar 4.3 adalah aktivitas actor dalam menjalankan sistem kelola data pembelian.

c. Activity Diagram Kelola Data Costumer

Activity diagram kelola data costumer terdapat pada gambar 4.4

Gambar 4.4 Activity Diagram Kelola Data Costumer

Terlihat gambar 4.4 adalah aktivitas actor dalam menjalankan sistem kelola data costumer.

Pilih menu pembelian

Lihat data pembelian

Ubah status pembayaran

Update

Cetak nota penjualan Nota tercetak

Pilih menu costumer

Lihat data costumer Hapus data

costumer

Update Ya Tidak

d. Activity Diagram Melihat Riwayat Pembelian

Activity diagram melihat riwayat pembelian terdapat pada gambar 4.5

Gambar 4.5 Activity Diagram Melihat Riwayat Pembelian Terlihat gambar 4.5 adalah activity diangram melihat riwayat pembelian dalam menjalankan sistem kelola data costumer.

e. Activity Diagram Order Barang

Activity diagram order barang terdapat pada gambar 4.6

Gambar 4.6 Activity Diagram Order Barang

Terlihat gambar 4.6 adalah activity diangram melihat riwayat pembelian dalam menjalankan sistem kelola data costumer.

Halaman Pelanggan

Pilih menu riwayat pembelian

Detai Riwayat Pembelian

Ya Tidak

f. Activity Diagram Daftar Costumer

Activity diagram melihat riwayat pembelian terdapat pada gambar 4.7

Gambar 4.7 Activity Diagram Daftar Costumer

Terlihat gambar 4.7 adalah activity diagram daftar costumer dalam menjalankan sistem kelola data costumer.

4.3.3 Sequence Diagram

Sequence diagram website e-commerce ini membahas mengenai alur setiap proses yang digambarkan melalui interface- interface berupa aktor dan objek- objek yang ada pada sistem.

Mendeskripsikan waktu hidup objek dan pesan yang dikirimkan dan diterima antar objek. Berikut sequence diagram website penjualan PT.

Daya Cipta Karya Sempurna berbasis PHP dan Mysql :

Halaman Costumer

Pilih menu daftar costumer

Input data costumer

Akun tersimpan Valid Invalid

a. Sequence Diagram Kelola Data Produk

Berikut sequence diagram kelola data produk terdapat pada gambar 4.8

Gambar 4.8 Sequence Diagram Kelola Data Produk

18. Lihat data produk : Admin

: Admin

Halaman Admin

Halaman Admin Data ProdukData Produk Kelola Data Produk Kelola Data

Produk

Database Database

1. Pilih menu data produk

2. Tampil data produk

3. Tambah data produk

4. Proses tambah

5. Simpan data

6. Sukses

7. Tampil data produk 8. Ubah data produk

9. Proses ubah

10.Ubah data

11. Sukses

12. Tampildata desain

13. Hapus data produk

14. Proses hapus

15. Hapus data 16. Sukses

17. Tampil data

b. Sequence Diagram Kelola Data Pembelian

Berikut sequence diagram kelola data pembelian terdapat pada gambar 4.9

Gambar 4.9 Sequence Diagram Kelola Data Pembelian

12. Lihat data pembelian : Admin

: Admin

Halaman Admin

Halaman Admin Data Pembelian

Data Pembelian

Kelola Data

Kelola Data DatabaseDatabase

1. Pilih menu pembelian

2. Tampil data pembelian

3. Ubah status pembayaran

4. Proses ubah

5. Ubah data 6. Sukses 7. Tampil data pembelian

8. Cetak nota pembelian

9. Proses cetak

10. Cetak data

11. Sukses

11. Tampil nota pembelian

c. Sequence Diagram Kelola Data Costumer

Berikut sequence diagram kelola data costumer terdapat pada gambar 4.10

Gambar 4.10 Sequence Diagram Kelola Data Costumer

d. Sequence Diagram Melihat Riwayat Pembelian

Berikut sequence diagram melihat riwayat pembelian terdapat pada gambar 4.11

Gambar 4.11 Sequence Diagram Melihat Riwayat Pembelian

: Admin : Admin

Halaman Admin

Halaman Admin Data CostumerData Costumer Kelola DataKelola Data DatabaseDatabase

1.Pilih menu costumer

2. Tampil data costumer

3. Hapus data costumer

4. Proses hapus

5. Hapus data

6. Sukses 7. Tampil data costumer

8. Lihat data costumer

4. Lihat detail data produk : Costumer

: Costumer

halaman Costumer halaman Costumer

Halaman Detail Produk Halaman Detail

Produk

Data Produk Data Produk

1.Pilih data produk

2. Pilih detai data produk

3. Tampil detail produk

e. Sequence Diagram Order Barang

Berikut sequence diagram order barang terdapat pada gambar 4.12

Gambar 4.12 Sequence Diagram Order Barang

17. Check out : Costumer

: Costumer

Halaman Pelanggan

Halaman Pelanggan

Halaman Detail Barang Halaman Detail

Barang

Keranjang Belanja Keranjang

Belanja

Kelola Data

Kelola Data DatabaseDatabase

1. Pilih halaman pelanggan

2. Pilih detail barang

3. Order barang

4. Tambah order barang

5. Sukses

6. Tampil barang yang di order

7. Ubah jumlah order

8. Proses ubah jumlah

9. Ubah order 10. Sukses

11. Tampil data order

12. hapus data order

13. Proses hapus

14. Hapus order

15. Sukses

16. Tampil data order

f. Sequence Diagram Daftar Costumer

Berikut sequence diagram daftar costumer terdapat pada gambar 4.13

Gambar 4.13 Sequence Diagram Daftar Costumer

4.3.4 Class Diagram

Class diagram website e-commerce ini membahas mengenai relasi dari setiap class pada sistem, termasuk atribut dan operasi apa saja yang ada pada setiap class. Berikut activity diagram website penjualan PT. Daya Cipta Karya Sempurna berbasis PHP dan Mysql :

: Costumer : Costumer

Halaman Costumer Halaman Costumer

Halaman Daftar Costumer Halaman Daftar

Costumer

Validasi Data

Validasi Data Halaman Log inHalaman Log in DatabaseDatabase

1. Pilih menu daftar costumer

2. tampil form pendaftaran costumer

3. Input data pribadi

4. Proses daftar

5. Cek data 6. Valid

7. Pendaftaran sukses

8. Input data pribadi

9. Proses daftar

10. Cek data

11. Invalid

12. Pendaftaran gagal

Gambar 4.14 Class Diagram

Keterangan : gambar 4.14 membahas relasi dari setiap clas pada sistem.

4.4 Perancangan Database

Perancangan database merupakan gambaran mengenai pembuatan tabel dalam database beserta dengan atributnya. Perancangan database juga akan memberikan gambaran mengenai relasi yang terjadi antar tabel dalam sistem. Berikut perancangan database website e-commerce desain interior : 1. Perancangan Tabel Admin

Nama Tabel : admin

Fungsi : penyimpanan data admin Primary Key : id_admin

Tabel 4.7 Rancangan Tabel Admin

Field Tipe data Keterangan

id_admin int(2) Primary Key

Username varchar(25)

Password varchar(25)

nama_lengkap varchar(25)

2. Perancangan Tabel Barang

Nama Tabel : barang

Fungsi : penyimpanan data barang Primary Key : id_barang

Tabel 4.8 Rancangan Tabel Barang

Field Tipe data Keterangan

id_barang int(3) Primary Key

nama_barang varchar(50) harga_barang int(9) foto_barang varchar(50) deskripsi_barang Text 3. Perancangan Tabel Costumer

Nama Tabel : costumer

Fungsi : penyimpanan data costumer Primary Key : id_costumer

Tabel 4.9 Rancangan Tabel Costumer

Field Tipe data Keterangan

id_costumer int(5) Primary Key

email_ costumer varchar(50) password_ costumer varchar(25) nama_ costumer varchar(25) telepon_ costumer varchar(12) 4. Perancangan Tabel Pembelian

Nama Tabel : pembelian

Fungsi : penyimpanan data pembelian barang Primary Key : id_pembelian

Tabel 4.10 Rancangan Tabel Pembelian

Field Tipe data Keterangan

id_pembelian int(5) Primary Key

id_costumer int(5) Foreign Key

tanggal_pembelian Date total_pembelian int(10) alamat_pengiriman Text

Status Text

5. Perancangan Tabel Detail Pembelian Barang

Nama Tabel : penjualan_Barang

Fungsi : penyimpanan data detail pembelian barang Primary Key : id_pembelian_barang

Tabel 4.11 Rancangan Tabel Detail Pembelian

Field Tipe data Keterangan

id_pembelian_barang int(5) Primary Key id_pembelian int(5) Foreign Key

id_barang int(3) Foreign Key

jumlah int(2)

4.5 Perancangan Desain Interface

4.5.1 Desain Interface Halaman Admin 1. Login

Berikut desain login terdapat pada gambar 4.15

Gambar 4.15 Desain Interface Login Admin

Keterangan : desain untuk tampilan awal sebelum masuk ke halaman admin dimana hak akses halaman admin ditentukan dari valid tidaknya login.

2. Home

Berikut desain home terdapat pada gambar 4.16

Gambar 4.16 Desain Interface Home

Keterangan : desain untuk tampilan awal halaman admin dimana halaman ini akan tampil setelah proses login admin sukses.

3. Produk

Berikut desain produk terdapat pada gambar 4.17

Gambar 4.17 Desain Interface Form Data Produk Keterangan : desain untuk tampilan form data Produk.

4. Tambah Produk

Berikut desain tambah produk terdapat pada gambar 4.18

Gambar 4.18 Desain Interface Form Tambah Produk

Keterangan : desain untuk tampilan form tambah desain, form ini tampil setelah menekan tombol tambah pada form data produk.

5. Pembelian

Berikut desain pembelian terdapat pada gambar 4.19

Gambar 4.19 Desain Interface Form Data Pembelian Keterangan : desain untuk tampilan form data pembelian.

6. Detail Pembelian

Berikut desain pembelian terdapat pada gambar 4.20

Gambar 4.20 Desain Interface Detail Pembelian

Keterangan : desain untuk tampilan form detail pembelian, form ini tampil setelah menekan tombol detail pada form data pembelian.

7. Costumer

Berikut desain costumer terdapat pada gambar 4.21

Gambar 4.21 Desain Interface Form Data Costumer

Keterangan : desain untuk tampilan form data Costumer

4.5.2 Desain Interface Halaman Costumer 1. Home

Berikut desain home terdapat pada gambar 4.22

Gambar 4.22 Desain Interface Home (halaman Costumer)

Keterangan : desain untuk tampilan awal website e-commerce halaman costumer.

2. Detail Desain

Berikut detail desain terdapat pada gambar 4.23

Gambar 4.23 Desain Interface Detail Barang

Keterangan : desain untuk tampilan detail dari setiap barang yang ada pada halaman awal website.

3. Keranjang Belanja

Berikut desain keranjang belanja terdapat pada gambar 4.24

Gambar 4.24 Desain Interface Cart (keranjang belanja)

Keterangan : desain untuk tampilan keranjang belanja, keranjang belanja tampil setelah pelanggan melakukan order barang.

4. Login Pelanggan

Berikut desain login pelanggan terdapat pada gambar 4.25

Gambar 4.25 Desain Interface Login Costumer

Keterangan : desain untuk tampilan form login costumer.

5. Daftar Akun

Berikut desain daftar akun terdapat pada gambar 4.26

Gambar 4.26 Desain Interface Daftar Akun Costumer Keterangan : desain untuk tampilan form daftar akun costumer.

6. Checkout

Berikut desain login terdapat pada gambar 4.27

Gambar 4.27 Desain Interface Form Checkout

Keterangan : desain untuk tampilan form checkout, form untuk memeriksa

dan melengkapi data sebelum melakukan pembelian.

7. Nota

Berikut desain nota terdapat pada gambar 4.28

Gambar 4.28 Desain Interface Nota Pembelian

Keterangan : desain untuk tampilan nota pembelian, tampil setelah pelanggan selesai melakukan checkout.

8. Cetak

Berikut desain cetak terdapat pada gambar 4.29

Gambar 4.29 Desain Interface Cetak Nota Pembelian

Keterangan : desain untuk tampilan cetak nota pembelian, tampil setelah

pelanggan menekan tombol “Cetak”, tampil dalam format *.pdf

9. History Order

Berikut desain history order terdapat pada gambar 4.30

Gambar 4.30 Desain Interface History Order

Keterangan : desain untuk tampilan history order, menampilkan riwayat belanja pelanggan.

10. Pembayaran Belum Lunas

Berikut desain pembayaran belum lunas terdapat pada gambar 4.31

Gambar 4.31 Desain Interface Pembayaran Belum Lunas

Keterangan : desain untuk tampilan pembayaran belum lunas tampil setelah pelanggan menekan tombol detail pada halaman history order.

11. Pembayaran Lunas

Berikut desain pembayaran lunas terdapat pada gambar 4.32

Gambar 4.32 Desain Interface Pembayaran Lunas

Keterangan : desain untuk tampilan pembayaran lunas tampil setelah

pelanggan menekan tombol detail pada halaman history order.