lifelong learner ā€” urip iku urup, currently working on accenture.

ionic navigasi – parameter, tabs, tabs parameter part 3

0
Degananda.com -

Pada ulasan ketiga mengenai navigasi secara garis besar akan membahas bagaimana memberikan parameter pada saat melakukan navigasi di ionic. Tentunnya parameter ini menjadi hal yang sangat penting saat kita mendevelop aplikasi terutama terkait dengan pertukaran data. Contohnya ketika kita hendak mengedit sebuah data , form akan membutuhkan id / primary key dari data tersebut. Id tersebut digunakan untuk mengambil data spesifik serta melakukan update ke database.

Namun fungsi parameter di navigasi/routing tidak hanya dibagian pertukaran data. Pada aplikasi website parameter juga dapat digunakan sebagai tempat untuk menyimpan token autentikasi. Jika token tidak sesuai maka session habis. Namun, pada aplikasi mobile (ionic) penggunaan parameter lebih digunakan untuk pertukaran data. Parameter tidak hanya terdapat pada url namun kita juga dapat memberikan data berupa object saat pergantian halaman melalui mekanisme navigasi. Kita dapat memanfaatkan mekanisme ini untuk menuliskan breadcumb (lokasi path aplikasi saat ini).

Sebelum anda membaca part ketiga ini alangkah baiknya mengikuti bagian kedua agar tidak bingung ketika mengikuti part tiga. Link untuk part kedua mengenai navigasi pada ionic ada dibawah ini.

1. Parameter

yang dimaksut dengan parameter(dalam kasus ionic) adalah nilai dapat berupa integer ataupun string yang terdapat pada url. Contoh parameter terdapat pada gambar dibawah ini.

sesungguhnya pada router di wordpress(degananda.com) ini terdapat satu parameter yang digunakan untuk mengambil id dari post yakni judul dari post atau terminologi dalam istilah wordpress adalah permalink. Demikian pula pada ionic. Kita tahu bahwa ionic adalah framework hybrid yang berjalan menggunakan cordova dan ditulis dengan menggunakan angular+typescript. dibalik itu semua , ionic menggunakan url untuk melakukan navigasi sehingga antara ionic dan website hampir memiliki karakteristik navigasi yang sama. Pada intinnya keduannya memiliki url dan parameter(url).

pada ionic kita dapat memberikan parameter saat kita melakukan fungsi push(). Parameter yang kita berikan berupa object (javascript object). Berikut ini adalah kode untuk memberikan parameter saat melakukan navigasi pada ionic.

  navTambahPage(){
    let contohParameter = {
      id_note : '1',
      judul_note :'matematika hari ini'
    }
    this.navCtrl.push(FormNotePage, contohParameter);
  }

Kode diatas merupakan navigasi yang mengarahkan user dari halaman listnote menuju ke halaman form-note. Parameter yang kita berikan berupa id dari note. Mengapa id? karena dalam contoh ini id tersebut nantinya akan digunakan untuk mengubah isi dari note tersebut(update data) dan parameter kedua adalah judul dari note (hanya untuk pemanis).

1.1 Mengambil nilai parameter

setelah memberikan parameter maka kita perlu mengambi nilai parameter tersebut pada tujuan dari navigasi(halaman). Untuk itu kita harus memanggil modul navParams dari package ionic-angular. Jangan lupa untuk melakukan dependency injection dengan property private pada modul navParams. Contoh kode untuk mengambil nilai parameter adalah :

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

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

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    // menampilkan navParams data
    console.log(navParams.data);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad FormNotePage');
  }

  goBack(){
    this.navCtrl.pop();
  }

}

Pada constructor saat komponen page dibuat kita akan tampilkan isi dari parameter tersebut dengan memanggil variabel navParams.data (sesuai dengan nama variabel yang digunakan pada depedency injection). Maka pada console akan muncul sebagai berikut ini.

Selain itu, kita juga dapat menampilkan nilai dari parameter tersebut pada view/dom dengan menggunakan expression / double bracket. Contohnya adalah kita akan menampilkan parameter “judul_note” dan “id_note”. tuliskan kode dibawah ini pada view dari page. nilai dari parameter terletak pada object navparams.data baru kemudian dapat secara langsung kita akses nama variabel object yang kita berikan kepada parameternya (id_note dan judul_note).

<!-- menampilkan nilai dari parameter -->
  id : {{navParams.data.id_note}} 
  judul : {{navParams.data.judul_note}}
<!-- end menampilkan nilai dari parameter -->

2. Tabs

pada ulasan mengenai navigasi sebelumnya kita telah mengenal elemen sidemenu dimana menu akan muncul melalui hamburger menu (ikon pada navbar yang bergambar garis lurus berjejer secara vertikal). Selain sidemenu ionic juga memiliki cara penampilkan menu yang bernama “tabs”. Dengan menggunakan tabs maka menu dapat ditampilkan dibawah aplikasi. Menu tersebut akan berjejer secara horizontal membentuk seperti tabel satu baris dan beberapa kolom (tergantung dari jumlah itemnya). Berikut adalah contoh gambar dari menu yang ditampilkan dalam bentuk tab

Sebelum kita membuat tab harus kita ubah beberapa navigasi dan konsep dari aplikasi catatan / pengelola note ini. Tampak ahir dari UI tab yang akan kita buat adalah sebagai berikut ini

sehingga kita perlu melakukan pembuatan dua buah page/halaman baru serta melakukan perubahan lokasi navigasi. Awalnya navigasi dari listnote akan menuju ke form. Namun karena kita ingin menampilkan dua tab maka navigasi akan kita arahkan ke halaman kosong yang diberi nama “page-note”. Pada page note ini akan terdapat dua buah halaman yang ditampilkan yaitu form-note untuk nantinnya menampilkan form dan page-detail untuk menampilkan dari detail note(sesuai dengan parameter) nantinnya. Maka buatlah dua buah halaman baru dengan perintah dibawah ini (jangan lupa untuk melakukan register halaman baru pada metadata declaration dan entryComponent di @ngModule.

ionic generate page page-details
ionic generate page page-note

Kemudian lakukan perubahan navigasi yang ada difungsi navTambahPage() yang sebelumnya mengarahkan ke halaman form-note sekarang kita arahkan pada halaman page-details yang baru saja kita buat. Page-details ini akan menjadi container dari tab.

  navTambahPage(){
    let contohParameter = {
      id_note : '1',
      judul_note :'matematika hari ini'
    }
    this.navCtrl.push(PageNotePage, contohParameter);
  }

setelah itu kita akan ubah isi dari page-details untuk menampilkan sebuah heading 1 yang bertuliskan “detail note” (hanya untuk penanda saja , akan digunakan pada ulasan-ulasan selanjutnya).

<ion-content padding>
  

<h1> detail note </h1>


</ion-content>

untuk dapat menampilkan tab pada ionic kita perlu melakukan beberapa langkah. Berikut adalah langkah-langkah untuk membuat tab pada ionic dengan asumsi kita memulai membuat aplikasi ionic dengan template sidemenu. Ketiga langkah ini kita lakukan pada page-note.ts yang bertindak sebagai container tab.

1. Mengimport halaman tujuan ketika tab menu dipilih

lakukan import halaman-halaman yang ingin dijadikan konten tab. Pada kasus ini akan terdapat dua tab yakni :

  1. form-note. berfungsi untuk nantinya menampilkan form untuk mengubah note.
  2. page-details. berfungsi nantinnya untuk menampilkan detail note.

berikut adalah kode untuk melakukan import (seperti melakukan import page sebelumnya).

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

// import page untuk tabs , kita akan arahkan tab kembali ke page-details.
import { PageDetailsPage  } from './../page-details/page-details';
import { FormNotePage  } from './../form-note/form-note';


@IonicPage()
@Component({
  selector: 'page-page-note',
  templateUrl: 'page-note.html',
})
export class PageNotePage {

  pageDetailsTab = PageDetailsPage;
  formNoteTab = FormNotePage;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad PageNotePage');
  }

}

Selain itu pada kode diatas kita juga telah melakukan DI terhadap navParams. Sehingga kita dapat gunakan parameter yang kita dapatkan dari page-listnote di page-note yang kemudian akan kita teruskan ke form-note melalui tab parameter.

2. Menambahkan beberapa directive dan syntax custom html untuk membuat tab

untuk membuat tab syntax html yang digunakan adalah <ion-tabs> sebagai container dan <ion-tab> sebagai tab itemnya. diperlukan tiga directive wajib yang ada pada syntax <ion-tab> yakni :

  1. tabTitle , nama dari tab yang harus unik dan antar tab tidak boleh sama.
  2. root , lokasi halaman / page yang akan ditampilkan pada tab tersebut (yang dipanggil adalah property yang ada pada class bukan nama modul export).
  3. tabIcon , icon dari tab. lihat disini untuk melihat daftar ikon yang ada pada ionic : https://ionicframework.com/docs/ionicons/

maka berikut ini adalah kode untuk menampilkan tab berdasarkan kondisi-kondisi diatas (poin 1 dan poin 2 ini).

<ion-header>

  <ion-navbar>
    <ion-title>page-note</ion-title>
  </ion-navbar>

</ion-header>

<ion-tabs>
  <ion-tab tabTitle="formnote" [root]="formNoteTab" tabIcon="water"></ion-tab>
  <ion-tab tabTitle="details" [root]="pageDetailsTab" tabIcon="water"></ion-tab>
</ion-tabs>

3. Tabs parameter

Sama halnya dengan navigasi yang memiliki parameter , menu yang diakses dengan menggunakan tab juga dapat memiliki parameter. karena sejatinnya tab juga merupakan sebuah mekanisme navigasi. Namun perbedaanya, kita akan melakukan inject parameter menggunakan directive. Jika pada menu navigasi kita menginject parameter melalui fungsi push pada navCtrl atau nav. Berikut ini adalah kode untuk memberikan parameter pada menu tabs kita.

  <ion-tab tabTitle="formnote" [root]="formNoteTab" [rootParams]="navParams.data" tabIcon="water"></ion-tab>
  <ion-tab tabTitle="details" [root]="pageDetailsTab" tabIcon="water"></ion-tab>

directive yang akan digunakan pada custom syntax html <ion-tab> adalah rootParams. Kita dapat isikan expression dari rootparams dengan menggunakan class property / variabel pada class.

3.1 Mengambil nilai parameter

Sama seperti cara pengambilan nilai parameter dengan menggunakan navCtrl/nav push kita hanya perlu mengimport modul navParams dari package ionic-angular. Kemudian kita lakukan dependency injection(DI) pada modul navparams dengan property private(gunakan public jika melakukan DI untuk shared service). Maka kita dapat mengakses nilai dari parameter tersebut melalui variabel DInya. parameter akan diambil melalui form-note.ts. Perbedaan dengan ulasan mengenai pengambilan parameter dari navigasi yang kita bahas pada bagian 1 adalah sumber parameter kita kali ini berasal dari page-note. Pada bagian 1 sumber parameter adalah form-listnote. Sehingga cara pengambilan parameter adalah sama saja hanya berbeda sumber asal dari parameter tersebut.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

// import page untuk tabs , kita akan arahkan tab kembali ke page-details.
import { PageDetailsPage  } from './../page-details/page-details';

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

  pageDetailsTab = PageDetailsPage;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    // menampilkan navParams data
    console.log(navParams.data);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad FormNotePage');
  }

  goBack(){
    this.navCtrl.pop();
  }

}

Mungkin sedikit membingungkan ulasan ini karena penjelasan hanya berupa text semoga kedepan akan dibuat tutorial dari awal mengenai ionic dengan mengangkat kasus tertentu seperti angular startpack yang membuat aplikasi pengelolaan note dan disertai dengan repository pada github atau bahkan video tutorial yang diupload diyoutube.