Ionic and PHP login function isn't running

Ionic Framework ionic-v3
1

I am making the login components of an ionic application.

Everything is working properly. But the server side part isn’t.

Here is my authApi.ts service:

loginFunction(credentials){
   console.log("Trying to login");
   //console.log(credentials)
   return new Promise(function(resolve, reject){
      let headers = new HttpHeaders();
      this.http.post(apiUrl, JSON.stringify(credentials), {headers: headers})
       .subscribe(
          res=>{
            resolve(res.json)
          }
        ),
        (err)=>{
          reject(err);
    }
});
}

And on login button click:

onLoginClick(){
let user = this.login.get('username').value;
let pass = this.login.get('password').value;
this.userData = {"username": user, "password": pass};
console.log(this.userData)
this.authService.loginFunction(this.userData).then((result)=>{
  this.signinResponse = result;
  console.log(this.signinResponse);
},
  (err)=>{
    //connection failed
  }

);

The server side script is:

<?php
error_reporting(E_ALL);
header("Access-Control-Allow-Origin: *");
class api {
    private $username ="root";
    private $password ="root";
    private $db="cdv";
    private $host = "localhost";

    public $conn;


    //Connection
    
    public function connection(){
        try{
            $this->conn = new PDO("mysql:host=$this->host;dbname=$this->db", $this->username, $this->password);
            $this->conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            $this->conn->exec("SET CHARACTER SET utf8");

            return $this->conn;
        }
        catch(PDOException $e){
            return $e->getMessage();
        }
        
    }

    //Login

    public function login($conn){
        $login = "SELECT username FROM login WHERE username=:user LIMIT 1";
        $execLogin = $this->conn->prepare($login);
        $execLogin->bindValue(":user", "brital");
        $execLogin->execute();
        $res = $execLogin->rowCount();

        if($res>0)
        {
            echo 1;
        }
        else{
            echo 0;
        }
    }

}

?>

And here is my login script:

<?php
require_once('../api.php');

//Getting username and password from Ionic
$username = $_POST['userData']

$newApi = new api();
$conn = $newApi->connection();
$newApi->login($conn);
?>

But nothing happens. Even there isn’t any error at the console. And no files are shown in the network tab.

Currently, I am testing the functions that’s why I am returning 1 and 0 as response.

The button html code is:

<button ion-button full (click)="onLoginClick()" [disabled]="!login.valid" >LOGIN</button>

2

Add your html button code

3

Added. You can recheck the post.

4

where is the php script that call to function login($conn)?

5

It exists in the post. You can check them as well.

6 
<?php
require_once('../api.php');

//Getting username and password from Ionic
//$username = $_POST['userData'];//**NOT OK!!!**

$name = $_POST['username'];
$password = $_POST['password'];

$newApi = new api();
$conn = $newApi->connection();
$newApi->login($conn);
?>