{"id":1866,"date":"2015-06-19T07:52:36","date_gmt":"2015-06-19T07:52:36","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=1866"},"modified":"2017-06-21T19:59:46","modified_gmt":"2017-06-21T19:59:46","slug":"posting-data-from-ionic-app-to-php-server","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/codeproject\/posting-data-from-ionic-app-to-php-server\/","title":{"rendered":"Posting data from Ionic app to PHP server"},"content":{"rendered":"

TL;DR<\/h3>\n

This is the simplest example which shows how to POST data from an Ionic<\/a> app to a PHP server.<\/p>\n

The tutorial covering the Ionic version 2 can be found here<\/a>. The tutorial covering the Ionic version 3 can be found here<\/a>.<\/p>\n

Quickstart<\/h3>\n

To see it in action:<\/p>\n

    \n
      \n
    1. Clone the finished project<\/a> from Github<\/li>\n
    2. Run ionic serve<\/span><\/li>\n<\/ol>\n<\/ol>\n
        \n
      1. You should see something like this:
        \n        \"ionic_phpDemo\"<\/a><\/li>\n<\/ol>\n

        If you want to make it work from your server:<\/p>\n

          \n
        1. Clone the finished project<\/a> from Github<\/li>\n
        2. Upload the PHP\/api.php<\/strong> file to your server<\/li>\n
        3. In the www\/js\/app.js<\/strong> file adjust the link<\/strong> variable to point to your server<\/li>\n
        4. Run ionic serve<\/span><\/li>\n<\/ol>\n

          Step by step on how to create this yourself from scratch<\/h3>\n
            \n
          1. Create a new blank Ionic project with:\n
            ionic start ionicServerSendTest blank<\/pre>\n<\/li>\n
          2. Copy the following code (you’ll already have the .run()<\/strong> part, the .controller()<\/strong> part is novelty here) in www\/js\/app.js<\/strong> file:\n
            \/\/ Ionic Starter App\n\n\/\/ angular.module is a global place for creating, registering and retrieving Angular modules\n\/\/ 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)\n\/\/ the 2nd parameter is an array of 'requires'\nangular.module('starter', ['ionic'])\n\n.run(function($ionicPlatform) {\n    $ionicPlatform.ready(function() {\n        \/\/ Hide the accessory bar by default (remove this to show the accessory bar above the keyboard\n        \/\/ for form inputs)\n        if (window.cordova && window.cordova.plugins.Keyboard) {\n            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);\n        }\n        if (window.StatusBar) {\n            StatusBar.styleDefault();\n        }\n    });\n})\n\n.controller('AppCtrl', function($scope, $http) {\n    $scope.data = {};\n\n    $scope.submit = function(){\n        var link = 'http:\/\/nikola-breznjak.com\/_testings\/ionicPHP\/api.php';\n\n        $http.post(link, {username : $scope.data.username}).then(function (res){\n            $scope.response = res.data;\n        });\n    };\n});<\/pre>\n<\/li>\n
          3. On your server, create a api.php<\/strong> file with the following content:\n
            <?php\n    \/\/http:\/\/stackoverflow.com\/questions\/18382740\/cors-not-working-php\n    if (isset($_SERVER['HTTP_ORIGIN'])) {\n        header(\"Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}\");\n        header('Access-Control-Allow-Credentials: true');\n        header('Access-Control-Max-Age: 86400');    \/\/ cache for 1 day\n    }\n\n    \/\/ Access-Control headers are received during OPTIONS requests\n    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {\n\n        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))\n            header(\"Access-Control-Allow-Methods: GET, POST, OPTIONS\");         \n\n        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))\n            header(\"Access-Control-Allow-Headers:        {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}\");\n\n        exit(0);\n    }\n\n\n    \/\/http:\/\/stackoverflow.com\/questions\/15485354\/angular-http-post-to-php-and-undefined\n    $postdata = file_get_contents(\"php:\/\/input\");\n    if (isset($postdata)) {\n        $request = json_decode($postdata);\n        $username = $request->username;\n\n        if ($username != \"\") {\n            echo \"Server returns: \" . $username;\n        }\n        else {\n            echo \"Empty username parameter!\";\n        }\n    }\n    else {\n        echo \"Not called properly with username parameter!\";\n    }\n?><\/pre>\n
            As you can see from the code, the first part is explained in detail in this StackOverflow question<\/a>, and it basically solves the CORS<\/a> issue that you would otherwise run into.<\/p>\n
            The second part, explained in detail in this StackOverflow question<\/a>,  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<\/span>  the data that comes to your PHP server.<\/li>\n
          4. In www\/js\/app.js<\/strong> file adjust the link<\/strong> variable to point to the file on your server<\/li>\n
          5. In www\/index.html<\/strong> file copy the following content:\n
            <!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=\"utf-8\">\n        <meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width\">\n        <title><\/title>\n        <link href=\"lib\/ionic\/css\/ionic.css\" rel=\"stylesheet\">\n        <link href=\"css\/style.css\" rel=\"stylesheet\">\n        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above\n        <link href=\"css\/ionic.app.css\" rel=\"stylesheet\">\n        -->\n        <!-- ionic\/angularjs js -->\n        <script src=\"lib\/ionic\/js\/ionic.bundle.js\"><\/script>\n        <!-- cordova script (this will be a 404 during development) -->\n        <script src=\"cordova.js\"><\/script>\n        <!-- your app's js -->\n        <script src=\"js\/app.js\"><\/script>\n    <\/head>\n    <body ng-app=\"starter\" ng-controller=\"AppCtrl\">\n        <ion-pane>\n            <ion-header-bar class=\"bar-stable\">\n                <h1 class=\"title\">Ionic Blank Starter<\/h1>\n            <\/ion-header-bar>\n\n            <ion-content padding=\"true\">\n                <form ng-submit=\"submit()\">\n                    <label class=\"item item-input item-stacked-label\">\n                        <span class=\"input-label\">Username<\/span>\n                        <input type=\"text\" name=\"username\" placeholder=\"enter username\" ng-model=\"data.username\">\n                    <\/label>\n\n                    <input class=\"button button-block button-positive\" type=\"submit\" name=\"submit\" value=\"Submit to server\">                    \n                <\/form>\n\n                <div class=\"card\">\n                    <div class=\"item item-text-wrap\">\n                        Response: <b ng-bind=\"response\"><\/b>\n                    <\/div>\n                <\/div>\n            <\/ion-content>\n        <\/ion-pane>\n    <\/body>\n<\/html><\/pre>\n
            Here you basically created a form with an username<\/strong> input field and with a submit<\/strong> button. Using AngularJS ng-submit<\/a> you’re saying that once the submit button is clicked AngularJS should handle it within the submit()<\/strong> function which you defined in app.js<\/strong> file before. Input username<\/strong> uses  the ng-model<\/strong> to bind to the variable on the $scope<\/strong> so that you can then use it in your submit()<\/strong> function.<\/li>\n
          6. Run ionic serve<\/span>  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<\/strong>, plugins<\/strong>, scss<\/strong> reside<\/em>).<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
            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…<\/p>\n","protected":false},"author":1,"featured_media":1867,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,43],"tags":[],"class_list":["post-1866","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codeproject","category-ionic"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1866","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=1866"}],"version-history":[{"count":11,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1866\/revisions"}],"predecessor-version":[{"id":3449,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1866\/revisions\/3449"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/1867"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=1866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=1866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=1866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}