Ionic, Angularjs, Mysql http post

Question

I am just found out an ionic framework and was trying to learn it, but i meet some obstacle that i cannot figure out, tried to search for google does not help me much.

I am trying to create a login form that will be checked to mysql database, but it does not work, i am not sure where is the problem.

Here is my code

Login.html

<ion-header-bar align-title="center" class="bar-balanced">
   <h1 class="title">Test</h1>
</ion-header-bar>
<ion-view title="Sign-In">
  <ion-content class="padding has-header">
    <ion-list>
       <ion-item>
          <input type="text" ng-model="username" placeholder="Username">
       </ion-item>
       <ion-item>
          <input type="password" ng-model="password" placeholder="Password">
       </ion-item>
    </ion-list>

    <button nav-clear class="button button-block button-balanced" ng-click="LogIn()">Login</button>
  </ion-content>
</ion-view>

login.php

<?php
   // check username or password from database
   $postdata = file_get_contents("php://input");
   $request = json_decode($postdata);
   $user = $request->user;
   $password = $request->password;

   mysql_connect("localhost", "username", "password");
   mysql_select_db("dbname");
   $results = mysql_query("SELECT name, city FROM tbl_user WHERE   name='".user."' AND city='".$password."' LIMIT 1") or die('{"error":"Login error! Code: 003"}');
   $match  = mysql_num_rows($results);
   if($match > 0 ){
      echo "1";
   }else{
      echo "0";
   }
?>

app.js

angular.module('ionicApp', ['ionic','starter.controllers'])
.config(function($stateProvider, $urlRouterProvider) {

$stateProvider

    .state('app', {
       url: "/app",
       abstract: true,
       templateUrl: "templates/menu.html",
       controller: 'AppCtrl'
     })

    .state('login', {
       url: "/login",
       templateUrl: "templates/login.html",
       controller: 'LoginCtrl'
    });

  $urlRouterProvider.otherwise('/login');
});

controller.js

angular.module('starter.controllers', [])

.controller('LoginCtrl', function($scope, $state, $http) {
  $scope.LogIn = function() {
    var request = $http({
        method: "post",
        url: "http://www.mywebsite.com/api/login.php",
        data: {
        user: $scope.username,
        password: $scope.password
      },
       headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      });
      /*Successful HTTP post request or not */
      request.success(function (data){
        if (data == '1'){
          $scope.responseMessage = "You are in";
        }
        else {
          $scope.responseMessage = "Username or Password is incorrect";
        }
      })
  }
});

index.html

<!DOCTYPE html>
<html ng-app="ionicApp">
  <head>
   <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">


    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <!--<script src="js/services.js"></script>-->
  </head>
  <body>
      <ion-nav-view animation="slide-left-right"></ion-nav-view>
   </body>

It cannot popup the message. Someone can point me where is the problem?

Thanks before

I found out that the problem is CORS, have enabled the CORS but another problem occur is that even i typed a correct combination of user and password, its still said that is wrong username and password. How do i checked the query that used by the login api? — Joseph
– Joseph, Commented Jan 11, 2016 at 4:53
why the controller.js is unable to get the value of the input text from login.html? tried in console that it said 'TypeError: Cannot read property 'username' of undefined' — Joseph
– Joseph, Commented Jan 11, 2016 at 6:11

beaver · Accepted Answer · 2016-01-11 12:30:57Z

1

try to use an object (for example $scope.user) in which to store username and password. So the code becomes as below:

Login.html

<ion-list>
   <ion-item>
      <input type="text" ng-model="user.username" placeholder="Username">
   </ion-item>
   <ion-item>
      <input type="password" ng-model="user.password" placeholder="Password">
   </ion-item>
</ion-list>

controller.js

.controller('LoginCtrl', function($scope, $state, $http) {
  $scope.user = {};
  $scope.LogIn = function() {
    var request = {
        method: "post",
        url: "http://www.mywebsite.com/api/login.php",
        data: {
        user: $scope.user.username,
        password: $scope.user.password
      },
       headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      };
      /*Successful HTTP post request or not */
      $http(request).then(function (response){
        if (response.data == '1'){
          $scope.responseMessage = "You are in";
        }
        else {
          $scope.responseMessage = "Username or Password is incorrect";
        }
      })
  }
});

Another suggestion is to use $http in the right form:

$http({
  ...
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

See https://docs.angularjs.org/api/ng/service/$http

N.B.: if you want you can pass the user object directly as argument of LogIn() method.

edited Jan 11, 2016 at 12:30

answered Jan 11, 2016 at 9:07

beaver

17.8k2 gold badges43 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Joseph Over a year ago

tried your code, but did not solve the error, same error occured, tried to pass user object directly as LogIn(user) did not do any help.

beaver Over a year ago

if you add console.log($scope.user); inside $scope.LogIn() function you receive an empty object?

Joseph Over a year ago

yes, i will receive undefined status in console log.

beaver Over a year ago

Please share also index.html. Another suggestion is to use $http in the right form: $http({...}).then(function successCallback(response) { ... }, function errorCallback(response) { ... }); (see docs.angularjs.org/api/ng/service/$http)

Joseph Over a year ago

added index.html, not sure how to use the GET method, never used it before. any help?

|

Collectives™ on Stack Overflow

Ionic, Angularjs, Mysql http post

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related