Description

Kami Baba Studio telah berdiri selama 17 tahun dengan 130 ribu murid dan alumni. Beberapa Pencapaian Baba Studio

adalah:
1. Peraih Ratusan Penghargaan
2. Termasuk 5 ICT Award dari Menkominfo

Tentang materi

A. JUDUL

Mengimplementasikan pemrograman terstruktur berorientsi objek dan menulis kode dengan prinsip sesuai guidlanie dalam membuat chat real time berbasis web untuk menjadi desainer website

 Rp. 499.000

Deskripsi Pelatihan

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 Mengimplementasikan Pemrograman terstruktur Berorientasi Objek dan Menulis Kode dengan Prinsip sesuai pedoman dalam Membuat Chat Real Time berbasis Web untuk menjadi Desainer Website 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 Mengimplementasikan Pemrograman terstruktur Berorientasi Objek dan Menulis Kode dengan Prinsip sesuai pedoman dalam Membuat Chat Real Time berbasis Web untuk menjadi Desainer Website siswa:

1. Mampu Mengidentifikasi 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. Mampu mengidentifikasi 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. Mampu menentuka 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. Mampu Menampilkan Blog dari API JSON Placeholder ( 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. Mampu 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. Mampu 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 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 Mengimplementasikan Pemrograman terstruktur Berorientasi Objek dan Menulis Kode dengan Prinsip sesuai Pedoman dalam Membuat Chat Real Time berbasis Web untuk menjadi Desainer Website 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

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 Mengimplementasikan pemrograman terstruktur berorientsi objek dan menulis kode dengan prinsip sesuai guidlanie dalam membuat chat real time berbasis web untuk menjadi desainer website, Peserta Mampu mendesain sebuah website dengan menggunakan Vue Js   

Tujuan Khusus :
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

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, 06 MENIT, 26 DETIK

F. KAPASITAS JENIS DAN PELATIHAN

Tidak Terbatas

G. METODE AJAR/LATIH DAN EVALUASI PESERTA

Metode Ajar yang digunakan dalam pelatihan ini yaitu Hybrid

H. DATA INSTRUKTUR DAN RIWAYAT PROFESI

RUDIANTO

Profil Tenaga Pelatih:

Lahir di Serang pada tanggal 18 September 1990, 31 thn, Rudi menempuh pendidikan Strata 1 di STMIK Indonesia Fakultas Sistem Informasi. Memiliki pengalaman lebih dari 5 tahun dibidang Programming dan Digital Marketing search engine optimization ( SEO ) dan juga Search Engine Marketing ( SEM) dan juga memilliki pengalaman mengajar lebih dari 3 (Tiga) tahun di bidang Desain Grafis, Pembuatan Website, Digital Marketing Seperti cara beriklan di Facebook, di Google, Twitter, Instagram, Cara beriklan di Youtube dan juga programing seperti Vue Js dan JavaScript, sebagai instruktur dan narasumber di berbagai kementerian dan perusahaan swasta seperti Telkomsel, Kominfo, Kemendikbud, LIPI, BNI dll

 I. JENIS/KLASIFIKASI SERTIFIKAT

Certificate of completion

J. MEKANISME EVALUASI

Mekanisme Evaluasi pada program pelatihan ini yaitu :

1. Soal quiz

2. Soal-soal Post Test

3. dan Penugasan

 


Hasil yang didapat dari kursus ini

Di Materi ini kamu akan mempelajari:

1. Introduction

  • Introduction Vue js
  • Instalasi Vue JS
  • Pengenalan Method Pada Vue JS
  • Pengenalan Event Object
  • Pengenalan Data Binding
  • Keyboard Event
  • Data Dua Arah Dengan Binding
  • Looping dengan V-for pada Vue JS
  • Vue CLI
2. Instalasi Vue CLI

  • Pengenalan File dan Folder Yang Ada Di Dalam Project Vue CLI
  • Data Function pada Vue JS
  • Navbar pada Vue JS
  • Pengertian Scoped
  • Pengenalan Passing Data dengan Props
  • Event Pada Vue JS
  • Pengenalan Hook pada Vue JS
  • Menampilkan Blog dari API JSON Placeholder
  • Filter Data Part 1 Pada Vue JS
  • Membuat Filter Pencarian Dengan Vue JS
3. Vue Router
  • Instalasi Vue Router
  • Vue Router Navigation
  • Vue Router Parameter

4. Vue Project 1
  • Instalasi Vue JS Project
  • Instalasi CSS Materialsis dengan Vue JS
  • Komponen Navbar pada Vue JS
  • Show Content pada Vue JS
  • Delete Data Lokal Dengan Vue JS
  • Buat Databse di Firebase
  • Konfigurasi Firebase Dengan Vue JS
  • Show Data Dari Firebase
  • Delete Data Dari Firebase
  • Membuat Form Add Data Kursus
  • Input Data
  • Insert Data ke Firebase
  • Edit Data
  • Update Data pada Vue JS
  • Upload Project ke Firebase
  • Vue Project Chat Real Time
5. Instalasi Project 2 : Aplikasi Chat
  • Membuat Form Input Name Chat
  • Route Chat Vue
  • Route Vue JS Validasi
  • Form Chatting Room
  • Input Chat Part Pertama
  • Input Chat ke Firebase
  • Show Chat
  • Change Date dan Time Chat
  • Scroling Chat pada Vue JS

6. Vue Chat and Show Location

  • Instalasi Project 3 : Show Location
  • Menambahkan Navbar
  • Map
  • Show Map pada Vue JS
  • Membuat Form Registrasi
  • VIF Form Input
  • Insert Data ke Firebase
  • Navbar Router
  • Logout Part
  • Form Login pada Vue
  • Action Login Submit pada Vue
  • Show Location
  • Update Location User
  • Validasi Session Login
  • Show Session User
  • Show Data Location
  • Show User Profile
  • Buat Koleksi Data Chat Real Time
  • Insert Comment
  • Show Chatting
  • Styling Comment
  • Style Scroling Chat
  • Uploading Webiste


Curriculum

    • Introduction Vue js
    • 06:28
    • Instalasi Vue JS
    • 10:56
    • Pengenalan Method Pada Vue JS
    • 04:21
    • Pengenalan Event Object
    • 09:37
    • Pengenalan Data Binding
    • 09:37
    • Keyboard Event
    • 06:08
    • Data Dua Arah Dengan Binding
    • 02:08
    • Looping dengan V-for pada Vue JS
    • 11:41
    • Instalasi Vue CLI
    • 08:14
    • Pengenalan File dan Folder Yang Ada Di Dalam Project Vue CLI
    • 04:26
    • Data Function pada Vue JS
    • 05:20
    • Navbar pada Vue JS
    • 10:01
    • Pengertian Scoped
    • 03:18
    • Pengenalan Passing Data dengan Props
    • 17:06
    • Event Pada Vue JS
    • 09:02
    • Pengenalan Hook pada Vue JS
    • 12:51
    • Menampilkan Blog dari API JSON Placeholder
    • 14:32
    • Filter Data Part 1 Pada Vue JS
    • 04:45
    • Membuat Filter Pencarian Dengan Vue JS
    • 07:14
    • Instalasi Vue Router
    • 15:26
    • Vue Router Navigation
    • 05:08
    • Vue Router Parameter
    • 05:41
    • Instalasi Vue JS Project
    • 08:15
    • Instalasi CSS Materialsis dengan Vue JS
    • 03:16
    • Komponen Navbar pada Vue JS
    • 08:59
    • Show Content pada Vue JS
    • 15:24
    • Delete Data Lokal Dengan Vue JS
    • 07:25
    • Buat Databse di Firebase
    • 12:20
    • Konfigurasi Firebase Dengan Vue JS
    • 07:42
    • Show Data Dari Firebase
    • 13:03
    • Delete Data Dari Firebase
    • 06:17
    • Membuat Form Add Data Kursus
    • 14:19
    • Input Data Part Satu
    • 08:46
    • Form Input Data Part Dua
    • 11:34
    • Input Data Part Tiga
    • 04:22
    • Insert Data ke Firebase
    • 10:06
    • Insert Data ke Firebase Part Dua
    • 06:01
    • Edit Data Part Satu
    • 19:38
    • Edit Data Part Dua
    • 07:08
    • Edit Data Part Tiga
    • 08:24
    • Update Data pada Vue JS
    • 04:33
    • Upload Project ke Firebase
    • 12:10
    • Instalasi Project 2 : Aplikasi Chat
    • 13:31
    • Membuat Form Input Name Chat
    • 14:58
    • Route Chat Vue
    • 11:28
    • Route Vue JS Validasi
    • 06:48
    • Form Chatting Room
    • 07:37
    • Input Chat Part Pertama
    • 10:31
    • Input Chat ke Firebase
    • 10:45
    • Show Chat
    • 11:49
    • Change Date dan Time Chat
    • 04:51
    • Scroling Chat pada Vue JS
    • 04:19
    • Instalasi Project 3 : Show Location
    • 09:33
    • Menambahkan Navbar
    • 09:08
    • Map Part Satu
    • 04:36
    • Map Part Dua
    • 05:31
    • Show Map pada Vue JS
    • 10:28
    • Membuat Form Registrasi
    • 15:16
    • VIF Form Input Part Satu
    • 04:00
    • VIF Part Dua
    • 08:27
    • VIF Part Tiga
    • 05:17
    • Insert Data ke Firebase
    • 05:50
    • Navbar Router
    • 06:15
    • Logout Part Satu
    • 05:58
    • Logout Part Dua
    • 04:36
    • Form Login pada Vue
    • 11:09
    • Action Login Submit pada Vue
    • 10:36
    • Show Location
    • 05:40
    • Update Location User
    • 11:12
    • Validasi Session Login
    • 06:52
    • Show Session User
    • 05:47
    • Show Data Location
    • 06:02
    • Show User Profile
    • 12:00
    • Buat Koleksi Data Chat Real Time
    • 02:38
    • Insert Comment Part Satu
    • 07:20
    • Insert Comment Part Dua
    • 07:52
    • Show Chatting
    • 12:30
    • Styling Comment
    • 06:46
    • Style Scroling Chat
    • 04:11
    • Uploading Webiste
    • 05:34

Atau Tambahkan Ke

Includes:
  • Materi Up to Date
  • Sertifikat Resmi
  • Instruktur selalu Online
  • Tersedia tampilan mobile

Metode Pembayaran bisa dilakukan dengan cara :

  1. Transfer ATM
  2. Mobile Banking
  3. Internet Banking
  4. SMS Banking