Skodev
Belajar coding dalam bahasa Indonesia
Diskon kelas baru hingga 25%! Masukkan kupon "lebihcepat" di kelas ini
XSkodev
Belajar coding dalam bahasa Indonesia
Aplikasi VueJS yang kamu buat semakin lama semakin kompleks? atau kamu memang berniat membuat aplikasi yang full menggunakan sistem Single Page Application (atau hanya menggunakan satu halaman) tapi takut kehilangan SEO? NuxtJS jawabannya.
NuxtJS bisa kamu gunakan untuk SSR alias Server Side Rendered website. Di mana konten kamu diambil dari suatu app atau API yang ramah untuk SEO. Atau kamu juga bisa membuat website statis atau SSG(Static site generator) dengan nuxt ini.
Jadi, dengan NuxtJS kamu bisa melakukan kata kata sihir ini:
SPA, SSR dan SSG.
Untuk mengerti NuxtJS, tentunya kamu perlu belajar dasar Vue.JS sendiri
Berkenalan dengan vue js, melalui kelas-kelas ini kita akan melihat dasar vuejs, membuat contoh sederhana sampai membuat API dan menggunakan AJAX melalui bantuan vuejs resource
Daftar isi Belajar vuejs 101
Perkenalan kelas belajar vuejs, library javascript yang tidak kalah populer Link: Vue.JS
Mulai belajar Vue js dengan membuat instance Vue dan mendeklarasikan propery-propertynya
Mengenal konsep data binding, untuk menggabungkan property yang ada pada DOM agar mudah memanipulasinya secara langsung
Membuat satu propery selalu tergantung dengan property lainnya dengan computed properties dari vue
Mengenal apa itu directive pada vuejs dan juga melihat contoh penggunaan conditional directive pada template html
Mengenal apa itu loop/list directive pada vuejs dan juga melihat contoh penggunaan list directive pada vue js
Metode metode pada javascript bisa kita gunakan seperti biasa pada list directive vue js
Di vue.js 2 fungsi filter sudah berbeda dari video ini Cek filter di Vue v2 Belajar menggunakan filter pada vue js, baik pada single property atau property yang kita loop dengan orderBy atau filterBy
Belajar menggunakan methods pada vue js, dan juga menggabungkannya dengan event melalui v-on directive
Belajar lebih banyak tentang penggunaan v-on dan juga v-bind sebagai property pada vuejs
Membuat input dari user bersatu dengan konsep data-binding. Sehingga apapun yang dimasukkan oleh user, kita langsung bisa melihat hasilnya
Salah satu feature dari vue js yaitu component, membuat sistem template untuk bagian-bagian html yang ingin kita tampilkan berkali-kali
Salah satu feature dari vue js yaitu component bagian 2, membuat sistem template untuk bagian-bagian html yang ingin kita tampilkan berkali-kali
Masih tentang component, kali ini kita akan berkenalan dengan konsep dynamic component pada Vuejs, yang bisa kita manfaatkan sebagai sistem routing sederhana untuk membuat SPA (Single Page Application)
Melakukan transisi (transition) css dengan mudah melalui attribut di vuejs Daftar isi Komentar dan Vote Vuejs
Perkenalan kelas membuat komentar dan vote pada vuejs, untuk latihan setelah belajar dasar-dasar dari vuejs
Mulai membuat siste komentar dan vote pada vuejs. Kita akan menggunakan semua yang telah kita pelajari pada dasar-dasar vuejs disini
Menambahkan komentar baru beserta votenya pada sistem yang sudah ada dengan menggunakan v-model, v-on dan menggabungkannya dengan methods dari vue js Daftar isi Vue JS todolist dan API
Belajar bagaimana cara membuat todolist pada vuejs, dengan memanfaatkan apa saja yang sudah kita pelajar pada dasar vue js
Belajar menggunakan localstorage pada html dan javascript untuk menyimpan data sementara pada sisi browser untuk data todolist yang dibuat
Belajar membuat API sederhana dengan PHP, kita juga akan menggunakan vue js resource untuk melakukan AJAX ke API yang dibuat
Menyimpan data ke database dengan metode post yang sudah disediakan oleh vuejs resource
Merubah data yang sudah ada pada database dengan metode patch untuk mengubah status dari todolist yang sudah dibuat
Melihat kesalahan yang kita lakukan di video sebelumnya kenapa fungsi post tidak bekerja pada versi 0.9 dari vuejs Daftar isi Membuat sistem tag dengan Vuejs
Intro untuk kelas membuat sistem tag dengan vue js, dengan ini kita bisa membuat sistem tag yang bisa diimplementasikan seperti pada forum, blog, dan lain-lain
Mulai dengan membuat html dan css sebagai kerangka aplikasi yang dibuat. Selain itu kita belajar memecahkan tugas besar menjadi tugas-tugas kecil yang bisa dikerjakan satu per satu dalam bahasa manusia
Ketika user mulai mengetik sesuatu pada input, kita akan memunculkan daftar tag yang tersedia, dan akan disembunyikan ketika tidak ada input
Memilih tag mana yang akan digunakan dengan menggunakan event keyboard pada saat panah ke bawah ditekan
Memilih tag mana yang akan digunakan dengan menggunakan event keyboard pada saat panah ke atas ditekan
karena tidak perlu menampilkan semuanya sekaligus, maka kita akan memunculkan daftar tag berdasarkan apa yang user ketik pada input
Memilih salah satu tag dengan event keyboard enter, jadi selain sudah bisa terhighlight dengan tanda panah, kita juga sudah bisa memilih tagnya
Bagaimana jika user ingin menghapus tag yang sudah terpilih, kita mulai dengan menggunakan event keyboard backspace ataupun delete untuk menghapus entri terakhir
Bagaimana jika user ingin menghapus tag yang sudah terpilih sebelumnya namun bukan entri terakhir, kita lihat cara menghapus berdasarkan yang diklik
selain memilih dengan tanda panah keyboard, kita juga harus bisa memilih berdasarkan mouse, tergantung apa yang dihighlight dan apa yang diklik
Jika satu tag sudah dipilih sebelumnya, maka tidak perlu lagi ditampilkan pada entri berikutnya, dengan ini kita mencegah ada tag yang sama pada satu entri Daftar isi Membuat single page app dengan vuex
Kita mulai dengan install vue cli dan juga vuex. Kita juga akan melihat struktur folder yang direkomendasikan untuk aplikasi yang menggunakan vuex
Kenalan dengan state dan juga getter sebagai tempat awal mengambil data pada aplikasi vuex
membuat component yang akan dipakai di beberapa tempat pada aplikasi member menggunakan vuex
Mengenal dan melihat perbedaan antara action dan mutation pada vuex yang bertanggung jawab untuk melakukan manipulasi pada data awal. Kita juga akan membuat singleview pada aplikasi member ini.
Bagaimana cara mengedit component secara langsung melalui aplikasi vuex yang kita buat?
Menambah member atau data baru, kita akan mempertajam bagaimana alur pada vuex, ketika kita ingin memanipulasi data yang ada pada state melalui action dan mutation
Menghapus member atau data, kita akan mempertajam lagi bagaimana alur pada vuex, ketika kita ingin memanipulasi data yang ada pada state melalui action dan mutation
Bikin aplikasi member yang dibuat dengan vuex ini jadi jauh lebih cantik dengan CSS tentunya
Ada hal yang bisa kita tambahkan untuk memaksimalkan user experience alias cara user berinteraksi dengan aplikasi ini Daftar isi NuxtJS membuat aplikasi vuejs universal
Kenalan dengan NuxtJS dan cara menginstall nuxtjs, membuat vuejs universal untuk aplikasi kita berikutnya
Kita intip dulu bagaimana halaman dasar dari NuxtJS, dimana starting pointnya, apa aja default yang tersedia buat kita
Cara load custom css dan framework css dari luar di aplikasi nuxtjs
Bagaimana cara menginstall plugin di nuxtjs. Kita akan melihat contohnya dengan menggunakan axios di nuxtjs
Cara menampilkan data yang kita terima dari axios dengan v-for pada halaman vue js file
Memindahkan data yang awalnya di vue file jadi store (Vuex store) pada nuxt.js untuk mengatur state datanya
Cara membuat component di nuxtjs, sama seperti membuat component pada vue
Navigasi menu yang muncul pada semua halaman di vue nuxt.js
Mengoper Property di component vuejs agar dinamis dan membuat transisi pada halaman lebih cantik di nuxtjs
Bagaimana dengan membuat halaman dinamis pada nuxt.js seperti berdasarkan id user atau slug pada nama blog misalnya
Salah satu masalah yang sebelumnya kita temukan pada Vue js adalaha SEO, atau bagaimana nanti dia di search engine, seperti title atau meta data linenya agar menjadi dinamis sesuai halamannya Daftar isi CRUD API di Nuxtjs
Trailer menggunakan nuxt js untuk mengakses API dengan axios
Kita akan membuat API local menggunakan json-server, kamu bisa melihatnya disini Link: Jsonplaceholder
Bagaimana menginstall plugin seperti axios atau css framework dan menggunakannya di proyek nuxt.js
Memindahkan data dari .vue file ke vuex store
Bagaimana cara menambahkan data ke API menggunakan nuxtjs
Selain menggunakan mapaction dan spread syntax, ada penulisan lain untuk mengakses action dan state di vuex store kita dari .vue file
Kita rapikan dulu tampilan dari proyek ini!
Menghapus dari dengan API di nuxt.js
Mengupdate data dari API di nuxt.js
Membuat sistem search dengan computed property di vuejs
Mau pake aplikasi vuejs bukan hanya di frontend, tapi juga di sisi servernya. Lihat caranya disini membuat aplikasi Vuejs yang ramah dengan SEO
Kenalan dengan NuxtJS dan cara menginstall nuxtjs, membuat vuejs universal untuk aplikasi kita berikutnya
Kita intip dulu bagaimana halaman dasar dari NuxtJS, dimana starting pointnya, apa aja default yang tersedia buat kita
Cara load custom css dan framework css dari luar di aplikasi nuxtjs
Bagaimana cara menginstall plugin di nuxtjs. Kita akan melihat contohnya dengan menggunakan axios di nuxtjs
Cara menampilkan data yang kita terima dari axios dengan v-for pada halaman vue js file
Memindahkan data yang awalnya di vue file jadi store (Vuex store) pada nuxt.js untuk mengatur state datanya
Cara membuat component di nuxtjs, sama seperti membuat component pada vue
Navigasi menu yang muncul pada semua halaman di vue nuxt.js
Mengoper Property di component vuejs agar dinamis dan membuat transisi pada halaman lebih cantik di nuxtjs
Bagaimana dengan membuat halaman dinamis pada nuxt.js seperti berdasarkan id user atau slug pada nama blog misalnya
Salah satu masalah yang sebelumnya kita temukan pada Vue js adalaha SEO, atau bagaimana nanti dia di search engine, seperti title atau meta data linenya agar menjadi dinamis sesuai halamannya