1  

คมอการใชงาน Joomla 2.5.x

วธตดตง ขนตอน การตดตง joomla 2.5.x บน Server จาลอง Localhost

ขนกอนการตดตง

Joomla คอโปรแกรม OpenSource จาพวก CMS (Content Management System) ซงใชสาหรบสรางเวบไซต มความปลอดภยสง และเปนทนยมมาก

กอนการตดตงโปรแกรมเราตองจาลองเครองของเราใหเปนเครอง sever กอน อาจใชโปรแกรมจาลอง Web Server ดวย XAMPP หรอ AppServ กได แตชดโปรแกรมทเลอกใชตองประกอบดวย 3 โปรแกรมน 1. php 2. Mysql 3. Apache สวนจะเลอกใชเวอรชนใดนน ใหขนอยกบ ความตองการ (System Requirement) ของ Joomla ทเราจะใช ชดโปรแกรมทจะเลอกใชในวนน คอ Appserv 2.5.10 for Windows เรามาดขนตอนการจาลอง Web Server เสยกอนวามขนตอนอยางไร

สาหรบโปรแกรม AppServ สามารถเขาไปดาวนโหลดไดทเวบไซต www.appservnetwork.com โดยบนหนาแรกของเวบไซตจะมลงกไปยงเวอรชนลาสดใหดาวนโหลดอยดวย หรอจะเลอกโหลดเวอรชนอน ๆ กแลวแตความตองการ โดยใหคลกไปทลงกตรง Download SourceForge.net กจะไปยงเวบไซตของโปรเจกตโอเพนซอรสตาง ๆ พรอมกบเรมตนดาวนโหลดไฟล AppServ ทนท โดยใหบนทกไฟลดงกลาวไวในฮารดดสกกอน

การตดตงโปรแกรม AppServ ขนตอนการตดตงโปรแกรม AppServ มดงน

1. ดบเบลคลกลงบนไฟล appserv-win32-2.5.x.exe ทไดดาวนโหลดมา (x เปนตวเลขเวอรชนลาสด) กจะเรมเขาสการตดตง โดยหนาตางตอนรบจะแสดงขนมาดงรปท 2.2 ใหคลกไปทปม Next

2. หนาตางแสดงรายละเอยดเกยวกบลขสทธในการใชงานจะแสดงขนมาดงรปท 2.3 ใหคลกทปม I Agree

3. หนาตางสาหรบใหผใชงานเลอกตาแหนงบนฮารดสกทจะใหตดตงโปรแกรม AppServ ลงไป จะแสดงขนมาดงรปท 2.4 คาปกตจะเปนท C:\AppServ และขอแนะนาใหตดตงไวทตาแหนงนเนองจากหนงสอเลมนจะอธบายจากตาแหนงตดตงนทงหมด ดงนนทขนตอนนใหผอานคลกทปม Next ตอไปไดเลย

4. หนาตางสาหรบใหผใชงานเลอกปรแกรมตางๆ ในแพกเกจของ AppServ จะแสดงขนมา ใหผอานเลอกตดตงทกโปรแกรมทม เพราะเราจะตองใชงานทกโปรแกรม นนคอ Apache HTTP Server,MySQL Database.PHP Hypertext Preprocessor และ phpMaAdmin เมอเลอกครบแลวใหคลกทปม Next

2  

5. หนาตางสาหรบกาหนดรายละเอยดเพอจาลองคอมพวเตอรทใชงานอย ใหกลายเปนเวบเซรฟเวอร โดยรายละเอยดของชองกาหนดคาตางๆ มดงตอไปน

Server Name เปนชอของเซรฟเวอร คาปกต คอ localhost ไมตองเปลยนคาน Administrator’s Email Address อเมลแอดเดรสของผดแลระบบ ใหผอานหรอกอเมลลงไป จะเปน

อเมลลจรงหรอไมมอยจรงกได Apache HTTP Port หมายเลขพอรทในการเชอมตอทางโทรโตคอล HTTP ของ Apache

คาปกตคอ 80 ไมตองเปลยนแปลงคาน

หลงจากทใสคาตาง ๆ เสรจเรยบรอยแลว ใหคลกทปม

6. หนาตางสาหรบกาหนดคาใหกบการใชงาน MySQL จะเปนการกาหนดคารหสผานของผดแลระบบหรอ root นนเอง ใหกรอกรหสผานทตองการลงไปในชอง Enter root password และกรอกรหสผานเดยวกนลงไปในชอง Re-enter root password เพอตรวจสอบรหสผาน โดยในตวอยางนจะกาหนดรหสผานเปน j1234 จากนนทชอง Character Sets and Collations ใหเลอกเปน UTF-8 Unicode ซงเปนรหสของตวอกษรทใชงานในฐานขอมลเปนหลก สวนทตวเลอก Old Password Support (PHP MySQL API function) และ Enable InnoDB นนไมตองเลอกใหปลอยวางเอาไว เสรจแลวคลกทปม Install

3  

7. ขนตอนการตดตงไฟลตางๆ ลงบนคอมพวเตอรจะเรมตนขน ใหรอจนกวาการตดตงจะเสรจสนลง 8. เมอการตดตงไฟลลงในเครองคอมพวเตอรเสรจเรยบรอยแลว หนาตางทมขอความแจงวาการตดตงเสรจสมบรณแลว

จะแสดงหนาตางบอกสถานะการตดตงโปรแกรม พรอมกบมตวเลอกวาจะให Apache กบ MySQL เรมตนทางานหลงจากทคลกปม Finish ดวยหรอไม ใหคลกเลอกไวทงคจากนนคลกทปม Finish

การตดตงแพกเกจโปรแกรม AppServ กเปนอนเสรจเรยบรอยแลว โดยทไมตองมการรสตารทเครองคอมพวเตอรใหม เพยงเทานคอมพวเตอรทใชงาน กจะมบรการเวบเซรฟเวอรจาก Apache คอยใหบรการสาหรบสรางเวบไซตไดแลว โดยแอดเดรสของเวบเซรฟเวอรกคอ http://localhost สามารถลองเรยกในโปรแกรมเวบ เบราเซอร ไมวาจะเปน IE หรอ Firefox ได

การสรางฐานขอมล หลงจากทตดตงแพกเกจโปรแกรม AppServ เรยบรอยแลว บรการของ MySQL ทอยใน AppServ กพรอมใหใชงานไดทนท ดงนนมาดถงขนตอนการสรางฐานขอมลสาหรบใชสรางเวบไซตดวยจมลากนนะครบ ดงน

1 . ส า ห ร บ ก า ร ต ด ต ง ใ ช ง า น แ บ บ โ ล ค อ ล ใ ห เ ป ด โ ป ร แ ก ร ม เ ว บ เ บ ร า เ ซ อ ร ข น ม า จ า ก น น พ ม พ http://localhost/phpmyadmin ลงไปในชองแอดเดรสบาร แลวคลกทปม Go หรอเคาะปม Enter หนงครง

2. จะมไดอะลอกบอกซใหใสชอผใชงานกบรหสผานสาหรบการเขาใชงานฐานขอมล MySQL ใหกรอกชอผใชงานเปน root และกรอกรหสผานตามทไดกาหนดไวในขนตอนการตดตง AppServ ลงไป เสรจแลวใหคลกไปทปม OK

4  

3. หนาตางของ phpMyAdmin จะแสดงขนมาในเวบเบราเซอร

4. ทหนาตาง phpMyAdmin ใหกาหนดภาษาของฐานขอมลทชอง “MySQL connection collation:” เปน utf8_general_ci หรอ utf8_unicode_ci นนคอ กาหนดใหเขารหสภาษาของเวบไซตเปน UTF8 ซงเปนรหสมาตรฐานใหม สวนทชอง “สรางฐานขอมลใหม” ใหใสชอฐานขอมลทตองการลงไปในทนจะสรางฐานขอมลทมชอวา joomla ดงนนใหพมพ joomla ลงไป ในชองถดไปใชสาหรบกาหนดคาในการจดเกบขอมล ใหเลอกคาเปน การเรยงลาดบ เสรจแลวใหคลกไปทปม สราง

5. จากนนจะปรากฎหนาตางแสดงผลการสรางฐานขอมลเสรจสนแลว สงทผอานจะตองจดจาไวในขนตอนการสรางไฟลฐานขอมลน ซงจะถกนาไปใชงานในขนตอนการตดตงจมลา กคอ

ชอฐานขอมล ในตวอยางนจะเปน Joomla

ชอผใชงานฐานขอมล ในทนจะเปนชอเดยวกบผเขาสรางฐานขอมล คอ root

รหสผานสาหบเขาใชฐานขอมล ในทนจะเปนรหสผานเดยวกนกบผเขาสรางฐานขอมล คอ j1234

5  

