BAB III PERANCANGAN SISTEM

BAB III PERANCANGAN SISTEM

3.1

Perancangan Perancangan adalah proses yang dilakukan oleh perancang sistem untuk mengerjakan spesifikasi sistem yang dibutuhkan, membuat suatu keputusan tentang bagaimana komponen sistem diaktualisasikan. Proses ini melibatkan tujuan sistem tersebut, audience, object dan informasi domain. Perancangan yang baik harus mengetahui ba gaimana mendapatkan dampak / efek yang diperlukan oleh spesifikasi tersebut dengan cara paling fleksibel dan efisien. Dalam hal ini, sistem yang akan dibangun adalah dengan menggunakan PHPsebagai bahasa pemrogramannya dan MySQL sebagai database nya serta Dreamweaversebagai media untuk membuat

web

ecommerce ini. Berikut spesifikasi serta target terhadap sistem yang akan dibangun yaitu :  Perancangan yang akan dibangun yaitu “Perancangan aplikasi web ecommerce WK Komputer berbasis multimedia” yang menyediakan informasi – informasi tentang cara pembelian, produk dan proses transaksi.  Target yang akan dicapai dalam perancangan web e-commerce ini adalah diharapkan pengunjung mendapatkan segela informasi mengenai produk denganspesifikasi terbaru, sehingga memudahkan masyarakat dalam 13

melakukan transaksi dan diharapkan juga dapat memberikan kemudahan masyarakat luat pada saat melakukan transaksi secara online.

14

3.2

Rancangan Use Case Diagram

Gambar 3.1 Use Case Diagram Pada diagram diatas dapat dilihat bahwa sistem penjualan toko WK Komputer Salatiga ini, user hanya memiliki hak ases menambah berita, 15

selebihnya tidak ada. Admin memiliki hak akses lebih tinggi untuk mengelola data website WK Komputer, seperti menambah ,mengubah, mengedit user, kategori berita, berita, kategori produk, produk, dan menghapus mengedit order yang dilakukan oleh pengunjung, didalam system ini admin tidak diperkenankan menanmbah order yang hanya bisa dilakukan oleh pengunjung. 3.3

Rancangan DFD

Data Berita

Gambar 3.2 DFD tingkat 0 Website WK Komputer

16

Keterangan : 1= Primary key Data Berita, Data Berita

1

2= Primary key Data User, Data User

2

3= Primary key Data Setting, Data Setting

3

4= Primary key Data Kategori Berita, Data Katgeori Berita

4

5= Primary key Data download, data download

5

6= Primary key Data order,Data order

6

7= Primary key Data kategori produk, data kategori produk

17

7

8= Primary key Data Produk, DataProduk

8

Gambar 3.3 DFD tingkat 1 Website WK Komputer

18

3.4

Struktur Halaman Website

Gambar 3.4 Struktur Halaman Website

19

Dari gambar diatas dapat dijelaskan : 1.

Ketika website dibuka maka pengunjung akan masuk

kedalam

halaman menu utama. 2.

Dari link yang terdapat dalam halaman utama pengunjung dapat

mengunjungi halaman kategori_berita.php, berita.php, profil.php, tampil_produk.php, 3.

download.php,

keranjang_belanja.php, hubungi.php.

Halaman login_usr.php, merupakan form login untuk

halaman administrasi untuk admin dan halaman

tambah

masuk ke berita

untuk

anggota 4.

Pengunjung tidak dapat masuk ke halaman login_usr.php

tanpa

login lebih terdahulu. 5.

Setelah masuk sebagai admin , maka halaman web akan menampilkan hak ases untuk mengelola dan mengatur isi ada di website, seperti edit setting, update berita,

berita, update download, update kategori serta hapus order, namun jika

update

yang kategori

produk, update produk, edit

login sebagai anggota maka hanya akan

menampilkan halaman untuk hak akses menambah berita saja. 6.

Untuk mengakhiri session maka “user” dapat mengklik

menuju halaman logout.php

20

link

3.5

Desain Database

Tabel-tabel dan relasinya yang digunakan dalam

pembuatan

Website WK Komputer Salatiga dalam bentuk gambar

Gambar 3.5Relasi Database tblcms dengan tblkategori,

Gambar 3.6Database User

21

Gambar 3.7Relasi Database orders , orders_detail, produk, orders_temp dengan kategori.

Gambar 3.8DatabaseSetting

22

Gambar 3.9 Database Download

23

3.6

Flowchart

Gambar 3.10Flowchart Menu Utama Website WK Komputer

24

Pada gambar 3.10 diatas, dapat dijelaskan jalannya Website WK Komputer Salatiga sebagai berikut :   



