หลักสูตร 1 วัน

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

about us

อัครวุฒิ ตำราเรียง Akarawuth Tamrareang

(JoomlaCorner) akarawuth@marvelic.co.th

twitter: @joomlacornerwww.marvelic.co.th www.akarawuth.com

Tel : 02 235 7629 , 02 077 8366

- อุปนายกสมาคมศึกษาและพัฒนาโอเพ่นซอร์ส OSEDA.or.th

- Joomla! Bug Squad : joomla.org- Founder JoomlaCorner.com - กรรมการผู้จัดการ Marvelic Engine Co.,Ltd. www.marvelic.co.th - กรรมการควบคุมจริยธรรม สมาคมผู้ดูแลเว็บไทย - ผู้อำนวยการฝ่ายเทคโนโลยีสารสนเทศ สมาคมอาสาสมัครบรรเทาสาธารณภัยแห่งประเทศไทย - ที่ปรึกษาสมาคมการดับเพลิงและช่วยชีวิต - อดีตกรรมการบริหาร OpenSource Matters Inc.(Joomla Project)

about us

ศุภชัย แต่สกุลSupachai Teasakul

supachai@marvelic.co.th twitter: @supa_chai www.marvelic.co.th

Tel : 02 235 7629 , 02 077 8366

- Senior Project Manager Marvelic Engine Co.,Ltd. : marvelic.co.th

- Joomla! Translation WG : joomla.org - LaiThai Developer Team : JoomlaCorner.com - นายทะเบียน สมาคมศึกษาและพัฒนาโอเพ่นซอร์ส OSEDA.or.th

- อดีตอาจารย์พิเศษ หลักสูตรจูมล่า มหาวิทยาลัยศรีปทุม

Session 1

ทำความเข้าใจกับ Joomla!

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

What is Joomla? : https://www.joomla.org/about-joomla.html

Source : https://youtu.be/Qjnc0H8utks

Happy 10th Birthday Joomla! Source : https://youtu.be/HMRM7CTnFAA

Core Features : https://www.joomla.org/core-features.html Joomla! 3.X - Latest Features : https://www.joomla.org/3/

ความสามารถหลักของ Joomla!

• Multilingual • Well Supported • Easy Upgrades • Integrated Help System • Media Manager • Banner Management • Contact Management • Search better, Search Smarter • Content Management • Nested categorization • Tagging • Frontend Editing • Content Versioning • Syndication and Newsfeed

Management

Source : https://docs.joomla.org/Joomla!_CMS_versions

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.

Joomla! Developer Network : https://developer.joomla.org/

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

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

บริษัท เกลือพิมาย จำกัด

Star Petroleum Refining Public Company Limited. (Intranet)

udomfurniture.co.th

roddeeded.com

scancorp.co.th

marvelic.co.th

SMESmartWeb.com

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

Session 2

การเตรียมความพร้อมก่อนการติดตั้ง Joomla!

• PHP 5.3.1 จำเป็นสำหรับรุ่น 3.0 ถึง 3.2 โดยที่ 3.3 จะเพิ่มความต้องการขั้นต่ำเป็น PHP 5.3.10 Joomla! รุ่น 3.5 และรุ่นใหม่กว่าก็เข้ากันได้กับ PHP 7

• ดูข้อมูลเพิ่มเติมได้ที่ : https://downloads.joomla.org/technical-requirements

• 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

Open source tools เบื้องต้นสำหรับใช้งาน

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

http://localhost or http://127.0.0.1 ให้นำเว็บไซต์ไปไว้ภายใต้ Directory นี้drive:\xampp\htdocs

การติดตั้ง XAMPP

Session 3

เรียนรู้การนำ Joomla! ขึ้น Server

การ upload Joomla! ขึ้นบน Hosting ด้วยโปรแกรม FTP

• Using WinSCP http://winscp.net

• Using FileZilla http://filezilla-project.org

ใน xampp ใช้ host: 127.0.0.1user : newuser pw : wampp

ตัวอย่างการใช้งาน FileZilla FTP

Using FileZilla

ฝั่งผู้ใช้

ฝั่ง Hosting

ตัวอย่างการใช้งาน FileZilla FTP

Change File Permission (chmod)

ตัวอย่างการใช้งาน FileZilla FTP

Session 4

การติดตั้ง Joomla! 3.x และการติดตั้ง Tool ในการสร้างเว็บ

ขั้นตอนการสร้างเว็บไซต์ด้วย Joomla!

1. เตรียม SiteMap ของเว็บไซต์ เมนูต่างๆ รวมถึงข้อมูลที่จะมีบนเว็บไซต์ 2. ทำการดาวน์โหลด Joomla! เวอร์ชั่นที่ต้องการจากเว็บไซต์ joomla.org 3. แตกไฟล์ Joomla! Package ที่ดาวน์โหลดมา แล้วทำการ Transfer files ทั้งหมด

ขึ้นไปไว้ใน Hosting ที่ได้เตรียมไว้ด้วยโปรแกรม FTP 4. ทำการติดตั้ง Joomla! โดยพิมพ์ URL ของเว็บที่ได้นำไฟล์ Joomla! ขึ้นไปไว้

เช่น http://yourdomain.com หรือหากจำลองไว้ในเครื่องก็เป็น http://localhost/youFolderName

5. ตั้งค่า TimeZone ใน Global Configuration 6. จัด Group แบ่งประเภทของเนื้อหา , ใส่เนื้อหาตาม SiteMap ที่วางเอาไว้ 7. สร้างเมนู , สร้างโมดูล ที่ต้องการแสดงผลบนหน้าเว็บ 8. ติดตั้ง Extensions (Template, Modules, Plugins) ที่ต้องการตามความจำเป็น 9. ตั้งค่าปรับแต่งเว็บไซต์ เปิดโมดูล ในตำแหน่งที่ต้องการ หรือตามตำแหน่งที่ได้ออกแบบไว้

http://yourwebsite.com/administrator

ส่วนของผู้บริหารเว็บไซต์

Tools bar icons

Session 5

การตั้งค่าทั่วไปของเว็บไซต์ (Global Configuration)

เปิดใช้ SEO เบื้องต้น

ตั้งค่า Server Time Zone

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

Joomla! Extensions แบ่งออกเป็น 5 ประเภท

• Templates - หน้ากากหรือหน้าเว็บไซต์ มีพื้นที่เป็นตำแหน่งต่างๆ ในการแสดงโมดูล

• Modules - เป็นส่วนโปรแกรมเพิ่มเติมที่ใช้แสดงบนตำแหน่งที่มีบนเทมเพลต เช่นข่าวล่าสุด , เมนู , ฟอร์มล็อกอิน ฯลฯ

• Languages - ไฟล์ภาษา • Components - Application เพิ่มเติมนอกเหนือจากการจัดการ Content ซึ่งมีทั้งชนิดที่ใช้งานผ่านด้านหน้าเว็บและใช้งานด้านผู้ดูแลเว็บ เช่น เว็บบอร์ด, แกลลอรี่ ฯลฯ ซึ่งจะแสดงผลในพื้นที่ๆ เป็น Mainbody หลักของเว็บไซต์

• Plugins ฟังก์ชั่นการทำงานเพิ่มเติม ขึ้นอยู่กับชนิดของปลั๊กอิน เช่น อิดิเตอร์ที่ใช้เขียนบทความ , ส่วนของการ Login ฯลฯ

9

Session 6

การจัดการสมาชิก และระดับการเข้าถึง (Users)

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

ค่าพื้นฐานในส่วนของ Backend (Administrator)

• Manager จัดการเนื้อหา มีเดีย และเมนูเนื้อหา

• Administrator ตั้งค่าเพิ่มเติม CMT

• Super User ทำได้ทุกอย่าง

ค่าพื้นฐานในส่วนของ Frontend (Site)

• กลุ่มผู้ใช้ทั่วไป (Public) คือผู้ที่เข้ามายังเว็บโดยที่ยังไม่ได้เป็นสมาชิก และยังไม่ได้เข้าระบบ

• กลุ่มสมาชิก (Registered) คือสมาชิกที่เข้าสู่ระบบแล้วเข้าถึงข้อมูลได้มากกว่ากลุ่มผู้ใช้ทั่วไป

• กลุ่มนักเขียน (Author) คือสมาชิกที่เข้าสู่ระบบแล้วสามารถเขียนเนื้อหาเข้าสู่เว็บไซต์ได้

• กลุ่มผู้ตรวจสอบเนื้อหา (Editors) คือสมาชิกที่เข้าสู่ระบบแล้วสามารถเพิ่ม/แก้ไขเนื้อหางานเขียนของนักเขียนรายอื่นๆ ได ้

• กลุ่มผู้เผยแพร่ข้อมูล (Publisher) คือสมาชิกที่เข้าสู่ระบบแล้วทำได้เหมือนกับ Editors และมีสิทธิ์กำหนดให้เนื้อหานั้นๆ เผยแพร่ หรืองดเผยแพร่บนเว็บไซต์

User Groups(Public, Registered, Author, Editor, Publisher, Manager, Administrator, และ Super Users)

https://docs.joomla.org/J3.x:Access_Control_List_Tutorial

Public

• กลุ่มผู้ใช้ทั่วไป (Public) Registered

• กลุ่มสมาชิก (Registered) • Manager • Super User Special

• กลุ่มนักเขียน (Author)

• Manager • Super User

Viewing Access Levels(Public, Registered, Special)

** เป็นชื่อเรียกของ Access Levels โดยแต่ละชื่อเรียกจะประกอบไปด้วย User Group ต่างๆ

https://docs.joomla.org/J3.x:Access_Control_List_Tutorial

https://docs.joomla.org/J3.x:Access_Control_List_Tutorial

กลุ่มที่ต้องการกำหนด

Action การทำงาน Permission ที่จะกำหนด สิทธิ์ที่จะมีผล

Session 7

เริ่มเข้าสู่การสร้างเนื้อหาเว็บไซต์ด้วย Joomla! แบบ Step by Step

โครงสร้าง Content

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

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

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

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

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

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

Session 8

การทำเมนูไปยัง Category และ Article

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

การจัดการรายการเมนูไอเทม

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

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

Extensions > Modules

nav-pills ตัวอย่าง การใช้งาน Menu Class Suffix

เพื่อใช้งาน รูปแบบการแสดงผล

จาก css ของ Template

Extensions > Plugins

Session 9

การติดตั้ง / อัพเดท / ยกเลิกการติดตั้งโปรแกรมเสริม

(Extensions > Manage)

Session 10

การใช้งาน Plugins(Plugin Content)

Session 11

การใช้งานระบบจัดการเทมเพลทเว็บไซต์ (Templates)

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

แก้ไขรูปแบบ (Style) แก้ไขไฟล์ Template

https://docs.joomla.org/J3.x:How_to_use_the_Template_Manager

Templates Customise

Session 12

การใช้งานระบบจัดการโมดูล (Modules)

New Modules

Session 13

การใช้งาน Maintenance Tools / ตรวจสอบข้อมูลระบบเซิร์ฟเวอร์ที่ใช้อยู่

Session 14

การสำรอง หรือย้ายข้อมูลเว็บไปยัง Server อื่น

การสำรองข้อมูลโดยใช้ AkeeBa Backup

• โหลดคอมโพเน้นท์ AkeeBa Backup Core จากเว็บไซต์ akeebabackup.comhttps://www.akeebabackup.com/products/akeeba-backup.html

• ติดตั้งคอมโพเน้นท์ผ่านทางเมนู Extensions -> Manage -> Install • ตั้งค่าโดยใช้ autoConfig ของคอมโพเน้นท์ จากนั้นสั่ง Backup Now

• ในการ Backup แต่ละครั้งจะได้ไฟล์นามสกุล .jpa เพื่อใช้ในงานร่วมกับ Akeeba KickStart

การติดตั้งเว็บไซต์โดยใช้ Akeeba KickStart

• โหลดไฟล์ Akeeba Kickstart จากเว็บไซต์ akeebabackup.com https://www.akeebabackup.com/products/akeeba-kickstart.html

• ทำการแตกไฟล์ kickstart-core-x.x.x.zip ที่ดาวน์โหลดมา แล้ว Copy ไฟล์ kickstart.php , jquery.min.js, json2.min.js ไปไว้ในโฮสใหม่หรือใน directory ที่ต้องการจะติดตั้ง

• คัดลอกไฟล์นามสกุล .jpa ที่ได้ backup ไว้ไปไว้ในโฮสใหม่ที่ได้คัดลอก kickstart.php ไปไว้

• พิมพ์ url เว็บใหม่เพื่อเรียกใช้ไฟล์ kickstart.php เช่น http://newdomain.com/kickstart.php แล้วทำตามขั้นตอนในหน้าจอหน้าจอ

9

Session 15

Secure Your Website

1. Secure Administrator Login with strong password 2. Take Regular Joomla Backup 3. Use secret key to login into Joomla Administration 4. Are you using latest secure version of Joomla? 5. Monitor your Joomla site 6. Enable Search Engine Friendly (SEF) 7. Delete unwanted & avoid third party un-identified developer’s

extension 8. Scan your website (http://sitecheck.sucuri.net) 9. Keep file/folder permission appropriate 10. Implement Two-Factor Authentication

การดูแลให้ Joomla! มีความปลอดภัย

แหล่งข้อมูลเพิ่มเติม เกี่ยวกับความปลอดภัย Joomla!

• Joomla Vulnerable Extension list – https://vel.joomla.org/

• Joomla Developer Network (Security Centre) – https://developer.joomla.org/security-centre.html

• Joomla Security Documentation – https://docs.joomla.org/Security

• 10 Tools to Scan Website Security – https://geekflare.com/online-scan-website-security-vulnerabilities/

• Joomla Security Best Practice – https://geekflare.com/joomla-security/

• Joomla CVE Details – https://www.cvedetails.com/vulnerability-list/vendor_id-3496/product_id-16499/Joomla-Joomla-.html

Q & A

http://www.joomlacorner.com

http://www.marvelic.co.th