যেকোনো ওয়েবসাইটে এখন Website Visitor সিস্টেম করুন! Firebase ব্যবহার করে [অনেক সহজেই]

WELLCOME BACK

Hello guys. How are you all? I hope you are all well. I came again with a post. Let’s go…

আপনার ওয়েবসাইট কত জন ভিজিট করছে, এগুলো জানতে সবার মন চায়। তবে এর জন্য Plugin ব্যবহার করতে হয় wordpress সাইট গুলোতে তবে সেগুলোতে নিজের মতো ডিজাইন বা সিস্টেম কিছুই থাকে না। আর অন্য ওয়েবসাইট এ তো এই সিস্টেম থাকলে শুধু Total visitors বা এখন অনলাইনে কত জন আছে সেটাই দেখায়।

তবে আজকো আমি এমন একটি কোড শেয়ার করবো যেটা দিয়ে আপনি:
আজকের, আগামীকালের এবং সর্বমোট ভিজির দেখতে পাবেন তার সাথে রয়েছে vs সিস্টেম।এই কোডটি তৈরি করেছি Html + Tailwind Css + Javascript দিয়ে তাই যেকোনো ওয়েবসাইটে এটি ব্যবহার করতে পারবেন।

তে চলুন শুরু করা যাক!

ডেমোঃ

কোড এবং ব্যবহারঃ

এটি আপনি আপনার ওয়েবসাইটের ফুটারে ব্যবহার করবেন, আর যদি ফুটার এ না দেখায় ডাসবোর্ডে দেখাতে চান তাহলে ফুটার এ display: none করে রেখে দিবেন আর সেম কোডটি ডাসবোর্ডে দিবেন তবে display: none ছাড়া।

একেক জনের ওয়েবসাইট একেকটি তাই আমি ডিরেক্ট দেখাবো কি করে! তাই এটা আপনাকেই সেট করতে হবে।যদি আপনার ওয়েবসাইট থাকে তাহলে অবশ্যই সেট করতে পারবেন!

কোডটিতে ব্যবহার করা হয়েছে Firebase তাই অবশ্যই Database ঠিক করতে হবে আপনাকে।

Firebase Database সেটআপ:

প্রথম থেকে অ্যাকাউন্ট তৈরি, প্রোজেক্ট তৈরি করতে অনেক সময় লাগে তাই আমার এই পোস্টটি দেখুন তাহলে প্রোজেক্ট এবং অ্যাকাউন্ট তৈরি করে নিতে পারবেন।
যেকোনো ওয়েবসাইটে Post views সিস্টেম করুন! Javascript & Firebase ব্যবহার করে!

তো প্রোজেক্ট তৈরি করলে প্রথমে ডাটাবেসে তে আসুন!
এখন Rules এ ক্লিক করুন!

এখন এখানে যে Rules থাকবে সেগুলো কেটে দিয়ে নিচের Rules টি বসান! তারপর Publish এ ক্লিক করুন!


{
  "rules": {
    "visitors": {
      "daily": {
        ".read": true,
        ".write": true,
        "$date": {
          ".validate": "newData.isNumber() && newData.val() >= 0"
        }
      },
      "total": {
        ".read": true,
        ".write": true,
        ".validate": "newData.isNumber() && newData.val() >= 0"
      }
    }
  }
}