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
Diagram ini menggambarkan transisi atau perubahan statement yang merupakan keadaan aplikasi yang dipicu oleh adanya aksi yang
dilakukan oleh user dan juga mendeskripsikan reaksi terhadap aksi tersebut. Dengan adanya STD, rancangan akan lebih terperinci karena
fungsi-fungsi setiap objek yang diperlukan telah dideskripsikan melalui STD.
1. STD Upload Video STD Upload Video ini menggambarkan proses upload
video yang hanya dapat dilakukan oleh admin dan user dosen. Berikut deskripsi langkah-langkahnya dengan kondisi dimana
admin dosen telah melakukan login terlebih dahulu : a. Dari halaman utama Home, admin user mengklik link
upload yang menuju ke form upload 1.
Home Klik “Upload”
___ Tampil Form Upload 1
Form Upload 1 Masukkan judul, deskripsi, tags,
Dan pilih kategori dan subkategori Lalu klik “Next”
___ __
Tampil Form Upload 2 Form Upload 2
Klik menu Home __
___ Kembali ke halaman Home
Browse video dari hardisk lokal Lalu klik “Upload”
___ Tamp il Form Play Video
Play Video
Gambar 4.15 : STD Upload Video
b. Pada form Upload 1 ini, admin user memasukkan data atribut dari video yang akan diupload seperti judul,
deskripsi, tag kata kunci serta memilih kategori dan sub kategori dimana video akan ditempatkan. Lalu klik tombol
Next yang menuju form Upload 2.
Gambar 4.16 : Flow Chart proses Upload Video
c. Pada form upload 2, admin user diminta memasukkan file video dengan klik tombol browse dan mengambil file video
yang diinginkan dari storage lokal hardiskflashdisk. Lalu klik tombol Upload.
d. Setelah itu, video akan di-upload dengan menyimpannya pada folder upload di server storage. Lalu video secara
otomatis akan mengalami proses normalisasi dan konversi oleh FFmpeg dan Mencoder, kemudian file hasil konversi
tersimpan pada folder yang lain yaitu folder flvfiles. Selain itu FFmpeg juga melakukan screen capture pada video
dengan mengambil data still image dengan ukuran 120 x 90 pixel untuk digunakan sebagai thumbnail pada menu
tampilan video.
Gambar 4.17 : File asli tersimpan pada folder upload
Gambar 4.18 : File yang telah dikonversi tersimpan pada folder flvfiles
Gambar 4.19 : Thumbnail image dari video yang di-upload disimpan pada folder thumb
Sementara itu data teknis video seperti nama file, ukuran file, dan waktu upload di-inject oleh Flvtool ke dalam
database .
Tabel 4.5 : Atribut yang di-inject ke dalam database oleh FLV Tool
2. STD Edit dan Delete Video oleh User Dosen Dalam STD Edit dan Delete Video ini digambarkan proses
edit serta delete video yang dilakukan oleh dosen. Tentu proses ini
dapat berlangsung dengan kondisi dimana pada aplikasi sudah terdapat file video yang telah di-upload oleh dosen tersebut.
Berikut deskripsi langkah-langkahnya : a. Login sebagai user dosen.
b. Dari halaman utama Home dosen, dosen mengklik link View my videos
yang menuju halaman untuk menampilkan seluruh video yang telah diupload dosen tersebut.
c. Dibawah kolom judul dan deskripsi masing-masing video, terdapat link Edit dan Delete.
d. Untuk menghapus video, cukup klik link Delete maka video akan terhapus dari sistem.
e. Untuk mengedit video, klik link Edit yang akan menuju form Edit Video yang memiliki tampilan persis seperti form
Upload 1. Pada form ini dosen dapat mengedit atribut-
atribut dari video tersebut seperti judul, deskripsi, tag dan kategori serta kategorinya.
Gambar 4.20 : STD Edit dan Delete Video oleh User
3. STD Edit dan Delete Video oleh Admin Dalam STD Edit dan Delete Video ini digambarkan proses
edit serta delete video yang dilakukan oleh admin. Berbeda dengan
dosen yang hanya bisa mengedit dan menghapus video yang telah diupload oleh dosen itu sendiri, admin memiliki hak penuh untuk
mengedit dan menghapus semua video yang telah diupload ke sistem. Tentu proses ini juga hanya dapat berlangsung dengan
kondisi dimana pada sistem sudah terdapat file video yang telah diupload .
Berikut deskripsi langkah-langkahnya : a. Login sebagai admin.
Gambar 4.21 : STD Edit dan Delete Video oleh Admin
b. Dari halaman utama Home admin, admin mengklik link Video
yang menuju halaman untuk menampilkan seluruh video yang telah diupload ke dalam sistem.
c. Dibawah kolom judul dan deskripsi masing-masing video, terdapat link Edit dan Delete.
d. Untuk menghapus video, cukup klik link Delete maka video akan terhapus dari sistem.
e. Untuk mengedit video, klik link Edit yang akan menuju form Edit Video yang memiliki tampilan persis seperti form
Upload 1. Pada form ini admin dapat mengedit atribut-
atribut dari video tersebut seperti judul, deskripsi, tag dan kategori serta kategorinya.
4. STD Add User STD Add User ini menggambarkan proses dimana admin
membuat user baru. Berikut deskripsi langkah-langkahnya : a. Login sebagai admin.
b. Dari halaman utama Home admin, admin mengklik link Add User
yang menuju form Add User. c. Lalu admin memasukkan data username dan password
dosen. Setelah itu klik tombol Add lalu data dosen masuk ke dalam tabel user. Sistem redirect ke halaman home
admin
Gambar 4.22 : STD Add User
5. STD Edit dan Delete User Dalam STD Edit dan Delete User ini digambarkan proses
edit serta delete user yang dilakukan oleh admin. Admin memiliki
hak penuh untuk mengedit dan menghapus semua data user yang telah dibuat oleh admin sebelumnya. Proses ini juga hanya dapat
berlangsung dengan kondisi dimana pada sistem sudah terdapat data user.
Berikut deskripsi langkah-langkahnya : a. Login sebagai admin.
b. Dari halaman utama Home admin, admin mengklik link View All User
yang menuju halaman untuk menampilkan seluruh user yang telah terdaftar dalam sistem.
Gambar 4.23 : STD Edit dan Delete User
c. Terdapat kolom link Edit dan Delete pada daftar seluruh user
. d. Untuk menghapus user, admin cukup mengklik link Delete.
Maka data user akan terhapus dari sistem
e. Untuk mengedit user, klik link Edit yang akan menuju ke form Edit User.
f. Pada form Edit User ini admin dapat merubah username dan password user lalu klik tombol Update untuk
mengeksekusinya.
6. STD Change Password by User Dalam STD Change Password ini ini digambarkan proses
merubah password yang dilakukan oleh user dosen. Hal ini dilakukan demi kenyamanan dan keamanan dosen dalam
mengakses sistem karena password dosen awalnya dibuat oleh admin.
Berikut deskripsi langkah-langkahnya. a. Login sebagai user dosen
b. Dari halaman utama Home dosen, dosen mengklik link Change Password
yang menuju form change password. c. Pada form change password, dosen dapat merubah
password- nya dengan cara memasukkan password yang
lama pada kolom password lalu memasukkan password yang baru pada kolom new password.
d. Lalu klik tombol Update untuk mengeksekusinya.
Home Login s ebagai User
_ _
Tampil Halaman User
User Page Klik “Change Password”
_ _
Tampil Form Change Pass word
Masuk kan pass word lama dan pass word baru
Klik “Update” ___
___ Kembali k e halaman
user Change Password
Gambar 4.24 : STD Change Password
7. STD Add Sub Category STD Add Sub Category ini menggambarkan proses dimana
admin membuat sub kategori baru. Dilakukan ketika admin telah login
ke dalam sistem. Berikut deskripsi langkah-langkahnya :
a. Login sebagai admin. b. Dari halaman utama Home admin, admin mengklik link
Add Sub Category yang menuju form Add Sub Category.
c. Pada form Add Sub Category, admin memasukkan nama sub kategori yang diinginkan lalu memilih kategori dimana
sub kategori itu akan ditempatkan. d. Klik tombol Add, maka data sub kategori akan masuk ke
dalam tabel sub kategori. e. Sistem redirect ke halaman home admin.
Gambar 4.25 : STD Add Sub Category
8. STD Edit dan Delete Sub Category Dalam STD Edit dan Delete Sub Category ini digambarkan
proses edit serta delete sub kategori yang dilakukan oleh admin. Admin memiliki hak penuh untuk mengedit dan menghapus semua
data sub kategori yang telah dibuat oleh admin sebelumnya. Berikut deskripsi langkah-langkahnya :
a. Login sebagai admin. b. Dari halaman utama Home admin, admin mengklik link
View All Categories yang menuju halaman untuk
menampilkan seluruh sub kategori dan kategori yang telah terdaftar dalam sistem.
Gambar 4.26 : STD Edit dan Delete Sub Category
c. Terdapat kolom link Edit dan Delete pada daftar seluruh sub kategori.
d. Untuk menghapus sub kategori, admin cukup mengklik link Delete
. Maka data sub kategori akan terhapus dari sistem e. Untuk mengedit sub kategori, klik link Edit yang akan
menuju ke form Edit Sub Category. f. Pada form Edit Sub Category ini admin dapat merubah
nama sub kategori dan kategori dimana sub kategori ditempatkan. Setelah itu klik tombol Update untuk
mengeksekusinya.
9. STD Search
Gambar 4.27 : STD Search
Dalam STD Search ini digambarkan proses pencarian video dalam sistem. Pencarian video dapat dilakukan berdasarkan
beberapa indikator yaitu : judul, deskripsi, dan tags video. Selain itu pencarian juga dapat dilakukan berdasarkan user yang meng-
upload video.
4.3.5 Desain Antarmuka
