goonila

จัดรูปแบบบทความด้วย News Show Pro GK1

2010-11-06T12:55:00.000+07:00

โมดูลที่ช่วยจัดการบทความหน้าเว็บไซต์ให้เกิดความสวยงาม รูปแบบการปรับแต่งค่อนข้างหลากหลายและครอบคลุมดี ใช้งานไม่ยากเท่าไหร่ รูปร่างหน้าเป็นอย่างไร คงต้องไปดู ที่ demo page ของผู้พัฒนา http://tools.gavick.com/demo/news-show-pro-gk1 เอาเป็นว่าไม่พูดมาก มาดูการใช้งานกันดีกว่า

เมื่อติดตั้งเสร็จแล้วจากนั้นก็เข้ามาที่ module manager หาโมดูลที่ชื่อ News Pro GK1
โมดูลพารามิเตอร์

Module unique ID คือชื่อโมดูลตั้งให้ต่างกันกรณีใช้ 2 โมดูลใน 1 หน้าเพจ
Main block width , Links block width กำหนดความกว้าง ความสูงของโมดูลแสดงผล
Table cell padding ระยะความห่างของขอบบทความ กำหนดเป็น % หรือ px

เลือก section, categories ที่ต้องการให้บทความมาแสดงที่ News Show Pro GK1

รูปแบบการแสดงผลของบทความ เช่น จำนวนบทความ จำนวนคอลั่มน์

ตัวอย่างการแสดงผลแบบ 2 คอลั่มน์ 6 บทความ

Show list with links แสดง category
Select position of list with links ตำแหน่งการจัดว่า ดูได้จากรูปด้านบน

เปิด/ปิด ตำแหน่งรายละเอียดต่าง ๆ ดูตามหมายเลขด้านบน

ส่วนจัดการรูปแบบของเนื้อหา เช่น หัวข้อ รูปภาพ เนื่อเรื่อง และลิ้งก์อ่านต่อ

รูปแบบการจัดเรียงเนื้อหา หมายเลข 1 คือบนสุด 2, 3, 4 เรียงกันลงมา

สามารถกำหนดใส่/ไม่ใส่ rel="nofollow" ให้กับลิ้งก์ได้ด้วย
target in รูปแบบการเปิดหน้าลิ้งก์ _self คือ เปิดหน้าเพจใหม่ด้วยหน้าต่างเบราเซอร์เดิม _blank คือเปิดหน้าเพจใหม่ด้วยหน้าต่างเบราเซอร์ใหม่

ส่วนนี้เป็นการกำหนดการตัดบทความ

News image width, News image height กำหนดความกว้างความสูงของรูปย่อ ใช้หน่วยวัดเป็น px
News image margin คือ กำหนดระยะห่างรอบ ๆ รูป ใช้หน่วยวัดเป็น px
Thumbs background คือ สีพื้นหลังของรูป
Thumbs stretch คือ การยืดรูปย่อ
Thumbs quality คุณภาพของรูปย่อ กำหนด 1-100 ค่า 100 คือ ดีที่สุด (ดีที่สุดขนาดรูปก็ใหญ่ตามคุณภาพของรูป)
Cache time ระยะเวลาการเก็บแคชรูปชั่วคราว กำหนดเป็น 0 หากไม่ต้องการใช้การแคช
จบการใช้งาน
ดาวน์โหลด News Show Pro GK1

ดาวน์โหลด News Show Pro GK1

ลิ้งก์ดาวน์โหลดสำรอง

ดาวน์โหลด News Show Pro GK1

ปรับแต่งเมนูแบบไอคอน ให้สวยงาม ด้วย UserToolbar

2010-11-06T12:41:00.001+07:00

UserToolbar เป็นคอมโพเน้นท์ ทูลบาร์ เมนู สวย ๆ สามารถปรับแต่งได้ตามใจโดยไม่ต้องสนใจว่าจะต้องไปวางที่ตำแหน่งไหนของ template มีไอคอนให้เลือกใช้หลากหลายและสามารถอัพโหลดไอคอนของตนเองได้ สำหรับท่านที่ไม่มีที่จะวางเมนูแล้ว หรือต้องการความสวยงามแปลกใหม่ให้กับเว็บไซต์ ตัวนี้ประกอบด้วยคอมโพเน้ท์และปลั๊กอิน ติดตั้งครั้งเดียว ได้ทั้งสองอย่าง หน้าตาของทูลบาร์ตัวนี้เป็นอย่างไรลองเข้าไปดู demo ได้ที่นี่ http://j.l33p.com/ubar

เมื่อติดตั้งเสร็จก็จะขึ้นข้อความอย่างนี้

จากนั้นก็เข้ามาที่ components >> user toolbar >> configuration

ด้านซ้ายมือจะเป็นหน้า Preview ส่วนด้านขวานั้นเป็นพารามิเตอร์เอาไว้ปรับค่าต่าง ๆ

เอาล่ะ สาธิตการสร้างเมนูสักอัน

คลิ๊กที่ แท็บเมนู toolbar buttons ที่อยู่ด้านซ้ายมือ จากนั้นคลิ๊กที่ new

เพียบ จะเลือกลิ้งก์ไปที่ไหนก็คลิ๊กเลือกเอาเลยครับ แต่ผมเลือก main menu

ใส่ Name, Description จากนั้นคลิ๊กที่ icon เพื่อเลือกไอคอน

มีไอคอนมากมายให้เลือก

หรือจะเลือกอัพโหลดไอคอนเองก็ได้

ผมจะเลือกไอคอนที่เป็นรูปบ้านก็แล้วกัน

แล้วคลิ๊กเลือกให้ลิ้งก์มาที่ home หรือหน้าแรกนั้นเองอย่าลืมคลิ๊ก enable ด้วยนะครับจากนั้นก็ทำการ save

มาดูที่หน้าเว็บกัน หน้าตาก็จะเป็นอย่างนี้ครับเมื่อลองคลิ๊กที่รูป กากบาท เมนูจะถูกย่อลงไปดังรูปด้านล่าง

จบการใช้งาน
ดาวน์โหลด UserToolbar

ดาวน์โหลด UserToolbar

ลิ้งก์ดาวน์โหลดสำรอง ubar_0.9.3_2009-12-31 (เข้าสู่ระบบก่อน)

ดาวน์โหลด UserToolbar

จัดการไฟล์ดาวน์โหลดด้วย Phoca Download

2010-11-06T12:26:00.001+07:00

Phoca เว็บไซต์ที่พัฒนา extensions เกี่ยวกับ joomla หลาย ๆ ตัว ส่วนมากจะฟรีทั้งนั้น Phoca Download ก็เป็นอีกตัวหนึ่งของ extension ค่ายนี้ แล้วดีกว่าอันอื่น ๆ อย่างไร อันนี้ก็แล้วแต่ผู้ใช้ครับว่าชอบแบบไหนก็เลือกันเอาเอง extension ตัวนี้จริง ๆ ว่าจะเขียนให้อ่านกันตั้งนานแล้ว แต่ดูฟังก์ชั่นเยอะน่าดู บทความคงยาวเป็นกิโลฯ (ไม่ขยันก็บอกกันตรง ๆ ) มาดูกันคราว ๆ ก่อนว่าจัดการอะไรได้บ้าง คือสามารถแบ่งหมวดหมู่การดาวน์โหลดได้ แบ่งเป็น section และ category อัพโหลดไฟล์จากเครื่องคอมฯ ขึ้น host ได้โดยตรงหรือจะเลือกอัพไว้ที่อื่นแล้วก็อปปี้ลิ้งก์มาใส่ ก็ได้ (รีโมตไฟล์) จัดการไฟล์ได้หลายอย่าง ตั้งแต่ไฟล์เอกสาร (doc, pdf, txt etc.) ไฟล์รูป ไฟล์วีดีโอ มีปลั๊กอินทีช่วยอำนวยความสะดวกในการลิ้งก์ไฟล์เข้ากับเนื้อหาใน joomla มีระบบจัดการผู้ใช้งาน มีระบบเก็บสถิติการดาวน์โหลด

เมื่อเริ่มติดตั้งจะเข้ามาสู่หน้านี้ ให้คลิ๊กที่ install เพื่อติดตั้ง

เมื่อติดตั้งเสร็จก็จะมาที่ หน้า Control Panel จากนั้นคลิ๊กเข้ามาดู parameter ที่มุมบนด้านขวามือ

File Name or Name : รูปแบบการแสดงชื่อไฟล์
External Download Link : รูปแบบการเปิดหน้าเพจเมื่อคลิ๊กดาวน์โหลดลิ้งก์ภายนอก self คือโหลดในหน้าต่างเดิม blank เปิดหน้าต่างใหม่ (หน้าต่างเบราเซอร์)
Display Downloads : แสดง/ซ่อน สถิติการดาวน์โหลด
Display Description : รูปแบบการแสดงรายละเอียดไฟล์
Display Detail Button : แสดง/ซ่อน รายละเอียดไฟล์ (เมื่อนำเคอร์เซอร์เมาส์ไปวางไว้บนปุ่มจะปรากฏรายละเอียดขึ้นมา)
Display New Icon : แสดงป้ายบอกว่าเป็นไฟล์ใหม่ (รูป new) กำหนด 0 หากไม่ต้องการใช้ฟังก์ชั่นนี้ หรือ ใส่ตัวเลขวันที่ หากต้องการใช้งาน
Display Hot Icon : เหมือน Display New Icon ใส่ตัวเลขหากต้องการใช้งานฟังก์ชั่นนี้ เช่น 10 คือ ดาวน์โหลด 10 ครั้งจะขึ้นป้ายว่า HOT
Display Most Downloaded Files : แสดง/ซ่อน Most Downloaded (ไฟล์ที่ได้รับการดาวน์โหลดมากที่สุด)
Display File View : แสดง/ซ่อน วิวไฟล์ก่อนดาวน์โหลด (กรณีเป็นรูปหรือวีดีโอ)
Display Date Type : รูปแบบการแสดงวันที่
Meta Description : รายละเอียดเมต้าแท็ก
Meta Keywords : ราละเอียดเมต้าคีย์เวิร์ด (คำค้นหา)

Section Ordering, Category Ordering, File Ordering : รูปแบบการเรียงลำดับ (เช่น เรียงตามชื่อ, วันที่เผยแพร่, วันที่ปรับปรุง, เรียงตามไอดี)
Pagination Default Value : เขาเรียกว่าอะไรดีล่ะ อืม..การแสดงไฟล์ดาวน์โหลดต่อ 1 หน้า
Pagination : ปุ่มเลือก การแสดงไฟล์ดาวน์โหลด (ปุ่มแบบดร็อปดาวน์ลิสต์)
Display Up Icon : แสดง/ซ่อน ปุ่ม up Enable Plugin Query : เปิดปลั๊กอิน Query
Display Category Comments : แสดงคอมเม้นต์
Display File Comments : แสดงไฟล์คอมเม้นต์

Theme Settings : ปรับแต่งรูปแบบของ theme
Sections Settings : ปรับแต่งเกี่ยวกับการแสดง section

License Box Height : ปรับขนาดความสูงของกล่องแสดงเกี่ยวกับลิขสิทธิ์
Play Settings : ปรับแต่งเกี่ยวกับการเล่นไฟล์ (ไฟล์เสียงทั้งหลาย)

Preview Settings : ปรับแต่งการแสดงรูป
User Upload Settings : ปรับแต่งค่าผู้ใช้อัพโหลด (กำหนดจำนวนไฟล์ ขนาดไฟล์ทั้งหมด ขนาดไฟล์แต่ละไฟล์)

ไอคอนเมนูใน Control Panel
File : จัดการไฟล์
section : จัดการ section
Categories : จัดการ Categories
Licenses : จัดการหน้าบอกลิขสิทธิ์
Setting : ส่วนกำหนดค่าในการอัพโหลด
Statistics : สถิติ
Users : จัดการผู้ใช้งาน

ก่อนอื่นก็ต้องทำการสร้าง section ก่อนโดยคลิ๊กเข้าที่ section

คลิ๊กที่ new เพื่อสร้าง section

กำหนด Title, Alias ตามตั้งการจากนั้นทำการ save

จากนั้นก็เข้ามาสร้าง Categories ต่อ ขั้นตอนเหมือการสร้า้ง section

เพียงแต่ต้องกำหนด section

Licenses ลิขสิทธิ์

จะสร้างหรือไม่ก็ได้ ตามต้องการ

การอัพโหลดไฟล์

คลิ๊กเข้าที่ files

จะเห็นส่วนจัดการไฟล์เยอะไปหมด ไม่จำเป็ต้องใส่หมดทุกช่องก็ได้ครับ กำหนดเท่าที่จะใช้งานจริง ๆ

คลิ๊กที่ file หากต้องการอัพโหลดหรือเลือกไฟล์ที่อยู่ภายใน host

จะปรากฏหน้าต่างนี้ขึ้น เลือกไฟล์ที่มีอยู่แล้วหรือ คลิ๊กที่ browse.. เพื่ออัพโหลด

เมื่อเลือกไฟล์แล้วชื่อไฟล์ที่ปรากฏในช่อง filename

หรือใส่ลิ้งก์จากภายนอก กรณีฝากไฟล์ไว้ที่อื่น

การสร้งลิ้งก์เชื่อโยงไปที่ตัว คอมโพเน้นท์

เข้าที่ menus เลือกเมนูที่ต้องการสร้างลิ้งก์

เลือกที่ phoca download

เลือกส่วนที่ต้องการ

รูปแบบของหน้าดาวน์โหลด

รูปแบบของไฟล์ดาวน์โหลด

ปลั๊กอิน Button - Phoca Download ต้องติดตั้งแยกต่างหากเมื่อติดตั้งแล้วเข้าไปที่ plugin manager >> Button - Phoca Download ทำการ enable

เป็นปุ่มสำหรับใช้เชื่องโยงลิ้งก์กับเนื้อหา

เอาออกอย่างไรเดี๋ยวมีคนถามแน่นอนชิงตอบก่อนแล้วกัน

(สำหรับเวอร์ชั่น 1.3.3) เปิดไฟล์ components/com_phocadownload/helpers/phocadownload.php
หาบรรทัด ประมาณบรรทัดที่ 205

function renderUserL() {
        return base64_decode('PGRpdiBzdHlsZT0idGV4dC1hbGlnbjogY2VudGVyOyBjb2xvc
jojY2NjOyI+UG93ZXJlZCBieSA8YSBocmVmPSJodHRwOi8vd3d3LnBob2NhLmN6L3Bob2NhZG93bmxvYWQiIHN0
eWxlPSJ0ZXh0LWRlY29yYXRpb246IG5vbmU7IiB0YXJnZXQ9Il9ibGFuayIgdGl0bGU9IlBob2NhIERvd25sb2F
kIj5QaG9jYSBEb3dubG9hZDwvYT48L2Rpdj4=');

แก้ไขเป็น

function renderUserL() {
        return base64_decode('');

(สำหรับเวอร์ชั่น 1.3.5) เปิดไฟล์ administrator/components/com_phocadownload/helpers/phocadownload.php (อัพเดท may 22, 2010) หาบรรทัด ประมาณบรรทัดที่ 551

function renderPhocaDownload() {
            return base64_decode('PGRpdiBzdHlsZT0idGV4dC1hbGlnbjogY2VudGVyOyBjb2xvcjojY2NjOyI+UG93ZXJlZCBieSA8YSBocmVmPSJodHRwOi8vd3d3LnBob2NhLmN6L3Bob2NhZG93bmxvYWQiIHN0eWxlPSJ0ZXh0LWRlY29yYXRpb246IG5vbmU7IiB0YXJnZXQ9Il9ibGFuayIgdGl0bGU9IlBob2NhIERvd25sb2FkIj5QaG9jYSBEb3dubG9hZDwvYT48L2Rpdj4=');
    }

แก้ไขเป็น

function renderPhocaDownload() {
            return base64_decode('');
    }

ดาวน์โหลด Phoca Download

ลิ้งก์สำรอง เวอร์ชั่น 1.3.3

ดาวน์โหลด Phoca Download

ทำแถบประกาศตัวอักษรวิ่ง Fancy Text Scroller Module

2010-11-06T12:07:00.000+07:00

แถบประกาศแบบตัวหนังสือวิ่งหรือเลื่อน สรา้งสีสันให้กับเว็บไซต์ ดูตัวอย่างได้ที่ http://www.joomlahackers.net/demosite/
สามารถใส่หัวข้อประกาศได้ 10 อัน ใช้งานง่ายไม่ยุ่งยากตำแหน่งที่แสดงจะอยู่ที่ ด้านบนสุดหรือด้านล่างสุดของเว็บไซต์
ไม่ขึ้นกับตำแหน่ง position ของ template โมดูลตัวนี้พัฒนาโดย joomlahackers มาดูการใช้งานกันเลย

เมื่อทำการติดตั้งเสร็จเรียบร้อยก็มาที่ admin menu >> modules manager >> หาโมดูลที่ชื่อ Marquee News Scroller

Step Speed of the Scroller, Original Speed of the Scroller กำหนดความเร็วของการเลื่อตัวอักษร ใส่เป็นตัวเลข
Pause on Mouse Over หยุดข้อความเมื่อนำเคอร์เซอร์เมาส์มาวางบนตำแหน่งตัวอักษร
Position of the Scroller ตำแหน่งการแสดงผล
Title หัวข้อ
Scrolling Text ข้อความ
หัวข้อกับ ข้อความสีจะแตกต่างกัน
จากนั้นก็ทำการ enable ให้โมดูลทำงาน

รูปแบบการแสดงผลของโมดูล
หากเปิดใช้งานโมดูลแล้ว ทำให้รูปแบบการแสดงผลของ template เสียไป เช่นตัวอักษรในหน้าเว็บเพจมาอยู่ตรงกลาง ให้เข้าไปเปิดไฟล์ /modules/mod_fancyscroller/tmpl/style.css
หาบรรทัดนี้

  body{
  margin:0px;
  padding:0px;
  text-align:center;
  height:100%;
 }

แก้ไขเป็น

/*body{
  margin:0px;
  padding:0px;
  text-align:center;
  height:100%;
 }*/

เพิ่มเติม เปลี่ยนสีสันของการแสดงผล
ในไฟล์เดียวกันนี้ (/modules/mod_fancyscroller/tmpl/style.css)

#dhtmlgoodies_marquee{
  /* general marquee layout*/
  padding-top:3px;
  height:25px;
  background-color: #000;  <<--เปลี่ยนสีพื้นหลัง
{

#dhtmlgoodies_marquee .textObj{ /* Layout for the marquee text */
  position:absolute;
  color: #FFF;  <<--เปลี่ยนสีข้อความ
  font-weight:bold;
  white-space:nowrap;
  font-family: Segoe UI,Tahoma,Verdana,Arial;
        font-size:15px;
 }

.highlighted{
  color:#F00; // Red color  <<--เปลี่ยนสี title 
 }

เปลี่ยนตรงโค๊ดสี html ตามสีที่ต้องการ จบการใช้งาน
ดาวน์โหลด Fancy Text Scroller Module

ดาวน์โหลด Fancy Text Scroller Module

ลิ้งก์ดาวน์โหลดสำรอง (ล็อกอินเข้าระบบก่อน)

ดาวน์โหลด Fancy Text Scroller Module

ปรับขนาดของอักษร Simple Font Resizer

2010-11-06T12:01:00.000+07:00

Simple Font Resizer โมดูลที่ช่วยเพิ่ม/ลดขนาดของตัวอักษร ภายในเว็บไซต์คุณ การเพิ่ม/ลดขนาดของตัวอักษร เป็นเครื่องมือช่วยอำนวยความสะดวกแก่ผู้ใช้ ที่ผู้ใช้อาจจะมีขนาดของจอภาพและปรับความละเอียดของจอภาพไม่เท่ากัน หน้าจอขนาดไหนไม่สำคัญ ลด/ขยายได้อยู่แล้ว

การใช้งาน ดาวน์โหลดตัวโมดูลมาจากนั้นทำการติดตั้งแบบปกติ (หากต้องการศึกษาเรื่องการติดตั้ง extension เพิ่มเติมที่นี่)
เมื่อติดตั้งเสร็จก็มาที่ module manager

หาโมดูลที่ชื่อ Font Size Changer

Default Font Size % ใส่ขนาดของตัวอักษรปกติ
Use Images for buttons? เลือกปุ่มแบบตัวอักษรหรือรูปภาพ
จากนั้นทำการ enable ให้โมดูลทำงาน
รูปแบบก็จะเป็นแบบนี้

Download Simple Font Resizer

ลิ้งก์ดาวน์โหลดสำรอง

ในการดูส่วนที่เหลือกรุณาเข้าสู่ระบบหรือลงทะเบียน..

แสดงราคาน้ำมัน ด้วย PTT Daily Oil Price

2010-11-06T11:36:00.000+07:00

โมดูลราคาน้ำมันประเทศไทยของ ปตท. ไม่ต้องปรับแต่งอะไรครับมีไว้โชว์อย่างเดียวรูปแบบก็อย่างในรูปด้านบนที่ เห็น เป็นของคนไทยทำเองครับ เป็นของเว็บ http://www.colorpack.net/ ครับ

อย่างที่บอกไม่ต้องปรับแต่งครับ enable ให้โมดูลทำงาน หาตำแหน่งบนหน้า template ที่เหมาะสมวาง ก็ใช้งานได้ทันทีครับ
ดาวน์โหลด PTT Daily Oil Price

ดาวน์โหลด PTT Daily Oil Price

ลิ้งก์ดาวน์โหลดสำรอง

ในการดูส่วนที่เหลือกรุณาเข้าสู่ระบบหรือลงทะเบียน..

Web Directory ด้วย SOBI 2 - Content Construction Kit

2010-11-06T11:33:00.000+07:00

SOBI 2 - Content Construction Kit คอมโพเน้นท์ประเภทจัดการเกี่ยวกับเนื้อหา โดยการจัดการมีลักษณะเป็นแบบ Directory หลาย ๆ คนคงเคยเห็นเว็บไดเรกทอรี่มาแล้ว คือ มีหัวข้อใหญ่ ๆ แล้วข้างในมีหัวข้อย่อยอยู่มากมาย ผู้ใช้สามารถส่งเนื้อหาเข้ามาได้ ทั้งผู้ใช้ที่ลงทะเบียนแล้ว หรือยังไม่ได้ลงทะเบียนก็สามารถส่ง เนื้อหาเข้ามายังเว็บไซต์ได้ โดยผู้ที่ยังไม่ลงทะเบียนต้องกรอกข้อมูลที่สำคัญ ๆ มากหน่อย และมีฟังก์ชั่นสำหรับคิดเงินด้วย (ในกรณีต้องการให้ข้อความหรือบทความเผยแพร่ คุณต้องจ่ายเงินมาก่อน) โดยที่ผู้ดูแลระบบจะเป็นคนตรวจสอบและสั่งเผยแพร่บทความนั้น ๆ สามารถตั้งระยะเวลาการเผยแพร่ได้ (คล้าย ๆ กับเว็บประกาศขายของ)

เมื่อติดตั้งแล้วก็จะเข้าสู่หน้านี้

กด install SOBI2 data อีกทีเพื่อติดตั้งข้อมูลงฐานข้อมูล

รอสักครู่

เมื่อติดตั้งเสร็จจะมาสู่หน้านี้

ต้องทำความเข้าใจก่อนว่าเว็บไดเรอทอรี่ (Directory) หน้าตาจะเป็นแบบรูปด้านบน มีหัวข้อใหญ่ ๆ แล้วมีหัวข้อย่อย อยู่ภายในหัวข้อใหญ่อีกที

ไดเรกทอรี่ที่เป็น root คือไดเรกทอรี่ อันที่อยู่ต้นสุด Parent root

การเข้าใช้งาน SOBI2 สามารถเข้าได้ที่ components >> SOBI2

การตั้งค่าเอาไว้ที่หลังก่อน มาสร้าง category ก่อนเลยดีกว่า

เข้าที่ All Entries จากนั้นคลิ๊กที่ add category

ใส่ชื่อ Category Name, Introtext, Category Description ตามต้องการ (ส่วนนี้จะสร้างเป็น Parent root )

Select Parent Category ให้คลิ๊กเลือกที่ categories จะปรากฎไอดี 1 ขึ้นมา

เลือกรูปสำหรับแสดงเป็นไอคอนของหัวข้อ

เมื่อกำหนดค่าเสร็จแล้วจากนั้นก็ทำการ save

ก็จะได้ category ใหม่ขึ้นมา

จากนั้นจะทำการสร้างหัวข้อย่อย ๆ ภายใน Parent root ที่ชื่อ joomla 1.5 โดยคลิ๊กเลือก Select Parent Category ที่ joomla 1.5 (ดังรูปด้านบน)

ก็จะได้หัวข้อย่อย ๆ ขึ้นมา

จากนั้นมาดูรูปแบบการแสดงผลด้านหน้าเว็บ (front end) ว่าหน้าเป็นอย่างไร ก่อนอื่นก็สร้างลิ้งก์เชื่อมโดยงไปหาตัวคอมโพเน้นท์เสียก่อน โดยไปที่ menus >> main menu

คลิ๊กเลือกที่ new

จากนั้นเลือกที่ SOBI2 มีเมนูให้เลือกมากมาย
มาดูการแสดงผลของเมนูแต่ละอันกัน

อันแรก Frontpage or Selected Category เป็นการเลือกแสดงผลที่ Category อันใดอันหนึ่งหรือทั้งหมด สามารถเลือกให้แสดงตรงส่วนไหนก็ได้ โดยคลิ๊กเลือกที่ parameter

การแสดงผลก็จะเป็นแบบนี้

รูปแบบเมนู Search Function คือใช้สำหรับค้นหา

รูปแบบ Add entry form คือ ที่สำหรับ ส่งเนื้อหา/บทความต่าง ๆ

จากนั้นจะลองส่งข้อมูลเข้าไปดู โดยคลิ๊กที่ Add entry กรอกข้อมูลที่จะเป็น* ลงไป

ใส่ข้อความลงในช่องพิมพ์ข้อความ

แนบรูป Logo, icon และใส่รายละเอียดอื่น ๆ ลงไป เช่น Meta Keywords, Meta Description

เลือก Category สามารถเลือกได้มากกว่า 1 Category

จากนั้นคลิ๊กที่ I accept เสร็จก็กด Send

กรณีคั้งให้เก็บเงินด้วย ก็จะมีรายละเอียดเกี่ยวกับการต่ายเงิน แสดงให้ดู

ลองเข้ามาดูที่หน้า back end ในส่วนของ entry manager จะเห็นข้อมูลที่ได้ส่งเข้ามา รอการอนุมัติ

สามารถใช้เมนูด้านบนจัดการกับเนื้อหาที่ส่งเข้ามาได้เลย

หรือเข้าไปจัดการเปลี่ยนข้อมูลของ ข้อความที่ส่งเข้ามาได้ทั้งหมด

เมื่อเนื้อหาที่ถูกส่งได้ทำการอนุมัติหรือทำการเผยแพร่แล้วก็จะแสดงหัวข้อข้างหน้าเว็บเป็นแบบนี้

เมื่อคลิ๊กที่หัวข้อ จะมาที่ส่วนของรายละเอียด

มาถึงการตั้งค่า

เข้าที่ general configuration

แท็บเมนู general ปรับแต่ง/ตั้งค่า ทั่ว ๆ ไป

main page หน้าหลัก

ส่วนของหน้าหลักจะมาแสดงผลในตรงนี้ของหน้าเว็บ

Search Options ตั้งค่าฟังก์ชั่นสำหรับการค้นหา

system emails ตั้งค่าการส่งอีเมล์เตือน

cache การตั้งค่าแคช (ไฟล์ข้อมูลชั่วคราว)

debug แจ้งเตือนข้อผิดพลาดของโปรแกรม

ตั้งค่าสีพื้นหลัง

ส่วนนี้สำหรับกำหนดรูปต่าง ๆ

Custom Fields Manager

ส่วนกำหนดตารางสำหรับใส่ข้อมูลต่าง ๆ ส่วนนี้สามารถกำหนดได้ว่ายูสที่ ลงทะเบียนต้องกรอกอะไรบ้าง ยูสที่ม่ได้ลงทะเบียนต้องกรอกอะไรบ้าง สามารถตั้งค่าได้จากตรงนี้

Entry Configuration ตั้งค่าวันหมดอายุของประกาศข้อความที่ผู้ใช้ส่งเข้ามา

View Configuration ตั้งค่าการแสดงข้อมูล

รายละเอียดการชำระเงิน ถ้าไม่ต้องการใช้ให้เลือกที่ no

จัดการติดตั้งและใช้งานเกี่ยวกับภาษา

ส่วนจัดการฟินด์ หรือตารางการลงทะเบียน

จัดการ template สามารถปรับแต่งโค๊ดของ template ได้

ส่วนจัดการปลั๊กอิน
เอาล่ะ การใช้งานคราว ๆ ก็มีเท่านี้ครับ แล้วจะเอาไปประยุกต์ใช้กับอะไรได้บ้าง ก็อาจจะนำไปทำเป็นเว็บไดเรกทอรี่ หรือนำไปใช้เป็นที่ให้สมาชิกส่งบทความ/เนื้อหาเข้าเว็บไซต์ ทำเป็นเว็บประกาศขายของแบบ AdsManager ก็ยังไหว
ปลั๊กอิน เสริมของ SOBI2 ก็มีเยอะเหมือนกัน
ลองเข้าไปดูปลั๊กอินเสริมได้ที่นี่ครับ

http://extensions.joomla.org/extensions/extension-specific/sobi2-extensions

ดาวน์โหลด SOBI2

ODude Profile

2010-11-06T11:07:00.000+07:00

ODude Profile communities ระบบโปรไฟล์หรือข้อมูลส่วนตัว ของ joomla มีระบบอะไรบ้าง มีการจัดการรูป avatar ได้ ใส่ข้อมูลส่วนตัวอื่น ๆ ได้ มีระบบส่งข้อความหาผู้ใช้คนอื่น ๆ สามารถค้นหาผู้ใช้งานได้ และปลั๊กอินเสริมอื่น ๆ อีก

การติดตั้งเริ่มจากตัว component ก่อน จากนั้นก็ติดตั้ง ปลั๊กอิน ODude Profile Picture และ ODude Profile User ตามลำดับ
เมื่อติดตั้งเสร็จยังไม่ต้องทำการกำหนดค่าใด ๆ ให้ทำลิ้งก์เมนูเพื่อลิ้งก์ไปยังคอมโพเน้นท์ก่อน โดยมาที่ menus >> main menu หรือเมนูอื่นตามต้องการ

คลิ๊กที่ New เพื่อสร้างเมนูใหม่

คลิ๊กที่ Odude profile FREE (รุ่นที่เอามาทดสอบเป็นรุ่นให้ใช้ฟรี)

เลือกที่ ODude Profile EDIT

ทำการตั้งชื่อ จากนั้นทำการ save

จากนั้นเข้าไปที่ plugin manager ทำการ enable ปลํีกอินทั้ง 2 ตัวนี้

หากต้องการให้ ODude Profile ไปแทนที่เมนูโปรไฟล์เดิมให้เข้าไปที่ components >> ODude Profile FREE คลิ๊กที่ parameters

ในช่อง Select a menu item เลือกเมนูที่ต้องการไปแทนที่ จากนั้นกด save

รูปแบบของโปรไฟล์ของแต่ละบุคคล (ส่วนแก้ไขรายละเอียดส่วนตัว)

รูปแบบของโปรไฟล์ของแต่ละบุคคล (ส่วนแสดงรายละเอียด)

แล้วเมนู 2 อันนี้เอาไว้ทำอะไร

อันแรก

ใช้สำหรับค้นหาผู้ใช้งาน

อันที่ 2

ดูยูสที่ใช้งานทั้งหมด

ส่งข้อความหาผู้ใช้งานคนอื่น

ดาวน์โหลด ODude Profile

ดาวน์โหลด ODude Profile

ลิ้งก์ดาวน์โหลดสำรอง (ไฟล์รวม component, plugin 2 ตัว แตกไฟล์ก่อนติดตั้ง)

ในการดูส่วนที่เหลือกรุณาเข้าสู่ระบบหรือลงทะเบียน..

การจัดรูปแบบ menu

2010-11-04T21:23:00.002+07:00

บทความที่เกี่ยวข้อง การออกแบบ joomla template 1.5
คราวที่แล้วได้เสนอการออกแบบ template ไป ซึ่งเป็นรายละเอียดโดยรวมใหญ่ ซึ่งไม่ได้ลงรายละเอียดการออกแบบ เล็ก ๆ ที่มีรายละเอียดปลีกย่อยเกี่ยวกับ css มากนักคราวนี้มาดูกันว่า จะกำหนด css อย่างไรให้กับ main menu ที่เป็นเมนูธรรมดา ๆ ของเดิม ๆ ของ joomla แสดงเป็นแบบ list หรือเป็นแบบเรียงแถวลงมา โมดูลที่ใช้คือ mod_mainmenu กำหนด Menu Style เป็นแบบ list

ที่ template กำหนด position ให้เป็น user1

<?php if($this->countModules('user1')) { ?>
 <div id="user1">
 <jdoc:include type="modules" name="user1" style="xhtml" />
 </div>
<?php } ?>

โดยในไฟล์ index.php ของ template จะกำหนดไว้แค่นี้ ต่อจากนี้ไปก็เป็นส่วน ของการออกแบบ css เท่านั้น
ตอนนี้ใน template.css ยังไม่ได้กำหนดอะไรสักอย่าง
ก็ได้เมนูที่เป็นรูปแบบเดิม ๆ แบบนี้

เมื่อดูด้วย firebug จะเห็นว่าเมนูนั้นประกอบด้วย

<div class="moduletable_menu">
<h3> </h3> title ของเมนู
ul และ li

จากนั้นจะทำการกำหนด css โดยเปิด /css/template.css ขึ้นมา
โดยจะนำรูปนี้มาเป็นพื้นหลังของ title menu

โดยการกำหนดพื้นหลังให้ div class moduletable_menu h3 (ดูใน fire bug จะเห็นแท็ก h3 ครอบอยู่ตรง title)

#user1 div.moduletable_menu h3 {
 background: url(../images/menu_t.jpg) top left repeat-x;
}

รูปแบบก็จะออกมาเป็นแบบนี้

สีตัวอักษร ของ title ไม่ค่อยเข้ากับพื้นหลังเท่าไหร่ แถมยังติดด้านซ้ายมากไปดูไม่สวย ก็กำหนด
color: #fff; สีตัวอักษร และ padding-left: 10px; ให้ box model เลื่อนมาทางซ้ายอีก 10 พิกเซล

#user1 div.moduletable_menu h3 {
 color: #fff;
 padding-left: 10px;
 background: url(../images/menu_t.jpg) top left repeat-x;
}

ก็จะได้แบบนี้
จากนั้นก็ทำการกำหนดความกว้างรวมของ module ไว้ที่ 200px เพื่อให้พื้นหลังเกิดความพอดีไม่ยาวเกินไปและจะได้ใส่ position อื่น ๆ อีกต่อไป ด้วยการกำหนด width: 200px; ให้กับ div id="user1"

#user1 div.moduletable_menu h3 {
 color: #fff;
 padding-left: 10px;
 background: url(../images/menu_t.jpg) top left repeat-x;
}
 
#user1 {
 width: 200px;
}

ดูจากรูปด้านบนจะเห็นว่ามี list style (จุดดำใหญ่ ๆ ที่อยู่หน้าเมนูแต่ละอัน) จากนั้นจะเอา list style นี้ออก ด้วยการใช้ list-style-type:none;

#user1 ul {
list-style-position:outside;
list-style-type:none;
}

ผลที่ออกมา

จากนั้นจะใส่รูป ลงไปหน้าเมนูแต่ละอัน

#user1 div.moduletable_menu ul.menu li a {
 background:url(../images/news.png) no-repeat;
}

ก็จะได้แบบนี้

ตัวหนังสือจะซ้อนกับรูปอยู่ก็กำหนด padding-left: 20px; เข้าไป

#user1 div.moduletable_menu ul.menu li a {
 line-height:13px;
 text-decoration:none;
 padding-left: 20px;
 background:url(../images/news.png) no-repeat;
}

line-height:13px; คือความสูงของบรรทัดแต่ละอัน
text-decoration:none; คือ กำหนดให้ตัวอักษรไม่ต้องมีเส้นด้านล่าง
ก็จะออกมาเป็นแบบนี้

เท่านี้ก็เรียบร้อย ไม่ยากใช่ไหมครับ หรือใครมีการออกแบบที่แหวกแนวออกไปก็ใส่ใน css ได้เลยเต็มที่

การจัดรูปแบบ menu

2010-11-04T21:21:00.002+07:00

<?php if($this->countModules('user1')) { ?>
 <div id="user1">
 <jdoc:include type="modules" name="user1" style="xhtml" />
 </div>
<?php } ?>

โดยในไฟล์ index.php ของ template จะกำหนดไว้แค่นี้ ต่อจากนี้ไปก็เป็นส่วน ของการออกแบบ css เท่านั้น

ตอนนี้ใน template.css ยังไม่ได้กำหนดอะไรสักอย่าง
ก็ได้เมนูที่เป็นรูปแบบเดิม ๆ แบบนี้

เมื่อดูด้วย firebug จะเห็นว่าเมนูนั้นประกอบด้วย

<div class="moduletable_menu">
<h3> </h3> title ของเมนู
ul และ li

#user1 div.moduletable_menu h3 {
 background: url(../images/menu_t.jpg) top left repeat-x;
}

#user1 div.moduletable_menu h3 {
 color: #fff;
 padding-left: 10px;
 background: url(../images/menu_t.jpg) top left repeat-x;
}

#user1 div.moduletable_menu h3 {
 color: #fff;
 padding-left: 10px;
 background: url(../images/menu_t.jpg) top left repeat-x;
}
 
#user1 {
 width: 200px;
}

#user1 ul {
list-style-position:outside;
list-style-type:none;
}

ผลที่ออกมา

จากนั้นจะใส่รูป ลงไปหน้าเมนูแต่ละอัน

#user1 div.moduletable_menu ul.menu li a {
 background:url(../images/news.png) no-repeat;
}

ก็จะได้แบบนี้

ตัวหนังสือจะซ้อนกับรูปอยู่ก็กำหนด padding-left: 20px; เข้าไป

#user1 div.moduletable_menu ul.menu li a {
 line-height:13px;
 text-decoration:none;
 padding-left: 20px;
 background:url(../images/news.png) no-repeat;
}

line-height:13px; คือความสูงของบรรทัดแต่ละอัน text-decoration:none; คือ กำหนดให้ตัวอักษรไม่ต้องมีเส้นด้านล่าง
ก็จะออกมาเป็นแบบนี้

เท่านี้ก็เรียบร้อย ไม่ยากใช่ไหมครับ หรือใครมีการออกแบบที่แหวกแนวออกไปก็ใส่ใน css ได้เลยเต็มที่

รูปแบบโมดูลโครม Module chrome

2010-11-04T21:14:00.001+07:00

คราวที่แล้วกล่าวถึง การจัดรูปแบบ menu ซึ่งเป็นเมนูแบบ style XHTML จะประกอบไปด้วย ul li

 
 <div id="user1">
 <jdoc:include type="modules" name="user1" style="xhtml" />
 </div>

คราวนี้มาดูว่าตรง style="....." แต่ละอันมีรูปแบบการแสดงผล (output) ออกมาเป็น html อย่างไร มีกี่ style เพื่อเป็นแนวทางในการออกแบบ joomla template 1.5
Module chrome โมดูลโครมคืออะไร (เกิดมาพึ่งเคยได้ยิน) พออ่านดูคราว ๆ เขาบอกว่าเป็นรูปแบบที่ใช้ควบคุม output ที่แสดงออกทาง html เพื่อให้ง่ายต่อการกำหนดรูปแบบและออกแบบ

<jdoc:include type="modules" name="user1" style="custom" />

ใช้กำหนดใน 'style' attribute ตรง custom คือ Module chrome
name="user1" คือชื่อของตำแหน่ง (position)

มาดูรูปแบบของแต่ละอันกันครับ
rounded (default for menus on milkyway)

<jdoc:include type="modules" name="user1" style="rounded"  />

output

<div class="module_menu">
    <div>
        <div>
            <div>
                <h3>Main Menu</h3>
                    <ul class="menu">
                         <li><!-- various menu items --></li>
                    </ul>
              </div>
          </div>
      </div>
  </div>

none

<jdoc:include type="modules" name="user1" style="none"   />

output

<ul class="menu">
     <li><!-- various menu items --></li>
</ul>

table

<jdoc:include type="modules" name="user1" style="table"    />

output

<table cellpadding="0" cellspacing="0" class="moduletable_menu">
 <tr>
 <th valign="top">Main Menu</th>
   </tr>
     <tr>
       <td>
         <ul class="menu">
           <li><!-- various menu items --></li>
         </ul>
       </td>
     </tr>
</table>

horz

<jdoc:include type="modules" name="user1" style="horz"     />

output

<table cellspacing="1" cellpadding="0" border="0" width="100%">
 <tr>
 <td valign="top">
 <table cellpadding="0" cellspacing="0" class="moduletable_menu">
 <tr>
   <th valign="top">Main Menu</th>
 </tr>
 <tr>
   <td>
     <ul class="menu">
       <li><!-- various menu items --></li>
     </ul>
   </td>
 </tr>
 </table>
 </td>
 </tr>
</table>

XHTML

<jdoc:include type="modules" name="user1" style="xhtml"      />

output

<div class="moduletable_menu">
   <h3>Main Menu</h3>
     <ul class="menu">
       <li><!-- various menu items --></li>
     </ul>
</div>

outline ใช้กับ preview info ในการออกแบบคงไม่ได้ใช้
output

<div class="mod-preview">
   <div class="mod-preview-info">left[outline]</div>
     <div class="mod-preview-wrapper">
       <ul class="menu">
         <li><!-- various menu items --></li>
       </ul>
     </div>
</div>

จบเท่านี้ก่อนครับ แล้วพบกันคราวหน้า

คลิ๊กลิ้งก์ออกภายนอกเปิดหน้าต่างเบราเซอร์ใหม่ด้วย mfBlank

2010-11-04T21:11:00.000+07:00

ปลั๊กอินที่ตามหามานาน ลักษณะการทำงานคือ ปลั๊กอินจะสร้าง target="_blank" ให้กับลิ้งก์ที่เป็นลิ้งก์ออกไปภายนอกทำให้เวลาคลิ้กลิ้งก์ก็จะเปิดหน้าต่าง เบราเซอร์ขึ้นมาใหม่ ทำให้ผู้สร้างบทความใน joomla ไม่ต้องเสียเวลามานั่งใส่ target="_blank" ให้กับลิ้งก์เอง (แต่เฉพาะลิ้งก์ภายนอกเท่านั้น (ลิ้งก์ภายนอกคือการเชื่อมโยงไปสู่เว็บไซต์อื่น)) และก็มีลูกเล่นเล็ก ๆ คือมีไอคอนเล็ก ๆ ต่อท้ายลิ้งก์ ดังตัวอย่างนี้ http://www.google.co.th

การใช้งาน ก็เพียงติดตั้งปลั๊กอินตามปกติ (หากต้องการศึกษาเรื่องการิดตั้ง extension เพิ่มเติมที่นี่)
จากนั้นก็เข้ามาที่ plugin manager หาปลั๊กอิน system ที่ชื่อ mfblank

มาดูพารามิเตอร์กันเล็กน้อย

icon color สีของไอคอน มีสีดำกับ สีจาง ๆ
hover effect แอฟแฟค ของลิ้งก์
remove icon ไม่แสดงไอคอน
จากนั้นก็ทำการ enable ให้ปลั๊กอินทำงาน เท่านี้ก็เรียบร้อย
ดาวน์โหลด mfBlank

ดาวน์โหลด mfblank

ลิ้งก์ดาวน์โหลดสำรอง

ดาวน์โหลด mfBlank

ปลั๊กอินเล่นเพลง mp3 1 PixelOut Audio Player

2010-11-04T21:04:00.002+07:00

<<--ตัวอย่าง
ปลั๊กอิน content สำหรับเล่นไฟล์ mp3 ใช้งานง่าย ๆ ไม่ต้องปรับแต่งมากมาย สามารถเล่นเพลงได้ทีละไฟล์เท่านั้น 1 อันต่อ 1 ไฟล์ กำหนดเล่นวน (loop) ได้ ปรับแต่งสีของ skin ได้ สำหรับท่านที่ชอบอะไรง่าย ๆ ไม่ยุ่งยาก

การใช้งานก็เพียงดาวน์โหลดและติดตั้งแบบธรรมดา (หากต้องการศึกษาเรื่องการติดตั้ง extension เพิ่มเติมที่นี่)
จากนั้นก็มาที่ plugin manager หาปลั๊กอินที่ชื่อ Content - 1pixeloutplayer
มาดูพารามิเตอร์กัน

ส่วนมากเป็นการปรับแต่งสีของ skin ดูเปรียบเทียบกับรูปด้านล่างว่าตรงไหนคือสีของตำแหน่งไหน

ส่วนตรง loop คือกำหนดให้เล่นซ้ำหรือไม่
default path กำหนดพาธที่เก็บไฟล์ mp3 ไว้
การใช้งาน เพียงวางโค๊ดเหล่านี้ไว้ในเนื้อหา/บทความ
เช่น ผมอัพโหลดไฟล์เพลงไว้ที่ /mp3/ ซึ่งอยู่ใน host การแทร็กโค๊ดก็กำหนดแบบนี้

{*audio}/mp3/your_file.mp3{*/audio}

ตัว * ไม่เกี่ยวนะครับ ใส่ไว้เพื่อไม่ให้โค๊ดทำงานเท่านั้น
ออปชั่น กรณีกำหนด default path ที่ปลั๊กอินไว้แล้ว เช่นกำหนดเป็น /mp3/

{*audio}your_file.mp3{*/audio}

ปลั๊กอินก็จะเล่นเพลงที่อยู่ใน /mp3/your_file.mp3

{*audio}/folder/your_file.mp3{*/audio}

ปลั๊กอินก็จะเล่นเพลงที่อยู่ใน /mp3/folder/your_file.mp3
หรือกำหนดเป็น URL ตรงไปหาไฟล์เลย

{*audio}http://www.myweb.com/folder/your_file.mp3{*/audio}

ดาวน์โหลด 1 PixelOut Audio Player

ลิ้งก์ดาวน์โหลดสำรอง

ดาวน์โหลด 1 PixelOut Audio Player

สร้างฟอร์มเก็บข้อมูลด้วย CK Forms

2010-11-04T21:01:00.000+07:00

จากที่เมื่อนานมาแล้วเคยเสนอ คอมโพเน้นท์ ที่ใช้สร้างแบบฟอร์มสำหรับเก็บข้อมูลสำหรับ joomla คอมโพเน้นท์ที่ชื่อ jforms ด้วยความง่ายของ jforms ที่อำนวยความสะดวกในการสร้างฟอร์ม โดยการแค่คลิ๊กลากฟอร์มมาวางเท่านั้นก็สามารถใช้งานได้แล้ว แต่ด้วยข้อจำกัดหลาย ๆ อย่างเช่น การแสดงข้อมูลไม่สามารถนำมาแสดงที่หน้าเว็บได้ เพียงแต่มีการ export ข้อมูลออกมาเท่านั้น และมีหลายคนก็อยากจะได้แบบกรอกข้อมูลแล้วข้อมูลที่กรอกลงไปนั้นสามารถนำมาแส ดงหน้าเว็บได้ด้วย วันนี้ก็มีโอกาสได้นำมาใช้งานอีกตัว คอมโพเน้นท์ตัวนี้มีชื่อว่า CK Forms ด้วยการออกแบบและใช้งานที่ค่อนข้างยืดหยุ่น สามารถสร้าง ฟิลด์เก็บข้อมูลต่าง ๆ ได้ มีฟิลด์สำหรับอัพโหลดข้อมูล มี Captcha และที่สำคัญสามารถนำข้อมูลที่ผู้ใช้งานกรอกแล้วส่งมานั้นนำมาแสดงยังหน้า เว็บไซต์ (fornt end) ได้ มีโมดูลสำหรับเชื่อมต่อฟอร์มจากคอมโพเน้นท์ มาแสดงในโมดูลได้ เพื่อสะดวกในการโยกย้าย ตำแหน่ง

การใช้งานดาวน์โหลดและทำการติดตั้งแบบปกติ (หากต้องการศึกษาเรื่องการติดตั้ง extension เพิ่มเติมที่นี่)
เมื่อติดตั้งเสร็จก็เข้ามาที่ components >> ck forms

ต่อไปนี้ก็เป็นการสร้างฟอร์มสำหรับเก็บข้อมูล
อย่างแรกก็สร้างฟอร์มก่อน โดยการคลิ๊กที่ new ซึ่งภายในฟอร์มข้างในจะประกอบด้วย ฟิลด์ (Field) หรือตารางสำหรับเก็บข้อมูล

แท็บเมนู general

name : ใส่ชื่อของ form ลงไปกำหนดเป็นภาษาอังกฤษและตัวเลขเท่านั้น ห้ามเว้นช่องวางหรือใส่อักขระพิเศษลงไป
title : กำหนดชื่อเป็นภาษาไทยได้
published : กำหนดเผยแพร่หรือไม่
description : รายละเอียด คำอธิบายเกี่ยวกับฟอร์ม

แท็บเมนู result

เป็นข้อมูลตอบรับหลังจากที่มีผู้ส่งข้อมูลจากฟอร์มที่เราสร้างขึ้น

แท็บเมนู e-mail

ส่วนนี้ใช้สำหรับส่งอีเมล์ หาผู้ดูแลระบบหรืออื่น ๆ เมื่อมีผู้ส่งข้อมูลเข้ามา

แท็บเมนู advanced

ส่วนกำหนดการใช้งาน Captcha (การใช้งาน Captcha นั้น host ที่ใช้ต้องเปิดการใช้งาน GD ด้วย)
Uploaded files path: กำหนดพาธที่เก็บไฟล์สำหรับอัพโหลด ใช้กรณีเปิดให้ผู้ใช้งานอัพโหลดไฟล์ได้
File uploaded maximum size: กำหนดขนาดไฟล์ที่สามารถอัพโหลดได้ ต่อไฟล์

แท็บเมนู fornt end display

ส่วนนี้จะแสดงใน forms data หรือฟอร์มที่แสดงข้อมูลผู้ที่กรอกข้อมูลเข้ามา ในหน้า fornt end

เมื่อกำหนดครบหมดจากนั้นก็ save จะขึ้นหน้าต่าง confim ขึ้นมาให้กด ok

จากนั้นฟอร์มจะถูกบันทึก จากนั้นก็ทำการสร้างฟิลด์เก็บข้อมูลโดยคลิ๊กตามวงกลมสีแดงดังรูปด้านบน

จากนั้นคลิ๊ก new
โดยผมจะลองสร้างฟอร์มเก็บรายชื่อ

เลือก type ที่ต้องการ อันแรกเป็นแบบ text หรือข้อมูลตัวอักษร

กำหนดข้อมูลต่าง ๆ ให้เรียบร้อย (ผมไม่ขออธิบายนะครับว่าช่องไหนเอาทำอะไรบ้างให้ดูตามรูปตัวอย่าง) เมื่อสร้างเสร็จก็กด save จากนั้นก็กด new เพื่อสร้างฟิลด์ต่อไป

ความสัมพันธ์ระหว่างฟิลด์ด้านหน้าเว็บ กับฟิลด์หลังเว็บ

แบบ check bok หรือคลิ๊กเลือก

อันนี้เป็นแบบ ดรอปดาวน์ลิสต์
Value: จำเป็นต้องใส่และใส่เป็นภาษาอังกฤษเท่านั้น
Label: ชื่อป้ายกำกับ
เมื่อใสเสร็จทั้ง 2 ช่องจากนั้นก็กด add

add ไปหลาย ๆ อันตามต้องการ

ดรอปดาวน์ลิสต์ เมื่อแสดงหน้าเว็บ
จากนั้นคุณก็สร้างฟอร์มต่าง ๆ นานา ของคุณไป มาถึงขั้นตอนการสร้างปุ่มส่งข้อมูล

เลือกที่ bottom

เลือก submit

ตั้งชื่อ name และ lable

