T0 562011602 BAB III

13

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 e-commerce 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

14

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

15

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,

16

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

Gambar 3.2 DFD tingkat 0 Website WK Komputer Data

17 Keterangan :

1= Primary key Data Berita, Data Berita

2= Primary key Data User, Data User

3= Primary key Data Setting, Data Setting

4= Primary key Data Kategori Berita, Data Katgeori Berita

5= Primary key Data download, data download

6= Primary key Data order,Data order

18 8= Primary key Data Produk, DataProduk

19

3.4 Struktur Halaman Website

20 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, download.php, profil.php, tampil_produk.php, keranjang_belanja.php, hubungi.php. 3. Halaman login_usr.php, merupakan form login untuk masuk ke halaman administrasi untuk admin dan halaman tambah 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 yang ada di website, seperti edit setting, update berita, update kategori berita, update download, update kategori produk, update produk, edit serta hapus order, namun jika login sebagai anggota maka hanya akan menampilkan halaman untuk hak akses menambah berita saja.

6. Untuk mengakhiri session maka “user” dapat mengklik link

21

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,

22

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

23

24

3.6 Flowchart

25

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

26

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.

Y

Input Informasi Data Pembeli

Isian Lengkap

Database

End Start

Beli Tampilkan halaman produk T

T

27

 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

Gambar 3.12Alur Flowchart Login Anggota

Pada gambar 3.12 diatas, dapat dijelaskan jalannya alur flowchart login anggota sebagai berikut :

Y Y T Y Tampil Halaman Login Input Username dan Password Halaman Anggota Username atau Password salah Periksa Password dan Username Start End

28

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.

29

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

T

Y

Start

Pilih Login

Pilih Daftar

Menampilkan Halaman Daftar

Input Data

Kelengkapan Data

Simpan Database

30

 Mengecek kelengkapan data , jika data belum lengkap akan kembali ke halaman daftar

 Setelah data lengkap  Simpan ke database  Selesai

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

Start

Anggota

Pilih link pada

Home

Berita

Logout _End

Halaman Utama Halaman Berita (anggota) Y Y T T Y

31

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. T

Y _Y

Isi Form Berita

Simpan? _Database Simpan

Isi Record Dibatalkan X Anggota Buka Hal Data Berita Tampilkan Data Berita Tambah Data T Data Sudah Disimpan Data Lengkap ? Y T

32

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.

T

Y Login

Tampil Halaman Login

Input Username dan Password

Periksa Password dan

Username

Halaman Administrator

Administrator

Username dan Password

33

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.

34

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

 Selesai

Gambar 3.18Alur Flowchart Setting (admin)

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

Y Y

Admin

Buka Hal Data Setting

Tampilkan Data

Edit? Pilih Data _{Dari DB}

T

Ubah? Simpan

Database

Isi Record Dibatalkan

X T

Y T

35  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.

36

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

T

T

Y Y

Y

Y

Y Admin

Buka Hal Data User

Tampilkan Data

Tambah

Data simpan Simpan

Database X Isi Record Dibatalkan Isi Record Dibatalkan Pilih Data Dari DB User

Simpan _Simpan

Database User

X

Hapus Isi Record Di

Hapus X

Edit T T Data disimpan T Menampilkan Form Lengkap?

37

 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

38

Gambar 3.20 Alur Flowchart Kategori Berita (admin)

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

X Y Y Y T T Y Isi Record Dibatalkan Pilih Data Dari DB Kategori

Simpan _{Simpan Database}

Kategori

Hapus Isi Record Di

Hapus X

simpan Simpan Database X Isi Record Dibatalkan Admin

Buka Hal Data Kategori Berita Tampilkan Data Tambah Data Isi Form Kategori Edit T Data disimpan X T Y T Lengkap? Menampil kan Form Y T

39

 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

40

Gambar 3.21Alur Flowchart Berita (admin)

Pada gambar 3.21 diatas, dapat dijelaskan jalannya alur Flowchart Berita (admin) sebagai berikut :

 Login sebagai admin

X Admin Buka Hal Data Berita Tampilkan Data Tambah

Data simpan Simpan

Database X Isi Form Berita Edit Isi Record Dibatalkan Isi Record Dibatalkan Pilih Data Dari DB Berita

Simpan _Simpan

Database Berita

Hapus Isi Record Di

Hapus X

Y Y Y T T Y Y T T Data disimpan X T Form Lengkap? Y T

41  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

42

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

Y Y Y T T Y Y T T Isi Record Dibatalkan Pilih Data Dari DB Download Simpan Simpan Database Download X Admin

Buka Hal Data Download

Tampilkan Data

Tambah

Data simpan Simpan

Database X Isi Form Edit Isi Record Dibatalkan

Hapus Isi Record Di

Hapus X

Input File

Data disimpan

43

 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

44

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

Admin

Buka Hal Data Kategori Produk

Tampilkan

Tambah simpan

Simpan Database X Isi Form Isi Record Batal Datadisimpan Isi Record Batal

Edit Pilih Data

Dari DB

Simpan

Simpan Database

X

Hapus Isi Record Di

Hapus X Y Y Y Y Y T T T T T Form Lengkap? Y T

45

 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

46

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

Admin

Buka Hal Data Produk Tampilkan

Data

Tambah simpan

Simpan Database Isi Record Dibatalkan X Isi Form

Edit Pilih Data

Dari DB Simpan Simpan

Database Isi Record Dibatalkan

X

Hapus Isi Record Di

Hapus X

Data disimpan Y Y Y T T Y Y T T T Form Lengkap? Y T

47

 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

48

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

Y

Y

T T

Admin

Buka Hal Data Order

Tampilkan Data

Isi Record Dibatalkan

Edit Pilih

Data Dari DB

Simpan Simpan

Database

X

Hapus Isi Record Di

Hapus X

Y

Y T

49

 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

44

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

Admin

Buka Hal Data Kategori Produk

Tampilkan

Tambah simpan

Simpan Database X Isi Form Isi Record Batal Datadisimpan Isi Record Batal Edit Pilih Data

Dari DB

Simpan

Simpan Database

X Hapus Isi Record Di

Hapus X Y Y Y Y Y T T T T T Form Lengkap? Y T

45

 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

46

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

Admin

Buka Hal Data Produk Tampilkan

Data

Tambah simpan

Simpan Database Isi Record Dibatalkan X Isi Form

Edit Pilih Data

Dari DB Simpan Simpan

Database Isi Record Dibatalkan

X Hapus Isi Record Di

Hapus X

Data disimpan Y Y Y T T Y Y T T T Form Lengkap? Y T

47

 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

48

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

Y

Y

T T

Admin

Buka Hal Data Order

Tampilkan Data

Isi Record Dibatalkan Edit Pilih

Data Dari DB

Simpan Simpan Database

X

Hapus Isi Record Di

Hapus X

Y

Y T

49

 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