Tutorial Form PHP Part 7: Cara Mengirim

Variabel (Pesan) Antar Halaman PHP

06 Jul 14 | Andre | Tutorial PHP | 76 Comments
Dari cara penanganan objek form dengan method=GET, kita dapat melihat
bahwa HTML mengirimkan ’isi’ form melalui alamat URL. Cara pengiriman seperti ini bisa
kita manfaatkan sebagai sarana mengirim pesan (dalam bentuk variabel) antar halaman PHP.
Jika ditambah dengan fungsi header(), kita bisa memanfaatkan fitur ini untuk menampilkan
pesan kesalahan dari sebuah form.

Cara Mengirim Variabel Antar Halaman PHP

Dalam PHP terdapat beberapa cara untuk mengirim variabel antar halaman. Salah satunya
adalah dengan memanfaatkan cara pengiriman form dengan method=GET. Jika kita
mengirim form dengan metode GET, maka hasil dari form akan ditambahkan di dalam
menggunakan variabel superglobal $_GET.
Sebagai contoh, jika di dalam form terdapat kotak input dengan
atribut name=user_name yang diisi dengan ’duniailkom’, maka ketika dikirim untuk
diproses ke halaman proses.php, di dalam URL akan menjadi:
proses.php?user_name=duniailkom
dan didalam halaman proses.php, variabel $_GET[’user_name’] akan berisi ’duniailkom’.
Dengan cara ini kita bisa mengirim variabel dari sebuah halaman ke halaman lain. Misalkan
kita membuat sebuah kondisi logika dengan PHP, dan jika logikanya salah maka tampilkan
sebuah link yang menyatakan bahwa alamat tidak lengkap. Pengiriman pesan ini bisa ditulis
sebagai berikut:

proses.php?pesan=alamat+tidak+lengkap.
Ketika user men-klik link tersebut, pada halaman proses.php akan memiliki sebuah
variabel $_GET[’pesan’] yang berisi: ’alamat tidak lengkap’.
Kita bisa memanfaatkan ini untuk berbagai hal, dan dalam tutorial kali ini kita akan
menggunakan cara ini untuk menampilkan pesan kesalahan dari form.

Untuk dapat mengirimkan variabel melalui URL, terdapat beberapa aturan penggunaan
karakter. Berikut adalah contoh hasil pengiriman dari sebuah halaman:

proses.php?nama=dunia_ilkom&email=duniailkom@gmail.com&pesan=welcome
perhatikan bahwa tanda ’?’ digunakan untuk mengawali pengiriman variabel,
tanda ’=’ digunakan sebagai pengisi nilai variabel, tanda ’&’ untuk memisah’kan antara
variabel yang satu dengan yang lain, dan tanda ’+’ sebagai pengganti karakter ’spasi’.

Redirect halaman dengan fungsi header(Location:)

Fungsi header() di dalam PHP digunakan untuk memproses HTTP header.
Fungsi header() memiliki banyak fitur, namun yang akan kita manfaatkan adalah fitur untuk
mengirim user ke halaman lain atau dikenal dengan istilah: redirect.
Untuk ’mengirim’ user ke sebuah halaman, kita
menggunakan Location:halaman.html sebagai argumen fungsi header(). Misalkan kita
ingin mengirim user ke halaman pendaftaran.html pada situs duniailkom.com, maka
penulisan fungsi header() adalah sebagai berikut:
header("Location: https://www.duniailkom.com/pendaftaran.html")
Halaman yang dituju tidak harus berupa halaman HTML, tetapi juga halaman PHP, atau
bahkan file multimedia seperti gambar. Fitur ini akan kita manfaatkan untuk menampilkan
pesan kesalahan form dalam PHP.

Cara Menampilkan Pesan Kesalahan Form

Dalam tutorial sebelumnya tentang Validasi Form untuk Mencegah Cross-site Scripting dan
HTML injection, kita telah membuat proses validasi form dan menampilkan pesan kesalahan
form berdasarkan kondisi yang terjadi. Namun pesan kesalahan tersebut hanya ditampilkan
pada halaman proses.php. Jika user ingin mengubah isian form, ia terpaksa kembali
kehalaman form.html untuk memperbaiki kesalahan form tersebut dengan cara mengetik
manual di web browser.
Salah satu fitur pengisian form yang umum digunakan adalah ketika isian form ditemukan
kesalahan, maka user akan dikembalikan ke halaman awal form, beserta pesan kesalahan.
Untuk menghasilkan fitur seperti ini, kita akan memanfaatkan fungsi PHP: header().
Kembali menggunakan halaman form.html dan proses.php yang kita gunakan dalam
tutorial-tutorial sebelumnya, kali ini saya akan memodifikasi halaman proses.php agar bisa
memanfaatkan fungsi header(). Berikut adalah modifikasi file proses.php:
1 <?php
2 if (isset($_GET['nama']) AND isset($_GET['email']))
3 {
$nama=$_GET['nama'];
4 $email=$_GET['email'];
5 $nama=htmlspecialchars($nama);
6 $email=strip_tags($email);
7 }
else
8
{
9 header("Location:form.php?error=variabel_belum_diset");
10 }
11
12 if(empty($nama))
13 {
header("Location:form.php?error=nama_kosong");
14 }
15 else
16 {
17 if (is_numeric($nama))
18 {
header("Location:form.php?error=nama_harus_huruf");
19 }
20 else
21 {
22 echo "Nama: $nama <br /> Email: $email";
23 }
24 }
?>
25
26
27
28
29
Dari kode proses.php kita sebelumnya, saya hanya mengubah bagian error menggunakan
fungsi header(). Namun perhatikan bahwa saya mengirimkan variabel error kepada
halaman form.php, pesan inilah yang akan diproses pada halaman form.php.
Untuk halaman form.html, saya akan mengubah nama file menjadi form.php. Perubahan ini
diperlukan karena pada halaman form.html memerlukan proses PHP untuk menangani
variabel error yang dikirim dari halaman proses.php.
Berikut adalah kode dari halaman form.php:
<?php
1 //ambil nilai variabel error
2 if (isset($_GET['error']))
3 {
4 $error=$_GET['error'];
5 }
else
6 {
7 $error="";
8 }
9
10 //siapkan pesan kesalahan
$pesan="";
11
if ($error=="variabel_belum_diset")
12 {
13 $pesan="<h3>Maaf, anda harus mengakses halaman ini dari form.php</h3>";
14 }
15 if ($error=="nama_kosong")
{
16 $pesan="<h3>Maaf, anda harus mengisi nama</h3>";
17 }
18 if ($error=="nama_harus_huruf")
19 {
20 $pesan="<h3>Maaf, nama harus berupa huruf</h3>";
}
21 ?>
22
23 <!DOCTYPE html>
24 <head>
25 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Belajar Form PHP</title>
26 </head>
27 <body>
28 <h2>Tutorial Belajar Form HTML - PHP </h2>
29 <?php
30 echo $pesan;
?>
31 <form action="proses.php" method="get">
32 Nama: <input type="text" name="nama" />
33 <br />
34 E-Mail: <input type="text" name="email" />
<br />
35
<input type="submit" value="Proses Data" >
36 </form>
37 </body>
38 </html>
39
40
41
42
43
44
45
46
Pada halaman form.php saya menambahkan beberapa kode PHP di awal halaman. Kode
PHP ini berfungsi untuk menangani variabel error yang dikirimkan dari halaman proses.php.
Setelah memindahkan variabel $_GET[‘error’] ke dalam variabel $error agar mudah
diakses, selanjutnya saya membuat beberapa logika IF untuk memeriksa pesan error, dan
memberikan ‘pesan kesalahan’ yang ingin ditampilkan kedalam variabel $pesan.
Variabel $pesan ini kemudian akan disisipkan di awal tag form.
Untuk mengujinya, silahkan anda mencoba form.php tersebut dan klik tombol ‘Proses
Data’ tanpa memberikan input apa-apa di dalam form, dan sekarang pesan kesalahan akan
tampil di halaman form.php.

Anda bisa mengeksplorasi penggunaan fungsi header() ini lebih jauh. Misalkan jika isian
form telah sesuai, maka anda bisa meneruskan user ke halaman lain, seperti sukses.php,
sehingga pengaturan kode PHP lebih rapi dimana halaman proses.php murni digunakan
untuk penanganan proses form. Dari halaman proses.php ini kita bisa ‘membawa‘ user ke
halaman lain yang khusus menangani hal tersebut.
Penanganan cara kesalahan form seperti ini membuat form menjadi lebih user friendly. Jika
anda memahami CSS, biasanya pesan kesalahan ini ditampilkan dengan style yang berbeda
dari judul form agar lebih ‘pas’, namun dalam tutorial ini anda setidaknya telah mengetahui
trik untuk menampilkan pesan kesalahan form dengan PHP. Silahkan berekplorasi dan
menambahkan objek-objek form lain sebagai bahan latihan

Membuat Jendela Pop Up

Sederhana Menggunakan HTML Dan
CSS
26/04/2014 Faizal Rafik 68146 Website

Dalam tutorial saya kali ini saya akan mengajarkan kepada teman-teman bagaimana
caranya membuat Jendela Pop Up menggunakan HTML dan CSS. Jendela Pop Up
adalah jendela yang muncul secara otomatis dan tiba-tiba di depan layar aplikasi kita
atau saat kita membuka website seseorang, Fungsi jendela Pop Up sendiri adalah
untuk menyampaikan pesen yang berada di website kita atau website seseorang
sebelum kita membuka halaman-halaman lain yang ada di website tersebut.
Biasanya jendela Pop Up di buat dengan bantuan Plugin jQuery , tetapi semakin
berkembangnya teknologi CSS jendela POP Up juga bisa di buat menggunakan
CSS. Baiklah kita langsung saja praktek kan ya teman-teman.

Pertama buatlah file HTML nya seperti di bawah ini :

Lalu teman-teman save dan lihat hasilnya. Masih belum jadi apa-apa kan teman-
teman. Sekarang kita buat CSS nya seperti di bawah ini.

Pertama kita buat CSS nya untuk Button Pesannya seperti di bawah ini :

Berikutnya CSS untuk tampilan jendela Pop Up nya di bawah ini :

Bisa di lihat CSS yang di atas terdapat Property CSS visibility: hidden; fungsinya
adalah untuk menyembunyikan jendela Pop Up nya. Setelah itu kita buat CSS untuk
Button Close nya.
Berikut ini CSS untuk Button Close nya :

Nah setelah semua CSS nya di buat tambahkan CSS di bawah ini untuk
memunculkan jendela Pop Up nya saat kita klik Button Pesan :

Fungsi Property CSS visibility: visible; di atas adalah untuk memunculkan jendela
Pop Up saat kita klik Button Pesannya.

Sudah jadi deh jendela Pop Up nya mudahkan teman-teman. Sekian dulu tutorial
dari saya selamat mencoba. Terima Kasih....