Ngobrolin Form

5:50yang cukup apa ya lengkap gitu kan eh apa tentang fundamentalnya htmlk HTML terus security kayaknya eh itu bisa jadi

6:03materi tes yang bagus tuh kalau ada yang pengin bikin tes Sebentar lagi sebentar lagi ini kan sudah 2024 nih baru awal

6:12tahun sudah sewaktunya lapor pajak online di DJP online ya silakan aja mengisi form mengisi form itu e Form apa namanya 17 eh Evin

6:26Evin iya itu kan yang stepnya banyak form iya ah nomor nomor formnya kok gua lupa sih enggak perlu diingat kalau yang

6:39penting lapor pajak aja Udah ya laporan tahunan pribadi itu apa sih 1770 Oh iya tu antara 1770 1771 ya Eh

6:51kita kayaknya 1770 1770 aja atau 1770 S Nah itulah antara itu yang di pendatah ya itu jadi form itu terlihat

7:10gampang Ternyata banyak perintilanintilan yang integrasi terut integrasi yang membuat dia menjadi semakin rumit makanya ada banyak atau

7:21framewanak ya yangembantu kita mudah yang kita lihat di awal ya jadi ee mudah-mudahan nanti di ee apa di

7:36episode kali ini kita akan lihat eh form dari yang mulai sederhana sampai yang apa sih Eh kerumitan Apa sih yang

7:43eh terjadi eh dalam mengelola form ya mudah-mudahan kita bisa kupas tuntas malam hari ini dan kita mulai dari mana

7:53nih dari kita mulai dari form itu apa form itu apa ah di sini ya elemen indek kalau

8:06tem- form ini kelihatannya salah satu elemen html yang udah dari apa sejak html 4 ya 3 atau 4 ya pokoknya salah

8:16satu elemen html yang tergolong tua l udah dari 90-an jadi emang E itu emang form adalah bisa dibilang tuh kayak salah satu

8:29penanda dulu kan html cuma buat dokumen ya Fokusnya ke ee apa dokumen yang saling terhubung Heeh nah salah satu penandanya

8:39tapi kan makin lama makin bergeser jadi ada unsur interaksi ya terus selain kalau dokumen kan dokumen file image

8:48Teks itu kan kita membaca pasif nah form itu menandai kayak di dengan html nih kita bisa mengirim data ya kalau dulu

8:57yang ngirim data ke server ya langsung dari formnya sekarang juga sekarang juga ke server tapi ya bisali S bisa server S

9:05Nah jadi lanjut lanjut jadi form ini e memang apa ya Eh ini juga yang mungkin ya yang mungkin

9:17e apa ya memantik hadirnya web yang sebelumnya Adah webage gitu hanya halaman webam dokumen web kemudian Akhirnya bisa

9:30dimanfaatkan untuk aplikasi membuat aplikasi aplikasi kan identik dengan form ya mengambil input dari user Google ya search engine kan walaupun sekarang apa

9:44produknya macam-macam kan berawal dari search engine search engine itu kan ya literally beneran cuma form satu input

9:51apa t input apalagi misalnya ada Hiden juga dia ada banyak ya ya kayaknya semua aplikasi web pasti ada formnya ya Gmail

10:04ada formin apapun yang ada loginnya ya Pak Iya i ada formnya dulu pertama kali ada sosmet apa ya Friendster ya orang

10:13bisa kirim ya Selain ngisi profile kita sendiri bisa apa ya testimonial bisa kirim testimonial itu pakai ee form Oh sebelum itu malah ada

10:25gasbook kan dulu dulu banget pas awal-awal formbook itu semua perlu form pokoknya Kelihatan gak ada ya aplikasi Apun yang

10:38gak perlu form sama sekali bahkan blog statis pun apa makudnya blog blog atau artikel atau majalah publasi publication

10:47ada searchnya kan sear ada komentarnya biasanya walaupun ya mung pakpti dan lain Ini adanya eh form eh form itu ada

11:01eh beberapa metode yang bisa digunakan kalau eh tidak apa tidak kredensial bisa pakai get jadi ketika kita submit dia akan

11:12nambahin query string ya di url he di url he tanda tanya bla bla bla bla bla bla terus kalau misalkan datanya harus

11:24bersifat rahasia ya kita harus pakai metodya dan harus ada back end yang menerima kan ya Y yang memproses karena datanya akan

11:36dikirimkan dalam kalau begitu teman-teman klik kalau form met post ini kan begitu diubmit Itu kan bentuknya Post dan

11:45eh tipe tipe bodydnya itu x x form encoded encoded form form ya itulah anara Enggak di sini ya kayaknya ada di

11:56bagian bawah Ya nantilah oke iya nah ini dulu jadi form itu kalau kosongan ya tetap enggak ada gunanya ya jadi minimal

12:04punya apa punya input eh input atau select atau semacamnya nah yang belum pernah coba nih jadi kepikiran penasaran

12:13kalau form Enggak ada button-nya tuh bisa enggak bisa kan ya kalau kita klik enter bisa kec klik enter kalau dia

12:23sudah fokus ke sebuah ee sebuah input type ada di dalam kalau dienter atau apapun action action semacamnya submit

12:34kan default behaviornya jadi browser udah cukup pintar untuk mendeteksi Eh kalau misalnya bukan kalau bukan di mobile mobile kan e ada itunya juga di

12:48bawah di keyboardnya ada itunya ada kayak enternya masa bisa ya Ada enggak tahu ya Android sih ada enggak pernah pakai

12:58iPhone tuh beda-beda per browser lagi ya kan e semua yang di web itu adalah spesifikasi eh spesifikasi e standar yang

13:10menjabarkan Ini fungsinya begini gini gini expected behavinya gini gini gini masing-masing browser termasuk browser untuk masing-masing device eh apa

13:21menginterpretasi loh mas Bang iya gak apaapa kita lanjut ajaana jangan Bik lag Nah itu pas balik pas ya Oke Eh ini udah

13:37Terus gimana cara kerjanya ya ketika kita submit form browser akan ngecek e atribut-atribut formnya tadi kita sudah

13:44sempat bahas get atau po cuman bisa dua ya Iya kalau Put sama dan lain-lain enggak bisa du swkit sempat ada masalah

13:53kan nih gara-gara ini kayak ada di patching lah pokoknya intinya by default karena e jadi form ini ya ini kayaknya

14:01salah satu kasus apa ya kayak tahu kan teknologi web yang lama yang kayak udahlah teranjur dibikin kayak gini itu

14:08e jangan sampai ada breaking change Jadi sebetulnya kan bisa aja kan eh ngikutin apa hctp request type E request method

14:17standar kan sekarang udah ada Put ada delete kenapa enggak ditambahin tapi emang ternyata itu adalah keputusan yang

14:25emang udah gitu aja jadi get atau ya dan by default adalah get ya kalau kita gak ngisi metodnya apa dia ak

14:34menadiitu ya kalau di url yang saat itu tempat kita yang sama yang lagi kita buka saat itu i jadi satu-satunya cara

14:43untuk e bikin form memanfaatkan form tanpa backend hanya menggunakan metod get kalau harus Pak backend Ya baik

14:53itunya E mau diverless atau di apa S service atau tempat lain itu bebas terserah harus ada pat yang dipanggil

15:02Nah itu akan mengirim post request ke situ Entah itu namanya action kan form action kan atau e via button bisa kayak

15:13gini ya saya baru tahu juga nih form the aneh belum pernah pakai Iya ini juga the bel dia itu kan kalau action-nya ke atas

15:22itu kan misalnya kalau form action itu bisa ke pas yang mana Kalau buat form action-nya kalau memang mau beda pa

15:31Oh ada mau ada mau save as pending kan ada save contonya ih the banget ini bisa Biasanya cuma pakai atribute action yang

15:44di formnya aja terus di handnya di baah typnya submit kan button type submit Iya button type submit betul kalau ini

