Did-X

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 navigat...

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' m...

Assalamu'alaikum Wr Wb Tutorial ini kelanjutan dari tutorial sebelumnya Installasi Ionic , dan kali ini saya akan menjelaskan tahap awal memainkan ionic framework ini, berhubung project ionic kita menggunakan angular jadi semua berawal dari file app-routing.module.ts yang terletak di folder  myApp\src\app , jika kita buka file app-routing.module.ts ini kita akan melihat code seperti ini kita lihat line 5 itu ada code path: ''   artinya itu sebagai route/rute root atau rute awal atau rute pertama, lalu perhatikan code selanjutnya ada redirectTo: 'home' artinya route/rute dengan path: 'home' (di line 6)   akan jadi route/rute utama yang akan di jalankan pertama kali project kita di load/di run. Lalu kita lihat juga code selanjutnya (di line 6) ada code loadChildren: './home/home.module#HomePageModule' artinya route/rute dengan path: 'home' akan menjalankan code home.module.ts di folder myApp\src\app\home , adapun isi code nya seperti in...

Assalamu'alaikum Wr Wb 1.Pengenalan Kali ini saya akan membahas IONIC framework, apa itu IONIC? IONIC adalah suatu framework untuk membuat suatu aplikasi mobile hybrid, menggunakan HTML, CSS, JS (JavaScript) dan menggunakan teknologi CORDOVA. Sebenarnya bukan hanya CORDOVA, ionic juga bisa menggunakan CAPACITOR, hanya saja kalau CAPACITOR ini belum stabil, tidak seperti CORDOVA. 2. Installasi di tutorial ini kita menginstall ionic v4+ (versi terbaru dari ionic). Bahan-bahan untuk menggunakan IONIC sebenanya hanya node js , tapi jika teman-teman ingin membuild nya menjadi bentuk apk maka teman-teman membutuhkan: - node js (saran saya minimal versi 6 dan pilih yang LTS) download disini - JDK (saran saya minimal versi 8) download  disini - Android Studio (sudah sepaket dengan SDK android jika teman-teman install Android Studio) download disini jika teman-teman sudah download dan install, maka selanjutnya mengatur environment variable nya, kebetulan di tutorial ini saya me...

ROTATING MENU CIRCLE DENGAN CSS hai semua, kali ini saya akan membahas mengenai cara membuat rotating menu dengan css. Cukup sederhana dan mudah di pahami dan yang pasti insha allah bermanfaat hehe. Oke langsung saja kita ke coding, pertama kita buat dulu folder buat menyimpan file css dan html nya, terserah teman-teman nama foldernya apa dan di simpan dimana, yang penting file css dan html nya berada di satu folder. 1. Buat file index.html 2. Buat file style.css Hasilnya akan seperti ini : Jika teman-teman mengarahkan kursor ke setiap huruf di atas circle, circle akan berputar ke arah jam 12 atau jadi paling atas sesuai huruf yang teman-teman pilih di atas circle. Oh ya, teman-teman bisa ubah hurufnya tidak harus did-x bisa juga di ganti dengan angkat asal ada 5 huruf. Semoga bermanfaat :)

MEMBUAT ANIMASI ZOOM IN DENGAN CSS Hai kembali lagi di blog ane, sudah lama nih ane ga bikin artikel (agak sedikit males) :v Sekarang ane akan membagikan pengalaman ane membuat animasi zoom in sederhana dengan css, teman-teman bisa mengikuti langkah-langkahnya. Tapi sebelumnya ane ngasih tau ane di sini menggunakan eksternal css (css dengan html nya tidak satu file) jadi kita harus memanggil file css nya di file html, bagi teman-teman yang terbiasa dengan internal css juga bisa (css dengan html nya satu file) tinggal menyesuaikan saja. Oke langsung saja kita implement, berikut langkah-langkahnya : 1. buat file dengan nama style.css Teman-teman bebas menyimpanya dimana saja asalkan file html dan file css nya satu folder supaya mudah pas pemanggilan file css nya. 2. buat file dengan nama index.html Bagaimana? mudahkan membuatnya?:) Sederhana sekali ya? ane sengaja buat sederhana biar teman-teman mudah memahaminya. Hasilnya bisa teman-teman uji coba sendiri, kal...

MENAMPILKAN MODAL KETIKA HALAMAN DI RELOAD Bagaimana cara menampilkan modal ketika halaman di reload? mudah saja kalian siapkan terlebih dahulu : 1. Bootstrap (  https://getbootstrap.com/  ) 2. file jquery (  http://jquery.com/  ) Setelah anda mendownload keduanya, silahkan buat folder modal simpan di mana aja (saya menyimpan nya di drive C). Kemudian extract bootstrap yang sudah di download tadi , simpan di dalam folder modal yang tadi di buat. Jangan lupa juga simpan file jquery nya di dalam folder bootstrap/js. Jika sudah kita langsung saja ke coding nya, cukup simple dan insha allah mudah di pahami. Hasilnya seperti ini Bila Penjelasan tentang modal nya kurang jelas , bisa kalian baca di artikel saya sebelumnya. Terima Kasih semoga bermanfaat :))