Berpindah Halaman dengan Ionic 3 dan Angular4

Ok,

Pada kesempatan kali in, kita akan melanjutkan Membuat Mobile Application dengan Ionic 3 dan Angular4 yang telah kita mulai pada artikel sebelumnya. Yang belum baca artikel sebelumnya bisa melihatnya disini.

Jika kamu mencari tutorial ini, saya anggap kamu sudah bisa membuat project baru dengan menggunakan Ionic 3, jika belum silahkan baca artikel saya sebelumnya.

Pada tutorial ini kita akan berpindah dari halaman awal (Home) ke halaman Profile dengan menggunakan Button (tombol) yang ada di halaman home dan melink ke halaman profile.

Jika kamu memulai project Ionic 3 dari awal dengan template blank, maka langkah pertamanya, kamu membuat halaman baru dengan nama profile, untuk membuat halaman baru, Ionic CLI telah menyapkan short cut nya.

Pada command prompt, jalankan perintah berikut

penjelasannya, kita menggunakan perintag generate (g) dengan tipe page dan nama halamannya profile.

maka kamu akan mempunya satu halaman baru, halaman profile yang ada di bawah folder src/pages.

Selanjutnya kita buat button pada halamana home (home.html) dan menambahkan atribute click. berikut contohnya

atribute tag (click) di beri value dengan nama fungsi pindah(), hal ini memberi tahu aplikasi, jika tombol klik ditekan, silahkan jalankan perintah pindah().

Selanjutnya, kita buat fungsi pindah() pada home.ts, berikut code nya

pada fungsi pidah(), kita menggunakan navigation controller (navCtrl) dengan tipe push() dan kita isi dengan halaman nama class dari halaman profile (profile.ts) yang baru kita bikin.

Silahkan jalankan aplikasi Anda dengan menjalankan perintah

Selamat mencoba,

Membuat Mobile Application dengan Ionic 3 dan Angular4

Hallo,

Lama tak berjumpa, kali ini saya akan menuliskan tutorial untuk memulai pemrograman mobile application dengan menggunakan Ionic 3.

Jika Ionic 2 muncul dengan Angular 2,di versi Ionic terbaru ini, Ionic 3, muncul dengan Angular 4. Banyak fitur yagnditambahkan, yang sering dibahas adalah kemampuan Lazy loading pada ionic 3 ang diadaptasi dari Angular4.

Tapi pada kesempatan kali ini saya tidak akan membahas jauh apa saja perubahan yang ada pada ionic 3. Saya hanya akan membantu kamu untuk memulai aplikasi mobile dengan Ionic 3.

Tolong dipastikan kamu memiliki NodeJS terinstall pada komputer kamu, Nodejs Bisa di download dibawah ini klik logonya:

Download Nodejs

setelah nodejs terinstall, kamu wajib install cordova melalui command line, dengan mengetikan perintah berikut

Lalu, langkah selanjutnya kamu bisa menginstall Ionic dari NPM dengan menjalankan perintah berikut di command line

Pada langkah ini, kamu sudah menginstall ionic framework, untuk memastikan bahwa ionic sudah terinstall, kamu bisa menjalankan perintah berikut di command line

untuk memulai membuat project pertama kamu, silahkan jalankan perintah berikut di command line

Kamu akan membuat project basline dari template blank. Bisa juga kamu mengganti blank dengang menu atau tabs.

Untuk melihat project yang baru kamu buat, kamu bisa menjalankan perintah berikut

Demikian tutorial Memulai Membuat Mobile Application dengan Ionic 3 dan Angular4.

Selamat mencoba

 

Seri Tutorial Web Development – Grid System

Seri Tutorial Web Development – Grid System

Hai,

Ini adalah video tutorial lanjutan dari Seri Tutorial Web Development – Bootstrap.

Pada Artikel sebelumnya kita telah belajar untuk membuat Image slider pada web dengan responsive design menggunakan bootstrap, ternyata caranya sangat mudah untuk di terapkan.

Pada artikel dan video kali ini kita akan belajar bagainya menggunakan grid system dari bootstrap dengan contoh yang sangat singkat.

Yuk, disimak, jangan lupa untuk subscribe di akun youtube saya ya, untuk mendapatkan video tutorial lainnya. Continue reading “Seri Tutorial Web Development – Grid System”

Seri Tutorial Web Development – Slider Image (Carousel)

Seri Tutorial Web Development – Slider Image (Carousel)

Hai,

Ini adalah video tutorial lanjutan dari Seri Tutorial Web Development – Bootstrap

Setelah kemarin kita membuat menu navigasi yang responsive menggunakan bootstrap, kali ini kita akan membuat image slider yang responsive menggunakan Bootstrap.

Saya dulu harus googling berjam – jam untuk membuat satu slider yang bisa responsive, namun pada video kali ini Anda akan terkejut, betapa mudanya membuat slider image hanya menggunakan bootstrap, dan tentu saja ini responsive.

Silahkan simak video berikut.. Continue reading “Seri Tutorial Web Development – Slider Image (Carousel)”

Seri Tutorial Web Development – Responsive Navbar dengan Bootstrap

Seri Tutorial Web Development – Slider Image (Carousel)

Hai,

Ini adalah video tutorial lanjutan dari Seri Tutorial Web Development – Bootstrap

Setelah kemarin kita membuat menu navigasi yang responsive menggunakan bootstrap, kali ini kita akan membuat image slider yang responsive menggunakan Bootstrap.

Saya dulu harus googling berjam – jam untuk membuat satu slider yang bisa responsive, namun pada video kali ini Anda akan terkejut, betapa mudanya membuat slider image hanya menggunakan bootstrap, dan tentu saja ini responsive.

Silahkan simak video berikut.. Continue reading “Seri Tutorial Web Development – Responsive Navbar dengan Bootstrap”