สไลด์อบรมสร้างเว็บไซต์ด้วย Joomla! 3.3 หลักสุตรเร่งรัด สนใจอบรมติดต่อได้ที่ บ.มาร์เวลิค เอ็นจิ้น จก. http://www.marvelic.co.th

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

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

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

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

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

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

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

11. Software Park , iPhone4Society
11

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

13. S&P Intranet
13

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

15. cmsplugin.com
15

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

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

18. 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

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

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

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

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

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

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

25. ขั้นตอนการสร้างเว็บไซต์ด้วย 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

26. 26

27. 27

28. 28

29. 29

30. 30

31. 31

32. 32

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

34. 34

35. Tools bar icons
35

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

54. 54

55. 55

56. 56
nav-pills

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

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

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

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

61. 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

62. 62

63. 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

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