Joomla CMS
Joomla 1.5 Template တစ္ခု ပုံေဖာ္ၾကည့္ျခင္း
ကြၽန္ေတာ္ ဒီ Post မွာ Joomla 1.5 Template တစ္ခုကို ဘယ္လို create လုပ္မလဲ ဆိုတာကို ကြၽန္ေတာ္ သိထား သေလာက္ ေရးပါမယ္။ အရင္ဆုံးေတာ့ Joomla ကိုဘယ္လို Install လုပ္မယ္၊ Admin Panel ကေန Template ဘယ္လို ေျပာင္းမယ္ ဆိုတာေတြကိုေတာ့ သိထားဖို႔ လိုပါတယ္။ တကယ္လို႕ အဲဒါေတြကို သိခ်င္ရင္ေတာ့ ကြၽန္ေတာ့္ Joomla CMS Post အေဟာင္း ေတြထဲမွာ ရွိပါတယ္။ ကြၽန္ေတာ့္ Joomla 1.0 Post ေတြကို ဖတ္ျပီး စမ္းေနမွာ စိုးလို႕ ဖတ္တဲ့သူေတြ အဆင္ေျပ ေစဖို႔ Post Title ေတြမွာ Joomla 1.0 or Joomla 1.5 စသည္ျဖစ္ ထည့္ေပးထားပါတယ္။ ခုမွ Joomla ကိုစလုပ္မယ့္ သူေတြကို အၾကံျပဳခ်င္တာက ခုခ်ိန္မွာ Joomla က 1.6 ကိုေတာင္ သြားေနျပီ ျဖစ္လို႕ အနည္းဆုံး Joomla 1.5 ကိုစကိုင္ သင့္ပါတယ္။ Okay ဗ်ာ စလိုက္ၾက ရေအာင္။ ဘာမွ မလုပ္ခင္ Joomla 1.5 ကို install လုပ္ထားတယ္လို႕ ယူစလိုက္မယ္ဗ်ာ။
Joomla Default Template ကိုေလ့လာ ၾကည့္ျခင္း
အရင္ဆုံး Joomla 1.5 default template ကိုဖြင့္ၾကည့္မယ္ ဆိုရင္ Default Template ၃ခု ကိုေတြ႕ ရမယ္။
ေျပာမယ္ ဆိုရင္ေတာ့ Joomla root folder ေအာက္မွာ Template အတြက္ templates ဆိုတဲ့ folder ရွိေနျပီး Front-End မွာ သုံးမယ့္ template ေတြအားလုံး အဲဒီ Folder ေအာက္မွာ ရွိပါတယ္။
Template မ်ားကို Back-End မွ manage လုပ္ျခင္း
ခုန ကြၽန္ေတာ္ေျပာတဲ့ templates ေတြထဲက ဘယ္ template ကိုသုံးမယ္ ဆိုတာကို ေရြးခ်ယ္ေပးခ်င္ တယ္ဆိုရင္ေတာ့ Extension >> Template Manager ကေန လုပ္ေဆာင္ေပးႏိုင္ပါတယ္။
Template တစ္ခု တည္ေဆာက္ျခင္း
Article Manager ထဲကေန Article တစ္ခုကို စမ္းဖို႔ create လုပ္ျပီး Front End ကေနၾကည့္မယ္ဆိုရင္ ဒီလိုျမင္ ရပါမယ္။ ဒါကေတာ့ rhuk_milkyway ဆိုတဲ့ default template ကိုသုံးထာတာ ျဖစ္ပါတယ္။
အဲလိုမ်ိဳး template တစ္ခုကို လုပ္ခ်င္တယ္ ဆိုရင္ေတာ့ templates folder ထဲကိုသြားျပီး mytemplate_tut ဆိုျပီး folder အသစ္ တစ္ခု အရင္ေဆာက္ လိုက္ပါမယ္။ေနာက္တစ္ဆင္ အေနနဲ႔ ကေတာ့ mytemplate_tut folder ထဲမွာ index.php နဲ႔ templateDetails.xml files ႏွစ္ခု create လုပ္လိုက္ပါ။ Joomla Template တစ္ခု လုပ္ဖို႔ တကယ္ အခရာက်တာက အဲဒီ ၂ files ပဲျဖစ္ပါတယ္။
templateDetails.xml ကေတာ့ ကိုယ့္ template မွာသုံးမယ့္ module position, images, files ေတြအျပင္ template မွာ author, copyright, version စတာေတြကိုပါ ထည့္ေပးႏိုင္ တယ္ ဗ်ာ။ ေျပာမယ္ဆိုရင္ေတာ့ ကိုယ့္ template ရဲ႕ Setting File ပဲေပါ့။ Template ကို install လုပ္ရင္ အဲဒီ XML File ကေနစျပီး run တာျဖစ္ပါတယ္။ <?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>mytemplate_tut</name>
<creationDate>02/09/10</creationDate>
<author>Zack</author>
<authorEmail>joomzack@gmail.com</authorEmail>
<authorUrl>http://www.zack-notes.net</authorUrl>
<copyright></copyright>
<license>GNU/GPL</license>
<version>1.0.0</version>
<description>TPL_RHUK_MILKYWAY</description>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
</positions>
</install>
index.php ကေတာ့ ကိုယ္ template ထဲမွာပါမယ့္ Layout ေတြ၊ module position ေတြအျပင္ ဘယ္ modules အတြက္ ဘယ္ CSS ကိုေခၚမယ္ ဘယ္ image ကိုထည့္မယ္ စတာေတြ အတြက္ ထည့္ေပး ထားတာ ျဖစ္ပါတယ္။ index.php ကိုဖြင့္ျပီး code ေလးနဲနဲေရး လိုက္ပါမယ္။
<!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" />
</head>
<body>
<jdoc:include type="component" />
</body>
</html>
အဲဒီ Code ကိုၾကည့္မယ္ ဆိုရင္ <jdoc:include type="head" /> ကေတာ့ Browser မွာ Title ေတြေပၚဖို႔ အတြက္ပါ။ ေနာက္တစ္ခု ကေတာ့ <jdoc:include type="component" /> ပါ။ အဲဒါကေတာ့ content ေတြကို ျပခ်င္လို႕ include လုပ္တာ ျဖစ္ပါတယ္။ ဒါဆိုရင္ ကြၽန္ေတာ္တို႔ Back-End ကေန ခုလုပ္ထားတဲ့ template ေလးကို ေျပာင္းျပီး ျပန္ run ၾကည့္ရေအာင္။
ဒီလိုမ်ိဳး ျမင္ရတယ္ ဆိုရင္ေတာ့ mytemplate_tut ကိုေျပာင္းသြားျပီး ျဖစ္ပါတယ္။
Template တြင္ module position မ်ားကို ေနရာခ်ျခင္း
module position ေတြကို ေနရာ မခ်ခင္ ကိုယ့္ template မွာ module position ေတြကို templateDetails.xml ထဲမွာ သတ္မွတ္ထားခဲ့တာ မွတ္မိမယ္ ထင္ပါတယ္။အဲဒီ module positions ေတြကို ထည့္ခ်င္ရင္ေတာ့ ဒီ standard ကို လိုက္နာဖို႔ လို႕ပါတယ္။
<jdoc:include type="modules" name="position_name" />
ဒီေတာ့ဗ်ာ left နဲ႔ footer module positions ႏွစ္ခုကို ထည့္ေပးၾကည့္ရေအာင္။ index.php မွာ code ကို နဲနဲ ျပင္လိုက္ပါမယ္။ <!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" />
</head>
<body>
<jdoc:include type="component" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="modules" name="footer" />
</body>
</html>
ဒါဆို ခုနလုပ္ထားတဲ့ footer position ကို module တစ္ခုထားၾကည့္ဖို႔ Extensions >> Modules Manager ကေန footer module ကို module position မွာ footer ေပးျပီး enable လုပ္ေပး လိုက္ပါ။
Front-End ကေန footer module ကိုသြားျပန္ၾကည့္မယ္ ဆိုရင္ေတာ့
Module Position အတိုင္း Home menu က left မွာရွိေနေသာ္လည္း CSS ေတြမထည့္ ရေသးလို႕ အထဲဝင္ ေနတယ္လို႕ ထင္ႏိုင္ပါတယ္။
Template တြင္ CSS မ်ားေပါင္း ထည့္ၾကည့္ျခင္း
ဟုတ္ျပီဗ်ာ ဒီေတာ့ ထင္သာျမင္သာေအာင္ CSS ေတြလိုက္ထည့္ျပီး ျပင္ၾကည့္လိုက္ရေအာင္။ * { <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
padding: 0;
margin:0;
}
ul {
list-style:none;
}
.float_right{
float: right;
}
.float {
float: left;
}
.clear {
clear: both;
}
#container {
width:960px;
margin: auto;
}
#header {
background-color:#659EC7;
height: 150px;
}
#content {
width: 660px;
text-align: center;
}
#sidebar_left {
text-align: center;
background-color:#95B9C7;
width: 150px;
}
#sidebar_right {
background-color:#95B9C7;
width: 90px;
}
#footer {
background-color:#98AFC7;
text-align:center;
}
ဒီ code ေလးကို mytemplate_tut folder ေအာက္မွာ CSS လို႕ folder ေလးထပ္ေဆာက္ျပီး template.css အေနနဲ႔ သိမ္းထားလိုက္ပါ။
ဒါဆိုရင္ေတာ့ ဒီ CSS ေတြကို index.php ထဲကေန ျပန္ေခၚသုံးၾကည့္ဖို႔ code ကိုနဲနဲ modify လုပ္လိုက္ပါမယ္။
<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/mytemplate_tut/css/template.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"> Header </div>
<div id="sidebar_left" class="float"><jdoc:include type="modules" name="left" /></div>
<div id="content" class="float">
<jdoc:include type="component" />
</div>
<div id="sidebar_right"class="float">Right sidebar</div>
<div id="footer" class="clear"><jdoc:include type="modules" name="footer" /></div>
</div>
</body>
</html>
ဒီတစ္ခါ Front-End ကို refresh လုပ္လိုက္မယ္ ဆိုရင္ေတာ့ ဒီလိုေလးေျပာင္းလဲ သြားပါမယ္။
module position အသစ္မ်ားကို ထပ္ေပါင္းထည့္ျခင္း
module position အသစ္ေတြကို ေပါင္းထည့္ခ်င္ရင္ေရာ?? ရတာေပါ့ဗ်ာ :) ဆက္ၾကည့္လိုက္ရေအာင္ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> * { <positions>
user1,user2,user3 ဆိုတဲ့ module position ေနာက္ထပ္ သုံးခုကို ထည့္ေပးမယ္ ဆိုရင္ေတာ့ index.php မွာ ဒီလိုေလး ေျပာင္းသြားပါမယ္။
<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/mytemplate_tut/css/template.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"> Header and stuff</div>
<div id="sidebar_left" class="float"><jdoc:include type="modules" name="left" /></div>
<div id="content" class="float">
<jdoc:include type="component" />
</div>
<div id="sidebar_right"class="float">Right sidebar</div>
<div class="clear"></div>
<div id="user1" class="float"><jdoc:include type="modules" name="user1" /></div>
<div id="user2" class="float"><jdoc:include type="modules" name="user2" /></div>
<div id="user3" class="float"><jdoc:include type="modules" name="user3" /></div>
<div id="footer" class="clear"><jdoc:include type="modules" name="footer" /></div>
</div>
</body>
</html>
template.css မွာလည္း ဒီလိုေလး ျပင္လိုက္မယ္။
padding: 0;
margin:0;
}
ul {
list-style:none;
}
.float_right{
float: right;
}
.float {
float: left;
}
.clear {
clear: both;
}
#container {
width:960px;
margin: auto;
}
#header {
background-color:#659EC7;
height: 150px;
}
#content {
width: 660px;
text-align: center;
}
#sidebar_left {
text-align: center;
background-color:#95B9C7;
width: 150px;
}
#sidebar_right {
background-color:#95B9C7;
width: 90px;
}
#footer {
background-color:#98AFC7;
text-align:center;
}
#user1{
width: 320px;
background-color: #78c7c7;
}
#user2{
width: 320px;
background-color:#43BFC7;
}
#user3{
width: 320px;
background-color:#77BFC7;
}
templateDetails.xml ကိုလည္း module position အသစ္ user1, user2, user3 ကိုထပ္ျပီး ထည့္ေပးလိုက္မယ္။
<position>breadcrumb</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
</positions>
အားလုံးျပီးရင္ေတာ့ Back-End ကေနျပီး user1, user2, user3 position ေတြအတြက္ module အသစ္သုံးခုကို ထည့္ျပီး Front End ကေနျပန္ၾကည့္ မယ္ဆိုရင္ေတာ့ ဒီလိုေျပာင္း သြားတာ ကို ေတြ႔ရမယ္။
ခုေလာက္ဆိုရင္ေတာ့ Joomla 1.5 based template တစ္ခုကို ဘယ္လိုတည္ေဆာက္မယ္ ဆိုတာ idea ရေလာက္ျပီး လို႕ထင္ပါတယ္။ ကြၽန္ေတာ္ idea အၾကမ္းေလးေပၚမွာကိုယ္ပိုင္ စိတ္ကူး ဥာဏ္ရွိ သေလာက္ ကြန္႕ျမဴး ႏိုင္ၾကပါေစဗ်ာ။
Share me for Joomla 1.5
Joomla မွာ Facebook, Buzz, Twitter စတဲ့ Social Networks ေတြမွာ ကိုယ့္ Article ကို Share လုပ္ခ်င္ေတာ့ ဒီ
Plugin ေလးကေကာင္းတယ္ဗ်။
http://extensions.joomla.org/extensions/social-web/republish/11283
Zack-Notes iPhone/iPod version
Joomla Zawgyifont plugin လုပ္ရင္း Joomla ပိုးျပန္ဝင္သြားျပီး Site အတြက္ mobile version ကိုဆက္စမ္းျဖစ္သြားတယ္။ ခုေလာ
ေလာဆယ္ေတာ့ ipod/iphone ကေနၾကည့္ရင္ ေဇာ္ဂ်ီမရွိလည္း content ေတြကိုဖတ္ႏိုင္ေအာင္၊ ျပီးေတာ့ ဖတ္တဲ့ အခါမွာလည္း
အဆင္ေျပေျပ ဖတ္ႏိုင္ဖို႔ mobile template ကို auto switch လုပ္သြားေအာင္ လုပ္ထားပါတယ္။ တျခားေသာ Smart Phone ေတြက
ၾကည့္မယ္ဆိုရင္ေတာ့ ဘယ္လို ျဖစ္မယ္ဆိုတာ မသိပါ။ ဒီအတြက္ JoomTouch ဆိုတဲ့ Extension ကိုသုံးႏိုင္ျပီး၊ အဲဒီ extension က
iWebkit Framework ကို ယူသုံးထားလို႕ iWebkit ကိုအနည္းငယ္ နားလည္မယ္ ဆိုရင္ ကိုယ္ၾကိဳက္သလို ျပင္သုံးႏိုင္ပါတယ္။
JoomTouch ကိုသုံးမယ္ဆိုရင္ ဒီလို error ကိုေတြ႔ ရႏိုင္ပါတယ္။
Call-time pass-by-reference has been deprecated.
အဲဒီလိုေတြေတြ႔လာရင္ေတာ့ stackoverflow က ဒီ link မွာဖတ္ၾကည့္ျပီး ေျဖရွင္းႏိုင္ပါတယ္။ iPod/iPhone ေတြရဲ႕ safari browser
ကေန http://www.zack-notes.net ၾကည့္မယ္ဆိုရင္ ေအာက္ပါအတိုင္း ေတြ႔ရပါမယ္။
Joomla 1.5 Zawgyi Font Embed Plugin
World Cup Final ကိုၾကည့္ဖို႔ ေစာင့္ရင္း ဖတ္စရာအေႂကြးတင္ေနတာေတြကို ထိုင္ဖတ္လိုက္တာ ကိုေစတန္ (SaturnGod) ေရးထားတဲ့
Zawgyi Embed for WordPress ကိုဖတ္ျပီး code ကိုၾကည့္လိုက္ေတာ့ ဒီလို plugin မ်ိဳးကို Joomla မွာလည္း system plugin အေနနဲ႔
ေရးလို႕ရတယ္ ဆိုတာ သိလိုက္ရပါတယ္။ ဒါေၾကာင့္ Joomla 1.5 သုံးတဲ့ Site ေတြအားလုံးမွာ ဒီ plugin ကို install လုပ္ျပီး သုံးမယ္ဆိုရင္
Client Computer မွာ font မရွိလည္း ျမန္မာလို ျမင္ရမွာ ျဖစ္ပါတယ္။ Logic ကေတာ့ အတူတူပါပဲ Joomla Coding Style နဲ႔ ျပန္ေရးထား
တာျဖစ္ပါတယ္။ Android, iPhone , iPodTouch, iPad ေတြအတြက္ စမ္းမၾကည့္ရေသးပါဘူး။ ကြၽန္ေတာ္ iPhone ကလည္း jailbreak
လုပ္ျပီးသားမို႔ နဂိုထဲက ေဇာ္ဂ်ီျမင္ရျပီးသားပါ။ ဒါေၾကာင့္ Android, iPhone , iPodTouch, iPad ေတြကေနမျမင္ရရင္ feedback ေလးျပန္
ေပးပါ။ ကြၽန္ေတာ္ coding ျပန္ျပင္ျပီး version upgrade လုပ္ေပးပါမယ္။ အသုံးျပဳပုံကေတာ့ တျခား plugin ေတြအသုံးပုံအတိုင္းပါပဲ။
1) Extensions >> Install/Uninstall ကေန plg_zawgyifont.zip ကို install လုပ္ပါ။
2) ျပီးရင္ Extensions >> Plugin Manager ကိုသြားျပီး system ကို filter ကိုလုပ္လိုက္ရင္ Zawgyi Font Plugin ကိုေတြ႔ရပါမယ္။
Enable လုပ္ေပးလိုက္မယ္ဆိုရင္ ရပါျပီ။ first version က ipod/iphone ေပၚမွာ အလုပ္မလုပ္လို႕ coding နဲနဲေလး ေျပာင္းျပီ version
upgrade လုပ္လိုက္ပါတယ္။ ဒီ plugin ကို သုံးခ်င္သူမ်ား readme.txt ကိုအရင္ ဖတ္ျပီးမွ install လုပ္ပါ။ ခုဒီ version ကို ipod OS4
ေပၚမွာ စမ္းၾကည့္တာ အလုပ္လုပ္ပါတယ္။
Download Link : http://www.zack-notes.net/download/unzip_first.zip
ဒီေနရာမွာ Download လုပ္ျပီး သုံးၾကည့္ႏိုင္ပါတယ္ ခင္ဗ်ာ။ Mobile ေတြကေန အဆင္ေျပမေျပ ဆိုတဲ့ feedback ေတြကိုေတာ့
လိုခ်င္ပါတယ္။ လုပ္မယ့္သာ လုပ္လိုက္တာ ေဇာ္ဂ်ီရွိေနျပီးသာ စက္ေတြက အေတာ္မ်ားသာရယ္ 
ကြၽန္ေတာ္ Site ကို Zawgyi Font မရွိေသာ computer ကေန IE, Firefox တို႔နဲ႔ စမ္းၾကည့္ ထားပါတယ္။
Internet Explore
Firefox
Jailbreak မလုပ္ထားေသာ iPhone 3Gs Safari မွ ၾကည့္ေသာ အခါ ျမင္ရပုံ
Page 1 of 9
«StartPrev123456789NextEnd»Latest Post
Login Form
Categories Table View
- Reader's Conner (103)
- PHP (45)
- Joomla CMS (36)
- Codeigniter (10)
- jQuery (6)
- PHP & AJAX (4)
- Apache (3)
- For Mac (3)
- mySQL (2)
