BAB IV

PERANCANGAN DAN IMPLEMENTASI

4.1 Perancangan
Perancangan system secara umum biasanya memiliki tujuan untuk

gambaran umum kepada pemakai akhir (End User) dan manajemen tentang

system yang baru dikembangkan. Perancangan secara umum ini biasanya

dikomunikasikan kepada pemakai agar mudah dipahami. Adapun yang terkait

untuk dirancang secara umum dalam perancangan macro, antara lain :

1. Perancangan Diagram Konteks.

2. Perancangan Data Flow Diagram (DFD) Aplikasi yang akan dibuat.

3. Perancangan Flowchart Proses.

4. Perancangan Entity Relational Diagram (ERD).

4.1.1 Diagram Konteks

Gambar 4.1 Diagram Konteks

 4.1.2 DFD Level 1

Gambar 4.2 DFD Level 1 Sistem Penjualan Online revolutiondental.com

4.1.2.1 DFD Level 2 Proses 2 Lupa Password

Gambar 4.3 DFD Level 2 Proses 2 Lupa Password

4.1.2.2 DFD level 2 Proses 5 Pengolahan Pemesanan

Gambar 4.4 DFD Level 2 Proses 5 Pengolahan Pemesanan

4.1.2.3 DFD Level 2 Proses 6 Pengolahan Data Master

Gambar 4.5 DFD Level 2 Proses 6 Pengolahan Data Master

4.1.2.4 DFD Level 2 Proses 7 Pengolahan Laporan

Gambar 4.8 DFD Level 2 Proses 7 Pengolahan Laporan

4.1.3 Flowchart
Flowchart adalah penggambaran secara grafik dari langkah-

langkah dan urut-urutan prosedur dari suatu program. Flowchart website

Revolutiondental.com adalah sebagai berikut :

1. Flowchart Order

Gambar 4.9 Flowchart Order

2. Flowchart Login Admin

 Gambar 4.10 Flowchart Login Admin

3. Flowchart Tambah Data

Gambar 4.11 Flowchart Tambah Data

4. Flowchart Edit Data

Gambar 4.12 Flowchart Edit Data

5. Flowchart Hapus data

Gambar 4.13 Flowchart Hapus Data

4.1.3 Kamus Data
Kamus data ikut berperan dalam perancangan dan

pembangunan sistem. Berfungsi untuk menjelaskan data yang digunakan

didalam sistem sebagai berikut:

= @id_produk + @id_kategori + @id_subkategori +

nama_produk + produk_seo + deskripsi + harga + stok +

Produk
berat

+ tgl_masuk + gambar + dibeli + diskon

Kategori = @id_kategori + nama_kategori + Kategori_seo

= @id_subkategori +@id_kategori+ nama_subkategori +

Subkategori
Subkategori_seo

= @username password + nama_lengkap + email +

Admin no_telp +

level + blokir

= @id_customer + password + Nama_lengkap + Alamat

Kustomer +

Email + telepon + @Id_kota

Kota = @id_kota + Nama_kota + Ongkos_kirim

= @id_order + Status_order +Tgl_order + Jam_order +

Order
@Id_kustomer + @username
 Order_detail = @id_order + @Id_produk + Jumlah =(harga+jumlah)

4.1.4 ERD (Entity Relationonship Diagram)

Entity Relationship Diagram adalah salah satu metode pemodelan

basis data yang digunakan untuk menghasilkan skema konseptual untuk

jenis/model data semantik sistem. Dimana sistem  seringkali memiliki

basis data relasional, Diagram untuk menggambarkan model Entitiy-

Relationship ini disebut Entitiy-Relationship diagram, ER

diagram, atau ERD.

Adapun ERD dari Sistem Penjualan Tokogile.com berbasis website

ini sebagai berikut :

Gambar 4.14 Entity Relationship Diagram

4.1.5 Perancangan Tabel
Adapun perancangan tabel mengenai website ini diperlukan

beberapa tabel sebagai berikut :

a. Tabel Admin

Berfungsi untuk menyimpan data – data administrator.

Dalam tabel admin, kolom username sebagai Primary Key.

