CCSE-Wednesday-15 July

Halo Refonir, selamat malam.

Bagaimana kabarnya di malam hari ini?

Kalau teman-teman udah semangat banget

nih buat lanjutin pembelajarannya di

coding Cam malam hari ini, boleh kasih

emoji api-apinya dong di kolom chat nih,

Teman-teman. Aku pengin tahu semangatnya

Teman-teman semua. Kalau teman-teman

mungkin udah enggak sabar gitu ya buat

belajar di malam hari ini, boleh nih

share emoji api-apinya nih teman-teman

di kolom chat. Kalau misalnya hari ini

aku mungkin bisa join gitu ya di kolom

chat. Aku habis ini mau kirim ee lima

emoji api sih. Jadi aku pengin

menggambarkan bahwa aku tuh lagi

semangat banget buat ketemu sama

teman-teman semua. Hari ini kita belajar

bareng, kita coba untuk kulik ilmu dari

instructure kita di malam hari ini

supaya nanti kita bisa menjadi seorang

software engineer yang profesional nih

nantinya. Jadi ini mungkin jadi awal

mulainya teman-teman gitu ya untuk

belajar. So, semoga bisa diserap semua

ilmunya sama teman-teman di sini. Nah,

sebelumnya aku mau kenalan lagi nih,

Teman-teman. Jadi, perkenalkan namaku

Waca. Di sini aku akan menemani semuanya

untuk belajar bersama selama beberapa

waktu ke depan. So, be with me dan

semoga sekali lagi ya ilmunya bisa

diserap sama teman-teman semuanya.

Nah, malam hari ini kita masuk ke dalam

sebuah materi di Coding Camp Software

Engineering. Kita akan belajar tentang

JavaScript. Siapa di sini yang sudah

pernah belajar JavaScript? udah kenal

sama JavaScript? Boleh dong kasih tahu

di dalam kolom chat bisa bilang aku gitu

ya biar aku tahu kira-kira teman-teman

sudah familiar belum sih sama Java

Script. Tapi kalau misalnya yang ada

yang belum familiar gitu ya jangan

khawatir enggak masalah. Ya, justru di

sini kita bisa belajar dari awal lagi

dan kita coba untuk kulik sebenarnya

JavaScript ini apa dan hasilnya seperti

apa nih kalau untuk implementasi di

software engineering.

Nah, highlight di sesi malam hari ini

ada beberapa hal ya teman-teman.

Tentunya ada lecture session. Kita akan

membahas banyak hal di hari ini. Lalu

ada assignment information. Ini adalah

hal yang penting supaya nanti

teman-teman selain bisa mendapatkan

e-certificate, tapi teman-teman juga

bisa mengerjakan sebuah project nih

nantinya supaya punya mini portfolio

gitu ya. Setelah selesai belajar

recording camp dan terakhir akan ada Q&S

session. Nah, kalau misalnya teman-teman

punya pertanyaan, teman-teman bisa

tuliskan di dalam platform pertanyaan

yang disediakan oleh tim Revu nih. Nah,

nanti di sana tim Revu akan memilih

pertanyaan-pertanyaan

yang ee mungkin paling banyak ditanyakan

gitu ya sama teman-teman dan kita akan

rangkum sedemikian rupa sehingga

nantinya menjawab pertanyaan dari

teman-teman semua atau ee hal-hal yang

ingin diketahui sama teman-teman

semuanya melalui kolom chat atau melalui

platform pertanyaan yang sudah

disediakan. Nah, jadi mohon maaf kalau

misalnya tidak semua pertanyaan yang

bisa kita jawab karena ada keterbatasan

waktu dan lain-lain ya, Teman-teman.

Semoga nanti Teman-teman pertanyaannya

bisa ee terbantu nih terjawab gitu ya

melalui pertanyaan yang sudah dipilih.

Nah, finally kita coba langsung masuk ya

ke dalam lecture JavaScript.

Malam hari ini kita akan ditemani oleh

Kak Fandi Putra Muhammad. Kak Fandi

merupakan software engineer di sebuah

company Digital Wallet Company yang

pernah juga bekerja di Tokopedia dan

juga pernah bekerja di Bance. So,

without any f do langsung aja aku undang

Kak Fandi untuk menyampaikan materinya

di malam hari ini. Silakan Kak Fandi.

Jadi di hari ini, di malam ini ee kita

bakal lanjut ke materi decoding cam.

kita mulai akan masuk ke materi

JavaScript.

Tadi juga udah sempat dibrief ya

beberapa materi yang akan kita bahas

hari ini. Jadi bisa dipersiapkan dulu

dari teman-teman eh device-nya mungkin

minuman dan makanan juga. Jadi bisa

ngikutin kelas kita mungkin sekitar 1

sampai 1 seteng jam ke depan dengan

fokus ya gitu. [berdehem]

Oke sebelumnya kenalan dulu tadi juga

sudah sempat dikenalin ya. Eh, namaku

Fandi, bisa dipanggil Fandi aja. Terus

sekarang lagi bekerja sebagai senior

software engineer backend di salah satu

digital payment company. Terus juga

adalah eh software engineer di X

Tokopedia sama X dan Dance. Ya, selain

itu aku juga ada pengalaman sedikit di

ee Mobile dev sama. Nah, buat

teman-teman yang tertarik untuk connect

langsung di Linkin bisa ngobrol-ngobrol,

sharing-sharing. Semisal nanti ada

pertanyaan-pertanyaan yang mungkin

enggak kejawab saat sesi, kita bisa

obrolin nih di Linkin. Gitu.

Nah, ini eh notes-notes ya terkait

during session kita kali ini. Eh,

teman-teman bisa take notes, bisa

dicatat, terus juga hindari distraction.

handphone atau mungkin lagi nonton. Nah,

itu bisa diop dulu biar kita bisa fokus

karena materinya ini cukup padat ya,

waktunya cukup singkat, materinya cukup

banyak. Jadi diharapkan kalau kita bisa

fokus, kita bisa nangkap nih setidanya

inti-inti apa aja sih yang akan kita

pelajari. Terus juga siapin minum sama

juga siapin device-nya karena kita juga

bakal ada simulasi-simulasi yang mungkin

entar teman-teman bisa juga coba nih

biar teman-teman bisa lebih paham juga.

Nah, ini learning objektif yang sudah

dibahas juga tadi ya. Ada beberapa

materi kita bakal langsung aja nih ya.

[berdehem]

Oke. Nah, sekarang mungkin sampai hari

ke berapa, hari ketiga dari coding cam

ini ya. Mungkin teman-teman udah belajar

beberapa hal dari HTML, mungkin dari

website gitu ya. Teman-teman juga sudah

belajar ee CSS mungkin. Jadi teman-teman

sudah bisa nih bikin website gitu ya.

Tapi website yang teman-teman bikin nih

mungkin sekarang masih berbentuk gambar

aja nih, statis aja nih. Dia enggak

gerak, enggak ada apa-apanya. Jadi kayak

ya website tapi kayak mirip-mirip gambar

aja nih, enggak ada bedanya gitu.

Jadi gimana sih cara bikin supaya

website ini terasa lebih hidup gitu ya.

Jadi dia enggak cuma gambar yang enggak

bergerak, tapi ada sesuatu yang bisa

bikin lebih hidup.

Nah, itu kuncinya adalah dengan add

interactivity ya. Jadi website yang

teman-teman bikin itu mungkin udah cakep

nih tampilannya udah keren, sudah bagus

gitu. Tapi supaya dia bisa dibilang

website seutuhnya gitu ya, supaya lebih

terasa hidup, kita akan add atau kita

akan tambah interaktivitas di

website-nya gitu. Interaktivitas itu

apa? Jadi si user atau orang-orang yang

buka website teman-teman itu bisa

berinteraksi dengan website-nya.

Nah, itu caranya dengan pakai JavaScript

gitu. yaitu materi yang akan kita

pelajari hari ini.

Jadi, kita akan langsung masuk ke JS

introduction, ya.

Nah, ini mungkin dari materi-materi yang

sudah teman-teman pelajari juga selama

di coding CAM. Ada HTML, ada CSS, sama

ada JS. Jadi, ada HTML, ada CSS, ada JS.

Apa sih itu gimana sih perannya antar

antar komponen ini? Ya, nah jadi kalau

di analogikan HTML itu kayak tulang,

kayak rusuk, kayak rangka gitu. Jadi

rangka dari sebuah website itu dia HTML

gitu. Ini yang naruh oh di sini ada

gambar, di sini ada tombol, di sini ada

tulisan, di sini ada apaagi. Nah, itu

HTML tuh yang naruh gitu. Nah, lalu ada

CSS. CSS itu yang styling. Jadi dia

anggapannya sebagai kulit atau sebagai

styleennya, sebagai bajunya gitu. Udah

punya rangka, udah ada tulangnya nih.

Tinggal dibungkus nih. Oh, bentuknya

kayak gini. di sini pakai baju kayak

gini. Kalau di website tuh misalnya

tulisannya font-nya segini, warnanya

ini. Atau kalau misalnya ada button, ada

tombol, tombolnya seperti ini,

tulisannya kayak gini, bentuknya kayak

gini. Nah, yang memberi style itu adalah

CSS ya. Dan ini yang udah dipelajari

juga nih sama teman-teman.

Lalu yang akan kita pelajari ini yaitu

JS atau JavaScript. Nah, ini disebut

[berdehem] juga muscle atau brain. Jadi,

karena udah ada rangkanya, udah ada

kulitnya, dia nih yang ngatur supaya

bisa gerak gitu. Yang bisa bikin bisa

gerak kalau di tubuh kita apa? Yaitu

otak sama otot, ya. Jadi, otak mengirim

respon ke otot entar otot yang

menggerakkan badannya. Begitu juga

dengan JavaScript itu. Jadi, ketika

misalnya tombol ditekan bisa ngapain?

Ee kalau diklik bisa apa? Nah, itu

JavaScript tuh yang ngatur.

[berdehem]

Jadi secara singkat ya, JavaScript itu

adalah bahasa pemrograman yang bikin

website kita itu lebih hidup dan lebih

interaktif ya. Jadi dengan JavaScript

itu ada beberapa hal ini bisa kita

bikin. Bisa bikin tombol jadi kalau

diklik tombolnya jadi melakukan sesuatu

gitu atau bisa jadi ada message atau

alert ketika ngisi form gitu. Nah, ini

sering juga ya teman-teman. Misalnya

teman-teman lagi daftar suatu website

lagi ngisi data, terus misalnya ada data

yang enggak lengkap atau data yang

formatnya salah. dia akan menampilkan

alert atau message. Terus juga bisa

ganti warna, ganti tulisan dari sebuah

elemen tanpa harus ng-reload

website-nya.

Nah, juga bisa buat narikin dan nampilin

data nih dari server tanpa harus pindah

ke website lain. Nah, itu semua adalah

hal-hal yang bisa dilakukan oleh

JavaScript. Nih, itulah cara dia bikin

si website yang kita bikin ini jadi

lebih hidup gitu. [berdehem]

Contohnya apa nih yang relif? Nah, kalau

di e-commerce nih, e-commerce kesayangan

teman-teman ya, mungkin yang biasa-biasa

shopping, biasa pakai e yang oren-oren

atau yang hijau-hijau atau yang sekarang

ada video-videonya gitu ya. Nah, itu kan

bisa ada fitur-fitur yang kita sering

pakai ya tanpa kita sedari itu

sebenarnya diimplementasi dengan

menggunakan JavaScript gitu. Contohnya

apa? Oh, kalau kita ada barang yang kita

menarik, kita masukin keranjang gitu.

masukin keranjang kuning. Nah, kalau

masukin keranjang kuning, nah itu dia

salah satu contohnya tuh dari JavaScript

gitu. Terus [berdehem] misalnya nambahin

suatu barang ke

eh wishlist ya atau ke favorit kita

gitu. Atau juga bisa nih ada promo.

Kalau kita mau pakai promo ini bisa

enggak dipakai? Kalau dipakai harga

setelah promonya jadi berapa? Nah, itu

juga contoh dari JavaScript ya. Jadi dia

bisa ada interaktivitasnya nih. Kita

pilih ini jadi gimana, kita pilih ini

jadi gimana gitu.

Ada lagi misalnya nih bank or financial

application. Jadi misalnya kalau

teman-teman pakai aplikasi bank atau e

aplikasi investasi apapun yang terkait

finansial ya. Misalnya kalau kita

masukin nomor rekening, nah itu kita

bisa validasi itu format nomor

rekeningnya. Oh kalau nomor rekening itu

ya pasti nomor doang. Enggak boleh teks,

enggak boleh huruf. Itu dia memvalidasi.

Terus juga bisa ada tuh misalnya kalau

di bank aplikasi bank-bank teman-teman

pasti nyadar tuh bisa saldo itu di show

sama dihide ya bisa dilihatin bisa

enggak dilihatin gitu. Nah itu juga

pakai JavaScript tuh. Jadi ketika kita

ketika kita tekan suatu tombol saldonya

kelihatan atau ketika kita tekan lagi

saldonya jadi enggak kelihatan.

Nah atau juga bisa nih misal kita habis

ee nekan OTP request OTP. Nah, dia

langsung nampilin layar masukin OTP-nya.

Itu juga JavaScript ya.

Lalu juga ada beberapa hal lagi nih yang

bisa dilakukan oleh JavaScript sekali

selain untuk website. Jadi bisa bikin

mobile application. JavaScript juga bisa

nih bikin mobile application. Terus juga

bisa bikin browser based game. Jadi

kalau teman-teman dari dulu mungkin

pernah nih buka-buka website yang dia

enggak perlu konektivitas internet nih.

Jadi sekali diakses dia enggak kek nih.

Itu kan lumayan banyak ya dulu ya

main-main game yang simpel-simpel tapi

dia cuma di browser doang. Nah itu

rata-rata bisa dibikin pakai JavaScript

doang. Jadi sangat-sangat powerful ya

JavaScript ini ya. Bahkan bisa bikin

game. Terus juga bisa buat backend

development. Nah, backend development

ini apa? backend developmentnya entar

kita akan jelasin lebih lanjut. Cuma

intinya JavaScript ini sangat powerful

karena dia bisa ee handle hampir semua

proses yang ada di pengembangan sebuah

sistem gitu ya.

Nah, jadi kenapa sih kita butuh belajar

