জেকুয়েরী (jQuery) প্লাগইন ডেভেলপমেন্ট

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

আমি আপনাদের এইখানে একটি বেসিক প্লাগইন সম্পূর্ণ তৈরী করে দেখাবো এবং কি কি স্ট্যান্ডার্ড ফলো করতে হবে তা নিয়ে আলোচনা করব।

আমি আপনাদের যে জেকুয়েরী প্লাগইনটি তৈরী করে দেখাবো তাহল Input Counter । এটির উদ্দেশ্য হল কোন ইনপুট টেক্সবক্সে আপনি কত ক্যারেক্টার লিখছেন তা লাইভ দেখানো। নিচের ছবিটি দেখলে বুঝতে পারা যাবে।

প্লাগইন তৈরী করার ধাপ

ধাপ ০১ - প্রথমে প্লাগইনটি যে নামে হবে তা নিয়ে একটি ফোল্ডার তৈরী করি। আমাদের ক্ষেত্রে আমরা প্লাগইনটির নাম দিয়েছি input-counter তাই ফোল্ডারটির নামও input-counter । এখন ফোল্ডারটিতে একটি  css এবং js ফাইল তৈরী করি। প্লাগইন এর কাজ রিলেটেড সমস্ত সিএসএস (CSS) রুলস গুলো এই সিএসএস (CSS) ফাইলটিতে লিখুন। 

মনে রাখবেন আপনার প্রতিটি সিএসএস ক্লাসনেম এর আগে অবশ্যই ইউনিক prefix দিবেন যাতে করে যে ইউজার আপনার প্লাগইনটি ব্যবহার করবে তার কোন সিএসএস ক্লাসের নামের সাথে কনফ্লিক্ট না করে। যেমন আমাদের প্লাগইনটির নাম যেহেতু input counter তাই এর প্রিফিক্স নাম দিব ._ic_ নাম দেয়ার ক্ষেত্রে কোন নিয়ম নেই শুধুমাত্র যাতে ইউজারের সিএসএস এর সাথে না মিলে এমন ইউনিক সিএসএস ক্লাস বা আইডি ব্যবহার করবেন।

ধাপ ০২ - এবার প্লাগইনটির যদি কোন ইউআই (UI) থাকে তার জন্য সিএসএস দিয়ে ডিজাইন করে নিই।

যেমন আমাদের input counter প্লাগইনটির জন্য সিএএসএস লিখলাম

._ic_wrapper{
  width:100%;
  display:flex;
  box-sizing:border-box;
}
._ic_wrapper input{
  width:90%;
}
._ic_wrapper ._ic_info{
  padding:5px;
  background:#333;
  color:white;
  width:10%;
  text-align:center;
}

উপরোক্ত সিএএসএস গুলো লিখে ফাইলটি input-counter.css নামে সেভ করি। আপনারা আপমাদের জেকুয়েরী প্লাগইনের নামে সেভ করবেন।

ধাপ ০৩ -  এখন আসি প্লাগইন তৈরী মূল কাজে। প্লাগইন ফোল্ডারটির মধ্যে একটি input-counter.js নামে ফাইল তৈরী করি যা আপনারা আপমাদের জেকুয়েরী প্লাগইনের নামে সেভ করবেন। এই ফাইলটিতে আমাদের প্লাগইনটির যাবতীয় লজিক লিখতে হবে।

(function($){

   $.fn.inputCounter=function(){
       // all your plugin logic js script here
   }

})(jQuery)

আমরা উপরোক্ত কোডটুকু আমাদের তৈরী করা জেএস ফাইলটিতে লিখি এবং একটু এনালাইসিস করি যে কোনটির কি কাজ।

প্রথমত আমরা বাইরে একটি নামবিহীন anonymous immediately invokable function তৈরী করেছি এবং এটি যখন নিচে সাথে সাথে কল করেছি তার মধ্যে আমরা jQuery কে ফাংশনের প্যারামিটার হিসেবে পাঠিয়েছি যাতে আমাদের প্লাগইনের প্রয়োজনে আমরা আমাদের জেএস ফাইলটিতে জেকুয়েরীর সমস্ত ফাংশন ফিচারগুলো ব্যবহার করতে পারি।

anonymous immediately invokable function টির ভিতরে একটি ফাংশন লিখেছি $.fn.inputCounter এখানে inputCounter হল আমাদের প্লাগইনের নাম। আপনারা যে নামে আপনাদের জেকুয়েরী প্লাগইন তেরী করবেন অবশ্যই ঐই নাম ব্যবহার করবেন। মনে রাখবেন এটিও ইউনিক হতে হবে যাতে ইউজারের কোন ফাংশনের বা জেকুয়েরীর নিজস্ব কোন ফাংশনের সাথে না মিলে।

উপরোক্ত কোডটুকু লিখলেই আমরা আমাদের প্লাগইনটি যেকোন জায়গায় ব্যবহার করতে পারব। যেমন - $('.selector').inputCounter() 

শুধুমাত্র এই কোডটুকু লিখে প্লাগইনটি ব্যবহার করলে কোন প্রকার কাজ সম্পাদিত হবে না কারণ আমরা এখনও আমাদের প্লাগইনটির যে উদ্দেশ্য তার জন্য কোন লগিক লিখিনি। চলুন লিখে ফেলি সম্পূর্ণ কোডটুকু।

(function($){
  
  $.fn.inputCounter=function(){
    var el=$(this);
    
    el.wrap('<div class="_ic_wrapper"></div>')
    el.after('<div class="_ic_info">0</div>')
    
    $(this).on('keyup',function(){
      var count=$(this).val().length;
      $(this).siblings("._ic_info").html(count)
    })
  }
  
})(jQuery)

ব্যস! তেরী হয়ে গেল আমাদের নিজেদের তৈরী করা একটি জেকুয়েরী প্লাগইন। এখন শুধু যেকোন প্রজেক্টে আমাদের জেকুয়েরী প্লাগইনটির সিএসএস ও জেএস ফাইল দু'টি যুক্ত করেই ব্যবহার করতে পারব। লিখায় অনিচ্ছাকৃত কোন প্রকার ভূলত্রুটি ক্ষমার সুন্দর দৃষ্টিতে দেখবেন।

সম্পূর্ণ প্রক্রিয়াটি কিভাবে করতে হয় তার ভিডিওটি দেখতে পারেন - https://youtu.be/_KZvP_OK34Q