Ionicでphpに対してpostリクエストを行いたい

Question

ionicを勉強しているものです。

HttpClientを使ってPOSTメソッドでphpを呼び出してDBアクセスをやりたいのですがphpファイルが見つからないというエラーが
解決できず困っています。

処理の流れ：
Twitterログインボタンを押して認証が成功したらDBアクセスを行う。

ディレクトリ構成

login.html

<ion-header>
  <ion-navbar>
    <ion-title>Twitterログイン</ion-title>
    <ion-buttons end>
      <button ion-button icon-only color="danger" *ngIf="(user | async)?.uid" (click)="logout()">
        <ion-icon name="log-out"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2 style="margin: 100px 0 20px;">Twitterログイン</h2>
  <button ion-button block (click)="login()">
    <ion-icon name="logo-twitter" style="font-weight: bold; margin-right: 10px;"></ion-icon>Twitterログイン
  </button>
  <br>
  <br>
  <ion-list>
    <ion-list-header>
      ユーザー情報
    </ion-list-header>
    <ion-item>ID:{{ (user | async)?.uid }}</ion-item>
    <ion-item>名前:{{ (user | async)?.displayName }}</ion-item>
  </ion-list>

  <button ion-button block (click)="logout()">
    <ion-icon name="logo-twitter" style="font-weight: bold; margin-right: 10px;"></ion-icon>Twitterログアウト
  </button>


</ion-content>

画面

login.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { Observable } from 'rxjs/Observable';
import { AngularFireAuth } from 'angularfire2/auth';
import { HttpClient, HttpParams } from '@angular/common/http';
import * as firebase from 'firebase/app';

import { IndexPage } from '../../pages/index/index';

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  user: Observable<firebase.User>;

  constructor(
    private http: HttpClient,
    public navCtrl: NavController,
    public navParams: NavParams,
    public afAuth: AngularFireAuth
  ) {
    this.user = afAuth.authState;
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  // ログイン処理
  login() {

    const data = new HttpParams().set('user', 'khaled').set('pass', 'khaled');

     this.afAuth.auth.signInWithPopup(new firebase.auth.TwitterAuthProvider()).then(authData => {
     
    	this.http.post("http://localhosot:8100/pages/login/login.php", data, {headers:{'Content-Type': 'application/json'}}).subscribe(data => {
      		alert('ok');
    	}, error => {
      		alert(JSON.stringify(error));
    	});


     }).catch(function (error) {
       alert("ログインできませんでした。");
     });
  }

  // ログアウト処理
  logout() {
    // this.afAuth.auth.signOut();
    this.afAuth.auth.signOut().then(success => {
      alert("ログアウト成功");
    }).catch(function (error) {
      alert("ログアウトできませんでした。");
    });
  }
}

login.php

<?php
/* 内部文字エンコーディングをUTF-8に設定 */
mb_internal_encoding("UTF-8");

/* リクエストを受信できるかテスト */
$date = array('message'=>"received!");
$date["msg"]="Post OK";
echo json_encode($date);

?>

動かしてみた感じですとpostに指定するURLに誤りがあると思うので「ionic httpclient post php」のキーワードで
検索してみましたが参考になるソースコードや情報が見つかりませんでした。

ionicにお詳しい方がいましたらご回答いただけないでしょうか？
よろしくお願いいたします。

Answer 1

以下のURLを参考にしたところできました。
https://qiita.com/mucunwuxian/items/84f87878911c8fd32254

Answer 2

IonicやAngularは関係なく、「アクセスするURLが存在するか」が第一歩になると思います。curlなどで当該URLにPOSTアクセスが可能かをお試しいただければと思います。Google Chromeでしたらこのような拡張がありますので参考になりましたら幸いです。

https://qiita.com/yokurin/items/8f5bc0b41f6dd3d13fed