Tutorial Ionic : Menghasilkan Layout Login Sederhana (Part 3)

Assalamu'alaikum Wr Wb

Oke teman-teman melanjutkan bimbingan sebelumnya di part 2 , kali ini kita masuk ke tahap pengerjaan layout. Disini aku akan mencontohkan cara menghasilkan layout login sederhana dengan ionic framework , masih melanjutkan dengan project sebelumnya yang kita buat di bimbingan part 1 , jadi bagi yang belum atau tidak mengikuti bimbingan ini dari permulaan harap datangi bimbingan part 1 hehe , amati langkah-langkahnya ya , namun sebelumnya buka dahulu project ionic kita di editor , aku di sini menggunakan visual studio code , bagi yang menggunakan VS code teman-teman dapat buka terminal atau bagi yang tidak menggunakan VS code dapat menggunakan CMD namun arahkan dahulu ke folder project.
1. kita buat page gres dengan cara mengetikkan perintah di terminal/di CMD : ionic generate page login , tunggu hingga selesai.
2. bila telah , kita buka file app-routing.module.ts kemudian edit menyerupai ini :

sebenarnya kita cuma mengubah route/rute permulaan saja dari redirectTo: 'home' menjadi redirectTo: 'login' , jadi nanti pas pertama project kita di run akan memperlihatkan page login.
3. coba ketikkan perintah : ionic serve di terminal/di cmd , tampilannya akan menyerupai ini.













4. coba edit semua code di file login.page.html menjadi menyerupai ini.

Nanti tampilannya akan sepeti ini.













Gimana , mudahkan? bagi yang sudah biasa dengan html niscaya gampang alasannya merupakan tag-tag nya menyerupai dengan html ada tag pembuka dan tag epilog , cuma beda nama tag saja. Semoga bermanfa'at :)

Wassalamu'alaikum Wr Wb

Tidak ada komentar:

Posting Komentar