04.06.2015 Views

o_19muqrkb711vv13p7khcvia15j7a.pdf

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

คู่มือการติดตั้ง และการใช้งาน<br />

Joomla! 2.5<br />

ส านักเทคโนโลยีสารสนเทศและการสื่อสาร<br />

โทร. 0 2515 4181


สารบัญ<br />

หัวข้อ สไลด์ที่<br />

การสร้างเว็บไซต์ด้วย Joomla 1<br />

Joomla คืออะไร 2<br />

CMS คืออะไร 3<br />

การติดตั้ง Web Server จําลอง 11<br />

โครงสร้างของ Folder 21<br />

การสร้างฐานข้อมูลด้วย phpmyadmin 22<br />

ขั้นตอนการติดตั้งโปรแกรม joomla 24<br />

การเปิดใช้งานโปรแกรม joomla 32<br />

การเข้า-ออกระบบ ผู้ดูแลระบบ(admin) 33<br />

การติดตั้งภาษาไทยให้กับ joomla 35<br />

การปรับตั้งค่า Global Configuration(ตั้งค่าระบบหลัก) 39<br />

การจัดการและระดับการเข้าถึง(User Manager) 46<br />

การจัดการไฟล์มีเดีย 48<br />

ติดตั้งเครื่องมือช่วยเขียนเนื้อหา JCE Editer 54<br />

การสร้างเนื้อหา 57<br />

การสร้างหมวดหมู่(Category) สําหรับเก็บเนื้อหา 59<br />

เริ่มต้นสร้างเนื้อหา 62<br />

การลบเนื้อหา 69<br />

การแทรกรูปภาพในเนื้อหา 70<br />

การเขียนเนื้อหาเกริ่นนํา 71<br />

การสร้างลิงค์ดาวน์โหลดในบทความ 74<br />

การสร้างกลุ่มเมนู 76<br />

การสร้างเมนูเข้าสู่เนื้อหาเดียว 79<br />

การสร้างเมนูเข้าสู่หมวดหมู่(Category) 82<br />

การสร้างเมนูลิงค์ไปเว็บไซต์ภายนอก 85


หัวข้อ สไลด์ที่<br />

การตั้งค่าเทมเพลตให้เทมเพลตหลัก 87<br />

การเปลี่ยนการจัดเรียงบทความหน้าเว็บไซต์ 91<br />

การเปลี่ยนข้อความไตเติ้ลเพจ(Title page) 93<br />

Extensions คือ 95<br />

การติดตั้ง ส่วนเสริม(Extensions) ต่างๆ 96<br />

การถอนการติดตั้งโปรแกรมส่วนเสริมต่างๆ 97<br />

การปรับแต่งโมดูลทําความรู้จักกับโมดูล 98<br />

ตําแหน่งโมดูลในเทมเพลต 100<br />

การสร้างโมดูล 103<br />

การสร้างโมดูลแบบกําหนด HTML เอง 107<br />

การสร้างโมดูลแสดงสถิติการเข้าชมเว็บไซต์ 109<br />

การเปลี่ยนหัวเว็บไซต์ (Header) 113<br />

ภาคผนวก


การสร้างเว็บไซต์ด้วย<br />

1


Joomla คืออะไร?<br />

2<br />

Joomla คือระบบที่ช่ วยในการจัดการเนื้อหา<br />

(Content Management System : CMS) บนเว็บไซต์ เพื่อ<br />

ช่วยในการอ านวยความสะดวก ลดขั ้นตอน และความยุ ่งยาก<br />

ในการบริหารจัดการเว็บไซต์ โดยที่ ผู ้ใช้ ไม่จ าเป็ นต้องมี<br />

ความรู ้ ในด้านการเขียนโปรแกรม หรือออกแบบเว็บไซต์ ก็<br />

สามารถจัดท าเว็บไซต์ด้วยตัวเองได้


CMS คืออะไร?<br />

3<br />

Content Management System หรือ CMS คือ<br />

ระบบบริหารการจัดการเนื้อหา CMS ส่วนใหญ่ถูกน ามาใช้<br />

เรียกงานทางด้านเว็บไซต์จึงเรียกระบบนี้ว่าเป็ นระบบบริหาร<br />

จัดการเว็บไซต์


4<br />

CMS แบ่งออกเป็ น 2 ส่วน<br />

‣Frontend<br />

คือส่ วนทางด้านหน้าของเว็บไซต์ ประกอบด้วย<br />

Homepage Webpage และ Link ต่าง ๆ ผู ้ใช้งานทั่วไป และสมาชิก<br />

ของเว็บไซต์ทุกคนสามารถมองเห็น หรือเยี่ยมชมได้<br />

‣Backend คือส่วนที่ใช้ในการควบคุม Website มีเพียงคนบางกลุ ่ม<br />

เท่านั ้นที่สามารถเข้าใช้งานในส่วนนี้ได้ เช่น Admin และสมาชิกที่<br />

ได้รับอนุญาต (ทีมงานผู ้มีหน้าที่ เพิ่ม แก้ไข เปลี่ยนแปลงเว็บไซต์)


ประโยชน์ของ CMS<br />

5<br />

ควบคุมรูปแบบของเว็บไซต์ได้ดี (ฟอนต์ สไตล์<br />

อัปเดตเว็บไซต์ได้จากทุกๆ ที่<br />

ไม่ต้องมีความรู ้ภาษา HTML และ Script<br />

รองรับการท างานจากผู ้ใช้หลายคนได้พร้อมๆ กัน<br />

การจัดการเว็บไซต์เป็ นไปอย่างมีระบบ ง่ายต่อการดูแล<br />

ไม่เสียเวลาในการสร้างเว็บไซต์มาก<br />

สร้างและดูแลเว็บไซต์<br />

การจัดวางเลย์เอาต์)<br />

ช่วยลดก าลังคนและค่าใช้จ่ายในการ<br />

มีโปรแกรมเสริมให้เลือกน ามาประยุกต์ใช้งานกับเว็บไซต์นั ้นๆ


7<br />

ตัวอย่างของโปรแกรม CMS<br />

Joomla<br />

Mombo<br />

Drupal<br />

Word press<br />

phpBB


8<br />

ฟรี, ติดตั ้งง่าย<br />

ท าไมต้องเป็ น Joomla!<br />

ควบคุมหน้าตาเว็บด้วย Template<br />

สร้างและจัดการเนื้อหาได้ง่าย<br />

รองรับกับการท างานหลายๆ คนพร้อมๆ กันได้<br />

เสถียร ปลอดภัย update ได้สม ่าเสมอ<br />

ไม่ต้องยึดติดกับคอมพิวเตอร์หรือซอฟต์แวร์ใดๆ<br />

มีสังคมออนไลน์ที่มีข้อมูลช่วยเหลือจ านวนมาก<br />

มีผู ้พัฒนาภาษาไทยอย่างเป็ นทางการ<br />

สมบูรณ์ด้วยโปรแกรมเสริมที่หลากหลาย


9<br />

ความต้องการของระบบในการติดตั ้ง Joomla2.5<br />

Software Recommended Minimum More information<br />

PHP* 5.3 + 5.3.4+ http://www.php.net<br />

MySQL** 5.0.4 + 5.0.4+ http://www.mysql.com<br />

Apache***<br />

(with mod_mysql, mod_xml,<br />

and mod_zlib)<br />

2.x + 2.x+ http://www.apache.org<br />

Microsoft IIS**** 7 7 http://www.iis.net


้<br />

การติดตั ้ง Joomla! เพื่อใช้งาน<br />

1. การติดตั ้ง Joomla ใช้งานบนพื้นที่เว็บไซต์จริง<br />

การติดตั ้งแบบนี ้จะเหมาะสําหรับผู้ใช้ทั่วไปที่ไม่อยากเจอปัญหาที่ซับซ้อน ซึ ่งมีทั ้งข้อดีและข้อเสียดังนี<br />

ข้อดี<br />

1. ช่วยให้เราเห็นผลได้ทันที<br />

2. สามารถทดสอบและแก้ไขปัญหาได้ก่อนที่จะทํางานจริงทั ้งหมด ซึ ่งมักจะพบกับปัญหาเซิร์ฟเวอร์ไม่รองรับ<br />

ภาษาไทย หรือส่วนการทํางานบางส่วนใช้ภาษาไทยไม่ได้ ดังนี ้ เราสามารถให้ผู้ดูแลระบบของโฮสช่วยแก้ไขปัญหาให้เราได้<br />

ซึ ่งไม่ต้องมาเสียเวลาแก้ไข หรือปรับแก้งานทีหลังให้เสียเวลา<br />

ข้อเสีย<br />

1. การทํางานจะช้าเพราะต้องเชื่อมต่อผ่านอินเตอร์เน็ต ซึ ่งเหมาะกับอินเตอร์เน็ตความเร็วสูง<br />

2. ต้องใช้ค่าใช้จ่ายเริ่มต้นโครงการที่สูง เพราะต้องเช่าพื ้นที่ และติดตั ้งอินเตอร์เน็ตความเร็วสูง<br />

2. การติดตั ้ง Joomla ใช้งานบนพื้นที่เว็บไซต์จ าลอง หลังจากออกแบบเสร็จก็อัพโหลดขึ้นเว็บไซต์จริง<br />

ข้อดี<br />

1. ไม่เสียเวลาในการรอดูผลลัพธ์<br />

2. ไม่ต้องเสียค่าใช้จ่ายตอนเริ่มโครงการ โดยการเช่าพื ้นที่เว็บไซต์ทิ้งไว้ให้สินเปลือง และ<br />

ประหยัดค่าบริการอินเตอร์เน็ต ในการเพิ่มเนื ้อหาและปรับปรุงข้อมูลเว็บไซต์<br />

ข้อเสีย<br />

1. ต้องมีความรู้เกี่ยวกับเว็บเซิร์ฟเวอร์ และระบบฐานข้อมูล<br />

2. ต้องเสียเวลาในการแก้ไขปัญหาที่อาจเกิดขึ ้นในภายหลังจากระบบของเว็บไซต์เซิร์ฟเวอร์และ<br />

ฐานข้อมูลที่ไม่ตรงกับระบบที่เราจําลองไว้<br />

10


11<br />

การติดตั ้ง Web Server จ าลอง<br />

การติดตั ้ง AppServ 2.5.10<br />

AppServ รุ ่น 2.5.10<br />

‣Apache 2.2.8<br />

‣PHP 5.2.6<br />

‣MySQL 5.0.51b<br />

มีรายละเอียดดังนี้<br />

‣phpMyAdmin 2.10.3<br />

• สามารถ Download ตัวติดตั ้ง ได้ที่<br />

http://www.appservnetwork.com


ขั ้นตอนการติดตั ้ง Web Server จ าลอง<br />

1. ดับเบิลคลิ๊กappserv-win32-x.x.x.exe เพื่อติดตั ้ง AppServ บนเครื่องPC<br />

2. คลิ๊ก Next จะพบกับหน้าจอ ประกาศเรื่องลิขสิทธิ ์ ซึ ่งเป็ น ลิขสิทธิ ์ แบบ GNU/GPL License<br />

12


ขั ้นตอนการติดตั ้ง Web Server จ าลอง(ต่อ)<br />

3. I Agree เพื่อยอมรับลิขสิทธิ ์ แล้ว ก็จะเข้าสู ่หน้าเลือกโฟลเดอร์ และไดร์ฟ<br />

ที่จะติดตั ้ง ในที่นี ้เป็ น C:\AppServ<br />

13


14<br />

ขั ้นตอนการติดตั ้ง Web Server จ าลอง(ต่อ)<br />

4. คลิ๊กNext จะเข้าสู ่หน้าเลือก คอมโพเน้นที่จะติดตั ้ง ในที่นี ้คลิ๊กให้หมดทุกตัว


15<br />

ขั ้นตอนการติดตั ้ง Web Server จ าลอง(ต่อ)<br />

5. คลิ๊ก Next หน้า Server Information


16<br />

ขั ้นตอนการติดตั ้ง Web Server จ าลอง(ต่อ)<br />

Port 80<br />

พิมพ์ localhost<br />

ให้ใส่ email ของเราไป<br />

คลิ๊ก Next


17<br />

6. การตั ้งค่า MYSQL<br />

ขั ้นตอนการติดตั ้ง Web Server จ าลอง(ต่อ)<br />

ใส่ Password<br />

ยืนยันรหัส Password อีกครั ้ง<br />

เลือกเป็ น UTF-8<br />

คลิ๊ก Install


18<br />

ขั ้นตอนการติดตั ้ง Web Server จ าลอง(ต่อ)<br />

7. โปรแกรมกําลังทําการติดตั ้ง รอจนครบ 100% ในระหว่างนี ้หาก Windows มี<br />

การสอบถามเรื่องการ Block โปรแกรม ให้คลิก Unblock โปรแกรมจะถูก<br />

ติดตั ้งอย่างสมบูรณ์


19<br />

ขั ้นตอนการติดตั ้ง Web Server จ าลอง(ต่อ)<br />

8. เมื่อติดตั ้งจนครบ 100 % ระบบจะถามว่า จะเริ่มให้ Apache และ MySQL ทํางานหรือไม่<br />

คลิ๊ก Finish


20<br />

ขั ้นตอนการติดตั ้ง Web Server จ าลอง(ต่อ)<br />

9. เมื่อติดงเสร็จ ให้เปิ ด Internet Explorer หรือ Mozilla Firefox ที่ช่อง address bar<br />

พิมพ์ http://localhost/ ถ้าขึ ้นหน้าจอ AppServ ดังภาพแสดงว่าพร้อมใช้งานได้<br />

ช่อง Address พิมพ์ localhost


21<br />

โครงสร้างของ Folder<br />

เก็บ ฐานข้อมูล (MySQL)<br />

เก็บ File Joomla


การสร้างฐานข้อมูลด้วย PHPMyadmin<br />

กรณีจ าลองเครื่อง PC ของเราเองเป็ น Web server<br />

เปิ ด Browser ที่ช่อง Address bar พิมพ์ http://localhost/phpMyadmin<br />

username คลิก พิมพ์ Go root<br />

password พิมพ์ 1234<br />

แล้วกดปุ ่ ม OK 22


23<br />

การสร้างฐานข้อมูลด้วย PHPMyadmin (ต่อ)<br />

่<br />

1. พิมพ์ชื่อฐานข้อมูล (ในที่นี้ขอตั ้งชื่อเป็ น joomla_db)<br />

2. คลิ๊กปุม สร้าง


ขั ้นตอนการติดตั ้งโปรแกรม Joomla<br />

10. Copy โฟลเดอร์ Joomla จากเครื่องไปใส่ไว้ในพาส<br />

**ก้อปปี ้ วางให้ถูกต้อง<br />

24


ขั ้นตอนการติดตั ้งโปรแกรม Joomla (ต่อ)<br />

11. เปิ ด Browser ที่ address ให้พิมพ์ http://localhost/joomla<br />

2 คลิก ต่อไป<br />

1. เลือกภาษาที่ใช้ในการ<br />

ติดตั ้ง ในที่นี้ขอเลือกเป็ น<br />

ภาษาไทย<br />

25


26<br />

ขั ้นตอนการติดตั ้งโปรแกรม Joomla (ต่อ)<br />

ให้คลิก ต่อไป เพื่อไปขั ้นตอนถัดไป<br />

3. คลิก ต่อไป


27<br />

ขั ้นตอนการติดตั ้งโปรแกรม Joomla (ต่อ)<br />

หน้านีเป็ ้ นการบอกถึงลิขสิทธิ์การใช้งาน Joomla! CMS ให้คลิก ต่อไป<br />

4. คลิก ต่อไป


28<br />

ขั ้นตอนการติดตั ้งโปรแกรม Joomla (ต่อ)<br />

ในส่วนนี ้ให้ใส่รายละเอียดเกี่ยวกับฐานข้อมูล<br />

คลิก Next<br />

พิมพ์ localhost<br />

Password =>1234<br />

พิมพ์ root<br />

joomla_db<br />

ค าน าหน้าตารางให้เปลี่ยน


29<br />

ขั ้นตอนการติดตั ้งโปรแกรม Joomla (ต่อ)<br />

ส่วนของการก าหนดค่า FTP ยังไม่ใช้งานว่างไว้ไม่ต้องต้องกรอก จากนั ้น<br />

คลิกปุ ่ ม ต่อไป<br />

คลิก ต่อไป


้<br />

ขั ้นตอนการติดตั ้งโปรแกรม Joomla (ต่อ)<br />

ในส่วนนีเป็ ้ นการตั ้งค่าเว็บไซต์<br />

ใส่ชื่อเว็บไซต์ ก าหนดชื่อตามต้องการ<br />

คลิ๊ก ต่อไป<br />

ใส่ E-mail ของผู ้ดูแลระบบ<br />

กรอกชื่อ ผู ้ดูแลระบบ<br />

ใส่รหัสผ่านในการเข้าระบบของผู ้ดูแลระบบ<br />

ยืนยันรหัสผ่าน<br />

ถ้าติดตั ้งข้อมูลตัวอย่างก็ให้คลิ๊กที่ ติดตั ้งข้อมูลตัวอย่าง แต่ในที่นี<br />

ไม่ต้องคลิก เพราะไม่ติดตั ้งข้อมูลตามตัวอย่าง<br />

30


31<br />

ขั ้นตอนการติดตั ้งโปรแกรม Joomla (ต่อ)<br />

ในส่วนนีเป็ ้ นขั ้นตอนสุดท้าย เสร็จสิ ้น<br />

แล้วคลิกเพื่อดูหน้า<br />

เว็บไซต์<br />

ชื่อผู้ดูแลระบบ<br />

ให้จดไว้ด้วยนะ<br />

เดี๋ยวลืม


32<br />

การเปิ ดใช้งานโปรแกรม Joomla<br />

เปิ ด Browser ที่ address ให้พิมพ์ http://localhost/joomla<br />

หน้าตัวอย่างเพจ Joomla ที่ได้


การเข้า – ออกระบบ ผู ้ดูแลระบบ(admin)<br />

33<br />

การเข้าสู ่หน้าผู ้ดูแลระบบ กรณีใช้เครื่อง PC จ าลองท าเว็บไซต์ ให้เปิ ด Browser<br />

ขึ ้นมา ที่ช่อง address ให้พิมพ์ http://localhost/โฟลเดอร์ที่ใช้เก็บ<br />

Joomla/administrator<br />

พิมพ์ชื่อผู ้ดูแลระบบ<br />

ใส่รหัสผ่าน


34<br />

การเข้า – ออกระบบ ผู ้ดูแลระบบ(admin) (ต่อ)<br />

ส่วนประกอบของหน้าผู ้ดูแลระบบ<br />

ต้องการออกจากระบบให้คลิกที่<br />

Logout หรือ ออกจากระบบ


35<br />

การติดตั ้งภาษาไทยให้กับ Joomla<br />

ให้ท าการ Login เข้าหน้า admin<br />

1.คลิกเมนู Extentions -><br />

Extension Manager<br />

2.คลิกเมนู เรียกดู


การติดตั ้งภาษาไทยให้กับ Joomla!(ต่อ)<br />

36


การติดตั ้งภาษาไทยให้กับ Joomla! (ต่อ)<br />

5. คลิกที่ Extensions > Language Manage<br />

หมายเหตุ setภาษาไทยส าหรับผู ้ดูแล คลิกที่แถบ installed-administrator เลือก ภาษาไทย > คลิก ที่ปุ ่ ม<br />

Default 37


การติดตั ้งภาษาไทยให้กับ Joomla! (ต่อ)<br />

38


39<br />

การปรับตั ้งค่า Global Configuration (ตั ้งค่าระบบหลัก)<br />

การตั ้งค่าเบื ้องต้นทําการ Login เข้าหน้า back end ของระบบ<br />

1. คลิกที ่ ตั้งค่าคอนฟิ กหลัก หรือไปที ่ เมนู เว็บ >> การตั้งค่าคอนฟิ ก


การปรับตั ้งค่า Global Configuration (ตั ้งค่าระบบหลัก)<br />

40


การปรับตั ้งค่า Global Configuration (ตั ้งค่าระบบหลัก)<br />

การกําหนดค่าการทํางานขั ้นพื ้นฐานในเว็บไซต์ มีรายละเอียดต่างๆดังนี ้<br />

ตั ้งค่าหน้าเว็บ กําหนดค่าในการแสดงเนื ้อหาบนหน้าเว็บไซต์<br />

• ชื่อเว็บ กําหนดชื่อของเว็บไซต์ ซึ ่งจะแสดงในไตเติลบาร์ของเว็บผู้ดูแล<br />

• ปิ ดเว็บชั่วคราว กําหนดให้ปิ ดเว็บไซต์ชั่วคราวเมื่อมีการปรับแต่งหรือแก้ไขเว็บไซต์<br />

• ข้อความเมื่อ Offline กําหนดข้อความที่ใช้แสดงแทนเนื ้อหาเว็บ เมื่อเราสั่งปิ ด<br />

เว็บไซต์ชั่วคราว โดยให้เลือกที่ ใช้ข้อความที่ก าหนดเอง และกําหนดข้อความที่จะให้<br />

แสดงเมื่อทําการปิ ดเว็บไซต์ ในช่อง ข้อความเมื่อปิ ดเว็บ<br />

• ตัวช่วยเขียนเนื้อหา เลือกเอดิเตอร์(ตัวช่วยเขียนเนื ้อหา)ที่ใช้ในการสร้างเนื ้อหาเว็บ<br />

• ระดับสมาชิก ระดับของผู้ที่สามารถเข้าชมเนื ้อหาและเมนูในเว็บไซต์ เช่น Public ทุก<br />

คน หรือ Registered เฉพาะสมาชิกที่ได้ลงทะเบียนเท่านั ้น<br />

•จ านวนแสดงต่อหน้า ความยาวของรายการที่ให้แสดงในหน้าเว็บผู้ดูแล<br />

• จ านวนเนื้อหาที่ส่งออก จํานวนหัวข้อของเนื ้อหาที่เปิ ดให้เว็บไซต์อื่นๆ ได้ดึงไป<br />

แสดงบนเว็บ<br />

41


42<br />

การปรับตั ้งค่า Global Configuration (ตั ้งค่าระบบหลัก)<br />

•อีเมลที่แนบใน RSS ให้เลือกดึงเนื ้อหาจากอีแมลแอดเดรสของผู้เขียนแต่ละคน<br />

(Author E-mail) หรือจากอีเมลแอดเดรสของผู้ชมทุกคนในเว็บไซต์(Site Email)<br />

ตั ้งค่าเมต้าดาต้า กําหนดแท็ก Meda ที่แสดงคําอธิบายของเว็บไซต์ ซึ ่งมีผลต่อการ<br />

ค้นหาของเสิร์ชเอนจิน<br />

•ค าอธิบายเว็บ คําอธิบายเกี่ยวกับเว็บไซต์ ไม่ควรเกิน 20 คํา<br />

•ค าส าคัญ คําสําคัญที่สื่อความหมายและช่วยค้นหาเว็บไซต์ โดยจะต้องคั่นแยกระหว่าง<br />

คําด้วยเรื่องหมายคอมมา(,)<br />

•ลิขสิทธิ ์เนื้อหา แสดงชื่อบทความในโค้ด Meta<br />

•แสดงชื่อผู ้เขียน แสดงชื่อผู้เขียนบทความในโค้ด Meta<br />

•แสดงเวอร์ชั่นจูมล่า แสดงรุ่นของ Joomla ที่ใช้ทําเว็บไซต์นี ้ในโค้ด Meta


43<br />

การปรับตั ้งค่า Global Configuration (ตั ้งค่าระบบหลัก)<br />

ตั ้งค่า SEO กําหนดค่าตามมาตรฐานการทํางานของเสิร์ชเอนจิน(SEO)<br />

•เปลี่ยน URLs เป็ นแบบอ่านง่าย กําหนดให้ URL ของหน้าเว็บรองรับการค้นหาของ<br />

เสิร์ชเอนจิน<br />

•ใช้ Apache mod_rewrite กําหนดตรวจจับและเขียน URL ของหน้าเว็บขึ ้นใหม่ เพื่อ<br />

ช่วยในการค้นหาของเสิร์ชเอนจิน<br />

•ใส่ .html ต่อท้าย URL ใส่นามสกุลของหน้าเว็บลงในส่วนท้ายของ URL<br />

•Unicode Aliases เป็ นการเลือกแสดงชื่อ URL เป็ นนามแฝง หรือแปลงเป็ นภาษา<br />

Unicode<br />

•ใส่ชื่อเว็บลงในทุกหน้า มีชื่อหน้าเว็บเพ็จตอนเริ่มต้น หรือตอนจบเพจ


การปรับตั ้งค่า Global Configuration (ตั ้งค่าระบบหลัก)<br />

คลิกที่แถบไซต์ แก้ไขเฉพาะบางส่วนที่จําเป็ นเท่านั ้น<br />

คลิกที่แถบ ไซต์<br />

คลิก บันทึก<br />

กรณีต้องการปิ ดเว็บไซต์ชั่วคราวเลือก ใช่ ไม่ปิ ด<br />

เลือก ไม่<br />

ให้ใส่ค าอธิบายเกี่ยวเว็บไซต์ ไม่ควรเกิน 20 ค า<br />

ให้ใส่ค าส าคัญที่สื่อความหมายและช่วย<br />

ค้นหาเว็บไซต์ โดยจะต้องคั่นแยกระหว่างค า<br />

ด้วยเครื่องหมายคอมมา (,)<br />

44


45<br />

การปรับตั ้งค่า Global Configuration (ตั ้งค่าระบบหลัก)<br />

อธิบาย และแก้ไขเฉพาะบางส่วนที่จําเป็ นเท่านั ้น


การจัดการและระดับการเข้าถึง (User Manager)<br />

46<br />

กลุ ่มผู ้ชมเว็บไซต์ (Front End User)<br />

กลุ ่มผู ้ชมเว็บไซต์ที่เป็ นสมาชิก (ถ้าเราไม่ได้เปิ ดให้สมัครสมาชิกได้ก็จะไม่มีผู ้ชม) แบ่งได้เป็ น 4 กลุ ่ม<br />

Registered User : สามารถ login เข้าเว็บไซต์ และดูข้อมูลต่างๆ ได้ตามที่ผู ้ดูแลเว็บก าหนด<br />

สิทธิ ์ไว้เท่านั ้น<br />

Author : ดูข้อมูล และสร้างเนื้อหาได้ แต่เนื้อหานั ้นต้องได้รับการอนุมัติจากสมาชิกกลุ ่ม<br />

Publisher ก่อนแสดงในเว็บไซต์<br />

Editor : ดูข้อมูล สร้างเนื้อหาได้ และยังแก้ไขเนื้อหาของผู ้อื่นได้ด้วย แต่หากเป็ นเนื้อหาใหม่<br />

ต้องได้รับการอนุมัติจากกล่ม Publisher ก่อน<br />

Publisher : ดูข้อมูล สร้างเนื้อหาได้ แก้ไขเนื้อหาของผู ้อื่นได้ และมีเป็ นผู ้ตัดสินใจอนุมัติว่าจะให้<br />

เนื้อหาของสมาชิกกลุ ่ม Auther และ Editor แสดงในเว็บไซต์หรือไม่


47<br />

กลุ ่มผู ้ดูแลเว็บไซต์ (Back End User)<br />

เป็ นกลุ่ม User ที่มีสิทธิ ์ login ไปยังหน้าบริหารจัดการเว็บไซต์เพื่อเข้าไปปรับแต่ง<br />

แก้ไขค่าการทางานต่างๆ ของเว็บไซต์ เช่น การจัดหมวดหมู ่เนื ้อหา, การเปลี่ยน template หน้าตาเว็บ,<br />

การinstall|uninstall component และสามารถสร้าง user ใหม่ได้<br />

Manager : ผู้จัดการ กลุ่มนี ้อนุญาตให้ถึงการสร้างข้อมูล และระบบข้อมูลอื่น ๆ ทางด้านหลังเว็บไซต์<br />

พวกเขาสามารถเข้าสู ่ระบบผ่านอินเตอร์เฟสผู้ดูแลระบบแต่สิทธิของตนเองและการ เข้าถึงถูกจํากัด<br />

ในการจัดการเนื ้อหา พวกเขาสามารถสร้างหรือแก้ไขเนื ้อหา, การเข้าใช้บางส่วนเฉพาะคุณสมบัติ<br />

เช่นเพิ่มการลบและแก้ไขหน้าและเมนูแต่พวก เขาไม่มีการเข้าถึง "Mechanics" ของ Joomla<br />

เช่นการจัดการผู้ใช้หรือความสามารถในการติดตั ้งองค์ประกอบหรือโมดูล<br />

Administrator : ผู้ดูแลระบบ กลุ่มนี ้อนุญาตให้เข้าถึงฟังก์ชันการบริหารสูงสุด<br />

ผู้ดูแลระบบมรสิทธิ ์ ในการจัดการผู้ใช้ สามารถเข้าถึงตั ้งค่าในการติดตั ้ง/ลบ คอมโพเน้นท์ โมดูล ปลั๊กอิน<br />

สามารถเข้าถึงและดูสถิติเว็บไซต์ สิ่งที่พวกเขาไม่สามารถดําเนินการได้คือ ติดตั ้ง เทมเพลต<br />

Super Administrator : ผู้ดูแลระบบแบบซุปเปอร์ กลุ่มนี ้อนุญาตให้เข้าถึงการจัดการฟังก์ชั่นทั ้งหมด


48<br />

จัดการไฟล์มีเดีย<br />

เนื้อหาที่น าเสนอบนเว็บไซต์ส่วนใหญ่ จะประกอบไปด้วยไฟล์ประเภทต่าง เช่น<br />

ไฟล์ doc,<strong>pdf</strong>,ภาพ และไฟล์ภาพเคลื่อนไหวแบบแฟลช หากเราต้องการน าภาพ<br />

ไปสร้างเป็ นเนื้อหาใหม่บนเว็บ เราจ าเป็ นจะต้องสร้างโฟลเดอร์ส าหรับเก็บภาพ เพื่อ<br />

จะสามารถเรียกภาพเหล่านั ้นไปใช้งานต่อไป<br />

เข้าสู ่การจัดการไฟล์มีเดีย<br />

ที่หน้าผู ้ดูแลระบบ เข้าไปที่เมนู เนื้อหา > จัดการรูป/ไฟล์


จัดการไฟล์มีเดีย<br />

หน้าแสดง การจัดการมีเดีย<br />

ลบไฟล์หรือโฟลเดอร์ที ่ไม่ต้องการ<br />

แสดงไฟล์และโฟลเดอร์ย่อยภายในโฟลเดอร์ที ่เราเลือก<br />

เลือกเข้าไปในโฟลเดอร์ที ่ใช้<br />

เก็บไฟล์และมีเดีย<br />

กรอบใส่ชื ่อโฟลเดอร์ที ่สร้างเพิ ่มเติม<br />

สั ่งอัดโหลดไฟล์สู ่เว็บไซต์<br />

เข้าไปเลือกไฟล์ในเครื ่อง<br />

เพื ่ออัพโหลดเข้าสู ่เว็บไซต์<br />

49


50<br />

จัดการไฟล์มีเดีย<br />

การสร้างโฟลเดอร์ใหม่ส าหรับเก็บไฟล์<br />

การสร้าง Folder ใน joomla 2.5 เริ่มโดย ไปที่เมนู เนื ้อหา > จัดการรูป/ไฟล์<br />

**ชื่อโฟลเดอร์ต้องใช้อักษรอังกฤษเท่านั ้น<br />

ห้ามใช้ภาษาไทย จากนั ้นคลิก<br />

สร้างโฟลเดอร์<br />

ถ้าจะลบก็คลิกที ่กากบาทสีแดง


51<br />

จัดการไฟล์มีเดีย<br />

วิธีเปิ ดและอัพโหลดไฟล์ไปเก็บในโฟลเดอร์


52<br />

จัดการไฟล์มีเดีย<br />

วิธีเปิ ดและอัพโหลดไฟล์ไปเก็บในโฟลเดอร์ (ต่อ)<br />

หมายเหตุ**ไฟล์ที ่จะอัพโหลดขึ้นไปต้องตั้งชื ่อเป็ นภาษาอังกฤษเท่านั้น


53<br />

จัดการไฟล์มีเดีย<br />

การลบโฟลเดอร์และไฟล์มีเดีย<br />

ที่หน้าผุ ้ดูแล เข้าไปเมนู เนื้อหา > จัดการรูป/ไฟล์


ติดตั ้งเครื่องมือช่วยเขียนเนื้อหา JCE Editer<br />

54<br />

1.ไปที่ ส่วนเสริม > การจัดการโมดูล<br />

2.คลิกเรียกดู เลือกไฟล์<br />

3.คลิกอัพโหลด&ติดตั้ง<br />

2344.zip


ติดตั ้งเครื่องมือช่วยเขียนเนื้อหา JCE Editer (ต่อ)<br />

55<br />

4.ติดตั้งส าเร็จ ปรากฏหน้าจอดังภาพ


ติดตั ้งเครื่องมือช่วยเขียนเนื้อหา JCE Editer (ต่อ)<br />

56<br />

5.ไปset ค่า ไปที ่เมนู ไซต์ > ตั้งค่าระบบหลัก<br />

เลือก Editer-JCE<br />

แล้วบันทึก &ปิ ด<br />

6.เวลาสร้างบทความใหม่ จะปรากฎเครื ่องมือขึ้นมาเพิ ่มเติมให้


้<br />

57<br />

การสร้างเนื ้อหา<br />

สามารถแบ่งเนื ้อหาได้ 3 แบบดังนี<br />

1. เนื ้อหาที่ไม่อยู ่ในหมวดหมู ่(Uncategory) เหมาะกับบทความที่เนื ้อหาเป็ น<br />

เอกเทศตายตัว และไม่เปลี่ยนแปลงบ่อย ได้แก่<br />

- เกี่ยวกับสํานักงาน เช่น ประวัติ, บุคลากร, วิสัยทัศน์ , บุคลากร เป็ นต้น<br />

- แผนที่ แสดงที่ตั ้งและภาพแผนที่สําหรับการเดินทางมาติดต่องาน<br />

2. เนื ้อหาจัดตามหมวดหมู ่(Category) เช่น หมวดหมู ่ข่าวประชาสัมพันธ์ ไว้เก็บ<br />

ข่าวต่างๆ, หมวดหมู ่ภาพกิจกรรม ใช้เก็บภาพกิจกรรม, หมวดหมู ่ดาวน์โหลด แยกเป็ น<br />

หมวดหมู ่ย่อย ได้แก่ โปรแกรม คู ่มือ และมีบทความภายใต้(ดูภาพประกอบในสไลด์<br />

ต่อไป)<br />

3. เนื ้อหาหน้าแรก (Featured Article) เป็ นบทความเด่นที่นําเสนออยู ่บนหน้า<br />

แรกของเว็บไซต์


่<br />

การสร้างเนื ้อหา(ต่อ)<br />

หมวดหมู ่หลัก<br />

โครงสร้างการสร้างเนื้อหาแบบหมวดหมู<br />

ข่าวประชาสัมพันธ์<br />

ภาพกิจกรรม<br />

เนื้อหาข่าวที ่ 1<br />

เนื้อหาข่าวที ่ 2<br />

เนื้อหาข่าวที ่ 3<br />

ภาพกิจกรรม 1<br />

ดาวน์โหลด<br />

หมวดหมู ่ระดับที่ 1<br />

ดาวน์โหลดโปรแกรม<br />

โปรแกรม Joomla<br />

โปรแกรม Appserv<br />

ดาวน์โหลดคู ่มือ<br />

คู ่มือ Joomla2.5<br />

คู ่มือ Joomla3.0<br />

58


59<br />

การสร้างหมวดหมู ่(Category)ส าหรับเก็บเนื้อหา<br />

หมวดหมู ่ หรือ category ของเนื ้อหาหรือบทความต่างๆ ใน joomla 2.5 ใช้ใน<br />

กรณีที่เรามีเนื ้อหาหลายๆ เนื ้อหาที่เป็ นประเภทเดียวกัน และต้องการเก็บไว้ในหมวด<br />

เดียวกัน เช่น ข่าว,สถิติคดี เมื่อมีข่าว หรือสถิติคดีแต่ละปี ก็เอาไปเก็บไว้ที่<br />

หมวดหมู ่ เพื่อง่ายต่อการค้นหา หรือการเลือกอ่านข่าวสาร<br />

