Mari Belajar Coding: android - Tutorial Pemrograman Web dan Mobile
Tampilkan postingan dengan label android. Tampilkan semua postingan
Tampilkan postingan dengan label android. Tampilkan semua postingan

02 Oktober 2019

Memperbaiki Cleartext HTTP traffic not permitted Ionic

Memperbaiki Cleartext HTTP traffic not permitted Ionic

Selamat datang di blog Mari belajar coding. Beberapa waktu yang lalu saya menemukan sedikit masalah saat build aplikasi android menggunakan framework Ionic 3 dan Cordova versi 9. Ketika menggunakan plugin file transfer untuk upload file ke server, muncul pesan error Cleartext HTTP traffic not permittedPesan ini muncul saat saya menjalankan aplikasi pada device dengan android Pie (versi 9). 

Ketika sebuah aplikasi berkomunikasi dengan server menggunakan lalu lintas jaringan clear text seperti HTTP, dapat meningkatkan resiko karena data tidak terenkripsi. Aplikasi yang ingin terhubung atau berkomunikasi dengan server hanya di perbolehkan dengan lalu lintas yang aman saja seperti HTTPS. Akan tetapi kita dapat memperbaiki kesalahan dengan menambahkan network Security Config  di android Manifest.

Buka file network_security_config.xml yang berada pada folder resources/xml/. Tambahkan domain server anda, contoh nya seperti dibawah ini.
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">192.168.99.183</domain>
        <domain includeSubdomains="true">10.0.2.2</domain>
    </domain-config>
</network-security-config>

Keterangan:
alamat IP 192.168.99.183 diatas merupakan domain lokal server PC yang saya gunakan (localhost) jika ingin menjalankan aplikasi dengan real device dalam satu jaringan antara PC dan device.
Alamat IP 10.0.2.2 merupakan domain local server PC jika menggunakan emulator untuk menjalankan aplikasi.

Teman-teman dapat mengganti domain diatas dengan alamat domain server yang teman-teman gunakan.

Untuk lebih jelasnya mengenai traffic cleartext atau pemasangan sertifikat agar menghindari terkena serangan man-in-the-middle. Silahkan baca dokumentasinya di sini Konfigurasi keamanan jaringan.

16 Mei 2019

Membuat Aplikasi CRUD Ionic 3 dengan SQLite Part 2


Membuat Aplikasi CRUD Ionic 3 dengan SQLite

Selamat datang kembali di blog Mari belajar coding. Artikel kali ini merupakan kelanjutan dari artikel sebelumnya tentang Membuat Aplikasi CRUD Ionic 3 dengan SQLite Part 1. Pada tutorial kali ini kita akan membuat sebuah form input data dan form edit data pada halaman form-input dan form-edit yang kemarin sudah kita buat. 


Membuat Aplikasi CRUD Ionic 3 dengan SQLite 
1. Edit file form-input.html yang berada di src/page/form-input, kita akan membuat sebuah form inputan data.
<ion-header>
  <ion-navbar>
    <ion-title>Input Data</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <form [formGroup]="FormInput" (ngSubmit)="Simpan()" novalidate>
      <ion-item>
        <ion-label color="primary" stacked>Nama Mahasiswa</ion-label>
        <ion-input type="text" formControlName="NamaMahasiswa"></ion-input>
      </ion-item>  
      <ion-item>
        <ion-label color="primary" stacked>Jurusan</ion-label>
        <ion-input type="text" formControlName="Jurusan"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label color="primary" stacked>Alamat</ion-label>
        <ion-input type="text" formControlName="Alamat"></ion-input>
      </ion-item>
      <ion-item>
        <button ion-button full type="submit" color="secondary" [disabled]="!FormInput.valid" >Simpan</button>
      </ion-item>
    </form>
</ion-content>

2. Edit juga form-input.ts untuk menangani proses input data dan validasi form.
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';

import { Validators,FormBuilder, FormGroup } from '@angular/forms';
import { DatabaseProvider } from '../../providers/database/database';

/**
 * Generated class for the FormInputPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-form-input',
  templateUrl: 'form-input.html',
})
export class FormInputPage {

  private FormInput:FormGroup;

  constructor(public navCtrl: NavController, public navParams: NavParams,private formBuilder:FormBuilder, 
    private database: DatabaseProvider, private toastCtrl: ToastController) {
      this.FormInput=this.formBuilder.group({
        NamaMahasiswa:['',Validators.required],
        Jurusan:['',Validators.required],
        Alamat:['',Validators.required]
      });
  }

  Simpan(){
    this.database.InsertDataMahasiswa(this.FormInput.value.NamaMahasiswa, 
      this.FormInput.value.Jurusan, this.FormInput.value.Alamat).then( (data) => {
      let toast = this.toastCtrl.create({
        message: 'Data berhasil disimpan.',
        duration: 3000,
        position: 'bottom'
      });
      toast.present();
        this.navCtrl.pop();
    }, (error) => {
      let toast = this.toastCtrl.create({
        message: error,
        duration: 3000,
        position: 'bottom'
      });
      toast.present();
   });
  }

}

3. Selanjutnya kita akan membuat sebuah form edit data pada halaman form-edit. Buka file form-edit.html yang berada di src/pages/form-edit kemudian ubah seperti di bawah ini.
<ion-header>
  <ion-navbar>
    <ion-title>Edit Data</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <form [formGroup]="FormEdit" (ngSubmit)="Simpan()" novalidate>
    <ion-item>
      <ion-label color="primary" stacked>Nama Mahasiswa</ion-label>
      <ion-input type="hidden" formControlName="IdMahasiswa" *ngFor="let data of ListDataMahasiswa" [value]="data.IdMahasiswa"></ion-input>
      <ion-input type="text" formControlName="NamaMahasiswa" *ngFor="let data of ListDataMahasiswa" [value]="data.NamaMahasiswa"></ion-input>
    </ion-item>  
    <ion-item>
      <ion-label color="primary" stacked>Jurusan</ion-label>
      <ion-input type="text" formControlName="Jurusan" *ngFor="let data of ListDataMahasiswa" [value]="data.Jurusan"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label color="primary" stacked>Alamat</ion-label>
      <ion-input type="text" formControlName="Alamat" *ngFor="let data of ListDataMahasiswa" [value]="data.Alamat"></ion-input>
    </ion-item>
    <ion-item>
      <button ion-button full type="submit" color="secondary" [disabled]="!FormEdit.valid" >Simpan</button>
    </ion-item>
  </form>
</ion-content>

4. Terakhir untuk menangani proses ubah data di database dan validasi form, kita akan merubah file form-edit.ts.
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';

import { Validators,FormBuilder, FormGroup } from '@angular/forms';
import { DatabaseProvider } from '../../providers/database/database';
/**
 * Generated class for the FormEditPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-form-edit',
  templateUrl: 'form-edit.html',
})
export class FormEditPage {

  private FormEdit:FormGroup;
  public ListDataMahasiswa : any;
  constructor(public navCtrl: NavController, public navParams: NavParams,private formBuilder:FormBuilder, 
    private database: DatabaseProvider, private toastCtrl: ToastController) {
    this.FormEdit=this.formBuilder.group({
      IdMahasiswa:['',Validators.required],
      NamaMahasiswa:['',Validators.required],
      Jurusan:['',Validators.required],
      Alamat:['',Validators.required]
    });
  }

  ionViewDidEnter() {   
    this.getdatamahasiswa(); 
  }

  getdatamahasiswa(){
    this.database.GetDataMahasiswa(this.navParams.get('IdMahasiswa')).then((data: any) => {
      this.ListDataMahasiswa = data;    
    }, (error) => {
      console.log(error);
    });
  }

  Simpan(){
    this.database.UpdateDataMahasiswa(this.FormEdit.value.NamaMahasiswa, 
      this.FormEdit.value.Jurusan, this.FormEdit.value.Alamat, this.FormEdit.value.IdMahasiswa).then( (data) => {
      let toast = this.toastCtrl.create({
        message: 'Data berhasil diubah.',
        duration: 3000,
        position: 'bottom'
      });
      toast.present();
        this.navCtrl.pop();
    }, (error) => {
      let toast = this.toastCtrl.create({
        message: error,
        duration: 3000,
        position: 'bottom'
      });
      toast.present();
   });
  }

}

Jalankan aplikasi dengan emulator untuk mencoba input data, ubah data dan menghapus data, Jika teman-teman menjalankan program melalui browser dengan mengetikkan ionic serve, aplikasi tidak akan bekerja karena sqlite berjalan di emulator atau real device. Sekian tutorial tentang membuat aplikasi crud Ionic 3 dengan SQLite, semoga bermanfaat.

Baca juga :
Debugging Sqlite Melalui Command Line 



Related search:
Membuat aplikasi CRUD Ionic 3 dengan SQLite 

15 Mei 2019

Membuat Aplikasi CRUD Ionic 3 dengan SQLite Part 1


Membuat Aplikasi CRUD Ionic 3 dengan SQLite

Selamat datang di blog Mari belajar coding. Sudah lama saya tidak update artikel tentang framework Ionic, pada tutorial kali ini kita akan belajar membuat aplikasi CRUD (create, reate, update, delete) menggunakan framework Ionic dengan database SQLite. Dengan menggunakan SQLite kita bisa membuat sebuah aplikasi offline, karena data akan di simpan di perangkat mobile.

Versi ionic, cordova dan node js yang saya gunakan seperti dibawah ini. Buat teman-teman yang menggunakan versi Ionic 4 bisa menyesuaikan.
Membuat Aplikasi CRUD Ionic 3 dengan SQLite
Membuat CRUD Ionic 3 dengan SQLite
Membuat Aplikasi CRUD Ionic 3 dengan SQLite
1. Buat projek aplikasi bernama appSqlite menggunakan cmd atau terminal dengan mengetikkan kode seperti dibawah ini.
ionic start appSqlite blank

2. Install plugin sqlite menggunakan cmd atau terminal.
ionic cordova plugin add cordova-sqlite-storage --save
npm install @ionic-native/sqlite@4 --save

3. Buat provider bernama database menggunakan cmd atau terminal.
ionic generate provider database

4. Buat halaman untuk form-input data dan form-edit data.
ionic generate page form-input

ionic generate page form-edit

5. Tambahkan import sqlite, providers database, form-input dan form-edit di src/app/app.module.ts . Lihat baris yang diberi 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 { FormInputPage } from '../pages/form-input/form-input';
import { FormEditPage } from '../pages/form-edit/form-edit';

import { HttpModule } from '@angular/http';

import { SQLite } from '@ionic-native/sqlite';
import { DatabaseProvider } from '../providers/database/database';

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

6. Edit file providers database yang berada di src/providers/database/database.ts. Buat fungsi untuk create database, create table dan fungsi CRUD.
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';
/*
  Generated class for the DatabaseProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class DatabaseProvider {

  private db:SQLiteObject;
  private isOpen:boolean;

  constructor(public http: Http, public storage: SQLite) {
    if(!this.isOpen){
      this.storage=new SQLite();

      //buat database bernama akademik.db
      this.storage.create({name:"akademik.db",location:"default"}).then((db:SQLiteObject) =>{
       this.db=db;

       //buat tabel bernama mahasiswa
       db.executeSql("CREATE TABLE IF NOT EXISTS mahasiswa(IdMahasiswa INTEGER PRIMARY KEY AUTOINCREMENT, NamaMahasiswa TEXT, "+
        "Jurusan TEXT, Alamat TEXT)",[]);
      
       this.isOpen=true;
      }).catch((error) => {
       console.log(error);
      })
     }
  }

  //insert ke tabel mahasiswa
  InsertDataMahasiswa(NamaMahasiswa: string, Jurusan:string, Alamat:string){
    return new Promise ((resolve, reject) => {
     let sql = "INSERT INTO mahasiswa (NamaMahasiswa, Jurusan, Alamat)"+
     "VALUES (?, ?, ?)";
     this.db.executeSql(sql, [NamaMahasiswa, Jurusan, Alamat]).then((data) =>{
      resolve(data);
     }, (error) => {
      reject(error);
     });
    });
  }

  //ambil semua data di tabel mahasiswa
  GetAllDataMahasiswa(){
    return new Promise ((resolve, reject) => {
     this.db.executeSql("SELECT * FROM mahasiswa ORDER BY IdMahasiswa DESC", []).then((data) => {
      let arrayDataMahasiswa = [];
      if (data.rows.length > 0) {
       for (var i = 0; i < data.rows.length; i++) {
        arrayDataMahasiswa.push({
          IdMahasiswa: data.rows.item(i).IdMahasiswa,
          NamaMahasiswa: data.rows.item(i).NamaMahasiswa,       
          Jurusan: data.rows.item(i).Jurusan,
          Alamat: data.rows.item(i).Alamat
        });      
       }     
      }
      resolve(arrayDataMahasiswa);
     }, (error) => {
      reject(error);
     })
    })
  }

  //ambil data mahasiswa berdasarkan idmahasiswa
  GetDataMahasiswa(id:string){
    return new Promise ((resolve, reject) => {
     this.db.executeSql("SELECT * FROM mahasiswa WHERE IdMahasiswa=?", [id]).then((data) => {
      let arrayMahasiswa = [];
      if (data.rows.length > 0) {
       for (var i = 0; i < data.rows.length; i++) {
        arrayMahasiswa.push({
          IdMahasiswa: data.rows.item(i).IdMahasiswa,
          NamaMahasiswa: data.rows.item(i).NamaMahasiswa,       
          Jurusan: data.rows.item(i).Jurusan,
          Alamat: data.rows.item(i).Alamat
        });      
       }     
      }
      resolve(arrayMahasiswa);
     }, (error) => {
      reject(error);
     })
    })
  }

  //hapus data mahasiswa berdasarkan id mahasiswa
  DeleteDataMahasiswa(id:string){
    return new Promise ((resolve, reject) => {
     let sql="DELETE FROM mahasiswa WHERE IdMahasiswa=?";
     this.db.executeSql(sql, [id]).then((data) => {
      resolve(data);
     }, (error) => {
      reject(error);
     })
    })
  }

  //Update data mahasiswa berdasarkan id mahasiswa
  UpdateDataMahasiswa(NamaMahasiswa: string, Jurusan:string, Alamat:string, id:string){
    return new Promise ((resolve, reject) => {
     let sql="UPDATE mahasiswa SET NamaMahasiswa=?, Jurusan=?, Alamat=? WHERE IdMahasiswa=?";
     this.db.executeSql(sql, [NamaMahasiswa,Jurusan,Alamat, id]).then((data) => {
      resolve(data);
     }, (error) => {
      reject(error);
     })
    })
  }

}

7. Selanjutnya edit home.html  yang berada di src/pages/home untuk membuat button tambah data dan menampilkan data yang berhasil di simpan.
<ion-header>
  <ion-navbar>
    <ion-title>
      Mari Belajar Coding
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h4 text-center>Membuat Aplikasi CRUD Ionic 3 dengan SQLite</h4>
  <h5 text-center>maribelajarcoding.com</h5><br><br>
  <button ion-button color="primary" block (click)="adddata()">Tambah Data</button>
  <table *ngIf="ListDataMahasiswa" >
      <thead>
      <tr>
        <th>Nama Mahasiswa</th>
        <th>Jurusan</th>
        <th>Alamat</th>
        <th>Aksi</th>
      </tr>
      </thead>
      <tbody >
      <tr *ngFor="let data of ListDataMahasiswa" >
        <td valign="top">{{data.NamaMahasiswa}}</td>
        <td valign="top">{{data.Jurusan}}</td>   
        <td valign="top">{{data.Alamat}}</td>
        <td valign="top">
          <a (click)="showConfirm(data.IdMahasiswa)"><ion-icon name="trash"></ion-icon></a>
          <a (click)="editdata(data.IdMahasiswa)"><ion-icon name="create"></ion-icon></a>
        </td>       
      </tr>
      </tbody>
    </table>   
</ion-content>

8. Edit juga home.ts 
import { Component } from '@angular/core';
import { NavController, AlertController, ToastController } from 'ionic-angular';

import { DatabaseProvider } from '../../providers/database/database';

import { FormInputPage } from '../../pages/form-input/form-input';
import { FormEditPage } from '../../pages/form-edit/form-edit';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public ListDataMahasiswa : any;
  constructor(public navCtrl: NavController, private database: DatabaseProvider, public toastCtrl: ToastController,
    public alertCtrl: AlertController) {
    
  }

  ionViewDidEnter() {   
      this.getalldatamahasiswa(); 
  }

  getalldatamahasiswa(){
    this.database.GetAllDataMahasiswa().then((data: any) => {
      this.ListDataMahasiswa = data;      
    }, (error) => {
      console.log(error);
    });
  }

  adddata(){
    this.navCtrl.push(FormInputPage);
  }

  editdata(id){
    this.navCtrl.push(FormEditPage,{
      IdMahasiswa:id
    });
  }

  showConfirm(id) {
    const confirm = this.alertCtrl.create({
      message: 'Apakah anda yakin akan menghapus data ini?',     
      buttons: [
        {
          text: 'Tidak',
          handler: () => {
            //console.log('Disagree clicked');
          }
        },
        {
          text: 'Ya',
          handler: () => {
            this.Hapus(id);
          }
        }
      ]
    });
    confirm.present();
  }

  Hapus(id){
    this.database.DeleteDataMahasiswa(id).then(data => {
      let toast = this.toastCtrl.create({
        message: 'Data berhasil dihapus.',
        duration: 3000,
        position: 'bottom'
      });
      toast.present();
      this.getalldatamahasiswa();
    }, (error) => {
      let toast = this.toastCtrl.create({
        message: error,
        duration: 3000,
        position: 'bottom'
      });
      toast.present();
    });
  }

}


9. Terakhir edit file home.scss untuk memberikan style pada tabel.
page-home {
    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 Ionic 3 dengan SQLite Part 1 sampai disini. Untuk tutorial selanjutnya kita akan membuat form tambah data di page form-input

Follow akun sosial media kami agar tidak ketinggalan update artikel terbaru.

Baca juga:
Membuat Aplikasi CRUD Ionic 3 dengan SQLite Part 2
Debugging Sqlite Melalui Command Line

Related search:
Membuat aplikasi CRUD Ionic 3 dengan SQLite 


15 Maret 2019

Membuka aplikasi lain dengan Ionic


Membuka aplikasi lain dengan Ionic

Selamat datang di blog Mari belajar koding. Buat teman teman yang mengembangkan aplikasi mobile dengan framework ionic, apakah teman-teman bertanya-tanya bagaimana cara membuka aplikasi lain di projek aplikasi yang kita buat dengan ionic atau membuka google play jika aplikasi yang di maksud belum terinstal? nah, kali ini kita akan belajar bagaimana cara membuka aplikasi lain di aplikasi yang di kembangkan dengan framework Ionic. Untuk versi ionic nya saya menggunakan versi 3.

Membuka aplikasi lain dengan Ionic

Buat projek baru dengan Ionic bernama myapp .
ionic start myapp blank

Instal plugin cordova-plugin-app-launcher dan cordova-plugin-market.
ionic cordova plugin add cordova-plugin-app-launcher

ionic cordova plugin add cordova-plugin-market

npm install @ionic-native/market@4

Untuk menghindari pemblokiran kesalahan kompilasi karena cordova, buat file bernama launcher.js di myapp/src/assets/js, kalau belum ada folder js buat satu folder bernama js. Salin kode berikut kemudian simpan. Kamu bisa mengganti com.facebook.katana dengan id aplikasi yang ingin kamu buka di projek aplikasi yang kamu buat. Di sini saya ambil contoh untuk membuka aplikasi facebook.
module.exports = {
    packageLaunch: function(appSchemeStr){
        // launch app using package name (for Android devices)
        window.plugins.launcher.launch({
                packageName: appSchemeStr
            }, 
            function(){ }, 
            function(){ 
                cordova.plugins.market.open('com.facebook.katana')
            }
        );
    },
    uriLaunch: function(appUriStr){
        // launch app using URI (for iOS devices)
        window.plugins.launcher.launch({
                uri: appUriStr
            }, 
            function(){ }, 
            function(){ alert('Failed to open app') }
        );
    },
}

Tambahkan import Market di app.module.ts, lihat baris yang di beri highlight dibawah ini.
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 { Market } from '@ionic-native/market';
@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Market,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Buka file home.html yang berada di myapp/src/pages/home, tambahkan button untuk membuka aplikasi lain. 
<ion-header>
  <ion-navbar>
    <ion-title>
      Mari belajar coding
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button color="secondary" (click)="OpenFacebook()">Buka Aplikasi Facebook</button>
</ion-content>

Opening another app within Ionic

Buka file home.ts yang berada di myapp/src/pages/home, kemudian edit seperti di bawah ini.
import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';

import * as launcher from '../../assets/js/launcher';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController,  public alertCtrl: AlertController,) {

  }
  OpenFacebook(){
    const confirm = this.alertCtrl.create({
      message: 'Anda akan diarahkan ke aplikasi facebook.',     
      buttons: [
        {
          text: 'Tidak',
          handler: () => {
            //console.log('Disagree clicked');
          }
        },
        {
          text: 'Ya',
          handler: () => {
            launcher.packageLaunch("com.facebook.katana");
            confirm.present();
          }
        }
      ]
    });
    confirm.present();
 }
 
}

Untuk mengetahui id aplikasi atau packageID aplikasi, kamu bisa buka goole play di browser, kemudian cari aplikasi yang ingin kamu buka dengan projek aplikasi ionic kamu.


Jalankan projek kamu dengan emulator android untuk mencobanya.

Tutorial membuka aplikasi lain dengan Ionic sampai disini, sekian semoga bermanfaat.

Related seacrh:
  • Membuka aplikasi lain di ionic
  • Membuka aplikasi dengan packageId di Ionic
  • Opening another app within Ionic
  • How to open already installed app on Ionic
  • Open other app using package ID/name on Ionic

13 Maret 2019

Memperbaiki Blocked by CORS Policy di Ionic

Memperbaiki Blocked by CORS Policy di Ionic

Selamat datang di blog Mari belajar koding. Buat teman-teman yang mengembangkan aplikasi mobile dengan framework Ionic tentu familiar dengan module http untuk permintaan data menggunakan api. Tetapi ada beberapa kendala saat kita melakukan request data, muncul pesan eror has been blocked by CORS policy. 

Apa itu CORS?
CORS adalah metode untuk mencegah klien meminta layanan dari host lain. Ini dilakukan untuk alasan keamanan. 

Mungkin teman-teman juga mengalami masalah pesan eror ini. Sedikit cerita, saya juga mengalami pesan error ini saat menggunakan header untuk otorisasi (Authorization) di projek aplikasi yang saya buat. Sebelumnya,  pertukaran data masih bisa jalan tanpa memunculkan pesan eror ketika header hanya menggunakan content type application/json. Ketika menambahkan Authorization untuk keamanan pertukaran datanya disitu muncul pesan eror. Sudah berbagai forum saya baca untuk memperbaikinya tapi masih aja has been blocked. Mungkin juga saya aja yang kurang memahaminya. Setelah berjam-jam akhirnya nemu juga blog luar negeri yang membahas. Oke langung saja cara memperbaiki blocked by cors policy di Ionic.

Memperbaiki Blocked by CORS Policy di Ionic

1. Install plugin http
$ ionic cordova plugin add cordova-plugin-advanced-http
$ npm install --save @ionic-native/http@4

2.Tambahkan import HTTP di app.module.ts
import { HTTP } from '@ionic-native/http';

3.Tambahkan http di prodiver.
providers: [
    StatusBar,
    SplashScreen,
    ScreenOrientation,
    
    HTTP,

    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AuthServiceProvider
  ]

Contoh sederhana untuk menggunakannya:
import { HTTP } from '@ionic-native/http';

constructor(private http: HTTP) {}

...

this.http.get('http://ionic.io', {}, {})
  .then(data => {

    console.log(data.status);
    console.log(data.data); // data received by server
    console.log(data.headers);

  })
  .catch(error => {

    console.log(error.status);
    console.log(error.error); // error message as string
    console.log(error.headers);

  });


Contoh jika menggunakannya di provider.ts
import { Injectable } from '@angular/core';
//import {Http, Headers, RequestOptions } from '@angular/http';
import { HTTP } from '@ionic-native/http';
import 'rxjs/add/operator/map';

@Injectable()
export class AuthServiceProvider {
 apiUrl: any;

  constructor( private http: HTTP) { 

      this.apiUrl='http://10.0.2.2/';
  }

  postData(credentials, type) {
    return new Promise((resolve, reject) => {     
      let headers = {
        'Content-Type':'application/x-www-form-urlencoded',
        'Authorization': 'Basic 123456789qwertyuiop'
      };   
      this.http2.post(this.apiUrl + type, credentials, headers)
        .then(data => {
          resolve(JSON.parse(data.data));
        })
        .catch(error => {
          reject(JSON.parse(error.error));
        });
    });
  }
  
}

Silahkan jalankan aplikasinya di emulator atau device, Untuk run di browser plugin http tidak akan bekerja. Sekian, semoga bermanfaat.


Related search:
  • Memperbaiki Blocked by CORS Policy di Ionic
  • Blocked by CORS Policy Ionic

07 Maret 2019

Upload Gambar ke Server di Ionic 3


Upload Gambar ke Server di Ionic 3

Tutorial kali ini kita akan belajar membuat aplikasi ionic  sederhana untuk mengambil gambar dengan kamera atau memilih dari pustaka gambar kemudian gambar akan di upload ke server dengan PHP.

Upload Gambar ke Server dengan Ionic

1. Buat aplikasi baru dengan ionic 3 bernama uploadimage.
ionic start uploadimage blank

2.Install plugin yang di perlukan.
ionic cordova plugin add cordova-plugin-camera --save
npm install --save @ionic-native/camera@4.2

ionic cordova plugin add cordova-plugin-file --save
npm install --save @ionic-native/file@4.2

ionic cordova plugin add cordova-plugin-filepath --save
npm install --save @ionic-native/file-path@4.2

ionic cordova plugin add cordova-plugin-file-transfer --save
npm install --save @ionic-native/file-transfer@4.2

Setiap npm yang kita instal menggunakan versi 4.2 dikarenakan kita membangun aplikasi dengan ionic 3, untuk pengguna ionic 4 bisa menghapus @4.2 di setiap npm atau ganti @latest untuk instal npm latest version.

Baca juga:  Upload File (pdf, docx, xlsx, ppt, etc) ke Server Ionic 3

Keterangan:
cordova-plugin-camera
Plugin ini memungkinkan untuk mengambil gambar dari kamera atau memilih gambar dari pustaka gambar.
cordova-plugin-file
Plugin ini memungkinkan akses baca/tulis ke file yang berada di perangkat.
cordova-plugin-filepath
Plugin ini memungkinkan untuk melihat jalur sistem file asli untuk URI konten android.
cordova-plugin-file-transfer
Plugin ini memungkinkan untuk mengunggah dan mengunduh file.

3. Include plugin yang telah di instal dengan menambahkan imports dan providers di src/app/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 { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
import { FilePath } from '@ionic-native/file-path';
import { Camera } from '@ionic-native/camera';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
   FileTransfer, 
    FileTransferObject,
    File,
    FilePath,
    Camera,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

4. Buat fungsi untuk mengambil gambar dari kamera atau pilih dari pustaka gambar. Buka src/pages/home/home.ts kemudian ubah seperti dibawah ini.
import { Component } from '@angular/core';
import { NavController, ToastController, ActionSheetController,LoadingController } from 'ionic-angular';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { FilePath } from '@ionic-native/file-path';
import { File,FileEntry } from '@ionic-native/file';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  imageURI:any;
  imageFileName:any;
  GetImageNameUpload:any;
  constructor(public navCtrl: NavController, 
    public toastCtrl: ToastController,
    public actionSheetCtrl: ActionSheetController, 
    private transfer: FileTransfer,
    private camera: Camera,
    private filePath: FilePath,
    private file: File,
    public loadingCtrl: LoadingController) {
  }

  presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Pilih sumber gambar',
      buttons: [
        {
          text: 'Ambil foto',
          handler: () => {
            this.getImage(this.camera.PictureSourceType.CAMERA);
          }
        },
        {
          text: 'Ambil dari galeri',
          handler: () => {
            this.getImage(this.camera.PictureSourceType.PHOTOLIBRARY);
          }
        },        
        {
          text: 'Batal',
          role: 'cancel'
        }
      ]
    });
    actionSheet.present();
  }

  getImage(sourceType) {
    let loader = this.loadingCtrl.create({
      content: "Please wait..."
    });
    loader.present();
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      sourceType: sourceType
    }  
    this.camera.getPicture(options).then((imagePath) => {
      this.imageURI = imagePath;      
      this.filePath.resolveNativePath(imagePath)
        .then(filePath => {
          this.file.resolveLocalFilesystemUrl(filePath).then(fileInfo =>
            {
              let files = fileInfo as FileEntry;
              files.file(success =>
                {                  
                  this.imageFileName=success.name;
                });
            },err =>
            {
              console.log(err);
              throw err;              
            });
        });
        loader.dismiss();
    }, (err) => {
      console.log(err);
      this.presentToast(err);
      loader.dismiss();
    });    
  }

  uploadFile() {
    let loader = this.loadingCtrl.create({
      content: "Uploading..."
    });
    loader.present();
    const fileTransfer: FileTransferObject = this.transfer.create();  

    let URL="http://10.0.2.2/blog/upload-image-ionic/upload.php";
    
    let options: FileUploadOptions = {
      fileKey: 'file',
      fileName: this.imageFileName,
      chunkedMode: false,
      mimeType: "image/jpeg",
      headers: {}
    }  
    fileTransfer.upload(this.imageURI, URL, options)
      .then((data) => {
      this.GetImageNameUpload=this.imageFileName;
      loader.dismiss();
      this.presentToast("Image uploaded successfully");
    }, (err) => {
      console.log(err);
      loader.dismiss();
      this.presentToast(err);
    });
  }

  presentToast(msg) {
    let toast = this.toastCtrl.create({
      message: msg,
      duration: 3000,
      position: 'bottom'
    });  
    toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });  
    toast.present();
  }
}

Keterangan:
Fungsi presentActionSheet() berguna untuk menampilkan daftar opsi. Pada fungsi ini terdapat dua opsi yaitu Ambil foto dan Ambil dari galeri. Saat salah satu opsi di pilih, fungsi getImage() akan di aktifkan dengan membawa parameter. Parameter ini berguna untuk membedakan apakah user memilih ambil gambar dengan kamera atau pilih gambar dari pustaka gambar. Setelah user memilih gambar, path uri gambar tersebut akan disimpan pada variabel this.imageURI. Path uri  ini yang nantinya akan di upload ke server. 

this.filePath di gunakan untuk mengetahui file name gambar, file name ini akan disimpan pada variabel imageFileName

Ketika user upload gambar, fungsi uploadFile() akan diaktifkan. Kamu bisa ganti alamat url dengan url directory server kamu. Url ini yang nantinya akan mengarahkan ke server. Alamat url http://10.0.2.2 berguna untuk menghubungkan emulator dengan localhost PC kamu. Kamu bisa baca disini untuk lebih jelasnya Set up Android Emulator networking.

5. home.ts
<ion-header>
  <ion-navbar>
    <ion-title>
      Upload Image
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-grid>
   <ion-row>
     <ion-col col-12>
      <ion-item>
         <p style="color:#488aff">Foto</p> 
        <button ion-button color="secondary" (click)="presentActionSheet()">Choose File</button>{{imageFileName}}
        <button ion-button (click)="uploadFile()">Upload</button>
      </ion-item>  
      <img *ngIf="GetImageNameUpload" src="http://10.0.2.2/blog/upload-image-ionic/uploads/{{GetImageNameUpload}}" width="80%">
      
     </ion-col>
   </ion-row>
  </ion-grid>
</ion-content>

Baca juga  Upload dan Compress/Resize File Gambar dengan PHP

6. Buat file dengan PHP untuk memproses gambar. Simpan dengan nama upload.php di directory htdocs kamu. Buat juga satu folder uploads untuk menyimpan gambar.
upload.php
<?php
header('Access-Control-Allow-Origin: *');
$target_path = "uploads/";
 
$target_path = $target_path.basename( $_FILES['file']['name']);
if (move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {
    echo "Upload gambar berhasil";
} else {
echo $target_path;
}
?>

Upload Gambar ke Server di Ionic 3 Upload Gambar ke Server di Ionic 3


Jalankan aplikasi dengan emulator android, karena sebagian plugin tidak bekerja jika dijalankan di browser. Tutorial upload gambar dengan ionic sampai disini,  semoga bermanfaat.


Related Search:
  • Upload images on ionic
  • Upload images to the server on ionic
  • Get file name before upload on ionic 

05 Maret 2019

Membuat CRUD dengan Ionic 3 PHP dan Mysql Part 4


Membuat CRUD dengan Ionic 3 PHP dan Mysql

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
Membuat CRUD dengan Ionic PHP dan Mysql

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 3 PHP dan Mysql Part 3

Membuat CRUD dengan Ionic 3 PHP dan Mysql

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
Membuat CRUD dengan Ionic PHP dan Mysql


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.

Membuat CRUD dengan Ionic 3 PHP dan Mysql Part 2


Membuat CRUD dengan Ionic 3 PHP dan Mysql

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 1

Sebelumnya kita telah membuat rest api untuk pertukaran data antar clien dan server, kali ini kita akan membuat bagaimana cara menampilkan data dari database di aplikasi ionic. 

 Membuat CRUD dengan Ionic PHP dan Mysql Part 2
1. Buat aplikasi baru dengan ionic 3.
ionic start crud blank

2. Buat provider bernama auth-service.
ionic g provider auth-service

3. Edit file auth-service.ts, ganti apiUrl nya ke alamat rest api yang telah kamu buat pada tutorial part 1.
import { Injectable } from '@angular/core';
import {Http, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
//arahkan apiUrlnya ke alamat rest api yang kamu buat di tutorial part 1
let apiUrl = 'http://localhost/blog/crud/';

@Injectable()
export class AuthServiceProvider {
  constructor(public http : Http) {    
  }
  postData(credentials, type) {
    return new Promise((resolve, reject) => {
      let headers = new Headers();         
      headers.append('Content-Type', 'application/json');
      let options = new RequestOptions({ headers: headers });
      this.http.post(apiUrl + type, JSON.stringify(credentials), options)
      .subscribe(res => {
        resolve(res.json());
      }, (err) => {
        reject(err);
      });
    });
  }

GetData(type) {
    return new Promise((resolve, reject) => {
      let headers = new Headers();         
      headers.append('Content-Type', 'application/json');
      let options = new RequestOptions({ headers: headers });
      this.http.get(apiUrl + type , options)
      .subscribe(res => {
        resolve(res.json());
      }, (err) => {
        reject(err);
      });
    });
  }
}

4. Buat provider bernama common, provider ini berfungsi untuk membuat animasi loading. dengan provider common kita tidak perlu menulis syntaks loading berulang-ulang setiap melakukan aksi.
ionic g provider common

5. Edit file common.ts seperti dibawah ini.
import { Injectable } from '@angular/core';
import { LoadingController } from 'ionic-angular';
@Injectable()
export class CommonProvider {
  public loader: any;
  constructor(public loadingCtrl: LoadingController) {
  }

  presentLoading(){
    this.loader = this.loadingCtrl.create({content: "Please wait ..."})
    this.loader.present();
 }

  closeLoading(){
    this.loader.dismiss();
  }
}

6. Panggil provider dan page yang telah kita buat 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 {}

7. Edit home.html seperti dibawah ini
<ion-header>
  <ion-navbar>
    <ion-title>
      Home
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-grid >
    <ion-row>
      <ion-col col-12>
          <button ion-button color="dark" block (click)="pageInput()">Tambah Data</button>
          <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">
                <a (click)="showConfirm(data.id_barang)"><ion-icon name="trash"></ion-icon></a>
                <a (click)="pageEdit(data.id_barang)"><ion-icon name="create"></ion-icon></a>
              </td>       
            </tr>
            </tbody>
          </table>         
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

8. Edit file home.ts
import { Component } from '@angular/core';
import { NavController, NavParams, ToastController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
import { CommonProvider } from '../../providers/common/common';
import { AuthServiceProvider } from '../../providers/auth-service/auth-service';
import { FormEditPage } from '../form-edit/form-edit';
import { FormInputPage } from '../form-input/form-input';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  postDataBarang:any;
  Data_Barang:any;
  idbarangDelete:any;
  postDelete:any;
  constructor(public navCtrl: NavController, 
    public navParams: NavParams,
    public authService:AuthServiceProvider,
    public common : CommonProvider,
    public toastCtrl: ToastController,
    public alertCtrl: AlertController) {
  }

  ionViewWillEnter() {
    this.common.presentLoading();
    this.authService.GetData('Data_Barang').then((result) => {
      this.postDataBarang = result;      
      if(this.postDataBarang.Data_Barang){
        this.Data_Barang=this.postDataBarang.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();
    });
  }
  
  pageInput(){
    this.navCtrl.push(FormInputPage);
  }
  pageEdit(idbarang){
    this.navCtrl.push(FormEditPage,{
      idbarang: idbarang
    });
  }

  Hapus(idbarang){
    this.idbarangDelete={id_barang:idbarang};
    this.common.presentLoading();
    this.authService.postData(this.idbarangDelete,'Delete_Barang').then((result) => {
      this.postDelete = result;      
      if(this.postDelete.Delete_Barang){
          this.authService.GetData('Data_Barang').then((result) => {
            this.postDataBarang = result;      
            if(this.postDataBarang.Data_Barang){
              this.Data_Barang=this.postDataBarang.Data_Barang;
            }
            else{ 
              this.Data_Barang='';
          }     
          }, (err) => {
          });
        this.common.closeLoading();
      }
      else{ 
        this.common.closeLoading();
     }     
    }, (err) => {
      const toast = this.toastCtrl.create({
      message: 'Gagal koneksi ke server.'+err,
      duration: 2500
    });
    toast.present();
    this.common.closeLoading();
    });
  }

  showConfirm(idbarang) {
    const confirm = this.alertCtrl.create({
      message: 'Apakah anda yakin akan menghapus data ini?',     
      buttons: [
        {
          text: 'Tidak',
          handler: () => {
            //console.log('Disagree clicked');
          }
        },
        {
          text: 'Ya',
          handler: () => {
            this.Hapus(idbarang);
          }
        }
      ]
    });
    confirm.present();
  }

}

9. Tambahkan css seperti ini di home.scss untuk mempercantik tampilan tabel.
page-home {
    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; 
 }
}

Membuat CRUD dengan Ionic PHP dan Mysql

Tutorial Membuat CRUD dengan Ionic PHP dan Mysql Part 2 sampai disini. Untuk selanjutnya pada part 3 kita akan melanjutkan cara simpan data ke database mysql dengan ionic.

Baca juga

04 Maret 2019

Membuat CRUD dengan Ionic 3 PHP dan Mysql Part 1


Membuat CRUD dengan Ionic 3 PHP dan Mysql

Pada tutorial sebelumnya, kita telah belajar tutorial Membuat Login Ionic Integrasi PHP dan Mysql. Kali ini saya akan sharing  tentang cara membuat crud dengan Ionic PHP dan Mysql. Untuk versi Ionic yang saya gunakan menggunakan versi Ionic 3.

Baca juga Membuat Aplikasi CRUD Sederhana dengan Ionic 4 dan PHP MySQL 

Membuat CRUD dengan Ionic PHP dan Mysql

1. Buat database dan tabel dengan mysql, Contoh tabel yang akan kita gunakan bernama tabel barang.
CREATE TABLE `barang` (
  `id_barang` int(11) NOT NULL AUTO_INCREMENT,
  `nama_barang` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `qty` int(11) DEFAULT NULL,
  `harga` int(11) DEFAULT NULL,
  PRIMARY KEY (`id_barang`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

2. Buat rest api sebagai web services untuk pertukaran data antar clien dan server. untuk rest api disini saya menggunakan slim framework sebagai alat bantu. Kamu bisa baca dokumentasi di slimframework.com

Cara instal slimframework menggunakan composer. Buka CMD, kemudian ketikkan kode berikut ini. 
composer require slim/slim "^3.12"

Baca juga Cara Instal dan Menggunakan Composer 

3. Buat koneksi ke database dengan PHP, beri nama config.php
<?php
error_reporting(0);
session_start();
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'ionic');
define("BASE_URL", "http://localhost/blog/crud/");
define("SITE_KEY", 'MariBelajarcoding');
function getDB() 
{ $dbhost=DB_SERVER;
 $dbuser=DB_USERNAME;
 $dbpass=DB_PASSWORD;
 $dbname=DB_DATABASE;
 $dbConnection = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass); 
 $dbConnection->exec("set names utf8");
 $dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 return $dbConnection;
}
/* DATABASE CONFIGURATION END */
/* API key encryption */
function apiToken($session_uid)
{
$key=md5(SITE_KEY.$session_uid);
return hash('sha256', $key);
}
?>

4. Buat file index.php, file ini berguna untuk memanggil fungsi crudnya.
<?php
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description');
header('Content-Type: application/json');
require 'vendor/autoload.php';
require 'config.php';
$app = new Slim\App();

$app->get('/Data_Barang','Data_Barang');
$app->post('/Input_Barang','Input_Barang');
$app->post('/Get_Barang_Edit','Get_Barang_Edit');
$app->post('/Edit_Barang','Edit_Barang');
$app->post('/Delete_Barang','Delete_Barang');
$app->run();

function Data_Barang($request, $response){
    $data = $request->getParsedBody();
    //$login=$data['login'];
    //$token=$data['token'];   
    //$systemToken=apiToken($login);   
    try {         
        //if($systemToken == $token){
            $Data_Barang = '';
            $db = getDB();            
            $sql = "SELECT * FROM barang";
            $stmt = $db->prepare($sql);
            $stmt->execute();
            $Data_Barang = $stmt->fetchAll(PDO::FETCH_OBJ);           
            $db = null;
            if($Data_Barang)
            echo '{"Data_Barang": ' . json_encode($Data_Barang) . '}';
            else
            echo '{"Data_Barang": ""}';
        //} else{
        //    echo '{"error":{"text":"No access"}}';
        //}       
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}';
    }
}

function Input_Barang($request, $response){
    $data = $request->getParsedBody();
    $nama_barang=$data['nama_barang'];
    $qty=$data['qty'];
    $harga=$data['harga'];
    //$login=$data['login'];
    //$token=$data['token'];   
    //$systemToken=apiToken($login);   
    try {         
        //if($systemToken == $token){
            $db = getDB();            
            $sql = "INSERT INTO barang(nama_barang, qty, harga) VALUES(:nama_barang ,:qty, :harga)";
            $stmt = $db->prepare($sql);
            $stmt->bindParam("nama_barang", $nama_barang, PDO::PARAM_STR);
            $stmt->bindParam("qty", $qty, PDO::PARAM_STR);
            $stmt->bindParam("harga", $harga, PDO::PARAM_STR);
            $stmt->execute();        
            $db = null;
            if($stmt)
            echo '{"Input_Barang": "input success"}';
            else
            echo '{"Input_Barang": "input error"}';
        //} else{
        //    echo '{"error":{"text":"No access"}}';
        //}       
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}';
    }
}


function Get_Barang_Edit($request, $response){
    $data = $request->getParsedBody();
    $id_barang=$data['id_barang'];
    //$login=$data['login'];
    //$token=$data['token'];   
    //$systemToken=apiToken($login);   
    try {         
        //if($systemToken == $token){
      $Get_Barang_Edit = '';
            $db = getDB();            
            $sql = "SELECT * FROM barang WHERE id_barang=:id_barang";
            $stmt = $db->prepare($sql);
            $stmt->bindParam("id_barang", $id_barang, PDO::PARAM_STR);
            $stmt->execute();  
            $Get_Barang_Edit = $stmt->fetchAll(PDO::FETCH_OBJ);          
            $db = null;
            if($Get_Barang_Edit)
            echo '{"Get_Barang_Edit": ' . json_encode($Get_Barang_Edit) . '}';
            else
            echo '{"Get_Barang_Edit": ""}';
        //} else{
        //    echo '{"error":{"text":"No access"}}';
        //}       
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}';
    }
}

