Kadang kita cuma pengen cari tontonan, lagu, atau buku… tapi malah bingung mau mulai dari mana. Dari situ, lahirlah C I N E M U S E!, sebuah website yang fokus membahas hiburan—film, musik, dan buku—dalam satu tempat.
Project ini dibuat sebagai tugas akhir Pemrograman Berbasis Web, tapi secara konsep sudah cukup matang: bukan cuma menampilkan konten, tapi juga membantu user menemukan hiburan yang cocok dengan cara yang cepat dan nyaman.
Gambaran Awal Tampilan
Begitu masuk ke halaman utama, user langsung disambut dengan headline “All Your Entertainment Needs”, lengkap dengan tampilan yang clean dan responsif.
Di balik tampilan sederhana ini, sebenarnya ada struktur desain yang cukup jelas, bahkan dibagi menjadi beberapa bagian (a) sampai (m).
Struktur UI Berdasarkan Konsep Desain
(a) Navbar / Header
Navbar di website ini dibuat transparan saat di atas, lalu berubah menjadi hitam saat di-scroll ke bawah.
Fungsi utamanya:
- menjaga fokus user ke slideshow di awal
- tapi tetap jelas saat user mulai eksplor konten
Ini detail kecil, tapi ngasih kesan modern dan smooth.
(b) Slideshow (Hero Section)
[Gambar 3 — Slideshow]
Slideshow ini adalah ringkasan fitur utama website. Dibuat menggunakan:
- Bootstrap carousel
- animasi dari Animate.css
Di sini user langsung dapat “preview” isi website tanpa harus scroll jauh.
Section Movies
(c) Judul Section Movies
Bagian ini berisi heading atau pengantar tentang kategori film.
(d) Container / Kolom Movies
Ini adalah wadah utama untuk konten movie.
(e) Slider Movies
Di dalam container tadi, terdapat slider yang berisi daftar film. Slider ini dibuat menggunakan library LightSlider (jQuery).
Fungsi utamanya:
- menampilkan banyak konten tanpa bikin halaman panjang
- interaktif (bisa digeser )
Ditambah dengan AOS (Animate On Scroll), jadi elemen muncul dengan animasi saat user scroll.
Section Musics
(f) Container Musics
Wadah utama untuk konten musik.
(g) Slider Musics
Mirip dengan movies, bagian ini juga pakai slider untuk menampilkan daftar musik/artikel.
(h) Deskripsi Musics
Yang menarik, di desktop:
- teks ada di kiri
- slider di kanan
Tapi di mobile:
- layout berubah (teks di atas)
Ini menunjukkan bahwa desainnya sudah responsive-aware, bukan sekadar diperkecil.
Section Books
(i) Deskripsi Books
Berisi teks pengantar tentang buku.
(j) Container Books
Wadah utama untuk konten buku.
(k) Slider Books
Slider ini menampilkan daftar buku/artikel, sama seperti section sebelumnya.
Layout-nya juga adaptif:
- desktop: teks & slider sejajar
- mobile: ditumpuk ke atas-bawah
Section Tambahan
(l) Reviews Section
Bagian ini berisi komentar atau pendapat pengguna tentang website.
Dibuat menggunakan:
- Bootstrap carousel
- auto-slide (bergerak otomatis)
Fungsinya lebih ke:
- memberi kesan interaktif
- menambah “kehidupan” di bagian bawah website
(m) Footer
Bagian penutup yang simpel:
- teks All Right Reserved
- tahun 2021
Walaupun sederhana, ini penting sebagai penutup struktur website.
Insight yang Menarik
Kalau dilihat sekarang, mungkin project ini terlihat “basic”.
Tapi konteksnya penting:
Website CINEMUSE ! dibangun dari nol, tanpa AI generatif.
Artinya:
- layout dipikir manual
- integrasi library cari sendiri
- debugging dilakukan tanpa bantuan AI
Dan itu justru bagian yang bikin project ini valuable secara pembelajaran.
Tech Stack & Tools
Tools dan teknologi yang digunakan:
- Visual Studio Code
- HTML
- CSS
- Bootstrap 3
- JavaScript
- jQuery
- LightSlider (jQuery plugin) https://github.com/sachinchoolur/lightslider
- Animate.css
- AOS (Animate On Scroll) https://github.com/michalsnik/aos
- YouTube Embed (untuk trailer & music video)
Source Code & Reproducibility
The complete codebase for this project is available on GitHub:
[GitHub Repository Link]
Feel free to explore or run the project locally.
Penutup
C I N E M U S E! adalah contoh project yang sederhana tapi jelas arahnya.
Struktur UI-nya rapi, fitur cukup lengkap untuk ukuran tugas akhir, dan sudah mempertimbangkan pengalaman pengguna.
Leave a Reply