18

BAB III

PEMBAHASAN

A. Perancangan Sistem

1. Diagram Context

Tabel. 3.1. Simbol diagram context

Tombol Arti Contoh

Terminator

Aliran Data / Data

Flow

Informasi Mahasiswa

Baru

Proses

Diagram context merupakan tingkatan tertinggi dalam aliran

data dan hanya memuat satu proses, menunjukkan sistem secara

keseluruhan. Proses tersebut diberi nomor. Semua entitas eksternal

yang ditujukan pada diagram konteks berikut aliran data utama menuju

dan dari sistem. Diagram tersebut tidak memuat penyimpanan data dan

tampak sederhana untuk diciptakan, begitu entitas-entitas eksternal

Mahasiswa

Proses Input

Data

18

19

serta aliran data menuju dan dari sistem diketahui menganalisis dari

wawancara dengan user dan sebagai hasil analisis dokumen.

Diagram Context memiliki aturan sebagai berikut:

a. Jika terdapat banyak terminator yang mempunyai banyak masukan

dan keluaran diperbolehkan untuk digambarkan lebih dari satu kali

sehingga mecegah penggambaran yang terlalu rumit, dengan

ditandai secara khusus untuk menjelaskan bahwa terminator yang

dimaksud adalah indentik. Tanda tersebut dapat berupa asterik (*)

