Joomla สร้างเว็บง่าย และสนับสนุนการเข้าถึง

1. Joomla
สร้างเว็บง่าย
และสนับสนุนการเข้าถึง
บุญเลิศ อรุณพิบูลย์
นักวิชาการ
ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี
สานักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ
http://stks.or.th, boonlert@nstda.or.th
http://facebook.com/boonlert.aroonpiboon

2. บุญเลิศ อรุณพิบูลย์
 2536 – 2551
 NECTEC
 เจ้าหน้าที่ระบบคอมพิวเตอร์
 วิทยากร ศูนย์ฝึกอบรม
คอมพิวเตอร์เนคเทค
 รักษาการหัวหน้างานสนับสนุน
ทางเทคนิค
 รักษาการหัวหน้างานวิชาการ
 รักษาการหัวหน้างานพัฒนาสื่อ
สาระดิจิทัล
 นักวิชาการ
 2551 – ปัจจุบัน
 STKS / NSTDA
 นักวิชาการ
 รักษาการหัวหน้างานพัฒนา
และบริการสื่อสาระดิจิทัล

3. เทคโนโลยีการพัฒนาเว็บไซต์
เผยแพร่
เนื้อหา
เพิ่มลูกเล่น
ระบบสมาชิก
ระบบสืบค้น
ระบบจัดการเนื้อหา
แบบฟอร์มต่างๆ
CMSHTML
* Edit Plus
HTML
* Generator
* Dreamweaver
* Front Page
JavaScript
HTML
JavaScript
PHP/ASP
Database
* MS Access
* MySQL
* Microsoft SQL
* Oracle
* PostgreSQL
* DB2
CSS

4. CMS
 Content Management System
ระบบบริหารจัดการเนื้อหาเว็บไซต์
 พัฒนาบนฐานของ Web Programming + Database
 ช่วยลดทรัพยากรต่างๆ ที่เกี่ยวข้องกับการพัฒนา/
จัดการเว็บ
กาลังคน
เวลา
งบประมาณ

5. โปรแกรมต่างๆ ในกลุ่ม CMS
 Joomla
 PHP-Nuke
 MyPHPNuke
 Mambo
 eNvolution
 MD-Pro
XOOPs
OpenCMS
Plone
JBoss
Drupal
http://www.cmsmatrix.org/

6. http://cmsmatrix.org

7. http://trends.google.com
 Joomla, mambo, wordpress, drupal,
phpnuke

8. CMS
 ถูกพัฒนาเพื่อใช้สร้างเว็บไซต์ที่ต้องการให้ความสาคัญกับ
“เนื้อหาเว็บ” โดยเฉพาะในกลุ่ม Dynamic content
 มีความสามารถเฉพาะด้าน
 ไม่ได้รองรับกับงานทุกงานอัตโนมัติ
 สามารถปรับเพิ่มเติมได้
 Extension
 พัฒนาเอง (ในกลุ่ม Open Source)
 แนวทางการเลือก CMS
 Infrastructure
 ความต้องการของผู้พัฒนา/ผู้ใช้/หน่วยงาน
 ต้องการการทางานในโหมด Online

9. HTML Editor & CMS
Web ServerComputer ผู้ใช้
โอนเอกสาร
รายครั้ง (FTP)
Web ServerComputer ผู้ใช้
ต้องทางาน
Online
ติดตั้งแล้ว
นาเข้า
ออนไลน์
HTML

10. Joomla คือหนึ่งทางเลือกของเว็บยุคใหม่
 เปิดเผย Source Code ---- Open Source Software
 ดาวน์โหลดใช้ได้ฟรี
 สนับสนุน Web Accessibility
 สนับสนุนการสืบค้น Search Engine Friendly,
Google Friendly
 Extension เสริมการทางานจานวนมาก
 Communities ที่ยังพร้อมสนับสนุนพัฒนาโปรแกรม
 สนับสนุนการทางานตามแนวทางเทคโนโลยีเว็บ 2.0
www.joomla.org/

11. เทคโนโลยี 2.0
 เทคโนโลยีตามแนวคิดของการพัฒนาเว็บไซต์ 2.0
(Web 2.0)
 ยุคใหม่ของการพัฒนาเว็บไซต์
 รูปแบบการพัฒนาเว็บไซต์ที่ให้ความสาคัญกับ “ผู้ใช้เว็บ” มากกว่า
