Lecture ini belum masuk ke implementasi method satu per satu, tetapi merupakan pengantar project besar yang akan dipakai untuk mempraktikkan array methods dan string methods yang sudah kamu pelajari.

Kalau sebelumnya kita belajar:

push(), pop(), slice(), substring(), trim(), repeat(), concat(), toUpperCase(), dll.

Sekarang pertanyaannya berubah menjadi:

“Bagaimana method-method tersebut dipakai untuk membuat fitur aplikasi nyata?”

Dan project yang akan dibuat adalah admin panel untuk layanan streaming film.

1. Gambaran besar project

Bayangkan kita punya layanan streaming seperti Netflix.

Nama aplikasinya di lecture adalah CINN/Cinnix.

Admin memiliki halaman khusus untuk mengelola film.

Secara sederhana:

                ADMIN PANEL
                    │
        ┌───────────┼───────────┐
        ↓           ↓           ↓
     Search       Filter       Sort
        │           │           │
        └───────────┼───────────┘
                    ↓
              Daftar Movies
                    │
        ┌───────────┼───────────┐
        ↓           ↓           ↓
      Detail      Delete      Create

Jadi admin bisa:

1. melihat semua film
2. mencari film
3. filter berdasarkan genre
4. sorting berdasarkan rating
5. sorting berdasarkan release year
6. melihat detail film
7. menghapus film
8. membuat film baru

2. Kenapa project ini dibuat?

Ini bagian yang sangat penting.

Sebelumnya kamu belajar method secara terpisah.

Misalnya:

let movies = ["Avatar", "Titanic", "Inception"];

Lalu belajar:

movies.push("Interstellar");

Kamu tahu bahwa push() menambahkan data ke akhir array.

Tapi dalam project nyata, kita tidak hanya ingin tahu:

“Apa fungsi push()?”

Kita ingin tahu:

“Kapan saya membutuhkan push() dalam aplikasi?”

Misalnya ketika admin membuat film baru:

Admin mengisi form
        ↓
Klik "Create Movie"
        ↓
Buat object movie baru
        ↓
movies.push(newMovie)
        ↓
Film masuk ke daftar movies
        ↓
UI diperbarui

Nah, inilah tujuan project ini.

Kita akan menggunakan method yang sudah dipelajari dalam situasi nyata.

3. Data utama project: movies

Ini adalah konsep paling penting dari lecture ini.

Di JavaScript ada sebuah array:

let movies = [
    {...},
    {...},
    {...},
    {...},
    {...}
];

Array tersebut berisi 5 movie objects.

Jadi bentuk datanya kira-kira:

movies
  │
  ├── movie object 1
  ├── movie object 2
  ├── movie object 3
  ├── movie object 4
  └── movie object 5

Setiap object merepresentasikan satu film.

Contohnya secara sederhana:

{
    id: 1,
    name: "Inception",
    rating: 8.8,
    description: "A thief who steals secrets...",
    genre: ["Sci-Fi", "Drama"],
    image: "images/inception.jpg",
    releaseYear: 2010
}

Jadi:

movies[0]

adalah object film pertama.

4. Struktur satu movie object

Setiap movie memiliki beberapa property.

Lecture menyebutkan:

Movie
│
├── id
├── name
├── rating
├── description
├── genre
├── image
└── releaseYear

Mari kita pahami satu per satu.

4.1 id

Contoh:

id: 1

ID digunakan sebagai identitas unik film.

Misalnya:

{
    id: 1,
    name: "Inception"
}

dan:

{
    id: 2,
    name: "Interstellar"
}

ID-nya berbeda.

Kenapa perlu ID?

Karena nanti kita mungkin ingin mengatakan:

“Saya mau menampilkan detail movie dengan ID 3.”

atau:

“Saya mau menghapus movie dengan ID 4.”

Misalnya:

movies
│
├── id 1 → Inception
├── id 2 → Interstellar
├── id 3 → Avatar
├── id 4 → Titanic
└── id 5 → Joker

ID menjadi semacam nomor identitas.

5. name

Nama film.

Contoh:

name: "Inception"

Nanti digunakan untuk menampilkan:

Inception

di movie card.

6. rating

Rating film.

Contoh:

rating: 8.8

Property ini nantinya berguna untuk fitur sorting.

Misalnya:

Inception      8.8
Interstellar   8.7
Avatar         7.9
Titanic        7.8

Ascending:

7.8
7.9
8.7
8.8

Descending:

8.8
8.7
7.9
7.8

Nah, nanti kemungkinan besar kita akan menggunakan:

sort()

untuk fitur ini.

7. description

Berisi deskripsi film.

Contoh:

description: "A thief who steals corporate secrets..."

Nanti ditampilkan di movie card atau movie detail modal.

Lecture juga membuat variable:

let descriptionContent = "...";

yang berisi teks Lorem Ipsum untuk digunakan sebagai deskripsi awal.

8. genre adalah Array

Ini bagian yang sangat penting.

Berbeda dengan property lain, genre bukan String biasa.

Contohnya:

genre: ["Sci-Fi", "Drama"]

Artinya satu film bisa memiliki lebih dari satu genre.

Misalnya:

Inception
├── Sci-Fi
└── Drama

Film lain:

genre: ["Comedy", "Drama"]

Berarti:

Comedy
+
Drama

Kenapa dibuat Array?

Karena satu film bisa masuk ke beberapa kategori.

Contohnya:

genre: ["Action", "Adventure", "Sci-Fi"]

Ini sangat masuk akal untuk sistem streaming.

9. image

Property ini menyimpan lokasi gambar.

Misalnya:

image: "images/inception.jpg"

Ini bukan gambar yang sebenarnya.

Yang disimpan adalah path/URL menuju gambar.

Mental modelnya:

movie object
     │
     └── image
          │
          └── "images/inception.jpg"
                         │
                         ↓
                    file gambar

Kemudian JavaScript bisa menggunakan path tersebut untuk membuat:

<img src="images/inception.jpg">

10. Bagaimana kalau movie tidak punya image?

Lecture juga menunjukkan kasus ini.

Misalnya:

image: ""

Artinya:

Movie ini tidak memiliki URL gambar.

Daripada halaman menjadi rusak atau gambar kosong, aplikasi akan menggunakan gambar default:

image tersedia?
     │
   ┌─┴─┐
  YES  NO
   │    │
   ↓    ↓
gambar  not-found image

Misalnya secara logika:

if (movie.image) {
    // gunakan movie.image
} else {
    // gunakan gambar not-found
}

Ini contoh kecil bagaimana data + condition + DOM nantinya bekerja bersama.

11. releaseYear

Berisi tahun film dirilis.

Contoh:

releaseYear: 2010

Ini nanti digunakan untuk sorting.

Misalnya:

2001
2005
2010
2015
2020

atau:

2020
2015
2010
2005
2001

12. movies adalah “database sementara”

Ini mental model yang sangat penting.

Dalam project ini:

movies

berfungsi seperti database sederhana.

Tapi hati-hati:

Ini bukan database sungguhan.

Ini hanya array di memory JavaScript.

Bayangkan:

             MOVIES ARRAY
                  │
       ┌──────────┼──────────┐
       ↓          ↓          ↓
     Movie      Movie      Movie
       ↓          ↓          ↓
     Movie      Movie      ...

Semua data movie disimpan di sana.

13. Dari array → UI

Lecture mengatakan:

Movie yang ada di movies array akan dirender ke UI.

Artinya:

movies array
     ↓
JavaScript membaca data
     ↓
buat HTML card
     ↓
masukkan ke DOM
     ↓
browser menampilkan card

Misalnya data:

{
    name: "Inception",
    rating: 8.8,
    releaseYear: 2010
}

akan menghasilkan tampilan seperti:

┌─────────────────────────┐
│       [ IMAGE ]         │
│                         │
│ Inception               │
│ ⭐ 8.8                  │
│ Sci-Fi, Drama           │
│                         │
│ 2010                    │
│                         │
│ [Details] [Delete]      │
└─────────────────────────┘

Dan ini akan dibuat secara dinamis dengan JavaScript.

14. Apa maksud “dynamic”?

Lecture menunjukkan HTML movie card yang semua datanya masih hardcoded.

Misalnya:

<h2>Inception</h2>
<p>8.8</p>
<p>Sci-Fi</p>
<p>2010</p>

Masalahnya:

Kalau ada 100 film, apakah kita harus menulis:

<div>Movie 1</div>
<div>Movie 2</div>
<div>Movie 3</div>
...
<div>Movie 100</div>

Tentu tidak.

Kita ingin:

movies array
     ↓
loop
     ↓
ambil movie
     ↓
buat card
     ↓
masukkan data
     ↓
masukkan ke UI

Jadi satu template card dapat digunakan berkali-kali.

15. Konsep yang akan menjadi inti project

Nanti kita akan punya sesuatu seperti:

