Jurnal Elektronik Ilmu Komputer Udayana

Volume 12, No 1. August 2023

p-ISSN: 2301-5373

e-ISSN: 2654-5101

Pemanfaatan Api Dalam Menampilkan Data Dinamis Untuk Sistem Informasi Film

Tri Adi Ningsiha1, I Made Widiarthaa2

aProgram Studi Informatika, Fakultas Matematika dan Ilmu Pengetahuan Alam, Universita Udayana

Bali, Indonesia

1[email protected]

2[email protected]

Abstract

Saat ini pertumbuhan teknologi komputer semakin hari semakin mengalami perkembangan. Perkembangan teknologi komputer yang semakin cepat juga berpengaruh ke perkembangan bahasa pemrograman. Dalam menyusun sebuah sistem informasi saat ini tidak cukup hanyan menggunakan satu bahasa pemrograman saja, hal ini guna memenuhi kebutuhan teknologi yang makin bervariasi tentunya dengan tujuan yang berbeda. Beberapa kasus yang terjadi di dalam sebuah organisasi yang awalnya mereka merancang suatu sistem informasi dengan menggunakan bahasa pemrograman tertentu mengalami suatu permasalahan yang membuat mereka harus melakukan penyesuaian dan migrasi dengan biaya yang tak murah. Untuk menghindari permasalahn tersebut maka diperlukanlah sebuah aplikasi yang menjembatani berbagai macam platform dan bahasa pemrograman dalam sistem informasi yang telah berjalan, sehingga dibutuhkanlah API. API atau Application Programming Interface merupakan konsep yang bekerja pada lapisan logic dan database sehingga dapat digunakan untuk menjembatani sistem informasi ketika berkomunikasi antar perangkat lunak dan platform yang berbeda. Akses API menggunakan protokol HTTP, sehingga disebut dengan Web API agar mudah diakses kapan dan di mana pun selama terhubung dengan internet. Pada penelitian ini penulis merancang sebuah sistem informasi film dengan menerapkan bahasa pemrograman javascript dan CSS yang dengan memanfaatkan API. Metode yang digunakan dalam pembuatan aplikasi ini menggunakan metode SDLC yang bertujuan untuk memfokuskan pada setiap tahapan pengembangan sistem.

Keywords: Movie Information, SDLC, Website, API, Responsive

  • 1.   Pendahuluan

Film dalam kamus besar bahasa Indonesia memiliki arti sebagai selaput tipis yang terbuat dari seluloid yang berfungsi sebagai tempat gambar negatif(yang akan dibuat potret) maupun gambar positif(yang akan dimainkan di bioskop). Selain itu, film juga diartikan sebagai lakon(cerita) gambaran hidup (KBBI, 1990). Secara sifat film merupakan bagian dari komunikasi masa yang tidak terlepas dari hubungan anatara film dan masyarakat. Film merupakan salah satu media masa komunikasi dalam bentuk audio dan visual yang memiliki konsep cerita di dalamnya. Peminat film ini tidak hanya datang dari profesi industry film saja namu dari segala profesi yang ada saat ini. Semua masyarakat baik dari kalangan anak – anak , remaja atau bahkan lansia suka menonton film dikarenakan banyaknya genre yang ditawarkan dalam perfilman. Saat masyarakat ingin menonton film tentunya masyarakat membutuhkan sebuah informasi yang menyajikan film apa saja yang saat ini sedang popular, bagaimana alur cerita film tersebut lalu berapa penilaian masyrakat untuk film yang sudah tayang tersebut. Dengan mendapatkan informasi tersebut tentunya masyarakat akan lebih bergairah dalam menonton film. Setidaknya masyarakat memiliki gambaran singkat tentang film yang akan mereka tonton. Maka dari itu dirancanglah sebuah aplikasi berbasis website yang menyediakan informasi seputar perfilman baik di dalam maupun luar negeri. Aplikasi ini tidak hanya memberikan informasi seputar judul film saja namun aplikasi ini juga ajan menampilkan sinopsis film , dan rate dari film tersebut. Hal ini juga yang tentunya membuat penulis tertarik untuk menyusun penulisan ilmiah dengan materi yang akan disampaikan tentang pemanfaatan API dalam menampilkan data yang

