BAB III ANALISA DAN PERANCANGAN APLIKASI PUBLIKASI DIGITAL 3.1 Analisa Masalah dan Alternatif Pemecahan Masalah Pada penulisan tugas akhir ini akan di analisa mengenai masalah dalam penggabungan video dengan animasi teks berjalan dalam satu layout saja menggunakan program Java. Adapun permasalahan yang akan dipecahkan dalam format file video yang digunakan dalam penggabungan video dengan animasi teks berjalan ini. 3.1.1 Analisa Masalah Media dalam penggabungan video dengan animasi teks berjalan sudah banyak dilihat pada berita di TV saat ini. Namun proses untuk menyampaikan audio visual pada TV tidaklah praktis, karena hal ini harus melalui proses panjang dengan melalui berbagai perangkat yang akhirnya digabungkan dengan satu jalur saja. Perusahaan media yang menyiarkan acara TV memiliki kamera video broadcast, pencahayaan, peralatan audio, peralatan efek khusus dan peralatan editing. Perusahaan menggunakan keadaan peralatan produksi seni untuk memproduksi program TV dan film, termasuk atas baris "HD" High Definition sistem editing (www.infotv.com). Disini akan dirancang sebuah aplikasi publikasi digital, dimana dalam aplikasi ini adanya penggabungan antara video player dengan animasi teks berjalan dapat lebih praktis dikarenakan tidak melalu proses yang rumit pada umumnya saat ini. Untuk menggabungkan video player dengan animasi teks berjalan diperlukan adanya sebuah software pendukung yaitu Java. Java sendiri mempunyai keunggulan dalam mendukung berbagai konten multimedia, dimana aplikasi yang akan berjalan dapat lebih mudah, murah dan tidak bergantung pada platform manapun jika menggunakan Java. 31

32 Penggambaran dari konsep aplikasi ini yaitu suatu aplikasi publikasi digital dimana adanya video player dan animasi teks berjalan yang akan digabungkan menjadi satu dalam sebuah tampilan. Kemudian dalam tampilan tersebut terdapat sebuah fitur yang menampilkan adanya tampilan awal aplikasi dalam pengaturan video dan animasi teks berjalan. Di dalam tampilan awal juga terdapat pemilihan hari, dimana hari tersebut menentukan berjalannya aplikasi ini. Adapun masalah yang dihadapi dalam memasukan format file video, dimana dalam penggabungan video player dengan animasi teks berjalan ini membutuhkan banyak format file video. Namun Java sendiri mampu mengkoneksikan dirinya dengan aplikasi lain. Seperti contohnya koneksi ke dalam database, hal ini tidak menutup kemungkinan dalam pengkoneksian ke dalam aplikasi lainnya. Disini vlcj dicoba untuk dikoneksikan dengan Java. Vlcj dipilih dikarenakan project open source yang menyediakan Java Binding baik untuk VLC media player dari videolan. 3.1.2 Pemecahan Masalah Format file video yang pada umumnya digunakan dapat ditemukan dalam VLC media player. VLC sendiri mempunyai keunggulan dalam kelengkapan codec format file video dengan kata lain, VLC dapat memutar hampir semua jenis format video. Hal ini yang menjadi acuan dalam pemutaran video ke dalam aplikasi yang dibuat. Berdasarkan hal diatas, maka dapatlah dibuat video dengan animasi teks berjalan dengan menggunakan Java yang dikoneksikan ke vlcj. Hal itu dikarenakan dalam vlcj juga terdapat binding yang digunakan dalam membangun media player client dan perangkat lunak server menggunakan Java. Java binding diberikan oleh vlcj hampir ke semua fungsi asli yang diberikan melalui libvlc, tetapi juga bisa mendapatkan lebih dari itu. Gambar 3.1 berikut ini akan menggambarkan sedikit tentang konsep penggabungan VLC dengan Java.

