Tutorial Ionic Framework 5 – Creating Simple Sidemenu Less 10m

Daftar Konten

• Buat Project Kosong Baru
• Generate Page
• Setup Routes
• Serve
• Kesimpulan

Buat Project Kosong Baru

Pertama tama, kita install Ionic versi terbaru terlebih dahulu, disini saya menggunakan ionic framework versi 5

npm install -g ionic@latest

Sekarang, kita buat project baru menggunakan ionic, menggunakan command sebagai berikut:

ionic start demo-sidemenu

untuk lebih jelasnya, bisa dilihat gambar dibawah ini:

Generate Page

masuk ke dalam direktori aplikasi.

D:\app\ionic>cd demo-sidemenu
D:\app\ionic\demo-sidemenu>

Buat halaman baru.

D:\app\ionic\demo-sidemenu>ionic g page login
> ng.cmd generate page login
CREATE src/app/login/login-routing.module.ts (343 bytes)
CREATE src/app/login/login.module.ts (465 bytes)
CREATE src/app/login/login.page.html (124 bytes)
CREATE src/app/login/login.page.spec.ts (640 bytes)
CREATE src/app/login/login.page.ts (252 bytes)
CREATE src/app/login/login.page.scss (0 bytes)
UPDATE src/app/app-routing.module.ts (625 bytes)
[OK] Generated page!

D:\app\ionic\demo-sidemenu>

Baca Juga :

• SIMPLE CREATING CRUD WITH IONIC 4
• CARA MENAMBAHKAN ADD RATE APPS DI IONIC 3

Serve

yuk, cek dulu penampilan dari aplikasi yang sedang kita buat dengan menggunakan command

ionic serve

Setup Routes

Sedikit mengintip bagian routes, kita bukan code di app-routing.module.ts, kita tambahkan object untuk menuju halaman login.

export class AppComponent implements OnInit {
  public selectedIndex = 0;
  public appPages = [
    {
      title: 'Login',
      url:'login',
      icon:'person'
    },
    ...............

hasilnya seperti ini:

sekarang, kita buat tombol untuk halaman menu login. Buka login.page.html

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title>login</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

hasilnya:

Kesimpulan

Untuk membuat sidemenu, sebenarnya ada 2 cara yang dapat kita lakukan. Cara sederhana yang dapat dilakukan adalah menggunakan template starter ionic. Baru kita ubah sesuai keinginan kita. Cara kedua, yaitu cara manual membuat sidemenu yang akan kita bahas pada postingan berikutnya. Tetap ikuti ya….

Yuk, ikuti youtube kami untuk tutorial dalam bentuk video, klik gambar dibawah