Muhammad K Huda in PHPWeb

Menambahkan Variabel PHP ke Dalam Kode Javascript

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.

Download Sources

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

Halaman 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

Di 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>