Slide ประกอบการอบรม Joomla 3.4 โดยบริษัทมาร์เวลิค เอ็นจิ้น จำกัด http://www.marvelic.co.th http://www.joomlacorner.com

1. การสร้างเว็บไซต์ด้วย Joomla! CMS
1

2. about us
อัครวุฒิ ตำราเรียง
Akarawuth Tamrareang
(JoomlaCorner)
akarawuth@marvelic.co.th
twitter: @joomlacorner
www.marvelic.co.th
www.akarawuth.com
Tel : 02 717 1120-1
- อุปนายกสมาคมศึกษาและพัฒนาโอเพ่นซอร์ส
OSEDA.or.th
- Joomla! Bug Squad : joomla.org
- Founder JoomlaCorner.com
- กรรมการผู้จัดการ Marvelic Engine Co.,Ltd.
www.marvelic.co.th
- กรรมการควบคุมจริยธรรม สมาคมผู้ดูแลเว็บไทย
- ผู้อำนวยการฝ่ายเทคโนโลยีสารสนเทศ
สมาคมอาสาสมัครบรรเทาสาธารณภัยแห่งประเทศไทย
- ที่ปรึกษาสมาคมการดับเพลิงและช่วยชีวิต
- อดีตกรรมการบริหาร OpenSource Matters Inc.(Joomla
Project)
2

3. about us
ศุภชัย แต่สกุล
Supachai Teasakul
(DocManLaiThai)
supachai@marvelic.co.th
twitter: @supa_chai
www.marvelic.co.th
Tel : 02 717 1120-1
- Senior Project Manager
Marvelic Engine Co.,Ltd. : marvelic.co.th
- Joomla! Translation WG : joomla.org
- LaiThai Developer Team : JoomlaCorner.com
- นายทะเบียน สมาคมศึกษาและพัฒนาโอเพ่นซอร์ส
OSEDA.or.th
- อาจารย์พิเศษ หลักสูตรจูมล่า มหาวิทยาลัยศรีปทุม
3

4. The Joomla CMS provides a robust content management
system for you to develop your dynamic websites.
4

5. Source : http://youtu.be/Qjnc0H8utks
5

6. Source : http://youtu.be/Qjnc0H8utks
5

7. 6https://docs.joomla.org/What_version_of_Joomla!_should_you_use

8. The Joomla Framework provides a set of files which can be
used to create both web and command line applications.
The Joomla CMS provides a robust content management
system for you to develop your dynamic websites.
7

9. ตัวอย่างเว็บที่ใช้
8

10. มูลนิธิชัยพัฒนา
9

11. มูลนิธิแม่ฟ้าหลวง ในพระบรมราชูปถัมภ์
10

12. Software Park , iPhone4Society
11

13. สถาบันพัฒนาองค์กรชุมชน codi.or.th
12

14. S&P Intranet
13

15. โรงเรียนกวดวิชา โอพลัส : oplus-school.com
14

16. โรงเรียนกวดวิชา โอพลัส : oplus-school.com
14

17. cmsplugin.com

18. cmsplugin.com

19. ระบบจัดฝึกอบรม Softwarepark
16

20. • ห้ามใช้ PHP 4.3.9, 4.4.2 หรือ 5.0.4. ซึ่งเป็น releases ที่มีบั๊กซึ่งจะมีปัญหาในการติดตั้ง และ
Zend Optimizer 2.5.10 สำหรับ PHP 4.4.x ก็ยังมีบั๊กที่ร้ายแรงให้ใช้เวอร์ชั่นที่ใหม่กว่า
• ดูข้อมูลเพิ่มเติมได้ที่ : http://www.joomla.org/technical-requirements.html
17

21. Tools open source ที่ใช้งาน
• XAMPP หรือ Software ที่ใช้จำลองเป็น WebServer
เว็บไซต์ : https://www.apachefriends.org
• FileZilla Client โปรแกรม FTP Client ใช้ในการ Transfer ข้อมูลขึ้น
Hosting
เว็บไซต์ : https://filezilla-project.org
• 7-Zip โปรแกรมใช้สำหรับแตกไฟล์/บีบอัดไฟล์ ใช้แทน WinZip, WinRAR
เว็บไซต์ : http://www.7-zip.org
• NotePad++ Text Editor สำหรับใช้แก้ไข Code
เว็บไซต์ : http://notepad-plus-plus.org
• XMind ใช้ในการวางแผนโครงสร้างเว็บไซต์
เว็บไซต์ : http://www.xmind.net
18

22. จำลองเครื่องเป็น WebServer / ติดตั้ง XAMPP
19

23. http://localhost or http://127.0.0.1
ให้นำเว็บไซต์ไปไว้ภายใต้ Directory นี้
drive:xampphtdocs
การติดตั้ง XAMPP
20

24. การ upload Joomla! ขึ้นบน Hosting ด้วยโปรแกรม FTP
• Using WinSCP http://winscp.net
• Using FileZilla http://filezilla-project.org
21

25. ใน xampp ใช้
host: 127.0.0.1
user : newuser
pw : wampp
ตัวอย่างการใช้งาน FileZilla FTP
22

26. Using FileZilla
ฝั่งผู้ใช้
ฝั่ง Hosting
ตัวอย่างการใช้งาน FileZilla FTP
23

27. Change File Permission (cmod)
ตัวอย่างการใช้งาน FileZilla FTP
24

28. ขั้นตอนการสร้างเว็บไซต์ด้วย Joomla!
1. ทำการดาวน์โหลด Joomla! เวอร์ชั่นที่ต้องการจากเว็บไซต์ joomla.org
2. แตกไฟล์ Joomla! Package ที่ดาวน์โหลดมา แล้วทำการ Transfer files ทั้งหมด
ขึ้นไปไว้ใน Hosting ที่ได้เตรียมไว้
3. ทำการติดตั้ง Joomla! โดยพิมพ์ URL ของเว็บที่ได้นำไฟล์ Joomla! ขึ้นไปไว้
เช่น http://yourdomain.com
หรือหากจำลองไว้ในเครื่องก็เป็น http://localhost/youFolderName
4. เตรียม SiteMap ของเว็บไซต์ เมนูต่างๆ รวมถึงข้อมูลที่จะมีบนเว็บไซต์
5. ตั้งค่า TimeZone ใน Global Configuration
6. จัด Group แบ่งประเภทของเนื้อหา , ใส่เนื้อหา
7. สร้างเมนู
8. ติดตั้ง Extensions (Template,Modules,Plugins) ที่ต้องการตามความจำเป็น
9. ตั้งค่าปรับแต่งเว็บไซต์ เปิดโมดูล ในตำแหน่งที่ต้องการ
25

29. 26

30. 27

31. 28

32. 29

33. 30

34. 31

35. 32

36. http://yourwebsite.com/administrator
ส่วนของผู้บริหารเว็บไซต์
33

37. 34

38. Tools bar icons
35

39. 36
ตั้งค่า Server Time Zone

40. 37
เปิดใช้ Unicode Aliases

41. 38
ทำความรู้จัก
Extensions ใน Joomla!

42. 39
Joomla! extensions แบ่งออกเป็น 5 ประเภท
✦ Templates - หน้ากากหรือหน้าเว็บไซต์ มีพื้นที่เป็นตำแหน่งต่างๆ ในการแสดงโมดูล
✦ Modules - เป็นส่วนโปรแกรมเพิ่มเติมที่ใช้แสดงบนตำแหน่งที่มีบนเทมเพลต เช่นข่าว
ล่าสุด , เมนู , ฟอร์มล็อกอิน ฯลฯ
✦ Languages - ไฟล์ภาษา
✦ Components - Application เพิ่มเติมนอกเหนือจากการจัดการ Content ซึ่งมีทั้ง
ชนิดที่ใช้งานผ่านด้านหน้าเว็บและใช้งานด้านผู้ดูแลเว็บ เช่น เว็บบอร์ด, แกลลอรี่ ฯลฯ
ซึ่งจะแสดงผลในพื้นที่ๆ เป็น Mainbody หลักของเว็บไซต์
✦ Plugins ฟังก์ชั่นการทำงานเพิ่มเติม ขึ้นอยู่กับชนิดของปลั๊กอิน เช่น อิดิเตอร์ที่ใช้เขียน
บทความ , ส่วนของการ Login ฯลฯ
9

43. การบริหารจัดการสมาชิก
40

44. ค่าพื้นฐานในส่วนของ Backend (Administrator)
•Manager จัดการเนื้อหา มีเดีย และเมนูเนื้อหา
•Administrator ตั้งค่าเพิ่มเติม CMT
•Super User ทำได้ทุกอย่าง
ค่าพื้นฐานในส่วนของ Frontend (Site)
•กลุ่มผู้ใช้ทั่วไป (Public) คือผู้ที่เข้ามายังเว็บ
โดยที่ยังไม่ได้เป็นสมาชิก และยังไม่ได้เข้าระบบ
•กลุ่มสมาชิก (Registered) คือสมาชิกที่เข้าสู่ระบบแล้ว
เข้าถึงข้อมูลได้มากกว่ากลุ่มผู้ใช้ทั่วไป
•กลุ่มนักเขียน (Author) คือสมาชิกที่เข้าสู่ระบบแล้ว
สามารถเขียนเนื้อหาเข้าสู่เว็บไซต์ได้
•กลุ่มผู้ตรวจสอบเนื้อหา (Editors) คือสมาชิกที่เข้าสู่ระบบแล้ว
สามารถเพิ่ม/แก้ไขเนื้อหางานเขียนของนักเขียนรายอื่นๆ ได้
•กลุ่มผู้เผยแพร่ข้อมูล (Publisher) คือสมาชิกที่เข้าสู่ระบบแล้ว
ทำได้เหมือนกับ Editors และมีสิทธิ์กำหนดให้เนื้อหานั้นๆ เผยแพร่ หรืองดเผยแพร่บนเว็บไซต์
Groups
(Public, Registered, Author, Editor, Publisher, Manager, Administrator, และ Super Users)
41
http://docs.joomla.org/J3.x:Access_Control_List_Tutorial

45. Public
•กลุ่มผู้ใช้ทั่วไป (Public)
Registered
•กลุ่มสมาชิก (Registered)
•Manager
•Super User
Special
•กลุ่มนักเขียน (Author)
•Manager
•Super User
Access Levels
(Public, Registered, Special)
** เป็นชื่อเรียกของ Access Levels โดยแต่ละชื่อเรียกจะประกอบไปด้วย User Group ต่างๆ
42
http://docs.joomla.org/J3.x:Access_Control_List_Tutorial

46. http://docs.joomla.org/J3.x:Access_Control_List_Tutorial
43

47. 44
โครงสร้าง Content

48. ตัวอย่าง Site Map ของเว็บ

49. ตัวอย่างประเภทของข้อมูลในเว็บ

50. โครงสร้าง Content ใน Joomla
47

51. ส่วนของการบริหารจัดการ Content
48

52. หน้าจอการเขียนเนื้อหา
49

53. 50
การจัดการเมนู

54. การจัดการเมนู
51

55. เลือกประเภทเมนู
52

56. การจัดการส่วนของ Extensions ต่างๆ
53

57. 54

58. 55

59. 56
nav-pills

60. 57
การจัดการ Templates

61. http://docs.joomla.org/J3.2:How_to_use_the_Template_Manager
58

62. http://docs.joomla.org/J3.2:How_to_use_the_Template_Manager
59

63. 60
การสำรองข้อมูลและการย้ายเว็บ

64. 61
การสำรองข้อมูลโดยใช้ AkeeBa Backup
✦ โหลดคอมโพเน้นท์ AkeeBa Backup Core จากเว็บไซต์ akeebabackup.com
https://www.akeebabackup.com/products/akeeba-backup.html
✦ ติดตั้งคอมโพเน้นท์ผ่านทางเมนู Extensions->Extensions Manager
✦ ตั้งค่าโดยใช้ autoConfig ของคอมโพเน้นท์ จากนั้นสั่ง Backup Now
✦ ในการ Backup แต่ละครั้งจะได้ไฟล์นามสกุล .jpa เพื่อใช้ในงานร่วมกับ Akeeba
KickStart
9

65. 62

66. 63
การติดตั้งเว็บไซต์โดยใช้ Akeeba KickStart
✦ โหลดไฟล์ Akeeba Kickstart จากเว็บไซต์ akeebabackup.com
https://www.akeebabackup.com/products/akeeba-kickstart.html
✦ ทำการแตกไฟล์ kickstart-core-x.x.x.zip ที่ดาวน์โหลดมา แล้ว Copy ไฟล์
kickstart.php , jquery-ui.min.js, jquery.min.js, json2.min.js ไปไว้ในโฮสใหม่หรือ
ใน directory ที่ต้องการจะติดตั้ง
✦ คัดลอกไฟล์นามสกุล .jpa ที่ได้ backup ไว้ไปไว้ในโฮสใหม่ที่ได้คัดลอก kickstart.php
ไปไว้
✦ พิมพ์ url เว็บใหม่เพื่อเรียกใช้ kickstart.php เช่น http://newdomain.com/
kickstart.php แล้วทำตาม
ขั้นตอนในหน้าจอหน้าจอ
9

67. Q & A
http://www.joomlacorner.com
http://www.marvelic.co.th
http://www.joomla.or.th
64