JOB SHEET HTML + PHP
Mata Pelajaran : Dasar-Dasar Pengembangan Web
Kelas : X RPL
Pertemuan Ke : 1
Waktu : 2 x 45 Menit
Kompetensi Dasar :
• J.620100.016.01 - Menulis Kode dengan
Prinsip Sesuai Guidelines dan Best Practices
• J.620100.017.02 - Mengimplementasikan
Pemrograman Terstruktur
Tujuan Pembelajaran
Setelah kegiatan ini, peserta didik diharapkan mampu:
1. Membuat form HTML sederhana menggunakan method GET dan POST.
2. Memproses data input dari form menggunakan script PHP.
Tujuan Pembelajaran
Setelah kegiatan ini, peserta didik diharapkan mampu:
1. Menggunakan tag-tag HTML dasar untuk menyusun konten.
2. Membuat halaman HTML sederhana yang memuat heading, paragraf,
tautan, gambar, tabel, dan form input.
3. Membuat form HTML dengan method GET dan POST.
4. Memproses data form menggunakan PHP.
Alat dan Bahan
- Teks editor (Notepad, VSCode, Sublime Text, dll)
- Browser (Chrome/Firefox)
- Folder kerja HTML dan PHP
- XAMPP/WAMP sebagai web server lokal
Materi Praktik HTML Dasar
Heading
<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Sub Sub Judul</h3>
Paragraf
<p>Ini adalah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>
Link
<a href="[Link] Google</a>
Gambar
<img src="[Link]" alt="Deskripsi Gambar" width="300">
Tabel
<table border="1">
<tr>
<th>Nama</th>
<th>Umur</th>
</tr>
<tr>
<td>Ani</td>
<td>17</td>
</tr>
</table>
Form HTML
<form action="#" method="post">
<label for="nama">Nama:</label><br>
<input type="text" id="nama" name="nama"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<label for="pesan">Pesan:</label><br>
<textarea id="pesan" name="pesan"></textarea><br><br>
<input type="submit" value="Kirim">
</form>
Langkah Kerja
1. Buka teks editor dan buat file HTML baru.
2. Ketik struktur dasar HTML dan tambahkan tag:
- Heading (h1-h3)
- Paragraf
- Link
- Gambar
- Tabel
- Form input sederhana
3. Simpan dan buka file di browser.
4. Cobalah membuat variasi dengan mengubah isi dan menambahkan elemen
lain.
Tugas
Buat halaman HTML yang menampilkan:
- Judul web menggunakan <h1>
- Deskripsi menggunakan paragraf
- Gambar profil
- Link ke Instagram sekolah
- Tabel biodata (Nama, Kelas, Hobi)
- Formulir kritik & saran
Simpan dengan nama: tugas_html_konten.html
Penilaian (Rubrik)
Heading dan Paragraf: 20
Link dan Gambar: 20
Tabel: 20
Form dan Inputan: 20
Kerapihan & Struktur: 20
Total: 100
Latihan Lanjutan: Form HTML + PHP
A. Form dengan Method GET
File: form_get.html
<!DOCTYPE html>
<html>
<head><title>Form Metode GET</title></head>
<body>
<h2>Formulir dengan GET</h2>
<form action="proses_get.php" method="get">
<label>Nama:</label><br>
<input type="text" name="nama"><br><br>
<label>Kelas:</label><br>
<input type="text" name="kelas"><br><br>
<input type="submit" value="Kirim Data">
</form>
</body>
</html>
File: proses_get.php
<?php
$nama = $_GET['nama'];
$kelas = $_GET['kelas'];
echo "<h2>Hasil Data dari Form GET</h2>";
echo "Nama: " . $nama . "<br>";
echo "Kelas: " . $kelas . "<br>";
?>
B. Form dengan Method POST
File: form_post.html
<!DOCTYPE html>
<html>
<head><title>Form Metode POST</title></head>
<body>
<h2>Formulir dengan POST</h2>
<form action="proses_post.php" method="post">
<label>Email:</label><br>
<input type="email" name="email"><br><br>
<label>Pesan:</label><br>
<textarea name="pesan" rows="5" cols="30"></textarea><br><br>
<input type="submit" value="Kirim Pesan">
</form>
</body>
</html>
File: proses_post.php
<?php
$email = $_POST['email'];
$pesan = $_POST['pesan'];
echo "<h2>Hasil Data dari Form POST</h2>";
echo "Email: " . $email . "<br>";
echo "Pesan: " . nl2br($pesan) . "<br>";
?>
Catatan Guru
Simpan semua file ke dalam satu folder di server lokal (di folder 'htdocs' pada
XAMPP).
Akses melalui browser:
[Link]
[Link]