Data Flow Diagram DFD Entity Relationship Diagram ERD Perancangan Struktur Database

Tahap perancangan sistem merupakan tahap awal dari membangun sebuah situs, seperti membuat perencanaan, perancangan, diagram alur, tujuan, dan isi dari sebuah situs. Setelah tahap perancangan, tahap selanjutnya yaitu membuat outline atau garis besar dari situs tersebut. Salah satu cara yang dapat digunakan adalah dengan membuat aliran informasi atau flowchart bagan alir dari situs tersebut. Flowchart adalah suatu bagan yang berisi seluruh tahapanrangkaian kegiatan dalam suatu pekerjaan. Flowchart dapat dipergunakan untuk memperinci tahap-tahap rangkaian dan suatu proses pekerjaan. Flowchart juga dapat dipergunakan untuk menjabarkan suatu proses pekerjaan ke dalam tahap-tahap rangkaian yang lebih spesifik untuk pemeriksaan selanjutnya.

3.1 Data Flow Diagram DFD

Data flow diagram merupakan suatu diagram yang menggunakan notasi-notasi untuk menggambarkan arus dari data sistem, dengan menggunakan pendekatan metoda analisis sistem terstruktur Structured System Analysis Method. Di dalam tahap analisa, penggunaan notasi simbol lingkaran dan anak panah untuk mewakili atau menggambarkan arus data dalam perancangan sistem sangat membantu sekali di dalam komunikasi dengan pemakai sistem untuk memahami sistem secara logika. Universitas Sumatera Utara Keuntungan dari penggunaan DFD yaitu membantu para analis sistem meringkas informasi tentang sistem, mengetahui hubungan antar sub sistem, membantu perkembangan aplikasi secara efektif. DFD juga berfungsi sebagai alat komunikasi yang baik antara user dan analis sistem. Berbagai komponen dari Data Flow Diagram DFD yaitu entitas luar, proses, penyimpanan data, dan arus data. DFD memiliki simbol-simbol yang digunakan untuk menggambarkan model data seperti terdapat pada table berikut : Tabel 3.1 Simbol Data Flow Diagram De Marco and Yourdan Symbol Keterangan Gane and Sarson Symbols Source Kesatuan Luar Proses Data Flow Arus Data Data Store Penyimpanan Data Data Produk Data Pesanan Pembeli Pembeli Produk Penjual Universitas Sumatera Utara Tentang website HerbaLife Gambar 3.1 Data Flow Diagram DFD

3.2 Outline Halaman Utama Website

Perancangan E-commerce Penjualan Tanaman Obat Herbal Form Pemesanan Data Produk Cara Pemesanan Data Pesanan pembeli Universitas Sumatera Utara Tanggal Hari Ini LOGO Akar-akaran Herbal Buah-buahan Herbal Bunga-bunga Herbal Daun-daunan Herbal Umbi-umbi Herbal HOME ABOUT MANFAAT TANAMAN CARA ORDER ORDER DELIVERY TANAMAN OBAT YANG TERSEDIA FOTO FOTO FOTO FOTO FOTO SELAMAT DATANG DI HERBALIFE LOGO BANK LOGO BANK LOGO BANK LOGO BANK FOOTER Gambar 3.2 Menu Utama Website HerbaLife 3.2.1 Outline menu kategori Akar-akar Herbal Universitas Sumatera Utara LOGO Nama Kategori FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOOTER HOME AKAR-AKARAN HERBAL BUAH-BUAHAN HERBAL BUNGA-BUNGA HERBAL DAUN-DAUNAN HERBAL UMBI-UMBIAN HERBAL ABOUT MANFAAT CARA ORDER ORDER DELIVERY Gambar 3.3 Menu Kategori Akar-akaran Herbal

3.2.2 Outline menu kategori Buah-buahan Herbal

Universitas Sumatera Utara LOGO Nama Kategori FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOOTER HOME AKAR-AKARAN HERBAL BUAH-BUAHAN HERBAL BUNGA-BUNGA HERBAL DAUN-DAUNAN HERBAL UMBI-UMBIAN HERBAL ABOUT MANFAAT CARA ORDER ORDER DELIVERY Gambar 3.4 Menu Kategori Buah-buahan Herbal

3.2.3 Outline menu kategori Bunga-bunga Herbal

Universitas Sumatera Utara LOGO Nama Kategori FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOOTER HOME AKAR-AKARAN HERBAL BUAH-BUAHAN HERBAL BUNGA-BUNGA HERBAL DAUN-DAUNAN HERBAL UMBI-UMBIAN HERBAL ABOUT MANFAAT CARA ORDER ORDER DELIVERY Gambar 3.5 Menu Kategori Buah-buahan Herbal

3.2.4 Outline menu kategori Daun-daunan Herbal

