Kursus Vue 3 - Next Level

Panduan praktis Vue 3 untuk membuat user interface web modern interaktif dan dinamis

  • Last update 31 May 2021
  • Duration 08:36:59
  • 61 lessons
  • Indonesian
Take the course for Rp 200.000

Course Content

  • 1. Pengantar Kursus Vue 3 Level 2
    03:53

  • 2. Pengantar Modul
    02:33
  • 3. Membuat Project Vue dengan Vite
    09:48
  • 4. Pengembangan aplikasi Vue.js dengan Vue CLI
    08:09
  • 5. Membuat SFC (Single File Component) pertama
    17:39
  • 6. Implementasi Build Tool pada aplikasi File Uploader
    23:44
  • 7. Fitur Multiple File upload
    06:45
  • 8. Kesimpulan
    00:47

  • 9. Pengantar Modul
    00:38
  • 10. Props lanjutan
    16:23
  • 11. Atribut non-props
    10:11
  • 12. Kastem Event
    04:51
  • 13. Menggunakan Slot
    04:33
  • 14. Scoped Slot
    09:07
  • 15. Datavue - Core feature
    05:38
  • 16. Datavue - Fitur Pencarian
    12:44
  • 17. Datavue - Multiple sort columns
    13:29
  • 18. Datavue - Pagination
    25:49
  • 19. Datavue - Dropdown Pagination
    09:31
  • 20. Datavue - Per page control
    13:58
  • 21. Datavue - Record meta & Automatic Numbering
    18:00
  • 22. Datavue - Check all items & Delete selected
    18:25
  • 23. Datavue - HTML 5 History API
    22:39
  • 24. Multiple v-model Bindings
    02:54
  • 25. Provide dan Inject
    03:55
  • 26. Datavue - Bugfixing
    16:39
  • 27. Komponen Dinamis
    04:21
  • 28. Kesimpulan
    00:35

  • 29. Pengantar Modul
    00:42
  • 30. Review Two Way Bindings
    10:05
  • 31. Membuat komponent BaseInput
    12:26
  • 32. Membuat komponen BaseSelect
    04:14
  • 33. Membuat komponen BaseRadio
    03:09
  • 34. Membuat komponen BaseRadioGroup
    04:22
  • 35. Membuat komponen BaseCheckbox
    03:03
  • 36. Membuat komponen BaseCheckboxGroup
    09:49
  • 37. Penanganan Elemen Label
    03:06
  • 38. Penanganan pesan error validasi
    06:21
  • 39. Implementasi komponen pada Form Otentikasi
    15:15
  • 40. Kesimpulan
    00:41

  • 41. Pengantar Modul
    01:01
  • 42. Melakukan API call petama dengan fetch
    13:23
  • 43. Melakukan API call dengan axios
    10:28
  • 44. Membuat Form modal
    17:01
  • 45. Mengirimkan Request POST untuk menyimpan data
    14:08
  • 46. Mengirimkan Request PUT untuk update data
    08:03
  • 47. Mengirimkan Request DELETE untuk hapus data
    03:57
  • 48. Mengorganisasikan API Endpoint
    05:35
  • 49. File Uploader - Setup di sisi server dan client
    08:53
  • 50. File Uploader - Upload file ke server
    06:18
  • 51. File Uploader - Membatalkan proses upload
    02:44
  • 52. File Uploader - Delete file
    03:29
  • 53. Kesimpulan
    00:53

  • 54. Pengantar Modul
    01:30
  • 55. Instalasi dan konfigurasi dasar Vue Router
    10:47
  • 56. Navigasi Halaman
    10:54
  • 57. Organisasi routing
    09:24
  • 58. Nested Routes
    03:52
  • 59. Named Views
    05:36
  • 60. Nested Named Views
    05:57
  • 61. Rute dinamis
    05:18
  • 62. Navigation Guard
    06:28
  • 63. Navigation Guard lanjutan (per-route dan in-component guard)
    06:32
  • Unpublished lesson: Rotue Meta Field
  • Unpublished lesson: Penanganan Error

  • Unpublished lesson: Pengantar Modul
  • Unpublished lesson: Persiapan di sisi server (Mock API)
  • Unpublished lesson: Global Auth state
  • Unpublished lesson: Memproteksi routing
  • Unpublished lesson: Form Registrasi
  • Unpublished lesson: Form Login
  • Unpublished lesson: Validasi token
