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
1. Desain halaman Index
LOGO Help
Search Link Menu
Content
Gambar 4.28 : Desain halaman Index
Halaman pertama yang akan terbuka ketika user mengakses url
atau ip address dimana sistem ini berada. Pada bagian atas terdapat header template yang terdiri dari gambar logo
ScienceTech VOD System , form search dan link menu Help.
Header template tersebut akan terdapat pada semua halaman di
sistem ini.
Lalu pada tubuh halaman terdapat link menu dan content yang berupa kalimat sambutan dan overview sistem.
2. Desain halaman Login Admin harus login untuk dapat masuk halaman admin
sedangkan userdosen juga harus login untuk dapat masuk ke halaman user.
Help LOGO
Search Link Menu
LOG IN Username
Password Login
Gambar 4.29 : Desain halaman Login
Login dilakukan dengan memasukkan username pada
kolom username dan password pada kolom password. Setelah itu klik tombol login untuk mengeksekusinya.
3. Desain halaman Admin Melalui halaman ini admin dapat mengatur sistem.
Diantaranya untuk menambah user, menambah sub kategori dan lainnya.
LOGO Help
Search Link Menu Admin
Content
Gambar 4.30 : Desain halaman Admin
Terdapat beberapa menu pada halaman admin ini sesuai dengan fungsi admin. Link-link tersebut adalah Add User, View All
User , Add Sub Category, View All Category dan View Admin
Video .
4. Desain halaman Add User Pada form ini admin dapat menambah user dengan mengisi
user name dan password-nya.
Help LOGO
Search Link Menu
ADD USER Username
Password Add
Gambar 4.31 : Desain halaman Add User
5. Desain halaman Add Sub Category
LOGO Help
Search Link Menu
ADD SUB CATEGORY Sub Category Name
Category
ADD
Gambar 4.32 : Desain halaman Add Sub Category
Form ini digunakan ketika admin ingin menambah sub kategori yang baru. Dilakukan dengan mengisi kolom Sub
Category Name dengan nama sub kategori lalu memilih kategori
dimana sub kategori akan ditempatkan dengan drop down menu.
6. Desain halaman View All User
LOGO Help
Search Link Menu
VIEW ALL USER Daftar User
Gambar 4.33 : Desain halaman View All User
Form ini tampil ketika admin ingin melihat user yang sudah terdaftar dalam sistem. Melalui halaman ini juga admin dapat
mengedit atau menghapusnya.
7. Desain halaman View All Categories Pada halaman View All Categories ini admin dapat
menampilkan daftar sub kategori yang telah dibuat. Admin juga bisa mengedit atau menghapus sub kategori pada halaman ini.
LOGO Help
Search Link Menu
VIEW CATEGORY Kategori 1
Daftar Subkategori Kategori 2
Daftar Subkategori Kategori 3
Daftar Subkategori
Gambar 4.34 : Desain halaman View All Categories
8. Desain halaman User Dosen
Help LOGO
Search Link Menu User
Content
Gambar 4.35 : Desain halaman User
Gambar 4.2 : Desain halaman My Videos 102
Pada halaman ini user dapat menampilkan daftar video yang telah diupload oleh user tersebut. Selain itu terdapat juga link
menu Change Password dimana user dapat merubah passwordnya sendiri.
9. Desain halaman My Videos by admin user
LOGO Help
Search Link Menu
MY VIDEOS Thumbnail
Image Judul Video
Deskripsi Video Tags
Thumbnail Image
Judul Video Deskripsi Video
Tags
Thumbnail Image
Judul Video Deskripsi Video
Tags
Gambar 4.36 : Desain halaman My Videos
User dan admin dapat menampilkan daftar video yang telah
diuploadnya melalui halaman ini. Pada tabel My Videos terlihat thumbnail image video
serta data dari video tersebut seperti judul,
deskripsi dan tags video. Selain itu user atau admin juga dapat mengedit atau menghapus videonya sendiri melalui halaman ini.
10. Desain halaman Change Password User
dapat merubah passwordnya sendiri melalui form Change Password
ini. Dilakukan dengan mengisi kolom password dengan password yang lama dan mengisi kolom new password
dengan password yang baru.
Help LOGO
Search Link Menu User
CHANGE PASSWORD Password
New Password Update
Gambar 4.37 : Desain halaman Change Password
11. Desain halaman Upload Video Melalui form upload video ini user dan admin dapat
mengupload video ke dalam sistem. Langkah pertama adalah dengan mengisi form Upload Video 1. Masukkan judul video pada
kolom title, deskripsi video pada kolom description, kata kunci
pada kolom Tags kata kunci dipisahkan dengan spasi atau tanda koma.
Setelah itu pilih sub kategori dan kategori dimana video akan ditempatkan melalui drop down menu masing-masing.
Setelah selesai klik tombol Next.
LOGO Help
Search Link Menu
Title UPLOAD VIDEO
Description Tags
Categories Sub Categories
Next
Gambar 4.38 : Desain halaman form Upload Video 1
Pada form Upload Video 2, user diminta untuk mengambil file video yang akan diupload dengan menekan tombol browse.
Lalu klik tombol Upload untuk menguploadnya ke dalam sistem. Tunggu beberapa saat sebelum video siap di-play.
LOGO Help
Search Link Menu
UPLOAD VIDEO Browse Video
Browse Upload
Gambar 4.39 : Desain halaman form Upload Video 2
Kecepatan proses upload video tergantung dari spesifikasi komputer server, besarnya ukuran file video dan konfigurasi
jaringan, termasuk traffic jaringan. Video yang dapat di-upload maksimal berukuran 1 GB dan tidak terbatas oleh durasi.
12. Desain halaman Video Pada halaman Video ini semua user baik itu admin, dosen,
mahasiswa atau siapapun yang mengakses sistem dapat menampilkan daftar video yang telah di-upload.
Untuk mem-browse kategori atau sub kategori. Klik link masing-masing sub kategori pada tiap kategori. Maka akan tampil
daftar video yang terdapat pada sub kategori tersebut. Untuk mempermudah, maka ditampilkan data-data videonya seperti judul,
deskripsi, tags hingga ukuran video serta waktu uploadnya. Selain
itu juga ditampilkan thumbnail image untuk mempermudah identifikasi isi video.
LOGO Help
Search Link Menu
Kategori 1
Nama Subkategori
Kategori 2
Kategori 3
Thumbnail Image
Thumbnail Image
Thumbnail Image
Judul Video Deskripsi Video
Tags
Judul Video Deskripsi Video
Tags
Judul Video Deskripsi Video
Tags
Thumbnail Image
Judul Video Deskripsi Video
Tags
Gambar 4.40 : Desain halaman Video
Untuk play video, cukup klik judul video atau thumbnail image
-nya. Setelah itu maka akan muncul video player sehingga user
bisa menontonnya on site terintegrasi dengan browser.
13. Desain halaman Play Video Pada halaman ini terdapat video player untuk play video.
Selain itu juga terdapat informasi dari video yang ditampilkan
seperti judul, deskripsi, user yang melakukan upload, ukuran file video dan waktu upload.
LOGO Help
Search
Link Menu VIDEO PLAYER
Judul Video Deskripsi Video
Gambar 4.41 : Desain halaman Play Video
Untuk video player pada sistem ini, penulis memanfaatkan free media player
yang bernama JW FLV Media Player versi 3.16 http:www.jeroenwijering.com?item=JW_FLV_Player
. Video player
ini memiliki fitur-fitur interaktif seperti fungsi play
, stop dan pause. Progress bar untuk menunjukkan jalannya video dimana user dapat melakukan fast forward dan rewind video,
indikator durasi waktu berjalan progress time dan waktu tersisa remaining time. Selain itu juga terdapat fungsi fullscreen dan
pengaturan volume level.
PLAY VIDEO
00:21 00:09
Vol
Gambar 4.42 : Tampilan JW FLV Media Player
14. Desain halaman Help Halaman ini berisi tentang deskripsi singkat penggunaan
sistem. Diantaranya adalah keterangan user, penjelasan kategori dan sub kategori serta system requirement yang dibutuhkan untuk
menjalankan sistem.
LOGO Help
Search Link Menu
Help Content
Gambar 4.43 : Desain halaman Help
4.4 Code Pengkodean
4.4.1 Kode Program
Pada tahap ini dilakukan aktivitas penulisan kode program untuk prototype aplikasi. Kode program dapat dilihat pada lampiran D.
4.4.2 Perancangan Antarmuka
Pada tahap ini dilakukan aktivitas perancangan antarmuka tampilan untuk navigasi aplikasi dari desain yang telah dibuat. Berikut
beberapa hasil rancangannya :
Gambar 4.44 : Hasil rancangan halaman Play
