জুমলা টিউটোরিয়াল-২ (সেকশন, ক্যাটাগরী ও আর্টিকেল)

নোটঃ এই টিউটোরিয়ালটি তাদের জন্য যারা নিজে থেকে জুমলা ইনস্টল করতে জানেন এবং জুমলার এডমিন প্যানেলে লগিন করতে পারেন।
জুমলা কাস্টমাইজেশনের (টেমপ্লেট ডিজাইন, মডুল ও কম্পোনেন্ট তৈরি) আগে ভালো করে জেনে নেওয়া উচিৎ এর সাধারণ গঠন। অর্থাৎ কোন কাস্টমাইজেশন ছাড়াই কিভাবে ডাউনলোড করা টেমপ্লেট, মডুল ও কম্পোনেন্ট দিয়ে কাজ সেরে ফেলা যায়।

আপনি যদি এডমিন প্যানেলে প্রবেশ করেন তাহলে নিচের মতো একটি ছবি দেখতে পারবেন।
ছবি
আমি আস্তে আস্তে সব কিছু নিয়ে বিস্তারিত আলোচনা করবো। মাঝে মাঝে মনে হতে পারে কথা গুলো বিচ্ছিন্ন কিন্তু কিছুদূর যাবার পরে যখন একটার সাথে আরো একটা মিল খুঁজে পাবেন তখন আবার হয়তো ট্রাকে ফিরে আসবেন। Continue reading

Detect browser name and version using js

I was trying to detect browser version and browser name using java script. I got so many techniques but I am happy with jquery’s one. It’s pretty simple and small block of code. Just check the bellow code that I got from jquery. As it is not possible to use the whole js library all the time but I like to use some part of it or follow the techniques for cross browser tasks. 😀
[sourcecode language=’css’]
//Detect browser version
var userAgent = navigator.userAgent.toLowerCase();
// Figure out what browser is being used
var browser = {
version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
safari: /webkit/.test( userAgent ),
opera: /opera/.test( userAgent ),
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};
alert(‘Browser Version=’+browser.version.toString()+ ‘ Safari=’+(browser.safari? ‘Yes’: ‘No’)+’ Opera=’+(browser.opera? ‘Yes’: ‘No’)+’ IE=’+(browser.msie? ‘Yes’: ‘No’)+’ FF=’+(browser.mozilla? ‘Yes’: ‘No’));
//end browser detection
[/sourcecode]

Edit: Here one thing you may be confused about the test() method. It’s a builtin function in js. The test() method is used to search for a match of a regular expression in a string.

Here’s some links about Test();

  1. Email Address valiadtion
  2. W3 school link

নিজের পোস্ট দেখান নিজের ব্লগেঃ সদস্য পোস্টের rss feed ফিচার

সেইদিন কারিগর নতুন একটা আইডিয়া দিয়েছিলো যে যদি এমন সুবিধা থাকে যে নিজের ব্লগে নিজের পোস্টগুলো (আমাদেরপ্রযুক্তি ফোরামের) দেখানো যেত আর এস এস ফিড হিসাবে বেশ ভালো হতো। ঠিক এই সুবিধাই চালু করা হলো আজ থেকে। কোন টপিক দেখার সময় ডান পাশের দিকে সদস্যের প্রোফাইল অংশ পোস্ট সংখ্যা বা পোস্ট দেখুন লিঙ্কের পাসে rss লেখা নতুন একটা লিঙ্ক যুক্ত করা হলো। অথবা কারো প্রোফাইলেও ঢুকেন তাহলে একই ধরনের rss লিঙ্ক পাবেন।
নিজের পোস্টগুলোকে লিস্ট করে নিজের ব্লগে দেখানোর পাশাপাশি প্রিয় কোন সদস্যের পোস্টও দেখাতে পারেন একই ভাবে।
আগামীতে যেকোন ফোরাম বা সাবফোরামের পোস্টগুলো একই ভাবে আর এস এস ফিডের মাধ্যমে পড়ার সুবিধা আনা হবে।

