জ্ঞানস্তর: মাধ্যমিক

কোনো একটা লম্বা নামকে সংক্ষিপ্ত করে লেখার দরকার হলো, এজন্য প্রত্যেকটা শব্দের প্রথম অক্ষরগুলো, মানে আদ্যক্ষর নিয়ে, আপনি সেই নামটা তৈরি করলেন, ইংরেজিতে যাকে বলে acronym। যেমন: Bangladesh Agricultural and Rural Development-কে সংক্ষেপে ডাকা হয় BARD বলে; এখানে BARD হলো পুরো নামটার সংক্ষিপ্ত রূপ। ধরা যাক, একটা লেখা লিখছেন, যেখানে বারবার আপনি BARD-ই বলে যাচ্ছেন। কিন্তু একজন পাঠক BARD-এর মানে তো নাও জানতে পারেন। তাই এসব ক্ষেত্রে HTML-এর সহজ একটা কৌশল কাজে লাগানো হয়: <abbr> ট্যাগটি। এর আগে ব্যবহার করা হতো <acronym> ট্যাগটি, যা এখন deprecated বা বাতিল করা হয়েছে।

এই কোডটা ব্যবহার করলে যখনই আপনি GDP কিংবা BARD লেখাটার উপরে মাউস আনবেন, একটু অপেক্ষা করলেই সেখানে একটা বাক্সে দেখাবে BARD-এর মানে, যা আপনি <abbr>-এর title-এ দিয়েছেন। কিন্তু পূর্বনির্ধারিত এই স্টাইলটি অনেকের পছন্দ নাও হতে পারে। সেজন্য নিচের এই CSSটুকু বসিয়ে নিয়ে আপনি আরো দৃষ্টিনন্দন করে নিতে পারেন HTML-এর নিজস্ব টুলটিপকেই। টুলটিপের জন্য অন্য কিছু আবিষ্কার না করে <abbr> ট্যাগ ব্যবহার করাটা Web Accessibility-ও নিশ্চিত করে।

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

– মঈনুল ইসলাম
mayeenulislam.github.io

মূলসূত্র: পোস্টটা লিখতে এর মূল তথ্য গ্রহণ করা হয়েছে একটি তৃতীয় পক্ষীয় টিউটোরিয়াল থেকে, যে লিংকটি বর্তমানে লভ্য নয়। তবে সেখানকার কোডগুলো ঝামেলা করে বলে তা সংশোধন ও পরিমার্জন করতে সহায়তা নেয়া হয়েছে সফ্‌টওয়্যার ইঞ্জিনিয়ার অমিত চৌধুরীর। কৃতজ্ঞতা তাই এঁদের প্রতি। মূল লেখাটি অনেক বছর আগে লেখা ছিলো, সেখানকার deprecated কোড সরিয়ে সাম্প্রতিক কোড যোগ করা হয়েছে।

The post HTML abbr ট্যাগ, CSS দিয়ে করুন দৃষ্টিনন্দন appeared first on Tuts by Mayeenul Islam.

কিভাবে Let’s Encrypt ব্যবহার করে বিনে পয়সায় ওয়েবসাইটে এসএসএল সার্টিফিকেট ইস্যু এবং অ্যাক্টিভেট করা যায়, এবং HTTP ওয়েবসাইটকে HTTPS-এ বদলে ফেলা যায় তার ধারণা দেয়া হয়েছে।

মূল ইভেন্টটি টেকনোভিস্তা লিমিটেড-এ ২৪ ফেব্রুয়ারি ২০১৯-এ অনুষ্ঠিত হয়েছিল। পরবর্তীতে সেই বক্তব্যই অডিও আকারে আলাদা করে রেকর্ড করা হয়েছে, যাতে বক্তব্যগুলো ছড়িয়ে দেয়া যায়।

ভিডিও

প্রেযেন্টেশন

– মঈনুল ইসলাম
mayeenulislam.github.io

The post কিভাবে ফ্রি-তে Let’s Encrypt ব্যবহার করে SSL Certificate ইস্যু এবং অ্যাক্টিভেট করা যায় appeared first on Tuts by Mayeenul Islam.

ওপেন সোর্স মানে ফ্রি না

কিংবা

উন্মুক্ত সোর্স মানে মাগনা না

কথাটা শুনেছি, বুঝেও ফেলেছি…

কিন্তু সত্যি বলতে কি, বুঝে ফেলার ভান করলেও, কিংবা বুঝে ফেললেও আসলে কিন্তু কিচ্ছুই বুঝতে পারিনি – এটা বুঝতে পারলাম, যখন এবিষয়ে কথা বাড়াতে গিয়ে এখানে-ওখানে ধাক্কা খাচ্ছিলাম।

• উইন্ডোজ একটা সফ্‌টওয়্যার, যা কিনে নিতে হয়, এটা ওপেন সোর্স না। বাংলাদেশের বিজয় কীবোর্ড কিন্তু এরকমই একটা সফ্‌টওয়্যার, যা সংরক্ষিত সোর্স এবং কিনে ব্যবহার করতে হয়।
• উবুন্ত‌ু একটা সফ্‌টওয়্যার, যা ফ্রি পাওয়া যায়, মানে মাগনা, আবার এটা ওপেন সোর্স। বাংলাদেশের অভ্র ফোনেটিক কীবোর্ড কিন্তু এরকমই একটা সফ্‌টওয়্যার, যা উন্মুক্ত সোর্স এবং বিনামূল্যও।

হিসাবটা এখানে মিলে না, তাই শিখাও হয় না।

অবশেষে লজ্জার মাথা খেয়ে যখন প্রশ্নটা শাবাব ভাইকে (Shabab Mustafa) এক সাক্ষাতে করেই ফেললাম, তখনই আসলে সত্যিকার অর্থে শিখলাম। যা শিখলাম, সেটাকে ভেঙে বলি:

উইন্ডোজ কিনে নিলেন, এটা এখন আপনার নিজের। করলেন কি, সেখানে কিছু পরিবর্তন করতে চাইলেন। এবার কোডগুলো খুলে দেখলেন, সব বাইনারি… কাকের ঠ্যাং-বকের ঠ্যাং। অর্থাৎ যা কোড ওরা করেছে, সবই এনক্রিপ্ট (encrypt) করে গুপ্ত ফাইলগুলো পাঠিয়েছে আপনাকে। অর্থাৎ এটা সংরক্ষিত সোর্স (Closed Source)।

কিন্তু উবুন্ত‌ু নিয়ে এসে কিছু বদলে নিতে চাইলে, নিশ্চিন্তে ফাইলগুলো খুলুন। আপনার মনের মতো পরিবর্তন করে নিন, কারণ যা কোড করা হয়েছে, সবই জলজ্যান্ত আপনার সামনে রয়েছে। অর্থাৎ এটা ওপেন সোর্স – সোর্সগুলো কম্পাইল করে বাইনারি করে ফেলা হয়নি; কিংবা করে ফেললেও অন্য কোথাও মূল ফাইলগুলো আছে, যেখান থেকে তা নিয়ে আপনি পরিবর্তন করে আবার কম্পাইল করে বাইনারি বানিয়ে নিতে পারবেন নিজের মতো।

তাহলে ওপেন সোর্সের ধারণাটা পরিষ্কার এখন।  

এখন যদি কেউ আপনার সামনে “cost of open source software” নিয়ে আলোচনা করেন, আপনি তাতে মোটেই আশ্চর্য হবেন না।

এখন হিসাবটা মিলাই…

আপনি একটা সফ্‌টওয়্যার বানালেন, কোড সব ওপেন সোর্স, তার মানে, যখনই আপনি বিক্রী করবেন, যার কাছেই করবেন, তিনি সব কোড দেখতে পারবেন। আচ্ছা, তারমানে, ওপেন সোর্স প্রোগ্রাম বিক্রীও করা যায়! যেমন: ওয়ার্ডপ্রেসের জনপ্রিয় অনেক প্রিমিয়াম থিম, প্লাগইন আছে, যেগুলো ব্যবহার করতে হলে কিনে নিতে হয়। যখন কিনে নেয়া হয়, তখন কিন্তু তারা কোনো বাইনারি ফাইল পাঠায় না, তারা যে যে ফাইলে কোড করেছে, সেইসব ফাইল দিয়ে তৈরি প্যাকেজটাই আপনাকে পাঠায়। উদাহরণস্বরূপ WooCommerce একটি ওপেনসোর্স প্লাগইন, যার একটা ফ্রি সংস্করণ আছে, আবার একটা প্রিমিয়াম সংস্করণ আছে, প্রিমিয়াম সংস্করণটি কিনে নিতে হয়। এবং কিনে নেয়া সংস্করণটার সব কোড পড়া যায়, এবং লাইসেন্সের আওতায় থেকে ইচ্ছেমতো বদলেও নেয়া যায়।

আবার ঠিক তেমনি সংরক্ষিত সোর্সের প্রোগ্রামও বিনামূল্যে ছেড়ে দেয়া যায়। আপনি একটি সফ্‌টওয়্যার বানালেন, যা সাধারণ মানুষের খুব উপকারে আসবে, কিন্তু আপনি চান এর যাবতীয় কোড, খুঁটিনাটি আর কেউ না দেখুক, না জানুক – কোনো পরিবর্তন করতে হলে আপনাকে ডাকুক, কিন্তু সবাই-ই এটি বিনামূল্যে ডাউনলোড করে নিক, কিংবা এ-ওর থেকে ডিভিডিতে কিংবা পেনড্রাইভে করে নিয়ে নিয়ে যাক, ইচ্ছেমতো ব্যবহার করুক, এই উপযোগিতা পাক – আপনি তখন এর সোর্স সংরক্ষিত রেখে তা বাজারজাত করলেন।

আবার প্রোগ্রামিং ল্যাংগুয়েজটা ওপেন সোর্স হলেও, তা দিয়ে তৈরি সফ্‌টওয়্যারও অনেকসময় সংরক্ষিত সোর্সে ছাড়তে পারেন। অনেক ক্ষেত্রে মূল ল্যাংগুয়েজে সেটা সম্ভব না হলেও, যথাযথ লাইসেন্স দিয়ে সেটাকে নিরাপত্তা দেয়া হয়।^* অর্থাৎ কেউ সোর্স কোনোভাবে বের করে ফেললেও, তা বদলানোর অধিকার পাবে না – মর্মে একটা লাইসেন্স করতে হবে, তখন তার ব্যতয় হলে আদালতে লড়ালড়ি করে আপনি তা প্রতিহত করতে পারবেন।

উন্মুক্ত সোর্সের একটা বড় সমস্যা মনে হতে পারে যে, এটা তো মসিবতের জিনিস, আমার কাজ নিয়ে আরেকজন তার নামে চালিয়ে দিলো… হয়তো আমার মনেই সেটা কাজ করছে বলেই আমি আরেকজনকে সন্দেহ করছি । …অসুন্দর হলেও অবশ্য বাস্তবে এমনটা হতে দেখা যায় কদাচিৎ। অসাধু মানুষ, ভালো জিনিসটাকে নিয়ে মন্দ করবে, তাই বলে ভালোটা তো আর থেমে থাকবে না। আসলে খুব বেশি গায়ে না লাগলে কেউ তাতে গরজ দেখায় না। কারণ যারা কাজ জানে, তারা চুরি করে না, আর যারা কাজ জানে না, তারাই অন্যেরটা মেরে দেয়ার দুষ্টু চিন্তা করে। আর তাই অন্যেরটা মেরে দিলেও তারা তা যথাযথভাবে প্রকৃত ব্যবহারকারীর কাছে পৌঁছাতে পারে না কিংবা তার কোনো সমস্যাও সমাধান করতে পারে না। ফলে, তারা শেষ পর্যন্ত ধরা খায়। …কিন্তু মনে রাখবেন, যদি যথাযথ লাইসেন্সে আপনার উন্মুক্ত সোর্স প্রোগ্রামের লাইসেন্স করে নিয়ে থাকেন, তাহলে কিন্তু… গায়ে যখন লাগবে, তখন বিপৎগামীদের শ্রীঘরের ভাতও খাইয়ে নেয়া যাবে।

