# बैंकिङ एप बनाउने भाग १: वेब एपमा 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 = '';` को उद्देश्य के हो? यो बिना के हुन्छ?
## रुटहरू बनाउने
वेब एपको सन्दर्भमा, *रुटिङ* भन्नाले **URL** लाई देखाइनुपर्ने विशेष स्क्रिनहरूसँग म्याप गर्ने उद्देश्यलाई जनाउँछ। धेरै 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) लाई आफैंमा विभिन्न URL हरूसँग हाइपरलिंक बनाउन प्रयोग गर्न सकिन्छ, तर यसले डिफल्ट रूपमा ब्राउजरलाई 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 मा *लगइन* र *लगआउट* लिंकहरूमा बाइन्डिङ थपौं।
```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 "एरो फंक्शनहरू")
> 🎥 माथिको तस्बिरमा क्लिक गरेर एरो फंक्शनहरूको बारेमा भिडियो हेर्नुहोस्।
अब आफ्नो ब्राउजरको ब्याक र फर्वार्ड बटनहरू प्रयोग गरेर प्रयास गर्नुहोस्, र यस पटक देखाइएको रुट सही रूपमा अपडेट भएको छ कि छैन जाँच गर्नुहोस्।
---
## 🚀 चुनौती
यस एपका लागि क्रेडिटहरू देखाउने तेस्रो पृष्ठको लागि नयाँ टेम्प्लेट र रुट थप्नुहोस्।
## पोस्ट-लेक्चर क्विज
[पोस्ट-लेक्चर क्विज](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) प्रयोग गरेर अनुवाद गरिएको हो। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।