Satu catatan lagi, biar gak hilang ilmunya. Pada catatan kali ini Donga ingin menguraikan sebuah kode javascript validasi. Hal ini menurut Donga dirasa penting, karena pada saat kita akan membangun sebuah Web, validasi ini sangat diperlukan, terutama saat kita akan melakukan "Login."
Baik kita langsung saja ke kodenya :
<!DOCTYPE html>
<html>
<body>
<h2>Javascript bisa melakukan validasi intput</h2>
<p>Silahkan masukkan nilai 1 sampai 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// mengambil nilai input dengan id="numb"
x = document.getElementById("numb").value;
// jika x is Not a Number (isNaN) atau kurang dari satu atau lebih besar dari 10
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Ohh... ternyata ini kode Form ya? heheh. Begitulah kira-kira. Jadi jika form ini diberi nilai 1 sampai 10 maka dia akan memberikan konfirmasi validasi seperti di bawah ini:Baik kita langsung saja ke kodenya :
<!DOCTYPE html>
<html>
<body>
<h2>Javascript bisa melakukan validasi intput</h2>
<p>Silahkan masukkan nilai 1 sampai 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// mengambil nilai input dengan id="numb"
x = document.getElementById("numb").value;
// jika x is Not a Number (isNaN) atau kurang dari satu atau lebih besar dari 10
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Kode ini donga dapatkan dari www.w3schools.com, dan sudah sedikit mengalami perubahan bahasa dari Inggris ke Indonesia, biar lebih mudah di mengerti. Jika Sobat Donga mau melihat bagaimana tampilan dari kode ini saat kita jalankan di browser, tinggal copy saja codenya, pastekan ke notepad atau notepad++,selanjutnya simpan dengan nama formvalidasi.php (bisa juga disimpan dalam bentuk html : formvalidasi.html) kemudian buka menggunakan web browser Mozilla Firefox atau Chrome. Kalau sobat tidak keliru, maka tampilannya akan seperti ini :
dan jika diberi nilai bukan berupa angka atau kurang dari 1 atau lebih dari 10 maka akan menunjukkan konfirmasi validasi yang berbeda. Silahkan perhatikan gambar dibawah ini.
Untuk memahami bagaimana kode di atas menjalankan tampilan browser seperti yang kita jelaskan tadi, mari kita urut satu persatu kodenya.
<input id="numb">
ini adalalah kode yang pertama yang perlu kita bahas, karena terkait dengan fungsi nantinya. Lho...Donga, kenapa gak dari kode yang paling atas? karena kode yang paling atas Donga anggap sudah mengerti, karena sifatnya hanya tampilan saja, tidak terkait dengan fungsi javascript secara langsung nantinya. Tapi Donga, menurut saya itu penting untuk dibahas..., Oke deh kalau memang perlu silahkan sobat lihat catatan sebelumnya Struktur HTML.
Kembali ke topik. Kode di atas adalah element "input" dengan nama "id" adalah "numb", tentunya sobat sekalian sudah tau kan, bahwa element ini berfungsi untuk meng-inputkan data. Baik kalau sudah tau. Pada kasus ini yang perlu kita perhatikan secara khusus pada element ini adalah nama "id" nya saja, karena nantinya akan digunakan pada fungsi javascript.
<button type="button" onclick="myFunction()">Submit</button>
Kode selanjutnya adalah element button, dengan type : "button" dan event : onClick. Event onClick ini nantinya yang akan mengeksekusi fungsi "myFunction()". Sedangkan Content/isi dari element button, yaitu "Submit" berfungsi sebagai tombol perintah dimulainya eksekusi fungsi.
<p id="demo"></p>
Element paragraf. Sama seperti halnya element input di atas, pada element paragaraf ini, yang perlu menjadi perhatian kita hanya pada nama "id" nya saja, karena akan di gunakan pada fungsi dan satu lagi yang perlu kita lihat pada element ini adalah content/isi dari elemen dikosongkan (tidak di isi), jadi secara otomatis, tidak akan ditampilkan di browser, sebelum adanya eksekusi fungsi.
<script>
Kode ini adalah tanda dimulainya javascript.
function myFunction()
Kode ini, menunjuk pada sebuah fungsi, ditandai dengan kode "function" nama dari fungsi tersebut adalah "myFungtion()". Untuk nama fungsi ini tentunya sobat bebas berkreasi, tapi pada catatan kali ini Donga menggunakan nama seperti terlihat di atas.
var x, text;
Pada contoh ini kita mendeklarasikan dua buah variable ditandai dengan kode "var", nama dari variable tersebut adalah "x" dan "text".
x = document.getElementById("numb").value;
Penjelasan dari variable "x" adalah seperti tertulis pada kode di atas. Maksud dari kode ini adalah nilai variable x, akan di ambil dari sebuah element dengan nama id="numb". Element yang mana Donga? Tentunya kita sudah tau, bahwa itu adalah element "input." Jadi nilai yang di masukkan ke dalam element input, itulah yang akan menjadi nilai dari variable x.
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
Nah... yang satu ini kita jelaskan secara berkelompok, karena merupakan satu kesatuan, yaitu logika "if", yang akan menghasilkan pernyataan "true" dan "false", pernyataan "true" pada kurung kurawal {} pertama {text = "Input not valid";} sedangkan pernyataan "false" pada kurung kurawal {} kedua { text = "Input OK"; }, wah...Donga, kok pernyataan "False" nya malah bernilai "Input OK"? bukankah "False" itu nilai yang "salah"? Betul juga ya...??? Tapi penjelasannya seperti ini, nilai "true" dan "false" itu ditentukan dari pernyataan pertama yang berada di dalam tanda kurung () yaitu (isNaN(x) || x < 1 || x > 10). Arti dari pernyataan ini adalah :
isNaN = Is Not a Number
isNaN(x) artinya adalah jika nilai dari variable "x" bukan sebuah nomor .
|| x < 1 artinya atau variable "x" memiliki nilai kurang dari 1
|| x > 10 artinya atau variable "x" memiliki nilai lebih dari 10
Berdasarkan pernyataan di atas, tentunya sekarang kita paham mengapa nilai dari variable “text=’Input not valid’ karena program pada saat diberi input diberi nilai selain angka atau kurang dari 1 atau lebih dari 10, maka nilai logika “if” akan bernilai Benar atau True.
Pada kode di atas, pertama kali program
akan membaca nilai input yang dimasukkan oleh pengguna (user) yang selanjutnya
akan menjadi nilai deri variable “x”, tapi nilai tersebut tidak akan berarti
apa-apa kalau tidak dibari perintah lanjutan. Perintah selanjutnya adalah “klik”
tombol “submit,” ketika tombol “submit di “klik” maka event onClick, akan
membawa nilai input menuju fungsi myFunction(), di dalam fungsi ini nilai input
tadi akan di ubah menjadi nilai variable “x” kemudian variable “x” ini akan di
proses melalui logika “if” untuk menghasilkan dua pernyataan “true” atau “false”.
Nilai dari logika “if” akan menjadi nilai dari variable “text” jika nilai
logika “if” bernilai “True” maka nilai variable text=’Input not valid’ sedangkan jika bernilai “False” maka nilai
variable text = "Input OK".
Tapi tunggu dulu. Proses program belum selesai, karena jika hanya sampai disini
saja, nilai konfirmasi validasi tidak akan muncul di laman Browser sobat. Jadi
untuk memunculkannya diperlukan kode terakhir, yaitu :
document.getElementById("demo").innerHTML
= text;
Kode inilah yang
menampilkan nilai dari variable “text” ke laman Browser. Bagaimana prosesnya? Setelah
nilai dari variable “text” didapatkan, maka kode di atas akan memerintahkan
agar content dari element paragraf yang tadinya kosong diubah menjadi nilai
variable “text” akhirnya muncullah “Input OK” atau “Input not valid”. Begitulah
ceritanya Sob, semoga bias dipahami.
Tidak ada komentar:
Tulis komentar