6 dan disebut juga sebagai bahasa untuk menggambarkan sistem. UML Unified
Modeling Language akan digambarkan dengan menggunakan bagan alir sistem yang menunjukkan bagaimana sistem secara fisik nantinya akan ditempatkan dan
diterapkan sehingga dapat menunjukkan arah aliran data suatu proses.
3. Customer Test Drive
Setelah prototype selesai dirancang maka tahap selanjutnya adalah melakukan evaluasi prototype, pada tahap ini user mengevaluasi prototype yang
telah dibuat. Evaluasi ini akan digunakan untuk memperjelas kebutuhan program. Jika tujuan umum yang telah dibuat di tahap paling awal belum tercapai, maka
proses perbaikan dimulai kembali dari tahap awal dan dilanjutkan ke tahap berikutnya. Proses ini berakhir setelah tujuan umum telah tercapai.
Pada prototype yang pertama, aplikasi ini hanya dapat dijalankan pada sisi server. aplikasi prototype yang pertama ini juga belum memiliki playlist dan
upload sehingga hanya dapat menjalankan satu file video. Prototype yang pertama ini juga berfungsi untuk mengetahui bahwa aplikasi ini hanya dapat berjalan pada
browser yang mendukung HTML5.
Prototype kedua berupa aplikasi client, akan tetapi fasilitas drag and drop belum bisa berfungsi.
4. Perancangan Sistem
Perancangan sistem yang digunakan adalah Unified Modelling Language UML. Unified Modelling Language UML adalah sebuah bahasa yg telah
menjadi standar
dalam industri
untuk visualisasi,
merancang dan
mendokumentasikan sistem piranti lunak [11]. Use Case Diagram
Use case diagram menggambarkan fungsionalitas yang diharapkan dari sebuah sistem yang menjelaskan keseluruhan kerja sistem secara garis besar
dengan mempresentasikan interaksi antara aktor yang dibuat, serta memberikan gambaran fungsi-fungsi pada sistem tersebut. Lebih jelasnya dapat dilihat pada
Gambar 2.
Gambar 2 Use Case Diagram Video player.
Pada aplikasi ini hanya terdapat satu user yang dapat mengakses secara langsung media playlist. Media playlist mempunyai tiga extend, yaitu video file
path, drag and drop playlist item dan add video. Video file path digunakan untuk memberikan alamat dari file video yang ingin ditambahkan didalam playlist. Drag
and drop playlist item digunakan untuk menghapus file video yang ada di playlist
Play Pause Previous
Next Stop
Capture View Video
Mengatur Volume Add Video
Control Video extend
extend extend
extend extend
extend include
Media Playlist extend
User Video File Path
Drag and Drop Playlist Item extend
extend
Drag and Drop Control Video extend
7 dengan cara drag and drop. Add video adalah fasilitas untuk menambahkan video
setelah user mengisikan video file path. Selain media playlist, user juga dapat mengakses secara langsung control video. Control video mempunyai satu include,
yaitu view video yang digunakan sebagai layar untuk menampilkan video. Control video juga mempunyai tujuh extend, yaitu PlayPause, Stop, Capture, Previous,
Next, Mengatur Volume, dan Drag and Drop Control Video. Play berfungsi untuk memulai memutar video, sedangkan pause digunakan untuk menghentikan
sementara dan dapat dilanjutkan kembali pada current time yang sama. Play dan Pause jadi satu karena ketika video belum diputar maka tidak akan ada yang akan
Pause, begitu juga sebaliknya. Stop digunakan untuk menghentikan video yang diputar dan mereset current time video, sehingga video akan kembali ke awal.
Capture as image digunakan untuk mengambil gambar video. Previous digunakan user ketika ingin memutar video sebelumnya yang ada di playlist. Next berfungsi
untuk memutar video yang selanjutnya. Mengatur volume digunakan user untuk mengatur besar kecilnya suara yang diinginkan. Drag and Drop Control Video
berfungsi untuk memindahkan control video ke area yang sudah disediakan. Activity Diagram Add Video
Pada activity diagram ini akan dijelaskan bagaimana cara menambahkan video pada playlist. Untuk lebih jelasnya dapat dilihat pada Gambar 3.
Gambar 3 Activity Diagram Add Video.
Pertama-tama user membuka Home Page aplikasi video player, setelah itu user harus mengisikan Video File Path yang merupakan alamat file video yang
akan ditambahkan pada playlist. Hal ini disebabkan karena pada aplikasi client terdapat perlindungan keamanan untuk mengakses langsung data-data pengguna
secara manual. Setelah user mengisikan Video File Path, maka untuk mengeksekusi user melakukan Add to Playlist. Dengan demikian file video yang
diinginkan akan ditambahkan pada Media Playlist. Activity Diagram Play Video
Pada activity diagram ini akan dijelaskan bagaimana cara memutar video pada aplikasi web video player. Berikut ini adalah gambar Activity Diagram Play
Video.
Start
End Home Page
Video File Path
Add to Playlist Media Playlist
VideoPlayer User
8
Gambar 4 Activity Diagram Play Video.
Activity diagram play video dimulai dengan user membuka Home Page, yang mana terdapat Media Playlist yang berisi nama dari video yang akan diputar.
User memilih video yang ada pada media playlist dengan cara klik dua kali, maka video akan diputar pada view video. Setelah itu user dapat melakukan mengatur
volume, playpause, stop, previous, next yang termasuk dalam control video. Activity Diagram Drag and Drop Control Video
Pada activity diagram ini akan dijelaskan tentang fasilitas drag and drop control video . Berikut ini adalah gambar Activity Diagram Control Video.
Gambar 5 Activity Diagram Drag and Drop Video.
Sequence Diagram Add Video
Pada sequence diagram ini akan dijelaskan langkah-langkah untuk menambahkan video pada playlist. Berikut adalah gambar Sequence Diagram Add
Video.
Start
End Home Page
Media Playlist
View Video Klik Nama File
Ya Tidak
Next Stop
Control Video Previous
Capture PlayPause
Volume
VideoPlayer User
Start
End Home Page
Control Video PlayPause
Stop
Mengatur Volume
Previous Next
Drag and Drop Control Video
Capture
VideoPlayer User
9
Gambar 6 Sequence Diagram Add Video.
Sequence Diagram Play Video
Pada sequence diagram ini akan dijelaskan langkah-langkah untuk memutar video pada playlist. Berikut adalah gambar Sequence Diagram Play Video.
Gambar 7 Sequence Diagram Play Video.
Langkah pertama yang dilakukan oleh user membuka Home Page, lalu mengisikan alamat file video yang ingin ditambahkan ke dalam teks box File
Video Path. Selanjutnya untuk melakukan mengeksekusi path file dilakukan Add to Playlist yang merupakan control. Setelah itu file video akan ditambahkan pada
media playlist.
: User : Home Page
: Media Playlist
: Play Video : Control Video
Browse Pilih File Video
Klik kiri Playing Video
Pilih Pause, Next, Previous, Capture, Stop, volume control Respond
close
: User : Home Page
File Video Path Add to Playlist : Control
Video : Media
Playlist Browse
Mengisi teks box Menunggu eksekusi
Mengeksekusi Menambahkan File Video
Menunggu dari control video Close
10
5. Hasil dan Pembahasan
