Ionic PHP MySQL Example
This lesson, we're going to learn how to read/write data from PHP & MySQL.
**Project:** Need to create simple product manager, where user can enter product information such as title, description, price and picture URL & he can also read data from database
Requirement: we need to create JSON based Web service with PHP & MySQL. I already created simple web service using PHP. Note: It's a very simple code which is not included any security.
Create Database & Table
Note: you can use any database name
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;Web Service with PHP
Connecting with database db.php
<?php
header("Access-Control-Allow-Origin: *");
$con = mysqli_connect("localhost", "root", "root", "phonegap_webservice") or die("could not connect DB");
?>Insert data into database 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);
?>Read Data from Database 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);
?>Working with Ionic Project
Create new project
ionic start PHPDemo blank
cd PHPDemo
ionic serveCreating new page for Adding New Product
ionic g page addproductAdd files in 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 {}Adding New Product
working with 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>working with 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();
}
}View Product
To display data from web service.we're going to use home.html with list view
<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>working with 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);
});
}
}About Me
Hey! I'm sundar. I created codesundar.com for sharing my knowledge to the world
