Data won't show up in phpmyadmin


#1

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>

#2

you need all 3 headers on php side

(change as needed, this is example)

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET,POST,OPTIONS,DELETE,PUT');
header( 'Access-Control-Allow-Headers: Authorization, Content-Type' );

#3

Thank you for replying ! I added them but still nothing happened :confused:


#4

there is something really not right with this code

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";


#5

i have the code from http://masteringionic.com/blog/2016-12-15-using-php-and-mysql-with-ionic/ i already tried the example in the tutorial and it works perfectly but when i converted it to my project this happened


#6

looks like there is some deprecation here
from the time this code you are using

https://angular.io/api/http/Http
https://angular.io/api/http/RequestOptions

use @angular/common/http instead

check out “common/http” section

at https://angular.io/api


#7

you may need to downgrade angular

mine is 4.4.6