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

Mari Belajar Coding    5/24/2019    ionic   

Selamat datang kembali di  blog mari belajar coding. Pada tutorial kali ini kita akan melanjutkan tutorial sebelumnya tentang membuat aplikasi crud sederhana dengan Ionic 4 dan PHP Mysql. Jika sebelumnya kita membuat halaman home untuk menampilkan data dari database dan membuat fungsi untuk hapus data. Kali ini kita akan melanjutkan membuat form simpan data pada halaman form input.

Membuat Aplikasi CRUD Sederhana dengan Ionic 4 dan PHP MySQL

Pada tutorial sebelumnya kita telah membuat halaman form-input dan form-edit. Buka form-input.page.html yang berada pada src/app/form-input/form-input.page.html. Kemudian edit seperti dibawah ini.

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

<ion-content>
    <ion-grid>
      <ion-row>
        <ion-col col-12>
            <form [formGroup]="FormSimpanData" (ngSubmit)="simpan()">
                <ion-item>                                     
                    <ion-label color="primary" position="stacked">Nama Barang</ion-label>
                    <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]="!FormSimpanData.valid" >Simpan</ion-button>
            </form>
        </ion-col>
      </ion-row>
      </ion-grid>
</ion-content>

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

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

Tambahkan di @NgModule import setelah IonicModule.

ReactiveFormsModule 

Kode lengkap untuk form-input.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 { FormInputPage } from './form-input.page';

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

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

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

Selanjutnya kita akan edit form-input.page.ts yang berada pada src/app/form-input/form-input.page.ts. Tambahkan import module dibawah import Component.

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';

Tambahkan module pada constructor dan buat form controller untuk simpan data.

public FormSimpanData:FormGroup;

  constructor(public navCtrl: NavController, 
    public api: AuthServiceService, 
    public loadingController: LoadingController,
    public alertController: AlertController, 
    private formBuilder: FormBuilder) {
      this.FormSimpanData=this.formBuilder.group({
          nama_barang:['', Validators.required],
          qty:['', Validators.required],
          harga:['', Validators.required]
        });
     }

Terakhir buat fungsi untuk simpan data.

  simpan() {
    this.api.Post_Data('Input_Barang',this.FormSimpanData.value)
      .subscribe(res => {
          this.navCtrl.navigateBack('/home');
        }, (err) => {
          console.log(err);
        });
  }

Kode lengkap form-input.page.ts 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';

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

  public FormSimpanData:FormGroup;

  constructor(public navCtrl: NavController, 
    public api: AuthServiceService, 
    public loadingController: LoadingController,
    public alertController: AlertController, 
    private formBuilder: FormBuilder) {
      this.FormSimpanData=this.formBuilder.group({
          nama_barang:['', Validators.required],
          qty:['', Validators.required],
          harga:['', Validators.required]
        });
     }

  ngOnInit() {
  }

  simpan() {
    this.api.Post_Data('Input_Barang',this.FormSimpanData.value)
      .subscribe(res => {
          this.navCtrl.navigateBack('/home');
        }, (err) => {
          console.log(err);
        });
  }
}

Untuk menjalankan program, ketikkan ionic serve di cmd atau terminal. Tampilan halaman form-input jika kita jalankan seperti gambar dibawah ini.

Tutorial membuat aplikasi crud sederhana dengan ionic 4 PHP Mysql part 3 sampai disini. Kita akan melanjutkan membuat form edit pada tutorial selanjutnya. 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