Universitas Sumatera Utara LOGO Nama Kategori FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOOTER HOME AKAR-AKARAN HERBAL BUAH-BUAHAN HERBAL BUNGA-BUNGA HERBAL DAUN-DAUNAN HERBAL UMBI-UMBIAN HERBAL ABOUT MANFAAT CARA ORDER ORDER DELIVERY Gambar 3.6 Menu kategori Daun-daunan Herbal

3.2.5 Outline menu kategori Umbi-umbian Herbal

Universitas Sumatera Utara LOGO Nama Kategori FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOTO PRODUK FOOTER HOME AKAR-AKARAN HERBAL BUAH-BUAHAN HERBAL BUNGA-BUNGA HERBAL DAUN-DAUNAN HERBAL UMBI-UMBIAN HERBAL ABOUT MANFAAT CARA ORDER ORDER DELIVERY Gambar 3.7 Menu Umbi-umbian Herbal

3.2.6 Outline menu About

Universitas Sumatera Utara Slide Foto Akar-akaran Herbal Buah-buahan Herbal Bunga-bunga Herbal Daun-daunan Herbal Umbi-umbian Herbal HOME ABOUT MANFAAT TANAMAN CARA ORDER ORDER DELIVERY ABOUT HERBALIFE MENU LOGIN ADMIN FOOTER Gambar 3.8 Menu About

3.2.7 Outline Menu Manfaat tanaman

Universitas Sumatera Utara Akar-akaran Herbal Buah-buahan Herbal Bunga-bungaan Herbal Daun-daunan Herbal Umbi-umbian Herbal HOME ABOUT MANFAAT TANAMAN CARA ORDER ORDER DELIVERY MANFAAT TANAMAN INFORMASI MANFAAT TANAMAN FOOTER Gambar 3.9 Menu Manfaat tanaman

3.2.8 Layout Menu Cara Order

Universitas Sumatera Utara INFORMASI CARA PEMESANAN Akar-akaran Herbal Buah-buahan Herbal Bunga-bunga Herbal Daun-daunan Herbal Umbi-umbian Herbal HOME ABOUT MANFAAT TANAMAN CARA ORDER ORDER DELIVERY FOOTER

3.10 Menu Cara Order

3.3.9 Layout Menu Order Delivery

Universitas Sumatera Utara LOGO HOME AKAR-AKARAN HERBAL BUAH-BUAHAN HERBAL BUNGA-BUNGA HERBAL DAUN-DAUNAN HERBAL UMBI-UMBIAN HERBAL ABOUT MANFAAT CARA ORDER ORDER DELIVERY ----FORM ORDER------ Footer Gambar 3.11 Menu Order Delivery

3.3 Entity Relationship Diagram ERD

Universitas Sumatera Utara Entity Relationship Diagram ERD tersusun atas 3 tiga komponen yaitu entitas, atribut dan kerelasian antar entitas. Secara garis besar entitas merupakan objek yang terlibat di dalam sebuah sistem. Atribut berperan sebagai penjelas entitas dan kerelasian menunjukkan hubungan yang terjadi antara dua entitas. Adapun ERD dari Website E-Commerce Penjualan Tanaman Obat-obatan Herbal adalah sebagai berikut : Gambar 3.12 ERD Sistem pada website HerbaLife

3.4 Perancangan Struktur Database

Database dapat diartikan sebagai sebuah tempat menyimpan data yang terstruktur agar dapat diakses dengan cepat dan mudah. Membangun sebuah database merupakan langkah awal pembuatan aplikasi, termasuk dalam penambahan produk dan lain-lain dalam mengolah penjualan pada Website HerbaLife. PRODUK PESAN CUSTOMER PEMBELI KELOLA PENGELOLA Universitas Sumatera Utara Dalam perancangan WEBSITE E-COMMERCE PENJUALAN TANAMAN OBAT HERBAL, penulis membuat 3 tabel di dalam database yang diberi nama form, order_pesan , dan nama_tanaman. Tabel-tabel tersebut terdiri atas : Tabel 3.2 Tabel Data Admin FIELD DATA TYPE DESCRIPTION username varchar30 username dan primary key Password varchar15 password useradmin Tabel 3.3 Tabel Pemesanan Order Delivery FIELD DATA TYPE DESCRIPTION Nama varchar45 Nama Pembeli Alamat varchar45 Alamat Pembeli Kota varchar45 Kota Asal Kode_Pos varchar7 Kode Pos Alamat Nomor_Telepon varchar12 Nomor Telepon Pembeli Id_Pesanan varchar50 Kode Produk yang Dipesan Jumlah_Pesanan varchar50 Jumlah PesananProduk Universitas Sumatera Utara Tabel 3.4 Tabel Daftar Nama Tanaman FIELD DATA TYPE DESCRIPTION id_produk varchar6 kode produk nama_daerah varchar50 Nama daerah dari tanaman nama_latin varchar50 Nama latin dari tanaman harga varchar40 Harga tanaman

3.5 Flowchart