คูมือ

โปรแกรมการจัดการ
Website สําเร็จรูป
Joomla

โดย

กลุมงานสารสนเทศสิ่งแวดลอม
สํานักงานสิ่งแวดลอมภาคที่ 10
 คํานํา

กลุมงานสารสนเทศสิ่งแวดลอม สํานักงานสิ่งแวดลอมภาคที่ 10 ไดจัดทําคูมือ โปรแกรม

การจัดการ Web site สําเร็จรูป Joomla เพื่อใชในการอบรมเจาหนาที่สํานักงานสิ่งแวดลอมภาคที่ 10
เพื่อที่จะสามารถจัดทํา หรือจัดการงานใน Web site ในสวนที่รับผิดชอบของแตละกลุมงานไดดวย
ตนเอง
Joomla เปนระบบบริหารจัดการ web site (content management system : CMS) ระบบ
บริหารจัดการเว็บไซต ซึ่งเปนระบบที่นํามาชวยในการสรางและบริหารเว็บไซตแบบสําเร็จรูป โดย
ในการใชงาน CMS นั้นผูใชงานแทบไมตองมีความรูในดานการเขียนโปรแกรม ก็สามารถสราง
เว็บไซตได โดยที่ตัว CMS เองมีโปรแกรมประยุกต แบบพรอมใชงานอยูภายในมากมาย อาทิ ระบบ
จัดการบทความและขาวสาร (News and Story), ระบบจัดการสมาชิก (Member), ระบบจัดการ
รูปภาพ (Media Manager), ระบบจัดการไฟลดาวนโหลด (Download), ระบบจัดการปายโฆษณา
(Banner) และตรวจสอบสถิติความนิยมในเว็บไซต (Tracking and Statistics) เปนตน ระบบการ
จัดการเวปไซต CMS ในลักษณะเดียวกันนี้มี โปรแกรม Mambo โปรแกรม Joomla และ mambo แต
กอนเปนทีมพัฒนาเดียวกัน ซึ่งการใชงานจะคลายกันมาก
ความสามารถของ Joomla นั้น จะชวยใหผูใชงานสามารถพัฒนาเวปไซตหรืออัพเดทขอมูล
ขาวสารของตนเองไดโดยไมตองใชเครื่องเดิม โดยสามารถจัดการเว็ปไซตไดทุกที่ที่สามารถให
Internet ไดเทานั้น

กลุมงานสารสนเทศสิ่งแวดลอม
สํานักงานสิ่งแวดลอมภาคที่ 10 ขอนแกน
 -1-

แนะนําโปรแกรม Joomla

"joomla" เปนระบบบริหารจัดการเว็บไซต (content management system: cms) ที่ชวยให

การพัฒนาเว็บไซตเปนเรื่องงายและรวดเร็ว สามารถติดตั้งใชงานและอัพเดทขอมูลไดทุกที่ทุกเวลา
ตามตองการ โปรแกรม joomla จะแบงเว็บไซตออกเปนสองสวนหลัก ๆ คือ
frontend คือสวนที่แสดงผลใหกับผูเขาชมเว็บไซต หรืออีกนัยหนึ่งก็คือเนื้อหาของ
เว็บไซตนั่นเอง
backend คือสวนการจัดการเนื้อหารวมถึงโครงสรางของเว็บไซต หรือเรียกอีกชื่อหนึ่งวา
สวน administrator

- สวนของ frontend-
 -2-

-สวนของ backend-

เราสามารถทําความเขาใจไดงาย ๆ ก็คือสวนของ frontend เปนสวนของเว็บไซตที่คนอื่นจะ

เขามาดู สําหรับสวน backend จะเปนสวนใหผูดูแลเว็บไซตเขาไปแกไขขอมูลตาง ๆ นั่นเอง
 -3-

WORKSHOP 1
การติดตั้ง Joomla [บน Windows]

วิธีติดตัง้ Joomla

การติดตั้ง Joomla ที่จําลองเครื่องเปนเซิรฟเวอรดวย Appserv จากการทดลองติดตั้งพบวา

Joomla มีความตองการทั่วๆไป ตามประสา การทํางานบน web base ดังนี้
1. Apache webserver
2. php Script Language
3. MySQL Database
แตถาใหสะดวกก็ติดตั้ง AppServ ที่ทําหนาที่จําลองเครื่องเปนเว็บเซิฟเวอร และมีชุด
โปรแกรมดังกลาวติดตั้งใหพรอมอยูแลวดวยไปเลยครับ

การติดตั้ง Joomla ผานเว็บเบราเซอร

ในที่นี้จะติดตั้งบน windows ใช AppServe จําลองเปนเซิฟเวอร ซึ่งจะมี PHP, MySQL,

PhpMyAdmin มาใหอยูแลว
1. ดาวนโหลด JoomlaInstallation เวอรชั่น 1.0.7
2. แตกไฟล ไวในไดเรกทอรีที่ของ web server ที่จะใช run
สรางไดเรกทอรี joomla ไวที่ c:/AppServ/www จะได c:/AppServ/www/joomla
แตกไฟลในไดเรกทอรีนี้

เปลี่ยนโหมดไดเรกทอรี joomla ใหสามารถ read,write,execute ได โดย

ƒ คลิ้กขวาที่โฟลเดอร joomla > properties

ƒ คลิ้กตรง Read Only ออก > apply > ok ดังภาพ
 -4-

3. เมื่อเปดดูภายในไดเรกทอรี /joomla จะพบหลายไฟลและหลายไดเรกทอรี ดังภาพ

4. เขาไปที่ "http://localhost/phpmyadmin" จากนัน้ กรอกยูสเซอรและพาสเวิรดที่ได

กําหนดไวตอนติดตั้ง AppServ จากนัน้ สรางฐานขอมูลเปลาๆ ชื่ออะไรก็ได ในที่นี้ใชชื่อ joomla_db
 -5-

5. แกไขไฟล configuration.php-dist ดังนี้

$mosConfig_offline = '0';
$mosConfig_host = 'localhost'; // This is normally set to localhost
$mosConfig_user = 'yourUser'; // MySQL username
$mosConfig_password = 'yourPassword'; // MySQL password
$mosConfig_db = 'joomla_db'; // MySQL database name
$mosConfig_dbprefix = 'jos_'; // Do not change unless you need to!

แกไขแลวเปลีย่ น เปนชื่อไฟล configuration.php

 -6-

6. เปด web Browser ขึ้นมาเรียกไปยัง ไดเรกทอรี joomla "http://localhost/joomla"

7. จะเห็นหนาแรก ของการติดตั้ง เปนการตรวจสอบความเรียบรอยของไฟลตางๆ เกี่ยวกับ
การติดตั้ง pre-install check

ƒ ทุกอยางควร set ตามคําแนะนํา โดยเฉพาะ ตรง configuration.php ควรเปน writeable

ƒ กด Next
 -7-

8. เขาสูหนาแสดง license

ƒ ถาตองการติดตั้ง หลังจากยอมรับขอตกลง กด Next

9. เขาสู ขั้นตอนที่ 1
step-1
 -8-

ƒ ใสคา Hostname ("สวนใหญใช localhost")

ƒ ใสคา MySQL? Username (ชื่อ user ที่ใชฐานขอมูล )
ƒ ใสคา MySQL? Password (พาสเวริ์ด ที่ใชฐานขอมูล)
ƒ ใสชื่อ MySQL? Database name (ชื่อฐานขอมูลที่ใช ในทีน่ ี้ใช "joomla_db")
ƒ ใส MySQL? table prefix (ใสหรือไมใสกไ็ ด เปนการตั้งคานําหนาชื่อตารางในฐานขอมูล)
ƒ กด Next

10. เขาสูขั้นตอนที่ 2
step-2

ƒ ใสชื่อเว็บไซต ที่ตองการ ในที่นี้เปน The Home of JoomlaInstallation

ƒ กด Next
 -9-

11. เขาสูขั้นตอนที่ 3
step-3

ƒ ยืนยันคาตางๆ ไดแก URL,Path,Admin email,password( จํา หรือแกไขไดตามตองการ)

ƒ กด Next

