জুমলা বাংলা টিউটোরিয়াল পর্ব ১২ঃ জুমলা টেম্পপ্লেট ডিজাইন

একটা জুমলা টেমপ্লেট কি?

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

ডিজাইন পদ্ধতি

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

সবার আগে জুমলার ‘templates’ ফোল্ডারে (আমার ক্ষেত্রে এই ফোল্ডার আছে এই লোকেশনে XAMPP/htdocs/careersourcebd/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 ফরমেটের মেটাডেটা ফাইল,যেটা জুমলাকে বলে দেয় যে কি কি ফাইল প্রয়োজন হবে যখন একটা ওয়েব পেজ লোড হবে।যে ফাইল গুলি এই টেমপ্লেটে ব্যবহার হয়েছে।এডমিন ব্যাকইন্ডে টেমপ্লেটটি ইনস্টল হবার জন্যও এই ফাইলটি জরুরী।

<?xml version=”1.0″ encoding=”utf-8″?>
<!DOCTYPE install PUBLIC “-//Joomla! 1.5//DTD template 1.0//EN” “http://www.joomla.org/xml/dtd/1.5/template-install.dtd”>
<install version=”1.5″ type=”template”>
<name>joomtemp</name>
<creationDate>2010-10-24</creationDate>
<author>Rejoanul Alam</author>
<authorEmail>refatju AT yahoo DOT com</authorEmail>
<authorUrl>www.careersourcebd.com</authorUrl>
<copyright>Rejoan 2010</copyright>
<license>GNU/GPL</license>
<version>1.5.22</version>
<description>My New Template</description>
<files>
<filename>index.php</filename>
<filename>component.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>images/background.png</filename>
<filename>css/style.css</filename>
</files>
<positions>
<position>breadcrumbs</position>
<position>top</position>
<position>left</position>
<position>component</position>
<position>right</position>
</positions>
</install>

এখানে দেখুন আমি কিছু তথ্য মার্কআপ ট্যাগের মধ্যে রেখেছি।যেমন <install> থেকে </install>

পর্যন্ত আপনি এটা পুরোটাই কপি পেস্ট করতে পারেন আপনার templateDetails.xml ফাইলে তবে ইচ্ছে করলে কিছু তথ্য বদলাতে পারেন যেমন <author> <email> ইত্যাদি।

<files></files> এর ভিতরে সব ফাইলগুলির নাম থাকতে হবে যে ফাইলগুলি আপনি ব্যবহার করবেন।এরপর <positions></positions> এটা সব টেমপ্লেটেই কমন,মডিউলগুলির পজিশন নির্দেশ করে।

একটা বেসিক index.php  তৈরী করা

<?php defined( ‘_JEXEC’ ) or die( ‘Restricted access’ );?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”
xml:lang=”<?php echo $this->language; ?>” lang=”<?php echo $this->language; ?>” >
<head>
<jdoc:include type=”head” />
<link rel=”stylesheet” href=”/<?php echo $this->baseurl ?>/templates/system/css/system.css” type=”text/css” />
<link rel=”stylesheet” href=”/<?php echo $this->baseurl ?>/templates/system/css/general.css” type=”text/css” />
<link rel=”stylesheet” href=”/<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/style.css” type=”text/css” />
</head>
<body>
<jdoc:include type=”module” name=”breadcrumbs” />
<jdoc:include type=”modules” name=”top” />
<jdoc:include type=”modules” name=”left” />
<jdoc:include type=”component” />
<jdoc:include type=”modules” name=”right” />
</body>

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

<?php defined( ‘_JEXEC’ ) or die( ‘Restricted access’ );?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”
xml:lang=”<?php echo $this->language; ?>” lang=”<?php echo $this->language; ?>” >
&nbsp;

 

<?php defined( ‘_JEXEC’ ) or die( ‘Restricted access’ );?>

এই লাইন সবার উপরে থাকে যেকোন জুমলা টেমপ্লেট এর index.php ফাইল দেখলেই উপরে এই কোডটুকু দেখতে পারবেন।এই লাইনটি মতলববাজদের কাছ থেকে আপনার কোডকে লুকিয়ে রাখবে এতে করে তারা সাইট হ্যকিংএর অনেক রাস্তা হরিয়ে ফেলে।

দ্বিতীয় লাইনটি

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

ব্রাউজার এবং স্পাইডার/রোবট ইত্যাদিকে পেজের ধরন সম্পর্কে জানানোর জন্য ব্যবহৃত হয়।বিশেষকরে সিএসএস কে ব্রাউজার কিভাবে প্রকাশ করবে তা বলে দেয়।

তৃতীয় লাইনটি

<html xmlns=”http://www.w3.org/1999/xhtml”
xml:lang=”<?php echo $this->language; ?>” lang=”<?php echo $this->language; ?>” >

বলে দেয় যে সাইটটি কোন ভাষায় করা হয়েছে।এটা গ্লোবাল কনফিগারেশন  থেকে সাইটের ল্যাংগুয়েজ তুলে নিয়ে আসে।

এর পরের লাইন হল হেডার বা শিরোনাম অংশ

<head>
<jdoc:include type=”head” />
<link rel=”stylesheet” href=”/<?php echo $this->baseurl ?>/templates/system/css/system.css” type=”text/css” />
<link rel=”stylesheet” href=”/<?php echo $this->baseurl ?>/templates/system/css/general.css” type=”text/css” />
<link rel=”stylesheet” href=”/<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/style.css” type=”text/css” />
</head>

প্রথম লাইনটিতে (<jdoc:include type=”head” />) হেডার সম্পর্কিত সকল তথ্য থাকে।

এরপর link tag  গুলিতে টেমপ্লেটের জন্য সিএসএস ফাইলগুলি রয়েছে।প্রথমদুটি general.css  এবং system .css  জুমলার  নিজস্ব/জাতি  স্টাইল সীট।আর পরেরটা পুরো টেমপ্লেটেটির জন্য।এখানে এটার নাম দিয়েছি style.css
জুমলা ১.৫ টেমপ্লেটের বডি

<body>
<jdoc:include type=”module” name=”breadcrumbs” />
<jdoc:include type=”modules” name=”top” />
<jdoc:include type=”modules” name=”left” />
<jdoc:include type=”component” />
<jdoc:include type=”modules” name=”right” />
</body>

Jdoc statement টি একটা টেমপ্লেটে বিভিন্ন ধরনের XHTML  আউটপুট দেয়।হোক কোন মডিউল এর XHTML

বা কোন কমপোনেন্ট এর XHTML  .নিচের লাইনটি  কমপোনেন্ট থেকে আউটপুট দেবে।

<jdoc:include type=”component” />

আর নিচের লাইনটি একটা মডিউল এর অবস্থান কোথায় হবে তা আউটপুট দেবে।

<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 ফোল্ডারটি বাইরে কোন ড্রাইভে তৈরী করে থাকেন তাহলে এটাকে জিপ করে অন্যান্য জুমলা টেমপ্লেটের মত ইনস্টল করা যাবে।

Leave a Reply