Validasi di Frontend atau Backend ?

[@arifintajul4]

saya biasa ngerjain front end, seperti yang dijelasin mas eko. Bisnis logic yang simpel (required, min max length, input type )saya kasih validasi untuk menghemat waktu user apalagi kalau internentnya jelek.

[@rimzzlabs]

agree

[@bagoessolekhudin2357]

menurutq si di Frontend juga penting untuk UXnya, jadi validasinya ngga harus nunggu di submit. misal user sudah cape2 nulis tidak ada validasinya pas di submit ternyata kena validasi. kan ngeselin. jadi di FE buat kenyamanan user. dan di BE buat keamanan. CMIIW

[@kokozeny]

Senang mendengar penjelasannya. Selama saya masih programmer, saya selalu melakukan validasi di API saya. Di FE ada tapi jarang saya lakukan. Di tempat kerja sekarang saya benar2 merasa disalahin gara2 validasi di backend. Dikatain "kamu sebagai architect masa validasi di backend?" Dari architect senior, analyst, sampai tim dev ga setuju. Mereka expect data di backend sudah bersih. Dalam pikiran gw "Gila lo semua! Maen yakin 100% dari channel akan kirim data bersih! " Mendengar penjelasan di video ini, saya semakin mantap harus cari kantor baru!!! 😆

[@shidqirifatpangestu3256]

wkwkwkw semangat apply tempat baru mas. semoga tempat baru sejalan dengan masnya

[@thelazycomputer99]

wkwk... ngakak

[@riskikukuh1293]

solusinya pindah kantor wkwkwk

[@wahyusetya172]

Website nya apa bang? Saya mau silaturahmi, siapa tau bisa kasih sql injection pake postman 🤣🤣

[@MrSundaayy]

Bener sih, saya jg slalu melakukan validasi di BE. Kadang mau bikin di FE juga, tapi kalo dipikir-pikir lebih mantep kalo di BE. Soalnya kalo di BE nya aja nolak berarti data itu gak bersih. Sedangkan di FE kemungkinan bisa diakalin dengan matiin javascript di browsernya.

[@localhousee]

Damn, i see "lebih baik validasi di 2 tempat" everywhere

[@muhammadtatasmaulana]

FOKUS VALIDASI DI BACKEND, KALAU DI FRONT END SIH OPSIONAL. JANGAN VALIDASI FRONT END DOANG NANTI DISERANG PAKAI CSRF

[@loheroi]

Casp lock nya rusak bro?

[@muhammadtatasmaulana]

@@loheroi ngga

[@ProgrammerZamanNow]

betul

[@LazaroLegina]

Iyap Betul.... sesuai dengan penjelasan pa eko diatas. 👍

[@maulanamalique]

Kesimpulannya: Validasi di backend itu wajib. Validasi di Frontend opsional.

[@laodemuhammadalfatih7663]

bagusnya memang fokus dibackend. namun ada beberapa pertimbangan seperti menghemat komputasi server sehingga validasi terhadap hal-hal non-crusial hanya dilakukan di sisi frontend. contohnya youtube. untuk nama channel, validasi panjang nama channel cuman dilakukan di frontend via attribute html max length. namun gara-gara ada 1 youtuber yang nemu celah itu dan dia buat channel dengan nama terpanjang di dunia, baru sistemnya di-update menjadi validasi di backend. poinnya balik lagi ke pertimbangan data dan keterbatasan resource yang dimiliki.

[@hafidzdev17]

siap mas laodeh

[@khaidirhasan]

Ini yang bikin backend dengan frontend sering berantem padahal jika di implementasi kedua sisi lebih bagus.

[@ProgrammerZamanNow]

saat project udah besar, agak sulit menyamakan backend dan frontend, pasti sering kejadian

[@ariefkurniawan3246]

Setuju kalau validasi dilakukan di BE. kalau di FE , bisa saja logika validasinya dimatikan karena di browser bisa menonaktifkan javascript. selalu curiga terhadapa user.

[@ProgrammerZamanNow]

yup, don't trust user input

[@bagoessolekhudin2357]

