joomla&1.7 for$beginner · what is joomla ? • open source cms like o drupal o wordpress o...

42
1 JOOMLA 1.7 for beginner 17 – 18 September 2011, Maejo University

Upload: others

Post on 17-Jun-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

1  

JOOMLA  1.7  for  beginner  

17  –  18  September  2011,  Maejo  University                      

           

                                           

Page 2: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

2  

Our  Topics  

• Joomla  Overview  and  classical  web  layout  • Joomla  templates  • Contents  (News  and  many  pictures  post)  • Post  and  attach  Office  2007-­‐2010  files,  Pictures,  Video  Clips,  Links  (Embed,  External  Links)  

• Webboard  or  Discussion  board  • How  to  make  photo  gallery  • Share  post  to  social  network  

                                                               

Page 3: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

3  

1.  Joomla  overview  and  classical  web  layout    

   What is Joomla ?

• Open source CMS like

o Drupal

o Wordpress

o Open CMS

o Mambo

o Etc.

• Based on PHP Programming language

• Easy to install, use and configure

Good points

• It’s free

• Thousands of free modules and templates

• Easy to use. You can do by yourself

• A lot of communities

• Six-months release cycle

• Good for SEO

Bad Points

• Some modules are not free  

Page 4: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

4  

• Joomla  overview  and  classical  web  layout  

Joomla Users?  

   You Know Rights 2008 (http://html.knowyourrights2008.org/)      

   Spears School of Business (http://spears.okstate.edu/)

And more..

(Ref: http://community.joomla.org/showcase/)    

Page 5: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

5  

• Joomla  overview  and  classical  web  layout  1.1 Joomla user interface

• Frontend สําหรับผูใชงานเว็บไซต

• Backend สําหรับผูดูแลเว็บไซต

 1.2 Joomla Backend

Joomla เปน CMS ที่แบงแยกระหวาง Frontend และ Backend ชัดเจน คือมีสวนของการแสดงผลเว็บไซต

และสวนของการจัดการเว็บไซตแยกจากกันตางหาก ในการ login เขาสูระบบการจัดการเว็บไซต เขาไปที่หนา

http://www.faed.mju.ac.th/jl/ชื่อ account/administrator และ login เขาสูระบบ โดยใชขอมูลดังนี ้

Username = admin

Password = 123456 (เพื่อความปลอดภัย ควรเปลี่ยนในกรณีตองการใชงานจริง)

Page 6: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

6  

เมื่อล็อกอินเขาสูระบบแลว เขาสู control panel ของ Joomla ดังนี้

1. เมนูหลักของสวนการจัดการเว็บไซตดวย Joomla

2. short cut ของเมนูหลัก เพื่อใหงายตอการเรียกใชงาน

3. แสดงจำนวนสมาชิกที่กําลังดูเว็บไซตในสวนของ Frontend

4. แสดงจํานวนสมาชิกที่กําลังจัดการเว็บไซตในสวนของ Backend

5. จํานวนขอความในกลองขอความสวนตัว

6. คลิ้กเพื่อดูเว็บไซตในสวนของ Frontend

Page 7: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

7  

1.3  Joomla  Main  Menu    

1.3.1 Sites – เมนู sites จะจัดการเกี่ยวกับการตั้งคาตางๆ ของเว็บไซต การจัดการขอมูลสวนตัวของผูใชงาน

และแสดงขอมูลตางๆ ของโฮสต

1.3.1.1 Global Configuration

1. Site offline เปนฟงกชั่นเมื่อตองการปดการใชงานเว็บไซตชั่วคราว เชน

ในกรณีตองการอัพเกรดปลั๊กอินหรือโมดูลตางๆ หรือในกรณีเว็บไซตขัดของบางประการ

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

Offline Message (2)

2. Offline Message แสดงขอความแจง เมื่อมีการเซ็ตใหเว็บไซตเปน Site Offline

3. Default Access Level กําหนดสิทธิ์การเขาถึงขอมูลภายในเว็บไซต โดยปกติแลวจูมลาจะเซ็ตใหเปน Public

คือ ทุกคนสามารถเขาถึงขอมูลตางๆ ภายในเว็บไซตได แตสามารถกําหนดเปน Registered ได

ในกรณีที่ตองการใหผูที่สมัครเปนสมาชิกเว็บไซตเทานั้นที่สามารถเขาถึงขอมูลหรือเนื้อหาตางๆ

ในเว็บไซตได

4. Default List Limit

Page 8: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

8  

1.3.2 Users – เมนู users จะจัดการเกี่ยวกับผูใชงานเว็บไซต และกําหนดสิทธิ์การเขาถึงระบบตางๆ

ภายในเว็บไซต

1.3.2.1 Groups

สิทธิการเขาถึงเว็บไซตของจูมลา

1. ผูใชระดับ Registered (ลงทะเบียนเปนสมาชิก) - แกไขขอมูลสวนตัวได

2. ผูใชระดับ Author (นักเขียน) - มสีิทธิ์มากกวา Registered สามารถเขียนบทความในเว็บไซตได

3. ผูใชระดับ Editor (บรรณาธิการ) - มีสิทธิ์มากกวา Author คือ สามารถเขียนบทความ

และตรวจแกบทความที่ Author เขียนขึ้นได

4. ผูใชระดับ Publisher (ผูเผยแพรบทความ) - มีสิทธิ์มากกวา Editor สามารถเขียนบทความ ตรวจแกบทความ

และเผยแพรบทความได

5. ผูดูแลเว็บไซตระดับ Manager - สามารถเขาไปจัดการไฟลตางๆ ในสวน Backend,

สั่งลบหรือแกไขบทความได, แกไขเมนูตางๆ และจัดประเภทหมวดหมูบทความได

6. ผูดูแลเว็บไซตระดับ Administrator - มีสิทธิ์มากกวา Manager จัดการเมน ูปลั๊กอิน และคอมโพเนนทตางๆ

7. ผูดูแลเว็บไซตระดับ Super Administrator - มีสิทธิ์มากที่สุด สามารถตั้งคา configuration ตางๆ

ของเว็บไซตไดทั้งหมด

ซึ่งนอกจากกลุมตางๆ ทั้ง 7 กลุมแลว ผูดูแลระบบสามารถเพิ่มกลุมของผูใชงานเว็บไซตไดอีก โดยเลือกเมนู User >

Groups > Add New Group

Page 9: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

9  

1.3.2.2 User Manager

เปนสวนจัดการผูใชงานของเว็บไซต เมื่อตองการเพิ่ม ลบ

แกไขรายละเอียดของผูใชงานเว็บไซตสามารถเขามาจัดการในสวนนี้ได

Workshop 1 ทดลองสราง, แกไข, activate, block, unblock, delete user account

1. เลือก Users > User Manager > Add new user

2. เพิ่มขอมูลในสวนของ Account Details

ทําการเพิ่มขอมูลของผูใชงานใหมในขอ (1) – (4)

สําหรับ (5) ใหเลือกเปน Yes หากตองการใหผูใชงานใหมคนนี้สามารถรับอีเมลตางๆ จากเว็บไซตได

(6) เลือกเปน Yes เมื่อตองการ Block ผูใชงานใหม ไมใหล็อกอินเขามาใชงานเว็บไซตได

3. กําหนดสิทธิ์ใหกับผูใชงานใหมในสวนของ Assigned for Groups

Page 10: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

10  

4. เลือก Save & Close เพื่อจบการเพิ่มขอมูล

1.3.2.3 Mass Mail Users

เมื่อตองการสงอีเมลถึงสมาชิกทั้งหมดในเว็บไซต หรือสมาชิกบางกลุม สามารถใชฟงกชั่นนี้ได

1.3.2.4 Options - ปุม Options จะมีอยูทุกหมวดของเมนู Options ของ Users มีดังนี้

(1) เลือก Yes หากตองการใหเว็บไซตนี้สามารถสมัครสมาชิกได แตหากเลือก No

เว็บไซตนี้จะไมสามารถสมัครสมาชิกได

(2) กําหนดใหผูที่สมัครเขามาใหม มีสถานะเปน Registered

(3) ตองการใหผูสมัครใหมทําการยืนยันการเปนสมาชิกหรือไม a. Self เมื่อตองการใหมีการยืนยันผานอีเมล

b. Admin ตองการใหมีการยืนยัน แตผูยืนยันคือ Admin เทานั้น ที่ตองทําการ Enable ให

c. None ไมตองการ เมื่อสมัครสมาชิกแลวสามารถล็อกอินเขาใชงานไดเลย

(1) เพิ่มขอความหนาหัวขอ Subject ของอีเมลที่สงไปถึงผูใชงานใหม

(2) เพิ่มขอความตอทายอีเมลที่สงไปถึง

Page 11: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

11  

1.3.3 Content – เมนู Content จะจัดการเกี่ยวกับการเกี่ยวกับบทความและหมวดหมูทั้งหมดของเว็บไซต

รวมถึงไฟล Media ทั้งหมดดวย

1.3.3.1 Article Manager

หัวใจสําคัญของบทความตางๆ ในจูมลา สามารถเพิ่ม ลบ แกไข หมวดหมูและบทความทั้งหมดไดจากเมนูนี ้

Page 12: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

12  

Workshop 2 สรางหมวดหมูและเนื้อหาภายในเว็บไซต

ทําการสรางหมวดหมูเว็บไซตดังนี ้

• ขาวสาร

• เอกสารประกอบการบรรยาย

• ประกาศทั่วไป

และทำการเพิ่มบทความในหมวดหมู หมวดหมูละ 3 บทความ

1. ทําการสรางหมวดหมูของบทความ โดยเลือก Content > Category Manager > Add new category

2. ใสชื่อหมวดหมูในชอง Title แลวทําการ Save & Close

3. สรางหมวดหมูใหครบ 3 หมวดหมู

4. สรางบทความในหมวดหมู โดยการเลือก Content > Article Manager > Add new article

(1) ชื่อเรื่องของบทความ

(2) กรณีตองการตั้งใหบทความนี้มี url เฉพาะ เชน http://www.faed.mju.ac.th/jl/toonz/my-new-article

ใหใส my-new-article ในชองนี้ ขอดีคือ งายตอการอาน และงายตอการคนหาดวยกูเกิ้ล

(3) เลือกหมวดหมูของบทความ

(4) สถานะของบทความ

• หากเลือกเปน Published เมื่อมีการเซฟบทความแลว บทความจะถูกนําเผยแพรในเว็บไซตทันที

• หากเลือก Unpublished บทความจะถูกเซฟไวในเว็บไซต แตยังไมถูกเผยแพรใหผูเขาชมเห็นทันที

ตองเปลี่ยนสถานะของบทความนี้เปน published กอนเทานั้น

(5) ตั้งคาการเขาถึงบทความนี ้

Page 13: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

13  

(6) กําหนดใหแสดงในหนาแรกของเว็บไซตหรือไม หากตองการใหบทความนี้แสดงในหนาแรกของเว็บไซตดวย ใหเลือก Yes

(7) เมื่อแกไขขอความเสร็จเรียบรอยแลว ใหเลือก Save & Close

(8) ทําการเพิ่มบทความอยางนอยหมวดหมูละ 3 บทความ (บทความในหมวดหมู

เอกสารประกอบการบรรยาย ยังไมตองแนบเอกสาร จะแนบภายหลัง)

ในสวนของ Article Text จะมีไอคอนเหลานี้อยูดานลาง อธิบายไดดังนี้

(1) เลือกเมื่อตองการลิ้งคไปยังบทความที่เคยเขียนไวแลว

(2) เลือกเมื่อตองการจะแทรกรูปภาพในบทความ

(3) เมื่อตองการแบงบทความที่ยาวมากๆ ใหแสดงเปนหนายอย

(4) เมื่อตองการตัดใหขอความสั้นๆ สวนหนึ่งของบทความแสดงในหนารวม และแสดงขอความ อานตอ

เพื่อใหกดเขาไปอานเนื้อหาของบทความดานใน

(5) เปลี่ยน editor จาก visual เปน html

เมื่อบทความใดๆ ถูกล็อกไว โดยจะมีไอคอนรูปกุญแจอยูดานหนาบทความ ดังนี ้

ตองทําการปลดล็อก โดยการทําเช็คเครื่องหมายถูกที่หนาบทความ แลวกดปุม Check in

จูมลาถึงจะยอมใหมีการแกไขที่บทความนั้นได

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

แสดงลิ้งคที่ชื่อบทความหรือไม สามารถกําหนดไดที่ปุม (Options) ของ Article Manager

Page 14: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

14  

หากตองการเรียงลําดับบทความ สามารถกดที่ Ordering (1) เพื่อทําการเรยีงลําดับบทความ และทําการ

save (2)

1.3.4 Menus – เมนู Menu จะจัดการเกี่ยวกับเมนูทั้งหมดของเว็บไซต

1.3.3.1 Menu Manager

หัวใจสําคัญของเมนตูางๆ ในจูมลา สามารถเพิ่ม ลบ แกไข เมนูทั้งหมดไดจากตัวเลือกนี้

Page 15: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

15  

Workshop 3 โครงสรางของเว็บไซต

เราจะทําการสรางเว็บไซต โดยมีโครงสรางดังนี ้

• หนาแรก

• เกี่ยวกับเรา

• ขาวสาร

• ประกาศทั่วไป

• เอกสารประกอบการบรรยาย

• ติดตอเรา

ทําการแกเมนูหลักใหมีโครงสรางตามตองการ

1. เลือก Manus > Menu Manager

2. เลือก Main Menu

3. จะเห็นวามีอยู 1 ไอเทมคือ Home ทําการเพิ่มเมนูตอไปคือ About Us

4. กอนอื่นตองทําการสรางบทความใหม สําหรับใหเมนู About Us ลิ้งคไปถึง โดยการสรางเนื้อหาตามปกต ิ

5. กลับไปยัง Main Menu สรางลิ้งคใหม โดยการกด New

6. Menu Item Type คือชนิดของเมนู About Us นี้ ใหเลือกเปน Single Article

เพื่อลิ้งไปยังบทความที่สรางกอนหนานี ้

Page 16: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

16  

7. เมื่อเลือก Single Article แลว ขวามือจะใหเลือกบทความ ใหเลือก About Us ที่เพิ่งสรางไป

8. กําหนดรายละเอียด

(1) กําหนดขอความที่ตองการใหแสดงในเมน ู

(2) กำหนดพาธของ url

(3) เมนูนี้จะถูกลิ้งคไปยังบทความนี้โดยอัติโนมัติ จากการเลือกในขอ 7

(4) จะใหเปน Parent หรือไม

(5) จะใหแสดงผลในหนาตางนี้หรือไม a. Parent - แสดงในหนาตางเติมนี ้

b. New window with navigation - เปดหนาตางใหม

c. New window with navigation - เปดหนาตางใหมโดยแสดงในลักษณะ popup

(6) กด Save & Close เมื่อตองการจบการเพิ่มเนื้อหา หรือกด Save & New เมื่อตองการจะเพิ่มเนื้อหาอื่นๆ อีก

(7) สรางเมนูขาวสาร เพื่อดึงเนื้อหาในหมวดหมูขาวสารออกมาแสดงเมื่อกดเมนูนี ้เลือก New ใน Main Menu

Page 17: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

17  

(8) Menu Item Type เลือกเปน Category List

(9) ขวามือ เลือก Category เปน ขาวสาร

(10) Menu Title ระบุเปน ขาวสาร และเพิ่มรายละเอียดที่จําเปนใหครบ

(11) ทำการ Save & Close จูมลาจะทําการดึงทุกเนื้อหาของหมวดหมูนี้มาแสดงในเมนูขาวสาร

(12) ทําการเพิ่มเนื้อหาในหมวดหมู ประกาศทั่วไปอีก 3 เนื้อหาเปนอยางนอย

Page 18: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

18  

(13) สรางเมนูประกาศทั่วไป เพื่อดึงเนื้อหาในหมวดหมูประกาศทั่วไปออกมาแสดงเมื่อกดเมนูนี้ เลือก New ใน

Main Menu

(14) Menu Item Type เลือกเปน Category Blog

(15) ขวามือ เลือก category ประกาศทั่วไป

(16) กด Save & Close

(17) เปดดูที่เว็บไซต จะเห็นวามีเมนู ขาวสาร และประกาศทั่วไปเพิ่มขึ้นมาอีกสองเมน ู

Page 19: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

19  

ขอแตกตางระหวาง Menu Item Type แบบ Category List และ Category Blog

Category List

Category Blog

ใหทดลองเลือกการแสดงผลแบบอื่นในหมวด Archives เพือ่ดูความแตกตาง

Page 20: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

20  

(18) สรางเนื้อหา เกี่ยวกับเรา เพื่อนํามาเชื่อมกับเมนูเกี่ยวกับเรา (19) สรางเมนู เกี่ยวกับเรา โดยเลือก Menu Item Type เปน Single Article

(20) Select Article ขวามือ เลือกเนื้อหา เกี่ยวกับเรา ที่สรางไว

(21) เลือก Save & Close จะไดเมนูเพิ่มขึ้นมาอีก 1 เมนู

(22) ตองการให เกี่ยวกับเรา อยูกอน ขาวสาร ทดลองทําการเรียงลําดับเมนูใหม เขาไปที่ Menu Manager > Main

Menu แลวทําการเรียงลําดับเมนูตามตองการ

(23) รีเฟรชหนาเว็บเพจ จะเห็นวาเมนู เกี่ยวกับเรา ขึ้นมาอยูกอนขาวสารแลว

Page 21: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

21  

• Post  and  attach  Office  2007-­‐2010  files,  Pictures,  Video  Clips,  Links  (Embed,  External  Links)  

โดยปกติแลว Joomla จะอนุญาตใหแนบไฟลเฉพาะที่เปนรูปภาพเทานั้น

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

และเขาไปเพิ่มประเภทของไฟลที่อนุญาตใหทําการแนบไฟลได

ดังนั้นในบทความตอนนี้ จะกลาวถึงการลงปลั๊กอินเพิ่ม และการกําหนดประเภทไฟล

เพื่อใหสามารถแนบไฟลอื่นไปพรอมกับเนื้อหาได

Workshop 4 แนบไฟลประเภทตางๆ ในเนื้อหา

1. ทําการดาวนโหลดปลั๊กอินชื่อ Attachment เวอรชั่น 3.0.1 จาก http://tinyurl.com/attachment-­‐plg

2. ดาวนโหลดเวอรชั่น 3.0.1 สําหรับ Joomla 1.7

3. ทําการติดตั้งปลั๊กอิน โดยไปที่ Extensions > Extensions Manager

4. ทำการ Browse หาไฟลปลั๊กอินที่ดาวนโหลดมา และกด Upload & Install

5. เมื่อแสดงขอความ success หมายความวาการ install plugin สําเร็จเรียบรอย

Page 22: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

22  

6. ขั้นตอนตอไป จะทําการ Enable plugin ใหทํางานได โดยการเขาไปที่ Extensions > Plugin Manager

หากปลั๊กอินของ Attachment เปนสีแดง ใหกดเปนสีเขียว เพื่อทําการ enable

7. เลือก Content > Media Manager เพื่อทําการเพิ่มประเภทไฟลที่สามารถแนบในเนื้อหาได

8. เลือก Options

9. ตั้งคา options ตางๆ ของ Media Manager

(1) ประเภทไฟลที่สามารถแนบได (ยังไมมี docx, xlsx, pptx หากตองการแนบใหทําการเพิ่ม)

(2) ขนาดไฟลสูงสุดที่อนุญาตใหอัพโหลดได

Page 23: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

23  

(3) โฟลเดอรปลายทางของไฟลแนบ

(4) โฟลเดอรปลายทางของรูปภาพ

(5) ประเภทของรูปภาพที่อนุญาตใหอัพโหลด

(6) ประเภทไฟลที่ไมอนุญาตใหอัพโหลด

(7) อนุญาตใหอัพโหลดแฟลชไดหรือไม (เลือก yes หากอนุญาตใหอัพโหลดได)

(8) เมื่อทําการตั้งคาประเภทของไฟลที่สามารถแนบไดแลว ตอไปจะทําการตั้งคาใหกับปลั๊กอิน attachment

เลือก Components > Attachments > Options

หมวด Basic

(1) กําหนดใหผูใชงานกลุมไหนสามารถมองเห็นไฟลได หากตองการใหทุกคนสามารถมองเห็นไฟลได เลือกเปน Public

(2) ความยาวมากสุดของชื่อไฟล (ไมจํากัดกําหนดเปน 0)

(3) บริเวณที่กําหนดใหมีการแนบไฟล (At the end คอืทายสุดของบทความ)

Page 24: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

24  

หมวด Formatting

(1) กําหนดรูปแบบของวันที่ที่แสดง

(2) กําหนดใหไฟลแนบมีการเรียงกันตามรูปแบบที่กําหนด

หมวด Visibility

Page 25: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

25  

หมวด Advance

(1) อักขระที่ไมอนุญาตใหอยูในชื่อไฟลที่อัพโหลด

(2) เมื่อคลิ้กที่ลิ้งคของไฟลแนบ ตองการใหเปดเปนหนาใหมหรือไม

9. ทดลองทําการอัพโหลดเนื้อหาในหมวดหมู เอกสารประกอบการบรรยาย อยางนอย 3 เนื้อหา

สวนลางสุดจะเห็นปุม Attachment เพิ่มขึ้นมา

10. เมื่อกดปุม Attachment จะมีชองใหเลือกไฟล

(1) หากมี url ของไฟลอยูบนเว็บไซต และไมตองการอัพโหลดไฟลขึน้เอง ใหเลือก Enter URL instead

(2) เลือกไฟลที่จะอัพโหลด

(3) ชื่อที่จะแสดงเมื่อมีการ list ไฟลแนบ

(4) ตองการใหไฟลนี้เปนสาธารณะหรือไม

(5) กําหนดผูที่สามารถมองเห็นไฟลนี้ได

Page 26: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

26  

(6) กดเพื่ออัพโหลด

11. เมื่อรีเฟรชบทความ จะเห็นวามีไฟลแนบเพิ่มขึ้นมา

12. ทําการเพิ่มบทความในหมวดหมู เอกสารประกอบการบรรยาย อยางนอย 3 บทความ

13. ทําการเพิ่มเมนู เอกสารประกอบคําบรรยาย และใหลิสต category เอกสารประกอบคําบรรยาย

มาแสดงในเมน ู

Page 27: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

27  

Workshop 5 แนบไฟลวีดีโอแบบ Embeded

1. ทําการดาวนโหลดปลั๊กอินชื่อ All Videos จาก http://preview.tinyurl.com/joomvideo  2. กด Download

3. ทำการ install โดยเลือก Extension Manager แลวอัพโหลดปลั๊กอิน

4. ตรวจสอบ Extension Manager > Plugin Manager หาก All videos ถูก disable อยู ใหทําการ enable

โดยการกดปุมแดงใหกลายเปนสีเขียว

5. สรางเนื้อหาใหมเพื่อที่จะ embedded วีดีโอใน youtube ลงไปดวย กําหนดใหอยูในหหมวดหมู

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

6. ในสวนของ article text หากตองการเพิ่มวีดีโอเขาในเนื้อหา ใหเพิ่มแท็ก {youtube}รหัสวีดีโอ{/youtube}

เชน วีดีโอในหนา http://www.youtube.com/watch?v=UlxrmUr3134 จะมีรหัสวีดีโอเปน UlxrmUr3134

ตองเพิ่มโคดดังนี้

 {youtube}UlxrmUr3134{/youtube}    

7. ทำการ save & close แลวดูผลการเพิ่มวีดีโอ จะพบวามีวีดีโอถูกแสดงในเนื้อหาดวย

นอกจากนี้ allvideos ยังสามารถ embedded วีดีโอจากหลายเว็บไซตไดอีกดวย

สามารถตรวจสอบรูปแบบการใชงานไดจาก http://preview.tinyurl.com/allvideos-­‐format  

Page 28: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

28  

• Webboard  or  discussion  board  

ใน Joomla มีเว็บบอรดฟรีที่ความสามารถอยูในระดับสูงที่เปนที่นิยมชื่อ Kunena ในบทนี้จะมาลองติดตั้ง

Kunena และทดสอบใชงานกัน

1. ดาวนโหลด Kunena ที่ http://www.kunena.org/download เลือกเวอรชั่นสําหรับ Joomla 1.7

2. ทำการ install โดยเลือก Extensions manager > Upload & Install

3. คลิ้ก Install Kunena 1.6

4. เลือก Finish

5. จะมี Kunena Forum เพิ่มเขามาใน Components

6. เลือก Components > Kunena Forum > Configuration เพื่อทําการตั้งคาตางๆ ใหกับเวบบอรด

7. โดยปกติแลว Kenuna จะสรางเมนูชื่อ Forum ไวใน Main Menu ใหแลว ใหเขาไปทําการ Enable ใน Main

Menu manager

Page 29: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

29  

8. แตหากตองการสรางเมนูเอง โดยสามารถระบุ forum ที่ตองการเลือกมาแสดงในเมนูได

ใหทําการสรางเมนูเอง ดังนี ้

a. ทําการสรางเมนูใหกับเวบบอรด เลือก Menu > Main Menu > New

b. Menu Item Type เลือก Kunena > Category Index

c. Menu Title ระบุเปน เว็บบอรด

d. Parent Category Id เลือกเปน Main Forum

e. เลือก Save & Close จะสามารถแสดงเฉพาะฟอรั่มที่เลือกได

Page 30: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

30  

การเพิ่ม ลบ และแกไข Category ใน Kunena

1. เลือก Component > Kunena Forum

2. เลือก Category Manager

3. เพิ่ม category โดยกดปุม New และเพิ่มขอมูลในสวน Basic

4. กําหนดการเขาถึงในสวน Permission

5. Save & Close

6. ทดลองใชงาน Kunena

Page 31: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

31  

• How  to  make  photo  gallery  

1. download plugin ชื่อ phoca gallery ที่ http://preview.tinyurl.com/phocagallery

2. เลือกเวอรชั่น Phoca Gallery 1.6

3. ทำการ install phoca gallery โดยเลือก extensions manager > upload & Install

4. เลือก Install

5. เมื่อติดตั้งแลวจะมีเมน ูPhoca Gallery เพิ่มเขามาใน Components

6. ทําการเพิ่ม category ใหกับ gallery โดยการเลือกไอคอน category

Page 32: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

32  

7. เลือก New เพื่อทําการสราง category ใหม และกําหนดคาตางๆ

(1) ชื่อของ Category

(2) Parent ของ category

(3) สิทธิ์การเขาด ู

(4) กําหนดวา รูปที่อัพโหลดจาก category นี้ จะไปอยูในโฟลเดอรไหน

8. เลือก Save & Close

Page 33: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

33  

อัพโหลดรูปเขาไปในแกลลอรี่

1. เลือกไอคอน Image

2. เลือก New ในกรณีตองการอัพโหลดรูปเดียว

3. เลือก Multiple Add ในกรณีตองการเพิ่มทีละหลายรูป

4. ทําการสรางโฟลเดอรที่ตองการจะเก็บรูปในอัลบั้มนี ้

5. เลือกคลิ้กโฟลเดอรที่สรางใหม ที่ตองการอัพโหลดรูปไว

6. ทําการเพิ่มรูปโดยการกด Add Image

Page 34: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

34  

7. เริ่มอัพโหลดรูปดวยการกดปุม Start Upload

8. เมื่อเพิ่มเสร็จแลว ไฟลจะไปอยูในโฟลเดอรที่สรางไว

9. เพิ่มรายละเอียดของแกลลอรี่นี ้

(1) ชื่ออัลบั้ม

(2) เลือกหมวดหมู (3) ไฟลรูปที่อัพโหลดผาน Multiple Upload กอนหนานี ้

10. เช็คเครื่องหมายถูกหนารูปที่ตองการเพิ่มในแกลลอรี ่

Page 35: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

35  

11. เลือก Save & Close

12. รูปภาพจะถูกเพิ่มเขาไปในแกลลอรี ่

สรางเมนูเชื่อมโยงไปยังแกลอรี่

1. สรางเมนูใน main menu

2. Menu Item Type เลือก List of category

3. Menu Title ใส Gallery

4. เลือก Save & Close

Page 36: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

36  

5. จะแสดงอัลบั้มของแตละหมวดหมู

6. เมื่อคลิ้กเขาไปในอัลบั้ม จะแสดงรูปทั้งหมด

Page 37: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

37  

การ import รูปจาก album ใน facebook

1. ที่ Phoca Gallery เลือกไอคอน Facebook

2. กดปุม New เพื่อเพิ่ม user ของ facebook

3. เลือก Create Application เพื่อสรางapplication การดึงรูปมาแสดงในเว็บไซต

4. กรอกรายละเอียดเพื่อสราง application

site name: ชื่อของเว็บไซต (ใสตามตองการ)

site url: url ของเว็บไซตของเรา เชน http://www.faed.mju.ac.th/jl/toonz/

5. กดปุม Create App

Page 38: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

38  

6. Facebook จะแสดงรายละเอียดของ application ที่เพิ่งสราง ใหนําคา App ID/API Key และ App Secret

มากรอกในสวนของ Facebook Application ใน Phoca gallery

7. กดปุม Connect With Facebook

8. กดปุม Paste loaded data

9. Phoca gallery จะดึงขอมูลจาก facebook

10. กด save & close

Page 39: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

39  

เพิ่ม category ใหกับรูปจากอัลบั้มใน facebook และนํารูปมาแสดงใน category

1. เลือก category ใน phoca gallery

2. กด New เพื่อสราง category ใหม

3. กรอกรายละเอียดของ category ที่สรางใหม

4. เลื่อนลงมาดานลางสุด Facebook Settings เลือก user ที่เพิ่มเขาไป

5. กด select album เพื่อเลือก album

6. กดปุม facebook import เพื่อนําจาก facebook เขาสู category

Page 40: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

40  

7. กด save & closed

8. รูปจะแสดงใน gallery

Page 41: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

41  

• Share  post  to  facebook  เพิม่ปลั๊กอิน facebook like เพื่อสามารถกด like และแชรขอมูลขึ้นไปบน facebook ได

1. ดาวนโหลดปลั๊กอินที่ http://preview.tinyurl.com/fblikeplg

2. เลือกดาวนโหลดปลั๊กอินที่ชื่อ plg_like สําหรับเวอรชั่น 1.7

3. install plugin ใน extension manager

4. เลือก Extension Manager > Plug-in Manager เพื่อเขาไป enable ปลั๊กอินชื่อ Facebook like button

Page 42: JOOMLA&1.7 for$beginner · What is Joomla ? • Open source CMS like o Drupal o Wordpress o Open CMS o Mambo o Etc. • Based on PHP Programming language • Easy to install, use

 

   

42  

ทดสอบเพิ่มปุม Like ในเนื้อหา

1. เลือกแกไขเนื้อหา เกี่ยวกับเรา จาก Article manager

2. เพิ่มโคด {flike} ตอทายเนื้อหา

3. กด Save & Close

4. ไปที่หนาบทความ จะมีปุม Like เพิ่มขึ้นมา

5. เมื่อกด Like จะแสดง Post to facebook เพื่อแชรบทความ