Ngobrolin URL - Ngobrolin WEB ep45

1:35Itu ukuran informasi, konsentrasi, partikulat.

1:40Tunggu, apa ini?

1:41Ya, jenis polusi lah.

1:46Ya, mudah-mudahan teman-teman sehat-sehat terus, jaga kesehatan.

1:50Kita kejarnya index, index Core Web Vital Lighthouse 100.

1:56Iya, oke, jadi malam hari ini masih bersama kita bertiga, ada Eka, ada Ivan, dan saya Riza.

2:03Ngobrol-ngobrol.

2:05Iya, ngobrol-ngobrol seputar web karena kita adalah Google Developer Expert di area web.

2:11Di area konsentrasinya web, jadi web teknologis.

2:15Kalau Ivan itu performance ya.

2:18Betul.

2:20Kalau saya sama Eka, Capabilities.

2:22Beberapa kali kita udah bahas tentang Capabilities, terutama waktu bahas tentang project Fugu.

2:28Performance juga beberapa kali juga.

2:31Malam ini sedikit berbeda karena kita ingin kembali ke dasar, ingin kembali ke fundamental.

2:37Kita bahas yang fundamental, salah satu yang fundamental di web adalah tentang URL.

2:42- URL. - Penyeleng URL apa?

2:44- Universal, universal. - Iya, di chat lah ya.

2:48Ada yang ngulis di komen, jangan gitu-gitu sendiri.

2:52Ada URI, ada URL.

2:55Nah itu bedanya apa ya? Kita bahas bareng-bareng.

2:58URI dan URL.

3:00Iya, kita juga mungkin kayak apa ya, kita tahu fungsinya apa.

3:05Tapi mungkin penamaannya, istilahnya itu banyak yang kita belum familiar kali ya.

3:09Termasuk saya juga.

3:11Kalau dulu malah beneran nggak tahu sih, dan pertama kali ketemu kat istilah URI, itu new WordPress.

3:18Kalau di setting-setting itu pasti ada URI gitu kan.

3:21Lupa deh, di settingnya pasti ada deh.

3:23Beneran pertama kali banget ketemu URI something-something.

3:28- Lupa. - Tiba gitu.

3:31Nah, terus soal fundamental ini, kedepannya sih kita kayak berharap bakal rutin ya.

3:37Maksudnya walaupun kita selang-seling juga dengan misalnya API terbaru,

3:43kadang bahas framework atau library, atau mungkin event-event terkait web.

3:49Tapi semoga kedepannya ya minimal sebulan sekalilah kita bisa bahas yang fundamental banget.

3:55Yang mendasar, balik ke asalnya.

3:59Iya, jangan bahas yang hype-hype terus.

4:02Kita bahas yang fundamental, karena yang bisa bertahan adalah yang fundamentalnya.

4:06Framework bisa datang dan pergi, library bisa datang dan pergi.

4:11- Tapi fundamental... - URL dari tahun 1990 sampai sekarang masih dipakai kan?

4:16Betul, betul, betul.

4:18Kita udah sempat bahas yang fundamental juga di JavaScript tentang loop-loop itu.

4:25- Event loop sih. - Event loop.

4:28Event loop.

4:30Terus ada beberapa lah ya.

4:33Terus sekarang kita mulai ingin setidaknya sebulan sekali bahas fundamental.

4:40Ini adalah mungkin bukan yang pertama ya.

4:44Mungkin yang kesekian gitu.

4:46Tapi kita mau bahas malam ini adalah tentang URL.

4:49Awalnya kirain typo, URI itu.

4:52Iya, ini sama L itu hampir sama ya.

4:55Guru besarnya itu kayak L ya.

4:58Kirain lupa mencet shift ya. Lupa mencet shift, nge-tick L.

5:03- Asal bisa lolos buat press tapi nggak mungkin banget. - Betul.

5:07Nah, jadi pertanyaannya URL itu apa?

5:11Nah, ini ada sedikit penjelasan dari...

5:14Welcome to the jungle.

5:16- Namanya... - Ini...

5:18Iya, domainnya lucu ya.

5:20Nah, ada URL, ada domain.

5:22Nah, kita lihat di sini ada gambarnya kan, ada ilustrasinya.

5:25Jadi URL itu ada terdiri dari beberapa komponen.

5:30Yang pertama adalah skima.

5:32Kalau sekarang mungkin semua teman-teman udah familiar dengan HTTPS.

5:37Kalau dulu ada HTTPS, mungkin dulu ada FTP.

5:42Kita bisa FTP dari browser kan.

5:45- Walaupun hanya untuk baca misalnya. - Sampai sekarang pun bisa.

5:48Masih ya.

5:49Ada banyak, skima itu ada banyak FTP, SMTP.

5:52- Terus kemudian... - Protokol ya sebenarnya? Benar nggak sih?

5:55Protokol.

5:57Tapi kalau buat alamat web kan, skimanya cuma bisa HTTPS.

6:03Protokolnya bisa macam-macam.

6:05Iya, bisa SSH juga.

6:08Bisa banyak, cuman yang bisa dibuka di web browser ya mungkin hanya beberapa.

6:14Kayak SSH ya, kayaknya nggak bisa ya.

6:16Nggak bisa.

6:17- FTP bisa? - Nah, FTP bisa.

6:20Nah, setelah skima, terus kemudian ada titik 2.

6:23Itu titik 2 termasuk skima nggak?

6:25- Tidak ya? - Tidak.

6:28Itu separatornya.

6:30Itu udah default bawaan dari spesifikasi nanti kita bakal lihat.

6:34Nanti ada ya.

6:35Ya, titik 2 slash slash, kemudian ada host.

6:39Host ini domain kali ya.

6:41- Mungkin bisa dipecah lagi ya. - Ya, sebelum host itu...

6:44Host sebelum itu bisa ada sebenarnya kayak itu user info.

6:47- Kalau misalnya... - Itu tuh di atasnya.

6:50Di URL Syntax itu bisa user info.

6:53Oh ya, kalau kita pakai FTP ya.

6:57FTP atau basic out.

7:00- Atau HTTPS? - Basic out.

7:02Basic out, ya basic out.

7:03Kalau misalkan kita mau akses admin site yang tidak ada login page-nya, kita bisa pakai ini kan.

7:10- Salah satu atau dua server ya. - Oh iya, kalau tergantung servernya ya.

7:13- Itu yang dari server kan? - Tergantung servernya.

7:15- Ya, apakah Apache atau nginx. - Ya, kalau pakai basic out dan...

7:20Authentication pakai basic out dan itu datanya disimpan di HTPathWD.

7:27- Bahasa Indonesia aja ya, HTPathWD. - HTPathWD.

7:29- HTPathWD. - HTPathWD.

7:31Ya, ada juga HTAccess kalau zaman dulu main-main sama Apache itu ada HTAccess ya.

7:37- Dot, dot HTAccess. - Iya, dot HTAccess.

7:39- Tidak sengaja kaplos. - Tapi itu plain text ya.

7:42Ya, hati-hati. Dan habis itu baru masuk ke host.

7:48Host ini biasanya kalau kita develop itu localhost atau 127.0.0.1.

7:55- Atau domain kalau di... - Atau .local.

7:58- .local. - Atau IP address.

8:02Ya, IP address komputer yang mau diakseskan.

8:06- Domain juga bisa. - IP address rumah apa ya?

8:12- Huh? - IP address...

8:14- 192.168.0.0.1. - Bukan, 127.0.1.

8:17127.0.0.1.

8:19Ya, itu localhost.

8:21Terus diikuti dengan port, port ini juga...

8:24- Optional juga. - Optional.

8:26Kalau defaultnya itu 80 untuk HTTP dan 443 untuk HTTPS.

8:33Terus kalau kita nggak pakai port, ya kalau HTTPS berarti dia langsung 443.

8:40Kalau HTTP dia 80.

8:42- Kemudian... - Boleh nggak HTTP tapi pakai 443?

8:45- Coba. Nggak tahu. - Boleh.

8:48- Boleh aja. - Boleh di portnya tapi kan?

8:50- Iya. - Tapi nggak ada SSL-nya.

8:52Yes.

8:54Kemudian baru ada path, ya.

8:57Kemudian ada path, path ini bisa dari /n/jobs/apa gitu kan.

9:03Setelah itu dengan separator tanda tanya baru ada namanya query params ya.

9:09Query parameter.

9:11Ada yang kubuk search query, search query parameter.

9:15Nah, ini ada breakdown yang lebih bagus di link satunya nanti aja.

9:19Terus ada fragmentnya berarti.

9:22- Fragment itu hash. - Fragment itu hash anchor.

9:27Anchor atau pakai tagar, tanda tagar.

9:31Ini juga cukup familiar, cukup sering digunakan dulu awal-awal ketika kita bermain-main dengan single page application.

9:38Lama dulu sebelum se-keren sekarang kita pakai hash.

9:43Routingnya pakai itu.

9:45Routingnya pakai hash.

9:47Oke. Dan sampai sekarang pun itu si fragment bisa dipakai apa?

9:53By default kalau kita punya element dengan ID tertentu.

9:57Misalnya kita punya element ID-nya foo gitu.

10:01Nah, terus itu otomatis tanpa pakai routing library tambahan apapun.

10:07Kalau kita pakai hash foo itu browser akan otomatis langsung ke bagian itu, ke element itu.

10:16Terus biasanya ditambah smooth scroll.

10:19Ya, boleh. Kita juga javascript pakai web API scroll into view ya.

10:24Scroll into view.

10:26Ada banyak API menarik ya. Ada view transition yang lagi hot ya.

10:32Jadi multi-page application juga sudah seperti itu ya.

10:37Keren, keren.

10:38Sebetulnya tanpa javascript tambahan apapun,

10:41kalau kita nge-link ke encore dan ada matching ID-nya itu otomatis bakal langsung scroll ke situ.

10:48Walaupun tanpa tambahan.

10:51Oke. Nah, mungkin tadi ada yang sedikit terlewat tentang alasan.

10:58Kenapa kita perlu tahu tentang API ini?

11:01API URL ini.

11:04Bukan API ya. URL maksudnya.

11:08Oh, tapi nanti dibahas tentang API yang javascript punya ya.

11:13Ini masih penjelasan tentang URL-nya sendiri ya.

11:20Tapi perlu juga, maksudnya kenapa kita perlu tahu ini host-nya apa atau path-nya apa.

11:27Yang paling simpel, misalnya kalau kita ngikutin tutorial,

11:30atau kita perlu bantuan, kita tanya di stack overflow atau semacamnya,

11:35kalau kita tanya ke teman kerja sendiri atau siapa lah, ke komunitas discord dan lain-lain,

11:41kalau kita nggak bisa, kita nggak tahu host-name-nya apa, path-nya apa,

11:46kita kan nggak bisa berkomunikasi dengan jelas ya.

11:49Kita nanya-nanya nggak jelas, nggak bakal dapet bantuan yang relevan.

11:54Atau kalau misalnya kita baca artikel,

11:56kalau kita nggak tahu path-nya apa, yang dimaksud path itu apa, query parameter apa ya,

12:02yang kita tahu URL-nya aja gitu ya.

12:06URL-nya atau link-nya, nah link itu apa kan nggak jelas.

12:11Dan biasanya query parameter ini juga bisa digunakan,

12:20kalau kita pakai form dengan tipenya get, dia akan menambahkan query parameter kan.

12:24Bukan otomatis pas di-submit masuk ke URL itu lagi dengan query parameter isian form itu tadi.

12:32Dan query parameter ini tanpa perlu menggunakan framework atau library JavaScript apapun.

12:40Jadi vanilla pun udah bisa melakukan ini.

12:44Dan formatnya itu key value store, ini key-nya, ini value-nya.

12:48-Boleh nggak lebih dari satu? -Boleh nggak lebih dari satu?

12:55Query sama dengan developer, no, query sama dengan ek, boleh nggak?

13:04-Poleh, jadinya array. -Boleh aja.

13:07Yes, jadinya array.

13:09Jadinya nanti query string, kalau kita ambil query string query, jadinya hasilnya array.

13:16Dan bahkan, ini kan key value pair nih, contoh yang di sini query sama dengan developer.

13:22Dan page sama dengan satu, jaman dulu banget.

13:25Jadi originally key-nya doang juga nggak apa-apa. Sampai sekarang juga nggak apa-apa sih.

13:30-Jadi kosong aja ya? -Iya, kosongan pun boleh.

13:34Ada penyelasannya tuh di link satunya.

13:37-Boleh nggak di query string ada slash? -Boleh nggak sih, belum pernah nyoba.

13:43-Di encode nggak sih, dia otomatis ke itu encode. -Oh iya, kita bisa bahas encode juga.

13:49Kayaknya nggak boleh ya?

13:51-Boleh, karena sudah ada tana tanya. Setelah tana tanya, apapun bukan path lagi.

13:59-Apapun ya, apapun. -Iya, jadi delimiternya itu tana tanya.

14:04Kalau sudah tana tanya, ke belakang itu slash itu udah nggak dianggap path lagi.

14:08-Berarti, oh iya sering deh, kan pasti kalau redirect tuh.

14:14Biasanya kalau route yang protected, terus kan redirect dulu ke login.

14:21Biasanya redirect-nya ada semacam query parameter redirect after.

14:26Jadi setelah berhasil login, kalau di redirect balik ke path yang tadi mau diakseskan,

14:31itu biasanya ada slash-nya kan.

14:33-Iya. -Ada pertanyaan, ada maksimum karakternya nggak?

14:38-Ada. -Ada, pasti ada.

14:41-Kalau domain, 63 maksimal, nggak tahu kenapa apa lah. Kayaknya dulu pernah.

14:45-Kalau url, ada maksimum url. Itu ada, makanya nggak bisa JWT kepenyaman.

14:52-Kalau 28 bit atau byte?

14:56-Kalau di Chrome, 283 karakter. Kalau di Firefox, 65 ribu karakter.

15:04Kalau di Safari, 80 ribu karakter.

15:07-Itu berarti nggak standar ya? -Beda-beda.

15:10-Nggak ada standar, maksudnya terserah browser.

15:13Kirain maksudnya ada memory limit-nya yang standar gitu.

15:17-Makanya kadang kalau bawa JWT di query string, hati-hati.

15:23-Kadang bisa kelupanya, kan? Bisa terangkit.

15:26-Jangan seluruh user data dimasukin JWT.

15:30-Itu tadi url. -Ini ada yang ketinggalan tadi.

15:32Ada yang ketinggalan nih. Ada subdomain juga. -Ini sebenarnya sama sih.

15:36-Gak, itu kan masuk hostname. Hostname terdiri dari subdomain, domain name,

15:43sama tld-nya, top level domain-nya.

15:48-Kalau URI apa? -Itu ada jawabannya di link satunya.

15:55Ternyata URI itu... -Resource Identifier.

16:00-Kepanjangannya. URI itu adalah term yang paling luas ternyata.

16:05Paling generic. Paragraf ketiga itu.

16:08Any character string that identifies a resource.

16:12Jadi itu kayaknya superset-nya.

16:17Terus salah satu subset dari URI adalah url.

16:21Uri adalah URI yang mengidentifikasikan resource berdasarkan lokasi.

16:28Makanya ada l-nya kan. Uniform Resource Locator.

16:32-Urn? -Urn? Gak tahu.

16:35-Urn. -Paling pertama ya? Paling pertama banget.

16:39-Dia uniform resource locator. Kalo l kan locator.

16:44Kalo n urn urn uniform resource name.

16:50Ini buka link-nya. Lebih enak penjelasannya.

17:00Eh bentar, bentar. Salah.

17:03Ini dia.

17:09Jadi URI itu paling atas, term paling atas. Dibawahnya ada url dan urn.

17:17Itu dia. Turun, turun, turun. Stop. Ini dia.

17:23URI, url, dan urn.

17:27-Berut tahu ada. -Urn. Biasanya urn.

17:32Urn-nya apa? Gitu. Nah kita bahas.

17:35Jadi kita sudah bahas yang url kan. Kalo urn itu gini.

17:42Kalo identifier itu sama kayak tadi.

17:45Jadi depannya schema yang gak peduli.

17:48User, password, host, port, path, query string, fragment.

17:52Sama gitu ya. Terus ada schema di depan.

17:56Makanya kalo misalnya kalo urn-nya apa?

18:06Kalo urn itu mau identified dengan lokasi yang kita tuju.

18:12Kalo urn itu contohnya kayak tadi telnet, ssapah, itu termasuk di urn.

18:21Dan schema itu bisa apa aja ya.

18:26Gak mesti HTTPS, HTTPS. Bisa bikin.

18:31Custom schema bisa kayak kita mau bikin telegram kan ada.

18:37Contohnya tel, mail2, ada kan?

18:41Tel, mail2 itu URI.

18:45Dan setelah diadopsi, terserah browser mau behavior-nya gimana ya?

18:50Karena kan misalnya kalo kita mail2, itu otomatis ngebuka default mail application di OS.

18:56WhatsApp apa ya? WhatsApp kalo gak salah, WhatsApp.2 ya?

19:01No, no, WhatsApp.2.

19:04Itu akan membuka aplikasi WhatsApp.

19:07Sedangkan kalo urn, biasanya dipakai kalo untuk single sign-on.

19:17Kebanyakan. Jadi resource namenya kemana.