การตดตงแพกเกจโปรแกรม AppServ และการสรางไฟลฐานขอมลเพอใชงานกบจมลา กเปนอนเสรจเรยบรอยลงแลว เมอมาถงขนตอนนแลวกแสดงวา ยงเหลออกเพยงไมกขนตอน เรากจะพรอมสาหรบการสรางเวบไซตดวยจมลา แลวครบ

ขนการตดตง Joomla 2.5.x บนเครอง Local (AppServ)

สาหรบการตดตงในวนน จะเลอก Joomla เวอรชน 2.5.6 และตดตงผาน Appserv 2.5.10 ทเราไดจาลองเครองตวเองเปนเครอง Local ในการตดตงไวแลว มขนตอนดงน 1. ดาวนโหลด Joomla_2.5.6-Stable-Full_Package เพอเตรยมการตดตง 2. เมอไดไฟล joomla มาแลวใหแตกไฟลออก (unzip file) โดยการคลกเมาสขวา -> Extract to ...

3. หลงจากแตกไฟลออกมาแลว ใหยาย Folder ดงกลาวไปไวใน Directory C:\AppServ\www หลงจากนนเปลยนชอ Folder เปนชอสนๆ ทเราตองการ เชน joomla , web ในทนผมจะตงชอเปน Joomla

4. จากนนเขาเปด Browser แลวกรอก URL ของเวบไซตทเราจะตดตง http://localhost/joomla จากนนจะขนหนาตดตง ใหเลอกภาษาในการตดตง ใหเราเลอก ภาษาไทย

6  

5. ขนตอนตอไประบบจะแสดงขอมลระบบกอนตดตง ใหเราตรวจสอบ จากนนใหคลก “ตอไป”

6. หลงจากทตรวจสอบขอมลระบบแลว หนาถดไปจะเปนหนาแสดงขอมล ลขสทธ ของ Joomla ใหผตดตงอาน หลงจากอานเสรจแลวใหคลกท “ตอไป”

7. เมอสรางฐานขอมลเพอตดตง Joomla เรยบรอยแลว ขนตอนไปเปนการตงคาฐานขอมลใน Joomla โดยกรอกขอมลรายละเอยดดงน

- ชอโฮส = localhost

7  

- ชอผใชฐานขอมล = เปนชอ Username ทใชในการบรหารจดการฐานขอมล - รหสผาน = รหสผานในการบรหารจดการฐานขอมล - ชอฐานขอมล = ใหเอาชอฐานขอมลทเราเตรยมไวในขนตอนท 8 มาใส (ในตวอยางผมใสเปน Joomla_db) - คานาหนาตาราง = หมายถงชอของแตละตาราง เมอกรอกขอมลทกอยางถกตองสมบรณแลว คลกท “ตอไป” เพอดาเนนการในขนตอนตอไป

8. ตงคา FTP ( File Transfer Protocol ) โดยการใสขอมลผใชงาน FTP เขาไป หรออาจจะขามขนตอนนไปกได

9. ตงคาหลกของเวบ โดยกรอกขอมล ชอเวบ อเมล และรหสผาน เพอเขาไปใชบรหารจดการขอมลภายในเวบ หรอหากทานใดตองการตดตงขอมลตวอยางจาก Joomla กสามารถ คลกทปม “ตดตงขอมลตวอยาง” ไดเลยครบ เสรจแลวกคลก “ตอไป”

10. เมอตงคาเวบไซตเรยบรอยแลว ขนตอนสดทายของการตดตง Joomla จะใหเราลบขอมล โฟลเดอร installation ออกจากระบบ โดยคลกทปม “ลบโฟลเดอร installation” จากนนคลกทเมน “ผดแลระบบ” เพอเขาไปใชงานระบบของผดแลเวบ

8  

11. หลงจากทลบโฟลเดอร installation เรยบรอยแลว และเลอกเมน “ผดแลระบบ” จะเขามายงหนาผดแลระบบ จะปรากฏหนา Control Panel ของผดแลระบบ เปนอนเสรจสนในขนตอนการตดตง Joomla 2.5.6 หรอคลกท ปม ดหนาเวบ จะปรากฏหนาเวบ

การตดตงภาษาไทยใน Joomla 2.5.6

การตดตงภาษาไทยใน Joomla 2.5.6 นนสงทเราตองเตรยม คอ แพกเกจไฟลภาษาไทย ซงสามารถดาวนโหลดไดจากเวบ Joomla.org ไฟลชอ TH_joomla_lang_full2.5.5v1 หรอโหลดตามลงคทแจงใน Slide บนจอโปรเจกเตอร เดยวเราไปเรมขนตอนการตดตงภาษาไทยใน Joomla 2.5.6 กนเลย

1. เตรยมไฟลภาษาไทยทเราโหลดมาจากขนตอนดานบนใหพรอมสาหรบการตดตง

2. เขาไปท Administrator Control Panel โดยเขาไปท http://ชอเวบไซต/administrator จะไดหนาตางแผง

ควบคมหลกเหมอนกบภาพดานลาง จากนนใหเลอกทเมน Extensions –> Extensions Manager เพอตดตงภาษาไทย

9  

3. เมอเขามายงหนาตาง Extension Manager : Install ใหเราเลอก Upload ไฟลภาษาไทยทเราเตรยมไว จากนนคลก

ท “Upload & Install” เพออพโหลดและตดตงภาษาไทย

4. เมอ Upload ไฟลและตดตงภาษาไทยเสรจเรยบรอยแลว ระบบจะแสดงขอความตอบกลบมาวา “Installing

package was successful.” นนหมายถงขนตอนการตดตงเสรจเรยบรอยแลว

5. หลงจากตดตงเสรจแลว ขนตอนตอไปจะเปนการตงคาภาษาไทยซงมการตงคาอย 2 ทดวยกนดงน - Installed – Site หมายถง หนาแสดงผลของเวบหลก ผใชงานทวๆไปสามารถมองเหนได

10  

- Installed – Administrator หมายถง หนาแสดงผลของผดแลระบบ โดยเขาไปทเมน Extensions –> Language Manager จากนนเลอก Site ทตองการเปลยนภาษา จากนนคลกเลอกดาว

ใหเปนสเหลองในคอลม Default ใหดาวสเหลองมาอยท ภาษาไทย เพอใหรวา ภาษาไทย เปนภาษาหลกของเวบ

6. หลงจากเปลยนคา Default ของภาษาในระบบเรยบรอยแลว เวบของเรากจะเปลยนจากภาษาองกฤษเปนภาษาไทย

เรยบรอยแลวครบ เปนอนเสรจกระบวนการตงคา ภาษาไทย สาหรบ joomla 2.5.6

อยากเปลยน Template Joomla ใหม ใหดสดใสกวาเดม ตอไปเราจะมาดเกยวกบขนตอนวธในการเปลยน Template ใหกบ Joomla 2.5.6 กอนอนเราตองไปหาโหลดไฟล

Template Free ทเขาแจกมาเตรยมไวทเครองของเรากอน วาเราจะเอาสวยงามขนาดไหน โดยวธการหา Template ทงายทสดคอ เขาเวบ www.google.com แลวพมพคาคนหา เชน “joomla 2.5 free template” หรอเขาไปทเวบ http://www.siteground.com/joomla-templates.htm กม Free Template มากมายใหเราเลอก แตวนน Template ทจะแนะนาชอวา JustBusiness-QJT มาใช จะออกแนวใสๆ ดงายๆ สฟา-ขาว เขากบคณะบรหารธรกจ

เอาหละ เรามาเรมขนตอนการตดตง Template กนเลย ครบ

1. เตรยมไฟล Template ทโหลดมาเพออพโหลดเขาไปในระบบ

11  

2. จากนนเขาไปยงสวนของผดแลระบบ http://ชอเวบไซต/administrator/ แลวไปทเมน สวนเสรม –> การจดการสวนเสรม แลวกเลอกไฟล Template ทเตรยมไว เมอเสรจแลวกคลก “อพโหลด & ตดตง”

3. หลงจากทอพโหลดและตดตง Template แลว ระบบจะแจงสถานะการตดตงวา “ตดตง แทมแพลต สาเรจ” แสดงวาการตดตง Template เขาไปยงระบบไมมปญหาใดๆ

4. เมอตดตง Template เสรจเรยบรอยแลว ขนตอไปจะเปนการตงคาใชงาน Template นนๆ โดยเขาไปทเมน สวนเสรม –> การจดการแทมแพลต จากนนเลอก Template ทตดตงใหม แลวคลกเลอกท “ใชเปนแทมแพลตหลก”

12  

5. หลงจากทเลอก Template เรยบรอยแลว เวบไซตเรากจะเปลยนเปน Template ทเราตองการ

