Setelah pada postingan sebelumnya kita mendaftar dan mencoba API dari themoviedb(TMDb), sekarang kita akan melanjutkan pada bagian berikutnya.
List “Trilogi” tutorial membuat aplikasi catalogue movie:
- Menyiapkan akun TMDb dan mempelajari dokumentasi penggunaan API-nya.
- Membuat tampilan aplikasi (postingan ini)
- Membuat fungsi-fungsi (fitur) dari aplikasi beserta build aplikasi
Pada lanjutan tutorial kali ini kita akan membuat tampilan serta navigasi dari aplikasi catalogue movie. Seperti biasa kita akan memanfaatkan framework UI untuk membantu dalam pembuatan tampilan. Kita menggunakan OnsenUI untuk mempercantik tampilan aplikasi kita. Langsung saja kita mulai yok.
Persiapan (Download dan Setting Projek)
Silakan download master Onsen UI di website resminya https://onsen.io/. Kemudian buat folder yang digunakan untuk menempatkan projek yang akan kita buat. Beri nama “App Katalog Film”. Setelah itu extract beberapa file dari master Onsen UI yang telah di download sebelumnya. File yang diextract adalah semua file di dalam folder js dan css. Perhatikan Gambar berikut, terdapat 2 folder yang telah diextract.
Silakan bisa dicek di dalamnya terdapat file utama untuk membuat tampilan menggunakan Onsen UI.
Nah berikutnya tidak kalah penting, yaitu jQuery. Download jQuery untuk kebutuhan penggunaan fungsi-fungsi yang dapat membantu proses penulisan javascript lebih efisien. Dalam hal ini JQuery akan kita gunakan untuk penggunana fungsi ajax. Silakan download di https://jquery.com/ kemudian copykan ke dalam folder js di dalam projek App Katalog Film. Sehingga di folder js terdapat 2 file javascript, onsenui dan jquery.
Mulai Ngoding
Pada kesempatan pertama ini kita akan menggunakan OnsenUI lebih lanjut dibandingkan postingan ini. Kita hanya akan menggunakan satu file (index.html) untuk membuat tampilan. Perlu diketahui di OnsenUI dalam membuat halaman/tampilan aplikasi dapat menggunakan salah satu dari 2 cara yang dapat kita pelajari lebih lanjut DISINI. Kita gunakan satu file untuk mempersingkat waktu saja dan “memudahkan” penggunaannya (Nanti kapan-kapan akan dibahas 2 cara tersebut). Well, langsung saja silakan buat file baru di root aplikasi dan beri nama index.html dan ketikkan kode berikut.
<!DOCTYPE html>
<html>
<head>
<title>Katalog Film</title>
<link rel="stylesheet" href="css/font_awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/onsenui.min.css">
<link rel="stylesheet" href="css/onsen-css-components.min.css">
<script src="js/onsenui.min.js"></script>
<script src="js/jquery.js"></script>
</head>
<body>
<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item onclick="fn.load('home.html')" tappable>
Beranda
</ons-list-item>
<ons-list-item onclick="fn.load('film.html')" tappable>
Pencarian Film
</ons-list-item>
<ons-list-item onclick="fn.load('nowPlaying.html')" tappable>
Sedang Tayang
</ons-list-item>
<ons-list-item onclick="fn.load('upcoming.html')" tappable>
Film Release Terdekat
</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>
About
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>
<template id="home.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Beranda
</div>
</ons-toolbar>
<div style="height: 200px; padding: 1px 0 0 0;">
<div class="card card--material">
<div class="card__title card--material__title" style="text-align: center">
Selamat Datang Di Aplikasi Katalog Film
</div>
<br>
<div class="card__content card--material__content" style="text-align: justify;">
Menonton Film adalah hiburan tersendiri bagi penikmatnya. Ayo cari tau informasi film yang akan ditonton atau bahkan yang sudah ditonton.
</div>
<br>
<div>
<img src="images/marvel.jpg" width="100%">
</div>
<br>
<div class="card__content card--material__content" style="text-align: justify;">
Pada aplikasi ini terdapat beberapa menu yang berkaitan dengan data film. Terdapat menu pencarian film yang digunakan untuk melakukan pencarian film yang dikehendaki dengan menginputkan judul film. Selain itu terdapat menu untuk melihat Film yang sedang tayang saat ini di bioskop, serta menu untuk melihat Film yang akan segera release di pasaran.
</div>
<br>
</div>
</div>
</ons-page>
</template>
<template id="film.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Pencarian Film
</div>
</ons-toolbar>
<div style="height: 200px; padding: 1px 0 0 0;">
<div class="card card--material">
<div class="card__title card--material__title">Cari Film </div>
<div class="card__content card--material__content" style="text-align: justify;">
<ons-search-input placeholder="Masukkan Judul Film" id="input" onchange="cari()"></ons-search-input>
<br>
<div id="isiPencarianFilm"></div>
</div>
</div>
</div>
</ons-page>
</template>
<template id="nowPlaying.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Sedang Tayang
</div>
</ons-toolbar>
<div style="height: 200px; padding: 1px 0 0 0;">
<div class="card card--material">
<div class="card__title card--material__title">Film yang Sedang Tayang </div>
<div class="card__content card--material__content" style="text-align: justify;">
<div id="isiNowPlaying"></div>
</div>
</div>
</div>
</ons-page>
</template>
<template id="upcoming.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Film Release Terdekat
</div>
</ons-toolbar>
<div style="height: 200px; padding: 1px 0 0 0;">
<div class="card card--material">
<div class="card__title card--material__title">Film yang akan Release</div>
<div class="card__content card--material__content" style="text-align: justify;">
<div id="isiUpcoming"></div>
</div>
</div>
</div>
</ons-page>
</template>
<template id="about.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
About
</div>
</ons-toolbar>
<div style="height: 200px; padding: 1px 0 0 0;">
<div class="card card--material">
<div class="card__title card--material__title">Tentang Kami</div>
<div class="card__content card--material__content">
<div class="card__content card--material__content" style="text-align: justify;">
Aplikasi Katalog Film v.1.0.1
</div>
</div>
<br>
<div class="card__content card--material__content">
<div class="card__content card--material__content" style="text-align: justify;">
Silakan hubungi jika ada pertanyaan maupun jika menemukan bug melalui media yang tersedia di bawah ini.
</div>
</div>
</div>
<ons-list modifier="inset">
<ons-list-item>
<div class="left">
<i class="fa fa-map-o fa-2x" aria-hidden="true"></i>
</div>
<div class="center">
<span class="list-item__title">Alamat</span><span class="list-item__subtitle">STMIK Widya Pratama, Jl Patriot No.25 Pekalongan</span>
</div>
</ons-list-item>
<ons-list-item>
<div class="left">
<i class="fa fa-whatsapp fa-2x" aria-hidden="true"></i>
</div>
<div class="center">
<span class="list-item__title">Whatsapp</span><span class="list-item__subtitle">+6285640091681</span>
</div>
</ons-list-item>
<ons-list-item>
<div class="left">
<i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
</div>
<div class="center">
<span class="list-item__title">Email</span><span class="list-item__subtitle">reza.stmikwp@gmail.com</span>
</div>
</ons-list-item>
</ons-list>
</div>
</ons-page>
</template>
<script src="js/main.js"></script>
</body>
</html>
Perhatikan pada baris nomor 60 dimana kita menggunakan gambar. Silakan tambahkan folder images di root aplikasi, kemudian masukkan gambar(bebas, dapat download sendiri) dan sesuaikan nama gambar dengan penulisan di dalam src=”namaimage.ekstensi” yang harus sama persis.
Lumayan banyak ya ngetiknya. Jangan kuatir akan kita bahas pada bagian berikutnya. Jangan lupa disimpan, kemudian jalankan index.html melalui browser. Kurang lebih tampilan seperti gambar di bawah ini.
Selanjutnya tambahkan file js untuk membuat fungsi menu agar dapat menampilkan halaman-halaman. Buat file dengan nama main.js dan disimpan pada folder js. Lengkapi kode menjadi berikut:
window.fn = {};
window.fn.open = function() {
var menu = document.getElementById('menu');
menu.open();
};
window.fn.load = function(page) {
var content = document.getElementById('content');
var menu = document.getElementById('menu');
content.load(page)
.then(menu.close.bind(menu));
};
Jalankan kembali index.html melalui browser dan coba klik menu, maka akan muncul beberapa pilihan list daftar halaman. Kurang lebihnya seperti gambar di bawah ini
Penjelasan Kode Program
Sekarang saatnya untuk membedah kode program yang telah diketik. Dimulai dari file index.html terlebih dahulu. Baris kode 5 sampai 9 yang merupakan pemanggilan untuk mengikutsertakan framework OnsenUI dan jQuery yang telah di download. Hal ini diperlukan untuk dapat memanggil komponen dari OnsenUI dan fungsi-fungsi dari jQuery.
<!DOCTYPE html> <html> <head> <title>Katalog Film</title> <link rel="stylesheet" href="css/font_awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="css/onsenui.min.css"> <link rel="stylesheet" href="css/onsen-css-components.min.css"> <script src="js/onsenui.min.js"></script> <script src="js/jquery.js"></script> </head> <body> </body> </html>
Setelah selesai pemanggilan framework OnsenUI dan jQuery selanjutnya mulai mendesain tampilan menu. Pada latihan kali ini kita membuat sebuah menu (splitter/hamburger menu) yang jika di klik akan memunculkan daftar link ke halaman-halaman lain. Perhatikan baris kode 12 sampai 35, ini merupakan bagian untuk membuat list daftar link di bagian splitter/menu di samping.
<!DOCTYPE html>
<html>
<head>
<title>Katalog Film</title>
<link rel="stylesheet" href="css/font_awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/onsenui.min.css">
<link rel="stylesheet" href="css/onsen-css-components.min.css">
<script src="js/onsenui.min.js"></script>
<script src="js/jquery.js"></script>
</head>
<body>
<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item onclick="fn.load('home.html')" tappable>
Beranda
</ons-list-item>
<ons-list-item onclick="fn.load('film.html')" tappable>
Pencarian Film
</ons-list-item>
<ons-list-item onclick="fn.load('nowPlaying.html')" tappable>
Sedang Tayang
</ons-list-item>
<ons-list-item onclick="fn.load('upcoming.html')" tappable>
Film Release Terdekat
</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>
About
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>
<ons-splitter>
tag <ons-splitter> merupakan indikasi kita menggunakan komponen ons-splitter. ons-splitter merupakan sebuah komponen yang memungkinkan kita membuat 2 buah layout secara bersamaan dan mengimplementasikan konsep slide untuk membuka layout lainnya (layout menu). Coba jalankan kembali index.html, klik menu hamburger, maka akan muncul layout lain yang berisi menu.
Di dalam <ons-splitter> terdapat tag <ons-splitter-side> dan </ons-splitter-content> . Ini merupakan masing-masing bagian layout dari dua layout yang ada. <ons-splitter-side> untuk layout menu yang akan muncul ketika kita klik menu hamburger atau slide. Kemudian </ons-splitter-content> merupakan layout untuk isi/halaman yang muncul sesuai menu yang dipilih. Kita bahas satu persatu ya.
Bagian <ons-splitter-side> kita bahas dahulu. Di dalamnya terdapat <ons-page> yang digunakan untuk membuat sebuah halaman untuk meletakkan komponen-komponen yang akan kita gunakan. Di halaman <ons-splitter-side> kita buat list untuk membuat link menu untuk beberapa halaman lain. Kita gunakan <ons-list> untuk membuat list dan link masing-masing list kita masukkan dalam tag <ons-list-item>. <ons-list-item> memiliki atribut onclick dan menjalankan sebuah fungsi. Pada kasus ini jika sebuah list diklik maka akan menjalankan sebuah fungsi, misal fn.load(‘home.html’). Dimana fungsi ini digunakan untuk membuka halaman yang dituju yaitu home.html.
Bagian kedua adalah <ons-splitter-content> terdapat atribut id=”content” sebagai idnya dan page=”home.html” sebagai halaman yang aktif. Bagian kedua ini saling berhubungan dengan bagian pertama yaitu page akan menyesuaikan dengan halaman yang dimuat di dalam fungsi fn.load.
Perhatikan isi fungsi fn.load (baris 8 sampai 13 pada file main.js) di atas. Terdapat inisialisasi 2 komponen, menu dan content (ini merupakan 2 layout pada konsep splitter) yang berisi DOM element dari masing-masing layout. Fungsi berikutnya akan melakukan pemanggilan halaman, yaitu fungsi content.load(page) dimana akan dimuat halaman yang sesuai. Dan terakhir menyembunyikan layout menu pada fungsi then(menu.close.bind(menu)).
<template id=”…..”>
Setelah selesai membuat menu selanjutnya adalah membuat halaman dari masing-masing link menu pada list. Seperti yang telah dijelaskan di awal, latihan ini kita menggunakan satu file untuk semua halaman, sehingga kita menggunakan <template> untuk membuatnya. Perhatikan di index.html, terdapat lima tag template yang masing-masing template merupakan masing-masing halaman pada list menu. Yang membedakan adalah value/nilai dari atribut id di dalam tag template. Sebagai contoh untuk halaman about pada baris kode 143 sampai 198 di index.html.
<!DOCTYPE html>
<html>
<head>
<title>Katalog Film</title>
<link rel="stylesheet" href="css/font_awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/onsenui.min.css">
<link rel="stylesheet" href="css/onsen-css-components.min.css">
<script src="js/onsenui.min.js"></script>
<script src="js/jquery.js"></script>
</head>
<body>
<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item onclick="fn.load('home.html')" tappable>
Beranda
</ons-list-item>
<ons-list-item onclick="fn.load('film.html')" tappable>
Pencarian Film
</ons-list-item>
<ons-list-item onclick="fn.load('nowPlaying.html')" tappable>
Sedang Tayang
</ons-list-item>
<ons-list-item onclick="fn.load('upcoming.html')" tappable>
Film Release Terdekat
</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>
About
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>
<template id="home.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Beranda
</div>
</ons-toolbar>
<div style="height: 200px; padding: 1px 0 0 0;">
<div class="card card--material">
<div class="card__title card--material__title" style="text-align: center">
Selamat Datang Di Aplikasi Katalog Film
</div>
<br>
<div class="card__content card--material__content" style="text-align: justify;">
Menonton Film adalah hiburan tersendiri bagi penikmatnya. Ayo cari tau informasi film yang akan ditonton atau bahkan yang sudah ditonton.
</div>
<br>
<div>
<img src="images/marvel.jpg" width="100%">
</div>
<br>
<div class="card__content card--material__content" style="text-align: justify;">
Pada aplikasi ini terdapat beberapa menu yang berkaitan dengan data film. Terdapat menu pencarian film yang digunakan untuk melakukan pencarian film yang dikehendaki dengan menginputkan judul film. Selain itu terdapat menu untuk melihat Film yang sedang tayang saat ini di bioskop, serta menu untuk melihat Film yang akan segera release di pasaran.
</div>
<br>
</div>
</div>
</ons-page>
</template>
<template id="film.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Pencarian Film
</div>
</ons-toolbar>
<div style="height: 200px; padding: 1px 0 0 0;">
<div class="card card--material">
<div class="card__title card--material__title">Cari Film </div>
<div class="card__content card--material__content" style="text-align: justify;">
<ons-search-input placeholder="Masukkan Judul Film" id="input" onchange="cari()"></ons-search-input>
<br>
<div id="isiPencarianFilm"></div>
</div>
</div>
</div>
</ons-page>
</template>
<template id="nowPlaying.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Sedang Tayang
</div>
</ons-toolbar>
<div style="height: 200px; padding: 1px 0 0 0;">
<div class="card card--material">
<div class="card__title card--material__title">Film yang Sedang Tayang </div>
<div class="card__content card--material__content" style="text-align: justify;">
<div id="isiNowPlaying"></div>
</div>
</div>
</div>
</ons-page>
</template>
<template id="upcoming.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Film Release Terdekat
</div>
</ons-toolbar>
<div style="height: 200px; padding: 1px 0 0 0;">
<div class="card card--material">
<div class="card__title card--material__title">Film yang akan Release</div>
<div class="card__content card--material__content" style="text-align: justify;">
<div id="isiUpcoming"></div>
</div>
</div>
</div>
</ons-page>
</template>
<template id="about.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
About
</div>
</ons-toolbar>
<div style="height: 200px; padding: 1px 0 0 0;">
<div class="card card--material">
<div class="card__title card--material__title">Tentang Kami</div>
<div class="card__content card--material__content">
<div class="card__content card--material__content" style="text-align: justify;">
Aplikasi Katalog Film v.1.0.1
</div>
</div>
<br>
<div class="card__content card--material__content">
<div class="card__content card--material__content" style="text-align: justify;">
Silakan hubungi jika ada pertanyaan maupun jika menemukan bug melalui media yang tersedia di bawah ini.
</div>
</div>
</div>
<ons-list modifier="inset">
<ons-list-item>
<div class="left">
<i class="fa fa-map-o fa-2x" aria-hidden="true"></i>
</div>
<div class="center">
<span class="list-item__title">Alamat</span><span class="list-item__subtitle">STMIK Widya Pratama, Jl Patriot No.25 Pekalongan</span>
</div>
</ons-list-item>
<ons-list-item>
<div class="left">
<i class="fa fa-whatsapp fa-2x" aria-hidden="true"></i>
</div>
<div class="center">
<span class="list-item__title">Whatsapp</span><span class="list-item__subtitle">+6285640091681</span>
</div>
</ons-list-item>
<ons-list-item>
<div class="left">
<i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
</div>
<div class="center">
<span class="list-item__title">Email</span><span class="list-item__subtitle">reza.stmikwp@gmail.com</span>
</div>
</ons-list-item>
</ons-list>
</div>
</ons-page>
</template>
<script src="js/main.js"></script>
</body>
</html>
Sama seperti pada layout menu, layout content memiliki tag <ons-page> untuk menandakan sebuah halaman. Di dalam halaman content terdiri dari toolbar dan isi dari halaman. Untuk toolbar sendiri menggunakan tag <ons-toolbar seperti pada baris kode nomer 145 sampai 154. Jika diperhatikan di dalam toolbar terdapat 2 bagian, yaitu simbol pilihan menu/menu hamburger dan judul dari halaman. Kita bahas yang bagian menu hamburger-nya, terdapat pemanggilan sebuah fungsi ketika bagian simbol di klik/sentuh. Fungsi tersebut adalah fn.open() dimana fungsi ini akan menjalankan perintah untuk membuka layout menu, seperti yang ditunjukan pada baris kode 3 sampai 6 pada file main.js. Kemudian untuk isi halaman kita menggunakan komponen card agar lebih mempercantik tampilan.
Akhirnya selesai sudah penjelasannya. Jika ada yang belum jelas atau ada yang ingin ditanyakan silakan komentar di bawah ini. Oiya untuk referensi lebih jauh kita bisa mempelajari beberapa hal yang telah dibahas di link berikut ini:
https://onsen.io/v2/api/js/ons-splitter.html
https://onsen.io/theme-roller/
https://onsen.io/v2/api/js/ons-toolbar.html
Happy Learning and Coding. Enjoy it.
