สร้างเว็บด้วย joomla 3.3 · akeeba backup . ไว้ส...

2/23/2015

สรางเวบดวย

Joomla 3.3.6 (ฉบบเรงดวน)

รตน วงษเนตร

สสข.8 สราษฎรธาน

สสข.8

สราษฎรธาน

by Rath

ห น า | 1

สรางเวบดวย JOOMLA 3.3.6 RATH WONGNATE

สรางเวบดวย Joomla 3.3.6 (ฉบบเรงดวน) เตรยมโปรแกรมทจ าเปนตองใชในการตดตงโปรแกรม Joomla 3 กอน ซงจะมโปรแกรม

ตางๆ ดงน

1. โปรแกรม Wampserver ไวจ าลองคอมพวเตอรเปนเวบเซรฟเวอร Wampserver มหลายรนใหเลอกใน

ทนจะขอใช Wampserver 2.4 ในการสอนนะครบ เลอกตามเวอรชนของเครองคอมฯ ทใชอยวาเปน 32bit

หรอ 64bit (โปรแกรมมใหแลว)

2. โปรแกรม Joomla ไวท าเวบ สามารถดาวนโหลดไดท www.joomlacorner.com โดยรนลาสดในขณะน

จะเปนร น 3.3 ซ งตองใชงานกบ PHP 5.3.9 เปนอยางนอย เซรฟเวอรกรมฯ ขณะนกนาจะรองรบ

(โปรแกรมมในแผน Joomla_3.3.6-Stable-Full_Package.zip)

3. โปรแกรมเสรมหรอ Extensions ของ Joomla มหลายโปรแกรมทจ าเปนตองใช สามารถดาวนโหลดไดท

www.extensions.joomla.org

ตวอยางโปรแกรมเสรมทจ าเปน

- Flexi Custom Code ส าหรบแทรกโคดตางๆ

- VideoBox ส าหรบแสดงวดโอ Youtube ในบทความ

- VT Nivo Slider ส าหรบท าสไลดในหนาเวบ

- jHackGuard ไวปองการการเจาะระบบ Joomla

- akeeba Backup ไวส ารองขอมลในเวบไซตเกบไว

- Simple Gallery ไวส าหรบแสดงภาพ เปนแบบแคตตาลอก

- Facebook ไวแชรบทความไปยง Facebook

4. เทมเพลทส าหรบ Joomla แนะน าใหใชเทมเพลทมาตรฐาน Protostar ไปกอน เพอใหมความรความเขาใจ

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

ท www.joomla24.com www.joomlart.com www.dhetemplate.com ฯลฯ

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

เพอความสะดวกในการท าภาพประกอบ เชน

- FastStone Photo Resizer ไวยอขนาดภาพประกอบทจะใชในเวบ สามารถยอพรอมกนไดทงโฟลเดอร

เปนพนภาพพรอมกนไดสบาย ดาวนโหลดโปรแกรมไดท

http://www.faststone.org/FSResizerDownload.htm

- PhotoScape ไวปรบแตงภาพ ตกแตงภาพประกอบในเวบบลอกใหดนาสนใจ นาตดตาม ท าขอบภาพ

แบบตางๆ ดาวนโหลด http://www.photoscape.org/ps/main/download.php?lc=th

- Photoshop, Gimp โปรแกรมท าภาพประกอบเวบไซต ท าโลโกเวบไซต ดาวนโหลด Gimp ไดท

http://www.gimp.org/downloads/

สสข.8


by Rath

http://www.joomla24.com/

http://www.joomlart.com/

http://www.dhetemplate.com/

rath

Typewritten Text

ห น า | 2


6. โปรแกรมจดการไฟล โปรแกรมเหลาน เอาไวจดการกบไฟล เชน ซพไฟล เปลยนชอไฟล

- File Rename Basic โปรแกรมเปลยนชอไฟล เปลยนชอไฟลภาพจ านวนมากๆ พรอมๆ กน ใหเขาหลก

SEO

http://download.cnet.com/File-Renamer-Basic/3000-2248_4-10306538.html

http://www.softpedia.com/get/Others/Miscellaneous/File-Renamer-Basic.shtml

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

