Membuat Aplikasi CRUD Sederhana dengan Ionic 4 dan PHP MySQL PART 4

Mari Belajar Coding    5/25/2019    ionic   

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 3. Jika pada tutorial sebelumnya kita membuat halaman form input, pada tutorial kali ini kita akan membuat form edit, caranya hampir sama dengan membuat form input pada tutorial part 3. Tutorial kali ini merupakan tutorial tahap akhir untuk membuat aplikasi crud sederhana dengan Ionic 4. 

Membuat Aplikasi CRUD Sederhana dengan Ionic 4 dan PHP MySQL

Pada tutorial part 2 kita telah membuat halaman untuk form input dan form edit. Buka form-edit.page.html yang berada pada src/app/form-edit/form-edit.page.html. Kemudian edit seperti di bawah ini untuk membuat tampilan form.

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/home"></ion-back-button>
    </ion-buttons>
    <ion-title>Form Edit Data</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-grid>
        <ion-row>
          <ion-col col-12>
              <form [formGroup]="FormEditData" (ngSubmit)="simpan()">
                  <ion-item>                                     
                      <ion-label color="primary" position="stacked">Nama Barang</ion-label>
                      <ion-input type="hidden" formControlName="id_barang" ></ion-input>   
                      <ion-input type="text" formControlName="nama_barang" ></ion-input>                 
                  </ion-item>  
                  <ion-item>                                     
                    <ion-label color="primary" position="stacked">Qty</ion-label>
                    <ion-input type="text" formControlName="qty" ></ion-input>                 
                  </ion-item>  
                  <ion-item>                                     
                    <ion-label color="primary" position="stacked">Harga</ion-label>
                    <ion-input type="text" formControlName="harga" ></ion-input>                 
                  </ion-item>        
                    <ion-button expand="block"  type="submit" color="primary" [disabled]="!FormEditData.valid" >Simpan</ion-button>
              </form>
          </ion-col>
        </ion-row>
        </ion-grid>
</ion-content>

Tambahkan import module ReactiveFormsModule pada form-edit.module.ts yang berada pada src/app/form-edit/form-edit.module.ts.

import { ReactiveFormsModule } from '@angular/forms';

Tambahkan di @NgModule import setelah IonicModule.

ReactiveFormsModule

Kode lengkap untuk form-edit.module.ts seperti dibawah ini.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { FormEditPage } from './form-edit.page';

import { ReactiveFormsModule } from '@angular/forms';

const routes: Routes = [
  {
    path: '',
    component: FormEditPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ReactiveFormsModule,
    RouterModule.forChild(routes)
  ],
  declarations: [FormEditPage]
})
export class FormEditPageModule {}

Edit form-edit.page.ts yang berada pada src/app/form-edit/form-edit.page.ts. Caranya hampir sama dengan form input data. kita akan menambahkan import module yang diperlukan kemudian membuat controller untuk form dan membuat fungsi untuk update data berdasarkan id_barang. Ada sedikit perbedaan yaitu kita akan request data bedasarkan id_barang yang nantinya akan di tampilkan di form edit. Kode lengkapnya seperti dibawah ini.

import { Component, OnInit } from '@angular/core';

import { LoadingController,NavController } from '@ionic/angular';
import { AuthServiceService } from './../../app/auth-service.service';
import { AlertController } from '@ionic/angular';
import { FormControl, FormGroupDirective, FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-form-edit',
  templateUrl: './form-edit.page.html',
  styleUrls: ['./form-edit.page.scss'],
})
export class FormEditPage implements OnInit {

  public FormEditData:FormGroup;
  ResponseData:any;
  dataBarangEdit:any;

  constructor(public navCtrl: NavController, 
    public api: AuthServiceService, 
    public loadingController: LoadingController,
    public alertController: AlertController, 
    private formBuilder: FormBuilder,
    private activatedRoute: ActivatedRoute) {
      this.FormEditData=this.formBuilder.group({
          id_barang:[this.activatedRoute.snapshot.paramMap.get('id')],
          nama_barang:[null, Validators.required],
          qty:[null, Validators.required],
          harga:[null, Validators.required]
        });
    }

    ngOnInit() {
      this.DataBarangEdit();
    }
  
     DataBarangEdit() {   
      const idbarangEdit={
        id_barang:this.activatedRoute.snapshot.paramMap.get('id')
      };
      this.api.Post_Data('Get_Barang_Edit',idbarangEdit)
        .subscribe(res => {
          this.ResponseData=res;
          if(this.ResponseData.Get_Barang_Edit){
            this.dataBarangEdit=this.ResponseData.Get_Barang_Edit;
            this.FormEditData.controls.nama_barang.setValue(this.dataBarangEdit[0].nama_barang);
            this.FormEditData.controls.qty.setValue(this.dataBarangEdit[0].qty);
            this.FormEditData.controls.harga.setValue(this.dataBarangEdit[0].harga);
          }
          else{ 
            this.dataBarangEdit='';
         }         
        }, err => {
          console.log(err);
        });
    }
  
    simpan(){
      this.api.Post_Data('Edit_Barang',this.FormEditData.value)
        .subscribe(res => {
            this.navCtrl.navigateBack('/home');
          }, (err) => {
            console.log(err);
          });
    }

}

Terakhir edit app-routing.module.ts yang beradapa pada src/app, karena saat pindah halaman ke form-edit membawa parameter id. maka tambahkan id pada routes form edit. Kode lengkap untuk app-routing.module.ts seperti dibawah ini. Lihat bagian yang diberi highlight.

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'form-input', loadChildren: './form-input/form-input.module#FormInputPageModule' },
  { path: 'form-edit/:id', loadChildren: './form-edit/form-edit.module#FormEditPageModule' },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Tutorial membuat aplikasi CRUD sederhana dengan Ionic 4 PHP dan Mysql sudah selesai, silahkan teman-teman jalankan aplikasi dengan mengetikkan ionic serve di cmd atau terminal. Jika masih ada kesulitan, silahkan bertanya di kolom komentar. 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 dengan Ionic 4 PHP Mysql
Crud Ionic 4 PHP Mysql