Pertemuan 1: Pengantar Pemrograman Web

Daftar Isi

• 1. Konsep Dasar Pemrograman Web
• 2. Sejarah dan Perkembangan Web
• 3. Arsitektur Client-Server
• 4. Sekilas Teknologi Core Web (HTML, CSS, JS, PHP)

1. Konsep Dasar Pemrograman Web

Pemrograman Web adalah proses membuat aplikasi atau situs web menggunakan bahasa pemrograman tertentu agar dapat diakses melalui internet menggunakan peramban web (web browser).

Komponen Utama Web:

• Internet: Jaringan komputer global yang saling terhubung menggunakan protokol standar (TCP/IP).
• WWW (World Wide Web): Sistem informasi berbasis dokumen hiperteks (hypertext) yang saling terhubung dan diakses melalui internet.
• Web Browser (Peramban): Perangkat lunak di sisi pengguna (client) untuk menampilkan dokumen web (contoh: Google Chrome, Mozilla Firefox, Safari, Microsoft Edge).
• Web Server: Perangkat lunak/keras yang menyimpan data web dan melayani permintaan (request) dari web browser.

2. Sejarah dan Perkembangan Web

Teknologi web telah mengalami evolusi yang sangat pesat sejak pertama kali diciptakan oleh Sir Tim Berners-Lee pada tahun 1989.

3. Arsitektur Client-Server

Aplikasi web bekerja berdasarkan model Client-Server. Komunikasi antara keduanya difasilitasi oleh protokol HTTP (Hypertext Transfer Protocol) atau HTTPS (versi aman).

sequenceDiagram
    participant Client as Client (Web Browser)
    participant Server as Web Server (Apache/Nginx/IIS)
    participant DB as Database (MySQL)

    Note over Client: Pengguna mengetik URL & menekan Enter
    Client->>Server: HTTP Request (Ambil halaman web)
    
    Note over Server: Memproses request / mengeksekusi kode PHP
    Server->>DB: Query Data (jika diperlukan)
    DB-->>Server: Mengembalikan Hasil Query
    
    Note over Server: Merender HTML, CSS, JS
    Server-->>Client: HTTP Response (HTML, CSS, JS, Gambar)
    Note over Client: Browser merender tampilan untuk pengguna

Penjelasan Peran:

1. Client: Berperan meminta data/halaman dan menampilkannya kepada pengguna. Kode yang dieksekusi di sini disebut sebagai Client-Side (HTML, CSS, JavaScript).
2. Server: Berperan menerima permintaan, memproses logika aplikasi, mengakses database, dan mengirimkan hasilnya kembali ke client. Kode yang dieksekusi di sini disebut sebagai Server-Side (PHP, Python, Node.js).

4. Sekilas Teknologi Core Web (HTML, CSS, JS, PHP)

Pengembangan web modern terbagi menjadi dua ranah utama: Frontend (tampilan & interaksi) dan Backend (logika server & data). Berikut adalah pilar teknologi utamanya:

1. HTML (Hypertext Markup Language)

• Peran: Struktur/Kerangka dasar halaman web.
• Analogi: Tulang/kerangka pada tubuh manusia.
• Fungsi: Menentukan susunan teks, gambar, form, tabel, dan elemen lainnya pada halaman web.

2. CSS (Cascading Style Sheets)

• Peran: Desain, tata letak, estetika, dan responsivitas halaman.
• Analogi: Kulit, pakaian, warna mata, dan gaya rambut pada manusia.
• Fungsi: Mengatur warna, ukuran font, jarak (margin/padding), tata letak kolom, serta animasi visual.

3. JavaScript (JS)

• Peran: Interaktivitas, validasi data di sisi client, dan manipulasi dinamis.
• Analogi: Otak motorik/gerakan tubuh manusia (misal: berjalan, melompat, berkedip).
• Fungsi: Membuat fitur dinamis tanpa reload halaman (seperti slider gambar, notifikasi pop-up, validasi form instan).

4. PHP (Hypertext Preprocessor)

• Peran: Bahasa pemrograman server-side untuk mengolah data dinamis dan menghubungkan web dengan database.
• Analogi: Sistem organ dalam tubuh (pencernaan, peredaran darah) yang bekerja di balik layar.
• Fungsi: Memproses data login pengguna, menyimpan postingan baru ke database, mengamankan data sebelum dikirim kembali ke browser.

Pertemuan 2: HTML (Struktur HTML, Tag Dasar, & Form)

Daftar Isi

• 1. Pengenalan HTML
• 2. Struktur Dasar Dokumen HTML
• 3. Tag Dasar HTML
• 4. Formulir (HTML Forms)

1. Pengenalan HTML

HTML (Hypertext Markup Language) adalah bahasa markah standar yang digunakan untuk membuat struktur halaman web. HTML menentukan bagaimana konten (seperti teks, gambar, dan formulir) disusun di peramban web.

2. Struktur Dasar Dokumen HTML

Setiap dokumen HTML memiliki struktur dasar sebagai berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=initial-scale=1.0">
    <title>Judul Halaman Anda</title>
</head>
<body>
    <h1>Selamat Datang di Halaman HTML Saya</h1>
    <p>Ini adalah sebuah paragraf teks.</p>
</body>
</html>

3. Tag Dasar HTML

Beberpa tag penting yang sering digunakan meliputi:

• Heading (<h1> - <h6>): Menentukan judul penting hingga sub-judul.
• Paragraph (<p>): Menampung teks paragraf biasa.
• Hyperlink (<a>): Membuat tautan ke halaman lain menggunakan atribut href.
• Image (<img>): Menampilkan gambar menggunakan atribut src dan alt.
• Lists (<ul>, <ol>, <li>): Membuat daftar tidak berurut (bullet) atau berurut (nomor).

4. Formulir (HTML Forms)

Formulir digunakan untuk menerima masukan (input) dari pengguna. Elemen penting form meliputi:

• <form>: Pembungkus formulir.
• <input>: Tempat pengguna mengetik teks, email, password, dsb.
• <label>: Keterangan dari input.
• <textarea>: Input teks multibaris.
• <select> dan <option>: Pilihan drop-down.
• <button> atau <input type="submit">: Tombol kirim data.

Contoh Form Sederhana:

<form action="proses.php" method="POST">
    <label for="nama">Nama Lengkap:</label>
    <input type="text" id="nama" name="nama" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <button type="submit">Kirim Data</button>
</form>

Pertemuan 3: CSS (Selector, Layouting, & Responsive Design)

Daftar Isi

• 1. Pengenalan CSS
• 2. Selector & Box Model
• 3. Layouting (Flexbox & Grid)
• 4. Responsive Design & Media Queries

1. Pengenalan CSS

CSS (Cascading Style Sheets) digunakan untuk mengatur desain, tata letak, warna, font, dan estetika keseluruhan halaman web yang dibuat menggunakan HTML.

2. Selector & Box Model

CSS Selector:

Selector menentukan elemen HTML mana yang akan diberi gaya:

• Element Selector: p { color: blue; }
• Class Selector: .container { padding: 20px; }
• ID Selector: #main-header { background: grey; }

CSS Box Model:

Semua elemen HTML dibayangkan sebagai sebuah kotak (box) yang memiliki:

• Content: Konten teks atau gambar itu sendiri.
• Padding: Ruang kosong di antara konten dan batas (border).
• Border: Garis pembatas luar.
• Margin: Ruang kosong di luar batas pembatas untuk memisahkannya dari kotak lain.

3. Layouting (Flexbox & Grid)

CSS Flexbox:

Mempermudah penataan tata letak satu dimensi (baris atau kolom) secara dinamis.

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

CSS Grid:

Sangat berguna untuk tata letak dua dimensi (baris dan kolom secara bersamaan).

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

4. Responsive Design & Media Queries

Halaman web harus terlihat menarik di berbagai perangkat (HP, Tablet, Desktop). Media queries digunakan untuk menyesuaikan gaya CSS berdasarkan lebar layar.

/* Gaya dasar untuk Mobile (Mobile First) */
body {
    font-size: 14px;
}

/* Gaya untuk Desktop (Lebar layar minimal 768px) */
@media (min-width: 768px) {
    body {
        font-size: 16px;
    }
}