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 Berorientasi Objek,Menggunakan Library Atau Komponen Pre Existing Dalam Pembuatan Website e Commerce Sebagai Desainer Web

Rp. 499.000

Deskripsi pelatihan

Dengan mengikuti pelatihan ini anda akan Menjadi Seorang Desainer Website dengan React Js.

Melalui pelatihan ini, untuk menjadi seorang desainer website peserta akan belajar bagaimana membuat rancangan layout front end sebuah website dan juga membuat pustaka/library javascript yang bersifat open source untuk membangun User Interface.

Peserta akan diajarkan cara membuat website e-commerce yang berkaitan dengan tampilan dan logika di sekitarnya. Hal ini sesuai dengan kegunaan react js dimana peserta bisa membangun aplikasi skala besar dengan data yang berubah dan terus berubah dari waktu ke waktu.


Menurut data dari Indonesia’s Critical Occupations List 2018 (http://gg.gg/v05jo ).

Di era digital seperti sekarang ini kebutuhan akan media website semakin tinggi. Di Indonesia, tenaga profesional seperti desainer website untuk menduduki level manajerial masih sangat langka untuk tenaga IT yang terampil. Dibutuhkan untuk mendukung investasi besar-besaran di bidang e-commerce, apalagi Indonesia sekarang ini ada di pusaran digitalisasi. Akibatnya, menjadi peluang jika peserta ingin menekuni profesi ini.

Di pelatihan ini peserta akan memahami pemrograman react JS, sehingga peserta nantinya dapat membuat portal berita menggunakan React JS.

Pelatihan ini dibuat dengan menggunakan Standar Kompetensi Kerja Nasional Indonesia ( SKKNI ) Nomor 282 Tahun 2016 – Pemrograman

Sesuai dengan kebutuhan industri, Kompetensi yang akan dipelajari pada program pelatihan ini, yaitu :
1.Kompeten Melakukan Identifikasi Library, Komponen atau Framework yang Diperlukan
2 Kompeten Menggunakan Struktur Data
3.Kompeten Melakukan Instalasi Software Tools Pemrograman
4.Kompeten Menerapkan Metode dan Praktik Penggunaan Kembali (Reusable) Subrutin-Subrutin
5. Kompeten Menulis Kode dengan Prinsip Sesuai panduan dan Best Practices
6.Kompeten Mengimplementasikan Pemrograman Terstruktur
7.Kompeten Mengimplementasikan Pemrograman Berorientasi Objek
8.Kompeten Menerapkan Perintah Eksekusi Bahasa Pemrograman Berbasis Teks, Grafik, dan Multimedia
9.Kompeten Menggunakan Library atau Komponen Pre Existing
10.Kompeten Membuat Dokumen Kode Program

B. KOMPETENSI

Aspek Kompetensi: Pengetahuan (Knowledge) :

Dengan mempelajari materi Mengimplementasikan pemrograman terstruktur berorientasi objek,menggunakan library atau komponen pre existing dalam pembuatan website e commerce sebagai desainer web peserta :
1. Memahami cara melakukan installasi component (Aspek ini dapat di lihat di modul 2 tentang Install Component menit 00.00 - 08:07)
2. Memahami cara menambah gaya /style (Aspek ini dapat di lihat di modul 3 tentang Adding Style menit 00.00 - 08:55)
3. memahami cara list produk, mebuat detail produk, membuat modal (Aspek ini dapat di lihat di modul 3 tentang ProductList (Context) Bagian A sampai Bagian C menit 00.00 - 17.00)
4. Memahami cara installasi react js (Aspek ini dapat di lihat di modul 4 tentang Instalasi React Js Bagian A sampai Bagian B menit 00.00 - 12.00)
5. Memahami cara membuat keranjang belanja (Aspek ini dapat di lihat di modul 4 tentang Membuat Update Keranjang Belanja Bagian A dan Bagian B menit 00.00 - 11.00)
6. Memahami cara menampilkan data dari API (Aspek ini dapat di lihat di modul 4 tentang Menampilkan Data dari API Json Placeholder Bagian A dan Bagian B menit 00.00 - 15.00)
7. Memahami cara mengimplementasi penyimpanan local (Aspek ini dapat di lihat di modul 5 tentang implementasi Local storage in react js part 1 Bagian A dan Bagian B menit 00.00 -13.00)

 

Aspek Kompetensi: Keterampilan (Skill) :

Dengan mempelajari materi Mengimplementasikan pemrograman terstruktur berorientasi objek,menggunakan library atau komponen pre existing dalam pembuatan website e commerce sebagai desainer web, peserta :

1.Mampu installasi component (Aspek ini dapat di lihat di modul 2 tentang preparation pada video Install Component menit 00.00 - 08.07)


2.Mampu menambah gaya /style (Aspek ini dapat di lihat di modul 3 tentang front end ecommerce pada video Adding Style menit 00.00 - 08.00)

3.Mampu membuat list produk, mebuat detail produk, membuat modal (Aspek ini dapat di lihat di modul 3 tentang 3 tentang front end ecommerce pada video ProductList (Context) Bagian A sampai Bagian C menit 00.00 - 17.00)


4.Mampu installasi react js (Aspek ini dapat di lihat di modul 4 tentang CRUD pada react JS pada video berjudul Instalasi React Js Bagian A sampai Bagian B menit 00.00 - 12.00)

5.Mampu membuat keranjang belanja (Aspek ini dapat di lihat di modul 4 tentang tentang CRUD pada react JS pada video berjudul Membuat Update Keranjang Belanja Bagian A dan Bagian B menit 00.00 - 11.00)


6.Mampu menampilkan data dari API (Aspek ini dapat di lihat di modul 4 tentang tentang CRUD pada react JS pada video berjudul Menampilkan Data dari API Json Placeholder Bagian A dan Bagian B menit 00.00 - 15.00)


7. Mampu mengimplementasi penyimpanan local (Aspek ini dapat di lihat di modul 5 tentang Redux pada video berjudul implementasi Local storage in react js part 1 Bagian A dan Bagian B menit 00.00 -13.00)

Aspek Kompetensi: Sikap (Attitude) :

Dengan mempelajari materi Mengimplementasikan pemrograman terstruktur berorientasi objek,menggunakan library atau komponen pre existing dalam pembuatan website e commerce sebagai desainer web, peserta :

1.Teliti dalam menambah gaya /style (Aspek ini dapat di lihat di modul 3 tentang front end ecommerce pada video Adding Style menit 00.00 - 08.00)


2.Cermat membuat list produk, mebuat detail produk, membuat modal (Aspek ini dapat di lihat di modul 3 tentang 3 tentang front end ecommerce pada video ProductList (Context) Bagian A sampai Bagian C menit 00.00 - 17.00)

3.Bertanggung jawab membuat keranjang belanja (Aspek ini dapat di lihat di modul 4 tentang tentang CRUD pada react JS pada video berjudul Membuat Update Keranjang Belanja Bagian A dan Bagian B menit 00.00 - 11.00)

4.teliti dan selalu mengecek tampilan data dari API (Aspek ini dapat di lihat di modul 4 tentang tentang CRUD pada react JS pada video berjudul Menampilkan Data dari API Json Placeholder Bagian A dan Bagian B menit 00.00 - 15.00)

C. SASARAN PESERTA

Peserta pelatihan yang dapat mengikuti pelatihan ini yaitu :
1) Minimal lulusan SMA/SMK sederajat
2) Memiliki minimal laptop/komputer
3)Peserta minimal memiiki pengetahuan dasar pemrograman

