History

Lee Stott 2daab5271b Update Quiz Link		3 weeks ago
..
README.md	Update Quiz Link	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	4 weeks ago

README.md

बँकिंग अॅप तयार करा भाग 2: लॉगिन आणि नोंदणी फॉर्म तयार करा

व्याख्यानपूर्व क्विझ

परिचय

जवळजवळ सर्व आधुनिक वेब अॅप्समध्ये, तुम्ही खाते तयार करून तुमची स्वतःची खासगी जागा मिळवू शकता. अनेक वापरकर्ते एकाच वेळी वेब अॅपमध्ये प्रवेश करू शकतात, त्यामुळे प्रत्येक वापरकर्त्याचा वैयक्तिक डेटा स्वतंत्रपणे साठवण्यासाठी आणि कोणती माहिती दाखवायची ते निवडण्यासाठी तुम्हाला एक यंत्रणा आवश्यक आहे. वापरकर्ता ओळख सुरक्षितपणे व्यवस्थापित कशी करावी हे आम्ही येथे कव्हर करणार नाही कारण हा एक स्वतंत्र विषय आहे, परंतु आम्ही खात्री करू की प्रत्येक वापरकर्ता आमच्या अॅपवर एक (किंवा अधिक) बँक खाते तयार करू शकेल.

या भागात आम्ही HTML फॉर्मचा वापर करून आमच्या वेब अॅपमध्ये लॉगिन आणि नोंदणी जोडू. आम्ही डेटा सर्व्हर API कडे प्रोग्रामॅटिक पद्धतीने कसा पाठवायचा हे पाहू आणि शेवटी वापरकर्त्याच्या इनपुटसाठी मूलभूत सत्यापन नियम कसे परिभाषित करायचे हे शिकू.

पूर्वअट

या धड्यासाठी तुम्ही वेब अॅपचे HTML टेम्पलेट्स आणि रूटिंग पूर्ण केलेले असणे आवश्यक आहे. तुम्हाला Node.js स्थापित करणे आणि सर्व्हर API चालवणे स्थानिक पातळीवर सेट करणे आवश्यक आहे जेणेकरून तुम्ही खाती तयार करण्यासाठी डेटा पाठवू शकता.

महत्त्वाची नोंद तुमच्याकडे एकाच वेळी दोन टर्मिनल्स चालू असतील, खालीलप्रमाणे:

मुख्य बँक अॅपसाठी जो आपण HTML टेम्पलेट्स आणि रूटिंग धड्यात तयार केला.
बँक अॅप सर्व्हर API साठी जो आपण वर सेट केला.

पुढील धड्यासाठी दोन्ही सर्व्हर चालू असणे आवश्यक आहे. ते वेगवेगळ्या पोर्ट्सवर (पोर्ट 3000 आणि पोर्ट 5000) ऐकत असल्याने सर्व काही व्यवस्थित चालेल.

तुम्ही खालील कमांड टर्मिनलमध्ये चालवून सर्व्हर योग्यरित्या चालू आहे का ते तपासू शकता:

curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result

फॉर्म आणि नियंत्रण

<form> घटक HTML दस्तऐवजाचा एक विभाग समाविष्ट करतो जिथे वापरकर्ता परस्परसंवादी नियंत्रणांसह डेटा इनपुट आणि सबमिट करू शकतो. फॉर्ममध्ये वापरता येणाऱ्या सर्व प्रकारच्या वापरकर्ता इंटरफेस (UI) नियंत्रणांपैकी <input> आणि <button> हे सर्वात सामान्य आहेत.

<input> चे अनेक प्रकार आहेत. उदाहरणार्थ, वापरकर्त्याचे नाव प्रविष्ट करण्यासाठी तुम्ही खालीलप्रमाणे फील्ड तयार करू शकता:

<input id="username" name="username" type="text">

name अॅट्रिब्युट फॉर्म डेटा पाठवताना प्रॉपर्टीचे नाव म्हणून वापरले जाते. id अॅट्रिब्युट <label> ला फॉर्म कंट्रोलशी जोडण्यासाठी वापरले जाते.

<input> प्रकारांची आणि इतर फॉर्म नियंत्रणांची संपूर्ण यादी पाहा जेणेकरून UI तयार करताना तुम्ही कोणते मूळ UI घटक वापरू शकता याची कल्पना येईल.

✅ लक्षात ठेवा की <input> हा रिकामा घटक आहे ज्यावर तुम्ही जुळणारा क्लोजिंग टॅग जोडू नये. तुम्ही स्वतः-समाप्ती <input/> नोटेशन वापरू शकता, परंतु ते आवश्यक नाही.

