{"id":3441,"date":"2017-06-21T19:47:56","date_gmt":"2017-06-21T19:47:56","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=3441"},"modified":"2017-06-21T19:53:02","modified_gmt":"2017-06-21T19:53:02","slug":"posting-data-ionic-3-app-php-server","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/javascript\/ionic3\/posting-data-ionic-3-app-php-server\/","title":{"rendered":"Posting data from Ionic 3 app to a PHP server"},"content":{"rendered":"

TL;DR<\/h3>\n

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

The tutorial covering the Ionic version 1 can be found here<\/a>, and the tutorial covering the Ionic version 2 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. Make sure you’ve got the newest Ionic CLI (see below for instructions)<\/li>\n
    3. Run ionic serve<\/span><\/li>\n
    4. You should see something like this:
      \n      \"ionic2ServerPost\"<\/a><\/li>\n<\/ol>\n<\/ol>\n

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

        \n
      1. Make sure you’ve got the newest Ionic CLI (see below for instructions)<\/li>\n
      2. Clone the finished project<\/a> from Github<\/li>\n
      3. Upload the PHP\/api.php<\/strong> file to your server<\/li>\n
      4. In the src\/pages\/home\/home.ts<\/strong> file adjust the link<\/strong> variable (line #21) to point to your server<\/li>\n
      5. Run ionic serve<\/span><\/li>\n<\/ol>\n

        Getting started with Ionic 3<\/h3>\n

        After neglecting Ionic 3 (and for the most part Ionic 2) for far too long due to the overburdening work I still have on my Ionic 1 apps, I finally got some time to take a look at Ionic 3 and update the most popular post about Ionic on my blog, so here you go and enjoy.<\/p>\n

        In general, from me playing just a bit with Ionic 3, I have to say I love it, so expect some more posts about it soon-ish…<\/em><\/p><\/blockquote>\n

        To install the Ionic SDK and create Ionic 3 projects, you need to install the latest Ionic CLI:<\/p>\n

        npm install -g ionic<\/pre>\n
        You don’t need to worry about this messing up your current ionic CLI since the new one still works with old Ionic 1 projects.<\/p><\/blockquote>\n
        Just for reference, here’s what my ionic info<\/code> says now:<\/p>\n
        $> ionic info \n\nglobal packages:\n\n    @ionic\/cli-utils : 1.4.0\n    Ionic CLI        : 3.4.0\n\nlocal packages:\n\n    @ionic\/app-scripts              : 1.3.7\n    @ionic\/cli-plugin-ionic-angular : 1.3.1\n    Ionic Framework                 : ionic-angular 3.4.2\n\nSystem:\n\n    Node       : v8.0.0\n    OS         : macOS Sierra\n    Xcode      : Xcode 8.3.3 Build version 8E3004b \n    ios-deploy : 1.9.1 \n    ios-sim    : 5.0.13 \n    npm        : 5.0.1 \n<\/pre>\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 Ionic3ServerSendTest blank<\/pre>\n<\/li>\n
        2. Copy the following code to src\/pages\/home\/home.html<\/strong> file:\n
          <ion-header>\n <ion-navbar>\n <ion-title>\n Ionic3 Server Send Test\n <\/ion-title>\n <\/ion-navbar>\n<\/ion-header>\n\n<ion-content padding>\n <ion-list>\n <ion-item>\n <ion-label floating>Username<\/ion-label>\n <ion-input type=\"text\" name=\"username\" [(ngModel)]=\"data.username\"><\/ion-input>\n <\/ion-item>\n\n <button ion-button block (click)=\"submit()\">Submit to server<\/button>\n <\/ion-list>\n\n <ion-card>\n <ion-card-header>\n Response\n <\/ion-card-header>\n\n <ion-card-content>\n <b>{{data.response}}<\/b>\n <\/ion-card-content>\n <\/ion-card>\n<\/ion-content>\n<\/pre>\n
          Here you basically created a form with an username<\/strong> input field and with a button which acts as a submit<\/strong> button.<\/p>\n
          Once the button is clicked AngularJS should handle it within the submit()<\/strong> function which we will define in our src\/pages\/home\/home.ts<\/strong> file (shown below).<\/p>\n
          Input username<\/strong> uses  the new syntax for ng-model<\/strong> , and it binds to the variable data.username<\/strong>, so that you can then use it in your submit()<\/strong> function (shown below).<\/p>\n
          Components are a bit different in Ionic 3 now, so I encourage you can take a look at the official documentation<\/a>.<\/li>\n
        3. On your server, create an 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 to your PHP server. The gist is that since we POSTed in a JSON format, we have to json_decode<\/span>  the data that comes to your PHP server.<\/li>\n
        4. To the file src\/pages\/home\/home.ts<\/strong> file copy the following content and adjust the link<\/strong> variable to point to the file on your server:\n
          import { Component } from '@angular\/core';\nimport { NavController } from 'ionic-angular';\nimport { Http } from '@angular\/http'; \/\/https:\/\/stackoverflow.com\/questions\/43609853\/angular-4-and-ionic-3-no-provider-for-http\n\n@Component({\n selector: 'page-home',\n templateUrl: 'home.html'\n})\n\nexport class HomePage {\n data:any = {};\n\n constructor(public navCtrl: NavController, public http: Http) {\n this.data.username = '';\n this.data.response = '';\n\n this.http = http;\n }\n\n submit() {\n var link = 'http:\/\/nikola-breznjak.com\/_testings\/ionicPHP\/api.php';\n var myData = JSON.stringify({username: this.data.username});\n \n this.http.post(link, myData)\n .subscribe(data => {\n this.data.response = data[\"_body\"]; \/\/https:\/\/stackoverflow.com\/questions\/39574305\/property-body-does-not-exist-on-type-response\n }, error => {\n console.log(\"Oooops!\");\n });\n }\n}<\/pre>\n
          As with the Ionic 2 tutorial<\/a>, things have changed a lot since Ionic 1, but in Ionic 3 (if you come from Ionic 2) you shouldn’t have any problems. Anyways, practice makes perfect, so make sure you put in the hours of deliberate practice<\/a>.<\/p>\n
          In this file, we <\/strong>import the Http<\/strong> component from Angular. You can check out the link in the comment to learn that you also need to import and inject HttpModule <\/strong>in src\/app\/app.module.ts <\/strong>(two new lines that I’ve added are bolded):
          \n<\/strong><\/p>\n
          import { BrowserModule } from '@angular\/platform-browser';\nimport { ErrorHandler, NgModule } from '@angular\/core';\nimport { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';\nimport { SplashScreen } from '@ionic-native\/splash-screen';\nimport { StatusBar } from '@ionic-native\/status-bar';\nimport { HttpModule} from '@angular\/http';<\/strong>\n\nimport { MyApp } from '.\/app.component';\nimport { HomePage } from '..\/pages\/home\/home';\n\n@NgModule({\n declarations: [\n MyApp,\n HomePage\n ],\n imports: [\n BrowserModule,\n IonicModule.forRoot(MyApp),\n HttpModule<\/strong>\n ],\n bootstrap: [IonicApp],\n entryComponents: [\n MyApp,\n HomePage\n ],\n providers: [\n StatusBar,\n SplashScreen,\n {provide: ErrorHandler, useClass: IonicErrorHandler}\n ]\n})\nexport class AppModule {}<\/pre>\n
          Inside the HomePage<\/strong> class, we now have a constructor where we’re setting some default values. Important to note, see how we’re passing in Http <\/strong>via the constructor parameter.<\/p>\n
          Inside the submit<\/strong> function we use the http service to post to our API endpoint with some data. Make note of how we use the subscribe<\/strong> function to handle data once it arrives. Also, make sure you check out the StackOverflow link in the comment as a solution of how to access plain text response.<\/li>\n
        5. Run ionic serve<\/span>  from the root directory of your Ionic app<\/li>\n<\/ol>\n
          That’s all folks, I hope this tutorial helps you in starting your journey towards Ionic3 & Angular4!<\/p>\n
          \n
          Posting data from #Ionic<\/a> 3 app to a #PHP<\/a> server https:\/\/t.co\/QYKiQtq1kJ<\/a><\/p>\n
          — Nikola Bre\u017enjak (@HitmanHR) June 21, 2017<\/a><\/p><\/blockquote>\n