Berikut ini adalah panduan lengkap step by step cara membuat website database film dan Serial TV di blogspot menggunakan Real Data dari TMDB (The Movie Database) dengan API_KEY TMDB.
Tutorial membuat website TV Series dan Movies di blogspot menggunakan TMDB API KEY
Tutorial ini saya buat hnya sebagai bahan pembelajaran, seperti di artikel sebelumnya di blog yang satunya lagi yaitu : Membuat Script Landing Page AGC Movie & TV Series menggunakan Json Generator, tutorial ini pun tidak ada niat untuk menjiplak ataupun mengambil data dari situs tertentu karena, semua teknik dalam pembuatan website atau blog Movie Tv series ini menggunakan API Key resmi/legal dari TMDB
Apa itu API TMDB?
TMDB API (The Movie Database API) adalah layanan yang disediakan oleh situs resmi TMDB untuk memberikan akses ke jutaan data film/Movie, serial TV/TV Shows, artis/Cast, episode, season, trailer, gambar (Poster & Backdrop), rating, genre, hingga informasi detail lainnya secara real-time tentang film.
Dengan menggunakan API TMDB, kita bisa membuat blog berbasis data film dan serial TV seperti TMDB anpa perlu membuat database film sendiri karena semua data akan diambil langsung dari server TMDB tersebut menggunakan koneksi internet dengan API Key. Beberapa data yang dapat diambil melalui TMDB API di antaranya:
- - Daftar Film Terbaru
- - Daftar TV Series & Movie
- - Trending Movie & TV
- - Popular Movie & TV
- - Top Rated
- - Upcoming
- - Now Playing
- - Genre
- - Detail Film
- - Detail TV Series
- - Detail Season
- - Detail Episode
- - Daftar Cast & Crew
- - Trailer YouTube
- - Rekomendasi Film terkait
- - Similar Movie & TV
- - Search Movie
- - Search TV
- - Search Person
- - Gambar Poster
- - Backdrop HD
- - Logo Film
- - Rating
- - Runtime
- - Status
- - Production Company
- - Bahasa
- - Negara Asal
- - Dan masih banyak lagi.
Semua data tersebut dapat diakses secara gratis melalui API resmi TMDB selama masih mengikuti ketentuan penggunaan yang telah ditetapkan oleh pihak TMDB.
Apa itu Blog Movies & TV?
Blog Movies & TV adalah sebuah website yang berisi informasi mengenai film maupun serial TV. Dan untuk Blog yang akan saya bahas pembuatannya disini, itu hanya berfungsi sebagai database informasi Tv Serial & Movie saja, bukan sebagai tempat menyimpan file film ya. Isi website Movie & TV yang akan kita buat sekarang hanya meliputi:
- - Poster Film
- - Banner / Backdrop
- - Sinopsis
- - Rating
- - Genre
- - Tanggal Rilis
- - Durasi
- - Negara
- - Bahasa
- - Trailer
- - Cast
- - Crew
- - Season
- - Episode
- - Rekomendasi Film Serupa
- - Daftar Film Trending
- - Popular Movie
- - Popular TV Series
- - Search Film
- - Search TV Series
Seluruh data tersebut diatas semuanya akan diambil secara otomatis dari TMDB menggunakan API TMDB asli dan Legal sehingga kita sebagai pemilik blog tidak perlu menginput data satu per satu.
Kenapa Tutorial ini saya rekomendasikan hanya Menggunakan Blogspot?
Mungkin sebelumnya banyak orang mengira membuat website Movie itu haruslah menggunakan Hosting dan VPS yang mahal. Padahal untuk membuat website database film seperti ini d blogspotpun bisa walau terlihat sederhana, namun menurut saya ketika sudah berhasil membuat blog database TV dan Movie ini, memakai blogspotpun sebenarnya sudah mantap dan lebih dari cukup.
Ada beberapa alasan saya membuat tutorial tentang panduan lengkap membuat blog database movie dan TV series ini hanya menggunakan platform blogger:
Tentu kita tahu platform ini berbasis gratis, dan ini salah satu alasan saya membuat web film ini di blogspot hehe.. namun untuk anda yang ingin menerapkannya di hosting,vps atau wordpress berbayarpun malah itu akan sama bagusnya, karena di tutorial ini walaupun tema di artikel nya membahas pembuatan website movie menggunakan blogspot tapi untuk semua teknik pembuatan bisa di lakukan d platform yg lain juga, asal sesuai mengikuti langkah²ny secara detail .
Berikut ini beberapa kelebihan menggunakan Blogspot menurut saya sendiri yaitu:
- -Tentu hal utama Gratis selamanya untuk saat ini.
- - Tidak perlu menyewa hosting.
- - Bandwidth besar.
- - Aman karena menggunakan server Google.
- - Mudah dipasang custom domain.
- - Mudah dimodifikasi menggunakan HTML, CSS, dan JavaScript.
- - Dan masih cocok untuk website berbasis API seperti dari TMDB.
Tapi penting untuk di ketahui, karena semua data berasal dari TMDB melalui JavaScript, maka Blogspot hanya berfungsi sebagai tampilan (Frontend), yang sesuai dengan data yang diambil secara langsung menggunakan API.
Apa yang Akan Kita Buat?
Pada tutorial ini kita akan membuat website Movie & TV yang memiliki berbagai fitur seperti:
- - Homepage atau Landing Page movie & Tv Series
- - Halaman Trending
- - Halaman Popular Movie & Popular TV Series
- - Mencakup Detail Movie & Detail TV sesusi halaman
- - Detail Season & Detail Episode untuk halaman TV Series
- - Halaman Cast atau Aktor & Artis
- - Halaman Person (Detail Biodata cast & Crew
- - Form Search/Pencarian
- - Halaman Filter Genre
- - Similar Movie & TV disetiap halaman
- - Recommendation film
- - Trailer
Website Movie & TV Series yang akan kita buat menggunakan konsep Responsive Design, sehingga tampilannya dapat menyesuaikan berbagai ukuran layar, baik smartphone, tablet, maupun komputer desktop. Tampilan utama menggunakan sistem Grid Card agar daftar film dan serial TV terlihat lebih rapi, modern, dan mudah dijelajahi oleh pengunjung.
Selain itu, blog akan dilengkapi dengan Loading Animation saat proses pengambilan data dari TMDB API berlangsung, sehingga memberikan pengalaman pengguna (User Experience) yang lebih baik. Struktur URL dan halaman juga dibuat SEO Friendly agar lebih mudah diindeks oleh mesin pencari seperti Google.
Seluruh halaman website akan dibuat menggunakan HTML, CSS, dan JavaScript murni (Vanilla JavaScript) tanpa menggunakan framework tambahan, sehingga kode menjadi lebih ringan, mudah dipelajari, dan cocok bagi pemula yang ingin memahami cara kerja TMDB API secara langsung.
Persiapan yang Dibutuhkan
Sebelum mulai membuat website, ada beberapa persiapan yang harus dilakukan terlebih dahulu. Langkah pertama adalah membuat akun TMDB, kemudian mengajukan (Request) API Key resmi yang nantinya akan digunakan untuk mengambil data film dan serial TV secara otomatis dari server TMDB.
Seperti yang sudah saya jelaskan di atas, API Key dari TMDB inimerupakan kode autentikasi yang berfungsi sebagai identitas aplikasi saat mengakses layanan TMDB API. Tanpa API Key, website tidak dapat mengambil data dari TMDB.
-
1. Membuat akun TMDB
Silakan daftar akun TMDB melalui halaman berikut:
https://www.themoviedb.org/ -
2. Mengajukan API Key
Setelah berhasil membuat akun, langkah berikutnya adalah mengajukan API Key resmi melalui halaman Developer TMDB berikut:
https://developer.themoviedb.org/docs/getting-started
Cari menu atau tombol API Link, kemudian ikuti seluruh proses pengajuan hingga API Key berhasil dibuat. -
3. Simpan API Key
Setelah API Key berhasil diperoleh, salin dan simpan ke dalam Notepad atau aplikasi catatan lainnya. Simpan di tempat yang aman agar mudah ditemukan kembali saat dibutuhkan pada proses pembuatan website. - 4. membuat akun Github
untuk nantinya mengupload file json yang akan kita gunakan juga sebagai tampilan data Movies & TV Series di halaman awal blog.
Proses Pembuatan Blog Database Film & TV Series
Tahap pertama yang akan kita buat adalah Landing Page atau halaman utama (Homepage). Landing Page berfungsi sebagai tampilan awal website yang akan menampilkan daftar film maupun serial TV menggunakan data yang diambil langsung dari TMDB API dan disimpan didalam data.json untuk di unggah ke github.
Berikut adalah beberapa contoh desain Landing Page yang dapat Anda gunakan nantinya sebagai tampilan homepage website.
Contoh 1 - Streamflix
Kode HTML:
📌 Script Landing Page Streamflix
CSS Style nya:
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:#0b1023;color:#e5e7eb;}
.wrap{max-width:1200px;margin:0 auto;padding:16px;}
h1{text-align:center;margin:24px 0;color:#22d3ee;}
.search-filter{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px;}
.search-filter input, .search-filter select{flex:1;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#0f172a;color:#e5e7eb;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;}
.card{background:#0f172a;border-radius:16px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .2s;}
.card:hover{transform:translateY(-4px);}
.card img{width:100%;display:block;}
.card-body{padding:12px;}
.card-body h2{font-size:16px;margin:0 0 6px;color:#38bdf8;}
.card-body p{font-size:13px;margin:4px 0;color:#94a3b8;}
.card-body .genre{font-size:11px;background:rgba(34,211,238,.12);color:#22d3ee;padding:2px 6px;border-radius:8px;margin-right:4px;display:inline-block;}
.card-body .btn{margin-top:8px;padding:6px 10px;border:none;border-radius:10px;background:#22d3ee;color:#0f172a;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;display:inline-block;font-size:12px;}
.load-more{display:block;margin:16px auto;padding:10px 20px;border:none;border-radius:12px;background:#22d3ee;color:#0f172a;font-weight:600;cursor:pointer;font-size:14px;}
@media(max-width:600px){.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}}
Contoh 2 - Info Movies & TV Shows
Kode HTML:
📌 Script Landing Page Info Movies & TV Shows
CSS Stylenya:
body{
margin:0;
font-family:Arial;
background:#0d0d0d;
color:#fff;
}
/* HEADER */
header{
padding:15px;
background:#111;
display:flex;
gap:10px;
flex-wrap:wrap;
}
input,select{
padding:10px;
border:none;
border-radius:8px;
outline:none;
}
button{
padding:10px 14px;
border:none;
border-radius:8px;
background:#00aaff;
color:#fff;
cursor:pointer;
}
/* GRID FIXED */
.grid{
display:grid;
grid-template-columns:repeat(2, 1fr); /* 🔥 FORCE 2 KOLOM DEFAULT */
gap:12px;
padding:0;
}
/* kalau layar besar baru melebar */
@media(min-width:768px){
.grid{
grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
}
}
/* CARD FIXED HEIGHT */
.card{
background:#1b1b1b;
border-radius:12px;
overflow:hidden;
display:flex;
flex-direction:column;
height:350px;
}
.card img{
width:100%;
height:200px;
object-fit:cover;
}
.content{
padding:10px;
display:flex;
flex-direction:column;
flex:1;
}
.title{
font-size:13px;
font-weight:bold;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
height:18px;
}
.meta{
font-size:11px;
color:#bbb;
margin-top:4px;
}
.badges{
display:flex;
flex-wrap:wrap;
gap:4px;
margin-top:6px;
}
.badge{
font-size:9px;
background:#333;
padding:2px 6px;
border-radius:6px;
}
.desc{
font-size:10px;
line-height:1.3;
color:#aaa;
margin-top:6px;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
min-height:26px;
}
.actions{
display:flex;
gap:5px;
margin-top:auto;
}
.actions button{
flex:1;
font-size:11px;
padding:6px;
background:#00aaff;
border:none;
color:#fff;
border-radius:6px;
}
/* MODAL */
.modal{
position:fixed;
inset:0;
background:rgba(0,0,0,0.85);
display:none;
justify-content:center;
align-items:center;
}
.modal iframe{
width:90%;
height:60%;
}
.close{
position:absolute;
top:200px;
right:20px;
font-size:30px;
cursor:pointer;
}
Contoh 3 - Info Moviezone
Kode HTML:
📌 Script Landing Page Moviezone
CSS Stylenya:
body{
margin:0;
font-family:Arial;
background:#0f0f0f;
color:#fff;
scroll-behavior:smooth;
}
/* NAV STICKY */
nav{
position:sticky;
top:0;
z-index:1000;
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 20px;
background:#111;
}
nav .logo{font-weight:bold;color:#ff4444}
nav ul{display:flex;gap:15px;list-style:none}
nav a{color:#fff;text-decoration:none}
.search input{
padding:6px;
border-radius:5px;
border:none;
}
/* HERO */
.hero{
height:250px;
background:linear-gradient(to right,#000,#222);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}
.hero h1{font-size:28px}
/* SLIDER */
.slider{
display:flex;
overflow:auto;
gap:10px;
padding:10px;
}
.slide{
min-width:180px;
background:#222;
padding:10px;
border-radius:10px;
}
/* SECTION */
.section{
padding:20px;
}
/* GRID */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:10px;
}
.card{
background:#1c1c1c;
padding:10px;
border-radius:10px;
text-align:center;
}
/* IMAGE */
img{
width:100%;
border-radius:8px;
display:block;
}
/* DESC */
.desc{
padding:20px;
text-align:center;
}
.desc a{
margin:5px;
display:inline-block;
padding:8px 12px;
background:#ff4444;
color:#fff;
text-decoration:none;
border-radius:5px;
}
/* QUICK */
.quick{
padding:20px;
background:#111;
}
.quick ul{
list-style:none;
padding:0;
}
.quick li{
padding:5px 0;
}
.quick a{
color:#aaa;
text-decoration:none;
}
/* STATS */
.stats{
text-align:center;
padding:20px;
background:#111;
}
/* FOOTER */
footer{
background:#000;
padding:20px;
text-align:center;
}
footer a{
color:#aaa;
margin:0 5px;
text-decoration:none;
}
Cara Memasang Landing Page ke Template Blogspot
- Masuk ke Dashboard Blogger, kemudian pilih menu Tema (Theme) lalu klik Edit HTML.
-
Hapus seluruh kode HTML yang berada di dalam template yang terdapat di antara tag
<body>hingga</body>. Namun jangan menghapus widget Post, karena widget tersebut masih digunakan oleh Blogger untuk menampilkan halaman posting. - Setelah proses penghapusan selesai, salin kode HTML Landing Page yang telah disediakan, kemudian tempelkan di atas atau di bawah widget Post.
-
Selanjutnya salin kode CSS dari Landing Page, kemudian tempelkan tepat sebelum tag
</b:skin>. - Terakhir, klik Simpan. Jika tidak ada kesalahan pada pemasangan kode, maka Homepage atau Landing Page pertama website Movie & TV Series Anda telah berhasil dibuat dan siap digunakan sebagai dasar untuk tahap-tahap tutorial berikutnya. yang akan saya posting secara bertahap.
