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

 

Pengertian Hosting dan Domain

Ok, jadi begini, artikel ini mungkin artikel terpendek yang pernah dibuat (atau terpanjang?) kita lihat saja apa yang akan terjadi pada artikel ini. Berawal dari sebuah group yang mulai menggunakan web sebagai media mencatat kegiatan, atau cerita atau tulisannya, maka mereka mulai menanyakan apa sih sebenernya Domain itu? Apasih Hosting itu?

Untuk mempunyai web itu sebenrnya ada beberapa cara, tapi mari kita bagi dua, Gratisan dan Yang Bayar

Web Gratisan

Continue reading “Pengertian Hosting dan Domain”

Using SqlStorage Rather then SQLite in Mobile apps with Ionic 2

Ngalor Ngidol

Yup, udah lama banget ga nulis untuk blog yang ini, padahal blog ini adalah blog yangmembawa nama *yang lumayan tidak* besar dari Sibanu.com. Ibarat kantor, blog ini adalah HQ nya, dan blog lain adalah anak cabang, bahkan anak perusahaan, yang seharusnya *entah siapa yang mengharuskan* blog ini jauh lebih update dari pada banyak blog cloningan lain :D.

Intinya

Intinya sih cuma mau bikin log journal dari beberapa kali nyobain Ionic 2 dengan angular 2 dan Typescript. Jadi tuh, dari kemaren nyari cara bagaimana caranya bisa nyimpen data ke local storage dari mobile apps.

mulai dari nyobain window.localstorage yang ternyata, entah kenapa, ketika di test itu bisa jalan dengan baik dan benar serta tampan, data yang ingin disave, berhasil ke save. Mungkin ada metode atau cara penggunaan yang kurang tepat sehingga datanya ga bisa ke save atau ke retrive.  Continue reading “Using SqlStorage Rather then SQLite in Mobile apps with Ionic 2”

Pilihan IDE Untuk Android Developer

Sekarang ini dunia sudah memasuki zona yang lebih sempit, setelah era website commerce, sekarang eranya sudah beralih menuju mobile commerce. Dunia sempit dalam layar smartphone.

Untuk bisa menikmati pengalaman melakukan aktifitas pada smartphone, kita membutuhkan aplikasi yang terinstal di smatphone kita, baik itu Android, iOS atau yang lainnya (masih ada ga ya yang lainnya?)

Nah, untuk programer, tentu kita membutuhkan kemampuan khusus dalam membuat aplikasi mobile. Untuk ngoding Android, mungkin pengetahuan akan bahasa pemrograman java akan sangat berguna. Biasanya saya menggunakan Android Studio, lebih terasa dekat dibanding dengan eclipse, kalau menggunakan Eclipse rasanya JAVA bangget.

Untuk yang pengen bisa ngoding aplikasi iOS, monggo belajar yang namanya Objective-C. Toolsnya menggunakan Xcode, saya ga tau apakah bisa running di windows, sejauh yang saya tau hanya Xcode SDK running hanya di apple. Continue reading “Pilihan IDE Untuk Android Developer”

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”

Seri Tutorial Web Development – Memulai dengan Bootstrap

Seri Tutorial Web Development – Memulai dengan Bootstrap

Hai,

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

Kali ini kita akan membuat menu bar, atau navigation bar yang responsive, ketika menu ini dibuka di layar yang kecil maka tampilannya akan oomatis berubah menjadi ‘hamburger’ menu. Semua bisa dengan mudah dibuat dengan bantuan dari Bootstrap.

Keren kan… bikinnya cukup mudah,

Kalau sudah penasaran, silahkan di nikmati video tutorialnya,  Continue reading “Seri Tutorial Web Development – Memulai dengan Bootstrap”

Seri Video Tutorial Web Development – Bootstrap

Seri Tutorial Web Development – Bootstrap

Hai,

Saat ini banyak sekali gadget – gadget atau device baru yang muncul dipasaran, dari harga yang murah sampai smartphone dengan harga motor, semuanya ada. Satu hal yang perlu kita, sebagai developer, cermati adalah bagaimana membuat tmpilan website kita, tampil dengan proporsi design yang sesuai untuk semua layar gadget, baik desktop maupun smartphone.

Kata kuncinya menurut saya ada 1, Responsive design.

Sebagai developer, kita harus mulai berfikir untuk menciptakan design yang Mobile First, tampilannya harus bisa sesuai dengan semua jenis layar device.

Untuk itu, kali ini saya akan membuat seri tutorial web design dengan menggunakan Bootstrap. Bootstrap sendiri adalah CSS framework yang konon kabarnya di keluarkan oleh Twitter.

Berikut List materi yang akan kita pelajari pada seri tutorial berikut:

  1. Introduction to Bootstrap
  2. Memulai dengan Bootstrap (update 01 Maret 2016)
  3. Tutorial membuat Navbar – Navigasi Menu dengan Bootstrap (Update 02 Maret 2016)
  4. Membuat Slider yang mudah dengan Bootstrap (Update 06 Maret 2016)
  5.  Membuat Grid System yang Responsive denganBootstrap (Update 06 Maret 2016)
  6. (Coming soon)

Stay tune ya, jangan kemana – kemana.