Program Studi Bisnis Digital • FEB UNDIP

Lab Pemrograman

Pertemuan 7 — Implementasi Navigasi Antarhalaman dan Routing dalam Aplikasi Mobile

Bagaimana pengguna berpindah dari satu layar ke layar lain dalam aplikasi mobile Anda — dan bagaimana data ikut berpindah bersamanya.

RPS minggu 7 · 2x50 menit

Selamat datang kembali, Anda semua, di pertemuan ketujuh Lab Pemrograman. Minggu lalu Anda sudah berhasil membuat halaman login dengan validasi dan pengamanan sederhana — artinya aplikasi Anda sekarang bisa mengenali penggunanya. Tapi setelah pengguna berhasil login, ke mana mereka pergi? Hari ini kita akan menjawab pertanyaan itu: bagaimana aplikasi mobile berpindah dari satu layar ke layar lain, misalnya dari halaman login ke halaman beranda, lalu ke halaman detail produk, persis seperti alur yang Anda alami saat membuka aplikasi Tokopedia atau Shopee. Kita akan belajar konsep navigasi dan routing di React Native, lengkap dengan cara mengirim data antar layar. Siapkan laptop dan project React Native Anda dari pertemuan sebelumnya, karena kita akan langsung praktik membangun alur berpindah halaman.

Tujuan Pembelajaran Hari Ini

Empat capaian yang harus Anda kuasai setelah pertemuan ini, sejalan dengan Sub-CPMK minggu 7.

Sub-CPMK 7.1

Menjelaskan konsep navigasi dan routing serta peran navigation stack dalam aplikasi mobile.

Sub-CPMK 7.2

Mempraktikkan pemasangan dan konfigurasi React Navigation beserta Stack Navigator.

Sub-CPMK 7.3

Menerapkan navigate(), goBack(), dan pengiriman params antar layar.

Sub-CPMK 7.4

Membedakan dan menyusun Tab Navigator, Drawer Navigator, dan navigator bersarang (nested).

Mengapa Ini Penting bagi Bisnis Digital?

Bayangkan Anda membangun aplikasi marketplace kecil untuk UMKM di Semarang. Pengguna perlu berpindah antar puluhan layar dengan mulus.

Masalah 1 — Alur tanpa arah. Tanpa sistem navigasi, Anda harus menampilkan-dan-menyembunyikan komponen secara manual untuk tiap layar — kode cepat berantakan dan sulit dirawat begitu aplikasi punya lebih dari 3 layar.

Masalah 2 — Data terputus. Saat pengguna men-tap produk "Kopi Robusta Muria" di daftar katalog, layar detail perlu tahu produk yang mana yang harus ditampilkan. Tanpa mekanisme kirim data antar layar, informasi ini hilang begitu berpindah halaman.

Coba Anda bayangkan skenario ini: Anda sedang membangun aplikasi marketplace sederhana untuk menampung produk UMKM di sekitar Undip, mirip versi kecil dari Tokopedia. Begitu aplikasi punya lebih dari tiga atau empat layar — beranda, katalog, detail produk, keranjang, profil — mengatur tampilan mana yang muncul secara manual akan sangat cepat menjadi kacau dan rawan bug. Masalah kedua yang lebih sering terlewat pemula: ketika pengguna men-tap salah satu produk di daftar katalog, layar detail produk harus tahu persis produk mana yang dipilih, lengkap dengan harga dan stoknya. Kalau Anda tidak punya cara resmi mengirim data itu bersama perpindahan layar, aplikasi Anda akan menampilkan detail yang salah atau kosong. Dua masalah inilah yang diselesaikan oleh sistem navigasi dan routing yang akan kita pelajari hari ini.

Bagian 1 dari 3

Konsep Navigasi & Stack Navigator

Bagaimana aplikasi mobile mengingat layar mana yang sedang dan pernah dibuka pengguna, lalu memasang navigator pertama Anda.

Apa Itu Navigasi dan Routing?

Navigasi adalah mekanisme aplikasi berpindah dari satu layar (screen) ke layar lain. Routing adalah aturan yang menentukan layar mana yang ditampilkan untuk suatu "rute" (route) tertentu.

Ketiganya berasal dari satu pustaka: React Navigation, standar navigasi paling umum dipakai di ekosistem React Native.

Memasang React Navigation ke Proyek Anda

