http://dx.doi.org/10.23960/jitet.v12i1.3967

## ANALISIS DAN PERANCANGAN LAYANAN STREAMING FILM  BERBASIS  WEB  LANGGANAN  MENGGUNAKAN FRAMEWORK NEXTJS
Rachmat Agung Ananda 1 , Gigih Forda Nama 1
1 Teknik Informatika Universitas Lampung, Bandar Lampung
Riwayat artikel:
Received: 22 November 2022 Accepted: 29 Desember  2023 Published: 1 Januari  2024

## Keywords:
Subscription , Streaming Film, NextJS
Corespondent Email: rachmatagung003691@gmail.com
Abstrak. Penggunaan  layanan streaming film  yang  berbasis  web  telah berkembang pesat dalam beberapa tahun terakhir, hal ini disebabkan oleh meningkatnya  akses  internet  dan  juga  adanya  berbagai  platform  yang menyediakan layanan streaming film. Perkembangan teknologi web saat ini juga memberikan peluang untuk meningkatkan pengalaman pengguna dalam  menonton  film  secara  online.  Salah  satu  faktor  penting  dalam perancangan  layanan streaming film  berbasis  web  adalah  penggunaan sistem  berlangganan  atau subscription .  Dalam  sistem  berlangganan, pengguna  harus  membayar  sejumlah  uang  untuk  mendapatkan  akses  ke seluruh konten yang tersedia. Pada saat ini PT. Queen Network Nusantara sedang  melakukan  pengembangan  sebuah  website streaming film  yang akan dijadikan sebuah website pesaing dari website maupun aplikasi yang serupa. Sehingga tujuan kerja praktik berjudul Analisis dan Perancangan Layanan Streaming Film  Berbasis  Web  Langganan  Menggunakan
Framework NextJS  adalah  membangun website streaming film  yang digunakan untuk menonton film secara subscribtion dan menjadi pesaing website  yang  serupa.  Kerja  praktik  dikerjakan  menggunakan  metode Extreme  Programming.  Hasil  dari  pengerjaan  kerja  praktik  ini  adalah website streaming film dengan salah satu keunggulannya adalah metode subscription yang  memungkinkan  pengguna  harus  membayar  untuk menggunakan website yang disediakan. Pengujian website streaming film ini dilakukan menggunakan metode Blackbox Testing dengan hasil testing yang cukup valid serta berfungsi sebagaimana mestinya.
Abstrack. Use of services streaming Web-based films have grown rapidly in recent years, this is due to the increase in internet access and also the existence  of  various  platforms  that  provide  services  streaming  film.  The current  development  of  web  technology  also  provides  an  opportunity  to improve  the  user  experience  in  watching  movies  online.  One  important factor  in  service  design  streaming  web-based  movies  is  the  use  of  a subscription system or subscription. In a subscription system, users must pay a certain amount of money to get access to all available content. At this time PT. Queen Network Nusantara is currently developing a website streaming film to be made into website competitors from website or similar applications.  So  that  the  purpose  of  practical  work  is  entitled  Service Analysis  and  Design Streaming Web-Based  Movie  Subscription  Using Framework Next  JS  is  building  website  streaming film  used  to  watch movies for pre subscription and become a competitor of similar websites. Practical  work  is  done  using  the  Extreme  Programming  method.  The results of this practical work are: website streaming films with one of its advantages is the subscription method which allows users to pay to use the website  provided.  Testing  Website streaming This  film  was  carried  out using  the  Black  Box  Testing  method  with  valid  testing  results  and functioning as it should .
1. PENDAHULUAN Penggunaan layanan streaming film yang berbasis  web  telah  berkembang  pesat  dalam beberapa tahun terakhir, hal ini disebabkan oleh meningkatnya  akses  internet  dan  juga  adanya berbagai  platform  yang  menyediakan  layanan streaming film. Seiring dengan berkembangnya teknologi,  para  pengguna  semakin  menuntut kualitas  layanan  yang  lebih  baik  dan  inovatif, seperti  pilihan  film  yang  lebih  beragam  dan tampilan yang lebih menarik. Oleh karena itu, diperlukan perancangan layanan streaming film yang lebih baik dan efektif.
Perkembangan  teknologi  web  saat  ini juga memberikan peluang untuk meningkatkan pengalaman  pengguna  dalam  menonton  film secara online. Dalam hal ini, framework NextJS merupakan salah satu pilihan untuk membangun  aplikasi  web  berkinerja  tinggi, terutama  dalam  hal  pengembangan  aplikasi web dengan tampilan yang dinamis. Framework ini  dapat  mempercepat  waktu pengembangan  dan  meningkatkan  kualitas aplikasi web.
Salah  satu  faktor  penting  dalam perancangan  layanan streaming film  berbasis web  adalah  penggunaan  sistem  berlangganan atau subscription . Dalam sistem berlangganan, pengguna  harus  membayar  sejumlah  uang untuk  mendapatkan  akses  ke  seluruh  konten yang  tersedia  dalam  layanan streaming film tersebut.  Sistem  ini  memberikan  keuntungan bagi penyedia layanan, karena pengguna yang telah  berlangganan  akan  membayar  secara berkala  dan  memberikan  stabilitas  keuangan untuk layanan tersebut.
Dalam melakukan analisis dan perancangan  layanan streaming film  berbasis web  menggunakan  framework  NextJS,  perlu dilakukan evaluasi terhadap layanan streaming film yang sudah ada di pasaran. Hal ini dapat dilakukan  dengan  menganalisis  kelebihan  dan kekurangan  masing-masing  layanan,  serta mengidentifikasi  faktor-faktor  yang  dapat meningkatkan kualitas layanan tersebut.
Dalam pengembangan layanan streaming film  berbasis  web,  faktor  keamanan  juga menjadi  hal  yang  penting  untuk  diperhatikan. Penyedia  layanan  streaming  film  harus menjamin  keamanan  data  pengguna,  terutama data keuangan yang dikirimkan saat melakukan pembayaran.  Oleh  karena  itu,  perlu  dilakukan
perancangan  sistem  keamanan  yang  baik  dan efektif  untuk  menjaga  kepercayaan  pengguna dalam menggunakan layanan tersebut.
Pada  saat  ini  PT.  Queen  Network Nusantara  sedang  melakukan  pengembangan sebuah website streaming film  yang  akan dijadikan sebuah website pesaing dari website maupun  aplikasi  yang  serupa.  Berdasarkan permasalahan  diatas,  penulis  diberikan  tugas untuk  membuat  landing  page  dari  website streaming film untuk merealisasikan kebutuhan yang sudah ada

## 2. TINJAUAN PUSTAKA
2.1 Website
Website merupakan  kumpulan  halaman yang  digunakan  untuk  menampilkan  berbagai informasi  seperti  teks,  gambar,  animasi,  dan suara, baik yang bersifat statis maupun dinamis yang  membentuk  satu  rangkaian  yang  saling terhubung [1]. Website merupakan sekumpulan halaman  yang  berisi  informasi  dalam  bentuk data  digital  baik  berupa  teks,  gambar,  video, audio,  dan  animasi  lainnya  yang  disediakan melalui  koneksi  internet  [2]. Website merupakan  sejumlah  halaman  yang  memiliki topik  saling  terkait  pada  tiap  halaman,  dan dapat  disertakan  gambar,  video,  animasi,  atau jenis-jenis objek lainnya [3].
2.2 Video on Demand
Video  on  Demand adalah  sistem distribusi media yang memungkinkan pengguna  mengakses  video  tanpa  perangkat pemutaran  tradisional  seperti  pemutar  Disk Multiguna  Digital  (pemutar  DVD).  Pemutar DVD  memerlukan Compact  Disc (CD)  untuk memutar  video. Compact  Disk menyimpan semua  informasi  dan  data  tentang  video. Mengangkut dan mendistribusikan CD diperlukan tetapi tidak efisien sama sekali. Saat ini Internet menyediakan alat yang lebih efisien dengan  sistem Video-On-Demand yang memungkinkan  pengguna  mengklik  dan memutar  video  apa  pun.  Semua  orang  tahu tentang  Youtube  dan  Netflix.  Dua  platform raksasa yang mendistribusikan video terbanyak.  Pada  tahun  2019  Youtube mendominasi  70  persen  dari  total  waktu  yang dihabiskan  orang  di  ponsel  mereka  untuk menonton lima aplikasi hiburan teratas [4]. Jadi
Video  on  Demand adalah  media  yang merepresentasikan video secara online, seperti DVD  yang  menampilkan  video  dengan membaca CD.

## 2.3 Video Transcoding
Transcoding adalah  proses  mengonversi file  audio  atau  video  dari  satu  format pengkodean  ke  format  lainnya  untuk meningkatkan  jumlah  perangkat  target  yang kompatibel  tempat  file  media  dapat  diputar. Penelitian ini akan menggunakan metode HLS. Transcoder memiliki fungsi untuk mentranskode  pengunggah  file  mentah  oleh seseorang  dan  mengubah  ke  aliran  format dasbor  HLS  yang representative .  Aplikasi umum  untuk  mentranskode  video  adalah FFMPEG.  FFMPEG  adalah  proyek  perangkat lunak  sumber  terbuka  dan  gratis.  FFMPEG memiliki perpustakaan besar termasuk pembuat enkode dan dekoder untuk mentranskode video, audio,  dan  file  multimedia  lainnya  ke  dalam format yang diinginkan [5].

## Gambar 1. Proses Transcoding FFMPEG
Menurut  Penelitian  Chenwei  Song  yang berjudul Distributed Video Transcoding Based on  MapReduce , Video  Transcoding adalah pekerjaan penting dalam pemrosesan video dan layanan  jaringan  yang  memberikan  efisiensi dalam pembiayaan perangkat keras dan sumber daya  lainnya  dikarenakan transcoding dapat mengurangi waktu pemrosesan serial dan dapat menangani  kesalahan,  pada  penelitian  ini sistem transcoding video  terdistribusi  yang didasarkan pada MapReduce serta penggunaan FFMPEG. Proses desain dari video transcoding yang dilakukan Chenwei Song adalah sebagai berikut.
Gambar 2 . Diagram Aliran Proses
Transcoding Video Penelitian Chenwei Song
Proses  yang  dilakukan  pada  alur  desain sistem diatas. Pertama, video dipotong menjadi beberapa  bagian  dan  diunggah  ke  HDFS. Kedua menjalankan fungsi Map sehingga setiap node  mendapatkan  subtugasnya  sendiri  dari HDFS.  Ketiga,  mentranscode  klip  video melalui  FFMPEG  dan  mengunggahnya  ke HDFS.  Terakhir,  menjalankan  fungsi Reduce untuk  menggabungkan  klip  video  untuk mendapatkan video target  akhir.  Eksperimen membuktikan bahwa metode terdistribusi yang menggunakan  struktur  model Map Reduce bekerja  lebih  baik  daripada  metode  mesin tunggal tradisional dalam mentranskode video besar  saat  menggunakan  komputer  dengan konfigurasi yang sama. Metode terdistribusi ini dapat  mempersingkat  waktu  pemrosesan  dan waktu respons (waktu mulai dari mengunggah ke situs web hingga merilis video). Sementara itu,  kapasitas  penanganan  kesalahannya memungkinkan  untuk  menghindari  memulai kembali pekerjaan ketika terjadi kesalahan fisik [6].
Menurut  penelitian  Yungeng  Xu  yang berjudul Design and Implementation of a Multi Video  Transcoding  Queue  Based on MySQL and FFMPEG. Transcoding video adalah untuk mengonversi  file  video  dari  satu  format  ke format  lain,  yang  menyediakan  konektivitas tanpa batas antara jaringan heterogen, berbagai jenis pengguna, dan format konten media yang berbeda.  Secara  umum, transcoding video meliputi: transcoding  bit  rate , transcoding resolusi,  konversi  format  encoding  video,  dan lain sebagainya.

