Tutorial PHP Form II: Menampilkan Hasil Input Form HTML dengan PHP

Pada kesempatan kali kita akan membahas cara menampilkan hasil input form HTML dengan PHP.

Pada tutorial sebelumnya, kita telah membahas bagaimana menghubungkan form HTML dengan PHP, dalam tutorial tersebut telah kita sekilas bagaimana menangkap data yang dikirim oleh form HTML.

Seperti yang telah kita ketahui, terdapat berbagai macam form untuk mengirim data, seperti <input>, <select>, dan <textarea>. Pada tutorial ini  kita akan membahas lebih dalam bagaimana cara menangkap data yang dikirim oleh elemen tersebut.

I. Form HTML dan Kode PHP

Kode untuk form HTML dan script PHP yang akan kita bahas pada tutorial kali ini adalah sebagai berikut:

<form action="" method="post">
	<div class="row">
		<label>Nama</label>
		<input type="text" name="nama" value="<?=isset($_POST['nama']) ? $_POST['nama'] : ''?>"/>
	</div>
	<div class="row">
		<label>Email</label>
		<input type="text" name="email" value="<?=isset($_POST['email']) ? $_POST['email'] : ''?>"/>
	</div>
	<div class="row">
		<label>Lokasi</label>
		<select name="area">
			<?php $options = array('Jakarta', 'Semarang', 'Surakarta', 'Yogyakarta', 'Surabaya');
			foreach ($options as $area) {
				$selected = @$_POST['area'] == $area ? ' selected="selected"' : '';
				echo '<option value="' . $area . '"' . $selected . '>' . $area . '</option>';
			}?>
		</select>
	</div>
	<div class="row">
		<label>Jenis Kelamin</label>
		<div class="options">
			<?php
			$jenis_kelamin = array('L' => 'Laki Laki', 'P' => 'Perempuan');
			foreach ($jenis_kelamin as $kode => $detail) {
				$checked = @$_POST['jenis_kelamin'] == $kode ? ' checked="checked"' : '';
				echo '<label class="radio">
						<input name="jenis_kelamin" type="radio" value="' . $kode . '"' . $checked . '>' . $detail . '</option>
					</label>';
			}
			?>
		</div>
	</div>
	<div class="row">
		<label>Skill</label>
		<div class="options">
			<?php 
			$program = array('PHP', 'MySQL', 'Javascript', 'HTML', 'CSS');
			foreach ($program as $skill) {
				$checked = isset($_POST['skill_' . $skill]) ? ' checked="checked"' : '';
				echo '<label class="checkbox">
						<input type="checkbox" name="skill_' . $skill . '"' . $checked . '>' . $skill . 
					'</label>';
			}
			?>
		</div>
	</div>
	<div class="row">
		<input type="submit" name="submit" value="Simpan"/>
	</div>
</form>
<?php
if (isset($_POST['submit'])) {
	echo '<h1>Hasil Input</h1>';
	echo '<ul>';
	echo '<li>Nama: ' . $_POST['nama'] . '</li>';
	echo '<li>Email: ' . $_POST['email'] . '</li>';
	echo '<li>Lokasi: ' . $_POST['area'] . '</li>';
	echo '<li>Jenis Kelamin: ' . (isset($_POST['jenis_kelamin']) ? $jenis_kelamin[$_POST['jenis_kelamin']] : '-') . '</li>';
	
	$list_skill = array();
	foreach ($program as $skill) {
		if ( isset($_POST['skill_' . $skill]) )
		{
			$list_skill[] = $skill;
		}
	}

	echo '<li>Skill: ' . ($list_skill ? join($list_skill, ', ') : '-') . '</li>';
	echo '</ul>';
}?>

Agar tidak terlalu kompleks, script diatas hanya mengambil bagian form dan PHP nya saja, bagian stylesheet dihilangkan. Untuk melihat script lengkapnya, sobat dapat mengklik tombol demo, atau download file tersebut.

Selanjutnya, mari kita isikan beberapa data pada form tersebut kemudian kita klik tombol submit, hasil yang kita peroleh:

Menampilkan Hasil Input Form HTML dengan PHP

Perhatikan pada gambar diatas terlihat bahwa setelah form disubmit, isian form, yaitu nama, email, jenis kelamin, dan skill akan berisi nilai sama persis dengan yang diisikan oleh user.

Untuk melihat perubahan atribut, setelah form di submit, klik kanan pada browser dan pilih view source

II. Membuat Nilai Elemen Input Sesuai Dengan Inputan User

Ketika form di submit, penting bagi kita untuk menampilkan pada form tersebut apa yang diinput oleh user, hal ini untuk  memudahkan user mengetahui data apa yang telah diisikan.

Untuk memberi nilai pada elemen input sesuai dengan yang diinputkan user, kita tambahkan atribut tertentu pada elemen tersebut:

  • Untuk memberi nilai pada elemen <input>, gunakan atribut value="nilai"
  • Pada elemen <select>, untuk membuat agar opsi tertentu terpilih ,  gunakan atribut selected="selected"
  • Untuk  memilih atau mencentang elemen input dengan type checkbox dan radio <input type="checkbox"> dan <input type="radio">, gunakan atribut checked="checked"

Elemen <input>

Untuk elemen input, kita ambil contoh isian pada nama:

<input type="text" name="nama" value="<?=isset($_POST['nama']) ? $_POST['nama'] : ''?>"/>

pada contoh diatas, kita gunakan script php

<?=isset($_POST['nama']) ? $_POST['nama'] : ''?>

Penjelasan:

  • Kita gunakan shorthand tag <?= untuk mencetak output (menggantikan echo). Tentang shorthand tag dapat dibaca  disini.
  • Jika variabel $_POST memiliki index nama ( isset($_POST['nama']) ), maka cetak nilai dari variabel $_POST['nama'], jika tidak, maka cetak string kosong ''. Variabel $_POST akan memiliki index nama jika tombol submit di klik.

Ketika pertama kali form ditampilkan, karena tidak ada data yang dikirim, nilai dari inputan nama akan kosong

<input type="text" name="nama" placeholder="Nama" value=""/>

Setelah tombol submit di klik, inputan tersebut berisi data nama yang diisikan misal diisi Agus Prawoto Hadi

<input type="text" name="nama" placeholder="Nama" value="Agus Prawoto Hadi"/>

Elemen <select>

Pada elemen <select>, untuk membuat opsi tertentu menjadi terpilih, kita tambahkan atribut selected="selected" pada elemen <option>, misal, pada contoh diatas, yang terpilih adalah Surakarta, maka bentuk elemen select adalah:

<select name="area">
	<option value="Jakarta">Jakarta</option>
	<option value="Semarang">Semarang</option>
	<option value="Surakarta" selected="selected">Surakarta</option>
	<option value="Yogyakarta">Yogyakarta</option>
	<option value="Surabaya">Surabaya</option>
</select>

Pada script diatas, kita gunakan perulangan foreach untuk memudahkan membuat elemen <option>, selain itu, metode ini juga memudahkan  ketika menentukan opsi mana yang akan diberi atribut selected="selected"

<?php 
$options = array('Jakarta', 'Semarang', 'Surakarta', 'Yogyakarta', 'Surabaya');
foreach ($options as $area) {
	$selected = @$_POST['area'] == $area ? ' selected="selected"' : '';
	echo '<option value="' . $area . '" . ' . $selected . '>' . $area . '</option>';
}?>

Jika menggunakan cara manual, penulisannya menjadi:

<?php
$opsi_jakarta = @$_POST['area'] == 'Jakarta' ? ' selected="selected"' : '';
$opsi_semarang = @$_POST['area'] == 'Semarang' ? ' selected="selected"' : '';
$opsi_surakarta = @$_POST['area'] == 'Surakarta' ? ' selected="selected"' : '';
$opsi_yogyakarta = @$_POST['area'] == 'Yogyakarta' ? ' selected="selected"' : '';
$opsi_surabaya = @$_POST['area'] == 'Surabaya' ? ' selected="selected"' : '';
?>
<select name="area">
<option value="Jakarta"<?=$opsi_jakarta?>>Jakarta</option>
<option value="Semarang"<?=$opsi_semarang?>>Semarang</option>
<option value="Surakarta"<?=$opsi_surakarta?>>Surakarta</option>
<option value="Yogyakarta"<?=$opsi_yogyakarta?>>Yogyakarta</option>
<option value="Surabaya"<?=$opsi_surabaya?>>Surabaya</option>
</select>

Dengan menggunakan perulangan foreach, penambahan elemen dapat dilakukan dengan mudah, misal jika ingin menambahkan kota medan, tinggal kita tambahkan elemen variabel $options sehingga menjadi:

$options = array('Jakarta', 'Semarang', 'Surakarta', 'Yogyakarta', 'Surabaya', 'Medan');

3. Elemen <input> dengan type radio

Pada elemen <input> dengan type radio, untuk membuat elemen terpilih, kita gunakan atribut checked="checked", seperti pada elemen <select>, kita gunakan perulangan foreach untuk mempermudah pembuatan elemen.

<?php
$jenis_kelamin = array('L' => 'Laki Laki', 'P' => 'Perempuan');
foreach ($jenis_kelamin as $kode => $detail) {
	$checked = @$_POST['jenis_kelamin'] == $kode ? ' checked="checked"' : '';
	echo '<label class="radio">
	<input name="jenis_kelamin" type="radio" value="' . $kode . '"' . $checked . '>' . $detail . '</option>
</label>';
}

Pada contoh diatas, jika opsi Laki Laki yang terpilih, maka bentuk elemennya menjadi:

<div class="options">
	<label class="radio">
		<input name="jenis_kelamin" type="radio" value="L" checked="checked">Laki Laki</option>
	</label>
	<label class="radio">
		<input name="jenis_kelamin" type="radio" value="P">Perempuan</option>
	</label>
</div>

4. Elemen <input> dengan type checkbox

Sama seperti radio, pada elemen <input> dengan type checkbox, untuk membuat elemen terpilih, kita tambahkan atribut checked="checked".

Penting diperhatikan bahwa jika elemen ini tidak tercentang, maka data elemen ini tidak terkirim, untuk itu kita mengujinya dengan fungsi isset()

Sama seperti elemen sebelumnya, untuk mempermudah pembuatan elemen, kita buat dengan perulangan foreach:

<?php 
$program = array('PHP', 'MySQL', 'Javascript', 'HTML', 'CSS');
foreach ($program as $skill) {
	$checked = isset($_POST['skill_' . $skill]) ? ' checked="checked"' : '';
	echo '<label class="checkbox">
		<input type="checkbox" name="skill_' . $skill . '"' . $checked . '>' . $skill . 
	     '</label>';
}

III. Menampilkan Hasil Input Form HTML dengan PHP

Dengan memberikan nilai form input sesuai dengan nilai yang diisikan user, sebenarnya sudah cukup memberikan informasi data apa saja yang diisikan user. Namun demikian, untuk keperluan tertentu, kita perlu untuk mencetak data yang diinputkan oleh user.

Pada form dengan method POST, semua data yang diisikan pada elemen input disimpan pada variabel $_POST, sehingga untuk menampilkan semua data yang dikirim oleh form, kita cukup menggunakan variabel ini.

Bagian script untuk menampilkan data:

<?php
if (isset($_POST['submit'])) {
echo '<h1>Hasil Input</h1>';
echo '<ul>';
echo '<li>Nama: ' . $_POST['nama'] . '</li>';
echo '<li>Email: ' . $_POST['email'] . '</li>';
echo '<li>Lokasi: ' . $_POST['area'] . '</li>';
echo '<li>Jenis Kelamin: ' . (isset($_POST['jenis_kelamin']) ? $jenis_kelamin[$_POST['jenis_kelamin']] : '-') . '</li>';

$list_skill = array();
foreach ($program as $skill) {
	if ( isset($_POST['skill_' . $skill]) )
	{
		$list_skill[] = $skill;
	}
}

echo '<li>Skill: ' . ($list_skill ? join($list_skill, ', ') : '-') . '</li>';
echo '</ul>';

Pada script diatas, pertama tama kita gunakan statemen if yaitu: if (isset($_POST['submit'])) untuk mengecek apakah ada data yang dikirim (tombol submit diklik).

Jika ya, maka selanjutnya kita tampilkan data inputan sesuai dengan nama index nya, yaitu $_POST['nama'], $_POST['email'], dan $_POST['area']

Untuk jenis kelamin, pertama-tama, dengan fungsi isset() yaitu isset($_POST['jenis_kelamin'])  untuk menguji apakah opsi jenis kelamin dipilih, jika ya, maka cetak datanya, jika tidak, cetak tanda strip ( – )

isset($_POST['jenis_kelamin']) ? $jenis_kelamin[$_POST['jenis_kelamin']] : '-'

Selanjutnya, untuk mencari data skill yang dicentang oleh user, kita buat perulangan pada variabel $program, jika datanya ada pada variabel $_POST if ( isset($_POST['skill_' . $skill]) ), maka simpan data tersebut pada variabel array $list_skill

Selanjutnya, jika variabel $list_skill ada isinya, maka, dengan fungsi join(), gabungkan elemen yang ada pada variabel tersebut, jika tidak, cetak tanda strip ( – )

Demikian pembahasan mengenai cara menampilkan hasil input form HTML dengan PHP, semoga bermanfaat

Subscibe Now

Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com

Komitmen Kami: Kami senantiasa menghargai privasi Anda dan tidak akan membagikan identitas Anda ke pihak manapun.

61 Feedback dari pembaca

  • Sangat membantu sekali gan, saya kalo ada kontak invite BBM saya gan 5A01D36F atau Line 7junet … Terimakasih banyak gan, saya suka dengan web ini sudah jelas dan mudah dipahami

  • $selected = @$_POST[‘area’] == $area ? ‘ selected=”selected”‘ : ”;

    tanda @ sebelum $_POST[‘area’] artinya apa ya min ? masih belajar nih

    • Tanda itu untuk mencegah php memunculkan warning yang muncul mas, ketika pertama kali script dijalankan makan $_POST akan kosong sehingga jika kode tersebut dijalankan maka akan muncul warning undefined index area… Nah agar warning tersebut tidak muncul maka kita gunakan @

  • mas saya mau tanya bagaimana cara menambahkan check all di list box,
    jd jika kita klick check all. otomatis ke checklis semua checkboxnya .. terimakasih

    • Itu pakai jquery atau javascript mas, misal:

      $(document).ready(function(){
      	$('#check-all').click(function(){
      		$check_box = $('#check-list').find('checkbox');
      		$check_box.each(function(i, elm){
      			$elm = $(elm);
      			if (!$elm.is(':checked'))
      				$elm.click();
      		})
      	});
      })
  • kalo untuk script refresh halaman nya gimana ya mas ? jadi pas kita klik halaman nya jadi kosong (belum ada inputan) thanks

  • mas bagaimana codingnya untuk menampilkan hasil input form html jika page htmlnya dari page yang berbeda?contoh ada form list produk kemudian data yang sudah di input terprint ketika ada di order form. Mohon pencerahannya mas. Thanks

  • Banyak Ilmu saya dapat dari jagowebdev.com
    Terima Kasih Banyak Mas Agus….
    Terima kasih buat Buku Hebat Trick MySQL nya.

    Sy suka dengan gaya dan bahasa penulisannya yang ringan dan mudah dipahami buat pemula seperti saya.
    Sy tunggu karya lainnya Mas…
    Oh ya…
    ada gak buku tentang pemrograman PHP ini mas…. ini menarik sekali buat saya.

    • Terima Kasih mas…

      Untuk e-book PHP rencana release tahun ini dengan update terbaru PHP dan GRATIS bagi pengunjung setia Jagowebdev.com, jadi bagi para pengunjung jangan lupa subscribe di web ini agar segera tahu jika sewaktu waktu e-book tersebut terbit.

  • halo kak, kalo mau nampilin data dari db ke salah satu radio button yg nilainya sama dengan di db gimana ya?

  • gan kalo yang di up itu gambar bisa kagak?? ane nyobak, tpi cuman namanya doang yg keluar

  • gan mau tanya kalo melihat form kontak yg sudah di isi orang lain gtu , itu masuknya kemnh ya ?

  • mas Agus, kalau ingin menampilkan form inputan dengan method POST (beda halaman) kemudian otomatis masuk ke db source code nya gimana mas? terimakasih

    • Sama saja mas tinggal diubah bagian action di form nya, misal di halaman_1.php, formnya seperti ini:

      <form method="post" action="halaman_2.php">
      	<label>Nama</label> <input type="text" name="nama"/>
      	<input type="submit" name="submit" value="Submit"/>
      </form>

      di halaman_2.php, tangkap $_POST nya:

      <?php
      $nama  = $_POST['nama'];
      $conn  = mysqli_connect('localhost', 'root', '', 'nama_database');
      $sql   = 'INSERT into tabel values ("' . $nama . '")';
      $query = mysqli_query($conn, $sql);
  • mas boleh tanya, skrip buat input data sekalian print dan tabelnya?
    tp ketika input data 1 data yang lain mengikuti.
    contohnya ketika nim di isi nanti nama dan alamat langsung terisi otomatis seperti tabel di DB
    nim:
    nama:
    alamat:

    simpan

    nama table

    print

    bisa di kirim email? yogipermana2210@gmail.com trimakasih 🙂

  • ka saya mau form input, nah datanya itu saya pilih otomatis dari popup gimana carnya biar muncul data yg saya pilih dari popup ke form input.

  • Pak Agus, Saya Aksan, salam kenal.

    Artikel sangat membantu saya yang masih belajar.

    Oya, kalau saya punya dropdown list dengan name = ‘dd_jenisbarang’ bagaimana cara menangkap hasil pilihan di list itu menggunakan $_POST atau $_GET ?

    Nuhun
    AksanRaharjo

  • siang pak, bagaimana cara membuat tabel sesuai inputan user pak?
    sy sdh buat inputannya seperti berikut :
    baris : 3
    kolom : 5
    oke
    nah kalo kita klik oke itu outputnya tabel yang barisnya 3 dan kolommnya 5 pak.
    mohon pencerahannya pak

    • Itu baris dan kolom nya pakai ya mas?
      Kalau iya tinggal ditangkap pakai $_GET atau $_POST kemudian digenerate tabelnya pakai loop, misal:

      echo '<table>';
      for ($baris = 1; $baris<=$_GET['baris']; $baris++) {
      	echo '<tr>';
      	for ($col = 1; $col <= $_GET['kolom']; $col++) {
      		echo '<td>' . $col . '</td>';
      	}
      	echo '</tr>
      }
      echo '</table>';
  • Mas maaf mau tanya, misalkan itu di contoh pada skill yang tercentang adalah PHP, MySQL dan HTML nah yang muncul dibawah adalah inputan yang dijoin.

    Namun, saya mau bertanya bagaimana bila hasil inputan tidak dijoin namun hanya menampilkan jumlah? Jadi misal itu skill yg kena chekbox PHP, MySQL dan HTML adalah berjumlah 3, nah itu bagaimana untuk menampilkannya? trimakasih…

    • Itu berarti tinggal dihitung yang tercentang saja mas, yang tercentang kan disimpan dalam variabel $list_skill, jadi tinggal gunakan fungsi count:

      echo 'Jumlah skill: ' . count($list_skill);
  • Misi Mas, mau nanya kalau hasil output formnya mau diletakkan di paragraf tertentu seperti javascript kalau pake innerHTML gimana yah??

  • salam mas, mau nanya, gimana caranya menyembunyikan label dari form yang tidak diisi? .
    yang di DEMO kan ketika nama saya kosongin, pas di submit labelnya masi ada “nama:” nah gimana ya caranya biar pas nama itu kosong, label nya juga ga nampil mas.

  • Salam kenal mas Agus, saya pak martono Surabaya, ulasannya sederhana dan sangat membantu bagi yang baru belajar. Ada yang perlu saya tanyakan perihal input data baris dan kolom dengan php, bagaimana caranya setelah di submit tampilan input data tidak hilang untuk konfirmasi isinya sudah benar atau belum. Selanjutnya data disimpan di database.dbf

  • Salam kenal pak, saya Maulana. Saya mau tanya pak, pas di jalankan muncul warning

    Deprecated: join(): Passing glue string after array is deprecated. Swap the parameters on line 129

    Isi line 129 nya itu
    echo ‘Skill: ‘ . ($list_skill ? join($list_skill, ‘, ‘) : ‘-‘) . ”;

    Mohon bantuannya pak, terima kasih

    • Iya mas, ada perubahan pada PHP versi 7 dimana argumen pertama pada fungsi join adalah string yang digunakan untuk menggabungkan kata.
      Untuk mengatasi error tersebut, bisa membalik urutan argumen pada fungsi join
      dari: echo ‘Skill: ‘ . ($list_skill ? join($list_skill, ‘, ‘) : ‘-‘);
      mejadi echo ‘Skill: ‘ . ($list_skill ? join(‘, ‘, $list_skill) : ‘-‘);

  • kalo ini biar bisa dicetak ke PDF gimana
    $document = str_replace(“#KETERANGANIBU”, $keter_ibu, $document);
    header(“content-type: application/Foxid PDF Reader”);
    header(“content-disposition: inline; filename=cetakform.pdf”);
    header(“content-lenght: “.strlen($document));
    echo $document;
    ?>

  • jika memilih satu skil, maka akan muncul error. bagaimana cara mengatasinya kak?
    Fatal error: Uncaught TypeError: join(): Argument #2 ($array) must be of type ?array, string given in D:\xampp\htdocs\QC\page2.php:114 Stack trace: #0 D:\xampp\htdocs\QC\page2.php(114): join(Array, ‘, ‘) #1 {main} thrown in D:\xampp\htdocs\QC\page2.php on line 114

  • mau tanya nih kenapa ya kalo di html hasil inputan bisa balik lagi ke semula…tidak bisa berubah gimna script nya agar inputan nya berubah sesuai yg kita mau untu program html

  • Halo mas ijin tanya , kalo hasil inputannya mau dimasukan kedalam database dan ke halaman page ini gimana ya?

    • Ketika disubmit, data bisa dimasukkan ke database mas, agar tampilan form sesuai yang diinputkan, value dari inputan tersebut bisa disini data $_POST inputan tersebut, misal:

      <input name="nama" value="<?=$_POST['nama']?>"/>

Silakan tinggalkan komentar

Newsletter

Jadilah yang pertama tahu berita terbaru dari Jagowebdev.com