এই বিষয়ে আমাদের প্রযুক্তি ফোরামে দেখুন এখানে

প্রজন্ম ফোরামের ৪র্থ আড্ডা থেকে ঘুরে আসলাম

আজ ছিলো প্রজন্ম ফোরামের ৪র্থ আড্ডা। আগের তিনবারের চেয়ে এইবার আয়োজন বেশ বড় ছিলো। বিকাল সাড়ে ৫টার দিকে অনুষ্ঠান শুরু হয়। স্থান ছিলো ধানমন্ডি লেকের পানসি রেস্তোরা। প্রায় ৫০ জনের মতো সদস্য, অতিথি ছিলেন। শুরুতেই পরিচয় পর্ব ছিলো। অনেক ভার্চুয়াল মানুষের সাথে পরিচয় হলো। নতুন করে যাদের সাথে ফিজিক্যালি পরিচয় হলো যাদের সাথে অনলাইন পরিচয় ছিলো বা যাদের অনলাইনে চিনি (অনেকের সাথেই আগে দেখা হয়েছে তাই আর সবার নাম উল্লেখ করছি না) যেমন সুহৃদ সরকার, মাহমুব মোর্শেদ, মনি(প্রজন্ম ফোরাম), শিপলু ভাই, মেহেদি আকরাম, ডার্কলর্ডসহ আরো অনেকে। পরিচয় পর্ব শেষে ফোরামের বিভিন্ন বিষয় নিয়ে মতামত ও আলোচনা ছিলো বেশ কিছুক্ষন। এরপর খাওয়া দাওয়া বুফে টাইপ। সব মিলিয়ে বেশ মজা হলো।
এইখানে আড্ডার বেশ কিছু ছবি পাওয়া যাবে। এতো সুন্দর একটা গেট২গেদার এর আয়োজন করার জন্য প্রজন্ম ফোরাম কর্তৃপক্ষকে আন্তরিক ধন্যবাদ।

এ বিষয়ে আমাদের প্রযুক্তি ফোরামের আমার পোশট এই খানে

জুমলা টিউটোরিয়াল , আমার জুমলা অভিজ্ঞতা-১

প্রায় ছয় মাস হলো অফিসে যোগদানের পর থেকে জুমলাতে কাজ করছি। শুরু করেছি জুমলা ১.x.১২ দিয়ে আর এখন ১.৫.x এ কাজ করছি। ভাবছি আমার অভিজ্ঞতা নিয়ে এই পোস্টে নিয়মিত লিখবো।

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

এখন কথা হচ্ছে কিভাবে শুরু করবেন তাইতো ? জুমলার সাইট থেকে জুমলা ডাউনলোড করুন। লোকালহোস্ট ইনস্টল করুন। ইনস্টল করার সময় স্যাম্পেল ডাটা ইনস্টল করুন। এতে প্রথম দর্শনে আপনার বুঝতে সুবিধা হবে। কিভাবে ইনস্টল করবেন তা নিয়ে আমি এখানে লিখছি না কারন এটা নিয়ে আলরেডি অন্য পোস্ট আছে।

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

এই পর্যায়ে আমার আলোচনাগুলো যদি পড়তে পড়তে ঘুম চলে আসে তাহলে এখানে কিছুক্ষন পজ রেখে দিন এবং কিছু সময় পরে আবার দেখুন।

জুমলা ইনস্টল করলে দেখবেন বেশ কিছু ফোল্ডার ফাইল এই সব হাবিজাবি। আমাদের জন্য কিছু জিনিস দরকারী হবে সামনে যেমন-administrator, modules, components , plugins এবং administrator এর ভেতরের ( modules, components , plugins), templates (এটা খুব দরকারী প্রথম পর্যায়ে কারন এই খানে বেশ কিছু ছুরি কাঁচি চালাতে হবে আপনাকে যদি নিজের মতো করে টেমপ্লেট ডিজাইন করতে চান)।

