จูมล่า (Joomla) หรือจูมลา คือ ระบบจัดการเนื้อหา

ปรับปรุง : 2565-08-17 (เพิ่ม image overlay)

จูมล่า (Joomla)

จูมล่า (Joomla) หรือจูมลา คือ ระบบจัดการเนื้อหา (Open Source Content Management System) ซึ่งทีมพัฒนาชุดนี้ เคยเป็นทีมงานที่เคยร่วมพัฒนา Mambo แต่มีความคิดเห็นไม่ตรงกัน จึงแยกออกมาพัฒนา CMS ตัวใหม่ในชื่อ Joomla ในช่วงแรกความแตกต่างของ Mambo และ Joomla ยังไม่ชัดเจน สำหรับ Joomla รุ่น 1.0.0 เผยแพร่เมื่อ 17 กันยายน 2548 ต่อมา Mambo พัฒนารุ่นสุดท้าย Stable release 4.6.5 เมื่อ 26 มิถุนายน 2551

website checker

ทบทวนการติดตั้ง Joomla บน XAMPP 5.6
จาก joomla.org และ apachefriends.org
1. Download Joomla_3.9.1-Stable-Full_Package.zip
2. ถ้า extract here จะคล้ายทั้งหมดลงห้องนั้นเลย
3. จึง extract ลง c:\xampp\htdocs\joomla
4. เปิด http://localhost/joomla
5. เข้าสู่หน้า installation มี 3 ขั้นตอน คือ Configulation, Database และ Overview
- กรอก Site Name, Email, Username, Password แล้ว Next
- กรอก Database Type, Hostname, Username, Password, Database Name แล้ว Next
- เลือก Install Sample Data = Default Englis (GB) Sample Data
แล้วอ่านผลการ check ถ้าพร้อมก็กด Install ต่อเลย
6. ถ้าติดตั้ง แล้วค้าง ใช้ phpinfo ตรวจสอบดู
ถ้า max_execution_time=30
ก็ให้แก้แฟ้ม php.ini จาก 30 เป็น 300
คือ max_execution_time=300
7. ติดตั้งแล้วรอ Installing สักครู่ใหญ่
8. หลังติดตั้งเสร็จ จะพบ Congratulations! Joomla! is now installed
ให้ลบห้อง installation ออกก่อนเลยครับ แล้วค่อยทำอย่างอื่น
9. เข้าไซต์ http://localhost/joomla ในฐานะผู้ใช้
แล้วกรอก user & password เพื่อเข้าระบบ
หรือเข้าผ่าน http://localhost/joomla/administrator ในฐานะผู้ดูแลระบบ
10. templates ที่ joomla เตรียมให้มี 2 แบบให้เลือก
คือ Protostar เป็น default
ส่วน Beez3 ก็เลือกได้ครับ
เลือกโดยเข้า Menus, Main Menu, Home, Template Style = Protostar - Default
11. ถ้าตอนติดตั้งเลือก site offline
เวลาเข้าหน้าแรก ก็จะต้องกรอก user & password
เพราะระบบแจ้งว่าอยู่ระหว่าง This site is down for maintenance.
แก้ไขโดยเข้า System, Global Configuration, Site Offline = No
12. ต้องการ Template ให้กับ joomla สวย ๆ หน่อย
เข้า Freshjoomlatemplates.com
Demo - JPeople
ติดตั้ง Template โดย Extensions, Manage, Install
เลือกแฟ้มที่จะติดตั้ง คือ jpeople.zip
หลังติดตั้งสำเร็จก็ให้เข้า Template Manager
ผ่าน Extension, Templates, Templates ก็จะพบที่ติดตั้งเข้าไป
13. ทำตามข้อ 10 เปลี่ยน Template Style กันได้เลย
14. หากสนใจ SP Page Builder รุ่น Free
ให้เข้า https://www.joomshaper.com
ลอง download : SP Page Builder Lite 3 File Size: 2.3 Mb มาทดสอบ
ก่อนตัดสินใจซื้อในภายหลังได้
15. ถ้า install ไม่ได้
เพราะ upload_max_filesize (2M) กับ post_max_size (8M) กำหนดเล็กไป
ก็ไปแก้ไขใน php.ini ก็จะแก้ไขเรื่องข้อจำกัดด้านขนาด

Category กับ SP Page builder

ทดสอบ category ของ joomla กับ sp page builder
1. สร้าง Content, Category ชื่อ honda
2. สร้าง Users, Groups ชื่อ grp_honda
และกำหนด group parent เป็น administrator
3. กำหนด Permission ให้ grp_honda ทำได้ทุกอย่างใน honda category
4. สร้าง Page ชื่อ honda_pg1
5. กำหนดให้ grp_honda : Allowed เข้าจัดการ page นี้ได้
และกลุ่มอื่น grp_.. : Denied
ส่วน administrator เป็น inherited เหมือนเดิม
6. ทำเหมือนเดิมจากข้อ 1 - 5 แต่ตั้งเป็น toyota
ก็จะได้ toyota, grp_toyota และ toyota_pg1
7. สร้าง user ชื่อ hot และ top
มีแผนจะให้ hot เข้าจัดการ page กลุ่ม honda
และให้ top เข้าจัดการ page กลุ่ม toyota
8. แก้ไข user ใน Assigned User Groups
ให้ hot ดูแล grp_honda
ให้ top ดูแล grp_toyota
ทั้งสองบัญชีต้องเป็น registered ด้วย
เพื่อจะได้ login ได้ทั้ง frontend และ backend ได้
9. หากเข้าด้วย top ก็จะจัดการ toyota_pg1 ได้ แต่เข้า honda_pg1 ไม่ได้
ส่วน hot ก็จะจัดการ honda_pg1 ได้ แต่เข้าอีก toyota_pg1 ไม่ได้
10. ใน SPPB มี Category แยกจาก Content, Category
เมื่อสร้าง page toyota_pg3 แล้วกำหนด publishing เป็น toyota
พบว่า permission ของ 2 category ไม่เชื่อมกัน
จึงใช้ประโยชน์จาก Users, Groups ให้ผูกกับ Category อัตโนมัติไม่ได้
11. ถ้าจะ lock ตามกลุ่ม ก็ยังทำได้แบบ manual
คือ ทำตามข้อ 5

SP Easy Image Gallery

การสร้างอัลบั้มใน Joomla ทำได้ผ่าน SP Easy Image Gallery ที่เป็น Extension ของ Joomla สามารถ Dowload มาใช้งานได้ฟรี เริ่มคลิ๊กจาก Menu bar, Components แล้วเลือก SP Easy Image Gallery ได้ ซึ่งจะเป็นที่เก็บอัลบั้มทั้งหมด แต่ละ Albums จะจัดกลุ่มตาม Categories แต่ละ Categories จะถูกนำไปเป็นตัวเลือกในเมนูของแต่ละโฮมเพจ เมื่อสั่ง Add New Album แล้ว ก็จะต้องใส่ Title, Description, Featured Image, Category หลังสร้าง Album แล้วก็จะถึงส่วนของการอัพโหลดภาพที่เรามี หากอัพโหลดภาพครั้งแรกไม่หมด ครั้งต่อไปสามารถอัพโหลดเพิ่ม จัดลำดับ หรือลบภาพที่ไม่ต้องการได้
การติดตั้ง SP Easy Image Gallery
1. Demo / Download : com_speasyimagegallery_v1.5.zip 668 KB
2. Extract .zip ลงในเครื่องคอมพิวเตอร์
3. Menu bar, Extensions, Manage, Install, เลือก Install from folder แล้วเลือก Folder ที่ Extract ไว้แล้ว
4. พบ Installation of the module was successful.
5. พบ SP Easy Image Gallery ใน Menu bar, component ที่พร้อมใช้งาน
6. สร้าง Album แบบยังไม่กำหนด Category แล้วอัพโหลดภาพได้ [album : sppb]
7. สร้าง Category และกำหนดให้เป็นแบบ Public [cat : myspimage]
8. กลับไปกำหนดให้ Album อยู่ใน Category ที่สร้างใหม่ได้
9. นำ Album ไปเป็นตัวเลือกใต้ Main Menu
- ใต้ Menus, Main menu สร้าง sub2
- Menu item type = SP Easy Image Gallery + Album
- Album = ชื่ออัลบั้มที่เคยสร้าง
10. นำ Category ไปเป็นตัวเลือกใต้ Main Menu
- ใต้ Menus, Main menu สร้าง sub3
- Menu item type = SP Easy Image Gallery + Albums
- Category = ชื่อแคทีกอรี่ที่เคยสร้าง
11. กลับไปดูผลที่หน้า Home page ส่วนของ Main menu

ขนาดภาพผ่าน custom css และ google font และขอบ padding

ปรับ CSS ได้ตามใจ ใน SP Page builder
ตามที่น้องเลขาฯ ขอให้ปรับขนาดตัวอักษร และช่องว่างระหว่างเซล (Padding) ของ Person Object ก็ต้องใช้เครื่องมือของ Chrome เข้าไปดูว่า CSS ตัวที่กำหนดขนาดของ Padding คือเท่าไร พบว่า ค่าของ .sppb-person-information-wrap, .sppb-addon-person, .sppb-addon-content เป็น 18px 30px 29px ผมก็เปลี่ยนเป็น 0 ทั้งหมด ด้วยการใช้ padding:0px !important; และกำหนดให้ชื่ออยู่ตรงกลางของภาพ เพราะเดิมชิดซ้าย หรือใช้   หรือ <br/> ก็ช่วยจัดการข้อความได้
padding: top right bottom left;
padding-top
padding-right
padding-bottom
padding-left

แกลอรี่ที่ 1

แกลอรี่ที่ 2

แกลอรี่ที่ 3

เลือกสีแบบ RGB หรือ Picker ใน Joomla

raw html

Addons ของ SP Page builder

SP Page builder มีกว่า 60 Addons ให้เรียกใช้มากมาย แต่ละ Addons มีตัวเลือก และมี Tab สำหรับกำหนดค่าที่หลากหลาย และผู้พัฒนาได้พัฒนา Addons เพิ่มขึ้นอยู่เสมอ เพราะการใช้งานมีค่าบริการ หากมีการพัฒนา php + mysql หรือมีเทคโนโลยีใหม่ ก็จะปรับให้ Addons น่าใช้ และเข้ากับสภาพแวดล้อมใหม่ ๆ ของผู้ใช้ได้

ปรับ Album บน SP Easy Image Gallery

มีคำถามว่าจะเรียงอัลบั้ม (Album) ใน Categories บน SP Easy Image Gallery ได้อย่างไร และ กำหนดวันนี้ประจำอัลบั้มอย่างไร

วิธีการ มีดังนี้
เมื่อเข้าไปใน Album บน SP Easy Image Gallery แล้วเลือก Publishing จะพบคำว่า Ordering ที่หมายถึงการจัดเรียง ซึ่งมีค่าปริยายเป็น เรียงแบบน้อยไปมาก (Ascending) ไม่พบตัวเลือกเปลี่ยนเป็นมากไปน้อย (Descending) ถ้าไม่ลง extension เพิ่มเติม จึงต้องใช้เทคนิคในฝั่งผู้ใช้ (User) กรณีที่พอใจกับการให้อัลบั้มแรกขึ้นก่อน และอัลบั้มใหม่ต่อท้าย ก็ใช่ตัวเลขเป็นวันที่ในช่อง Ordering เช่น 631201 คือ วันที่ 1 ธันวาคม 2563 แต่ถ้าต้องการให้เรียงแบบอัลบั้มใหม่ขึ้นมาก่อน ตัวเลขใน Ordering ก็ต้องกำหนดเองโดยผู้ใช้ เสนอให้อัลบั้มแรกเป็นเลข 9990 อัลบั้มต่อไป 9980 และเรียกลดลงเรื่อย ๆ ก็จะมีได้ 999 อัลบั้ม ตามจำนวนหลักที่ใช้ สำหรับเลข 0 เผื่อไว้สำหรับแทรกอัลบั้ม เช่น สร้างอัลบั้มไปแล้ว และต้องการเพิ่มอัลบั้มแทรกกลงระหว่างอัลบั้ม 9930 กับ 9940 โดยเป็นอัลบั้มเซตเดียวกับ 9930 ก็ให้ใช้เลขว่า 9931 9932 เรียงได้อีกนับ 10 อัลบั้ม และอีกคำถามที่เข้ามาว่า วันที่ประจำอัลบั้มนั้น เปลี่ยนอย่างไร ระบุเป็นวันที่สร้างอัลบั้ม ก็ให้เข้า publishing เหมือนเดิม แล้วแก้ไขวันที่ในช่อง Created Date ก็ทำให้วันที่ประจำ Album เป็นวันที่ที่ต้องการ

การกำหนดตำแหน่ง description ของอัลบั้ม

1. เริ่มจากการสร้าง page ที่รองรับ Custom CSS (ในกรณีไม่มี)
2. การกำหนด Menu ให้ลิงค์ไปยังอัลบั้มนั้น มีความแตกต่างในการเลือก Menu Item Type แบบ Albums หรือ Page ระหว่างกิจกรรมแสดงอัลบั้มจาก SP Easy Image Gallery : Albums และ SP Page Builder : Page พบว่า ใน Albums ไม่สามารถกำหนด Custom CSS แต่เรียกจาก Page จะเปลี่ยน Custom CSS ได้
3. ใน page ให้เพิ่ม Row และเพิ่ม Joomla Module เลือก Module ชื่อ "กิจกรรมคณะ .." ที่เป็นชื่อ Module และใน Module นั้นจะเชื่อมกับ Layout type = Album List และมี Catetory ชื่อ "กิจกรรมของคณะ .." ที่อยู่ใน SP Easy Image Gallery และใน Tab: Style ไปที่ Custom CSS แล้วกำหนดตำแหน่งด้วย CSS Code
4. CSS Code เพื่อกำหนดรูปแบบในการแสดงผล

.speasyimagegallery-album-info { 
  position: unset !important; 
  background-color: #0000ff;
}
.speasyimagegallery-album .speasyimagegallery-album-info { 
  padding : 5px 5px; 
}

วิธีเปลี่ยน Template Style หรือ Menu

วิธีการกำหนด Menu ให้กับ Page ที่สร้างด้วย SP Page Builder (การกำหนดเมนูให้กับเพจ ไม่ได้เข้าผ่าน Page แต่เข้าผ่าน Menu ซึ่ง Menu จะผูกติดกับ Template จึงต้องเลือก Template ให้กับ Page)
1. สำรวจ Menu bar, Extensions, Templates, Templates พบว่า ติดตั้งไว้หลายแบบ เช่น Beez3 Details and Files และ Shaper_educon Details and Files
2. สำรวจ Menu bar, Extensions, Templates, Styles พบว่า สร้างไว้หลาย Style และมีจำนวน Page ที่ถูก Assign ให้กับแต่ละ Page เช่น Shaper_educon
3. มีการสร้าง Menu ไว้แล้วหลายคณะ สำนัก หน่วยงาน
4. เมื่อสร้างเพจขึ้นใหม่ ซึ่งไม่พบว่าให้เลือก Template หรือการ Assign เมนู
5. เริ่มเข้าสู่การ Assign menu หรือเลือก Template โดยเลือก Menu bar, Menus, All menu items หรือเลือก Menu bar, System, Menu, Menu Items
6. ข้างปุ่ม Search Tools กรอกชื่อ Page ที่ต้องการ เช่น การบิน จะพบ Page ที่ชื่อ "หลักสูตรธุรกิจการบินและการขนส่งทางอากาศ"
7. พบ Template Style เลือก "คณะบริหารธุรกิจฯ" = การ Assign Menu
8. แล้ว Save & Close ก็จะพบ Menu ตาม Template ที่เลือก เมื่อสั่ง Preview
ปล. ได้รับคำแนะนำจาก คุณเบนซ์ ถึงวิธีเปลี่ยน Menu หรือ Template ให้เพจที่ไม่ใช่ Default Menu

เมนูแบบ Mega Menu & Off Canvas

