Author: hasin

How to enqueue javascript files properly in the WordPress admin panel

September 25, 2014 ·

You’d probably have answered the question already, won’t you? We all know that the correct answer is to do that we have to write a function that hooks the “admin_enqueue_scripts” and inside that function we will have to load the script via wp_enqueue_scripts() function. That’s the correct answer, but when it comes to the best practices, it fails. Because when you’re loading a javascript file blindly in all pages, it can be messy and it also may conflict with other scripts which are already loaded in that page. Besides that, why load an extra script everywhere when you actually need it in a specific page, or two perhaps.

The correct, or “precise” way to enqueue a javascript file in the WordPress admin panel is to check first which page you’re on. And when you’re on that specific page where this javascript file is actually required, load it. So how you’re gonna check which page you’re on in the admin panel? The enqueue hook passes a parameter that tells you about this. Let’s have a look at the following example

[sourcecode language=”php”]
add_action("admin_enqueue_scripts","admin_scripts_loader");

function admin_scripts_loader(){
wp_enqueue_script("myscript","path/to/my/script.js");
}
[/sourcecode]

There is nothing wrong with the enqueueing system above. However, the only problem is that it will load your script in every admin page, you need it or not. So let’s write a better version of that admin_scripts_loader function.

[sourcecode language=”php”]
function admin_scripts_loader($hook){
if(in_array($hook,array("post-new.php","post.php","edit.php"))) {
//specifically load this javascript in post editor pages
wp_enqueue_script("myscript", "path/to/my/script.js");
}
}
[/sourcecode]

Now the code is more accurately loading your javascript file only in the post editor pages. This $hook variable gives you the name of the PHP file that you’re on. So it’s quite easy for you to figure out where you should load it.

Hope you enjoyed it.

Fetch WordPress media files using BackboneJS

September 23, 2014 ·

WordPress uses BackboneJS and Underscores in the admin panel. Though codex has a rich set of documentation on different WordPress topics, it lacks instructions of using these BackboneJS models in your code. So here’s a small snippet which shows you how to fetch an attachment from your WordPress blog using these models

First of all, you will have to enqueue media scripts via wp_enqueue_scripts or admin_enqueue_scripts hook. This will load all the necessary media js scripts needed for this task.

[sourcecode language=”php”]
wp_enqueue_media();
[/sourcecode]

And then, from your front end code you can access the attachments like this

https://gist.github.com/hasinhayder/eb62a4c02bf4134f5939

Hope you liked it 🙂

ReduxFramework – a perfect example of how not to redesign your site!

September 7, 2014 ·

This is not a rant. It’s a post from a fan who is sad, very sad.

I am a fan of Redux Framework and use it in all my themes. It’s easy to use and it has an excellent collection of controls which can make your life easier when you deal with option panels. However, the documentation SUCKS!!! It SUCKS big time. Not because it lacks necessary information, but because how it gives you the exact feeling of finding a needle in the haystack. If you go to their documentation, you will literally feel lost. Why not try to search the documentation of “color” control, or “text” perhaps”.

It was a lot easier to find the required information when they were using github wiki. But now, with the redesign, it’s very tough. Their search doesn’t work as expected, gives you a lot of unnecessary information that you don’t need.

And oh, the funny thing is that in the WHOLE site, their github repository is not linked (as of the time of writing it). You simply can’t find a “DOWNLOAD” button, not even something that takes you to the original ReduxFramework repo! Heh, I submitted a ticket in their issue tracker and Dovy replied that he will take care of it. Maybe he is too busy to add a link in 3 months!

So go to ReduxFramework site, and scream “Where is the Mothe*fuck*ng download/fork link?”. No one will hear your scream, boy, no one. They are too busy in making PAID extensions.

I love ReduxFramework. I don’t like how it gives a negative impression from the website. I really don’t like that.

কিভাবে ওয়ার্ডপ্রেসে নিজের থিমে রিডাক্স ফ্রেমওয়ার্ক যোগ করব?

July 16, 2014 ·

ওয়ার্ডপ্রেসের যতগুলো অ্যাডমিন প্যানেল বা অপশন ফ্রেমওয়ার্ক আছে তাদের মাঝে রিডাক্স অন্যতম। অনেকগুলো চমৎকার ফিচার, প্রচুর ফিল্ডের সমারোহ এবং সহজ ব্যবহারোপযোগিতার কারনে রিডাক্স খুব দ্রুতই ওয়ার্ডপ্রেস থিম ডেভেলপার দের দৃষ্টি আকর্ষন করতে সক্ষম হয়েছে। এছাড়াও রিডাক্সে ডেভেলপাররা ক্রমাগত এটাকে আপডেট করে চলেছেন, যার ফলে আমরা মাঝেমাঝেই পাচ্ছি নিত্য নতুন ফিচার। আজকের এই আর্টিকেলে আমি দেখাবো কিভাবে আমরা আমাদের থিমে এই রিডাক্স ফ্রেমওয়ার্ক দিয়ে তৈরী অপশন প্যানেল যোগ করব

১. এজন্য প্রথমেই https://github.com/ReduxFramework/ReduxFramework/ এখানে ডানদিকের নিচে গিয়ে “Download zip” বাটনে ক্লিক করে রিডাক্স ফ্রেমওয়ার্ক ডাউনলোড করে নিন

২. ডাউনলোড করা জিপ ফাইলটি আনজিপ/এক্সট্রাক্ট করলে redux-framework-master নামে একটা ফোল্ডার পাবেন। সেটা ওপেন করে একমাত্র ReduxCore এবং sample নামের ফোল্ডার দুটো রাখুন, আর class.redux-plugin.php, index.php, license.txt, redux-framework.php নামের ফাইলগুলো রেখে বাকি সবকিছু ডিলেট করে দিন। ডিলেট করার পরে redux-framework-master ফোল্ডার এর কনটেন্ট হবে নিচের মত