JavaScript? Jadi JavaScript ini ya kalau

teman-teman mau jadi web developer

sangat-sangat pasti teman-teman akan

menggunakan JavaScript ya. Jadi ini hal

yang wajiblah dipelajari, wajib

digunakan. Terus juga kalau teman-teman

mau bikin website ya, kalau website-nya

mau lebih engaging, mau user friendly

pasti akan ada JavaScript-nya. Terus

JavaScript juga tadi ya sudah dibilang

JavaScriptnya sangat powerful. Jadi

bukan cuma buat browser, bisa buat tadi

mobile application, bisa buat game, bisa

buat server, bisa buat banyak hal gitu.

Terus juga JavaScript ini juga banyak

nih dipakai oleh beberapa perusahaan

gitu. Mungkin eh e-commerce kayak

Tokopedia atau mungkin bank-bank digital

ke Genius, BCA Mobile, banyaklah hampir

semua aplikasi-aplikasi yang mungkin

kita gunakan sehari-hari itu ada

JavaScript-nya gitu. Jadi based on data

sekitar 76% itu developer pasti pakai

JavaScript ya. Ini data dari 2022 gitu.

Jadi hampir semua orang pakai

JavaScript. Jadi enggak ada salahnya

banget nih buat teman-teman belajar

JavaScript nih. Sepenting itu belajar

JavaScript itu enggak akan sia-sia kalau

teman-teman belajar ini.

Nah, ini contoh potongan kode JavaScript

ya. Nanti kita akan belajar lagi ee di

materi setelah ini nih. Kita akan

belajar lebih dalam lagi. Cuma ini

sekedar contoh aja nih seperti apa sih

kodenya JavaScript itu. Jadi kodenya

JavaScript itu sebenarnya cukup lumayan

gampang dibaca juga ya. Jadi secara

semantik, secara penulisan bahasa itu

dia masih banyak pakai bahasa Inggris.

Jadi ee cukup bisa dipahami nih kalau

kita ngerti bahasa Inggris tuh kita

masih bisa baca gitu. Nah, ini misalnya

dia kita punya nama Aziz, kita punya

umur, terus bisa ng-gre function-nya ya,

bisa ng-greade user. Nah, ini entar bisa

kita bedah nih lebih dalam apa sih

kode-kode ini apa sih maksudnya gitu ya.

Nah, sebelum itu kita juga mesti tahu

nih gimana sih caranya nulis kode

JavaScript di HTML gitu. Karena kan tadi

cas-nya banyak ya, JavaScriptnya bisa

dipakai buat mobile, bisa buat ini, bisa

buat itu, bisa buat game gitu. Nah,

kalau buat di HTML tuh gimana gitu?

Gimana sih cara dia bisa nyambung sama

si HTML atau sama si CSS yang sudah kita

bikin? Ini kita udah punya nih

website-nya tapi enggak bisa interaktif.

Nah, kita cuma pengin nambahin JS gimana

caranya gitu. Nah, ini ada beberapa cara

ya. Jadi ada embet. Embet ini berarti

JavaScript-nya langsung ada di HTML

file-nya.

Terus inline inline ini berarti

JavaScript-nya itu lebih dalam lagi ya

dia di HTML atributnya. Kalau

teman-teman sudah belajar HTML kan ada

atribut ya. Di HTML atributnya itu bisa

langsung ditulis tuh kode JavaScript-nya

terus juga ada eksternal. Jadi

JavaScript ini kodenya disimpan di file

yang berbeda dari HTML. Jadi cuma

dihubungin aja nih eh si HTML cuma tahu

bahwa dia ada file JavaScript gitu. Tapi

file JavaScript-nya kita tulis di file

yang berbeda gitu, kode-kode

JavaScript-nya.

Nah, ini kita akan go through nih satu

persatu. Jadi, kalau buat JavaScript eh

kita tuh pakai tek script ya di dalam

HTML. Jadi, contohnya tuh kayak di kiri

nih. Eh, teman-teman mungkin udah cukup

familiar juga nih karena sudah belajar

HTML juga ya. Jadi, di dalam tag-nya

head atau dalam tag-nya body ini kita

bisa taruh tag-nya script. Nah, di tag

script ini kita bisa kode nih, kita bisa

tulis kode JavaScript-nya. Jadi dia bisa

ditulis di dalam head atau di dalam body

gitu.

Ada lagi namanya inline. Nah, kalau tadi

kan bisa kita lihat balik ya. Kalau tadi

kan ada tag khusus ya, script baru di

situ kita tulis nih scriptnya apa. Nah,

kalau inline dia langsung nih ada elemen

HTML-nya, ada tag HTML-nya kita langsung

masukin kode JavaScript-nya apa.

Nah, ini kode JavaScript nih yang alert

Y ini kode JavaScript gitu ya.

Terus juga ada eksternal JavaScript.

Nah, apalagi nih eksternal JavaScript.

Jadi kalau eksternal JavaScript mirip

nih sama kayak yang internal tadi. Cuma

kalau ini kita enggak nulis nih di sini.

Kita cuma ngasih tahu si HTML bahwa file

JavaScript-nya itu ada di file ini.

Contohnya ya, script srcindex.js.

Berarti kita taruh kode JavaScript-nya

di file index.js. Jadi entar kita punya

satu file lagi nih namanya index.js. Di

situ kita taruh kode JavaScript kita.

Jadi kita enggak ee enggak banyak-banyak

nih nulis di HTML-nya. Nah, ini juga

lumayan umum dipakai. Kenapa? Karena

kalau nanti kodenya kita udah banyak,

udah bisa ribuan baris ya, apalagi

mungkin HTML-nya

kompleks nih, ada bagian ini, ada bagian

ini, gitu. Nah, itu supaya lebih

tertata, kita bisa bedain nih, oh kode

JavaScript di sini, kode CSS di sini,

kode HTML di sini. Nah, itu kita bisa

pakai ini. Jadi bisa dipisah, bisa

dibaca lebih gampang. Apalagi entar

kalau teman-teman kerjanya udah enggak

sendiri doang nih, kerja mungkin bareng

engineer-engineer yang lain, software

engineer yang lain gitu. Jadi ini lebih

gampang di-manage. Jadi makanya ini yang

cukup umum.

Nah, next kita sudah mulai nih masuk apa

sih yang ada di JavaScript ya. Jadi

JavaScript itu yang pertama dia namanya

variabel. Variabel. Variabel itu apa?

variabel itu adalah kontainer yang

dipakai untuk menyimpan sebuah data atau

value. Jadi ee istilahnya kalau kita

analogikan variabel itu adalah ya kita

punya kotak, kotak ini nyimpan data yang

kita mau gitu. Jadi data itu bisa apa

aja? Bisa banyak gitu. Bisa mungkin

berupa teks, bisa berupa angka, bisa

berupa kumpulan teks, kumpulan angka

gitu, bukan cuma satu ya. Nah, itu bisa

bermacam-macam tuh datanya. Karena kita

ketika main website, bikin-bikin website

ini, kita pasti akan mengolah banyak

data kan ya. Jadi ini yang dipakai buat

menyimpan suatu data gitu. Istilahnya

ini kotak ini kita punya kotak ini,

kotak ini, kotak ini. Nah, untuk bikin

variabel di JavaScript itu ada beberapa

keywords ya. Ada bisa pakai far, pakai

LED, sama pakai cons. Nah, kalau dilihat

di samping nih ada file message 1, LED

message 2, con message 3. Nah, setelah

dibikin itu bisa kita assign value

dengan pakai simbol sama dengan ya. Jadi

misalnya di sini message 1 = hello 1,

message 2 = hello 2, begitupun message 3

= hello 3.

Nah, lalu pertanyaannya apa nih?

Pertanyaannya adalah bedanya apa nih?

Ada far, ada LED, ada cons. Kapan kita

pakai far? Kapan kita pakai LED? Kapan

kita pakai cons? Gitu. Memang bedanya

apa gitu? Apa kita bisa pakai bebasnya

nih? Tergantung mood-nya ya. Ah,

mood-nya [berdehem] kayaknya hari ini

lagi enak pakai LED deh gitu. Jadi

masing-masing ini punya behavior, punya

sifat, punya perilaku yang berbeda ya.

Kayak [berdehem] cons paling gampang tuh

cons ya, paling beda. Kons itu ya

sebenarnya kepanjangan dari konstan ya.

Jadi kalau teman-teman belajar konstan,

belajar matematika, apa sih konstan?

Konstan itu ya sesuatu yang nilainya

tetap gitu, enggak akan berubah. Nah,

itu sama juga di JavaScript. Jadi kalau

teman-teman punya variabel cons,

[berdehem]

variabel cons ini sekali sudah diin

sebuah nilai, nilainya itu enggak bisa

dirubah nih. Jadi kalau dianalogikan

teman-teman punya kotak sudah dimasukin

data ke kotaknya enggak boleh

dikeluarin, enggak bisa diganti-ganti

data di kotaknya gitu. Dia enggak akan

berubah.

Ada lagi ada FAR, ada LED gitu. Nah, FAR

sama LED ini bedanya apa? Far sama LED

ini kalau dibedain sama cons dia bisa

berubah-rubah ya. Jadi, vari itu bisa

berubah, L itu bisa berubah, yang

membedakan itu scop eh variabelnya gitu

ya. Jadi kalau FAR itu scop-nya

[berdehem] lebih luas, kalau LED itu dia

lebih kecil. Maksudnya scop-nya lebih

luas, lebih kecil itu apa gitu? Scop-nya

lebih luas, lebih kecil itu jadi kalau

LED itu dia bisa spesifik di baris

kode-kodenya aja gitu. Jadi dia enggak

satu fungsi besar, dia enggak akan sama.

Nah, kalau lihat ini dia lebih kecil

nih, gitu. Nah, ini mungkin agak

membingungkan. Nanti teman-teman bisa

coba praktikin aja ya. Jadi kayak

coba-coba nih diubah-ubah datanya gimana

behavior-nya gitu.

[berdehem]

Nah, terus tadi kita sudah punya

variabel, kita juga punya tipe data.

Tipe data itu apa? Tipe data itu berarti

bentuk dari si variabelnya ya. Jadi

kayak misalnya FAR name = Abimanyu gitu,

FAR H = 25, FAR single = true gitu. Nah,

itu tipe datanya beda-beda tuh.

Kalau yang name itu bisa kita sebut

string ya. String itu apa? String itu

teks. Jadi ee apapun teks itu bisa

huruf, bisa angka, eh pokoknya semua

yang bersifat teks itu namanya string.

Terus ada age, ada number. Jadi number

itu bisa number angka biasa, bisa angka

desimal gitu. Itu dia number sama ada

bulion bisa true atau false. Jadi

buannya itu benar atau salah, satu atau

nol. Nah, dia cuma ada dua value nih.

Itu dia pakai buan. Terus juga ada

objectek ya. Jadi, objek itu dia data

structure yang lebih kompleks. Jadi,

bisa jadi kumpulan string atau kumpulan

number, kumpulan buion. Nah, itu banyak

lagi tuh jenis-jenis tipe datanya.

Nah, jadi ini contohnya ya kayak ee kita

lihat nih kalau teks itu dia string.

Kalau angka itu dia 42, kalau status dia

true, kalau kosong dia nol gitu. Nol itu

juga data. Terus kayak ini tidak ada

nih. Kita enggak define dia datanya apa.

Dia undefine. Terus kayak yang daftar

ini dia merupakan array karena dia

kumpulan angka nih. Jadi array itu dia

kumpulan angka. Nah, kalau objek ini dia

bentuknya lebih beda nih. Jadi

ditandainnya tuh dari kurungnya ya.

Kalau array itu dia kurung siku. Kalau

objek itu dia kurung kurawal.

Nah, jadi mungkin salah satu pertanyaan

yang muncul nih kayak bedanya string

sama number apa sih gitu? Emang

numbernya enggak bisa nih 42 kita pasih

petik dua gitu ya. Jadi kalau kita pakai

petik dua, dia akan jadi string. Kalau

dia tidak dikasih petik, dia akan jadi

string. Nah, bedanya apa nih antara

string sama number, gitu? Bedanya kalau

number ini bisa kita lakukan

operasi-operasi matematika. Contohnya

apa? Bisa tambah, kali, bagi gitu.

Sedangkan kalau string kan dia enggak

ada operasi matematikanya ya. Enggak

bisa tuh halo ditambah malam apa gitu.

Enggak ada halo ditambah malam tuh

sesuatu yang kita tidak bisa operasikan

gitu ya. Halo dikali malam apa gitu

enggak ada gitu. Jadi kalau di angka itu

kita kelebihannya kita bisa operasikan

dia sebagai angka gitu.

[berdehem] Nah ini contohnya ya. Kalau

kita mau masukin si kode JavaScript-nya

ke HTML kita jangan lupa tadi dimasukin

tag script. Jadi entar kita bisa taruh

tag script terus kita bisa pakai nih.

Jadi kalau teman-teman mau pakai

console.log log ini gunanya apa? Ini

gunanya buat meng-output hasil ee dari

kode yang kita bikin nih. Cara ceknya

gimana gitu. Nah, cara ceknya nih bisa

kita lihat nih ee kalau teman-teman buka

di browser teman-teman bisa dilihat di

inspect.

Nah, ini ada conso ya. Nanti hasil dari

conso log itu akan muncul di sini gitu.

[berdehem]

Nah, ini jadi lanjut ya masalah array

tadi. Jadi kalau array ini ee sebuah

struktur data yang lebih kompleks ya.

Jadi kalau tadi secara struktur eh

secara tipe data yang dasar ya dasarnya

sih cuma ada string, cuma ada angka,

cuma ada buan gitu. Nah, tapi kita bisa

bikin itu jadi sebuah struktur yang

lebih kompleks gitu. Contohnya apa?

Yaitu array. Array itu apa? Array itu

adalah kumpulan data dengan ee adalah

kumpulan data gitu. Jadi dia bukan cuma

satu data, tapi bisa lebih dari satu

data. Nah, ini contohnya kita punya

array buah. Array buah ini isinya apa?

Ada apel, ada mangga, ada pisang, gitu.

Nah, dia juga punya fungsi-fungsi ini.

Karena dia itu sebuah struktur data, dia

punya fungsi tambahan gitu. Contohnya

apa? Ini ada push, ada splice gitu ya,

ada encles. Jadi encodes ini buat ngecek

apakah ada data ini di array. Push ini

buat masukin data tambahan ke array.

Splicash ini buat nghapus data di array

gitu. Nah, ini banyak banget lagi

fungsi-fungsi yang ada di array. Jadi,

Teman-teman bisa coba nih nanti di

searching juga coba teman-teman latihan

juga nanti coba cari juga nih mungkin

cari di Google dokumentasi-dokumentasi

JavaScript seperti apa atau mungkin

teman-teman bisa coba latihan nih bareng

CDPT atau EA ya gitu ya. Nanti

teman-teman bisa coba nih dipraktikin

gitu.

Nah, ini seperti yang aku bilang tadi

ya. Jadi ada yang namanya operator. Nah,

operator ini bisa kita lakukan untuk

tipe-tipe data yang berupa numbers gitu,

berupa integer. Bisa enggak kita lakukan

ke string? Bisa gitu, tapi kita enggak

bisa

expect kita enggak bisa berharap ee apa

ya hasil operasinya seperti yang kita

harapkan gitu. Kenapa? Karena ya namanya

string teks sama teks gitu. Contoh teks

dikali teks gitu kan. kita enggak tahu

ya gimana car teks dikali teks gitu.

Kalau angka dikali angka kita sudah

belajar nih ada aturannya nih, ada

aturan matematikanya gitu. Nah, ini

makanya operator ini biasa digunakan

untuk tipe data berupa number. Contohnya

kayak di sini ya, kita punya FAR A,

punya F B gitu. [berdehem] Nah, secara

general

ada enam kategori ini untuk operator.

Jadi, ada operator aritmatik. Operator

aritmatik itu apa? ya tambah, kurang

kali, bagi. Terus yang ee ini itu adalah

pangkat, ini adalah modulo ya. Jadi ini

mungkin teman-teman bisa coba explore

juga nih kalau pangkat ya misalnya 2^3

berarti kan 2 * 3 2 * 2-nya sebanyak 3

kali. Sedangkan kalau modulo ini namanya

sisa bagi ya. Jadi entar teman-teman

bisa coba cari tahu juga nih. Bisa

coba-cobain gitu.

Nah, ini contohnya kayak ini misalnya

kita bikin variabel C. C itu adalah A +

B gitu. A-nya berapa? 5, b-nya berapa?

3. Nah, itu a + b jadi dengan 8.

Terus ada juga assignment operator.

Assignment operator itu apa? Assignment

operator itu memberi value ke sebuah

variabel,

tapi sekaligus bisa dilakukan juga

operasi gitu. Jadi, misalnya kayak sama

dengan atau plus sama dengan atau minus

sama dengan. Nah, plus sama dengan ini

apa sih? Gitu. Jadi, contohnya di yang

sini ya, kita punya variabel view = 12.

view-nya itu kita plus ama 1. Nah,

ketika diprint itu jadi 13. Kenapa?

Karena view plus = 1 ini bisa juga

dibaca dengan view = view + 1, gitu.

Jadi, view + = 1 bisa dibaca dengan view

= view + 1. Nah, kalau kurang sama

dengan gimana? View kur sama 1 berarti

view = view - 1. Jadi ini cara untuk

mempersingkat kodenya aja gitu ya.

Nah, terus juga ada compression

operator. Comparison itu apa?

Compandingan, gitu. Jadi,

operasi-operasi untuk membandingkan nih.

Ada kecil sama ada ada lebih besar nih.

Ada lebih besar sama dengan, kecil sama

dengan, ada sama dengan 2, ada sama 3,

ada tidak sama dengan. Nah, bedanya apa

nih? Jadi kalau sama dengan 2 ini dia

hanya membandingkan nilai datanya aja,

tapi dia tidak membandingkan tipe

datanya. Contohnya apa? kita misal punya

variabel A = 5, variabel B = kutip 25.

Nah, kalau itu dibandingkan menggunakan

operasi sama 2

itu akan menghasilkan true ya. Kenapa?

Karena dia secara value sama walaupun

tipe datanya beda. Bedanya kalau kita

pakai sama dengan 3 itu dia akan

membandingkan juga ee tipe datanya gitu.

Nah, ini contohnya ya. Berat aku 20,

berat kamu 19. Ketika kita simpan di

variabel hasil

berat aku dibandingkan dengan berat

kamu. Nah, kan karena 20 sama 19 kan

tidak sama ya. Jadi itu akanembalikan

value false gitu. Nah, comparison

operator ini akan membalikkan value

berupa bullan. Jadi, ya namanya

membandingkan itu kan jawabannya cuma

dua ya. Iya apa enggak gitu. True atau

false gitu. Lebih besar enggak? Iya.

Lebih besar enggak? Enggak. Lebih kecil

enggak? Iya. Gitu. Jawabannya cuma i

atau enggak? true atau false.

Terus ada beberapa lagi ya, ada logical

operators, ini or dan terus negatif

negasi, ada bitwise juga ada ternaria.

Nah, 456 ini mungkin enggak akan kita

bisa bahas secara mendalam di sini cuma

entar ini bisa jadi referensi ya buat

teman-teman belajar buat logical

operator sama bitwise operator dan juga

ternary operator.

Nah, next-nya ada conditional. Apa itu

conditional? Nah, jadi kan kita sudah

belajar nih tadi ada variabel, ada tipe

data, ada operator gitu. Nah, sekarang

kita bisa ngajarin kode kita juga buat

berpikir gitu. Jadi apa sih berpikir

tuh? Berpikir itu berarti kan dia bisa

berdasarkan data, berdasarkan sebuah

logika, berdasarkan sebuah kondisi, dia

jadi tahu nih dia harus ngapain gitu.

Contohnya apa? Berpikir kita kalau lapar

makan, kita kalau haus minum. Kalau

mules ke toilet gitu, kalau ngantuk

tidur gitu. Nah, itu kita kan ada

kondisinya dicek ya. Kalau ngantuk

tidur, kalau enggak ngantuk bangun.

Kalau lapar makan, kalau enggak lapar ya

enggak usah makan gitu. Nah, itu bisa

dibilang dengan kondisi namanya

conditional ya. Nah, conditional ini

[berdehem]

sintaksnya menggunakan if atau else atau

else if. Nah, atau bisa juga entar ada

switch case ya.

Nah, ini contohnya ya. Jadi contoh

kodenya kita punya fungsi nih, punya

sebuah script,

sebuah [berdehem] script buat ngecek

nilai kita. Jadi kalau teman-teman sudah

kuliah atau teman-teman mungkin waktu

masih SMA ya,

[berdehem] nah itu kan biasanya ada ya

ee kalau nilainya 90 berapa ada nilai

nilai hurufnya. Nah, ini kita buat

fungsi untuk mentransformasi nilai angka

ke nilai huruf gitu. Nah, itu kan sebuah

logika ya. Ada kondisinya yang harus

dipenuhi gitu. Oh, kalau nilainya 90 ke

atas dia A. Kalau di bawah 90 tapi di

atas 80 dia B plus. Nah, ini kita bisa

bikin kodingannya seperti ini nih. Jadi

kita punya variabel namanya nilai. Nilai

ini yang akan diinput oleh user.

Kita juga punya variabel namanya grade.

Grade ini ya nanti berupa huruf ya,

nilai hurufnya.

[berdehem]

Nah, ini kita baru akan melakukan

kondisi nih. Kita akan mengkonversi

nilainya si user menjadi nilai huruf.

Gimana caranya? If nilai sama dengan

besar besar sama 90, maka grade-nya sama

dengan A. Berarti apa? Berarti kalau

nilai di atas 90 misalnya berapa tuh?

90, 92, 98. Nah, itu A tuh.

Nah, kalau dia di bawah itu gimana?

Kalau di bawah itu berarti lanjut lagi

nih, else if.

Else if, gitu ya. Berarti kalau tadi if

diawali itu pasti selalu if. Karena

bahasa Inggris kan if itu jika ya. Else

itu kan selain ya atau else itu ya ee ya

selain itu gitu.

Jadi baca itu ya jika nilainya besar

dari 90 grade A. Selain itu jika

nilainya itu besar dari 80 B+.

Nah ini dia akan jalan terus nih dari

atas ke bawah. Jadi dia enggak akan

random nih jalannya ya. Enggak akan

tiba-tiba masuk ke 60 gitu. enggak akan

langsung ngecek ke 30, dia akan ngecek

dari atas dulu. Jadi dia ngecek 90 misal

kita punya nilai misalnya nilainya

berapa ya? 46 gitu ya. Ternyata saya

akan ngecek dulu nih 46 besar enggak

dari 90 ya? Oh enggak besar. Enggak

besar berarti dia enggak masuk ke

kodingan yang berikutnya dia enggak akan

masuk ke si baris yang grade sama a ini.

Dia akan masuk ke baris berikutnya.

Baris berikutnya apa? Besar dari 80. 46

besar enggak ya dari 80? Oh enggak gitu.

Lanjut lagi. 46 besar enggak ya dari 70?

Oh, enggak.

Lanjut terus 46 sampai ketemu nih

ee

46 itu ternyata besar dari 40. Oh,

terpenuhi di sini berarti dia masuk ke

D. Nah, gimana nih kalau semisal

nilainya 15 gitu ya, nilainya 16 kan

enggak masuk nih 30. Nah, karena dia

sampai paling bawah dan kita udah

nge-state else. Else ini berarti selain

itu ya udah deh selain itu kita enggak

ngecek apa-apa lagi. Kita udah pasti

kasih nilai dia F. Nah, itu berarti

semisal nilai 16 dia akan masuk ke F

nih. Nilainya 16 nilainya 0 nilainya

minus. Nah, dia masuk ke F gitu. Nah,

ini contoh dari if else ya.

Nah, ini contoh lagi nih dari

kondisional tadi secara pendek kayak

gini ya.

Nah, terus kalau versi switch nih kayak

gini codingannya. Versi switch kayak

gini. Misal kita punya variabel namanya

hari. Hari ini kita asign dengan data

Senin.

Nah, kita punya codingan nih. Kalau dia

Senin berarti awal minggu. Kalau Jumat

hampir weekend. Selain dua itu ya hari

biasa. Nah, bedanya kalau tadi kan if

ini bisa dibaca kan tadi ya, if hari

sama dengan Senin konsol. else if hari

sama Jumat hampir weekend else hari

biasa. Nah, cara bacanya mirip ya. Jadi

default ini semisal enggak ada case yang

terpenuhi dia masuk ke sini. Kalau kayak

tadi else semisal enggak ada kondisi

yang terpenuhi dia akan masuk ke baris

else gitu. Nah, ini jadi ee kondisional

ini salah satu hal yang sangat penting

juga ya karena ya dalam sehari-hari

pasti banyak nih case-case kayak gini

ketika kita bikin website gitu ya.

Contohnya apa?

Contohnya kita mau transaksi gitu, kita

punya duit balance-nya sejuta, barangnya

R juta gitu. Kan akan ngecek tuh dia. If

balance kita lebih besar daripada barang

yang kita mau beli, boleh lanjut silakan

monggo kita pesenin barangnya. Tapi

kalau duitnya lebih kecil, oh sorry

banget nih enggak bisa beli. Itu

contohnya. Apalagi nih contohnya

misalnya ee misalnya kita mau beli

barang,

mau beli barang terus kita mau beli

barangnya 10 gitu. Nah, itu dia akan

ngecek dulu nih 10. Dicek apakah 10

lebih besar daripada stok barangnya.

Kalau stok barangnya lebih kecil, wah

nih kamu enggak bisa beli karena stoknya

enggak cukup. Tapi kalau stok barang

lebih besar daripada barang yang kita

mau beli, stoknya 10 itu, nah berarti

dia bisa bilang nih, "Oh, ya udah oke

kita terima ordernya, kita kirim."

Nah, jadi banyak banget nih sebenarnya

di sehari-hari di aplikasi yang kita

pakai itu eh

ada if conditional itu pasti banyak

banget ya. Jadi, misalnya kayak apaagi

ya, mungkin kayak di sosial media gitu,

Instagram gitu, ada akun-akun private

nih, misalnya kita mau ada gebetan, mau

ada ngecekin akun private gitu. dia akan

ngecek tuh, "Ih, kamu udah follow atau

belum?" Karena private nih. Kalau kamu

udah follow, boleh saya lihatin nih

gambar-gambarnya dia, foto-fotonya dia

gitu. Eh, kamu belum follow, kamu enggak

kenal sama ni orang. Si orang ini enggak

mau ngelihatin fotonya ke orang-orang

yang enggak dikenal. Jadi, sorry nih kam

follow dulu. Ada tombol request follow.

Nah, itu juga salah satu contohnya ya.

Jadi banyak banget mungkin teman-teman

bisa coba analisa juga nih entar ketika

teman-teman

di mana aja bahkan ya mungkin di

kehidupan seari hari atau ketika buka

website, buka aplikasi coba

kadang-kadang dianalisa tuh kayak ini

kira-kira kondisi if else-nya apa ya,

kondisi switch case-nya apa ya

itu.

Nah, terus berikutnya ada lagi nih salah

satu metode yang juga sama penting ya

dengan if else yaitu looping ya. Jadi

looping itu apa? looping itu ee supaya

kita bisa melakukan suatu perintah yang

sama atau suatu kode yang sama

beberapa kali sesuai dengan yang kita

butuhkan, gitu. Nah, kenapa itu penting?

Contoh, contoh lagi nih. Misal kita lagi

ee

pengin

buka following kita nih, following kita

di Instagram gitu misalnya ya, kita

nge-follow 1000 orang gitu.

Nah, terus kan datanya banyak nih 1000.

Datanya berupa teks doang nih biasanya

ya. Kita dapat data, datanya berupa teks

doang. Tapi kita kan munculin di

browser. Munculin di browser kan

bentuknya bagus ya. Ada fotonya, ada

username orangnya, ada nama orangnya,

ada following followers-nya berapa gitu.

Nah, kan enggak mungkin kita satu-satu

kita ambil terus kita convert datanya

jadi

bagus. Ambil lagi convert data jadi

bagus. Padahal itu kan sebenarnya hal

yang sama ya, proses yang sama, cuma

berulang-ulang.

Nah, daripada kita oh ada 100 data

berarti kita bikin codingannya 100 kali

gitu. Nah, itu kan susah ya. Nah, kita

bikin cukup kodenya satu kali tapi