15:52enggak ada tyak kalau enggak ada typ-nya by default dianggap submit nah ini ini gaca ini Apa jebakan Batman yang agak

16:01nyebelin sih eh maksudnya kalau kita belum tahu ya Jadi kalau kosongan kayak gitu tuh makanya dicontoh itu kosong

16:08karena button cancel Harus dibikin cancel Heeh apapun itu pokoknya kalau misalnya bukan submit harus button type sama dengan button karena Kalau kosong

16:19itu eh di balik layar tuh default value-nya memang typ sama dengan submit nah dulu pernah nih pas belum tahu masih

16:27sembarang pas tahu kan form tuh ada next previous-nya misalnya formnya displit jadi beberapa gitu He misalnya screen

16:35sat cuma untuk nama sama apalah email terus next isi tanggal lahir validasi next nah Dulu gua pernah bikin nextpr

16:45button-nya enggak dikasih type sama dengan button Iya bingung dah begitu klik next langsung submit Oh meskipun di

16:53luar form Coba buka button enggak harus di dalam form Kalau di luar form ngapa-ngapain tapi kalau di luar form

17:00tapi kebetulan parent Entah di mana ada parent yang jadi enggak harus direct parent gitu pokoknya ada parent yang eh

17:08form elementen ya dia akan men-submit eh parent formnya itu nih to eler juga coba turun Scroll ke bawah selain form action

17:19em terus terus terus ada form action ada form type bisa diubah jug coding type bisa kita rubah juga pakai

17:30Iya itu by defult kan Ya terus kem jadi bisa kita kirim sebagai aplikasi Jon juga bisa dirubah dia akan mengoverride

17:38si form eh tergantung bat yang di ya jadi Iya ternyata bisa begitu juga form no validate bisa terus lagi

17:54turun F target g Oh bisa diatur semua dari Button ya ternyata mau ke diri sendiri atau buka eh Tab baru Tab baru atau

18:06window baru ya Iya eh name standar pop over targetp mungkin bisa next next ini kita Wah ini ini kapan-kapan 10 tahun lagi

18:20lah rilis pop over api terus next ada ini yang mau saya tunjukin satu lagi tipenya ini ni nih tipe kalau by default

18:34tu submit kalau mau bikin cancel misalnya cancel tapi enggak dibikin misalnya cuma labelnya doang cancel itu submit loh

18:44Harus dibikin tipenya riset Nah itu mau previousw next Apun itu kalau enggak ada type sama dengan bla bla bla dianggap sebagai submit oh g

18:56ya ya ya ya Wow unless ada PR prent kalauudah pas bisa

19:12diainan library ini vanil kita belum ngongbr makanya ini kelihatnya ter banyak yang bisa di ya banyak yang bisa

19:29diulik ya ternyata ya tadi dari Button Nah kalau buttonnya di luar form dia tipenya button enggak ngapa-ngapain

19:36enggak ngapa-ngapain enggak bisa ng enggak bisa enggak ada action apaap enggak m enggak mempengaruhi tempat lain ya Kita kan cuma bisa meng-capture event

19:47dari Button itu sendiri cuma kan enggak mempengaruhi siapapun kalau di dalam form ini kan berarti mempengaruhi elemen

19:54form di atasnya kan parent dan form itu bisa lebih dari satu di html tapi tidak bisa Bisa gak sih

20:03n belum perah Oke I know Just asking bisa dicobaisaob Oke Nah untuk eventnya sendiri javascript event kalau

20:20form itu dia adalah onubmit kan Ya I nama eventnya submit event tadi yang difing yang apa yang di

20:30Trigger kalau tadi kita bahas kalaupun enggak ada tombol submit-nya enggak ada button submit-nya kalau user enter atau

20:38apapun yang ekivalen lah tergantung device-nya ya eh pokoknya Eh ada shortcut-nya shortcut enter dan semacamnya itu eh event yang Trigger

20:48event submit makanya itu penting buat kita eh kayak form ini kan elemen html yang semantik ya semantik html Padahal

20:56kalau kita pakai client side library kan kalau kita pakai kayak r atau semacamnya kan e orang kadang ada yang malas ya

21:02bikin elemen form bikin aja input-inputnya doang dikasih button to bakal dipreventault padahal itu bukan praktik yang bagus itu bukan good

21:13practice karena ya itu kalau form itu udah banyak helperhelpernya kayak misalnya contohnya user ngtik enter itu langsung e nggger submit event dari form

21:24itu ya i ya dulu ngalamin sih kalau waktu belajar itu Walaupun ada formnya tapi tetap yang Dit on

21:36onas input masukin ke banyak gitu kan Terus habis itu kalau on submit baru dia submit ke e ke backend tapi kalau

21:46misalkan cuman on apa misalkan on CH e di inputnya atau buttonnya on dia gakmit diult dan lain juga juga ngalamin Tapi

21:58itu bukan prakk yang bagus ya Jadi kalau bukan pada tempatnya kalau bentuknya form yaah form karena ada banyak

22:07e apa ya Kelebihan dibandingkan kita gak pakai itu harus manual semuanya ya Nah lanjut lanjut jadi tadi

22:26iess Jadi kalau tadi kita sempat hanya

22:56bisaanyaurow jadi dulu Oh iya yang tadi dibilangan ya Iya akan mengoverride apa menimpa si atribute action darinya sendiri submit

23:09Itu bisa dua ya Bisa dua di satu form kalau memang mau beda Path Bisa jadi kayak tadi contohnya save as mungkin mau

23:19kirim sesuatu save and send atau jugendinghnya Dra atau publish yang yang cukup umum cas-nya itu ya Oke Jadi gak

23:34perlu hand pakai javascript contohnya gitu ya I itu bedanya Ya kalau the browser Add on form the

23:52form Oh bisa on charet dan lain-lain Y nah autoomplit ini penting juga ya karena He kalau kita sekarang pada pakai password

24:06manager ya iya iya jadi bisa eh bisa diisable kalau memang enggak enggak mau gitu by default Tapi ininya default-nya on ya

24:21Heeh default-nya on default on nah show for tuh contohnya ada contonya dia ada Oh ad Sil diliat

24:48send enter tadiah dibahas juga ya submit submit p to create a graphical submit button masih ada yang bikinicalit

25:04button ya sekarang bisa bisa sering Iya bikin yang dulu zaman CSS belum Canggih kali ya Kelihatan button peel button Pill Oh iya

25:19round Terus yang kayak ada efek kacakacanya gitu ya yang kayak ada efek terus juga ada input ty file untuk

25:32upload file tapi jangan lupa ininya multiple kan Apa tipe formnya enggak multip itu multipart form data kalau enggak itu saya pernah Kena

25:45dulu ini kok gak filenya diubmit kok gak bisa gitu kok engak kirim kosong di backend Oh iya lupa Nah bentar Scroll ke

25:56atas dulu deh tadi kayaknya nya ada yang kelewat sedikit yang di tipsnya itu atas atas nah eh yang tips yang kalimat kedua tuh

26:07don't disable the submit button while still awaiting valid user input Nah apa submit button ini eh juga ada seninya

26:17ternyata buat ngdisable kalau yang paling yang default yang vanila ya Enggak usah diisable sama sekali kan by

26:24default kan Eh misalnya kita enggak pakai javascript sama sekali ya udah submit button nyala terus tapi karena

26:32ada kalau pakai manipulasi client S kan salah satu pattern yang ngetren kan kalau user belum ngelengkapin semua dan

26:40belum valid itu submit buttonnya biasanya dimatiin dulu kan di greay out lah buat mengindikasi user belum bisa

26:48submit karena belum dilengkapi Nah itu ternyata ada tipsnya gak tahu kenapa sih ini penjelasannyaux dari perspektif UX

26:56mungkin ya ter ih lagi prosesisi userisi dari atas kan Ya misalnya ada feld pasti userield pertama dulu pasti samp berarti invalid

