Membuat CRUD dengan Ionic 3 PHP dan Mysql Part 4

Mari Belajar Coding    3/05/2019    android , ionic   

Selamat datang kembali di tutorial membuat crud dengan Ionic PHP dan Mysql. Artikel ini merupakan kelanjutan dari tutorial membuat crud dengan Ionic PHP dan Mysql part 3.

Sebelumnya kita telah belajar cara menampilkan data, simpan data dan hapus data dengan Ionic 3 PHP dan Mysql. Tutorial kali ini kita akan membuat edit data dengan Ionic.

Membuat CRUD dengan Ionic PHP dan Mysql

1. Buat page baru bernama form-edit

ionic g page form-edit

2. Tambahkan import page form-edit di app.module.ts, lihat baris yang di beri highlight.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { HttpModule } from '@angular/http';
import { AuthServiceProvider } from '../providers/auth-service/auth-service';
import { CommonProvider } from '../providers/common/common';
import { FormInputPage } from '../pages/form-input/form-input';
import { FormEditPage } from '../pages/form-edit/form-edit';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    FormInputPage,
    FormEditPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    FormInputPage,
    FormEditPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AuthServiceProvider,
    CommonProvider
  ]
})
export class AppModule {}

3. form-edit.html

<ion-header>
  <ion-navbar>
    <ion-title>Edit Data</ion-title>
  </ion-navbar>
</ion-header>
<ion-content >
  <ion-grid>
   <ion-row>
     <ion-col col-12>
        <form [formGroup]="FormEditData" (ngSubmit)="simpan()">
            <ion-item>  
                <ion-input type="hidden" formControlName="id_barang" *ngFor="let Data of Data_Barang"  [value]="Data.id_barang"></ion-input>                                    
                <ion-label color="primary" stacked>Nama Barang</ion-label>
                <ion-input type="text" formControlName="nama_barang" *ngFor="let Data of Data_Barang"  [value]="Data.nama_barang"></ion-input>                 
            </ion-item>  
            <ion-item>                                     
              <ion-label color="primary" stacked>Qty</ion-label>
              <ion-input type="text" formControlName="qty" *ngFor="let Data of Data_Barang"  [value]="Data.qty"></ion-input>                 
            </ion-item>  
            <ion-item>                                     
              <ion-label color="primary" stacked>Harga</ion-label>
              <ion-input type="text" formControlName="harga" *ngFor="let Data of Data_Barang"  [value]="Data.harga"></ion-input>                 
            </ion-item>          
            <ion-item>
              <button ion-button full type="submit" color="primary" [disabled]="!FormEditData.valid" >Simpan</button>
            </ion-item>    
        </form>
     </ion-col>
   </ion-row>
  </ion-grid>
</ion-content>

4. form-edit.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { Validators,FormBuilder,FormGroup } from '@angular/forms';
import { CommonProvider } from '../../providers/common/common';
import { AuthServiceProvider } from '../../providers/auth-service/auth-service';
@IonicPage()
@Component({
  selector: 'page-form-edit',
  templateUrl: 'form-edit.html',
})
export class FormEditPage {
  public FormEditData:FormGroup;
  responseEditDataBarang:any;
  GetIdbarang:any;
  postDataBarang:any;
  Data_Barang:any;
  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    private formBuilder:FormBuilder, 
    public authService:AuthServiceProvider,
    public common : CommonProvider,
    public toastCtrl: ToastController) {
      this.FormEditData=this.formBuilder.group({
        id_barang:[''],
        nama_barang:[''],
        qty:[''],
        harga:['']
      });
  }

  ionViewWillEnter() {
    //ambil data dari database untuk di tampilkan di form
    this.common.presentLoading();
    let id = this.navParams.get('idbarang');
    this.GetIdbarang={id_barang:id};    
    this.authService.postData(this.GetIdbarang,'Get_Barang_Edit').then((result) => {
      this.postDataBarang = result;      
      if(this.postDataBarang.Get_Barang_Edit){
        this.Data_Barang=this.postDataBarang.Get_Barang_Edit;
        console.log(this.Data_Barang);
        this.common.closeLoading();
      }
      else{ 
        this.Data_Barang='';
        this.common.closeLoading();
     }     
    }, (err) => {
      const toast = this.toastCtrl.create({
      message: 'Gagal koneksi ke server.'+err,
      duration: 2500
    });
    toast.present();
    this.common.closeLoading();
    });    
  }

  simpan(){
    console.log(this.FormEditData.value);
    this.common.presentLoading();
    this.authService.postData(this.FormEditData.value,'Edit_Barang').then((result) => {
      this.responseEditDataBarang = result;      
      if(this.responseEditDataBarang.Edit_Barang=="Edit success"){
        const toast = this.toastCtrl.create({
          message: 'Data berhasil diubah.',
          duration: 2500
        });
        toast.present();
        this.common.closeLoading();
        this.navCtrl.pop();
      }
      else{ 
        const toast = this.toastCtrl.create({
          message: 'Data gagal diubah.',
          duration: 2500
        });
        toast.present();
        this.common.closeLoading();
     }    
    }, (err) => {
      const toast = this.toastCtrl.create({
        message: 'Gagal koneksi ke server.',
        duration: 2500
      });
      toast.present();
      this.common.closeLoading();
    });
  }

}

5. Tampilan halaman form edit seperti gambar dibawah ini

Sampai disini kita telah selesai membuat crud dengan ionic 3 PHP mysql, semoga bermanfaat untuk teman teman sekalian. Selanjutnya kita akan membuat tutorial tentang upload gambar ke server dengan ionic 3.


Baca juga

• Membuat CRUD dengan Ionic PHP dan Mysql Part 1
• Membuat CRUD dengan Ionic PHP dan Mysql Part 2
• Membuat CRUD dengan Ionic PHP dan Mysql Part 3
• Membuat CRUD dengan Ionic PHP dan Mysql Part 4