30 KiB

Raw Blame History

ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਓ ਭਾਗ 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 ਟੈਂਪਲੇਟ ਵਿੱਚ ਇੱਕ ਫਾਰਮ ਸ਼ਾਮਲ ਕਰਕੇ ਸ਼ੁਰੂ ਕਰੀਏ। ਸਾਨੂੰ ਇੱਕ ਯੂਜ਼ਰਨੇਮ ਫੀਲਡ ਅਤੇ ਇੱਕ ਲੌਗਇਨ ਬਟਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ।

<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 ਕੰਟਰੋਲਾਂ ਨੂੰ ਨਾਮ ਦੇਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਸਾਡਾ ਯੂਜ਼ਰਨੇਮ ਫੀਲਡ। ਫਾਰਮਾਂ ਦੀ ਪੜ੍ਹਨਯੋਗਤਾ ਲਈ ਲੇਬਲ ਮਹੱਤਵਪੂਰਨ ਹਨ, ਪਰ ਇਹ ਵਾਧੂ ਫਾਇਦੇ ਵੀ ਲੈ ਕੇ ਆਉਂਦੇ ਹਨ:

ਇੱਕ ਲੇਬਲ ਨੂੰ ਫਾਰਮ ਕੰਟਰੋਲ ਨਾਲ ਜੋੜ ਕੇ, ਇਹ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ (ਜਿਵੇਂ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰ) ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲੇ ਵਰਤੋਂਕਾਰਾਂ ਨੂੰ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ ਕਿ ਉਹਨਾਂ ਨੂੰ ਕਿਹੜਾ ਡਾਟਾ ਪ੍ਰਦਾਨ ਕਰਨ ਦੀ ਉਮੀਦ ਹੈ।
ਤੁਸੀਂ ਲੇਬਲ 'ਤੇ ਕਲਿਕ ਕਰਕੇ ਸਿੱਧੇ ਹੀ ਸੰਬੰਧਿਤ ਇਨਪੁੱਟ 'ਤੇ ਫੋਕਸ ਕਰ ਸਕਦੇ ਹੋ, ਜਿਸ ਨਾਲ ਟਚ-ਸਕ੍ਰੀਨ ਅਧਾਰਿਤ ਡਿਵਾਈਸਾਂ 'ਤੇ ਪਹੁੰਚਣਾ ਆਸਾਨ ਹੋ ਜਾਂਦਾ ਹੈ।

ਵੈੱਬ 'ਤੇ ਪਹੁੰਚਯੋਗਤਾ ਇੱਕ ਬਹੁਤ ਹੀ ਮਹੱਤਵਪੂਰਨ ਵਿਸ਼ਾ ਹੈ ਜਿਸਨੂੰ ਅਕਸਰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਸੈਮਾਂਟਿਕ 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) ਬਣਾ ਰਹੇ ਹਾਂ।

ਫਾਰਮ ਡਾਟਾ ਨੂੰ ਸਰਵਰ 'ਤੇ ਭੇਜਣ ਲਈ ਬਿਨਾਂ ਪੰਨਾ ਰੀਲੋਡ ਕਰਨ ਲਈ, ਸਾਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਪਵੇਗੀ। <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 ਕੁੰਜੀਸ਼ਬਦ ਦੇ ਨਾਲ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਇਹ ਅਸਿੰਕ੍ਰੋਨਸ ਕੋਡ ਨੂੰ ਚਲਾਉਣ ਦੀ ਉਡੀਕ ਕਰਨ ਦੀ

ਸੁਝਾਅ: ਤੁਸੀਂ ਆਪਣੇ ਫਾਰਮ ਕੰਟਰੋਲਜ਼ ਦੇ ਦਿੱਖ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰ ਸਕਦੇ ਹੋ ਜੇ ਉਹ ਵੈਧ ਹਨ ਜਾਂ ਨਹੀਂ, CSS pseudo-classes :valid ਅਤੇ :invalid ਦੀ ਵਰਤੋਂ ਕਰਕੇ।

ਕੰਮ