D. TUJUAN PELATIHAN

Tujuan Umum :

Di akhir pelatihan, peserta kompeten membuat tampilan front end website menggunakan React JS sesuai dengan prinsip-prinsip desain

Tujuan Khusus :

Program pelatihan Mengimplementasikan pemrograman terstruktur berorientasi objek,menggunakan library atau komponen pre existing dalam pembuatan website e commerce sebagai desainer web , memiliki tujuan sebagai berikut :
1. Kompeten melakukan installasi komponen
2. Kompeten membuat front end ecommerce
3. Kompeten melakukan installasi react js
4. Kompeten membuat tampilan produk dan input cart
5. Kompeten membuat update keranjang belanja
7. Kompeten Membuat tampilan blogs
8. Kompeten menampilkan data dari API
9. Kompeten mengimplementasikan penyimpanan local

E. SILABUS DAN DURASI

1. Installation 06:47
2. Install Component 08:07
3. Adding Style 08:55
4. React Fragment BAGIAN A 06.10
5. React Fragment BAGIAN B 06.10
6. React Fragment BAGIAN C 07:15
7. Styled Component BAGIAN A 06:10
8. Styled Component BAGIAN B 03.33
9. ProductList (Context) BAGIAN A 06.10
10. ProductList (Context) BAGIAN B 06.10
11. ProductList (Context) BAGIAN C 05.29
12. Product Style bagian a 08:10
13. Product Style bagian B 08:10
14. Product Style BAGIAN C 06:43
15. Detail Product BAGIAN A 08.10
16. Detail Product BAGIAN B 08.10
17. Detail Product BAGIAN C 05.28
18. Detail Product Part 2 BAGIAN A 08.10
19. Detail Product Part 2 BAGIAN B 06.43
20.Creating Modal BAGIAN A 06.10
21. Creating Modal BAGIAN B 05.28
22. Cart BAGIAN A 08.10
23.Cart BAGIAN B 07.46
24.Cart Part 2 BAGIAN A 08.10
25.Cart Part 2 BAGIAN B 08.10
26.Cart Part 2 BAGIAN C 04.11
27. Cart Part 3 (Clear Cart And Remove Item) BAGIAN A 06.01
28. Cart Part 3 (Clear Cart And Remove Item) BAGINA B 06.07
29. Cart Part 4 (Decrease Increase Qty) And Default Page 09:57
30. Git And Netlify 08:45
31 Pengenalan Web 05:45
32. Instalasi React Js BAGIAN A 06.10
33. Instalasi React Js BAGIAN B 06.43
34. Pengenalan Statefull dan Stateless Component BAGIAN A 06.10
35. Pengenalan Statefull dan Stateless Component BAGIAN B 04.45
36. Pengenalan Props pada React Js BAGIAN A 06.10
37. Pengenalan Props pada React Js BAGIAN B12.10
38. Pengenalan Props pada React Js BAGIAN C 06.31
39. Pengenalan Fitur Props di React Js BAGIAN A 07.10
40. Pengenalan Fitur Props di React Js BAGIAN B 08.29
41. Membuat Tampilan Product dan Input Cart BAGIAN A 06.10
42. Membuat Tampilan Product dan Input Cart BAGIAN B 12.10
43. Membuat Tampilan Product dan Input Cart BAGIAN C 04.31
44. Styling Product di React Js BAGIAN A 07.10
45. Styling Product di React Js BAGIAN B 08.47
46. Membuat Update Keranjang Belanja BAGIAN A 06.10
47. Membuat Update Keranjang Belanja BAGIAN B 05.05
48. Membuat Tampilan Blogs BAGIAN A 07.10
49. Membuat Tampilan Blogs BAGIAN B 09.45
50. Mengambil API dari JSONplaceholder BAGIAN A 06.10
51. Mengambil API dari JSONplaceholder BAGIAN B 04.46
52. Menampilkan Data dari API Json Placeholder BAGIAN A 07.10
53. Menampilkan Data dari API Json Placeholder BAGIAN B 08.25
54.Delete Data Part 1 BAGIAN A 07.10
55. Delete Data Part 1 BAGIAN B 08.51
56. Delete Data Part 2 06:42
57. Membuat Form Tambah Data di React Js BAGIAN A 06.10
58. Membuat Form Tambah Data di React Js BAGIAN B07.26
59. Membuat Action Input Blogs Part 1 BAGIAN A 07.10
60. Membuat Action Input Blogs Part 1 BAGIAN B 08.01
61. Membuat Action Input Data Ke db.json Part 2 BAGIAN A 09.10
62. Membuat Action Input Data Ke db.json Part 2 BAGIAN B 08.09
63. Membuat Update Data Blog Part 1 BAGIAN A 06.10
64. Membuat Update Data Blog Part 1 BAGIAN B04.29
65. Update Data pada React Js Part 2 BAGIAN A 07.10
66. Update Data pada React Js Part 2 BAGIAN B 07.42
67. Instalasi React Router Pada React Js 05:57
68. Implementasi React Router pada React Js BAGIAN A 07.10
69. Implementasi React Router pada React Js BAGIAN B 08.42
70. Instalasi Local Storage BAGIAN A 06.10
71. Instalasi Local Storage BAGIAN B 08.04
72. implementasi Local storage in react js part 1 BAGIAN A 06.10
73. implementasi Local storage in react js part 1 BAGIAN B 07.3
74. implementasi Local Storage in react js part 2 BAGIAN A 06.10
75. implementasi Local Storage in react js part 2 BAGIAN B 08.35
76. implementasi Local Storage in react js part 3 06:41
77. implementasi Local storage form input data buku BAGIAN A 06.10
78. implementasi Local storage form input data buku BAGIAN B 04.50
79. implementasi local storage insert data BAGIAN A 06.10
80. implementasi local storage insert data BAGIAN B 05.18
81. implementasi reducer with local storage BAGIAN A 06.10
82. implementasi reducer with local storage BAGIAN B 07.32
83. implementasi localstorage bagian akhir 05:44

