lifelong learner — urip iku urup, currently working on accenture.

ionic navigasi (pop,sidebar,navbar,toolbar) – part 2

1
Degananda.com -

1. pop (navigasi back)

Sebagaimana kita tahu bahwa navigasi pada ionic menggunakan sistem stack. Layaknya stack pada umumnya yang berasaskan LIFO (Last in first out) maka untuk membuat navigasi back atau menuju ke halaman sebelumnya yang diakses oleh user kita dapat menggunakan fungsi pop().  Halaman yang ditampilkan ke user oleh ionic adalah halaman yang berada pada paling bawah sendiri. Oleh karena itu untuk membuat navigasi ke halaman tertentu perintah yang digunakan berlawan dengan fungsi pop() yakni push. Contohnya dibawah ini kita akan membuat navigasi untuk kembali ke halaman sebelumnya pada page form-note

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

Fungsi tersebut akan kita sematkan pada sebuah tombol dengan menggunakan user input event berupa click. Maka pada view halaman form-note / form-note.html kode untuk buttonnya adalah :

<ion-content padding>

<button ion-button (click)="goBack()">back</button>
<p> 
  ini halaman form note
</p>

</ion-content>

Tetapi, sebenarnya kita tidak perlu membuat tombol untuk navigasi back karena ionic secara default telah menyediakan pada bagian header. ikon / tombol dengan logo panah kekiri akan muncul pada halaman yang bukan merupakan rootpage. Contohnya adalah halaman form-note ini bukan merupakan rootpage maka tombol back dengan logo panah ke kiri akan muncul pada header (pada bagian atas aplikasi).

sedangkan pada page  list-note yang merupakan rootPage tidak muncul tombol back yang terdapat logo panah kekiri. Sehingga , rootpage adalah suatu halaman awal / index dari aplikasi ionic. Navigasi pada browser dan aplikasi ionic sangat berbeda. Pada browser tetap dapat melakukan “back” meski pada halaman index asalkan ada history halaman sebelumnya(pada history browser).

2. Sidebar

Sidebar adalah menu yang dapat diakses ketika kita memencet tombol hamburger. Secara default ketika kita membuat aplikasi ionic dengan pilihan template sidebar maka menu hamburger ini akan otomatis terbentuk.  Pada ulasan ini akan membahas bagaimana cara mengkonfigurasi sidebar pada aplikasi ionic kita dengan catatan menggunakan template sidebar saat membuat project ionic. Perintah yang digunakan untuk membuat project ionic dengan sidemenu adalah

ionic start nama_project sidemenu

Lokasi dari sidemnu ini terletak di app.html. Anda dapat melihat custom syntax html dari ionic. Mulai dari <ion-menu> yang berfungsi untuk menendakan bahwa isi dari syntax html tersebut adalah sidemenu. <ion-header> ini akan kita bahas pada bagian 3(navbar) dan 4(toolbar) yang menendakan itu adalah header dari aplikasi. <ion-content> yang berfungsi sebagai container untuk daftar halaman yang dapat diakses melalaui sidemenu. dan <ion-list> adalah syntax child dari container <ion-content> yang akan membuat list di container tersebut.

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

Secara default menu akan dibuat dengan menggunakan logic (looping terhadap property di app.component.ts) namun kita juga dapat membuat menu secara manual(tanpa logic/looping) dengan cara seperti dibawah ini. Ingat bahwa menuClose harus tetap menjadi directive pada button yang kita buat karena setelah melakukan navigasi sidemenu harus ditutup.

    <ion-list>
      <button ion-item (click)="openTambahNote()" menuClose>
        Tambah Note
      </button>
    </ion-list>

kemudian tambahkan fungsi openTambahNote() untuk melakukan navigasi dengan fungsi Nav yang melakukan push pada halaman form-note (layaknya kita melakukan navigasi biasa namun kita menggunakan modul Nav bukan NavController karena kita berada di app.componen.ts yang mengatur menu sehingga berbeda perlakuan dengan navigasi pada halaman).

  openTambahNote(){
    this.nav.push(FormNotePage);
  }

Jika ingin menggunakan looping maka perhatikan kode di app.component.ts akan ada konfigurasinnya untuk menentukan nama menu dan lokasi navigasi / url. Perhatikan kode dibawah ini (tergenerate oleh ionic secara default).

    // used for an example of ngFor and navigation
    this.pages = [
      { 
        title: 'Home', 
        component: PageListnotePage 
      }
    ];

   openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }

anda dapat membuat list menu dengan menggunakan logic atau tanpa logic(manual) sesuaikan dengan kebutuhan dan preferensi anda.

3. Navbar

Navbar adalah sebuah toolbar yang memiliki fungsi spesifik untuk menghandle navigasi. Pada navbar akan secara otomatis mengenerate tombol back dengan logo panah ke kiri pada halaman-halaman yang bukan merupakan rootpage seperti yang telah kita bahas pada bagian 1 mengenai pop. Navbar harus diletakan didalam syntax <ion-header> karena navbar merupakan child dari ion-header. Selain itu pada navbar juga akan menampilkan nama dari halaman tersebut. Navbar tidak perlu kita buat secara manual karena secara otomatis ketika kita membuat page(bukan komponen) akan tergenerate navbarnya. Ingat pada ionic Komponen tidak memiliki navbar ataupun toolbar hanya halaman yang dapat memiliki keduannya.

  <ion-navbar primary>
    <ion-title>form-note</ion-title>
  </ion-navbar>

navbar yang secara otomatis tergenerate didalam syntax ion-header pada saat kita membuat halaman baru pada ionic.

4. Toolbar

Toolbar adalah sebuah bar yang melintang dari kiri ke kanan halaman dengan ukuran yang sama seperti navbar. Namun toolbar ini memiliki kegunaan yang dinamis(disesuikan dengan keinginan kita sebagai programmer). Contoh dari toolbar adalah navbar. Untuk membuat toolbar maka syntax yang digunakan adalah <ion-toolbar secondary> dan ahiri dengan sytax <ion-toolbar>. Mengapa secondary ? karena tentunnya toolbar primary adalah navbar. toolbar dan navbar sama-sama berada didalam ion-header namun yang paling utama adalah navbar. Contohnya adalah toolbar pada halaman form-note. Sebenarnya primary dan secondary ini hanya berbeda para warna. Namun secara aturan umumnya (patokan pada umumnya) primrary memang digunakan untuk navbar tetapi anda bebas menggunakan sesuai dengan selera.

  <ion-toolbar secondary>
      Toolbar saya.
  </ion-toolbar>