dinamis pada dark movie. API ini termasuk ke dalam aplikasi yang berfungsi sebagai database film yang terdapat di dalam situs https://www.themoviedb.org/documentation/api. Pembentukan website sistem informasi film ini dimulai dengan website dark movie ini akan mengakses application programming interface film yang terhubung. Setelah website dark movie berhasil mengakses alamat API, permintaan data akan diteruskan ke server film. Selanjutnya website dark movie ini akan memberikan informasi jika aplikasi film tersebut memerlukan data seperti judul film, sinopsis film . Setelahnya API akan menstransfer informasi dari server ke aplikasi dark movie. Adapun beberapa komponen yang menyusun website ini adalah sebagai berikut :

`1.1 JSON

JSON (JavaScript Object Notation) adalah sebuah format untuk menyimpan dan menukar informasi secara terstruktur antara server dan client. Filenya hanya memuat teks dan berekstensi .json. Ada dua elemen inti dari objek JSON, yaitu key dan value.

`1.2Javascript

JavaScript adalah bahasa pemrograman yang digunakan untuk pengembangan website agar lebih dinamis.Website dinamis yang dimaksud berarti konten di dalamnya dapat bergerak atau mengubah apapun yang tampak di layar tanpa harus dimuat ulang secara manual. Penggunaan JavaScript dalam pengembangan website sering dikaitkan dengan HTML dan CSS. Hal ini karena dalam pembuatan website, ketiga elemen tersebut berperan penting dan saling berkaitan satu sama lain.

`1.3CSS

CSS adalah singkatan dari cascading style sheets. Menurut Techterms, CSS dapat diartikan sebagai lembar berjenjang untuk format tata letak halaman web. CSS merupakan sebuah temuan untuk membantu pengembang web yang tadinya hanya bergantung pada HTML sebagai bahasa markup. HTML di awal mula digunakan untuk menandai objek di halaman web seperti tabel, gambar, paragraf, dan sebagainya.

  • 2.    Metode Penelitian

Metode penelitian yang digunakan dalam pembuatan aplikasi dark movie berbasis website ini yaitu menggunakan System Development Life Cycle (SDLC). System Development Life Cycle atau yang dikenal dengan istilah SDLC adalah metodologi umum yang digunakan untuk mengembangkan sistem informasi. SDLC terdiri dari beberapa fase yang dimulai dari fase perencanaan, analisis, perancangan, implementasi hingga pemeliharaan sistem. Konsep System Development Life Cycle (SDLC) ini menjadi dasar dari berbagai pengembangan sistem informasi dalam membentuk kerangka kerja untuk perencanaan dan pengendalian sistem informasi.

  • a)    Tahap identifikasi

Pada tahap ini memunculkan sebuah permasalahan awal dari masyarakat yang menggemari dunia perfilman yang membutuhkan waktu yang sangat lama dalam mengakses sebuah aplikasi yang menyediakan informasi terkait perfilman maka di bangunlah sebuah website “Dark Movie” ini untuk mengatasi permasalahan para penggemar dunia perfilman. Dengan adanya website “Dark Movie” ini tentunya membuat masyarakat memiliki sedikit bayangan ataupun sudah mengetahui informasi terkait film yang akan tayang maupun yang belum tayang.

  • b)    Tahap Analisis

Pada tahapan ini penulis mengumpulkan informasi dan data berdasarkan studi pustaka yang berhubungan dengan buku-buku yang digunakan pada penulisan, dan juga kebutuhan yang diberikan oleh https://www.themoviedb.org/documentation/api sebagai database.

  • c)    Tahap Perancangan

Penulis membangun sistem informasi ini dimulai dengan membuat sebuah mockup terlebih dahulu lalu dilanjutkan dengan pengambilan data film berupa file JSON dari website https://www.themoviedb.org/documentation/api dengan menggunakan bahasa pemrograman Javascript, CSS .

  • d)    Tahap Implementasi

Untuk spesifikasi perangkat keras dan perangkat lunak yang digunakan penulis dalam membuat aplikasi ini penulis menggunakan satu unit laptop dengan processor AMD A4-9125 RADEON R3, 4 COMPUTE CORES 2C + 2G 2.30GHz , RAM yang berkapasitas 4.00 GB . Sedangkan

untuk desain antarmuka penulis menggunakan https://app.diagrams.net/ . Untuk code editor penulis menggunakan visual studio code dengan extensi live server. Untuk browser yang digunakan google chrome dan Microsoft edge dan database yang digunakan ialah TMDb API.

  • e)    Tahap Uji Coba

Setelah aplikasi selesai dibuat penulis melakukan uji coba dengan menggunakan localhost:8080/# . Adapun dilakukannya uji cob aini untuk memastikan apakah aplikasi yang kita buat dapat berjalan dengan baik.

  • 3.    Hasil dan Pembahasan

Pembuatan aplikasi dirancang dengan membuat desain mockup terlebih dahulu , hal ini berguna untuk developer agar mengetahui atau melihat gambaran dari suatu produk sebelum produk aslinya dirilis.

`3.1 Perancangan Aplikasi

Gambar 1. Mockup aplikasi

Pada rancangan mockup diatas penulis akan memaparkan beberapa penjelasan dari desain tersebut yaitu :

  • 1)    Judul, pada bagian ini akan berisi judul dari aplikasi yang penulis buat

  • 2)    Input, pada bagian ini digunakan sebagai fitur pencarian judul film

  • 3)  Button 1, 2, 3, 4 digunakan untuk menampilkan beberapa menu yang tersedia

  • 4)  Image 1, 2, dst digunakan untuk poster dari film yang akan ditampilkan

  • 5)    Teks view 1 digunakan untuk menampilkan judul dari film yang akan ditampilkan

  • 6)    Teks view 2 digunakan untuk menampilkan sinopsis dari film yang akan ditampilkan

  • 7)    Button digunakan untuk menampilkan detail dari sebuah film yang akan ditampilkan yang berisi tanggal rilis film tersebut, kepopuleran film tersebut, vote file tersebut, bahasa yang digunakan serta synopsis dari film tersebut.

  • 8)    Footer berisi informasi yang akan ditampilkan di bagian bawah website

`3.2Implementasi Aplikasi

Berikut ini merupakan tahapan implementasi aplikasi yang telah penulis kerjakan dengan bantuan visual studio code dengan ekstensi live server :

Gambar 2. Tampilan awal aplikasi

Gambar diatas merupakan tampilan awal pada saat user akan menggunakan aplikasi dark movie ini, dimana di halaman awal terdapat beberapa informasi mengenai film, berisi button search yang digunakan untuk mencari kata kunci dari film yang akan dicari lalu ada beberapa pilihan menu yang akan menyajikan film berdasarkan film yang sedang tayang, film yang akan segera hadir, film yang banyak dicari atau dibicarakan, film yang banyak di tonton oleh masyrakat dan film yang ditampilkan berdasarkan rating.

Gambar 3. Tampilan hasil pencarian

Gambar diatas merupakan hasil pencarian dengan memasukan kata kunci yang ingin dicari, maka website akan memunculkan hasil pencarian berdasarkan kata kunci

Gambar 4. Tampilan detail film

Gambar diatas merupakan tampilan dari button detail, adapun informasi yang akan ditampilkan berisi tanggal release, seberapa popular film itu ditonton, vote dari penonton untuk film tersebut dan bahasa yang digunakan dalam film tersebut.

  • Gambar 5. Tampilan responsive aplikasi

Untuk gambar diatas menjelaskan bahwa website yang penulis buat bersifat responsive pada saat akan dijalankan di smartphone ukuran website tersebut akan mengikuti ukuran dari layar device yang digunakan.

`3.3Implementasi API pada Aplikasi

Dalam menampilkan data movie di aplikasi ini, saya memanfaatkan data dari themoviedb.org. Untuk memanfaatkan API tersebut, kita membutuhkan sebuah api key. Karena api key bersifat personal dan rahasia, Anda bisa membuatnya untuk sendiri. Simak tutorialnya pada tautan berikut: https://www.dicoding.com/blog/registrasi-testing-themoviedb-api/. Adapun langkah-langkah dalam merancang aplikasi ini dengan memanfaatkan API adalah sebagai berikut :

Gambar 6. Tampilan registrasi

  • 2.    Isi form registrasi sesuai dengan data masing-masing, lalu Klik tombol Daftar

Gambar 7. Tampilan form regitrasi

  • 3.    Setelah Daftar, silakan cek email yang didaftarkan tadi, karena kita akan diminta untuk konfirmasi email terlebih dahulu

Gambar 8. Tampilan konfirmasi email

  • 4.    Buka email konfirmasi yang sudah dikirim tadi, lalu klik tombol Activate My Account