Tiga langkah dasar sebelum navigasi bisa dipakai: pasang paket inti, pasang paket Stack Navigator, lalu bungkus aplikasi dengan NavigationContainer.

Langkah 1 — Pasang paket

npm install @react-navigation/native npm install @react-navigation/native-stack

Dijalankan sekali di terminal, di dalam folder proyek React Native Anda.

Langkah 2 — Bungkus App.js

import { NavigationContainer } from '@react-navigation/native'; export default function App() { return ( <NavigationContainer> {/* Navigator diletakkan di sini */} </NavigationContainer> ); }

Langkah pertama sangat mekanis: buka terminal di dalam folder proyek React Native Anda, lalu pasang dua paket — paket inti bernama react-navigation/native, dan paket native-stack yang menyediakan komponen Stack Navigator. Ini sama seperti langkah instalasi paket lain yang sudah Anda lakukan di pertemuan-pertemuan sebelumnya. Langkah kedua sedikit berbeda: seluruh aplikasi Anda perlu dibungkus dengan komponen bernama NavigationContainer, yang bertindak sebagai "pengelola" tunggal yang mengetahui seluruh riwayat navigasi aplikasi Anda. Anggap NavigationContainer ini seperti gedung yang menaungi seluruh lantai aplikasi Anda; tanpa gedung ini, komponen navigasi apa pun yang Anda pasang di dalamnya tidak akan berfungsi. Perhatikan komentar di dalam kode: navigator sesungguhnya, seperti Stack Navigator, akan kita letakkan di dalam pembungkus ini pada slide berikutnya.

Stack Navigator: Menumpuk dan Menurunkan Layar

Setiap kali Anda memanggil navigate(), layar baru "ditumpuk" (push) di atas layar sebelumnya. Tombol kembali "menurunkan" (pop) layar teratas.

import { createNativeStackNavigator } from '@react-navigation/native-stack'; const Stack = createNativeStackNavigator(); <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Katalog" component={KatalogScreen} /> </Stack.Navigator>

Hitung dari Nol: Ukuran Navigation Stack

Pengguna membuka aplikasi Toko Anira, lalu tap tiga kali berturut-turut: Katalog → Detail Produk → Checkout. Setiap navigate() menambah 1 layar ke stack.

Langkah	Perhitungan	Ukuran Stack
Aplikasi dibuka, layar awal Home dimuat	stack = 0 + 1 (push Home)	1 layar
Tap produk → navigate('Katalog')	stack = 1 + 1 (push Katalog)	2 layar
Tap item → navigate('DetailProduk')	stack = 2 + 1 (push DetailProduk)	3 layar
Tap "Beli" → navigate('Checkout')	stack = 3 + 1 (push Checkout)	4 layar

SETELAH TEKAN TOMBOL KEMBALI

3 layar

4 − 1 (pop Checkout)

Stack tersisa: Home, Katalog, DetailProduk — pengguna kembali persis ke Detail Produk yang tadi dilihat, bukan ke Home.

Sekarang mari kita hitung bersama, langkah demi langkah, persis seperti yang terjadi di dalam memori aplikasi. Saat pengguna pertama kali membuka Toko Anira, layar Home dimuat sebagai satu-satunya layar di stack, jadi ukurannya satu. Begitu pengguna men-tap sebuah produk dan kode memanggil navigate ke Katalog, stack bertambah menjadi dua layar. Proses ini berulang setiap kali navigate dipanggil: tap item menambah layar Detail Produk menjadi tiga, dan tap tombol Beli menambah layar Checkout menjadi empat. Perhatikan kotak hijau di kanan: begitu pengguna menekan tombol kembali di perangkatnya, React Navigation otomatis melakukan pop pada layar teratas, yaitu Checkout, sehingga stack kembali menjadi tiga layar, dan pengguna melihat lagi Detail Produk — bukan kembali ke Home. Inilah keunggulan utama Stack Navigator dibanding sekadar mengganti tampilan secara manual.

Coba Sendiri: Simulasikan Push dan Pop Navigation Stack

Tekan tombol navigasi untuk push layar baru dan tombol kembali untuk pop, lalu amati susunan stack berubah.

Bagian 2 dari 3

Mengirim Data Antar Layar (Params)

Bagaimana informasi seperti ID produk ikut berpindah bersama pengguna, dari daftar katalog sampai ke layar detail.

Mengirim Data: navigate() dengan Params

Fungsi navigation.navigate() menerima argumen kedua berupa objek params — data apa pun yang ingin Anda kirim ke layar tujuan.

Di layar Katalog — kirim data produk

function KatalogScreen({ navigation }) { return ( <Button title="Kopi Robusta Muria" onPress={() => navigation.navigate('DetailProduk', { idProduk: 305, nama: 'Kopi Robusta Muria', harga: 28000 })} /> ); }

Objek { idProduk, nama, harga } ini akan "menempel" pada layar DetailProduk saat dibuka.

Membaca Data: route.params di Layar Tujuan

Setiap komponen layar otomatis menerima prop route dari React Navigation. Data yang dikirim tadi tersimpan di route.params.

Di layar DetailProduk — baca data yang dikirim

function DetailProdukScreen({ route }) { const { idProduk, nama, harga } = route.params; return ( <View> <Text>{nama}</Text> <Text>Rp{harga}</Text> <Text>ID: {idProduk}</Text> </View> ); }

Params bersifat khusus per-layar — setiap kali Anda navigate ke DetailProduk dengan produk berbeda, route.params ikut berubah sesuai data terbaru.

Sekarang giliran layar tujuan membuka nota kecil yang dikirimkan tadi. Setiap komponen layar yang didaftarkan lewat Stack.Screen otomatis menerima sebuah prop bernama route dari React Navigation, dan di dalam route inilah tersimpan objek params yang tadi Anda kirim lewat navigate. Dengan teknik destructuring seperti pada baris kedua kode ini, Anda bisa langsung mengambil idProduk, nama, dan harga, lalu menampilkannya di layar. Perhatikan callout hijau di bawah: karena params dikirim ulang setiap kali navigate dipanggil, layar DetailProduk yang sama bisa menampilkan produk yang berbeda-beda tergantung produk mana yang tadi di-tap pengguna di Katalog — inilah yang membuat satu komponen layar bisa dipakai berulang untuk ratusan produk berbeda, tanpa Anda perlu menulis layar terpisah untuk tiap produk.

Hitung dari Nol: Kedalaman Rute dari Deep Link

Aplikasi Toko Anira menerima tautan luar (deep link): tokoanira://kategori/12/produk/305. Setiap segmen menambah satu tingkat kedalaman rute.

Langkah	Perhitungan	Kedalaman
Segmen 1: `kategori`	depth = 0 + 1	1
Segmen 2 (param): `12`	depth = 1 + 1	2
Segmen 3: `produk`	depth = 2 + 1	3
Segmen 4 (param): `305`	depth = 3 + 1	4

HASIL PARSING route.params

4 tingkat

2 rute bersarang, 2 nilai param

{ kategoriId: 12, produkId: 305 }

Mari hitung lagi, kali ini dengan kasus yang sedikit berbeda: tautan luar atau deep link, misalnya saat pengguna mengetuk tautan produk Toko Anira yang dibagikan lewat WhatsApp. Tautan ini punya empat segmen yang dipisah garis miring, dan setiap segmen menambah satu tingkat kedalaman rute mulai dari nol. Segmen pertama, kategori, membawa kita ke kedalaman satu. Segmen kedua adalah nilai parameter, angka 12, yang menambah kedalaman menjadi dua. Begitu seterusnya untuk kata produk dan nilai 305, sampai total kedalaman mencapai empat tingkat. Hasil akhirnya, seperti terlihat di kotak hijau, React Navigation akan mem-parsing tautan ini menjadi objek params berisi kategoriId 12 dan produkId 305, lalu langsung membuka layar DetailProduk dengan data yang sudah lengkap — persis seperti pengguna men-tap produk itu secara manual dari dalam aplikasi.

Kapan Memakai Tab vs Drawer Navigator?

Berbeda dengan Stack, Tab dan Drawer Navigator tidak menumpuk layar — keduanya menampilkan beberapa layar "utama" yang sejajar.

Aspek	Tab Navigator	Drawer Navigator
Posisi menu	Bawah layar (bottom tab)	Geser dari tepi samping
Jumlah item ideal	3–5 item (selalu terlihat)	5–10 item (tersembunyi)
Contoh nyata	Beranda, Katalog, Keranjang, Profil	Pengaturan, Bantuan, Tentang, Keluar
Cocok untuk	Fitur utama yang sering diakses	Fitur sekunder, jarang diakses

