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

4,370 views

Published on

2 Comments
9 Likes
Statistics
Notes
No Downloads
Views
Total views
4,370
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
391
Comments
2
Likes
9
Embeds 0
No embeds

No notes for slide

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

  1. 1.   คูมอ  ื     โปรแกรมการจัดการ Website สําเร็จรูป Joomla  
  2. 2. คํานํา คูมือ โปรแกรมการจัดการ 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  
  3. 3. -1- แนะนําโปรแกรม Joomla "joomla" เปนระบบบริหารจัดการเว็บไซต (content management system: cms) ที่ชวยให การพัฒนาเว็บไซตเปนเรื่องงายและรวดเร็ว สามารถติดตั้งใชงานและอัพเดทขอมูลไดทุกที่ทุกเวลา ตามตองการ โปรแกรม joomla จะแบงเว็บไซตออกเปนสองสวนหลัก ๆ คือ frontend คือสวนที่แสดงผลใหกับผูเขาชมเว็บไซต หรืออีกนัยหนึ่งก็คือเนื้อหาของ เว็บไซตนั่นเอง backend คือสวนการจัดการเนื้อหารวมถึงโครงสรางของเว็บไซต หรือเรียกอีกชื่อหนึ่งวา สวน administrator - สวนของ frontend-
  4. 4. -2- -สวนของ backend- เราสามารถทําความเขาใจไดงาย ๆ ก็คือสวนของ frontend เปนสวนของเว็บไซตที่คนอื่นจะ เขามาดู สําหรับสวน backend จะเปนสวนใหผูดูแลเว็บไซตเขาไปแกไขขอมูลตาง ๆ นั่นเอง
  5. 5. -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 ดังภาพ
  6. 6. -4- 3. เมื่อเปดดูภายในไดเรกทอรี /joomla จะพบหลายไฟลและหลายไดเรกทอรี ดังภาพ 4. เขาไปที่ "http://localhost/phpmyadmin" จากนันกรอกยูสเซอรและพาสเวิรดที่ได ้ กําหนดไวตอนติดตั้ง AppServ จากนันสรางฐานขอมูลเปลาๆ ชื่ออะไรก็ได ในที่นี้ใชชื่อ joomla_db ้
  7. 7. -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 ่
  8. 8. -6- 6. เปด web Browser ขึ้นมาเรียกไปยัง ไดเรกทอรี joomla "http://localhost/joomla" 7. จะเห็นหนาแรก ของการติดตั้ง เปนการตรวจสอบความเรียบรอยของไฟลตางๆ เกี่ยวกับ การติดตั้ง pre-install check ทุกอยางควร set ตามคําแนะนํา โดยเฉพาะ ตรง configuration.php ควรเปน writeable กด Next
  9. 9. -7- 8. เขาสูหนาแสดง license ถาตองการติดตั้ง หลังจากยอมรับขอตกลง กด Next 9. เขาสู ขั้นตอนที่ 1 step-1
  10. 10. -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
  11. 11. -9- 11. เขาสูขั้นตอนที่ 3 step-3 ยืนยันคาตางๆ ไดแก URL,Path,Admin email,password( จํา หรือแกไขไดตามตองการ) กด Next 12. เขาสูขั้นตอนที่ 4 step-4 ขั้นตอนสุดทาย ของการติดตั้ง ถาติดตั้งสําเร็จ จะแสดงขอความวา "Congratulations! Joomla is installed"
  12. 12. - 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 ใหม
  13. 13. - 11 - 13. เขาสู JoomlaInstallation ถาเลือก View Site และ Administration (หลังจาก ลบ หรือ เปลี่ยนขื่อไดเรกทอรี installation ) View site : สําหรับแสดงหนา interface สําหรับ user ของ joomla Administration : สําหรับหนา interface การปรับแตง แกไข joomla เปนสวนของผูดูแล  ระบบ 14. สิ้นสุดการติดตั้ง joomla
  14. 14. - 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 เมื่อ ไดโปรแกรมแลวจึงทําการติดตั้ง ดังนี้ เมื่อดาวนโหลดโปรแกรมไดแลว ทําการดับเบิ้ลคลิกโปรแกรม แลวโปรแกรมจะทําการ ติดตั้งโดยขึ้นหนาจอ ดังรูป
  15. 15. - 13 - ทําการเลือกปุม Next แลวจะไดหนาจอ ดังรูป เมื่ออานเงื่อนไขเสร็จแลว ใหคลิก Yes ทําการ Next
  16. 16. - 14 - ทําการกด Next ทําการกด Next ทําการกด Next
  17. 17. - 15 - รอจนกวาทําการติดตั้งแลวเสร็จจะขึ้นหนาจอ ดังรูป หนาจอเมื่อติดตั้งโปรแกรมเสร็จเรียบรอยแลว ใหกด Finish เพื่อเสร็จสิ้นการติดตั้ง เมื่ อ ได ทํ า การติ ด ตั้ ง โปรแกรมเสร็ จ เรี ย บร อ ยขั้ น ตอนต อ ไปคื อ การ Upload File JoomlaInstallation ขึ้นบน Hosting ทําการเปดโปรแกรม SSH Secure Shell Client ขึ้นมา ดังรูป
  18. 18. - 16 - ทําการ Connect ไปยัง Hosting โดยกดปุม จะไดหนาถัดไป หลังจากนันใหใสขอมูล ้ Host Name: (ตองทราบจากเจาของ Hosting) User Name: (ตองทราบจากเจาของ Hosting) เมื่อทําการกรอกขอมูลเสร็จเรียบรอยแลว คลิกปุม Connect จะไดหนาจอถัดไป ดังนี้ หนาจอสําหรับใส Password หลังจากใส Password เรียบรอยแลว คลิกที่ปุม OK เพื่อ Connect เขาสู Hosting หลังจากที่ Connect เรียบรอยแลว จะไดหนาจอถัดไป
  19. 19. - 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 ดังรูป
  20. 20. - 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 ดังรูป
  21. 21. - 19 - ทุกอยางควร set ตามคําแนะนํา โดยเฉพาะ ตรง configuration.php ควรเปน writeable กด Next
  22. 22. - 20 - เขาสูหนาแสดง license ถาตองการติดตั้ง หลังจากยอมรับขอตกลง กด Next เขาสู ขั้นตอนที่ 1 step-1
  23. 23. - 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
  24. 24. - 22 - เขาสูขั้นตอนที่ 3 step-3 ยืนยันคาตางๆ ไดแก URL,Path,Admin email,password( จํา หรือแกไขไดตามตองการ) กด Next เขาสูขั้นตอนที่ 4 step-4 ขั้นตอนสุดทาย ของการติดตั้ง ถาติดตั้งสําเร็จ จะแสดงขอความวา "Congratulations! Joomla is installed"
  25. 25. - 23 - แสดงชื่อ admin และ password สําหรับการแกไข รายละเอียดของ joomla ซึ่งจะกลาวใน หัวขอถัดไป ปุมดานบน ขวามือ คือ View Site และ Administration ถาเลือก View Site และ Administration ในขณะนีจะพบหนาจอ ดังนี้ ้ แสดงวาเราตองไปลบ หรือเปลี่ยนขื่อไดเรกทอรี ใน joomla ที่ชื่อวา installation แลวทําการ refresh ใหม
  26. 26. - 24 - เขาสู JoomlaInstallation ถาเลือก View Site และ Administration (หลังจาก ลบ หรือเปลี่ยน ขื่อไดเรกทอรี installation ) View site : สําหรับแสดงหนา interface สําหรับ user ของ joomla Administration : สําหรับหนา interface การปรับแตง แกไข joomla เปนสวนของผูดูแล  ระบบ 14. สิ้นสุดการติดตั้ง joomla
  27. 27. - 25 -
  28. 28. - 25 - WORKSHOP 3 สวนประกอบตาง ๆ ภายใน Joomla Administrator ในการเริ่มตนสรางเวปไซต จะตองเขาสูระบบการจัดการที่เรียกวา Joomla administration การเขาสูสวนจัดการนี้สามารถทําไดโดย http://address เว็ปไซต/administrator/ ตัวอยางเชน http://www.esanenvi.com/administrator
  29. 29. - 26 - หลังจาก Login เขามาในสวน administrator แลว จะพบสวนประกอบตางๆ 4 สวน ดังนี้ 1. Menubar คือสวนที่แสดงชื่อคําสั่งทั้งหมดของโปรแกรม Joomla 2. Infobar คือ สวนที่แสดงขอมูลรายละเอียดตอไปนี้ - ชื่อของเว็บไซต - ตําแหนงปจจุบัน (Current Location) ใน Admin Section ที่กําลังใชงานอยู - จํานวนขอความที่ไดรับจาก Users อื่น ๆ - จํานวนผูเขาใชงานโปรแกรม Joomla ในขณะนัน ้ - ชื่อผูใชที่ Login เขามา เชน admin
  30. 30. - 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
  31. 31. - 28 -
  32. 32. - 28 - WORKSHOP 4 โครงสรางการจัดเก็บเนื้อหา / ขาว (Content) กอนที่จะเริ่มสรางเนื้อหาภายในเว็บไซตนน ควรทําความเขาใจเรื่องความสัมพันธระหวาง ั้ section หมวดหมูหลัก category หมวดหมูยอย content item เนื้อหา ขอมูลหรือบทความ เราอาจเปรียบ Section เปน Folder ใหญ ซึ่งภายในจะเก็บ Folder ยอยในที่นี้ก็คือ Category และภายใน Category จะเปนที่เก็บ Content Item หรือไฟลเอกสารและไฟลขอมูลตาง ๆ ดังรูป ตัวอยางโครงสรางการจัดเก็บเนื้อหา (content)
  33. 33. - 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
  34. 34. - 30 - วิธีที่ 2 1. คลิก menubar แลวเลือกคําสั่ง Home เพื่อไปที่หนาแรก (สวนของ Control Panel) 2. คลิกปุม Section Manager เมื่อเขาสูสวนการจัดการ Section โดยวิธีที่ 1 หรือ 2 จะปรากฏสวนแสดงรายละเอียดภายใน Section Manager ดังรูป - สวนการจัดการ section (Section Manager) - การสราง Section สามารถทําได ดังนี้ 1. เขาสูสวนการจัดการ Section (section manager) 2. กดปุม จากนั้นจะเขาสูสวนการกําหนดคาตาง ๆ
  35. 35. - 31 - 3. กําหนดชื่อของ Section ลงใน Title และ Section Name (ใชชื่อเดียวกันได) และกําหนดระดับของ ผูที่สามารถเขามาดูในสวนของ Access Level ซึ่งประกอบดวย - Public ทุกคนสามารถเปดดูได - Registered เฉพาะผูที่ผานการ Log in เขาระบบสมาชิกจึงจะสามารถเปดดูได - Special สําหรับผูที่อยูกลุมพิเศษ(กลุมที่แกไขขอมูลได)เทานั้นที่เปดดูได 4. เมื่อกําหนดเสร็จเรียบรอยใหกดปุม หรือ การลบ Section สามารถทําไดดังนี้ 1. เขาสูสวนการจัดการ section (section manager) 2. เช็คเครื่องหมาย √ ของ Section ที่ตองการลบ 3. กดปุม (การลบ Section นั้นภายในตองไมมี Category ใด ๆ อยู)
  36. 36. - 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
  37. 37. - 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 ดังรูป
  38. 38. - 34 - - สวนการจัดการ Category (Category Manager) - การสราง Category สามารถทําไดดังนี้ 1. เขาสูสวนการจัดการ Category (Category manager) 2. กดปุม จากนั้นจะเขาสูสวนการกําหนดคาตาง ๆ
  39. 39. - 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 และหากไมตองการใหปรากฏบนเว็บไซตให คลิกเปลี่ยนเปนรูปสัญลักษณ
  40. 40. - 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 ดังรูป
  41. 41. - 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 นี้
  42. 42. - 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 และหากไมตองการใหปรากฏบนเว็บไซต ใหคลิกเปลี่ยนเปนรูปสัญลักษณ
  43. 43. - 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 ทําไดทกอยาง และไมสามารถลบออกได ุ ก็จะปรากฏหนานี้
  44. 44. - 40 - ถาตองการเพิ่มขอมูลผูใชใหม ใหคลิกที่ New ตรง Tool ber ดังรูป ก็จะปรากฏหนาตอไป หลังจากที่กรอกรายละเอียดของผูใชเรียบรอยแลว ก็มาถึงขั้นตอนการกําหนดระดับของผูใชงานวา เราตองการใหผูใชงานอยูในระดับไหน สามารถกําหนดไดใน Group ดังรูป เมื่อทําการกําหนดระดับการใชงานเรียบรอยแลว ขั้นตอนสุดทายตองการที่จะ Block ไมใหใชงาน หรือไม ถาตองการก็ใหกด Yes แตถาไมตองการให Block ก็กด No 
  45. 45. - 41 - การแกไขขอมูลของ User คลิกเครื่องหมายถูกที่ Name ที่ตองการแกไข แลวคลิกที่ Edit Tool bar ทําการแกไขขอมูล แลวกด Seve การลบ User ที่ไมตองการ คลิกเครื่องหมายถูกที่ Name ที่ตองการลบ แลวกด Delete ตรง Tool bar ก็เสร็จการลบ User
  46. 46. - 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 ทั้งหมด
  47. 47. - 43 - ความหมายของปุมคําสั่งบน Toolbar ตัวหนา, ตัวเอียง, ขีดเสนใต, ตัวขีดทับ จัดขอความ ชิดซาย, ชิดขวา, กึ่งกลาง, เต็มบรรทัด ชนิดตัวอักษร ขนาดตัวอักษร ตัดขอความ, คัดลอกขอความ, วางขอความแบบ Plain Text, วางขอความแบบ Word, เลือกทั้งหมด สรางรายการแบบสัญลักษณ, สรางรายการแบบลําดับ ยกเลิก, ทําซ้ํา ใส Link, นํา Link ออก, ใส Link ภายในหนาเดียวกัน ใสรูปภาพ เปด pop up เพือแกไขขอมูลในรูปแบบ HTML ่ คนหาหรือแทนที่ วันที,่ เวลา รูปอมยิ้ม สีตัวอักษร, สีพื้นหลังตัวอักษร ลบรูปแบบที่ถูกกําหนด ตัวหอย, ตัวยก ตัวอักษรพิเศษ เสนคั่น ใส Flash, ใสไฟล Multimedia (Flash, Quicktime, Shockwave, Windows Media, Real Media) ใสตาราง
  48. 48. - 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
  49. 49. - 45 - การรวม ชอง Cell 1. คลิกชอง Cell จากนันกดปุม ้ จะปรากฏสวนกําหนดคาตาง ๆ ดังรูป 2. กําหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยึดตําแหนงจากชอง Cell ที่เลือกไวไปดานซายในกรณี Column และดานลางในกรณี Row) 3. กดปุม Update (การรวมจะเริ่มรวมจากทางขวาและดานลาง ของชอง Cell ที่คลิกเลือกไว) การแยก ชอง Cell 1. คลิกชอง cell ที่ไดถูกรวมไว จากนั้นกดปุม
  50. 50. - 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
  51. 51. - 47 - 2. คลิก Tab Appearance แลวกําหนดขนาดของรูปในชอง Dimensions (กวาง x ยาว) มีหนวยเปน pixels (หากไมระบุความกวาง x ยาว รูปจะแสดงตามขนาดของไฟลรป) ู นอกจากนี้ยังสามารถปรับขอความใหลอมรอบรูปภาพในลักษณะตาง ๆ ไดโดยเลือกที่สวนของ Alignment เมื่อปรับคาตาง ๆ เปนที่เรียบรอยแลวใหกดปุม เพื่อบันทึก MOSImage การแทรกรูปภาพ 1. คลิกเมาสเพื่อเลือกตําแหนงที่จะวางรูปภาพภายในกรอบ 2. กดปุม จากนั้นปรากฏขอความ { mosimage } ภายในกรอบ
  52. 52. - 48 - 3. คลิกที่ Tab Images เพื่อเปดสวนการใชงาน MOSImage บน Panel ทางดานขวา 4. คลิกเลือกไฟลรูปภาพในกรอบ Gallery Images 5. กดปุม จากนั้นจะปรากฏชื่อไฟลที่เลือกมาในกรอบ Content Images หากตองการยกเลิกไฟลที่เลือกมา ใหคลิกไฟลรูปภาพในกรอบ Content Images และกดปุม 6. กดปุม mosimage จะแสดงจํานวนรูปภาพตามจํานวนที่แทรกรูปดวยคําสั่ง รูปภาพที่ถูก แสดงจะถูกนํามาจาก Content Images หากตองการเปลี่ยนลําดับภายใน content image สามารถทําไดโดยการกดปุม และ
  53. 53. - 49 - การปรับคาตาง ๆ ของรูปภาพ 1. คลิกชื่อไฟลที่ตองการปรับคาในกรอบ content images 2. กําหนดคาตาง ๆ ไดแก Image Align การจัดวางรูปภาพ (ชิดซาย, ชิดขวา, กึ่งกลาง) Alt Text ขอความที่จะปรากฏเมื่อนําเมาสมาวางบนรูปภาพ border ขนาดของกรอบรูปภาพ 3. กดปุม
  54. 54. - 50 - 2. HTMLArea3 XTD HTMLArea3 XTD เปน editor ตัวหนึ่งที่ความนิยมและมีความงายในการใชงาน ซึ่ง ความสามารถมาก และใชงานไดอยางสะดวกสบาย การติดตั้ง HTMLArea3 XTD จะเหมือนกับ การตัดตั้ง editor ทั่วไป คือ การ install mambots สมาถทําไดโดย ไปที่ menubar (Installers--> mambots) จะปรากฏหนานี้ ใหคลิกที่ Browse จะปรากฏหนาจอ ดังนี้
  55. 55. - 51 - เมื่อทําการคลิก Browse จะขึ้นหนาตางใหเราไปที่ Folder ที่เก็บ File HTMLArea3XTDv11RC1.zip แลวใหคลิกที่ file กด Open Click ที่ Upload File & Install เพื่อติดตั้ง HTMLArea3XTD หากการติดตั้งไมมีขอผิดพลาดใดๆ จะปรากฏหนานี้
  56. 56. - 52 - Click ที่ปุม Continue เพื่อเปนการสิ้นสุดการติดตั้ง หลังจากนัน เพื่อการใชงาน HTMLArea3XTD เปน editor ของ Joomla จะตองมีการตั้งคา โดยทํา ้ ไดดังนี้ โดยไปที่ menuber (site--> Global Configuration) แลวเลือกไปที่ site เมื่อไปยังหนาการตั้งคา site แลว ใหคลิกที่ Default WYSIWYG Editor: ใหเลือก HTMLArea3 XTD แลวกด Save ที่ toolber
  57. 57. - 53 - เมื่อมีการจัดการเนื้อหา ก็จะปรากฏ editor : HTMLArea3 XTD ใหใช
  58. 58. - 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 • การลบไฟล
  59. 59. - 55 - การเขาสู Media Manager สามารถทําได 2 วิธีดังนี้ วิธีที่ 1 1. คลิก Menubar แลวเลือกคําสั่ง Site => Media Manager - Media Manager -
  60. 60. - 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. กดปุม ตรงไฟลที่ตองการลบ
  61. 61. - 57 - WORKSHOP 8 การจัดการ Frontpage Manager การเขาสูสวน Frontpage Manager เพื่อจัดการ Content Item ที่ถูกเลือกมาไวในหนาแรก ของเว็บไซต สามารถทําได 2 วิธีดังนี้ วิธีแรก 1. คลิก Menubar แลวเลือกคําสั่ง Content => Frontpage Manager - Frontpage Manager –
  62. 62. - 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 เพื่อเปลี่ยนลําดับ
  63. 63. - 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 ดังรูป
  64. 64. - 60 - - สวนการจัดการ menu (Menu Manager) - การสรางปุมเพิ่มบนเมนู สามารถทําไดดังนี้ 1. เขาสูสวนการจัดการเมนู (menu manager) 2. กดปุม 3. เลือกประเภทของปุม (Menu Item)
  65. 65. - 61 - - ประเภทตาง ๆ ของ Menu Item – 4. กดปุม การลบปุม สามารถทําไดดังนี้ 1. เขาสูสวนการจัดการเมนู (Menu Manager) 2. เช็คเครื่องหมาย √ ของ menu ที่ตองการลบ 3. กดปุม (การลบ menu item นั้นภายในตองไมมี menu item ใด ๆ อยู) การสลับลําดับปุม สามารถทําไดดังนี้ 1. เขาสูสวนการจัดการเมนู (menu manager) 2. ใหคลิกรูปสัญลักษณ หรือ ที่แถว reorder เพื่อเปลี่ยนลําดับ
  66. 66. - 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
  67. 67. - 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
  68. 68. - 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
  69. 69. - 65 - WORKSHOP 10 การติดตั้งและเปลี่ยน Template เว็บไซตที่ดแลโดยโปรแกรม joomla นั้น สามารถเปลี่ยนรูปแบบเว็บไซต (Template) ได ู อยางงายและรวดเรว สําหรับขั้นตอนการจัดการตาง ๆ มีดังนี้ • การเปลี่ยน template • การติดตั้ง template • การลบ template ออกจากเว็บไซต การเปลี่ยน template สามารถทําไดดังนี้ 1. คลิก menubar แลวเลือกคําสั่ง Site => Template Manager => Site Templates เมื่อเขาสูสวน template manager จะปรากฏสวนแสดงรายละเอียดดังรูป (สามารถทราบไดวาเราเลือกใช template อะไรอยูโดยใหสังเกตุสัญลักษณ ในคอลัมนของ default)
  70. 70. - 66 - - template manager - 2. คลิกวงกลมเลือก template ที่ตองการเปลี่ยน 3. กดปุม การติดตั้ง template สามารถทําไดดังนี้ 1. คลิก menubar แลวเลือกคําสั่ง Installers => Templates – Site เมื่อเขาสูสวนการติดตั้ง template จะปรากฏสวนแสดงรายละเอียดดังรูป
  71. 71. - 67 - - สวนการติดตั้ง template - 3. กดปุม เพื่อเลือกไฟล template 4. กดปุม การลบ template ออกจากเว็บไซต สามารถทําไดดังนี้ 1. คลิก menubar แลวเลือกคําสั่ง Site => Template Manager => Site Templates เมื่อเขาสูสวน template manager จะปรากฏสวนแสดงรายละเอียดดังรูป
  72. 72. - 68 - - template manager – 2. คลิกวงกลมเลือก template ที่ตองการลบออกจากเว็บไซต 3. กดปุม (จะไมสามารถลบ template ออกได หาก template นั้นถูกเลือกใชอยู) การเรียกดู (Preview) เว็บไซตหลังการแกไข เมื่อมีการเปลี่ยนแปลงใด ๆ ที่ไดทําขึ้นในสวน administrator สามารถที่จะเปดดูการ เปลี่ยนแปลงบนเว็บไซต (Frontend) ไดโดย 1. คลิก menubar แลวเลือกคําสั่ง Preview => In New Window จากนั้นโปรแกรม Joomla จะ popup โปรแกรม Internet Explorer (Web Browser) ขึ้นมาพรอมกับ เปดเว็บไซต
  73. 73. - 69 - WORKSHOP 11 การสราง Static Content Static content คือ สวนที่เราจะพิมพขอความหรือ เนื้อหาที่เราตองการที่จะปรากฏในเว็ป ไซต เริ่มจาก Menu content คลิกที่ Static Content Manager จะปรากฏหนานี้ ใหคลิกที่ New ตรง Menu bar
  74. 74. - 70 - ในสวนของ Item Details Title = ชื่อหลัก (แสดงใหเห็นในเวปไซต) Title = ชื่อรอง จะตั้งหรือไมตั้งก็ได Text = เปนสวนทีจะพิมพขอความที่ตองการใหแสดงในเวปไซตในหนาตางๆ ่ ในสวนของ Publishing ทําการ Set คา Publishing ไดตามตองการ Status = เปน Public สามารถใหคนทั่วไปดูหนานี้ได Chang Creator = แสดงใหคนวาใครเปนคนแกไขบทความ Override Created Date = แกไขบทความเมื่อไร Start Publishing = วันที่เริ่มประกาศใหคนทัวไปดูขวความของเราได ่  Finish Publishing = วันที่ปดไมใหคนทัวไปดูขอความในเวปไซต ่
  75. 75. - 71 - เมื่อทําการเขียนขอความเรียบรอยแลวใหทําการ Save
  76. 76. - 72 - WORKSHOP 12 การติดตั้ง Components การติดตั้ง Components เพื่อการใชงานใน Joomla นั้น จะสังเกตไดวา Components ที่ดาวน โหลดมานั้นจะมีชื่อไฟล นําหนา com_ เชน com_akobook342.zip , com_simpleboard-1.0.4- beta1.zip เปนตน การติดตั้งทําไดโดย ไปที่ menubar (Installers--> Components) แลวคลิก Component จะพบหนาถัดไป จะเปนหนาที่ Install และ Uninstall
  77. 77. - 73 - ตรง Upload Package File ใหคลิกที่ Browse ใหไปที่เก็บไฟล เลือกไฟลที่ตองการ แลวคลิกปุม Open เสร็จแลวใหคลิกที่ ปุม Upload File & Install เมื่อคลิกโปรแกรมก็จะถูก Install ถาไมมีปญหาใน การ Upload จะขึ้นคําวา Success ใหกดปุม Continue เปนการเสร็จสิ้นการ Install Components
  78. 78. - 74 - การลบ Components ที่ไมตองการ  ไปที่ เมนูการติดตั้ง เหมือนเดิมโดย ไปที่ menubar (Installers--> Components) จะปรากฏ Install ถาเลื่อนดูขางลางจะพบกับ Installed Components คือ Components ที่มีอยูใน Joomla นั้นเอง คลิกที่ Currently Installed ตรง Components ที่ตองการลบ
  79. 79. - 75 - เสร็จแลวใหไปที่ Menubar คลิกที่ Uninstall โปรแกรมจะถามยืนยันวาตองการลบจริงหรือไม ใหคลิก OK เมื่อคลิก OK ก็เสร็จการลบ Components
  80. 80. - 76 - WORKSHOP 13 การติดตั้ง Modules การติดตั้ง Modules เพื่อการใชงานใน Joomla นั้น จะสังเกตไดวา Modules ที่ดาวนโหลด มานั้นจะมีชื่อไฟล นําหนา mod_ เชน mod_anaclock2.zip , mod_partner.zipเปนตน การติดตั้งทําไดโดย ไปที่ menubar (Installers--> Modules) แลวคลิก Modules จะพบหนาถัดไป
  81. 81. - 77 - ใหคลิกที่ Browse ไปที่เก็บไฟล คลิกที่ Upload File & Install เสร็จแลวใหกดปุม Continue เปนอันเสร็จการ Install การลบ MoDules การลบใหทําในลักษณะเดียวกับ การลบ Components
  82. 82. - 78 - WORKSHOP 14 การติดตั้ง Mombots การติดตั้ง Mombots เพื่อการใชงานใน Joomla นั้น การติดตั้งทําไดโดย ไปที่ menubar (Installers--> Mombots) ใหทําการคลิกที่ ปุม Browse
  83. 83. - 79 - ใหไปยังที่เก็บไฟล แลวทําการคลิกที่ปุม Upload File & install แลวการ Upload ไมมีปญหา จะขึ้น Success เสร็จแลวใหกดปุม Continue เปนอันเสร็จการ Install การลบ MoDules การลบใหทําในลักษณะเดียวกับ การลบ Components
  84. 84. - 80 - WORKSHOP 15 การจัดการ Contact Us Component Contact Us คือ Components ที่ใชในการติดตอสื่อสาร ระหวางผูใชบริการ Website และผูที่เกี่ยวของ การจัดการ Contact us มีขั้นตอนดังนี้ เลือกที่ Components --> Contacts --> Manage Contacts คลิกเลือกที่ชองสี่เหลี่ยม แลวเลือกที่ Edit ตรง Menubar จะปรากฏหนาเพื่อใหทําการแกไข
  85. 85. - 81 - เมื่อทําการแกไขเสร็จเรียบรอยแลวใหทําการกดปุม Save เพื่อบันทึกขอมูล ผลการทํางานที่เรียบรอยแลว
  86. 86. - 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 เมื่อเสร็จเรียบรอยแลว
  87. 87. - 83 - เมื่อมีการสราง หัวขอ Category หรือกลุมของ Link แลว ใหไปที่ Menubar Components--> Web links --> Web Link Items จะปรากฏหนาถัดไป ใหกดปุม New เพื่อสราง Link จะปรากฏหนาเพื่อใหกรอกขอมูล
  88. 88. - 84 - - Name: ชื่อของ Link - Category: กลุมของ Link ที่สรางไว - URL: ใหใส URL ที่จะ Link ไป - Description: รายละเอียดของ Link - Published: ใหคลิกเพื่อ แสดงหรือไมแสดง Link แลวใหกดปุม save ก็เปนอันเสร็จ
  89. 89. - 85 - WORKSHOP 17 การแกไขภาษาใน Joomla ใน Joomla จะใชภาษาไทยไมได ดังนันจะตองทําการ Install ภาษาไทยเขาไป โดยไปที่ Menubar ้ Site --> Language --> Site Languages จะปรากฏหนาตอไป แลวไปที่ New ที่ Menubar จะปรากฏหนาจอให Install
  90. 90. - 86 - ใหคลิกที่ปุม Browse แลวคลิกที่ Upload File & Install โปรแกรมจะถูก Install เสร็จแลวจะพบหนา Success ใหกดปุม Continue
  91. 91. - 87 - เสร็จแลวใหจะตองตั้งคาเพือใชภาษาไทย ่ แลวคลิก Publish ที่ Menubar เครื่องหมายถูกก็จะยายไปทีภาษาไทยแสดงวาสามารถใชภาษาไทยไดแลว ่ การลบภาษาทีไมตองการ ่ กอนทําการ Delete จะตอง Publish ตัวอื่นกอน
  92. 92. - 88 - แลวใหคลิกที่ Delete จะปรากฏยืนยันการลบ ใหกดปุม OK ก็เปนอันเสร็จการลบภาษาทีไมตองการออก ่
  93. 93.   คูมอ  ื โปรแกรมการจัดการ Website สําเร็จรูป Joomla จัดทําโดย นายวริศ คุมพงษ 48051752 นายรุงโรจน พงษโสพณ 48051660 นางสาวสิตา กังวานพณิชย 48052186

×