A. Judul dan Deskripsi Pelatihan
Judul :
Mengimplementasikan pemrograman terstruktur berorientsi objek dan menulis kode dengan prinsip sesuai guidlanie dalam membuat chat real time berbasis web untuk menjadi desainer website
Deskripsi :
Dengan mengikuti pelatihan ini peserta akan menjadi seorang desainer website
Sebagai seorang desainer website, peserta dapat menganalisis, merancang dan mengembangkan situs internet dengan menerapkan campuran seni dan kreativitas dengan pemrograman perangkat lunak, bahasa script dan interaksi dengan lingkungan system operasi; dimana nantinya peserta bisa membuat fitur dalam website berupa fitur chat secara langsung dengan program vue js
Menurut data dari world economic forum ( https://bit.ly/3wrrD9g ) kebutuhan akan pengembang website (web development ) akan terus meningkat, Pekerjaan sebagai pengembang website juga menjadi pekerjaan yang paling di cari nomor 2 di tahun 2016 oleh banyak perusahaan. Jika peserta mempunyai keahlian ini, maka tidak akan sulit bagi peserta untuk menemukan pekerjaan di masa sekarang ini
Di pelatihan ini peserta akan memahami kegunaan seluruh tools yang ada pada pemrograman vue js. Sehingga peserta dapat menggunakan tools tersebut untuk membuat fitur Vue JS pada website peserta sesuai dengan kebutuhan
Pelatihan ini dibuat dengan merujuk kepada Acuan KBJI 2014 ( 2513.06 ) dan menggunakan Standar Kompetensi Kerja Nasional Indonesia ( SKKNI ) Nomor 282 Tahun 2016 Pemrograman
Sesuai dengan kebutuhan industri, Kompetensi yang akan anda pelajari pada program pelatihan ini yaitu :
1. Kompeten Menguasai dan memahami cara Instalasi Vue CLI
2. Kompeten Memahami apa itu method, Event data Binding, Looping
3. Kompeten Menguasai dan memahami Pengenalan Hook pada Vue JS
4. Kompeten Menguasai dan memahami cara Menampilkan Blog dari API JSON Placeholder
5. Kompeten Menguasai dan memahami cara Membuat Filter Pencarian Dengan Vue JS
6. Kompeten Menguasai dan memahami cara membuat Aplikasi Chat dengan Vue js
7. Kompeten Menguasai dan memahami cara membuat Vue Chat and Show Location
B. Kompetensi
Aspek Kompetensi: Pengetahuan (Knowledge)
Dengan mempelajari pelatihan ini, siswa:
1.Menguasai dan memahami cara Instalasi Vue CLI ( Aspek ini dapat di lihat pada modul 2 tentang Vue CLI pada video berjudul Instalasi Vue CLI pada menit 00.00 – 08.14)
2.Memahami apa itu method, Event data Binding, Looping ( Aspek ini dapat di lihat pada modul 1 tentang Introduction pada video berjudul Pengenalan Method Pada Vue JSI pada menit 00.00 – 04.00)
3.Menguasai dan memahami Pengenalan Hook pada Vue JS ( Aspek ini dapat di lihat pada modul 2 tentang Vue CLI pada video berjudul PPengenalan Hook pada Vue JS Bagian A dan B pada menit 00.00 – 12.00)
4.Menguasai dan memahami cara Menampilkan Blog dari API JSON Placeholder 5. ( Aspek ini dapat di lihat pada modul 2 tentang Vue CLI pada video berjudul Menampilkan Blog dari API JSON Placeholder Bagian A dan B pada menit 00.00 – 14.00)
5.Menguasai dan memahami cara Membuat Filter Pencarian Dengan Vue JS ( Aspek ini dapat di lihat pada modul 2 tentang Vue CLI pada video berjudul Membuat Filter Pencarian Dengan Vue JS pada menit 00.00 – 07.00)
6.Menguasai dan memahami cara membuat Aplikasi Chat dengan Vue js ( Aspek ini dapat di lihat pada modul 4 tentang Vue Project Chat Real Time pada video berjudul Instalasi Project 2 : Aplikasi Chat pada menit 00.00 – 07.00)
7.Mampu Menguasai dan memahami cara membuat Vue Chat and Show Location ( Aspek ini dapat di lihat pada modul 5 tentang Vue Chat and Show Location pada video berjudul Show Location pada menit 00.00 – 05.00)
Aspek Kompetensi: Keterampilan (Skill)
Dengan mempelajari pelatihan ini, siswa:
1.Menguasai dan memahami cara Instalasi Vue CLI ( Aspek ini dapat di lihat pada modul 2 tentang Vue CLI pada video berjudul Instalasi Vue CLI pada menit 00.00 – 08.14)
2.Memahami apa itu method, Event data Binding, Looping ( Aspek ini dapat di lihat pada modul 1 tentang Introduction pada video berjudul Pengenalan Method Pada Vue JSI pada menit 00.00 – 04.00)
3.Menguasai dan memahami Pengenalan Hook pada Vue JS ( Aspek ini dapat di lihat pada modul 2 tentang Vue CLI pada video berjudul PPengenalan Hook pada Vue JS Bagian A dan B pada menit 00.00 – 12.00)
4.Menguasai dan memahami cara Menampilkan Blog dari API JSON Placeholder 5. ( Aspek ini dapat di lihat pada modul 2 tentang Vue CLI pada video berjudul Menampilkan Blog dari API JSON Placeholder Bagian A dan B pada menit 00.00 – 14.00)
5.Menguasai dan memahami cara Membuat Filter Pencarian Dengan Vue JS ( Aspek ini dapat di lihat pada modul 2 tentang Vue CLI pada video berjudul Membuat Filter Pencarian Dengan Vue JS pada menit 00.00 – 07.00)
6.Menguasai dan memahami cara membuat Aplikasi Chat dengan Vue js ( Aspek ini dapat di lihat pada modul 4 tentang Vue Project Chat Real Time pada video berjudul Instalasi Project 2 : Aplikasi Chat pada menit 00.00 – 07.00)
7.Mampu Menguasai dan memahami cara membuat Vue Chat and Show Location ( Aspek ini dapat di lihat pada modul 5 tentang Vue Chat and Show Location pada video berjudul Show Location pada menit 00.00 – 05.00)
Aspek Kompetensi: Sikap (Attitude)
Dengan mempelajari pelatihan ini, siswa:
1.Mengidentifikasi cara Instalasi Vue CLI dengan teliti ( Aspek ini dapat di lihat pada modul 2 tentang Vue CLI pada video berjudul Instalasi Vue CLI pada menit 00.00 – 08.14)
2.mengidentifikasi method, Event data Binding, Looping dengan teliti ( Aspek ini dapat di lihat pada modul 1 tentang Introduction pada video berjudul Pengenalan Method Pada Vue JSI pada menit 00.00 – 04.00)
3.menentukan Hook pada Vue JS sesuai dengan kebutuhan ( Aspek ini dapat di lihat pada modul 2 tentang Vue CLI pada video berjudul PPengenalan Hook pada Vue JS Bagian A dan B pada menit 00.00 – 12.00)
4.Menampilkan Blog dari API JSON Placeholder sesuai kebutuhan.( Aspek ini dapat di lihat pada modul 2 tentang Vue CLI pada video berjudul Menampilkan Blog dari API JSON Placeholder Bagian A dan B pada menit 00.00 – 14.00)
5.Membuat Filter Pencarian Dengan Vue JS sesuai kaidah pemrograman ( Aspek ini dapat di lihat pada modul 2 tentang Vue CLI pada video berjudul Membuat Filter Pencarian Dengan Vue JS pada menit 00.00 – 07.00)
6.membuat Aplikasi Chat dengan Vue js sesuai kebutuhan user ( Aspek ini dapat di lihat pada modul 4 tentang Vue Project Chat Real Time pada video berjudul Instalasi Project 2 : Aplikasi Chat pada menit 00.00 – 07.00)
7.membuat Vue Chat and Show Location sesuai kebutuhan user ( Aspek ini dapat di lihat pada modul 5 tentang Vue Chat and Show Location pada video berjudul Show Location pada menit 00.00 – 05.00)
C. Sasaran Peserta
Peserta pelatihan yang dapat mengikuti pelatihan ini yaitu:
1) Pendidikan minimal SMA/SMK
2) memiliki Komputer / Laptop
3) Memiliki pengetahuan dasar pemrograma komputer
4) Memiliki pengetahuan dasar HTML dan CSS
D. Tujuan Pelatihan
Tujuan Umum
Diakhir pelatihan Peserta Mampu mendesain sebuah website dengan menggunakan Vue Js
Tujuan Khusus
Program pelatihan ini memiliki tujuan sebagai berikut :
1. Kompeten Menguasai dan memahami cara Instalasi Vue CLI
2. Kompeten Memahami apa itu method, Event data Binding, Looping
3. Kompeten Menguasai dan memahami Pengenalan Hook pada Vue JS
4. Kompeten Menguasai dan memahami cara Menampilkan Blog dari API JSON Placeholder 5.
5. Kompeten Menguasai dan memahami cara Membuat Filter Pencarian Dengan Vue JS
6. Kompeten Menguasai dan memahami cara membuat Aplikasi Chat dengan Vue js
7. Kompeten Menguasai dan memahami cara membuat Vue Chat and Show Location
E. Silabus dan Durasi
Durasi Per Sesi
| 1. Introduction Vue js | 06:27 |
| 2. Instalasi Vue JS Bagian A | 05:10 |
| 3. Instalasi Vue JS Bagian B | 05:56 |
| 4. Pengenalan Method Pada Vue JS | 04:20 |
| 5. Pengenalan Event Object | 09:36 |
| 6. Pengenalan Data Binding | 09:36 |
| 7. Keyboard Event | 02:26 |
| 8. Data Dua Arah Dengan Binding | 02:08 |
| 9. Looping dengan V-for pada Vue JS Bagian A | 05:10 |
| 10. Looping dengan V-for pada Vue JS Bagian B | 06:40 |
| 11. Instalasi Vue CLI | 08:14 |
| 12. Pengenalan File dan Folder Yang Ada Di Dalam Project Vue CLI | 04:25 |
| 13. Data Function pada Vue JS | 05:19 |
| 14. Navbar pada Vue JS 10:00 | |
| 15. Pengertian Scoped | 03:17 |
| 16. Pengenalan Passing Data dengan Props Bagian A | 08:10 |
| 17. Pengenalan Passing Data dengan Props Bagian B | 09:06 |
| 18. Event Pada Vue JS | 09:01 |
| 19. Pengenalan Hook pada Vue JS Bagian A | 06:10 |
| 20. Pengenalan Hook pada Vue JS Bagian B | 06:51 |
| 21. Menampilkan Blog dari API JSON Placeholder Bagian A | 08:10 |
| 22. Menampilkan Blog dari API JSON Placeholder Bagian B | 06:31 |
| 23. Filter Data Part 1 Pada Vue JS | 04:44 |
| 24. Membuat Filter Pencarian Dengan Vue JS | 07:14 |
| 25. Instalasi Vue Router Bagian A | 07:10 |
| 26. Instalasi Vue Router Bagian B | 08:25 |
| 27. Vue Router Navigation | 05:08 |
| 28. Vue Router Parameter | 05:40 |
| 29. Instalasi Vue JS Project | 08:15 |
| 30. Instalasi CSS Materialsis dengan Vue JS | 03:16 |
| 31. Komponen Navbar pada Vue JS | 08:59 |
| 32. Show Content pada Vue JS Bagian A | 07:10 |
| 33. Show Content pada Vue JS Bagian B | 08:23 |
| 34. Delete Data Lokal Dengan Vue JS | 07:24 |
| 35. Buat Database di Firebase Bagian A | 05:10 |
| 36. Buat Database di Firebase Bagian B | 07:19 |
| 37. Konfigurasi Firebase Dengan Vue JS | 07:41 |
| 38. Show Data Dari Firebase Bagian A | 06:10 |
| 39. Show Data Dari Firebase Bagian B | 07:02 |
| 40. Delete Data Dari Firebase | 06:16 |
| 41. Membuat Form Add Data Kursus Bagian A | 06:10 |
| 42. Membuat Form Add Data Kursus Bagian B | 08:18 |
| 43. Input Data Part Satu | 08:45 |
| 44. Form Input Data Part Dua Bagian A | 05:10 |
| 45. Form Input Data Part Dua Bagian B | 06:33 |
| 46. Input Data Part Tiga | 04:21 |
| 47. Insert Data ke Firebase | 10:05 |
| 48. Insert Data ke Firebase Part Dua | 06:00 |
| 49. Edit Data Part Satu Bagian A | 06:10 |
| 50. Edit Data Part Satu Bagian B | 06:10 |
| 51. Edit Data Part Satu Bagian C | 07:38 |
| 52. Edit Data Part Dua | 07:07 |
| 53. Edit Data Part Tiga | 08:23 |
| 54. Update Data pada Vue JS | 04:32 |
| 55. Upload Project ke Firebase Bagian A | 06:10 |
| 56. Upload Project ke Firebase Bagian B | 07:30 |
| 57. Instalasi Project 2 Bagian A | 06:10 |
| 58. Instalasi Project 2 Bagian B | 07:30 |
| 59. Membuat Form Input Name Chat | 00:29 |
| 60. Route Chat Vue Bagian A | 06:10 |
| 61. Route Chat Vue Bagian B | 05:28 |
| 62. Route Vue JS Validasi | 06:47 |
| 63. Form Chatting Room | 07:36 |
| 64. Input Chat Part Pertama Bagian A | 06:10 |
| 65. Input Chat Part Pertama Bagian B | 04:31 |
| 66. Input Chat ke Firebase Bagian A | 06:10 |
| 67. Input Chat ke Firebase Bagian B | 04:44 |
| 68. Show Chat Bagian A | 06:10 |
| 69. Show Chat Bagian B | 05:49 |
| 70. Change Date dan Time Chat | 04:51 |
| 71. Scrolling Chat pada Vue JS | 04:18 |
| 72. Instalasi Project 3 : Show Location | 09:33 |
| 73. Menambahkan Navbar | 09:07 |
| 74. Map Part Satu | 04:35 |
| 75. Map Part Dua | 05:31 |
| 76. Show Map pada Vue JS Bagian A | 06:10 |
| 77. Show Map pada Vue JS Bagian B | 04:28 |
| 78. Membuat Form Registrasi Bagian A | 07:10 |
| 79. Membuat Form Registrasi Bagian B | 08:15 |
| 80. VIF Form Input Part Satu | 03:59 |
| 81. VIF Part Dua | 08:27 |
| 82. VIF Part Tiga | 05:17 |
| 83. Insert Data ke Firebase | 05:50 |
| 84. Navbar Router | 06:15 |
| 85. Logout Part Satu | 05:58 |
| 86. Logout Part Dua | 04:35 |
| 87. Form Login pada Vue Bagian A | 06:10 |
| 88. Form Login pada Vue Bagian B | 05:09 |
| 89. Action Login Submit pada Vue Bagian A | 06:10 |
| 90. Action Login Submit pada Vue Bagian B | 04:36 |
| 91. Show Location | 05:40 |
| 92. Update Location User Bagian A | 06:10 |
| 93. Update Location User Bagian B | 05:11 |
| 94. Validasi Session Login | 06:52 |
| 95. Show Session User | 05:46 |
| 96. Show Data Location | 06:02 |
| 97. Show User Profile Bagian A | 06:10 |
| 98. Show User Profile Bagian B | 05:59 |
| 99. Buat Koleksi Data Chat Real Time | 02:37 |
| 100. Insert Comment Part Satu | 07:19 |
| 101. Insert Comment Part Dua | 07:51 |
| 102. Show Chatting Bagian A | 06:10 |
| 103. Show Chatting Bagian B | 06:30 |
| 104. Styling Comment | 06:45 |
| 105. Style Scrolling Chat | 04:10 |
| 106. Uploading Webiste | 05:34 |
Total Durasi : 11 jam 08 menit 05 detik
F. Kapasitas jenis/Kelas Pelatihan
Tidak terbatas
G. Metode Ajar/Latih dan Evaluasi Peserta
• Ebook
• Ceramah
• Video Interaktif
• Kuis
• Penugasan
H. Daftar Instruktur dan riwayat profesi
Nama Instruktur:
Encep Suryana
Riwayat Profesi:
Teacher Assistant – Computer and Network Engineering SMK Negeri 1 Karawang
2012-2014
• Instructor – Photography and Videography Basic and Advanced 2015-2017
• System Analyst & IT Support – Freelance – CV. Cipta Sinergi Manufacturing
2019-2020
• Sebagai Instruktur Programming, Digital Marketing dan Desain Grafis di
BABASTUDIO Tahun 2018 – Sekarang
• Sebagai Instruktur Programming, Digital Marketing dan Desain Grafis di Sekolah
Pintar Freelance Tahun 2018 – Sekarang
• Sebagai Instruktur Programming, Digital Marketing dan Desain Grafis di
Multiartha Prima Sejahtera Freelance Tahun 2018 – Sekarang
• Programmer DePlaza Tahun 2019 – Sekarang
• System Analyst DIMIA Tahun 2019 – Sekarang
I. Jenis/Klasifikasi Sertifikat
Sertifikat Penyelesaian
J. Mekanisme Evaluasi
• Kuis
• Penugasan
Curriculum
- 7 Sections
- 79 Lessons
- 10 Weeks
- Introduction9
- 2.1Introduction Vue js6 Minutes
- 2.2Instalasi Vue JS10 Minutes
- 2.3Pengenalan Method Pada Vue JS4 Minutes
- 2.4Pengenalan Event Object9 Minutes
- 2.5Pengenalan Data Binding9 Minutes
- 2.6Keyboard Event6 Minutes
- 2.7Data Dua Arah Dengan Binding2 Minutes
- 2.8Looping dengan V-for pada Vue JS11 Minutes
- 2.9Quiz Introduction10 Minutes0 Questions
- Vue CLI12
- 3.1Instalasi Vue CLI8 Minutes
- 3.2Pengenalan File dan Folder Yang Ada Di Dalam Project Vue CLI4 Minutes
- 3.3Data Function pada Vue JS5 Minutes
- 3.4Navbar pada Vue JS10 Minutes
- 3.5Pengertian Scoped3 Minutes
- 3.6Pengenalan Passing Data dengan Props17 Minutes
- 3.7Event Pada Vue JS9 Minutes
- 3.8Pengenalan Hook pada Vue JS12 Minutes
- 3.9Menampilkan Blog dari API JSON Placeholder14 Minutes
- 3.10Filter Data Part 1 Pada Vue JS4 Minutes
- 3.11Membuat Filter Pencarian Dengan Vue JS7 Minutes
- 3.12Quiz Vue CLI10 Minutes0 Questions
- Vue Router4
- Vue Project 120
- 5.1Instalasi Vue JS Project8 Minutes
- 5.2Instalasi CSS Materialsis dengan Vue JS3 Minutes
- 5.3Komponen Navbar pada Vue JS8 Minutes
- 5.4Show Content pada Vue JS15 Minutes
- 5.5Delete Data Lokal Dengan Vue JS7 Minutes
- 5.6Buat Databse di Firebase12 Minutes
- 5.7Konfigurasi Firebase Dengan Vue JS7 Minutes
- 5.8Show Data Dari Firebase13 Minutes
- 5.9Delete Data Dari Firebase6 Minutes
- 5.10Membuat Form Add Data Kursus14 Minutes
- 5.11Input Data Part Satu8 Minutes
- 5.12Input Data Part Tiga4 Minutes
- 5.13Insert Data ke Firebase10 Minutes
- 5.14Insert Data ke Firebase Part Dua6 Minutes
- 5.15Edit Data Part Satu
- 5.16Edit Data Part Dua7 Minutes
- 5.17Edit Data Part Tiga8 Minutes
- 5.18Update Data pada Vue JS4 Minutes
- 5.19Upload Project ke Firebase12 Minutes
- 5.20Quiz Vue Project 110 Minutes0 Questions
- Vue Project Chat Real Time11
- 6.1Instalasi Project 2 : Aplikasi Chat13 Minutes
- 6.2Membuat Form Input Name Chat14 Minutes
- 6.3Route Chat Vue11 Minutes
- 6.4Route Vue JS Validasi6 Minutes
- 6.5Form Chatting Room7 Minutes
- 6.6Input Chat Part Pertama10 Minutes
- 6.7Input Chat ke Firebase10 Minutes
- 6.8Show Chat11 Minutes
- 6.9Change Date dan Time Chat4 Minutes
- 6.10Scroling Chat pada Vue JS4 Minutes
- 6.11Quiz Vue Project Chat Real Time10 Minutes0 Questions
- Vue Chat and Show Location29
- 7.1Instalasi Project 3 : Show Location9 Minutes
- 7.2Menambahkan Navbar9 Minutes
- 7.3Map Part Satu4 Minutes
- 7.4Map Part Dua5 Minutes
- 7.5Show Map pada Vue JS10 Minutes
- 7.6Membuat Form Registrasi15 Minutes
- 7.7VIF Form Input Part Satu4 Minutes
- 7.8VIF Part Dua8 Minutes
- 7.9VIF Part Tiga5 Minutes
- 7.10Insert Data ke Firebase5 Minutes
- 7.11Navbar Router6 Minutes
- 7.12Logout Part Satu5 Minutes
- 7.13Logout Part Dua4 Minutes
- 7.14Form Login pada Vue11 Minutes
- 7.15Action Login Submit pada Vue10 Minutes
- 7.16Show Location5 Minutes
- 7.17Update Location User11 Minutes
- 7.18Validasi Session Login6 Minutes
- 7.19Show Session User5 Minutes
- 7.20Show Data Location
- 7.21Show User Profile12 Minutes
- 7.22Buat Koleksi Data Chat Real Time2 Minutes
- 7.23Insert Comment Part Satu7 Minutes
- 7.24Insert Comment Part Dua7 Minutes
- 7.25Show Chatting12 Minutes
- 7.26Styling Comment6 Minutes
- 7.27Style Scroling Chat4 Minutes
- 7.28Uploading Webiste5 Minutes
- 7.29Quiz Vue Chat and Show Location10 Minutes0 Questions
- Post Test1
