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

1. tt_news HTML Template ที่มีการ Customize ใส่ Class และตำแหน่งที่ต้องการเช่น

<div class="news-list-container">
	<!-- ###CONTENT### begin -->
		<!-- ###NEWS### begin -->
			<div class="news-list-item-accordion">
				<h2 class="acc_trigger">###NEWS_TITLE###</h2>
				<div class="acc_container">
					<div class="block">
						###NEWS_CONTENT###
					</div>
				</div>
			</div>
		<!-- ###NEWS### end-->
	<!-- ###CONTENT###  end -->
</div>

2. CSS สำหรับช่วยในการแสดงผล ดังนี้

  .news-list-container .news-list-item-job h2.acc_trigger p {
    padding:0;
	margin: 0 0 5px 0;
    font-size: 70%;
    font-weight: normal;
	background:none;
	color:#000;
  }
  .news-list-container .news-list-item-accordion h2.acc_trigger{
    text-decoration: none;
	color:#C30020;
    display: block;
	font-weight: bold;
	font-size: 1.4em;
	padding:0 0 0 15px;
	background:url("../../images/non-active.png") no-repeat left 5px transparent;
  }
  .news-list-container .news-list-item-accordion h2.acc_trigger:hover {
	padding:0 0 0 15px;
	background:url("../../images/active.png") no-repeat left 5px transparent;
  }
  .news-list-container .news-list-item-accordion h2.active{
	padding:0 0 0 15px;
	background:url("../../images/active.png") no-repeat left 5px transparent;
  }
  .news-list-container .news-list-item-accordion .acc_container {
    margin: 0 0 5px; padding: 0;
    overflow: hidden;
    clear: both;
  }
  .news-list-container .news-list-item-accordion .acc_container .block { padding: 20px; }
  .news-list-container .news-list-item-accordion  span.news-list-morelink {display:none;}
  .news-list-container .news-list-item-accordion {
	border-bottom: 1px black dotted;
	background: url("../../images/linksbg.gif") repeat-x left bottom white;
	margin:0 0 10px 0;
  }

3. JQuery ที่มีฟังก์ชั่นการทำงานของ Accordion ถ้าหากใช้ ibstv package
เราจะเตรียม t3jquery สำหรับ migrate ฟังก์ชั่นที่ต้องการใช้แล้วทำการ generate แบบไม่ต้องไปหา jquery ที่ไหนให้ยุ่งยาก
เวลาที่ merge การใช้งาน ตรง jQuery UI Widgets ก็ให้เลือก Accordion เข้าไปด้วย จากนั้นก็ทำการ create ไฟล์สำหรับใช้งาน

4. เรียกใช้งาน JQuery ผ่านทาง TYPO Script Setup ดังนี้

includeLibs.t3jquery = EXT:t3jquery/class.tx_t3jquery.php
page.1490 = COA
page.1490 {
  10 = USER
  10.userfunc = tx_t3jquery->addJS
  20 = USER
  20.userFunc = tx_t3jquery->addJS
  20.jsdata.cObject = COA
  20.jsdata.cObject {
    1 = TEXT
    1.value (
		jQuery('div.news-list-item-job> div.acc_container').hide();
		jQuery('div.news-list-item-job> h2').click(function() {
			jQuery(this).next('div').slideToggle('fast').siblings('div:visible').slideUp('fast');
		});
	)
  }
}

เห็นหรือเปล่าว่าไม่ยากเลย ถ้าเรารู้จักนำสิ่งที่มีอยู่มาใช้ให้เป็นประโยชน์
สามารถลดเวลาในการทำ ยังถูกอกถูกใจผู้ใช้งานอีกด้วย

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

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

แนวทางที่หลาย ๆ ธุรกิจเลือกคือการใช้ PHP Framework ต่าง ๆ หรือบางธุรกิจก็จะใช้การสร้างขึ้นเอง เพื่อให้ใช้งานได้ง่าย แต่จะไม่ง่ายเมื่อต้องการต่อเติมส่วนขยายต่าง ๆ หรือการสร้าง Web Service เพื่อแลกเปลี่ยนข้อมูลกับธุรกิจอื่น ๆ ได้ ซึ่ง Web Service นี้เป็นหัวใจการทำงานแบบบูรณาการ เพราะบางครั้งเราไม่รู้ว่าผลลัพธ์ที่เราต้องการ จะต้องมีวิธีการสร้างแบบไหน แค่รู้ว่าเราต้องการข้อมูลแบบไหนเพื่อใช้สำหรับธุรกิจเรา ก็ทำให้เดินหน้าธุรกิจได้ อาทิ อัตราแลกเปลี่ยนเงินตรา ราคาทองคำ เป็นต้น

FLOW3 เป็นเว็บแอพพลิเคชั่นแพลทฟอร์ม คล้าย ๆ กับ spring ใน JAVA  รวมฟังก์ชั่นการทำงานต่าง ๆ เกี่ยวกับการบูรณาการได้ดีเยี่ยม รวมถึงการรวม web service ช่วยอำนวยความสะดวกให้นักพัฒนาเว็บไซต์สามารถมองหา solution ที่จะใช้กับธุรกิจต่าง ๆ ได้หลากหลาย และรวดเร็ว ถูกพัฒนาโดย ชุมชนนักพัฒนา TYPO3 ที่แข็งแกร่ง

FLOW3 Local Running First Installation

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

1. เรากำลังติดตั้ง TYPO3 4.6 อยู่บน PHP เวอร์ชั่น 5.3 อยู่หรือเปล่า ถ้าไม่ใช่ ก็ควร Update นะค่ะ
2. ตรวจสอบที่ PHP.INI นะค่ะ ว่าเปิดการทำงานของ extension=php_openssl.dll หรือยัง ถ้ายังก็ไปเปิดการทำงานให้เรียบร้อย แล้ว restart apache อีกทีนึงค่ะ

เท่านี้ก็สามารถติดตั้งและทดสอบ TYPO3 4.6 ได้แล้วค่ะ

มีความสุขในการเรียนรู้ค่ะ

ส่วนการจัดการของผู้ดูแลระบบ

• ให้เข้าไปที่ Edit Page Properties ค่ะ
• เลือกแถบการแสดงผลชื่อ Behaviour ค่ะ
• คุณจะเห็นโหมด Language Localization อยู่ ให้ทำเครื่องหมายที่หน้า Hide page if no translation for current language exists
• อย่าลืมบันทึกนะค่ะ จากนั้นเคลียร์แคช แล้วทำการ Refresh ที่หน้าเว็บเพื่อดูความแตกต่างค่ะ

ตัวอย่าง Interface

การสร้างเนื้อหาประเภทนี้ก็ทำได้ไม่อยากค่ะ สามารถ upload ไฟล์ กำหนดขนาดของภาพ และการจัดตำแหน่งได้จาก interface ด้านหลังได้ที่กำหนดมาให้เสร็จเรียบร้อยแล้ว แต่กระนั้น การทำงานก็ยังไม่สามารถรองรับกับความต้องการร้อยแปดพันเก้าของผู้ใช้งานได้ครบถ้วนซะทีเดียว การจัดการภาพด้วยตัดและกำหนดขนาดเพื่อทำภาพอ้างอิงสำหรับการแสดงผล ก็เป็นอีกฟังก์ชั่นการทำงานที่ TYPO3 Core ยังไม่สามารถรองรับได้ในส่วนนี้