फॉर्ममधील <button> घटक थोडा विशेष आहे. जर तुम्ही त्याच्या type अॅट्रिब्युटचे निर्दिष्ट केले नाही, तर ते दाबल्यावर फॉर्म डेटा आपोआप सर्व्हरवर सबमिट होईल. खालील type मूल्ये आहेत:

submit: फॉर्ममध्ये डीफॉल्ट, बटण फॉर्म सबमिट क्रिया ट्रिगर करते.
reset: बटण सर्व फॉर्म नियंत्रणांना त्यांच्या सुरुवातीच्या मूल्यांवर रीसेट करते.
button: बटण दाबल्यावर कोणतीही डीफॉल्ट क्रिया नियुक्त करत नाही. तुम्ही नंतर त्याला जावास्क्रिप्ट वापरून सानुकूल क्रिया नियुक्त करू शकता.

कार्य

चला login टेम्पलेटमध्ये फॉर्म जोडण्यापासून सुरुवात करूया. आपल्याला username फील्ड आणि Login बटण आवश्यक आहे.

<template id="login">
  <h1>Bank App</h1>
  <section>
    <h2>Login</h2>
    <form id="loginForm">
      <label for="username">Username</label>
      <input id="username" name="user" type="text">
      <button>Login</button>
    </form>
  </section>
</template>

जर तुम्ही बारकाईने पाहिले, तर तुम्हाला दिसेल की आम्ही येथे <label> घटक देखील जोडला आहे. <label> घटक UI नियंत्रणांना नाव देण्यासाठी वापरले जातात, जसे की आपले username फील्ड. लेबले तुमच्या फॉर्म्सच्या वाचनीयतेसाठी महत्त्वाच्या आहेत, तसेच त्यांचे अतिरिक्त फायदे देखील आहेत:

लेबल फॉर्म नियंत्रणाशी जोडल्याने, सहाय्यक तंत्रज्ञान (जसे की स्क्रीन रीडर) वापरणाऱ्या वापरकर्त्यांना त्यांना कोणता डेटा प्रदान करायचा आहे हे समजण्यास मदत होते.
तुम्ही लेबलवर क्लिक करून संबंधित इनपुटवर थेट फोकस ठेवू शकता, ज्यामुळे टच-स्क्रीन डिव्हाइसवर पोहोचणे सोपे होते.

वेबवरील प्रवेशयोग्यता हा एक महत्त्वाचा विषय आहे जो अनेकदा दुर्लक्षित केला जातो. सामान्य HTML घटकांमुळे योग्यरित्या वापरल्यास प्रवेशयोग्य सामग्री तयार करणे कठीण नाही. प्रवेशयोग्यतेबद्दल अधिक वाचा जेणेकरून सामान्य चुका टाळता येतील आणि जबाबदार विकसक बनता येईल.

आता आपण नोंदणीसाठी दुसरा फॉर्म जोडू, आधीच्या फॉर्मच्या खाली:

<hr/>
<h2>Register</h2>
<form id="registerForm">
  <label for="user">Username</label>
  <input id="user" name="user" type="text">
  <label for="currency">Currency</label>
  <input id="currency" name="currency" type="text" value="$">
  <label for="description">Description</label>
  <input id="description" name="description" type="text">
  <label for="balance">Current balance</label>
  <input id="balance" name="balance" type="number" value="0">
  <button>Register</button>
</form>

value अॅट्रिब्युट वापरून आपण दिलेल्या इनपुटसाठी डीफॉल्ट मूल्य परिभाषित करू शकतो. लक्षात घ्या की balance साठी इनपुटचा प्रकार number आहे. हे इतर इनपुट्सपेक्षा वेगळे दिसते का? त्यावर परस्परसंवाद करून पाहा.

✅ तुम्ही फक्त कीबोर्ड वापरून फॉर्म्स नेव्हिगेट आणि वापरू शकता का? तुम्ही ते कसे कराल?

सर्व्हरकडे डेटा सबमिट करणे

आता आपल्याकडे कार्यशील UI आहे, पुढील पाऊल म्हणजे डेटा सर्व्हरकडे पाठवणे. आपल्या सध्याच्या कोडचा वापर करून एक जलद चाचणी करूया: जर तुम्ही Login किंवा Register बटणावर क्लिक केले तर काय होते?

तुमच्या ब्राउझरच्या URL विभागात बदल लक्षात आला का?