33 vlcj-2.4.1 VLCJ VLC libvlc FormAwal.java FormDelete.java FormDeleteTeks.java FormEditData.java FormEditTeks.java FormTambahData.java FormTambahTeks.java Java Gambar 3.1 Konsep Penggabungan VLC dengan Java 3.1.3 Analisa Konsep Layout Untuk melakukan penggabungan dalam media video dengan animasi teks berjalan diperlukan adanya suatu interface. Interface ini menentukan bagaimana komponen-komponen dalam Container ataupun turunannya (seperti Panel) secara dinamis diatur. Di dalam kelas Container sendiri mendefinisikan metode bernama setlayout() yang ditujukan untuk mengatur tata letak komponen-komponen. Layout dipilih dalam media interface untuk aplikasi ini dikarenakan dalam Java sendiri telah menyediakan kelas Container yang dapat mengatur tata letak dari komponen yang dibutuhkan. Untuk layout pada penelitian ini dipakai layout pada GroupLayout. Dimana dalam GroupLayout ini dapat menggabungkan dari beberapa layout yang ada menjadi satu tampilan yang diinginkan, seperti tampilan dari video, animasi teks berjalan dan juga jam digital yang ditampilkan menjadi satu. 3.1.4 Analisa Sistem Penyeleksian Hari Pada aplikasi publikasi digital, terdapat Form Tambah Video, Edit Video, Tambah Teks, dan Edit Teks, dimana empat form tersebut terdapat kotak pilihan penyeleksian hari yang berfungsi untuk menyesuaikan hari pada aplikasi dengan

34 penetapan hari pada PC atau Laptop yang telah terinstall dalam aplikasi publikasi digital. Video player dan animasi teks berjalan akan muncul apabila tidak salah dalam menentukan hari yang terdapat pada kotak penyeleksian hari pada aplikasi dengan penetapan hari pada komputer yang kita pakai (sesuai dengan pengaturan tanggal pada komputer). 3.2 Perancangan Sistem dengan UML Untuk merancang aplikasi ini, digunakan pemodelan use case diagram, activity diagram, sequence diagram dan rancangan antar muka. Pemodelanpemodelan tersebut digunakan dengan tujuan agar perancangan aplikasi ini dapat sesuai dengan kebutuhan-kebutuhan yang sebelumnya di analisa, sehingga aplikasi pun dapat berjalan sesuai dengan yang diharapkan. 3.2.1 Perancangan Use Case Diagram Use case diagram mendeskripsikan interaksi tipikal antara para pengguna sistem dengan sistem itu sendiri, dengan memberi sebuah narasi tentang bagaimana sistem tersebut digunakan (Fowler, 2005). Diagram ini menunjukan fungsionalitas suatu sistem dan bagaimana sistem berinteraksi dengan dunia luar. Use case diagram aplikasi video dan teks berjalan dapat dilihat pada gambar 3.2

35 System Atur Video Atur Teks User Mainkan Video dan Teks Gambar 3.2 Use case aplikasi video dan teks berjalan Penjelasan dari use case gambar 3.2 adalah sebagai berikut : Tabel 3.1 Skenario Use Case Atur Video Nama Use Case Atur Video Deskripsi singkat Pada use case ini aplikasi akan menampilkan pengaturan video Actor Pengguna Pra kondisi Aplikasi sudah dijalankan Tindakan utama 1. Aplikasi akan menampilkan penambahan data video player 2. Aplikasi akan menampilkan pemilihan hari Pasca kondisi Apabila use case berhasil dijalankan, maka pengguna dapat mengatur video

36 Tabel 3.2 Skenario Use Case Atur Teks Nama Use Case Atur Teks Deskripsi singkat Pada use case ini aplikasi akan menampilkan pengaturan teks Actor Pengguna Pra kondisi Aplikasi sudah dijalankan Tindakan utama 1. Aplikasi akan menampilkan pengaturan teks 2. Aplikasi akan menampilkan pemilihan hari Pasca kondisi Apabila use case berhasil dijalankan, maka pengguna dapat mengatur isi teks Tabel 3.3 Skenario Use Case Mainkan Video dan Teks Nama Use Case Mainkan Video dan Teks Deskripsi singkat Pada use case ini aplikasi akan memainkan video dan teks yang sudah diatur sebelumnya sesuai dengan hari yang sama dengan komputer atau laptop Actor Pengguna Pra kondisi Aplikasi sudah dijalankan Tindakan utama 1. Aplikasi akan menampilkan mainkan video dan teks Pasca kondisi Apabila use case berhasil dijalankan, maka pengguna dapat memainkan video dan teks

37 3.2.2 Perancangan Activity Diagram Activity Diagram menunjukan langkah demi langkah untuk melakukan komputasi. Setiap langkah adalah sebuah keadaan dalam melakukan sesuatu. Diagram ini menggambarkan langkah mana yang harus dijalankan secara berurutan dan langkah mana yang bisa dijalankan secara bersama. Pada gambar 3.3, 3.4 dan 3.5 menjelaskan tentang perancangan activity diagram untuk halaman menu. 3.2.2.1 Perancangan Activity Diagram Tambah Video Pada Aplikasi Publikasi Digital Gambar 3.3 Activity Diagram Tambah Video pada Aplikasi Publikasi Digital Pada activity diagram tambah video diatas, proses aplikasi publikasi digital yang sedang berjalan yaitu dengan tampilan awal aplikasi kemudian tekan tambah video maka sistem akan menampilkan aplikasi penambah data video dan hari. Pilih video sesuai format yang diinginkan dan juga pilih hari pada saat itu. Sistem akan

38 mengecek hari yang sesuai dengan komputer atau laptop. Jika hari yang dipilih tidak sesuai, maka akan muncul tampilan pesan kesalahan, dan sistem akan kembali pada tampilan awal aplikasi. Tetapi, jika hari yang dipilih sesuai, maka sistem akan keluar. 3.2.2.2 Perancangan Activity Diagram Tambah Teks Pada Aplikasi Publikasi Digital User System Buka Aplikasi Tampilkan Aplikasi Awal Tekan Tambah Teks Tampilkan Aplikasi Penambah Teks & Hari Isi Teks & Pilih Hari Cek Hari yang Sesuai dengan Komputer Ya Tidak Tampilkan Pesan Kesalahan Gambar 3.4 Activity Diagram Tambah Teks pada Aplikasi Publikasi Digital Pada activity diagram tambah teks diatas, proses aplikasi publikasi digital yang sedang berjalan tidak berbeda jauh dengan activity diagram tambah video. Yaitu dengan tampilan awal aplikasi kemudian tekan tambah teks dan sistem akan menampilkan aplikasi penambah teks dan hari. Isi teks sesuai keinginan dan juga pilih hari pada saat itu. Sistem akan mengecek hari, jika hari yang dipilih tidak sesuai,

39 maka akan muncul tampilan pesan kesalahan, kemudian sistem akan kembali pada tampilan awal aplikasi. Tetapi, jika hari yang dipilih sesuai, maka sistem akan keluar. 3.2.2.3 Perancangan Activity Diagram Play Pada Aplikasi Publikasi Digital User System Buka Aplikasi Tampilkan aplikasi awal Tekan Play Cek ketersediaan video & teks pada hari ini Ya Tidak Tekan ESC dan Button keluar Tampilkan player video & teks Tampilkan pesan kesalahan tidak ketersediaan video Gambar 3.5 Activity Diagram Play pada Aplikasi Publikasi Digital Pada diagram activity play di atas, proses aplikasi publikasi digital video dan teks yang berjalan dimulai dengan memilih video sesuai format yang diinginkan, kemudian memilih hari pada saat itu juga, karena pengaturan hari pada aplikasi harus disesuaikan dengan format hari pada komputer atau laptop. Setelah memilih video dan mengatur teks yang akan ditampilkan, maka pilih tombol Play untuk memainkan video. Jika pengguna belum memilih video dan mengatur teks yang akan ditampilkan, maka sistem akan mengeluarkan pesan kesalahan tidak adanya ketersediaan video. Untuk keluar dari aplikasi ini hanya tinggal tekan "ESC" dan button keluar.