## Gambar 3 . Bagan Alur Sistem
Transcoding Penelitian Yungeng Xu
Impelementasi  yang  dilakukan  pada penelitian  ini  yang  pertama  melakuan video upload yang  diteruskan  menuju transcoding video yang  dapat  mengubah  format video menjadi  format video lainnya  beserta  audio, lalu melakukan Queue Implementation Setelah pengunggahan video selesai, nilai awal bidang status basis data adalah 0, mewakili status non - transcoding ,  jika  1,  ini  menunjukkan  bahwa video sedang di- transcoding , jika 2, transcoding video selesai. Dengan kesimpulan pada  penelitian  ini  adalah  mekanisme transcoding antrian  penggunaan  yang  wajar, secara efektif mengurangi tekanan pemrosesan server.  Hasil  pengujian  juga  menunjukkan bahwa  metode  tersebut  layak  dan  dapat diandalkan [7].
2.4 Video Streaming Streaming adalah  transmisi  data  file audio  atau  video  secara  terus  menerus  dari server ke klien. Streaming itu seperti menonton televisi. TV mentransfer data byte video demi byte.  Sangat  berbeda  dengan  mendownload video  dan  menontonnya  hingga  video  selesai didownload. Streaming adalah  waktu  nyata, dan  lebih  efisien  daripada  mengunduh  file. karena  mesin  tidak  harus  mengunduh  semua file.  Dalam  metode  pengunduhan,  mesin
menyimpan  semua  data  ke  hard  disk  dan  ini merupakan  pemborosan  memori  yang  sangat besar. Jika ini adalah metode streaming , maka mesin  tidak  benar-benar  menyalin  dan menyimpannya  ke  dalam  memori. Streaming biasanya  menggunakan  protokol  seperti MPEG-DASH atau HLS. [5]
Menurut  Penelitian  Yoanes  Bandung dengan  judul Design  and  Implementation  of Video  on  Demand  System  Based  on  MPEG DASH .  MPEG-DASH  mirip  dengan  HLS, protokol streaming lainnya,  yang  memecah video  menjadi  potongan-potongan  kecil  dan menyandikan  potongan-potongan  itu  pada tingkat  kualitas  yang  berbeda.  Hal  ini memungkinkan  untuk  melakukan streaming video pada tingkat kualitas yang berbeda, dan untuk beralih di tengah video dari satu tingkat kualitas  ke  tingkat  kualitas  lainnya.  Manfaat dari penggunaan protokol ini adalah, pengguna dapat  memiliki streaming adaptif,  yang  dapat mengubah  resolusi streaming dengan  segera [5].

## Gambar 4.  Cakupan MPEG-DASH atau HLS

## Menurut  Penelitian  Nitens  Jain  dengan  judul
Production-Ready environment for HLS Player Using FFMPEG with Automation on S3 Bucket using  ansible. Media streaming adalah multimedia  yang  terus-menerus  diterima  dan kemudian disajikan kepada pengguna akhir. Di antara  berbagai  protokol  yang  mendukung streaming video , HTTP Live Streaming (HLS) telah  menjadi  salah  satu  protokol  yang  paling banyak  digunakan  secara  komersial.  Dalam makalah  ini,  kami  mengimplementasikan streaming  video menggunakan streaming HTTP. Makalah ini menggunakan fast forward moving pictures expert group (FFmpeg) sebagai  alat  transcoding  video.  Untuk mengurangi intervensi manual, alat otomatisasi Ansible  (alat  DevOps)  digunakan  untuk
menyimpan  video  di  bucket  AWS  S3  untuk mengurangi  beban  di  server.  Penerapan  pada penelitian  kami  menerapkan  antarmuka pengguna yang memiliki dua opsi, konversi file video  tunggal  atau  konversi  sekumpulan  file video dalam folder. Setelah mengisi detail yang diperlukan, pengguna mengklik tombol unggah video. Skrip Shell ini terdiri dari perintah yang diperlukan  untuk  menginisialisasi  perangkat lunak FFmpeg. Perangkat lunak ini berjalan di latar  belakang  untuk  memotong  video  yang diunggah dan mengubahnya menjadi potongan kecil file.ts. Seluruh proses pemotongan video akan  berjalan  di  latar  belakang  yaitu  pemuat menunjukkan kemajuan konversi video dan jika sudah  selesai  dapat  mengunduh  file  txt  yang terdiri dari file m3u8 [8].

## 2.5 Javascript
JavaScript  adalah  bahasa  pemrograman web  yang  bersifat Client  Side  Programming Language . Client Side Programming Language adalah  tipe  bahasa  pemrograman  yang pemrosesannya dilakukan oleh client. Aplikasi client  yang  dimaksud  merujuk  kepada web browser seperti  Google  Chrome,  Mozilla Firefox, Opera Mini dan sebagainya. JavaScript mengimplementasikan  fitur  yang  dirancang untuk  mengendalikan  bagaimana  sebuah halaman web berinteraksi dengan penggunanya [9].

## 2.6 Next JS
Next.js  merupakan framework atau kerangka  kerja  dari  Reactjs  yang  digunakan untuk membuat aplikasi website pada sisi client dan  yang  saat  ini  telah  diimplementasikan  di puluhan ribu website di dunia. Next.js saat ini telah  digunakan  oleh  beberapa  perusahaan besar  seperti  Nike,  Netflix,  dan  Playstation. Next.js  dibuat  karena  masalah  pre-render secara  statis  dibeberapa  halaman  yang membuat  SEO  ( Search  Engine  Optimization ) dikarenakan  file  JavaScript  harus  di  load  dan menentukan  komponen  apa  yang  harus ditampilkan. [10]
Menurut  penelitian  Hendrikus  Adi Purnama  yang  berjudul  Pengembangan  dan Maintenance  Aplikasi  Kesehatan  Pada  PT Global  Urban  Esensial.  Next.js  mempunyai beberapa  keunggulan  seperti  automatic  code splitting yang digunakan sebagai pemecah code agar lebih cepat saat meload halaman, memiliki konsep SSR ( Server Side Rendering ) yang akan
membantu untuk memudahkan dalam menggunakan  SEO.  Next.js  juga  memiliki direktori pages yang akan sangat memudahkan pada  proses routing dan  dapat  dimodifikasi sesuai dengan kebutuhan [11].

## 2.7 Tailwind
Berdasarkan  informasi  dari  halaman dokumentasinya,  Tailwind  CSS  merupakan framework CSS yang bersifat utility-first untuk membangun  desain  antarmuka  khusus  dengan cepat. Tailwind CSS berjalan diatas Javascript yang  bekerja  diatas  Server  NodeJS  sehingga dalam prosesnya File CSS akan diterjemahkan ( Compile )  kedalam  Bahasa  Javascript  dan dibaca oleh File Config yang dimiliki Tailwind, yang seterusnya dikembalikan menjadi sebuah File  CSS  yang  lebih  tersusun  dan  berukuran relatif lebih kecil karena melalui proses Minify , dan Prefixing .
Menurut  penelitian  Fadli  Rifandi  yang berjudul Website Gallery Development Using Tailwind  CSS Framework .  Menggunakan Tailwind  sebagai framework CSS  di  galeri website , pengguna dapat mempersingkat waktu pengerjaan  suatu  style  CSS  dan  memberikan kebebasan  kepada  pengguna  untuk mendesain sesuai  keinginan  dengan  segala  fitur  yang memudahkan  pengguna,  seperti  membuat tampilan yang responsive atau mobile - friendly . situs web [12].

## 2.8 Visual Studio Code
Visual Studio Code (VS Code) ini adalah sebuah  teks  editor  ringan  dan  handal  yang dibuat  oleh  Microsoft  untuk  sistem  operasi multiplatform. Teks editor ini secara langsung mendukung  bahasa  pemrograman  JavaScript, Typescript,  dan  Node.js,  serta  bahasa pemrograman  lainnya  dengan  bantuan  plugin yang  dapat  dipasang  via  marketplace  Visual Studio Code. Teks editor VS Code juga bersifat open source, yang mana kode sumbernya dapat kalian  lihat  dan  kalian  dapat  berkontribusi untuk  pengembangannya.  Kode  sumber  dari VS  Code  ini  pun  dapat  dilihat  di link  Github. Hal ini juga yang membuat VS Code menjadi favorit para pengembang aplikasi, karena para pengembang  aplikasi  bisa  ikut  serta  dalam proses  pengembangan  VS  Code  ke  depannya [13].
2.9 Metode Extreme Programming Extreme Programming merupakan model yang termasuk didalam pendekatan agile yang diperkenalkan  oleh  Kent  Back.  Terdapat  4 tahapan  yang  harus  dikerjakan  dalam  metode Extreme Programming yakni Planning, Design, Coding,  dan  Testing. Metode Extreme Programming sering  juga  dikenal  dengan metode  XP.    Metode  ini  dicetuskan  oleh Kent  Beck,  seorang  pakar software engineering . Extreme programming adalah model  pengembangan  perangkat  lunak yang  menyederhanakan        berbagai tahapan  pengembangan  sistem  menjadi lebih  efisien,  adaptif,  dan  fleksibel.  Nilai dasar metode extreme programming:
1. Communication , Memfokuskan komunikasi  yang  baik  antara  programmer dengan user maupun antar programmer.
2. Courage , Pengembang   perangkat   lunak harus  selalu        memiliki  keyakinan, keberanian dan integritas dalam melakukan tugasnya.
3. Simplicity ,  Lakukan  semua  dengan sederhana.
4. Feedback , Mengandalkan feedback sehingga  dibutuhkan  anggota  tim  yang berkualitas.
5. Quality Work , Proses berkualitas berimplikasi  pada  perangkat  lunak  yang berkualitas sebagai hasil akhirnya. [14]