Gambar 9. Tampilan fitur active account

  • 5.    Setelah aktivasi, sekarang kita sudah bisa masuk/login ke akun kita.

Gambar 10. Tampilan login

  • 6.    Setelah masuk ke halaman dashboard, klik profile akun kamu di atas pojok kanan, lalu pilih

menu Setting.

Most Watched Genres

Vou haven't logged any movies or TV shows.

Upcoming From Watchlist

Recent Discussions

You are not Watchingany discussions.

Gambar 10. Tampilan menu profile

  • 7.    Kali ini kita akan membuat API Key, yang nanti akan kita gunakan untuk mengambil data film. Klik Menu API pada kolom setting di sebelah kiri, dan pilih register sebagai Developer

Gambar 11. Tampilan menu API

  • 8.    Setelah itu akan muncul halaman Approve Term Of Use. Jika sudah selesai membaca, silakan

klik tombol Terima

Gambar 12. Tampilan halaman approve term

  • 9.    Isi form sesuai data masing masing. Note : untuk url aplikasi silakan isi dengan link dummy terlebih dahulu e.g. link profile github

Gambar 13. Tampilan form note

  • 10.    Selamat, API Key sudah berhasil dibuat, dan sekarang kita coba test request get data film menggunakan API Key yang tadi sudah kita buat

Gambar 14. Tampilan API Key

Gambar 15. Tampilan dokumentasi API

  • 12.    Di sini kita akan test request get list data film yang akan datang (Upcoming). Klik menu MOVIES di sebelah kiri, lalu pilih yang GET LIST. Di sana sudah tertulis url nya, parameternya, dan responsenya. Tentunya ini akan lebih memudahkan kita.

Gambar 16. Tampilan request API

  • 13.    Untuk mencoba nya, silakan klik tab Try It out, lalu isi fields yang dibutuhkan dan klik tombol Send Request. Note : Untuk API Key nya, silakan teman teman lihat step ke-10 dan copy API Key (V3 Auth)

Gambar 17. Tampilan proses request

  • 14.    Jika send request, nanti akan muncul json list upcoming movie-nya, seperti gambar di bawah ini, begipun untuk kriteria movie yang akan ditampilkan di menu aplikasi ini.

Gambar 18. Tampilan request API berhasil

  • 4.    Conclusion

Proses pembuatan aplikasi berbasis website ini berguna untuk masyarakat yang menggemari dunia perfilman. Sebelum menonton film tersebut masyarakat bisa mencari informasi pada website ini hanya dengan memasukan kata kunci berdasarkan judul film . Pada website ini juga dapat menampilkan film berdasarkan now playing, coming soon, popular movies, trending movies, top rated movies yang membuat pengguna update tentang film terkini. Data film yang didapat untu proses pemberian informasi kepada developer ini menggunakan TMDb API yang dimana API ini bersifat public sehingga banyak pengembang yang belum melakukan tambah dan juga modifikasi data. Oleh karena itu selalu cek secara berkala terhadap aplikasi yang dibuat. Selain itu juga tidak adanya akun user dalam aplikasi ini sehingga pegguna tidak bisa mereview film tersebut.

References

  • [1]    M. A. M. Alfathoni and D. Manesah, Pengantar Teori Film, Yogyakarta: Deepublish Publisher, 2020.

  • [2]    A. A. Wahid, "Analisis Metode Waterfall Untuk Pengembangan Sistem Informasi," 2020.

  • [3]    D. Saputra, "Mengenal Javascript," dicoding. [Online]. [Accessed 30 9 2022].

  • [4]    V. H. Pranatawijaya, "Penerapan google maps api pada sistem informasi geografis (sig) tempat wisata dan rekreasi kota palangkaraya berbasis web," Jurnal Teknologi Informasi: Jurnal Keilmuan dan Aplikasi Bidang Teknik Informatika , 2014.

  • [5]    S. Mariko, "Aplikasi website berbasis HTML dan JavaScript untuk menyelesaikan fungsi integral pada mata kuliah kalkulus.," Jurnal Inovasi Teknologi Pendidikan , 2019.

  • [6]    A. Zein, "Peran Text Processing Dalam Aplikasi Penerjemah Multi Bahasa Menggunakan Ajax Api Google," urnal ESIT (E-Bisnis, Sistem Informasi, Teknologi Informasi), 2021.

Halaman ini sengaja dibiarkan kosong

44