ভালো কথা আমার আলোচনাগুলো হবে জুমলার লেটেস্ট ভার্সন বা জুমলা ১.৫.x সিরিজ নিয়ে কারন এখন এটা নিয়েই বেশি কাজ করে সবাই।

মডুল, কম্পোনেন্ট, প্লাগিনস ফ্রন্টএন্ড ও ব্যাকএন্ড দুই জায়গার জন্যই হতে পারে। মডুলের কাজ গুলো টেমপ্লেট এর কোন নির্দিষ্ট স্থানে কোন কিছু বিশেষ ভাবে দেখানো। দেখা যায় বেশির ভাগ মডুল কোন কম্পোনেন্টের সাথে রিলেটেড, নাও হতে পারে।যেমন ধরুন আপনার একটা ব্লগ সাইট আছে যেখানে অনেক পোস্ট হয়। আপনি চান রিসেন্ট পোস্টগুলো দেখাবেন। তাহলে দেখবেন আপনি জুমলার এক্সটেনশন ডিরেক্টরীতে রিসেন্ট কনটেন্ট আইটেম দেখানোর মতো কোন মডুল পাবেন। যেমন mod_dn. এটার কাজ হলো কোন সেকশন বা ক্যাটাগরী থেকে কন্টেন্ট আইটেম এর লিস্ট দেখানো। এখন এটা অনেক ভাবে হতে পারে যেমন র‌্যান্ডমলি, রিসেন্ট আগে, পুরানগুলো আগে বা ডেট অনুসারে ইত্যাদি বিভিন্ন রকম ভাবে পোস্ট বা কন্টেন্ট আইটেম এর লিস্ট আপনি দেখতে পারেন। এর জন্য আপনাকে কোডিং জানতে হবে না। এডমিন প্যানেল থেকে extention মেনু থেকে মডুলস এ যাবেন আর পজিশন(পজিশন জিনিসটা টেমপ্লেটের সাথে জড়িত, পরে আলোচনায় আসছি) অনুসারে মডুলটা খুঁজে বের করে সেটিংগুলো চেক করুন আর আপনার পছন্দের সেটিং সেট করুন। আর মডুলটা আপনার ইচ্ছা মতো টেমপ্লেটের কোন পজিশনে পাব্লিশ করুন। হয়ে গেলো। আর সেটিং চেক করার সময় আপনি কোন সেকশন বা ক্যাটাগর থেকে রিসেন্ট আইটেম দেখাবেন তার নাম অথবা আইডি দিয়ে দিন।
এখন আসি কম্পোনেন্ট এর কথায়। হাজার হাজার কম্পোনেট আপনি ফ্রি পাবেন জুমলার সাইটে। ধরুন আপনার সাইটের জন্য সাইটম্যাপ বানাবেন। চিন্তা নাই সাইট ম্যাপ বানানোর জন্য একাধিক চমৎকার কম্পোনেন্ট আছে-যেমন ধরুন xmap আমার কাছে বেশ ভালো লেগেছে। এডমিন প্যানেল থেকে component থেকে xmap এ যান আর বিভিন্ন রকম অপশন আছে তা নিয়ে খেলাধুলা করুন। চিন্তা নাই একটা একটা অপশন পরিবর্তন করে তা আবার ফ্রন্ট এন্ড থেকে দেখে নিন। আরে ভাই খেলতে খেলতেইতো শেখা হবে, তাই না ?

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

৪। আশা করি ইমেজে আকারে একটা টেমপ্লেট বানিয়ে ফেলেছেন। এখন আমাদের কাজ হবে এইটাকে জুমলার টেমপ্লেট নিয়ে যাওয়া।

Bangla Virtual Keyboard Scripts for Web Pages is released

Lastly I completed the bengali virtual keyboard (both popup and inline) for web page. Ekushey.org released these scripts.

News from ekushey site:

Bangla Virtual Keyboard Scripts for Web Pages is released. Sabuj Kundu did an excillent job by making this release. Now people who don’t know any keyboard layout for typing Bangla can write Bangla on Web pages. Somewhereinblog, Amader Projukti forum is using this kind of Bangla input system. Now anyone can use these scripts and let user input with Bangla on their web pages.

Both scripts are available here.

BTW, I am working to integrate bangla writing scripts like phonetic,unijoy and probhat to tinyMCE. For this I have already developed a plugin . It’s like a popup virtual keyboard and have opportunity to insert text by from it with fixed keyboard options. Now I am trying to do it directly.

Thank you.

Dynamic change of link text using java script

Today I was doing some works on java script and html to make a inline virtual keyboard. But I was searching google for a script that can change the link text that means anchor tag’s text dynamically. Opps..I took more that 2 hour to solve it and make it cross browser compatible. So here I want to share the code that I used in my works and the links that helps me.

Suppose you want make  something for each click in a link it’s text will be toggled.

like:

<a href=”url here”>Show</a>

<a href=”url here”>Hide</a>

<a href=”url here”>Show</a>

<a href=”url here”>hide</a>  ….

Let’s here is the code :

<a href=”#” onclick=”showhide();”  id=”linkid”>Show</a>
<script language=”javascript”>

var link = document.getElementById(‘linkid’);
function showhide()
{
if (document.all)
{ //IS IE 4 or 5 or later
if(link.innerText==’Show’)
{
link.innerText=’Hide’;
}
else
{
link.innerText=’Show’;
}
}
//IS NETSCAPE 4 or below
if (document.layers)
{
if(link.innerText==’Show’)
{
link.innerText=’Hide’;
}
else
{
link.innerText=’Show’;
}
//alert(“NETSCAPE 4 or below”);
}
//Mozilla/Netscape6+ and all the other Gecko-based browsers
if (document.getElementById &&!document.all)
{
if(link.firstChild.nodeValue==’Show’)
{
link.firstChild.nodeValue=’Hide’;
}
else
{
link.firstChild.nodeValue=’Show’;
}
//alert(link.firstChild.nodeValue);
//alert(” by id and not all”);

}
}
</script>
This code is compatible with most known browsers..:D

Another way:

function toggleshowhide()
{
var anchors = document.getElementsByTagName(“a”);
for(var i = 0; i < anchors.length; ++i)
{
if(anchors[i].firstChild.data == “Show”)
{
anchors[i].replaceChild(document.createTextNode(“Hide”),
anchors[i].firstChild);
}
else if(anchors[i].firstChild.data == “Hide”)
{
anchors[i].replaceChild(document.createTextNode(“Show”),
anchors[i].firstChild);
}
}
}

[প্রিভিউ]গুগল নোল (Google Knol)

গুগল নোল (Google Knol)
======================================

যখনই কিছু খোঁজার দরকার হয় আমরা নিশ্চয় সবার আগে ঢুঁ মারি গুগলে। গুগলের অসংখ্য সার্ভিসের ভেতর গুগল সার্চই অন্যতম। কি আসে না গুগল সার্চে ? আমিতো মাঝে মাঝে ভাবি যদি কোন দিন নিজের বাসার ঠিকানা ভুলে যায় তাহলে রাস্তার পাশের কোন সাইবার ক্যাফেতে গিয়ে সার্চ দিলে মনে হয় পেয়ে যাব বাসার ঠিকানা…হা হা হা।