27:14dong karena masih kosong nah Ternyata kalau kasusnya kayak gitu buttnya yaudah dibiarin aja tuh katanya janganable saya termasuk salah satu yang

27:24salah kayak gitu Karen ya Karen desnya angitu ya Gak pernah mikir sampai situ sih Jadi intinyanya tetap bisa diklik sampai tapi

27:36ada pesan validasinya mungkin ya belum lengkap harap lengkapi dulu tapi Nah ada lanjutannya nih kalau udah disubmit nah itu baru yang valid untuk

27:49kita disable biar gak kliklik iya kalaulik kalah klik misalkan dia mau apa ya tiket War gitu kan W cepat-cepetan

28:01gitu kan bisa masuk berapa puluh kali kepenceta kebeli lima kayak yang barusan itu kan barusan kasus di apa viral di Twitter apa tuh

28:15kebeliak tuuh pop tuuh popm Via Via Via tiket kereta api Kalau enggak salah kalau enggak salah ya saya mungkin

28:26salah wow tapi sebenarnya asal enggak enggak disiram enggak dibuka disiram air Enggak apa-apa sih NY disiram semua disiram

28:34semua Oh disiapin semuain dia muncul bawa tapi gua enggak tahu kasusnya gimana mungkin formnya atau gua enggak tahu Jadi enggak enggak

28:43tahu konteksnya tetapi cuma lihat hasilnya Maybe I'm wrong maybe ya Nah cuma di luar kasusi pop itu heeh ini

28:51kalau batnya bisa terjadi kalau kita enggak disable bisa terjadi kepesan tujuh kali bias orang suka ya ada user biasa klik

29:02suka double klik gitu atau Enggak sabaran ini sudah keklik belum ya lupa tadi kayaknya Belum keklik diklik lagi

29:08gitu kan dan ini gak ada apa-apa klik lagi klik lagi klik lagi 10 iya bukan hanya di web juga ya di di

29:20platform lain juga ini adalah ee ee apa eh praktik yang bagus juga yang bisa di ee harus di apa ya implementasi

29:30Ya karena ya Kalau sekarang sih sudah gampang ya untuk membuat disable kalau udah diklik disable dan seterusnya nah

29:39ini tadi kita sudah sampai di upload terus pastikan type-nya harus multipart e udah eh ada kuisnya Coba jawab

29:56quisnya sudah benar Iya form data benar data dong bukan form file it isible to send user data without form no yes javpt bisa

30:10pakai javascript tadi Dib klik e on button press enter yes pokoknya benar benar dua salah sat dua I dapat

30:26apa cantik enggak Nah bisa ke link saya tuh input type contohnya input nah ini yang seru seru dan agak frustrating

30:37terutama kalau udah dikombinasi sama autoit iya input type itu bermacam-macam kawan-kawan ada t yang paling umum ya Heeh kalau

30:53ggak dikasih type itu e bisa muncul enggak sih diender engak sih g teks ya Ada checkbox itu juga tipe ya Iya ini F

31:03input input kan inputut kan ada checkbox ada radio ada ada color bahkan ya ini baru ya kayaknya color Wah

31:16colornya enggak kelihatan padahal udah dipencet Oh berarti dia buka di Winner Mas share Windows kan share Windows

31:23bukan makudnya cuma share Windows I Oh itu ngeluarin na colorer Ya iya ada di Window terpisah Mari kita ganti ya

31:36share screennya share entire screen ini tapi nanti jadi diimiz oh gak bisa Har disare dulu baru minimiz ini

31:52ya Kelihatan gak wah jadi kita bisa ganti warnanya sekarang udah natif ya ini adalah web komponen contoh Web komponen ini juga

32:03web komponen kalau dulu kita harus pakaibrary akhirnya itu Sen bang pas inii behavior ini berbeda loh antara

32:18antara browser browser antara antara OS lebih tepatnya OS dan browser Iya browser di IOS kan ggak ada

32:30browser lain Jadi ya Oh iya Apun browsernya enginnya tetap bawaan mereka berbeda Oke lebih tepatnya tiap browser

32:41engine beda-beda behaviornya nah begitulah pernah keserimpet ya sering jadi sekarang tanpa library pun sudah bisa ada color picker udah

32:56bisa date date time eh bahkan email email juga type ya e jadi bukan dia dia tetap teks tapi ada turunannya email

33:06Jadi langsung divalidasi bahwa ini bukan email nanti ada validasi kursusnya sendiri enggak perlu buat regeks yang panjang-panjangnya minta

33:16ampun panjang banget untuk ng udah enggak tahu nulisnya gimana ya Eh bacanya gimana Eh bentar cuma balik ke

33:25dat nih penasaran kayaknya ee terakhir ngecek sih e semua browser maager udah support kan ya dulu tuh pernah punya

33:32pengalaman unik eh ya itu input daytime cuma ngecek di yer lah Chrome Firefox Safari aja gak ingat dulu ngecek atau

33:43enggak terus dulu tuh di mobile sempat ngetrend kan Browser yang gimicnya data saving kayak UC Browser UC

33:52Mini browser antah berantah itu belum support in nah tapi lagi menariknya Apun yang di web itu kan emang biasanya kita apa

34:05failknya kalau gak Dis yaakowing erorun dan secara visual tuh tetap dirender sebagai input dong jadi ituangh jadi gak langsungak langsunged

34:20bahwa ada masal Mul tanggal tanggal dengan format yang benar ya Gak bakal kevalidasi Kanah itu itu menyebabkan bug yang lumayan unik

34:36ternyata setelah diselidikin yaitu karena ada Browser yang ada apa layout engine yang belum menupport Terus di back otomatis ke t

34:47tanpa tanpa UI Apa webonernya itu tapi untung sekarang Browser aneh-aneh yang kayak gituah punah ya browser engine yang Major Sekarang

34:58semuanya udah support juga H Nah kalau kita kirimin datanya kita submit post gitu bentuknya kayak gimana date ini

35:07string aja string kok sesuai sama ini ya 01/08/224 Ya Heh form itu kayaknya enggak bisa formatnya Bisa robah-robah

35:19ya diubah-ubah bisa duluan bisa berubah i ya bisa kita ubah ada ada properti nya ya Di inputp-nya ya untuk localization

35:31apa internationalization file juga berbeda-beda fungsinya per browser OS eh per OS yang kalau di mobile karena belum tentu bisa akses

35:45file tertentu secara privasi Oke Hiden ada type ternyata ada type image ya Ini juga saya baru tahu

35:54nih itu Al ada mon mon Oh baru tahu kalau ada Mon iya oh cuma ada bulan doang number standar lah ya number ada e

36:09Nah kalau di di di mobile eh di mobile ini langsung n KPAD Heeh Oh iya i kalau

36:16diklik dia muncul e number ya number only dan bahkan di mobile kalau kalau email pun eh munculnya juga keyboard ya

36:25keyboard bisa ngetik cuma disesu buat email dan biasanya kalau kita pakai aplikasi ap password Manager itu ada

36:32barnya sendiri buat e masukin login ada range Min dan susah bikin ini susahus

36:48pakar yes yes itu Inut Oh wow gak perlu include delete icon Wah asik juga

37:06gak usah bikin manual ya Iya telepon nah ini juga kalau di apa mobile ini harus pakai mobile kalau mau

37:16tes Oh I ini ya oke standar time ini turunannya tadi date ada URL Ini juga baru tahu ni like

37:29t but has validation parameter jadi kalau kita ngetiknya eh engak lengkap dia akan e komain beberapa beberapa keyboard di

37:41Android dia bisa tiba-tiba eh bisa menampilkan langsung ada button yang langsung dcom ada tu keybnya apa ada I obsolitnya time obsolit ya

37:56sudah enggak ada ya itu udah enggak ada karena sudah ganti sama udah ada date ya lengap ya enggak setelah ada dattime