40 3.2.3 Perancangan Sequence Diagram Sebuah Sequence Diagram secara khusus menjabarkan aktivitas sebuah skenario tunggal. Diagram tersebut menunjukan sejumlah contoh objek dan pesanpesan melalui objek-objek didalam use case diagram (Fowler, 2005). Dari bentuk use case yang telah digambarkan sebelumnya, dapat dibuat Sequence Diagram untuk perancangan aplikasi ini. 3.2.3.1 Perancangan Sequence Diagram Untuk Atur Video Pada diagram sequence yang ditunjukan gambar 3.6, terdapat objek user, form awal dan form edit, dimana user adalah pengguna yang menjalankan aplikasi publikasi digital dalam pengaturan video. Untuk form awal adalah tampilan aplikasi yang berfungsi menambah, edit, dan hapus video dan teks. Sedangkan form edit adalah tampilan yang berfungsi menambah video dan memilih hari. Gambar 3.6 Sequence Diagram Atur Video

41 3.2.3.2 Perancangan Sequence Diagram Untuk Atur Teks Pada diagram sequence yang berada pada gambar 3.6, terdapat objek user, form awal dan form teks, dimana user adalah pengguna yang menjalankan aplikasi publikasi digital dalam pengaturan video. Untuk form awal adalah tampilan aplikasi yang berfungsi menambah, edit, dan hapus video dan teks. Sedangkan form teks adalah tampilan yang berfungsi menambah atau mengisi teks dan memilih hari. User Form Awal Form Teks Buka Aplikasi Tampil Form Awal Tampilkan Form Tambah Teks Isi Teks Kirim Teks Pilih Hari Tekan "Tambah" Tampil Form Awal Gambar 3.7 Sequence Diagram Atur Teks 3.2.3.3 Perancangan Sequence Diagram Untuk Play Video dan Teks Berjalan Dalam sequence diagram yang ditunjukkan pada gambar 3.8 dibawah ini, terdapat objek user, form awal, dan video player dimana user adalah pengguna yang menjalankan aplikasi publikasi digital hingga selesai atau diberhentikan (aplikasi keluar).

42 Untuk form awal adalah tampilan aplikasi yang berfungsi menambah, edit, dan hapus video dan teks, sedangkan video player adalah objek Java untuk memainkan dan memproses input yang berupa video dan teks dari form awal. User Form Awal Video Player Buka Aplikasi Tampil Form Awal Tekan Play Cek Video & Teks Kirim video & Teks Tampilkan video player & running text Tekan ESC & Exit Aplikasi Selesai Gambar 3.8 Sequence Diagram Play Video dan Teks Berjalan 3.2.3.4 Perancangan Class Diagram Untuk Form Awal Dalam class diagram yang ditunjukkan pada gambar 3.9 dibawah ini, terdapat masing-masing class seperti form awal, daftar video dan juga daftar running text. Dimana dalam daftar video terdapat attribute yang berisi video. Dalam video tersebut juga dibagi menjadi tiga buah class yaitu class tambah, edit dan hapus. Class tambah berisi attribute seperti url video dan hari. Terdapat juga operations seperti videoxml(), getvideo() dan getselecteditem().class edit tidak jauh berbeda dengan class tambah, attribute dan operations yang dipakai pun masih sama. Adapula class

43 dari daftar running text yang berisi text. Text tersebut dibagi menjadi tiga buah class seperti tambah,edit dan hapus. Actor -Name 0...* 1 Form Awal -Daftar Video -Daftar Running Text 1 1 Daftar Video -Video 1 Tambah Edit Hapus 1 -url Video -Hari +VideoXML() +getvideo() +getselecteditem() -url Video -Hari +VideoXML() +getvideo() +getselecteditem() -Id -url Video -Hari +SearchData() +VideoXML() +deletedata() Daftar Running Text -Text Tambah -isi Teks -Hari +TextXML() +gettext() +getselecteditem() Edit -isi Teks -Hari +TextXML() +gettext() +getselecteditem() Hapus -Id -isi Teks -Hari +SearchData() +TextXML() +deletedata() Gambar 3.9 Class Diagram Form Awal 3.3 Rancangan Tampilan Antarmuka Pada bagian ini, akan dilakukan perancangan sketsa untuk tampilan antarmuka pada aplikasi. Berikut adalah rancangan-rancangan tampilan tersebut: 3.3.1 Rancangan Tampilan Jendela Menu Utama Dalam rancangan tampilan jendela menu utama ini terdapat dua buah daftar tabel dan juga beberapa tombol untuk mendukung jalannya aplikasi yang akan dibuat nanti. Berikut adalah rancangan tampilan jendela menu utama pada aplikasi:

44 Aplikasi Pengatur Video Daftar Video Id Video URL Video Hari Tambah Video Edit Video Hapus Video Daftar Teks Berjalan Id Teks Isi Teks Hari Tambah Teks Edit Teks Hapus Teks Play Gambar 3.10 Rancangan Tampilan Jendela Menu Utama Pada gambar 3.10 menjelaskan tampilan jendela menu utama yang terdapat : 1. Tabel Daftar Video : Berfungsi untuk menampilkan video dan hari yang sudah dipilih. 2. Tombol Tambah Video : Berfungsi untuk menampilkan form tambah video.

45 3. Tombol Edit Video : Berfungsi untuk menampilkan form edit video. 4. Tombol Hapus Video : Berfungsi untuk menghapus video yang diinginkan. 5. Tabel Daftar Teks Berjalan : Berfungsi untuk menampilkan teks dan hari. 6. Tombol Tambah Teks : Berfungsi untuk menampilkan form tambah teks. 7. Tombol Edit Teks : Berfungsi untuk menampilkan form edit teks. 8. Tombol Hapus Teks : Berfungsi untuk menghapus teks yang diinginkan. 3.3.2 Rancangan Tampilan Jendela Tambah Video Pada rancangan tampilan jendela tambah video ini terdapat TextField yang berfungsi untuk menampilkan nama video yang sudah dipilih sebelumnya, tomboltombol dan juga ComboBox untuk menu list hari. Berikut adalah rancangan tampilan jendela tambah video pada aplikasi: Form Tambah Video Video Browse Hari Batal Tambah Gambar 3.11 Rancangan Tampilan Jendela Tambah Video Pada gambar 3.11 menjelaskan tampilan jendela tambah video yang terdapat:

46 1. Tombol Browse : Berfungsi untuk mencari data video pada media penyimpanan data. 2. Menu Hari : Berisi pilihan hari dalam seminggu. 3. Tombol Batal : Berfungsi untuk membatalkan penambahan video. 4. Tombol Tambah : Berfungsi untuk menambah video ke dalam menu utama. 3.3.3 Rancangan Tampilan Jendela Tambah Teks Pada rancangan tampilan jendela tambah teks ini terdapat TextField yang berfungsi untuk memasukkan teks yang akan ditampilkan nantinya pada animasi teks berjalan. Terdapat juga ComboBox untuk menu list hari dan tombol-tombol menu pilihan. Berikut adalah rancangan tampilan jendela tambah teks pada aplikasi: Form Tambah Teks Teks Hari Batal Tambah Gambar 3.12 Rancangan Tampilan Jendela Tambah Teks Pada gambar 3.12 menjelaskan tampilan jendela tambah teks yang terdapat: 1. Input Teks : Berfungsi untuk mengisi teks sesuai keinginan. 2. Menu Hari : Berisi pilihan hari dalam seminggu. 3. Tombol Batal : Berfungsi untuk membatalkan penambahan video. 4. Tombol Tambah : Berfungsi untuk menambah video ke dalam menu utama.

47 3.4 Pengkodean Aplikasi Dalam pembuatan aplikasi ini dibutuhkan suatu kode pemrograman. Kode pemrograman yang dipakai untuk membuat aplikasi ini adalah kode program dari Java. Dari membuat tampilan awal aplikasi, form tambah video, form tambah teks hingga sampai akhirnya tampilan dari video dan teks berjalan tersebut dapat berhasil dijalankan. Masing-masing mempunyai kode program yang berbeda. Adapun untuk lebih lanjutnya mengenai penjelasan kode pemrograman dari masing-masing tampilan, akan dijelaskan pada bab IV bagian 4.1 3.5 Pengujian Sistem Pengujian sistem yang akan dilakukan pada aplikasi ini menggunakan metode black box, dimana dalam metode itu sendiri dapat digunakan dalam mencari kesalahan dan mendemonstrasikan fungsional aplikasi pada saat dioperasikan, apakah input diterima dengan benar dan output yang dihasilkan telah sesuai dengan yang diharapkan. Untuk lebih jelasnya mengenai pengujian sistem, akan dijelaskan pada bab IV bagian 4.2

48