T0__BAB III Institutional Repository | Satya Wacana Christian University: Perancangan Aplikasi untuk Pemesanan Ayam Berbasis Web T0 BAB III
BAB III
PERANCANGAN SISTEM
3.1 Ruang Lingkup Website
Berdasarkankebutuhan dari pengguna, pembuatan website ini
ditujukan kepada masyarakat yang membutuhkan media atau
sarana dalam memperoleh informasi tentang harga jual ayam dan
lokasi ayam yang sudah siap untuk dipanen.
3.2 DFD ( Data Flow Diagram )
Sebuah teknik grafis yang menggambarkan aliran informasi dan
transformasi yang diaplikasikan pada saat data bergerak dari input
menjadi output.
Berikut adalah gambaran
DFD website
“Pemesanan Ayam Online” :
Gambar 3.1 DFD tingkat 0 Website Pemesanan Ayam Online
Keterangan:
Data yang mengalir dari atau ke Pelanggan :
1. Username dan password.
2. Info konfirmasi masuk.
3. Info produk.
Data yang mengalir dari atau ke Admin :
4. Username dan password.
5. Info identitas member .
6. Data pemesanan barang
7. Daftar barang dan stok barang
8. Menambahkan produk/barang
Dari data flow diagram diatas Admin dapat mengolah data produk,
data member, sedangkan Member hanya dapat melihat, memesan
produk
3.3Sitemap
Sitemap atau sering disebut peta situs kurang lebihnya adalah
sesuatu yang menggambarkan tentang peta dari website,yaitu
segala informasi mengenai halaman atau file-file yang ada pada
sebuah website. Berikut gambaran sitemapwebsite Pemesanan
Ayam Online:
3.3.1 Sitemap Member
Gambar 3.2Sitemap Member
3.3.2 Sitemap Admin
Gambar 3.3 Sitemap Admin
3.4 Lembar Kerja Tampilan (LKT)
Perancangan
antarmuka
Website
Pemesanan
Ayam
Onlinedigambarkan seperti ini :
1. Home sebelum login
Gambar 3.4LKT Halaman utama
Navigasi:
Klik Masuk untuk dapat mengakses belanja
selanjutnya,jika user belum mempunyai Username
harus melakukan Register terlebih dahulu dengan
klik Register .
Klik beli untuk memilih produk yang akan dipesan.
Keterangan:
Pada tampilan halaman Halaman Awal, user akan
dihadapkan pada deskripsi tentang perusahaan serta
nomer telepon.
Produk – produk yang telah dipasang oleh admin
pada kolom sebelah kanan
2. Tampilan Produk User
Gambar 3.5LKT ProdukUser
Navigasi:
Klik Beli untuk memesan produk.
Keterangan:
Pada halaman Produk berisi barang yang telah
diperbaharui oleh admin.
Pelanggan tidak bisa beli apabila belum login.
3. Detail produk
Gambar 3.6LKT Detail Produk
Navigasi:
Klik Beli untuk memesan produk.
Klik Kembali untuk kembali ke Menu produk
Keterangan:
Setelah klik selengkapnya pelanggan bisa memilih
ukuran dan jumlah Ayam yang akan dipesan.
4. Tentang
Gambar 3.7LKT Tentang
Keterangan:
Pelanggan juga bisa melihat photo admin pada
kolom kanan
Pelanggan bisa melihat updateTwitter dari admin
pada kolom kanan.
5. Register
Register
GAMBAR HEADER
Masukkan identitas:
Nama:
Password:
Nama lengkap:
Email:
Alamat lengkap:
Produk
Jenis kelamin:
kode captcha
Register
Gambar 3.8LKT Register
Navigasi:
Klik Register untuk memyimpan dan membuat
akun baru.
Keterangan:
Pelanggan yang belum mempunyai akun harus
membuat akun dengan mengisi data diri lengkap
pada kolom yang disediakan untuk mempermudah
transaksi pembelian produk.
6. Admin
Gambar 3.9LKT halaman Admin
Navigasi:
Klik Logout untuk keluar dari akun admin dan
mengakhiri akses.
Keterangan:
Admin dapat mengetahui segala pemberitahuan
tentang website, seperti jumlah user, jumlah
produk, jumlah order, dan jumlah user yang sedang
online.
Diagram digunakan sebagai gambaran mengenai
informasi website saat ini.
7. Daftar Akun
Home Admin
Username Password Email Namalengkap
Alamatlengkal
Jeniskelamin TanggalRegistrasi
Profil
Opsi
Anda login sebagai....
Hapus
Gambar 3.10LKT Daftar Akun
Navigasi:
Logout.
Klik Hapus untuk menghapus akun dari database.
Keterangan:
Admin dapat menghapus akun Pelanggan yang
sudah tidak digunakan lagi oleh Pelanggan.
8. Daftar Produk
Daftar Produk
Nama Barang
Gambar
Tambah Produk
Kode
Bahan
Tanggal input
Profil
Opsi
Anda login sebagai....
Gambar
Hapus
Logout.
Gambar 3.11LKT Daftar Produk
Navigasi:
Klik Hapus untuk menghapus produk dari database.
Klik Tambah Produk untuk menambah produk
baru.
Keterangan:
Halaman ini berfungsi sebagai halaman untuk
mengatur Ayam yg siap untuk dipanen.
Admin dapat menghapus produk dari website.
Admin dapat menambah produk baru yang belum
ditampilkan pada website. Setelah klik tambah
produk maka akan diarahkan ke halaman tambah
produk.
9. Tambah Produk
Daftar Produk
Profil
Nama Barang
Anda login sebagai....
Kode
Logout.
Bahan
Harga
Gambar Produk
Telusuri..
Tidak Ada berkas dipilih..
Keterangan:
Simpan
Gambar 3.12LKT Tambah Produk
Navigasi:
Klik Simpan untuk menyimpan info produk.
Klik telusuri untuk memilih gambar produk yang
akan digunakan.
Klik Tambah Produk untuk menambah produk
baru.
Keterangan:
Admin dapat memasukan produk baru ke website
dengan cara memasukan segala informasi tentang
produk beserta dengan gambar produk sesuai
dengan kolom yang telah disediakan.
Setelah klik simpan maka tampilan halaman utama
akan otomatis diperbarui sesuai dengan produk
yang telah dimasukan.
10. Daftar Order / Pemesanan
Daftar Produk
Nama Jumlah Order Status
Opsi
Profil
Anda login sebagai....
Logout.
Lihat
Hapus
Gambar 3.13LKT Daftar Order
Navigasi:
Klik Lihat untuk melihat data pemesanan yang
masuk.
Klik Hapus untuk menghapus data pemesanan dari
database.
Keterangan:
Halaman ini berfungsi untuk melihat daftar pesanan
yang telah dilakukan oleh Pelanggan.
3.5 Desain Database
a.
Tabel Barang
Tabel 3.1 Tabel Barang
Nama Field
Type
Null
Id
Int(11)
No
Nama
Varchar(35) No
Deskripsi
Text
Kategori
Varchar(35) No
Harga
Int(11)
No
No
Stok
Int(11)
No
Gambar
Varchar(50) No
Tabel barang berfungsi untuk menyimpan data barang –
barang produk.
b.
Tabel Berita
Tabel 3.2 Tabel Berita
Nama Field
Type
Null
Tanggal
Date
No
Judul
Varchar(50)
No
Berita
Text
No
Tabel berita berfungsi untuk menyimpan data berita
yang diinputkan oleh admin.
c.
Tabel member
Tabel 3.3Tabel Pelanggan
Nama Field
Type
Null
Id
Int(11)
No
Nama
Varchar(50) No
Alamat
Text
No
Email
Text
Telepon
Varchar(25) No
Username
Varchar(30) No
Password
Text
Tabel
Pelanggan
berfungsi
No
No
untuk
menyimpan
datamember .
d.
Tabel Admin
Tabel 3.4Tabel Admin
Nama Field
Type
Null
Id
int(11)
No
Username
Varchar(20) No
password
Text
No
Tabel Admin berfungsi untuk menyimpan data yang
telah menjadi admin pada website ini.
e.
Tabel Transaksi
Tabel 3.5Tabel Transaksi
Nama Field
Type
Null
Notransaksi
Int(11)
No
Username
Varchar(20) No
Status
tinyint(1)
No
Tabel Transaksi berfungsi untuk menyimpan data
transaksi, misalkan pelanggan membeli barang maka
data pelanggan akan tersimpan pada tabel transaksi.
3.6 JST
Berikut adalah gambaran JST dari website“Pemesanan Ayam
Online” :
1.6.1 JST Member
T7
Member
Home
T10
Poduct
T11
Cara Order
T12
About Us
T13
Contact Us
T14
T9
Login
T2
Home
Daftar
T8
T3
Poduct
Cara Order
T4
About Us
T5
Contact Us
T6
T1
Gambar 3.14 JST Member
T1 merupakan halaman utama dari website Pemesanan
Ayam Online, didalamnya terdapat menu – menu. T2
(Home), T3 (Product), T4 (Cara Order ), T5 (About Us),
dan T6 (Contact Us). Pada T2 (Home) akan Login T7
sebagai member T9 dan Member baru T8. T9(member)
akan menampilkan menu yang sama T10 ( Home), T11
(Product), T12 (Cara Order ), T13 (About Us), dan T14
(Contact Us).
1.6.2 JST Admin
Gambar 3.15 JST Admin
T1 merupakan halaman utama login admin, setelah
login maka akan tampil halaman T2 (Menu Admin),
didalamnya terdapat menu – menu yang dapat
diakses oleh admin diantaraya : T3 (Admin), T4
(Produk), T5 (Pemesanan), T6 (Member), dan T7
(Logout).
PERANCANGAN SISTEM
3.1 Ruang Lingkup Website
Berdasarkankebutuhan dari pengguna, pembuatan website ini
ditujukan kepada masyarakat yang membutuhkan media atau
sarana dalam memperoleh informasi tentang harga jual ayam dan
lokasi ayam yang sudah siap untuk dipanen.
3.2 DFD ( Data Flow Diagram )
Sebuah teknik grafis yang menggambarkan aliran informasi dan
transformasi yang diaplikasikan pada saat data bergerak dari input
menjadi output.
Berikut adalah gambaran
DFD website
“Pemesanan Ayam Online” :
Gambar 3.1 DFD tingkat 0 Website Pemesanan Ayam Online
Keterangan:
Data yang mengalir dari atau ke Pelanggan :
1. Username dan password.
2. Info konfirmasi masuk.
3. Info produk.
Data yang mengalir dari atau ke Admin :
4. Username dan password.
5. Info identitas member .
6. Data pemesanan barang
7. Daftar barang dan stok barang
8. Menambahkan produk/barang
Dari data flow diagram diatas Admin dapat mengolah data produk,
data member, sedangkan Member hanya dapat melihat, memesan
produk
3.3Sitemap
Sitemap atau sering disebut peta situs kurang lebihnya adalah
sesuatu yang menggambarkan tentang peta dari website,yaitu
segala informasi mengenai halaman atau file-file yang ada pada
sebuah website. Berikut gambaran sitemapwebsite Pemesanan
Ayam Online:
3.3.1 Sitemap Member
Gambar 3.2Sitemap Member
3.3.2 Sitemap Admin
Gambar 3.3 Sitemap Admin
3.4 Lembar Kerja Tampilan (LKT)
Perancangan
antarmuka
Website
Pemesanan
Ayam
Onlinedigambarkan seperti ini :
1. Home sebelum login
Gambar 3.4LKT Halaman utama
Navigasi:
Klik Masuk untuk dapat mengakses belanja
selanjutnya,jika user belum mempunyai Username
harus melakukan Register terlebih dahulu dengan
klik Register .
Klik beli untuk memilih produk yang akan dipesan.
Keterangan:
Pada tampilan halaman Halaman Awal, user akan
dihadapkan pada deskripsi tentang perusahaan serta
nomer telepon.
Produk – produk yang telah dipasang oleh admin
pada kolom sebelah kanan
2. Tampilan Produk User
Gambar 3.5LKT ProdukUser
Navigasi:
Klik Beli untuk memesan produk.
Keterangan:
Pada halaman Produk berisi barang yang telah
diperbaharui oleh admin.
Pelanggan tidak bisa beli apabila belum login.
3. Detail produk
Gambar 3.6LKT Detail Produk
Navigasi:
Klik Beli untuk memesan produk.
Klik Kembali untuk kembali ke Menu produk
Keterangan:
Setelah klik selengkapnya pelanggan bisa memilih
ukuran dan jumlah Ayam yang akan dipesan.
4. Tentang
Gambar 3.7LKT Tentang
Keterangan:
Pelanggan juga bisa melihat photo admin pada
kolom kanan
Pelanggan bisa melihat updateTwitter dari admin
pada kolom kanan.
5. Register
Register
GAMBAR HEADER
Masukkan identitas:
Nama:
Password:
Nama lengkap:
Email:
Alamat lengkap:
Produk
Jenis kelamin:
kode captcha
Register
Gambar 3.8LKT Register
Navigasi:
Klik Register untuk memyimpan dan membuat
akun baru.
Keterangan:
Pelanggan yang belum mempunyai akun harus
membuat akun dengan mengisi data diri lengkap
pada kolom yang disediakan untuk mempermudah
transaksi pembelian produk.
6. Admin
Gambar 3.9LKT halaman Admin
Navigasi:
Klik Logout untuk keluar dari akun admin dan
mengakhiri akses.
Keterangan:
Admin dapat mengetahui segala pemberitahuan
tentang website, seperti jumlah user, jumlah
produk, jumlah order, dan jumlah user yang sedang
online.
Diagram digunakan sebagai gambaran mengenai
informasi website saat ini.
7. Daftar Akun
Home Admin
Username Password Email Namalengkap
Alamatlengkal
Jeniskelamin TanggalRegistrasi
Profil
Opsi
Anda login sebagai....
Hapus
Gambar 3.10LKT Daftar Akun
Navigasi:
Logout.
Klik Hapus untuk menghapus akun dari database.
Keterangan:
Admin dapat menghapus akun Pelanggan yang
sudah tidak digunakan lagi oleh Pelanggan.
8. Daftar Produk
Daftar Produk
Nama Barang
Gambar
Tambah Produk
Kode
Bahan
Tanggal input
Profil
Opsi
Anda login sebagai....
Gambar
Hapus
Logout.
Gambar 3.11LKT Daftar Produk
Navigasi:
Klik Hapus untuk menghapus produk dari database.
Klik Tambah Produk untuk menambah produk
baru.
Keterangan:
Halaman ini berfungsi sebagai halaman untuk
mengatur Ayam yg siap untuk dipanen.
Admin dapat menghapus produk dari website.
Admin dapat menambah produk baru yang belum
ditampilkan pada website. Setelah klik tambah
produk maka akan diarahkan ke halaman tambah
produk.
9. Tambah Produk
Daftar Produk
Profil
Nama Barang
Anda login sebagai....
Kode
Logout.
Bahan
Harga
Gambar Produk
Telusuri..
Tidak Ada berkas dipilih..
Keterangan:
Simpan
Gambar 3.12LKT Tambah Produk
Navigasi:
Klik Simpan untuk menyimpan info produk.
Klik telusuri untuk memilih gambar produk yang
akan digunakan.
Klik Tambah Produk untuk menambah produk
baru.
Keterangan:
Admin dapat memasukan produk baru ke website
dengan cara memasukan segala informasi tentang
produk beserta dengan gambar produk sesuai
dengan kolom yang telah disediakan.
Setelah klik simpan maka tampilan halaman utama
akan otomatis diperbarui sesuai dengan produk
yang telah dimasukan.
10. Daftar Order / Pemesanan
Daftar Produk
Nama Jumlah Order Status
Opsi
Profil
Anda login sebagai....
Logout.
Lihat
Hapus
Gambar 3.13LKT Daftar Order
Navigasi:
Klik Lihat untuk melihat data pemesanan yang
masuk.
Klik Hapus untuk menghapus data pemesanan dari
database.
Keterangan:
Halaman ini berfungsi untuk melihat daftar pesanan
yang telah dilakukan oleh Pelanggan.
3.5 Desain Database
a.
Tabel Barang
Tabel 3.1 Tabel Barang
Nama Field
Type
Null
Id
Int(11)
No
Nama
Varchar(35) No
Deskripsi
Text
Kategori
Varchar(35) No
Harga
Int(11)
No
No
Stok
Int(11)
No
Gambar
Varchar(50) No
Tabel barang berfungsi untuk menyimpan data barang –
barang produk.
b.
Tabel Berita
Tabel 3.2 Tabel Berita
Nama Field
Type
Null
Tanggal
Date
No
Judul
Varchar(50)
No
Berita
Text
No
Tabel berita berfungsi untuk menyimpan data berita
yang diinputkan oleh admin.
c.
Tabel member
Tabel 3.3Tabel Pelanggan
Nama Field
Type
Null
Id
Int(11)
No
Nama
Varchar(50) No
Alamat
Text
No
Text
Telepon
Varchar(25) No
Username
Varchar(30) No
Password
Text
Tabel
Pelanggan
berfungsi
No
No
untuk
menyimpan
datamember .
d.
Tabel Admin
Tabel 3.4Tabel Admin
Nama Field
Type
Null
Id
int(11)
No
Username
Varchar(20) No
password
Text
No
Tabel Admin berfungsi untuk menyimpan data yang
telah menjadi admin pada website ini.
e.
Tabel Transaksi
Tabel 3.5Tabel Transaksi
Nama Field
Type
Null
Notransaksi
Int(11)
No
Username
Varchar(20) No
Status
tinyint(1)
No
Tabel Transaksi berfungsi untuk menyimpan data
transaksi, misalkan pelanggan membeli barang maka
data pelanggan akan tersimpan pada tabel transaksi.
3.6 JST
Berikut adalah gambaran JST dari website“Pemesanan Ayam
Online” :
1.6.1 JST Member
T7
Member
Home
T10
Poduct
T11
Cara Order
T12
About Us
T13
Contact Us
T14
T9
Login
T2
Home
Daftar
T8
T3
Poduct
Cara Order
T4
About Us
T5
Contact Us
T6
T1
Gambar 3.14 JST Member
T1 merupakan halaman utama dari website Pemesanan
Ayam Online, didalamnya terdapat menu – menu. T2
(Home), T3 (Product), T4 (Cara Order ), T5 (About Us),
dan T6 (Contact Us). Pada T2 (Home) akan Login T7
sebagai member T9 dan Member baru T8. T9(member)
akan menampilkan menu yang sama T10 ( Home), T11
(Product), T12 (Cara Order ), T13 (About Us), dan T14
(Contact Us).
1.6.2 JST Admin
Gambar 3.15 JST Admin
T1 merupakan halaman utama login admin, setelah
login maka akan tampil halaman T2 (Menu Admin),
didalamnya terdapat menu – menu yang dapat
diakses oleh admin diantaraya : T3 (Admin), T4
(Produk), T5 (Pemesanan), T6 (Member), dan T7
(Logout).