Web-Dev-For-Beginners/translations/mr/7-bank-project/2-forms/README.md

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

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

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

परिचय

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

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

पूर्वअट

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

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

1. मुख्य बँक अ‍ॅपसाठी जो आपण HTML टेम्पलेट्स आणि रूटिंग धड्यात तयार केला.
2. बँक अ‍ॅप सर्व्हर 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: बटण दाबल्यावर कोणतेही डीफॉल्ट वर्तन नियुक्त करत नाही. तुम्ही नंतर त्याला JavaScript वापरून सानुकूल क्रिया नियुक्त करू शकता.

कार्य

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

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

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

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

कार्य

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

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

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

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

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

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

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

फॉर्म डेटा सर्व्हरवर पृष्ठ रीलोड न करता पाठवण्यासाठी, आपल्याला JavaScript कोड वापरावा लागेल. <form> घटकाच्या action गुणधर्मात URL ठेवण्याऐवजी, तुम्ही javascript: स्ट्रिंगने सुरू होणारा कोणताही 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 वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण होणाऱ्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.