জুমলা টেমপ্লেট ডিজাইন টিউটোরিয়াল
একটা জুমলা টেমপ্লেট কি?
জুমলা সিএমএস এর মধ্যে একটা টেমপ্লেট হচ্ছে কিছু ফাইলের ধারাবাহিকতা যেটা জুমলার কনটেন্টগুলি কিভাবে প্রদর্শিত হবে তা নিয়ন্ত্রন করে।এটা একটা ওয়েবসাইট নয় ।এটা হচ্ছে একটা ডিজাইন যেটা জুমলার ওয়েবসাইট দেখায়।একটা পূর্নাঙ্গ ওয়েবসাইট তৈরীর জন্য একটা টেমপ্লেট হাতের মত কাজ করে,অর্থ্যাৎ জুমলার ডেটাবেস থেকে এই হাত তথ্য তুলে আনে।আমরা টেমপ্লেটে কনটেন্টসহ ছবি দেখি এই ছবি কিন্তু টেমপ্লেটের অংশ নয় তবে যে শিরোনাম দেখি এটা টেমপ্লেটের অংশ।
ডিজাইন পদ্ধতি
আপনি যখন জুমলার তৈরী কোন ওয়েব সাইট দেখেন,সেটা কিন্তু স্টাটিক নয় বরং ডাইনামিক।কনটেন্ট গুলি ডাইনামিকলি ডেটাবেস থেকে আপনার কাছে আসছে।একটা ওয়েব পেজ দেখা খুব সহজ কিন্তু এই পেজটি দেখাতে এর পেছনে একটা টেমপ্লেটে অনেক পিএইচপি কমান্ড লিখতে হয়েছে।যাইহোক প্রথমে খুবই সাধারন একটা জুমলা টেমপ্লেট তৈরী করতে হয় তা দেখাচ্ছি এরপর এডভান্সড লেভেলে যাব।
সবার আগে জুমলার ‘templates’ ফোল্ডারে (আমার ক্ষেত্রে এই ফোল্ডার আছে এই লোকেশনে XAMPP/htdocs/webcoachbd/templates) নিজের ইচ্ছেমত নামের একটা ফোল্ডার তৈরী করুন ধরুন আমি এই ফোল্ডারের নাম দিলাম joomtemp .এই ফোল্ডারে ২ টি টেক্সক্ট ফাইল “index.php” এবং “templateDetails.xml” তৈরী করুন যেকোন এডিটর দিয়ে যেমন আমি নোডপ্যাড++ দিয়ে করেছি।এই ফোল্ডারে আরো দুটি জিনিস তৈরী করতে হবে তবে কোন ফাইল নয় দুটি ফোল্ডার একটা “images” আরেকটা “css” নামের।“css” ফোল্ডারে “style.css” নামে একটা ফাইল তৈরী করুন।ব্যাস আপাতত কাজ শেষ এবার কোড লেখার পালা শুরু।
ফাইল ফোল্ডারের নকশাটি এরকম
joomtemp/
তিন ধাপে টিউটোরিয়ালটি শেষ করব
১. খুব সাধারন মানের একটা টেমপ্লেট তৈরী
২.সিএসএস সহ আরেকটু উন্নতমানের টেমপ্লেট
৩.একটা পূর্নাঙ্গ টেমপ্লেট তৈরী
একটা বেসিক templateDetails.xml ফাইল তৈরী করা।এটা জরুরি, থাকতেই হবে।
এখানে টেমপ্লেট এর বিভিন্ন তথ্য থাকে যেমন টেমপ্লেট ডিজাইনারের নাম,তৈরীর তারিখ,ইমেইল ইত্যাদি।এখানে লিখিত কিছু তথ্য এডমিন ব্যাকইন্ডে দেখায়।এটা একটা XML ফরমেটের মেটাডেটা ফাইল,যেটা জুমলাকে বলে দেয় যে কি কি ফাইল প্রয়োজন হবে যখন একটা ওয়েব পেজ লোড হবে।যে ফাইল গুলি এই টেমপ্লেটে ব্যবহার হয়েছে।এডমিন ব্যাকইন্ডে টেমপ্লেটটি ইনস্টল হবার জন্যও এই ফাইলটি জরুরী।
এখানে দেখুন আমি কিছু তথ্য মার্কআপ ট্যাগের মধ্যে রেখেছি।যেমন <install> থেকে </install>
পর্যন্ত আপনি এটা পুরোটাই কপি পেস্ট করতে পারেন আপনার templateDetails.xml ফাইলে তবে ইচ্ছে করলে কিছু তথ্য বদলাতে পারেন যেমন <author> <email> ইত্যাদি।
<files></files> এর ভিতরে সব ফাইলগুলির নাম থাকতে হবে যে ফাইলগুলি আপনি ব্যবহার করবেন।এরপর <positions></positions> এটা সব টেমপ্লেটেই কমন,মডিউলগুলির পজিশন নির্দেশ করে।
একটা বেসিক index.php তৈরী করা
এই ফাইলটি হল টেমপ্লেটের জন্য ইন্জিনের মত।জুমলাতে যে পেজগুলি আমরা দেখি
এসব পেজের জন্য index.php ফাইলটি হল কোর পেজ।এই পেজটি নিয়ন্ত্রন করে কোন
কনটেন্ট দেখাবে আর কোনটি দেখাবেনা।যাইহোক কোডগুলি কপি করে পেস্ট করতে
পারেন, আর আমি এখন পুরো কোডকে কয়েক ভাগে ভাগ করে ব্যাখ্যা দিচ্ছি। এটা হল
সবচেয়ে উপরের অংশ
এই লাইন সবার উপরে থাকে যেকোন জুমলা টেমপ্লেট এর index.php ফাইল দেখলেই উপরে এই কোডটুকু দেখতে পারবেন।এই লাইনটি মতলববাজদের কাছ থেকে আপনার কোডকে লুকিয়ে রাখবে এতে করে তারা সাইট হ্যকিংএর অনেক রাস্তা হরিয়ে ফেলে।
দ্বিতীয় লাইনটি
ব্রাউজার এবং স্পাইডার/রোবট ইত্যাদিকে পেজের ধরন সম্পর্কে জানানোর জন্য
ব্যবহৃত হয়।বিশেষকরে সিএসএস কে ব্রাউজার কিভাবে প্রকাশ করবে তা বলে দেয়।
তৃতীয় লাইনটি
বলে দেয় যে সাইটটি কোন ভাষায় করা হয়েছে।এটা গ্লোবাল কনফিগারেশন থেকে সাইটের ল্যাংগুয়েজ তুলে নিয়ে আসে।
এর পরের লাইন হল হেডার বা শিরোনাম অংশ
প্রথম লাইনটিতে (<jdoc:include type="head" />) হেডার সম্পর্কিত সকল তথ্য থাকে।
এরপর link tag গুলিতে টেমপ্লেটের জন্য সিএসএস ফাইলগুলি রয়েছে।প্রথমদুটি general.css এবং system .css জুমলার নিজস্ব/জাতি স্টাইল সীট।আর পরেরটা পুরো টেমপ্লেটেটির জন্য।এখানে এটার নাম দিয়েছি style.css
জুমলা ১.৫ টেমপ্লেটের বডি
Jdoc statement টি একটা টেমপ্লেটে বিভিন্ন ধরনের XHTML আউটপুট দেয়।হোক কোন মডিউল এর XHTML
বা কোন কমপোনেন্ট এর XHTML .নিচের লাইনটি কমপোনেন্ট থেকে আউটপুট দেবে।
আর নিচের লাইনটি একটা মডিউল এর অবস্থান কোথায় হবে তা আউটপুট দেবে।
LOCATION এর জায়গায় right,left,top,user1,user2 যা ইচ্ছে দিতে পারেন।যদি top দেন তার মানে এই নয় যে মডিউলটা উপরেই থাকতে হবে।তবে সাধারনত এমন নাম দেয়া ভাল যাতে কোড দেখে পরে সহজেই বুঝতে পারেন যে মডিউলটা কোথায় আছে।আর OPTION এর জায়গায় “table”,”horz”,”xhtml”,”rounded”,”none” ইত্যাদি দিতে পারেন।সাধারনত xhtml দেয়া হয় এতে মডিউলটি একটা ডিভ এলিমেন্টের মধ্যে পরে যায়।অন্যান্যগুলি কেমন দেখাবে তা এই ফাইলে গিয়ে দেখলেই বুঝতে পারবেন templates/system/html/modules.php
জুমলার বডি তৈরী করা বেশ সহজ।শুধু কিছু জুমলার স্টেটমেন্ট ব্যবহার করা হয় মডিউল এর কনটেন্ট এবং মেইনবডি প্রদর্শনের জন্য।এবার Extension থেকে Template Manager এ গেলেই দেখতে পারবেন joomtemp নামের একটি টেমপ্লেট, এখন এটা ডিফল্ট হিসেবে সেভ করে দেখুন সাধারন একটা টেমপ্লেট তৈরী হয়ে গেছে।যদি joomtemp ফোল্ডারটি বাইরে কোন ড্রাইভে তৈরী করে থাকেন তাহলে এটাকে জিপ করে অন্যান্য জুমলা টেমপ্লেটের মত ইনস্টল করা যাবে।
জুমলা সিএমএস এর মধ্যে একটা টেমপ্লেট হচ্ছে কিছু ফাইলের ধারাবাহিকতা যেটা জুমলার কনটেন্টগুলি কিভাবে প্রদর্শিত হবে তা নিয়ন্ত্রন করে।এটা একটা ওয়েবসাইট নয় ।এটা হচ্ছে একটা ডিজাইন যেটা জুমলার ওয়েবসাইট দেখায়।একটা পূর্নাঙ্গ ওয়েবসাইট তৈরীর জন্য একটা টেমপ্লেট হাতের মত কাজ করে,অর্থ্যাৎ জুমলার ডেটাবেস থেকে এই হাত তথ্য তুলে আনে।আমরা টেমপ্লেটে কনটেন্টসহ ছবি দেখি এই ছবি কিন্তু টেমপ্লেটের অংশ নয় তবে যে শিরোনাম দেখি এটা টেমপ্লেটের অংশ।
ডিজাইন পদ্ধতি
আপনি যখন জুমলার তৈরী কোন ওয়েব সাইট দেখেন,সেটা কিন্তু স্টাটিক নয় বরং ডাইনামিক।কনটেন্ট গুলি ডাইনামিকলি ডেটাবেস থেকে আপনার কাছে আসছে।একটা ওয়েব পেজ দেখা খুব সহজ কিন্তু এই পেজটি দেখাতে এর পেছনে একটা টেমপ্লেটে অনেক পিএইচপি কমান্ড লিখতে হয়েছে।যাইহোক প্রথমে খুবই সাধারন একটা জুমলা টেমপ্লেট তৈরী করতে হয় তা দেখাচ্ছি এরপর এডভান্সড লেভেলে যাব।
সবার আগে জুমলার ‘templates’ ফোল্ডারে (আমার ক্ষেত্রে এই ফোল্ডার আছে এই লোকেশনে XAMPP/htdocs/webcoachbd/templates) নিজের ইচ্ছেমত নামের একটা ফোল্ডার তৈরী করুন ধরুন আমি এই ফোল্ডারের নাম দিলাম joomtemp .এই ফোল্ডারে ২ টি টেক্সক্ট ফাইল “index.php” এবং “templateDetails.xml” তৈরী করুন যেকোন এডিটর দিয়ে যেমন আমি নোডপ্যাড++ দিয়ে করেছি।এই ফোল্ডারে আরো দুটি জিনিস তৈরী করতে হবে তবে কোন ফাইল নয় দুটি ফোল্ডার একটা “images” আরেকটা “css” নামের।“css” ফোল্ডারে “style.css” নামে একটা ফাইল তৈরী করুন।ব্যাস আপাতত কাজ শেষ এবার কোড লেখার পালা শুরু।
ফাইল ফোল্ডারের নকশাটি এরকম
joomtemp/
- css/
- style.css
- images/
- index.php
- component.php
- templateDetails.xml
তিন ধাপে টিউটোরিয়ালটি শেষ করব
১. খুব সাধারন মানের একটা টেমপ্লেট তৈরী
২.সিএসএস সহ আরেকটু উন্নতমানের টেমপ্লেট
৩.একটা পূর্নাঙ্গ টেমপ্লেট তৈরী
১. খুব সাধারন একটা টেমপ্লেট তৈরী
index.php এবং templateDetails.xml এদুটি ফাইলে কিছু কোড থাকলেই একটা সাধারন টেমপ্লেট তৈরী করা যায়।একটা বেসিক templateDetails.xml ফাইল তৈরী করা।এটা জরুরি, থাকতেই হবে।
এখানে টেমপ্লেট এর বিভিন্ন তথ্য থাকে যেমন টেমপ্লেট ডিজাইনারের নাম,তৈরীর তারিখ,ইমেইল ইত্যাদি।এখানে লিখিত কিছু তথ্য এডমিন ব্যাকইন্ডে দেখায়।এটা একটা XML ফরমেটের মেটাডেটা ফাইল,যেটা জুমলাকে বলে দেয় যে কি কি ফাইল প্রয়োজন হবে যখন একটা ওয়েব পেজ লোড হবে।যে ফাইল গুলি এই টেমপ্লেটে ব্যবহার হয়েছে।এডমিন ব্যাকইন্ডে টেমপ্লেটটি ইনস্টল হবার জন্যও এই ফাইলটি জরুরী।
01.<?xml version="1.0" encoding="utf-8"?>02.<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">03.<install version="1.5" type="template">04.<name>joomtemp</name>05.<creationDate>2010-10-24</creationDate>06.<author>Rejoanul Alam</author>07.<authorEmail>refatju AT yahoo DOT com</authorEmail>08.<authorUrl>www.webcoachbd.com</authorUrl>09.<copyright>Rejoan 2010</copyright>10.<license>GNU/GPL</license>11.<version>1.5.22</version>12.<description>My New Template</description>13.<files>14.<filename>index.php</filename>15.<filename>component.php</filename>16.<filename>templateDetails.xml</filename>17.<filename>template_thumbnail.png</filename>18.<filename>images/background.png</filename>19.<filename>css/style.css</filename>20.</files>21.<positions>22.<position>breadcrumbs</position>23.<position>top</position>24.<position>left</position>25.<position>component</position>26.<position>right</position>27. 28. 29.</positions>30.</install>এখানে দেখুন আমি কিছু তথ্য মার্কআপ ট্যাগের মধ্যে রেখেছি।যেমন <install> থেকে </install>
পর্যন্ত আপনি এটা পুরোটাই কপি পেস্ট করতে পারেন আপনার templateDetails.xml ফাইলে তবে ইচ্ছে করলে কিছু তথ্য বদলাতে পারেন যেমন <author> <email> ইত্যাদি।
<files></files> এর ভিতরে সব ফাইলগুলির নাম থাকতে হবে যে ফাইলগুলি আপনি ব্যবহার করবেন।এরপর <positions></positions> এটা সব টেমপ্লেটেই কমন,মডিউলগুলির পজিশন নির্দেশ করে।
একটা বেসিক index.php তৈরী করা
01.<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>02.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"03."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">04.<html xmlns="http://www.w3.org/1999/xhtml"05.xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >06.<head>07.<jdoc:include type="head" />08.<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />09.<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />10.<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/style.css" type="text/css" />11.</head>12.<body>13.<jdoc:include type="module" name="breadcrumbs" />14.<jdoc:include type="modules" name="top" />15.<jdoc:include type="modules" name="left" />16.<jdoc:include type="component" />17.<jdoc:include type="modules" name="right" />18.</body>1.<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>2.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"3."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4.<html xmlns="http://www.w3.org/1999/xhtml"5.xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >6. 1.<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>এই লাইন সবার উপরে থাকে যেকোন জুমলা টেমপ্লেট এর index.php ফাইল দেখলেই উপরে এই কোডটুকু দেখতে পারবেন।এই লাইনটি মতলববাজদের কাছ থেকে আপনার কোডকে লুকিয়ে রাখবে এতে করে তারা সাইট হ্যকিংএর অনেক রাস্তা হরিয়ে ফেলে।
দ্বিতীয় লাইনটি
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"2."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">তৃতীয় লাইনটি
1.<html xmlns="http://www.w3.org/1999/xhtml"2.xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >বলে দেয় যে সাইটটি কোন ভাষায় করা হয়েছে।এটা গ্লোবাল কনফিগারেশন থেকে সাইটের ল্যাংগুয়েজ তুলে নিয়ে আসে।
এর পরের লাইন হল হেডার বা শিরোনাম অংশ
1.<head>2.<jdoc:include type="head" />3.<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />4.<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />5.<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/style.css" type="text/css" />6.</head>এরপর link tag গুলিতে টেমপ্লেটের জন্য সিএসএস ফাইলগুলি রয়েছে।প্রথমদুটি general.css এবং system .css জুমলার নিজস্ব/জাতি স্টাইল সীট।আর পরেরটা পুরো টেমপ্লেটেটির জন্য।এখানে এটার নাম দিয়েছি style.css
জুমলা ১.৫ টেমপ্লেটের বডি
1.<body>2.<jdoc:include type="module" name="breadcrumbs" />3.<jdoc:include type="modules" name="top" />4.<jdoc:include type="modules" name="left" />5.<jdoc:include type="component" />6.<jdoc:include type="modules" name="right" />7.</body>Jdoc statement টি একটা টেমপ্লেটে বিভিন্ন ধরনের XHTML আউটপুট দেয়।হোক কোন মডিউল এর XHTML
বা কোন কমপোনেন্ট এর XHTML .নিচের লাইনটি কমপোনেন্ট থেকে আউটপুট দেবে।
1.<jdoc:include type="component" />আর নিচের লাইনটি একটা মডিউল এর অবস্থান কোথায় হবে তা আউটপুট দেবে।
1.<jdoc:include type="modules" name="LOCATION" style="OPTION" />LOCATION এর জায়গায় right,left,top,user1,user2 যা ইচ্ছে দিতে পারেন।যদি top দেন তার মানে এই নয় যে মডিউলটা উপরেই থাকতে হবে।তবে সাধারনত এমন নাম দেয়া ভাল যাতে কোড দেখে পরে সহজেই বুঝতে পারেন যে মডিউলটা কোথায় আছে।আর OPTION এর জায়গায় “table”,”horz”,”xhtml”,”rounded”,”none” ইত্যাদি দিতে পারেন।সাধারনত xhtml দেয়া হয় এতে মডিউলটি একটা ডিভ এলিমেন্টের মধ্যে পরে যায়।অন্যান্যগুলি কেমন দেখাবে তা এই ফাইলে গিয়ে দেখলেই বুঝতে পারবেন templates/system/html/modules.php
জুমলার বডি তৈরী করা বেশ সহজ।শুধু কিছু জুমলার স্টেটমেন্ট ব্যবহার করা হয় মডিউল এর কনটেন্ট এবং মেইনবডি প্রদর্শনের জন্য।এবার Extension থেকে Template Manager এ গেলেই দেখতে পারবেন joomtemp নামের একটি টেমপ্লেট, এখন এটা ডিফল্ট হিসেবে সেভ করে দেখুন সাধারন একটা টেমপ্লেট তৈরী হয়ে গেছে।যদি joomtemp ফোল্ডারটি বাইরে কোন ড্রাইভে তৈরী করে থাকেন তাহলে এটাকে জিপ করে অন্যান্য জুমলা টেমপ্লেটের মত ইনস্টল করা যাবে।
0 মন্তব্য(গুলি):
Post a Comment