PhoneGap CRUD Operation App using PHP MySQL – PhoneGap used for develop the hybrid mobile application and native application. Now a days most of users likes to develop the mobile application. PhoneGap is a one of the best framework for develop the hybrid and native mobile application.

phonegap crud operation app using php mysql

phonegap crud operation app using php mysql – Here, i have share how to perform the CRUD operation in PhoneGap using PHP and MySQL. This is the simple and efficient app for who looking crud system in their own use or official use. I have used Eclipse to develop the phonegap app, but there are many alternatives will be there like android studio also one of the best framework to develop the mobile application.

PhoneGap CRUD Operation App using PHP MySQL

Let’s start the tutorial to make the crud operation in phonegap. First you have create one index.html file for insert the given value.

Demo

index.html

The entire form details are processed in index file and accessed for server side.

<html>
<head>
 <link rel="stylesheet" type="text/css" href="css/demo.css">
 <script type="text/javascript" src="js/main.js"></script>
 <script type="text/javascript">
 $(document).ready(function()
 {
 $("#insert").click(function(){
 var name=$("#name").val();
 var position=$("#position").val();
 var salary=$("#salary").val();
 var dataString="name="+name+"&position="+position+"&salary="+salary+"&insert=";
 if($.trim(name).length>0 & $.trim(position).length>0 & $.trim(salary).length>0)
 {
 $.ajax({
 type: "POST",
 url:"http://localhost/crud/php/insert.php",
 data: dataString,
 crossDomain: true,
 cache: false,
 beforeSend: function(){ $("#insert").val('Connecting...');},
 success: function(data){
 if(data=="success")
 {
 alert("inserted");
 $("#insert").val('submit');
 }
 else if(data=="error")
 {
 alert("error");
 }
 }
 });
 }return false;
 });
 });
 </script>
</head>
<body>
 <div class="bar bar-header bar-positive" style="margin-bottom:80px;">
 <h1 class="title">Employee Details</h1>
 <a class="button button-clear" href="view.html">Read the Data</a>
 </div><br/><br/>
 <div class="list">
 <input type="hidden" id="id" value=""/>
 <div class="item">
 <label>Employee Name</label>
 <input type="text" id="name" value=""/>
 </div>
 <div class="item">
 <label>Employee Position</label>
 <input type="text" id="position" value=""/>
 </div>
 <div class="item">
 <label>Employee Salary</label>
 <input type="text" id="salary" value=""/>
 </div>
 <div class="item">
 <input type="button" id="insert" class="button button-block" value="Insert"/>
 </div>
 </div>
</body>
</html>

Its a simple method in insert the value in database, hereafter we have create one html file main.html in make the processing script within a database.

main.html

Now we are move on the options for include the update and delete options for user friendly.

<html>
<head>
 <link rel="stylesheet" type="text/css" href="css/demo.css">
 <script type="text/javascript" src="js/main.js"></script>
 <script type="text/javascript" src="js/sample.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
 var id = decodeURI(getUrlVars()["id"]);
 var name = decodeURI(getUrlVars()["name"]);
 var position = decodeURI(getUrlVars()["position"]);
 var salary = decodeURI(getUrlVars()["salary"]);
 $("#id").val(id);
 $("#name").val(name);
 $("#position").val(position);
 $("#salary").val(salary);
 $("#update").click(function(){
 var id=$("#id").val();
 var name=$("#name").val();
 var position=$("#position").val();
 var salary=$("#salary").val();
 var dataString="id="+id+"&name="+name+"&position="+position+"&salary="+salary+"&update=";
 $.ajax({
 type: "POST",
 url:"http://localhost/crud/php/update.php",
 data: dataString,
 crossDomain: true,
 cache: false,
 beforeSend: function(){ $("#update").val('Connecting...');},
 success: function(data){
 if(data=="success")
 {
 alert("Updated");
 $("#update").val("Update");
 }
 else if(data=="error")
 {
 alert("error");
 }
 }
 });
 
 });
 $("#delete").click(function(){
 var id=$("#id").val();
 var dataString="id="+id+"&delete=";
 $.ajax({
 type: "GET",
 url:"http://localhost/crud/php/delete.php",
 data: dataString,
 crossDomain: true,
 cache: false,
 beforeSend: function(){ $("#delete").val('Connecting...');},
 success: function(data){
 if(data=="success")
 {
 alert("Deleted");
 $("#delete").val("Delete");
 }
 else if(data=="error")
 {
 alert("error");
 }
 }
 });
 
 });
 });
 </script>
