Joomla! User Group Thailand

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

เริ่มต้นให้ดาวน์โหลด jSeblod มาและทำการติดตั้งใน Joomla เมื่อติดตั้งเสร็จแล้วให้ไปที่ Component >> jSeblod CCK

เมื่อเข้ามาแล้วจะพบเมนูต่างๆเรามาทำความรู้จักเมนูต่างๆก่อน

• Templates - เมนูในส่วนนี้คือเมนูสำหรับเพิ่มหรือแก้ไขเทมเพลทของ Content ที่เราสร้างขึ้น
• Content Types - เมนูนี้คือเมนูสำหรับ สร้าง Content type ของเราขึ้นมา
• Search Types - เมนูนี้คือ เมนูสำหรับ การสร้างรูปแบบการค้นหาของ Content ที่เราสร้่างขึ้นมาครับ
• Fields - เมนูนี้คือเมนูสำหรับ การเพิ่มฟิลด์ต่างๆสำหรับ Content ที่เราสร้างขึ้น
• Pack - เมนูคือเมนูสำหรับการนำเข้า Content หรือ รวม Content และนำออกไปใช้งานหรือแจกจ่ายให้แก่คนอื่นครับ
• Configuration - เมนูนี้คือเมนูการตั้งค่าต่างๆในการใช้ Component

เอาหละครับเมื่อเราทำความรู้จักเมนูต่างๆพอสมควรเราจะมาลองสร้าง Content ในตามแบบฉบับของเรากันนะครับ

วิธีคิดในการสร้าง Content

ในส่วนนี้ผมจะสอนการคิดก่อนนะครับเพราะเราจะทำอะไรต้องมีแผนครับ ในการใช้ jSeblod ส่วนมากหลายๆคนงงครับคือไม่รู้จะเริ่มทำตรงไหนก่อน วันนี้ผมจะทำให้ทุกๆหายงงครับโดยใช้วิธีคิดและปฎิบัติดังนี้

• คิดรูปแบบ Content
• คิดฟิลด์สำหรับ Content และสร้างฟิลด์นั้นๆในเมนู Field
• สร้าง Content Type ในเมนู Content Type และดึงฟิลด์ต่างๆที่เราสร้างมาไว้ใน Content Type ของเรา
• สร้าง Template หรือรูปแบบการแสดงผลของ Content ของเรา
• สร้างรูปแบบการค้นหา Content ใน เมนู Search Type
• เชื่อมเมนู Component ทางด้านหน้าเว็บไซต์เพื่อให้เราจัดการพบความได้ทางด้านหน้าเว็บไซต์

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

สร้าง Field สำหรับ Content

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

• ฟิลด์รูปภาพ - สำหรับให้อัพโหลดรูปภาพปกของเพลง
• ฟิลด์คำบรรยายส่วนต้น(intro text) - สำหรับบรรยายเกี่ยวกับเพลงนี้
• ฟืลด์ศิลปิน - สำหรับใส่ชื่อศิลปิน
• ฟิลด์อัลบั้ม - สำหรับใส่ชื่ออัลบั้มเพลง
• ฟิลด์เนื้อร้อง - สำหรับใส่รายละเอียดเนื้อร้อง
• ฟิลด์อัพโหลดเพลง - สำหรับให้อัพโหลดเพลงนั้นๆเพื่อที่จะได้ฟังได้เลยบนเว็บไซต์
• ฟิลด์แอคชั่น - ฟิลด์สำหรับกำหนดว่าเวลาเราคลิกปุ่มบันทึกบทความนั้นจะให้เด้งไปหน้าไหนและหมวดหมู่ไหน
• ฟิลด์ปุ่มบันทึก - ปุ่มสำหรับให้บันทึกบทความ

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

เมื่อเข้ามาแล้วจะพบหน้าต่างรายละเอียดการสร้างฟิลด์โดยจะแยกเป็นสองส่วนคือด้านซ้ายคือรูปแบบฟิลด์ต่างๆด้านขวาคือรายละเอียดฟิลด์ โดยพื้นฐานหลักๆแล้วที่ทุกฟิลด์จะต้องใส่รายละเอียดมีดังนี้

• Title - ชื่อฟิลด์
• Name - ชื่อสำหรับฐานข้อมูล แนะนำให้ตั้งง่ายๆตัวเล็กหมดเช่น info_1, info_2, info_3
• Category - เลือกหมวดหมู่สำหรับฟิลด์
• Description - บรรยายรายละเอียดเกี่ยวกับฟิลด์นั้น

