TUTORIAL IONIC : Pindah Page/Move Page (PART 4)
Assalamu'alaikum Wr Wb
Hallo, di bagian part 4 ini saya akan menjelaskan cara pindah/move page di ionic framework versi 4+, masih menggunakan project yang kita bikin dari part 1, yang belum membuat project ionic bisa ikut tutorial dari part 1, melanjutkan dari tutorial sebelumnya kita masih menggunakan page home dan page login untuk membuat fungsi move/pindah page.
Perhatikan langkah-langkah berikut :
1. buka file login.page.ts di folder myApp\src\app\login edit semua menjadi seperti ini.
Saya jelaskan sedikit code cara move/pindah page di atas, pertama teman-teman import dulu plugin Navcontroller (lihat line 2), setelah di import atau di panggil lalu di inisialisasi di bagian constructor (lihat line 12), lalu sesudah di inisialisasi plugin Navcontroller bisa digunakan, tapi ketika pemanggilan panggil nama variablenya saja (lihat line 19). Bisa dilihat pada line 19 di bagian this.navCtrl.navigateRoot('home'); fungsi untuk pindah pagenya itu ada pada navigateRoot yang artinya pindah page dan menjadikan page home sebagai root.
2. buka file login.page.html di folder myApp\src\app\login edit bagian tag <ion-button> menjadi seperti ini.
Agar fungsi pindah page di login.page.ts dapat berfungsi kita harus menambahkan fungsi klik pada tombol login seperti code di atas. Hasilnya bisa teman-teman tes sendiri, ketika tombol login di klik page akan pindah dari page login ke page home. Sebenarnya cara pindah page di ionic ada banyak cara, tapi di sini saya akan share cara pindah page dengan menggunakan plugin navcontroller saja, di antaranya:
- this.navCtrl.navigateRoot('home'); => pindah page sekaligus menjadikan page tujuan sebagai root
- this.navCtrl.navigateForward('/home'); => pindah page tapi tidak menjadikan page tujuan sebagai root
- this.navCtrl.navigateBack('/home'); => pindah page ke page sebelumnya (di sarankan)
- this.navCtrl.back(); => pindah page ke page sebelumnya (tidak di sarankan)
lebih lengkapnya teman-teman bisa baca artikel ini.
Sekian tutorial dari saya, semoga bermanfa'at :)
Wassalamu'alaikum Wr Wb
Hallo, di bagian part 4 ini saya akan menjelaskan cara pindah/move page di ionic framework versi 4+, masih menggunakan project yang kita bikin dari part 1, yang belum membuat project ionic bisa ikut tutorial dari part 1, melanjutkan dari tutorial sebelumnya kita masih menggunakan page home dan page login untuk membuat fungsi move/pindah page.
Perhatikan langkah-langkah berikut :
1. buka file login.page.ts di folder myApp\src\app\login edit semua menjadi seperti ini.
Saya jelaskan sedikit code cara move/pindah page di atas, pertama teman-teman import dulu plugin Navcontroller (lihat line 2), setelah di import atau di panggil lalu di inisialisasi di bagian constructor (lihat line 12), lalu sesudah di inisialisasi plugin Navcontroller bisa digunakan, tapi ketika pemanggilan panggil nama variablenya saja (lihat line 19). Bisa dilihat pada line 19 di bagian this.navCtrl.navigateRoot('home'); fungsi untuk pindah pagenya itu ada pada navigateRoot yang artinya pindah page dan menjadikan page home sebagai root.
2. buka file login.page.html di folder myApp\src\app\login edit bagian tag <ion-button> menjadi seperti ini.
<ion-button
expand="block"
size="medium"
color="secondary"
(click)="goToHome()">
Login
</ion-button>
Agar fungsi pindah page di login.page.ts dapat berfungsi kita harus menambahkan fungsi klik pada tombol login seperti code di atas. Hasilnya bisa teman-teman tes sendiri, ketika tombol login di klik page akan pindah dari page login ke page home. Sebenarnya cara pindah page di ionic ada banyak cara, tapi di sini saya akan share cara pindah page dengan menggunakan plugin navcontroller saja, di antaranya:
- this.navCtrl.navigateRoot('home'); => pindah page sekaligus menjadikan page tujuan sebagai root
- this.navCtrl.navigateForward('/home'); => pindah page tapi tidak menjadikan page tujuan sebagai root
- this.navCtrl.navigateBack('/home'); => pindah page ke page sebelumnya (di sarankan)
- this.navCtrl.back(); => pindah page ke page sebelumnya (tidak di sarankan)
lebih lengkapnya teman-teman bisa baca artikel ini.
Sekian tutorial dari saya, semoga bermanfa'at :)
Wassalamu'alaikum Wr Wb
Comments
Post a Comment