</head>
<body>
 <div class="bar bar-header bar-positive" style="margin-bottom:80px;">
 <a href="index.html" class="button button-clear">Home</a>
 <h1 class="title">Update Database</h1>
 <a class="button button-clear" href="view.html">Read the Data</a>
 </div><br/><br/>
 <div class="list">
 <input type="hidden" id="id" value=""/>
 <div class="item">
 <label>Employee Name</label>
 <input type="text" id="name" value=""/>
 </div>
 <div class="item">
 <label>Employee Position</label>
 <input type="text" id="position" value=""/>
 </div>
 <div class="item">
 <label>Employee Salary</label>
 <input type="text" id="salary" value=""/>
 </div>
 <div class="item">
 <input type="button" id="update" class="button button-block" value="Update"/>
 <input type="button" id="delete" class="button button-block" value="Delete"/>
 </div>
 </div>
 
</body>
</html>

Read the Value via JSON

phonegap crud operation app using php mysql – Here, we have integrate the json to read the database value. first you have convert the array in json format then encode the json and view the given value. So now create one html view.html file to view the values.

view.html

In this file integrate the server side and get the value in json format.

<html>
<head>
 <link rel="stylesheet" type="text/css" href="css/demo.css">
 <script type="text/javascript" src="js/main.js"></script>
 <script type="text/javascript">
 $(document).ready(function()
 {
 var url="http://localhost/crud/php/json.php";
 $.getJSON(url,function(result){
 console.log(result);
 $.each(result, function(i, field){
 var id=field.id;
 var name=field.name;
 var position=field.position;
 var salary=field.salary;
 $("#listview").append("<a class='item' href='main.html?id="+id+"&name="+name+"&position="+position+"&salary="+salary+"'><span class='item-note'>$"+salary+"</span><h2>"+ name + " </h2><p>"+ position +"</p></a>");
 });
 });
 });
 </script>
</head>
<body>
 <div class="bar bar-header bar-positive" style="margin-bottom:80px;">
 <a href="index.html" class="button button-clear">Home</a>
 <h1 class="title">Read the Data</h1>
 </div><br/><br/>
 <ul class="list" id="listview">
 </ul>
</body>
</html>

Now use Web Services make an Dynamic

We have used PHP web services to make an dynamic web pages for our web and mobile application. First you have create one database and tables to store the values, and then make a database connection. Create config.php file.

config.php
<?php
$dbconnection=mysqli_connect("localhost","root","","crud");
if(!$dbconnection)
{
	echo"unable to establish connection to server";
}
?>

Then make a new php file for insert the value in database, so here create insert.php file.

insert.php

Insert the employee details and read the value via JSON.

<?php
 include "config.php";
 if(isset($_POST['insert']))
 {
 $name=$_POST['name'];
 $position=$_POST['position'];
 $salary=$_POST['salary'];
 $q=mysqli_query($con,"INSERT INTO `crud_demo` (`name`,`position`,`salary`) VALUES ('$name','$position','$salary')");
 if($q)
  echo "success";
 else
  echo "error";
 }
 ?>
update.php

This file view the the given value in database and you have also modify the some values in required fields.

<?php
 include "config.php";
 if(isset($_POST['update']))
 {
 $id=$_POST['id'];
 $name=$_POST['name'];
 $position=$_POST['position'];
 $salary=$_POST['salary'];
 $q=mysqli_query($con,"UPDATE `crud_demo` SET `title`='$name',`position`='$position',`salary`='$salary' where `id`='$id'");
 if($q)
 echo "success";
 else
 echo "error";
 }
 ?>
delete.php

Here, you have delete the given value in the database.

<?php
 include "config.php";
 if(isset($_GET['id']))
 {
 $id=$_GET['id'];
 $q=mysqli_query($con,"delete from `crud_demo` where `id`='$id'");
 if($q)
 echo "success";
 else
 echo "error";
 }
 ?>
view.php

Here, you are view the given value in the database via json.

<?php
include "config.php";
$data=array();
$q=mysqli_query($con,"select * from `crud_demo`");
while ($row=mysqli_fetch_object($q)){
 $data[]=$row;
}
echo json_encode($data);
?>
Click to download
Click to download

I hope you have enjoy this code, and above contents are fully free and you have also download that but that’s not executing in mobile app.

Premium Code Runnning on Both mobile & web

This code running on both of mobile and web but this is not for free you have pay $5 for this project.

Buy now

Watch this video before Buy this project