ฟิลด์แรกที่ผมจะสร้างจำเป็นมากๆเลยคือฟิลด์ Title ครับถ้าไม่สร้างมันก็จะมีมาให้อยู่แล้ว ให้มองไปที่ด้านซ้ายมือและหาชื่อ Text (Title) ในหมวดของ Input และคลิกครับเมื่อคลิกแล้วจะมีรายละเอียดต่างๆแสดงขึ้นทางด้านขวามือ ให้เราใส่รายละเอียด และเลือกตรง Title Mode ปรับเป็น As Title Only เมื่อใส่รายละเอียดเสร็จแล้วให้กด Save

**สามารถเลือกตรง Required ได้ว่าฟิลด์นั้นจำเป็นต้องกรอกรายละเอียดหรือสามารถเว้นว่างได้**

ต่อไปมาสร้างฟิลด์ต่างๆที่เราคิดไว้เลยนะครับเริ่มต้นที่ฟิลด์รูปภาพให้กดสร้างฟิลด์ใหม่ ใส่รายละเอียดพื้นฐานและมองทางด้านซ้ายมือหา Images ในหมวด Upload และคลิก เมื่อคลิกแล้วจะแสดงรายละเอียดต่างๆมากมายให้เรากำหนดผมจะอธิบายรายละเอียดสำคัญๆสำหรัลฟิลด์รูปภาพนะครับมีดังนี้

• Folder - โฟลเดอร์สำหรับจัดเก็บรูปภาพ
• 1 Folder / User - หากปรับตรงนี้เป็น Yes จะสร้างโฟลเดอร์ใหม่สำหรับ User นั้นๆ
• 1 Folder / Content - หากปรับตรงนี้เป็น Yes จะสร้างโฟลเดอร์ใหม่สำหรับ Content นั้นๆ

ในส่วน CONTENT :: Display ด้านล่างจะเป็นพื้นที่สำหรับกำหนดขนาดของรูปภาพหรือสร้างภาพย่อของรูปภาพนั้นๆสามารถสร้างภาพย่อได้ทั้งหมด 3 ภาพ เมื่อใส่รายละเอียดเสร็จแล้วให้บันทึกและสร้างฟิลด์ต่อไป

ฟิลด์อคำบรรยายส่วนต้น ให้มองหาทางด้านซ้ายมือคำว่า Textarea แล้วคลิก สามารถใช้ Wysiwyg Editor ก็ได้แต่ในที่นี้ผมใช้ Textarea จำกัดจำนวนข้อความไว้แค่ 150 ตัวอักษร เมื่อในรายละเอียดครบแล้วให้บันทึก

ฟิลด์ศิลปิน ให้กดสร้างฟิลด์ใหม่และมองหา Text (Title) ในหมวดของ Input คลิกและใส่รายละเอียด ปรับตรง Title Mode เป็น none และบันทึก

ฟิลด์อัลบั้ม ในส่วนนี้ให้ทำเหมือนฟิลด์ศิลปิน

ฟิลด์เนื้อร้อง ในส่วนนี้สามารถใช้ Textarea หรือ Wysiwyg Editor ได้เหมือนในส่วนคำบรรยายส่วนต้น ในที่นี้ผมจะใช้ Wysiwyg Editor เพื่อที่เพื่อนๆจะได้ดูเป็นตัวอย่างว่าเวลาใช้แล้วเป็นยังไง

ฟิลด์อัพโหลดเพลง สำหรับฟิลด์นี้จะทำคล้ายๆฟิลด์อัพโหลดรูปภาพโดยการคลิกที่ Simple ในหมวด Upload ครับให้ใส่รายละเอียดต่างๆและระบุสกุลของไฟล์ในช่อง Legal Extensions ด้วยนะครับว่าให้โหลดไฟล์ประเภทไหนได้บ้างในที่นี้ผมกำหนดให้อัพโหลดไฟล์ประเภท mp3 นะครับ

ฟิลด์แอคชั่น ฟิลด์แอคชั่นนั้นสำคัญมากครับฟิลด์ตัวนี้จะเป็นตัวกำหนดระดับสิทธิในการเพิ่มบทความและระดับการเข้าชมครับในการสร้างฟิลด์แอคชั่นนั้นให้คลิกที่ Action ในหมวดของ Form นะครับผมจะอธิบายรายละเอียดสำคัญๆแล้วกันนะครับ

