CODEWITHSUNDEEP
phphtmlangularjs
ella
ella

Reputation: 183

Unable to call php from AngularJS

Hi I'm totally new to web developemnt. I have a html file, which contains angularJS code, and which calls a .php file. Both on my local folder.

I have searched online, but:

  1. Install server is not an option because this is going to be used by others as well. And we don't have admin permission on our own machine.

  2. I tried '"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" - -allow-file-access-from-file file:///C:/Users/ella/Test/eClerkUpdateURL/index2.html' and still get same error

What are my options here? 1) creating an api with that PHP code? 2) Put the code to another application server , and add the folder to IIS? 3) Just use AngujarJS to write the database update part so that there is no need to call another script?

Code:

<!DOCTYPE html>  
 <!-- index.php !-->  
  <!-- https://www.webslesson.info/2016/09/angularjs-tutorial-with-php-insert-data-into-mysql-database.html !-->  
 <html>  
      <head>  
           <title>Database Update Tool</title>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
      </head>  
      <body>  
           <br /><br />  
           <div class="container " style="width:300px;">  
                <h3 align="center">Database Update Tool</h3>  
                <div ng-app="myapp" ng-controller="usercontroller">  
                     <label>Table Name</label>  
                     <input type="text" name="firstname" ng-model="firstname" class="form-control" />  
                     <br />  
                     <label>Condition Name</label>  
                     <input type="text" name="lastname" ng-model="lastname" class="form-control" />  

                     <br /> 
                     <input type="text" name="condition_name" ng-model="condition_name" class="form-control" />  
                     <br />  
                     <input type="Search" name="search_button" class="btn btn-info" ng-click="insertData()" value="Search"/>  
                </div>  
           </div>  

      </body>  
 </html>  
 <script>  
 var app = angular.module("myapp",[]);  
 app.controller("usercontroller", function($scope, $http){  
    $scope.message = $scope.firstname
      $scope.insertData = function(){  
           $http.get(  
                "Search.php",  
                {'firstname':$scope.firstname, 'lastname':$scope.lastname}  
           ).success(function(data){  
                alert(data);  
                $scope.firstname = null;  
                $scope.lastname = null;  
           });  
      }  
 });  
 </script>

Error: Access to XMLHttpRequest at 'file:///C:/Users/jy70606/Test/eClerkUpdateURL/Search.php' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Upvotes: 0

Views: 73

Answers (1)

Abid Suleman Ahmed
Abid Suleman Ahmed

Reputation: 146

Calling .php files from a folder normally doesn't execute them. A server is needed to execute the script then return the results. The CORS error can only be resolved from the API that is receiving the request.

Plus, you can't access Database with Angular as it runs client-side, i.e on the browser. You would need a server-side code for that, like PHP, Python, Node etc.

If you want to save minimal data, Browser Local Storage can be used. Otherwise you would need a server for that. If you can not install one in your local machine perhaps buy an online one or use a free online one

Upvotes: 1

Related Questions