Thit K Template Cho Joomla 1.5Bin son: Mc ch bi vit: Phn tch cu trc template ca Joomla mi ngi c th tip cn v chnh sa n, cng nh t vit 1 template cho Joomla, gip bn hiu c nhng g cn thit cho 1 template Bi vit ny dnh cho: Nhng bn bit c bn v CMS Joomla, s dng thnh tho cc ngn ng thit k template (nh: CSS, HTML), c kin thc c bn v OOP PHP, v mun tm hiu nng cao thm v template Joomla. Gii thiu: Cho cc bn, sau 1 thi gian mit mi nghin cu, hm nay mnh s cho ra mt Tutorial v template ca Joomla. Nhm mc ch lu tr kin thc v chia s cho mi ngi. C l nhng bn bit n CMS Joomla th cng bit sc mnh ph bin v c nhiu ngi dng n n th no. Khi tin cy s dng 1 CMS cho vic xy dng 1 website, hn l cc bn hi lng v cc tnh nng n em li hay c nhiu ngi dng h tr..vv. V vn cn li ch l giao din ca website, qu tht Template lun l vn c quan tm th 2 khi s dng 1 CMS xy dng website, template lun l b mt th hin cho Website thu ht ngi dng. V c l ko ai l khng mun t mnh thit k ring 1 template (khng ng hng), nht l nu lm cho khch hng na, s dng cho CMS. Ngoi ra thnh tho thit k 1 template ca 1 CMS cn gip ta c ch trong rt nhiu vic, in hnh nht vit nam mnh thy l vic che giu bn quyn ca CMS coi n nh l 1 b source do mnh vit, haha (Nhng mnh khng khuyn khch mi ngi lm ci ny nh). Cu trc Template Joomla tht ra c rt nhiu vn phc tp m chng ta cn phi tm hiu. Th nn mnh s chia bi ra thnh cc phn v chng tin cho vic tham kho ca mi ngi.

I-L ThuytChng 1: Cu trc Template Chng 2: C php cu lnh Joomla

II-Thc HnhChng 3: Thit k 1 template Joomla vi cc tnh nng c bn. Chng 4: K thut nng cao trong thit k Template

I-L ThuytChng 1: Cu trc TemplateHu ht cc template c ci t trn 1 trang Joomla s c lu trong th mc \templates, th mc ny c t ti th mc root ca m ngun Joomla. Trong th mc \templates s cha cc th mc tng ng cho mi template c ci t trn h thng, tn ca th mc ny phi chnh xc ph hp vi tn ca template, v h thng template s c thit lp t ng nhn dng chng. V d, ni dung template rhuk_milkyway phi c cha trong cc th mc \rhuk_milkyway. Nu cc bn tng vc template ca Joomla chc hn cng thy template ca Joomla bao gm cc file: index.php, templateDetails.,xml, params.ini, template_thumbnail.png..v..v v cc th mc: css, images, html..v.v Ni chung c bao nhiu th cn do nhu cu ngi dng to ra. Trc mt, chng ta ch cn quan tm n cc thnh phn chnh to ra 1 template l:

index.php File ny l trung tm x l ca template, bao gm c vic hin th cc module v component. Ngoi ra, mi client-side JavaScript cng c khai bo ti y.. templateDetails.xml File ny bao gm cc th meta khai bo thng tin v template, c s dng bi giao din qun tr ca joomla nhm mc ch khai bo thng tin cho vic ci t v bo tr. Nhng thit lp c lu trong file bao gm mt danh sch ca mi file to ra template, tc gi v thng tin cng b, v cc thng s sn c cho ngi s dng sa i thng qua admincp. template_thumbnail.png nh thumbnail demo ca template, nh ny thng c rng l 140px v chiu cao l 90px, v c h thng joomla s dng lm nh demo cho template trong admincp. \css Ni lu tr cc file CSS c s dng bi template. Thng thng, file template.css t y. \images Ni lu tr hu ht cc file hnh nh c s dng bi template.

_Ngoi ra c th bao gm thm 2 th mc na l html v javascript, tuy nhin tm thi chng ta cha cn cp n chng.

B no ca template: File Index.phpFile index.php l file template ch o, v l tp tin cn thit nht cho vic s dng template bi CMS Joomla . File index.php l 1 tp tin bao gm c m HTML v PHP. _Cc on m HTML thng thng cung cp cc phn t vn bn(cc th div) c t chc lin kt cht ch cc stylesheets ring l (thuc tnh ca tng th div, thng c vit trong file css) cho vic nh dnh trnh by template ca website. _Cn li, cc on m PHP s m ng phn khai bo hin th ni dung nh cc module, component ca website. Mt v d n gin v file index.php s trng ging nh sau

PHP Code: Hello World!

Tuy nhin, on m HTML ny kh m tun th theo chun ca hip hi World Wide Web (W3C) c. N s thc thi v hin th Hello World! thng qua h thng Joomla. Ch l v d trn trn th rt l n gin, s khng c nhiu ni dung c hin th. T t ri chng ta s hc cch to ra 1 template phc tp hn, hin th bao gm c cc module v component. _Trc khi i vo lm 1 template hon chnh hn, ta nn nn tm hiu qua 1 cht v cu lnh thc thi load ni dung ca module v component t h thng ca Joomla. Joomla l 1 CMS hot ng trc tip vi cc ngn ng PHP v hin nhin ng dng Joomla cng s xy 1 th vin cc class PHP s dng nhm mc ch ti gin ri rm ca code v bo mt. V vy, tin cho vic thit k template chng ta cng nn tm hiu qua v c php php joomla s dng trong template. Chng ta cng qua chng 2.

Chng 2: C Php Cu Lnh JoomlaCu lnh jdocBng cch s dng mt s cc i tng do chnh mnh nh ngha nh JDocument v JDocumentHTML, Joomla c th load cc ni dung ca cc module v component t database m chng h phi s dng nhiu m lnh PHP lng ngong trong file template, chng ta thy vic ny em li rt nhiu thun li cho cc designer. Bn nhn thy phng thc include c s dng trong v d Hello World trn chng 1. N c thc hin vi 1 cu lnh jdoc ging nh sau: PHP Code:

Cu lnh ny c thc thi bi phng thc include trong i tng jdoc tr v tt c thng tin ca header cho trang Joomla hin ti. Bn cng c th s dng 1 include gi n yu cu cc tin nhn h thng hin th. on m hin th tin nhn h thng s trng nh th ny: PHP Code:

Cui cng l cch ph bin nht s dng include chn vo cc on m HTML cho 1 Joomla module. V d, a ra thng tin ca phn module top (thng l module c chc nng hin th cc banner), bn s dng 1 c php nh sau: PHP Code:

Trn y l 1 vi v d c bn. tm hiu thm v jdoc statement, bn c th vo a ch sau: http://docs.joomla.org/Jdoc_statements . Tin y mnh cng gii thiu lun a ch: http://docs.joomla.org cho ai cha bit lun, y l 1 th vin tra cu cc hm cng nh cu lnh ca Joomla, n h tr chng ta rt tt, nu bn mun nghin cu chuyn su Joomla th ng b qua n nh.

Bin $thisNgoi ra trong JDocumentHTML cn c rt nhiu thuc tnh v phng thc c nh ngha sn v bn c th tham chiu n n bng cu lnh $this->. Cu lnh $this c s dng tham chiu n cc thuc tnh v phng thc bn trong ca i tng JDocumentHTML. Khi s dng cc thuc tnh v phng thc ca i tng JDocumentHTML, n s gip ch cho bn trong vic coding ko phi di dng, v cc i tng ny u c Joomla nh ngha sn, ch vic gi ra v s dng. V d, hin th ngn ng c chn la cho template, thuc tnh language c th c trch xut nh th ny: PHP Code:

Sau y l cc thuc tnh khc ca i tng JDocumentHTML c th c truy xut thng qua s tham chiu ca bin $this ny:

direction c ng dn t tri qua phi (ltr), phi sang tri (rtl).v.v. template hin th tn th mc template. title hin th tiu ca website. description Cha cc miu t ti liu (t cc metadata HTML). link Cha cc ng dn (URL) ca ti liu. language bao gm cc thit lp ngn ng ca website.

V JDocumentHTML cng cung cp 1 s phng thc hu ch c th c gi ra thng qua vic s dng bin $this ny. V d, phng thc countModules() s gip bn kim tra s tn ti ca cc module ti v tr c phng thc countModules() tham chiu n. Cu trc ca n nh sau: PHP Code:$this->countModules('v tr c thit lp ca module');

V d, d kim tra s lng cc module tn 1 v tr ring l, bn c th thc thi 1 hm nh sau: PHP Code:$this->countModules('user1');

Bn c th s dng hm kim tra cc trng hp c nhiu hn 1 v tr nh th ny: PHP Code:$this->countModules('user1 + user2');

Thm ch bn c th s dng ton t Boolean logic khi thc thi phng thc, nh sau: PHP Code:$this->countModules('user1 and user2'); $this->countModules('user1 or user2');

V d di y l on m kim tra ti v tr top, c module no tn ti hay khng v nu khng s hin th tm nh placeholder.gif thay th:

PHP Code:

Thng thng, khi thit k template cho Joomla, chng ta s dng phng thc countModules() kim tra xem ti v tr c tn ti module no c gi ra khng, nu khng th chng ta s n v tr i (n cc th div). V d in hnh nht l 1 template c 3 ct, c nhng lc chng ta ch s dng 2 ct, v l d nhin chng ta s n 1 ct i template hin th ko b li, th v qu phi khng no :D. Chng ta s hiu r v n thng qua vic thit k template cho Joomla trong chng 3

II-Thc HnhChng 3: To 1 template Joomla vi cc tnh nng c bn.Thng qua chng ny, mnh ngh y s l 1 v d c bn in hnh nht cho cc bn nm r v template Joomla. Chng ta cng bt u nh :D. Mnh s chia qu trnh lm vic ra lm 3 bc. Bc 1: Thit k template mu. Bc 2: Rp template vo Joomla. Bc 3: Tinh chnh li cc stylesheet cho ph hp

Bc 1: Thit k template muu tin, trc ht, chng ta khoan hng ng n Joomla, cng vic u tin l thit k 1 template mu. Chng ta s to 1 template 3 ct To 1 th mc c tn l template_demo, trong th mc ny bn to cc fie:

index.html css/template.css images/

File index.html mnh vit nh sau: PHP Code:

LEFT COLUMN RIGHT COLUMN CONTENT &copy 2009 Copyright By TuanVA

Tip theo mnh nh ngha cho cc th div trong file css nh sau: M:/* Copyright (C) 2009 TuanVA */ *{ margin:0; padding:0; } body{ font-family: Tahoma, Arial, sans-serif; color: #484848; font-size:12px;

} #tva-container{ margin:0 auto; width:960px; } #tva-header{ background:#000000; height:100px; border:1px solid black; margin-bottom:1px; } #tva-header img{ float:left; }

#tva-content{ } #tva-left_nav{ float:left; width:150px; background:#e8f6bf; } #tva-right_nav{ background:#e8f6bf; float: right; width: 150px; } #tva-info{ } #tva-footer{ line-height:20px; color:#FFFFFF; background:#000000; text-align:center; clear:both; } a img { } border:medium none;

Trong th mc \images, mnh to ra cc tm hnh sau: bullet-list.gif, logo.png, pathwaybg.gif, seperator.gif. Cc bn c th download image trong file nh km cui bi tutorial. Xong xui, chng ta m ra xem th template demo. Ri qua bc 2.

Bc 2: Install template vo joomlaBy gi ta copy th mc template_demo vo th mc templates trong m ngun joomla, ng thi to thm 1 file c tn l: templateDetails.xml khai bo cc thng tin v template. Hy nh k l file ny nh hng trc tip n vic ci t template ca chng ta. _Sau i tn file index.html thnh index.php Tip tc chng ta m file templateDetails.xml ra v khai bo nh sau: PHP Code: Template Demo 06/08/09 TuanVA seaboyvt@yahoo.com http://www.chuaco.com

TuanVA GNU/GPL 1.0.0 Demo template for a three column display. index.php templateDetails.xml template_thumbnail.png params.ini images/bullet-list.gif images/logo.png images/pathway-bg.gif images/seperator.gif css/index.html css/template.css left right user4 breadcrumbs

Cc bn nh l mi khi to thm 1 file mi no, hay s dng 1 position no, bn li m file ny v khai bo thm vo nh. Khng khai bo cng ko nh hng g nhiu, nhng chng ta c nn lm ng th tc. Sau khi khai bo xong, chng ta vo admincp, phn Template Manager, chng ta s thy 1 template c tn l Template Demo, do chng ta va khai bo trong file templateDetails.xml. Hy th thit lp n l mc nh v ra trang joomla coi th, cc bn s thy template m khng h c ni dung g ca h thng Joomla c, bi gi chng ta s thm ni dung vo file index.php bng cch s dng cc cu lnh ca Joomla chng ta tm hiu trong chng 2. _Khi thm ni dung vo file index.php, cc bn nh gi c cc 2 file file css ca template h thng Joomla vo, chng c tn l general.css v system.css v nm trong \templates\system\css. Mnh vit li index.php nh sau: PHP Code: params->get('thng s name ca param') gi ra s thay i ca thuc tnh nm trong layout template (v d: cc id v class ca th div). y l mnh t nh ngha theo cch mnh hiu, hy vng l n khng qu kh hiu, h. L thuyt c th n c v hi kh mng tng, v vy ta i thng vo thc hnh cc bn hiu r ra vn . _By gi mnh s lm 1 thng s thay i cch hin th rng ca layout template. Trc tin chng ta cn m file templateDetails.xml ra tm n dng PHP Code:

sau thm vo trn dng on m sau: PHP Code: 800x600 1024x756 fluid (min/max with FF and IE7, 80% with IE6)

y, mnh khai bo thm th param, cu trc nh trn. Vi :

name l tn ca thng s param ta s s dng (n s l gi tr phng thc $this->params->get() tham chiu n) type l kiu chn la thng s (cc kiu ca n cng ging nh s dng cc type chn la trong th select ca form), label l tn ca param ny, n s c hin th trong admincp. default l phn chn la mc nh, n tham chiu n gi tr value ca th option bn di. decription l phn miu t tnh nng ca param ny, n cng c hin th trong admincp. option l danh sch chn la (cng ging nh s dng trong th select ca form).

Sau khi save li file templateDetails.xml. Ngay ti th mc gc ca template chng ta,

cc bn to thm 1 file l params.ini (file ny template lu tr cc gi tr param c ngi dng thit lp trong admincp, v cc bn nh m file templateDetails.xml khai bo thm tn file ny vo). Ta vo th admincp->Template Manager ri click vo template ca chng ta, cc bn s thy nh hnh di.

Nhng cha xong u, tip tc ta phi vo trang index.php thit lp phng thc this>params->get() tham chiu n n trong th . M file index.php ra, thay i th thnh: PHP Code: