How to connet Ionic mobile application with MySQL database and retrieve data using PHP.(Section 2)

In this section we continue..

Part III: Write PHP code to connect MySQL Database and retrieve data.

Go to wamp -->www-->my project and create .php file. Rename it to query.php (you can give any name you want).

In this example I write php code to retrieve data from MySQL database.

You need to give your server name to $mysql_host variable. And also database name, username & password to other variables.

Create connection using mysqli() function.

Then write query function to select data from MySQL database.

Cross-Origin Resource Sharing (CORS) is a specification that enables truly open access across domain-boundaries. If you serve public content, please consider using CORS to open it up for universal JavaScript/browser access.

Enable CORS in PHP we use this code in .php file.

header("Access-Control-Allow-Origin: *");

Enable CORS in Apache server

http://enable-cors.org/server_apache.html

After that run http://localhost:81//my%20project/query1.php .you need to change .php file according to your name.

In your browser you can see Json array like this. That data bind with records. We need that URL later.

Part IV: Create mobile application Using Ionic framework

I’m use IONIC framework with angularJs to build mobile application.

http://ionicframework.com/docs/overview/

Use command prompt to create new ionic application

 ionic start “project_name” blank

cd “project_name”

ionic platform add android

Now you can see folder create in your computer called “project_name”.

Double click “project”àwwwàindex.html

Double click “project”àwwwàindex.htmlàapp.js

This is the two main file we use to create our application.

Part V: Update Source code to get URL data

We need to get data to device from http://localhost:81//my%20project/query1.phpURL.Using AngulasJs, We need to write this simple code in app.js with $http.get() function and make sure you insert correct URL into that and response.records this records variable should be same variable given in PHP code.

After that go to index.html and within <ion-content> tag, create new <div> tag and place          

 ng-controller directive. Then using ng-repeat directive called data from that URL.

Make sure Username & Password should be same variables in PHP code.

And finally we did.

You can run index.html and see the output. Make sure you run wamp server when you run the code.

You need to host your database & PHP code using online server and give that database server to .php code and php URL to AngularJs $http.get() code.

Then you can use command prompt and type

Ionic build android 

To create .apk file.

Output: