តើ Web ជាអ្វី?

មាតិកា

  1. អ៊ីនធឺណិត និង Web គឺជារឿងពីរខុសគ្នា
  2. Client និង Server
  3. Browser គ្រាន់តែជា Client មួយ
  4. Server គ្រាន់តែជាកម្មវិធីមួយ
  5. អ្វីកើតឡើងនៅពេលអ្នកបើកទំព័រមួយ
  6. ពាក្យដែលអ្នកនឹងឮ
  7. ឧបករណ៍ពីររបស់អ្នក
  8. សាកល្បងដោយខ្លួនឯង

1. អ៊ីនធឺណិត និង Web គឺជារឿងពីរខុសគ្នា

មនុស្សប្រើពាក្យ «អ៊ីនធឺណិត» និង «web» ហាក់ដូចជាវាមានន័យដូចគ្នា។ តាមពិតវាមិនដូចគ្នាទេ ហើយភាពខុសគ្នានេះសំខាន់ នៅពេលអ្នកចាប់ផ្តើមបង្កើតអ្វីៗ។

  • អ៊ីនធឺណិត គឺជា បណ្តាញ៖ កុំព្យូទ័រ ទូរស័ព្ទ និង server រាប់ពាន់លាន ដែលភ្ជាប់គ្នាដោយខ្សែ Wi-Fi ប៉មទូរស័ព្ទ និងខ្សែកាបក្រោមសមុទ្រ ហើយអាចផ្ញើទិន្នន័យទៅគ្នាទៅវិញទៅមកបាន។ វាគឺជាផ្លូវថ្នល់។
  • Web គឺជា សេវាកម្ម មួយដែលដំណើរការនៅលើអ៊ីនធឺណិត៖ ទំព័រ និង file ដែលភ្ជាប់ទៅគ្នា ហើយត្រូវបានទាញយកដោយប្រើភាសាមួយហៅថា HTTP។ វាគឺជាចរាចរណ៍មួយប្រភេទនៅលើផ្លូវថ្នល់ទាំងនោះ។

មានរឿងជាច្រើនទៀតដែលប្រើអ៊ីនធឺណិត ដោយមិនមែនជា web។ Email ប្រើ protocol ផ្ទាល់ខ្លួនរបស់វា។ ហ្គេមអនឡាញ ការហៅវីដេអូ និងការ login ចូល server ដោយប្រើ ssh ក៏ផ្ញើទិន្នន័យឆ្លងកាត់អ៊ីនធឺណិតដែរ ប៉ុន្តែវាមិនប្រើ HTTP ទេ។

Web ត្រូវបានបង្កើតឡើងនៅឆ្នាំ 1989–1991 ដោយ Tim Berners-Lee ប្រហែលម្ភៃឆ្នាំក្រោយពេលអ៊ីនធឺណិតចាប់ផ្តើម។ គំនិតរបស់គាត់សាមញ្ញណាស់៖ ឯកសារដែលស្ថិតនៅលើកុំព្យូទ័រផ្សេងៗគ្នា ជាមួយ link ដែលអនុញ្ញាតឲ្យអ្នកលោតពីឯកសារមួយទៅឯកសារមួយទៀត។ អ្វីៗទាំងអស់ដែលអ្នកនឹងរៀននៅក្នុងស៊េរីនេះ លូតលាស់ចេញពីគំនិតនោះ។

2. Client និង Server

ស្ទើរតែអ្វីៗទាំងអស់នៅលើ web ធ្វើតាមគំរូតែមួយ៖

  • Client សួរ រកអ្វីមួយ។
  • Server ឆ្លើយ។
  Client                             Server
 (your browser)                (a computer somewhere)

   "Please send me /about"  ───────▶
                            ◀───────  "Here it is: <html>…"

សំណួរនោះត្រូវបានហៅថា request ហើយចម្លើយត្រូវបានហៅថា response។ Request មួយ response មួយ — នោះហើយជាចង្វាក់បេះដូងរបស់ web។ ទំព័រតែមួយដែលអ្នកបើក អាចពាក់ព័ន្ធនឹងពួកវាហាសិប ប៉ុន្តែនីមួយៗធ្វើតាមគំរូដូចគ្នា។

Client តែងតែជាអ្នកចាប់ផ្តើមការសន្ទនា។ Server មិនផ្ញើទំព័រដែលអ្នកមិនបានសុំមកឲ្យអ្នកទេ វារង់ចាំ request ហើយឆ្លើយតបពួកវា។ (បច្ចេកវិទ្យាថ្មីៗមួយចំនួនអនុញ្ញាតឲ្យ server រុញទិន្នន័យតាម connection ដែល client បានបើករួចហើយ — អ្នកនឹងជួបវានៅពេលក្រោយ — ប៉ុន្តែ client នៅតែជាអ្នកបើកវាមុនគេ។)

3. Browser គ្រាន់តែជា Client មួយ

Chrome, Edge, Firefox និង Safari គឺជា client។ ការងាររបស់វាគឺ៖

  1. បំប្លែងអ្វីដែលអ្នកវាយ ទៅជា request មួយ។
  2. ផ្ញើវាទៅ server ដែលត្រឹមត្រូវ។
  3. ទទួល response។
  4. បំប្លែង response — ជាធម្មតា HTML, CSS, JavaScript និងរូបភាព — ទៅជាទំព័រដែលអ្នកឃើញ។

ប៉ុន្តែ browser មិនមែនជា client តែមួយគត់ដែលអាចមាននោះទេ។ Mobile app ដែលសុំសាររបស់អ្នកពី server ក៏ជា client ដែរ។ Command នៅក្នុង terminal ដែលទាញយក file មួយ ក៏ជា client ដែរ។ Backend ដែលហៅទៅកាន់អ្នកផ្តល់សេវាទូទាត់ប្រាក់ (ដូចជាមេរៀន ABA PayWay និង Bakong KHQR នៅលើគេហទំព័រនេះ) ក៏ជា client ផងដែរ។ ពួកវាទាំងអស់និយាយភាសាតែមួយ — HTTP — ដូច្នេះនៅពេលអ្នកយល់មួយ អ្នកយល់ទាំងអស់។

4. Server គ្រាន់តែជាកម្មវិធីមួយ

ពាក្យ «server» មានន័យពីរយ៉ាង ហើយមនុស្សប្តូររវាងន័យទាំងពីរនេះដោយមិនប្រាប់មុន៖

  • Server program៖ software ដែលរង់ចាំ request ហើយផ្ញើ response។ Nginx, Apache និង app Node.js ឬ NestJS សុទ្ធតែជា server program។
  • Server computer៖ ម៉ាស៊ីនដែលដំណើរការវា — ជាញឹកញាប់ជាកុំព្យូទ័រជួលនៅក្នុង data centre ដែលគ្មានអេក្រង់ ឬក្តារចុចទេ។

ចាំពី របៀបដែលកុំព្យូទ័រដំណើរការ ថាកម្មវិធីដែលកំពុងដំណើរការ គឺជា process មួយ។ Web server គឺជា process មួយដែលចំណាយពេលស្ទើរតែទាំងអស់របស់វា រង់ចាំ input ពីបណ្តាញ ដូចដែលជំពូក I/O បានពិពណ៌នាអញ្ចឹង។ នៅពេល request មួយមកដល់ វាភ្ញាក់ឡើង រៀបចំ response មួយ ផ្ញើវា ហើយត្រឡប់ទៅរង់ចាំវិញ។

កុំព្យូទ័រក៏គ្មានអ្វីអស្ចារ្យដែរ។ Laptop ផ្ទាល់ខ្លួនរបស់អ្នកអាចជា server បាន៖ នៅពេលអ្នកដំណើរការ development server ហើយបើក http://localhost:3000 នោះ browser របស់អ្នក (client) និង server program ស្ថិតនៅលើម៉ាស៊ីនតែមួយ។

5. អ្វីកើតឡើងនៅពេលអ្នកបើកទំព័រមួយ

នេះគឺជាស៊េរីទាំងមូលនៅលើទំព័រតែមួយ។ នៅពេលអ្នកវាយអាសយដ្ឋានមួយ ហើយចុច Enter អ្វីៗប្រហែលជាកើតឡើងដូចនេះ៖

 1. You type      https://dara-sok.github.io/my-site/
 2. URL           The browser splits it into parts: which protocol,
                  which server, which page.               (Chapter 2)
 3. DNS           It looks up the server's name to get a number —
                  an IP address.                          (Chapter 3)
 4. Connection    It opens a connection to that address and
                  encrypts it with TLS.                   (Chapter 4)
 5. Request       It sends an HTTP request: "GET /my-site/". (Chapter 5)
 6. Response      The server answers: "200 OK", plus the HTML. (Chapter 6)
 7. Rendering     The browser reads the HTML, requests the CSS,
                  images, and scripts it mentions, and paints
                  the page.                               (Chapter 7)

ទាំងអស់នោះជាធម្មតាចំណាយពេលតិចជាងមួយវិនាទី។ ផ្នែកដែលនៅសល់នៃស៊េរីនេះ ពង្រីកមើលម្តងមួយជំហាន បន្ទាប់មកបន្ថែមអ្វីៗដែលធ្វើឲ្យ web ចាំអ្នក (cookie, ជំពូកទី 8) និងមានអារម្មណ៍ថាលឿន (caching, ជំពូកទី 9) ព្រមទាំងប្រភេទផ្សេងៗនៃអ្វីដែលអ្នកអាចបង្កើតនៅលើវា (ជំពូកទី 10)។

6. ពាក្យដែលអ្នកនឹងឮ

ពាក្យអត្ថន័យ
URLអាសយដ្ឋាន web មួយ ដូចជា https://example.com/about
Domainផ្នែកឈ្មោះនៃ URL ដូចជា example.com
IP addressលេខដែលពិតជាសម្គាល់កុំព្យូទ័រមួយនៅលើបណ្តាញ
DNSប្រព័ន្ធដែលបំប្លែងឈ្មោះ domain ទៅជា IP address
HTTP / HTTPSភាសាដែល browser និង server ប្រើ។ HTTPS គឺជាកំណែដែលបានអ៊ិនគ្រីប
Requestសារពី client ដែលសុំអ្វីមួយ
Responseចម្លើយរបស់ server
Status codeលេខមួយនៅក្នុងគ្រប់ response ដែលប្រាប់ថាវាដំណើរការយ៉ាងដូចម្តេច៖ 200, 404, 500…
Headerបន្ទាត់ព័ត៌មានបន្ថែមមួយ ដែលភ្ជាប់ជាមួយ request ឬ response
Resourceអ្វីក៏ដោយដែល URL មួយចង្អុលទៅ៖ ទំព័រ រូបភាព file ឬទិន្នន័យមួយចំនួន
Frontendផ្នែកនៃ app ដែលដំណើរការនៅក្នុង browser
Backendផ្នែកដែលដំណើរការនៅលើ server

កុំព្យាយាមទន្ទេញពាក្យទាំងនេះឥឡូវនេះ។ ពាក្យនីមួយៗមានផ្នែកផ្ទាល់ខ្លួនរបស់វា ហើយនៅត្រឹមជំពូកទី 11 អ្នកនឹងប្រើពួកវាដោយមិនបាច់គិត។

7. ឧបករណ៍ពីររបស់អ្នក

អ្នកនឹងមើល traffic ពិតៗពេញស៊េរីនេះ ជាមួយឧបករណ៍ពីរដែលអ្នកមានរួចហើយ។

1. Browser DevTools។ Browser ធំៗគ្រប់មួយមាន developer tools ភ្ជាប់មកជាមួយ។ បើកវាដោយចុច F12 ឬ Ctrl+Shift+I (Cmd+Option+I នៅលើ macOS) ឬចុចកណ្តុរខាងស្តាំលើទំព័រ ហើយជ្រើសរើស Inspect។ Tab ដែលអ្នកនឹងប្រើច្រើនជាងគេគឺ Network ដែលបង្ហាញបញ្ជី request ទាំងអស់ដែលទំព័រធ្វើ។

