TUTORIAL IONIC : Membuat Layout Login Sederhana (PART 3)
Assalamu'alaikum Wr Wb
Oke teman-teman melanjutkan tutorial sebelumnya di part 2, kali ini kita masuk ke tahap pembuatan layout. Disini saya akan mencontohkan cara membuat layout login sederhana dengan ionic framework, masih melanjutkan dengan project sebelumnya yang kita buat di tutorial part 1, jadi bagi yang belum atau tidak mengikuti tutorial ini dari awal harap kunjungi tutorial part 1 hehe, perhatikan langkah-langkahnya ya, tapi sebelumnya buka dulu project ionic kita di editor, saya di sini menggunakan visual studio code, bagi yang menggunakan VS code teman-teman bisa buka terminal atau bagi yang tidak menggunakan VS code bisa menggunakan CMD tapi arahkan dulu ke folder project.
1. kita buat page baru dengan cara mengetikkan perintah di terminal/di CMD : ionic generate page login , tunggu sampai selesai.
2. jika sudah, kita buka file app-routing.module.ts lalu edit seperti ini :
sebenarnya kita hanya mengganti route/rute awal saja dari redirectTo: 'home' menjadi redirectTo: 'login', jadi nanti pas pertama project kita di run akan menampilkan page login.
3. coba ketikkan perintah : ionic serve di terminal/di cmd, tampilannya akan seperti ini.
4. coba edit semua code di file login.page.html menjadi seperti ini.
Nanti tampilannya akan sepeti ini.
Gimana, mudahkan? bagi yang terbiasa dengan html pasti mudah karena tag-tag nya mirip dengan html ada tag pembuka dan tag penutup, hanya beda nama tag saja. Semoga bermanfa'at :)
Wassalamu'alaikum Wr Wb
Oke teman-teman melanjutkan tutorial sebelumnya di part 2, kali ini kita masuk ke tahap pembuatan layout. Disini saya akan mencontohkan cara membuat layout login sederhana dengan ionic framework, masih melanjutkan dengan project sebelumnya yang kita buat di tutorial part 1, jadi bagi yang belum atau tidak mengikuti tutorial ini dari awal harap kunjungi tutorial part 1 hehe, perhatikan langkah-langkahnya ya, tapi sebelumnya buka dulu project ionic kita di editor, saya di sini menggunakan visual studio code, bagi yang menggunakan VS code teman-teman bisa buka terminal atau bagi yang tidak menggunakan VS code bisa menggunakan CMD tapi arahkan dulu ke folder project.
1. kita buat page baru dengan cara mengetikkan perintah di terminal/di CMD : ionic generate page login , tunggu sampai selesai.
2. jika sudah, kita buka file app-routing.module.ts lalu edit seperti ini :
sebenarnya kita hanya mengganti route/rute awal saja dari redirectTo: 'home' menjadi redirectTo: 'login', jadi nanti pas pertama project kita di run akan menampilkan page login.
3. coba ketikkan perintah : ionic serve di terminal/di cmd, tampilannya akan seperti ini.
4. coba edit semua code di file login.page.html menjadi seperti ini.
Nanti tampilannya akan sepeti ini.
Gimana, mudahkan? bagi yang terbiasa dengan html pasti mudah karena tag-tag nya mirip dengan html ada tag pembuka dan tag penutup, hanya beda nama tag saja. Semoga bermanfa'at :)
Wassalamu'alaikum Wr Wb
Comments
Post a Comment