Scribd
Unggah
47 tayangan16 halaman

Praktikum 10 - Web Frontend

Diunggah oleh

Malvin K
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
47 tayangan16 halaman

Praktikum 10 - Web Frontend

Diunggah oleh

Malvin K
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 16

Modul Praktikum

Pemrograman Web ©Sofyan Thayf, 2024

Praktikum 10

WEB FRONT END

Kompetensi Dasar: Memahami prinsip dan teknik membangun web dengan konsep service
oriented

1. Service Oriented Architecture


Pokok Bahasan:
2. Web Front End dan Back End
3. Aplication Programming Interface (API)

Indikator: 1. Dapat menjelaskan prinsip web berbasis service oriented


2. Dapat membuat dan menggunakan kode program JavaScript untuk
membuat web front end dan memanfaatkan Services API

Waktu: 2 x 50 menit (1 pertemuan)

A. RINGKASAN MATERI

STMIK KHARISMA Makassar 1


Modul Praktikum
Pemrograman Web ©Sofyan Thayf, 2024

B. PERSIAPAN PRAKTIKUM

1. Perangkat Keras
a. Perangkat komputer
2. Perangkat Lunak (ter-install di komputer, dan siap digunakan)
a. Text/code editor, dianjurkan menggunakan VSCode dengan plugins LiveServer yang sudah terinstall

b. Web Browser Google Chrome

3. Buat repository baru pada akun GitHub Anda, beri nama nama_user_anda.github.io, lalu clone ke computer
local (bisa menggunakan GitHub Desktop bila memungkinkan)

4. Buatlah folder baru dengan nama movie10 di dalam folder local nama_user_anda.github.io

5. Registrasi API key pada The Movie Database (TMDB)


a. Masuk ke situs TMDB pada URL https://www.themoviedb.org/ dan buat akun baru dengan klik pada link
Join TMDb (sebelah kanan atas), masukkan data-data yang diminta untuk membuat akun baru.

Cek email Anda, dan lakukan aktivasi akun melalui email yang dikirmkan oleh TMDB

Gambar 1

b. Setelah proses registrasi dan aktivasi selesai lakukan LOG IN ke TMBD


c. Setelah berhasil login, buka halaman https://www.themoviedb.org/settings/api untuk melakukan request
API key.

STMIK KHARISMA Makassar 2


Modul Praktikum
Pemrograman Web ©Sofyan Thayf, 2024

- Klik pada link click here di bagian Request an API Key (lihat Gambar 2)
- Pilih Developer pada halaman plihan kpeerluan sebagai Developer atau Professional
- Accept Term of Use
d. Isi data aplikasi yang sesuai dan seperlunya (lihat Gambar 3, hanya isian Address 2 yang boleh kosong)
- pilih Personal pada pilihan Type of Use
- Isi URL aplikasi dengan https://namauser.github.io/movie10 (sesuaikan dengan akun GitHub
Anda)
- Klik SUBMIT setelah isian lengkap

Gambar 2

Gambar 3

STMIK KHARISMA Makassar 3


Modul Praktikum
Pemrograman Web ©Sofyan Thayf, 2024

e. Jika tidak ada kesalahan pengisian, maka API key akan diberikan dan siap untuk digunakan (lihat
Gambar 4)

Gambar 4

C. KEGIATAN PRAKTIKUM

1. Buat direktori baru di dalam direktori praktikum Anda yang terhubung dengan GitHub dan beri nama movie10

2. Download style Paralax dari materializecss.con lalu Copy folder css/ dan js/ (bawaan template Paralax) ke
direktori movie10/

3. Buat juga direktori img dan pages di dalam direktori movie10.

4. Buat file baru di dalam direktori js, beri nama tmdb.js, dan di dalamnya buat sebuah variabel untuk menyimpan
API Key dan link URL dari API TMDB seperti contoh dalam Listing 1 (copy API key yang didapatkan pada
langkah persiapan, lihat Gambar 4)

