# बँकिंग अ‍ॅप तयार करा भाग 1: वेब अ‍ॅपमध्ये HTML टेम्पलेट्स आणि रूट्स
## पूर्व-व्याख्यान क्विझ
[पूर्व-व्याख्यान क्विझ](https://ff-quizzes.netlify.app/web/quiz/41)
### परिचय
ब्राउझरमध्ये जावास्क्रिप्ट आल्यापासून, वेबसाइट्स अधिक इंटरॅक्टिव्ह आणि जटिल होत आहेत. वेब तंत्रज्ञानाचा आता पूर्णपणे कार्यक्षम अ‍ॅप्लिकेशन्स तयार करण्यासाठी वापर केला जातो, जे थेट ब्राउझरमध्ये चालतात आणि त्यांना [वेब अ‍ॅप्लिकेशन्स](https://en.wikipedia.org/wiki/Web_application) म्हणतात. वेब अ‍ॅप्स अत्यंत इंटरॅक्टिव्ह असल्यामुळे, वापरकर्त्यांना प्रत्येक क्रिया केल्यानंतर संपूर्ण पृष्ठ पुन्हा लोड होण्याची वाट पाहायची नसते. म्हणूनच, जावास्क्रिप्टचा वापर HTML थेट अपडेट करण्यासाठी केला जातो, ज्यामुळे वापरकर्त्याचा अनुभव अधिक गुळगुळीत होतो.
या धड्यात, आपण 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` ऍट्रिब्युट्स का वापरतो? आपण त्याऐवजी वर्ग (classes) वापरू शकतो का?
## जावास्क्रिप्टसह टेम्पलेट्स प्रदर्शित करणे
जर तुम्ही तुमची सध्याची HTML फाइल ब्राउझरमध्ये उघडली, तर ती `Loading...` वर अडकलेली दिसेल. कारण आपल्याला HTML टेम्पलेट्स तयार करून प्रदर्शित करण्यासाठी काही जावास्क्रिप्ट कोड जोडावा लागेल.
टेम्पलेट तयार करणे सहसा 3 टप्प्यांमध्ये केले जाते:
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) वापरून.
✅ आपण टेम्पलेट जोडण्यापूर्वी त्याची प्रत का तयार करतो? जर आपण हा टप्पा वगळला तर काय होईल?
### कार्य
तुमच्या प्रोजेक्ट फोल्डरमध्ये `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);
}
```
येथे आपण वरील 3 टप्पे अचूकपणे पार पाडतो. आपण `templateId` असलेल्या टेम्पलेटची प्रत तयार करतो आणि त्याची प्रत आपल्या अॅपच्या प्लेसहोल्डरमध्ये ठेवतो. लक्षात घ्या की संपूर्ण टेम्पलेट झाडाची प्रत तयार करण्यासाठी `cloneNode(true)` वापरणे आवश्यक आहे.
आता या फंक्शनला एका टेम्पलेटसह कॉल करा आणि परिणाम पहा.
```js
updateRoute('login');
```
✅ `app.innerHTML = '';` या कोडचा उद्देश काय आहे? त्याशिवाय काय होते?
## रूट्स तयार करणे
वेब अॅपबद्दल बोलताना, *Routing* म्हणजे **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 फाइल वापरत आहोत, ज्यामध्ये सर्व स्क्रीन आहेत, त्यामुळे हे डिफॉल्ट वर्तन आपल्याला मदत करणार नाही. आपल्याला हा नकाशा मॅन्युअली तयार करावा लागेल आणि जावास्क्रिप्ट वापरून प्रदर्शित टेम्पलेट अपडेट करावे लागेल.
### कार्य
आपण URL पथ आणि आपल्या टेम्पलेट्स यांच्यातील [नकाशा](https://en.wikipedia.org/wiki/Associative_array) अंमलात आणण्यासाठी एक साधा ऑब्जेक्ट वापरू. हा ऑब्जेक्ट `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), ज्यामुळे HTML पुन्हा लोड न करता URL अपडेट करता येतो आणि ब्राउझिंग इतिहासात नवीन नोंद तयार करता येते.
> टीप: 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 मधील *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 "ऍरो फंक्शन्स")
> 🎥 वरील प्रतिमेवर क्लिक करा ऍरो फंक्शन्सबद्दल व्हिडिओसाठी.
आता ब्राउझरच्या बॅक आणि फॉरवर्ड बटणांचा वापर करून पहा आणि यावेळी प्रदर्शित रूट योग्यरित्या अपडेट होत आहे का ते तपासा.
---
## 🚀 आव्हान
या अॅपसाठी क्रेडिट्स दर्शवणारे तिसऱ्या पृष्ठासाठी नवीन टेम्पलेट आणि रूट जोडा.
## व्याख्यानानंतरचा क्विझ
[व्याख्यानानंतरचा क्विझ](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) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.