38:05lokal namanya nih maksudnya udah dipecah-pecah jadi eh itu semua kan ada yangnyaet ada bulan doang ada time doang

38:14ada yang lokal ada yang standar yang default Oke lanjut ada lagi yang mau dibahas di sini ini atribut juga ada autoomplit nah

38:25automplit ini bisa juga Eh diisable ya didisable ataupun bisa untuk membantu atau komplitnya si password Manager

38:40he terintegrasi dengan aplikasi password Manager kitanya muncul gitu ya kalau dia Iya betul dan password Manager itu bisa

38:51aplikasi eksternal bisa dari browser sendiri jadi kayak misalnya kalau Chrome Safari ya Gak tahu mungkin Firefox ada

38:59juga atau enggak Nah itu dia bisa kasih suggest password yang kuat atau suggest pakai pas itu yang capture tuh juga menarik

39:10tuh bisa langsung kasih di file langsung bisa munculin kamera Webcam Webcam web kamera juga bisa kalau permissionnya e

39:22apa user udah allow ya berarti sebentar saya punya pertanyaan Kenapa namanya webcam web bisa dipakai di selain web gak bisa

39:36kan kamera apas kamera harusnya berarti computer cam ya tapi kurang Iya ya Heeh Ini to [Tertawa]

39:55i tadi kita sudahudah karena zaman dulu belum ada belum ada native native application yang pakai web pakai kamera

40:02Oh video call khusus untuk web gitu ya Iya oke baiklah ngasal sih gua ini kan tebakan estimasi prediksi

40:17ada di kalau mau dibaca Ini Acep misalkan file kita mau Acep hanya PNG sama gpack misalkan atau

40:28video formangan per tapi

40:55ternyata Biasanya kalau kita buka form itu kan kita berharap kita langsung ngetik kan maksudnya kan tapi ternyata di

41:06beberapa form itu dia tidak nambahin jadi begitu kita buka sat halaman Yangnya harus k dulu Pak mous di elem

41:17input pert untuk tapiudah nah cuma ini si autofokus nih ini kalau bukan sebagai respon dari user

41:34event misalnya apa Eh beneran di Initial page load terus misalnya Emang ada yang ada form yang kita pengin user isi misalnya sign up

41:46form lah jadi e ya Gak tahu ini beberapa tahun lalu gak tah sihgh Masih ng ini Atak jadi Eh bukan Bu bukan corwb

41:56vitlesnya ya Lighthouse kan ada saran-saran tambahan yang kayak untuk UX Gitu dulu tuh Lighthouse ngasih warning kalau misalnya page Initial page load

42:06ada input field yang diutofokus itu kayak dianggap kurang bagus untuk user experience salah satunya karena kalau di mobile kan kalau

42:16misalnya ada autofokus tiba-tiba setengah layar keyboard kan Jadi maksudnya tanpa user tahunya tiba-tiba e langsung kursornya masuk ke

42:27input karena autofokus dan tiba-tiba setengah layar tertutup dengan keyboard itu dianggap kurang bagus buat UX bagus tapi itu enggak masalah kalau misalnya

42:38user udah ya udah ada interaksi Apun misalnya Scroll Scroll down pun gak apa-apa misalnya ngeklik Ada apa Scroll

42:46ke bawah untuk mengisi form gitu misalnya terus kita hijack pakai apa eh javascript terus dikasih atribut autofokus ya itu enggak masalah pokoknya

42:55eh e sebaiknya e jangan di jangan dipasang di inial page load aja oke sebelum kita lanjut ini ada

43:05pertanyaan bagus sekali ini dari Krishna kalau input itu biasanya kan OS atau browser dependent ya tadi kan kita udah

43:11sempat bahas juga sempat singgung juga kan kalau mau dibikin konsisten itu ada guidel-nya enggak belum bisa ya kalau pakai bawaan

43:20browser sekarang justru guidelnya guidelnya tetap ada harus ada Al ituudah pasti itu fungsionalitas tapi ini UI pertanyaannya kalau UI

43:35bisa beda-eda beda-beda bentuknya jadi susah juga Dibilang ya Iya dan bahkan copy tnya pun terserah masing-masing browser

43:45jadi apa Eh kata-katanya misalnya apa eh email tidak valid itu ya wordingnya terserah masing-masing browser bahasanya sesuai bahasa yang yang dipilih user

43:57untuk browser itu jadi kita enggak bisa mengevel customization-nya ya Dari dari sisi pandangan user ya dari sisi P user

44:06mereka kan sudah menggunakan satu OS ya Jadi kalau memang mau pakai itu sudah terbiasa dengan UI itu jadi kalau kita

44:15bikin sendiri yang konsisten dengan kita punya misalnya kita mau buat sendiri ui-nya kita sendiri yang sesuai dengan

44:24semuanya sama konsisten semua ow jadi aneh karena mereka yang sudah pakai yang sebelumnya yang pakai standar loh kok

44:33begini sih De inputnya Kok aneh sudah terbiasa natural di IOS kan dia pakai Scroll ada kayak Scroll dia kayak

44:42jackpot itu kalau di di man Android kan Jadi kalau misalnya kita bikin konsisten jadi bing natural ya Nah cuma itu design

44:58decision apa eh product decision ya Kis eh ya itu trade off aja Kayak misalnya airbnb kan dia punya web app punya apa n

45:09app ya dia mereka bikin keputusan ya kan date pecker mereka khas banget kan sampai akhirnya library date library-nya

45:17pun di open source Nah itu kan keputusan dari sudut pandang produk jadi Emang mereka membbypass bentuk itunya n apaer

45:27timeckernya eh bawaan iOS atau Android dan lainlain betul jadi eh usernya jadi harus belajar lagi kurang familiar jadi

45:37eh untuk setiap OS dan terutama untuk setiap OS ya untuk OS yang berbeda itu biasanya ada guidel masing-masing

45:44Android seperti apa iOS Seperti apa kalaupun misalkan eh kita bikin E satu aplikasi yang sama untuk kedua OS Ini

45:54ngomongin mobile ya belum ngomongin Windows e Linux dan lain-lain itu eh masing-masing OS itu ada gadnya walaupun

46:03kita pakai R pakai flatter pokoknya pakai yang multiatform gitu ya itu tetap harus mengikuti guidelya si Apple sama

46:10guidel si Google Android itu berbeda keletakan tab bar posisi back button e button ukurannya kayak gimana itu semua

46:22udah diatur sama masing-masing OS jadi harus diikuti Wun kita bikinas bah jadi ya benar harus ngikutin cos-nya

46:32jangan sampai begitu orang buka Iya memang konsisten untuk semua tapier harus belajar lagi kan jadi effortnya di

46:40user gitu [Musik] kan Semoga e menjawabihanyaaganjut lagi lanjut ke manah

46:56bagian eh eh cuma ini bawahnya komen tadi ada poin yang menarik sih tuh yang biar tetap keyboard

47:08navigableable kan kalau bawaan apa ya tadi kan dibahas semua tuh dari segi apa UX terus masing-masing OS Nah ini nih e

47:20apa ini kan hal yangis ya di luar front kelihat gak ada yang it eh orang yang sadar tentang hal ini bikin apa Bikin

47:31custom De picker yang eh apa menerima tab event dan gampang dinavigasi pakai arrow pakai keyboard atau pakai berbagai

47:41tool sulitnya minta ampun itu Mak itu e memakan tenaga dan waktu yang cukup besar sih jadi itu Maknya apa Kalaupun

47:51kita mau bikin custom dengan berbagai pertimbangan itu hal yang harus dipikir di di depan jadi E itu tradeofnya saya

47:58itu mahal lah mahal dalam arti ngetes eh apa mastiin tab dan event-event lainnya dideteksi dengan baik E ngqa itu

48:09berjalan dengan baik semuaybelin sementara kalau dari browser itu gratis semua kita gak usah ngapa-ngapain ya udah e Build

48:22in Oke selanjutnya kita tentang validation dulu dari validation validationide nih seru nih iya ya kita ke e payment and best

48:37practice baru ke security terakhir kita ke frameworkfamework library dan Framework kalau untuk eh CL validation eh secara sejarahnya awalnya kan enggak

48:50ada ya input juga typ-nya awalnya teks doang kan yang melakukan validasi adalah kita D Jav dan lainlain dulu banget pas semua masih

49:01server Nah sekarang kita udah bisa menyatakan bahwa sebuah e input itu harus diisi terus mungkin formatnya bahkan sampai ke nomor telepon juga bisa

49:15kita engak tahu nih nomor telepon yang di Indonesia bisa valid enggak ya e email password itu e ada aturannya password bisa di diset

49:27ya di di klien ya ternyata ya bisa dan lain-lain kalau isinya kayaknya bisa pakai regex kok he dia terima regex

49:38Oh langsung ya dari properti html-nya engak Peru jaw script ya Heeh baru tahu coba iya ngedeteksinya munculin errornya ya tetap pakai

49:50javascript cuma validasinya udah fitur e web api itu bawa ow Dan ini juga kembali mengingatkan ya never CR

50:04datver karena bisa aja meskipun kita ada require ada tnya password atau email atau nomor telepon kita bisa dengan

50:15mudah klik kananp El re dihilangkanang jadi ada berapisapis valasi itu di apas web itu baiknya di client site

50:27divalidasi di server site web app-nya divalidasi terus di sisi service misalnya apa di back end ya biasanya itu

50:36apa best practice standar ya pasti dari mereka juga sanitize dan validasi juga tiga lapis jadi eh tipe-tipe CLI validation

50:46bisa Build in yang dari form dari HTML langsung yang kayak requir terus tipenya gitu ya kalau misalkan kita mau tulis

50:53nominal ya Tulis dalam e number walaupun dikirim tetap string Ya semua semua html form itu kirimannya hasilnya adalah

51:03string walaupun number dia tetaping tapi ada interf send I terus juga bisa via javascript ini yang kita lakukan dulu ya

51:19sebelum ada jadi kayak Wah gak boleh kosong harus ada isinya kita cek tuh Kalau valnya kosong ada warning pakai alertan

51:32[Musik] Dah Nah ini requ l l terus ada typnya ada pattern Oh ini yang tadi ya regularpression

51:51oke Dan kalau ada apa namanya ada kayak pop up gitu ya Iya langsung di bawah inputnya itu Wah enak banget kita engak usah

52:00ngapa-ngapain langsung muncul tapi ya itu enggak bisa dicustomize suka-suka browsernya tampilannya G OS dan browser yang yang e mengatur itu ya Eh

52:10stylingnya ya gak bisa kita ganti di CSS Oh enggak bisa kalau yang apa browser pop upnya Oke terusah tapi ngomongin CSS ini

52:25inputnya ada sudo valid jadi apa kalau valid misalnya basa dikasih border biru atau hijau atau apah tinggal tambahin not valid jadi bisa

52:36bikin berbeda ya Ada inval invalid invalid ada invalid Oh jadi kasih merah kalau invalid gitu ya wah enak sekali

52:45kalau dulu kita manual ya nambahin kelasnya banyak sekali hari ini enggak usah pakai javascript pakai javascript aduh mantap

52:54mantap mantap nah ini contohnya ya jadi adabelbel juga penting untuk ini juga p kena ada tulan di tulisan ini dia

53:15akannya nah ini kalau misalkan kita klik dia langsung ini ada -nya dia akan langsung ee apa namanya kursornya langsung men fokus

53:30fokus ke input yang ini harus sama sama ini ya Dan kalau error Oh enggak ada ya invalid loh invalid loh

53:45hilang contoh macam apa ini Enggak ada requirednya enggak ada required Oh iya ya itu kan baru satu step dia ada step

53:58selanjutnya Oh gitu Oh begitu ini tutorialeloper kalau ngasih contoh gua juga kalau bikin ngasih contoh kayak gini

54:15sihah kalau udah ditulis hilang warnanya karena ini hanya menggunakan CSS ya CSS juga udah ini banget ya ah lengkap

54:26ya submitting the form with value Oke kita coba ini beda tiap browser l browser bedopynya beda tampilannya beda terus

54:42bahasanya sesuai ini bahasa Inggris karena browsernya settingan browser Mas berbahasa Inggris kadangh kalau orang kalau kita KJA di

54:54protesh Eh misalnya apa situs kita bisa diakses dalam bahasa Indonesia dan Inggris user lagi buka bahasa Indonesia

55:01tapi bisa aja kalau emang settingan browsernya bahasa Inggris Ya itu errornya tetap bahasa Inggris dan engak bisa diapa-apain Oke karena di level

55:10browser jadi solusinya untuk itu apa kalau misalkan nih kita pengin bahasa Indonesia semu gitu tapi walaupun si

55:19usernya tap bisa kok dih Nanti kayaknya di bawah ada deh contohnya tapi harus banyak javascript sih maksudnya bisa pakai vanilla

55:27javascript e jadi kayak pesannya kita customize sendiri I kalau ini untuk contohnya untuk email ya biasanya ya

55:35regek ya p Coba ketik deh itu hah ketik apa iya contoh kalau errornya gimana Heeh Apple Apple loh kok boleh submit submit

55:48submit coba n nice coba banana banana coba canana canana enggak banana dulu oh Banana dulu biar Eh bisa we bisa kalau tadi kalau

56:07salah cerianana b itu contoh untuk Rex ya constraint for length of your entries mean length dan Max length Ini

56:25standar ya constraining the value of your entries eh number Terus apa lagi Eh udah ada legend legend ini untuk FS eh

56:38radio apa radio ya Nah itu oh radio butternya sekarang udah lebih bagus ya Kalau dulu kan kayak jelek gitu makanya banyak

56:50tergantung browser juga iya tergantung brower banyakknya diumpetin bin dibikin yang bagus gitu kan Ini tampilannya gini banget ya oh select nih

57:02ya merah begitu email address tuh W langsung muncul ini ya apa namanya manpya kan ty email ya karena ada typ

57:13email ya he using javascript kita bisa pakai javascript itu ada udah ada data typya sendiri Hmm

57:29oke kemudian validation message-nya bisa kita eh tambahkan kalau kita misalkan tadi ya mau ganti basanya atau mau ganti

57:40copywriting-nya ya ui-nya juga bisa kan kita bisa ngrender sendiri suka-suka Kita jadi pokoknya eh semua untuk customize itu pakai constraint

57:50validation api itu oh ah web api-nya sudah ada ya berarti tidak butuh library tambahan kan langsung vanila ya langsung

57:59udah Bisa pakai api ini ya implementing er Nah di sini Kanah ini Nah itu contohnya penjelasannya Oke lanjut ke pembahas itu

58:13ada contonya ada contohnya itu lihat contonya dulu ini ya Nah bentuknya kayak gitu jadi ya kitanya kita cek validity-nya Jadi kayak

58:26udah ada method buildin-nya type mismatch jadi ada apa jenis-jenis E value value apa aja yang bisa dicek udah ada tuh tadi di atas

58:35bisa dilihat sendiri nanti Cuma yang jelas apa buat nge-customize isinya ya kayak gitu oke oke mantap Wah udah udah

58:45enak banget ya zaman sekarang sudah enak sekali ini ada No validate no validate Ini adalah [Musik] untuk input valid inputnya ada requ ada

59:04minimumnya Del Tapi karena Val jadi bisa langsung ditak ini ya langsung ke javascripnya ya

59:22bertinyaak Yang error buildin browsernya enggak muncul kita hijack lah intinya di kita haack pakai javascript Nah itu kan

59:31custom tuh ui-nya ada ada warna merah ada border rounded Bahasanya juga bisa disesuaiin sama yang Eh kita mau mungkin