คลิกที ่ เนื้อหา > จัดการหมวดหมู ่ > เพิ ่มหมวดหมู ่ใหม่


60<br />

การสร้างหมวดหมู ่(Category)ส าหรับเก็บเนื้อหา (ต่อ)<br />

กรอกข้อมูลต่างๆ


61<br />

การสร้างหมวดหมู ่(Category)ส าหรับเก็บเนื้อหา (ต่อ)<br />

เวลาเราสร้างเนื้อหาใหม่ เราก็จะได้ category หรือหมวดหมู ่ไว้เก็บ<br />

เนื้อหาเป็ นหมวดๆ ไป


62<br />

เริ่มต้นการสร้างเนื้อหา<br />

การสร้างเนื้อหา<br />

1. ถ้ายังไม่ Login ให้ท าการ Login ก่อนการสร้างเนื้อหา<br />

2. Control Panel เลือกเมนู Content > Article Manager > Add New Article หรือ<br />

คลิกที่ปุ ่ ม Add New Article


63<br />

เริ่มต้นการสร้างเนื้อหา (ต่อ)<br />

การสร้างเนื้อหา(ต่อ)<br />

3. ขั ้นตอนถัดไปจะเป็ นการก าหนดรายละเอียดต่าง ๆ ของเนื้อหา ดังภาพ<br />

4. ให้ก าหนดข้อมูลลงในช่องต่าง ๆ


64<br />

เริ่มต้นการสร้างเนื้อหา (ต่อ)<br />

3. ขั ้นตอนถัดไปจะเป็ นการก าหนดรายละเอียดต่าง ๆ ของเนื้อหา


อธิบายแต่ละส่วน<br />

ส่วนที่ 1<br />

เริ่มต้นการสร้างเนื้อหา (ต่อ)<br />

• ชื่อ(Title) คือชื่อเนื้อหาที่แสดงบนหน้าเว็บ เราสามารถก าหนดเป็ นภาษาไทยได้<br />

• เอเลียส์(Alias) เป็ นชื่ออ้างองของเนื้อหานั ้น จะใส่หรือไม่ใส่ก็ได้ ถ้าไม่ใส่ระบบจะ<br />

วันที่ที่สร้างบทความมาใส่แทนให้<br />

• หมวดหมู ่(category) คือหมวดหมู ่ของเนื้อหานั ้น ซึ่งมีรายการหมวดหมู ่ เนื้อหาให้<br />

เลือก<br />

• สถานะ(Status) คือข้อก าหนดในการเผยแพร่เนื้อหา เช่น เผยแพร่ ไม่เผยแพร่<br />

• การเข้าถึง(Access) คือข้อก าหนดในการเข้าถึงเนื้อหา > Publis : เห็นได้ทุกคน<br />

Register : เฉพาะสมาชิกที่ login เท่านั ้น Special : เฉพาะผู ้ดูแล<br />

• เนื้อหาเด่น(Featured) หมายถึงให้น าบทความนั ้นมาแสดงที่แรกด้วยหรือไม่ มี 2<br />

ตัวเลือกคือ Yes:แสดงหน้าแรก ถ้า No: ไม่แสดงหน้าแรก<br />

65


66<br />

เริ่มต้นการสร้างเนื้อหา (ต่อ)<br />

ส่วนที่ 2 ส าหรับใส่เนื้อหาต่าง ส่วนเนื้อหาที่ส าหรับเขียนรายละเอียดของเนื้อหา<br />

หรือที่เรียกว่า editor ซึ่งจะมีปุ ่ มส าหรับให้เราจัดการรูปแบบคล้ายกับโปรแกรม<br />

Word


67<br />

ส่วนที่ 3<br />

เริ่มต้นการสร้างเนื้อหา (ต่อ)<br />

ก าหนดวันและเวลาในการเปิ ด-ปิ ดเนื้อหา<br />

เลือกชื ่อคนเขียนเนื้อหา<br />

วัน-เวลาที ่เขียนเนื้อหา<br />

วัน-เวลาในการเปิ ดแสดงเนื้อหา<br />

วัน-เวลาในการปิ ดแสดงเนื้อหา


68<br />

เริ่มต้นการสร้างเนื้อหา (ต่อ)<br />

ส่วนที่ 3 (ต่อ)<br />

ก าหนดการท างานในเนื้อหา<br />

เป็ นการกําหนดแสดงรายละเอียดต่างๆ ในเนื ้อหา<br />

เช่นปุ ่ มไอคอนการทํางาน และลิงก์ต่างๆ โดยมีค่า<br />

กําหนดคือ<br />

ใช้ค่าหลัก : ค่าหลักที่ตั ้งไว้ใช้กับทุกเนื ้อหา<br />

ซ่อน : ซ่อนการทํางานของส่วนนั่นๆไม่ให้แสดง<br />

แสดง : ให้แสดงส่วนนั ้นๆ


เริ่มต้นการสร้างเนื้อหา (ต่อ)<br />

4. เมื่อกรอกรายละเอียดต่างๆครบแล้ว คลิก บันทึก<br />

ปรากฏชื่อเนื้อหาขึ้นมา<br />

69


70<br />

เริ่มต้นการสร้างเนื้อหา (ต่อ)<br />

ถ้าต้องการให้เนื้อหาแสดงที ่หน้าแรกให้คลิกที ่คอลัมน์<br />

เนื้อหาเด่น ให้เป็ นดาวสีฟ้ า<br />

คลิก ดูหน้าเว็บไซต์เพื ่อดูผลลัพธ์<br />

ผลลัพธ์ที ่ได้จากการ สร้างเนื้อหา


68<br />

เริ่มต้นการสร้างเนื้อหา (ต่อ)<br />

อธิบายหน้าการจัดการเนื้อหา<br />

ส าหรับเลือก<br />

เผยแพร่หรือหยุด<br />

เผยแพร่เนื้อหา<br />

อยู ่หมวดหมู ่อะไร<br />

แสดงชื่อเนื้อหา<br />

การเรียงล าดับเนื้อหา<br />

แสดงหน้าแรก<br />

หรือไม่แสดงหน้าแรก


69<br />

การลบเนื้อหา<br />

เนื้อหาที่ถูกลบจะถูกเก็บอยู ่ในถังขยะ


70<br />

การแทรกรูปภาพในเนื้อหา<br />

คลิกเมาส์ตรงจุดที่จะแทรกภาพ แล้วคลิกที่ใส่รูปภาพ<br />

ผลลัพธ์การแทรกรูปภาพ


การเขียนเนื้อหาเกริ่นน า<br />

1.หลังจากเข้าสู ่ขั ้นตอนสร้างเนื้อหาใหม่แล้ว ก็ก าหนดรายละเอียดเกี่ยวกับเนื้อหานั ้น ๆ<br />

เลือกต าแหน่งที่ต้องการคั่น<br />

2. ที่ส่วนของ Editor ให้เริ่มเขียนส่วนที่จะให้เป็ นบทความแล้วคลิกที่ปุ ่ ม อ่านเพิ่มเติม<br />

ด้านล่าง<br />

71


72<br />

การเขียนเนื้อหาเกริ่นน า (ต่อ)<br />

หลังจากคลิกอ่านเพิ ่มเติมปรากฏเส้นขั้นปะสีแดง<br />

3.จากนั้นก็พิมพ์รายละเอียดของเนื้อหานั้น ลงไปถัดจากเส้นคั ่นบทน า


การเขียนเนื้อหาเกริ่นน า (ต่อ)<br />

73<br />

4. ผลลัพธ์ที ่ได้จากการเขียนบทเกริ ่นน า


การสร้างลิงค์ดาวน์โหลด ในบทความ<br />

1.หลังจากเข้าสู ่ขั ้นตอนสร้างเนื้อหาใหม่แล้ว ก็ก าหนดรายละเอียดเกี่ยวกับเนื้อหานั ้น ๆ<br />

2. พิมพ์ข้อความที่ต้องการท าลิงค์ แดรกเมาส์คลุมข้อความดังกล่าว แล้วกดลิงก์<br />

3.<br />

4.<br />

5.<br />

7.<br />

6.<br />

8.<br />

74


75<br />

การสร้างลิงก์ดาวน์โหลด ในเนื้อหา(ต่อ)<br />

9.เมื่อเสร็จแล้วจะปรากฎผลดังภาพ


76<br />

การสร้างกลุ ่มเมนู<br />

1. คลิกเมนู > จัดการเมนู<br />

ค าสั ่งที ่ใช้จัดการแถบเมนู<br />

แสดงชื ่อแถบเมนูทั้งหมด<br />

คลิกเข้าไปจัดการรายการแต่ละเมนู


77<br />

การสร้างกลุ ่มเมนู(ต่อ)<br />

3. กรอกรายละเอียดในช่องให้ครบ แล้วคลิก บันทึก&ปิ ด<br />

ใส่ชื ่อ กลุ ่มเมนู<br />

ชื ่อเมนูภาษาอังกฤษ<br />

ค าอธิบาย


การสร้างกลุ ่มเมนู(ต่อ)<br />

78


79<br />

การสร้างเมนูเข้าสู ่เนื้อหาเดียว<br />

1.คลิกที ่เมนู >Main Menu<br />

2.คลิก สร้างใหม่


80<br />

การสร้างเมนูเข้าสู ่เนื้อหาเดียว (ต่อ)<br />

