manualjoomla1.5 - STKS – Science and Technology Knowledge Services

เว็บไซตงาย รวดเร็วดวย 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


ปจจุบันมหีลายคนที่มักสับสนกับการใชคําวา เว็บเพจ เวบ็ไซด และโฮมเพจ โฆษณาหลายแหงลงประกาศรับจางสรางโฮมเพจ ถาแปลกันตรงๆ หมายถึงวา เขารับจางสรางกันแคหนาโฮมเพจหนาเดียว หนาเว็บเพจอื่นๆ ไมรับ? บางคนใชเว็บไซดแทนเว็บเพจ ใชโฮมเพจแทนเว็บไซด ปนกันไป อยางไรก็ดีคนไทยหลายคนคุนเคยกับคําวา โฮมเพจ มากกวา เว็บเพจ ดังนั้นการสื่อสารบางครั้งตองระวัง

เว็บเบราวเซอร (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)


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>


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">  </STYLE>

XSL

XSL ยอมาจาก the eXtensible Style Language เปนมาตรฐานใหมที่เกิดขึ้นมาเพือ่รองรับกับขอมูลที่เปน XML ทั้งนี้ XSL จะเปนสวนทีบ่อกวาขอมูล หรือเอกสารที่จัดเก็บเปนแฟมเอกสาร XML จะมีการแสดงผลเปนรูปรางหนาตาเชนไร นอกจากนี้ยังใช XSL ในการแปลงรูปแบบ (format) ของขอมูลไดดวย เชน แปลงเอกสาร XML ไปเปน HTML หรือ PDF เปนตน

เอกสาร XSL คลายกับเอกสาร CSS ในกรณีที่ทั้งสองเอกสารมีการกําหนดสไตลที่ประยุกตไปยัง element ที่แนนอน แตมีส่ิงแตกตางกันเล็กนอย CSS จะกําหนดสไตลการพิมพเฉพาะ HTML Element เทานั้น ในทางตรงขาม XSL สามารถที่จะควบคุมขอมูลที่สงออกมาไดอยางสมบูรณกวา อีกทั้งขอมูลที่จะนําเสนอนั้นจะมีอิสระตอการปรับปรุงหรือเพิ่มขอมูล XSLใหสามารถจัดเรียงและกรองขอมูล XML ไดงายกวาดวย


การยกเลิกการแบงตอนเนื้อหา ก็สามารถทําไดโดยคลกิที่เสนประสแีดง แลวกดปุม <Delete> แลวบันทึก บทความจะแสดงผลยาวตอเนื่องไมมีลิงก “Read more…” ดังนี ้


รูปภาพ

เอกสารเว็บคงขาดสวนแสดงผลดวยรูปภาพมิไดอยางแนนอน อยางไรก็ตามการนําเสนอรูปภาพสําหรับเอกสารเว็บก็มีฟอรแมตภาพเฉพาะ ภาพกราฟก หรือรูปกราฟกที่นํามาใชในการทําเว็บเพจ หรือนํามาใชในอินเทอรเน็ต จะตองเปนแฟมลักษณะเฉพาะ ปจจุบนันิยมใชกัน 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 ทําใหภาพสามารถปรับตัวเองไดตามจอภาพ และปรับระดบัความสวางที่แทจริงตามที่ควรจะเปน


การออกแบบเว็บเพจ

การออกแบบและพัฒนาเว็บเพจ สามารถทําไดหลายระบบ ขึ้นอยูกับลักษณะของขอมูล ความชอบของผูพัฒนา ตลอดจนกลุมเปาหมายที่ตองการนําเสนอ เชน หากกลุมเปาหมายเปนเด็กวัยรุน และนําเสนอขอมูลเกี่ยวกับความบันเทงิ อาจจะออกแบบใหมี ทิศทางการไหลของหนาเว็บที่หลากหลายใชลูกเลนไดมากกวาเว็บทีน่ําเสนอใหกับผูใหญ หรือเว็บดานวิชาการ ทั้งนี้การออกแบบเว็บเพจ สามารถแบงไดสามลักษณะ คือ