## 2.10 Blackbox Testing
Black  box  testing  merupakan  pengujian kualitas  perangkat  lunak  yang  berfokus  pada fungsionalitas  perangkat  lunak.  Pengujian black box bertujuan untuk  menemukan fungsi yang  tidak  benar,  kesalahan  antarmuka, kesalahan  pada  struktur  data,  kesalahan performansi, kesalahan inisialisasi dan terminasi.
Pengujian  Black  Box  bertumpu  pada memastikan tiap proses sudah berfungsi sesuai dengan  kebutuhan  yang  diharapkan.  Penguji dapat  menartikan  himpunan  kondisi  masukan dan menjalankan pengujian pada pengkhususan fungsi  dari  sistem.  Sehingga  pengujian merupakan  suatu  cara  pelaksanaan  program yang  bertujuan  menemukan  kesalahan  atau error  kemudian  memperbaikinya  sehingga sistem dapat dikatakan layak untuk digunakan [15].
Metode yang digunakan dalam pengujian blackbox  ini  adalah  Metode  equivalence
partitions.  Metode  Equivalence  Partitions merupakan metode pengujian yang menggunakan masukan pada setiap menu yang terdapat  di  dalam  sistem  informasi    penilaian kinerja,  beberapa  menu  masukan    dilakukan pengujian dengan digolongkan dan dikelompokan berdasarkan fungsinya [16].

## 2.11 Axios
Axios  adalah  klien  HTTP  berbasis  promise yang  sederhana  untuk  browser  dan  node.js. Axios  menyediakan  pustaka  yang  mudah digunakan dalam paket kecil dengan antarmuka yang sangat dapat diperluas. Axios menyediakan antarmuka yang mudah digunakan  dan  mendukung  fitur-fitur  seperti penanganan otomatis terhadap response JSON, mengirim permintaan seperti GET, POST, PUT, DELETE,  dan  lain  sebagainya,  pengelolaan autentikasi dan lain-lain [17].

## 3. METODE PENELITIAN
Dalam  melakukan  pengembangan  sistem dibutuhkan
metode atau model pengembangannya,  salah  satunya  adalah extreme programming. Metode ini meningkatkan  efisiensi  dan  fleksibilitas  dari sebuah proyek pengembangan perangkat lunak. Terdapat empat tahapan  pada  metode extreme programming yaitu:
1. Planning (Perencanaan)
Tahap  ini  merupakan langkah  awal  dalam pembangunan  sistem  dimana  dalam  tahap ini dilakukan beberapa kegiatan perencanaan,  yaitu  dilakukan  identifikasi masalah, analisa kebutuhan dan penetapan jadwal pelaksanaan pembangunan sistem.
2. Design (Perancangan)
Pada  tahapan  ini  dilakukan  kegiatan pemodelan,  yakni  pemodelan  sistem, pemodelan arsitektur, dan pemodelan basis data.  Pemodelan  sistem  dan  arsitektur dilakukan  menggunakan  diagram  Unified Modelling Language (UML).
3. Coding (Pengkodean)
Pada  tahapan  ini  merupakan  kegiatan penerapan  pemodelan  yang  sudah  dibuat kedalam  bentuk  user  interface  dengan menggunakan bahasa pemrograman. Adapun  bahasa  pemrograman  yang digunakan  adalah  javascript  dengan menggunakan framework Next JS
4. Testing (Pengujian)
Pada  tahapan  ini  dilakukan  tahapan pengujian  sistem  untuk  mengetahui
kesalahan apasaja yang timbul saat aplikasi sedang  berjalan  serta  mengetahui  apakah sistem yang dibangun sudah sesuai dengan kebutuhan  pengguna.  Metode  pengujian yang  digunakan  dalam  tahapan  ini  adalah metode blackbox testing.

## Gambar 5.  Tahapan Extreme Programming

## 4. HASIL DAN PEMBAHASAN
4.1 Tahap Planning (Perencanaan)
4.1.1 Identifikasi Masalah
Pada tahap ini dilakukan diskusi dengan pembimbing  kerja  praktik  di  PT.  Queen Network Nusantara untuk membahas hal yang akan  dikerjakan  selama  masa  Kerja  Praktik sesuai dengan kebutuhan perusahaan.
Berdasarkan  hasil  dari  diskusi  tersebut, pembimbing  kerja  praktik  memberikan pekerjaan  untuk  membuat  frontend  Streaming Video  (Video  on  Demand)  menggunakan framework  javascript  Next  dan  Framework CSS Tailwind. Alasan penggunaan Next adalah dikarenakan  framework  ini  sudah  digunakan dalam  pembuatan  berbagai  aplikasi  di perusahaan tersebut, selain itu juga memudahkan  dalam  integrasi  dalam  halaman yang  dibuat.  Alasan  penggunaan  Tailwind dikarenakan  Tailwind  sangat  mudah  untuk dikustomisasi, sehingga pembuatan komponen dapat dilakukan sesuai dengan keinginan.
4.1.2 Analisa Kebutuhan
a. Kebutuhan Fungsional
Adapun  Kebutuhan  fungsional  pada website Streaming Film ini adalah:
• User dapat melakukan login.
• User  dapat  mengubah  profile  dan password.
• User dapat mengelola daftar film yang ingin ditonton
• User  dapat  memilih  film  yang  akan diputar
• User  dapat  menampilkan  film  yang sedang diputar
b. Kebutuhan Non Fungsional
Adapun  kebutuhan  non  fungsional  pada website Streaming Film ini adalah:
• Website  harus  tersedia  dalam  24  jam setiap hari.
• Website  harus  dapat  dijalankan diberbagai  perangkat  dan  sistem operasi  seperti  dapat  dijalankan  pada Windows, MacOS, dan Linux.
4.2 Tahap Design (Perancangan) 4.2.1 Use Case Diagram Use Case Diagram menjelaskan mengenai interaksi antara actor dengan sistem serta hubungannya.