Listing 1

const key = 'XXXX32karakterAPIkeydariTMDBXXXX'; //sesuai API Key Anda


const endpoint_url = 'https://api.themoviedb.org/3/';

STMIK KHARISMA Makassar 4


Modul Praktikum
Pemrograman Web ©Sofyan Thayf, 2024

5. Lakukan pencarian gambar bertema movie di Google, ambil gambar high resolution (berukuran di atas 1500
pixel), simpan di dalam direktori img

Optimasi gambar yang dipilih, melalui web app http://squoosh.com (lihat Gambar 5), untuk menghasilkan file
gambar dengan ukuran lebar gambar berturut-turut 1080pixel, 720 pixel dan 480 pixel. Sehingga di dalam
direktori img kini kita sudah memiliki file-file gambar dalam beberapa ukuran seperti berikut:

• movie_1080.jpg
• movie_720.jpg
• movie_480.jpg

Gambar 5

6. Buat file baru bernama index.html di dalam direktori movie10, dan tulis kode dari Listing 2

Listing 2

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css" media="screen,projection">
<link rel="stylesheet" href="css/style.css" media="screen,projection">

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>PWEB Movie</title>

STMIK KHARISMA Makassar 5


Modul Praktikum
Pemrograman Web ©Sofyan Thayf, 2024

</head>
<body>
<nav class="black" role="navigation">
<div class="nav-wrapper container">
<a href="/movie8" class="brand-logo white-text">PWEB Movie</a>
<ul class="topnav right hide-on-med-and-down">
<li><a href="#" class="white-text">Now Playing</a></li>
<li><a href="#" class="white-text">Up Coming</a></li>
<li><a href="#" class="white-text">Popular</a></li>
<li><a href="#" class="white-text">Top Rated</a></li>
</ul>

<ul id="nav-mobile" class="sidenav">


<li><a href="#">Now Playing</a></li>
<li><a href="#">Up Coming</a></li>
<li><a href="#">Popular</a></li>
<li><a href="#">Top Rated</a></li>
</ul>
<a href="#" data-target="nav-mobile" class="sidenav-trigger">
<i class="material-icons white-text">menu</i></a>
</div>
</nav>

<div id="index-banner" class="parallax-container">


<div class="section no-pad-bot">
<div class="container">
<h1 class="header center white-text">What is Your Movie</h1>
</div>
</div>
<div class="parallax">
<img src="img/movie_1080.jpg"
srcset="img/movie_480.jpg 480w,
img/movie_720.jpg 720w,
img/movie_1080.jpg 1080w"
size="100vw"
alt="movie"
style="transform: translate3d(-50%, 0px, 0px);opacity: 1;"
>
</div>
</div>

<div class="container">
<h4 id="section_title">Now Playing</h4>

<div class="row">
<div id="movie_list">
</div>
</div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-


2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/init.js"></script>

STMIK KHARISMA Makassar 6


Modul Praktikum
Pemrograman Web ©Sofyan Thayf, 2024

<script type="text/javascript" src="js/tmdb.js"></script>

</body>
</html>

7. Lihat tampilan halaman index.html Anda melalui Live Server (tidak bisa hanya dengan akses file)

Gambar 6

8. Buat file baru dalam folder movie10/js, beri nama api.js dan tulis kode dari contoh dalam Listing 3
Listing 3

//script untuk menangani proses response dari proses request API

function status(response) {
if (response.status !== 200) {
console.log("Error : " + response.status);
// Method reject() akan membuat blok catch terpanggil
return Promise.reject(new Error(response.statusText));
} else {
// Mengubah suatu objek menjadi Promise agar bisa "di-then-kan"
return Promise.resolve(response);
}
}
// Blok kode untuk mem-parsing json menjadi array JavaScript
function json(response) {
return response.json();
}
// Blok kode untuk meng-handle kesalahan di blok catch
function error(error) {
// Parameter error berasal dari Promise.reject()
console.log("Error : " + error);
}