การใชงาน Template แตละแบบอาจจะมตาแหนงและชอเรยกตาแหนงทแตกตางกน เราสามารถดตาแหนงทถกกาหนดไวใน Template นนโดยการพมพ ?tp=1 ตอทาย url ททาการลง Joomla ไว ตวอยางเชน

http://localhost/?tp=1 หรอ http://domain-name.com/?tp=1 จะแสดงตาแหนงและชอเรยกตาแหนงดงภาพตวอยางน

13  

Template นไดวางโครงสรางและตาแหนงของ Module position ไวให 11 ตาแหนงดวยกน ไดแก 1. logo 12. user3 2. top 13. copyright 3. position-1 4. position-0 5. menuload 6. slide 7. breadcrumb 8. left 9. right 10. user1 11. user2

14  

การลอกอนและการปรบแตงเวบไซตทางดานหลง (Back End)

การลอกอนเขาทางดานหลง คอการเชอมตอเขากบโครงสรางทางดานหลงของเวบไซต ซงควบคมดวยไฟลซอรสโคดทแตกตางจากการลอกอนเขาทางดานหนาเวบไซต การลอกอนแบบนทาไดโดยการเตมคาวา /administrator ตอเขาไปทดานหลงชอแอดเดรสของเวบไซต เชน www.localhost.com/administrator เปนตน จะเปนการเรยกหนาตางสาหรบกรอกชอผใชงานและรหสผาน เพอลอกอนเขาสหนาผดแลเวบไซตขนมาอกทหนง

ทหนาตางลอกอนน จะมชอง “ชอผใช”, “รหสผาน” และชองตวเลอก “ภาษา” ใหผใชงานกรอกและเลอกคา โดยทชองภาษาจะมอยดวยกน 3 ตวเลอกคอ คาปกต, English (United Kingdom),Thai(ภาษาไทย) ซงคาปกต หมายถง คาภาษาปกตของหนาผดแลเวบไซตทไดมการกาหนดไวจากหนาผดแลระบบ ซงเราไดกาหนดใหเปนภาษาไทยไวแลว ดงนนถาเราลอกอนดวยคาปกตในตอนนหนาผดแลเวบไซตกจะเปนภาษาไทยนนเอง ถาผอานตองการใชงานหนาผดแลเวบไซตภาษาองกฤษกใหเลอกคาในชองนใหเปน English (United Kingdom)

หลงจากทกรอกชอผใช รหสผาน และคาภาษาเรยบรอยแลว กใหคลกไปทปม “เขาสระบบ” กจะเปนการเขาสหนาผดแลเวบไซตหนาแรก ซงมชอเรยกวา “แผงควบคมหลก” หรอ คอนโทรลพาเนล (Control Panel) ทจะกลาวถงในหวขอตอไปน

แผงควบคมหลก (Control Panel)

หลงจากทผใชงาน (ซงตอนนไดกลายเปนผดแลเวบไซตไปเรยบรอยแลว) ทาการลอกอนเขามาทางดานหลงของเวบไซต กจะเขามาเจอกบหนาแรกของผดแลเวบไซต ซงมชอเรยกวา “หนาแผงควบคมหลก” ทมชอเชนนกเพราะวา หนาตางนเปนศนยรวมของแผงเครองมอหลกสาหรบควบคมและจดการทกๆ สวนของเวบไซต และขณะทกาลงทางานอยในสวนตางๆ แลวตองการกลบมายงหนาแผงควบคมหลก กทาไดโดยการคลกไปทเมน เวบ -> แผงควบคมหลก

15  

สวนประกอบตาง ๆ ทอยบนหนาจอแผงควบคมหลกนน แบงได 4 สวนดวยกน ดงรปท

สวนประกอบแตละสวนบนหนาแผงควบคมหลก ตามทมหมายเลขชอยในรปท มชอเรยกดงตอไปน

1. แถบเมนหลก (Main Menu) : เปนเมนสาหรบเรยกใชงานเมนตาง ๆ ทมอยทงหมดของจมลา โดยจะทาการรวมกลมเครองมอประเภทเดยวดนไวในเมนเดยวกน ทาใหการเขาใชงานของผดแลเวบไซตงายขนและไมเกดความสบสนในการใชงาน โดยเครองมอตาง ๆ จะอยภายในเมนยอยของแถบเครองมอหลกนอกท เชน เครองมอ เพมบทความใหม (Article Manager) ทใชในการจดการบทความในจมลา จะอยในเมนหลก “Content” เปนตน

2. แถบเฮดเดอร (Header Bar) : แถบเฮดเดอร จะอยทางดานมมขวาบนของหนาตางแผงควบคมหลก รายละเอยดในสวนตาง ๆ ของแถบคาสงดงตอไปน

1. Logged-in frontend เปนสวนทแสดงจานวนสมาชกททาการลอกอนผานดานหนาของเวบไซต 2. Logged-in backend เปนสวนทแสดงจานวนสมาชกททาการลอกอนผานดานหลงของเวบไซต 3. Messages เปนสวนแสดงกลองเขาของขอความ 4. View Site เปนคาสงสาหรบใหแสดงหนาเวบไซตปกตขนมาในหนาตางใหม ใชสาหรบเปดดผลการ

เปลยนแปลงบนหนาเวบไซตเมอไดมการปรบเปลยนคาคณสมบตตาง ๆ 5. Log out สาหรบคลกเพอลอดเอาทไปจากหนาจอแผงควบคมหลก และเปนการออกไปจากหนาจอผดแล

เวบไซต เมอทางานในสวนตาง ๆ ในหนาแผงควบคมหลกเสรจเรยบรอยแลว 3. แผงไอคอนทางลด (Quick Icon Panel) : เปนพนทรวมลงคาทงลดทแสดงไวดวยไอคอน สาหรบสาหรบใหผดแล

เวบไซตคลกไปยงเครองมอของจมลา ทมการใชงานบอย ๆ เพอชวยอานวยความสะดวกในการทางานใหกบผดแลเวบไซต เชน “เพมบทความใหม” สาหรบคลกเพอเขาไปเขยนบทความใหมใหกบเวบไซตไดทนท เปนตน

4. โมดลผดแลระบบ : เปนพนทแสดงขอมลเวบไซตทนาสนใจสาหรบผดแลระเวบไซต

แถบเครองมอ (Tools Bar)

นอกจากรายละเอยดของเครองมอทอยบนหนาแผงควบคมหลกแลว ผใชงานจมลา ยงตองทาความเขาใจเกยวกบแถบเครองมอ สาหรบเครองมอตาง ๆ ดวย เพราะการใชงานเครองมอของจมลา จะตองเกยวของกบปมคาสงทอยบนแถบเครองมอนดวย เชน คาสงบนทก(Save, Save & Close, Save & New, Save as Copy), คาสงลบ(Delete), คาสงนาไปใชงาน(Apply) เปนตน และแตละเครองมอของจมลา กจะมปมคาสงทแตกตางกนออกไป ยกตวอยางเชน แถบเครองมอของคาสงจดการบทความ ดวยการคลกไปทไอคอนทางลด “การจดการบทความ (Article Manager)” ทหนาแผงควบคมหลก และแถบเครองมอจดการขอมลผใช ดวยการคลกไปทไอคอนทางลด “การจดการสมาชก (User

1 

3 

2

4

16  

Manager)” ทหนาแผงควบคมหลก จะเหนไดวาแถบเครองมอของ “การจดการบทความ” ดงรปท กบแถบเครองมอของ “การจดการผใช” ดงรปท นนจะเหนไดวาปมคาสงมความแตกตางกน

รปแสดงแถบเครองมอ “การจดการบทความ”

รปแสดงแถบเครองมอ “จดการขอมลผใช”

จะเหนไดวา บางปมคาสงบนแถบเครองมอของหนาตางรายการขอมลทแตกตางกน จะมทงปมคาสงมแตกตางกน และปมคาสงทเหมอนกน ปมคาสงทเหมอนกนทงไอคอนและชอของคาสง จะทาหนาทเหมอนกนดวย เชน ปมคาสง “สรางใหม” เมออยในหนาตางรายการขอมลชนดใด กจะเปนคาสงสาหรบสรางรายการขอมลชนดนนขนมาใหม เปนตน

หนาตางแสดงรายการขอมล

หนาตางแสดงรายการขอมล เปนหนาตางทผดแลเวบไซตจะตองพบบอยมากทสด เนองจากไมวาจะเปนขอมลชนดใด ๆ ในหนาตางจดการเวบไซตของจมลา กจะแสดงผลอยในรปแบบของหนาตางแสดงรายการขอมลน เชน หนาตางแสดงรายการบทความ ดงรปท และหนาตางแสดงรายการโมดล ดงรปท โดยคาวา “รายการขอมล” จะหมายถงขอมลอะไรกไดในเวบไซต ทถกดงขนมาเพอแสดงผลในหนาตางเดยวกนในรปแบบของตาราง

17  

รปหนาตางแสดงรายการบทความของเวบไซต

รปหนาตางแสดงรายการโมดลของเวบไซต

ตารางแสดงรายการขอมล

จะเหนไดวา ในหนาตางแสดงรายการขอมลจากรปท กบ แมจะเปนหนาตางแสดงรายการขอมลทแตกตางกน แตกมสวนของการแสดงผลทอยในรปแบบทคลายคลงกน อยางทไดกลาวไปแลวในตอนตน นนคอ การแสดงผลอยในแบบของตารางแสดงรายการขอมล และเมอแยกออกมาเฉพาะทเปนตารางแสดงรายการขอมลจรง ๆ กไดดงรปท

รปสวนทเปนตาราวแสดงรายการขอมล

จากรปจะเหนไดวา ตารางแสดงรายการขอมลโมดลน ประกอบไปดวยหวตาราง และรายการขอมลทแสดงเรยงกนตามลาดบ นอกจากนยงมชองแสดงสถานะดานตาง ๆ ของรายการขอมลดวย เชน การเผยแพร การแสดงผลในหนาแรก การจดเรยง เปนตน พนทแสดงรายการขอมลแบบน จะเปนสงทผดแลเวบไซตจะตองเจอบอยมากทสดในการจดการเวบไซต

อยางไรกตาม สาหรบพนทการทางานจรงทงหมดนน จะประกอบไปดวยเครองมอตาง ๆ เพอชวยในการทางานกบขอมลทอยในตารางดวย ดงนน จงขอกลาวถงรายละเอยดทอยในหนาตางแสดงรายการขอมล ดวยการแยกออกเปนสวน ๆ ดงน

18  

สวนประกอบโดยทวไป ทอยในหนาตางแสดงรายการขอมลไมวาจะเปนขอมลบทความ รายชอผลงทะเบยนกบเวบไซต โมดล จะประกอบดวยสวนตางๆ ดงแสดงหมายเลขในรปท ซงแตละหมายเลขมชอดงน

1. แถบเครองมอ (Tool bar) 2. แทบ (Tab) 3. ชองคนหา (Search) 4. ตวกรอง (Filter) 5. คอลมน (Column) หรอหวตาราง (Table hedaer) 6. ชองตวเลอก (Selecction box) 7. รายการขอมล (Item) 8. ขอมลสถานะและคารายละเอยด (Status and Description) 9. แถบนาทาง (Navigation bar) 10. จานวนทแสดงผลตอหนา (# - of Display Items)

แตละสวนจะอธบายความหมายและรายละเอยดในการใชงานในแตละหวขอ ดงน

แถบเครองมอ (Tool Bar)

แถบเครองมอ เปนพนทวางปมคาสงทเกยวของกบขอมลทกาลงแสดงอยในตารางแสดงรายการ เชน ปมสรางใหม, ปมแกไข, ปมลบ, ปมเผยแพร, เปนตน โดยคาสงทแสดงอยบนแถบเครองมอนสาหรบแตละหนาตางนน จะเปลยนแปลงไปตามชนดของขอมลทแสดงในตารางดวย ตามทไดเคยอธบายไปแลวจะเหนวา แมแตละแถบเครองมอจะมปมคาสงทแตกตางกนออกไป ตามแตละรายการขอมลทกาหลงแสดงผลอยในขณะนน จะเหนไดวามบางปมคาสงทเหมอน ๆ กน ดงจะเหนไดจากไอคอน และชอปมคาสงทเหมอนกน เชน ปมสรางใหม ปมลบ ปมชวยเหลอ เปนตน และปมคาสงทเหมอนกนเหลานกจะทางานทเหมอนกนดวย เชน ปมสรางใหม จะสรางรายการขอมลทกาลงแสดงผลขนมาใหม ปมลบจะเปนการลบรายการขอมลทถกเลอกไว เปนตน

สาหรบวธการใชงานปมคาสงบนแถบเครองมอ สวนใหญแลวจะตองเลอกรายการขอมลทตองการจากตารางดานลางกอน เมอเลอกแลวจงจะมาคลกลงทปมคาสงทตองการบนแถบเครองมอน

1

2

34

5

67

8

910 

19  

แตมหลายปมคาสงเหมอนกนทสามารถทางานไดโดยไมตองเลอกรายการขอมลจากตางรางกอน เชน ปมสรางใหม ปม Parameters เปนตน

ปมคาสงและไอคอนคาสง

ปมคาสง จะทาหนาทตามคาสงทถกเขยนไว โดยจะกระทากบรายการขอมลทถกเลอกไวแลวหรอบางปมคาสงสามารถทางานไดดวยตวเองโดยไมตองเลอกรายการขอมลกอนกม

ปมคาสงตาง ๆ ทมอยในหนาตางแสดงรายการขอมล พรอมดวยรายละเอยด ดงน

ปม ชอของปม รายละเอยด

สรางใหม

สรางรายการขอมลใหม ตามชนดของขอมลทกาหลงแสดงในขณะนน

แกไข แกไขรายการขอมลทถกเลอก

เผยแพร สงเผยแพรรายการขอมลทเลอกไวใหสามารถแสดงผลบนหนาเวบไซต

งดเผยแพร สงงดเผยแพรรายการขอมลทเลอกไวไมใหแสดงผลบนหนาเวบไซต

Featured สงใหรายการขอมลทเลอกปรากฎอยในหนาแรกของเวบไซต

คลงบทความ สาหรบสงบทความทเลอกไว เขาไปเกบไวในคลงบทความ

Check in

สาหรบเมอมการแกไขเอกสารพรอมๆกน มากกวาสองคนขนไป ตองทาการเชคอนกอน เพอใหทราบวาใครเปนคนแกไขเอกสารลาสด

ถงรไซเคล สงรายการขอมลไปเกบไวในถงขยะ

Option

หนาตางสาหรบกาหนดคาคณสมบตพนฐานของรายการขอมลทกาลงแสดงผลอยในขณะนน

ชวยเหลอ สาหรบเปดหนาตางชวยเหลอการใชงานขนมา

บนทก

สาหรบบนทกรายการขอมลทกาลงทางานดวย คลกแลวจะยงคงอยหนาเดมทกาลงทางาน

บนทกและปด

สาหรบบนทกรายการขอมลทกาลงทางานดวย คลกแลวจะยอนกลบไปยงหนาหลก

บนทกและสรางใหม

สาหรบบนทกรายการขอมลทกาลงทางานดวย คลกแลวจะไปทหนาจอสรางรายการใหม

20  

แทบ (Tab)

แทบ เปนพนฐานทแสดงลงคทสามารถคลกเพอไปยงหนาอน ๆ ของรายการขอมลทอยในกลมเดยวกน แทบอยถดลงมาจากแทบเครองมอ โดยจะแสดงขนมาในหนาเวบเพจของการจดการขอมลตาง ๆ ของเวบไซต ทมหวขอในการจดการมากกวาหนงอยาง เชน การจดการขอมลบทความ (Article) ของเวบไซต ทจะตองมการจดการดวยกน 3 เรองคอ Article Categories และ Featured Article จงตองมแทบ 3 แทบเพอใหเขาถงหนาตางการจดการทง 3 ดาน

ชองคนหา (Search box)

ชองคนหา ทาหนาทในการคนหาขอมลตามคาคนหาทถกกรอกไวในชองคนหา โดยสวนใหญแลวขอมลทคนหาไดจะเปนขอมลชนดเดยวกนกบรายการขอมลทกาลงแสดงผลอยในขณะนน เชน ถากาลงแสดงรายการขอมลบทความกจะแสดงการคนหาขอมลในรายการบทความทงหมดทมอยในเวบไซต เปนตน

ตวกรอง (Filter)

ตวกรอง เปนเครองมอสาหรบคดกรองขอมล ใหแสดงผลเฉพาะรายการขอมลในประเภททผดแลเวบไซตตองการเทานน เชน แสดงเฉพาะบทความทไดรบการเผยแพรบรเวบไซตเทานน หรอแสดงรายการปายโฆษณาเฉพาะประเภททเลอกเทานน เปนตน

วธการใชงานตวกรอง (Filter) เปนเรองทงายดายมาก ดวยการคลกบนดรอปดาวนลสตของฟลเตอรทตองการ จากนนกใหเลอกตวเลอกทแสดงออกมาจากดรอปดาวนลสต เมอเลอกแลวรายการขอมลในตาราง กจะแสดงผลเฉพาะรายการขอมลทมคณสมบตตรงตามฟลเตอรทไดเลอกไวเทานน

คอลมน (Column) คอลมน หรอหวตารางแสดงรายการขอมลนน ทาหนาทบอกวา ขอมลทอยในคอลมนนน ๆ เปนขอมลอะไรและมคาปจจบนเปนอยางไร เชน คอลมนเผยแพร บอกสถานะของการเผยแพรของบทความ จะบอกวาบทความใดบางทกาหนดใหเผยแพรบนเวบไซต และบทความใดบางกาหนใหไมเผยแพร เปนตน

คอลมนยงสามารถทาหนาทจดเรยงขอมล ในหนาตางแสดงรายการขอมล ตามลาดบสถานะของคอลมนนน ๆ ไดดวย โดยผดแลเวบไซตสามารถคลกลงไปบนชอคอลมนเพอใหรายการขอมลทแสดงอยในตาราง จดเรยงตามคอลมนนน ๆ

ชองตวเลอก (Selection box)

ชองตวเลอก ใชสาหรบคลกเลอกรายการขอมลทผดแลเวบไซตตองการทางานดวย โดยผดแลเวบไซตสามารถคลกลงไปทชองตวเลอก ดานหนารายการขอมลทตองการ จากนนจงสงใหมการดาเนนการอยางใดอยางหนง ดวยการคลกบนปมคาสงบนแถบเครองมออกท

บนทกและสาเนา

สาหรบบนทกรายการขอมลทกาลงทางานดวย คลกแลวจะทาการสาเนารายการขอมลทกาลงทาอย

ปด สาหรบปดหนาตางทกาลงทางานอยลงไป โดยไมมการบนทกขอมลใด ๆ ทงสน

21  

รายการขอมล (Item)

คอลมนแสดงรายการขอมลน เปนรายการแสดงตวขอมลจรง ๆ ทมรายละเอยดขอมลอยภายในและเปนสวนทถกนาไปดาเนนการตามคาสงตาง ๆ ดวย การแสดงผลรายการขอมลในตารางน จะแสดงผลดวยชอของขอมลนน ๆ เชน รายการขอมลบทความของเวบไซต จะแสดงรายการขอมลดวยชอของบทความ ทาใหผดแลเวบไซตสามารถเลอกขอมลทตองการทางานดวยไดงายโดยคลกบนชอของบทความนนเอง

ขอมลสถานะและคารายละเอยด (Status and Description)

รายละเอยดสถานะและคาคณสมบตขของรายการขอมล

พนทตรงนของตารางแสดงรายการขอมล จะแสดงขอมลของสถานะและขอมลคณสมบตตาง ๆ ของรายการขอมลทอยในแถบเดยวกน พรอมกบรายละเอยดของรายการขอมลนน ๆ ทอาจจะปรบเปลยนคาไดโดยตรงจากตารางน เชน คากาหนดการเผยแพรในคอลมนแรก หรอคากาหนดลาดบทของรายการขอมลในคอลมนท 3 เพอความเขาใจทดขนจะขอยกตวอยางความหมายของรายการขอมลในแตละคอลมน ดงน

คอลมนท 1 บอกวา รายการขอมลนกาหนดใหเผยแพรบนเวบไซต และสามารถคลกเพอเปลยนสถานะได

คอลมนท 2 บอกวา รายการขอมลทไมไดกาหนดใหแสดงผลในหนาแรกของเวบไซต และสามารถคลกเพอเปลยนสถานะได

คอลมนท 3 บอกวา บทความนอยหมวดหม (Category) ใด สามารถเปลยนสถานะไดโดยการเขาไปแกไขบทความแลวเลอกเปลยนหมวดหม

คอลมนท 4 บอกวา บอกวาบทความนอยลาดบทเทาไรของรายการบทความทงหมด สามารถคลกหรอกาหนดคาใหมได

คอลมนท 5 บอกวา บทความนไดถกกาหนดสทธการเขาถงของผใชในระดบใดบาง สามารถเปลยนสถานะไดโดยการเขาไปแกไขบทความแลวเลอกการกาหนดทคา Access

คอลมนท 6 บอกวา บทความนใครเปนผเขยนขน

คอลมนท 7 บอกวา บทความนถกเขยนขนเมอไรโดยจะบอกเปน ป-เดอน-วน เชน 2012-04-13

คอลมนท 8 บอกวา บทความนถกคลกเขาไปอานแลวกครง

คอลมนท 9 บอกวา บทความนสนบสนนและรองรบภาษาเขยนใดบาง

22  

คอลมนท 10 บอกวา บทความนมหมายเลข ID อะไร

แถบนาทาง (Navigation bar)

แถบนาทาง เปนเครองมอสาหรบไปยงหนาแสดงรายการขอมลลาดบถดไป ในกรณทมขอมลแสดงอยหลาย ๆ หนา พรอมกบแสดงใหเหนวาในขณะนกาลงอยในหนาทเทาไรดวย

จานวนทแสดงผล (# of display item)

เปนเครองมออสาหรบกาหนดวา จะใหแสดงผลรายการขอมลในตารางกรายการขอมลตอหนา ใชงานโดยคลกลงบนเครองมอน แลวดรอปดาวนลสตแสดงจานวนจะแสดงขนมา ใหคลกไปยงจานวนทตองการไดเลย

การสรางและการจดการเนอหา (Content Manager)

หวใจสาคญทขบเคลอนใหเวบไซตกาวไปขางหนาไดตลอดเวลากคอ “เนอหา” ซงเปนสงทเกดขนไดจากการเขยนบทความขนมาใหมโดยผดแลเวบไซต หรอเกดจากผเขาชมเวบไซตเขามาสรางไวกได เชน ในเวบเบอรดหรอระบบแสดงความคดเหน เปนตน กระบวนการจดการเนอหาของเวบไซตเรมตงแตการสรางเนอหาใหมบนเวบไซตไปจนถงการจดการกบเนอหาเกาทหมดอายไปจากเวบไซตแลว นอกจากนการจดการเนอหาทด ยงชวยเพมความเปนระบบระเบยบใหกบหนาเวบไซตมากขน และผเขาชมเวบไซตกจะไดรบความสะดวกสบายในการคนหาเนอหาสวนทตวเองตองการไดโดยงายอกดวย

ความรเบอตนการจดการบทความ

กอนทจะไปยงสวนตาง ๆ ของการจดการเนอหาเวบไซตของจมลา เราควรมาทาความเขาใจถงโครงสรางเนอหาจมลา กนเสยกอน

ในจมลาตงแตเวอรชน 1.6 จนถงเวอรชนปจจบนนนไดแบงโครงสรางของเนอหาเวบไซตออกเปน 2 ระดบ โดยแบงออกเปนระดบของโครงสราง 1 ระดบและเปนระดบของเนอหาอก 1 ระดบ มรายละเอยดดงน

1. แคตากอร (Category) หรอประเภทบทความ

2. อารตเคล (Article) หรอบทความ

1 ประเภทบทความ (Category) สามารถม Category ยอย ๆ ไดหลาย Category ซงภายในแตละ Category กบรรจบทความ (Article) เอาไว ซงเปนเนอหาหรอขาวสารทเราจะเพงเขาไปในเวบไซต

การเขาจดการบทความ

การเขาไปทหนาจดการบมความของเวบไซต สวนใหญแลวจะเขาทางเมน “บทความ (Content)” ดงแสดงในรปท ก ซงเปนเมนสาหรบจดการบทความของเวบไซตโดยเฉพาะ และผดแลเวบไซตยงสามารถเขาถงการจดการบทความไดทางไอคอนในแถบไอคอนทางลดบนแผงควมคมหลก (Control Panel) ไดเชนเดยวกน ดงแสดงในรปท ข

23  

รปท ก เมนบทความ (Content) รปท ข ไอคอนในแถบไอคอนทางลดบนแผงควมคมหลก (Control Panel)

การจดการประเภทบทความ (Category)

ขนตอนในการสราง Category มดงน

1. ไปทเมน “Content” -> “Category Manager” หรอคลกทไอคอน “Category Manager” บนแผงควบคมหลก

เมอหนาตาง Category Manager : Article แสดงขนมาแลว ใหคลกทปม หนาตางสราง Category ใหมกจะแสดงขนมา ดงรป

รปหนาจอสรางประเภทบทความใหม

รายละเอยดในหนาจอสรางประเภทบทความใหม

คา รายละเอยด

Title ชอของประเภทบทความ เปนชอทถกนาเอาไปแสดงในหนาเวบเพจและแสดงบนตพแหนง Breadcombs บนหนาเวบ

Alias ชอแบบยาวของประเภทบทความ เปนชอทถกนาไปแสดงในแถบแอดเดรสบารหรอในลงคหนาเวบเพจ ทเสรจเอนจนสามารถมองเหนได

24  

Parent สาหรบเลอกหมวดหมของประเภทบทความ แตหากไมเลอก จะหมายความวา Category นเปน Category หลก

Status สาหรบกาหนดวา Category นไดรบการเผยแพรหรอไม

Access สาหรบกาหนดสทธการมองเหน Category ของกลมผใช

Permissions สาหรบกาหนดสทธในการเขาถง Category ของกลมผใช

Language สาหรบกาหนดขอบเขตของภาษาทใชใน Category

Description สาหรบพมพรายละเอยดคาอธบายประเภทบทความลงไป โดยขอมลรายละเอยดในชองนจะถกนาไปแสดงผลบนหนาเวบเพจทกาหนดใหแสดงคาอธบายดวย

2. ใหกรอกคาสาหรบประเภทบทความใหม เมอกรอกคาตาง ๆ เสรจเรยบรอยแลว ใหคลกทปม Save หรอ Save & Close จากนนระบบจะปรากฎชอประเภทบทความในตารางแสดงรายการ ดงรป

รปกรอกขอมลและรายละเอยด Category

รปรายการ Category ใหมทเพมเขาไป

25  

เราสามารถสรางประเภทบทความไดมากกวา 1 รายการ และใน 1 รายการสามารถสรางประเภทบทความยอย ๆ บรรจในประเภทบทความหลกได โดยสามารถทาตามตวอยางขนตอนทกลาวไปขางตน เพอสาหรบสรางบทความตอไป

การจดการบทความ (Article Manager)

หลงจากไดทาการสราง ประเภทบทความ (Category) เพอเกบบทความแลว ตอไปจะเปนการสรางบทความ (Article) โดยเปนการทางานกบเนอหาจรง ๆ ของเวบไซต นนคอเปนเนอหาทสามารถเปดขนมาอานไดจรง ไมไดเปนแคระดบโครงสรางเหมอนกบประเภทบทความ ดงนนการจดการบทความจะเรมตงแต การเขาถงบทความ การสรางบทความใหม การออกแบบหนาตาของบทความ เชน การแทรกรปภาพประกอบ เปนตน การสงใหบทความทสรางใหมขนเผยแพรบนเวบไซต นอกจากนยงรวมไปถง การจดเกบบทความทหมดอายบนเวบไซตแลว และการลบบทความทไมตองการทง

การเขาถงบทความ

การเขาถงหนาตางจดการบทความของเวบไซต สามารถเขาถงได 2 ทางดวยกนคอ การคลกไปทเมน “บทความ(Content)” -> “การจดการบทความ(Article Manager)” หรอการคลกบนไอคอน “การจดการบทความ(Article Manager)” ทหนาแผงควบคมหลกของจมลา กได จะเขาสหนาตางการจดการบทความเหมอนกน ดงรป

รปหนาตางการจดการบทความ

การสรางบทความใหม (New Article)

กอนทเราจะเขยนบทความขนมาสกบทความนน เราควรทราบเสยกอนวาสวนของการจดการบทความนะเน มขนตอนอยางไรบาง จะขอกลาวเกรนนาพอสงเขป ดงน

1. เขาไปทหนาตางจดการบทความ ทหนาตางจดการบทความ ใหคลกทปม “สรางใหม (New)” บนแถบเครองมอเพอเขาสหนาตางเรมตนเขยนบทความใหมใหกบเวบไซต ดงรป

26  

รปหนาตางสรางเนอหาบทความใหม

2. จะเหนไดวาหนาตางสาหรบสรางบทความใหมน มพนทขนาดใหญและมรายละเอยดมากพอสมควรเลยทเดยว จงขอแบงพนทในหนาตางออกเปน 3 สวน โดยจะอธบายแตละสวนดงน

- พนทหมายเลข 1 คอ รายละเอยดบทความ

- พนทหมายเลข 2 คอ เครองมอ TinyMCE 2.0 WYSIWYG Editer

- พนทหมายเลข 3 คอ กาหนดพารามเตอรของบทความ

เขยนบทความใหม

ตอไปนจะเปนตวอยางการเขยนบทความใหม พรอมกบการใชเครองมอในการจดรปแบบของบทความใหม โดยจะไดลองทาไปไปตามขนตอน ดงทจะกลาวตอไปน

อพโหลดรป

เนองจากในตอนตอจากนไป เราจะมการเขยนบทความจานวนมาก ซงจะมการใชรปภาพมากเชนกน สงททกทานจะตองทากคอ ใหทาการอพโหลดรปภาพทอยในแผน CD ทใหไปเพอนามาประกอบในการเขยนบทความ ไปไวยงเวบเซรฟเวอรเสยกอน เราจงสามารถเรยกใชงานรปภาพเหลานในการสรางบทความใหมของเราได มขนตอนดงตอไปน

1. ทหนาตางจดการเวบไซต ใหคลกไปทไอคอน “การจดการมเดยไฟล (Media Manager)” จากแผงไอคอนทางลด หรอคลกทเมน “Content” -> “Media Manager”

2. ทหนาตางการจดการมเดยไฟล ตรงพนทโฟลเดอร(Folder) “stories” สรางไดเรกทอรใหมขนมากาหนดชอเปน “News” ดงรป

1 

2 

3 

27  

รปสรางไดเรกทอรใหมชอ News

3. ใหอพโหลดไฟลรปภาพ ไวในไดเรกทอร stories/news หลงจากเสรจเรยบรอยแลวใหลองเปดเขาไปดในโฟลเดอร news จะปรากฎรปภาพทเราไดทาการอพโหลด

สาหรบทานทตดตงใชงานจมลา แบบโลคอล เพอเรยนรการใชงานกอนนน สามารถคดลอกรปทงหมดไปไวใน C:\AppServ\www\__ชอโฟลเดอรของทาน__\images\stories\news ไดเลย เพยงเทานกสามารถใชงานรปภาพทงหมดไดเชนเดยวกน

การเขยนบทความ

ตวอยางแรกจะเปนการทดลองเขยนบทความใหมแบบงาย ๆ กนกอน ดงน

1. เปดหนาตางการจดการบทความขนมา จากนนกรอกขอมลทจาเปนทง 3 สวน ดงทกลาวไปแลวในหวขอ “การสรางบทความใหม (News Article)” ดงรป

28  

รปแสดงการกรอขอมลในหนาตางสรางบทความใหม

2. ทานสามารถปรบแตงคารปแบบตวอกษรไดโดยใชเครองมอ TinyMCE และใหกาหนด Featured เปน Yes เสรจแลวใหคลกปม Save & Close กจะไดผลแสดงทหนาจอปกตของเวบไซต ดงรป

รปหนาตาบทความใหมทเพงเขยนเสรจ

29  

3. จะเหนวาขอความทเขยนขนใหมแสดงในหนาจอปกตของเวบไซตเรยบรอยแลว ซงจะแสดงผลทงหมดของบทความ แตในปกตแลวการเขยนบทความทมความยาวจะไมนยมแสดงบทความทงหมด แตจะแสดงเฉพาะหวขอและขอความนาของบทความในหนาแรกเทานน หากผอานตองการอานบทความทงหมดกตองคลกเพอเขาไปอานเนอหาบทความทงหมดอกทนง

4. การแบงขอความในบทความใหเปนตอนนนสามารถทาไดโดยใชเครองมอทชอ “Read More” บนแถบเครองมอดานลางกรอบ “Edit Article” เพอแทรกคาสง Read More ในเนอหาของบทความ สงเกตไดโดยจะมเสนปะมแดงขนอย ดงรป

รปเสนปะสแดงแสดงการแยกสวนบทความ

5. จากนนคลกทปม “Save & Close” แลวกลบไปทหนาจอปกตของเวบไซต จะเหนไดวาบทความใหมของเราจะแสดงเฉพาะขอความบางสวนเทานน พรอมทงมปม “อานเพม (Read More)”nแสดงอยดานลางดวย ดงรป

รปแสดงผลบทความเฉพาะสวน intro

การสรางและการจดการเมน

การจดการเมนเปนการกาหนดการแสดงบทความในแตละหนาวาตองการบทความอะไรบาง โดยบทความตางๆทไดสรางขนมานนหากตองการแสดงบนหนาเวบไซตจะตองอยในกลมของเมนจงสามารถจะแสดงบนหนาเวบไซตได โครงสรางของเมนใน Joomla จะประกอบไปดวย 2 สวนคอ สวนชอเมน (Menu Name) และ สวนรายการเมน (Menu Item)

30  

ตาแหนงทแสดงเมนของ Joomla ทพบเหนบอยมดวยกน 2 ตาแหนง คอ Main menu เปนเมนรายการหลกของเวบไซต เชน หนาแรก เกยวกบเรา สนคา ตดตอเรา เปนตน

Top menu เปนเมนทอยสวนบนของเวบไซต เพอใหสวยงาม ประหยดเนอท และสะดวกแกการเขาถงเนอหา

การเขาจดการเมน การเขาถงหนาเพจสาหรบจดการเมนของเวบไซตสามารถทาได 2 วธคอ วธท 1 คลกทเมน Menus --> Menu Manager

ชอเมน Home ประกอบดวย 2 เมนยอย

ชอเมน Contact ประกอบดวย 3 รายการ

TOP Menu

Main Menu

31  

วธท 2 คลกท คลกทไอคอน Menu Manager ทแผงควบคมหลก

จากนนจะเขาสหนาเพจสาหรบจดการเมนของเวบไซตดงรป

รายละเอยดภายในหนาเพจการจดการเมนมดงน Title ชอเมน Published จานวนของรายการเมนแตละชอทถกเผยแพร Unpublished จานวนของรายการเมนแตละชอทไมถกเผยแพร Trashed จานวนของรายการเมนแตละชอทถกสงลบหรออยในถงขยะ Modules Linked to the Menu โมดลทใชกบชอเมนนและตาแหนงการตดตง ID ลาดบทสราเมน Joomla จะสรางเองอตโนมต การสรางชอเมนใหม ตามโครงสรางระบบเมนใน Joomla เราจะตองสรางชอเมนขนมากอนจงจะกาหนดรายการเมนในชอเมนนนๆ ไดขนตอนในการสรางชอเมนใหมดงน คลกเมน Menus --> Menu Maneger --> Add New Menu

32  

1. กาหนดรายละเอยดในสวน Menu Details ดงน Title ชอเมน Menu type ประเภทของเมน Description รายละเอยดของชอเมนทสราง (ไมใสกได)

2. จากนนกด Save & Close เมนทสรางขนมาใหมจะถกแสดงในหนารายการชอเมน โดยแสดงจานวนรายการเมนเผยแพร รายการเมนทไมเผยแพร และรายการเมนทถกลบเปน 0 เพราะยงไมไดสรางรายการเมน

3. กาหนดตาแหนงของโมดลโดยไปทเมน Extensions --> Module Manager จากนนคลกท New

4. คลกเลอกชนดโมดลทสรางแบบ Menu

1 2

3

33  

5. กาหนดรายละเอยดในสวนของ Details ดงน Title ชอโมดล Show Title แสดง/ไมแสดงชอโมดล Menu น Status กาหนดสถานะการแสดงโมดลน Access กาหนดระดบผมสทธเขาถงโมดลน

6. กาหนดรายละเอยดในสวน Basic Options ดงน Select Menu เลอกชอเมนทจะใชโมดลน Start Level ระดบความลกเมนยอยชนเรมตนทจะแสดงผล End Level ระดบความลกเมนยอยชนสดทายทจะแสดงผล Show Sub-menu Item แสดง/ไมแสดงเมนยอยตงแตความลกขนท 2 เปนตนไป

7. กาหนดตาแหนงทตองการแสดงเมนโดยคลกทปม Select position 8. คลกเลอกชอเทมเพลตทเลอกใช 9. คลกทตาแหนงทตองการแสดงชอเมนทสรางขน (สามารถดตาแหนงไดโดยใช ?tp=1 เชน

http://localhost/joomla2/?tp=1) 10. จากนนคลกทปม Save & Close

เมอกาหนดตาแหนงเสรจแลวจะแสดงโมดล Menu ทสรางขนมาใหมในรายการโมดล และเมอกลบไปดท Menu Manager จะพบวาในคอลมน Module Linked to the Menu จะปรากฎชอโมดลพรอมตาแหนงโมดล

5

6

7

8 9

10

34  

การสรางรายการเมน หลงจากทไดสรางชอเมนแลวขนตอนตอไปคอการสรางรายการเมนเพอเชอมตอไปยงเนอหาบทความ หรอเวบเพจตางๆ สามารถทาไดหลากหลายรปแบบโดยขอยกตวอยางการสรางรายการเมนเพอลงคแบบตางๆ ดงน

- การสรางเมนเพอลงคไปยงเนอหาทสรางไว เปนการเชอมโยงไปทเนอหาโดยตรง สาหรบการสรางเมนใหมสามารถทาไดดงน คลก Menus เลอกรายการเมนทตองการเชน Main menu แลวเลอก Add New Menu Item

คลกปม Select เพอเลอกชนดของรายการเมน

35  

เลอกรายการเมนชนด Single Article

ในสวนของแทบ Required Settings ใหคลกทปม Select/Change เพอเลอกบทความทจะเชอมโยงและแสดงผลบนหนาเวบไซต

คลกเลอกบทความทตองการแสดงในเมนน

การสรางเมนเพอลงคไปยงเนอหาทงหมดใน Category หรอรายการเมนแบบ List All Category เปนเมนทแสดงประเภทบทความทงหมดในรปแบบโครงสราง วธการสรางทาไดโดยการเลอกทเมน แลวเลอกสรางรายการเมนใหมหรอ Add New Menu Item

36  

จากนนในแทบ Details กาหนด Menu Item Type โดยคลกท Select เลอกเปน List All Category และ กาหนดชอของเมน

การกาหนดรายละเอยดของรายการนสวนสาคญจะตองเลอกประเภทของบทความหลกทตองการนามาแสดงโดยเลอกจาก Select a Top Category ในแทบ Required Settings

หลงจากนนจะแสดงใน Menus Item โดยในคอลมส Menu Item Type จะแสดงการกาหนดชนดของเมน

37  

นอกจากนยงมคณสมบตสวนอนทสามารถกาหนดเพมเตมได เชน

คณสมบตในแทบ Categories Option Top Level Category Description แสดง/ไมแสดง ขอความรายละเอยดของประเภทบทความ หลก Subcategory Levels กาหนดจานวนระดบชนประเภทบทความยอย

Empty Categories แสดง/ไมแสดง รายการของแตละประเภทบทความทไมมบทความอยภายในประเภทบทความทเลอก

Subcategories Descriptions แสดง/ไมแสดง ขอวามรายละเอยดของประเภทบทความยอ Articles in Category แสดง/ไมแสดง จานวนของบทความในแตละประเภทบทความ

คณสมบตในแทบ Category Option Category Title แสดง/ไมแสดง ประเภทบทความทตองการนามาแสดง

Category Description แสดง/ไมแสดง ขอความรายละเอยดของแตละ ประเภท บทความ

Category Image แสดง/ไมแสดง รปภาพประกอบประเภทบทความ Subcategory Levels กาหนดจานวนของระดบชนประเภทบทความยอย

Empty Categories แสดง/ไมแสดง รายการของแตละประเภทบทความทไมม บทความอยภายในประเภทบทความทเลอก

38  

No Articles Message แสดง/ไมแสดง ขอความเมอไมมบทความภายในประเภท บทความ Subcategories Descriptions แสดง/ไมแสดง ขอความรายละเอยดของประเภทบทความ ยอย Articles In Category แสดง/ไมแสดง จานวนของบทความ คณสมบตในแทบ List Layouts

Display Select แสดง/ไมแสดง เครองมอกาหนดจานวนการแสดงผลบทความ ตอหนาเวบเพจ เชน 5, 10, 15

Filter Field กาหนดใหแสดงชองคนหาบทความ

- Title ใหหาทชอเรองของบทความ - Author ใหหาทชอผเขยนบทความ - Hits ใหหาจานวนผชมบทความ

Table Headings แสดง/ไมแสดง ชอเรองของบทความ Show Date แสดง/ไมแสดง วนทและเวลาทสรางบทความ Date Format กาหนดรปแบบของวนท Show Hits in List แสดง/ไมแสดง จานวนครงทมผเขาชมของของแตละบทความ Show Author in List แสดง/ไมแสดง ชอผเขยนของแตละบทความ

Pagination แสดง/ไมแสดง ไอคอนเลขหนาและขอความนาทาง เชน << หนาแรก < กอนหนา เปนตน ไวทดานลางของหนาเวบเพจ

Articles to List กาหนดจานวนของบทความทแสดง คณสมบตในแทบ Article Options Show “Read More” แสดง/ไมแสดง ขอความ “Read More” หรออานเพมเตม Show Title with Read More แสดง/ไมแสดง ชอบทความและขอความ “Read More” การสรางเมนเพอลงคไปยง Component ตางๆ คอมโพเนนต (Component) หรอโปรแกรมเสรม เปนคณสมบตทสาคญอยางหนงของการสรางเวบไซตดวย Joomla ทจะทาใหเวบไซตทางานไดอยางสมบรณ ซงมโปรแกรมเสรมทสามารถใชงานไดฟรและแบบเสยเงนซอ เชน โปรแกรมเสรมสาหรบรานคา โปรแกรมเสรมสาหรบสรางสงคมออนไลน เปนตน คอมโพเนนตพนฐานททางานอยบน Joomla มเพยง 7 คอมโพเนนต โดยคอมโพเนนตจะเปนไดทงแอพพลเคชนทสามารถสรางและควบคมเนอหาหรอขอมลในสวนตางๆ สามารถเรยกใชจากเมน Components

39  

ตวอยาง การสรางเมนเชอมโยงไปยง Component “Web links” เพอสรางหนาเพจสาหรบเชอมตอไปยงเวบไซตตางๆ มวธการดงน สราง Categories สาหรบกาหนดกลมหรอประเภทของเวบลงค โดยคลกทเมน Components --> Weblinks --> Categories

กาหนดรายละเอยดตางๆ ในสวน Details Title ชอประเภทของเวบลงค Alias ชอเรยกแทนประเภทของ Web Link Parent กาหนดใหประเภทของ Web Links ทสรางนอยภายในประเภทของ Web Links หลกท

เลอก Status ตองการเผยแพรประเภทของ Web Links นทางเวบไซต Access ระดบผใชงานทสามารถเขาถงประเภทของ Web Links น Description คาอธบายประเภทของ Wed Links

40  

กาหนดรายละเอยดตางๆ ในแทบ Publishing Option และ Option Created by เลอกผสรางประเภทของ Web Links

Alternative Layout เลอกรปแบบการแสดงผลรายการประเภทของ Web Links น Image เลอกรปภาพทใชแสดงในรายการประเภทของ Web Links น Note ใสรายละเอยดเกยวกบรายการประเภทของ Web Links น

คลกทปม Save & Close

หากตองการแกไขใหคลกทชอของ Web Links Category หรอตกเครองหมายถกแลวคลกทปม Edit การสราง Web Links คลกเลอกทเมน Component --> Weblinks --> Links

41  

จากนนเลอกท New เพอสรางเวบลงคใหม

กาหนดรายละเอยดในแทบ New Web links Title ชอของ Web Links Alias ชอเรยกแทน Web Links น URL กาหนด URL ทจะเชอมโยงไปเมอคลกทลงคน Category กาหนดประเภทของ Web Links Status ตองการเผยแพร Web Links นทางเวบไซต

- Published เผยแพร - Unpublished ไมเผยแพร - Archived เกบเขาคลงบทความ - Trashed เกบเขาถงขยะ (ชวคราว)

Access ระดบผใชงานทสามาระเขาถง Web Links น Description คาอธบายของ Web Links

กาหนดรายละเอยดในสวนของ Publishing Options Create by เลอกผสราง Web Links Author’s Alias ชอผเขยน Web Links Created Date วนและเวลาทสราง Web Links Start Publishing วนและเวลาทเรมเผยแพร Web Links Finish Publishing วนและเวลาสดทายทเผยแพร Web Links กาหนดรายละเอยดในสวนของ Basic Options Target เลอกลกษณะการเปดหนาตางของบราวเซอรเมอคลกลงคแลว

- Open in parent window เปดในหนาตางเดม - Open in new windows เปดในหนาตางใหม - Open in popup เปดในหนาตางปอบอพ

Width ความกวางของหนาตางทเปด Height ความสงของหนาตางทเปด Count Clicks แสดงจานวนการคลกแตละ Web Links

42  

เมอกาหนดคาเรยบรอยแลวคลกทปม Save & Close จะปรากฎรายการ Web Links ทไดสรางขน

การนา Web Links ไปใช การนา Web Links ไปใชงานสามารถทาไดโดยการสรางระบบเมนได 3 รปแบบคอ

- List All Web Link Categories เปนลงคทแสดงประเภทของเวบลงคทงหมด - List Web Links in a Category เปนลงคทแสดงรายการเวบลงคทงหมดในประเภทของเวบลงคทเลอกไว - Submit a Web Link เปนลงคทแสดงแบบฟอรมบนทกขอมลลงค

ยกตวอยางการสรางหนาเวบเพจแสดงรายการเวบลงคทงหมดในประเภทของเวบลงคทเลอก (List Web Links in a Category) สามารถทาไดดงน

สรางเมนทจะแสดงหนาเวบเพจคลกท Menus --> เมนทตองการเพม --> Add New Menu Item

กาหนดคณสมบตในแทบ Details - กาหนด Menu Item Type เปน List Web Links in a Category - กาหนด Menu Title - กาหนด Select a category ในแทบ Required Settings - เมอกาหนดเสรจแลวคลกท Save & Close

43  

จากนนจะแสดงรายการเมนทไดสรางขน

เมนเวบลงคทสรางเสรจ เมอทดลองคลกทเมนจะแสดงรายการ Web Links ใน Category ทไดเลอกไว

การตงคาการแสดงเนอหา การควบคมการแสดงสวนประกอบตางๆ บทความทเผยแพรบนเวบไซตจะประกอบดวยสวนประกอบตางๆ เชน ชอบทความ รายละเอยด หมวดหม บทความ วนเวลาทเผยแพร ชอผเขยนบทความ ไอคอนสาหรบพมพ ไอคอนอเมลล เปนตน ซงสวนประกอบเหลานไดจากการตงคาคณสมบตของแตละบทความ โดยเรมแรกเมอสรางบทความใหมจะใชงานตาม Use Global แตเราสามารถกาหนดในแตละบทความไดตามตองการ

ตวอยางการแสดงสวนประกอบตางๆ ในบทความ

สาหรบการควบคมการแสดงสวนประกอบตางๆ ในบทความทงบทความทวไปและบทความทแสดงในหนาแรก สามารถทาไดโดยกาหนดคณสมบตเกยวกบรายละเอยดของแตละบทความท Article Options

44  

มรายละเอยดดงน Show Title แสดง/ไมแสดงชอของบทความ Linked Titles กาหนด/ไมกาหนดชอของบทความเปนลงคไปยงตวบทความ Show Intro Text แสดง/ไมแสดงบทนาบทความ Show Category แสดงไมแสดงชอหมวดหมบทความ Link Category กาหนด/ไมกาหนดชอหมวดหมบทความเปนลงคไปยงหนาแสดงรายการหมวดหมบทความน Show Parent แสดง/ไมแสดงเปนรายการหลกของหมวดหมบทความ Link Parent กาหนด/ไมกาหนดเปนรายการหลกของหมวดหมบทความ Show Author แสดง/ไมแสดงชอผเขยนบทความ Link Author กาหนด/ไมกาหนดชอผเขยนบทความเปนลงคไปยงหนาแสดงรายการของผเขยนบทความน Show Create Date แสดง/ไมแสดงวนเวลาทบทความถกสรางขน Show Modify Date แสดง/ไมแสดงวนเวลาทบทความถกแกไขลาสด Show Publish Date แสดง/ไมแสดงวนเวลาทบทความถกเผยแพรบนเวบไซต Show Navigation แสดง/ไมแสดงไอคอนหรอแทบคาสงสาหรบไปยงหนาตางๆ ของแตละบทความ Show Icon แสดง/ไมแสดงไอคอนตางๆ Show Print Icon แสดง/ไมแสดงไอคอนสงพมพไวทตอนตนของบทความ Show Email Icon แสดง/ไมแสดงไอคอนอเมลลของผเขยนบทความ Show Voting แสดง/ไมแสดงคะแนนแตละบทความ Show Hits แสดง/ไมแสดงจานวนครงทบทความถกคลกขนมาอาน Show Unauthorized links แสดง/ไมแสดงลงคทไมมสทธใชงานบนหนาเวบเพจ Read More Text เปลยนขอความนเปนอยางอน เชน อานเพมเตม ตดตามตอ เปนตน Alternative Layout กาหนดใหบทความแตละหนาแสดงผลไมเหมอนกน

45  

สวนการกาหนดใน Use Global สามารถกาหนดไดทเมน Option

การกาหนดจานวน Columns และ Rows ในการแสดงบทความ

1. ไปทหนา Admin => เลอก Menus => เลอก Main Menus 2. คลกเลอก Home

 

11 

2 

46  

3. ปรบคา #Leading Articles, #Intro Articles, #Columns, #Link ในแทบ Layout Option ตามทตองการ

 

#Leading Articles=1 #Intro Articles=4 #Columns=2 #Links=4

#Leading Articles=1 #Intro Articles=4 #Columns=1 #Links=0

# Leading Articles = จานวนบทความแนะนา โดยจะแสดงผลเตมความกวางของหนาเวบเพจ ถาไมตองการใหมบทความแนะนาใหกาหนดเปน 0

# Intro Articles = จานวนบทความทใหแสดงตอหนา โดยแบงเปนคอลมนตามคาทกาหนดในชอง #Columns

# Columns = กาหนดจานวนคอลมนแสดงบทความในสวนของ Intro Articles

# Links = กาหนดจานวนลงคไปยงบทความทไมไดนามาแสดงในหนาแรก เพอใหผชมคลกเขาไปอานบทความได