for (let movie of movies) {
    // buat movie card
}

atau pendekatan lain menggunakan array methods.

Misalnya:

movies.forEach(function(movie) {
    // render movie
});

Nah, ini menghubungkan lecture lama dengan project baru.

16. Fitur Search

Admin bisa mencari film.

Misalnya terdapat:

Inception
Interstellar
Avatar
Titanic
Joker

Admin mengetik:

inter

Maka:

Inception       ❌
Interstellar    ✅
Avatar          ❌
Titanic         ❌
Joker           ❌

Untuk fitur seperti ini kita akan membutuhkan operasi String.

Misalnya konsep seperti:

movie.name.toLowerCase()

dan:

includes()

Sehingga pencarian tidak sensitif terhadap huruf besar/kecil.

17. Filter berdasarkan genre

Misalnya terdapat:

All
Sci-Fi
Drama
Comedy

Jika admin memilih:

Sci-Fi

maka hanya movie yang memiliki:

genre: ["Sci-Fi", ...]

yang ditampilkan.

Contohnya:

Inception
["Sci-Fi", "Drama"]      ✅

Titanic
["Drama", "Romance"]    ❌

Interstellar
["Sci-Fi", "Drama"]     ✅

Mr Bean
["Comedy"]              ❌

Di sini array method akan sangat berguna karena genre sendiri merupakan array.

18. Sorting berdasarkan rating

Admin klik:

Rating

Pertama:

Ascending

Contoh:

7.2
7.8
8.1
8.5
9.0

Klik lagi:

Descending

Menjadi:

9.0
8.5
8.1
7.8
7.2

Kemungkinan besar fitur ini akan menggunakan:

sort()

Ini contoh bagus bagaimana sebuah method yang sebelumnya hanya kita pelajari secara teori sekarang punya fungsi nyata dalam aplikasi.

19. Sorting berdasarkan release year

Konsepnya sama.

Ascending:

1999
2005
2010
2018
2024

Descending:

2024
2018
2010
2005
1999

Jadi:

releaseYear
     ↓
    sort
     ↓
movie list berubah urutannya

20. Movie detail

Admin juga bisa melihat detail movie.

Misalnya klik:

Details

Kemudian muncul modal:

┌──────────────────────────────────┐
│           Movie Details          │
│                                  │
│ Inception                        │
│ Rating: 8.8                      │
│ Genre: Sci-Fi, Drama             │
│ Release Year: 2010               │
│                                  │
│ A thief who steals secrets...    │
│                                  │
│                    [ OK ]        │
└──────────────────────────────────┘

Yang menarik adalah:

Modal ini tidak harus menampilkan data yang hardcoded.

JavaScript akan mencari movie berdasarkan ID.

Misalnya:

Klik Details movie ID 3
          ↓
Cari movie dengan ID 3
          ↓
Ambil object movie
          ↓
Ambil name
rating
description
genre
releaseYear
          ↓
Masukkan ke modal

21. Delete movie

Admin juga dapat menghapus movie.

Misalnya:

Inception
[Delete]

Klik Delete.

Muncul confirmation:

Do you really want to delete Inception?

          [Cancel] [OK]

Kalau klik OK:

movie
  ↓
dihapus dari movies array
  ↓
render ulang movie list
  ↓
movie hilang dari UI

Jadi operasi sebenarnya bukan sekadar:

“Hilangkan HTML card.”

Tetapi:

Hilangkan data movie dari movies array, kemudian UI diperbarui.

Ini konsep yang sangat penting.

22. Create movie

Admin juga dapat membuat film baru.

Klik:

Create Movie

Kemudian muncul form:

┌─────────────────────────────┐
│ Create Movie                │
│                             │
│ Movie Name:    [________]   │
│ Description:  [________]    │
│ Rating:       [________]    │
│ Release Year: [________]    │
│ Genre:                       │
│ ☑ Comedy                    │
│ ☑ Drama                     │
│ ☐ Sci-Fi                    │
│                             │
│        [Create Movie]       │
└─────────────────────────────┘

Admin mengisi:

Name        = Mission Impossible
Rating      = 8.0
ReleaseYear = 2026
Genre       = Comedy, Drama

Kemudian JavaScript membuat object baru:

{
    id: ...,
    name: "Mission Impossible",
    rating: 8.0,
    description: "...",
    genre: ["Comedy", "Drama"],
    image: "",
    releaseYear: 2026
}

Kemudian object tersebut dimasukkan ke:

movies

dengan konsep:

movies.push(newMovie);

Akhirnya:

movies array
     ↓
push(newMovie)
     ↓
array bertambah
     ↓
render ulang
     ↓
movie baru muncul

23. Struktur project HTML

Sekarang kita masuk ke file index.html.

Struktur sederhananya:

<body>
   │
   └── main-container
          │
          ├── header
          │
          ├── search-filter-container
          │
          ├── movie-list-container
          │
          ├── movie-details-container
          │
          └── create-movie-section

Jadi HTML sudah menyediakan tempat-tempat yang nantinya akan diisi oleh JavaScript.

24. Header

Di bagian header terdapat:

CINN
                 [Create Movie]

Kurang lebih:

<header>
    ...
</header>

Ada nama aplikasi dan tombol Create Movie.

Tombol ini nantinya memicu:

click
 ↓
show create movie modal

25. Search filter container

Ada section khusus untuk search:

[ Search movie... ] [Search]

Tujuannya agar admin bisa mencari film.

Kemudian ada filter genre:

Genre:

○ All
○ Sci-Fi
○ Drama
○ Comedy

Radio button ini nantinya akan memicu filtering.

26. Movie list container

Ini salah satu bagian paling penting.

Lecture mengatakan saat ini:

container-nya kosong.

Misalnya:

<div class="movie-list-container">
</div>

Kenapa kosong?

Karena nanti JavaScript yang akan mengisinya.

movie-list-container
          ↑
          │
       JavaScript
          ↑
          │
      movies array

27. HTML card yang dikomentari

Lecture menunjukkan ada HTML seperti movie card tetapi di-comment.

Misalnya secara konsep:

<!--
<div class="movie-card">
    ...
</div>
-->

Kenapa dibuat?

Untuk menunjukkan template/struktur card yang nantinya akan dibuat secara dinamis.

Saat data masih hardcoded:

<h2>Inception</h2>

Masalahnya data tidak fleksibel.

Nanti JavaScript akan membuat:

movie.name
movie.rating
movie.description
movie.genre
movie.releaseYear

dan memasukkannya ke HTML.

28. Konsep hardcoded vs dynamic

Ini wajib kamu pahami.

Hardcoded

<h2>Inception</h2>
<p>8.8</p>
<p>2010</p>

Data ditulis langsung di HTML.

Kalau film berubah, kita harus edit HTML.

Dynamic

Data berada di JavaScript:

{
    name: "Inception",
    rating: 8.8,
    releaseYear: 2010
}

Kemudian JavaScript membuat HTML berdasarkan data tersebut.

DATA
 ↓
JavaScript
 ↓
HTML
 ↓
UI

Ini adalah konsep yang jauh lebih scalable.

29. Movie details container

Ada section:

movie-details-container

Awalnya disembunyikan.

Nanti digunakan untuk modal detail movie.

Jadi:

movie-details-container
        │
        ↓
selected movie
        │
        ↓
modal

30. Apa arti hidden / hide?

Lecture menyebut CSS class hidden.

Misalnya:

.hidden {
    display: none;
}

Jika element memiliki:

<div class="hidden">

maka browser tidak menampilkannya.

Tapi element tersebut masih ada di DOM.

Ini berbeda dengan:

element.remove();

Karena remove() benar-benar mengeluarkan element dari DOM.

Mental model:

class hide
    ↓
element masih ada
    ↓
hanya tidak terlihat

Sedangkan:

element.remove()
    ↓
element keluar dari DOM

Ini nyambung dengan materi DOM kita sebelumnya.

31. Create movie section

Section berikutnya adalah:

create-movie-section

Di dalamnya terdapat form.

Form memiliki berbagai jenis input:

Movie Name       → text input
Description      → textarea
Rating           → number input
Release Year     → number input
Genre            → checkbox

Contoh checkbox:

☐ Comedy
☐ Drama
☐ Sci-Fi
☐ Action

Karena user bisa memilih lebih dari satu genre, checkbox sangat cocok.

Misalnya:

☑ Comedy
☑ Drama
☐ Sci-Fi

akan menghasilkan:

["Comedy", "Drama"]

Nah, ini akan mengingatkan kamu pada materi sebelumnya tentang:

.checked + .value + Array push().

32. Kenapa Create Movie form awalnya hidden?

Karena kita tidak ingin form selalu terlihat.

Saat halaman pertama kali dibuka:

Admin Panel
────────────────────

[Create Movie]

Movie List
...

Bukan:

Admin Panel

[Create Movie]

Create Movie Form
    ↓
selalu tampil ❌

Jadi awalnya:

create movie modal
       ↓
     hidden

Ketika tombol diklik:

Click Create Movie
       ↓
remove hidden class
       ↓
modal tampil

33. Hubungan semua bagian

Sekarang coba lihat arsitektur sederhananya.

                    movies ARRAY
                         │
          ┌──────────────┼──────────────┐
          ↓              ↓              ↓
       Search          Filter          Sort
          │              │              │
          └──────────────┼──────────────┘
                         ↓
                   render movies
                         ↓
                 Movie List Container
                         │
              ┌──────────┼──────────┐
              ↓          ↓          ↓
           Details     Delete     Create
              ↓          ↓          ↓
            Modal      update     push()
                         │
                         ↓
                   movies array

Jadi sebenarnya movies adalah pusat dari aplikasi ini.

34. Kenapa array methods sangat cocok di project ini?

Karena data kita berbentuk:

movies = [
    movie1,
    movie2,
    movie3,
    movie4
];

Dan JavaScript memiliki banyak array methods yang memang dibuat untuk mengolah collection seperti ini.

Contohnya:

Jadi project ini sebenarnya akan menjadi tempat untuk menggabungkan banyak method.

35. String methods juga akan digunakan

Misalnya search.

Admin mengetik:

INCEPTION

Tetapi data:

Inception

Kalau kita membandingkan secara langsung:

"Inception" === "INCEPTION"

hasilnya:

false

Maka kita bisa normalisasi:

"Inception".toLowerCase()

menjadi:

inception

dan:

"INCEPTION".toLowerCase()

juga:

inception

Kemudian bisa dibandingkan.

Jadi method String yang sudah kamu pelajari ternyata benar-benar berguna.

36. Hubungan dengan materi sebelumnya

Kalau kita tarik garis dari materi sebelumnya:

VARIABLE
   ↓
ARRAY
   ↓
OBJECT
   ↓
STRING
   ↓
ARRAY METHODS
   ↓
STRING METHODS
   ↓
DOM
   ↓
EVENT
   ↓
PROJECT

Sekarang semua konsep tersebut mulai bertemu.

37. Contoh alur Create Movie

Mari kita bayangkan secara lengkap.

Admin mengisi:

Name: Mission Impossible
Rating: 8.5
Release Year: 2026

☑ Comedy
☑ Drama

Kemudian klik:

Create Movie

JavaScript:

1. Ambil nilai input
        ↓
2. Ambil checkbox yang checked
        ↓
3. Buat array genre
        ↓
4. Buat object movie
        ↓
5. movies.push(movie)
        ↓
6. Render ulang movies
        ↓
7. Movie muncul di UI

Ini adalah gabungan dari:

• DOM
• .value
• .checked
• array
• object
• push()
• function
• event
• DOM manipulation

Jadi project ini sebenarnya adalah latihan integrasi semua materi sebelumnya.

38. Contoh alur Delete Movie

Misalnya admin menghapus:

Inception

Alurnya:

Click Delete
     ↓
Ambil ID movie
     ↓
Cari movie
     ↓
Konfirmasi
     ↓
Delete dari movies array
     ↓
Render ulang
     ↓
Inception hilang

Perhatikan:

Yang menjadi sumber data utama tetap movies.

Bukan HTML.

39. Ini konsep yang sangat penting: Data vs UI

Kamu akan sering menemui konsep ini ketika belajar web development.

Ada dua hal:

Data

movies

UI

<div class="movie-card">

Hubungannya:

        DATA
         │
         ↓
    JavaScript
         │
         ↓
        UI

Kalau data berubah:

movies berubah
     ↓
render ulang
     ↓
UI berubah

Contoh:

movies.push(newMovie);

Data berubah.

Kemudian UI dibuat berdasarkan data terbaru.

40. Jangan menganggap HTML sebagai database

Ini kesalahan konsep yang sering terjadi saat pemula membuat aplikasi.

Misalnya ada card:

<div>
    <h2>Inception</h2>
</div>

Jangan berpikir:

“Film Inception disimpan di HTML.”

Yang benar:

movies array
   ↓
menyimpan data film

HTML
   ↓
hanya menampilkan data tersebut

Jadi:

DATA = source of truth
UI   = representasi data

Untuk project sederhana ini, movies array berperan sebagai sumber data utama.

41. Kenapa lecture ini belum banyak coding?

Karena instructor sedang melakukan project walkthrough.

