Pemrograman web, atau pengembangan web, mengacu pada proses pembuatan situs web dan aplikasi web yang dapat diakses melalui internet. Ini melibatkan kombinasi bahasa, kerangka kerja, dan alat untuk membangun struktur, desain, dan fungsionalitas interaktif platform berbasis web.
Komponen Utama Pemrograman Web:
Pengembangan Front-End:
Ini berfokus pada sisi klien suatu situs web, atau apa yang berinteraksi langsung dengan pengguna di peramban web mereka.
- HTML (Bahasa Markup HiperTeks): Digunakan untuk menentukan struktur dan konten halaman web.
- CSS (Cascading Style Sheets): Digunakan untuk menata tampilan visual elemen HTML, termasuk warna, font, tata letak, dan responsivitas.
- JavaScript: Menambahkan interaktivitas dan perilaku dinamis ke halaman web, menangani masukan pengguna, animasi, dan logika sisi klien. Kerangka kerja seperti React, Angular, dan Vue.js dibangun di atas JavaScript.
Pengembangan Back-End:
Ini berfokus pada logika sisi server, basis data, dan manajemen server yang mendukung fungsionalitas situs web.
- Bahasa Sisi Server: Contohnya termasuk Python (dengan kerangka kerja seperti Django dan Flask), PHP (dengan kerangka kerja seperti Laravel), Node.js (JavaScript runtime), Ruby (dengan Ruby on Rails), Java (dengan Spring), dan Go.
- Basis data: Digunakan untuk menyimpan dan mengelola data, seperti informasi pengguna, konten, dan data aplikasi. Basis data umum meliputi MySQL, PostgreSQL, MongoDB, dan SQLite.
- Server : Perangkat lunak atau perangkat keras yang memberikan konten web kepada pengguna berdasarkan permintaan (misalnya, Apache, Nginx).
Pengembangan Full Stack :
Ini melibatkan kemahiran dalam pengembangan front-end dan back-end, yang memungkinkan pengembang untuk menangani semua aspek pembuatan aplikasi web.
Tujuan Pemrograman Web:
Pemrograman web sangat penting untuk membuat berbagai aplikasi online, termasuk:
- Situs Web Statis: Situs web sederhana dengan konten tetap.
- Situs Web Dinamis: Situs web dengan elemen interaktif dan konten yang diperbarui secara berkala, sering kali didukung oleh basis data.
- Aplikasi Web: Aplikasi perangkat lunak kompleks yang diakses melalui peramban web (misalnya, perbankan daring, platform e-dagang, media sosial).
- API (Antarmuka Pemrograman Aplikasi): Memungkinkan sistem perangkat lunak yang berbeda untuk berkomunikasi satu sama lain.
Outline Materi Ajar Web Programming (16 Pertemuan)
Pendahuluan (Front-End Basics)
Pertemuan 1 – Pengenalan Web Programming
-
Konsep client-server, front-end & back-end
-
Tools untuk pengembangan (VS Code, XAMPP/Laragon, Browser DevTools)
-
Struktur dasar aplikasi web
Pertemuan 2 – HTML Dasar
-
Struktur dokumen HTML
-
Elemen dasar: heading, paragraph, list, link, image, table, form
-
Praktikum: membuat halaman profil sederhana
Pertemuan 3 – CSS Dasar
-
Inline, internal, dan external CSS
-
Selektor, warna, font, margin, padding, border
-
Praktikum: styling halaman profil
Pertemuan 4 – CSS Layout & Positioning
-
Box model, display, position, float, flexbox, grid
-
Praktikum: layout halaman sederhana dengan 2–3 kolom
Penguatan Front-End (Bootstrap)
Pertemuan 5 – Bootstrap Framework
-
Instalasi & struktur Bootstrap
-
Grid system & responsive design
-
Praktikum: membuat layout responsive
Pertemuan 6 – Bootstrap Components
-
Navbar, card, button, form, modal
-
Praktikum: membuat landing page dengan Bootstrap
Pertemuan 7 – Mini Project Front-End
-
Merancang halaman depan (landing page + form pendaftaran)
-
Integrasi HTML, CSS, dan Bootstrap
Back-End (PHP & MySQL Basics)
Pertemuan 8 – Pengenalan PHP
-
Syntax dasar PHP
-
Variabel, tipe data, operator
-
Praktikum: kalkulasi sederhana dengan PHP
Pertemuan 9 – PHP Control Structure
-
Kondisi (if, switch)
-
Looping (for, while, foreach)
-
Praktikum: form input & output dengan kondisi
Pertemuan 10 – PHP Function & Form Handling
-
Function, include, require
-
Form handling (GET & POST)
-
Praktikum: form login sederhana (tanpa database)
Pertemuan 11 – Database MySQL
-
Pengenalan RDBMS & MySQL
-
Membuat database & tabel dengan phpMyAdmin
-
Query dasar: SELECT, INSERT, UPDATE, DELETE
Pertemuan 12 – PHP & MySQL Connection
-
Koneksi PHP–MySQL (mysqli / PDO)
-
Insert, display data dari database
-
Praktikum: aplikasi CRUD sederhana (Create & Read)
Integrasi Front-End & Back-End
Pertemuan 13 – CRUD Lanjutan
-
Update & Delete data dengan PHP–MySQL
-
Praktikum: CRUD lengkap data siswa
Pertemuan 14 – Session & Authentication
-
Session & cookies
-
Sistem login & logout sederhana
-
Praktikum: proteksi halaman dengan session
Pertemuan 15 – Mini Project Full Stack
-
Merancang aplikasi mini (misalnya: sistem pendaftaran siswa / katalog produk)
-
Menggabungkan front-end (Bootstrap) & back-end (PHP–MySQL)
Penutup
Pertemuan 16 – Presentasi & Evaluasi Project
-
Presentasi mini project tiap kelompok
-
Review konsep front-end & back-end
-
Evaluasi akhir & diskusi pengembangan lebih lanjut (Laravel, API, dsb.)