สร้างปุ่ม reset เพื่อใช้รีเซ็ตฟอร์ม (เพื่ออำนวยความสะดวกแก่ผู้ใช้ไม่ต้องมานั่งลบฟอร์มเองกรณีกรอกข้อมูลผิด พลาดแล้วต้องการกรอกข้อมูลใหม่(ยังไม่ได้ส่งข้อมูลนะถ้ากดส่งแล้วแก้ไม่ ได้))

เอาล่ะได้ฟอร์มที่ต้องการแล้ว

จากนั้นก็ทำการสร้างเมนูเพื่อลิ้งก์ไปหาคอมโพเน้นท์ โดยเข้าที่ menus

คลิ๊กที่ new

คลิ๊ก ck forms >> standar CKForms CSS layout

เลือกฟอร์มที่ได้สร้างขึ้น ตั้งชื่อ จากนั้น save เมนู

มาดูฟอร์มหน้าเว็บที่สร้างขึ้น

ลองกรอกข้อมูลลงไป กด ส่งข้อมูล

เมื่อกดส่งแล้วก็จะปรากฎข้อความตอบรับ

การดูข้อมูลผู้ที่กรอกข้อมูลเข้ามา เข้ามาที่คอมโพเน้นท์ CK forms คลิ๊กที่ display data

จะปรากฎข้อมูลของผู้ที่กรอกเข้ามา

การนำข้อมูลของผู้ที่กรอกนำไปโชว์หน้าเว็บ เข้าที่ menus >> คลิ๊ก new >> เลือกที่ standard data CKForms CSS layout

เลือกฟอร์มที่ต้องการในพารามิเตอร์ของเมนู

ภาพบนเป็นภาพฟอร์มที่แสดงหน้าเว็บไซต์
ส่วนโมดูลคงไม่อธิบายวิธีใช้ครับ เพราะใช้ไม่ยากแค่ติดตั้งแล้วเลือกฟอร์มที่ได้สร้างขึ้นใน ck forms เลือก position จากนั้น save ก็ใช้งานได้ทันที
ไฟล์ภาษาไทย (เฉพาะด้านหน้าส่วนที่เตือนข้อผิดพลาด เช่น กรอกข้อมูลไม่ตรงกับฟิลด์ที่ตั้งไว้)

เปิดไฟล์ /components/com_ckforms/views/ckforms/tmpl/default.php ด้วยโปรแกรม text editor
หาบรรทัด ที่ 78 - 88

required:'<?php echo addslashes(JText::_( 'This field is required.' )); ?>',
            number:'<?php echo addslashes(JText::_( 'Please enter a valid number.' )); ?>',
            email:'<?php echo addslashes(JText::_( 'Please enter a valid email: <br /><span>E.g. yourname&#64;domain.com</span>' )); ?>',
            url:'<?php echo addslashes(JText::_( 'Please enter a valid url: <br /><span>E.g. http://www.domain.com</span>' )); ?>',
            confirm:'<?php echo addslashes(JText::_( 'This field is different from %0' )); ?>',
            length_str:'<?php echo addslashes(JText::_( 'The length is incorrect, it must be between %0 and %1' )); ?>',
            lengthmax:'<?php echo addslashes(JText::_( 'The length is incorrect, it must be at max %0' )); ?>',
            lengthmin:'<?php echo addslashes(JText::_( 'The length is incorrect, it must be at least %0' )); ?>',
            checkbox:'<?php echo addslashes(JText::_( 'Please check the box' )); ?>',
            radios:'<?php echo addslashes(JText::_( 'Please select a radio' )); ?>',
            select:'<?php echo addslashes(JText::_( 'Please choose a value' )); ?>'

แก้ไขเป็น

required:'<?php echo addslashes(JText::_( 'ต้องใส่ข้อมูลในฟิลด์นี้' )); ?>',
            number:'<?php echo addslashes(JText::_( 'กรุณากรอกหมายเลขที่ถูกต้อง' )); ?>',
            email:'<?php echo addslashes(JText::_( 'กรุณาใส่อีเมลที่ถูกต้อง: <br /><span>ตัวอย่าง : yourname&#64;domain.com</span>' )); ?>',
            url:'<?php echo addslashes(JText::_( 'กรุณากรอก URL ที่ถูกต้อง: <br /><span>ตัวอย่าง: http://www.domain.com</span>' )); ?>',
            confirm:'<?php echo addslashes(JText::_( 'ฟิลด์นี้จะแตกต่างจาก %0' )); ?>',
            length_str:'<?php echo addslashes(JText::_( 'ความยาวไม่ถูกต้องขนาดความยาวจะต้องอยู่ระหว่าง %0 ถึง %1 ตัว' )); ?>',
            lengthmax:'<?php echo addslashes(JText::_( 'ความยาวไม่ถูกต้องขนาดความยาวต้องไม่เกิน  %0' )); ?>',
            lengthmin:'<?php echo addslashes(JText::_( 'ความยาว ไม่ถูกต้องจะต้องมีอย่างน้อย  %0' )); ?>',
            checkbox:'<?php echo addslashes(JText::_( 'กรุณาตรวจสอบช่อง check box' )); ?>',
            radios:'<?php echo addslashes(JText::_( 'กรุณาเลือก' )); ?>',
            select:'<?php echo addslashes(JText::_( 'โปรดเลือกค่า' )); ?>'

หาบรรทัดที่ 148

<p class="ck_mandatory"><?php echo JText::_( 'Required' ); ?> *</p>

แก้ไขเป็น

<p class="ck_mandatory"><?php echo JText::_( 'ต้องใส่ข้อมูล' ); ?> *</p>

จากนั้น save as เป็น encoding UTF-8 (ภาพด้านล่างตัวอย่างใช้โปรแกรม edit plus แล้ว save as เป็น encoding UTF-8)

ดาวน์โหลด

ดาวน์โหลด CKForms

คู่มือการใช้งาน (ภาษาอังกฤษ) PDF ไฟล์

ลิ้งก์สำรอง CKForms 1.3.4 buile 2

ดาวน์โหลด CKForms component 1.3.4 (build 2)

ดาวน์โหลด CKForms plug-in 1.3.4 (build 1)

ดาวน์โหลด CKForms Data plug-in 1.3.4 (build 1)

ดาวน์โหลด CKForms module 1.3.4 (build 1)

simple mp3 player

2010-11-03T19:03:00.000+07:00

มาแนว mp3 อีกแล้วคราวนี้เป็นโมดูลครับเล่นเพลงได้หลายเพลง สร้าง play list ได้
เล่นแบบป๊อปอัพได้ เล่นวนได้ ปรับแต่งสีของสกินได้ตามใจชอบ เวอร์ชั่นที่นำมาทดสอบ
เป็นเวอร์ชั่น Simple MP3 Player 1.5.3 ตัวอย่างด้านบนเลยครับลองเล่นดู

การใช้งานดาวน์โหลดและติดตั้งโมดูลตามปกติ
(หากต้องการศึกษาเรื่องการติดตั้ง extension เพิ่มเติมที่นี่)
เมื่อติดตั้งเสร็จก็มาที่ module manager >> simple mp3 player

พารามิเตอร์

Use a Playlist : เล่นจาก play list
Playlist Path and File : ระบุ URL ที่เก็บ palylist ไว้ ส่วนวิธีการสร้าง
play list ดูได้ที่ลิ้งก์ Playlist Example ที่อยู่ข้างใต้การสร้าง play list
เปิดโปรแกรม notepad ขึ้นมา จากนั้นใส่ URL ของไฟล์ที่จะเล่นลงไป
1 เพลงต่อ 1 บรรทัด

จากนั้นเซฟเป็นชื่ออะไรก็ได้ที่มีนามสกุล *.txt

แล้วนำ URL ที่ลิ้งกไปถึงไฟล์นี้ไปใส่ในช่อง Playlist Path and File อย่างเช่น http://127.0.0.1/joomla/mp3/list.txt
ดูตามรูปข้างบนนู้นนะครับ Without Playlist เล่นโดยไม่มี play list
Relative Path MP3 Folder : ระบุพาธที่เก็บไฟล์ mp3 ไว้ mp3/ ห้ามลืม (/) สแลช ด้านหลังด้วยนะครับ
MP3 Files : ระบุชื่อไฟล์ mp3 ที่จะเล่น ขั้นแต่ละเพลงด้วย (|)
เช่น

The-Only-Exception.mp3|The-Only-Exception.mp3|The-Only-Exception.mp3|The-Only-Exception.mp3|The-Only-Exception.mp3

MP3 Titles : ชื่อเพลง ใช้วิธีเดียวกับ MP3 Files
ลงมาอีกหน่อย ดูคำอธิบายในรูปเลยนะครับ

ลงมาอีกปรับแต่งเกี่ยวกับโวลุ่ม (ที่เพิ่ม/ลดเสียง)

นอกนั้นก็ปรับสีต่าง ๆ ของสกิน (หน้ากาก)

ดาวน์โหลด simple mp3 player

ดาวน์โหลด simple mp3 player

ลิ้งก์ดาวน์โหลดสำรอง simple mp3 player เวอร์ชั่น 1.5.3

ดาวน์โหลด simple mp3 player

Front End Editor

2010-11-03T18:54:00.000+07:00

คอมโพเน้นท์และปลั๊กอิน ที่จะทำให้ชีวิตคุณสะดวกสบายมากขึ้น (หรือเปล่า) กล่าวคือ ด้านหน้าเว็บไซต์ (Front end) ของ joomla นั้นจะทำการแก้ไขส่วนประกอบของเว็บไซต์ได้ไม่มากนัก ส่วนมากก็จะแก้ไขได้เฉพาะเนื้อหาเท่านั้น และส่วนอื่น ๆ ต้องเข้าไปกำหนดหรือแก้ไขข้างหลังเว็บไซต์ (Back end) เท่านั้น วันนี้ไปเจอคอมโพเน้นท์ ตัวหนึ่งชื่อว่า Front End Editor ซึ่งจะสามารถทำการย้ายอะไรต่อมิ อะไร ข้างหน้าเว็บไซต์ได้เลย แม้แต่ตำแหน่งโมดูล ก็แดร็กเมาส์ (คลิ๊กแล้วลาก) เพื่อเปลี่ยนตำแหน่งได้ทันที ชื่อโมดูลและชื่อบทความก็สามารถคลิ๊กแล้วเปลี่ยนได้ทันที

การติดตั้งและใช้งาน ติดตั้งแบบปกติ (หากต้องการศึกษาเรื่องการติดตั้ง extension เพิ่มเติมที่นี่)
ดาวน์โหลดมา 3 ตัวคือ
plg_frontendeditor.zip
com_frontendeditor.zip
plg_articleeditor.zip
ติดตั้งให้หมดครับ
จากนั้นมาที่ components >> Enhanced Frontend Editing Manager
คลิ๊ก apply changes

คอมโพเน้นท์จะทำการสร้าง com_content ลงในโฟล์เดอร์ html ใน template ที่ใช้
จากนั้นคอมโพเน้นท์ก็จะทำการสร้างไฟล์ index.php ขึ้นมาใหม่ และทำการแบ็คอัพไฟล์เก่าไว้ในชื่อ index.php.backup
ตัวคอมโพเน้นท์เพิ่มอะไรเข้าไป สิ่งที่เพิ่มเข้าไปคือ

<div class="frpos.ชื่อตำแหน่งโมดูล">

แล้วเปลี่ยน module chrome ใน jdoc:include เป็น

style="freditor"

เมื่อคลิ๊ก apply changes จากนั้นก็ทำการ save
จากนั้นเข้ามาที่ plugin manager ทำการ enable ปลั๊กอิน 2 อันนี้

มาดูการใช้งานกันครับ เมื่อทำการล็อคอินด้านหน้าเว็บไซต์ด้วย Group administrator หรือ super administrator จะเห็นปุ่ม turn edit on/off ที่มุมบนขวา

กดให้เป็น on จะเห็นปุ่มสำหรับแก้ไขขึ้นมามากมาย

คลิ๊กลากเปลี่ยนตำแหน่งโมดูล

หรือแก้ไขรายละเอียดต่าง ๆ ของโมดูลเหมือนในหน้า back end

แก้ไขบทความ

แก้ไขหัวข้อบทความ

แก้ไขหัวข้อโมดูล

หรือแก้ไขเมนู

ดาวน์โหลด Front End Editor

ดาวน์โหลด Front End Editor

ลิ้งก์สำรอง เวอร์ชั่น 0.3.8

ดาวน์โหลด Front End Editor

เพิ่มประสิทธิภาพการค้นหาของ joomla

2010-11-03T18:38:00.000+07:00

search หรือเครื่องมือสำหรับค้นหาใน joomla นั้นส่วนมากจะไม่ค่อยได้ใช้กันเมื่อเว็บไซต์ยังมีขนาดเล็ก ๆ อยู่หาอะไรก็เจอหมด แต่เมื่อเว็บไซต์มีขนาดใหญ่ขึ้นมาการจะหาอะไรต่าง ๆ นั้นก็ดูเหมือนว่าจะเป็นเรื่องยากซะแล้วจึงต้องพึ่งเครื่องมือสำหรับค้นหา เพื่อให้ได้ข้อมูลในเว็บไซต์ที่เราต้องการ แต่ใน joomla นั้นการค้นหาเฉพาะเนื้อหาภายในเว็บไซต์ดูเหมือนว่าจะไม่ค่อยได้ผลลัพธ์ตาม ต้องการเท่าไหร่หรือหาไม่ค่อยเจอนั้นเอง วันนี้ก็มาดูปลั๊กอินที่ช่วยเพิ่มความสามารถการค้นหาข้อมูลภายในเว็บไซต์ให้ ได้มากขึ้นกว่าเดิม แต่ช้าก่อนไม่ได้มาเดี่ยว ๆ พ่วงมาด้วย 2 ปลั๊กอินภายในบทความเดียว ปลั๊กอินที่ 2 เพิ่ม SEO ให้กับการค้นหา อืม....อันนี้น่าสนใจดี มาดูกันดีกว่าว่าคืออะไร

ปลั๊กอินตัวแรก เป็นการเพิ่มประสิทธิภาพการค้นหาของ joomla ให้ได้มากขึ้นด้วยปลั๊กอินที่ชื่อว่า Content FullText
การใช้งาน เพี่ยงดาวน์โหลดและติดตั้งแบบปกติ (หากต้องการศึกษาเรื่องการติดตั้ง extension เพิ่มเติมที่นี่)
เมื่อติดตั้งเสร็จก็เข้ามาที่ plugin manager >> หาปลั๊กอินที่ชื่อ Search - Content FullText จากนั้นทำการ enable

พารามิเตอร์ไม่ต้องสนใจอะไรมากใช้ค่าเดิม ๆ นี่แหละ (พารามิเตอร์ก็เพียงกำหนดว่าต้องการให้หาที่ article อะไรบ้าง)

ก่อนการเปิดใช้งานปลั๊กอิน

หลังเปิดใช้งานปลั๊กอิน

ปลั๊กอินตัวที่ 1 ก็มีแค่นี้ครับ
หลาย ๆ คนอาจจะสงสัยว่า template ที่ใช้ทำไมไม่มี highlight (ตรงสีเหลือง ๆ ที่เน้นคำ) ตรงคำที่ค้นหา
วิธีการก็คือเปิดไฟล์ /css/template.css ของ template ที่ใช้จากนั้นเพิ่มบรรทัดนี้ลงไป

.highlight
{
    background-color: #fffebb;
}

ปลั๊กอินตัวที่ 2 Content Search SEO Plugin for Joomla
ปลั๊กอินที่เพิ่ม seo ให้กับผลการค้นหา คือจะเพิ่มหัวข้อที่ค้นหาเจอลงใน meta tag ของ keywords และ description
การใช้งาน เพี่ยงดาวน์โหลดและติดตั้งแบบปกติ (หากต้องการศึกษาเรื่องการติดตั้ง extension เพิ่มเติมที่นี่)
เมื่อ ติดตั้งเสร็จก็เข้ามาที่ plugin manager >> หาปลั๊กอินที่ชื่อ Search - contentseo จากนั้นทำการ enable

ก่อนการเปิดใช้งานปลั๊กอิน สังเกตุที่ keywords และ description

หลังเปิดใช้งานปลั๊กอิน สังเกตุที่ keywords และ description

แล้วถ้าบอท มาเจอผลการค้นหาบ้างล่ะ...............
ดาวน์โหลด

ดาวน์โหลด Content FullText

ดาวน์โหลด Content Search SEO Plugin for Joomla

ลิ้งก์ดาวน์โหลดสำรอง

ดาวน์โหลด Content FullText

ดาวน์ โหลด Content Search SEO Plugin for Joomla

CSS สำหรับรูปแบบ Category list layout

2010-11-03T18:35:00.000+07:00

ตัวอย่างดังรูปด้านบน CSS สำหรับผู้ที่ออกแบบ joomla template 1.5 สำหรับการแสดงผลในรูบแบบ Category list layout การใช้งานก็ทำการก็อปปี้โค๊ด css แล้วนำไปใส่ใน template.css ก็สามารถใช้งานได้ทันที โค๊ด css นี้เอามาจาก template ja_purity

Code...........

/* content tables */
td.sectiontableheader {
 padding: 4px;
 border-right: 1px solid #fff;
}
 
tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
 padding: 4px;
}
 
td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
 padding: 3px;
}
 
table.contentpane {
    border: none;
    width: 100%;
}
 
table.contentpaneopen {
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
}
 
table.contenttoc {
    margin: 0 0 10px 10px;
    padding: 0;
    width: 35%;
    float: right;
}
 
table.contenttoc a {
    text-decoration: none;
}
 
table.contenttoc td {
    padding: 1px 5px 1px 25px;
    background: url(../images/bullet-list.gif) no-repeat 5% 50%;
}
 
table.contenttoc th {
    padding: 0 0 3PX;
    border-bottom: 1px solid #CCCCCC;
    text-indent: 5px;
}
 
table.poll {
    padding: 0;
    width: 100%;
    border-collapse: collapse;
}
 
table.pollstableborder {
    padding: 0;
    width: 100%;
    border: none;
    text-align: left;
}
 
table.pollstableborder img {
    vertical-align: baseline;
}
 
table.pollstableborder td {
    padding: 4px!important;
    border-collapse: collapse;
    border-spacing: 0;
}
 
table.pollstableborder tr.sectiontableentry1 td {
    background: #ECECEC;
}
 
table.searchintro {
    padding: 10px 0;
    width: 100%;
}
 
table.searchintro td {
    padding: 5px!important;
}
 
table.adminform {
}
 
.adminform .inputbox {
}
 
.blog_more {
    padding: 10px 0;
    background: url(../images/hdot.gif) repeat-x top;
}
 
.blog_more strong {
    margin: 0 0 5px;
    display: block;
    font-size: 125%;
}
 
.blog_more ul {
    margin: 0;
    padding: 0;
}
 
.blog_more ul li {
    margin: 0;
    padding: 0 0 0 17px;
    background: url(../images/bullet.gif) no-repeat 6px 8px;
}
 
.category {
    font-weight: bold;
}
 
 
 
a.contentpagetitle,
a.contentpagetitle:hover,
a.contentpagetitle:active,
a.contentpagetitle:focus {
    text-decoration: none !important;
}
 
a.readon {
    float: left;
    margin-top: 10px;
    padding: 1px 5px 1px 14px;
    border: 1px solid #F6F6F6;
    display: block;
    background: url(../images/arrow.png) no-repeat 5px 48%;
    color: #006699;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
}
 
a.readon:hover, a.readon:active, a.readon:focus {
    border: 1px solid #ECECEC;
    background: url(../images/arrow.png) no-repeat 5px 48% #FFFFFF;
}
 
table.contentpaneopen td, table.contentpane td {
}
 
table.contentpaneopen, table.contentpane, table.blog {
    width: 100%;
}
 
.moduletable {
    padding: 0;
}
 
ul.pagination {
    margin: 15px auto;
    padding: 10px 0;
    background: url(../images/hdot.gif) repeat-x top;
}
 
ul.pagination li {
    margin: 0;
    padding: 0;
    display: inline;
    background: none;
}
 
ul.pagination li span{
    padding: 2px 5px;
}
 
ul.pagination a {
    padding: 2px 5px;
    border: 1px solid #F6F6F6;
}
 
ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus {
    border: 1px solid #ECECEC;
    background: #FFFFFF;
}
 
.pagenavbar {
    padding-left: 14px;
}
 
.pagenavcounter {
    padding: 8px 14px 0 14px;
}
 
.sectiontableheader {
    padding: 8px 5px;
    background: #444444;
    color: #FFFFFF;
}
 
.sectiontableheader a {
    color: #FFFFFF;
}
 
tr.sectiontableentry1 td {
    padding: 8px 5px;
    background: url(../images/hdot2.gif) repeat-x bottom;
}
 
tr.sectiontableentry2 td {
    padding: 8px 5px;
    background: url(../images/hdot2.gif) repeat-x bottom #ECECEC;
}
 
tr.sectiontableentry1:hover td,
tr.sectiontableentry2:hover td {
    background: url(../images/hdot2.gif) repeat-x bottom #FFFFCC;
}
 
.smalldark {
    text-align: left;
}
 
div.syndicate div {
    text-align: center;
}
 
.pollstableborder tr.sectiontableentry1 td,
.pollstableborder tr.sectiontableentry2 td {
    background: none;
}

ทันกระแสบอลโลกด้วย FIFA 2010 โมดูล

2010-11-03T18:32:00.000+07:00

กระแสบอลโลกกำลังมาแรงครับช่วงนี้ ใครจะแทงได้ แทงเสีย ไม่เกี่ยวกับเรา แต่มีโมดูลที่จะทำให้เว็บคุณแสดงผลการแข่งขันได้ สวย ๆ โดยโมดูลนี้ทำงานง่าย ๆ คือดึงเอาข้อมูลจากเว็บ FIFA.com มาแสดงก็เท่านั้นเองครับ

การใช้งานก็ติดตั้งแบบปกติ (หากต้องการศึกษาเรื่องการติดตั้ง extension เพิ่มเติมที่นี่)
จากนั้นก็เข้ามาที่ module manager >> หาโมดูลที่ชื่อ FIFA 2010
ทำการเลือก team ที่ต้องการหรือเลือกแบบสุ่มก็ได้

เลือก position ที่วางให้เหมาะสม จากนั้น enable ก็เป็นอันเสร็จพิธี ง่ายมาก ๆ
ก็จะได้โมดูลแบบในรูป

ดาวน์โหลด

Download fifa 2010 modules

ลิ้งก์ดาวน์โหลดสำรอง

Download fifa 2010 modules

S5 News Ticker

2010-11-03T15:29:00.000+07:00

ห่างหายไปนานครับช่วงนี้ หลาย ๆ คนถามถึง คิดว่าไม่สบายเป็นอะไรไปแล้วหรือเปล่า เปล่าเลยครับ ช่วงนี้งานเยอะเลยไม่ค่อยได้เข้ามาตอบปัญหาการใช้งาน joomla เท่าไหร่ ผ่านไปไม่นานเท่าไหร่ joomlathaiclub.com ก็จะย่างเข้าปีที่ 3 แล้ว (พึ่งต่ออายุโดเมนไปเองไวจริง ๆ เวลา) วันนี้ว่าง ๆ ก็เลยนำโมดูลใหม่ ๆ มาให้ลองเล่นกัน เป็นของค่าย shape5 ครับโหลดใช้กันฟรี ๆ เพราะตัวนี้เขาแจกฟรีอยู่แล้ว (เข้าระบบก่อนจึงจะดาวน์โหลดได้)
โมดูลตัวนี้เอาไว้แสดงข้อความแบบ fade หรือข้อความแบบเลือนหาย เพื่อใช้แสดงประกาศต่าง ๆ แล้วแต่ท่านจะนำไปประยุกต์ใช้กันครับ ตัวอย่างดังด้านล่างนี้

วันนี้เป็นโมดุลแบบง่าย ๆ ใช้สำหรับแสดงตัวหนังสือแบบนี้

การใข้งานเพียงดาวน์ดหลดและติดตั้งแบบปกติ (หากต้องการศึกษาเรื่องการติดตั้ง Extension เพิ่มเติมที่นี่)
จากนั้นก็เข้ามมาที่ module manager หาโมดูลที่ชื่อ S5 News Ticker
จะเห็นพารามิเตอร์ดังรูป

การใช้งานก็เพียงแต่ ใส่ข้อความในกล่อง Text Line เท่านั้นก็จบครับ ใช้งานได้ สั่งโมดูล enable วางโมดูลลงบน position ที่ต้องการเป็นอันใช้งานได้ครับ ง่ายดีไม่ต้องปรับแต่งมาก เท่าไหร่
ดาวน์โหลด S5 News Ticker

ดาวน์โหลด S5 News Ticker

ลิ้งก์ดาวน์โหลดสำรอง (ต้องเข้าระบบก่อน)

ดาวน์โหลด S5 News Ticker

Joomla! 1.5.21 Released

2010-11-03T15:23:00.001+07:00

joomla 1.5.21 ออกแล้วครับ เป็นการอัพเดทด้านความปลอดภัยระดับกลาง การเข้ารหัส xss

Download

Click here to download Joomla 1.5.21 (Full package) »

Click here to download Joomla 1.5.21 (Upgrade packages) »

template ตามภารกิจ

2010-11-02T19:43:00.000+07:00

ไม่รู้ว่าจะตั้งชื่ออย่างไรดี แบบว่าการใช้งาน menu assignment ให้ template นี้แสดงเฉพาะที่เมนูนี้เท่านั้น เอาเป็นว่าดูตัวอย่างเว็บผมก็แล้วกัน ทีแรกจะใช้เป็น template เดียวกันหมดทั้งเว็บ แต่ก็ทำไม่ได้ เมื่อไปถึงเมนูของ forum ซึ่งใช้ phpBB3 การแสดงผล ไม่เป็นไปตามที่ตั้งใจไว้ เกิดอาการบูด ๆ ชอบกล ดูไม่ดี ไม่ปลื้ม ก็เลย เปลี่ยนไปใช้คนละ template ไปเลย ตัดปัญหา แน่นอนล่ะ ต้องติดตั้ง template มากกว่า 1 ลองมาดูวิธีการกัน ไม่ต้องติดตั้งอะไรเพิ่มทั้งนั้น เพราะตัว joomla ทำได้อยู่แล้ว

เข้ามาที่ template manager เลือก edit template

ด้านซ้ายมือจะมี ช่องเมนู menu assignment คลิ๊กที่ ปุม เรดิโอ (กลม ๆ) ช่อง select from list
คลิ๊กเลือกเมนูที่ต้องการ หากต้องการเลือกมากกว่า 1 เมนูก็กด Ctrl บนแป้นคีย์บอร์ดค้างไว้ แล้วคลิ๊กเลือก
เสร็จเรียบร้อยก็ทำการ

ในช่อง Assigned จะมีลูกศรขึ้น
เท่านี้ก็เรียบร้อย เมื่อเราคลิ๊กเข้าไปเมนู ที่เลือกไว้ ก็จะแสดง template ที่เราเลือกไว้ เมื่อออกไปเมนูอื่น ก็จะกลับมาเป็น Default template ที่ตั้งไว้เหมือนเดิม
ในทำนองเดียวกัน กับการใช้งาน menu assignment ในส่วนของโมดูล การใช้งานเหมือนกัน

วิธีใส่โค้ด Iframe ในเนื้อหาหรือบทความ

2010-11-02T19:41:00.000+07:00

ในบางที บางครั้งหากเราต้องการจะใส่โค้ด HTML ที่เป็น Iframe ลงบนเนื้อหาเพื่อให้เนื้อหานั้นแสดงข้อมูลอื่น ๆ ที่อยู่นอกเว็บไซต์เรา ก็อปปี้มาอย่างดี วางแสดงเรียบร้อย พออัพเดท อ้าวดันลบโค้ด Iframe ออกหมดซะงั้นเซ็งเลย ทำไงดี ในวันนี้เรามีวิธีที่ไม่ให้ตัว Editor นั้นทำการ clean code ออก (เฉพาะ Editor - TinyMCE ตัวอื่น ๆ ต้องลองดูกันเองนะครับ)

ก่อนอื่นก็มาที่ admin menu >> extensions >> plugin manager หาปลั๊กอินที่ชื่อ Editor - TinyMCE

ในช่อง Code cleanup on save เลือกเป็น never
จากนั้นทำการ save

ลองใส่โค๊ด Iframe

แสดงผลออกมา จะเห็นว่าสามารถแทรกโค๊ด Iframe ได้

การติดตั้ง kunena template

2010-11-02T19:36:00.001+07:00

หลาย ๆ ท่านอาจจะใช้ kunena forum ทำเป็นเว็บบอร์ดของเว็บไซต์ตนเอง แต่ปรับแต่งดูก็เข้าท่าดีใช้งานได้ราบรื่น แต่ หน้าตาของ kunena อยากจะเปลี่ยนใหม่ จะทำอย่างไรดี
template สามารปรับเปลี่ยนได้ครับ คล้าย ๆ กับ template ของ joomla แต่การติดตั้งต้องทำด้วยตนเองไม่มีฟังชั่นให้ติดตั้งแบบอัตโนมัติ เหมือน joomla template site

บทความอื่น ๆ ที่เกี่ยวข้อง
หากต้องการศึกษาเรื่องการติดตั้งและใช้งาน kunena forum
หากต้องการศึกษาเรื่องการใช้งาน โปรแกรม fileZilla FTP

ก่อนอื่นก็หาดาวน์โหลด kunena template ก่อนครับ หาง่าย ๆ ใน google ค้นหาคำว่า kunena template
เมื่อได้ kunena template มาแล้วส่วมากจะมาแบบไฟล์บีบอัด เช่น *.zip ก็ให้ทำการแตกไฟล์บีบอัดนั้นออกก่อนครับ
จากนั้นก็เปิดโปรแกรม FTP เพื่อเชื่อมต่อไปยัง web server ไปที่พาธ /components/com_kunena/template

อัพโหลด kunena template ที่แตกไฟล์ไว้ ไปไว้ที่ /components/com_kunena/template ระวังเรื่องซับโฟล์เดอร์ด้วยนะครับที่อาจจะซ้อนกันข้างในหลายชั้น

จากนั้นก็มาที่ kunena cpanel คลิ๊กเข้าที่ kunena configuration

ลงมาในส่วนเมนู front end >> template เลือกที่ชื่อ kunena template ที่อัพโหลดไป เลือกเสร็จเรียบร้อยกด save เพื่อบันทึกการตั้งค่า ลอง preview ดูครับ

เว็บไซต์แนะนำให้ดาวน์โหลด kunena template (ต้องเป็นสมาชิกก่อนถึงจะดาวน์โหลดได้)

การปิด feed icon ใน joomla

2010-11-02T19:34:00.002+07:00

รูปไอคอน feed ใน address bar ที่เห็นเป็นเครื่องมือให้บริการ feed แบบ rss และ atom บางท่านอาจจะไม่ต้องการให้บรนิการทางด้าน feed ในเว็บของตนเองและอยากจะให้ไอคอนนี้หายไป

วิธีการคือ ล็อกอินเข้าหน้า back end ของ joomla จากนั้นเข้าที่ admin menu >> menus >> เมนูของคุณ (เมนูที่คุณสร้างไว้)

เช่นเมนู home

เมนู parameter (advanced)

show a feed link เลือกเป็น no จากนั้นทำการ save เท่านี้ก็เรียบร้อย

เมนูที่จะแสดง feed link ได้ต้องเป็นเมนูแบบ blog layout