Sunday, September 6, 2015

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


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.
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:





59 comments:

  1. clean and powerful example, thanks a lot.

    ReplyDelete
  2. can you post the code, im a beginner and i can't understand

    ReplyDelete
  3. my code has this promp Fatal error: Call to a member function fetch_array() on boolean in D:\xampp\htdocs\TeamLaag\query.php on line 18 and i follow your code why is this happening? Im using XAMPP

    ReplyDelete
    Replies
    1. Are you using ionic too? How do you connect the ionic to the localhost phpmyadmin database?

      Delete
  4. Its my bad its a typo error. Sorry...
    Its my mistake

    ReplyDelete
  5. how about I want to create a login form and my users can enter their username and password which later returns thenm to home page if successful. Please how do I do that..my email seayomi@gmail.com ...

    ReplyDelete
    Replies
    1. you need to change PHP code in order to check enter username and password match with database values.and if valid you can redirect to home page.

      Delete
    2. sir what will be the code plsss...

      Delete
  6. how about I want to create a login form and my users can enter their username and password which later returns thenm to home page if successful. Please how do I do that..my email seayomi@gmail.com ...

    ReplyDelete
  7. Nice tutorial, very helpful.

    I have a question, what if i'm using xampp, is it the same? or there're some different?
    how to get the url for db access (http://localhost:81//my%20project/query1.php) if using xampp. Thank you.

    ReplyDelete
  8. can u make a tutorial on sign up and login in ionic with mysql connection?

    ReplyDelete
  9. can u make a tutorial on sign up and login in ionic with mysql connection?

    ReplyDelete
  10. Can you add paging if number of employees increases like if we can show 10 employees in 1 page. Can anyone know?

    ReplyDelete
  11. Hi, Thanks for the tutorial.
    May I know how do I connect to mysql database on ODBC connection?

    The connection details are similar to the structure below:
    hostname = 'Driver={SQL Server Native Client 11.0};Server=10.0.20.12;Database=my_database;';
    username = 'admin';
    password = '@admin110';
    database = 'my_database';
    dbdriver = 'odbc';

    Thanks in advance.

    ReplyDelete
  12. thank you so much its very powerful tutorial and its too useful for me.could you tell me how to insert the data in db

    ReplyDelete
  13. hello this is a very good tutorial
    but i have an issue in this code when i add first record then it works fine and show record on browser but when i add a new record then it run the error function of js file in console

    ReplyDelete
  14. if this app will in a smart phone it can always save database to your xampp server in laptop..

    pm me

    ReplyDelete
    Replies
    1. if i make an login form and build it and a run it to my smart phone ..it can also save database into your xampp server

      Delete
  15. Android platform its now showing data, can you please check in real device. I am not able to get info from server android platform but from web i am getting perfectly data.
    Nice solution but can please tell me how i get info in android platform

    ReplyDelete
  16. Thank you so much! That did the trick, you saved me more endless hours of searching for a fix.


    ionic coders india

    ReplyDelete
  17. Thank you so much. It worked Perfectly.

    ReplyDelete
  18. if i build and run same in android, i'm not able to see the out put. please help

    ReplyDelete
  19. This comment has been removed by the author.

    ReplyDelete
  20. Do you have a sample code or project to post data using php or php api to mysql and ionic interface? Thanks!

    ReplyDelete
  21. lovely stuff, i did this using msql, tweaked your code and it worked.
    my system requirements were:
    ionic, angularjs
    xampp,phpmyadmin.

    everything worked. thank you so much

    ReplyDelete
  22. helpfull tutorial.......bt how to insert data in sqldatabase

    ReplyDelete
  23. what if for the image .. is no additional coding.
    thank for tutorial

    ReplyDelete
  24. This comment has been removed by the author.

    ReplyDelete
  25. i have retrieved data from the database but it should be print as a link on the page not like a normal text .
    li ng-repeat="x in data"
    {{ x.Link }}
    /li
    I want to use this x.Link as a Links not like a text.

    ReplyDelete
  26. how to upload .php file into a online server just like hostinger.ph to be able to work my ionic with php mysql database into my android phone ? please reply thanks !

    ReplyDelete
  27. Nice tutorial
    but i want to know if there is any possibility to retrieve image using the same approach and how its done.

    ReplyDelete
  28. Nice tutorial
    but i want to know if there is any possibility to retrieve image using the same approach and how its done.

    ReplyDelete
  29. This comment has been removed by the author.

    ReplyDelete
  30. Can anyone please do a complete crud example That will not only read but also write, update and delete from mysql?? Thanks a lot

    ReplyDelete
  31. Sir plz tell how to use x.username...

    ReplyDelete
  32. is this work for ionic 2 as well?

    ReplyDelete
  33. This comment has been removed by the author.

    ReplyDelete
  34. Thank you so much dear helping this code solved my errors....@Bafin Husen

    ReplyDelete
  35. I found your blog while searching for the updates, I am happy to be here. Very useful content and also easily understandable providing.. Believe me I did wrote an post about tutorials for beginners with reference of your blog. 
    rpa training in bangalore
    best rpa training in bangalore
    RPA training in bangalore
    rpa course in bangalore
    rpa training in chennai
    rpa online training

    ReplyDelete
  36. This comment has been removed by the author.

    ReplyDelete

  37. Whoa! I’m enjoying the template/theme of this website. It’s simple, yet effective. A lot of times it’s very hard to get that “perfect balance” between superb usability and visual appeal. I must say you’ve done a very good job with this.

    AWS certification Training Online Bangalore
    AWS Certification Training Online Pune
    AWS certification Training Online Chennai
    AWS Online Certification and Training

    ReplyDelete
  38. Well explanation with great coding knowledge. This blog gonna helpful to many. I am expecting these kind blogs in future too.

    Vicky from Devolve (App Development Company in Calgary)

    ReplyDelete
  39. I really enjoy simply reading all of your weblogs. Simply wanted to inform you that you have people like me who appreciate your work. Definitely a great post I would like to read this
    AWS Training in pune
    AWS Online Training

    ReplyDelete
  40. It can be easily understand by everyone. Great tutorial with example codes.

    Pick Way2Smile for any suggestions or doubts regarding an Ionic App Development.

    ReplyDelete
  41. I think it's awesome someone is finally taking notice of our vet's and doing something to help them. I hope all goes well with these articles. More new information i will get after refer that post.
    Mobile App Development Company in Dubai
    Android App Development Company in Dubai

    ReplyDelete
  42. I am see the programming coding and step by step execute the outputs.I am gather this coding more information.It's helpful for me my friend. Also great blog here with all of the valuable information you have.
    aws training in chennai | aws training in annanagar | aws training in omr | aws training in porur | aws training in tambaram | aws training in velachery

    ReplyDelete
  43. Thanks a ton for this informative blog posted up. I am pretty sure the content is going to help many IT students to clear up their doubts.

    data science training in chennai

    ccna training in chennai

    iot training in chennai

    cyber security training in chennai
    ethical hacking training in chennai

    ReplyDelete