Masukkan Password

69 Cineflix: Render Semua Film

Akhlis 05 September 2026

13 Min Read

Lecture ini sangat penting, karena untuk pertama kalinya kita mulai melihat bagaimana method yang sebelumnya kamu pelajari secara terpisah dipakai dalam project nyata.

Fokus utama lecture ini adalah:

Mengambil data dari movies array → melakukan looping dengan forEach() → membuat HTML card secara dinamis → memasukkan card tersebut ke DOM.

Kalau kamu memahami alur ini, kamu akan jauh lebih siap untuk fitur berikutnya seperti search, filter, sort, delete, dan create movie.

1. Tujuan lecture ini

Pada lecture sebelumnya kita sudah punya:

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

Artinya kita mempunyai 5 object movie.

Sekarang masalahnya:

Bagaimana caranya supaya kelima movie tersebut muncul di halaman web?

Awalnya HTML kita kosong:

<section id="movie-list-container">
</section>

Yang kita inginkan:

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

Hasil akhirnya:

┌──────────────┐  ┌──────────────┐
│   Movie 1    │  │   Movie 2    │
│   Rating     │  │   Rating     │
│   Genre      │  │   Genre      │
│   Year       │  │   Year        │
└──────────────┘  └──────────────┘

┌──────────────┐  ┌──────────────┐
│   Movie 3    │  │   Movie 4    │
│   Rating     │  │   Rating     │
│   Genre      │  │   Genre       │
│   Year       │  │   Year        │
└──────────────┘  └──────────────┘

┌──────────────┐
│   Movie 5    │
│   Rating     │
│   Genre      │
│   Year       │
└──────────────┘

2. Data `movies` adalah sumbernya

Misalkan kita punya data seperti ini:

let movies = [
    {
        id: 1,
        name: "Movie A",
        rating: 4.6,
        description: "Description A",
        genre: ["Action", "Sci-Fi", "Drama"],
        image: "images/movie-a.jpg",
        releaseYear: 2014
    },

    {
        id: 2,
        name: "Movie B",
        rating: 2.7,
        description: "Description B",
        genre: ["Action", "Comedy"],
        image: "",
        releaseYear: 2018
    }
];

Perhatikan bahwa movies adalah Array.

Di dalam array terdapat Object.

Dan di dalam object terdapat berbagai property.

movies ARRAY
│
├── Movie Object
│   ├── id
│   ├── name
│   ├── rating
│   ├── description
│   ├── genre → ARRAY
│   ├── image
│   └── releaseYear
│
├── Movie Object
│   ├── id
│   ├── name
│   ├── rating
│   └── ...
│
└── ...

3. Langkah pertama: mendapatkan tempat untuk movie

Di HTML terdapat:

<section id="movie-list-container">
</section>

Kita ingin memasukkan movie card ke dalam <section> ini.

Maka JavaScript perlu mendapatkan element tersebut.

let movieListSection = document.getElementById(
    "movie-list-container"
);

Sekarang:

HTML
   │
   └── <section id="movie-list-container">
                    ↑
                    │
            getElementById()
                    │
                    ↓
             movieListSection

movieListSection sekarang berisi referensi ke DOM element tersebut.

Jadi kita bisa memanipulasinya.

4. Kenapa menggunakan `getElementById()`?

Karena HTML memiliki:

id="movie-list-container"

Dan kita mengambilnya dengan:

document.getElementById("movie-list-container");

Perhatikan:

HTML

id="movie-list-container"

JavaScript

document.getElementById("movie-list-container");

Tidak menggunakan #.

Berbeda dengan querySelector():

document.querySelector("#movie-list-container");

Keduanya bisa digunakan.

5. Membuat function `renderAllMovies()`

Lecture kemudian membuat:

function renderAllMovies(movieList) {
    ...
}

Kenapa function ini menerima parameter movieList?

Karena kita ingin function-nya fleksibel.

Misalnya:

renderAllMovies(movies);

Artinya:

“Render semua movie yang ada di array movies.”

Nanti kalau kita punya array hasil filtering:

let filteredMovies = ...

