Setiap aplikasi yang baik memiliki struktur yang jelas, dan fondasi dari struktur tersebut adalah Header dan Footer. Header berfungsi sebagai “kepala” halaman yang biasanya berisi judul dan tombol navigasi, sementara footer adalah “kaki” halaman yang sering digunakan untuk menampilkan informasi ringkasan atau tombol aksi utama.

Dalam tutorial ini, kita akan mempelajari cara membuat dan memanipulasi komponen ion-header dan ion-footer di Ionic untuk memberikan aplikasi Anda tata letak yang profesional dan intuitif. 📱

Struktur Dasar Halaman Ionic

Sebelum melangkah lebih jauh, penting untuk memahami bahwa halaman Ionic umumnya terdiri dari tiga bagian utama yang bekerja sama:

1. ion-header: Area paling atas layar.
2. ion-content: Area tengah yang bisa di-scroll, tempat konten utama Anda berada.
3. ion-footer: Area paling bawah layar yang posisinya tetap.

Ketiga komponen ini membungkus semua konten di dalam sebuah halaman, misalnya di src/app/tab1/tab1.page.html.

1. Membuat Header (ion-header)

Header adalah tempat pertama yang dilihat pengguna. Ia harus informatif dan mudah digunakan.

Header Paling Sederhana

Struktur dasar sebuah header terdiri dari ion-header yang membungkus ion-toolbar, dan di dalamnya terdapat ion-title.

• ion-toolbar: Sebuah baris generik yang bisa berisi judul, tombol, atau search bar.
• ion-title: Komponen khusus untuk menampilkan judul halaman.

Buka salah satu file halaman Anda (misalnya tab1.page.html) dan coba kode berikut:

<ion-header>
  <ion-toolbar>
    <ion-title>Beranda</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <p>Konten utama halaman Anda ada di sini.</p>
</ion-content>

Menambahkan Tombol pada Header

Tentu saja, header tanpa tombol terasa kurang lengkap. Untuk menambahkan tombol, kita menggunakan komponen ion-buttons dan ion-button. Kunci utama untuk penempatan tombol adalah properti slot.

• slot="start": Menempatkan tombol di sisi kiri.
• slot="end": Menempatkan tombol di sisi kanan.

Mari kita tambahkan tombol menu di kiri dan tombol keranjang di kanan.

<ion-header>
  <ion-toolbar color="primary">  <ion-buttons slot="start">
      <ion-button>
        <ion-icon slot="icon-only" name="menu-outline"></ion-icon>
      </ion-button>
    </ion-buttons>

    <ion-title>Toko Online</ion-title>

    <ion-buttons slot="end">
      <ion-button>
        <ion-icon slot="icon-only" name="cart-outline"></ion-icon>
      </ion-button>
    </ion-buttons>

  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <p>Selamat datang di Toko Online kami!</p>
</ion-content>

Tips: Anda bisa menggunakan atribut color pada ion-toolbar untuk mengubah warnanya sesuai dengan tema yang didefinisikan di src/theme/variables.scss (misalnya, primary, secondary, danger, dll).

2. Membuat Footer (ion-footer)

Footer sangat berguna untuk menampilkan aksi persisten yang tidak hilang saat pengguna menggulir konten. Contohnya adalah tombol “Checkout” di halaman keranjang belanja atau tombol “Post” di aplikasi media sosial.

Strukturnya sangat mirip dengan header.

Contoh Footer Sederhana

Mari kita buat footer yang menampilkan ringkasan total belanja dan tombol untuk checkout.

<ion-footer>
  <ion-toolbar>
    <ion-title size="small">Total: Rp 150.000</ion-title>
    <ion-buttons slot="end">
      <ion-button color="success">
        Checkout
        <ion-icon slot="end" name="arrow-forward-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

Pada contoh di atas:

• Kita menggunakan ion-title dengan size="small" agar teks total tidak terlalu besar.
• Tombol “Checkout” ditempatkan di kanan (slot="end") untuk visibilitas maksimal.

Kesimpulan

Anda sekarang telah menguasai cara membangun struktur visual paling fundamental dalam aplikasi Ionic. Dengan ion-header dan ion-footer, Anda dapat membuat tata letak yang bersih, fungsional, dan mudah dinavigasi oleh pengguna.

Poin Kunci untuk Diingat:

• ✅ Gunakan ion-header, ion-content, dan ion-footer sebagai kerangka utama halaman.
• ✅ ion-toolbar adalah wadah untuk judul dan tombol di dalam header/footer.
• ✅ Gunakan ion-buttons dengan properti slot="start" atau slot="end" untuk mengatur posisi tombol.
• ✅ Manfaatkan ion-icon untuk memberikan ikon visual yang jelas pada tombol Anda.

Di tutorial selanjutnya, kita akan membahas cara kerja sistem layout dan grid di Ionic untuk mengatur konten Anda menjadi lebih rapi dan responsif. Selamat mencoba!