Metode box isian atau input pada javascript yaitu

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 '<h2>Hasil Input</h2>';
	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:

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 '<h2>Hasil Input</h2>';
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