# សាងសង់កម្មវិធីធនាគារ ផ្នែកទី3៖ វិធីសាស្រ្តទាញយក និងប្រើប្រាស់ទិន្នន័យ គិតអំពីកុំព្យូទ័ររបស់ Enterprise ក្នុង Star Trek - ពេល Captain Picard ស្នើសុំស្ថានភាពនាវា ព័ត៌មាននោះបង្ហាញភ្លាមៗដោយមិនធ្វើឲ្យទាំងអ៊ីនធឺហ្វសដែលមានផ្ទាំងមុខបិទ ហើយសាងសង់ឡើងវិញទេ។ ការស្វូរបកព័ត៌មានបានល្អល្អឥតខ្ចោះនេះហើយជាការដែលយើងកំពុងសាងសង់នៅទីនេះជាមួយការទាញយកទិន្នន័យឌីណាមិច។ សព្វថ្ងៃ កម្មវិធីធនាគាររបស់អ្នកដូចមុខសារព័ត៌មានដែលបានបោះពុម្ព - មានព័ត៌មានប៉ុន្តែថេរ។ យើងនឹងបម្លែងវាទៅជាដូចកន្លែងគ្រប់គ្រងបេសកកម្មនៅ NASA ដែលទិន្នន័យហូរជាបន្តបន្ទាប់ និងអាប់ដេតពេញលេញក្នុងពេលវេលាពិតប្រាកដដោយមិនរាំងខ្សroqលឲ្យដំណើរការរបស់អ្នកប្រើប្រាស់បាត់បង់។ អ្នកនឹងរៀនវិធីទំនាក់ទំនងជាមួយម៉ាស៊ីនបម្រើដោយអាស៊ីនឆ្រូណាស់, ដោះស្រាយទិន្នន័យដែលមកដល់ក្នុងពេលខុសគ្នា, និងបម្លែងព័ត៌មានដើមទៅជាអ្វីមួយមានន័យសម្រាប់អ្នកប្រើប្រាស់។ នេះជាភាពខុសគ្នារវាងកម្មវិធីបង្ហាញ និងកម្មវិធីរួមបញ្ចូលក្នុងការផលិត។ ## ⚡ អ្វីដែលអ្នកអាចធ្វើបានក្នុងរយៈពេល 5 នាទីបន្ទាប់ **ផ្លូវចាប់ផ្តើមរហ័សសម្រាប់អ្នកអភិវឌ្ឍន៍មិនទាន់មានពេល** ```mermaid flowchart LR A[⚡ ៥ នាទី] --> B[រៀបចំ ម៉ាស៊ីនមេ API] B --> C[សាកល្បងទាញយកជាមួយ curl] C --> D[បង្កើតមុខងារ ចូលប្រព័ន្ធ] D --> E[មើលទិន្នន័យពេលប្រតិបត្តិ] ``` - **នាទី 1-2**: ចាប់ផ្តើមម៉ាស៊ីនបម្រើ API របស់អ្នក (`cd api && npm start`) ហើយសាកល្បងការតភ្ជាប់ - **នាទី 3**: បង្កើតមុខងារ `getAccount()` មូលដ្ឋានដោយប្រើ fetch - **នាទី 4**: ភ្ជាប់ទំរង់ចូលប្រើប្រាស់ជាមួយ `action="javascript:login()"` - **នាទី 5**: សាកល្បងចូលប្រើប្រាស់ ហើយមើលទិន្នន័យគណនីបង្ហាញនៅក្នុងកុងស៊ូល **ពាក្យបញ្ជាសម្រាប់សាកល្បងឆាប់រហ័ស**: ```bash # ផ្ទៀងផ្ទាត់ថា API កំពុងដំណើរការ curl http://localhost:5000/api # សាកល្បងទាញយកទិន្នន័យគណនី curl http://localhost:5000/api/accounts/test ``` **ហេតុអ្វីវាមានសារៈសំខាន់**៖ នៅក្នុងរយៈពេល 5 នាទី អ្នកនឹងឃើញព្រងារចិត្តនៃការទាញយកទិន្នន័យអាស៊ីនឆ្រូណាស់ ដែលគ្រប់កម្មវិធីវេបទំនើបប្រើប្រាស់។ នេះជាគ្រឹះដំបូងដែលធ្វើឲ្យកម្មវិធីមានអារម្មណ៍ឆាប់និងរស់រវើក។ ## 🗺️ ជំនាញរៀនរបស់អ្នកតាមរយៈកម្មវិធីវេបដែលបើកចំហទិន្នន័យ ```mermaid journey title ពីទំព័រអចលន៍ទៅកម្មវិធីសកម្ម section ការយល់ដឹងអំពីការវិវត្តន៍ ការវេចខ្ចប់ទំព័រប្រពៃណី: 3: You រកឃើញអត្ថប្រយោជន៍ AJAX/SPA: 5: You ពិសោធន៍លំនាំ Fetch API: 7: You section ការសាងសង់ការផ្ទៀងផ្ទាត់ បង្កើតមុខងារ​ចូល: 4: You គ្រប់គ្រងប្រតិបត្តិការមិន đồng bộ: 6: You គ្រប់គ្រងសម័យប្រើប្រាស់: 8: You section ការអាប់ដេត UI sកម្ម រៀនរៀបចំ DOM: 5: You បង្កើតការបង្ហាញប្រតិបត្តិការ: 7: You បង្កើតផ្ទាំងគ្រប់គ្រងឆ្លើយតប: 9: You section លំនាំវិជ្ជាជីវៈ ការបង្ហាញផ្អែកលើគំរូ: 6: You ត្រៀមប្រយុទ្ធនឹងកំហុស: 7: You បង្កើតប្រសិទ្ធភាពប្រតិបត្តិការ: 8: You ``` **គោលដៅនៃការសិក្សារបស់អ្នក**៖ នៅចុងបញ្ចប់មេរៀននេះ អ្នកនឹងយល់ដឹងពីរបៀបដែលកម្មវិធីវេបទំនើបទាញយក, ដំណើរការ និងបង្ហាញទិន្នន័យឌីណាមិច តាមរយៈបទពិសោធន៍រលូនដែលយើងរំពឹងទុកពីកម្មវិធីមានវិជ្ជាជីវៈ។ ## កម្រងសំណួរពិនិត្យមុនមេរៀន [កម្រងសំណួរពិនិត្យមុនមេរៀន](https://ff-quizzes.netlify.app/web/quiz/45) ### លក្ខខណ្ឌរួចមុន មុនចូលទៅក្រោមការទាញយកទិន្នន័យ សូមប្រាកដថាអ្នកមានគ្រឿងផ្សំខាងក្រោមរួចហើយ៖ - **មេរៀនមុន**៖ បញ្ចប់ [ទំរង់ចូលប្រើ និងចុះបញ្ជី](../2-forms/README.md) - យើងនឹងបង្កើតបន្ថែមលើមូលដ្ឋាននេះ - **ម៉ាស៊ីនបម្រើមូលដ្ឋាន**៖ ដំឡើង [Node.js](https://nodejs.org) និង [ដំណើរការម៉ាស៊ីនបម្រើ API](../api/README.md) ដើម្បីផ្តល់ទិន្នន័យគណនី - **ការតភ្ជាប់ API**៖ សាកល្បងការតភ្ជាប់ម៉ាស៊ីនបម្រើរបស់អ្នកជាមួយពាក្យបញ្ជានេះ: ```bash curl http://localhost:5000/api # ការឆ្លើយតបដែលបានរំពឹងទុក៖ "Bank API v1.0.0" ``` ការសាកល្បងរហ័សនេះធានាថា គ្រប់គ្រឿងផ្សំទាំងអស់កំពុងទំនាក់ទំនងបានត្រឹមត្រូវ៖ - ផ្ទៀងផ្ទាត់ Node.js កំពុងដំណើរការដោយត្រឹមត្រូវលើប្រព័ន្ធរបស់អ្នក - បញ្ជាក់ថាម៉ាស៊ីនបម្រើ API របស់អ្នកកំពុងអនុវត្តន៍ និងឆ្លើយតប - គោលបំណងថាកម្មវិធីរបស់អ្នកអាចដំណើរការទៅម៉ាស៊ីនបម្រើបាន (ដូចជាការត្រួតពិនិត្យការទំនាក់ទំនងវិទ្យុមុនបេសកកម្ម) ## 🧠 ទិដ្ឋភាពទូទៅនៃប្រព័ន្ធគ្រប់គ្រងទិន្នន័យ ```mermaid mindmap root((ការគ្រប់គ្រងទិន្នន័យ)) Authentication Flow Login Process Form Validation ការត្រួតពិនិត្យសំណុំបែបបទ Credential Verification ការត្រួតពិនិត្យឯកសារយោង Session Management ការគ្រប់គ្រងសម័យប្រតិបត្តិការ User State Global Account Object វត្ថុគណនីសកល Navigation Guards អ្នកជម្លៀសទិស Error Handling ការដោះស្រាយកំហុស API Communication Fetch Patterns គំរូយកទិន្នន័យ GET Requests ពាក្យស្នើសុំ GET POST Requests ពាក្យស្នើសុំ POST Error Responses បម្រើការឆ្លើយតបកំហុស Data Formats ទ្រង់ទ្រាយទិន្នន័យ JSON Processing ការប្រើប្រាស់ JSON URL Encoding ការអិនគូដ URL Response Parsing ការវិភាគការឆ្លើយតប Dynamic UI Updates DOM Manipulation ការគ្រប់គ្រង DOM Safe Text Updates ការអាប់ដេតអត្ថបទយ៉ាងปลอดภัย Element Creation ការបង្កើតធាតុ Template Cloning ការចម្លងគំរូ User Experience Real-time Updates ការអាប់ដេតពេលវេលាពិត Error Messages សារ​កំហុស Loading States ស្ថានភាពកំពុងដំណើរការ Security Considerations XSS Prevention ការពារការវាយប្រហារ XSS textContent Usage ការប្រើប្រាស់ textContent Input Sanitization ការសម្អាតបញ្ចូល Safe HTML Creation ការបង្កើត HTML យ៉ាងปลอดภัย CORS Handling Cross-Origin Requests ពាក្យស្នើសុំឆ្លងដែនដើមកំណើត Header Configuration ការកំណត់ក្បាល Development Setup ការតំឡើងអភិវឌ្ឍន៍ ``` **គ្រឹះមូលដ្ឋាន**៖ កម្មវិធីវេបទំនើបជាប្រព័ន្ធចងក្រងទិន្នន័យ - វាត្រូវគ្នារវាងផ្ទាំងមុខអ្នកប្រើ, ម៉ាស៊ីនបម្រើ API និងម៉ូដែលសុវត្ថិភាពរបស់កម្មវិធីរុករកដើម្បីបង្កើតបទពិសោធន៍រលូន។ --- ## យល់ដឹងអំពីការទាញយកទិន្នន័យក្នុងកម្មវិធីវេបទំនើប របៀបដែលកម្មវិធីវេបគ្រប់គ្រងទិន្នន័យបានឈានទៅមុខយ៉ាងហោចណាស់ក្នុងរយៈ២០ឆ្នាំចុងក្រោយ។ ការយល់ដឹងពីការវិវឌ្ឍន៍នេះនឹងជួយឱ្យអ្នកយល់ថាហេតុអ្វីដែលបច្ចេកវិធីទំនើបជាដើមដូចជា AJAX និង Fetch API មានអំណាច ហើយហេតុអ្វីបានជាជារបស់សំខាន់សម្រាប់អ្នកអភិវឌ្ឍន៍វេប។ យើងឲ្យមើលរបៀបដែលគេបានបង្កើតគេហទំព័រប្រពៃណីប្រៀបធៀបនឹងកម្មវិធីឌីណាមិចរលូនដែលយើងកំពុងកសាងថ្ងៃនេះ។ ### កម្មវិធីវេបច្រើនទំព័រប្រពៃណី (MPA) ក្នុងដំណាក់កាលដំបូងនៃអ៊ីនធឺណិត គ្រាប់មួយបិទ គ្រាប់មួយថែមពិតជាដូចជាស្វាយលេងប្ដូរច្រកបឹងទូរទស្សន៍ចាស់ៗ - ថតគេនឹងស្វះស្វែងហើយបញ្ចូលមាតិកាថ្មីយឺតៗ។ នេះជាពិតរបស់កម្មវិធីវេបដើមៗដែលគ្រប់ការនិយាយទាំងឡាយមានន័យថាត្រូវសង់ឡើងវិញទំព័រទាំងមូលចាប់ពីដើម។ ```mermaid sequenceDiagram participant User participant Browser participant Server User->>Browser: ចុច​តំណ ឬ​យោង​បែបបទ Browser->>Server: ស្នើសុំ​ទំព័រ HTML ថ្មី Note over Browser: ទំព័រចេញ​ពណ៌​ស Server->>Browser: ទំព័រ HTML ពេញលេញ​ត្រឡប់​មកវិញ Browser->>User: បង្ហាញ​ទំព័រ​ថ្មី (ចំហុយ/បញ្ចូល​ថ្មី) ``` ![Update workflow in a multi-page application](../../../../translated_images/km/mpa.7f7375a1a2d4aa77.webp) **ហេតុអ្វីដែលវិធីនេះមើលទៅជាចាស់ដូចជា៖** - គ្រប់ការចុចមានន័យថាត្រូវសង់ទំព័រទាំងមូលឡើងវិញ - អ្នកប្រើប្រាស់ត្រូវឈប់នឹកក្នុងកណ្តាលដោយការបង្ហាញទំព័រចាស់ៗរាំងស្ទះ - ការតភ្ជាប់អ៊ីនធឺណិតរបស់អ្នកធ្វើការ៉ាសាំ្ជត (overwork) ដោយទាញយកក្បាលទំព័រ និងជើងទំព័រដដែលជាថ្មីៗ - កម្មវិធីមានអារម្មណ៍ដូចជាគ្រាប់ប៊ិចតំណាងផ្ទុកឯកសារមែនជាងប្រើប្រាស់កម្មវិធី ### កម្មវិធីវេបទំព័រតែមួយទំព័រ (SPA) ទំនើប AJAX (Asynchronous JavaScript and XML) ប្រែផែននេះស្រួចខ្លាំង។ ដូចការរចនាផ្នែកច្រើននៃស្ថានីយអាកាសអន្ដរជាតិ ដែលអ្នកអង្គាសអាចប្តូរផ្នែកតែមួយដោយមិនបង្កើតស្ថាបត្យកម្មទាំងមូលឡើងវិញ, AJAX អនុញ្ញាតឲ្យយើងអាប់ដេតផ្នែកជាក់លាក់នៃគេហទំព័រ ដោយមិនចាំបាច់ផ្ទុកឡើងវិញទាំងមូល។ ទោះបីជា XML ត្រូវបានដាក់ឈ្មោះក៏ដោយ យើងភាគច្រើនប្រើ JSON នៅសព្វថ្ងៃ ប៉ុន្តែគ្រឹះដូចគ្នានៅតែមាន៖ អាប់ដេតតែអ្វីដែលត្រូវរយះពេល។ ```mermaid sequenceDiagram participant User participant Browser participant JavaScript participant Server User->>Browser: អន្តរកម្មជាមួយទំព័រ Browser->>JavaScript: ការបញ្ចូលកម្មវិធីរំលោភព្រឹត្តិការណ៍ JavaScript->>Server: ប្រមាញ់ទិន្នន័យតែត្រូវការ Server->>JavaScript: ត្រឡប់ទិន្នន័យ JSON JavaScript->>Browser: បន្ទាន់សម័យធាតុទំព័រផ្តោតលើ Browser->>User: បង្ហាញមាតិកាបន្ទាន់ (គ្មានបញ្ចូលឡើងវិញ) ``` ![Update workflow in a single-page application](../../../../translated_images/km/spa.268ec73b41f992c2.webp) **ហេតុអ្វី SPAs មើលទៅរលូនជាង៖** - មានតែផ្នែកដែលបានផ្លាស់ប្តូរជាក់លាក់ត្រូវអាប់ដេត (ដោយមានចិត្តវិភាគ) - គ្មានការរាំងខ្ស្រូលរាំងស្ទះទៀតទេ - អ្នកប្រើនៅក្នុងលំនាំរបស់ពួកគេបន្ត - ទិន្នន័យដំណើរតិចជាង មានន័យថាបង្ហាញបានលឿន - គ្រប់យ៉ាងមានអារម្មណ៍ឆាប់គិត និងឆ្លាតដូចកម្មវិធីនៅលើទូរស័ព្ទរបស់អ្នក ### ការវិវឌ្ឍទៅ Fetch API ទំនើប កម្មវិធីរុករកសម័យថ្មីផ្តល់ជូន [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API) ដែលជំនួស [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) ចាស់។ ដូចការប្រែពីការប្រើទូរសព្ទទៅអ៊ីមែល, Fetch API ប្រើ promises សម្រាប់កូដអាស៊ីនឆ្រូណាស់កាន់តែស្អាត ហើយគ្រប់គ្រង JSON បានយ៉ាងធម្មជាតិ។ | លក្ខណៈពិសេស | XMLHttpRequest | Fetch API | |---------|----------------|----------| | **សរសេរ​កូដ** | ពិបាកដោយផ្អែកលើ callback | ស្អាតដោយជាសន្យា (promise) | | **គ្រប់គ្រង JSON** | ត្រូវបកប្រែដោយដៃ | មានវិធី `.json()` ផ្ទាល់ក្នុង | | **គ្រប់គ្រងកំហុស** | ព័ត៌មានកំហុសមានកំណត់ | ព័ត៌មានកំហុសពេញលេញ | | **គាំទ្រ​សម័យ​ថ្មី** | ត្រូវគាំទ្រពីម៉ាស៊ីនចាស់ | សន្យា ES6+ និង async/await | > 💡 **ការគាំទ្ររបស់កម្មវិធីរុករក**៖ ព័ត៌មានល្អ - Fetch API ដំណើរការល្អក្នុងកម្មវិធីរុករកទំនើបទាំងអស់! ប្រសិនបើអ្នកចង់ដឹងពីកំណែជាក់លាក់ [caniuse.com](https://caniuse.com/fetch) មានព័ត៌មានការគាំទ្រដូចបានច្បាស់លាស់។ > **ចំណុចសំខាន់៖** - ដំណើរការល្អ Chrome, Firefox, Safari និង Edge (គឺគ្រប់ទីកន្លែងដែលអ្នកប្រើប្រាស់របស់អ្នកមាន) - មានតែ Internet Explorer តែប៉ុណ្ណោះដែលត្រូវការជំនួយបន្ថែម (ហើយពិតជាគួរឲ្យចាកចេញពីវា) - បង្កើតស្ថានភាពល្អសម្រាប់ async/await ដែលយើងនឹងប្រើនៅខាងក្រោយ ### សម្រេចការចូលប្រើប្រាស់អ្នកប្រើ និងទាញយកទិន្នន័យ ឥឡូវនេះ មករៀបចំប្រព័ន្ធចូលប្រើប្រាស់ដែលបម្លែងកម្មវិធីធនាគាររបស់អ្នកពីការបង្ហាញថេរមួយទៅជា កម្មវិធីប្រើប្រាស់មួយ។ ដូចនីតិវិធីផ្ទៀងផ្ទាត់ប្រើប្រាស់ក្នុងទីតាំងយោធាដែលមានសុវត្ថិភាព យើងនឹងផ្ទៀងផ្ទាត់ព័ត៌មានអ្នកប្រើ និងបន្ទាប់មកផ្តល់ចូលទៅក្នុងទិន្នន័យជាក់លាក់របស់ពួកគេ។ យើងនឹងកសាងវាជាបន្ដបន្ទាប់ ចាប់ពីការផ្ទៀងផ្ទាត់មូលដ្ឋាន ហើយបន្ថែមមុខងារទាញយកទិន្នន័យជាក្រោយ។ #### ជំហានទី1៖ បង្កើតមូលដ្ឋានមុខងារចូលប្រើប្រាស់ បើកឯកសារ `app.js` ហើយបន្ថែមមុខងារ `login` ថ្មីមួយ។ នេះនឹងគ្រប់គ្រងដំណើរការផ្ទៀងផ្ទាត់អ្នកប្រើ៖ ```javascript async function login() { const loginForm = document.getElementById('loginForm'); const user = loginForm.user.value; } ``` **ចូលទៅបំបែកវា៖** - ពាក្យកំណត់ `async`? នេះកំពុងប្រាប់ JavaScript ថា "មុខងារនេះអាចត្រូវរង់ចាំអ្វីមួយ" - យើងកំពុងយកទំរង់ពីទំព័រ (គ្មានអ្វីពិសេស, គ្រាន់តែស្វែងរកតាម ID) - បន្ទាប់មកយើងយកអ្វីដែលអ្នកប្រើបានវាយជាឈ្មោះអ្នកប្រើ - មានមុខងារស្អាត៖ អ្នកអាចចូលដល់inputទាំងអស់ពីឈ្មោះ `name` របស់វា - មិនចាំបាច់ទៅទាញ element ដោយ ID ទៀតហើយ! > 💡 **គំរូចូលដល់ទំរង់**៖ គ្រប់ការត្រួតគ្រងទំរង់អាចចូលដោយឈ្មោះ (set ក្នុង HTML ជាមួយ attribute `name`) ជាគ្រឿងផ្នែកមួយនៃទំរង់ម្ដងទេ។ វាផ្តល់វិធីសាស្រ្តស្អាតក្នុងការទាញទិន្នន័យវេប។ #### ជំហានទី2៖ បង្កើតមុខងារទាញយកទិន្នន័យគណនី បន្ទាប់មក យើងនឹងបង្កើតមុខងារជាក់លាក់សម្រាប់ទាញយកទិន្នន័យគណនីពីម៉ាស៊ីនបម្រើ។ វាមៅដូចជាគំរូក្នុងការចុះបញ្ជី ដោយផ្តោតលើការទាញយកទិន្នន័យ៖ ```javascript async function getAccount(user) { try { const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user)); return await response.json(); } catch (error) { return { error: error.message || 'Unknown error' }; } } ``` **អ្វីដែលកូដនេះធ្វើ៖** - **ប្រើប្រាស់** `fetch` API ទំនើបសម្រាប់ទាញយកទិន្នន័យអាស៊ីនឆ្រូណាស់ - **បង្កើត** URL សំណើ GET ជាមួយប៉ារ៉ាម៉ែត្រ username - **អនុវត្ត** `encodeURIComponent()` ដើម្បីដោះស្រាយអក្សរពិសេសក្នុង URL - **បម្លែង** ផ្ទុយជា JSON សម្រាប់ងាយស្រួលដំណើរការ - **ដោះស្រាយកំហុស** ដោយអាចផ្តល់វត្ថុកំហុស មិនបញ្ហាសម្រាប់បញ្ហាដល់កូដ > ⚠️ **កំណត់ចំណាំសុវត្ថិភាព**៖ មុខងារ `encodeURIComponent()` គ្រប់គ្រងអក្សរពិសេសក្នុង URL។ ដូចប្រព័ន្ធសម្ងាត់ការទំនាក់ទំនងទាហាន វាធានាថាសាររបស់អ្នកដល់ដោយត្រឹមត្រូវ ដើម្បីការពារអក្សរដូចជា "#" ឬ "&" មិនឲ្យប៉ះពាល់។ > **ហេតុអ្វីវាមានសារៈសំខាន់ៈ** - ល្បួងឲ្យបញ្ហា URL រអិល - ការពារការវាយប្រហារដោយកែប្រែ URL - ផ្ទៀងផ្ទាត់ម៉ាស៊ីនបម្រើទទួលបានព័ត៌មានត្រឹមត្រូវ - អនុវត្តន៍បទពិសោធន៍សុវត្ថិភាព! #### យល់ដឹងពីសំណើ HTTP GET នេះជារឿងដែលអាចធ្វើអោយភ្ញាក់ផ្អើល៖ ខណៈពេលអ្នកប្រើ `fetch` ដោយគ្មានជម្រើសបន្ថែម វាបង្កើតសំណើ [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) ដោយស្វ័យប្រវត្តិ។ វាដូចជាការស្នើសុំផ្ដល់មើលព័ត៌មានគណនីអ្នកប្រើ។ សូមគិតថាសំណើ GET ជាការស្នើសុំយ៉ាងគង់ចិត្តដើម្បីខ្ចប់សៀវភៅមួយពីបណ្ណាល័យ - អ្នកកំពុងស្នើមើលអ្វីដែលមានរួចហើយ។ សំណើ POST (ដែលយើងបានប្រើសម្រាប់ការចុះបញ្ជី) ជាដូចស្នើសុំបញ្ចូលសៀវភៅថ្មីមួយចូលក្នុងប្រមូលផ្ដុំ។ | សំណើ GET | សំណើ POST | |-------------|-------------| | **គោលបំណង** | ទាញយកទិន្នន័យមានរួច | ផ្ញើទិន្នន័យថ្មីទៅម៉ាស៊ីនបម្រើ | | **ប៉ារ៉ាម៉ែត្រ** | នៅផ្លូវ URL/សំណួរ | នៅក្នុងរាងសំណើ | | **បម្រាស់ទិន្នន័យ** | អាចបានថតជាស្តុកដោយកម្មវិធីរុករក | មិនទៀងទាត់ថតជាស្តុក | | **សុវត្ថិភាព** | មើលឃើញបានក្នុង URL/កំណត់ត្រា | លាក់ក្នុងរាងសំណើ | ```mermaid sequenceDiagram participant B as ប្រៅស៊ែរ participant S as ម៉ាស៊ីនបម្រើ Note over B,S: សំណើ GET (ការទាញយកទិន្នន័យ) B->>S: GET /api/accounts/test S-->>B: 200 OK + ទិន្នន័យគណនី Note over B,S: សំណើ POST (ការដាក់ស្នើទិន្នន័យ) B->>S: POST /api/accounts + ទិន្នន័យគណនីថ្មី S-->>B: 201 Created + ការបញ្ជាក់ Note over B,S: ការដោះស្រាយកំហុស B->>S: GET /api/accounts/nonexistent S-->>B: 404 Not Found + សារ​កំហុស ``` #### ជំហានទី3៖ បង្រួមគ្រប់យ៉ាងចូលគ្នា ឥឡូវនេះមកជាន់​កម្រិតសប្បាយចិត្ត - មកភ្ជាប់មុខងារទាញយកគណនីទៅដំណើរការចូលរបស់អ្នក។ នេះជាកន្លែងដែលគ្រប់យ៉ាងសម្រួលចូលគ្នា៖ ```javascript async function login() { const loginForm = document.getElementById('loginForm'); const user = loginForm.user.value; const data = await getAccount(user); if (data.error) { return console.log('loginError', data.error); } account = data; navigate('/dashboard'); } ``` មុខងារនេះអនុវត្តតាមលំដាប់៖ - ប្រមូលឈ្មោះអ្នកប្រើពីinputទំរង់ - ស្នើសុំទិន្នន័យគណនីអ្នកប្រើពីម៉ាស៊ីនបម្រើ - ដោះស្រាយកំហុសណាមួយកើតឡើងពេលដំណើរការ - រក្សាទុកទិន្នន័យគណនី ហើយនាំទៅមុខទំព័រដាសប៊ូតបន្ទាប់ពីជោគជ័យ > 🎯 **គំរូ Async/Await**៖ ពីព្រោះ `getAccount` ជាមុខងារអាស៊ីនឆ្រូណាស់ យើងប្រើពាក្យ `await` ដើម្បីផ្អាក់សកម្មភាពរហូតដល់ម៉ាស៊ីនបម្រើឆ្លើយតប។ វារពារការបន្តកម្មវិធីជាមួយទិន្នន័យដែលមិនបានកំណត់។ #### ជំហានទី4៖ បង្កើតទីតាំងរក្សាទិន្នន័យរបស់អ្នក កម្មវិធីរបស់អ្នកត្រូវការទីតាំងមួយដើម្បីចងចាំព័ត៌មានគណនីនៅពេលដែលវាត្រូវបានផ្ទុក។ សូមគិតថាវាជាភាសារហ្សឺមរបស់កម្មវិធី - ជាទីកន្លែងរក្សាទិន្នន័យអ្នកប្រើបច្ចុប្បន្ន។ បន្ថែមជួរនេះនៅលើកំពូលឯកសារ `app.js` របស់អ្នក៖ ```javascript // នេះផ្ទុកទិន្នន័យគណនីរបស់អ្នកប្រើប្រាស់បច្ចុប្បន្ន let account = null; ``` **ហេតុអ្វីយើងត្រូវការវា៖** - រក្សាទិន្នន័យគណនីអាចចូលបានពីគ្រប់ទីកន្លែងក្នុងកម្មវិធី - ចាប់ផ្តើមជាមួយ `null` មានន័យថា "មិនមាននរណាចូលប្រើទេ" - វានឹងត្រូវបន្ទាន់សម័យពេលនរណាម្នាក់ចូលឬចុះបញ្ជី - ប្រព្រឹត្តដូចជាមូលដ្ឋានតែមួយនៃការពិត - មិនមានភាពច្របូកច្របល់អំពីនរណាកំពុងប្រើប្រាស់ #### ជំហានទី5៖ ភ្ជាប់ទំរង់របស់អ្នក ឥឡូវនេះភ្ជាប់មុខងារចូលថ្មីរបស់អ្នកទៅទំរង់ HTML។ បរិមាណទំរង់របស់អ្នកដូចខាងក្រោម៖ ```html
``` **អ្វីដែលការផ្លាស់ប្ដូរតូចនេះធ្វើ៖** - ឈប់ទំរង់ពីការធ្វើវិបត្តិពេញទំព័រដូចតាមទំនៀមទំលាប់ - ហៅមុខងារ JavaScript ផ្ទាល់របស់អ្នកជំនួស - រក្សាឲ្យវាស្រួល និងមានអារម្មណ៍ដូច SPA - ផ្តល់ការគ្រប់គ្រងពេញលេញលើអ្វីដែលកើតឡើងពេលអ្នកប្រើចុច "Login" #### ជំហានទី6៖ បង្កើតភាពរលូនក្នុងមុខងារចុះបញ្ជីរបស់អ្នក សម្រាប់ភាពស្មើគ្នា, អាប់ដេតមុខងារ `register` របស់អ្នកឲ្យកាន់តែរក្សាទិន្នន័យគណនី និងនាំទៅដាសប៊ូត: ```javascript // បន្ថែមបន្ទាត់ទាំងនេះនៅចុងฟងសិន register របស់អ្នក account = result; navigate('/dashboard'); ``` **ការកែលម្អនេះផ្តល់ជូន៖** - **ចូលរួមរលូន** ពីការចុះបញ្ជីទៅដាស់ប៊ូត - **បទពិសោធន៍រលូន** ដូចគ្នារវាងដំណើរការចូល និងចុះបញ្ជី - **ចូលប្រើបានភ្លាម** ទិន្នន័យគណនីបន្ទាប់ពីចុះបញ្ជីជោគជ័យ #### សាកល្បងការអនុវត្តរបស់អ្នក ```mermaid flowchart TD A[អ្នកប្រើបញ្ចូលព័ត៌មានសម្គាល់] --> B[អនុគមន៍ចូលប្រើបានហៅ] B --> C[យកទិន្នន័យគណនីពីម៉ាស៊ីនបម្រើ] C --> D{ទិន្នន័យទទួលបានដោយជោគជ័យ?} D -->|បាទ/ចាស| E[រក្សាទិន្នន័យគណនីជាសកល] D -->|ទេ| F[បង្ហាញសារបញ្ហា] E --> G[ចរាចរទៅផ្ទាំងគ្រប់គ្រង] F --> H[អ្នកប្រើនៅលើទំព័រចូល] ``` **ម៉ោងសាកល្បងវា៖** 1. បង្កើតគណនីថ្មីមួយដើម្បីបញ្ជាក់ថាអ្វីៗដំណើរការ 2. ព្យាយាមចូលជាមួយព័ត៌មានបញ្ចូលនោះដដែល 3. មើលកុងស៊ូលរបស់កម្មវិធីរុករក (F12) ប្រសិនបើមានអ្វីមិនត្រឹមត្រូវ 4. ធ្វើឲ្យប្រាកដថាអ្នកបានមកដល់ដាសប៊ូតបន្ទាប់ពីចូលបានជោគជ័យ ប្រសិនបើអ្វីមួយមិនដំណើរការ កុំភ័យ! បញ្ហាច្រើនគឺជាការជួសជុលតូចៗដូចជា ព្រីន អក្សរបាត់ ឬភ្លេចចាប់ផ្តើមម៉ាស៊ីនបម្រើ API។ #### ពាក្យសម្ងាត់ខ្លីអំពី Cross-Origin ខ្យល់ទឹក អ្នកអាចចង់ដឹង៖ "កម្មវិធីវេបរបស់ខ្ញុំរបៀបណាចាប់ផ្តើមនិយាយទៅម៉ាស៊ីនបម្រើ API ខណៈពួកវារត់លើព្រលឹងផ្សេងគ្នា?" សំណួរល្អ! នេះជាវិញ្ញាណដែលអ្នកអភិវឌ្ឍន៍វេបគ្រប់នរណាវៀចក្លាយជាការស្ទាក់ស្ទើរបាននៅពេលណា។ > 🔒 **សុវត្ថិភាព Cross-Origin**៖ កម្មវិធីរុករកអនុវត្តន៍ "គោលន័យដើមដូចគ្នា" ដើម្បីការពារការទំនាក់ទំនងមិនមានការអនុញ្ញាតរវាងដែនដីខុសគ្នា។ ដូចប្រព័ន្ធត្រួតពិនិត្យនៅ Pentagon វាអះអាងថាការទំនាក់ទំនងត្រូវបានអនុញ្ញាតមុនប្រើទិន្នន័យ។ > **ក្នុងការរៀបចំរបស់យើង៖** - កម្មវិធីវេបរបស់អ្នកដំណើរការនៅ `localhost:3000` (ម៉ាស៊ីនបម្រើអភិវឌ្ឍន៍) - ម៉ាស៊ីនបម្រើ API របស់អ្នកដំណើរការនៅ `localhost:5000` (ម៉ាស៊ីនបម្រើក្រោយ) - ម៉ាស៊ីនបម្រើ API រួមបញ្ចូល [ក្បាល CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS) ដែលអនុញ្ញាតឲ្យមានការទំនាក់ទំនងចេញពីកម្មវិធីវេបរបស់អ្នក ការរៀបចំនេះស្ទើរតែដូចការអភិវឌ្ឍន៍ពិតដែលកម្មវិធីផ្នែកមុខ និងផ្នែកក្រោយស្របទម្លាប់ដំណើរការលើម៉ាស៊ីនបម្រើផ្សេងគ្នា។ > 📚 **រៀនបន្ថែម**៖ ជ្រាបជ្រោមទៅលើ API និងការទាញយកទិន្នន័យជាមួយ [មេរៀន Microsoft Learn លើ API](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon)។ ## បង្ហាញទិន្នន័យរបស់អ្នកក្នុង HTML ឥឡូវនេះ យើងនឹងធ្វើឲ្យទិន្នន័យដែលបានទាញយកមើលឃើញដោយអ្នកប្រើតាមរយៈការគ្រប់គ្រង DOM។ ដូចការវិភាគរូបថតក្នុងបន្ទប់ងងឹត យើងកំពុងយកទិន្នន័យមិនអាចមើលឃើញទៅធ្វើឲ្យវាមើលឃើញ និងអាចធ្វើអ្វីមួយបានដោយអ្នកប្រើ។ ការគ្រប់គ្រង DOM គឺជាបច្ចេកទេសដែលបម្លែងទំព័រវេបថេរជាកម្មវិធីឌីណាមិចដែលអាប់ដេតមាតិការបស់វាតាមប្រតិកម្មអ្នកប្រើ និងការឆ្លើយតបម៉ាស៊ីនបម្រើ។ ### ជ្រើសរើសឧបករណ៍ត្រឹមត្រូវសម្រាប់ការងារ ពេលដែលផ្លាស់ប្ដូរទំព័រ HTML របស់អ្នកជាមួយ JavaScript អ្នកមានជម្រើសជាច្រើន។ គិតថាវានៅដូចជាវត្ថុអគ្គិសនីផ្សេងៗក្នុងប្រអប់ឧបករណ៍មួយ - តែម្ដងគួរឱ្យសមសម្រាប់ការងារផ្សេងៗ៖ | វិធីសាស្រ្ត | អ្វីដែលវាល្អ | ពេលណាត្រូវប្រើវា | កម្រិតសុវត្ថិភាព | |--------|---------------------|----------------|--------------| | `textContent` | បង្ហាញទិន្នន័យអ្នកប្រើប្រាស់ដោយសុវត្ថិភាព | ពេលណាដែលអ្នកបង្ហាញអត្ថបទ | ✅ រឹងមាំ | | `createElement()` + `append()` | បង្កើតកំណត់ត្រាសង្កត់ | បង្កើតផ្នែក/បញ្ជីថ្មី | ✅ រឹងមាំ | | `innerHTML` | កំណត់មាតិកា HTML | ⚠️ ព្យាយាមចៀសវាងវា | ❌ ប្រតិបត្តិការលំបាក | #### វិធីសុវត្ថិភាពក្នុងការបង្ហាញអត្ថបទ៖ textContent លក្ខណៈ [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) គឺជាមិត្តល្អបំផុតរបស់អ្នកនៅពេលបង្ហាញទិន្នន័យអ្នកប្រើប្រាស់។ វាដូចជាមនុស្សចទ្រង់ច្រង់សម្រាប់គេហទំព័ររបស់អ្នក - មិនប្រើអ្វីគ្រោះថ្នាក់ឲ្យឆ្លងកាត់: ```javascript // វិធីសាស្ត្រដែលមានសុវត្ថិភាព និងទុកចិត្តបានសម្រាប់ការអាប់ដេតអត្ថបទ const balanceElement = document.getElementById('balance'); balanceElement.textContent = account.balance; ``` **អត្ថប្រយោជន៍ textContent:** - គ្រប់យ៉ាងត្រូវបានចាត់ទុកជាអត្ថបទធម្មតា (មិនអនុញ្ញាតឲ្យបញ្ជារូបមន្ត) - សម្អាតមាតិកាទាំងអស់ដែលមានស្រាប់យ៉ាងស្វ័យប្រវត្តិ - ប្រសិទ្ធភាពសម្រាប់បំលែងអត្ថបទសាមញ្ញ - ផ្តល់សុវត្ថិភាពបញ្ឆិតបញ្ឆាយពីមាតិកាអាក្រក់ #### បង្កើតធាតុកាន់តែថ្មើរជីវិតបានល្អ សម្រាប់មាតិកាស្មុគស្មាញច្រើន, ភ្ជាប់ [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) ជាមួយវិធីសាស្រ្ត [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append): ```javascript // វិធីសុវត្ថិភាពក្នុងការបង្កើតធាតុថ្មី const transactionItem = document.createElement('div'); transactionItem.className = 'transaction-item'; transactionItem.textContent = `${transaction.date}: ${transaction.description}`; container.append(transactionItem); ``` **ការយល់ដឹងពីវិធីនេះ:** - **បង្កើត**ធាតុនៅ DOM ថ្មីៗដោយកម្មវិធី - **គ្រប់គ្រង**លក្ខណៈនិងមាតិការបស់ធាតុពេញលេញ - **អនុញ្ញាត**សម្រាប់រចនាសម្ព័ន្ធធាតុខ្សែពោលកាន់តែស្មុគស្មាញ - **រក្សា**សុវត្ថិភាពដោយបំបែករចនា និងមាតិកា > ⚠️ **ការពិចារណាសុវត្ថិភាព**: ទោះបីជា [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) បង្ហាញនៅក្នុងមេរៀនជាច្រើនក៏ដោយ វាអាចបើកបន្ទប់អនុវត្តកម្មវិធីផ្សេងទៀតបាន។ ដូចការពារសុវត្ថិភាពនៅ CERN ដែលទប់ស្កាត់កូដមិនមានសិទ្ធអនុវត្ត, ការប្រើប្រាស់ `textContent` និង `createElement` ផ្តល់ជម្រើសសុវត្ថិភាពជាងនេះ។ > **ហានិភ័យ innerHTML:** - ប្រតិបត្តិ `