Menu แบบ Canvas toggler หรือ Off Canvas Menu คือ Slide menu ที่ไหลออกมาจากด้านข้าง (Slidebar Navigation) แสดงผลปกติบน Desktop แต่เมื่อไปอยู่บน Mobile device ก็จะซ่อนเมนูหลักไว้ จะเข้าถึงเมนูหลักได้ผ่าน Off Canvas menu ที่แสดงรายการตัวเลือกผ่าน icon สามขีด เพื่อเปิดเมนู พบว่า Joomla มี Plugin : Helix3 ซึ่งเป็น Template framework ที่มีการตั้งค่า มีตัวเลือกที่ใช้งานง่าย และได้รับความนิยม ที่มาพร้อม Layout Manager , Bootstrap , MegaMenu , Off-Canvas , Font Awesome ซึ่งเมนูที่น่าสนใจ มี 2 แบบ คือ Mega Menu และ Off Canvas มีขั้นตอนที่น่าสนใจ ดังนี้ 1) เมื่อสร้างเมนูขึ้นมาแล้ว และกำหนด Menu Items จนครบ ก็จะมีเมนูไว้ใช้ใน page ต่าง ๆ เช่น กำหนดให้เมนูชื่อ "myfaculty" ซึ่งจะผูกโยงกับ Templates และ Styles ซึ่งต้องเข้าใจความสัมพันธ์ระหว่าง menu , page , module , template และ style ก่อนเริ่มต้นจัดการ offcanvas 2) เข้า Extensions , Site 3) สร้าง Modules ชื่อ "faculty_canvas" ที่กำหนด Select Menu = "myfaculty" , Position = offcanvas และ Type = Menu 4) ใน Menu Assignment ให้ check box หน้าตัวเลือกที่ต้องการให้ offcanvas ทำงาน 5) กรณีสร้าง page ใหม่ และเพิ่มเข้าในเมนูใหม่ หากต้องการให้ offcanvas ทำงาน ต้องเข้าไปทำเครื่องหมาย check box
joomshaper.com/../helix3/what-is-helix3
joomshaper.com/../helix3/menu-settings-customization

การนำเสนอภาพแบบสไลด์

ข้อมูลจาก w3techs.com เมื่อ 1 มิ.ย.64 พบว่า Joomla เป็นระบบ CMS ที่ได้รับความนิยมอันดับ 3 แล้วพบว่ามี Addon ที่นำเสนอภาพสไลด์ได้อย่างน่าสนใจ เป็น Addon แบบ Carousel คือ การนำเสนอภาพแบบสไลด์เลื่อนไปทีละหน้าด้วยขนาดเท่า ๆ กัน มีระยะเวลาตามค่า Interval ซึ่งใน Joomla มีค่าปริยายของ Bullet Controllers เป็นสีขาวและมีขนาดเล็กเพียง 1 px เข้าไปตรวจสอบ พบว่า กำหนดใน .sppb-carousel-indicators li {border: 1px solid white;} จึงเข้าไปปรับคุณสมบัติหน้าแท็บ STYLE โดยกำหนด Custom CSS เป็น .sppb-carousel-indicators li {border: 3px solid black;} ทำให้ Bullet มีขนาดใหญ่ขึ้น และสีไม่ถูกกลืนไปกับภาพที่มีสีพื้นเป็นสีขาว ส่วนชื่อคลาส sppb-carousel-indicators ตรวจสอบด้วย Developer tools (Ctrl+Shift+I) บน Chrome browser

การใช้ Image Overlay

Add on ชื่อ Image Overlay เหมาะกับการนำเสนอภาพที่มีจำนวนไม่มาก เลือกภาพที่โดดเด่นในแต่ละกิจกรรมมานำเสนอ มีตัวเลือกวางสีทับภาพในแบบ Gradient เมื่อเลื่อน mouse ไป over จะแสดงสีที่แท้จริง และมีบริการ Lightbox ทำให้คลิ๊กแล้วขยายภาพออกแบบ แบบที่ใช้ใน Facebook Album
สีเดิมที่มาจากระบบ
rgba(127, 0, 255, 0.8) ม่วงเข้ม
rgba(225, 0, 255, 0.7) ม่วงอ่อน
ได้เปลี่ยนโทนสี และลดน้ำหนักสี ทำให้ภาพเด่นชัดขึ้น
rgba(127, 0, 255, 0.3) // ม่วงเข้ม แต่น้ำหนักสีเบามาก
rgba(0, 255, 255, 0.6) // ฟ้า

"ไม่เริ่มต้นในวันนี้ จะไม่มีทางสำเร็จในวันพรุ่ง" โดย โยฮัน ว็อล์ฟกัง ฟ็อน เกอเทอ

Thaiall.com

Truehits.net