19:21Jadi nanti XML-nya blablabla, urn nanti jenis, jenis entity-nya apa?

19:26Panjang tuh. Urn, example, animal, da-da-da.

19:31Jadi nanti, gue harus buka VSCode.

19:36Anyway, bisa panjang tuh nanti untuk entity namenya.

19:40Nah itu dijelasin pake urn.

19:44Itu yang mem-parsing siapa, misalnya itu ditaruh di mana?

19:48Di XML, biasanya untuk single sign-on untuk ke Active Directory.

19:57Jadi pake, mumpung buka VSCode dan ada project-nya nih, gue lupa.

20:04Gw sih langsung minta, liatin di sensor dulu.

20:08Gak boleh buka sih, jadi gue cuma bilangin aja namanya IDP Metadata.

20:16Jadi namanya Entity Descriptor.

20:19Nanti ada u, entity ID-nya apa?

20:23Terus dia urn, oasis, names, tc.

20:28Samel, nah itu deh, pake untuk single sign-on, pake samel 20 metadata.

20:40Jadi biasanya pake gini nih.

20:45Samel metadata.

20:51Urn, titik 2, oasis, titik 2, names.

20:59Jadi sebenarnya ini nama separatif pake tanda titik 2.

21:07Makanya namanya urn.

21:11Sedangkan kalau url ngacu ke fokasi.

21:16- Yes. - Nice, baru tau. Temen-temen di chat ada yang pernah pake urn?

21:21Atau coba di-share pengalamannya?

21:25- Urn. - Urn.

21:27- Gue bacanya urn, sebenarnya bacanya urn sih. - URN.

21:30- Kalau urn kan bukan url. - URN. Url.

21:38Dan kalau temen-temen mau lihat spesifikasi aslinya, ini dia.

21:44Kalau mau baca, silahkan. Yang bikin apa?

21:49- Pak Ser Tim Berners-Lee. - Tim Berners-Lee yang dulu bikin browser pertama kali ya.

21:56Eh, kok browser sih? WWW ya?

21:58- Web Developer. - Web Developer. The Real Web Developer.

22:04Jadi dia yang membangun jaringan.

22:09Secara harfiah yang mau bangun platform web.

22:13- Dan dia yang bikin sendiri. - Nah, karena ini spesifikasi teknis.

22:16Berarti bisa kita undang dong kesini yang ngobrolin web ya.

22:19- Oh, boleh, boleh. - Minta aja dulu nanti.

22:24- Iya, diterima atau enggaknya belakangan yang penting ngundang. - Iya, itu ada penjelasannya uri, url, urn.

22:32Ada yang sering pakai email tuh?

22:39Katanya, ini kata damar bahaya. Bisa scraping.

22:45Bahaya scraping email.

22:48Di website ada mel2-nya kan gampang banget kan pakai regex kan langsung dapet tuh.

22:55Untuk dapet, ya itu kembali ke...

22:58Oh, scraping alamat emailnya ya.

23:01Kalau memang udah ditaruh publik, ada alamat email ditaruh publik, ya berniat untuk ditunjungi kan.

23:08Oh, kan sempetnya ternyata mel2 misalnya titik 2, Eka, remove this text please at example.com.

23:18Jadi apa, kalau pakai buat scraping, text-nya jadi apa, itu kan alamatnya bukan itu sebetulnya.

23:27- Masih banyak yang pakai kan ya? - Itu akal-akalan.

23:31Iya, akal-akalan nontir. Tapi misalnya kalau kita, kita yang prof level lah, production level banget,

23:40ya mungkin bisa pakai kapcah buat refill.

23:44Di YouTube pakai itu kan? Jadi kalau misalnya YouTube channel, ada above, terus ada alamat emailnya,

23:50kan ada itu security check-nya, refill email address, kita kayak nge-click button dulu, ada JavaScript check-nya,

23:59baru dimunculin alamat emailnya.

24:03- Jadi target spam. - Itu kayaknya berlekuat alamat email string apapun ya,

24:09bukan cuma protokol mel2 aja.

24:13Betul, semuanya bisa di, selama publik ya, udah harus menerima resiko di spam.

24:24Ya itu, atau kita protect, kita protect pakai cara lain ya, sama kayak memprotect resource apapun yang...

24:31- Kan sudah ada spam assassin. - Oh iya, iya.

24:37- Semua email sekarang... - Masih hidup nggak sih? Masih hidup nggak sih project itu spam assassin?

24:42- Wah nggak tahu deh. - Apa itu? Belum pernah pakai.

24:44Sekarang kayaknya pakai Gmail pakai itu kayaknya udah built-in ya, jadi nggak perlu pakai.

24:48- Itu project-nya apa, C? Spam assassin. - Oh.

24:52Iya, pernah dengar, pernah dengar.

24:55Nah, berikutnya, ini yang mungkin sebagai orang juga belum familiar dengan API ini,

25:08jadi si web itu punya JavaScript API untuk menguruskan semua urusan tentang URL.

25:16Jadi kalau misalkan, ya misalkan teman-teman dulu kalau misalkan, wah mau cara manual nih,

25:24mau parsing, misalkan parsing...

25:27- Query parameter. - Query parameter.

25:30- Wah diparsing, apa, cari... - Kurang ming.

25:34Split, split tanda tanya, terus split sama dengan, wah.

25:39Eh, bukan sama dengan. Seprit ini dulu dong, tandadan.

25:43- Seprit tanda tanya dulu. - Oh iya tanda tanya dulu dan...

25:47...habis itu sama dengan, iya kan?

25:50Atau mau construct URL, dia tambahin domain-nya, terus slash sendiri pakai concat string,

25:58terus parameter-nya tambahin lagi sendiri, itu cara dulu.

26:04- Cara manual, sangat manual. - Pusing sendiri.

26:07Atau pakai regex, lebih pusing lagi ya.

26:12Atau...

26:14Oh iya.

26:20Ya.

26:37Ya, jadi API yang sudah built-in di browser.

26:42Betul. Jadi kalau misalkan kita mau berurusan dengan URL,

26:47baik itu mau parsing atau mau bikin URL baru yang valid, gitu ya.

26:52Biasanya kan kita mau bikin apa, mau arahkan seseorang dari halaman satu ke halaman lain kan pakai URL.

26:59Biasanya kita pakai string aja. Dan itu belum tentu valid kan.

27:03Mungkin ada error-kah atau apa, mungkin tiba-tiba HTTP-nya kurang H, gitu kan.

27:09Jadi nggak valid dan akhirnya jadi broken kan link-nya.

27:15Nah, kita bisa manfaatkan si API ini untuk memastikan bahwa HTTP-nya itu udah valid.

27:21Dan kita juga bisa baca. Misalkan ini, kita masukkan sebuah URL.

27:25Misalkan contohnya kita bikin form lah ya.

27:28Masukkan alamat website kamu, gitu kan. Dia masukkin tuh.

27:33Mungkin dia masukkinnya beda-beda. Ada yang pakai HTTPS, ada yang nggak pakai,

27:38ada yang pakai www, ada yang nggak pakai, ada yang pakai /tandatanya, pakai macem-macem lah ya.

27:44Terus kita mau ngambil. Mau ngambilnya hanya sebagai hianya aja.

27:48Misalkan host-nya atau pathname-nya atau query-nya dan lain-lain.

27:52Nah, itu kita bisa gunakan seperti ini.

27:56Biasanya mau get current URL.

28:01Nah, itu udah API lain lagi.

28:04Jadi sebetulnya URL API ini terdiri dari dua interface.

28:09Yaitu URL sendiri, sama yang kedua nanti kita bakal lihat URL Search Param.

28:17Nah, kalau si URL API ini, coba ada interface-nya di Table of Content deh.

28:27Mana Table-nya? Nggak kelihatan. Oh, ini.

28:30Nggak tahu.

28:31Kalau di layer besar sih bisa.

28:34Oh ya, nah, nah, nah. Bawah, bawah, bawah.

28:37URL dan URL Search Param.

28:40Nah, dua-duanya ini interface-nya ada bisa dipakai buat constructor, ya.

28:47Yaitu bisa new URL.

28:49Nah, new URL itu argumennya bisa berupa string.

28:53Yang tadi kan kita lihat contohnya string-nya.

28:56Bisa, sebetulnya bisa objek apapun sih.

28:59Objek apapun yang bisa di stringify.

29:02Contoh gampangnya ada location object.

29:06Nah, kalau kita pengen get current location, ini agak-agak menipu juga sih.

29:11Jadi URL interface itu untuk memanipulasi atau untuk bekerja dengan URL apapun.

29:19Sedangkan ini terpisah.

29:22Kepisah dari URL API, ada juga interface lainnya namanya location.

29:27Location itu untuk current location.

29:30- Nyambungnya gimana? - Windows location.

29:33Karena top-level context kalau di browser, di DOM kan Windows ya.

29:39Windows itu brand.

29:42Windows.location.

29:44Nah, kalau kita pengen dapetin URL dari lokasi saat ini, kita pakai constructor URL tadi.

29:51New URL dalam kurung argumennya, window.location.

29:56Coba aja buka console, apa? Ketik di console log, di DevTools.

30:04Console, new, new URL.

30:09URL dalam kurung window.location.

30:14- Gini? - Enter.

30:22Ya, kita dapat origin-nya.

30:26Origin-nya mana aku, origin-nya di bawah.

30:29- Origin, host, hostname. - Developer.mozilla.org.

30:34- Nggak ada hash. - Pathnya sudah dapat semua.

30:37Path name-nya dapat, yang ini.

30:40- Servesparamnya. - Protokolnya, servesparamnya nggak ada.

30:44- Karena kita nggak pakai serves. - Kita nggak pakai servesparameter.

30:49Atau query string, ya. Query string masuk servesparam.

30:52Window.location-nya sendiri bentuknya string.

30:57Kalau kita ketik window.location, ternyata itu bukan URL object.

31:03Itu bukan URL object, tapi location object.

31:06Dan itu terpisah. Ada interface-nya sendiri.

31:10Dulu tuh, aku sebelum paham, sebelum sepenuhnya paham bahwa ini beda interface,

31:16kayak suka ketukar-tukar karena beberapa property-nya tuh ada yang mirip.

31:21Ya kan sama-sama, misalnya ada origin-nya lah.

31:24Sama-sama ada hostname-nya, jadi ada property yang sama.

31:28Mungkin ada metode, ya sama-sama bisa di-stringify, ya.

31:31Jadi ada beberapa metode yang sama.

31:33Tapi sebenarnya itu beda kasus.

31:35Jadi agak nyebelin, kalau misalnya kita nggak sadar bahwa itu dua interface yang berbeda,

31:42bisa, nanti kita bisa salah.

31:46Misalnya coba mengakses property yang cuma ada di location, tapi nggak ada di URL.

31:53Atau sebeliknya.

31:56Jadi itu sebetulnya buat apa?

32:02Bisa ya.

32:05Oh, itu bisa terlepas ke atas.

32:13Jadi kita nggak perlu, ya kayak tadi manual, kita potong satu-satu, terus naik ke atas ke mana.

32:21Itu dengan cara ini aja, kita udah bisa langsung ke root dari si URL-nya.

32:28Ini berarti, ini berarti path-nya beda.

32:33Path-name-nya naik 1, ya.

32:36Eh, naik 2, ya.

32:38Naik 2.

32:41Kok bisa naik 2, sih?

32:43Iya.

32:44Kita sekarang...

32:45Apa URL ini nggak dianggap sebagai path, gitu?

32:47Oh, karena lo...

32:48Coba titiknya 1, atau coba nggak pakai slash?

32:51Ya, coba aja.

32:52Karena nggak pakai trailing slash, kan.

32:55Oh, iya.

32:56Coba nggak pakai...

32:57Ini 1.

32:58Bukan, bukan.

33:00Karena di location itu dia nggak trailing slash.

33:03Ya, benar.

33:04Benar.

33:05Tidak benar.

33:06Titik slash itu benar.

33:07URL itu dianggap dokumen apa?

33:10URL itu dianggap...

33:15Bukan, apa.

33:16Tidak, dianggap directory.

33:18Coba URL di paling atas, di address lo, tambahin ini.

33:22Tambahin, trailing slash.

33:23Oh, tambahin ending slash.

33:27Oh, dia nggak bisa.

33:28Berarti di window.location-nya aja tambahin slash.

33:32Trailing slash.

33:34Oh, nggak bisa window.location itu kan...

33:37Nggak bisa lah, window.location kan bukan string.

33:39Nggak apa-apa, coba.

33:40.href.

33:41.href.

33:42.href.

33:43.href.

33:44Tambah.

33:45Gini?

33:50Iya.

33:51Ininya 2, 1?

33:52Terserah.

33:532, ya?

33:542 aja, biar bisa dikomper sama yang tadi.

33:57Nah.

33:58Oh iya, betul.

34:00Baru benar.

34:01Ini kayak dianggap dokumen sama dia ya.

34:03Jadi kayak URL.html gitu lah ya.

34:06Betul.

34:07Sama satu node nih.

34:09Turun.

34:10Constructor.

34:11Dibawah tadi.

34:13Terus, terus, terus.

34:15Common Mistake.

34:17Banyak banget.

34:18Oh, ada ya?

34:19Ya.

34:20Static Method.

34:21Stop, stop.

34:22Eh, di atasnya, atas tadi.

34:24Eh.

34:25Stop.

34:26Nah, stop, sedikit ke bawah.

34:28Dibawah, stop.

34:30Constructor ini punya throw error ya.

34:34Jadi harus di try catch.

34:36Oh iya, kalau nggak di catch, terus kita ngapain-ngapain random.

34:41Terus ada kesalahan.

34:42Oh, dia berhenti deh.

34:44JavaScriptnya stop.

34:46Itu Common Mistake.

34:48Sering banget gue nemuin itu.

34:50Jaman dulu.

34:52Apa sih yang bikin kita?

34:54Siapa sih yang bikin ini?

34:56Taunya?

34:58Siapa?

35:00Gue sendiri.

35:02Sudah biasa.

35:04Sudah sering terjadi.

35:06Itu ada meme-nya nggak sih?

35:08Kayak Scooby Doo itu loh.

35:10Kan biasanya penjahatnya, apanya, nyamar jadi hantu,

35:12pas dibuka, ternyata orangan.

35:14Nah, itu kayaknya ada meme-nya,

35:16pas dibuka, ternyata kita sendiri.

35:18Nah, ini ada pertanyaan dari Lamar.

35:22"Pakai API URL ini, apa bisa atur CSS

35:26agar bisa styling anchor tanpa JavaScript?"

35:30Pengennya kayak...

35:32Kayaknya belum bisa dicampur ya.

35:34Eh, bisa aja.

35:36Kalau kita tahu exact URL-nya,

35:38tapi nggak usah pakai sudo yang...

35:40apa, titik 2, 2 kali gitu.

35:42Jadi gimana tuh?

35:44Kayaknya bisa, coba.

35:46Ya, coba aja.

35:48Coba.

35:50Coba, coba.

35:52Live code kita, live code.

35:54Let's go, let's go.

35:56Coba ya, gimana caranya sih?

35:58Cresen ya?

36:00Cresen.

36:02Live code.

36:04Live code kita.

36:06Misalnya kita pengen...

36:10Sudah?

36:12Sudah, sudah menjual?

36:14Sudah, sudah.

36:16Kita pengen...

36:18Yang link-nya ini ya.

36:20"Uniform Resource Locator"

36:24Oke.

36:26Loh, nggak kelihatan kodenya.

36:28Iya.

36:30Ini cuma share...

36:32Share full screen ya?

36:34Share window ya?

36:36Ya, share window.

36:38Atau share...

36:40Entire screen.

36:42Tapi hati-hati,

36:44entire screen ya.

36:46Nggak ada apa-apa di sini sih.

36:48Matiin dulu kerja, nggak ada NDA-nya.

36:50NDA-nya.

36:52Matiin dulu ya.

36:54Kalau nggak, share window aja.

36:56Jadi bolak-balik, tapi...

36:58Share window.

37:00Aman.

37:02Sudah share belum?

37:04Sudah, sudah.

37:06Kita pengen share sih link yang ini nih.

37:08Tambah.

37:10Coba deh.

37:12Coba kayak gini dulu ya.

37:14"Semua Angkor kan pasti ada rev-nya."

37:18"Color Gigi."

37:20"Color Hot Pink."

37:22Ah, nggak berubah.

37:24Nggak bisa berarti.

37:28Bentar-bentar.

37:30Nggak mau nyerah gitu.

37:32Bisa dong.

37:34Oh, important.

37:36Iya.

37:38Ini kan spesificity-nya lebih tinggi.

37:40Oh, keren.

37:42Tapi kelihatan nggak? Sekarang di DevTools kita bisa lihat spesificity-nya selektor ini.

37:48Iya, barusan dikasih tau sama Mbak Jesseline.

37:52Di salah satu update DevTools.

37:54Oh, kita tahu nih kenapa kalah spesificity-nya kalah.

38:02Peralitasnya ya.

38:06Gue paling suka kalau ngasih CSS itu pakai important sama position absolute.

38:12Atau diulang selektornya.

38:16Tapi hati-hati ya.

38:18Kalau important itu kan priority ya.

38:20Jadi kalau semuanya important ya nggak ada priority jadinya ya.

