BAB 4 – Input Data dan Interaksi Pengguna
Tujuan Pembelajaran
Setelah mempelajari bab ini, peserta didik mampu:
- Memahami konsep input pada aplikasi web.
- Membuat form HTML.
- Mengambil data dari form menggunakan PHP.
- Menggunakan metode GET dan POST.
- Menampilkan hasil input pengguna.
- Membuat aplikasi sederhana berbasis form.
Pendahuluan
Website yang hanya menampilkan informasi disebut website statis. Sebaliknya, website yang dapat menerima masukan dari pengguna disebut website dinamis.
Contoh website dinamis:
- Login
- Registrasi
- Buku tamu
- Pencarian data
- Toko online
- Sistem akademik
- Aplikasi kasir
Semuanya menggunakan Form HTML sebagai media input data.
Apa itu Form?
Form merupakan kumpulan komponen HTML yang digunakan untuk menerima masukan dari pengguna.
Contohnya:
- Textbox
- Password
- Radio Button
- Checkbox
- Textarea
- Select Option
- Tombol Submit
Ilustrasi:
Nama : [____________]
Alamat : [____________]
Email : [____________]
[ SIMPAN ]Struktur Dasar Form HTML
<form action="proses.php" method="post">
Nama :
<input type="text" name="nama">
<br><br>
<input type="submit" value="Simpan">
</form>Penjelasan:
action→ tujuan pengiriman data.method→ cara mengirim data.name→ nama variabel yang diterima PHP.
Mengenal Method GET
GET mengirim data melalui URL.
Misalnya:
http://localhost/proses.php?nama=AndiContoh:
<form action="proses.php" method="get">
Nama
<input type="text" name="nama">
<input type="submit">
</form>Kemudian pada proses.php
<?php
echo $_GET['nama'];
?>Output
AndiKelebihan GET
✔ Mudah diuji
✔ URL dapat dibagikan
✔ Cocok untuk pencarian data
Kekurangan GET
- Data terlihat pada URL
- Tidak aman untuk password
- Panjang data terbatas
Mengenal Method POST
POST mengirim data tanpa ditampilkan pada URL.
Form
<form action="proses.php" method="post">
Nama
<input type="text" name="nama">
<input type="submit">
</form>Proses
<?php
echo $_POST['nama'];
?>Kelebihan POST
- Lebih aman
- Data tidak terlihat
- Dapat mengirim data besar
- Digunakan hampir semua aplikasi web
GET vs POST
| GET | POST |
|---|---|
| Data terlihat | Data tersembunyi |
| Cepat | Sedikit lebih lambat |
| Untuk pencarian | Untuk menyimpan data |
| Tidak aman | Lebih aman |
Membuat Form Biodata
<!DOCTYPE html>
<html>
<head>
<title>Form Biodata</title>
</head>
<body>
<form method="post">
Nama
<br>
<input type="text" name="nama">
<br><br>
Umur
<br>
<input type="number" name="umur">
<br><br>
<input type="submit">
</form>
</body>
</html>Menampilkan Data
Tambahkan di bawah form.
<?php
if(isset($_POST['nama']))
{
echo "<hr>";
echo "Nama : ".$_POST['nama'];
echo "<br>";
echo "Umur : ".$_POST['umur'];
}
?>Mengenal isset()
Fungsi:
Mengecek apakah suatu variabel sudah memiliki nilai.
Contoh
if(isset($_POST['nama']))
{
echo "Data Ada";
}Tanpa isset(), program sering menghasilkan error:
Undefined array keyStudi Kasus
Form Pendaftaran Siswa
Nama
Alamat
Jurusan
No HP
Email
[DAFTAR]Program PHP menampilkan kembali seluruh data yang dimasukkan.
Latihan Praktik Bab 4
Latihan 1
Buat form berisi:
- Nama
- Kelas
- Jurusan
Kemudian tampilkan hasilnya.
Latihan 2
Tambahkan field:
- Nomor HP
- Alamat
Latihan 3
Buat Form Registrasi Anggota Perpustakaan.
Data:
- Nama
- Kelas
- Jurusan
- Nomor Anggota
Tugas Praktik Bab 4
Membuat Form Pendaftaran Ekstrakurikuler
Data yang harus diinput:
- Nama
- NIS
- Kelas
- Jurusan
- Jenis Kelamin
- Pilihan Ekstrakurikuler
- Alamat
- Nomor HP
Output ditampilkan kembali dalam bentuk tabel HTML.