Jom Belajar Membina Borang Dengan Php !!! (Genius Corner Siri 24)

Tajuk: Membina borang dengan Php

Genius Corner Siri 24

Oleh: Fariz Gaskin

 

Salam ceria buat semua pembaca budiman. Kita bertemu kembali di dalam ruangan Genius Corner kali ini. Pada minggu ini, kita akan mempelajari latihan Php bahagian ke-enam. Kali ini, kita akan belajar bagaimana membina dan menguruskan maklumat di dalam borang.

 

Di dalam artikel Genius Corner siri ke-20, kita telah pelajari konsep Superglobals di dalam Php dan kaedah menggunakannya di dalam sesebuah borang. Latihan minggu ini merupakan kesinambungan artikel tersebut, dan kita akan pelajari teknik lengkap menentusahkan data dengan kaedah validasi.

 

Tanpa membuang masa, mari kita mulakan latihan kali ini.

 

Latihan

 

Langkah 1: Layari lama web http://phpfiddle.org dan klik butang Code-Space

 

Langkah 2: Masukkan kod berikut di ruangan yang disediakan

 

<!DOCTYPE HTML>  

<html>

<head>

<style>

.error {color: #FF0000;}

</style>

</head>

<body>  

<?php

// define variables and set to empty values

$nameErr = $emailErr = $genderErr = $websiteErr = “”;

$name = $email = $gender = $comment = $website = “”;

if ($_SERVER[“REQUEST_METHOD”] == “POST”) {

 if (empty($_POST[“name”])) {

   $nameErr = “Name is required”;

 } else {

   $name = test_input($_POST[“name”]);

   // check if name only contains letters and whitespace

   if (!preg_match(“/^[a-zA-Z ]*$/”,$name)) {

     $nameErr = “Only letters and white space allowed”;

   }

 }

 

 if (empty($_POST[“email”])) {

   $emailErr = “Email is required”;

 } else {

   $email = test_input($_POST[“email”]);

   // check if e-mail address is well-formed

   if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {

     $emailErr = “Invalid email format”;

   }

 }

   

 if (empty($_POST[“website”])) {

   $website = “”;

 } else {

   $website = test_input($_POST[“website”]);

   // check if URL address syntax is valid

   if (!preg_match(“/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i”,$website)) {

     $websiteErr = “Invalid URL”;

   }

 }

 if (empty($_POST[“comment”])) {

   $comment = “”;

 } else {

   $comment = test_input($_POST[“comment”]);

 }

 if (empty($_POST[“gender”])) {

   $genderErr = “Gender is required”;

 } else {

   $gender = test_input($_POST[“gender”]);

 }

}

function test_input($data) {

 $data = trim($data);

 $data = stripslashes($data);

 $data = htmlspecialchars($data);

 return $data;

}

?>

<h2>PHP Form Validation Example</h2>

<p><span class=”error”>* required field.</span></p>

<form method=”post” action=”<?php echo htmlspecialchars($_SERVER[“PHP_SELF”]);?>“>  

 Name: <input type=”text” name=”name”>

 <span class=”error”>* <?php echo $nameErr;?></span>

 <br><br>

 E-mail: <input type=”text” name=”email”>

 <span class=”error”>* <?php echo $emailErr;?></span>

 <br><br>

 Website: <input type=”text” name=”website”>

 <span class=”error”><?php echo $websiteErr;?></span>

 <br><br>

 Comment: <textarea name=”comment” rows=”5″ cols=”40″></textarea>

 <br><br>

 Gender:

 <input type=”radio” name=”gender” value=”female”>Female

 <input type=”radio” name=”gender” value=”male”>Male

 <span class=”error”>* <?php echo $genderErr;?></span>

 <br><br>

 <input type=”submit” name=”submit” value=”Submit”>  

</form>

<?php

echo “<h2>Your Input:</h2>”;

echo $name;

echo “<br>”;

echo $email;

echo “<br>”;

echo $website;

echo “<br>”;

echo $comment;

echo “<br>”;

echo $gender;

?>

</body>

</html>

Langkah 3: Klik butang Run untuk melihat hasil seperti berikut

 

Semakan

 

Melalui latihan tadi, kita telah menghasilkan sebuah borang maklumat peribadi yang memerlukan pengunjung mengisi ruangan kosong yang disediakan dengan nama penuh, alamat email, alamat laman web, komen dan jantina.

 

Apabila butang submit ditekan, maklumat tadi dihantar kembali kepada fail yang sama melalui arahan $_SERVER[‘PHP_SELF’] di dalam tag <form>. Apabila maklumat diterima, kod aturcara $_SERVER[“REQUEST_METHOD”] digunakan bagi mengenalpasti samada maklumat diterima melalui $_POST atau tidak melalui syarat If.

 

Jika benar, kod syarat If diguna lagi untuk menyemak setiap satu kotak input samada ianya dibiar kosong atau tidak. Jika tidak kosong, syarat If pertama diguna bagi menentukan samada ruang nama hanya diisi menggunakan abjad dan ruang kosong sahaja.

 

Syarat If kedua dan ketiga pula diguna bagi menentukan samada input alamat email dan alamat laman web diisi dengan penuh dan sempurna. Akhir sekali, fungsi test_input() diguna bagi membuang aksara space yang terdapat di awal dan hujung input sekiranya pengguna tertekan space bar secara tidak sengaja sebelum dan selepas memasukkan data.

Pelajar SK Bandar Baru Sentul sedang mengikuti tuisyen Scratch TMK.

 

Soalan

 

Sebelum ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan. Sila ubahsuai kod aturcara tadi supaya:

 

  1. Tambahkan dua lagi ruangan input untuk umur dan zodiak
  2. Ubah kod aturcara semakan dari ‘if’ kepada ‘switch’
  3. Masukkan arahan ‘required’ kepada semua ruangan input

 

Jika anda mempunyai sebarang pertanyaan atau cadangan, sila emailkan kepada farizgaskin@gmail.com dan kami akan cuba jawab sepantas mungkin. Sehingga bertemu lagi dalam ruangan yang sama minggu hadapan, selamat mencuba!

 

Leave a Reply

Your email address will not be published. Required fields are marked *