Membuat step form dengan PHP memungkinkan Anda memvalidasi data secara bertahap sebelum akhirnya dikirim ke database.
Konsep form bertahap atau multi step form sering digunakan untuk meningkatkan pengalaman pengguna saat mengisi data panjang. Dengan sistem ini, pengguna tidak langsung mengisi seluruh form sekaligus, tetapi melalui beberapa langkah (step) yang terstruktur.
Pada tutorial PHP ini, kita akan membahas bagaimana cara membuat step form menggunakan session dan validasi sebelum data benar-benar disimpan ke database MySQL.
Langkah-Langkah Membuat Step Form dengan PHP
Untuk membuat step form PHP sebelum submit, Anda dapat mengikuti tahapan berikut:
- Buat halaman HTML yang menampilkan form dalam beberapa bagian (step). Setiap bagian form dapat ditempatkan dalam tag HTML berbeda, misalnya
div. - Tambahkan JavaScript untuk membuat form bisa berpindah dari satu step ke step lainnya menggunakan tombol next/prev, lalu tampilkan atau sembunyikan bagian form sesuai step aktif.
- Tambahkan validasi menggunakan PHP pada setiap step. Jika data tidak valid, tampilkan pesan error dan biarkan pengguna memperbaikinya. Jika valid, simpan data sementara menggunakan session.
- Setelah semua step selesai dan valid, kirim data ke database.
Contoh Dasar Step Form Menggunakan PHP
Berikut ini contoh sederhana implementasi multi step form menggunakan session di PHP.
1. File HTML + Logic Step (index.php)
<?php
session_start();
// Jika form belum disubmit
if (!isset($_POST['submit'])) {
$_SESSION['step'] = 1;
}
// Validasi form pada setiap step
switch ($_SESSION['step']) {
case 1:
if (isset($_POST['next'])) {
// Validasi data pada step 1
// ...
// Jika data valid, naikkan step
$_SESSION['step'] = 2;
}
break;
case 2:
if (isset($_POST['prev'])) {
$_SESSION['step'] = 1;
} elseif (isset($_POST['next'])) {
// Validasi data pada step 2
// ...
$_SESSION['step'] = 3;
}
break;
case 3:
if (isset($_POST['prev'])) {
$_SESSION['step'] = 2;
} elseif (isset($_POST['submit'])) {
// Validasi data pada step 3
// ...
// Kirim data ke database
header('Location: success.php');
exit;
}
break;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Step Form with PHP</title>
</head>
<body>
<form action="submit.php" method="post">
<!-- Step 1 -->
<h3>Step 1</h3>
<p>Masukkan nama:</p>
<input type="text" name="nama" required>
<br><br>
<input type="submit" name="step1" value="Next Step">
<!-- Step 2 -->
<h3>Step 2</h3>
<p>Masukkan alamat:</p>
<input type="text" name="alamat" required>
<br><br>
<input type="submit" name="step2" value="Next Step">
<!-- Step 3 -->
<h3>Step 3</h3>
<p>Masukkan nomor telepon:</p>
<input type="text" name="nomor" required>
<br><br>
<input type="submit" name="step3" value="Submit">
</form>
</body>
</html>
2. File Proses Submit (submit.php)
File ini bertugas menangani penyimpanan data session dan mengirimkan data ke database setelah seluruh step selesai.
<?php
session_start();
// Step 1
if(isset($_POST['step1'])) {
$_SESSION['nama'] = $_POST['nama'];
header('location: index.php#step2');
}
// Step 2
if(isset($_POST['step2'])) {
$_SESSION['alamat'] = $_POST['alamat'];
header('location: index.php#step3');
}
// Step 3
if(isset($_POST['step3'])) {
$_SESSION['nomor'] = $_POST['nomor'];
$nama = $_SESSION['nama'];
$alamat = $_SESSION['alamat'];
$nomor = $_SESSION['nomor'];
// Koneksi database
$conn = mysqli_connect('localhost', 'user', 'password', 'database');
// Query simpan data
$sql = "INSERT INTO tabel (nama, alamat, nomor)
VALUES ('$nama', '$alamat', '$nomor')";
mysqli_query($conn, $sql);
header('location: success.php');
}
?>
Penjelasan Alur Step Form PHP
Pada contoh di atas, setiap langkah menyimpan data sementara menggunakan $_SESSION. Teknik ini memungkinkan data tetap tersimpan meskipun pengguna berpindah halaman atau step.
Setelah semua langkah selesai, data diambil kembali dari session lalu dikirim ke database menggunakan query MySQL. Struktur ini umum digunakan dalam sistem pendaftaran, checkout, maupun form aplikasi online.
Anda dapat mengembangkan contoh ini dengan menambahkan validasi tambahan, proteksi keamanan seperti prepared statement untuk mencegah SQL Injection, serta desain antarmuka yang lebih interaktif menggunakan JavaScript.
Kesimpulan
Membuat multi step form PHP sebelum submit ke database membantu memastikan setiap data yang masuk telah divalidasi dengan baik. Dengan memanfaatkan session dan struktur bertahap, proses pengisian menjadi lebih terorganisir dan nyaman bagi pengguna.
Silakan sesuaikan struktur dan logika kode di atas sesuai kebutuhan proyek Anda.
Apa pendapatmu? Tulis di kolom komentar dengan sopan dan beretika. Jangan lupa bagikan agar semakin banyak yang tahu!
