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);
});
}
}