41 KiB

Raw Blame History Unescape Escape

بینکنگ ایپ بنائیں حصہ 2: لاگ ان اور رجسٹریشن فارم بنائیں

پری لیکچر کوئز

کیا آپ نے کبھی آن لائن فارم بھرا ہے اور آپ کا ای میل فارمیٹ مسترد ہو گیا؟ یا سب کچھ ختم ہو گیا جب آپ نے سبمٹ پر کلک کیا؟ ہم سب نے ان پریشان کن تجربات کا سامنا کیا ہے۔

فارمز آپ کے صارفین اور آپ کی ایپلیکیشن کی فعالیت کے درمیان پل ہیں۔ جیسے ہوائی جہاز کے کنٹرولرز کے محتاط پروٹوکول جو جہازوں کو محفوظ طریقے سے ان کی منزل تک پہنچاتے ہیں، اچھے ڈیزائن کردہ فارمز واضح فیڈبیک فراہم کرتے ہیں اور مہنگی غلطیوں کو روکتے ہیں۔ دوسری طرف، خراب فارمز صارفین کو اتنی جلدی دور کر سکتے ہیں جیسے مصروف ہوائی اڈے میں غلط فہمی۔

اس سبق میں، ہم آپ کی جامد بینکنگ ایپ کو ایک انٹرایکٹو ایپلیکیشن میں تبدیل کریں گے۔ آپ سیکھیں گے کہ ایسے فارمز کیسے بنائیں جو صارف کے ان پٹ کی تصدیق کریں، سرورز کے ساتھ بات چیت کریں، اور مددگار فیڈبیک فراہم کریں۔ اسے اس کنٹرول انٹرفیس کی تعمیر کے طور پر سوچیں جو صارفین کو آپ کی ایپلیکیشن کی خصوصیات کو نیویگیٹ کرنے دیتا ہے۔

آخر میں، آپ کے پاس ایک مکمل لاگ ان اور رجسٹریشن سسٹم ہوگا جس میں تصدیق شامل ہوگی جو صارفین کو مایوسی کے بجائے کامیابی کی طرف رہنمائی کرے گا۔

پیشگی شرائط

فارمز بنانا شروع کرنے سے پہلے، آئیے یقینی بنائیں کہ آپ نے سب کچھ صحیح طریقے سے سیٹ اپ کیا ہے۔ یہ سبق وہیں سے شروع ہوتا ہے جہاں ہم نے پچھلے سبق میں چھوڑا تھا، لہذا اگر آپ نے آگے بڑھ کر سبق چھوڑ دیا ہے، تو آپ پہلے بنیادی باتیں کام کرنے کے لیے واپس جا سکتے ہیں۔

مطلوبہ سیٹ اپ

جزو	حیثیت	تفصیل
HTML ٹیمپلیٹس	✅ ضروری	آپ کی بنیادی بینکنگ ایپ کی ساخت
Node.js	✅ ضروری	سرور کے لیے جاوا اسکرپٹ رن ٹائم
بینک API سرور	✅ ضروری	ڈیٹا اسٹوریج کے لیے بیک اینڈ سروس

💡 ترقیاتی مشورہ: آپ دو الگ الگ سرورز کو ایک ساتھ چلائیں گے – ایک آپ کی فرنٹ اینڈ بینکنگ ایپ کے لیے اور دوسرا بیک اینڈ API کے لیے۔ یہ سیٹ اپ حقیقی دنیا کی ترقی کی عکاسی کرتا ہے جہاں فرنٹ اینڈ اور بیک اینڈ سروسز آزادانہ طور پر کام کرتی ہیں۔

سرور کنفیگریشن

آپ کے ترقیاتی ماحول میں شامل ہوگا:

فرنٹ اینڈ سرور: آپ کی بینکنگ ایپ فراہم کرتا ہے (عام طور پر پورٹ 3000)
بیک اینڈ API سرور: ڈیٹا اسٹوریج اور بازیافت کو ہینڈل کرتا ہے (پورٹ 5000)
دونوں سرورز بغیر کسی تنازع کے ایک ساتھ چل سکتے ہیں

اپنے API کنکشن کی جانچ کریں:

curl http://localhost:5000/api
# Expected response: "Bank API v1.0.0"

اگر آپ API ورژن کا جواب دیکھتے ہیں، تو آپ آگے بڑھنے کے لیے تیار ہیں!

HTML فارمز اور کنٹرولز کو سمجھنا

HTML فارمز وہ طریقہ ہیں جس کے ذریعے صارفین آپ کی ویب ایپلیکیشن کے ساتھ بات چیت کرتے ہیں۔ انہیں 19ویں صدی میں دور دراز جگہوں کو جوڑنے والے ٹیلی گراف سسٹم کے طور پر سوچیں – یہ صارف کے ارادے اور ایپلیکیشن کے ردعمل کے درمیان مواصلاتی پروٹوکول ہیں۔ جب سوچ سمجھ کر ڈیزائن کیا جائے تو وہ غلطیوں کو پکڑتے ہیں، ان پٹ فارمیٹنگ کی رہنمائی کرتے ہیں، اور مددگار تجاویز فراہم کرتے ہیں۔

جدید فارمز بنیادی ٹیکسٹ ان پٹ سے نمایاں طور پر زیادہ نفیس ہیں۔ HTML5 نے خصوصی ان پٹ اقسام متعارف کروائیں جو خود بخود ای میل کی تصدیق، نمبر فارمیٹنگ، اور تاریخ کا انتخاب کرتی ہیں۔ یہ بہتریاں رسائی اور موبائل صارف کے تجربات دونوں کے لیے فائدہ مند ہیں۔

ضروری فارم عناصر

ہر فارم کو جن تعمیراتی بلاکس کی ضرورت ہوتی ہے:

<!-- Basic form structure -->
<form id="userForm" method="POST">
  <label for="username">Username</label>
  <input id="username" name="username" type="text" required>
  
  <button type="submit">Submit</button>
</form>

یہ کوڈ کیا کرتا ہے:

ایک فارم کنٹینر بناتا ہے جس میں منفرد شناخت کنندہ ہوتا ہے
ڈیٹا جمع کرانے کے لیے HTTP طریقہ کار کی وضاحت کرتا ہے
لیبلز کو ان پٹس کے ساتھ منسلک کرتا ہے تاکہ رسائی کو بہتر بنایا جا سکے
فارم کو پروسیس کرنے کے لیے ایک سبمٹ بٹن کی وضاحت کرتا ہے

جدید ان پٹ اقسام اور خصوصیات

ان پٹ قسم	مقصد	مثال استعمال
`text`	عمومی ٹیکسٹ ان پٹ	`<input type="text" name="username">`
`email`	ای میل کی تصدیق	`<input type="email" name="email">`
`password`	چھپے ہوئے ٹیکسٹ انٹری	`<input type="password" name="password">`
`number`	عددی ان پٹ	`<input type="number" name="balance" min="0">`
`tel`	فون نمبر	`<input type="tel" name="phone">`

💡 جدید HTML5 فائدہ: مخصوص ان پٹ اقسام کا استعمال خودکار تصدیق، مناسب موبائل کی بورڈز، اور اضافی جاوا اسکرپٹ کے بغیر بہتر رسائی کی حمایت فراہم کرتا ہے!

بٹن کی اقسام اور رویہ

<!-- Different button behaviors -->
<button type="submit">Save Data</button>     <!-- Submits the form -->
<button type="reset">Clear Form</button>    <!-- Resets all fields -->
<button type="button">Custom Action</button> <!-- No default behavior -->

ہر بٹن کی قسم کیا کرتی ہے:

سبمٹ بٹن: فارم جمع کرانے کو متحرک کرتا ہے اور ڈیٹا کو مخصوص اینڈ پوائنٹ پر بھیجتا ہے
ری سیٹ بٹن: تمام فارم فیلڈز کو ان کی ابتدائی حالت میں بحال کرتا ہے
عام بٹن: کوئی ڈیفالٹ رویہ فراہم نہیں کرتا، فعالیت کے لیے کسٹم جاوا اسکرپٹ کی ضرورت ہوتی ہے

⚠️ اہم نوٹ: <input> عنصر خود بند ہونے والا ہے اور بند کرنے والے ٹیگ کی ضرورت نہیں ہے۔ جدید بہترین عمل <input> کو بغیر سلیش کے لکھنا ہے۔

اپنا لاگ ان فارم بنانا

اب آئیے ایک عملی لاگ ان فارم بنائیں جو جدید HTML فارم کے طریقوں کو ظاہر کرتا ہے۔ ہم بنیادی ڈھانچے سے شروع کریں گے اور اسے رسائی کی خصوصیات اور تصدیق کے ساتھ بتدریج بہتر بنائیں گے۔

<template id="login">
  <h1>Bank App</h1>
  <section>
    <h2>Login</h2>
    <form id="loginForm" novalidate>
      <div class="form-group">
        <label for="username">Username</label>
        <input id="username" name="user" type="text" required 
               autocomplete="username" placeholder="Enter your username">
      </div>
      <button type="submit">Login</button>
    </form>
  </section>
</template>

یہاں کیا ہوتا ہے:

فارم کو سیمینٹک HTML5 عناصر کے ساتھ ترتیب دیتا ہے
متعلقہ عناصر کو معنی خیز کلاسز کے ساتھ div کنٹینرز میں گروپ کرتا ہے
لیبلز کو for اور id خصوصیات کا استعمال کرتے ہوئے ان پٹس کے ساتھ منسلک کرتا ہے
بہتر UX کے لیے جدید خصوصیات جیسے autocomplete اور placeholder شامل کرتا ہے
تصدیق کو براؤزر کے ڈیفالٹس کے بجائے جاوا اسکرپٹ کے ساتھ ہینڈل کرنے کے لیے novalidate شامل کرتا ہے

مناسب لیبلز کی طاقت

جدید ویب ڈویلپمنٹ کے لیے لیبلز کیوں اہم ہیں:

graph TD
    A[Label Element] --> B[Screen Reader Support]
    A --> C[Click Target Expansion]
    A --> D[Form Validation]
    A --> E[SEO Benefits]
    
    B --> F[Accessible to all users]
    C --> G[Better mobile experience]
    D --> H[Clear error messaging]
    E --> I[Better search ranking]

مناسب لیبلز کیا حاصل کرتے ہیں:

اسکرین ریڈرز کو فارم فیلڈز کو واضح طور پر اعلان کرنے کے قابل بناتا ہے
کلک ایریا کو بڑھاتا ہے (لیبل پر کلک کرنے سے ان پٹ پر فوکس ہوتا ہے)
موبائل استعمال کو بہتر بناتا ہے بڑے ٹچ ٹارگٹس کے ساتھ
فارم کی تصدیق کو معنی خیز غلطی کے پیغامات کے ساتھ سپورٹ کرتا ہے
SEO کو بہتر بناتا ہے فارم عناصر کو سیمینٹک معنی فراہم کرکے

🎯 رسائی کا مقصد: ہر فارم ان پٹ کے ساتھ ایک منسلک لیبل ہونا چاہیے۔ یہ سادہ عمل آپ کے فارمز کو ہر کسی کے لیے قابل استعمال بناتا ہے، بشمول معذوری والے صارفین، اور تمام صارفین کے لیے تجربہ کو بہتر بناتا ہے۔

رجسٹریشن فارم بنانا

رجسٹریشن فارم کو مکمل صارف اکاؤنٹ بنانے کے لیے زیادہ تفصیلی معلومات کی ضرورت ہوتی ہے۔ آئیے اسے جدید HTML5 خصوصیات اور بہتر رسائی کے ساتھ بنائیں۔

<hr/>
<h2>Register</h2>
<form id="registerForm" novalidate>
  <div class="form-group">
    <label for="user">Username</label>
    <input id="user" name="user" type="text" required 
           autocomplete="username" placeholder="Choose a username">
  </div>
  
  <div class="form-group">
    <label for="currency">Currency</label>
    <input id="currency" name="currency" type="text" value="$" 
           required maxlength="3" placeholder="USD, EUR, etc.">
  </div>
  
  <div class="form-group">
    <label for="description">Account Description</label>
    <input id="description" name="description" type="text" 
           maxlength="100" placeholder="Personal savings, checking, etc.">
  </div>
  
  <div class="form-group">
    <label for="balance">Starting Balance</label>
    <input id="balance" name="balance" type="number" value="0" 
           min="0" step="0.01" placeholder="0.00">
  </div>
  
  <button type="submit">Create Account</button>
</form>

اوپر، ہم نے:

ہر فیلڈ کو بہتر اسٹائلنگ اور لے آؤٹ کے لیے کنٹینر ڈیو میں منظم کیا
مناسب autocomplete خصوصیات شامل کیں تاکہ براؤزر آٹو فل کی حمایت ہو
مددگار پلیس ہولڈر ٹیکسٹ شامل کیا تاکہ صارف کے ان پٹ کی رہنمائی ہو
مناسب ڈیفالٹس سیٹ کیے value خصوصیت کا استعمال کرتے ہوئے
تصدیق کی خصوصیات شامل کیں جیسے required, maxlength, اور min
بیلنس فیلڈ کے لیے type="number" استعمال کیا جس میں اعشاریہ کی حمایت ہو

ان پٹ اقسام اور رویہ کو دریافت کرنا

جدید ان پٹ اقسام بہتر فعالیت فراہم کرتی ہیں:

خصوصیت	فائدہ	مثال
`type="number"`	موبائل پر عددی کیپیڈ	بیلنس انٹری کو آسان بناتا ہے
`step="0.01"`	اعشاریہ کی درستگی کا کنٹرول	کرنسی میں سینٹس کی اجازت دیتا ہے
`autocomplete`	براؤزر آٹو فل	فارم مکمل کرنے میں تیزی
`placeholder`	سیاق و سباق کے اشارے	صارف کی توقعات کی رہنمائی کرتا ہے

🎯 رسائی کا چیلنج: صرف اپنے کی بورڈ کا استعمال کرتے ہوئے فارمز کو نیویگیٹ کرنے کی کوشش کریں! Tab کا استعمال کریں فیلڈز کے درمیان حرکت کرنے کے لیے، Space چیک باکسز کو چیک کرنے کے لیے، اور Enter فارم جمع کرانے کے لیے۔ یہ تجربہ آپ کو سمجھنے میں مدد دیتا ہے کہ اسکرین ریڈر صارفین آپ کے فارمز کے ساتھ کیسے تعامل کرتے ہیں۔

فارم جمع کرانے کے طریقوں کو سمجھنا

جب کوئی آپ کے فارم کو بھر کر سبمٹ کرتا ہے، تو وہ ڈیٹا کہیں جانا چاہیے – عام طور پر ایک سرور پر جو اسے محفوظ کر سکتا ہے۔ یہ مختلف طریقوں سے ہو سکتا ہے، اور یہ جاننا کہ کون سا استعمال کرنا ہے آپ کو بعد میں کچھ پریشانیوں سے بچا سکتا ہے۔

آئیے دیکھتے ہیں کہ جب کوئی سبمٹ بٹن پر کلک کرتا ہے تو اصل میں کیا ہوتا ہے۔

ڈیفالٹ فارم رویہ

پہلے، آئیے بنیادی فارم جمع کرانے کے ساتھ کیا ہوتا ہے دیکھیں:

اپنے موجودہ فارمز کی جانچ کریں:

اپنے فارم میں رجسٹر بٹن پر کلک کریں
اپنے براؤزر کے ایڈریس بار میں تبدیلیاں دیکھیں
نوٹ کریں کہ صفحہ کیسے ری لوڈ ہوتا ہے اور ڈیٹا URL میں ظاہر ہوتا ہے

HTTP طریقوں کا موازنہ

graph TD
    A[Form Submission] --> B{HTTP Method}
    B -->|GET| C[Data in URL]
    B -->|POST| D[Data in Request Body]
    
    C --> E[Visible in address bar]
    C --> F[Limited data size]
    C --> G[Bookmarkable]
    
    D --> H[Hidden from URL]
    D --> I[Large data capacity]
    D --> J[More secure]

فرق کو سمجھنا:

طریقہ	استعمال کا کیس	ڈیٹا کی جگہ	سیکیورٹی کی سطح	سائز کی حد
`GET`	تلاش کے سوالات، فلٹرز	URL پیرامیٹرز	کم (ظاہر)	~2000 حروف
`POST`	صارف اکاؤنٹس، حساس ڈیٹا	درخواست کا جسم	زیادہ (چھپا ہوا)	کوئی عملی حد نہیں

بنیادی فرق کو سمجھنا:

GET: فارم ڈیٹا کو URL میں کوئری پیرامیٹرز کے طور پر شامل کرتا ہے (تلاش کے آپریشنز کے لیے موزوں)
POST: ڈیٹا کو درخواست کے جسم میں شامل کرتا ہے (حساس معلومات کے لیے ضروری)
GET کی حدود: سائز کی پابندیاں، ظاہر ڈیٹا، مستقل براؤزر کی تاریخ
POST کے فوائد: بڑے ڈیٹا کی گنجائش، پرائیویسی تحفظ، فائل اپلوڈ کی حمایت

💡 بہترین عمل: تلاش کے فارمز اور فلٹرز کے لیے GET استعمال کریں (ڈیٹا بازیافت)، صارف رجسٹریشن، لاگ ان، اور ڈیٹا تخلیق کے لیے POST استعمال کریں۔

فارم جمع کرانے کی ترتیب

آئیے اپنے رجسٹریشن فارم کو صحیح طریقے سے بیک اینڈ API کے ساتھ بات چیت کرنے کے لیے POST طریقہ استعمال کرتے ہوئے ترتیب دیں:

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

یہ ترتیب کیا کرتی ہے:

فارم جمع کرانے کو آپ کے API اینڈ پوائنٹ پر ہدایت دیتا ہے
محفوظ ڈیٹا ٹرانسمیشن کے لیے POST طریقہ استعمال کرتا ہے
تصدیق کو جاوا اسکرپٹ کے ساتھ ہینڈل کرنے کے لیے novalidate شامل کرتا ہے

فارم جمع کرانے کی جانچ

اپنے فارم کی جانچ کرنے کے لیے یہ اقدامات کریں:

رجسٹریشن فارم کو اپنی معلومات کے ساتھ بھریں
"اکاؤنٹ بنائیں" بٹن پر کلک کریں
اپنے براؤزر میں سرور کے جواب کا مشاہدہ کریں

آپ کو کیا دیکھنا چاہیے:

براؤزر API اینڈ پوائنٹ URL پر ری ڈائریکٹ ہوتا ہے
JSON جواب جس میں آپ کے نئے بنائے گئے اکاؤنٹ کا ڈیٹا شامل ہوتا ہے
سرور کی تصدیق کہ اکاؤنٹ کامیابی سے بنایا گیا ہے

🧪 تجربہ کا وقت: دوبارہ اسی صارف نام کے ساتھ رجسٹریشن کرنے کی کوشش کریں۔ آپ کو کیا جواب ملتا ہے؟ یہ آپ کو سمجھنے میں مدد دیتا ہے کہ سرور ڈپلیکیٹ ڈیٹا اور غلطی کی شرائط کو کیسے ہینڈل کرتا ہے۔

JSON جوابات کو سمجھنا

جب سرور آپ کے فارم کو کامیابی سے پروسیس کرتا ہے:

{
  "user": "john_doe",
  "currency": "$",
  "description": "Personal savings",
  "balance": 100,
  "id": "unique_account_id"
}

یہ جواب تصدیق کرتا ہے:

آپ کے مخصوص ڈیٹا کے ساتھ ایک نیا اکاؤنٹ بناتا ہے
مستقبل کے حوالہ کے لیے ایک منفرد شناخت کنندہ تفویض کرتا ہے
تمام اکاؤنٹ معلومات واپس کرتا ہے تصدیق کے لیے
کامیاب ڈیٹا بیس اسٹوریج کی نشاندہی کرتا ہے

جاوا اسکرپٹ کے ساتھ جدید فارم ہینڈلنگ

روایتی فارم جمع کرانے سے پورے صفحے کو ری لوڈ کرنے کی ضرورت ہوتی ہے، جیسے ابتدائی خلائی مشن کورس کی اصلاحات کے لیے مکمل سسٹم ری سیٹ کی ضرورت ہوتی تھی۔ یہ طریقہ صارف کے تجربے کو متاثر کرتا ہے اور ایپلیکیشن کی حالت کو کھو دیتا ہے۔

جاوا اسکرپٹ فارم ہینڈلنگ جدید خلائی جہاز کے مسلسل رہنمائی کے نظام کی طرح کام کرتی ہے – نیویگیشن کے سیاق و سباق کو کھوئے بغیر حقیقی وقت میں ایڈجسٹمنٹ کرتی ہے۔ ہم فارم جمع کرانے کو روک سکتے ہیں، فوری فیڈبیک فراہم کر سکتے ہیں، غلطیوں کو خوش اسلوبی سے ہینڈل کر سکتے ہیں، اور صارف کی پوزیشن کو ایپلیکیشن میں برقرار رکھتے ہوئے سرور کے جوابات کی بنیاد پر انٹرفیس کو اپ ڈیٹ کر سکتے ہیں۔

صفحہ ری لوڈ سے بچنے کی وجوہات

sequenceDiagram
    participant User
    participant SPA
    participant Server
    
    User->>SPA: Submits form
    SPA->>Server: AJAX request
    Server-->>SPA: JSON response
    SPA->>User: Updates interface
    
    Note over User,SPA: No page reload!

جاوا اسکرپٹ فارم ہینڈلنگ کے فوائد:

ایپلیکیشن کی حالت اور صارف کے سیاق و سباق کو برقرار رکھتا ہے
فوری فیڈبیک اور لوڈنگ اشارے فراہم کرتا ہے
متحرک غلطی کی ہینڈلنگ اور تصدیق کو فعال کرتا ہے
ہموار، ایپ جیسے صارف کے تجربات تخلیق کرتا ہے
سرور کے جوابات کی بنیاد پر مشروط منطق کی اجازت دیتا ہے

روایتی سے جدید فارمز کی طرف منتقلی

روایتی طریقہ کار کے چیلنجز:

صارفین کو آپ کی ایپلیکیشن سے دور لے جاتا ہے
موجودہ ایپلیکیشن کی حالت اور سیاق و سباق کو کھو دیتا ہے
سادہ آپریشنز کے لیے پورے صفحے کو ری لوڈ کرنے کی ضرورت ہوتی ہے
صارف کے فیڈبیک پر محدود کنٹرول فراہم کرتا ہے

جدید جاوا اسکرپٹ طریقہ کار کے فوائد:

صارفین کو آپ کی ایپلیکیشن کے اندر رکھتا ہے
تمام ایپلیکیشن کی حالت اور ڈیٹا کو برقرار رکھتا ہے
حقیقی وقت کی تصدیق اور فیڈبیک کو فعال کرتا ہے
ترقی پسند اضافہ اور رسائی کی حمایت کرتا ہے

جاوا اسکرپٹ فارم ہینڈلنگ کو ناف

تفصیل فراہم کرتا ہے ڈیبگنگ کے لیے تفصیلی ایرر میسیجز
واپس کرتا ہے کامیابی اور ایرر کیسز کے لیے مستقل ڈیٹا اسٹرکچر

جدید Fetch API کی طاقت

پرانے طریقوں کے مقابلے میں Fetch API کے فوائد:

خصوصیت	فائدہ	عمل درآمد
وعدہ پر مبنی	صاف ستھرا غیر ہم وقت کوڈ	`await fetch()`
درخواست کی تخصیص	مکمل HTTP کنٹرول	ہیڈرز، طریقے، باڈی
جواب کی ہینڈلنگ	لچکدار ڈیٹا پارسنگ	`.json()`, `.text()`, `.blob()`
ایرر ہینڈلنگ	جامع ایرر کیچنگ	Try/catch بلاکس

🎥 مزید سیکھیں: Async/Await Tutorial - جدید ویب ڈیولپمنٹ کے لیے غیر ہم وقت جاوا اسکرپٹ پیٹرنز کو سمجھنا۔

سرور کے ساتھ مواصلات کے اہم تصورات:

غیر ہم وقت فنکشنز سرور کے جوابات کا انتظار کرنے کے لیے عمل کو روکنے کی اجازت دیتے ہیں
Await کلیدی لفظ غیر ہم وقت کوڈ کو ہم وقت کوڈ کی طرح پڑھنے کے قابل بناتا ہے
Fetch API جدید، وعدہ پر مبنی HTTP درخواستیں فراہم کرتا ہے
ایرر ہینڈلنگ یقینی بناتا ہے کہ آپ کی ایپ نیٹ ورک کے مسائل پر خوش اسلوبی سے جواب دے

رجسٹریشن فنکشن مکمل کرنا

آئیے سب کچھ ایک مکمل، پروڈکشن کے لیے تیار رجسٹریشن فنکشن میں شامل کریں:

async function register() {
  const registerForm = document.getElementById('registerForm');
  const submitButton = registerForm.querySelector('button[type="submit"]');
  
  try {
    // Show loading state
    submitButton.disabled = true;
    submitButton.textContent = 'Creating Account...';
    
    // Process form data
    const formData = new FormData(registerForm);
    const jsonData = JSON.stringify(Object.fromEntries(formData));
    
    // Send to server
    const result = await createAccount(jsonData);
    
    if (result.error) {
      console.error('Registration failed:', result.error);
      alert(`Registration failed: ${result.error}`);
      return;
    }
    
    console.log('Account created successfully!', result);
    alert(`Welcome, ${result.user}! Your account has been created.`);
    
    // Reset form after successful registration
    registerForm.reset();
    
  } catch (error) {
    console.error('Unexpected error:', error);
    alert('An unexpected error occurred. Please try again.');
  } finally {
    // Restore button state
    submitButton.disabled = false;
    submitButton.textContent = 'Create Account';
  }
}

یہ بہتر عمل درآمد شامل کرتا ہے:

فراہم کرتا ہے فارم جمع کرانے کے دوران بصری فیڈبیک
غیر فعال کرتا ہے سبمٹ بٹن کو ڈپلیکیٹ سبمیشن سے روکنے کے لیے
ہینڈل کرتا ہے متوقع اور غیر متوقع ایررز کو خوش اسلوبی سے
دکھاتا ہے صارف دوست کامیابی اور ایرر میسیجز
ری سیٹ کرتا ہے فارم کو کامیاب رجسٹریشن کے بعد
بحال کرتا ہے UI کی حالت کو نتائج سے قطع نظر

اپنے عمل درآمد کی جانچ کریں

اپنے براؤزر ڈیولپر ٹولز کھولیں اور رجسٹریشن کی جانچ کریں:

براؤزر کنسول کھولیں (F12 → Console ٹیب)
رجسٹریشن فارم بھریں
"اکاؤنٹ بنائیں" پر کلک کریں
کنسول میسیجز اور صارف فیڈبیک کا مشاہدہ کریں

آپ کو کیا دیکھنا چاہیے:

لوڈنگ اسٹیٹ سبمٹ بٹن پر ظاہر ہوتا ہے
کنسول لاگز عمل کے بارے میں تفصیلی معلومات دکھاتے ہیں
کامیابی کا پیغام اکاؤنٹ بنانے میں کامیابی پر ظاہر ہوتا ہے
فارم خود بخود ری سیٹ ہوتا ہے کامیاب سبمیشن کے بعد

🔒 سیکیورٹی غور و فکر: فی الحال، ڈیٹا HTTP کے ذریعے سفر کرتا ہے، جو پروڈکشن کے لیے محفوظ نہیں ہے۔ حقیقی ایپلیکیشنز میں ہمیشہ HTTPS استعمال کریں تاکہ ڈیٹا ٹرانسمیشن کو انکرپٹ کیا جا سکے۔ مزید جانیں HTTPS سیکیورٹی کے بارے میں اور یہ صارف کے ڈیٹا کی حفاظت کے لیے کیوں ضروری ہے۔

جامع فارم کی توثیق

فارم کی توثیق اس مایوس کن تجربے کو روکتی ہے کہ غلطیاں صرف جمع کرانے کے بعد دریافت ہوں۔ جیسے انٹرنیشنل اسپیس اسٹیشن پر متعدد اضافی نظام، مؤثر توثیق حفاظتی چیکز کی متعدد تہوں کو استعمال کرتی ہے۔

مثالی طریقہ کار فوری فیڈبیک کے لیے براؤزر لیول کی توثیق، بہتر صارف تجربے کے لیے جاوا اسکرپٹ کی توثیق، اور سیکیورٹی اور ڈیٹا کی سالمیت کے لیے سرور سائیڈ کی توثیق کو یکجا کرتا ہے۔ یہ اضافی نظام صارف کی اطمینان اور نظام کی حفاظت دونوں کو یقینی بناتا ہے۔

توثیق کی تہوں کو سمجھنا

graph TD
    A[User Input] --> B[HTML5 Validation]
    B --> C[Custom JavaScript Validation]
    C --> D[Client-Side Complete]
    D --> E[Server-Side Validation]
    E --> F[Data Storage]
    
    B -->|Invalid| G[Browser Error Message]
    C -->|Invalid| H[Custom Error Display]
    E -->|Invalid| I[Server Error Response]

کثیر پرت توثیق کی حکمت عملی:

HTML5 توثیق: فوری براؤزر پر مبنی چیکز
جاوا اسکرپٹ توثیق: حسب ضرورت منطق اور صارف کا تجربہ
سرور توثیق: حتمی سیکیورٹی اور ڈیٹا کی سالمیت کے چیکز
ترقی پسند اضافہ: کام کرتا ہے چاہے جاوا اسکرپٹ غیر فعال ہو

HTML5 توثیق کی خصوصیات

جدید توثیق کے اوزار آپ کے اختیار میں:

خصوصیت	مقصد	مثال استعمال	براؤزر کا رویہ
`required`	لازمی فیلڈز	`<input required>`	خالی سبمیشن کو روکتا ہے
`minlength`/`maxlength`	ٹیکسٹ کی لمبائی کی حدود	`<input maxlength="20">`	کردار کی حدود نافذ کرتا ہے
`min`/`max`	عددی حدود	`<input min="0" max="1000">`	نمبر کی حدود کی توثیق کرتا ہے
`pattern`	حسب ضرورت regex قواعد	`<input pattern="[A-Za-z]+">`	مخصوص فارمیٹس سے میل کھاتا ہے
`type`	ڈیٹا کی قسم کی توثیق	`<input type="email">`	فارمیٹ مخصوص توثیق

CSS توثیق اسٹائلنگ

توثیق کی حالتوں کے لیے بصری فیڈبیک بنائیں:

/* Valid input styling */
input:valid {
  border-color: #28a745;
  background-color: #f8fff9;
}

/* Invalid input styling */
input:invalid {
  border-color: #dc3545;
  background-color: #fff5f5;
}

/* Focus states for better accessibility */
input:focus:valid {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

input:focus:invalid {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

یہ بصری اشارے کیا حاصل کرتے ہیں:

سبز بارڈرز: کامیاب توثیق کی نشاندہی کرتے ہیں، جیسے مشن کنٹرول میں سبز روشنی
سرخ بارڈرز: توثیق کی غلطیوں کی نشاندہی کرتے ہیں جن پر توجہ دینے کی ضرورت ہے
فوکس ہائی لائٹس: موجودہ ان پٹ لوکیشن کے لیے واضح بصری سیاق و سباق فراہم کرتے ہیں
مستقل اسٹائلنگ: پیش گوئی کے قابل انٹرفیس پیٹرنز قائم کرتے ہیں جنہیں صارفین سیکھ سکتے ہیں

💡 پرو ٹپ: :valid اور :invalid CSS پیسو کلاسز کا استعمال کریں تاکہ صارفین کے ٹائپ کرتے وقت فوری بصری فیڈبیک فراہم کیا جا سکے، ایک جوابدہ اور مددگار انٹرفیس بناتے ہوئے۔

جامع توثیق کو نافذ کرنا

آئیے آپ کے رجسٹریشن فارم کو مضبوط توثیق کے ساتھ بہتر بنائیں جو بہترین صارف تجربہ اور ڈیٹا کوالٹی فراہم کرے:

<form id="registerForm" method="POST" novalidate>
  <div class="form-group">
    <label for="user">Username <span class="required">*</span></label>
    <input id="user" name="user" type="text" required 
           minlength="3" maxlength="20" 
           pattern="[a-zA-Z0-9_]+" 
           autocomplete="username"
           title="Username must be 3-20 characters, letters, numbers, and underscores only">
    <small class="form-text">Choose a unique username (3-20 characters)</small>
  </div>
  
  <div class="form-group">
    <label for="currency">Currency <span class="required">*</span></label>
    <input id="currency" name="currency" type="text" required 
           value="$" maxlength="3" 
           pattern="[A-Z$€£¥₹]+" 
           title="Enter a valid currency symbol or code">
    <small class="form-text">Currency symbol (e.g., $, €, £)</small>
  </div>
  
  <div class="form-group">
    <label for="description">Account Description</label>
    <input id="description" name="description" type="text" 
           maxlength="100" 
           placeholder="Personal savings, checking, etc.">
    <small class="form-text">Optional description (up to 100 characters)</small>
  </div>
  
  <div class="form-group">
    <label for="balance">Starting Balance</label>
    <input id="balance" name="balance" type="number" 
           value="0" min="0" step="0.01" 
           title="Enter a positive number for your starting balance">
    <small class="form-text">Initial account balance (minimum $0.00)</small>
  </div>
  
  <button type="submit">Create Account</button>
</form>

بہتر توثیق کو سمجھنا:

لازمی فیلڈ انڈیکیٹرز کو مددگار وضاحتوں کے ساتھ یکجا کرتا ہے
فارمیٹ کی توثیق کے لیے pattern خصوصیات شامل کرتا ہے
رسائی اور ٹول ٹپس کے لیے title خصوصیات فراہم کرتا ہے
مددگار متن شامل کرتا ہے تاکہ صارف کی ان پٹ کی رہنمائی کی جا سکے
بہتر رسائی کے لیے سیمینٹک HTML اسٹرکچر استعمال کرتا ہے

اعلی درجے کی توثیق کے قواعد

ہر توثیق کے اصول کیا حاصل کرتے ہیں:

فیلڈ	توثیق کے قواعد	صارف کا فائدہ
یوزر نیم	`required`, `minlength="3"`, `maxlength="20"`, `pattern="[a-zA-Z0-9_]+"`	درست، منفرد شناخت کنندگان کو یقینی بناتا ہے
کرنسی	`required`, `maxlength="3"`, `pattern="[A-Z$€£¥₹]+"`	عام کرنسی کے نشانات قبول کرتا ہے
بیلنس	`min="0"`, `step="0.01"`, `type="number"`	منفی بیلنس کو روکتا ہے
تفصیل	`maxlength="100"`	معقول لمبائی کی حدود

توثیق کے رویے کی جانچ

ان توثیق کے منظرنامے آزمائیں:

فارم جمع کریں خالی لازمی فیلڈز کے ساتھ
یوزر نیم درج کریں 3 کرداروں سے کم
یوزر نیم فیلڈ میں خاص کردار آزمائیں
منفی بیلنس کی رقم درج کریں

آپ کیا مشاہدہ کریں گے:

براؤزر دکھاتا ہے مقامی توثیق کے پیغامات
اسٹائلنگ میں تبدیلی :valid اور :invalid ریاستوں کی بنیاد پر
فارم جمع کرانے سے روکا جاتا ہے جب تک کہ تمام توثیق پاس نہ ہوں
فوکس خود بخود پہلے غلط فیلڈ پر منتقل ہوتا ہے

کلائنٹ سائیڈ بمقابلہ سرور سائیڈ توثیق

graph LR
    A[Client-Side Validation] --> B[Instant Feedback]
    A --> C[Better UX]
    A --> D[Reduced Server Load]
    
    E[Server-Side Validation] --> F[Security]
    E --> G[Data Integrity]
    E --> H[Business Rules]
    
    A -.-> I[Both Required]
    E -.-> I

آپ کو دونوں تہوں کی ضرورت کیوں ہے:

کلائنٹ سائیڈ توثیق: فوری فیڈبیک فراہم کرتی ہے اور صارف کے تجربے کو بہتر بناتی ہے
سرور سائیڈ توثیق: سیکیورٹی کو یقینی بناتی ہے اور پیچیدہ کاروباری اصولوں کو ہینڈل کرتی ہے
مشترکہ نقطہ نظر: مضبوط، صارف دوست، اور محفوظ ایپلیکیشنز بناتا ہے
ترقی پسند اضافہ: کام کرتا ہے چاہے جاوا اسکرپٹ غیر فعال ہو

🛡️ سیکیورٹی یاد دہانی: صرف کلائنٹ سائیڈ توثیق پر کبھی بھروسہ نہ کریں! بدنیتی پر مبنی صارفین کلائنٹ سائیڈ چیکز کو نظرانداز کر سکتے ہیں، اس لیے سرور سائیڈ توثیق سیکیورٹی اور ڈیٹا کی سالمیت کے لیے ضروری ہے۔

GitHub Copilot Agent چیلنج 🚀

Agent موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:

تفصیل: رجسٹریشن فارم کو جامع کلائنٹ سائیڈ توثیق اور صارف فیڈبیک کے ساتھ بہتر بنائیں۔ یہ چیلنج فارم کی توثیق، ایرر ہینڈلنگ، اور انٹرایکٹو فیڈبیک کے ساتھ صارف کے تجربے کو بہتر بنانے کی مشق کرنے میں مدد کرے گا۔

پرومپٹ: رجسٹریشن فارم کے لیے ایک مکمل فارم توثیق کا نظام بنائیں جس میں شامل ہو: 1) ہر فیلڈ کے لیے حقیقی وقت کی توثیق کا فیڈبیک جیسے ہی صارف ٹائپ کرے، 2) کسٹم توثیق کے پیغامات جو ہر انپٹ فیلڈ کے نیچے ظاہر ہوں، 3) پاس ورڈ کی تصدیق کا فیلڈ جس میں مماثلت کی توثیق ہو، 4) بصری اشارے (جیسے درست فیلڈز کے لیے سبز چیک مارکس اور غلط فیلڈز کے لیے سرخ انتباہات)، 5) ایک سبمٹ بٹن جو صرف اس وقت فعال ہو جب تمام توثیق پاس ہو جائیں۔ HTML5 توثیق کی خصوصیات، CSS توثیق کی حالتوں کے لیے اسٹائلنگ، اور انٹرایکٹو رویے کے لیے جاوا اسکرپٹ کا استعمال کریں۔

مزید جانیں agent mode کے بارے میں یہاں۔

🚀 چیلنج

HTML میں ایرر میسیج دکھائیں اگر صارف پہلے سے موجود ہو۔

یہاں ایک مثال ہے کہ حتمی لاگ ان صفحہ تھوڑی سی اسٹائلنگ کے بعد کیسا نظر آ سکتا ہے:

لیکچر کے بعد کوئز

جائزہ اور خود مطالعہ

ڈیولپرز اپنے فارم بنانے کی کوششوں کے بارے میں بہت تخلیقی ہو گئے ہیں، خاص طور پر توثیق کی حکمت عملیوں کے حوالے سے۔ مختلف فارم فلو کے بارے میں جاننے کے لیے CodePen کو دیکھیں؛ کیا آپ کچھ دلچسپ اور متاثر کن فارم تلاش کر سکتے ہیں؟

اسائنمنٹ

اپنے بینک ایپ کو اسٹائل کریں

ڈسکلیمر:
یہ دستاویز AI ترجمہ سروس Co-op Translator کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔

41 KiB Raw Blame History Unescape Escape