Joomla
สร้างเว็บง่าย
และสนับสนุนการเข้าถึง
บุญเลิศ อรุณพิบูลย์
นักวิชาการ
ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี
สานักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ
http://stks.or.th, boonlert@nstda.or.th
http://facebook.com/boonlert.aroonpiboon
บุญเลิศ อรุณพิบูลย์
 2536 – 2551
 NECTEC
 เจ้าหน้าที่ระบบคอมพิวเตอร์
 วิทยากร ศูนย์ฝึกอบรม
คอมพิวเตอร์เนคเทค
 รักษาการหัวหน้างานสนับสนุน
ทางเทคนิค
 รักษาการหัวหน้างานวิชาการ
 รักษาการหัวหน้างานพัฒนาสื่อ
สาระดิจิทัล
 นักวิชาการ
 2551 – ปัจจุบัน
 STKS / NSTDA
 นักวิชาการ
 รักษาการหัวหน้างานพัฒนา
และบริการสื่อสาระดิจิทัล
เทคโนโลยีการพัฒนาเว็บไซต์
เผยแพร่
เนื้อหา
เพิ่มลูกเล่น
ระบบสมาชิก
ระบบสืบค้น
ระบบจัดการเนื้อหา
แบบฟอร์มต่างๆ
CMSHTML
* Edit Plus
HTML
* Generator
* Dreamweaver
* Front Page
JavaScript
HTML
JavaScript
PHP/ASP
Database
* MS Access
* MySQL
* Microsoft SQL
* Oracle
* PostgreSQL
* DB2
CSS
CMS
 Content Management System
ระบบบริหารจัดการเนื้อหาเว็บไซต์
 พัฒนาบนฐานของ Web Programming + Database
 ช่วยลดทรัพยากรต่างๆ ที่เกี่ยวข้องกับการพัฒนา/
จัดการเว็บ
กาลังคน
เวลา
งบประมาณ
โปรแกรมต่างๆ ในกลุ่ม CMS
 Joomla
 PHP-Nuke
 MyPHPNuke
 Mambo
 eNvolution
 MD-Pro
XOOPs
OpenCMS
Plone
JBoss
Drupal
http://www.cmsmatrix.org/
http://cmsmatrix.org
http://trends.google.com
 Joomla, mambo, wordpress, drupal,
phpnuke
CMS
 ถูกพัฒนาเพื่อใช้สร้างเว็บไซต์ที่ต้องการให้ความสาคัญกับ
“เนื้อหาเว็บ” โดยเฉพาะในกลุ่ม Dynamic content
 มีความสามารถเฉพาะด้าน
 ไม่ได้รองรับกับงานทุกงานอัตโนมัติ
 สามารถปรับเพิ่มเติมได้
 Extension
 พัฒนาเอง (ในกลุ่ม Open Source)
 แนวทางการเลือก CMS
 Infrastructure
 ความต้องการของผู้พัฒนา/ผู้ใช้/หน่วยงาน
 ต้องการการทางานในโหมด Online
HTML Editor & CMS
Web ServerComputer ผู้ใช้
โอนเอกสาร
รายครั้ง (FTP)
Web ServerComputer ผู้ใช้
ต้องทางาน
Online
ติดตั้งแล้ว
นาเข้า
ออนไลน์
HTML
Joomla คือหนึ่งทางเลือกของเว็บยุคใหม่
 เปิดเผย Source Code ---- Open Source Software
 ดาวน์โหลดใช้ได้ฟรี
 สนับสนุน Web Accessibility
 สนับสนุนการสืบค้น Search Engine Friendly,
Google Friendly
 Extension เสริมการทางานจานวนมาก
 Communities ที่ยังพร้อมสนับสนุนพัฒนาโปรแกรม
 สนับสนุนการทางานตามแนวทางเทคโนโลยีเว็บ 2.0
www.joomla.org/
เทคโนโลยี 2.0
 เทคโนโลยีตามแนวคิดของการพัฒนาเว็บไซต์ 2.0
(Web 2.0)
 ยุคใหม่ของการพัฒนาเว็บไซต์
 รูปแบบการพัฒนาเว็บไซต์ที่ให้ความสาคัญกับ “ผู้ใช้เว็บ” มากกว่า
“ผู้พัฒนา” หรือ “เจ้าของเว็บไซต์”
 แนวคิดการพัฒนาเว็บที่ให้ความสาคัญกับการปฏิสัมพันธ์การทางานร่วมกัน
การผสานความร่วมมือทั้งโครงสร้างพื้นฐาน ระบบ ซอฟต์แวร์ และเนื้อหา
เว็บ
 การปรับเว็บไซต์จากการให้ข้อมูลเพียงทางเดียว เป็นการให้บริการและ
ข้อมูลที่ “ผู้ใช้” เข้าถึงได้ง่ายและร่วมสร้าง แก้ไข
Joomla กับการประยุกต์ใช้งาน
 เว็บหน่วยงาน
 เว็บส่วนตัว
 เว็บประชาสัมพันธ์
 เว็บผลงาน
 เว็บการเรียนการสอน
E-Commerce
KM
Digital Collection
Library
Research
Joomla กับการประยุกต์ใช้งาน
 ไม่ใช่ CMS ที่เหมาะสมกับการออกแบบสร้างเว็บทุกความต้องการ
 สารวจความต้องการของท่าน
 นามาเปรียบเทียบกับ CMS อื่นๆ ด้วย http://www.cmsmatrix.org
 นา CMS ที่ได้มาดูความนิยมด้วย http://trends.google.com
 ทาไหมถึง “ดัง” ในช่วงนี้
 ง่าย เมื่อเทียบกับ CMS อื่นๆ
 รองรับ SEO
 มีเอกสารเผยแพร่เยอะ
 พูดปากต่อปาก
 มีกลุ่มผู้พัฒนาที่ยังทางานอยู่
 มีเครื่องมือให้เลือกใช้เฉพาะ Extension หลากหลาย ทั้งฟรีและ
ต้องจ่ายเงิน
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 ต่างๆ
ทุกคน ภายใต้ข้อกาหนดร่วมกัน
(มาตรฐานสื่อดิจิทัลต่างๆ)
ใช้จริง ทาอย่างไร
องค์กร
 เตรียม Server
 ติดตั้ง Linux
 ฐานข้อมูล MySQL
 โปรแกรมภาษา PHP
 สิทธิ์ในการเข้าถึง
Server
ส่วนตัว
 หน่วยงานเตรียมพื้นที่ให้
 สิทธิ์ในการเข้าถึง Server
 เช่าพื้นที่ ISP หรือ Data
Provider อื่นๆ
ซอฟต์แวร์แนะนาก่อนพัฒนาเว็บไซต์
 Firefox/IE
 AppServ/
Server2Go/
XAMPP
 Joomla
 NotePad++
 XnView
 Photoscape
 GIMP
 PDF Creator
 OpenOffice.org
 FileZilla, WinSCP
 Audacity
พีซีธรรมดาเป็น Web Server
AppServ/XAMPP/Server2Go คือคาตอบ
Open Source Software
ง่ายในการติดตั้ง
ทางานได้กับ PC และ OS ทุกระบบ
ติดตั้ง AppServ
C:AppServ
ไดร์ฟและโฟลเดอร์ที่ควรจา
Server Name :
ชื่อ Server หรือ
IP-Address กรณีที่เป็น
เว็บจาลองให้ระบุเป็น
localhost
Administrator's Email Address:
อีเมล์ของผู้ดูแลระบบ
Apache HTTP Port:
เลขที่พอร์ทสื่อสารของ Apache
ปกติคือ พอร์ท 80
ข้อมูล Apache
root password รหัสผ่าน
(ต้องจาให้ได้ด้วย)‫‏‬
Character set
กรณีที่ใช้ภาษาไทย
ควรระบุเป็น
UTF-8 Unicode
คลิกเลือกรายการ
Enable InnoDB
ค่าควบคุมสาหรับฐานข้อมูล MySQL
ข้อแนะนาการสร้างรหัสผ่าน
 กาหนดเกณฑ์การสร้างรหัสผ่านให้ตนเอง
 ให้ความสาคัญกับการสร้างรหัสผ่าน
 เช่น กาหนดอักขระพิเศษให้สระ ปิดท้ายด้วย #
 A $
 E +
 I ^
 O @
 U !
kampaengsaen
k$mp$+ngs$+n#
เอกสารเว็บ/Server/DBs ของท่าน
กาหนด Encoding หรือไม่
หากกาหนดระบุเป็นอะไร
Thai Encoding
UTF-8, TIS-620, Windows-874
<meta http-equiv=“content-type”
content=“text/html; charset=………..”>
ติดตั้ง AppServ สาเร็จ
ตรวจสอบ AppServ
http://127.0.0.1 หรือ http://localhost
ปรับแต่ง 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
 การปรับแก้ไขจะต้องระมัดระวังเป็นพิเศษ
 บันทึกไฟล์ ปิดไฟล์