59:40bisa disesuaikan dengan eh desain sistemnya kita kali ya he Oke validating form without a Build in api ini kayaknya

59:59Jav validation dan lainlain Silakan baca sendiri ya oke eh ada yang seru nih eh apa tadi berhubungan sama radio button kan tadi

1:00:11kita bahas sekilas tuh radio button dulu bentuknya jelek eh maksudnya kurang kurang Oke warnanya juga suka-suka Browser dan kadang kan Engak sesuai sama

1:00:21apa branding kita sendiri sekarang sudah ada e CSS properti aksen color Wow aksen color wah lucu pakai Twin juga udah ada Jadi

1:00:35patokannya CSS udah apa udah e Stable di semua browser Tuh udah ada telwin e propertinya kalauwin udah ada artinya

1:00:45yang defaultnya ada ya Eh yang yang bisa diustom tergantung entry yang diselect jadi kalau kita pencet e pilih mail

1:00:53tetap hijau kalau gak salah enggak ya kuning oh gak ini ini customiz ya contoh contoh customization Oke tapi hovernya beda

1:01:05loh hover tadi Kalau yang hijau hovernya lebih lebih gelap Oh itu dihle sama browser sendiri sih Coba klik

1:01:17nahakya gelap oh karena ada kursornya coba kursornya pindahin I kannya bed di

1:01:34brus k ada tapi tulisan Ken

1:01:53gu kuning kalau misalnya apa bordernya enggak eh bukan warna yang Bold eh nanti kan jadi engakan enggak jelas Heeh

1:02:03enggak kelihatan jadi otomatis di-handle sama browser kelihatannya Iya ini tulisannya coba aja buka De tools nih guaranteyingibility In case of low

1:02:17contrast color Oh heeh betul betetul jadi kita misalnya yellow nih background-nya putih l kan e bakal kurang jelas ya gak kelihatan nah the

1:02:29browser In this case the browser bright jadi kayak bisa brower dengan inisiatif inisiatif punya inisiatif UI kita lebih

1:02:48akessib udah yangudah aman ya semua brower ada patokan gampangnya Udah masuk tailwin tapi kalau patokan formalnya enggak tahu udah masuk baseline udah

1:03:01masuk baseline apa belum Ya udah ini aksen t aksen ini udah salah satu yang dipresen eh waktu baseline di launch di

1:03:10Google io kemarin oke mantap Nah berikutnya kita akan bahas tentang payment Apa hubungannya payment sama form mau bayar harus form karena

1:03:24semuanya semuanya semuanya butuh uang engak itu form itu semuanya ada mulai dari Wah kelihatan kan itu pattern

1:03:32pattern boleh boleh kelihatan qu dulu dulu nah udah enggak kelihatan kan I ada pattern-nya ya kan Iya ada kard number

1:03:48itu kan 44 eh apa 44 44 44 44 gitu kan loh ini kok enggak ada minusnya ya

1:03:55engak otomatis ya gini kan gak tahu masingak gak [Musik] perlu kalauak usah Pak Nah benar Oh dia gak pakai minus

1:04:13ya terus nama expiry datennya kan harus adanya security codya Ada patternya Terus bagaimana dia disubmit Bagaimana harus e e apa namanya respons yang harus

1:04:26diberikan ini kan best practice ya Jadi kalau kita Scroll terus nanti ada addressnya lagiap add kan ada patternnya

1:04:33ya masing-masing Dari sini ya terus kemudian Eh nantiah ini ceklistnya pakai meaningful html template form input label jangan bikin yang aneh-aneh lah

1:04:47gitu ya label harus ada terus kemudianusah sebisa mungkin pakai ild in browser tipe dan Aut kena k tadi kan capek juga ya

1:05:00masambil k sendiri typing sendiri padahal sudah masuk apa Pakai apa tpe ya saya pakainya one password otomatisplitnya beres kan Iya

1:05:19benar terus ter e kalau kayaknya siit kan Jangan Pak input number karena bukan itu kan sebenarnya kan sebenarnya Tapi angka

1:05:36semua kebetulanya Num jadi di hanya memberikan dia bukan integer jadi Cum numik terus turun

1:05:53lagi disable sub button ketika di tadi ya Iya validated validate ini bahaya banget sih paling bahaya kalau Misnya keeklik

1:06:06berkali-kali Iya nih juga penting nih validate data during entry jadi setelah selesai e saat entry kasih tahu kalau

1:06:15salah jangan saat submit karena capek juga kan kalau udah isi panjang-panjang ya salah ke atas gitu H terus

1:06:23ee terus turun lagi turun lagi format jadi jangan limit karena add formatnya kita Indonesia tapi formatnya gak bisa tuh kalau misalnya orang dari

1:06:41singaporenya Pak t area untuk add disarankan ya Susah kan kita enggak hafal belum

1:06:57tentu hafal kode pos kita sendiri terus dahah itu aja sih yang penting terus Tesnya di beberapa browser device

1:07:09dan platform karena pastikan experience di beda-beda itu bukan disamakan pastikan experience-nya tidak terhambat dari tempatnya lebih jadi experience-nya

1:07:20smooth di beberapa eh Browser dan device jadi balik ke user Story kali ya as a user I can bla bla bla Nah jadi walaupun

1:07:29antar browser ke ua-nya lain-lain dikit eh atau mungkin pakai password Manager yang berbeda masing-masing user tapi pastiin user story-nya bisa jalan sampai

1:07:41selesai y Oke E ini ada banyak penjelasannya per per per cheeklist ini ada ada ada penjelasannya di bawah nanti teman-teman

1:07:52bisa baca Kenapa saya angkat ini karena payment form itu komplit ya banyak banget memakai patternpattern terus kemudian

1:08:04best pracnya bisa dijadikan maksudnya kasusnya cukup komplit untuk bisa diambil sedikit-sedikit Kalau kalian bikin form sendiri yang lain

1:08:14untuk case yang lain kalau mau belajar belajar dari bikin form payment setelah belajar bikin form payment form yang

1:08:22lain udahudah gampang ya Iya karena yang paling rumit di situ ya betul banyak gak juga sih form form

1:08:32pajak juga susah Mas itu kan duit berhubungan dengan pembayaran apal ngisi ngisi ngisi bukti potong Tuh kan banyak ya I

1:08:48oke nah pembahasan terakhir kali ya terakhir tentang ee library ini kan kita udah Apa udah lihat betapa rumitnya karena itu kan

1:09:00sebenarnya si formnya sendiri tidak rumit kalau hanya yang digunakan kalau hanya digunakan default basic terus engak basic sih maksudnya default aja gak

1:09:16perlu ada customisasi terus hanya untuk e apa ya ininya apa form meodnya tapi kalau udah itu hubungannya

1:09:29sama yang lain kalau misalkan kita mau kayak tadi kita mau ganti Seperti apa kita mau Setelah disubmit itu datanyamit ke datab ada

1:09:41proses dari validasi Dili kirimin datanya sampai Kei teris itui divalidasi setelah berhasil divalidasi baru ke database di

1:09:56database-nya biasa di orm-nya juga ada validasinya kan karena harus ngmapping harus memetakan antara tipe data yang ada di form dengan tipe data yang ada di

1:10:07database belum tentu sama I kan database Lebih Detail kan Ya pasti kayak angka aja ada macam-macam angka ada

1:10:15macam-macam kalau di javascript hanya ada number gitu kan kalau misalkan kita tadinya pakai floating e FL ya ya harus dip dulu

1:10:25pass in passpot dan lain-lain eh teks eh apa banyak k ada atau apalah karakter-karakternya input bolean input

1:10:37yang untuk l long enggak ada sih enggak ada ya belum ada ya location belumum Iya kalau Bu Lian misalkan di di input kan

1:10:47enggak ada Boan ya ada checkbo tapi kan hasilnya kan value-nya kan male female atau true itu checkbo ituup Radi Radi eh

1:11:00checkbox itu kalau diek isinya string juga kalau gak [Tepuk tangan] salahek it belum pokoknya semua yang apa semua yang

1:11:11di html itu kirimannya string gak ada tipe data lain Jadi itu harus di apa namanya dikelompokkan lagi Oh ini number

1:11:20ini string ini e apa bolean dan lain-lain diconvert lagi dikonversi lagi baru masuk ke database gitu makanya ada beberapa form

1:11:30e helper ya atau library Seperti contohnya ada formic nah ini formic cukup terkenal jugait sekarang favorit ya masih favorit

1:11:41ya masih favorit ini ada formic terus ada apaagi react H form kita lihat cara

1:11:57moasinya ya Silakan baca sendiri Ini dia yang bikik k terus Cara pakainya gimana inst pastinya terus ini

1:12:14dia ini Oh validate bisa langsung ditaruh di sini karena ini react jadi jadi satu atau bisa mau dipisah juga bo Ya

1:12:31silakan Terus kalau emailnya enggak ada dia bisa require Oh ini manual ya Terus kalau misalkan e value-nya ada dia akan

1:12:42melakukan validasi bahwa Emailnya sudah Val atau belum Kalau tidak berhasil dia akan pesan merurn pesan error

1:12:57kok jadi rumit ya ini baru bagian formnya Ya semua kebutuhan apa CLI side masuk situ semua ya Jadi emang jadi

1:13:06panjang tapi e semua kita ngurus di satu tempat Iya termasuk error messageennya ini kita ggak perlu ngurusin Oh ini

1:13:15harus di mana Di posisinya udah bisa kita taruh di mana aja yang kita mau dan lain-lain itu contohnya contoh kedua di

1:13:22sini ada react formnya kayak gimana Oh ini video ya Oh ada buat react native juga ya contohnya

1:13:31mana getting started-nya Enggak ada oh demo eh salah ini ya bukan Iya nah tuh example itu loh di baah ada menu look di

1:13:45bawah discroll di menu nah agak Kirain mau nyoba demonya tadi tadi ada contoh langsung eh mau lihat kodenya mau lihat

1:13:57kodenya Eh ini standar ya dan dia langsung on submit handle submit hand submitnya mana Oh ini namanya Apun dimasukin ke H

1:14:22terusut register example registernya Apa itu itu method juga berarti udah banyak banget hel dia bikin helper banyak

1:14:37nih POnya POnya library dia adalah helpernya register ini Gunanya buat apa ya Ada yang tahu gak ada yang

1:14:49Pak dia Itu helpernya dia oh Iya mau saya bu registeron nama ya name ya He name name

1:15:00ya untuk ngeregisternya bikin helper kalau input itu adalah first name input select itu adalah gender nah dia

1:15:09otomatis ngrender kayak ada eh label atau apa yang kayak id-id-nya semua dari situ dari yang dari nama yang kita

1:15:17masukin first name gender berdasarkannya eh dua-dua library ini atau beberapa library ini hanya eh untuk di client site aja atau ada gabung

1:15:31ke backend juga Oh tergantung jug perah Belum pernah coba sih kalau ini karena pakai react Hook Ya jelas buat di apa

1:15:41front end doang C side kalau kalau spell kit baru buat eh backend juga ya Jadi biasanya kalau di backend itu ada eh

1:15:50entah dia menggunakan ee m orm server atauver ada yang namanya zot kalau enggak salah ya dulu ya Eh itu untuk

1:16:03validasi itu kan bukan kalau zot itu kelihatannya bukan khusus buat form tapi untuk mvalidasi Heeh kita punya skema Ya

1:16:16udah kita terima data dari form atau dari Apun bisa divalidasi pakai Z Wi introduction langsung biar boleh boleh boleh banyak lagi kita

1:16:32harus Scroll ke bawah ya Oh iya ini untuk memvalidasi apakah eh e data yang kita kirimin mungkin

1:16:40dalam bentuk json itu e valid enggak untuk dikirim ke database Gitu ya kira-kira Gitu ya Apun dikirim diterima

1:16:49jadi kayak misalnya eppt kan sebenarnyappt itu kan kita kita enggak bisa ngandalin typ script pas lagi udah

1:16:55jalan kan karena kita enggak tahu kan datanya beneran ngikut kayak gitu atau ee maksudnya betul sesuai atau enggak

1:17:02jadi misalnya kita terima data kita bisa ngecek pakai zot juga mau kirim data nerima data zot itu ya agak agnostik

1:17:10dalam hal Maksudnya dia enggak peduli datanya dari mana dan untuk apa Jadi selain form ya bisa buat Apun yang

1:17:18pengin kita pastikan bentuknya kayaknya itu ada pluginnya deh eh apa Z kalau by default kita nulis skemanya di dalam zot Nah itu apa harus

1:17:29string misalnya tapi ada semacam plugin jadi kita tinggal ngasih typript e interface atau type aja e jadi dari

1:17:40pluginnya iya oke oke Wah menarik ya terus habis itu baru dilempar ke database at kalau Kay Prisma

1:17:52gituak ya ada di Oh Engak enggak validasi form sih Ya pokoknya kalau kita ngirim data ke Prisma datanya salah ya

1:18:00dia gak jalan dia throw eror Oh error gitu ya Heeh Ya itu kan PR sebenarnya apa inacce bisa kita pakai ya kita catch

1:18:09aja errornya kita pakai buat display e apa error validasinya kalau mau Wah ini ada yang udah pakai nih kalau

1:18:21si juga ada validation eh form validation ininya juga kan validation ada ada ada kayaknya ada classas lebih tepatnyaation class Hm Oh

1:18:36iya bisa di-custom juga pesan itunya apa error message-nya pernah pakai oke eh z ini menarik nih dia apa Eh dia

1:18:50enggak si zot-nya itu apa headless ya mak saya apa enggak bisa jalan di client side bisa jalan di server side B jalan

1:18:58Iya ini nih ee Mas Nyoman dari Bali dari Bali validasi Diend saya pakai validasi di front end bisa pakai zot schema juga

1:19:10untuk front end untuk validasi di react Hook form Oh bisa dikonektin ke Hook form ya terus di back end validasi lagi

1:19:16pakai zot skema yang sama Oh Jadi satu skema bisa dipakai untuk dua ya i i Heeh kita bikinnya sekali suotnya sendiri

1:19:26S bisa jalan di klien Oh oke i jadi eh selling point terbesarnya kayaknya itu kalau buat saya ya si zot ini jadi kita

1:19:36bikin satu eh skima bisa dipakai di front end bisa dipakai di back end jadi datanya lebih eh apa namanya

1:19:45eh sudah konsisten lah konsisten konsisten jadi sudahah sama l gu anggapannya Harapan ini cuma buat validasinya doang jadi enggak berurusan

1:19:56sama UI formnya sendiri Makanya tetap dicombine sama itu tadi contohnya kan dikomin sama form atau Apun atau form

1:20:05atau yang lain ya he bahasanya Run any Java banget itu Java banget oke nah Ini ada pertanyaan tapi o

1:20:20mau dijawab atau kita lempar ke aja jawab ajaung mungkin detailnya kalau masih P panjangub ya Seru nih pengin tahu juga

1:20:33soalnya goalsnya bisa bikin custom block sama template roadmap ya ya pertama roadmap belajar atau roadmap developer wordpressnya sendiri eh development

1:20:45wordpressnya sendiri di Iya di WordPress itu sudah ada eadap sendiri Iya sudah ada road tinggal buka

1:21:01learn.wordpress.com Nah itu sudah ada banyaks banyak coursessesnya di sana sebagian sudah [Musik]

1:21:19diranslatepr wordpress.com/arn DII iya udah eh dia dia diredirect ke situ redir sor Sori dorg lebih tepatnya kalauc itu

