PENERAPAN Template Engine sederhana, one way data binding, two way data binding, dan dependency…
Pada era pengembangan web modern, pengembang tidak hanya dituntut untuk membuat aplikasi yang berfungsi dengan baik, tetapi juga memiliki…
PENERAPAN Template Engine sederhana, one way data binding, two way data binding, dan dependency injection container
Pada era pengembangan web modern, pengembang tidak hanya dituntut untuk membuat aplikasi yang berfungsi dengan baik, tetapi juga memiliki struktur kode yang rapi, modular, dan efisien. Untuk mencapai hal tersebut, beberapa konsep penting seperti Template Engine, One Way Data Binding, Two Way Data Binding, dan Dependency Injection Container wajib dipahami oleh para pengembang. Artikel ini membahas secara mendalam keempat konsep tersebut, sesuai dengan tugas yang diberikan.
Apa itu Template Engine?
Template Engine adalah sistem yang digunakan untuk memisahkan logika pemrograman dengan tampilan antarmuka (UI). Ia memungkinkan kita untuk menulis HTML yang menyisipkan data dinamis tanpa harus menulis HTML secara manual setiap kali data berubah. Engine ini akan membaca template (biasanya HTML) dan mengganti placeholder dengan data nyata sebelum dikirim ke browser.
Cara Kerja
Template engine bekerja dengan cara:
- Membaca file template (misalnya
index.html) - Mencari placeholder seperti
{{nama}} - Mengganti placeholder tersebut dengan data aktual (misalnya “Ika”)
- Menghasilkan HTML final yang siap ditampilkan
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Template Engine</title>
</head>
<body>
<div id="output"></div>
<script>
const template = "<h1>Halo, {{nama}}!</h1><p>Selamat datang di {{platform}}</p>";
const data = {
nama: "Ika",
platform: "Medium"
};
const render = (tpl, data) => {
return tpl.replace(/{{(.*?)}}/g, (match, key) => data[key.trim()]);
};
document.getElementById("output").innerHTML = render(template, data);
</script>
</body>
</html>
Tampilan template engine
One Way Data Binding
Pengertian
One Way Data Binding adalah teknik di mana data hanya mengalir satu arah, yaitu dari model (data) ke view (tampilan). Jika data model berubah, view akan diperbarui. Tapi jika view berubah (misalnya user input), data model tidak akan ikut berubah otomatis
Contoh Implementasi:
<!DOCTYPE html>
<html>
<head>
<title>One Way Data Binding</title>
</head>
<body>
<h2>One Way Data Binding</h2>
<p id="output"></p>
<script>
// Data model
const nama = "Ika";
// Binding data ke tampilan (view)
document.getElementById("output").innerText = "Halo, " + nama;
</script>
</body>
</html>
Tampilan one way data binding
Two Way Data Binding
Pengertian
Two Way Data Binding adalah teknik data binding dua arah, di mana model dan view saling sinkron. Artinya:
- Jika model berubah → view ikut berubah
- Jika user mengubah view (input) → model juga langsung berubah
Contoh Implementasi:
<!DOCTYPE html>
<html>
<head>
<title>Two-Way Binding Sederhana</title>
</head>
<body>
<h2>Two-Way Data Binding</h2>
<input type="text" id="inputNama" placeholder="Masukkan nama">
<p>Halo, <span id="tampilanNama"></span>!</p>
<script>
const input = document.getElementById("inputNama");
const output = document.getElementById("tampilanNama");
input.addEventListener("input", function () {
output.textContent = input.value;
});
</script>
</body>
</html>
Tampilan Two-Way Data Binding
Dependency Injection (DI) Container
Pengertian
Dependency Injection (DI) adalah pola desain yang digunakan untuk mengelola dependensi antara objek dalam aplikasi. Alih-alih membuat objek secara langsung di dalam kelas, kita “menyuntikkan” (inject) objek tersebut dari luar.
DI Container adalah wadah khusus yang bertugas:
- Menyimpan daftar dependensi
- Mengelola instansiasi objek
- Menginjeksi dependensi secara otomatis
Contoh Implementasi:
<!DOCTYPE html>
<html>
<head>
<title>Dependency Injection Sederhana</title>
</head>
<body>
<h2>Registrasi Pengguna</h2>
<input type="email" id="emailInput" placeholder="Masukkan email">
<button onclick="daftar()">Daftar</button>
<p id="output"></p>
<script>
// Layanan Email (Dependency)
class EmailService {
send(email) {
return `Email berhasil dikirim ke: ${email}`;
}
}
// Kelas utama yang menggunakan layanan (dependency)
class UserService {
constructor(emailService) {
this.emailService = emailService;
}
register(email) {
let result = "User berhasil terdaftar.<br>";
result += this.emailService.send(email);
return result;
}
}
// Fungsi utama saat tombol diklik
function daftar() {
const email = document.getElementById("emailInput").value;
// Injeksi manual dependency
const emailService = new EmailService();
const userService = new UserService(emailService);
const output = userService.register(email);
document.getElementById("output").innerHTML = output;
}
</script>
</body>
</html>
Tampilan Dependency Injection
KESIMPULAN
- HTML saja (tanpa JavaScript) tidak bisa melakukan data binding karena tidak punya kemampuan logika pemrograman.
- One-Way Data Binding: data hanya mengalir dari model ke tampilan — ini bisa dicapai dengan menyisipkan data ke elemen HTML menggunakan JavaScript.
- Two-Way Data Binding: sinkronisasi dua arah antara input dan tampilan — efek ini bisa ditiru menggunakan event listener di JavaScript.
- Untuk fitur data binding otomatis dan kompleks, framework seperti Angular, Vue, atau React sangat disarankan karena mereka menyediakan binding secara built-in.
Jadi, untuk keperluan data binding (baik satu arah maupun dua arah), kombinasi HTML dan JavaScript adalah cara paling ringan, sedangkan framework digunakan jika kamu butuh skala dan fitur yang lebih besar.
메타데이터
- post_id
- 65f9bef8aeea
- slug
- penerapan-template-engine-sederhana-one-way-data-binding-two-way-data-binding-dan-dependency-65f9bef8aeea
- url
- https://medium.com/@luthfatulika/penerapan-template-engine-sederhana-one-way-data-binding-two-way-data-binding-dan-dependency-65f9bef8aeea
- canonical_url
- https://medium.com/@luthfatulika/penerapan-template-engine-sederhana-one-way-data-binding-two-way-data-binding-dan-dependency-65f9bef8aeea
- author_url
- https://medium.com/@luthfatulika
- status
- ok
- fetched_at
- 2026-07-13 06:23:13