ওপেন সোর্স কিংবা সংরক্ষিত সোর্স – কোনটা আপনি বেছে নিবেন, কেন নিবেন, সে বিষয়ে জানানোর জন্য লেখাটি নয়। শুধুমাত্র, এই বিশ্বাসটুকু দেয়ার জন্য লেখা যে, আমার মতো আর ভুল করবেন না, বুঝেশুনে বিশ্বাস করুন:

ওপেন সোর্স মানেই ফ্রি নয়

-মঈনুল ইসলাম
mayeenulislam.github.io

_________________

উৎস নির্দেশ

• Am I allowed closed source software with open source code – Programmers StackExchange
• Open Source – Bengali Wikipedia
• ছবি: gnu.org

The post ওপেনসোর্স মানে ফ্রি না – যেভাবে শিখলাম appeared first on Tuts by Mayeenul Islam.

আমরা এখানে জানবো: কিভাবে গিটহাবে একটা স্ট্যাটিক ডেমো সাইট তৈরি করা যায়।

একটু বলে রাখি, বারবার স্ট্যাটিক সাইট কথাটা কেন বলছি? স্ট্যাটিক সাইটে সার্ভার সাইড কোনো কোড থাকছে না, পিওর এইচটিএমএল, সিএসএস আর জাভাস্ক্রিপ্ট দিয়ে আপনি সাইটটা তৈরি করছেন, আর দেখাচ্ছেন। কারণ ডাটাবেজ স্টোর করার মতো কোনো জায়গা আমরা পাচ্ছি না।

যা যা জানা থাকা লাগবে

অন্তত একটা HTML ফাইল বানানো জানা লাগবে। এছাড়া, যখন যা জানার দরকার পড়বে, একটু ঢু মেরে সেটা জেনে নিলেই চলবে।

কিভাবে কী করতে হয়?

প্রথম ধাপ: গিটহাবে কোড ডিপ্লয়

কাজটা খুবই সহজ।

ধরে নিচ্ছি আপনার একটা স্ট্যাটিক সাইট আগে থেকেই বানানো আছে যেখানে একটা index.html আছে। (যেমন আমরা একটা স্ট্যাটিক সাইট বানিয়ে রেখেছি)

এই ডিরেক্টরিটিকে এবারে একটা গিট রিপো বানিয়ে ফেলি। গিট কিভাবে ব্যবহার করতে হয়, জানা না থাকলে চট করে একটা ঢু মেরে শিখে ফেলা যাক:

এবারে git bash-এ কমান্ড লিখি:

git init
git add -A
git commit -m "Initial Commit"

এবারে গিটহাবে প্রোজেক্টটা তুলে দিতে হলে গিটহাবে গিয়ে একটা ফাঁকা রিপো তৈরি করে নিই: New Repository-তে গিয়ে শুধু একটা নাম দেই, আর কিচ্ছু দেয়া লাগবে না। এবারে Create Repository-তে ক্লিক করলে আপনাকে ইন্সট্রাকশন দিবে কী করা লাগবে। সেখান থেকে এই লাইনটা লেখা যাক গিট ব্যাশ-এ:

git remote add origin https://github.com/{username}/{repository-path}.git

বুঝতেই পারছেন, এখানে {username} আর {repository-path} আপনার পাথ আর ইউযারনেম দিয়ে পূরণ করবেন। এতে গিটহাবের ঐ রিপোযিটোরিটা আমরা রিমোট হিসেবে যোগ হয়ে যাবে। ব্যাস, এবার আপনার কোডগুলো গিটহাবে তুলে দিন:

git push origin master

শেষ ধাপ: গিট পেজ তৈরি করা

পদ্ধতি ১ : মাস্টার ব্রাঞ্চকেই ব্যবহার করা

