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.

Kang Alim