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:- <form name="form1" id="form1" action="" method="post" />
- <dl>
- <dt>First Name</dt>
- <dd><input name="firstName" id="firstName" type="text" /></dd>
- <dt>Last Name</dt>
- <dd><input name="lastName" id="lastName" type="text" /></dd>
- <dt>Email</dt>
- <dd><input name="email" id="email" type="text" /></dd>
- <dt>Phone</dt>
- <dd><input name="phone" id="phone" type="text" /></dd>
- <dt></dt>
- <dd><input type="button" name="save" id="save" value="Save" onclick="saveForm(); return false;" /></dd>
- </dl>
- </form>
- <script type="text/javascript">
- function saveForm(){
- if(document.getElementById('firstName').value == ''){
- alert('First Name tidak boleh kosong');
- document.getElementById('firstName').focus();
- return false;
- }
- if(document.getElementById('lastName').value == ''){
- alert('Last Name tidak boleh kosong');
- document.getElementById('lastName').focus();
- return false;
- }
- if(document.getElementById('email').value == ''){
- alert('Email tidak boleh kosong');
- document.getElementById('email').focus();
- return false;
- }
- if(document.getElementById('phone').value == ''){
- alert('Phone tidak boleh kosong');
- document.getElementById('phone').focus();
- return false;
- }
- document.getElementById('form1').submit();
- }
- </script>
Javascript juga bisa digunakan untuk memvalidasi hal hal yang lain seperti berikut.
Validasi Email dengan Javascript
- function validasiEmail(email){
- var validEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; //regex untuk cek email
- if(validEmail.test(email)){
- return true;
- }
- return false;
- }
- alert(validasiEmail('email@example.com')); //hasil true
- alert(validasiEmail('bukanemail')); //hasil false
Validasi Kode Pos dengan Javascript
- function validasiPostalKode(postalCode){
- var validPostalCode = /^\d{5}([\-]\d{4})?$/; //regex untuk cek kode pos
- if(validPostalCode.test(postalCode)){
- return true;
- }
- return false;
- }
- alert(validasiPostalKode('80361')); //hasil true
- alert(validasiPostalKode('80361-1234')); //hasil true
- alert(validasiPostalKode('salah')); //hasil false
- 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:
atau
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:
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:
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:
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
Script 2
Script 3
Apabila Anda akan membuat script PHP, maka script tersebut harus ditulis di antara tanda berikut ini:
1.<?php2..3..4..5..6..7.?>atau
1.<?2..3..4..5..6..7.?>Contoh script PHP sederhana:
1.<?php2.echo "Hello World!!";3.?>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.<html>02.<head>03.<title>Halaman PHP pertamaku</title>04.</head>05.<body>06.<?php07.echo "Hello World!";08.?>09.</body>10.</html>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.<html>02.<head>03.<title>Halaman PHP pertamaku</title>04.</head>05.<body>06.<?php07.echo "Hello World! ";08.echo "Hello World! ";09.echo "Hello World! ";10.echo "Hello World! ";11.echo "Hello World! ";12.?>13.</body>14.</html>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.<html>02.<head>03.<title>Halaman PHP pertamaku</title>04.</head>05.<body>06.<?php07.echo "Hello World! ";08.echo "Hello World! ";09.?>10.</body>11.</html>01.<html>02.<head>03.<title>Halaman PHP pertamaku</title>04.</head>05.<body>06.<?php07.echo "Hello World! "; echo "Hello World! ";08.?>09.</body>10.</html>01.<html>02.<head>03.<title>Halaman PHP pertamaku</title>04.</head>05.<body>06.<?php07.echo "Hello World! ";08. 09.echo "Hello World! ";10.?>11.</body>12.</html>
