การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop

1. การบริหารจัดการ
ระบบสารสนเทศบนเว็บด ้วย OSS
– Joomla Workshop
ศตพล ยศกรกุล
ฝ่ ายบริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี
สานักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ
http://stks.or.th, satapon@nstda.or.th
http://facebook.com/firstsatapon

2. เนื้อหา
• เทคโนโลยีเว็บไซต์
• OSS & Freeware
• รู้จักกับ Joomla
• การติดตั้ง Joomla บนเครื่องจาลอง
• จัดการกับหน้าเว็บไซต์เบื้องต ้น
• จัดการสมาชิก
• จัดการเนื้อหาเว็บ
• Media Manager
• การทางานกับ Extension ของ
ระบบ
• การติดตั้ง Extension
• การทางานกับ Extension –
ตัวอย่าง
• การทางานกับ Template
• การปรับแก ้ไข Template เบื้องต ้น
• ประเด็นน่ารู้เกี่ยวกับการพัฒนา
เว็บไซต์จริง

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
 ช่วยลดทรัพยากรต่างๆ ที่
เกี่ยวข ้องกับการพัฒนา/
จัดการเว็บ
 กาลังคน
 เวลา
 งบประมาณ
• ฟังก์ชันการทางานของ CMS
• เนื้อหา
• การจัดหมวดหมู่
• การสร ้างสรรค์
• การเผยแพร่
• การเก็บรักษาเอกสาร
• สมาชิก
• ส่วนเสริมการทางาน

5. โปรแกรมต่างๆ ในกลุ่ม CMS
 Joomla
 PHP-Nuke
 MyPHPNuke
 Mambo
 MD-Pro
 XOOPs
 OpenCMS
 Plone
 JBoss
 Drupal
คุณเลือกใช ้เครื่องมือใด
เพราะเหตุใด ????

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. เครื่องมือพัฒนาเว็บไซต์ในกลุ่ม
OSS & Freeware
OSS เปิดเผยต ้นฉบับโปรแกรม
มีเสรีภาพในการปรับแก ้ไข
เผยแพร่ และมีแบบฟรีให ้
เลือกใช ้
OS - Linux
CMS - Joomla, Drupal
Graphic Editor - Gimp
PDF – PDFCreator
FTP – WinSCP
Office Suites – OpenOffice.org
Freeware ซอฟต์แวร์ที่ให ้ใช ้ได ้ฟรี
ภายใต ้เงื่อนไขที่ผู้พัฒนา
กาหนด
Graphic Editor – XnView
Text Editor – NotePad++

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

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. ฝึกปฏิบัติ Joomla โดยแปลง
พีซีธรรมดาเป็น Web Server
AppServ คือคาตอบ
Open Source Software
ง่ายในการติดตั้ง
ทางานได ้กับ PC และ OS ทุกระบบ

18. ติดตั้ง AppServ

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

20. เลือกโปรแกรมย่อยที่ต ้องติดตั้ง

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

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

23. ตัวอย่างหน้าเว็บที่ไม่ได ้ใส่ใจเกี่ยวกับ
Character Set

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

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

26. ปรับแต่ง 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
 การปรับแก ้ไขจะต ้องระมัดระวังเป็นพิเศษ
 บันทึกไฟล์ ปิดไฟล์

27. ปรับแต่ง 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

28. เตรียมการก่อนติดตั้ง
 Download ต ้นฉบับโปรแกรมจาก Joomla.org
 Unzip ให ้อยู่ในรูปแบบโฟลเดอร์
 Copy โฟลเดอร์โปรแกรมต ้นฉบับ Joomla ไปไว ้ใน
c:appservwww
 เปลี่ยนชื่อโฟลเดอร์ให ้ตรงกับงานที่ต ้องการนาเสนอ
 ใช ้ภาษาอังกฤษ ตัวพิมพ์เล็ก ห ้ามเว ้นวรรคและ
เครื่องหมายพิเศษ ยกเว ้น –
 เป็นคาที่สื่อความหมายชัดเจน ผู้ใช ้จาได ้ง่าย เข ้าถึงง่าย

29. Unzip ไฟล์ต ้นฉบับ
Joomla
Copy ทั้งโฟลเดอร์มาที่
c:appservwwww

30. ติดตั้งโปรแกรม Joomla
เปิดเว็บเบราว์เซอร์
พิมพ์คาสั่ง
 http://127.0.0.1/ชื่อโฟลเดอร์
 http://localhost/ชื่อโฟลเดอร์

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

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

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

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

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

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

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

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

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

40. ชื่อเว็บไซต์ (Site Title)
IS KKU: กลุ่มวิชาการจัดการสารสนเทศและการ
สื่อสาร มหาวิทยาลัยขอนแก่น

41. คาอธิบายเว็บ
IS KKU: กลุ่มวิชาการจัดการสารสนเทศและ
การสื่อสาร คณะมนุษยศาสตร์และสังคมศาสตร์
มหาวิทยาลัยขอนแก่น

42. คาสาคัญ
IS, KKU, กลุ่มวิชาการจัดการสารสนเทศและการ
สื่อสาร ,คณะมนุษยศาสตร์และสังคมศาสตร์,
มหาวิทยาลัยขอนแก่น, วิทยานิพนธ์, งานวิจัย

43. ยืนยันอีเมลและรหัสผ่าน

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

45. การติดตั้งเสร็จสมบูรณ์
ลบโฟลเดอร์ชื่อ
Installation ออกจำกระบบ

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

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

48. ส่วนประกอบหน้าเว็บ (คร่าวๆ)
Header
Module
Content

49. การเข ้าสู่ระบบจัดการเว็บไซต์
http://127.0.0.1/ชื่อโฟลเดอร์/administrator

50. จอภาพส่วนควบคุมระบบ Admin
Control Panel เข้าถึงได้โดยเลือกคาสั่ง
Site, Control Panel

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

52. ปรับ Metadata Settings

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

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

55. <title>&#9675; BOI : The Board of Investment of Thailand</title>
<meta name="description" content="The Thai Board of Investment (BOI) - your
investment and business information source for Thailand.">
<meta name="keywords" content="investment, Thailand, Thai BOI, Board of
Investment of Thailand, information, investor, statistics, Thai government">

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

58. บันทึกและตรวจสอบการแสดงผล
• โปรแกรมจะแสดงผลเฉพาะ Site Name ในส่วน
Title bar ของเว็บเบราว์เซอร์
• Meta Description & Keyword จะเป็นข ้อมูลส่ง
ให ้ Search Engine
1
2

59. การปรับแต่งค่า Global Config อื่นๆ
• Site, Global Configuration
• System
• Server
• Permission

60. ปรับแต่งระบบเครื่องแม่ข่าย
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

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

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

63. จัดการสมาชิกด ้วย User Manager
• Add New User
• Save

64. กลุ่มของ User ใน Joomla
1. กลุ่มผู้ชมเว็บ (Front-end User)
1.1 กลุ่มผู้ชมเว็บทั่วไป ที่ไม่ได ้เป็นสมาชิก
1.2 กลุ่มผู้ชมเว็บที่เป็นสมาชิก แบ่งได ้เป็น 4 กลุ่ม
ย่อย
2. กลุ่มผู้ดูแลเว็บไซต์ (Back-end User)

65. กลุ่มผู้ชมเว็บที่เป็นสมาชิก แบ่งได ้
เป็น 4 กลุ่มย่อย
1. Registered User : สามารถ login เข ้าเว็บไซต์ และดู
ข ้อมูลต่างๆ ได ้ตามที่ผู้ดูแลเว็บกาหนดสิทธิ์ไว ้เท่านั้น
2. Author : ดูข ้อมูล และสร ้างบทความได ้ แต่บทความนั้น
ต ้องได ้รับการอนุมัติจากสมาชิกกลุ่ม Publisher ก่อนแสดงใน
เว็บไซต์
3. Editor : ดูข ้อมูล สร ้างบทความได ้และยังแก ้ไขบทความ
ของผู้อื่นได ้ด ้วย แต่หากเป็นบทความใหม่ ต ้องได ้รับการ
อนุมัติจากกล่ม Publisher ก่อน
4. Publisher : ดูข ้อมูล สร ้างบทความได ้แก ้ไขบทความ
ของผู้อื่นได ้และมีเป็นผู้ตัดสินใจอนุมัติว่าจะให ้บทความของ
สมาชิกกลุ่ม Auther และ Editor แสดงในเว็บไซต์หรือไม่

66. กลุ่มผู้ดูแลเว็บไซต์ (Back-end User)
ผู้ดูแลเว็บ แบ่งได ้เป็น 3 กลุ่มย่อย
1. Manager : สามารถจัดการหมวดหมู่ของเนื้อหา
(Section,Category,Article) และสร ้างหรือแก ้ไขเมนูต่างๆ
ได ้ แต่ไม่มีสิทธิ์สร ้าง user
2. Administrator : สามารถจัดการเนื้อหา, แก ้ไขสิทธิ์การใช ้
งานของ User กลุ่ม Manager และ ผู้ชมที่เป็นสมาชิกได ้,
install|uninstall component ต่างๆ แต่ไม่สามารถแก ้ไขค่า
ใน Global Configuration, ไม่สามารถเปลี่ยนแปลง
template และไม่สามารถใช ้งานระบบ Mass Mail ได ้
3. Super Administrator : สามารถทาได ้ทุกอย่าง

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

68. Module ต่างๆ

69. ตัวอย่างการแสดงผล Module
ส่วนแสดงเนื้อหำหลักของเว็บ
Module ต่ำงๆ

70. รู้จัก Position Name
• Module จะถูกกาหนดการแสดงผลด ้วย Position Name
โดย Position Name จะมีชื่อเรียกและตาแหน่งแตกต่างกัน
ไปตาม Template ที่เลือกใช ้งาน

71. template position preview
Administrator > Extensions > Template
Manager > Options > Global Configuration
for Templates > Preview

72. template position preview
พิมพ์ ?tp=1 ต่อจำก url เว็บไซต์
http://www.youtsite.com/?tp=1
http://127.0.0.1/xxx/?tp=1

74. เปลี่ยนชื่อเว็บไซต์ที่ Template
Extensions > Template manager > Beez2 – Default

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

76. Search Module ณ ตาแหน่ง Position-0
• คลิกปุ่ ม New
• คลิกรายการ Search

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

78. Search Module ณ ตาแหน่ง Position-0

79. ปรับแต่ง Search Module
Box Width ความกว ้างของช่องสืบค ้น
Text ข ้อความที่ต ้องการให ้ปรากฏในช่อง
สืบค ้น
Search button แสดงปุ่ มคลิกเพื่อสืบค ้น
หรือไม่
Button Position ตาแหน่งที่ต ้องการให ้แสดง
ปุ่ มสืบค ้น
Search button as image ต ้องการแสดงปุ่ ม
สืบค ้นเป็นรูปภาพหรือไม่
Button Text ข ้อความกากับปุ่ มสืบค ้น

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

81. แบนเนอร์ลิงค์แบบ
Custom HTML Module
• Extensions, Module Manager, New, Custom HTML
• ป้อน/วางภาพ/คาสั่งใน Custom Output

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

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

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

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

86. Custom HTML Module

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

88. Login Module
• Login Module เป็นโมดูลที่ช่วยควบคุมการเข ้าสู่
ระบบโดยสมาชิกที่กาหนด
• Extension,
Module Manager,
New, Login,

89. Login Module
• Login Module จะเกี่ยวข ้องกับค่า
ระบบใน Global Configuration
ดังนี้

90. Login Module
• Login Module จะเกี่ยวข ้องกับค่า
ระบบใน Global Configuration
ดังนี้

91. Custom HTML Module เฉพาะสมาชิก
สร ้าง Custom HTML Module โดยเป็นข่าว
ประกาศเฉพาะสมาชิก ดังตัวอย่าง

92. ค่ากาหนดที่สาคัญของ
Custom Module เฉพาะสมาชิก
Access Level
ระดับการเข ้าถึง
• Public ทุกคน
• Registered
เฉพาะสมาชิก
• Special เฉพาะ
ผู้ดูแลระบบ

93. Custom HTML Module เฉพาะสมาชิก
• เมื่อ Preview ในสภาวะปกติ จะพบว่า Module นี้จะไม่
ปรากฏ
• เมื่อ Login เข ้าสู่ระบบจะปรากฏ Module ดังกล่าว ดังนี้

94. การจัดการสมาชิกด ้วย User Manager
• สร ้างสมาชิกใหม่
• บริหารจัดการสมาชิก
• จัดการได ้ด ้วยคาสั่ง User, User Manager

95. ประเภทสมาชิก
• Front-end สมาชิกที่มีสิทธิ์ Login จาก
หน้า Front-end
• Registered สมาชิกที่มีสิทธิ์เข ้าถึง
เนื้อหาที่กาหนดสิทธิ์เฉพาะสมาชิก
(Access Level = Registered) แต่ไม่
มีสิทธิ์สร ้าง/เผยแพร่เนื้อหาเข ้าระบบ
• Author สมาชิกที่มีสิทธิ์เขียนเนื้อหา
และแก ้ไขเนื้อหาของตนเองได ้(โดย
เนื้อหานั้นต ้องผ่านการอนุมัติมาแล ้ว)
• Editor สมาชิกที่มีสิทธิ์เขียนเนื้อหา
และแก ้ไขเนื้อหาทั้งของตนเองและ
ผู้อื่นได ้(โดยเนื้อหานั้นต ้องผ่านการ
อนุมัติมาแล ้ว)
• Publisher สมาชิกที่มีสิทธิ์ทาได ้ทั้ง
เขียน แก ้ไขและอนุมัติการแสดงผล
เนื้อหา
• Back-end สมาชิกที่มีสิทธิ์ Login ได ้
ทั้ง Front-end และ Back-end
• Manager สมาชิกที่มีสิทธิ์เหมือนกับ
Publisher แต่สามารถทางานผ่านหน้า
Administrator ได ้ทาให ้สามารถเพิ่ม/
ลบ Section/Category ของเนื้อหาได ้
• Administrator มีสิทธิ์เกือบเท่ากับ
Super Administrator ยกเว ้นการสร ้าง
สมาชิกที่เป็น Super Administrator
• Super Administrator สมาชิกที่มีสิทธิ์
เต็มระบบ

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

97. Module
Module
Module
Module
Module

98. เนื้อหา – กรณีตัวอย่าง
• Why Thailand
• Thailand's Advantages
• Reasons to invest here
• Infrastructure
• Human Resources
• Sectors of Opportunity
• About BOI
• Introducing the BOI
• Organization Chart
• BOI's Executives
Joomla
Section 1
Category
1
Category
2
Category
3
Article 1
Article 2
Article …
Section 2 Section 3

99. เนื้อหา – กรณี BOI
• Why Thailand
• Thailand's Advantages
• Reasons to invest here
• Infrastructure
• Human Resources
• Sectors of Opportunity
• About BOI
• Introducing the BOI
• Organization Chart
• BOI's Executives
BOI
Why
Thailand
Why
Thailand
Thailand’s
Advantages
Reasons to
invest here
…
About BOI
Introducing
to BOI
Organization
Chart
BOI's
Executives
News
News
News 1
News 2
News …

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

101. ขั้นตอนการสร ้างเนื้อหา
• สร ้างหมวดเนื้อหาระดับ Category
• Content, Category Manager
• สร ้างเมนูแสดงผลเนื้อหาระดับ Section หรือ Category
• Menus, Main Menu
• สร ้างเนื้อหา
• Content, Article Manager

102. Category Manager

103. สร ้างเมนูควบคุม Category

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

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

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

107. http://rssthai.com
http://news.thaipbs.or.th/rss

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

130. Article Parameter

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

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

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

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

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

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

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

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

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

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

141. ศึกษาและฝึกปฏิบัติ
Joomla Extensions
• http://extensions.joomla.org/

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

143. เทคนิคน่ารู้สาหรับ Web Master

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

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

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

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

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