Screen Shot 2014-07-16 at 9.47.41 PM

৩. এবার আপনার থিমে libs নামে একটা ডিরেক্টরী তৈরী করে তার ভেতরে এই redux-framework-master ফোল্ডার পেস্ট করে দিন।

৪. এবার আপনার থিমের functions.php ফাইলে নিচের কোড টুকু যোগ করুন

if(!class_exists("ReduxFrameworkPlugin")){
    require_once(get_template_directory()."/libs/redux-framework-master/redux-framework.php");
    require_once(get_template_directory()."/libs/redux-framework-master/sample/sample-config.php");
}

৫. এবার আপনার থিম অ্যাক্টিভেট করে ওয়ার্ডপ্রেস এর অ্যাডমিন প্যানেলে আসলেই বামপাশে দেখবেন “Sample Options” নামে একটা মেনু চলে এসেছে, যা আসলে রিডাক্সের স্যাম্পল ফাইল টির আউটপুট।

ব্যাস, আমাদের থিমে রিডাক্স ফ্রেমওয়ার্ক যোগ করা শেষ। একদম সহজ, তাই না? এখন আপনি sample-config.php ফাইলটি স্টাডি করে দেখতে পারেন কিভাবে বিভিন্ন ধরনের ফিল্ড যোগ করা হয়েছে। লাইন নম্বর ২৩৯ থেকে এই সেকশন এবং ফিল্ড গুলোর ডেফিনিশন শুরু হয়েছে। এখন একটা বিষয় খুবই জরুরী, আর সেটা হল এই যে আমাদের থিমের ইউজার রা রিডাক্সের সাহায্যে বিভিন্ন ডেটা ইনপুট দিবে – আমরা সেগুলো থিমে ব্যবহার করব কিভাবে। এর জন্য আমাদের দেখতে হবে ১৫৩৫ নম্বর লাইনে (বর্তমান আপডেট অনুযায়ী) এই লাইনটি আছে

'opt_name'          => 'redux_demo',

এখানে আপনি আপনার পছন্দ মতো ভ্যারিয়েবলের নাম লিখতে পারবেন। যেমন আপনার থিমের নাম যদি হয় FlyHigh তাহলে আপনি লিখতে পারেন

'opt_name'          => 'flyhigh',

এটা করা হয়ে গেলে আপনার থিমের ফাইলে সবার উপরে এই লাইনটি লিখবেন

global $flyhigh;

এর পর থেকে রিডাক্সের যেকোন ফিল্ডের ডেটা আপনি অ্যাক্সেস করতে পারবেন $flyhigh[‘fieldid’] এইভাবে। ফিল্ডের আইডি কিভাবে লিখতে হয় এটা জানতে হলে আপনি স্যাম্পল কনফিগ ফাইলে অনেক উদাহরণ পাবেন, যেমন ধরুন একটা ফিল্ডের ডেফিনিশন হল

array(
    'id'        =>  'my_text_field',
    'type'      =>  'text',
    'desc'      =>  'Add some awesome text here',
    'default'   =>  'Oh WOW!',
    'title'     =>  'My Awesome Text'

),

উপরের উদাহরণে ফিল্ডের আইডি হল my_text_field। আরেকটা জিনিশ, সেটা হল যে “Sample Options” নামের মেনুর নাম পরিবর্তন করতে চাইলে নিচের লাইনটি খুঁজে বের করে আপনার পছন্দ মত মেনু নাম দিন

'menu_title'        => __('Sample Options', 'redux-framework-demo'),

এই স্যাম্পল ফাইলটি আপনার জানার সুবিধার্থে রিডাক্স টিম করে দিয়েছে। এই ফাইলে পরিবর্তন না করে বরং একই ফোল্ডারে দেখবেন barebones-config.php নামে আরেকটা ফাইল রয়েছে, যেটাতে শুধু যেটুকু দরকার সেটুকুই কোড আছে। আপনি সেই ফাইলটি আপনার থিমের কোথাও কপি করে নিয়ে আপনার থিমের জন্য নিজের মত করে অ্যাডমিন প্যানেল বানাতে পারবেন।

আশাকরি আর্টিকেলটি আপনাদের ভালো লেগেছে। তারপরেও মন্তব্যে জানালে খুশি হব 🙂

গাল্প দিয়ে এক মিনিটে ওয়েব সার্ভার তৈরী করা

July 4, 2014 ·

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

প্রথমে একটি আলাদা ফোল্ডার তৈরী করুন অথবা আপনার প্রজেক্টের ফোল্ডারে আসুন, এবার নিচের মত করে টার্মিনালে কমান্ড লিখুন অথবা package.json নামে একটি ফাইল তৈরী করুন যার কনটেন্ট হবে {}

Screen Shot 2014-07-04 at 5.37.03 PM

আপনার যদি নোডজেএস ইনস্টল না করা থাকে তাহলে http://nodejs.org/ এখানে গিয়ে নোডজেএস নামিয়ে ইনস্টল করে ফেলুন।

এবার টার্মিনালে কমান্ড দিন নিচের মত করে। ওয়েব সার্ভার তৈরীর জন্য আমাদের গাল্পের বেজ প্যাকেজ এবং gulp-connect নামক প্যাকেজটি লাগবে।

[sourcecode language=”shell”]
npm install gulp –save-dev
npm install gulp-connect –save-dev
[/sourcecode]

কিছুক্ষনের মাঝেই দেখবেন যে গাল্প এবং গাল্প কানেক্ট ইনস্টল হয়ে গেছে।

Screen Shot 2014-07-04 at 5.44.20 PM

এবার এই ফোল্ডারেই একটা নতুন ফাইল তৈরী করুন gulpfile.js যার কনটেন্ট হবে নিচের মত, পোর্ট নাম্বারের জায়গায় আপনার পছন্দ মত পোর্ট নাম্বার দিতে পারেন।

[sourcecode language=”javascript”]
var gulp = require("gulp"),
connect = require("gulp-connect");

gulp.task("server",function(){
connect.server({
port:8081
});
});

gulp.task("default",["server"]);
[/sourcecode]

এবার একটা index.html ফাইল তৈরী করুন, নিচের মত – অথবা আপনার যা ইচ্ছা তাই লিখুন

[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
[/sourcecode]

এবার টার্মিনালে কমান্ড দিন gulp, কমান্ড দেয়া হলে আপনার ব্রাউজারে ব্রাউজ করুন http:/localhost:8081 ( অথবা gulpfile.js এ যেই পোর্ট নম্বর দিয়েছিলেন, সেটা)

Screen Shot 2014-07-04 at 5.51.38 PM

ব্রাউজারে আপনার ইনডেক্স ফাইলটি (index.html) চলে এসেছে। অনেক সহজ, তাই না?

ওহ এখানে উল্লেখ্য যে আপনি প্রজেক্টে যদি গিট ( git ) ব্যবহার করেন, তাহলে এই নোডজেএস এর ফাইলগুলো গিটইগনোর (.gitignore) ফাইলের মাধ্যমে গিটে কমিট বা পুশ হওয়া থেকে বিরত রাখতে পারেন। এজন্য আপনার ফোল্ডারে/প্রজেক্ট-রুটে একটা ফাইল তৈরী করুন .gitignore নামে যার কনটেন্ট হবে নিচের মত

[sourcecode language=”html”]
node_modules
gulpfile.js
package.json
[/sourcecode]

আশাকরি গাল্প নিয়ে এই আর্টিকেলটি আপনাদের ভালো লেগেছে। পরবর্তীতে গাল্পের লাইভ-রিলোড, সিএসএস প্রি প্রসেসর এবং মিনিফাই প্যাকেজ গুলো নিয়ে আলোচনা করার ইচ্ছা থাকলো।

কিভাবে জিও-ডিএনএস ব্যবহার করে ওয়েব কনটেন্ট দ্রুত সার্ভ করবেন

July 3, 2014 ·

ওয়েবসাইটের কনটেন্ট দ্রুত ভিজিটর দের কাছে সার্ভ করার জন্য বা লোকালাইজড কনটেন্ট সহজে দেখানোর জন্য জিও-ডিএনএস হতে পারে একটা চমৎকার পদ্ধতি। জিও ডিনএস ব্যবহারের মাধ্যমে আপনি ভিজিটরের লোকেশনের উপর ভিত্তি করে ওয়েবসাইট ভিজিটরের কাছাকাছি এলাকায় অবস্থিত কোন সার্ভার থেকে লোড করাতে পারেন। ধরুন আপনি আপনার সার্ভার হোস্ট করেছেন ইউএসএ তে। এখন ইউএস এর ভিজিটর রা সাইট অনেক দ্রুত লোড হতে দেখবে কারন সার্ভার তাদের এলাকায় অবস্থিত। কিন্তু এশিয়া থেকে যদি কেউ আপনার সাইট ভিজিট করে তারা কিন্তু আপনার সাইট দ্রুত দেখতে পাবে না, কারন ইউএস থেকে এশিয়ার মাঝে রয়েছে বিশাল ল্যাটেন্সি। জিওডিএনএস ব্যবহার করে আপনি দুইটি সার্ভার হোস্ট করতে পারেন ইউএস এবং এসিয়ান ভিজিটর দের জন্য। এটা করলে ইউএস থেকে ভিজিট করার সময় সাইট লোড হবে ইউএস সার্ভার থেকে, এশিয়া থেকে ভিজিট করার সময় সাইট লোড হবে এশিয়ান সার্ভার থেকে। ফলে যেখান থেকেই ভিজিট করা হোক না কেন, আপনার সাইটের লোডিং স্পিডের ব্যাপারে ভিজিটর রা আগের চেয়ে অনেক ভালো ফিল করবে। এছাড়াও আপনি লোকালাইজেশনের কাজেও এটা ব্যবহার করতে পারেন, যেমন ইউএস ভিজিটর দের কাছে সাইটের ইংরেজী ভার্সন টা দেখালেন আর বাংলাদেশী ইউজার দের কাছে সাইটের বাংলা ভার্সন দেখালেন 🙂

আজকের এই আর্টিকেলে আমি আলোচনা করব যে কিভাবে এই জিওডিএনএস সিস্টেম ব্যবহার করতে হয়। আশাকরি এই আর্টিকেল পরার পর অনেকের কাছেই বিষয়টি ক্লিয়ার হয়ে যাবে। পাশাপাশি আপনারা বুঝতে পারবেন সিডিএন বা কনটেন্ট ডেলিভারী নেটওয়ার্ক গুলো কিভাবে কাজ করে।

যাই হোক, জিওডিএনএস এর সুবিধা নিতে হলে আপনার ডোমেইন অবশ্যই জিওডিএনএস সুবিধা আছে এমন ডিএনএস সার্ভারে হোস্ট করতে হবে। জিওডিএনএস এর জন্য রেজ-ফোর বা Rage4 বেশ ভালো একটি ডিএনএস সার্ভিস। আপনাকে প্রথমেই http://rage4.com এ গিয়ে রেজিস্টার করে নিতে হবে। মাসে প্রতিটি ডোমেইনের জন্য ২৫০,০০০ ইমপ্রেসন পুরো ফ্রি। সুতরাং এটা ব্যবহার করতে হলে আপনাকে শুরুতেই কোন কিছু পে করতে হচ্ছে না। রেজিস্টার করার পরে আপনার ডোমেইনের নেম সার্ভার পরিবর্তন করে ফেলুন Rage4 এর নেমসার্ভার দিয়ে। রেজ-ফোরের নেমসার্ভার দুটো হল

ns1.r4ns.com
ns2.r4ns.com

ডোমেইনের নেম সার্ভার পরিবর্তন করলে সেটা রিজলভ হতে বেশ কিছুক্ষন সময় নিতে পারে। সুতরাং আপনি মাঝে মাঝে whois কমান্ড দিয়ে চেক করে নিতে পারেন যে আপনার ডোমেইন এর নেমসার্ভারের পরিবর্তন টা রিজলভড হয়েছে কিনা। রিজলভ হয়ে গেলে এবার আমাদের জিওডিএনএস তৈরী করার পালা। আমি ধরে নিলাম যে আপনার ডোমাইন এর নাম abcd.com। এবার Rage4.com এ এসে লগইন করে আপনার ড্যাশবোর্ডে আসুন এবং রেগুলার ডোমেইন সেকশন থেকে আপনার ডোমেইন টি যোগ করে নিন।

Screen Shot 2014-07-03 at 7.46.52 PM

ডোমেইন যোগ করা হয়ে গেলে আপনার ড্যাশবোর্ডে আপনার ডোমেইনের নামের পাশে ম্যানেজ বাটনে ক্লিক করে আপনার ডোমেইন এর ডিএনএস প্যানেলে আসুন। এবার নিচে দেখতে পাবেন বেশ কয়েকটা সেকশন রয়েছে যেমন A Records, CNAME Records, MX Records ইত্যাদি। জিও-ডিএনএস এর জন্য আমাদের প্রয়োজন A রেকর্ড তৈরী করা। সুতরাং A Records সেকশনে NEW RECORD এ ক্লিক করুন। নিচের মত একটা স্ক্রিন ওপেন হবে।

Screen Shot 2014-07-03 at 7.53.50 PM

Record Name ফিল্ডে আপনি চাইলে আপনার ইচ্ছামত সাবডোমেইনের নাম দিতে পারেন, কিংবা মূল ডোমেইনের জন্য যা আছে, অর্থাৎ ডোমেইনের নাম যা আছে সেটাই রেখে দিতে পারেন। মনে করি যে আমরা এই রেকর্ডটা আমাদের এশিয়ান সার্ভারের জন্য তৈরী করব যার আইপি অ্যাড্রেস হল x.x.x.x। এবার Record Value ফিল্ডে সেই আইপি অ্যাড্রেসটি দিন। নিচের জিওডিএনএস সেকশনে GeoDNS Region/Mode ড্রপডাউন থেকে Asia সিলেক্ট করে দিন।

Screen Shot 2014-07-03 at 7.58.22 PM

এবার আপনার ডিএনএস প্যানেলে দেখবেন নিচের মত করে A Record টি যোগ হয়ে গিয়েছে। এবার নতুন A Record না তৈরী করে, আপনার আগে তৈরী করা রেকর্ডটির পাশে ADD বাটনে ক্লিক করুন। এবার ঠিক আগের মতই আরেকটি রেকর্ড যোগ করুন, শুধু রেকর্ড ভ্যালুর জায়গায় আপনার ইউএস সার্ভারের আইপি দিন এবং GeoDNS Region/mode ড্রপডাউন থেকে Americas সিলেক্ট করুন নিচের ছবির মত

Screen Shot 2014-07-03 at 8.03.35 PM

ব্যাস, আমাদের জিও-ডিএনএস কনফিগার করার কাজ শেষ। এখন থেকে ইউএস ভিজিটর রা abcd.com ভিজিট করলে আপনার সাইট সার্ভ হবে y.y.y.y আইপি অ্যাড্রেস ওয়ালা সার্ভার থেকে, আর এশিয়ান ভিজিটর দের জন্য x.x.x.x আইপি অ্যাড্রেস ওয়ালা সার্ভার থেকে 🙂 পুরো বিষয়টা কিন্তু একেবারেই কঠিন নয়, বরং অনেক অনেক সহজ – তাই না?

যাদের মনে কৌতুহল যে রেজ-ফোর কিভাবে এই কাজ টা করে তাদের জন্য বলছি, Rage4.com তাদের এই ডিএনএস সার্ভারের জন্য PowerDNS নামে একটা ওপেন সোর্স অ্যাপ্লিকেশন এর মডিফায়েড ভার্সন ব্যবহার করে।

আশাকরি আর্টিকেল টা আপনার ভালো লেগেছে। তাও কমেন্ট করে জানালে খুশি হব। পাশাপাশি কোন প্রশ্ন থাকলে আমাকে টুইটারে জিজ্ঞেস করতে পারেন। আমার টুইটার আইডি হল @hasin

ধন্যবাদ সবাইকে

ভ্যাগর‍্যান্ট দিয়ে নিজের ইচ্ছামত ভার্চুয়াল সার্ভার কনফিগার ও ব্যবহার করা

July 2, 2014 ·

Screen Shot 2014-07-02 at 7.01.57 PM

আমরা যারা বিভিন্ন ডেভেলপমেন্ট এনভায়রনমেন্ট নিয়ে কাজ করি তাদের অনেক সময়েই এমন টুল ইনস্টল করা লাগে যেটা একটার সাথে আরেকটা কনফ্লিক্ট করে। পিএইচপিএর জন্য টিউন করা একটা মেশিনে আবার রুবি বা পাইথন সেটআপ করে ওয়েবসার্ভার কনফিগার করতে গেলে অনেক সময় এটা কাজ করা বন্ধ করে দিতে পারে বা ওটার কোন একটা লাইব্রেরীর সাথে এর কোন লাইব্রেরী ঝামেলা করতে পারে। আবার দুই তিন ভার্সন একসাথে চালাতে গেলেও মুশকিল হয়। অথবা হয়তো চাইছেন দুই বা তিনটা ভার্চুয়াল মেশিন তৈরী করে মাইএসকিউএল এর রেপ্লিকেশন/শার্ডিং প্র‍্য্যাকটিস করতে। এইসব সমস্যা খুব সহজেই সমাধান করা যায় ভার্চুয়াল বক্স এবং ভ্যাগর‍্য্যান্ট ইনস্টল করে। ভ্যাগর‍্যান্ট মূলত ভার্চুয়াল বক্স এর একটা র‍্য্যাপার টুল হিসেবে কাজ করে ভার্চুয়াল ডেভেলপমেন্ট এনভায়রনমেন্ট তৈরী করার জন্য। এর মাধ্যমে আমরা একদম ঝামেলা ছাড়াই আমাদের পছন্দের অপারেটিং সিস্টেম (মূলত লিনাক্স বেজড) ব্যবহার করে ভার্চুয়াল সার্ভার বানাতে পারি, সেগুলোতে সফটওয়্যার প্যাকেজ ইনস্টল করতে পারি। এভাবে আমরা আমাদের প্রয়োজনমত একাদিক ভার্চুয়াল এনভায়রনমেন্ট তৈরী করে রাখতে পারি এবং যখন যেটাতে প্রয়োজন সেটাতে লগইন করে কাজ করতে পারি, কাজ না থাকলে শাটডাউনও করে রাখতে পারি। পুরো বিষয়টিই অনেকটা ভিপিএস সার্ভার হোস্ট করার মত 🙂

আজকে এই আর্টিকেলে আমরা দেখবো কিভাবে আমরা ভ্যাগর‍্যান্ট এবং ভার্চুয়াল বক্স নিয়ে কাজ করতে পারি। এর জন্য আমাদের যা যা লাগবে তা হল

১. ভার্চুয়াল বক্স – যেটা আমরা ডাউনলোড করে নিতে পারি https://www.virtualbox.org/wiki/Downloads এখান থেকে
২. ভ্যাগর‍্যান্ট – যা ডাউনলোড করা যাবে http://www.vagrantup.com/downloads.html থেকে
৩. একটা লিনাক্স অপারেটিং সিস্টেম টেমপ্লেট

আপনি http://vagrantbox.es এখানে গেলে অনেক টেমপ্লেট দেখতে পাবেন। নামানোর সময় অবশ্যই খেয়াল রাখবেন ঠিক টেমপ্লেটটি যেন বাছাই করেন। ভার্চুয়ালাইজেশন টুল হিসেবে যেটার পাশে VirtualBox লেখা আছে সেগুলো থেকে নামাবেন। আপনার সুবিধার জন্য আমি প্রচলিত কয়েকটি টেমপ্লেটের ডাউনলোড লিংক দিয়ে দিলাম

ডেবিয়ান ৭.২ হুইজি ৬৪ বিট – https://dl.dropboxusercontent.com/u/197673519/debian-7.2.0.box
ডেবিয়ান ৭.৩ হুইজি ৩২ বিট – https://dl.dropboxusercontent.com/s/60pv9an852jx9y0/Debian-7.3.0-i386b.box?dl=1
উবুন্তু ১৪.০৪ ৬৪ বিট – https://cloud-images.ubuntu.com/vagrant/trusty/current/trusty-server-cloudimg-amd64-vagrant-disk1.box
উবুন্তু ১৪.০৪ ৩২ বিট – https://cloud-images.ubuntu.com/vagrant/trusty/current/trusty-server-cloudimg-i386-vagrant-disk1.box

আমি নিজে ডেবিয়ান ৭.২ এর ৬৪ বিট টেমপ্লেট টি ব্যবহার করি। এই আর্টিকেলেও আমি সেটাই ব্যবহার করে উদাহরণগুলো দেখাবো। তবে পুরো বিষয়টি একই রকম, যেই টেমপ্লেটই ব্যবহার করে থাকেন না কেন 🙂

আপনি যদি প্রথম লিংকটি থেকে ডেবিয়ান ৭.২ টেমপ্লেটটি নামিয়ে থাকেন তাহলে দেখবেন যে debian-7.2.0.box নামে একটা ফাইল সেভ হয়েছে। এটার সাইজ তেমন বেশী না, মাত্র ৩১০ মেগাবাইট। এবার আপনি প্রথমে ভার্চুয়ালবক্স ইনস্টল করুন এবং তারপর ভ্যাগর‍্য্যান্ট ইনস্টল করুন। ইনস্টলেশন টা একদম স্ট্রেইট ফরোয়ার্ড – শুধু নেক্সট নেক্সট ক্লিক করে গেলেই হয়ে যায়। ইনস্টলেশন হয়ে গেলে এবার আমাদের ডাউনলোড করা ডেবিয়ান টেমপ্লেটটি ভ্যাগর‍্যান্টে ইমপোর্ট করতে হবে। এজন্য আপনার টার্মিনাল ওপেন করুন এবং নিচের মত করে কমান্ড দিন

[sourcecode language=”shell”]
vagrant box add wheezy64 debian-7.2.0.box
[/sourcecode]

Screen Shot 2014-07-02 at 6.08.09 PM

এখানে নাম হিসেবে আমি দিয়েছি wheezy64, আপনি আপনার যা ইচ্ছা দিতে পারেন। তবে আমি সাজেস্ট করব প্রাসঙ্গিক নাম দেয়ার। এবার আমরা ভার্চুয়াল সার্ভার তৈরী করব আর সেজন্য কোথাও একটা নতুন ফোল্ডার তৈরী করুন। ধরে নিলাম আপনি ফোল্ডার তৈরি করেছেন যার পাথ হল /path/to/my/folder

এবার আপনার টার্মিনাল ওপেন করে নিচের কমান্ড গুলো দিন

[sourcecode language=”shell”]
cd /path/to/my/folder
vagrant init wheezy64
[/sourcecode]

Screen Shot 2014-07-02 at 6.12.56 PM

এবার নিচের কমান্ড দিন

[sourcecode language=”shell”]
vagrant up
[/sourcecode]

কিছুক্ষনের মাঝেই আপনার ভার্চুয়াল সার্ভার রেডী হয়ে যাবে 🙂

Screen Shot 2014-07-02 at 6.16.24 PM

ব্যাস, আপনার সার্ভার রেডী। চলুন এখন লগইন করে দেখা যাক এই সার্ভারে। এজন্য এই ফোল্ডারে থাকা অবস্থায়ই নিচের কমান্ড টি দিন

[sourcecode language=”shell”]
vagrant ssh
[/sourcecode]

Screen Shot 2014-07-02 at 6.18.14 PM

আপনি আপনার সার্ভারে লগইন হয়ে গেছেন। মজা না? একদম নিমেষেই নিজের একটা আইসোলেটেড সার্ভার। চলুন দেখি এতে রিসোর্সের অ্যালোকেশন কেমন

Screen Shot 2014-07-02 at 6.21.25 PM

উপরের ছবিটা থেকে আমরা দেখতে পারছি যে আমাদের এই সার্ভারে ২৫৬ মেগাবাইট র‍্য্যাম এবং হার্ডডিস্কে ১০ গিগাবাইট স্পেস অ্যালোকেটেড হয়েছে। আপনি এখন এখানে apt-get দিয়ে নিজের ইচ্ছামত প্রয়োজনীয় প্যাকেজ ইনস্টল করে নিতে পারেন। এছাড়াও আমরা চাইলেই এসব রিসোর্স অ্যালোকেশন বাড়াতে পারি। হার্ডডিস্কের স্পেস বাড়ানোর দরকার নাই কারন এটা প্রয়োজনের উপর ভিত্তি করে নিজে থেকে এক্সপ্যান্ড করবে। চলুন আমরা দেখি কিভাবে মেমোরী বাড়াবো এবং কিভাবে আমাদের এই সার্ভারে একটা স্ট্যাটিক আইপি অ্যাড্রেস অ্যাসাইন করবো। এজন্য আগে আমাদের দরকার এই মেশিন থেকে লগআউট করে আমরা যেই ফোল্ডারে ছিলাম সেখানে যাওয়া।

ভ্যাগর‍্য্যান্ট এর যেকোন ভার্চুয়াল এনভায়রনমেন্ট থেকে লগ আউট করতে লিখবেন exit, আর ভার্চুয়াল মেশিন কে স্লিপ মোডে নিতে লগ আউট করার পর লিখবেন vagrant suspend, আর শাটডাউন করাতে চাইলে লগ আউট করার পর লিখবেন vagrant halt ।

আমরা আপাতত লগ আউট করি exit লিখে

Screen Shot 2014-07-02 at 6.28.19 PM

এবার এই ফোল্ডারে আপনি দেখবেন Vagrantfile নামে একটা ফাইল রয়েছে। এই ফাইলটি ওপেন করে “IP” দিয়ে সার্চ করুন, দেখবেন নিচের মত একটা লাইন কমেন্ট করা আছে # দিয়ে। এই লাইনটি আন কমেন্ট করুন # মুছে দিয়ে। উল্লেখ্য যে এখানে আপনার পছন্দ মত যেকোন প্রাইভেট আইপি দিতে পারেন

config.vm.network “private_network”, ip: “192.168.33.10”

ফাইলটি সেভ করে টার্মিনালে কমান্ড দিন vagrant reload এবং পিং করে দেখুন যে মেশিনে আপনার অ্যাসাইন করা আইপি অ্যাড্রেসটি রিজলভ হয়েছে কিনা। আমার মেশিনে আমি আইপি অ্যাড্রেস দিয়েছিলাম ১৯২.১৬৮.৩৩.১১ – বাই দ্য ওয়ে, আপনি আইপি অ্যাড্রেস অ্যাসাইন করার পর আপনার ভার্চুয়াল মেশিনে লগইন করে অ্যাপাচি/এনজিনএক্স সেটআপ করার পরে আপনার ব্রাউজারের অ্যাড্রেস বারে সেই আইপি অ্যাড্রেস দিলেই দেখবেন আপনার ভার্চুয়াল মেশিনের অ্যাপাচি/এনজিনএক্সের ডিফল্ট স্ক্রিন। কত সহজ পুরো বিষয়টিই, তাই না?

Screen Shot 2014-07-02 at 6.34.40 PM

ঠিক একই ভাবে মেমোরী অ্যালোকেশন বাড়াতে চাইলে Vagrantfile এ নিচের লাইন টি খুঁজে বের করুন আর আনকমেন্ট করে ১০২৪ এর জায়গায় নিজের পছন্দ মত ভ্যালু বসিয়ে vagrant reload করুন

vb.customize [“modifyvm”, :id, “–memory”, “1024”]

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

আপনার প্রয়োজন শেষ হয়ে গেলে যেকোন ভার্চুয়াল সার্ভারকে ডেস্ট্রয় করে দিতে পারেন। সেক্ষেত্রে সার্ভারটি আপনার মেশিন থেকে ডিলেট হয়ে যাবে। আপনি যদি এই সার্ভারে কোন প্রয়োজনীয় ফাইল তৈরী করে থাকেন, তাহলে ডেস্ট্রয় করার আগে তার ব্যাকআপ নিতে ভুলবেন না

[sourcecode language=”shell”]
vagrant destroy
[/sourcecode]

আশাকরি ভ্যাগর‍্যান্ট নিয়ে এই আর্টিকেলটি আপনাদের ভালো লেগেছে। তারপরেও কমেন্টে জানালে খুশি হব। আর কোন প্রশ্ন থাকলে আমাকে টুইটারে জিজ্ঞেস করতে পারেন যেকোন সময়, আমার টুইটার আইডি হল @hasin 🙂

ধন্যবাদ সবাইকে

Upgrading PHP to 5.5 in a CentOS 6 server with Vesta CP

June 3, 2014 ·

Vesta CP comes with PHP 5.4 by default. If you want to upgrade it to 5.5, follow these steps

1. Stop Apache and Remove current PHP
[sourcecode language=”shell”]
service httpd stop
yum -y remove php
[/sourcecode]

2. Add remi repository
[sourcecode language=”shell”]
#For 32 Bit OS
wget http://dl.fedoraproject.org/pub/epel/6/i386/epel-release-6-8.noarch.rpm
wget http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
rpm -Uvh remi-release-6*.rpm epel-release-6*.rpm

#For 64Bit OS
wget http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm
wget http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
rpm -Uvh remi-release-6*.rpm epel-release-6*.rpm
[/sourcecode]

3. Enable Remi Repository
open /etc/yum.repos.d/remi.repo and add 1 beside enabled for both [remi] and [remi-php55], as shown in the screenshot
Screen Shot 2014-06-03 at 8.44.47 PM

4. Install PHP 5.5
[sourcecode language=”shell”]
yum -y install php php-bcmath php-cli php-common php-gd php-imap php-mbstring php-mcrypt php-mysql php-pdo php-soap php-tidy php-xml php-xmlrpc php-pecl-apc phpMyAdmin roundcubemail php-opcache php-xdebug
[/sourcecode]

Step 5: Cleanup, linking and finishing
[sourcecode language=”shell”]
mv -f /etc/php.ini.rpmsave /etc/php.ini
mv -f /etc/roundcubemail/db.inc.php.rpmsave /etc/roundcubemail/db.inc.php
mv -f /etc/roundcubemail/main.inc.php.rpmsave /etc/roundcubemail/main.inc.php
mv -f /etc/phpMyAdmin/config.inc.php.rpmsave /etc/phpMyAdmin/config.inc.php
mv -f /etc/httpd/conf.d/roundcubemail.conf.rpmsave /etc/httpd/conf.d/roundcubemail.conf
mv -f /etc/httpd/conf.d/phpMyAdmin.conf.rpmsave /etc/httpd/conf.d/phpMyAdmin.conf
service httpd start
[/sourcecode]

And you’re done 🙂 Enjoy!

Remote deploy your project using git's server side hooks

May 23, 2014 ·

6Icr9fARMmTjTHqTzK8z_DSC_0123
Git hooks are very useful to perform tasks during different states of the codebase. Sometime you can cancel your commit if jshint throws some error on your javascript files, or you can deploy your current working directory somewhere in the server. In this article we will be discussing how to deploy code using git’s server side hooks.

Step 1: Add a git repository somewhere in your server
Create a blank git repository somewhere in your server. For example, see the following code

[sourcecode language=”shell”]
cd /path/to/your/folder
git –bare init myrepo.git
[/sourcecode]

You will see that a new directory named myrepo.git has been created. Inside that folder you will find a few other folders named “hooks”, “branches” and so on. However, sometime, this command may give you unexpected result by creating those child folders outside the myrepo.git. In that case the following commands are helpful

[sourcecode language=”shell”]
cd /path/to/your/folder
mkdir myrepo.git
cd myrepo.git
git –bare init
[/sourcecode]

Now everything will be inside this myrepo.git folder. Lets move to the next step.

Step 2: Add this newly created git repo as a remote to your current project
This part is easy, just follow these commands from inside your current project. We are going to add the repository we created in step 1 as a remote named “server”

[sourcecode language=”shell”]
cd /your/current/project/directory
git remote add server ssh://user@serveraddress/path/to/your/folder/myrepo.git
[/sourcecode]

Once added, you can push to this git repo like you did with origin, like
[sourcecode language=”shell”]
git commit -am "Some Commit Message"
git push server master
# (or simply git push server)
[/sourcecode]

You may want to add your local machine’s public key in the ~/.ssh/authorized_keys file so that you won’t have to input username and password every time you push your code.

Step 3: Add the git hook
To deploy your code after a push, we need to deal with post-receive hook. Log into your remote server and go to the repository that we had created in step 1 (i.e /path/to/your/folder/myrepo.git). Now go to the hooks directory and create a file named post-receive. If you want to deploy your code to a directory accessible by web server, for example /usr/share/nginx/www/myproject then the code of post-receive will be like this

[sourcecode language=”shell”]
#!/bin/bash
export GIT_WORK_TREE=/usr/share/nginx/www/myproject
git checkout -f
[/sourcecode]

The code above will checkout current HEAD of master branch inside the directory specified by GIT_WORK_TREE. But sometime, you may have another project which is cloned from your git repo. In those directories, instead of checking out, we will do a git pull. So our post-receive file’s code will be like this

[sourcecode language=”shell”]
#!/bin/bash
cd /usr/share/nginx/www/myproject
unset GIT_DIR
git pull
[/sourcecode]

remember to unset GIT_DIR which is very important for a git pull from post-receive hook.

Step 4: Give the executable permission to this post-receive hook
In this last step, just give executable permission to this post-receive file and you’re done
[sourcecode language=”shell”]
chmod +x /path/to/your/folder/myrepo.git/hooks/post-receive
[/sourcecode]

That’s mainly it 🙂 Now whenever you push your code from local machine to this remote git repository, your code will be deployed instantly.

I hope you’ve enjoyed this article and I would love to hear your comments.

সহজ বাংলায় ডিজাইন প্যাটার্ন – সিংগেলটন (Singleton)

May 14, 2014 ·

singleton

এই সিরিজে এর আগে আমরা আলোচনা করেছি ফ্যাসাড এবং ফ্যাক্টরি প্যাটার্ন নিয়ে, আর আজ আলোচনা করব সিংগেলটন প্যাটার্ন নিয়ে।

অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিংয়ে বহুল ব্যবহৃত (এবং বহুল সমালোচিত) ডিজাইন প্যাটার্নগুলোর মাঝে একটি হল সিংগেলটন প্যাটার্ন। এই প্যাটার্নের লক্ষ্য হল কোন একটি অবজেক্ট বার বার নতুন ভাবে তৈরী না করে একবার তৈরী করে সেই ইন্সট্যান্সকেই বার বার ব্যবহার করা। যদিও এই প্যাটার্নের উদ্দেশ্য রিসোর্সের সাশ্রয় করা, এবং অবজেক্ট কে রিইউজ করা কিন্তু একই সাথে এটা কিছু জটিলতাও নিয়ে আসে। যাই হোক – সেগুলো নিয়ে আমরা পরে দেখব, আপাতত দেখি সিংগেলটন প্যাটার্ন আসলে কি এবং কিভাবে এটা ব্যবহৃত হয়।

আমরা একটা বাস্তব উদাহরন দিয়ে শুরু করি। মনে করেন যে টেবিলে আপনারা চারজন (আপনি, আপনার বোন, আপনার বাবা এবং মা) খাবার খেতে বসেছেন, পাশে বাবুর্চি দাঁড়িয়ে আপনাদের এটা ওটা এগিয়ে দিচ্ছে। এখন আপনি একটি থালা চাইলেন, বাবুর্চি আপনাকে একটা পরিষ্কার থালা এগিয়ে দিল। একই ভাবে আপনার বাবা, মা এবং বোন থালা চাইলে বাবুর্চি তাদেরকেও যার যার থালা দিয়ে দিবে। এখানে খেয়াল করবেন যে বাবুর্চি কিন্তু আপনার থালা নিয়ে আপনার বোনকে দিচ্ছে না। সবাই যে যার থালা পেয়েছে। এখন আপনি ভাতের গামলা চাইলেন – বাবুর্চি আপনাকে টেবিলে রাখা একমাত্র ভাতের গামলাটি এগিয়ে দিবে। আপনার বোনও যদি এখন ভাতের গামলা চায় তাহলে বাবুর্চি কিন্তু তাঁকে নতুন একটা ভাতের গামলা না দিয়ে সেই একই গামলা তাঁর দিকে এগিয়ে দিবে। তাহলে বিষয়টা কি হল? একই ভাতের গামলা বার বার রিইউজ হচ্ছে, সবাইকে যার যার থালার মত নতুন নতুন ভাতের গামলা দেয়া হচ্ছে না – এই পুরো ঘটনাটাই অনেকটা সিংগেলটন প্যাটার্ন এর মত, যখন অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিংয়ে প্রয়োগ করবেন।

প্রোগ্রামিংয়ের সময় সিংগেলটন প্যাটার্ন অনেকভাবে অ্যাপ্লাই করা যায়, যেমন নিচের কোডে একটি কমন কনটেইনার অবজেক্ট সবাইকে আরেকটি অবজেক্ট সিংগেলটন প্যাটার্নের মাধ্যমে রিটার্ন করছে, বার বার নতুন অবজেক্ট তৈরী না করে। আপনারা এই কোড টি দেখতে পারেন, পিএইচপি তে লেখা https://gist.github.com/hasinhayder/7487898b7d38aefe3179 ।

https://gist.github.com/hasinhayder/7487898b7d38aefe3179

এই কোডে RentACar একটি কনটেইনার অবজেক্ট যে কিনা দুইজন প্যাসেঞ্জার কে একই কার দিচ্ছে (ধরে নেন যে একজন প্যাসেঞ্জার কে নামিয়ে দিয়ে আরেকজন প্যাসেঞ্জার কে একই কার পাঠিয়ে দিয়েছে, হে হে)। কোড রান করালে দেখবেন দুজন প্যাসেঞ্জারই যে গাড়িটি ব্যবহার করেছে তার নাম্বার প্লেট একই 🙂 আমি খুব সহজে বোঝানোর জন্য স্ট্যাটিক অবজেক্ট দিয়ে উদাহরন টি করে দেখালাম আর কি

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

The Storyteller

Rise Of The Machines