Safelink Generator

Tutorial Membuat Blog Database Movie & Tv Series (Membuat halaman Episode)

TMDB Academy Bagian 5

Di artikel ini kita akan melanjutkan Tutorial Lengkap Membuat Website TV Series dan Movie di Blogspot Menggunakan TMDB API yang sudah masuk ke tahap Tutorial ke 5

Pada Step ke 5 ini kita akan membuat halaman Episode sesuai urutan halaman yang pernah dibuat sebelumnya di Tutorial ke 4 yaitu halaman Season

Memahami Episode, Musim, dan Alur Cerita

Sebelum kita masuk pada cara pembuatan halaman episode ini, perlu sedikit saya jelaskan terlebih dulu dengan apa yang dimaksud halaman episode didalam sebuah tayangan serial Tv

Halaman episode TV Series merupakan bagian penting yang membantu penonton menemukan seluruh daftar episode dari sebuah serial televisi secara terstruktur. Berbeda dengan film/movie yang hanya memiliki satu durasi tayang, serial TV terdiri dari beberapa episode yang dibagi ke dalam satu atau lebih musim (season), kalau di indonesia disebutnya sinetron ๐Ÿ˜. Oleh karena itu, halaman episode dalam satu sinetron ini (Tv Series) dibuat agar pengguna dapat mengikuti alur cerita secara berurutan tanpa melewatkan bagian penting.

Di halaman episode yang akan kita buat sekarang sudah tersedia informasi lengkap mengenai setiap episode, mulai dari nomor episode, judul, tanggal penayangan pertama (First Air Date), durasi, rating pengguna, sinopsis singkat, hingga daftar pemeran yang tampil pada episode tersebut. Semua informasi tersebut membantu penonton menentukan urutan menonton sekaligus memahami perkembangan cerita di setiap episode.

Apa Itu Episode TV Series?

Episode adalah satu bagian dari keseluruhan cerita dalam sebuah serial televisi. Beberapa episode digabungkan menjadi satu musim (Season). Jumlah episode pada setiap musim tidak selalu sama. Ada serial yang hanya memiliki 6 hingga 8 episode per musim, sementara serial lainnya dapat memiliki lebih dari 20 episode dalam satu musim.

Setiap episode biasanya memiliki cerita yang saling berkaitan. Namun pada beberapa serial bergenre antologi, setiap episode dapat berdiri sendiri dengan cerita dan karakter yang berbeda. Informasi tersebut dapat dilihat melalui halaman episode sehingga penonton mengetahui bagaimana struktur cerita sebuah serial.

Informasi yang Umumnya Ditampilkan

Sebuah halaman episode TV Series umumnya menyajikan berbagai informasi penting, antara lain:

  • Nomor Season dan Episode.
  • Judul resmi episode.
  • Poster atau gambar still episode.
  • Tanggal penayangan perdana.
  • Durasi episode.
  • Rating pengguna.
  • Sinopsis atau overview.
  • Daftar pemeran tamu.
  • Sutradara dan penulis naskah.

namun halaman episode yang akan kita buat sekarang hanya menampilkan:

  • Judul Per Episode
  • Gambar backdrop Episode
  • Trailer dari Episode
  • Sinopsis Episode
  • Durasi Video
  • Tanggal penayangan
  • Data diatas bisa memudahkan penggemar untuk mengetahui isi setiap episode sebelum mulai menonton ataupun ketika ingin mencari episode tertentu.

    Mengapa Daftar Episode Sangat Penting?

    Urutan episode merupakan bagian penting dalam serial televisi. Menonton episode secara acak sering kali membuat penonton kehilangan konteks cerita, perkembangan karakter, hingga hubungan antar tokoh. Dengan adanya halaman episode, pengguna dapat mengikuti cerita sesuai urutan yang benar mulai dari episode pertama hingga episode terakhir.

    dan juga TMDB memisahkan data TV Series ke dalam beberapa level, yaitu TV Series → Season → Episode. Oleh karena itu kita tidak dapat langsung mengambil daftar episode dari halaman Detail TV Series saja.

    Selain itu, halaman episode juga memudahkan penonton yang sempat berhenti menonton untuk melanjutkan serial dari episode terakhir yang telah disaksikan.

    Sinopsis Setiap Episode

    Sebagian besar episode memiliki ringkasan cerita atau sinopsis singkat. Sinopsis memberikan gambaran mengenai konflik utama tanpa mengungkap keseluruhan jalan cerita. Informasi ini membantu pengguna memilih episode tertentu atau sekadar mengingat kembali isi episode yang pernah ditonton.

    Meskipun demikian, sinopsis biasanya dibuat tanpa spoiler besar sehingga pengalaman menonton tetap menarik.

    Parameter URL Halaman Episode

    Di bahasan sebelumnya saya sudah pernah jelaskan, agar setiap halaman dapat menampilkan data yang benar, kita memerlukan beberapa parameter pada URL, yaitu:

  • id = ID TV Series.
  • season = Nomor season yang dipilih.
  • episode = Nomor episode yang dipilih.
    Contohnya seperti berikut: /p/episode.html?id=1399&season=1&episode=1
  • Pada contoh di atas:

  • 1399 adalah ID TV Series.
  • 1 adalah Season pertama.
  • 1 pada parameter episode=1 adalah episode pertama
  • Dengan menggunakan parameter dinamis seperti itu, script nantinya akan membaca parameter tersebut menggunakan URLSearchParams(), kemudian mengirim permintaan ke TMDB API untuk mengambil seluruh data detail, season, episode, dan lainnya beserta seluruh data sesuai TMDB

    Demo halaman Episode Tv Series

    Sebelum mulai memasang script, Anda dapat melihat contoh hasil akhir melalui halaman demo berikut. Live Demo

    Cara Membuat Halaman Episode TV

    Seperti pada Tutorial² sebelumnya, langkah pembuatan halaman di awali dengan membuka atau Masuk ke Dashboard Blogger, kemudian pilih menu Halaman (Pages) dan klik Halaman Baru atau tekan tanda plus (+). dan Pastikan editor yang digunakan adalah Mode HTML, bukan mode Compose, agar seluruh kode dapat dibaca dengan benar oleh Blogger.perhatikan SS berikut:

    switch mode html

    beri judul halaman baru, yaitu: Episode agar nantinya parameter url mudah untuk di integrasikan.Selanjutnya salin & tempel kode berikut pada kotak editor bloggwr halaman tadi:

    ๐Ÿ“Œ Script Halaman Episode

    </>
    <img id="backdrop" class="backdrop" src=""> <div class="container"> <h2 id="title">Loading...</h2> <!-- PLAYER --> <div id="player"></div> <!-- OVERVIEW --> <div id="overview" style="margin:10px 0;color:#ddd;font-size:14px;line-height:1.4;"></div> <!-- NEXT PREV --> <div class="nav"> <button id="backBtn">⬅ TV Page</button> <button id="prev">⬅ Prev</button> <button id="next">Next ➡</button> </div> <!-- DETAIL --> <div class="info"> <p><b>Judul :</b> <span id="epTitle">-</span></p> <p><b>Runtime :</b> <span id="runtime">-</span> min</p> <p><b>Waktu :</b> <span id="airDate">-</span></p> </div> </div> <script> const AYI = { KEY: "YOUR_TMDB_API_KEY", BASE: "https://api.themoviedb.org/3" }; </script> <script> const params = new URLSearchParams(location.search); const id = params.get("id"); let season = parseInt(params.get("season")) || 1; let episode = parseInt(params.get("episode")) || 1; let episodes = []; let tvData = null; if(!id){ document.body.innerHTML = "<h2>ID tidak ditemukan</h2>"; } async function load(){ tvData = await fetch(`${AYI.BASE}/tv/${id}?api_key=${AYI.KEY}`) .then(r=>r.json()); const seasonData = await fetch( `${AYI.BASE}/tv/${id}/season/${season}?api_key=${AYI.KEY}` ).then(r=>r.json()); episodes = seasonData.episodes || []; render(); } function render(){ const ep = episodes.find(e => e.episode_number === episode) || {}; document.getElementById("backdrop").src = ep.still_path ? "https://image.tmdb.org/t/p/w780" + ep.still_path : "https://image.tmdb.org/t/p/w780" + tvData.backdrop_path; document.getElementById("title").innerText = `${tvData.name} - S${season}E${episode}`; document.getElementById("player").innerHTML = `<iframe src="https://www.youtube.com/embed?listType=search&list=${encodeURIComponent(tvData.name + " episode")}"></iframe>`; document.getElementById("overview").innerText = ep.overview || tvData.overview || ""; document.getElementById("epTitle").innerText = ep.name || "-"; document.getElementById("runtime").innerText = ep.runtime || tvData.episode_run_time?.[0] || "-"; document.getElementById("airDate").innerText = ep.air_date || "-"; } function goNext(){ if(episode < episodes.length){ episode++; } else { season++; episode = 1; } history.replaceState(null,"", `?id=${id}&season=${season}&episode=${episode}` ); load(); } function goPrev(){ if(episode > 1){ episode--; } else if(season > 1){ season--; episode = 1; } history.replaceState(null,"", `?id=${id}&season=${season}&episode=${episode}` ); load(); } document.getElementById("next").onclick = goNext; document.getElementById("prev").onclick = goPrev; document.getElementById("backBtn").onclick = () => { location.href = `tv.html?id=${id}`; }; load(); </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 episode TV yang telah dibuat dengan menggunakan parameter url yang sudah dijelaskan di atas. Jika seluruh langkah dilakukan dengan benar, maka halaman episode dari satu serial TV akan muncul secara otomatis lengkap dengan gambar, 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.

      Penting di ketahui

      Setiap episode memiliki durasi yang berbeda-beda. Sitkom umumnya berdurasi sekitar 20 hingga 30 menit, sedangkan drama, aksi, atau fantasi biasanya memiliki durasi antara 45 hingga 70 menit. Informasi durasi membantu pengguna memperkirakan waktu yang dibutuhkan untuk menyelesaikan satu episode ataupun satu musim penuh.

      Hubungan Antar Episode

      Banyak serial memiliki alur cerita berkelanjutan sehingga setiap episode saling terhubung. Perkembangan karakter, konflik, hingga penyelesaian cerita berlangsung secara bertahap dari satu episode ke episode berikutnya. Karena itu, mengikuti urutan episode merupakan cara terbaik untuk menikmati keseluruhan cerita.

      Daftar Pemeran Episode

      Selain pemeran utama, beberapa episode menghadirkan bintang tamu atau karakter baru yang hanya muncul pada episode tertentu. Halaman episode sering kali menampilkan daftar pemeran lengkap sehingga pengguna dapat mengetahui siapa saja yang tampil pada episode tersebut.

      Manfaat Halaman Episode

      • Membantu pengguna mengikuti urutan cerita dengan benar.
      • Mempermudah mencari episode tertentu.
      • Mengetahui tanggal tayang setiap episode.
      • Melihat rating masing-masing episode.
      • Membaca sinopsis singkat sebelum menonton.
      • Mengetahui daftar pemeran dan kru.
      • Memantau episode terbaru dari serial yang masih tayang.

      Kesimpulan

      Halaman episode TV Series dirancang untuk memberikan informasi lengkap mengenai seluruh episode dalam sebuah serial televisi. Mulai dari nomor episode, judul, tanggal penayangan, durasi, rating, hingga sinopsis, semua informasi tersebut membantu penonton memahami struktur cerita dengan lebih mudah. Dengan mengikuti urutan episode yang benar, pengalaman menikmati sebuah serial akan menjadi lebih jelas, runtut, dan menyenangkan. Baik untuk penggemar lama maupun penonton baru, halaman episode merupakan panduan penting agar tidak melewatkan momen-momen terbaik dalam setiap musim sebuah TV Series.

      Tutorial Selanjutnya

      Selamat! Sampai tahap ini Anda telah berhasil membuat halaman Episode TV Shows menggunakan TMDB API. Pada Tutorial selanjutnya di Step 6, kita akan lanjut membuat halaman Cast,Aktor, Artis & Crew. Halaman ini akan menampilkan informasi biografy person yang lengkap,

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

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

      Tulis lanjut di kolom komentar untuk tutorial berikutnya

      Pertanyaan Umum (FAQ)

      Apa Manfaat Halaman Episode?

    • Membantu mengikuti urutan cerita dengan benar.
    • Mempermudah mencari episode tertentu.
    • Mengetahui tanggal tayang setiap episode.
    • Melihat rating masing-masing episode.
    • Membaca sinopsis singkat sebelum menonton.
    • Mengetahui daftar pemeran dan kru.
    • Memantau episode terbaru dari serial yang masih tayang.
    • .

      Apa yang dimaksud halaman Episode TV Series?

      Halaman Episode adalah satu bagian dari keseluruhan cerita dalam sebuah serial televisi. Beberapa episode digabungkan menjadi satu musim (Season). Jumlah episode pada setiap musim tidak selalu sama. Ada serial yang hanya memiliki 6 hingga 8 episode per musim, sementara serial lainnya dapat memiliki lebih dari 20 episode dalam satu musim..

      ๐Ÿ›  BERKAH JAYA ABADI TEKNIK

      Layanan Jasa Service elektronik panggilan

      Pesan Jasa Sekarang

    ๐Ÿ“š Artikel Terbaru