Web Form Validation এর মাথা এবং মুন্ডু

প্রথম প্রকাশ:  
August 11, 2015 at 10:37 PM 
BDLance E-Learning পেইজে 
---
“Web Form Validation” জিনিসটা কি ?
================================
কিছু কিছু ওয়েব সাইট আছে যেখানে একজন ভিজিটরকে তাঁর নাম, ইউজার নাম, ইমেইল, পাসওয়ার্ড, পোস্ট কোড/জিপ কোড ইত্যাদি তথ্য প্রদান করে ঐ সাইটে রেজিস্ট্রেশন করতে হয় । যেমন- upwork.com, freelancer.com, facebook.com ইত্যাদি । আবার কিছু কিছু ওয়েব সাইটের এডমিন বা সাইটের মালিকের(owner) সাথে যোগাযোগ করার জন্য থাকে নাম, ইমেইল, ওয়েব ঠিকানা এবং কমেন্ট বক্স সমৃদ্ধ একটি কমেন্ট ফরম । এভাবে ওয়েব পেইজে নাম, ইউজার নাম, ইমেইল, ওয়েব ঠিকানা, পাসওয়ার্ড, পোস্ট কোড, কমেন্ট বক্স ইত্যাদি সহ যে ফরম থাকে তাকে বলা হয় ওয়েব ফরম । ওয়েব ফরম বিভিন্ন রকম হতে পারে । আপাতত এটুকু জানলেই চলবে ।
যেমনটা আমরা বাস্তবে পরীক্ষার ফরম ফিলআপ করে থাকি ঠিক তেমনটাই আমরা ওয়েব ফরমেও করে থাকি । আমরা আমাদের প্রয়োজনীয় তথ্যগুলো (নাম, ইমেইল ইত্যাদি) ওয়েব ফরমের নির্দিষ্ট ইনপুট ফিল্ডে প্রদান করি এবং সাবমিট বাটনে ক্লিক করি । তখন এই তথ্যগুলো সাইটের ডাটাবেজে গিয়ে জমা হয় যা পরবর্তীতে কাজে লাগানো হয় ।

একজন ভিজিটর/ইউজার ওয়েব ফরমে যে তথ্যগুলো দেন সেগুলো সঠিক ফর‌ম্যাটে (গঠন) দিচ্ছেন কিনা, কিংবা কোন অত্যাবশ্যকীয় (required) তথ্য না দিয়েই ফরম সাবমিট করছেন কিনা, কিংবা কোন ক্ষতিকর (malicious) কোড (যেমন- জাভাস্ক্রিপ্ট) ইনপুট ফিল্ডে দিচ্ছেন কিনা ইত্যাদি যাচাই-বাচাই করাকে বলা হয় ফরম ভ্যালিডেশন ।

আরো সহজভাবে বলা যায়, নামের ঘরে নাম লিখতে সচরাচর যেসব অক্ষর/চিহ্ন প্রয়োজন হয় সেটা আমরা জানি । এখন যে কেউ  নামের ঘরে নাম না দিয়ে ইমেইল/ওয়েব ঠিকানা বা সাইটের ক্ষতি করার জন্য কোন ক্ষতিকর কোড দিতে পারেন । একই ভাবে ইমেইলের বা ওয়েব ঠিকানার নিজ নিজ গঠন রয়েছে । এসব ঘরেও যে-কেউ ভুল ইনপুট বা ক্ষতিকর কোড দিতে পারেন । ইউজার যাতে এ ধরনের কাজ না করতে পারেন তথা তাঁর সাবমিটকৃত ফরমের তথ্যগুলো যাতে বৈধ (valid) হয় তা যাচাই করার প্রক্রিয়াকে বলা হয় Web Form Validation ।

Web Form Validation এ চারটা বিষয়ে চোখ-কান-নাক-গলা খোলা রাখবেন
==============================================================
১. ইউজার কোন অত্যাবশ্যকীয় (required) তথ্য না দিয়েই ফরম সাবমিট করছেন কিনা ।
২. ইউজার কোন ক্ষতিকর কোড ইনপুট ফিল্ডে দিচ্ছেন কিনা ।
৩. ভুল ফরম্যাটে ইনপুট দিচ্ছেন কিনা ।
৪. ইউজারের ভুলগুলো তুলে ধরা এবং যথাযথ নির্দেশনা দেয়া মেসেজের মাধ্যমে ।

হায় ! হায় ! Web Form Validation কেমনে করে
======================================
সাধারণত: দুই ভাবে ফরম ভ্যালিডেশন করা হয় । যথা-

1.   Front-End Validation / ‍Client-Side Validation

2.   Back-End Validation / Server-Side Validation

