Materi Pemrograman
Apa Itu Template & Module?
Pelajari cara kerja template dan module dalam pemrograman — dua konsep kunci yang membuat kode lebih rapi, efisien, dan mudah dikelola.
Mulai Belajar →// module.js
export function sapa(nama) {
return `Halo, ${nama}!`;
}
// main.js
import { sapa } from './module';
console.log(sapa('Budi'));
DRY
Don't Repeat Yourself
♻️
Kode reusable
📦
Modular & rapi
⚡
Hemat waktu coding
01
Apa Itu Template & Module?
Dua konsep ini adalah fondasi dari pemrograman modern yang efisien. Keduanya bertujuan sama: menghindari pengulangan kode dan membuat program lebih mudah dipelihara.
Template
Kerangka atau pola yang sudah jadi, bisa diisi dengan data yang berbeda-beda. Seperti formulir kosong yang tinggal diisi.
Module
Kumpulan fungsi/kode yang dikemas dalam satu file, bisa dipanggil dari file lain kapan saja dibutuhkan.
💡 Analogi mudah:
Template = Cetakan kue. Bentuknya sama, tapi isinya bisa coklat, vanila, atau stroberi.
Module = Kotak peralatan dapur. Simpan di satu tempat, ambil kapanpun perlu tanpa beli lagi.
Template = Cetakan kue. Bentuknya sama, tapi isinya bisa coklat, vanila, atau stroberi.
Module = Kotak peralatan dapur. Simpan di satu tempat, ambil kapanpun perlu tanpa beli lagi.
02
Jenis-Jenis Template
Template digunakan di berbagai bidang pemrograman. Berikut jenis-jenis template yang paling sering ditemui:
HTML Template
Kerangka halaman web. Contoh: Bootstrap, Tailwind starter, template blog.
Template Engine
Jinja2 (Python), Blade (Laravel), EJS (Node.js) — gabungkan HTML dengan data dinamis.
C++ Template
Fungsi/kelas generik yang bekerja untuk berbagai tipe data sekaligus.
UI Template
Komponen siap pakai untuk React, Vue, atau Flutter yang bisa dikustomisasi.
Email Template
Desain email HTML yang konsisten untuk newsletter atau notifikasi otomatis.
Code Template
Snippet atau boilerplate kode yang sering dipakai ulang, seperti struktur proyek.
02
Jenis-Jenis Module
Module dibedakan berdasarkan bahasa pemrograman dan cara penggunaannya:
| Tipe Module | Bahasa | Cara Import | Keterangan |
|---|---|---|---|
| ES Module (ESM) | JavaScript | import / export |
Standar modern JS, didukung browser & Node.js |
| CommonJS | Node.js | require / module.exports |
Format lama Node.js, masih banyak digunakan |
| Python Module | Python | import / from...import |
Setiap file .py bisa jadi module |
| PHP Namespace | PHP | use / require_once |
Digunakan di Laravel, Symfony, WordPress |
| C++ Header | C++ | #include |
File .h/.hpp berisi deklarasi fungsi/kelas |
03
Cara Menggunakan Module
Alur kerja module sangat sederhana: buat → ekspor → impor → pakai. Berikut langkah-langkahnya:
-
1Buat file modulePisahkan kode berdasarkan fungsinya ke file tersendiri. Misal:
math.jskhusus operasi matematika,string.jskhusus manipulasi teks. -
2Export fungsi/variabel yang ingin dibagikanTandai apa yang boleh dipakai dari luar file menggunakan keyword
export(JS) atau tanpa underscore (Python). -
3Import di file yang membutuhkanPanggil module dari file lain menggunakan
import(JS) atauimport(Python). Hanya ambil yang dibutuhkan saja. -
4Gunakan seperti biasaSetelah diimport, fungsi dari module bisa dipanggil langsung seolah ditulis di file yang sama.
💡 Prinsip Single Responsibility: Setiap module sebaiknya punya satu tanggung jawab saja. Module yang fokus lebih mudah di-debug, ditest, dan dipakai ulang di proyek lain.
04
Contoh Kode Nyata
Mari lihat contoh konkret penggunaan module dan template di beberapa bahasa populer:
📌 JavaScript — ES Module
math.js — file module
JavaScript
// Buat & export fungsi dari module
export function tambah(a, b) { return a + b; }
export function kurang(a, b) { return a - b; }
export const PI = 3.14159;
// main.js — file yang menggunakan module
import { tambah, kurang, PI } from './math.js';
console.log(tambah(5, 3)); // Output: 8
console.log(kurang(10, 4)); // Output: 6
console.log(PI); // Output: 3.14159
export function tambah(a, b) { return a + b; }
export function kurang(a, b) { return a - b; }
export const PI = 3.14159;
// main.js — file yang menggunakan module
import { tambah, kurang, PI } from './math.js';
console.log(tambah(5, 3)); // Output: 8
console.log(kurang(10, 4)); // Output: 6
console.log(PI); // Output: 3.14159
📌 Python — Module & Import
utilitas.py — file module Python
Python
# utilitas.py — buat module
def sapa(nama):
return f"Halo, {nama}! Selamat datang."
def hitung_luas(panjang, lebar):
return panjang * lebar
# main.py — gunakan module
from utilitas import sapa, hitung_luas
print(sapa("Budi")) # Halo, Budi! Selamat datang.
print(hitung_luas(5, 8)) # 40
def sapa(nama):
return f"Halo, {nama}! Selamat datang."
def hitung_luas(panjang, lebar):
return panjang * lebar
# main.py — gunakan module
from utilitas import sapa, hitung_luas
print(sapa("Budi")) # Halo, Budi! Selamat datang.
print(hitung_luas(5, 8)) # 40
📌 Jinja2 — HTML Template Engine (Python/Flask)
profil.html — template Jinja2
HTML + Jinja2
<!-- Template HTML dengan variabel dinamis -->
<h1>Halo, {{ nama }}!</h1>
<p>Umur: {{ umur }} tahun</p>
{% if umur >= 17 %}
<span>✅ Sudah dewasa</span>
{% else %}
<span>🔒 Belum dewasa</span>
{% endif %}
# app.py — kirim data ke template
return render_template('profil.html', nama='Budi', umur=20)
<h1>Halo, {{ nama }}!</h1>
<p>Umur: {{ umur }} tahun</p>
{% if umur >= 17 %}
<span>✅ Sudah dewasa</span>
{% else %}
<span>🔒 Belum dewasa</span>
{% endif %}
# app.py — kirim data ke template
return render_template('profil.html', nama='Budi', umur=20)
📌 C++ — Generic Template
template C++ — fungsi generik
C++
// Template fungsi — bekerja untuk int, double, string, dsb.
template<typename T>
T ambilMaksimal(T a, T b) {
return (a > b) ? a : b;
}
int main() {
cout << ambilMaksimal(10, 20); // int → 20
cout << ambilMaksimal(3.5, 2.1); // double → 3.5
cout << ambilMaksimal('z', 'a'); // char → z
}
template<typename T>
T ambilMaksimal(T a, T b) {
return (a > b) ? a : b;
}
int main() {
cout << ambilMaksimal(10, 20); // int → 20
cout << ambilMaksimal(3.5, 2.1); // double → 3.5
cout << ambilMaksimal('z', 'a'); // char → z
}
✅ Keuntungan pakai Template & Module: Kode tidak perlu ditulis ulang (DRY), lebih mudah di-debug karena terisolasi, mudah dikerjakan tim secara paralel, dan bisa dipakai ulang di proyek berbeda.
Topik yang berkaitan:
Siap praktek langsung? 🚀
Coba buat module pertamamu atau uji pemahaman dengan kuis singkat.
