e2u2017 Posting data rom lori 2 app to a PHP server - Nikola Bredriak blog B (ainiaad NIKOLA BRE READ. WRITE. RE lONIC2 Posting data from lonic 2 app to a PHP ser This website uses cookies to improve your experience. Welll assume you're ok with this, but you can opt-out if you wish, Accept Read More itp rikola-oreznjak comibloglavascrptionicaJpasing-dte-trom-ionic-2-app! 116e2u2017 Posting data rom lori 2 app to a PHP server - Nikola Bredriak blog @ iaiaa The tutorial covering the lonic version 2 can be found here. The tutorial covering the version 3 can be found here. Quickstart To see it in action: 1. Clone the finished project from Github 2, Make sure you've got the newest lonic beta CLI (see below for instructions 3, Run 4, You should see something like this Home Usemame Nikola Response Server returns: Nikola If you want to make it work from your server: 1 Make sure you've got the newest lonic beta CLI (see below for instructions) 2, Clone the finished project from Github 3, Upload the PHP/api.php file to your server 4_In the app/pages/home/homejs file adjust the link variable (line #18) to poir This website uses cookies to improve your experience. Well assume you're ok with this, but you can opt-out if you wish, Accept Read More itp rikola-oreznjak comibloglavascrptionicaJpasing-dte-trom-ionic-2-app!saan017 Posing dla om lrc 2 app toa PHP server- Nikola Break log (% hitman) @ (aia By now you probably have heard that lonic is in beta for its version 2, which closely follows Angular 2. You can find a Lot more lonic 2 related tutorials on my friend Gajotres site. To install the lonic SDK and create lonic 2 projects, you need to install the latest bet release’ (i [npn install =a You don't need to worry about this messing up your current ionic CLI since the bete release has all the functionality to work with both V1 and V2 projects. Step by step on how to create this yourself from scra 1. Create a new blank lonic project with: I [ionic start Tonic2ServerSendTest blank 2. Copy the following code in app/pages/home/home.html file: ‘ Home Username button round block (click)="submit()">Submit to server Response This website uses cookies to improve your experience. Well assume you're ok with this, but you can opt-out if you wish Accept Read More itp rikola-oreznjak comibloglavascrptionicaJpasing-dte-trom-ionic-2-app! anse2u2017 Posting data rom lori 2 app to a PHP server - Nikola Bredriak blog (@ (ataan) As you can see, the syntax is a bit different since lonic2 uses Angular2. Once the button is clicked AngularJS should handle it within the submit() function which will define in our app/pages/home/homejs file (shown below) Input username uses the new syntax for ng-model as well, and it binds to the variable data.username, so that you can then use it in your submit() function (s below). Also, components are a bit different in lonic now, and | encourage you can take look at the official documentation, 3. On your server, create an api.php file with the following content: 1 | usernane; 2 2B if (Susernane != "") { 23 echo "Server returns: " . Susernane; 30 i 31 else This website uses cookies to improve your experience. Welll assume you're ok with this, but you can opt-out if you wish, Accept Read More hitptowy:ikola-oreznjak.com/blogfavascrptionicalpasting-dta-from-ionic-2-app! ansaan017 Posting aa om lr 2 spp PHP server - Nikola Breriak bog @ (/ditman) iN WE HEL ‘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 way you POST data from lonic to your PHP server. The gist is that since we POS a JSON format, we have to the data that comes to your PHP server. 4, In app/pages/home/homejs file adjust the link variable to point to the file or server 5. In app/pages/home/homejs file copy the following content TApOrE THER] Fon angULarZ7AEED ePagect *build/pages/home/home. html, » export class HomePage constructor¢http: this.data = 0; this. data.username this. data. response this.http = http; ink = "http://nikola-breznjak.com/_testings/ionicPHP/api .php" ; SON. stringify({username: this.data.usernane}); var data = this.http.postClink, data) i { response = data. body; 3 4 5 6 7 8 9 10 11 2 3 4 15 16 17] submitc 1B 19 20 21 2 23 24 25 Le. Log" Oooops!"); 26 27 28 Again, as | said, some (a lot) of things have changed in Angular 2, and at first gle you really may not like it (th, | know | didn’t). But, that will change with usage. < worries, This website uses cookies to improve your experience. Welll assume you're ok with this, but you can opt-out if you wish, Accept Read More hitptowy:ikola-oreznjak.com/blogfavascrptionicalpasting-dta-from-ionic-2-app! 518e2u2017 Posting data rom lori 2 app to a PHP server - Nikola Bredriak blog @ (ata) AIIYULEt, IESPELUVEYY, HIEH WE Te SeLUNY WIE Faye Leniyiaueure WU Ur file, Inside the HomePage class we now have a constructor where we're setting sor default values. Important to note, see how we're passing in Http via the constr. parameter. Again. | won't go into details of using this, as | mentioned you can ta look at a lot more in depth tutorials on Gajotres. Inside the submit function we use the http service to post to our API endpoint » some data. Make note of how we use subscribe to handle data once it arrives. 6, Run [ionic se 7] from the root directory of your lonic app 7. Hope this tutorial helps you in starting your journey towards (lonic + Angular)_2 Share this: v i, c f§ vy @®@ G WRITTEN BY NIKOLA BREZNJAK This website uses cookies to improve your experience. Well assume you're ok with this, but you can opt-out if you wish Accept Read More itp rikola-oreznjak comibloglavascrptionicaJpasing-dte-trom-ionic-2-app! ense2u2017 Posting data rom lori 2 app to a PHP server - Nikola Bredriak blog @ (cailenaa KELAILD PUSIS sy) SURELY YOU'RE JOKING, MR. FEYNMAN! ~ THE WAR OF ART RICHARD P. FEYNMAN GOLANG ZAGREB — FIRST WORKS Feb ary 28, 2017 November 26, 2015 23 COMMENTS JOSIPA January 19, 2016 at 431 pm Great, glad to see you started with lonic 2 tutorials! PICCAZA February 12, 2016 at 6:49. am Very thank full for this tutorials. How to send data to loopback serv from ionic? | have both these running in different URL. Is it possible can we put ionic2 in loopback server. Now when | am trying to pos loopback from ionic2 getting 422 error. Thanks. NIKOLA_ADMIN February 12, 2016 at 656 am This website uses cookies to improve your experience. Well assume you're ok with this, but you can opt-out if you wish Accept Read More itp rikola-oreznjak comibloglavascrptionicaJpasing-dte-trom-ionic-2-app! m6e2u2017 Posting data rom lori 2 app to a PHP server - Nikola Bredriak blog (B (aaa) would go to loopback's site/forum and ask for more info there DIRK May 9, 2016 at 4:47 am ‘Works like a charm. The syntax for the home.html template has changed a little: Username Submit to server And the default project created with ‘ionic start’ doesn't use the typescript version anymore, In which case the first lines of code in home js will look like: fnport {Page} fron "ionic-angular*; // note different path! inport (Http) from ‘angular2/nttp's aPage({ ‘tenplateUrl: ‘build/pages/hone/hone. htl Y export class HomePage { static get parameters() { return [[Http]]5 x constructor(http) { this.http hetps this.data = Qs ‘this.data.usernane = this.data.response = SSS This website uses cookies to improve your experience. Well assume you're ok with this, but you can opt-out if you wish, Accept Read More hitptowy:ikola-oreznjak.com/blogfavascrptionicalpasting-dta-from-ionic-2-app! ane2u2017 Posting data rom lori 2 app to a PHP server - Nikola Bredriak blog @ (atin NIKOLA BREZNJAK May 9, 2016 at 5:07 am Thanks! I've updated the comment so that it includes the code DIRK May 9, 2016 at 6:48. am Hi Nikola, The HTML in the first part of my post is not displaying Also, | just generalised the code to accept larger JSON objects, wt would like to share. How do | display code in this forum? May 9, 2016 at 7.06 am Hi Dirk, You can just post the code and I'll approve it through the admir Thanks! DIRK May 9, 2016 at 739 am In homejs, | created a more complex JSON object: g NIKOLA BREZNJAK var data = JSON. stringify({ glossary: { ‘title: "example glossary", This website uses cookies to improve your experience. Well assume you're ok with this, but you can opt-out if you wish Accept Read More itp rikola-oreznjak comibloglavascrptionicaJpasing-dte-trom-ionic-2-app! onee2u2017 @ aN 5 Posting data rom lori 2 app to a PHP server - Nikola Bredriak blog 1D: "SGML", Sortas: "soit GlossTern: “Standard Generalized Markup Language”, Acronym: *SGIL", Abbrev: “1S0 887931986", GlossbeF: ( para: “A metarnarkup language, used to create markup Tanguages such a5 DocBook.", GlossSeeAlso: ["GML", "XML"] hb Glosssee: “markup” i } } Ys Then in the php file, | adjusted the code to catch errors and gener: reading any JSON object: Spostdata = file_get_contents("php://input"); If (isset(Spostdata)) { // wef: nttp://php.net/manual/en/function.json-decode. php if (Json_last_error() SON_ERROR_NONE) { $Jsonfterator = new RecursiverteratorTterator( new RecursiverrrayTterator(json_decode(Spostdata, TRUE)), Recursivelteratoriterator: :SELF_FIRST) ; foreach ($jsontterator as $key => $val) ( Af(As_array($val)) ¢ This website uses cookies to improve your experience. Well assume you're ok with this, but you can opt-out if you wish, Accept Read More itp rikola-oreznjak comibloglavascrptionicaJpasing-dte-trom-ionic-2-app! s018e2u2017 Posting data rom lori 2 app to a PHP server - Nikola Bredriak blog @ (ais } else echo "Not in JSON format! !"; y y else { echo "Not called with proper paraneter!"; y Lastly, in home.html. | replaced the 'b' tag surrounding I{data.respe with the ‘pre’ tag so that the raw data gets displayed. ARIFUL ALAM June 18, 2016 at 8:44 pm Hello, Followed the way you described, But showing me blank page, Not on screen. When checked inspect tool, found showing some error here is the link of the image of error. https://nimbus.everhelper.me/client/notes/share/500219/qngwt xiylptstxf Regards MARTIN June 22, 2016 at 9:03 pm Hello , | have a problem when run IONIC SERVE The error message is /ionic2php/app/pages/home/home.ts(11,14); Error T$2339: Prop This website uses cookies to improve your experience. Welll assume you're ok with this, but you can opt-out if you wish, Accept Read More itp rikola-oreznjak comibloglavascrptionicaJpasing-dte-trom-ionic-2-app! wwee2u2017 Posting data rom lori 2 app to a PHP server - Nikola Bredriak blog @ (ais ALEX November 14, 2016 at 10:25 pm I have the same problem @ Here -> http://:imgur.com/NrVBzuQ.png BRODY July 18, 2016 at 1122 pm how do you encrypt the connection? do | add https:// to the link ir file? does the domain need to have a ssl certificate? NIKOLA BREZNJAK July 19, 2016 at 5:31am You can add https:// only if the domain has a SSL cert, yes. REHAN January 9, 2017 at 12:00 pm hy! iam new on ionica, i have used your code to get data from from pt but when i run ionic serve got some error. Uncaught Error: Cannot find module ‘angular2/http" please help This website uses cookies to improve your experience. Well assume you're ok with this, but you can opt-out if you wish Accept Read More itp rikola-oreznjak comibloglavascrptionicaJpasing-dte-trom-ionic-2-app! raePosting data rom lori 2 app to a PHP server - Nikola Bredriak blog Hi Rehan, Please try import { Http } from ‘@angular/http' AJ March 27, 2017 at 4:32 pm Hi REHAN, lused this code but on execution it gives this error on console. XMLHitpRequest cannot load [url] No ‘Access-Control-Allow-Origi header is present on the requested resource, Origin ‘http://localhost:8100' is therefore not allowed access. Oooops! What could be the issue ? MAUCOSTI May 9, 2017 at 652 pm if you teste in localhost and the api is a extrenal source, you ne put in the external source (api) « Access-Control-Allow-Origin: * the api is in PHP file add in the header; header(“Access-Control-Allow- Origin: “"); header(“Access-Control-Allow-Methods: PUT, GET, POST, DELE OPTIONS’); header(‘Access-Control-Allow-Headers: * Id May 12, 2017 at 327 pm This website uses cookies to improve your experience. Well assume you're ok with this, but you can opt-out if you wish Accept Read More itp rikola-oreznjak comibloglavascrptionicaJpasing-dte-trom-ionic-2-app! 136e2u2017 @ (ata) Posting data rom lori 2 app to a PHP server - Nikola Bredriak blog NIKOLA BREZNJAK May 12, 2017 at 8.13 pm Hey, yes, thank you for the nudge - | will be updating it over th weekend and will ping you when done. Thanks for a nudge @ NIKOLA BREZNJAK June 21, 2017 at 7:58 pm Hey J, 'm happy to announce that the post for how to post da from lonic 3 app to the PHP server is live here: http://www.niko breznjak.com/blog/javascript/ionic3/posting-data-ionic-3-ap php-server/ RUBY June 15, 2017 at 632 am Hi, | really like your tutorials but | can't seem to find Posting data fr lonic 3 app to a PHP server NIKOLA BREZNJAK June 15, 2017 at 640 am Hey Ruby, thank you very much! | plan on publishing that post tomorrow, just polishing it up. | will ping you here when it's ontit Thanks once again! NIKOLA BREZNJAK June 21, 2017 at 758 pm Hey Ruby, I'm happy to announce that the post for how to post This website uses cookies to improve your experience. Well assume you're ok with this, but you can opt-out if you wish, Read More itp rikola-oreznjak comibloglavascrptionicaJpasing-dte-trom-ionic-2-app! vanee2u2017 Posting data rom lori 2 app to a PHP server - Nikola Bredriak blog @ (cailenaa LEAVE A COMMENT Name (required) Mail (required) Website Im not a robot reCAPTCHA AMENT Notify me of follow-up comments by email, Notify me of new posts by email, This website uses cookies to improve your experience. Well assume you're ok with this, but you can opt-out if you wish Accept Read More itp rikola-oreznjak comibloglavascrptionicaJpasing-dte-trom-ionic-2-app! 1518e2u2017 Posting data rom lori 2 app to a PHP server - Nikola Bredriak blog B (ainiaad ENGINEERS "There's no short-term solution for a long-ter. "Everything around you that you call life was made up by people i "Hard work beats talent when talent doesn't we © 2016 copyright Nikola Breznjak This website uses cookies to improve your experience. Welll assume you're ok with this, but you can opt-out if you wish, Accept Read More hitptowy:ikola-oreznjak.com/blogfavascrptionicalpasting-dta-from-ionic-2-app! 1816