# बैंकिङ एप निर्माण भाग १: वेब एपमा HTML टेम्प्लेट र रुटहरू
## प्रि-लेक्चर क्विज
[प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/41)
### परिचय
ब्राउजरमा जाभास्क्रिप्टको आगमनपछि, वेबसाइटहरू पहिलेभन्दा धेरै अन्तरक्रियात्मक र जटिल हुँदै गएका छन्। वेब प्रविधिहरू अब ब्राउजरमा सिधै चल्ने पूर्ण रूपमा कार्यात्मक एप्लिकेसनहरू बनाउन सामान्य रूपमा प्रयोग गरिन्छ, जसलाई हामी [वेब एप्लिकेसन](https://en.wikipedia.org/wiki/Web_application) भन्छौं। वेब एपहरू अत्यधिक अन्तरक्रियात्मक भएकाले, प्रयोगकर्ताहरूले कुनै कार्य सम्पन्न हुँदा पूरा पृष्ठ पुनःलोड गर्न कुर्न चाहँदैनन्। त्यसैले, HTML लाई सिधै DOM प्रयोग गरेर अपडेट गर्न जाभास्क्रिप्ट प्रयोग गरिन्छ, जसले प्रयोगकर्तालाई सहज अनुभव प्रदान गर्दछ।
यस पाठमा, हामी 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 फाइल प्रयोग गरिरहेका छौं, त्यसैले यो डिफल्ट व्यवहारले हामीलाई मद्दत गर्दैन। हामीले यो म्यापलाई म्यानुअली बनाउनु पर्छ र जाभास्क्रिप्ट प्रयोग गरेर प्रदर्शन गरिएको टेम्प्लेट अपडेट गर्नुपर्छ।
### कार्य
हामी 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();
```
> नोट: हामीले यहाँ हाम्रो `popstate` इभेन्ट ह्यान्डलरलाई संक्षिप्तताका लागि [एरो फंक्शन](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) प्रयोग गरेर घोषणा गरेका छौं, तर नियमित फंक्शनले पनि उस्तै काम गर्नेछ।
एरो फंक्शनहरूको बारेमा भिडियो हेर्न यहाँ क्लिक गर्नुहोस्:
[](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) प्रयोग गरेर अनुवाद गरिएको छ। हामी यथार्थताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।