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:
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.
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 atributvalue="nilai"
- Pada elemen
<select>
, untuk membuat agar opsi tertentu terpilih , gunakan atributselected="selected"
- Untuk memilih atau mencentang elemen input dengan type checkbox dan radio
<input type="checkbox">
dan<input type="radio">
, gunakan atributchecked="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
45 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
Sama sama, terima kasih mas, maaf kebetulan saya tidak punya BBM atau LINE
BTW, bgmn ya code php nya untuk insert to DB lalu show data nya?
Maksudnya show datanya hanya untuk informasi ke user mas? data apa saja yang masuk? atau maksudnya lain?
$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:
kalo untuk script refresh halaman nya gimana ya mas ? jadi pas kita klik halaman nya jadi kosong (belum ada inputan) thanks
Maksudnya refresh bagaimana ya mas? kalau form itu nanti larinya ke atribut action yang ada di element
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
Apa maksudnya di properties action nya mas? misal file input_produk.php ada form berikut:
Nanti ketika di submit, halamannya menuju ke proses.php
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.
Bermanfaat 🙂
mau e-book lengkapnya he..
Ditunggu mbak, mudah-mudahan e-book nya bisa segera release 🙂
Alhamdulillah. Teerimakasiiiih
halo kak, kalo mau nampilin data dari db ke salah satu radio button yg nilainya sama dengan di db gimana ya?
Sama saja seperti menampilkan dropdown dari DB mas…
gan kalo yang di up itu gambar bisa kagak?? ane nyobak, tpi cuman namanya doang yg keluar
Maksudnya bagaimana ya mas?
gan mau tanya kalo melihat form kontak yg sudah di isi orang lain gtu , itu masuknya kemnh ya ?
Form kontak di submit -> Masuk ke variabel $_POST -> dari variabel $_POST diolah masuk ke database…
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:
di halaman_2.php, tangkap $_POST nya:
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 🙂
Biasanya pakai ajax mas, gunakan event keyup. Ketika karakter selesai diketik, kirim request ke page tertentu, hasilnya ditampilkan di kolom nama dan alamat
Terimakasih ka…, sangat membantu…,
Sama sama mas
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.
Harus pakai javascript mas atau jQuery
Kok rusak kodenya
Rusak gimana ya mas?
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
Salam kenal mas….
Tinggal dijadikan index di $_GET atau $_POST nya mas, misal
$jenis_barang = $_POST[‘dd_jenisbarang’];
atau
$jenis_barang = $_GET[‘dd_jenisbarang’];
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:
Terima kasih infonya. Membantu sekali
Sama sama…
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:
Mas array itu buat apa ya, maaf pemula
Array merupakan tipe data mas, bentuknya pair key dan value. Karena kemudahan pengolahan datanya, bentuk ini sering digunakan di dunia pemrograman
Misi Mas, mau nanya kalau hasil output formnya mau diletakkan di paragraf tertentu seperti javascript kalau pake innerHTML gimana yah??
Tinggal di echo di lokasi paragraf yang diinginkan mas