Ionic + PHP accents issue

Ionic Framework ionic-v3
1

I have an issue with ionic 3 when I post data from the form with words containing accents even with everything set to UTF-8 (vscode, php header and connection charsets, database UTF8).

When I click to post it, console.log displays the word correctly accented. But it gets back the word with special characters. What could be wrong?

<?php 

define("HOST", "localhost"); 
define("USER", "root");  
define("PASSWORD", "******");  
define("DATABASE", "loginsystem"); 

define("CAN_REGISTER", "any");
define("DEFAULT_ROLE", "member");

define("SECURE", FALSE);

$mysqli = new mysqli(HOST, USER, PASSWORD, DATABASE);
$mysqli->set_charset('UTF-8');

?>

$data = json_decode(file_get_contents("php://input"));

if(property_exists($data, 'name') || property_exists($data, 'uname') || property_exists($data, 'celular') || property_exists($data, 'endereco') || property_exists($data, 'numero') || property_exists($data, 'bairro') || property_exists($data, 'cidade') || property_exists($data, 'cep') || property_exists($data, 'senha') || property_exists($data, 'confirmar')){

$name = $data->name;
$uname = $data->uname;
$celular = $data->celular;
$endereco = $data->endereco;
$numero = $data->numero;
$bairro = $data->bairro;
$cidade = $data->cidade;
$cep = $data->cep;
$senha = $data->senha;
$confirmar = $data->confirmar;

...


import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Http, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/toPromise';

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Http, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/toPromise';

import { ListPage } from '../list/list';

let url = 'http://localhost/loginsystem/users/insert.php';
let user_id: any;
let headers = new Headers(
{
  'Content-Type' : 'application/json;charset=UTF-8'
});
let options = new RequestOptions({ headers: headers });

@IonicPage()
@Component({
 selector: 'page-cadastro',
 templateUrl: 'cadastro.html',
})
export class CadastroPage {

responseData: any;
userData = {"name": "", "uname": "", "celular": "", "endereco": "", "numero": "", "bairro": "", "cidade": "", "cep": "", "senha": "", "confirmar": ""};


  console.log('Hello AuthService Provider');
}

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

signup(){
  console.log(this.userData);
  this.http.post(url, this.userData, options).subscribe(data => {

  this.responseData = data;
  console.log(this.responseData._body);

},error => {
  console.log("error");
});
}
2

This is a PHP problem, not an Ionic problem. You better ask at StackOverflow or some other place where they respond to PHP questions.

3

No, it´s not! I had to add map() and import ‘rxjs/add/operator/map’ to make it works properly.

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

import { ListPage } from '../list/list';


let user_id: any;
let headers = new Headers(
  {
    'Content-Type' : 'application/x-www-form-urlencoded'
  });

@IonicPage()
@Component({
  selector: 'page-cadastro',
  templateUrl: 'cadastro.html',
})
export class CadastroPage {

  url: string = 'http://localhost/loginsystem/users/insert.php';
  responseData: any;
  userData = {"name": "", "uname": "", "celular": "", "endereco": "", "numero": "",
   "bairro": "", "cidade": "", "cep": "", "senha": "", "confirmar": ""};

  constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http) {
    console.log('Hello AuthService Provider');
  }

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

  signup(){

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

}
4

I see this idiom a lot, and I think it’s a design mistake, because it blurs what should be sharply-defined delineations of responsibility.

Interaction with Http should be confined to service providers, and no single method should both generate/transform an Observable and subscribe to it. The properties and methods of the service provider should provide Observables of business domain interfaces, so their clients need not know or care whether they are coming from HTTP, a database, or the moon. The subscribing step should be in the client of the service provider, most typically a page or component.

5

Yep. I’ll implement a service provider but anyway, it was not a php issue.