• Access Level - เลือกระดับของผู้ชม
• Category / Parent - เลือกหมวดหมู่ หลายคนอาจจะคิดว่าได้แค่หมวดหมู่เดียวเหรอจริงๆแล้วเราสามารถสร้างหมวดหมู่ไว้ให้เลือกได้เลยครับแต่ผมจะมาอธิบายในอีกบทความครับ ในที่นี้ผมสร้างหมวดหมู่ไว้คือ Music
• Creation Access - เลือกระดัีบของผู้ที่สามารถเพิ่มบทความผมเลือกให้สมาชิกสามารถเพิ่มบทความได้
• Message - ข้อความขอบคุณอันนี้เพื่อนๆสามารถพิมพ์ได้ตามใจชอบเลยครับ

ฟิลด์ปุ่มบันทึก สำหรับฟิลด์นี้ให้คลิกที่ Submit ในหมวดของ Botton และใส่รายละเอียด

เมื่อสร้างฟิลด์ครบแล้วให้เช็ครายละเอียดอีกทีว่าครบตามที่เราต้องการหรือยัง

สร้าง Content Type

เมื่อเราสร้างฟิลด์ที่ต้องการเสร็จแล้วขั้นตอนต่อไปเราจะมาเริ่มสร้าง Content Type กัน Content Type คือประเภทของ Content ต่างๆ ในที่นี้ผมจะสร้าง Content Type Music และดึงฟิลด์ต่างๆที่เราสร้างมาใช้

เริ่มต้นให้ไปที่เมนู Content type และคลิก New

เมื่อเข้ามาแล้วให้ใส่รายละเอียดในส่วนของ Details ก่อน

• Title - ชื่อของ content type
• Published - ตั้งค่าให้เผยแพร่หรือไม่ให้เผยแพร่
• Category - เลือกหมวดหมู่สำหรับ content type
• Description - รายละเอียดคำบรรยาย content type

เมื่อเสร็จแล้วมาต่อกันในส่วนของ Fields กันในส่วนนี้จะแบ่งเป็น 4 ส่วนคือฟอร์มทางด้าน Admin, Site และ เนื้อหาทางด้าน Content, E-mail ทางช่องด้านขวาคือฟิลด์ต่างๆที่สร้างไว้ให้ดับเบิ้ลคลิกฟิลด์ที่เราสร้างไว้ให้มาอยู่ทางซ้ายมือ สามารถปรับให้ฟิลด์ไหนอยู่ก่อนหลังได้โดยการคลิกที่ Up Down

ในส่วนนี้ให้ปรับตรง Default Action เป็น Action ที่เราสร้างไว้ก่อนแล้วนำฟิลด์ต่างๆที่เราสร้างไว้มาไว้ทางด้านซ้ายมือ

เมื่อเสร็จในส่วนของ Admin แล้วเราต้องการให้ในส่วนของ Site มีฟิลด์เหมือน Admin ก็สามารถทำได้ง่ายๆโดยไม่ต้องมานั่้งจัดฟิลด์อีกรอบโดยการคลิกที่ชื่อฟิลด์ทางด้านซ้ายมือและคลุมดำให้หมดและคลิกปุ่ม ->Site ด้านล่างฟิลด์ทั้งหมดก็จะไปอยู่ในแทบของ Site ทีนี้ก็แค่ปรับตรงแอคชั่นของ Site เป็นแอคชั่นที่เราสร้างไว้

มาต่อกันในส่วนของ Content ในส่วนนี้คือข้อมูลที่จะแสดงใน Content เพราะฉะนั้นพวกฟิลด์ ปุ่ม ไม่จำเป็นต้องเอามา

ต่อมาในส่วนของ E-mail นั้นก็เหมือนในส่วนของ Content ครับ ในส่วนของอีเมล์นี้จะไม่ส่งเมล์ไปยังเราถ้าเราไม่ได้สร้างฟิลด์ Email ไว้จะมาอธิบายแยกเป็นอีกบทความ

เมื่อเสร็จทุกอย่างให้กด Save และให้เราหาชื่อ Content Type เราในหน้า Conten Type และคลิกที่ไอคอน เพื่อดูฟอร์มเราหรือจะไปที่หน้า Control Panel และคลิกที่ Add new content เลือกชื่อ Content type ของเรา

เมื่อเข้ามาจะเจอหน้าฟอร์มที่เราสร้างไว้ครับมาลองใส่ข้อมูลกันเลย

