I am trying to create a user registration form using php/mysql and ionic
however when i enter data the feedback says it was successful but nothing will show up in the database except 0s for all entries this is only one row no matter how many time i enter the data.
This is my ts file :
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-
angular';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { Http, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
//import { PInfoPage } from '../p-info/p-info';
@IonicPage()
@Component({
selector: 'page-acc-info',
templateUrl: 'acc-info.html',
})
export class AccInfoPage {
// Define FormBuilder /model properties
public form : FormGroup;
public AdminUsername : any;
public PatientUsername : any;
public AccountPassword : any;
// Flag to hide the form upon successful completion of remote operation
public isEdited : boolean = false;
public hideForm : boolean = false;
// Property to store the recordID for when an existing entry is being edited
public AccountID : any = null;
private baseURI : string = "http://localhost:10080/ionic/";
// Initialise module classes
constructor(public navCtrl : NavController,
public http : Http,
public NP : NavParams,
public fb : FormBuilder,
public toastCtrl : ToastController)
{
// Create form builder validation rules
this.form = fb.group({
"a_username" : ["", Validators.required],
"p_username" : ["", Validators.required],
"password" : ["", Validators.required],
});
}
ionViewWillEnter()
{
this.resetFields();
if(this.NP.get("account"))
{
this.isEdited = false
}
}
// Assign the navigation retrieved data to properties
// used as models on the page's HTML form
selectEntry(item)
{
this.AdminUsername = item.a_username;
this.PatientUsername = item.p_username;
this.AccountPassword = item.password;
this.AccountID = item.acc_id;
}
createEntry(a_username, p_username, password)
{
let body : string = "key=create&a_username=" + a_username +
"&p_username=" + p_username + "&password=" + password,
type : string = "application/x-www-form-urlencoded; charset=UTF-
8",
headers : any = new Headers({ 'Content-Type':type}),
options : any = new RequestOptions({ headers: headers }),
url : any = this.baseURI + "manage-data.php";
this.http.post(url, body, options)
.subscribe((data) =>
{
// If the request was successful notify the user
if(data.status === 200)
{
this.hideForm = true;
this.sendNotification(`Congratulations the account was successfully
created`);
}
// Otherwise let 'em know anyway
else
{
this.sendNotification('Something went wrong!');
}
});
}
// Handle data submitted from the page's HTML form
// Determine whether we are adding a new record or amending an
// existing record
saveEntry()
{
let a_username : string = this.form.controls["a_username"].value,
p_username : string = this.form.controls["p_username"].value,
password : string = this.form.controls["password"].value
this.createEntry(a_username,p_username, password);
//this.navCtrl.push(PInfoPage);
}
// Clear values in the page's HTML form fields
resetFields() : void
{
this.AdminUsername = "";
this.PatientUsername = "";
this.AccountPassword = "";
}
// Manage notifying the user of the outcome
// of remote operations
sendNotification(message) : void
{
let notification = this.toastCtrl.create({
message : message,
duration : 3000
});
notification.present();
}
}
and this is my php file:
<?php
header('Access-Control-Allow-Origin: *');
// Define database connection parameters
$hn = 'localhost';
$un = 'root';
$pwd = '';
$db = 'ring a bell';
$cs = 'utf8';
// Set up the PDO parameters
$dsn = "mysql:host=" . $hn . ";port=3306;dbname=" . $db . ";charset=" .
$cs;
$opt = array(
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_OBJ,
PDO::ATTR_EMULATE_PREPARES => false,
);
// Create a PDO instance (connect to the database)
$pdo = new PDO($dsn, $un, $pwd, $opt);
// Retrieve specific parameter from supplied URL
$key = strip_tags($_REQUEST['key']);
$data = array();
switch($key)
{
// Add a new record to the technologies table
case "create":
// Sanitise URL supplied values
$a_username = filter_var($_REQUEST['a_username'],
FILTER_SANITIZE_STRING, FILTER_FLAG_ENCODE_LOW);
$p_username = filter_var($_REQUEST['p_username'],
FILTER_SANITIZE_STRING, FILTER_FLAG_ENCODE_LOW);
$password = filter_var($_REQUEST['password'],
FILTER_SANITIZE_STRING, FILTER_FLAG_ENCODE_LOW);
// Attempt to run PDO prepared statement
try {
$sql = "INSERT INTO account_info(a_username, p_username, password)
VALUES(:a_username, :p_username, :password)";
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':a_username', $a_username, PDO::PARAM_STR);
$stmt->bindParam(':p_username', $p_username, PDO::PARAM_STR);
$stmt->bindParam(':password', $password, PDO::PARAM_STR);
$stmt->execute();
echo json_encode(array('message' => 'Congratulations the Account
was added to the database'));
}
// Catch any errors in running the prepared statement
catch(PDOException $e)
{
echo $e->getMessage();
}
break;
}
?>
and this is my hmtl:
<ion-content>
<ion-header>
<ion-navbar>
<ion-title>Account Info</ion-title>
</ion-navbar>
</ion-header>
<div *ngIf="!hideForm">
<form [formGroup]="form" (ngSubmit)="saveEntry()">
<ion-item-group ion-fixed>
<ion-item>
<ion-label stacked>Admin Username</ion-label>
<ion-input type="text" placeholder="A_JhonDoe"
formControlName="a_username"
[(ngModel)]="AdminUsername"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Patient Username</ion-label>
<ion-input type="text" placeholder="P_JhonDoe"
formControlName="p_username"
[(ngModel)]="PatientUsername" ></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Password</ion-label>
<ion-input type="password" placeholder="Password"
formControlName="password"
[(ngModel)]="AccuntPassword" ></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Verify Password</ion-label>
<ion-input type="password" placeholder="Verify Password"></ion-
input>
</ion-item>
</ion-item-group>
</form>
</div>
<button ion-button block outline large color="light"
[disabled]="!form.valid" (click)="saveEntry()">Add Patient Info</button>
</ion-content>