Membuat CRUD dengan Ionic 3 PHP dan Mysql Part 3

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 2

Sebelumnya kita telah belajar mengenai cara menampilkan data dari database di aplikasi Ionic. Pada tutoral kali ini saya akan sharing tentang cara simpan data ke database Mysql dengan Ionic dan PHP.

Membuat CRUD dengan Ionic PHP dan Mysql Part 3

1. Buat page baru bernama form-input.

ionic g page form-input

2. Edit app.module.ts tambahkan import page form-input, 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.edit form-input.html seperti dibawah ini.

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

4. form-input.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-input',
  templateUrl: 'form-input.html',
})
export class FormInputPage {
  
  public FormSimpanData:FormGroup;
  responseInputDataBarang:any;

  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    private formBuilder:FormBuilder, 
    public authService:AuthServiceProvider,
    public common : CommonProvider,
    public toastCtrl: ToastController) {
      this.FormSimpanData=this.formBuilder.group({
        nama_barang:[''],
        qty:[''],
        harga:['']
      });
  }

  simpan(){
    this.common.presentLoading();
    this.authService.postData(this.FormSimpanData.value,'Input_Barang').then((result) => {
      this.responseInputDataBarang = result;      
      if(this.responseInputDataBarang.Input_Barang=="input success"){
        const toast = this.toastCtrl.create({
          message: 'Data berhasil disimpan.',
          duration: 2500
        });
        toast.present();
        this.common.closeLoading();
        this.navCtrl.pop();
      }
      else{ 
        const toast = this.toastCtrl.create({
          message: 'Data gagal disimpan.',
          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 yang telah kita buat seperti dibawah ini

Tutorial Membuat CRUD dengan Ionic PHP dan Mysql Part 3 sampai disini. Untuk selanjutnya pada part 4 kita akan melanjutkan cara edit data dengan ionic.

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