PERANCANGAN DAN PEMBUATAN WEBSITE

E-COMMERCE DI 9 SEGAR

Disusun Oleh:

Asmawi (11.0504.0059)

Fatchan Fatoni (11.0504.0080)

Guruh Styawan (11.0504.0027)

Tegar Wasiat A.A (11.0504.0007)

TEKNIK INFORMATIKA S1

UNIVERSITAS MUHAMMADIYAH MAGELANG

2014

A. TUJUAN

Tujuan dari pembuatan dan perancangan website e-commerce 9 Segar

adalah:

1. Memberikan kemudahan pada konsumen dalam mendapatkan

informasi maupun dalam membeli produk yang dijual di 9 Segar.

2. Memberikan kemudahan dalam pengolahan data transaksi serta

pembuatan laporan.

B. TUNTUTAN UMUM

Gambaran fitur, menu dan modul website e-commerce 9 Segar yang

akan di rancang adalah :

1. Input

a. Admin dapat memasukkan data kategori produk, data produk,

spesifikasi produk dan data-data lain yang terdapat dalam website

e-commerce 9 Segar.

b. Admin dapat menambahkan pengaturan sistem.

c. Customer dapat memasukkan data customer.

d. Customer dapat memasukkan order produk kedalam keranjang

belanja dan dapat memasukkan lebih dari satu produk.

2. Output

a. Sistem dapat menampilkan data kategori produk, data produk,

gambar produk serta data- data lain di website ecommerce 9 Segar

pada halaman publik.

b. Sistem dapat menampilkan informasi tentang pengaturan/ modul-

modul dalam sistem dan konfirmasi order dari customer yang telah

diproses oleh admin.

c. Sistem dapat menampilkan informasi tentang data customer.

d. Sistem dapat menampilkan data pesanan customer.

3. Proses

a. Sistem melakukan proses login untuk akses admin pada website.

b. Admin berhak mengatur, mengelola, dan melakukan proses add,

insert, update, cange, dan delete keseluruhan data yang akan

ditampilkan pada halaman publik.

c. Setiap customer dapat melakukan registrasi yang kemudian login

dengan hanya satu username dan password untuk masuk

kehalaman utama.

d. Customer dapat melakukan pengisian data pribadi.

e. Customer dapat melakukan logout untuk keamanan data yang

dikelola oleh admin.

4. Kinerja

a. Sistem dapat mendukung penyimpanan data dengan menggunakan

data base agar data dapat tersimpan dengan baik, sehingga akan

khawatir kemungkinan terjadinya kerusakan dan kehilangan data

serta informasi yang dihasilkan lebih akurat.

b. Sistem memungkinkan admin melakukan update secara

keseluruhan.

c. Sistem dapat melakukan proses data order yang dilakukan

customer.

d. Sistem memungkinkan customer mengetahui gambar produk,

spesifikasi produk, dan harga produk tanpa harus tatap muka

langsung dengan pemilik website.

e. Sistem memungkinkan customer untuk melakukan transaksi jual

beli setiap saat dan dimana saja, karena sistem dapat diakses 24

jam sehari dengan syarat tersambung dengan internet.

f. Sistem mampu melakukan pencarian produk.

g. Untuk customer yang melakukan pembelian produk dalam jumlah

banyak akan mendapatkan diskon sesuai dengan aturan yang

diberlakukan.

5. Control

a. Sistem memberikan keamanan untuk akses admin dengan adanya

username dan password yang hanya dapat diakses oleh admin itu

sendiri.

b. Sistem memberikan keamanan untuk akses customer dengan

adanya username dan password yang hanya dapat diakses oleh

customer itu sendiri.

C. BATASAN

Batasan perancangan dari sistem website e-commerce 9 Segar adalah :

1. Penyajian informasi penjualan meliputi informasi jenis produk dengan

fasilitas informasi pemesanan, konfirmasi pembayaran dan cek produk.

2. Program yang digunakan untuk perncangan website adlah wordpress.

3. Proses order produk ditampilkan pada web saat customer masih dalam

keadaan login.

D. ASUMSI

Aplikasi website e-commerce 9 Segar terbagi menjadi dua kategori,

yaitu administrator dan customer.

1. Administrator adalah pengontrol website, admin mempunyai hak

akses penuh kedalam website ini termasuk mengubah data produk

atau menghapusnya serta mengubah menu-menu yang ada dalam

website. Untuk masuk dalam menu admin ini administrator harus

mengetikkan URL address http://www.9segar.com/lalirupane-

elengrasane.php. dalam mengetikkan URL ini dilakukan secara manual

dikarenakan untuk lebih mengamankan posisi administrator dengan

tidak menampilkan secara langsung form administrator login

dalam halaman website.

2. Customer adalah pengunjung yang sudah mendaftarkan diri dalam

website e-commerce dan dapat mengecek pembelian yang telah

dipesan dengan cara login di halaman website. Untuk login di

halaman website customer harus mengetikkan URL address

http://www.9segar.com/my-account/.

E. RANCANGAN DATA

1. Entity Realitionship Diagram

Entity relationship diagram perancangan website e-commerce ini

ditunjukkan pada Gambar dibawah ini.

User

Id_User

Memesan

Id_Pemesa

nan

Nama_De

pan

Nama_Bel

akang

Alamat

Kecamata

nKelurahan HP

Id_Produk

Pengirima

n

Metode_P

embayaran

E-Mail

Detail

Pemesanan

Pembayaran

Konfirmasi

Pembayaran

Kecamata

n

Kecamata

n

Kecamata

n

Kecamata

n

Kecamata

n

Kecamata

n

Kecamata

n

Kecamata

n

Kecamata

n

Tarif

Pengiriman

Id_Tarif

Tarif

Total_Bel

anja

Id_Detailp

emesanan

Kode_Ord

er

Tanggal

Status

Id_Pemesa

nan

Username Password

Produk

Id_ProdukId_Katego

riId_Produk

Nama_Pro

dukHarga Deskripsi

Tanggal

Mempunyai

Stok Id_Stok

Id_Produk

Kategori

Id_Katego

ri

Nama_Kat

egori

Gambar Entity Realitionship Diagram

Rancangan database untuk pembuatan website e-commerce 9 Segar

menggunakan database MySQL.

2. Tabel Database

a. Tabel User

Tabel user berfungsi menyimpan data registrasi akun pembeli,

yang ditunjukkan pada tabel dibawah ini

Nama Field Tipe Data Ukuran Field

Id_User Bigint 20

Username Varchar 60

Password Varchar 64

Tabel User

b. Tabel Kategori

Tabel kategori berfungsi untuk menyimpan data kategori

produk, yang ditunjukkan pada tabel dibawah ini.

Nama Field Tipe Data Ukuran Field

Id_Kategori Bigint 19

Nama_Kategori Varchar 255

Tabel Kategori

c. Tabel Produk

Tabel produk berfungsi menyimpan data produk, yang

ditunjukkan pada tabel dibawah ini

Nama Field Tipe Data Ukuran Field

Id_Produk Bigint 20

Nama_Kategori Varchar 255

Nama_Produk Varchar 255

Harga Varchar 255

Diskon Varchar 255

Deskripsi Text

Tanggal Date

Tabel Produk

d. Tabel Stok

Tabel stok berfungsi menyimpan data stok, yang ditunjukkan

pada tabel dibawah ini

Nama Field Tipe Data Ukuran Field

Id_Stok Bigint 20

Jumlah_Stok Varchar 255

Tabel Stok

e. Tabel Tarif Pengiriman

Tabel tarif pengiriman berfungsi menyimpan data tarif

pengiriman, yang ditunjukkan pada tabel dibawah ini

Nama Field Tipe Data Ukuran Field

Id_Tarif Bigint 20

Tarif Varchar 255

Total_Belanja Varchar 255

Tabel Tarif Pengiriman

f. Tabel Pemesanan

Tabel pemesanan berfungsi menyimpan data pemesanan, yang

ditunjukkan pada tabel dibawah ini

Nama Field Tipe Data Ukuran Field

Id_Pemesanan Bigint 20

Nama_Depan Varchar 255

Nama_Belakang Varchar 255

Alamat Text

Kecamatan Varchar 255

Kelurahan Varchar 55

E-mail Varchar 255

HP Varchar 255

Id_Produk Bigint 20

Pengiriman Varchar 255

Metode_Pembayaran Varchar 255

Tabel Pemesanan

g. Tabel Detail Pemesanan

Tabel detail pemesanan berfungsi menyimpan data detail

pemesanan pada setiap transaksi, yang ditunjukkan pada tabel

dibawah ini.

Nama Field Tipe Data Ukuran Field

Id_Detail Bigint 20

Kode_Order Varchar 255

Tanggal Date

Status Varchar 255

Id_Pemesanan Bigint 20

Tabel Detail Pemesanan

h. Konfirmasi Pembayaran

Tabel detail konfirmasi pembayaran berfungsi menyimpan data

konfirmasi pembayaran setelah pembeli melakukan transaksi

pembayaran, yang ditunjukkan pada tabel dibawah ini.

Nama Field Tipe Data Ukuran Field

Id_Konfirmasi Bigint 20

Nama Varchar 255

E-Mail Varchar 255

No HP Varchar 255

Tanggal_Transfer Date

Jumlah_Transfer Varchar 255

Bank_Tujuan Varchar 255

Catatan Varchar 255

Verifikasi Varchar 255

Tabel Konfirmasi Pembayaran

3. Relasi Tabel

