Project report

 UGP 10


    Joomla
  
ก  
 
  ..  ก


*


ก!
" ! #
  $
"ก%  
b4704440@ku.ac.th, b4704429@ku.ac.th, fscismi@ku.ac.th*


 2.0 กก !" #$"%&''() *#+,-./#0')1ก# - 2%34"$3115
" 2,6#+ก#')1ก#7 8 (Content Management System) 4DE236" 2*DE2* Webmaster 87 H"6ก6  Joomla %K
Web 2.0 ")8DE2E31#)L!5 562H*#685")8DE2 2ก 7E 2'กL/52 57185(6 H+%#Hก#/#!
(Extensions) ก# 2#)%K'Pก H"60D2ก#+) ก#Hก3 template  2 Joomla 5)2%K3%315ก 7E 2'ก
)กQR+ก#P2 2 Joomla 1)2),-*)S'D2LL!1E'+*)S%#Hก#/#! *7E 11'Pก)1H+*!E%#+/!T!U*
ก#*)S%34"$ 562/-2/(1



 899,99:ก";!$,";<!=;!
1. Joomla 1.1 Content Management System
ก
 
ก

 CMS *ก Content Management System

ก
   ! ก"#$ #!

%$ )

,!  ก &%

  4
 
 ก&ก'(ก
 )*ก Joomla &

4( /ก CMS $'(&,

)

ก
 (+*,!ก  Content  *- (ก"/&ก ก41
Management System +* CMS),!),!ก,!  4
  /,!  CMS */&กก 


#!+!*ก Joomla $)

,!  &

**(.ก*, 

ก
- %*.( *
/&ก (Extensions)
,- &%" (News and Story) 

ก
ก.*ก &%ก ("*+$**
, G (Review), 

กก(Member)
)

& 
'(,! *ก
  / 

+
-"*(%(Search) 

กO% 
 0&% -#1#-  "*
  /%(Download), 

กR/S3G(Banner),
กก ,2. "*กก

 "* 

ก   - & %  *

1  -   
ก&%&ก"&&

(Template) "* Joomla   4

  (Analysis, Tracking and Statistics) 1+* 
1&ก"**ก* $'(,!,ก (&

ก- ก%-ก
/&ก ก
&ก" *)'(,!- ( +!*"*.3 HTML &% ก  O%*ก +* Word Processing ,!1(ก
CSS   *- #!1'( - (,!ก ก*& % #,! '(,! ,!,ก3
  * ก41&ก" $ *กก$ +$Z-*   * -ก41(ก
 ก&+$* (Content) "* Joomla +   %*$ [1,2]
+*"*ก (MediaWiki) ,!(&

ก
&+$**%ก%

 Project report

 UGP 10

1.2 Component &%

กGก 4
  &%,
Component )/&ก,! !- 1 '((ก& -"* Blog  +!*,! ^ก
ก,ก
/&ก%ก 1
" &
- ( *-ก)* "
,
,
 Component ก4-+**  "*ก"* & ) ก/%ก* * 
  '(1
*  ,!- 1 [3, ก1 ก"*(%"* 4    *'

ก
,   *    "#    ก      * ก !  ก+$* (Content Management System) #! *
- 1

ก- #!  Webmaster +*& ก* Joomla ) Web 2.0

ก G*%4ก,*ก (E-Commerce) #!,  #!,!
- *& %  #! "*/%ก
 4
 2,!1(กก Joomla CMS %!/\ +!*ก-   + &%/&ก
) 4
 *-*"-**%,,  (Extensions) **ก*
) ก & 1#
) *"/&ก %  &   ก$ ก&ก" template "* Joomla )ก
/% Component   $ก4&% ก  $ +!*ก%ก3Gก,"* Joomla )ก
Component "    ก!  ก
ก%!  &% &ก"&%
& /', 4
  #
/-Z"*(%%ก &%/--,*!"* 1&ก" "*
 /  ก&ก"
Hosting  +! *   1
  ,# ก " * ( %   ]% **[- ( +$Z,.3 HTML &%
Z"*(% ก  $"*-  
+$* +*ก CSS +*- (, Template *กก$(&

-+*- 1"* Component ,!

-$*, /-"*+$*,!*+* /%
  ,!   ก  $ Component ,! 
+    &%  
  * "    ก!  ก
ก%!  &%/-   -  *กก,,-!  $'( ^
Z" *( %% ก #! 1 Z"* (%  ก4 1#  - -,!  ^/&ก  +!*%"ก&%
 4
  % $ก  $- ,!%+*ก*  !,2. ก ^ 4 *(
\  *!,!1&% [3] 3. /01#,(*2&'() ")/
'( ^ *ก ^  

กก+$*
(Content Management System) - 
(G&%
2.  !"#$%!&'( !
 ) *+,*ก, +ก,! *ก,$ 1 +!*
Web 2.0 ),-//%,!"#$ +!** -  * -  ก&ก'( A"
<8!=ก
 ก *'( /%ก*,*4 -
 /ก :ก Template
^%  )- 4 ก' 4. ก, ก&,(
"*(% - 1ก"*(% ก)- FกGAก=ก8HIGJI8ก
**% #!'(1,!,ก" Blog &( !!ก9999A
: #KL = กM  =!=
  Wiki /  - 4%,"  Aก NL< = JI ! !ก99 "H O< :M  "P  FกO< J I
M$9FกM"JN NL<==HI:MJIM!!ก
&%"*(%  RSS  +!* Feed *,!* &%ก(
"P"H=O
ก$% #! 4
2.0  #!'()'( +$*

 Project report

 UGP 10

1. Color Management /6' +%K

ก#Hก3 background 6'+8.%K#-%8#7 6'+%K/ Use-case name Use-case description
"E#กP81 /6 2 font )'+/#07 ก 7 ก default User Pก#7 กH
layout layout 'กE%#Hก#31
316" 2ก#.%K font +3# 1638#6 / +3#
generate #-%H ก8
#-%H%K 5623# H+#3%0D2*ก"#2"62d #
user 317 ก
/#07 ก316 '+81 2L8"#2%K Hก3 default User Hก3 layout 15 '
638#6H+%K/ +3# %K" layout ก#%E5#-%H 2
2. CSS Management %Kก#Hก3 code layout
/6 23e$ .CSS 4DE2%K,'กก#Hก3  default layout User Pก# layout E
กE5ก)*ก font, /, #-%H"#2 %K" 7 ก3 H+%#Hก#'+
generate layout E%K
4.1 &4%56ก,789*%+#,&ก,! default  2%#Hก#P
กF I=Aก8=I!"O= (Use case 8 user 317 ก
diagram) :98=ก%#!=HIF I=!!ก"P 2 WXY=;! Open template User Pก#%h1 template E
WXY= host ก9WXY= client NL<=AกO<F IM=:"P ก#/#23 5-6H 15
Aก "Oก 8 ก 8=ก"O=ก"
< I
%#Hก#'+Pก# 6
!=99
3e$ template )H
generate ก%K#-%H
layout
H/12, layout ")%#Hก#Pก#
H/12, layout E user P
ก#7 ก H+H/12,ก#
%E5H%27E ก#
%E5#-%H layout, ก#
Hก3 layout, ก# layout
H+ก#%h13e$ template
7 ก /, font User 7 ก/8#7 #-%H
") )กQ#E" 2ก# 15'+
Pก#7 ก317E user 31
7 ก frame 8DE28
layout .6 7 ก frame 1
/(1 2 layout HP
HO< 1 กF =I 99
ก#%E5/*78)2

Hก3 /, font User %E5H%2/8#7
#-%H") )กQ# 15'+P
ก#%E5H%2317E user
7 ก frame 8DE28
layout
H/12H0 %#Hก#Pก# generate
L#7E 27 7 ก /, H0L#7E 27 8 user 31
font 7 ก/H+#-%H") )กQ#
15'+ generate 7E user
Pก#7 ก frame 8DE2
8 layout
Open style sheet ก#%h13e$ .css 'ก
U5 ก5)2%#Hก#
15 user /#07 ก3e$
316" 2ก#3e$ .css .7E
+3# 4DE2'+,ก)#+
Colour H+ #+
Multimedia EกE5ก)
Image ก#H/12, 523e$ .css 6.7E
Hก3 style sheet User Hก33e$ .css .6 Hก
code /"#2/6 2 body
7E ก#Hก3H'+/62, H1
8ก)ก#H/12,8 2
template 8ก#
%E5H%2"E user
Hก3

 Project report

 UGP 10
Hก33e$ .css 7E user ก#7 ก8#7
Hก3 /, ") )กQ#2
frame "62d 2 layout
%#Hก#'+Pก#52
3e$ .css 6"#2/61
#-%H") )กQ#%K
5623#H+/1 H+0
user ก#%h13e$ .css
D")%#Hก#'+P
ก# generate code 3e$
HPH/12,8
 2 layout
กP81.7E H+ User กP81.7E H+
"PH862 2 "PH862"62d 2 frame
frame 15'+กP81317E user
Pก#7 ก frame 8DE2
8 layout ก#กP81.7E
8ก) frame ,ก#
frame ก#กP81
)กQR+") )กQ#H+/%K
7 ก mode ก# User Pก#7 กก#
H/12 content H/12, content H"6+
/6 2 frame .6
" 2ก#8 frame /6
1628#7 footer
H/12,%KH
component, wrapper
,module "E content
 2 Joomla

 Project report

 UGP 10

H/12 content H"6 7E user ก#7 ก frame ก(,! 2 )ก&%

ก,"*
+"PH862 H+กP81.7E 8#7 กP81 /&ก/)ก, $ & &ก -+* ,ก
frame mode ก#H/12, O% layout ก- ] 1# O%
content %#Hก#'+Pก# Template
"!1"6 ก)#+ 2 CSS 
ก# ก.7E  2 frame H+ 5 ",<= *!< >=7896?  %,(
")#+ 2 Joomla  

_
 ก Windows XP
ก#  - 2 content E `&  Intel Pentium 4
user 7 ก8H/12,"#2 CPU 2.40 GHz, 512 RAM, Harddisk 80 GB
/6) 2 frame *O,&  Joomla
 .3,! ก ^/&ก$-+*
=O< 1 !
9กF I=99 PHP, Javascript &% HTML

4.2 ):%/ %
*%) *+#,&ก,!
6 ก, ,(
7E 2'ก%#Hก#310-กPก#H5ก ก%K
#+H+/6"62d H+ก#.2#+)" 2
P2%K) "  "ก+ก#P2 2%#Hก#
E31*)SD 
6.1 4'ก, ,(
AกO<:HI MLKO<:F FI ก
I= กIJ  ก 8= layout O<HIF I I!=กJI A
ก ก 8= 8=] ก^L!H8ก9  I!=ก NL<==
AกJIMJI!=9 I= I NL<=!=ก:
ก 8=$I != layout !::
"O J9=ก^
L!H8ก9กF I=!= user  8AK;!8 9;<
J8O_X $"8Fก =!::L!H8ก9
ก!!ก99!=HIF I=I

6.2 #A BCกก, ,(

ก#*)S#+ Template Editor %&s8H#กE,-*)S
%#+/L7 %&s81ก#tDกQUQE.ก#*)S
%#Hก# 7E 2'กก#*)S%#Hก#.UQ
Javascript 4DE2%KUQ Script HE '2"7  ,!1*1
HO< 2 M9กM=!=Aก (Debug Information) 361)กP8ก#*)SP31.

1)2),-*)S'D2L6 52.ก#tDกQUQ
Script
%&s8E/ 2L7 %&s81ก#2#+ก#
P2 2%#Hก# 7E 2'ก'(1%#+/2L$E,-*)S
3123L7 *)S#+ Boxbox Template Editor 
8Hก6,-.31.2265E/(1 'D2ก##7 2H,#+
ก#P2 2")%#Hก#85L#)2 *7E P8
%#Hก# ก.231265/E (1 8e&2ก$.)Eก#
P2E/-#R$E,-./#07 กกP81"กH"62
#-%H8"34"$31"" 2ก# 85L#)2E
*)S2H'  'Pก)12%#+ก# 2 Javascript E
36/#0P2#6ก)UQ PHP 31 .6 ก#/)E28

 Project report

 UGP 10
YUI ก/#0.231 H+ Yahoo 31PH+P
ก#.27 2"H+ T!5L1/6"62d 3 562
+ 51 P8,- E/'ก#P*)S"6 265"6 ก#
'
1)2)7E PL#7E 27 )2/ 2%#551-ก#
.2 2,-*)S'D27 ก YUI E 1 562ก#.
UQ Javascript *7E .651ก#%#+,2y&z2
Server *#+ก#P Template Editor " 2.ก#P2
E" 2"" ก),-.%K8)ก UQ Javascript 'D28+
E/(1/P8#)ก#P2%#+U
7 กE//Eก,,!#,(กF
Javascript )Dก3e$ 8#7 ก#PL6")H%#'กUQ A==OJI9!$:ก Mก=ก!=
Javascript .#6ก)UQ PHP H"6ก#+),-*)S31 9ก
: W`! $ก A=กA==
#6ก)L!182Hก3H+82 ก31/P#' ! $กM$9
__ O :Ma 2550
ก#7 กL#7E 27 E.ก#*)S#+ก%K
" ก, 9* E*
%&s8"6 ก#*)S.6ก) ,-*)S31tDกQL#7E 27 E
.ก#*)S85 562.6 Drupal 4DE2%K#+
[1] *4*4,&%,*,-*. cWhates CMSi
ก#5 Web Blog E,-.2/#0"กH"62 Web
Available at URL:
Blog  2" 231 /#07 ก)2ก#กP81#-%H
http://www.cmsthailand.com/modules/sections/
*78)26%K#-%U* 8#7 %K/ /EกP81/#036 index.php?op=viewarticle&artid=1
v1/31",E -." 2ก#  ก'ก,-.5)2/#0 [2]
3, ,*4, &*4
 - ก.
%E5 Header  2 Web Blog  231 Drupal 07 6%K Available at URL:
L#7E 27 E6/'")8DE2,E -*S
) /#0P.65 http://www.tnt.co.th/our_services_web_cms_th.
ก#*)S L#7E 27 ก.!18DE2E,-*S ) 31tDกQ php
L7 YUI(Yahoo! User Interface) 4DE2%K%#Hก#E 2 [3] 2,

 . 2. cExtensions ;!!Ji.
Yahoo 31*)S ก8,-E/'/#01$81 Available at URL:
P.2"6 8#7 *)S"6 5 131 YUI 2 Yahoo http://joomlaclub.wordpress.com/2007/10/30/e
31*)S155%KUQ Javascript )281  1 2 xtension-
ก#515UQ Javascript L7 1ก#%#+, 2 %E0%B8%84%E0%B8%B7%E0%B8%AD%E
2y&z2 Server 8ก#%#+, 5-62y&z2 Client H 0%B8%AD%E0%B8%B0%E0%B9%84%E0%
e&2ก$.)Eก#P2 2 YUI E2 Yahoo *)S ก B8%A3/
 5-685e&2ก$.)E87 ก. 4DE2%Ke&2ก$.)EH
/P#'#-%EP.231)*52L)1 กL1 2