PhoneGap PHP & MySQL Tutorial

PhoneGap PHP MySQL Example

In this article, I would like to write an article about PhoneGap with PHP & MySQL.we’ll see how to perform CRUD (Create, Read, Update, Delete) operations with MySQL Database.

Step By Step Guide:

  • MySQL Database Creation
  • Writing PHP code for Serverside
  • Writing Jquery code for PhoneGap / Apache Cordova side

Dependencies: PHP, MySQL, JQuery

Learn More about PHP & MySQL http://www.w3schools.com/php/php_mysql_intro.asp or http://www.tutorialspoint.com/php/php_and_mysql.htm

Working with MySQL database

Let’s create a new table called course details where, we can store information about courses such as title, duration, and price.we also need to set primary key & auto increment for id

<span class="hljs-keyword">CREATE</span> <span class="hljs-keyword">TABLE</span> <span class="hljs-string">`course_details`</span> (

<span class="hljs-string">`id`</span> <span class="hljs-built_in">int</span>(<span class="hljs-number">1</span>) <span class="hljs-keyword">NOT</span> <span class="hljs-literal">NULL</span>, 
<span class="hljs-string">`title`</span> <span class="hljs-built_in">varchar</span>(<span class="hljs-number">25</span>) <span class="hljs-keyword">NOT</span> <span class="hljs-literal">NULL</span>, 
<span class="hljs-string">`duration`</span> <span class="hljs-built_in">varchar</span>(<span class="hljs-number">50</span>) <span class="hljs-keyword">NOT</span> <span class="hljs-literal">NULL</span>, 
<span class="hljs-string">`price`</span> <span class="hljs-built_in">varchar</span>(<span class="hljs-number">10</span>) <span class="hljs-keyword">NOT</span> <span class="hljs-literal">NULL</span>

) <span class="hljs-keyword">ENGINE</span>=<span class="hljs-keyword">InnoDB</span> <span class="hljs-keyword">DEFAULT</span> <span class="hljs-keyword">CHARSET</span>=latin1 AUTO_INCREMENT=<span class="hljs-number">1</span> ; 

<span class="hljs-keyword">ALTER</span> <span class="hljs-keyword">TABLE</span> <span class="hljs-string">`course_details`</span> <span class="hljs-keyword">ADD</span> PRIMARY <span class="hljs-keyword">KEY</span> ( <span class="hljs-string">`id`</span> ); 
<span class="hljs-keyword">ALTER</span> <span class="hljs-keyword">TABLE</span> <span class="hljs-string">`course_details`</span> <span class="hljs-keyword">MODIFY</span> <span class="hljs-string">`id`</span> <span class="hljs-built_in">int</span>(<span class="hljs-number">1</span>) <span class="hljs-keyword">NOT</span> <span class="hljs-literal">NULL</span> AUTO_INCREMENT;

After creating a new table, we need to create simple REST API

Working with PHP code

Let’s create a simple API (no security layer added) for fetching data from MySQL database & display as JSON.here we’re going to create multiple files for insert, delete, update operations. If you want you can merge all files into one single PHP file

Connecting Database Server ( db.php )

This file allows you to connect your MySQL database

<span class="php"><span class="hljs-meta"><?php</span>
    header(<span class="hljs-string">"Access-Control-Allow-Origin: *"</span>);
    $con = mysqli_connect(<span class="hljs-string">"localhost"</span>,<span class="hljs-string">"root"</span>,<span class="hljs-string">"root"</span>,<span class="hljs-string">"phonegap_demo"</span>) <span class="hljs-keyword">or</span> <span class="hljs-keyword">die</span> (<span class="hljs-string">"could not connect database"</span>);
<span class="hljs-meta">?></span></span>

NOTE

header("Access-Control-Allow-Origin: *"); use to allow cross domains

Insert data into MySQL database using PHP ( insert.php )

This code will receive data from the mobile / PhoneGap Apache Cordova using POST method & It’ll insert data to MySQL, If it is successful it will return ok as output otherwise error as output