<form> साठी डीफॉल्ट क्रिया म्हणजे GET पद्धतीचा वापर करून फॉर्म डेटा सध्याच्या सर्व्हर URL वर सबमिट करणे, फॉर्म डेटा थेट URL मध्ये जोडणे. परंतु या पद्धतीला काही मर्यादा आहेत:

पाठवलेला डेटा खूप मर्यादित आकाराचा असतो (सुमारे 2000 अक्षरे)
डेटा थेट URL मध्ये दिसतो (पासवर्डसाठी चांगले नाही)
फाइल अपलोडसह कार्य करत नाही

म्हणूनच तुम्ही POST पद्धतीचा वापर करू शकता, जो फॉर्म डेटा HTTP विनंतीच्या बॉडीमध्ये सर्व्हरकडे पाठवतो, वरील मर्यादा न ठेवता.

जरी POST ही डेटा पाठवण्यासाठी सर्वात सामान्यतः वापरली जाणारी पद्धत असली तरी, काही विशिष्ट परिस्थितींमध्ये GET पद्धत वापरणे योग्य असते, जसे की शोध फील्ड अंमलात आणताना.

कार्य

नोंदणी फॉर्ममध्ये action आणि method प्रॉपर्टीज जोडा:

<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">

आता तुमचे नाव वापरून नवीन खाते नोंदणी करण्याचा प्रयत्न करा. Register बटणावर क्लिक केल्यानंतर तुम्हाला असे काहीतरी दिसेल:

जर सर्व काही व्यवस्थित झाले, तर सर्व्हर तुमच्या विनंतीला तयार केलेल्या खात्याचा डेटा असलेल्या JSON प्रतिसादासह उत्तर देईल.

✅ त्याच नावाने पुन्हा नोंदणी करण्याचा प्रयत्न करा. काय होते?

पृष्ठ रीलोड न करता डेटा सबमिट करणे

तुम्हाला कदाचित लक्षात आले असेल की आपण वापरलेल्या पद्धतीत एक छोटी समस्या आहे: फॉर्म सबमिट करताना, आपण अॅपमधून बाहेर पडतो आणि ब्राउझर सर्व्हर URL वर पुनर्निर्देशित करतो. आपण पृष्ठ रीलोड टाळण्याचा प्रयत्न करत आहोत कारण आपण सिंगल-पेज अॅप्लिकेशन (SPA) तयार करत आहोत.

पृष्ठ रीलोड न करता फॉर्म डेटा सर्व्हरकडे पाठवण्यासाठी, आपल्याला जावास्क्रिप्ट कोड वापरावा लागेल. <form> घटकाच्या action प्रॉपर्टीमध्ये URL ठेवण्याऐवजी, तुम्ही javascript: स्ट्रिंगने सुरू होणारा कोणताही जावास्क्रिप्ट कोड वापरू शकता. याचा अर्थ असा की तुम्हाला ब्राउझरने आपोआप केलेल्या काही कार्यांची अंमलबजावणी करावी लागेल:

फॉर्म डेटा मिळवा
फॉर्म डेटा योग्य स्वरूपात रूपांतरित आणि एन्कोड करा
HTTP विनंती तयार करा आणि ती सर्व्हरकडे पाठवा

कार्य

नोंदणी फॉर्मच्या action ला खालीलप्रमाणे बदला:

<form id="registerForm" action="javascript:register()">

app.js उघडा आणि register नावाची नवीन फंक्शन तयार करा:

function register() {
  const registerForm = document.getElementById('registerForm');
  const formData = new FormData(registerForm);
  const data = Object.fromEntries(formData);
  const jsonData = JSON.stringify(data);
}

येथे आपण getElementById() वापरून फॉर्म घटक मिळवतो आणि FormData हेल्परचा वापर करून फॉर्म नियंत्रणांमधून की/व्हॅल्यू जोड्यांचा संच म्हणून मूल्ये काढतो. त्यानंतर आम्ही डेटा नियमित ऑब्जेक्टमध्ये रूपांतरित करतो Object.fromEntries() वापरून आणि शेवटी डेटा JSON मध्ये सिरीयलाइझ करतो, जो वेबवर डेटा एक्सचेंज करण्यासाठी सामान्यतः वापरला जातो.

डेटा आता सर्व्हरकडे पाठवण्यासाठी तयार आहे. createAccount नावाची नवीन फंक्शन तयार करा:

async function createAccount(account) {
  try {
    const response = await fetch('//localhost:5000/api/accounts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: account
    });
    return await response.json();
  } catch (error) {
    return { error: error.message || 'Unknown error' };
  }
}

