Ngobrolin Form - Ngobrolin WEB

2:05sama tapi borang sama nggak sih borang-borang bahasa itu form Malaysia ya

2:17Indonesia kayaknya eh masa mali Indonesia Indonesia Indonesia borang online serius

2:28ya formulir orang-orang berkas formulir ya ini tuh jenis-jenis kata yang paling masih

2:44fananindo yang ngerti kayak kalau kita orang awam yang bukan bahasawan tuh kayaknya nggak

2:48pernah denger ya Iya bahkan pakai yang unduh unggah aja masih jarang kan laring-during

2:54dari ngeluring-ngeluring dari ngeluring-ngeluring orang-orang tapi kita bahas Borang orang-orang

3:12itu bisa juga ranjau itu ada link KBBI nya Oh oke kita ngomongin tentang ranjau

3:22yang kedua formulir borang ya oke ya today I learn ya mulirnya formulir bahasa Indonesia

3:35permuliah adalah borang Indonesia baku ya keren juga itu kita bisa jadi pemulihan kita

3:41proyek kita lucu-lucuan itu tl Iya udah I learn bahasa Indonesia hari ini saya belajar

3:48hari ini belajar

3:52Hai isp hari ini belajar Hai b-hai es-es Bihai es gimana ini developer pada nggak bisa ngejek

4:02Iya keren tuh kalau kita bikin-bikin aplikasi kecil-kecilan high-end kayak what's in your

4:09mind tapi hari ini belajar apa typing posting ke sosial media udah gue bisa bisa bisa yang

4:20di Bali lagi nih itu bagus kalau enggak nonton episode lalu bingung ya ini ya ya ininya Layout Oke kita akan belajar tentang borang atau formulir atau form

4:40Form itu susah-susah gampang.

4:45Bagi saya susah.

4:47Susah ya?

4:49Susah.

4:49Tapi kan kelihatannya...

4:51Form itu yang paling basic.

4:53Cuman gitu doang.

4:54kelihatannya ya kelihatannya ya di apa di atasnya apa surface-nya kelihatannya kok ya cuman itu

5:01ditambah submit validasi sedikit-sedikit udah kan gitu kalau misalnya yang enggak apa-apa

5:09sekebut baru belajar dan ya terlalu ngulik pasti enggak sadar ada validasi iya forum

5:15client-side betul ada yang di kalian saya terus di server-side nya juga di validasi terus

5:22berhubungan sama database layarnya juga harus validasi berhubungan dengan privacy berhubungan

5:29dengan security berhubungan dengan accessibility Oh iya banyak ya itu sebenarnya mungkin kalau

5:36misalnya nanti temen-temen ada yang apa bikin tes buat front-end dev kayaknya bagus tuh ngetes

5:42apa kalau library doang atau apa kan ya bisa dipelajarin cuma form nyuruh orang bikin form

5:49itu kayaknya tes yang cukup apa ya lengkap gitu kan apa tentang fundamentalnya HTML semantik

5:58HTML accessibility terus security kayaknya itu bisa jadi materi tes yang bagus tuh kalau ada

6:06yang pengen bikin tes ronde lagi sebentar lagi ini sudah 2024 nih baru awal tahun sudah suatunya

6:14lapor pajak online di DJP online silahkan aja masih full mengisi form itu eh form apa namanya

6:2317 eh Evin Evin Iya yang freelancer itu kan yang stepnya banyak Om Iya ah nomor-nomor

6:35formnya coba lupa sih nggak perlu diingat kalau penting lapor pajak aja udah ya laporan tahunan

6:43body itu apa sih 1770 Oh iya antara 1770 1771 ya kita kayaknya 1770 170 aja atau 1770 S Nah itulah

6:58antara itu S itu yang dibawah umr pendapatannya Nah itulah yaitu jadi form itu terlihat gampang

7:10tapi ternyata banyak perintilan-perintilan yang integrasi, terutama integrasi yang membuat dia menjadi semakin rumit.

7:17Makanya ada banyak library atau framework, library kebanyakan ya, yang membantu kita untuk memudahkan.

7:24Kenapa ada framework ini? Karena memang sulit, karena memang tidak semudah yang kita lihat di awal.

7:31Jadi mudah-mudahan nanti di episode kali ini kita akan lihat form dari yang mulai sederhana sampai yang apa sih, kerumitan apa sih yang terjadi dalam mengelola form.

7:48Mudah-mudahan kita bisa kupas tuntas malam hari ini.

7:51Dan kita mulai dari mana nih?

7:54Kita mulai dari form itu apa?

7:56Form itu apa?

7:56dari sini ya elemen indek ini salah satu elemen HTML yang udah dari apa sejak HTML 4 ya tiga

8:14atau empat ya pokoknya salah satu elemen HTML yang tergolong tua lah udah dari 90-an jadi

8:24memang itu emang form adalah bisa dibilang tuh kayak salah satu penanda dulu kan HTML cuma buat

8:31dokumen ya fokusnya ke apa dokumen yang saling terhubung salah satu penandanya tapi kalau makin

8:40lama makin bergeser jadi ada unsur interaksi ya terus selain membaca kalau dokumen kan dokumen

8:47file image teks itu kan kita membaca pasif nah form itu menandai kayak di dengan HTML

8:55kita bisa mengirim data ya kalau dulu yang ngirim data ke server ya langsung dari formnya sekarang juga sekarang juga ke server tapi ya bisa client site bisa server site nah jadi lanjut jadi form ini memang apa ya ini juga yang mungkin ya

9:16yang mungkin memantik hadirnya web apps yang sebelumnya adalah webpages gitu kan aplikasi

9:26hanya halaman web, halaman dokumen web, kemudian akhirnya bisa dimanfaatkan untuk aplikasi.

9:33Membuat aplikasi.

9:34Ya, aplikasi kan identik dengan form ya.

9:38Mengambil input dari user Google, ya search engine kan,

9:42walaupun sekarang produknya macam-macam kan berawal dari search engine.

9:46Search engine itu kan ya literally beneran cuma form satu input, text input, search.

9:53apalagi misalnya Facebook

9:55ada hidden type-nya juga dia

9:58ada banyak

9:59ya, ya

10:01semuanya semua aplikasi web pasti ada form-nya ya

10:03Gmail, ada form-nya

10:05apapun yang ada login-nya ya Pak

10:07ya ada form-nya

10:08dulu pertama kali ada sosmed

10:11apa ya, Friendster ya, orang bisa

10:13kirim, ya selain isi

10:15profile kita sendiri bisa

10:17apa ya, testimonial

10:19bisa kirim testimonial

10:21itu pakai form

10:23oh sebelum itu malah ada guestbook kan

10:26dulu banget pas

10:27awal-awal

10:28contact form, guestbook

10:31itu semua perlu form

10:34pokoknya kelihatan gak ada ya

10:35aplikasi apapun yang

10:37gak perlu form sama sekali

10:40bahkan blog status pun

10:42apa maksudnya blog

10:43blog atau artikel atau majalah

10:45publikasi, publication

10:47ada searchnya kan, search form

10:48ada komentarnya biasanya

10:51Walaupun ya mungkin pakai

10:53Terparti dan lain-lain

10:54Tapi tetap ada form

10:55Ini ada contohnya

10:59Form

10:59Form itu ada

11:01Beberapa metode yang bisa digunakan

11:04Kalau tidak

11:06Tidak kredensial

11:08Bisa pakai get

11:09Jadi ketika kita submit dia akan nambahin

11:13Query string ya

11:14Di URL

11:15Tanda tanya

11:18Blablabla

11:19terus kalau misalkan

11:21datanya harus

11:23bersifat rahasia ya kita harus

11:26pakai metode yang post dan

11:28harus ada

11:30backend yang menerima kan ya

11:31yang memproses

11:34karena datanya akan

11:36dikirimkan dalam

11:37kalau begitu teman-teman klik

11:39kalau form metode post ini kan

11:42begitu disubmit itu kan bentuknya

11:44post dan

11:45tipe

11:47tipe badai itu xxx form encoded form form encoded ya itulah antara itu nggak di sini kayaknya ada

11:56di bagian bawah ya nantilah oke ya Nah ini dulu jadi form itu kalau kosongan ya tetap nggak ada

12:03gunanya ya jadi minimal punya apa punya input input atau select atau semacamnya nah yang belum

12:11coba nih jadi kepikiran penasaran kalau form nggak ada buttonnya tuh bisa nggak bisa kan ya kalau kita

12:18bisa kecuali kalau dia sudah fokus ke sebuah sebuah input type di dalam form kalau di enter

12:31atau apapun action semacamnya submit kan default behaviornya jadi browser udah cukup pintar untuk

12:38mendeteksi kalau misalnya kalau bukan di mobile mobile kan ada itunya juga di bawah keyboardnya

12:50ada itunya ada kayak enternya bisa ya ada nggak tahu ya Android sih ada nggak pernah pakai iPhone

12:58Nah, intinya browser...

13:01Beda-beda per browser lagi.

13:03Ya kan, semua yang di web itu adalah spesifikasi.

13:08Spesifikasi standar yang menjabarkan ini fungsinya begini-gini,

13:12expected behavior-nya gini-gini, masing-masing browser,

13:16termasuk browser untuk masing-masing device mengerjakan.

13:22Loh, Mas Risa ibang.

13:24Iya.

13:24Oke ini udah terus gimana cara kerjanya ya ketika kita submit form browser akan ngecek atribut formnya

13:43tadi kita udah sempet bahas get atau post cuman bisa dua ya

13:48Iya kalau put sama dan lain-lain nggak bisa dulu swellkit sempet ada masalah kan nih gara-gara ini kayak ada di patching lah pokoknya intinya

13:56by default karena jadi form ini

13:59ya ini kayaknya salah satu kasus apa ya, tau kan teknologi web yang lama yang kayak udahlah teranjur dibikin kayak gini

14:07jangan sampai ada breaking change, jadi sebetulnya kan bisa aja kan ngikutin HTTP request method standar kan

14:18sekarang udah ada put, ada delete, kenapa gak ditambahin?

14:22tapi emang ternyata itu adalah keputusan yang emang udah gitu aja, jadi get atau post

14:27dan by default adalah get ya

14:31kalau kita gak ngisi metode nya apa

14:33kalau kosong

14:34di url yang saat itu

14:38tempat kita yang sama yang lagi

14:40kita buka saat itu

14:41jadi satu-satunya cara untuk

14:44bikin form

14:45memanfaatkan form tanpa backend

14:48hanya menggunakan metode

14:49get, kalau post harus pakai

14:51backend ya, baik itu backend nya

14:54mau di serverless

14:56atau di

14:57apa function as a service atau tempat lain itu bebas harus ada part yang dipanggil itu akan

15:04mengirim post request ke situ entah itu namanya action kan atau via button bisa kayak gini ya

15:13saya baru tahu juga nih form action to the island

15:18itu kan kalau actionnya ke atas itu kan misalnya kalau form action itu bisa ke

15:26party yang mana kalau kalau memang mau beda pas Oh ada ada mau save spending

15:36biasanya cuma pakai attribute action yang di form nya aja terus di handle nya di bawah

15:47kalau nggak ada type nya by default dianggap submit nah ini gaca ini apa jebakan batman

16:01yang agak nyebelin sih Masai kalau kita belum tahu ya Jadi kalau kosongan kayak gitu tuh makanya

16:06dicontoh itu kosong karena baton cancel dibikin cancel apapun itu punya kalau misalnya bukan

16:14submit harus button type sama dengan button karena kalau kosong itu dibalik layar tuh default value

16:22nya memang type sama dengan sapit nah dulu pernah nih pas belum tahu masih sembarang kopas tahu

16:29form tuh ada next previousnya misalnya formnya di split jadi beberapa gitu misalnya screen satu

16:36cuma untuk nama sama apalah email terus next isi tanggal lahir di validasi next nah dulu

16:43gua pernah bikin next pref buttonnya nggak dikasih type sama dengan button iya bingung

16:49dah begitu klik next langsung submit meskipun di luar form coba buka button yang harus di dalam

16:57kalau di luar form ya nggak ngapa-ngapain

16:59tapi kalau di luar form

17:00tapi kebetulan parent entah dimana

17:02ada parent yang jadi nggak harus direct parent gitu

17:05pokoknya ada parent yang

17:07form element ya dia akan

17:09men-submit parent

17:11formnya itu

17:13nih today alarm juga coba turun

17:15scroll ke bawah selain form action

17:17terus terus terus

17:21ada form action

17:23ada form encoding

17:24ada koding type bisa kita rubah juga pakai yang tadi kita sebutkan ya Iya itu by default kan

17:31terus jadi bisa kita kirim sebagai aplikasi JSON atau semacamnya

17:37juga bisa dirubah dia akan meng-override si form

17:39di Indonesia itu dialog juga for novalidate bisa terus lagi turun

17:54from target on target Oh bisa diatur semua dari button ya

18:00ternyata yang diri sendiri atau buka atau baru-baru atau window baru ya ya

18:08name standard popover target mungkin bisa next ini kita

18:17ini kapan-kapan 10 tahun lagi loh release popover API

18:25terus next ada ini yang mau saya tunjukin satu lagi tipenya ini nih

18:33tipe kalau by default to submit kalau bikin cancel bisa cancel tapi enggak dibikin misalnya cuma

18:41labelnya doang cancel itu submit loh harus dibikin tipe reset Nah itu mau previews next

18:49apapun itu kalau enggak di type sama dengan blablabla dianggap sebagai submit oke iya

18:56Wow unless ada prevent default

19:05prevent default ya ya kalau prevent default udah pasti bisa diapa-apain

19:11tanpa library ini funny lah kita belum ngomongin library

19:17makanya ini form kelihatannya simple tapi ternyata banyak yang bisa di ini ya banyak

19:28yang bisa di klik ya ternyata ya tadi dari button Nah kalau batannya di luar form dia

19:35tipenya batang nggak ngapa-ngapain nggak bisa nggak bisa nggak ada action apa-apa

19:42gak mempengaruhi tempat lain ya kita kan cuma bisa meng-capture event dari button itu sendiri

19:48cuma kan enggak mempengaruhi siapapun kalau di dalam form ini kan berarti mempengaruhi elemen

19:54form di atasnya kan di parent dan form itu bisa lebih dari satu di HTML tapi tidak bisa bisa

20:02Oke oke

20:09untuk eventnya sendiri JavaScript event kalau form itu dia adalah on submit kan ya

20:22ya nama eventnya submit event

20:26nah submit event itu tadi yang di firing yang apa yang di trigger

20:31kalau tadi kita bahas kalaupun gak ada tombol submitnya

20:35gak ada button submitnya

20:36kalau user enter atau apapun yang equivalent lah tergantung device-nya ya

20:41pokoknya ada shortcutnya shortcut enter dan semacamnya

20:46itu event yang trigger event submit

20:49makanya itu penting buat kita kayak form ini kan elemen HTML yang semantik ya semantik HTML

20:55padahal kalau kita pakai client-side library kan kalau kita pakai kayak react atau semacamnya kan

21:01orang kadang ada yang males ya bikin elemen form bikin aja input-inputnya doang dikasih

21:07button atau bakal di prevent default padahal itu bukan praktek yang bagus itu bukan good practice

21:13karena ya itu kalau form itu udah banyak helper-helpernya

21:16misalnya contohnya user ngetik enter itu langsung ngetrigger submit event dari form itu

21:23ya ya ya dulu ngalamin sih kalau waktu belajar react itu

21:28walaupun ada formnya tapi tetap yang ditrigger adalah on click

21:33on click, ngesing input masukin ke state banyak gitu kan

21:39terus habis itu kalau on submit baru dia submit ke back end

21:45tapi kalau misalkan cuma on change di inputnya atau buttonnya on click

21:53dia gak submit tapi di pretend default dan lain-lain

21:57dia juga ngalamin tapi itu bukan praktek yang bagus

22:00jadi kalau bukan pada tempatnya kalau bentuknya form ya

22:03karena ada banyak kelebihan dibandingkan kita gak pakai harus manual semuanya

22:12lanjut

22:15lanjut

22:17jadi tadi kita udah sempat

22:19kalau

22:20ya

22:22How can you access and process the form data?

22:25The submitted data can be handled by JavaScript on the frontend using GET

22:29or by code on the backend using GET or POST.

22:34Jadi kalau tadi kita sudah sempat bahas juga kalau di frontend hanya bisa GET tapi kalau di bn bisa dua When the form is submitted the browser makes a request to url that is the value of the action button

22:49action attribute dari form

22:52The browser check if the submit button has form action attribute

22:58Jadi di check dulu

22:59Oh iya yang tadi dibilang Ivan ya

23:01akan meng-override apa meningkat si atribut action dari punya sendiri kalau ada itu bisa

23:10dua ya bisa dua di satu form kalau memang mau beda path bisa jadi kayak tadi contohnya save

23:18mungkin mau kirim sesuatu save and send atau save and save as pending contohnya

23:25draft atau publish yang cukup umum use case nya itu ya jadi nggak perlu handle pakai javascript

23:35contohnya gitu ya oh iya itu bedanya ya kalau beda plus ya oke the browser looks up additional

23:45attribute on the form element for example decide if the form should have validate it or no validate

23:53bisa dikasih no validate auto-complete off auto-complete on charset dan lain-lain

23:59nah auto-complete ini penting juga ya karena kalau kita sekarang pada pakai password manager ya

24:07jadi bisa bisa di disable kalau nggak mau gitu by default tapi ininya defaultnya on ya

24:20defaultnya on

24:23nah show form itu contohnya

24:27ada contohnya

24:29ini dia

24:31ada code pen

24:33oh ada glitchnya

24:34silahkan dilihat sendiri

24:37terus ensure user can submit

24:44you can click submit button or press enter

24:49tadi udah dibahas juga ya

24:51the third option is to use input type image

24:57alt submit, ssd submit

24:59png to create a graphical submit button

25:01masih ada yang bikin

25:03graphical submit button gak sekarang

25:05image

25:06sering

25:10dulu jaman CSS belum canggih kali ya

25:13kelihatannya

25:14button fill

25:16oh iya

25:18terus juga ada input file untuk upload file tapi jangan lupa ininya multiple kan

25:37apa itu multi-part form data Yes kalau enggak itu saya pernah kena dulu ini kok nggak Fanya

25:47disamping kok nggak bisa gitu kosong kiri sing kosong di back end Oh iya lupa hahaha nah bentar

25:56Scroll ke atas dulu deh tadi kayaknya ada yang lewat sedikit yang tipsnya itu atas-atas nah

26:03yang tips yang kalimat kedua tuh don't disable the submit button while still waiting valid user

26:12input nah apa submit button ini juga ada seninya ternyata buat nge-disable kalau yang paling yang

26:21default yang Vanilla yang enggak usah di-disable sama sekali kan by default kan misalnya kita enggak

26:26javascript sama sekali ya udah

26:28submit button nyala terus

26:31tapi karena ada

26:32kalau pakai manipulasi client side

26:35kan salah satu pattern yang ngetrend

26:37kan kalau user belum

26:38ngelengkapin semua dan belum valid

26:41itu submit buttonnya biasanya

26:43dimatiin dulu kan di gray out lah

26:45buat mengindikasi

26:47user belum bisa submit

26:48karena belum dilengkapi

26:50itu ternyata ada tipsnya

26:52gak tau kenapa sih ini penjelasannya

26:54yux dari perspektif yux mungkin ya ternyata jangan seperti itu don't disable the submit button while still awaiting valid user input

27:03jadi kalau user masih lagi proses mengisi kan user ngisi dari atas kan ya misalnya ada 5 field pastikan user ngisi field pertama dulu pasti 2 berarti invalid dong karena masih kosong nah ternyata kalau kasusnya kayak gitu buttonnya

27:18ya udah dibiarin aja tuh katanya jangan di disable saya termasuk salah satu yang salah kayak gitu

27:25karena ya karena desainnya emang gitu dan ya nggak pernah mikir sampai situ sih jadi intinya

27:32tapi ibadahnya tetap bisa diklik sampai tapi ada pesan validasinya mungkin ya Iya ada erornya

27:40mengungkap harap lengkapi dulu tapi nah ada jodohnya nih kalau udah disambit Nah itu baru

27:48yuskes yang valid untuk kita disable biar enggak klik klik klik klik Iya kalau dikeklik minimal

27:56salah klik misalkan dia mau tiket war gitu kan, oh cepet-cepetan gitu kan

28:01bisa masuk berapa puluh kali kepencet

28:04kebeli lima

28:06kayak yang barusan itu, barusan kasus viral di Twitter

28:13kebeli 7 popmy via tiket kereta api, kalau nggak salah

28:22kalau nggak salah ya, saya mungkin salah

28:24tapi nggak disirim nggak dibuka disirim air nggak papa sih disiram semua disiram semua

28:34tapi gua nggak tahu kasusnya gimana mungkin formnya atau gua nggak tahu jadi nggak nggak

28:43tahu konteksnya tetapi cuma lihat hasilnya maybe I'm wrong maybe ya cuma di luar kasus

28:50bisa terjadi kalau kita nggak disable bisa terjadi kepesan tujuh kali

28:57atau nggak sabaran ini udah keklik belum ya Mas lupa tadi kayaknya belum keklik diklik lagi gitu

29:09dan ini juga dari senyap apa klik lagi klik lagi klik lagi 10 Iya bukan hanya di web juga ya di

29:19di platform lain juga ini adalah apa praktek yang bagus juga yang bisa di harus di implementasi ya

29:29karena ya kalau sekarang sudah gampang ya untuk membuat disable kalau udah diklik disable dan

29:39Nah ini tadi kita sudah sampai di upload terus pastikan eng-type-nya harus multi-part.

29:47Eh ada quest-nya coba jawab quest-nya.

29:51What value for eng-type is needed to submit files?

29:56Kok sudah benar?

29:59Form data benar.

30:00Form data.

30:01Bukan form file.

30:04It is possible to send user data without form?

30:07No.

30:07klik on button press enter Yes Allah woi bener-bener dua-dua satu

30:25nah bisa ke link saya tuh input type contohnya input nah ini yang seru seru dan agak frustrating

30:37terutama kalau udah dikombinasi sama autocomplete iya input type itu bermacam-macam kawan-kawan ada

30:48teks yang paling umum ya kalau nggak dikasih type itu bisa muncul nggak sih di render nggak

30:56sih dianggap teks ya ada checkbox itu juga tipe ya Iya ini form input input kan input

31:06ada cek box ada radio ada batu-batu color bahkan ya itu baru ya kayaknya

31:14color-color enggak kelihatan padahal udah dipijat Oh batinnya buka di Windows

31:22Windows bukan masalahnya cuma share Windows share desktop itu ngeluarin

31:30ada di Windows terpisah Mari kita ganti ya share screennya share entire screen ini nanti jadi di minimize dulu oh nggak bisa harus di share screen ini nanti jadi minima juga nggak bisa di dulu baru minimize ini ya

31:51color kelihatan nggak? jadi kita bisa ganti warnanya sekarang udah native ya ini adalah

32:01web component contoh web component ini juga web component kalau dulu harus pakai

32:06ini berbeda loh antara browser-browser antara antara OS lebih tepatnya OS dan browser

32:25ya SM browser di iOS kan enggak ada browser lain jadi ya Oh ya eh apapun browsernya engine-nya

32:36tetap perubahan mereka berbeda Oke lebih tepatnya tiap browser engine beda-beda behaviornya nah

32:44gitu lah pernah keselimpet ya hahaha sering jadi sekarang tanpa library pun sudah bisa

32:55ada color picker udah bisa date date time bahkan email email juga type ya jadi bukan

33:03ide tetap teks tapi ada turunannya email jadi langsung divalidasi bahwa ini buat

33:08nanti ada validasi khususnya sendiri gak perlu buat regex yang panjang-panjangnya minta ampun

33:16panjang banget udah udah nggak tahu nulisnya gimana ya eh baca gimana itu eh bentar cuma

33:24balik ke DT penasaran kayaknya terakhir ngecek sih semua browser major udah support kan ya dulu

33:31pernah punya pengalaman unik yaitu input daytime cuma ngecek di ya standar lah Chrome Firefox

33:41Safari aja nggak inget dulu ngecek atau enggak terus dulu tuh di mobile sempet ngetrend kan

33:46browser yang gimmicknya data saving kayak UC browser UC mini browser antah-berantah itu belum

33:56support input type date time nah tapi lagi menariknya apapun yang di web itu kan emang

34:03biasanya kita apa fail gracefully pokoknya kalau nggak di support ya nggak throwing error apapun

34:10dan secara visual tuh tetap dirender sebagai text input dong jadi itu unik banget sih jadi

34:18nggak langsung nggak langsung kedetek bahwa ada masalah tapi user di expect jadi yang muncul

34:24biasanya user harus

34:26ngetik tanggal

34:27dengan format yang benar

34:29yang gak bakal kevalidasi kan

34:31itu menyebabkan

34:34bug yang lumayan unik

34:36ternyata setelah diselidikiin

34:37yaitu karena ada browser yang

34:39ada layout engine yang belum

34:41men-support datetime

34:43terus di fallback, otomatis

34:45fallback ke text tanpa

34:47UI, web component

34:50datapikernya itu, tapi

34:51tapi untung sekarang browser aneh-aneh yang kayak gitu udah punah ya dan browser engine yang major

34:58sekarang semuanya udah support juga nah kalau kita kirimin datanya kita submit post gitu bentuknya

35:06kayak gimana date ini string aja string sesuai sama ini ya 01 slash 08 slash 2024 ya form itu

35:15bisa berubah-ubah bisa berubah ya bisa kita ubah ada ada propertinya ya di simpelkan

35:28localisasi apa internationalisasi file juga berbeda-beda fungsinya per browser per OS

35:41dia kalau dimobat karena belum tentu bisa akses file tertentu secara privasi

35:48ada ternyata ada type image ya ini juga saya baru tahu itu aneh

35:55ada month-month baru tanya kalau ada month ii oh cuma ada bulan doang number

36:06antar lah ya, number ada

36:08nah, kalau di mobile ini langsung numernya keypad

36:14oh iya

36:16kalau diklik dia muncul number ya number only

36:19dan bahkan di mobile kalau email pun munculnya juga keyboard

36:25ya keyboard bisa retik cuma disesuaikan buat email

36:27dan biasanya kalau kita pakai aplikasi password manager

36:31itu ada barnya sendiri buat masukin login

36:35ada range

36:37min dan max

36:40dulu susah loh bikin ini

36:41susah

36:42harus pakai jQuery

36:43harus pakai javascript

36:45internet.com Song

36:59Oh delighted their seats

37:15Oh ya ini ya nomornya oke teks standar time ini turunannya tadi date ada url ini juga

37:27baru tahu nih like teks buat has validation parameter Jadi kalau kita ngetiknya lengkap

37:36dia akan komplain beberapa keyboard di Android dia bisa tiba-tiba bisa menampilkan langsung

37:46ada button yang langsung.com aduh ya ya ya apa-apa komplain ya ya obsoletnya detail

37:56solid sudah enggak ada ya dan krim diet dan kain udah enggak ada kamu udah ganti sama dadah detik

38:02enggak setelah dek ada detik lokal namanya nih maksudnya udah dipecah-pecah jadi itu semua kan

38:11ada yang lanjut ada bukan doang ada time doang ada yang lokal ada yang standar yang default

38:17lagi yang mau dibahas di sini juga ada atau komplit Nah ini bisa juga

38:27bisa membantu atau komplitnya si password manager

38:39integrasi dengan aplikasi password manager kita ya kalau dia betul dan password manager itu bisa

38:51aplikasi eksternal bisa dari browser sendiri jadi kayak misalnya kalau Chrome Safari ya nggak tahu

38:58mungkin Firefox ada juga atau nggak apa itu dia bisa kasih suggest password yang kuat atau suggest

39:06itu yang capture tuh juga menarik tuh bisa langsung kasih file langsung bisa munculin

39:15kamera webcam webcam kamera juga bisa kalau permission nya apa user udah wow ya berarti

39:25sebentar saya punya pertanyaan Kenapa namanya webcam webcam ngerah di web bisa dipakai di

39:36selain web nggak bisa kan kamera harusnya ya harusnya berarti komputer cam ya tapi

39:44kurang kecil ya ini itu dayaisting ya ini wei ini tadi kita udah bahasnya belum ada

39:58belum ada native native application yang pakai Oh jadi aja kamera Oh diopel khusus untuk web

40:05gitu ya Iya oke baiklah ngasal sih gua ini kan tebakan estimasi prediksi ada

40:17ini aksepsi misalkan file kita mau aksep hanya png sama jpeg misalkan atau hanya video format

40:29ya jangan percaya tapi ternyata file ya nanti bikin ya ya ada fokus ini juga cukup penting juga terutama kalau biasanya kalau kita buka form itu kan kita berharap

41:00kita langsung ngetik kan ini maksudnya kan tapi ternyata di beberapa form itu dia tidak nambahin

41:08jadi begitu kita buka satu halaman yang ada formnya

41:14kita harus klik dulu pakai mouse di elemen input pertama untuk mengetik

41:19habis itu kita pencet F

41:20membantu walaupun ya effortnya sedikit ya

41:25tapi mudah

41:27ya good you

41:28cuma ini si autofocus ini kalau bukan sebagai respon dari user event

41:34misalnya apa

41:36beneran di

41:39initial page load, terus

41:40misalnya emang ada

41:42ada form yang kita pengen user isi

41:45misalnya sign up form lah

41:46jadi ya gak tau

41:48ini beberapa tahun lalu

41:50gak tau sih Lighthouse masih

41:52nge-flag ini atau gak, jadi

41:54bukan core web vitals

41:57Lighthouse kan ada saran-saran

41:58tambahan yang kayak untuk UX gitu

42:00dulu tuh Lighthouse

42:02ngasih warning kalau misalnya

42:04page initial page load

42:06ada input field yang di

42:08autofocus. Itu kayak

42:10dianggap kurang bagus untuk user experience.

42:13Salah satunya karena

42:14kalau di mobile kan, kalau misalnya

42:16ada autofocus, tiba-tiba setengah

42:18layar keyboard kan.

42:21Jadi maksudnya tanpa

42:22user tau,

42:24tiba-tiba langsung

42:25kursornya masuk ke input

42:28karena autofocus dan tiba-tiba setengah layar

42:30tetap dengan keyboard. Itu dianggap

42:32kurang bagus buat UX.

42:34tapi itu gak masalah

42:37kalau misalnya user udah

42:38ya udah ada interaksi

42:40apapun misalnya scroll

42:42scroll down pun gak apa-apa misalnya ngeklik

42:44ada scroll ke bawah

42:46untuk mengisi form gitu

42:48terus kita hijack pake

42:49javascript

42:51terus dikasih atribut autofocus ya itu gak masalah

42:54pokoknya

42:55sebaiknya

42:57jangan dipasang di initial page load

43:01aja

43:01Oke sebelum kita lanjut

43:04Ini ada pertanyaan bagus sekali nih dari Krishna

43:06Kalau input itu biasanya kan

43:09OS atau browser dependent ya

43:10Tadi kan kita udah sempat bahas juga

43:12Kalau mau dibikin konsisten itu

43:15Ada guideline nya gak?

43:18Belum bisa ya

43:19Kalau pakai bawaan browser sekarang

43:20Justru

43:21Guideline nya tetap ada

43:24Harus ada ALT

43:27Itu udah pasti

43:28Itu fungsionalitas

43:29ini UI pertanyaannya

43:31kalau UI

43:32bisa

43:33disitulah tempat yang lain

43:36beda-beda

43:39bentuknya jadi susah juga dibilang ya

43:41dan bahkan copy text

43:43nya pun terserah masing-masing

43:45browser jadi apa

43:46kata-katanya misalnya

43:48email tidak valid

43:50wording nya terserah masing-masing browser

43:53bahasanya sesuai

43:55bahasa yang dipilih

43:56user untuk browser itu

43:58jadi kita nggak bisa mengkasih level customization nya ya dari dari sisi pandangan user ya dari sisi

44:05pengisir mereka kan sudah menggunakan satu OS ya Jadi kalau memang mau pakai itu sudah terbiasa

44:12dengan UI itu jadi kalau kita bikin sendiri yang konsisten dengan kita punya misalnya kita mau

44:19buat di sendiri UI nya kita sendiri yang sesuai dengan semuanya sama konsisten semua browser jadi

44:27karena mereka yang sudah pakai yang sebelumnya yang pakai standar loh kok begini sih dead inputnya kok aneh

44:35sudah terbiasa

44:36jadi tidak natural

44:37di iOS kan dia pakai scroll

44:40ada kayak scroll kayak jackpot itu

44:43kalau di Android kan udah ada

44:48Android, picture

44:49jadi kalau misalnya kita bikin konsisten justru jadi bingung

44:54jadi malah tidak natural ya

44:56Nah cuma itu desain desision apa? Product decision ya.

45:01Ya itu trade off aja kayak misalnya Airbnb kan dia punya web app, punya native app.

45:09Ya dia mereka bikin keputusan, ya kan date picker mereka khas banget kan

45:14sampai akhirnya date library pun di open source Nah itu kan keputusan dari sudut pandang produk Jadi memang mereka bypass bentuk itunya

45:26date picker, time pickernya,

45:28bawaan iOS atau Android dan lain-lain.

45:32Betul. Jadi, user-nya harus belajar lagi, kurang familiar.

45:36Jadi, untuk setiap OS dan terutama untuk setiap OS ya,

45:41untuk OS yang berbeda itu biasanya ada guideline masing-masing.

45:43Android seperti apa, iOS seperti apa

45:46Kalaupun misalkan kita bikin satu aplikasi yang sama untuk kedua OS

45:54Ini ngomongin mobile ya, belum ngomongin Windows, Linux, dan lain-lain

45:58Itu masing-masing OS itu ada guideline-nya

46:02Walaupun kita pakai React Native, pakai Flutter, pokoknya pakai yang multi-platform gitu ya

46:06Itu tetap harus mengikuti guideline-nya si Apple sama guideline-nya si Google, Android

46:12Itu berbeda, peletakan tab bar, posisi back button, button ukurannya kayak gimana itu semua udah diatur sama masing-masing OS.

46:24Jadi harus diikuti walaupun kita bikin satu code base bahkan.

46:29Jadi ya bener harus ngikutin si OS-nya, jangan sampai begitu orang buka, ya memang konsisten untuk semua OS.

46:37Tapi user harus belajar lagi kan jadi effortnya di user gitu kan.

46:42semoga menjawabnya terima kasih banyak lagi lanjut kemana nih bahas bagian

46:57cuma ini bawahnya komen tadi ada poin yang menarik situ yang biar tetap keyboard navigable

47:07at a table kan kalau bawaan apa ya tadi kan dibahas semua tahu dari segi apa UX terus masing-masing OS

47:18nah ini nih apa ini kan hal yang invisible ya di luar front-end Dev kleteng gading sedikit orang

47:27yang sadar tentang hal ini bikin apa bikin custom the picture yang apa menerima tab event dan gampang

47:37pakai navigasi pakai arrow pakai keyboard atau pakai berbagai tools sulitnya minta ampun itu

47:44masih itu memakan tenaga dan waktu yang cukup besar sih jadi itu masih apa kalaupun kita mau

47:51bikin custom dengan berbagai pertimbangan itu hal yang harus dipikir di depan jadi itu trade-off nya

47:58saya itu mahal lah mahal dalam arti ngetes apa mastiin tab dan event-event lainnya

48:06dideteksi dengan baik nge QA itu berjalan dengan baik semua itu nyebelin

48:12sementara kalau dari browser itu gratis semua kita nggak usah ngapa-ngapain ya udah built in feature

48:20Oke selanjutnya kita bahas tentang validation dulu dari validasi

48:29kita ke

48:34payment and best practice baru ke security terakhir kita ke framework

48:42dan library dan framework kalau untuk konser validation secara sejarahnya awalnya kan enggak

48:50ada ya input juga tapi awalnya doang kan yang melakukan validasi dulu javascript dan lain-lain

48:58semua masih server-side nah sekarang kita udah bisa menyatakan bahwa sebuah input itu harus

49:09terus mungkin formatnya bahkan sampai ke nomor telepon juga bisa kita nggak tahu nih nomor

49:16telepon yang di Indonesia bisa valid ya email password itu ada ada aturannya password bisa

49:26di-set ya di klien ya ternyata ya bisa kalau isinya kayaknya bisa pakai regex kok dia terima

49:38langsung ya dari properti HTML nya nggak perlu JavaScript ya

49:42mengeteksinya munculin errornya tetap pakai JavaScript cuma validasinya udah fitur web API itu bawaan browser Dan ini juga kembali mengingatkan never trust data pass your server from the client

50:05Karena bisa aja meskipun kita ada required, ada text-nya password atau email atau nomor telepon,

50:14kita bisa dengan mudah klik kanan inspect element requirednya dihilangkan.

50:18Dihilangin semua.

50:20Jadi ada berlapis-lapis validasi itu,

50:23kalau di aplikasi web itu ya sebaiknya di client side di validasi,

50:28di server side web app-nya di validasi,

50:31terus di sisi service misalnya di backend,

50:35ya biasanya itu best practice standar ya,

50:37pasti dari mereka juga sanitize dan validasi juga.

50:41Tiga lapis.

50:42Jadi tipe-tipe client-side validation bisa built-in yang dari form dari HTML langsung yang kayak required

50:49Terus tipenya gitu ya kalau misalkan kita mau tulis nominal ya tulis dalam number

50:57Walaupun dikirim tetap string ya semua HTML form itu kirimannya hasilnya adalah string

51:02Walaupun number dia tetap string tapi ada interface-nya sedikit berbeda

51:08file-file binary file-file dan ada yang sendiri Iya terus juga bisa via JavaScript ini yang

51:18kita lakukan dulu ya sebelum ada bil inform validation jadi kayak Wah nggak boleh kosong

51:25harus ada isinya kita cek tuh kalau filenya kosong ada warning pakai alert zaman dulu

51:31ini required min length length length terus ada type-nya ada pattern Oh ini yang tadi ya regular

51:43expression ya oke oke bener-bener is valid the following things are true dan kalau error ada

51:55apa namanya ada kayak pop-up gitu ya Iya langsung di bawah inputnya itu enak banget kita nggak usah

52:01ngapain langsung muncul tapi itu nggak bisa di-customize suka-suka browsernya tampilannya

52:06OS dan browser yang yang mengatur itu ya stylingnya ya nggak bisa kita ganti di CSS sih

52:14nggak bisa kalau yang apa browser pop-upnya terus oh tapi ngomongin CSS ini nih inputnya

52:26ada sudah valid jadi apa kalau misalnya bisa dikasih berderbiu atau hijau

52:32tinggal tambahin not valid jadi bisa bikin berbeda yang ada invalid invalid

52:39ini kasih merah kalau invalid gitu ya enak sekali kita manual ya

52:46banyak sekali javascript mantap mantap mantap inform validation example Nah ini contohnya

52:58ya Jadi ada label-label juga penting untuk accessibility for ini juga penting Kenapa

53:06kalau misalkan ada tulisannya kita klik di tulisan ini dia akan langsung keinginan

53:12ya kan terus ini contohnya nah ini kalau misalkan kita klik dia langsung ini ada ada apa namanya

53:20kita ini kan dalam posisi posnya nggak di sini tapi kalau kita klik textnya dia akan langsung

53:26namanya kursornya fokus-fokus ke infonya yang ini harus sama-sama ini ya dan kalau error Oh nggak

53:39infalit loh infalit loh bilang contoh macam apa ini enggak ada required nya enggak dari

53:52Oh iya ya ya itu kan baru satu step dia ada setelah jadinya Oh gitu Oh gitu Oh ini tutorial

54:06warna-warnanya kalau ngasih contoh gue juga kalau bikin ngasih contoh kayak gini sih error

54:14Kalau udah ditulis hilang warnanya

54:18Karena ini hanya menggunakan CSS

54:20CSS juga udah

54:24Hai ini banget ya udah lengkap ya trap submitting the form without a value Oke kita coba sampai

54:31Oh asyik kan Hai ini beda tiap browser loh hahaha berbeda copy textnya beda tampilannya

54:41beda terus bahasanya sesuai ini bahasa Inggris karena browsernya settingan browser Mas Rissa

54:47berbahasa Inggris. Kadang nih kalau orang mau say kalau kita kerja di tim kita kan protes nih

54:55misalnya apa situs kita bisa diakses bahasa Indonesia dan Inggris. User lagi buka bahasa Indonesia

55:01tapi bisa aja kalau emang settingan browsernya bahasa Inggris yaitu errornya tetap bahasa Inggris

55:06dan nggak bisa diapapain. Karena di level browser. Jadi solusinya untuk itu apa? Kalau misalkan nih

55:14kita pengen bahasa Indonesia semualah gitu tapi walaupun si usernya tetap bisa kok di hijack

55:21nanti kayaknya di bawah ada deh contohnya tapi harus banyak javascript sih maksudnya bisa pakai

55:27Vanilla javascript jadi kayak pesannya kita customize sendiri ya kalau ini untuk contohnya

55:34untuk email ya biasanya ya regex ya coba ketik deh itu ketik apa contoh kalau errornya gimana

55:43Apple Apple loko boleh submit-submit coba nah nice coba banana coba canana canana enggak

55:58banana dulu ke banana dulu bisa-bisa kalau tadi kalau salah cerian ada

56:09itu contoh untuk reyeksi ya konstren for length of your entries Ming min length dan

56:24slag ini standar ya on straining the value of your entries number terus apa lagi eh udah ada

56:35Legend Legend ini untuk filset radio apa radio itu radio batangnya sekarang udah lebih bagus ya

56:46kalau dulu kan kayak jelek gitu makanya banyak tergantung user Iya tergantung banyaknya diumpetin

56:54bikin customin dibikin yang bagus gitu kan ini tampilannya gini banget ya Oh select nih

57:01merah begitu email address tuh uh langsung muncul ini ya apa namanya

57:09karena ada type-nya kan, type email ya karena ada type email ya

57:14validating form using javascript

57:19nah ini kita bisa pakai javascript itu ada udah ada data type-nya sendiri

57:25oke kemudian validation message-nya bisa kita tambahkan

57:34kalau kita misalkan tadi ya mau ganti bahasanya atau mau ganti copywritingnya

57:40ya UI nya juga bisa kan kita bisa ngerender sendiri suka-suka kita jadi pokoknya itu semua

57:48untuk customize itu pakai constraint validation API itu berarti tidak butuh library tambahan kan

57:57langsung Vanilla ya langsung udah bisa pake API ini ya implementing the customized error message

58:04nah disini kan nah ini nah itu contohnya penjelasannya ya iya oke lanjut ke pembahasan

58:12itu ada contohnya ada contohnya itu lihat contohnya dulu ini ya bentuknya kayak gitu

58:18Jadi ya kita tetap cek eventnya, terus kita cek validity-nya, jadi kayak udah ada metode built-in-nya, type mismatch.

58:29Jadi ada jenis-jenis value-value apa aja yang bisa dicek, udah ada tuh tadi di atas bisa dilihat sendiri nanti.

58:37Cuma yang keras buat nge-customize isinya, ya kayak gitu.

58:42Oke, oke, mantap. Wah, udah enak banget ya.

58:48zaman sekarang sudah enak sekali ini ada novalidate novalidate ini adalah untuk membypass ya our input to validate inputnya ada required ada minimum lengthnya 8

59:05tapi karena novalidate jadi bisa langsung ditembak oh ini ya langsung ke javascriptnya ya berarti

59:15Iya iya tetep pakai event tadi kan tetep pakai event listnya

59:20Jadi errornya nggak muncul error yang

59:24Error built in browsernya nggak muncul kita hijack lah intinya

59:28Kita hijack pakai javascript nah itu kan custom tuh UI-nya ada warna merah ada border rounded

59:35Bahasanya juga bisa disesuaikan sama yang kita mau

59:39Mungkin bisa disesuaikan dengan design systemnya kita kali ya

59:44Oke.

59:48Validating folks without a built-in API.

59:54Harusnya dulu.

59:57HSV questions.

59:59Let's kind of validation dan lain-lain.

1:00:03Silahkan baca sendiri ya.

1:00:04Oke.

1:00:06Eh ada yang seru nih.

1:00:07Apa?

1:00:08Tadi berhubungan sama radio button kan tadi kita bahas sekilas tuh.

1:00:12dulu radio button dulu bentuknya jelek eh kurang kurang Oke warnanya juga suka-suka browser dan

1:00:20kadang kan nggak sesuai sama apa branding kita sendiri sekarang udah ada CSS properti accent

1:00:28color Wow aksen color lucu pakai telwin juga udah ada jadi patokannya CSS udah apa udah stable di

1:00:39sama browser tuh udah ada tailwind propertinya kalau detail udah ada artinya yang defaultnya

1:00:46ada ya yang yang makanya bisa dikastum tergantung entry yang dislike Jadi kalau kita pencet pilih

1:00:52mail tetap hijau kalau enggak salah enggak ya aku ini ini customisernya contoh-contoh customization

1:01:01Oke tapi hovernya beda loh hover tadi kalau yang hijau hover lebih lebih gelap Oh itu di handle

1:01:13sama browser sendiri sih coba klik nah dan hijaunya lebih gelap Oh iya itu karena ada kursornya coba

1:01:22browsernya pindahin ya kan over ya over-over beda dapatnya papai ini enggak ada bawaan dari

1:01:31browsernya nah ini enggak ada over terus kenapa ada itu ini ada barangnya begini ada border tapi

1:01:40tulisannya karena were a low contrast color has been provided Oh ketabu karena kuning backgroundnya

1:01:51berarti aksen colornya kuning kalau misalnya apa bordernya enggak bukan warna yang bold nantikan

1:02:02jadi lihat nggak jelas nggak jadi otomatis di handle sama browser kelihatannya Iya ini tulis

1:02:10coba aja buka Devtools nih garanting legibility in case of low contrast color Oh betul-betul jadi

1:02:21kita misalnya yellow nih backgroundnya putih akan bakal kurang jelas ya nggak kelihatan nah

1:02:29the browser in this case the browser may adjust the brightness of the color or substitute colors

1:02:35jadi kayak bisa di browser dengan itu inisiatif inisiatif punya inisiatif UI kita lebih accessible

1:02:47udah yang letus aman-aman semua browser enggak ada patokan gampangnya udah masuk

1:02:56tailwind tapi kalau patokan formalnya nggak tahu udah masuk baseline udah masuk baseline

1:03:02apa belum ya udah ini aksen udah salah satu yang diperiksa waktu baseline di-launch di

1:03:10Google I of Marin Oke nah berikutnya kita akan bahas tentang payment apa hubungannya payment

1:03:20sama form semuanya semuanya semuanya butuh uang Oh nggak semuanya ada mulai dari nah udah nggak kelihatan kan ada patternnya ya kan

1:03:46card number itu kan 444444 gitu kan

1:03:52loh ini kok nggak ada minusnya ya nggak otomatis ya

1:03:56gini kan tahu-tahu masing-masing enggak enggak perlu

1:04:01Oh Pak kalau nanti bisa pakai next

1:04:09ah bener-bener nggak pakai minus ya terus nama expiry date-nya kan harus ada beliannya security

1:04:19ada patternnya terus bagaimana dia di submit bagaimana harus apa namanya response yang harus

1:04:27diberikan dengan best practice ya jadi kalau kita Scroll terus nanti ada addressnya lagi

1:04:32step address kan ada patternnya ya masing-masing ada di sini ya terus kemudian

1:04:37ini checklistnya pakai meaningful HTML template form input label jangan bikin yang aneh-aneh

1:04:47lah gitu ya level harus ada terus kemudian sebesar sebisa mungkin pakai bilin browser

1:04:55tipe dan auto complete karena katanya kan capek juga ya Mas Riza ambil kereta sendiri

1:05:02typing sendiri padahal sudah masuk n apa pakai apa tadi entai ya enpas enpas saya pakainya

1:05:12ya benar terus karena terus kalau kayak numbernya sih jangan pakai input number

1:05:29karena bukan intergen itu sebenarnya teks sebenarnya tapi angka semua kebetulan

1:05:38ini sudah hanya memberikan dia bukan integer jadi cuma numerik aja gitu terus turun lagi

1:05:51disembel sang button ketika di tadi ya

1:05:57paling bahaya kalau klik berkali-kali ini validate data during entry setelah selesai

1:06:13saat entry kasih tahu kalau salah jangan saat submit karena capek juga

1:06:17udah isi panjang-panjangnya salah ke atas kita terus terus turun lagi turun lagi eders format

1:06:30jadi jangan limit karena eders formatnya kita ini Indonesia tapi formatnya nggak bisa tuh

1:06:37kalau misalnya orang dari Singapura ini ya baiknya pakai teks area untuk address disarankan

1:06:46atau consider avoiding kos-kos karena susah-susah kan kita nggak faham

1:06:56itu afal kondukos kita sendiri terus

1:07:02dah itu aja sih yang penting ini tesnya di beberapa browser device dan platform karena

1:07:10pastikan experience di beda-beda itu bukan disamakan pastikan experience tidak terhambat

1:07:17lebih jadi experience smooth beberapa browser dan device jadi balik ke user story kali ya

1:07:27as a user I can bla bla bla nah jadi walaupun antar browser KUI nya lain-lain dikit atau

1:07:34mungkin pakai password manager yang berbeda masing-masing user tapi pastiin user story-nya

1:07:39bisa jalan sampai selesai oke ini ada banyak penjelasannya per per per checklist ini ada

1:07:49ada ada penjelasannya di bawah nanti teman bisa membaca aja ya Kenapa saya angkat ini karena payment form itu komplit ya banyak banget memakai pattern terus kemudian best practice bisa dijadikan

1:08:06maksudnya kasusnya cukup komplit untuk bisa dianggap sedikit-sedikit

1:08:11kalau kalian bikin form sendiri yang lain

1:08:14untuk case yang lain

1:08:16Kalau mau belajar, belajar dari bikin form payment

1:08:20setelah belajar bikin form payment, form yang lain udah gampang ya

1:08:24karena yang paling rumit disitu ya

1:08:26betul

1:08:28banyak

1:08:30tidak juga sih

1:08:31form pajak juga susah

1:08:33itu kan duit berhubungan dengan

1:08:36pembayaran

1:08:37ngisi

1:08:39ngisi bukti potong itu kan banyak ya

1:08:42oke

1:08:48nah

1:08:49pembahasan terakhir kali ya

1:08:51tentang

1:08:53tentang library ini kan kita udah apa udah lihat betapa rumitnya karena itu kan sebenarnya si

1:09:01formnya sendiri tidak rumit kalau hanya ya Romit digunakan isinya kalau hanya digunakan default

1:09:13basic terus enggak basic sih maksudnya default aja nggak perlu ada kustomisasi terus hanya untuk

1:09:21apa ya get itinya apa form metodnya tapi kalau udah pos itu hubungannya sama yang lain kalau

1:09:31misalkan kita mau kustomisasi kayak tadi kita mau ganti error message seperti apa kita mau setelah

1:09:37disubmit itu datanya disampai sedekah B ada proses dari validasi di klien kirimin datanya

1:09:46sampai ke back-end, divalidasi lagi.

1:09:51Terus habis itu dari back-end divalidasi setelah berhasil divalidasi baru ke database.

1:09:56Di database-nya biasa di ORM-nya juga ada validasinya.

1:09:58Karena harus memetakan antara tipe data yang ada di form dengan tipe data yang ada di database.

1:10:08Belum tentu sama.

1:10:10Database lebih detail kan ya pasti.

1:10:12Kayak angka aja ada macam-macam.

1:10:14Ada macam-macam.

1:10:15kalau di javascript hanya ada number gitu kan kalau misalkan kita tadinya pakai floating

1:10:23upload ya harus dipas dulu pas in transport dan lain-lain teks apa banyak ada for karet

1:10:33apalah karakter-karakternya input mulia input yang untuk latlong enggak ada sih tadi ya belum ada ya

1:10:41location Iya kalau bulian misalkan di di input kan enggak ada bolehnya ada cek box tapi kan

1:10:50hasilnya kan value-nya kan male-female atau truk polsnya di cek box itu cukup cukup radio

1:10:59Eh checkbox itu kalau dicek isinya string juga kalau nggak salah string.

1:11:09Pokoknya semua yang di HTML itu kirimannya string.

1:11:14Nggak ada tipe data lain.

1:11:15Jadi itu harus dikelompokkan lagi.

1:11:19Oh ini number, ini string, ini boolean dan lain-lain.

1:11:24Di convert lagi, di konversi lagi baru masuk ke database.

1:11:27Makanya ada beberapa form helper atau library seperti contohnya ada formic.

1:11:36Nah ini formic cukup terkenal juga.

1:11:37Favorit ini.

1:11:39Sekarang favorit ya, masih favorit ya.

1:11:42Masih favorit.

1:11:44Ini ada formic, terus ada, apa lagi, react hoc form.

1:11:52Kita lihat cara pakainya kali ya.

1:11:55Kita pakainya ya, getting started.

1:11:57motivasinya ya silahkan baca sendiri ini dia yang bikin gungan yang bikin baru ya jadi primer ya

1:12:04kenapa tidak redacted terus cara pakainya gimana install pastinya terus India formic ini sel-sel

1:12:16Oh ya sorry oleh desa alidid apa yang divalidate bisa langsung ditaruh di sini karena ini react

1:12:26jadi satu atau bisa bisa juga boleh silakan

1:12:32Terus kalau emailnya nggak ada dia bisa require, oh ini manual ya.

1:12:37Terus kalau misalkan value-nya ada dia akan melakukan RGX validasi bahwa emailnya sudah valid sebelum.

1:12:46Kalau tidak berhasil dia akan mereturn pesan error.

1:12:56Kok jadi rumit ya? Ini baru bagian formiknya ya?

1:13:01semua kebutuhan apa client-side masuk situ semua ya jadi emang jadi panjang tapi

1:13:08kita ngurus di satu tempat ya termasuk error message-nya ini kita nggak perlu ngurusin Oh

1:13:15nih harus dimana di posisinya udah bisa kita taruh dimana aja yang kita mau dan lain-lain

1:13:20itu contohnya contoh kedua di sini ada re-cook form kayak gimana Oh ini video ya Oh ada buat

1:13:29kreatif juga ya contohnya menagihkan start-upnya enggak ada Oh demo weh salah ini ya bukan Iya

1:13:37Natuk example itu loh di coba ketik di bawah di-scroll di menuna anggap sama kirim mau

1:13:50mau lihat kodenya mau lihat kodenya ini standar ya dan dia langsung on submit handle submit handle

1:14:04gimana Oh ini lagi inform useful useful namanya react apapun dimasukin ke hook terus return input

1:14:21default value nya tes register example registernya apa itu itu metode juga

1:14:30kita timpor dari berarti udah banyak bayar perut dia bikin helper banyak nih

1:14:37iya poinnya poinnya library dia adalah helpernya register ini gunanya buat apa

1:14:45ya ada yang tahu ada yang pakai itu sebagai mencetak pilih dia itu helpernya dia iya

1:14:53untuk ngeri bikin helper kalau input itu adalah first name input selesai agenda

1:15:08dia otomatis ngerender kayak adalah label atau apa yang kayak id-nya semua dari situ

1:15:16dari yang dari nama yang kita masukin first name gender berdasarkan apakah 22 library ini

1:15:25atau beberapa lebar ini hanya untuk di klien site aja atau ada gabung ke back-end juga

1:15:33otelan pernah coba sih kalau ini karena pakai re-advance ya jelas buat di apa front-end

1:15:42client-side close atau kalau spellkit baru buat back-end juga ya jadi biasanya kalau di back-end

1:15:49itu ada entah dia menggunakan orm server atau server namanya Zod kalau nggak salah ya dulu ya

1:16:00eh dulu itu untuk validasi itu kan bukan kalau Zod itu kelihatannya bukan khusus buat form tapi

1:16:11untuk memvalidasi.

1:16:13Kita punya skema.

1:16:16Ya udah kita terima data dari

1:16:17form atau dari apapun bisa divalidasi

1:16:19pakai ZOT.

1:16:21Introduction langsung sponsor.

1:16:25Ya biar sustain.

1:16:28Boleh, boleh, boleh.

1:16:30Banyak lagi?

1:16:31Kita harus scroll ke bawah ya.

1:16:33Oh iya ini untuk

1:16:34memvalidasi apakah

1:16:36data yang kita kirimin mungkin dalam bentuk JSON.

1:16:41itu valid nggak untuk dikirim ke database gitu ya kira-kira gitu ya

1:16:46apapun dikirim diterima jadi kayak misalnya typescript kan

1:16:51sebenarnya typescript itu kan kita nggak bisa ngadalin typescript

1:16:54pas lagi udah jalan kan karena kita nggak tahu kan datanya beneran ngikut kayak gitu

1:16:58atau maksudnya betul sesuai atau enggak jadi misalnya kita terima data kita bisa ngecek pakai Zot juga mau kirim data menerima data Zot itu ya agak agnostik dalam hal maksudnya dia nggak peduli

1:17:12datanya dari mana dan untuk apa jadi selain form ya bisa buat apapun yang pengen kita pastikan

1:17:19bentuknya kayaknya itu ada pluginnya deh apa Zot kalau by default kita nulis skemanya di dalam

1:17:27Nah itu apa harus string masalahnya tapi ada semacam plugin jadi kita tinggal ngasih typescript

1:17:35interface atau type aja jadi dari pluginnya di convert ke episode ya oh iya menarik ya

1:17:43terus habis itu baru dilempar ke database atau core emi gitu ya biasanya kalau kayak Prisma

1:17:50ada nggak form validation-nya?

1:17:53Ya ada.

1:17:54Oh, nggak validasi form sih.

1:17:56Pokoknya kalau kita ngirim

1:17:58data ke Prisma, datanya salah,

1:18:00dia nggak jalan, dia throw error.

1:18:02Oh, error gitu ya?

1:18:03Ya, itu kan praktik ini sebenarnya

1:18:06in practice bisa kita pakai.

1:18:08Kita catch aja error-nya, kita pakai

1:18:10buat display

1:18:11error validasinya, kalau mau.

1:18:15Wah, ini ada yang udah pakai nih.

1:18:18Kalau si

1:18:18R.H.F.

1:18:20Validation form

1:18:25ada ada kayaknya ada kelas

1:18:33Oh iya bisa di-custom juga pesen itunya apa error message nya pernah pakai

1:18:42Oke eh sesuai dari menarik nih dia apa kemudian enggak sisutnya itu apa headless ya mau saya

1:18:53apa nggak bisa jalan di klien site bisa jalan di server site Iya ini nih eh mas nyoman dari

1:19:03Bali dari Bali oleh desain pakai validasi depon n bisa pakai Zod schema juga untuk

1:19:10frontend untuk validasi di react hook form, oh bisa di connect ke hook form ya, terus di backend validasi lagi pakai ZOT schema yang sama

1:19:17oh jadi satu schema bisa dipakai untuk dua ya

1:19:22kita bikinnya sekali, ZOTnya sendiri stikmoset bisa jalan di client

1:19:29ya jadi selling point terbesarnya kayaknya itu kalau buat saya ya si ZOT ini

1:19:35Jadi kita bikin satu schema, bisa dipakai di frontend, bisa dipakai di backend,

1:19:40jadi datanya lebih konsisten.

1:19:48Jadi sudah sama lah itu anggapannya.

1:19:51Tapi Zoot ini cuma buat validasinya doang, jadi nggak berurusan sama UI formnya sendiri.

1:19:59Makanya tetap dikombinasi sama, itu tadi contohnya kan dikombinasi sama Deku form.

1:20:03atau apapun atau pernikah yang lain ya bahasanya kekulang right points run anywhere Java banget

1:20:14Oke nah ini ada pertanyaan tapi Oot mau dijawab atau kita lempar ke GitHub aja jawab aja nanggung

1:20:26seru nih pengen tahu juga soalnya bosnya bisa bikin custom blog sama template

1:20:36roadmap ya ya pertama belajar atau roadmap developer WordPress nya sendiri eh development

1:20:46WordPressnya sendiri di web-launcher ya di WordPress itu sudah ada roadmap sendiri

1:20:56Iya sudah dari bikin rakyatnya buka learn.wordpress.com Nah itu sudah ada

1:21:03banyak kursus banyak kursus-kursus nya di sana sebagian sudah ditranslate

1:21:12wordpress.com slash learn disini Iya udah eh apa jadi dari ke situ merek sorry sorry.org lebih

1:21:28tepatnya kalau itu untuk learn nah there always more to learn Learn Ada yang selalu ingin belajar

1:22:00ya urut aja lah jenis kalau kalau udah bisa di skip komo kontribusi air awet press ada

1:22:11ada tutorial ada eh ada eh series series ya ikut yang kursusnya kursusnya sudah ada

1:22:21ini mau yang general

1:22:27mulai dari sini supaya lebih supaya lebih arah

1:22:36Hai eh setelah belajar tertarik dan terjemahkan jadi teman-teman yang lain bisa ikut terbantu

1:22:43Oh sudah sebagian sebagian kalau sudah ada yang itu lengkap tuh kalau sudah ada yang

1:22:59bahasa Indonesia nanti dia ini Wow sudah ada pengenalan situs pengenal editor situs dan

1:23:07dashboard tuh bahasa indonesianya dashboard ya

1:23:11silahkan

1:23:16mantap

1:23:17dari sini mulainya

1:23:18dan

1:23:20bikin situ sendiri

1:23:24terus kemudian

1:23:26coba ikutin

1:23:28kursusnya bikin situ sendiri

1:23:29dan

1:23:31ikut komunitas

1:23:33pamerkan dan ikut komunitas

1:23:36kebetulan ada web challenge nih di tanggal 27 sekalian promo ya web challenge ya

1:23:45bikinin web untuk ngobrolin web ini mah minta dibikinin

1:23:52linknya itu beneran dari event dari wordpress

1:23:57ini official ya dari wordpress

1:24:01official Jakarta ya bikin komentar Jakarta non non-commercial bahasanya

1:24:11Hai apa sih banget komersial komersial ini ini kayak sekalanya word camp tapi ini namanya next

1:24:20gen next ya maksudnya format baru dan kebetulan di sini adalah web challenge silahkan belajar

1:24:28terus ikut webchannels presentasikan Iya Iya password aja jesney siapa jajesnya loh nggak

1:24:37depan keren ada juga Ivan direkturnya saya nanti yang membawakan bagian workshopnya

1:24:46Oh ya seru ya seru ya ada begini buat apa buat motivasi untuk belajar bagusnya

1:25:00betul keren keren keren oke oke oke semoga cukup jelas ya siapa tadi Budi

1:25:10kalau mau ketemu saya tanggal 27 Januari nanti ada di sana

1:25:13ini acaranya dimana?

1:25:17di Jakarta

1:25:17di Taman Ismail Marzuki

1:25:20tanggal 27 itu hari?

1:25:25Sabtu

1:25:26Sabtu

1:25:26oke ada lagi sebelum kita udahan?

1:25:35udah itu dulu

1:25:36kayaknya bisa di inform edisi 2 nih

1:25:39besok-besok yang khusus bahas di meta framework sama library dan lain-lain pengen touch kecap

1:25:47tapi kayaknya panjang nanti jadinya ada masih ada perlu dibahas kayak security privacy edisi

1:25:54dua kapan area apa kayak area error blablabla belum web outen area invalid web outen episode ini kayak Iceberg kan yang kita sering pakai di atasnya doang tapi dalam masih banyak dikira gampang ternyata ngomongin

1:26:17form aja udah hampir satu setengah jam ya terus Biasanya kalau apa kita kerja di tim

1:26:24desainernya pasti cuma bikin apa ya bukan pasti kemungkinan bikin font yang happy pat doang

1:26:31validasi bentuknya kayak gimana juga belum tentu dibikinin kan jadi biasa kita harus

1:26:38improve sendiri label posisi lab dia suka misalnya gini dia bikin dua kolom ya kan

1:26:45tetapi labelnya dibikin pas-pasan tapi kalau misalnya translate jadinya tambah panjang

1:26:51terus gimana bentuk kalau ada validation message enggak muat enggak pasti enggak

1:26:56banyak yang gak mikir sampai sana sih jadi ada apa namanya secara itu tugas kita yang apa ngasih

1:27:07awareness musik karena kan emang ini ya ini tanggung jawab kita jadi kita yang harus edukin

1:27:12sedih tiketnya atau pas lagi apa begitu gas ya kita bilang kalau form tuh perlu gini-gini

1:27:18ya ya ya mungkin nggak aware juga kalau format perlu gini-gini sudah ada besok

1:27:26tisnya dimana gitu bisa dilihat nggak ada yang bikin standar atau Yes andaristasi

1:27:32form payment berespektif sudah saya kasih topi menentu spesifikasi secara general terlalu

1:27:41subjektif kali ya maksudnya form itu kan yaitu tadi mau bikin comment mau search engine mau

1:27:47post status semua pakai form terlalu luas mungkin what's on your mind coba coba coba

1:27:55main-main Facebook Facebook ikonik banget kan Watson your mind kalau Twitter apa

1:28:07X nggak tahu atau kalau Twitter tulisannya by default apa tuh ada placeholder eh kita

1:28:17kita bahkan belum bahas apa select elemen ya tadi dan ya tapi ya cuman sekilas banget

1:28:24ya besok-besok episode 2 lumayan lumayan tricky juga tuh select element karena kan terutama

1:28:33misalkan kita pilih terus kalau kita submit terus submitnya error error di tempat lain atau di situ

1:28:43juga itu kan yang pilihannya kan balik lagi ke nol kan balik lagi ke default paling atas kan harus

1:28:48di apa ya kalau dulu kan harus di em ada logikanya if ini ya masukin sini kan kalau pakai back-end

1:28:58atau kek DSP yang bahasa back-end gitu kalau ya kalau mengenali library kayak apa rekuk form

1:29:05tadi udah diendal udah diendal ya udah otomatis ya Nah itu enaknya ya kan state-based kan kalau

1:29:12ada selek ada apa teks area tadi jadi inget gara-gara teks area akan kayak what's on your

1:29:21mind terus kayak ada seni-seninya ada sih best practice-nya kayak placeholder sama atau

1:29:27hint jadi musik teks keterangan yang itu katanya nggak boleh ditaruh sebagai placeholder besok

1:29:35lah detailnya

1:29:36kalau twitter

1:29:39pakainya what's happening

1:29:40oh

1:29:41oh iya karena twitter itu

1:29:45kayak positioningnya buat update

1:29:47terbaru ya kalau facebook

1:29:49buat curhat

1:29:50what's on your mind

1:29:52oke oke oke

1:29:55oke kalau begitu mungkin

1:29:57untuk malam hari ini sekian dulu

1:29:59terima kasih banyak buat semuanya yang

1:30:01sudah nonton dan sudah berdiskusi

1:30:02malam hari ini jangan lupa kalau ada yang

1:30:05Mau diskusi lebih lanjut bisa ke sana.in.com.id.

1:30:09Di sana ada GitHub repo, klik aja discussion.

1:30:14Terus nanti bisa kita buka aja ya.

1:30:18GitHub.com.id.

1:30:21Terus di sini ada discussion.

1:30:23Nah ini kita bisa minta request mau bahas apa.

1:30:29contohnya disini ada interop 2024, ada dokumentasi, form malam ini, ada monorepo, bisa di vote kalau yang udah login.

1:30:40bisa default terus juga mau submit misalkan tadi mau lanjut pertanyaannya tentang roadmap WordPress

1:30:47bisa diskusi lagi itu kalau mau showcase juga boleh silakan pilih aja kategorinya yang mana

1:30:54pada saat input form ngisi form disini untuk masukin diskusinya untuk sampai diskusinya ya

1:31:04Itu di atas agar sebar itu juga form.

1:31:08Itu juga form.

1:31:11Dan yang topik terhangat sejauh ini masih websocket ya.

1:31:18Yang belum.

1:31:19Yang belum kita bahas.

1:31:22Kita usahakan coba cari topik yang cocok atau narasumber yang sesuai.

1:31:28Mudah-mudahan

1:31:30Beliau mau diundang

1:31:34Ke acara kita malam hari ini

1:31:36Sekian dulu, terima kasih banyak

1:31:38Sekali lagi, selamat malam

1:31:40Sampai jumpa lagi

1:31:42Selasa depan jam 8 malam

1:31:44Sampai jumpa, bye-bye