atau pagar (#).

b. Jika terminator mewakili individu sebaiknya diwakili oleh peran

yang dimainkan personil tersebut. Alasan pertama adalah personil

diwakili oleh peran yang dimainkan lebih dari satu peran

c. Karena fokus utamanya adalah mengembangkan model, maka

penting untuk membedakan sumber (resource) dan pelaku

(handler). Pelaku adalah mekanisme, perangkat atau medua fisik

yang mentransportasikan data ke atau dari sistem, karena pelaku

seringkali familier dengan pemakai dalam implementasi sistem

berjalan, maka sering menonjol sebagai sesuatu yangharus

digambarkan lebih dari sumber data itu sendiri. Sedangkan sistem

baru dengan konsep pengembangan teknologinya membuat pelaku

menjadi sesuatu yang tidak perlu digambarkan.

20

Berikut ini merupakan diagram context yang digunakan dalam

membuat website Rabian, yang didalamnya mengalir data pembeli

undangan dan aksi dari admin Rabian.

Gambar 3.1. Diagram Context

21

2. DFD (Data Flow Diagram)

Tabel. 3.2. Simbol Data flow diagram

Data Flow Diagram (DFD) adalah alat pembuatan model yang

memungkinkan profesional sistem untuk menggambarkan sistem

sebagai suatu jaringan proses fungsional yang dihubungkan satu sama

lain dengan alur data, baik secara manual komputerisasi. DFD ini

sering disebut juga dengan nama buble chart,bubble diagram, model

proses, diagram alur kerja, atau model fungsi.

Data Flow Diagram ini adalah salah satu alat pembuatan model

yang sering digunakan, khususnya bila fungsi-fungsi sistem

merupakan bagian lebih penting dan kompleks dari pada data yang

dimanipulasi oleh sistem. Dengan kata lain Data Flow Diagram adalah

22

alat pembuatan model yang memberikan penekanan hanya pada fungsi

sistem. Data Flow Diagram ini merupakan alat perancangan sistem

yang berorientasi pada alur data dengan konsep dekomposisi dapat

digunakan untuk penggambaran analisa maupun rancangan sistem

yang mudah dikomunikasikan oleh profesional sistem kepada pemakai

maupun pembuatan program.

Berikut ini adalah Data flow diagram yang terdapat dalam

website penjualan undangan pernikahan di Rabian

Gambar 3.2. DFD (Data Flow Diagram)

Alur dari Data flow diagram tersebut adalah dari pembeli

membeli undangan pernikahan, selnjutnya di proses pengecekan

23

barang undangan tersedia atau tidak, kemudian dilanjutkan pembeli

untuk mengisi data seperti, data akad nikah, resepsi pernikahan, data

pengantin laki-laki, data pengantin perempuan, data pengiriman

barang. Setelah data sudah terisi dengan benar, admin secara automatis

menyimpan data tersebut ke dalam data base konsumen, selanjutnya

pembeli melakukan pembayaran berupa transfer, dan mengupload

bukti pembayaran yang di dapat berupa scan nota ataup screenshot

apabila menggunakan mobile banking. Setelah itu admin menerima

semua data tersebut dan mengkonfirmasi pemesanan menggunakan

nomor telpon yang di isi oleh pembeli.

3. Relasi antar tabel

Relasi adalah hubungan tantara tabel yang mempresentasikan

hubungan antar objek di dunia nyata. Relasi merupakan hubungan

yang terjadi pada suatu tabel dengan tabel lainnya yang

mempresentasikan hubungan antar objek di dunia nyata dan berfungsi

untuk mengatur operasi suatu database.

Di website Rabain terdapat 5 tabel diantaranya adalah tebel

admin, tabel buktipembayaran, tabel konsumen, tabel produk, dan

tabel statusproduk. Berikut ini adalah gambar dari stuktur dari masing

masing tabel :

24

Gambar 3.3. Database struktur tabel admin

Gambar 3.4. Database struktur tabel buktipembayaran

25

Gambar 3.5. Database struktur tabel konsumen

Gambar 3.6. Database struktur tabel produk

26

Gambar 3.7. Database struktur tabel statusproduk

27

Berikut ini adalah relasi antar 5 tabel tersebut

Gambar 3.8. Relasi antar tabel

statusproduk

28

4. Flowchart admin 1

Tabel. 3.3. Simbol Flowchart

Simbol Nama Deskripsi

Flow direction

symbol

Simbol yang digunakan

untuk menghubungkan

antara simbol yang lain

Terminator symbol Simbol untuk

permulaan (start) atau

akhir (stop) dari suatu

kegiatan

Connector symbol Simbol untuk keluar –

masuk atau

penyambung proses

padalembar/halaman

yang berbeda

Connector symbol Simbol untuk keluar –

masuk atau

penyambung proses

padalembar/halaman

yang berbeda

Processing symbol Simbol yang

menunjukkan

pengolahan yang

29

dilakukan oleh

komputer

Manual operation Simbol yang

menunjukkan

pengolahan yang tidak

dilakukan oleh

komputer

Decision simbol Simbol pemilihan

proses berdasarkan

kondisi yang ada

Input-output simbol Simbol yang

menyatakan proses

input dan output tanpa

tergantung dengan jenis

peralatannya

Manual input Simbol untuk

pemasukan data secara

manual on-line

keyboard

30

Perpation Simbol untuk

mempersiapkan

penyimpanan yang akan

digunakan sebagai

tempat pengolahan di

dalam storage

Predefine proses Simbul untuk

pelaksanaan suatu

bagian (sub-

program)/prosedur

Display simbol Simbol yang

menyatakan peralatan

output yang digunakan

yaitu layar, plotter,

printer, dan sebagainya

Disk and on-line

storage

Simbol yang

menyatakan input yang

berasal dari disk atau

disimpan ke disk

Magnetik tipe unit Simbol yang

menyatakan input

berasal dari pita

magnetik atau output

31

disimpan ke pita

megnetik

Simbol punch card Simbol yang

menyatkaan bahwa

input berasal dari kartu

atau output ditulis ke

kartu

Ducument simbol Simbol yang

menyatkaan input

berasar dari dokumen

dalam bentuk kertas

atau output dicetak ke

kertas

32

Berikut ini adalah flowchart yang ada di website penjualan

undangan pernikahan Rabian

Gambar 3.9. Flowchart Admin 1

33

Alur dari flowchart admin 1 tersebut adalah admin memulai

harus login terlebih dahulu, apabila login gagal, maka proses pengisian

username dan password harus diulang, apabila login berhasil maka

halaman akan menampilkan tampilan utama admin berupa view all tipe

undangan perniakahan. Selajutnya akan ada beberapa aksi dimana aksi

pertama adalah penambahan undangan pernikahan baru, dengan

mengisi form atau data data undangan baru yang ingin di tambahkan

dan di simpan ke database apabila admin tersebut menyimpan data

undangan baru tersebut, apabila membatalkan penambahan undangan,

maka admin akan di alihkan ke halam utama admin. Selnjtunya aksi

yang kedua adalah edit atau update data undangan, dimana admin akan

memilih salah satu tipe undangan yang akan di edit, dan mengubah

data yang perlu di ganti seperti tipe undangan, katalog undangan, stok

undangan, harga undangan, dan lain sebagainya. Apabila admin

menyimpan edit data tersebut, maka edit data tersebut akan tersimpan

ke database menggantikan data yang sebelumnya, apabila admin

membatalkan pengeditan data tersebut, maka redirect ke menu utama

halaman admin. Aksi yang terakhir adalah hapus data undangan,

dimana admin bisa menghapus data undangan apabila data tersebut

tidak lagi diperlukan, dengan cara milih salah satu undangan yang

akan di hapus, setelah di hapus maka akan di redirect ke menu halam

utama admin.

34

5. Flowchart Admin 2

Gambar 3.10. Flowchart Admin 2

Alur dari flowchart admin 2 tersebut adalah admin memulai

harus login terlebih dahulu, apabila login gagal, maka proses pengisian

username dan password harus diulang, apabila login berhasil maka

halaman akan menampilkan tampilan utama admin berupa view all,

disamping kanan akan ada beberapa menu salah satunya data

35

pelanggan. Dimana di halaman data pelanggan tersebut admin dapat

melakukan beberapa aksi yaitu admin dapat mengedit data pelanggan

tersebut, dan admin juga dapat menghapus data pelanggan apabila

undangannya sudah terkirim dan data dari undangan tersebut tidak lagi

di perlukan.

6. Flowchart pengunjung

Gambar 3.11. Flowchart pengunjung

Alur dari flowchart pengunjung tersebut adalah pengunjung

mangakses website Rabian, selanjutnya pengunjung memilih desain

undangan pernikahan yang diinginkan, apabila tidak jadi membeli,

maka akan ke halaman utama Rabian, apabila pengunjung ingin

36

membeli undangan pernikahan, maka pengunjung mengisi formulir

data undangan perniakahan, kemudian pengunjung memilih kurir yang

di inginkan, setelah itu pembeli akan mendapatkan id transaksi.

Selanjutkan website akan menampilkan rincian harga undangan yang

harus di bayar, kemudian pembeli memilih bank yang akan di transfer.

langkah terakhir adalah pembeli mengupload bukti pembayaran berupa

scan nota apabila tranfer menggunakan ATM, atau screenshot apabil

transfer menggunakan mobile banking.

B. Implementasi Sistem

Sistem penjualan undangan pernikahan berbasis website ini di buat

dengan menggunakan bahasa pemrograman PHP, dan di dukung dengan

HTML dan CSS untuk mempercantik tampilan website. Database dari

sistem penjualan undangan pernikahan berbasis website ini menggunakan

database MySQL.

Dalam implementasi sistem penjualan undangan pernikahan

berbasis website ini dapat dijalankan pada komputer menggunakan mozilla

firefox, google chrome, opera, baidu browser dan browser-browser

lainnya.

1. Implementasi perangkat lunak

Pada bagian ini akan dijelaskan tentang perangkat lunak atau sering

kita sebaut software sebagai media implementasi aplikasi yang

dihasilkan dari proses pembuatan sistem penjualan undangan

pernikahan berbasis website ini adalah sebagai berikut :

37

a. Perangkat lunak server

Tabel 3.4. Daftar perangkat lunak server

Nama Perangkat Lunak Versi

PHP Versi 5.3.8

PHPMyAdmin Versi 3.4.5

Sublime Text Versi 3.1.26

MySQL Versi 5.6.1

b. Perangkat lunak client

Tabel 3.5. Daftar perangkat lunak client

Nama Perangkat Lunak Versi

Windows Windows 7 starter

Google chrome Veris 26.0

2. Implementasi Basis Data

Inplementasi basis data menggunakan database managemen

system (DBMS) MySQL. Query SQL yang digunakan dalam

implementasi sistem penjualan undangan perniakahan berbasis website

ini adalah sebagai beriku :

38

Gambar 3.12. Database struktur tabel admin

Gambar 3.13. Database struktur tabel buktipembayaran

39

Gambar 3.14. Database struktur tabel konsumen

Gambar 3.15. Database struktur tabel produk

40

Gambar 3.16. Database struktur tabel statusproduk

3. Implementasi program

Dalam pembuatan website sistem penjualan undangan

pernikahan berbasis website ini, penulis menggunakan script PHP

dalam membangun sebuah sistem yang ada di website ini, selain

menggunakan PHP. Dari segi tampilan penulis menggunakan HTML

dengan perpaduan script CSS untuk mempercantik tampilan, sehingga

menjadikan website sistem penjualan undangan pernikahan berbasis

website ini bisa di akses menggunakan resolusi tinggi ataupun resolusi

rendah.

Berikut ini adalah gambar script yang di bangun penulis dalam

pembuatan sistem penjualan undnagan pernikahan berbasis website :

41

a. Perancangan sistem admin

Gambar 3.17. script proses koneksi ke database MySQL

Gambar 3.18. script halaman utama admin

42

Gambar 3.19. script halaman login admin

Gambar 3.20. script proses login admin

Gambar 3.21. script proses logout admin

43

Gambar 3.22. script halaman penambahan undangan baru

Gambar 3.23. script proses penambahan undangan baru

Gambar 3.24. script halaman update data undangan

44

Gambar 3.25. script proses update data undangan

Gambar 3.26. script proses hapus data undangan

Gambar 3.27. script halaman daftar data pembeli undangan

45

Gambar 3.28. script halaman detail data pembeli undangan

Gambar 3.29. script perubahan status cetak di data pembeli

Gambar 3.30. script perubahan status terkirim di data pembeli

46

b. Perancangan sistem client

Gambar 3.31. script halaman utama client

Gambar 3.32. script halaman view product undangan

47

Gambar 3.33. script halaman pengisian formulir undangan

Gambar 3.34. script proses pengisian formulir undangan

Gambar 3.35. script halaman perincian harga undangan

48

Gambar 3.36. script halaman upload bukti pembayaran

Gambar 3.37. script proses upload bukti pembayaran

49

C. Uji Coba Sistem

1. Uji coba halaman admin

Gambar 3.38. masuk halaman admin harus login

Gambar 3.39. menu login admin

50

Gambar 3.40. tampilan utama menu admin

Gambar 3.41. penambahan undangan baru

51

Gambar 3.42. pengubahan data undangan

Gambar 3.43. data pemesan undangan yang masuk

52

Gambar 3.44. data lengkap pemesan undangan

2. Uji coba halaman client

Gambar 3.45. Halaman utama website

53

Gambar 3.46. deskripsi undangan

Gambar 3.47. Proses pengisian data undangan pernikahan

54

Gambar 3.48. Proses pengisian data undangan pernikahan telah di konfirmasi oleh sistem

Gambar 3.49. memilih bank untuk metode pembayaran

55

Gambar 3.50. rincian harga undangan pernikahan

Gambar 3.51. Upload bukti pembayaran

56

Gambar 3.52. Proses pemesanan selesai