Membuat halaman detail Tv Series & Movies (TMDB Academy bagian 3)

Tutorial lengkap membuat website TV Series dan Movie di blogspot menggunakan TMDB API bagian 3

Pada tutorial sebelumnya di halaman Tutorial tahap 1 dan tahap 2, kita telah berhasil membuat Landing Page atau Homepage sebagai tampilan utama website Movie & TV Series menggunakan Blogspot, dan juga telah berhasil membuat halaman Trending Movies & halaman Trending Tv Show

Pada tutorial kali ini kita akan melanjutkan Tutorial Lengkap Membuat Website TV Series dan Movie di Blogspot Menggunakan TMDB API (Step 3) dengan membuat halaman Detail Movie dan Detail TV Shows. Halaman ini akan menampilkan informasi yang lebih lengkap, seperti poster resolusi tinggi, backdrop, sinopsis, genre, rating, durasi, tanggal rilis, trailer, daftar pemeran (Cast), hingga rekomendasi Movie atau serial TV yang serupa.

Seluruh data akan diperbarui secara otonatis mengikuti database TMDB, sehingga ketika ada info detail film atau info serial TV terbarupun, halaman blog Tv, Movie ini akan otomatis menampilkan data terbaru tanpa perlu memperbarui secara manual.

Data detail yang Akan Ditampilkan

Agar pengunjung lebih mudah mengetahui info tentang Movie atau serial TV yang sedang dibuka, halaman detail Movie & Tv ini di lengkapi data² seperti berikut :

Data detail untuk halaman Movie:

• Gambar Backdrop – Menampilkan gambar latar belakang (backdrop) resolusi tinggi dari movie.
• Gambar Poster – Menampilkan poster resmi movie.
• Title Movie – Menampilkan judul utama film.
• Release – Menampilkan tanggal rilis pertama film.
• Runtime – Menampilkan durasi film dalam menit atau jam.
• Genre – Menampilkan daftar genre seperti Action, Comedy, Drama, Horror, dan lainnya.
• Rating – Menampilkan nilai rating rata-rata dari pengguna TMDB.
• Budget – Menampilkan total anggaran produksi movie (khusus movie).
• Revenue – Menampilkan total pendapatan box office movie (khusus movie).
• Status – Menampilkan status seperti Released, Returning Series, Ended, atau In Production.
• Language – Menampilkan bahasa asli movie.
• Popularity – Menampilkan skor popularitas berdasarkan aktivitas pengguna TMDB.
• Vote Count – Menampilkan jumlah pengguna yang memberikan penilaian.
• Overview – Menampilkan sinopsis atau ringkasan cerita film.
• Cast – Menampilkan daftar pemeran utama beserta karakter yang dimainkan.
• Trailer – Menampilkan trailer movoe resmi yang dapat diputar langsung.
• Similar Movie – Menampilkan rekomendasi movie yang memiliki genre atau tema serupa.

Data detail untuk halaman Tv Series:

• Gambar Backdrop – Menampilkan gambar latar belakang (backdrop) resolusi tinggi dari Serial TV.
• Gambar Poster – Menampilkan poster resmi TV.
• Title Tv Shows – Menampilkan judul utama TV.
• First air – Menampilkan tanggal tayangan Tv pertama.
• Last air – Menampilkan tanggal terakhir tayangan Tv.
• Season – Menampilkan Jumlah musim tayangan Serial TV.
• Episodes – Menampilkan Jumlah Episode Serial TV.
• Genre – Menampilkan daftar genre seperti Action, Comedy, Drama, Horror, dan lainnya.
• Rating – Menampilkan nilai rating rata-rata dari pengguna TMDB.
• Popularity – Menampilkan skor popularitas berdasarkan aktivitas pengguna TMDB.
• Status – Menampilkan status seperti Released, Returning Series, Ended, atau In Production.
• Language – Menampilkan bahasa asli movie atau TV.
• Overview – Menampilkan sinopsis atau ringkasan cerita.
• Cast – Menampilkan daftar pemeran utama beserta karakter yang dimainkan.
• Trailer – Menampilkan trailer resmi yang dapat diputar langsung.
• Similar TV – Menampilkan rekomendasi TV yang memiliki genre atau tema serupa.

Setiap detail data pada setiap halaman diambil langsung dari TMDB API sehingga data Movie maupun serial TV akan selalu mengikuti pembaruan terbaru dari TMDB.

Demo Halaman Movie & TV

Sebelum mulai memasang script, Anda dapat melihat contoh hasil akhirnya melalui halaman demo berikut.

Live Demo Movie

Live Demo Tv Series

Cara Membuat Halaman Movie & TV Detail

Masuk ke Dashboard Blogger, kemudian pilih menu Halaman (Pages) dan klik Halaman Baru. Pastikan editor yang digunakan adalah Mode HTML, bukan mode Compose, agar seluruh kode dapat dibaca dengan benar oleh Blogger.

Buat dua halaman baru, yaitu:

Movie

TV

Selanjutnya salin kode berikut sesuai dengan halaman yang ingin dibuat.

📌 Script Halaman Movie

</>

<style> *{ margin:0; padding:0; box-sizing:border-box; font-family:Arial,sans-serif; } body{ background:#0f0f0f; color:#fff; } a{ color:inherit; text-decoration:none; } .hero{ height:70vh; background-size:cover; background-position:center; display:flex; align-items:flex-end; position:relative; } .hero::before{ content:''; position:absolute; inset:0; background:linear-gradient(to top,#0f0f0f,transparent); } .hero-content{ position:relative; padding:25px; display:flex; gap:20px; align-items:flex-end; width:100%; } .poster{ width:220px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,.5); } .info{ max-width:800px; } .info h1{ font-size:40px; margin-bottom:10px; } .badges{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0; } .badge{ background:#222; padding:6px 10px; border-radius:20px; font-size:13px; } .overview{ line-height:1.7; color:#ddd; } .section{ padding:25px; } .section h2{ margin-bottom:15px; border-left:4px solid #e50914; padding-left:10px; } .cast{ display:flex; overflow:auto; gap:12px; } .cast-card{ min-width:130px; background:#1b1b1b; border-radius:10px; overflow:hidden; } .cast-card img{ width:100%; height:170px; object-fit:cover; } .cast-card div{ padding:8px; font-size:12px; } .similar{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; } .card{ background:#1b1b1b; border-radius:10px; overflow:hidden; } .card img{ width:100%; display:block; } .card div{ padding:8px; font-size:13px; } .play-btn{ display:inline-block; margin-top:10px; padding:10px 15px; background:#e50914; border-radius:8px; font-weight:bold; } @media(max-width:768px){ .hero-content{ flex-direction:column; align-items:center; text-align:center; } .poster{ width:180px; } .info h1{ font-size:28px; } } </style> <div id="app">Loading...</div> <script> const API_KEY="YOUR_TMDB_API_KEY"; const id=new URLSearchParams(location.search).get("id"); const IMG="https://image.tmdb.org/t/p/w500"; const BACK="https://image.tmdb.org/t/p/original"; async function load(){ const movie=await fetch( `https://api.themoviedb.org/3/movie/${id}?api_key=${API_KEY}` ).then(r=>r.json()); const credits=await fetch( `https://api.themoviedb.org/3/movie/${id}/credits?api_key=${API_KEY}` ).then(r=>r.json()); const similar=await fetch( `https://api.themoviedb.org/3/movie/${id}/similar?api_key=${API_KEY}` ).then(r=>r.json()); document.getElementById("app").innerHTML=` <div class="hero" style="background-image:url('${BACK}${movie.backdrop_path}')"> <div class="hero-content"> <img class="poster" src="${IMG}${movie.poster_path}"> <div class="info"> <h1>${movie.title}</h1> <div class="badges"> <span class="badge">⭐ ${movie.vote_average?.toFixed(1)}</span> <span class="badge">🔥 ${Math.round(movie.popularity)}</span> <span class="badge">⏱ ${movie.runtime||'-'} min</span> <span class="badge">📅 ${movie.release_date}</span> <span class="badge">💰 ${movie.status}</span> </div> <div class="badges"> ${movie.genres.map(g=>` <span class="badge">${g.name}</span> `).join('')} </div> <a class="play-btn" href="watch-movie.html?id=${movie.id}"> ▶ Watch Now </a> <p class="overview"> ${movie.overview || 'No overview available'} </p> </div> </div> </div> <div class="section"> <h2>Cast</h2> <div class="cast"> ${credits.cast.slice(0,20).map(c=>` <div class="cast-card"> <img src="${ c.profile_path ?IMG+c.profile_path :'https://via.placeholder.com/300x450' }"> <div> <b>${c.name}</b><br> ${c.character||''} </div> </div> `).join('')} </div> </div> <div class="section"> <h2>Similar Movies</h2> <div class="similar"> ${similar.results.slice(0,12).map(m=>` <a class="card" href="movie.html?id=${m.id}"> <img src="${ m.poster_path ?IMG+m.poster_path :'https://via.placeholder.com/300x450' }"> <div>${m.title}</div> </a> `).join('')} </div> </div> `; } load(); </script>

Safelink-aza

📌 Script halaman TV

</>

<style> *{ margin:0; padding:0; box-sizing:border-box; } body{ background:#111; color:#fff; font-family:Arial,sans-serif; } a{ color:inherit; text-decoration:none; } .hero{ position:relative; height:70vh; background-size:cover; background-position:center; display:flex; align-items:flex-end; } .hero::before{ content:''; position:absolute; inset:0; background:linear-gradient(to top,#111 15%,rgba(17,17,17,.3)); } .hero-content{ position:relative; z-index:2; display:flex; gap:20px; padding:30px; width:100%; } .poster{ width:220px; border-radius:15px; box-shadow:0 0 20px rgba(0,0,0,.5); } .info{ max-width:800px; } .info h1{ font-size:40px; margin-bottom:10px; } .meta{ display:flex; flex-wrap:wrap; gap:10px; margin:15px 0; } .badge{ background:#222; padding:8px 12px; border-radius:30px; font-size:14px; } .overview{ line-height:1.7; color:#ddd; } .section{ padding:25px; } .section h2{ margin-bottom:15px; border-left:4px solid #e50914; padding-left:10px; } .slider{ display:flex; overflow:auto; gap:15px; padding-bottom:10px; } .slider::-webkit-scrollbar{ height:6px; } .slider::-webkit-scrollbar-thumb{ background:#444; } .cast-card{ min-width:140px; background:#1b1b1b; border-radius:12px; overflow:hidden; } .cast-card img{ width:100%; height:180px; object-fit:cover; } .cast-card div{ padding:10px; font-size:13px; } .seasons{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:15px; } .season-card{ background:#1b1b1b; border-radius:12px; overflow:hidden; cursor:pointer; transition:.3s; } .season-card:hover{ transform:translateY(-4px); } .season-card img{ width:100%; height:280px; object-fit:cover; } .season-card div{ padding:10px; } .episode{ background:#1b1b1b; padding:15px; border-radius:10px; margin-bottom:10px; } .episode h4{ margin-bottom:8px; } .similar-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:15px; } .similar-card{ background:#1b1b1b; border-radius:12px; overflow:hidden; } .similar-card img{ width:100%; display:block; } .similar-card div{ padding:10px; font-size:14px; } .loading{ padding:50px; text-align:center; font-size:18px; } @media(max-width:768px){ .hero{ height:auto; } .hero-content{ flex-direction:column; align-items:center; text-align:center; } .poster{ width:180px; } .info h1{ font-size:28px; } } </style> <div id="app"> <div class="loading">Loading TV Series...</div> </div> <script> const API_KEY="YOUR_TMDB_API_KEY"; const IMG500="https://image.tmdb.org/t/p/w500"; const ORIGINAL="https://image.tmdb.org/t/p/original"; const id=new URLSearchParams(location.search).get("id"); async function loadTV(){ try{ const detail=await fetch( `https://api.themoviedb.org/3/tv/${id}?api_key=${API_KEY}` ).then(r=>r.json()); const credits=await fetch( `https://api.themoviedb.org/3/tv/${id}/credits?api_key=${API_KEY}` ).then(r=>r.json()); const similar=await fetch( `https://api.themoviedb.org/3/tv/${id}/similar?api_key=${API_KEY}` ).then(r=>r.json()); render(detail,credits,similar); }catch(err){ document.getElementById("app").innerHTML= "<div class='loading'>Failed load data</div>"; } } function render(tv,credits,similar){ document.getElementById("app").innerHTML=` <div class="hero" style="background-image:url('${ORIGINAL}${tv.backdrop_path}')"> <div class="hero-content"> <img class="poster" src="${IMG500}${tv.poster_path}"> <div class="info"> <h1>${tv.name}</h1> <div class="meta"> <span class="badge"> ⭐ ${tv.vote_average?.toFixed(1)} </span> <span class="badge"> 🔥 ${Math.round(tv.popularity)} </span> <span class="badge"> 📺 ${tv.number_of_seasons} Seasons </span> <span class="badge"> 🎬 ${tv.number_of_episodes} Episodes </span> <span class="badge"> ⏱ ${tv.episode_run_time?.[0]||'-'} Min </span> <span class="badge"> 📅 ${tv.first_air_date} </span> </div> <div class="meta"> ${tv.genres.map(g=> `<span class="badge">${g.name}</span>` ).join('')} </div> <p class="overview"> ${tv.overview||'No overview'} </p> </div> </div> </div> <div class="section"> <h2>Cast</h2> <div class="slider"> ${credits.cast.slice(0,20).map(c=>` <div class="cast-card"> <img src="${ c.profile_path ?IMG500+c.profile_path :'https://via.placeholder.com/300x450' }"> <div> <b>${c.name}</b> <br> ${c.character||''} </div> </div> `).join('')} </div> </div> <div class="section"> <h2>Seasons</h2> <div class="seasons"> ${tv.seasons.map(s=>` <div class="season-card" onclick="loadSeason(${s.season_number})"> <img src="${ s.poster_path ?IMG500+s.poster_path :'https://via.placeholder.com/300x450' }"> <div> <h3>${s.name}</h3> <p> Episodes: ${s.episode_count} </p> <p> ${s.air_date||''} </p> </div> </div> `).join('')} </div> </div> <div class="section"> <h2>Episodes</h2> <div id="episodes"> Select season first... </div> </div> <div class="section"> <h2>Similar TV Series</h2> <div class="similar-grid"> ${similar.results.slice(0,12).map(s=>` <a href="?id=${s.id}" class="similar-card"> <img src="${ s.poster_path ?IMG500+s.poster_path :'https://via.placeholder.com/300x450' }"> <div> ${s.name} </div> </a> `).join('')} </div> </div> `; } async function loadSeason(season){ document.getElementById("episodes").innerHTML= "Loading episodes..."; const data=await fetch( `https://api.themoviedb.org/3/tv/${id}/season/${season}?api_key=${API_KEY}` ).then(r=>r.json()); document.getElementById("episodes").innerHTML= data.episodes.map(ep=>` <div class="episode"> <h4> Episode ${ep.episode_number} - ${ep.name} </h4> <p> 📅 ${ep.air_date||'-'} </p> <br> <p> ${ep.overview||'No overview'} </p> </div> `).join(''); } loadTV(); </script>

Safelink-aza

Mengganti API Key

Sebelum mempublikasikan halaman, cari tulisan berikut pada script: YOUR_TMDB_API_KEY Kemudian ganti dengan API Key TMDB milik Anda yang telah dibuat sebelumnya di Tutorial Step 1.Pastikan API Key ditulis dengan benar tanpa menghapus tanda kutip didalam script,maupun karakter lainnya. Kesalahan penulisan API Key dapat menyebabkan data dari TMDB tidak dapat ditampilkan.

Mempublikasikan Halaman

Apabila API Key sudah diganti, lalu klik tombol Publikasikan. Sekarang coba buka halaman Movie maupun TV yang telah dibuat. Jika seluruh langkah dilakukan dengan benar, maka detail film dan serial TV akan muncul secara otomatis lengkap dengan poster, judul, rating, serta informasi lainnya sesuai data yang tersedia di TMDB.

Jika Data Tidak Muncul

Apabila halaman masih kosong atau muncul pesan error, periksa beberapa hal berikut:

• Pastikan API Key benar & masih aktif.
• Pastikan tulisan YOUR_TMDB_API_KEY sudah diganti dengan API anda dari TMDB
• Pastikan script ditempel/Di edit pada Mode HTML di kotak editor posting halaman blogger.
• Pastikan tidak ada karakter atau tag HTML yang terhapus saat menyalin & menempel kode.
• Coba Refresh halaman menggunakan browser setelah dipublikasikan.

Sebagian besar masalah biasanya terjadi karena API Key belum diganti atau terdapat kesalahan saat menyalin script.



Cara Menggunakan Halaman Movie, TV, Season, dan Episode

Script ini bekerja secara dinamis, sehingga halaman hanya dapat menampilkan data jika URL berisi parameter "id" dari TMDB. Parameter tersebut digunakan untuk mengambil informasi melalui TMDB API.

Untuk Halaman Movie

Jika script dipasang pada halaman /p/movie.html, maka URL yang digunakan harus seperti berikut: /p/movie.html?id=550


Keterangan: - "/p/movie.html" = halaman yang berisi script detail movie.


- "id=550" = ID movie dari TMDB (contoh: Fight Club).

Tanpa parameter "id", halaman Movie tidak akan mengetahui movie mana yang harus ditampilkan.

Untuk Halaman TV Series

, caranya sama. Misalnya script TV dipasang pada halaman /p/tv.html, maka parameter url harus: /p/tv.html?id=1399


Keterangan: - "/p/tv.html" = halaman detail TV Series.


- "id=1399" = ID TV Series dari TMDB (contoh: Game of Thrones).

untukmembuka halaman Season Jika menggunakan halaman khusus untuk menampilkan detail season, URL harus menyertakan ID TV Series dan nomor season. Contoh: /p/season.html?id=1399&season=1

Keterangan: - "id" = ID TV Series.
- "season" = nomor season yang akan ditampilkan.

Untuk halaman Episode

Untuk halaman episode, , URL harus menyertakan ID TV Series, nomor season, dan nomor episode. Contoh: /p/episode.html?id=1399&season=1&episode=1 Keterangan: - "id" = ID TV Series. - "season" = nomor season. - "episode" = nomor episode yang akan ditampilkan.

Dengan sistem parameter seperti ini, halaman akan menampilkan semua data sesuai dengan data TMDB.

Tutorial Selanjutnya

Selamat! Sampai tahap ini Anda telah berhasil membuat halaman Detail Movie dan Detail TV Shows menggunakan TMDB API. Pada Tutorial Step 4, kita akan lanjut membuat halaman Season Tv Show. Halaman ini akan menampilkan informasi Season yang lebih lengkap,

Sampai jumpa pada Tutorial Lengkap Membuat Website TV Series dan Movie di Blogspot Menggunakan TMDB API Bagian 4.

Tutorial Step 4 ini akan saya posting pada artikel selanjutnya di halaman Tutorial lengkap membuat website TV Series dan Movie di blogspot menggunakan TMDB API bagian 4, Pantau Update post di blog saya ini untuk tutorial selanjutnya.

Tulis lanjut di kolom komentar untuk tutorial berikutnya

Pertanyaan Umum (FAQ)

Mengapa halaman Detail Movie atau TV tidak menampilkan data?

Penyebab yang paling umum adalah URL tidak memiliki parameter id atau ID yang digunakan tidak valid. Script mengambil data berdasarkan ID TMDB yang terdapat pada URL. Pastikan URL menggunakan format yang benar, misalnya:

Movie: /p/movie.html?id=550

TV: /p/tv.html?id=1399

Selain itu, pastikan API Key TMDB yang digunakan masih aktif dan sudah ditambahkan dengan benar pada script..

Apakah satu halaman Detail Movie atau TV dapat digunakan untuk semua data?

Ya. Anda hanya perlu membuat satu halaman Detail Movie dan satu halaman Detail TV. Seluruh data akan berubah secara otomatis sesuai nilai parameter id yang ada pada URL. Dengan cara ini, Anda tidak perlu membuat halaman baru untuk setiap movie atau serial TV, sehingga pengelolaan website menjadi lebih mudah dan efisien..

API blogspot Tentang Website TMDB Tutorial
🛠 BERKAH JAYA ABADI TEKNIK
Layanan Jasa Service elektronik panggilan
Pesan Jasa Sekarang