Cara memanggil variabel javascript di php

Mungkin kita pernah mengembangkan aplikasi berbasis web yang membutuhkan kita untuk mengirimkan variabel php (server side) ke JavaScript (Client side). Inilah beberapa trik untuk mengirimkan variabel php ke JavaScript.

Menggunakan XMLHttpRequest.

Ini adalah teknik yang paling rumit diantara 3 teknik yang dituliskan disini. Teknik inilah yang digunakan untuk melakukan AJAX call. Teknik juga dapat dilakukan jika anda menginginkan variabel dari aplikasi yang dihost pada server lain. XMLHttpRequest (XHR) dapat digunakan untuk melakukan permintaan ke webserver melalui http, dan mengembalikannya ke script. Secara sederhana, langkah – langkah melakukan panggilan XMLHttpRequest (XHR) adalah:

Menciptakan dan menginisialisasi Obyek XMLHttpRequest.
Mengakses webserver dengan menggunakan obyek XMLHttpRequest.
Menerima hasil dari permintaan tersebut ke variabel di JavaScript.

Mau mencoba? baik.. berikut contoh penggunaan teknik ini.

Buatlah file php seperti ini, lalu letakkan di direktori server anda dengan nama var.php

<?php
$var = "Hello World!";
echo $var;
?>

Cobalah akses file tersebut, dengan mengetikkan url dari file tersebut. Semisal http://localhost/var.php jika benar maka akan muncul tulisan Hello World! di browser anda. Teks inilah yang akan di kirimkan ke script client side yang anda tuliskan nantinya.

Setelah membuat script/program pada sisi server. Sekarang mari kita buat file pada sisi client. Buatlah file seperti dibawah ini, lalu letakkan di server.

<html>
<head>
<title>Contoh Penggunaan XMLHttpRequest</title>
<script type="text/javascript">
			//fungsi untuk membuat obyek XMLHttpRequest




 function buatXMLHttpRequest() {
 try
 { return new XMLHttpRequest(); }
 catch(e) {};
 try
 { return new ActiveXObject("Msxml2.XMLHTTP"); }
 catch (e) {};
 alert("Browser anda tidak mendukung XMLHttpRequest");
 return null;
 }
 //fungsi untuk menerima respon XMLHttpRequest dan mengoutputkannya
 function responAlert() {




 //jika permintaan ke server gagal, maka hentikan script disini
 if (XHR.readyState != 4)  { return; }
 //masukkan nilai yang didapatkan dari respon ke variabel javascript
 variabelJS = XHR.responseText;
 //outputkan sebagai alert
 alert(variabelJS);
 }
 //langkah langkah ketika tombol ditekan
 function tombol_klik() {
 //buat obyek XMLHttpRequest
 var XHR = buatXMLHttpRequest();
 //lakukan panggilan ke server




 XHR.open("GET", "http://localhost/var.php", true);
 //panggil fungsi responAlert pada event onreadystatechange
 XHR.onreadystatechange = responAlert;
 XHR.send(null);
 }
 var variabelJS;
</script>
</head>
<body>
 Contoh penggunaan XMLHttpRequest. Klik tombol dibawah ini untuk melakukan panggilan ke server.
<br />
<input type="button" value="Klik" onclick="tombol_klik()" />




</body>
</html>

Membuat JavaScript Yang Dinamis

File JavaScript pada dasarnya adalah sebuah file text biasa (plain text) dan walaupun biasa diasosiasikan dengan ekstensi .js sebenarnya kita dapat menyertakan file JavaScript dengan ekstensi apapun asal dituliskan tipenya dalam tag html. Oleh karena itu, sebenarnya file php pun dapat disertakan, tetapi tentu saja file php yang diletakkan di server, dan kemudian diakses melalui browser akan menghasilkan output olahan server tersebut (html saja tanpa tag php). Mau mencoba?

Buat file php bernama js.php dan letakkan di server anda. File tersebut berisi script

<?php

 $var = "Hello World";

?>

var variabelJS = '<?php echo $var ?>';

function alertVarJS()

 alert(variabelJS);

};

Sertakan file tersebut ke script HTML anda untuk memasukkan variabel php tersebut ke script client side anda seperti ini

<html>

 <head>

 <title>Contoh Penggunaan JavaScript Dinamis</title>

 <script type="text/javascript" src="http://localhost/js.php"></script>

 </head>

 <body>

 Contoh penggunaan JavaScript Dinamis. Klik tombol dibawah ini untuk menampilkan variabel PHP.

 <br />

 <input type="button" value="Klik" onclick="alertVarJS()" />

 </body>

</html>

Tuliskan variabel tersebut langsung pada file yang dimaksud

Inilah cara paling simpel. Kita semua tahu, tag php dapat diletakkan di semua bagian file php termasuk diantara tag <script></script>. Jadi kenapa tidak langsung saja dituliskan disitu seperti ini

<?php
$variabelPHP = 'Hello World!';
?>
<html>
	<head>
		<title>Variabel PHP ke JavaScript</title>
		<script type="text/javascript">
			var variabelJS = '<?php echo $variabelPHP ?>';
			function alertVarJS()
			{
				alert(variabelJS);
			};
		</script>
	</head>
	<body>
		Klik tombol dibawah ini untuk menampilkan variabel PHP.
		<br />
		<input type="button" value="Klik" onclick="alertVarJS()" />
	</body>
</html>

Semua contoh dapat didownload disini

Ketiga teknik di atas juga dapat diterapkan di teknologi selain PHP, seperti ASPX, Coldfusion, atau CGI