|
|
# បង្កើតកម្មវិធីធនាគារផ្នែក 1៖ គំរូ HTML និងផ្លូវចូលក្នុងកម្មវិធីវែប
|
|
|
|
|
|
```mermaid
|
|
|
journey
|
|
|
title ជីវនិទ្យាការអភិវឌ្ឍកម្មវិធីធនាគាររបស់អ្នក
|
|
|
section មូលដ្ឋាន SPA
|
|
|
យល់ដឹងអំពីកម្មវិធីទំព័រតែមួយ: 3: Student
|
|
|
រៀនគំនិតសាច់រឿង: 4: Student
|
|
|
ជំនាញគ្រប់គ្រង DOM: 4: Student
|
|
|
section ប្រព័ន្ធផ្លូវ
|
|
|
អនុវត្តផ្លូវភាគីអតិថិជន: 4: Student
|
|
|
គ្រប់គ្រងប្រវត្តិកម្មវិធីរុករក: 5: Student
|
|
|
បង្កើតប្រព័ន្ធនាវាដឹកជញ្ជូន: 5: Student
|
|
|
section លំនាំវិជ្ជាជីវៈ
|
|
|
សាងសង់រចនាសម្ព័ន្ធម៉ូឌុល: 5: Student
|
|
|
ប្រើប្រាស់លំនាំល្អបំផុត: 5: Student
|
|
|
បង្កើតបទពិសោធន៍អ្នកប្រើ: 5: Student
|
|
|
```
|
|
|
នៅពេលកុំព្យូទ័រណែនាំ Apollo 11 មួយដល់ខែពីរឆ្នាំ 1969 វាត្រូវតែប្ដូរវ៉ិចនិយោបាយរវាងកម្មវិធីនានា ដោយគ្មានការចាប់ផ្ដើមចុះវិញពេញលេញទាំងអស់។ កម្មវិធីវែបទំនើបធ្វើដូច្នោះដែរ – ពួកវាប្ដូរអ្វីដែលអ្នកត្រូវឃើញ ដោយគ្មានការប្រលោមទាំងអស់ពីដើមឡើងវិញ។ នេះបង្កើតបទពិសោធន៍រលូន និងឆាប់រហ័សដែលអ្នកប្រើបានរំពឹងទុកថ្ងៃនេះ។
|
|
|
|
|
|
ខុសពីគេហទំព័របែបបែបផែនត្រៀមដែលបញ្ចូលទំព័រទាំងមូលឡើងវិញសម្រាប់ការប្រឹងប្រែងណាមួយ កម្មវិធីវែបទំនើបធ្វើបច្ចុប្បន្នភាពតែនៅផ្នែកដែលត្រូវបានប្ដូរតែប៉ុណ្ណោះ។ វិធីសាស្ត្រនេះ ដូចជា ការត្រួតត្រាចល័តផ្សេងៗដែលត្រូវធ្វើតាមគ្នា ខណៈរក្សាការទំនាក់ទំនងជាបន្តបន្ទាប់បង្កើតបទពិសោធន៍រលូនដែលយើងបានរំពឹងទុក។
|
|
|
|
|
|
នេះគឺជាអ្វីដែលធ្វើឲ្យមានភាពខុសគ្នាដ៏តានតឹង៖
|
|
|
|
|
|
| កម្មវិធីមួយរូបភាពច្រើនផ្នែកបែបប្រពៃណី | កម្មវិធីមួយរូបភាពផ្នែកតែមួយទំនើប |
|
|
|
|----------------------------|-------------------------|
|
|
|
| **ការរុករក** | រុករកទំព័រពេញលេញសម្រាប់មួយអេក្រង់ | ប្ដូរប្លុកមាតិកាឲ្យរហ័ស |
|
|
|
| **កម្រិតកំណត់ប្រតិបត្តិការ** | យឺតព្រោះទាញយក HTML ពេញលេញ | លឿនជាមួយកំណត់ការបច្ចុប្បន្នភាពខ្នាតតូច |
|
|
|
| **បទពិសោធន៍អ្នកប្រើ** | ភ្លេចភ្លាមពេញទំព័រ | លឿន ដូចកម្មវិធីបែបអេប |
|
|
|
| **ការចែករំលែកទិន្នន័យ** | ពិបាករវាងទំព័រ | ចឹងយ៉ាងងាយស្រួលក្នុងការគ្រប់គ្រងស្ថានភាព |
|
|
|
| **ការអភិវឌ្ឍន៍** | មានឯកសារ HTML ច្រើនត្រូវថែទាំ | HTML តែមួយជាមួយគំរូដូរប្រែ δυναμικά |
|
|
|
|
|
|
**ការយល់ដឹងអំពីការវិវត្ត:**
|
|
|
- **កម្មវិធីប្រពៃណី** ត្រូវការសំណើរសមាដេចរៀងរាល់ការរុករក
|
|
|
- **កម្មវិធី SPA ទំនើប** ត្រូវបានផ្ទុកមួយដងហើយធ្វើបច្ចុប្បន្នភាពច្រើនៗដោយប្រើ JavaScript
|
|
|
- **ការរំពឹងទុកអ្នកប្រើ** ពេញចិត្តនឹងការប្រែប្រួលរហ័ស និងរលូន
|
|
|
- **អត្ថប្រយោជន៍ប្រតិបត្តិការ** រួមមានការកាត់បន្ថយចម្លងទិន្នន័យ និងការឆ្លើយតបលឿនជាងមុន
|
|
|
|
|
|
នៅក្នុងមេរៀននេះ យើងនឹងបង្កើតកម្មវិធីធនាគារដែលមានអេក្រង់ច្រើនដែលរលូននៅក្នុងភាពបន្តបន្ទាប់។ ដូចជាវិទ្យាសាស្ត្រករនៃបច្ចេកវិទ្យាអាចប្រើឧបករណ៍មួយដែលអាចប្ដូររចនាឡើងវិញសម្រាប់ការប្រលងផ្សេងៗ យើងនឹងបញ្ចូលគំរូ HTML ដែលអាចប្រើឡើងវិញបាន ដើម្បីបង្ហាញនៅពេលចាំបាច់។
|
|
|
|
|
|
អ្នកនឹងធ្វើការជាមួយគំរូ HTML (គំរូដែលអាចប្រើឡើងវិញសម្រាប់អេក្រង់ផ្សេងៗ), របៀបនៃការប្រែផ្លូវបញ្ជា JavaScript (ប្រព័ន្ធដែលប្ដូរវ៉ិចនិយោបាយរវាងអេក្រង់), និងប្រវត្តិ API របស់កម្មវិធីរុករក (ដែលរក្សាប៊ូតុងត្រឡប់ត្រលប់ដូចដែលបានរំពឹងទុក)។ វាជាបច្ចេកទេសមូលដ្ឋានដដែលដែលគេប្រើនៅក្នុងស៊ុម React, Vue និង Angular។
|
|
|
|
|
|
នៅចុងក្រោយ អ្នកនឹងមានកម្មវិធីធនាគារដំណើរការដែលបង្ហាញគ្រឹះតំណាងនៃកម្មវិធីមួយរូបភាពបែបផ្នែកតែមួយមានវិជ្ជាជីវៈ។
|
|
|
|
|
|
```mermaid
|
|
|
mindmap
|
|
|
root((កម្មវិធីទំព័រតែមួយ))
|
|
|
Architecture
|
|
|
ប្រព័ន្ធគំរូ
|
|
|
ការផ្លូវចរាចរមុខអតិថិជន
|
|
|
ការគ្រប់គ្រងស្ថានភាព
|
|
|
ការដោះស្រាយព្រឹត្តិការណ៍
|
|
|
Templates
|
|
|
សមាសភាពដែលអាចប្រើប្រាស់ឡើងវិញ
|
|
|
មាតិកាបំលែង
|
|
|
ការគ្រប់គ្រង DOM
|
|
|
ការប្តូរមាតិកា
|
|
|
Routing
|
|
|
ការគ្រប់គ្រង URL
|
|
|
ប្រវត្តិ API
|
|
|
ចលនាផ្លូវចរាចរ
|
|
|
ការរួមបញ្ចូលកម្មវិធីរុករក
|
|
|
User Experience
|
|
|
ការផ្លូវចរាចរលឿន
|
|
|
ការផ្ទេរយ៉ាងរលូន
|
|
|
ស្ថានភាពឋិតថេរ
|
|
|
ការបញ្ចូលទំនាក់ទំនងទំនើប
|
|
|
Performance
|
|
|
ការស្នើសុំម៉ាស៊ីនបម្រើកាត់បន្ថយ
|
|
|
ការផ្ទេរទំព័រយ៉ាងរហ័ស
|
|
|
ការប្រើប្រាស់ធនធានមានប្រសិទ្ធិភាព
|
|
|
ការឆ្លើយតបល្អប្រសើរ
|
|
|
```
|
|
|
## សំណួរប្រលងមុនមេរៀន
|
|
|
|
|
|
[សំណួរប្រលងមុនមេរៀន](https://ff-quizzes.netlify.app/web/quiz/41)
|
|
|
|
|
|
### អ្វីដែលអ្នកត្រូវការជាមុន
|
|
|
|
|
|
យើងត្រូវការសេវាកម្មវែបមួយក្នុងតំបន់បណ្តាញដើម្បីពិនិត្យកម្មវិធីធនាគារយើង – កុំបារម្ភ វាងាយជាងចិត្ត! ប្រសិនបើអ្នកមិនមានសេវាកម្មមួយនៅលើឧបករណ៍របស់អ្នកទេ ចូរតម្លើង [Node.js](https://nodejs.org) ហើយបញ្ជូល `npx lite-server` ពីថតគម្រោងរបស់អ្នក។ ពាក្យបញ្ជានេះនឹងបើកសេវាកម្មវែបមួយនៅក្នុងតំបន់បណ្តាញភ្លាម និងបើកកម្មវិធីរបស់អ្នកនៅក្នុងកម្មវិធីរុករកដោយស្វ័យប្រវត្តិ។
|
|
|
|
|
|
### ការរៀបចំ
|
|
|
|
|
|
លើកុំព្យូទ័ររបស់អ្នក បង្កើតថតឈ្មោះ `bank` ដែលមានឯកសារមួយឈ្មោះ `index.html` នៅខាងក្នុង។ យើងនឹងចាប់ផ្តើមពី [HTML boilerplate](https://en.wikipedia.org/wiki/Boilerplate_code) នេះ៖
|
|
|
|
|
|
```html
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Bank App</title>
|
|
|
</head>
|
|
|
<body>
|
|
|
<!-- This is where you'll work -->
|
|
|
</body>
|
|
|
</html>
|
|
|
```
|
|
|
|
|
|
**នេះជាអ្វីដែល boilerplate នេះផ្តល់:**
|
|
|
- **បង្កើត** រចនាសម្ព័ន្ធឯកសារ HTML5 ជាមួយការប្រកាស DOCTYPE ត្រឹមត្រូវ
|
|
|
- **កំណត់** ការបញ្ចូលតួអក្សរជា UTF-8 ដើម្បីគាំទ្រអត្ថបទអន្តរជាតិ
|
|
|
- **អនុញ្ញាត** ការរចនារហ័ស តាមម៉ែតាប៉ារាមែត្រ viewport សម្រាប់ដំណើរការលើទូរស័ព្ទចល័ត
|
|
|
- **កំណត់** ចំណងជើងដ៏អស្ចារ្យាចេញនៅលើប៊ុតបរកម្មវិធីរុករក
|
|
|
- **បង្កើត** ភាគរយសុទ្ធស្អាតដែលយើងនឹងបង្កើតកម្មវិធី
|
|
|
|
|
|
> 📁 **មើលរចនាសម្ព័ន្ធគម្រោងជាមុន**
|
|
|
>
|
|
|
> **នៅចុងមេរៀននេះ គម្រោងរបស់អ្នកនឹងមាន៖**
|
|
|
> ```
|
|
|
> bank/
|
|
|
> ├── index.html <!-- Main HTML with templates -->
|
|
|
> ├── app.js <!-- Routing and navigation logic -->
|
|
|
> └── style.css <!-- (Optional for future lessons) -->
|
|
|
> ```
|
|
|
>
|
|
|
> **ពីការទទួលខុសត្រូវឯកសារ៖**
|
|
|
> - **index.html**: មានគំរូទាំងអស់ និងផ្តល់រចនាសម្ព័ន្ធកម្មវិធី
|
|
|
> - **app.js**: គ្រប់គ្រងផ្លូវចូល, រុករក និងការគ្រប់គ្រងគំរូ
|
|
|
> - **Templates**: កំណត់ UI សម្រាប់ការចូល, ការគ្រប់គ្រងផ្ទាំង និងអេក្រង់ផ្សេងៗ
|
|
|
|
|
|
---
|
|
|
|
|
|
## គំរូ HTML
|
|
|
|
|
|
គំរូជួយដោះស្រាយបញ្ហាមូលដ្ឋានមួយក្នុងការអភិវឌ្ឍកម្មវិធីវែប។ ពេលដែល Gutenberg បង្កើតម៉ាស៊ីនបោះពុម្ពអក្សរដាច់ខ្សែរប្រមាណឆ្នាំ 1440 គាត់បានដឹងថា ជំនួសការគូរទំព័រទាំងមូល អាចបង្កើតអក្សរដែលអាចប្រើឡើងវិញ ហើយចំលងវាបានតាមតម្រូវការ។ គំរូ HTML ក៏ដូចគ្នា បែបផែនថា ជំនួសការបង្កើតឯកសារ HTML ផ្សេងៗសម្រាប់អេក្រង់នីមួយៗ អ្នកកំណត់រចនាសម្ព័ន្ធដែលអាចប្រើឡើងវិញ ដើម្បីបង្ហាញនៅពេលចាំបាច់។
|
|
|
|
|
|
```mermaid
|
|
|
flowchart TD
|
|
|
A["📋 ការកំណត់គំរូ"] --> B["💬 លាក់នៅក្នុង DOM"]
|
|
|
B --> C["🔍 JavaScript ស្វែងរកគំរូ"]
|
|
|
C --> D["📋 លៃតម្រូវមាតិកាគំរូ"]
|
|
|
D --> E["🔗 ចងជាមួយ DOM មើលឃើញ"]
|
|
|
E --> F["👁️ អ្នកប្រើឃើញមាតិកា"]
|
|
|
|
|
|
G["គំរូចូល" ] --> A
|
|
|
H["គំរូផ្ទាំងគ្រប់គ្រង"] --> A
|
|
|
I["គំរូអនាគត"] --> A
|
|
|
|
|
|
style A fill:#e3f2fd
|
|
|
style D fill:#e8f5e8
|
|
|
style F fill:#fff3e0
|
|
|
style B fill:#f3e5f5
|
|
|
```
|
|
|
គិតគំរូជា គំនូសផែនសម្រាប់ផ្នែកផ្សេងៗនៃកម្មវិធីរបស់អ្នក។ ដូចជា សំណង់ស្ថាបត្យករបង្កើតគំនូសមួយ ហើយប្រើវាច្រើនលើជាន់ជាន់ជាងគូរថ្មីវិញបន្ទប់ដូចគ្នា យើងបង្កើតគំរូមួយផ្តើមហើយធ្វើចម្លងរបស់វាចំឡើងពេលត្រូវការ។ កម្មវិធីរុករករក្សាគំរូទាំងនេះលាក់តuntil JavaScript បើកវា។
|
|
|
|
|
|
ប្រសិនបើអ្នកចង់បង្កើតអេក្រង់ច្រើនសម្រាប់គេហទំព័រ មួយវិធីដោះស្រាយគឺបង្កើតឯកសារ HTML ផ្សេងៗមួយសម្រាប់អេក្រង់នីមួយៗដែលអ្នកចង់បង្ហាញ។ ទៅតាមវិធីនេះអាចមានរាំងស្ទះមួយចំនួន៖
|
|
|
|
|
|
- អ្នកត្រូវធ្វើការផ្ទុក HTML ពេញលេញឡើងវិញពេលប្ដូរអេក្រង់ ដែលអាចយឺតបាន។
|
|
|
- ពិបាកក្នុងការចែករំលែកទិន្នន័យរវាងអេក្រង់ផ្សេងៗ។
|
|
|
|
|
|
វិធីផ្សេងទៀតគឺ មានតែឯកសារ HTML មួយប៉ុណ្ណោះ ហើយកំណត់គំរូ HTML ច្រើន [HTML templates](https://developer.mozilla.org/docs/Web/HTML/Element/template) ដោយប្រើធាតុ `<template>`។ គំរូគឺជាស្លាក HTML ដែលអាចប្រើឡើងវិញមួយដែលមិនបង្ហាញដោយកម្មវិធីរុករក ហើយត្រូវការចម្លងយកពេលដំណើរការ ដោយប្រើ JavaScript។
|
|
|
|
|
|
### យើងចាប់ផ្តើមបង្កើតវា
|
|
|
|
|
|
យើងនឹងបង្កើតកម្មវិធីធនាគារមានអេក្រង់ពីរមុខ៖ ទំព័រចូល និងផ្ទាំងគ្រប់គ្រង។ ជាដំបូង យើងចូលចិត្តបញ្ចូលធាតុលន្លងនៅក្នុងសាច់រាងរបស់ HTML – នេះជាកន្លែងដែលអេក្រង់ផ្សេងៗរបស់យើងនឹងបង្ហាញ៖
|
|
|
|
|
|
```html
|
|
|
<div id="app">Loading...</div>
|
|
|
```
|
|
|
|
|
|
**យល់ដឹងអំពីធាតុលន្លងនេះ៖**
|
|
|
- **បង្កើត** គុងតឺន័រដែលមាន ID "app" សម្រាប់បង្ហាញអេក្រង់ទាំងអស់
|
|
|
- **បង្ហាញ** សារកំពុងផ្ទុករហូត JavaScript ចាប់ផ្តើមអេក្រង់ដំបូង
|
|
|
- **ផ្តល់** ចំណុចភ្ជាប់មួយសម្រាប់មាតិកា δυναμικά
|
|
|
- **អនុញ្ញាត** ការគោលដៅងាយស្រួលពី JavaScript ដោយប្រើ `document.getElementById()`
|
|
|
|
|
|
> 💡 **ឆ្លើយតបឯកទេស**៖ ព្រោះមាតិកានៃធាតុនេះនឹងត្រូវបានប្ដូរទៅវិញទៅមក អ្នកអាចដាក់សារកំពុងផ្ទុក ឬសញ្ញាបត្រ បង្ហាញពេលកម្មវិធីកំពុងផ្ទុក។
|
|
|
|
|
|
បន្ទាប់មក បន្ថែមគំរូ HTML ខាងក្រោមសម្រាប់ទំព័រចូល។ សព្វថ្ងៃ យើងកែតម្រូវតែដាក់ក្នុងនេះគឺចំណងជើង និងផ្នែកមួយមានតំណភ្ជាប់ដែលយើងនឹងប្រើសម្រាប់រុករក។
|
|
|
|
|
|
```html
|
|
|
<template id="login">
|
|
|
<h1>Bank App</h1>
|
|
|
<section>
|
|
|
<a href="/dashboard">Login</a>
|
|
|
</section>
|
|
|
</template>
|
|
|
```
|
|
|
|
|
|
**បំណែកបំបែកនៃគំរូចូលនេះ៖**
|
|
|
- **កំណត់** គំរូជាមួយអត្តសញ្ញាណពិសេស "login" សម្រាប់គោលដៅ JavaScript
|
|
|
- **រួមបញ្ចូល** ចំណងជើងសំខាន់ដែលបញ្ជាក់ម៉ាកកម្មវិធី
|
|
|
- **មាន** ធាតុ `<section>` ដែលមានលក្ខណៈសម្របសម្រួលដាក់ក្រុមមាតិកាមួយជាមួយគ្នា
|
|
|
- **ផ្តល់** តំណររុករកដែលនាំវ käyttäjeros dashboard
|
|
|
|
|
|
បន្ទាប់មកបន្ថែមគំរូ HTML មួយទៀតសម្រាប់ទំព័រផ្ទាំងគ្រប់គ្រង។ ទំព័រនេះមានផ្នែកខុសៗគ្នា៖
|
|
|
|
|
|
- ក្បាលទំព័រមានចំណងជើង និងតំណចុះចេញ
|
|
|
- ចំនួនបំណុលបច្ចុប្បន្ននៅក្នុងគណនីធនាគារ
|
|
|
- បញ្ជីប្រតិបត្តិការក្នុងតារាង
|
|
|
|
|
|
```html
|
|
|
<template id="dashboard">
|
|
|
<header>
|
|
|
<h1>Bank App</h1>
|
|
|
<a href="/login">Logout</a>
|
|
|
</header>
|
|
|
<section>
|
|
|
Balance: 100$
|
|
|
</section>
|
|
|
<section>
|
|
|
<h2>Transactions</h2>
|
|
|
<table>
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th>Date</th>
|
|
|
<th>Object</th>
|
|
|
<th>Amount</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody></tbody>
|
|
|
</table>
|
|
|
</section>
|
|
|
</template>
|
|
|
```
|
|
|
|
|
|
**យល់ពីបំណែកនីមួយៗនៃផ្ទាំងគ្រប់គ្រងនេះ៖**
|
|
|
- **រៀបចំ** ទំព័រដោយធាតុ `<header>` ដែលមានរុករក
|
|
|
- **បង្ហាញ** ចំណងជើងកម្មវិធីសម្រាប់ការតម្កល់ម៉ាកទាំងអេក្រង់
|
|
|
- **ផ្តល់** តំណចុះចេញដែលបញ្ជូនត្រលប់ទៅទំព័រចូល
|
|
|
- **បង្ហាញ** តុល្យភាពគណនីបច្ចុប្បន្ននៅក្នុងផ្នែកមួយឯករាជ្យ
|
|
|
- **រៀបចំ** ទិន្នន័យប្រតិបត្តិរូបភាពក្នុងតារាងត្រឹមត្រូវ
|
|
|
- **កំណត់** ប្រធានតារាងសម្រាប់កាលបរិច្ឆេទ វត្ថុ និងចំនួន
|
|
|
- **ទុក** ខ្លឹមសារតារាងទទេសម្រាប់ការចាក់បញ្ចូលមាតិកា δυναμικά
|
|
|
|
|
|
> 💡 **ឆ្លើយតបឯកទេស**៖ ពេលបង្កើតគំរូ HTML ប្រសិនបើអ្នកចង់មើលវាដូចម្តេច អ្នកអាចធ្វើខ្សែស្រឡាយ `<template>` និង `</template>` ដោយដាក់ពាក្យចំរូង `<!-- -->` ស៊ុមបង្ហើប។
|
|
|
|
|
|
### 🔄 **ការត្រួតពិនិត្យវគ្គសិក្សា**
|
|
|
**ការយល់ដឹងប្រព័ន្ធគំរូ**៖ មុនបញ្ជូន JavaScript សូមដឹងថាៈ
|
|
|
- ✅ តើគំរូខុសពីធាតុ HTML មុនគេយ៉ាងដូចម្តេច
|
|
|
- ✅ ហេតុអ្វីបានជា គំរូនៅស្រដៀងជាសម្ងាត់ រហូត JavaScript បើកវា
|
|
|
- ✅ សារៈសំខាន់នៃរចនាសម្ព័ន្ធ HTML សម្របសម្រួលនៅក្នុងគំរូ
|
|
|
- ✅ របៀបដែលគំរូអនុញ្ញាតឲ្យមាន UI អាចប្រើឡើងវិញ
|
|
|
|
|
|
**ការប្រលងផ្ទាល់ខ្លួនរហ័ស**៖ តើមានអ្វីកើតឡើង ប្រសិនបើអ្នកដកស្លាក `<template>` ចេញពី HTML របស់អ្នក?
|
|
|
*ចម្លើយ៖ មាតិកានឹងបង្ហាញភ្លាមរាល់ពេល ហើយបាត់បង់មុខងារគំរូ*
|
|
|
|
|
|
**អត្ថប្រយោជន៍រចនាសម្ព័ន្ធ**៖ គំរូផ្តល់៖
|
|
|
- **អាចប្រើឡើងវិញ**: កំណត់តែមួយ មួយចំនួនពេល
|
|
|
- **ប្រតិបត្តិការ**: មិនចាំបាច់បកសម្លេង HTML ម្តងទៀត
|
|
|
- **ថែរក្សា**: រចនាសម្ព័ន្ធ UI កណ្តាល
|
|
|
- **បត់បែន**: ប្ដូរមាតិការងាយឆាប់
|
|
|
|
|
|
✅ តើហេតុអ្វីដែលយើងប្រើអត្តសញ្ញាណ `id` លើគំរូ? តើយើងអាចប្រើអ្វីមួយផ្សេងទៀតដូចជា ចំណាត់ថ្នាក់បានទេ?
|
|
|
|
|
|
## បង្កើតជីវិតទៅកាន់គំរូជាមួយ JavaScript
|
|
|
|
|
|
ឥឡូវនេះយើងត្រូវធ្វើឱ្យគំរូរបស់យើងមានមុខងារ។ ដូចជា ម៉ាស៊ីនបោះព្រីន 3D យកគំនូសផែនវិទ្យុវិទ្យាតំលៃ និងបង្កើតវត្ថុគាប់ភ្លឺ JavaScript ផ្តល់ជូនគំរូដែលលាក់ស្រដៀង ហើយបង្កើតធាតុដែលអ្នកប្រើអាចមើលឃើញ និងអាចប្រើប្រាស់បាន។
|
|
|
|
|
|
ដំណើរការនេះតាមដំណាក់កាលបី ដែលជាគ្រឹះសម្រាប់ការអភិវឌ្ឍវែបទំនើប។ ម៉ោងអ្នកយល់ពីលំនាំនេះ អ្នកនឹងស្គាល់វា នៅក្នុងស៊ុមនិងបណ្ណាល័យជាច្រើន។
|
|
|
|
|
|
បើអ្នកសាកល្បងឯកសារ HTML បច្ចុប្បន្នរបស់អ្នកនៅក្នុងកម្មវិធីរុករក អ្នកនឹងឃើញវាចាប់ផ្ដើមបង្ហាញ `Loading...`។ នេះវាយថាយើងត្រូវបន្ថែមកូដ JavaScript ដើម្បីចម្លង និងបង្ហាញគំរូ HTML។
|
|
|
|
|
|
ការចម្លងគំរូជាទូទៅធ្វើឡើងក្នុង៣ជំហាន៖
|
|
|
|
|
|
1. រកធាតុគំរូក្នុង DOM ដោយប្រើ ឧទាហរណ៍ [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById)
|
|
|
2. ចម្លងគំរូដោយប្រើ [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode)
|
|
|
3. បន្ថែមវាជាមួយ DOM ក្រោមធាតុមួយដែលអាចមើលឃើញ ដោយប្រើ [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild)
|
|
|
|
|
|
```mermaid
|
|
|
flowchart TD
|
|
|
A[🔍 ជំហាន ១៖ រកពុម្ព] --> B[📋 ជំហាន ២៖ ចម្លងពុម្ព]
|
|
|
B --> C[🔗 ជំហាន ៣៖ ភ្ជាប់ទៅ DOM]
|
|
|
|
|
|
A1["document.getElementById('login')"] --> A
|
|
|
B1["template.content.cloneNode(true)"] --> B
|
|
|
C1["app.appendChild(view)"] --> C
|
|
|
|
|
|
C --> D[👁️ ពុម្ពមើលឃើញដោយអ្នកប្រើ]
|
|
|
|
|
|
style A fill:#e1f5fe
|
|
|
style B fill:#f3e5f5
|
|
|
style C fill:#e8f5e8
|
|
|
style D fill:#fff3e0
|
|
|
```
|
|
|
**បំណែកបង្ហាញនៃដំណើរការ៖**
|
|
|
- **ជំហាន 1** ស្វែងរកគំរូដែលលាក់ក្នុងរចនាសម្ព័ន្ធ DOM
|
|
|
- **ជំហាន 2** បង្កើតចម្លងដែលអាចកែប្រែបានយ៉ាងមានសុវត្ថិភាព
|
|
|
- **ជំហាន 3** ដាក់ចម្លងទៅក្នុងតំបន់ដែលអាចមើលឃើញបាននៅលើទំព័រ
|
|
|
- **លទ្ធផល** គឺអេក្រង់ដែលមានមុខងារដើម្បីអ្នកប្រើអាចមានការប្រាស្រ័យទាក់ទង
|
|
|
|
|
|
✅ ហេតុអ្វីត្រូវតែចម្លងគំរូមុនពេលបន្ថែមវាទៅក្នុង DOM? តើអ្នកគិតថាអ្វីគឺកើតឡើង ប្រសិនបើយើងរំលងជំហាននេះ?
|
|
|
|
|
|
### ភារកិច្ច
|
|
|
|
|
|
បង្កើតឯកសារថ្មីមួយឈ្មោះ `app.js` ក្នុងថតគម្រោងរបស់អ្នក ហើយទាញយកឯកសារនេះចូលក្នុងផ្នែក `<head>` នៃ HTML របស់អ្នក៖
|
|
|
|
|
|
```html
|
|
|
<script src="app.js" defer></script>
|
|
|
```
|
|
|
|
|
|
**យល់ពីការនាំចូលកូដស្គ្រីបនេះ៖**
|
|
|
- **ភ្ជាប់** ឯកសារ JavaScript ទៅឯកសារ HTML របស់យើង
|
|
|
- **ប្រើ** attribute `defer` ដើម្បីធានាថាស្គ្រីបរត់បន្ទាប់ពី HTML បានបកសំលេងរួចរាល់
|
|
|
- **អនុញ្ញាត** ចូលប្រើធាតុ DOM ទាំងអស់ ពីព្រោះវាត្រូវបានផ្ទុកពេញលេញមុនវាលូតមុខងារ JavaScript
|
|
|
- **បានតាម** អនុរក្សលំនាំដ៏មានប្រសិទ្ធភាពនៅក្នុងការផ្ទុកស្គ្រីប និងបង្កើនប្រសិទ្ធភាព
|
|
|
|
|
|
ឥឡូវនេះនៅក្នុង `app.js` យើងនឹងបង្កើតមុខងារ `updateRoute` ថ្មីមួយ៖
|
|
|
|
|
|
```js
|
|
|
function updateRoute(templateId) {
|
|
|
const template = document.getElementById(templateId);
|
|
|
const view = template.content.cloneNode(true);
|
|
|
const app = document.getElementById('app');
|
|
|
app.innerHTML = '';
|
|
|
app.appendChild(view);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**ជំហានលំដាប់ តើព្រឹត្តិការណ៍អ្វីកំពុងកើតឡើង៖**
|
|
|
- **ស្វែងរក** ធាតុខំរូ តាម ID ជាពិសេសរបស់វា
|
|
|
- **បង្កើត** ចម្លងជម្រៅនៃមាតិកាគំរូ ដោយប្រើ `cloneNode(true)`
|
|
|
- **ស្វែងរក** ឧបករណ៍ app ដែលជាគុងតឺន័រមួយដែលនឹងបង្ហាញមាតិកា
|
|
|
- **សម្អាត** មាតិកា ដែលស្ថិតនៅក្នុង app ដើម្បីរៀបចំជំនួស
|
|
|
- **ដាក់បញ្ចូល** មាតិកាទីពារបានចម្លងចូលក្នុង DOM ដែលអាចមើលឃើញបាន
|
|
|
|
|
|
ឥឡូវចង់ហៅមុខងារនេះជាមួយគំរូមួយ និងមើលលទ្ធផល។
|
|
|
|
|
|
```js
|
|
|
updateRoute('login');
|
|
|
```
|
|
|
|
|
|
**អ្វីដែលការហៅមុខងារនេះធ្វើបាន៖**
|
|
|
- **បើក** គំរូចូល ដោយផ្ញើ ID របស់វាជាប៉ារ៉ាម៉ែត្រ
|
|
|
- **បង្ហាញ** របៀបចម្លងអេក្រង់ដោយកម្មវិធី រវាងអេក្រង់ផ្សេងៗ
|
|
|
- **បង្ហាញ** ទំព័រចូលជំនួសសារកំពុងផ្ទុក "Loading..."
|
|
|
|
|
|
✅ តើគោលបំណងនៃកូដនេះ `app.innerHTML = '';` គឺអ្វី? តើមានអ្វីកើតឡើងដោយគ្មានវា?
|
|
|
|
|
|
## បង្កើតផ្លូវចូល (Routes)
|
|
|
|
|
|
ផ្លូវចូលគឺជាការតភ្ជាប់ URL ទៅមាតិការងារសមរម្យ។ សូមយកគំរូពីអ្នកបញ្ជូនទូរស័ព្ទបដិសណ្ឋារក្នុងសម័យដើម ដែលតភ្ជាប់សំណើរ និងផ្លូវច្រកអោយត្រឹមត្រូវ។ ការប្រតិបត្តិផ្លូវចូលវែបដើរដូចគ្នា បញ្ជាក់សំណើរ URL មួយ ហើយកំណត់មាតិកាដែលត្រូវបង្ហាញ។
|
|
|
|
|
|
```mermaid
|
|
|
flowchart LR
|
|
|
A["🌐 ផ្លូវ URL<br/>/dashboard"] --> B["🗺️ វត្ថុផ្លូវ<br/>ស្វែងរក"]
|
|
|
B --> C["🎯 លេខសម្គាល់គំរូ<br/>'dashboard'"]
|
|
|
C --> D["📌 រកគំរូ<br/>getElementById"]
|
|
|
D --> E["👁️ បង្ហាញអេក្រង់<br/>ចម្លង & បន្ថែម"]
|
|
|
|
|
|
F["📍 /login"] --> G["🎯 'login'"]
|
|
|
H["📍 /unknown"] --> I["❌ មិនបានឃើញ"]
|
|
|
I --> J["🔄 បញ្ជូនបន្តទៅ /login"]
|
|
|
|
|
|
style B fill:#e3f2fd
|
|
|
style E fill:#e8f5e8
|
|
|
style I fill:#ffebee
|
|
|
style J fill:#fff3e0
|
|
|
```
|
|
|
តាមប្រពៃណី អ្នកផ្គត់ផ្គង់សេវាកម្មវែបបម្រើឯកសារ HTML ផ្សេងៗសម្រាប់ URL ផ្សេងៗ។ ពីព្រោះយើងកំពុងបង្កើតកម្មវិធីមួយរូបភាព បែបផ្នែកតែមួយ យើងត្រូវគ្រប់គ្រងផ្លូវចូលដោយខ្លួនឯងជាមួយ JavaScript។ វិធីនេះផ្តល់ឱ្យយើងនូវការគ្រប់គ្រងកាន់តែច្រើនលើបទពិសោធន៍អ្នកប្រើ និងប្រតិបត្តិការ។
|
|
|
|
|
|
```mermaid
|
|
|
flowchart LR
|
|
|
A["🌐 ផ្លូវ URL<br/>/dashboard"] --> B["🗺️ វត្ថុផ្លូវ<br/>ស្វែងរក"]
|
|
|
B --> C["🎯 លេខសម្គាល់ទំព័រ<br/>'dashboard'"]
|
|
|
C --> D["📄 រកមើលទំព័រ<br/>getElementById"]
|
|
|
D --> E["👁️ បង្ហាញអេក្រង់<br/>ចម្លង & បន្ថែម"]
|
|
|
|
|
|
F["📍 /login"] --> G["🎯 'login'"]
|
|
|
H["📍 /unknown"] --> I["❌ មិនបានឃើញ"]
|
|
|
I --> J["🔄 បញ្ជូនទៅ /login"]
|
|
|
|
|
|
style B fill:#e3f2fd
|
|
|
style E fill:#e8f5e8
|
|
|
style I fill:#ffebee
|
|
|
style J fill:#fff3e0
|
|
|
```
|
|
|
**យល់ពីលំហាត់ផ្លូវចូល៖**
|
|
|
- **ការផ្លាស់ប្ដូរ URL** ធ្វើឲ្យមានការស្វែងរកផ្លូវចូលក្នុងការកំណត់របស់យើង
|
|
|
- **ផ្លូវដែលត្រឹមត្រូវ** ផ្គូផ្គងជាមួយ ID គំរូសម្រាប់បង្ហាញ
|
|
|
- **ផ្លូវខុស** បង្កើតអាកប្បកិរិយាជំនួស ដើម្បីគៀបភាពខូចខាត
|
|
|
- **ការបង្ហាញគំរូ** ត្រូវបានអនុវត្តតាមប៊ិចបីមិនដែលបានរៀនមុននេះ
|
|
|
|
|
|
ពេលនិយាយពីកម្មវិធីវែប យើងហៅ *Routing* ជាចេតនាេក្នុងការតភ្ជាប់ **URLs** ទៅកាន់អេក្រង់ដែលគួរត្រូវបានបង្ហាញ។ នៅលើគេហទំព័រដែលមានឯកសារ HTML ច្រើន វាត្រូវបានធ្វើដោយស្វ័យប្រវត្តិដូចជាម៉ាស៊ីនបម្រើផ្លូវឯកសារ។ ឧទាហរណ៍ ជាមួយឯកសារទាំងនេះនៅក្នុងថតគម្រោងរបស់អ្នក៖
|
|
|
|
|
|
```
|
|
|
mywebsite/index.html
|
|
|
mywebsite/login.html
|
|
|
mywebsite/admin/index.html
|
|
|
```
|
|
|
|
|
|
ប្រសិនបើអ្នកបង្កើតសេវាកម្មវែបជាមួយ `mywebsite` ជា root, ផ្លូវ URL នឹងសម្របទៅប្រភេទនេះ៖
|
|
|
|
|
|
```
|
|
|
https://site.com --> mywebsite/index.html
|
|
|
https://site.com/login.html --> mywebsite/login.html
|
|
|
https://site.com/admin/ --> mywebsite/admin/index.html
|
|
|
```
|
|
|
|
|
|
ប៉ុន្តែសម្រាប់កម្មវិធីវែបរបស់យើងដែលមាន HTML មួយដង មានទំព័រទាំងអស់ក្នុងឯកសារមួយ វិធីសាស្រ្តលំនាំដើមនេះមិនជួយឲ្យគេទេ។ យើងត្រូវបង្កើតផែនទីនេះដោយដៃ ហើយបន្ទាប់មកផ្លាស់ប្ដូរគំរូដែលបង្ហាញជាមួយ JavaScript។
|
|
|
|
|
|
### ភារកិច្ច
|
|
|
|
|
|
យើងនឹងប្រើវត្ថុ សាមញ្ញមួយ ដើម្បីអនុវត្ត [ផែនទី](https://en.wikipedia.org/wiki/Associative_array) រវាងផ្លូវ URL និងគំរូរបស់យើង។ បន្ថែមវត្ថុនេះនៅជំពូកឯកសារ `app.js` របស់អ្នក។
|
|
|
|
|
|
```js
|
|
|
const routes = {
|
|
|
'/login': { templateId: 'login' },
|
|
|
'/dashboard': { templateId: 'dashboard' },
|
|
|
};
|
|
|
```
|
|
|
|
|
|
**ផ្តល់យល់ដឹងអំពីការកំណត់ផ្លូវចូលនេះ៖**
|
|
|
- **កំណត់** ផ្លូវ URL និងអត្តសញ្ញាណគំរូដែលត្រូវបង្ហាញ
|
|
|
- **ប្រើ** សំគាល់វត្ថុដែលkey គឺផ្លូវ URL និងតម្លៃមានព័ត៌មានគំរូ
|
|
|
- **អនុញ្ញាត** ការស្វែងរកយ៉ាងងាយស្រួលថាគំរូណាៗត្រូវបានបង្ហាញសម្រាប់ URL
|
|
|
- **ផ្តល់** រចនាសម្ព័ន្ធដែលអាចពង្រីកបន្ថែមផ្លូវចូលនៅពេលក្រោយបាន
|
|
|
ឥឡូវនេះចូរយើងកែប្រែម៉ិចៗមុខងារ `updateRoute`។ មិនប្រើប្រាស់ការបញ្ជូន `templateId` ដល់ជាអាគុយម៉ង់ផ្ទាល់ទេ កាន់តែយើងចង់យកវាចេញ ដោយស្វែងរកពី URL បច្ចុប្បន្នដំបូង ហើយបន្ទាប់មកប្រើផែនទីរបស់យើងដើម្បីទទួលបានតម្លៃ template ID ត្រូវនោះ។ យើងអាចប្រើ [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) ដើម្បីយកតែផ្នែកផ្លូវពី URL។
|
|
|
|
|
|
```js
|
|
|
function updateRoute() {
|
|
|
const path = window.location.pathname;
|
|
|
const route = routes[path];
|
|
|
|
|
|
const template = document.getElementById(route.templateId);
|
|
|
const view = template.content.cloneNode(true);
|
|
|
const app = document.getElementById('app');
|
|
|
app.innerHTML = '';
|
|
|
app.appendChild(view);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**បែកបាក់អ្វីដែលកើតឡើងនៅទីនេះ៖**
|
|
|
- **ដកយក** ផ្លូវបច្ចុប្បន្នពី URL របស់កម្មវិធីរុករក ដោយប្រើ `window.location.pathname`
|
|
|
- **ស្វែងរក** ការកំណត់ខ្នាតផ្លូវត្រូវគ្នាក្នុងវត្ថុ routes របស់យើង
|
|
|
- **ទាញយក** template ID ពីការកំណត់ខ្នាតផ្លូវ
|
|
|
- **ធ្វើតាម** ប្រមូលផ្ដុំម៉ូដែលបង្ហាញ template ដូចមុន
|
|
|
- **បង្កើត** ប្រព័ន្ធស្មើរដែលឆ្លើយតបនឹងការផ្លាស់ប្តូរ URL
|
|
|
|
|
|
នៅទីនេះយើងបានបង្កើតផែនទីពីផ្លូវដែលយើងបានប្រកាសទៅ template ត្រូវនោះ។ អ្នកអាចសាកល្បងមើលថាវាដំណើរការត្រឹមត្រូវដោយការផ្លាស់ប្តូរ URL ដោយដៃនៅក្នុងកម្មវិធីរុករករបស់អ្នក។
|
|
|
|
|
|
✅ តើមានអ្វីកើតឡើង ប្រសិនបើអ្នកបញ្ចូលផ្លូវមិនស្គាល់ក្នុង URL? តើយើងអាចដោះស្រាយយ៉ាងដូចម្តេច?
|
|
|
|
|
|
## ការបន្ថែមការរុករក
|
|
|
|
|
|
ជាមួយការកំណត់ផ្លូវបានបង្កើតរួចហើយ អ្នកប្រើប្រាស់ត្រូវការប្រភេទមួយសម្រាប់រំកិលក្នុងកម្មវិធី។ គេហទំព័រប្រាំបួនវិធីបោះឬឧបករណ៍មានបច្ចេកទេសឡើងវិញដែលបញ្ចូលទំព័រទាំងមូលពេលចុចតំណភ្ជាប់ ប៉ុន្តាយើងចង់ធ្វើការអាប់ដេតទាំង URL និងមាតិកាប្រើបានដោយគ្មានការបញ្ចូលទំព័រឡើងវិញ។ វានាំឱ្យមានបទពិសោធន៍រលូនដូចជា how កម្មវិធីឆ្នើមលើកុំព្យូទ័របម្លែងរវាងទិដ្ឋភាពខុសៗ។
|
|
|
|
|
|
យើងត្រូវការសម្របសម្រួលរវាងរៀបចំពីររឿងគឺ៖ ការអាប់ដេត URL ហើយអោយអ្នកប្រើអាចដាក់ប៊ុកម៉ារកទំព័រនិងចែករំលែកតំណភ្ជាប់បាន និងបង្ហាញមាតិកាត្រឹមត្រូវ។ នៅពេលអនុវត្តបានត្រឹមត្រូវ វាបង្កើតការរុករករលូនដែលអ្នកប្រើប្រាស់រំពឹងទុកមកពីកម្មវិធីសម័យទំនើប។
|
|
|
|
|
|
```mermaid
|
|
|
sequenceDiagram
|
|
|
participant User
|
|
|
participant Browser
|
|
|
participant App
|
|
|
participant Template
|
|
|
|
|
|
User->>Browser: ចុចតំណរ "ចូលគណនី"
|
|
|
Browser->>App: ព្រឹត្តិការណ៍ onclick ត្រូវបានចាប់ផ្តើម
|
|
|
App->>App: preventDefault() & navigate('/dashboard')
|
|
|
App->>Browser: history.pushState('/dashboard')
|
|
|
Browser->>Browser: URL បានធ្វើបច្ចុប្បន្នភាពទៅ /dashboard
|
|
|
App->>App: updateRoute() ត្រូវបានហៅ
|
|
|
App->>Template: ស្វែងរក និងចម្លងគំរូ dashboard
|
|
|
Template->>App: ត្រឡប់មាតិកាចម្លង
|
|
|
App->>Browser: ជំនួសមាតិកា app ជាមួយគំរូ
|
|
|
Browser->>User: បង្ហាញអេក្រង់ dashboard
|
|
|
|
|
|
Note over User,Template: អ្នកប្រើចុចប៊ូតុងត្រឡប់នៅកម្មវិធីរុករក
|
|
|
|
|
|
User->>Browser: ចុចប៊ូតុងត្រឡប់
|
|
|
Browser->>Browser: ប្រវត្តិត្រឡប់ទៅ /login
|
|
|
Browser->>App: ព្រឹត្តិការណ៍ popstate ត្រូវបានបម្លែង
|
|
|
App->>App: updateRoute() ត្រូវបានហៅដោយស្វ័យប្រវត្តិ
|
|
|
App->>Template: ស្វែងរក និងចម្លងគំរូ login
|
|
|
Template->>App: ត្រឡប់មាតិកាចម្លង
|
|
|
App->>Browser: ជំនួសមាតិកា app ជាមួយគំរូ
|
|
|
Browser->>User: បង្ហាញអេក្រង់ចូលគណនី
|
|
|
```
|
|
|
### 🔄 **ការត្រួតពិនិត្យខាងវិន័យ**
|
|
|
**រចនាសម្ព័ន្ធកម្មវិធីទំព័រតែមួយ**៖ ធានាថាអ្នកយល់ដល់ប្រព័ន្ធបំពេញ៖
|
|
|
- ✅ តើការរុករកចតុកោណនៅភាគហ៊ុនឆ្នៃកូដផ្លូវម៉ោងបុរាណមានភាពខុសគ្នាយ៉ាងដូចម្តេច?
|
|
|
- ✅ ហេតុអ្វីទៅរឿងប្រវត្តិតស API ទទួលបានសារៈសំខាន់សម្រាប់ការរុករក SPA យ៉ាងត្រឹមត្រូវ?
|
|
|
- ✅ តើ template អនុញ្ញាតមាតិកាដynamics ដោយគ្មានការផ្ទុកទំព័រឡើងវិញដូចម្តេច?
|
|
|
- ✅ តើតួនាទីនៃការគ្រប់គ្រងព្រឹត្តិការណ៍មានផលប៉ៈពាល់ក្នុងការចាប់យករុករកយ៉ាងដូចម្តេច?
|
|
|
|
|
|
**ការរួមបញ្ចូលប្រព័ន្ធ**៖ SPA របស់អ្នកបង្ហាញ៖
|
|
|
- **គ្រប់គ្រង Template**៖ គ្រឿងផ្សំ UI អាចប្រើបន្តជាមួយមាតិកា dynamic
|
|
|
- **Routing ភាគហ៊ុនអ្នកប្រើ**៖ គ្រប់គ្រង URL ដោយគ្មានការទំនាក់ទំនងទៅម៉ាស៊ីនបម្រុង
|
|
|
- **រចនាសម្ព័ន្ធបើកមួយរំលែកព្រឹត្តិការណ៍**៖ នៃការរុករក និងអន្តរាគមន៍អ្នកប្រើ
|
|
|
- **បញ្ចូលកម្មវិធីរុករក**៖ ជំនួយប្រវត្តិ និងប៊ូតុងត្រឡប់ក្រោយ/ទៅមុខ
|
|
|
- **កំណត់ប្រសិទ្ធភាព**៖ ផ្ទេរយ៉ាងលឿន និងបន្ថយផ្ទុកម៉ាស៊ីនបម្រុង
|
|
|
|
|
|
**គំរូវិជ្ជាជីវៈ**៖ អ្នកបានអនុវត្ត
|
|
|
- **ការបំបែក Model-View**៖ Template ផ្លូវផ្សេងពីតុល្យកម្មកម្មវិធី
|
|
|
- **គ្រប់គ្រងស្ថានភាព**៖ ស្ថានភាព URL សម្រឹតជាមួយមាតិកាបង្ហាញ
|
|
|
- **កំណើនប្រកបដោយវិន័យ**៖ JavaScript បង្កើនមុខងារ HTML មូលដ្ឋាន
|
|
|
- **បទពិសោធន៍អ្នកប្រើ**៖ រុករករលូនដូចកម្មវិធីដោយគ្មានការផ្ទុកទំព័រឡើងវិញ
|
|
|
|
|
|
> <EFBFBD> **ការយល់ដឹងអំពីរចនាសម្ព័ន្ធ**៖ ឧបករណ៍ប្រព័ន្ធរុករក
|
|
|
>
|
|
|
> **អ្វីដែលអ្នកកំពុងបង្កើតៈ**
|
|
|
> - **🔄 ការគ្រប់គ្រង URL**៖ អាប់ដេតតំបន់អាសយដ្ឋានរុករកដោយគ្មានការផ្ទុកទំព័រឡើងវិញ
|
|
|
> - **📋 ប្រព័ន្ធ Template**៖ ដូរមាតិកាដោយសារផ្លូវបច្ចុប្បន្ន
|
|
|
> - **📚 ការរួមបញ្ចូលប្រវត្តិ**៖ គាំទ្រប៊ូតុងត្រឡប់ក្រោយ/ទៅមុខរបស់រុករក
|
|
|
> - **🛡️ ការគ្រប់គ្រងបញ្ហា**៖ វិធីជំនួសដើម្បីដោះស្រាយផ្លូវខូច ឬខ្វះ
|
|
|
>
|
|
|
> **របៀបឧបករណ៍ធ្វើការរួមគ្នា៖**
|
|
|
> - **ស្ដាប់** ព្រឹត្តិការណ៍ចុចនិងការផ្លាស់ប្តូរប្រវត្តិ
|
|
|
> - **ធ្វើការអាប់ដេត** URL ដោយប្រើប្រវត្តិ API
|
|
|
> - **បង្ហាញ** template ត្រឹមត្រូវសម្រាប់ផ្លូវថ្មី
|
|
|
> - **រក្សា** បទពិសោធន៍អ្នកប្រើរលូន
|
|
|
|
|
|
ជំហានបន្ទាប់សម្រាប់កម្មវិធីរបស់យើងគឺ បន្ថែមនូវលក្ខណៈអាចរុករកបានរវាងទំព័រដោយមិនបាច់ផ្លាស់ប្តូរ URL ដោយដៃ។ វាមានន័យពីរដំណាក់កាល៖
|
|
|
|
|
|
1. អាប់ដេត URL បច្ចុប្បន្ន
|
|
|
2. អាប់ដេត template បង្ហាញឡើងទៅតាម URL ថ្មី
|
|
|
|
|
|
យើងបានថែរក្សាដំណាក់កាលទីពីរហើយជាមួយមុខងារ `updateRoute` ហើយដូច្នេះយើងត្រូវស្វែងរកវិធីធ្វើអោយអាប់ដេត URL បច្ចុប្បន្ន។
|
|
|
|
|
|
យើងត្រូវប្រើ JavaScript ជាក់លាក់(`[history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState)) ដែលអនុញ្ញាតឱ្យបំលែង URL និងបង្កើតបញ្ចូលថ្មីមួយក្នុងប្រវត្តិរុករក ដោយមិនបញ្ចូលHTMLឡើងវិញ។
|
|
|
|
|
|
> ⚠️ **សម្គាល់សំខាន់**៖ ខណៈដែល `<a href>` អាចប្រើដោយផ្ទាល់លើបណ្ដាញដើម្បីបង្កើតតំណភ្ជាប់ទៅ URL ផ្សេងៗ វានឹងបណ្តាលឲ្យរុករកបញ្ចូល HTMLឡើងវិញដោយលំនាំដើម។ ការពារ ការប្រព្រឹត្តនេះជាមូលដ្ធាននៅពេលគ្រប់គ្រង routing ជាមួយ JavaScript គឺចាំបាច់ ប្រើ `preventDefault()` នៅលើព្រឹត្តិការណ៍ចុច។
|
|
|
|
|
|
### ភារកិច្ច
|
|
|
|
|
|
ចូរបង្កើតមុខងារថ្មីមួយដែលយើងអាចប្រើសម្រាប់រុករកក្នុងកម្មវិធី។
|
|
|
|
|
|
```js
|
|
|
function navigate(path) {
|
|
|
window.history.pushState({}, path, path);
|
|
|
updateRoute();
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**ការយល់ដឹងម៉ោងចលនារុករកនេះ៖**
|
|
|
- **អាប់ដេត** URL រុករកទៅផ្លូវថ្មីដោយប្រើ `history.pushState`
|
|
|
- **បន្ថែម** បញ្ចូលថ្មីមួយទៅប្រវត្តិរុករកសម្រាប់ប៊ូតុងត្រឡប់ក្រោយ/ទៅមុខ
|
|
|
- **ហៅ** មុខងារ `updateRoute()` ដើម្បីបង្ហាញ template ត្រូវនោះ
|
|
|
- **រក្សា** បទពិសោធន៍ SPA ដោយគ្មានការផ្ទុកទំព័រឡើងវិញ
|
|
|
|
|
|
វិធីនេះដំបូងធ្វើអាប់ដេត URL បច្ចុប្បន្នទៅផ្លូវផ្ដល់ បន្ទាប់ពីនោះធ្វើអាប់ដេត template។ បទលក្ខណៈ `window.location.origin` ត្រឡប់ URL ជារុក្ខជាតិ ដើម្បីយើងអាចបង្កើត URL ពេញលេញពីផ្លូវណាមួយបាន។
|
|
|
|
|
|
ឥឡូវនេះយើងមានមុខងារនេះហើយ យើងអាចដោះស្រាយបញ្ហាដែលមាន នៅពេលផ្លូវមិនត្រូវគ្នានឹងផ្លូវណាមួយដែលបានកំណត់។ យើងនឹងកែប្រែមុខងារ `updateRoute` ដោយបន្ថែម fallback ទៅផ្លូវមួយដែលមាន ប្រសិនបើយើងរកមិនឃើញផ្លូវត្រូវគ្នា។
|
|
|
|
|
|
```js
|
|
|
function updateRoute() {
|
|
|
const path = window.location.pathname;
|
|
|
const route = routes[path];
|
|
|
|
|
|
if (!route) {
|
|
|
return navigate('/login');
|
|
|
}
|
|
|
|
|
|
const template = document.getElementById(route.templateId);
|
|
|
const view = template.content.cloneNode(true);
|
|
|
const app = document.getElementById('app');
|
|
|
app.innerHTML = '';
|
|
|
app.appendChild(view);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**ចំណុចសំខាន់ដែលត្រូវចងចាំ៖**
|
|
|
- **ពិនិត្យ** ប្រសិនបើមានផ្លូវនៅសម្រាប់ផ្លូវបច្ចុប្បន្ន
|
|
|
- **បញ្ជូនចេញ** ទៅទំព័រ login ពេលផ្លូវមិនត្រឹមត្រូវ
|
|
|
- **ផ្តល់** ការការពារបញ្ហាដែលទប់ស្កាត់រុករកខូច
|
|
|
- **ធានា** អ្នកប្រើតែងតែឃើញអេក្រង់ត្រឹមត្រូវ ទោះបី URL មិនត្រឹមត្រូវក៏ដោយ
|
|
|
|
|
|
បើមិនអាចរកផ្លូវបាន យើងនឹងបញ្ជូនទៅទំព័រ `login`។
|
|
|
|
|
|
ឥឡូវនេះចូរបង្កើតមុខងារត្រួតពិនិត្យ URL ពេលតំណភ្ជាប់ត្រូវបានចុច ហើយទប់ស្កាត់វេទិកា URL ដើមរបស់រុករក។
|
|
|
|
|
|
```js
|
|
|
function onLinkClick(event) {
|
|
|
event.preventDefault();
|
|
|
navigate(event.target.href);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**បែកបាក់មុខងារចុចនេះ៖**
|
|
|
- **ទប់ស្កាត់** យីហោច្នៃផ្នត់ដើមនៃរុករកដោយប្រើ `preventDefault()`
|
|
|
- **ដកយក** URL គោលដៅពីធាតុតំណភ្ជាប់ចុច
|
|
|
- **ហៅ** មុខងាររុករកដែលយើងបង្កើតជំនួសការផ្ទុកទំព័រឡើងវិញ
|
|
|
- **រក្សា** បទពិសោធន៍ SPA រលូន
|
|
|
|
|
|
```html
|
|
|
<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
|
|
|
...
|
|
|
<a href="/login" onclick="onLinkClick(event)">Logout</a>
|
|
|
```
|
|
|
|
|
|
**អ្វីដែលការយោង `onclick` ចូលរួមធ្វើ៖**
|
|
|
- **ភ្ជាប់** តំណភ្ជាប់នីមួយៗទៅប្រព័ន្ធរុករកផ្ទាល់ខ្លួន
|
|
|
- **បញ្ជូន** ព្រឹត្តិការណ៍ចុចទៅមុខងារ `onLinkClick` របស់យើងសម្រាប់ដំណើរការ
|
|
|
- **អនុញ្ញាត** រុករករលូនដោយគ្មានការផ្ទុកទំព័រឡើងវិញ
|
|
|
- **រក្សា** រចនាសម្ព័ន្ធ URL ត្រឹមត្រូវដែលអ្នកប្រើអាចដាក់ប៊ុកម៉ារឬចែករំលែកបាន
|
|
|
|
|
|
`onclick` គឺជាគុណលក្ខណៈភ្ជាប់ព្រឹត្តិការណ៍ `click` ទៅកូដ JavaScript ដែលនៅទីនេះគឺការហៅមុខងារ `navigate()`។
|
|
|
|
|
|
សាកល្បងចុចលើតំណភ្ជាប់ទាំងនេះ អ្នកគួរតែអាចរុករករវាងអេក្រង់ផ្សេងៗនៃកម្មវិធីបានហើយ។
|
|
|
|
|
|
✅ វិធី `history.pushState` គឺជាផ្នែកមួយនៃស្តង់ដារ HTML5 ហើយបានអនុវត្តនៅក្នុង [កម្មវិធីរុករកទំនើបទាំងអស់](https://caniuse.com/?search=pushState)។ ប្រសិនបើអ្នកកំពុងបង្កើតកម្មវិធីបណ្ដាញសម្រាប់កម្មវិធីរុករកចាស់ៗ មានចច្ចកថាមួយដែលអ្នកអាចប្រើជំនួស API នេះ គឺប្រើ [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) មុនភាគផ្លូវ អ្នកអាចអនុវត្ត routing ដែលធ្វើការជាមួយតំណ HTML ធម្មតា ហើយមិនផ្ទុកទំព័រឡើងវិញ ព្រោះគោលបំណងវាគឺបង្កើតតំណក្នុងទំព័រមួយ។
|
|
|
|
|
|
## ធ្វើឱ្យប៊ូតុងត្រឡប់ក្រោយនិងទៅមុខដំណើរការ
|
|
|
|
|
|
ប៊ូតុងត្រឡប់ក្រោយនិងទៅមុខគឺមូលដ្ឋានសំខាន់សម្រាប់ការជាវជ្រួលបណ្ដាញ ដូចជាតើអ្នកបញ្ជាការមហាការី NASA អាចពិនិត្យស្ថានភាពប្រព័ន្ធមុនៗពេលបេសកកម្មអាកាស។ អ្នកប្រើប្រាស់រំពឹងទុកថាប៊ូតុងទាំងនេះដំណើរការ ហើយពេលមិនដំណើរការ វាបង្កការបែកបាក់បទពិសោធន៍រុករក។
|
|
|
|
|
|
SPA របស់យើងត្រូវការកំណត់បន្ថែមមួយសម្រាប់គាំទ្រនេះ។ រុករករក្សាប្រវត្តិចុះក្រោម (ដែលយើងបានបន្ថែមជាមួយ `history.pushState`) ប៉ុន្តេលេខាធិការ យើងត្រូវឲ្យកម្មវិធីឆ្លើយតបទៅដោយធ្វើអាប់ដេតមាតិកាបង្ហាញ។
|
|
|
|
|
|
```mermaid
|
|
|
sequenceDiagram
|
|
|
participant User
|
|
|
participant Browser
|
|
|
participant App
|
|
|
participant Template
|
|
|
|
|
|
User->>Browser: ទម្លាក់ "ចូលគណនី" តំណខ្សែ
|
|
|
Browser->>App: ចាប់ផ្តើមព្រឹត្តិការណ៍ onclick
|
|
|
App->>App: ប្រឆាំងDefault() & នាវាព័រទូទៅ('/dashboard')
|
|
|
App->>Browser: history.pushState('/dashboard')
|
|
|
Browser->>Browser: URL បច្ចុប្បន្នទៅ /dashboard
|
|
|
App->>App: updateRoute() បានហៅ
|
|
|
App->>Template: ស្វែងរក និងស្រង់តំបន់គំរូ dashboard
|
|
|
Template->>App: ត្រឡប់មាតិកា cloned
|
|
|
App->>Browser: ដូរមាតិកា app ជាមួយតំបន់គំរូ
|
|
|
Browser->>User: បង្ហាញផ្ទាំង dashboard
|
|
|
|
|
|
Note over User,Template: អ្នកប្រើចុចប៊ូតុងត្រឡប់ក្នងកម្មវិធីរុករក
|
|
|
|
|
|
User->>Browser: ចុចប៊ូតុងត្រឡប់
|
|
|
Browser->>Browser: ប្រវត្តិវិលត្រឡប់ទៅ /login
|
|
|
Browser->>App: ព្រឹត្តិការណ៍ popstate បានបង្កើត
|
|
|
App->>App: updateRoute() ហៅដោយស្វ័យប្រវត្តិ
|
|
|
App->>Template: ស្វែងរក និងស្រង់តំបន់គំរូ login
|
|
|
Template->>App: ត្រឡប់មាតិកា cloned
|
|
|
App->>Browser: ដូរមាតិកា app ជាមួយតំបន់គំរូ
|
|
|
Browser->>User: បង្ហាញផ្ទាំងចូលគណនី
|
|
|
```
|
|
|
**ចំណុចសំខាន់នៃអន្តរកម្ម៖**
|
|
|
- **សកម្មភាពអ្នកប្រើ** ចាប់ផ្ដើមការរុករកដោយចុច ឬប៊ូតុងរុករក
|
|
|
- **កម្មវិធីចាប់យក** ការចុចតំណភ្ជាប់ ដើម្បីទប់ស្កាត់ការផ្ទុកទំព័រឡើងវិញ
|
|
|
- **ប្រវត្តិ API** គ្រប់គ្រងការផ្លាស់ប្តូរ URL និងប្រវត្តិរុករក
|
|
|
- **Template** ផ្តល់រចនាសម្ព័ន្ធមាតិកាសម្រាប់អេក្រង់នីមួយៗ
|
|
|
- **អ្នកស្ដាប់ព្រឹត្តិការណ៍** ធានាថាកម្មវិធីឆ្លើយតបទៅការរុករកគ្រប់ប្រភេទ
|
|
|
|
|
|
ការប្រើប្រាស់ `history.pushState` បង្កើតការបញ្ចូលថ្មីក្នុងប្រវត្តិរុករក។ អ្នកអាចពិនិត្យបាន ពេលចុចប៊ូតុង *ត្រឡប់ក្រោយ* រុករក របស់អ្នក វានឹងបង្ហាញដូចខាងក្រោម៖
|
|
|
|
|
|
|
|
|
|
|
|
ប្រសិនបើអ្នកសាកល្បងចុចប៊ូតុងត្រឡប់ក្រោយជំរុញច្រើនលើ អ្នកនឹងឃើញ URL បច្ចុប្បន្នផ្លាស់ប្តូរ និងប្រវត្តិបានអាប់ដេត ប៉ុន្តែ template ដូចគ្នានៅតែមិនផ្លាស់ប្តូរ។
|
|
|
|
|
|
នេះស្របព្រោះកម្មវិធីមិនដឹងថាអ្នកត្រូវហៅ `updateRoute()` រៀងរាល់ពេលប្រវត្តិផ្លាស់ប្តូរ។ ប្រសិនបើមើលទៅកាន់ [ឯកសារ `history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) អ្នកនឹងឃើញថា ប្រសិនបើស្ថានភាពបានផ្លាស់ប្តូរ - មានន័យថាយើងប្តូរទៅ URL ផ្សេង - ព្រឹត្តិការណ៍ [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) ត្រូវបានបញ្ចូន។ យើងនឹងប្រើវាដើម្បីជួសជុលបញ្ហានេះ។
|
|
|
|
|
|
### ភារកិច្ច
|
|
|
|
|
|
ដើម្បីធានាថា template បង្ហាញឡើងអាប់ដេត ពេលប្រវត្តិរុករកផ្លាស់ប្តូរ យើងនឹងភ្ជាប់មុខងារថ្មីមួយហៅ `updateRoute()`។ យើងនឹងធ្វើនៅក្រោមផ្នែក `app.js` របស់យើង៖
|
|
|
|
|
|
```js
|
|
|
window.onpopstate = () => updateRoute();
|
|
|
updateRoute();
|
|
|
```
|
|
|
|
|
|
**យល់ដឹងអំពីការរួមបញ្ចូលប្រវត្តិនេះ៖**
|
|
|
- **ស្ដាប់** ព្រឹត្តិការណ៍ `popstate` ពេលអ្នកប្រើរុករកជាមួយប៊ូតុងរុករក
|
|
|
- **ប្រើ** មុខងារប្រូតូកុលសំខាន់ សម្រាប់សង្ខេបកូដកាន់តែលឿន
|
|
|
- **ហៅ** `updateRoute()` ដោយស្វ័យប្រវត្តិរៀងរាល់ពេលស្ថានភាពប្រវត្តិផ្លាស់ប្តូរ
|
|
|
- **ចាប់ផ្តើមកម្មវិធី** ដោយហៅ `updateRoute()` ពេលទំព័របានផ្ទុកជាលើកទីមួយ
|
|
|
- **ធានា** បង្ហាញ template ត្រឹមត្រូវ ទោះអ្នករុករករបៀបណាក៏ដោយ
|
|
|
|
|
|
> 💡 **គន្លឹះជំនួយ**៖ យើងបានប្រើ [មុខងារបាញ់កាំភ្លើង](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) នៅទីនេះសម្រាប់ការកំណត់មុខងារត្រួតពិនិត្យព្រឹត្តិការណ៍ `popstate` ដើម្បីឲ្យកូដកាន់តែស្រួល ប៉ុន្តែមុខងារធម្មតាស្មើគ្នា។
|
|
|
|
|
|
នេះជាវីដេអូរំលឹកអំពីមុខងារបាញ់កាំភ្លើង៖
|
|
|
|
|
|
[](https://youtube.com/watch?v=OP6eEbOj2sc "Arrow Functions")
|
|
|
|
|
|
> 🎥 ចុចរូបភាពខាងលើសម្រាប់វីដេអូអំពីមុខងារបាញ់កាំភ្លើង។
|
|
|
|
|
|
ឥឡូវសាកល្បងប្រើប៊ូតុងត្រឡប់ក្រោយនិងទៅមុខរបស់កម្មវិធីរុករករបស់អ្នក ហើយពិនិត្យមើលថាផ្លូវបង្ហាញបានអាប់ដេតត្រឹមត្រូវ។
|
|
|
|
|
|
### ⚡ **អ្វីដែលអ្នកអាចធ្វើបានក្នុង ៥ នាទីបន្ទាប់**
|
|
|
- [ ] សាកល្បងរុករកកម្មវិធីធនាគាររបស់អ្នកដោយប្រើប៊ូតុងត្រឡប់ក្រោយ/ទៅមុខ
|
|
|
- [ ] សាកល្បងវាយ URL ផ្សេងៗដោយដៃក្នុងបន្ទាត់អាសយដ្ឋានដើម្បីសាកល្បង routing
|
|
|
- [ ] បើក DevTools រុករកហើយពិនិត្យមើលរបៀប template ត្រូវបានចម្លងទៅ DOM
|
|
|
- [ ] សាកល្បងបន្ថែម console.log ដើម្បីតាមដានដំណើរការរុករក
|
|
|
|
|
|
### 🎯 **អ្វីដែលអ្នកអាចសម្រេចបានក្នុងមួយម៉ោង**
|
|
|
- [ ] បញ្ចប់ការប្រលងក្រោយមេរៀន និងយល់ដល់គំនិតរចនាសម្ព័ន្ធ SPA
|
|
|
- [ ] បន្ថែមរចនាប័ទ្ម CSS ដើម្បីឲ្យ template កម្មវិធីធនាគាររបស់អ្នកមើលមានការជំនាញ
|
|
|
- [ ] អនុវត្តការប្រឈមមុខទំព័រ 404 ជាមួយការគ្រប់គ្រងកំហុសត្រឹមត្រូវ
|
|
|
- [ ] បង្កើតការប្រឈមទំព័រតុបតែងរចនាសម្ព័ន្ធ routing បន្ថែម
|
|
|
- [ ] បន្ថែមស្ថានភាពបង្ហាញឡើង និងភាពផ្លាស់ប្តូររវាងការផ្លាស់ប្តូរ template
|
|
|
|
|
|
### 📅 **ការធ្វើដំណើរ SPA របស់អ្នករយៈពេលមួយសប្តាហ៍**
|
|
|
- [ ] បញ្ចប់កម្មវិធីធនាគារពេញលេញជាមួយទម្រង់ ការគ្រប់គ្រងទិន្នន័យ និងការរក្សាទុក
|
|
|
- [ ] បន្ថែមលក្ខណៈ routing ជាច្រើនដូចជាប៉ារ៉ាម៉ែត្រ និង nested routes
|
|
|
- [ ] អនុវត្តការពារ navigation និង routing អ្នកប្រើប្រាស់តាមការផ្ទៀងផ្ទាត់សិទ្ធិ
|
|
|
- [ ] បង្កើតគ្រឿងផ្សំ template អាចប្រើឡើងវិញ និងបណ្ណាគារគ្រឿងផ្សំ
|
|
|
- [ ] បន្ថែមភាពជួរ ដូចជាផ្លាស់ប្តូរប្លង់ សម្រាប់បទពិសោធន៍រលូន
|
|
|
- [ ] ដាក់បញ្ចូល SPA ទៅវេទិកាផ្សព្វផ្សាយ ហើយកំណត់ routing ត្រឹមត្រូវ
|
|
|
|
|
|
### 🌟 **ជំនាញរចនាសម្ព័ន្ធផ្នែកមុខរបស់អ្នករយៈពេលមួយខែ**
|
|
|
- [ ] សាងសង់ SPA ស្មុគស្មាញដោយប្រើ ស៊ុមស្វ័យម៉ូទ័រ ឧ. React, Vue, ឬAngular
|
|
|
- [ ] រៀនគំនិតកំណត់ស្ថានភាពជំនាញខ្ពស់ និងបណ្ណាល័យដែលពាក់ព័ន្ធ
|
|
|
- [ ] ឯកទេសឧបករណ៍សាងសង់ និងដំណើរការអភិវឌ្ឍសម្រាប់ SPA
|
|
|
- [ ] អនុវត្តលក្ខណៈ Progressive Web App និងមុខងារផ្ដល់ភាពមិនត្រូវបណ្ដែត
|
|
|
- [ ] សិក្សាវិធីសាស្រ្តប្រសិទ្ធភាពសម្រាប់ SPA ទំហំធំ
|
|
|
- [ ] ឧបត្ថម្ភគម្រោង SPA គ្រប់គ្រងប្រភពបើក ហើយចែករំលែកចំណេះដឹង
|
|
|
|
|
|
## 🎯 រយៈពេលវិនិច្ឆ័យជំនាញកម្មវិធីទំព័រតែមួយរបស់អ្នក
|
|
|
|
|
|
```mermaid
|
|
|
timeline
|
|
|
title ការអភិវឌ្ឍ SPA និងការសិក្សាប្រព័ន្ធរចនាសម្ព័ន្ធវេបសាយទំនើប
|
|
|
|
|
|
section មូលដ្ឋាន (20 នាទី)
|
|
|
ប្រព័ន្ធទំព័រ Template: ធាតុទំព័រ HTML
|
|
|
: ការកែប្រែ DOM
|
|
|
: ការចម្លងមាតិកា
|
|
|
: ការបង្ហាញតាមលក្ខណៈ dynamic
|
|
|
|
|
|
section មូលដ្ឋានផ្លូវ (30 នាទី)
|
|
|
ការរុករកជាផ្នែកម៉ាស៊ីនភ្ញៀវ: ការគ្រប់គ្រង URL
|
|
|
: ប្រព័ន្ធ History API
|
|
|
: ការកំណត់ផ្លូវ
|
|
|
: ការដោះស្រាយព្រឹត្តិការណ៍
|
|
|
|
|
|
section បទពិសោធន៍អ្នកប្រើ (40 នាទី)
|
|
|
ការកែលម្អការរុករក: ការរួមបញ្ចូលជាមួយកម្មវិធីរក្សាសំបុត្រ
|
|
|
: ការគាំទ្រប៊ូតុងថយក្រោយ
|
|
|
: ការដោះស្រាយកំហុស
|
|
|
: ការផ្លាស់ប្តូរទន់ល្អ
|
|
|
|
|
|
section គំរូរចនាសម្ព័ន្ធ (50 នាទី)
|
|
|
SPA យុទ្ធសាស្រ្តវិជ្ជាជីវៈ: ប្រព័ន្ធកុំព្យូណង់
|
|
|
: ការគ្រប់គ្រងស្ថានភាព
|
|
|
: ការបង្កើនសមត្ថភាព
|
|
|
: ការកំណត់ព្រំដែនកំហុស
|
|
|
|
|
|
section បច្ចេកទេសជំនាញខ្ពស់ (1 សប្តាហ៍)
|
|
|
ការបញ្ចូលផ្នែក Framework: React Router
|
|
|
: Vue Router
|
|
|
: Angular Router
|
|
|
: បណ្ដាញបណ្ណាល័យស្ថានភាព
|
|
|
|
|
|
section ជំនាញផលិតកម្ម (1 ខែ)
|
|
|
ការអភិវឌ្ឍអង្គភាពធំនិងសហគ្រាស: ប្រព័ន្ធសំណុំ
|
|
|
: យុទ្ធសាស្រ្តសាកល្បង
|
|
|
: ប្រព័ន្ធដាក់ឲ្យដំណើរការ
|
|
|
: ការត្រួតពិនិត្យសមត្ថភាព
|
|
|
```
|
|
|
### 🛠️ សង្ខេបឧបករណ៍អភិវឌ្ឍ SPA របស់អ្នក
|
|
|
|
|
|
បន្ទាប់ពីបញ្ចប់មេរៀននេះ អ្នកបានបច្ចេកទេសដូចខាងក្រោម៖
|
|
|
- **រចនាសម្ព័ន្ធ Template**៖ គ្រឿងផ្សំ HTML អាចប្រើឡើងវិញដែលមានការបង្ហាញមាតិកាផ្លាស់ប្តូរ
|
|
|
- **Routing ភាគហ៊ុនប្រើ**៖ គ្រប់គ្រង URL និងរុករកដោយគ្មានការផ្ទុកទំព័រឡើងវិញ
|
|
|
- **ការរួមបញ្ចូលរុករក**៖ ប្រើប្រាស់ប្រវត្តិ API និងគាំទ្រប៊ូតុងត្រឡប់ក្រោយ/ទៅមុខ
|
|
|
- **ប្រព័ន្ធរួមបញ្ចូលព្រឹត្តិការណ៍**៖ ការគ្រប់គ្រងរុករក និងអន្តរាគមន៍អ្នកប្រើ
|
|
|
- **ការតាមដាន DOM**៖ ការចម្លង template ប្តូរមាតិកា និងគ្រប់គ្រងធាតុ
|
|
|
- **ការគ្រប់គ្រងកំហុស**៖ វិធីជំនួសគ្រប់គ្រងខូចសម្រាប់ផ្លូវមិនត្រឹមត្រូវ និងមាតិកាខ្វះ
|
|
|
- **គំរូប្រសិទ្ធភាព**៖ មុខងាររបៀបលឿនក្នុងការផ្ទុកមាតិកា និងបង្ហាញ
|
|
|
|
|
|
**កម្មវិធីពិតប្រាកដនៅពិភពលោក**៖ ជំនាញអភិវឌ្ឍ SPA របស់អ្នកអាចប្រើបានផ្ទាល់ក្នុង៖
|
|
|
- **កម្មវិធីវែបសម័យទំនើប**៖ React, Vue, Angular និងស៊ុមស្វ័យម៉ូទ័រផ្សេងៗ
|
|
|
- **កម្មវិធីវែបរីកចម្រើន**៖ អនុញ្ញាតឲ្យប្រើបានក្រៅបណ្តាញ ដូចកម្មវិធីជាapp
|
|
|
- **ផ្ទាំងគ្រប់គ្រងអាជីវកម្ម**៖ កម្មវិធីស្មុគស្មាញជាមួយទិដ្ឋភាពច្រើន
|
|
|
- **វេទិកាវិលជុំវត្ថុប្រណីត**៖ កាតាឡុកផលិតផល ដាក់ក្នុងទិញ និងដំណើរការការបង់ប្រាក់
|
|
|
- **ការគ្រប់គ្រងមាតិកា**៖ បង្កើត និងកែប្រែមាតិកាដាច់ដោយឡែក
|
|
|
- **អភិវឌ្ឍកម្មវិធីចល័ត**៖ កម្មវិធីស៊ីប្រាប hybrid ប្រើបច្ចេកវិទ្យាវែប
|
|
|
|
|
|
**ជំនាញវិជ្ជាជីវៈដែលទទួលបាន**៖ ឥឡូវនេះអ្នកអាច៖
|
|
|
- **ស្ថាបត្យកម្ម** កម្មវិធី Single-page ដោយមានការបំបែកការពិចារណាឲ្យត្រឹមត្រូវ
|
|
|
- **អនុវត្ត** ប្រព័ន្ធផ្លូវការ client-side routing ដែលអាចធ្វើការកាន់តែធំទូលាយជាមួយនឹងស្មុគស្មាញកម្មវិធី
|
|
|
- **ដោះស្រាយ** បញ្ហាដំណើរការផ្លូវចលនា ដែលស្មុគស្មាញដោយប្រើឧបករណ៍អភិវឌ្ឍន៍ browser
|
|
|
- **បំពាក់** ការប្រសើរឡើងនៃការសម្រួលប្រតិបត្តិការ តាមរយៈការគ្រប់គ្រងតំបន់គំរូអោយមានប្រសិទ្ធភាព
|
|
|
- **រចនា** ប្រព័ន្ធបទពិសោធន៍អ្នកប្រើ ដែលមានអារម្មណ៍ដូចជា native និងតបតទៅលឿន
|
|
|
|
|
|
**គំនិតអភិវឌ្ឍន៍ Frontend ដែលបានអនុវត្ត**:
|
|
|
- **ស្ថាបត្យកម្មគ្រឿងផ្សំ**: លំនាំ UI ដែលអាចប្រើឡើងវិញ និងប្រព័ន្ធតំបន់គំរូ
|
|
|
- **ការសម្រឹមសម្រួលរដ្ឋ**: ការគ្រប់គ្រងរដ្ឋនៅក្នុង URL និងប្រវត្តិ browser
|
|
|
- **កម្មវិធីកើតឡើងជាដំណើរការ**: ការរៀបចំការបន្តពាក់ព័ន្ធអ្នកប្រើនិងដំណើរការចលនា
|
|
|
- **ការបង្កើនប្រសិទ្ធភាព**: ការគ្រប់គ្រង DOM និងការទាញយកមាតិកាឲ្យមានប្រសិទ្ធភាព
|
|
|
- **រចនាបទពិសោធន៍អ្នកប្រើ**: ការផ្លាស់ប្តូរយ៉ាងរលូន និងការចលនាដោយមានភាពងាយស្រួលប្រើ
|
|
|
|
|
|
**ជំហានបន្ទាប់**: អ្នកបានរៀបចំខ្លួនរួចហើយសំរាប់ការស្រាវជ្រាវកុំផ្លាស់ប្ដូរក្រោម framework អភិវឌ្ឍ frontend សម័យថ្មី ការគ្រប់គ្រងរដ្ឋកម្រិតខ្ពស់ ឬសាងសង់កម្មវិធីសម្ភារៈសម្បត្តិស្មុគស្មាញ!
|
|
|
|
|
|
🌟 **បានសម្រេចសមិទ្ធផល**: អ្នកបានបង្កើតមូលដ្ឋានកម្មវិធី single-page ដែលមានលក្ខណៈរចនាស្ថាបត្យកម្មបែបសម័យថ្មី!
|
|
|
|
|
|
---
|
|
|
|
|
|
## ការប្រកួតប្រជែង GitHub Copilot Agent 🚀
|
|
|
|
|
|
ប្រើរបៀប Agent ដើម្បីបញ្ចប់បញ្ហាប្រកួតដ如下:
|
|
|
|
|
|
**សេចកី្តហេតុ**៖ ធ្វើការបន្ថែមមុខងារដោះស្រាយកំហុស និងបំពាក់ទំព័រ 404 សម្រាប់ផ្លូវដែលមិនត្រឹមត្រូវ ដើម្បីបង្កើនបទពិសោធន៍អ្នកប្រើនៅពេលចូលទៅកាន់ទំព័រដែលមិនមាន។
|
|
|
|
|
|
**ការបញ្ជាប្រតិបត្តិ**៖ បង្កើតតំបន់គំរូ HTML ថ្មីមាន id "not-found" ដើម្បីបង្ហាញទំព័រកំហុស 404 ដែលងាយស្រួលសម្រាប់អ្នកប្រើជាមួយការរចនា ហើយកែប្រែកូដ JavaScript ផ្លូវការ routing ដើម្បីបង្ហាញតំបន់គំរូនេះនៅពេលដែលអ្នកប្រើចូលផ្លូវ URL មិនត្រឹមត្រូវ ហើយបន្ថែមប៊ូតុង "Go Home" ដែលឲ្យអ្នកត្រឡប់ទៅទំព័រចូលចិត្តវិញ។
|
|
|
|
|
|
សូមស្វែងយល់បន្ថែមអំពី [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) នៅទីនេះ។
|
|
|
|
|
|
## 🚀 ការប្រកួតប្រជែង
|
|
|
|
|
|
បន្ថែមតំបន់គំរូថ្មី និងផ្លូវថ្មីសម្រាប់ទំព័រទីបី ដែលបង្ហាញពីកម្ចីសម្រាប់កម្មវិធីនេះ។
|
|
|
|
|
|
**គោលបំណងការប្រកួត**៖
|
|
|
- **បង្កើត** តំបន់គំរូ HTML ថ្មីដែលមានរចនាសម្ព័ន្ធមាតិកាសមរម្យ
|
|
|
- **បន្ថែម** ផ្លូវថ្មីទៅក្នុងវត្ថុខាងកម្រិត routes
|
|
|
- **រួមបញ្ចូល** តំណភ្ជាប់ចូលចេញទៅ និងពីទំព័រកម្ចី
|
|
|
- **សាកល្បង** ឲ្យប្រាកដថាផ្លូវគ្រប់យ៉ាងដំណើរការល្អជាមួយប្រវត្តិ browser
|
|
|
|
|
|
## សំណួរបន្ទាប់ការបង្រៀន
|
|
|
|
|
|
[សំណួរបន្ទាប់ការបង្រៀន](https://ff-quizzes.netlify.app/web/quiz/42)
|
|
|
|
|
|
## ពិនិត្យជាមួយរៀនផ្ទាល់ខ្លួន
|
|
|
|
|
|
Routing គឺជាផ្នែកមួយក្នុងការអភិវឌ្ឍវិបដែលចម្លែកគិតថាឈឺក្បាល ដែលមានភាពភ្ញាក់ផ្អើលពិសេស នៅពេលដែលវែបផ្លាស់ពីការតម្កល់ទំព័រជាធម្មតាទៅការ Single Page Application ដែលបង្កើតការតម្កល់ទំព័រឡើងវិញ។ សូមអានអំពី [របៀបក្រុមហ៊ុន Azure Static Web App](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) បានគ្រប់គ្រងការចរចារបស់ពួកគេ។ អ្នកអាចអធិប្បាយថាហេតុអ្វីបានជាការសម្រេចចិត្តខ្លះៗក្នុងឯកសារនោះគឺចាំបាច់?
|
|
|
|
|
|
**ធនធានសិក្សាបន្ថែម**៖
|
|
|
- **ស្វែងយល់** របៀបដែល framework ឈ្មោះថា React Router និង Vue Router អនុវត្ត client-side routing
|
|
|
- **ស្រាវជ្រាវ** ការប្រៀបធៀបរវាង hash-based routing និង history API routing
|
|
|
- **រៀន** អំពី server-side rendering (SSR) និងបែបផែនវាប៉ះពាល់ដល់យុទ្ធសាស្រ្ត routing
|
|
|
- **ស៊ើបអង្កេត** របៀបដែល Progressive Web Apps (PWAs) គ្រប់គ្រង routing និងចលនា
|
|
|
|
|
|
## ភារកិច្ច
|
|
|
|
|
|
[បង្កើនការគ្រប់គ្រង routing](assignment.md)
|
|
|
|
|
|
---
|
|
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
|
**ការបដិសេធ**៖
|
|
|
ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាបកប្រែ AI [Co-op Translator](https://github.com/Azure/co-op-translator)។ ខណៈពេលដែលយើងខំប្រឹងសម្រាប់ភាពត្រឹមត្រូវ សូមយល់ថាការបកប្រែដោយស្វ័យប្រវត្តិអាចមានកំហុសឬមិនត្រឹមត្រូវ។ ឯកសារដើមជាភាសាម្ដងគួរត្រូវបានគេពិចារណาว่า ជាដើមទុនសំខាន់។ សម្រាប់ព័ត៌មានសំខាន់ សូមណែនាំឲ្យមានការបកប្រែដោយមនុស្សដែលមានជំនាញវិជ្ជាជីវៈ។ យើងមិនទទួលខុសត្រូវចំពោះការយល់ច្រឡំ ឬការបកប្រែខុសការពិចារណាដែលកើតឡើងពីការប្រើប្រាស់ការបកប្រែនេះឡើយ។
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |
