Ionic PHP & MySQL Tutorial

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

<span class="hljs-keyword">CREATE</span> <span class="hljs-keyword">TABLE</span> <span class="hljs-string">`products`</span> (
<span class="hljs-string">`id`</span> <span class="hljs-built_in">int</span>(<span class="hljs-number">10</span>) <span class="hljs-keyword">NOT</span> <span class="hljs-literal">NULL</span>,
<span class="hljs-string">`title`</span> <span class="hljs-built_in">varchar</span>(<span class="hljs-number">50</span>) <span class="hljs-keyword">NOT</span> <span class="hljs-literal">NULL</span>,
<span class="hljs-string">`desc`</span> <span class="hljs-built_in">varchar</span>(<span class="hljs-number">500</span>) <span class="hljs-keyword">NOT</span> <span class="hljs-literal">NULL</span>,
<span class="hljs-string">`price`</span> <span class="hljs-built_in">varchar</span>(<span class="hljs-number">10</span>) <span class="hljs-keyword">NOT</span> <span class="hljs-literal">NULL</span>,
<span class="hljs-string">`pic`</span> longtext <span class="hljs-keyword">NOT</span> <span class="hljs-literal">NULL</span>
) <span class="hljs-keyword">ENGINE</span>=<span class="hljs-keyword">InnoDB</span> <span class="hljs-keyword">DEFAULT</span> <span class="hljs-keyword">CHARSET</span>=latin1 AUTO_INCREMENT=<span class="hljs-number">1</span> ;

<span class="hljs-keyword">ALTER</span> <span class="hljs-keyword">TABLE</span> <span class="hljs-string">`products`</span> <span class="hljs-keyword">ADD</span> PRIMARY <span class="hljs-keyword">KEY</span> ( <span class="hljs-string">`id`</span> );
<span class="hljs-keyword">ALTER</span> <span class="hljs-keyword">TABLE</span> <span class="hljs-string">`products`</span> <span class="hljs-keyword">MODIFY</span> <span class="hljs-string">`id`</span> <span class="hljs-built_in">int</span>(<span class="hljs-number">10</span>) <span class="hljs-keyword">NOT</span> <span class="hljs-literal">NULL</span> AUTO_INCREMENT;

Web Service with PHP

Connecting with database db.php

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

Insert data into database product.php

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

Read Data from Database json.php

<span class="php"><span class="hljs-meta"><?php</span>
<span class="hljs-keyword">include</span> <span class="hljs-string">"db.php"</span>; 
$data=<span class="hljs-keyword">array</span>(); 
$q=mysqli_query($con, <span class="hljs-string">"SELECT * FROM `products` "</span>); 

<span class="hljs-keyword">while</span> ($row=mysqli_fetch_object($q)){
    $data[]=$row; 
}
<span class="hljs-keyword">echo</span> json_encode($data); 
<span class="hljs-keyword">echo</span> mysqli_error($con); 
<span class="hljs-meta">?></span></span>

Working with Ionic Project

Create new project

ionic <span class="hljs-built_in">start</span> PHPDemo blank
<span class="hljs-built_in">cd</span> PHPDemo
ionic serve

Creating new page for Adding New Product

<span class="hljs-attribute">ionic g page addproduct</span>

Add files in app.module.ts

<span class="hljs-keyword">import</span> { NgModule } <span class="hljs-keyword">from</span> <span class="hljs-string">'@angular/core'</span>; 
<span class="hljs-keyword">import</span> { IonicApp, IonicModule } <span class="hljs-keyword">from</span> <span class="hljs-string">'ionic-angular'</span>; 
<span class="hljs-keyword">import</span> { MyApp } <span class="hljs-keyword">from</span> <span class="hljs-string">'./app.component'</span>; 
<span class="hljs-keyword">import</span> { HomePage } <span class="hljs-keyword">from</span> <span class="hljs-string">'../pages/home/home'</span>; 
<span class="hljs-keyword">import</span> { Addproduct } <span class="hljs-keyword">from</span> <span class="hljs-string">'../pages/addproduct/addproduct'</span>; 

@NgModule({

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

})
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AppModule</span> {}</span>

Adding New Product

working with addproduct.html

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

working with addproduct.ts

<span class="hljs-keyword">import</span> { Component } from <span class="hljs-string">'@angular/core'</span>; 
<span class="hljs-keyword">import</span> { NavController, ToastController } from <span class="hljs-string">'ionic-angular'</span>; 
<span class="hljs-keyword">import</span> { Http } from <span class="hljs-string">'@angular/http'</span>; 

<span class="hljs-meta">@Component({
    selector: <span class="hljs-meta-string">'page-addproduct'</span>, 
    templateUrl: <span class="hljs-meta-string">'addproduct.html'</span>
})</span>
export <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Addproduct</span> </span>{
    product: any = {}; 
    <span class="hljs-keyword">constructor</span>(<span class="hljs-keyword">public</span> navCtrl: NavController, <span class="hljs-keyword">public</span> http: Http, <span class="hljs-keyword">public</span> toast: ToastController) {}

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

    showToast(message){
    let toast = <span class="hljs-keyword">this</span>.toast.create({
    message:message, 
    duration: <span class="hljs-number">2000</span>
    }); 
    toast.present(); 
    }

}

View Product

To display data from web service.we're going to use home.html with list view

<span class="xml"><span class="hljs-tag"><<span class="hljs-name">ion-header</span>></span>

    <span class="hljs-tag"><<span class="hljs-name">ion-navbar</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">ion-title</span>></span>
            Home
        <span class="hljs-tag"></<span class="hljs-name">ion-title</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">ion-buttons</span> <span class="hljs-attr">end</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">ion-button</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">"goAddNew()"</span>></span>Add<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
        <span class="hljs-tag"></<span class="hljs-name">ion-buttons</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">ion-navbar</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ion-header</span>></span>

<span class="hljs-tag"><<span class="hljs-name">ion-content</span> <span class="hljs-attr">padding</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">ion-list</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">ion-item</span> *<span class="hljs-attr">ngFor</span>=<span class="hljs-string">"let product of productList"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">ion-avatar</span> <span class="hljs-attr">item-left</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{product.pic}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span>
            <span class="hljs-tag"></<span class="hljs-name">ion-avatar</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">h2</span>></span></span><span class="hljs-template-variable">{{product.title}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">item-right</span>></span>$ </span><span class="hljs-template-variable">{{product.price}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">p</span>></span></span><span class="hljs-template-variable">{{product.desc}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
        <span class="hljs-tag"></<span class="hljs-name">ion-item</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">ion-list</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ion-content</span>></span></span>

working with home.ts

<span class="hljs-keyword">import</span> { Component } from <span class="hljs-string">'@angular/core'</span>; 
<span class="hljs-keyword">import</span> { NavController } from <span class="hljs-string">'ionic-angular'</span>; 
<span class="hljs-keyword">import</span> { Addproduct} from <span class="hljs-string">'../addproduct/addproduct'</span>
<span class="hljs-keyword">import</span> { Http } from <span class="hljs-string">'@angular/http'</span>; 

<span class="hljs-meta">@Component({
    selector: <span class="hljs-meta-string">'page-home'</span>, 
    templateUrl: <span class="hljs-meta-string">'home.html'</span>
})</span>

export <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HomePage</span> </span>{
    productList:any; 
    <span class="hljs-keyword">constructor</span>(<span class="hljs-keyword">public</span> navCtrl: NavController, <span class="hljs-keyword">public</span> http: Http) {

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

}