7.คลิก บันทึก& ปิ ด<br />

3.คลิกเข้าไปเลือกชนิดเมนู<br />

6.เลือก เนื้อหาที ่ต้องการ<br />

4.เลือก เนื้อหาเดียว<br />

5.ใส่ชื ่อเมนุ


81<br />

การสร้างเมนูเข้าสู ่เนื้อหาเดียว (ต่อ)<br />

แสดงผลการสร้างเมนู


82<br />

การสร้างเมนูเข้าสู ่หมวดหมู ่(Category)<br />

1.คลิกที ่เมนู >Main Menu<br />

2.คลิก สร้างใหม่


83<br />

การสร้างเมนูเข้าสู ่หมวดหมู ่(Category) (ต่อ)<br />

6.คลิก บันทึก &ปิ ด<br />

3.คลิกเข้าไปเลือกชนิดเมนู<br />

5.เลือก หมวดหมู ่<br />

4.ใส่ชื ่อเมนู


84<br />

การสร้างเมนูเข้าสู ่หมวดหมู ่(Category) (ต่อ)<br />

แสดงผลการสร้างเมนูเข้าสู ่หมวดหมู ่


การสร้างเมนูลิงค์ไปเว็บไซต์ภายนอก<br />

เมนูชนิดนี ้ใช้ส าหรับการเชื่อมโยงไปยังเว็บเพจอื่น ๆ ทั ้งที่อยู ่ในเว็บไซต์เดียวกันและต่าง<br />

เว็บไซต์กัน โดยมีแนวทางการสร้าง ดังนี ้ ตัวอย่าง เราต้องการสร้าง เมนู Link หน่วยงาน<br />

ที่เกี่ยวข้อง<br />

ขั้นตอน การสร้าง<br />

1. ไปที ่ เมนู > Main Menu> เพิ ่มเมนูใหม่<br />

5.คลิกบันทึก&ปิ ด<br />

2.คลิกเข้าไปเลือกชนิดเมนู<br />

3.ใส่ชื ่อเมนู<br />

4.พิมพ์ URL<br />

85


การสร้างเมนูลิงค์ไปเว็บไซต์ภายนอก (ต่อ)<br />

86<br />

จะได้ Menu ดังภาพ


การตั ้งค่าเทมเพลตให้เทมเพลตหลัก<br />

ไปที่ ส่วนเสริม > การจัดการเทมเพลต<br />

ก็จะมาที่หน้าการจัดการเทมเพลตจะ เห็นว่าเทมเพลตมี 2 ประเภท คือ 1. เทมเพลต<br />

ส าหรับผู ้บริหาร ก็คือส าหรับ administrator เข้าไปจัดการ หรือบริหารเว็บไซต์<br />

นั่น 2. เทมเพลตส าหรับไซต์ คือเทมเพลตที่แสดงด้านหน้าเว็บไซต์ ส าหรับผู ้เข้าชม<br />

เว็บไซต์ทุกคน ที่ ค่าเริ่มต้น เทมเพลตไหนมีรูปดาว ติดอยู ่ เทมเพลตนั ้นคือเทมเพลตค่า<br />

เริ่มต้นของเว็บไซต์ ส่วนเทมเพลตไหน ที่รูปเครื่องหมายถูกสีเขียว อยู ่ตรงค าว่า ใช้งาน<br />

เทมเพลตนั ้น คือเทมเพลตที่ถูกเลือกใช้งานเฉพาะบางเมนู หรือเฉพาะงาน แต่ไม่ใช่ค่า<br />

เริ่มต้นของเว็บไซต์<br />

87


การตั ้งค่าเทมเพลตให้เทมเพลตหลัก (ต่อ)<br />

88<br />

การเปลี่ยนเทมเพลต ให้มีเครื่องหมายถูกด้านหน้าเทมเพลตนั ้น ๆ<br />

จากนั ้นคลิกค าว่า ใช้เป็ นเทมเพลตหลัก ซึ่งอยู ่ขวามือข้างบน (ค าว่า เทม<br />

เพลตค่าเริ่มต้นและเทมเพลตหลัก คือความหมายเดียวกันในบทความนี)<br />


89<br />

การติดตั ้งเทมเพลตเพิ่มเติม (ต่อ)<br />

1. ไปที่ ส่วนเสริม > การจัดการส่วนเสริม<br />

2.คลิกเรียกดู เลือกไฟล์<br />

เทมเพลต<br />

3.คลิกอัพโหลด&ติดตั้ง


90<br />

การติดตั ้งเทมเพลตเพิ่มเติม (ต่อ)<br />

เรียกดูเทมเพลตได้ที ่เมนู ส่วนเสริม >การจัดการเทมเพลต จะเจอเทม<br />

เพลตที ่ติดตั้งลงไป


91<br />

การเปลี่ยนการจัดเรียงบทความหน้าเว็บไซต์<br />

ถ้าต้องการเปลี่ยนการจัดเรียงบทความหน้าแรกของเว็บไซต์มีวิธีการท าดังนี ้<br />

1. เข้าไปที ่ เมนู ->Main Menu<br />

คลิกเลือก หน้าแรก(home)


92<br />

การเปลี่ยนการจัดเรียงบทความหน้าเว็บไซต์ (ต่อ)<br />

2. เมื ่อคลิกเข้าเมนูแล้ว ให้แก้ไขในส่วนตัวเลือกเค้าโครง ดูรูปประกอบ<br />

แล้วแก้ไขค่าตามต้องการ เสร็จแล้วกด บันทึก


93<br />

การเปลี่ยนข้อความไตเติ้ลเพจ(title page)<br />

ถ้าต้องการเปลี่ยนข้อความไตเติ ้ลเพจ มีวิธีการท าดังนี ้<br />

ถ้าต้องการเปลี ่ยนข้อความไตเติ้ลเพจนี้<br />

1. เข้าไปที ่ เมนู ->Main Menu<br />

คลิกเลือก หน้าแรก(home)


94<br />

การเปลี่ยนข้อความไตเติ้ลเพจ(title page) (ต่อ)<br />

2. คลิกที่ ตั ้งค่าการแสดงผล ช่องชื่อหน้า กรอกข้อความตามต้องการ<br />

เสร็จแล้วบันทึก แล้วดูหน้าเว็บไซต์<br />

ข้อความก็จะเปลี ่ยนตามที ่เรากรอกเข้าไปแล้ว<br />

ผลจากการเปลี่ยนข้อความ


95<br />

Extensions คือ<br />

โปรแกรมส่วนเสริมซึ่งจะช่วยให้การท างานของโปรแกรมหลัก แบ่ง 3 ประเภท<br />

• 1. โมดูล(Module) เป็ นโปรแกรมเสริมที่ช่วยในการดึงข้อมูลจากฐานข้อมูล<br />

ภายในและภายนอก มาน าเสนอผ่านหน้าเว็บ ในเว็บที่เราเห็นจะแบ่งเป็ น Block<br />

หรือว่า Module ต่างๆ จะมีการก าหนดต าแหน่งที่จะวาง Module ว่าจะ<br />

วางที่ต าแหน่งใดของหน้าเว็บ เช่น ด้านบน ด้านซ้าย ด้านขวา<br />

• 2. คอมโพเนนท์ (Component) เป็ นส่วนประกอบส าเร็จรูปที่ถูกออกแบบมา<br />

ให้ช่วยท างานพิเศษเพิ่มเติม และใช้งานง่าย เช่น ป้ ายโฆษณา,การติดต่อ,การ<br />

ค้นหา และเว็บลิงค์<br />

• 3.ปลั๊กอิน(Plugin) เป็ นฟังก์ชันใช้ท างานร่วมกับส่วนต่างๆ ใน Joomla


96<br />

การติดตั ้ง ส่วนเสริม(Extensions) ต่างๆ<br />

วิธีการติดตั ้งส่วนเสริมต่างๆ โมดูล, คอมโพเนนท์,ปลั๊กอิน, ภาษา,เทมเพลต<br />

ไปที่ ส่วนเสริม > การจัดการโมดูล<br />

2.คลิกเรียกดู เลือกไฟล์<br />

3.คลิกอัพโหลด&ติดตั้ง


97<br />

การถอนการติดตั ้งโปรแกรมส่วนเสริมต่างๆ<br />

วิธีถอนการติดตั ้งส่วนเสริมต่างๆ โมดูล, คอมโพเนนท์,ปลั๊กอิน, ภาษา,เทมเพลต<br />

ไปที่ ส่วนเสริม > การจัดการโมดูล


98<br />

การปรับแต่งโมดูลท าความรู ้จักกับโมดูล<br />

ไปที่ ส่วนเสริม > การจัดการโมดูล<br />

หน้าจอการจัดการโมดูล<br />

ส าหรับกรองข้อมูล


้<br />

99<br />

การปรับแต่งโมดูลท าความรู ้จักกับโมดูล (ต่อ)<br />

ชื่อ : รายชื่อโมดูลที่สร้างขึ ้นมา<br />

สถานะ : กําหนดและแจ้งสถานะว่าโมดูลนี ้ กําลังทํางาน หรือ ปิ ดการทํางาน<br />

ต าแหน่ง : ตําแหน่งการจัดวางโมดูล ซึ ่งแต่ละเทมเพลตจะแตกต่างกันไปและ<br />

สามารถเคลื่อนย้ายได้<br />