ही फंक्शन काय करते? प्रथम, येथे async कीवर्ड लक्षात घ्या. याचा अर्थ असा की फंक्शनमध्ये असिंक्रोनस कोड असेल. await कीवर्डसह वापरल्यास, ते असिंक्रोनस कोड चालवण्यासाठी थांबण्याची परवानगी देते - जसे की येथे सर्व्हर प्रतिसादाची वाट पाहणे - पुढे जाण्यापूर्वी.

async/await वापराबद्दल एक जलद व्हिडिओ येथे आहे:

🎥 async/await बद्दल व्हिडिओसाठी वरील प्रतिमेवर क्लिक करा.

आम्ही JSON डेटा सर्व्हरकडे पाठवण्यासाठी fetch() API वापरतो. ही पद्धत 2 पॅरामीटर्स घेते:

सर्व्हरचा URL, म्हणून आम्ही येथे //localhost:5000/api/accounts परत ठेवतो.
विनंतीची सेटिंग्ज. येथे आम्ही पद्धत POST वर सेट करतो आणि विनंतीसाठी body प्रदान करतो. आम्ही सर्व्हरकडे JSON डेटा पाठवत असल्याने, आम्हाला Content-Type हेडर application/json वर सेट करणे आवश्यक आहे जेणेकरून सर्व्हरला सामग्री कशी समजून घ्यायची हे कळेल.

सर्व्हर विनंतीला JSON सह प्रतिसाद देईल, म्हणून आम्ही await response.json() वापरून JSON सामग्री पार्स करू शकतो आणि परिणामी ऑब्जेक्ट परत करू शकतो. लक्षात घ्या की ही पद्धत असिंक्रोनस आहे, म्हणून आम्ही येथे await कीवर्ड वापरतो जेणेकरून पार्सिंग दरम्यान कोणतीही त्रुटी देखील पकडली जाईल.

आता register फंक्शनमध्ये createAccount() कॉल करण्यासाठी काही कोड जोडा:

const result = await createAccount(jsonData);

आम्ही येथे await कीवर्ड वापरतो, म्हणून आम्हाला register फंक्शनच्या आधी async कीवर्ड जोडणे आवश्यक आहे:

async function register() {

शेवटी, निकाल तपासण्यासाठी काही लॉग्स जोडा. अंतिम फंक्शन असे दिसेल:

async function register() {
  const registerForm = document.getElementById('registerForm');
  const formData = new FormData(registerForm);
  const jsonData = JSON.stringify(Object.fromEntries(formData));
  const result = await createAccount(jsonData);

  if (result.error) {
    return console.log('An error occurred:', result.error);
  }

  console.log('Account created!', result);
}

हे थोडे लांबले, पण आपण तिथे पोहोचलो! जर तुम्ही तुमचे ब्राउझर डेव्हलपर टूल्स उघडले आणि नवीन खाते नोंदणी करण्याचा प्रयत्न केला, तर तुम्हाला वेब पृष्ठावर कोणताही बदल दिसणार नाही, परंतु कन्सोलमध्ये एक संदेश दिसेल जो पुष्टी करतो की सर्व काही कार्यरत आहे.

✅ तुम्हाला वाटते का की डेटा सर्व्हरकडे सुरक्षितपणे पाठवला जातो? जर कोणी विनंती अडवली तर काय होईल? HTTPS बद्दल वाचा जेणेकरून सुरक्षित डेटा संप्रेषणाबद्दल अधिक जाणून घेता येईल.

डेटा सत्यापन

जर तुम्ही username सेट न करता नवीन खाते नोंदणी करण्याचा प्रयत्न केला, तर तुम्हाला दिसेल की सर्व्हर 400 (Bad Request) त्रुटी परत करतो.

सर्व्हरकडे डेटा पाठवण्यापूर्वी, शक्य असल्यास फॉर्म डेटा सत्यापित करणे चांगली पद्धत आहे, जेणेकरून तुम्ही वैध विनंती पाठवू शकता. HTML5 फॉर्म नियंत्रण विविध अॅट्रिब्युट्स वापरून अंगभूत सत्यापन प्रदान करतात:

required: फील्ड भरले पाहिजे, अन्यथा फॉर्म सबमिट केला जाऊ शकत नाही.
minlength आणि maxlength: मजकूर फील्डमधील किमान आणि कमाल वर्णांची संख्या परिभाषित करते.
min आणि max: संख्यात्मक फील्डचे किमान आणि कमाल मूल्य परिभाषित करते.
type: अपेक्षित डेटाचा प्रकार परिभाषित करतो, जसे की number, email, file किंवा इतर अंगभूत प्रकार. हा अॅट्रिब्युट फॉर्म नियंत्रणाच्या दृश्य रेंडरिंगमध्ये बदल करू शकतो.
pattern: प्रविष्ट केलेला डेटा वैध आहे की नाही हे तपासण्यासाठी नियमित अभिव्यक्ती नमुना परिभाषित करण्याची परवानगी देते. टीप: तुम्ही तुमच्या फॉर्म कंट्रोल्सचा लूक वैध आहे किंवा नाही यावर आधारित सानुकूलित करू शकता, :valid आणि :invalid CSS प्स्यूडो-क्लासेस वापरून.

कार्य

नवीन खाते तयार करण्यासाठी दोन आवश्यक फील्ड्स आहेत: वापरकर्तानाव आणि चलन. इतर फील्ड्स ऐच्छिक आहेत. फॉर्मच्या HTML मध्ये सुधारणा करा, required अॅट्रिब्युट आणि फील्डच्या लेबलमधील मजकूर वापरून:

<label for="user">Username (required)</label>
<input id="user" name="user" type="text" required>
...
<label for="currency">Currency (required)</label>
<input id="currency" name="currency" type="text" value="$" required>

जरी या विशिष्ट सर्व्हर अंमलबजावणीमध्ये फील्ड्सच्या कमाल लांबीवर विशिष्ट मर्यादा लादलेल्या नसल्या तरी, कोणत्याही वापरकर्त्याच्या मजकूर प्रविष्टीसाठी वाजवी मर्यादा निश्चित करणे नेहमीच चांगली पद्धत आहे.

टेक्स्ट फील्ड्समध्ये maxlength अॅट्रिब्युट जोडा:

<input id="user" name="user" type="text" maxlength="20" required>
...
<input id="currency" name="currency" type="text" value="$" maxlength="5" required>
...
<input id="description" name="description" type="text" maxlength="100">

आता जर तुम्ही Register बटण दाबले आणि एखादे फील्ड आम्ही परिभाषित केलेल्या वैधता नियमांचे पालन करत नसेल, तर तुम्हाला असे काहीतरी दिसेल:

डेटा सर्व्हरवर पाठवण्यापूर्वी केलेली अशी वैधता तपासणी क्लायंट-साइड वैधता तपासणी म्हणून ओळखली जाते. पण लक्षात ठेवा की सर्व तपासण्या डेटा पाठवल्याशिवाय करणे नेहमीच शक्य नसते. उदाहरणार्थ, येथे आम्ही तपासू शकत नाही की समान वापरकर्तानाव असलेले खाते आधीच अस्तित्वात आहे का, जोपर्यंत आम्ही सर्व्हरला विनंती पाठवत नाही. सर्व्हरवर केलेली अतिरिक्त वैधता तपासणी सर्व्हर-साइड वैधता तपासणी म्हणून ओळखली जाते.

सामान्यतः दोन्ही अंमलात आणणे आवश्यक असते. क्लायंट-साइड वैधता तपासणी वापरल्याने वापरकर्त्याला त्वरित अभिप्राय मिळतो, ज्यामुळे वापरकर्ता अनुभव सुधारतो, तर सर्व्हर-साइड वैधता तपासणी महत्त्वाची असते कारण ती सुनिश्चित करते की तुम्ही हाताळत असलेला वापरकर्ता डेटा योग्य आणि सुरक्षित आहे.

🚀 आव्हान

जर वापरकर्ता आधीच अस्तित्वात असेल, तर HTML मध्ये एक त्रुटी संदेश दाखवा.

थोड्या स्टायलिंगनंतर अंतिम लॉगिन पृष्ठ कसे दिसू शकते याचे एक उदाहरण येथे आहे:

व्याख्यानानंतरचा क्विझ

पुनरावलोकन आणि स्व-अभ्यास

फॉर्म तयार करण्याच्या प्रयत्नांमध्ये विकसक खूप सर्जनशील झाले आहेत, विशेषतः वैधता रणनीतींबाबत. CodePen वरून वेगवेगळ्या फॉर्म फ्लोबद्दल जाणून घ्या; तुम्हाला काही मनोरंजक आणि प्रेरणादायक फॉर्म सापडतात का?

असाइनमेंट

तुमच्या बँक अॅपला स्टाइल करा

अस्वीकरण:
हा दस्तऐवज AI भाषांतर सेवा Co-op Translator वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने ग्रस्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार नाही.