ไวจ ดการ ลบ ยาย เปล ยนช อไฟล ในเวบไซตจรง ซ งจะใช Windows Explorer เหมอนในเคร อง

คอมพวเตอรของเราเองนนไมได ดาวนโหลดไดท

https://filezilla-project.org/download.php?type=client

เรมตนกบ Joomla 3.3.6 รจก Joomla 3.3.6

Joomla รนนมความโดดเดนนาสนใจมาก ดวยหนาตาทใชงานงาย รองรบการสรางเวบไซต

ประเภทบลอก และส าคญมากคอรองรบการแสดงผลผานหนาจออปกรณหลายๆ แบบ มความยดหยน

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

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

หนาจอกใหญกวา 10 นว สวนแทบเลตกมหลายขนาดตงแต 6 นวถง 10 นว สวนมอถอกเชนกน เวบไซต

ทสรางดวย Joomla 3.x จะปรบเปลยนขนาดหนาจอเวบไซตใหเหมาะสมกบอปกรณเหลานโดยอตโนมต

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

พอสมควร อานงายสบายตา

จากการส ารวจของ Google พบวาพฤตกรรมทองเนตของผคนเปลยนไปใชการทองเนตผานมอ

ถอมากขน และมแนวโนมสงขน และทาง Google เองกพยายามผลกดนเชนกน ทางตรงกคอการปลอย

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

เหลานถกผลตออกวางจ าหนายจ านวนมากหลกลานตอวนเลยทเดยว จ านวนอปกรณทเพมขนหลาย

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

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

เพอความสะดวกกบผเขาชมอกดวย

ขนตอนการตดตงทงหมด

1. เตรยมขอมล เนอหาทจะท าเวบไซต

2. จ าลองคอมพวเตอรเปนเวบเซรฟเวอรดวย Wampserver

3. ใช PhpMyAdmin สรางฐานขอมล MySQL ใน Wampserver

4. ดาวนโหลดไฟลของ Joomla 3.x

5. ดาวนโหลด Extensions โปรแกรมเสรม Joomla 3.x

6. เรมการตดตง Joomla 3.x ในเครองเราเอง

สสข.8


by Rath

ห น า | 3


7. ท างานกบโปรแกรมเสรมหรอ Extensions ของ Joomla 3.x

8. การตงคา ชอเวบไซตและสโลแกนเวบไซต Joomla 3.x

9. ตดตงภาษาไทยให Joomla 3.x

10. จดการกบหมวดหมบทความและบทความของ Joomla 3.x

11. ยายไฟลของ Joomla 3.x แบบ Local เขาเวบไซตจรง

12. สรางฐานขอมล MySQL ให Joomla 3.x ในเวบไซตจรง

13. ตงคาไฟล .htaccess ของ Joomla 3.x ในเวบไซตจรง

14. ตงคาไฟล configuration.php ของ Joomla 3.x ในเวบไซตจรง

15. ดผลงานหลงการยาย Joomla 3.x เขาเวบไซตจรง

การตดตง WAMP Server

โปรแกรมจ าลอง Server คอการรวมเอาโปรแกรมทมความจ าเปนส าหรบการสรางเวบไซตเขาไว

ดวยกนประกอบดวย Apache PHP Mysql PHPMyadmin ซงปกตโปรแกรมเหลานจะตองตดตงทละ

ตว ท าใหเสยเวลาและปรบแตงคา Configuration คอนขางยาก เมอตดตง WAMP , MAMP ในเครอง

คอมพวเตอรของเราจะไดโปรแกรมทท าหนาทเปน Webserver (Apache) โปรแกรมจดการฐานขอมล

(MySQL) และโปรแกรม PHP ซงเปนภาษาทใชในการเขยนเวบไซตอกชนดหนง

เรมตนดวยการดบเบลคลกตดตง vcredist_x86.exe หรอ vcredist_64.exe (เรามไวใหแลว)

หนาตาง Microsoft Visual C++ ขนมา

ยนยนโดยการตก I have read …และคลก Install

รอตดตงเสรจแลวคลก Finish ( อยาลมวาตองตออนเตอรเนต

ไวดวยนะครบ…)

สสข.8


by Rath

ห น า | 4


ตอดวยการตดตง WAMP ดบเบลคลก

wampserver 2.4 .exe

คลก Next >

เลอก I accept the agreement และคลกปม Next >

เลอก Directory ทเกบโปรแกรม ถาไมเลอกจะน าไปเกบไวท

C:\wamp (แนะน าใหเอาไว ไดรฟอนครบ)

และคลกปม Next >

เลอกวาจะสราง Icon ทไหนบาง และคลกปม Next >

สสข.8


by Rath

ห น า | 5


คลก Install > เพอท าการตดตงโปรแกรม และรอจนกวาจะ

Install เสรจ

หลงจากนนโปรแกรมจะมการถามวา ตองการเลอก Browser

ไหนเปน Default Browser

ใหเราคลก No > เพราะเราจะยงให IE เปน Default Browser

คลก Open >

คลกปม Next >

สสข.8


by Rath

ห น า | 6


ตดตง WAMP Server เรยบรอยแลว คลก Finish

เรมการใชงานดบเบลคลก Icon ท Desktop

สามารถดสถานะการท างานของ WAMP ไดจาก ICON

ใน Tray Window มมดานลางขวามอกไดรวา WAMP

Serverท างานไดถกตองมย ICON [W] ตองเปนส

เขยว, ถาเปนสสมแสดงวาบาง Service อาจท างานไม

ถกตอง เมอตดตงส าเรจและเปด WAMP แลวอยาลม

ของ Test วาสมบรณมยนะครบ โดยการเปด Browser

ตวไหนกไดนะครบ IE Firefox Chrome แลวพมพ URL : localhost ถาสมบรณจะขนตามรปครบ

สรางฐานขอมล MySQL

ขนตอนตอไปเราจะสรางฐานขอมล MySQL ส าหรบตดตง Joomla 3.3

1. คลกท phpmyadmin

สสข.8


by Rath

ห น า | 7


2. ท าการเขาระบบ

“คาเรมตนของ WAMP Server”

User: root

Password: (ไมตองพมพนะครบเปนคา

วาง...)

4. สรางฐานขอมลเชน phangnga

ในชอง Create database การ

ตรวจทานเลอก utf8_general_ci

แลวคลก สราง

5. ตอนนเรากจะไดฐานขอมลส าหรบ

การตดตง Joomla 3.3 เรยบรอย

แลว

3. คลกเลอก ฐานขอมล (Database)

สสข.8


by Rath

ห น า | 8


การตดตง Joomla

การตดตง Joomla 3.x แบบ Local ในคอมพวเตอรของเราเอง กอนจะยายไปใชงานกบเวบไซตจรงใน

ภายหลง

1. เขาไปในโฟลเดอรทตดตงโปรแกรม Wampserver และเขาไปในโฟลเดอร www

2. จดการสรางโฟลเดอรไวเกบไฟล เชน phangnga จะเกบไฟลของ Joomla 3.x ทจะลองตดตงใน

คอมพวเตอรของเรา กอนจะยายไปใชงานในเวบไซตจรงๆ ท phangnga.doae.go.th

3. จดการกอปปไฟลของ Joomla 3.x มาไวในโฟลเดอร phangnga

4. เรมการตดตงโดยพมพ http:// localhost/phangnga แลวกด Enter (localhost จะแทนต าแหนง

เกบไฟลของโปรแกรม Wampserver สวน phangnga จะเปนโฟลเดอรทไดเกบโปรแกรมของ Joomla

3.x ในขอท 3 นนเอง)

5. จะเขาสหนาจอการตดตง ใหตงคาตางๆ ซงมสวนทตองก าหนดคาดงน

- ในชองชอเวบ พมพชอเวบไซตลงไป เชน ส านกงานเกษตรจงหวดพงงา

- ค าอธบายเวบ พมพสโลแกนเวบไซตลงไป ขอมลนส าคญ เพราะเปนขอมลทพวก Google, Yahoo,

Bing หรอ Search Engine จะมาเกบขอมลไปใชงาน จงตองใชขอความทสอความหมายทนาสนใจ

เกยวกบเวบไซตของเรา

- Admin Email พมพอเมลของเราลงไป

- Admin Username พมพชอผใชลงไป ปกตโปรแกรมจะตงชอเปน Admin

- Admin Password พมพรหสผานลงไป แนะน าใหพมพในโปรแกรม Notepad แลวกอปปมาวาง จะได

เหมอนกน

- Confirm Admin Password พมพรหสผานลงไปอกครง แนะน าใหพมพในโปรแกรม Notepad แลว

กอปปมาวาง จะไดเหมอนกน

6. เสรจแลวคลก Next ท างานตอไป

พมพชอเวบไซตลงไป เชน ส านกงานเกษตรจงหวดพงงา

พมพสโลแกนเวบไซต สสข.8


by Rath

ห น า | 9


7. ปอนรายละเอยดเกยวกบฐานขอมล MySQL ลงไป

Host Name ปกตจะเปน localhost

Username ปอนลงไป ตามทไดสรางไวใน PhpMyAdmin (root)

Password ปอนลงไป ตามทไดสรางไวใน PhpMyAdmin (คาวาง)

Database Name ปอนลงไป ตามทไดสรางไวใน PhpMyAdmin (phangnga)

8. จะไปขนตอนใหดภาพโดยรวม

ของสงทจะตดตง และใหเลอก

ลกษณะการตดตง ไมตดตง

(เหมาะส าหรบการใชท าเวบไซตท

ตองการใชการแสดงหลายภาษา)

9. คลก Install เรมตนตดตง

10. โปรแกรมจะเรมท าการตดตง รอสกพก

สสข.8


by Rath

ห น า | 10


11. ขนตอนสดทาย แจงวาไดตดตงเสรจแลว

จะมตวเลอก 2 ทาง คอ

- ดหนาเวบ คลกเพอไปดหนาตาเวบไซตทได

- ผดแลระบบ (Administrator) คลกเพอเขาระบบของ Joomla

แตใหเราคลก ลบโฟลเดอร installation กอน

12. ตวอยางหนาตาเวบทได กรณเลอกดหนาเวบ

สสข.8


by Rath

ห น า | 11


13. กรณเลอก Administrator เพอเขาระบบ จะใหปอน Username

และ Password

14. หนาจอในกรณทเขาระบบ การจดการกบเวบไซต ปรบแตง ท าบทความ เราจะเขาระบบแบบน

สสข.8


by Rath

ห น า | 12


การตดตงและใชงานสวนเสรม การตดตงภาษาไทย

คลกท Find Language และ พมพ th ในชองคนหา เพอหาภาษาไทย เมอไดแลวคลกเลอก Thai และท า

การ Install

เมอเสรจแลวกลบท Language Manager อกครง

คลกทรปดาว เพอตงภาษาไทยเปนภาษาเรมตน ทง Installed-Site และ Installed-Administrator

(ในหนาของ Administrator ตองออกจากระบบแลวเขาใหมถงจะเปนเมนภาษาไทยนะครบ)

คลกท Extensions แลวเลอกท Language Manager

คลก install Language

สสข.8


by Rath

ห น า | 13


ดต าแหนง Template และตงคา Module

ตอไปมาดต าแหนงตางๆ ใน template กนเพอจะไดรวาตองตดตงโมดลอะไร ตรงไหน

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

หลงจากนนให คลก การจดการเทมเพลต

คลกท เปด ตรงดต าแหนงโมดล

เสรจแลวท าการ บนทก

คลก การจดการเทมเพลต สสข.8


by Rath

ห น า | 14


จากนนกลบมาท สวนเสรม > การจดการเทมเพลต

เลอกเทมเพลตอกครง

ในตวอยางเราใช เทมเพลตทชอ Protostar จะมลง ดตวอยาง แสดงขนมา คลกเพอดตวอยาง

คลก เทมเพลต

คลก ดตวอยาง

สสข.8


by Rath

ห น า | 15


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

เวบของเราครบ

ในสวนของการตดตง Component, Module และ PlugIn จะอธบายอกครงในการอบรมครบ แตกไม

ยาก มรปแบบคลายๆ กน

การสรางหมวดหมและเนอหา

การจดการหมวดหม

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

เนอหา หรอบทความ บทความทสรางในเวบไซต จะแบงเปน 2 ประเภท คอบทความทมหมวดหม และไมม

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

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

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

ใสคาตางๆ ลงไป

สสข.8


by Rath

ห น า | 16


ชอ ใหใสชอหมวดหมทตองการ ในทนใส ขาวประชาสมพนธ

เอเลยส เปนชอทจะแสดงใน URL ใหใสเปนภาษาองกฤษ ถาไมใสระบบจะใสใหเปนวนทเรา

สราง หมวดหมน ซงดไมสวยงามนกเวลาเรยกใช ในทนใส news

หมวดหมหลก ไมมหมวดหมหลก เพราะเราสรางเปนหมวดหลก

สถานะ เผยแพร เพอเปดใชงาน

การเขาถง เปน Public เพอเขาถงบทความไดทกคน

คลก บนทกแลวปด เรากจะไดหมวดหมขาวประชาสมพนธมาแลว

หากตองการสรางหมวดหมยอยภายในขาวประชาสมพนธกสามารถสรางไดเหมอนเดมแตไปเลอก

หมวดหมหลกใหหมวดหมทสรางมาใหมนน ตามภาพขางลาง

เลอกหมวดหมหลก

สสข.8


by Rath

ห น า | 17


การจดการเนอหา

เราจะมาสรางบทความแรกกนเปน วสยทศนส านกงานเกษตรจงหวดพงงา ละกนครบ

ขนแรกใหไปท เนอหา > การจดการเนอหา > เพมเนอหาใหม

ใสรายละเอยด

ชอ ตงชอใหบทความ วสยทศนส านกงานเกษตรจงหวดพงงา

เอเลยส ใหใชอกษรองกฤษ ถาเราไมใสระบบจะใสตวเลขใหเราอตโนมต ตามวนททเราสรางเนอหา

ใหม ในทนจะใส Vision

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

หมวดหม เปนเนอหาคงทและมแคเนอหาเดยว และเราตองการท าเมนลงคมา เราเลอกหมวดหมเปน

Uncategorised ครบ

สถานะเลอกวาจะเผยแพรหรอไม

เดน เลอกวาจะใหแสดงหนาแรกหรอไม (เดน ถาเลอก ใช คอใหเนอหานนๆ แสดงหนาแรกของ

เวบไซตเรา) ในทนคลกท ไม เพอเราจะสรางเมนลงมาเองครบ

บนทกและปด

หมวดยอยทสรางขนมา

สสข.8


by Rath

ห น า | 18


กลบมาดในหนาของ การจดการเนอหา: เนอหาทงหมด จะพบวามบทความชอ วสยทศนส านกงาน

เกษตรจงหวดพงงา แสดงขนมาแลวในหมวดหม Uncategorised ดงภาพ

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

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

กอนอนตองจดเตรยมขอมลเนอหากอน

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

ภาพ แนะน าใหใชสดสวนท เปนมาตรฐาน เชน 4:3 (640px X 480px) หรอ 3:2 (640px X 320px)

resolution หรอ ความละอยด 72dpi กเพยงพอส าหรบใชในเวบไซด

2.เตรยมขอมลเนอหาขาว

3.อพรปขนไวบนเวบไซด ตองเตรยม แยก โฟลเดอรเกบภาพใหเปนระเบยบ หางาย ต าแหนงทเกบรปภาพ

หลก จะอยท images ใหเราสราง โฟลเดอรเพอแยกการใชงานของรปภาพใหด เชน ภาพใชท าขาวกแยก

เปน news แลวไปสรางโฟลเดอรส าหรบเกบภาพในแตละบทความอกท เชน สรางภาพขาวของวนท 22

กมภาพนธ 2015 ควรสราง เปน 150222 (ป เดอน วน) เพ อคนหาไดงาย path ของลงกจะเปน

images/news/150222

สสข.8


by Rath

ห น า | 19


สวนรปภาพทจะใชท าสวนอนๆ กสรางแยก ออกมา เชน ภาพบคลากร กสรางเปน personal หรอ

staff เปนตน path ของลงกจะเปน images/personal หรอ images/staff

เมอพรอมแลวกท าการอพรปกนกอน

การจดการมเดย

ไปท > เนอหา > การจดการรป/ไฟล

คลกสรางโฟลเดอร และสรางโฟลเดอร news เกบภาพขาว แลวคลก

สสข.8


by Rath

ห น า | 20


จะแจงวาสรางโฟลเดอร news ส าเรจ และมโฟลเดอร news เพมเขามาแลว

ใหเราคลกท news และ สรางโฟลเดอรขาวแตละขาวภายในโฟลเดอร news ไดเลย

สสข.8


by Rath

ห น า | 21


คลกท โฟลเดอร 150222 และคลกอพโหลด เพออพโหลดรปภาพ

คลก แลวไปเลอกรปทจะท าการอพโหลด และคลกเปด

สสข.8


by Rath

ห น า | 22


มรปทเราเลอก จ านวน 6 ไฟล ใหคลก เรมอพโหลด

จะไดภาพเขามาอยในโฟลเดอร 150222 จ านวน 6 ภาพ

คลก เนอหา > จดการเนอหา > เพมเนอหาใหม เหมอนบทความทสรางไปกอนหนาน

สสข.8


by Rath

ห น า | 23


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

เนอหา

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

ตองการอานทงหมดใหคลก “อานเพมเตม...” และตงคา เดน เปน ใช มาดวธกน

ดทเนอหากอนตองท าเนอหาสวนตนกนกอน

1.ทแถบเนอหา ท าการแทรกรปเพอท า thumbnail หรอภาพตวอยางบทความ โดยคลกทใสรปภาพแลว

คลกเลอกรปทตองการ แลวคลกเพมในเนอหา

สสข.8


by Rath

ห น า | 24


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

ขนาดรปภาพ (จ าตรงนไวใชในการท าบทความอนๆ ดวยนะครบ)

จะไดหนาตางนขนมา ใสคาขนาดลงไป ภาพนอตราสวนเปน 3:2 ใหลองใสขนาดเปน 210X140 ดครบ

แลวคลกตกลง

ภาพเลกลงแลว ตอไปใหคลก เพอสรางเนอหาสวนตนไวแสดงหนาแรก จะมเสนประส

แดงเกดขน

กลวไมเหนครบ

สงเกตตรงนไว นคอทอยของรปภาพทเราน าเขามา

เนอหาสวนตน

เนอหาหลก

ภาพตวอยางหนาแรก

พาดหวขาวทแสดงหนาแรก

สสข.8


by Rath

ห น า | 25


เมอคลกอานตอ...เราจะซอนเนอหาสวนตนแลวเปดเนอหาเตมหรอเนอหาหลก ใหเราใสรปภาพเขาไปทใต

เสนแดงอกครง จะคลกใสรปภาพแลวไปเลอกเหมอนเดมหรอจะ copy รปแรกมาวางกไดแลวมาแกไข

เหมอนกอนหนาน

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

เพออยรปแบบ Source Code กอน จะเปนดงน

เทยบกบ

ให copy โคด

<p><img src="images/news/150222/001.jpg" alt="" width="210" height="140" /></p>

มาวางใตเสนสแดง แลวคลก กลบมามมมอง พรวว อกครง จะไดแบบน

สสข.8


by Rath

ห น า | 26


คลกทรปลาง แลวคลก เพอแกไขภาพ เปลยนคาขนาดตามภาพ

จะไดแบบน

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

เพมรปทเหลอเขามาอกท าเหมอนเดมครบ สลบเครองมอไปหนา code แลว copy code ภาพท 2 ทเรา

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

แตภายงเปนภาพเดมอยคอ images/news/150222/001.jpg เจา 001.jpg ทเราเหนนนคอชอรปภาพ

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

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

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

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

ภาพทงหมดอยในโฟลเดอรเดยวกนอยแลวคอ 150222

สสข.8


by Rath

ห น า | 27


แกเปนแบบน

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

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

แลวลองไปดหนาเวบเพจของเรากนครบ

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

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