Tabel 4.1 Tabel Admin

No. Nama Tipe Ukuran Keterangan

1 username Varchar 50 Username Admin

2 password Varchar 50 Password Admin

3 nama_lengkap Varchar 100 Nama Lengkap

4 email Varchar 100 Email Admin

5 no_telp Varchar 20 Telepon Admin

6 level Varchar 20 Tingkatan Admin

7 blokir Enum(‘Y’’N’) - Status Admin

b. Tabel Produk
 Berfungsi untuk menyimpan data – data produk di

Revolutiondental.com. Dalam tabel produk, kolom id_produk

sebagai Primary Key, id_kategori sebagai foreign key.

Tabel 4.2 Tabel Produk

No. Nama Tipe Ukuran Keterangan

1 id_produk Int - Auto_increment

2 id_kategori Int - Identitas kategori

3 nama_produk Varchar 100 Nama produk

4 produk_seo Varchar 100 Search engine

optimisasi produk

5 deskripsi Text - Keterangan produk

6 harga Int - Harga produk

7 stok Int - Stok produk

8 berat Int - Berat Produk

9 tgl_masuk Date - Tanggal masuk produk

10 gambar Varchar 100 Gambar produk

11 dibeli Int - Dibeli berapa

12 diskon Int - Diskon produk

 c. Tabel kategori

Berfungsi untuk menyimpan data – data ketegori produk

untuk mengelompokan produk berdasarkan tipe kategori. Dalam

tabel kategori, kolom id_kategori sebagai Primary Key.

Tabel 4.3 Tabel Kategori

No. Nama Tipe Ukuran Keterangan

1 id_kategori Int - Auto_increment

2 nama_kategori Varchar 100 Nama Kategori

3 Kategori_seo Varchar 100 SEO Kategori

d. Tabel subkategori

Berfungsi untuk menyimpan data – data subketegori

produk untuk mengelompokan produk berdasarkan tipe

subkategori. Dalam tabel subkategori, kolom id_subkategori

sebagai Primary Key.

Tabel 4.4 Tabel Subkategori

No. Nama Tipe Ukuran Keterangan

1 Id_subkategori Int - Auto_increment

2 id_kategori Varchar 100 Id kategori

2 nama_kategori Varchar 100 Nama Kategori

3 Kategori_seo Varchar 100 SEO Kategori

e. Tabel Customer

Berfungsi untuk menyimpan data – data Pemesan. Dalam

tabel customer, kolom id_kustomer sebagai Primary Key.

Tabel 4.5 Tabel Customer

No. Nama Tipe Ukuran Keterangan

1 id_customer Int - Auto_increment

2 password Varchar 50 Password customer

3 Nama_lengkap Varchar 100 Nama Kustomer

4 Alamat Text - Alamat Kustomer

5 Email Varchar 100 Email kustomer

6 telepon varchar 20 Telepon kustomer

7 Id_kota int - Identitas kota pada

tabel Kota

f. Tabel Kota
 Berfungsi untuk menyimpan data – data kota tujuan

pesanan. Dalam tabel kota, id_kota sebagai primary key.

Tabel 4.6 Tabel Kota

No. Nama Tipe Ukuran Keterangan

1 id_kota Int - Auto_increment

2 Nama_kota Varchar 100 Nama Kota

3 Ongkos_kirim date - Ongkos kirim

g. Tabel Order

Berfungsi untuk menyimpan data – data Pesanan Customer.

Dalam tabel Order, kolom id_order sebagai Primary Key id_kota

sebagai foreign key.

Tabel 4.7 Tabel Order

No. Nama Tipe Ukuran Keterangan

1 id_order Int - Auto_increment

2 Status_order Varchar 50 Status pesanan

3 Tgl_order date - Tgl pemesanan

4 Jam_order time - Jam pemesanan

5 Id_kustomer int - Identitas pemesan

 6 username varchar 50 Username admin

h. Tabel Order_detail

Berfungsi untuk menyimpan data – detail pesanan. Dalam tabel

Order_detail, kolom id_order dan id_produk sebagai foreign key.

