Cordova - http request doesnt process local php

Question

This is my first cordova project. My http request doesn't process the local php file using POST. The code works and processes it properly when the php file is hosted on the server. But doesn't when the php file is local. Editing files directly on the server is such a hassle and takes alot of time rather than just having it locally. And I wanted to know the solution to this because it will really make the development much easier.

Here is the Javascript Code

$(document).ready(function () {
$("input").on("focus", function (e) {
    e.preventDefault();
    e.stopPropagation();
    window.scrollTo(0,0);
});

$("#loginBtn").click(function () {
    swal({
        title: "Logging in ...",
        imageUrl: "../images/ring-alt.gif",
        showConfirmButton: false,
    });
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    if (username != "") {
        if (password != "") {
            $.post("../php/login.php",
            {
                username: username,
                password: password
            },
            function (data, status) {
                alert(data);    
            });
        } else {
            sweetAlert("Oops...", "Please enter your password!", "error");
        }
    } else {
        sweetAlert("Oops...", "Please enter your username!", "error");
    }
});
});

alert(data) displays the whole php file instead of processing it. Whereas when it is accessed remotely is works fine.

Here is the working js code (remote/hosted php files)

$(document).ready(function () {
$("input").on("focus", function (e) {
    e.preventDefault();
    e.stopPropagation();
    window.scrollTo(0,0);
});

$("#loginBtn").click(function () {
    swal({
        title: "Logging in ...",
        imageUrl: "../images/ring-alt.gif",
        showConfirmButton: false,
    });
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    if (username != "") {
        if (password != "") {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    if (this.responseText == "successsuccess") {
                        window.location.href = '../html/dashboard.html';
                    } else {
                        sweetAlert("Oops...", "Invalid username or password!", "error");
                        document.getElementById("password").value = "";
                    }
                }
            }
            xmlhttp.open("POST", "http://www.sampleee.esy.es/login.php", true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.send("username=" + username + "&" + "password=" + password);
        } else {
            sweetAlert("Oops...", "Please enter your password!", "error");
        }
    } else {
        sweetAlert("Oops...", "Please enter your username!", "error");
    }
});
});

Now here is the php file

<?php
include("connectdb.php");
$username = mysqli_escape_string($conn, $_POST['username']);
$password = mysqli_escape_string($conn, $_POST['password']);
    $password = md5($password);

$getLogin = "SELECT id FROM user WHERE username = '$username' and password = '$password'";
$result = mysqli_query($conn, $getLogin);
if(!$result){
   echo "Query Error: ". mysqli_error($conn);
   die();
}
$count = mysqli_num_rows($result);
if($count == 1){
   echo "success";
}else{
       echo "failed";
}
?>

Answer 1

You cannot run PHP code on your cordova project. The PHP needs to be executed on a PHP-capable environement, like your server. Your php code also uses a database, and this database needs to be configured on a server, which can be done locally but then it would obviously not be shared between devices.

It seems you do not know exactlly what PHP is. You should start learning about it and understand how it works.