T1 562011027 BAB III
13
BAB III
PERANCANGAN SISTEM
3.1 DFD
3.1.1 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
(2)
14 3.1.2 DFD level 1
customer daftar Sign up Data customer Admin
Proses update data Customer Proses Update Data/File Download Proses Hapus Data/File Download Data customer Data customer Data/File baru Update Data/File Data kustomer Data /FIle Data/File
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
(3)
15 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 melakukan transaksi pembayaran.
(4)
16 3.2 DATABASE
3.2.1 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
(5)
17 3.2.3 Database Order
ID INT(11)
USER NAME VARCHAR(100) FIRST NAME VARCHAR(100) LAST NAME VARCHAR(100) KOMEN
ORDER TEXT
LABEL VARCHAR(100)
TGL ORDER DATE
STATUS TEXT
Gambar 3.6database order
Database order merupakan tabel yang menampung
data member yang sudah melakukan order sehingga
(6)
18
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
(7)
19 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
(8)
20 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
(9)
21
- Pada tab download tidak terlalu banyak perubahan,
hanya saja pada panel musik player di tengah
berubah menjadi buttonyang 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 dan halaman menuju
(10)
22 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
(11)
23
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
(12)
24
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
(1)
19
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
(2)
20
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
(3)
21
- Pada tab download tidak terlalu banyak perubahan, hanya saja pada panel musik player di tengah berubah menjadi buttonyang 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 dan halaman menuju home(default)
(4)
22
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
(5)
23
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
(6)
24
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