← Kembali ke Beranda
Ilustrasi Artikel

Proyek Web: Membangun Aplikasi Pencarian Film Cerdas

Halo Sobat Jurnal Coding! Selamat datang kembali di ruang eksplorasi tanpa batas pada kategori Proyek.

Mari kita bicarakan sebuah hobi yang pasti disukai oleh hampir semua orang di muka bumi ini: menonton film. Pernahkah kamu sedang berkumpul bersama teman-teman atau keluarga di akhir pekan, lalu kalian kebingungan ingin menonton film apa? Kamu mungkin mengingat satu judul film legendaris, tetapi kamu lupa siapa nama aktor utamanya, kapan tahun rilisnya, atau bahkan lupa bagaimana sinopsis ceritanya. Biasanya, solusi tercepat adalah membuka situs pencarian raksasa seperti Google atau mengunjungi situs database film khusus untuk mencari tahu.

Namun, tunggu sebentar! Sebagai seorang calon pengembang perangkat lunak (Software Engineer) yang sudah memiliki dasar-dasar pengetahuan yang kuat, mengapa kita harus selalu bergantung pada aplikasi buatan orang lain? Bagaimana jika kita menciptakan mesin pencari bioskop rahasia kita sendiri?

Pada proyek spektakuler kita kali ini, kita akan membangun sebuah Aplikasi Pencarian Film Cerdas (Movie Search App). Aplikasi ini bukanlah sekadar halaman web statis yang membosankan. Kita akan membuat aplikasimu benar-benar hidup dan bisa berkomunikasi secara langsung dengan pusat pangkalan data film dunia melalui jembatan sakti yang bernama API (Application Programming Interface).

Bayangkan mekanisme ini seperti kamu mengirimkan seorang agen kurir rahasia. Saat kamu mengetikkan judul film seperti "Inception" atau "Avatar" di layar aplikasimu, agen kurir ini akan berlari secepat kilat melintasi jaringan internet global menuju markas besar database film. Dalam hitungan milidetik, kurir tersebut akan kembali kepadamu membawa sebuah koper penuh berisi poster film resmi, tahun rilis, dan sinopsis alur cerita, lalu menampilkannya dengan sangat elegan di layar komputermu!

Proyek menakjubkan ini adalah taman bermain yang sangat sempurna untuk melatih pemahamanmu tentang cara memanggil data eksternal (Fetch API), menciptakan elemen HTML baru secara otomatis menggunakan logika JavaScript (DOM Manipulation), dan merangkainya menjadi visual yang memanjakan mata. Siapkan camilan ringan favoritmu, lenturkan jari-jarimu, dan mari kita mulai merakit mesin pencari bioskop pribadi ini!


Langkah 1: Membangun Layar Pencarian (HTML)


Setiap aplikasi berbasis web yang hebat pasti dimulai dari sebuah kerangka bangunan struktural yang kokoh. Untuk mewujudkan aplikasi pencari film ini, kerangka yang kita butuhkan sangatlah ringkas. Kita hanya membutuhkan sebuah kotak area pencarian tempat pengunjung mengetikkan judul film, sebuah tombol eksekusi, dan sebuah area panggung raksasa untuk memunculkan poster dan sinopsis film nantinya.

Silakan persiapkan file baru pada aplikasi penulisan kodemu dan tuliskan struktur kerangka dasar HTML berikut ini dengan penuh ketelitian:


<div id="wadah-bioskop">
<h1>Mesin Pencari Film</h1>

<div class="area-pencarian">
<input type="text" id="input-judul" placeholder="Ketik judul film di sini...">
<button id="tombol-cari">Cari Film</button>
</div>

<div id="layar-hasil" style="display: none;">
<!-- Poster dan detail film akan disuntikkan oleh JavaScript di sini -->
</div>
</div>


Rahasianya ada pada penggunaan gaya tersembunyi secara mutlak (display: none;) pada area layar hasil. Kita sengaja menutupi panggung tersebut sejak awal karena pada detik pertama aplikasi dibuka, kita belum tahu persis film apa yang akan dicari oleh pengunjung. Sangat logis dan mempertimbangkan kenyamanan mata pengguna!


Langkah 2: Menata Kegelapan Ruang Bioskop (CSS)


