76
4.2.2. Perancangan Basis Data
a. Entity Relationship Diagram ERD
Gambar 4.12. ERD
77 b.
Normalisasi Berikut langkah-langkah normalisasi :
1 Bentuk Tidak Normal UNF
uid_plg nama
kelamin alamat
kd_kota negara
kdpost
UID012 UID013
Hendro Wibowo arisama iler
P P
Jl. Semanggi 2 No 5 Jl. Pesangrahan no 7
KK003 PR04
Indonesia Indonesia
15412 15487
email tlpn_rumah
telp_hp no_fax
userid passid
utomoyahoo.com ileryahoo.com
7440932 8792114
0856923159 0898966544
75544664 Che
Iler 773359240eb9a1d9
7dfg569240eghdfh4
no_pesan tanggal
tgl_limit jam
status_bayar unik_transfer
id_dpesan
TR-00002 TR-00003
12192009 12192009
12162009 12162009
22:47:54 13:02:55
PESAN PESAN
711 554
12 13
Jumlah_produk kd_produk
kategori kikis
packing nama_produk
1 5
KL0001 KL0002
CUT CUT
Belum Sudah
Karung Plastik Karung Plastik
AA CUT A CUT
file_gambar harga_produk
kadar stok
detail
aacut.gif acut.gif
10000 10000
7 7
190 200
meta http-equiv=\ content-type\= content=\ meta http-equiv=\ content-type\= content=\
kd_propinsi nm_propinsi
id_konfirmasi bank_tujuan
bank_pengirim jam_transfer
PR01 PR02
Jawa Tengah Jawa Timur
5 8
BNI BNI
BCA Mandiri
0:12:12 13:02:45
jumlah_transfer keterangan
id_kantong jumlah
kd_kota nm_kota
hari harga_kirim
200456 500546
Sudah dikirim Segera
17 18
1 3
PR0001 PR0002
Amuntai Almapura
4 3
23500 16000
Gambar 4.13. UNF
78 2
Bentuk Normal Pertama 1NF
uid_plg nama
kelamin alamat
kd_kota negara
kdpost
UID012 UID013
Hendro Wibowo arisama iler
P P
Jl. Semanggi 2 No 5 Jl. Pesangrahan no 7
KK003 PR04
Indonesia Indonesia
15412 15487
email tlpn_rumah
telp_hp no_fax
userid passid
utomoyahoo.com ileryahoo.com
7440932 8792114
0856923159 0898966544
75544664 Che
Iler 773359240eb9a1d9
7dfg569240eghdfh4
no_pesan tanggal
tgl_limit jam
status_bayar unik_transfer
id_dpesan
TR-00002 TR-00003
12192009 12192009
12162009 12162009
22:47:54 13:02:55
PESAN PESAN
711 554
12 13
Jumlah_produk kd_produk
kategori kikis
packing nama_produk
1 5
KL0001 KL0002
CUT CUT
Belum Sudah
Karung Plastik Karung Plastik
AA CUT A CUT
file_gambar harga_produk
kadar stok
detail
aacut.gif acut.gif
10000 10000
7 7
190 200
meta http-equiv=\ content-type\= content=\ meta http-equiv=\ content-type\= content=\
kd_propinsi nm_propinsi
id_konfirmasi bank_tujuan
bank_pengirim jam_transfer
PR01 PR02
Jawa Tengah Jawa Timur
5 8
BNI BNI
BCA Mandiri
0:12:12 13:02:45
jumlah_transfer keterangan
id_kantong jumlah
kd_kota nm_kota
hari harga_kirim
200456 500546
Sudah dikirim Segera
17 18
1 3
PR0001 PR0002
Amuntai Almapura
4 3
23500 16000
Gambar 4.14. 1NF
79 3
Bentuk Normal Kedua 2NF Langkah selanjutnya adalah membuat normal kedua.
Gambar 4.15. 2 NF
Ket : Primary Key
Foreign Key
80 4
Bentuk Normal Ketiga 3NF
Gambar 4.16. 3 NF
Ket : Primary Key
Foreign Key
81 c.
Struktur Basis Data Dari hasil normalisasi diatas telah didapat hasil basis data yang
benar, berikut adalah perincian hasil normalisasi diatas.
1. Nama File : Kantong
Primary Key : Id_kantong
Foreign Key : Kd_produk, Uid_plg
Tabel 4.3. Tabel Kantong Field Name
Data Type Extra
Id_kantong int5
auto_increment Kd_produk
char6 Uid_plg
char6
2. Nama File : Konfirmasi
Primary Key : Id_konfirmasi
Foreign Key : No_pesan
Tabel 4.4. Tabel Konfirmasi Field Name
Data Type Extra
Id_konfirmasi int5
auto_increment No_pesan
char8 Bank_tujuan
varchar10 Bankpengirim
varchar10 Jam_transfer
time Jumlah_transfer
int10 Keterangan
text
82 3. Nama File
: Kota Primary Key
: Kd_kota Foreign Key
: Kd_propinsi
Tabel 4.5. Tabel Kota Field Name
Data Type Extra
Kd_kota char6
auto_increment Kd_propinsi
char4 Nm_kota
varchar15 Harga_kirim
int5 Hari
int1
4. Nama File : Pelanggan
Primary Key : Uid-plg
Foreign Key : -
Tabel 4.6. Tabel Pelanggan Field Name
Data Type Extra
Uid_plg char6
auto_increment Nama
varchar20 Kelamin
enumP, W Alamat
varchar50 Kd_kota
char6 Negara
varchar15 Kdpost
int5 Email
varchar20 Telp_rumah
varchar15 Telp_hp
varchar15 No_fax
varchar15 Userid
varchar35 Passid
varchar35
5. Nama File : Pemesanan
Primary Key : No_pesan
Foreign Key : Uid_plg
83
Tabel 4.7. Tabel Pemesanan Field Name
Data Type Extra
No_pesan char8
auto_increment Uid_plg
char6 Tgl_pesan
date Tgl_limit
date Jam_pesan
time Status_bayar
varchar5 Unik_transfer
char3
6. Nama File : Detail
Primary Key : Id_pesan
Foreign Key : No_pesan, Kd_produk
Tabel 4.8. Tabel Detail Field Name
Data Type Extra
Id_pesan int4
auto_increment No_pesan
char8 Kd_produk
char6 Jumlah_produk
int3
7. Nama File : Produk
Primary Key : Kd_produk
Foreign Key : -
Tabel 4.9. Tabel Produk Field Name
Data Type Extra
Kd_produk char6
auto_increment Kategori
char10 Kikis
char10 Packing
char15 Nm_produk
varchar10 File_gambar
varchar100 Harga _produk
int5 Kadar
int2 Stok
int4 Detail
text
84 8. Nama File
: Propinsi Primary Key
: Kd_propinsi Foreign Key
: -
Tabel 4.10. Tabel Propinsi Field Name
Data Type Extra
Kd_propinsi char4
auto_increment Nm_propinsi
varchar20
d. Matrik CRUD Create, Read, Update, Delete
Tabel 4.11. Tabel Matrik CRUD Location
Entity.atribut Admin
Pelanggan Admin
INDV
Id_admin CD
Password CRUD
Nama_lengkap CRUD
Email CRUD
Berita ALL
ALL
Id_berita CD
X Judul
CRUD R
Isi_berita CRUD
R Gambar
CRUD R
Hari CRUD
R Tanggal
CRUD R
Jam CRUD
R Counter
CRUD R
Bukutamu ALL
ALL
Id_btamu D
C Nama
RD CR
Email RD
CR Komentar
RD CR
Tanggal RD
CR
Galeri ALL
ALL
Id_galeri CD
X
85 Judul
CRUD R
Gambar CRUD
R
Kantong INDV
Id_kantong CD
Kd_produk CRUD
Uid_plg CRUD
Jumlah CRUD
Konfirmasi ALL
INDV
Id_konfirmasi RD
C No_pesan
RD C
Bank_tujuan RD
C Bankpengirim
RD C
Jam_transfer RD
C Jumlah_transfer
RD C
Keterangan RD
C
Kontak ALL
INDV
Id_kontak RD
C Nama
RD C
Email RD
C Telpn
RD C
Alamat RD
C Subject
RD C
Pesan RD
C
Kota ALL
ALL
Kd_kota CRD
X Kd_propinsi
CRUD X
Nm_kota CRUD
R Harga_kirim
CRUD R
Hari CRUD
R
Pelanggan ALL
INDV
Uid_plg RD
CR Nama
RD CRU
Kelamin RD
CR Alamat
RD CRU
Kd_kota D
CU Kd_propinsi
D CU
Negara RD
CR Kdpost
RD CRU
Email RD
CRU Telp_rumah
RD CRU
Telp_hp RD
CRU No_fax
RD CRU
Userid RD
CR Passid
RD CR
Pemesanan ALL
INDV
86 No_pesan
RD CR
Uid_plg RD
CR Tgl_pesan
RD CR
Tgl_limit RD
CR Jam_pesan
RD CR
Status_bayar RUD
CR Unik_transfer
RD CR
Pemesanan_detail ALL
INDV
Id_pesan D
C No_pesan
RD CR
Kd_produk D
C Jumlah_produk
RD CR
Produk ALL
ALL
Kd_produk CRD
X Kategori
CRUD R
Kikis CRUD
R Packing
CRUD R
Nm_produk CRUD
R File_gambar
CRUD R
Harga _produk CRUD
R Kadar
CRUD R
Stok CRUD
R Detail
CRUD R
Propinsi ALL
ALL
Kd_propinsi X
X Nm_propinsi
R R
Keterangan: INDV = individual, ALL = all, SS = subset, X = no access, C = create, R = read,
U = update, D = delete
87 4.2.3.
Perancangan Interface
a. State Transition Diagram
STD 1.
STD Menu Utama Pelanggan
Gambar 4.17. STD Menu Utama Pelanggan
2. STD Menu PT. Dwiwarna Inti - Pihak Pelanggan
Gambar 4.18. STD Menu PT. Dwiwarna Inti - Pihak Pelanggan
88 3.
STD Menu Kayu Manis - Pihak Pelanggan
Gambar 4.19. STD Menu Kayu Manis - Pihak Pelanggan
4. STD Menu Berita Terkini - Pihak Pelanggan
Gambar 4.20. STD Menu Berita Terkini - Pihak Pelanggan
89 5.
STD Menu Konfirmasi - Pihak Pelanggan
Gambar 4.21. STD Menu Konfirmasi - Pihak Pelanggan
6. STD Menu Testimonial - Pihak Pelanggan
Gambar 4.22. STD Menu Testimonial - Pihak Pelanggan
7. STD Menu Gallery Foto - Pihak Pelanggan
Gambar 4.23. STD Menu Gallery Foto - Pihak Pelanggan
90 8.
STD Menu Kontak Kami - Pihak Pelanggan
Gambar 4.24. STD Menu Kontak Kami - Pihak Pelanggan
9. STD Menu Sejarah Kayu Manis - Pihak Pelanggan
Gambar 4.25. STD Menu Sejarah Kayu Manis - Pihak Pelanggan
10. STD Menu Jenis dan Manfaat - Pihak Pelanggan
Gambar 4.26. STD Menu Jenis dan Manfaat - Pihak Pelanggan
91 11.
STD Menu Informasi - Pihak Pelanggan
Gambar 4.27. STD Menu Informasi - Pihak Pelanggan
12. STD Menu Search - Pihak Pelanggan
Gambar 4.28. STD Menu Search - Pihak Pelanggan
92 13.
STD Menu Login - Pihak Pelanggan
Gambar 4.29. STD Menu Login - Pihak Pelanggan
14. STD Menu Utama Admin
Gambar 4.30. STD Menu Utama Admin
93 15.
STD Menu User - Pihak Admin
Gambar 4.31. STD Menu User - Pihak Admin
16. STD Menu Pemesanan - Pihak Admin
Gambar 4.32. STD Menu Pemesanan - Pihak Admin
94 17.
STD Menu Berita Terkini - Pihak Admin
Gambar 4.33. STD Menu Berita Terkini - Pihak Admin
18. STD Menu Daftar Data - Pihak Admin
Gambar 4.34. STD Menu Daftar Data - Pihak Admin
95 19.
STD Menu Testimonial - Pihak Admin
Gambar 4.35. STD Menu Testimonial - Pihak Admin
20. STD Menu Gallery - Pihak Admin
Gambar 4.36. STD Menu Gallery - Pihak Admin
96 21.
STD Menu Kontak Kami - Pihak Admin
Gambar 4.37. STD Menu Kontak Kami - Pihak Admin
22. STD Menu Laporan - Pihak Admin
Gambar 4.38. STD Menu Laporan - Pihak Admin
97 b.
Design Screen Layout Pada tahap ini dirancang tampilan layout sehingga didapat
tampilan yang user friendly. Berikut ini merupakan rancangan tampilan layout :
a. Perancangan layout halaman Login admin
Login
Header
Username Password
Gambar 4.39. Perancangan Layout Halaman Login admin
Pada layout ini admin diminta memasukan username dan password yang dimiliki pada database website ketika ingin memasuki halaman
utama admin. Jika username dan password benar maka akan memasuki halam utama admin yang terdapat fasilitas untuk update, hapus,
tambah dan melihat data yang ada.
98 b.
Perancangan layout halaman Depan
Pt. Dwiwarna Inti Kayu manis
Berita terkini
Tanggal
Animasi Header
Gambar 4.40. Perancangan Layout Halaman Depan
Pada layout ini mengambarkan tampilan halaman pertama jika user membuka website, terdapat 3 menu utama pada halaman ini yaitu DIS,
kayu manis dan berita terkini. Disamping menu terdapat animasi gambar dan tulisan yang dapat menghidupkan suasana agar tidak
terlihat kaku dan juga terdapat tampilan tanggal pada pojok kanan bawah.
99 c.
Perancangan layout halaman Pt. Dwiwarna inti
Pt. Dwiwarna Inti Kayu manis
Berita terkini Tanggal
Header
Home
Konfirmasi Testimonial
Galery Kontak
Site map Search
Banner
Animasi gambar
Login Sejarah Kayu Manis
Jenis dan Manfaat
Footer
Pt. Dwiwarna Inti
Berisi tentang sejarah, visi misi, dan profile perusahaan
Informasi
Gambar 4.41. Perancangan Layout Halaman PT.dwiwarna inti
Pada layout ini menampilkan tentang sejarah, visi misi dan juga lokasi perusahaan DIS. Semua profil perusahaan dapat dilihat pada menu ini.
100 d.
Perancangan layout halaman Kayu manis
Pt. Dwiwarna Inti Kayu manis
Berita terkini Tanggal
Header
Home
Konfirmasi Testimonial
Galery Kontak
Site map Search
Banner
Animasi gambar
Login Sejarah Kayu Manis
Jenis dan Manfaat
Footer
Kayu Manis
Berisi tentang tipe kayu manis yang dipasrakan beserta harga per kg nya
Informasi
Gambar 4.42. Perancangan Layout Halaman Kayu manis
Pada layout ini mengambarkan daftar jenis kayu manis yang dipasarkan oleh perusahaan, terdapat gambar dan harga per kg nya.
Pada menu ini user dapat melakukan pemesanan pada jenis kayu manis yang dibutuhkan dengan mengklik tombol “pesan” kemudian
melakukan proses selanjutnya.
101 e.
Perancangan layout halaman Berita terkini
Pt. Dwiwarna Inti Kayu manis
Berita terkini Tanggal
Header
Home
Konfirmasi Testimonial
Galery Kontak
Site map Search
Banner
Animasi gambar
Login Sejarah Kayu Manis
Jenis dan Manfaat
Footer
Berita Terkini
Berisi tentang kilasan berita seputar kayu manis dan tanaman lainnya
Informasi
Gambar 4.43. Perancangan Layout Halaman Berita terkini
Pada layout ini menampilkan berita-berita tentang kayu manis dan jenis tanaman lainnya. Pada layout ini terdapat gambar dan synopsis
berita, user dapat mengklik tombol selengkapnya jika ingin melihat keseluruhan berita. Halaman ini menampilkan 4 berita dengan
synopsis dan 5 berita sebelumnya. Dan juga terdapat tombol “arsip berita” jika ingin melihat keseluruhan daftar berita yang ada.
102 f.
Perancangan layout halaman Konfirmasi
Pt. Dwiwarna Inti Kayu manis
Berita terkini Tanggal
Header
Home
Konfirmasi Testimonial
Galery Kontak
Site map Search
Banner
Animasi gambar
Login Sejarah Kayu Manis
Jenis dan Manfaat
Footer
Konfirmasi
Berisi form pengisian konfirmasi pembayaran yang telah dilakukan pelanggan
Informasi
Gambar 4.44. Perancangan Layout Halaman konfirmasi
Pada layout ini mengambarkan tentang konfirmasi pembayaran yang telah dilakukan oleh user. Kolom konfirmasi ini terdiri atas no
pesanan, nama pemesan, bank tujuan, no rekening pemesan, jam transfer, jumlah transfer dan kolom keterangan. Kolom tersebut
harus diisi oleh user setelah melakukan transfer ke bank tujuan.
103 g.
Perancangan layout halaman Testimonial
Pt. Dwiwarna Inti Kayu manis
Berita terkini
Tanggal
Header
Home
Konfirmasi Testimonial
Galery Kontak
Site map
Search Banner
Animasi gambar
Login
Sejarah Kayu Manis Jenis dan Manfaat
Footer
Testimonial
Berisi kumpulan komentar pelanggan seputar pemesanan kayu manis
Informasi
Gambar 4.45. Perancangan Layout Halaman Testimonial
Pada layout ini menampilkan pesan atau komentar para user yang mengunjungi website, pesan ini menampilkan nama, email dan pesan
yang akan ditulis dalam halaman ini. User dapat menulis pesannya dengan mengklik tombol “tulis komentar” dan mengisi nama, email
dan pesannya.
104 h.
Perancangan layout halaman galery
Pt. Dwiwarna Inti Kayu manis
Berita terkini Tanggal
Header
Home
Konfirmasi Testimonial
Galery Kontak
Site map Search
Banner
Animasi gambar
Login Sejarah Kayu Manis
Jenis dan Manfaat
Footer
Gallery
Berisi kumpulan gambar-gambar aktifitas pemasaran kayu manis
Informasi
Gambar 4.46. Perancangan Layout Halaman Galery
Pada layout ini meampilkan gambar-gambar kegiatan ayau aktifitas pada perusahaan DIS. Terdapat 8 foto dengan bentuk thumbail dan
jika ingin diperbesar dengan mengklik gambar tersebut. Dibah gambar terdapat keterangan gambarnya.
105 i.
Perancangan layout halaman Kontak
Pt. Dwiwarna Inti Kayu manis
Berita terkini Tanggal
Header
Home
Konfirmasi Testimonial
Galery Kontak
Site map Search
Banner
Animasi gambar
Login Sejarah Kayu Manis
Jenis dan Manfaat
Footer
Kontak
Berisi form untuk mengirim pesan ke admin web
Informasi
Gambar 4.47. Perancangan Layout Halaman kontak
Pada layout ini menampilkan form kontak yang disediakan untuk user jika ingn mengirim pesan kepada admin website, didalam form
ini user harus mengisi nama, alamat, email, telephone, subjek dan isi pesan yang akan disampaikan. Di halaman ini juga terdapat
informasi tentang alamat dan no telephone kantor perusahaan.
106 j.
Perancangan layout halaman Site map
Pt. Dwiwarna Inti Kayu manis
Berita terkini Tanggal
Header
Home
Konfirmasi Testimonial
Galery Kontak
Site map Search
Banner
Animasi gambar
Login Sejarah Kayu Manis
Jenis dan Manfaat
Footer
Site Map
Berisi struktur menu pada web
Informasi
Gambar 4.48. Perancangan Layout Halaman Site map
Pada layout ini menampilkan struktur menu yang ada pada website. User dapat langsung mengklik halaman yang diinginkan pada site
map ini. Halaman ini mempermudah user dalam mengenali isi dari website ini.
4.2.4. Perancangan Jaringan
Mengingat aplikasi pemesanan kayu manis berbasis web ini mengunakan internet sebagai media online, maka disini akan ditampilkan konfigurasi jaringan
aplikasi pemesanan kayu manis berbasis web secara umum pada gambar berikut terdapat tiga server yaitu database server, web server dan file server. Namun apabila
107 keadaan tidak memungkinkan ketiga server tersebut dapat dijadikan satu server
yang kesemuanya menyimpan database, file web dan file data.
Gambar 4.49. Konfigurasi Jaringan Sistem Pemesanan Kayu Manis Berbasiskan Web
4.3. Pengkodean Coding
Kategori