Baiklah kita telah sampai tahap terakhir dari rangkaian “Trilogi” membuat aplikasi catalogue movie. Bagi yang baru buka tutorial ini silakan ikuti dua tutorial sebelumnya di link berikut ini.

1. Part 1 Tutorial Membuat Aplikasi Catalogue Movie – Persiapan API data dari TMDb
2. Part 2 Tutorial Membuat Aplikasi Catalogue Movie – Membuat tampilan aplikasi
3. Part 3 – Postingan ini 🙂

Pada postingan ini akan dibahas bagaimana menampilkan data yang diambil dari TMDb. Mekanisme pengambilan data adalah memanfaatkan web service API yang disediakan TMDb yang sebelumnya telah kita coba di part yang pertama. Langsung saja kita mulai.

Melengkapi kode main.js

Pada postingan ini akan lebih fokus ke bagian javascriptnya di file yang telah kita buat di postingan sebelumnya, yaitu file main.js. Beberapa fungsi/fitur yang akan kita buat adalah sesuai dengan list menu pada menu splitter/menu hamburger. Fitur tersebut adalah Cari Film, menampilkan Film yang sedang tayang dan menampilkan Film yang akan segera release. Fitur-fitur tersebut akan kita bahas satu persatu.

Fitur Cari Film

Pada postingan kedua terdapat tahapan membuat file dengan nama main.js. Silakan buka kembali kemudian tambahkan kode berikut di bawahnya kode yang telah dibuat sebelumnya.

function cari(){
  var judulFilm = document.getElementById('input').value;
  var url = `https://api.themoviedb.org/3/search/movie?api_key=ISI_API_KEY_ANDA&query=${judulFilm}`;
  $.ajax({
    url: url,
    method: 'GET',
    dataType: 'JSONP',
    success: function (res) {
      var print = "";
      var movie = res.results;
      for (var i = 0; i < movie.length; i++) {
        print += `
          <ul class="list" style="padding: 10px; margin-top: 20px;">
            <li class="list-item">
              <div class="list-item__left">
                <img src="https://image.tmdb.org/t/p/w500/${movie[i].poster_path}" style="width: 100%; height: 150px" alt="${movie[i].title}">
              </div>
              <div class="list-item__center">
                <div class="list-item__subtitle"><b>${movie[i].title}</b></div>
                <div class="list-item__subtitle">${movie[i].overview.substring(0, 40)} ...</div>
                <div class="list-item__subtitle"><b>Release Date :</b> ${movie[i].release_date}</div>
                <div class="list-item__subtitle"><b>Vote Count :</b> ${movie[i].vote_count}</div>
              </div>
            </li>
          </ul>
        `;
      }
      document.getElementById('isiPencarianFilm').innerHTML = print;
    },
    error: function (err) {
      console.log(err);
    }
  });
}

Kita buat function cari sesuai dengan nama function yang telah kita ketikkan di file HTML. Coba perhatikan di postingan kedua, pada file index.html di baris kode 88, yang kurang lebih kodenya seperti berikut

.....

<ons-search-input placeholder="Masukkan Judul Film" id="input" onchange="cari()"></ons-search-input>

.....

Function cari() yang baru kita buat akan tereksekusi ketika terjadi event onchange (ketika kursor keluar dari komponen) pada komponen <ons-search-input>.

Di dalam function cari() terdapat inisialisasi variabel url dimana di dalamnya terdapat ISI_API_KEY_ANDA, silakan ini diganti dengan API key milik anda sendiri. fungsi variabel url ini adalah untuk mendapatkan data dari TMDb API dalam bentuk json, menggunakan alamat url sesuai dengan ketentuan yang ada di dokumentasinya. Kemudian ada variabel judulFilm, variabel ini digunakan untuk mendapatkan data judul film sesuai dengan yang user inputkan pada textfield cari film.