Front-End Validation / Client-side validation
====================================

কোন Web Form  কে ক্লায়েন্ট সাইডে রেখে অর্থাৎ ব্রাউজারে রেখে validation করার প্রক্রিয়াকে বলা হয় fron-end validation ।  এ প্রক্রিয়ায় পেইজটিকে বার বার লোড হতে হয় না । অর্থাৎ সার্ভারের সাথে যোগাযোগ না করেই ব্রাউজারে থেকে ফর্মের ভ্যালিডেইশন চেক করা হয় । ইউজার যখন কোন ইনপুট দিবেন বা ইনপুট না দিয়ে চলে যাবেন বা ভুল ইনপুট দিবেন তখন সাথে সাথেই সেটা যাচাই হয়ে যাবে এবং যথাযথ নির্দেশনা দিয়ে মেসেজ দেয়া হবে । এবং কাজটি হবে তাৎক্ষণিক কোনরূপ পেইজ লোড না হয়েই ।

কেউ কেউ এই প্রক্রিয়াকে ভ্যালিডেশনের আওতায় ফেলেন না । কাজটি করা হয় মূলত একজন ইউজারকে একটি সুন্দর ঝামেলাহীন মসৃণ কুল-কুল-ঠান্ডা-ঠান্ডা অভিজ্ঞতা (user experience) প্রদানের জন্য । বার বার পেইজ লোড (যা খুবই বিরক্তিকর) না করে সাবমিটের আগেই ইউজার নিজের ভুলগুলো বের করতে পারেন এবং তাৎক্ষণিকভাবে যথাযথ তথ্য দিয়ে ফরম সাবমিট করতে পারেন ।

কেডায়, কি দিয়া  front-end validation করে

==================================

Front-end validation এর দায়িত্ব মূলত front-end engineer (developer) এর । আর কাজটি করা হয় client side scripting language যেমন JavaScript (jQuery), VBScript ইত্যাদির মাধ্যমে । ফলে স্বাভাবিকভাবেই JavaScript (jQuery)/ VBScript এর উপর front end engineer (developer) এর থাকতে হয় অগাধ দক্ষতা । যদিও এ কাজটি front end designer/web designer এর আওতায় পড়ে না তথাপি তাঁকেও এ কাজটি  করতে হতে পারে ।

তবে বর্তমানে HTML5 দিয়েও ক্লায়েন্ট সাইডে ফরম ভ্যালিডেশন করা যায় । এটা খুবই সহজ । এজন্য <input> ট্যাগে required, pattern, minlength ইত্যাদি attributes ব্যবহার করা হয় । এতে সমস্যা একটাই, ব্রাউজারের যেসব ভার্সন HTML5 সাপোর্ট করে না সেসব ব্রাউজারে এটা কার্যকর নাও হতে পারে ।

বেশি বালা , বালা না

======================

১. ইউজারের ব্রাউজারে জাভাস্ক্রিপ্ট বন্ধ (disable) করা থাকলে প্রক্রিয়াটি কাজ করবে না ।

২. যে-কেউ খুব সহজেই পুরো ভ্যালিডেশন প্রক্রিয়াকে পাশ কাটিয়ে (bypass) যেকোন ক্ষতিকর (malicious) কোড ইনপুট করতে পারবে ।

Back-end Validation / Server-Side Validation

=======================================

কোন Web Form এ প্রদত্ত তথ্যকে সার্ভারের মাধ্যমে ভ্যালিডেইট করার প্রক্রিয়াকে বলা হয় back-end validation । এক্ষেত্রে ইউজার যখন ইনপুট দিয়ে সাবমিট করবে তখন সেই ইনপুট চলে যাবে সার্ভারে । সেখানে প্রদত্ত ইনপুট ভ্যালিড কিনা চেক করা হবে । ইনপুট ভ্যালিড হলে গ্রহণ করা হবে । আর ইনভ্যালিড হলে গ্রহণ না করে পুনরায় ব্রাউজারে ফেরৎ পাঠানো হবে এবং সঠিক ইনপুট দেয়ার জন্য যথাযথ নির্দেশনা সহ ইউজারকে মেসেজ করা হবে ।

কেডায়, কি দিয়া  back-end validation করে

===================================

Back-end validation করেন back-end developer / web programmar –রা । এ কাজে তাঁরা ব্যবহার করেন server-side scripting language যেমন- PHP, JSP, Perl  ইত্যাদি । ভাষাগুলোর যেকোন একটি ব্যবহার করে ভ্যালিডেশনের জন্য প্রোগ্রাম তৈরি করা হয় । প্রোগ্রামটি সার্ভারে কার্যকর (execute) হয় । সার্ভারে প্রেরিত ইনপুট তথ্যগুলো সে যাচাই-বাচাই করে ফলাফল ব্রাউজারে প্রেরণ করে ।

বর্তমানে সবচেয়ে জনপ্রিয় ভাষা হচ্ছে PHP । PHP প্রোগ্রামিং ভাষা ব্যবহার করে সহজেই ইনপুট তথ্যকে ভ্যালিডেইট করা যায় । ভাষাটা শেখাও সহজ । শুধুমাত্র বেসিক ভালোভাবে শিখেও ফরম ভ্যালিডেশনের বিষয়টা রপ্ত করা যাবে, ইনশাআল্লাহ ।

Back-end Validation এর উপরি

==========================

১. পুরো ভ্যালিডেশন প্রক্রিয়াটি যেহেতু সার্ভারে সংঘটিত হয় এবং প্রোগ্রামারের আওতায় থাকে তাই এটি অধিকতর নিরাপদ । মেকানিজমকে পাশ কাটিয়ে ক্ষতিকর কোড ইনপুট করা খুব একটা সহজ নয় ।

২. ব্রাউজারে স্ক্রিপ্টিং বন্ধ থাকুক বা না থাকুক, সাপোর্ট করুক বা না করুন ভ্যালিডেশন কিন্তু ব্যাহত হবে না ।

এখন প্রশ্ন হচ্ছে, এই দুই ভ্যালিডেশনের মধ্যে আপনি কোনটা করবেন বা করা উচিৎ?

উপরের আলোচনা থেকে দেখা যাচ্ছে, fron-end validation করা হয় মূলত: ইউজারকে সুবিধা প্রদান করার জন্য । এবং এটাকে খুব সহজেই বাইপাস করে সাইটের ক্ষতি করা সম্ভব । এটাকে কেউ কেউ ফরম ভ্যালিডেইশন বলেন না ।

অন্যদিকে, back-end validation -ই মূলত: ফরম ভ্যালিডেশন । এটাকে খুব সহজে বাইপাস করা সম্ভব নয় ।

সুতরাং ভিজিটরের সুবিধার্থে একটা ঝাকানাকা UX (User Experience) দেয়ার জন্য জেকুয়েরি ভ্যালিডেইশন আর সাইটের নিরাপত্তার স্বার্থে ২ স্তর বিশিষ্ট মানকি-ঝানকি নিরাপত্তা বেষ্টনির জন্য পিএইচপি ভ্যালিডেইশন করা উচিৎ । মানে দুইটা ভ্যালিডেইশনই করা উচিৎ ।

এবার প্রশ্ন হচ্ছে, কোন পদ্ধতিটি সহজ ?

আমি বলবো দুটোই সহজ ।

Slider এর মত jQuery প্লাগিন (যেমন-jQuery validation plugin)ব্যবহার করে খুব সহজেই front-end validation করা যায় । তবে মাঝে মাঝে কঠিন হয়ে দাঁড়াতেও পারে JavaScript/jQuery এর ব্যাসিক না জানলে । যে কাজটা করতে ২ সেকেন্ড লাগত সেটা করতে ২০ দিনও লেগে যেতে পারে । তাই পরামর্শ রইলো  JavaScript/jQuery এর অন্তত ব্যাসিকটা শিখুন আর ম্যাগি নুডুলস বানান দুই সেকেন্ডে । পরামর্শটা নিজেকেও দিলাম ;) ।

একই কথা প্রযোজ্য back-end validation এর ক্ষেত্রেও । php এর ব্যাসিক জেনে ফরম ভ্যালিডেশন করলে অনেক সহজেই এবং কম সময়ে কাজটা করতে পারবেন । অন্যের তৈরি স্ক্রীপ্ট ব্যবহার করলেও কাজের প্রয়োজনে কাস্টমাইজ করতে পারবেন । ব্যাসিক থেকে এ্যাডভান্স শিখার জন্য পরামর্শ থাকবে Morshedul Arefin ভাইয়ের টিউটগুলো (https://www.youtube.com/user/coderhousebd/videos) চোখ বন্ধ করে অনুশীলন করার । তাছাড়া এই নরাধমেরও এ বিষয়ে দুইটি টিউট আছে ।

১. http://youtu.be/eCDgfgo_dm0

২. http://youtu.be/AWyM0lsBHgM

ফরম ভ্যালিডেশনের উপর আজকের আলোচনা আশা করছি মাথায় ঢুকে মুন্ডুতে প্রবেশ করেছে, ইনশাআল্লাহ । পরবর্তী মাথা-মুন্ডুর প্রস্তুতির জন্য আজকে এখানেই বিদায় নিচ্ছি । আল্লাহ হাফেজ ।J