สไลด์ประกอบการอบรมจูมล่า ในงาน JoomlaTalk ครั้งที่ 6 โดยทีมบริษัท Marvelic Engine Co.,Ltd. ผู้เชี่ยวชาญจูมล่า

1. Joomla! TALK#6 Back to Basic Joomla and Template
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
- กรรมการผู้จัดการ Marvelic Engine Co.,Ltd.
www.marvelic.co.th
- อุปนายกสมาคมศึกษาและพัฒนาโอเพ่นซอร์ส
OSEDA.or.th
- Joomla! Bug Squad : joomla.org
- Founder JoomlaCorner.com
- กรรมการควบคุมจริยธรรม สมาคมผู้ดูแลเว็บไทย
- ผู้อำนวยการฝ่ายเทคโนโลยีสารสนเทศ
สมาคมอาสาสมัครบรรเทาสาธารณภัยแห่งประเทศไทย
- ที่ปรึกษาสมาคมการดับเพลิงและช่วยชีวิต
- อดีตกรรมการบริหาร OpenSource Matters Inc.(Joomla
Project)
2

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

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

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

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

7. มีอะไรใหม่ใน Joomla! 3.x

8. Source : https://www.youtube.com/watch?v=sPs3SDoWyDY
7

9. Source : https://www.youtube.com/watch?v=sPs3SDoWyDY
7

10. Source : https://www.youtube.com/watch?v=EfsOibCaQ-k
8

11. Source : https://www.youtube.com/watch?v=EfsOibCaQ-k
8

12. Multilingual Install

13. Multilingual Install

14. Content Versioning

15. Content Versioning

16. Content Versioning

17. Template Editor

18. Install from Web

19. Two Factor Authentication

20. Two Factor Authentication

21. Black-end Isis Template improvements
Slidebar Filters Box in Module Manager

22. NoCaptcha Buil-in Plugin
In Joomla 2.5 and Joomla 3.3 there were ReCaptcha plugin (service) used to
prevent spammers. And now in Joomla 3.4 you will get NoCaptcha plugin.

23. NoCaptcha Buil-in Plugin
In Joomla 2.5 and Joomla 3.3 there were ReCaptcha plugin (service) used to
prevent spammers. And now in Joomla 3.4 you will get NoCaptcha plugin.

24. Front-end Module Editing Improvements

25. Front-end Module Editing Improvements

26. 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.
19

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

28. มูลนิธิชัยพัฒนา
21

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

30. Software Park , iPhone4Society
23

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

32. S&P Intranet
25

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

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

36. http://www.aerolithe.fr

38. โรงพยาบาลเมตตาประชารักษ์ (วัดไร่ขิง)

40. yoga101.co.th

41. yoga101.co.th

42. cmsplugin.com

43. cmsplugin.com

44. Extensions เฉพาะทาง

45. ระบบจัดฝึกอบรม Softwarepark
35

46. ProjectFork.net

49. stackideas.com

50. EasyBlog - stackideas.com

51. EasyBlog - stackideas.com

52. สร้างเว็บไซต์ Social Network

53. สร้างเว็บไซต์ Social Network

54. สร้างเว็บไซต์ Social Network

55. สร้างเว็บไซต์ Social Network

56. Profile

57. Profile

58. Activity Stream
Profile

59. Activity Stream
Profile

60. Activity Stream
Profile

61. eCommerce Solutions

62. https://www.blackreddesigns.com/store/products/1-flatlia-mobile-extensions/2-rent-a-bike-web-app

63. virtueMart.net

64. Integration

65. Integration

66. Integration

67. Integration

68. Integration

69. • ห้ามใช้ 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
46

70. เริ่มต้นใช้งาน Joomla

71. ฟรีเว็บไซต์ภายใต้ subdomain.joomla.com
1.ฟรีเว็บไซต์ joomla.com

72. ฟรีเว็บไซต์ 90 วันภายใต้ siteName.demojoomla.com
2.ฟรีเว็บไซต์ 90 วัน demo.joomla.org

73. 3.เช่า Hosting จากผู้ให้บริการ
4.จำลองเครื่องตัวเองเป็น Web Server

74. 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
51

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

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

77. ขั้นตอนการสร้างเว็บไซต์ด้วย 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. ตั้งค่าปรับแต่งเว็บไซต์ เปิดโมดูล ในตำแหน่งที่ต้องการ
54

78. 55

79. 56

80. 57

81. 58

82. 59

83. 60

84. 61

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

86. 63

87. Tools bar icons
64

88. 65
ตั้งค่า Server Time Zone

89. 66
เปิดใช้ Unicode Aliases

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

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

92. 69
โครงสร้าง Content

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

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

95. โครงสร้าง Content ใน Joomla
72

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

97. หน้าจอการเขียนเนื้อหา
74

98. 75
การจัดการเมนู

99. การจัดการเมนู
76

100. เลือกประเภทเมนู
77

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

102. 79

103. 80

104. 81
nav-pills

105. 82
การจัดการ Templates

106. http://docs.joomla.org/J3.2:How_to_use_the_Template_Manager
83

107. http://docs.joomla.org/J3.2:How_to_use_the_Template_Manager
84

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

109. 86
การสำรองข้อมูลโดยใช้ 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

110. 87

111. 88
การติดตั้งเว็บไซต์โดยใช้ 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

112. Q & A
http://www.joomlacorner.com
http://www.marvelic.co.th
http://www.joomla.or.th
89