เว็บสำเร็จรูป

   คูมอืโปรแกรมการจัดการ

Website สําเร็จรปูJoomla

คํานํา คูมือ โปรแกรมการจัดการ Web site สําเร็จรูป Joomla จัดทําเพื่อใหผูสนใจ ศึกษาวิธีการใชงาน

เบ้ืองตน การจดัการงานใน 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 ไดเทานั้น)

จัดทําโดย นาบวริศ คุมพงษ 48051752

นายรุงโรจน พงษโสพณ 48051660

นางสาวสิตา กังวานพณิชย 48052186  

- 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

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

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

ถาเกิดโปรแกรมฟอง ใหแกไข 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 ใหม

- 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

ก็เปนอันเสร็จการลบภาษาทีไ่มตองการออก

จัดทําโดย นายวริศ คุมพงษ 48051752 นายรุงโรจน พงษโสพณ 48051660 นางสาวสิตา กังวานพณิชย 48052186

คูมอื

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

Joomla