Dalam sebuah aplikasi web, terkadang seorang developer diharuskan untuk membuat manipulasi interaksi data dengan menggunakan Javascript maupun Jquery. Bagi seorang developer yang berkecimpung di dunia PHP, menyisipkan sebuah variabel dari bahasa pemrograman PHP ke Javascript adalah hal penting agar data yang diolah terlihat dinamis.
Meskipun memiliki karakteristik dan nenek moyang yang berbeda, PHP dan Javascript tidak dipungkiri lagi memang dibutuhkan saat pembuatan aplikasi web. Javascript seakan tidak terlepas dari bahasa pemrograman HTML dan HTML juga sering bersatu padu bersama PHP.
Kasus
Pada tutorial kali ini, saya akan membuat sebuah aplikasi Javascript sederhana berupa countdown timer per detik. Kita dapat melakukan input berapa total detik yang akan dihitung oleh countdown tersebut melalui form php sederhana menggunakan method post.
Untuk melakukan converting variabel post PHP ke dalam variabel Javascript, penulis menggunakan fungsi json_encode. Berikut adalah contoh fungsinya :
<?php echo json_encode($variable); ?>
Tutorial
Membuat halaman index berisi Form
Membuat halaman index berisi FormHalaman index.php akan kita isi dengan form dengan metode post. Penulis akan membuat satu input dan beberapa kode javascript untuk memvalidari nilai input-an berupa number. Berikut adalah script lengkap form input index.php :
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>PHP to Javascript</title>
<meta name="description" content="PHP to Javascript by Mkhuda">
<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300" rel="stylesheet" type="text/css">
<link href="style.css" type="tex/css" rel="stylesheet" media="all">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var specialKeys = new Array();
specialKeys.push(8); //Backspace
$(function () {
$(".input").bind("keypress", function (e) {
var keyCode = e.which ? e.which : e.keyCode
var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
$("label.validate").css("display", ret ? "none" : "inline");
return ret;
});
$(".input").bind("paste", function (e) {
return false;
});
$(".input").bind("drop", function (e) {
return false;
});
});
</script>
</head>
<body>
<div id="form">
<form method="post" action="js.php" class="form-horizontal">
<label class="detik">Masukkan Detik Angka</label><br>
<input class="input" type="text" name="detik" placeholder="Masukkan Detik Angka"><br>
<label class="validate" style="display: none;">Please input only Numbers</label><br>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
</div>
</body>
</html>
Penjelasan :
- Script yang terletak di head berfungsi untuk memvalidasi input form agar tetap bertipe numbering. Jika user mengetik dengan kombinasi huruf, label class validate akan tampil.
- Form action menuju js.php, dengan form name=detik.
Membuat js.php
Membuat js.phpDi dalam method form action kita telah memanggil js.php. Oleh karena itu, kita akan membuat file js.php yang berisi action sekaligus backend dari sistem countdown timer. Berikut adalah script js.php :
<?php
$post = $_POST['detik'];
if (isset($post)) {
$detik = strval($post);
} else {
header('location: index.php');
exit;
}
?>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>PHP to Javascript</title>
<meta name="description" content="PHP to Javascript by Mkhuda">
<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300" rel="stylesheet" type="text/css">
<link href="style.css" type="tex/css" rel="stylesheet" media="all">
<script type="text/javascript">
var count= <?php echo json_encode($detik); ?>;
var counter=setInterval(timer, 1000); //1000 will run it every 1 second
function timer()
{
count=count-1;
if (count <= 0)
{
clearInterval(counter);
document.getElementById("timer").innerHTML="Completed";
return;
}
document.getElementById("timer").innerHTML=count + " secs";
}
</script>
</head>
<body>
<div id="form">
<h3>PHP to Javascript</h3>
<div id="timer"></div>
</div>
</body>
</html>
Penjelasan :
- Baris nomor 1 9 adalah fungsi untuk mendapatkan nilai dari form
- Baris nomor 19 adalah fungsi untuk membuat variabel javascript bernama count yang diambil dari variabel $detik (php).
- Baris nomor 17 36 merupakan script utama untuk membuat countdown
Jika script sudah ditulis semua, silahkan uji coba melalui localhost. Pastikan anda memasukkan nilai di dalam form berupa number. Selamat mencoba ! Caaooo. 
