PHP Form : Menampilkan Hasil Post Action Pada Halaman Yang Sama
Pada pembelajaran PHP Form sebelumnya, ketika kita membuat form kemudian setelah
method="post"
kita menggunakan action="namafile.php"
untuk melewatkan data yang dinputkan di form ke halaman "namafile.php"
.Nah kali ini, kita tidak akan memanggil halaman lainnya di saat melewatkan data yang kita inputkan pada form inputan. Data-data yang telah diinputkan akan ditampilkan pada halaman yang sama.
Dalam percobaan kali ini, kita akan melakukan dua percobaan :
- Percobaan ke-1, proses pengiriman data akan dilewat antar halaman. Dalam kasus ini, setelah dimasukkan data pada form inputan, lalu akan dipanggil file halaman lainnya untuk diproses dan ditampilkan hasilnya.
- Percobaan ke-2, proses pengiriman data akan dilakukan di halaman yang sama. Dalam kasus ini, data yang telah diinputkan akan diproses dan ditampilkan pada halaman yang sama (tidak perlu memanggil halaman lainnya).
PERCOBAAN KE-1
Percobaan ke-1 bertujuan untuk menunjukkan proses pengirimana data antar halaman. Oleh karena itu, dalam percobaan ini terdapat dua file:- File
dataform.php
, merupakan halaman untuk inputan user - File
proses.php
, merupakan halaman yang memproses inputan yang telah diinput pada filedataform.php
phpschool/formaction
.Langkah 1.1
Salin kode program php dibawah ini dan berinamadataform.php
, lalu simpan di folder phpschool/formaction
.<!DOCTYPE html>
<head>
<title>Kirim Data Form PHP</title>
</head>
<body>
<form action="proses.php" method="post">
<table>
<tr><td>Nama Lengkap </td><td><input type="text" name="nama"></td></tr>
<tr><td>Alamat </td><td><textarea name="alamat" width="300"></textarea></td></tr>
<tr><td>Tanggal Lahir</td><td><input type='date' name='tgl_lhr'/></td></tr>
<tr><td>Jenis Kelamin</td>
<td>
<input type="radio" name="jns_klmin" value="Pria" checked> Pria
<input type="radio" name="jns_klmin" value="Wanita"> Wanita
</td>
</tr>
<tr><td>Pendidikan</td>
<td>
<select name ="pendidikan">
<option value="SD">SD</option>
<option value="SMP">SMP</option>
<option value="SMA">SMA</option>
<option value="S1">S1</option>
<option value="S2">S2</option>
<option value="S3">S3</option>
</select>
</td>
</tr>
<tr><td><input type="submit" value="Simpan" name="simpan"></td></tr>
</table>
</form>
</body>
</html>
Langkah 1.2
Salin kode program berikut dan berinama file
proses.php
, lalu simpan juga di folder phpschool/formaction
.<?php
if(isset($_POST['simpan'])){
echo '<table>';
echo '<tr><td>'.'Nama Lengkap: '.'</td><td>'.$_POST['nama'].'</td></tr>';
echo '<tr><td>'.'Alamat: '.'</td><td>'.$_POST['alamat'].'</td></tr>';
echo '<tr><td>'.'Tanggal Lahir: '.'</td><td>'.$_POST['tgl_lhr'].'</td></tr>';
echo '<tr><td>'.'Jenis Kelamin: '.'</td><td>'.$_POST['jns_klmin'].'</td></tr>';
echo '<tr><td>'.'Pendidikan: '.'</td><td>'.$_POST['pendidikan'].'</td></tr>';
echo '</table>';
}
?>
Langkah 1.3
Jalankan filedataform.php
pada browser, maka akan tampak tampilan form input seperti gambar di bawah ini : Ketika selesai menginput data dan kemudian menekan tombol "Simpan", maka akan dipanggil file
proses.php
. Jadi data-data tersebut dikirim dan diproses oleh halaman yang berbeda. Sehingga kita akan melihat hasil tampilan dari file proses.php
seperti gambar di bawah ini :Kesimpulan:Dalam percobaan ini kita telah melihat bahwa proses menyimpan dan menampilkan data dilakukan oleh halaman yang berbeda dari halaman inputan.
PERCOBAAN KE-2
Percobaan ke-2 ini adalah kebalikan dari Percobaan ke-1, dimana kita akan mengirim dan memproses data inputan (menyimpan dan menampilkan) di halaman yang sama.Dengan demikian, ita hanya membutuhkan satu halaman, yaitu file yang kita berinama
dataformself.php
. File tersebut kita simpan juga dalam folder phpschool/formaction
.Langkah 2.1
Salin kode program php di bawah ini dan berinamadataformself.php
:<?php
// mengdefiniskan variabel dan diset kosong
$name = $address = $date_birth = $gender = $level_edu = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["nama"];
$address = $_POST["alamat"];
$date_birth = $_POST['tgl_lhr'];
$gender = $_POST['jns_klmin'];
$level_edu = $_POST['pendidikan'];
}
?>
<!DOCTYPE html>
<head>
<title>Kirim Data Form PHP</title>
</head>
<body>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<table>
<tr><td>Nama Lengkap </td><td><input type="text" name="nama"></td></tr>
<tr><td>Alamat </td><td><textarea name="alamat" width="300"></textarea></td></tr>
<tr><td>Tanggal Lahir</td><td><input type='date' name='tgl_lhr'/></td></tr>
<tr><td>Jenis Kelamin</td>
<td>
<input type="radio" name="jns_klmin" value="Pria" checked> Pria
<input type="radio" name="jns_klmin" value="Wanita"> Wanita
</td>
</tr>
<tr><td>Pendidikan</td>
<td>
<select name ="pendidikan">
<option value="SD">SD</option>
<option value="SMP">SMP</option>
<option value="SMA">SMA</option>
<option value="S1">S1</option>
<option value="S2">S2</option>
<option value="S3">S3</option>
</select>
</td>
</tr>
<tr><td><input type="submit" value="Simpan" name="simpan"></td></tr>
</table>
</form>
<br/><br/>
<?php
echo '<table>';
echo '<tr><td>'.'Nama Lengkap: '.'</td><td>'.$name.'</td></tr>';
echo '<tr><td>'.'Alamat: '.'</td><td>'.$address.'</td></tr>';
echo '<tr><td>'.'Tanggal Lahir: '.'</td><td>'.$date_birth.'</td></tr>';
echo '<tr><td>'.'Jenis Kelamin: '.'</td><td>'.$gender.'</td></tr>';
echo '<tr><td>'.'Pendidikan: '.'</td><td>'.$level_edu.'</td></tr>';
echo '</table>';
?>
</body>
</html>
Langkah 2.2
Jalankan filedataformself.php
tersebut pada browser anda, sehingga kita akan melihat tampilan awal seperti Gambar.A. Kemudian saat kita inputkan data (Gambar.B) lalu ditekan tombol "Simpan", maka data akan dimunculkan pada halaman yang sama seperti yang terlihat pada Gambar. C.Jika pada "Percobaan Ke-1" ketika kita tekan tombol "Simpan" akan dipanggil halaman lain, yakni file
proses.php
. Sedangkan pada "Percobaan Ke-1" ini, halaman tersebut akan memanggil dirinya sendiri ketika ditekan tombol "Simpan".