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
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
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
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.
Bisa coba pakai kondisional if mas, misal:
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 mas…
Terima kasih mas…
Agar submit data tidak hilang, di input value nya diberi nilai yang di submit mas, misal:
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;
?>
Maaf saya kurang paham pertanyaan nya mas
mantap banget bang, sangat membantu
Terima kasih mas
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
Error nya sudah kami perbaiki mas, bisa dicoba kembali di demo nya
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
Maksudnya seperti apa ya mas
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: