Cara Kerja Web & Server
Sebelum nulis kode, kamu perlu paham dulu gimana internet bekerja. Ini fondasi yang bikin kamu ngerti "kenapa" kode ditulis kayak gitu.
🌐 Apa Itu Internet?
Internet itu sederhananya adalah jaringan komputer yang saling terhubung di seluruh dunia. Ketika kamu buka website, komputer kamu (disebut client) mengirim permintaan ke komputer lain (disebut server) yang menyimpan data website tersebut.
📡 Apa yang Terjadi Saat Kamu Buka Website?
Misalnya kamu ketik www.google.com di browser. Ini yang terjadi di balik layar:
mengetik URL
cari alamat IP
proses request
kembali ke browser
- DNS Lookup — Browser bertanya ke DNS Server: "Alamat IP dari google.com apa?" DNS Server menjawab: "142.250.80.46"
- HTTP Request — Browser mengirim permintaan (request) ke alamat IP tersebut: "Halo server, tolong kirimkan halaman utama"
- Server Memproses — Server menerima request, memproses (ambil data dari database kalau perlu), lalu menyiapkan halaman
- HTTP Response — Server mengirim balik file HTML, CSS, dan JavaScript ke browser kamu
- Browser Render — Browser membaca file-file tersebut dan menampilkannya jadi halaman yang kamu lihat
🏗️ Client vs Server
Client (Frontend) — Ini sisi yang dilihat oleh pengguna. Kode yang berjalan di browser pengguna. Terdiri dari HTML, CSS, dan JavaScript.
Server (Backend) — Ini sisi yang bekerja di belakang layar. Server menerima request, memproses logika bisnis, berkomunikasi dengan database, dan mengirim respons. Contoh bahasa: PHP, Python, Node.js.
HTML (struktur)
CSS (tampilan)
JavaScript (interaksi)
PHP (logika)
MySQL (database)
Apache/Nginx (server)
📦 HTTP Request & Response
Komunikasi antara client dan server menggunakan protokol HTTP (HyperText Transfer Protocol). Setiap interaksi punya dua bagian:
Request (Permintaan dari Client)
GET /halaman-utama HTTP/1.1
Host: www.contoh.com
Accept: text/htmlHTTPAda beberapa jenis request yang umum:
GET— Minta data (buka halaman, lihat produk)POST— Kirim data (submit form, login)PUT— Update data yang sudah adaDELETE— Hapus data
Response (Jawaban dari Server)
HTTP/1.1 200 OK
Content-Type: text/html
<html>
<body>Halo dunia!</body>
</html>HTTPKode status yang sering kamu temui:
200— OK, berhasil404— Halaman tidak ditemukan500— Server error (ada masalah di kode backend)403— Forbidden (kamu gak punya akses)301— Redirect (halaman pindah alamat)
Bayangkan restoran: kamu (client) pesan makanan ke pelayan (HTTP), pelayan sampaikan ke dapur (server), dapur ambil bahan dari kulkas (database), masak, lalu pelayan bawa makanan kembali ke kamu (response).
🛠️ Tools yang Dipakai
Untuk mulai ngoding, kamu cuma butuh:
- Text Editor — Visual Studio Code (gratis, paling populer). Download di
code.visualstudio.com - Browser — Chrome atau Firefox (sudah ada fitur Developer Tools)
- XAMPP — Untuk menjalankan PHP dan MySQL di komputer sendiri (untuk nanti). Download di
apachefriends.org
🧠 Mini Quiz — Cara Kerja Web
1. Apa fungsi DNS?
2. HTTP status code 404 artinya apa?
3. Mana yang berjalan di sisi server (backend)?
HTML — Struktur Halaman Web
HTML (HyperText Markup Language) adalah kerangka/tulang dari sebuah halaman web. Semua yang kamu lihat di website dimulai dari HTML.
📝 Apa Itu HTML?
HTML bukan bahasa pemrograman — HTML adalah bahasa markup. Artinya, HTML digunakan untuk menandai (mark up) konten supaya browser tahu cara menampilkannya. Setiap elemen HTML dibungkus dengan tag.
<!-- Ini komentar, browser mengabaikan ini -->
<h1>Ini Judul</h1>
<p>Ini paragraf biasa</p>HTMLPerhatikan polanya: ada tag pembuka (<h1>), konten (teks), dan tag penutup (</h1>). Garis miring (/) menandakan penutup.
🏗️ Struktur Dasar HTML
Setiap halaman HTML punya struktur yang sama. Ini adalah template minimal yang selalu kamu pakai:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Tab Browser</title>
</head>
<body>
<!-- Semua konten yang terlihat ditulis di sini -->
<h1>Halo Dunia!</h1>
<p>Website pertamaku.</p>
</body>
</html>HTMLPenjelasan baris per baris:
<!DOCTYPE html>— Memberi tahu browser bahwa ini dokumen HTML5<html>— Elemen root, membungkus semua<head>— Berisi informasi tentang halaman (tidak terlihat di layar)<title>— Judul yang muncul di tab browser<body>— Semua yang terlihat di halaman ditulis di sini
📋 Tag-Tag HTML yang Paling Sering Dipakai
Heading (Judul)
HTML punya 6 level heading, dari <h1> (paling besar) sampai <h6> (paling kecil):
<h1>Heading 1 — Judul Utama</h1>
<h2>Heading 2 — Sub Judul</h2>
<h3>Heading 3 — Sub-Sub Judul</h3>HTMLParagraf dan Teks
<p>Ini paragraf biasa.</p>
<strong>Teks tebal</strong>
<em>Teks miring</em>
<br> <!-- Baris baru (tidak perlu tag penutup) -->
<hr> <!-- Garis horizontal pemisah -->HTMLLink
<a href="https://google.com">Klik ke Google</a>
<!-- Buka di tab baru -->
<a href="https://google.com" target="_blank">Buka tab baru</a>HTMLGambar
<img src="foto.jpg" alt="Deskripsi gambar" width="300">HTMLAtribut alt penting untuk aksesibilitas — menjelaskan gambar untuk yang tidak bisa melihatnya.
List (Daftar)
<!-- Unordered list (bullet) -->
<ul>
<li>Item pertama</li>
<li>Item kedua</li>
</ul>
<!-- Ordered list (nomor) -->
<ol>
<li>Langkah satu</li>
<li>Langkah dua</li>
</ol>HTMLDiv dan Span
<div> dan <span> adalah "wadah" yang sering dipakai untuk mengelompokkan elemen:
<!-- div = wadah blok (mengambil seluruh lebar) -->
<div>
<h2>Judul Bagian</h2>
<p>Konten di dalam div.</p>
</div>
<!-- span = wadah inline (sebaris dengan teks) -->
<p>Harga: <span style="color:red">Rp 50.000</span></p>HTML📝 Form (Input dari User)
Form adalah cara user mengirim data ke server. Ini sangat penting untuk login, registrasi, pencarian, dll:
<form action="/login" method="POST">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="[email protected]" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Login</button>
</form>HTMLAtribut penting pada form:
action— URL tujuan saat form dikirimmethod— GET (data muncul di URL) atau POST (data tersembunyi)required— Input wajib diisiplaceholder— Teks petunjuk di dalam input
Jenis-jenis Input
<input type="text"> <!-- Teks biasa -->
<input type="email"> <!-- Email (ada validasi) -->
<input type="password"> <!-- Password (tersembunyi) -->
<input type="number"> <!-- Angka -->
<input type="checkbox"> <!-- Centang -->
<input type="radio"> <!-- Pilihan (satu dari banyak) -->
<textarea></textarea> <!-- Teks panjang -->
<select> <!-- Dropdown -->
<option>Pilihan 1</option>
<option>Pilihan 2</option>
</select>HTML🗂️ Semantic HTML
HTML5 punya tag-tag semantik yang lebih bermakna daripada <div>:
<header> <!-- Bagian atas halaman -->
<nav> <!-- Navigasi/menu -->
<main> <!-- Konten utama -->
<section> <!-- Bagian konten -->
<article> <!-- Konten mandiri (blog post, berita) -->
<aside> <!-- Sidebar -->
<footer> <!-- Bagian bawah halaman -->HTMLBuat file baru bernama index.html, copy template dasar di atas, lalu buka di browser. Coba-coba ganti teks dan tambahin tag. Cara paling efektif belajar HTML adalah langsung eksperimen!
🧠 Mini Quiz — HTML
1. Tag mana yang dipakai untuk membuat link?
<a href="url">teks</a> digunakan untuk membuat hyperlink. Tag <link> dipakai untuk hal lain (menghubungkan file CSS).<a> (anchor). Contoh: <a href="url">klik</a>2. Dimana konten yang terlihat di halaman ditulis?
<body>. Tag <head> berisi metadata (info tentang halaman).<body>. <head> hanya untuk metadata dan <title> untuk judul tab browser.3. Apa perbedaan method GET dan POST pada form?
CSS — Mempercantik Tampilan
CSS (Cascading Style Sheets) mengatur tampilan visual halaman web. Kalau HTML itu tulang, CSS itu kulit dan baju.
🎨 Cara Menambahkan CSS
Ada 3 cara memasukkan CSS ke HTML:
1. Inline (langsung di tag)
<p style="color: red; font-size: 20px;">Teks merah</p>HTML2. Internal (di dalam <style> di head)
<head>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>HTML3. External (file terpisah — cara terbaik!)
<!-- di HTML -->
<link rel="stylesheet" href="style.css">
/* di file style.css */
p {
color: red;
font-size: 20px;
}CSS🎯 Selector — Menargetkan Elemen
Selector menentukan elemen mana yang mau di-style:
/* Selector tag — semua <p> */
p { color: blue; }
/* Selector class — elemen dengan class="judul" */
.judul { font-size: 24px; }
/* Selector ID — elemen dengan id="header" */
#header { background: #333; }
/* Gabungan */
div.container p { color: gray; }CSSCara pakainya di HTML:
<h1 class="judul">Pakai class</h1>
<div id="header">Pakai ID</div>HTMLClass (.nama) bisa dipakai berkali-kali di banyak elemen. ID (#nama) hanya boleh dipakai satu kali per halaman. Dalam praktik sehari-hari, lebih sering pakai class.
📐 Box Model
Ini konsep paling penting di CSS. Setiap elemen HTML itu ibarat sebuah "kotak" yang terdiri dari 4 lapisan:
isi konten
.kotak {
width: 200px; /* lebar konten */
padding: 20px; /* jarak dalam (konten ke border) */
border: 2px solid #333; /* garis tepi */
margin: 10px; /* jarak luar (antar elemen) */
box-sizing: border-box; /* width termasuk padding+border */
}CSS🧩 Flexbox — Layout Modern
Flexbox adalah cara paling mudah untuk mengatur layout (posisi elemen). Ini menggantikan cara lama yang pakai float.
.container {
display: flex; /* aktifkan flexbox */
justify-content: center; /* posisi horizontal */
align-items: center; /* posisi vertical */
gap: 16px; /* jarak antar item */
}
/* justify-content options: */
/* flex-start | center | flex-end | space-between | space-around */CSS📱 Responsive Design
Supaya website tampil bagus di semua ukuran layar (HP, tablet, desktop), pakai media query:
/* Default: untuk semua layar */
.container {
width: 800px;
padding: 20px;
}
/* Kalau layar lebih kecil dari 768px (tablet/HP) */
@media (max-width: 768px) {
.container {
width: 100%;
padding: 10px;
}
}CSS🎨 Property CSS yang Paling Sering Dipakai
/* Teks */
color: #333; /* warna teks */
font-size: 16px; /* ukuran font */
font-weight: bold; /* ketebalan (normal, bold, 100-900) */
text-align: center; /* rata teks */
line-height: 1.6; /* jarak antar baris */
/* Background */
background-color: #f0f0f0; /* warna latar */
background-image: url('bg.jpg');
/* Dimensi */
width: 100%; /* lebar */
max-width: 800px; /* lebar maksimum */
height: auto; /* tinggi */
/* Dekorasi */
border-radius: 8px; /* sudut melengkung */
box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* bayangan */
opacity: 0.8; /* transparansi (0-1) */
transition: all 0.3s ease; /* animasi halus */CSS🧠 Mini Quiz — CSS
1. Apa perbedaan padding dan margin?
2. Selector mana yang menargetkan elemen dengan class "aktif"?
.aktif. ID menggunakan pagar: #aktif. Tanpa tanda = selector tag.3. Properti apa yang dipakai untuk mengaktifkan flexbox?
display: flex mengaktifkan flexbox pada elemen container.display: flex pada elemen container.JavaScript — Menambahkan Interaksi
JavaScript membuat halaman web menjadi hidup. Tanpa JS, halaman web itu statis — seperti poster. Dengan JS, halaman bisa merespons klik, menampilkan animasi, validasi form, dan banyak lagi.
⚡ Variabel
Variabel adalah "wadah" untuk menyimpan data. Bayangkan seperti kotak berlabel yang isinya bisa diganti:
// Ada 3 cara membuat variabel:
let nama = "Budi"; // bisa diubah nanti
const umur = 25; // tidak bisa diubah (konstan)
var kota = "Jakarta"; // cara lama, hindari pakai ini
// Mengubah nilai
nama = "Andi"; // OK, karena pakai let
// umur = 30; // ERROR! const tidak bisa diubahJavaScriptPakai const secara default. Ganti ke let hanya kalau kamu memang perlu mengubah nilainya nanti. Jangan pakai var.
📦 Tipe Data
// String (teks)
const pesan = "Halo dunia";
// Number (angka)
const harga = 50000;
const diskon = 0.2;
// Boolean (benar/salah)
const sudahLogin = true;
const isAdmin = false;
// Array (kumpulan data)
const buah = ["Apel", "Jeruk", "Mangga"];
// Object (data terstruktur)
const user = {
nama: "Budi",
umur: 25,
kota: "Jakarta"
};
// Akses data
console.log(buah[0]); // "Apel" (index mulai dari 0)
console.log(user.nama); // "Budi"JavaScript🔀 Kondisi (if/else)
Membuat keputusan berdasarkan kondisi tertentu:
const nilai = 75;
if (nilai >= 80) {
console.log("Lulus dengan baik!");
} else if (nilai >= 60) {
console.log("Lulus");
} else {
console.log("Tidak lulus");
}
// Output: "Lulus"
// Operator perbandingan:
// === sama dengan (gunakan ini, BUKAN ==)
// !== tidak sama dengan
// > lebih besar
// < lebih kecil
// >= lebih besar atau sama
// <= lebih kecil atau sama
// && DAN (semua kondisi harus benar)
// || ATAU (salah satu benar cukup)JavaScript🔁 Loop (Perulangan)
Menjalankan kode berulang kali tanpa harus menulis ulang:
// For loop — kalau tahu berapa kali mau diulang
for (let i = 1; i <= 5; i++) {
console.log("Perulangan ke-" + i);
}
// Output: Perulangan ke-1, ke-2, ... ke-5
// Loop array
const buah = ["Apel", "Jeruk", "Mangga"];
for (const item of buah) {
console.log(item);
}
// Output: Apel, Jeruk, Mangga
// forEach — cara modern
buah.forEach(function(item, index) {
console.log(index + ": " + item);
});JavaScript🛠️ Fungsi
Fungsi adalah blok kode yang bisa dipakai ulang. Seperti resep masakan — tulis sekali, pakai berkali-kali:
// Membuat fungsi
function hitungDiskon(harga, persen) {
const diskon = harga * persen / 100;
return harga - diskon;
}
// Memanggil fungsi
const total = hitungDiskon(100000, 20);
console.log(total); // 80000
// Arrow function (cara singkat)
const sapa = (nama) => {
return "Halo, " + nama + "!";
};
console.log(sapa("Budi")); // "Halo, Budi!"JavaScript🖱️ DOM Manipulation
Ini yang bikin JavaScript powerful di browser — bisa mengubah halaman secara langsung tanpa reload:
// Ambil elemen dari HTML
const judul = document.getElementById("judul");
const tombol = document.querySelector(".btn");
const items = document.querySelectorAll(".item");
// Ubah konten
judul.textContent = "Judul Baru";
judul.innerHTML = "<em>Judul Miring</em>";
// Ubah style
judul.style.color = "red";
judul.style.fontSize = "32px";
// Tambah/hapus class
judul.classList.add("aktif");
judul.classList.remove("aktif");
judul.classList.toggle("aktif"); // tambah kalau belum ada, hapus kalau sudahJavaScript👆 Event (Merespons Aksi User)
// Klik tombol
const tombol = document.querySelector("#btn-sapa");
tombol.addEventListener("click", function() {
alert("Tombol diklik!");
});
// Contoh lengkap: form validation
const form = document.querySelector("#form-login");
form.addEventListener("submit", function(e) {
e.preventDefault(); // cegah form dikirim
const email = document.querySelector("#email").value;
if (email === "") {
alert("Email wajib diisi!");
} else {
alert("Login berhasil!");
}
});JavaScriptKalau bingung kenapa kode gak jalan, taruh console.log() di mana-mana untuk melihat nilai variabel. Buka DevTools browser (F12 → tab Console) untuk melihat hasilnya.
🧠 Mini Quiz — JavaScript
1. Apa perbedaan let dan const?
let membolehkan reassignment (ganti nilai), const tidak. Pakai const secara default, let hanya kalau perlu mengubah.let bisa diubah nilainya setelah dibuat, const tidak bisa (konstan). Secara performa sama saja.2. Apa output dari: console.log(["A", "B", "C"][1])?
3. Apa fungsi dari addEventListener?
PHP — Logika di Sisi Server
PHP adalah bahasa yang berjalan di server. Ini yang memproses form login, ambil data dari database, dan mengirimkan halaman HTML ke browser. PHP itu "di balik layar".
🐘 Dasar-Dasar PHP
Kode PHP selalu dimulai dengan <?php dan diakhiri dengan ?>. PHP diproses di server — browser TIDAK pernah melihat kode PHP, hanya hasilnya.
<?php
// Ini komentar satu baris
/* Ini komentar
banyak baris */
// Menampilkan output
echo "Halo Dunia!";
echo "<h1>Ini jadi HTML</h1>";
?>PHP📦 Variabel dan Tipe Data
Di PHP, semua variabel dimulai dengan tanda dolar ($):
<?php
// String
$nama = "Budi";
// Number
$umur = 25;
$tinggi = 1.75;
// Boolean
$aktif = true;
// Array
$buah = ["Apel", "Jeruk", "Mangga"];
// Associative Array (seperti Object di JS)
$user = [
"nama" => "Budi",
"umur" => 25,
"kota" => "Jakarta"
];
// Akses data
echo $buah[0]; // "Apel"
echo $user["nama"]; // "Budi"
// Gabung string
echo "Halo, " . $nama . "!"; // pakai titik (.)
echo "Halo, $nama!"; // atau langsung di dalam ""
?>PHP🔀 Kondisi dan Loop
<?php
// If/else — sama seperti JavaScript
$nilai = 75;
if ($nilai >= 80) {
echo "Sangat baik";
} elseif ($nilai >= 60) {
echo "Lulus";
} else {
echo "Tidak lulus";
}
// For loop
for ($i = 1; $i <= 5; $i++) {
echo "Nomor: $i<br>";
}
// Foreach — paling sering dipakai untuk array
$buah = ["Apel", "Jeruk", "Mangga"];
foreach ($buah as $item) {
echo "<li>$item</li>";
}
?>PHP🛠️ Fungsi
<?php
function hitungDiskon($harga, $persen) {
$diskon = $harga * $persen / 100;
return $harga - $diskon;
}
$total = hitungDiskon(100000, 20);
echo "Total: Rp " . number_format($total);
// Output: Total: Rp 80,000
?>PHP📬 Menerima Data dari Form
Ini salah satu kegunaan utama PHP — memproses data yang dikirim user lewat form HTML:
<!-- form.html -->
<form action="proses.php" method="POST">
<input type="text" name="nama" placeholder="Nama kamu">
<input type="email" name="email" placeholder="Email">
<button type="submit">Kirim</button>
</form>HTML// proses.php
<?php
// Ambil data dari form
$nama = $_POST["nama"];
$email = $_POST["email"];
// PENTING: selalu validasi dan bersihkan input!
$nama = htmlspecialchars($nama);
$email = filter_var($email, FILTER_SANITIZE_EMAIL);
if (empty($nama) || empty($email)) {
echo "Semua field wajib diisi!";
} else {
echo "Selamat datang, $nama!";
}
?>PHPSelalu gunakan htmlspecialchars() untuk mencegah serangan XSS, dan filter_var() untuk memvalidasi data. Ini kebiasaan wajib sejak awal belajar.
🔗 PHP + HTML = Halaman Dinamis
Kekuatan PHP adalah bisa menghasilkan HTML yang berbeda-beda tergantung kondisi:
<?php
$produk = [
["nama" => "Laptop", "harga" => 15000000],
["nama" => "Mouse", "harga" => 250000],
["nama" => "Keyboard", "harga" => 500000],
];
?>
<h1>Daftar Produk</h1>
<ul>
<?php foreach ($produk as $item): ?>
<li>
<?= $item["nama"] ?> —
Rp <?= number_format($item["harga"]) ?>
</li>
<?php endforeach; ?>
</ul>PHPPHP tidak bisa dibuka langsung di browser seperti HTML. Kamu butuh web server. Install XAMPP, simpan file PHP di folder htdocs, lalu buka lewat localhost/namafile.php.
🧠 Mini Quiz — PHP
1. PHP dijalankan dimana?
2. Bagaimana cara mengambil data form dengan method POST?
$_POST["nama"] mengambil data dari form yang dikirim dengan method POST. Key-nya sesuai atribut name di input.$_POST["field_name"]. Untuk GET, gunakan $_GET["field_name"].3. Kenapa kita pakai htmlspecialchars() pada input user?
Database & SQL
Database adalah tempat menyimpan data secara terstruktur. Bayangkan spreadsheet Excel tapi lebih powerful dan bisa diakses oleh kode program.
🗄️ Apa Itu Database?
Ketika kamu login ke website, data username dan password-mu tersimpan di database. Ketika kamu posting di media sosial, postingan itu disimpan di database. Hampir semua website yang menangani data menggunakan database.
Database yang paling umum untuk pemula: MySQL (gratis, sudah termasuk di XAMPP).
📊 Struktur Database
Database terorganisir dalam hierarki:
"toko_online"
"users", "produk", "pesanan"
data aktual
Contoh tabel users:
📝 SQL — Bahasa untuk Berbicara dengan Database
SQL (Structured Query Language) adalah bahasa yang dipakai untuk mengambil, menyimpan, mengubah, dan menghapus data. Cuma 4 perintah utama yang perlu kamu hafal:
SELECT — Mengambil Data
-- Ambil semua data dari tabel users
SELECT * FROM users;
-- Ambil kolom tertentu
SELECT nama, email FROM users;
-- Dengan kondisi
SELECT * FROM users WHERE umur > 24;
-- Urutkan
SELECT * FROM users ORDER BY nama ASC;
-- Batasi jumlah hasil
SELECT * FROM users LIMIT 10;
-- Cari berdasarkan pola
SELECT * FROM users WHERE nama LIKE '%Bud%';
-- Hitung jumlah
SELECT COUNT(*) FROM users;SQLINSERT — Menambah Data
INSERT INTO users (nama, email, umur)
VALUES ('Dani', '[email protected]', 30);SQLUPDATE — Mengubah Data
UPDATE users
SET umur = 26, kota = 'Bandung'
WHERE id = 1;
-- PENTING: SELALU pakai WHERE!
-- Tanpa WHERE, SEMUA baris akan berubah!SQLDELETE — Menghapus Data
DELETE FROM users WHERE id = 3;
-- PENTING: SELALU pakai WHERE!
-- Tanpa WHERE, SEMUA data terhapus!SQLSelalu gunakan WHERE pada UPDATE dan DELETE. Perintah DELETE FROM users tanpa WHERE akan menghapus SEMUA data di tabel. Tidak ada undo!
🔗 Membuat Tabel
CREATE TABLE produk (
id INT AUTO_INCREMENT PRIMARY KEY,
nama VARCHAR(100) NOT NULL,
harga INT NOT NULL,
stok INT DEFAULT 0,
dibuat_pada TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);SQLTipe data yang sering dipakai:
INT— Bilangan bulatVARCHAR(100)— Teks (maks 100 karakter)TEXT— Teks panjangDECIMAL(10,2)— Desimal (untuk uang)TIMESTAMP— Tanggal dan waktuBOOLEAN— True/false
🐘 PHP + MySQL
Ini cara menghubungkan PHP dengan database MySQL menggunakan PDO (cara yang aman dan modern):
<?php
// 1. Koneksi ke database
try {
$db = new PDO(
"mysql:host=localhost;dbname=toko_online",
"root", // username
"" // password (kosong di XAMPP)
);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
die("Koneksi gagal: " . $e->getMessage());
}
// 2. Ambil data (SELECT)
$stmt = $db->query("SELECT * FROM produk");
$produk = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($produk as $item) {
echo $item["nama"] . " — Rp " . $item["harga"] . "<br>";
}
// 3. Simpan data (INSERT) — GUNAKAN PREPARED STATEMENT!
$stmt = $db->prepare("INSERT INTO produk (nama, harga) VALUES (:nama, :harga)");
$stmt->execute([
":nama" => "Headset Gaming",
":harga" => 350000
]);
echo "Produk berhasil ditambahkan!";
?>PHPSELALU gunakan prepared statement (placeholder :nama) saat menyimpan data dari user. Jangan pernah langsung masukkan input user ke query SQL — ini mencegah serangan SQL Injection.
🧠 Mini Quiz — Database & SQL
1. Perintah SQL untuk mengambil data adalah?
SELECT * FROM tabel untuk mengambil semua data, atau SELECT kolom FROM tabel WHERE kondisi untuk data spesifik.SELECT. GET adalah method HTTP, bukan perintah SQL.2. Kenapa UPDATE tanpa WHERE itu berbahaya?
UPDATE users SET umur = 0 akan membuat umur semua user jadi 0.3. Apa itu prepared statement dan kenapa penting?
Web Server & Hosting
Kamu sudah bisa bikin website, tapi masih jalan di komputer sendiri (localhost). Sekarang saatnya paham gimana website bisa diakses orang lain lewat internet.
🖧 Apa Itu Web Server?
Web server adalah software yang berjalan di sebuah komputer (server) dan bertugas menerima request dari browser, lalu mengirimkan file yang diminta (HTML, CSS, JS, gambar, dll).
Analogi: web server itu seperti resepsionis hotel. Tamu (browser) datang dan minta kamar 301 (halaman web), resepsionis (web server) mencarikan dan memberikan kuncinya (file HTML).
🔧 Web Server yang Populer
Apache
Web server paling tua dan paling banyak dipakai. Kalau kamu install XAMPP, kamu sudah pakai Apache. Cocok untuk PHP.
# Struktur file di Apache (XAMPP)
C:\xampp\
├── htdocs\ # taruh file website di sini
│ ├── index.html # halaman utama
│ ├── style.css
│ └── proses.php
├── mysql\ # database MySQL
└── apache\ # konfigurasi Apache
# Akses lewat browser:
# http://localhost/index.html
# http://localhost/proses.phpStrukturNginx (dibaca: "engine-x")
Lebih modern, lebih cepat untuk menangani banyak koneksi sekaligus. Banyak dipakai di website besar. Sering dipakai di server Linux.
Localhost vs Server Asli
Komputer kamu sendiri
Cuma kamu yang bisa akses
Untuk development
Komputer di data center
Semua orang bisa akses
Untuk production
📡 Cara Website Bisa Online
Supaya website bisa diakses orang lain, kamu butuh 3 hal:
1. Domain
Domain adalah alamat website yang mudah diingat, seperti tokoku.com. Kamu beli domain dari registrar (Niagahoster, Namecheap, Cloudflare, dll). Harga mulai dari Rp 100.000-an per tahun.
# Contoh domain:
tokoku.com # .com (paling umum)
tokoku.co.id # .co.id (khusus Indonesia)
tokoku.id # .id (Indonesia)
blog.tokoku.com # subdomain (gratis, bagian dari domain utama)Domain2. Hosting
Hosting adalah "tempat menyewa komputer (server)" untuk menyimpan file website kamu. Ada beberapa jenis:
- Shared Hosting — Paling murah (Rp 20-50rb/bulan). Satu server dipakai banyak website. Cocok untuk website kecil dan belajar. Contoh: Niagahoster, Hostinger, Domainesia.
- VPS (Virtual Private Server) — Lebih powerful. Kamu dapat server virtual sendiri, bisa dikonfigurasi bebas. Harga mulai Rp 50-200rb/bulan. Contoh: DigitalOcean, Vultr, IDCloudHost.
- Cloud Hosting — Paling scalable. Bayar sesuai pemakaian. Contoh: AWS, Google Cloud, Azure.
Mulai dari shared hosting aja dulu. Murah, mudah, dan sudah cukup untuk website PHP + MySQL. Nanti kalau website sudah besar, baru upgrade ke VPS atau cloud.
3. Upload File ke Server
Setelah punya domain dan hosting, kamu perlu upload file website ke server. Caranya:
# Cara 1: File Manager (di cPanel hosting)
# Login ke cPanel → File Manager → upload ke folder public_html
# Cara 2: FTP (File Transfer Protocol)
# Pakai software FileZilla (gratis)
# Masukkan host, username, password dari hosting
# Drag & drop file ke folder public_html
# Cara 3: Git (cara profesional)
# Push kode ke GitHub, lalu server otomatis deploy
# Ini cara yang paling rapi dan banyak dipakai developerUpload⚙️ Konfigurasi Server Dasar
File .htaccess (Apache)
File konfigurasi Apache yang ditaruh di folder website. Berguna untuk redirect, keamanan, dan URL rewriting:
# Redirect HTTP ke HTTPS (wajib untuk keamanan)
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
# Custom error page
ErrorDocument 404 /404.html
# Blokir akses ke file sensitif
<Files ".env">
Order allow,deny
Deny from all
</Files>.htaccessFile php.ini
Konfigurasi PHP di server. Hal-hal yang sering perlu diubah:
; Batas ukuran upload file
upload_max_filesize = 10M
post_max_size = 12M
; Tampilkan error (ON saat development, OFF saat production!)
display_errors = On
error_reporting = E_ALL
; Timezone
date.timezone = Asia/Jakartaphp.ini🔒 SSL / HTTPS
SSL (Secure Sockets Layer) mengenkripsi data antara browser dan server. Website dengan SSL ditandai dengan gembok di address bar dan URL dimulai dengan https://.
Kenapa wajib pakai SSL:
- Data user (password, kartu kredit) terenkripsi dan tidak bisa diintip
- Google memberikan ranking lebih tinggi ke website HTTPS
- Browser modern menampilkan peringatan "Not Secure" untuk website tanpa SSL
Hampir semua hosting sekarang menyediakan SSL gratis lewat Let's Encrypt. Tinggal aktifkan di panel hosting, tidak perlu bayar.
📂 Struktur Folder Production
Ini contoh struktur folder website yang sudah rapi di server:
# Di server hosting (folder public_html atau www)
public_html/
├── index.php # halaman utama
├── .htaccess # konfigurasi Apache
├── assets/
│ ├── css/
│ │ └── style.css
│ ├── js/
│ │ └── app.js
│ └── images/
│ └── logo.png
├── pages/
│ ├── about.php
│ ├── contact.php
│ └── produk.php
├── includes/
│ ├── config.php # koneksi database
│ ├── header.php # header yang dipakai ulang
│ └── footer.php # footer yang dipakai ulang
└── uploads/ # file yang diupload userStruktur🚀 Proses Deploy (Dari Lokal ke Server)
Alur lengkap supaya website yang kamu buat di komputer bisa diakses semua orang:
di localhost
cek di browser
ke hosting
tokoku.com
Langkah detailnya:
- Buat website di komputer pakai XAMPP (localhost)
- Test sampai semua berfungsi dengan baik
- Beli domain + hosting
- Buat database di hosting (lewat phpMyAdmin di cPanel)
- Upload file ke hosting (FTP atau File Manager)
- Update config database — ganti host, username, password sesuai hosting
- Aktifkan SSL supaya website pakai HTTPS
- Test lagi di domain asli
Saat pindah dari localhost ke hosting, jangan lupa ganti konfigurasi database di file config.php. Host, username, password, dan nama database di hosting pasti beda dengan di XAMPP.
🛡️ Keamanan Server Dasar
Beberapa hal penting yang harus diperhatikan saat website sudah online:
<?php
// 1. Jangan tampilkan error di production
ini_set('display_errors', 0);
error_reporting(0);
// 2. Simpan config di luar public_html kalau bisa
// Atau minimal, blokir akses lewat .htaccess
// 3. Jangan pakai password default
// Ganti password MySQL, cPanel, FTP
// 4. Selalu backup database secara berkala
// 5. Update PHP dan software server secara rutin
?>PHP🧠 Mini Quiz — Web Server & Hosting
1. Apa fungsi web server?
2. Untuk pemula, jenis hosting mana yang paling cocok?
3. Kenapa website wajib pakai HTTPS (SSL)?
4. Apa yang harus diganti saat pindah dari localhost ke hosting?
Tips & Langkah Selanjutnya
Selamat, kamu sudah mempelajari fundamental web development! Sekarang, bagaimana cara melanjutkan perjalanan ini.
🐛 Cara Membaca Error
Error adalah bagian normal dari programming. Yang penting bukan menghindari error, tapi tahu cara membaca dan memperbaikinya.
Error di Browser (JavaScript)
// Buka DevTools: tekan F12, pilih tab Console
// Contoh error:
Uncaught ReferenceError: namaVariabel is not defined
at script.js:15:3
// Artinya:
// - Tipe error: ReferenceError (variabel tidak ditemukan)
// - Lokasi: file script.js, baris 15, kolom 3
// - Solusi: cek apakah variabel sudah dibuat, atau salah ketikConsoleError di PHP
Fatal error: Uncaught Error: Call to undefined function hitung()
in /var/www/html/index.php on line 23
// Artinya:
// - Tipe: Fatal error (program berhenti)
// - Masalah: fungsi hitung() tidak ditemukan
// - Lokasi: file index.php, baris 23
// - Solusi: pastikan fungsi sudah dibuat, atau cek ejaanPHP ErrorError di SQL
ERROR 1054 (42S22): Unknown column 'nma' in 'field list'
// Artinya: kolom 'nma' tidak ada di tabel
// Solusi: mungkin salah ketik, harusnya 'nama'SQL ErrorSelalu baca dari baris pertama pesan error. Biasanya ada tipe error + lokasi (file dan baris). Kalau bingung, copy paste pesan error ke Google atau tanya ke AI — ini cara belajar yang sah dan efektif!
🗺️ Roadmap Belajar Selanjutnya
Setelah menguasai fundamental di atas, ini langkah selanjutnya:
Buat website sederhana: profil pribadi, todo list, kalkulator. Jangan belajar teori terus — praktik adalah guru terbaik.
Git digunakan untuk menyimpan versi kode. GitHub adalah tempat menyimpannya online. Semua programmer profesional pakai ini.
Setelah paham fundamentalnya, belajar framework: Laravel atau CodeIgniter (PHP), React atau Vue (JavaScript). Framework membuat development lebih cepat.
AI (seperti Claude atau ChatGPT) bisa bantu nulis kode, debugging, dan menjelaskan konsep. Tapi kamu tetap harus paham fundamentalnya supaya bisa mengarahkan AI dengan benar dan mengevaluasi hasilnya.
💪 Prinsip yang Perlu Dipegang
"Semua programmer pernah bingung dan error." Perbedaan programmer senior dan pemula bukan soal tidak pernah error, tapi lebih cepat menemukan dan memperbaiki error-nya. Jangan malu googling atau tanya AI — itu bagian dari proses belajar.
Selamat belajar! 🚀
Ingat: yang paling penting adalah mulai, bukan sempurna.