Preview Video

Modal body text goes here.

Description

Selamat datang di Kursus Vue 3, Level 2. Kursus ini merupakan lanjutan dari Kursus Vue 3 untuk pemula (level 1). Pada kursus kali ini kita akan menyelami Vue 3 lebih dalam.

What you'll learn

Adapun topik yang akan dibahas di kursus ini antara lain:

  1. Bagaimana menggunakan Build Tool untuk pengembangan aplikasi Vue
  2. Komponen tingkat lanjut
  3. Bekerja dengan Form
  4. Komunikasi dengan Server
  5. Single Page Application (SPA) dengan Vue Router
  6. Otentikasi

1. Menggunakan Build Tool

Kita akan awali dengan belajar bagaimana menggunakan Build tool seperti Vue CLI dan Vite untuk pengembangan aplikasi Vue.js yang lebih profesional.

2. Komponen tingkat lanjut

Kita akan belajar komponen tingkat lanjut seperti:

  • Props statis dan Props dinamis serta validasi props
  • Custom event
  • Slot
  • Multiple v-model binding
  • Provide dan Inject dan
  • Komponen dinamis

Di modul ini kita juga akan belajar bagaimana mengembankan reusable komponen bernama Datavue yang terinspirasi dari plugin jQuery data table. Komponen ini selain bisa menampilkan data dalam bentuk tabel, juga memiliki fitur dasar berupa:

  • Pencarian
  • Paginasi halaman beserta per page control serta menampilkan informasi record, dan
  • Auto numbering

Fitur lainnya adalah:

  • Multiple sorting column, dan
  • multiple check items

3. Bagaimana bekerja dengan Form

Kita akan belajar bagaimana bekerja dengan form elemen di dalam aplikasi Vue. Selanjutnya kita akan lanjutkan bagaimana membuat reusable form elemen seperti:

  • input text
  • textarea
  • Select
  • Radio
  • Radio Group
  • Checkbox
  • Checkbox group

4. Bagaimana melakukan komunikasi dengan server dari aplikasi Vue

Kita akan belajar bagaimana melakukan komunikasi dari aplikasi Vue.js ke server (backend api), baik menggunakan native fetch API ataupun menggunakan library axios.

Kita akan belajar bagaimana menggunakan async/await, dan kita juga akan belajar bagaimana mengorganisasikan API call agar mudah dalam pengembangan ke depan.

5. Bagaimana membuat Single Page Application (SPA) menggunakan Vue Router

Kita akan belajar bagaimana memanfaatkan Vue Router untuk membuat single page aplication (SPA). Kita akan belajar mulai dari instalasi dan konfigurasi, organisasi routing, nested routes, navigation guard dan seterusnya.

6. Otentikasi

Kita akan belajar bagaimana mengimplementasikan otentikasi pada aplikasi Vue, agar aplikasi kita hanya bisa diakses oleh user yang berhak saja.

Yang kamu akan dapatkan setelah mengikuti kursus ini

Setelah mengikuti kursus ini kalian akan mahir Vue.js dalam membangun user interface web modern yang interaktif dan dinamis sesuai dengan kubutuhan.

Prasyarat

Sebelum mengikuti kursus ini kalian harus memiliki pemahaman dasar tentang javascript dan Vue.js. Jika kalian sama sekali belum pernah belajar Vue.js atau sudah pernah belajar Vue tetapi membutuhkan semacam refresher sebelum mengikuti kursus ini, silahkan ikuti Kursus Vue 3 - Level 1, gratis.

Q/A

Q: Bagaimana lisensi kursus ini?

A: Setelah membeli kursus ini anda berhak mengakses semua materi dalam kursus ini selamanya. Tetapi anda tidak diperbolehkan untuk menjual atau membagikan sebagian atau semua materi dalam kursus kepada pihak lain tanpa ijin dari author

Q: Bagaimana jika saat mengikuti materi kursus saya menemukan kendala?

A: Jika anda menemukan kendala saat mengikuti materi kursus, anda bisa tanyakan pada kolom komentar yang telah disediakan untuk setiap bahasan.

Q: Apakah disediakan Source code untuk materi kursus?

A: Ya. Source code telah disediakan. Tinggal download dan ekstrak di komputer anda.

Q: Apa format materi kursus ini?

A: Materi di dalam kursus ini sebagian besar berupa Video, sedangkan sisanya berupa teks.