Dengan Ajax dan metode POST, buatlah sebuah form untuk mengisi data table berikut :
Setelah pengisian selesai dilakukan, pada halaman tersebut ada notifikasi bahwa
data telah dimasukkan!
I. Pembahasan
Ajax merupakan suatu teknik utnuk membuat suatu website interaktif yang terdiri dari beberapa komponen seperti JavaScript,XML,XMLHttpRequest (XHR) objek, DOM, dll. Berdasarkan pada pengertian tersebut maka untuk membangun website yang melibatkan database dan ajax sama seperti membangun website dengan koneksi database hanya saja perlu ditambahkan beberapa komponen ajax.
a. Source code pada aplikasi ajax melipti:
Source code pada formInput.php
Pada FormInput.php terdapat script yang menampilkan form input dan source code untuk melakukan teknik ajax. Source code yang berkaitan dengan ajax terletak diantara script head.
Source code pada insert_data.php
Pada file insert_data.php berisi script untuk mengeksekusi formInput.php yang terdiri dari koeksi dengan database dan query untuk melakukan input kedalam database.
Source code pada ajax_dasar.phpPada file ajax_dasar.php terdapat fungsi untu memanggil object XHR dan filter object XHR. Fungsi tersebut juga dapat mengembalukan nilai null jika browser tidak compatible.
download interaksi php mysql menggunakan post metode ajax pdf
source code interaksi php mysql menggunakan post metode ajax
Selain file-file diatas juga terdapat file tambahan untuk mengatur tampilan yaitu style.css
Field | Tipe data | Keterangan |
user_id | int | primary key, auto increment, not null |
first_name | varchar(50) | Not null |
last_name | varchar(50) | Not null |
address | varchar(100) | Not null |
data telah dimasukkan!
I. Pembahasan
Ajax merupakan suatu teknik utnuk membuat suatu website interaktif yang terdiri dari beberapa komponen seperti JavaScript,XML,XMLHttpRequest (XHR) objek, DOM, dll. Berdasarkan pada pengertian tersebut maka untuk membangun website yang melibatkan database dan ajax sama seperti membangun website dengan koneksi database hanya saja perlu ditambahkan beberapa komponen ajax.
a. Source code pada aplikasi ajax melipti:
Source code pada formInput.php
Pada FormInput.php terdapat script yang menampilkan form input dan source code untuk melakukan teknik ajax. Source code yang berkaitan dengan ajax terletak diantara script head.
<!-- * File : formInput.php * Desc : menampilkan form input ke database dengan teknik AJAX --> <html> <head> <title>Form Dengan Ajax</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/JavaScript" src="ajax_dasar.js"></script> <script type="text/JavaScript"> var xmlhttp; function ajaxget(){ xmlhttp = GetXmlHttpObject(); if (xmlhttp==null) { alert ("Browser tidak kompatibel dengan teknik Ajax!"); return; } xmlhttp.onreadystatechange=stateChanged; //mendapatkan value masukan user var formFirst=encodeURIComponent(document.getElementById("first").value); var formLast=encodeURIComponent (document.getElementById("last").value); var formAddress=encodeURIComponent (document.getElementById("address").value); var url = "insert_data.php"; var kirim = "first="+formFirst+"&last="+formLast+"&address="+formAddress; xmlhttp.open("POST",url,true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-length",kirim.length); xmlhttp.setRequestHeader("Connection","close"); xmlhttp.send(kirim); } function stateChanged(){ if (xmlhttp.readyState==4) { document.getElementById("result").innerHTML=xmlhttp.responseText; } } </script> </head> <body> <div id="InputForm"> <div id="welcome"> <strong>Form dengan Ajax</strong></div> <form method="POST" > first name: <br /> <input type="text" id="first" name="first" size="25" /> <br /> last name: <br /><input type="text" id="last" name="last" size="25" /> <br /> address: <br /><input type="text" id="address" name="address" size="25" /> <br /> <input type="button" value="submit" onClick="ajaxget()" /> <center>©-Priatmoko</center> </form> <div id="result"> </div> </div> </body> </html> |
Source code pada insert_data.php
Pada file insert_data.php berisi script untuk mengeksekusi formInput.php yang terdiri dari koeksi dengan database dan query untuk melakukan input kedalam database.
<?php /* * File : insert_data.php * Desc : untuk melakukan insert data */ $first = $_POST['first']; $last = $_POST['last']; $address = $_POST['address']; //koneksi ke database $koneksi = mysql_connect("localhost", "root", "") or die('tidak bisa terkonkesi : '.mysql_error()); //memilih basis data mysql_select_db("PI_AJAX"); $query="INSERT INTO user (first_name, last_name, address) VALUES('$first','$last','$address')"; $status = mysql_query($query); if($status) { echo 'insert berhasil !'; }else { echo 'insert gagal !'; } ?> |
Source code pada ajax_dasar.php
/* * File : ajax_dasar.js * Desc : fungsi untuk melakukan operasi dasar pada teknik ajax */ function GetXmlHttpObject(){ if (window.XMLHttpRequest){ /*filter untuk semua browser*/ return new XMLHttpRequest(); }else if (window.ActiveXObject){ /*filter untuk semua IE*/ return new ActiveXObject("Microsoft.XMLHTTP"); }else{ /*filter untuk browser yang tidak kompatible*/ return null; } } |
download interaksi php mysql menggunakan post metode ajax pdf
source code interaksi php mysql menggunakan post metode ajax
Selain file-file diatas juga terdapat file tambahan untuk mengatur tampilan yaitu style.css
0 komentar:
Posting Komentar