เรียงล าดับ : หมายเลขบอกลําดับของโมดูลที่ถูกจัดวางอยู ่ในเว็บไซต์ในตอนนี<br />

ชนิด : ประเภทของโมดูล<br />

แสดง : บอกให้ทราบว่าโมดูลนี ้ทํางานอยู ่ในหน้าใดบ้าง ได้แก่<br />

ทั้งหมด : ท างานอยู ่ทุกหน้า<br />

ไม่แสดง : ยังไม่ได้ก าหนด<br />

เฉพาะหน้าที่เลือก : ท างานอยู ่ในเฉพาะหน้าที่เลือก<br />

ในทุกหน้ายกเว้นหน้าที่เลือก : ทุกหน้ายกเว้นหน้าที่เลือก


้<br />

100<br />

การปรับแต่งโมดูลท าความรู ้จักกับโมดูล (ต่อ)<br />

การเข้าถึง : เปิ ดโมดูลนี ้ให้ใครเข้าถึงได้บ้าง<br />

Public : ใครเข้ามาในเว็บไซต์ก็เห็นการท างานและใช้งานโมดูลนี้<br />

Registered : เฉพาะสมาชิกและล็อกอินเข้ามาก่อน<br />

ภาษา : ภาษาที่ใช้กับโมดูลนี<br />

ไอดี(ID) : หมายเลขประจําโมดูล ทํางานร่วมกับฐานข้อมูล


101<br />

ต าแหน่งโมดูลในเทมเพลต<br />

1.ที ่หน้า การจัดการเทมเพลต ให้คลิกที ่แถบ เทมเพลต<br />

2.คลิกตั้งค่า<br />

3.คลิก เปิ ด แล้วกด บันทึก&ปิ ด<br />

4.คลิก ดูตัวอย่าง แสดงต าแหน่ง<br />

โมดูลที ่วางในเทมเพลต


ต าแหน่งโมดูลในเทมเพลต(ต่อ)<br />

102


103<br />

การสร้างโมดูล<br />

1.ไปที่ ส่วนเสริม>กรจัดการโมดูล คลิก สร้างใหม่<br />

2.ปรากฏหน้าจอให้เลือก<br />

ประเภทโมดูลที ่ต้องการ<br />

เช่น เมนู


การสร้างโมดูล (ต่อ)<br />

3.ปกรอกรายละเอียดและเลือกในช่องต่างๆ ให้เรียบร้อย แล้ว บันทึก<br />

ชื ่อโมดูล<br />

แสดงชื ่อโมดูล<br />

เปิ ดใช้งานโมดูล<br />

บุคลเข้าถึงได้<br />

เลือกต าแหน่ง<br />

วางโมดูล<br />

เลือกจะให้เมนู<br />

ไหนแสดง<br />

เลือกแสดงโมดูลนี้ในหน้าใดบ้าง ในตัว<br />

หย่างแสดงทุกน้า<br />

104


การสร้างโมดูล (ต่อ)<br />

105


106<br />

การสร้างโมดูลแบบ ก าหนด HTML เอง<br />

1.ไปที่ ส่วนเสริม>กรจัดการโมดูล แล้วคลิก สร้างใหม่<br />

2.ให้เลือกประเภทโมดูล<br />

ก าหนด HTML เอง


107<br />

การสร้างโมดูลแบบ ก าหนด HTML เอง(ต่อ)<br />

3.ปรากฏหน้าจอให้กรอกรายละเอียด<br />

กรอกชื ่อโมดูล<br />

เลือกต าแหน่งวางโมดูล


การสร้างโมดูลแบบ ก าหนด HTML เอง(ต่อ)<br />

4.กรอกเนื ้อหา และก าหนดว่าจะให้โมดูลแสดงที่เมนูใดบ้าง<br />

เสร็จแล้วกดปุ ่ ม บันทึก และ ดูหน้าเว็บไซต์<br />

ใส่เนื้อหาที ่ต้องการที ่นี ่<br />

เลือกว่าจะให้โมดูลแสดง<br />

ที ่เมนูใดบ้าง<br />

108


109<br />

การสร้างโมดูลแสดงสถิติการเข้าชมเว็บไซต์<br />

1. เลือกที่ ส่วนเสริม > การจัดการส่วนเสริม คลิกที่เลือก เรียกดู<br />

เลือกโมดูล mod_vvisit_counter_2_0_3_j16.zip คลิก อัพโหลด&ติดตั้ง


110<br />

การสร้างโมดูลแสดงสถิติการเข้าชมเว็บไซต์(ต่อ)<br />

2. เมื่อติดตั ้งเสร็จ โมดูลจะปรากฏที่เมนู การจัดการโมดูล<br />

ชื่อ visitors counter ให้คลิกโมดูลขึ ้นมาแก้ไข


111<br />

การสร้างโมดูลแสดงสถิติการเข้าชมเว็บไซต์(ต่อ)<br />

3. ให้แก้ไขชื่อ, เลือกต าแหน่งวางโมดูลสถิติผู ้เข้าชมเว็บไซต์,<br />

แก้ไขข้อความให้เป็ นภาษาไทย, ก าหนดการแสดงผล เสร็จแล้ว บันทึก


112<br />

การสร้างโมดูลแสดงสถิติการเข้าชมเว็บไซต์(ต่อ)<br />

ผลการสร้างโมดูลสถิติ<br />

การเข้าชมเว็บไซต์


113<br />

การเปลี่ยนหัวเว็บไซต์(Header)<br />

1. กรณีจ าลองเครื่องตัวเองเป็ น Server ไฟล์หัวเว็บไซต์ถูกเก็บไว้ที่ ไดร์ c -> appserv<br />

-> www -> joomla ->template ->เทมเพลตที่เราเลือกใช้ -> images<br />

-> ไฟล์หัวเว็บไซต์<br />

2. ถ้าจะเปลี่ยนให้เปิ ดไฟล์หัวเว็บเดิมขึ ้นมาแก้ไขด้วยโปรแกรมตกแต่ง แล้ว save เป็ นไฟล์ชื่อ<br />

เดิมนามสกุลเดิม หรือถ้าไม่เปิ ดไฟล์ขึ ้นมาแก้ไขก็สร้างไฟล์รูปภาพขึ ้นมาใหม่ แล้ว save<br />

ชื่อไฟล์ให้เป็ นชื่อของ หัวเว็บเดิม นามสกุลเดิม แล้ว copy ไฟล์ไปวางทับไฟล์เดิม แค่นี ้<br />

หัวเว็บไซต์ก็จะเปลี่ยนแล้ว<br />

3. ถ้ากรณีที่เราอัพโหลดเว็บขึ ้นไปบน server จริง(บนอินเตอร์เน็ต) ไฟล์หัวเว็บไซต์ถูกเก็บที่<br />

template ->เทมเพลตที่เราเลือกใช้ -> images ->ไฟล์หัวเว็บไซต์


ท าระบบ Download ใน Joomla ด้วย PhocaDownload<br />

114<br />

1. install Phoca Download โดยเริ ่มจาก Click ที่ Extensions => Extensions Manager<br />

2. คลิกที่ Browse เลือก ไฟล์ แล้ว คลิก upload & install


3 . Click ที่ Install เพื่อท าการติดตั ้ง<br />

115


4. Click ที่ Control Panel<br />

116


5. Click ที่ Option (อยู่ตรงมุมขวาบน) และจากนั ้นให้ Click ที่ Display<br />

117


118<br />

กําหนดค่าต่างๆ ให้กับ Phoca Download<br />

Filename or Title เป็ นการกําหนดชื่อ<br />

External Download Link เป็ นการกําหนดรูปแบบของการเปิ ด Page การ<br />

Download<br />

Display Downloads จํานวนผู้ Download<br />

Display Description รูปแบบการแสดงคําอธิบายของไฟล์<br />

Display Main Category Description แสดงคําอธิบายของ Category หรือไม่<br />

Display Detail Button กําหนดว่าต้องการแสดงปุ ่ ม Details หรือไม่<br />

Display New Icon กําหนดว่าต้องการแสดง Icon New หรือไม่ ถ้ากําหนดให้เป็ น 0 คือ<br />

ไม่แสดง หรือต้องการให้แสดงก็ให้พิมพ์วันที่ลงไป<br />

Display Hot Icon กําหนดจํานวนการ Download เท่าใด จึงมี Icon Hot ขึ ้นมา<br />

Display Most Download Files กําหนดว่าต้องการแสดงไฟล์ที่ถูก Download มาก<br />

ที่สุดหรือไม่<br />

Display File View กําหนดว่าต้องการดูไฟล์ก่อนหรือไม่<br />

Display Date Type รูปแบบการแสดง วัน<br />

6. กําหนดค่าเรียบร้อยให้ คลิก ที่ Save & Close


7. สร้าง Categories ขึ ้นมา คลิกที่ Category > คลิกที่ New<br />

119


กรอกรายละเอียด แล้วคลิก Save & Close<br />

120


121<br />

8. การ Upload โดยให้ click ที่ Files<br />

9. Click ที่ Multiple add


10. การ Upload Files<br />

Click ที่ Multiple Upload<br />

Click ที่ Add Files เพื่อเลือกไฟล์<br />

Click ที่ Start Upload เพื่ออัพโหลดไฟล์<br />

122


123<br />

11. เลือก category (ตามที ่สร้างไว้) คลิกเลือก ไฟล์ที ่ต้องการ upload<br />

12. คลิก Save & Close


แฟ้ มที ่ต้องการ Download ดังภาพ<br />

124


สร้างเมนู เพื่อรองรับการ Download<br />

คลิกที่ Menu Manager: Menu Items > เลือกที่ New<br />

125


126<br />

สร้างเมนู เพื่อรองรับการ Download<br />

คลิกที่ Menu Manager: Menus > เลือกที่ New<br />

กรอกรายละเอียด ในส่วนของ Menu Details


คลิกที่ Menu Manager: Menus Item > เลือกที่ New<br />

127


คลิก select<br />

128


เลือก List of Files (Category View)<br />

สั่ง Save & Close > คลิกที่ view site<br />

129


ผลลัพธ์ ที่ได้จากการสร้าง ให้ Download<br />

130


131<br />

ปลั ๊กอินแสดงแผนที ่จาก Google Maps<br />

1. เข้าเว็บ Google แล้วเลือกแผนที่<br />

พิมพ์ในช่อง ค้นหา เช่นต้องการหา ส านักงานอัยการสูงสุด อาคารรัชดาภิเษก<br />

2.คลิกที่บันทึก<br />

แผนที่ของฉัน<br />

คลิก เลือก<br />

บันทึก<br />

3.คลิกที่ปุ ่ ม Link<br />

4. เลือก ก าหนด<br />

เองและแสดง<br />

ตัวอย่างแผนที่ฝังไว้<br />

คลิกป


5.คัดลอกและวาง HTML นีเพื่อฝังใน<br />

้<br />

เว็บไซต์ของคุณ<br />

132


เข้าหน้า Administrator ของ joomla และ สร้าง Article<br />

คลิกที่ HTML หรือ <br />

133


คลิกที่ View site จะได้ผลลัพธ์ ดังภาพ<br />

134


135<br />

การสร้างโมดูลแสดงสถิติการเข้าชมเว็บไซต์<br />

1. เลือกที่ Extension > เลือก Browse เลือก Module คลิก<br />

Upload & install


2. คลิก Module ที่ติดตั ้งมา (ชื่อ vinaora_visitors_counter)<br />

คลิก ที่ Edit<br />

136


137<br />

ก าหนดค่า Title ในที่นีเลือก ้ สถิติผู ้เข้าชมเว็บไซต์<br />

Position เลือกต าแหน่ง


138


ภาคผนวก<br />

การน า Joomla! ขึ้น Server จริง


3. คีย์รหัสผ่านใหม่ที่ช่อง รหัสผ่านใหม่ และ ยืนยันรหัสผ่านใหม่ จากนั ้น กด บันทึก เป็ น<br />

อันเสร็จเรียบร้อย<br />

87<br />

การน า Joomla! ขึ้น Server จริง<br />

หลาย ๆ ท่านอาจจะนั่งท าเว็บในเครื่องตนเองโดยใช้โปรแกรม web server ติดตั ้งในเครื่อง<br />

ก่อน เพื่อความรวดเร็วและสะดวกในการปรับแต่งและไม่ค่อยยุ่งยากเหมือน ท าใน host จริง ๆ เสร็จ<br />

แล้วท าการอัพโหลดขึ ้น host ในทีเดียวเลย ในครั ้งนี ้ เราลองมาอัพโหลดเว็บ ที่ท าโดยสคริป joomla<br />

จากเครื่องตนเองขึ ้น hosting<br />

1.ก่อนอื่นก็ท าการ export ฐานข้อมูลของ joomla ที่ท าไว้ในเครื่องออกมาก่อน เปิ ดเว็บเบรา<br />

เซอร์ขึ ้นมา ที่ช่อง Address พิมพ์ http://localhost/phpmyadmin แล้วจะปรากฏหน้าจอขึ ้นมา ให้ใส่<br />

User และ password ของฐานข้อมูล แล้วกดปุ ่ ม ตกลง<br />

คู่มือติดตั ้งและใช้งาน Joomla!


88<br />

2. เมนูซ้าย ให้ เลือกฐานข้อมูลของ joomla และท าการคลิกที่เมนู ส่งออก(export)<br />

คู่มือติดตั ้งและใช้งาน Joomla!


89<br />

3. ก็จะมาสู่หน้านี ้จัดการเลือกที่ select all เพื่อเลือกที่จะน าฐานข้อมูลทั ้งหมดออกมา<br />

จากนั ้น คลิกเลือก Add DROP TABLE / DROP VIEW เลือกที่ SQL เลือกที่ ส่งมาเป็ นไฟล์<br />

จากนั ้นกด ลงมือ<br />

จะขึ ้นหน้าต่างให้ Save ไฟล์ (ถ้าใช้ Firefox จะขึ ้นหน้าจอให้บันทึกดังภาพ)<br />

โปรแกรมจะท าการดาวน์โหลดไฟล์ ฐานข้อมูล ให้เราเก็บไว้ในเครื่องก่อน (ไฟล์ *.sql)<br />

คู่มือติดตั ้งและใช้งาน Joomla!


90<br />

4. จากนั ้น เปิ ด Browser ขึ ้นมาอีก ที่ช่อง Address ให้พิมพ์ https://www.phpago.ago.go.th ท าการ แล้ว<br />

ท าการ กรอก Username และ Password กดปุ ่ ม GO เพื่อล็อกอินเข้า phpmyadmin ของ host<br />

การเข้าจัดการฐานข้อมูลด้วยโปรแกรม phpmyadmin ของแต่ละ host จะแตกต่างกัน แล้วแต่ control<br />

panel ที่ทาง host เลือกใช้<br />

5. เมื่อล็อกอินเข้า phpmyadmin เรียบร้อยแล้ว ด้านซ้ายให้เลือกฐานข้อมูลของเรา ตามภาพ<br />

คู่มือติดตั ้งและใช้งาน Joomla!


91<br />

จากนั ้นให้ท าการ import ฐานข้อมูล ด้วยเมนู import ดังรูป<br />

กดปุ ่ ม เรียกดู (Browse) เลือกไฟล์ SQL ที่เซฟไว้ตามขั ้นตอนข้างต้น จากนั ้นกด GO เพื่อ<br />

น าเข้าฐานข้อมูล<br />

คู่มือติดตั ้งและใช้งาน Joomla!


92<br />

6. แก้ไขไฟล์ configuration.php ที่อยู่ใน Joomla วิธีคือเปิ ดโฟลเดอร์ สคริป joomla ที่เรา<br />

จะท าการอัพโหลดขึ ้นบน host จากนั ้นหาไฟล์ configuretion.php เลือกเปิ ดด้วยโปรแกรม text<br />

editor อะไรก็ได้ (Dreamweaver, Notepad, Edit plus)<br />

ท าการแก้ไข โดยหาบรรทัดที่มีค าดังต่อไปนี ้ดังต่อไปนี ้<br />

//ชื ่อผู ้ใช้ฐานข้อมูล MySQL<br />

“XXXXXXXX” //รหัสผ่านฐานข้อมูล MySQL<br />

// ชื ่อฐานข้อมูล<br />

//เปลี่ยนเป็ นพาทไดเรกทอรี่ของ Host<br />

//เปลี่ยนเป็ นพาทไดเรกทอรี่ของ Host<br />

ให้เปลี่ยนตามนี ้<br />

เปลี่ยนจาก ‘C:\\AppServ\\www\\Joomla\logs’ =>เปลี่ยนเป็ น ‘/home/ago/ชื่อเว็บไซต์เรา ไม่ต้องมี www น าหน้า/logs’<br />

เปลี่ยนจาก ‘C:\\AppServ\\www\\Joomla\tmp’ =>เปลี่ยนเป็ น ‘/home/ago/ชื่อเว็บไซต์เรา ไม่ต้องมี www น าหน้า/tmp’<br />

คู่มือติดตั ้งและใช้งาน Joomla!


้<br />

93<br />

หากไม่รู้พาทของ host ก็สามารถดูได้ดังนี<br />

- ท าการสร้างไฟล์ php ขึ ้นมา 1 ไฟล์ ท าใน notepad ก็ได้ ใส่สคริป php นี ้ลงไป<br />

เซฟ เป็ นชื่อ phpinfo.php แล้วท าการอัพโหลดขึ ้น host เรียกตาม url<br />

(http://www.youdomain.com/phpinfo.php) ท าการหาพาทได้ในนั ้น<br />

เมื่อแก้ไขเสร็จแล้ว save ไฟล์ configuration.php ท าการอัพโหลดขึ ้น host จริง<br />

7. โดยใช้โปรแกรม FTP<br />

อัพโหลดสคริปไฟล์ joomla ทั ้งหมดขึ ้นบน host เป็ นอันเสร็จสิ้น<br />

*** การอัพ โหลด joomla จากเครื่องขึ ้น host ใช้เพียงการแก้ไขไฟล์ configuretion.php เพียงไฟล์<br />

เดียว ส าคัญต้องใส่พาท ชื่อฐานข้อมูล ชื่อผู้ใช้ฐานข้อมูลและรหัสผ่านให้ถูกต้อง<br />

คู่มือติดตั ้งและใช้งาน Joomla!


คู่มือติดตั ้งและใช้งาน Joomla!<br />

94

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!