STMIK KHARISMA Makassar 7


Modul Praktikum
Pemrograman Web ©Sofyan Thayf, 2024

9. Lakukan modifikasi di bagian akhir file index.html untuk menambahkan pemanggilan file script api.js, perhatikan
bagian yang diberi warna pada Listing 4 (perhatikan urutan pemanggilannya)

Listing 4

...

<script type="text/javascript" src="https://code.jquery.com/jquery-


2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<script type="text/javascript" src="js/api.js"></script>

<script type="text/javascript" src="js/tmdb.js"></script>

</body>
</html>

Pada prinsipnya semua script JavaScript dapat disatukan dalam satu file .js. Namun untuk memudahkan dalam
memahami dan penanganan kode, maka dalam contoh-contoh latihan, script ditulis dalam file-file terpisah, disamping
itu akan memudahkan untuk keperluan re-use (penggunaan kembali)

10. Buka web site https://developers.themoviedb.org/3, pelajari daftar services API yang tersedia serta cara
penggunaan dan format datanya (lihat Gambar 7)

11. Modifikasi file tmdb.js (yang baru berisi dua baris program), tambahkan function getListMovie() yang akan
melakukan request API ke server TMDB untuk mendapatkan film yang sedang diputar (Now Playing). Lihat contoh
kode pada Listing 5.

Gambar 7

STMIK KHARISMA Makassar 8


Modul Praktikum
Pemrograman Web ©Sofyan Thayf, 2024

Listing 5

const key = '608ce5e628b4dc66eea24ea292eb79b2';


const endpoint_url = 'https://api.themoviedb.org/3';

// Blok kode untuk melakukan request API

function getListMovie() {
fetch(endpoint_url + "/movie/now_playing?api_key=" + key + "&language=en-US&page=1")
.then(status)
.then(json)
.then(function(data) {
// Objek/array JavaScript dari response.json() masuk lewat data.
// Menyusun komponen card movie secara dinamis
var moviesHTML = "";
data.results.forEach(function(movie) {
moviesHTML += `
<div class="col m3 s6">
<div class="card">
<a href="./movie.html?id=${movie.id}">
<div class="card-image waves-effect waves-block waves-light">
<img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" />
</div>
</a>
<div class="card-content text-center">
<strong>${movie.title}</strong>
</div>
</div>
</div>
`;
});

document.getElementById("movie_list").innerHTML = moviesHTML;
})
.catch(error);
}

Berikut ini adalah sample data (satu record data) dalam format JSON yang merupakan response yang didapatkan dari
request API ke TMDB dengan request URL:
https://api.themoviedb.org/3/movie/now_playing?api_key=<API_key_Anda>&languag
e=en-US&page=1

Perhatikan nama-nama key (yang diberi highlight) yang dipanggil dalam kode program pada Listing 5
{
"results": [
{
"popularity": 422.288,
"vote_count": 5518,
"video": false,
"poster_path": "/udDclJoHjfjb8Ekgsd4FDteOkCU.jpg",
"id": 475557,
"adult": false,
"backdrop_path": "/n6bUvigpRFqSwmPp1m2YADdbRBc.jpg",

STMIK KHARISMA Makassar 9


Modul Praktikum
Pemrograman Web ©Sofyan Thayf, 2024

"original_language": "en",
"original_title": "Joker",
"genre_ids": [
80,
18,
53
],
"title": "Joker",
"vote_average": 8.4,
"overview": "During the 1980s, a failed stand-up comedian is driven
insane and turns to a life of crime and chaos in Gotham City while becoming
an infamous psychopathic crime figure.",
"release_date": "2019-10-02"
},

...
...
}

12. Modifikasi file index.html dengan menambahkan blok <script> .. </script> yang berisi pemanggilan
function getListMovie(), di bagian akhir dokumen (setelah pemanggilan script tmdb.js). Lihat contoh pada
Listing 6.

Jika kode program ditulis dengan benar, maka akan ditampilkan daftar film berdasarkan data yang didapatkan
dari TMDB (lihat Gambar 8)

Listing 6

...
<script type="text/javascript" src="js/tmdb.js"></script>

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {
var page = window.location.hash.substr(1);

getListMovie();
});
</script>
</body>

STMIK KHARISMA Makassar 10


Modul Praktikum
Pemrograman Web ©Sofyan Thayf, 2024

Gambar 8

Tugas:
Daftar film Anda belum menampilkan tanggal rilis (release date) seperti contoh dalam Gambar 8. Tambahkan kode
yang diperlukan dalam tmdb.js untuk menampilkan informasi tanggal rilis

13. Selanjutnya kita akan memfungsikan link menu navigasi untuk menampilkan kategori film yang lain (Up Coming,
Popular, dan Top Rated)

Tambahkan link ke #bookmark untuk setiap link navigasi di dalam file index.html, seperti contoh yag diberi warna
berbeda dalam Listing 7

Listing 7

...
<body>
<nav class="black" role="navigation">
<div class="nav-wrapper container">
<a href="/movie8" class="brand-logo white-text">PWEB Movie</a>
<ul class="topnav right hide-on-med-and-down">

STMIK KHARISMA Makassar 11


Modul Praktikum
Pemrograman Web ©Sofyan Thayf, 2024

<li><a href="#playing" class="white-text">Now Playing</a></li>


<li><a href="#upcoming" class="white-text">Up Coming</a></li>
<li><a href="#popular" class="white-text">Popular</a></li>
<li><a href="#toprated" class="white-text">Top Rated</a></li>
</ul>

<ul id="nav-mobile" class="sidenav">


<li><a href="#playing">Now Playing</a></li>
<li><a href="#upcoming">Up Coming</a></li>
<li><a href="#popular">Popular</a></li>
<li><a href="#toprated">Top Rated</a></li>
</ul>
<a href="#" data-target="nav-mobile" class="sidenav-trigger"><i
class="material-icons white-text">menu</i></a>
</div>
</nav>
...

14. Modifikasi blok <script> .. </script> (bukan menambah yang baru) yang berisi pemanggilan function
getListMovie(), di bagian akhir dokumen index.html, seperti contoh pada Listing 8

Listing 8

...
<script type="text/javascript" src="js/tmdb.js"></script>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
var page = window.location.hash.substr(1);

document.querySelectorAll(".topnav a, .sidenav a")


.forEach(function(element) {

element.addEventListener("click", function(event) {
page = event.target.getAttribute("href").substr(1);
switch (page) {
case "playing":
getListMovie("/movie/now_playing", "Now Playing");
break;
case "upcoming":
getListMovie("/movie/upcoming", "Up Coming");
break;
}
});

});

getListMovie("/movie/now_playing", "Now Playing");


});
</script>
</body>

STMIK KHARISMA Makassar 12


Modul Praktikum
Pemrograman Web ©Sofyan Thayf, 2024

15. Modifikasi kode dalam file script tmdb,js agar getListMovie() dapat menerima parameter (services dan
sectiontitle). Perhatikan perubahan pada kode yang diberi warna dalam Listing 9

Test menu navigasi Now Playing dan Up Coming melalui browser, jika perubahan-perubahan kode sudah ditulis
dengan benar, seharusnya kedua link navigasi tersebut sudah bekerja (lihat Gambar 9)

Listing 9

const key = '608ce5e628b4dc66eea24ea292eb79b2';


const endpoint_url = 'https://api.themoviedb.org/3';

// Blok kode untuk melakukan request API