ปรับแต่ง 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
Server2Go
 ซอฟต์แวร์จาลองเครื่องแม่ข่ายเว็บแบบพกพา
 Apache
 PHP
 MySQL
 PHPMyAdmin
 Perl
 ไม่ต้องเสียเวลาติดตั้ง
 ดาวน์โหลด แล้ว unzip ก็ใช้งานได้ทันที
 คัดลอก (Copy) ระบบที่พัฒนาใส่ Thumb Drive & CD-ROM ไป
ใช้งานที่ใดก็ได้
http://www.server2go-web.de
การเรียกใช้งาน Server2Go
ดับเบิลคลิกไอคอน
Serve2Go.exe
รอสักครู่ โปรแกรมจะเปิด
IE Web Browser
ปรับแต่ง Config ของ Server – Server2Go
 ไฟล์ PHP.ini และไฟล์ httpd.conf อยู่ที่
server2goserverconfig_tpl
 เปิดไฟล์ pms_config.ini แล้วแก้ไขรายการ
 LocalMirror เป็น 0
 การปรับแก้ไขจะต้องระมัดระวังเป็นพิเศษ
 บันทึกไฟล์ ปิดไฟล์
 ปิด Server2Go
 เข้าสู่ระบบใหม่
เตรียมโฟลเดอร์โปรแกรม
 Download ต้นฉบับโปรแกรมจาก Joomla.org
 Unzip ให้อยู่ในรูปแบบโฟลเดอร์
 Copy โฟลเดอร์โปรแกรมต้นฉบับ Joomla ไปไว้
ใน
c:appservwww กรณี AppServ
server2gohtdocs กรณี Server2Go
 เปลี่ยนชื่อโฟลเดอร์ตามเหมาะสม
ติดตั้งโปรแกรม Joomla
 Server2Go
ดับเบิลคลิกโปรแกรม Server2Go.exe
 กรณีที่มีโฟลเดอร์ Joomla ให้พิมพ์
 http://127.0.0.1:4001/ชื่อโฟลเดอร์
 AppServ
เปิดเว็บเบราว์เซอร์
พิมพ์คาสั่ง
 http://127.0.0.1/ชื่อโฟลเดอร์
จอภาพเริ่มต้นติดตั้ง Joomla เลือกภาษา
1
ตรวจสอบการทางานกับไฟล์ประกอบการติดตั้ง
1
ยอมรับลิขสิทธิ์โปรแกรมและเงื่อนไขการใช้งาน
1
ป้อนข้อมูลฐานข้อมูล MySQL
ข้อมูลฐานข้อมูล MySQL
localhost
root
ป้อนข้อมูลระบบ FTP
1
ข้อมูลเกี่ยวกับระบบเว็บไซต์
ชื่อเว็บไซต์ (Site Title)
 ภาษาอังกฤษ สามารถตามด้วยข้อความภาษาไทย
 มีความยาวไม่เกิน 64 ตัวอักษร
 มีความหมายชัดเจน
 ประกอบด้วยคาที่ผู้ใช้คุ้นเคย และ/หรือนึกถึงใน
ลักษณะคาค้น (Keyword) ได้ง่าย
ข้อมูลตัวอย่าง
สามารถคลิกปุ่ม “ติดตั้งข้อมูลตัวอย่าง”
เพื่อให้ Joomla ติดตั้งข้อมูลตัวอย่าง
เพื่อใช้ทดสอบการออกแบบพัฒนาเว็บไซต์
การติดตั้งเสร็จสมบูรณ์
ลบโฟลเดอร์ Installation
เข้าไปในโฟลเดอร์ต้นฉบับโปรแกรม
Joomla เพื่อลบโฟลเดอร์ย่อยชื่อ
Installation ออกจากระบบ
เรียกดูเว็บไซต์
คลิกปุ่ม
ดูหน้าเว็บไซต์
หน้าเว็บที่ไม่มีข้อมูลตัวอย่าง
หน้าเว็บไซต์พร้อมข้อมูลตัวอย่าง
การเข้าสู่ระบบจัดการเว็บไซต์
http://127.0.0.1/joomla/administrator
http://127.0.0.1:4001/joomla/administrator
จอภาพส่วนควบคุมระบบ Admin
แก้ไขข้อมูลผู้ดูแลระบบ
Admin Account
• Site, User Manager
• เปลี่ยนบัญชี Admin เป็นชื่ออื่น, เปลี่ยนรหัสผ่าน, ป้อนข้อมูล
ประกอบ
ข้อมูลสาคัญที่ต้องปรับแก้ไข
• Name
• Username
• Time Zone
ปรับเว็บให้สนับสนุน SEO
Site, Global Configuration, Site
ข้อมูลสาคัญที่ต้องปรับแก้ไข
• Site Name
• Global Site Meta Description
• Global Site Meta Keyword
• Search Engine Friendly URLs
1
2
3
Site Name & Meta Tag
• Site Name – ไม่เกิน 64 ตัวอักษร ภาษาอังกฤษนา มีความหมาย
ชัดเจน สอดคล้องกับเนื้อหาในเว็บ ผู้ใช้นึกถึงได้ง่าย
• Description – ไม่เกิน 250 ตัวอักษร เนื้อหาอธิบายเกี่ยวกับเว็บ
• Keyword – คาค้นที่ผู้ใช้นึกถึงได้ง่าย ครอบคลุมเนื้อหาของเว็บ
ภาษาอังกฤษนา ปรับแต่งสม่าเสมอ ไม่เกิน 500 คา
http://www.submitexpress.com/analyzer
ตัวช่วยตรวจสอบ Sitename, Meta Tag
http://truehits.net
ตัวช่วยศึกษาพฤติกรรมผู้ใช้
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
ดูหน้าเว็บที่ปรับแต่งแล้ว
1
2
1
2 ปรับแต่งระบบ Joomla
Site, Global Configuration, System
• Allow User Registration : ควรปิด
ระบบ
• Legal Extensions (File Types) :
เพิ่ม/ลดฟอร์แมตไฟล์ที่อนุญาตให้
นาเข้าระบบ
• Maximum Size (in bytes) : ขนาด
ไฟล์ที่อนุญาตให้นาเข้า
ปรับแต่งระบบเครื่องแม่ข่าย
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
ปรับแต่งหน้าเว็บด้วย Module
• Module เป็นโปรแกรมเสริม (Extension) ประเภท
หนึ่งของ Joomla ทาหน้าที่ควบคุมการแสดงผลผ่าน
Front-end
• Joomla มี Module ที่พร้อมใช้งาน แต่ยังไม่เปิด
แสดงผล และอนุญาตให้ติดตั้ง Module เพิ่มเติมได้
• Module จะถูกแสดงผลรอบๆ พื้นที่แสดงเนื้อหาเว็บ
• การแสดงผล Module ควบคุมด้วยรูปแบบเว็บ
(Template) ผ่านชื่อตาแหน่ง (Position name)
ส่วนประกอบของ Joomla
ส่วนแสดงเนื้อหาหลักของเว็บ
Module ต่างๆ
Module ต่างๆ
Position Name ของ Template พื้นฐาน
Search Module ณ ตาแหน่ง Right
• ตัวอย่าง ต้องการเปิดใช้งาน Search Module เพื่อเป็น
ช่องทางให้ผู้ใช้ป้อนคาค้น สาหรับค้นเนื้อหาต่างๆ ภายใน
เว็บ และแสดงผล ณ ตาแหน่ง Right
• Extensions, Module Manager
Search Module ณ ตาแหน่ง Right
• คลิกปุ่ม New
• คลิกรายการ Search
Search Module ณ ตาแหน่ง Right
1) ป้อนชื่อ Module
2) ตั้งค่าการแสดงผล
3) เลือกตาแหน่ง
Search Module ณ ตาแหน่ง Right
Search Module ณ ตาแหน่ง Right
สร้างเนื้อหาเว็บไซต์
• วิเคราะห์เนื้อหาที่ต้องการนาเสนอ
• จัดเตรียม/ออกแบบเนื้อหาให้เหมาะสมกับการนาเสนอผ่านเว็บ
• เลือกรูปแบบการนาเสนอเนื้อหา
• นาเสนอเนื้อหาในรูปแบบ Module
• นาเสนอเนื้อหาผ่าน Component + Module
• นาเสนอเนื้อหาในรูปแบบเมนู
• Component
• Article Manager
• Static Content
• Dynamic Content
• นาเสนอเนื้อหาผ่าน Front Page
ข่าวสั้นแบบ Custom HTML Module
• Custom HTML Module เป็นโมดูลที่อนุญาตให้
ผู้พัฒนาเว็บสามารถนาเนื้อหาใดๆ มาแสดงผล
ได้อิสระ โดยใช้ความสามารถของภาษา HTML
• ข่าวประกาศ
• การแลกเปลี่ยน Banner
ข่าวสั้นแบบ
Custom HTML Module
• Extensions, Module Manager,
New, Custom HTML
• ป้อน/วางภาพ/คาสั่งใน Custom
Output
การนาเข้ารูปภาพ
• รูปภาพจะต้องมีฟอร์แมตเป็น
.jpg, .gif, .png
• กาหนดขนาดอย่างเหมาะสม
ก่อนนาเข้าระบบ
• คลิกเมาส์ ณ ตาแหน่งที่
ต้องการวางภาพ
• คลิกปุ่ม Image 1
การนาเข้ารูปภาพ
• คลิกปุ่ม Browse เพื่อเลือกภาพแล้วคลิกปุ่ม Start Upload
2
การนาเข้ารูปภาพ
• คลิกเลือกภาพ ป้อนคาอธิบายภาพ และคลิกปุ่ม Insert
3
4
5
• คลิกเลือกภาพหรือเลือกข้อความ คลิกปุ่ม Insert/edit link
• ป้อน URL และเลือกรูปแบบ Target คลิกปุ่ม Insert
การสร้างจุดเชื่อม (Link)
1 3
2
ปรับแก้ไข Module
• Extension, Module Manager
ดึงข่าวอัตโนมัติด้วย Feed Display Module
Feed URL
• URL ที่ถูกออกแบบมาเพื่อให้สามารถดึงข้อมูลในรูปแบบ XML - RSS
ไปแสดงผลผ่านตัวอ่าน RSS Reader ได้อัตโนมัติ
1
http://rssthai.com
สร้างแบบสอบถามด้วย Poll Component
• Component เป็น Extension ที่ออกแบบมาเพื่อ
บริหารจัดการงานใดๆ อันเป็นการเพิ่มความสามารถ
ของ Joomla
• Component มักจะเป็นส่วนในการสร้างเนื้อหา
การจะใช้งานหรือแสดงผลจะถูกควบคุมด้วย Menu
หรือไม่ก็ Extension ที่เป็น Module หรือ Plug-ins
• ตัวอย่าง Component ที่มาพร้อมกับ Joomla คือ
Poll ช่วยออกแบบแบบสอบถามอย่างง่าย
สร้างแบบสอบถามด้วย Poll Component
• Components, Polls, New
สร้างแบบสอบถามด้วย Poll Component
1) ป้อนคาถามใน Title และชื่อกากับ
ที่เป็นภาษาอังกฤษใน Alias
2) เลือก Published เป็น Yes เพื่อ
เปิดใช้งาน Poll
3) ป้อนตัวเลือก
4) คลิกปุ่ม Save เพื่อบันทึก
สร้างแบบสอบถามด้วย Poll Component
แสดงผล Poll ด้วย Poll Module
• Extensions, Module Manager, New, Poll
แสดงผล Poll ด้วย Poll Module
แสดงผล Poll ด้วย Poll Module
คลังเว็บไซต์ด้วย Web Link Components
• Components, Web Links
คลังเว็บไซต์
สถาบันการศึกษา
มหาวิทยาลัย
เกษตรฯ
จุฬาลงกรณ์ฯ
มหาวิทยาลัย
ธรรมศาสตร์
สานักข่าว
ช่อง 3
ช่อง 5
…
ห้องสมุด
มก.บางเขน
มก.กาแพงแสน
…
คลังเว็บไซต์ด้วย Web Link Components
• Components, Web Links, Categories, New
คลังเว็บไซต์ด้วย Web Link Components
• Components, Web Links, Categories, New
คลังเว็บไซต์ด้วย Web Link Components
• Components, Web Links, Links, New
คลังเว็บไซต์ด้วย Web Link Components
• Components, Web Links, Links, New
คลังเว็บไซต์ด้วย Web Link Components
• Menus, Main Menu, New, Web Links, Web Link
Category List Layout
คลังเว็บไซต์ด้วย Web Link Components
คลังเว็บไซต์ด้วย Web Link Components
ปรับแต่งการแสดงผล Web Links
ติดต่อสอบถาม – Contact Component
• Components, Contacts, Categories, New
• สร้างหมวดการติดต่อ
ติดต่อสอบถาม – Contact Component
• Components, Contacts, Contacts, New
• สร้างรายการติดต่อ
ติดต่อสอบถาม – Contact Component
• Components, Contacts, Contacts, New
• สร้างรายการติดต่อ
สร้างเมนูเรียกใช้ฟอร์มติดต่อสอบถาม
• Menus, Main Menu, New, Contacts, Standard Contact
Layout
การสร้างเนื้อหาบทความ Static
• สร้างเนื้อหาด้วย Content, Article Manager
• เลือก Section/Category เป็น Uncategorized
• สร้างเมนูแสดงผลเนื้อหาด้วย Menus, Main
Menu, New, Article, Article Layout
Article Parameter
การแสดงผลเนื้อหา
การสร้างเมนูควบคุมบทความ
บทความแบบ Dynamic
• สร้างหมวดเนื้อหาระดับ Section
• Content, Section Manager
• สร้างหมวดเนื้อหาระดับ Category
• Content, Category Manager
• สร้างเมนูแสดงผลเนื้อหาระดับ Section หรือ
Category
• Menus, Main Menu
Section/Category/Article
Website
ข่าว
ข่าว
ประชาสัมพันธ์
งานวันครู
สัมมนา
วิชาการ
ข่าวจัดซื้อจัด
จ้าง
จัดซื้อ
คอมพิวเตอร์
จัดซื้อ Server
สาระความรู้
วิทยาศาสตร์การสอน
Section Manager
Category Manager
สร้างเมนูควบคุม Section/Category
การแสดงผลเนื้อหาหลัก
 เนื้อหาหลักแสดงผลผ่าน Front-end
 เนื้อหาล่าสุดแสดงแบบเต็มคอลัมน์เดียว
 เนื้อหาอื่นๆ แสดง 2 คอลัมน์
 สามารถกาหนดเฉพาะส่วนต้น
(Intro) แล้วคลิกดูเนื้อหาที่เหลือ
 แต่ละเนื้อหามีปุ่มควบคุมเพิ่ม
อย่างน้อย 3 ปุ่ม
 ปุ่มสร้างเอกสาร PDF
 ปุ่มส่งอีเมลแนะนาเนื้อหา
 ปุ่มสั่งพิมพ์เนื้อหา
 มีส่วนรายละเอียดการสร้าง/แก้ไข
Joomla Extension
 Component
 โปรแกรมที่ออกแบบมาเพื่อเพิ่มความสามารถของ Joomla ให้
ทางานตามวัตถุประสงค์ เช่น JoomGallery สาหรับจัดการคลังภาพ
 Module
 โปรแกรมย่อยที่ออกแบบมาเพื่อควบคุมการแสดงผล หรือทางานที่
มีลักษณะไม่ใหญ่มากนัก เช่น โปรแกรมที่ออกแบบเพื่อแสดงผล
ภาพของ JoomGallery ในลักษณะสไลด์
 Plugin
 โปรแกรมขนาดเล็กสุดที่ออกแบบเพื่อควบคุมการทางาน หรือช่วย
ให้งานสะดวกขึ้น เช่น JoomGallery Search ที่ทาให้สามารถสืบค้น
ภาพได้
การดาวน์โหลด Extension
• เลือกและดาวน์โหลด Extension จากเว็บไซต์
http://www.joomla.org
• ไฟล์ที่ได้มักจะมีส่วนขยายเป็น .zip
• ไม่ต้อง unzip (ยกเว้นบาง extension ที่มีการระบุไว้
เฉพาะให้ unzip ก่อน)
• มักจะคาบ่งชี้เฉพาะ เช่น
• com_ แสดงว่าเป็น Components
• mod_ แสดงว่าเป็น Module
• plg_ แสดงว่าเป็น Plugins
การติดตั้ง Extension
 เข้าสู่เว็บไซต์ Joomla ในโหมด Administrator
 http://127.0.0.1/administrator
 http://doname/administrator
 เลือกเมนูคาสั่ง Extension, Install/Uninstall
การติดตั้ง Extension
• คลิกปุ่ม Browse เพื่อเลือกไฟล์ Extension แล้ว
คลิกเลือก Upload & Install
การติดตั้ง Extension
 ผลการติดตั้ง Extension ที่สมบูรณ์
ตรวจสอบการติดตั้ง Extension
 Extension ที่ติดตั้งแล้ว สามารถตรวจสอบได้ 3 จุด
ตามประเภทของ Extension คือ
 เมนู Components
 เมนู Module Manager
 เมนู Plugin Manager
การถอนการติดตั้ง Extension
 เลือกเมนูคาสั่ง Extension, Install/Install
 คลิกเลือกแท็บประเภท Extension เช่น Components
แล้วเลือก Extension คลิกปุ่ม Uninstall
ห้องสมุดออนไลน์ด้วย Book Library
 ดาวน์โหลด Extension Book Library
 com_booklibrary_BASIC_1_5_3_2010_07_05.zip
 ติดตั้ง Book Library Component
การใช้งาน Book Library
 เลือกเมนูคาสั่ง Components, Book Library
สร้างเมนู Book Library
 เลือกเมนูคาสั่ง Menus, Main Menu
สร้างเมนู Book Library
 คลิกปุ่ม New เพื่อสร้างรายการเมนูใหม่
 คลิกเลือกประเภทรายการ
เมนูเป็น Book Library
สร้างเมนู Book Library
กาหนดชื่อรายการเมนูคาสั่ง
ที่รายการ Title
(หากกาหนดเว็บเป็น SEO
ต้องระบุ Alias
ให้ถูกต้องด้วย)
คลิกปุ่ม Save
สร้างเมนู Book Library
ผลจากหน้าเว็บไซต์
ผลจากหน้าเว็บไซต์
ผลจากหน้าเว็บไซต์
ควบคุมการแสดงผลหน้าเว็บ
 ทางานในโหมด Administrator
 เลือกคาสั่ง Components, Book Library, Setting Frontend
การเพิ่มหมวดหนังสือ
 เลือกคาสั่ง Components, Book Library, Categories
 คลิกปุ่ม New เพื่อสร้างหมวดใหม่
การเพิ่มหมวดหนังสือ
การเพิ่มหนังสือ
 เลือกคาสั่ง Components, Book Library, Books
 คลิกปุ่ม New เพื่อสร้างหนังสือใหม่
การเพิ่มหนังสือ
เพิ่มความสามารถการสืบค้น Book Library
 การเพิ่มความสามารถของช่องสืบค้นของ Joomla ให้สืบค้น
รายการหนังสือใน Book Library จะต้องติดตั้ง Plugin เพิ่ม
ชื่อ plugin_booklibrary_search_2010_01_27.zip
 Extensions, Install/Uninstall
เพิ่มความสามารถการสืบค้น Book Library
 Extension ประเภท Plugin เมื่อติดตั้งแล้ว
จะต้องไปเปิดใช้งาน (Enable) ด้วยคาสั่ง
 Extensions, Plugin Manager
 เลื่อนหา Plugin ที่ติดตั้ง แล้วคลิกปุ่ม
กากบาทสีแดง (Disable) ให้เปลี่ยนเป็น
ปุ่มเครื่องหมายถูกสีเขียว (Enable)
Joomgallery
 Extension ที่ทางานกับ Image Metadata ได้
อย่างสมบูรณ์ทั้งในกลุ่ม
EXIF
IPTC
 สวทช. ได้ปรับโปรแกรมให้สนับสนุนการใช้งาน
Image Metadata ภาษาไทย
Dublin core
• Extension เพื่อให้รายการบรรณานุกรมบทความ
อัตโนมัติ ทางานร่วมกับ Reference Manager
เช่น Zotero
DocMan – Document Manager
• Extension จัดการเอกสารเพื่อการดาวน์โหลด
การแก้ไข Source Code ด้วย NotePad++
 NotePad++ Text Editor
ฟอนต์ภาษาไทยกับเว็บฟอนต์ภาษาไทยกับเว็บ
HTML
<font face=“Tahoma, MS Sans Serif, Thonburi”>…</font>
CSS
font-family: Tahoma, “MS Sans Serif”, Thonburi;
เอกสารเว็บของท่าน
กาหนดฟอนต์ใด
ตัวอักษรแตกเมื่อขยายขนาดฟอนต์
แหล่งข้อมูลเพิ่มเติมแหล่งข้อมูลเพิ่มเติม
 http://stks.or.th/wiki
 http://stks.or.th/blog
 http://stks.or.th/
 http://slideshare.net/boonlert

Joomla CMS