manualjoomla1.5 - stks – science and technology knowledge services
TRANSCRIPT
เว็บไซตงาย รวดเร็วดวย Joomla (version 1.5)
บุญเลิศ อรุณพิบูลย ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี (http://stks.or.th)
สํานักงานพัฒนาวิทยาศาสตรและเทคโนโลยีแหงชาติ
คํานํา
การพัฒนาเว็บไซตในปจจุบนัไดมีการพฒันาไปอยางมาก โดยเฉพาะเมื่อมีการสรางเครื่องมือชวยจัดการเนื้อหาของเว็บไซตทีเ่รียกวา CMS: Content Management System สงผลใหการออกแบบพัฒนาเว็บเปนเรื่องงาย สะดวกและรวดเร็วมากขึ้น
Joomla นับเปน CMS ที่มีความสามารถสูงมากโปรแกรมหนึ่ง มีจุดเดนในการจัดการเนื้อหาบทความที่หลากหลายรูปแบบ รองรับสื่อหลายฟอรแมต อีกทั้งมีหนาตาของเว็บที่สวยงาม พรอมดวยโปรแกรมเสริมใหเลือกตามความตองการของหนวยงาน โดยเฉพาะจุดสําคัญคือ เปนซอฟตแวรในกลุมเปดเผยตนฉบับ (Source Code) หรือ Open Source Software ทําใหไมมีคาใชจายในการจดัหาซอฟตแวร อีกทั้งสามารถปรับประยุกตแกไขใหเหมาะสมกับแตละหนวยงานได
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี เห็นความสําคัญของการจัดสื่อและคูมือเผยแพรการใชงาน Joomla จึงไดจัดทําคูมือฉบับนี้ขึ้นมาเพื่อเปนเอกสารตั้งตนสําหรับผูสนใจทุกทาน ทั้งนี้เนื้อหาและเทคนิคเพิ่มเติมทานที่สนใจสามารถติดตามไดจากเว็บไซต http://stks.or.th/elearning
หากคูมอืนี้มีขอผิดพลาดประการใด ผูเขียนขออภยัไว ณ ที่นี้และขอขอบคุณสําหรับคําแนะนําจากทุกทานเพื่อปรับปรุงในโอกาสตอไป
บุญเลิศ อรุณพิบูลย
16 เมษายน 2551
สารบัญ เทคโนโลยีเว็บเพจ .............................................................................................................................................1 องคประกอบของเทคโนโลยีเว็บ .......................................................................................................................3
เทคโนโลยีอินเทอรเน็ต...............................................................................................................................3 เอกสารเว็บ ..................................................................................................................................................3 เว็บเบราวเซอร (Web Browser) ..................................................................................................................4 Markup Language ......................................................................................................................................7
HTML ...................................................................................................................................................7 SGML....................................................................................................................................................8 XML......................................................................................................................................................8
Style Sheet Technology .............................................................................................................................9 CSS........................................................................................................................................................9 XSL .......................................................................................................................................................9
รูปภาพ ......................................................................................................................................................10 ไฟลสกุล GIF (Graphics Interlace File)..............................................................................................10 ไฟลสกุล JPG (Joint Photographer’s Experts Group) ........................................................................10 ไฟลสกุล PNG (Portable Network Graphics).....................................................................................11
การออกแบบเว็บเพจ ........................................................................................................................................12 หลักการพัฒนาเว็บเพจ.....................................................................................................................................13
ขั้นเตรียมการ ............................................................................................................................................14 คําถามเพื่อชวยในการวางแผนเว็บไซต ...............................................................................................14
กําหนดโครงรางของเว็บ...........................................................................................................................14 กําหนดโฟลเดอร (Folder) ที่ใชเก็บเอกสารเว็บ .......................................................................................16 สรางภาพหรือจัดหาภาพที่เกี่ยวของกับเนื้อหา .........................................................................................17 สรางเอกสารประกอบ...............................................................................................................................17 เลือกเครืองแมขาย WWW และระบบการสรางงาน .................................................................................17 สรางเอกสารเว็บ .......................................................................................................................................18 ตรวจสอบเอกสารเว็บ ...............................................................................................................................19 สงขอมูลขึ้นเครื่องบริการเว็บ ...................................................................................................................19
เครื่องมือพัฒนาเว็บ..........................................................................................................................................21 Text Editor................................................................................................................................................21
HTML Editor ......................................................................................................................................22 HTML Generator ................................................................................................................................22 โปรแกรมบริหารจัดการเนื้อหาเว็บ (CMS).........................................................................................23
CMS เครื่องมือเด็ดพัฒนาเว็บไซต ...................................................................................................................24
Joomla: CMS เด็ดนาใช................................................................................................................................... 26 ติดตั้ง Joomla บนพีซีจําลอง ............................................................................................................................ 28 ติดตั้ง Joomla................................................................................................................................................... 33 สํารวจเว็บใหม................................................................................................................................................. 38 เขาสูระบบผาน Front-end ............................................................................................................................... 41 แกไขขอมูลสมาชิก .......................................................................................................................................... 42 แกไขบทความ ................................................................................................................................................. 43 แบงตอนเนื้อหาดวย Read more….................................................................................................................. 45 สารบัญเนื้อหา.................................................................................................................................................. 47 แทรกรูปภาพ ................................................................................................................................................... 48
ไฟลภาพ ................................................................................................................................................... 51 ควบคุมการแสดงผลบทความ.......................................................................................................................... 52 สืบคนบทความไดงายๆ ดวย Metadata ........................................................................................................... 53 สรางบทความใหม........................................................................................................................................... 54 ปรับแตงเว็บไซตผาน Back-end...................................................................................................................... 56 ขอมูลประกอบการสืบคนของเว็บ................................................................................................................... 58 เขาถึงเนื้อหาไดงาย .......................................................................................................................................... 60 การปรับเปลี่ยนโฉมหนาของเว็บไซต ............................................................................................................. 61 จัดการบทความในเว็บไซต.............................................................................................................................. 64
การแกไขเนื้อหา ....................................................................................................................................... 66 เพิ่มประสิทธิภาพการสืบคนใหกับบทความ ............................................................................................ 70
ตกแตงดวยรูปภาพ........................................................................................................................................... 71 ลบภาพ...................................................................................................................................................... 72
ทํางานกับสื่อรูปแบบตางๆ .............................................................................................................................. 73 ทํางานกับเมนู .................................................................................................................................................. 74
ปรับแกไขเมนู........................................................................................................................................... 74 Components .................................................................................................................................................... 77
แบบสอบถามออนไลน (Poll) .................................................................................................................. 77 ปายโฆษณา (Banner) ............................................................................................................................... 79 ดึงขาวมาแสดงผลอัตโนมัติ...................................................................................................................... 81 ดาวนโหลด/ติดตั้ง Components............................................................................................................... 82
พัฒนาเว็บตามตองการ .................................................................................................................................... 83 ปรับเว็บไซตในโหมด Backend ...................................................................................................................... 89
ปรับคาระบบเว็บไซต (Global Configuration)......................................................................................... 89 วิเคราะหเนื้อหาเว็บไซต .................................................................................................................................. 94 สรางเนื้อหา “แนะนําเว็บไซต”........................................................................................................................ 96
สรางเนื้อหา “ทีมพัฒนา” ...............................................................................................................................101 เนื้อหาหมวดคลังความรู ................................................................................................................................108 แบบสอบถามออนไลน (Poll)........................................................................................................................115 Web Resources ..............................................................................................................................................117 ปายโฆษณา (Banner) ....................................................................................................................................121 คลังภาพออนไลน ..........................................................................................................................................125 คลังเอกสาร คลังดาวนโหลด .........................................................................................................................129
Upload เอกสารดวย Media Manager .....................................................................................................131 สรางคลังดาวนโหลดเอกสาร .................................................................................................................131
ขาวประกาศอัตโนมัติแบบ RSS Feed ...........................................................................................................135 ติดตอทีมพัฒนา ผูดูแลเว็บ .............................................................................................................................138 เพิ่มชุดเมนู .....................................................................................................................................................140 สรางบัญชีสมาชิก ..........................................................................................................................................142 เมนูเฉพาะสมาชิก ..........................................................................................................................................146
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 1 -
เทคโนโลยเีว็บเพจ
การนําเสนอขอมูลในระบบ WWW (World Wide Web) พัฒนาขึ้นมาในชวงปลายป 1989 โดยทีมงานจากหองปฏิบัติการทางจุลภาคฟสิกสแหงยุโรป (European Particle Physics Labs) หรือที่รูจักกนัในนาม CERN (Conseil European pour la Recherche Nucleaire) ประเทศสวิตเซอรแลนด ทีมงานไดคดิคนวิธีการถายทอดเอกสารขอมูลที่อยูในรูปแบบ HyperText ไปยังระบบคอมพิวเตอรอ่ืนๆ และเครือขายอินเทอรเนต็ ผลที่ไดคือ โปรโตคอล HTTP (HyperText Transport Protocol) และภาษาที่ใชสนับสนนุการเผยแพรเอกสารของนักวิจัย หรือเอกสารเว็บ (Web Document) จากเครื่องแมขาย (Server) ไปยังสถานที่ตางๆ ในระบบ WWW เรียกวา ภาษา HTML (HyperText Markup Language)
ดวยเทคโนโลยี HTTP และ HTML ทําให การถายทอดขอมูลเอกสารมีความคลองตัว สามารถเชื่อมไปยังจุดตางๆ ของเอกสาร เพิ่มความนาสนใจในการอานเอกสาร ใชงานเอกสาร จนไดรับความนิยมอยางสูงในปจจุบัน การเผยแพรขอมูลทางอินเทอรเน็ตผานสื่อประเภทเว็บเพจ (Webpage) เปนที่นยิมกันอยางสูง ไมเฉพาะขอมูลโฆษณาสินคา ยังรวมไปถึงขอมูลทางการแพทย การเรยีน งานวิจยัตางๆ เพราะเขาถึงกลุมผูสนใจไดทั่วโลก ตลอดจนขอมูลที่นําเสนอออกไป สามารถเผยแพรไดทั้งขอมูลตัวอักษร ขอมูลภาพ ขอมูลเสียง และภาพเคลื่อนไหว มีลูกเลนและเทคนิคการนําเสนอที่หลากหลาย อันสงผลใหระบบ WWW เติบโตเปนหนึ่งในรูปแบบบริการที่ไดรับความนยิมสูงสุดของระบบอินเทอรเนต็
ลักษณะเดนของการนําเสนอขอมูลเว็บเพจ คือ สามารถเชื่อมโยงขอมูลไปยังจุดอืน่ๆ บนหนาเว็บได ตลอดจนสามารถเชื่อมโยงไปยังเว็บอืน่ๆ ในระบบเครือขาย อันเปนทีม่าของคําวา HyperText หรือขอความที่มีความสามารถมากกวาขอความปกตนิั่นเอง จึงมีลักษณะคลายกับวาผูอานเอกสารเว็บ สามารถโตตอบกับเอกสารนั้นๆ ดวยตนเอง ตลอดเวลาที่มกีารใชงานนั่นเอง ดวยความสามารถดังกลาวขางตน จงึมีผูใหคํานิยาม Web ไวดังนี้
The Web is a Graphical Hypertext Information System. การนําเสนอขอมูลผานเว็บ เปนการนาํเสนอดวยขอมูลที่สามารถเรียกหรอืโยงไปยังจุดอืน่ๆ ในระบบกราฟก ซ่ึงทําใหขอมูลนั้นๆ มีจุดดึงดดูใหนาเรียกด ู
เว็บไซตงาย รวดเร็วดวย Joomla 2
The Web is Cross-Platform. ขอมูลบนเว็บไมยดึติดกบัระบบปฏิบัติการ (Operating System: OS) เนื่องจากขอมูลนั้นๆ ถูกจัดเก็บเปน Text File ดังนั้นไมวาจะถูกเก็บไวในคอมพิวเตอรทีใ่ช OS เปนUNIX หรือ Windows NT ก็สามารถเรียกดจูากคอมพิวเตอรที่ใช OS ตางจากคอมพวิเตอรที่เปนเครื่องแมขายได
The Web is distributed. ขอมูลในเครือขายอินเทอรเนต็มีปริมาณมากจากทัว่โลก และผูใชจากทุกแหงหนที่สามารถตอเขาระบบอินเทอรเนต็ได ก็สามารถเรียกดูขอมูลไดตลอดเวลา ดังนั้นขอมูลในระบบอินเทอรเน็ตจึงสามารถเผยแพรไดรวดเรว็ และกวางไกล
รูปแสดงการเชื่อมตอของคอมพิวเตอรหลากหลายรูปแบบ (Cross-platform)
The Web is interactive. การทํางานบนเว็บเปนการทํางานแบบโตตอบกับผูใชโดยธรรมชาติอยูแลว ดังนัน้เว็บจึงเปนระบบ Interactive ในตัวมันเอง เร่ิมตั้งแตผูใชเปดโปรแกรมดูผลเว็บ (Browser) พิมพช่ือเรียกเว็บ (URL: Uniform Resource Locator) เมื่อเอกสารเว็บแสดงผลผานเบราวเซอร ผูใชก็สามารถคลิกเลือกรายการ หรือขอมูลที่สนใจ อันเปนการทํางานแบบโตตอบไปในตัวนั่นเอง
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 3 -
องคประกอบของเทคโนโลยีเว็บ
เมื่อเว็บเพจเปนสื่อในการนําเสนอขอมูลที่ไดรับความสนใจมาก การเรียนรูเทคโนโลยีดานนี้ เพื่อนํามาพัฒนาเว็บเพจดวยตนเอง จึงเปนสิ่งที่นาสนใจ ทั้งนี้การพัฒนาเว็บเพจ จะตองทําความรูจักกบัสวนประกอบตางๆ หลายสวนไดแก เว็บเบราวเซอร, ภาษากํากบั รวมทั้งฟอรแมตภาพตางๆ ที่เหมาะสมกับการพัฒนาเว็บ
เทคโนโลยอีินเทอรเน็ต
อินเทอรเน็ต (Internet) เปนระบบเครือขายที่เชื่อมโยงคอมพิวเตอรจากทุกระบบ ทุกรูปแบบ เขาสูระบบรวม ทําใหคอมพวิเตอรในระบบสามารถติดตอส่ือสารกันได อันเกิดใหเกิดความสะดวก รวดเร็วในการติดตอประสานงาน เผยแพรขาวสาร การใชอินเทอรเน็ต มีหลากหลายลักษณะ เชนการใชอินเทอรเน็ตกับคอมพวิเตอรในสํานักงาน, ที่บาน, ระบบเคลื่อนที่หรือพกพาดวย Notebook Computer/Palmtop รวมทั้งโทรศัพทมือถือบางรุน
เอกสารเว็บ
เอกสารเว็บ นับเปนหวัใจหลักของการเผยแพรขอมูลในเครือขายอินเทอรเน็ต ขอมูลตางๆ จะถูกสรางและพัฒนาออกมาในรูปของเอกสารเฉพาะรูปแบบทีส่ามารถนําเสนอไดอยางเหมาะสม อยางไรกต็ามเอกสารเวบ็ก็มีลักษณะคลายคลึงกับเอกสารงานพิมพทั่วไป คือประกอบดวยหนาเว็บมากกวา 1 หนาโดยมีหนาแรกเปนหนาปก แตมีการเรียกชื่อแตกตางจากเอกสารงานพมิพทั่วไป ดังนี ้
ชุดเอกสารเว็บ (Web Presentation) – ชุดของขอมูลที่ตองนําเสนอบนระบบอินเทอรเน็ต ประกอบดวยเว็บเพจ (Web Page) ตั้งแต 1 หนาขึ้นไป
เว็บเพจ (Web Pages หรือ Web Documents) – เอกสารที่นาํเสนอผลงานบนระบบอินเทอรเน็ต
Home Page – หนาแรกของเอกสารเว็บ
Homepage
Webpage Webpage Webpage Webpage Webpage
เว็บไซตงาย รวดเร็วดวย Joomla 4
ปจจุบันมหีลายคนที่มักสับสนกับการใชคําวา เว็บเพจ เวบ็ไซด และโฮมเพจ โฆษณาหลายแหงลงประกาศรับจางสรางโฮมเพจ ถาแปลกันตรงๆ หมายถึงวา เขารับจางสรางกันแคหนาโฮมเพจหนาเดียว หนาเว็บเพจอื่นๆ ไมรับ? บางคนใชเว็บไซดแทนเว็บเพจ ใชโฮมเพจแทนเว็บไซด ปนกันไป อยางไรก็ดีคนไทยหลายคนคุนเคยกับคําวา โฮมเพจ มากกวา เว็บเพจ ดังนั้นการสื่อสารบางครั้งตองระวัง
เว็บเบราวเซอร (Web Browser)
เอกสารเว็บทีพ่ัฒนาแลวสามารถเรียกดูไดดวยโปรแกรมเว็บเบราวเซอร (Web Browser) โดยโปรแกรมจะทําหนาแปลภาษา HTML หรือภาษาอืน่ๆ ที่นํามาสรางเอกสารเว็บ แลวแสดงผลดวยขอกําหนดบนจอภาพ โปรแกรมเบราวเซอรตัวแรกไดแก Mosaic ซ่ึงพัฒนาโดยทีมงานจาก NCSA (National Center for Supercomputing Application) มหาวิทยาลัยอิลลินอยส ประเทศสหรัฐอเมริกา เปนโปรแกรมที่ทําหนาที่แปลคําสั่ง และขอมูลที่อยูในรูปของภาษา HTML ใหเปนรูปแบบที่นาสนใจบนจอคอมพวิเตอร
โปรแกรมเบราวเซอรตัวแรกไดแก Mosaic ซ่ึงพัฒนาโดยทีมงานจาก NCSA (National Center for Supercomputing Application) มหาวิทยาลัยอิลลินอยส ประเทศสหรัฐอเมริกา เปนโปรแกรมที่ทําหนาที่แปลคาํสั่ง และขอมูลที่อยูในรูปของภาษา HTML ใหเปนรูปแบบที่นาสนใจบนจอคอมพิวเตอร (http://archive.ncsa.uiuc.edu/SDG/Software/Mosaic/NCSAMosaicHome.html)
รูปแสดงโลโกของเว็บเบราวเซอร Mosaic
ในปจจุบนัมีผูผลิตโปรแกรมเบราวเซอรออกมาเผยแพรหลายราย เว็บเบราวเซอรแตละคายแขงขันกนัในเรื่องความเร็ว ขนาดแฟมภาพที่มีขนาดเล็ก ฟงกชันชวยเหลือตางๆ เชน ระบบปองกันการบกุรุก การจดจําขอมูลของผูใช การตรวจสอบและปรับปรุงอัตโนมัติ ตัวอยางเว็บเบราวเซอรที่มีการใชกันในปจจุบัน ไดแก
Internet Explorer www.microsoft.com/ie Netscape www.netscape.com Mozilla www.mozilla.org Opera www.opera.com American Online www.aol.com Lynx lynx.browser.org Amaya www.w3.org/amaya
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 5 -
รูปแสดงเบราวเซอรคาย Microsoft
รูปแสดงเบราวเซอรคาย Mozilla
เนื่องจากเว็บเบราวเซอรมีการพัฒนาออกมาจากหลากหลายบริษัท แตละบริษัทพัฒนาฟงกชันการแสดงผลเอกสารเว็บที่แตกตางกันออกไป การพัฒนาเว็บไซตจึงจําเปนตองศึกษาถึงคุณสมบัติของเว็บเบราวเซอรแตละโปรแกรม ทั้งนี้ไดสรุปคุณสมบัติในการแสดงผลเอกสารเว็บ ดังตาราง (ขอมูลจาก http://en.wikipedia.org/wiki/Comparison_of_web_browsers, 14 มิถุนายน 2551)
เว็บไซตงาย รวดเร็วดวย Joomla 6
Browser
CSS2
.1
Fram
es
Java
Nav L
INKs
XSLT
XHTM
L 1.0
XHTM
L 1.1
Math
ML
XFor
ms
RSS
Atom
Web
For
ms
Voice
XML/
X
WM
L
Amaya Yes No No ? No Yes Yes Yes No No No No No No
AOL Explorer Partial Yes Yes No Yes No No No † No Yes Yes No No No
Avant Partial Yes Yes ? Yes No No No No Yes Yes No No No
Camino Yes Yes Yes No Yes Yes Yes Yes No Partial Partial No No No
Dillo No Partial † No No No No No No No No No No No No
ELinks Partial Yes No ? No No No No No No No No No ?
Epiphany Yes Yes Yes No Yes Yes Yes Yes Yes Partial † Partial † No † No No
Flock Yes Yes Yes ? Yes Yes Yes Yes Yes Yes Yes No No No
Galeon Yes Yes Yes ? Yes Yes Yes Yes No No No No No No
iCab Yes Yes Yes Yes No No No No No Yes No No No No
Internet Explorer
Partial Yes Yes No † Yes No No No † No Yes † Yes † No † No No
Internet Explorer for Mac
Partial Yes Yes ? Partial No Yes No No No No No No No
K-Meleon Yes Yes Yes ? Yes Yes Yes No No Yes Yes No No No
Konqueror Yes Yes Yes Yes No Yes Yes No No Yes † Yes † No No No
Links No Yes No Yes No No No No No No No No No No
Lynx No Partial No Yes No No No No No No No No No No
Maxthon Partial Yes Yes ? Yes No No No No Yes Yes No No No
Mosaic No No No ? No No No No No No No No No No
Mozilla Yes Yes Yes Yes Yes Yes Yes Yes No No No No No No
Mozilla Firefox Yes Yes Yes No † Yes Yes Partial † Yes Yes Yes Yes No † No No
Netscape Yes Yes Yes ? Yes Yes Yes Yes No No No No No No
Netscape Browser
Depends Yes Yes ? Yes Depends Depends Depends No Yes Yes No No No
Netscape Navigator
No Yes Yes No No No No No No No No No No No
Netscape Navigator 9
Yes Yes Yes No Yes Yes Yes Yes Yes Yes Yes No No No
OmniWeb Yes Yes Yes ? No Yes Yes No No Yes Yes No No No
Opera Yes Yes Yes Yes Yes Yes Yes Yes † No Yes Yes Yes Yes Yes
e-Capsule TM Private Browser
Yes Yes Yes Yes Yes Yes Yes Yes Partial No No No No No
Safari Yes Yes Yes No Yes Yes Yes No No Yes Yes No No No
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 7 -
Browser
CSS2
.1
Fram
es
Java
Nav L
INKs
XSLT
XHTM
L 1.0
XHTM
L 1.1
Math
ML
XFor
ms
RSS
Atom
Web
For
ms
Voice
XML/
X
WM
L
SeaMonkey Yes Yes Yes Yes Yes Yes Yes Yes Yes No No No No No
Shiira Yes Yes Yes ? Yes Yes Yes No No Yes Yes No No No
WorldWideWeb No No No ? No No No No No No No No No ?
w3m ? Yes No ? No Yes ? No ? No No No No No
Markup Language
Markup Language หรือภาษากํากับ เปนภาษาทีน่ิยมใชในการพัฒนาเอกสารเว็บ มีลักษณะโครงสรางคือ พิมพในเครื่องหมาย < > และมีการเปด/ปดคําสั่ง เพื่อระบุตําแหนงเร่ิมตนคําสั่ง และตําแหนงสุดทายของคําสั่ง ภาษากํากบัที่รูจักกันดีในการพัฒนาเวบ็ ก็คือภาษา HTML ในปจจุบันมีการพฒันาภาษากํากบัหลายลักษณะ นอกเหนือจาก HTML เชน ภาษา XHTML (eXtensible HTML), XML (eXtensible Markup Language), MathML (Math Markup Language)
HTML
HTML หรือ HyperText Markup Language เปนภาษาคอมพิวเตอรรูปแบบหนึ่ง ทีม่ีลักษณะเปนภาษาในเชิงการบรรยายเอกสารไฮเปอรมีเดีย (Hypermedia Document Description Language) เพือ่นําเสนอเอกสารนั้นเผยแพรในระบบเครอืขาย WWW (World Wide Web) มีโครงสรางการเขียนที่อาศยัตวักํากับ เรียกวา แท็ก (Tag) ควบคุมการแสดงผลของขอความ, รูปภาพหรือวตัถุอ่ืนๆ ผานโปรแกรมเบราวเซอร (Browser)
HTML มีพัฒนาจากภาษา SGML (Standardized General Markup Language) โดยนํามาปรับปรุงใหใชงานไดงายขึ้น สะดวกกวา SGML พัฒนามาเรื่อยๆ จาก HTML 2 จนถึง 4.01 ในปจจุบนั รายละเอยีดการพัฒนาภาษา HTML สามารถศึกษาไดจาก http://www.w3.org
<HTML> <HEAD> <TITLE>ทดสอบการสรางเอกสารเว็บ</TITLE> </HEAD> <BODY> ทดสอบการสรางเอกสารเว็บ<BR> การสรางเอกสารเว็บ จะอาศัยภาษา HTML <IMG SRC= “image.jpg”> </BODY> </HTML>
เว็บไซตงาย รวดเร็วดวย Joomla 8
SGML
SGML (Standardized Markup Language) เปนภาษาตนแบบของภาษากํากับทั้งหมด พัฒนามาในป ค.ศ. 1986 เนื่องจากปญหาในการแลกเปลี่ยนเอกสารขอมูลระหวางกันในระบบเครือขายอินเทอรเน็ตยุคแรกๆ จึงมีนักวิจยักลุมหนึ่ง พฒันาเครื่องมือในการแลกเปลี่ยนขอมูลระหวางกัน ซ่ึงคุณสมบัติเบือ้งตนของเครื่องมือดังกลาว คือ ตองยืดหยุน สามารถรองรับขอมูลรูปแบบแปลกๆ ในอนาคตได ใชไดทัว่โลก และในคอมพิวเตอรทุกรูปแบบ จากขอกําหนดดังกลาว จึงเกิดภาษา SGML มีการเกบ็ขอมูลในรูปรหัส ASCII เพราะคอมพวิเตอรทั่วไปสามารถอานขอมูลลักษณะนีไ้ดเหมือนๆ กนั และแบงการทํางานของ SGML เปน 2 สวนคือ
สวนประกาศโครงสรางขอมูล (DTD: Document Type Definition) ทําหนาที่ประกาศรายละเอียดของแทก็ี่จะใชแสดงขอมูล
สวนตัวเอกสาร (Document Body) เปนสวนหลักของเอกสาร ประกอบดวยแท็กคําสั่งตางๆ
ภาษา SGML เปนขอกําหนด (เชนเดยีวกับมาตรฐาน ISO) ที่กําหนดวิธีการอธบิายโครงสรางของเอกสารฝงไวในตัวเอกสารเอง หมูนักศึกษา อาจารยและผูจดัทําเอกสารอิเล็กทรอนิกส นิยมใช SGML ในการสรางรูปแบบตางๆ จากเอกสารฉบับเดียว และใชในการนําเอาเอกสารมาใชใหม อยางไรก็ตาม SGML ไมไดรับความนิยมมากนัก เพราะมคีวามยุงยากในการนําไปประยุกตใชงาน การจัดเก็บขอมูล ความยืดหยุนและลักษณะเฉพาะที่เกินความตองการ ทําใหยากตอการเขยีนโปรแกรม
XML
XML (eXtensible Markup Language) ถูกออกแบบมาเพื่อใหผูสรางเอกสารสามารถนําไปใชงานในรูปแบบวิธีการที่งาย มีความชัดเจนและเปนเซตยอยของ SGML (Standard Generalized Markup Language) ซ่ึงเปนภาษาที่นยิมใชและไดรับการพัฒนาใหมีประสิทธิภาพสูงสุดในการทาํงานบนเว็บ โดย XML ประกอบดวย 3 สวนพื้นฐานดวยกัน คือ เอกสารขอมูล (Data document) เอกสารนิยามความหมาย (definition document) และนิยามภาษา (definition language)
XML เปนภาษาที่กําลังมาแรงมากที่สุด สําหรับใชในการพัฒนาระบบขอมูลขาวสารในปจจุบัน ดวยความงายในการนําไปใชงานสําหรับการแลกเปลี่ยนขอมูลขาวสารทางอิเล็กทรอนิกสหรือ EDI ทาํใหสามารถนํารูปแบบขอมูลกลับมาพัฒนาใชใหมได จงึทําใหลดเวลาในการพฒันาและการสรางขึ้นมาใหม
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 9 -
Style Sheet Technology
เทคโนโลยีสไตลชีท เปนสวนเพิ่มเติมขยายความสามารถของ Markup Language ชวยใหการแสดงผลเอกสารเว็บ มีความสวยงาม มาตรฐาน ระบบระเบยีบในทิศทางเดยีวกัน
CSS
CSS (Cascading Style Sheet) ถูกนํามาใชในการควบคุมการแสดงผลเอกสารของเอกสาร HMTL และ XML ทั้งนี้ CSS มีจดุเดน คือ การควบคุม HTML แท็กแตละตวั และการควบคุมการแสดงผลกราฟกตางๆ ที่สามารถทําไดงาย นอกจากนี้เมื่อมีการเปลี่ยนแปลงขอกําหนดของ CSS ในเอกสารหลัก ก็จะมีผลตอเพจอื่นๆ ทั้งหมด ทําใหประหยดัเวลาในการปรับเปลี่ยนแกไขเว็บไซต อยางไรก็ตาม CSS ก็ยังมีปญหาการแสดงบนเบราวเซอรตางคายตางรุน กอนใชงาน CSS จึงควรตรวจสอบผลกับเว็บเบราวเซอรใหครบ หรือมากที่สุด
<STYLE TYPE="text/css"> <!-- body { text-decoration: none; color: navy; font-family: "arial"; font-size: 12pt; font-weight: medium; } --> </STYLE>
XSL
XSL ยอมาจาก the eXtensible Style Language เปนมาตรฐานใหมที่เกิดขึ้นมาเพือ่รองรับกับขอมูลที่เปน XML ทั้งนี้ XSL จะเปนสวนทีบ่อกวาขอมูล หรือเอกสารที่จัดเก็บเปนแฟมเอกสาร XML จะมีการแสดงผลเปนรูปรางหนาตาเชนไร นอกจากนี้ยังใช XSL ในการแปลงรูปแบบ (format) ของขอมูลไดดวย เชน แปลงเอกสาร XML ไปเปน HTML หรือ PDF เปนตน
เอกสาร XSL คลายกับเอกสาร CSS ในกรณีที่ทั้งสองเอกสารมีการกําหนดสไตลที่ประยุกตไปยัง element ที่แนนอน แตมีส่ิงแตกตางกันเล็กนอย CSS จะกําหนดสไตลการพิมพเฉพาะ HTML Element เทานั้น ในทางตรงขาม XSL สามารถที่จะควบคุมขอมูลที่สงออกมาไดอยางสมบูรณกวา อีกทั้งขอมูลที่จะนําเสนอนั้นจะมีอิสระตอการปรับปรุงหรือเพิ่มขอมูล XSLใหสามารถจัดเรียงและกรองขอมูล XML ไดงายกวาดวย
เว็บไซตงาย รวดเร็วดวย Joomla 46
การยกเลิกการแบงตอนเนื้อหา ก็สามารถทําไดโดยคลกิที่เสนประสแีดง แลวกดปุม <Delete> แลวบันทึก บทความจะแสดงผลยาวตอเนื่องไมมีลิงก “Read more…” ดังนี ้
เว็บไซตงาย รวดเร็วดวย Joomla 10
รูปภาพ
เอกสารเว็บคงขาดสวนแสดงผลดวยรูปภาพมิไดอยางแนนอน อยางไรก็ตามการนําเสนอรูปภาพสําหรับเอกสารเว็บก็มีฟอรแมตภาพเฉพาะ ภาพกราฟก หรือรูปกราฟกที่นํามาใชในการทําเว็บเพจ หรือนํามาใชในอินเทอรเน็ต จะตองเปนแฟมลักษณะเฉพาะ ปจจุบนันิยมใชกัน 3 ฟอรแมต คือ
• แฟมภาพฟอรแมต JPEG (Joint Photographer’s Experts Group File)
• แฟมภาพฟอรแมต GIF (Graphics Interlace File)
• แฟมภาพฟอรแมต PNG (Portable Network Graphics)
แฟมภาพสกุล GIF (Graphics Interlace File)
ภาพกราฟกสกุล GIF พัฒนาโดยบรษิัท CompuServe จัดเปนแฟมภาพสําหรับ การเผยแพรผานอินเทอรเน็ตตั้งแตยุคแรก เนื่องจากมีลักษณะเดน คือ
• สามารถใชงานขามระบบ (Cross Platform) ไมวาจะใช Windows หรือ Unix ก็สามารถเรียกใชแฟมภาพสกลุนี้ได
• มีขนาดแฟมเอกสารเล็กจากเทคโนโลยีการบีบอัดภาพ ทําใหสามารถสงแฟมภาพไดรวดเรว็
• สามารถทําพื้นของภาพใหเปนพื้นแบบโปรงใสได (Transparent)
• มีระบบแสดงผลแบบหยาบและคอยๆ ขยายไปสูละเอียดในระบบ Interlace
• มีโปรแกรมสนับสนุนการสรางจํานวนมาก
• เรียกดไูดกับ Graphics Browser ทุกตัว
• ความสามารถดานการนําเสนอแบบภาพเคลื่อนไหว (GIF Animation)
• แฟมภาพชนิดนี้ก็มีจุดดอยในเรื่องของการแสดงสี ซ่ึงแสดงไดเพยีง 256 สี
แฟมภาพสกุล JPG (Joint Photographer’s Experts Group)
เนื่องจากแฟมภาพสกุล GIF แสดงผลไดเพียง 256 สี จึงมีการพฒันาแฟมภาพสกุล JPEG เพื่อสนับสนุนสีไดถึง 24 bit และคณุสมบัติอ่ืนๆ อีกคือ
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 11 -
• สามารถใชงานขามระบบ (Cross Platform) หมายความวา ระบบคอมพิวเตอรทุกระบบ ไมวาจะใช Windows, Unix ก็สามารถเรียกใชแฟมภาพสกุลนีไ้ด
• สามารถกําหนดคาการบีบแฟมไดตามที่ตองการ ดวยเทคนิคการบีบอัดคงสัญญาณหลัก (Lossy compression) โดยนาํบางสวนของภาพที่ซํ้าซอนออกไป คงไวเฉพาะขอมูลสําคัญเทานั้น
• มีระบบแสดงผลแบบหยาบและคอยๆ ขยายไปสูละเอียดในระบบ Progressive คลาย Interlaced
• มีโปรแกรมสนับสนุนการสรางจํานวนมาก
• เรียกดไูดกับ Graphics Browser ทุกตัว
อยางไรก็ตามแฟมภาพสกุลนี้ก็มีจุดดอย คอื
• พื้นของภาพโปรงใสไมได
• ถามีการบันทึกซ้ําหลายๆ คร้ัง จะทําใหคณุภาพของภาพลดลงไปดวย
แฟมภาพสกุล PNG (Portable Network Graphics)
แฟมภาพสกุลลาสุดที่นําจุดเดนของแฟมภาพ GIF และ JPEG มาพัฒนารวมกนั ทําใหภาพในสกุลนีแ้สดงผลสีไดมากกวา 256 สี และยังสามารถทําพื้นภาพใหโปรงใสได จึงเปนไฟลภาพที่ไดรับความนยิมมากในปจจุบันดวยอีกสกุลหนึ่ง คุณสมบัติของภาพคือ
• สามารถใชงานขามระบบ (Cross Platform) หมายความวา ระบบคอมพิวเตอรทุกระบบ ไมวาจะใช Windows, Unix ก็สามารถเรียกใชแฟมภาพสกุลนี้ได
• ขนาดแฟมภาพเล็ก ดวยเทคนิคการบีบอัดคงสัญญาณ LZW
• สามารถทําภาพโปรงใสจากสีพื้น 256 ระดบั
• แสดงภาพแบบสอดประสานเชนเดยีวกับ GIF โดยมีความคมชัดที่ดีกวา
• มีคุณสมบัติ Gamma ทําใหภาพสามารถปรับตัวเองไดตามจอภาพ และปรับระดบัความสวางที่แทจริงตามที่ควรจะเปน
เว็บไซตงาย รวดเร็วดวย Joomla 12
การออกแบบเว็บเพจ
การออกแบบและพัฒนาเว็บเพจ สามารถทําไดหลายระบบ ขึ้นอยูกับลักษณะของขอมูล ความชอบของผูพัฒนา ตลอดจนกลุมเปาหมายที่ตองการนําเสนอ เชน หากกลุมเปาหมายเปนเด็กวัยรุน และนําเสนอขอมูลเกี่ยวกับความบันเทงิ อาจจะออกแบบใหมี ทิศทางการไหลของหนาเว็บที่หลากหลายใชลูกเลนไดมากกวาเว็บทีน่ําเสนอใหกับผูใหญ หรือเว็บดานวิชาการ ทั้งนี้การออกแบบเว็บเพจ สามารถแบงไดสามลักษณะ คือ
• แบบลําดับขั้น (Hierarchy) เปนการจัดแสดงหนาเว็บเรยีงตามลําดับกิ่งกานแตกแขนงตอเนื่องไปเหมือนตนไมกลับหัว เหมาะสําหรับการนําเสนอขอมูลที่มี การแบงเปนหมวดหมูทีไ่มมากนัก และมีขอมูลยอยไมลึกมาก เชนเว็บไซตแนะนําประวัติสวนตวั ที่มีขอมูล 4 - 5 หนาเปนตน
• แบบเชิงเสน (Linear) เปนการจัดแสดงหนาเว็บเรยีงตอเนื่องไปในทิศทางเดียว เหมาะสําหรับการนําเสนอขอมูลที่เปนรูปภาพ เชนเว็บไซตนําเสนอสไลดจาก Microsoft PowerPoint
• แบบผสม (Combination) เปนการจัดหนาเว็บชนิดผสมระหวางแบบลําดับขั้น และ
แบบเชิงเสน มกัจะเปนแบบที่นิยมใชกันอยางแพรหลายในปจจุบนั เนือ่งจากสามารถควบคุมการนําเสนอและการเรียกดไูดสะดวก และรวดเร็ว
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 13 -
หลกัการพฒันาเว็บเพจ
การพัฒนาเว็บเพจ ควรมกีารวางแผนกอนเสมอ เพื่อใหการแสดงผลเวบ็ถูกตอง ตรงกับความตองการ เพราะขบวนการพัฒนาเว็บเพจ จะตองเกีย่วของกับระบบปฏิบัติการหลายระบบ กลาวคือ ขณะที่สรางเอกสารเว็บ ผูพฒันาอาจจะใชคอมพิวเตอรทีม่ีระบบปฏิบัติการ MS Windows แตหลังจากทีพ่ัฒนาเสร็จแลวจะตองโอนเอกสารเว็บไปเก็บไวในเครื่องบริการเว็บ (Web Server) ซ่ึงมักจะเปนเครื่องที่ใชระบบปฏิบัติการ UNIX หรือไมก็ Windows 2000 เอกสารเว็บที่โอนไปยงัเครื่องบริการเว็บนี ้ อาจจะถูกเรยีกดจูากคอมพิวเตอรระบบอื่นๆ เชน Macintosh ซ่ึงใชระบบปฏิบัติการ System 7 จะเห็นไดวาเอกสารเว็บจะตองเกี่ยวของกับระบบปฏิบัติการหลายระบบ ดังนั้นการพัฒนาเว็บเพจตองคํานึงถึงสิ่งเหลานี้ดวย
รูปแสดงการทาํงานของเอกสารเว็บที่สัมพันธกับระบบปฏิบัติการตางๆ
จากความสัมพนัธดังกลาว นักพัฒนาเว็บเพจ จึงควรจะศึกษาถึงขอกาํหนดพืน้ฐานที่ควรทราบกอน อันไดแก การกําหนดชื่อโฟลเดอร แฟมเอกสารเว็บ แฟมภาพกราฟก ตลอดจนแฟมเอกสารอืน่ๆ ที่จะนํามาใชในการทําเวบ็เพจ เพราะระบบปฏิบัติการ UNIX มีลักษณะการตั้งชื่อแบบ Case-Sensitive หมายถึง ตวัอักษรตัวพิมพใหญ และตวัพมิพเล็ก (A และ a) จะถือวาเปนตัวอักษรคนละตัวกัน ไมเหมือนกับระบบปฏิบัติการดอส และวินโดวส จะถือวาเปนตัวอักษรตวัเดยีวกัน
Index.html ≠ index.html
ดังนั้นหากผูพฒันาใชระบบปฏิบัติการดอส และวินโดวส สรางเอกสารเว็บ และกําหนดชื่อไฟล Index.htm แตขณะที่ปอนคําสั่งเพื่อลิงกแฟมเอกสารผานแปนพิมพเปน index.html เมือ่โอนถายเอกสารเว็บนั้นๆ ไปยังเครื่องบริการเว็บที่ใช UNIX เปนระบบปฏิบัติ จะเกิดปญหาในการเรียกดูได เพราะระบบปฏิบัติการที่เครื่องบริการเว็บจะเหน็เปนแฟมคนละแฟม เนื่องจากชื่อแฟมเอกสารไมเหมือนกนั
พัฒนาเว็บบนระบบ Win98/Me/XP Web Server Win2000/Unix
Macintosh
PC: Win Me Intranet FTP Browse
เว็บไซตงาย รวดเร็วดวย Joomla 14
ข้ันเตรียมการ
การพัฒนาเว็บไซต ควรกําหนดวัตถุประสงค เปาหมายการจัดทํา ศึกษาจุดเดนจดุดอยของเทคโนโลยีที่จะนํามาใชงาน เพื่อใหการพัฒนาเกิดผลสัมฤทธิ์สูงสุด
คําถามเพื่อชวยในการวางแผนเว็บไซต
• ช่ือโครงการ/เว็บไซต
• กลุมเปาหมาย
• วัตถุประสงค/เปาหมาย
• ขอมูลที่ตองการนําเสนอตอกลุมเปาหมาย
• ขอมูลใดที่พรอมสําหรับนําเสนอ
• ขอมูลอ่ืนๆ ประกอบเว็บไซต
• จํานวนหนาเวบ็ที่ตองการพฒันา
• หนวยงาน/กลุม/ทีมงานพัฒนาเว็บไซต
• หัวหนาโครงการ
• ผูบริหารระบบ
• ความถี่ในการปรับปรุงเว็บไซต
• การตรวจสอบขอมูลยอนกลับจากกลุมเปาหมาย
• ผูรับผิดชอบตรวจสอบขอมูลยอนกลับจากกลุมเปาหมาย/ตอบคําถาม
• คียเวิรดสําหรับเว็บไซต
• หมวดของเว็บไซต
• การประชาสัมพันธเว็บไซต
• ระบบคอมพิวเตอร เครือขายที่ตองการ
• เทคโนโลยีที่ตองการ
• Domain name สําหรับเว็บไซต
กําหนดโครงรางของเว็บ
การกําหนดโครงรางของเว็บ เปนขั้นตอนสําคัญขั้นแรกก็วาได เพราะเอกสารเวบ็ที่สรางจะเพิ่มจํานวนเรื่อยๆ และมีจุดเชื่อม (Link) จํานวนมาก หากไมมกีารวางแผนไวกอน จะทําใหการปรับปรุง แกไขเกดิปญหาไดงาย ปญหาที่ประสบแนนอนคือ ลืมวาแฟมเอกสารที่เคยสรางไวแลว มีช่ืออะไรบาง ซ่ึงจะสงผลใหการทําจดุเชื่อมเกิดปญหาตามไปดวย เพราะแฟมเหลานี้อาจจะทิ้งชวงเวลานานพอสมควร จึงจะปรับปรุงอีกครั้ง วิธีการที่ดีที่สุดเพื่อปองกัน
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 15 -
ปญหาดังกลาว ควรวางแผนออกแบบเอกสารเว็บบนกระดาษ และกาํหนดชื่อแฟมเอกสารเว็บแตละแฟม จากขั้นตอนนีจ้ะทําใหผูพฒันาสามารถมองเห็นภาพการไหล (Data Flow) ของเอกสารเว็บไดชัดเจน และพิจารณาตอไดวาเอกสารเวบ็แตละแฟมมคีวามสัมพันธกับเอกสารอ่ืนๆ อยางไร และสัมพันธกบัแฟมเอกสารใดบาง
การกําหนดชื่อแฟมเอกสารเวบ็ มีขอกําหนดทีแ่ตกตางไปจากการกําหนดชื่อแฟมเอกสารปกติทัว่ไป คือ
ช่ือแฟมและนามสกุล จะถูกควบคุมจาก Web Administer ดังนั้นผูพฒันาที่ไมใช Web Administer จะตองสอบถามกฎการตั้งชื่อโดยละเอยีด โดยปกติ มหีลักคราวๆ ดังนี ้- ควรใชตัวอักษร a – z หรือตวัเลข 0 – 9 หรือผสมกัน - ตัวอักษร a – z ควรเปนตวัพมิพเล็ก - หามใชเครื่องหมายอื่นใดรวมทั้งชองวาง ยกเวน Dash (ขีดกลาง)
นอกจากนี้ยังจะตองพิจารณาถึงลักษณะหนาเว็บ, ลักษณะของสีพื้น, สีอักษรและสีของจุดเชื่อม (Links) ดวย โดยสามารถรางหนาเว็บคราวๆ เพื่อใหเห็นภาพโดยรวมกอนสรางงานจริง รวมทั้งการใชสีของหนาเว็บ ควรใชสีที่อานงาย สบายตา และมีลักษณะรวมกันในทุกๆ หนาเว็บ ไมควรเปลี่ยนสีพืน้ใหฉูดฉาด รวมทั้งศึกษาหนาเว็บไซตที่มกีารพัฒนาในเครือขายเพื่อเปนแนวทางในการออกแบบ
รูปแสดงภาพรางของหนาเวบ็
เว็บไซตงาย รวดเร็วดวย Joomla 16
กําหนดโฟลเดอร (Folder) ที่ใชเก็บเอกสารเว็บ
การกําหนดโฟลเดอรกอนที่จะสรางชุดเอกสารเว็บเพจ เปนลําดับขั้นตอนที่ควรปฏิบัติดวยทุกครั้ง เพื่อใหเอกสารเว็บแตละชดุมรีะบบการจัดเก็บที่เปนระบบ สามารถคนหา และเรียกใชงานไดสะดวก ในการสรางชุดเอกสารเว็บแตละชุด จะมีไฟลตางๆ จํานวนมาก ทั้งไฟลเอกสาร HTML, ไฟลภาพกราฟก, ไฟลเสียง, ไฟลวดีิทัศน และอื่นๆ ทีเ่กี่ยวของ ไฟลทั้งหมดนี้ ควรจัดเก็บไวในที่ที่เดยีวกัน อาจจะสรางโฟลเดอรยอยเพื่อแยกกลุมไฟลได แตจะตองสรางภายใตโฟลเดอรหลักที่สรางไวกอนแลว ไมควรแยกไวคนละที่ เพราะจะทําใหการจดัการเว็บมีปญหายุงยากได (การตั้งชื่อโฟลเดอรใชหลักการเดยีวกับชื่อไฟล)
การสรางโฟลเดอร เลือกไดรฟและโฟลเดอรหลักที่ตองการสรางโฟลเดอรยอย เลือกเมนูคําสั่ง File, New, Folder ปรากฏไอคอนโฟลเดอร ช่ือ New Folder
พิมพช่ือโฟลเดอรใหม หากไมสามารถพิมพได ใหกดปุมฟงกชัน @ กอน เมื่อพิมพช่ือโฟลเดอรเสร็จแลว ใหกดปุม E สามารถสรางโฟลเดอรยอยๆ ภายใตโฟลเดอรนี้ได
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 17 -
สรางภาพหรือจัดหาภาพที่เกี่ยวของกับเนื้อหา
เอกสารเว็บตองเกี่ยวของกับรูปภาพโดยตรง ดังนั้นควรสรางภาพ หรือจัดหาภาพ แลวคัดลอกมาไวในโฟลเดอรที่ไดจัดเตรยีมไว เพื่อใหสะดวกในการเรยีกใชงาน และการบริหารเว็บไซตในอนาคตการจัดเกบ็ไฟลไวในโฟลเดอรที่เตรียมไว ยังรวมถึงไฟลตางๆ ที่จะนํามาใชประกอบการสรางเว็บ เชนไฟลเอกสารจากเวิรด กระดาษคํานวณ นําเสนอผลงานตางๆ จะตองดําเนินการลักษณะเดยีวกับไฟลภาพเชนกนั ทั้งนี้ช่ือไฟลตางๆ ที่นํามาใชประกอบการสรางเว็บก็ตองตั้งโดยยดึหลักเดยีวกับการตั้งชื่อไฟลเอกสารเว็บ
ไฟลภาพที่ไมสามารถนํามาสรางเอกสารเว็บ เพราะมีสวนขยายเปน .bmp, .tif
สรางเอกสารประกอบ
นอกจากภาพแลว อาจจะมไีฟลประกอบอืน่ๆ เชน Word, PowerPoint, PDF Document ก็จะตองเตรียมไวในโฟลเดอรที่สรางไวใหพรอม โดยอาจจะสรางเปนโฟลเดอรเฉพาะของแตละไฟลฟอรแมต
ไฟลเอกสารตางๆ ที่ผิดพลาด เพราะชื่อไฟลเปนภาษาไทย หรือมีชองวาง
เลือกเครืองแมขาย WWW และระบบการสรางงาน
การสรางเว็บไซตในปจจุบนั ยอมหนีไมพนความตองการดานโปรแกรมมิ่ง เชน ตองการตัวนับจํานวนการเขาชมเว็บไซต (Counter) ตองการกระดานขาว (Web board) ตองการสมุดเยี่ยม (Guestbook) หรือฟงกชันสูงๆ เชน ระบบสมาชิก แตนักพฒันาเว็บไซตมักจะลืมไปวาระบบโปรแกรมบนเว็บ เปนระบบที่สัมพันธกับระบบปฏิบัติการ ดังนั้นกอนสรางเว็บไซต ควรพิจารณาใหแนนอนวาเวบ็ที่พัฒนา จะนําไปเก็บไวบนเครื่องแมขายที่ใชระบบปฏิบัติการใด เพราะหากเลือกผิดพลาด กจ็ะทําใหเว็บนั้นมีปญหาอีกมากมาย
เว็บไซตงาย รวดเร็วดวย Joomla 18
ระบบปฏิบัติการและอื่นๆ ระบบปฏิบัติ Windows ระบบปฏิบัติ UNIX ภาษาโปรแกรมที่สนับสนุน ASP, VB Script, Java,
JavaScript Perl, PHP, JavaScript, Java
ช่ือไฟลแรก default.htm index.html นามสกุล .htm, .html มักเปน .html การตั้งชื่อไฟล, โฟลเดอร สนับสนุนภาษาไทย ภาษาอังกฤษเทานั้น
ดังนั้นการพิจารณาเลือกเครื่องแมขาย WWW และระบบปฏิบัติกอนสรางเว็บไซต จะชวยใหเว็บไซตนั้น ไมเกิดปญหาตามมาทหีลัง เชน รันโปรแกรมไมได, มีปญหาเรื่องการเรียกไฟลตางๆ ซ่ึงเปนปญหาที่นกัพัฒนาเว็บมอืใหมเกือบทกุรายประสบ
สรางเอกสารเว็บ
ไฟลเอกสาร HTML เปนไฟลขอความปกติ (Text File) ดังนั้นสามารถใชโปรแกรมสรางเอกสารโปรแกรมใดก็ได ชวยในการลงรหัสคําสั่ง HTML เชน NotePad, WordPad นอกจากนี้ในปจจุบันมีโปรแกรมชวยในการสรางเอกสารเว็บอีกหลายระบบ ดังที่แนะนําไปแลว
จากที่กลาวไววาไฟลเอกสาร HTML เปนไฟลขอความปกติ ดังนั้นเพือ่ใหโปรแกรมเบราวเซอรทราบวาไฟลเอกสารนี้ เปนไฟลเฉพาะสาํหรับกําหนดรูปแบบการแสดงผลผานอินเทอรเน็ต จึงมีลักษณะเฉพาะของไฟลเอกสารรูปแบบนี้คือ ในการจัดเก็บไฟล จะตองกําหนดนามสกุล หรือสวนขยายของไฟล (File Extension) เปน .htm หรือ .html โดยขอกําหนดเกี่ยวกับนามสกุลของไฟลนี้ ขึ้นอยูกับผูบริหารเครือขายเว็บ ดังนั้นกอนสรางเอกสาร HTML ควรสอบถามจากผูบริหารเครือขายที่ทานจะนําขอมูลไปฝากไวกอนวาใหกําหนดนามสกุลของไฟลอยางไร
นอกจากการกาํหนดนามสกลุของไฟล ช่ือไฟลก็เปนอีกสวนหนึ่งที่ผูพัฒนาตองตระหนกัดวย เพราะผูใหบริการเผยแพรขอมูล หรือผูดูแลระบบเครือขาย อาจจะกําหนดชื่อไฟลเอกสาร HTML แตกตางกันออกไป
สําหรับการตั้งชื่อและนามสกุลของไฟล HTML เปนภาษาไทย เปนสิ่งที่ไมควรกระทําเปนอยางยิ่ง เพราะระบบปฏิบัติการหลายระบบไมสนับสนุนภาษาไทย และควรใชตัวอักษรตัวพิมพเล็กในการกําหนดชื่อและนามสกุลของไฟลทุกครั้ง เพื่อปองกันปญหาการทํางานขามระบบปฏิบัติการ เนื่องจากระบบปฏิบัติการหลายระบบ โดยเฉพาะ UNIX จะเหน็ตัวอักษรตัวพิมพใหญ และตัวพิมพเล็กเปนคนละตวักัน (Case-Sensitive)
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 19 -
ตรวจสอบเอกสารเว็บ
ขณะที่สรางเอกสารเว็บ ควรตรวจสอบผลผานโปรแกรมแสดงผลเบราวเซอรหลายคาย หลายรุน (หากทําได) เพราะโปรแกรมเบราวเซอรแตละคาย แตละรุน จะรูจัก หรือใหผลลัพธจากคําสั่ง HTML ไมเหมือนกัน จะไดทราบขอบกพรอง ขอผิดพลาด และสามารถแกไขไดทัน กอนที่จะสงขึ้นไปแสดงผลจริงในระบบอนิเทอรเน็ต
ขอที่ควรคํานึงถึงในการทําเวบ็เชิงพาณิชยกค็ือ ภาษา HTML เปนภาษาที่ยังไมตาย ยังมีการพัฒนาชุดคําสั่งใหมๆ อยูเร่ือยๆ ดังนั้นอยาพยายามไลตามเทคโนโลยีใหมๆ เหลานี้ ควรพัฒนาเว็บเพจที่สามารถเรียกดูไดจากเบราวเซอรหลายๆ รุน หลายคาย ดีกวายึดคายใด คายหนึ่ง หรือรุนใด รุนหนึ่ง มิฉะนั้นอาจจะทําใหพลาดจากลูกคาบางกลุมไปได
ขอมูลจาก http://truehits.net/ (วันที่ 14 มิถุนายน 2551)
สงขอมูลข้ึนเคร่ืองบริการเว็บ
เมื่อไดพัฒนาเอกสารเว็บ และตรวจสอบผลไดตามที่ตองการแลว กส็ามารถโอนขอมูลนั้นๆ ไปยังเครื่องบริการเว็บได โดยใชโปรแกรมกลุมถายโอนขอมูล (FTP Software) เชน WinFTP, CuteFTP รวมทั้งฟงกชัน FTP ของ Macromedia Dreamweaver เปนตน
กอนโอนขอมลู จะตองขอสิทธิ์และพื้นที่จากผูดูแลระบบกอนเสมอ และตลอดจนตองสอบถามขอมูลที่จําเปนในการโอนขอมูล เชนชื่อบัญชีของผูมีสิทธิ์ (Login Name / Account Name), รหัสผานของบัญชี (Password) เปนตน
เว็บไซตงาย รวดเร็วดวย Joomla 20
ตัวอยางขอมูลเครื่องบริการเว็บ (Web Server)
Site Name abc.com
Email Contact [email protected]
DNS Primary Name Server: ns5.thdns.net 111.111.111.111 Secondary Name Server: ns6.thdns.net 222.222.222.22
Admin Site www.abc.com/admin
Administrator User Name abc
Password bbc9999
Mail Site www.abc.com/mail
User Site www.abc.com/user
Name Based Address 111.111.111.111
FTP 333.333.333.333
Username [email protected]
Password Abc9090
Disk Space 500.0 MB
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 21 -
เครื่องมอืพัฒนาเว็บ
การพัฒนาเว็บเพจ สามารถกระทําไดโดยการใชภาษา HTML ซ่ึงมีลักษณะการเขยีนโปรแกรมภาษาดวยวิธีการลงรหัสคําสั่ง คลายกับการเขียนโปรแกรมภาษาคอมพิวเตอรทั่วๆ ไป แตในปจจุบันมีเครื่องมือชวยพัฒนาหลากหลายรูปแบบ ทั้งแบบชวยลงรหัส HTML และแบบสรางงานอัตโนมัติ (Wizard) ทั้งนี้สามารถจําแนกการสราง/พัฒนาเวบ็เพจดวยโปรแกรมตางๆ ได 4 วิธี คือ
• การพัฒนาเว็บเพจดวยการลงรหัส HTML ดวยโปรแกรม Text Editor • การพัฒนาเว็บเพจดวยการลงรหัส HTML ดวยโปรแกรม HTML Editor • การพัฒนาเว็บเพจดวยโปรแกรมสรางงานอัตโนมัติ หรือ HTML Generator • การพัฒนาเว็บเพจดวยซอฟตแวรบริหารจดัการเนื้อหา (Content Management
Software)
Text Editor
การใช Text Editor เชน NotePad, Qeditor เปนวิธีที่เหมาะสําหรับนักพฒันาเว็บเพจทีม่ีความรูเกี่ยวกบัภาษา HTML ในระดับสูง และตองการใสลูกเลนใหกบัเว็บเพจ เพราะผูพัฒนาสามารถควบคุมตําแหนง และจํานวนรหสัคําสั่งไดอิสระ อยางไรก็ตามวิธีนี้ก็ไมเหมาะสําหรับผูพัฒนาในระดับตน เพราะตองศึกษาคําสัง่ HTML และใชเวลาในการพัฒนาพอสมควรในแตละหนาเว็บ ตลอดจนไมเหน็ผลลัพธจากการปอนคําสั่งทันที ตองเรียกผานโปรแกรมเบราวเซอร
เว็บไซตงาย รวดเร็วดวย Joomla 22
HTML Editor
โปรแกรม HTML Editor ที่นิยมกนัอยางสูงในปจจุบนั ไดแก โปรแกรม HomeSiteX, Coffee Cup HTML Editor, HTML Assistant, HotDog Professional โดยโปรแกรมเหลานี้ จะชวยใหการลงรหัสกระทําไดสะดวก และรวดเร็ว เพราะมีปุมคําสั่งควบคุมรหัสคําสั่ง HTML คลายๆ กับปุมคําสั่งใน Microsoft Office อยางไรก็ตามโปรแกรมกลุมนี้ก็มีจุดดอย คือ จะไมรูจักคําสั่ง HTML ใหมๆ จึงไมมีปุมคําสั่งเหลานี้ ผูใชยังตองพิมพเองเชนเดิม
จอภาพโปรแกรม HTML Editor
HTML Generator
HTML Generator เปนโปรแกรมรุนใหม ที่ชวยใหการพัฒนาเอกสารเว็บ กระทาํไดสะดวก และรวดเร็ว เพราะการปอนขอมูลในโปรแกรมเหลานีจ้ะกระทําคลายกับการปอนขอมูลใน Microsoft Word มีปุมคําสั่งเชนเดียวกัน ตลอดจนผูใชสามารถเห็นผลจากการใชคําสั่งไดทันที ซ่ึงเรียกวาการทํางานแบบ WYSIWYG (What You See Is What You Get) หลังจากนั้นโปรแกรมจะแปลงเอกสารนั้นเปนเอกสาร HTML ใหโดยอัตโนมตัิ โดยที่ผูใชไมตองยุงยากกับศึกษาชดุคาํสั่ง HTML ตลอดจนการลงรหัส HTML อยางไรก็ตามโปรแกรมกลุมนี้ก็มีจุดดอยที่วา ชุดคําสั่ง HTML ในโปรแกรมแตละโปรแกรมจะมีจาํกัด และบางโปรแกรมยังไมสนับสนุนการทํางานกับภาษาไทย หรืออาจจะตองปรบัปรุงโปรแกรมกอน จึงจะใชงานภาษาไทยได ซ่ึงสรางความยุงยากใหกับผูใชไดพอสมควร ตัวอยางโปรแกรมในกลุมนี้ เชน MS-Office 97/2000/XP, FrontPage 97/98, Netscape Editor, Netscape Composer, Macromedia DreamWeaver และ Yahoo SiteBuilder
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 23 -
จอภาพโปรแกรม Yahoo Site Builder
โปรแกรมบริหารจัดการเนื้อหาเว็บ (CMS)
ปจจุบันมีการพัฒนาซอฟตแวรทําหนาที่บริหารจัดการเนื้อหาเว็บ (CMS: Content Mnagement System) ที่ประกอบดวยฟงกชันการทํางานตางๆ เชน การจัดการสมาชิก การจัดการหมวดเนื้อหา การจัดทําแบบสํารวจพรอมใชงานอยางไรก็ตามผูใชจะตองมีความรูในดานระบบปฏบิัติการในระดบัที่สูงมาก รวมทั้งตองมีเครื่องแมขายเวบ็พรอมใชงาน โปรแกรมในกลุมนี้ไดแก PHPNuke, PostNuke, Joomla, Mambo, Drupal
รูปแสดงสวนควบคุมการจัดการเนื้อหาลักษณะตางๆ ของโปรแกรม PHPNuke
เว็บไซตงาย รวดเร็วดวย Joomla 24
CMS เครื่องมอืเดด็พัฒนาเว็บไซต
การออกแบบพัฒนาเว็บไซตในปจจุบันไดกาวไปอีกขัน้ จากเดิมทีที่ผูพัฒนาจะตองศึกษาภาษา HTML หรือเวบ็โปรแกรมมิ่งเชน PHP ASP แตดวยพฒันาการของเทคโนโลยีเว็บในดานเครื่องมือออกแบบเวบ็ไซตสําเร็จรูปที่เรียกวา ซอฟตแวรบริหารจัดการเนือ้หาเว็บไซต (Content Management System: CMS) ทําใหการออกแบบพัฒนาเว็บไซตเปนเรื่องงาย สะดวก และรวดเร็ว
CMS เปนซอฟตแวรที่ออกแบบมาเพื่อชวยอํานวยความสะดวกในการบริหารจัดการเอกสารและเนือ้หารูปแบบตางๆ โดยเฉพาะสื่อดิจิทัลของเว็บไซต โดยมาก CMS จะเปนซอฟตแวรที่ทาํงานผานระบบเครือขาย พัฒนาดวยภาษาคอมพวิเตอรสําหรับเว็บ (Web Programming) เชน PHP, ASP ผสานกับระบบจัดการฐานขอมูล ปจจุบัน CMS ที่ชวยในการออกแบบเว็บไซตมีหลากหลาย เชน Joomla, Mambo, PHPNuke, PostNuke, Drupal ซ่ึงทานที่สนใจสามารถเปรียบเทียบความสามารถของ CMS ไดที่เว็บไซต http://www.cmsmatrix.org
รูปแสดงเว็บไซต www.cmsmatrix.org
การเปรียบเทยีบก็ทําไดไมยาก โดยคลิกเลอืก CMS ที่ตองการเชน Drupal กับ Joomla แลวคลิกปุม compare รอสักครูจะปรากฏรายงาน ดังนี ้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 25 -
รูปแสดงผลการเปรียบเทียบ CMS จากเว็บไซต cmsmatrix.org
เว็บไซตงาย รวดเร็วดวย Joomla 26
Joomla: CMS เด็ดนาใช
Joomla นับเปน CMS ที่มีความโดดเดนมากโปรแกรมหนึ่ง เนื่องจากรองรับงานที่หลากหลาย และเนื้อหาหลากฟอรแมต ดวยการพฒันาในรูปแบบเปดเผยตนฉบับ (Open Source) ทําใหมีชุมชนนกัพัฒนาขนาดใหญที่รวมกันพัฒนาโปรแกรมเสริม (Extensions) ตลอดเวลา
รูปแสดงการเลือกใช Joomla, Mambo และ Drupal จากเว็บ trends.google.com
(ณ วันที่ 13 กรกฎาคม 2551)
Joomla เปนซอฟตแวรทีม่ีระบบจัดการเนื้อหาอยางเปนระบบ ทั้งการจัดหมวดหมู การนําเขา การเผยแพร และกระบวนการทํางานกับผูใชประเภทตางๆ สามารถนําไปประยุกตใชกับงานไดหลากหลาย ทั้งเวบ็สวนตัว เวบ็หนวยงาน เว็บจัดการความรู เว็บทางการคา และการศึกษา สําหรับทานที่สนใจเลือกใช Joomla สามารถดาวนโหลดที่ http://www.joomla.org
รูปแสดงเว็บ joomla.org
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 27 -
ฟงกชันทํางานในสวน CMS ของ Joomla มีลักษณะเปน Graphics User Interface ทําใหงายตอการจัดการเนื้อหาที่มีความหลากหลายทางดานรูปแบบ โดยมีจุดเดนดังนี ้
1. Front-end และ Back-end
Joomla มีหนาเว็บไซตสําหรับการเขาชมของผูเยี่ยมชมและสามารถล็อกอินเพื่อเขาทํางานของสมาชิก เรียกวา Front-end รวมทั้งไดออกแบบสวนทํางานเบื้องหลังที่เรียกวา Back-end เพื่อควบคุมระบบการทํางานในภาพรวมของ Joomla โดยแยก URL ออกจากกนัอยางชดัเจน
2. Access rights
Joomla กําหนดสิทธิ์ในการเขาถึงเนื้อหาของเว็บไวหลายรูปแบบ โดยแยกเปนสิทธิ์เขาถึงจากหนาเว็บ Front-end และ Back-end แตกตางกันออกไป
3. Content
Joomla แบงประเภทของเนื้อหาออกเปนหลากหลายประเภท เชน บทความ เว็บแนะนํา แบบสอบถาม แตจัดการไดงายดวยสวนบรหิารจัดการทีจ่ดัเตรียมมาใหเฉพาะและพรอมใชงาน พรอมระบบติดตาม/นาํเสนอเนื้อหาอยางงาย (Simple workflow system) และการสรุปเนือ้หาในรูปแบบ RSS
จากจุดเดนดังกลาวขางตนสงผลให Joomla เปน CMS ที่ไดรับความนยิมอยางมาก จนไดรับรางวัล The Best CMS Award ป 2550
ที่มา: http://www.packtpub.com/article/joomla-wins-best-php-open-source-content-management-system
เว็บไซตงาย รวดเร็วดวย Joomla 28
ติดตั้ง Joomla บนพีซีจําลอง
หลายๆ ทานทีส่นใจใชงาน Joomla คงมีปญหาเกี่ยวกับพื้นที่บริการเวบ็ (Web Hosting) เนื่องจากตองอาศัยเครื่องแมขายเว็บ (Web Server) ที่ติดตั้งโปรแกรมภาษา PHP ฐานขอมูล MySQL แตปญหานี้หมดไปไดโดยการจําลองเครื่องพีซีธรรมดาใหเปนเครื่องแมขายเวบ็แบบจําลอง ทัง้นี้โปรแกรมจาํลองเครื่องพีซีเปนเครื่องแมขายเว็บจําลอง มีหลายโปรแกรม เชน XAMPP หรือ AppServ ทั้งนี้โปรแกรมทีจ่ะแนะนําในเอกสารคูมือนี้คือ AppServ โปรแกรมสําเร็จรูปที่ประกอบดวยโปรแกรมจําลองเครื่องแมขายเวบ็ Apache โปรแกรมจัดการฐานขอมูล MySQL และโปรแกรมแปลภาษา PHP ไวดวยกนั รุนปจจุบนัดาวนโหลดไดที่เว็บไซต http://www.appservnetwork.com
ไฟลที่ดาวนโหลดมาได คอื appserv-win32-2.5.9.exe เมื่อดับเบิลคลิกจะปรากฏสวน
ติดตั้งโปรแกรม ดังนี ้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 29 -
จากจอภาพตอนรับการติดตั้ง AppServ ใหคลิกปุม Next เพื่อเขาสูสวนลิขสิทธิ์
คลิก I Agree เพื่อยอมรับลิขสิทธิ์การใชงานเชนกนั
จอภาพถัดไปคือระบุไดรฟ และโฟลเดอรสําหรับติดตั้ง Appserv โดยโปรแกรม
กําหนดไวทีไ่ดรฟ C โฟลเดอร AppServ ใหคลิก Next เพื่อยอมรับการกําหนดไดรฟและโฟลเดอร
เว็บไซตงาย รวดเร็วดวย Joomla 30
สวนนี้เปนการเลือกวาจะติดตั้งโปรแกรมใดบาง กรณนีีใ้หคลิกเลือกทกุรายการ แลว
คลิกปุม Next
สวนสําคัญในการติดตั้ง คือ
1. การระบุช่ือเครื่องแมขายเวบ็ (Server Name) กรณีที่เปนการติดตั้งจําลองมักจะระบุเปน localhost (สําหรับการติดตั้งจริง จะตองสอบถามจากผูดูแลเครื่องแมขายเว็บโดยตรง)
2. การระบุอีเมลของผูดูแล (Administrator’s Email Address)
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 31 -
3. การระบุหมายเลขชองทางติดตอ (Apache HTTP Port) มักจะระบุเปนเลข 80
เมื่อกําหนดคาตางๆ แลวก็คลิกปุม Next เพื่อเขาสูสวนกาํหนดคาควบคุมของฐานขอมูล
MySQL
1. กําหนดรหัสผานของการเขาถึงฐานขอมูล MySQL ในรายการ Enter root
password และระบุซํ้าในรายการ Re-enter root password
2. เลือกรหัสภาษาไทยใหถูกตองตามคากําหนดของเครื่องแมขาย กรณีนี้ควรระบุเปน UTF-8 Unicode หรือ TIS-620 (ตามขอกําหนดของเครื่องแมขายเวบ็)
Account ชุดแรกที่ตองจําคือ Account ควบคุมฐานขอมูล MySQL โดย User Name คือ root และรหัสผาน คือ ..............................................
เว็บไซตงาย รวดเร็วดวย Joomla 32
เมื่อระบุคาเกีย่วกับการเขาถึงฐานขอมูล MySQL แลวใหคลิกปุม Install เพื่อเร่ิมติดตั้งโปรแกรมตางๆ ของ AppServ
จอภาพแสดงผลเมื่อการติดตัง้สมบูรณ
คลิกเลือก Start Apache และ Start MySQL เพื่อใหโปรแกรมทั้งสองทํางาน จากนัน้
คลิกปุม Finish เพียงเทานี้ก็เสร็จสิ้นการติดตั้ง AppServ ซ่ึงสามารถทดสอบไดโดยเปด เว็บเบราวเซอร จากนั้นพมิพคําสั่ง http://localhost หรือ http://127.0.0.1
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 33 -
ติดตั้ง Joomla
พีซีธรรมดาไดถูกจําลองเปนเครื่องแมขายเวบ็แลว ตอนนีก้็ถึงเวลาที่จะติดตั้ง Joomla เพื่อเนรมิตเว็บไซตภายในไมกี่นาที โดยเริม่จากดาวนโหลดโปรแกรม joomla รุนลาสุด (1.5.2 ณ วนัที่ 1 เม.ย. 2551) จากเวบ็ไซต http://www.joomla.org/
ไฟลที่ดาวนโหลดมาไดคือ Joomla_1.5.2-Stable-Full_Package.zip ใหแตกไฟลซ่ึงจะไดโฟลเดอรช่ือ
ไฟลทั้งหมดในโฟลเดอรดังกลาวคือไฟลตนฉบับของ Joomla ใหคัดลอกโฟลเดอรนี้
ไปไวที่โฟลเดอร www ของ AppServ แลวเปลี่ยนชื่อโฟลเดอรตามตองการ เชน ถาตองการสรางเว็บไซตของตนเอง กใ็ชช่ือตัวเปนชือ่โฟลเดอร หรือเว็บหนวยงาน ก็อาจจะใชช่ือยอของหนวยงานเปนชื่อโฟลเดอร (ตัวอยางขอใชช่ือ joomla15)
ตอนนี้ก็พรอมจะติดตั้ง Joomla โดยเปดเบราวเซอร แลวพมิพคําสั่ง
http://localhost/ชื่อโฟลเดอร
หรือ
http://127.0.0.1/ชื่อโฟลเดอร
(ตัวอยางคือ http://localhost/joomla15 หรือ http://127.0.0.1/joomla15)
เว็บไซตงาย รวดเร็วดวย Joomla 34
ขั้นตอนแรกของการติดตั้งคอื การเลือกภาษาของการตดิตั้ง โดยสามารถเลื่อนจอภาพ
ลงมาเลือกภาษาไทย (th-TH – Thai)ได
จากนั้นคลิกปุม Next เพื่อเขาสูการตรวจสอบสิทธิ์การติดตั้ง
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 35 -
ขั้นตอนนี้จะเปนการตรวจสอบสิทธิ์การเขียนลงในไฟล configuration.php และฟงกชันการทํางานของตัวแปลภาษา PHP แลวคลิกปุมถัดไปจะเขาสูสวนลิขสิทธิ์ของโปรแกรม ในหนานี้ก็คลิกปุมถัดไปไดเชนกัน
สวนนี้เปนหวัใจของการติดตั้ง จะตอง
1. เลือกชนิดของฐานขอมูลที่ตองการใชงาน กรณีนีใ้หเลือก mysql
2. ระบุช่ือโฮสตของฐานขอมูล โดยพิมพ localhost
3. ระบุช่ือผูใชฐานขอมูล ใหพมิพ root
4. กําหนดรหัสผานของฐานขอมูล mysql
5. ระบุช่ือฐานขอมูล เชน joomla15 (แนะนาํใหกําหนดชือ่เดียวกับชื่อโฟลเดอร)
เมื่อระบุขอมูลขางตนแลว กค็ลิกปุมถัดไป จะเขาสูสวนกําหนดคา FTP (File Transfer
Protocol)
เว็บไซตงาย รวดเร็วดวย Joomla 36
ใหคลิกปุมถัดไปไดเลยครับ เพื่อกําหนดขอมูลเกี่ยวกับเวบ็ไซตที่ใกลจะเสร็จสมบูรณ
คาที่ตองระบุไดแก
• ช่ือเว็บไซต เชน Joomla15 : CMS for you
• อีเมลของผูดูแลเว็บ
• รหัสผานของผูดูแลเว็บ (จะตองจําใหไดดวยครับ)
• คลิกปุมติดตั้งขอมูลตัวอยาง
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 37 -
จากนั้นคลิกปุมถัดไป เพื่อใหกระบวนการเสร็จสิ้นอยางสมบูรณ ควรลบโฟลเดอร installation ดวยนะครับ
คลิกปุมดูหนาเว็บไซตจะปรากฏเว็บไซตพรอมขอมูลตัวอยางดังนี ้
เว็บไซตงาย รวดเร็วดวย Joomla 38
สํารวจเว็บใหม
เว็บไซตตวัอยางของ Joomla ไดติดตัง้เรียบรอยแลว การเขาสูเว็บไซตเมื่อติดตัง้เรียบรอยแลวทําไดโดยพิมพ URL ดังนี ้
http://localhost/ชื่อโฟลเดอร หรือ http://127.0.0.1/ชื่อโฟลเดอร
ตัวอยาง http://localhost/joomla15 โดยจอภาพของเว็บไซตที่สรางจากขอมูลตัวอยางของ Joomla นับเปนเว็บตัวอยางทีน่าสนใจ มีขอมูลหลากหลาย ทั้งนี้สวนแรกของเว็บคือ Header ประกอบดวย
Logo ของเว็บไซต ขาวประกาศ
Navigation bar Top Menu Search box
ขาวประกาศ หรือ New Flash แสดงขาวประกาศโดยการสุมขาว
Navigation bar เมนูเขาถึงเนื้อหา เพิ่มความสะดวกในการกลับสูเนื้อหากอนหนาหนาหรือหนาหลัก
สวนประกอบในหนาเว็บ ปรับเปลี่ยนตําแหนงและการนําเสนอตาม Template ที่เลือก โดยจะแนะนําในเนื้อหา “การปรับเปลี่ยนโฉมหนาเวบ็ไซต”
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 39 -
สวนที่สองคือสวนเนื้อหาหลักของเว็บ ประกอบดวย
Menu ตางๆ Module ตางๆ
เนื้อหาหลัก
Menu Menu ของ Joomla มีหลายหมวด และสามารถเพิ่มไดตามลักษณะ รวมทั้งสามารถกําหนดตําแหนงการแสดงผลไดตามงาย สะดวก
Module กรอบเนื้อหาเล็กๆ ที่วางกระจายในหนาเว็บ แสดงเนื้อหาที่หลากหลาย เชน Module Latest News แสดงขาวประกาศลาสุด Module Popular แสดงบทความที่นิยมอาน 5 อันดับแรก Module Polls สอบถามความคิดเห็นของผูใชเว็บ และ Module Who’s Online แสดงขอความจํานวนผูชมเว็บทั้งที่เปนผูเยีย่มชม (Guest) และสมาชิก (Member) ณ เวลาปจจุบนั โดย Module นี้สามารถควบคุมใหแสดง/ไมแสดง สรางใหม และกําหนดตําแหนงใหมได
Main Content พื้นที่กลางจอภาพของเวบ็ไซตที่แสดงบทความหลักของเว็บ โดยบทความลาสุด (หรือบทความหลัก) จะแสดงไวบนสุด และบทความที่มีลําดับรองจะแสดงในลักษณะคอลัมนถัดลงมา
เว็บไซตงาย รวดเร็วดวย Joomla 40
บทความแตละบทความ ประกอบดวยสวนประกอบดังนี้
Title Icons
Author/Created date & time
Read more link Modified date & time Content
Title หัวเร่ืองของบทความ สามารถกําหนดใหแสดง/ไมแสดง และเปน Link ไดดวยคาควบคุมของ Joomla
Author/Created date & time ขอมูลแสดงผูสรางบทความ และวัน/เวลาที่สรางบทความ กําหนดใหแสดงหรือไมแสดงไดเชนกัน
Icons ไอคอนสําหรับแปลงบทความ (Convert) ในรูปเอกสาร PDF ไอคอนส่ังพิมพบทความ และไอคอนแนะนําบทความทางอีเมล สามารถเลือกแสดง/ไมแสดงได ทั้งนี้ไอคอนสั่งพิมพบทความนับเปนไอคอนทีม่ีประโยชนมาก โดย Joomla จะตัด Menu และ Header ออกเพื่อใหสามารถสั่งพิมพไดเฉพาะเนื้อหาบทความเทานั้น
Read more link กรณีที่บทความยาว สามารถกําหนดใหแสดงสวนตนของบทความ และ Joomla จะสรางลิงก Read more เพื่อขยายอานเนื้อหาที่เหลือใหอัตโนมัติ
Modified date & time ขอมูลแสดงวนัที่/เวลาปรับปรุงเนื้อหา เปนสวนสําคัญที่ควรกําหนดใหแสดง เพื่อระบุความทันสมัยของบทความ
Content พื้นที่แสดงเนือ้หาของบทความ
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 41 -
เขาสูระบบผาน Front-end
เว็บไซตหนาแรกที่เขาถึงของ Joomla เรียกวาสวน Front-end ซ่ึงก็คือ Home page ของเว็บไซตนัน่เอง สมาชิกสามารถเขาสูระบบและปรับแกไขบทความ รวมทั้งนําเสนอบทความใหมไดตามสิทธิ์ของสมาชิกที่ถูกกําหนดไวโดยผูดูแลเว็บ (Web Administrator)
สมาชิกชุดแรกของเว็บก็คือ admin นั่นเอง โดยการเขาสูระบบผาน Front-end ทําไดโดยปอนชื่อผูใช (User name) และรหัสผาน (Password) ในสวน Login Form
เมื่อเขาสูระบบแลว สวน Login Form จะแสดงชื่อสมาชิกดังนี ้
นอกจากนี้ยังปรากฏไอคอนสําหรับแกไขเอกสารบทความ ดังนี ้
เว็บไซตงาย รวดเร็วดวย Joomla 42
แกไขขอมลูสมาชกิ
เมื่อสมาชิก Login เขาสูระบบผาน Front-end แลวจะปรากฏชุดกรอบเมนูเพิ่มอีก 1 ชุด คือ User Menu
ซ่ึงสมาชิกสามารถที่จะปรับแกไขขอมูลสวนตัว หรือแกไขรหัสผาน โดยคลิกที่รายการ
เมนู Your Details จากชุดเมนู User Menu
นอกจากนี้ยังสามารถเลือกรูปแบบเว็บไซตและการทํางาน ไดดังนี ้
1. Back-end Language การกําหนดภาษาของเว็บในสวน Back-end
2. Front-end Language การกําหนดภาษาของเว็บในสวน Front-end
3. User Editor เลือกประเภทของ Editor ในการสราง/แกไขบทความ กรณีนี้แนะนําใหเลือก TinyMCE 2.0 สําหรับเลือกใช Editor ในรูปแบบ WYSIWYG เพื่อความสะดวกในการสราง/แกไขบทความโดยไมตองยุงยากกับการลงรหัส HTML
4. Help Site กําหนดความชวยเหลือจากเว็บที่ติดตั้ง Joomla หรือจากเว็บไซตทางการของ Joomla (www.joomla.org)
5. Time Zone เลือก Time zone กรณีนี้คือ UTC+07:00
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 43 -
แกไขบทความ
การแกไขบทความผาน Front-end ทําไดโดยคลิกที่ปุม Edit Article ของบทความนั้นๆ
ปรากฏจอภาพสวนแกไขบทความดังนี ้
เว็บไซตงาย รวดเร็วดวย Joomla 44
ตองการแกไขชื่อบทความ ทาํไดโดยแกไขในรายการ Title
เมื่อคลิกปุม Save จะปรากฏผลลัพธทางเว็บไซตดังนี ้
สําหรับการแกไขบทความ จอภาพแกไขบทความมีลักษณะคลายกับจอภาพการทํางาน
ของ Word Processor ที่หลายๆ ทานคุนเคยเปนอยางดีมากแลว และการทํางานกใ็ชหลักการเดียวกัน จึงไมใชเร่ืองยากทีจ่ะแกไขผานปุมเครื่องมือ ดังนี้
ไมควรปรับเปลี่ยนแบบอักษร (Font) และขนาดอกัษร (Font size)
สามารถทํางานในโหมด HTML ไดโดยคลิกปุม HTML ในแถบเครื่องมือ
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 45 -
แบงตอนเนื้อหาดวย Read more…
กรณีที่เนื้อหาในบทความมีความยาวมากๆ การนําเสนอทั้งหมดผานเวบ็ไซตอาจจะไมนาสนใจเทาทีค่วร Joomla มีคําสั่งแบงตอนและแสดงลิงก Read more… กํากบัเพื่อใหคลิกแสดงเนื้อหาทีเ่หลือ
การแบงตอนเนื้อหา จากตวัอยางจะแสดงดวยเสนประสแีดง ซ่ึงเกิดจากการคลิกบนปุม
ดังนั้นถาตองการแบงตอนขอความ ณ ตําแหนงใด ก็ใหคลิกเมาส ณ ตําแหนง
นั้นแลวคลิกปุม
เสนแบงRead more
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 47 -
สารบัญเนือ้หา
นอกจากการแสดงผลโดยแบงตอนดวย Read more… ยังสามารถแบงตอนเนื้อหาหลายๆ ตอนแลวแสดงผลในรูปแบบสารบัญเนื้อหา ดังตวัอยาง
การสรางสารบัญเนื้อหาทําไดโดยคลิกเมาส ณ ตําแหนงที่ตองการแบงหนาเนื้อหา
จากนั้นคลิกปุม โปรแกรมจะใหกําหนดชือ่กํากับสารบัญ จากนั้นคลกิปุม Insert แลวทําซ้ํา ณ ตําแหนงอืน่ๆ ตามตองการ
• Page Title ควรระบุดวยภาษาอังกฤษ เปนชื่อกํากับตอนแตละตอน
• Table of Contents Alias สามารถใชภาษาไทยได จะเปนขอความที่ปรากฏในรายการเมนูเลือก
ตําแหนงทีก่ําหนดเปน Pagebreak จะแสดงดวยเสนประสีฟาออน สามารถลบไดโดยดับเบิลคลิกที่เสนแลวกดปุม <Delete>
เว็บไซตงาย รวดเร็วดวย Joomla 48
แทรกรูปภาพ
การแทรกรูปภาพในบทความ ใหคลิกเมาส ณ ตําแหนงที่ตองการวางภาพ แลวคลิกปุม
จะปรากฏสวนนําเขาภาพดงันี้
คลิกเลือกภาพที่ตองการ แลวกําหนดรายละเอียดเกีย่วกับภาพ
• Image Description คําอธิบายภาพ
• Image Title ช่ือกํากับภาพ ซ่ึงสามารถกําหนดเปน Caption ไดโดยคลิกเลือกเพิ่มเติม
• Align ตําแหนงวางภาพ
เมื่อคลิกปุม Insert จะปรากฏภาพดังนี ้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 49 -
เมื่อบันทึกจะแสดงผลดังนี้
ภาพที่นําเขาบทความ สามารถแกไขไดโดยคลิกที่ภาพ แลวคลิกปุม Insert/Edit Image
ในแถบเครื่องมือ
โดยปรากฏสวนปรับแกไขดงันี้
เว็บไซตงาย รวดเร็วดวย Joomla 50
กรณีที่ตองการนําเขาภาพเพิม่เติมจากที ่ Joomla จัดเตรียมไว ทาํไดโดยคลิกปุม
แลวเล่ือนจอภาพไปที่รายการ Upload
คลิกปุม Browse Files
เลือกไดรฟและโฟลเดอรที่เก็บภาพ แลวเลือกภาพจากนั้นคลิกปุม Open โปรแกรม
Joomla อนุญาตใหเลือกไฟลภาพในการโอนเขาเว็บไซตไดคร้ังละหลายภาพ
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 51 -
เมื่อไดภาพที่ตองการครบจํานวนแลวจึงคลิกปุม Start Upload
โปรแกรมจะแสดงภาพที่นําเขาเพื่อพรอมใชงานตอไป
ไฟลภาพ
ไฟลภาพที่นําเขาในเวบ็ควรปรับแตงดวยโปรแกรมตกแตงภาพใหมีขนาดที่เหมาะสม เชน ความกวางไมควรเกนิ 500 pixel ความละเอียดภาพ (Resolution) 72 จุดตอนิ้ว และมีสวนขยายเปน .jpg, .gif หรือ .png ตามความเหมาะสมของภาพนั้นๆ
นอกจากนี้ช่ือไฟลภาพควรเปน
• ภาษาอังกฤษ ตัวพิมพเล็ก
• หามเวนวรรค
• ใชไดเฉพาะเครื่องหมาย Underscore ( _ )
เว็บไซตงาย รวดเร็วดวย Joomla 52
ควบคุมการแสดงผลบทความ
บทความที่สรางไวแลวสามารถปดการแสดงผลหรือระบุวันสิ้นสุดการแสดงผลไดงาย และสะดวก ในโหมดการแกไขบทความ จะปรากฏสวนควบคุมการแสดงผล ดังนี ้
รายการ
• Published เลือกใหแสดง หรือไมแสดงบทความ
• Show on Front Page เลือกใหแสดง หรือไมแสดงในหนาแรก
• Start Publishing ระบุวัน/เวลาใหแสดงบทความ
• Finish Publishing ระบุวัน/เวลาทีใ่หยตุิการแสดงบทความ
• Access Level สิทธิ์ในการเขาถึงบทความ
o Public ทุกคนเปดดูบทความได
o Registered ใหสมาชิกที่ล็อกอินเทานัน้เปดดูบทความได
o Special ใหสมาชิกที่เปน Admin เทานั้นที่เปดดูบทความได
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 53 -
สืบคนบทความไดงายๆ ดวย Metadata
Joomla ไดเตรียมฟงกชันสืบคนบทความผานชองสืบคน (Search)
โดยโปรแกรมจะสืบคนทั้งจากชื่อเร่ือง (Title) เนื้อหาบทความ รวมทั้งสวนเพิม่
ความสามารถการสืบคนในรูปแบบ Metadata ดังนั้นควรกําหนด Metadata ของบทความใหสมบูรณ
• Description ระบุคําอธิบายหรือเนื้อหาสรปุของบทความ
• Keywords ระบุคําคนโดยใชเครื่องหมาย , คั่นแตละคํา
เว็บไซตงาย รวดเร็วดวย Joomla 54
สรางบทความใหม
การสรางบทความใหม ทําไดโดยคลิกเลือกรายการ Submit an Articles จาก User Menu
ปรากฏสวนสรางบทความใหม ดังนี ้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 55 -
การสรางบทความใหม มีการทํางานลักษณะเดยีวกับการแกไขบทความเดิมที่ไดแนะนําไปกอนหนาแลว แตจะตองเลือก Section และ Category ใหตรงกับหมวดเนื้อหา
นอกจากนั้นผูใชตองกําหนดรายละเอียดเกีย่วกับการนําเสนอ (Publishing) และ
Metadata ของบทความดวย
เมื่อปอนเนื้อหาและบันทกึ จะปรากฏผลดังนี้
เว็บไซตงาย รวดเร็วดวย Joomla 56
ปรับแตงเว็บไซตผาน Back-end
การปรับแตงเว็บไซต เชน การเพิ่มสมาชิก การปรับเปลี่ยนโฉมหนาเว็บไซต การควบคุมเวบ็ไซต จะตองทําในโหมด Administrator โดยเขาสูเว็บไซตผาน Back-end ดวยคําสั่ง http://localhost/ชื่อโฟลเดอร/administrator
จอภาพเขาสูระบบในโหมด Administrator ใหปอนบญัชีผูใชเปน admin และปอน
รหัสผานตามที่ไดกําหนด เมื่อคลิกปุม Login จะเขาสูจอภาพ Control Panel ของเว็บไซต ดังนี ้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 57 -
การทํางานผาน Back-end สามารถดําเนินการผานแถบเมนู ซ่ึงประกอบดวยคําสั่งควบคุมตามหมวดหมูดังนี ้
หรือจะสั่งการผานไอคอนในสวน Control Panel
นอกจากนี้ยังสามารถตรวจสอบสมาชิกที่ออนไลน การสรางบทความ หรือสถิติตางๆ
ผานทางแท็บคําสั่งตอไปนี้
เว็บไซตงาย รวดเร็วดวย Joomla 58
ขอมูลประกอบการสบืคนของเว็บ
ช่ือเว็บไซต หรือ Title ของเว็บเปนสวนสาํคัญที่ทําใหเวบ็ไซตที่พัฒนาไดรับการสืบคนผาน Search Engine ตางๆ ได ดังนั้นควรกําหนดชื่อเวบ็ไซตใหเหมาะสม โดยกําหนดดวยคําภาษาอังกฤษ ตามดวยคําภาษาไทย เชน
STKS – Science and Technology Knowledge Services ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี (ศวท.) สํานักงานพัฒนาวิทยาศาสตรและเทคโนโลยีแหงชาต ิประเทศไทย
ทั้งนี้ช่ือเว็บไซตจะปรากฏในแถวแรกของเว็บเบราวเซอร
การปรับแกไขชื่อเว็บไซตของ Joomla ทําไดโดยคลิกไอคอน Global Configuration
จากหนา Control Panel ของ Joomla
โดยจะปรากฏจอภาพการทํางาน ดังนี ้
คลิกเลือกแท็บ Site แลวปรับแกไขคา ดังนี ้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 59 -
จากนั้นคลิกปุม Save เพื่อบันทึกการปรับแกไขชื่อเว็บไซต
นอกจากชื่อเวบ็ไซต ควรกําหนดคําอธิบายเว็บ และคําคน (Keyword) สําหรับเว็บไซต
เพิ่มเติมจากรายการ
โดย Global Site Meta Description เปนขอความอธิบายเว็บไซต โดยจะปรากฏผลผาน
การสืบคนของ Search engine เชน Google ดังนี ้
สําหรับคําคน (Keyword) เปนการระบุคําทีผู่ใชมักจะนึกถึงสําหรับการสืบคน โดยระบุไดหลายคํา คัน่ดวยเครื่องหมาย , แตควรขึ้นตนดวยภาษาอังกฤษ
ขอความอธิบายเว็บไซต และคําคนจะไมปรากฏผานเวบ็เบราวเซอร แตจะเปนขอมูลสําหรับ Search Engine
คําอธิบายเว็บไซต
เว็บไซตงาย รวดเร็วดวย Joomla 60
เขาถึงเนื้อหาไดงาย
Joomla มีระบบสนับสนุนการเขาถึงเนื้อหาไดงายขึ้นดวยความสามารถ Search Engine Friendly ที่จะแปลงรหัสประจําบทความ (Article ID) เปนชื่อเรียก
ตัวอยาง บทความชื่อ Joomla Overview ถูกสรางเปนลําดับที่ 19 ซ่ึงเมื่อแสดงเนื้อหา
บทความนี้ จะปรากฏ URL ดังภาพขางตน
URL ดังกลาวเปนการสงคาพารามิเตอรของโปรแกรมภาษา PHP ที่จาํไดยาก และทําให Search Engine ไมบันทึกเพื่อสืบคน แต Joomla มีคําสั่งที่สนับสนุนการแปลงพารามิเตอรของ PHP เปนการเขาถึงดวยช่ือบทความ (Article Title) แทน โดยคลิกเลือกไอคอน Global Configuration จากหนา Control Panel จากนั้นคลิกเลือกรายการ Search Engine Friendly URLs เปน Yes
เมื่อบันทึกแลว Joomla จะแปลงคาพารามิเตอรของบทความเปนการเขาถึงดวยช่ือ
บทความแทน ดังนี ้
การใชงาน Search Engine Friendly ผูพัฒนาจะตองระบุ Alias ใหกับบทความทุกบทความ และตองเปนภาษาอังกฤษตัวพมิพเล็ก หามเวนวรรค สามารถใชเครื่องหมาย Underscore หรือ Dash ไดเทานั้น
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 61 -
การปรับเปลี่ยนโฉมหนาของเว็บไซต
Joomla อนุญาตใหปรับเปลีย่นโฉมหนาของเว็บไดงายและสะดวกผาน Template โดยJoomla เตรียม Template สําเร็จรูปใหใชงานหลากหลายรูปแบบ และสามารถดาวนโหลดติดตั้งเพิ่มเติมได โดยการปรับเปลี่ยน Template คลิกเลือกเมนู Extensions, Template Manager
ปรากฏรายการดังนี ้
คลิกเลือก Template ที่ตองการใชงาน แลวคลิกปุม Default จากนั้นกลับไป Reload
เว็บไซตอีกครัง้
เว็บไซตงาย รวดเร็วดวย Joomla 62
เห็นไหมครับ การปรับเปลี่ยนหนาตาของเว็บไซตไมใชเร่ืองยากเลย มี Template สําเร็จรูปใหดาวนโหลดและเลือกใชงานมากมายในเว็บไซต เนื่องจาก Template พัฒนาดวยภาษา HTML, PHP & CSS แตสําหรับผูใชมือใหม ไมตองกังวลเพราะสามารถดาวนโหลด Template สําเร็จรูปไดมากมายหลายรอยจาก Google
จะตองเลือก Template ใหตรงกับ Version ของ Joomla ที่ติดตั้ง
เมื่อดาวนโหลดมาแลวจะไดไฟล Template ของ Joomla เปน Zip และสามารถนําเขาไปใชงานไดงายผานระบบ Control Panel ของ Joomla ดังนี ้คลิกเลือกเมนู Extensions จากนั้นเลือกคําสั่งยอย Install/Uninstall แลวคลิกเลือกรายการ Install จะปรากฏสวนติดตั้ง ดังนี้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 63 -
คลิกปุม Browse จากรายการ Upload Package File เลือกไฟล zip ของ Template แลว
คลิกปุม Upload & Install จากนั้นคลิกแท็บ Templates จะปรากฏรายการ Template ที่นําเขาและรายการเดมิดังนี ้
ถาตองการลบรายการใด ก็คลิกเลือกแลวคลิกปุม Uninstall
บาง Template จะไมมีพื้นที่ดานขวามือ (Right Column) ทําให Module ที่กําหนดใหแสดงดานขวาไมแสดงผล จึงตองระมัดระวังในการเลือกใช Template หรือใชวิธีการปรับเปลี่ยน Template ใหอยูตําแหนงอืน่
เว็บไซตงาย รวดเร็วดวย Joomla 64
จัดการบทความในเวบ็ไซต
เนื้อหาในเว็บไซตเปนเนื้อหาจากขอมูลตัวอยาง เรียกวา Article หรือบทความ ซ่ึงสามารถปรับแกไขไดโดยเลอืกเมนูคําสั่ง Content, Article Manager
เมนูควบคุมการจัดการบทความประกอบดวยปุมตางๆ ดงันี้
Archive/Unarchive กําหนดใหบทความที่นําเสนอเก็บเขาคลังเอกสาร
หรือยกเลิกจากคลังเอกสาร
Publish/Unpublish กําหนดใหแสดงหรือไมแสดงบทความ
Move ยายหมวดบทความ
Copy คัดลอกบทความไปหมวดอืน่
Trash ลบบทความ
Edit แกไขบทความ
New สรางบทความใหม
Parameters คาควบคุมเกี่ยวกับการแสดงผลบทความ
เชน ถาตองการแกไขบทความรายการใด กค็ลิกเลือกบทความนั้นๆ
คลิกปุม Edit จะปรากฏสวนแกไขในโหมดการทํางานแบบ WYSIWYG ดังนี ้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 65 -
แกไขชื่อบทความ (Title) จากรายการ
ช่ือบทความสามารถระบุไดทั้งภาษาไทย และภาษาอังกฤษ
แกไข URL ของบทความจากรายการ
ขอความ Alias นี้ควรระบุเปนภาษาอังกฤษ ไมมีชองวาง
ปรับแกไขหมวดเนื้อหาไดจากรายการ Section และ Category
Section จะเปนหมวดใหญกวา Category
เว็บไซตงาย รวดเร็วดวย Joomla 66
กําหนดการแสดงผลบทความไดจากรายการ
• Published แสดงหรือไมแสดงบทความในเว็บไซต
• Front Page แสดงหรือไมแสดงบทความผานหนาแรกของเว็บ
ลําดับการแสดงบทความในหนา Front Page ควบคุมไดจากไอคอน Front
Page Manager
นอกจากนี้ยังสามารถกําหนดชวงเวลาในการบทความไดจากรายการ
การแกไขเนื้อหา
การแกไขเนื้อหา ใชหลักการลักษณะเดยีวกับการแกไขใน Word Processor ทั่วไป และมีปุมจัดแตงรูปแบบลักษณะเดยีวกัน
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 67 -
กรณีที่เนื้อหามีความยาว และกําหนดใหแสดงผาน Front Page จะปรากฏผล ดังนี้
กรณีนี้ควรเลือกแสดงผลเนื้อหาเพียงบางสวน และกํากับดวย Link โดย
คลิกเมาส ณ ตาํแหนงที่ตองการเลือกแสดงผล แลวคลิกปุม Read more…
เว็บไซตงาย รวดเร็วดวย Joomla 68
เมื่อบันทึกจะแสดงผลผาน Front Page ดังนี ้
จะปรากฏเนื้อหา ณ ตําแหนงที่ระบุ Read more และลิงก Read more: … เพื่อคลิกแสดง
เนื้อหาสวนที่เหลือ
นอกจากนี้ยังสามารถสรางสารบัญใหกับเอกสารได ดังนี้
การสรางสารบัญขางตน ก็ทําไดโดยคลิกเมาส ณ ตําแหนงที่ตองการ แลวคลิกปุม
Pagebreak
ทําซ้ํา ณ ตําแหนงอื่นๆ ที่ตองการ และถาตองการยกเลิกใหคลิกเมาส ณ เสนแบงแลว
กดปุม <Delete>
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 69 -
นอกจากนี้ Joomla ยังอนญุาตใหระบุเงือ่นไขเกีย่วกับการแสดงผลบทความไดอิสระจากกนัจากการควบคุมของ Parameters - Advanced
โดยรายการทีป่รากฏบางรายการ อธิบายจากภาพประกอบ ดังนี ้
Title ของบทความ กําหนดใหแสดงหรือไมแสดงจากรายการ Show Title และกําหนดใหคลิกไดหรือไมได จากรายการ Title Linkable
วันที่แกไข/วันที่สราง และผูสรางบทความ กําหนดใหแสดงหรือไมใหแสดงไดจากรายการ Author Name, Created Date and Time และ Modified Date and Time
ไอคอนแปลงเปนเอกสาร PDF สั่งพิมพ และสงแนบอีเมล ควบคุมไดจากรายการ PDF Icon, Print Icon และ E-mail Icon
เว็บไซตงาย รวดเร็วดวย Joomla 70
เพ่ิมประสิทธิภาพการสืบคนใหกับบทความ
การสืบคนบทความของ Joomla จะควบคมุดวย Metadata โดยแตละบทความสามารถกําหนด Metadata ไดอิสระ รวมทั้งยังเปนขอมูลสําหรับ Search Engine ดวย การกําหนด Metadata ใหกบับทความทําไดโดยเขาสูโหมดแกไข/สรางบทความ จากนั้นคลิกขยาย Metadata Information ระบุรายละเอยีดเกีย่วกับคําอธิบายบทความ/เนื้อหายอ (Description) และคําคน (Keyword) รวมทั้งชื่อเจาของบทความ (Author)
โดยการสืบคนสามารถปอนคําคนในชองรายการ Search ซ่ึงจะปรากฏผลการสืบคน
ดังนี ้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 71 -
ตกแตงดวยรูปภาพ
การนําเสนอผานเว็บไซตจําเปนตองสรางจุดเดนดวยรูปภาพ Joomla ทํางานกับรูปภาพไดงายและสะดวก โดยมปีุมเครื่องมือและระบบโอนภาพเขาสูเครื่องแมขายเว็บพรอมใชงาน เชน การนําเขาภาพในบทความเริ่มจากคลกิเมาส ณ ตําแหนงที่ตองการวางภาพ แลวคลิกปุม Image ที่ดานลางขวาของกรอบขอความ ปรากฏจอภาพทาํงานเกีย่วกับภาพดังนี ้
คลิกเลือกภาพที่ตองการ แลวระบุคําอธิบายภาพในรายการ Image Description และ
Image Title จัดตําแหนงภาพจากรายการ Align แลวคลิกปุม Insert
หากยังไมมีภาพที่ตองการกส็ามารถคลิกปุม Browse แลว Upload ภาพเขาสูระบบก็ได
หรือจะใชคําสั่ง Site, Media Manager เพื่อจัดการภาพและสื่ออ่ืนๆ ประกอบเว็บก็ได
เว็บไซตงาย รวดเร็วดวย Joomla 72
Joomla แบงโฟลเดอรจัดการภาพไดดังนี ้
โดยโฟลเดอรสําคัญที่ควรทราบคือ
• Banners เก็บภาพสําหรับใชกับ Component Banner
• Stories เก็บภาพสําหรับใชในบทความ
อยางไรก็ตามสามารถสรางเพิ่มเติมไดโดยคลิกเลือกโฟลเดอรหลัก จากนั้นกําหนดชือ่โฟลเดอรใหม (ภาษาอังกฤษหรือผสมตัวเลข หามเวนวรรค ใชเฉพาะเครื่องหมาย Underscore) แลวคลิกปุม Create Folder
ลบภาพ
ภาพที่ไมตองการใชงานสามารถลบไดโดยคลิกที่ปุมเครื่องหมาย x สีแดงที่กํากับภาพ หรือคลิกเลือกหลายๆ ภาพแลวใชปุม Delete
ภาพที่นําเขา Joomla จะตองตั้งชื่อเปนภาษาอังกฤษ หามเวนวรรค ใชเฉพาะเครื่องหมาย Underscore และมีฟอรแมตเปน .jpg, .gif หรือ .png เทานั้น
นอกจากการนําเขาภาพแลว Media Manager ยังสามารถนําเขา Flash Movie, PDF ไดเชนกนั
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 73 -
ทํางานกับสื่อรูปแบบตางๆ
Joomla สนับสนุนการทํางานกับสื่ออ่ืนๆ นอกจากรูปภาพ เชน Flash Movie, Song, Audio, Movie โดยมีหลักการทํางานดังนี ้
1. สรางโฟลเดอรสําหรับสื่อแตละประเภทผาน Media Manager
2. โอนส่ือเขาสูระบบ
3. เขาสูระบบสรางหรือแกไขบทความ คลิก ณ ตําแหนงทีต่องการวางสือ่ คลิก
ปุม Insert/Edit Embedded Media ระบุประเภทสื่อ พรอมทั้งระบุ path/filename.extension ของสื่อใหถูกตอง จากนัน้ระบุความกวาง/ความสูงที่ตองการนําเสนอ
4. คลิกปุม Insert แลวบันทกึ
เว็บไซตงาย รวดเร็วดวย Joomla 74
ทํางานกับเมน ู
Joomla อนุญาตใหปรับแตงเมนูไดอิสระ ทั้งการสรางเมนูชุดใหม การปรับแตงเมนูชุดเดิม การสรางรายการเมนู หรือปรับยายตําแหนงการแสดงผลเมนู
ปรับแกไขเมนู
การปรับแกไขเมนู ทําไดโดยคลิกเลือกเมนูคําสั่ง Menus แลวคลิกเลือกที่ช่ือเมนูชุดที่ตองการแกไข หรือคลิก Menu Manager เพือ่ปรับแกไขชือ่เมนูรวมทั้งสราง/ลบเมนู
ปรากฏจอภาพทํางานดังนี ้
จะพบวาการทาํงานกับรายการเมนู มีลักษณะเดยีวกับการทํางานบทความใน Article
Manager
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 75 -
ตัวอยาง ตองการสรางรายการเมนูแสดงบทความในหมวด Media ทําไดโดย
1. คลิกปุม New
2. เลือกวาจะสรางเมนูลักษณะใด กรณีนี้คือ การสรางเมนูใหกับบทความ จึง
เลือก Articles
3. เลือกรูปแบบของการเชื่อมกบับทความ กรณีนี้ตองการเชื่อมกับทุกบทความ
ในหมวด Media จึงตองเลือก Category ซ่ึงมี 2 รูปแบบยอย คือ Blog Layout โดยจะแสดงเนื้อหายอและลิงกอานตอในลักษณะกรอบเนื้อหา หรือจะเลือก List Layout โดยจะแสดงเปนรายการตามลําดับ
4. เมื่อเลือกรูปแบบของการเชื่อมกับบทความแลว ก็จะเปนสวนกําหนดรายละเอียดเกีย่วกับการแสดงผล ดังนี้
เว็บไซตงาย รวดเร็วดวย Joomla 76
5. เมื่อกําหนดรายละเอียดเชน Title แลวก็คลิกปุม Save เพือ่บันทึก
6. และตรวจสอบการสรางรายการเมนูไดจากหนา Front end ของเว็บ
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 77 -
Components
Components คือ ชุดโปรแกรมสําเร็จรูปที่ออกแบบพฒันาขึ้นมาเพือ่รองรับการทํางานใดๆ ในลักษณะโปรแกรมเสริม เพื่อให Joomla มีความสามารถเพิ่มขึ้น เชน โปรแกรมควบคุมการแสดงผลปายโฆษณา กระดานสนทนา Joomla มี Components ใหเลือกใชงานหลากหลาย ดาวนโหลดไดจากเว็บไซตของ Joomla หมวด Extensions โดย Extension ที่เปน Components
จะแสดงดวยสัญลักษณ
แบบสอบถามออนไลน (Poll)
Poll เปน Component ที่มากับ Joomla เปนชุดคําสั่งสําหรับสรางแบบสอบถามออนไลนอยางงาย ปกติจะแสดงผลในรูปแบบ Module ดานขวาของหนาเว็บไซต เมื่อคลิกเลือกจะแสดงผลลัพธการเลือกเปนกราฟแทงแนวนอน (Bar chart)
เว็บไซตงาย รวดเร็วดวย Joomla 78
การเพิ่มแบบสอบถามใหกับ Poll ทําไดโดยเลือกเมนูคําสั่ง Components, Polls
คลิกปุม New
ปอนคําถามในรายการ Title: ตัวเลือกในรายการ Options: และการนาํเสนอจากรายการ
Published: จากนั้นคลิกปุม Save
จากนั้นเขาสูการกํากับการแสดงผล Polls ซ่ึงควบคุมดวย Extensions, Module
Manager
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 79 -
เล่ือนหารายการ Polls แลวคลิกเขาสูการแกไข
ตัวเลือกสําคัญคือ Module Parameters ในสวน Poll
ผลลัพธของ Poll ที่สรางใหมในหนา Front end
ปายโฆษณา (Banner)
Joomla ยังเตรียมการจัดการเกี่ยวกับปายโฆษณาหรือ Banner ซ่ึงมีความสามารถแสดงผลแบบสุมในแตละการ Reload หนาเว็บ รวมทั้งสวนลิงกไปยังเว็บไซตที่เกี่ยวของ โดยทํางานผาน Components, Banner
1. เตรียมภาพ Banner โดย Upload ดวย Media Manager ไปไวทีโ่ฟลเดอร banners
2. สราง Category ของ Banner ดวยคําสั่ง Components, Banner, Category
เว็บไซตงาย รวดเร็วดวย Joomla 80
3. สรางชุดยอยของ Banner ดวยคําสั่ง Components, Banner, Clients
4. สรางรายการ Banner ดวยคําสั่ง Components, Banner, Banners
5. ระบุรายละเอยีดแลวคลิกปุม Save จากนั้นทําซ้ําจนครบทุกภาพที่ตองการ
6. ปรับแตงการนาํเสนอดวยคําสั่ง Extension, Module Manager คลิกเลือก Banners ปรับแตงคาที่จําเปน เชน
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 81 -
7. จากนั้นคลิกปุม Save แลวดผูลที่ปรากฏในหนา Front page
ดึงขาวมาแสดงผลอัตโนมัติ
ดวยเทคโนโลยี RSS หรือ Really Simple Syndication หรือ Rich Site Summary เปนรูปแบบในการนําเสนอขาวหรือบทความ ใหอยูในรูปแบบมาตรฐาน (xml format) เพื่อใหผูที่สนใจสามารถติดตามขาวสารใหมๆไดทันที
Joomla รองรับการสรางชุดขาว RSS อัตโนมัติผาน Components, News Feeds โดยเร่ิมตนจะตองสราง Category กอนดวยคําสั่ง Components, News Feeds, Category
จากนั้นจึงสรางรายการ RSS แตละรายการดวยคําสั่ง Components, News Feeds, Feeds
เว็บไซตงาย รวดเร็วดวย Joomla 82
เว็บไซตที่สามารถดึงขาวมาได เชน
• http://www.norsorpor.com/chooseRSS.php
• http://www.rssthai.com
ดาวนโหลด/ติดตั้ง Components
นอกจากนี้ยังสามารถดาวนโฆลดมาติดตั้งเพิ่มได โดยComponents ที่ดาวนโหลดมามักจะขึน้ตนดวย com เชน com_xmap-1.1_for_Joomla_1.5.zip การติดตั้งจะตองทํางานในโหมด Admin ผาน Control Panel โดยเลือกคําสั่ง Extensions, Install/Uninstall
โดย Components ที่ติดตั้งแลวจะปรากฏรายการดังนี ้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 83 -
พัฒนาเว็บตามตองการ
เมื่อทราบความสามารถของ Joomla แลวตอไปจะเปนการออกแบบพฒันาเว็บไซตตามตองการ โดยไมใชขอมูลตวัอยางของ Joomla ดังนัน้จะตองเร่ิมจากการวางแผนการพัฒนาเว็บไซตกอน ดังนี ้
ลักษณะของเวบ็ไซต กลุมเปาหมาย ช่ือเว็บ (Web Title) คําอธิบายเว็บ (Web Description) คําคน (Keywords) เนื้อหาที่ตองการนําเสนอ
ความตองการเพิ่มเติม Poll Web Resources Banner คลังภาพ คลังดาวนโหลด RSS News feed …
เว็บไซตงาย รวดเร็วดวย Joomla 84
จากตารางวเิคราะหความตองการพัฒนาเวบ็ขางตน สมมติเว็บที่ตองการพัฒนามีขอมูลดังนี ้
ลักษณะของเวบ็ไซต เว็บไซตนําเสนอสาระความรูทางดานบรรณารักษศาสตร และสารสนเทศศาสตร
กลุมเปาหมาย นักศึกษา ครูอาจารยสาขาบรรณารักษศาสตร และสารสนเทศศาสตร
ช่ือเว็บ (Web Title) Lib4You : แหลงรวมสาระความรูสาขาบรรณารักษศาสตร และสารสนเทศศาสตร
คําอธิบายเว็บ (Web Description) แหลงรวมสาระความรูสาขาบรรณารักษศาสตร และสารสนเทศศาสตรสําหรับครู อาจารย นักศึกษา บรรณารักษ และนกัสารสนเทศ
คําคน (Keywords) Library, Information, Librarian, Information Officer, บรรณารักษศาสตร, สารสนเทศศาสตร, หองสมุด, ศูนยสารสนเทศ, สํานักวิทยบริการ
เนื้อหาที่ตองการนําเสนอ แนะนําเว็บไซต ทีมพัฒนา คลังความรู
ความตองการเพิ่มเติม Poll แบบสํารวจออนไลน Web Resources รวมลิงกเว็บไซตหองสมุด ศูนยสารสนเทศ
สํานักวิทยบริการ และภาควชิาบรรณารักษศาสตร สารสนเทศศาสตร
Banner Banner แนะนาํกิจกรรมเดนของเว็บไซตในลักษณะแสดงผลแบบสุมเมื่อมีการโหลดหนาเว็บ
คลังภาพ รวมภาพกิจกรรมและภาพอืน่ๆ คลังดาวนโหลด แหลงดาวนโหลดเอกสาร ซอฟตแวร RSS News feed ดึงขาวนาสนใจจากเว็บไซตผูใหบริการ RSS
เมื่อวิเคราะหความตองการไดแลว ขั้นตอนถัดไปก็จะเปนการติดตั้งเว็บไซต Joomla ในโฟลเดอรใหมแบบวางเปลา (ไมเอาขอมูลตัวอยาง) ซ่ึงมีขั้นตอนดังนี ้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 85 -
1. สรางโฟลเดอรใหมภายใต C:\AppServ\www เชน lib4you
2. คัดลอกไฟลตนฉบับ Joomla 1.5 มาวางในโฟลเดอรใหม
3. เปดเว็บเบราวเซอรแลวพิมพ URL เปน http://127.0.0.1/lib4you
4. เลือกโหมดการติดตั้งเปนภาษาไทย
5. คลิกปุม Next เพื่อเขาสูขั้นถัดไปของการตดิตั้ง คือ ขั้นตอนการตรวจสอบ
ขอมูลกอนติดตั้ง หากเปนการติดตั้งใน Server จริงอาจจะตองเขาไปเปลี่ยน Permission ของโฟลเดอรและแฟมบางแฟมกอน ในกรณีนี้เปนการตดิตั้งดวย Server จําลองใหคลิกปุม “ถัดไป”
6. จอภาพถัดไปคือ การยอมรับลิขสิทธิ์การใชงานโปรแกรม ใหคลิกปุม “ถัดไป”
เว็บไซตงาย รวดเร็วดวย Joomla 86
7. ขั้นตอนสําคัญของการติดตั้งคือ การกําหนดรายละเอยีดเกี่ยวกับเครื่องแมขายเว็บและฐานขอมูล MySQL
ใหระบุขอมูลดังนี ้
• ชนิดฐานขอมลู เลือกเปน mysql
• ช่ือโฮสต ระบุเปน localhost
• ช่ือผูใชฐานขอมูล ระบุเปน root
• รหัสผาน ระบุรหัสผานตามที่กําหนดไวในขั้นตอนติดตั้ง AppServ
• ช่ือฐานขอมูล ระบุใหตรงกับชื่อโฟลเดอร ตัวอยางคือ lib4you
8. เมื่อกําหนดขอมูลเกี่ยวกับเครือ่งแมขายและฐานขอมูล MySQL แลวใหคลิกปุม “ถัดไป” เพื่อเขาสูขั้นตอนการตั้งคา FTP สําหรับ Server ที่อนุญาตใหผูใชโอนขอมูลดวยฟงกชัน FTP ใหระบุคาใหถูกตอง แตกรณีนี้ใหเลือก “No” แลวคลิกปุม “ถัดไป”
9. ขั้นตอนนี้เปนการกําหนดขอมูลเกี่ยวกับเวบ็ไซต โดยมีรายการที่ตองกาํหนดดังนี ้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 87 -
รายการที่ตองระบุไดแก
• ช่ือเว็บไซต ใหระบุช่ือของเว็บ กรณีนี้คือ Lib4You : แหลงรวมสาระความรูสาขาบรรณารักษศาสตร และสารสนเทศศาสตร
• ระบุอีเมลของผูดูแลเว็บ และรหัสผานของ Admin เว็บไซต
10. เมื่อกําหนดขอมูลช่ือเว็บไซต อีเมล และรหสัผานของผูดูแลเว็บแลว ใหคลิก
ปุม “ถัดไป” กจ็ะเปนขัน้ตอนสุดทายของการติดตั้ง
ทั้งนี้บัญชีแรกของเว็บนี้คือ admin ซ่ึงเปนบัญชีผูดูแลเว็บที่มีสิทธิ์เต็ม และรหัสผานตามที่ระบุไวในขัน้ตอนกอนหนา
11. เมื่อติดตั้ง Joomla จนถึงขั้นตอนนี้แลว จะตองกลับไปลบโฟลเดอร Installation ออกจากโฟลเดอรเว็บใน C:\AppServ\www\lib4you
เว็บไซตงาย รวดเร็วดวย Joomla 88
12. เพียงเทานี้ก็จะไดเว็บไซตที่พรอมใชงาน และเขาถึงไดดวย URL http://127.0.0.1/lib4you
เว็บไซตใหมทีไ่ดจะไมมีขอมูลใดๆ เนื่องจากไมไดติดตั้งขอมูลตัวอยางของ Joomla ดังนั้นขั้นตอนถัดไป จะเปนการสรางเนื้อหา สรางเมน ู และสวนจัดการเพิ่มเติม (Extension) ใหกับเว็บไซต โดยจะเริ่มตนกับการทํางานในโหมด Backend กอน
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 89 -
ปรับเว็บไซตในโหมด Backend
เว็บใหม ควรกําหนดคาควบคุมตางๆ ใหเหมาะสมกอนใชงาน โดยเขาสูสวนควบคุมเว็บไซตดวย URL http://127.0.0.1/lib4you/administrator
ปอนบัญชีผูใช (User name) เปน admin และรหัสผานที่กําหนดไว จากนัน้คลิกปุม
Logins เพื่อเขาสูระบบ
Domain name และ ช่ือ lib4you ปรับเปลี่ยนไดตามจริง
ปรับคาระบบเว็บไซต (Global Configuration)
เร่ิมตนควรปรบัคาระบบเว็บไซตโดยคลิกที่ไอคอน Global Configuration
เว็บไซตงาย รวดเร็วดวย Joomla 90
ปรากฏจอภาพสวนควบคุมคาระบบเว็บไซต ดังนี ้
• Site Offline เลือกเปน No ทั้งนี้จะเลือกเปน Yes เมื่อตองการปดเวบ็ไซต
เปนการชั่วคราว ซ่ึงผูใชจะพบขอความตามที่กําหนดในรายการ Offline Message (ขอความดังกลาวปรับแกไขไดตามตองการ)
• Site Name ช่ือเว็บไซต เปนสวนสําคัญมากที่ Search Engine จะเขาถึง จึงควรกําหนดดวยคําที่คนไดงาย นําดวยขอความภาษาอังกฤษเปนหลัก
• Default WYSIWYG Editor เลือกโปรแกรมที่ใชเปนสวนจดัการเนื้อหา (Editor) แบบ WYSIWYG (What You See Is What You Get) กรณนีีใ้หเลือกเปน TinyMCE 2.0
• List Length จํานวนรายการที่จะใหแสดงผลกรณีที่เลือกรูปแบบการแสดงผลแบบ List กรณีนี้คือ 20 รายการตอจอภาพ
• Feed Length จํานวนรายการที่ดึงอัตโนมัตจาก RSS กรณีคือ 10 รายการตอจอภาพ
• Global Site Meta Description คําอธิบายเว็บไซต ขอมูลสําคัญอีกสวนสําหรับ Search Engine กรณีนี้ใหปรับแกไขเปน แหลงรวมสาระความรูสาขาบรรณารักษศาสตร และสารสนเทศศาสตรสําหรับคร ู อาจารย นักศึกษา บรรณารักษ และนักสารสนเทศ
• Global Site Meta Keywords คําคน (Keyword) สําหรับเว็บไซต ใชประโยชนกับ Search Engine กรณีนีใ้หปรับแกไขเปน Library, Information, Librarian, Information Officer, บรรณารักษศาสตร, สารสนเทศศาสตร, หองสมุด, ศูนยสารสนเทศ, สํานักวิทยบริการ
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 91 -
• Show Title Meta Tag อนุญาตใหนํา Title ของบทความแสดงประกอบกับ Title เว็บไซตหรือไม กรณีนีใ้หเลือกเปน No
• Show Author Meta Tag อนุญาตใหนํา Author ของบทความแสดงประกอบกับ Title เว็บไซตหรือไม กรณีนีใ้หเลือกเปน No
• Search Engine Friendly URLs กําหนดใหแสดงผล URL แบบสนับสนนุการสืบคนของ Search Engine หรือไม กรณีนี้ใหเลือกเปน No (หากตองการเลือกเปน Yes ทุกบทความจะตองกําหนด Alias Title เปนภาษาอังกฤษ หามเวนวรรค ทุกบทความ)
เมื่อกําหนดขอมูลขางตนจากชุดรายการ Site แลวใหคลิกที่ชุดรายการ System
เพื่อกําหนดรายการเกีย่วกับ User Settings
• Allow User Registration อนุญาตใหผูใชลงทะเบียนเปนสมาชิกได
หรือไม (กรณนีี้เลือกเปน Yes)
• New User Registration Type ประเภทของสมาชิกที่ลงทะเบียน
o Registered สมาชิกที่มีสิทธิ์สงลิงกเว็บแนะนํา และเขาถึงเนื้อหาเฉพาะสมาชิกไดเทานัน้
o Author สมาชิกที่สามารถเขียนบทความใหมสงเขาสูระบบได แตไมมีสิทธิ์แกไขบทความ
o Editor สมาชิกที่สามารถเขียนและแกไขบทความได o Publisher สมาชิกที่สามารถเขียน/แกไขบทความของสมาชกิ
คนอื่นได
เว็บไซตงาย รวดเร็วดวย Joomla 92
• New User Account Activation ผูใชที่ลงทะเบยีนจะตองยนืยนัการเปนสมาชิกหรือไม (แนะนําใหเลือกเปน Yes)
• Front-end User Parameters อนุญาตใหสมาชิกปรับคาควบคุมเกี่ยวกับสมาชิกไดหรือไม เชน ระบบภาษา Editor ที่เลือกใชงาน (แนะนําใหเลือกเปน Hide)
เมื่อกําหนดคาที่จําเปนดังที่อธิบายขางตน ใหคลิกปุม Save เพื่อบันทึกคา จากนั้นจะตองกําหนดใหแสดงผล Module การล็อกอินเขาสูระบบ (Login-form Module) โดย
1. เลือกเมนูคําสั่ง Extension, Module Manager
2. คลิกปุม New เพื่อเลือกพื้นทีแ่สดงผล Module ใหม
3. เลือก Module ช่ือ Login
4. ตั้งชื่อใหกับ Module เชน Login Form และกําหนดตําแหนงทีจ่ะแสดงผล
เชน Left
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 93 -
5. คลิกปุม Save แลวคลิกปุม Preview เพื่อสังเกตผลจากหนาเว็บไซต
6. ตอนนี้เว็บไซตก็พรอมจะรบัสมาชิกที่สนใจเขารวมสรางสรรคเว็บไซตได
แลว โดยคลิกที่ Create an account เพื่อสรางสมาชิกใหม
เว็บไซตงาย รวดเร็วดวย Joomla 94
วิเคราะหเนื้อหาเว็บไซต
การนําเนื้อหาเขาเว็บไซต จะตองวิเคราะหเนื้อหากอน โดยเนื้อหาที่กําหนดไว ไดแก
แนะนําเว็บไซต เปนเนื้อหาเพยีง 1 หนาจอ ใหขอมูลเกี่ยวกบัเว็บไซต ที่มาของเว็บไซต เชน
เว็บไซต lib4you พัฒนาขึ้นมาเพื่อเปนสื่อกลางสําหรับบุคลากรสาขาบรรณารักษศาสตร สารสนเทศศาสตรของประเทศไทย ไดมารวมสรางสรรค แบงปนบทความ เนื้อหาสาระ ประสบการณ และความรูรวมกนั ทีมพัฒนาขอขอบคุณผูเยี่ยมชม และสมาชิกทุกทานที่รวมสงเสริม สรางสรรค lib4you
ทีมพัฒนา เปนเนื้อหาเพยีง 1 หนา นําเสนอขอมูลของทีมพัฒนา ประกอบดวยรูปภาพสมาชิกในทีมพัฒนา ช่ือ/นามสกุล สังกัด และความชํานาญ
คลังความรู เปนหมวดเนื้อหาใหญ ประกอบดวยหมวดยอย คือ
• หมวดบรรณารักษศาสตร
• หมวดสารสนเทศศาสตร
• หมวดสถานศกึษาที่เปดสอน
จากตารางขางตน ผูพัฒนาจะตองวิเคราะห ออกแบบเนื้อหาใหเหมาะสมกอน เพือ่ใหสอดคลองกับรูปแบบการพฒันา ดังนัน้จากตารางขางตน เมื่อนํามาวิเคราะหลักษณะรูปแบบเนื้อหาของ Joomla จะไดผลดังนี ้
แนะนําเว็บไซต เปนเนื้อหาเพยีง 1 หนาจอ ใหขอมูลเกี่ยวกบัเว็บไซต ที่มาของ
เว็บไซต เนื้อหาแบบ Static Content ไมตองกําหนด Section และ Category
ทีมพัฒนา เปนเนื้อหาเพยีง 1 หนา นําเสนอขอมูลของทีมพัฒนา เนื้อหาแบบ Static Content ไมตองกําหนด Section และ Category
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 95 -
คลังความรู เปนหมวดเนื้อหาใหญ ประกอบดวยหมวดยอย คือ
• หมวดบรรณารักษศาสตร
• หมวดสารสนเทศศาสตร
• หมวดสถานศกึษาที่เปดสอน เนื้อหาแบบ Dynamic Content ตองกําหนด Section และ Category โดย Section ซ่ึงเปนหมวดใหญ กําหนดดวยช่ือ Knowledge Category ซ่ึงเปนหมวดยอยของ Section Knowledge กําหนดเปน
• Library Science
• Information Science
• Institution
Section Knowledge
Category Library Science
Category Information Science
Category Institution
เว็บไซตงาย รวดเร็วดวย Joomla 96
สรางเนื้อหา “แนะนําเว็บไซต”
การสรางเนื้อหา “แนะนําเวบ็ไซต” ทําไดโดย
1. จากหนา Control Panel ใหคลิกไอคอน Add New Article
2. ปอนขอมูลดังนี้
หมายเหตุ ทุกบทความควรกําหนด Metadata โดยคลิกจากชุดรายการ Metadata Information
3. คลิกปุม Save เพื่อบันทึกขอมูล
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 97 -
เมื่อสรางเนื้อหา “แนะนําเวบ็ไซต” แลวข้ันตอนถัดไปคอื การสรางเมนูควบคุมเนื้อหาสวนนี้ โดย
1. คลิกเลือกเมน ูMenus, Main Menu* เพื่อสรางรายการเมนูเพิ่มในเมนหูลักของเว็บไซต
2. ปรากฏสวนควบคุมการสรางรายการเมนูของเมนูหลัก (Main Menu) ดังนี ้
3. คลิกปุม New เพื่อสรางรายการคําสั่งใหม
4. เลือกประเภทของรายการเมนู กรณนีี้เลือกเปน Articles
5. เมื่อคลิก Articles แลวจะปรากฏรายการเลือกดังนี ้
เว็บไซตงาย รวดเร็วดวย Joomla 98
คลิกเลือก Article Layout เนื่องจากเนื้อหาที่จะเชื่อมมายังรายการเมนนูี้ เปนเนื้อหาแบบ Static ที่ไมไดกําหนด Section และ Category ซ่ึงจะปรากฏรายการเลือก ดังนี ้
6. เลือกเนื้อหาทีต่องการเชื่อมกับรายการเมนู โดยคลิกปุม Select จากรายการ
Select Article
ปรากฏรายการบทความ ดังนี้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 99 -
คลิกเลือกบทความ “แนะนาํเว็บไซต”
7. เมื่อเลือกบทความที่ตองการแลว ก็มาถึงขั้นตอนกําหนดขอความกํากับรายการเมนู
• Title ขอความที่ตองการใหปรากฏ ไมควรยาวเกนิไป
(ตัวอยางระบุเปน แนะนําเวบ็ไซต)
• Alias ขอความที่ระบุในรายการนีต้องเปนภาษาอังกฤษ หามเวนวรรค ใชเปนสวนควบคุมเมื่อเลือกคา Global Configuration ในสวน SEO (กรณีนี้ไมตองระบุ)
• Link URL ที่เขาถึงเนื้อหา (ไมตองปรับแกไข)
• Parent Item ลําดับการนําเสนอเมนู ใหแสดงเปนรายการหลักตอจากรายการเมนู Home จึงเลือกเปน Top
• Published กรณีที่ไมตองการแสดงรายการคําสั่งใหเลือกเปน No (กรณีนี้ใหเลือกเปน Yes เพื่อใหแสดงผล)
• Order กรณีที่มีรายการเมนูมากกวา 2 รายการ สามารถเลือกลําดับไดวาตองการใหแสดงตอทายรายการใด
• Access Level สิทธิ์ในการเขาถึงรายการเมนูนี้ กรณีนี้ใหเลือกเปน Public คือทุกคนสามารถคลิกเลือกรายการเมนูนี้ได
• On Click, Open in เมื่อคลิกเลือกรายการเมนนูี้ ตองการใหเปดเนื้อหาลักษณะใด กรณีนี้ใหเลือกเปน Parent Window with Browser Navigation คือ แสดงในหนาตางเดิมพรอมแถบควบคมุ
เว็บไซตงาย รวดเร็วดวย Joomla 100
เมื่อกําหนดคาดังขางตนแลว ก็คลิกปุม Save เพื่อบันทกึการสรางรายการเมนูเพิ่มเติมในเมนหูลัก
จากนั้นตรวจสอบการสรางรายการเมนูเพิม่เติมโดยคลิกเลือกรายการ Preview ที่ปรากฏมุมขวาของจอภาพ
จะปรากฏรายการคําสั่งเพิ่มในแถบเมนหูลัก ดังนี ้
เมื่อคลิกที่รายการเมนู “แนะนําเว็บไซต” จะปรากฏเนื้อหาดังนี ้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 101 -
สรางเนื้อหา “ทีมพัฒนา”
การสรางเนื้อหา “ทีมพัฒนา” ใชหลักการเดียวกับ “แนะนําเว็บไซต” แตเนื่องจากขอมูลประกอบดวยภาพ ช่ือ/นามสกุล สังกัด และความเชีย่วชาญ จึงตองเตรียมภาพกอน โดยภาพที่เตรียมควรมีขนาดความกวางไมเกิน 150 pixels ตั้งชื่อแฟมภาพเปนภาษาอังกฤษ หามเวนวรรค (ตัวอยางใชภาพในโฟลเดอร image ที่จัดเตรียมไวให)
1. นําเขาภาพเขาสู Joomla ดวยคําสั่ง Site, Media Manager
2. คลิกเลือกโฟลเดอรยอย stories
เว็บไซตงาย รวดเร็วดวย Joomla 102
3. เล่ือนจอภาพมาดานลาง แลวคลิกที่ปุม Browse Files
4. คลิกเลือกภาพที่เตรียมทีละภาพ จนครบทุกภาพ
หากเลือกภาพผิด สามารถลบภาพจากรายการไดโดยคลิกปุม ทายภาพ
5. เมื่อเลือกภาพไดครบตามตองการแลว ใหคลิกปุม Start Upload เพื่อนําเขาภาพ
6. จากนั้นสรางเนื้อหาใหม โดยคลิกไอคอน Add New Article หรือเลือกเมนู
Content, Article Manager จากนั้นคลิกปุม New
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 103 -
7. ปอนขอมูล Title และ Metadata ดังนี ้
8. สรางตารางขนาด 2 คอลัมน 3 แถว โดยคลิกปุม Insert New Table
กําหนดจํานวน Columns เทากับ 2 และจํานวน Rows เทากับ 3 ระบุคาความกวางตาราง (Width) เทากบั 100% เพื่อใหตารางยาวเต็มจอภาพ จากนั้นคลิกปุม Insert เพื่อแทรกตาราง
9. ตารางที่ไดจะปรากฏดังนี ้
เว็บไซตงาย รวดเร็วดวย Joomla 104
10. คลิกเมาสในเซลลแรก (แถวแรกคอลัมนแรก) เลือกภาพที่ตองการแสดง โดย
คลิกปุม
ปรากฏจอภาพเลือกภาพดังนี ้
คลิกเลือกภาพที่ตองการ ปอนคําอธิบายภาพในรายการ Image Description และ Image Title จากนัน้คลิกปุม Insert
คลิกเมาสในคอลัมนดานขวาของแถวแรก พิมพขอมูลทีมพัฒนาคนที่ 1 จัดแตงตามเหมาะสม เชน
ทําซ้ํากับรายการอื่นจนครบ
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 105 -
11. คลิกปุม Save เพื่อบันทึกขอมูล
เมื่อสรางเนื้อหา “ทีมพัฒนา” แลวข้ันตอนถัดไปคือ การสรางเมนูควบคุมเนื้อหาสวนนี้ โดย
1. คลิกเลือกเมน ูMenus, Main Menu* เพื่อสรางรายการเมนูเพิ่มในเมนหูลักของเว็บไซต
2. ปรากฏสวนควบคุมการสรางรายการเมนูของเมนูหลัก (Main Menu) ดังนี ้
3. คลิกปุม New เพื่อสรางรายการคําสั่งใหม
4. เลือกประเภทของรายการเมนู กรณนีี้เลือกเปน Articles
เว็บไซตงาย รวดเร็วดวย Joomla 106
5. เมื่อคลิก Articles แลวจะปรากฏรายการเลือกดังนี ้
คลิกเลือก Article Layout เนื่องจากเนื้อหาที่จะเชื่อมมายังรายการเมนนูี้ เปนเนื้อหาแบบ Static ที่ไมไดกําหนด Section และ Category ซ่ึงจะปรากฏรายการเลือก ดังนี ้
6. เลือกเนื้อหาทีต่องการเชื่อมกับรายการเมนู โดยคลิกปุม Select จากรายการ
Select Article
ปรากฏรายการบทความ ดังนี้
คลิกเลือกบทความ “ทีมพัฒนา”
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 107 -
7. เมื่อเลือกบทความที่ตองการแลว ก็มาถึงขั้นตอนกําหนดขอความกํากับรายการเมนู
เมื่อกําหนดคาดังขางตนแลว ก็คลิกปุม Save เพื่อบันทกึการสรางรายการเมนูเพิ่มเติม
ในเมนหูลัก
จากนั้นตรวจสอบการสรางรายการเมนูเพิม่เติมโดยคลิกเลือกรายการ Preview ที่ปรากฏมุมขวาของจอภาพ
จะปรากฏรายการคําสั่งเพิ่มในแถบเมนหูลัก และเมื่อคลิกที่รายการเมนู “ทีมพัฒนา” จะ
ปรากฏเนื้อหาดังนี ้
เว็บไซตงาย รวดเร็วดวย Joomla 108
เนื้อหาหมวดคลังความรู
การสรางเนื้อหาหมวดคลังความรู ตามที่ไดออกแบบไวจะประกอบดวยหมวดยอย 3 หมวด ซ่ึง Joomla ไดกําหนดหมวดเนื้อหาหมวดใหญเปน Section และเนื้อหาหมวดยอยในแตละ Section เปน Category
รูปแสดงโครงสรางการจัดการเนื้อหาของ Joomla
จากแผนการวิเคราะหดังกลาว จึงตองสราง Section กอน โดย
1. เลือกเมนูคําสั่ง Content, Section Manager
2. คลิกปุม New เพื่อสราง Section ใหม
Articles
Section A Section B Static Content
Category A-1 Category A-2 Category B-1
Content 1
Content 2
Content 1
Content 2
Content 1
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 109 -
3. กําหนดชื่อ Section และรายละเอียดเพิ่มเตมิไดจากรายการ Description
ตัวอยางระบุช่ือ Section เปน Knowledge แลวคลิกปุม Save
4. เมื่อสราง Section แลวข้ันตอนถัดไปเปนการสราง Category ใหกับ Section
Knowledge จํานวน 3 Categories โดยคลิกเลือกเมนูคําสั่ง Content, Category Manager
คลิกปุม New แลวกําหนดชือ่ Category
ตัวอยางกําหนดชื่อ Category เปน Library Science และเลือก Section เปน Knowledge จากนั้นคลิกปุม Save เพื่อบันทึกและทําซ้ําจนครบทั้ง 3 Categories
เว็บไซตงาย รวดเร็วดวย Joomla 110
5. เมื่อสราง Section และ Categories แลวข้ันถัดไปเปนการสรางเนือ้หาตาม
หมวดดวยวิธีการเดียวกับทีไ่ดแนะนําไปกอนหนานี้ แตจะตองเลือก Section และ Category ใหตรงกับเนือ้หา ดังนี ้
ปกติเนื้อหาลักษณะนี้ มักจะนําเสนอในหนาแรกของเวบ็ไซต (Front Page) จึงควรคลิกเลือกรายการ Front Page เปน Yes ดวย
จากนั้นปอนเนื้อหา จัดรูปแบบการแสดงผลใหเหมาะสม จึง Save เนือ้หา
6. เนื้อหาที่สรางจะปรากฏผาน Articles Manager ดังนี ้
7. และเมื่อคลิกปุม Preview จะแสดงผลหนาเว็บ ดังนี ้
8. จากหนาเว็บไซตดังกลาว ยังไมมีเมนูควบคุมการแสดงผล จึงควรสรางเมนู
ควบคุม
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 111 -
9. จากหนา Control Panel คลิกเลือกคําสั่ง Menu, Main Menu
10. คลิกปุม New เพื่อสรางรายการเมนูใหมแบบ Articles
11. ตองการสรางรายการเมน ู “คลังความรู” ซ่ึงเปนการโยงไปหา Section
Knowledge จงึตองคลิกเลือก Section และมีรายการยอย 2 ตัวเลือกคอื Section Blog Layout เพื่อตองการใหแสดงขอมลูในลักษณะ Blog หรือ Section Layout เพื่อตองการใหแสดงขอมูลในลักษณะลําดับรายการ (List) กรณีนี้ใหคลิกเลือกเปน Section Layout
เว็บไซตงาย รวดเร็วดวย Joomla 112
12. จากนั้นปอนชือ่รายการเมนูเปน “คลังความรู” และเลือก Section เปน Knowledge
คลิกปุม Save เพื่อบันทึก แลวคลิกปุม Preview เพื่อตรวจสอบผล
13. เพื่อใหเขาถึงขอมูลไดตรงมากขึ้น สามารถสรางรายการเมนูยอยภายใต “คลัง
ความรู” ตัวอยางตองการสรางรายการเมนูยอย ช่ือ “บรรณารักษ” ซ่ึงทําไดดังนี ้
14. จากหนา Control Panel คลิกเลือกคําสั่ง Menu, Main Menu
15. คลิกปุม New เพื่อสรางรายการเมนูใหมแบบ Articles
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 113 -
16. ตองการสรางรายการเมนู “บรรณารักษ” ซ่ึงเปนการโยงไปหา Category Library Science จึงตองคลิกเลือก Category และมีรายการยอย 2 ตัวเลือกคือ Category Blog Layout เพื่อตองการใหแสดงขอมูลในลักษณะ Blog หรือ Category Layout เพื่อตองการใหแสดงขอมูลในลักษณะลําดับรายการ (List) กรณีนีใ้หคลิกเลือกเปน Category Blog Layout
17. ระบุช่ือรายการเมนูเปน “บรรณารักษ” และเนื่องจากเปนรายการเมนยูอยของ
“คลังความรู” จึงตองคลิกเลือก คลังความรู จากรายการ Parent Item
18. เลือก Category เปน Library Science จากรายการ Category
เว็บไซตงาย รวดเร็วดวย Joomla 114
19. คลิกปุม Save เพื่อบันทึกและทําซ้ํากับ Category ที่เหลือจนครบทั้ง 3 หมวดยอย
20. เมื่อคลิกปุม Preview จะปรากฏผลหนาเว็บ ดังนี ้
เพียงเทานี้ก็ไดเนื้อหาและเมนูที่สรางดวยงานของตนเองจาก Joomla อยางรวดเรว็ ที่
เหลือก็คือการปรับแตงและเพิ่มเนื้อหาใหเหมาะสม กอนเผยแพรใหผูสนใจเขาถึงได
นําเนื้อหาจากโฟลเดอร data สรางเปนบทความตามหมวดเนื้อหาทีก่ําหนดไว
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 115 -
แบบสอบถามออนไลน (Poll)
เว็บไซตในปจจุบันควรใหความสําคัญกับผูชมเว็บ และมีขอมูลความคิดเห็นจากผูชมเว็บประกอบการพัฒนาปรับปรุง Poll เปน Components ที่มากับ Joomla สําหรับสรางแบบสอบถามออนไลนจากผูใชอยางงาย แสดงผลลัพธเปนกราฟแทงแนวนอน (Bar chart) ดวยสีสันที่สวยงาม
การสรางแบบสอบถามออนไลนทําไดโดยเลือกเมนูคําสั่ง Components, Polls
คลิกปุม New
ปอนคําถามในรายการ Title: ตัวเลือกในรายการ Options: และการนาํเสนอจากรายการ
Published: โดยคลิกเลือกรายการ Published เปน Yes เพื่อให Poll ที่สรางเผยแพรใหกับผูชมจากนั้นคลิกปุม Save
เมื่อสราง Poll แลวขั้นถัดไปเปนการแสดงผล Polls บนหนาเว็บ โดยเลือกคําสั่ง
Extensions, Module Manager จากนั้นคลิกปุม New เพื่อสราง Module ใหม
เว็บไซตงาย รวดเร็วดวย Joomla 116
คลิกที่รายการ Poll ตั้งชื่อ Poll ในรายการ Title และเลือก Poll จากรายการ Select poll
ทั้งนี้สามารถเลือกตําแหนงที่จะแสดงผล Poll ดานซายหรือดานขวาของจอภาพจากรายการ Position
คลิกปุม Save และคลิกปุม Preview เพื่อแสดงผลจากหนาเว็บไซต
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 117 -
Web Resources
เกือบทุกเว็บไซตมักจะหนีไมพนกับการนาํเสนอเว็บเครอืขายที่คัดสรรแลว โดยแสดงผลเปนลิงกเว็บไซตแยกหมวดหมู Joomla เตรียมความสามารถจัดการเว็บไซตไดงายๆ ดวย Components ช่ือ Web Links
การสราง Web Resources จะตองเริ่มจากการสรางหมวดหมูของเว็บ (Categories) กอน
โดยคลิกเลือกคําสั่ง Components, Web Links, Categories
คลิกปุม New เพื่อสรางหมวดเว็บ
ปอนชื่อหมวดเว็บในรายการ Title: แลวคลิกปุม Save และทําซ้ํากับหมวดอื่นๆ จนครบ
ตามตองการ
เว็บไซตงาย รวดเร็วดวย Joomla 118
เมื่อสรางหมวดเว็บแลว ขัน้ถัดไปจะเปนการสรางรายการลิงกเว็บไซตตามหมวดเว็บ
โดยเลือกคําสั่ง Components, Web Links, Links
คลิกปุม New เพื่อสรางรายการลิงกเว็บไซต
• ระบุช่ือรายการลิงกเว็บใน Name
• ระบุ URL ของเว็บใน URL
• คําอธิบายเว็บใน Description
• เลือกรายการ Target เปน New Window with Browser Navigation เพื่อใหแสดงผลเว็บในจอภาพใหม
เมื่อบันทึกจะปรากฏรายการลิงกเว็บไซต ดังนี ้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 119 -
ตอนนี้ก็ไดคลังเว็บไซตแลว แตการนําเสนอใหผูชมเขาถึงไดแลว จะตองสรางเมนูควบคุมแสดงผลกอน โดย
1. เลือกเมนูคําสั่ง Menu, Main Menu แลวคลิกปุม New
2. คลิกรายการ Web Links
3. คลิกรายการ All Categories, Web Link Category List Layout
เว็บไซตงาย รวดเร็วดวย Joomla 120
4. ระบุคําอธิบายรายการเมนใูนรายการ Title เชน คลังเว็บไซต แลวคลิกปุม Save จากนั้นคลิกปุม Preview เพือ่แสดงผล
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 121 -
ปายโฆษณา (Banner)
เนื้อหาเดน หรือกจิกรรมเดนมกัจะนําเสนอในรูปแบบภาพโฆษณาที่สามารถสุมแสดงผลอัตโนมัติเมื่อมีการโหลดหนาเว็บไซต (Re-load) Joomla จึงไดเตรยีมการจัดการเกี่ยวกับปายโฆษณาหรือ Banner รวมทั้งสวนลิงกไปยังเว็บไซตที่เกี่ยวของ โดยทํางานผาน Components, Banner
การสรางปายโฆษณา จะตองเตรียมภาพใหมีขนาดที่เหมาะสมกอน เชน ภาพฟอรแมต JPEG ขนาด 450 × 100 พิกเซล
ภาพตวัอยางอยูที่โฟลเดอร image/banner
เมื่อเตรียมภาพแลวขั้นถัดไปให Upload ภาพดวย Media Manager ไปไวที่โฟลเดอร banners
จากนั้นเริ่มเขาสูการสรางปายโฆษณา โดย
1. สราง Category ของปายโฆษณาดวยคําสั่ง Components, Banner, Category
2. สรางชุดยอยของปายโฆษณาดวยคําสั่ง Components, Banner, Clients เชน
เว็บไซตงาย รวดเร็วดวย Joomla 122
3. สรางรายการปายโฆษณาดวยคําสั่ง Components, Banner, Banners
• Name: ระบุช่ือปายโฆษณา
• Category เลือกหมวดปายโฆษณา
• Client Name เลือกชุดยอยของปายโฆษณา
• Click URL ระบุ URL ที่ตองการใหแสดงผล กรณีไมม ีURL ใหระบุ URL ของเว็บไซตหลักหรือระบุดวย # ก็ได
• เลือกภาพปายโฆษณาใหตรงกับเนื้อหาในรายการ Banner Image Selector
4. ระบุรายละเอยีดแลวคลิกปุม Save จากนั้นทําซ้ําจนครบทุกภาพที่ตองการ
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 123 -
5. กําหนดการนําเสนอดวยคําสั่ง Extension, Module Manager คลิกเลือก Banners
6. ปรับแตงคาที่จาํเปน
• Title ระบุช่ือ Module เชน Banner
• Show Title ใหเลือกเปน No
• Position ใหเลือกเปน user1
• Randomise เลือกเปน Sticky, Randomise
7. จากนั้นคลิกปุม Save แลวดผูลที่ปรากฏในหนา Front page
การระบุตําแหนง (Position) ในการแสดงผล Module จะตองเลือกใหเหมาะสม กรณีเชน Banner ควรเลือกเปน user1 ทั้งนี้เจาหนาที่ที่ดูแลเว็บจะตองตรวจสอบตําแหนงของ Template แตละ Template ที่เลือกใชวากําหนดตําแหนงไวอยางไร โดยคลิกเลือกคําสั่ง Extensions, Template Manager
เว็บไซตงาย รวดเร็วดวย Joomla 124
จากนั้นคลิกที่ Radio Box หนา Template ที่เลือก แลวคลิกปุม Edit ปรากฏจอภาพดงันี้
คลิกปุม Preview โปรแกรม Joomla จะแสดงชื่อตําแหนง (Position Name) ดวยอักษรสีแดงในกรอบดังตัวอยาง
จากภาพตัวอยาง จะพบวา
• Main Menu, Login Form แสดงผล ณ ตาํแหนง Left
• Poll แสดงผล ณ ตาํหนง Right
• Banner แสดงผล ณ ตาํแหนง user1
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 125 -
คลังภาพออนไลน
“ภาพ” ส่ือแทนขอความที่ไดรับความสนใจมากสื่อหนึ่ง เว็บไซตหากไมนําเสนอภาพก็คงไมสามารถเรียกผูชมไดมากเทาที่ควร ดงันั้นการสรางคลังภาพออนไลนจึงเปนแนวทางหนึ่งที่ชวยใหจํานวนผูชมเว็บสูงขึ้นได
Joomla เตรียม Extension ที่เกี่ยวกับ Photo Gallery ไวใหเลือกใชหลากหลายโดยดาวนโหลดไดจากเว็บ http://www.joomla.org ทั้งนี้จะขอแนะนําการสรางคลังภาพออนไลนดวย Extension ช่ือ Ozio Gallery โดยไฟลติดตั้งคือ com_oziogallery-0.24.zip
การใชงานจะตองเริ่มจากการติดตั้ง Components กอนดวยคาํสั่ง Extension, Install/Uninstall
จากนั้น Browse เลือกไฟลแลวคลิกปุม Upload File & Install เพื่อติดตั้ง
Component ที่ติดตั้งแลวจะไปแสดงผลที่เมนู Components
เว็บไซตงาย รวดเร็วดวย Joomla 126
เมื่อคลิกเลือก Components, Ozio Gallery จะปรากฏจอภาพดังนี ้
แสดงวา Components Ozio Gallery ติดตั้งไดสมบูรณ ขัน้ตอนถัดไปคอืการเตรียมภาพ
ที่จะแสดงผล โดยควรเปนภาพฟอรแมต JPEG (.jpg) ขนาดความกวางไมเกิน 640 พิกเซล ช่ือไฟลภาพจะตองเปนภาษาองักฤษ หามเวนวรรค และ Upload ดวย Media Manager ไปไวที่โฟลเดอร images/oziogallery
ขั้นตอนสุดทายคือ การสรางรายการเมนูควบคุม Ozio Gallery โดยเลือกคําสั่ง Menu,
Main Menu แลวคลิกปุม New
เลือก Ozio Gallery
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 127 -
กําหนดขอความกํากับรายการเมนูในรายการ Joomla Ozio Gallery Components for Joomla เชน คลังภาพ แลวบนัทึกดวยปุม Save
เมื่อแสดงผลทางหนาเว็บจะปรากฏรายการเมนู และปรากฏผลคลังภาพดังนี ้
เพียงเทานี้ก็ไดคลังภาพไมยาก อีกทั้งมีลูกเลนในการนําเสนอที่นาสนใจมาก
เว็บไซตงาย รวดเร็วดวย Joomla 128
นอกจากนี้โปรแกรมยังอนญุาตใหปรับเปลี่ยนรูปแบบการแสดงผลไดโดยเลือกเมนูคําสั่ง Components, Ozio Gallery
จากนั้นคลิกปุม Settings ปรากฏรายการเลือกรูปแบบการแสดงผลในรายการ Skin
รวมทั้งแท็บ Skin ยอยทีใ่ชปรับแตงการแสดงผลแตละ Skin ที่เลือก
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 129 -
คลังเอกสาร คลังดาวนโหลด
คลังเอกสาร คลังดาวนโหลดฟงกใจอกีฟงกชันทีเ่ปนหัวใจของระบบจัดการเอกสารออนไลน เพราะเอกสารในระบบเว็บไซตมักจะมจีํานวนเพิ่มขึ้นตามเวลา การจดัหมวดหมูเอกสารใหคนหาไดงายจึงมคีวามสําคัญมาก Joomla ไดเตรียม Extension บริหารจัดการเอกสารพรอมความสามารถอื่นๆ ไวหลากหลายโปรแกรม
โปรแกรมที่จะนําเสนอเปนตวัอยางคือ IonFiles ดาวนโหลดไดจาก Extensions ของ http://www.joomla.org และไดไฟลดังนี้ ionFiles-4[1].2.zip
การติดตั้งก็คลายคลึงกับการติดตั้ง Extension อ่ืนๆ ที่ไดแนะนําไปแลว คือ Extension, Install/Uninstall
เมื่อติดตั้งแลวจะปรากฏสวนควบคุมในเมนู Components, ionFiles
เร่ิมตนจะตองปรับแตงระบบใหเหมาะสมกอน โดยคลิก Configuration
เว็บไซตงาย รวดเร็วดวย Joomla 130
แท็บ Configuration เลือกวาจะแสดงหรือไมใหแสดงขอมูลตามรายการเลือกหรือไม เมื่อปรับคาตามตองการแลวใหคลิกปุม Save
ขั้นตอนถัดไปคือ สรางหมวดเอกสาร (Categories) โดยคลิกที่แท็บ Manage Categories
สรางหมวดเอกสารโดยคลิกปุม New แลวปอนชื่อหมวดเอกสาร
คลิกปุม Save เพื่อบันทึก แลวสรางหมวดเอกสารอื่นตามตองการ
เมื่อสรางหมวดเอกสารไดแลว ขั้นตอนสุดทายคือ การนําเขาแฟมเอกสาร โดยสามารถ
นําเขาแฟมเอกสารไดหลายฟอรแมตทั้ง .pdf, .doc, .xls, .ppt, .odt เปนตน
การนําเขาเอกสารมี 2 ขั้นตอนคือ
1. การ Upload แฟมเอกสารเขาสูระบบเว็บ Joomla ผานทาง Media Manager
2. การสรางคลังดาวนโหลดเอกสารดวย ionFiles
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 131 -
Upload เอกสารดวย Media Manager
การ Upload แฟมเอกสารดวย Media Manager ทําไดโดยเลือกคําสั่ง Site, Media Manager และสรางโฟลเดอรสําหรับเอกสารโดยเฉพาะ เชน documents
คลิกเลือกโฟลเดอร Media แลวระบุช่ือโฟลเดอรใหมเปน document จากนัน้คลิกปุม
Create Folder
จากนั้นคลิกเลือกโฟลเดอร documents เลือกไฟลที่ตองการ Upload แลวคลิกปุม Start
Upload
สรางคลังดาวนโหลดเอกสาร
เมื่อนําเขาแฟมเอกสารเขาสู Media Manager แลวข้ันถัดไปคือการนําลิงกเอกสารไปยัง ionFiles โดยเลือกคําสั่ง
เว็บไซตงาย รวดเร็วดวย Joomla 132
ปรากฏสวนควบคุมการจัดการแฟมเอกสารดังนี ้
คลิกปุม New แลวระบุขอมลูเอกสารประกอบการทําลิงกแฟมเอกสาร ดังนี ้
ปอนขอมูลรายการที่จําเปน ดังนี ้
• File Title ช่ือเอกสารที่ตองการใหแสดงในหนาเว็บ
• File Name ช่ือแฟมเอกสาร
• Description คําอธิบายเอกสาร
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 133 -
• Version รุนของเอกสาร
• Licenses type ประเภทลิขสิทธิ์ เชน (c) คือ Copyright, (cc) คือ Creative Commons, Public Domain คือ ของสาธารณะ หรืออ่ืนๆ
• Category หมวดของแฟมเอกสาร
• Size ขนาดแฟมเอกสาร (ระบุหนวยตอทายเปน KB หรือ MB)
• Release Date วันที่เผยแพรแฟมเอกสาร
• File URL สวนสําคัญมากจะตองระบุเปน images/documents/ช่ือแฟมเอกสาร.สวนขยาย
• Author เจาของแฟมเอกสาร
เมื่อระบุขอมูลจําเปนดังกลาวแลวก็คลิกปุม Save เพื่อบันทึก
ขั้นตอนสุดทายคือการสรางรายการเมนูควบคุม ionFiles ดวยวิธีการสรางเมนูที่เคย
แนะนําไปกอนแลว คือ เลือกคําสั่ง Menu, Main Menu คลิกปุม New
เว็บไซตงาย รวดเร็วดวย Joomla 134
เลือก ionFiles กําหนดชื่อรายการเมน ู
เมื่อคลิกปุม Save จะปรากฏรายการเมนูเพิม่ใน Main Menu และจะแสดงผลเมื่อคลิก
เลือก ดังนี ้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 135 -
ขาวประกาศอัตโนมติัแบบ RSS Feed
RSS ยอมาจาก “Really Simple Syndication” ซ่ึงอาจแปลเปนไทยไดวา “การกระจายขาวสารอยางงายๆ” เปนเทคโนโลยีที่นําขอมูลที่ผูพัฒนาสรางขึ้น ดึงมานําเสนอบนเวบ็ไซตของเราโดยอัตโนมัติ ทําใหลดภาระในการคดัลอกขาวหรือเนื้อหา ไดขาวหรือเนื้อหาทีป่รับปรุงไดตลอดเวลาเมื่อตนฉบับเปลี่ยนแปลง
Joomla รองรับการทํางาน RSS โดยผานทาง Components, News Feed
โดยจะตองเริ่มจากการสรางหมวดขาวกอน คลิกที่ Categories จากนัน้คลิกปุม News
ระบุช่ือหมวดขาว ดังตัวอยาง
• Title ช่ือหมวดขาว
• Published เลือก Yes เพื่อใหหมวดขาวทํางาน
เว็บไซตงาย รวดเร็วดวย Joomla 136
เมื่อคลิกปุม Save จะปรากฏหมวดขาว ดังนี้
สามารถสรางหมวดขาวประเภทอื่นๆ ไดตามตองการ เมื่อเรียบรอยแลวก็จะเปน
การระบุ URL ของ RSS Feed จากเว็บผูใหบริการดวยคําสั่ง Components, News Feeds, Feeds คลิกปุม New เพื่อสรางรายการขาวใหม
• Name ช่ือขาวที่จะดึง เชน ผูจัดการ
• Published เลือก Yes เพื่อใหรายการนี้ทาํงาน
• Category เลือกหมวดขาว
• Link ระบุ URL ของ RSS Feeds ที่ตองการดึง
• Number of Articles จํานวนขาวที่ตองการใหแสดงในหนาเว็บ
• Cache Time เวลา (วินาที) ที่ตองการใหปรับปรุงรายการขาว
เมื่อไดกําหนดขอมูลแลวจึงคลิกปุม Save
การหา URL ของ RSS Feeds ทําไดโดยเขาไปยังเว็บไซต (แนะนําใหใช Firefox) เชน หนังสือพิมพผูจัดการ ดวย URL http://www.manager.co.th แลวเล่ือนหาสัญลักษณ ในหนาเว็บ ดังนี้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 137 -
คลิกปุมขวาของเมาสที่สัญลักษณ ในหมวดขาวที่ตองการ แลวเลือกคําสั่ง Copy
Link Location เพื่อคัดลอก URL ของ RSS ขาวในหมวดที่เลือก
จากนั้นจึงนํา URL ที่คัดลอกไป Paste ในรายการ Link ของ News Feeds
เมื่อไดหมวดขาว RSS Feeds ตามตองการแลว จึงสรางเมนูควบคุมการแสดงผลตอไป
เว็บไซตงาย รวดเร็วดวย Joomla 138
ติดตอทีมพัฒนา ผูดแูลเว็บ
เว็บไซตควรจะมีเนื้อหาที่แสดงถึงขอมูลการติดตอส่ือสาร อยาใหความสําคัญกับการติดตอดวย e-Mail หรือ Web board เพียงอยางเดยีว การระบุขอมูลการติดตอทีมพฒันา หรือผูดูแลเว็บมีความสําคัญมาก Joomla ไดเตรียม Components Contact เปนสวนควบคุมโดยสามารถสรางเนื้อหาไดหลายหมวด จึงตองเริ่มจากการสรางหมวดขอมูลการติดตอกอน ดวยคําสั่ง Components, Contacts, Categories
สามารถสรางไดหลายหมวดดังนี ้
เมื่อสรางหมวดขอมูลการติดตอแลว ก็จะเปนการสรางรายการติดตอดวยคําสั่ง
Components, Contacts, Contacts โดยรายการระบุเมื่อคลิกปุม New ไดแก
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 139 -
• Name ระบุช่ือรายการติดตอ เชน Web Master
• Category เลือกหมวดการติดตอที่สรางไวกอนหนา
• Links to User กรณีที่มีการสรางสมาชิกมากกวา 1 สามารถระบุไดวาการติดตอนี้ จะหมายถึงสมาชิกใด
จากนั้นก็ระบขุอมูลการติดตอ ดังนี ้
เมื่อระบุขอมูลที่จําเปนครบแลวจึงคลิกปุม Save และสราง Menu ควบคุมการแสดงผล
ตอไป
เว็บไซตงาย รวดเร็วดวย Joomla 140
เพิ่มชุดเมนู
ปกติ Joomla ไดเตรียมชดุเมนูไวใหแลว 1 ชุดมาตรฐานคอื ชุดเมนูหลัก (Main Menu) แตผูพัฒนาสามารถสรางชุดเมนูเพิ่มไดตามตองการ เชน ตองการเพิ่มชดุเมนูในแนวนอนวางไวที่ตําแหนง user3 ประกอบดวยรายการ Home, RSS News และ Contact Us
1. เลือกเมนูคําสั่ง Menu, Menu Manager คลิกปุม New เพือ่สรางชุดเมนูชุดใหม
2. กําหนดชื่อชุดเมนูเปน Top Menu ทั้ง 4 รายการ แลวจึงคลิกปุม Save
3. คัดลอกรายการเมนู Home จาก Main Menu ไปยัง Top Menu โดย
1) เลือกคําสั่ง Menu, Main Menu
2) คลิก Radio Box หนา Home แลวคลิกปุม Copy
3) เลือก Top Menu แลวคลิกปุม Copy
4) รายการเมนู Home จะถูกคัดลอกมาไวที่ Top Menu ดังนี ้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 141 -
4. ถัดไปก็สรางรายการเมนู RSS News และ Contact Us ดวยวิธีการที่ไดแนะนําไปกอนแลว แตใหเลือกชดุเมนูเปน Top Menu ดังนี ้
5. กําหนดการแสดงผล Top Menu ณ ตําแหนง user3 โดยเลือกคําสั่ง Extension,
Module Manager
6. คลิกเลือก Top Menu
7. เลือก Enabled เปน Yes และ Position เปน user3
8. เมื่อบันทึกการปรับแสดงผล Top Menu จาก Module Manager แลวแสดงผล
เว็บ เมนใูหมทีส่รางจะปรากฏในหนาเว็บ ดังนี ้
เว็บไซตงาย รวดเร็วดวย Joomla 142
สรางบัญชสีมาชิก
จุดเดนของ CMS คือการอนุญาตใหสมาชิกมีสวนรวมสรางสรรค ปรับปรุงเว็บไซตทําใหเว็บไซตมีความเคลื่อนไหวอยูตลอดเวลาจากกลุมสมาชิก การสรางสมาชิกสามารถทําไดหลายวิธี เชน เปดระบบลงทะเบียนสมาชิกอัตโนมัติจากหนาเว็บ หรือ Admin ของเว็บเปนผูสรางบัญชีสมาชิก
การลงทะเบียนสมาชิกอัตโนมัติจากหนาเว็บ จะทําไดเมื่อ Admin กาํหนดคา Global Configuration ในสวน User Settings ดังนี้
และสราง Module Login ใหทํางานในหนา Front-end ของเว็บ
โดยจะปรากฏสวน Login ในหนา Front-End ของเว็บดงันี้
Allow User Registration เลือกเปน Yes
Module Login
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 143 -
เมื่อผูสนใจคลิกรายการเมน ู Create an account จะปรากฏจอภาพลงทะเบียนเปนสมาชิกดังนี ้
ผูสมัครปอนขอมูลตามฟอรมลงทะเบียน และคลิกปุม Register กรณีที่ Web Server
และเว็บไซตไดกําหนดคา Mail Server ไวถูกตองระบบจะสงอีเมลไปยังผูสมัครตามอีเมลที่ระบุ เพื่อใหยืนยันการสมัคร
การกําหนดคา Mail Server ใหระบุที่ Global Configuration ในสวน Server, Mail Settings
กรณีที่ Web Server และเวบ็ไซตไมไดกําหนดคา Mail Server ไวผูสมัครจะไมไดรับอีเมลยืนยนั Admin จะตองเปนผูแจงผูสมัครดวยวิธีการอื่นแทน โดย Admin เขาไปตรวจสอบบัญชีผูสมัครไดทาง Control Panel คลิกที่ไอคอน User Manager
เว็บไซตงาย รวดเร็วดวย Joomla 144
จากภาพตัวอยางจะพบวามีบญัชีใหมคือ courseware2u ที่ยังไมไดเปดใช สังเกตุไดที่รายการ Enabled เปนกากบาทสีแดง หาก Admin ตองการใหสมาชิกนีม้ีสิทธิ์ทํางานกับเว็บไซตก็ใหคลิกกากบาทสีแดง ใหเปนเครื่องหมายถูกสีเขียว
การแกไขขอมลูสมาชิก ทําไดโดยคลิกที่ช่ือสมาชิกนั้นๆ
สําหรับการสรางบัญชีสมาชิกใหมโดย Admin ทําไดโดยเขามาที่ User Manager แลว
คลิกปุม New
แลวปอนขอมลูสมาชิก ในสวน Group เปนสวนสําคัญมากคือการสิทธิ์ของสมาชิกวามี
สิทธิ์อยางไรกับเว็บไซต โดยกําหนดสิทธิไ์ดดังนี ้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 145 -
• Public Front-end สิทธิ์เฉพาะการล็อกอินทางหนาเว็บ Front-end
o Registered มีสิทธิ์เฉพาะสง URL เว็บแนะนํา และอานเนื้อหาบางสวนที่กําหนดไวเฉพาะสมาชิก
o Author มีสิทธิ์สรางเนื้อหาและเหมือนกับ Registered o Editor มีสิทธิ์สราง/แกไขเนื้อหาและเหมือนกับ Author o Publisher มีสิทธิ์สราง/แกไขเนื้อหาทั้งของคนเองและสมาชิกทานอื่น
รวมทั้งสิทธเหมือนกับ Author
• Public Back-end สิทธิ์ล็อกอินทางหนาเว็บ Front-end และ Back-end ของเว็บไซต
o Manager มีสิทธิ์เหมือน Publisher แตสามารทํางานจาก Back-end Control Panel ของเว็บได
o Administrator มีสิทธิ์คลายกับ Super Admin แตยังไมสิทธิ์เปลี่ยนคา Configuration ของระบบ
o Super Administrator มีสิทธิ์ทุกอยางในการจดัการเว็บไซต
เว็บไซตงาย รวดเร็วดวย Joomla 146
เมนูเฉพาะสมาชิก
การเขาทํางานสําหรับสมาชิกในโหมด Front-end ผูพัฒนาเว็บควรสรางเมนูการทํางานเฉพาะสมาชิกขึ้นมา เชน การปรับแกไขขอมูลสมาชิก (Updated Profile) การสงบทความเขาสูเว็บ (Submit Article) การสงเว็บไซตแนะนํา เปนตน โดยชุดเมนูนีจ้ะแสดงเมื่อสมาชิกล็อกอินเทานั้น
การสรางชุดเมนูเฉพาะสมาชกิทําไดโดยเลอืกคําสั่ง Menu, Menu Manager แลวคลิกปุม New สรางชุดเมนูใหม เชน User Menu
เมื่อสรางชุดเมนูใหมแลว จะตองเปดใหแสดงผลดวยโดยคลิกเมนูคําสั่ง Extension,
Module Manager แลวคลิก Enabled
แตเนื่องจากชดุเมนูนีจ้ะอนญุาตเฉพาะสมาชิกเทานั้น จึงตองปรับคา Access Level ดวย
โดยคลิกที่ Module User Menu เพื่อเขาไปปรับคา Access Level เปน Registered รวมทั้งปรับตําแหนง (Position) และ Order ใหเหมาะสมดวย
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 147 -
เพิ่มรายการคําสั่งใน User Menu เชน รายการคําสั่งสําหรับปรับปรุงขอมูลของสมาชิก
โดยคลิกเลือกคําสั่ง Menu, User Menu แลวคลิกปุม New
เลือกคําสั่ง User
เว็บไซตงาย รวดเร็วดวย Joomla 148
เลือกคําสั่งยอยเปน User Form Layout จากนั้นระบุช่ือรายการเมนู เชน Update Profile
เมื่อคลิกปุม Save จากนัน้กลับไปทํางานในหนา Front-end แลว Login เขาสูระบบจะ
ปรากฏชุดเมนใูหม และรายการเมนูดังนี ้
เพียงเทานี้ก็ไดเมนูและคําสั่งสําหรับสมาชิกพรอมใชงานแลว แตยงัไมครบนะครบั
ควรสรางรายการเมนูอ่ืนๆ ดวย เชน แนะนําเว็บไซต หรือสงบทความเขาสูเว็บเพือ่กําหนดใหเปนเว็บที่สมาชิกมีสวนรวมในการสรางสรรคอยางแทจริง
คําสั่งแนะนําเว็บไซตสําหรับสมาชิก เลือกไดดังนี ้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลย ี
บุญเลิศ อรุณพิบูลย
- 149 -
คําสั่งสงบทความเขาสูระบบ คือ