简体   繁体   中英

How to connect my ionic app with MySQL database?

I am not able to connect to the database what should be the syntax when I have created the database (myDb) using phpMyAdmin. I have placed signup.php on the server ie www folder. Please point out if there is some other mistake I have made in this code.

signup.html:

<ion-header-bar class="bar-positive">
<h2 class="title">SignUp</h2>
</ion-header-bar>

<ion-view view-title="SignUp" name="signup-view">
    <ion-content class="has-header">
    <div class="list list-inset">

   <label class="item item-input item-floating-label">
   <span class="input-label">Enter Username</span>
     <input class="form-control" type="text" ng-model="userdata.username" placeholder="Enter Username">
   </label>

   <label class="item item-input item-floating-label">
   <span class="input-label">Enter Your Email</span>
     <input type="text" ng-model="userdata.email" placeholder="Enter Your Email">
   </label>

   <label class="item item-input item-floating-label">
   <span class="input-label">Enter Your Password</span>
     <input class="form-control" type="password" ng-model="userdata.password" placeholder="Enter Your Password">
   </label>

   <button class="button button-block button-calm" ng-click="signUp(userdata)">SignUp</button><br>
   <span>{{responseMessage}}</span>
   </div>
   </ion-content>
 </ion-view>

signup.php:

<?php
    header("Content-Type: application/json; charset=UTF-8");
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST');

    $postdata = file_get_contents("php://input");
    $request = json_decode($postdata);
    $email = $postdata->email;
    $password = $postdata->password;
    $username = $postdata->username;

    $con = mysql_connect("localhost","root",'') or die ("Failed to connect to MySQL: " . mysql_error());;
    mysql_select_db('myDb', $con);

    $qry_em = 'select count(*) as cnt from users where email="' . $email . '"';
    $qry_res = mysql_query($qry_em);
    $res = mysql_fetch_assoc($qry_res);

    if($res['cnt']==0){
    $qry = 'INSERT INTO users (name,password,email) values ("' . $username . '","' . $password . '","' . $email . '")';
    $qry_res = mysql_query($qry);  
        if ($qry_res) {
            echo "1";
        } else {
            echo "2";;
        }
    }
    else
    {
        echo "0";
    }
?>

app.js:

.controller('SignupCtrl', function($scope, $http) {
    $scope.signup = function () {
    var request = $http({
        method: "post",
        url: "http://localhost/signup.php",
        crossDomain : true,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        data: {
            username: $scope.userdata.username,
            email: $scope.userdata.email,
            password: $scope.userdata.password
        },
    });
        request.success(function(data) {
        if(data == "1"){
         $scope.responseMessage = "Account Created Successfully!";
        }
        if(data == "2"){
         $scope.responseMessage = "Can not Create Account";
        }
        else if(data == "0") {
         $scope.responseMessage = "Email Already Exists"
        }  
    });
}
});

使用$request->email$request->password$request->username而不是$postdata->email$postdata->password等...

If PHP is must, I would recommend looking at Slim Framework which is made for creating APIs.Some other solutions that fits here (probably better than PHP & MySQL for this purpose) are Mongo + Express or ParseSDK for JavaScript are something to look at as well. I would recommend Parse since it is very easy to get started with and remove a lot of back end headaches.

Sample example using ionic to access API:

Controller:

app.controller('AppCtrl', function($scope){
    $http.get('API_URL')
        .then(
            function(data){
                console.log(data);
                $scope.data = data;
                // JSON data returned as response
            },
            function(err){
                console.log(err);
                $scope.err = err;
                // when error occurs
            }
        );
});

View:

<ion-content ng-controller="AppCtrl">
    <div> {{ data }} {{ err }} </div>
</ion-content>

Example of usage of JSON data.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM