BAB 3
PERANCANGAN SISTEM
3.1. Perancangan Struktur Database
Database adalah kumpulan file-file yang saling berelasi antara file yang satu dengan file yang lain sehingga membentuk satu kesatuan data untuk menginformasikan suatu
perusahaan, instansi dalam batasan tertentu.
Tabel 3.1. Tabel Data Item Field Data
Type Data Size
Descriptioin
Kategori Varchar
50 Kategori Produk
Title Varchar
50 Judul Produk
descripstion Varchar
50 Penjelasan
detail_spesification Varchar 50
Isi Dari Produk Harga
Varchar 20
Harga Produk Discount
Varchar 20
Potongan Harga post_date
Varchar 20
Tanggal Post Produk
Tabel 3.2. Tabel Data Kategori Item Field Data
Type Data Size
Descriptioin
main_kategori Varchar
50 Kategori Umum
sub_kategori Varchar
45 Bagian Kategori Umum
Universitas Sumatera Utara
Tabel 3.3. Tabel Data Pesanan
Tabel 3.4. Tabel Data Mata Uang
3.2. Perancangan Halaman Website
Tahap perancangan halaman website adalah menentukan dan membuat rancangan tampilan dari situs yang akan dibuat. Kumpulkan terlebih dahulu komponen yang
akan digunakan. Untuk membuat rancangan tampilan kita dapat menggunakan software pengolah grafik seperti Adobe Photoshop CS.
Field Data Type Data
Size Descriptioin
Id Integer
20 No Id
Nama Varchar
45 Nama Lengkap Pemesan
Address Varchar
50 Alamat Pemesan
postal_code Varchar
9 Kode Pos
City Varchar
20 Kota Asal
Province Varchar
45 Provinsi
Phone Varchar
12 No Telp Pemesan
Email Varchar
45 Email Pemesan
Field Data Type Data
Size Descriptioin
nama_negara Varchar
30 Nama Negara
Nilai Varchar
45 Nilai Mata Uang
Jenis Varchar
45 Jenis Mata Uang
Universitas Sumatera Utara
1. Perancangan Halaman Home
Gambar 3.1 Tampilan halaman home
2. Perancangan Halaman Login Admin
Gambar 3.2. Tampilan Halaman Login Admin
Universitas Sumatera Utara
3. Perancangan Halaman Pemesanan Produk
Gambar 3.3. Tampilan Halaman Pemesanan Produk
Universitas Sumatera Utara
3.3. Pembuatan Flowchart Diagram Alir
3.3.1 Flowchart Tampilan Menu Utama
Gambar 3.4. Tampilan Flowchart Menu Utama
C
Tentang kami
Pilih link yang ada
Home END
Pilih link yang ada
display Pilih link yang ada
A
B pesanan
START
Tampilkan Web Z
Pilih link yang ada
Universitas Sumatera Utara
3.3.2. Flowchart Display Produk
Gambar 3.5. Tampilan Flowchart Display Produk
A
Pilih link yang ada
Buy
Z
Nama produk
See Detail
Banyak orderan dan input data orderan
Proses Pemesanan
Informasi Produk Tampilan Produk
Universitas Sumatera Utara
3.3.3. Flowchart Pesanan
Gambar 3.6. Tampilan Flowchart Pesanan
D
Pesanan Anda
Isi Data Orderan
Selesai Simpan db
data orderan Data sudah
disimpan
Home B
Universitas Sumatera Utara
3.3.4. Flowchart Administrator
Gambar 3.7 Tampilan Flowchart Administrator
E
Buka Halaman Administrator
Input Login Password
Status = Administrator
Tampilkan Web Administrator
Home Kembali ke halaman
administator
Z AE
Universitas Sumatera Utara
3.3.5. Flowchart Login Administrator
Gambar 3.8. Tampilan Flowchart Login Administrator
AE
Tampilkan Menu Administrator
Pilih Link yang ada
Admin-item
Admin-item kategori
E List data produk
List Form Data Produk sesuai kategori
E2 E1
Admin- Pesanan
List Data Pesanan E3
Admin-Mata Uang
List Nilai Mata Uang E4
Universitas Sumatera Utara
3.3.6. Flowchart Data Produk
Gambar 3.9. Tampilan Flowchart Data Produk
E1
Buka Hal. Data produk
Tampilkan Data produk
Tambah Data
Isi Form produk
Simpan Simpan Db
produk
Simpan Isi Record
dibatalkan
X X
Data Sudah Disimpan
Edit Pilih data
dari db produk
Simpan Simpan Db
Produk
Simpan Isi Record
dibatalkan
Hapus Isi Record
Dihapus X
Universitas Sumatera Utara
3.3.7. Flowchart Data Kategori Produk
Gambar 3.10. Tampilan Flowchart Data Kategori Produk
E2
Buka Hal. Produk
Tampilkan Bagian Produk
Tambah Data
Isi Form Simpan
Simpan Isi Record
dibatalkan
X X
Simpan Db produk sesuai
kategori Data Sudah Disimpan
Edit Pilih data
dari db
Simpan Simpan Db
produk
Simpan Isi Record
dibatalkan
Hapus Isi Record
Dihapus X
Universitas Sumatera Utara
3.3.8 Flowchart Data Pesanan Produk
Gambar 3.11. Tampilan Flowchart Data Pesanan Produk
E3
Buka Hal. Data orderan
Tampilkan Data Pesanan
Tambah Data
Isi Form Pesanan
Simpan
Simpan Isi Record
dibatalkan
X X
Simpan Db Pesanan
Data Sudah Disimpan
Edit Pilih data
dari db Pesanan
Simpan Simpan Db
Pesanan
Simpan Isi Record
dibatalkan
Hapus Isi Record
Dihapus X
Universitas Sumatera Utara
3.3.9 Flowchart Data Nilai Mata Uang
Gambar 3.12. Tampilan Flowchart Data Nilai Mata Uang
E1
Buka Hal. Data Mata Uang
Tampilkan Data Mata Uang
Tambah Data
Isi Form Mata Uang
Simpan Simpan Db
Mata Uang
Simpan Isi Record
dibatalkan X
Data Sudah Disimpan
Edit Pilih data
dari db Mata
Uang Simpan Db
Produk
Hapus Isi Record
Dihapus X
X Simpan
Simpan Isi Record
dibatalkan
Universitas Sumatera Utara
3.4. Algoritma Program