3.1 DFD 3.1.1 DFD level 0 BAB III PERANCANGAN SISTEM 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 daftar Sign up Data customer Admin Data customer Proses update data Customer 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 melakukan transaksi pembayaran. 15
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 halaman tentang artikel. 16
3.2.3 Database Order ID USER NAME FIRST NAME LAST NAME KOMEN ORDER LABEL TGL ORDER STATUS INT(11) VARCHAR(100) VARCHAR(100) VARCHAR(100) TEXT VARCHAR(100) DATE 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 dan halaman menuju home(default) 21
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