0Pricing
jQuery Academy · Pelajaran

Pembuatan Konten Dinamis dengan Data

Gabungkan atribut data dengan jQuery untuk membuat komponen interaktif, memperbarui UI berdasarkan data tersimpan, dan membangun tampilan konten yang fleksibel.

Pembuatan Konten Dinamis dengan Data adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar jQuery Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus jQuery Academy mencakup 3 pelajaran total.

Konten Dinamis dengan Data

Selamat datang di Pelajaran 2! Pada pelajaran sebelumnya, kita telah mempelajari cara menyimpan dan mengambil data menggunakan atribut data HTML5.

Sekarang, kita akan melangkah lebih jauh. Kita akan mempelajari cara menggabungkan atribut ini dengan jQuery untuk menghasilkan dan memperbarui konten secara dinamis di halaman web Anda. Hal ini membuat UI Anda interaktif dan fleksibel!

Mengapa Konten Dinamis?

Bayangkan Anda memiliki daftar produk, profil pengguna, atau artikel berita. Daripada menulis semuanya secara langsung, Anda dapat menentukan data dasar menggunakan atribut data-*.

  • Memperbarui elemen yang sudah ada dengan info baru.
  • Membuat elemen baru sepenuhnya berdasarkan data.
  • Mengendalikan perilaku UI (seperti menampilkan/menyembunyikan) menggunakan data.

Pendekatan ini memisahkan data konten dari penyajiannya.

Memperbarui Elemen yang Sudah Ada

Mari kita mulai dengan memperbarui konten. Kita dapat memiliki elemen dengan atribut data-* dan menggunakan jQuery untuk membaca data tersebut, lalu mengisi bagian lain dari halaman.

Hal ini sangat berguna untuk menampilkan detail tentang item yang dipilih atau memperbarui pesan status.

Kode: Memperbarui Detail Item

Cobalah mengeklik tombol untuk melihat cara atribut data dari satu elemen dapat memperbarui teks di elemen lain.

<!DOCTYPE html>
<html>
<head>
  <title>Update Content</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<div id="productCard" data-product-name="CoddyKit Pro" data-product-price="29.99">
  <p>Product: <span id="displayedName">[Name Here]</span></p>
  <p>Price: <span id="displayedPrice">[Price Here]</span></p>
  <button id="showDetailsBtn">Show Details</button>
</div>

<script>
$(document).ready(function() {
  $('#showDetailsBtn').on('click', function() {
    var name = $('#productCard').data('productName');
    var price = $('#productCard').data('productPrice');
    
    $('#displayedName').text(name);
    $('#displayedPrice').text('$' + price);
  });
});
</script>

</body>
</html>

Penjelasan: Memperbarui Konten

Pada contoh ini, div #productCard menyimpan data-product-name dan data-product-price.

  • Saat tombol diklik, .data('productName') dan .data('productPrice') mengambil nilai-nilai tersebut.
  • Selanjutnya, .text() digunakan untuk memasukkan nilai-nilai tersebut ke dalam span #displayedName dan #displayedPrice.

Ini menunjukkan cara membaca data dari satu elemen dan memperbarui konten elemen lain.

Membuat Elemen Baru

Selain memperbarui, kita juga dapat menggunakan atribut data untuk menghasilkan elemen HTML baru sepenuhnya. Cara ini sangat berguna untuk daftar, galeri, atau formulir dinamis.

Anda dapat menyimpan data yang menyerupai templat atau konfigurasi untuk elemen baru dalam atribut data, lalu menggunakan jQuery untuk membuat dan menyisipkannya ke dalam DOM.

Kode: Menambahkan Item ke Daftar

Klik tombol di bawah untuk menambahkan item daftar baru secara dinamis, dengan konten yang berasal dari atribut data tombol tersebut.

<!DOCTYPE html>
<html>
<head>
  <title>Create New Element</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<ul id="myList">
  <li>Existing Item 1</li>
</ul>

<button id="addBtn" data-new-item-text="Dynamic Item" data-new-item-value="101">
  Add Dynamic Item
</button>

<script>
$(document).ready(function() {
  $('#addBtn').on('click', function() {
    var itemText = $(this).data('newItemText');
    var itemValue = $(this).data('newItemValue');
    
    var newItem = $('<li>').text(itemText + ' (ID: ' + itemValue + ')');
    $('#myList').append(newItem);
  });
});
</script>

</body>
</html>

Penjelasan: Membuat Elemen

Di sini, tombol #addBtn memiliki data-new-item-text dan data-new-item-value.

  • Saat diklik, kita mengambil nilai-nilai tersebut.
  • $('
  • ') membuat elemen item daftar baru.
  • .text() mengisinya dengan data gabungan.
  • Terakhir, $('#myList').append(newItem) menambahkan
  • baru ini ke daftar tidak berurutan kita.

Ini adalah pola dasar untuk membuat daftar atau kisi dinamis!

Komponen Interaktif dengan Data

Atribut data bukan hanya untuk teks! Atribut ini juga dapat menyimpan konfigurasi untuk komponen interaktif. Misalnya, elemen mana yang harus diubah tampilannya, atau animasi apa yang harus diputar.

Hal ini memisahkan logika JavaScript dari ID atau kelas yang ditulis secara langsung, sehingga kode Anda menjadi lebih modular dan dapat digunakan kembali.

Pertanyaan: Konten Dinamis

Perhatikan kode HTML dan jQuery berikut:

<div id="infoBox" data-status="active"></div>

$('#infoBox').data('status', 'inactive');

Apa nilai baru atribut data-status saat diambil menggunakan $('#infoBox').data('status') setelah kode ini dijalankan?

Ringkasan: Konten Dinamis dengan Data

Bagus sekali! Dalam pelajaran ini, Anda telah mempelajari cara memanfaatkan atribut data untuk membuat konten web yang benar-benar dinamis:

  • Anda dapat memperbarui elemen yang sudah ada dengan membaca atribut data dan memasukkan nilainya.
  • Anda dapat menghasilkan elemen HTML baru secara dinamis dan mengisinya dengan data dari elemen lain.
  • Pendekatan ini membuat UI Anda lebih fleksibel dan interaktif dengan memisahkan data dari penyajian.

Sekarang Anda siap membuat antarmuka pengguna yang lebih mudah disesuaikan dan menarik!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pembuatan Konten Dinamis dengan Data” gratis?

Ya — teks lengkap “Pembuatan Konten Dinamis dengan Data” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus jQuery Academy, upgrade ke CoddyKit PRO. Kursus jQuery Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Pembuatan Konten Dinamis dengan Data”?

Gabungkan atribut data dengan jQuery untuk membuat komponen interaktif, memperbarui UI berdasarkan data tersimpan, dan membangun tampilan konten yang fleksibel. Kamu berlatih jQuery Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai jQuery Academy?

Tidak diperlukan pengalaman sebelumnya. jQuery Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 3.

Berapa lama pelajaran “Pembuatan Konten Dinamis dengan Data” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran jQuery Academy ini?

Ya. Setiap pelajaran jQuery Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Memanfaatkan Atribut Data HTML5
  2. Pembuatan Konten Dinamis dengan Data
  3. Integrasi Dasar Templat Sisi Klien
← Kembali ke jQuery Academy