PROCESS IMPROVEMENT FOR REDUCING PRODUCTION COST … · านหรือการจัดท าโครงงาน 5. บทสรุปและข้อเสนอแนะ
E-learningjsbg.joseph.ac.th/6150/images\metting\ค่มือสอนม6_57.pdf · การท...
93
การทาโครงงาน E-learning ด้วย Joomla by … ครูปู 1 เนื้อหาสาระโครงงานประกอบด ้วย ขั ้นตอนการทาโครงงานคอมพิวเตอร์ 1. เลือกหัวข้อโครงงานที่สนใจ 2. ศึกษาค้นคว้าจากเอกสาร และแหล่งข้อมูล 3. จัดทาเค้าโครงของโครงงาน เมื่อผู้เรียนได้ศึกษาเอกสารอ้างอิงต่างๆ และเลือกเรื่องที่จะทา โครงงานคอมพิวเตอร์ รวมทั ้งวางแผนการทาโครงงานทุกขั ้นตอน โคยปรึกษากับอาจารย์ที่ ปรึกษาหรือผู้ทรงคุณวุฒิแล้ว จึงเขียนเค้าโครงของโครงงานเพื่อใช้เป็นกรอบแนวคิดและ แนวทาง ตลอดจนข้อตกลงต่างๆ ในการทาโครงงานคอมพิวเตอร์ระหว่างผู้เรียน อาจารย์ และผู้เกี่ยวข้อง นอกจากจะต้องใช้หลักการทางวิชาการแล้ว ยังจาเป็นต้องมีข้อตกลงและ เงือนไขต่างๆ ด้วย เช่น การขออนุญาตใช้ห้องปฏิบัติการคอมพิวเตอร์ การจัดหาลิขสิทธิ ์ของ ซอฟต์แวร์ เครื่องมือและตัวแปลภาษาโปรแกรม เป็นต้น เพื่อช่วยให้การทาโครงงานดาเนิน ไปอย่างราบรื่น 4. การลงมือทาโครงงาน 5. การเขียนรายงาน 6. การนาเสนอและแสดงโครงงาน ตัวอย่าง เค้าโครงข้อเสนอโครงงานคอมพิวเตอร์ ชื่อโครงงาน (ภาษาไทย) ภูมิศาสตร์ และระบบจัดการร้านอาหาร ( ภาษาอังกฤษ) Restaurant with Landscape ชื่อผู ้ทาโครงงาน 1. นายวรายุทธ อินทนนท์ 2.นายกฤตศิลป์ อ่อนศิริ ชื่ออาจารย์ที่ปรึกษา นางวรายุภัสร์ ปานอาพันธ์ ระยะเวลาดาเนินงาน 4 เดือน ภาคเรียนที่ 1 ปีการศึกษา 2555 รายละเอียดเกี่ยวกับโครงงาน 1. แนวคิด ที่มา และความสาคัญ การประกอบธุรกิจเป็นการหารายได้เลี ้ยงชีพอย่างหนึ ่ง ในบรรดาประเภทของธุรกิจทั ้งหลายนั ้น ธุรกิจร้านอาหารเห็นจะมีความโดดเด่นพิเศษกว่าธุรกิจประเภทอื่นๆ ด้วยรสชาติที่เป็นเอกลักษณ์ของ อาหาร จึงทาให้ธุรกิจประเภทนี ้มีการแข่งขันที่สูงมากไม่ว่าจะเป็นการแข่งขันในด้านรสชาติ การบริการ ที่ประทับใจ บรรยากาศ ความสะดวก รวดเร็วในการบริการ ปัจจัยเหล่านี ้ส่งผลกระทบต่อการดาเนิน ธุรกิจร้ายอาหารทั ้งสิ้น ยิ่งเรากาลังอยู่ในยุคที่เทคโนโลยีเจริญก้าวหน้า ยุคแห ่งข้อมูลข่าวสาร หากเรานา
Transcript of E-learningjsbg.joseph.ac.th/6150/images\metting\ค่มือสอนม6_57.pdf · การท...
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
1
เนอหาสาระโครงงานประกอบดวย ขนตอนการท าโครงงานคอมพวเตอร
1 เลอกหวขอโครงงานทสนใจ 2 ศกษาคนควาจากเอกสาร และแหลงขอมล 3 จดท าเคาโครงของโครงงาน เมอผเรยนไดศกษาเอกสารอางองตางๆ และเลอกเรองทจะท า
โครงงานคอมพวเตอร รวมทงวางแผนการท าโครงงานทกขนตอน โคยปรกษากบอาจารยทปรกษาหรอผทรงคณวฒแลว จงเขยนเคาโครงของโครงงานเพอใชเปนกรอบแนวคดและแนวทาง ตลอดจนขอตกลงตางๆ ในการท าโครงงานคอมพวเตอรระหวางผเรยน อาจารย และผเกยวของ นอกจากจะตองใชหลกการทางวชาการแลว ยงจ าเปนตองมขอตกลงและเงอนไขตางๆ ดวย เชน การขออนญาตใชหองปฏบตการคอมพวเตอร การจดหาลขสทธของซอฟตแวร เครองมอและตวแปลภาษาโปรแกรม เปนตน เพอชวยใหการท าโครงงานด าเนนไปอยางราบรน
4 การลงมอท าโครงงาน 5 การเขยนรายงาน 6 การน าเสนอและแสดงโครงงาน
ตวอยาง เคาโครงขอเสนอโครงงานคอมพวเตอร
ชอโครงงาน (ภาษาไทย) ภมศาสตร และระบบจดการรานอาหาร
(ภาษาองกฤษ) Restaurant with Landscape
ชอผท าโครงงาน 1 นายวรายทธ อนทนนท 2นายกฤตศลป ออนศร
ชออาจารยทปรกษา นางวรายภสร ปานอ าพนธ
ระยะเวลาด าเนนงาน 4 เดอน ภาคเรยนท 1 ปการศกษา 2555
รายละเอยดเกยวกบโครงงาน
1 แนวคด ทมา และความส าคญ
การประกอบธรกจเปนการหารายไดเลยงชพอยางหนง ในบรรดาประเภทของธรกจทงหลายนน ธรกจรานอาหารเหนจะมความโดดเดนพเศษกวาธรกจประเภทอนๆ ดวยรสชาตทเปนเอกลกษณของอาหาร จงท าใหธรกจประเภทนมการแขงขนทสงมากไมวาจะเปนการแขงขนในดานรสชาต การบรการทประทบใจ บรรยากาศ ความสะดวก รวดเรวในการบรการ ปจจยเหลานสงผลกระทบตอการด าเนนธรกจรายอาหารทงสน ยงเราก าลงอยในยคทเทคโนโลยเจรญกาวหนา ยคแหงขอมลขาวสาร หากเราน า
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
2
เทคโนโลยทถกพฒนาขนบางตว มาประยกตใชใหเขากบกจการรานอาหารของเรา กจะท าใหการจดการในธรกจรานอาหารของเราดขน ซงโปรแกรมน ผประกอบการ สามารถน าเขาภาพทออกแบบรปของสถานทรานอาหารมาใชใน Programได รวมทงสามารถ เพม ลด แกไข ต าแหนง ส ขนาด จ านวนคน รปราง ของโตะในรานอาหาร ทราบเมนทลกคาสงและเสรฟไดถกตอง ทนตามความตองการ ทงยงมระบบการจดการรายได เชน สามารถตรวจสอบยอดเงนทตองช าระของลกคาแตละโตะไดอยางรวดเรว และยงมตารางขอมลรายไดของยอดเงนในแตละวน และรายชออาหาร ซงจะท าให การรวมยอด ขายในแตละวนงายขน มความสะดวกสบายมากขนในการรวมยอดขายในแตละวน
2 วตถประสงค
1 เพอน าเทคโนโลยมาใชใหเกดประโยชนในชวตประจ าวน 2 เพอใหการจดการในรานอาหารดขน 3 เพอสะดวกในการจดเกบขอมล 4 เพอตองการพฒนาโปรแกรมทใชประโยชนไดในรานอาหารอยางมคณภาพ
3 หลกการและทฤษฎ
ภมศาสตร และระบบจดการรานอาหารrdquo นมโครงสรางพนฐานเปนโปรแกรม ซงสามารถพฒนาโดยใชโปรแกรม Delphi 70 เปนหลกทมการประยกตเอาการเขยนโปรแกรมดวยภาษา Pascal ทน ามาสรางเปนระบบจดการรานอาหารทมคณสมบตในการชวยงานในภตตาคารอาหารได เชน การวางโตะอาหารในหนาตางดานซายของโปรแกรมทเกยวกบสถานทรานอาหาร และแสดงสถานะของโตะ รวมทงสรปยอดเงน จ านวนโตะในแตละวนทางหนาตางดานซาย ทงยงมป มเชอมโยงไปยง Form อก Form ทมตารางบญชของทงในแตละวน และแตละเดอนไดอกดวย
4 วธด าเนนงาน
เทคโนโลยทใช โปรแกรมนจะม 2 สวนใหญๆ คอ - Input ซงรบคามาจาก mouse และ keyboard แลวน ามาประมวลผลสงตอไปยงตวโปรแกรม - Output แสดงผลออกมาทาหนาจอ monitor
เครองมอทใชในการพฒนา - Delphi 70 - Photoshop CS - Joomla 1525
รายละเอยดของโปรแกรมทพฒนา ldquoภมศาสตร และระบบจดการรานอาหาร (Restaurant with Landscape)rdquo จดเปนโปรแกรมในประเภท โปรแกรมเพอการประยกตใชงาน ซงโปรแกรมนจะแบงออกเปน 2 ขาง โดยขางซายทมขนาดใหญกวาจะเปน ภมศาสตรของรานอาหารทจะวาดดวยโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
3
อะไรกไดแลวจะมป มให Add ภาพลงไปได หรอจะถายรปจรง จากดานบนทสง แลวตกแตง แลวน า Add เขามา โดยจะสราง Component ทสามารถลากโตะ มาวางบนหนาจอได ทงยงเมอคลกเขาไปแลวกสามารถเขาไปเปลยนแปลงเบอรโตะ ขนาดโตะ(ไมจ าเปนตองใสตรงตามความจรงกได เพราะรปทน ามาใสอาจจะไมพอดกบจ านวนโตะถาใสขนาดตามความจรง) สโตะ รปรางโตะ(กลม กบ สเหลยม) จ านวนคนนง ฯลฯ สวนดานซายทมขนาดเลกกวาเปนหนาตางทแสดงผลสถานะของโตะทก าลงรบประทานอาหาร หรอก าลงรอเงนทอน เปนตน ทงยงมรวมยอดขาย รวมโตะ ของวนนอกดวย InputOutput specification Input การรบคาจาก Mouse และ Keyboard ทคลกลงไปในสวนตางๆ ของโปรแกรม ทน าไปประมวลผล ตางๆ ภายในโปรแกรม Output การแสดงผลออกทางหนาจอ monitor 5 แผนปฏบตงาน
ล าดบท กจกรรม เดอนท 1 เดอนท 2 เดอนท 3 เดอนท 4
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
1 ศกษาระบบในรานอาหาร
2 ออกแบบรายละเอยดของโปรแกรม
3 ศกษาการเขยนโปรแกรมดวยDelphi
4 ออกแบบโครงสรางของซอฟตแวร
5 พฒนาซอฟตแวร
6 ทดสอบและแกไขโปรแกรม
7 ท ารายงาน และคมอการใชโปรแกรม
6 ผลทคาดวาจะไดรบ bdquo ซอฟตแวรโปรแกรมประยกตระบบจดการรานอาหาร bdquo ความสามารถในการพฒนาโปรแกรมดวยซอฟตแวร Delphi
7 เอกสารอางอง
o หนงสอ เรมตนอยางมออาชพดวย Delphi 7 ฉบบสมบรณ โดย สจจะ จรสรงรววร จาก Dev Book
o หนงสอ การเขยนโปรแกรมภาษา Delphi จาก สยามคอมพวเตอร
o หนงสอ เรมตนอยางมออาชพดวย Delphi 5 ฉบบสมบรณ โดย สจจะ จรสรงรววร จาก Inf
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
4
ใบงาน
เรอง น าเสนอขอเสนอโครงงานคอมพวเตอร
ชอ-สกลเลขทชน
1 ใหนกเรยนแตละกลมเตรยมน าเสนอขอเสนอโครงงานคอมพวเตอร ตามเกณฑการประเมนดงน 11 ดานความสมบรณของขอเสนอโครงการ ขอเสนอโครงงานมรปแบบและหวขอครบถวน สามารถสอสารใหผอานเขาใจได ใชภาษาไดถกตอง มภาพ ตาราง หรอ ตวอยางประกอบท าใหสอไดชดเจน 12 ดานความยากงายในการพฒนา เทคนคทใชมความซบซอน หรอ ขนสง เทคโนโลยใหมและมประสทธภาพ มคณคาในเชงงานพฒนาหรอการวจย หรอใชเทคนคทไมซบซอนมาก แตถายทอดไดนาสนใจ 13 ดานความคดสรางสรรค เปนหวขอทนาสนใจ แปลก ใหม ยงไมมผพฒนาหรอคดคนมากอน หรอ มผพฒนามาแลว แตน าเสนอหรอพฒนาในแนวทางทแตกตางออกไป 14 ดานประโยชนใชงาน สามารถน าไปใชงานไดจรง มผลกระทบตอเศรษฐกจและสงคมในวงกวาง สามารถน าไปผลตในเชงพาณชยได สามารถน าไปพฒนาตอยอดได 15 ดานความนาจะพฒนาโครงการไดเสรจตามก าหนด ขอบเขตงาน สามารถพฒนาไดเสรจ ภายในระยะเวลาทก าหนด 4 เดอน ส าหรบงานใหม หรอ งานทพฒนาตอยอดจากงานเดมกตาม
2 ขณะน าเสนอนกเรยนจะไดรบการประเมนจากครและเพอน โดยใช รปแบบประเมนดงน
กลมท ชอโครงงงาน ความสมบรณ ของขอเสนอ
20
ความยากงาย ในการพฒนา
20
ความคดสรางสรรค
25
ประโยชน 20
ความนาจะ พฒนาไดเสรจ
15
รวม 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
5
เนอหาสาระ โครงสรางภาษา HTML ประกอบดวย
โครงสรางภาษา HTML lthtmlgt ltheadgt lttitlegtขอความทตองการใหแสดงบนไตเตลบาร lttitlegt ltheadgt
ltbodygt ค าสงและขอความใหแสดงบน browser ltbodygt lthtmlgt
ขนตอนการสรางเวบ 1 ท าเวบเพออะไร เลอกใชเครองมออะไรด (HTML Dreamweaver Joomla Drupal
Wordpress hellip) 2 วางแผนโครงสราง และ Usability ค านงถงผใชใหสามารถเขาถงขอมลไดอยางงาย 3 การออกแบบ Design ท าใหมความนาเชอถอ ยงใหญ ดด Look and Fill 4 การประชาสมพนธ วางแผนวาจะใชวธไหน เชน นามบตร ออก Event แลกลงคกบ
เวบไซตอน (Referral Links จายเงนโฆษณา (pay per click เมอมคนคลกมากจายเงนมาก) Email (return visitors)
ประเภทการสรางเวบ 1 Text Editor 2 Web Editor 3 CMS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
6
ใบความร
ประเภทของ CMS ในการสราง website
bull Blogs ndash บลอก หรอ เวบบลอก (weblog) เปนเวบประเภทหนงทถกสรางขนมาเพอใชเปนเครองมอในสอสารรปแบบใหม ไมวาจะเปนการประกาศขาวสาร การแสดงความคดเหน การเผยแพรผลงาน ฯลฯ (เหมอนกบ Whatrsquos new นนแหละ) และก าลงเปนทนยมมากขนเรอย ๆ โดยขณะนไดมผใหบรการบลอกมากมาย ทงแบบใหบรการฟร และเสยคาใชจาย โดยค าวา blog ยอมาจากค าวา weblog หรอ web log ซงค าวา weblog นนกมาจาก web (เวลดไวดเวบ) และ log (ปม บนทก) รวมกนหมายถง บนทกบนเวลดไวดเวบ นนเอง ตวบลอกน นจะออกแบบมาใหสามารถใชงานไดงายไมจ าเปนตองใชความรทางดาน HTML มากนก เนองจากมการออกแบบเครองมอใหเปนแบบ WYSIWYG editor (what you see it what you get) ซงเครองมอทดและเขาใจงาย ๆ คลายกบเครองมอหรอสญลกษณในโปรแกรมการพมพงานทวๆ ไป ท าใหผทสรางเอกสารสามารถท าไดดวยความรวดเรว
bull E-Commerce (อคอมเมรซ) ‟ เปน CMS สวนของการท ารานคา Online สามารถทจะใชในการซอของ ซงสามารถทจะเพมรายการสนคา ราคา ท าหนารานได ก าลงไดรบความนยมขนมาเรอยๆ
bull E-Learning ‟ เปน CMS ทใชในการท างานสอการเรยนการสอน หรอ CAI แตสามารถทจะท าเปนระบบ online ได เหมาะส าหรบนกเรยน คร อาจารย หรอสถานศกษาตางๆ สามารถสรางแบบทดสอบตางๆ ได แตในบานเรายงไมแพรหลายนก เนองจากคนทท าตองมความรในเรองของเวบไซตและการจดการเนอหาอยพอสมควร
bull Forums (กระดานขาว) ‟ เปน CMS ทใชในการตงกระทถามตอบปญหาหรอท าเปนชมชนตางๆ โดยจะมการแบงเปนหวขอหรอหมวดตางๆ ตามความสนใจของผเขาชม ซงสวนมากแลวตวForums นมกจะไปผกกบตว CMS อนๆ เขาไวดวยกน แตในขณะเดยวกนนนผใชงานกสามารถทจะตดตงใชงาน Forums แบบเพรยวๆ กไดเหมอนกน
bull Groupware ‟ เปน CMS ทออกแบบมาเพอทจะชวยการท างานในองคหรอหนวยงานใหมความสมพนธกน และมความรวดเรวในการท างาน สามารถทจะชวยเหลอกน สามารถท างานเปนทมและควบคมการท างานได โดยการท างานกจะผานระบบเนตเวรคหรออเมลลหรอระบบเวบออนไลนซงการตดตอสอสารนนกจะสามารถตดตดไดเปนกลมๆ หรอเฉพาะบคคลกได พรอมทงขอมลทตองการแจงสามารถใชเปนรปภาพ ขอความ หรออนๆ ได แลวแตวาความสามารถของ Groupware CMS จะท าไดขนาดไหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
7
bull Image Galleries (อลบมภาพ) ‟ เปน CMS ทก าลงไดรบความนยมอกตวหนงเลยกวาไดโดย CMS ประเภทนจะใชในการจดการอลบมภาพหรอท า Galleries กจะมฟงกชนในการใชงานโดยการแบงเปนหมวดหมของภาพ สามารถก าหนดขนาดภาพ ขนาดไฟล หรอบางตวสามารถทจะท าการยอภาพลงมาตามทก าหนดไดเอง หรอท าเปน Thumbnail กได
bull Portals (CMS) ‟ เปน CMS ทเปนหนาตาหลกของเวบไซตเลยกวาได ซงการท างานนนกอาจจะท างานดวยตวของมนเองได แตในขณะเดยวกนกสามารถทจะเอาตวอนๆ เขามารวมผนวกเพมไปได เชน CMS ตวนกจะมสวนของการจดการเนอหาอย แตกจะม Forums (กระดานขาว) หรอImage Galleries (อลบมภาพ) ผนวกเขาไปดวยเพอท าใหผใชงานนนสามารถใชงานไดสะดวกมากยงขน
bull วก (Wiki) คอ เวบไซตทอนญาตใหผใช เพมและแกไขเนอหาไดโดยงาย เหมอนกบการเขยนบทความรวมกน ค าวา ldquoวกrdquo น ยงสามารถใชหมายถงซอฟตแวรทใชเพอสรางเวบไซตดงกลาวอกดวย ลกษณะของตววกจะออกไปแนวสารานกรมหรอแหลงความรจ านวนมากๆ มากกวา โดยจะเปนการระดมความเหนจากหลายๆ คนมาใชงาน ซงตวอยางของไทยกสามารถเขาไปดไดท httpthwikipediaorg
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
8
ชอ ndash นามสกล เลขท ชน
ใบงาน
ประเภทของ CMS ในการสราง website ค าสง จงอธบายความหมายและหนาทของประภท CMS ตอไปน bull Blogs ndash บลอก หรอ เวบบลอก (weblog) bull E-Commerce (อคอมเมรซ)
bull E-Learning
bull Forums (กระดานขาว)
bull Groupware
bull Image Galleries (อลบมภาพ)
bull Portals (CMS) bull วก (Wiki)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
9
เนอหาสาระ การสรางแบบจ าลองหนาเวบ ประกอบดวย Site map สรางแปลนของเวบไซต แปลนของเวบไซตจะเปนตวบงบอกวาเวบไซตนนจะมทงหมดกหนา การเชอมโยงระหวางแตละหนาเปนอยางไร ภายในหนานนมรายละเอยดเปนอยางไรบาง โดยในการสรางแปลนของเวบไซตจะม 2 ขนตอน คอ
ตวอยางการสราง Site map
Mock up แบบจ าลองหนาเวบ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
10
เนอหาสาระ เรอง ความเปนมาของระบบ CMS CMS คออะไร
CMS ยอมาจาก Content Management System เปนระบบทน ามาชวยในการสรางและบรหารเวบไซตแบบส าเรจรป โดยในการใชงาน CMS นนผใชงานแทบไมตองมความรในดานการเขยนโปรแกรม กสามารถสรางเวบไซตได ตวของ CMS เองจะมโปรแกรมแถมมาและสามารถแทรกเองไดมากมายเชน webboard ระบบจดการปายโฆษณา ระบบนบจ านวนผชม แมแตกระทงตระกราสนคา และอนๆอกมากมาย
CMS เปนเหมอนโปรแกรม โปรแกรมหนง ทมผพฒนามาจากภาษาคอมพวเตอรทใชในเวบไซตเชน PHP Python ASP JSP ซงในปจจบนมคนใจดพฒนา CMS ฟรขนมามากมายอยางเชน Mambo Joomla Wordpress
แนนอนวาผพฒนาระบบ CMS ฟร ทกลาวมาขางตนนนลวนเปนมออาชพทมฝมอในเรองของ เวบไซตเปนอยางยง ท งการเขยนโปรแกรมทรดกม การออกแบบเนวเกชนทด ท าใหภาพรวมของเวบไซตทใช CMS นนออกมาในแนวมออาชพอยางมาก ขอดของ CMS
1 ผใชงานไมจ าเปนตองมความรเรองการท าเวบไซต เพยงแคเคยพมพ หรอเคยโพสขอความในอนเทอรเนต กสามารถมเวบไซตเปนของตวเองได
2 ไมเสยเวลาในการพฒนาเวบไซต ไมเสยเงนจ านวนมาก 3 งายตอการดแล เพราะมระบบจดการทกอยางใหเราหมด 4 มระบบจดการทเราสามารถหามาใสเพมไดมากมาย อยางเชน ระบบแกลลอร 5 สามารถเปลยนหนาตาเวบไซตไดงายๆ เพยงแคโหลดทม (Theme) ของ CMS นนๆ ขอเสยของ CMS
1ในกรณทผใชตองการออกแบบทม (หนาตาของเวบ) เอง จะตองใชความรมากกวาปรกต เนองจาก CMS มหลายๆระบบมารวมกนท าให เ กดความยงยาก ส าหรบผ ท ไ ม มความ ร 2ผใชจะตองศกษาระบบ CMS ทผพฒนาสรางขนมา เชนจะตองใสขอความลงตรงไหน จะตองแทรกภาพอยางไร ซงจะล าบากเพยงแคชวงแรกเทานน
3ในการใชงานจรงนนจะมความยงยากในการ set up ครงแรกกบ web server แตปจจบนกมผ บรการ web server มากมายทเสนอลงและ set up ระบบ CMS ใหฟรๆโดยไมเสยคาใชจาย
เมอรวมๆขอดและขอเสยดแลว กยงเหนไดวา CMS นนกเปนระบบทนาใชงานอยด แนะน า CMS - Mambo CMS ตวนมผใชงานมากมายทงในหนวยงานของรฐ และผคนทวไป ท าใหมคนใหเราสามารถปรกษาไดมาก รวมถงตวระบบเองกใชงานไดงาย และมผพฒนาอยตลอดเวลา มเวบไซตภาษาไทยรองรบส าหรบผทตองการศกษาและใชงาน เชนhttpwwwmambohubcom
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
11
ท าไมถงใช Joomla 1 ใชงาย 2 ทรงพลง 3 เปดเผยโคด (ไมตองเสยคาลขสทธโคด แจกจายตว Joomla ใหใครกได) 4 รองรบเวบขนาดใหญ 5 ฟร(ถาลงมอท าเอง) 6 ลขสทธเปนแบบ GNUGPL 7 ค าวา Joomla เปน TM (Trade mark) ของ OSM 8 ตวอยางกอนและหลงออกแบบดวย Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
12
เชน การก าหนดหวขอ ขนาดตวอกษร ส งายตอการก าหนดรปแบบ
AppServ คอโปรแกรมทรวบรวมเอา Open Source Software หลายๆอยางมารวมเขาไว ดวยกน โดยม Package หลกๆดงน - Apache - PHP
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
13
- MySQL - phpMyAdmin Appserv แตละเวอรชนจะได ตวเวอรชนของโปรแกรมภายใน package ทแตกตางกนไป เราสามารถท าการตดตง Appserv เพยงหนง แตสามารถลงโปรแกรมทตดมาไดทงหมดในคราวเดยว และยง set คา config ตางๆใหเสรจสน โดยปกตทกโปรแกรมทตดมากจะพรอมใชงานทนทดวย เปนทางเลอกหนงในการใชงานทสะดวกรวดเรว AppServ ใชเปนชดโปรแกรมทท าการตดต งไวเพอการทดสอบหรอใชงานภาษาในการ พฒนาโปรแกรม พฒนาระบบตางๆ หรอเวบไซท โดยปกตใช Apache เปน Web Server จ าลองการใชงานเสมอนอยบนอนเตอรเนต ในการใชงานภาษาท สามารถรองรบได ใช PHP เพอใหสามารถใชงานภาษา PHP และใชบน Web Server ได ใช MySQL เปน Database Server เพอใหภาษาscript ตางๆ ทรองรบสามารถสรางหรอตดตอ กบ Database ได ใช phpMyAdmin เพอเปนตวชวยในการตดตอ สราง ใชงาน Database ไดงายขน และโปรแกรมทตดมากบ Appserv นเองสามารถท าใหเราใชงานภาษา PHP HTML หรอภาษาตางๆ ซงสามารถน าไปใช เชน สามารถใช เขยนโปรแกรมตางๆทจ าเปนตองมการใชงาน บน Web Server หรอ เขยนเวบไซทแบบงายๆ จนถงเวบไซททมการใชงานโดยเชอมตอ Database เปนตน
การสมครสมาชก wwwcloudaccessnet เลอก Try Joomla เพอขอใชพนทชวคราว
นกเรยนจะไดรบ Web Server User name password นกเรยนไมตองลง Joomla เอง ใหนกเรยนทดลองเขาเวบของตนเองทรบจาก cloudaccess
เนอหาสาระประกอบดวย การสรางฐานขอมล บน Web Server ตวอยาง URL และ Database ทครก าหนดใหบน Server ของนกเรยน เชน
URL http10202022m6412 DATABASE m64_12 1 ตดตง Joomla โดยพมพ http10202022m6412joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
14
2 กดป มถดไปตรวจสอบระบบถามขอแนะน าในการตดตงใหด าเนนการดงน
-ใหท าการปดโปรแกรมท error อย 2 ตว โดยการกดป ม Start แลวพมพ php - เลอก PHP Edit the phpini Configuration File
- คนหาค าทตองการแกไข error ทเกดขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
15
แลวท างาน restart programe โดยคลกทป ม Start แลวพมพค าวา Restart apache panel -gtRun as Administrator
แกไขโดยใส ( remark) และเอา ออก ทงหมด 4 บรรทด ใหเหมอนตวอยางดานลาง ดงน
error_reporting = E_ALL amp ~E_NOTICE error_reporting = E_COMPILE_ERROR|E_ERROR|E_CORE_ERROR display_errors = Off register_globals = Off แลว กด File-gt Save เพอบนทกเพอใหโปรแกรมใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
16
จะปรากฏหนาจอดงน
- กดตรวจสอบอกครง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
17
ผลทไดใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
18
3 ขอมลลขสทธ กดป มถดไป
4 ก าหนดขอมลพนฐานขอมล
- ใสชอโฮสต = localhost - ใสชอผใชฐานขอมล = root
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
19
- ใสรหสผานผใชฐานขอมล =helliphelliphelliphelliphellip ตองจ าใหได - ชอฐานขอมลตามทสรางฐานขอมลไว (ครก าหนดให)เชน m64_12
5 การตงคาระบบ FTP ใหกด
6 ก าหนดคาระหบบหลก ไดแกการตงชอเวบไซต รหสผดแลระบบ และการก าหนดโครงหนาเวบ
- รหสผานผดแลระบบ ตองจ าใหได - ถาตองการขอมลโครงสรางหนาเวบตวอยางใหกดทป ม ตดตงขอมลตวอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
20
- ถาไมตองการขอมลตวอยางจะปรากฏหนาตางนขนมา
7 เสรจสนการตดตง Joomla ใหท าการเปลยนชอหรอลบโฟลเดอร Cappservwwwjoomlainstallation เพอปองกนคนอนลงทบ ตวอยางหนาเวบทได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
21
การปรบแกเวบไซต สวน Back End เชน URL Web ของนกเรยน คอ http10102022m6412 ใหพมพ administrator ตอทายดงน
http10202022m6412administrator
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
2
เทคโนโลยทถกพฒนาขนบางตว มาประยกตใชใหเขากบกจการรานอาหารของเรา กจะท าใหการจดการในธรกจรานอาหารของเราดขน ซงโปรแกรมน ผประกอบการ สามารถน าเขาภาพทออกแบบรปของสถานทรานอาหารมาใชใน Programได รวมทงสามารถ เพม ลด แกไข ต าแหนง ส ขนาด จ านวนคน รปราง ของโตะในรานอาหาร ทราบเมนทลกคาสงและเสรฟไดถกตอง ทนตามความตองการ ทงยงมระบบการจดการรายได เชน สามารถตรวจสอบยอดเงนทตองช าระของลกคาแตละโตะไดอยางรวดเรว และยงมตารางขอมลรายไดของยอดเงนในแตละวน และรายชออาหาร ซงจะท าให การรวมยอด ขายในแตละวนงายขน มความสะดวกสบายมากขนในการรวมยอดขายในแตละวน
2 วตถประสงค
1 เพอน าเทคโนโลยมาใชใหเกดประโยชนในชวตประจ าวน 2 เพอใหการจดการในรานอาหารดขน 3 เพอสะดวกในการจดเกบขอมล 4 เพอตองการพฒนาโปรแกรมทใชประโยชนไดในรานอาหารอยางมคณภาพ
3 หลกการและทฤษฎ
ภมศาสตร และระบบจดการรานอาหารrdquo นมโครงสรางพนฐานเปนโปรแกรม ซงสามารถพฒนาโดยใชโปรแกรม Delphi 70 เปนหลกทมการประยกตเอาการเขยนโปรแกรมดวยภาษา Pascal ทน ามาสรางเปนระบบจดการรานอาหารทมคณสมบตในการชวยงานในภตตาคารอาหารได เชน การวางโตะอาหารในหนาตางดานซายของโปรแกรมทเกยวกบสถานทรานอาหาร และแสดงสถานะของโตะ รวมทงสรปยอดเงน จ านวนโตะในแตละวนทางหนาตางดานซาย ทงยงมป มเชอมโยงไปยง Form อก Form ทมตารางบญชของทงในแตละวน และแตละเดอนไดอกดวย
4 วธด าเนนงาน
เทคโนโลยทใช โปรแกรมนจะม 2 สวนใหญๆ คอ - Input ซงรบคามาจาก mouse และ keyboard แลวน ามาประมวลผลสงตอไปยงตวโปรแกรม - Output แสดงผลออกมาทาหนาจอ monitor
เครองมอทใชในการพฒนา - Delphi 70 - Photoshop CS - Joomla 1525
รายละเอยดของโปรแกรมทพฒนา ldquoภมศาสตร และระบบจดการรานอาหาร (Restaurant with Landscape)rdquo จดเปนโปรแกรมในประเภท โปรแกรมเพอการประยกตใชงาน ซงโปรแกรมนจะแบงออกเปน 2 ขาง โดยขางซายทมขนาดใหญกวาจะเปน ภมศาสตรของรานอาหารทจะวาดดวยโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
3
อะไรกไดแลวจะมป มให Add ภาพลงไปได หรอจะถายรปจรง จากดานบนทสง แลวตกแตง แลวน า Add เขามา โดยจะสราง Component ทสามารถลากโตะ มาวางบนหนาจอได ทงยงเมอคลกเขาไปแลวกสามารถเขาไปเปลยนแปลงเบอรโตะ ขนาดโตะ(ไมจ าเปนตองใสตรงตามความจรงกได เพราะรปทน ามาใสอาจจะไมพอดกบจ านวนโตะถาใสขนาดตามความจรง) สโตะ รปรางโตะ(กลม กบ สเหลยม) จ านวนคนนง ฯลฯ สวนดานซายทมขนาดเลกกวาเปนหนาตางทแสดงผลสถานะของโตะทก าลงรบประทานอาหาร หรอก าลงรอเงนทอน เปนตน ทงยงมรวมยอดขาย รวมโตะ ของวนนอกดวย InputOutput specification Input การรบคาจาก Mouse และ Keyboard ทคลกลงไปในสวนตางๆ ของโปรแกรม ทน าไปประมวลผล ตางๆ ภายในโปรแกรม Output การแสดงผลออกทางหนาจอ monitor 5 แผนปฏบตงาน
ล าดบท กจกรรม เดอนท 1 เดอนท 2 เดอนท 3 เดอนท 4
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
1 ศกษาระบบในรานอาหาร
2 ออกแบบรายละเอยดของโปรแกรม
3 ศกษาการเขยนโปรแกรมดวยDelphi
4 ออกแบบโครงสรางของซอฟตแวร
5 พฒนาซอฟตแวร
6 ทดสอบและแกไขโปรแกรม
7 ท ารายงาน และคมอการใชโปรแกรม
6 ผลทคาดวาจะไดรบ bdquo ซอฟตแวรโปรแกรมประยกตระบบจดการรานอาหาร bdquo ความสามารถในการพฒนาโปรแกรมดวยซอฟตแวร Delphi
7 เอกสารอางอง
o หนงสอ เรมตนอยางมออาชพดวย Delphi 7 ฉบบสมบรณ โดย สจจะ จรสรงรววร จาก Dev Book
o หนงสอ การเขยนโปรแกรมภาษา Delphi จาก สยามคอมพวเตอร
o หนงสอ เรมตนอยางมออาชพดวย Delphi 5 ฉบบสมบรณ โดย สจจะ จรสรงรววร จาก Inf
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
4
ใบงาน
เรอง น าเสนอขอเสนอโครงงานคอมพวเตอร
ชอ-สกลเลขทชน
1 ใหนกเรยนแตละกลมเตรยมน าเสนอขอเสนอโครงงานคอมพวเตอร ตามเกณฑการประเมนดงน 11 ดานความสมบรณของขอเสนอโครงการ ขอเสนอโครงงานมรปแบบและหวขอครบถวน สามารถสอสารใหผอานเขาใจได ใชภาษาไดถกตอง มภาพ ตาราง หรอ ตวอยางประกอบท าใหสอไดชดเจน 12 ดานความยากงายในการพฒนา เทคนคทใชมความซบซอน หรอ ขนสง เทคโนโลยใหมและมประสทธภาพ มคณคาในเชงงานพฒนาหรอการวจย หรอใชเทคนคทไมซบซอนมาก แตถายทอดไดนาสนใจ 13 ดานความคดสรางสรรค เปนหวขอทนาสนใจ แปลก ใหม ยงไมมผพฒนาหรอคดคนมากอน หรอ มผพฒนามาแลว แตน าเสนอหรอพฒนาในแนวทางทแตกตางออกไป 14 ดานประโยชนใชงาน สามารถน าไปใชงานไดจรง มผลกระทบตอเศรษฐกจและสงคมในวงกวาง สามารถน าไปผลตในเชงพาณชยได สามารถน าไปพฒนาตอยอดได 15 ดานความนาจะพฒนาโครงการไดเสรจตามก าหนด ขอบเขตงาน สามารถพฒนาไดเสรจ ภายในระยะเวลาทก าหนด 4 เดอน ส าหรบงานใหม หรอ งานทพฒนาตอยอดจากงานเดมกตาม
2 ขณะน าเสนอนกเรยนจะไดรบการประเมนจากครและเพอน โดยใช รปแบบประเมนดงน
กลมท ชอโครงงงาน ความสมบรณ ของขอเสนอ
20
ความยากงาย ในการพฒนา
20
ความคดสรางสรรค
25
ประโยชน 20
ความนาจะ พฒนาไดเสรจ
15
รวม 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
5
เนอหาสาระ โครงสรางภาษา HTML ประกอบดวย
โครงสรางภาษา HTML lthtmlgt ltheadgt lttitlegtขอความทตองการใหแสดงบนไตเตลบาร lttitlegt ltheadgt
ltbodygt ค าสงและขอความใหแสดงบน browser ltbodygt lthtmlgt
ขนตอนการสรางเวบ 1 ท าเวบเพออะไร เลอกใชเครองมออะไรด (HTML Dreamweaver Joomla Drupal
Wordpress hellip) 2 วางแผนโครงสราง และ Usability ค านงถงผใชใหสามารถเขาถงขอมลไดอยางงาย 3 การออกแบบ Design ท าใหมความนาเชอถอ ยงใหญ ดด Look and Fill 4 การประชาสมพนธ วางแผนวาจะใชวธไหน เชน นามบตร ออก Event แลกลงคกบ
เวบไซตอน (Referral Links จายเงนโฆษณา (pay per click เมอมคนคลกมากจายเงนมาก) Email (return visitors)
ประเภทการสรางเวบ 1 Text Editor 2 Web Editor 3 CMS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
6
ใบความร
ประเภทของ CMS ในการสราง website
bull Blogs ndash บลอก หรอ เวบบลอก (weblog) เปนเวบประเภทหนงทถกสรางขนมาเพอใชเปนเครองมอในสอสารรปแบบใหม ไมวาจะเปนการประกาศขาวสาร การแสดงความคดเหน การเผยแพรผลงาน ฯลฯ (เหมอนกบ Whatrsquos new นนแหละ) และก าลงเปนทนยมมากขนเรอย ๆ โดยขณะนไดมผใหบรการบลอกมากมาย ทงแบบใหบรการฟร และเสยคาใชจาย โดยค าวา blog ยอมาจากค าวา weblog หรอ web log ซงค าวา weblog นนกมาจาก web (เวลดไวดเวบ) และ log (ปม บนทก) รวมกนหมายถง บนทกบนเวลดไวดเวบ นนเอง ตวบลอกน นจะออกแบบมาใหสามารถใชงานไดงายไมจ าเปนตองใชความรทางดาน HTML มากนก เนองจากมการออกแบบเครองมอใหเปนแบบ WYSIWYG editor (what you see it what you get) ซงเครองมอทดและเขาใจงาย ๆ คลายกบเครองมอหรอสญลกษณในโปรแกรมการพมพงานทวๆ ไป ท าใหผทสรางเอกสารสามารถท าไดดวยความรวดเรว
bull E-Commerce (อคอมเมรซ) ‟ เปน CMS สวนของการท ารานคา Online สามารถทจะใชในการซอของ ซงสามารถทจะเพมรายการสนคา ราคา ท าหนารานได ก าลงไดรบความนยมขนมาเรอยๆ
bull E-Learning ‟ เปน CMS ทใชในการท างานสอการเรยนการสอน หรอ CAI แตสามารถทจะท าเปนระบบ online ได เหมาะส าหรบนกเรยน คร อาจารย หรอสถานศกษาตางๆ สามารถสรางแบบทดสอบตางๆ ได แตในบานเรายงไมแพรหลายนก เนองจากคนทท าตองมความรในเรองของเวบไซตและการจดการเนอหาอยพอสมควร
bull Forums (กระดานขาว) ‟ เปน CMS ทใชในการตงกระทถามตอบปญหาหรอท าเปนชมชนตางๆ โดยจะมการแบงเปนหวขอหรอหมวดตางๆ ตามความสนใจของผเขาชม ซงสวนมากแลวตวForums นมกจะไปผกกบตว CMS อนๆ เขาไวดวยกน แตในขณะเดยวกนนนผใชงานกสามารถทจะตดตงใชงาน Forums แบบเพรยวๆ กไดเหมอนกน
bull Groupware ‟ เปน CMS ทออกแบบมาเพอทจะชวยการท างานในองคหรอหนวยงานใหมความสมพนธกน และมความรวดเรวในการท างาน สามารถทจะชวยเหลอกน สามารถท างานเปนทมและควบคมการท างานได โดยการท างานกจะผานระบบเนตเวรคหรออเมลลหรอระบบเวบออนไลนซงการตดตอสอสารนนกจะสามารถตดตดไดเปนกลมๆ หรอเฉพาะบคคลกได พรอมทงขอมลทตองการแจงสามารถใชเปนรปภาพ ขอความ หรออนๆ ได แลวแตวาความสามารถของ Groupware CMS จะท าไดขนาดไหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
7
bull Image Galleries (อลบมภาพ) ‟ เปน CMS ทก าลงไดรบความนยมอกตวหนงเลยกวาไดโดย CMS ประเภทนจะใชในการจดการอลบมภาพหรอท า Galleries กจะมฟงกชนในการใชงานโดยการแบงเปนหมวดหมของภาพ สามารถก าหนดขนาดภาพ ขนาดไฟล หรอบางตวสามารถทจะท าการยอภาพลงมาตามทก าหนดไดเอง หรอท าเปน Thumbnail กได
bull Portals (CMS) ‟ เปน CMS ทเปนหนาตาหลกของเวบไซตเลยกวาได ซงการท างานนนกอาจจะท างานดวยตวของมนเองได แตในขณะเดยวกนกสามารถทจะเอาตวอนๆ เขามารวมผนวกเพมไปได เชน CMS ตวนกจะมสวนของการจดการเนอหาอย แตกจะม Forums (กระดานขาว) หรอImage Galleries (อลบมภาพ) ผนวกเขาไปดวยเพอท าใหผใชงานนนสามารถใชงานไดสะดวกมากยงขน
bull วก (Wiki) คอ เวบไซตทอนญาตใหผใช เพมและแกไขเนอหาไดโดยงาย เหมอนกบการเขยนบทความรวมกน ค าวา ldquoวกrdquo น ยงสามารถใชหมายถงซอฟตแวรทใชเพอสรางเวบไซตดงกลาวอกดวย ลกษณะของตววกจะออกไปแนวสารานกรมหรอแหลงความรจ านวนมากๆ มากกวา โดยจะเปนการระดมความเหนจากหลายๆ คนมาใชงาน ซงตวอยางของไทยกสามารถเขาไปดไดท httpthwikipediaorg
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
8
ชอ ndash นามสกล เลขท ชน
ใบงาน
ประเภทของ CMS ในการสราง website ค าสง จงอธบายความหมายและหนาทของประภท CMS ตอไปน bull Blogs ndash บลอก หรอ เวบบลอก (weblog) bull E-Commerce (อคอมเมรซ)
bull E-Learning
bull Forums (กระดานขาว)
bull Groupware
bull Image Galleries (อลบมภาพ)
bull Portals (CMS) bull วก (Wiki)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
9
เนอหาสาระ การสรางแบบจ าลองหนาเวบ ประกอบดวย Site map สรางแปลนของเวบไซต แปลนของเวบไซตจะเปนตวบงบอกวาเวบไซตนนจะมทงหมดกหนา การเชอมโยงระหวางแตละหนาเปนอยางไร ภายในหนานนมรายละเอยดเปนอยางไรบาง โดยในการสรางแปลนของเวบไซตจะม 2 ขนตอน คอ
ตวอยางการสราง Site map
Mock up แบบจ าลองหนาเวบ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
10
เนอหาสาระ เรอง ความเปนมาของระบบ CMS CMS คออะไร
CMS ยอมาจาก Content Management System เปนระบบทน ามาชวยในการสรางและบรหารเวบไซตแบบส าเรจรป โดยในการใชงาน CMS นนผใชงานแทบไมตองมความรในดานการเขยนโปรแกรม กสามารถสรางเวบไซตได ตวของ CMS เองจะมโปรแกรมแถมมาและสามารถแทรกเองไดมากมายเชน webboard ระบบจดการปายโฆษณา ระบบนบจ านวนผชม แมแตกระทงตระกราสนคา และอนๆอกมากมาย
CMS เปนเหมอนโปรแกรม โปรแกรมหนง ทมผพฒนามาจากภาษาคอมพวเตอรทใชในเวบไซตเชน PHP Python ASP JSP ซงในปจจบนมคนใจดพฒนา CMS ฟรขนมามากมายอยางเชน Mambo Joomla Wordpress
แนนอนวาผพฒนาระบบ CMS ฟร ทกลาวมาขางตนนนลวนเปนมออาชพทมฝมอในเรองของ เวบไซตเปนอยางยง ท งการเขยนโปรแกรมทรดกม การออกแบบเนวเกชนทด ท าใหภาพรวมของเวบไซตทใช CMS นนออกมาในแนวมออาชพอยางมาก ขอดของ CMS
1 ผใชงานไมจ าเปนตองมความรเรองการท าเวบไซต เพยงแคเคยพมพ หรอเคยโพสขอความในอนเทอรเนต กสามารถมเวบไซตเปนของตวเองได
2 ไมเสยเวลาในการพฒนาเวบไซต ไมเสยเงนจ านวนมาก 3 งายตอการดแล เพราะมระบบจดการทกอยางใหเราหมด 4 มระบบจดการทเราสามารถหามาใสเพมไดมากมาย อยางเชน ระบบแกลลอร 5 สามารถเปลยนหนาตาเวบไซตไดงายๆ เพยงแคโหลดทม (Theme) ของ CMS นนๆ ขอเสยของ CMS
1ในกรณทผใชตองการออกแบบทม (หนาตาของเวบ) เอง จะตองใชความรมากกวาปรกต เนองจาก CMS มหลายๆระบบมารวมกนท าให เ กดความยงยาก ส าหรบผ ท ไ ม มความ ร 2ผใชจะตองศกษาระบบ CMS ทผพฒนาสรางขนมา เชนจะตองใสขอความลงตรงไหน จะตองแทรกภาพอยางไร ซงจะล าบากเพยงแคชวงแรกเทานน
3ในการใชงานจรงนนจะมความยงยากในการ set up ครงแรกกบ web server แตปจจบนกมผ บรการ web server มากมายทเสนอลงและ set up ระบบ CMS ใหฟรๆโดยไมเสยคาใชจาย
เมอรวมๆขอดและขอเสยดแลว กยงเหนไดวา CMS นนกเปนระบบทนาใชงานอยด แนะน า CMS - Mambo CMS ตวนมผใชงานมากมายทงในหนวยงานของรฐ และผคนทวไป ท าใหมคนใหเราสามารถปรกษาไดมาก รวมถงตวระบบเองกใชงานไดงาย และมผพฒนาอยตลอดเวลา มเวบไซตภาษาไทยรองรบส าหรบผทตองการศกษาและใชงาน เชนhttpwwwmambohubcom
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
11
ท าไมถงใช Joomla 1 ใชงาย 2 ทรงพลง 3 เปดเผยโคด (ไมตองเสยคาลขสทธโคด แจกจายตว Joomla ใหใครกได) 4 รองรบเวบขนาดใหญ 5 ฟร(ถาลงมอท าเอง) 6 ลขสทธเปนแบบ GNUGPL 7 ค าวา Joomla เปน TM (Trade mark) ของ OSM 8 ตวอยางกอนและหลงออกแบบดวย Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
12
เชน การก าหนดหวขอ ขนาดตวอกษร ส งายตอการก าหนดรปแบบ
AppServ คอโปรแกรมทรวบรวมเอา Open Source Software หลายๆอยางมารวมเขาไว ดวยกน โดยม Package หลกๆดงน - Apache - PHP
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
13
- MySQL - phpMyAdmin Appserv แตละเวอรชนจะได ตวเวอรชนของโปรแกรมภายใน package ทแตกตางกนไป เราสามารถท าการตดตง Appserv เพยงหนง แตสามารถลงโปรแกรมทตดมาไดทงหมดในคราวเดยว และยง set คา config ตางๆใหเสรจสน โดยปกตทกโปรแกรมทตดมากจะพรอมใชงานทนทดวย เปนทางเลอกหนงในการใชงานทสะดวกรวดเรว AppServ ใชเปนชดโปรแกรมทท าการตดต งไวเพอการทดสอบหรอใชงานภาษาในการ พฒนาโปรแกรม พฒนาระบบตางๆ หรอเวบไซท โดยปกตใช Apache เปน Web Server จ าลองการใชงานเสมอนอยบนอนเตอรเนต ในการใชงานภาษาท สามารถรองรบได ใช PHP เพอใหสามารถใชงานภาษา PHP และใชบน Web Server ได ใช MySQL เปน Database Server เพอใหภาษาscript ตางๆ ทรองรบสามารถสรางหรอตดตอ กบ Database ได ใช phpMyAdmin เพอเปนตวชวยในการตดตอ สราง ใชงาน Database ไดงายขน และโปรแกรมทตดมากบ Appserv นเองสามารถท าใหเราใชงานภาษา PHP HTML หรอภาษาตางๆ ซงสามารถน าไปใช เชน สามารถใช เขยนโปรแกรมตางๆทจ าเปนตองมการใชงาน บน Web Server หรอ เขยนเวบไซทแบบงายๆ จนถงเวบไซททมการใชงานโดยเชอมตอ Database เปนตน
การสมครสมาชก wwwcloudaccessnet เลอก Try Joomla เพอขอใชพนทชวคราว
นกเรยนจะไดรบ Web Server User name password นกเรยนไมตองลง Joomla เอง ใหนกเรยนทดลองเขาเวบของตนเองทรบจาก cloudaccess
เนอหาสาระประกอบดวย การสรางฐานขอมล บน Web Server ตวอยาง URL และ Database ทครก าหนดใหบน Server ของนกเรยน เชน
URL http10202022m6412 DATABASE m64_12 1 ตดตง Joomla โดยพมพ http10202022m6412joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
14
2 กดป มถดไปตรวจสอบระบบถามขอแนะน าในการตดตงใหด าเนนการดงน
-ใหท าการปดโปรแกรมท error อย 2 ตว โดยการกดป ม Start แลวพมพ php - เลอก PHP Edit the phpini Configuration File
- คนหาค าทตองการแกไข error ทเกดขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
15
แลวท างาน restart programe โดยคลกทป ม Start แลวพมพค าวา Restart apache panel -gtRun as Administrator
แกไขโดยใส ( remark) และเอา ออก ทงหมด 4 บรรทด ใหเหมอนตวอยางดานลาง ดงน
error_reporting = E_ALL amp ~E_NOTICE error_reporting = E_COMPILE_ERROR|E_ERROR|E_CORE_ERROR display_errors = Off register_globals = Off แลว กด File-gt Save เพอบนทกเพอใหโปรแกรมใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
16
จะปรากฏหนาจอดงน
- กดตรวจสอบอกครง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
17
ผลทไดใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
18
3 ขอมลลขสทธ กดป มถดไป
4 ก าหนดขอมลพนฐานขอมล
- ใสชอโฮสต = localhost - ใสชอผใชฐานขอมล = root
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
19
- ใสรหสผานผใชฐานขอมล =helliphelliphelliphelliphellip ตองจ าใหได - ชอฐานขอมลตามทสรางฐานขอมลไว (ครก าหนดให)เชน m64_12
5 การตงคาระบบ FTP ใหกด
6 ก าหนดคาระหบบหลก ไดแกการตงชอเวบไซต รหสผดแลระบบ และการก าหนดโครงหนาเวบ
- รหสผานผดแลระบบ ตองจ าใหได - ถาตองการขอมลโครงสรางหนาเวบตวอยางใหกดทป ม ตดตงขอมลตวอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
20
- ถาไมตองการขอมลตวอยางจะปรากฏหนาตางนขนมา
7 เสรจสนการตดตง Joomla ใหท าการเปลยนชอหรอลบโฟลเดอร Cappservwwwjoomlainstallation เพอปองกนคนอนลงทบ ตวอยางหนาเวบทได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
21
การปรบแกเวบไซต สวน Back End เชน URL Web ของนกเรยน คอ http10102022m6412 ใหพมพ administrator ตอทายดงน
http10202022m6412administrator
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
3
อะไรกไดแลวจะมป มให Add ภาพลงไปได หรอจะถายรปจรง จากดานบนทสง แลวตกแตง แลวน า Add เขามา โดยจะสราง Component ทสามารถลากโตะ มาวางบนหนาจอได ทงยงเมอคลกเขาไปแลวกสามารถเขาไปเปลยนแปลงเบอรโตะ ขนาดโตะ(ไมจ าเปนตองใสตรงตามความจรงกได เพราะรปทน ามาใสอาจจะไมพอดกบจ านวนโตะถาใสขนาดตามความจรง) สโตะ รปรางโตะ(กลม กบ สเหลยม) จ านวนคนนง ฯลฯ สวนดานซายทมขนาดเลกกวาเปนหนาตางทแสดงผลสถานะของโตะทก าลงรบประทานอาหาร หรอก าลงรอเงนทอน เปนตน ทงยงมรวมยอดขาย รวมโตะ ของวนนอกดวย InputOutput specification Input การรบคาจาก Mouse และ Keyboard ทคลกลงไปในสวนตางๆ ของโปรแกรม ทน าไปประมวลผล ตางๆ ภายในโปรแกรม Output การแสดงผลออกทางหนาจอ monitor 5 แผนปฏบตงาน
ล าดบท กจกรรม เดอนท 1 เดอนท 2 เดอนท 3 เดอนท 4
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
1 ศกษาระบบในรานอาหาร
2 ออกแบบรายละเอยดของโปรแกรม
3 ศกษาการเขยนโปรแกรมดวยDelphi
4 ออกแบบโครงสรางของซอฟตแวร
5 พฒนาซอฟตแวร
6 ทดสอบและแกไขโปรแกรม
7 ท ารายงาน และคมอการใชโปรแกรม
6 ผลทคาดวาจะไดรบ bdquo ซอฟตแวรโปรแกรมประยกตระบบจดการรานอาหาร bdquo ความสามารถในการพฒนาโปรแกรมดวยซอฟตแวร Delphi
7 เอกสารอางอง
o หนงสอ เรมตนอยางมออาชพดวย Delphi 7 ฉบบสมบรณ โดย สจจะ จรสรงรววร จาก Dev Book
o หนงสอ การเขยนโปรแกรมภาษา Delphi จาก สยามคอมพวเตอร
o หนงสอ เรมตนอยางมออาชพดวย Delphi 5 ฉบบสมบรณ โดย สจจะ จรสรงรววร จาก Inf
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
4
ใบงาน
เรอง น าเสนอขอเสนอโครงงานคอมพวเตอร
ชอ-สกลเลขทชน
1 ใหนกเรยนแตละกลมเตรยมน าเสนอขอเสนอโครงงานคอมพวเตอร ตามเกณฑการประเมนดงน 11 ดานความสมบรณของขอเสนอโครงการ ขอเสนอโครงงานมรปแบบและหวขอครบถวน สามารถสอสารใหผอานเขาใจได ใชภาษาไดถกตอง มภาพ ตาราง หรอ ตวอยางประกอบท าใหสอไดชดเจน 12 ดานความยากงายในการพฒนา เทคนคทใชมความซบซอน หรอ ขนสง เทคโนโลยใหมและมประสทธภาพ มคณคาในเชงงานพฒนาหรอการวจย หรอใชเทคนคทไมซบซอนมาก แตถายทอดไดนาสนใจ 13 ดานความคดสรางสรรค เปนหวขอทนาสนใจ แปลก ใหม ยงไมมผพฒนาหรอคดคนมากอน หรอ มผพฒนามาแลว แตน าเสนอหรอพฒนาในแนวทางทแตกตางออกไป 14 ดานประโยชนใชงาน สามารถน าไปใชงานไดจรง มผลกระทบตอเศรษฐกจและสงคมในวงกวาง สามารถน าไปผลตในเชงพาณชยได สามารถน าไปพฒนาตอยอดได 15 ดานความนาจะพฒนาโครงการไดเสรจตามก าหนด ขอบเขตงาน สามารถพฒนาไดเสรจ ภายในระยะเวลาทก าหนด 4 เดอน ส าหรบงานใหม หรอ งานทพฒนาตอยอดจากงานเดมกตาม
2 ขณะน าเสนอนกเรยนจะไดรบการประเมนจากครและเพอน โดยใช รปแบบประเมนดงน
กลมท ชอโครงงงาน ความสมบรณ ของขอเสนอ
20
ความยากงาย ในการพฒนา
20
ความคดสรางสรรค
25
ประโยชน 20
ความนาจะ พฒนาไดเสรจ
15
รวม 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
5
เนอหาสาระ โครงสรางภาษา HTML ประกอบดวย
โครงสรางภาษา HTML lthtmlgt ltheadgt lttitlegtขอความทตองการใหแสดงบนไตเตลบาร lttitlegt ltheadgt
ltbodygt ค าสงและขอความใหแสดงบน browser ltbodygt lthtmlgt
ขนตอนการสรางเวบ 1 ท าเวบเพออะไร เลอกใชเครองมออะไรด (HTML Dreamweaver Joomla Drupal
Wordpress hellip) 2 วางแผนโครงสราง และ Usability ค านงถงผใชใหสามารถเขาถงขอมลไดอยางงาย 3 การออกแบบ Design ท าใหมความนาเชอถอ ยงใหญ ดด Look and Fill 4 การประชาสมพนธ วางแผนวาจะใชวธไหน เชน นามบตร ออก Event แลกลงคกบ
เวบไซตอน (Referral Links จายเงนโฆษณา (pay per click เมอมคนคลกมากจายเงนมาก) Email (return visitors)
ประเภทการสรางเวบ 1 Text Editor 2 Web Editor 3 CMS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
6
ใบความร
ประเภทของ CMS ในการสราง website
bull Blogs ndash บลอก หรอ เวบบลอก (weblog) เปนเวบประเภทหนงทถกสรางขนมาเพอใชเปนเครองมอในสอสารรปแบบใหม ไมวาจะเปนการประกาศขาวสาร การแสดงความคดเหน การเผยแพรผลงาน ฯลฯ (เหมอนกบ Whatrsquos new นนแหละ) และก าลงเปนทนยมมากขนเรอย ๆ โดยขณะนไดมผใหบรการบลอกมากมาย ทงแบบใหบรการฟร และเสยคาใชจาย โดยค าวา blog ยอมาจากค าวา weblog หรอ web log ซงค าวา weblog นนกมาจาก web (เวลดไวดเวบ) และ log (ปม บนทก) รวมกนหมายถง บนทกบนเวลดไวดเวบ นนเอง ตวบลอกน นจะออกแบบมาใหสามารถใชงานไดงายไมจ าเปนตองใชความรทางดาน HTML มากนก เนองจากมการออกแบบเครองมอใหเปนแบบ WYSIWYG editor (what you see it what you get) ซงเครองมอทดและเขาใจงาย ๆ คลายกบเครองมอหรอสญลกษณในโปรแกรมการพมพงานทวๆ ไป ท าใหผทสรางเอกสารสามารถท าไดดวยความรวดเรว
bull E-Commerce (อคอมเมรซ) ‟ เปน CMS สวนของการท ารานคา Online สามารถทจะใชในการซอของ ซงสามารถทจะเพมรายการสนคา ราคา ท าหนารานได ก าลงไดรบความนยมขนมาเรอยๆ
bull E-Learning ‟ เปน CMS ทใชในการท างานสอการเรยนการสอน หรอ CAI แตสามารถทจะท าเปนระบบ online ได เหมาะส าหรบนกเรยน คร อาจารย หรอสถานศกษาตางๆ สามารถสรางแบบทดสอบตางๆ ได แตในบานเรายงไมแพรหลายนก เนองจากคนทท าตองมความรในเรองของเวบไซตและการจดการเนอหาอยพอสมควร
bull Forums (กระดานขาว) ‟ เปน CMS ทใชในการตงกระทถามตอบปญหาหรอท าเปนชมชนตางๆ โดยจะมการแบงเปนหวขอหรอหมวดตางๆ ตามความสนใจของผเขาชม ซงสวนมากแลวตวForums นมกจะไปผกกบตว CMS อนๆ เขาไวดวยกน แตในขณะเดยวกนนนผใชงานกสามารถทจะตดตงใชงาน Forums แบบเพรยวๆ กไดเหมอนกน
bull Groupware ‟ เปน CMS ทออกแบบมาเพอทจะชวยการท างานในองคหรอหนวยงานใหมความสมพนธกน และมความรวดเรวในการท างาน สามารถทจะชวยเหลอกน สามารถท างานเปนทมและควบคมการท างานได โดยการท างานกจะผานระบบเนตเวรคหรออเมลลหรอระบบเวบออนไลนซงการตดตอสอสารนนกจะสามารถตดตดไดเปนกลมๆ หรอเฉพาะบคคลกได พรอมทงขอมลทตองการแจงสามารถใชเปนรปภาพ ขอความ หรออนๆ ได แลวแตวาความสามารถของ Groupware CMS จะท าไดขนาดไหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
7
bull Image Galleries (อลบมภาพ) ‟ เปน CMS ทก าลงไดรบความนยมอกตวหนงเลยกวาไดโดย CMS ประเภทนจะใชในการจดการอลบมภาพหรอท า Galleries กจะมฟงกชนในการใชงานโดยการแบงเปนหมวดหมของภาพ สามารถก าหนดขนาดภาพ ขนาดไฟล หรอบางตวสามารถทจะท าการยอภาพลงมาตามทก าหนดไดเอง หรอท าเปน Thumbnail กได
bull Portals (CMS) ‟ เปน CMS ทเปนหนาตาหลกของเวบไซตเลยกวาได ซงการท างานนนกอาจจะท างานดวยตวของมนเองได แตในขณะเดยวกนกสามารถทจะเอาตวอนๆ เขามารวมผนวกเพมไปได เชน CMS ตวนกจะมสวนของการจดการเนอหาอย แตกจะม Forums (กระดานขาว) หรอImage Galleries (อลบมภาพ) ผนวกเขาไปดวยเพอท าใหผใชงานนนสามารถใชงานไดสะดวกมากยงขน
bull วก (Wiki) คอ เวบไซตทอนญาตใหผใช เพมและแกไขเนอหาไดโดยงาย เหมอนกบการเขยนบทความรวมกน ค าวา ldquoวกrdquo น ยงสามารถใชหมายถงซอฟตแวรทใชเพอสรางเวบไซตดงกลาวอกดวย ลกษณะของตววกจะออกไปแนวสารานกรมหรอแหลงความรจ านวนมากๆ มากกวา โดยจะเปนการระดมความเหนจากหลายๆ คนมาใชงาน ซงตวอยางของไทยกสามารถเขาไปดไดท httpthwikipediaorg
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
8
ชอ ndash นามสกล เลขท ชน
ใบงาน
ประเภทของ CMS ในการสราง website ค าสง จงอธบายความหมายและหนาทของประภท CMS ตอไปน bull Blogs ndash บลอก หรอ เวบบลอก (weblog) bull E-Commerce (อคอมเมรซ)
bull E-Learning
bull Forums (กระดานขาว)
bull Groupware
bull Image Galleries (อลบมภาพ)
bull Portals (CMS) bull วก (Wiki)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
9
เนอหาสาระ การสรางแบบจ าลองหนาเวบ ประกอบดวย Site map สรางแปลนของเวบไซต แปลนของเวบไซตจะเปนตวบงบอกวาเวบไซตนนจะมทงหมดกหนา การเชอมโยงระหวางแตละหนาเปนอยางไร ภายในหนานนมรายละเอยดเปนอยางไรบาง โดยในการสรางแปลนของเวบไซตจะม 2 ขนตอน คอ
ตวอยางการสราง Site map
Mock up แบบจ าลองหนาเวบ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
10
เนอหาสาระ เรอง ความเปนมาของระบบ CMS CMS คออะไร
CMS ยอมาจาก Content Management System เปนระบบทน ามาชวยในการสรางและบรหารเวบไซตแบบส าเรจรป โดยในการใชงาน CMS นนผใชงานแทบไมตองมความรในดานการเขยนโปรแกรม กสามารถสรางเวบไซตได ตวของ CMS เองจะมโปรแกรมแถมมาและสามารถแทรกเองไดมากมายเชน webboard ระบบจดการปายโฆษณา ระบบนบจ านวนผชม แมแตกระทงตระกราสนคา และอนๆอกมากมาย
CMS เปนเหมอนโปรแกรม โปรแกรมหนง ทมผพฒนามาจากภาษาคอมพวเตอรทใชในเวบไซตเชน PHP Python ASP JSP ซงในปจจบนมคนใจดพฒนา CMS ฟรขนมามากมายอยางเชน Mambo Joomla Wordpress
แนนอนวาผพฒนาระบบ CMS ฟร ทกลาวมาขางตนนนลวนเปนมออาชพทมฝมอในเรองของ เวบไซตเปนอยางยง ท งการเขยนโปรแกรมทรดกม การออกแบบเนวเกชนทด ท าใหภาพรวมของเวบไซตทใช CMS นนออกมาในแนวมออาชพอยางมาก ขอดของ CMS
1 ผใชงานไมจ าเปนตองมความรเรองการท าเวบไซต เพยงแคเคยพมพ หรอเคยโพสขอความในอนเทอรเนต กสามารถมเวบไซตเปนของตวเองได
2 ไมเสยเวลาในการพฒนาเวบไซต ไมเสยเงนจ านวนมาก 3 งายตอการดแล เพราะมระบบจดการทกอยางใหเราหมด 4 มระบบจดการทเราสามารถหามาใสเพมไดมากมาย อยางเชน ระบบแกลลอร 5 สามารถเปลยนหนาตาเวบไซตไดงายๆ เพยงแคโหลดทม (Theme) ของ CMS นนๆ ขอเสยของ CMS
1ในกรณทผใชตองการออกแบบทม (หนาตาของเวบ) เอง จะตองใชความรมากกวาปรกต เนองจาก CMS มหลายๆระบบมารวมกนท าให เ กดความยงยาก ส าหรบผ ท ไ ม มความ ร 2ผใชจะตองศกษาระบบ CMS ทผพฒนาสรางขนมา เชนจะตองใสขอความลงตรงไหน จะตองแทรกภาพอยางไร ซงจะล าบากเพยงแคชวงแรกเทานน
3ในการใชงานจรงนนจะมความยงยากในการ set up ครงแรกกบ web server แตปจจบนกมผ บรการ web server มากมายทเสนอลงและ set up ระบบ CMS ใหฟรๆโดยไมเสยคาใชจาย
เมอรวมๆขอดและขอเสยดแลว กยงเหนไดวา CMS นนกเปนระบบทนาใชงานอยด แนะน า CMS - Mambo CMS ตวนมผใชงานมากมายทงในหนวยงานของรฐ และผคนทวไป ท าใหมคนใหเราสามารถปรกษาไดมาก รวมถงตวระบบเองกใชงานไดงาย และมผพฒนาอยตลอดเวลา มเวบไซตภาษาไทยรองรบส าหรบผทตองการศกษาและใชงาน เชนhttpwwwmambohubcom
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
11
ท าไมถงใช Joomla 1 ใชงาย 2 ทรงพลง 3 เปดเผยโคด (ไมตองเสยคาลขสทธโคด แจกจายตว Joomla ใหใครกได) 4 รองรบเวบขนาดใหญ 5 ฟร(ถาลงมอท าเอง) 6 ลขสทธเปนแบบ GNUGPL 7 ค าวา Joomla เปน TM (Trade mark) ของ OSM 8 ตวอยางกอนและหลงออกแบบดวย Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
12
เชน การก าหนดหวขอ ขนาดตวอกษร ส งายตอการก าหนดรปแบบ
AppServ คอโปรแกรมทรวบรวมเอา Open Source Software หลายๆอยางมารวมเขาไว ดวยกน โดยม Package หลกๆดงน - Apache - PHP
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
13
- MySQL - phpMyAdmin Appserv แตละเวอรชนจะได ตวเวอรชนของโปรแกรมภายใน package ทแตกตางกนไป เราสามารถท าการตดตง Appserv เพยงหนง แตสามารถลงโปรแกรมทตดมาไดทงหมดในคราวเดยว และยง set คา config ตางๆใหเสรจสน โดยปกตทกโปรแกรมทตดมากจะพรอมใชงานทนทดวย เปนทางเลอกหนงในการใชงานทสะดวกรวดเรว AppServ ใชเปนชดโปรแกรมทท าการตดต งไวเพอการทดสอบหรอใชงานภาษาในการ พฒนาโปรแกรม พฒนาระบบตางๆ หรอเวบไซท โดยปกตใช Apache เปน Web Server จ าลองการใชงานเสมอนอยบนอนเตอรเนต ในการใชงานภาษาท สามารถรองรบได ใช PHP เพอใหสามารถใชงานภาษา PHP และใชบน Web Server ได ใช MySQL เปน Database Server เพอใหภาษาscript ตางๆ ทรองรบสามารถสรางหรอตดตอ กบ Database ได ใช phpMyAdmin เพอเปนตวชวยในการตดตอ สราง ใชงาน Database ไดงายขน และโปรแกรมทตดมากบ Appserv นเองสามารถท าใหเราใชงานภาษา PHP HTML หรอภาษาตางๆ ซงสามารถน าไปใช เชน สามารถใช เขยนโปรแกรมตางๆทจ าเปนตองมการใชงาน บน Web Server หรอ เขยนเวบไซทแบบงายๆ จนถงเวบไซททมการใชงานโดยเชอมตอ Database เปนตน
การสมครสมาชก wwwcloudaccessnet เลอก Try Joomla เพอขอใชพนทชวคราว
นกเรยนจะไดรบ Web Server User name password นกเรยนไมตองลง Joomla เอง ใหนกเรยนทดลองเขาเวบของตนเองทรบจาก cloudaccess
เนอหาสาระประกอบดวย การสรางฐานขอมล บน Web Server ตวอยาง URL และ Database ทครก าหนดใหบน Server ของนกเรยน เชน
URL http10202022m6412 DATABASE m64_12 1 ตดตง Joomla โดยพมพ http10202022m6412joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
14
2 กดป มถดไปตรวจสอบระบบถามขอแนะน าในการตดตงใหด าเนนการดงน
-ใหท าการปดโปรแกรมท error อย 2 ตว โดยการกดป ม Start แลวพมพ php - เลอก PHP Edit the phpini Configuration File
- คนหาค าทตองการแกไข error ทเกดขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
15
แลวท างาน restart programe โดยคลกทป ม Start แลวพมพค าวา Restart apache panel -gtRun as Administrator
แกไขโดยใส ( remark) และเอา ออก ทงหมด 4 บรรทด ใหเหมอนตวอยางดานลาง ดงน
error_reporting = E_ALL amp ~E_NOTICE error_reporting = E_COMPILE_ERROR|E_ERROR|E_CORE_ERROR display_errors = Off register_globals = Off แลว กด File-gt Save เพอบนทกเพอใหโปรแกรมใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
16
จะปรากฏหนาจอดงน
- กดตรวจสอบอกครง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
17
ผลทไดใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
18
3 ขอมลลขสทธ กดป มถดไป
4 ก าหนดขอมลพนฐานขอมล
- ใสชอโฮสต = localhost - ใสชอผใชฐานขอมล = root
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
19
- ใสรหสผานผใชฐานขอมล =helliphelliphelliphelliphellip ตองจ าใหได - ชอฐานขอมลตามทสรางฐานขอมลไว (ครก าหนดให)เชน m64_12
5 การตงคาระบบ FTP ใหกด
6 ก าหนดคาระหบบหลก ไดแกการตงชอเวบไซต รหสผดแลระบบ และการก าหนดโครงหนาเวบ
- รหสผานผดแลระบบ ตองจ าใหได - ถาตองการขอมลโครงสรางหนาเวบตวอยางใหกดทป ม ตดตงขอมลตวอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
20
- ถาไมตองการขอมลตวอยางจะปรากฏหนาตางนขนมา
7 เสรจสนการตดตง Joomla ใหท าการเปลยนชอหรอลบโฟลเดอร Cappservwwwjoomlainstallation เพอปองกนคนอนลงทบ ตวอยางหนาเวบทได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
21
การปรบแกเวบไซต สวน Back End เชน URL Web ของนกเรยน คอ http10102022m6412 ใหพมพ administrator ตอทายดงน
http10202022m6412administrator
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
4
ใบงาน
เรอง น าเสนอขอเสนอโครงงานคอมพวเตอร
ชอ-สกลเลขทชน
1 ใหนกเรยนแตละกลมเตรยมน าเสนอขอเสนอโครงงานคอมพวเตอร ตามเกณฑการประเมนดงน 11 ดานความสมบรณของขอเสนอโครงการ ขอเสนอโครงงานมรปแบบและหวขอครบถวน สามารถสอสารใหผอานเขาใจได ใชภาษาไดถกตอง มภาพ ตาราง หรอ ตวอยางประกอบท าใหสอไดชดเจน 12 ดานความยากงายในการพฒนา เทคนคทใชมความซบซอน หรอ ขนสง เทคโนโลยใหมและมประสทธภาพ มคณคาในเชงงานพฒนาหรอการวจย หรอใชเทคนคทไมซบซอนมาก แตถายทอดไดนาสนใจ 13 ดานความคดสรางสรรค เปนหวขอทนาสนใจ แปลก ใหม ยงไมมผพฒนาหรอคดคนมากอน หรอ มผพฒนามาแลว แตน าเสนอหรอพฒนาในแนวทางทแตกตางออกไป 14 ดานประโยชนใชงาน สามารถน าไปใชงานไดจรง มผลกระทบตอเศรษฐกจและสงคมในวงกวาง สามารถน าไปผลตในเชงพาณชยได สามารถน าไปพฒนาตอยอดได 15 ดานความนาจะพฒนาโครงการไดเสรจตามก าหนด ขอบเขตงาน สามารถพฒนาไดเสรจ ภายในระยะเวลาทก าหนด 4 เดอน ส าหรบงานใหม หรอ งานทพฒนาตอยอดจากงานเดมกตาม
2 ขณะน าเสนอนกเรยนจะไดรบการประเมนจากครและเพอน โดยใช รปแบบประเมนดงน
กลมท ชอโครงงงาน ความสมบรณ ของขอเสนอ
20
ความยากงาย ในการพฒนา
20
ความคดสรางสรรค
25
ประโยชน 20
ความนาจะ พฒนาไดเสรจ
15
รวม 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
5
เนอหาสาระ โครงสรางภาษา HTML ประกอบดวย
โครงสรางภาษา HTML lthtmlgt ltheadgt lttitlegtขอความทตองการใหแสดงบนไตเตลบาร lttitlegt ltheadgt
ltbodygt ค าสงและขอความใหแสดงบน browser ltbodygt lthtmlgt
ขนตอนการสรางเวบ 1 ท าเวบเพออะไร เลอกใชเครองมออะไรด (HTML Dreamweaver Joomla Drupal
Wordpress hellip) 2 วางแผนโครงสราง และ Usability ค านงถงผใชใหสามารถเขาถงขอมลไดอยางงาย 3 การออกแบบ Design ท าใหมความนาเชอถอ ยงใหญ ดด Look and Fill 4 การประชาสมพนธ วางแผนวาจะใชวธไหน เชน นามบตร ออก Event แลกลงคกบ
เวบไซตอน (Referral Links จายเงนโฆษณา (pay per click เมอมคนคลกมากจายเงนมาก) Email (return visitors)
ประเภทการสรางเวบ 1 Text Editor 2 Web Editor 3 CMS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
6
ใบความร
ประเภทของ CMS ในการสราง website
bull Blogs ndash บลอก หรอ เวบบลอก (weblog) เปนเวบประเภทหนงทถกสรางขนมาเพอใชเปนเครองมอในสอสารรปแบบใหม ไมวาจะเปนการประกาศขาวสาร การแสดงความคดเหน การเผยแพรผลงาน ฯลฯ (เหมอนกบ Whatrsquos new นนแหละ) และก าลงเปนทนยมมากขนเรอย ๆ โดยขณะนไดมผใหบรการบลอกมากมาย ทงแบบใหบรการฟร และเสยคาใชจาย โดยค าวา blog ยอมาจากค าวา weblog หรอ web log ซงค าวา weblog นนกมาจาก web (เวลดไวดเวบ) และ log (ปม บนทก) รวมกนหมายถง บนทกบนเวลดไวดเวบ นนเอง ตวบลอกน นจะออกแบบมาใหสามารถใชงานไดงายไมจ าเปนตองใชความรทางดาน HTML มากนก เนองจากมการออกแบบเครองมอใหเปนแบบ WYSIWYG editor (what you see it what you get) ซงเครองมอทดและเขาใจงาย ๆ คลายกบเครองมอหรอสญลกษณในโปรแกรมการพมพงานทวๆ ไป ท าใหผทสรางเอกสารสามารถท าไดดวยความรวดเรว
bull E-Commerce (อคอมเมรซ) ‟ เปน CMS สวนของการท ารานคา Online สามารถทจะใชในการซอของ ซงสามารถทจะเพมรายการสนคา ราคา ท าหนารานได ก าลงไดรบความนยมขนมาเรอยๆ
bull E-Learning ‟ เปน CMS ทใชในการท างานสอการเรยนการสอน หรอ CAI แตสามารถทจะท าเปนระบบ online ได เหมาะส าหรบนกเรยน คร อาจารย หรอสถานศกษาตางๆ สามารถสรางแบบทดสอบตางๆ ได แตในบานเรายงไมแพรหลายนก เนองจากคนทท าตองมความรในเรองของเวบไซตและการจดการเนอหาอยพอสมควร
bull Forums (กระดานขาว) ‟ เปน CMS ทใชในการตงกระทถามตอบปญหาหรอท าเปนชมชนตางๆ โดยจะมการแบงเปนหวขอหรอหมวดตางๆ ตามความสนใจของผเขาชม ซงสวนมากแลวตวForums นมกจะไปผกกบตว CMS อนๆ เขาไวดวยกน แตในขณะเดยวกนนนผใชงานกสามารถทจะตดตงใชงาน Forums แบบเพรยวๆ กไดเหมอนกน
bull Groupware ‟ เปน CMS ทออกแบบมาเพอทจะชวยการท างานในองคหรอหนวยงานใหมความสมพนธกน และมความรวดเรวในการท างาน สามารถทจะชวยเหลอกน สามารถท างานเปนทมและควบคมการท างานได โดยการท างานกจะผานระบบเนตเวรคหรออเมลลหรอระบบเวบออนไลนซงการตดตอสอสารนนกจะสามารถตดตดไดเปนกลมๆ หรอเฉพาะบคคลกได พรอมทงขอมลทตองการแจงสามารถใชเปนรปภาพ ขอความ หรออนๆ ได แลวแตวาความสามารถของ Groupware CMS จะท าไดขนาดไหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
7
bull Image Galleries (อลบมภาพ) ‟ เปน CMS ทก าลงไดรบความนยมอกตวหนงเลยกวาไดโดย CMS ประเภทนจะใชในการจดการอลบมภาพหรอท า Galleries กจะมฟงกชนในการใชงานโดยการแบงเปนหมวดหมของภาพ สามารถก าหนดขนาดภาพ ขนาดไฟล หรอบางตวสามารถทจะท าการยอภาพลงมาตามทก าหนดไดเอง หรอท าเปน Thumbnail กได
bull Portals (CMS) ‟ เปน CMS ทเปนหนาตาหลกของเวบไซตเลยกวาได ซงการท างานนนกอาจจะท างานดวยตวของมนเองได แตในขณะเดยวกนกสามารถทจะเอาตวอนๆ เขามารวมผนวกเพมไปได เชน CMS ตวนกจะมสวนของการจดการเนอหาอย แตกจะม Forums (กระดานขาว) หรอImage Galleries (อลบมภาพ) ผนวกเขาไปดวยเพอท าใหผใชงานนนสามารถใชงานไดสะดวกมากยงขน
bull วก (Wiki) คอ เวบไซตทอนญาตใหผใช เพมและแกไขเนอหาไดโดยงาย เหมอนกบการเขยนบทความรวมกน ค าวา ldquoวกrdquo น ยงสามารถใชหมายถงซอฟตแวรทใชเพอสรางเวบไซตดงกลาวอกดวย ลกษณะของตววกจะออกไปแนวสารานกรมหรอแหลงความรจ านวนมากๆ มากกวา โดยจะเปนการระดมความเหนจากหลายๆ คนมาใชงาน ซงตวอยางของไทยกสามารถเขาไปดไดท httpthwikipediaorg
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
8
ชอ ndash นามสกล เลขท ชน
ใบงาน
ประเภทของ CMS ในการสราง website ค าสง จงอธบายความหมายและหนาทของประภท CMS ตอไปน bull Blogs ndash บลอก หรอ เวบบลอก (weblog) bull E-Commerce (อคอมเมรซ)
bull E-Learning
bull Forums (กระดานขาว)
bull Groupware
bull Image Galleries (อลบมภาพ)
bull Portals (CMS) bull วก (Wiki)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
9
เนอหาสาระ การสรางแบบจ าลองหนาเวบ ประกอบดวย Site map สรางแปลนของเวบไซต แปลนของเวบไซตจะเปนตวบงบอกวาเวบไซตนนจะมทงหมดกหนา การเชอมโยงระหวางแตละหนาเปนอยางไร ภายในหนานนมรายละเอยดเปนอยางไรบาง โดยในการสรางแปลนของเวบไซตจะม 2 ขนตอน คอ
ตวอยางการสราง Site map
Mock up แบบจ าลองหนาเวบ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
10
เนอหาสาระ เรอง ความเปนมาของระบบ CMS CMS คออะไร
CMS ยอมาจาก Content Management System เปนระบบทน ามาชวยในการสรางและบรหารเวบไซตแบบส าเรจรป โดยในการใชงาน CMS นนผใชงานแทบไมตองมความรในดานการเขยนโปรแกรม กสามารถสรางเวบไซตได ตวของ CMS เองจะมโปรแกรมแถมมาและสามารถแทรกเองไดมากมายเชน webboard ระบบจดการปายโฆษณา ระบบนบจ านวนผชม แมแตกระทงตระกราสนคา และอนๆอกมากมาย
CMS เปนเหมอนโปรแกรม โปรแกรมหนง ทมผพฒนามาจากภาษาคอมพวเตอรทใชในเวบไซตเชน PHP Python ASP JSP ซงในปจจบนมคนใจดพฒนา CMS ฟรขนมามากมายอยางเชน Mambo Joomla Wordpress
แนนอนวาผพฒนาระบบ CMS ฟร ทกลาวมาขางตนนนลวนเปนมออาชพทมฝมอในเรองของ เวบไซตเปนอยางยง ท งการเขยนโปรแกรมทรดกม การออกแบบเนวเกชนทด ท าใหภาพรวมของเวบไซตทใช CMS นนออกมาในแนวมออาชพอยางมาก ขอดของ CMS
1 ผใชงานไมจ าเปนตองมความรเรองการท าเวบไซต เพยงแคเคยพมพ หรอเคยโพสขอความในอนเทอรเนต กสามารถมเวบไซตเปนของตวเองได
2 ไมเสยเวลาในการพฒนาเวบไซต ไมเสยเงนจ านวนมาก 3 งายตอการดแล เพราะมระบบจดการทกอยางใหเราหมด 4 มระบบจดการทเราสามารถหามาใสเพมไดมากมาย อยางเชน ระบบแกลลอร 5 สามารถเปลยนหนาตาเวบไซตไดงายๆ เพยงแคโหลดทม (Theme) ของ CMS นนๆ ขอเสยของ CMS
1ในกรณทผใชตองการออกแบบทม (หนาตาของเวบ) เอง จะตองใชความรมากกวาปรกต เนองจาก CMS มหลายๆระบบมารวมกนท าให เ กดความยงยาก ส าหรบผ ท ไ ม มความ ร 2ผใชจะตองศกษาระบบ CMS ทผพฒนาสรางขนมา เชนจะตองใสขอความลงตรงไหน จะตองแทรกภาพอยางไร ซงจะล าบากเพยงแคชวงแรกเทานน
3ในการใชงานจรงนนจะมความยงยากในการ set up ครงแรกกบ web server แตปจจบนกมผ บรการ web server มากมายทเสนอลงและ set up ระบบ CMS ใหฟรๆโดยไมเสยคาใชจาย
เมอรวมๆขอดและขอเสยดแลว กยงเหนไดวา CMS นนกเปนระบบทนาใชงานอยด แนะน า CMS - Mambo CMS ตวนมผใชงานมากมายทงในหนวยงานของรฐ และผคนทวไป ท าใหมคนใหเราสามารถปรกษาไดมาก รวมถงตวระบบเองกใชงานไดงาย และมผพฒนาอยตลอดเวลา มเวบไซตภาษาไทยรองรบส าหรบผทตองการศกษาและใชงาน เชนhttpwwwmambohubcom
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
11
ท าไมถงใช Joomla 1 ใชงาย 2 ทรงพลง 3 เปดเผยโคด (ไมตองเสยคาลขสทธโคด แจกจายตว Joomla ใหใครกได) 4 รองรบเวบขนาดใหญ 5 ฟร(ถาลงมอท าเอง) 6 ลขสทธเปนแบบ GNUGPL 7 ค าวา Joomla เปน TM (Trade mark) ของ OSM 8 ตวอยางกอนและหลงออกแบบดวย Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
12
เชน การก าหนดหวขอ ขนาดตวอกษร ส งายตอการก าหนดรปแบบ
AppServ คอโปรแกรมทรวบรวมเอา Open Source Software หลายๆอยางมารวมเขาไว ดวยกน โดยม Package หลกๆดงน - Apache - PHP
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
13
- MySQL - phpMyAdmin Appserv แตละเวอรชนจะได ตวเวอรชนของโปรแกรมภายใน package ทแตกตางกนไป เราสามารถท าการตดตง Appserv เพยงหนง แตสามารถลงโปรแกรมทตดมาไดทงหมดในคราวเดยว และยง set คา config ตางๆใหเสรจสน โดยปกตทกโปรแกรมทตดมากจะพรอมใชงานทนทดวย เปนทางเลอกหนงในการใชงานทสะดวกรวดเรว AppServ ใชเปนชดโปรแกรมทท าการตดต งไวเพอการทดสอบหรอใชงานภาษาในการ พฒนาโปรแกรม พฒนาระบบตางๆ หรอเวบไซท โดยปกตใช Apache เปน Web Server จ าลองการใชงานเสมอนอยบนอนเตอรเนต ในการใชงานภาษาท สามารถรองรบได ใช PHP เพอใหสามารถใชงานภาษา PHP และใชบน Web Server ได ใช MySQL เปน Database Server เพอใหภาษาscript ตางๆ ทรองรบสามารถสรางหรอตดตอ กบ Database ได ใช phpMyAdmin เพอเปนตวชวยในการตดตอ สราง ใชงาน Database ไดงายขน และโปรแกรมทตดมากบ Appserv นเองสามารถท าใหเราใชงานภาษา PHP HTML หรอภาษาตางๆ ซงสามารถน าไปใช เชน สามารถใช เขยนโปรแกรมตางๆทจ าเปนตองมการใชงาน บน Web Server หรอ เขยนเวบไซทแบบงายๆ จนถงเวบไซททมการใชงานโดยเชอมตอ Database เปนตน
การสมครสมาชก wwwcloudaccessnet เลอก Try Joomla เพอขอใชพนทชวคราว
นกเรยนจะไดรบ Web Server User name password นกเรยนไมตองลง Joomla เอง ใหนกเรยนทดลองเขาเวบของตนเองทรบจาก cloudaccess
เนอหาสาระประกอบดวย การสรางฐานขอมล บน Web Server ตวอยาง URL และ Database ทครก าหนดใหบน Server ของนกเรยน เชน
URL http10202022m6412 DATABASE m64_12 1 ตดตง Joomla โดยพมพ http10202022m6412joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
14
2 กดป มถดไปตรวจสอบระบบถามขอแนะน าในการตดตงใหด าเนนการดงน
-ใหท าการปดโปรแกรมท error อย 2 ตว โดยการกดป ม Start แลวพมพ php - เลอก PHP Edit the phpini Configuration File
- คนหาค าทตองการแกไข error ทเกดขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
15
แลวท างาน restart programe โดยคลกทป ม Start แลวพมพค าวา Restart apache panel -gtRun as Administrator
แกไขโดยใส ( remark) และเอา ออก ทงหมด 4 บรรทด ใหเหมอนตวอยางดานลาง ดงน
error_reporting = E_ALL amp ~E_NOTICE error_reporting = E_COMPILE_ERROR|E_ERROR|E_CORE_ERROR display_errors = Off register_globals = Off แลว กด File-gt Save เพอบนทกเพอใหโปรแกรมใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
16
จะปรากฏหนาจอดงน
- กดตรวจสอบอกครง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
17
ผลทไดใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
18
3 ขอมลลขสทธ กดป มถดไป
4 ก าหนดขอมลพนฐานขอมล
- ใสชอโฮสต = localhost - ใสชอผใชฐานขอมล = root
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
19
- ใสรหสผานผใชฐานขอมล =helliphelliphelliphelliphellip ตองจ าใหได - ชอฐานขอมลตามทสรางฐานขอมลไว (ครก าหนดให)เชน m64_12
5 การตงคาระบบ FTP ใหกด
6 ก าหนดคาระหบบหลก ไดแกการตงชอเวบไซต รหสผดแลระบบ และการก าหนดโครงหนาเวบ
- รหสผานผดแลระบบ ตองจ าใหได - ถาตองการขอมลโครงสรางหนาเวบตวอยางใหกดทป ม ตดตงขอมลตวอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
20
- ถาไมตองการขอมลตวอยางจะปรากฏหนาตางนขนมา
7 เสรจสนการตดตง Joomla ใหท าการเปลยนชอหรอลบโฟลเดอร Cappservwwwjoomlainstallation เพอปองกนคนอนลงทบ ตวอยางหนาเวบทได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
21
การปรบแกเวบไซต สวน Back End เชน URL Web ของนกเรยน คอ http10102022m6412 ใหพมพ administrator ตอทายดงน
http10202022m6412administrator
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
5
เนอหาสาระ โครงสรางภาษา HTML ประกอบดวย
โครงสรางภาษา HTML lthtmlgt ltheadgt lttitlegtขอความทตองการใหแสดงบนไตเตลบาร lttitlegt ltheadgt
ltbodygt ค าสงและขอความใหแสดงบน browser ltbodygt lthtmlgt
ขนตอนการสรางเวบ 1 ท าเวบเพออะไร เลอกใชเครองมออะไรด (HTML Dreamweaver Joomla Drupal
Wordpress hellip) 2 วางแผนโครงสราง และ Usability ค านงถงผใชใหสามารถเขาถงขอมลไดอยางงาย 3 การออกแบบ Design ท าใหมความนาเชอถอ ยงใหญ ดด Look and Fill 4 การประชาสมพนธ วางแผนวาจะใชวธไหน เชน นามบตร ออก Event แลกลงคกบ
เวบไซตอน (Referral Links จายเงนโฆษณา (pay per click เมอมคนคลกมากจายเงนมาก) Email (return visitors)
ประเภทการสรางเวบ 1 Text Editor 2 Web Editor 3 CMS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
6
ใบความร
ประเภทของ CMS ในการสราง website
bull Blogs ndash บลอก หรอ เวบบลอก (weblog) เปนเวบประเภทหนงทถกสรางขนมาเพอใชเปนเครองมอในสอสารรปแบบใหม ไมวาจะเปนการประกาศขาวสาร การแสดงความคดเหน การเผยแพรผลงาน ฯลฯ (เหมอนกบ Whatrsquos new นนแหละ) และก าลงเปนทนยมมากขนเรอย ๆ โดยขณะนไดมผใหบรการบลอกมากมาย ทงแบบใหบรการฟร และเสยคาใชจาย โดยค าวา blog ยอมาจากค าวา weblog หรอ web log ซงค าวา weblog นนกมาจาก web (เวลดไวดเวบ) และ log (ปม บนทก) รวมกนหมายถง บนทกบนเวลดไวดเวบ นนเอง ตวบลอกน นจะออกแบบมาใหสามารถใชงานไดงายไมจ าเปนตองใชความรทางดาน HTML มากนก เนองจากมการออกแบบเครองมอใหเปนแบบ WYSIWYG editor (what you see it what you get) ซงเครองมอทดและเขาใจงาย ๆ คลายกบเครองมอหรอสญลกษณในโปรแกรมการพมพงานทวๆ ไป ท าใหผทสรางเอกสารสามารถท าไดดวยความรวดเรว
bull E-Commerce (อคอมเมรซ) ‟ เปน CMS สวนของการท ารานคา Online สามารถทจะใชในการซอของ ซงสามารถทจะเพมรายการสนคา ราคา ท าหนารานได ก าลงไดรบความนยมขนมาเรอยๆ
bull E-Learning ‟ เปน CMS ทใชในการท างานสอการเรยนการสอน หรอ CAI แตสามารถทจะท าเปนระบบ online ได เหมาะส าหรบนกเรยน คร อาจารย หรอสถานศกษาตางๆ สามารถสรางแบบทดสอบตางๆ ได แตในบานเรายงไมแพรหลายนก เนองจากคนทท าตองมความรในเรองของเวบไซตและการจดการเนอหาอยพอสมควร
bull Forums (กระดานขาว) ‟ เปน CMS ทใชในการตงกระทถามตอบปญหาหรอท าเปนชมชนตางๆ โดยจะมการแบงเปนหวขอหรอหมวดตางๆ ตามความสนใจของผเขาชม ซงสวนมากแลวตวForums นมกจะไปผกกบตว CMS อนๆ เขาไวดวยกน แตในขณะเดยวกนนนผใชงานกสามารถทจะตดตงใชงาน Forums แบบเพรยวๆ กไดเหมอนกน
bull Groupware ‟ เปน CMS ทออกแบบมาเพอทจะชวยการท างานในองคหรอหนวยงานใหมความสมพนธกน และมความรวดเรวในการท างาน สามารถทจะชวยเหลอกน สามารถท างานเปนทมและควบคมการท างานได โดยการท างานกจะผานระบบเนตเวรคหรออเมลลหรอระบบเวบออนไลนซงการตดตอสอสารนนกจะสามารถตดตดไดเปนกลมๆ หรอเฉพาะบคคลกได พรอมทงขอมลทตองการแจงสามารถใชเปนรปภาพ ขอความ หรออนๆ ได แลวแตวาความสามารถของ Groupware CMS จะท าไดขนาดไหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
7
bull Image Galleries (อลบมภาพ) ‟ เปน CMS ทก าลงไดรบความนยมอกตวหนงเลยกวาไดโดย CMS ประเภทนจะใชในการจดการอลบมภาพหรอท า Galleries กจะมฟงกชนในการใชงานโดยการแบงเปนหมวดหมของภาพ สามารถก าหนดขนาดภาพ ขนาดไฟล หรอบางตวสามารถทจะท าการยอภาพลงมาตามทก าหนดไดเอง หรอท าเปน Thumbnail กได
bull Portals (CMS) ‟ เปน CMS ทเปนหนาตาหลกของเวบไซตเลยกวาได ซงการท างานนนกอาจจะท างานดวยตวของมนเองได แตในขณะเดยวกนกสามารถทจะเอาตวอนๆ เขามารวมผนวกเพมไปได เชน CMS ตวนกจะมสวนของการจดการเนอหาอย แตกจะม Forums (กระดานขาว) หรอImage Galleries (อลบมภาพ) ผนวกเขาไปดวยเพอท าใหผใชงานนนสามารถใชงานไดสะดวกมากยงขน
bull วก (Wiki) คอ เวบไซตทอนญาตใหผใช เพมและแกไขเนอหาไดโดยงาย เหมอนกบการเขยนบทความรวมกน ค าวา ldquoวกrdquo น ยงสามารถใชหมายถงซอฟตแวรทใชเพอสรางเวบไซตดงกลาวอกดวย ลกษณะของตววกจะออกไปแนวสารานกรมหรอแหลงความรจ านวนมากๆ มากกวา โดยจะเปนการระดมความเหนจากหลายๆ คนมาใชงาน ซงตวอยางของไทยกสามารถเขาไปดไดท httpthwikipediaorg
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
8
ชอ ndash นามสกล เลขท ชน
ใบงาน
ประเภทของ CMS ในการสราง website ค าสง จงอธบายความหมายและหนาทของประภท CMS ตอไปน bull Blogs ndash บลอก หรอ เวบบลอก (weblog) bull E-Commerce (อคอมเมรซ)
bull E-Learning
bull Forums (กระดานขาว)
bull Groupware
bull Image Galleries (อลบมภาพ)
bull Portals (CMS) bull วก (Wiki)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
9
เนอหาสาระ การสรางแบบจ าลองหนาเวบ ประกอบดวย Site map สรางแปลนของเวบไซต แปลนของเวบไซตจะเปนตวบงบอกวาเวบไซตนนจะมทงหมดกหนา การเชอมโยงระหวางแตละหนาเปนอยางไร ภายในหนานนมรายละเอยดเปนอยางไรบาง โดยในการสรางแปลนของเวบไซตจะม 2 ขนตอน คอ
ตวอยางการสราง Site map
Mock up แบบจ าลองหนาเวบ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
10
เนอหาสาระ เรอง ความเปนมาของระบบ CMS CMS คออะไร
CMS ยอมาจาก Content Management System เปนระบบทน ามาชวยในการสรางและบรหารเวบไซตแบบส าเรจรป โดยในการใชงาน CMS นนผใชงานแทบไมตองมความรในดานการเขยนโปรแกรม กสามารถสรางเวบไซตได ตวของ CMS เองจะมโปรแกรมแถมมาและสามารถแทรกเองไดมากมายเชน webboard ระบบจดการปายโฆษณา ระบบนบจ านวนผชม แมแตกระทงตระกราสนคา และอนๆอกมากมาย
CMS เปนเหมอนโปรแกรม โปรแกรมหนง ทมผพฒนามาจากภาษาคอมพวเตอรทใชในเวบไซตเชน PHP Python ASP JSP ซงในปจจบนมคนใจดพฒนา CMS ฟรขนมามากมายอยางเชน Mambo Joomla Wordpress
แนนอนวาผพฒนาระบบ CMS ฟร ทกลาวมาขางตนนนลวนเปนมออาชพทมฝมอในเรองของ เวบไซตเปนอยางยง ท งการเขยนโปรแกรมทรดกม การออกแบบเนวเกชนทด ท าใหภาพรวมของเวบไซตทใช CMS นนออกมาในแนวมออาชพอยางมาก ขอดของ CMS
1 ผใชงานไมจ าเปนตองมความรเรองการท าเวบไซต เพยงแคเคยพมพ หรอเคยโพสขอความในอนเทอรเนต กสามารถมเวบไซตเปนของตวเองได
2 ไมเสยเวลาในการพฒนาเวบไซต ไมเสยเงนจ านวนมาก 3 งายตอการดแล เพราะมระบบจดการทกอยางใหเราหมด 4 มระบบจดการทเราสามารถหามาใสเพมไดมากมาย อยางเชน ระบบแกลลอร 5 สามารถเปลยนหนาตาเวบไซตไดงายๆ เพยงแคโหลดทม (Theme) ของ CMS นนๆ ขอเสยของ CMS
1ในกรณทผใชตองการออกแบบทม (หนาตาของเวบ) เอง จะตองใชความรมากกวาปรกต เนองจาก CMS มหลายๆระบบมารวมกนท าให เ กดความยงยาก ส าหรบผ ท ไ ม มความ ร 2ผใชจะตองศกษาระบบ CMS ทผพฒนาสรางขนมา เชนจะตองใสขอความลงตรงไหน จะตองแทรกภาพอยางไร ซงจะล าบากเพยงแคชวงแรกเทานน
3ในการใชงานจรงนนจะมความยงยากในการ set up ครงแรกกบ web server แตปจจบนกมผ บรการ web server มากมายทเสนอลงและ set up ระบบ CMS ใหฟรๆโดยไมเสยคาใชจาย
เมอรวมๆขอดและขอเสยดแลว กยงเหนไดวา CMS นนกเปนระบบทนาใชงานอยด แนะน า CMS - Mambo CMS ตวนมผใชงานมากมายทงในหนวยงานของรฐ และผคนทวไป ท าใหมคนใหเราสามารถปรกษาไดมาก รวมถงตวระบบเองกใชงานไดงาย และมผพฒนาอยตลอดเวลา มเวบไซตภาษาไทยรองรบส าหรบผทตองการศกษาและใชงาน เชนhttpwwwmambohubcom
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
11
ท าไมถงใช Joomla 1 ใชงาย 2 ทรงพลง 3 เปดเผยโคด (ไมตองเสยคาลขสทธโคด แจกจายตว Joomla ใหใครกได) 4 รองรบเวบขนาดใหญ 5 ฟร(ถาลงมอท าเอง) 6 ลขสทธเปนแบบ GNUGPL 7 ค าวา Joomla เปน TM (Trade mark) ของ OSM 8 ตวอยางกอนและหลงออกแบบดวย Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
12
เชน การก าหนดหวขอ ขนาดตวอกษร ส งายตอการก าหนดรปแบบ
AppServ คอโปรแกรมทรวบรวมเอา Open Source Software หลายๆอยางมารวมเขาไว ดวยกน โดยม Package หลกๆดงน - Apache - PHP
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
13
- MySQL - phpMyAdmin Appserv แตละเวอรชนจะได ตวเวอรชนของโปรแกรมภายใน package ทแตกตางกนไป เราสามารถท าการตดตง Appserv เพยงหนง แตสามารถลงโปรแกรมทตดมาไดทงหมดในคราวเดยว และยง set คา config ตางๆใหเสรจสน โดยปกตทกโปรแกรมทตดมากจะพรอมใชงานทนทดวย เปนทางเลอกหนงในการใชงานทสะดวกรวดเรว AppServ ใชเปนชดโปรแกรมทท าการตดต งไวเพอการทดสอบหรอใชงานภาษาในการ พฒนาโปรแกรม พฒนาระบบตางๆ หรอเวบไซท โดยปกตใช Apache เปน Web Server จ าลองการใชงานเสมอนอยบนอนเตอรเนต ในการใชงานภาษาท สามารถรองรบได ใช PHP เพอใหสามารถใชงานภาษา PHP และใชบน Web Server ได ใช MySQL เปน Database Server เพอใหภาษาscript ตางๆ ทรองรบสามารถสรางหรอตดตอ กบ Database ได ใช phpMyAdmin เพอเปนตวชวยในการตดตอ สราง ใชงาน Database ไดงายขน และโปรแกรมทตดมากบ Appserv นเองสามารถท าใหเราใชงานภาษา PHP HTML หรอภาษาตางๆ ซงสามารถน าไปใช เชน สามารถใช เขยนโปรแกรมตางๆทจ าเปนตองมการใชงาน บน Web Server หรอ เขยนเวบไซทแบบงายๆ จนถงเวบไซททมการใชงานโดยเชอมตอ Database เปนตน
การสมครสมาชก wwwcloudaccessnet เลอก Try Joomla เพอขอใชพนทชวคราว
นกเรยนจะไดรบ Web Server User name password นกเรยนไมตองลง Joomla เอง ใหนกเรยนทดลองเขาเวบของตนเองทรบจาก cloudaccess
เนอหาสาระประกอบดวย การสรางฐานขอมล บน Web Server ตวอยาง URL และ Database ทครก าหนดใหบน Server ของนกเรยน เชน
URL http10202022m6412 DATABASE m64_12 1 ตดตง Joomla โดยพมพ http10202022m6412joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
14
2 กดป มถดไปตรวจสอบระบบถามขอแนะน าในการตดตงใหด าเนนการดงน
-ใหท าการปดโปรแกรมท error อย 2 ตว โดยการกดป ม Start แลวพมพ php - เลอก PHP Edit the phpini Configuration File
- คนหาค าทตองการแกไข error ทเกดขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
15
แลวท างาน restart programe โดยคลกทป ม Start แลวพมพค าวา Restart apache panel -gtRun as Administrator
แกไขโดยใส ( remark) และเอา ออก ทงหมด 4 บรรทด ใหเหมอนตวอยางดานลาง ดงน
error_reporting = E_ALL amp ~E_NOTICE error_reporting = E_COMPILE_ERROR|E_ERROR|E_CORE_ERROR display_errors = Off register_globals = Off แลว กด File-gt Save เพอบนทกเพอใหโปรแกรมใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
16
จะปรากฏหนาจอดงน
- กดตรวจสอบอกครง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
17
ผลทไดใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
18
3 ขอมลลขสทธ กดป มถดไป
4 ก าหนดขอมลพนฐานขอมล
- ใสชอโฮสต = localhost - ใสชอผใชฐานขอมล = root
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
19
- ใสรหสผานผใชฐานขอมล =helliphelliphelliphelliphellip ตองจ าใหได - ชอฐานขอมลตามทสรางฐานขอมลไว (ครก าหนดให)เชน m64_12
5 การตงคาระบบ FTP ใหกด
6 ก าหนดคาระหบบหลก ไดแกการตงชอเวบไซต รหสผดแลระบบ และการก าหนดโครงหนาเวบ
- รหสผานผดแลระบบ ตองจ าใหได - ถาตองการขอมลโครงสรางหนาเวบตวอยางใหกดทป ม ตดตงขอมลตวอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
20
- ถาไมตองการขอมลตวอยางจะปรากฏหนาตางนขนมา
7 เสรจสนการตดตง Joomla ใหท าการเปลยนชอหรอลบโฟลเดอร Cappservwwwjoomlainstallation เพอปองกนคนอนลงทบ ตวอยางหนาเวบทได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
21
การปรบแกเวบไซต สวน Back End เชน URL Web ของนกเรยน คอ http10102022m6412 ใหพมพ administrator ตอทายดงน
http10202022m6412administrator
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
6
ใบความร
ประเภทของ CMS ในการสราง website
bull Blogs ndash บลอก หรอ เวบบลอก (weblog) เปนเวบประเภทหนงทถกสรางขนมาเพอใชเปนเครองมอในสอสารรปแบบใหม ไมวาจะเปนการประกาศขาวสาร การแสดงความคดเหน การเผยแพรผลงาน ฯลฯ (เหมอนกบ Whatrsquos new นนแหละ) และก าลงเปนทนยมมากขนเรอย ๆ โดยขณะนไดมผใหบรการบลอกมากมาย ทงแบบใหบรการฟร และเสยคาใชจาย โดยค าวา blog ยอมาจากค าวา weblog หรอ web log ซงค าวา weblog นนกมาจาก web (เวลดไวดเวบ) และ log (ปม บนทก) รวมกนหมายถง บนทกบนเวลดไวดเวบ นนเอง ตวบลอกน นจะออกแบบมาใหสามารถใชงานไดงายไมจ าเปนตองใชความรทางดาน HTML มากนก เนองจากมการออกแบบเครองมอใหเปนแบบ WYSIWYG editor (what you see it what you get) ซงเครองมอทดและเขาใจงาย ๆ คลายกบเครองมอหรอสญลกษณในโปรแกรมการพมพงานทวๆ ไป ท าใหผทสรางเอกสารสามารถท าไดดวยความรวดเรว
bull E-Commerce (อคอมเมรซ) ‟ เปน CMS สวนของการท ารานคา Online สามารถทจะใชในการซอของ ซงสามารถทจะเพมรายการสนคา ราคา ท าหนารานได ก าลงไดรบความนยมขนมาเรอยๆ
bull E-Learning ‟ เปน CMS ทใชในการท างานสอการเรยนการสอน หรอ CAI แตสามารถทจะท าเปนระบบ online ได เหมาะส าหรบนกเรยน คร อาจารย หรอสถานศกษาตางๆ สามารถสรางแบบทดสอบตางๆ ได แตในบานเรายงไมแพรหลายนก เนองจากคนทท าตองมความรในเรองของเวบไซตและการจดการเนอหาอยพอสมควร
bull Forums (กระดานขาว) ‟ เปน CMS ทใชในการตงกระทถามตอบปญหาหรอท าเปนชมชนตางๆ โดยจะมการแบงเปนหวขอหรอหมวดตางๆ ตามความสนใจของผเขาชม ซงสวนมากแลวตวForums นมกจะไปผกกบตว CMS อนๆ เขาไวดวยกน แตในขณะเดยวกนนนผใชงานกสามารถทจะตดตงใชงาน Forums แบบเพรยวๆ กไดเหมอนกน
bull Groupware ‟ เปน CMS ทออกแบบมาเพอทจะชวยการท างานในองคหรอหนวยงานใหมความสมพนธกน และมความรวดเรวในการท างาน สามารถทจะชวยเหลอกน สามารถท างานเปนทมและควบคมการท างานได โดยการท างานกจะผานระบบเนตเวรคหรออเมลลหรอระบบเวบออนไลนซงการตดตอสอสารนนกจะสามารถตดตดไดเปนกลมๆ หรอเฉพาะบคคลกได พรอมทงขอมลทตองการแจงสามารถใชเปนรปภาพ ขอความ หรออนๆ ได แลวแตวาความสามารถของ Groupware CMS จะท าไดขนาดไหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
7
bull Image Galleries (อลบมภาพ) ‟ เปน CMS ทก าลงไดรบความนยมอกตวหนงเลยกวาไดโดย CMS ประเภทนจะใชในการจดการอลบมภาพหรอท า Galleries กจะมฟงกชนในการใชงานโดยการแบงเปนหมวดหมของภาพ สามารถก าหนดขนาดภาพ ขนาดไฟล หรอบางตวสามารถทจะท าการยอภาพลงมาตามทก าหนดไดเอง หรอท าเปน Thumbnail กได
bull Portals (CMS) ‟ เปน CMS ทเปนหนาตาหลกของเวบไซตเลยกวาได ซงการท างานนนกอาจจะท างานดวยตวของมนเองได แตในขณะเดยวกนกสามารถทจะเอาตวอนๆ เขามารวมผนวกเพมไปได เชน CMS ตวนกจะมสวนของการจดการเนอหาอย แตกจะม Forums (กระดานขาว) หรอImage Galleries (อลบมภาพ) ผนวกเขาไปดวยเพอท าใหผใชงานนนสามารถใชงานไดสะดวกมากยงขน
bull วก (Wiki) คอ เวบไซตทอนญาตใหผใช เพมและแกไขเนอหาไดโดยงาย เหมอนกบการเขยนบทความรวมกน ค าวา ldquoวกrdquo น ยงสามารถใชหมายถงซอฟตแวรทใชเพอสรางเวบไซตดงกลาวอกดวย ลกษณะของตววกจะออกไปแนวสารานกรมหรอแหลงความรจ านวนมากๆ มากกวา โดยจะเปนการระดมความเหนจากหลายๆ คนมาใชงาน ซงตวอยางของไทยกสามารถเขาไปดไดท httpthwikipediaorg
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
8
ชอ ndash นามสกล เลขท ชน
ใบงาน
ประเภทของ CMS ในการสราง website ค าสง จงอธบายความหมายและหนาทของประภท CMS ตอไปน bull Blogs ndash บลอก หรอ เวบบลอก (weblog) bull E-Commerce (อคอมเมรซ)
bull E-Learning
bull Forums (กระดานขาว)
bull Groupware
bull Image Galleries (อลบมภาพ)
bull Portals (CMS) bull วก (Wiki)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
9
เนอหาสาระ การสรางแบบจ าลองหนาเวบ ประกอบดวย Site map สรางแปลนของเวบไซต แปลนของเวบไซตจะเปนตวบงบอกวาเวบไซตนนจะมทงหมดกหนา การเชอมโยงระหวางแตละหนาเปนอยางไร ภายในหนานนมรายละเอยดเปนอยางไรบาง โดยในการสรางแปลนของเวบไซตจะม 2 ขนตอน คอ
ตวอยางการสราง Site map
Mock up แบบจ าลองหนาเวบ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
10
เนอหาสาระ เรอง ความเปนมาของระบบ CMS CMS คออะไร
CMS ยอมาจาก Content Management System เปนระบบทน ามาชวยในการสรางและบรหารเวบไซตแบบส าเรจรป โดยในการใชงาน CMS นนผใชงานแทบไมตองมความรในดานการเขยนโปรแกรม กสามารถสรางเวบไซตได ตวของ CMS เองจะมโปรแกรมแถมมาและสามารถแทรกเองไดมากมายเชน webboard ระบบจดการปายโฆษณา ระบบนบจ านวนผชม แมแตกระทงตระกราสนคา และอนๆอกมากมาย
CMS เปนเหมอนโปรแกรม โปรแกรมหนง ทมผพฒนามาจากภาษาคอมพวเตอรทใชในเวบไซตเชน PHP Python ASP JSP ซงในปจจบนมคนใจดพฒนา CMS ฟรขนมามากมายอยางเชน Mambo Joomla Wordpress
แนนอนวาผพฒนาระบบ CMS ฟร ทกลาวมาขางตนนนลวนเปนมออาชพทมฝมอในเรองของ เวบไซตเปนอยางยง ท งการเขยนโปรแกรมทรดกม การออกแบบเนวเกชนทด ท าใหภาพรวมของเวบไซตทใช CMS นนออกมาในแนวมออาชพอยางมาก ขอดของ CMS
1 ผใชงานไมจ าเปนตองมความรเรองการท าเวบไซต เพยงแคเคยพมพ หรอเคยโพสขอความในอนเทอรเนต กสามารถมเวบไซตเปนของตวเองได
2 ไมเสยเวลาในการพฒนาเวบไซต ไมเสยเงนจ านวนมาก 3 งายตอการดแล เพราะมระบบจดการทกอยางใหเราหมด 4 มระบบจดการทเราสามารถหามาใสเพมไดมากมาย อยางเชน ระบบแกลลอร 5 สามารถเปลยนหนาตาเวบไซตไดงายๆ เพยงแคโหลดทม (Theme) ของ CMS นนๆ ขอเสยของ CMS
1ในกรณทผใชตองการออกแบบทม (หนาตาของเวบ) เอง จะตองใชความรมากกวาปรกต เนองจาก CMS มหลายๆระบบมารวมกนท าให เ กดความยงยาก ส าหรบผ ท ไ ม มความ ร 2ผใชจะตองศกษาระบบ CMS ทผพฒนาสรางขนมา เชนจะตองใสขอความลงตรงไหน จะตองแทรกภาพอยางไร ซงจะล าบากเพยงแคชวงแรกเทานน
3ในการใชงานจรงนนจะมความยงยากในการ set up ครงแรกกบ web server แตปจจบนกมผ บรการ web server มากมายทเสนอลงและ set up ระบบ CMS ใหฟรๆโดยไมเสยคาใชจาย
เมอรวมๆขอดและขอเสยดแลว กยงเหนไดวา CMS นนกเปนระบบทนาใชงานอยด แนะน า CMS - Mambo CMS ตวนมผใชงานมากมายทงในหนวยงานของรฐ และผคนทวไป ท าใหมคนใหเราสามารถปรกษาไดมาก รวมถงตวระบบเองกใชงานไดงาย และมผพฒนาอยตลอดเวลา มเวบไซตภาษาไทยรองรบส าหรบผทตองการศกษาและใชงาน เชนhttpwwwmambohubcom
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
11
ท าไมถงใช Joomla 1 ใชงาย 2 ทรงพลง 3 เปดเผยโคด (ไมตองเสยคาลขสทธโคด แจกจายตว Joomla ใหใครกได) 4 รองรบเวบขนาดใหญ 5 ฟร(ถาลงมอท าเอง) 6 ลขสทธเปนแบบ GNUGPL 7 ค าวา Joomla เปน TM (Trade mark) ของ OSM 8 ตวอยางกอนและหลงออกแบบดวย Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
12
เชน การก าหนดหวขอ ขนาดตวอกษร ส งายตอการก าหนดรปแบบ
AppServ คอโปรแกรมทรวบรวมเอา Open Source Software หลายๆอยางมารวมเขาไว ดวยกน โดยม Package หลกๆดงน - Apache - PHP
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
13
- MySQL - phpMyAdmin Appserv แตละเวอรชนจะได ตวเวอรชนของโปรแกรมภายใน package ทแตกตางกนไป เราสามารถท าการตดตง Appserv เพยงหนง แตสามารถลงโปรแกรมทตดมาไดทงหมดในคราวเดยว และยง set คา config ตางๆใหเสรจสน โดยปกตทกโปรแกรมทตดมากจะพรอมใชงานทนทดวย เปนทางเลอกหนงในการใชงานทสะดวกรวดเรว AppServ ใชเปนชดโปรแกรมทท าการตดต งไวเพอการทดสอบหรอใชงานภาษาในการ พฒนาโปรแกรม พฒนาระบบตางๆ หรอเวบไซท โดยปกตใช Apache เปน Web Server จ าลองการใชงานเสมอนอยบนอนเตอรเนต ในการใชงานภาษาท สามารถรองรบได ใช PHP เพอใหสามารถใชงานภาษา PHP และใชบน Web Server ได ใช MySQL เปน Database Server เพอใหภาษาscript ตางๆ ทรองรบสามารถสรางหรอตดตอ กบ Database ได ใช phpMyAdmin เพอเปนตวชวยในการตดตอ สราง ใชงาน Database ไดงายขน และโปรแกรมทตดมากบ Appserv นเองสามารถท าใหเราใชงานภาษา PHP HTML หรอภาษาตางๆ ซงสามารถน าไปใช เชน สามารถใช เขยนโปรแกรมตางๆทจ าเปนตองมการใชงาน บน Web Server หรอ เขยนเวบไซทแบบงายๆ จนถงเวบไซททมการใชงานโดยเชอมตอ Database เปนตน
การสมครสมาชก wwwcloudaccessnet เลอก Try Joomla เพอขอใชพนทชวคราว
นกเรยนจะไดรบ Web Server User name password นกเรยนไมตองลง Joomla เอง ใหนกเรยนทดลองเขาเวบของตนเองทรบจาก cloudaccess
เนอหาสาระประกอบดวย การสรางฐานขอมล บน Web Server ตวอยาง URL และ Database ทครก าหนดใหบน Server ของนกเรยน เชน
URL http10202022m6412 DATABASE m64_12 1 ตดตง Joomla โดยพมพ http10202022m6412joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
14
2 กดป มถดไปตรวจสอบระบบถามขอแนะน าในการตดตงใหด าเนนการดงน
-ใหท าการปดโปรแกรมท error อย 2 ตว โดยการกดป ม Start แลวพมพ php - เลอก PHP Edit the phpini Configuration File
- คนหาค าทตองการแกไข error ทเกดขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
15
แลวท างาน restart programe โดยคลกทป ม Start แลวพมพค าวา Restart apache panel -gtRun as Administrator
แกไขโดยใส ( remark) และเอา ออก ทงหมด 4 บรรทด ใหเหมอนตวอยางดานลาง ดงน
error_reporting = E_ALL amp ~E_NOTICE error_reporting = E_COMPILE_ERROR|E_ERROR|E_CORE_ERROR display_errors = Off register_globals = Off แลว กด File-gt Save เพอบนทกเพอใหโปรแกรมใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
16
จะปรากฏหนาจอดงน
- กดตรวจสอบอกครง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
17
ผลทไดใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
18
3 ขอมลลขสทธ กดป มถดไป
4 ก าหนดขอมลพนฐานขอมล
- ใสชอโฮสต = localhost - ใสชอผใชฐานขอมล = root
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
19
- ใสรหสผานผใชฐานขอมล =helliphelliphelliphelliphellip ตองจ าใหได - ชอฐานขอมลตามทสรางฐานขอมลไว (ครก าหนดให)เชน m64_12
5 การตงคาระบบ FTP ใหกด
6 ก าหนดคาระหบบหลก ไดแกการตงชอเวบไซต รหสผดแลระบบ และการก าหนดโครงหนาเวบ
- รหสผานผดแลระบบ ตองจ าใหได - ถาตองการขอมลโครงสรางหนาเวบตวอยางใหกดทป ม ตดตงขอมลตวอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
20
- ถาไมตองการขอมลตวอยางจะปรากฏหนาตางนขนมา
7 เสรจสนการตดตง Joomla ใหท าการเปลยนชอหรอลบโฟลเดอร Cappservwwwjoomlainstallation เพอปองกนคนอนลงทบ ตวอยางหนาเวบทได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
21
การปรบแกเวบไซต สวน Back End เชน URL Web ของนกเรยน คอ http10102022m6412 ใหพมพ administrator ตอทายดงน
http10202022m6412administrator
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
7
bull Image Galleries (อลบมภาพ) ‟ เปน CMS ทก าลงไดรบความนยมอกตวหนงเลยกวาไดโดย CMS ประเภทนจะใชในการจดการอลบมภาพหรอท า Galleries กจะมฟงกชนในการใชงานโดยการแบงเปนหมวดหมของภาพ สามารถก าหนดขนาดภาพ ขนาดไฟล หรอบางตวสามารถทจะท าการยอภาพลงมาตามทก าหนดไดเอง หรอท าเปน Thumbnail กได
bull Portals (CMS) ‟ เปน CMS ทเปนหนาตาหลกของเวบไซตเลยกวาได ซงการท างานนนกอาจจะท างานดวยตวของมนเองได แตในขณะเดยวกนกสามารถทจะเอาตวอนๆ เขามารวมผนวกเพมไปได เชน CMS ตวนกจะมสวนของการจดการเนอหาอย แตกจะม Forums (กระดานขาว) หรอImage Galleries (อลบมภาพ) ผนวกเขาไปดวยเพอท าใหผใชงานนนสามารถใชงานไดสะดวกมากยงขน
bull วก (Wiki) คอ เวบไซตทอนญาตใหผใช เพมและแกไขเนอหาไดโดยงาย เหมอนกบการเขยนบทความรวมกน ค าวา ldquoวกrdquo น ยงสามารถใชหมายถงซอฟตแวรทใชเพอสรางเวบไซตดงกลาวอกดวย ลกษณะของตววกจะออกไปแนวสารานกรมหรอแหลงความรจ านวนมากๆ มากกวา โดยจะเปนการระดมความเหนจากหลายๆ คนมาใชงาน ซงตวอยางของไทยกสามารถเขาไปดไดท httpthwikipediaorg
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
8
ชอ ndash นามสกล เลขท ชน
ใบงาน
ประเภทของ CMS ในการสราง website ค าสง จงอธบายความหมายและหนาทของประภท CMS ตอไปน bull Blogs ndash บลอก หรอ เวบบลอก (weblog) bull E-Commerce (อคอมเมรซ)
bull E-Learning
bull Forums (กระดานขาว)
bull Groupware
bull Image Galleries (อลบมภาพ)
bull Portals (CMS) bull วก (Wiki)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
9
เนอหาสาระ การสรางแบบจ าลองหนาเวบ ประกอบดวย Site map สรางแปลนของเวบไซต แปลนของเวบไซตจะเปนตวบงบอกวาเวบไซตนนจะมทงหมดกหนา การเชอมโยงระหวางแตละหนาเปนอยางไร ภายในหนานนมรายละเอยดเปนอยางไรบาง โดยในการสรางแปลนของเวบไซตจะม 2 ขนตอน คอ
ตวอยางการสราง Site map
Mock up แบบจ าลองหนาเวบ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
10
เนอหาสาระ เรอง ความเปนมาของระบบ CMS CMS คออะไร
CMS ยอมาจาก Content Management System เปนระบบทน ามาชวยในการสรางและบรหารเวบไซตแบบส าเรจรป โดยในการใชงาน CMS นนผใชงานแทบไมตองมความรในดานการเขยนโปรแกรม กสามารถสรางเวบไซตได ตวของ CMS เองจะมโปรแกรมแถมมาและสามารถแทรกเองไดมากมายเชน webboard ระบบจดการปายโฆษณา ระบบนบจ านวนผชม แมแตกระทงตระกราสนคา และอนๆอกมากมาย
CMS เปนเหมอนโปรแกรม โปรแกรมหนง ทมผพฒนามาจากภาษาคอมพวเตอรทใชในเวบไซตเชน PHP Python ASP JSP ซงในปจจบนมคนใจดพฒนา CMS ฟรขนมามากมายอยางเชน Mambo Joomla Wordpress
แนนอนวาผพฒนาระบบ CMS ฟร ทกลาวมาขางตนนนลวนเปนมออาชพทมฝมอในเรองของ เวบไซตเปนอยางยง ท งการเขยนโปรแกรมทรดกม การออกแบบเนวเกชนทด ท าใหภาพรวมของเวบไซตทใช CMS นนออกมาในแนวมออาชพอยางมาก ขอดของ CMS
1 ผใชงานไมจ าเปนตองมความรเรองการท าเวบไซต เพยงแคเคยพมพ หรอเคยโพสขอความในอนเทอรเนต กสามารถมเวบไซตเปนของตวเองได
2 ไมเสยเวลาในการพฒนาเวบไซต ไมเสยเงนจ านวนมาก 3 งายตอการดแล เพราะมระบบจดการทกอยางใหเราหมด 4 มระบบจดการทเราสามารถหามาใสเพมไดมากมาย อยางเชน ระบบแกลลอร 5 สามารถเปลยนหนาตาเวบไซตไดงายๆ เพยงแคโหลดทม (Theme) ของ CMS นนๆ ขอเสยของ CMS
1ในกรณทผใชตองการออกแบบทม (หนาตาของเวบ) เอง จะตองใชความรมากกวาปรกต เนองจาก CMS มหลายๆระบบมารวมกนท าให เ กดความยงยาก ส าหรบผ ท ไ ม มความ ร 2ผใชจะตองศกษาระบบ CMS ทผพฒนาสรางขนมา เชนจะตองใสขอความลงตรงไหน จะตองแทรกภาพอยางไร ซงจะล าบากเพยงแคชวงแรกเทานน
3ในการใชงานจรงนนจะมความยงยากในการ set up ครงแรกกบ web server แตปจจบนกมผ บรการ web server มากมายทเสนอลงและ set up ระบบ CMS ใหฟรๆโดยไมเสยคาใชจาย
เมอรวมๆขอดและขอเสยดแลว กยงเหนไดวา CMS นนกเปนระบบทนาใชงานอยด แนะน า CMS - Mambo CMS ตวนมผใชงานมากมายทงในหนวยงานของรฐ และผคนทวไป ท าใหมคนใหเราสามารถปรกษาไดมาก รวมถงตวระบบเองกใชงานไดงาย และมผพฒนาอยตลอดเวลา มเวบไซตภาษาไทยรองรบส าหรบผทตองการศกษาและใชงาน เชนhttpwwwmambohubcom
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
11
ท าไมถงใช Joomla 1 ใชงาย 2 ทรงพลง 3 เปดเผยโคด (ไมตองเสยคาลขสทธโคด แจกจายตว Joomla ใหใครกได) 4 รองรบเวบขนาดใหญ 5 ฟร(ถาลงมอท าเอง) 6 ลขสทธเปนแบบ GNUGPL 7 ค าวา Joomla เปน TM (Trade mark) ของ OSM 8 ตวอยางกอนและหลงออกแบบดวย Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
12
เชน การก าหนดหวขอ ขนาดตวอกษร ส งายตอการก าหนดรปแบบ
AppServ คอโปรแกรมทรวบรวมเอา Open Source Software หลายๆอยางมารวมเขาไว ดวยกน โดยม Package หลกๆดงน - Apache - PHP
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
13
- MySQL - phpMyAdmin Appserv แตละเวอรชนจะได ตวเวอรชนของโปรแกรมภายใน package ทแตกตางกนไป เราสามารถท าการตดตง Appserv เพยงหนง แตสามารถลงโปรแกรมทตดมาไดทงหมดในคราวเดยว และยง set คา config ตางๆใหเสรจสน โดยปกตทกโปรแกรมทตดมากจะพรอมใชงานทนทดวย เปนทางเลอกหนงในการใชงานทสะดวกรวดเรว AppServ ใชเปนชดโปรแกรมทท าการตดต งไวเพอการทดสอบหรอใชงานภาษาในการ พฒนาโปรแกรม พฒนาระบบตางๆ หรอเวบไซท โดยปกตใช Apache เปน Web Server จ าลองการใชงานเสมอนอยบนอนเตอรเนต ในการใชงานภาษาท สามารถรองรบได ใช PHP เพอใหสามารถใชงานภาษา PHP และใชบน Web Server ได ใช MySQL เปน Database Server เพอใหภาษาscript ตางๆ ทรองรบสามารถสรางหรอตดตอ กบ Database ได ใช phpMyAdmin เพอเปนตวชวยในการตดตอ สราง ใชงาน Database ไดงายขน และโปรแกรมทตดมากบ Appserv นเองสามารถท าใหเราใชงานภาษา PHP HTML หรอภาษาตางๆ ซงสามารถน าไปใช เชน สามารถใช เขยนโปรแกรมตางๆทจ าเปนตองมการใชงาน บน Web Server หรอ เขยนเวบไซทแบบงายๆ จนถงเวบไซททมการใชงานโดยเชอมตอ Database เปนตน
การสมครสมาชก wwwcloudaccessnet เลอก Try Joomla เพอขอใชพนทชวคราว
นกเรยนจะไดรบ Web Server User name password นกเรยนไมตองลง Joomla เอง ใหนกเรยนทดลองเขาเวบของตนเองทรบจาก cloudaccess
เนอหาสาระประกอบดวย การสรางฐานขอมล บน Web Server ตวอยาง URL และ Database ทครก าหนดใหบน Server ของนกเรยน เชน
URL http10202022m6412 DATABASE m64_12 1 ตดตง Joomla โดยพมพ http10202022m6412joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
14
2 กดป มถดไปตรวจสอบระบบถามขอแนะน าในการตดตงใหด าเนนการดงน
-ใหท าการปดโปรแกรมท error อย 2 ตว โดยการกดป ม Start แลวพมพ php - เลอก PHP Edit the phpini Configuration File
- คนหาค าทตองการแกไข error ทเกดขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
15
แลวท างาน restart programe โดยคลกทป ม Start แลวพมพค าวา Restart apache panel -gtRun as Administrator
แกไขโดยใส ( remark) และเอา ออก ทงหมด 4 บรรทด ใหเหมอนตวอยางดานลาง ดงน
error_reporting = E_ALL amp ~E_NOTICE error_reporting = E_COMPILE_ERROR|E_ERROR|E_CORE_ERROR display_errors = Off register_globals = Off แลว กด File-gt Save เพอบนทกเพอใหโปรแกรมใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
16
จะปรากฏหนาจอดงน
- กดตรวจสอบอกครง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
17
ผลทไดใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
18
3 ขอมลลขสทธ กดป มถดไป
4 ก าหนดขอมลพนฐานขอมล
- ใสชอโฮสต = localhost - ใสชอผใชฐานขอมล = root
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
19
- ใสรหสผานผใชฐานขอมล =helliphelliphelliphelliphellip ตองจ าใหได - ชอฐานขอมลตามทสรางฐานขอมลไว (ครก าหนดให)เชน m64_12
5 การตงคาระบบ FTP ใหกด
6 ก าหนดคาระหบบหลก ไดแกการตงชอเวบไซต รหสผดแลระบบ และการก าหนดโครงหนาเวบ
- รหสผานผดแลระบบ ตองจ าใหได - ถาตองการขอมลโครงสรางหนาเวบตวอยางใหกดทป ม ตดตงขอมลตวอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
20
- ถาไมตองการขอมลตวอยางจะปรากฏหนาตางนขนมา
7 เสรจสนการตดตง Joomla ใหท าการเปลยนชอหรอลบโฟลเดอร Cappservwwwjoomlainstallation เพอปองกนคนอนลงทบ ตวอยางหนาเวบทได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
21
การปรบแกเวบไซต สวน Back End เชน URL Web ของนกเรยน คอ http10102022m6412 ใหพมพ administrator ตอทายดงน
http10202022m6412administrator
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
8
ชอ ndash นามสกล เลขท ชน
ใบงาน
ประเภทของ CMS ในการสราง website ค าสง จงอธบายความหมายและหนาทของประภท CMS ตอไปน bull Blogs ndash บลอก หรอ เวบบลอก (weblog) bull E-Commerce (อคอมเมรซ)
bull E-Learning
bull Forums (กระดานขาว)
bull Groupware
bull Image Galleries (อลบมภาพ)
bull Portals (CMS) bull วก (Wiki)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
9
เนอหาสาระ การสรางแบบจ าลองหนาเวบ ประกอบดวย Site map สรางแปลนของเวบไซต แปลนของเวบไซตจะเปนตวบงบอกวาเวบไซตนนจะมทงหมดกหนา การเชอมโยงระหวางแตละหนาเปนอยางไร ภายในหนานนมรายละเอยดเปนอยางไรบาง โดยในการสรางแปลนของเวบไซตจะม 2 ขนตอน คอ
ตวอยางการสราง Site map
Mock up แบบจ าลองหนาเวบ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
10
เนอหาสาระ เรอง ความเปนมาของระบบ CMS CMS คออะไร
CMS ยอมาจาก Content Management System เปนระบบทน ามาชวยในการสรางและบรหารเวบไซตแบบส าเรจรป โดยในการใชงาน CMS นนผใชงานแทบไมตองมความรในดานการเขยนโปรแกรม กสามารถสรางเวบไซตได ตวของ CMS เองจะมโปรแกรมแถมมาและสามารถแทรกเองไดมากมายเชน webboard ระบบจดการปายโฆษณา ระบบนบจ านวนผชม แมแตกระทงตระกราสนคา และอนๆอกมากมาย
CMS เปนเหมอนโปรแกรม โปรแกรมหนง ทมผพฒนามาจากภาษาคอมพวเตอรทใชในเวบไซตเชน PHP Python ASP JSP ซงในปจจบนมคนใจดพฒนา CMS ฟรขนมามากมายอยางเชน Mambo Joomla Wordpress
แนนอนวาผพฒนาระบบ CMS ฟร ทกลาวมาขางตนนนลวนเปนมออาชพทมฝมอในเรองของ เวบไซตเปนอยางยง ท งการเขยนโปรแกรมทรดกม การออกแบบเนวเกชนทด ท าใหภาพรวมของเวบไซตทใช CMS นนออกมาในแนวมออาชพอยางมาก ขอดของ CMS
1 ผใชงานไมจ าเปนตองมความรเรองการท าเวบไซต เพยงแคเคยพมพ หรอเคยโพสขอความในอนเทอรเนต กสามารถมเวบไซตเปนของตวเองได
2 ไมเสยเวลาในการพฒนาเวบไซต ไมเสยเงนจ านวนมาก 3 งายตอการดแล เพราะมระบบจดการทกอยางใหเราหมด 4 มระบบจดการทเราสามารถหามาใสเพมไดมากมาย อยางเชน ระบบแกลลอร 5 สามารถเปลยนหนาตาเวบไซตไดงายๆ เพยงแคโหลดทม (Theme) ของ CMS นนๆ ขอเสยของ CMS
1ในกรณทผใชตองการออกแบบทม (หนาตาของเวบ) เอง จะตองใชความรมากกวาปรกต เนองจาก CMS มหลายๆระบบมารวมกนท าให เ กดความยงยาก ส าหรบผ ท ไ ม มความ ร 2ผใชจะตองศกษาระบบ CMS ทผพฒนาสรางขนมา เชนจะตองใสขอความลงตรงไหน จะตองแทรกภาพอยางไร ซงจะล าบากเพยงแคชวงแรกเทานน
3ในการใชงานจรงนนจะมความยงยากในการ set up ครงแรกกบ web server แตปจจบนกมผ บรการ web server มากมายทเสนอลงและ set up ระบบ CMS ใหฟรๆโดยไมเสยคาใชจาย
เมอรวมๆขอดและขอเสยดแลว กยงเหนไดวา CMS นนกเปนระบบทนาใชงานอยด แนะน า CMS - Mambo CMS ตวนมผใชงานมากมายทงในหนวยงานของรฐ และผคนทวไป ท าใหมคนใหเราสามารถปรกษาไดมาก รวมถงตวระบบเองกใชงานไดงาย และมผพฒนาอยตลอดเวลา มเวบไซตภาษาไทยรองรบส าหรบผทตองการศกษาและใชงาน เชนhttpwwwmambohubcom
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
11
ท าไมถงใช Joomla 1 ใชงาย 2 ทรงพลง 3 เปดเผยโคด (ไมตองเสยคาลขสทธโคด แจกจายตว Joomla ใหใครกได) 4 รองรบเวบขนาดใหญ 5 ฟร(ถาลงมอท าเอง) 6 ลขสทธเปนแบบ GNUGPL 7 ค าวา Joomla เปน TM (Trade mark) ของ OSM 8 ตวอยางกอนและหลงออกแบบดวย Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
12
เชน การก าหนดหวขอ ขนาดตวอกษร ส งายตอการก าหนดรปแบบ
AppServ คอโปรแกรมทรวบรวมเอา Open Source Software หลายๆอยางมารวมเขาไว ดวยกน โดยม Package หลกๆดงน - Apache - PHP
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
13
- MySQL - phpMyAdmin Appserv แตละเวอรชนจะได ตวเวอรชนของโปรแกรมภายใน package ทแตกตางกนไป เราสามารถท าการตดตง Appserv เพยงหนง แตสามารถลงโปรแกรมทตดมาไดทงหมดในคราวเดยว และยง set คา config ตางๆใหเสรจสน โดยปกตทกโปรแกรมทตดมากจะพรอมใชงานทนทดวย เปนทางเลอกหนงในการใชงานทสะดวกรวดเรว AppServ ใชเปนชดโปรแกรมทท าการตดต งไวเพอการทดสอบหรอใชงานภาษาในการ พฒนาโปรแกรม พฒนาระบบตางๆ หรอเวบไซท โดยปกตใช Apache เปน Web Server จ าลองการใชงานเสมอนอยบนอนเตอรเนต ในการใชงานภาษาท สามารถรองรบได ใช PHP เพอใหสามารถใชงานภาษา PHP และใชบน Web Server ได ใช MySQL เปน Database Server เพอใหภาษาscript ตางๆ ทรองรบสามารถสรางหรอตดตอ กบ Database ได ใช phpMyAdmin เพอเปนตวชวยในการตดตอ สราง ใชงาน Database ไดงายขน และโปรแกรมทตดมากบ Appserv นเองสามารถท าใหเราใชงานภาษา PHP HTML หรอภาษาตางๆ ซงสามารถน าไปใช เชน สามารถใช เขยนโปรแกรมตางๆทจ าเปนตองมการใชงาน บน Web Server หรอ เขยนเวบไซทแบบงายๆ จนถงเวบไซททมการใชงานโดยเชอมตอ Database เปนตน
การสมครสมาชก wwwcloudaccessnet เลอก Try Joomla เพอขอใชพนทชวคราว
นกเรยนจะไดรบ Web Server User name password นกเรยนไมตองลง Joomla เอง ใหนกเรยนทดลองเขาเวบของตนเองทรบจาก cloudaccess
เนอหาสาระประกอบดวย การสรางฐานขอมล บน Web Server ตวอยาง URL และ Database ทครก าหนดใหบน Server ของนกเรยน เชน
URL http10202022m6412 DATABASE m64_12 1 ตดตง Joomla โดยพมพ http10202022m6412joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
14
2 กดป มถดไปตรวจสอบระบบถามขอแนะน าในการตดตงใหด าเนนการดงน
-ใหท าการปดโปรแกรมท error อย 2 ตว โดยการกดป ม Start แลวพมพ php - เลอก PHP Edit the phpini Configuration File
- คนหาค าทตองการแกไข error ทเกดขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
15
แลวท างาน restart programe โดยคลกทป ม Start แลวพมพค าวา Restart apache panel -gtRun as Administrator
แกไขโดยใส ( remark) และเอา ออก ทงหมด 4 บรรทด ใหเหมอนตวอยางดานลาง ดงน
error_reporting = E_ALL amp ~E_NOTICE error_reporting = E_COMPILE_ERROR|E_ERROR|E_CORE_ERROR display_errors = Off register_globals = Off แลว กด File-gt Save เพอบนทกเพอใหโปรแกรมใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
16
จะปรากฏหนาจอดงน
- กดตรวจสอบอกครง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
17
ผลทไดใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
18
3 ขอมลลขสทธ กดป มถดไป
4 ก าหนดขอมลพนฐานขอมล
- ใสชอโฮสต = localhost - ใสชอผใชฐานขอมล = root
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
19
- ใสรหสผานผใชฐานขอมล =helliphelliphelliphelliphellip ตองจ าใหได - ชอฐานขอมลตามทสรางฐานขอมลไว (ครก าหนดให)เชน m64_12
5 การตงคาระบบ FTP ใหกด
6 ก าหนดคาระหบบหลก ไดแกการตงชอเวบไซต รหสผดแลระบบ และการก าหนดโครงหนาเวบ
- รหสผานผดแลระบบ ตองจ าใหได - ถาตองการขอมลโครงสรางหนาเวบตวอยางใหกดทป ม ตดตงขอมลตวอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
20
- ถาไมตองการขอมลตวอยางจะปรากฏหนาตางนขนมา
7 เสรจสนการตดตง Joomla ใหท าการเปลยนชอหรอลบโฟลเดอร Cappservwwwjoomlainstallation เพอปองกนคนอนลงทบ ตวอยางหนาเวบทได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
21
การปรบแกเวบไซต สวน Back End เชน URL Web ของนกเรยน คอ http10102022m6412 ใหพมพ administrator ตอทายดงน
http10202022m6412administrator
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
9
เนอหาสาระ การสรางแบบจ าลองหนาเวบ ประกอบดวย Site map สรางแปลนของเวบไซต แปลนของเวบไซตจะเปนตวบงบอกวาเวบไซตนนจะมทงหมดกหนา การเชอมโยงระหวางแตละหนาเปนอยางไร ภายในหนานนมรายละเอยดเปนอยางไรบาง โดยในการสรางแปลนของเวบไซตจะม 2 ขนตอน คอ
ตวอยางการสราง Site map
Mock up แบบจ าลองหนาเวบ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
10
เนอหาสาระ เรอง ความเปนมาของระบบ CMS CMS คออะไร
CMS ยอมาจาก Content Management System เปนระบบทน ามาชวยในการสรางและบรหารเวบไซตแบบส าเรจรป โดยในการใชงาน CMS นนผใชงานแทบไมตองมความรในดานการเขยนโปรแกรม กสามารถสรางเวบไซตได ตวของ CMS เองจะมโปรแกรมแถมมาและสามารถแทรกเองไดมากมายเชน webboard ระบบจดการปายโฆษณา ระบบนบจ านวนผชม แมแตกระทงตระกราสนคา และอนๆอกมากมาย
CMS เปนเหมอนโปรแกรม โปรแกรมหนง ทมผพฒนามาจากภาษาคอมพวเตอรทใชในเวบไซตเชน PHP Python ASP JSP ซงในปจจบนมคนใจดพฒนา CMS ฟรขนมามากมายอยางเชน Mambo Joomla Wordpress
แนนอนวาผพฒนาระบบ CMS ฟร ทกลาวมาขางตนนนลวนเปนมออาชพทมฝมอในเรองของ เวบไซตเปนอยางยง ท งการเขยนโปรแกรมทรดกม การออกแบบเนวเกชนทด ท าใหภาพรวมของเวบไซตทใช CMS นนออกมาในแนวมออาชพอยางมาก ขอดของ CMS
1 ผใชงานไมจ าเปนตองมความรเรองการท าเวบไซต เพยงแคเคยพมพ หรอเคยโพสขอความในอนเทอรเนต กสามารถมเวบไซตเปนของตวเองได
2 ไมเสยเวลาในการพฒนาเวบไซต ไมเสยเงนจ านวนมาก 3 งายตอการดแล เพราะมระบบจดการทกอยางใหเราหมด 4 มระบบจดการทเราสามารถหามาใสเพมไดมากมาย อยางเชน ระบบแกลลอร 5 สามารถเปลยนหนาตาเวบไซตไดงายๆ เพยงแคโหลดทม (Theme) ของ CMS นนๆ ขอเสยของ CMS
1ในกรณทผใชตองการออกแบบทม (หนาตาของเวบ) เอง จะตองใชความรมากกวาปรกต เนองจาก CMS มหลายๆระบบมารวมกนท าให เ กดความยงยาก ส าหรบผ ท ไ ม มความ ร 2ผใชจะตองศกษาระบบ CMS ทผพฒนาสรางขนมา เชนจะตองใสขอความลงตรงไหน จะตองแทรกภาพอยางไร ซงจะล าบากเพยงแคชวงแรกเทานน
3ในการใชงานจรงนนจะมความยงยากในการ set up ครงแรกกบ web server แตปจจบนกมผ บรการ web server มากมายทเสนอลงและ set up ระบบ CMS ใหฟรๆโดยไมเสยคาใชจาย
เมอรวมๆขอดและขอเสยดแลว กยงเหนไดวา CMS นนกเปนระบบทนาใชงานอยด แนะน า CMS - Mambo CMS ตวนมผใชงานมากมายทงในหนวยงานของรฐ และผคนทวไป ท าใหมคนใหเราสามารถปรกษาไดมาก รวมถงตวระบบเองกใชงานไดงาย และมผพฒนาอยตลอดเวลา มเวบไซตภาษาไทยรองรบส าหรบผทตองการศกษาและใชงาน เชนhttpwwwmambohubcom
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
11
ท าไมถงใช Joomla 1 ใชงาย 2 ทรงพลง 3 เปดเผยโคด (ไมตองเสยคาลขสทธโคด แจกจายตว Joomla ใหใครกได) 4 รองรบเวบขนาดใหญ 5 ฟร(ถาลงมอท าเอง) 6 ลขสทธเปนแบบ GNUGPL 7 ค าวา Joomla เปน TM (Trade mark) ของ OSM 8 ตวอยางกอนและหลงออกแบบดวย Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
12
เชน การก าหนดหวขอ ขนาดตวอกษร ส งายตอการก าหนดรปแบบ
AppServ คอโปรแกรมทรวบรวมเอา Open Source Software หลายๆอยางมารวมเขาไว ดวยกน โดยม Package หลกๆดงน - Apache - PHP
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
13
- MySQL - phpMyAdmin Appserv แตละเวอรชนจะได ตวเวอรชนของโปรแกรมภายใน package ทแตกตางกนไป เราสามารถท าการตดตง Appserv เพยงหนง แตสามารถลงโปรแกรมทตดมาไดทงหมดในคราวเดยว และยง set คา config ตางๆใหเสรจสน โดยปกตทกโปรแกรมทตดมากจะพรอมใชงานทนทดวย เปนทางเลอกหนงในการใชงานทสะดวกรวดเรว AppServ ใชเปนชดโปรแกรมทท าการตดต งไวเพอการทดสอบหรอใชงานภาษาในการ พฒนาโปรแกรม พฒนาระบบตางๆ หรอเวบไซท โดยปกตใช Apache เปน Web Server จ าลองการใชงานเสมอนอยบนอนเตอรเนต ในการใชงานภาษาท สามารถรองรบได ใช PHP เพอใหสามารถใชงานภาษา PHP และใชบน Web Server ได ใช MySQL เปน Database Server เพอใหภาษาscript ตางๆ ทรองรบสามารถสรางหรอตดตอ กบ Database ได ใช phpMyAdmin เพอเปนตวชวยในการตดตอ สราง ใชงาน Database ไดงายขน และโปรแกรมทตดมากบ Appserv นเองสามารถท าใหเราใชงานภาษา PHP HTML หรอภาษาตางๆ ซงสามารถน าไปใช เชน สามารถใช เขยนโปรแกรมตางๆทจ าเปนตองมการใชงาน บน Web Server หรอ เขยนเวบไซทแบบงายๆ จนถงเวบไซททมการใชงานโดยเชอมตอ Database เปนตน
การสมครสมาชก wwwcloudaccessnet เลอก Try Joomla เพอขอใชพนทชวคราว
นกเรยนจะไดรบ Web Server User name password นกเรยนไมตองลง Joomla เอง ใหนกเรยนทดลองเขาเวบของตนเองทรบจาก cloudaccess
เนอหาสาระประกอบดวย การสรางฐานขอมล บน Web Server ตวอยาง URL และ Database ทครก าหนดใหบน Server ของนกเรยน เชน
URL http10202022m6412 DATABASE m64_12 1 ตดตง Joomla โดยพมพ http10202022m6412joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
14
2 กดป มถดไปตรวจสอบระบบถามขอแนะน าในการตดตงใหด าเนนการดงน
-ใหท าการปดโปรแกรมท error อย 2 ตว โดยการกดป ม Start แลวพมพ php - เลอก PHP Edit the phpini Configuration File
- คนหาค าทตองการแกไข error ทเกดขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
15
แลวท างาน restart programe โดยคลกทป ม Start แลวพมพค าวา Restart apache panel -gtRun as Administrator
แกไขโดยใส ( remark) และเอา ออก ทงหมด 4 บรรทด ใหเหมอนตวอยางดานลาง ดงน
error_reporting = E_ALL amp ~E_NOTICE error_reporting = E_COMPILE_ERROR|E_ERROR|E_CORE_ERROR display_errors = Off register_globals = Off แลว กด File-gt Save เพอบนทกเพอใหโปรแกรมใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
16
จะปรากฏหนาจอดงน
- กดตรวจสอบอกครง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
17
ผลทไดใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
18
3 ขอมลลขสทธ กดป มถดไป
4 ก าหนดขอมลพนฐานขอมล
- ใสชอโฮสต = localhost - ใสชอผใชฐานขอมล = root
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
19
- ใสรหสผานผใชฐานขอมล =helliphelliphelliphelliphellip ตองจ าใหได - ชอฐานขอมลตามทสรางฐานขอมลไว (ครก าหนดให)เชน m64_12
5 การตงคาระบบ FTP ใหกด
6 ก าหนดคาระหบบหลก ไดแกการตงชอเวบไซต รหสผดแลระบบ และการก าหนดโครงหนาเวบ
- รหสผานผดแลระบบ ตองจ าใหได - ถาตองการขอมลโครงสรางหนาเวบตวอยางใหกดทป ม ตดตงขอมลตวอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
20
- ถาไมตองการขอมลตวอยางจะปรากฏหนาตางนขนมา
7 เสรจสนการตดตง Joomla ใหท าการเปลยนชอหรอลบโฟลเดอร Cappservwwwjoomlainstallation เพอปองกนคนอนลงทบ ตวอยางหนาเวบทได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
21
การปรบแกเวบไซต สวน Back End เชน URL Web ของนกเรยน คอ http10102022m6412 ใหพมพ administrator ตอทายดงน
http10202022m6412administrator
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
10
เนอหาสาระ เรอง ความเปนมาของระบบ CMS CMS คออะไร
CMS ยอมาจาก Content Management System เปนระบบทน ามาชวยในการสรางและบรหารเวบไซตแบบส าเรจรป โดยในการใชงาน CMS นนผใชงานแทบไมตองมความรในดานการเขยนโปรแกรม กสามารถสรางเวบไซตได ตวของ CMS เองจะมโปรแกรมแถมมาและสามารถแทรกเองไดมากมายเชน webboard ระบบจดการปายโฆษณา ระบบนบจ านวนผชม แมแตกระทงตระกราสนคา และอนๆอกมากมาย
CMS เปนเหมอนโปรแกรม โปรแกรมหนง ทมผพฒนามาจากภาษาคอมพวเตอรทใชในเวบไซตเชน PHP Python ASP JSP ซงในปจจบนมคนใจดพฒนา CMS ฟรขนมามากมายอยางเชน Mambo Joomla Wordpress
แนนอนวาผพฒนาระบบ CMS ฟร ทกลาวมาขางตนนนลวนเปนมออาชพทมฝมอในเรองของ เวบไซตเปนอยางยง ท งการเขยนโปรแกรมทรดกม การออกแบบเนวเกชนทด ท าใหภาพรวมของเวบไซตทใช CMS นนออกมาในแนวมออาชพอยางมาก ขอดของ CMS
1 ผใชงานไมจ าเปนตองมความรเรองการท าเวบไซต เพยงแคเคยพมพ หรอเคยโพสขอความในอนเทอรเนต กสามารถมเวบไซตเปนของตวเองได
2 ไมเสยเวลาในการพฒนาเวบไซต ไมเสยเงนจ านวนมาก 3 งายตอการดแล เพราะมระบบจดการทกอยางใหเราหมด 4 มระบบจดการทเราสามารถหามาใสเพมไดมากมาย อยางเชน ระบบแกลลอร 5 สามารถเปลยนหนาตาเวบไซตไดงายๆ เพยงแคโหลดทม (Theme) ของ CMS นนๆ ขอเสยของ CMS
1ในกรณทผใชตองการออกแบบทม (หนาตาของเวบ) เอง จะตองใชความรมากกวาปรกต เนองจาก CMS มหลายๆระบบมารวมกนท าให เ กดความยงยาก ส าหรบผ ท ไ ม มความ ร 2ผใชจะตองศกษาระบบ CMS ทผพฒนาสรางขนมา เชนจะตองใสขอความลงตรงไหน จะตองแทรกภาพอยางไร ซงจะล าบากเพยงแคชวงแรกเทานน
3ในการใชงานจรงนนจะมความยงยากในการ set up ครงแรกกบ web server แตปจจบนกมผ บรการ web server มากมายทเสนอลงและ set up ระบบ CMS ใหฟรๆโดยไมเสยคาใชจาย
เมอรวมๆขอดและขอเสยดแลว กยงเหนไดวา CMS นนกเปนระบบทนาใชงานอยด แนะน า CMS - Mambo CMS ตวนมผใชงานมากมายทงในหนวยงานของรฐ และผคนทวไป ท าใหมคนใหเราสามารถปรกษาไดมาก รวมถงตวระบบเองกใชงานไดงาย และมผพฒนาอยตลอดเวลา มเวบไซตภาษาไทยรองรบส าหรบผทตองการศกษาและใชงาน เชนhttpwwwmambohubcom
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
11
ท าไมถงใช Joomla 1 ใชงาย 2 ทรงพลง 3 เปดเผยโคด (ไมตองเสยคาลขสทธโคด แจกจายตว Joomla ใหใครกได) 4 รองรบเวบขนาดใหญ 5 ฟร(ถาลงมอท าเอง) 6 ลขสทธเปนแบบ GNUGPL 7 ค าวา Joomla เปน TM (Trade mark) ของ OSM 8 ตวอยางกอนและหลงออกแบบดวย Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
12
เชน การก าหนดหวขอ ขนาดตวอกษร ส งายตอการก าหนดรปแบบ
AppServ คอโปรแกรมทรวบรวมเอา Open Source Software หลายๆอยางมารวมเขาไว ดวยกน โดยม Package หลกๆดงน - Apache - PHP
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
13
- MySQL - phpMyAdmin Appserv แตละเวอรชนจะได ตวเวอรชนของโปรแกรมภายใน package ทแตกตางกนไป เราสามารถท าการตดตง Appserv เพยงหนง แตสามารถลงโปรแกรมทตดมาไดทงหมดในคราวเดยว และยง set คา config ตางๆใหเสรจสน โดยปกตทกโปรแกรมทตดมากจะพรอมใชงานทนทดวย เปนทางเลอกหนงในการใชงานทสะดวกรวดเรว AppServ ใชเปนชดโปรแกรมทท าการตดต งไวเพอการทดสอบหรอใชงานภาษาในการ พฒนาโปรแกรม พฒนาระบบตางๆ หรอเวบไซท โดยปกตใช Apache เปน Web Server จ าลองการใชงานเสมอนอยบนอนเตอรเนต ในการใชงานภาษาท สามารถรองรบได ใช PHP เพอใหสามารถใชงานภาษา PHP และใชบน Web Server ได ใช MySQL เปน Database Server เพอใหภาษาscript ตางๆ ทรองรบสามารถสรางหรอตดตอ กบ Database ได ใช phpMyAdmin เพอเปนตวชวยในการตดตอ สราง ใชงาน Database ไดงายขน และโปรแกรมทตดมากบ Appserv นเองสามารถท าใหเราใชงานภาษา PHP HTML หรอภาษาตางๆ ซงสามารถน าไปใช เชน สามารถใช เขยนโปรแกรมตางๆทจ าเปนตองมการใชงาน บน Web Server หรอ เขยนเวบไซทแบบงายๆ จนถงเวบไซททมการใชงานโดยเชอมตอ Database เปนตน
การสมครสมาชก wwwcloudaccessnet เลอก Try Joomla เพอขอใชพนทชวคราว
นกเรยนจะไดรบ Web Server User name password นกเรยนไมตองลง Joomla เอง ใหนกเรยนทดลองเขาเวบของตนเองทรบจาก cloudaccess
เนอหาสาระประกอบดวย การสรางฐานขอมล บน Web Server ตวอยาง URL และ Database ทครก าหนดใหบน Server ของนกเรยน เชน
URL http10202022m6412 DATABASE m64_12 1 ตดตง Joomla โดยพมพ http10202022m6412joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
14
2 กดป มถดไปตรวจสอบระบบถามขอแนะน าในการตดตงใหด าเนนการดงน
-ใหท าการปดโปรแกรมท error อย 2 ตว โดยการกดป ม Start แลวพมพ php - เลอก PHP Edit the phpini Configuration File
- คนหาค าทตองการแกไข error ทเกดขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
15
แลวท างาน restart programe โดยคลกทป ม Start แลวพมพค าวา Restart apache panel -gtRun as Administrator
แกไขโดยใส ( remark) และเอา ออก ทงหมด 4 บรรทด ใหเหมอนตวอยางดานลาง ดงน
error_reporting = E_ALL amp ~E_NOTICE error_reporting = E_COMPILE_ERROR|E_ERROR|E_CORE_ERROR display_errors = Off register_globals = Off แลว กด File-gt Save เพอบนทกเพอใหโปรแกรมใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
16
จะปรากฏหนาจอดงน
- กดตรวจสอบอกครง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
17
ผลทไดใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
18
3 ขอมลลขสทธ กดป มถดไป
4 ก าหนดขอมลพนฐานขอมล
- ใสชอโฮสต = localhost - ใสชอผใชฐานขอมล = root
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
19
- ใสรหสผานผใชฐานขอมล =helliphelliphelliphelliphellip ตองจ าใหได - ชอฐานขอมลตามทสรางฐานขอมลไว (ครก าหนดให)เชน m64_12
5 การตงคาระบบ FTP ใหกด
6 ก าหนดคาระหบบหลก ไดแกการตงชอเวบไซต รหสผดแลระบบ และการก าหนดโครงหนาเวบ
- รหสผานผดแลระบบ ตองจ าใหได - ถาตองการขอมลโครงสรางหนาเวบตวอยางใหกดทป ม ตดตงขอมลตวอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
20
- ถาไมตองการขอมลตวอยางจะปรากฏหนาตางนขนมา
7 เสรจสนการตดตง Joomla ใหท าการเปลยนชอหรอลบโฟลเดอร Cappservwwwjoomlainstallation เพอปองกนคนอนลงทบ ตวอยางหนาเวบทได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
21
การปรบแกเวบไซต สวน Back End เชน URL Web ของนกเรยน คอ http10102022m6412 ใหพมพ administrator ตอทายดงน
http10202022m6412administrator
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
11
ท าไมถงใช Joomla 1 ใชงาย 2 ทรงพลง 3 เปดเผยโคด (ไมตองเสยคาลขสทธโคด แจกจายตว Joomla ใหใครกได) 4 รองรบเวบขนาดใหญ 5 ฟร(ถาลงมอท าเอง) 6 ลขสทธเปนแบบ GNUGPL 7 ค าวา Joomla เปน TM (Trade mark) ของ OSM 8 ตวอยางกอนและหลงออกแบบดวย Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
12
เชน การก าหนดหวขอ ขนาดตวอกษร ส งายตอการก าหนดรปแบบ
AppServ คอโปรแกรมทรวบรวมเอา Open Source Software หลายๆอยางมารวมเขาไว ดวยกน โดยม Package หลกๆดงน - Apache - PHP
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
13
- MySQL - phpMyAdmin Appserv แตละเวอรชนจะได ตวเวอรชนของโปรแกรมภายใน package ทแตกตางกนไป เราสามารถท าการตดตง Appserv เพยงหนง แตสามารถลงโปรแกรมทตดมาไดทงหมดในคราวเดยว และยง set คา config ตางๆใหเสรจสน โดยปกตทกโปรแกรมทตดมากจะพรอมใชงานทนทดวย เปนทางเลอกหนงในการใชงานทสะดวกรวดเรว AppServ ใชเปนชดโปรแกรมทท าการตดต งไวเพอการทดสอบหรอใชงานภาษาในการ พฒนาโปรแกรม พฒนาระบบตางๆ หรอเวบไซท โดยปกตใช Apache เปน Web Server จ าลองการใชงานเสมอนอยบนอนเตอรเนต ในการใชงานภาษาท สามารถรองรบได ใช PHP เพอใหสามารถใชงานภาษา PHP และใชบน Web Server ได ใช MySQL เปน Database Server เพอใหภาษาscript ตางๆ ทรองรบสามารถสรางหรอตดตอ กบ Database ได ใช phpMyAdmin เพอเปนตวชวยในการตดตอ สราง ใชงาน Database ไดงายขน และโปรแกรมทตดมากบ Appserv นเองสามารถท าใหเราใชงานภาษา PHP HTML หรอภาษาตางๆ ซงสามารถน าไปใช เชน สามารถใช เขยนโปรแกรมตางๆทจ าเปนตองมการใชงาน บน Web Server หรอ เขยนเวบไซทแบบงายๆ จนถงเวบไซททมการใชงานโดยเชอมตอ Database เปนตน
การสมครสมาชก wwwcloudaccessnet เลอก Try Joomla เพอขอใชพนทชวคราว
นกเรยนจะไดรบ Web Server User name password นกเรยนไมตองลง Joomla เอง ใหนกเรยนทดลองเขาเวบของตนเองทรบจาก cloudaccess
เนอหาสาระประกอบดวย การสรางฐานขอมล บน Web Server ตวอยาง URL และ Database ทครก าหนดใหบน Server ของนกเรยน เชน
URL http10202022m6412 DATABASE m64_12 1 ตดตง Joomla โดยพมพ http10202022m6412joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
14
2 กดป มถดไปตรวจสอบระบบถามขอแนะน าในการตดตงใหด าเนนการดงน
-ใหท าการปดโปรแกรมท error อย 2 ตว โดยการกดป ม Start แลวพมพ php - เลอก PHP Edit the phpini Configuration File
- คนหาค าทตองการแกไข error ทเกดขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
15
แลวท างาน restart programe โดยคลกทป ม Start แลวพมพค าวา Restart apache panel -gtRun as Administrator
แกไขโดยใส ( remark) และเอา ออก ทงหมด 4 บรรทด ใหเหมอนตวอยางดานลาง ดงน
error_reporting = E_ALL amp ~E_NOTICE error_reporting = E_COMPILE_ERROR|E_ERROR|E_CORE_ERROR display_errors = Off register_globals = Off แลว กด File-gt Save เพอบนทกเพอใหโปรแกรมใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
16
จะปรากฏหนาจอดงน
- กดตรวจสอบอกครง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
17
ผลทไดใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
18
3 ขอมลลขสทธ กดป มถดไป
4 ก าหนดขอมลพนฐานขอมล
- ใสชอโฮสต = localhost - ใสชอผใชฐานขอมล = root
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
19
- ใสรหสผานผใชฐานขอมล =helliphelliphelliphelliphellip ตองจ าใหได - ชอฐานขอมลตามทสรางฐานขอมลไว (ครก าหนดให)เชน m64_12
5 การตงคาระบบ FTP ใหกด
6 ก าหนดคาระหบบหลก ไดแกการตงชอเวบไซต รหสผดแลระบบ และการก าหนดโครงหนาเวบ
- รหสผานผดแลระบบ ตองจ าใหได - ถาตองการขอมลโครงสรางหนาเวบตวอยางใหกดทป ม ตดตงขอมลตวอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
20
- ถาไมตองการขอมลตวอยางจะปรากฏหนาตางนขนมา
7 เสรจสนการตดตง Joomla ใหท าการเปลยนชอหรอลบโฟลเดอร Cappservwwwjoomlainstallation เพอปองกนคนอนลงทบ ตวอยางหนาเวบทได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
21
การปรบแกเวบไซต สวน Back End เชน URL Web ของนกเรยน คอ http10102022m6412 ใหพมพ administrator ตอทายดงน
http10202022m6412administrator
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
12
เชน การก าหนดหวขอ ขนาดตวอกษร ส งายตอการก าหนดรปแบบ
AppServ คอโปรแกรมทรวบรวมเอา Open Source Software หลายๆอยางมารวมเขาไว ดวยกน โดยม Package หลกๆดงน - Apache - PHP
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
13
- MySQL - phpMyAdmin Appserv แตละเวอรชนจะได ตวเวอรชนของโปรแกรมภายใน package ทแตกตางกนไป เราสามารถท าการตดตง Appserv เพยงหนง แตสามารถลงโปรแกรมทตดมาไดทงหมดในคราวเดยว และยง set คา config ตางๆใหเสรจสน โดยปกตทกโปรแกรมทตดมากจะพรอมใชงานทนทดวย เปนทางเลอกหนงในการใชงานทสะดวกรวดเรว AppServ ใชเปนชดโปรแกรมทท าการตดต งไวเพอการทดสอบหรอใชงานภาษาในการ พฒนาโปรแกรม พฒนาระบบตางๆ หรอเวบไซท โดยปกตใช Apache เปน Web Server จ าลองการใชงานเสมอนอยบนอนเตอรเนต ในการใชงานภาษาท สามารถรองรบได ใช PHP เพอใหสามารถใชงานภาษา PHP และใชบน Web Server ได ใช MySQL เปน Database Server เพอใหภาษาscript ตางๆ ทรองรบสามารถสรางหรอตดตอ กบ Database ได ใช phpMyAdmin เพอเปนตวชวยในการตดตอ สราง ใชงาน Database ไดงายขน และโปรแกรมทตดมากบ Appserv นเองสามารถท าใหเราใชงานภาษา PHP HTML หรอภาษาตางๆ ซงสามารถน าไปใช เชน สามารถใช เขยนโปรแกรมตางๆทจ าเปนตองมการใชงาน บน Web Server หรอ เขยนเวบไซทแบบงายๆ จนถงเวบไซททมการใชงานโดยเชอมตอ Database เปนตน
การสมครสมาชก wwwcloudaccessnet เลอก Try Joomla เพอขอใชพนทชวคราว
นกเรยนจะไดรบ Web Server User name password นกเรยนไมตองลง Joomla เอง ใหนกเรยนทดลองเขาเวบของตนเองทรบจาก cloudaccess
เนอหาสาระประกอบดวย การสรางฐานขอมล บน Web Server ตวอยาง URL และ Database ทครก าหนดใหบน Server ของนกเรยน เชน
URL http10202022m6412 DATABASE m64_12 1 ตดตง Joomla โดยพมพ http10202022m6412joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
14
2 กดป มถดไปตรวจสอบระบบถามขอแนะน าในการตดตงใหด าเนนการดงน
-ใหท าการปดโปรแกรมท error อย 2 ตว โดยการกดป ม Start แลวพมพ php - เลอก PHP Edit the phpini Configuration File
- คนหาค าทตองการแกไข error ทเกดขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
15
แลวท างาน restart programe โดยคลกทป ม Start แลวพมพค าวา Restart apache panel -gtRun as Administrator
แกไขโดยใส ( remark) และเอา ออก ทงหมด 4 บรรทด ใหเหมอนตวอยางดานลาง ดงน
error_reporting = E_ALL amp ~E_NOTICE error_reporting = E_COMPILE_ERROR|E_ERROR|E_CORE_ERROR display_errors = Off register_globals = Off แลว กด File-gt Save เพอบนทกเพอใหโปรแกรมใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
16
จะปรากฏหนาจอดงน
- กดตรวจสอบอกครง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
17
ผลทไดใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
18
3 ขอมลลขสทธ กดป มถดไป
4 ก าหนดขอมลพนฐานขอมล
- ใสชอโฮสต = localhost - ใสชอผใชฐานขอมล = root
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
19
- ใสรหสผานผใชฐานขอมล =helliphelliphelliphelliphellip ตองจ าใหได - ชอฐานขอมลตามทสรางฐานขอมลไว (ครก าหนดให)เชน m64_12
5 การตงคาระบบ FTP ใหกด
6 ก าหนดคาระหบบหลก ไดแกการตงชอเวบไซต รหสผดแลระบบ และการก าหนดโครงหนาเวบ
- รหสผานผดแลระบบ ตองจ าใหได - ถาตองการขอมลโครงสรางหนาเวบตวอยางใหกดทป ม ตดตงขอมลตวอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
20
- ถาไมตองการขอมลตวอยางจะปรากฏหนาตางนขนมา
7 เสรจสนการตดตง Joomla ใหท าการเปลยนชอหรอลบโฟลเดอร Cappservwwwjoomlainstallation เพอปองกนคนอนลงทบ ตวอยางหนาเวบทได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
21
การปรบแกเวบไซต สวน Back End เชน URL Web ของนกเรยน คอ http10102022m6412 ใหพมพ administrator ตอทายดงน
http10202022m6412administrator
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
13
- MySQL - phpMyAdmin Appserv แตละเวอรชนจะได ตวเวอรชนของโปรแกรมภายใน package ทแตกตางกนไป เราสามารถท าการตดตง Appserv เพยงหนง แตสามารถลงโปรแกรมทตดมาไดทงหมดในคราวเดยว และยง set คา config ตางๆใหเสรจสน โดยปกตทกโปรแกรมทตดมากจะพรอมใชงานทนทดวย เปนทางเลอกหนงในการใชงานทสะดวกรวดเรว AppServ ใชเปนชดโปรแกรมทท าการตดต งไวเพอการทดสอบหรอใชงานภาษาในการ พฒนาโปรแกรม พฒนาระบบตางๆ หรอเวบไซท โดยปกตใช Apache เปน Web Server จ าลองการใชงานเสมอนอยบนอนเตอรเนต ในการใชงานภาษาท สามารถรองรบได ใช PHP เพอใหสามารถใชงานภาษา PHP และใชบน Web Server ได ใช MySQL เปน Database Server เพอใหภาษาscript ตางๆ ทรองรบสามารถสรางหรอตดตอ กบ Database ได ใช phpMyAdmin เพอเปนตวชวยในการตดตอ สราง ใชงาน Database ไดงายขน และโปรแกรมทตดมากบ Appserv นเองสามารถท าใหเราใชงานภาษา PHP HTML หรอภาษาตางๆ ซงสามารถน าไปใช เชน สามารถใช เขยนโปรแกรมตางๆทจ าเปนตองมการใชงาน บน Web Server หรอ เขยนเวบไซทแบบงายๆ จนถงเวบไซททมการใชงานโดยเชอมตอ Database เปนตน
การสมครสมาชก wwwcloudaccessnet เลอก Try Joomla เพอขอใชพนทชวคราว
นกเรยนจะไดรบ Web Server User name password นกเรยนไมตองลง Joomla เอง ใหนกเรยนทดลองเขาเวบของตนเองทรบจาก cloudaccess
เนอหาสาระประกอบดวย การสรางฐานขอมล บน Web Server ตวอยาง URL และ Database ทครก าหนดใหบน Server ของนกเรยน เชน
URL http10202022m6412 DATABASE m64_12 1 ตดตง Joomla โดยพมพ http10202022m6412joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
14
2 กดป มถดไปตรวจสอบระบบถามขอแนะน าในการตดตงใหด าเนนการดงน
-ใหท าการปดโปรแกรมท error อย 2 ตว โดยการกดป ม Start แลวพมพ php - เลอก PHP Edit the phpini Configuration File
- คนหาค าทตองการแกไข error ทเกดขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
15
แลวท างาน restart programe โดยคลกทป ม Start แลวพมพค าวา Restart apache panel -gtRun as Administrator
แกไขโดยใส ( remark) และเอา ออก ทงหมด 4 บรรทด ใหเหมอนตวอยางดานลาง ดงน
error_reporting = E_ALL amp ~E_NOTICE error_reporting = E_COMPILE_ERROR|E_ERROR|E_CORE_ERROR display_errors = Off register_globals = Off แลว กด File-gt Save เพอบนทกเพอใหโปรแกรมใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
16
จะปรากฏหนาจอดงน
- กดตรวจสอบอกครง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
17
ผลทไดใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
18
3 ขอมลลขสทธ กดป มถดไป
4 ก าหนดขอมลพนฐานขอมล
- ใสชอโฮสต = localhost - ใสชอผใชฐานขอมล = root
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
19
- ใสรหสผานผใชฐานขอมล =helliphelliphelliphelliphellip ตองจ าใหได - ชอฐานขอมลตามทสรางฐานขอมลไว (ครก าหนดให)เชน m64_12
5 การตงคาระบบ FTP ใหกด
6 ก าหนดคาระหบบหลก ไดแกการตงชอเวบไซต รหสผดแลระบบ และการก าหนดโครงหนาเวบ
- รหสผานผดแลระบบ ตองจ าใหได - ถาตองการขอมลโครงสรางหนาเวบตวอยางใหกดทป ม ตดตงขอมลตวอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
20
- ถาไมตองการขอมลตวอยางจะปรากฏหนาตางนขนมา
7 เสรจสนการตดตง Joomla ใหท าการเปลยนชอหรอลบโฟลเดอร Cappservwwwjoomlainstallation เพอปองกนคนอนลงทบ ตวอยางหนาเวบทได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
21
การปรบแกเวบไซต สวน Back End เชน URL Web ของนกเรยน คอ http10102022m6412 ใหพมพ administrator ตอทายดงน
http10202022m6412administrator
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
14
2 กดป มถดไปตรวจสอบระบบถามขอแนะน าในการตดตงใหด าเนนการดงน
-ใหท าการปดโปรแกรมท error อย 2 ตว โดยการกดป ม Start แลวพมพ php - เลอก PHP Edit the phpini Configuration File
- คนหาค าทตองการแกไข error ทเกดขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
15
แลวท างาน restart programe โดยคลกทป ม Start แลวพมพค าวา Restart apache panel -gtRun as Administrator
แกไขโดยใส ( remark) และเอา ออก ทงหมด 4 บรรทด ใหเหมอนตวอยางดานลาง ดงน
error_reporting = E_ALL amp ~E_NOTICE error_reporting = E_COMPILE_ERROR|E_ERROR|E_CORE_ERROR display_errors = Off register_globals = Off แลว กด File-gt Save เพอบนทกเพอใหโปรแกรมใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
16
จะปรากฏหนาจอดงน
- กดตรวจสอบอกครง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
17
ผลทไดใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
18
3 ขอมลลขสทธ กดป มถดไป
4 ก าหนดขอมลพนฐานขอมล
- ใสชอโฮสต = localhost - ใสชอผใชฐานขอมล = root
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
19
- ใสรหสผานผใชฐานขอมล =helliphelliphelliphelliphellip ตองจ าใหได - ชอฐานขอมลตามทสรางฐานขอมลไว (ครก าหนดให)เชน m64_12
5 การตงคาระบบ FTP ใหกด
6 ก าหนดคาระหบบหลก ไดแกการตงชอเวบไซต รหสผดแลระบบ และการก าหนดโครงหนาเวบ
- รหสผานผดแลระบบ ตองจ าใหได - ถาตองการขอมลโครงสรางหนาเวบตวอยางใหกดทป ม ตดตงขอมลตวอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
20
- ถาไมตองการขอมลตวอยางจะปรากฏหนาตางนขนมา
7 เสรจสนการตดตง Joomla ใหท าการเปลยนชอหรอลบโฟลเดอร Cappservwwwjoomlainstallation เพอปองกนคนอนลงทบ ตวอยางหนาเวบทได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
21
การปรบแกเวบไซต สวน Back End เชน URL Web ของนกเรยน คอ http10102022m6412 ใหพมพ administrator ตอทายดงน
http10202022m6412administrator
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
15
แลวท างาน restart programe โดยคลกทป ม Start แลวพมพค าวา Restart apache panel -gtRun as Administrator
แกไขโดยใส ( remark) และเอา ออก ทงหมด 4 บรรทด ใหเหมอนตวอยางดานลาง ดงน
error_reporting = E_ALL amp ~E_NOTICE error_reporting = E_COMPILE_ERROR|E_ERROR|E_CORE_ERROR display_errors = Off register_globals = Off แลว กด File-gt Save เพอบนทกเพอใหโปรแกรมใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
16
จะปรากฏหนาจอดงน
- กดตรวจสอบอกครง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
17
ผลทไดใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
18
3 ขอมลลขสทธ กดป มถดไป
4 ก าหนดขอมลพนฐานขอมล
- ใสชอโฮสต = localhost - ใสชอผใชฐานขอมล = root
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
19
- ใสรหสผานผใชฐานขอมล =helliphelliphelliphelliphellip ตองจ าใหได - ชอฐานขอมลตามทสรางฐานขอมลไว (ครก าหนดให)เชน m64_12
5 การตงคาระบบ FTP ใหกด
6 ก าหนดคาระหบบหลก ไดแกการตงชอเวบไซต รหสผดแลระบบ และการก าหนดโครงหนาเวบ
- รหสผานผดแลระบบ ตองจ าใหได - ถาตองการขอมลโครงสรางหนาเวบตวอยางใหกดทป ม ตดตงขอมลตวอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
20
- ถาไมตองการขอมลตวอยางจะปรากฏหนาตางนขนมา
7 เสรจสนการตดตง Joomla ใหท าการเปลยนชอหรอลบโฟลเดอร Cappservwwwjoomlainstallation เพอปองกนคนอนลงทบ ตวอยางหนาเวบทได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
21
การปรบแกเวบไซต สวน Back End เชน URL Web ของนกเรยน คอ http10102022m6412 ใหพมพ administrator ตอทายดงน
http10202022m6412administrator
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
16
จะปรากฏหนาจอดงน
- กดตรวจสอบอกครง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
17
ผลทไดใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
18
3 ขอมลลขสทธ กดป มถดไป
4 ก าหนดขอมลพนฐานขอมล
- ใสชอโฮสต = localhost - ใสชอผใชฐานขอมล = root
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
19
- ใสรหสผานผใชฐานขอมล =helliphelliphelliphelliphellip ตองจ าใหได - ชอฐานขอมลตามทสรางฐานขอมลไว (ครก าหนดให)เชน m64_12
5 การตงคาระบบ FTP ใหกด
6 ก าหนดคาระหบบหลก ไดแกการตงชอเวบไซต รหสผดแลระบบ และการก าหนดโครงหนาเวบ
- รหสผานผดแลระบบ ตองจ าใหได - ถาตองการขอมลโครงสรางหนาเวบตวอยางใหกดทป ม ตดตงขอมลตวอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
20
- ถาไมตองการขอมลตวอยางจะปรากฏหนาตางนขนมา
7 เสรจสนการตดตง Joomla ใหท าการเปลยนชอหรอลบโฟลเดอร Cappservwwwjoomlainstallation เพอปองกนคนอนลงทบ ตวอยางหนาเวบทได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
21
การปรบแกเวบไซต สวน Back End เชน URL Web ของนกเรยน คอ http10102022m6412 ใหพมพ administrator ตอทายดงน
http10202022m6412administrator
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
17
ผลทไดใชงานได 100
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
18
3 ขอมลลขสทธ กดป มถดไป
4 ก าหนดขอมลพนฐานขอมล
- ใสชอโฮสต = localhost - ใสชอผใชฐานขอมล = root
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
19
- ใสรหสผานผใชฐานขอมล =helliphelliphelliphelliphellip ตองจ าใหได - ชอฐานขอมลตามทสรางฐานขอมลไว (ครก าหนดให)เชน m64_12
5 การตงคาระบบ FTP ใหกด
6 ก าหนดคาระหบบหลก ไดแกการตงชอเวบไซต รหสผดแลระบบ และการก าหนดโครงหนาเวบ
- รหสผานผดแลระบบ ตองจ าใหได - ถาตองการขอมลโครงสรางหนาเวบตวอยางใหกดทป ม ตดตงขอมลตวอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
20
- ถาไมตองการขอมลตวอยางจะปรากฏหนาตางนขนมา
7 เสรจสนการตดตง Joomla ใหท าการเปลยนชอหรอลบโฟลเดอร Cappservwwwjoomlainstallation เพอปองกนคนอนลงทบ ตวอยางหนาเวบทได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
21
การปรบแกเวบไซต สวน Back End เชน URL Web ของนกเรยน คอ http10102022m6412 ใหพมพ administrator ตอทายดงน
http10202022m6412administrator
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
18
3 ขอมลลขสทธ กดป มถดไป
4 ก าหนดขอมลพนฐานขอมล
- ใสชอโฮสต = localhost - ใสชอผใชฐานขอมล = root
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
19
- ใสรหสผานผใชฐานขอมล =helliphelliphelliphelliphellip ตองจ าใหได - ชอฐานขอมลตามทสรางฐานขอมลไว (ครก าหนดให)เชน m64_12
5 การตงคาระบบ FTP ใหกด
6 ก าหนดคาระหบบหลก ไดแกการตงชอเวบไซต รหสผดแลระบบ และการก าหนดโครงหนาเวบ
- รหสผานผดแลระบบ ตองจ าใหได - ถาตองการขอมลโครงสรางหนาเวบตวอยางใหกดทป ม ตดตงขอมลตวอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
20
- ถาไมตองการขอมลตวอยางจะปรากฏหนาตางนขนมา
7 เสรจสนการตดตง Joomla ใหท าการเปลยนชอหรอลบโฟลเดอร Cappservwwwjoomlainstallation เพอปองกนคนอนลงทบ ตวอยางหนาเวบทได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
21
การปรบแกเวบไซต สวน Back End เชน URL Web ของนกเรยน คอ http10102022m6412 ใหพมพ administrator ตอทายดงน
http10202022m6412administrator
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
19
- ใสรหสผานผใชฐานขอมล =helliphelliphelliphelliphellip ตองจ าใหได - ชอฐานขอมลตามทสรางฐานขอมลไว (ครก าหนดให)เชน m64_12
5 การตงคาระบบ FTP ใหกด
6 ก าหนดคาระหบบหลก ไดแกการตงชอเวบไซต รหสผดแลระบบ และการก าหนดโครงหนาเวบ
- รหสผานผดแลระบบ ตองจ าใหได - ถาตองการขอมลโครงสรางหนาเวบตวอยางใหกดทป ม ตดตงขอมลตวอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
20
- ถาไมตองการขอมลตวอยางจะปรากฏหนาตางนขนมา
7 เสรจสนการตดตง Joomla ใหท าการเปลยนชอหรอลบโฟลเดอร Cappservwwwjoomlainstallation เพอปองกนคนอนลงทบ ตวอยางหนาเวบทได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
21
การปรบแกเวบไซต สวน Back End เชน URL Web ของนกเรยน คอ http10102022m6412 ใหพมพ administrator ตอทายดงน
http10202022m6412administrator
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
20
- ถาไมตองการขอมลตวอยางจะปรากฏหนาตางนขนมา
7 เสรจสนการตดตง Joomla ใหท าการเปลยนชอหรอลบโฟลเดอร Cappservwwwjoomlainstallation เพอปองกนคนอนลงทบ ตวอยางหนาเวบทได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
21
การปรบแกเวบไซต สวน Back End เชน URL Web ของนกเรยน คอ http10102022m6412 ใหพมพ administrator ตอทายดงน
http10202022m6412administrator
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
21
การปรบแกเวบไซต สวน Back End เชน URL Web ของนกเรยน คอ http10102022m6412 ใหพมพ administrator ตอทายดงน
http10202022m6412administrator
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
22
กรณตองการโอนถายขอมลจากเครองตนเองไปยงเวบเซรฟเวอร 1 ใชงาน FilZilla ตดตอ Server เพอยายขอมล
2 หาไฟล Joomla ทแตกไว ลากไปวางฝง Server
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
23
3 การก าหนด File Permissionก าหนดสทธใหใช application คลกขวาทไฟลหรอโฟลเดอร
แกไขได ใชไดกบ Linux ถา 755
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
24
ทดลองเขาเวบของตนเองทไดตดตง joomla ไวเชน
username admin password 1234
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
25
เนอหาสาระประกอบดวย
การตงคาสวน Back End หลงจากเขาหนาจอของสวน Back End แลว
1 แกไขขอมล Admin
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
26
แกไขเสรจแลวกด Save
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
27
2 การก าหนดคา Configuration
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
28
สามารถปดไซตชวคราวได เมอมการอบเดทเวบ ในชอง Site Offline Metadata Settings
Site Meta Description ใสค าส าหรบคนหา
กลมของ User ใน Joomla แบงเปน 2 กลมใหญ 1 กลมผชมเวบ (Front-end User)
11 กลมผชมเวบทวไป ทไมไดเปนสมาชก 12 กลมผชมเวบทเปนสมาชก (ถาเราไมไดเปดใหสมครสมาชกไดกจะไมมผชมกลมนคะ) แบงไดเปน 4 กลมยอย
- Registered User สามารถ login เขาเวบไซต และดขอมลตางๆ ไดตามทผดแลเวบ ก าหนดสทธไวเทานน - Author ดขอมล และสรางบทความได แตบทความนนตองไดรบการอนมตจาก สมาชกกลม Publisher กอนแสดงในเวบไซต
- Editor ดขอมล สรางบทความได และยงแกไขบทความของผอนไดดวยแตหากเปน บทความใหม ตองไดรบการอนมตจากกลม Publisher กอน
- Publisher ดขอมล สรางบทความได แกไขบทความของผอนได และมเปนผ ตดสนใจอนมตวาจะใหบทความของสมาชกกลม Auther และ Editor แสดงใน เวบไซตหรอไม
2 กลมผดแลเวบไซต (Back-end User) เปนกลม User ทมสทธ login ไปยงหนาบรหารจดการเวบไซต เพอเขาไปปรบแตง แกไขคาการท างานตางๆ ของเวบไซต เชน การจดหมวดหมเนอหา การเปลยน template หนาตาเวบ การ install|uninstall component และสามารถสราง user ใหมได เปนตน ผดแลเวบ แบงไดเปน 3 กลมยอย
- Manager สามารถจดการหมวดหมของเนอหา (SectionCategoryArticle) และสรางหรอ แกไขเมนตางๆ ได แตไมมสทธสราง user - Administrator สามารถจดการเนอหา แกไขสทธการใชงานของ User กลม Manager และ ผชมทเปนสมาชกได install|uninstall component ตางๆ แตไมสามารถแกไขคาใน Global ndash Configuration ไมสามารถเปลยนแปลง template และไมสามารถใชงานระบบ Mass Mail ได - Super Administrator สามารถท าไดทกอยาง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
29
การสราง User ใน Joomla ท าได 2 วธ 1 ปดผชมสามารถสมครผานทางหนาเวบไซต 2 ผดแลเวบเปนคนสราง User ให (User Manager gt New)
การก าหนด User โดยการกดทป ม New หรอ สรางใหม
เลอกประเภทของ User
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
30
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
31
ทดสอบการออกจากระบบ
โดยการคลก หนาชอผใชทอยในระบบ แลวกดป ม Logout แลวลองเขาใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
32
จะขนหนาจอแบบดานบนเพอใหใส user ใหม ท Login ใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
33
CMS Joomla จะแบงเวบไซตออกเปนสองสวนหลก ๆ คอ Front End Back End
1 สวนของ Front End คอ สวนทแสดงผลใหกบผเขาชมเวบไซต หรอหนาเวบไซตนนเอง
หลงจากตดตง Joomla เสรจเรยบรอยแลว ใหเขาไปทหนาเวบไซต เนอหาทเราเหนนเกดจากการทเราตดตงเนอหาตวอยางไว ลองคลกเมน หรอลงคตางๆ พรอมๆ กบส ารวจสวนประกอบของหนาเวบไปดวย
หนาเวบไซตทสรางดวย Joomla จะประกอบไปดวยสวนของ Logo เมน เนอหา Login Form Lastest News Popular Search box Polls Whorsquos Online Advertisement Banner Feed
ในการจดการเปลยนเนอหาตวอยางใหเปนเนอหาตามทเราตองการ ตองกระท าในสวนของ Back End 2 สวน Back End คอ สวนการจดการเนอหารวมถงโครงสรางของเวบไซต ส าหรบใหผดแลเวบไซตเขามาบรหารจดการเวบไซต
ให Login เขาสระบบ (httpwwwyourdomaincomadministrator)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
34
สวนประกอบบนหนาเวบ
1 Menubar คอสวนทแสดงชอค าสงทงหมดของโปรแกรม Joomla
2 Infobar คอสวนทแสดงขอมลรายละเอยดตอไปน - ชอของเวบไซต - ต าแหนงปจจบน (Current Location) ใน Admin Section ทก าลงใชงานอย - จ านวนขอความทไดรบจาก Users อน ๆ - จ านวนผเขาใชงานโปรแกรม Joomla ในขณะนน - ชอผใชท Login เขามา เชน admi
3 Toolbar คอเมนค าสงยอยจะปรากฏหลงจากคลกเลอกค าสงบน Menubar แลว (อาจจะแสดงจ านวนป มไมเทากน เมอคลกเลอกค าสงบน menubar)
4 Workspace คอพนทแสดงการท างานตาง ๆ ซงอยดานลาง Menubar Infobar และ Toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
35
ความหมายของป มค าสงตาง ๆ
New สราง Content Item Category Section
Edit แกไข content item category section
Publish เปดใหผอนสามารถเหนได
Unpublish ซอนไมใหผอนสามารถเหน
Trash ลบ
Save บนทกและกลบไปยงหนากอนหนา
Close ยกเลกการสรางหรอการแกไข และปดหนาตาง
View Site แสดงหนาเวบทผานการแกไข
Joomla สามาราถสรางเวบไซตไดหลากหลายประเภท เชน
bdquo เวบทา (Portals) เวบทรวบรวมลงกเวบไซต และบทความตางๆ โดยการจดหมวดหมใหดงาย และมหนาทน าพาผชม ไปยงเวบอนๆทเกยวของ bdquo เวบไซตเชงพาณชย (Commercial web sites) bdquo เวบไซตทใชในองคกร (Intranet web sites) bdquo เวบไซตทไมแสวงหาก าไร (Non-Profit web sites) bdquo เวบไซตสวนตว (Personal web sites) bdquo เวบไซต Flash (Integrated flash sites)
Joomla สามารถใชงานไดหลายอยาง เชน
bdquo อพเดทเวบไซตดวยขาว บทความ และรปภาพ bdquo งายตอการสรางเนอหาของคณดวยเมน เชน ผลตภณฑ gt ฮารดแวร gt เครองเลนดวด หรอ ผลตภณฑ gt ฮารดแวร gt เครองเลนซด bdquo อพโหลด MS Word MS Excel และ Acrobat PDF เพอใหดเอกสารได bdquo จดการ Banner เชน โฆษณา bdquo สรางโพล (แบบส ารวจ) bdquo จดการเวบลงค bdquo จดการ FAQ bdquo จดการขาวทอยในรป flash bdquo จดการกบ multi media flash และไฟลรปภาพ jpg pif bmp และ png
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
36
bdquo จดการกบการปอนขาวจากแหลงขาวทมาจากเวบไซตตางๆ bdquo จดการกบ contact และ อเมล จากหนาตางๆ bdquo ใหระดบการเขาถงขอมล (access) กบผใช bdquo จดการหนา Archive bdquo จดการ components modules และ templates ทพฒนาขนมาเพมเตม เชน e-commerce forums รปภาพ ปฏทน และก าหนดการ help desk เปนตน
ความสมพนธระหวาง Section Category และ Content item (article)
section หมวดหมหลก
category หมวดหมยอย
content item เนอหา ขอมลหรอบทความ
Section เปรยบเหมอนเปน Folder ใหญ ซงภายในจะเกบ Folder ยอคอ Category และภายใน Category จะเปนทเกบ Content Item (Article) หรอไฟลเอกสารและไฟลขอมลตาง ๆ ดงรป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
37
ตวอยางโครงสรางการจดเกบเนอหา (content)
การจดการ Section Section (หมวดหมหลก) ท าหนาทจดเกบ Category (หมวดหมยอย)
bdquo การเขาสสวนการจดการ Section bdquo การสราง Section bdquo การลบ Section bdquo การแกไข Section bdquo การเปดและซอน section
การสราง Section
1 คลก Administration Menu แลวเลอกค าสง Content -gt Section Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
38
2 กดทป ม ก าหนดTitle และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
ตว joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
39
3ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย
- Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอก าหนดเสรจเรยบรอยใหกดป ม หรอ
การลบ Section 1 เขาสสวนการจดการ section (section manager)
2 เชคเครองหมาย ท Section ทตองการลบ
3 กดป ม (การลบ Section นนภายในตองไมม Category ใด ๆ อย)
การแกไข Section 1 เขาสสวนการจดการ section (Section Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Section ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
40
3 กดป ม หรอคลกทลงค section ทตองการ เพอเขาสการแกไข Section
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Section 1 เขาสสวนการจดการ section (section manager) 2 หากตองการเปด Content ใด ๆ ทอยภายใน Section นน ใหปรากฏบนเวบไซต สามารถท าไดโดย
3 คลกเครองหมาย หนา section หรอ content ทตองการ แลวกดป ม หากตองการปด หรอไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
41
แบบฝกหดการสราง ลบ แกไข ซอน Section
ค าสงท 1 ใหนกเรยนสราง Section ขาวดงน 1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 2 ใหนกเรยนแกไข Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 เนอหา
4 กจกรรม 5 แบบฝกหด
ค าสงท 3 ใหนกเรยนลบ Section ขาวดานบนดงน
1 เกยวกบเรา 2 บคลากร
3 กจกรรม 4 แบบฝกหด
หลงจากท าตามแบบฝกหดเสรจแลวใหนกเรยน แกไขเปนชอเกยวกบเวบของนกเรยน
ทง 4 รายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
42
การจดการ Category Category (หมวดหมยอย) ท าหนาทจดเกบ Content Items (เนอหา ขอมลหรอบทความ) bdquo การเขาสสวนการจดการ Category bdquo การสราง Category bdquo การลบ Category bdquo การแกไข Category bdquo การเปดและซอน Category
การเขาสสวนการจดการ Category (Category Manager)
1 คลก Administrator menu แลวเลอกค าสง Content =gt Category Manager
2 กดทป ม ก าหนด Title และ Alias Alias ควรตงเปนภาษาองกฤษ จะดทสด แตถาวางไว
joomla จะดงวนทและเวลามาแทน Alias ทวาง หรอเปนภาษาไทย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
43
3 ก าหนดระดบของ ผทสามารถเขามาดในสวนของ Access Level ซงประกอบดวย - Public ทกคนสามารถเปดดได - Registered เฉพาะผทผานการ Log in เขาระบบสมาชกจงจะสามารถเปดดได - Special ส าหรบผทอยกลมพเศษ(กลมทแกไขขอมลได)เทานนทเปดดได
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การลบ Category สามารถ 1 เขาสสวนการจดการ Category (Category manager)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
44
2 เชคเครองหมาย ของ Category ทตองการลบ
3 กดป ม (การลบ Category นนภายในตองไมม Content ใด ๆ อย)
การแกไข Category 1 เขาสสวนการจดการ Category (Category Manager) 2 เชคเครองหมาย ทกลองสเหลยม หนาชอ Category ทตองการแกไข
3 กดป ม เพอเขาสการแกไข Category
4 เมอแกไขเสรจเรยบรอยใหกดป ม หรอ
การเปดและซอน Category 1เขาสสวนการจดการ Category (Category manager) 2หากตองการเปด Content ใด ๆ ทอยภายใน Category นน ใหปรากฏบนเวบไซต สามารถท าได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
45
คลกเครองหมาย หนา Category หรอ content ทตองการ แลวกดป ม หากตองการปด หรอ
ไมใหแสดง section หรอ content ใหกดป ม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
46
แบบฝกหด
การสราง Category
ค าสง ใหนกเรยนสราง Category
1 เกยวกบเรา (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
2 บคลากร (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
3 กจกรรม (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
4 แบบฝกหด (Section) - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip - helliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphelliphellip
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
47
แบบฝกหด
การสราง Content Item
ค าสงท 1 ใหนกเรยนสราง Content item แบบแทรกรปภาพ 4 Content เพอใสในหวขอ 1 และ 2 ของ Section ค าสงท 1 ใหนกเรยนสราง Content item แบบสราง Link ภายใน และภายนอก 4 Content เพอใสใน
หวขอ 3 และ 4 ของ Section
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
48
การแกไข Configuration กอนทจะท าการเปลยนคาตางๆ ไดนน ให Set File Permission ของไฟล configurationphp เปน
ldquo777rdquo กอน และเมอบนทกคาการเปลยนแปลงแลว กเหมอนเคยคะ เปลยนกลบมาเปน ldquo644rdquoดวยเพอความปลอดภย
กอนท าการ config คาตองก าหนด permission ของไฟล configurationphp ใหเปน 777
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
49
1Site Site Settings รายละเอยดในการใชงาน FTP (ในทนไมใช)
- Site Offine ปกตจะก าหนดเปน No ไว หมายถงวาขณะทผดแลระบบเขามาจดการเวบไซต ผชมกยงดขอมลเวบไซตไดตามปกต แตถามความจ าเปนยงไมตองการใหเขาชมเวบไดจนกวาจะเพมแกไขขอมลเสรจ กใหก าหนดเปน Yes ซงถามผชมเขาเวบจะมขอความแจงวาก าลงปรบปรงเวบไซตอย (Offline Message)
- Site Name ชอเวบไซต
- Editor Editor ทตงเปน default ส าหรบใชงาน
- List Length จ านวนรายการขอมลทตองการใหแสดงในหนาตางๆ
- Feed Lenght จ านวนรายการขอมลใน Feed
Metadata Settings ใสรายละเอยดคาแทกเมตาของเวบ และ ค าส าคญในแทกเมตาของเวบ
- Global Site Met Description รายละเอยดเวบไซต เปนเวบเกยวกบอะไร
- Global Site Meta Keywords ค าส าคญทใชในการสบคน (คดวาผชมจะคนหาใน Search
Engine อยาง Google วาอะไร จงจะเจอเวบไซตเราได กใสค านน)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
50
SEO Settings
SEO นนยอมาจาก Search Engine Optimization เปนการปรบแตงเวบเพอใหเวบไซตตดอนดบในผลการคนหาหนาแรกๆ ของ เวบ Search Engine อยาง Google
ในสวนนจะเปนการปรบแตงให Search Engine เขาใจและคนหาขอมลในเวบไซตเรา
2 System ก าหนดคาการท างานตางๆ ใหกบระบบ ส าหรบผเรมตน แนะน าใหใชคาทมาขณะตดตง Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
51
3 Server (เซรฟเวอร )
ก าหนดคาการท างานตางๆ ของ Server บางสวนเราไมควรไปแกไขเพราะอาจท าใหกระทบตอการท างาน ทควรแกไข คอ Local Settings ใหก าหนดเปนเวลาของไทย UTC+0700 สวนคาอนๆ ยงไมตองปรบอะไร
ตงคาภาษา Time Zone เลอก UTC +0700 Bangkok Hanoi Jakata
การตงคา FTP เลอกเปดใชงาน FTP ใส FTP ชอผใช และ FTP รหสผาน บนทกขอมลเสรจการตงคาคอนฟค หลงจาก config คาเสรจแลว ตองก าหนด permission ของไฟล configurationphp ใหเปน 644 เพอความปลอดภย
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
52
ความหมายของป มค าสงบน Toolbar
ตวหนา ตวเอยง ขดเสนใต ตวขดทบ
จดขอความ ชดซาย ชดขวา กงกลาง เตมบรรทด
ชนดตวอกษร
ขนาดตวอกษร
ตดขอความ คดลอกขอความ วางขอความแบบ Plain Text วางขอความแบบ Word เลอกทงหมด
สรางรายการแบบสญลกษณ สรางรายการแบบล าดบ
ยกเลก ท าซ า
ใส Link น า Link ออก ใส Link ภายในหนาเดยวกน
ใสรปภาพ
เปด pop up เพอแกไขขอมลในรปแบบ HTML
คนหาหรอแทนท
วนท เวลา
รปอมยม
สตวอกษร สพนหลงตวอกษร
ลบรปแบบทถกก าหนด
ตวหอย ตวยก
ตวอกษรพเศษ
เสนคน
ใส Flash ใสไฟล Multimedia (Flash Quicktime Shockwave Windows Media Real Media)
ใสตาราง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
53
การจดการตาราง (Table) การแทรกตาราง
1 ใหกดป ม ท Toolbar ของ TinyMCE Editor
2 ก าหนดคาตาง ๆ ดงน Columns จ านวนของแถวในแนวตง Rows จ านวนของแถวในแนวนอน Cellpadding ระยะหางระหวางชอง Cell กบตวอกษรภายในชอง Cell Cellspacing ระยะหางระหวางชอง Cell Alignment ก าหนดใหตารางชดซาย ขวาหรอกงกลาง Width Height ก าหนดความกวางและความสงหนวยเปน pixels (สามารถเปลยนหนวยเปน ได โดย เตม ตอทายคาทก าหนด)
จากนนใหกดป ม เพอแทรกตาราง
3 กดป ม เพอแทรกตาราง
การแทรกและลบ Row หรอ Column
1 คลกชอง Cell 2 เลอกกดป มค าสงบน Toolbar ดงน
แทรก Row ใหมตรงดานบน แทรก Column ใหมกอนหนา
แทรก Row ใหมตรงดานลาง แทรก Column ใหมดานหลง
ลบ Row ลบ Column
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
54
การรวม ชอง Cell 1 คลกชอง Cell จากนนกดป ม จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ก าหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยดต าแหนงจากชอง Cell ทเลอกไวไปดานซายในกรณ Column และดานลางในกรณ Row) 3 กดป ม Update (การรวมจะเรมรวมจากทางขวาและดานลาง ของชอง Cell ทคลกเลอกไว)
การแยก ชอง Cell 1 คลกชอง cell ทไดถกรวมไว จากนนกดป ม
การจดการรปภาพและ MOSImage
สามารถเลอกใช Tools ในการจดการรปภาพไดแก
ป ม Images บน Toolbar
MOSImage
ป ม images บน toolbar
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
55
การแทรกรปภาพ 1 กดป ม ท TinyMCE Editor จะปรากฏสวนก าหนดคาตาง ๆ ดงรป
2 ระบ Image URL เชน httptulipbuacth~nititjimagesstoriesclockjpg 3 ก าหนด Image description (ค าอธบายรปภาพ) 4 แลวกดป ม
การปรบขนาดของรปภาพ ม 2 วธ วธแรก 1 คลกทรปภาพจะปรากฏจดสเหลยมเลก ๆ ตามขอบรปภาพ
2 ใชเมาสคลกคางไวแลวลากออกหรอเขา เพอปรบขนาดของรปภาพ
วธทสอง 1 คลกทรปภาพ แลวกดป ม ท TinyMCE Editor
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
56
2 คลก Tab Appearance แลวก าหนดขนาดของรปในชอง Dimensions (กวาง x ยาว) มหนวยเปน pixels (หากไมระบความกวาง x ยาว รปจะแสดงตามขนาดของไฟลรป) นอกจากนยงสามารถปรบขอความใหลอมรอบรปภาพในลกษณะตาง ๆ ไดโดยเลอกทสวนของ Alignment เมอปรบคาตาง ๆ เปนทเรยบรอยแลวใหกดป ม เพอบนทก MOSImage
การจดการไฟลรปภาพ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
57
เพอจดการโฟลเดอร เพอสะดวกในการจดการไฟลใหตงชอเปนภาษาองกฤษ
เลอกไฟลทจะ Upload
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
58
ตองแตงขนาดภาพใหพอด กอน
การแทรกรปลงใน Content item คลกทภาพท Upload เขามา แลวกดป ม Insert
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
59
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
60
การเปลยนแถบเครองมอ ตองตดตง Plug in เพมเตม โดยคลกท Extensions -gt Plugin Manager
เลอก Plug in TinyMCE 20 แลวกดป ม Edit
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
61
แถบเครองมอจะเปลยนไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
62
สามารถดโคด html ได
การแสดงเนอหาเฉพาะบางสวนกรณเนอหายาว ดานลางไมไมแสดง ใน Content item คลกทเนอหาทตองการแลวคลกป ม Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
63
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
64
จะปรากฏค าวา Read more หนาเวบ เมอกดทป ม Read moreจะแสดงเนอหาตอไป
ถาตองการใสค าอนทไมใชค าวา Read more
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
65
การแบงหนาเนอหา คลกทป ม Page Break
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
66
Menu และการเชอมโยงภายใน Menu เปนชองทางทใหผชมเลอกคลก เพอไปยงขอมลสวนอนๆ ของเวบไซต ซงเมนใน Joomla นนมใหเลอกใชหลายแบบ ผดแลสามารถก าหนดไดวาตองการแสดงเมนแบบใดบาง และสามารถเพมกลมเมน หรอลบกลมเมนเดมทตดมากบขอมลตวอยางไดตามตองการ
1 Internal Link ลงคไปยงขอมลภายใน
- ลงคไป Article เรองใดเรองหนง - ลงคไป Article ทงหมดใน Category ทก าหนด (หมวดหมยอย) - ลงคไป Article ทงหมดใน Section ทก าหนด (หมวดหมหลก) - ลงคไปหนาแรก (Front Page) (เชน เมน Home)
และสามารถก าหนดรปแบบการแสดงผลไดอกวาจะใหแสดงเฉพาะชอเรองของเนอหาบทความ หรอวาจะใหแสดงเนอหาตอกนลงมาเหมอนกบ Blog กไดคะ
2 Extenal Link ลงคไปยงเวบไซตภายนอก 3 Separator ใชท าเสนคนรายการเมน 4 Alias
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
67
การสรางกลมของเมน
1 คลกท Menu Manager เลอกกดป ม เพอสรางกลมเมนหลกใหม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
68
การสราง Menu Item
1 คลกเลอกกลมของเมนทจะสราง Menu Item แลวป ม
2 เลอกประเภทของการสราง Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
69
3 ก าหนดรายละเอยดเกยวกบเมน
4 กดป ม Save
- ก าหนดชอเมน (Title) - ก าหนดกลมเมนทจะแสดง (Display in) - ก าหนดล าดบในการแสดงเมนในกลมของเมน (Order)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
70
ตวอยางการสรางเมนประเภทตาง ๆ 1 การสรางเมนแบบ Link ไป Section
จากตวอยางดานลางจะเหนลสตรายการหมวดหมยอย (Category) ของหมวดหมหลก (Section) ทเลอก
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
71
2 การสรางเมนแบบ Link ไป Category จากตวอยางดานลางน จะเปนการสรางเมน Link ไป Category การอบรมภายใน ซงจะแสดงรายการ Article ใหเลอก
2 การสรางเมนแบบ Link ไป Article จากตวอยางดานลาง เปนการ Link เมนไปท Aritcle สวนเกษตรเฉลมพระเกยรตโดยตรง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
72
แบบฝกปฏบต การออกแบบเมน
ค าสง ใหนกเรยนออกแบบเมน โดยดจากตวอยางดานลางน แลวเขยนโครงสรางเมนของตนเองออกมาใสกระดาษแลวจงปฏบตลงเวบไซตของตนเอง ตวอยางการออกแบบเมน Main Menu (เมนหลก) ประกอบดวยเมนยอยดงน
1 เรยนจน (ลงคไป Section เรยนจน)
- ไวยกรณจน (ลงคไป Category ไวยกรณจน) - ค าศพท (ลงคไป Category ค าศพท) - บทสนทนา (ลงคไป Category บทสนทนา) - ส านวนจน (ลงคไป Category ส านวนจน) - เรองนารเกยวกบภาษาจน (ลงคไป Category เรองนารเกยวกบภาษาจน)
2 บนเทงจน (ลงคไป Section บนเทงจน) ประกอบดวยเมนยอยดงน
- ประวตดารานกรอง (ลงคไป Category ประวตดารานกรอง) - ขาวแวดวงบนเทง (ลงคไป Category ขาวแวดวงบนเทง) - แนะน าซรย (ลงคไป Category แนะน าซรย)
3 เพลงจน (ลงคไป Section เพลงจน) 4 พาเทยวจน (ลงคไป Section พาเทยวจน) 5 ประเทศจน (ลงคไป Section ประเทศจน) 6 จปาถะ (ลงคไป Section จปาถะ) 7 รานหนงสอCD (ลงคไป Article รานหนงสอCD)
Top Menu (เมนดานบน) - เกยวกบ enjoychinese (ลงคไป Article เกยวกบ enjoychinese) - รานหนงสอCD (ลงคไป Article รานหนงสอCD) - สอนท าเวบไซต (ลงคไป เวบไซตภายนอก enjoydaynet) - สนคา Amazon (ลงคไป เวบไซตภายนอก aStore Amazon)
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
73
การสรางเมนใน Joomla เชอมไป Link ภายนอก เปนการสราง Link เชอมโยงไปยงทอน ๆ นอกเวบไซต เชน เวบ เปนตน โดย
1 ทเมน ldquoMenusrdquo เลอก ldquoTop Menurdquo จะเขามาหนา Menu Item Manager เลอกเมนทตองการสราง แลว คลกประเภทเปน External Link
2 กรอกรายละเอยดเมน ในชอง Link ใหใส URL ของเวบภายนอกทตองการเชอมไป แลวกดป ม Save Extension คออะไร Extension คอ สวนขยายของโปรแกรม การขยาย extension ใน joomla เปนโปรแกรมเสรมทเพมความสามารถอน ๆ ใหใชงานไดมากขน เชน เวบบอรด ซง Extension ของ joomla มดวยกน 3 ตว คอ components module plugin
รจก Extension 3 ตวนเลยดกวา
+ Component
Component เปนซอฟแวรอกประเภททสรางมาเปนสวนขยายเพอเพมความสามารถของ joomla ใหมความสามารถเพมขนจาก Content Web ธรรมดา ถาเปรยบใหเขาใจงาย Component คออวยวะของรางกายของเรา แตเปนอวยวะทมความสามารถพเศษท าใหรางกายสามารถท างานไดอยางไรขด จ ากด เชน component virtuemart คอสามารถชอปปงออนไลน ท าใหเวบของเราเปนเวบขายของได เปนตน
Component (คอมโพเนนท) เปรยบเสมอนโปรแกรมเสรมใหกบ Joomla ซงเมอตดตงแลว จะมทงเครองมอ เมนตาง ๆ เพมขนมา Joomla เปนโปรแกรมส าเรจรปโปรแกรมหนง Component เปนโปรแกรมส าเรจรปทถกตดตงเพมเขาไป ท าใหเหมอนวา joomla สามารถมเครองมอสงการไดมากขน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
74
เชน ตองการจดหมวดหมการดาวนโหลด กหา Component เกยวกบการดาวนโหลดมาตดตง เรากจะสามารถใช Component นจดหมวดหมการดาวนโหลดไฟลได ซงจะมเครองมออ านวยความสะดวกมาใหพรอมใชงาน การท าแบบส ารวจ ใช Component Poll เพอปอนขอความเกยวกบตวเลอก และการโหวต การสรางฟอรมส าหรบผใชงาน Component ทมเครองมอในการสราง Textbox ได สราง Listbox ได หรอ สรางป ม Submit ได มาจดสรางเปนฟอรมทตองการ
+ Module
Module คอสวนประกอบยอย หรอ window เลกๆ ทแสดงหนาเวบ ดานบน ดานลาง ดานซาย ดานขวา แลวแตเราจะออกแบบ และก าหนดต าแหนงของมนใน template และเปนโปรแกรมเสรมทชวยในการดงขอมลจากฐานขอมลภายในมาน าเสนอผาน หนา เวบ แตกมบางโปรแกรมทถงเอาขอมลจากภายนอกมาใสไวในเวบของเราไดเชนกน การท างานของ Module นเองทท าใหเวบไซตทสรางจาก Joomla CMS มการน าเสนอขอมลทมความสวยงาม และหลากหลาย เชน โมดลการน าเสนอขอมลดชนซอขาย-หลกสทรพย โมดลแสดงรายการบทความใหม โมดลแสดงสถตผเยยมชมเวบไซต เปนตน
Module (โมดล) คอสวนเสรมการแสดงผลอยทดานหนา Website ถาหากด Template แลว จะพบวา แตละจดของ Template จะมต าแหนงของโมดลเปนสวน ๆ เชน top left right user1 user2 bottom ฯลฯ
วธดต าแหนงของ Module httplocalhostชอเวบindexphptp=1 ต าแหนงเหลานเรยกวา Position แตละ Template มต าแหนงของโมดลทตางกนไป ค าวา left
หรอ right ไมจ าเปนตองอยทขางซาย หรอ ขวา เสมอไป มนอาจจะไปอยทดานบน หรอ ดานลางกได เพยงแตชอทปรากฏ เปนเพยงชอเรยกต าแหนงของโมดลนน ๆ
โมดล มความสามารถในการยายต าแหนงการแสดงผล ไปยงสวนอน ๆ ของ Template ได ตามต าแหนงเทาท Template นน ๆ จะมใหใช อะไรท Website เราไมม แตอยากใหม และแสดงผลอยใหเหน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
75
นนคอโมดล เชน อยากจะมสวนส าหรบใหผใช login เขาระบบ จะตองท าการเพมโมดลในระบบขนมา แลวน าไปวางต าแหนง left โมดล login น กจะไปปรากฏทดานซายของ Website เปนตน
โมดล สามารถปรบตงคาของตนเองไดระดบหนง เพอความแตกตางในการแสดงผล แตบางครง Component กตองใชงานควบคกบโมดล เพราะตว Component ไมสามารถแสดงผลโดยตรงได จงคอยเปนตวจดการสงตาง ๆ ผานทางเครองมอทเพรยบพรอม อาศยโมดลท าหนาทน าสงท Component นนเตรยมไว ไปแสดงผลอกท
ความแตกตางระหวางคอมโพเนนท กบโมดล ทมกเหนไดชดคอ หากตองการเพมความสามารถใหกบ Joomla ในรปแบบทตองมการบนทกลงฐานขอมลดวยแลว โมดลเองมกจะไมสามารถท าได เพราะมนไมมเครองมอจดการตาง ๆ มนไมใชโปรแกรมเสรมเหมอน Component โมดลเปนเพยงแคการแสดงผล แตตวทจะจดการและควบคมการแสดงผล กคอโปรแกรมเสรม ซงอาจเปน Component หรอ ตว Joomla เองกได และจะเหนไดวา เมอใดกตามทมการบนทกสงใหม ๆ ลงฐานขอมลแลว เทากบวา ฐานขอมลนน มตารางใหมเกดขนมา ซง Component เองไดชออยแลววาเปนโปรแกรมยอย โปรแกรมเสรม กยอมมเครองมอจดการกบสงเหลานอยแลว ตวอยางเชน ตองการสรางแบบฟอรมใหผใชกรอกขอมล เรากจะไปหาโปรแกรมสรางฟอรม (Component) มาตดตงให Joomla แลวกจดการสรางชองใสขอมล ความกวางเทาไหร สามารถพมพอะไรลงไปไดบาง ทงหมดกชอง แลวกบนทกสงทไดท าไว
+ Plugin
Plugin คอสวนเสรม เพอเพมความสามารถของจมลา และ Component ตางๆทมอยหรอตดตงใหม เปนสวนแกไขเพมเตมใหกบโปรแกรมหลกเพอเพมความสามารถใหกบความสามารถเดมทมอยแลวใหท างานไดดยงขน
Plugin อาจจะเขาใจยากสกหนอย เพราะมนกคอสวนทแสดงผลใน Website เชนเดยวกน ซงอาจจะสบสนกบการแสดงผลแบบโมดล แตความแตกตางกนมนอยท Plugin นน ไมม Position หรอต าแหนงในการแสดงผล เราไมสามารถก าหนดไดวา จะใหอยบน ลาง ซาย หรอขวา จะใหอย Position ทชอวา left right หรอ user1 แต Plugin จะเปนผลในการแสดงแบบแฝงตว ในสงทมการแสดงผลอยแลว เชน การคนหา อยากไดชองคนหา (Search) ใหผใชงานพมพค าคนทตองการ แลวกดป มคนหาได จด
นทเราตองน ามาแสดงกคอ โมดล แตจะคนหาอะไรไดบาง คนหาจากเนอหาไดไหม คนหาจาก Section หรอ Category ไดไหม คนหาจาก Tag ไดไหม คนหาจากสวนหนงสวนใดของเนอหา ไดไหม Plugin จะเปนตวเสรมใหสงทแสดงผลอย มความสามารถเพมมากขน จะชวยใหคนหาจากสงทตองการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
76
ได ถาหากมโมดล Search อย แต ปด Plugin เกยวกบการ Search ไป โมดลกท าอะไรไมได ไดแตเพยงแสดงชอง Search กบป มเทานน แตไมสามารถคนอะไรไดเลย กรณเดยวกน ถาอยากจะใหผใชงาน สามารถ Login เขาระบบได เรากตองหาโมดล Login มาไวใน
ต าแหนงใดต าแหนงหนง เพอแสดงผลใหผใชสามารถพมพ Username และรหสผานได แต Plugin ทเกยวขอกบการ Login จะเปนตวชวยตรวจสอบวา สงทผใชพมพมานน สามารถน าไปใชยนยนเพอท ากระบวนการ Login ไดหรอไม
ศนย รวม Plug in httpextensionsjoomlaorg
ตวอยาง การตดตง Plug in Module และ Component การตดตง (ตวอยางการใช MavikThumnailsชวยจดการขนาดรปภาพ)
1 คลกทเมน Extensions-gt InstallUninstall เพอตดตงโปรแกรม
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
77
2 คนหาขอมลทจะตดตง
- Upload Pakage file ใหดไฟลตนฉบบวาเปนไฟลประเภทไหน - ถาเปน Install from Directory จากไฟลทแตกไวแลวท Server - Install From URL จากเวบไซต
จากภาพดานลางเปนการเลอก Upliad Package File
3 กดป ม Upload file to Install จะปรากฏหนาจอทตดตงสมบรณดงน
4 เปดใชงานโดย ไปท Extensions-gtPlugin Manager
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
78
คลกเลอก Plugin ทตองการเปด
เลอก Enable เพอใชเปดใชงาน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
79
5 สราง article content ใหมเพอทดสอบ
6 ยอรปโปรแกรมจะยอรปให 1 รป โดยเมอแสดงผลจะยงไมโหลดรปใหญขนมา โหลด
เฉพาะรปเลกให ซงโดยปกตถาไมม Plugin จะไมมยอรปและรปขยาย ในทนเมอน าเมาสไปคลกทรปเลกจะโปรแกรมจะดงรปใหญมาแสดงให ดงน
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
80
การใสไฟลวดโอ youtobe 1 ใหเขาไปทเวบ httpjoomlaworksgr แลวโหลด Allvedio
2 ในทนจะตดตงแบบ Install from URL โดยคดลอก URL เวบไปสงในโปรแกรม Joomla
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
81
3 คลกทเมน Extensions-gtInstallUninstall แลวใส URL ทคดลอกมาในชอง Install from URL
4 ไปท Extensions-gtPlugin Manager เพอเปดใชงาน Plugin
โดยคลก Enabled Yes
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
82
5 คลกดวธการใชงาน จะมโคดทใชรวมกนกบไฟลประเภทตาง ๆ มาให เวลาใชใหคดลอกโคดไป
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
83
ตวอยางการใสYoutube หา URL video มาใสในค าสง
youtubeDV81bAghxBUyoutube ไวใน article Content โดยสราง Content ลองรบไว
อะไรไมใชไมควรเอาคางไวบนเวบ ถาไมจ าเปนใหถอนออก เลอกใชใหนอยทสด
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
84
ผลลพธทได จะมหนา Youtube ท Link ไปยง URL ของเวบภายนอก ดงน
Component Contact
1 คลกทเมน Component-gtContacs-gtCategories สราง category รองรบกอน อยางนอย 1 Category
2ใสรายละเอยดของแตละรายการ โดยคลกทเมน Component-gtContacts-gtContacts
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
85
2 สรางเมน เพอแสดงผล Content ของ Contacts แตละรายการ
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
86
3 พมพรายละเอยดเมน
เมนทได
ตวอยางเมอคลก Link
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
87
Component News Feeds อานเนอหาจากตนทาง ปองกนลขสทธขอมล แทนการคดลอกเนอหามาไวในเวบ ไดแกขาวทไมใชบทความ ถาเปนเนอหาในขาวทวเคราะหไวเปน Contents ตองขออนญาตกอน
1 คดลอก URL เวบขาวไป
2 สราง Category ขาวกอน
3 สรางเนอหา ขาว
ใส Link URL ขาวทคดลอกมา
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
88
4 สรางเมน News Feed รองรบขาวทสรางไวจาก Link
แสดงทก Category แสดง Category เดยว แสดง ขาวเลย สามารถปดรปภาพ หวขาวใหมเองได
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
89
การใชโมดลรวมกบ Component การท า Polls 1 คลกทเมน Components-gtPolls
ก าหนดหวขอ และตวเลอก
2 Polls จะท างานรวมกบโมดล ใหคลกทเมน Extensions-gtModule Manager
เลอกโมดล Polls
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
90
3 เลอกต าแหนงทใหแสดง Polls
เลอกค าถามทจะแสดง
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
91
Template คอ ไฟลทใชประกอบกบหนาเวบไซตหลาย ๆหนา หรอเทยบไดกบหนากากของเวบไซต เปนสวนส าคญส าหรบหนาตาของเวบไซต ชวยใหงายตอการปรบแตง เพม แกไข ขนตอนการแกไข Template
1 คลกทเมน Extensions-gtTemplate Maneger
แลวเลอก Template ทตองการแกไข
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
92
2 การแกไขโคด ท Edit HTML ใหคลกทป ม
การจดการเกยวกบ Template การด LayoutTemplate ใหคลกทชอ Template แลวคลกทป ม Preview
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
การท าโครงงาน E-learning ดวย Joomla by hellip ครป
93
การ Download Template - wwwcolorpacknet - wwwjoomlashackcom - wwwjoomlatemplatesdownloadcom - wwwjoomla24com
ตวอยาง wwwcolorpacknet เปน Template ขน advance ขนมาอก มทงฟร และขาย
ไฟลทโหลดมา โครงสราง Template จะถกเกบไวในโฟลเดอร Template
การไขรปภาพ ใหบนทกชอเดม เกบไวทเดม ถาจะแกไขนามสกล ตองหาใหเจอวาอยใน Html หรอ phpหรอ CSS
