WELLCOME BACK
Hello guys. How are you all? I hope you are all well. I came again with a post. Let’s go…
তো আজকে আমি আপনাদের মাঝে এমন কোড নিয়ে এসেছি যার মাধ্যমে আপনি আপনার যেকোনো ওয়েবসাইটে, [Wordpress, Blogger, Wix, Wapka] Post views সিস্টেম করতে পারেন। একেক পোস্টের একেক ভিউ কাউন্ট দেখাবে। পোস্ট একটু বড় হবে তাই চলুন শুরু করা যাক!
আমি আপনাদের দুটি কোড দিবো একটির কাজ হলোঃ পোস্ট ভিউ দেখাবে এবং পোস্ট ভিউ বাড়াবে!
আটেকটিতে শুধু পোস্ট ভিউ দেখাবে কিন্তু পোস্ট ভিউ বাড়বে না।
এটি তৈরি করা হয়েছে Firebase ব্যবহার করে যেটা Javascript দিয়ে তৈরি করেছি।
এটিতে পোস্ট ভিউ যদি 950-1000 হয় তাহলে 1k, 1500=1.5k, 2000=2k এমন সিস্টেম করা আছে।
কোডগুলোঃ
পোস্ট বড় হবে, কোড ছোট তবে কোড দেওয়া যাবে না ডিরেক্ট তাই লিংক থেকে কপি করুন!
কোডের ব্যবহারঃ
কোডের ব্যবহার অনেক সহজ। Html এ শুধু data-post-id="1" এটিতে আপনার পোস্ট আইডি সেট করবেন আর কিছু করতে হবে অটো ভিউ fetching করে ফেলবে!
Html কোডে Example দেওয়ার জন্য কিছু দেওয়া আছে জাতে আপনার বুঝতে সুবিদা হয়। আপনি চাইলে এটি আগে টেস্ট ও করতে পারেন Html Run করে।
সব থেকে জরুরি হলো Firebase Database সেট আপ করা। কোডের databaseUrl_add এখানে আপনার database url দিতে হবে এবং database rules সেট করতে হবে!
Firebase Database সেটআপ
কোড এমনি তে কাজ করবে না আপনাকে Database সেট আপ করতে হবে। আমি একদম নতুন করে দেখাচ্ছে, যাতে কারো সমস্যা না হয়।
এই পোস্ট আপনি শুরু Post view না Firebase অ্যাকাউন্ট এবং Project তৈরির সাথে ডাটাবেইস সেট আপ ও শিখবেন। তো চলুন শুরু করা যাক!
তো প্রথমে এ যান!
তারপর নতুন করে একটি প্রোজেক্ট তৈরি করতে এখানে ক্লিক করুন! (Desktop মোড করে নিবেন মোবাইলে ব্যবহার করলে)
এখানে একটি নাম এবং এখানে টিক মার্ক দিন! দিয়ে এখানে ক্লিক করুন!
এখন নিচের মতো করুন!
এখন এখানে Bangladesh সিলেক্ট করে নিচের মতো করুন!
এখন কিছুক্ষণ অপেক্ষা করুন!
এখন Continue এ ক্লিক করুন!
এখন Sidebar এ Build এ ক্লিক করে Realtime Database তে ক্লিক করুন!
এখন Create Database তে ক্লিক করুন!
এখন যেটা সার্ভার আছে সেটাই থাক চাইলে বদলাতে পারেন! তারপর এটিতে ক্লিক করুন!
এখন এটিতে ক্লিক করুন!
এখন, Rules এ ক্লিক করুন!
এখানে যে Rules গুলো আছে সেগুলো কেটে দিন!
এখন নিচের Rules গুলো কপি করে এখানে বসিয়ে Published করুন!
{
"rules": {
"post_views": {
"$postId": {
".read": true,
".write": true,
".validate": "newData.isNumber() && (data.exists() ? newData.val() === data.val() + 1 : newData.val() === 1)"
}
}
}
}
এখন আবার Data তে ক্লিক করুন!
এখন এই Url টি কপি করুন এখানে ক্লিক করে! এটি হলো আপনার Database Url!
Database url কোডের কোথায় বসাবেন?
নিচের মতো databaseUrl_add এখানে Database url টি বসাবেন।
দুটি কোডেই বসাবেন। Code গুলোতে সম্পূর্ণ Html সহ উদাহরণ দেওয়া আছে তাই কোডের সব ভালো মতো বুঝতে পারবেন! আশাকরি বুঝতে পেরেছেন সব।
THIS POST END
So friends, that’s it for today. See you in another post. If you like the post then like and comment. Stay tuned to Trickbd.com for any updates.