TOTAL DURASI : 9 JAM, 29 MENIT, 10 DETIK

F. KAPASITAS JENIS/KELAS PELATIHAN

Tidak terbatas

 

G. METODE AJAR/LATIH DAN EVALUASI PESERTA

Metode Ajar yang digunakan dalam pelatihan ini yaitu Hybird.

 

H. DATA INSTRUKTUR DAN RIWAYAT PROFESI

ENCEP SURYANA, S.KOM

Profile Tenaga Pelatih :

Lahir di Indramayu pada tanggal 27 September 1995, 26 tahun, Encep menempuh pendidikan Strata 1 di Universitas Komputer Indonesia Bandung, Fakultas Teknik Informatika. Memiliki pengalaman lebih dari 4 tahun dibidang Desain Grafis, Programming dan Digital Marketing search engine optimization ( SEO ) dan juga Search Engine Marketing ( SEM) dan juga memilliki pengalaman mengajar lebih dari 3 (Tiga) tahun dalam Desain Grafis, Programming dan Digital Marketing Seperti Membuat Banner, Portofolio, Logo dan lainnya menggunakan Adobe Illustrator dan Adobe Photoshop serta cara beriklan di Facebook, di Google, Twitter, Instagram serta Cara beriklan di Youtube dan juga programming seperti React js, Vue Js, React Native dan Node Js, sebagai instruktur di Babastudio.

 

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. Bab 1 : Perparation

  • Installation
  • Install Component
2. Bab 2 : Front End E-Commerce
  • Adding Style
  • React Fragment
  • Styled Component
  • ProductList (Context)
  • Product Style
  • Detail Product
  • Detail Product Part 2
  • Creating Modal
  • Cart
  • Cart Part 2
  • Cart Part 3 (Clear Cart And Remove Item)
  • Cart Part 4 (Decrease Increase Qty) And Default Page
  • Git And Netlify

Curriculum

    • Installation
    • 06:47
    • Install Component
    • 08:07
    • Adding Style
    • 08:55
    • React Fragment
    • 19:15
    • Styled Component
    • 10:33
    • ProductList (Context)
    • 17:29
    • Product Style
    • 22:43
    • Detail Product
    • 21:28
    • Detail Product Part 2
    • 14:43
    • Creating Modal
    • 11:28
    • Cart
    • 15:46
    • Cart Part 2
    • 20:11
    • Cart Part 3 (Clear Cart And Remove Item)
    • 12:07
    • Cart Part 4 (Decrease Increase Qty) And Default Page
    • 09:57
    • Git And Netlify
    • 08:45
    • Pengenalan Web
    • 05:45
    • Instalasi React Js
    • 12:43
    • Pengenalan Statefull dan Stateplus Componen
    • 10:45
    • Pengenalan Props pada React Js
    • 18:31
    • Pengenalan Fitur Props di React Js
    • 15:29
    • Membuat Tampilan Product dan Input Cart
    • 16:31
    • Styling Product di React Js
    • 15:47
    • Membuat Update Keranjang Belanja
    • 11:05
    • Membuat Tampilan Blogs
    • 16:45
    • Mengampil API dari JSONplaceholder
    • 10:46
    • Menampilkan Data dari API Json Placeholder
    • 16:25
    • Delete Data Part Satu
    • 15:51
    • Delete Data Part Dua
    • 06:42
    • Membuat Form Tambah Data di React Js
    • 13:26
    • Membuat Action Input Blogs Part Satu
    • 15:01
    • Membuat Action Input Data Ke db.json Part Dua
    • 17:09
    • Membuat Update Data Blog Part Satu
    • 10:29
    • Update Data pada React Js Part Dua
    • 14:42
    • Instalasi React Router Pada React Js
    • 05:57
    • Implementasi React Router pada React Js
    • 16:42
    • Instalasi Local Storage
    • 00:14:04
    • implementasi Local storage in react js part 1
    • 00:13:39
    • implementasi Local Storage in react js part 2
    • 00:14:35
    • implementasi Local Storage in react js part 3
    • 00:06:41
    • implementasi Local storage form input data buku
    • 00:10:50
    • implementasi local storage insert data
    • 00:11:18
    • implementasi reducer with local storage
    • 00:13:32
    • implementasi localstorage bagian akhir
    • 00:05:44

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