গুগল এই যে এতো কিছু সার্চ করে আনে এটা গুগলের ক্রেডিট কিন্তু গুগল রেজাল্টগুলো দেখায় বিভিন্ন সাইটের লিঙ্ক আর কিছু নিজের ক্যাশ, আর্কাইভ থেকে। যেমন যে কোন তথ্যের জন্য অনলাইনে উইকিপিডিয়া হলো অন্যতম। গুগল সার্চে প্রায় দেখা যায় উইকিপিডিয়ার লিংক আগে থাকে। গুগল বট ক্রিপ্ট ব্যবহার করে উইকি সহ প্রায় জনপ্রিয় বেশির ভাগ সাইট (হিট বা গুগল র‌্যাংক এর প্রাধান্য অনুসারে) প্রায় প্রতিদিন ইনডেক্স করে। এখন যদি এমন হয় উইকির মতো সব তথ্য গুগলের নিজের থাকবে তাহলে কেমন হবে ? হ্যাঁ গুগল ঠিক সেই ধরনের একটা কাজ করতে যাচ্ছে। গুগলের একদম সাম্প্রতিক প্রজেক্টের নাম ‘গুগল নোল (Google Knol)’। আমার এই পোস্টের আসল বিষয় বস্তু গুগল নোল নিয়েই।

গুগল নোল কি ?
======================================
নোল হল একটা ফ্রি টুল যার আভিধানিক অর্থ হলো জ্ঞানের একক। গুগল যা করবে তা হলো লেখকদের বিভিন্ন টপিক নিয়ে লেখার জন্য অনুরোধ করবে। এই জন্য গুগল লেখকের নাম উল্লেখ(যা সাধারনত করা
হয়না) সহ তাদের জন্য সম্মানীর ব্যবস্থা করবে। লেখালেখি জনিত কোন কাজ গুগল করবে না তবে লেখা, সম্পাদনা ইত্যাদি করার জন্য সহজ টুল সরবরাহ করবে যার নাম নোল। নোলের তথ্য যে কোন বিষয়ের হতে পারে আর এটি সবাই ব্যবহার করতে পারবে ফ্রি। তথ্যও সবার জন্য হবে উন্মুক্ত।

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

উইকিপিডিয়া ও গুগলের নোলঃ
=====================================
উইকিপিডিয়া উইকিতে গুগলের এড দিতে রাজি হয়নি। এমনকি সম্প্রতি উইকিপিডিয়া তাদের উইকিয়া (এটা নন প্রফিট নয়) প্রকল্পের মাধ্যমে গুগলের মতো কার্যকরি সার্চ ইঞ্জিন প্রকাশ করতে যাচ্ছে এই মাসেই। অবশ্য এতে গুগলের তেমন কোন ক্ষতি হবে বলে মনে হয় না। তবে গুগল কখনই আগে তার কোন প্রজেক্ট মোটামুটি শেষ হবার আগে ঘোষণা দেয়নি যা এবার দিয়ে এবং এটা যে উইকিপিডিয়ার সাথে

একটা ঠান্ডা যুদ্ধ ঘোষণা তা হয়তো বলা যায়…হা হা হা।
দেখুন উইকিয়া সার্চ কেমন হতে পারে তা নিচের ছবি থেকে।
ছবি

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

দেখা যাক গুগলের নোল উইকিপিডিয়ার সাথে পাল্লাতে মেতে উঠছে নাকি ভিন্ন ধারার তথ্য ভান্ডার নিয়ে আছে যেখানে এক সাথে সার্ভিস প্রোভাইডার, তথ্য দানকারী, তথ্য অনুসন্ধানকারী সবাই উপকৃত হবে।

বহিঃসংযোগ
নোলের উদাহরণ
গুগলের অফিসিয়াল ব্লগ
উকিয়া সার্চ
গুগল আনঅফিসিয়াল ব্লগ

Probhat web based layout

Today I am releasing the web based  script  of  probhat(প্রভাত) keyboard। Probhat is a bengali unicode based keyboard layout designed by Ankur inspired from Rupali layout. This java script can be used in any blog,forum easily to write bangla in unicode without any external software. It’s under LGPL license and any one can use it following LGPL’s rules. I have released it on behalf of amaderprojukti forum(আমাদের প্রযুক্তি ফোরাম).To download the file please visit amaderprojukti forum .

To test the script see these two inks:link1,link2.

Thank,

manchumahara