Awal mulai, website dibuka. Menampilkan halaman Awal atau halaman Utama Lalu pilih alamat halaman sesuai dengan kebutuhan pada tampilan menu utama terdapat menu lainnya, yaitu menu berita , menu download, menu profile, menu produk kami, menu keranjang belanja, menu hubungi kami , dan menu login Lalu selesai

25

Start

Tampilkan halaman produk T Beli Y Input Informasi Data Pembeli

T Isian Lengkap Y

Database

End

Gambar 3.11Alur Flowchart Pemesanan Produk (Keranjang Belanja)

Pada gambar 3.11 diatas, dapat dijelaskan jalannya alur Pemesanan produk sebagai berikut :     

Awal mulai, website dibuka. Pilih produk kami Lalu menampilkan Produk Beli produk Jika belum menentukan produk halaman akan kembali menampilkan produk hingga menentukan. 26

 Setelah selesai menentukan pilihan maka isi informasi data pembeli secara lengkap jika belum lengkap akan muncul pesan agar melengkapi data pembeli  Setelah data lengkap  Simpan ke database  Selesai

Start

Tampil Halaman Y Login

Input Username Y dan Password

T Periksa Password dan Username

Y

Username atau Password salah

Halaman Anggota

End

Gambar 3.12Alur Flowchart Login Anggota Pada gambar 3.12 diatas, dapat dijelaskan jalannya alur flowchart login anggota sebagai berikut : 27

Halaman anggota hanya dapat diakses ketika seseorang sudah mendaftar jadi anggota dengan cara pilih menu login dan mengisi data lengkap lalu login kembali. Pada halaman anggota hanya dibatasi hak aksesnya hanya bisa menambah data berita selebih nya tidak ada hak akses untuk ke menu lainnya. Ketika username dan password pada menu login sudah dimasukkan dengan benar maka menu akan menuju ke menu anggota dan ketika salah memasukkan kode atau memasukkan kode yang tidak benar, maka akan kembali ke menu awal atau menu login.

28

Start

Pilih Login

Pilih Daftar

Menampilkan Halaman Daftar

Input Data

T Kelengkapan Data

Y Simpan Database

End

Gambar 3.13Alur Flowchart Daftar Anggota

Pada gambar 3.13 diatas, dapat dijelaskan jalannya alur daftar anggota Sebagai berikut :     

Awal mulai, website dibuka. Pilih login Pilih daftar Menampilkan halaman daftar Masukkan data 29

 Mengecek kelengkapan data , jika data belum lengkap akan kembali ke halaman daftar  Setelah data lengkap  Simpan ke database  Selesai

Start

Anggota

Pilih link pada Y

Halaman Utama

Home T

Y

Halaman Berita (anggota)

Berita T

Y Logout

End

Gambar 3.14Alur Flowchart Menu Utama Anggota

Pada gambar 3.14 diatas, dapat dijelaskan jalannya alur Menu Utama Anggota sebagai berikut :    

Awal mulai, website dibuka. Menampilkan menu login sebagai anggota Pilih alamat menu pada Home, berita, logout Selesai

30

Anggota

Buka Hal Data Berita

Tampilkan Data Berita

Data Sudah Disimpan

Y Tambah Data

Y Data Lengkap ?

Isi Form Berita

T Y Simpan?

T

Simpan Database

T Isi Record Dibatalkan

X

Gambar 3.15Alur Flowchart Berita (anggota)

Pada gambar 3.15diatas, dapat dijelaskan jalannya alur Berita anggota sebagai berikut :    

Login sebagai anggota Buka hal data berita Menampilkan data berita Fungsi tambah data , isi form berita ,jika data sudah lengkap maka pilih simpan maka data akan menyimpan ke database, jika batal data yang sudah diisi akan dikosongkan, tapi  apabila data belum lengkap akan kembali ke form berita. 31

Login

Tampil Halaman Login

Input Username dan Password

T

Periksa Password dan Username

Username dan Password Salah

Y

Halaman Administrator

Administrator

Gambar 3.16Alur Flowchart Login Administrator

Pada gambar 3.16 diatas, dapat dijelaskan jalannya alur flowchart login alur administrator sebagai berikut : Halaman administrator hanya bisa dibuka oleh seorang yang berhak mengaksesnya. Data login terdiri dari username dan password dariadministrator harus sesuai dengan data yang ada pada tabel user. Jika data username dan password sesuai, maka akan berindah ke halaman admin dengan hak ases yang lebih daripada anggota. Jika akses login gagal, maka akan kembali ke menu login. 32

