Angular 4 POST для базы данных MYSQL с использованием переполнения стека

Я две недели искал ответ на свой вопрос, который, на мой взгляд, должен быть относительно простым, но я не использовал правильные ключевые слова. Я знаю, что Angular — это интерфейсный фреймворк, и я могу использовать любую базу данных и серверную часть, какую захочу.

Для школьного проекта я создаю приложение Ionic 3 / Angular 4 с базой данных MySQL, и одно из заданий запрашивает систему входа / регистрации. Хотя для Firebase есть много учебных пособий, я не видел ни одного вращающегося вокруг MySQL.

Мой основной вопрос: как мне настроить файл register.ts для запуска файла PHP на сервере и передачи таких данных, как имя, имя пользователя, адрес электронной почты и пароль? Мы изучали базовый PHP в школе, хотя я открыт для использования Node / Mongo, если есть полезный быстрый старт — нам не разрешено использовать любой BaaS, такой как Firebase.

Вот некоторый код:
файл register.ts

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { Http, Headers, Response, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

/**
* Generated class for the RegisterPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/

let user_id: any;
let headers = new Headers(
{
'Content-Type' : 'application/x-www-form-urlencoded'
});
@IonicPage()
@Component({
selector: 'page-register',
templateUrl: 'register.html',
})
export class RegisterPage {

@ViewChild('username') username;
@ViewChild('email') email;
@ViewChild('firstname') firstname;
@ViewChild('password') password;
@ViewChild('confirmpass') confirmpass;
//successfully gets this data from the form on the HTML register pageconstructor(public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController, public http: Http) {
}

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

registerUser() {
//runs this when register button is pressed
//bad validation, but what can ya do
if (this.password.value != this.confirmpass.value) {
console.log("confirm pass and password don't match");
let confirm = this.alertCtrl.create({
title: 'Sorry!',
message: 'Password & Confirm Password do not match',
buttons: [
{
text: 'Okay',
handler: () => {
console.log('Disagree clicked');
}
}
]
});
confirm.present();
} else {
//this is where I'm struggling
let url: string = 'mySchoolsDB.com/myuser/insertuser.php';
let responseData: any;
let userData = {"firstname": this.firstname.value, "username": this.username.value, "password": this.password.value, "email": this.email.value };
console.log('would register user with', this.username.value, this.password.value);

console.log(userData);
this.http.post(url, userData, {headers:headers, method:"POST"})
.map(res => res.json())
.subscribe(
data => {
console.log(data);
},
err => {
console.log("ERROR!: ", err);
}
);
}
}}

insertuser.php

<?php

header('Access-Control-Allow-Origin: *');

$servername = "db.school.edu";
$dbusername = "myuser";
$dbpassword = "mypass";
$dbname = "mydbname";$firstname = $_POST['firstname'];
$password = $_POST['password'];
$username = $_POST['username'];
$email = $_POST['email'];
// Create connection
$conn = mysqli_connect($servername, $dbusername, $dbpassword, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}

$sql = "INSERT INTO users (firstname, email, username, password)
VALUES ('$firstname', '$email', '$username', '$password')";

if (mysqli_query($conn, $sql)) {
echo "New record created successfully";
} else {
echo "Error:  " . $sql . "<br>" . mysqli_error($conn);
}

mysqli_close($conn);
?>