Aplikasi pencari film pribadi haruslah memberikan nuansa seperti berada di dalam ruangan teater bioskop premium. Untuk itu, kita akan menggunakan sihir CSS gaya Glassmorphism yang sangat elegan. Desain bingkai kaca buram transparan beraksen futuristik yang dipadukan dengan latar belakang gelap akan membuat poster film yang muncul nanti terlihat sangat menyala dan memukau.


body {
background: linear-gradient(135deg, #020617 0%, #0f172a 100%);
color: #f8fafc;
display: flex;
justify-content: center;
padding-top: 60px;
font-family: sans-serif;
margin: 0;
}

#wadah-bioskop {
background: rgba(255, 255, 255, 0.05);
padding: 40px;
border-radius: 20px;
width: 100%;
max-width: 500px;
text-align: center;
box-shadow: 0 15px 35px rgba(0,0,0,0.5);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
}

.area-pencarian {
display: flex;
gap: 12px;
margin-bottom: 30px;
}

input {
flex: 1;
padding: 15px;
border: none;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
color: white;
font-size: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
}

button {
background-color: #00ffff;
color: #0f172a;
border: none;
padding: 15px 25px;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
font-size: 16px;
transition: 0.3s;
}

button:hover {
background-color: #ffffff;
}

#layar-hasil {
background: rgba(0, 0, 0, 0.3);
padding: 20px;
border-radius: 12px;
border: 1px solid rgba(0, 255, 255, 0.3);
}

#layar-hasil h2 {
color: #00ffff;
margin-top: 0;
}

#layar-hasil p {
font-size: 15px;
line-height: 1.6;
text-align: justify;
}


Cobalah simpan kode desain tersebut dan buka file ini di jendela peramban! Gradasi latar belakang biru kegelapan malam yang dipadukan dengan panel kaca buram tersebut tampak sangat memukau. Aplikasi independen ini kini terlihat sangat mirip seperti layar sentuh dari masa depan. Namun, tombolnya masih belum bisa memberikan reaksi apa pun. Mari kita panggil sang agen kurir rahasia!


Langkah 3: Membangkitkan Agen Pencari Film (JavaScript)


Kini tiba saatnya pada bagian paling mendebarkan: menyuntikkan kecerdasan logika ke dalam mesin aplikasi kita. Kita akan memerintahkan bahasa JavaScript untuk menggunakan antarmuka publik dari sebuah layanan database film (misalnya OMDb API). Dalam praktiknya nanti di dunia nyata, kamu perlu mendaftar secara mandiri ke situs penyedia API untuk mendapatkan kunci otentikasi rahasia pribadimu. Namun untuk keperluan latihan alur logika ini, perhatikan secara saksama bagaimana kita tidak merakit teks HTML yang rentan berantakan, melainkan kita menciptakan elemen fisik murni secara gaib menggunakan perintah pembuatan dokumen!


const inputJudul = document.getElementById("input-judul");
const tombolCari = document.getElementById("tombol-cari");
const layarHasil = document.getElementById("layar-hasil");

// Ingat baik-baik: Kamu harus mengganti tulisan KUNCI_RAHASIA_KAMU dengan deretan huruf kunci aslimu nanti
const KUNCI_API = "KUNCI_RAHASIA_KAMU";