ภาพกพอ

ไปท เมน > การจดการเมน > main menu > หนาแรก ท แถบตวเลอกเคาโครง ลองตงคาตามภาพแลว

ลองดความเปลยนแปลง

สสข.8


by Rath

ห น า | 28


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

ตอไปมาดเมอเราคลก อานเพมเตม... กนบาง

ยงมเนอหาสวนตนตดมาตอนเปดอานเพ มเตมดไมดเทาทควรใหซอนเนอหาสวนตนและแสดงช อ

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

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

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

สสข.8


by Rath

ห น า | 29


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

สสข.8


by Rath

ห น า | 30


สสข.8


by Rath

ห น า | 31


ถาหากรปภาพใหญไปกปรบลดลงไดในบทความ นเปนเพยงตวอยางการเขยนบทความงายๆ ครบ

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

การจดการเมน

เราจะมาสรางเมนใน main menu หรอ เมนหลก ในหวขอ เกยวกบเรา มเมนยอยเปน “วสยทศน” กน

แตกอนสรางเมนเราตองสรางโมดลเมนหลกเสยกอนซงในคาเดมของเทมเพลต Protostar น เมนจะอย

ในรปแบบน

และเราจะมาเปลยนต าแหนงโมดลและรปแบบการแสดงเปน

แนวนอนกนกอน

ใหเราไปท สวนเสรม > การจดการโมดล > Main Menu แลวตงคาตามภาพ

แถบ การก าหนดการแสดงเมน ตงคาใหแสดงทกหนา

ใหเลอกต าแหนง position 1 สสข.8


by Rath

ห น า | 32


ทแถบ ขนสง ตงคาตามภาพ ทลศรสแดงช

เทานกจะได เมนทแสดงอยในแนวนอนและแสดงเมนยอบไดแลว

สสข.8


by Rath

ห น า | 33


ตอไปกมาเพมเมนกนเลย ไปท เมน > Main Menu > เพมเมนใหม .ใหใสชอเมนทจะสราง ในทนจะสราง

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

สสข.8


by Rath

ห น า | 34


เสรจแลวคลก สถานะเปน “เผยแพร” บนทกและปด

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

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

ส านกงาน

คลกสรางใหม >

ทชนดเมนคลก เลอก > เนอหา > เนอหาเดยว

สสข.8


by Rath

ห น า | 35


ทเลอกเนอหาคลกเลอก

จะมบทความใหเราเลอกใหคลกเลอก “วสยทศนส านกงานเกษตรจงหวดพงงา”

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

สสข.8


by Rath

ห น า | 36


ลองมาดผลงานกน ไดเมนมาแลวกลองเปดดเลย

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

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

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

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

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

กไดครบ

สสข.8


by Rath

ห น า | 37


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

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

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

ทอธบายมาทงหมดเปนการตดตงในเครองของเราเองนะครบ โดยการจ าลองเครองเราเปน server เมอ

สรางในเครองเราเสรจแลวตอไปกเปนขนตอนการอพขนส host จรงๆ กตองใหหนวยงานของทาน

ตดตอขอใหทางกรมสงเสรมการเกษตร

โดยให กลมระบบเครอขายและคอมพวเตอร ศนยเทคโนโลยสารสนเทศและการสอสาร

เบอรภายใน 287 โทร. 0-2940-5739-40

E-mail : [email protected]

สรางฐานขอมล MySQL ใหเสยกอนครบ สวนพนทเกบขอมลกใชพนทเดมทเราท าเวบเดมอยได

เลยครบ ขนตอนกไมไดยงยากอะไรเหมอนกบทท าในเครองเรา ทส าคญตองตงคาคอนฟกระบบใหถก

เทานนเองครบ เดยวตอนลงจรงคอยอธบายกนอกทครบ (อธบายไปกไมเหนภาพเทาท าแลวเกดปญหา

ครบ)

รตน วงษเนตร

นวส.ปฏบตการ กยส.สสข.8 สฎ.

สสข.8


by Rath

mailto:[email protected]

สร้างเว็บด้วย joomla 3.3 · akeeba backup . ไว้ส...

Documents