24 BAB III PERANCANGAN SISTEM Pada bab ini dijelaskan perancangan aplikasi dimulai dengan kebutuhan fungsional sistem, desain arsitektur dari sistem, perancangan database, dan perancangan aplikasi website. 3.1. Gambaran Sistem Aplikasi Streaming Website ini bertujuan untuk mempermudah user dalam memperoleh berita dan informasi mengenai Fakultas Teknik Elektronika dan Komputer Satya Wacana. Sistem yang dibuat merupakan aplikasi website yang diakses oleh user. Aplikasi website dijalankan pada browser di PC. Aplikasi website adalah aplikasi yang digunakan oleh user untuk melakukan Streaming Data Video dan Streaming Data Live. Use case untuk user menggunakan aplikasi website dapat dilihat pada Gambar 3.1. Gambar 3.1. Use Case Pengguna. Penjelasannya adalah sebagai berikut: 1. Melihat Streaming Data Video Pengguna dapat melihat video dengan 3 pilihan kualitas berbeda. 2. Melihat Live Streaming Video Pengguna dapat melihat acara secara live streaming. 3. Melihat Jadwal Live Streaming Data Video Pengguna dapat melihat jadwal acara live streaming yang akan disiarkan.
18
Embed
BAB III PERANCANGAN SISTEM - repository.uksw.edurepository.uksw.edu/bitstream/123456789/8491/3/T1_612007013_BAB II… · 3.1. Gambaran Sistem Aplikasi Streaming Website ini bertujuan
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
24
BAB III
PERANCANGAN SISTEM
Pada bab ini dijelaskan perancangan aplikasi dimulai dengan kebutuhan fungsional
sistem, desain arsitektur dari sistem, perancangan database, dan perancangan aplikasi
website.
3.1. Gambaran Sistem
Aplikasi Streaming Website ini bertujuan untuk mempermudah user dalam memperoleh
berita dan informasi mengenai Fakultas Teknik Elektronika dan Komputer Satya Wacana.
Sistem yang dibuat merupakan aplikasi website yang diakses oleh user. Aplikasi website
dijalankan pada browser di PC.
Aplikasi website adalah aplikasi yang digunakan oleh user untuk melakukan Streaming
Data Video dan Streaming Data Live. Use case untuk user menggunakan aplikasi website
dapat dilihat pada Gambar 3.1.
Gambar 3.1. Use Case Pengguna.
Penjelasannya adalah sebagai berikut:
1. Melihat Streaming Data Video
Pengguna dapat melihat video dengan 3 pilihan kualitas berbeda.
2. Melihat Live Streaming Video
Pengguna dapat melihat acara secara live streaming.
3. Melihat Jadwal Live Streaming Data Video
Pengguna dapat melihat jadwal acara live streaming yang akan disiarkan.
25
Gambar 3.2. Use Case Administrator
Penjelasannya adalah sebagai berikut:
1. Tambah Data Video
Admin dapat menambahkan video-video yang baru.
2. Edit Data Video
Admin dapat mengedit video,judul, dan keterangan yang ada.
3. Hapus Data Video
Admin dapat menghapus video.
4. Transmite Live Video
Admin dapat membuat siaran Live Video dengan data sumber video dan suara
external dikirim lewat USB.
Diagram alir aplikasi website dapat dilihat pada Gambar 3.3. Penjelasan untuk Gambar
3.3 adalah sebagai berikut:
1. Ketika aplikasi website dibuka maka akan ditampilkan halaman Home dari website
yang telah di-setting sebagai default website page. Halaman Home sendiri berisi
informasi terbaru mengenai Fakultas Teknik Elektro Satya Wacana. User dapat
memilih beberapa menu yang disediakan di halaman Home.
2. Jika user memilih Record maka website akan menampilkan halaman yang berisi
video-video dengan 3 kualitas video berbeda yaitu Low Quality (360x240)pixel,
Medium Quality (480x320)pixel, dan High Quality (760x480) pixel. User dapat
26
langsung melakukan streaming data video yang telah tersedia pada halaman
Record.
3. Jika user memilih Live maka website akan menampilkan halaman yang berisi player
applet yang berfungsi untuk memainkan Live Streaming jika ada siaran live dari
server.
4. Jika user memilih Schedule maka user dapat melihat jadwal acara yang akan
disiarkan melalui website pada halaman live streaming .
5. Jika user memilih About maka user dapat melihat sejarah dari Universitas Satya
Wacana.
Gambar 3.3. Diagram Alir Aplikasi Website.
27
3.2. Perancangan Database
Database yang digunakan pada aplikasi website adalah MySQL. Data yang tersimpan
pada database MySQL adalah video-video yang nantinya menjadi Streaming data video.
Perancangan database ditunjukkan pada Gambar 3.3.
Gambar 3.4. Perancangan Database Website.
Di dalam database website terdapat delapan buah kolom. Kolom id berisi id dari
video, kolom nama_file berisi judul dari video, kolom lokasi_file_hq,
lokasi_file_mq, dan lokasi_file_lq berisi lokasi file disimpan, kolom
deskripsi berisi keterangan dari video, kolom tgl_upload berisi tanggal video di-
upload dan kolom image berisi gambar-gambar untuk thumbnail video.
28
3.3. Desain Arsitektur Sistem
Gambar 3.5. Bagan Sistem Streaming.
Gambar 3.5. menunjukkan bagan sistem streaming. Ada 4 bagian penting dengan
penjelasan sebagai berikut:
1. Database Server
Pada database server terdapat file-file video yang dapat diakses client melalui
aplikasi website. File video tersebut diakses dengan cara melakukan streaming
melalui jaringan Local Area Network dan juga WiFi.
2. Website dan Webserver
Disini Website berfungsi untuk menampilkan User Interface yang berisi konten-
konten dan berita yang akan memudahkan user dalam mengunakan aplikasi.
Sedangkan Webserver berfungsi untuk menjembatani Data – data serta tampilan
User Interface dari komputer server ke komputer client, webserver juga bertugas
untuk menerima permintaan dari user dan kemudian permintaan tersebut diolah
dan dikirimkan hasilnya kembali ke client user.
3. Aplikasi data video streaming
Didalam aplikasi ini terdapat layanan pemutar video dengan video player berbasis
HTML5, dimana user dapat memilih dua kualitas video yang memiliki perbedaan
29
resolusi gambar, hal ini bertujuan untuk mengatasi permasalahan bandwidth pada
user.
4. Aplikasi live streaming video
Aplikasi ini menyediakan layanan pemutar live streaming video secara langsung
melalui protocol RTP, data hasil capture dikompresi dan data mentah/RAW
dikirim langsung dan nantinya dapat langsung dilihat oleh user melalui aplikasi
website yang dilengkapi dengan applet player sebagai pemutar live stream video.
3.3.1. Database Server
Database Server berfungsi untuk menyimpan file video yang digunakan untuk
streaming data video. Didalam database server terdapat tiga buah fungsi yaitu add data, edit
data, dan juga delete data. Kode dari menu utama database, add data, edit data,dan delete
data menggunakan fungsi PHP yang dilengkapi dengan SQLScript sebagai pengatur koneksi
pengubahan data dalam database lokal. Kode 3.1. menunjukan script untuk menampilkan
keseluruhan database sedangkan Kode 3.2. hingga Kode 3.4. menunjukan script untuk
melakukan add data, edit data, dan delete data.
Kode 3.1. Tampilan keseluruhan database.
Kode 3.2. Fungsi Add Data.
$sql1="insert into tb_video (id, nama_file, lokasi_file_hq,