4.3 Design Perancangan
Setelah tahap analisis selesai, maka selanjutnya adalah merancang aplikasi yang telah didefinisikan sebelumnya. Pada tahap perancangan ini ini
penulis melakukan aktivitas pemodelan proses, pemodelan data, perancangan struktur menu, perancangan state transition diagram dan
perancangan antarmuka program.
4.3.1 Process Modelling Pemodelan Proses
1. Diagram Konteks
Gambar 4.2 : Diagram Konteks
Pada tahap ini dilakukan pemodelan proses yang akan ditampilkan dalam bentuk Data Flow Diagram DFD.
Pada diagram konteks, aplikasi hanya digambarkan dengan sebuah proses, kemudian entitas luar yang berinteraksi dengan
proses tunggal diidentifikasi. Didapatkan dua entitas luar, yaitu dosen dan mahasiswa.
2. Diagram Nol Overview
Gambar 4.3 : Diagram Nol
Pada diagram nol ini, proses tunggal dari diagram konteks dipecah menjadi dua proses yang lebih terperinci, yaitu proses
input data dosen dan upload video. Dari dua proses tersebut
dihasilkan dua data yakni data dosen dan data video.
3. Diagram Rinci Level 1 Pada diagram rinci level 1 ini, proses upload video
diperinci menjadi dua proses, yaitu proses input data video dan proses upload file video. Dalam level ini juga didapatkan dua
penyimpanan data, yaitu tabel video untuk menyimpan data-data video dan folder file video untuk menyimpan file video yang di-
upload .
dosen Video
Data V ideo
2.1 Input Data
Video 2.2
Upload File Video
Data Video 2 File Video
Tb Video File Video
yang diupload
Gambar 4.4 : Diagram Rinci Level 1
4. Diagram Rinci Level 2 Pada diagram rinci level 2 ini, proses upload file video
lebih diperinci lagi menjadi tiga proses, yaitu proses upload video, proses normalisasi video dan proses konversi video.
Normalisasi video adalah proses dimana video yang di- upload
mengalami normalisasi bit rate untuk disesuaikan dengan format file baku pada sistem yaitu flv, sedangkan konversi video
adalah proses dimana terjadi perubahan format dari format file yang telah di-upload menjadi satu format baku flv.
Gambar 4.5 : Diagram Rinci Level 2
4.3.2 Data Modelling Pemodelan Data
Pada tahap ini dilakukan perancangan basis data. Perancangan basis data akan dijelaskan dengan Entity Relationship Diagram ERD,
lalu atribut-atribut dari masing-masing entitas akan digambarkan dengan screencapture tabel database pada sistem. Sebelum itu dilakukan terlebih
dahulu proses normalisasi.
4.3.2.1 Normalisasi
1. Unnormalized Form
Gambar 4.6 : Bentuk tidak normal
2. First Normal Form 1NF
Gambar 4.7 : Bentuk normal pertama
Pada normalisasi tahap pertama ini, atribut bersifat atomik tidak dapat dibagi menjadi atribut-atribut yang lebih kecil dan
bersifat tunggal.
video
PK id_video
FK1 FK2
judul deskripsi
tag nama_file
ukuran_file waktu_upload
id_kategori id_user
kategori
PK id_kategori
kategori subkategori
3. Second Normal Form 2NF Pada normalisasi bentuk ke-dua ini, disyaratkan semua
atribut untuk memenuhi bentuk normal pertama dan semua atribut bukan kunci hanya bergantung pada atribut kuncinya.
user
PK id_user
username password
group
Gambar 4.8 : Bentuk normal kedua
4. Third Normal Form 3NF Pada normalisasi bentuk ke-tiga ini, disyaratkan semua
atribut untuk memenuhi bentuk normal kedua dan semua atribut bukan kunci tidak bergantung pada atribut kunci lainnya.
Gambar 4.9 : Bentuk normal ketiga
4.3.2.2 Entity Relationship Diagram
Berdasarkan proses normalisasi di atas, maka didapat rancangan ERD sebagai berikut :
Gambar 4.10 : Entity Relationship Diagram
4.3.2.3 Database Table
Berikut ini rancangan tabel–tabel pada database beserta atributnya masing-masing :
1. Tabel User Tabel 4.1 : Tabel User
2. Tabel Video
3. Tabel Kategori Tabel 4.2 : Tabel Video
4. Tabel Subkategori Tabel 4.3 : Tabel Kategori
Tabel 4.4 : Tabel Subkategori
4.3.3 Perancangan Struktur Aplikasi
Dalam ScienceTech VOD System ini terdapat lima page pada halaman index. Yaitu halaman home, video, upload, login , dan help.
Berikut adalah gambaran secara hierarkinya 1. Rancangan struktur menu utama.
Pada struktur menu utama terdapat 4 link utama yaitu Home
, Video, Upload dan Login serta link Help sebagai petunjuk penggunaan aplikasi ini.
Gambar 4.11 : Struktur menu utama
2. Rancangan struktur menu halaman Admin. Pada struktur menu halaman admin terdapat terdapat 5 link
utama yang menggambarkan fungsi-fungsi admin dalam mengatur aplikasi yaitu Add User, View All User, Add Sub Category, View
All Category , dan View Admin Videos.
Pada menu Add User, admin dapat menambah user baru ke dalam aplikasi, sedangkan pada menu View All User admin dapat
melihat daftar user yang sudah terdaftar lalu admin dapat menghapus atau mengedit user tersebut.
Gambar 4.12 : Struktur menu admin
Pada menu Add Sub Category, admin dapat menambah sub kategori baru ke dalam aplikasi, sedangkan pada menu View All
Categories admin dapat melihat daftar sub kategori yang sudah
terbentuk lalu admin dapat menghapus atau mengedit sub kategori tersebut.
Admin juga dapat meng-upload video melalui menu Upload
Video dan selain itu admin dapat memanipulasi semua data video pada aplikasi, mulai dari melihat semua video yang telah di-
upload oleh semua user pada menu Video dan juga mengedit atau
menghapusnya dari aplikasi melalui menu yang sama.
3. Rancangan struktur menu halaman user dosen. Struktur menu halaman user ini tidak jauh berbeda dengan
admin. User dapat melakukan Upload Video melalui menu Upload. Hanya saja, user cuma bisa mengatur video yang diupload oleh
user itu sendiri, misalnya user hanya bisa mengedit dan menghapus
video yang di-upload-nya sendiri. Selain itu user juga bisa merubah passwordnya sendiri. Karena pada awalnya password
user diberikan oleh admin.
HOME USER
VIEW ALL VIDEOS
VIEW MY VIDEOS CHANGE
PASSWORD UPLOAD VIDEO
LOGOUT
CHOOSE S UB CATEGORY
PLAY VIDEO
PLAY VIDEO EDIT VIDEO
DELETE VIDEO
Gambar 4.13 : Struktur menu user
4. Rancangan struktur menu halaman video Rancangan struktur halaman video ini menggambarkan
fungsi yang bisa dilakukan oleh mahasiswa atau siapapun yang mengakses aplikasi ini tanpa login.
Gambar 4.14 : Struktur menu video
4.3.4 State Transition Diagram STD
Kategori