# बैंकिङ एप निर्माण भाग १: वेब एपमा HTML टेम्प्लेट र रुटहरू
## प्रि-लेक्चर क्विज
[प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/41)
### परिचय
ब्राउजरहरूमा जाभास्क्रिप्टको आगमन पछि, वेबसाइटहरू पहिले भन्दा धेरै अन्तरक्रियात्मक र जटिल हुँदै गएका छन्। वेब प्रविधिहरू अब सामान्यतया पूर्ण रूपमा कार्यात्मक एप्लिकेसनहरू सिर्जना गर्न प्रयोग गरिन्छ जुन ब्राउजरमा सिधै चल्छ, जसलाई हामी [वेब एप्लिकेसन](https://en.wikipedia.org/wiki/Web_application) भन्छौं। वेब एपहरू अत्यधिक अन्तरक्रियात्मक भएकाले, प्रयोगकर्ताहरूले प्रत्येक पटक कुनै कार्य प्रदर्शन गर्दा पूर्ण पृष्ठ पुनः लोडको लागि पर्खन चाहँदैनन्। त्यसैले जाभास्क्रिप्टले HTML लाई सिधै DOM प्रयोग गरेर अपडेट गर्न प्रयोग गरिन्छ, जसले प्रयोगकर्तालाई सहज अनुभव प्रदान गर्दछ।
यस पाठमा, हामी HTML टेम्प्लेटहरू प्रयोग गरेर बैंक वेब एप सिर्जना गर्नको लागि आधारभूत संरचना तयार गर्नेछौं, जसले HTML पृष्ठलाई पूर्ण रूपमा पुनः लोड नगरी धेरै स्क्रिनहरू प्रदर्शन गर्न र अपडेट गर्न सक्नेछ।
### पूर्व-आवश्यकता
तपाईंलाई यस पाठमा हामीले निर्माण गर्ने वेब एप परीक्षण गर्न स्थानीय वेब सर्भर आवश्यक छ। यदि तपाईंसँग छैन भने, तपाईं [Node.js](https://nodejs.org) स्थापना गर्न सक्नुहुन्छ र आफ्नो प्रोजेक्ट फोल्डरबाट `npx lite-server` कमाण्ड प्रयोग गर्न सक्नुहुन्छ। यसले स्थानीय वेब सर्भर सिर्जना गर्नेछ र तपाईंको एपलाई ब्राउजरमा खोल्नेछ।
### तयारी
तपाईंको कम्प्युटरमा `bank` नामको फोल्डर बनाउनुहोस् र त्यसमा `index.html` नामको फाइल राख्नुहोस्। हामी यो HTML [बोइलरप्लेट](https://en.wikipedia.org/wiki/Boilerplate_code) बाट सुरु गर्नेछौं:
```html
Bank App
```
---
## HTML टेम्प्लेटहरू
यदि तपाईं वेब पृष्ठको लागि धेरै स्क्रिनहरू सिर्जना गर्न चाहनुहुन्छ भने, एउटा समाधान भनेको तपाईंले प्रदर्शन गर्न चाहेको प्रत्येक स्क्रिनको लागि एउटा HTML फाइल सिर्जना गर्नु हो। तर, यस समाधानसँग केही असुविधा आउँछ:
- स्क्रिन स्विच गर्दा तपाईंले सम्पूर्ण HTML पुनः लोड गर्नुपर्छ, जुन ढिलो हुन सक्छ।
- विभिन्न स्क्रिनहरू बीच डेटा साझा गर्न गाह्रो हुन्छ।
अर्को दृष्टिकोण भनेको केवल एउटा HTML फाइल राख्नु हो, र `` एलिमेन्ट प्रयोग गरेर धेरै [HTML टेम्प्लेटहरू](https://developer.mozilla.org/docs/Web/HTML/Element/template) परिभाषित गर्नु हो। टेम्प्लेट एक पुनः प्रयोग गर्न मिल्ने HTML ब्लक हो जुन ब्राउजरले प्रदर्शन गर्दैन, र यसलाई रनटाइममा जाभास्क्रिप्ट प्रयोग गरेर इन्स्ट्यान्स गर्न आवश्यक छ।
### कार्य
हामी दुई स्क्रिनहरू भएको बैंक एप बनाउनेछौं: लगइन पृष्ठ र ड्यासबोर्ड। सुरुमा, HTML बडीमा एउटा प्लेसहोल्डर एलिमेन्ट थपौं जसलाई हामी हाम्रो एपका विभिन्न स्क्रिनहरू इन्स्ट्यान्स गर्न प्रयोग गर्नेछौं:
```html
Loading...
```
हामी यसलाई जाभास्क्रिप्ट प्रयोग गरेर पछि पत्ता लगाउन सजिलो बनाउन `id` दिइरहेका छौं।
> टिप: किनकि यस एलिमेन्टको सामग्री प्रतिस्थापन गरिनेछ, हामी यसमा लोडिङ सन्देश वा सूचक राख्न सक्छौं जुन एप लोड हुँदा देखाइनेछ।
अर्को, HTML टेम्प्लेटलाई लगइन पृष्ठको लागि तल थपौं। अहिले हामी त्यहाँ एउटा शीर्षक र एउटा सेक्सन राख्नेछौं जसमा नेभिगेसन गर्न प्रयोग गरिने लिंक हुनेछ।
```html
Bank App
```
त्यसपछि हामी ड्यासबोर्ड पृष्ठको लागि अर्को HTML टेम्प्लेट थप्नेछौं। यो पृष्ठमा विभिन्न सेक्सनहरू समावेश हुनेछ:
- शीर्षक र लगआउट लिंक भएको हेडर
- बैंक खाताको वर्तमान ब्यालेन्स
- ट्रान्जेक्सनहरूको सूची, तालिकामा प्रदर्शन गरिएको
```html
```
> टिप: HTML टेम्प्लेटहरू सिर्जना गर्दा, यदि तपाईंलाई यो कस्तो देखिन्छ भनेर हेर्न मन छ भने, तपाईं `` र `` लाइनहरूलाई `` ले घेरेर कमेन्ट गर्न सक्नुहुन्छ।
✅ तपाईंको विचारमा किन हामीले टेम्प्लेटहरूमा `id` एट्रिब्युटहरू प्रयोग गरेका छौं? के हामीले क्लासहरू जस्ता अरू केही प्रयोग गर्न सक्थ्यौं?
## जाभास्क्रिप्टसँग टेम्प्लेटहरू प्रदर्शन गर्दै
यदि तपाईंले आफ्नो हालको HTML फाइललाई ब्राउजरमा प्रयास गर्नुभयो भने, तपाईंले देख्नुहुनेछ कि यो `Loading...` प्रदर्शन गर्दै अड्किएको छ। त्यसको कारण हामीले 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) प्रयोग गरेर।
✅ किन हामीले टेम्प्लेटलाई DOM मा जोड्नु अघि क्लोन गर्न आवश्यक छ? यदि हामीले यो चरण छोड्यौं भने के हुनेछ?
### कार्य
तपाईंको प्रोजेक्ट फोल्डरमा `app.js` नामको नयाँ फाइल सिर्जना गर्नुहोस् र HTML को `` सेक्सनमा उक्त फाइललाई इम्पोर्ट गर्नुहोस्:
```html
```
अब `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);
}
```
यहाँ हामीले माथि वर्णन गरिएका ३ चरणहरू ठीकसँग गरेका छौं। हामीले `templateId` भएको टेम्प्लेटलाई इन्स्ट्यान्स गरेका छौं, र यसको क्लोन गरिएको सामग्रीलाई हाम्रो एप प्लेसहोल्डर भित्र राखेका छौं। ध्यान दिनुहोस् कि हामीले `cloneNode(true)` प्रयोग गर्न आवश्यक छ ताकि टेम्प्लेटको सम्पूर्ण सबट्री प्रतिलिपि गर्न सकियोस्।
अब यो फंक्शनलाई एउटा टेम्प्लेटसँग कल गर्नुहोस् र परिणाम हेर्नुहोस्।
```js
updateRoute('login');
```
✅ यो कोडको उद्देश्य के हो `app.innerHTML = '';`? यसको बिना के हुन्छ?
## रुटहरू सिर्जना गर्दै
वेब एपको कुरा गर्दा, हामी *रुटिङ* भन्नाले **URLs** लाई विशेष स्क्रिनहरूमा म्याप गर्ने उद्देश्यलाई बुझाउँछौं। धेरै HTML फाइलहरू भएको वेबसाइटमा, यो स्वचालित रूपमा गरिन्छ किनभने फाइल पथहरू URL मा प्रतिबिम्बित हुन्छन्। उदाहरणका लागि, तपाईंको प्रोजेक्ट फोल्डरमा यी फाइलहरू भएमा:
```
mywebsite/index.html
mywebsite/login.html
mywebsite/admin/index.html
```
यदि तपाईंले `mywebsite` लाई रुटको रूपमा वेब सर्भर सिर्जना गर्नुभयो भने, URL म्यापिङ यस्तो हुनेछ:
```
https://site.com --> mywebsite/index.html
https://site.com/login.html --> mywebsite/login.html
https://site.com/admin/ --> mywebsite/admin/index.html
```
तर, हाम्रो वेब एपको लागि हामीले सबै स्क्रिनहरू समावेश गर्ने एकल HTML फाइल प्रयोग गरिरहेका छौं, त्यसैले यो डिफल्ट व्यवहारले हामीलाई मद्दत गर्दैन। हामीले यो म्यापलाई म्यानुअली सिर्जना गर्नुपर्छ र जाभास्क्रिप्ट प्रयोग गरेर प्रदर्शन गरिएको टेम्प्लेटलाई अपडेट गर्नुपर्छ।
### कार्य
हामी एक साधारण वस्तु प्रयोग गर्नेछौं [म्याप](https://en.wikipedia.org/wiki/Associative_array) कार्यान्वयन गर्नको लागि, जसले URL पथहरू र हाम्रो टेम्प्लेटहरूलाई म्याप गर्दछ। यो वस्तु `app.js` फाइलको शीर्षमा थप्नुहोस्।
```js
const routes = {
'/login': { templateId: 'login' },
'/dashboard': { templateId: 'dashboard' },
};
```
अब `updateRoute` फंक्शनलाई अलिकति परिमार्जन गरौं। `templateId` लाई सिधै आर्गुमेन्टको रूपमा पास गर्ने सट्टा, हामीले पहिले हालको URL हेर्नुहोस्, र त्यसपछि हाम्रो म्याप प्रयोग गरेर सम्बन्धित टेम्प्लेट 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 म्यानुअली परिवर्तन गरेर प्रयास गर्न सक्नुहुन्छ।
✅ यदि तपाईंले URL मा अज्ञात पथ प्रविष्ट गर्नुभयो भने के हुन्छ? हामीले यसलाई कसरी समाधान गर्न सक्दछौं?
## नेभिगेसन थप्दै
हाम्रो एपको अर्को चरण भनेको पृष्ठहरू बीच नेभिगेट गर्ने सम्भावना थप्नु हो, बिना URL म्यानुअली परिवर्तन नगरी। यसले दुई कुराहरू समावेश गर्दछ:
1. हालको URL अपडेट गर्दै
2. नयाँ URL को आधारमा प्रदर्शन गरिएको टेम्प्लेट अपडेट गर्दै
हामीले `updateRoute` फंक्शनसँग दोस्रो भागको ख्याल राखिसकेका छौं, त्यसैले हामीले हालको URL अपडेट गर्ने तरिका पत्ता लगाउनुपर्छ।
हामीले जाभास्क्रिप्ट र विशेष गरी [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) प्रयोग गर्नुपर्नेछ, जसले URL अपडेट गर्न र ब्राउजिङ इतिहासमा नयाँ प्रविष्टि सिर्जना गर्न अनुमति दिन्छ, बिना HTML पुनः लोड नगरी।
> नोट: HTML एंकर एलिमेन्ट [``](https://developer.mozilla.org/docs/Web/HTML/Element/a) लाई आफ्नै रूपमा विभिन्न URLs मा हाइपरलिङ्कहरू सिर्जना गर्न प्रयोग गर्न सकिन्छ, तर यसले ब्राउजरलाई HTML पुनः लोड गर्न डिफल्ट रूपमा बनाउँछ। कस्टम जाभास्क्रिप्टको साथ रुटिङ ह्यान्डल गर्दा यो व्यवहार रोक्न आवश्यक छ, क्लिक इभेन्टमा preventDefault() फंक्शन प्रयोग गरेर।
### कार्य
हामीले हाम्रो एपमा नेभिगेट गर्न प्रयोग गर्न सकिने नयाँ फंक्शन सिर्जना गर्नेछौं:
```js
function navigate(path) {
window.history.pushState({}, path, path);
updateRoute();
}
```
यो मेथडले पहिले दिइएको पथको आधारमा हालको URL अपडेट गर्दछ, त्यसपछि टेम्प्लेट अपडेट गर्दछ। `window.location.origin` प्रोपर्टीले URL रुट फर्काउँछ, जसले हामीलाई दिइएको पथबाट पूर्ण URL पुनः निर्माण गर्न अनुमति दिन्छ।
अब हामीसँग यो फंक्शन छ, यदि कुनै पथले कुनै परिभाषित रुटसँग मेल खाँदैन भने हामीसँग भएको समस्या समाधान गर्न सक्छौं। हामीले `updateRoute` फंक्शनलाई परिमार्जन गर्नेछौं र यदि कुनै मेल फेला पार्न सकिएन भने, हामीले विद्यमान रुटहरू मध्ये एकमा फिर्ता जानुपर्नेछ।
```js
function updateRoute() {
const path = window.location.pathname;
const route = routes[path];
if (!route) {
return navigate('/login');
}
...
```
यदि कुनै रुट फेला पार्न सकिएन भने, हामी अब `login` पृष्ठमा रिडाइरेक्ट गर्नेछौं।
अब लिंक क्लिक गर्दा URL प्राप्त गर्न र ब्राउजरको डिफल्ट लिंक व्यवहार रोक्न फंक्शन सिर्जना गरौं:
```js
function onLinkClick(event) {
event.preventDefault();
navigate(event.target.href);
}
```
नेभिगेसन प्रणालीलाई पूरा गर्न HTML मा *Login* र *Logout* लिंकहरूमा बाइन्डिङहरू थपौं।
```html
Login
...
Logout
```
माथिको `event` वस्तुले `click` इभेन्टलाई क्याप्चर गर्छ र हाम्रो `onLinkClick` फंक्शनमा पास गर्छ।
[`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) एट्रिब्युट प्रयोग गरेर `click` इभेन्टलाई जाभास्क्रिप्ट कोडसँग बाइन्ड गर्नुहोस्, यहाँ `navigate()` फंक्शनको कल।
यी लिंकहरू क्लिक गरेर प्रयास गर्नुहोस्, तपाईं अब आफ्नो एपका विभिन्न स्क्रिनहरू बीच नेभिगेट गर्न सक्षम हुनुहुनेछ।
✅ `history.pushState` मेथड HTML5 मानकको हिस्सा हो र [सबै आधुनिक ब्राउजरहरूमा](https://caniuse.com/?search=pushState) कार्यान्वित गरिएको छ। यदि तपाईं पुराना ब्राउजरहरूको लागि वेब एप निर्माण गर्दै हुनुहुन्छ भने, तपाईं यस API को सट्टा एउटा ट्रिक प्रयोग गर्न सक्नुहुन्छ: पथ अघि [ह्यास (`#`)](https://en.wikipedia.org/wiki/URI_fragment) प्रयोग गरेर तपाईंले रुटिङ कार्यान्वयन गर्न सक्नुहुन्छ जसले नियमित एंकर नेभिगेसनसँग काम गर्दछ र पृष्ठ पुनः लोड गर्दैन, किनभने यसको उद्देश्य पृष्ठभित्र आन्तरिक लिंकहरू सिर्जना गर्नु थियो।
## ब्राउजरको ब्याक र फर्वार्ड बटनहरू ह्यान्डल गर्दै
`history.pushState` प्रयोग गर्दा ब्राउजरको नेभिगेसन इतिहासमा नयाँ प्रविष्टिहरू सिर्जना हुन्छ। तपाईंले आफ्नो ब्राउजरको *ब्याक बटन* थिचेर जाँच गर्न सक्नुहुन्छ, यसले यस्तो देखाउनु पर्छ:
यदि तपाईंले ब्याक बटन केही पटक क्लिक गर्न प्रयास गर्नुभयो भने, तपाईंले देख्नुहुनेछ कि हालको URL परिवर्तन हुन्छ र इतिहास अपडेट हुन्छ, तर उही टेम्प्लेट प्रदर्शन भइरहन्छ।
त्यसको कारण एप्लिकेसनलाई थाहा छैन कि हामीले प्रत्येक पटक इतिहास परिवर्तन हुँदा `updateRoute()` कल गर्न आवश्यक छ। यदि तपाईंले [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) को डकुमेन्टेसन हेर्नुभयो भने, तपाईंले देख्नुहुनेछ कि यदि स्टेट परिवर्तन भयो - अर्थात् हामी फरक URL मा सरेका छौं - [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) इभेन्ट ट्रिगर हुन्छ। हामीले यो समस्या समाधान गर्न यसलाई प्रयोग गर्नेछौं।
### कार्य
ब्राउजर इतिहास परिवर्तन हुँदा प्रदर्शन गरिएको टेम्प्लेट अपडेट भएको सुनिश्चित गर्न, हामी नयाँ फंक्शनलाई `updateRoute()` कल गर्नेछौं। हामीले यो `app.js` फाइलको तलमा गर्नेछौं:
```js
window.onpopstate = () => updateRoute();
updateRoute();
```
> नोट: हामीले यहाँ [एरो फंक्शन](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) प्रयोग गरेर हाम्रो `popstate` इभेन्ट ह्यान्डलरलाई संक्षिप्तता प्रदान गर्न घोषणा गरेका छौं, तर नियमित फंक्शनले पनि उस्तै काम गर्नेछ।
एरो फंक्शनहरूको बारेमा भिडियो हेर्न यहाँ क्लिक गर्नुहोस्:
[](https://youtube.com/watch?v=OP6eEbOj2sc "एरो फंक्शनहरू")
> 🎥 माथिको छवि क्लिक गरेर एरो फंक्शनहरूको बारेमा भिडियो हेर्नुहोस्।
अब आफ्नो ब्राउजरको ब्याक र फर्वार्ड बटनहरू प्रयोग गर्न प्रयास गर्नुहोस्, र यो पटक प्रदर्शन गरिएको रुट सही रूपमा अपडेट भएको छ कि छैन जाँच गर्नुहोस्।
---
## GitHub Copilot Agent चुनौती 🚀
Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
**विवरण:** बैंकिङ एपलाई सुधार गर्दै त्रुटि ह्यान्डलिङ र अमान्य रुटहरूको लागि 404 पृष्ठ टेम्प्लेट कार्यान्वयन गर्नुहोस्, जसले प्रयोगकर्ताको अनुभव सुधार गर्दछ जब गैर-अस्तित्व पृष्ठहरूमा नेभिगेट गरिन्छ।
**प्रम्प्ट:** "not-found" id भएको नयाँ HTML टेम्प्लेट सिर्जना गर्नुहोस् जसले प्रयोगकर्तालाई मैत्रीपूर्ण 404 त्रुटि पृष्ठ प्रदर्शन गर्दछ। त्यसपछि जाभास्क्रिप्ट रुटिङ तर्कलाई संशोधन गरेर यो टेम्प्लेट अमान्य URLs नेभिगेट गर्दा देखाउनुहोस्, र "Go Home" बटन थप्नुहोस् जसले लगइन पृष्ठमा फिर्ता नेभिगेट गर्दछ।
## 🚀 चुनौती
यस एपको क्रेडिटहरू देखाउने तेस्रो पृष्ठको लागि नयाँ टेम्प्लेट र रुट थप्नुहोस्।
## पोस्ट-लेक्चर क्विज
[पोस्ट-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/42)
## समीक्षा र आत्म अध्ययन
रुटिङ वेब विकासको आश्चर्यजनक रूपमा जटिल भागहरू मध्ये एक हो, विशेष गरी वेब पृष्ठ रिफ्रेस व्यवहारहरूबाट सिंगल पेज एप्लिकेसन पृष्ठ रिफ्रेसमा सर्दै गर्दा। [Azure Static Web App सेवा](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) ले रुटिङ कसरी ह्यान्डल गर्छ भन्ने बारेमा थोरै पढ्नुहोस्। तपाईंले उक्त डकुमेन्टमा वर्णन गरिएका केही निर्णयहरू किन आवश्यक छन् भनेर व्याख्या गर्न सक्नुहुन्छ?
## असाइनमेन्ट
[रुटिङ सुधार गर्नुहोस्](assignment.md)
---
**अस्वीकरण**:
यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी यथार्थताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।