BAB III PERANCANGAN SISTEM 3.1 3.1.1
DFD DFD level 0
Gambar 3.1 DFD level 0 sistem web
DFD level 0 ini dijelaskan bahwa disini customer dapat login, menerima data order serta data konfirmasi dan menerima info login, info order dari sistem.
Sedangkan admin dapat melakukan data
login, data download, order, serta data customer dan mendapatkan info login, info order, info customer dari sistem.
13
3.1.2
DFD level 1 Data customer
customer
Data customer
daftar
Sign up
Data customer
Proses update data Customer
Admin
Data kustomer
Data /FIle
Data/File baru
Proses Update Data/File Download
Data/File
Update Data/File
Proses Hapus Data/File Download
Gambar 3.2 DFD level 1 sistem web
DFD Level 1 ini merupakan penjabaran dari DFD Level 0, pada diagram ini dijelaskan, admin dapat melakukan add, edit, dan delete file download. Sedangkan customer harus login untuk dapat melakukan order yang pada web ini.
14
3.1.3
Flowchart
Gambar 3.3 Flowchart system web
Flowchart ini menjelaskan alur dari sistem, user dapat mengakses home kemudian login/daftar, setelah itu user dapat melakukan order setelahnya hingga admin memberikan respon dan memberikan link
download
setelah
pembayaran. 15
melakukan
transaksi
3.2 3.2.1
DATABASE Database Member ID
INT(11)
USER NAME
VARCHAR(200)
PASSWORD
VARCHAR(200)
FIRST NAME
VARCHAR(200)
LAST NAME
VARCHAR(200)
EMAIL
VARCHAR(100)
TANGGAL
VARCHAR(200)
DOWNLOAD
TEXT
Gambar 3.4 database member
Database
member
merupakan
tabel
yang
menampung data member.
3.2.2
Database Artikel ID
INT(11)
JUDUL
TEXT
ISI
TEXT
ISI2
TEXT
TANGGAL
DATE Gambar 3.5database artikel
Database artikel merupakan tabel yang menampung data artikel yang akan di cantumkan dalam panel dibawah form login ketika dibuka akan membuka halaman tentang artikel.
16
3.2.3
Database Order ID
INT(11)
USER NAME
VARCHAR(100)
FIRST NAME
VARCHAR(100)
LAST NAME KOMEN ORDER
VARCHAR(100)
LABEL
VARCHAR(100)
TGL ORDER
DATE
STATUS
TEXT
TEXT Gambar 3.6database order
Database order merupakan tabel yang menampung data member yang sudah melakukan order sehingga semua data akan masuk kedalam database.
17
3.3
LEMBAR KERJA TAMPILAN
3.3.1 Tampilan Login
Gambar 3.7 rancangan tampilan login
- Pada bagian kiri atas home terdapat panel form LOGIN USER - Button login menuju ke menu utama pada web yang akan masuk ada home akun.
3.3.2 Tampilan Sign Up
Gambar 3.8rancangan tampilan sign up
- Pada halaman home terdapat tab sign up - Customer dapat mendaftar guna menjadi akun supaya dapat melakukan order dengan mengisi beberapa data seperti pada gambar diatas - Klik submit untuk melanjutkan 18
3.3.3 Tampilan Home
Gambar 3.9 rancangan Tampilan home
- Pada header terdapat nama website - Terdapat beberapa tab untuk mengakses beberapa halaman yaitu home(default), profile, sample, download, sign up - Form login terdapat pada kiri atas dibawah menu tab - Panel kanan terdapat icon sosial media yang jika di klik akan redirect ke halaman sosial media admin
19
3.3.4 Tampilan Sample
Gambar 3.10rancangan tampilan sample
- Pada tab sample tidak terlalu banyak perubahan, hanya saja terdapat panel musik player di tengah halaman tersebut - Dibawah musik player terdapat button Order Now, jika diklik akan melanjutkan ke halaman sign up karena customer hanya bisa melakukan order ketika sudah memiliki akun ada website tersebut.
3.3.5 Tampilan Download
Gambar 3.10rancangan tampilan download disable
20
- Pada tab download tidak terlalu banyak perubahan, hanya saja pada panel musik player di tengah berubah menjadi button yang bertuliskan “only user can download the sound. Please sign up/login”, jika di klik akan menghubungkan ke halaman sign up.
Gambar 3.11rancangan tampilan downloadable
- Pada tampilan ini adalah halaman download pada akun member, musik player tersedia berserta button download yang ada ditengah pojok kanan atas. - Pada form dibawah tab home, terdapat button logout
untuk
keluar
home(default)
21
dan
halaman
menuju
3.3.6 Tampilan Admin
Gambar 3.12rancangan tampilan admin
- Pada halaman admin ini terdapat tabel dimana admin dapat melihat keterangan akun yang sudah menjadi member, terdapat button detil dan hapus pada tabel tersebut
22
3.3.7 Tampilan Order pada Halaman menu Admin
Gambar 3.13rancangan tampilan order admin
- Admin dapat melihat detail order melalui halaman order, terdapat combo box pada kolom Action guna untuk merespon pesanan dan memiliki opsi “Menunggu
Respon”
(default)
dan
“Siap
Download” - Terdapat button simpan dan hapus pada tabel tersebut
23
3.3.8 Tampilan Order melalui Akun Member
Gambar 3.14 tampilan order dari member
- Pada
bagian
ini,
member
dapat
melakukan
pemesanan melalui textbox yang ada dengan mengetikkan deskripsi yang diinginkan, lalu button kirim berguna untuk melanjutkan dan button reset untuk membersihkan field textbox
24