যেহেতু আমরা আমাদের master ব্রাঞ্চে যা যা আছে, সেটাকেই Demo আকারে দেখাতে চাচ্ছি, আমাদের জন্য কাজটা খুব সহজ। গিটহাবে আপনার রেপোযিটোরি’র Settings পাতায় যান (ইউআরএলটা এরকম হবে: https://github.com/{username}/{repository-name}/settings)

এবারে নিচের দিকে Github Pages ব্লকের Source অংশের None লেখা ড্রপডাউন থেকে বাছাই করে দিন master branch। তারপর Save বোতাম চাপুন। কাজ শেষ।

আপনার Demo সাইটটা আপনার master ব্রাঞ্চের তথ্য (index.html) নিয়ে তৈরি হয়ে গেছে। দেখা যাবে এরকম একটা পাথে:

https://{username}.github.io/{repository-name}/

কাজ শেষ।

পদ্ধতি ২ : ব্রাঞ্চ করে নেয়া

যদি আপনি চান যে, ডেমো পাতাটা সম্পূর্ণ অন্যভাবে করতে, মূল কোডের সাথে মিল না রাখতে, কিংবা কিছুটা ভিন্ন রাখতে, তাহলে আলাদা একটি ব্রাঞ্চ তৈরি করে সেখানে দেখিয়ে দেয়াটাই উত্তম হবে। এমতাবস্থায় আমরা গিট রিপোযিটোরিতে একটা ব্রাঞ্চ তৈরি করবো। যদি গিটে ব্রাঞ্চিং কিভাবে করতে হয়, জানা না থাকে, চট করে শিখে নেয়া যাক:

এই ব্রাঞ্চটা দিয়ে গিটহাবে Git Pages কাজ করে, আর ব্রাঞ্চের নামটাও নির্ধারিত gh-pages। সুতরাং চট করে গিট ব্যাশে লিখে ফেলুন:

git checkout -b gh-pages

হলো কী – gh-pages নামে একটা গিট ব্রাঞ্চ তৈরি হয়ে গেলো আর আমরা সেই ব্রাঞ্চে চলেও এলাম। যদি গিট ব্রাঞ্চ আমরা বুঝে থাকি, তাহলে জানি, master ব্রাঞ্চে যা আছে এই নতুন ব্রাঞ্চেও এখন তা তা আছে। অর্থাৎ আমাদের index.html ফাইলটাও এখানে আছে। এই ব্রাঞ্চে আপনি যেমন যেমন চাচ্ছেন, তেমন তেমন ইচ্ছেমতো পরিবর্তন করে নিন, আপনার ডেমো সাইটটা। তারপর গিট অ্যাড আর গিট কমিট করে গিট পুশ করে দিন নতুন ব্রাঞ্চটা:

git push origin gh-pages

এটা স্বয়ংক্রীয়ভাবেই নিম্নোক্ত পাথে আপনার ডেমো সাইটটা তৈরি করে দিবে:

https://{username}.github.io/{repository-name}/

বাড়তি তথ্য

• ডেমো সাইটের জন্য gh-pages ব্রাঞ্চটা যে বাধ্যতামূলক (ম্যান্ডেটরি) না, সেটা আশা করি বুঝে ফেলেছেন। সেক্ষেত্রে যে ব্রাঞ্চ থেকেই ডেমো দেখান না কেন, তা Settings পাতায় বাছাই করে দিলেই কাজ শেষ।
• আপনি যদি চান নিজস্ব ডোমেইন থেকেও ডেমো পাতাটি দেখা যাক, যেমন: example.com লিখে এন্টার করলেও যেন এই সাইটটা দেখা যাকে, তাহলে সেটাও করতে পারবেন: Custom domain অংশে http://example.com/ লিখে দিতে হবে। কিন্তু শর্ত হচ্ছে ঐ ডোমেইনের CNAME রেকর্ডে বলে দিতে হবে যে, এই হোস্টটা ব্রাউজ করতে হবে।
• আপনি যদি Jekyll^ কিংবা অন্য কোনো স্ট্যাটিক সাইট জেনারেটরে অভ্যস্থ হন, তাহলে নিশ্চিন্তে আপনি সেসব সাইটও গিটহাব পেজেস-এ ডিপ্লয় করতে পারেন। এছাড়া গিটহাবেই Automatic Page Generator রয়েছে, সেটা দিয়েও আপনি Markdown সিনট্যাক্সে আপনার স্ট্যাটিক সাইট বানিয়ে নিতে পারেন।

উপসংহার

সুতরাং আশা করি এখন থেকে আপনার করা HTML, CSS, JavaScript-এর স্ট্যাটিক কাজগুলোর একটা ডেমো আমরা অনায়াসে দেখতে পারবো ইনশাল্লাহ।

আমাদের স্ট্যাটিক সাইটের ডেমোটা দেখা যাক:

https://mayeenulislam.github.io/tuts-nano-github-pages/

The post গিটহাবে স্ট্যাটিক ডেমো সাইট বানানোর কৌশল appeared first on Tuts by Mayeenul Islam.

আসলে কী হচ্ছে, কেন হচ্ছে?

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

আমাদের পাতায় কোনো $wp_query অবজেক্ট লোড হচ্ছে না। সেকারণে Query argument-ও যোগ হচ্ছে না ইউআরএল-এ। তাই আমাদের বহুল পরিচিত পেজিনেশন সংক্রান্ত কন্ডিশনাল:

$paged = get_query_var('paged') ? get_query_var('paged') : 1;

এখানে কাজ করছে না, কারণ get_query_var() আসলে কিছু পাচ্ছে না (কুয়েরি আর্গুমেন্ট তো যোগই হচ্ছে না, পাবে কিভাবে)। সেজন্য ইউআরএল-এ &paged প্যারামিটারের ভ্যালু পাবার জন্য আমরা $_GET মেথড ব্যবহার করতে বাধ্য হচ্ছি, যেমনটা Milo শিখালেন।

এবারে সব পেজিনেশনের জন্য যেমন কিছু ছোটখাটো বিষয় বানিয়ে নেয়া লাগে এখানেও তাই করা হচ্ছে, আমরা বলে নিচ্ছি:

$nextpage = $paged + 1;

আর আমরা আগের পাতা দেখানোর জন্য তৈরি করেছি:

$prevpage = max( ($paged - 1), 0 );

খুব সোজা, পরের পাতা মানে ১ যোগ, আর আগের পাতা মানে ১ বিয়োগ। কিন্তু এভাবে যাতে নেগেটিভ মানে না চলে যায়, তাই আমরা পিএইচপি’র max() ফাংশন ব্যবহার করেছি।

ধরা যাক আমাদের কুয়েরিটা এরকম:

এখানে আমরা posts_per_page প্যারামিটারে ওয়ার্ডপ্রেসের নিজস্ব Settings > Reading-এ সেট করা পাতা-প্রতি পোস্টের সংখ্যা ব্যবহার করছি। আমরা তাই বারবার কুয়েরি না করে ফাংশনেও এই সংখ্যাটা নিয়ে নিচ্ছি। যদি আপনার ক্ষেত্রে ব্যতিক্রম কিছু থেকে থাকে, আপনি চাইলে পেজিনেশন $posts_per_page = 5 এরকম করে আপনার ভ্যালুও পাস করে দিতে পারেন। যদি ফাংশনে $items_per_page-এ কোনো ভ্যালু না দেয়া হয়, তাহলে আমরা ওয়ার্ডপ্রেসের ডিফল্টটা গ্রহণ করেছি ফলব্যাক হিসেবে। লক্ষ রাখুন, $paged প্যারামিটারে get_query_var()-এর বদলে $_GET মেথড ব্যবহার করেছি।

এবারে এই হচ্ছে আমাদের পেজিনেশন ফাংশন:

আর, এই ফাংশনকে আমরা এভাবে ব্যবহার করতে পারবো:

এখানে আমাদের মতো করে আমরা পেজিনেশন প্যারামিটারগুলো পাঠাতে পারছি। এবং সর্বোপরি, আমরা কততম পাতায় আছি, Next Page, Previous Page, Last Page, First Page ইত্যাদি বোতামও পাচ্ছি, প্যাজিনেশনকে প্রয়োজনমতো ব্যবহার করার জন্য।

সুতরাং, বুঝে নিয়ে ব্যবহার করতে নেই মানা। কোনো ভুল থাকলে জানানোর অনুরোধ। আর ভালো লাগলো কিনা, কিংবা আসল কথা, কাজে লাগলো কিনা, নিচে মন্তব্য করে জানাতে ভুলবেন না। আর কাজে লাগলে, শেয়ার করে সবাইকে জানাতেও ভুলবেন না।

মঈনুল ইসলাম
mayeenulislam.github.io

_____________________________

কৃতজ্ঞতা

কৃতজ্ঞতা জানাচ্ছি Christine Cooper এবং Milo-কে, তাঁদের দেয়া পরামর্শ আর স্নিপেটের^ উপর ভিত্তি করে এখানে একটা কার্যোপযোগী মার্জিত সংস্করণ যোগ করা হয়েছে মাত্র।

The post অ্যাডমিন প্যানেলে নিজস্ব $wp_query’র জন্য পেজিনেশন appeared first on Tuts by Mayeenul Islam.

আচ্ছা, এটা একটা ঘটনা হতে পারে, কিন্তু এরকম অনেক ঘটনাই দেখা দিতে পারে, যখন আপনি কোনো কোনো কন্টেন্ট নির্দিষ্ট কিছু আইপি ঠিকানার ব্যবহারকারীদের দেখাতে চান না। এই কোড স্নিপেটটি (তাবিজ! 🙂 ) আপনাকে রক্ষা করবে ইনশাল্লাহ:

পিএইচপি দিয়ে আইপি ট্র্যাক করার ফাংশনের বহু সংস্করণ আছে, আমি আসলে এই ফাংশনটাকে অধিকাংশ সময় কার্যকরী পেয়েছি (মাঝে মাঝে অবশ্য ব্যর্থও হয়)। আর, এরই সাথে আরেকটা ফাংশন বানিয়ে নিয়েছি যার ভিতরে অ্যারে আকারে আমরা যেসব আইপি বাধা দিতে চাচ্ছি সেগুলো উল্লেখ করে দিয়েছি (একটি থাকলে একটি, একাধিক হলে একাধিক)। ফাংশনটি বাধা দেয়া (ব্লক করা) এক/একাধিক আইপি ঠিকানার মধ্যে ভিযিটকারীর আইপি ঠিকানা মিলিয়ে দেখবে, যদি মিলে যায়, তাহলে false রিটার্ন করবে, আর না মিললে উল্টোটা।

আর ফাংশনটা এভাবে ব্যবহার করা যাবে:

ওয়ার্ডপ্রেসে ব্যবহারবিধি

• থিমের জন্য: আপনি ফাংশন দুটোকে থিমের functions.php-তে বসিয়ে নিয়ে থিমের সর্বত্র ব্যবহার করতে পারবেন।
• প্লাগইনের জন্য: আপনি ফাংশন দুটোকে প্লাগইনের যেকোনো ফাইলে বসিয়ে নিয়ে প্লাগইন এমনকি থিমের সর্বত্র ব্যবহার করতে পারবেন।

– মঈনুল ইসলাম
mayeenulislam.github.io

The post কোড স্নিপেট: পাবলিক আইপি ঠিকানা ফিল্টার করে কন্টেন্ট দেখান appeared first on Tuts by Mayeenul Islam.

ধরা যাক, আপনার গিটহাব রেপোযিটোরিটাই আপনার প্রোজেক্ট। এবং আপনি এখন এর 1.0.0 সংস্করণের কাজ করছেন। আরো কয়েকজনও কমিট করছেন এই রেপোযিটোরিতে। এবারে আপনারা সবাই ঠিক করলেন এই প্রোজেক্টটির 1.0.0 সংস্করণটি রিলিয করবেন। তো এপর্যায়ে আপনারা আপনাদের কমিট করা শেষ করলেন এবং রিলিযের জন্য প্রস্তুতি নিলেন।

রিলিয দেয়ার গিট পদ্ধতি

git ব্যবহার করে প্রোডাক্ট রিলিয দেয়ার পদ্ধতি হচ্ছে git tag। কমান্ডলাইনে (git bash ব্যবহার করে) কাজটা করার উপায় হচ্ছে:

git tag -a v1.0.0 -m "First Release"

এতে যেটা হবে সর্বশেষ কমিটে v1.0.0 ট্যাগটি জুড়ে যাবে। এবারে কমান্ডলাইনে ট্যাগ পুশ করে দিলেই গিটহাবে একটা ট্যাগ তৈরি হয়ে যাবে।

git push -u origin --tags

কিন্তু এতে রিলিয নোট লেখা হবে না। তাই ট্যাগ তৈরি এবং রিলিয দেয়ার জন্য গিটহাব-এ রয়েছে রিলিয ফিচার:

কিভাবে রিলিয করতে হয়

https://github.com/username/repo সাধারণত এইরকমই হয় গিটহাবে রেপোযিটোরির লিংক। তো আপনার রেপোযিটোরিতে releases লিংকে ক্লিক করুন।

রিলিযেয পাতায় Create a new Release বোতামে ক্লিক করুন।

রিলিয নোট পাতায় রিলিয নোট লিখে শেষ করুন।

“Tag version” হলো সংস্করণের নাম্বার, অর্থাৎ যে সংস্করণটি রিলিয করতে যাচ্ছেন আপনি, আমাদের ক্ষেত্রে যেমন ব্যাপারটা হলো 1.0.0। “Release title” যেকোনো কিছু হতে পারে, আপনি যা দিয়ে এই রিলিযটাকে সূচিত করতে চান আরকি। উদাহরণ হিসেবে বলা যায়, ওয়ার্ডপ্রেস তাদের রিলিযগুলো একেকজন জ্যায শিল্পীর নামানুসারে করে থাকে, তো আপনার ক্ষেত্রে এটা যেকোনো কিছু হতে পারে। আমরা নাম দিতে পারি “প্রথম রিলিয”, কিংবা “প্রাথমিক রিলিয”, কিংবা “আন্তর্জাতিক রিলিয” ইত্যাদি যেকোনো কিছুই।

বিবরণ অংশে মার্কডাউন দিয়ে রিলিয সম্পর্কে বিস্তারিত লিখতে পারবেন। কিন্তু রিলিযের ফিচার সংশ্লিষ্ট তথ্যাদি দিয়ে যথোপযুক্ত রিলিয নোটই লিখতে উৎসাহিত করা হচ্ছে। আপনি প্রাকদর্শনও দেখতে পারবেন।

এটা যদি আপনার প্রাক-রিলিয হয়ে থাকে, যা আসলে আনুষ্ঠানিক কোনো রিলিয না, কিংবা [মোটামুটি প্রস্তুতই], পরীক্ষা করার জন্য, কিংবা ডেভলপমেন্ট পরখ করার জন্য ইত্যাদি ক্ষেত্রে, আপনি চাইলে:

This is a pre-release checkbox.

লেখা চেকবাক্সটি চেক করে দিতে পারেন।

আপনি এই মুহূর্তে প্রকাশ করতে চাচ্ছেন না? চাইলে, রিলিযের তথ্যগুলো খসড়া আকারে সংরক্ষণ করেও রেখে দিতে পারেন। কিংবা চাইলেই এক ক্লিকে প্রকাশও করে ফেলতে পারেন। আপনার রিলিয যেকোনো সময় সম্পাদনা কিংবা হালনাগাদও করতে পারেন।তো, আপনার রেপোযিটোরি/প্রোজেক্ট এখন প্রকাশিত।

বাইনারি ফাইল যোগ

রিলিয নোটে বাইনারি ফাইল আবার কী জিনিস? ধরা যাক, আপনার রিলিযে একটা এক্সেকিউটেবল ফাইল রয়েছে, সেক্ষেত্রে আপনি চাইলে সেটাকে এই স্থানে যোগ করে দিতে পারেন, শ্রেফ টেনে ছেড়ে দিয়ে…। ধরা যাক, আপনি খুবই সাধারণ একটা পিএইচপি কিংবা এইচটিএমএল/সিএসএস প্রোজেক্ট রিলিয দিতে চান, সেক্ষেত্রে শ্রেফ ফাইলগুলো কমপ্রেস করে এখানে যোগ করে দিতে পারেন।

সত্যি বলতে কি, এটা আপনার প্রোজেক্টের ঐ ভার্ষনের ফাইলগুলো, যেখানে অবাঞ্ছিত ফাইল কিংবা কোনো অবাঞ্ছিত কোড নেই।

তো, কিভাবে একটা বাইনারি ফাইল বানানো যায়? আসলে, সেটা আপনার প্রোজেক্টের ধরণই নির্ধারণ করে দিবে। স্ক্রিপ্টিং ল্যাঙ্গুয়েজের (যেমন: পিএইচপি) কোনো প্রোজেক্টের ক্ষেত্রে আমার পছন্দ হলো রেপোযিটোরির বিদ্যমান অবস্থার (যা আসলে আপনার রিলিয পাবার উপযুক্ত কোডের সংকলন) একটা যিপ সংস্করণ নামিয়ে নেয়া। এই কাজটা গিটহাবে খুব সহজে করা যায়, রেপোযিটোরির ডান দিকের “Download Zip” বোতামে ক্লিক করে খুব সহজে পুরো রেপোযিটোরি কমপ্রেস্‌ড অবস্থায় নামিয়ে নেয়া যায়।

এভাবে ডাউনলোড করলে আপনার রেপোযিটোরির সব গিট রিভিশন ইতিহাস বাদ দিয়ে আপনার প্রোজেক্টটা তার সর্বনিম্ন ফাইল আকারে নেমে আসে। আপনি চাইলে এথেকেও ডেভলপমেন্ট সংক্রান্ত অতিরিক্ত ফাইলসমূহ কিংবা ফোল্ডার ডিলিট করে নিতে পারেন।

তো, রেপোযিটোরিটা খুব সহজে ডাউনলোড করে নিন, আর .zip ফাইলটা আপনার রিলিযের সাথের বাইনারি ফাইল হিসেবে যোগ করে দিন। আমরা এবারে আমাদের আগে প্রকাশ করা রিলিযটাকেই সম্পাদনা করে দেখাচ্ছি:

পরখ করে দেখার জন্য আমরা এবারে এটাকে Pre-release চেকবাক্সে ক্লিক করে প্রাকরিলিয বানিয়ে নিলাম।

আমরা আমাদের xyz.zip বাইনারি ফাইলটা যোগ করেছি, এবং খুব সহজেই আমাদের ব্যবহারকারীদের কাছে এই zip ফাইলের পাথটা ছড়িয়ে দিতে পারি, যাতে তাঁরা ডাউনলোড করে নিতে পারেন আমাদের রিলিয করা পণ্যটি। এই পাথটা মোটামুটি এরকম হয়:

https://github.com/username/repo/releases/download/1.0.0/xyz.zip

বাইনারিগুলো কেন

বাইনারি ফাইল ছাড়াও যেকেউই আপনার রিলিয করা সংস্করণটা খুব সহজেই ডাউনলোড করতে পারেন “Source Code (zip)”-এ ক্লিক করেই। কিন্তু এই যিপ ফাইলটা ডাউনলোড করলে:

• আপনার ব্যবহারকারীদের কাছে অপ্রয়োজনীয়ভাবেই গিট রিভিশনের ইতিহাসগুলোও চলে যায়
• আর, আপনি চাইলেও, কোনো রিলিয ঠিক কতবার ডাউনলোড হলো, তার কোনো সংখ্যাও আপনি পাবেন না

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

ডাউনলোডের হিসাব পান

আপনি যদি আপনার গিটহাবের রেপোযিটোরির এপিআই ইউআরএল ব্রাউয করেন, তাহলে আপনি আপনার রিলিযের আদ্যোপান্ত JSON আকারে দেখতে পাবেন (শুধুমাত্র ব্যবহারকারী নাম আর রেপোযিটরির নামটা বদলে নিতে হবে):

https://api.github.com/repos/[username]/[repo-name]/releases

এবং আমরা জানি, জেকুয়েরির getJSON মেথড কাজে লাগিয়ে, আমরা আমাদের রিলিযের ডাউনলোডের সংখ্যা খুব সহজেই পেতে পারি।

$.getJSON("https://api.github.com/repos/someone/kauwa-kala/releases").done(function (json) {
    var release = json[0];
    console.log(release);
    console.log(release.assets[0].download_count);
});

ইতি কথা

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

– মঈনুল ইসলাম
mayeenulislam.github.io

The post কিভাবে গিটহাবে প্রোজেক্ট রিলিয করতে হয় appeared first on Tuts by Mayeenul Islam.

ওয়ার্ডপ্রেসে আমরা সচরাচর একক সাইট পরিচালনা করি, অর্থাৎ সেখানে একটা ইন্সটলেশনে একটাই সাইট চলে। কিন্তু ওয়ার্ডপ্রেস তার একটা ইন্সটলেশনে একাধিক সাইট চালানোরও একটা সুযোগ দিয়ে রেখেছে, আর তা হলো ওয়ার্ডপ্রেস মাল্টিসাইট। প্রথমদিকে ওয়ার্ডপ্রেস মাল্টিসাইট WordPress MU নামে কাজ শুরু করলেও তা পরবর্তিতে ওয়ার্ডপ্রেস কোর-এ অন্তর্ভুক্ত করা হয়। এবং বলা যায়, সবচেয়ে বড় ওয়ার্ডপ্রেস মাল্টিসাইট ইন্সটলেশন হচ্ছে WordPress.com, যেখানে আপনি চাইলেই বিনামূল্যে একটা ব্লগ খুলে ফেলতে পারেন।

ওয়ার্ডপ্রেস মাল্টিসাইট তুলনামূলক কম জনপ্রিয় এবং এর রিসোর্সও কম পাওয়া যায়, কারণ এর ব্যবহারকারী কম। আবার, যেহেতু মাল্টিসাইটের আর্কিটেকচার ভিন্ন, তাই অনেক প্লাগইনই ওয়ার্ডপ্রেস মাল্টিসাইটে চলে না। কিংবা হয়তো অধিকাংশ মানুষই এই ভিন্ন আর্কিটেকচারের সুযোগটা নিতে জানেন না। আপনার একাধিক ভাষায় ওয়েবসাইট দরকার, সাবডোমেইন কিংবা সাবফোল্ডার করে সেখানে একাধিক ওয়ার্ডপ্রেস ইন্সটল করেই আপনি কাজ সেরে ফেলছেন – এরকম ঘটনা অহরহ ঘটে। কিন্তু যিনি এই সুবিধাটা সম্পর্কে ওয়াকিবহাল, এবং চ্যালেঞ্জটা নিতে আগ্রহী, তিনি আসলে সুযোগটা নিতে চান, এবং তখনই ওয়ার্ডপ্রেসের মাল্টিসাইট বা একই ওয়ার্ডপ্রেসে একাধিক আলাদা সত্ত্বার সাইটের জন্ম হয়।

যাহোক, এবারে মূল কথায় আসা যাক-

মাল্টিসাইটের রেজিস্ট্রেশন পাতা

কিন্তু ওয়ার্ডপ্রেসে মাল্টিসাইট ইন্সটল করা হলে খুব বিরক্তি উদ্রেক করে যে ব্যাপারটা, তা হলো এর ব্যবহারকারী রেজিস্ট্রেশন পাতাটা। সাধারণত ওয়ার্ডপ্রেস সিঙ্গেল সাইটের রেজিস্ট্রেশন পাতাটা পাওয়া যায় এই ঠিকানায়:

https://example.com/wp-login.php?action=register

আপনি যদি একটা ওয়ার্ডপ্রেস ইন্সটলেশন ফোল্ডার খুলে দেখেন, তাহলে রুট ফোল্ডারেই (অর্থাৎ যেখানে সাধারণত wp-config.php ফাইলটা থাকে) wp-login.php নামে একটা ফাইল দেখবেন, এটাই সেটা।

কিন্তু ওয়ার্ডপ্রেস মাল্টিসাইট এই পাতা থেকে রেজিস্ট্রেশন করে না। মাল্টিসাইট ইন্সটল করা হলে তখন রেজিস্ট্রেশন পাতা হয় এই ঠিকানায়:

https://example.com/wp-signup.php

যেখানে এইমাত্র wp-login.php ফাইলটা দেখেছেন, সেখানেই আপনি wp-signup.php ফাইলটাও পাবেন। যখনই আপনি “নিবন্ধন” (Register/ Sign up) লেখা কোনো লিংকে ক্লিক করবেন, ওয়ার্ডপ্রেস মাল্টিসাইট আপনাকে এই সাদামাটা পাতাটায় নিয়ে আসবে, যা অনেকেই পছন্দ করেন না।

এই পাতাটা অপছন্দ করার কারণগুলোর মধ্যে অন্যতম হলো এর মধ্যে কোনো স্টাইল করা থাকে না। আর দ্বিতীয়ত হলো, এই পাতায় যা যা ত্রুটি কিংবা সফলতার বার্তা দেখায়, সেগুলোকে ফিল্টার করে বদলে নেয়া যায় না। এজন্যই বিকল্প খোঁজা…

আজকে আমরা এই পাতাটিকে পাল্টে ফেলে নিজস্ব একটি সাইনআপ পাতা এর জায়গায় বসিয়ে দিতে হয় কিভাবে, তা-ই দেখবো। মনে রাখতে হবে, এজন্য আমরা যে কাজগুলো করছি না:

• আমরা .htaccess ফাইলে কোনো হাত দিচ্ছি না,
• আমরা আলাদা কোনো প্লাগইন ব্যবহার করছি না, এবং
• অতি অবশ্যই আমরা ওয়ার্ডপ্রেসের কোনো কোর ফাইলে হাত দিচ্ছি না

নিজস্ব সাইনআপ পাতা

এই জ্ঞানার্জনে প্রাথমিকভাবে সহায়তা নিয়েছিলাম নিচের দুটি পাতার:

1. Using a Custom wp-signup Page With WordPress MU^ – Chris Wiegman
2. individual MU Registration Page possible?^ – David Sader

কিন্তু এই দুটো রিসোর্স সম্পূর্ণ ছিল না, এবং কোনো কোনো ক্ষেত্রে তাতে ত্রুটি (bug) ছিল। তাই এসময় আমাকে আন্তরিকতার সাথে সহায়তা করেছেন কিংবা সত্যি বলতে কি পথ দেখিয়েছেন জার্মানির @thefuxia (Thomas Scholz) এবং অচেনা majick।

এই আলোচনার আগে ধরে নিচ্ছি আপনাদের ওয়ার্ডপ্রেস ইন্সটলেশনে:

• মাল্টিসাইট ইন্সটল করা রয়েছে,
• সার্ভারে mod_rewrite মড্যুল সক্রিয় আছে, এবং
• আপনার ওয়ার্ডপ্রেসের পার্মালিংক ডিফল্ট বা পূর্বনির্ধারিত পার্মালিক নয়

ধাপ ১: নিজস্ব সাইনআপ পাতাটা তৈরি

চাকা একবার আবিষ্কার হয়ে গেছে, কেন আবার আবিষ্কার করবো? তাই আমরা ওয়ার্ডপ্রেস কোর থেকে wp-signup.php পাতাটা কপি করে আমাদের থিমের (কিংবা চাইল্ড থিমের) ভিতরে রাখি। এটার নামটা পাল্টে ফেলি যাতে স্বকীয়তা প্রকাশ পায়, ধরা যাক দিলাম: signup.php।

এবারে ফাইলটা কোনো টেক্সট এডিটরে খুলি: এই ফাইলে উপরের দিকে দুটো ফাইল লোড করা আছে, লাইন দুটো হলো:

require( dirname(__FILE__) . '/wp-load.php' );

এবং

require( dirname( __FILE__ ) . '/wp-blog-header.php' );

এই লাইন দুটো বন্ধ করে দেয়া যাক, মানে কমেন্ট আউট করে দেই। ফলে লাইন দুটো হয়ে গেল:

// require( dirname(__FILE__) . '/wp-load.php' );

এবং

// require( dirname( __FILE__ ) . '/wp-blog-header.php' );

কেন বন্ধ করলাম? …কারণ হলো, এতক্ষণ wp-signup.php ফাইলটা রুট থেকে লোড হচ্ছিল (থিম লোড হবারও আগে), তখনও ওয়ার্ডপ্রেসের কোনো ফাংশন লোড হয়নি। আর এখন এটাকে থিমের ভিতরে নিয়ে আসার মানে হচ্ছে, থিম যখন লোড হবে তখন এটার অস্তিত্ব প্রকাশ পাবে, এর আগে না। আর থিম যখন লোড হবে তখন ওয়ার্ডপ্রেসের wp-load.php আর wp-blog-header.php দুটো ফাইলই লোড হয়ে যাবে। সুতরাং আবারও ফাইল দুটো লোড করা মানেই পুণর্বার কাজ করা (repeat), এবং কখনও Repeat করা যাবে না (DRY – Don’t Repeat Yourself)।

এই ফাইলের আরো দুটো লাইন আছে:

get_header( 'wp-signup' );

এবং, একেবারে নিচে:

get_footer( 'wp-signup' );

এই লাইন দুটোকে বদলে আমাদের থিমের হেডার কিংবা নিজস্ব কোনো ব্যতিক্রম হেডার কল করে দেয়া যেতে পারে। আমি আমার থিমে, সাইনআপ পাতার জন্য আলাদা একটি হেডার বানিয়েছি (header-null.php), তাই আমি সেটা যোগ করেছি এপর্যায়ে। তাই, আমার ক্ষেত্রে ব্যাপারটা ছিল:

get_header( 'null' ); //instead of get_header( 'wp-signup' );

এবং

get_footer( 'null' ); //instead of get_footer( 'wp-signup' );

ব্যস, আমাদের নিজস্ব সাইনআপ পাতা কিন্তু প্রস্তুত। এবারে এই ফাইলটাকে জায়গামতো কল করিয়ে দিলেই কেল্লা ফতে।

ধাপ ২: এমইউ প্লাগইন তৈরি

MU Plugin, এতক্ষণে বুঝে গেছি নিশ্চয়ই, এটা মাল্টিসাইটের সাথে সম্পর্কিত। আসলে এটা মাল্টিসাইটের সাথে সম্পর্কিত ছিল। পরবর্তিতে এর প্রয়োজন এখন আর তেমন একটা হয় না বললেই চলে। আর এখানে MU মানে Multisite না, বরং Must Use, অর্থাৎ মাল্টিসাইটের সকল সাইটে আবশ্যকীয়ভাবে এই কোডগুলো লোড করার জন্যই MU Plugin ব্যবহার করা হতো। …সুতরাং, এখানে আমরা যে কোডগুলো ব্যবহার করবো, সেগুলো নিজস্ব কোনো সাধারণ প্লাগইনে বসিয়ে নিলেও কাজ করবে।

আমরা আমাদের মাল্টিসাইট ইন্সটলেশনের wp-content/ ডিরেক্টরির (ফোল্ডার) ভিতরে একটা ডিরেক্টরি তৈরি করি, নাম হবে ‘mu-plugins‘ (যদি আমরা মাস্ট ইউয প্লাগইনের পাথ বদলে না থাকি)। এবারে এই ডিরেক্টরির ভিতরে একটা ফাইল তৈরি করি, যেকোনো নাম দিয়ে, ধরা যাক দিলাম, mu-signup.php। এবারে এই ফাইলটার মধ্যে লিখি:

কোডগুলো বুঝে নেয়া যাক, প্রথম ফাংশনটা wp_signup_location ফিল্টার হুকে হুক করে আসলে যা করছে, তা হলো, ওয়ার্ডপ্রেসের নিজস্ব সাইনআপের যে ইউআরএল প্রথমে আমরা বলেছিলাম, সেটাকে বদলে, আমাদের নিজস্ব যে পাথে আমরা আমাদের সাইনআপ পাতা তৈরি করতে যাচ্ছি, সেখানে ঘুরিয়ে দিবো। যেমন: লগইন পাতার নিচে যে Register লিংকটা আছে, সেখানে ক্লিক করলে যেন সে আমাদের নিজস্ব সাইনআপ পাতায় নিয়ে আসে, সেটা তাকে বলে দিলাম। এটা আমরা লিখেছি 12 নম্বর লাইনে যে, ওয়ার্ডপ্রেস নেটওয়ার্ক সাইটের ইউআরএল-এর পরেই signup বসালে ইউআরএল যা হবে, সেটাকেই আমাদের মাল্টিসাইটের সাইনআপ ইউআরএল হিসেবে বুঝে নিবে:

https://example.com/signup

আর দ্বিতীয় ফাংশনটা হচ্ছে একটা wp_redirect()। কেউ যদি মাল্টিসাইটের নিজস্ব সাইনআপ ইউআরএল পাতার লিংক (/wp-signup.php) টাইপ করে, তাকেও যেন ঐ পাতা থেকে সরিয়ে আমাদের নিজস্ব সাইনআপ পাতায় (/signup) নিয়ে আসে। অনেকেই এই কাজটুকু .htaccess ফাইল এডিট করে, করে থাকেন (যেমন ক্রিস-এর প্রথম লিংকটাতে দেখতে পাবেন)। কিন্তু আমরা এই কাজটার জন্য .htaccess এডিট করার ঝামেলায় যাইনি।

অর্থাৎ, এপর্যন্ত করা হয়ে গেলে, লোকজন, ওয়ার্ডপ্রেসের পূর্বনির্ধারিত সাইনআপ পাতা না দেখে, আমাদের নিজস্ব ইউআরএল-এ চলে আসবে – এতটুকু আমরা করে ফেলেছি। ( হাততালি)

বাকিটুকু আমরা দুভাবে করতে পারি:

1. সহজ পদ্ধতি: পেজ টেমপ্লেট তৈরি করে
2. ঘাঁটাঘাঁটি পদ্ধতি: রিরাইট এন্ডপয়েন্ট তৈরি করে

পছন্দটা আপনার, আপনি কিভাবে করতে চান… তবে দুটোই করা যাবে না। যেকোনো একটা।

ধাপ ৩: সহজ পদ্ধতি: পেজ টেমপ্লেট তৈরি:

আমরা থিমের ভিতরে যে signup.php ফাইলটা [ওয়ার্ডপ্রেস কোর থেকে কপি করে] বানিয়েছিলাম, সেটা টেক্সট এডিটরে খুলে এক্কেবারে উপরে আমরা কিছু কথা লিখি, যাতে এটা একটা পেজ টেমপ্লেট^ হয়ে যায়:

<?php
/**
* Template name: tuts nano signup
*/

পাতার এক্কেবারে উপরে একটা পিএইচপি শুরুর ট্যাগ দিয়ে শুরু হয়েছে, সেটার ঠিক পরেই এই কথাটা লিখে দেয়া যাক। আপনাদের যা ইচ্ছা নাম দিতে পারেন, তবে বোধগম্য এবং অবিরোধপূর্ণ নাম দিবেন আশা করি। সংরক্ষণ করুন ফাইলটা।

এবারে, ওয়ার্ডপ্রেসের অ্যাডমিন প্যানেলে একটা পাতা তৈরি করি, যার নাম দিই Signup এবং slug হিসেবে দিই signup। এবারে পেজ টেমপ্লেট হিসেবে মাত্র তৈরি করা tuts nano signup [কিংবা আপনাদের দেয়া নামের] টেমপ্লেটটা বাছাই করে দিন। পাতাটা সংরক্ষণ করুন।

কাজ শেষ। 🙂

ধাপ ৩: ঘাঁটাঘাঁটি পদ্ধতি: রিরাইট এন্ডপয়েন্ট তৈরি:

বলেছি যেকোনো একটা পদ্ধতি করতে। যদি ‘সহজ পদ্ধতি’ করে ফেলেন, তাহলে আগের অবস্থায় ফেরত যান, যা করেছেন মুছে ফেলুন, এবারে এই পদ্ধতিতে করে দেখা যাক:

একাজে আমাদেরকে সহায়তা করতে পারবে এই ডিবাগিং প্লাগইনটি:

• Rewrite Rules Inspector^ – WordPress.org Plugins, Daniel Bachhuber and his team

ইন্সটল করে সক্রিয় করে নেয়া যেতে পারে। না করলেও ক্ষতি নেই। কিন্তু কী ঘটছে, কিভাবে ঘটছে, দেখলেই না শেখা হয়…। এবারে আমাদের থিমের functions.php-তে এই কোডগুলো বসিয়ে নেয়া যাক:

প্রথম ফাংশনটা দিয়ে আমরা একটা এন্ডপয়েন্ট যোগ করছি, মানে ইউআরএল-এর শেষে একটা লেজ যোগ করছি। এই লেজটাতো হাতে লিখেই যোগ করা যায়, যেমন: example.com/kauwa; হ্যা, ঠিক, কিন্তু আসলে এই লেজ, সেই লেজ না। এই লেজটা ডায়নামিকভাবে প্রোগ্রামের মাধ্যমে কাজ করবে – ওয়ার্ডপ্রেসের কাছে এর একটা অর্থ থাকবে। আমরা যে লেজটা যোগ করেছি, তা হলো: signup। অর্থাৎ, আমাদের ডোমেইন নামের শেষে লেজটা যোগ হয়ে ডায়নামিক ইউআরএলটা হবে:

https://example.com/signup

যেহেতু রিরাইট র‍্যুল ফ্লাশ না করলে নতুন মান নিবে না, তাই হাসিন হায়দার ভাইয়ের অনুকরণে, আমরা একবার, হ্যা, একবার রিরাইট র‍্যুলটা ফ্লাশ করেছি। এটা ম্যানুয়ালিও করা যায়, সেটা পরে বলছি।

এবারে দ্বিতীয় ফাংশনটা দিয়ে আমরা বলে দিচ্ছি যে, যখন তোমার ইউআরএল থেকে query_variable হিসেবে ‘signup’ পাবে, তখন যে টেমপ্লেট তুমি দেখাবে বলে ঠিক করেছিলে, সেটার বদলে তুমি আমাদের বলে দেয়া টেমপ্লেটটা দেখাবে। এবং আমরা, ঐ যে, প্রথমে কোর থেকে কপি করে ফাইলটা তৈরি করেছিলাম, সেই ফাইলটার পাথ, ফাংশনটার ভিতরে দেখিয়ে দিয়েছি।

ব্যস, কাজ শেষ। আমরা, পূর্বনির্ধারিত পাতা থেকে ব্যবহারকারীদের আমাদের পাতায় রিডিরেক্ট করে নিয়ে এসেছি। ওয়ার্ডপ্রেসের নিবন্ধন ইউআরএল বদলে দিয়েছি। আমাদের কাঙ্ক্ষিত প্যারামিটার (লেজ) যোগ করেছি। এবং সেই লেজে গেলে যে আমাদের তৈরি করা ফাইলটা দেখাবে তাও বলে দিয়েছি। সুতরাং এবারে পরীক্ষা করে দেখাই যায়, কী করেছি আমরা। ব্রাউযারে টাইপ করুন আপনার নির্ধারিত সাইনআপ পাতার ইউআরএল:

https://example.com/signup

দুঃখিত! কাজ করছে না। হয় 404 টেমপ্লেট দেখাচ্ছে, নয়তো প্রথম পাতায় নিয়ে গেছে। কেন হচ্ছে এমন? সব তো ঠিকই আছে। আপনি ঠিকই /signup লেজও যোগ করেছেন।

রিরাইট র‍্যুল্‌স ফ্ল্যাশ করা: এই অবস্থায় দেখা না যাওয়ার একটা কারণ হতে পারে আপনার রিরাইট র‍্যুল্‌স ফ্লাশ করা হয়নি। এজন্য যেটা করতে হবে, যে প্লাগইনটা ইন্সটল করতে বলেছিলাম, সেটাতে গেলেই উপরে ডানে Flush Rules বোতাম চেপে কাজটা করা যায়। আর যদি প্লাগইনটা ইন্সটল না করে থাকেন, সেক্ষেত্রে Settings » Permalinks-এ গিয়ে কোনো পরিবর্তন না করে একবার সংরক্ষণ বোতাম চাপুন।

তবু দেখা যাচ্ছে না, তাই না? লেজের পরে আরেকটা লেজ লাগালে কী হয়, দেখি তো? লিখলাম: example.com/signup/asd, এবং নিমিষেই আমাদের কাঙ্ক্ষিত টেমপ্লেটটা লোড হয়ে গেল।

সমস্যাটা আসলে অন্য জায়গায়, এবং একটা সমস্যা ঠিকই আছে।

ঐচ্ছিক: পরীক্ষা করার জন্য, দ্বিতীয় ফাংশনটার ভিতরে if(!is_admin()) { লেখাটার ঠিক আগে লিখুন: echo get_query_var('signup'); এবং ফাইলটা সংরক্ষণ করে এসে রিফ্রেশ করে দেখুন তো কিছু দেখা যায় কিনা ব্রাউযারে। টেমপ্লেটটার উপরে asd লেখাটা দেখাচ্ছে। এর মানে, ?signup=asd ভ্যালুটা দেখাচ্ছে। যদি আমরা asd মুছে ফেলি, তাহলে আবারও 404 কিংবা প্রথম পাতা দেখাচ্ছে এবং কোনো লেখা ইকো হচ্ছে না। অর্থাৎ query_variable-টা কোনো মান পাচ্ছে না। echo … লেখাটুকু মুছে ফেলি, আমাদের পরীক্ষা শেষ।

কারণটা হলো:

যেহেতু add_rewrite_endpoint() তার প্যারামিটারের মান প্রত্যাশা করছে, অথচ আমরা কোনো মান দিচ্ছি না, সে আসলে null মানকে false হিসেবে ধরে নিচ্ছে। অবস্থাটা দাঁড়াচ্ছে: example.com?signup=false। এমতাবস্থায় কোনো টেমপ্লেট লোড করার প্রশ্নই উঠে না। এই সমস্যাটার সমাধান করতে আমাদেরকে request-এ হুক করে ওর জন্য একটা মান সেট করে দিয়ে আসতে হবে। (ব্যাখ্যার উৎস^)

Thomas Scholz বলছেন, এটা ওয়ার্ডপ্রেসের রিরাইট এপিআই-এর একটা ত্রুটি (bug)।

যাহোক, এর সমাধানও আছে। সমাধান, যেমনটা ক্রিস্টোফার ড্যাভিস বলেছেন, এর সমাধান করতে নিচের কোডটুকু functions.php-তে যোগ করে নিতে হবে, এতে মানটা আর false আসবে না, বরং true আসবে:

…এবং আমাদের কাঙ্ক্ষিত টেমপ্লেটও লোড হবে।

ধাপ ৪: বার্তাগুলো দেখানোর ব্যবস্থা

সব সুন্দর মতো হয়ে গেলেও আরো একটা ছোট্ট কাজ বাকি আছে। আপনি যখন এই সাইনআপ ফর্মে কোনো কিছু না লিখে পরবর্তি (next) বোতামে ক্লিক করবেন, তখন কিন্তু সাইনআপও হবে না আবার কোনো ত্রুটি বার্তাও দেখাবে না। এর কারণ, ফর্মটা সাবমিট হচ্ছে wp-signup.php পাতায়, আর সেখানেই ত্রুটি বার্তা দেখাচ্ছে, আর আমরা সেখান থেকে wp_redirect() চালিয়ে ব্যবহারকারীকে আমাদের পাতায় ঘুরিয়ে আনছি, ফলে ত্রুটি বার্তাগুলো হারিয়ে যাচ্ছে।

খুব ছোট্ট একটা ফিক্স দরকার। আমরা যে signup.php ফাইলটা বানিয়েছিলাম নিজের মতো করে, সেই ফাইলটাতে থাকা তিনটা <form> ট্যাগের সাবমিশন অ্যাকশন অংশটা বদলে দিতে হবে। ফাইলের মধ্যে অনুসন্ধান করতে পারেন: action="wp-signup.php" লিখে। তাহলে ফর্ম ট্যাগগুলোর action="wp-signup.php"-এর জায়গায় লিখা যাক:

action=""

অথবা লেখা যাক:

action="<?php echo esc_url($_SERVER['REQUEST_URI']); ?>"

ব্যস। কাজ শেষ। এতে আমাদের ফর্মটা এই পাতায়ই সাবমিট হবে এবং ত্রুটি কিংবা সফলতার বার্তাও সে অনুযায়ী দেখাবে। আমাদের কাজ শেষ এবং আমরা সফল।

স্ক্রিপ্ট যোগ করা

ওয়ার্ডপ্রেসের পূর্বনির্ধারিত সাইন-আপ পাতা বদলানোর মূল কারণই হলো এর চেহারা। তাই এই নতুন তৈরি পাতায় কিছু স্টাইলিং দেয়া লাগতেই পারে কিংবা কোনো জাভাস্ক্রিপ্ট ভ্যালিডেশন দেয়া লাগতে পারে। সেজন্য ওয়ার্ডপ্রেসের ফ্রন্ট এন্ডে যেভাবে স্টাইলশিট কিংবা স্ক্রিপ্ট যোগ করি আমরা, সেভাবেই স্টাইল করা যেতে পারে। কিংবা সরাসরি ফ্রন্টএন্ডের স্টাইলশিটেও (style.css) স্টাইল করা যেতে পারে। খুবই সহজ:

এবারে আপনার স্টাইলশীটে (nanotuts-signup-styles.css) নিজের মতো করে স্টাইল করুন। আপনি বুঝবেন, তবু বলে রাখছি: কন্টেইনারের ক্লাস .mu_register  আর ফর্মের আইডি হচ্ছে #setupform। এছাড়া আমাদের তৈরিকৃত signup.php পাতায় wpmu_signup_stylesheet() ফাংশনে দেখবেন কিছু ইন্টার্নাল সিএসএস করা। সেগুলো, প্রয়োজনমতো কাটছাঁট করতেই পারেন এখন।

এবারে এগুলো ধরে অন্তর্বর্তি এলিমেন্টগুলোর জন্য স্টাইল করে নিলেই সব ফকফকা। 🙂

প্লাগইন না থিম

আমরা পুরো ব্যাপারটা প্লাগইন আর থিমের একটা ভজকট করেছি। আপনি চাইলে পুরো ব্যাপারটা একটা নিজস্ব প্লাগইনে করে ফেলতে পারেন। কিংবা এমনও হতে পারে, এই জ্ঞানটুকু কাজে লাগিয়ে, বুদ্ধি করে একটা পূর্ণাঙ্গ ডায়নামিক প্লাগইনই বানিয়ে ফেললেন, আর ক’দিন বাদে আমরা আর এতো বড় নিবন্ধ না দেখিয়ে মানুষকে বলবো, অমুক ভাই/বোন-এর তমুক প্লাগইনটা ইনস্টল করে নেন, সাফা খিরখিরা! 

কৃতজ্ঞতা

আবারও বলছি, এইটুকুতে পথনির্দেশ করার জন্য Thomas Scholz, majick, Chris Wiegman, David Sader, Chris Davis, হাসিন হায়দার ভাই-সহ অন্যান্য সকলের আকুন্ঠ কৃতজ্ঞতা স্মরণ করছি।

এই লেখাটির সংক্ষিপ্ত সংস্করণ ইংরেজিতে পাওয়া যাবে WordPress Development StackExchange ওয়েবসাইটের এই থ্রেডে^।

The post ওয়ার্ডপ্রেস মাল্টিসাইটে নিজস্ব সাইনআপ পাতা তৈরির কৌশল appeared first on Tuts by Mayeenul Islam.

• গিট ব্যবহারের একেবারে প্রাথমিক জ্ঞান : পর্ব ১, এবং
• গিট ব্যবহারের একেবারে প্রাথমিক জ্ঞান : পর্ব ২

এবারে আমরা জানি গিট কাকে বলে, কত প্রকার, কী কী 🙂 । তাই আজকে আমরা আলোচনা করছি গিট ব্রাঞ্চিং নিয়ে।

অন্যান্য ভার্ষন নিয়ন্ত্রণ সফ্‌টওয়্যারের সাথে গিট-এর পার্থক্য করতে গেলে অনেককেই বলতে শুনি যে, গিটে ব্রাঞ্চিং যথেষ্ট cheap। এই cheap কথাটার মানে যেমন স্বল্প খরচসাপেক্ষ, তেমনি এর দ্বারা বোঝায় এটা যথেষ্ট সহজ, দ্রুত এবং ঝামেলাহীনও। স্বস্তা, কারণ খুব অল্প রিসোর্স ব্যবহার করেই গিট ব্রাঞ্চিং করা যায় অগণিত।

কী এই গিট ব্রাঞ্চিং? ব্রাঞ্চ শব্দটা শুনলেই ব্যাংকের ব্রাঞ্চের কথা মনে হয় না? ঠিকই আছে। ব্রাঞ্চিং সেরকমইতো। এবারে একটা ঘটনা দেখা যাক:

আমি মূল রাস্তা ধরে হাঁটছি। আমার সাথে ২জন বন্ধু আছেন।

আমি মূল রাস্তা ধরে আরো এক মাইল এগোলাম, এবারে আমার সাথে আরো ২জন বন্ধু যোগ দিলেন। অর্থাৎ মোট বন্ধুর সংখ্যা ৪জন।

এবারে আমি রাস্তা বদল করলাম। ডানের গলিতে ঢুকে গেলাম। এই গলিতে আমি আরো ২জন বন্ধু জুটিয়ে নিলাম। মোট বন্ধু: [আগের] ৪জন + [নতুন] ২জন = ৬জন।

আরো এক মাইল এগোলাম, আরো ৪জন বন্ধু জুটিয়ে নিলাম, মোট বন্ধু হলেন ৬+৪=১০জন।

এমন সময় হঠাৎ, পথে আপনার সাথে দেখা। আপনি জিজ্ঞেস করলেন, আপনি এই রাস্তায় কেন? আপনার মূল রাস্তা কোথায়? আমি বললাম, সেটাতো ফেলে এসেছি। আপনি বললেন, বাহ, দারুণ! ১০জন বন্ধু নিয়ে পথ চলছেন! মূল রাস্তাতে আপনার কয় জন বন্ধু ছিলেন? বললাম, ৪জন। কেন, ১০জন নয় কেন? কারণ, বাকি ৬জন যে আমি ডানের গলিতে পেয়েছি।

হ্যা, ব্রাঞ্চিং-এর ক্ষেত্রে এই ব্যাপারটাই ঘটে। যতক্ষণ পর্যন্ত আপনি মূল রাস্তা ধরে হাঁটছেন, ততক্ষণ পর্যন্ত যা ঘটেছে, গলিপথে বা শাখা পথে ঢোকার সময় শাখা পথ কিন্তু ততটুকুর খবরই জানে। আর গলিপথে ঢুকে আপনি কতটুকু এগিয়েছেন, কী করেছেন, মূল পথ কিন্তু তার খবর জানে না।

স্বস্তাশ্রেণীর একটা উদাহরণ হয়ে গেল, তবু এটা বুঝলে ব্রাঞ্চিং-এর কিছুটা ধারণা পাওয়া যাবে। …কথা না বাড়িয়ে এবারে হাত নোংরা করা যাক…

গিট ব্রাঞ্চ তৈরি করা

নিজের কম্পিউটারে একটা ডিরেক্টরি (ফোল্ডার) তৈরি করি test নামে। এই ডিরেক্টরিতে ১টা ফাইল তৈরি করি index.html এবং সেই ফাইলে কিছু একটা লিখে দিই। যা ইচ্ছা লিখতে না চাইলে নিচের মতো লিখে একটা ভ্যালিড HTML ফাইল বানিয়ে নেয়া যেতে পারে:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Testing Git Branching</title>
   </head>
   <body>
      <h1>Testing Git Branching</h1>
   </body>
</html>

ব্রাউযারে index.html ফাইলটা খুললে দেখা যাবে, সাদা দৃশ্যপটে কালো লেখা স্পষ্ট দেখা যাচ্ছে। এবারে সেই ডিরেক্টরি-পাথে git bash চালু করি (মাউসের ডান বোতামে git bash here চেপে – বিস্তারিত)। যেহেতু এটা শ্রেফ একটা ডিরেক্টরি, তাই একে আগে গিট রেপোযিটোরিতে রূপান্তর করি: ব্যাশ-এ লিখি: git init। ব্যস, আমাদের ১টা ফাইলসমৃদ্ধ ডিরেক্টরিটা একটা গিট রেপোযিটোরিতে বদলে গেলো। আমরা এবারে আমাদের প্রথম commit করি, মানে আক্ষরিক অর্থে ভার্ষন নিয়ন্ত্রণ শুরু করি…। (দেখুন পর্দাদৃশ্য ১)

ভালো করে খেয়াল করে দেখুন, ঠিক প্রথম লাইনটার পরে পরের লাইনগুলোতে কোনো বিশেষ কিছু আপনার চোখে পড়ছে কিনা… ‘(master)‘ কথাটা যোগ হয়েছে প্রথম লাইনের পরে, এবং সেটা প্রতিবারই আপনার সাথে সাথে চলছে।

কী এই master?

কমান্ড: git branch

কমান্ড দিই:

$ git branch

অর্থাৎ, আমরা গিটকে বললাম, গিট তোমার ব্রাঞ্চের খবর জানাও। এবারে সে আমাদের দেখাবে:

* master

আবারো সেই master। মানে সে জানালো, তোমার ব্রাঞ্চ বা শাখা হচ্ছে master। ঠিকইতো আছে, এখনও তো আমি মূল রাস্তায় আছি। তো আমাকে যদি কেউ জিজ্ঞেস করে, কোন রাস্তায়? আমি বলবো, মূল রাস্তায় (master) – এর বাইরে তো কিছু বলার প্রশ্নই উঠে না, তাই না?

এবারে চলুন আমরা ব্রাঞ্চ তৈরি করে দেখি… ধরা যাক, আমরা ঠিক করলাম, এবারে আমরা এই প্রোজেক্টে কিছু স্টাইলিং যোগ করবো। কিন্তু মূল প্রোজেক্টটাতে সেই স্টাইলিং নিবো কি নিবো না, তা এখনও সিদ্ধান্ত নিতে পারিনি আমরা। হয়তো, এমন হতে পারে, স্টাইল ছাড়াই প্রোজেক্টটা আমাদের ঠিকই আছে। কিন্তু স্টাইল করলে কেমন লাগবে, সেটা একটু পরখ করে দেখতেও চাচ্ছি। যদি ভালো লেগে যায়, তাহলে কাজে লাগালেও লাগাতে পারি আমরা। …তো এরকম অবস্থায় আমরা style নামে একটা ব্রাঞ্চ তৈরির সিদ্ধান্ত নিয়েছি।

কমান্ড: git branch <branch-name>

ব্যাশে লিখলাম:

$ git branch style

সে আমাদের কিছু না বললেও আসলে style নামে একটা ব্রাঞ্চ তৈরি করা শেষ। আপনার নামের ডানদিকে, এখনও দেখুন (master) কথাটাই আছে, তার মানে আমরা এখনও master ব্রাঞ্চেই রয়েছি। কিন্তু আমাদেরতো নতুন খোলা style ব্রাঞ্চে কাজ করার কথা। আসুন তবে নতুন পথ ধরি…

গিট ব্রাঞ্চ অদলবদল

কমান্ড: git checkout <branch-name>

ব্যাশে লিখি:

$ git checkout style

টিপ্‌স:
ব্রাঞ্চ তৈরি আর বদল করার জন্য দুটো কমান্ড শিখেছি। শর্টকাটে একটা কমান্ড দিয়েও কাজটা করা যায়, লিখতে হবে:
git checkout -b <branch-name>

সে বলছে, হ্যা, style ব্রাঞ্চে বদলে নিয়েছি। আমরা কিন্তু এবারে নতুন রাস্তায় উঠে গেছি। নতুন রাস্তাকে যদি জিজ্ঞেস করি, তোমার কাছে কয়টা ফাইল আছে? বলবে, ১টা (index.html)। তোমার কাছে কয়টা commit রেকর্ড আছে? বলবে, ১টা। আমরা যে আসলেই master ব্রাঞ্চ থেকে বদলে style ব্রাঞ্চে চলে এসেছি, সেটা আমরা এবারে নিজের নামের ডানদিকে দেখতেও পাচ্ছি, (master) নামটা বদলে ‘(style)‘ হয়ে গেছে। তবু আমরা একটু যাচাই করে দেখলাম:

$ git branch
  master
* style

আশা করি বুঝে গেছি যে, ঐ স্টারটা (asterisk – *) আসলে আমাদের দেখায় আমার সক্রীয় ব্রাঞ্চ কোনটা।

এবারে আমাদের ডিরেক্টরিতে (ফোল্ডারে) একটা ফাইল তৈরি করলাম, style.css এবং তাতে লিখলাম:

body{
   background-color: black;
   color: white;
}

আর index.html ফাইলটা খুলে স্টাইলশিটটা লিংক করে দিলাম, <title> ট্যাগের ঠিক নিচেই লিখলাম:

<link rel="stylesheet" href="style.css">

ব্যস, আমাদের সাইটে একটা দারুণ স্টাইলিং করা হয়ে গেল 🙂 ।

এবারে ব্যাশে git status জানতে চাইলে দেখাবে index.html পরিবর্তন হয়েছে, আর style.css নতুন যোগ হয়েছে, তাই untracked। আমরা সব পরিবর্তনকে স্টেজ করে তারপর আরেকটা কমিট করি (ধরা যাক, কমিট বার্তা দিয়েছি: “styles added”)। এবারে গিটের লগ (কমান্ড: git log) পরখ করলে দেখা যাবে দুটো কমিট হয়েছে:

• একটা কমিট হয়েছিল master ব্রাঞ্চে থাকা অবস্থায় (বার্তা: “Initial Commit”)
• আরেকটা কমিট এইমাত্র করলাম, style ব্রাঞ্চে থাকা অবস্থায় (বার্তা: “styles added”)

আমরা যা শিখেছিলাম, সব মিলে গেল। মূল রাস্তা পর্যন্ত যা যা হয়েছিল, সব শাখা রাস্তায় এসেছে। আর শাখা রাস্তায়ও নতুন বন্ধু জুটিয়ে নিয়েছি (নতুন ফাইল কিংবা নতুন লাইন কিংবা পরিবর্তিত লাইন)। ব্রাউযারে index.html ফাইলটা খুললে দেখা যাবে, কালো দৃশ্যপটে সাদা লেখা স্পষ্ট দেখা যাচ্ছে।

আসল মজাটা এখনও শুরু হয়নি। আসল মজাটা দেখা যাবে, যদি আমরা এখন আবার master ব্রাঞ্চে ফিরে যাই। ব্যাশ খুলে লিখলাম:

$ git checkout master

master ব্রাঞ্চে নিয়ে চলো। সে বরাবরের মতোই বলবে:

Switched to branch 'master'

হ্যা, master ব্রাঞ্চে, মানে মূল রাস্তায় ফিরে এসেছি। এবারে ডিরেক্টরিটা (ফোল্ডার) খুলে একটু দেখুন তো…

অ্যাবরাক্যাডাবরা! ছুহ মন্তর ছুহ, যাদু মন্তর ছুহ!

আমাদের style.css হাওয়ায় মিলিয়ে গেছে। শুধু তা-ই নয়, index.html ফাইলটা খুলে দেখুন, স্টাইলশিটটা লিংক করেছিলেন যে লাইন লিখে, সেই লাইনটিও নেই। কী মনে করে ব্রাউযার খুলে দেখলেন, কালো রঙের ব্যাকগ্রাউন্ডও হাওয়া। মাথায় হাত: হায়, হায়! আমার এতো কষ্টের কোড সব মুছে ফেললো গিট!

না বৎস, ধৈর্য্যই ধর্ম্ম!

গিট একেবারে ঠিক কাজটিই করেছে। আপনি গিটকে জিজ্ঞেস করেছেন, গিট তোমার মূল রাস্তার খবর বলো। সে বলছে, ১টা ফাইল, আর ১০ লাইনের কোড। বাকি যা যা যোগ করেছিলেন এই রেপোযিটোরিতে, সব করেছেন নতুন রাস্তায় গিয়ে। পরে যে রাস্তা যোগ হয়েছে, আগের রাস্তা তার খবর কী করে রাখবে? তাই সে আসলে নতুন রাস্তার খবর জানে না। …শান্ত হোন, আপনার কোড হারিয়ে যায়নি। আপনার কোড এখনও নতুন রাস্তায় আছে ঠিকই। আবারও যদি নতুন রাস্তায় ঘুরতে যান, ঠিকই সবকিছু ঠিকঠাক পাবেন, সেখানকার বন্ধুদেরও পাবেন। ব্যাশে লিখুন:

$ git checkout style

দেখুন তো সব ফিরে এসেছে কিনা? …এবার একটু প্রাণ খুলে হাসুন 😀 ।

আমি যখন প্রথম ব্যাপারটা লক্ষ করেছিলাম, আমি ব্যাশটাকে একপাশে এমনভাবে সরিয়ে রেখেছিলাম, যাতে মনিটরের আরেক পাশে ডিরেক্টরিটাও দেখতে পারি। তারপর ব্রাঞ্চ থেকে ব্রাঞ্চে একটু চেকআউট করে এই মজার দৃশ্য দেখেছিলাম মন ভরে। দারুণ লেগেছিল ব্যাপারটা আমার কাছে। 🙂

ব্যস, ব্রাঞ্চিং শেখা শেষ।

গিট ব্রাঞ্চ মিশিয়ে নেয়া

এবারে যদি আপনার style ব্রাঞ্চে করা স্টাইলগুলো দেখে আপনার মন পরিবর্তন করেন, চিন্তা করেন যে, নাহ্‌! ভালোইতো লাগছে কালো ব্যাকগ্রাউন্ডটা (নতুন রাস্তার বন্ধুরা তো ভালো মানুষই)। এক কাজ করি না কেন, মুল প্রজেক্টেই নিয়ে আসি না কেন (মূল রাস্তায়ই নিয়ে আসি বন্ধুদের)? যেই ভাবা, সেই কাজ। আপনি এবারে আপনার style ব্রাঞ্চটিকে master ব্রাঞ্চের সাথে মিলিয়ে নিবেন (merge করবেন)।

কমান্ড: git merge <branch-name>

গাছের একটা ডাল কাটবেন, তো সেটা কি ডালে বসে কাটবেন, নাকি গাছের কান্ডে বসে কাটবেন? …তো সেজন্যই আগে কান্ডে ফিরে আসুন (মানে যে ব্রাঞ্চের মধ্যে অন্য ব্রাঞ্চটাকে মিলিয়ে নিতে চলেছেন)। আর তারপর ডালটার বিহিত করুন (master ব্রাঞ্চে style ব্রাঞ্চটা মার্জ্‌ করুন):

$ git checkout master
$ git merge style

এতে সে দেখাবে: এই হয়েছে, সেই হয়েছে, তোমার দুটো ব্রাঞ্চ মার্জ করে ফেলেছি। অর্থাৎ style ব্রাঞ্চে যা যা করেছিলে, এখন তা হুবহু master ব্রাঞ্চেও যোগ/বিয়োগ করে মিলিয়ে নিয়েছি। তোমার সবকিছু রেডি। ব্যাশে লক্ষ করুন, আপনি এখন master ব্রাঞ্চে আছেন। ডিরেক্টরিতে লক্ষ করুন, style.css ফাইলটা দেখা যাচ্ছে। এই অবস্থায় আপনি ব্রাউযার রিলোড করে দেখুন, আপনার ওয়েবসাইট কালো ব্যাকগ্রাউন্ডে সাদা লেখা দেখাচ্ছে।

গিট ব্রাঞ্চ রিমোটে তোলা

যদি আপনি আপনার রেপোযিটরিটা সার্ভারে কোথাও ব্যাকআপ রাখেন, হতে পারে সেটা github, gitlab, bitbucket, meat ইত্যাদি আপনার নিজস্ব git সার্ভার কিংবা শ্রেফ কোনো শেয়ার্ড রেপোযিটরি। আমরা বোধহয় আলাদা করে গিট রিমোট যোগ করা দেখিনি। খুবই মামুলি কাজ, আমরা এবারে সেটা করে নিই। ধরা যাক, আমাদের গিটহাবে একটা রেপোযিটরি আছে test নামে, তার পাথটা নিলাম, তারপর ব্যাশে লিখলাম:

$ git remote add origin https://github.com/mayeenulislam/test.git

ব্যস, তাতেই হয়ে গেল। origin নামে আমাদের একটা রিমোট যোগ হয়ে গেল, অর্থাৎ একটা সার্ভার কানেক্ট করে ফেললাম আমরা আমাদের এই রেপোযিটরিতে। এবারে আমরা চাচ্ছি, আমাদের style ব্রাঞ্চটা [মার্জ করি বা না করি], সেটা সার্ভারেও তুলে দিতে।

কমান্ড: git push <remote-name> <branch-name>

ব্যাশে লিখতে হবে, সেই পুরোন জানা কমান্ডটি, ধাক্কা দিয়ে তুলে দাও:

$ git push origin master
$ git push origin style

প্রথমে আমরা master ব্রাঞ্চটাকে ধাক্কা দিয়ে তুলে তারপর style ব্রাঞ্চটাকে ধাক্কা দিয়ে তুলে দিচ্ছি। (ইউযারনেম, পাসওয়ার্ড চাইলে দিয়ে দিতে হবে)

ব্রাঞ্চগুলোকে একবার পরখ করে দেখে নেয়া যেতে পারে:

$ git branch --all
* master
  style
  remotes/origin/master
  remotes/origin/style

গিট ব্রাঞ্চ মুছে ফেলা

যেহেতু আমাদের style ব্রাঞ্চের কাজটা আমরা মূল ব্রাঞ্চে (master) মিশিয়ে নিয়েছি, আর ঐ ব্রাঞ্চ নিয়ে কাজ করারও ইচ্ছে নেই, তাই এখন আমরা চাইলে ব্রাঞ্চটা মুছে ফেলতে পারি। নতুন রাস্তার বন্ধুরা যদি আমার রাস্তায় চলে আসে, নাইবা থাকলো সে নতুন রাস্তা। 🙂

কমান্ড: git branch -d <branch-name>

মুছে ফেলার কাজটা খুব সোজা, কান্ডে থাকা অবস্থায় কিন্তু ডাল কাটতে হবে, অর্থাৎ master ব্রাঞ্চে থাকা অবস্থায় শাখা মুছে ফেলার কমান্ড দিতে হবে:

সতর্ক থাকুন:
ব্রাঞ্চ ডিলিট করার জন্য -d লেখাটা নিরাপদ। এতে সে মার্জ করতে না পারলেও কারণ দেখাবে। আর যদি আমরা -d না লিখে -D লিখতাম, তাহলে কিন্তু সে জোর করে ব্রাঞ্চটা ডিলিট করে দিত।

$ git branch -d style

অর্থাৎ, গিট, style ব্রাঞ্চটাকে মুছে ফেলো তো। এতে সে লোকাল রেপোযিটরি থেকে style ব্রাঞ্চটা মুছে ফেলবে। পরখ করে দেখে নিতে পারেন:

$ git branch --all
* master
  remotes/origin/master
  remotes/origin/style

আমরা যেহেতু style ব্রাঞ্চটাকে master ব্রাঞ্চে মার্জ করেই ফেলেছি, সেটাকে তাহলে আর সার্ভারে তুলে দেখানোর কোনো মানেই ছিল না। ভুয়া একটা কাজ করেছি। কিন্তু তবু শিখে রাখলাম, মার্জ করি বা না করি, উভয় অবস্থায়ই ব্রাঞ্চকে রিমোটে তুলে রাখা যায়। কিন্তু এইমাত্র আমরা লোকাল style ব্রাঞ্চটাকে মুছে ফেলেছি। সার্ভারেরটা কিন্তু এখনও আছে। সেটা কিভাবে মুছবো?

সার্ভারের style ব্রাঞ্চটা মুছে ফেলা খুব সোজা। শুধু লোকালের style ব্রাঞ্চটা সার্ভারে একটু কেরামতি করি তুলে দিলেই হলো।

কমান্ড: git push <remote-name> :<branch-name>

তাহলে আমাদের origin রিমোট থেকে style ব্রাঞ্চটি মুছে ফেলতে লিখতে হবে:

$ git push origin :style

ব্রাঞ্চের নামের আগে কোলন (:) খেয়াল করবেন কিন্তু। এটা হচ্ছে true‘র প্রতীক।

সতর্কতা
গিট ব্রাঞ্চিং ব্যবহার করার সময় খুব সতর্ক থাকতে হয় আপনি আসলে কোন ব্রাঞ্চে কাজ করছেন। ধরা যাক আপনি একটা ফিচার ব্রাঞ্চ খুলে কাজ করছিলেন, অথচ সপ্তা’খানেক পরে ভুলে গেলেন সেটা। আপনি অন্য কোনো কাজ ভুলে, এই ব্রাঞ্চে করে যাচ্ছেন অনবরত। অনেকদিন কাজ করার পর মনে পড়লো, হায় হায়, এটা কী করলাম, এই কাজ তো এই ব্রাঞ্চে করার কথা ছিল না। এই এত্তোগুলো কমিট তো এই ব্রাঞ্চে করার কথা ছিল না। তখন হয়তো ফেরা যাবে, কিন্তু সেটা যে বন্ধুর পথ হবে, সেটা আন্দাজ করা যায়।

এজন্য, যে এডিটর/আইডিই আপনি ব্যবহার করছেন, তাতে গিট ইন্টেগ্রেড করা গেলে খুব কাজের হয়। আর যদি তা না করা যায়, তাহলে প্রতিবার কাজে নামার আগে ব্যাশ খুলে ব্রাঞ্চটা দেখে নেয়ার অভ্যাস করতে পারেন।

আমার অভিজ্ঞতা:
যারা আমার মতো LESS বা Sass দিয়ে সিএসএস করেন, তারা কোনো না কোনো কম্পাইলার ব্যবহার করে থাকেন। এই কম্পাইলারগুলো যদি সেটআপ করা থাকে যে স্বয়ংক্রীয়ভাবে কম্পাইল হবে, তাহলে এগুলো ফাইলের modified টাইমস্ট্যাম্পের দিকে খেয়াল রাখে। যদি এধরণের কম্পাইলার সক্রীয় থাকে আর আপনি কম্পাইল করে একটা মিনিফাইড সিএসএস ফাইল তৈরি করে থাকেন, তাহলে ব্রাঞ্চ থেকে ব্রাঞ্চে অদলবদল হবার সময় সে মনে করে ফাইলটা বদলেছে, সাথে সাথে সে একটা কম্পাইল্‌ড সংস্করণ তৈরি করে। এটা ব্রাঞ্চ থেকে ব্রাঞ্চে দৌঁড়াদৌঁড়ির সময় খুবই বিশ্রী রকমের ঝামেলা তৈরি করে। এই ঝামেলা এড়াতে আমি ব্রাঞ্চ বদলের আগে কম্পাইলারটা সাময়িক বন্ধ করে নিই। …আপনাদের কাছে ভালো কোনো সমাধান থাকলে, তা মন্তব্য করে জানালে খুব উপকার হবে।

পরিশেষ

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

ব্রাঞ্চিং-এ গেলে কিংবা একাধিক ডেভলপার মিলে কাজ করতে গেলে সবচেয়ে বড় যে সমস্যাটার সম্মুখিন সবাই হয়, তা হলো merge conflict বা মেশানোতে সংঘর্ষ। এই মার্জ কনফ্লিক্ট, কলেবোরেট করে, মানে একাধিক ডেভলপার মিলে ঝামেলা না করে কাজ করা বিষয়ে আরেকটা আলোচনার জোর দাবি রাখে। আগামী কোনো পর্বে সেটা নিয়ে আলোচনা করার আশা রাখি, ইনশাল্লাহ। সেদিন আমরা সহজে বোধগম্য কোনো গিট মডেল নিয়ে আলোচনা করতে পারি, যা আমাদের কাজকে আরো ঝামেলাহীন করে কলেবোরেটিভ কোড করতে সহায়তা করবে।

আরো গভীরে জানা যাক:

1. Git Branching – Branch Management – Git^ – Scott Chacon-এর বই
2. Git: Delete a branch (local or remote)^ – Tobias Kraze
3. Branching and merging best practices in Git^ – StackOverflow

প্রচ্ছদের ছবি: chloepettersson.com থেকে নেয়া ছবি ও অন্যান্য গিট ব্রাঞ্চিং মডেলের মন্তাজ।

হালনাগাদ: ৩১ জানুয়ারি ২০১৭

The post গিট দিয়ে ভার্ষন নিয়ন্ত্রণ – git branch appeared first on Tuts by Mayeenul Islam.

• আপনি যে থিম ব্যবহার করছেন, তার কোডের মান কেমন?
• আপনি যে প্লাগইনগুলো ব্যবহার করছেন, তার কোডের মান কেমন?
• আপনি যে সার্ভারে সাইট হোস্ট করেছেন, তার মান/গতি কেমন?
• কিংবা আপনি যে তথ্য আপনার সাইটে রাখছেন, তা কতটা অপটিমাইজ্‌ড, মানে প্রয়োজনানুগ গুছিয়ে রাখা?
• কিংবা আপনার সাইটে যেসব থার্ড পার্টি রিসোর্স ব্যবহার করেছেন, সেগুলো কতটা গতিশীল?

…ইত্যাদি বহু কিছু। এসব বিষয়গুলো নিশ্চিত করার পরও অনেক সময় সাইটের গতি আশানুরূপ পাওয়া যায় না। আপনি যদি তখন Google-এর PageSpeed Insights, GTmetrix কিংবা Yahoo!’র YSlow ব্যবহার করে পরখ করে থাকেন, তাহলে দেখবেন, সেখানে আপনাকে বলা হচ্ছে, “Enable Compression” (কম্প্রেশন সক্রীয় করুন)।

এটা খায় না মাথায় দেয়

আপনি যখন একটা ওয়েবসাইটের ঠিকানা লিখে এন্টার চাপেন, আপনি তখন আসলে সার্ভারকে বলেন, অমুক সাইটের তথ্যগুলো পাঠাও তো…। সার্ভার তখন সেই সাইটের তথ্যগুলো আপনাকে পাঠাতে থাকে। 10 মেগাবাইট ডাটা থাকলে, সে 10 মেগাবাইট ডাটা আপনাকে পাঠিয়ে দেয়, আপনি তখন সাইটটা দেখতে পারেন। যদি gZip Compression চালু করা থাকে, তাহলে যা ঘটবে: আপনি সার্ভারকে বলবেন, সাইটের ডাটা পাঠাও… সে তখন দেখবে সাইটে 10 মেগাবাইট ডাটা আছে, সে সেটাকে কম্প্রেস করবে, মানে যিপ করবে, মানে গুটিয়ে নিবে, এতে ডাটার আকার কমে আসবে মাত্র 3 মেগাবাইটে, অর্থাৎ সার্ভার তখন আপনার ব্রাউযারে পাঠাবে 10 মেগাবাইটের বদলে মাত্র 3 মেগাবাইট… কতটা দ্রুত হয়ে যাবে সাইট বুঝতেই পারছেন। বাকি কাজটা হবে এবার আপনার ব্রাউযারে… ব্রাউযার সেই কম্প্রেস করা ফাইলটা পেয়ে সেটাকে আনকম্প্রেস/ডিকম্প্রেস করবে, মানে আনযিপ করবে, পোটলা খুলবে, তারপর আপনাকে সাইটটা দেখিয়ে দিবে। …এভাবে gZip কম্প্রেশন আপনার সাইট পেজের আকার ৭০% পর্যন্ত কমিয়ে আনতে পারে।

কিভাবে কম্প্রেশন সক্রীয় করতে হয়

আমি সাধারণত Apache সার্ভার ব্যবহার করি, তাই আমার জানা সমাধানগুলো অ্যাপাচি সার্ভার-কেন্দ্রীক।

জ্ঞাত পদ্ধতি ১: প্রথমদিকে মহা ফ্যাসাদে পড়লাম, কমপ্রেশন সক্রীয় করার উপায় পাচ্ছিলাম না। এমন সময় এক ব্লগে লেখা দেখলাম: ওয়ার্ডপ্রেস সাইটের অ্যাডমিন প্যানেলে লুকানো একটা সেটিং আছে: ব্রাউযারে লিখুন: .../wp-admin/options.php – মানে, সাইটের অ্যাডমিন প্যানেলে থেকে options.php পাতায় যান। এখানে gzipcompression নামে একটা অপশন আছে, সেটার মান 0 থেকে বদলে 1 করে দিতে হবে, মানে false থেকে true করে দিতে হবে। কিন্তু এটা ব্যবহার করে আমি কোনো সমাধান পেলাম না। আপনাদের কারো উপকার হলে, এটাই একাজে সবচেয়ে সহজ সমাধান।

জ্ঞাত পদ্ধতি ২: পরে ওয়ার্ডপ্রেস ডেভলপমেন্ট স্ট্যাকএক্সচেঞ্জে আলোচনা করে বের করে আনলাম এর কার্যকরী পদ্ধতি: আমাকে Toscho (Thomas Scholz) জানালেন: php.ini ফাইলে zlib.output_compression = On চালু করলেই তা হয়ে যায়।

যেহেতু আমি শেয়ার্ড সার্ভার ব্যবহার করছিলাম, তাই এটাও পরখ করে দেখা হয়নি।

সক্রীয় পদ্ধতি ৩: তারপর আরেকদিন আলোচনায় Rarst (Andrey “Rarst” Savchenko) আমাকে জানালেন এর .htaccess পদ্ধতির কথা। তিনি আমাকে অ্যাপাচি’র কোড স্নিপেট^ই সরাসরি শেয়ার করলেন। সময়ের আবর্তে এই পাতায় অনেক পরিবর্তন আসছে, আসবে। তাই লাইন নম্বর ধরে কোডটা দিলে আজ এক জায়গায় কাল আরেক জায়গায় চলে যাবে। তাই আমি শুধু প্রয়োজনীয় অংশটুকু আলাদা করে নিলাম এখানে:

যেটা করতে হবে, আপনার ওয়ার্ডপ্রেস সাইটের .htaccess ফাইলটা সম্পাদনা মোডে খুলুন (ফাইলটা ওয়ার্ডপ্রেসের র‍্যুটেই থাকে)। যদি .htaccess ফাইল না থাকে, ঠিক এই নাম দিয়ে একটা ফাইল তৈরি করে নিন। আগে থেকে থাকা ফাইলে কিছু কোড থাকবে, সেগুলো আগে একটা জায়গায় কপি করে ব্যাকআপ নিয়ে রাখুন। সেখানেই সবার নিচে এই কোডটুকু বসিয়ে নিন।

ব্যস, কাজ শেষ।

যাচাই করুন

এবারে আসলেই সাইটে gZip কম্প্রেশন চালু হয়েছে কিনা যাচাই করে নিন RedBot^ থেকে, কিংবা GTmetrix^ থেকে। আপনার সাইটের URL লিখে সাবমিট করুন, দেখিয়ে দিবে gZip কম্প্রেশন চালু হয়েছে কিনা, এবং কতটুকু গতিবৃদ্ধি পেল তাতে।

মুদ্রার উল্টো পিঠ

আমরা বলেছিলাম সার্ভার আমাদের ব্রাউযারে কম্প্রেস করা ফাইলটা পাঠাবে। কিন্তু আমাদের ব্রাউযার যদি জানেই না কিভাবে কম্প্রেস করা ফাইলকে ডিকম্প্রেস করতে হয়, তখন? পুরোন ব্রাউযারগুলোতে এই সমস্যা ছিল। এখন আর এটা বোধহয় সমস্যা না। তাছাড়া, যত বড় কম্প্রেস ফাইল, তত বেশি CPU-এর ব্যবহার। সুতরাং এই পারফর্মেন্স পাওয়ার পিছনে আপনার সার্ভারের সিপিইউ-এর ব্যবহারও বাড়ছে। আরো জানা যাবে Lori MacVittie-এর এই ব্লগ (আর্কাইভ থেকে)^ থেকে।

তাই মনে রাখবেন, যদি কোনো সমস্যা হয়, তাহলে আপনার .htaccess, যা ব্যাকআপ রেখেছিলেন, তা থেকে .htaccess আবার আগের মতো করে নিন। আপনার ভুলের দায়ে আমাকে জড়ালে খুব কষ্ট পাবো তখন। 🙂 শুভ হোক!

-মঈনুল ইসলাম
mayeenulislam.github.io

বাড়তি পঠন

• PageSpeed: Enable gZip Compression^ – GTmetrix

The post ওয়ার্ডপ্রেস সাইটকে গতিশীল করতে gZip Compression চালু করার পদ্ধতি appeared first on Tuts by Mayeenul Islam.