Minggu, 28 Juli 2013

Tutorial Javascript & PHP



Validasi Javascript

Ada dua tipe validasi form, validasi client side dan validasi server side. Validasi server side telah dibahas di tutorial Validasi Form Dengan PHP. Validasi client side menggunakan javascript akan dijelaskan di tutorial ini. Di tutorial sebelumnya "Validasi Form dengan PHP" sudah disebutkan alasan validasi client side tidak dianjurkan. Namun validasi client side membuat website lebih user friendly. User dapat langsung mengetahui jika ada kesalahan pada input data, tanpa harus menunggu load halaman php untuk validasi form. Artinya website tidak perlu menload halaman yang sama berkali kali saat tejadi kesalahan input data. Bisa juga dikatakan proses input data akan menjadi lebih cepat.
Perlu diingat jika menggunakan validasi client side, data masih perlu divalidasi menggunakan validasi server side untuk memastikan kebenaran data.

Validasi Form dengan Javascript

Untuk mengikuti tutorial ini anda diharapkan memiliki pengetahuan tetang javascript dasar. Untuk mem-validasi sebuah form, agar tidak ada data yang kosong maka bisa digunakan script di bawah:


  1. <form name="form1" id="form1" action="" method="post" />  
  2. <dl>  
  3.   <dt>First Name</dt>  
  4.   <dd><input name="firstName" id="firstName" type="text" /></dd>  
  5.   <dt>Last Name</dt>  
  6.   <dd><input name="lastName" id="lastName" type="text" /></dd>  
  7.   <dt>Email</dt>  
  8.   <dd><input name="email" id="email" type="text" /></dd>  
  9.   <dt>Phone</dt>  
  10.   <dd><input name="phone" id="phone" type="text" /></dd>  
  11.   <dt></dt>  
  12.   <dd><input type="button" name="save" id="save" value="Save" onclick="saveForm(); return false;" /></dd>  
  13. </dl>  
  14. </form>  
  15.   
  16. <script type="text/javascript">  
  17.   function saveForm(){  
  18.     if(document.getElementById('firstName').value == ''){  
  19.       alert('First Name tidak boleh kosong');  
  20.       document.getElementById('firstName').focus();  
  21.       return false;  
  22.     }  
  23.     if(document.getElementById('lastName').value == ''){  
  24.       alert('Last Name tidak boleh kosong');  
  25.       document.getElementById('lastName').focus();  
  26.       return false;  
  27.     }  
  28.     if(document.getElementById('email').value == ''){  
  29.       alert('Email tidak boleh kosong');  
  30.       document.getElementById('email').focus();  
  31.       return false;  
  32.     }  
  33.     if(document.getElementById('phone').value == ''){  
  34.       alert('Phone tidak boleh kosong');  
  35.       document.getElementById('phone').focus();  
  36.       return false;  
  37.     }  
  38.     document.getElementById('form1').submit();  
  39.   }  
  40. </script>  
Dari baris 1 sampai baris 14 adalah untuk membuat html form. Kemudian di baris16 ditambahkan tag html "<script>". Pada line selanjutnya membuat function saveForm() untuk melakukan validasi. Function saveForm() akan dipanggil pada saat user mengklik tombol save. Sehingga di baris 12 pada button save ditambakan attribute onlick="saveForm(); return false;". Di baris 18 anda akan melihat "if(document.getElementById('firstName').value == '')", baris ini berarti mengambil nilai yang diinputkan pada element dengan id="firstName" dan mengeceknya apakah kosong atau tidak. Jika kosong maka akan ditampilkan alert message (baris 19). Di baris 20 artinya memindahkan focus kursor ke element dengan id="firstName".
Javascript juga bisa digunakan untuk memvalidasi hal hal yang lain seperti berikut.

Validasi Email dengan Javascript

  1. function validasiEmail(email){  
  2.   var validEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; //regex untuk cek email  
  3.   if(validEmail.test(email)){  
  4.     return true;  
  5.   }  
  6.   return false;  
  7. }  
  8. alert(validasiEmail('email@example.com')); //hasil true  
  9. alert(validasiEmail('bukanemail')); //hasil false  

Validasi Kode Pos dengan Javascript

  1. function validasiPostalKode(postalCode){  
  2.   var validPostalCode = /^\d{5}([\-]\d{4})?$/; //regex untuk cek kode pos  
  3.   if(validPostalCode.test(postalCode)){  
  4.     return true;  
  5.   }  
  6.   return false;  
  7. }  
  8. alert(validasiPostalKode('80361')); //hasil true  
  9. alert(validasiPostalKode('80361-1234')); //hasil true  
  10. alert(validasiPostalKode('salah')); //hasil false  
  11. alert(validasiPostalKode('1234')); //hasil false  

