Build Website with Joomla! 3.3
5 likes2,342 views
สไลด์อบรมสร้างเว็บไซต์ด้วย Joomla! 3.3 หลักสุตรเร่งรัด สนใจอบรมติดต่อได้ที่ บ.มาร์เวลิค เอ็นจิ้น จก. http://www.marvelic.co.th
Build Website with Joomla! 3.3
- 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
- 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
- 11. Software Park , iPhone4Society 11
- 13. S&P Intranet 13
- 14. โรงเรียนกวดวิชา โอพลัส : oplus-school.com 14
- 15. cmsplugin.com 15
- 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
- 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
- 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
- 45. ตัวอย่าง Site Map ของเว็บ
- 47. โครงสร้าง Content ใน Joomla 47
- 50. 50 การจัดการเมนู
- 51. การจัดการเมนู 51
- 54. 54
- 55. 55
- 56. 56 nav-pills
- 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