Modul Interaktif Pengembangan Web
Pelajari dasar-dasar Frontend dan Backend dalam pengembangan web.
Pengantar Pengembangan Web
Pengembangan web dibagi menjadi dua bagian utama:
- Frontend: Bagian yang berinteraksi langsung dengan pengguna. Ini adalah apa yang Anda lihat dan klik di browser (HTML, CSS, JavaScript).
- Backend: Bagian "di balik layar" yang mengelola data, logika bisnis, dan interaksi dengan database. Pengguna tidak melihatnya secara langsung.
1. Frontend (Sisi Klien)
Frontend dibangun menggunakan:
- HTML (HyperText Markup Language): Struktur konten halaman web.
- CSS (Cascading Style Sheets): Mengatur tampilan dan gaya halaman web.
- JavaScript: Menambahkan interaktivitas dan perilaku dinamis ke halaman web.
Contoh Interaktif Frontend
Klik tombol di bawah ini untuk melihat bagaimana JavaScript dapat mengubah konten halaman secara langsung tanpa memuat ulang halaman.
Pesan akan muncul di sini setelah Anda mengklik tombol.
Kode Frontend (HTML, CSS, JavaScript)
<!-- HTML untuk tombol dan output -->
<button id="frontendButton" class="button-primary">Klik Saya!</button>
<div id="frontendOutput" class="output-box mt-4">
Pesan akan muncul di sini setelah Anda mengklik tombol.
</div<
<!-- JavaScript untuk interaktivitas -->
<script>
// Mendapatkan elemen tombol dan output
const frontendButton = document.getElementById('frontendButton');
const frontendOutput = document.getElementById('frontendOutput');
// Menambahkan event listener untuk klik tombol
frontendButton.addEventListener('click', () => {
// Mengubah teks di elemen output
frontendOutput.textContent = 'Anda baru saja berinteraksi dengan Frontend!';
frontendOutput.style.color = '#2f855a'; // Mengubah warna teks
frontendOutput.style.fontWeight = 'bold'; // Mengubah gaya teks
});
</script>
2. Backend (Sisi Server)
Backend bertanggung jawab untuk:
- Menyimpan dan mengelola data (menggunakan database seperti MySQL, PostgreSQL, MongoDB).
- Menjalankan logika bisnis (misalnya, memproses pesanan, otentikasi pengguna).
- Berkomunikasi dengan frontend melalui API (Application Programming Interface).
Bahasa dan framework backend populer meliputi Node.js (Express), Python (Django, Flask), PHP (Laravel), Ruby (Rails), Java (Spring), dan Go.
Contoh Konseptual Interaksi Backend
Meskipun kita tidak dapat menjalankan server backend di sini, kita dapat mensimulasikan bagaimana frontend akan "meminta" data dari backend menggunakan JavaScript (fungsi fetch).
Data dari simulasi backend akan muncul di sini.
Kode Interaksi Backend (Konseptual JavaScript)
<!-- JavaScript untuk simulasi interaksi backend -->
<script>
// Mendapatkan elemen tombol dan output backend
const backendButton = document.getElementById('backendButton');
const backendOutput = document.getElementById('backendOutput');
// Menambahkan event listener untuk klik tombol backend
backendButton.addEventListener('click', async () => {
backendOutput.textContent = 'Meminta data dari backend...';
backendOutput.style.color = '#718096'; // Mengubah warna teks
try {
// Simulasi panggilan API ke backend
// Dalam aplikasi nyata, ini akan menjadi URL server Anda, misal: '/api/data'
const simulatedResponse = await new Promise(resolve => setTimeout(() => {
resolve({ message: 'Ini adalah data dari backend!', timestamp: new Date().toLocaleString() });
}, 1500)); // Menunda 1.5 detik untuk mensimulasikan latensi jaringan
// Menampilkan data yang diterima dari backend
backendOutput.textContent = `Backend merespons: "${simulatedResponse.message}" (pada ${simulatedResponse.timestamp})`;
backendOutput.style.color = '#0056b3'; // Mengubah warna teks
backendOutput.style.fontWeight = 'bold'; // Mengubah gaya teks
} catch (error) {
backendOutput.textContent = 'Terjadi kesalahan saat meminta data dari backend.';
backendOutput.style.color = '#e53e3e'; // Mengubah warna teks menjadi merah untuk error
console.error('Error fetching from simulated backend:', error);
}
});
</script>
Bagaimana Frontend dan Backend Bekerja Sama?
Ini adalah siklus kerja tipikal:
- Pengguna membuka halaman web (Frontend dimuat di browser).
- Pengguna melakukan tindakan (misalnya, mengklik tombol, mengisi formulir).
- JavaScript (di Frontend) mengirimkan permintaan (request) ke Backend (melalui API).
- Backend menerima permintaan, memprosesnya (mungkin berinteraksi dengan database), dan mengirimkan respons (response) kembali ke Frontend.
- JavaScript (di Frontend) menerima respons dan memperbarui tampilan halaman web tanpa perlu memuat ulang seluruh halaman.
Konsep ini dikenal sebagai arsitektur klien-server.