เมื่อเสร็จแล้วเราจะมาหน้า Article Manager หาชื่อบทความที่เราเพิ่งใส่ข้อมูลไปและคลิกไอคอนแว่นขยายจะเห็นว่าหน้าตาบทความเราไม่สวยเอาเสียเลยและไม่เรียบร้อย เพลงก็ไม่สามารถฟังได้ทางด้านหน้าเว็บ ต่อไปเราจะมาเริ่มสร้างเทมเพลทสำหรับ Content เรากันครับ

สร้าง Template สำหรับ Content

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

เริ่มต้นเราจะเริ่ม Generate ฟิลด์ต่างๆมาไว้ในเทมเพลทก่อน jSeblod จะทำการ Generate ให้เองอัตโนมัติเพียงแค่ติ๊กเลือก Content Type ของเราและคลิก Generate ทางด้านล่าง

เมื่อคลิกแล้วจะได้ไฟล์ zip มาให้กดบันทึกไว้ในเครื่องครับ และแตกไฟล์คลิกเข้าไปในโฟลเดอร์เราจะได้ไฟล์ต่างๆมากมายครับ คล้ายๆกันการเขียนเทมเพลท Joomla

เรามาเริ่มสร้างไฟล์จำเป็นกันก่อนนะครับในที่นี้ผมจะสอนการเขียนเทมเพลทของ intro text และ full text เลยนะครับ ให้ copy ไฟล์ index.php และวางไว้ในโฟลเดอร์เปลี่ยนชื่อเป็น index2.php สร้างไฟล์ style.css ไว้ในโฟลเดอร์ css

เมื่อเพิ่มไฟล์เสร็จแล้วเปิดไฟล์ชื่อ templateDetails.xml ไฟล์นี้เป็นไฟล์ในการเช็คไฟล์ในการติดตั้งว่ามีไฟล์อะไรบ้างในเมื่อเราสร้างไฟล์ขึ้นมาใหม่ 2 ไฟล์เราก็ต้องเขียนโค๊ดเพิ่มขึ้นไปว่ามีไฟล์ใหม่เพิ่มขึ้นมาให้ใส่โค๊ดด้านล่างลงไป ก่อนบรรทัด </files>

<filename>index2.php</filename>
<filename>css/style.css</filename>

รูปแบบโค๊ดเต็มๆจะได้ประมาณนี้

<files>
 <filename>index.html</filename>
 <filename>index.php</filename>
 <filename>params.ini</filename>
 <filename>params.php</filename>
 <filename>templateDetails.xml</filename>
 <filename>template_thumbnail.png</filename>
 <filename>css/index.html</filename>
 <filename>images/index.html</filename>
 <filename>index2.php</filename>
 <filename>css/style.css</filename>
</files>

เขียน FullText ใน index.php

