AJAX to populate data from mobile web interface

This tutorial is to demonstrate how a mobile web interface could use AJAX facility to populate data from online database. In this tutorial, we need to have the front-end (HTML interface) and the backend (PHP+MySQL). We are going to show the xampp to prepare the backend facilities (localhost).

THE FRONT-END (mobile web client)

In the front-end, AJAX is implemented to be able to call the backend page (PHP script). This is done via JavaScript.


Though the interface looks plain, the code lies on the JavaScript.

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/themes/test-theme2.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>

<!-- AJAX proces -->
$( document ).ready(function(){//check if the document/browser ready to run JavaScript
$('#btncari').click(function(){//the btncari as the trigger.
var namacarian=$('#txtcari').val();//capture the content of the textbox.
//write to the div named displayresult
$("#displayresult").html("Searching for "+namacarian).enhanceWithin();
//change your web-server here
//in this case, the file search.php is to handle the online database connection
var urlcarian="http://localhost/jpa_dir_backend/search.php";

//AJAX configuration
url:urlcarian,//the URL
type:'post',//method used
crossDomain : 'true',
data:{txtcari:namacarian},//the data parameter to transfer
success:function(result){//if the connection success
//display the record in div displayresult
error:function(request,error){//if the connection fail
alert("Network error!!!");//display error message
$("#displayresult").html("Network error!!!").enhanceWithin();
});//btncari click
});//end document ready

</script><!-- end AJAX proces -->

<div data-role="page" id="search-ajax">
<div data-role="header" data-position="fixed">
<h1>JPA app</h1>

<div role="main" class="ui-content">
<h1>Search using AJAX</h1>
<input id="txtcari" name="txtcari" type="text">
<button id="btncari" name="btncari" data-icon="search">

<div id="displayresult"> <!-- DIV to display the content from server page -->
Result will be displayed here...

<!-- footer -->
<div data-role="footer" data-position="fixed">
<h2>Copyright @2015 JPA</h2>
</div><!-- end footer -->
</div> <!-- end of page -->


These server pages will communicate to the database to display the search result.


header("Access-Control-Allow-Origin: *");//to allow cross-site

//database configuration
$servername = "localhost";//change your db servername
$username = "root";//change to your db username
$password = "";//change to your password here (if any)
$dbname = "jpa_dir";//change your DB name here

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);

// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
//echo "Connected successfully";

//search facilities
//sql statement
$sql = "SELECT * FROM sd_users
WHERE name LIKE '%$carian%'"
//return the resultset
$result = mysqli_query($conn, $sql);

if (!$result) {//sql query error
<ul data-role="listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
if (mysqli_num_rows($result) > 0) {//records found
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
?> <li>
<a href="#pop<?=$i ?>" data-rel="popup">
else {
echo "<li>No record found!!!</li>";

mysqli_data_seek($result, 0);
if (mysqli_num_rows($result) > 0) {//records for popup
while($row = mysqli_fetch_assoc($result)) {
<!-- popup staff1 -->
<div id="pop<?=$i ?>" data-role="popup">
<ul data-role="listview" data-inset="true">
<li> <?=$row['name'] ?></li>
<li><a href="tel:<?=$row['phone'] ?>" class="ui-icon-phone ui-btn
ui-btn-icon-left ui-btn-corner-all ui-btn-inline"
<li><a href="mailto:<?=$row['email'] ?>" class="ui-icon-mail
ui-btn ui-btn-icon-left ui-btn-corner-all

}//while data iteration
}//end popup

Complete source-code is available here - http://blog.kerul.net/2015/04/mobile-web-apps-front-end-and-back-end.html

Popular Posts