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:

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

In this Section we discussed how to Setup Wamp server and create Database using MySQL.

Part I: Install Wamp server

Download server from http://www.wampserver.com/en/

It conclude Apache server with MySql & PHP.

After Install Wamp server Double click icon and Run. With default server run on http://localhost:8080.but sometimes error comes because we use that port to run another server like IIS in our machine.

Fix that error you need to Left Click Wamp icon -->Apache --> httpd.conf

In that file in line 62, 63 and 221 you need to change port number and save file. I’m change it to 81      

                    

                     
After that you can check the server using http://localhost:81/. if You can see this kind of page then your successfully with first stage.

Go to place you install wamp and go to www directory. Create new folder inside that and rename it. You can use that folder to store your .php code files. Refresh your browser and you can see your folder under Your Project in that page.

Part II: Create Database using MySql

You can create database using

i)                    Left Click Wamp iconàMySQLàMySQL console

ii)                  http://localhost:81/phpmyadmin/
                         

  

iii)                MySQL workbench

Download:  https://dev.mysql.com/downloads/workbench/

I’m using second method.

Create new databaseàclick new link in left side top, type “Database_Name” and click Create button. I create FirstDB database.

Create tableàclick “Database_Name” in left side bar and give table name and number of columns and click Go button. I create Employee table.

Fill column name, type and length and click save.

Insert Data to Employee table click insert link.

Then fill the details. Click Go button.

You can see insert details by using SQL tab and type sql command

Select * from Employee

Next Section we discussed How to create new Ionic application and connect with MySQL Database using PHP ..To be Continue...