Membuat Web Dinamis

Sebuah web dinamis atau aplikasi web adalah halaman web yang dapat menerima interaksi dari pengguna dan menyesuaikan tampilannya dengan data yang didapat melalui sumber eksternal (server). Namun sebelum terlalu jauh, kita perlu memahami terlebih dahulu sebuah poin penting yang mendukung interaktifitas tersebut, yaitu Javascript DOM.

Jika sebelumnya teman-teman pernah belajar mengenai bahasa pemrograman Javascript, yang kita lakukan adalah membuat baris-baris kode berisi logika lalu menampilkan hasilnya pada console.

Pada materi ini, kita akan belajar bagaimana menghubungkan logika-logika tersebut dengan tampilan web (HTML dan CSS). Mari kita mulai dengan membuat sebuah aplikasi image gallery.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="image-gallery">
        <!-- Tempat untuk menampilkan elemen card -->
    </div>
    <script src="script.js"></script>
</body>
</html>

styles.css

.image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.card {
    width: 200px;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Gambar akan menutupi seluruh area elemen img */
}

Dengan membuat kedua file di atas, tidak akan ada tampilan apapun yang terlihat jika kita jalankan aplikasi tersebut pada browser. Karena jika kita perhatikan, hanya ada sebuah elemen div kosong di sana. Tidak ada konten apapun di dalamnya.

Namun pada file styles.css, kita sudah membuat beberapa styling untuk class card beserta elemen image di dalamnya. Tidak usah bingung dulu ya teman-teman, kode CSS tersebut kita persiapkan karena nantinya kita akan membuat beberapa elemen HTML beserta CSS, tapi melalui kode Javascript. Kok bisa?

script.js

const imageArray = [
    'https://images.unsplash.com/photo-1682687982185-531d09ec56fc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80',
    'https://images.unsplash.com/photo-1696063429824-b0f45cd175eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80',
    'https://images.unsplash.com/photo-1659959104064-bf540e608ca0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1430&q=80',
    // tambahkan URL gambar lainnya sesuai kebutuhan
];

const galleryContainer = document.querySelector('.image-gallery');

imageArray.forEach((imageUrl) => {
    const card = document.createElement('div');
    card.classList.add('card');

    const image = document.createElement('img');
    image.src = imageUrl;

    card.appendChild(image);
    galleryContainer.appendChild(card);
});

Benar saja, setelah menambahkan kode javascript di atas, kita mendapatkan hasil seperti gambar di bawah ini.

Lalu, apa yang sebenarnya dilakukan kode javascript di atas? mari kita bahas sama-sama.

const imageArray = [
    'https://images.unsplash.com/photo-1682687982185-531d09ec56fc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80',
    'https://images.unsplash.com/photo-1696063429824-b0f45cd175eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80',
    'https://images.unsplash.com/photo-1659959104064-bf540e608ca0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1430&q=80',
    // tambahkan URL gambar lainnya sesuai kebutuhan
];

Tidak ada yang spesial pada potongan kode pertama, hanya sebuah array bernama imageArray yang berisi kumpulan string di dalamnya. String tersebut merupakan url gambar dari unsplash.com yang ingin kita tampilkan pada aplikasi kita.

Karena hanya ada 3 buah url, maka ekspektasi kita, gambar yang ditampilkan nantinya juga akan sebanyak 3 gambar.

const galleryContainer = document.querySelector('.image-gallery');

Karena kita ingin mengendalikan halaman web (HTML dan CSS) melalui kode javascript, di sinilah Javascript DOM berperan. Kita dapat melakukan seleksi sebuah elemen dengan perintah document.querySelector() tersebut, nilai yang kita masukkan pada parameternya ('.image-galery') merupakan nama class dari sebuah elemen yang telah kita buat pada dokumen HTML. Hal inilah yang kita sebut DOM Selection.

Elemen ini akan menjadi container atau penampung dari seluruh elemen yang menampilkan gambar di dalamnya. Kita memasukkannya ke dalam sebuah variabel galleryContainer agar lebih mudah digunakan kembali nantinya.