38:24Jadi berantem lagi ya.

38:26Tergantung spesificity-nya lagi.

38:28Spesificity.

38:30Kalau spesificity-nya sama tergantung urutan. Yang menang yang bawah.

38:36Ya udah itu kalau semuanya important nanti temen kerja kita nggak override style kita di bawahnya important.

38:42Kita kalah, tak pusing edit lagi bawahnya udah gitu aja terus.

38:46Coba kasih itu hrefnya.

38:48Hrefnya yang khusus Uniform Resource Locator aja.

38:54Ini yang pink ya.

38:56Coba. / Ya. Glossary URL.

39:00Ya nggak bisa loh.

39:02Nggak bisa. / Nggak bisa bentar.

39:04Coba kalau pakai ini. / Nggak bisa sama dengan.

39:06Bisa.

39:08Bisa.

39:10Aisik.

39:12Background yang ini.

39:14Keren.

39:16Buta warna.

39:18Important.

39:20Font size.

39:22Font size nggak bisa ya kalau inline.

39:24Ya gitu deh.

39:26Ya jawabannya bisa berarti.

39:28Ya mantap.

39:30Sudah terjawab ya.

39:32Ya seru nih ya menjawab pertanyaan dengan lab quote.

39:36Oke lanjut.

39:38Ada lagi yang menarik?

39:40ToString.

39:42Ya ini biasa ya kalau misalkan temen-temen.

39:44Jadi kan URL itu bisa.

39:46New URL-nya kan merutan objek ya.

39:50Objek URL ya.

39:52Nah URL objek.

39:54Ya URL objek seperti tadi.

39:56URL objek ini.

39:58Sama dengan objek biasa nggak?

40:02Ya kan objek khusus.

40:06Ada property khususnya, ada method khususnya.

40:08Misalkan saya mau gini.

40:10Kita bisa akses property-nya.

40:12Bisa kan. / Bisa.

40:14Cuma itu dia kayak.

40:16Itu property khusus URL objek.

40:18Kayak tipenya lah ya.

40:20Untuk nambah Inquiry String.

40:22Bisa kayak tadi URL.searchparams.

40:26Dimana gini?

40:28Ya URL.

40:30Ketika aja URL.searchparams itu.

40:32Ada autocomplete.

40:34Dot.

40:36Eh.

40:38Dot apa?

40:40append.

40:42Bisa nggak sih? / Oh ya append.

40:44Bisa bisa.

40:46Key value.

40:48Di objek-objek.

40:50Message sama dengan.

40:52Gak pakai sama dengan.

40:54Message.

40:56Koma.

40:58Oh key value. / Hello world.

41:00Hello world. / Hello world.

41:02Hello world.

41:04Ini ya.

41:06Ya sekarang URL.

41:08Buka URL.

41:10URL.toString.

41:12ToString.

41:14Eh. / ToString.

41:16Ya.

41:18Itu juga ada mesejnya.

41:20Automatiskan. / Asiknya ya.

41:22Ya.

41:24Nah sebaliknya coba.

41:26Apa?

41:28Coba buka deh URL.

41:30Dikasih query parameter sembarang.

41:32Bisa juga kalau mau

41:34menghapus.

41:36Susahkan kalian to the sign.

41:38Nampilin sesuatu.

41:40URL.searchparams.delete.msg.

41:42Hmm.

41:44Gini?

41:46Terus?

41:48Nah ini ada

41:50ada kopasannya.

41:52Sampai punya kopasan. Karena sering

41:54pakai ini.

41:56Oke from entries.

41:58Ini buat? / Diknis sih.

42:00Tapi capek. / Oh.

42:02Dapat ini ya. / Ya buat ambil, buat nge-access itunya.

42:04Enaknya satu baris doang.

42:06Gak usah kusing-kusing. Splat-split.

42:08Splat-split sama sini. Terus

42:10nge-access array.

42:12Hmm.

42:14Sama itu buka apa?

42:16Siapa yang selama ini melakukan itu secara

42:18manual.

42:20Saya. / Tapi nggak apa-apa. Tapi makin lama

42:22makin ribet.

42:24Iya. / Betul-betul.

42:26Harus didalam try-catch.

42:28Yes.

42:30Sebetulnya yang

42:32bisa throw error ini kan

42:34kalau URLnya salah. / URLnya seperti apa?

42:36Kalau misalkan ya URLnya salah.

42:38Gimana caranya kita bikin URLnya salah. / Coba aja.

42:40Coba aja URLnya kosong argumennya.

42:42Ini aja? / Iya.

42:44Iya.

42:46Nah ini ya.

42:48Atau string. Sekarang string

42:50sembarang. New URL.

42:52Titi-titi bisa.

42:54Test.

42:56Oh bisa. / Jadi

42:58kalau misalkan kita mau bikin kayak gini kan

43:00const redirect

43:02sama dengan new URL

43:04sembarang.

43:06Maka dia error kan.

43:08Ketika kita redirect.

43:10Biasanya nggak ketahuan. Karena URLnya

43:12mungkin variable.

43:14Nol undefined. Object-object.

43:16Iya.

43:18Iya. Terus begitu

43:22form-nya di-submit.

43:24Kok nggak redirect?

43:26Tiba-tiba lihat di console ada error.

43:28Iya.

43:30Langsung nge-break semua. Jadi harus

43:32dipakai try-catch.

43:34Jangan lupa.

43:36Oke.

43:38Sambil buka itu coba

43:40dokumentasi mdn yang location.

43:42Biar kita bisa... / Location sebentar.

43:44Ya.

43:46Yang location ini.

43:48Jadi tadi kan untuk

43:54URL. Nah kalau location

43:56ya ini. Represents

43:58the location of the object

44:00is linked to.

44:02Jadi intinya current sih.

44:04Current location.

44:06Dan ternyata bisa di-document.

44:08Bisa di-window location.

44:10Nah ini sebagian property-nya

44:12sama kayak URL.

44:14Cuma ada yang lain juga.

44:16Jadi kayak origin

44:18ref-nya sama kan.

44:20Oh. Bagus ya.

44:22Tapi nggak keliatan ini. Apa...

44:26Kuliatan.

44:28Keliatan ya.

44:30Warnanya agak... / Keliatan.

44:32Emang sengaja yang

44:34lagi nggak di-highlight.

44:36Di abu-abu muda.

44:38Kontrasnya juga. / Yes. Ini location

44:40anatomy. Ini mirip juga sama

44:42URL tadi ya.

44:44Iya kan soalnya

44:46location itu pointing ke URL

44:48yang saat ini lagi

44:50dipakai. Cuma method-nya ya nggak

44:52semua ada.

44:54Di sini ada beberapa

44:58instance properties. Ada

45:00ref. Tadi juga di

45:02URL juga ada ref.

45:04Ada protocol, ada host, ada hostname, sama ya.

45:06Ada port, pathname,

45:08search.

45:10Nah yang membedakan apa?

45:12Yang paling utama sih... / Kapan kita harus

45:14menggunakan location? Kapan menggunakan

45:16URL? API-nya?

45:18Nggak. Location itu

45:20dia interface, tapi dia nggak punya

45:22constructor. Jadi kalau tadi kan kita bisa

45:24sembarang tuh menu URL

45:26dalam purung, masukin argument,

45:28blablabla. Atau bahkan yang belum kita

45:30lihat detail ini kan URL search

45:32params. Kita belum lihat MDN-nya ya.

45:34Tapi itu juga bisa new URL

45:36search params dalam

45:38kurung tadi apa? Argumen.

45:40Nah, tapi kita nggak bisa

45:42new location. Karena itu cuma

45:44bisa window.location ya udah

45:46itu pointing ke halamannya ya.

45:48Sedang kita access.

45:50Ya, ya, ya. Ngerti, ngerti, ngerti.

45:52Ivan, ada yang mau ditambahin tadi?

45:54Iya, maksudnya kalau

45:56kayak untuk window

45:58location object yang ada di window itu

46:00itu langsung berhubungan

46:02sama si location

46:04ya si browser.

46:06API-nya untuk menguntung.

46:08Jadi kalau misalnya window.location.

46:10reload.

46:12Contohnya, itu kan... / Oke.

46:14Ada metodnya juga. Nah, itu kan metod itu

46:16cuma ada buat location. Nggak bisa

46:18kita new URL. Misalnya tadi kita bikin

46:20URL object, pakai constructor,

46:22terus new URL, reload

46:24yang nggak terjadi apa-apa. Karena

46:26nggak berurusan sama lokasi yang ada

46:28di browser. / Sepertinya location ini

46:30juga implement

46:32URL interface.

46:34Under the hood itu... / Dan location ini itu

46:36kelas baru.

46:38Bukan kelas, eh

