Halo, teman-teman! Kali ini kita bakal bahas sesuatu yang seru dan bermanfaat banget buat kalian yang lagi belajar coding, khususnya PHP. Kita akan belajar bikin formulir kontak sederhana yang bisa mengirim data ke server. Cocok banget buat kalian yang baru mulai masuk dunia web development. Let’s go!
Apa Itu Formulir Kontak?
Formulir kontak adalah elemen penting di website. Biasanya dipakai buat ngehubungin admin website. Dengan PHP, kita bisa bikin formulir ini jadi hidup dan bisa ngirim data ke server.
Alat dan Bahan yang Dibutuhkan
Sebelum mulai, siapkan dulu:
- Text Editor (VS Code, Sublime Text, dll.)
- Web Server (XAMPP atau WAMP untuk localhost)
- Browser (Chrome, Firefox, dll.)
Langkah-Langkah Membuat Formulir Kontak
1. Buat File HTML untuk Formulir
Kita mulai dengan file HTML. Ini dia kodenya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulir Kontak</title>
</head>
<body>
<h1>Hubungi Kami</h1>
<form action="proses.php" method="POST">
<label for="nama">Nama:</label><br>
<input type="text" id="nama" name="nama" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="pesan">Pesan:</label><br>
<textarea id="pesan" name="pesan" rows="4" required></textarea><br><br>
<button type="submit">Kirim</button>
</form>
</body>
</html>
Penjelasan:
action="proses.php": File PHP yang akan memproses data.method="POST": Data dikirim ke server dengan metode POST.
Simpan file ini dengan nama formulir.html.
2. Buat File PHP untuk Memproses Data
Sekarang, kita bikin file proses.php untuk menangkap data yang dikirim.
<?php
// Tangkap data dari form
$nama = htmlspecialchars($_POST['nama']);
$email = htmlspecialchars($_POST['email']);
$pesan = htmlspecialchars($_POST['pesan']);
// Validasi sederhana
if (!empty($nama) && !empty($email) && !empty($pesan)) {
echo "<h1>Terima kasih, $nama!</h1>";
echo "<p>Email Anda: $email</p>";
echo "<p>Pesan Anda: $pesan</p>";
} else {
echo "<h1>Oops!</h1>";
echo "<p>Semua data wajib diisi!</p>";
}
?>
Penjelasan:
$_POST: Menangkap data yang dikirim melalui metode POST.htmlspecialchars(): Mencegah serangan XSS dengan memfilter input user.
3. Coba Jalankan di Browser
- Simpan kedua file (
formulir.htmldanproses.php) di folderhtdocs(kalau pakai XAMPP). - Nyalakan server lokal.
- Buka browser dan akses
http://localhost/formulir.html. - Isi formulir, klik Kirim, dan lihat hasilnya.
Bonus: Tambahkan Sedikit Gaya dengan CSS
Biar lebih menarik, tambahin CSS di file HTML kamu:
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px auto;
max-width: 600px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
}
h1 {
text-align: center;
}
input, textarea, button {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
Kenapa Harus Belajar Ini?
- Praktis: Bisa langsung dipakai di website.
- Seru: Kamu belajar cara komunikasi antara frontend dan backend.
- Level Up: Jadi langkah awal sebelum belajar sistem yang lebih kompleks.
Ayo, Terus Eksperimen!
Jangan berhenti sampai di sini, ya! Coba tambahkan fitur lain, seperti:
- Validasi lebih kompleks.
- Kirim data ke database.
- Tambahkan notifikasi sukses dengan JavaScript.
Semakin sering kamu eksperimen, semakin jago kamu coding-nya. Selamat mencoba!