## Gambar 6. Use Case Diagram Video on Demand
Berdasarkan  gambar Use  Case  Diagram Video  on  Demand,  terdapat  role  User  dimana role  User  tersebut  dapat  melakukan  beberapa aktivitas  diantaranya,  mengedit  profil  dan mengubah  password,  memutar  media  player, mengelola  daftarku  atau  daftar  tontonan  yang akan  diputer,  memilih  film  yang  akan  diputar dengan melakukan login terlebih dahulu untuk melakukan  aktivitas  tersebut,  dan  terdapat aktivitas  memilih  paket  berlangganan  dimana user harus melakukan register terlebih dahulu.

## 4.2.2 Activity Diagram
Activity Diagram adalah gambaran aliran kerja  atau  aktifitas  dari  sebuah  sistem  atau menu yang ada pada perangkat lunak.
Gambar 7. Activity Diagram Melakukan Login
Gambar 8 . Activity Diagram Mengedit Profile dan Mengubah Password
Gambar 9 . Activity Diagram Mengelola Daftar Film Yang Ingin Ditonton
Gambar 10 . Activity Diagram Memilih
Film Yang Akan Diputar

## Gambar 11 . Activity Diagram
Menampilkan Film Yang Sedang Diputar
4.3 Tahap Coding (Pengkodean)
Pada  tahapan  ini  adalah  pembuatan  kode program sesuai dengan rancangan sistem yang telah  dibuat  sebelumnya.  Pengembangan website ini menggunakan bahasa pemrograman Javascript  menggunakan  Framework  NextJS dan styling menggunakan Framework Tailwind.

## 4.3.1 Pair Programming
Pada  tahap  ini  merupakan  dimana  adanya kerjasama  tim  dalam  penulisan  program  agar program yang dibuat nantinya bisa lebih baik. Dalam  tahap  ini  penulis  bekerjasama  dengan senior  programmer  untuk  memeriksa  kode program yang telah dibuat, agar hasil program bisa  lebih  maksimal  dengan  pengerjaan  yang dilakukan  membagi  pekerjaan  menjadi  dua pekerjaan yaitu frontend dan backend, dengan pengerjaan  yang  pertama  dilakukan  adalah mengerjakan  frontend  terlebih  dahulu,  dan pengerjaan  backend  setelah  frontend  sudah masuk  ditahap  pembuatan  media  playernya, serta  berdiskusi  apabila  ada  penambahan  dari konten  yang  ada  pada  komponen  yang  sudah dibuat oleh frontend.

## 4.3.2 Refractoring
Pada tahap ini membersihkan kode - kode yang tidak  digunakan  lagi,  agar  kode  program terlihat rapi dan mudah dibaca, selain itu juga tidak menimbulkan error atau bug.

## 4.3.3 Continuos Iteration
Pada  tahap  ini  merupakan  tahap  dimana terdapat  perubahan  sistem  selama  pembuatan, penulis menggunakan Gitlab untuk menyimpan source code dari setiap kode yang telah dibuat. Penulis membuat komponen dan halaman pada website.  Berikut  ini  merupakan  beberapa komponen  yang  penulis  buat  pada  aplikasi Streaming Film Video on Demand.

## a. Component Banner

## Gambar 12. Component Banner
Pada  gambar  diatas  merupakan  tampilan  dari component banner ketika telah di implementasikan ke dalam halaman website.
b. Component Modal

## Gambar 13. Component Modal
Pada  gambar  diatas  merupakan  tampilan Component Modal ketika telah
diimplementasikan  ke dalam  halaman  website dengan beberapa informasi film yang diberikan
c. Component Card

## Gambar 14. Component Card
Pada  gambar  diatas  merupakan  tampilan
Component
Card ketika
telah diimplementasikan ke dalam halaman website. Pada  gambar  sebelah  kiri  merupakan  card tampilan yang belum terpilih, sedangkan pada gambar  sebelah  kanan  merupakan  card tampilan  yang  dipilih  akan  membuat  sebuah hover  yang  menampilkan  sedikit  informasi didalamnya.
d. Component Navbar

## Gambar 15. Component Navbar
Pada  gambar  diatas  merupakan  tampilan
Component Navbar ketika
telah diimplementasikan ke dalam halaman website. Pada  gambar  diatas  terdapat  tiga  macam navbar.  Pada  gambar  pertama  merupakan navbar  ketika  user  berada  pada  bagian  teratas halaman,  pada  gambar  kedua  merupakan navbar ketika user melakukan scroll yang akan menggantikan  warna  transparant  menjadi warna  putih  dan  gambar  ketika  merupakan navbar  ketika  user  menggunakan  handphone hingga tablet.
e. Component Notification
Gambar 16. Component Notification
Pada  gambar  diatas  merupakan  tampilan
Component Notification ketika telah diimplementasikan ke dalam halaman website. f. Component Container

## Gambar 17. Component Container
Pada  gambar  diatas  merupakan  tampilan Component Container ketika telah diimplementasikan ke dalam halaman website, Component  Card  merupakan  bagian  dari Component  Container  yang  penggunaan  dari Component  container  ini  untuk  membungkus Component Card.
g. Component Footer

## Gambar 18. Component Footer
Pada  gambar  diatas  merupakan  tampilan Component Footer ketika telah diimplementasikan  ke dalam  halaman  website yang berada pada bagian bawah halaman.
h. Component Media Player

## Gambar 19. Component Media Player
Pada  gambar  diatas  merupakan  tampilan  dari Component  Media  Player  ketika  telah diimplementasikan  ke dalam  halaman  website dan  kontrol  pada  Media  Player  tersebut  dapat ditekan oleh user jika diperlukan.

## Gambar 20. Tampilan Beranda
Pada  gambar  diatas  merupakan  tampilan beranda  website  Streaming  Film  video  on demand,  dari  tampilan  tersebut  menampilkan beberapa film yang sudah ada, dan juga banner serta menampilkan kembali beberapa komponen yang sudah dijelaskan diatas dengan menjadikan sebuah halaman.

## 4.4 Tahap Testing (Pengujian)
Pengujian  dilakukan  dengan  menggunakan blackbox  testing.  Blackbox  testing  adalah metodologi  pengujian  yang  dilakukan  untuk mengamati hasil input dan output dari software, tanpa  memperhatikan  bagaimana  sistem  itu sebenarnya  bekerja.  Berikut  merupakan  hasil dari Blackbox Testing.

## a. Halaman Landing Page
Skenario Pengujian Hasil Diharapkan Menekan tombol beranda  untuk  masuk kedalam halaman beranda Sesuai,  Sistem  akan menampilkan  halaman beranda Menekan tombol masuk untuk masuk ke halaman login Tidak  Sesuai,  Sistem akan menampilkan form untuk login Mengisi  alamat  email pada form yang disediakan dan menekan tombol berlangganan Sesuai,  Sistem  akan menampilkan  halaman signup untuk berlangganan mengosongkan  alamat email  pada  form  yang disediakan dan menekan tombol berlangganan Sesuai,  Sistem  akan menolak untuk mengisi email terlebih dahulu
b. Halaman Beranda Skenario Pengujian Hasil Diharapkan Menekan tombol beranda, kategori, movie, dan serial pada navbar yang tersedia Sesuai,  Sistem  akan menampilkan  halaman dari  masing  masing tombol  yang  ada  pada navbar Menekan tombol notifikasi Sesuai,  Sistem  akan menampilkan notifikasi atau pemberitahuan pada user Menekan tombol tonton pada komponen banner Sesuai,  Sistem  akan menampilkan  halaman video  player  untuk memulai  film  yang dipilih
Menekan  tombol  info pada komponen banner Sesuai,  Sistem  akan menampilkan  popup atau modal yang memberitahu detail film tersebut Menaruh  mouse  pada komponen card Sesuai,  Sistem  akan membuat  komponen card tersebut scale dan memberikan sedikit informasi film Menekan  salah  satu komponen card Sesuai,  Sistem  akan pindah  ke  halaman media  player  untuk memulai film tersebut Menekan  tombol  yang tersedia pada footer Sesuai,  Sistem  akan menampilkan  masing masing  halaman  dari tombol  yang  terdapat pada footer
c. Halaman Media Player
Skenario Pengujian Hasil Diharapkan Menekan tombol kembali  pada  bagian kiri atas halaman Sesuai,  Sistem  akan kembali  ke  halaman sebelumnya Membiarkan mouse tidak  bergeser  ketika film berhenti Sesuai,  Sistem  akan menampilkan nama film dan juga deskripsi singkat film tersebut Menekan  tombol  play pause  pada  control media player Sesuai,  Sistem  akan membuat  film tersebut diputar dan berhenti Menekan tombol fastforward pada control media player Sesuai,  Sistem  akan mempecepat film sebanyak  10  detik setiap ditekan
Menekan tombol backward pada control media player Sesuai,  Sistem  akan memundurkan film sebanyak  10  detik setiap ditekan Menaruh  mouse  pada speaker dan menggeser slide pada speaker Sesuai,  Sistem  akan menampilkan slide disebelah  speaker  dan dapat  digeser  untuk memberikan besar kecilnya suara Menekan tombol fullscreen pada control media player Sesuai,  Sistem  akan membuat  film tersebut berjalan secara fullscreen pada device Menekan tombol pengaturan pada control media player Sesuai,  Sistem  akan menampilkan beberapa pilihan pengaturan yang diperlukan Menaruh  mouse  pada slide timeline Sesuai,  Sistem  akan menampilkan  gambar dari mouse yang ditaruh pada timeline Menggeser mouse pada slide timeline Sesuai,  Sistem  akan menampilkan film pada waktu yang ketika  slide  tersebut digeser Menekan timeline slide  Sesuai,  Sistem  akan menampilkan film pada waktu yang dipilih oleh user ketika ditekan.

## 5. KESIMPULAN
Pada  hasil  dan  pembahasan  yang  telah dijelaskan,  maka  dapat  disimpulkan  seperti berikut :
1. Kombinasi  antara  NextJS  dan  Tailwind membantu  mencapai  keberhasilan  dalam membangun  frontend  website  streaming film  dengan  mengoptimalkan  proses pengembangan,  meningkatkan  efisiensi, dan mengurangi waktu pengerjaan.
2. Dalam perancangan layanan streaming film berbasis  web,  desain  responsif  menjadi kunci  penting  untuk  menyesuaikan tampilan  dengan  berbagai  perangkat, termasuk desktop, tablet, dan ponsel.
3. Pada  hasil  pengerjaan  layana  streaming film berbasis web menghasilkan komponen yang  dapat  digunakan  kembali  (Reusable Component)