46:40location ini kelas bukan interface.

46:42Oh, sorry.

46:44Is interface. / Ini

46:46location ini interface atau kelas?

46:48Interface. / Interface. URL baru kelas.

46:50Cuma nggak dekonstruktor, nggak dekonstruktor

46:52aja.

46:54Oke.

46:56Dia langsung, langsung manggil gini.

46:58Kayak static. / Bisa replace.

47:00Jadi kita bisa memanipulasi

47:02ya, ini routing lah. Sebenarnya ini

47:04client-side routing itu urusannya

47:06sama location. Bukan sama

47:08bukan secara langsung sama

47:10URL object.

47:12Kalau bfcache itu di mana ya?

47:14Apa?

47:16Sudah pernah pakai bfcache.

47:18Back-forward cache. / Oh,

47:20back-forward cache.

47:22Belum pernah pakai. / Kayaknya berhubung

47:24juga sama URL dan location.

47:26Cuma gua belum pernah, belum pernah coba.

47:28Itu kayaknya fitur browser. / Ada di application.

47:30Iya ada di application.

47:32Ada di application, kan?

47:34Ini bisa window dot

47:36location

47:38dot

47:40replace. / Coba penasaran back-forward

47:42cache. / Iya bisa replace

47:44pakai full.com atau

47:46replace

47:48web.dev lah.

47:50Ya, web.dev.

47:52Atau

47:54nggak pakai HTTPS bisa?

47:56Pakai, ya. Pakai kayaknya deh.

47:58Harus ya? / Nanti jadinya Pat.

48:00Ya coba aja.

48:02Tuh, dia nge-refresh langsung ya.

48:04Tapi page not found karena

48:06dia nambahin di / terakhir ya.

48:08Dianggap Pat.

48:10Sekarang coba pakai

48:12HTTPS.

48:14Tadah!

48:16Tadah!

48:18Iya, jadi kita kalau mau

48:20redirect secara

48:22programatically, nggak pakai

48:24URL, eh, sorry.

48:26Nggak pakai anchor.

48:28Kita bisa gunakan dot replace, bisa pakai reload

48:30juga kalau mau refresh. Teman-teman harusnya

48:32udah tahu ya window dot location dot reload ya.

48:34Apalagi kalau jaman dulu ya.

48:36Belum reload time, tiap 5 detik

48:38reload. / Maksudnya

48:40yang serangannya cross-side.

48:42Cross-side itu. / XSS.

48:44XSS. / Iya.

48:46Di comment box, ditambahin location dot

48:48replace, dan dialihkan

48:50ke spam side yang

48:52domainnya mirip. / UO sama ya.

48:54Kan begitu orang visit langsung

48:56ke replace.

48:58Pindah ke tempat lain.

49:00Bisa. / Bisa, bisa.

49:02Bisa, tapi ya itu berarti

49:04kita harus diserang dulu, sampai

49:06ada yang bisa, atau

49:08mungkin extension ya. Bahaya

49:10kalau ada extension yang ada

49:12vulnerability-nya, extension

49:14kan bisa langsung access dong kan.

49:16Atau apapun itu,

49:18maksudnya nggak cuma extension sih, apapun

49:20yang bisa ngejalanin client-side

49:22JavaScript di halaman kita.

49:24Nah, itu ya.

49:26Cuma kalau misalnya

49:28ada issue security

49:30yang bisa ngejalanin JavaScript

49:32di client-side T-browser

49:34kita, itu mah kayaknya udah

49:36emang udah either way

49:38udah tamat.

49:40Maksudnya bakal bermasalah banget.

49:42Cookies bisa dibaca.

49:44Jadi ya udah, kayaknya segala macem

49:46masalah. / Selesai.

49:48Udah pasti. / Udah selesai hidup dulu.

49:50Iya.

49:52Jadi kalau misalkan teman-teman

49:54nih, apa, mau

49:56coba-coba, iseng ah,

49:58coba-coba, baik itu location

50:00ataupun URL, bisa tuh

50:02projeknya bikin

50:04apa namanya, bikin

50:06routing library sederhana.

50:08Pakai API, apa

50:10URL web API ini.

50:12Buat latihan, buat latihan.

50:14Buat tugas akhir.

50:16Buat tugas akhir.

50:18Tugas akhir, routing

50:20library. Seru juga sih itu.

50:22Membuat sendiri routing library.

50:24Itu, apa,

50:26rumusan masalahnya apa itu?

50:28Ya, yang super

50:32cepat deh.

50:34Terus, kodanya

50:36cuma 9 kilobytes.

50:383 baris.

50:403 baris.

50:423 baris tapi mini fight sebetulnya.

50:449 kilobytes mini fight sih.

50:46Oke.

50:54Bah, siapa lagi kita?

50:56Terakhir. / Itu URL

50:58search apa?

51:00Oh ya tadi ya, URL search param ya.

51:02Iya bener-bener. Tadi kita belum coba.

51:04URLs.

51:06Jadi kan, sebenarnya URL API

51:08ada 2 tadi kan terdiri dari

51:10URL sama

51:12URL search params.

51:14Domain yang ini, domain

51:16apa? Puni code.

51:18Puni code domain. / Oh ya.

51:22Apa itu puni code? / Karakter domain.

51:24Nanti ya, abis ini.

51:26Nanti ya, abis ini ya.

51:28Oke, ini search param tadi

51:30cara pakainya hampir sama. / Cepat aja.

51:32Ini untuk query parameter.

51:34Jadi kalau apa? Singkatnya

51:36ini PLDR-nya semua.

51:38Kalau kita pengen memanipulasi

51:40lokasi URL di browser

51:42saat ini, pakainya tadi kan

51:44location interface.

51:46Kalau mau kerja

51:48dengan URL, tadi URL

51:50interface. Kalau khusus

51:52query parameter, pakai

51:54URL search params.

51:56Nah, jenis objek dengan

51:58interface URL search params ini

52:00juga sebetulnya bagian dari

52:02objek URL tadi.

52:04Apa? Property search params ya.

52:06Ini.

52:10Hasilnya adalah 14.

52:14Ini biasanya

52:16itu isinya

52:18objek key value pair. / Isinya apa?

52:20Oh, key value.

52:22Oh, yang tadi, tanda tanya tadi ya?

52:24Iya. / Iya.

52:26Setelah tanda tanya. / Setelah tanda

52:28tanya. Jadi kalau misalkan ini

52:30tadi kita pakai di sini ya.

52:32MSG gitu. Pakai tanda tanya enggak?

52:34Enggak ya. / Enggak usah. / Objek.

52:36Kayaknya biasanya objek deh. Lupa-lupa

52:38ingat. Coba-coba.

52:40Test. Gitu.

52:42Size 1.

52:44Coba

52:46sekarang itu dikopas aja, new URL

52:48search params, blablabla.

52:50.toostring.

52:56Jadi kalau kita mau

52:58generate gitu ya.

53:00Mau generate

53:02search parameter yang

53:04dalam jumlah banyak, misalkan

53:06status. / Status, sukses.

53:08Oke.

53:10Terus apa lagi?

53:12Active

53:14dengan

53:161.

53:18Nah, enak kan?

53:20Enak ya.

53:22Jadi nggak perlu, kita cukup bikin

53:24objek aja.

53:26Objeknya di append-apend-apend ditambah-tambahin.

53:28Nanti habis itu tinggal kita

53:30masukkan ke

53:32constructor ini.

53:34Kita manggil kita ini

53:36instantiate ya.

53:38Trus jadi string.

53:40Habis itu udah bisa ditempelkan

53:42ke URL yang

53:44tadi kita pakai, new URL tadi.

53:46Bisa ditambahkan ini.

53:48Kalau kita belum tahu

53:50caranya pakai URL search

53:52parameter ini lumayan pusing kan,

53:54objeknya dijadikan array,

53:56atau diiterate,

53:58diiterate dibikin, terus

54:00buat

54:02satu persatu key value-nya

54:04dimasukin key,

54:06pakai string literal, key sama dengan

54:08value, terus

54:10di-join lagi pakai tanda

54:12dan, pakai tanda

54:14ampersan, capek.

54:16Kalau ini satu baris selar.

54:20Apa nih, test value-nya

54:22ada special character

54:24di URL,

54:26special character. Maksudnya apa?

54:28Test value-nya ada special character

54:30di URL search parameter.

54:32Special character itu apa?

54:36Oh, pakai

54:38test

54:40dulu.

54:42Bukan, special character mungkin

54:44itu, apa namanya?

54:46Ya, contohnya

54:48add dollar

54:50hash.

54:52Ya, bisa.

54:54Nah, ini jadi

54:56di-encode ya?

54:58Oh iya, special character

55:00gini ya.

55:02Tinggal pakai

55:04di-code qri component ya,

55:06kalau kita mau nge-access.

55:08Minus, plus, underscore, slash,

55:10backslash, bintang.

55:12Ini jadi apa?

55:14Tanda tanya jadi apa?

55:16Tanda tanya.

55:18Jadi

55:20di-encode semuanya ya?

55:22Kalau minus enggak ya, berarti ya?

55:26Underscore juga enggak?

55:28Enggak.

55:30Cara nge-decode-nya gimana?

55:32Kalau ini cara nge-decode-nya?

55:34Decode qri component.

55:36Yes.

55:38Decode qri component.

55:40Ini new lagi?

55:42Pakai new?

55:44Langsung aja?

55:46Langsung.

55:48Oh iya, string apapun argumennya.

55:50Yes.

55:52Ini ya.

55:54Hmm.

55:56Seru, seru, seru.

56:00Oke.

56:04Eka yang cewek, apa sih?

56:06Iya, bukan Ivan yang cewek.

56:10Iya, bukan Ivan.

56:14Oke. Tadi mau bahas apa?

56:16Domain apa tadi?

56:18Domain name.

56:20Domain name, yang mana?

56:22Jadi kan, kan kita udah liat nih,

56:24kalau path sama query string.

56:26Path sama query string kan

56:30tadi karakternya ya boleh apa aja,

56:32suka-suka, tapi bakal di-convert

56:34encode jadi

56:36uri component, jadi karakter

56:38khusus tuh, kayak tadi tanda tanya

56:40jadi %3f atau semacamnya.

56:42Tapi khusus domain name

56:44ada restriction-nya.

56:46Punya restriction-nya.

56:48Puni code, yes.

56:50Jadi bisa kalau...

56:52Bisa, tapi kayak di-convert to

56:54jadi encode ya?

56:56Bukan karakter aneh-aneh,

56:58yang benar adalah karakter yang

57:00di luar ASCII.

57:02Contohnya...

57:04Contohnya ya

57:06Chinese character, Japanese character,

57:08atau...

57:10Tahu kan ya, kalau German keyboard,

57:12atau Spanish keyboard,

57:14itu kan memang ada...

57:16Ada titik-titik di tempat aneh.

57:18Ya, namanya puni code.

57:20Puni code.

57:22Jadi bisa...

57:24Bisa dirubah dari...

57:28Itu.

57:30Dari browser ya? Berarti browser yang implement kan?

57:32XN blablabla.

57:34Kalau ada penanda ASCII,

57:36XN dash-dash,

57:38saya suka pakai...

57:40Puni code encoder.

57:42Puni coder.

57:44Itu contohnya bisa pakai.

57:46Oh, ada itu-nya.

57:48Ada tools-nya.

57:50Puni coder.com.

57:52Itu tadi yang dari emoji,

57:54yang dari Wikipedia.

57:56Coba.

57:58Itu ada yang...

58:00Puni code, for example, XN dash-dash EE.

58:02Yang ini di-copy ya?

58:04Ya, ya copy.

58:06A-A.

58:08Terus, .com contohnya.

58:10Kan misalnya mungkin beli itu .com.

58:12.ws?

58:14Kebalik, kebalik, kebalik dari sebelah.

58:16Ya, .ws.

58:18Oh, convert to text ya?

58:20Nanti, I love WS.

58:22Oh, jadi bisa di...

58:24Domainnya bisa dibeli beneran.

58:26Iya, iya, iya.

58:28Tapi langsung di-convert kan? Gak kelihatan kan?

58:30Oh, iya.

58:32Jadi, maksudnya user kita,

58:34orang yang mau akses,

58:36bisa nge-tick pakai karakter non-asci.

58:38Misalnya pakai emoji tadi.

58:40Begitu di-enter,

58:42sama domain tuh kayak di-convert ya.

58:44Berarti jadi XN.

58:46Sama yes and no.

58:48Karena gini, contohnya.

58:50Di Cloudflare, ataupun di tools yang mana pun,

58:52kadang mereka gak terima puni code.

58:54Atau PHP kita,

58:56error kalau terimanya

58:58non-asci karakter untuk URL.

59:00Jadi kita,

59:02instead of pakai

59:04puni code di address bar,

59:06kita pakai XN

59:08des des des des

59:10bla bla bla itu yang sudah di-encode itu.

59:12Oh, berarti kita harus

59:14handle sendiri ya?

59:16Iya, kita handle sendiri.

59:18Contohnya di...

59:20Gua belum pernah coba, contohnya

59:22di WordPress ini, contohnya.

59:24Sorry.

59:28Lebih tepatnya,

59:30di RPC atau di settingnya

59:32di Nginx,

59:34virtual host-nya.

59:36Mau pakai yang mana? Yang sudah di-encode apa non-encode?

59:38Gua gak tahu.

59:42Ntar coba sendiri deh teman-teman, kasih tahu.

59:44Virtual host-nya pakai yang

59:46encoded,

59:48atau puni code?

59:50Untuk virtual host-nya.

59:52Jadi, kalau mau buka

59:54situsnya, hasilnya apa?

59:56Kasih tahu ya.

59:58Wah, lucu sekali ya.

1:00:00Nah, berarti ini layer-nya banyak ya.

1:00:02Di tingkat registrar,

1:00:04tempat kita mendaftarkan domain,

1:00:06berarti belum tentu boleh tuh. Tadi di Wikipedia pun

1:00:08ada tulisannya kan, apa?

1:00:10Cuma bisa di top-level domain, bla bla bla,

1:00:12di cloudflare misalnya gak...

1:00:14di layanannya sendiri,

1:00:16cloudflare misalnya belum tentu

1:00:18support. Nah, terus

1:00:20kita harus handle

1:00:22busing juga ya.

1:00:24Ya, tinggal dicari.

1:00:26Bisa dicari,

1:00:28kalau mau ke

1:00:30domain provider,

1:00:32sesaja yang bisa.

1:00:34Karena gini, tergantung

1:00:36specialized juga kan.

1:00:38Special, apa namanya,

1:00:40karakternya ada di bahasa apa?

1:00:42Kalau misalnya kita

1:00:44.us.

1:00:46Ini itu international

1:00:48domain names, IDNs.

1:00:50Oh iya, kira-kira ini Indonesia ya.

1:00:52Ya, itu TLD yang support,

1:00:54itu cuma ada

1:00:56availability,

1:00:58untuk emoji domain.

1:01:00Untuk emoji domain.

1:01:02Ada yang spanish karakter,

1:01:06dia, misalnya

1:01:08hanya di domain yang spain,

1:01:10contohnya.

1:01:12Atau yang russian, russian itu karakter apa?

1:01:14Devorak ya? Eh, bukan Devorak.

1:01:16Russian karakter itu apa istilahnya?

1:01:18Ya.

1:01:20Russian karakter itu?

1:01:22Trilic.

1:01:24Trilic doang.

1:01:26Trilic karakter hanya bisa di support

1:01:28di .ru, contohnya.

1:01:30Kita nggak bisa daftarin di .us.

1:01:32Berarti kan masing-masing

1:01:34TLD

1:01:36registrar kan

1:01:38itu terserah mereka kan.

1:01:40Misalnya kalau

1:01:42yang Jerman, ya otomatis dia kan

1:01:44customer base nya dari Jerman

1:01:46dan mungkin pakai karakter bahasa mereka,

1:01:48mereka support.

1:01:50Kalau misalnya malas emoji nggak support,

1:01:52suka-suka mereka berarti ya.

1:01:54Mereka yang mutusin untuk men-support

1:01:56kombinasi karakter.

1:01:58Berarti ketauan kok kalau mau beli bisa atau nggak.

1:02:00Pasti direject.

1:02:04Nah itu ada warning dari icon.

1:02:06Kenapa?

1:02:10Kalau domain.id, bisa

1:02:12ini nggak bahasa se-kerta?

1:02:14Gak tahu, coba aja.

1:02:18Gak seisen gitu lah.

1:02:20Buat apa? Malah lebih susah.

1:02:22Orang kita mau buat mudah kan,

1:02:24buat emoji, ini malah bahasa

1:02:26se-kerta.

1:02:28Masalahnya nggak ada keyboard set

1:02:30yang support se-kerta.

1:02:32Kalau Jerman, Spanis mau ada.

1:02:34Iya, kalau misalnya

1:02:36keyboardnya

1:02:38ini

1:02:40Chinese, masa

1:02:42kalau dia mau type

1:02:44ASCII, dia harus ganti keyboard dulu kan.

1:02:46Lebih susah kan sebenarnya.

1:02:48Jadi belum direkomendasikan

1:02:50secara umum ya?

1:02:52Bukan, tergantung target market.

1:02:54Kan kalau misalnya

1:02:58di China,

1:03:00mereka semua keyboardnya itu