Tabel 4.8 Tabel Order_detail

No. Nama Tipe Ukuran Keterangan

1 id_order Int - Id order

2 Id_produk int 50 Id produk

3 Jumlah int - Jumlah pesanan

4.1.6 Relasi Antar Tabel
Relasi antar tabel merupakan gambaran hubungan yang terjadi

antara tabel satu dengan yang lainnya. Relasi antar tabel pada website

Revolutiondental.com digambarkan seperti dibawah ini.

Gambar 4.15 Relasi Antar Tabel

4.1.6 Struktur Menu

Gambar 4.16 Struktur Menu

4.1.7 Perancangan interface

Perancangan interface terdiri dari tampilan awal website untuk

customer dangan beberapa menu, yaitu : Home, Semua Produk, Cara Beli,

Profil, Keranjang, Download Katalog dan Hubungi Kami. Berikut gambar

dari perancangan interface Home :

a. Tampilan Awal User (Menu Home)

 Gambar 4.17 Rancangan Interface Home

b. Tampilan Menu Cara Beli

Pada tampilan menu ini berisi mengenai urutan langkah – langkah

cara berbelanja di website ini guna mempermudah pembeli untuk

memesan suatu produk.

 Gambar 4.18 Rancangan Interface Cara Belanja

c. Tampilan Menu Tentang Revodent

Pada tampilan menu ini berisi tentang alamat, lokasi, gambar

perusahaan, logo, visi dan misi, agar pemesan lebih percaya akan integritas

website ini.
 Gambar 4.19 Rancangan Interface Tentang Revolution dental

d. Tampilan Menu Hubungi Kami

Pada Menu ini, menampilkan isian form yang mana para pelanggan atau

pengunjung dapat mengirim pesan kepada admin, baik saran maupun

kritik.
Gambar 4.21 Rancangan Interface Hubungi Kami
4.2 Implementasi Sistem
Implementasi sistem merupakan kumpulan dari elemen - elemen yang

telah didesain kedalam bentuk pemrograman untuk menghasilkan suatu tujuan

yang dibuat berdasarkan kebutuhan.

1. Tampilan Awal User

Pada tampilan ini pengunjung dapat memilih produk – produk dari

Revolution.com dan melihat informasi lainnya.

Gambar 4.22 Tampilan Awal User

2. Tampilan Tas Belanja

Tampilan ini adalah asumsi dari sebuah keranjang belanja yang

bila mana pemesan ingin memesan maka produk yang dipesan akan ada pada

halaman keranjang belanja ini.

Gambar 4.24 Tampilan Tas Belanja

3. Tampilan Selesai Belanja

Pada tampilan ini pemesan diasumsikan telah selesai memilih produk dan

akan melakukan transaksi, maka halaman ini menyediakan form pemesanan untuk

selanjutnya diisi oleh pemesan.

Gambar 4.25 Tampilan Selesai Belanja

4. Tampilan Transaksi Selesai

Tampilan ini menjelaskan bahwa transaksi telah selesai.

Gambar 4.26 Tampilan Transaksi Selesai

5. Tampilan Login Admin

Gambar 4.27 Tampilan Login Admin

6. Tampilan Home Admin

Gambar 4.28 Tampilan Home Admin

4.2.1 Analisa Kebutuhan
Menspesifikasikan kebutuhan alternative, spesifikasi komputer dan

detail teknologi.

4.2.2 Perangkat Keras

Komponen perangkat keras yang dibutuhkan minimal untuk bisa

membuat website ini adalah :

a. Satu unit PC(Personal Computer).

b. Monitor 15”

c. CPU dengan prosesor P4 berkecepatan 2.00 GHz.

d. Hardisk kapasitas minimal 20 GB Ram 256Mb

e. VGA Card 64 MB Resolusi 800 x 600

f. Mouse dan keyboard PS/2 atau USB

g. Modem (Koneksi Internet)

4.2.3 Perangkat Lunak

a. Sistem Operasi Windows SP3

b. Macromedia Dreamweaver

c. Xampp win32-1.4

d. Internet Browser Seperti Google Crome dll.