Selamat datang kembali di blog Mari belajar coding. Pada tutorial kali ini kita akan melanjutkan tutorial sebelumya yaitu membuat aplikasi CRUD sederhana dengan Ionic 4 dan PHP MySQL part 1. Setelah selesai mebuat web service untuk aplikasi yang akan kita buat, selanjutnya kita akan create app baru menggunakan ionic 4. Versi Ionic 4 di sini saya menggunakan versi 4.12.
Untuk versi node dan cordova seperti gambar di bawah ini.
Membuat Aplikasi CRUD Sederhana dengan Ionic 4 dan PHP MySQL
Buat app baru dengan nama crud_ionic4 menggunakan cmd atau terminal.
ionic start crud_ionic4 blank
Struktur folder dan file dari ionic versi 4 dan versi 3 ada sedikit perbedaan, untuk lebih jelasnya teman-teman bisa baca disini ionicframework.com/docs/migration.
Setelah berhasil create app baru, kemudian buka folder app crud_ionic4 untuk membuat service dan page baru. Jika di versi 3 menggunakan provider, pada ionic 4 kita akan menggunakan service.
Buat service bernama auth-service melalui terminal.
Setelah berhasil create app baru, kemudian buka folder app crud_ionic4 untuk membuat service dan page baru. Jika di versi 3 menggunakan provider, pada ionic 4 kita akan menggunakan service.
Buat service bernama auth-service melalui terminal.
ionic g service auth-service
Buat dua halaman untuk form input dan form edit data melalui terminal.
ionic g page form-input
ionic g page form-edit
Daftarkan FormsModule dan HttpClientModule di src/app/app.module.ts dengan menambahkan import.
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
Tambahkan di @NgModule imports setelah AppRoutingModule.
FormsModule,
HttpClientModule
Kode lengkap app.module.ts seperti dibawah ini. Lihat bagian yang di beri highlight.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
FormsModule,
HttpClientModule
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
Selanjutnya buka auth-service.service.ts yang berada pada src/app/auth-service.service.ts, tambahkan import dibawah import Injectable.
import { Observable, } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';
Tambahkan kode berikut ini sebelum @Injectable.
const httpOptions = {
headers: new HttpHeaders({'Content-Type': 'application/json'})
};
const apiUrl = "http://localhost/webservice-ionic";
Alamat apiUrl di atas merupakan url web service yang telah kita buat pada tutorial sebelumnya.
Tambahkan modul HttpClient pada constructor.
Tambahkan modul HttpClient pada constructor.
constructor(private http: HttpClient) { }
Buat dua fungsi untuk get data dan post data.
Get_Data(type): Observable<any> {
return this.http.get(`${apiUrl}/${type}`);
}
Post_Data(type,credentials): Observable<any>{
return this.http.post(`${apiUrl}/${type}`,credentials,httpOptions);
}
Keterangan:
apiUrl merupakan url menuju web service.
type disini digunakan untuk request data berdasarkan fungsi yang berada pada web service. Untuk lebih jelasnya teman-teman bisa buka index.php pada web service yang sebelumnya telah kita buat. Terdapat beberapa fungsi untuk request data.
Credential merupakan data yang akan di kirim ke web service.
httpOption merupakan opsi header.
Kode lengkap auth-service.service.ts.
apiUrl merupakan url menuju web service.
type disini digunakan untuk request data berdasarkan fungsi yang berada pada web service. Untuk lebih jelasnya teman-teman bisa buka index.php pada web service yang sebelumnya telah kita buat. Terdapat beberapa fungsi untuk request data.
Credential merupakan data yang akan di kirim ke web service.
httpOption merupakan opsi header.
Kode lengkap auth-service.service.ts.
import { Injectable } from '@angular/core';
import { Observable, } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';
const httpOptions = {
headers: new HttpHeaders({'Content-Type': 'application/json'})
};
const apiUrl = "http://localhost/webservice-ionic";
@Injectable({
providedIn: 'root'
})
export class AuthServiceService {
constructor(private http: HttpClient) { }
Get_Data(type): Observable<any> {
return this.http.get(`${apiUrl}/${type}`);
}
Post_Data(type,credentials): Observable<any>{
return this.http.post(`${apiUrl}/${type}`,credentials,httpOptions);
}
}
Konfigurasi untuk service api selesai, Selanjutnya kita akan edit home.page.html yang berada pada src/app/home/home.page.html.
<ion-header>
<ion-toolbar color="primary">
<ion-title>
Mari Belajar Coding
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="ion-padding">
<h4 text-center>CRUD IONIC 4 PHP MYSQL</h4>
<ion-button color="primary" expand="block" routerLink="/form-input" routerDirection="forward">Tambah Data</ion-button>
<ion-grid >
<ion-row>
<ion-col col-12>
<table>
<thead>
<tr>
<th>Nama Barang</th>
<th>Qty</th>
<th>Harga</th>
<th>Aksi</th>
</tr>
</thead>
<tbody *ngIf="Data_Barang">
<tr *ngFor="let data of Data_Barang">
<td valign="top">{{data.nama_barang}}</td>
<td valign="top">{{data.qty}}</td>
<td valign="top">{{data.harga}}</td>
<td valign="top">
<ion-button color="danger" size="small" (click)="presentAlertConfirm(data.id_barang)"><ion-icon name="trash"></ion-icon></ion-button>
<ion-button color="secondary" size="small" routerLink="/form-edit/{{data.id_barang}}" routerDirection="forward"><ion-icon name="create"></ion-icon></ion-button>
</td>
</tr>
</tbody>
</table>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>
Buka home.page.ts yang berada pada scr/app/home/home.page.ts. Tambahkan import dibawah import Component.
import { LoadingController } from '@ionic/angular';
import { AuthServiceService } from './../../app/auth-service.service';
import { AlertController } from '@ionic/angular';
import { NgZone } from '@angular/core';
Buat variabel untuk menampung data yang di request dari web service dan tambahkan juga modul pada constructor.
ResponseData:any;
Data_Barang:any;
constructor(public api: AuthServiceService, public loadingController: LoadingController,
public alertController: AlertController, private zone:NgZone) { }
Buat fungsi untuk request data barang, konfimarsi hapus, dan hapus data barang.
ionViewWillEnter(){
this.DataBarang();
}
async DataBarang() {
const loading = await this.loadingController.create({
message: 'Loading...'
});
await loading.present();
await this.api.Get_Data('Data_Barang')
.subscribe(res => {
this.ResponseData=res;
if(this.ResponseData.Data_Barang){
this.Data_Barang=this.ResponseData.Data_Barang;
loading.dismiss();
}
else{
this.Data_Barang='';
loading.dismiss();
}
}, err => {
console.log(err);
loading.dismiss();
});
}
async presentAlertConfirm(idbarang) {
const alert = await this.alertController.create({
header: 'Konfirmasi',
message: 'Apakah anda yakin akan menghapus data ini?',
buttons: [
{
text: 'Tidak',
role: 'cancel',
cssClass: 'secondary',
handler: (blah) => {
}
}, {
text: 'Ya',
handler: () => {
this.HapusData(idbarang);
}
}
]
});
await alert.present();
}
HapusData(idbarang) {
const idbarangDelete={
id_barang:idbarang
};
this.api.Post_Data('Delete_Barang',idbarangDelete)
.subscribe(res => {
this.zone.run(() => {
this.DataBarang();
});
}, (err) => {
console.log(err);
});
}
Kode lengkap home.page.ts
import { Component } from '@angular/core';
import { LoadingController } from '@ionic/angular';
import { AuthServiceService } from './../../app/auth-service.service';
import { AlertController } from '@ionic/angular';
import { NgZone } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
ResponseData:any;
Data_Barang:any;
constructor(public api: AuthServiceService, public loadingController: LoadingController,
public alertController: AlertController, private zone:NgZone) { }
ionViewWillEnter(){
this.DataBarang();
}
async DataBarang() {
const loading = await this.loadingController.create({
message: 'Loading...'
});
await loading.present();
await this.api.Get_Data('Data_Barang')
.subscribe(res => {
this.ResponseData=res;
if(this.ResponseData.Data_Barang){
this.Data_Barang=this.ResponseData.Data_Barang;
loading.dismiss();
}
else{
this.Data_Barang='';
loading.dismiss();
}
}, err => {
console.log(err);
loading.dismiss();
});
}
async presentAlertConfirm(idbarang) {
const alert = await this.alertController.create({
header: 'Konfirmasi',
message: 'Apakah anda yakin akan menghapus data ini?',
buttons: [
{
text: 'Tidak',
role: 'cancel',
cssClass: 'secondary',
handler: (blah) => {
}
}, {
text: 'Ya',
handler: () => {
this.HapusData(idbarang);
}
}
]
});
await alert.present();
}
HapusData(idbarang) {
const idbarangDelete={
id_barang:idbarang
};
this.api.Post_Data('Delete_Barang',idbarangDelete)
.subscribe(res => {
this.zone.run(() => {
this.DataBarang();
});
}, (err) => {
console.log(err);
});
}
}
Terakhir untuk memberikan style pada tabel, kita edit home.page.scss yang berada pada src/app/home/home.page.scss.
table {
width: 100%;
border-collapse: collapse;
font-size: 10pt;
}
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
Tutorial membuat aplikasi crud sederhana dengan ionic 4 dan php mysql part 2 sampai disini, untuk tutorial selanjutnya kita akan membuat form tambah data pada halaman form input. Sekian, terimakasih.
Baca juga :
Membuat aplikasi crud Sederhana dengan Ionic 4 dan PHP Mysql part 1
Membuat aplikasi crud Sederhana dengan Ionic 4 dan PHP Mysql part 2
Membuat aplikasi crud Sederhana dengan Ionic 4 dan PHP Mysql part 3
Membuat aplikasi crud Sederhana dengan Ionic 4 dan PHP Mysql part 4
Related search:
Membuat aplikasi crud ionic 4 php mysql
crud ionic 4 php mysql
Baca juga :
Membuat aplikasi crud Sederhana dengan Ionic 4 dan PHP Mysql part 1
Membuat aplikasi crud Sederhana dengan Ionic 4 dan PHP Mysql part 2
Membuat aplikasi crud Sederhana dengan Ionic 4 dan PHP Mysql part 3
Membuat aplikasi crud Sederhana dengan Ionic 4 dan PHP Mysql part 4
Related search:
Membuat aplikasi crud ionic 4 php mysql
crud ionic 4 php mysql