function Edit_Barang($request, $response){
    $data = $request->getParsedBody();
    $id_barang=$data['id_barang'];
    $nama_barang=$data['nama_barang'];
    $qty=$data['qty'];
    $harga=$data['harga'];
    //$login=$data['login'];
    //$token=$data['token'];   
    //$systemToken=apiToken($login);   
    try {         
        //if($systemToken == $token){
            $db = getDB();            
            $sql = "UPDATE barang SET nama_barang=:nama_barang, qty=:qty, harga=:harga WHERE id_barang=:id_barang";
            $stmt = $db->prepare($sql);
            $stmt->bindParam("id_barang", $id_barang, PDO::PARAM_STR);
            $stmt->bindParam("nama_barang", $nama_barang, PDO::PARAM_STR);
            $stmt->bindParam("qty", $qty, PDO::PARAM_STR);
            $stmt->bindParam("harga", $harga, PDO::PARAM_STR);
            $stmt->execute();        
            $db = null;
            if($stmt)
            echo '{"Edit_Barang": "Edit success"}';
            else
            echo '{"Edit_Barang": "Edit error"}';
        //} else{
        //    echo '{"error":{"text":"No access"}}';
        //}       
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}';
    }
}

function Delete_Barang($request, $response){
    $data = $request->getParsedBody();
    $id_barang=$data['id_barang'];
    //$login=$data['login'];
    //$token=$data['token'];   
    //$systemToken=apiToken($login);   
    try {         
        //if($systemToken == $token){
            $db = getDB();            
            $sql = "DELETE FROM barang WHERE id_barang=:id_barang";
            $stmt = $db->prepare($sql);
            $stmt->bindParam("id_barang", $id_barang, PDO::PARAM_STR);
            $stmt->execute(); 
            $db = null;
            if($stmt)
            echo '{"Delete_Barang": "Delete success"}';
            else
            echo '{"Delete_Barang": "Delete error"}';
        //} else{
        //    echo '{"error":{"text":"No access"}}';
        //}       
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}';
    }
}

5. Agar rest api bisa di akses, buat .htaccess
# Note: see https://httpd.apache.org/docs/current/howto/htaccess.html:
#
# "You should avoid using .htaccess files completely if you have access to
# httpd main server config file. Using .htaccess files slows down your Apache
# http server. Any directive that you can include in a .htaccess file is
# better set in a Directory block, as it will have the same effect with
# better performance."
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.php [QSA,L]

6. Pastikan file yang telah dibuat satu folder dengan library slim frameworknya. Struktur folder di htdocs nanti seperti ini
Membuat CRUD dengan Ionic PHP dan Mysql

Tutorial Membuat CRUD dengan Ionic PHP dan Mysql Part 1 sampai disini. Untuk selanjutnya pada part 2 kita akan melanjutkan cara menampilkan data dari mysql di aplikasi ionic.

Baca juga