Start HTTP web server and MySQL server of your xamp app. Then using phpmyadmin create a table consisting of:
Also, populate the table with some data as shown above.
In the xamp folder's htdocs folder, create a subfolder mysql and create a new file called jsonencode.php :
<?php
// This one is working
// The client is Phonegap app: PHP API Client
header('Access-Control-Allow-Origin: *');
$link = mysqli_connect("localhost","myuser","mypassword", "paul");
if(mysqli_connect_error()) {
die("There was an error");
}
//$query = "SELECT * FROM users";
$query = "SELECT * FROM users WHERE name = '".$_GET['name']."'";
$rows = array();
if($result = mysqli_query($link, $query)) {
while($r = mysqli_fetch_assoc($result)) {
$rows[] = $r;
}
print json_encode($rows);
}
?>
index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"
/>
<title>Blank App</title>
<link
rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"
/>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>PHP Client</h1>
<div class="searchform" style="padding:6px">
<label for="text-basic">Enter Name:</label>
<input
type="search"
name="text-basic"
id="txtinputname"
value=""
placeholder="Enter Name"
/>
<input
type="button"
value="Search"
data-icon="search"
id="btnsearch"
/>
</div>
</div>
<div role="main" class="ui-content centered">
<div id="result">Search Results...</div>
<br />
<div id="list">
<ul data-role="listview" id="resultlist"></ul>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h2>by PHP API Client Crew</h2>
</div>
</div>
<!-- <script type="text/javascript" src="cordova.js"></script> -->
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js:
$('#btnsearch').click(function() {
var name = $('#txtinputname')
.val()
.toLowerCase();
console.log(name);
var url = 'http://192.168.137.84/mysql/jsonencode.php?name=' + name;
console.log(url);
//clear the listview
$('#list').html("<ul data-role='listview' id='resultlist'></ul>");
$.ajax(url)
.done(function(data) {
var obj = JSON.parse(data);
console.log(data);
//console.log(obj[0].name);
var output = '';
if (obj[0]) {
obj.forEach(function(record) {
console.log(record.name);
output +=
'<li>id: ' +
record.id +
' Name: ' +
record.name +
' email: ' +
record.email +
'</li>';
});
} else {
output += '<li>Not Found</li>';
}
$('#resultlist').append(output);
$('#resultlist')
.listview()
.listview('refresh');
})
.fail(function() {
$('#result').html(name + ' not found!');
});
});
The index.html will refer to the app.js
Then Run the PhoneGap app using PhoneGap Desktop App and connect to it with a Browser and try to access some record by keying in a name:
I definitely agree. A full-stack engineer can work in any phase of software development, from design to testing and deployment. Working independently as a freelancer on Eiliana.com, which is a global freelancing portal, developers are able to build a complete product without relying on other members of the team.
ReplyDelete