function getListMovie(services, sectiontitle) {


fetch(endpoint_url + services + "?api_key=" + key + "&language=en-US&page=1")
.then(status)
.then(json)
.then(function(data) {
// Objek/array JavaScript dari response.json() masuk lewat data.
// Menyusun komponen card movie secara dinamis
var moviesHTML = "";
data.results.forEach(function(movie) {
moviesHTML += `
<div class="col m3 s6">
<div class="card">
<a href="./movie.html?id=${movie.id}">
<div class="card-image waves-effect waves-block waves-light">
<img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" />
</div>
</a>
<div class="card-content text-center">
<strong>${movie.title}</strong>
</div>
</div>
</div>
`;
});

document.getElementById("movie_list").innerHTML = moviesHTML;
document.getElementById("section_title").innerHTML = sectiontitle;
})
.catch(error);
}

STMIK KHARISMA Makassar 13


Modul Praktikum
Pemrograman Web ©Sofyan Thayf, 2024

Gambar 9

Tugas:
Pelajari kembali daftar services API dari TMDB untuk mendpatkan kode URL request API yang dibutuhkan, untuk
mendapatkan data Popular Movie dan Top Rated Movie, lalu lanjutkan modifikasi kode script dalam index.html agar
link navigasi Popular dan Top Rated dapat bekerja untuk menampilkan informasi yang sesuai

STMIK KHARISMA Makassar 14


Modul Praktikum
Pemrograman Web ©Sofyan Thayf, 2024

D. TUGAS SELANJUTNYA

1. Buat file HTML baru bernama movie.html, dan salin kode dari Listing 10 (boleh di-copy dari index.html lalu
di-edit, perubahan diberi warna yang berbeda). Cek melalui browser dengan cara klik salah satu film dari
halaman index.html
Listing 10

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css" media="screen,projection">
<link rel="stylesheet" href="css/style.css" media="screen,projection">

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>PWEB Movie</title>
</head>
<body>
<nav class="black" role="navigation">
<div class="nav-wrapper container">
<a href="/movie8" class="brand-logo white-text">PWEB Movie</a>
<ul class="topnav right hide-on-med-and-down">
<li><a href="index.html#playing" class="white-text">Now Playing</a></li>
<li><a href="index.html#upcoming" class="white-text">Up Coming</a></li>
<li><a href="index.html#popular" class="white-text">Popular</a></li>
<li><a href="index.html#toprated" class="white-text">Top Rated</a></li>
</ul>

<ul id="nav-mobile" class="sidenav">


<li><a href="index.html#playing">Now Playing</a></li>
<li><a href="index.html#upcoming">Up Coming</a></li>
<li><a href="index.html#popular">Popular</a></li>
<li><a href="index.html#toprated">Top Rated</a></li>
</ul>
<a href="#" data-target="nav-mobile" class="sidenav-trigger"><i
class="material-icons white-text">menu</i></a>
</div>
</nav>

<div class="container">
<h4 id="section_title">Movie Detail</h4>

<div class="row">
<div id="movie_detail">
</div>
</div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-


2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>

STMIK KHARISMA Makassar 15


Modul Praktikum
Pemrograman Web ©Sofyan Thayf, 2024

<script type="text/javascript" src="js/init.js"></script>


<script type="text/javascript" src="js/api.js"></script>

<!-- <script type="text/javascript" src="js/loadpage.js"></script> -->


<script type="text/javascript" src="js/tmdb.js"></script>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
var urlParams = new URLSearchParams(window.location.search);
var id = urlParams.get("id");
getMovie( id );
});
</script>
</body>
</html>

2. Modifikasi file script tmdb.js dengan menambahkan block function getMovie() dengan parameter movie_id
seperti contoh dalam Listing 11. Lanjutkan hingga berhasil menampilkan detail movie selengkap mungkin.
Tampilan dalam Gambar 10 hanya sebagai contoh, tidak wajib diikuti, silahkan dikreasikan sendiri.

Listing 11 (incomplete 😊 )

function getMovie( movie_id ){

// silahkan menambahkan kode untuk


// menampilkan detail movie

Gambar 10

STMIK KHARISMA Makassar 16

Anda mungkin juga menyukai