tombolCari.addEventListener("click", function() {
let kataKunci = inputJudul.value;

if (kataKunci === "") {
alert("Peringatan: Judul film tidak boleh kosong!");
return;
}

// Merangkai alamat tujuan kurir rahasia
let urlTarget = "https://www.omdbapi.com/?t=" + kataKunci + "&apikey=" + KUNCI_API;

// Menyuruh sang agen kurir pergi mencari data
fetch(urlTarget)
.then(function(responServer) {
return responServer.json();
})
.then(function(dataFilm) {
// Mengecek apakah film yang dicari benar-benar ada
if (dataFilm.Response === "False") {
alert("Maaf, film tersebut tidak ditemukan di database!");
layarHasil.style.display = "none";
return;
}

// Membersihkan sisa layar hasil pencarian sebelumnya
layarHasil.innerHTML = "";

// Menciptakan elemen judul baru dari ketiadaan
let elemenJudul = document.createElement("h2");
elemenJudul.innerText = dataFilm.Title;

// Menciptakan elemen gambar poster
let elemenPoster = document.createElement("img");
elemenPoster.src = dataFilm.Poster;
elemenPoster.style.width = "100%";
elemenPoster.style.borderRadius = "8px";
elemenPoster.style.marginTop = "15px";

// Menciptakan elemen teks tahun rilis
let elemenTahun = document.createElement("h3");
elemenTahun.innerText = "Tahun Rilis: " + dataFilm.Year;
elemenTahun.style.color = "#E2E8F0";

// Menciptakan elemen paragraf sinopsis
let elemenSinopsis = document.createElement("p");
elemenSinopsis.innerText = "Sinopsis: " + dataFilm.Plot;

// Menyatukan semua elemen gaib tersebut ke dalam layar panggung utama
layarHasil.appendChild(elemenJudul);
layarHasil.appendChild(elemenPoster);
layarHasil.appendChild(elemenTahun);
layarHasil.appendChild(elemenSinopsis);

// Menyalakan lampu layar agar hasil pencarian terlihat
layarHasil.style.display = "block";
})
.catch(function(pesanError) {
alert("Maaf ada gangguan koneksi internet!");
});
});


Membedah Misteri Kode: Mengapa Pendekatan Ini Sangat Cerdas?

Bagi kamu yang matanya mulai berkunang-kunang melihat baris logika penciptaan elemen di atas, tenang saja! Mari kita bedah rahasianya menggunakan bahasa manusia yang sangat masuk akal.

Fungsi sakti pertama adalah perintah fetch. Saat kamu memanggil fungsi penjemput data ini, kamu seolah-olah sedang melepaskan seekor burung merpati super cepat untuk terbang jauh menuju alamat server database film. Setibanya di alamat markas server tersebut, burung merpatimu memberikan judul film yang kamu minta. Jika filmnya ada, server akan membalas dengan sebuah koper data raksasa berformat JSON. Di dalam koper tersebut, terdapat laci-laci kecil yang menyimpan tulisan judul (Title), gambar sampul (Poster), tahun (Year), dan ringkasan cerita (Plot).

Kejeniusan tertinggi pada kode di atas terletak pada penggunaan fungsi document.createElement(). Alih-alih merangkai teks HTML secara serampangan yang sangat rawan menyebabkan kerusakan tata letak, kita menyuruh mesin JavaScript untuk bertindak seperti sebuah printer 3D canggih!

Kita memerintahkan printer tersebut: "Tolong cetakkan sebuah wadah gambar kosong, lalu isi sumber gambarnya dengan tautan Poster yang dibawa oleh kurir tadi." Setelah mesin cetak selesai memproduksi teks judul, gambar, dan paragraf sinopsis secara mandiri di balik layar, kita memanggil fungsi pengantar paket appendChild untuk menempelkan semua benda fisik tersebut secara berurutan ke atas panggung utama layar komputermu. Hasilnya? Aplikasi web milikmu berubah wujud seketika menampilkan poster bioskop yang memukau tanpa perlu memuat ulang halaman sedikitpun! Sangat rapi, sangat aman, dan seratus persen anti rusak!

Kesimpulan Akhir Proyek dan Nasihat Pendorong Semangat

Berikan tepuk tangan yang sangat gemuruh tanpa henti untuk dirimu sendiri! Kamu pada hari ini baru saja merakit dan membangun sebuah mesin pencari data eksternal berskala industri yang sangat keren. Keberhasilan dalam memadukan logika pengambilan koper data pihak ketiga dan menciptakan wujud fisik tampilan halaman web dari ketiadaan adalah bukti mutlak bahwa kamu telah melangkah jauh meninggalkan fase pemula.

Mulai detik ini, hak guna aplikasi pencari film cerdas ini adalah kebanggaan milikmu seutuhnya. Kamu bisa menggunakan purwarupa menakjubkan ini sebagai salah satu karya unggulan di dalam portofolio digitalmu nanti saat melamar pekerjaan. Teruslah tanpa lelah memodifikasi kode ini. Coba tantang dirimu untuk menambahkan informasi nama sutradara atau nama aktor ke dalam cetakan layar hasilnya. Jangan pernah takut bereksperimen, pantau terus kreativitasmu, dan sampai jumpa kembali di proyek mahakarya kode berikutnya bersama Jurnal Coding!

Apa pendapatmu tentang artikel ini?