PHP Tutorial

Pada artikel ini akan dipaparkan mengenai beberapa aturan dalam penulisan script (sintaks) dalam PHP. Aturan tersebut meliputi cara menuliskan blok script PHP, menyimpan file script, penggunaan semicolon serta penggunaan spasi baris dalam script.

Apabila Anda akan membuat script PHP, maka script tersebut harus ditulis di antara tanda berikut ini:

1.&lt;?php
2..
3..
4..
5..
6..
7.?&gt;

atau

1.&lt;?
2..
3..
4..
5..
6..
7.?&gt;
Tanda <?php atau <? dinamakan tag pembuka dari script, sedangkan ?> dinamakan tag penutup. Kedua tanda itu mutlak harus ada karena berfungsi sebagai penanda bahwa script tersebut merupakan script PHP dan nantinya akan diproses oleh server.
Contoh script PHP sederhana:

1.&lt;?php
2.echo "Hello World!!";
3.?&gt;
Apabila Anda membuat script PHP dan berencana akan mendistribusikan ke pihak/orang lain, maka usahakan untuk menggunakan sintaks <?php … ?>. Hal ini dikarenakan untuk penggunaan kode yang menggunakan <? ?> terkadang tidak bisa dijalankan dalam server tertentu.
Menyimpan File PHP
Apabila Anda memiliki script PHP yang disisipkan dalam HTML dalam suatu file dan menginginkan web server dapat menjalankannya, maka file tersebut harus disimpan dalam ekstensi .php. Apabila Anda menyimpannya dengan ekstensi .html atau .htm, maka script PHP tersebut tidak akan diproses dan akan ditampilkan dalam web browser seperti apa adanya (berupa kode-kode).
Contoh:

01.&lt;html&gt;
02.&lt;head&gt;
03.&lt;title&gt;Halaman PHP pertamaku&lt;/title&gt;
04.&lt;/head&gt;
05.&lt;body&gt;
06.&lt;?php
07.echo "Hello World!";
08.?&gt;
09.&lt;/body&gt;
10.&lt;/html&gt;
Penggunaan Tanda Semicolon (;)
Apabila Anda perhatikan contoh sebelumnya, maka terdapat tanda titik koma (semicolon) pada akhir perintah echo. Tanda semicolon merupakan penanda akhir dari setiap statement PHP dan tanda ini harus ada.
Perhatikan contoh script PHP yang lain berikut ini:

01.&lt;html&gt;
02.&lt;head&gt;
03.&lt;title&gt;Halaman PHP pertamaku&lt;/title&gt;
04.&lt;/head&gt;
05.&lt;body&gt;
06.&lt;?php
07.echo "Hello World! ";
08.echo "Hello World! ";
09.echo "Hello World! ";
10.echo "Hello World! ";
11.echo "Hello World! ";
12.?&gt;
13.&lt;/body&gt;
14.&lt;/html&gt;

Perpindahan Spasi
Seperti halnya HTML, pergantian spasi dalam PHP tidak akan mempengaruhi tampilan hasilnya. Dengan kata lain, pergantian spasi akan diabaikan oleh PHP. Perhatikan contoh berikut ini. Pada contoh ini diberikan tiga bentuk penulisan kode PHP yang berbeda namun akan dihasilkan tampilan yang sama dalam web browser.
Script 1

01.&lt;html&gt;
02.&lt;head&gt;
03.&lt;title&gt;Halaman PHP pertamaku&lt;/title&gt;
04.&lt;/head&gt;
05.&lt;body&gt;
06.&lt;?php
07.echo "Hello World! ";
08.echo "Hello World! ";
09.?&gt;
10.&lt;/body&gt;
11.&lt;/html&gt;
Script 2

01.&lt;html&gt;
02.&lt;head&gt;
03.&lt;title&gt;Halaman PHP pertamaku&lt;/title&gt;
04.&lt;/head&gt;
05.&lt;body&gt;
06.&lt;?php
07.echo "Hello World! "; echo "Hello World! ";
08.?&gt;
09.&lt;/body&gt;
10.&lt;/html&gt;
Script 3

01.&lt;html&gt;
02.&lt;head&gt;
03.&lt;title&gt;Halaman PHP pertamaku&lt;/title&gt;
04.&lt;/head&gt;
05.&lt;body&gt;
06.&lt;?php
07.echo "Hello World! ";
08. 
09.echo "Hello World! ";
10.?&gt;
11.&lt;/body&gt;
12.&lt;/html&gt;

 
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)