## UCAPAN TERIMA KASIH
Penulis mengucapkan banyak terima kasih serta  syukur  pada  tuhan  YME  yang  telah memberi karunianya untuk bisa menyelesaikan artikel  jurnal  ini,  tidak  lupa  juga  pihak  yang terlibat  dalam  penyusunan,  khususnya  PT Queen  Network  Nusantara  dan  senior developer  di  perusahaan  tersebut,  serta  dosen dan  teman-teman  dari  Jurusan Teknik  Elektro yang  selalu  membimbing  dan  mensupport dalam proses penyusunan artikel.

## DAFTAR PUSTAKA
[1]  A.  Susanto,  “Rancang  Bangun  Sistem Informasi Penjualan Aksesoris Hanphone Berbasis  Web  Pada  Dazzle  Cellular Semarang,” J. Din. Inform. , vol. 5, no. 1, pp. 1–6, 2013.
[2]  R. Abdulloh, Web Programming is Easy . Jakarta:  PT  Elex  Media  Komputindo, 2015.
[3]  Y.  Susilowati, Modul  E-Commerce  - Teaching  Factory  For  Students .  Mutiara Publisher, 2019.
[4]  J. Alexander, “YouTube is the frontrunner in the mobile streaming wars, and it’s not even  close,” https://www.theverge.com/ , 2020.
https://www.theverge.com/2020/2/13/211 36335/youtube-streaming-wars-mobile- android-tiktok-netflix-quibi.
[5]  Y. Bandung, Sean, L. B. Subekti, I. G. B. B.  Nugraha,  and  K.  Mutijarsa,  “Design and Implementation of Video on Demand System  Based  on  MPEG  DASH,” 2020 Int. Conf. Inf. Technol. Syst. Innov. ICITSI 2020  -  Proc. ,  pp.  318–322,  2020,  doi: 10.1109/ICITSI50517.2020.9264973.
[6]  C. Song, W. Shen, L. Sun, Z. Lei, and W. Xu, “Distributed video transcoding based on  MapReduce,” 2014  IEEE/ACIS  13th Int.  Conf.  Comput.  Inf.  Sci.  ICIS  2014  - Proc. , pp. 309–314, 2014, doi:
10.1109/ICIS.2014.6912152.
[7]  Y. Xu, “Design and Implementation of a Multi Video Transcoding Queue Based on MySQL and FFMPEG,” pp. 629–632.
[8]  N.  Jain,  “Production-ready  environment for  HLS  Player  using  FFmpeg  with automation on S3 Bucket using Ansible,” pp. 26–29.
[9]  O.  Pahlevi,  A.  Mulyani,  and  M.  Khoir, “Sistem  Informasi  Inventori  Barang dengan  Meerode  Oriented  di  PT.
LivazaTeknologi  Indonesia  Jakarta,” J.
Prosisko , vol. 5, no. 1, pp. 27–35, 2018.
[10]  A. Yusuf, “Analisis Static Site Generator Pada Web Responsif Portal Berita,” 2021.
[11]  H.  A.  Purnama,  “Pengembangan  Dan Maintenance Aplikasi Kesehatan Pada PT. Global Urban Esensial,” 2020.
[12]  F.  Rifandi,  T.  V.  Adriansyah,  R. Kurniawati, and P. P. Ganesha, “Jurnal E- Komtek  Website  Gallery  Development Using Tailwind CSS Framework,” vol. 6, no. 2, pp. 205–214, 2022.
[13]  Y. A. Permana and R. Puji, “Perancangan Sistem  Informasi  Penjualan  Perumahan Mengunakan  Metode  Sdlc  Pada  Pt. Mandiri  Land  Prosperous  Berbasis Mobile,” Vol. 10 Nomor 2 Desember 2019
ISSN    2407-3903 ,  vol.  84,  no.  10,  pp. 1511–1518, 2019,
doi: 10.1134/s0320972519100129.
[14]  A. Fatoni and D. Dwi, “Rancang Bangun Sistem  Extreme  Programming  Sebagai Metodologi  Pengembangan  Sistem,”
Prosisko ,  vol.  3,  no.  1,  pp.  1–4,  2016,
[Online]. Available: http://e- jurnal.lppmunsera.org/index.php/PROSIS
KO/article/view/116.
[15]  Y.  D.  Wijaya  and  M.  W.  Astuti, “Pengujian  Blackbox  Sistem  Informasi Penilaian  Kinerja  Karyawan  Pt  Inka (Persero) Berbasis Equivalence Partitions,” J.  Digit.  Teknol.  Inf. ,  vol.  4, no. 1, p. 22, 2021, doi: 10.32502/digital.v4i1.3163.
[16]  M. Nurudin, W. Jayanti, R. D. Saputro, M. P.  Saputra,  and  Y.  Yulianti,  “Pengujian Black  Box  pada  Aplikasi  Penjualan Berbasis  Web  Menggunakan  Teknik Boundary  Value  Analysis,” J.  Inform.
Univ.  Pamulang ,  vol.  4,  no.  4,  p.  143, 2019,
doi:
10.32493/informatika.v4i4.3841.
[17]  J.  Jakob,  “Axios,”  2020.  https://axios- http.com/.