kita juga bisa:

renderAllMovies(filteredMovies);

Jadi function tidak harus selalu bekerja dengan variable global movies.

Ini desain function yang bagus.

6. `renderAllMovies(movies)`

Saat halaman pertama kali dibuka:

renderAllMovies(movies);

Terjadi:

movies
  │
  ↓
renderAllMovies(movies)
  │
  ↓
movieList parameter

Jadi di dalam function:

function renderAllMovies(movieList) {

movieList sekarang mengacu ke array movies.

7. Bagian terpenting: `forEach()`

Di dalam function:

movieList.forEach((movie) => {
    ...
});

Ini adalah inti lecture.

Ingat materi kita sebelumnya:

forEach() digunakan untuk menjalankan suatu function satu kali untuk setiap element dalam array.

Misalnya:

let names = ["John", "Mark", "Steve"];

names.forEach((name) => {
    console.log(name);
});

Hasil:

John
Mark
Steve

Karena array mempunyai 3 element, callback dijalankan 3 kali.

8. Dalam project ini `forEach()` bekerja bagaimana?

Misalnya ada:

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

Kemudian:

movies.forEach((movie) => {
    ...
});

Maka secara mental:

Iteration 1
movie = movie1
      ↓
buat card movie1

Iteration 2
movie = movie2
      ↓
buat card movie2

Iteration 3
movie = movie3
      ↓
buat card movie3

Iteration 4
movie = movie4
      ↓
buat card movie4

Iteration 5
movie = movie5
      ↓
buat card movie5

Jadi forEach() adalah seperti:

“Untuk setiap movie, lakukan pekerjaan berikut.”

9. Callback function

Kode:

movieList.forEach((movie) => {
    ...
});

Bagian:

(movie) => {
    ...
}

adalah callback function.

forEach() akan memanggil function tersebut satu per satu.

Jadi:

forEach()
   │
   ├── panggil callback untuk movie 1
   ├── panggil callback untuk movie 2
   ├── panggil callback untuk movie 3
   ├── panggil callback untuk movie 4
   └── panggil callback untuk movie 5

10. Apa isi parameter `movie`?

Ini sangat penting.

Ketika iteration pertama:

movie

berisi object movie pertama.

Misalnya:

{
    id: 1,
    name: "Movie A",
    rating: 4.6,
    ...
}

Maka:

movie.name

menghasilkan:

Movie A

Iteration kedua:

movie.name

menghasilkan:

Movie B

dan seterusnya.

Jadi movie bukan nama array.

movie adalah satu object movie yang sedang diproses.

11. `forEach()` sebenarnya memberikan 3 argument

Secara lengkap:

movieList.forEach((movie, index, array) => {
    ...
});

Ada tiga:

movie  → element saat ini
index  → index saat ini
array  → array asli

Misalnya:

movies.forEach((movie, index, array) => {
    console.log(movie);
    console.log(index);
    console.log(array);
});

Untuk movie pertama:

movie  → object movie pertama
index  → 0
array  → movies

Untuk movie kedua:

movie  → object movie kedua
index  → 1
array  → movies

dan seterusnya.

12. Kenapa lecture hanya menggunakan `movie`?

Karena kode yang sedang dibuat tidak membutuhkan:

index

dan:

array

Jadi cukup:

movieList.forEach((movie) => {

Ini lebih bersih.

13. Sekarang membuat movie card

Di setiap iteration:

let movieCard = `...`;

Perhatikan menggunakan:

` `

yaitu backtick.

Bukan:

" "

atau:

' '

Kenapa?

Karena kita ingin menggunakan template literal.

14. Template literal

Misalnya:

let name = "John";

let html = `<h2>${name}</h2>`;

Hasil:

<h2>John</h2>

Bagian:

${name}

adalah JavaScript expression yang disisipkan ke dalam string.

15. Kenapa ini berguna untuk movie card?

Misalnya kita punya:

movie.name

Kita bisa membuat:

let movieCard = `
    <h2>${movie.name}</h2>
`;

Kalau:

movie.name = "Inception"

hasil string menjadi:

<h2>Inception</h2>

Kalau movie berikutnya:

movie.name = "Avatar"

hasilnya menjadi:

<h2>Avatar</h2>

Jadi satu template bisa digunakan untuk banyak movie.

16. Kenapa harus backtick?

Ini penting.

Yang bisa menggunakan:

${...}

adalah template literal, yaitu menggunakan backtick:

`Hello ${name}`

Bukan:

"Hello ${name}"

dan bukan:

'Hello ${name}'

Contoh:

let name = "John";

console.log(`Hello ${name}`);

hasil:

Hello John

Sedangkan:

console.log("Hello ${name}");

hasil:

Hello ${name}

17. Sekarang kita membuat HTML card lengkap

Misalnya template-nya:

let movieCard = `
    <div class="movie-card">
        <h2>${movie.name}</h2>
        <p>${movie.description}</p>
        <p>${movie.genre}</p>
        <p>${movie.releaseYear}</p>
        <p>${movie.rating}</p>
    </div>
`;

Perhatikan setiap data berasal dari object:

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

Jadi tidak ada lagi data hardcoded.

18. Apa yang terjadi pada setiap iteration?

Misalkan movie pertama:

{
    name: "Movie A",
    rating: 4.6,
    description: "Description A",
    genre: ["Action", "Sci-Fi"],
    releaseYear: 2014
}

Maka:

`${movie.name}`

menjadi:

Movie A

dan:

`${movie.rating}`

menjadi:

4.6

dan:

`${movie.releaseYear}`

menjadi:

Sehingga template menghasilkan HTML yang sudah berisi data Movie A.

19. Kemudian HTML tersebut dimasukkan ke DOM

Setelah membuat:

let movieCard = `...`;

kita masih punya masalah.

movieCard hanya sebuah String.

Misalnya:

console.log(movieCard);

isinya:

<div class="movie-card">
    <h2>Movie A</h2>
    ...
</div>

Tapi string tersebut belum otomatis muncul di halaman.

Kita harus memasukkannya ke DOM.

20. Menggunakan `insertAdjacentHTML()`

Lecture menggunakan:

movieListSection.insertAdjacentHTML(
    "beforeend",
    movieCard
);

Method ini sangat penting.

Formatnya:

element.insertAdjacentHTML(position, htmlString);

Di sini:

movieListSection

adalah tempat kita memasukkan HTML.

Sedangkan:

movieCard

adalah HTML string yang ingin dimasukkan.

21. Apa arti `"beforeend"`?

Ini sering membingungkan di awal.

Bayangkan:

<section id="movie-list-container">

</section>

Ada posisi-posisi:

              section
         ┌─────────────────┐
beforebegin →              │
         │                 │
afterbegin →               │
         │                 │
         │                 │
beforeend →                │
         └─────────────────┘
afterend →

Untuk:

insertAdjacentHTML("beforeend", movieCard)

artinya:

Masukkan HTML di dalam element, tepat sebelum closing tag.

Sebelum:

<section id="movie-list-container">
</section>

Setelah memasukkan card:

<section id="movie-list-container">

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

</section>

Jadi beforeend sangat cocok untuk menambahkan item ke akhir container.

22. Kenapa bukan `innerHTML`?

Kita sebenarnya bisa saja:

movieListSection.innerHTML += movieCard;

Tetapi lecture menggunakan:

insertAdjacentHTML("beforeend", movieCard);

Kelebihannya untuk kasus seperti ini adalah kita bisa menambahkan HTML di posisi tertentu tanpa menulis ulang seluruh innerHTML container.

Untuk sekarang cukup pahami:

innerHTML
→ membaca/mengganti isi HTML

insertAdjacentHTML
→ menyisipkan HTML string pada posisi tertentu

23. Alur lengkap satu movie

Sekarang mari gabungkan semuanya.

movies array
     ↓
forEach()
     ↓
ambil satu movie object
     ↓
movie.name
movie.rating
movie.description
movie.genre
movie.releaseYear
     ↓
template literal
     ↓
buat movieCard HTML string
     ↓
insertAdjacentHTML()
     ↓
movie-list-section
     ↓
browser menampilkan card

24. Alur untuk 5 movie

Karena ada 5 movie:

movies
 │
 ├── Movie 1
 │      ↓
 │   buat card
 │      ↓
 │   insert
 │
 ├── Movie 2
 │      ↓
 │   buat card
 │      ↓
 │   insert
 │
 ├── Movie 3
 │      ↓
 │   buat card
 │      ↓
 │   insert
 │
 ├── Movie 4
 │      ↓
 │   buat card
 │      ↓
 │   insert
 │
 └── Movie 5
        ↓
     buat card
        ↓
      insert

Akhirnya:

movie-list-container
│
├── card movie 1
├── card movie 2
├── card movie 3
├── card movie 4
└── card movie 5

25. Kenapa awalnya hanya `h2`?

Lecture pertama-tama mencoba sesuatu yang sangat sederhana:

let movieCard = `<h2>${movie.name}</h2>`;

Tujuannya bukan langsung membuat UI sempurna.

Tujuannya untuk memastikan:

“Apakah kita berhasil melakukan looping dan memasukkan data ke DOM?”

Kalau hasilnya:

Movie A
Movie B
Movie C
Movie D
Movie E

berarti mekanismenya sudah berhasil.

Setelah itu baru HTML-nya diperbesar menjadi card lengkap.

Ini adalah cara debugging/building yang bagus:

buat sederhana
   ↓
pastikan bekerja
   ↓
tambahkan kompleksitas

26. Kenapa semua movie awalnya muncul satu baris?

Lecture menemukan bahwa movie names muncul seperti:

Movie A Movie B Movie C Movie D Movie E

padahal menggunakan:

<h2>

yang biasanya block-level element.

Penyebabnya adalah CSS.

Container memiliki:

display: flex;

Flexbox secara default mengatur child dalam satu baris:

┌───────────────────────────────────┐
│ Movie A | Movie B | Movie C | ... │
└───────────────────────────────────┘

Jadi ini bukan masalah forEach().

Bukan juga masalah <h2>.

Ini akibat CSS layout.

27. Hardcoded vs dynamic

Ini bagian yang sangat penting.

Sebelumnya HTML card mungkin seperti:

<h2>Movie A</h2>
<p>Some description</p>
<p>Action</p>
<p>2014</p>
<p>4.6</p>

Semua nilai ditulis manual.

Ini disebut:

hardcoded

Masalahnya kalau punya 100 movie, kita harus membuat 100 HTML secara manual.

Sekarang:

<h2>${movie.name}</h2>
<p>${movie.description}</p>
<p>${movie.genre}</p>
<p>${movie.releaseYear}</p>
<p>${movie.rating}</p>

Data berasal dari object.

Ini:

dynamic rendering

Satu template bisa digunakan untuk berapa pun jumlah movie.

28. Perhatikan `genre`

Ada satu hal menarik.

Misalnya:

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

Kemudian:

${movie.genre}

Ketika array dimasukkan ke String, biasanya akan tampil seperti:

Action,Sci-Fi,Drama

Karena array dikonversi ke String.

Kalau ingin tampil lebih bagus:

${movie.genre.join(", ")}

hasil:

Action, Sci-Fi, Drama

Kemungkinan nanti project akan melakukan formatting seperti ini.

Ini contoh bagus bahwa:

Array methods dan String operations bisa bekerja bersama.

29. `movie.image`

Lecture juga menambahkan:

${movie.image}

ke atribut gambar.

Misalnya:

<img src="${movie.image}">

Kalau:

movie.image = "images/movie1.jpg";

hasil HTML:

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

Browser kemudian mencari file gambar tersebut.

30. Bagaimana dengan image yang kosong?

Misalnya:

movie.image = "";

Maka:

<img src="">

tidak menghasilkan gambar yang kita inginkan.

Lecture belum menyelesaikan masalah ini.

Untuk sementara:

image tersedia
    ↓
tampilkan image

image kosong
    ↓
belum ditangani

Lecture berikutnya akan membahas formatting dan kemungkinan default image.

31. Satu hal yang sangat penting: `forEach()` tidak membuat array baru

Ingat karakteristik forEach().

movies.forEach((movie) => {
    ...
});

Tujuannya:

menjalankan logic untuk setiap element.

Bukan:

membuat array baru.

Misalnya:

let result = movies.forEach(...);

result biasanya menjadi:

undefined

Kalau tujuan kita adalah membuat array baru, biasanya kita akan mempelajari:

map()

Kalau tujuan kita menyaring:

filter()

Kalau mencari satu:

find()

Jadi:

forEach()
→ lakukan sesuatu untuk setiap element

Dan di project ini:

“Untuk setiap movie, buat card dan tampilkan.”

32. Kenapa `forEach()` cocok untuk render?

Karena requirement-nya memang:

Setiap movie harus dibuatkan satu card.

Misalnya:

1 movie → 1 card

5 movie → 5 card

100 movie → 100 card

Itulah pola:

movies.forEach((movie) => {
    createCard(movie);
});

33. Hubungkan dengan konsep callback yang sudah dipelajari

Sebelumnya kamu sudah belajar:

setTimeout(function() {
    console.log("Hello");
}, 1000);

Function yang diberikan ke setTimeout() adalah callback.

Sekarang:

movies.forEach((movie) => {
    ...
});

Arrow function tersebut juga callback.

Jadi konsep callback yang dulu terlihat abstrak sekarang punya kegunaan nyata.

forEach()
   ↓
menerima function
   ↓
memanggil function tersebut
   ↓
untuk setiap movie

34. Bagian kode secara konsep

Strukturnya kira-kira:

let movieListSection =
    document.getElementById("movie-list-container");

function renderAllMovies(movieList) {

    movieList.forEach((movie) => {

        let movieCard = `
            <div class="movie-card">
                <h2>${movie.name}</h2>
                <p>${movie.description}</p>
                <p>${movie.genre}</p>
                <p>${movie.releaseYear}</p>
                <p>${movie.rating}</p>
            </div>
        `;

        movieListSection.insertAdjacentHTML(
            "beforeend",
            movieCard
        );
    });
}

renderAllMovies(movies);

Tidak perlu menghafal kode ini sekarang. Yang lebih penting adalah alur pikirnya.

35. Baca kode tersebut seperti manusia

Daripada membaca:

movieList.forEach((movie) => {

sebagai syntax yang rumit, bacalah:

“Untuk setiap movie yang ada di movieList…”

Kemudian:

let movieCard = `...`;

baca:

“Buat HTML card berdasarkan movie tersebut.”

Kemudian:

movieListSection.insertAdjacentHTML(
    "beforeend",
    movieCard
);

baca:

“Masukkan card itu ke akhir movie list.”

Jadi keseluruhan:

Untuk setiap movie → buat card → masukkan card ke halaman.

Itulah inti lecture ini.

36. Connection dengan DOM yang sudah kamu pelajari

Kita sebelumnya belajar:

document.getElementById()

dan:

insertAdjacentElement()

Sekarang kita menggunakan:

insertAdjacentHTML()

Perbedaannya:

`insertAdjacentElement()`

Menerima Element object:

let div = document.createElement("div");

parent.insertAdjacentElement(
    "beforeend",
    div
);

`insertAdjacentHTML()`

Menerima HTML String:

let html = `<div>Hello</div>`;

parent.insertAdjacentHTML(
    "beforeend",
    html
);

Mental model:

insertAdjacentElement()
        ↓
     Element

insertAdjacentHTML()
        ↓
    HTML String

Dalam lecture ini kita memiliki:

let movieCard = `...`;

yang merupakan String berisi HTML.

Maka:

insertAdjacentHTML()

sangat cocok.

37. Connection dengan template literal

Ada tiga konsep yang bertemu di sini:

movie object
     ↓
movie.name
     ↓
template literal
     ↓
HTML string
     ↓
insertAdjacentHTML()
     ↓
DOM

Contoh:

`<h2>${movie.name}</h2>`

Bukan sekadar String biasa.

String tersebut berisi HTML yang dibuat berdasarkan data.

38. Connection dengan array

Kita juga menggabungkan:

Array
  ↓
forEach()
  ↓
Object
  ↓
property access
  ↓
String
  ↓
DOM

Lebih lengkap:

movies[]
   ↓
forEach()
   ↓
movie object
   ↓
movie.name
movie.rating
movie.genre
movie.description
movie.releaseYear
   ↓
template literal
   ↓
HTML string
   ↓
insertAdjacentHTML()
   ↓
DOM
   ↓
Browser UI

Ini sebenarnya adalah fondasi penting untuk dynamic web page.

39. Kenapa ini penting untuk fitur berikutnya?

Karena hampir semua fitur berikutnya akan berhubungan dengan renderAllMovies().

Misalnya search:

movies
 ↓
search
 ↓
filteredMovies
 ↓
renderAllMovies(filteredMovies)

Filter genre:

movies
 ↓
filter genre
 ↓
filteredMovies
 ↓
renderAllMovies(filteredMovies)

Delete:

movies
 ↓
hapus movie
 ↓
renderAllMovies(movies)

Create:

form
 ↓
new movie object
 ↓
movies.push(newMovie)
 ↓
renderAllMovies(movies)

Jadi function:

renderAllMovies()

bisa menjadi salah satu function yang sangat penting dalam project.

40. Satu catatan teknis penting: render ulang

Ada satu hal yang perlu kamu waspadai saat memahami konsep ini.

Jika kita menjalankan:

renderAllMovies(movies);

kemudian menjalankannya lagi tanpa mengosongkan container:

renderAllMovies(movies);

maka movie bisa muncul dua kali.

Karena:

insertAdjacentHTML("beforeend", ...)

artinya:

tambahkan ke akhir, bukan replace isi lama.

Contoh:

Awalnya:

Movie 1
Movie 2

render lagi:

Movie 1
Movie 2
Movie 1
Movie 2

Jadi biasanya sebelum render ulang kita perlu memikirkan strategi seperti:

movieListSection.innerHTML = "";

lalu render lagi.

Ini akan menjadi konsep penting ketika nanti melakukan search, filter, sorting, create, dan delete.

41. Kesalahan mental yang sebaiknya dihindari

❌ Salah:

movie adalah array movies.

✅ Benar:

movieList → array
movie     → satu element/object dari array

❌ Salah:

movieCard adalah HTML element.

✅ Dalam kode lecture:

let movieCard = `...`;

movieCard adalah String yang berisi HTML.

❌ Salah:

forEach() mengubah array menjadi HTML.

✅ Lebih tepat:

forEach() menjalankan callback untuk setiap element, dan di dalam callback-lah kita membuat HTML.

❌ Salah:

insertAdjacentHTML() membuat movie object.

✅ Benar:

Method itu memasukkan HTML string ke DOM.

42. Ringkasan setiap bagian

Kode/konsep	Artinya
`movies`	array semua movie
`movieList`	parameter yang menerima array movie
`forEach()`	proses setiap movie
`movie`	satu movie object saat iteration
`movie.name`	nama movie
`movie.rating`	rating
`movie.genre`	genre
`movie.description`	deskripsi
`movie.releaseYear`	tahun rilis
`${...}`	memasukkan JS expression ke template literal
`movieCard`	HTML string untuk satu card
`insertAdjacentHTML()`	memasukkan HTML string ke DOM
`"beforeend"`	tambahkan di akhir isi element

43. Mental model terakhir 🚀

Simpan diagram ini karena ini akan sangat membantu untuk lecture berikutnya:

                 movies ARRAY
                      │
                      ↓
              renderAllMovies()
                      │
                      ↓
                  forEach()
                      │
          ┌───────────┴───────────┐
          ↓                       ↓
      movie 1                  movie 2
          ↓                       ↓
     movie.name              movie.name
     movie.rating             movie.rating
     movie.genre              movie.genre
          ↓                       ↓
     Template Literal        Template Literal
          ↓                       ↓
       HTML String             HTML String
          ↓                       ↓
  insertAdjacentHTML()  insertAdjacentHTML()
          ↓                       ↓
      Movie Card              Movie Card
          └───────────┬───────────┘
                      ↓
                     DOM
                      ↓
                  Browser UI

Atau kalau dibuat super sederhana:

DATA
 ↓
movies[]
 ↓
forEach()
 ↓
1 movie
 ↓
buat HTML
 ↓
insert ke DOM
 ↓
CARD

Kalimat yang paling penting dari lecture ini:

🧠 forEach() dipakai karena kita ingin melakukan sesuatu untuk setiap movie. Dalam kasus ini, untuk setiap movie kita membuat satu HTML card dan memasukkannya ke UI.

Dan ini adalah langkah pertama menuju aplikasi yang benar-benar dynamic, bukan lagi HTML yang semua datanya hardcoded.

Saya juga bisa membuat gambar yang menjelaskan alur movies → forEach → template literal → DOM → movie card secara visual.

1. Tujuan lecture ini

2. Data movies adalah sumbernya

3. Langkah pertama: mendapatkan tempat untuk movie

4. Kenapa menggunakan getElementById()?

HTML

JavaScript

5. Membuat function renderAllMovies()

6. renderAllMovies(movies)

7. Bagian terpenting: forEach()

8. Dalam project ini forEach() bekerja bagaimana?

9. Callback function

10. Apa isi parameter movie?

11. forEach() sebenarnya memberikan 3 argument

12. Kenapa lecture hanya menggunakan movie?

13. Sekarang membuat movie card

14. Template literal

15. Kenapa ini berguna untuk movie card?

16. Kenapa harus backtick?

17. Sekarang kita membuat HTML card lengkap

18. Apa yang terjadi pada setiap iteration?

19. Kemudian HTML tersebut dimasukkan ke DOM

20. Menggunakan insertAdjacentHTML()

21. Apa arti "beforeend"?

22. Kenapa bukan innerHTML?

23. Alur lengkap satu movie

24. Alur untuk 5 movie

25. Kenapa awalnya hanya h2?

26. Kenapa semua movie awalnya muncul satu baris?

27. Hardcoded vs dynamic

28. Perhatikan genre

29. movie.image

30. Bagaimana dengan image yang kosong?

31. Satu hal yang sangat penting: forEach() tidak membuat array baru

32. Kenapa forEach() cocok untuk render?

33. Hubungkan dengan konsep callback yang sudah dipelajari

34. Bagian kode secara konsep

35. Baca kode tersebut seperti manusia

36. Connection dengan DOM yang sudah kamu pelajari

insertAdjacentElement()

insertAdjacentHTML()

37. Connection dengan template literal

38. Connection dengan array

39. Kenapa ini penting untuk fitur berikutnya?

40. Satu catatan teknis penting: render ulang

41. Kesalahan mental yang sebaiknya dihindari

❌ Salah:

✅ Benar:

❌ Salah:

✅ Dalam kode lecture:

❌ Salah:

✅ Lebih tepat:

❌ Salah:

✅ Benar:

42. Ringkasan setiap bagian

43. Mental model terakhir 🚀

2. Data `movies` adalah sumbernya

4. Kenapa menggunakan `getElementById()`?

5. Membuat function `renderAllMovies()`

6. `renderAllMovies(movies)`

7. Bagian terpenting: `forEach()`

8. Dalam project ini `forEach()` bekerja bagaimana?

10. Apa isi parameter `movie`?

11. `forEach()` sebenarnya memberikan 3 argument

12. Kenapa lecture hanya menggunakan `movie`?

20. Menggunakan `insertAdjacentHTML()`

21. Apa arti `"beforeend"`?

22. Kenapa bukan `innerHTML`?

25. Kenapa awalnya hanya `h2`?

28. Perhatikan `genre`

29. `movie.image`

31. Satu hal yang sangat penting: `forEach()` tidak membuat array baru

32. Kenapa `forEach()` cocok untuk render?

`insertAdjacentElement()`

`insertAdjacentHTML()`