• แบบลําดับขั้น (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


ข้ันเตรียมการ

การพัฒนาเว็บไซต ควรกําหนดวัตถุประสงค เปาหมายการจัดทํา ศึกษาจุดเดนจดุดอยของเทคโนโลยีที่จะนํามาใชงาน เพื่อใหการพัฒนาเกิดผลสัมฤทธิ์สูงสุด

คําถามเพื่อชวยในการวางแผนเว็บไซต

• ช่ือโครงการ/เว็บไซต

• กลุมเปาหมาย

• วัตถุประสงค/เปาหมาย

• ขอมูลที่ตองการนําเสนอตอกลุมเปาหมาย

• ขอมูลใดที่พรอมสําหรับนําเสนอ

• ขอมูลอ่ืนๆ ประกอบเว็บไซต

• จํานวนหนาเวบ็ที่ตองการพฒันา

• หนวยงาน/กลุม/ทีมงานพัฒนาเว็บไซต

• หัวหนาโครงการ

• ผูบริหารระบบ

• ความถี่ในการปรับปรุงเว็บไซต

• การตรวจสอบขอมูลยอนกลับจากกลุมเปาหมาย

• ผูรับผิดชอบตรวจสอบขอมูลยอนกลับจากกลุมเปาหมาย/ตอบคําถาม

• คียเวิรดสําหรับเว็บไซต

• หมวดของเว็บไซต

• การประชาสัมพันธเว็บไซต

• ระบบคอมพิวเตอร เครือขายที่ตองการ

• เทคโนโลยีที่ตองการ

• Domain name สําหรับเว็บไซต

กําหนดโครงรางของเว็บ

การกําหนดโครงรางของเว็บ เปนขั้นตอนสําคัญขั้นแรกก็วาได เพราะเอกสารเวบ็ที่สรางจะเพิ่มจํานวนเรื่อยๆ และมีจุดเชื่อม (Link) จํานวนมาก หากไมมกีารวางแผนไวกอน จะทําใหการปรับปรุง แกไขเกดิปญหาไดงาย ปญหาที่ประสบแนนอนคือ ลืมวาแฟมเอกสารที่เคยสรางไวแลว มีช่ืออะไรบาง ซ่ึงจะสงผลใหการทําจดุเชื่อมเกิดปญหาตามไปดวย เพราะแฟมเหลานี้อาจจะทิ้งชวงเวลานานพอสมควร จึงจะปรับปรุงอีกครั้ง วิธีการที่ดีที่สุดเพื่อปองกัน



- 15 -

ปญหาดังกลาว ควรวางแผนออกแบบเอกสารเว็บบนกระดาษ และกาํหนดชื่อแฟมเอกสารเว็บแตละแฟม จากขั้นตอนนีจ้ะทําใหผูพฒันาสามารถมองเห็นภาพการไหล (Data Flow) ของเอกสารเว็บไดชัดเจน และพิจารณาตอไดวาเอกสารเวบ็แตละแฟมมคีวามสัมพันธกับเอกสารอ่ืนๆ อยางไร และสัมพันธกบัแฟมเอกสารใดบาง

การกําหนดชื่อแฟมเอกสารเวบ็ มีขอกําหนดทีแ่ตกตางไปจากการกําหนดชื่อแฟมเอกสารปกติทัว่ไป คือ

ช่ือแฟมและนามสกุล จะถูกควบคุมจาก Web Administer ดังนั้นผูพฒันาที่ไมใช Web Administer จะตองสอบถามกฎการตั้งชื่อโดยละเอยีด โดยปกติ มหีลักคราวๆ ดังนี ้- ควรใชตัวอักษร a – z หรือตวัเลข 0 – 9 หรือผสมกัน - ตัวอักษร a – z ควรเปนตวัพมิพเล็ก - หามใชเครื่องหมายอื่นใดรวมทั้งชองวาง ยกเวน Dash (ขีดกลาง)

นอกจากนี้ยังจะตองพิจารณาถึงลักษณะหนาเว็บ, ลักษณะของสีพื้น, สีอักษรและสีของจุดเชื่อม (Links) ดวย โดยสามารถรางหนาเว็บคราวๆ เพื่อใหเห็นภาพโดยรวมกอนสรางงานจริง รวมทั้งการใชสีของหนาเว็บ ควรใชสีที่อานงาย สบายตา และมีลักษณะรวมกันในทุกๆ หนาเว็บ ไมควรเปลี่ยนสีพืน้ใหฉูดฉาด รวมทั้งศึกษาหนาเว็บไซตที่มกีารพัฒนาในเครือขายเพื่อเปนแนวทางในการออกแบบ

รูปแสดงภาพรางของหนาเวบ็


กําหนดโฟลเดอร (Folder) ที่ใชเก็บเอกสารเว็บ

การกําหนดโฟลเดอรกอนที่จะสรางชุดเอกสารเว็บเพจ เปนลําดับขั้นตอนที่ควรปฏิบัติดวยทุกครั้ง เพื่อใหเอกสารเว็บแตละชดุมรีะบบการจัดเก็บที่เปนระบบ สามารถคนหา และเรียกใชงานไดสะดวก ในการสรางชุดเอกสารเว็บแตละชุด จะมีไฟลตางๆ จํานวนมาก ทั้งไฟลเอกสาร HTML, ไฟลภาพกราฟก, ไฟลเสียง, ไฟลวดีิทัศน และอื่นๆ ทีเ่กี่ยวของ ไฟลทั้งหมดนี้ ควรจัดเก็บไวในที่ที่เดยีวกัน อาจจะสรางโฟลเดอรยอยเพื่อแยกกลุมไฟลได แตจะตองสรางภายใตโฟลเดอรหลักที่สรางไวกอนแลว ไมควรแยกไวคนละที่ เพราะจะทําใหการจดัการเว็บมีปญหายุงยากได (การตั้งชื่อโฟลเดอรใชหลักการเดยีวกับชื่อไฟล)

การสรางโฟลเดอร เลือกไดรฟและโฟลเดอรหลักที่ตองการสรางโฟลเดอรยอย เลือกเมนูคําสั่ง File, New, Folder ปรากฏไอคอนโฟลเดอร ช่ือ New Folder

พิมพช่ือโฟลเดอรใหม หากไมสามารถพิมพได ใหกดปุมฟงกชัน @ กอน เมื่อพิมพช่ือโฟลเดอรเสร็จแลว ใหกดปุม E สามารถสรางโฟลเดอรยอยๆ ภายใตโฟลเดอรนี้ได



- 17 -

สรางภาพหรือจัดหาภาพที่เกี่ยวของกับเนื้อหา

เอกสารเว็บตองเกี่ยวของกับรูปภาพโดยตรง ดังนั้นควรสรางภาพ หรือจัดหาภาพ แลวคัดลอกมาไวในโฟลเดอรที่ไดจัดเตรยีมไว เพื่อใหสะดวกในการเรยีกใชงาน และการบริหารเว็บไซตในอนาคตการจัดเกบ็ไฟลไวในโฟลเดอรที่เตรียมไว ยังรวมถึงไฟลตางๆ ที่จะนํามาใชประกอบการสรางเว็บ เชนไฟลเอกสารจากเวิรด กระดาษคํานวณ นําเสนอผลงานตางๆ จะตองดําเนินการลักษณะเดยีวกับไฟลภาพเชนกนั ทั้งนี้ช่ือไฟลตางๆ ที่นํามาใชประกอบการสรางเว็บก็ตองตั้งโดยยดึหลักเดยีวกับการตั้งชื่อไฟลเอกสารเว็บ

ไฟลภาพที่ไมสามารถนํามาสรางเอกสารเว็บ เพราะมีสวนขยายเปน .bmp, .tif

สรางเอกสารประกอบ

นอกจากภาพแลว อาจจะมไีฟลประกอบอืน่ๆ เชน Word, PowerPoint, PDF Document ก็จะตองเตรียมไวในโฟลเดอรที่สรางไวใหพรอม โดยอาจจะสรางเปนโฟลเดอรเฉพาะของแตละไฟลฟอรแมต

ไฟลเอกสารตางๆ ที่ผิดพลาด เพราะชื่อไฟลเปนภาษาไทย หรือมีชองวาง

เลือกเครืองแมขาย WWW และระบบการสรางงาน

การสรางเว็บไซตในปจจุบนั ยอมหนีไมพนความตองการดานโปรแกรมมิ่ง เชน ตองการตัวนับจํานวนการเขาชมเว็บไซต (Counter) ตองการกระดานขาว (Web board) ตองการสมุดเยี่ยม (Guestbook) หรือฟงกชันสูงๆ เชน ระบบสมาชิก แตนักพฒันาเว็บไซตมักจะลืมไปวาระบบโปรแกรมบนเว็บ เปนระบบที่สัมพันธกับระบบปฏิบัติการ ดังนั้นกอนสรางเว็บไซต ควรพิจารณาใหแนนอนวาเวบ็ที่พัฒนา จะนําไปเก็บไวบนเครื่องแมขายที่ใชระบบปฏิบัติการใด เพราะหากเลือกผิดพลาด กจ็ะทําใหเว็บนั้นมีปญหาอีกมากมาย


ระบบปฏิบัติการและอื่นๆ ระบบปฏิบัติ 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) เปนตน


