tabel. 3.1. simbol diagram contextrepository.nscpolteksby.ac.id/87/8/6 bab iii.pdf · mysql versi...
TRANSCRIPT
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