12. เขาสูขั้นตอนที่ 4
step-4

ขั้นตอนสุดทาย ของการติดตั้ง ถาติดตั้งสําเร็จ จะแสดงขอความวา "Congratulations! Joomla is

installed"
 - 10 -

ƒ แสดงชื่อ admin และ password สําหรับการแกไข รายละเอียดของ joomla ซึ่งจะกลาวใน

หัวขอถัดไป
ƒ ปุมดานบน ขวามือ คือ View Site และ Administration

ถาเกิดโปรแกรมฟอง ใหแกไข globals.php ก็ไปที่ ไฟล

C/AppServ/www/Joomla/globals.php/ แลวแกไฟลบรรทัด define( 'RG_EMULATION', 1 );
เปน define( 'RG_EMULATION', 0 ); แลวกด Save
สวน php.ini ไปที่ C/WINDOWS/php.ini แลวแกไฟลทบี่ รรทัด register_globals จาก
On เปน off (โดยใชโปรแกรม Editplus) แลวทําการ restart ; mysql ใหม

ถาเลือก View Site และ Administration ในขณะนีจ้ ะพบหนาจอ ดังนี้

แสดงวาเราตองไปลบ หรือเปลี่ยนขื่อไดเรกทอรี ใน joomla ที่ชื่อวา installation แลวทําการ

refresh ใหม
 - 11 -

13. เขาสู JoomlaInstallation ถาเลือก View Site และ Administration (หลังจาก ลบ หรือ
เปลี่ยนขื่อไดเรกทอรี installation )

ƒ View site : สําหรับแสดงหนา interface สําหรับ user ของ joomla

ƒ Administration : สําหรับหนา interface การปรับแตง แกไข joomla เปนสวนของผูด ูแล

ระบบ

14. สิ้นสุดการติดตั้ง joomla

 - 12 -

WORKSHOP 2
การติดตั้ง Joomla [บน Hosting]

การเตรียมการติดตั้ง

การเตรียมไฟลติดตั้งของ Joomla Open Source จะตองทําการดาวนโหลดไฟติดตั้ง

JoomlaInstallationไดจากเว็ปไซต
http://joomla.org
http://www.joomlasiam.com
http://mamboxchange.com เปนตน

การติดตั้ง Joomla บน Hosting

การติดตั้ง Joomla บน Hosting จะแตกตางจากการติดตั้งบนเครื่องคอมพิวเตอรทั่วไป ที่ทํา
การติดตั้ง Appserv หรือ WMServer โดยในขั้นแคกทานตองคัดลอก ไฟลติดตั้งขึ้นไปไวบน
Hosting โดยการใชโปรแกรม FTP เชน SSH Secure Shell Client, WS_FTP, CuteFTP เปนตน
การคัดลอก หรือการ Upload ไฟลติดตั้ง Joomla ขึ้นไปไวบน Hosting โดยใช (SSH Secure
Shell Client) กอนอื่นจะตองทราบ Username Password ของ Hosting เพื่อที่จะใชในการ Login และ
ตองทําการติดตั้ง SSH Secure Shell Client โดยสามารถดาวนโหลดไดที่ http://www.ssh.com เมื่อ
ไดโปรแกรมแลวจึงทําการติดตั้ง ดังนี้

เมื่อดาวนโหลดโปรแกรมไดแลว ทําการดับเบิ้ลคลิกโปรแกรม แลวโปรแกรมจะทําการ

ติดตั้งโดยขึ้นหนาจอ ดังรูป
 - 13 -

ทําการเลือกปุม Next แลวจะไดหนาจอ ดังรูป

เมื่ออานเงื่อนไขเสร็จแลว ใหคลิก Yes

ทําการ Next
 - 14 -

ทําการกด Next

ทําการกด Next

ทําการกด Next
 - 15 -

รอจนกวาทําการติดตั้งแลวเสร็จจะขึ้นหนาจอ ดังรูป

หนาจอเมื่อติดตั้งโปรแกรมเสร็จเรียบรอยแลว ใหกด Finish เพื่อเสร็จสิ้นการติดตั้ง

เมื่ อ ได ทํ า การติ ด ตั้ ง โปรแกรมเสร็ จ เรี ย บร อ ยขั้ น ตอนต อ ไปคื อ การ Upload File
JoomlaInstallation ขึ้นบน Hosting
ทําการเปดโปรแกรม SSH Secure Shell Client ขึ้นมา ดังรูป
 - 16 -

ทําการ Connect ไปยัง Hosting โดยกดปุม จะไดหนาถัดไป

หลังจากนัน้ ใหใสขอมูล
Host Name: (ตองทราบจากเจาของ Hosting)
User Name: (ตองทราบจากเจาของ Hosting)
เมื่อทําการกรอกขอมูลเสร็จเรียบรอยแลว คลิกปุม Connect จะไดหนาจอถัดไป ดังนี้

หนาจอสําหรับใส Password หลังจากใส Password เรียบรอยแลว คลิกที่ปุม OK เพื่อ

Connect เขาสู Hosting หลังจากที่ Connect เรียบรอยแลว จะไดหนาจอถัดไป
 - 17 -

ทําการคลิกที่ปุม OK อีกครั้ง

เมื่ อ เข า มายั ง ระบบเรี ย บร อ ยแล ว ให ทํ า การสร า ง Folder โดยใช คํ า สั่ ง
$ mkdir public_html สราง Folder public_html แลว ใชคําสั่ง $ ls เพื่อดูวา Folder public_html
ถูกสรางหรือยัง

หลังจากที่ Folder public_html ถูกสรางขึ้นเรียบรอยแลว ใหทําการเปลี่ยน Permission ของ

Folder public_html โดยใชคําสั่ง $ chmod 777 public_html

ขั้นตอนตอไป คือ การ Upload file ขึ้นไปยัง Hosting มีขั้นตอนดังนี้ ไปที่ Window -->
New File Transfer in Current Directory ดังรูป
 - 18 -

ทําการ Upload File โดยการคลิก JoomlaSiam_1[1].0.12-Stable-Full_Package.tar.gz เมาส

ปุมขวามือ ที่ไฟล Joomla แลวคลิกที่ Upload

เมื่อไฟล Joomla upload ขึ้นไปยัง Hosting เรียบรอยแลว ใหกลับมาที่ ssh ตัวเดิม แลวใช
คําสั่ง $ tar –xzvf ตามดวยชือ่ ไฟล เชน $ tar –xzvf JoomlaSiam_1[1].0.12-Stable-
Full_Package.tar.gz

รอสักครู แลวใชคําสั่ง ls เพื่อดูวา ดปรแกรมได Unzip เรียบรอยยัง

หลังจากนัน้ ใหเปด Browser แลวพิมพ URL ในชอง Address เชน

http://www.esanenvi.com จะปรากฏหนาจอแสดงการตรวจสอบขอมูลของ Joomla ขึ้นมาทําการ
เลือก Next ดังรูป
 - 19 -

ƒ ทุกอยางควร set ตามคําแนะนํา โดยเฉพาะ ตรง configuration.php ควรเปน writeable

ƒ กด Next
 - 20 -

เขาสูหนาแสดง license

ƒ ถาตองการติดตั้ง หลังจากยอมรับขอตกลง กด Next

เขาสู ขั้นตอนที่ 1
step-1
 - 21 -

ƒ ใสคา Hostname ("สวนใหญใช localhost")

ƒ ใสคา MySQL? Username (ชื่อ user ที่ใชฐานขอมูล / Username ที่เขา Hosting )
ƒ ใสคา MySQL? Password (พาสเวริ์ด ที่ใชฐานขอมูล / Password ที่เขา Hosting )
ƒ ใสชื่อ MySQL? Database name (ชื่อฐานขอมูลที่ใช ในทีน่ ี้ใช "joomla_db")
ƒ ใส MySQL? table prefix (ใสหรือไมใสกไ็ ด เปนการตั้งคานําหนาชื่อตารางในฐานขอมูล)
ƒ กด Next

เขาสูขั้นตอนที่ 2
step-2

ƒ ใสชื่อเว็บไซต ที่ตองการ ในที่นี้เปน The Home of JoomlaInstallation