2. curl។ Client មួយនៅលើ command line ដែលផ្ញើ request មួយ ហើយបង្ហាញ response ដល់អ្នក — គ្មានការ render គ្មានអ្វីបន្ថែមលាក់កំបាំង។ វាត្រូវបានដំឡើងរួចហើយនៅលើ macOS, Linux, WSL និង Git Bash។ សាកល្បងវាឥឡូវនេះនៅក្នុង terminal ដែលអ្នកបានរៀបចំក្នុង មូលដ្ឋានគ្រឹះ Command Line៖

curl https://example.com

អ្នកគួរតែឃើញទំព័រ HTML ខ្លីមួយបង្ហាញនៅក្នុង terminal របស់អ្នក។ នោះគឺពិតជាអ្វីដែល browser ទទួលពីអាសយដ្ឋាននោះ — មុនពេលវាបំប្លែងវាទៅជាទំព័រ។ នេះគឺជាគំនិតសំខាន់បំផុតតែមួយនៅក្នុងស៊េរីនេះ៖ web page គ្រាន់តែជាអត្ថបទដែល server ផ្ញើត្រឡប់មកវិញ។ អ្វីៗផ្សេងទៀតគឺជាភាពឆ្លាតវៃរបស់ browser ក្នុងការប្រើវា។

កំណត់សម្គាល់សម្រាប់ Windows៖ នៅក្នុង PowerShell, curl អាចជា alias សម្រាប់ command ផ្សេងមួយដែលមាន option ខុសគ្នា។ សូមប្រើ terminal WSL ឬ Git Bash របស់អ្នកសម្រាប់ស៊េរីនេះ ដូចនៅក្នុង មូលដ្ឋានគ្រឹះ Command Line ដែរ។

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

  1. បើក Network tab។ ចូលមើល website GitHub Pages របស់អ្នកពីស៊េរី Git (អ្វីមួយដូចជា https://<your-username>.github.io/my-site/) ឬ website ណាមួយដែលអ្នកចូលចិត្ត។ បើក DevTools → Network រួច reload ទំព័រ (F5 ឬ Cmd+R)។ មើលបញ្ជីនោះពេញឡើង។ តើទំព័រតែមួយត្រូវការ request ប៉ុន្មាន? អ្នកនឹងឃើញចំនួននោះនៅខាងក្រោមនៃ panel។
  2. ចុចលើ request ដំបូង។ ជាធម្មតាវាគឺជាទំព័រខ្លួនឯង។ មើល tab Headers នៅខាងស្តាំ។ កុំបារម្ភអំពីការយល់វានៅឡើយ — គ្រាន់តែកត់សម្គាល់ថាមានផ្នែក Request មួយ និងផ្នែក Response មួយ។ នោះគឺជា client និង server កំពុងនិយាយគ្នា។
  3. ប្រៀបធៀបជាមួយ curl។ ដំណើរការ curl លើអាសយដ្ឋានដូចគ្នា។ HTML ដែលអ្នកឃើញនៅក្នុង terminal គឺដូចគ្នានឹង tab Response នៃ request ដំបូងនោះនៅក្នុង DevTools។
  4. រក app អ៊ីនធឺណិតដែលមិនមែនជា web។ គិតពីរបស់បីយ៉ាងនៅលើទូរស័ព្ទ ឬកុំព្យូទ័ររបស់អ្នក ដែលប្រើអ៊ីនធឺណិត។ តើមួយណាដែលអ្នកគិតថាប្រើ web (HTTP) ហើយមួយណាប្រហែលជាមិនប្រើ?

នៅក្នុងជំពូកបន្ទាប់ យើងនឹងបំបែក URL មួយ ហើយមើលគ្រប់ផ្នែករបស់វា។

បន្ទាប់URL ម្តងមួយផ្នែក

ទិញកាហ្វេជូនខ្ញុំ

ចូលចិត្តមេរៀននេះមែនទេ? សូមពិចារណាទិញកាហ្វេជូនខ្ញុំមួយកែវ ដើម្បីគាំទ្រការបង្កើតមាតិកាឥតគិតថ្លៃបន្ថែមទៀត!