Dia ingin kamu tahu dulu:

“Kita akan membuat apa?”

Sebelum masuk:

“Bagaimana cara membuatnya?”

Ini seperti membangun rumah.

Sebelum mulai memasang bata:

              PROJECT
                 │
       ┌─────────┼─────────┐
       ↓         ↓         ↓
     Search    Filter    Create
       ↓         ↓         ↓
     Sort      Detail    Delete

Kita harus tahu dulu desain rumahnya.

Lecture berikutnya baru mulai membangun bagian pertama.

42. Bagian pertama yang akan dibuat

Lecture mengatakan bahwa pada lecture berikutnya, yang pertama dilakukan adalah:

Render semua movie dari movies array ke UI.

Jadi langkah pertama:

movies array
     ↓
ambil setiap movie
     ↓
buat movie card
     ↓
isi data movie
     ↓
masukkan card ke DOM

Misalnya ada 5 movie:

movies.length === 5

Maka UI akan memiliki 5 card:

┌───────┐ ┌───────┐ ┌───────┐
│Movie 1│ │Movie 2│ │Movie 3│
└───────┘ └───────┘ └───────┘

┌───────┐ ┌───────┐
│Movie 4│ │Movie 5│
└───────┘ └───────┘

Dan semuanya dibuat berdasarkan data array.

43. Mental model paling penting dari lecture ini

Kalau kamu hanya mengingat satu hal dari lecture ini, ingat:

              movies
             ARRAY
               │
               ↓
        ┌──────────────┐
        │   JavaScript │
        │   processes  │
        │     data     │
        └──────┬───────┘
               │
               ↓
              DOM
               │
               ↓
              UI

Kemudian user melakukan sesuatu:

USER
 │
 ├── Search
 ├── Filter
 ├── Sort
 ├── Details
 ├── Delete
 └── Create
       │
       ↓
   JavaScript
       │
       ↓
   movies array
       │
       ↓
      DOM
       │
       ↓
       UI

Jadi aplikasi ini pada dasarnya adalah siklus data → JavaScript → UI → user interaction → data berubah → UI diperbarui.

44. Cheat sheet lecture ini

Data

let movies = [
    {
        id: 1,
        name: "Inception",
        rating: 8.8,
        description: "...",
        genre: ["Sci-Fi", "Drama"],
        image: "images/inception.jpg",
        releaseYear: 2010
    }
];

Fungsi setiap property

Fitur

45. Hubungan method dengan fitur project

Ini yang paling berguna untuk persiapan lecture berikutnya:

Array
 │
 ├── forEach() → render movie
 ├── map()     → membuat data baru
 ├── filter()  → filter/search
 ├── find()    → cari movie berdasarkan ID
 ├── sort()    → sorting rating/year
 ├── push()    → create movie
 └── includes()→ cek genre

Dan String:

String
 │
 ├── toLowerCase() → normalisasi search
 ├── toUpperCase() → formatting
 ├── includes()    → cek keyword
 ├── trim()        → bersihkan input
 ├── slice()       → mengambil sebagian string
 └── concat()      → menggabungkan string

Tidak berarti semua method tersebut pasti digunakan persis seperti tabel di atas; ini adalah gambaran hubungan konsep yang akan kamu temui.

Kesimpulan

Lecture ini sebenarnya adalah jembatan dari “belajar syntax/method” menuju “membangun aplikasi”.

Sebelumnya:

"Hello".toUpperCase()

kita belajar sebagai sebuah method.

Sekarang kita mulai berpikir:

Admin mengetik search
       ↓
ambil input
       ↓
trim()
       ↓
toLowerCase()
       ↓
cari movie
       ↓
filter/find/includes
       ↓
render hasil
       ↓
tampilkan di UI

Begitu juga:

Admin Create Movie
       ↓
ambil value form
       ↓
buat object
       ↓
genre → Array
       ↓
movies.push(newMovie)
       ↓
render ulang
       ↓
movie baru tampil

Jadi tujuan utama project ini bukan sekadar membuat admin panel. Tujuannya adalah supaya kamu melihat bagaimana Array + Object + String + Function + DOM + Event + Array/String Methods bekerja bersama dalam sebuah aplikasi JavaScript nyata.

Dan bagian paling penting untuk kamu pegang sebelum masuk lecture berikutnya adalah:

movies adalah data utama. UI dibuat berdasarkan movies. Ketika movies berubah karena create/delete/filter/sort, JavaScript mengatur bagaimana UI menampilkan kondisi data tersebut.