ਨਵਾਂ ਖਾਤਾ ਬਣਾਉਣ ਲਈ 2 ਫੀਲਡਾਂ ਦੀ ਲੋੜ ਹੈ, ਯੂਜ਼ਰਨੇਮ ਅਤੇ ਕਰੰਸੀ, ਜਦਕਿ ਹੋਰ ਫੀਲਡਾਂ ਵਿਕਲਪਿਕ ਹਨ। ਫਾਰਮ ਦੇ 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 ਬਟਨ ਦਬਾਉਂਦੇ ਹੋ ਅਤੇ ਕੋਈ ਫੀਲਡ ਉਹ ਵੈਧਤਾ ਨਿਯਮਾਂ ਦੀ ਪਾਲਣਾ ਨਹੀਂ ਕਰਦਾ ਜੋ ਅਸੀਂ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤੇ ਹਨ, ਤਾਂ ਤੁਹਾਨੂੰ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਣ ਨੂੰ ਮਿਲੇਗਾ:

ਇਸ ਤਰ੍ਹਾਂ ਦੀ ਵੈਧਤਾ ਜੋ ਡਾਟਾ ਸਰਵਰ ਨੂੰ ਭੇਜਣ ਤੋਂ ਪਹਿਲਾਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਕਲਾਇੰਟ-ਸਾਈਡ ਵੈਧਤਾ ਕਹਿੰਦੀ ਹੈ। ਪਰ ਧਿਆਨ ਦਿਓ ਕਿ ਸਾਰੇ ਚੈੱਕ ਡਾਟਾ ਭੇਜਣ ਤੋਂ ਬਿਨਾਂ ਕਰਨਾ ਹਮੇਸ਼ਾ ਸੰਭਵ ਨਹੀਂ ਹੁੰਦਾ। ਉਦਾਹਰਣ ਲਈ, ਅਸੀਂ ਇੱਥੇ ਜਾਂਚ ਨਹੀਂ ਕਰ ਸਕਦੇ ਕਿ ਕੀ ਇੱਕ ਖਾਤਾ ਪਹਿਲਾਂ ਹੀ ਉਸੇ ਯੂਜ਼ਰਨੇਮ ਨਾਲ ਮੌਜੂਦ ਹੈ ਬਿਨਾਂ ਸਰਵਰ ਨੂੰ ਬੇਨਤੀ ਭੇਜਣ ਦੇ। ਸਰਵਰ 'ਤੇ ਕੀਤੀ ਗਈ ਵਾਧੂ ਵੈਧਤਾ ਨੂੰ ਸਰਵਰ-ਸਾਈਡ ਵੈਧਤਾ ਕਿਹਾ ਜਾਂਦਾ ਹੈ।

ਆਮ ਤੌਰ 'ਤੇ ਦੋਵੇਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਅਤੇ ਜਦਕਿ ਕਲਾਇੰਟ-ਸਾਈਡ ਵੈਧਤਾ ਯੂਜ਼ਰ ਨੂੰ ਤੁਰੰਤ ਫੀਡਬੈਕ ਦੇ ਕੇ ਯੂਜ਼ਰ ਅਨੁਭਵ ਨੂੰ ਸੁਧਾਰਦੀ ਹੈ, ਸਰਵਰ-ਸਾਈਡ ਵੈਧਤਾ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ ਕਿ ਤੁਸੀਂ ਜੋ ਯੂਜ਼ਰ ਡਾਟਾ ਪ੍ਰੋਸੈਸ ਕਰ ਰਹੇ ਹੋ ਉਹ ਸਹੀ ਅਤੇ ਸੁਰੱਖਿਅਤ ਹੈ।

GitHub Copilot Agent ਚੈਲੈਂਜ 🚀

Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:

ਵੇਰਵਾ: ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਨੂੰ ਵਿਸਤ੍ਰਿਤ ਕਲਾਇੰਟ-ਸਾਈਡ ਵੈਧਤਾ ਅਤੇ ਯੂਜ਼ਰ ਫੀਡਬੈਕ ਨਾਲ ਸੁਧਾਰੋ। ਇਹ ਚੈਲੈਂਜ ਤੁਹਾਨੂੰ ਫਾਰਮ ਵੈਧਤਾ, ਗਲਤੀ ਸੰਭਾਲਣ, ਅਤੇ ਇੰਟਰੈਕਟਿਵ ਫੀਡਬੈਕ ਨਾਲ ਯੂਜ਼ਰ ਅਨੁਭਵ ਨੂੰ ਸੁਧਾਰਨ ਦੀ ਅਭਿਆਸ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ।

ਪ੍ਰੇਰਨਾ: ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਲਈ ਪੂਰੀ ਵੈਧਤਾ ਪ੍ਰਣਾਲੀ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਵੇ: 1) ਜਦੋਂ ਯੂਜ਼ਰ ਟਾਈਪ ਕਰਦਾ ਹੈ ਤਾਂ ਹਰ ਫੀਲਡ ਲਈ ਰੀਅਲ-ਟਾਈਮ ਵੈਧਤਾ ਫੀਡਬੈਕ, 2) ਹਰ ਇਨਪੁਟ ਫੀਲਡ ਦੇ ਹੇਠਾਂ ਕਸਟਮ ਵੈਧਤਾ ਸੁਨੇਹੇ, 3) ਪਾਸਵਰਡ ਪੁਸ਼ਟੀ ਫੀਲਡ ਜਿਸ ਵਿੱਚ ਮੈਚਿੰਗ ਵੈਧਤਾ ਹੋਵੇ, 4) ਵਿਜ਼ੂਅਲ ਇੰਡੀਕੇਟਰ (ਜਿਵੇਂ ਕਿ ਵੈਧ ਫੀਲਡਾਂ ਲਈ ਹਰੇ ਚਿੰਨ੍ਹ ਅਤੇ ਅਵੈਧ ਲਈ ਲਾਲ ਚੇਤਾਵਨੀ), 5) ਇੱਕ ਸਬਮਿਟ ਬਟਨ ਜੋ ਸਿਰਫ਼ ਤਦ ਹੀ ਐਨਬਲ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਸਾਰੀਆਂ ਵੈਧਤਾਵਾਂ ਪੂਰੀਆਂ ਹੁੰਦੀਆਂ ਹਨ। ਇੰਟਰੈਕਟਿਵ ਵਿਹਾਰ ਲਈ HTML5 ਵੈਧਤਾ ਐਟ੍ਰਿਬਿਊਟ, CSS ਸਟਾਈਲਿੰਗ ਅਤੇ JavaScript ਦੀ ਵਰਤੋਂ ਕਰੋ।

🚀 ਚੈਲੈਂਜ

HTML ਵਿੱਚ ਗਲਤੀ ਸੁਨੇਹਾ ਦਿਖਾਓ ਜੇ ਯੂਜ਼ਰ ਪਹਿਲਾਂ ਹੀ ਮੌਜੂਦ ਹੈ।

ਇੱਥੇ ਇੱਕ ਉਦਾਹਰਣ ਹੈ ਕਿ CSS ਸਟਾਈਲਿੰਗ ਸ਼ਾਮਲ ਕਰਨ ਤੋਂ ਬਾਅਦ ਅੰਤਮ ਲੌਗਇਨ ਪੇਜ ਕਿਵੇਂ ਲੱਗ ਸਕਦਾ ਹੈ:

ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼

ਸਮੀਖਾ ਅਤੇ ਸਵੈ ਅਧਿਐਨ

ਡਿਵੈਲਪਰਜ਼ ਆਪਣੇ ਫਾਰਮ ਬਣਾਉਣ ਦੇ ਯਤਨਾਂ ਬਾਰੇ ਬਹੁਤ ਹੀ ਰਚਨਾਤਮਕ ਹੋ ਗਏ ਹਨ, ਖਾਸ ਕਰਕੇ ਵੈਧਤਾ ਰਣਨੀਤੀਆਂ ਦੇ ਸੰਦਰਭ ਵਿੱਚ। CodePen ਦੇਖ ਕੇ ਵੱਖ-ਵੱਖ ਫਾਰਮ ਫਲੋਜ਼ ਬਾਰੇ ਸਿੱਖੋ; ਕੀ ਤੁਸੀਂ ਕੁਝ ਦਿਲਚਸਪ ਅਤੇ ਪ੍ਰੇਰਣਾਦਾਇਕ ਫਾਰਮ ਲੱਭ ਸਕਦੇ ਹੋ?

ਅਸਾਈਨਮੈਂਟ

ਆਪਣੇ ਬੈਂਕ ਐਪ ਨੂੰ ਸਜਾਓ

ਅਸਵੀਕਰਤਾ:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।

30 KiB Raw Blame History