# बँकिंग अ‍ॅप तयार करा भाग 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` अॅट्रिब्यूट्स का वापरले जातात? तुम्ही याऐवजी क्लासेस वापरू शकता का?
## जावास्क्रिप्टसह टेम्पलेट्स प्रदर्शित करणे
जर तुम्ही तुमची सध्याची 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 = '';` या कोडचा उद्देश काय आहे? त्याशिवाय काय होते?
## रूट्स तयार करणे
वेब अॅपबद्दल बोलताना, **URLs** विशिष्ट स्क्रीनशी नकाशा जोडण्याच्या हेतूला *Routing* म्हणतात. अनेक 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) वापरावे लागेल, ज्यामुळे 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 पुन्हा तयार करता येतो.
आता आमच्याकडे ही फंक्शन आहे, आम्ही रूटशी जुळत नसलेल्या पथासाठी असलेली समस्या सोडवू शकतो. जर एखादा रूट सापडत नसेल, तर आम्ही आता `login` पृष्ठावर पुनर्निर्देशित करू.
```js
function updateRoute() {
const path = window.location.pathname;
const route = routes[path];
if (!route) {
return navigate('/login');
}
...
```
आता लिंक क्लिक केल्यावर URL मिळवण्यासाठी आणि ब्राउझरच्या डीफॉल्ट लिंक वागणूक टाळण्यासाठी एक फंक्शन तयार करूया:
```js
function onLinkClick(event) {
event.preventDefault();
navigate(event.target.href);
}
```
आमच्या *Login* आणि *Logout* लिंकसाठी 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 च्या जागी एक युक्ती वापरता येते: पथाच्या आधी [hash (`#`)](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` इव्हेंट हँडलर घोषित करण्यासाठी [arrow function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) वापरले, जे संक्षिप्ततेसाठी आहे, पण नियमित फंक्शन देखील त्याचप्रमाणे कार्य करेल.
arrow functions वर व्हिडिओ:
[](https://youtube.com/watch?v=OP6eEbOj2sc "Arrow Functions")
> 🎥 वरच्या प्रतिमेवर क्लिक करा arrow functions बद्दल व्हिडिओसाठी.
आता ब्राउझरच्या बॅक आणि फॉरवर्ड बटन्स वापरून पहा, आणि तपासा की प्रदर्शित रूट आता योग्य प्रकारे अपडेट होत आहे.
---
## 🚀 आव्हान
या अॅपसाठी क्रेडिट्स दाखवणाऱ्या तिसऱ्या पृष्ठासाठी नवीन टेम्पलेट आणि रूट जोडा.
## पोस्ट-लेक्चर क्विझ
[पोस्ट-लेक्चर क्विझ](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) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.