ƒ กด Next
 - 22 -

เขาสูขั้นตอนที่ 3
step-3

ƒ ยืนยันคาตางๆ ไดแก URL,Path,Admin email,password( จํา หรือแกไขไดตามตองการ)

ƒ กด Next

เขาสูขั้นตอนที่ 4
step-4

ขั้นตอนสุดทาย ของการติดตั้ง ถาติดตั้งสําเร็จ จะแสดงขอความวา "Congratulations! Joomla is

installed"
 - 23 -

ƒ แสดงชื่อ admin และ password สําหรับการแกไข รายละเอียดของ joomla ซึ่งจะกลาวใน

หัวขอถัดไป
ƒ ปุมดานบน ขวามือ คือ View Site และ Administration

ถาเลือก View Site และ Administration ในขณะนีจ้ ะพบหนาจอ ดังนี้

แสดงวาเราตองไปลบ หรือเปลี่ยนขื่อไดเรกทอรี ใน joomla ที่ชื่อวา installation แลวทําการ

refresh ใหม
 - 24 -

เขาสู JoomlaInstallation ถาเลือก View Site และ Administration (หลังจาก ลบ หรือเปลี่ยน

ขื่อไดเรกทอรี installation )

ƒ View site : สําหรับแสดงหนา interface สําหรับ user ของ joomla

ƒ Administration : สําหรับหนา interface การปรับแตง แกไข joomla เปนสวนของผูด ูแล

ระบบ

14. สิ้นสุดการติดตั้ง joomla

- 25 -
 - 25 -

WORKSHOP 3
สวนประกอบตาง ๆ ภายใน Joomla Administrator

ในการเริ่มตนสรางเวปไซต จะตองเขาสูระบบการจัดการที่เรียกวา Joomla administration

การเขาสูสวนจัดการนี้สามารถทําไดโดย http://address เว็ปไซต/administrator/ ตัวอยางเชน
http://www.esanenvi.com/administrator
 - 26 -

หลังจาก Login เขามาในสวน administrator แลว จะพบสวนประกอบตางๆ 4 สวน ดังนี้

1. Menubar คือสวนที่แสดงชื่อคําสั่งทั้งหมดของโปรแกรม Joomla

2. Infobar คือ สวนที่แสดงขอมูลรายละเอียดตอไปนี้

- ชื่อของเว็บไซต
- ตําแหนงปจจุบัน (Current Location) ใน Admin Section ที่กําลังใชงานอยู
- จํานวนขอความที่ไดรับจาก Users อื่น ๆ
- จํานวนผูเขาใชงานโปรแกรม Joomla ในขณะนัน้
- ชื่อผูใชที่ Login เขามา เชน admin
 - 27 -

3. Toolbar คือ เมนูคําสั่งยอยจะปรากฏหลังจากคลิกเลือกคําสั่งบน Menubar แลว (อาจจะแสดง

จํานวนปุมไมเทากัน เมื่อคลิกเลือกคําสั่งบน menubar)

4. Workspace คือ พื้นที่แสดงการทํางานตาง ๆ ซึ่งอยูดานลาง Menubar, Infobar และ Toolba

ความหมายของปุมคําสั่งตาง ๆ

สราง Content Item, Category, Section

แกไข content item, category, section

เปดใหผูอื่นสามารถเห็นได

ซอนไมใหผูอนื่ สามารถเห็น

ยาย item ไปยัง Category อื่น หรือ ยาย category ไปยัง Section อื่น

คัดลอก content item, category, section

ลบ
บันทึกและกลับไปยังหนากอนหนา

บันทึกแตยังคงทํางานที่หนาเดิม

ยกเลิกการสรางหรือการแกไข

ยาย Content Item ไปเก็บในสวน Archive

แสดง popup preview การเปลี่ยนแปลงทีไ่ ดทําไวกับ item

ขนยายไฟลไปเก็บไวในสวน Media Manager

- 28 -
 - 28 -

WORKSHOP 4
โครงสรางการจัดเก็บเนื้อหา / ขาว (Content)

กอนที่จะเริ่มสรางเนื้อหาภายในเว็บไซตนนั้ ควรทําความเขาใจเรื่องความสัมพันธระหวาง
section หมวดหมูหลัก
category หมวดหมูยอย
content item เนื้อหา ขอมูลหรือบทความ
เราอาจเปรียบ Section เปน Folder ใหญ ซึ่งภายในจะเก็บ Folder ยอยในที่นี้ก็คือ Category
และภายใน Category จะเปนที่เก็บ Content Item หรือไฟลเอกสารและไฟลขอมูลตาง ๆ ดังรูป

ตัวอยางโครงสรางการจัดเก็บเนื้อหา (content)
 - 29 -

ตัวอยาง
Section Category Content Item
ขาว ขาวประชาสัมพันธ - รับสมัครพนักงานราชการ
- ประกาศผลสอบพนักงาน
ราชการ
ขาวกิจกรรม - สสภ.10 รวมโครงการปลูก
ตนไมเพื่อพอหลวง
ปฏิทินขาว - สสภ.10 จัดอบรมการจัดทํา
web site
โครงการที่นาสนใจ - โครงการจัดอบรม อปท.

1. การจัดการ Section
Section (หมวดหมูหลัก) ทําหนาที่จดั เก็บ Category (หมวดหมูย อย)
• การเขาสูสวนการจัดการ Section
• การสราง Section
• การลบ Section
• การแกไข Section
• การเปดและซอน section

การเขาสูสวนการจัดการ Section (Section Manager) สามารถทําได 2 วิธีดังนี้

วิธีที่ 1
1. คลิก Menubar แลวเลือกคําสั่ง Content => Section Manager
 - 30 -

วิธีที่ 2
1. คลิก menubar แลวเลือกคําสั่ง Home เพื่อไปที่หนาแรก (สวนของ Control Panel)
2. คลิกปุม Section Manager

เมื่อเขาสูสวนการจัดการ Section โดยวิธีที่ 1 หรือ 2 จะปรากฏสวนแสดงรายละเอียดภายใน Section

Manager ดังรูป

- สวนการจัดการ section (Section Manager) -

การสราง Section สามารถทําได ดังนี้

1. เขาสูสวนการจัดการ Section (section manager)

2. กดปุม จากนั้นจะเขาสูสวนการกําหนดคาตาง ๆ
 - 31 -

3. กําหนดชื่อของ Section ลงใน Title และ Section Name (ใชชื่อเดียวกันได) และกําหนดระดับของ

ผูที่สามารถเขามาดูในสวนของ Access Level ซึ่งประกอบดวย
- Public ทุกคนสามารถเปดดูได
- Registered เฉพาะผูที่ผานการ Log in เขาระบบสมาชิกจึงจะสามารถเปดดูได
- Special สําหรับผูที่อยูกลุมพิเศษ(กลุมที่แกไขขอมูลได)เทานั้นที่เปดดูได

4. เมื่อกําหนดเสร็จเรียบรอยใหกดปุม หรือ

การลบ Section สามารถทําไดดังนี้

1. เขาสูสวนการจัดการ section (section manager)
2. เช็คเครื่องหมาย √ ของ Section ที่ตองการลบ

3. กดปุม (การลบ Section นั้นภายในตองไมมี Category ใด ๆ อยู)

 - 32 -

การแกไข Section สามารถทําไดดังนี้

1. เขาสูสวนการจัดการ section (Section Manager)
2. เช็คเครื่องหมาย √ ที่กลองสี่เหลี่ยมหนาชื่อ Section ที่ตองการแกไข

3. กดปุม เพื่อเขาสูการแกไข Section

4. เมื่อแกไขเสร็จเรียบรอยใหกดปุม หรือ

การเปดและซอน Section สามารถทําไดดงั นี้

1.เขาสูสวนการจัดการ section (section manager)
2.หากตองการเปด Content ใด ๆ ที่อยูภายใน Section นั้น ใหปรากฏบนเว็บไซต สามารถทําไดโดย
คลิกรูปสัญลักษณ ในคอลัมนของ published และหากไมตองการใหปรากฏบนเว็บไซตใหคลิก
เปลี่ยนเปนรูปสัญลักษณ

2. การจัดการ Category
Category (หมวดหมูย อย) ทําหนาที่จดั เก็บ Content Items (เนื้อหา ขอมูลหรือบทความ)
• การเขาสูสวนการจัดการ Category
• การสราง Category
• การลบ Category
• การแกไข Category
• การเปดและซอน Category
 - 33 -

การเขาสูสวนการจัดการ Category (Category Manager) สามารถทําได 2 วิธีดังนี้

วิธีที่ 1
1. คลิก Menubar แลวเลือกคําสั่ง Content => Category Manager

วิธีที่ 2
1. คลิก menubar แลวเลือกคําสั่ง Home เพื่อไปที่หนาแรก (สวนของ Control Panel)
2. คลิกปุม Category Manager

เมื่อเขาสูสวนการจัดการ Category โดยวิธีที่ 1 หรือ 2 จะปรากฏสวนแสดงรายละเอียด

ภายใน Category Manager ดังรูป
 - 34 -

- สวนการจัดการ Category (Category Manager) -

การสราง Category สามารถทําไดดังนี้

1. เขาสูสวนการจัดการ Category (Category manager)

2. กดปุม จากนั้นจะเขาสูสวนการกําหนดคาตาง ๆ
 - 35 -

3. กําหนดชื่อของ Category ลงใน Category Title และ Category Name (ใชชื่อเดียวกันได)

4. กําหนด Section ที่จัดเก็บ Category นี้
5. กําหนดระดับของผูที่สามารถเขามาดูในสวนของ Access Level ซึ่งประกอบดวย
- Public ทุกคนสามารถเปดดูได
- Registered เฉพาะผูที่ผานการ Log in เขาระบบสมาชิกจึงจะสามารถเปดดูได
- Special สําหรับผูที่อยูกลุมพิเศษ(กลุมที่แกไขขอมูลได)เทานั้นที่เปดดูได

4. เมื่อกําหนดเสร็จเรียบรอยใหกดปุม หรือ

การลบ Category สามารถทําไดดังนี้

1. เขาสูสวนการจัดการ Category (Category manager)
2. เช็คเครื่องหมาย √ ของ Category ที่ตองการลบ

3. กดปุม (การลบ Category นั้นภายในตองไมมี Category ใด ๆ อยู)

การแกไข Category สามารถทําไดดังนี้

1. เขาสูสวนการจัดการ Category (Category Manager)
2. เช็คเครื่องหมาย √ ที่กลองสี่เหลี่ยมหนาชื่อ Category ที่ตองการแกไข

3. กดปุม เพื่อเขาสูการแกไข Category

4. เมื่อแกไขเสร็จเรียบรอยใหกดปุม หรือ

การเปดและซอน Category สามารถทําไดดังนี้

1.เขาสูสวนการจัดการ Category (Category manager)
2.หากตองการเปด Content ใด ๆ ที่อยูภายใน Category นัน้ ใหปรากฏบนเว็บไซต สามารถทําได
โดยคลิกรูปสัญลักษณ ในคอลัมนของ published และหากไมตองการใหปรากฏบนเว็บไซตให
คลิกเปลี่ยนเปนรูปสัญลักษณ
 - 36 -

3. การจัดการ Content Item

Content Items (เนื้อหา ขอมูลหรือบทความ)
• การเขาสูสวนการจัดการ Content Item
• การสราง Content Item
• การลบ Content Item
• การแกไข Content Item
• การนํา content item แสดงบนหนาแรกของเว็บไซต
• การเปดและซอน Content Item

การเขาสูสวนการจัดการ Content Item (Content Items Manager) สามารถทําได 2 วิธีดังนี้

วิธีที่ 1
1. คลิก Menubar แลวเลือกคําสั่ง Content => All Content Items

วิธีที่ 2
1. คลิก menubar แลวเลือกคําสั่ง Home เพื่อไปที่หนาแรก (สวนของ Control Panel)
2. คลิกปุม Content Items Manager

เมื่อเขาสูสวนการจัดการ Content Item โดยวิธีที่ 1 หรือ 2 จะปรากฏสวนแสดงรายละเอียด

ภายใน Content Items Manager ดังรูป
 - 37 -

- สวนการจัดการ Content Item (Content Items Manager) -

การสราง Content Item สามารถทําไดดังนี้
1. เขาสูสวนการจัดการ Content Item (Content Items manager)

2. กดปุม จากนั้นจะเขาสูสวนการกําหนดคาตาง ๆ

3. กําหนดชื่อของ Content Item ลงใน Title และ Title Alias (ใชชื่อเดียวกันได)

4. กําหนด section และ Category ที่จัดเก็บ Content Item นี้
 - 38 -

5. พิมพและใสขอมูลลงในกรอบ Intro Text และ Main Text

6. ระหวางพิมพและใสขอมูลสามารถกดปุม เพื่อเปด pop up แสดง Content Item

7. เสร็จเรียบรอยใหกดปุม หรือ

การลบ Content Item สามารถทําไดดังนี้

1. เขาสูสวนการจัดการ Content Item (Content Items manager)
2. เช็คเครื่องหมาย √ ของ Content Item ที่ตองการลบ

3. กดปุม (การลบ Content Item นั้นภายในตองไมมี Content Item ใด ๆ อยู)

การแกไข Content Item สามารถทําไดดังนี้

1. เขาสูสวนการจัดการ Content Item (Content Items manager)
2. เช็คเครื่องหมาย √ ที่กลองสี่เหลี่ยมหนาชื่อ Content Item ที่ตองการแกไข

3. กดปุม เพื่อเขาสูการแกไข Content Item

4. ระหวางแกไขสามารถกดปุม เพื่อเปด pop up แสดง content item

5. เมื่อแกไขเสร็จเรียบรอยใหกดปุม หรือ

การนํา Content Item แสดงบนหนาแรกของเว็บไซต สามารถทําไดดังนี้

1. เขาสูสวนการจัดการ content item (content items manager)
2. คลิกในคอลัมนของ Front Page ใหแสดงเครื่องหมาย ของ content item ที่ตองการแสดงบน
หนาแรก หากไมตองใหคลิกอีกครั้งใหแสดงเครื่องหมาย

การเปดและซอน Content Item สามารถทําไดดังนี้

1.เขาสูสวนการจัดการ Content Item (Content Items manager)
2.หากตองการเปด Content ใด ๆ ที่อยูภายใน Content Item นั้น ใหปรากฏบนเว็บไซต สามารถทํา
ไดโดยคลิกรูปสัญลักษณ ในคอลัมนของ published และหากไมตองการใหปรากฏบนเว็บไซต
ใหคลิกเปลี่ยนเปนรูปสัญลักษณ
 - 39 -

WORKSHOP 5
การจัดการผูใช

การจัดการผูใชตองทราบวาผูใชงานใน Joomla มีกี่ระดับ แตละระดับมีหนาที่และแตกตาง

กันอยางไร โดยผูใชงานจะแบงเปน2 กลุมใหญ ดังนี้
1. Front End User
1.1 Registered คือ ผูที่ลงทะเบียน ที่สามารถมองเห็นเนื้อหาบางสวนที่มากกวาปกติ
1.2 Author คือ สามารถสงประกาศขาว และแกไขขาวที่ตัวเองไดสงเขามาได
1.3 Editor คือ สามารถสงประกาศขาว และแกไขขาวของตัวเองและคนอื่นได
1.4 Publisher คือ เปนคนที่สามารถอนุญาตใหขาว สามารถแสดงขาวตอสาธารณขน
ได
2. Back End User
2.1 Manager สามารถจัดการเกีย่ วกับผูใช Module และ Component บางตัวได
2.2 Administrator ทําไดทุกอยาง ยกเวนเปลีย่ นคาที่สําคัญบางอยาง และเปลีย่ น
รูปแบบไมได
2.3 Super Administrator ทําไดทกุ อยาง และไมสามารถลบออกได

ก็จะปรากฏหนานี้
 - 40 -

ถาตองการเพิ่มขอมูลผูใชใหม ใหคลิกที่ New ตรง Tool ber ดังรูป

ก็จะปรากฏหนาตอไป

หลังจากที่กรอกรายละเอียดของผูใชเรียบรอยแลว ก็มาถึงขั้นตอนการกําหนดระดับของผูใชงานวา
เราตองการใหผูใชงานอยูในระดับไหน สามารถกําหนดไดใน Group ดังรูป

เมื่อทําการกําหนดระดับการใชงานเรียบรอยแลว ขั้นตอนสุดทายตองการที่จะ Block ไมใหใชงาน

หรือไม ถาตองการก็ใหกด Yes แตถาไมตอ งการให Block ก็กด No
 - 41 -

การแกไขขอมูลของ User
คลิกเครื่องหมายถูกที่ Name ที่ตองการแกไข แลวคลิกที่ Edit

Tool bar

ทําการแกไขขอมูล แลวกด Seve

การลบ User ที่ไมตองการ

คลิกเครื่องหมายถูกที่ Name ที่ตองการลบ แลวกด Delete ตรง Tool bar ก็เสร็จการลบ User
 - 42 -

WORKSHOP 6
การติดตั้ง WYSIWYG Editor

ในบทเรียนนี้ จะนําเสนอ WYSIWYG Editor 2 อยาง คือ TinyMCE และ HTML Area3 XTD

1. TinyMCE
การใชงาน TinyMCE สําหรับใสและแกไขขอมูล Content Item การใสและแกไขขอมูลลง
ใน Content จะมีลักษณะคลาย ๆ กับโปรแกรมออกแบบเว็บไซตทั่วไป เชน Macromedia
Dreaweaver โดยจะมีกรอบที่สามารถใสขอมูลสองสวนคือ
สวนแรก Intro Text เปนสวนที่ Content Item จําเปนตองมี อาจจะใสขอมูลทั้งหมดหรือ
ขอความบางสวนที่เกริ่นถึงเนื้อหาใน Content Item ทั้งหมด
สวนที่สอง Main Text เปนสวนที่แสดงเนื้อหาที่เหลือตอจาก Intro Text ทั้งหมด
 - 43 -

ความหมายของปุมคําสั่งบน Toolbar

ตัวหนา, ตัวเอียง, ขีดเสนใต, ตัวขีดทับ

จัดขอความ ชิดซาย, ชิดขวา, กึ่งกลาง, เต็มบรรทัด
ชนิดตัวอักษร
ขนาดตัวอักษร
ตัดขอความ, คัดลอกขอความ, วางขอความแบบ Plain Text, วางขอความแบบ
Word, เลือกทั้งหมด
สรางรายการแบบสัญลักษณ, สรางรายการแบบลําดับ
ยกเลิก, ทําซ้ํา
ใส Link, นํา Link ออก, ใส Link ภายในหนาเดียวกัน
ใสรูปภาพ
เปด pop up เพือ่ แกไขขอมูลในรูปแบบ HTML
คนหาหรือแทนที่
วันที,่ เวลา
รูปอมยิ้ม
สีตัวอักษร, สีพื้นหลังตัวอักษร
ลบรูปแบบที่ถูกกําหนด
ตัวหอย, ตัวยก
ตัวอักษรพิเศษ
เสนคั่น
ใส Flash, ใสไฟล Multimedia (Flash, Quicktime, Shockwave, Windows
Media, Real Media)
ใสตาราง
 - 44 -

การจัดการตาราง (Table)
การแทรกตาราง
1. ใหกดปุม ที่ Toolbar ของ TinyMCE Editor

2. กําหนดคาตาง ๆ ดังนี้
Columns จํานวนของแถวในแนวตั้ง
Rows จํานวนของแถวในแนวนอน
Cellpadding ระยะหางระหวางชอง Cell กับตัวอักษรภายในชอง
Cell Cellspacing ระยะหางระหวางชอง Cell
Alignment กําหนดใหตารางชิดซาย ขวาหรือกึ่งกลาง
Width, Height กําหนดความกวางและความสูงหนวยเปน pixels
(สามารถเปลี่ยนหนวยเปน % ได โดย เติม % ตอทายคาที่กําหนด) จากนั้น
ใหกดปุม เพื่อแทรกตาราง
3. กดปุม เพื่อแทรกตาราง

การแทรกและลบ Row หรือ Column

1. คลิกชอง Cell
2. เลือกกดปุมคําสั่งบน Toolbar ดังนี้

แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา

แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลัง
ลบ Row ลบ Column
 - 45 -

การรวม ชอง Cell

1. คลิกชอง Cell จากนัน้ กดปุม จะปรากฏสวนกําหนดคาตาง ๆ ดังรูป

2. กําหนดคาการรวมชอง Cell ในสวน Merge table cells

การรวมชอง Cell จะรวมโดยยึดตําแหนงจากชอง Cell ที่เลือกไวไปดานซายในกรณี
Column และดานลางในกรณี Row)
3. กดปุม Update (การรวมจะเริ่มรวมจากทางขวาและดานลาง ของชอง Cell ที่คลิกเลือกไว)

การแยก ชอง Cell

1. คลิกชอง cell ที่ไดถูกรวมไว จากนั้นกดปุม
 - 46 -

การจัดการรูปภาพและ MOSImage
สามารถเลือกใช Tools ในการจัดการรูปภาพไดแก
• ปุม Images บน Toolbar
• MOSImage

ปุม images บน toolbar

การแทรกรูปภาพ
1. กดปุม ที่ TinyMCE Editor จะปรากฏสวนกําหนดคาตาง ๆ ดังรูป

2. ระบุ Image URL เชน http://esanenvi.com/~nitit.j/images/stories/clock.jpg

3. กําหนด Image description (คําอธิบายรูปภาพ)
4. แลวกดปุม

การปรับขนาดของรูปภาพ มี 2 วิธี
วิธีแรก
1. คลิกที่รูปภาพจะปรากฏจุดสี่เหลี่ยมเล็ก ๆ ตามขอบรูปภาพ

2. ใชเมาสคลิกคางไวแลวลากออกหรือเขา เพื่อปรับขนาดของรูปภาพ
วิธีที่สอง
1. คลิกที่รูปภาพ แลวกดปุม ที่ TinyMCE Editor
 - 47 -

2. คลิก Tab Appearance แลวกําหนดขนาดของรูปในชอง Dimensions (กวาง x ยาว) มีหนวยเปน

pixels (หากไมระบุความกวาง x ยาว รูปจะแสดงตามขนาดของไฟลรปู )

นอกจากนี้ยังสามารถปรับขอความใหลอมรอบรูปภาพในลักษณะตาง ๆ ไดโดยเลือกที่สวนของ
Alignment เมื่อปรับคาตาง ๆ เปนที่เรียบรอยแลวใหกดปุม เพื่อบันทึก

MOSImage
การแทรกรูปภาพ
1. คลิกเมาสเพื่อเลือกตําแหนงที่จะวางรูปภาพภายในกรอบ
2. กดปุม จากนั้นปรากฏขอความ { mosimage } ภายในกรอบ
 - 48 -

3. คลิกที่ Tab Images เพื่อเปดสวนการใชงาน MOSImage บน Panel ทางดานขวา

4. คลิกเลือกไฟลรูปภาพในกรอบ Gallery Images

5. กดปุม จากนั้นจะปรากฏชื่อไฟลที่เลือกมาในกรอบ Content Images
หากตองการยกเลิกไฟลที่เลือกมา ใหคลิกไฟลรูปภาพในกรอบ Content Images และกดปุม
6. กดปุม

mosimage จะแสดงจํานวนรูปภาพตามจํานวนที่แทรกรูปดวยคําสั่ง รูปภาพที่ถูก

แสดงจะถูกนํามาจาก Content Images
หากตองการเปลี่ยนลําดับภายใน content image สามารถทําไดโดยการกดปุม
และ
 - 49 -

การปรับคาตาง ๆ ของรูปภาพ
1. คลิกชื่อไฟลที่ตองการปรับคาในกรอบ content images
2. กําหนดคาตาง ๆ ไดแก
Image Align การจัดวางรูปภาพ (ชิดซาย, ชิดขวา, กึ่งกลาง)
Alt Text ขอความที่จะปรากฏเมื่อนําเมาสมาวางบนรูปภาพ
border ขนาดของกรอบรูปภาพ

3. กดปุม
 - 50 -

2. HTMLArea3 XTD
HTMLArea3 XTD เปน editor ตัวหนึ่งที่ความนิยมและมีความงายในการใชงาน ซึ่ง
ความสามารถมาก และใชงานไดอยางสะดวกสบาย

การติดตั้ง HTMLArea3 XTD จะเหมือนกับ การตัดตั้ง editor ทั่วไป คือ การ install mambots
สมาถทําไดโดย ไปที่ menubar (Installers--> mambots)

จะปรากฏหนานี้

ใหคลิกที่ Browse จะปรากฏหนาจอ ดังนี้

 - 51 -

เมื่อทําการคลิก Browse จะขึ้นหนาตางใหเราไปที่ Folder ที่เก็บ File

HTMLArea3XTDv11RC1.zip แลวใหคลิกที่ file กด Open

Click ที่ Upload File & Install เพื่อติดตั้ง HTMLArea3XTD หากการติดตั้งไมมีขอผิดพลาดใดๆ

จะปรากฏหนานี้
 - 52 -

Click ที่ปุม Continue เพื่อเปนการสิ้นสุดการติดตั้ง

หลังจากนัน้ เพื่อการใชงาน HTMLArea3XTD เปน editor ของ Joomla จะตองมีการตั้งคา โดยทํา

ไดดังนี้ โดยไปที่ menuber (site--> Global Configuration) แลวเลือกไปที่ site

เมื่อไปยังหนาการตั้งคา site แลว ใหคลิกที่ Default WYSIWYG Editor: ใหเลือก HTMLArea3

XTD แลวกด Save ที่ toolber
 - 53 -

เมื่อมีการจัดการเนื้อหา ก็จะปรากฏ editor : HTMLArea3 XTD ใหใช

 - 54 -

WORKSHOP 7
การนํารูปภาพเก็บลงเว็บไซต (Media Manager)

1. กดปุม

2. จะปรากฏสวนใหเลือกไฟลภายในเครื่อง ในกดปุม Browse

3. กดปุม Upload
จากนั้นชื่อไฟลรูปภาพจะปรากฏใน Gallery Images ของ Tab Images
Media Manager เปนสวนที่ดูแลและจัดการไฟลที่ Upload เขามาเก็บไวที่เว็บไซต สําหรับ
ไฟล ที่ อ นุ ญ าตให ส ามารถ Upload ได จ ะมี ด ว ยกั น 9 ประเภทประกอบด ว ย
doc, xls, ppt, bmp, gif, jpg, png, swf, pdf
Folder ที่จัดเก็บไฟล โปรแกรม Joomla ไดกําหนด folder สําหรับการใชงานมาใหสอง
folder ประกอบดวย
1. banners เปน folder สําหรับจัดเก็บไฟลรูปภาพที่จะถูกนําไปใชเปน Banner
2. stories เปน folder รูปภาพที่ถูกใชกับ MOSImage ซึ่งจะถูกแสดงออกมาในสวน Tab
Images เมื่อมีการแกไข Content Item
• การเขาสู Media Manager
• การยายไปยัง Folder อื่น
• การ Upload ไฟล
• การสราง Folder
• การลบไฟล
 - 55 -

การเขาสู Media Manager สามารถทําได 2 วิธีดังนี้

วิธีที่ 1
1. คลิก Menubar แลวเลือกคําสั่ง Site => Media Manager

- Media Manager -
 - 56 -

วิธีที่ 2
1. คลิก menubar แลวเลือกคําสั่ง Home เพื่อไปที่หนาแรก (สวนของ Control Panel)
2. คลิกปุม Media Manager

การยายไปยัง Folder อื่น

1. เขาสู Media Manager
2. คลิก เพื่อเลือก Folder ที่ตองการไป
หากตองการยายไปยัง Folder กอนหนาใหกดปุม

การ Upload ไฟล

1. เขาสู media manager
2. ยายไปยัง Folder ที่ตองการเก็บไฟล
3. กดปุม เพื่อเลือกไฟล

4.กดปุม

การสราง Folder
1. เขาสู media manager
2. ยายไปยัง folder ที่ตองการเก็บ Folder ใหม
3. พิมพชื่อ Folder ที่ตองการสรางในชอง create directory

4. กดปุม

การลบไฟล
1. เขาสู media manager
2. ยายไปยัง folder ที่เก็บไฟลที่ตองการลบ
3. กดปุม ตรงไฟลที่ตองการลบ
 - 57 -

WORKSHOP 8
การจัดการ Frontpage Manager

การเขาสูสวน Frontpage Manager เพื่อจัดการ Content Item ที่ถูกเลือกมาไวในหนาแรก

ของเว็บไซต สามารถทําได 2 วิธีดังนี้

วิธีแรก
1. คลิก Menubar แลวเลือกคําสั่ง Content => Frontpage Manager

- Frontpage Manager –
 - 58 -

วิธีที่ 2
1. คลิก menubar แลวเลือกคําสั่ง Home เพื่อไปที่หนาแรก (สวนของ Control Panel)

2. คลิกปุม Front page Manager

การเปดและซอน Content Item ในหนาแรก

1. เขาสูสวน frontpage manager
2. หากตองการให Content Items ปรากฏใหหนาแรกใหคลิกสวน Published ใหเปนรูปสัญลักษณ
และหากไมตอ งใหปรากฏใหคลิกเปลี่ยนเปนรูปสัญลักษณ

การสลับลําดับของ Content Items ที่แสดงในหนาแรก

1. เขาสูสวน Frontpage Manager
2. ใหคลิกรูปสัญลักษณ หรือ ที่แถว Reorder เพื่อเปลี่ยนลําดับ
 - 59 -

WORKSHOP 9
การจัดการเมนู (Menu Manager)

Menu เปนสวนที่นําขอมูลของ Content Item ออกมาแสดงบนเว็บไซต เมนูจะมีทั้งหมด 4

รูปแบบ ตาง ๆ ดังนี้
Main Menu (เมนูหลัก ปกติจะปรากฏทางดานซาย)
top menu (เมนูดานบน)
user menu (เมนูสําหรับสมาชิก จะปรากฏเมื่อสมาชิก Login)
Other Menu (เมนูอื่น ๆ)
การจัดการปุมเมนู
• การเขาสูสวนการจัดการเมนู (Menu Manager)
• การสรางปุมเพิ่มบนเมนู
• การลบปุม
• การสลับลําดับปุม
• การเปดและซอนปุม

การเขาสูสวนการจัดการเมนู (Menu Manager)

(ในทีน่ ี้จะเปนการสรางปุมบน main menu)

1. คลิก menubar แลวเลือกคําสั่ง menu => mainmenu

เมื่อเขาสูสวนการจัดการ menu จะปรากฏสวนแสดงรายละเอียดภายใน menu manager ดังรูป

 - 60 -

- สวนการจัดการ menu (Menu Manager) -

การสรางปุมเพิ่มบนเมนู สามารถทําไดดังนี้
1. เขาสูสวนการจัดการเมนู (menu manager)

2. กดปุม
3. เลือกประเภทของปุม (Menu Item)
 - 61 -

- ประเภทตาง ๆ ของ Menu Item –

4. กดปุม

การลบปุม สามารถทําไดดังนี้
1. เขาสูสวนการจัดการเมนู (Menu Manager)
2. เช็คเครื่องหมาย √ ของ menu ที่ตองการลบ

3. กดปุม (การลบ menu item นั้นภายในตองไมมี menu item ใด ๆ อยู)

การสลับลําดับปุม สามารถทําไดดังนี้
1. เขาสูสวนการจัดการเมนู (menu manager)
2. ใหคลิกรูปสัญลักษณ หรือ ที่แถว reorder เพื่อเปลี่ยนลําดับ
 - 62 -

การเปดและซอนปุม สามารถทําไดดังนี้
1. เขาสูสวนการจัดการเมนู (Menu Manager)
2. หากตองการใหปุมใด ๆ ปรากฏอยูภายในเมนู สามารถทําไดโดยคลิกรูปสัญลักษณ ใน
คอลัมนของ published และหากไมตองการใหปรากฏบนเมนูใหคลิกเปลี่ยนเปนรูปสัญลักษณ

ความหมายของปุม (Menu Item) ประเภทตาง ๆ

ทําความเขาใจกับชื่อของปุม (Menu Item)
หากสังเกตุชื่อชนิดของปุม (Menu Item) เชน Blog - Content Category
จะสามารถเขาใจไดวารูปแบบของชื่อปุม (Menu Item) จะประกอบดวย [รูปแบบการแสดงขอมูล] -
[ชนิดของกลุมเนื้อหา]
ดังนั้น Blog - Content Category สามารถเขาใจไดวาปุมนี้เมื่อคลิกแลวจะ [แสดงขอมูล
รูปแบบแบบ Blog] - [เนื้อหานํามาจาก Category]

รูปแบบการแสดงขอมูล ไดแก
1. Blog แสดงเนื้อหาเฉพาะในสวน Intro Text เปนบทนําและมี Link เพือ่ ใหผูสนใจคลิกอาน
เนื้อหาของ Content Item ตอทั้งหมด
2. Table แสดงเฉพาะหัวขอขาวออกมาในรูปแบบตาราง
3. Link แสดงเนื้อหาทั้งหมด
ชนิดของกลุมเนื้อหา ไดแก Section, Category, Content Item, Static Content Item, Url, Component
ตาง ๆ และอื่น ๆ

ปุมบนเมนูจะถูกแบงออกตามกลุมตาง ๆ ดังนี้
• Content
• Components
• Links
• Miscellaneous
 - 63 -

กลุม Content
Blog - Content Category
ปุมสําหรับ Link ไปยังหนาที่แสดงรายชื่อรวมของ Content Item ภายใน Category ที่เลือก
Blog - Content Category Archive
ปุมสําหรับ Link ไปยังระดับหมวดหมูยอยของเนื้อหา Category ซึ่งจะทําการแสดงลักษณะของ
ขอมูลเหมือนหนาแรก โดยที่ขอมูลดังกลาวถูกกําหนดใหเปน Archive
Blog - Content Section
ปุมสําหรับ Link ไปยังหนาที่แสดงรายละเอียดของ Content Item ภายใน Category ที่เลือกใน
รูปแบบรายละเอียดยอย
Blog - Content Section Archive
ปุมสําหรับ Link ไปยังระดับหมวดหมูหลักของเนื้อหา Section ซึ่งจะทําการแสดงลักษณะของ
ขอมูลเหมือนหนาแรก โดยที่ขอมูลดังกลาวถูกกําหนดใหเปน Archive
Link - Content Item
ปุมสําหรับ Link ไปยัง Content Item
Link - Static Content
ปุมสําหรับ Link ไปยัง Static Content Item
Table - Content Category
ปุมสําหรับ Link ไปยังหนาที่แสดงรายชื่อรวมของ Content Item ภายใน Category ที่เลือกใน
รูปแบบ List
Table - Content Section
ปุมสําหรับ Link ไปยังหนาที่แสดงรายชื่อรวมของ Content Item ภายใน Section ที่เลือกในรูปแบบ
List

กลุม Components
Component
ปุมสําหรับ Components ที่ติดตั้งบนเว็บไซต ซึ่งรวม Components ที่ติดมากับการติดตั้ง Joomla ใน
ครั้งแรก รวมทั้ง Component ของผูพัฒนารายอื่นที่ไดตดิ ตั้งใชงานบนเว็บไซต
Link - Component Item
ปุมสําหรับ Link ไปยังรายการยอยของ Component
Link - Contact Item
ปุมสําหรับ Link ไปยัง Contact Us
 - 64 -

Link - Newsfeed
ปุมสําหรับ Link ไปยังเว็บไซตที่ใหบริการดึงขาวมาแสดงบนเว็บไซตของเรา
Table – Contact Category
ปุมสําหรับ Link ไปยัง Contact Us ในลักษณะ List
Table – Newsfeed Category
ปุมสําหรับ Link ไปยังเว็บไซตที่ใหบริการดึงขาวมาแสดงบนหนาเว็บไซตเราในรูปแบบ List หัวขอ
Table – Weblink Category
ปุมสําหรับ Link ไปยัง Weblink Component

กลุม Links
Link - Component Item
ปุมสําหรับ Link ไปยังเนื้อหาของ Component
Link - Contact Item
ปุมสําหรับ Link ไปยังรายการที่อยูสําหรับติดตอ
Link - Content Item
ปุมสําหรับ Link ไปยัง Content Item
Link - Newsfeed
ปุมสําหรับ Link ไปยังรายการเว็บไซตที่ใหบริการดึงขาวมาแสดงบนเว็บไซตของเรา
Link - Static Content
ปุมสําหรับ Link ไปยัง Static Item
Link - Url
ปุมสําหรับ Link URL ตาง ๆ เชน เว็บไซตมหาวิทยาลัยกรุงเทพ

กลุม Miscellaneous
Separator / Placeholder
ปุมสําหรับคั่น Menu ตาง ๆ โดยที่ Menu ประเภทนี้จะไมมีการกําหนด Link ปลายทาง
Wrapper
ปุมสําหรับ Link Wrapper
 - 65 -

WORKSHOP 10
การติดตั้งและเปลี่ยน Template

เว็บไซตที่ดแู ลโดยโปรแกรม joomla นั้น สามารถเปลี่ยนรูปแบบเว็บไซต (Template) ได

อยางงายและรวดเรว สําหรับขั้นตอนการจัดการตาง ๆ มีดังนี้
• การเปลี่ยน template
• การติดตั้ง template
• การลบ template ออกจากเว็บไซต

การเปลี่ยน template สามารถทําไดดังนี้

1. คลิก menubar แลวเลือกคําสั่ง Site => Template Manager => Site Templates

เมื่อเขาสูสวน template manager จะปรากฏสวนแสดงรายละเอียดดังรูป

(สามารถทราบไดวาเราเลือกใช template อะไรอยูโดยใหสังเกตุสัญลักษณ ในคอลัมนของ
default)
 - 66 -

- template manager -

2. คลิกวงกลมเลือก template ที่ตองการเปลี่ยน

3. กดปุม

การติดตั้ง template สามารถทําไดดังนี้

1. คลิก menubar แลวเลือกคําสั่ง Installers => Templates – Site

เมื่อเขาสูสวนการติดตั้ง template จะปรากฏสวนแสดงรายละเอียดดังรูป

 - 67 -

- สวนการติดตั้ง template -

3. กดปุม เพื่อเลือกไฟล template

4. กดปุม

การลบ template ออกจากเว็บไซต สามารถทําไดดังนี้

1. คลิก menubar แลวเลือกคําสั่ง Site => Template Manager => Site Templates

เมื่อเขาสูสวน template manager จะปรากฏสวนแสดงรายละเอียดดังรูป

 - 68 -

- template manager –

2. คลิกวงกลมเลือก template ที่ตองการลบออกจากเว็บไซต

3. กดปุม (จะไมสามารถลบ template ออกได หาก template นั้นถูกเลือกใชอยู)

การเรียกดู (Preview) เว็บไซตหลังการแกไข

เมื่อมีการเปลี่ยนแปลงใด ๆ ที่ไดทําขึ้นในสวน administrator สามารถที่จะเปดดูการ
เปลี่ยนแปลงบนเว็บไซต (Frontend) ไดโดย
1. คลิก menubar แลวเลือกคําสั่ง Preview => In New Window

จากนั้นโปรแกรม Joomla จะ popup โปรแกรม Internet Explorer (Web Browser) ขึ้นมาพรอมกับ

เปดเว็บไซต
 - 69 -

WORKSHOP 11
การสราง Static Content

Static content คือ สวนที่เราจะพิมพขอความหรือ เนื้อหาที่เราตองการที่จะปรากฏในเว็ป

ไซต
เริ่มจาก Menu content คลิกที่ Static Content Manager

