Dokumen tersebut merangkum perancangan dan pembuatan website e-commerce untuk 9 Segar. Terdiri dari tujuan pembuatan website untuk memberikan kemudahan bagi konsumen dan pengolahan data transaksi, tuntutan fitur website seperti input, output, proses dan kinerja website, batasan perancangan menggunakan wordpress, asumsi pengguna website, rancangan data seperti entity relationship diagram dan tabel database, arsitektural data flow diagram, serta rancangan antarmuka website.

1. 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

2. 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.

3. 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.

4. 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/.

5. E. RANCANGAN DATA
1. Entity Realitionship Diagram
Entity relationship diagram perancangan website e-commerce ini
ditunjukkan pada Gambar dibawah ini.
Id_User
User
Detail
Pemesanan
Id_Pemesa
Memesan
nan
Nama_De
pan
Id_Tarif
Nama_Bel
akang
Alamat
Kecamata
n
Kelurahan HP
Id_Produk
Metode_P
embayaran
Pengirima
n
E-Mail
Pembayaran
Konfirmasi
Pembayaran
Kecamata
n
Kecamata
n
Kecamata
n
Kecamata
n
Kecamata
n
Kecamata
n
Kecamata
n
Kecamata
n
Kecamata
n
Tarif
Pengiriman
Tarif
Total_Bel
anja
Id_Detailp
emesanan
Kode_Ord
er
Tanggal
Status
Id_Pemesa
nan
Username Password
Id_Produk
Produk
Id_Katego
ri
Id_Produk
Nama_Pro
duk
Harga Deskripsi
Tanggal
Id_Katego
ri
Kategori
Mempunyai
Stok Id_Stok
Id_Produk
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

6. 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

7. 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

8. 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.

9. Proses 1.0
Proses
Registrasi
Proses 2.0
Proses
Login
Proses 3.0
Proses
Pemesanan
Produk
Data User
Proses 4.0
Invoice
Pemesanan &
Pembayaran
Pembeli
D1 Data User
D2 Data Kategori
D3 Data Produk
D4 Data Stok
D5
Data Tarif
Pengiriman
Data User
Data User
Username
Password
Data Produk &
Tarif Pengiriman
Invoice
Pemesanan &
Pembayaran
D6 Data Pemesanan
D7
Data Detail
Pemesanan
D8
Data Konfirmasi
Pembayaran
Data Pemesanan
Detail Pemesanan
Proses 5.0
Proses
Konfirmasi
Pembayaran
Data 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.

10. Pembeli
Proses 1.3.1
Proses
Lihat Produk
Data Produk
Terpilih
Proses 2.3.1
Proses
Pesan Produk
D2 Data Kategori
Proses 3.3.1
Proses
Cek Tarif
Pengiriman
D3 Data Produk
D4 Data Stok
D5
Data Tarif
Pengiriman
D6 Data Pemesanan
D7
Data Detail
Pemesanan
Data Produk
Data Tarif
Pengiriman
Data Pemesanan
Data Detail Pemesanan
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.

11. Penjual
Proses 1.4.1
Pemrosesan
Data User
D1 Data User
D2 Data Kategori
D3 Data Produk
D4 Data Stok
D5
Data 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 Produk
Data Produk
Proses 4.4.1
Pemrosesan
Data
Pemesan
D6 Data Pemesanan
D7
Data Detail
Pemesanan
Data Pemesan
Data Tarif
Pengiriman
Data Pemesan
Proses 5.4.1
Pemrosesan
Konfirmasi
Pembayaran
D8
Data 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
D8
Data 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.

12. 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.

13. 3. Dengan adanya aplikasi websit e-commerce 9 Segar maka konsumen
dapat melihat info tentang produk.