หากคุณกำลังมองหาฟังก์ชั่นสำหรับการจัดการในลักษณะนี้อยู่ ให้เปิดเข้าไปที่ http://typo3.org/extensions/repository/ แล้วใช้คำว่า “crop” เพื่อค้นหา extension ที่มีชื่อว่า “Crop and Square Thumbnails” ดาวน์โหลดแล้วลองติดตั้งในเว็บไซต์ เพื่อทดสอบการทำงาน หากคุณต้องการข้อมูลเพิ่มเติมเกี่ยวกับการใช้งาน ก็สามารถอ่านได้ที่ http://typo3.org/documentation/document-library/extension-manuals/tkcropthumbs/1.2.4/view/1/1/

สนุกกับการเรียนรู้แบบไม่มีขีดจำกัดกับไอบีเอสกรุงเทพนะค่ะ

วิธีแก้ปัญหาคือให้คุณเปิดการใช้งาน Compression ที่ .htaccess บรรทัดบนสุดของไฟล์ ดังนี้ค่ะ

<FilesMatch “\.js\.gzip$”> AddType “text/javascript” .gzip
</FilesMatch>
<FilesMatch “\.css\.gzip$”> AddType “text/css” .gzip</FilesMatch>
AddEncoding gzip .gzip

ทำการบันทึกไฟล์และลองรีเฟรช (Ctrl+F5) อีกครั้งค่ะ ^^
ทีนี้ก็สามารถทำงานกันได้แล้วค่ะ

มีความสุขในการเรียนรู้ TYPO3 กับ ไอบีเอสกรุงเทพนะค่ะ

page.headerData.20110825 = TEXT
page.headerData.20110825.value (
<script language=JavaScript> var message=”Function Disabled!”; function clickIE4(){ if (event.button==2){ return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function(“return false”) </script>
)

ลองไปใช้กันดูค่ะ

ไอบีเอสกรุงเทพ

config.doctype = html5
config.xhtmlDoctype = html5
config.xmlprologue = none
config.xhtml_cleaning = all

เมื่อคุณดูโค้ดที่หน้าเว็บไซต์ จะเห็นการแสดงผลดังนี้

<!DOCTYPE html>

ชนิดของ HTML ที่สามารถกำหนดได้มีดังนี้

html5 (HTML5 doctype)
xhtml_trans (XHTML 1.0 Transitional doctype)
xhtml_frames(XHTML 1.0 Frameset doctype)
xhtml_strict (XHTML 1.0 Strict doctype)
xhtml_basic (XHTML basic doctype)
xhtml_11 (XHTML 1.1 doctype)
xhtml_2 (XHTML 2 doctype)
none (NO doctype at all)

การเลือกใช้งานขึ้นอยู่กับความต้องการค่ะ

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

Compression Level ใน TYPO3 คือ API สำหรับการบีบอัดข้อมูลทั้งส่วนที่เป็นด้านหน้าการแสดงผล และส่วนของผู้จัดการระบบ เพื่อช่วยให้ TYPO3 โหลดข้อมูลได้เร็วขึ้น

การกำหนดค่าของ Compression มีดังนี้
ขั้นแรกให้ไปเพิ่มการกำหนดค่าการทำงานใน localconf.php ที่อยู่ภายใต้โฟลเดอร์ typo3conf ด้วยสองบรรทัดข้างล่างนี้

$TYPO3_CONF_VARS['BE']['compressionLevel'] = ’9′;
$TYPO3_CONF_VARS['FE']['compressionLevel'] = ’7′;

จากนั้นให้ไปเพิ่มค่าใน .htaccess ไฟล์เพื่อระบุให้กับ apache เข้าใจของค่าที่เรากำหนดนี้
<FilesMatch “\.js\.gzip$”>
AddType “text/javascript” .gzip
</FilesMatch>
<FilesMatch “\.css\.gzip$”>  AddType “text/css” .gzip
</FilesMatch>
AddEncoding gzip .gzip

การที่คุณจะใช้งานระบบนี้ได้ ก็ต้องแน่ใจว่าเซิร์ฟเวอร์เปิดการใช้งาน gzip เรียบร้อยแล้วค่ะ