1:21:29untuk eh [Musik] learn.wordpress.org nah saya Bahasa Indonesia itu ini sebagian besar sudah

1:21:44dianslate oleh komunitas jadi Sudah bisa belajar mulai dari Oke ee tapi enggak ada roadnya ini ada ini corses semua

1:21:56tutorial corses semua ini courses harus diikutin satesuatu gitu mulai dari mana Kalau baru ya urut aja lah seris woh

1:22:05kalau kalau udah bisa di skip Komo contributoir ke WordPress ada ada tutorial ada ee ada eh series ya series series mana

1:22:18Iya Ikut yang coursesnya coursesnya kan sudah ada nah ini mau yang general silakan okeasihlah mulai dari sini supaya lebih

1:22:33supaya lebih Jaa ee setelah belajar tertarik dan terjemahkan jadi teman-teman yang lain bisa ikut terbantu Oh ini ada yang

1:22:46bahasa Oh ada sudah sudah sebagian sebagian kalau sudah ada ada yang EE itu languageanti oh lengkap tuh

1:22:57Ee kalau sudah ada yang bahasa Indonesia nanti dia ini e oh sudah ada pengenalan situs pengenalan editor situs dan

1:23:07template Wih dashboard tuh bahasa Indonesianya dashboard ya dashbard he dasb silakan dari sini mulainya ya dan

1:23:23bikin situs sendiri terus kemudian coba ikutin kursesnya bikin situs sendiri dan ikut komunitas pamerkan pamerkan dan ikut komunitas

1:23:39ke ada web challenge nih di tanggal 27 sekalian promo ya web challengya web untuk ngobrolin web Iya

1:23:50ini mah minta dibikin linknya itu e beneran dari event dari WordPress Eh ini official ya dari WordPress

1:24:02official Jakarta ya yang bikin komunitas Jakarta non apa namanya nonkersil bahasanya apa sih bahasanya non komersial ya

1:24:14nonkersial I ini C ini kayak skalanya C tapi ini namanya next gen next I makud dan kebetulan di sini adalah web

1:24:25challenge Ya silakan belajar terus ikut web challeng presentasikan iya iya password nah Jes nih siapa judesnya loh gak adaan kirain ada enggak Ian

1:24:42direkturnya saya nanti yang membawakan bagian workshopnya oh [Musik] seru ya Seru ya ada beginian ya Ini buat

1:24:57apa buat motivasi untuk belajar bagus ya betul keren Keren keren Oke Oke Oke semoga Cukup jelas ya Siapa tadi Bu

1:25:10kalau mau ketemu saya tanggal 27 Januari nanti ada di sana ini acaranya di mana di Jakarta di Taman Ismail

1:25:21Marzuki tanggal 27 itu harib Sabtu oke Ada lagi sebelum kita udahan udah itu dulu

1:25:38edisi nih besok-besok yang khusus bahas di Meta Framework sama libraryarnya tapi kayaknya panjang nanti jadinya adaih ada per dibah

1:25:51kayurity masih forum edisi du kapan-kapan area apa kayak area error bla bla bla belum web outen Arya invalid

1:26:02weben Iya banyak kan bisa jadi bisa jadi tiga episode ini kayak iceboard kan yang kita sering pakai di atasnya doang tapi

1:26:13dalam-dalamnya masih banyak Iya dikira gampang Ternyata ngomongin form aja Sudah hampir 1 Seteng jam ya I terus

1:26:20Biasanya kalau apa eh kita kerja di tim eh desainernya pasti cuma bikin eh apa ya bukan pasti kemungkinan bikin font

1:26:30yang happy part doang validasi bentuknya kayak gimana juga belum tentu eh dibikinin kan jadi Biasanya kita harus

1:26:38improve send kadang label posisi dia suka misalnya gini e dia bikin dua kolom I kan tetapi labelnya dibikin pas-pasan

1:26:48tapi kalau misalnya di Translate jadinya tambah panjang terus gimana bentuk Oh I kalau ada validation message Enggak muat

1:26:55Enggak pasti pasti enggak e pasti banyak yang enggak mikir sampai sana sih Iya jadi ada eh apa namanya secara UI I itu

1:27:04tugas kita yang apa ngasih awareness maksudnya karena kan emang ini ya ini tanggung jawab kita jadi kita yang harus

1:27:11educate Mas di tiketnya atau pas lagi Eh apa bagi tugas ya kita bilang kalau form tu perlu giniini

1:27:19gini i i Iya mungkin pertanya kalau mau form itu perlu gini-gini sudah ada best practisnya di mana gitu bisa dilihat gak

1:27:28ada yang bikin standar atau I payment best kan sudah saya kasih tuh payment tapi secara general mungkinl terlalu subjektif kali ya

1:27:41maksudnya form itu kan ya itu tadi mau bikin komen mau search engine mau ngepost status semua pakai form terlalu

1:27:51luas mungk What on your mind contohnya on my mindulu ya Facebook Ya itu kan Facebook Heeh itu apa ionic

1:28:01banget kan What on your mind kalau Twitter apa X gak tahu gak tahu kalau Twitter tulisannya by default apa gak adaer Eh

1:28:16kita kita bahkan belum bahas apa select elemen ya tadi sempat ngelihat tapi ya E cuman sekilas banget ya besok-besokah episode

1:28:27du Lumayan lumayan tricky juga tuh select elemen karena kan eh terutama misalkan kita eh pilih Terus kalau kita submit terus

1:28:39submitnya error errornya di tempat lain atau di situ juga itu kan yang pilihannya Kan balik lagi ke nol kan

1:28:45balik lagi ke default paling atas kan harus di apa ya Kalau dulu kan harus di ada logikanya if ini ya masukin yang

1:28:56sini kan kalau pakai backend atau kayak PSP yang bahasa backend gitu kayadiudah diudah dihle yaudah

1:29:15otomatis ada ada apa areaadi gar-ara are terus kayak ada seni-seninya eh ada sih best practi-nya kayak placeholder

1:29:26sama atau hint jadi makudnya teks keterangan yang hint itu katanya enggak boleh ditaruh sebagai placeholder I besok-besoklah detailnya

1:29:37H kalau Twitter pakainya What's happening What is happening oh oh iya karena Twitter itu kayak positioningnya buat update terbaru ya kalau Facebook

1:29:49buat curhat curhat oke oke oke oke kalau begitu mungkin untuk malam hari ini Sekian dulu terima kasih banyak buat semuanya yang sudah

1:30:01nonton dan sudah berdiskusi malam hari ini jangan lupa kalau ada yang mau diskusi lebih lanjut bisa ke keesana.in/

1:30:09ngobrolin di sana ada github repo klik aja discussion terus nanti bisa eh kita buka aja ya.com ngobrolin ter terus di sini ada

1:30:22discusion nah ini kita bisa minta request mau bahas apa contohnya sini ada Inter 2024 ada dokumentasi form malam ini ada monoro

1:30:37bisa diote kalau yang udah login bisa Diot terus juga mau submit misalkan tadi mau lanjut pertanyaannya tentang roadmap

1:30:47WordPress bisa diskusi lagi di situ e kalau mau showas juga juga Boleh silakan pilih aja kategorinya yang mana pada

1:30:54saat ee input form nah ngisi form di sini untuk form masukin diskusinya untuk subit diskusinya ya jadi itu di atas ada searb

1:31:07itu juga form juga form dan yang apa topik terhangat sejauh ini masih webscket ya Yang Belum Yang

1:31:19belum kita bahas ee Ee kita usahakan coba cari apa Eh Topik yang cocok atau narasumber yang sesuai

1:31:32mudah-mudahan beliau mau diundang ke acara kita malam hari ini Oke ee Sekian dulu terima kasih banyak e Sekali lagi

1:31:39selamat malam sampai jumpa lagi Selasa depan jam 00 malam sampai jumpa bye bye bye than