PHP & AJAX

Apa itu AJAX?

AJAX adalah singkatan dari Asinkronis JavaScript dan XML. AJAX adalah teknik baru untuk membuat aplikasi web yang lebih baik, lebih cepat, dan lebih interaktif dengan bantuan XML, HTML, CSS, dan Java Script.
Aplikasi web konvensional mengirimkan informasi ke dan dari server menggunakan permintaan sinkron. Ini berarti Anda mengisi formulir, tekan kirim, dan diarahkan ke halaman baru dengan informasi baru dari server.
Dengan AJAX saat submit ditekan, JavaScript akan membuat permintaan ke server, menginterpretasikan hasil dan memperbarui layar saat ini. Dalam arti yang paling murni, pengguna tidak akan pernah tahu bahwa ada sesuatu yang dikirim ke server.

Untuk belajar lengkap di AJAX, silakan lihat Tutorial AJAX.

Contoh PHP dan AJAX

Untuk menggambarkan dengan jelas betapa mudahnya mengakses informasi dari database menggunakan Ajax dan PHP, kita akan membuat kueri MySQL dengan cepat dan menampilkan hasilnya di "ajax.html". Tetapi sebelum kita melanjutkan, mari lakukan pekerjaan dasar. Buat tabel menggunakan perintah berikut.

NOTE - Kami menganggap Anda memiliki hak cukup untuk melakukan operasi MySQL berikut.

CREATE TABLE `ajax_example` (
   `name` varchar(50) NOT NULL,
   `age` int(11) NOT NULL,
   `sex` varchar(1) NOT NULL,
   `wpm` int(11) NOT NULL,
   PRIMARY KEY  (`name`)
)

Sekarang buang data berikut ke dalam tabel ini menggunakan pernyataan SQL berikut.

INSERT INTO `ajax_example` VALUES ('Jerry', 120, 'm', 20);
INSERT INTO `ajax_example` VALUES ('Regis', 75, 'm', 44);
INSERT INTO `ajax_example` VALUES ('Frank', 45, 'm', 87);
INSERT INTO `ajax_example` VALUES ('Jill', 22, 'f', 72);
INSERT INTO `ajax_example` VALUES ('Tracy', 27, 'f', 0);
INSERT INTO `ajax_example` VALUES ('Julie', 35, 'f', 90);

File HTML Sisi Klien

Sekarang mari kita memiliki file HTML sisi klien kita yaitu ajax.html dan itu akan memiliki kode berikut

<html>
   <body>
      
      <script language = "javascript" type = "text/javascript">
         <!--
            //Browser Support Code
            function ajaxFunction(){
               var ajaxRequest;  // The variable that makes Ajax possible!
               
               try {
                  // Opera 8.0+, Firefox, Safari
                  ajaxRequest = new XMLHttpRequest();
               }catch (e) {
                  // Internet Explorer Browsers
                  try {
                     ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
                  }catch (e) {
                     try{
                        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                     }catch (e){
                        // Something went wrong
                        alert("Your browser broke!");
                        return false;
                     }
                  }
               }
               
               // Create a function that will receive data 
               // sent from the server and will update
               // div section in the same page.
					
               ajaxRequest.onreadystatechange = function(){
                  if(ajaxRequest.readyState == 4){
                     var ajaxDisplay = document.getElementById('ajaxDiv');
                     ajaxDisplay.innerHTML = ajaxRequest.responseText;
                  }
               }
               
               // Now get the value from user and pass it to
               // server script.
					
               var age = document.getElementById('age').value;
               var wpm = document.getElementById('wpm').value;
               var sex = document.getElementById('sex').value;
               var queryString = "?age=" + age ;
            
               queryString +=  "&wpm=" + wpm + "&sex=" + sex;
               ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
               ajaxRequest.send(null); 
            }
         //-->
      </script>
		
      <form name = 'myForm'>
         Max Age: <input type = 'text' id = 'age' /> <br />
         Max WPM: <input type = 'text' id = 'wpm' />
         <br />
         
         Sex: <select id = 'sex'>
            <option value = "m">m</option>
            <option value = "f">f</option>
         </select>
			
         <input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
			
      </form>
      
      <div id = 'ajaxDiv'>Your result will display here</div>
   </body>
</html>

NOTE - Cara melewatkan variabel dalam Query sesuai dengan standar HTTP dan memiliki formA.

URL?variable1=value1;&variable2=value2;

Sekarang kode di atas akan memberi Anda layar seperti yang diberikan di bawah ini

NOTE - Ini adalah layar tiruan dan tidak akan berfungsi.

Hasil Anda akan ditampilkan di sini

File PHP Sisi Server

Jadi sekarang skrip sisi klien Anda sudah siap. Sekarang kita harus menulis skrip sisi server kita yang akan mengambil age, wpm dan sex dari database dan akan mengirimkannya kembali ke klien. Letakkan kode berikut ke dalam file "ajax-example.php".

<?php
   
   $dbhost = "localhost"; $dbuser = "dbusername";
   $dbpass = "dbpassword"; $dbname = "dbname";
   
   //Connect to MySQL Server
   mysql_connect($dbhost, $dbuser, $dbpass); //Select Database mysql_select_db($dbname) or die(mysql_error());
   
   // Retrieve data from Query String
   $age = $_GET['age'];
   $sex = $_GET['sex'];
   $wpm = $_GET['wpm'];
   
   // Escape User Input to help prevent SQL Injection
   $age = mysql_real_escape_string($age);
   $sex = mysql_real_escape_string($sex);
   $wpm = mysql_real_escape_string($wpm);
   
   //build query
   $query = "SELECT * FROM ajax_example WHERE sex = '$sex'";
   
   if(is_numeric($age)) $query .= " AND age <= $age"; if(is_numeric($wpm))
   $query .= " AND wpm <= $wpm";
   
   //Execute query
   $qry_result = mysql_query($query) or die(mysql_error());
   
   //Build Result String
   $display_string = "<table>"; $display_string .= "<tr>";
   $display_string .= "<th>Name</th>"; $display_string .= "<th>Age</th>";
   $display_string .= "<th>Sex</th>"; $display_string .= "<th>WPM</th>";
   $display_string .= "</tr>"; // Insert a new row in the table for each person returned while($row = mysql_fetch_array($qry_result)) { $display_string .= "<tr>";
      $display_string .= "<td>$row[name]</td>";
      $display_string .= "<td>$row[age]</td>";
      $display_string .= "<td>$row[sex]</td>";
      $display_string .= "<td>$row[wpm]</td>";
      $display_string .= "</tr>"; } echo "Query: " . $query . "<br />";
   
   $display_string .= "</table>"; echo $display_string;
?>

Sekarang coba dengan memasukkan nilai yang valid di "Max Age" atau kotak lainnya lalu klik tombol Query MySQL.

Hasil Anda akan ditampilkan di sini

Jika Anda telah berhasil menyelesaikan pelajaran ini maka Anda tahu bagaimana menggunakan MySQL, PHP, HTML, dan Javascript secara bersamaan untuk menulis aplikasi Ajax.