Hubungan relasi antar tabel perancangan website commerce ini

ditunjukkan pada gambar dibawah ini.

Gambar Relasi Tabel

F. RANCANGAN ARSITEKTURAL

1. Data Flow Diagram Level 0 (DFD Level 0)

Data Flow Diagram Level 0 (DFD Level 0) website e-commerce 9

Segar ditunjukkan pada gambar dibawah ini.

Proses 1.0

Proses

Registrasi

Proses 2.0

Proses

Login

Proses 3.0

Proses

Pemesanan

Produk

Proses 4.0

Invoice

Pemesanan &

Pembayaran

Pembeli

D1 Data User

D2 Data Kategori

D3 Data Produk

D4 Data Stok

D5Data Tarif

Pengiriman

Data User

Data User

Username

Password

Data Produk &

Tarif Pengiriman

Invoice

Pemesanan &

Pembayaran

Data User

D6 Data Pemesanan

D7Data Detail

Pemesanan

D8Data Konfirmasi

Pembayaran

Detail Pemesanan

Data Pemesanan

Proses 5.0

Proses

Konfirmasi

PembayaranData Konfirmasi Pembayaran

Data

Pembayaran

Penjual

Konfirmasi

Proses 4.0

Manajemen

Data

Data

Data

Gambar DFD Level 0

2. Data Flow Diagram Level 1 (Proses Pemesanan Produk)

Data Flow Diagram Level 1 merupkan pengembangan dari proses

3.0 Data Flow Diagram Level 0 yang ditunjukkan pada gambar

dibawah ini.

Pembeli

Proses 1.3.1

Proses

Lihat Produk

Proses 2.3.1

Proses

Pesan Produk

D2 Data Kategori

Proses 3.3.1

Proses

Cek Tarif

Pengiriman

D3 Data Produk

D4 Data Stok

D5Data Tarif

Pengiriman

D6 Data Pemesanan

D7Data Detail

Pemesanan

Data Tarif

Pengiriman

Data Pemesanan

Data Detail Pemesanan

Data Produk

Data Produk

Terpilih

Gambar DFD Level 1 Proses Pemesanan Produk

3. Data Flow Diagram Level 1 (Proses Manajemen Data)

Data Flow Diagram Level 1 merupkan pengembangan dari proses

4.0 Data Flow Diagram Level 0 yang ditunjukkan pada gambar

dibawah ini.

Penjual

Proses 1.4.1

Pemrosesan

Data User

D1 Data User

D2 Data Kategori

D3 Data Produk

D4 Data Stok

D5Data Tarif

Pengiriman

Proses 2.4.1

Pemrosesan

Data Produk

Proses 3.4.1

Pemrosesan

Data Tarif

Pengiriman

Data User

Data Tarif

Pengiriman

Data

User

Data ProdukData Produk

Proses 4.4.1

Pemrosesan

Data

Pemesan

D6 Data Pemesanan

D7Data Detail

Pemesanan

Data Pemesan

Data Tarif

Pengiriman

Data Pemesan

Proses 5.4.1

Pemrosesan

Konfirmasi

Pembayaran

D8Data Konfirmasi

Pembayaran

Data Konfirmasi

Pembayaran

Data Konfirmasi

Pembayaran

Gambar DFD Level 1 Proses Manajemen Data

4. Data Flow Diagram Level 1 (Proses Konfirmasi Pembayaran)

Data Flow Diagram Level 1 merupkan pengembangan dari proses

5.0 Data Flow Diagram Level 0 yang ditunjukkan pada gambar

dibawah ini.

Penjual

Proses 1.5.1

Proses Cek

Pembayaran

Proses 2.5.1

Proses

Validasi

Pembayaran

D8Data Konfirmasi

Pembayaran

Data Pembayaran

Tervalidasi

Gambar DFD Level 1 Proses Konfirmasi Pembayaran

G. RANCANGAN ANTAR MUKA

Perancangan antar muka merupakan tahapan untuk membuat tampilan

atau sistem yang akan dibuat. Perancangan antar muka pemakai sangat

penting untuk memenuhi kriteria yang mudah digunakan oleh pemakai.

Rancangan halaman website e-commerce 9 Segar ditunjukkn pada gambar

dibawah ini.

Gambar Rancangan Antar Muka

H. PENUTUP

Dari berbagai penjelasan yang telah diuraikan dalam laporan ini maka

dapat disimpulkan beberapa hal sebagai berikut :

1. Aplikasi website e-commerce ini menyajikan informasi tentang 9

Segar yang ditunjukkan pada konsumen.

2. Dengan adanya aplikasi website e-commerce ini, informasi tentang

produk terbaru 9 Segar dapat terpublikasi dengan baik.

3. Dengan adanya aplikasi websit e-commerce 9 Segar maka konsumen

dapat melihat info tentang produk.