Tabel ini merangkum perbedaan praktis antara dua pola navigasi yang sering membingungkan mahasiswa baru. Tab Navigator menaruh menunya secara permanen di bagian bawah layar, selalu terlihat, sehingga paling cocok untuk empat atau lima fitur inti yang paling sering diakses pengguna, misalnya beranda, katalog, keranjang, dan profil di aplikasi marketplace Anda. Drawer Navigator berbeda: menunya tersembunyi dan baru muncul saat pengguna menggeser dari tepi layar atau menekan ikon menu, sehingga lebih cocok menampung banyak pilihan yang jarang dibutuhkan, seperti pengaturan akun, bantuan, atau tombol keluar. Sebagai aturan praktis untuk proyek akhir Anda nanti, letakkan fitur yang paling sering dipakai pengguna di Tab, dan sisanya di Drawer — jangan sampai kedua jenis navigasi ini malah membuat pengguna bingung karena terlalu banyak menu yang bersaing.

Bagian 3 dari 3

Navigator Bersarang & Praktik

Menggabungkan Stack, Tab, dan Drawer dalam satu aplikasi — struktur yang dipakai hampir semua aplikasi bisnis digital nyata.

Navigator Bersarang: Stack di Dalam Tab

Pola paling umum di aplikasi nyata: setiap tab menyimpan Stack Navigator-nya sendiri, sehingga bisa berpindah layar internal tanpa kehilangan menu tab.

Menu tab tetap terlihat, sementara di dalam tab "Katalog" pengguna bisa push-pop layar seperti biasa.

Perhatikan diagram ini, karena pola inilah yang akan Anda pakai di hampir seluruh proyek akhir semester nanti. Di lapisan paling luar, ada satu Tab Navigator yang menampilkan empat menu utama, selalu terlihat di bagian bawah layar. Tapi begitu pengguna masuk ke tab Katalog, di dalamnya tersembunyi Stack Navigator sendiri, yang memungkinkan pengguna berpindah dari daftar katalog ke detail produk lalu ke checkout, persis seperti yang kita pelajari di bagian pertama tadi — sementara menu tab di bawah tetap terlihat dan tidak ikut hilang. Begitu juga di tab Profil, ada Stack Navigator terpisah untuk berpindah dari data akun ke halaman ubah password. Teknik meletakkan satu navigator di dalam navigator lain inilah yang disebut navigator bersarang, dan hampir semua aplikasi bisnis digital besar di Indonesia memakai pola serupa.

Konfigurasi Opsi Rute Dasar

Tiap Stack.Screen bisa diberi properti options untuk mengatur judul header, dan initialRouteName menentukan layar pembuka Navigator.

<Stack.Navigator initialRouteName="Home"> <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Toko Anira' }} /> <Stack.Screen name="DetailProduk" component={DetailProdukScreen} options={({ route }) => ({ title: route.params.nama })} /> </Stack.Navigator>

Perhatikan baris terakhir: judul header DetailProduk otomatis berubah sesuai route.params.nama — misalnya menjadi "Kopi Robusta Muria" saat produk itu dibuka.

Studi Kasus: Alur Navigasi Toko Anira

Merangkum semua konsep hari ini menjadi satu alur nyata: dari login sampai konfirmasi pembelian.

Setelah Login berhasil, layar Login diganti (bukan di-push) memakai navigation.replace('Beranda') — supaya tombol kembali tidak membawa pengguna ke Login lagi.

Mari kita telusuri satu alur navigasi lengkap yang menggabungkan semua konsep hari ini. Pengguna mulai dari layar Login yang kita bangun minggu lalu, lalu setelah berhasil masuk ke layar Beranda yang berada di dalam Tab Navigator. Dari Beranda, pengguna men-tap produk dan berpindah ke Detail Produk membawa params berisi idProduk, persis seperti yang kita hitung tadi. Dari sana pengguna lanjut ke Checkout membawa data keranjang belanja, sampai akhirnya tiba di layar Konfirmasi. Perhatikan callout di bawah diagram: ada satu fungsi baru bernama replace, bukan navigate biasa, yang dipakai khusus saat berpindah dari Login ke Beranda. Bedanya, replace mengganti layar Login di stack, bukan menumpuknya, sehingga kalau pengguna menekan tombol kembali dari Beranda, mereka tidak akan terlempar balik ke layar Login yang sudah tidak relevan lagi.