Gambar 3.17Alur Flowchart Menu Utama Admin Pada gambar 3.17 diatas, dapat dijelaskan jalannya alur Menu Utama Admin sebagai berikut :  Awal mulai, website dibuka.  Menampilkan menu login sebagai admin 33

 Pilih alamat menu pada Home, setting, user, Kategori Berita, Berita, Download, Kategori Produk, Produk, Order, Logout  Selesai

Admin

Buka Hal Data Setting

Tampilkan Data Y Edit?

Pilih Data Dari DB

Lengkap? Y

T

Y

T Ubah?

Simpan Database

T Isi Record Dibatalkan

X

Gambar 3.18Alur Flowchart Setting (admin)

Pada gambar 3.18 diatas dapat dijelaskan jalannya alur Flowchart Setting admin sebagai berikut : 34

   

Login sebagai admin Buka hal data setting Menampilkan data setting, Fungsi edit data , ubah isi form setting apabila ada yang akan dirubah ,jika data sudah lengkap maka pilih simpan maka data akan menyimpan ke database, jika batal data dikembalikan ke awal, tapi apabila data belum lengkap akan kembali ke form setting.

35

Admin

Buka Hal Data User

Tampilkan Data Data disimpan Y

Y

Tambah Data

Menampilkan Form

simpan

Y

Isi Form

Simpan Database

T Isi Record Dibatalkan

Lengkap?

T

X

Y Y

Pilih Data Dari DB User

Edit

Simpan

Simpan Database User

T T

T

Y Hapus

Isi Record Di Hapus

X

Isi Record Dibatalkan X

Gambar 3.19Alur Flowchart User (admin)

Pada gambar 3.19 diatas, dapat dijelaskan jalannya alur FlowchartUser (admin) sebagai berikut :  Login sebagai admin  Buka hal data user  Menampilkan data user 36

 Fungsi tambah data , isi form user ,jika data sudah lengkap maka pilih simpan maka data akan menyimpan ke database, jika batal data yang sudah diisi akan dikosongkan,  Fungsi edit data , pilih data dari tabel user yang akan di edit, setelah data user selesai di edit pilih simpan untuk menyimpan ke database, dan apabila batal, maka data akan dikosongkan.  Fungsi hapus data, pilih data user di tabel yang akan dihapus lalu hapus maka data akan dihapus

37

Admin

Buka Hal Data Kategori Berita

Tampilkan Data

Data disimpan

Y

Y

Tambah Data

Menampil kan Form

simpan

Y

Isi Form Kategori

T

Isi Record Dibatalkan X

Y

Pilih Data Dari DB Kategori

Edit

T

Lengkap?

T Y

Simpan

T T

Simpan Database Kategori

T Isi Record Dibatalkan

Y Hapus

Simpan Database

Isi Record Di Hapus

X

X

Gambar 3.20 Alur Flowchart Kategori Berita (admin) X

Pada gambar 3.20 diatas, dapat dijelaskan jalannya alur Flowchart Kategori Berita (admin) sebagai berikut :  Login sebagai admin  Buka hal data kategori berita  Menampilkan data kategori berita 38

 Fungsi tambah data , isi form kategori berita ,jika data sudah diisi maka pilih simpan maka data akan menyimpan ke database, jika batal data yang sudah diisi akan dikosongkan,  Fungsi edit data , pilih data dari tabel kategori berita yang akan di edit, setelah data kategori berita selesai di edit pilih simpan untuk menyimpan ke database, dan apabila batal, maka data akan dikosongkan.  Fungsi hapus data, pilih data kategori berita di tabel yang akan dihapus lalu hapus maka data akan dihapus

39

Admin

Buka Hal Data Berita

Tampilkan Data

Data disimpan

Y

Y

Tambah Data

Form

simpan

Y

T

Isi Form Berita

T

Simpan Database

Isi Record Dibatalkan

Lengkap?

T

X

Y

Y

Pilih Data Dari DB Berita

Edit

Simpan

T

Simpan Database Berita

T Isi Record Dibatalkan

T

Y Isi Record Di Hapus

Hapus

X X

Gambar 3.21Alur Flowchart Berita (admin) Pada gambar 3.21 diatas, dapat dijelaskan jalannya alur Flowchart Berita (admin) sebagai berikut :  Login sebagai admin 40

X

 Buka hal data berita  Menampilkan data berita  Fungsi tambah data , isi form berita ,jika data sudah diisi maka pilih simpan maka data akan menyimpan ke database, jika batal data yang sudah diisi akan dikosongkan.  Fungsi edit data , pilih data dari tabel berita yang akan di edit, setelah data berita selesai di edit pilih simpan untuk menyimpan ke database, dan apabila batal, maka data akan dikosongkan.  Fungsi hapus data, pilih data berita di tabel yang akan dihapus lalu hapus maka data akan dihapus

41

Admin

Buka Hal Data Download

Tampilkan Data

Data disimpan Y

Tambah Data

Isi Form

Y Input File

simpan

Simpan Database T

T

Isi Record Dibatalkan X Y Edit

Y Pilih Data Dari DB Download

Simpan

Simpan Database Download

T T

Isi Record Dibatalkan T Y Hapus

Isi Record Di Hapus

X

X

Gambar 3.22Alur Flowchart Download (admin) Pada gambar 3.22 diatas, dapat dijelaskan jalannya alur Flowchart Download (admin) sebagai berikut :  Login sebagai admin  Buka hal data download  Menampilkan data download 42

 Fungsi tambah data , isi form doenload ,jika data sudah diisi maka masukkan file untuk didownload lalu pilih simpan maka data akan menyimpan ke database, jika batal data yang sudah diisi akan dikosongkan.  Fungsi edit data , pilih data dari tabel download yang akan di edit, setelah data berita selesai di edit pilih simpan untuk menyimpan ke database, dan apabila batal, maka data akan dikosongkan.  Fungsi hapus data, pilih data download di tabel yang akan dihapus lalu hapus maka data akan dihapus

43

Admin

Buka Hal Data Kategori Produk Tampilkan

Datadisimpan Y

Y

Tambah

simpan

Form

T

Simpan Database

Y

Isi Form

T Isi Record Batal

Lengkap?

T X Y Y

Edit

Pilih Data Dari DB

Simpan Simpan Database

T T Isi Record Batal T

X

Y Hapus

Isi Record Di Hapus

X

Gambar 3.23Alur Flowchart Kategori Produk (admin) Pada gambar 3.23 diatas, dapat dijelaskan jalannya alur Flowchart Kategori Produk (admin) sebagai berikut :  Login sebagai admin  Buka hal data Kategori Produk  Menampilkan data Kategori Produk 44

 Fungsi tambah data , isi form Kategori Produk ,jika data sudah diisilalu pilih simpan maka data akan menyimpan ke database, jika batal data yang sudah diisi akan dikosongkan.  Fungsi edit data , pilih data dari tabel Kategori Produk yang akan di edit, setelah data berita selesai di edit pilih simpan untuk menyimpan ke database, dan apabila batal, maka data akan dikosongkan.  Fungsi hapus data, pilih data Kategori Produk di tabel yang akan dihapus lalu hapus maka data akan dihapus

45

Admin

Buka Hal Data Produk Tampilkan Data

Data disimpan

Y Y Tambah

simpan

Form

Simpan Database

Y

Isi Form

T

T

T Isi Record Dibatalkan

Lengkap?

X Y Edit

Y Pilih Data Dari DB

Simpan

Simpan Database T

T

Produk Isi Record Dibatalkan

T

X

Y Hapus

Isi Record Di Hapus

X

Gambar 3.24Alur Flowchart Produk (admin) Pada gambar 3.24 diatas, dapat dijelaskan jalannya alur Flowchart Produk (admin) sebagai berikut :  Login sebagai admin  Buka hal data Produk  Menampilkan data Produk 46

 Fungsi tambah data , isi form Produk ,jika data sudah diisilalu pilih simpan maka data akan menyimpan ke database, jika batal data yang sudah diisi akan dikosongkan.  Fungsi edit data , pilih data dari tabel Produk yang akan di edit, setelah data berita selesai di edit pilih simpan untuk menyimpan ke database, dan apabila batal, maka data akan dikosongkan.  Fungsi hapus data, pilih data Produk di tabel yang akan dihapus lalu hapus maka data akan dihapus

47

Admin

Buka Hal Data Order

T Y Y

Tampilkan Data

Edit

Pilih Data Dari DB

Y

Simpan Database

Simpan

T

Isi Record Dibatalkan

X T

Y

Hapus

Isi Record Di Hapus

X

Gambar 3.25Alur Flowchart Order (admin)

Pada gambar 3.25 diatas, dapat dijelaskan jalannya alur Flowchart Order (admin) sebagai berikut :  Login sebagai admin  Buka hal data Order  Menampilkan data Order 48





Fungsi edit data , pilih data dari tabel Order yang akan di edit, setelah data berita selesai di edit pilih simpan untuk menyimpan ke database, dan apabila batal, maka data akan dikembalikan ke kondisi awal. Fungsi hapus data, pilih data Order di tabel yang akan dihapus lalu hapus maka data akan dihapus

49