kodenya itu bisa diulang sebanyak berapa

yang kita butuhkan gitu. Nah, di

JavaScript ini cara untuk looping itu

ada dibagi dengan dua tipe. Jadi, ada

content loop. Contact loop itu berarti

eh looping-nya ada hitungannya ya. ada

ada

batasnya gitu. Oh, dia di looping 10

kali, di looping 15 kali gitu. Nah, itu

kita pakai for loop atau pakai for each.

Lalu juga ada uncounted loops gitu. Nah,

uncounted loops ini berarti dia enggak

berdasarkan

ee jumlah berapa kali gitu. Tapi yang

dicek itu adalah kondisinya. Jadi,

selagi kondisinya masih memenuhi kita

melakukan codingannya gitu. Nah, ini

lebih ke paradigmanya aja. kita

mengikutinya ke mana nih? Gitu. Cuma

tujuannya sama. Tujuannya itu untuk

mengulangi kodenya. Nah, ini kalau

dilihat dicontoh nih

ada kegan yang pertama ini kita mau

ulang 10 kali ya. Jadi tiap 10 tiap dari

angka 0 sampai angka 10 sampai angka 9

ya. Sini bakal ditulis nih ulang kesatu,

ulang kedua, ketiga sampai ulang 9 gitu.

Terus ada juga while ulangi nih. Nah,

ini juga sama-sama ngulangin kodenya.

Nah, ini contohnya juga ya. Jadi,

teman-teman bisa lihat ada contoh

codingan menggunakan for while

menggunakan for off atau for age ya. Ada

for off nih. Jadi berdasarkan data

variabelnya nih. Kita misalnya punya

array nih. Arraynya isi tiga angka gitu.

Nah, daripada kita masing-masing angka

kita print, nah kita tinggal bikin

printnya sekali doang

tapi kita bisa e otomatis langsung

ngecek nih seberapa banyak data di area

tersebut.

ini juga bisa for age ya itu

ini contoh-contohnya mungkin teman-teman

bisa lihat juga kalau lagi sambil buka

kode editornya bisa coba di-copy terus

dijalanin ya

[mendengus]

nah terus ada lagi namanya function ya

jadi ini metode yang terakhir. Function

itu apa? function itu jadinya eh tadi

kan kita sudah punya looping, sudah

punya condition gitu ya.

Nah, semisal kita mau bikin sebuah

function yang eh sebuah kode yang

kayaknya kode ini bakal dipakai berulang

kali deh. Mungkin akan dipakai si A ini,

dipakai ini, dipakai C, dipakai D,

dipakai E, gitu. Nah, daripada ribet nih

tiap tiap tiap baris kode kita nulis

kode yang sama lagi, mending kita bikin

jadi function aja nih. Jadi semisal kode

lain butuh ini dia cukup manggil

function-nya ini, gitu.

Nah, ini jadi function ini lebih cara

untuk ngebungkus barisan kode kita itu

ke sebuah fungsi di mana fungsi ini bisa

dipakai lagi. Jadi dia function ini

reusable dan bisa dipakai beberapa kali

ya. Jadi enggak enggak terbatas gitu.

Jadi ini lebih ke cara penulisan supaya

bisa lebih efisien, lebih efektif gitu

ya. Nah, caranya itu bisa dengan

declaration dengan cara pakai ini ya.

Jadi contohnya ini ada fungsi ini. Yang

pertama kita cukup tulis dengan syntax

function nama fungsinya apa. Terusung 2

cara biasa dalam ee buka kurung tutup

kurung terus buka kurung kurawal tutup

kurung kurawal. ini barisan kodenya.

Terus juga bisa dengan variabel nih ya.

Jadi variabel cara ekspresi terus kita

bikin sama dengan function gitu juga

bisa atau dengan panah nih juga bisa

nih. Jadi far tanda panah sama dengan

ini terus dibikin tanda panah juga bisa

ya. Jadi ini cara penulisannya ada

banyak bisa teman-teman pilih yang

paling cocok aja sama teman-teman gimana

gitu.

Nah ini misalnya kita ma punya function

tambah gitu ya. Nah, ini dibikin nih

function tambah. Begitu dipanggil cukup

di ditulis ini tambah

parameternya apa. Jadi kalau di sini

function tambah buka kurung tutup kurung

ada a b a bameter. Parameter itu apa?

Parameter itu data yang kita kirimkan ke

fungsi ini. Jadi bisa jadi fungsi-fungsi

itu butuh data, bisa jadi enggak butuh

data, bisa jadi butuh parameter, bisa

jadi enggak, gitu. Nah, contohnya pada

ini fungsi buat nambah antara A sama B,

gitu. Jadi result-nya itu adalah a + b.

Nah, berarti di sini ketika kita panggil

fungsi tambah itu kita akan mengirim dua

data. Si A di sini A-nya itu 5, B, B-nya

itu 3.

Yang contohnya juga kalau kita ma bikin

fungsi buat kurang nih ya. Jadi nulisnya

bisa lebih pendek nih kalau kayak gini.

Nah, ini ada knowledge test ya. Mungkin

teman-teman bisa coba jawab juga bisa

coba dilihat entar ada countdown-nya ya.

Nah, jadi ada pemahaman dasar meng

JavaScript nih. Kira-kira apa output

dari kode berikut ini.

X-nya 5, Y-nya sama dengan petik 2 5,

terus X = Y. Nah, kira-kira jawabannya

apa nih? False, true, define, atau

error?

Ya, mungkin teman-teman bisa coba

lihat, bisa coba dijawab juga mungkin di

komen.

Nah, jadi jawabannya itu adalah true ya.

Kenapa true? Nah, ini jadi pertanyaan

nih. Tadi kita sudah sempat bahas juga

ya, ada sama dengan 2, ada sama dengan

3, gitu. Nah, di sini contohnya walaupun

yang dibandingkan itu beda tipe data,

yang x itu merupakan angka, yang y itu

merupakan string. Nah, itu tetap balikin

tetap balikin true. Kenapa? Karena

datanya tuh sama. Walaupun tipe datanya

beda, beda cerita kalau di sini itu sama

dengannya 3 kali sama dengan sama dengan

sama dengan maka dia jawabannya adalah

false gitu.

Nah, berikutnya kita akan masuk ke

materi berikutnya ya. Jadi tadi kita

sudah sempat belajar dasar-dasar tentang

JavaScript.

Pasti masih banyak yang bisa teman-teman

explore, bisa teman-teman cari tahu.

Entar teman-teman bisa coba

latihan-latihan lagi mungkin pakai CPT

atau mungkin juga ee baca-baca

dokumentasinya terus dipraktikin dilihat

nih di konsol nih result-nya apa gitu

ya.

Nah, kita akan maju ke materi setite dan

server site. Apa sih ini site dan server

side? Jadi kalau teman-teman lihat di

sini nih di kiri ada website ya.

Jadi klien server itu sebenarnya lebih

ke arsitektur aja ya. Jadi ee dalam

website atau aplikasi yang kita buka itu

bisa ada berbagai klien ya. Contohnya

kayak Instagram nih. Instagram bisa

dibuka di HP, bisa dibuka di laptop,

bisa dibuka di komputer. Semua itu

connect di internet. Nah, internet itu

akan connect ke sebuah server. Server

itu apa sih? Server itu ya anggap aja

sebuah komputer yang super power ya.

Jadi si server inilah yang nanti dia

akan mengolah semua nih data dari si

Apple, data dari si iPhone, dari si

laptop, dari si komputer diterima. Dia

olah datanya dia akan balikin ke si

klien. Contohnya apa? Oh, ini dari

Instagram orang yang di iPhone nih lagi

pengin buka profile-nya si itu gitu,

profil-ennya si mawar gitu. Dia request

ke internet, internetnya akan ngirim ke

server, si server ini akan ngolah. Oh,

dia mau nyari data mawar. data mawar

mana aja nih mawar sini mawar yang mana

mawar yang ini, datanya apa aja, fotonya

apa aja, followersnya berapa, follow-nya

berapa, semua diambil dikirim lagi balik

ke si klien gitu.

Nah, jadi ini biasanya disebut dengan

tadi ya, ada front end, ada back end.

Jadi front end itu semua yang

berhubungan dengan klien, semua yang

kita pakai itu aplikasi itu berupa front

end, back end itu adalah sisi dari

servernya. Jadi dia mengolah data,

mengolah bisnis proses, gitu ya.

Nah, itu semua ada di backend. Nah,

sebenarnya yang sekarang kita pelajari

ini kayak HTML, CSS, tadi di JavaScript

dikit-dikit ya, itu masih di sisi front

end. Jadi di sisi backend itu entar ada

suatu proses lagi yang berbeda gitu ya.

Di backend itu ya enggak ada website,

enggak ada ini enggak perlu. Dia cuma

ngolah data ini jadi ini, ngolah data

ini jadi ini gitu. Butuh data ini dia

narikin gitu. Nah, itu dia proses

backend.

Nah, jadi kalau dianalogikan si client

site ini ya kayak restoran, server site

itu kayak kitchen ya. Jadi kalau

teman-teman ke restoran, kita masuk,

kita duduk, nah ada waiternya nih datang

gitu kayak mau pesan apa Mas? Mau pesan

apa e pak Bu gitu ya. Dikasih menu terus

kita lihat-lihat

kita pesan entar dia terima pesanan dia

akan belakang dia akan request ke si

dapur. Nah, kita sebagai klien kita

enggak tahu nih di dapur tuh yang masak

siapa, masaknya kayak gimana. Kadang

kita enggak tahu kan karena dapurnya

tersembunyi gitu di belakang. Cuma kita

sebagai orang kita enggak tahu juga tuh

dapurnya bersihkah dapurnya dapurnya ee

modelannya

vif vibes gimana gitu. Estetik atau

enggak gitu. Kan kita enggak tahu ya.

Kita sebagai klien, kita sebagai

customer, kita cukup menikmati

experience sebagai si client set itu

gitu.

Nah, makanya fungsi dari dua hal ini

beda nih. Kalau klien set itu ya kalau

di restoran kan berarti klien set

butuhnya apa? Oh, dia butuh bikin

restoran yang rapi, bersih, estetik gitu

ya. Yang dari sisi pengalaman pengguna

itu enak nih. Jadi kayak teman-teman

masuk, oh langsung disuguhin apa? Mau

duduk tuh enggak sempit-sempitan, enggak

nabrak-nabrak orang, duduknya lapang, ee

ruangannya dingin, sejuk gitu. Nah, itu

semua dius si client site. Nah, server

side menurus apa? Oh, dia masaknya

cepat, masaknya bersih, masaknya enak,

bisa ngelolanya dengan baik gitu bisa

dari bahan-bahan kayak gini jadi makanan

apa? Nah, itu server side. Sama juga

dengan website ya. Jadi, klien site itu

ya dia ngurus bagaimana cara bikin

website yang oh ketika user buka tuh

experience-nya enak loh gitu.

Teman-teman pasti akan merasakan kan ya

kayak websitewebsite yang kita sering

pakai sehari-hari misalnya Instagram,

WhatsApp, Facebook yang gede-gede gitu

ya. dibandingkan dengan website-website

yang mungkin mohon maaf nih

website-website yang seadanya gitu ya,

mungkin website-website yang dari suatu

instansi lokal, instansi yang ada di

sini gitu kelihatan tidak niat

dibikinnya. Nah, itu kan mesti rasa

bedanya dari si klien ya. Oh, kok kalau

di Instagram nih enak nih tombolnya di

sini. Kita enggak perlu belajar ribet.

Kita udah tahu aja nih. Oh, kalau kita

mau nge-post foto tekannya tombol ini.

Kalau kita mau nge-like tekannya tombol

ini. Mau nyari orang tekan tombol ini.

Terus tombolnya kayaknya enggak ribet

nih. Enggak perlu tekan ini, ini, ini,

ini. Supaya buat cari orang aja enggak

perlu ribet. Udah ada langsung

tombolnya. Nah, itu fungsinya si klien

set tuh dia bikin experience user yang

enak gitu. Makanya tadi ya, dia bikin

layout page-nya gimana, user

interface-nya gimana, form

validation-nya gimana, stylingnya

gimana. Bagus enggak nih? Enggak usah

tiba-tiba warnanya merah, orangen,

hijau, ngejreng, matanya jadi sakit gitu

kan. Pasti dia bikin, "Oh, warnanya enak

dilihat nih, betah nih resnya mainnya.

Mainin website-nya kayaknya berjam-jam

enggak akan bosen nih gitu. Ada juga

user interaction-nya bisa diklik, bisa

discroll, bisa diketikin, kontennya juga

bisa dinamis gitu ya. Sedangkan si

server setnya ngurus kitchen ya. Jadi

bagaimana dia proses datanya, benar

enggak cara proses datanya? Security

datanya gimana nih? Kecepatan proses

sistemnya gimana nih? Karena itu juga

butuh ya kalau kita bikin udah

website-nya bagus di depan tapi ketika

upload foto, mau ngupload foto aja

sejam. Sama aja kalau kita ke restoran,

wah restoran estetik nih. Tapi mesan

nasi goreng nampainya 20 jam gitu ya,

nampainya 5 jam kan enggak akan ada yang

mau datang. Jadi dua hal ini mesti

balance juga ya. dari client site bagus,

customer experience-nya enak, tapi dari

server site juga bisa memprovide data

dengan baik, bisa secure data yang

diberikan oke, sesuai, akurat gitu ya.

Nah, ini yang harus dipenuhi dan

masing-masing punya fungsi yang berbeda

gitu.

Nah, jadi ini ada knowledge ch lagi nih.

Apa bedanya client site dan server side

gitu soalnya ya. Apa yang merupakan

contoh proses dari server side? Nanti

teman-teman coba jawab nih

yang mana yang server site ya bukan

client sete. Pertama ada validasi form,

yang kedua ada notifikasi pop up. Yang

ketiga nyimpan data ke database. Yang

keempat ngubah warna di tombol

saat di hover. Jadi hover tuh misalnya

kita ada cursernya lewat nih. Nah, ini

hover namanya nih. Tuh kira-kira mana ya

server side ya.

Nah, jadi jawabannya yang server set itu

adalah yang C. Nah, jadi yang A kayak

validasi form itu ada di client site.

Menampilkan notifikasi pop up itu juga

ada di client site. Menyimpan data ke

database itu juga nah ini ada di server.

Sedangkan misalnya ngubah warna tombol

itu di

eh client site side gitu ya. Nah, ini

contohnya ya. Jadi ada kode client site

sama server site. Nah, jadi JavaScript

ini juga bisa server side nih. Kerennya

JavaScript itu itu walaupun dia

memberikan interaktivitas di client

site, tapi di server side dia juga bisa

melakukan gitu.

Jadi buat teman-teman ee sebelum kita

lanjut materi berikutnya ya, mungkin

bisa tarik napas dulu, minum dulu.

materinya cukup banyak memang dan

lumayan advance mungkin ya dibanding

hari-hari sebelumnya. Tapi ee mungkin

mindsetnya teman-teman adalah ketika

ngelihat materi ini jadikan ini sebagai

pintu buat teman-teman belajar lebih

banyak gitu ya. Jadi enggak usah berasa

kayak wah materi sebanyak ini aku harus

bisa sekali belajar nih. Wah enggak.

Cuma materi ini jadi pintu gitu. Jadi

setnya teman-teman setelah ikut ini

Revolue ini setelah ikut coding cam ini

tahu nih oh ternyata aku harus belajar

JavaScript ya aku harus belajar bagian

ininya ya aku mesti belajar bagian back

end-nya ya bagian front end-nya ya aku

entar mau cari ini deh mau cari itu deh

mau coba ini deh. Nah ekspektasinya

adalah ke teman-teman ketika teman-teman

sudah ikut coding cam teman-teman bisa

ada arah ke situ. Nah kalau teman-teman

mungkin masih agak ah kayaknya susah deh

belajar sendiri kayaknya aku pengin ada

temannya juga ada mentornya juga. Nah,

entar teman-teman bisa juga nih ikut

refue yang kelasnya lebih panjang gitu.

Jadi bisa ada

pendalamannya lah lebih mantap gitu

karena emang materinya memang banyak

banget dan enggak dixpect untuk

teman-teman bisa sehari langsung jago

gitu. Shari langsung jago nih,

Teman-teman.

Udah terlalu suhu nih berarti udah

terlalu wah nih udah levelnya bukan di

sini lagi nih. Jadi emang ini hal yang

proses yang normal sih, Teman-teman.

Bisa Teman-teman juga sharing dis sama

yang lain gitu ya.

Nah, jadi kita lanjut ya. Nah, sekarang

kita sudah belajar JavaScript. kita

sudah tahu ada client site, ada server

site, sintaks-sintax JavaScript kita

sudah tahu, terus juga cara JavaScript

dikonnectin ke HTML juga tahu. Sekarang

kita lanjut nih gimana tadi kita sudah

bisa connect, tapi gimana caranya supaya

si JavaScript ini bisa bikin website

kita dinamis? Ya emang sih kita bisa

ngubah-ngubah variabel eh kita bisa ada

operatornya, ada comparision-nya, ada

conditional, ada looping, gitu. Cuma kan

enggak ngubah data ya, enggak ngubah

website kita ya. Gimana cara ngubah

website-nya? Gimana cara bikin

website-nya jadi dinamis?

Nah, ini yang kita bahas ya. Jadi,

dynamic view JavaScript itu caranya

dengan namanya DOM ya. Jadi, DOM itu

adalah dokumen objectek model. Jadi, ini

nih suatu cara menghubungkan si CS eh si

JavaScript ke HTML. Jadi, dia bisa

mengakses data-data di HTML nih dengan

cara DOM. Nah, jadi DOM Tree of Object

ini contohnya ini ya. Jadi misalnya

kayak kalau kita lihat kita tuh punya

dokumen, punya HTML. HTML ini ada head,

ada title. Terus kalau di body ini ada

elemen apa, ada elemen ini, gitu. Nah,

ini kan ada strukturnya ya, ada

pohonnya, pohon objeknya gitu. Nah, ini

kita bisa belajar gimana caranya supaya

kita bisa connect nih. Oh, kita mau

ngubah body-nya, oh kita mau ngubah

headernya, kita mengubah title-nya.

Karena kan tadi kita udah udah punya

logicnya ya buat buat melakukan sesuatu

nih. Tapi kita belum bisa mengkonnectkan

menginteraktifkan si HTML-nya. Nah, ini

caranya dengan menggunakan DOM.

Nah, jadi DOM itu gimana? Jadi yang

pertama itu ada caranya kita get element

by ID ya. Jadi kalau teman-teman kemarin

sudah belajar HTML kan HTML ada tag-nya

ya. ada tag-nya misalnya body, terus

body ini bisa dikasih ID, bisa dikasih

class, bisa dikasih tag gitu ya. Nah,

ini yang pertama caranya dengan get

element by ID. Jadi kita bisa bikin

variabel misalnya apa nih variabelnya?

Variabelnya title sama dengan dokumen

titik get element by ID. Jadi semuanya

itu kalau mau pakai DOM itu depannya

kita pakai dokumen titik. Dokumen titik

metodenya apa? Contohnya nih dokumen

titik get element by ID header title.

Nah, ID-nya itu header title.

Nah, dengan menggunakan ini JavaScript

itu bakal cari ID-nya yang sama. Nah,

karena ID itu kan unik ya di satu HTML

itu kita cuma boleh punya satu data yang

ID-nya itu ya. Enggak boleh nih kita

punya title yang header title tapi ada

dua nih pasti cuma satu.

Nah, jadi kita akan dapat satu objectek

misalnya kita punya title nih. Nah, itu

kita akan dapetin dengan cara get

element by ID. Yang kedua ada dengan

cara get element by class gitu ya.

ini dia pakai methodnya get element by

class name. Jadi semua

objek HTML yang ada class name-nya ini

akan diambil. Jadi bukan cuma satu nih.

Jadi ini isinya tuh bisa beberapa

elemen. Nah, ini return allema. Jadi

bedanya kalau ID itu cuma satu, kalau

kelas itu bisa banyak.

Ada lagi dengan tag namame. Nah, kalau

tag name tadi ya. Jadi kalau tag name

itu misalnya H1 atau A atau body gitu.

atau apalagi atau P gitu. Itu kan tag

ya. Nah, ini bisa juga kita pakai get

elements by tag name. Nah, kalau get

elements by tech name

itu kita akan dapatin juga semua ya.

Jadi sama kayak yang si class kalau name

kita juga dapat banyak data. Lalu yang

terakhir itu getting elements by query

selector ya. Jadi eh semisal kita udah

udah pakai CSS ya. Nah, itu kita kalau

ke CSS kita bisa ambil barang-barangnya

itu berdasarkan tag CSS-nya. Jadi,

misalnya kalau ID CSS itu pakai eh pagar

gini ya, pakai crash. Terus juga kalau

kas pakai titik, kalau tag itu pakai

ini. Kalau bisa spesifik lagi itu bisa

tag, terus titik eh ID-nya apa gitu ya.

Nah, ini bisa banyak cara buat

nge-select barang-barang kita,

objek-objek kita di HTML yang apa sih

yang mau kita yang mau kita ubah, apa

sih yang mau kita ganti-ganti gitu.

Ini contohnya ada kode ya, kita punya

kode button, ID-nya itu change text

button, value-nya itu click me. Terus

kita punya paragraf nih, ID-nya output

isinya initial text. Nah, ini contohnya

nih. Kita punya script. Kita dapetin

dulu nih elemennya by ID ya. Dokumen

titik get element by ID. Apa yang kita

mau ambil? Kita mau ambil button-nya.

Karena button ini kita mau kasih

interaktif. J kita get element by ID,

change text button. Nah, ini entar ada

function-nya namanya onclick. Ini bakal

ada banyak function ya, kita entar

pelajari juga. Kita titik onclick sama

dengan function. Function-nya apa? Nah,

di sini kita niatnya ketika kita klik

button-nya, kita akan ubah teks dari si

paragrafnya, si output. Jadi, kita ambil

nih dokumen titik get element by ID.

ID-nya apa? Output. Terus value-nya itu

inner tex-nya ini ya. Jadi initial text

ini namanya inner tex. titik inner tex

sama dengan text change.

Nah, ini kalau kita jalanin nanti ketika

kita diklik itu tombolnya ee teksnya

akan berubah gitu.

Ini juga ada sama ya, mirip-mirip kayak

tadi.

Ee cuma kalau tadi kan function-nya

dibikin kayak ini ya, di inline ya.

Kalau ini kita bikin function-nya beda

nih. Jadi method HTML di sini

function-nya kita bikin di script.

Nah, kita next knowledge test nih.

Kode mana yang benar untuk mengubah teks

elemen dengan ID judul? Ya, jadi ID-nya

tuh judul. Yang mana nih yang benar? Ada

A, ada B pakai query selector atau A itu

pakai get element, yang C itu pakai get

element by ID, terus yang D itu pakai

title. Nah, kira-kira yang mana yang

benar ya? ID-nya judul.

Nah, jadi yang benar adalah C ya. Karena

tadi kita juga belajar ya, ada get

element by ID, by class, by tag, sama

selector. Nah, karena kita ini case-nya

kita udah tahu ID-nya apa, kita cukup

pakai get element by ID gitu ya.

Nah, lanjut ke eventing. Jadi, kita udah

belajar nih gimana cara dapetin

objeknya. Kita sudah belajar cara gimana

menghubungkan si JavaScript dengan objek

HTML-nya.

Oke, kita sudah tahu nih button di sini,

teksnya di sini,

ee apalagi ya, gambar sih ini, button

dua sih ini, gitu. Kita udah bisa nih.

Nah, cuma kita belum tahu event itu

event handling itu apa? Even handling

itu berarti semua event sesuatu yang

terjadi di web page biasanya tuh

ditrigger oleh user action ya. itu akan

kita lakukan suatu aksi. Jadi, ada aksi,

ada reaksi gitu, ada trigger, ada

aksinya. Contohnya apa? Misalnya user

ng-scroll, misalnya user nekan button,

misalnya formnya disubmit. Nah, itu kan

berarti ada usernya melakukan sesuatu

kan. Karena interaktivitas tu kan

artinya ada interaksi dari user

menghasilkan sesuatu.

Nah, jadi ini event handling ya. Kita

udah tahu nih button-nya apa, kita sudah

tahu nih teksnya apa. Sekarang kita cuma

tinggal ngasih logikanya ini. Oh,

buttonnya ini ketika ditekan kayak gini,

ketika di ini kayak gini. Nah, itu kita

mesti kasih tahu.

Nah, untuk nulis even handling itu ada

dua juga nih caranya. Jadi, yang pertama

itu ada dengan HTML atribut. Jadi eh

kita pakai HTML buat ngasih tahu yang

mau di-handle itu event apa ya. Jadi

contoh-contoh event-nya itu ada berapa

nih. Ada on click, ada on change, ada on

mover, ada on key up, ada onload. On

click itu ya ketika dia diklik. On

change itu ya ketika datanya berubah. On

mouse over itu ketika mouse-nya tuh

lewat di atas ya. Hover. On key up itu

ketika kita ngetik terus key-nya kita

lepas. Terus onload itu ketika

website-nya dioad. Nah, ini ada banyak

banget ya. Entar mungkin teman-teman

bisa cari juga. Nah, kalau pakai HTML

atribute

itu langsung kita tulis ya. Jadi button

on click. Onclick itu apa? Kita kasih

function misalnya register. Itu dia

contoh event handling.

Terus ada juga add event listener. Nah,

ini baru yang pakai si JavaScriptnya.

Kita dapat nih button apa. Nah, itu kita

titik add listener. Listener terus. Jadi

gak pakai onck tapi kita cuma cukup

ketik aja.

entar baru di sana kita masukin

function-nya apa.

Ini contohnya ya. Jadi teman-teman

mungkin entar bisa coba explore juga

codingannya seperti apa. Nanti entar di

akhir kelas kita akan coba simulasi ya.

Jadi teman-teman enggak usah panik dulu,

enggak usah wih susah banget nih. Entar

kita coba-coba bareng-bareng nih. Kita

coba-coba simulasi di akhir ya.

Nah, ini dia contohnya. Kita udah punya

dokumen get element by ID-nya input.

Terus kita add even listen key up. Jadi

ketika kita ngeklik sesuatu kita akan

masukin conso log. Nah, ini kita boleh

coba ya. Jadi di sini aku

punya kode kosong.

kita bikin indeks HTML nih. Misalnya

kita

mungkin kode HTML

codingan aja ya. Kita copy aja

codingannya.

Sor

kita udah punya head-nya

kita udah punya body-nya. Terus kita

connect juga ke JavaScript.

Nah, HTML-nya ini ya, input ID. Oke,

kita punya input nih.

Input ID sama dengan

apa tadi? input

terus place holder

ketik sesuatu.

Oke, kita sudah punya input.

Nah, di sini kita coba langsung pakai

sclipnya di sini aja ya.

Sini kita akan bikin slipnya nih. Kita

dokumen get element by id kita add

listener.

Dokumen

get element by ID. ID-nya apa? ID-nya

itu input

add listener.

Listen-nya apa? Keyup ya tadi ya. Key

up. Nah, terus ada function ya.

Jadi function Apa

nih sintaksnya? Oke, di A kita conso

titik log

kita consol titik log

Q type

ini titik

target titik value ya. [tertawa]

Oke,

ini code-nya sudah jadi. Kita coba buka,

ya.

Nah, jadi ini ada sesuatu nih. Kita coba

buka inspecten, kita buka konsol. Nah,

kalau kita ngetik sesuatu di sini

harusnya dia akan muncul nih di konsol

nih. Muncul ya. Jadi data yang muncul

nih ASD cek gitu muncul semua nih.

Jadi sudah connect nih si HTML sama si

JavaScript-nya tu.

[tertawa] Nah, jadi kita lanjut dulu ke

knowledge test ya lagi

dari kode-kode berikut.

mana nih yang akan menjalankan fungsi

ketika tombolnya diklik. Yang pertama

itu button titik on click

terus dibakal manggil function. Terus

yang kedua itu button titik add.

Terus add-nya itu klik ada run function.

Yang ketiga itu pakai add listener.

Yang ked itu ada when click. Nah, ini

kodenya di JavaScript ya, karena dia

langsung nih beda nih sama si

HTML tadi kan tadi ada beberapa jenis

ya, ada HTML, ada JavaScript.

K-Kra yang mana ya jawabannya ya?

Nah, jadi jawabannya itu yang C ya. Jadi

yang benar itu adalah add even listener.

Contohnya apa? Kayak yang tadi nih, add

listener ya. Jadi kodenya tuh add even

listener. Baru habis itu methodnya apa?

Klik. Berti dia klik gitu. baru

function-nya apa.

Nah, ini dia lanjut kita ke form

validation ya. Jadi, form validation itu

hal yang cukup umum juga di JavaScript.

Cli set itu biasanya validation itu

dilakukan yang di browser ya sebelum

data dikirim. Kalau server set itu data

yang divalidasi setelah server menerima

gitu.

Jadi contohnya misalnya kalau kita input

data gitu ya, misalnya kita aplikasi apa

gitu. Nah, itu biasanya lebih ke format

tuh. Oh, data formnya enggak boleh

kosong. Kalau email formatnya harus

kayak gini. Kalau nomor telepon harus

angka, gitu. Nah, itu dia memvalidasi di

sisi klien. Dia belum bisa nih

ngvalidasi bahwa oh emailnya ini beneran

ada nih. Oh, nomor teleponnya benaran

ada. Dia enggak bisa validasi karena dia

belum terkoneksi dengan server. Tapi itu

bisa kita validasi beberapa hal dulu nih

sebelum di kirim ke server gitu. Jadi

supaya enggak semua langsung kita kirim

ke server gitu ya.

Nah, ini contohnya nih. Kalau pakai HTML

doang

ee validasinya di form tuh bisa kayak

gini ya. Jadi bisa langsung dikasih nih

required minimal length-nya 3, place

holdernya apa gitu ya,

terus placeernya bentuknya apa, email

gitu. Nah, kalau sama JS itu kita bisa

pakai kayak gini nih namanya Regx ya.

Jadi kita bisa dapetin elemen ID-nya,

emailnya apa, terus entar emailnya kita

bisa cek formatnya sesuai enggak nih

gitu.

Nah, ini knowledge test lagi ya. Jadi,

mana cara yang paling benar untuk

mencegah form dikirim jika input kosong.

Jadi, eh ketika isi form ada data yang

kosong dia enggak bisa kirim nih mana

nih yang paling benar nih. Yang pertama

itu ada tambah read only pada input.

Yang kedua itu ada data validate true.

Yang ketiga itu pakai required pada

element input. Kalau yang D itu ditambah

alert di HTML. Kira-kira yang mana ya?

Jadi cara supaya form itu enggak mungkin

kosong nih data inputnya yang kita

butuhin.

Nah, jadi jawabannya C ya. Jadi kalau

kita tambah required dia bakal enggak

bisa dikirim kalau datanya masih kosong.

Nah, ini contohnya yang kayak tadi nih

ada required nih di HTML-nya.

Nah, berikutnya ada regular expression.

Nah, ini ilmu tambahan aja ya.

Sebenarnya ini cukup ilmunya advance.

Jadi, Teman-teman enggak harus terlalu

hafal-hafalin banget. Jadi, regular

expression itu apa sih? Regular

expression itu adalah cara untuk text

pattern bisa matching, locating, sama

text manipulation gitu. Jadi, contohnya

apa? Nah, contohnya tuh kayak tadi kita

mau ngecek email gitu ya. Email itu kan

formatnya jelas ya, pasti ada add, pasti

entar ada website-nya berarti titik

gitu. [mendengus] Kalau misal dia cuma

nulis e apa ya, Fandi Putra gitu. Nah,

itu kan enggak mungkin ya.

Mana ada email Fandiputra doang. Pasti

harus kan fandiputra@gmail.com

gitu. Enggak mungkin Fandiputra@gmail

formatnya udah jelas nih. Ada add-nya,

ada titiknya.

Nah, itu kita bisa tes dengan cara pakai

regex namanya. Jadi kita tinggal bikin

nih pattern-nya. Wah, ini kayak bahasa

alien ya. Jadi, ada pattern-nya bisa

kita tulis ee nah itu pattern-nya bakal

kita match dengan si email-nya. Entar

dia bakal ngecek nih, dia bisa ngecek

kalau ini sesuai pattern atau enggak.

Cara bikin patternnya gimana? Cara bikin

patternnya tuh ya kita mesti belajar

cara meta karakternya. Kayak cara

bacanya gimana? Ini itu nyocokin apa,

ini itu nyocokin apa. Nah, ini banyak

banget teman-teman juga bisa belajar.

Kalau saran aku sih buat meta karakter

apalagi buat pattern regex ini sekarang

teman-teman enggak harus nulis sendiri.

Banyak banget tools-tools di mana kayak

teman-teman mungkin cukup bilang nih

kayak aku mau patternnya kayak gini.

Entar dia bakal bikinin

ee bentukan reg-nya. mungkin bisa minta

chatt nih kayak aku mau bikin regex buat

cek email dong. Cek email tuh standarnya

harus ada add, harus ada titik setelah

add gitu. Nah, itu entar bisa dibikinin

tuh si pattern regx-nya. Jadi,

teman-teman juga bisa menggunakan

fasilitas itu gitu. Jadi, enggak harus

sekarang sebagai software engineer tuh

mempersulit hidup gitu ya. Semua

dilakukan manual tuh enggak perlu gitu.

Kalau emang teman-teman bisa menggunakan

tools-tulis bantuan ya enggak masalah

gitu.

Nah, itu bisa dipakai tuh bisa CDPT atau

setahu tuh banyak banget sekarang tools

website-website di mana kayak

teman-teman bisa baca nih

pattern-paternya seperti apa. Oh, ini

dicopy terus dibaca oh ini maksudnya apa

gitu.

Nah, ini ada salah satu contoh. Mungkin

teman-teman enggak harus belajar banget

nih, cuma kayak tebak-tebak aja nih ya.

Kira-kira nih maksudnya apa sih gitu.

Regx-nya nih ada A Z, ada AZ kecil, AZ

gede, ada 0,9.

Nah, fungsinya apa nih kira-kira?

Mencocokkan alamat email, mencocokkan

string dengan hanya angka, mencocokkan

string tanpa spasi dan hanya huruf atau

angka, atau mencocokkan password yang

memiliki karakter khusus. Nah, kira-kira

apa nih? Kalau aku lihat sih kayaknya

enggak mungkin A ya, enggak mungkin

email gitu ya. Karena email kan tadi ada

add, ada titik gitu. Hanya angka juga

kayaknya enggak. Kenapa? Karena ada

AZ gede, ada AZ kecil, tapi ada angka

juga.

mencocokkan string tanpa spasi hanya

huruf atau angka mungkin bisa jadi ya

karena di sini ada huruf dan angka

mencocokan password memiliki karakter

khusus. Nah, ini belum tahu nih bisa

jadi ya, bisa jadi enggak gitu.

Nah, jadi jawabannya C ya. Kenapa?

Karena ya kalau dilihat tadi di sini

isinya ya ada huruf, ada huruf gede,

huruf kecil, ada angka gitu ya. Jadi

kayaknya paling masuk akal memang ini

gitu. Nah, ini kalau teman-teman bingung

bisa dikopas entar ditanyakan GPT buat

dijelasin atau mungkin pakai

website-website lain juga bisa.

Nah, sampai di sini entar kita lanjut ke

materi deployment. Nah, sebelum materi

deployment

mungkin kita akan coba ee simulasi dulu

nih ya, Teman-teman. Simulasi buat ee

kita coba JavaScript dikit-dikit ya.

Nah, jadi buat teman-teman nih kita bisa

persiapan dengan cara bikin ee mungkin

teman-teman bisa kalau sudah belajar

GitHub ya bisa ngambil kode dari Traffic

Light ini buat nanti belajar. Jadi

case-nya itu sekarang adalah aku punya

website

buat traffic light nih. Jadi dia lampu

lalu lintas ya. Cuma lampu lalu

lintasnya ini enggak ada lampunya nih.

Belum bisa ditekan. Lampunya juga masih

kosong doang gitu. Nah, aku pengin pakai

JavaScript supaya dia bisa apa?

bisa muncul lampu merah, kuning, hijau.

Dari merah bisa tukar ke hijau, dari

hijau bisa tukar ke merah gitu.

Itu ya.

Nah, jadi sekarang

ini aku punya kode HTML-nya.

Nah, ini udah ada styling-nya juga.

Jadi, stylingnya mungkin aku hide aja

ya, cuma ada body-nya. Nah,

jadi sekarang di bodinya itu kita punya

traffic light, ada red, ada yellow, ada

green, sama ada switch button.

Nih kalau dilihat nih ada red, yellow,

green, sama switch button.

Sekarang apa aja nih yang perlu kita

ambil? Oke, sekarang kita perlu

ambil ambil lampu-lampunya dulu deh. Oh,

iya, buat website-nya teman-teman bisa

lihat di sini ya.

Ee ini mungkin akan aku kirim ke chat,

Teman-teman. Bisa,

Teman-teman bisa

bisa bantu dikirim Kak ke chat-nya.

Jadi entar Kakak mungkin bisa share ke

komennya juga nih, Teman-teman bisa

buka.

Cuma entar JavaScript-nya dihapus dulu

ya biar kita belajar bareng. Oke, jadi

sekarang kita ambil dulu nih red light.

Kita bikin red light itu kita ambil

dengan cara

eh apa tadi? Dokumen titik get element

by id

terus tadi apa?

Red. Oke.

Yellow light

itu dokumen. Lihat element by idellow

doang dia ya. Sama ada lagi green light.

itu dokumen get element by idor

green

sama ada switch button

sama dengan dokumen

by id

apa-nya id-nya switch button juga ya.

Nah, ini kenapa kita pakai cons? Karena

ya data si red light, yellow light,

green light, sama switch button ini

enggak akan berubah ya. Dia akan selalu

kayak gitu gitu. Jadi ngapain kita

ngapain kita ubah-ubah gitu? Enggak

perlulah gitu kan. [mendengus] Ah, pasti

dar itu doang.

Nah, sekarang aku mau pakai switch

button-nya nih. Sebelum pakai switch

button aku mungkin akan set dulu kali

ya. Misalkan tiba-tiba diwitch pada

lampunya masih mati kan entar bingung

ya. Jadi kita set dulu nih eh

initial value.

Jadi initial value-nya apa? Oh kita

setnya defaultnya itu lampunya merah deh

gitu. Jadi lampu merahnya

itu akan kita

set ya.

kita akan set

jadi warna merah.

kita refresh.

Oke,

[mendengus]

terus kita juga akan punya variabel

namanya [tertawa]

current nih. Nah, itu kita akan set ke

merah.

Lalu, kita mau bikin function buat

switch like-nya.

Switch light.

Nah, F switch ini isinya

ketika di switch [mendengus]

kita akan

set dulu

lampunya yang yellow jadi yellow.

Nah, terus kalau lampunya

merah.

Nah, kalau lampunya merah

kita akan ubah lampunya jadi hijau.

Kita akan ubah

ee

lampu merahnya jadi mati.

Mati ini apa ya? Berti ini kita coba

warna gini nih.

Jadi warna hitam ya. Lampu merahnya

mati.

Lampu

kuningnya juga mati.

Lampu hijaunya

kita hidupin.

Nah, tapi

kalau lampunya sekarang itu hijau,

Nah, lampunya sekarang hijau apa?

Berarti kita ubah ini jadi merah.

[tertawa]

[mendengus]

Lampu

hijaunya kita matiin.

Lampu yellownya kita matiin. Lampu

merahnya kita hidupin.

Nah, kita punya nih function buat ganti

lampu. Sekarang tinggal kita connectin

nih. Kita switch button

event listener.

Apa tadi berarti? Klik

switch like.

Nah, kita bikin ya. Oke, kita coba dulu.

Wah, belum berubah nih lampunya.

Ops. Oke, kita coba.

Oh, kenapa ya? Belum berubah ya.

[mendengus]

Ini kita sudah punya FJS.

Nah, kita coba inspect dulu nih.

Wah, ada salah sintak ternyata.

Get elements by ID. Ini salah nih.

Harusnya get element by ID. Oke. Nah,

ternyata error tadi ya. Nah, ini udah

benar nih. Lampunya langsung merah.

Ketika kita tekan langsung hijau. Wah,

kenapa nih kuningnya enggak muncul?

Karena setelah kita cek dia kan gantinya

instan ya.

Nah, ini berarti kita harus bikin ada

delay-nya gitu ya. Jadi dia enggak

langsung berubah nih warnanya. Ketika

diubah itu kuning dulu terus kita ada

delay-nya lah. Jadi ada waktunya. Nah,

ini kita bisa pakai function namanya set

time out.

Nah, ini kayak gini.

Nah, ini bisa dimasukin ke

Ups. bisa dimasukin

ke sini.

Kita rapi dulu nih saksnya.

Nah, jadi set time out ini buat fungsi

di dalam sini.

[mendengus]

kita bakal bikin dia ada di layinya nih

1000 1000 ini 1000 ms ya

jadi coba nih kita jalanin lagi. Nah,

oke sudah muncul nih. Cuma ada masalah

nih.

Wah, bih masalah nih.

Ketika green

ketika green dia enggak berubah nih.

Harusnya kan jadi red ya.

[mendengus]

Kita coba

refresh dulu. Oke. Kalau merah dia

berubah jadi hijau.

Kalau hijau dia cuma ngidupin kuning

doang.

Oh, salah di sini ternyata.

Oke, coba kita pakai saja.

Hmm.

Kenapa nih karennya enggak berubah nih?

Jadi warnanya sudah berubah, karennya

sudah berubah. Mungkin kita coba ketika

ditekan

kita consol lock kali ya. Karennya apa.

Oke, ini

memang magic-nya juga ya kalau lagi

testing. Oke, ini red ya. Nah, karennya

masih red nih. Ternyata

enggak berubah karennya.

Kita coba ganti karena di bawah sini

kali ya.

Oh, ini salah nih. Ternyata kita sama

dengannya dua kali. Itu malah ngcompare

ya, bukan nge-set ya.

Oke. Jadi harusnya udah benar nih. Merah

ke hijau, hijau ke merah. Tapi

masalahnya ada lagi. Masalahnya ketika

ganti lampu harusnya kotuk kuning muncul

itu merahnya hilang.

Nah, jadi bingung nih kan. Misalnya kita

ngilanginnya di sini. Nah, gimana kalau

kayaknya kita bikin fungsi baru nih buat

reset light

sini. Kita lihat nih ya kan kita banyak

ng-set-ngeset lampunya jadi hitam ya

berkali-kali ya. Nah, mending kita bikin

fungsi sendiri.

Fungsi reset L ini buat

bikin warnanya

jadi hitam semua.

Jadi entar kita gampang nih tinggal

manggil-manggil doang.

Nah.

Nah, ini kita bisa ganti jadi reset nih.

Ini juga bisa kita ganti jadi

reset light.

Oke.

Nah, sebelum kita set ke yellow, kita

reset light dulu.

Oke. Nah, udah oke nih ya. Merah, kuning

ke hijau.

Hijau, kuning ke merah.

Oke,

hijau kuning ke merah. Ah, tapi

kuningnya enggak hilang nih.

[mendengus]

Nah, ini kayaknya kita daripada tulis di

sini

dan kita tulis di sini.

Oke, kita coba lagi. Kuning merah. Oke,

udah benar ya.

Merah kuning udah oke, hijau ke

merah juga udah oke. Nah, paling aku mau

tambahin lagi nih. Kayaknya kalau lagi

ganti lampu

buttonnya bisa diisable deh biar enggak

banyakan tekan nih. Nah, entar jadi

error dia jadi enggak bagus nih

kelihatannya.

Nah, jadi kita bisa nambahin juga nih

ketika ditekan,

kita set dia disable dulu.

Ketika sudah selesai tekan, kita set

disablenya false.

Oke.

Coba refresh lagi.

Nah, masih belum berubah nih

disabled-nya.

Kalau kita lihat

sudah ada disable.

Hmm. Ini bisa mungkin kita cek nanti

kali ya, kenapa sih disable-nya masih

gagal gitu. Cuma setidaknya kita ah bisa

bikin nih interaktif ya. Jadi kita punya

lampu,

lampunya bisa berubah dari hijau ke

kuning ke merah, merah kuning ke hijau.

Oke, ya. Sudah bisa di-switch.

Entar kita mungkin ee nah teman-teman

mungkin dari kode ini bisa diimprove

lagi nih. Mau apa misalnya? Oh, kalau

mau otomatis dia tiap berapa second

ganti sendiri mungkin atau mungkin kalau

ganti hijau ke kuning eh hijau ke merah

pakai lampu kuning. Tapi kalau merah ke

hijau enggak pakai lampu kuning gitu

langsung. Nah, itu bisa juga. Entar

mungkin teman-teman bisa coba ekspor ya.

[berdehem]

Nah, sekarang kita lanjut nih ke

deployment

materi terakhir di malam ini. Nah, jadi

kita sekarang sudah finish nih website

kita sudah selesai. Sekarang apa nih

kita sudah selesai sekarang apa?

Nah, sekarang kan kita cuma bisa akses

website-nya ya di komputer masing-masing

kan ya belum bisa kita akses di

internet. Kita bakal bikin supaya

website ini bisa diakses buat semuanya

gitu. Nah, gimana caranya? Caranya itu

ya dengan deploy website ke internet.

Caranya yaitu menggunakan namanya di

software deployment gitu. Nah, jadi apa

sih software deployment itu? Jadi,

software deployment itu adalah proses di

mana kita bikin software atau sistem

yang kita bikin ini available untuk

semua user atau sistem untuk mengakses

gitu. Caranya gimana? Dengan caranya

meng-upload ke internet gitu supaya bisa

diakses di internet gitu. Caranya itu

di-upload ke web server. Nah, web server

ini banyak nih. Jadi, Teman-teman

ee mungkin pernah dengar namanya Cloud

Flare atau Netlify atau eh Versel. Nah,

itu banyak banget service-service di

mana teman-teman tuh tinggal taruh

website-nya ke sana. Merekalah yang akan

mem-provide website itu ke internet dan

bisa diakses seorang gitu. Kenapa enggak

pakai laptop sendiri, pakai internet

sendiri aja gitu ya? Bisa juga. Cuma

problemnya apa? Problemnya kan kalau

teman-teman pakai laptop sendiri,

laptopnya mesti hidup terus tuh 24 jam 7

per hari gitu. Kalau enggak kan dia

bakal mati ya, laptop dimatiin ya,

enggak knect internet bakal mati. Nah,

jadi biasanya buat supaya website ini

bisa

available ke orang-orang ya kita pakai

service si web server ini gitu. daripada

kita ngrovide sendiri, kita pakai aja

udah ada mungkin akan bayar. Tapi ya

kita ee dimudahkanlah dengan itu, gitu.

Nah, ini adalah salah satu contohnya ya.

Mungkin sebelum itu kita knowledge test

dulu nih. Balik lagi valation

employment. Apa sih yang perlu kita

lakukan sebelum ng-deploy aplikasi web

kita? Apakah menyalin foldernya ke

desktop kita? Apakah menambahkan konsol

lock di setiap baris?

Apakah melakukan validasi dan minifikasi

kode atau jangan-jangan menghapus semua

file HTML kita nih. Jadi jawabannya itu

ya kita sebisa mungkin ketika kita mau

deploy ya kita validasi dulu, minifikasi

dulu kodenya, dirapiin, diperbaiki gitu

ya. Jadi enggak enggak kode yang

berantakan lah gitu.

Nah, itu kita bisa pakai GitHub Pages

ya. Di case ini karena kita website-nya

website yang cukup simpel, cuma front

end doang, enggak ada breakend-nya, kita

bisa pakai GitHub Pages. Jadi, kalau

teman-teman mau pakai Git Pages ini kita

coba contohin ya caranya ya. Jadi

teman-teman punya repo sendiri

di sini aku sudah punya repo nih,

reponya traffic light. Nah, cara buat

supaya dia available di K pages

teman-teman buka setting ya.

Nah, entar waktu dietting ada bagian

pages nih paling bawah.

Nah, di sini nanti teman-teman ini masih

di disable nih. G pages is disable. Nah,

ini bisa teman-teman pilih nih

branch-nya apa. Sini aku branchnya

master. Terus karena folderku itu si

index html-nya itu ada di root, nah aku

bisa langsung diroot aja nih di-save.

Nah, jadi eh

spesifikasinya itu requirement-nya

adalah index HTML ini bisa diakses ya,

karena dia akan ngecek ke index HTML-nya

nih.

Nah, entar kalau sudah selesai coba

difresh ini

nanti sih harusnya akan muncul ya. Ini

berarti dia lagi proses nih proses

deployment.

Coba di-fresh-refresh aja

itu nih agak lama nih muncul ya.

Nah, ini kalau aku lihatin juga nih eh

coba di repo yang lain ya.

Nih aku punya repo namanya counter.

Aku lihat pages-nya.

Wah, ini juga lagi disable nih. Kita

coba save.

Nah, ini dia tulisannya ya. Kalau udah

selesai ada tulisannya nih. Your site

live at nih. Tinggal tinggal tekan.

Nah, website ini sudah bisa diakses nih.

Jadi teman-teman kalau mau cobain

teman-teman bisa buka nih website-nya.

Nah, ini bisa diakses nih jadi semuanya.

Jadi kalau tadi kan aku ngakses di

lokalku doang ya. Ini sekarang bisa

diakses di semuanya nih.

Tuh, ini juga ada nih website lainnya.

Nah, aku punya website counter. Nah, ini

bisa diakses juga nih.

Nah, jadi kalau di regit H pages ini dia

cuma front and base ya. Jadi ada HTML,

ada CSS, ada JavaScript. Tapi yang

enggak bisa punya database, belum bisa

connect ke service-service lain, ke

internet atau ke mana atau ke website

lain, ya dia enggak bisa gitu. Cuma dia

fokusnya memang di front end side-nya

aja gitu. Jadi kalau teman-teman

sekarang kan fokusnya masih ke front

endsite ya, gimana cara bikin website

yang interaktif, yang bagus. Nah, itu

entar teman-teman nanti setelah bisa

bikin website-nya teman-teman coba juga

nih ya di deploy dengan cara ya dibikin

di GitHub terus tadi di GitHub Pages ya.

Jadi buka page terus dipilih branch-nya

di-save entar dia akan ke deploy di

sini.

Nah, jadi segitu aja teman-teman.

Nanti bisa dicoba lagi, disimulasi lagi.

Mungkin boleh pakai website pakai repoku

tadi ya, pakai repositori aku tadi buat

traffic light. Mungkin teman-teman mau

coba oh traffic light-nya diginiin,

digituin, ada timernya ditambahin timer.

Countdown tuh biasanya kan ada lampu

merah ada yang countdown-nya ya 10 detik

entar diganti sendiri gitu. Nah, boleh

juga bisa juga gitu atau teman-teman mau

bikin website baru juga boleh gitu ya.

Paling itu aja sih ya buat teman-teman.

Kalau teman-teman

eh tertarik ya buat mempelajari lebih

lanjut nih eh ini

coding cam ini part of eh [mendengus]

kelasnya Revo yang advance web

development. Jadi kalau teman-teman

tertarik untuk mendalami lebih dalam nih

kan tadi kita belajarnya cukup singkat

terus pengin yang lebih dalam, pengin

belajar backend juga pengin belajar

database, API security. Nah, banyak hal.

Nah, itu teman-teman bisa banget nih

entar kita ketemu lagi di kelas Rev yang

lebih panjang nih. Jadi kita bisa

sharing-nya jauh lebih dalam juga.

Wah, seru banget ya ternyata sesi sama

Kak Fandi tadi nih, Teman-teman. Kita

ternyata jadi tahu ya bahwa sebenarnya

ngoding itu enggak selalu langsung benar

nih, Teman-teman. Tapi kadang-kadang

kita juga butuh iteration, kita butuh

untuk coba-coba sehingga akhirnya kita

bisa tahu gitu ya ee apa yang perlu

untuk kita betulkan dan apa yang kita

harus siapkan gitu supaya hasil

codingnya sesuai dengan harapan nih

nantinya. Nah, Teman-teman gimana nih

tadi sempat ngikutin enggak nih

coding-nya? Live coding-nya kalau

misalnya enggak keburu, no worries

teman-teman. nanti bisa di-rewind lagi

atau mungkin bisa diperlambat ya untuk

ee kelasnya supaya nanti bisa ngikutin

nih satu persatu dan teman-teman nanti

bisa nonton ulang videonya sampai ee

akhir hari ini.

Nah, terus aku jadi pengin tanya juga

nih sama teman-teman. Menurut

teman-teman semua, perlu enggak sih kita

tuh punya mentor dalam karir journe

kita? Nah, kalau misalnya teman-teman

merasa bahwa teman-teman butuh nih

ternyata gitu ya, karena setelah belajar

sendiri ternyata agak struggling gitu

kan, jadi teman-teman bisa banget buat

ketik angka satu. Tapi kalau misalnya

teman-teman udah terbiasa sendiri gitu

ya atau teman-teman emang udah ee merasa

udah cocoklah dengan belajar sendiri

karena jadi bisa lebih fokus misalnya.

Nah, teman-teman juga bisa banget untuk

ketik angka dua nih di kolom chat.

Kira-kira yang mana nih ee yang cocok

sama personality-nya teman-teman? Aku

pengin tahu dong. Boleh ketik angka

satu. atau ketik angka duanya nih di

kolom chat-nya.

Oke, sudah mulai ada yang share ya.

Menarik banget nih. Ternyata ee

macam-macam ya personality kita. Nah, ee

di sini aku jadi ingin memperkenalkan

Revo juga nih teman-teman bahwa ee di

Revu itu sebenarnya ada yang namanya

Revu Project. Jadi ee ketika kita

menjadi software engineer, kita kan

perlu untuk banyak latihan gitu ya. ee

kita butuh untuk banyak ee mencoba

hal-hal ee yang mungkin bisa menopang

atau bisa mengimprove karir kita ke

depannya gitu. Terutama untuk

teman-teman yang fresh grade atau

mungkin yang sekarang ingin banting

setir nih ingin ingin mengganti karirnya

dari yang awalnya A menjadi Soviet

engineer gitu kan. Nah, di sini Revo

bisa menjadi mentor untuk teman-teman

untuk bisa mengenkan

gitu ya CV kalian, portfolio, lalu eh

terutama untuk memasukkan accomplishment

selama mengerjakan software engineering

projects. Lalu eh ada mentor-mentor gitu

ya yang siap untuk menemani eh

prosesnya, lalu bisa showcasing your

work dan bisa tentunya nge-boost

higher-nya kalian juga nih supaya

nantinya bisa ee lebih bisa dilirik oleh

ee rekrutter ke depannya.

Nah, sehingga selain ee kita juga butuh

untuk meningkatkan profil kita gitu ya,

termasuk PCV, portfolio dan juga mungkin

Linkin, kita juga perlu untuk networking

nih, Teman-teman. karena tidak lengkap

rasanya kalau profil kita sudah bagus

tapi enggak ada yang ngelihat gitu kan.

Jadi kita juga butuh untuk networking

untuk bisa memperluas lagi ee jangkauan

ee diri kita tentunya. Nah, di sini Revu

sudah menyediakan juga nih Revu

Community apabila teman-teman sudah

selesai belajar di Review full software

engineering. Jadi enggak cuman mentor

yang disediakan ketika teman-teman

belajar dan juga mempersiapkan karir,

tapi juga along the way selama

perjalanan berkarirnya sampai menapaki

tanggal karirnya nanti ya, Teman-teman

juga masih akan ditemani oleh komunitas

yang sangat mendukung nih di dalam Revu

Community karena di sana ada Revu

Chapters, ada eh Revu Club di mana

teman-teman bisa upgrade terus nih

ilmu-ilmu yang terbaru atau

teknologi-teknologi yang terbaru gitu

ya, karena teknologi ini cepat banget

berjalannya. Lalu ada Slack untuk

komunikasi kita nantinya di sana. Lalu

ada exclusive community events di mana

kita bisa eh ketemu nih sama eh hundreds

of professionals atau bahkan ribuan

professionals gitu ya yang pernah

belajar Revage dengan Revluas

jaringannya teman-teman juga nih di

sana.

Nah, terus kalau misalnya nih

teman-teman tertarik gitu ya untuk ee

mengajak atau untuk memanfaatkan Revu

sebagai mentor atau mungkin untuk ee

teman belajarnya teman-teman untuk bisa

berkarir di dunia eh software

engineering, teman-teman juga bisa

banget nih untuk pilih eh pembelajaran

di Revuls Software Engineering. Nah,