Seperti yang dijelaskan di awal tutorial. Untuk mendapatkan data dari TMDb kita menggunakan sebuah fungsi dari jQuery, yaitu ajax. Ketika $.ajax() dipanggil, maka akan ada proses permintaan sesuatu. Di dalam fungsi ajax ada beberapa properti yaitu url, method, dan dataType. Selain properti terdapat juga callback function di dalam opsi success dan error.

• url, String yang berisi URL tujuan pengiriman permintaan
• method, Metode HTTP yang akan digunakan untuk permintaan (misalnya “POST”, “GET”, “PUT”)
• dataType, Jenis data yang dikembalikan dari server ke sisi client. dataType yang bisa digunakan diantaranya text, xml, json, script, atau html.
• success, fungsi yang harus dipanggil jika permintaan berhasil. Fungsi ini melewati tiga argumen: Data dikembalikan dari server, diformat sesuai dengan parameter dataType atau fungsi callback dataFilter (jika ditentukan0; string yang menggambarkan status; dan objek jqXHR (dalam jQuery 1.4.x, XMLHttpRequest)
• error, Suatu fungsi dipanggil jika permintaan gagal. Fungsi ini menerima tiga argumen: objek jqXHR (dalam jQuery 1.4.x, XMLHttpRequest), string yang menjelaskan jenis kesalahan yang terjadi dan objek pengecualian yang bersifat opsional(jika terjadi)

Ajax merupakan singkatan dari “Asynchronous JavaScript and XML“, merupakan metode dalam menggunakan JavaScript untuk mengirim dan menerima data dari server tanpa harus me-refresh halaman. sedangkan XML adalah sejenis markup language layaknya seperti HTML, yang kerap dipakai untuk mengirimkan data melalui internet.

Kapan data akan muncul? data akan muncul jika permintaan berhasil dijalankan dan secara otomatis mengejakan callback function di dalam success. Perhatikan baris kode 9-27 pada function cari() diatas. Baris tersebut merupakan mekanisme mengambil data yang akan ditampilkan. Terdapat juga mekanisme pengulangan untuk mengambil beberapa data sesuai hasil yang diperoleh. Dan baris 28 merupakan proses menampilkan data ke tampilan melalui id isiPencarianFilm.

Perhatikan bagian inisialisasi variabel var movie = res.results, ini merupakan variabel yang digunakan untuk mengambil objek res (sesuai parameter di function) dan field results. Kenapa field results? ini sesuai dengan dokumentasi di TMDb untuk mendapatkan data film melalui objek di field results. Setelah variabel movie diinisialisasi objek, maka selanjutnya untuk memanggil data film dengan cara memanggail movie diikuti dengan field apa yang akan diambil. Sebagai contoh kita akan memanggil judul dari film, maka caranya adalah memanggil dengan menulis movie[index].title. index disesuaikan urutan film yang didapatkan dari pencarian. Di contoh menggunakan variabel i karena menggunakan variabel pengulangan untuk mencetak judul sesuai urutannya. Untuk field lain silakan lihat langsung di dokumentasi.

Selesai sudah untuk fungsi cari, next untuk fungsi nowplaying dan upcoming.

Fitur Now Playing dan Upcoming

Fitur now playing digunakan untuk menampilkan film yang saat ini masih tayang di bioskop. Sedangkan upcoming untuk menampilkan film yang sebentar lagi akan release. Langsung saja ketik kode berikut di bawah function cari() yang sudah kita ketik sebelumnya.

function nowPlaying() {
  var nowPlayUrl = `https://api.themoviedb.org/3/movie/now_playing?api_key=ISI_API_KEY_ANDA&language=en-US`;
  $.ajax({
    url: nowPlayUrl,
    method: 'GET',
    dataType: 'JSONP',
    success: function (res) {
      var print = "";
      var movie = res.results;
      for (var i = 0; i < movie.length; i++) {
        print += `
          <ul class="list" style="padding: 10px; margin-top: 20px;">
            <li class="list-item">
              <div class="list-item__left">
                <img src="https://image.tmdb.org/t/p/w500/${movie[i].poster_path}" style="width: 100%; height: 150px" alt="${movie[i].title}">
              </div>
              <div class="list-item__center">
                <div class="list-item__subtitle"><b>${movie[i].title}</b></div>
                <div class="list-item__subtitle">${movie[i].overview.substring(0, 40)} ...</div>
                <div class="list-item__subtitle"><b>Release Date :</b> ${movie[i].release_date}</div>
                <div class="list-item__subtitle"><b>Vote Count :</b> ${movie[i].vote_count}</div>
              </div>
            </li>
          </ul>
        `;
      }
      document.getElementById('isiNowPlaying').innerHTML = print;
    },
    error: function (err) {
      console.log(err);
    }
  });
}

function upcoming() {
  var nowPlayUrl = `https://api.themoviedb.org/3/movie/upcoming?api_key=ISI_API_KEY_ANDA&language=en-US`;
  $.ajax({
    url: nowPlayUrl,
    method: 'GET',
    dataType: 'JSONP',
    success: function (res) {
      var print = "";
      var movie = res.results;
      for (var i = 0; i < movie.length; i++) {
          print += `
            <ul class="list" style="padding: 10px; margin-top: 20px;">
              <li class="list-item">
                <div class="list-item__left">
                  <img src="https://image.tmdb.org/t/p/w500/${movie[i].poster_path}" style="width: 100%; height: 150px" alt="${movie[i].title}">
                </div>
                <div class="list-item__center">
                  <div class="list-item__subtitle"><b>${movie[i].title}</b></div>
                  <div class="list-item__subtitle">${movie[i].overview.substring(0, 40)} ...</div>
                  <div class="list-item__subtitle"><b>Release Date :</b> ${movie[i].release_date}</div>
                  <div class="list-item__subtitle"><b>Vote Count :</b> ${movie[i].vote_count}</div>
                </div>
              </li>
            </ul>
          `;
      }
      document.getElementById('isiUpcoming').innerHTML = print;
    },
    error: function (err) {
      console.log(err);
    }
  });
}

Pada dasarnya dua function tersebut mekanisme atau cara kerjanya sama dengan function cari. Hanya saja function ini dikerjakan langsung ketika halaman dimuat (load halaman) tidak seperti function cari yang akan mengeksekusi setelah melakukan input judul film.

Coba perhatikan di URL dari nowplaying() dan upcoming(). Yang membedakan keduanya hanya pada bagian query ../now_playing?.. dan ../upcoming?.. saja, untuk yang lain masih sama.

Tahap terakhir kita tambahkan beberapa baris kode agar fungsi now playing dan upcoming dapat berjalan dengan semestinya. Tambahkan kode berikut pada bagian window.fn.load = function(page) {};    Sehingga kodenya menjadi seperti berikut

window.fn.load = function(page) {
  var content = document.getElementById('content');
  var menu = document.getElementById('menu');
  content.load(page)
  .then(menu.close.bind(menu));
  if(page == 'nowPlaying.html'){
    nowPlaying();
  }else if(page == 'upcoming.html'){
    upcoming();
  }
};

Jalankan kembali aplikasi melalui browser. Seharusnya semua sudah berfungsi dengan baik.

Build Aplikasi

Setelah semua selesai tahap terakhir untuk menjadikan aplikasi yang bisa diinstall di Android adalah proses build aplikasi melalui PhoneGap Build. Proses build sama dengan di tutorial sebelum-sebelumnya. Bagi yang baru baca ini silakan bisa berkunjung kehalaman ini dan yang ini.

Nah perlu diketahui untuk kasus ini kita memerlukan plugin whitelist untuk dapat berkomunikasi dengan data di eksternal (melalui internet, kasus ini adalah mengambil data dari TMDb API). Pengaturan plugin ini ada di file config.xml. Untuk lebih lanjut silakan pelajari dokumentasinya disini.

Baiklah kita sudah sampai pada penghujung tutorial membuat Aplikasi Catalogue Movie. Semoga bermanfaat bagi yang membaca dan mempraktekkannya. Sampai jumpa di tutorial berikutnya. Jika ada pertanyaan silakan komen di bawah ini.

Enjoy Learning and Happy Coding.