1:03:02by default, pingin.

1:03:04Ya kan?

1:03:06Kalau mereka mau

1:03:08kunjungi google.com,

1:03:10kan mereka harus ganti keyboard ceritanya.

1:03:16Oh, ini bisa buat ini nih,

1:03:18pemendek URL, menuju

1:03:20kesini, pasti udah ada yang

1:03:22beli ini.

1:03:24Wuh, .fm.

1:03:26Cuman ada .2

1:03:28nya, tapi udah

1:03:30tidak berlaku.

1:03:32Jadi mainan, mainannya di domain nih.

1:03:36.2/

1:03:42ngobrolin web.

1:03:44Gitu kan, kan keren.

1:03:46Tapi sayangnya udah gak ada.

1:03:50Nah, ini

1:03:54ada yang out nih, ngomong-ngomong soal

1:03:56keyboard, pernah liat ke Eka pakai speed keyboard?

1:03:58Wuih.

1:04:00Oh iya, pakai speed keyboard?

1:04:02Yoi, cuma lagi gak di bawah sekarang.

1:04:04Custom, custom.

1:04:06Oh, custom.

1:04:08Jadi satu

1:04:10keyboard, satu calculator, bukan?

1:04:12Yaa.

1:04:14Biar dunamis.

1:04:16Biar sakit punggung, penyakit developor.

1:04:18Kira kasir apa pakai calculator

1:04:20doang, yang nampet

1:04:22doang gitu.

1:04:24Tapi dia cepet banget tuh, ngetiknya.

1:04:26Ada, ada yang pakekan gamer,

1:04:28pakenya itu. Cuma

1:04:30buat arrow doang.

1:04:32Oh, berarti kalau,

1:04:34kalau split keyboard, berarti

1:04:36ini ya, sangat disiplin

1:04:38ngetik sepuluh jari ya.

1:04:40Karena gak bisa lari-lari kan, susah ya.

1:04:42Spasinya dimana? Kiri apa kanan Eka?

1:04:46Di kaki.

1:04:48Di kaki.

1:04:50Oh di kaki split.

1:04:52Kayak gas gitu.

1:04:54Gas mobil.

1:04:56Enak kan?

1:04:58Ada tuh, yang pakai gitu juga

1:05:00ada. Jadi, control misalkan.

1:05:02Kontrol pakai kaki

1:05:04kiri. Jadi dia gak perlu pencet

1:05:06kontrol, kontrol C ya udah, kaki kiri dan

1:05:08huruf C.

1:05:10Ada lagi, itu namanya pakai

1:05:12dia namanya password keyboard.

1:05:14Jadi

1:05:16karakternya itu sudah kayak disusun

1:05:18password-nya kita, panjang gitu.

1:05:20Jadi kalau mau type password

1:05:22tinggal tik-tik-tik-tik-tik-tik-tik aja gitu.

1:05:24Berarti semua orang yang lihat keyboard ini

1:05:26tahu passwordnya dia dong?

1:05:28Ya kan keyboardnya di rumah.

1:05:30Jangan usah dilihat.

1:05:32Gak ada keycapnya ya.

1:05:34Keycapnya polosnya.

1:05:36Bisa di program lah.

1:05:38Jadi kalau passwordnya

1:05:40berubah, masa ganti keyboard.

1:05:42Beli lagi.

1:05:44Jadi reset dari keyboardnya aja lah.

1:05:48Ada-ada aja.

1:05:52Baiklah, kalau begitu kita sudah

1:05:54ngelantar kemana-mana gara-gara Andri.

1:05:56Jadi gak bahas url coba.

1:06:00Bahasnya emoji.

1:06:02Tapi

1:06:04lumayan ya, seru ya.

1:06:06Cukup ya.

1:06:08Jadi kalau temen-temen

1:06:10besok-besok punya

1:06:12project yang

1:06:14butuh manipulasi url atau

1:06:16perlu mengambil beberapa hal dari

1:06:18query parameter, silahkan gunakan web API-nya.

1:06:20Gak usah pakai

1:06:22split-split string lagi ya.

1:06:24Karena rentan usaha handan,

1:06:28panjang. Timestampnya

1:06:30jadi aneh tapi seru kata Audi.

1:06:32Gak apa-apa.

1:06:34Kita suka yang aneh.

1:06:36Kayaknya loncat-loncat kali pembahasannya.

1:06:40Jadi timestampnya aneh.

1:06:42Bisa jadi.

1:06:44Oke, ada lagi-ada lagi.

1:06:46Kalau gak ada

1:06:48temen-temen yang punya

1:06:50topik, boleh

1:06:52ke bit.ly/ngobrolinweb

1:06:54Kita sudah lama

1:06:56tidak lihat, mari kita lihat.

1:06:58bit.ly/ngobrolinweb

1:07:02Panjang juga ya.

1:07:04Pakai tanda itu tadi.

1:07:08Tanda emoji.

1:07:10Bahas CSS untuk

1:07:14foldable device.

1:07:16Ada yang sudah pakai foldable device belum?

1:07:18Handphone yang bisa

1:07:20di...

1:07:22Mantap.

1:07:24Ada yang sudah disurut develop

1:07:26foldable device belum?

1:07:30Foldable device.

1:07:32Ini kan foldable device, kan gak bilang

1:07:34foldable handphone.

1:07:36Tapi gak bisa

1:07:38CSS juga disitu.

1:07:40Bisa buka web.

1:07:42Saya pakai

1:07:46foldable handphone, tapi

1:07:48masih feature phone.

1:07:50Yang dulu, yang jaman dulu bisa bukanya

1:07:52pakai satu tangan loh. Keren.

1:07:54Sony Walkman.

1:07:56Lu punya Sony Walkman.

1:07:58HP, mereknya Sony Walkman.

1:08:00HP, oh iya, iya.

1:08:02Dulu ada, dulu ada.

1:08:04Dulu pakai Java, jadi belum

1:08:06gak ada browser-nya sih.

1:08:08Tapi udah berwarna.

1:08:10Tapi menarik sih kita bahas

1:08:12foldable device.

1:08:14Kita tandai dulu

1:08:16foldable device.

1:08:18Gemstack, wah ini ngomongin framework-nya.

1:08:20Gemstack-nya kita pernah gak sih?

1:08:22Belum, gemstack belum.

1:08:24Sempet bahas sedikit waktu kita

1:08:26mencari metode rendering

1:08:28sampai kita bahas, tapi

1:08:30tidak mendalam.

1:08:32Kalau technology edge, sudah.

1:08:34Web assembly,

1:08:36coming soon.

1:08:38Stackoverflow, 2022.

1:08:40Ini 2023 kita sekarang.

1:08:42Kayaknya udah ada juga, kan.

1:08:44Data base.

1:08:46Micro front-end juga

1:08:48coming soon.

1:08:50Coming so soon.

1:08:52Semoga coming soon.

1:08:54Semoga coming soon.

1:08:56Itu lucu tuh, HTML6,

1:08:58CSS4.

1:09:00Oh, mungkin kita bahasin

1:09:02yang di-propos-propos ya.

1:09:04Yang ada proposal-nya, tapi belum masuk

1:09:06ke ini. Mungkin menarik ya.

1:09:08Bisa menarik ini.

1:09:10Ya, tapi kalau proposal kan misalnya targetnya

1:09:122-3 tahun ke depan. Gimana?

1:09:1410 atau 20 tahun ke depan.

1:09:16Kayaknya kita semua udah saling bisa

1:09:18beca pikiran atau gimana, udah gak perlu.

1:09:20Gak perlu HTML

1:09:22atau JavaScript lagi.

1:09:24Atau semua udah AI. Kita yang kayak di film apa

1:09:26tuh yang cuma diem doang, gitu.

1:09:28Otak kita pun

1:09:30mikirnya udah di-outsource ke AI

1:09:32kali misalnya.

1:09:34Seru, seru, seru.

1:09:36Oke, kalau gitu.

1:09:38Oke, kalau gitu

1:09:40sudahan dulu malam ini.

1:09:42Kita sudah kehabisan topik.

1:09:44Masihnya topik pembahasan tentang URL.

1:09:46Ya, jadi

1:09:48tunggu aja episode berikutnya.

1:09:50Kita akan bahas tentang apa.

1:09:52Ya, ditunggu juga.

1:09:54Mungkin kita akan bahas

1:09:56salah satu topik yang

1:09:58sudah teman-teman sarankan.

1:10:00Kalau masih ada

1:10:02yang mau disarankan, silahkan ke

1:10:04bit.ly/moblinweb

1:10:06Sekian dari kita untuk malam ini.

1:10:08Selamat malam, selamat istirahat. Sampai jumpa

1:10:10minggu depan. Dadah.

1:10:12Goodnight, bye.