teman-teman bisa pilih ada dua stream ya

yang bisa dilalui. Jadi kalau misalnya

teman-teman di sini pengin skill

boosting aja atau ingin meningkatkan

skill-nya aja, teman-teman bisa pilih

Revo Course aja. Atau kalau misalnya

teman-teman ternyata ingin ee cari kerja

juga nih. Jadi ada pembelajaran e untuk

skill boosting ditambah 3 bulan

selanjutnya untuk eh career

transforming. Jadi teman-teman akan

mendapatkan jobing classis, mentoring

session, mup interview sampai dengan

work asset preparation. Dan tentunya eh

di sini flexible payment option juga ya,

Teman-teman. Jadi kalau misalnya

teman-teman mungkin ee ingin bayar lunah

supaya lebih tenang gitu ya, bisa juga

teman-teman ee pilih yang up front

payment. Kalau misalnya teman-teman

pengin cicil tanpa bunga, ada juga

opsinya. Kalau misalnya mau cicil yang

lebih panjang juga bisa.

Nah, eh kali ini mumpung lagi ada early

birth discount nih, Teman-teman. Dan

juga slotnya sangat sangat sangat sangat

terbatas gitu ya. Ee jadi teman-teman

bisa banget nih langsung aja daftar

sekarang juga untuk bisa nge-secure

harga diskonnya nih teman-teman. Jadi

kapan lagi gitu kan mumpung diskonnya

masih lumayan gede dan ini good deal

banget. Hitung-hitung nanti ee diskonnya

itu tadi bisa digunakan sama teman-teman

untuk keperluan yang lain ya gitu kan.

Jadi bisa banget langsung aja daftar

sekarang dengan cara klik link yang ada

di dalam kolom chat atau teman-teman

juga bisa banget nih untuk langsung scan

QR code yang ada di layar. Jadi

teman-teman bisa daftar sekarang juga ke

Review Fullstek Software Engineering.

Kalau misalnya daftar dulu enggak bayar,

Teman-teman. Jadi bisa konsultasi

terlebih dahulu seputar kecocokan

karirnya teman-teman dengan bidang

software engineering. Dan tentunya ini

eh free registration ya. Jadi seperti

yang tadi aku mention tidak perlu untuk

mengeluarkan biaya apapun dulu ketika

mendaftar.

Nah, finally kita masuk ke dalam sesi

Q&A. Teman-teman gimana nih? sudah siap

untuk mendengarkan jawaban dari

pertanyaannya teman-teman semuanya.

Kalau gitu aku nanti langsung panggilkan

Kak Vandi ya untuk menjawab

pertanyaannya. Tapi mungkin aku bacakan

langsung nih pertanyaannya ada apa aja.

So, ada beberapa pertanyaan nih Kak

Fandi yang sudah masuk dari teman-teman.

Yang pertama datang dari Anonymus.

Pertanyaannya adalah kenapa website

menggunakan bahasa pemrograman

JavaScript-alih

menggunakan bahasa pemrograman populer

lainnya. Nah, kira-kira kenapa nih Kak

Fandi?

Jadi sebenarnya eh balik lagi ya tadi

kayak kelas yang sudah pernah aku

jelasin ya dari JavaScript ini bahasa

yang sangat powerful bisa dipakai buat

banyak hal. Jadi buat website interaktif

bisa buat game bisa buat mobile bisa

buat backend pun juga bisa.

Jadi ya ada alasannya sih kayak kenapa

itu dipakai satu ya bahasa ini cukup

gampang, cukup mudah dipahami apalagi

bagi orang awam ya untuk dibaca itu

mudah terus juga karena ya tadi yang

makai banyak berarti kan supportnya

banyak ya kalau teman-teman bingung mau

nanya ke siapa banyak library-nya banyak

gitu community-nya juga oke gitu ya jadi

itu jadi salah satu alasan juga nih

kenapa sih JavaScript ini populer banget

buat dipakai gitu

daripada bahasa-bahasa lainnya gitu.

Oke, thank you so much jawabannya Kak

Fandi. Kalau gitu langsung aja kita

lanjut ke pertanyaan yang berikutnya

nih, Kak. Datang dari love coding.

Pertanyaannya adalah permisi, Kak, izin

bertanya. Punten. Bagaimana JavaScript

mengeksekusi kode dan mengelola memori

saat menangani variabel, fungsi, logika,

dan manipulasi DOM di browser. Nah,

kira-kira bagaimana nih, Kak? Silakan.

Nah, bagaimana JavaScript mengeksekusi

kode dan mengelola memori saat menangani

variabel, fungsi, logika, dan menipulasi

DOM di browser. Nah, ini kompleks juga

pertanyaannya ya. Jadi, ya ketika

JavaScript itu mengeksi kode, mengelai

memori, menangani variabel fungsi, dan

logika, itu semuanya dilakukan di sisi

kliennya, di sisi browser ya. Jadi

enggak ada server tambahan, semua

dilakukan di browser. Jadi kalau

teman-teman buka di HP ya HP

teman-temanlah di situ dia mengelola

memorinya, mengeksekusi kodenya gitu.

Makanya banyak logika-logika atau bisnis

proses atau logik yang kompleks itu

tidak akan dilakukan di sisi front end,

tapi di sisi backend. Kenapa? Karena

kalau sisi front end itu akan

memberatkan device dari si user, kan.

Oke deh kalau pada pakai MacBook, pakai

HP-nya iPhone, Samsung Galaxy Note gitu

ya. Cuma kan enggak semuanya pakai

device-defice yang bagus gitu ya.

device-device yang powerful gitu.

Mungkin laptopnya udah lama, mungkin

laptopnya lagi buka banyak kerjaan gitu.

Nah, itu makanya banyak proses-proses

yang cukup berat, yang cukup kompleks

itu enggak akan dilakukan di front side.

Front side itu akan melakukan proses

seminimal mungkin gitu. Jadi supaya

kenapa supaya experience-nya user itu

enggak terganggu gitu.

Karena kalau kita bahas spesifikasi

sistem ya, spesifikasi sistem di front

end kan kita enggak bisa atur ya. User

mau pakai, oh user kalau membuka website

kita harus pakai MacBook enggak bisa

gitu. Tapi kita bisa atur nih server

kita sekuat apa, sebagus apa. Nah,

makanya kita bisa atur nih proses-proses

yang berat kita lakukan di sisi server

kita. Tapi proses-proses yang dibutuhkan

tapi cukup ringan itu kita bisa lakukan

di front end.

Oke, thank you banget jawabannya Kak

Fandi. Lalu lanjut ke pertanyaan yang

terakhir nih, Kak. Sayang banget ya

untuk malam hari ini. Pertanyaannya

datang dari Anonymus. Pertanyaannya

adalah malam Kak izin bertanya, kita

harus enggak hafal semua fungsi di CSS

atau nanti lama-lama akan hafal? Nah,

mungkin ini enggak cuman CSS ya, Kak.

Tapi bisa jadi di JavaScript juga karena

ada banyak banget fungsi, coding dan

juga kata-kata yang mungkin harus kita

hafalkan gitu ya terms-terms-nya. Nah,

kira-kira gimana nih Kak Fandi?

Nah, jadi ya ini mungkin pertanyaan yang

cukup sering tanyain juga ya dari

teman-teman ya apalagi yang baru belajar

gitu kayak wah ini di JavaScript ada

ini, di CSS ada ini, di HTML ada ini.

Ini apa mesti dihafal apa gimana gitu.

Jadi

mindset yang harus dipahami ketika

teman-teman jadi software engineer itu

adalah enggak perlu ngfal gitu ya. Kita

tuh enggak harus hafal kayak oh

sintaksnya se ini gitu. Sintaksnya

sebenar ini. Kayak tadi aku aja waktu

simulasi kan banyak eh ternyata salah

nih. Eh ternyata ini nih gitu. Eh

ternyata harusnya sama dengannya satu

aku bikinnya dua. Oh ternyata harusnya

aku get element by ID aku tipo pakai get

elements. Nah jadi yang perlu dipahami

itu apa ya? perlu dipahami itu adalah

teman-teman bisa paham konsepnya apa,

bisa paham caranya gimana, bisa melatih

skill itu dengan cara ngedebug ya.

Ngedebug itu cari permasalahan di kode

kita, gitu. Jadi ketika ada masalah

teman-teman bisa lihat tuh bisa analisa

kayak, "Oh, salahnya di sini, oh

salahnya di sini" gitu.

Karena bahkan kayak ya engineer-engineer

software engineer yang sudah sepuh

mungkin yang sudah puluhan tahun

berkarir pun enggak hafal semua sintaks

itu mungkin mereka entar ada tugas nih

kayak oh disuruh bikin button yang

bentuknya

persegi enam gitu

ya dia mungkin enggak hafal caranya

gimana gitu cuma dia tahu oh kalau cara

bikin persegi 6 aku harus carinya cara

ini. cari di internet, baca codingan

orang atau mungkin sekarang ya ada CJPT

gitu ya, tanya CGPT, baca kodingan CGPT,

oh caranya kayak gini dia yang

implementasi gitu. Jadi dengan adanya

sekarang kemajuan teknologi ya

teman-teman makin enggak perlu menghafal

semua itu gitu. Tapi teman-teman harus

tetap ngerti gitu ketika dikasih kode,

ketika teman-teman nanya, ketika

teman-teman nyari dapat R GPT,

teman-teman itu tahu caranya gitu. Oh,

ini tuh caranya kayak gini, bacanya

kayak gini, gitu. Nah, itu yang perlu

dipahami, ya. Jadi, mindsetting itu

bukan

melatih hafalan, tapi melatih daya

pikir, gitu. Oh, aku pengin bikin ini

berarti aku bisa pakai JavaScript.

Gimana caranya? Cari googling CJ GPT.

Oh, aku mau gini. Carinya ini, pakainya

ini, gitu. Jadi enggak perlu hafal

sintaks karena ya entar teman-teman

kerja juga enggak bakal dilihatin tuh

laptopnya kayak eh kamu buka dokumentasi

enggak boleh gitu. Enggak kita tetap

boleh buka dokumentasi justru ya masih

harus banyak-banyak baca gitu.

Mungkin tiga itu aja ya buat dari

pertanyaannya

[mendengus]

dari sisi KN. Mungkin kalau ada

pertanyaan-pertanyaan lain nanti bisa

didis bareng atau mungkin bisa dicoba

cari juga di tempat-tempat lain mungkin

dari browser, dari ee Indonesia dari GBT

dari Google atau dari YouTube gitu ya.

Kalau begitu aku izin lanjutkan lagi ya,

Teman-teman, untuk ee reminder-reminder

yang ada berikutnya nih. Selanjutnya,

nah aku pengin ngingetin ke teman-teman

semua seputar tugas untuk coding cam

nih. Jadi ada dua tugas ya yang harus

dikerjakan sama teman-teman semua. Jadi

keduanya ini sifatnya wajib. Jadi harus

banget dikumpulkan semuanya sebelum

deadline. Jadi yang pertama ada logical

and basic coding yaitu 25 soal pilihan

ganda. Nanti ada soal logical ability

dan juga ada soal basic coding. Jadi

perlu banget untuk disimak dulu ee

pertanyaannya baru menjawab supaya nanti

nilainya teman-teman ini pas gitu ya

bisa mendapatkan sertifikatnya. Nah,

terus selain itu untuk bisa mendapatkan

sertifikat juga teman-teman wajib untuk

mengumpulkan tugas yang berikutnya nih

yaitu coding project. Nah, di sini

teman-teman akan mengerjakan tugas

praktikal untuk mengaplikasikan skill

software engineering yang sudah

teman-teman pelajari selama di coding

Cam. Nah, di sini teman-teman akan

membuat sebuah project gitu ya yang

brief-nya sudah dibagikan juga oleh tim

Revoe. Jadi teman-teman bisa banget

langsung chose ke dalam WhatsApp

channel-nya sehingga teman-teman bisa

langsung cek di sana nih untuk link

tugasnya dan teman-teman bisa langsung

kerjakan dan kumpulkan sebelum

deadline-nya yaitu di hari Sabtu jam

12.00 siang. Jadi perlu untuk

diperhatikan ya teman-teman deadline-nya

hari Sabtu jam 12.00 siang. Jadi setelah

jadwal tersebut, setelah jam tersebut ee

linknya akan ditutup. Jadi teman-teman

sudah tidak bisa mengumpulkan lagi. Jadi

harus dikumpulkan sebelum hari Sabtu jam

12.00 siang ya teman-teman. Jangan

sampai terlambat. Terus ee yang perlu

diperhatikan lagi adalah pastikan

teman-teman mengumpulkan tepat waktu.

Selain itu, Teman-teman juga harus

memasukkan data yang sesuai, terutama

nama lengkap dan juga alamat email nih,

Teman-teman. Jadi jangan sampai ada

alamat email yang berbeda antara

pengumpulan tugas eh logical and basic

coding dan juga tugas coding project dan

juga email yang digunakan untuk

mendaftar ke coding CAM. Jadi pastikan

semua emailnya sama yang dikumpulkan

sehingga tim Revu tahu bahwa teman-teman

mengumpulkan tugasnya gitu ya. Jadi

pastikan emailnya sama semua ya

teman-teman. Jangan sampai ada yang

taipu atau ada yang berbeda. Jadi

ngumpulinnya jangan buru-buru,

pelan-pelan aja diperhatikan semuanya

sampai semuanya sesuai baru nanti

disubmit. Nah, terus teman-teman selain

itu juga wajib untuk hadir di semua

sesinya dan mengisi link presensi setiap

hari sehingga teman-teman bisa

berkesempatan untuk dapetin sertifikat

digitalnya.

Nah, nanti kalau misalnya teman-teman

mengumpulkan semua tugasnya nih dan

nilainya ternyata bagus gitu ya. Nah,

Teman-teman bisa berkesempatan untuk

dapatin ekstra benefit yaitu ee

accelerated track. Nah, di sini artinya

adalah teman-teman akhirnya sudah

melalui salah satu proses untuk daftar

ke Revoy Software Engineering Fullstack

Program. Jadi ee yang seharusnya

teman-teman tuh harus mengerjakan sebuah

assignment gitu ya, sebelum teman-teman

ee bisa mendaftar lebih lanjut gitu ya

ke ee ke dalam program Fullsack Revolu.

Nah, teman-teman di sini sudah nge-skip