This is a second part of 2-part tutorial series on CRUD operation using jquery mobile on android. In the first tutorial, you learned how to setup your android environment, create cordova/phonegap project using eclipse and node.js and how to test your app using android simulator without device.
http://blog.revivalx.com/2014/02/21/crud-operation-using-jquery-mobile-on-android-part-1/
In this second part, you will learn how to create a simple web service for your app. Your web service will enable to create, read, update and data using JSON ( Javascript Object Notation) to your database. We will not using SOAP (Simple Object Access Protocol) for this tutorial because JSON is easy to learn and simple compare to SOAP is too complex for beginner. It basically works on HTTP protocol.
URL Structure
In web service design the URL endpoints should be well formed and should be easily understandable. Every URL for a resource should be uniquely identified.
For example
GET – http://localhost:8888/crud_tutorial/product/index
GET – http://localhost:8888/crud_tutorial/product/display?productId=1
POST – http://localhost:8888/crud_tutorial/product/create
POST - http://localhost:8888/crud_tutorial/product/update?productId=1
POST - http://localhost:8888/crud_tutorial/product/delete?productId=1
Why we using JSON for mobile application? Why not we access directly to our database without using JSON instead PHP or JAVA. It is because hybrid mobile app support client side languages, not servers side languages. Hybrid mobile app consists these 3 languages are HTML5, CSS and Javascript. We can’t simply run PHP or JAVA in mobile app. This video will answer these questions.
Getting started.
For this tutorial you need to have basic in PHP and Mysql. You need to have eclipse Helios to complete the project. Compare to previous tutorial we using eclipse Juno. It is because we develop an android app. For eclipse PHP we develop web service using PHP.
First you need to setup a web server in your machine. I’m using MAMP (stands for Mac, Apache, Mysql and Php) for this tutorial. It’s ok if your want to use other than this such as XAMPP or WAMP. No problem with that. But i suggest you using MAMP if you using Mac. There will be a lot of glitches if you using XAMPP or WAMP in your apple machine.
Download MAMP from this site and install to your machine. After finish installed MAMP to your machine, start apache server and mysql server. So far I didn’t get any issues starting my web server compare to XAMPP. If you got problem start up your apache server, make sure you check port 80 because maybe other applications using the same port especially skype. you need to terminate the application before start the apache server. This issue always happened to windows users.
If your apache and mysql server running successful, you will get like this (green light on both server status).
MAMP
Then open your chrome browser. Why I’m using chrome rather than other browser because there are a tons of chrome extensions available in chrome marketplace. That’s why i choose to live with it. Type this to open your MAMP start page in your browser.
Then click phpMyAdmin at top of the bar. You will see this page.
phpmyadmin
You need to create a database and a table for this tutorial. Click database tab. Then create ‘crud_tutorial‘. Copy this sql script to your sql tab to generate product table.
After executing these queries go through each tables and make sure that everything created correctly. Until now we are done with getting your system ready for development. Run your eclipse Helios to start develop web service. Right click in PHP explore > New > PHP Project.
eclipe helios
Type crud_tutorial in project name. At content part, choose create project at existing location (from existing source). Type path name in directory field. /Applications/MAMP/htdocs/crud_tutorial . Click Finish.
create project
Right click in your project, select New > PHP File .
PHP File
Type db_config.php and click Finish.
New php file
You need to create 5 more php files for db_connect.php, create_product.php, get_product_details.php, get_all_products.php, update_product.php and delete_product.php. You can check reference that I take from this site for this tutorial.
db_connect.php – database configuration / setting.
db_connect.php – database connection.
create_product.php – create product details into database.
get_product_details.php – get product details base on product id from database.
get_all_products – retrieve all list of products.
update_product.php – update product into database base on product id.
delete_product.php – delete product from database base on product id.
Fill up all these PHP files using these code.
db_connect.php
db_connect.php
create_product.php
get_product_details.php
get_all_products.php
update_product.php
delete_product.php
After you fill up the files, you need to install Curl in your machine. Curl is a command line tool for transferring data with URL syntax. Install curl via npm. Type this command to install. If you using windows, run this command in your command prompt. Make sure you install node.js first.
npm install curl
npm install curl
Run this command to test create_product.php in your terminal.
curl POST
Success status for create_product.php
Proceed all these curl commands for each URLs
get_product_details.php
Success status for get_product_details.php
get_all_products.php
Success status for get_all_products.php
update_product.php
Success status for update_product.php
delete_product.php
Success status for delete_product.php
I thinks thats all tutorial for a simple web service. Later we will integrate this web service with android app. Stay tune and enjoy!!