Kesalahan Umum yang Perlu Anda Hindari

1. Lupa daftarkan layar di Navigator. Memanggil navigate('DetailProduk') padahal Stack.Screen name="DetailProduk" belum ditulis — aplikasi akan error "screen not found".

2. Salah baca params karena typo nama key. Mengirim { idProduk: 305 } tapi membaca route.params.id_produk — hasilnya undefined, bukan error yang jelas.

3. Memakai navigate() padahal butuh replace(). Alur Login → Beranda memakai navigate biasa membuat tombol kembali membawa pengguna ke Login lagi, membingungkan pengguna.

Kebiasaan baik: beri nama layar dan key params secara konsisten (misalnya selalu camelCase), lalu uji tombol kembali di setiap alur baru yang Anda buat.

Sebelum kita masuk ke latihan, saya ingin Anda mengenali tiga kesalahan yang paling sering dilakukan mahasiswa saat pertama kali belajar navigasi. Pertama, lupa mendaftarkan sebuah layar sebagai Stack.Screen sebelum memanggilnya lewat navigate — aplikasi akan langsung error dengan pesan layar tidak ditemukan. Kedua, kesalahan penulisan nama key antara saat mengirim dan saat membaca params, misalnya idProduk versus id_produk; ini berbahaya karena tidak selalu memunculkan error yang jelas, hanya nilai kosong atau undefined yang membingungkan untuk di-debug. Ketiga, memakai navigate biasa padahal seharusnya replace, khususnya pada alur setelah login, sehingga pengguna bisa "tersasar" kembali ke layar login yang seharusnya sudah dilewati. Kebiasaan baik yang saya sarankan: selalu konsisten dalam penamaan, dan biasakan menguji tombol kembali setiap kali Anda menambahkan alur navigasi baru ke aplikasi Anda.

Latihan Kelas: Alur Navigasi Marketplace Mini

Kerjakan berpasangan (15 menit) di dalam proyek React Native Anda, lalu satu pasangan akan diminta mendemonstrasikan hasilnya.

Instruksi

Pasang @react-navigation/native dan native-stack, bungkus App.js dengan NavigationContainer
Buat 3 layar: Beranda, DetailProduk, Checkout, daftarkan sebagai Stack.Screen
Dari Beranda, kirim minimal 2 params (nama & harga produk) ke DetailProduk memakai navigate()
Tampilkan params tersebut memakai route.params di layar DetailProduk

Tantangan tambahan (opsional): Atur judul header layar DetailProduk agar otomatis menampilkan route.params.nama, seperti pada Slide 16 tadi.

Ringkasan & Pertemuan Berikutnya

Yang Sudah Anda Kuasai

Konsep navigation stack: push saat navigate, pop saat kembali
Memasang React Navigation dan membangun Stack Navigator
Mengirim & membaca data antar layar lewat params dan route.params
Navigator bersarang: Stack di dalam Tab, serta beda Tab vs Drawer

Pertemuan 8 — Perancangan dan Pengujian REST API. Setelah pengguna bisa berpindah antar layar dengan data yang tepat, minggu depan kita belajar bagaimana data itu diambil dari server lewat REST API, menggantikan data contoh yang selama ini kita tulis manual di dalam kode.

Mari kita rangkum perjalanan kita hari ini. Anda sekarang memahami konsep navigation stack sebagai fondasi di balik semua perpindahan layar, sudah berhasil memasang React Navigation dan membangun Stack Navigator pertama Anda, serta mampu mengirim dan membaca data antar layar lewat params dan route.params — keterampilan yang akan terus Anda pakai di hampir seluruh sisa proyek akhir semester. Anda juga sudah mengenal pola navigator bersarang, menggabungkan Tab dan Stack dalam satu aplikasi, persis seperti aplikasi marketplace nyata. Minggu depan, di pertemuan kedelapan, kita akan melangkah ke sisi lain aplikasi Anda: bagaimana merancang dan menguji REST API, sehingga data produk yang selama ini kita tulis manual di dalam kode bisa diganti dengan data sungguhan dari server. Pastikan latihan hari ini sudah berjalan dengan baik di proyek Anda, karena kita akan membangun langsung di atasnya minggu depan.