URL ម្តងមួយផ្នែក

មាតិកា

1. URL គឺជាអាសយដ្ឋានដែលមានផ្នែកច្រើន
2. Scheme
3. Host
4. Port
5. Path
6. Query String
7. Fragment
8. ដកឃ្លា និងតួអក្សរពិសេស
9. Absolute Link និង Relative Link
10. សាកល្បងដោយខ្លួនឯង

1. URL គឺជាអាសយដ្ឋានដែលមានផ្នែកច្រើន

URL (Uniform Resource Locator) ប្រាប់ client ថា resource មួយស្ថិតនៅ ទីណា និង របៀប ទៅយកវា។ វាមើលទៅដូចជា string វែងមួយ ប៉ុន្តែតាមពិតវាជាផ្នែកជាច្រើនដែលភ្ជាប់គ្នាដោយសញ្ញាវណ្ណយុត្តិ៖

https://shop.example.com:443/products/shoes?color=red&size=42#reviews
└─┬─┘   └──────┬───────┘ └┬┘└──────┬──────┘ └───────┬───────┘ └──┬──┘
scheme       host       port     path             query      fragment

ផ្នែកនីមួយៗឆ្លើយសំណួរខុសៗគ្នា៖

URL ភាគច្រើនដែលអ្នកឃើញ មិនមានផ្នែកខ្លះក្នុងចំណោមនេះទេ។ តោះយើងមើលពួកវាម្តងមួយៗ។

2. Scheme

Scheme មកមុនគេ ហើយបន្តដោយ ://។ វាប្រាប់ client ថាត្រូវប្រើ protocol មួយណា — សំណុំច្បាប់មួយណា។

• https — HTTP ដែលបានអ៊ិនគ្រីប។ ស្ទើរតែគ្រប់ website សព្វថ្ងៃនេះ។
• http — HTTP ដែល មិន បានអ៊ិនគ្រីប។ មិនអីទេសម្រាប់ localhost ពេលអ្នកកំពុងអភិវឌ្ឍ ប៉ុន្តែជាគំនិតមិនល្អនៅកន្លែងផ្សេងទៀត (ជំពូកទី 4 ពន្យល់ពីមូលហេតុ)។

អ្នកក៏នឹងឃើញ scheme ផ្សេងទៀតដែរ៖ mailto: បើកកម្មវិធី email របស់អ្នក (ទំព័រទំនាក់ទំនងរបស់គេហទំព័រនេះប្រើវា) tel: ហៅលេខទូរស័ព្ទ file:// បើក file នៅលើកុំព្យូទ័រផ្ទាល់ខ្លួនរបស់អ្នក ហើយ ws:///wss:// គឺសម្រាប់ WebSocket។

នៅពេលអ្នកវាយ example.com ដោយគ្មាន scheme នោះ browser នឹងបំពេញវាឲ្យអ្នក។ Browser ទំនើបៗសាកល្បង https:// មុនគេ។

3. Host

Host ប្រាប់ថាត្រូវទាក់ទង server មួយណា។ ជាធម្មតាវាគឺជា domain name ដែលត្រូវអានពី ស្តាំទៅឆ្វេង ពីទូទៅបំផុត ទៅជាក់លាក់បំផុត៖

       shop . example . com
        │       │       └── top-level domain (TLD)
        │       └────────── the domain someone registered
        └────────────────── a subdomain they created

• Top-level domain (TLD)៖ .com, .org, .dev ឬលេខកូដប្រទេស ដូចជា .kh សម្រាប់កម្ពុជា។
• Domain៖ example.com — ឈ្មោះដែលនរណាម្នាក់ជួលពី registrar ជាធម្មតាប្រចាំឆ្នាំ។
• Subdomain៖ shop, www, api, docs — អ្វីក៏ដោយដែលនៅខាងឆ្វេង។ ម្ចាស់ example.com អាចបង្កើតបានច្រើនតាមចិត្ត ដោយឥតគិតថ្លៃ។

អាសយដ្ឋាន GitHub Pages របស់អ្នក dara-sok.github.io គឺជា subdomain មួយ៖ GitHub ជាម្ចាស់ github.io ហើយផ្តល់ subdomain ផ្ទាល់ខ្លួនមួយដល់អ្នកប្រើប្រាស់ម្នាក់ៗ។

Host ក៏អាចជា IP address ដោយផ្ទាល់ផងដែរ ដូចជា http://192.168.1.1 សម្រាប់ router នៅផ្ទះជាច្រើន ឬឈ្មោះពិសេស localhost ដែលតែងតែមានន័យថា «កុំព្យូទ័រនេះ»។ ជំពូកទី 3 បង្ហាញពីរបៀបដែលឈ្មោះប្តូរទៅជាលេខ។

Domain name មិនប្រកាន់អក្សរធំតូចទេ៖ EXAMPLE.com និង example.com គឺដូចគ្នា។

4. Port

Server computer មួយអាចដំណើរការ server program ជាច្រើនក្នុងពេលតែមួយ — website មួយ database មួយ SSH server មួយ។ Port គឺជាលេខពី 0 ដល់ 65535 ដែលប្រាប់ថាអ្នកចង់បាន កម្មវិធីមួយណា នៅលើកុំព្យូទ័រនោះ។ សូមគិតថា IP address ជាអគារមួយ ហើយ port ជាលេខបន្ទប់។

អ្នកស្ទើរតែមិនដែលឃើញ port នៅក្នុង URL ទេ ព្រោះ scheme នីមួយៗមាន លំនាំដើម មួយ៖

ដូច្នេះ https://example.com តាមពិតមានន័យថា https://example.com:443។ អ្នកសរសេរ port តែនៅពេលវា មិនមែន ជាលំនាំដើមប៉ុណ្ណោះ — នោះហើយជាមូលហេតុដែលអ្នកបានឃើញ URL ដូចជា http://localhost:3000 នៅក្នុងមេរៀន NestJS និង Docker។ Development server ប្រើ port ដូចជា 3000, 5173 ឬ 8080 ដើម្បីកុំឲ្យពួកវាជាន់គ្នា។

5. Path

Path ចាប់ផ្តើមនៅ / ដំបូងបន្ទាប់ពី host ហើយប្រាប់ថាអ្នកចង់បាន resource មួយណា នៅលើ server នោះ៖

https://dara-sok.github.io/my-site/about.html
                         └────────┬────────┘
                                path

នៅលើ static site សាមញ្ញមួយដូចរបស់អ្នក path ត្រូវគ្នាផ្ទាល់ទៅនឹង folder និង file ដូចគ្នាបេះបិទនឹង file path ពី មូលដ្ឋានគ្រឹះ Command Line៖ /my-site/about.html គឺជា file about.html នៅក្នុង folder my-site នៅលើ server របស់ GitHub។

នៅពេល path បញ្ចប់ដោយ folder មួយ — /my-site/ — server រក file លំនាំដើមមួយ ដែលស្ទើរតែតែងតែជា index.html។ នោះហើយជាមូលហេតុដែលទំព័រដើមរបស់អ្នកមានឈ្មោះនោះ។

នៅលើ web app មួយ path មិនចាំបាច់ត្រូវគ្នានឹង file ណាមួយទេ។ NestJS server មួយអាចឆ្លើយតប /users/42 ដោយរកមើលអ្នកប្រើប្រាស់លេខ 42 នៅក្នុង database។ Path គ្រាន់តែជា string មួយ ហើយវាអាស្រ័យលើ server ថាវាមានន័យយ៉ាងណា។

ខុសពី host, path ជាធម្មតាប្រកាន់អក្សរធំតូច៖ /About.html និង /about.html អាចជា file ពីរខុសគ្នា។

6. Query String

បន្ទាប់ពី ? គឺជា query string៖ option បន្ថែម ជាគូ key=value ដែលបំបែកដោយ &។

https://www.google.com/search?q=phnom+penh&hl=km
                              └─────┬────────┘
                         q = "phnom penh", hl = "km"

Query ត្រូវបានប្រើសម្រាប់អ្វីៗដូចជា ពាក្យស្វែងរក filter ការតម្រៀប និងលេខទំព័រ៖ ?page=2, ?sort=price, ?color=red&size=42។ Server (ឬ JavaScript នៅក្នុងទំព័រ) អានពួកវា ហើយផ្លាស់ប្តូរអ្វីដែលវាផ្ញើត្រឡប់មកវិញ។

ការព្រមានពីរ៖

• Query string អាចមើលឃើញ៖ នៅក្នុង address bar, នៅក្នុង history របស់ browser និងនៅក្នុង log របស់ server។ កុំដាក់ password ឬ secret នៅក្នុង URL ជាដាច់ខាត។
• លំដាប់ជាធម្មតាមិនសំខាន់សម្រាប់ server ទេ ប៉ុន្តែសម្រាប់ cache (ជំពូកទី 9) ?a=1&b=2 និង ?b=2&a=1 អាចមើលទៅដូចជា URL ពីរខុសគ្នា។

7. Fragment

Fragment គឺជាអ្វីៗទាំងអស់បន្ទាប់ពី #។ វាចង្អុលទៅ ផ្នែកមួយនៃទំព័រ មិនមែនទំព័រផ្សេងទេ៖

https://example.com/guide#installation

Browser រំកិលទៅកាន់ element ដែលមាន id="installation"។ មាតិកានៅខាងលើនៃជំពូកនេះដំណើរការតាមរបៀបនេះពិតប្រាកដ — ចុចលើមួយ ហើយមើល address bar។

