Posting data from Ionic app to PHP server

ionic_php

TL;DR

This is the simplest example which shows how to POST data from an Ionic app to a PHP server.

The tutorial covering the Ionic version 2 can be found here.

Quickstart

To see it in action:

    1. Clone the finished project from Github
    2. Run ionic serve
  1. You should see something like this:
    ionic_phpDemo

If you want to make it work from your server:

  1. Clone the finished project from Github
  2. Upload the PHP/api.php file to your server
  3. In the www/js/app.js file adjust the link variable to point to your server
  4. Run ionic serve

Step by step on how to create this yourself from scratch

  1. Create a new blank Ionic project with:
  2. Copy the following code (you’ll already have the .run() part, the .controller() part is novelty here) in www/js/app.js file:
  3. On your server, create a api.php file with the following content:
    As you can see from the code, the first part is explained in detail in this StackOverflow question, and it basically solves the CORS issue that you would otherwise run into.

    The second part, explained in detail in this StackOverflow question,  deals with the way you POST data from Ionic (basically an AngularJS app) to your PHP server. The gist is that AngularJS POSTs by default in a JSON format, and thus you have to json_decode  the data that comes to your PHP server.

  4. In www/js/app.js file adjust the link variable to point to the file on your server
  5. In www/index.html file copy the following content:
    Here you basically created a form with an username input field and with a submit button. Using AngularJS ng-submit you’re saying that once the submit button is clicked AngularJS should handle it within the submit() function which you defined in app.js file before. Input username uses  the ng-model to bind to the variable on the $scope so that you can then use it in your submit() function.
  6. Run ionic serve  from the root directory of your Ionic app (I’m sure you know this, but just in case that’s where the folders like www, plugins, scss reside).
Written by Nikola Brežnjak