การสร างเว บไซต ด วยโปรแกรม Joomla

Transcription

1 1 การสร างเว บไซต ด วยโปรแกรม Joomla จ มล า (Joomla) เป นระบบบร หารจ ดการเว บไซต (Content Management System: CMS) ท ช วยให การพ ฒนาเว บไซต เป นเร องง าย และรวดเร ว โดยไม จ าเป นต องม ความร เร องภาษา HTML, PHP หร อ ภาษาท ใช ในการเข ยนเว บไซต ซ งสามารถสร ปล กษณะเด นๆ ได ด งน ไม ต องเส ยเวลาก บการออกแบบเว บไซต เพ ยงแค พ มพ ข อม ลก สามารถสร างเว บไซต ได สามารถปร บเปล ยนร ปแบบของเว บไซต ได อย างรวดเร วด วย templates ต าง ๆ ไม ต อง Upload Files ไปย ง server เพ ยงแค เล อกคาส ง Save ข อม ลจะถ กบ นท กท นท สามารถใช งานและ Update ข อม ลได ท กท ท กเวลาตามต องการผ าน Internet Explorer หร อ Web Browser อ น ๆ ม ส วนเพ มเต มประส ทธ ภาพให ก บเว บไซต มากมาย เช น Poll, Forums ช วยให บร หารจ ดการข อม ลได เป นอย างด เช น ข อม ลจะถ กจ ดเก บอย างเป นระบบทาให ง าย ต อการค นหาและแก ไข, สามารถซ อนข อม ลหร อเน อหาได สามารถกาหนด User เพ ม เพ อเข ามาช วยในการพ ฒนาเว บไซต โดยสามารถก าหนดส ทธ ให ก บ User ตามความเหมาะสม หร อเพ อให เน อหาบางส วนของเว บไซต สามารถเป ดด ได เฉพาะผ ท เป นสมาช กเท าน น จ มล า จ ดเป นโปรแกรมประเภท Open Source ภายใต สนธ ส ญญากน GNU General Public Licence ซ งเป นช อของโครงการพ ฒนาระบบปฏ บ ต การ ร เร มโดยร ชาร ด สตอลแมน เม อป พ.ศ โดยม จ ดม งหมายท จะพ ฒนาระบบปฏ บ ต การเพ อให เป นซอฟต แวร เสร ท ท กคนสามารถน าไปใช แก ไข ปร บปร ง หร อจาหน ายฟร โดยไม ต องเส ยค าล ขส ทธ โครงการกน ประกอบไปด วย เคอร เนล ไลบราร คอมไพเลอร โปรแกรมระบบ และ โปรแกรมประย กต ต างๆ จ มล า ได ร บการพ ฒนามาจากแอปพล เคช นท ช อ Mambo ซ งเป น CMS ท ได ร บความน ยมส งส ดใน ขณะน น เน องจากความค ดเห นท ต างก น ท าให ท มน กพ ฒนาส วนหน งได แยกต วออกมา เพ อสร างเป น แอปพล เคช นต วใหม ข นมาโดยใช ช อว า Joomla ซ งมาจากภาษา Swahili ท ม ความหมายในภาษาอ งกฤษว า all together หร อ as a whole เพ อจะส อความหมายว า รวมท กอย างเข าด วยก น โดยเช ญชวนน กพ ฒนา ท วโลกร วมม อก นจนกลายเป นจ มล าเวอร ช นแรก (1.0) ซ งได ประกาศเป ดต วประมาณด อนก นยายน ป 2005 แต จ มล าเวอร ช นแรกน นเป นเพ ยงการพ ฒนาต อยอดมาจาก Mambo จนกระท งเวอร ช น 1.5 จ งถ อว าเป น ร ปแบบเฉพาะของจ มล าอย างแท จร ง และได ม การพ ฒนาเป นเวอร ช นต อๆมาตามลาด บ เช น 1.6, 1.7, 2.0, 2.5 และ 3.0 ตามลาด บ

2 2 1. การสร างฐานข อม ลสาหร บจ มล า การสร างเว บไซต ด วยจ มล าน น จะต องม การเก บข อม ลต างๆ เก ยวก บเว บไซต ท เราจะสร างข น ด งน น ส งท เราต องจ ดเตร ยมไว ล วงหน าค อ ฐานข อม ล ข นตอนต อไปน ค อ การสร างฐานข อม ลไว สาหร บจ มล า โดยม ข นตอนด งน 1) เป ดเว บเบราเซอร ข นมา แล วกาหนด URL เป น หมายเหต สาหร บ ip address เปล ยนแปลงได ตาม server ของแต ละท าน 2) ป อน user และ password แล วกด log in 3) เข าส หน าการสร างฐานข อม ล

3 3 4) คล ก Database 5) สร างฐานข อม ล 6) ได ฐานข อม ลสาหร บเก บข อม ลของเว บ ช อ joomla

4 4 2. การต ดต งจ มล า ในท น เป นการต ดต งโปรแกรม จ มล าเวอร ช น 2.5 โดยให น าไฟล ท งหมดของจ มล ามาเก บไว ท ตาแหน ง var/www/html ของ server และการเคล อนย ายไฟล น น จะเป นการเคล อนย ายระหว างเคร อง PC / Notebook ก บเคร อง Server โดยใช โปรแกรม filzilla 1) ต ดต งโปรแกรม filezilla 2) เม อต ดต งเสร จจะได หน าตาโปรแกรม ด งน 3) กรอกข อม ล

5 4) เข าส ท เก บเว บไซต /var/www/html 5

6 6

7 7 รอจนกระท งการโอนย ายข อม ลเสร จส น อาจใช ระยะเวลาหน อยคร บ แล วก เป นอ นเสร จพ ธ ของการโอนย ายข อม ลไฟล ท งหมดของจ มล าข น Server โดยใช โปรแกรม filezilla คร บ หมายเหต 1. เพ อให เป นแนวเด ยวก น เรามาเปล ยนช อจาก joomla 2.5 เป น joomla นะคร บ หร อ อาจารย จะต ง ช อเป นเว บของโรงเร ยนก ได เป นภาษาอ งกฤษนะคร บ ไม ว าก น 2. Permissions folder joomla ให เป น 777

8 ต อไปเป นการต ดต ง joomla คร บ 8

9 9 5) เป ดเบราเซอร และใส URL เป น /joomla ก จะพบหน าแรกของการเซตค า 6) ข นตอนถ ดไปเป นการตรวจสอบการต ดต ง ให คล กป ม ต อไป เพ อไปย งข นตอนต อไป

10 10 7) ข นตอนถ ดไปเป นการประกาศล ขส ทธ ให คล กป ม ต อไป 8) ต อไปเป นการต งค าฐานข อม ล ข นตอนน สาค ญมาก โดยกาหนดค าช องต างๆด งน

11 11 9) ต อไปเป นการต งค า FTP ซ งในท น เราใช บน localhost จ งไม จาเป นต องต งค าใดๆ ให คล กป ม ต อไป 10) ข นตอนต อไปน เป นการต งค าเว บ

12 12 11) ต อไปให คล กป ม ลบโฟลเดอร Installation เพ อลบโฟลเดอร ท จ ดเก บไฟล ต ดต งท งไป ซ งตรงน สาค ญมาก หากเราไม ลบโฟลเดอร ต ดต ง เม อเข าส จ มล าคร งต อไป ก จะไปเร มท การต ดต งใหม อ ก ด งน นจ ง แนะน าให คล กป มด งกล าวลบโฟลเดอร น ท งไป ( แต สามารถท จะเปล ยนช อโฟลเดอร น ใหม ก ได เช น อาจเป น Installation_old เป นต น) ถ าเห นหน าน ละก โล ง อกละคร บ เป นอ นเสร จส นการต ดต ง

13 13 3. การเข าส ระบบสาหร บผ ด แลเว บไซต ในการจ ดการองค ประกอบต างๆเก ยวก บเว บไซต เราจะต องทาในโหมดของผ ด แลเว บไซต (Administrator) โดยข นแรกต อง log in เข าส ระบบก อน โดยม ข นตอน ด งน 1) ตาแหน ง URL ของผ ด แลเว บไซต ค อ แอดเดรส/joomla/administrator ให กาหนด ตาแหน งให ก บเว บเบราเซอร 2) จากน นจะเข าส ข นตอนการ log in โดยให น าช อผ ใช และรห สผ านท เราก าหนดไว ในข นตอนการ ต ดต งมากาหนดลงไป (เป นคนละอ นก บช อและรห สในการเข าใช ฐานข อม ล MySQL)

14 14 3) จากน นเม อเข าส ระบบ ก จะพบหน าหล กของผ ด แลเว บไซต (Control Panel) ด งน จากภาพ ในส วนของผ ด แลระบบน จะประกอบด วย 2 ส วนท สาค ญ ค อ ส วนท เป นเมน คาส ง เพ อเข าไปจ ดการส วนต างๆภายในจ มล า ซ งแต ละเมน หล กก จะม เมน ย อยๆลงไปให เล อกอ ก ด งภาพถ ดไป ซ งรายละเอ ยดการใช แต ละเมน เราจะได ศ กษา ในห วข อท เก ยวข อง ส วนท เป นป มไอคอนต างๆ สาหร บงานบางอย างท ต องอาจใช บ อยๆ ซ งก เท ยบได ก บ ป มท ลบาร น นเอง เป นการอานวยความสะดวกให เข าส ส วนท ต องการเร วข น นอกจากน ย งม อ ก 2 ล งก ท เราควรร จ กเพราะจะต องได ใช งานอย บ อยๆ น นค อ ล งก สาหร บคล กเป ดด ต วอย างเว บไซต (View Site) ก บล งก สาหร บออกจากระบบ (Log out) ด งภาพ 4. การต ดต งภาษาไทยให ก บจ มล า ปกต แล วภาษาหล กท ใช ในจ มล าจะเป นภาษาอ งกฤษ แม ว าเราจะสามารถสร างบทความหร อเมน ต างๆเป นภาษาไทยได แต หากองค ประกอบอ นย งเป นภาษาอ งกฤษอย จะทาให ล กษณะเน อหาของเว บไซต ด ไม กลมกล นก น ด งน นจ งได ม ผ สร างส วนเสร มสาหร บการแปลองค ประกอบบางส วนในเว บไซต ให เป น ภาษาไทย โดยเราสามารถตรวจสอบและดาวน โหลดส วนเสร มน ได จาก

15 15 หล งจากดาวน โหลดแล วจะได ไฟล ท ช อ th-th_joomla_lang_full_2.5.7v1 (สาหร บจ มล าเวอร ช น 2.5) จากน นก เข าส การต ดต ง ด งน 1) ให เล อกท เมน Extention -> Extension manager -> แล วเล อกแท บ Install 2) คล กป มเล อกไฟล แล วหล งการเล อกไฟล ให คล กป ม Upload&Install เพ อเร มการต ดต ง

16 16 3) ถ าต ดต งสาเร จ จะแสดงผลด งภาพ Manager 4) หล งจากต ดต งภาษา เราต องไปเซตค าเพ มเต ม โดยเล อกท เมน Extentions -> Language 5) ข นตอนถ ดไป ให คล กท แท บ Installed Site แล วคล กท ร ปดาวตรงช องคอล มน Default ให ร ป ดาวเปล ยนเป น ส เข ม หร อจะใช ว ธ เช คเล อกแล วไปคล กท ป ม Default บนแผงท ลบาร ก ได จะได 6) และให ทาเช นเด ยวก นก บแท บ Installed Administrator

17 17 5. การจ ดการเท มเพลต เท มเพลต (Template) จะใช ในการจ ดโครงร างหร อก าหนดองค ประกอบต างๆ ภายในเว บไซต ซ ง เท มเพลตน จะช วยให เราสามารถสร างเว บไซต ท ม ล กษณะร ปร างหน าตาท แตกต างก นออกไปได อย าง หลากหลาย อย างไรก ตาม การสร างเว บไซต ให ด ด หร อสวยงามน าใช น น บางคร งไม ได ข นอย ก บเท มเพลตท เล อกใช เสมอไป แต อาจข นอย ก บความสามารถในการน าองค ประกอบต างๆของจ มล ามาประย กต ใช เข า ด วยก นอย างเหมาะสมและลงต ว การเล อกเท มเพลตของเว บไซต 1) คล กท เมน ส วนเสร ม (Extensions) -> การจ ดการเท มเพลต(Template Manager) แล วเล อก แท บ ร ปแบบ(Styles) 2) จะได หน าเว บใหม ด งภาพ

18 18 การต ดต งและเซตค าของเท มเพลต เน องจากเท มเพลตก ค อ ส วนเสร ม (Extension) ของจ มล าอ กประเภทหน ง ด งน นการต ดต งก จะ ใช ว ธ การเด ยวก นก บส วนเสร มชน ดอ นๆ เช น ปล กอ น ซ งม แนวทางโดยส งเขปด งน 1) เล อกท เมน Extension - > Extension Manager จากน นเล อกแท บ Install ท ช อง Install Package File ให คล กป มสาหร บเล อกไฟล 2) หล งจากน นให เล อกไฟล.zip ของเท มเพลตท ได ดาวน โหลดมา ในท น เล อก dd_eshopper_14.zip 3) คล กป ม Upload & Install เพ อต ดต ง การลบเท มเพลต หล งจากท เราได ต ดต งเท มเพลตลงไปแล ว ถ าพบว าเท มเพลตท ลองใช แล วไม ถ กใจ ก อาจลบท งไป ได เพ อไม เปล องเน อท ในการจ ดเก บ โดยม ข นตอนด งน 1) เล อกท เมน Extension - > Extension Manager แล วเล อกท แท บ Manager

19 19 2) เน องจากม ส วนเสร มค อนข างเยอะ ด งน นถ าต องการให ปรากฏเฉพาะ template ให คล ก เล อกช ดเป น template 3) หล งจากพบเท มเพลตท ต องการแล ว ให เช คเล อกเท มเพลตน น แล วไปคล กป ม Uninstall *** ตอนน เพ อให เป นแนวทางเด ยวก น ให อาจารย ปร บเท มเพลต เป นแบบ dd_eshopper_14 นะคร บ จะได ภาพด งน

20 20 การแก ไขโค ดของเท มเพลต เน องจากข อกาหนดต างๆของเท มเพลตน น บางคร งอาจไม ได ถ กใจเราไปท งหมด ซ งในการท จะ แก ไขให ได ตามท เราต องการน น ต องเข าไปแก ไขท โค ดคาส งของเท มเพลตน น แต อย างไรก ตาม ผ แก ไขต องม ความร พ นฐานเก ยวก บ HTML, CSS, PHP ท ด พอสมควร ถ าแก ไขโดยพลการอาจส งผลให เก ดข อผ ดพลาด ข นได โดยม แนวทางด งต อไปน 1) เข าส ส วนจ ดการเท มเพลต โดยเล อกท เมน Extensions -> Template Manager แล วเล อกท แท บ Styles แล วคล กช อเท มเพลตตรงช องคอล มน Template น ด งภาพ 2) สมมต เราคล กเท มเพลตท ช อ dd_eshopper_14 ก จะเข าส การแสดงรายการไฟล ของเท มเพลต

21 21 3) ถ าต องการแก ไข footer ม แนวทางด งน 4) จะปรากฏภาพด งน ลองฝ กแก ไขนะคร บ อาจต องใช ความร เก ยวก บ HTML บ าง แต ไม เก นความสามารถ หรอกคร บ การแก ไขโลโก ของเว บไซต ในแต ละเท มเพลตน น ในการวางโลโก ของเว บไซต ลงไปท ด านบนของเพจด วยเสมอ ซ งม หลาย ล กษณะ เช น ร ปภาพ ข อความท แสดงช อเว บ เป นต น และการน าเท มเพลตไปใช งานจร งก ควรเปล ยนโลโก ท มาก บเท มเพลตให เป นโลโก ของเว บไซต เราเอง สาหร บโลโก ท เป นช อเว บไซต น นส วนมากไม ม ป ญหา เพราะก าหนดเป นข อความธรรมดา แต กรณ ท โลโก เป นร ปภาพน น ต องปร บเปล ยนให ถ กหล กการ เพ อป องก น ความผ ดพลาด ม แนวทางด งน 1) เพ อไม ให โครงร างของเว บไซต น นผ ดเพ ยนไปจากเด ม ภาพโลโก อ นใหม ควรม ขนาด (กว างxยาว) เท าก นท กประการก บภาพเด ม 2) โดยปกต ภาพต างๆท ใช ในแต ละเท มเพลตจะเก บไว ท 2.1) ถ าเป นเคร อง Server จร ง <Document Root>joomla_folder\template\ช อเท มเพลต\images\ 2.2) ถ าเป นเคร องท ใช Appserv จาลอง C:\Appserv\www\joomla\templates\ช อเท มเพลต\images\

22 22 3) ต วอย างในกรณท ใช เท มเพลตช อ dd_eshopper_14 6. บทความและการจ ดการหมวดหม 6.1 การจ ดการโครงร างของบทความ 6.2 การสร างบทความ - การพ มพ ต วอ กษร - การแทรกร ปภาพ - การใช read more - การใช page break 6.3 การแก ไขบทความ 6.4 การลบบทความ 6.5 การเผยแพร และงดเผยแพร บทความ 6.6 การให แสดงหร อยกเล กแสดงท หน าแรก 7. การสร างและการจ ดการเมน 7.1 กล มเมน 7.2 รายการเมน 7.3 โมด ลชน ดเมน 7.4 การสร างกล มเมน

23 การสร างเมน ย อย 8. ส วนเสร มและการใช ปล กอ น 8.1 vinaora_visitors_counter_ com_jcomments_v com_phocagallery_v com_acepolls_j plg_jw_allvideos-v4.5.0_j ฝ กสร างเว บไซต โครงร างเว บ Home สพป.มส.2 สพฐ เมน หล ก ประว ต โรงเร ยน ว ส ยท ศน พ นธก จ บ คลากร ภาพก จกรรม โพลสารวจความค ดเห น สถ ต ผ เข าเย ยมชม ว นน เม อวาน อาท ตย น ฯลฯ