<span class="php"><span class="hljs-meta"><?php</span>
<span class="hljs-keyword">include</span> <span class="hljs-string">"db.php"</span>;
    <span class="hljs-keyword">if</span>(<span class="hljs-keyword">isset</span>($_POST[<span class="hljs-string">'insert'</span>]))
    {
    $title=$_POST[<span class="hljs-string">'title'</span>];
    $duration=$_POST[<span class="hljs-string">'duration'</span>];
    $price=$_POST[<span class="hljs-string">'price'</span>];
    $q=mysqli_query($con,<span class="hljs-string">"INSERT INTO `course_details` ( `title` , `duration` , `price` ) VALUES ('$title','$duration','$price')"</span>);
    <span class="hljs-keyword">if</span>($q)
    <span class="hljs-keyword">echo</span> <span class="hljs-string">"success"</span>;
    <span class="hljs-keyword">else</span>
    <span class="hljs-keyword">echo</span> <span class="hljs-string">"error"</span>;
    }
<span class="hljs-meta">?></span></span>

Update Database using PHP ( update.php )

This code will receive data from the mobile / PhoneGap / Apache Cordova using POST method & It’ll Update data to MySQL with respect to course_id, If it is successful it will return ok as output otherwise error as output

<span class="php"><span class="hljs-meta"><?php</span>
<span class="hljs-keyword">include</span> <span class="hljs-string">"db.php"</span>;
<span class="hljs-keyword">if</span>(<span class="hljs-keyword">isset</span>($_POST[<span class="hljs-string">'update'</span>]))
{
$id=$_POST[<span class="hljs-string">'id'</span>];
$title=$_POST[<span class="hljs-string">'title'</span>];
$duration=$_POST[<span class="hljs-string">'duration'</span>];
$price=$_POST[<span class="hljs-string">'price'</span>];
$q=mysqli_query($con,<span class="hljs-string">"UPDATE `course_details` SET `title` ='$title', `duration` ='$duration', `price` ='$price' where `id` ='$id'"</span>);
<span class="hljs-keyword">if</span>($q)
<span class="hljs-keyword">echo</span> <span class="hljs-string">"success"</span>;
<span class="hljs-keyword">else</span>
<span class="hljs-keyword">echo</span> <span class="hljs-string">"error"</span>;
}
<span class="hljs-meta">?></span></span>

Delete data from Database using PHP ( delete.php )

This code will receive data from the mobile / PhoneGap / Apache Cordova using POST method & It’ll delete data to MySQL with respect to course_id, If it is successful it will return ok as output otherwise error as output

<span class="php"><span class="hljs-meta"><?php</span>
<span class="hljs-keyword">include</span> <span class="hljs-string">"db.php"</span>; 
<span class="hljs-keyword">if</span>(<span class="hljs-keyword">isset</span>($_GET[<span class="hljs-string">'id'</span>]))
{
$id=$_GET[<span class="hljs-string">'id'</span>]; 
$q=mysqli_query($con, <span class="hljs-string">"delete from `course_details` where `id` ='$id'"</span>); 
<span class="hljs-keyword">if</span>($q)
<span class="hljs-keyword">echo</span> <span class="hljs-string">"success"</span>; 
<span class="hljs-keyword">else</span>
<span class="hljs-keyword">echo</span> <span class="hljs-string">"error"</span>; 
}
<span class="hljs-meta">?></span></span>

Displaying Data using JSON ( json.php )

For displaying data from MySQL database to PhoneGap / Apache Cordova, we need to create JSON based output.we can display JSON data to PhoneGap using Jquery getJSON or AJAX method. Read more Parse JSON using Cordova (PhoneGap)

<span class="php"><span class="hljs-meta"><?php</span>
<span class="hljs-keyword">include</span> <span class="hljs-string">"db.php"</span>; 
$data=<span class="hljs-keyword">array</span>(); 
$q=mysqli_query($con, <span class="hljs-string">"select * from `course_details` "</span>); 
<span class="hljs-keyword">while</span> ($row=mysqli_fetch_object($q)){
    $data[]=$row; 
}
<span class="hljs-keyword">echo</span> json_encode($data); 
<span class="hljs-meta">?></span></span>

Connecting JSON with PhoneGap

Insert data using PhoneGap / Apache Cordova ( insert.html )

<span class="hljs-tag"><<span class="hljs-name">html</span>></span>

<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"css/ionic.css"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/jquery.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></span><span class="javascript">
        $(<span class="hljs-built_in">document</span>).ready(<span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{
            $(<span class="hljs-string">"#insert"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{
                <span class="hljs-keyword">var</span> title = $(<span class="hljs-string">"#title"</span>).val();
                <span class="hljs-keyword">var</span> duration = $(<span class="hljs-string">"#duration"</span>).val();
                <span class="hljs-keyword">var</span> price = $(<span class="hljs-string">"#price"</span>).val();
                <span class="hljs-keyword">var</span> dataString = <span class="hljs-string">"title="</span> + title + <span class="hljs-string">"&duration="</span> + duration + <span class="hljs-string">"&price="</span> + price + <span class="hljs-string">"&insert="</span>;
                <span class="hljs-keyword">if</span> ($.trim(title).length > <span class="hljs-number">0</span> & $.trim(duration).length > <span class="hljs-number">0</span> & $.trim(price).length > <span class="hljs-number">0</span>) {
                    $.ajax({
                        <span class="hljs-attr">type</span>: <span class="hljs-string">"POST"</span>,
                        <span class="hljs-attr">url</span>: <span class="hljs-string">"http://localhost/phonegap/database/insert.php"</span>,
                        <span class="hljs-attr">data</span>: dataString,
                        <span class="hljs-attr">crossDomain</span>: <span class="hljs-literal">true</span>,
                        <span class="hljs-attr">cache</span>: <span class="hljs-literal">false</span>,
                        <span class="hljs-attr">beforeSend</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{
                            $(<span class="hljs-string">"#insert"</span>).val(<span class="hljs-string">'Connecting...'</span>);
                        },
                        <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>) </span>{
                            <span class="hljs-keyword">if</span> (data == <span class="hljs-string">"success"</span>) {
                                alert(<span class="hljs-string">"inserted"</span>);
                                $(<span class="hljs-string">"#insert"</span>).val(<span class="hljs-string">'submit'</span>);
                            } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (data == <span class="hljs-string">"error"</span>) {
                                alert(<span class="hljs-string">"error"</span>);
                            }
                        }
                    });
                }
                <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
            });
        });
    </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>

<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar bar-header bar-positive"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-bottom:80px; "</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title"</span>></span>Insert Database<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button button-clear"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"readjson.html"</span>></span>Read JSON<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span>
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"id"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span> /></span>
        <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Title<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"title"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span> /></span>
        <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Duration<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"duration"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span> /></span>
        <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Price<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"price"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span> /></span>
        <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"insert"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button button-block"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Insert"</span> /></span>
        <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>

<span class="hljs-tag"></<span class="hljs-name">html</span>></span>

Display / Reading JSON data using PhoneGap ( readjson.html )

It’ll display list the data from the server as a link. when you click the link, it’ll redirect you to form.html.you can update data from form.html

<span class="hljs-tag"><<span class="hljs-name">html</span>></span>

<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"css/ionic.css"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/jquery.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></span><span class="javascript">
        $(<span class="hljs-built_in">document</span>).ready(<span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{
            <span class="hljs-keyword">var</span> url = <span class="hljs-string">"http://localhost/phonegap/database/json.php"</span>;
            $.getJSON(url, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">result</span>) </span>{
                <span class="hljs-built_in">console</span>.log(result);
                $.each(result, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">i, field</span>) </span>{
                    <span class="hljs-keyword">var</span> id = field.id;
                    <span class="hljs-keyword">var</span> title = field.title;
                    <span class="hljs-keyword">var</span> duration = field.duration;
                    <span class="hljs-keyword">var</span> price = field.price;
                    $(<span class="hljs-string">"#listview"</span>).append(<span class="hljs-string">"<a class='item' href='form.html?id="</span> + id + <span class="hljs-string">"&title="</span> + title + <span class="hljs-string">"&duration="</span> + duration + <span class="hljs-string">"&price="</span> + price + <span class="hljs-string">"'><span class='item-note'>$"</span> + price + <span class="hljs-string">"</span><h2>"</span> + title + <span class="hljs-string">" </h2><p>"</span> + duration + <span class="hljs-string">"</p></a>"</span>);
                });
            });
        });
    </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>

<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar bar-header bar-positive"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-bottom:80px; "</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"index.html"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button button-clear"</span>></span>Home<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title"</span>></span>Read Database (JSON)<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span>
    <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"listview"</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>

<span class="hljs-tag"></<span class="hljs-name">html</span>></span>

Updating MySQL database from Phonegap / Apache Cordova ( form.html )

This example shows how to update data and delete data from a database using Phonegap / Apache Cordova

<span class="hljs-tag"><<span class="hljs-name">html</span>></span>

<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"css/ionic.css"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/jquery.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/geturi.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></span><span class="javascript">
        $(<span class="hljs-built_in">document</span>).ready(<span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{
            <span class="hljs-keyword">var</span> id = <span class="hljs-built_in">decodeURI</span>(getUrlVars()[<span class="hljs-string">"id"</span>]);
            <span class="hljs-keyword">var</span> title = <span class="hljs-built_in">decodeURI</span>(getUrlVars()[<span class="hljs-string">"title"</span>]);
            <span class="hljs-keyword">var</span> duration = <span class="hljs-built_in">decodeURI</span>(getUrlVars()[<span class="hljs-string">"duration"</span>]);
            <span class="hljs-keyword">var</span> price = <span class="hljs-built_in">decodeURI</span>(getUrlVars()[<span class="hljs-string">"price"</span>]);
            $(<span class="hljs-string">"#id"</span>).val(id);
            $(<span class="hljs-string">"#title"</span>).val(title);
            $(<span class="hljs-string">"#duration"</span>).val(duration);
            $(<span class="hljs-string">"#price"</span>).val(price);
            $(<span class="hljs-string">"#update"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{
                <span class="hljs-keyword">var</span> id = $(<span class="hljs-string">"#id"</span>).val();
                <span class="hljs-keyword">var</span> title = $(<span class="hljs-string">"#title"</span>).val();
                <span class="hljs-keyword">var</span> duration = $(<span class="hljs-string">"#duration"</span>).val();
                <span class="hljs-keyword">var</span> price = $(<span class="hljs-string">"#price"</span>).val();
                <span class="hljs-keyword">var</span> dataString = <span class="hljs-string">"id="</span> + id + <span class="hljs-string">"&title="</span> + title + <span class="hljs-string">"&duration="</span> + duration + <span class="hljs-string">"&price="</span> + price + <span class="hljs-string">"&update="</span>;
                $.ajax({
                    <span class="hljs-attr">type</span>: <span class="hljs-string">"POST"</span>,
                    <span class="hljs-attr">url</span>: <span class="hljs-string">"http://localhost/phonegap/database/update.php"</span>,
                    <span class="hljs-attr">data</span>: dataString,
                    <span class="hljs-attr">crossDomain</span>: <span class="hljs-literal">true</span>,
                    <span class="hljs-attr">cache</span>: <span class="hljs-literal">false</span>,
                    <span class="hljs-attr">beforeSend</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{
                        $(<span class="hljs-string">"#update"</span>).val(<span class="hljs-string">'Connecting...'</span>);
                    },
                    <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>) </span>{
                        <span class="hljs-keyword">if</span> (data == <span class="hljs-string">"success"</span>) {
                            alert(<span class="hljs-string">"Updated"</span>);
                            $(<span class="hljs-string">"#update"</span>).val(<span class="hljs-string">"Update"</span>);
                        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (data == <span class="hljs-string">"error"</span>) {
                            alert(<span class="hljs-string">"error"</span>);
                        }
                    }
                });

            });
            $(<span class="hljs-string">"#delete"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{
                <span class="hljs-keyword">var</span> id = $(<span class="hljs-string">"#id"</span>).val();
                <span class="hljs-keyword">var</span> dataString = <span class="hljs-string">"id="</span> + id + <span class="hljs-string">"&delete="</span>;
                $.ajax({
                    <span class="hljs-attr">type</span>: <span class="hljs-string">"GET"</span>,
                    <span class="hljs-attr">url</span>: <span class="hljs-string">"http://localhost/phonegap/database/delete.php"</span>,
                    <span class="hljs-attr">data</span>: dataString,
                    <span class="hljs-attr">crossDomain</span>: <span class="hljs-literal">true</span>,
                    <span class="hljs-attr">cache</span>: <span class="hljs-literal">false</span>,
                    <span class="hljs-attr">beforeSend</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{
                        $(<span class="hljs-string">"#delete"</span>).val(<span class="hljs-string">'Connecting...'</span>);
                    },
                    <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>) </span>{
                        <span class="hljs-keyword">if</span> (data == <span class="hljs-string">"success"</span>) {
                            alert(<span class="hljs-string">"Deleted"</span>);
                            $(<span class="hljs-string">"#delete"</span>).val(<span class="hljs-string">"Delete"</span>);
                        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (data == <span class="hljs-string">"error"</span>) {
                            alert(<span class="hljs-string">"error"</span>);
                        }
                    }
                });

            });
        });
    </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>