ចំណុចលម្អិតសំខាន់៖ fragment មិនដែលត្រូវបានផ្ញើទៅ server ទេ។ Browser រក្សាវាទុកសម្រាប់ខ្លួនឯង។ Server ទទួលបាន request សម្រាប់ /guide ហើយគ្មានអ្វីលើសពីនេះទេ ការរំកិលកើតឡើងទាំងស្រុងនៅក្នុង browser។

8. ដកឃ្លា និងតួអក្សរពិសេស

URL អាចមានតែសំណុំតួអក្សរមានកំណត់ប៉ុណ្ណោះ។ ដកឃ្លា អក្សរខ្មែរ និងនិមិត្តសញ្ញាដូចជា & ឬ ? (នៅពេលវាជាទិន្នន័យ មិនមែនជាសញ្ញាវណ្ណយុត្តិ) ត្រូវតែ percent-encode៖ ជំនួសដោយ % បន្តដោយតម្លៃ byte របស់តួអក្សរនោះជា hex — byte និងលេខ hex ដូចគ្នាពីជំពូក Bits និង Bytes នៃ របៀបដែលកុំព្យូទ័រដំណើរការ។

មួយចុងក្រោយនោះមានបី byte ព្រោះអក្សរខ្មែរប្រើបី byte នៅក្នុង UTF-8។ Browser ជាធម្មតា បង្ហាញ កំណែដែលអានបានដល់អ្នកនៅក្នុង address bar ប៉ុន្តែផ្ញើកំណែដែល encode រួច។ ចម្លង URL ដែលមានដកឃ្លា ឬអត្ថបទខ្មែរនៅក្នុងវា ហើយបិទភ្ជាប់វាទៅក្នុង text editor ដើម្បីមើលរូបរាងពិតរបស់វា។

9. Absolute Link និង Relative Link

នៅក្នុង HTML, link មួយអាចសរសេរបានពីររបៀប។

Absolute URL រួមបញ្ចូលអ្វីៗទាំងអស់៖

<a href="https://dara-sok.github.io/my-site/about.html">About</a>

Relative URL ទុកផ្នែកខ្លះចោល ហើយ browser បំពេញវាពីទំព័រដែលអ្នកកំពុងនៅ។ ឧបមាថាអ្នកកំពុងនៅលើ https://dara-sok.github.io/my-site/index.html៖

. និង .. ដំណើរការដូចគ្នាបេះបិទនឹង cd នៅក្នុង terminal។ មួយដែលធ្វើឲ្យមនុស្សច្រឡំ គឺ / នៅខាងមុខ៖ នៅលើ GitHub Pages, website របស់អ្នកស្ថិតនៅក្នុង /my-site/ ដូច្នេះ /about.html រំលងវាចោល ហើយផ្តល់ 404 ដល់អ្នក។ នោះហើយជាមូលហេតុដែលស៊េរី Git បានប្រើ relative link សាមញ្ញៗដូចជា about.html។

10. សាកល្បងដោយខ្លួនឯង

1. ដាក់ស្លាកផ្នែកនីមួយៗ។ សរសេរ scheme, host, port, path, query និង fragment សម្រាប់ URL នីមួយៗខាងក្រោម។ ផ្នែកខ្លះបាត់ — ប្រាប់ថាផ្នែកណា និងតម្លៃលំនាំដើមនឹងជាអ្វី។
   • https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=42
   • http://localhost:3000/api/users/7
   • https://dara-sok.github.io/my-site/#contact
2. មើល fragment នៅផ្ទះ។ បើក website របស់អ្នក (ឬទំព័រណាមួយដែលមាន heading) ដោយបើក DevTools → Network ផង។ ចុចលើ link នៅក្នុងមាតិកា ឬបន្ថែម #something ទៅអាសយដ្ឋាន។ គ្មាន request ថ្មីណាមួយលេចឡើងទេ — browser គ្រាន់តែរំកិលប៉ុណ្ណោះ។
3. មើល encoding។ ស្វែងរកអ្វីមួយជាភាសាខ្មែរនៅលើ Google។ ចម្លង address bar ហើយបិទភ្ជាប់វាទៅក្នុង text editor។ រក byte %E1%9E…។
4. ផ្លាស់ប្តូរ query។ នៅលើ website ទិញទំនិញ ឬស្វែងរក សូមផ្លាស់ប្តូរតម្លៃមួយនៅក្នុង query string ដោយដៃ — ឧទាហរណ៍ page=1 ទៅ page=2 — ហើយចុច Enter។ អ្នកទើបតែបានធ្វើអ្វីដែលប៊ូតុង «next» របស់ website នោះធ្វើ។

បន្ទាប់ យើងនឹងតាមដានផ្នែក host នៃ URL ហើយស្វែងយល់ពីរបៀបដែល browser បំប្លែងឈ្មោះមួយ ទៅជាកុំព្យូទ័រពិតប្រាកដមួយដើម្បីនិយាយជាមួយ។