Sunday, March 1, 2015

অনলাইন ভারতীয় ভিসা ওয়েবসাইটে অটোফিলিং টিপসঃ জাভাস্ক্রিপ্ট

আজ আমি আপনাকে কিভাবে অনলাইন ভারতীয় ভিসা ওয়েবসাইট থেকে ভিসা ফর্ম সহজে পূরণ করতে পারেন, তার কিছু জাভাস্ক্রিপ্ট টিপস দিতে যাচ্ছি। গত কয়েক দিন থেকেই ওই ওয়েবসাইটের সমস্ত ইনপুট ক্ষেত্রে কোন ভিসা তথ্য পেস্ট করা অসম্ভব ব্যাপার হয়ে যাচ্ছে যেমন ওয়েব ফাইল নম্বর,  জন্ম তারিখ ও পাসপোর্ট নম্বরের ইনপুট টেক্সট। আপাতদৃষ্টিতে এটা একটি সার্ভার সম্পর্কিত সমস্যা মনে হতে পারে, কিন্তু আসলে আমরা যাতে কপি পেস্ট করে ভিসা তথ্য পূরণ করতে না পারি সেজন্যই এই কারসাজি। পুঙ্খানুপুঙ্খভাবে Reprint.jsp  পেজের সোর্স কোড দেখার পর আমি এই সিদ্ধান্তে পৌছতে পারলাম যে তারা কপি পেস্ট প্রক্রিয়া বন্ধ করার জন্যই বডি এলিমেন্ট এ কিছু অ্যাট্রিবিউট যোগ করে দিয়েছেন, যেমন  onpaste="return false;  "oncopy="return false;oncut="return false;" ইত্যাদি। এর প্রমাণ হিসেবে একটি ইমেজ সংযুক্ত করেছি আমার পোস্ট এ, দেখে নিতে পারেন।

তাই আমরা ম্যানুয়ালি ইনপুট ক্ষেত্রে ঐ তথ্য টাইপ করতে বাধ্য হই। কিন্তু হিট টাইমের সময় সার্ভার যেহেতু ডাউন হয়ে যায়, তাই ম্যানুয়ালি টাইপ করে সাবমিট দিলেও(যেটা কিনা খুবই সময়সাপেক্ষ ব্যাপার) আমরা “নো অ্যাপয়েন্টমেন্ট ডেটস আর আভেইলেবল” কথাখানি দেখতে পাই। এর ফলে আমরা ভারতীয় ভিসা অনলাইন ওয়েবসাইট থেকে অ্যাপয়েন্টমেন্ট তারিখ পেতে পারিনা।আমাদেরকে তাই একটু ভিন্ন ভাবে চিন্তা করতে হবে যে কিভাবে আমরা কোনরকম ভাবে পেস্ট না করেই অনায়াসে অনলাইন ভিসা ফর্মে ভিসা তথ্য পূরণ করতে পারি।

জাভাস্ক্রিপ্ট একটু গভীরে

এই স্ক্রিপ্ট তৈরি করার জন্য আমাদের মাত্র পাচটি জাভাস্ক্রিপ্ট চলরাশির(ভ্যারিয়েবল)প্রয়োজন. প্রথমে আমাদের ফর্ম এর নাম কি এটা জানতে হবে। যদি আপনার ইন্সপেক্ট এলিমেন্ট ডেভেলপার টুলস সম্পর্কে ধারনা থাকে তাহলে ঠিক আছে তবে যারা জানেন না এটা কি করে করতে হয় আমি তাদেরকে বলব যে আপনি কি করে এটা ব্যবহার করতে পারবেন। আপনি Google Chrome (বা আপনার প্রিয় ব্রাউজার) খুলুন,  তারপর https://indianvisaonline.gov.in/visa/ ওয়েবসাইটটিতে যান এবং "Print Registered Application" লিঙ্কটিতে ক্লিক করুন। এখন ওয়েবপেজটির উপর রাইট ক্লিক করুন এবং নিচে প্রদর্শিত চিত্রের মত করে কন্টেক্সট মেনু থেকে “ইন্সপেক্ট এলিমেন্ট” অপশনে এ ক্লিক করুন:



তারপর ইন্সপেক্ট এলিমেন্টের ডান দিকে অবস্থিত ট্যাব কনসোলে যান। এখন আমাদের ভিসা ফর্মটির কি নাম জানার জন্য document.forms [0] টাইপ করে ↵ এন্টার কী চাপতে হবে, তাহলে ব্রাউজার এর কন্সোল ট্যাব এ নিম্নরুপ কোড কন্সোলে দেখাবে:
var form = OnlineForm,
আপনি লক্ষ করুন, ফর্মের নেম আট্রিবিউট দেয়া আছে OnlineForm। সুতরাং, অনলাইন ভারতীয় ভিসা ফর্মের নাম হল OnlineForm এবং আমাদের প্রথম চলরাশি(ভ্যারিয়েবল) হতে হবে:
var form = OnlineForm
আপনি আপনার পছন্দের টেক্সট এডিটর যেমন নোটপ্যাড প্লাস প্লাস বা উইন্ডোজের ডিফল্ট টেক্সট এডিটর নোটপ্যাড এ এই জাভাস্ক্রিপ্ট কোড কপি করতে পারেন। তারপর গুগল ক্রোম ব্রাউজার এ ফিরে গিয়ে কনসোল ট্যাবে যান এবং form.getElementsByTagName('input') টাইপ করে ↵ এন্টার কী প্রেস  করুন। ব্রাউজার কনসোল প্যানেলে এই কোডগুলি প্রদর্শিত হবে:
[
<input name="fileno" type="text" class="textBoxDashed" id="fileno" value="" size="20" maxlength="12" title="Please Enter your Application Id" onkeyup="chkAlphaNum(this)" onblur="trim1(this)" isdatepicker="true">
<input name="birthdate" type="text" value="" title="Please Enter you Date of Birth As in Passport" class="textBoxDashed" id="birthdate" datepicker="true" datepicker_max="01/03/2015" size="20" maxlength="10" datepicker_format="DD/MM/YYYY" isdatepicker="true">
<input name="passport_no" type="text" title="Please Enter you Passport No. As in Passport" class="textBoxDashed" id="passport_no" value="" size="20" maxlength="14" onkeyup="chkAlphaNum(this)" onblur="trim1(this);" isdatepicker="true">
<input name="ImgNum" type="text" class="textBoxDashed1" id="ImgNum" onkeyup="chkAlphaNum(this)" size="20" maxlength="6" isdatepicker="true">
<input name="Reprint" type="button" class="btn btn-primary" onclick="chkCapRep()" value="Reprint">
<input name="Appointment" type="button" onclick="chkCapAppt()" class="btn btn-primary" id="Appointment" value="Get Appointment">
<input type="hidden" name="Date" value="01/03/2015">]
কনসোল প্যানেলে যে কোডগুলো আপনি দেখতে পাচ্ছেন সেখান থেকে আপনি শুধু নেম অ্যাট্রিবিউট গুলোই মনোযোগ সহকারে নোট করে রাখুন। আমরা তাহলে প্রয়োজনীয় আরো চারটি ভ্যারিয়েবল তৈরি করতে পারলাম সেগুলো হলঃ
var form = OnlineForm,
 webFileNo = form.fileno,
 dateOfBirth = form.birthdate,
 passportNo = form.passport_no,
 accessCode = form.ImgNum;
আপনি আপনার পছন্দের টেক্সট এডিটরে এই ভেরিয়েবলগুলি কপি করে নিতে পারেন। আমাদের এখন একটি জাভাস্ক্রিপ্ট ফাংশন তৈরী করতে হবে যেখানে আমরা আমাদের ভিসা তথ্যগুলি আগে থেকেই পূরন রাখব। ফাংশন তৈরী করলা, কিন্তু আমরা কিভাবে এই ফাংশনকে কল করাব? এটা কিন্তু মনে রাখবেন যে, ফাংশন কে তৌরী করলেই কিন্তু সেটা কাজ করবে না, এটাকে কল করতে হবে। তাই আমরা একটা ইভেন্ট লিসেনার যুক্ত করব ওই এক্সেস কোড লেখার ইনপুট বক্সের উপর, যেখানে ক্লিক করে বা ট্যাব প্রেস করে ওই বক্সটিতে এলেই সমস্ত ভিসা তথ্য সয়ংক্রিয়ভাবে ব্রাউজার দ্বারা ফিল আপ হয়ে যাবে। এখন নিমোক্ত কোডের উদাহরণটি দেখুন:
accessCode.onfocus = function () {
 webFileNo.value = '12345678';  // Paste Web file no within quotation mark
 dateOfBirth.value = '12/12/12';  // Paste date of birth within quotation mark
 passportNo.value = '1234567890'; // Paste passport no within quotation mark
}
যখন আপনি এই কোডগুলিকে কন্সোল ট্যাবে পেস্ট করে এন্টার করবেন তখন কিন্তু আপনি কোনরকম পরিবর্তন লক্ষ্য করবেন না, কিন্তু যখন আপনি ওই এক্সেস কোড লেখার ইনপুট বক্সটায় ক্লিক করবেন তখনই সমস্ত ইনপুট ফিল্ড ভিসা তথ্য দ্বারা পূরণ হয়ে যাবে। আপনারা একটা ব্যাপারে অবগত থাকবেন যে, কোটেশন মার্কের মধ্যে যে কোডগুলি দেওয়া আছে সেগুলো আপনি পরিবর্তন করে নেবেন আপনার ভিসার ওয়েব ফাইল নম্বর, জন্মতারিখ আর পাসপোর্ট নাম্বার দিয়ে, আর ওগুলোর মধ্যে যেন কোন ফাকা স্পেস না পরে, নাহলে আপনার সমস্ত পরিশ্রমই ব্যর্থ যাবে।

কিছু কথা

আমাদের এখানেই টিউটোরিয়াল শেষ করতে হচ্ছে, তাহলে আপনি শিখে গেলেন কিভাবে জাভাস্ক্রিপ্ট কোড দিয়ে অনলাইন ইন্ডিয়ান ভিসা ওয়েবসাইটে ভিসা তথ্য প্রবেশ করাতে পারবেন ম্যানুয়ালি টাইপ বা কপি-পেস্ট না করেই। এই ভিডিও টিউটোরিয়াল আপনাকে কিছুটা সাহায্য করতে পারে, আমাদের উপরের টিউটোরিয়াল আরো ভাল মত বোঝার জন্য।

ভিডিও টিউটোরিয়ায়ল

ডাউনলোড

আপনি আমাদের Fresh Tech Bloggers ওয়েবসাইটে গিয়ে সোর্স কোডটি ডাউনলোড করে নিতে পারেন। আমাদের পরবর্তী টিউটোরিয়াল এ আপনাকে শেখাব যে আপনি কিভাবে ভিসা তথ্য অনলাইন ইন্ডিয়ান ভিসা সরকার ওয়েব সাইটে অনায়াসেই পুরণ করতে পারবেন।

No comments:

Post a Comment