Perancangan Struktur Database Perancangan Halaman Website Pembuatan Flowchart Diagram Alir

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