เมื่อเสร็จแล้วให้ save ครับ และเปิดไฟล์ index.php ไฟล์ตัวนี้จะแสดงในรูปแบบ Full Text นะครับ layout ที่ผมคิดไว้ก็ง่ายๆครับแค่รูปไปอยู่ชิดด้านซ้าย แล้วก็ ข้อความเรียงลงมาด้านล่างเป็นเครื่องเล่นเพลง `

เมื่อเปิดไฟล์มาจะเจอข้อความมากมายก่อนอื่นเรามาเรียก css ที่เราสร้างขึ้นมาในโฟลเดอร์ css ให้ใช้งานในเทมเพลทกันก่อนครับโดยใช้โค๊ดด้านล่าง

<?php 
// Add CSS 
$document =& JFactory::getDocument();
$document->addStyleSheet( $this->baseurl.'/templates/'.$this->template.'/css/style.css' );
?>

โดยให้ใส่ต่อจากบรรทัด

<?php
/**
 * Init jSeblod Process Object { !Important; !Required; }
 **/
$jSeblod	=	clone $this;
?>

เมื่อเรียก css เสร็จแส้วเราจะมาเริ่มวางโครง content กันครับและเรียกข้อมูลจะฟิลด์ต่างๆกันโดยรูปแบบการเรียกฟิลด์ที่ใช้ทั่วไปจะมี 2 แบบ คือ

1. โค๊ดด้านล่างนี้จะเป็นรูปแบบการเรียกข้อมูลจากฟิลด์ต่างๆที่เราสร้างไว้โดยใช้ตัวแปร value

<?php echo $jSeblod->ชื่อฟิลด์->ตัวแปร; ?>

ตัวอย่างที่ผมใช้เรียกข้อมูลชื่อ ศิลปินนะครับ

<?php echo $jSeblod->m_info1->value; ?>

2. โค๊ดด้านล่างจะเป็นโค๊ดตัวอย่างการเรียกข้อมูล label ของฟิลด์ต่างๆนะครับโดยใช้ตัวแปร label

<?php echo $jSeblod->m_info1->label; ?>

สามารถศึกษาเพิ่มเติมเกี่ยวกับรายละเอียดการเรียกข้อมูลต่างๆได้ที่ List of field attributes

มาต่อกันเลยครับในที่นี้ผมใช้ title เดิมๆของเทมเพลทนะครับเพราะฉะนั้นผมจะลบฟิลด์ title ในเทมเพลทออกไป ผมจะเริ่มเรียกฟิลด์รูปภาพก่อนนะครับโดยเขียนโค๊ดประมาณด้านล่าง

<img src="http://www.noartclub.com/<?php echo $jSeblod->m_image->thumb1; ?>" alt="<?php echo $this->content->title?>" class="m_image" />

สังเกตุนะครับตรงตัวแปรผมเป็น thumb1 คือเรียกรูปย่อที่ผมตั้งค่าย่อไว้ ในกรณีฟิลด์รูปภาพสามารถใช้ตัวแปร ได้ 3 รูปแบบดังนี้

• value - เรียกรูปภาพเดิมๆที่ทำการอัพโหลด
• thumb1 - เรียกรูปภาพ ที่ตั้งค่าไว้ที่ thumb1
• thumb2 - เรียกรูปภาพ ที่ตั้งค่าไว้ที่ thumb2
• thumb3 - เรียกรูปภาพ ที่ตั้งค่าไว้ที่ thumb3

ต่อไปเป็น ฟิลด์คำบรรยาย ก็เขียนง่ายๆครับ ตัวอย่างโค๊ดด้านล่าง

<p><?php echo $jSeblod->m_info1->value; ?></p>

ฟิลด์ ศิลปิน และ อัลบั้ม ผมต้องการให้แสดง label ด้วนก็เขียนดังนี้

<p><?php echo $jSeblod->m_info2->label; ?> : <?php echo $jSeblod->m_info2->value; ?></p>
<p><?php echo $jSeblod->m_info3->label; ?> : <?php echo $jSeblod->m_info3->value; ?></p>

ต่อไปเป็นฟิลด์นักร้องผมก็เขียนดังตัวอย่างด้านล่าง

<div><?php echo $jSeblod->m_info4->value; ?></div>

และฟิลด์สุดท้ายนี้คือเครื่องเล่นเพลงผมจะติดตั้งปลั๊กอินเพิ่มขึ้นไปคือ plugin JosDewPlayer เพื่อช่วยในการเล่นเพลงบนเว็บไซต์ ก็เขียนโค๊ดประมาณนี้

<div class="m_play">{play}<?php echo $jSeblod->m_info5->value; ?>{/play}</div>

เขียนเสร็จแล้วครับโค๊ดรูปแบบเต็มๆก็ประมาณนี้

<img src="http://www.noartclub.com/<?php echo $jSeblod->m_image->thumb1; ?>" alt="<?php echo $this->content->title?>" class="m_image" />
<p><?php echo $jSeblod->m_info1->value; ?></p>
<p><?php echo $jSeblod->m_info2->label; ?> : <?php echo $jSeblod->m_info2->value; ?></p>
<p><?php echo $jSeblod->m_info3->label; ?> : <?php echo $jSeblod->m_info3->value; ?></p>
<div class="clr"></div>
<h3><?php echo $jSeblod->m_info4->label; ?> - <?php echo $this->content->title?></h3>
<div><?php echo $jSeblod->m_info4->value; ?></div>
<div class="m_play">{play}<?php echo $jSeblod->m_info5->value; ?>{/play}</div>

และเขียน css ในไฟล์ style.css ประมาณนี้เพื่อให้รูปชิดซ้ายไว้

.m_image{
	background-color: #FFFFFF;
	padding: 4px;
	border: solid 1px #CCCCCC;
	float: left;
	margin: 0 10px 10px 5px;
}
.clr{
	clear: both;
}
m_play{
        margin: 10px auto;
	width: 200px;	
}

เขียน Introtext ใน index2.php

ต่อไปเราจะมาทำการเขียนเทมเพลทสำหรับ intro text นะครับโดยใช้โค๊ดเหมือนในการเขียน fulltext ครับแต่เราจะตัดฟิลด์ที่เราไม่ต้องการให้แสดงใน intro ออกไป

ก่อนอื่นเปิดไฟล์ index2.php ที่เราได้สร้างขึ้นมาครับ และ copy โค๊ดทั้งหมดใน index.php มาวาง ในที่นี้ผมไม่ต้องการแสดง เนื้อร้อง และ เครื่องฟังเพลงใน introtext ตรงเทมเพลทผมก็จะเขียนโค๊ดประมาณนี้ครับ

<img src="http://www.noartclub.com/<?php echo $jSeblod->m_image->thumb1; ?>" alt="<?php echo $this->content->title?>" class="m_image" />
<p><?php echo $jSeblod->m_info1->value; ?></p>
<p><?php echo $jSeblod->m_info2->label; ?> : <?php echo $jSeblod->m_info2->value; ?></p>
<p><?php echo $jSeblod->m_info3->label; ?> : <?php echo $jSeblod->m_info3->value; ?></p>
<div class="clr"></div>

จะเห็นว่าเหมือนการเขียนใน index.php เพียงแค่ไม่มีบรรทัดฟิลด เนื้อร้อง และ เพลง

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

ติดตั้งและใช้งาน Template

เมื่อทำเทมเพลทเสร็จแล้วต่อไปเราจะมาเริ่มการติดตั้งเทมเพลทครับโดยให้ไปที่เมนู Template ใน Component >> Jseblod CCK >> Tempaltes เมื่อเข้ามาแล้วให้กด New เพื่อเพิ่มเทมเพลทใหม่ครับ

เมื่อเข้ามาแล้วให้ไปตรงช่อง Upload Package และเลือกไฟล์เทมเพลทที่เราสร้างขึ้นมาครับ และไปที่ช่อง Template Type เลือเป็น Content และกด Apply

เมื่อติดตั้งสมบูรณ์ตรงช่อง Code(php) จะแสดงชื่อไฟล์ php ในเทมเพลทเราซึ่งเราสามารถแก้ไขไฟล์ผ่านได้ทางด้านหลังเว็บไซต์เลย

ต่อไปเป็นการนำเทมเพลทมาใช้ใน Content Type ของเราให้ไปที่เมนู Content Type และเลือก Type ที่เราสร้างไว้ครับ ในช่อง Content Template ให้กด Assign และเลือกเทมเพลทของเราครับและกด Save

ต่อไปเรามาลองเพิ่มบทความกันอีกครั้งครับ

เมื่อเสร็จแล้วลองไปดูบทความของเราที่ทางด้านหน้าเว็บ ในหน้าเว็บผมเชื่อมเมนูกับหมวดหมู่ Music ที่ผมสร้างไว้และเลือกการแสดงรูปแบบ Blog layout ครับ

การเชื่อมเมนู jSeblod

ในการเชื่อมเมนูกับ jSeblod ผมจะเชื่อมเมนู 2 รูปแบบได้แก่

• เมนูสำหรับให้สมาชิกจัดการบทความของตัวเอง
• เมนูสำหรับเพิ่มบทความ

เริ่มต้นให้ไปที่ Menu >> เมนูที่เราต้องการ และกด New เมนูแรกที่ผมจะสร้างคือเมนูสำหรับ User จัดการบทความให้เลือกที่เมนู Jseblod CCK >> User's Articles List Layout (Author)

เมนูต่อไปคือเมนูสำหรับให้เพิ่มบทความให้เลือกเมนู jSeblod CCK -> Article Submission Layout เมื่อเข้ามาหน้าตั้งค่าเมนูตรง Content Type เลือก Type ที่เราสร้างขึ้นมา

เมื่อเสร็จแล้วเราไปดูเมนูที่เราเชื่อมไว้ทางด้านหน้าเว็บไซต์กันครับ ในรูปที่ 1 จะเป็นส่วนการจัดการบทความทางด้านหน้าเว็บไซต์ รูปที่ 2 จะเป็นส่วนในการเพิ่มบทความ

ยาวพอสมควรสำหรับบทความพื้นฐานการใช้ jSeblod คิดว่าคงพอเข้าใจกันนะครับ ในตอนต่อๆไปจะนำเสนอการสร้างรูปแบบการค้นหา กำหนดฟิลด์สมาชิก และการใช้ ฟิลด์ รูปแบบต่างๆ อีกมากมายรอติดตามกันต่อไป

ขอบคุณเพื่อนทุกคนที่คอยติดตามแม้จะไม่ค่อยได้อัพเดทอะไรซักเท่าไหร่เพราะไม่ว่างๆและขอขอบคุณผู้สนันสนุนดีๆอย่างโฮส http://www.asiagb.com/ ที่ช่วยติดแบนเนอร์กับทางเรา ใครที่ยังไม่มีโฮสก็ลองใช้ดูครับ

สำหรับใครที่ต้องการ Type Music ตัวอย่างสามารถดาวน์โหลดได้ที่ Type_Music.zip

Download

มีเพื่อนหลายคนถามเข้ามาเรื่องการเขียน Joomla Template นะครับ วันนี้ผมเลยขอแนะนำโค๊ดพื้นฐานที่จำเป็นสำหรับการเขียนมาฝากครับซึ่งจะสามารถช่วยได้มากเลยเวลาเขียน Template เราไปดูกันเลยครับว่าโค๊ดต่างๆนั้นมีอะไรกันมั่ง

Detecting Logged In State

	<?php $userattr = JFactory::getUser(); $thisuser = $userattr ->get('guest'); if($thisuser == 0) { ?> // is this a guest user? //yes. do guest user stuff <?php } else { ?> //no. do logged-in user stuff <?php } ?>

Load Component / Error

	<?php if ($this->getBuffer('message')) : ?>

	<div class="error">

	<h2> Message </h2>

	<jdoc:include type="message" />

	</div>

	<?php endif; ?>

	<jdoc:include type="component" />

Load One Module Position

	<?php if ($this->countModules('user1')) : ?>

	<div id="user1">

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

	</div>

	<?php endif; ?>

Load Four Module Positions

	<?php if ($this->countModules('user1 or user2 or user3 or user4')) : ?>

	<div id="userModules">

	

	<?php if ($this->countModules('user1')) : ?>

	<div id="user1">

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

	</div><!-- end user1 -->

	<?php endif; ?>

	

	<?php if ($this->countModules('user2')) : ?>

	<div id="user2">

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

	</div><!-- end user2 -->

	<?php endif; ?>

	

	<?php if ($this->countModules('user3')) : ?>

	<div id="user3">

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

	</div><!-- end user4 -->

	<?php endif; ?>

	

	<?php if ($this->countModules('user4')) : ?>

	<div id="user4">

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

	</div><!-- end user5 -->

	<?php endif; ?>

	

	</div>

	<?php endif; ?>

3-Column Class Conditionals

	//Put in Head section

	<?php 

	if($this->countModules('left and right') == 0) $contentwidth = "full";

	if($this->countModules('left or right') == 1) $contentwidth = "single";

	if($this->countModules('left and right') == 1) $contentwidth = "both";

	?>

	
	//Then put in Body

	<div id="middleCol" class="<?php echo $contentwidth ?>">

	

	//Then put in CSS

	#middleCol.full {width: 100%;}

	#middleCol.both {float: left; width: 50%;}

	#middleCol.single {float: left; width: 75%;}

Blank Index.html

	<html><body bgcolor="#FFFFFF"></body></html>

No Direct Access

	// no direct access

	defined('_JEXEC') or die('Restricted access');

Basic HEAD Tag

	<?php echo '<?xml version="1.0" encoding="utf-8"?' .'>'; ?>

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >

	
	<head>

	<jdoc:include type="head" />

	<?php JHTML::_('behavior.mootools'); ?>

	<link rel="shortcut icon" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/favicon.ico" type="image/x-icon" />

	<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" rel="stylesheet" type="text/css" media="screen" />

	<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js" type="text/javascript">

	

	<!--[if lte IE 6]>

	<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/ie6.css" media="screen, projection" />

	<![endif]--> 

	<!--[if IE 7]>

	<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/ie7.css" media="screen, projection" />

	<![endif]-->

	

	</head>

Breadcrumbs Module

	<div id="breadcrumbs">

	<jdoc:include type="modules" name="breadcrumb" style="raw" />

	</div>

สำหรับเพื่อนๆที่ยังไม่เข้าใจโค๊ดนั้นในตอนหน้าผมจะมาอธิบายอย่างละเอียดแล้วกันนะครับ