1

I am new to ionic and I prefer to use ionic v1 instead of v2 or above. Now, I downloaded the ionic files through CLI. And I installed it on my drive d:. And I am starting to make a sample project with blank template. While coding, I am trying to send datas to my php file and it gives me an error of http://localhost:8100/send.php 404 Not Found. I try to put my PHP File Outside of www/ folder and inside and still error exist. Why? I already searched a lot of stuffs regarding on this matter but, I don't understand them. Here;s my code: 

$scope.send = function(){
      $http.post('send.php',{
          'name': $scope.name
      }).then(function(response){
          // msg
      });
}

I hope somebody can help me regarding with my issue. Thanks in advance!

By the way, here's my folder structure:

Drive D > CORDOVA > sample_proj > myapp > www > index.html, send.php

PHP

<?php

   if(isset($_SERVER['HTTP_ORIGIN'])){
      header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");   
      header('Access-Control-Allow-Credentials: true');
      header('Access-Control-Max-Age: 86400') // cache for 1 day
    }

    if($_SERVER['REQUEST_METHOD'] == 'OPTIONS'){
        if(isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
         header("Access-Control-Allow-Methods: GET, POST, OPTIONS");

    if(isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
        exit(0);
    }

    $data = json_decode(file_get_contents("php://input"));
    if(!$data){
      echo "Not called properly";
    }else{
        echo $data->name;
    }


?>
duterte
  • 39
  • 8
  • what is address of this angular page? Can't put the `send.php` outside of the web root if you need to access it using $http – charlietfl Apr 11 '17 at 00:35
  • see updated code @charlietfl – duterte Apr 11 '17 at 01:49
  • try putting a simple `echo "some text"; exit;` at top of that file and see if you can open it in browser at same address. Curious also if you are running php server ... or perhaps running a node server inside the project – charlietfl Apr 11 '17 at 01:52
  • I am running through node – duterte Apr 11 '17 at 01:59
  • I am running on node server sir @charlietfl – duterte Apr 11 '17 at 02:01
  • ok...there's the reason. Your node config is not set up for that route and probably not set up to serve compiled php either – charlietfl Apr 11 '17 at 02:06
  • How do I setup properly sir? So that I can post data to php and save to database. Because later on, I will upload it online. @charlietfl – duterte Apr 11 '17 at 02:09
  • might be easiest to think of it as 2 projects. One for back end and one for front end. I'm assuming you are used to using php and know how to get a php project running quickly. The only issue you would have is running on a different port locally and would have to implement CORS due to different port origin for the ajax. Not sure what you are running on host....assume it is apache/php? – charlietfl Apr 11 '17 at 02:12
  • @charlietfl yes I am running apache/php. I am new to ionic, a weeks ago – duterte Apr 11 '17 at 02:15
  • OK...so what I just said does make sense then. Use whatever LAMP/Wamp/Xamp stack you have to open your php on another port of localhost – charlietfl Apr 11 '17 at 02:16
  • This post will help for the CORS http://stackoverflow.com/a/9866124/1175966. Note I was the last one to edit that answer...have used it a lot myself – charlietfl Apr 11 '17 at 02:17
  • Then what it boils down to is you can use all the node CLI stuff for the front end development....and the php would be normal to you – charlietfl Apr 11 '17 at 02:21
  • So, I will put that code in my `send.php` sir? @charlietfl – duterte Apr 11 '17 at 02:29
  • that CORS code...yes. And make sure to call `cors();` function – charlietfl Apr 11 '17 at 02:31
  • Thanks sir! ILL TRY IT RIGTH AWAY! @charlietfl – duterte Apr 11 '17 at 02:38
  • By the way, Can I contact you through facebook? @charlietfl – duterte Apr 11 '17 at 02:38
  • I never use facebook. I am on this site a lot though – charlietfl Apr 11 '17 at 02:39
  • Still not found sir! @charlietfl – duterte Apr 11 '17 at 02:52
  • are you running php server on another port which you should be? Will need full localhost path to make request ....`http://localhost:3000/send.php` for example. Think of it the same as calling a completely different website – charlietfl Apr 11 '17 at 02:53
  • I don't know sir. I am new to ionic and node. @charlietfl , See updated post sir above! – duterte Apr 11 '17 at 02:55
  • ok...well you know the node page works....go to wherever you keep other local php stuff you work on and put send.php there..open that in browser and copy the full address to use for the ionaic ajax requests – charlietfl Apr 11 '17 at 02:56
  • @charlietfl I tried to locate my `send.php` through the url. like this: `http://192.168.1.16:8100/send.php`. And It downloaded the `send.php` file and there's a message from my console: `2Resource interpreted as Document but transferred with MIME type application/octet-stream: "http://192.168.1.16:8100/ionic.php".` – duterte Apr 11 '17 at 02:58
  • is send.php in same place you use other local php you work on? – charlietfl Apr 11 '17 at 02:59
  • No sir. My other php projects located at `Drive c:/xampp/htdocs/php_projects_here`. While this new one, I install it on `Drive d:/Cordova/sample_proj/myapp/` – duterte Apr 11 '17 at 03:02
  • right!! put send.php in xampp! Again...think of this as 2 projects....one for the front end (Ionic/node) and one for back end (php) – charlietfl Apr 11 '17 at 03:12
  • Still not found sir :( @charlietfl I put `send.php inside xampp folder` and `inside htdocs folder` – duterte Apr 11 '17 at 03:16
  • It's maybe on my `$http.post` address sir? or not? @charlietfl – duterte Apr 11 '17 at 03:18
  • Wait sir! I tried to changed my `$http.post` address from `send.php` to `http://192.168.1.16/send.php` and I got a message! `(index):1 XMLHttpRequest cannot load http://192.168.1.16/send.php. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.1.16:8100' is therefore not allowed access.` @charlietfl – duterte Apr 11 '17 at 03:20
  • ok...open send.php in browser with only a simple `echo "some text"; exit;` at top . Then copy the whole address `'http://localhost/my_project/send.php` to the `$http` – charlietfl Apr 11 '17 at 03:21
  • ok...that's the CORS message...you dind't call `cors()` – charlietfl Apr 11 '17 at 03:22
  • I already did sir. @charlietfl – duterte Apr 11 '17 at 03:27
  • that cors code you posted above looks different than the code i linked to. Shouldn't be echo anything for OPTIONS request and that's why there is an `exit()` for method OPTIONS – charlietfl Apr 11 '17 at 03:32
  • Thank you so much sir! It now works for me!!!!! <3 – duterte Apr 11 '17 at 03:33
  • cool....the $http is working?? – charlietfl Apr 11 '17 at 03:34
  • @charlietfl, Yes sir! Thank you so much!!! I love you! – duterte Apr 11 '17 at 03:38
  • do some reading about what CORS is and how it works....will be worth knowing later. Glad it all worked – charlietfl Apr 11 '17 at 03:40
  • Thanks sir! By the way sir. I am planning to make a mobile app and its server is online. Is that possible? I mean, I want to make an online mobile app. So, I also need an online server. Is that okay? – duterte Apr 11 '17 at 03:45
  • yes...most mobile apps connect to internet for data – charlietfl Apr 11 '17 at 03:49

1 Answers1

0

After debugging and asking many questions to @charlietfl. My problem was solved! Thanks to him! As he said, "Think of your projects as a 2 projects (first for your backend (php) and second to your frontend(ionic,etc.))". I just put my send.php file inside htdocs folder in my xampp folderand change the $http addres to : http://192.168.1.16/send.php. And of course, for it to works perfectly I put the CORS in it just see my post! And it solved the problem!

duterte
  • 39
  • 8