“ผู้พัฒนา” หรือ “เจ้าของเว็บไซต์”
 แนวคิดการพัฒนาเว็บที่ให้ความสาคัญกับการปฏิสัมพันธ์การทางานร่วมกัน
การผสานความร่วมมือทั้งโครงสร้างพื้นฐาน ระบบ ซอฟต์แวร์ และเนื้อหา
เว็บ
 การปรับเว็บไซต์จากการให้ข้อมูลเพียงทางเดียว เป็นการให้บริการและ
ข้อมูลที่ “ผู้ใช้” เข้าถึงได้ง่ายและร่วมสร้าง แก้ไข

12. Joomla กับการประยุกต์ใช้งาน
 เว็บหน่วยงาน
 เว็บส่วนตัว
 เว็บประชาสัมพันธ์
 เว็บผลงาน
 เว็บการเรียนการสอน
E-Commerce
KM
Digital Collection
Library
Research

13. Joomla กับการประยุกต์ใช้งาน
 ไม่ใช่ CMS ที่เหมาะสมกับการออกแบบสร้างเว็บทุกความต้องการ
 สารวจความต้องการของท่าน
 นามาเปรียบเทียบกับ CMS อื่นๆ ด้วย http://www.cmsmatrix.org
 นา CMS ที่ได้มาดูความนิยมด้วย http://trends.google.com
 ทาไหมถึง “ดัง” ในช่วงนี้
 ง่าย เมื่อเทียบกับ CMS อื่นๆ
 รองรับ SEO
 มีเอกสารเผยแพร่เยอะ
 พูดปากต่อปาก
 มีกลุ่มผู้พัฒนาที่ยังทางานอยู่
 มีเครื่องมือให้เลือกใช้เฉพาะ Extension หลากหลาย ทั้งฟรีและ
ต้องจ่ายเงิน

14. Joomla กับเกี่ยวเนื่องต่างๆ
Server
& Security
การติดตั้ง
ปรับแต่งโปรแกรม
เนื้อหา
System Administrator
การบริหารจัดการ Server ระบบรักษาความปลอดภัย การจัดการฐานข้อมูล
การจัดการ Log file การจัดการสิทธิ์ของการเข้าถึงระบบ
- Web Master การติดตั้งและปรับแต่ง Joomla การจัดการสมาชิก Joomla
การจัดการหมวดเนื้อหา Joomla การติดตั้ง Extension และเปิดใช้งาน
การแก้ไขแม่แบบเว็บไซต์ด้วยเทคนิคแทนที่
- Web Master การแก้ไข CSS, HTML, PHP ระดับที่ 1
- Web Master & Web Programmer การแก้ไข CSS, HTML, PHP ระดับสูง
- Web Programmer การพัฒนา Joomla ด้วย web programming ต่างๆ
ทุกคน ภายใต้ข้อกาหนดร่วมกัน
(มาตรฐานสื่อดิจิทัลต่างๆ)

15. ใช้จริง ทาอย่างไร
องค์กร
 เตรียม Server
 ติดตั้ง Linux
 ฐานข้อมูล MySQL
 โปรแกรมภาษา PHP
 สิทธิ์ในการเข้าถึง
Server
ส่วนตัว
 หน่วยงานเตรียมพื้นที่ให้
 สิทธิ์ในการเข้าถึง Server
 เช่าพื้นที่ ISP หรือ Data
Provider อื่นๆ

17. ซอฟต์แวร์แนะนาก่อนพัฒนาเว็บไซต์
 Firefox/IE
 AppServ/
Server2Go/
XAMPP
 Joomla
 NotePad++
 XnView
 Photoscape
 GIMP
 PDF Creator
 OpenOffice.org
 FileZilla, WinSCP
 Audacity

18. พีซีธรรมดาเป็น Web Server
AppServ/XAMPP/Server2Go คือคาตอบ
Open Source Software
ง่ายในการติดตั้ง
ทางานได้กับ PC และ OS ทุกระบบ

19. ติดตั้ง AppServ

20. C:AppServ
ไดร์ฟและโฟลเดอร์ที่ควรจา

21. Server Name :
ชื่อ Server หรือ
IP-Address กรณีที่เป็น
เว็บจาลองให้ระบุเป็น
localhost
Administrator's Email Address:
อีเมล์ของผู้ดูแลระบบ
Apache HTTP Port:
เลขที่พอร์ทสื่อสารของ Apache
ปกติคือ พอร์ท 80
ข้อมูล Apache

22. root password รหัสผ่าน
(ต้องจาให้ได้ด้วย)‫‏‬
Character set
กรณีที่ใช้ภาษาไทย
ควรระบุเป็น
UTF-8 Unicode
คลิกเลือกรายการ
Enable InnoDB
ค่าควบคุมสาหรับฐานข้อมูล MySQL

23. ข้อแนะนาการสร้างรหัสผ่าน
 กาหนดเกณฑ์การสร้างรหัสผ่านให้ตนเอง
 ให้ความสาคัญกับการสร้างรหัสผ่าน
 เช่น กาหนดอักขระพิเศษให้สระ ปิดท้ายด้วย #
 A $
 E +
 I ^
 O @
 U !
kampaengsaen
k$mp$+ngs$+n#

24. เอกสารเว็บ/Server/DBs ของท่าน
กาหนด Encoding หรือไม่
หากกาหนดระบุเป็นอะไร

25. Thai Encoding
UTF-8, TIS-620, Windows-874
<meta http-equiv=“content-type”
content=“text/html; charset=………..”>

26. ติดตั้ง AppServ สาเร็จ

27. ตรวจสอบ AppServ
http://127.0.0.1 หรือ http://localhost

28. ปรับแต่ง Config ของ Server – AppServ # 1
 Start, Program, AppServ, Configuration Server, PHP Edit
the php.ini Configuration File
 max_execution_time ควรมากกว่า 120
 max_input_time ควรมากกว่า 120
 memory_limit ควรมากกว่า 64M
 post_max_size ควรมากกว่า 20M
 upload_max_filesize ควรมากกว่า 20M
 การปรับแก้ไขจะต้องระมัดระวังเป็นพิเศษ
 บันทึกไฟล์ ปิดไฟล์

29. ปรับแต่ง Config ของ Server – AppServ # 2
 Start, Program, AppServ, Configuration Server, Apache
Edit the httpd.conf Configuration File
 ลบเครื่องหมาย # ออกจากรายการ
#LoadModule rewrite_module modules/mod_rewrite.so
 การปรับแก้ไขจะต้องระมัดระวังเป็นพิเศษ
 บันทึกไฟล์ ปิดไฟล์
 Restart Server ด้วยคาสั่ง Start, Program, AppServ, Control
Server by Service, Apache Restart

30. Server2Go
 ซอฟต์แวร์จาลองเครื่องแม่ข่ายเว็บแบบพกพา
 Apache
 PHP
 MySQL
 PHPMyAdmin
 Perl
 ไม่ต้องเสียเวลาติดตั้ง
 ดาวน์โหลด แล้ว unzip ก็ใช้งานได้ทันที
 คัดลอก (Copy) ระบบที่พัฒนาใส่ Thumb Drive & CD-ROM ไป
ใช้งานที่ใดก็ได้

31. http://www.server2go-web.de

32. การเรียกใช้งาน Server2Go
ดับเบิลคลิกไอคอน
Serve2Go.exe
รอสักครู่ โปรแกรมจะเปิด
IE Web Browser

33. ปรับแต่ง Config ของ Server – Server2Go
 ไฟล์ PHP.ini และไฟล์ httpd.conf อยู่ที่
server2goserverconfig_tpl
 เปิดไฟล์ pms_config.ini แล้วแก้ไขรายการ
 LocalMirror เป็น 0
 การปรับแก้ไขจะต้องระมัดระวังเป็นพิเศษ
 บันทึกไฟล์ ปิดไฟล์
 ปิด Server2Go
 เข้าสู่ระบบใหม่

34. เตรียมโฟลเดอร์โปรแกรม
 Download ต้นฉบับโปรแกรมจาก Joomla.org
 Unzip ให้อยู่ในรูปแบบโฟลเดอร์
 Copy โฟลเดอร์โปรแกรมต้นฉบับ Joomla ไปไว้
ใน
c:appservwww กรณี AppServ
server2gohtdocs กรณี Server2Go
 เปลี่ยนชื่อโฟลเดอร์ตามเหมาะสม

35. ติดตั้งโปรแกรม Joomla
 Server2Go
ดับเบิลคลิกโปรแกรม Server2Go.exe
 กรณีที่มีโฟลเดอร์ Joomla ให้พิมพ์
 http://127.0.0.1:4001/ชื่อโฟลเดอร์
 AppServ
เปิดเว็บเบราว์เซอร์
พิมพ์คาสั่ง
 http://127.0.0.1/ชื่อโฟลเดอร์

36. จอภาพเริ่มต้นติดตั้ง Joomla เลือกภาษา
1

37. ตรวจสอบการทางานกับไฟล์ประกอบการติดตั้ง
1

38. ยอมรับลิขสิทธิ์โปรแกรมและเงื่อนไขการใช้งาน
1

39. ป้อนข้อมูลฐานข้อมูล MySQL

40. ข้อมูลฐานข้อมูล MySQL
localhost
root

41. ป้อนข้อมูลระบบ FTP
1

42. ข้อมูลเกี่ยวกับระบบเว็บไซต์

43. ชื่อเว็บไซต์ (Site Title)
 ภาษาอังกฤษ สามารถตามด้วยข้อความภาษาไทย
 มีความยาวไม่เกิน 64 ตัวอักษร
 มีความหมายชัดเจน
 ประกอบด้วยคาที่ผู้ใช้คุ้นเคย และ/หรือนึกถึงใน
ลักษณะคาค้น (Keyword) ได้ง่าย

44. ข้อมูลตัวอย่าง
สามารถคลิกปุ่ม “ติดตั้งข้อมูลตัวอย่าง”
เพื่อให้ Joomla ติดตั้งข้อมูลตัวอย่าง
เพื่อใช้ทดสอบการออกแบบพัฒนาเว็บไซต์

45. การติดตั้งเสร็จสมบูรณ์

46. ลบโฟลเดอร์ Installation
เข้าไปในโฟลเดอร์ต้นฉบับโปรแกรม
Joomla เพื่อลบโฟลเดอร์ย่อยชื่อ
Installation ออกจากระบบ

47. เรียกดูเว็บไซต์
คลิกปุ่ม
ดูหน้าเว็บไซต์

48. หน้าเว็บที่ไม่มีข้อมูลตัวอย่าง

49. หน้าเว็บไซต์พร้อมข้อมูลตัวอย่าง

50. การเข้าสู่ระบบจัดการเว็บไซต์
http://127.0.0.1/joomla/administrator
http://127.0.0.1:4001/joomla/administrator

51. จอภาพส่วนควบคุมระบบ Admin

52. แก้ไขข้อมูลผู้ดูแลระบบ
Admin Account
• Site, User Manager
• เปลี่ยนบัญชี Admin เป็นชื่ออื่น, เปลี่ยนรหัสผ่าน, ป้อนข้อมูล
ประกอบ

53. ข้อมูลสาคัญที่ต้องปรับแก้ไข
• Name
• Username
• Time Zone

54. ปรับเว็บให้สนับสนุน SEO
Site, Global Configuration, Site
ข้อมูลสาคัญที่ต้องปรับแก้ไข
• Site Name
• Global Site Meta Description
• Global Site Meta Keyword
• Search Engine Friendly URLs
1
2
3

55. Site Name & Meta Tag
• Site Name – ไม่เกิน 64 ตัวอักษร ภาษาอังกฤษนา มีความหมาย
ชัดเจน สอดคล้องกับเนื้อหาในเว็บ ผู้ใช้นึกถึงได้ง่าย
• Description – ไม่เกิน 250 ตัวอักษร เนื้อหาอธิบายเกี่ยวกับเว็บ
• Keyword – คาค้นที่ผู้ใช้นึกถึงได้ง่าย ครอบคลุมเนื้อหาของเว็บ
ภาษาอังกฤษนา ปรับแต่งสม่าเสมอ ไม่เกิน 500 คา

56. http://www.submitexpress.com/analyzer
ตัวช่วยตรวจสอบ Sitename, Meta Tag

57. http://truehits.net
ตัวช่วยศึกษาพฤติกรรมผู้ใช้

58. Search Engine Friendly URLs
http://www.stks.or.th/web/index.php?option=com_content&task
=view&id=103&Itemid=20
http://www.nstda.or.th/index.php/aboutus-nstda

59. ดูหน้าเว็บที่ปรับแต่งแล้ว
1
2

60. 1
2 ปรับแต่งระบบ Joomla
Site, Global Configuration, System
• Allow User Registration : ควรปิด
ระบบ
• Legal Extensions (File Types) :
เพิ่ม/ลดฟอร์แมตไฟล์ที่อนุญาตให้
นาเข้าระบบ
• Maximum Size (in bytes) : ขนาด
ไฟล์ที่อนุญาตให้นาเข้า

61. ปรับแต่งระบบเครื่องแม่ข่าย
Site, Global Configuration, Server
1
2ปรับแต่งระบบ Joomla Mail ด้วย GMail
Mailer: SMTP Server
Mail From: <your_user_id>@gmail.com
SMTP Auth: Yes
SMTP Security: SSL
SMTP Port: 465
SMTP Username: <your_user_id>@gmail.com
SMTP Password: <your_password>
SMTP Host: smtp.gmail.com

62. ปรับแต่งหน้าเว็บด้วย Module
• Module เป็นโปรแกรมเสริม (Extension) ประเภท
หนึ่งของ Joomla ทาหน้าที่ควบคุมการแสดงผลผ่าน
Front-end
• Joomla มี Module ที่พร้อมใช้งาน แต่ยังไม่เปิด
แสดงผล และอนุญาตให้ติดตั้ง Module เพิ่มเติมได้
• Module จะถูกแสดงผลรอบๆ พื้นที่แสดงเนื้อหาเว็บ
• การแสดงผล Module ควบคุมด้วยรูปแบบเว็บ
(Template) ผ่านชื่อตาแหน่ง (Position name)

63. ส่วนประกอบของ Joomla
ส่วนแสดงเนื้อหาหลักของเว็บ
Module ต่างๆ

64. Module ต่างๆ

65. Position Name ของ Template พื้นฐาน

66. Search Module ณ ตาแหน่ง Right
• ตัวอย่าง ต้องการเปิดใช้งาน Search Module เพื่อเป็น
ช่องทางให้ผู้ใช้ป้อนคาค้น สาหรับค้นเนื้อหาต่างๆ ภายใน
เว็บ และแสดงผล ณ ตาแหน่ง Right
• Extensions, Module Manager

67. Search Module ณ ตาแหน่ง Right
• คลิกปุ่ม New
• คลิกรายการ Search

68. Search Module ณ ตาแหน่ง Right
1) ป้อนชื่อ Module
2) ตั้งค่าการแสดงผล
3) เลือกตาแหน่ง

69. Search Module ณ ตาแหน่ง Right

70. Search Module ณ ตาแหน่ง Right

71. สร้างเนื้อหาเว็บไซต์
• วิเคราะห์เนื้อหาที่ต้องการนาเสนอ
• จัดเตรียม/ออกแบบเนื้อหาให้เหมาะสมกับการนาเสนอผ่านเว็บ
• เลือกรูปแบบการนาเสนอเนื้อหา
• นาเสนอเนื้อหาในรูปแบบ Module
• นาเสนอเนื้อหาผ่าน Component + Module
• นาเสนอเนื้อหาในรูปแบบเมนู
• Component
• Article Manager
• Static Content
• Dynamic Content
• นาเสนอเนื้อหาผ่าน Front Page

72. ข่าวสั้นแบบ Custom HTML Module
• Custom HTML Module เป็นโมดูลที่อนุญาตให้
ผู้พัฒนาเว็บสามารถนาเนื้อหาใดๆ มาแสดงผล
ได้อิสระ โดยใช้ความสามารถของภาษา HTML
• ข่าวประกาศ
• การแลกเปลี่ยน Banner

73. ข่าวสั้นแบบ
Custom HTML Module
• Extensions, Module Manager,
New, Custom HTML
• ป้อน/วางภาพ/คาสั่งใน Custom
Output

74. การนาเข้ารูปภาพ
• รูปภาพจะต้องมีฟอร์แมตเป็น
.jpg, .gif, .png
• กาหนดขนาดอย่างเหมาะสม
ก่อนนาเข้าระบบ
• คลิกเมาส์ ณ ตาแหน่งที่
ต้องการวางภาพ
• คลิกปุ่ม Image 1

75. การนาเข้ารูปภาพ
• คลิกปุ่ม Browse เพื่อเลือกภาพแล้วคลิกปุ่ม Start Upload
2

76. การนาเข้ารูปภาพ
• คลิกเลือกภาพ ป้อนคาอธิบายภาพ และคลิกปุ่ม Insert
3
4
5

77. • คลิกเลือกภาพหรือเลือกข้อความ คลิกปุ่ม Insert/edit link
• ป้อน URL และเลือกรูปแบบ Target คลิกปุ่ม Insert
การสร้างจุดเชื่อม (Link)
1 3
2

78. ปรับแก้ไข Module
• Extension, Module Manager

79. ดึงข่าวอัตโนมัติด้วย Feed Display Module

80. Feed URL
• URL ที่ถูกออกแบบมาเพื่อให้สามารถดึงข้อมูลในรูปแบบ XML - RSS
ไปแสดงผลผ่านตัวอ่าน RSS Reader ได้อัตโนมัติ
1

81. http://rssthai.com

82. สร้างแบบสอบถามด้วย Poll Component
• Component เป็น Extension ที่ออกแบบมาเพื่อ
บริหารจัดการงานใดๆ อันเป็นการเพิ่มความสามารถ
ของ Joomla
• Component มักจะเป็นส่วนในการสร้างเนื้อหา
การจะใช้งานหรือแสดงผลจะถูกควบคุมด้วย Menu
หรือไม่ก็ Extension ที่เป็น Module หรือ Plug-ins
• ตัวอย่าง Component ที่มาพร้อมกับ Joomla คือ
Poll ช่วยออกแบบแบบสอบถามอย่างง่าย

83. สร้างแบบสอบถามด้วย Poll Component
• Components, Polls, New

84. สร้างแบบสอบถามด้วย Poll Component
1) ป้อนคาถามใน Title และชื่อกากับ
ที่เป็นภาษาอังกฤษใน Alias
2) เลือก Published เป็น Yes เพื่อ
เปิดใช้งาน Poll
3) ป้อนตัวเลือก
4) คลิกปุ่ม Save เพื่อบันทึก

85. สร้างแบบสอบถามด้วย Poll Component

86. แสดงผล Poll ด้วย Poll Module
• Extensions, Module Manager, New, Poll

87. แสดงผล Poll ด้วย Poll Module

88. แสดงผล Poll ด้วย Poll Module

89. คลังเว็บไซต์ด้วย Web Link Components
• Components, Web Links
คลังเว็บไซต์
สถาบันการศึกษา
มหาวิทยาลัย
เกษตรฯ
จุฬาลงกรณ์ฯ
มหาวิทยาลัย
ธรรมศาสตร์
สานักข่าว
ช่อง 3
ช่อง 5
…
ห้องสมุด
มก.บางเขน
มก.กาแพงแสน
…

90. คลังเว็บไซต์ด้วย Web Link Components
• Components, Web Links, Categories, New

91. คลังเว็บไซต์ด้วย Web Link Components
• Components, Web Links, Categories, New

92. คลังเว็บไซต์ด้วย Web Link Components
• Components, Web Links, Links, New

93. คลังเว็บไซต์ด้วย Web Link Components
• Components, Web Links, Links, New

94. คลังเว็บไซต์ด้วย Web Link Components
• Menus, Main Menu, New, Web Links, Web Link
Category List Layout

95. คลังเว็บไซต์ด้วย Web Link Components

96. คลังเว็บไซต์ด้วย Web Link Components

97. ปรับแต่งการแสดงผล Web Links

98. ติดต่อสอบถาม – Contact Component
• Components, Contacts, Categories, New
• สร้างหมวดการติดต่อ

99. ติดต่อสอบถาม – Contact Component
• Components, Contacts, Contacts, New
• สร้างรายการติดต่อ

100. ติดต่อสอบถาม – Contact Component
• Components, Contacts, Contacts, New
• สร้างรายการติดต่อ

101. สร้างเมนูเรียกใช้ฟอร์มติดต่อสอบถาม
• Menus, Main Menu, New, Contacts, Standard Contact
Layout

102. การสร้างเนื้อหาบทความ Static
• สร้างเนื้อหาด้วย Content, Article Manager
• เลือก Section/Category เป็น Uncategorized
• สร้างเมนูแสดงผลเนื้อหาด้วย Menus, Main
Menu, New, Article, Article Layout

104. Article Parameter

105. การแสดงผลเนื้อหา

106. การสร้างเมนูควบคุมบทความ

107. บทความแบบ Dynamic
• สร้างหมวดเนื้อหาระดับ Section
• Content, Section Manager
• สร้างหมวดเนื้อหาระดับ Category
• Content, Category Manager
• สร้างเมนูแสดงผลเนื้อหาระดับ Section หรือ
Category
• Menus, Main Menu

108. Section/Category/Article
Website
ข่าว
ข่าว
ประชาสัมพันธ์
งานวันครู
สัมมนา
วิชาการ
ข่าวจัดซื้อจัด
จ้าง
จัดซื้อ
คอมพิวเตอร์
จัดซื้อ Server
สาระความรู้
วิทยาศาสตร์การสอน

109. Section Manager

110. Category Manager

111. สร้างเมนูควบคุม Section/Category

112. การแสดงผลเนื้อหาหลัก
 เนื้อหาหลักแสดงผลผ่าน Front-end
 เนื้อหาล่าสุดแสดงแบบเต็มคอลัมน์เดียว
 เนื้อหาอื่นๆ แสดง 2 คอลัมน์
 สามารถกาหนดเฉพาะส่วนต้น
(Intro) แล้วคลิกดูเนื้อหาที่เหลือ
 แต่ละเนื้อหามีปุ่มควบคุมเพิ่ม
อย่างน้อย 3 ปุ่ม
 ปุ่มสร้างเอกสาร PDF
 ปุ่มส่งอีเมลแนะนาเนื้อหา
 ปุ่มสั่งพิมพ์เนื้อหา
 มีส่วนรายละเอียดการสร้าง/แก้ไข

113. Joomla Extension
 Component
 โปรแกรมที่ออกแบบมาเพื่อเพิ่มความสามารถของ Joomla ให้
ทางานตามวัตถุประสงค์ เช่น JoomGallery สาหรับจัดการคลังภาพ
 Module
 โปรแกรมย่อยที่ออกแบบมาเพื่อควบคุมการแสดงผล หรือทางานที่
มีลักษณะไม่ใหญ่มากนัก เช่น โปรแกรมที่ออกแบบเพื่อแสดงผล
ภาพของ JoomGallery ในลักษณะสไลด์
 Plugin
 โปรแกรมขนาดเล็กสุดที่ออกแบบเพื่อควบคุมการทางาน หรือช่วย
ให้งานสะดวกขึ้น เช่น JoomGallery Search ที่ทาให้สามารถสืบค้น
ภาพได้

114. การดาวน์โหลด Extension
• เลือกและดาวน์โหลด Extension จากเว็บไซต์
http://www.joomla.org
• ไฟล์ที่ได้มักจะมีส่วนขยายเป็น .zip
• ไม่ต้อง unzip (ยกเว้นบาง extension ที่มีการระบุไว้
เฉพาะให้ unzip ก่อน)
• มักจะคาบ่งชี้เฉพาะ เช่น
• com_ แสดงว่าเป็น Components
• mod_ แสดงว่าเป็น Module
• plg_ แสดงว่าเป็น Plugins

115. การติดตั้ง Extension
 เข้าสู่เว็บไซต์ Joomla ในโหมด Administrator
 http://127.0.0.1/administrator
 http://doname/administrator
 เลือกเมนูคาสั่ง Extension, Install/Uninstall

116. การติดตั้ง Extension
• คลิกปุ่ม Browse เพื่อเลือกไฟล์ Extension แล้ว
คลิกเลือก Upload & Install

117. การติดตั้ง Extension
 ผลการติดตั้ง Extension ที่สมบูรณ์

118. ตรวจสอบการติดตั้ง Extension
 Extension ที่ติดตั้งแล้ว สามารถตรวจสอบได้ 3 จุด
ตามประเภทของ Extension คือ
 เมนู Components
 เมนู Module Manager
 เมนู Plugin Manager

119. การถอนการติดตั้ง Extension
 เลือกเมนูคาสั่ง Extension, Install/Install
 คลิกเลือกแท็บประเภท Extension เช่น Components
แล้วเลือก Extension คลิกปุ่ม Uninstall

120. ห้องสมุดออนไลน์ด้วย Book Library
 ดาวน์โหลด Extension Book Library
 com_booklibrary_BASIC_1_5_3_2010_07_05.zip
 ติดตั้ง Book Library Component

121. การใช้งาน Book Library
 เลือกเมนูคาสั่ง Components, Book Library

122. สร้างเมนู Book Library
 เลือกเมนูคาสั่ง Menus, Main Menu

123. สร้างเมนู Book Library
 คลิกปุ่ม New เพื่อสร้างรายการเมนูใหม่
 คลิกเลือกประเภทรายการ
เมนูเป็น Book Library

124. สร้างเมนู Book Library
กาหนดชื่อรายการเมนูคาสั่ง
ที่รายการ Title
(หากกาหนดเว็บเป็น SEO
ต้องระบุ Alias
ให้ถูกต้องด้วย)
คลิกปุ่ม Save

125. สร้างเมนู Book Library

126. ผลจากหน้าเว็บไซต์

127. ผลจากหน้าเว็บไซต์

128. ผลจากหน้าเว็บไซต์

129. ควบคุมการแสดงผลหน้าเว็บ
 ทางานในโหมด Administrator
 เลือกคาสั่ง Components, Book Library, Setting Frontend

130. การเพิ่มหมวดหนังสือ
 เลือกคาสั่ง Components, Book Library, Categories
 คลิกปุ่ม New เพื่อสร้างหมวดใหม่

131. การเพิ่มหมวดหนังสือ

132. การเพิ่มหนังสือ
 เลือกคาสั่ง Components, Book Library, Books
 คลิกปุ่ม New เพื่อสร้างหนังสือใหม่

133. การเพิ่มหนังสือ

134. เพิ่มความสามารถการสืบค้น Book Library
 การเพิ่มความสามารถของช่องสืบค้นของ Joomla ให้สืบค้น
รายการหนังสือใน Book Library จะต้องติดตั้ง Plugin เพิ่ม
ชื่อ plugin_booklibrary_search_2010_01_27.zip
 Extensions, Install/Uninstall

135. เพิ่มความสามารถการสืบค้น Book Library
 Extension ประเภท Plugin เมื่อติดตั้งแล้ว
จะต้องไปเปิดใช้งาน (Enable) ด้วยคาสั่ง
 Extensions, Plugin Manager
 เลื่อนหา Plugin ที่ติดตั้ง แล้วคลิกปุ่ม
กากบาทสีแดง (Disable) ให้เปลี่ยนเป็น
ปุ่มเครื่องหมายถูกสีเขียว (Enable)

136. Joomgallery
 Extension ที่ทางานกับ Image Metadata ได้
อย่างสมบูรณ์ทั้งในกลุ่ม
EXIF
IPTC
 สวทช. ได้ปรับโปรแกรมให้สนับสนุนการใช้งาน
Image Metadata ภาษาไทย

137. Dublin core
• Extension เพื่อให้รายการบรรณานุกรมบทความ
อัตโนมัติ ทางานร่วมกับ Reference Manager
เช่น Zotero

138. DocMan – Document Manager
• Extension จัดการเอกสารเพื่อการดาวน์โหลด

139. การแก้ไข Source Code ด้วย NotePad++
 NotePad++ Text Editor

141. ฟอนต์ภาษาไทยกับเว็บฟอนต์ภาษาไทยกับเว็บ
HTML
<font face=“Tahoma, MS Sans Serif, Thonburi”>…</font>
CSS
font-family: Tahoma, “MS Sans Serif”, Thonburi;
เอกสารเว็บของท่าน
กาหนดฟอนต์ใด

142. ตัวอักษรแตกเมื่อขยายขนาดฟอนต์

143. แหล่งข้อมูลเพิ่มเติมแหล่งข้อมูลเพิ่มเติม
 http://stks.or.th/wiki
 http://stks.or.th/blog
 http://stks.or.th/
 http://slideshare.net/boonlert