จะปรากฏหนานี้

ใหคลิกที่ New ตรง Menu bar

 - 70 -

ในสวนของ Item Details

Title = ชื่อหลัก (แสดงใหเห็นในเวปไซต)
Title = ชื่อรอง จะตั้งหรือไมตั้งก็ได
Text = เปนสวนทีจ่ ะพิมพขอความที่ตองการใหแสดงในเวปไซตในหนาตางๆ

ในสวนของ Publishing
ทําการ Set คา Publishing ไดตามตองการ
Status = เปน Public สามารถใหคนทั่วไปดูหนานี้ได
Chang Creator = แสดงใหคนวาใครเปนคนแกไขบทความ
Override Created Date = แกไขบทความเมื่อไร
Start Publishing = วันที่เริ่มประกาศใหคนทัว่ ไปดูขว ความของเราได
Finish Publishing = วันที่ปดไมใหคนทัว่ ไปดูขอความในเวปไซต
 - 71 -

เมื่อทําการเขียนขอความเรียบรอยแลวใหทําการ Save
 - 72 -

WORKSHOP 12
การติดตั้ง Components

การติดตั้ง Components เพื่อการใชงานใน Joomla นั้น จะสังเกตไดวา Components ที่ดาวน

โหลดมานั้นจะมีชื่อไฟล นําหนา com_ เชน com_akobook342.zip , com_simpleboard-1.0.4-
beta1.zip เปนตน
การติดตั้งทําไดโดย ไปที่ menubar (Installers--> Components)

แลวคลิก Component จะพบหนาถัดไป

จะเปนหนาที่ Install และ Uninstall

 - 73 -

ตรง Upload Package File ใหคลิกที่ Browse

ใหไปที่เก็บไฟล เลือกไฟลที่ตองการ แลวคลิกปุม Open

เสร็จแลวใหคลิกที่ ปุม Upload File & Install เมื่อคลิกโปรแกรมก็จะถูก Install ถาไมมีปญหาใน

การ Upload จะขึ้นคําวา Success

ใหกดปุม Continue เปนการเสร็จสิ้นการ Install Components

 - 74 -

การลบ Components ที่ไมตอ งการ

ไปที่ เมนูการติดตั้ง เหมือนเดิมโดย ไปที่ menubar (Installers--> Components)

จะปรากฏ Install ถาเลื่อนดูขางลางจะพบกับ Installed Components คือ Components ที่มีอยูใน

Joomla นั้นเอง

คลิกที่ Currently Installed ตรง Components ที่ตองการลบ

 - 75 -

เสร็จแลวใหไปที่ Menubar คลิกที่ Uninstall

โปรแกรมจะถามยืนยันวาตองการลบจริงหรือไม ใหคลิก OK

เมื่อคลิก OK ก็เสร็จการลบ Components

 - 76 -

WORKSHOP 13
การติดตั้ง Modules

การติดตั้ง Modules เพื่อการใชงานใน Joomla นั้น จะสังเกตไดวา Modules ที่ดาวนโหลด

มานั้นจะมีชื่อไฟล นําหนา mod_ เชน mod_anaclock2.zip , mod_partner.zipเปนตน
การติดตั้งทําไดโดย ไปที่ menubar (Installers--> Modules)

แลวคลิก Modules จะพบหนาถัดไป

 - 77 -

ใหคลิกที่ Browse ไปที่เก็บไฟล

คลิกที่ Upload File & Install

เสร็จแลวใหกดปุม Continue เปนอันเสร็จการ Install

การลบ MoDules
การลบใหทําในลักษณะเดียวกับ การลบ Components
 - 78 -

WORKSHOP 14
การติดตั้ง Mombots

การติดตั้ง Mombots เพื่อการใชงานใน Joomla นั้น การติดตั้งทําไดโดย ไปที่ menubar

(Installers--> Mombots)

ใหทําการคลิกที่ ปุม Browse

 - 79 -

ใหไปยังที่เก็บไฟล แลวทําการคลิกที่ปุม Upload File & install

แลวการ Upload ไมมีปญหา จะขึ้น Success

เสร็จแลวใหกดปุม Continue เปนอันเสร็จการ Install

การลบ MoDules
การลบใหทําในลักษณะเดียวกับ การลบ Components
 - 80 -

WORKSHOP 15
การจัดการ Contact Us

Component Contact Us คือ Components ที่ใชในการติดตอสื่อสาร ระหวางผูใชบริการ

Website และผูที่เกี่ยวของ
การจัดการ Contact us มีขั้นตอนดังนี้
เลือกที่ Components --> Contacts --> Manage Contacts

คลิกเลือกที่ชองสี่เหลี่ยม

แลวเลือกที่ Edit ตรง Menubar

จะปรากฏหนาเพื่อใหทําการแกไข
 - 81 -

เมื่อทําการแกไขเสร็จเรียบรอยแลวใหทําการกดปุม Save เพื่อบันทึกขอมูล

ผลการทํางานที่เรียบรอยแลว
 - 82 -

WORKSHOP 16
การจัดการ Web link

วิธีการสราง Web link Categories มีขั้นตอน ดังนี้

เลือก Components --> Web link --> Web link Categories เพื่อสราง Web link Categories ซึ่งจะ
นําไปใชในสวนของ Web link Item ตอไป

จะปรากฏหนาจอ

- Category Title คือ หัวขอของ Category

- Category Name คือ ชื่อของ Category
- Image Position คือ ตําแหนงของรูปภาพทีจ่ ะแสดง
- Access Level คือ ระดับการเขาถึงของผูใช
- Published คือ ตองการแสดง Web link Categories นี้หรือไม
- Description คือ สวนของการอธิบายรายละเอียดหัวขอ Category ที่เราสรางขึ้น
- คลิก Save เมื่อเสร็จเรียบรอยแลว
 - 83 -

เมื่อมีการสราง หัวขอ Category หรือกลุมของ Link แลว ใหไปที่ Menubar

Components--> Web links --> Web Link Items

จะปรากฏหนาถัดไป

ใหกดปุม New เพื่อสราง Link

จะปรากฏหนาเพื่อใหกรอกขอมูล
 - 84 -

- Name: ชื่อของ Link

- Category: กลุมของ Link ที่สรางไว
- URL: ใหใส URL ที่จะ Link ไป
- Description: รายละเอียดของ Link
- Published: ใหคลิกเพื่อ แสดงหรือไมแสดง Link

แลวใหกดปุม save ก็เปนอันเสร็จ

 - 85 -

WORKSHOP 17
การแกไขภาษาใน Joomla

ใน Joomla จะใชภาษาไทยไมได ดังนัน้ จะตองทําการ Install ภาษาไทยเขาไป โดยไปที่ Menubar

Site --> Language --> Site Languages

จะปรากฏหนาตอไป

แลวไปที่ New ที่ Menubar

จะปรากฏหนาจอให Install
 - 86 -

ใหคลิกที่ปุม Browse

แลวคลิกที่ Upload File & Install

โปรแกรมจะถูก Install เสร็จแลวจะพบหนา Success ใหกดปุม Continue

 - 87 -

เสร็จแลวใหจะตองตั้งคาเพือ่ ใชภาษาไทย

แลวคลิก Publish ที่ Menubar

เครื่องหมายถูกก็จะยายไปทีภ่ าษาไทยแสดงวาสามารถใชภาษาไทยไดแลว

การลบภาษาทีไ่ มตองการ

กอนทําการ Delete จะตอง Publish ตัวอื่นกอน

 - 88 -

แลวใหคลิกที่ Delete

จะปรากฏยืนยันการลบ ใหกดปุม OK

ก็เปนอันเสร็จการลบภาษาทีไ่ มตองการออก
 คูมือ
โปรแกรมการจัดการ
Website สําเร็จรูป
Joomla

ที่ปรึกษา
อ.อดุลย ลามาลี

คณะผูจัดทํา

นายอัครพงษ เขียวแจม
นายกิตติพงศ จันดาเบา
นายศักดา ยะตัน

กลุมงานสารสนเทศสิ่งแวดลอม
สํานักงานสิ่งแวดลอมภาคที่ 10