ตัวอยางขอมูลเครื่องบริการเว็บ (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 และใชเวลาในการพัฒนาพอสมควรในแตละหนาเว็บ ตลอดจนไมเหน็ผลลัพธจากการปอนคําสั่งทันที ตองเรียกผานโปรแกรมเบราวเซอร


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


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: 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 บนพีซีจําลอง

หลายๆ ทานทีส่นใจใชงาน 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 เพื่อยอมรับการกําหนดไดรฟและโฟลเดอร


สวนนี้เปนการเลือกวาจะติดตั้งโปรแกรมใดบาง กรณนีีใ้หคลิกเลือกทกุรายการ แลว

คลิกปุม 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 และรหัสผาน คือ ..............................................


เมื่อระบุคาเกีย่วกับการเขาถึงฐานขอมูล 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)


ขั้นตอนแรกของการติดตั้งคอื การเลือกภาษาของการตดิตั้ง โดยสามารถเลื่อนจอภาพ

ลงมาเลือกภาษาไทย (th-TH – Thai)ได

จากนั้นคลิกปุม Next เพื่อเขาสูการตรวจสอบสิทธิ์การติดตั้ง



- 35 -

ขั้นตอนนี้จะเปนการตรวจสอบสิทธิ์การเขียนลงในไฟล configuration.php และฟงกชันการทํางานของตัวแปลภาษา PHP แลวคลิกปุมถัดไปจะเขาสูสวนลิขสิทธิ์ของโปรแกรม ในหนานี้ก็คลิกปุมถัดไปไดเชนกัน

สวนนี้เปนหวัใจของการติดตั้ง จะตอง

1. เลือกชนิดของฐานขอมูลที่ตองการใชงาน กรณีนีใ้หเลือก mysql

2. ระบุช่ือโฮสตของฐานขอมูล โดยพิมพ localhost

3. ระบุช่ือผูใชฐานขอมูล ใหพมิพ root

4. กําหนดรหัสผานของฐานขอมูล mysql

5. ระบุช่ือฐานขอมูล เชน joomla15 (แนะนาํใหกําหนดชือ่เดียวกับชื่อโฟลเดอร)

เมื่อระบุขอมูลขางตนแลว กค็ลิกปุมถัดไป จะเขาสูสวนกําหนดคา FTP (File Transfer

Protocol)


ใหคลิกปุมถัดไปไดเลยครับ เพื่อกําหนดขอมูลเกี่ยวกับเวบ็ไซตที่ใกลจะเสร็จสมบูรณ

คาที่ตองระบุไดแก

• ช่ือเว็บไซต เชน Joomla15 : CMS for you

• อีเมลของผูดูแลเว็บ

• รหัสผานของผูดูแลเว็บ (จะตองจําใหไดดวยครับ)

• คลิกปุมติดตั้งขอมูลตัวอยาง



- 37 -

จากนั้นคลิกปุมถัดไป เพื่อใหกระบวนการเสร็จสิ้นอยางสมบูรณ ควรลบโฟลเดอร installation ดวยนะครับ

คลิกปุมดูหนาเว็บไซตจะปรากฏเว็บไซตพรอมขอมูลตัวอยางดังนี ้


สํารวจเว็บใหม

เว็บไซตตวัอยางของ 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 พื้นที่กลางจอภาพของเวบ็ไซตที่แสดงบทความหลักของเว็บ โดยบทความลาสุด (หรือบทความหลัก) จะแสดงไวบนสุด และบทความที่มีลําดับรองจะแสดงในลักษณะคอลัมนถัดลงมา


บทความแตละบทความ ประกอบดวยสวนประกอบดังนี้

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 จะแสดงชื่อสมาชิกดังนี ้

นอกจากนี้ยังปรากฏไอคอนสําหรับแกไขเอกสารบทความ ดังนี ้


แกไขขอมลูสมาชกิ

เมื่อสมาชิก 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 ของบทความนั้นๆ

ปรากฏจอภาพสวนแกไขบทความดังนี ้


ตองการแกไขชื่อบทความ ทาํไดโดยแกไขในรายการ 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>


แทรกรูปภาพ

การแทรกรูปภาพในบทความ ใหคลิกเมาส ณ ตําแหนงที่ตองการวางภาพ แลวคลิกปุม

จะปรากฏสวนนําเขาภาพดงันี้

คลิกเลือกภาพที่ตองการ แลวกําหนดรายละเอียดเกีย่วกับภาพ

• Image Description คําอธิบายภาพ

• Image Title ช่ือกํากับภาพ ซ่ึงสามารถกําหนดเปน Caption ไดโดยคลิกเลือกเพิ่มเติม

• Align ตําแหนงวางภาพ

เมื่อคลิกปุม Insert จะปรากฏภาพดังนี ้



- 49 -

เมื่อบันทึกจะแสดงผลดังนี้

ภาพที่นําเขาบทความ สามารถแกไขไดโดยคลิกที่ภาพ แลวคลิกปุม Insert/Edit Image

ในแถบเครื่องมือ

โดยปรากฏสวนปรับแกไขดงันี้


กรณีที่ตองการนําเขาภาพเพิม่เติมจากที ่ Joomla จัดเตรียมไว ทาํไดโดยคลิกปุม

แลวเล่ือนจอภาพไปที่รายการ Upload

คลิกปุม Browse Files

เลือกไดรฟและโฟลเดอรที่เก็บภาพ แลวเลือกภาพจากนั้นคลิกปุม Open โปรแกรม

Joomla อนุญาตใหเลือกไฟลภาพในการโอนเขาเว็บไซตไดคร้ังละหลายภาพ



- 51 -

เมื่อไดภาพที่ตองการครบจํานวนแลวจึงคลิกปุม Start Upload

โปรแกรมจะแสดงภาพที่นําเขาเพื่อพรอมใชงานตอไป

ไฟลภาพ

ไฟลภาพที่นําเขาในเวบ็ควรปรับแตงดวยโปรแกรมตกแตงภาพใหมีขนาดที่เหมาะสม เชน ความกวางไมควรเกนิ 500 pixel ความละเอียดภาพ (Resolution) 72 จุดตอนิ้ว และมีสวนขยายเปน .jpg, .gif หรือ .png ตามความเหมาะสมของภาพนั้นๆ

นอกจากนี้ช่ือไฟลภาพควรเปน

• ภาษาอังกฤษ ตัวพิมพเล็ก

• หามเวนวรรค

• ใชไดเฉพาะเครื่องหมาย Underscore ( _ )


ควบคุมการแสดงผลบทความ

บทความที่สรางไวแลวสามารถปดการแสดงผลหรือระบุวันสิ้นสุดการแสดงผลไดงาย และสะดวก ในโหมดการแกไขบทความ จะปรากฏสวนควบคุมการแสดงผล ดังนี ้

รายการ

• 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 ระบุคําคนโดยใชเครื่องหมาย , คั่นแตละคํา


สรางบทความใหม

การสรางบทความใหม ทําไดโดยคลิกเลือกรายการ Submit an Articles จาก User Menu

ปรากฏสวนสรางบทความใหม ดังนี ้



- 55 -

การสรางบทความใหม มีการทํางานลักษณะเดยีวกับการแกไขบทความเดิมที่ไดแนะนําไปกอนหนาแลว แตจะตองเลือก Section และ Category ใหตรงกับหมวดเนื้อหา

นอกจากนั้นผูใชตองกําหนดรายละเอียดเกีย่วกับการนําเสนอ (Publishing) และ

Metadata ของบทความดวย

เมื่อปอนเนื้อหาและบันทกึ จะปรากฏผลดังนี้


ปรับแตงเว็บไซตผาน Back-end

การปรับแตงเว็บไซต เชน การเพิ่มสมาชิก การปรับเปลี่ยนโฉมหนาเว็บไซต การควบคุมเวบ็ไซต จะตองทําในโหมด Administrator โดยเขาสูเว็บไซตผาน Back-end ดวยคําสั่ง http://localhost/ชื่อโฟลเดอร/administrator

จอภาพเขาสูระบบในโหมด Administrator ใหปอนบญัชีผูใชเปน admin และปอน

รหัสผานตามที่ไดกําหนด เมื่อคลิกปุม Login จะเขาสูจอภาพ Control Panel ของเว็บไซต ดังนี ้



- 57 -

การทํางานผาน Back-end สามารถดําเนินการผานแถบเมนู ซ่ึงประกอบดวยคําสั่งควบคุมตามหมวดหมูดังนี ้

หรือจะสั่งการผานไอคอนในสวน Control Panel

นอกจากนี้ยังสามารถตรวจสอบสมาชิกที่ออนไลน การสรางบทความ หรือสถิติตางๆ

ผานทางแท็บคําสั่งตอไปนี้


ขอมูลประกอบการสบืคนของเว็บ

ช่ือเว็บไซต หรือ 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 มีระบบสนับสนุนการเขาถึงเนื้อหาไดงายขึ้นดวยความสามารถ 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

เว็บไซตอีกครัง้


เห็นไหมครับ การปรับเปลี่ยนหนาตาของเว็บไซตไมใชเร่ืองยากเลย มี 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 ใหอยูตําแหนงอืน่


จัดการบทความในเวบ็ไซต

เนื้อหาในเว็บไซตเปนเนื้อหาจากขอมูลตัวอยาง เรียกวา Article หรือบทความ ซ่ึงสามารถปรับแกไขไดโดยเลอืกเมนูคําสั่ง Content, Article Manager

เมนูควบคุมการจัดการบทความประกอบดวยปุมตางๆ ดงันี้

Archive/Unarchive กําหนดใหบทความที่นําเสนอเก็บเขาคลังเอกสาร

หรือยกเลิกจากคลังเอกสาร

Publish/Unpublish กําหนดใหแสดงหรือไมแสดงบทความ

Move ยายหมวดบทความ

Copy คัดลอกบทความไปหมวดอืน่

Trash ลบบทความ

Edit แกไขบทความ

New สรางบทความใหม

Parameters คาควบคุมเกี่ยวกับการแสดงผลบทความ

เชน ถาตองการแกไขบทความรายการใด กค็ลิกเลือกบทความนั้นๆ

คลิกปุม Edit จะปรากฏสวนแกไขในโหมดการทํางานแบบ WYSIWYG ดังนี ้



- 65 -

แกไขชื่อบทความ (Title) จากรายการ

ช่ือบทความสามารถระบุไดทั้งภาษาไทย และภาษาอังกฤษ

แกไข URL ของบทความจากรายการ

ขอความ Alias นี้ควรระบุเปนภาษาอังกฤษ ไมมีชองวาง

ปรับแกไขหมวดเนื้อหาไดจากรายการ Section และ Category

Section จะเปนหมวดใหญกวา Category


กําหนดการแสดงผลบทความไดจากรายการ

• Published แสดงหรือไมแสดงบทความในเว็บไซต

• Front Page แสดงหรือไมแสดงบทความผานหนาแรกของเว็บ

ลําดับการแสดงบทความในหนา Front Page ควบคุมไดจากไอคอน Front

Page Manager

นอกจากนี้ยังสามารถกําหนดชวงเวลาในการบทความไดจากรายการ

การแกไขเนื้อหา

การแกไขเนื้อหา ใชหลักการลักษณะเดยีวกับการแกไขใน Word Processor ทั่วไป และมีปุมจัดแตงรูปแบบลักษณะเดยีวกัน



- 67 -

กรณีที่เนื้อหามีความยาว และกําหนดใหแสดงผาน Front Page จะปรากฏผล ดังนี้

กรณีนี้ควรเลือกแสดงผลเนื้อหาเพียงบางสวน และกํากับดวย Link โดย

คลิกเมาส ณ ตาํแหนงที่ตองการเลือกแสดงผล แลวคลิกปุม Read more…


เมื่อบันทึกจะแสดงผลผาน 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 จะควบคมุดวย 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 แบงโฟลเดอรจัดการภาพไดดังนี ้

โดยโฟลเดอรสําคัญที่ควรทราบคือ

• 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 อนุญาตใหปรับแตงเมนูไดอิสระ ทั้งการสรางเมนูชุดใหม การปรับแตงเมนูชุดเดิม การสรางรายการเมนู หรือปรับยายตําแหนงการแสดงผลเมนู

ปรับแกไขเมนู

การปรับแกไขเมนู ทําไดโดยคลิกเลือกเมนูคําสั่ง Menus แลวคลิกเลือกที่ช่ือเมนูชุดที่ตองการแกไข หรือคลิก Menu Manager เพือ่ปรับแกไขชือ่เมนูรวมทั้งสราง/ลบเมนู

ปรากฏจอภาพทํางานดังนี ้

จะพบวาการทาํงานกับรายการเมนู มีลักษณะเดยีวกับการทํางานบทความใน Article

Manager



- 75 -

ตัวอยาง ตองการสรางรายการเมนูแสดงบทความในหมวด Media ทําไดโดย

1. คลิกปุม New

2. เลือกวาจะสรางเมนูลักษณะใด กรณีนี้คือ การสรางเมนูใหกับบทความ จึง

เลือก Articles

3. เลือกรูปแบบของการเชื่อมกบับทความ กรณีนี้ตองการเชื่อมกับทุกบทความ

ในหมวด Media จึงตองเลือก Category ซ่ึงมี 2 รูปแบบยอย คือ Blog Layout โดยจะแสดงเนื้อหายอและลิงกอานตอในลักษณะกรอบเนื้อหา หรือจะเลือก List Layout โดยจะแสดงเปนรายการตามลําดับ

4. เมื่อเลือกรูปแบบของการเชื่อมกับบทความแลว ก็จะเปนสวนกําหนดรายละเอียดเกีย่วกับการแสดงผล ดังนี้


5. เมื่อกําหนดรายละเอียดเชน Title แลวก็คลิกปุม Save เพือ่บันทึก

6. และตรวจสอบการสรางรายการเมนูไดจากหนา Front end ของเว็บ



- 77 -

Components

Components คือ ชุดโปรแกรมสําเร็จรูปที่ออกแบบพฒันาขึ้นมาเพือ่รองรับการทํางานใดๆ ในลักษณะโปรแกรมเสริม เพื่อให Joomla มีความสามารถเพิ่มขึ้น เชน โปรแกรมควบคุมการแสดงผลปายโฆษณา กระดานสนทนา Joomla มี Components ใหเลือกใชงานหลากหลาย ดาวนโหลดไดจากเว็บไซตของ Joomla หมวด Extensions โดย Extension ที่เปน Components

จะแสดงดวยสัญลักษณ

แบบสอบถามออนไลน (Poll)

Poll เปน Component ที่มากับ Joomla เปนชุดคําสั่งสําหรับสรางแบบสอบถามออนไลนอยางงาย ปกติจะแสดงผลในรูปแบบ Module ดานขวาของหนาเว็บไซต เมื่อคลิกเลือกจะแสดงผลลัพธการเลือกเปนกราฟแทงแนวนอน (Bar chart)


การเพิ่มแบบสอบถามใหกับ 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


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


เว็บไซตที่สามารถดึงขาวมาได เชน

• 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 …


จากตารางวเิคราะหความตองการพัฒนาเวบ็ขางตน สมมติเว็บที่ตองการพัฒนามีขอมูลดังนี ้

ลักษณะของเวบ็ไซต เว็บไซตนําเสนอสาระความรูทางดานบรรณารักษศาสตร และสารสนเทศศาสตร

กลุมเปาหมาย นักศึกษา ครูอาจารยสาขาบรรณารักษศาสตร และสารสนเทศศาสตร

ช่ือเว็บ (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. จอภาพถัดไปคือ การยอมรับลิขสิทธิ์การใชงานโปรแกรม ใหคลิกปุม “ถัดไป”


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


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


ปรากฏจอภาพสวนควบคุมคาระบบเว็บไซต ดังนี ้

• 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 สมาชิกที่สามารถเขียน/แกไขบทความของสมาชกิ

คนอื่นได


• 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 เพื่อสรางสมาชิกใหม


วิเคราะหเนื้อหาเว็บไซต

การนําเนื้อหาเขาเว็บไซต จะตองวิเคราะหเนื้อหากอน โดยเนื้อหาที่กําหนดไว ไดแก

แนะนําเว็บไซต เปนเนื้อหาเพยีง 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


สรางเนื้อหา “แนะนําเว็บไซต”

การสรางเนื้อหา “แนะนําเวบ็ไซต” ทําไดโดย

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 แลวจะปรากฏรายการเลือกดังนี ้


คลิกเลือก 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 คือ แสดงในหนาตางเดิมพรอมแถบควบคมุ


เมื่อกําหนดคาดังขางตนแลว ก็คลิกปุม Save เพื่อบันทกึการสรางรายการเมนูเพิ่มเติมในเมนหูลัก

จากนั้นตรวจสอบการสรางรายการเมนูเพิม่เติมโดยคลิกเลือกรายการ Preview ที่ปรากฏมุมขวาของจอภาพ

จะปรากฏรายการคําสั่งเพิ่มในแถบเมนหูลัก ดังนี ้

เมื่อคลิกที่รายการเมนู “แนะนําเว็บไซต” จะปรากฏเนื้อหาดังนี ้



- 101 -

สรางเนื้อหา “ทีมพัฒนา”

การสรางเนื้อหา “ทีมพัฒนา” ใชหลักการเดียวกับ “แนะนําเว็บไซต” แตเนื่องจากขอมูลประกอบดวยภาพ ช่ือ/นามสกุล สังกัด และความเชีย่วชาญ จึงตองเตรียมภาพกอน โดยภาพที่เตรียมควรมีขนาดความกวางไมเกิน 150 pixels ตั้งชื่อแฟมภาพเปนภาษาอังกฤษ หามเวนวรรค (ตัวอยางใชภาพในโฟลเดอร image ที่จัดเตรียมไวให)

1. นําเขาภาพเขาสู Joomla ดวยคําสั่ง Site, Media Manager

2. คลิกเลือกโฟลเดอรยอย stories


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. ตารางที่ไดจะปรากฏดังนี ้


10. คลิกเมาสในเซลลแรก (แถวแรกคอลัมนแรก) เลือกภาพที่ตองการแสดง โดย

คลิกปุม

ปรากฏจอภาพเลือกภาพดังนี ้

คลิกเลือกภาพที่ตองการ ปอนคําอธิบายภาพในรายการ Image Description และ Image Title จากนัน้คลิกปุม Insert

คลิกเมาสในคอลัมนดานขวาของแถวแรก พิมพขอมูลทีมพัฒนาคนที่ 1 จัดแตงตามเหมาะสม เชน

ทําซ้ํากับรายการอื่นจนครบ



- 105 -

11. คลิกปุม Save เพื่อบันทึกขอมูล

เมื่อสรางเนื้อหา “ทีมพัฒนา” แลวข้ันตอนถัดไปคือ การสรางเมนูควบคุมเนื้อหาสวนนี้ โดย

1. คลิกเลือกเมน ูMenus, Main Menu* เพื่อสรางรายการเมนูเพิ่มในเมนหูลักของเว็บไซต

2. ปรากฏสวนควบคุมการสรางรายการเมนูของเมนูหลัก (Main Menu) ดังนี ้

3. คลิกปุม New เพื่อสรางรายการคําสั่งใหม

4. เลือกประเภทของรายการเมนู กรณนีี้เลือกเปน Articles


5. เมื่อคลิก Articles แลวจะปรากฏรายการเลือกดังนี ้

คลิกเลือก Article Layout เนื่องจากเนื้อหาที่จะเชื่อมมายังรายการเมนนูี้ เปนเนื้อหาแบบ Static ที่ไมไดกําหนด Section และ Category ซ่ึงจะปรากฏรายการเลือก ดังนี ้

6. เลือกเนื้อหาทีต่องการเชื่อมกับรายการเมนู โดยคลิกปุม Select จากรายการ

Select Article

ปรากฏรายการบทความ ดังนี้

คลิกเลือกบทความ “ทีมพัฒนา”



- 107 -

7. เมื่อเลือกบทความที่ตองการแลว ก็มาถึงขั้นตอนกําหนดขอความกํากับรายการเมนู

เมื่อกําหนดคาดังขางตนแลว ก็คลิกปุม Save เพื่อบันทกึการสรางรายการเมนูเพิ่มเติม

ในเมนหูลัก

จากนั้นตรวจสอบการสรางรายการเมนูเพิม่เติมโดยคลิกเลือกรายการ Preview ที่ปรากฏมุมขวาของจอภาพ

จะปรากฏรายการคําสั่งเพิ่มในแถบเมนหูลัก และเมื่อคลิกที่รายการเมนู “ทีมพัฒนา” จะ

ปรากฏเนื้อหาดังนี ้


เนื้อหาหมวดคลังความรู

การสรางเนื้อหาหมวดคลังความรู ตามที่ไดออกแบบไวจะประกอบดวยหมวดยอย 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


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


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


19. คลิกปุม Save เพื่อบันทึกและทําซ้ํากับ Category ที่เหลือจนครบทั้ง 3 หมวดยอย

20. เมื่อคลิกปุม Preview จะปรากฏผลหนาเว็บ ดังนี ้

เพียงเทานี้ก็ไดเนื้อหาและเมนูที่สรางดวยงานของตนเองจาก Joomla อยางรวดเรว็ ที่

เหลือก็คือการปรับแตงและเพิ่มเนื้อหาใหเหมาะสม กอนเผยแพรใหผูสนใจเขาถึงได

นําเนื้อหาจากโฟลเดอร data สรางเปนบทความตามหมวดเนื้อหาทีก่ําหนดไว



- 115 -

แบบสอบถามออนไลน (Poll)

เว็บไซตในปจจุบันควรใหความสําคัญกับผูชมเว็บ และมีขอมูลความคิดเห็นจากผูชมเว็บประกอบการพัฒนาปรับปรุง Poll เปน Components ที่มากับ Joomla สําหรับสรางแบบสอบถามออนไลนจากผูใชอยางงาย แสดงผลลัพธเปนกราฟแทงแนวนอน (Bar chart) ดวยสีสันที่สวยงาม

การสรางแบบสอบถามออนไลนทําไดโดยเลือกเมนูคําสั่ง Components, Polls


ปอนคําถามในรายการ Title: ตัวเลือกในรายการ Options: และการนาํเสนอจากรายการ

Published: โดยคลิกเลือกรายการ Published เปน Yes เพื่อให Poll ที่สรางเผยแพรใหกับผูชมจากนั้นคลิกปุม Save

เมื่อสราง Poll แลวขั้นถัดไปเปนการแสดงผล Polls บนหนาเว็บ โดยเลือกคําสั่ง

Extensions, Module Manager จากนั้นคลิกปุม New เพื่อสราง Module ใหม


คลิกที่รายการ 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 และทําซ้ํากับหมวดอื่นๆ จนครบ

ตามตองการ


เมื่อสรางหมวดเว็บแลว ขัน้ถัดไปจะเปนการสรางรายการลิงกเว็บไซตตามหมวดเว็บ

โดยเลือกคําสั่ง 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


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 เชน


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


จากนั้นคลิกที่ 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


เมื่อคลิกเลือก 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

เมื่อแสดงผลทางหนาเว็บจะปรากฏรายการเมนู และปรากฏผลคลังภาพดังนี ้

เพียงเทานี้ก็ไดคลังภาพไมยาก อีกทั้งมีลูกเลนในการนําเสนอที่นาสนใจมาก


นอกจากนี้โปรแกรมยังอนญุาตใหปรับเปลี่ยนรูปแบบการแสดงผลไดโดยเลือกเมนูคําสั่ง 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


แท็บ 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 โดยเลือกคําสั่ง


ปรากฏสวนควบคุมการจัดการแฟมเอกสารดังนี ้

คลิกปุม 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


เลือก ionFiles กําหนดชื่อรายการเมน ู

เมื่อคลิกปุม Save จะปรากฏรายการเมนูเพิม่ใน Main Menu และจะแสดงผลเมื่อคลิก

เลือก ดังนี ้



- 135 -

ขาวประกาศอัตโนมติัแบบ RSS Feed

RSS ยอมาจาก “Really Simple Syndication” ซ่ึงอาจแปลเปนไทยไดวา “การกระจายขาวสารอยางงายๆ” เปนเทคโนโลยีที่นําขอมูลที่ผูพัฒนาสรางขึ้น ดึงมานําเสนอบนเวบ็ไซตของเราโดยอัตโนมัติ ทําใหลดภาระในการคดัลอกขาวหรือเนื้อหา ไดขาวหรือเนื้อหาทีป่รับปรุงไดตลอดเวลาเมื่อตนฉบับเปลี่ยนแปลง

Joomla รองรับการทํางาน RSS โดยผานทาง Components, News Feed

โดยจะตองเริ่มจากการสรางหมวดขาวกอน คลิกที่ Categories จากนัน้คลิกปุม News

ระบุช่ือหมวดขาว ดังตัวอยาง

• Title ช่ือหมวดขาว

• Published เลือก Yes เพื่อใหหมวดขาวทํางาน


เมื่อคลิกปุม 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 ตามตองการแลว จึงสรางเมนูควบคุมการแสดงผลตอไป


ติดตอทีมพัฒนา ผูดแูลเว็บ

เว็บไซตควรจะมีเนื้อหาที่แสดงถึงขอมูลการติดตอส่ือสาร อยาใหความสําคัญกับการติดตอดวย 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 ไดเตรียมชดุเมนูไวใหแลว 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 แลวแสดงผล

เว็บ เมนใูหมทีส่รางจะปรากฏในหนาเว็บ ดังนี ้


สรางบัญชสีมาชิก

จุดเดนของ 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


จากภาพตัวอยางจะพบวามีบญัชีใหมคือ courseware2u ที่ยังไมไดเปดใช สังเกตุไดที่รายการ Enabled เปนกากบาทสีแดง หาก Admin ตองการใหสมาชิกนีม้ีสิทธิ์ทํางานกับเว็บไซตก็ใหคลิกกากบาทสีแดง ใหเปนเครื่องหมายถูกสีเขียว

การแกไขขอมลูสมาชิก ทําไดโดยคลิกที่ช่ือสมาชิกนั้นๆ

สําหรับการสรางบัญชีสมาชิกใหมโดย Admin ทําไดโดยเขามาที่ User Manager แลว


แลวปอนขอมลูสมาชิก ในสวน 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 มีสิทธิ์ทุกอยางในการจดัการเว็บไซต


เมนูเฉพาะสมาชิก

การเขาทํางานสําหรับสมาชิกในโหมด 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


เลือกคําสั่งยอยเปน User Form Layout จากนั้นระบุช่ือรายการเมนู เชน Update Profile

เมื่อคลิกปุม Save จากนัน้กลับไปทํางานในหนา Front-end แลว Login เขาสูระบบจะ

ปรากฏชุดเมนใูหม และรายการเมนูดังนี ้

เพียงเทานี้ก็ไดเมนูและคําสั่งสําหรับสมาชิกพรอมใชงานแลว แตยงัไมครบนะครบั

ควรสรางรายการเมนูอ่ืนๆ ดวย เชน แนะนําเว็บไซต หรือสงบทความเขาสูเว็บเพือ่กําหนดใหเปนเว็บที่สมาชิกมีสวนรวมในการสรางสรรคอยางแทจริง

คําสั่งแนะนําเว็บไซตสําหรับสมาชิก เลือกไดดังนี ้



- 149 -

คําสั่งสงบทความเขาสูระบบ คือ