<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar bar-header bar-positive"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-bottom:80px; "</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"index.html"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button button-clear"</span>></span>Home<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title"</span>></span>Update Database<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button button-clear"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"readjson.html"</span>></span>Read JSON<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span>
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"id"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span> /></span>
        <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Title<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"title"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span> /></span>
        <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Duration<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"duration"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span> /></span>
        <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">label</span>></span>Price<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"price"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">""</span> /></span>
        <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"update"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button button-block"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Update"</span> /></span>
            <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"delete"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button button-block"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Delete"</span> /></span>
        <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">div</span>></span>

<span class="hljs-tag"></<span class="hljs-name">body</span>></span>

<span class="hljs-tag"></<span class="hljs-name">html</span>></span>

This is all about PhoneGap PHP MySQL example for performing CRUD Operation. If you’ve any doubts feel free to comment below

geturi.js

this code is used for getting value from URL.like site.com/file?

E.g http://localhost/file.html?name=sundar&country=india

if you want to get name and URL, you can use like this

var name = gerUrlVars()[“name”];

var country = gerUrlVars()[“country”];

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getUrlVars</span>() </span>{
    <span class="hljs-keyword">var</span> vars = [],
        hash;
    <span class="hljs-keyword">var</span> hashes = <span class="hljs-built_in">window</span>.location.href.slice(<span class="hljs-built_in">window</span>.location.href.indexOf(<span class="hljs-string">'?'</span>) + <span class="hljs-number">1</span>).split(<span class="hljs-string">'&'</span>);
    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i < hashes.length; i++) {
        hash = hashes[i].split(<span class="hljs-string">'='</span>);
        vars.push(hash[<span class="hljs-number">0</span>]);
        vars[hash[<span class="hljs-number">0</span>]] = hash[<span class="hljs-number">1</span>];
    }
    <span class="hljs-keyword">return</span> vars;
}

Known mistakes

  • localhost won’t work in mobile devices, If you’re testing on the device you need to host your file or you need to connect with IP address
  • Make sure you’ve included geturi.js
  • Download the files and try
  • Still facing any issues ?, Feel free to comment below