imageArray.forEach((imageUrl) => {
    const card = document.createElement('div');
    card.classList.add('card');

    const image = document.createElement('img');
    image.src = imageUrl;

    card.appendChild(image);
    galleryContainer.appendChild(card);
});

Selanjutnya, kita melakukan perulangan dengan method foreach berdasarkan panjang data yang ada pada array di atas. Karena hanya ada 3 item pada array tersebut, maka perulangan akan terjadi 3 kali.

Pada baris pertama dan kedua di dalam perulangan ini, kita membuat sebuah elemen div, lalu memberikan nama class card pada elemen tersebut. Masih ingat tentang kode CSS yang telah kita siapkan sebelumnya?

Pada parameter foreach, kita dapat mengambil satu data pada array secara bergantian pada setiap perulangannya. Saat berada di perulangan pertama, maka data array di indeks pertama lah yang akan jadi nilai parameter imageUrl, dan seterusnya.

Kita membuat sebuah elemen HTML <img> dengan menggunakan perintah document.createElement('img') lalu memasukkannya ke dalam variabel image. Karena setiap elemen image butuh nilai untuk atribut src, kita masukkan data imageUrl dari parameter ke dalam properti src pada elemen image tersebut. Proses inilah yang kita sebut DOM Manipulation.

Terakhir, kita memasukkan elemen image yang kita buat ke dalam elemen card, lalu memasukkan elemen card ke dalam elemen galleryContainer.

Maka sekarang susunan elemennya kira-kira akan seperti ini :

div.galleryContainer > div.card > img

Karena perulangan tersebut terjadi 3 kali dan setiap perulanganya menghasilkan satu elemen card beserta gambar di dalamnya, maka sudah seharusnya akan ada tiga buah elemen card berisi gambar di dalam aplikasi kita.

Teman-teman dapat menghapus dan menambahkan kode javascript tersebut untuk dapat lebih memahami bagaimana DOM bekerja.

DOM Selection

DOM Selection merupakan proses melakukan seleksi atau sederhananya mengambil sebuah atau beberapa elemen yang ada pada dokumen HTML berdasarkan class, id atau bahkan nama tag dari elemen tersebut.

Selain querySelector, terdapat beberapa metode lain yang dapat digunakan :

getElementById: Metode ini digunakan untuk mengambil referensi elemen dengan ID tertentu dalam dokumen HTML. Kita hanya perlu menyediakan ID elemen yang ingin Anda akses.
getElementsByClassName: Metode ini digunakan untuk mengambil koleksi elemen dengan nama kelas tertentu. Ini mengembalikan HTMLCollection (kumpulan elemen) yang dapat diakses dengan indeks.
getElementsByTagName: Metode ini digunakan untuk mengambil koleksi elemen dengan tag HTML tertentu. Seperti getElementsByClassName, ini juga mengembalikan HTMLCollection.
querySelectorAll: Metode ini mirip dengan querySelector, tetapi mengembalikan NodeList (kumpulan elemen) yang sesuai dengan selektor yang diberikan. Ini memungkinkan penggunaan selektor CSS yang lebih kompleks untuk memilih elemen-elemen.
getElementsByName: Metode ini digunakan untuk mengambil koleksi elemen dengan atribut name tertentu. Ini sering digunakan untuk mengambil elemen-elemen dalam bentuk HTML yang memiliki nama tertentu.
querySelector: Metode ini digunakan untuk mengambil elemen pertama yang cocok dengan selektor CSS tertentu. Ini berguna untuk memilih elemen berdasarkan ID, kelas, atau jenis elemen.

Cobalah beberapa metode tersebut untuk melakukan seleksi pada elemen HTML, namun cukup gunakan beberapa metode tersebut sesuai kegunaannya.

DOM Manipulation

Setelah kita berhasil memilih elemen yang kita kehendaki, barulah kita dapat melakukan manipulasi pada elemen tersebut. Manipulasi ini dapat berupa pengurangan, penambahan elemen baru atau mengubah atribut pada elemen tersebut.

Berikut ini beberapa metode yang dapat teman-teman coba gunakan :

appendChild: Metode ini digunakan untuk menambahkan elemen baru sebagai anak (child) dari elemen yang sudah ada. Misalnya, kita dapat menambahkan elemen baru ke dalam sebuah div seperti contoh sebelumnya.
removeChild: Metode ini digunakan untuk menghapus elemen child dari elemen yang sudah ada. Kita perlu menyebutkan elemen child yang ingin dihapus.

const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
parentElement.removeChild(childElement);

createElement: Metode ini digunakan untuk membuat elemen HTML baru dalam DOM. Kita dapat mengatur atribut, teks, dan properti elemen ini seperti contoh sebelumnya.
setAttribute dan getAttribute: Metode setAttribute digunakan untuk menambah atau mengganti atribut elemen, sedangkan getAttribute digunakan untuk mendapatkan nilai atribut dari elemen.

const element = document.getElementById('elemen-saya');
element.setAttribute('data-id', '123');
const dataId = element.getAttribute('data-id');

classList: Properti classList digunakan untuk menambah, menghapus, atau memeriksa kelas pada elemen. Ini memudahkan pengelolaan kelas CSS.

const element = document.getElementById('elemen-saya');
element.classList.add('kelas-tambahan');
element.classList.remove('kelas-terhapus');
const hasClass = element.classList.contains('kelas-tertentu');

innerHTML: Properti innerHTML digunakan untuk mengatur atau mendapatkan isi HTML dari elemen. Ini memungkinkan Anda untuk menambahkan atau mengganti konten dalam elemen. Harap berhati-hati dengan potensi risiko XSS (Cross-Site Scripting) saat menggunakan innerHTML.

const element = document.getElementById('elemen-saya');
element.innerHTML = '<p>Teks baru</p>';

textContent: Properti textContent digunakan untuk mengatur atau mendapatkan teks konten dari elemen, tanpa memperhatikan elemen HTML di dalamnya. Ini berguna untuk menghindari risiko XSS.

const element = document.getElementById('elemen-saya');
element.textContent = 'Teks baru';

style: Properti style digunakan untuk mengakses dan mengubah properti CSS dari elemen. Kita dapat mengatur atau mengubah properti seperti warna, ukuran font, atau posisi.

const element = document.getElementById('elemen-saya');
element.style.color = 'red';
element.style.fontSize = '16px';
element.style.marginTop = '20px';

cloneNode: Metode ini digunakan untuk mengklon elemen tertentu, baik dengan atau tanpa anak-anaknya. Ini berguna jika Anda perlu membuat salinan elemen dalam DOM.

const originalElement = document.getElementById('elemen-asli');
const clonedElement = originalElement.cloneNode(true); // true untuk mengklon dengan anak-anak

DOM Tree: Struktur Dasar HTML

DOM Tree merupakan konsep yang mengibaratkan dokumen HTML sebagai sebuah pohon besar yang memiliki beberapa cabang dan setiap cabangnya bisa jadi memiliki cabang-cabang lainnya lagi.

Di bagian paling atas pohon, kita memiliki elemen <html>, yang menjadi elemen induk atau "akar" dari DOM Tree. Kemudian di dalamnya terdapat elemen<head> dan <body>. Dari sini, elemen-elemen lain bercabang sebagai anak-anak, cucu, dan seterusnya. Ini menciptakan hierarki seperti cabang-cabang pohon.

Namun sebenarnya, ada sebuah objek bernama document yang menjadi lahan tempat pohon HTML ini tumbuh. Itulah sebabnya kita selalu menyebutkan "document" setiap kali melakukan seleksi sebuah elemen HTML pada kode javascript.

Referensi

https://javascript.info/dom-nodes https://www.w3schools.com/js/js_htmldom_methods.asp

PreviousBerkenalan dengan Alat Pengembangan Web NextMembuat Web yang Interaktif

Last updated 1 year ago