Tutorial Ionic PHP e MySQL

Nesta lição, aprenderemos como ler / gravar dados de PHP e MySQL.

Projeto: Precisa criar um gerente de produto simples, onde o usuário pode inserir informações do produto, como título, descrição, preço e URL da imagem e também pode ler dados do banco de dados

Requisito: precisamos criar um serviço da Web baseado em JSON com PHP e MySQL. Já criei um serviço web simples usando PHP. Nota: É um código muito simples que não inclui qualquer segurança.

Criar Banco de Dados e Tabela

Nota: você pode usar qualquer nome de banco de dados

CREATE TABLE `products` (
`id` int(10) NOT NULL,
`title` varchar(50) NOT NULL,
`desc` varchar(500) NOT NULL,
`price` varchar(10) NOT NULL,
`pic` longtext NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

ALTER TABLE `products` ADD PRIMARY KEY ( `id` );
ALTER TABLE `products` MODIFY `id` int(10) NOT NULL AUTO_INCREMENT;

Serviço da web com PHP

Conexão com banco de dados db.php

<?php
header("Access-Control-Allow-Origin: *"); 
$con = mysqli_connect("localhost", "root", "root", "phonegap_webservice") or die("could not connect DB"); 
?>

Insira dados no banco de dados product.php

<?php
include "db.php"; 
$input = file_get_contents('php://input'); 
$data = json_decode($input, true); 
$message = array(); 
if($data['action'] == "insert"){
    $title = $data['title']; 
    $desc = $data['desc']; 
    $price = $data['price']; 
    $pic = $data['pic']; 
    $q = mysqli_query($con, "INSERT INTO `products` ( `title` , `desc` , `price` , `pic` ) VALUES ('$title', '$desc', '$price', '$pic')"); 
    if($q){
    $message['status'] = "success"; 
    }
    else{
    $message['status'] = "error"; 
    }
    echo json_encode($message); 
}
echo mysqli_error($con); 
?>

Ler dados do banco de dados json.php

<?php
include "db.php"; 
$data=array(); 
$q=mysqli_query($con, "SELECT * FROM `products` "); 

while ($row=mysqli_fetch_object($q)){
    $data[]=$row; 
}
echo json_encode($data); 
echo mysqli_error($con); 
?>

Trabalhando com o Projeto Ionic

Crie um novo projeto ionic 3

ionic start PHPDemo blank --type=ionic-angular
cd PHPDemo
ionic serve

Crie uma nova página para adição de novo produto

ionic g page addproduct

Adicione arquivos em app.module.ts

import { NgModule } from '@angular/core'; 
import { IonicApp, IonicModule } from 'ionic-angular'; 
import { MyApp } from './app.component'; 
import { HomePage } from '../pages/home/home'; 
import { Addproduct } from '../pages/addproduct/addproduct'; 

@NgModule({

    declarations: [
    MyApp, 
    HomePage, 
    Addproduct
    ], 
    imports: [
    IonicModule.forRoot(MyApp)
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [
    MyApp, 
    HomePage, 
    Addproduct
    ], 
    providers: []

})

export class AppModule {}

Adicionando Novo Produto

trabalhando com addproduct.html

<ion-header>
    <ion-navbar>
    <ion-title>Add New Product</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding>
    <ion-list>
    <ion-item>
    <ion-label stacked>Title</ion-label>
    <ion-input type="text" [(ngModel)]="product.title"></ion-input>
    </ion-item>
    <ion-item>
    <ion-label stacked>Description</ion-label>
    <ion-input type="text" [(ngModel)]="product.desc"></ion-input>
    </ion-item>
    <ion-item>
    <ion-label stacked>Price</ion-label>
    <ion-input type="text" [(ngModel)]="product.price"></ion-input>
    </ion-item>
    <ion-item>
    <ion-label stacked>Pic URL</ion-label>
    <ion-input type="text" [(ngModel)]="product.pic"></ion-input>
    </ion-item>
    <button ion-button (click)="insert()">Insert</button>
    </ion-list>
</ion-content>

trabalhando com addproduct.ts

import { Component } from '@angular/core'; 
import { NavController, ToastController } from 'ionic-angular'; 
import { Http } from '@angular/http'; 

@Component({
    selector: 'page-addproduct', 
    templateUrl: 'addproduct.html'
})
export class Addproduct {
    product: any = {}; 
    constructor(public navCtrl: NavController, public http: Http, public toast: ToastController) {}

    ionViewDidLoad() {
    console.log('Hello Addproduct Page'); 
    }
    insert(){
    this.product.action = "insert"; 
    this.http.post("http://localhost/ionic2php/product.php", this.product).subscribe(data=>{
    console.log(data); 
    let result = JSON.parse(data["_body"]); 
    if(result.status == "success"){
    this.showToast("Inserted successfully"); 
    }
    else{
    this.showToast("Something went wrong"); 
    }
    }, err=>{
    console.log(err); 
    })
    }

    showToast(message){
    let toast = this.toast.create({
    message:message, 
    duration: 2000
    }); 
    toast.present(); 
    }

}

Ver Produto

Para exibir dados do serviço da web, vamos usar home.html com visualização de lista

<ion-header>

    <ion-navbar>
        <ion-title>
            Home
        </ion-title>
        <ion-buttons end>
            <button ion-button (click)="goAddNew()">Add</button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-list>
        <ion-item *ngFor="let product of productList">
            <ion-avatar item-left>
                <img src="{{product.pic}}">
            </ion-avatar>
            <h2>{{product.title}}</h2>
            <p item-right>$ {{product.price}}</p>
            <p>{{product.desc}}</p>
        </ion-item>
    </ion-list>
</ion-content>

trabalhando com home.ts

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { Addproduct} from '../addproduct/addproduct'
import { Http } from '@angular/http'; 

@Component({
    selector: 'page-home', 
    templateUrl: 'home.html'
})

export class HomePage {
    productList:any; 
    constructor(public navCtrl: NavController, public http: Http) {

    }
    ionViewDidLoad(){
    this.getData(); 
    }
    goAddNew(){
    this.navCtrl.push(Addproduct); 
    }
    getData(){
    this.http.get("http://localhost/ionic2php/json.php").subscribe( data => {
    this.productList = JSON.parse(data["_body"]); 
    }, err =>{
    console.log(err); 
    }); 
    }

}

Crud-Ionic