Kalo menurutq pribadi bagusnya di keduanya di FE dab di BE. Di FE buat kenyamanan user, dan di BE buat keamanan sistemnya. CMIIW

[@aliansyahfirdaus9619]

ini yang terjadi di mobile banking mandiri, uniknya di mobile itu bsa bikin password dengan simbol, namun ketika login di IOS tidak bisa menggunakan simbol, alhasil saya gbsa login sekarang karena pake IOS dan mandiri nolak simbol -_- mantap

[@_anjianto]

Kalau dari opini saya lebih baik dua2nya. Kenapa? Karena salah satu alasannya yaitu koneksi user. Kalau validasi hanya di BE dan koneksi usernya lagi jelek bisa loading terus dan semisal setelah 15 second baru dapet validasi response dan error, user keburu sudah cabut/kalau di web keburu direfresh dan itu menurut saya dari segi UX/User Experience sudah jelek. Kalo dua2nya input user ndak valid langsung saat itu juga kevalidasi dan kalo masalah validasi nggak sync tinggal diobrolin antara FE dan BE. #CMIIW

[@ProgrammerZamanNow]

gak semua jenis validasi bisa dilakukan di FE, contoh, registrasi pake email duplicate, hal itu gak bisa dilakukan di FE, tetep butuh BE untuk validasi

[@_anjianto]

@@ProgrammerZamanNow iya mas 👍🏻. Kalau validasinya kayak check valid format email bisa di FE, kalau business logic kayak check duplicate unique data amannya memang diBE

[@faizbyp]

pak kalo misalkan validasi frontend hanya diimplementasikan pada page register bagaimana ya? jadi ketika kasusnya register via mobile, nanti login via web pun tetap bisa masuk

[@redstone682]

kemaren sempat sertress mikir ini😅

[@dzakiahnafzulfikar9497]

lebih baik validasi lewat 2 arah mas eko🙏, karena tujuan keamanan & uix agar lebih baik, tapi validasi front end nya jangan sampe berbeda dengan validasi backend nya,dan pada saat bikin api spec di bahas dan dibicarakan sampai ke validasi input, serta aturan dalam validasi nya..

[@agusmrr]

setuju, kalau kesalahan yang disebutkan di video tadi itu sebenarnya bug / kurang komunikasi/spek kurang detail aja. front end juga perlu tahu detail format username lengkapnya seperti apa, jangan hanya backend yang tahu. jadi ux-nya juga bagus.

[@ProgrammerZamanNow]

validasi di FE gak ada hubungannya dengan keamanan, karena bisa di skip kapan aja, tinggal disabled js, atau tinggal panggil API pake postman

[@keling9972]

Validasi di frontend sebatas keperluan UIX menimalisir kesalahan common input gak ada hubungannya dengan keamanan.

[@wahyusetya172]

@@ProgrammerZamanNow bisa juga dibypass pakai inspect element

[@bagusandrewijaya]

kalo saya tergantung kasusnya sii biasanya kalo misalnya si backend nya harus lebih strict karena backend RestApi misalnya mau di public supaya orang lain bisa integrasi dengan produk aplikasi kita biasanya saya lakuin di backend validasinya karena tidak menutup kemungkinan orang yang memakai backend kita ada beberapa yang malas membaca dokumentasi yang di buat ada saja yang penting ambil method dan paramater dan response nya aja karena mereka kan engga tau tipe data yang di izinkan dan ditolak kan kalo terus terusan ngirim response yang tidak semestinya perusahaan kita juga yang di serang sama client yang terintegrasi merchant gak optimal lah server yang jelek lah padahal mereka gak baca dokumentasi....tapi kalo misalkan backend tersebut mau di private contohnya buat integrasi aplikasi sekolah dan web sekolah biasanya validasi saya lakukan di front end menghemat waktu dan memperkecil penggunakan resource server itupun harus di pikirkan mulai dari resource yang di gunakan apakah ngeberatin aplikasi kita dari sisi client atau tidak.....

[@dens4t]

Mnurut saya validasi front end membantu user.. validasi back end membantu programmer

[@fandisusanto7221]

SOLID Principle

[@fandisusanto7221]

Single Responsibility Principle.

[@juliansyah4byte57]

Biasanya di FE cuman regex email, length text dll

[@zulamridurrinnafis4845]

Kalo menurut saya sih, ini masing2 PM punya alasan masing2 untuk handle validasi, tapi yang pasti di backend harus ada validasi, dan PM wajib bertanggung jawab dengan komunikasi tim mereka, sehingga tidak terjadi perbedaan antara validasi FE dan BE.

[@udisatriani4239]

validasi enak sih di Tsql, selesai

[@bryanltobing]

setuju validasi di backend(api) wajib. lebih baik lagi sih tetap di dua duanya. cuman emang harus dibahas caranya gimana biar sync. mungkin bisa pakai validation generator yang bisa generate buat both frontend dan backend secara bersamaan. jadi punya single source of truth

[@mrsgitabarli9048]

Really amazing. Thanks

[@kangqian8288]

Mmmmm.... Kalau di api ada masukkan token dari postman tanpa ada token bisa tembus ke BE juga lah???

[@YangUnik2Aja]

validasi di FE kayaknya gampang ditembus, jadi paling secure emg validasi di backend

[@MrKeliv]

Terakhir2 ini saya kalo bikin validasi. Hanya di BE doank. Biar ga ngerjain berkali2. Apalagi kalo utk mobile dan web. Dan kalo pun ada update validasi. Yang diupdate cuman BE. Sama sperti masukin languages. Itu hanya di BE. Biar saat ada perubahan tinggal di BEnya aja yang diupdate dan lebih simple tanpa hrs compile ulang untuk FE dan Appsnya

[@heraldpride1643]

pengalaman pribadi di salahsatu sistem perbankan plat merah, waktu itu login di web dan di mobile berbeda untuk masalah validasinya alhasil mereka dalam beberapa waktu singkat langsung update sistemnya

[@ProgrammerZamanNow]

memang sulit kalo terlalu banyak tempat menambah validasi

[@ArdiansyahUAD]

Bagaimana memvalidasi textarea untuk mengecek inputan kalimat panjang sembarang, misalnya: "aadsfcxvsfasdfad aderwxxxxx" atau "lorem ipsum dkk". Apakah ada tool di FE atau BE untuk memvalidasinya? Goalnya hanya menerima inputan text area yang benar2 sebuah kalimat

[@bryanltobing]

kayaknya ini harus pake model machine learning

[@iqbalramadhan9315]

Case nya kang Eko sama kayak App Prakerja kemarin nih. Cuma bedanya, itu pas mau ganti password 🤣

[@muhammadmuchson6543]

bang tanya dong, kalau hanya di BE, nanti sever performance nya gmana ya? soalnya untuk mendapatkan response validasi kan harus melakukan akses ke server dulu ni(BE maksud ku). sedangkan kalau kita pakek validasi FE hal tersebut bisa dihindari. kalau menerapkan vaildasi FE dengan baik, server gak begitu sibuk diakses terus dengan urusan validasi, karena apapun yang kita masukan BE udah pasti bener. itu diperhitungkan gak ya? atau hal2 kayak gitu gak kerasa kalau urusan validasi?

[@BukanSiiinchan]

di fe bisa di otak atik di settingan browser wkwkw

[@ProgrammerZamanNow]

ada 2 jenis validasi, validasi request, validasi business logic, kalo validasi request, gak sebera, kalo validasi business logic, gak bisa juga di lakuin di FE, tetep harus di BE. Dan sejak awal, dari BE harus udah disiapkan untuk handle traffic, bukan malah di trotle di FE, kalo nanti di hit pake BOT, ya gak guna juga akhirnya

[@muhammadmuchson6543]

@@ProgrammerZamanNow wah gitu yes bang, gokil, makasih ilmunya

[@juditnugroho4306]

Kang minta saran kalau dari FE (web) kirim request validasi gini better pakai javascript kek ajax dll atau better pakai form ya? Kan karena kadang kita sering tuh dpt validasi gagal tapi web engga ke reload

[@juditnugroho4306]

Gw lagi butuh masukkan nih. Lagi butuh request ke BE tanpa reload ke web tapi juga yg aman (ga kelihatan di inspect dll)

[@ProgrammerZamanNow]

kalo saya sekarang lebih suka pake ajax

[@dinarwijaksono9493]

Mantap penjelasannya

[@jeckyfreaky]

kalo validasi yg pakek logic lebih, enakan taro dibackend, nanti pas balikin msg bisa disisipin error message nya apa, tinggal ditampilin di front end

[@tantowi2222]

Thanks mas eko, sangat membantu nih ilmu gini....

[@pharzzz]

Kalau di be sudah pasti harus di pasang validasi, tapi bukannya di fe kalau memungkinkan juga harus di pasang validasi ya? Terutama validasi inputan dari user. Experience usernya juga akan lebih bagus jika langsung tau data yg di input ada yg tidak sesuai, dari pada harus tunggu respon dari be dulu

[@pharzzz]

Kecuali fe nya malas bikin validasi wkwk

[@ProgrammerZamanNow]

validasi yang mudah aja, lebih ke field validation, misal required contohnya

[@namadepan2769]

Klo validasinya di backend kasihan usernnya, udh cape² ngisi tau taunya malah gak valid :v

[@ProgrammerZamanNow]

validasi di FE, tau2 usernya pinter, nembak pake postman, lol

[@muhammadmuchson6543]

bisa di masukin localstorage atau sejenisnya sih mas, jadi kalaupun data di refresh gak akan ilang, tergatung FE nya itu, niat atau enggak ngurusin formnya wkwkwk 😆

[@achmadjulian741]

@@muhammadmuchson6543 Oh berarti di FE bakal ada pengecekan apakah user sebelumnya sudah memasukan username dan password, kalau sudah tinggal yang di local storage ke form nya Bang?

[@dhanipro6742]

Saya kira kasus login kurang tepat untuk bahas validasi backend/api, karena password pada saat login tidak perlu divalidasi hanya dicococokkan Untuk registrasi harus ada validasi password (kekuatan password) tapi pada saat login tidak perlu divalidasi lagi

[@yuangkalex9095]

Nah ini Saya juga heran sama kasusnya kok pas login di web nya harus validasi lagi ya. Kata pak eko user udah sukses register di mobile.

[@adambahtiarfirdaus3357]

Saya mau nanya pak, aplikasi saya pernah pentest, katanya lebih baik response dari API itu tidak memberitahu kesalahan apa yang dikirim oleh FrontEnd, agar tidak mudah diserang hacker, tapi hal ini malah mempersulit forntend, apakah bisa dikasih rekomendasi lain untuk menangani hal ini?

[@wekeb]

Mungkin maksdnya jngn diberitahu specific misal kalo login dgn user dan password trus salah satu salah misal password nya, pesan yg muncul cukup "username atau password salah" jadi bukan specific password salah, mungkin gtu mas 🙏

[@ProgrammerZamanNow]

beberapa tempat menmang errornya jangan terlalu spesific, misal kaloo login, jangan dikasih tau password salah, user gak ada, karena bisa di bruteforce sama heker, bilang aja, login gagal

[@adambahtiarfirdaus3357]

mantap terimakasih 🙏

[@habibabdurrasyid3538]

Waah, terima kasih udah dijawab kang Eko ☺️🙏

[@x_gangsa]

Kalo validasi dari backend bukannya nanti kepanggil api nya terus jd beban servernya sendiri om? Kalau dipasang keduanya bagaimana? Memang jd makan waktu buat ngerjain dgn hal yg sama. Hehe

[@ProgrammerZamanNow]

ya gpp, kan emang API dibuat untuk di call

[@x_gangsa]

@@ProgrammerZamanNow kalo dibikin kelas khusus sptnya bagus bgt. Berhubung channel om ini pembahasannya kearah problem solving programmer di dunia nyata dan ga sekedar teori aja spt di channel lainnya. Kalo kata orang "ini sih isinya daging semua." 🤓

[@daffahanz1540]

brti nanti untuk FE handling error nya lewat HTTP response status code ya pak?

[@ProgrammerZamanNow]

dari BE balikin detail di response body nya juga

[@daffahanz1540]

@@ProgrammerZamanNow oh oke siap pak, paham terimakasih insight nya 😁

[@scorpi0000]

nanya plugin figmanya apa namanya?

[@ProgrammerZamanNow]

figma jam

[@pangestuyoga6446]

Mau tanya dong kak, untuk gabungan frontend sama backend di laravel gimnah yah ? Soale aku bikin frontend beda folder sama backend nya. Baru belajar laravel soalnya 🙏

[@andikautama5195]

pake API mas. dilaravel output nya API bisa JSON atau xml atau lainnya. nanti dari frontend gabunginnya menggunakan link api dari laravel. CMIIW

[@pratamaanjay6680]

pake InertiaJS

[@farhan15r]

Laravel kan FE BE ny udh gabung, laravel pake template engine Blade, kalo mau FE ny js bisa pake inertia

[@yudaaditia5469]

laravel sudah termasuk FE dan BE, Kalo misalnya FE nya pengen pake framework lain bisa juga kok misalnya ( react js ), bisa FE nya diganti pake ReactJs, tapi tetep nanti ke BE nya dibuat API agar bisa di akses oleh FE

[@localhousee]

Ya di FE tinggal hit API dari laravel. Paling yg agak menantang dikit waktu config sanctum (kecuali emang mau make JWT)

[@andiksetyawan6608]

klo validasi di FE lbih untuk UX sih

[@ProgrammerZamanNow]

selama BE bisa balikin detail error, FE juga mudah untuk menampilkan error detail nya

[@galangaidil9421]

Terus kalau ada input tipe file gimana ya mas Eko? Misalnya ada kondisi dimana user ingin insert video produk, tapi filenya itu gede banget. Nunggu validasi dari backendnya kan lama, karena file tersebut dikirim dulu baru di cek kan. Dalam situasi seperti ini, apakah tetap validasi di backend aja? atau bagaimana menurut pandangan mas Eko? Terima kasih.

[@thelazycomputer99]

tergantung situasi bg, tapi memang kalau masalah size, bisa di cek di FE aja

[@rickymurdana]

kalau utk size yg besar, sebaiknya ada validasi dari frontend biar menghemat waktu sebelum dikirim ke api

[@kamyou.]

mas eko kapan buat konten oop python

[@erikwidiyanto1013]

Jadi kesimpulannya validasi di api ya?boleh minta pendapatannya? lebih bagus mana jika dilakukan integration test antara fe dan api atau tanpa integration test atau test nya cuman di salah satu saja yaitu fe atau api?karena tadi sempat menyinggung validasi di dua sisi malah menjadikan mis validasi.

[@fahmiaziz8979]

tapi bukannya lebih baik validasi di FE, karna misal client salah input dia tetep kirim resource full ke BE dan butuh bandwith di server, jadi bakal ada pengiriman resource yang lebih dari sekali. sedangkan jika sudah divalidasi di FE ketika mengirim di BE sudah pasti di accept dan cuma menggunakan resource sekali. gimana menurut kang eko?

[@ProgrammerZamanNow]

udah saya jelasin di video nya, kenapa hanya di BE

[@septianmulyana5970]

Justru lebih baik di BE, di FE rawan di manipulasi. Kalau dibilang masalah resource tinggal gimana atur skalabilitas nya aja

[@pratamaanjay6680]

itu prematur optimization, bandwidth nggak gede

[@agusmrr]

dua2 lebih bagus, tapi back end wajib karena validasi terakhir. contoh kasus limit upload file ukuran besar, bisa dicegah di client terlebih dahulu, walaupun bisa di bypass.

[@nonanamii]

semangat, semangat, suka bgt sedetail itu ngejelasinnya, aku yang bener2 ngga ngerti jadi tau bgt, bermanfaat sekali, seriusss

[@masrizalw]

jelas di BE 🤣, FE suka ngawurrr