บทความนี้เขียนขึ้นมา วัตถุประสงค์หลักเพื่อเพื่อนพ้องน้องพี่ในเว็บ http://english-for-thais-2.blogspot.com ซึ่งเป็นเว็บแนะนำการศึกษาภาษาอังกฤษที่ดีที่สุดในประเทศไทย (อาจจะเป็นในโลกก็ได้มั้งครับ) ตัวเว็บนอกจากจะแนะนำแหล่งศึกษาหาความรู้ที่ทันสมัย ทันต่อเหตุการณ์แล้ว

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

ผมว่าเมื่อท่านอ่านบทความนี้แล้ว ท่านน่าจะเห็นคล้อยตามผม คือคุณพิพัฒ ลึกซึ้งถึงแก่นของการศึกษาเลยทีเดียว ผมว่าท่านไม่ควรพลาดเว็บนี้นะครับ

ที่กล่าวมาทั้งหมดนั้นก็เพื่อชักชวนน้องๆ พี่ๆ โปรแกรมเมอร์ ที่เป็นไม้เบื่อไม้เมากับภาษาอังกฤษ ให้ทำใจยอมรับว่า เราหนีมันไม่พ้น ก็ในเมื่อเวลาเขียนโค้ดผิด มันก็ฟ้องเป็นภาษาอังกฤษ คู่มือหลักก็เป็นภาษาอังกฤษ เทคนิคขั้นสุดยอดก็ถูกจารึกด้วยภาษาอังกฤษ ดีไม่ดีดันได้เจ้านายหรือลูกค้า เป็นคนใช้ภาษาอังกฤษอีก โอ้ยยยยยยยย…..

เอาละครับหลังจากผมกล่าวเลี้ยวซ้ายเลี้ยวขวาอยู่พักนึง ก็มาถึงเรื่องที่จะเขียนสักที คือเรื่องการติดตั้ง babylon dictionary  ดิกชันนารีที่ใช้ๆกันในเมืองไทยและเป็นที่นิยม เห็นจะมีอยู่ 3 ตัว

1. สอ ดิก (เสียเงิน)
2. ลอยดิก
3. บาบิโลนดิก

ความสามารถของบาบิโลนดิก ให้ท่านอ่านบทความนี้ครับ ดิกยอดนิยมระดับโลก – Babylon

วิธีการติดตั้งและใช้งานบาบิโลนดิก อย่างละเอียด (portable นะจ๊ะ)

ดาวน์โหลด

1. คลิกที่นี้ดาวน์โหลดตัวโปรแกรม ณ ราปิดแชร์ ดาวน์โหลด

2. คลิก Free User

3. รอหน่อย

4. คลิกที่ดาวน์โหลด

5. เก็บมันไว้ที่ desktop นั่นแหละ

ติดตั้ง

หลังจากที่ท่านได้ดาวน์โหลดดิกบาบิโลนจนเสร็จ ท่านก็จะเห็นกลมๆเขียวๆ บนหน้าเดสก์ทอปของท่าน

1. ดับเบิลคลิกไฟล์ที่ท่านดาวน์โหลดมา จับสิ่งที่อยู่ข้างในลากมาทิ้งไว้ที่เดสก์ทอป

2. จะได้ตัวเขียวๆมา 1 ตัว

3. ดับเบิลคลิกที่ตัวเขียวๆนี้ เพื่อเริ่มติดตั้ง ให้คลิกที่ปุ่ม Browse… แล้วคลิกที่ Desktop แล้วคลิก OK  ติดตั้งไว้บน Desktop นี่แหละก่อน ** คำเตือนห้ามสร้างโฟลเดอร์ย่อยมาเพื่อติดตั้งโปรแกรมเด็ดขาด เพราะจะมีปัญหาเมื่อท่านก้อปปี้มันไปใช้ที่อื่น  ตัวโปรแกรมมันจะสร้างโฟลเดอร์ให้ท่านอัตโนมัติอยู่แล้ว

4. คลิก Install

5. รอสักครู่ เมื่อโปรแกรมติดตั้งเสร็จคลิกที่ปุ่ม Finish

ใช้งาน

บาบิโลนดิกนั้นใช้ได้ทั้งแบบ online และ offline คือได้ทั้งต่อเน็ตและไม่ต่อเน็ต แต่ก่อนที่ท่านจะใช้แบบไม่ต่อเน็ตได้ ท่านจะต้องต่อเน็ตก่อน เอ้างง… พูดง่ายๆว่า ท่านจะต้องดาวน์โหลดฐานข้อมูลดิกมาเก็บที่เครื่องก่อนนั่นเอง

1. เมื่อเปิดโปรแกรมมาหน้าตาจะประมาณนี้

2. เลื่อน scrollbar ด้านข้างเลื่อนลงมา เมื่อเจอคำว่า Download this dictionary คลิกเลย

3. คลิก 5 more results เพื่อดูฐานข้อมูลตัวอื่นเพิ่มเติม

4. ส่วนตัวผมแนะนำดิก 3 ตัวนี้ ส่วนท่านจะดาวน์โหลดทั้งหมดเลยก็ไม่ว่ากัน

5. คลิกเครื่องหมาย + หน้ารายการนะครับ เมื่อมันขยายออกมาก็คลิกที่ Download this dictionary

เพียงเท่านี้ท่านก็สามารถก้อปปี้โฟลเดอร์ BabylonPortable ไปใช้ที่เครื่องอื่นๆที่ไม่ได้ต่ออินเตอร์เน็ตได้แล้ว

ปัญหาที่อาจจะเกิดขึ้นได้

ปัญหา : เมื่อก้อปปี้ดิกไปใส่ thumbdrive ติดตัว เปิดดิกแล้วมันแจ้งว่า Storage initialization failed (Error 2)

สาเหตุ : เพราะเก็บโฟลเดอร์ BabylonPortable ไว้ในโฟลเดอร์อื่นอีกชั้นนึง เช่น ถ้า thumbdrive ท่านเป็นไดร์ F:

F:\dictionary\BabylonPortable อย่างนี้เป็นต้น

วิธีแก้ปัญหา : ก้อปปี้โฟลเดอร์ BabylonPortable ให้อยู่ในระดับ root

F:\BabylonPortable

ธีม select2Darknight (รัตติกาล)

คุณสมบัติ
-สำหรับ SMF เวอร์ชั่น 1.1.10 (เวอร์ชั่นต่ำกว่านี้เรายังไม่ได้ทดสอบ)
-มาพร้อมสไลด์ (จะใส่โฆษณาหรืออะไรตามสะดวก)
-ออกแบบโดยใช้ css ในการวางเลย์เอ้าท์หลัก
-ทดสอบแล้วใน ie6,ie7,fifox,safari

วิธีการติดตั้ง
1.อัปโหลดไปไว้ในโฟลเดอร์ Themes
2.ไปที่ ผู้ดูแล>ปรับแต่งธีมและการวางรูปแบบ
3.พิมพ์ select2Darknight (ชื่อโฟลเดอร์ธีม) ไปในช่อง [b]จากไดเรคทอรี่ [/b]แล้วกดปุ่ม ติดตั้ง

เมื่อมีกล่องขึ้นมาถาม ให้ตอบ OK

4.คลิกที่ กลับ
5.ในช่องตัวเลือก [color=black]ธีมสำหรับบุคคลทั่วไป และ [/color]รีเซ็ตค่าของทุกคนเป็น เลือกเป็น select2Darknight

6.กดปุ่ม บันทึก

เพียงเท่านี้ธีมก็พร้อมใช้งานทันที

การปรับแต่ง
เราได้ให้ไฟล์ psd พร้อมแก้ไขภาพไปให้ท่านด้วย เก็บอยู่ในโฟลเดอร์ select2Darknightpsd

1. การแก้ไขชื่อบอร์ด
ให้เปิดไฟล์ select2Darknightpsd logo.psd ขึ้นมา แก้ไขด้วยโปรแกรม photoshop อย่างที่ต้องการ แล้วเซฟ ไว้ที่ select2Darknightimageslogo.gif
2. การแก้ไข slogan ของบอร์ด
-เปิดไฟล์ select2Darknightindex.template.php
-เลื่อนไปบรรทัด 205 แก้ไขคำว่า Your website’s slogan เป็นคำที่ต้องการ ถ้าท่านใช้ภาษาไทยต้องเซฟไฟล์เป็นแบบ utf-8
3. การปรับแต่ง Slide
-เปิดไฟล์ select2Darknightindex.template.php
-เลื่อนไปบรรทัด 231 แก้ไขคำว่า Ads by google เป็นคำที่ต้องการ

-เลื่อนไปบรรทัด 484 (1 li=1 slide ) ภาพที่ใช้ขนาด 190*127 เก็บไว้ที่ select2Darknightimages
-แก้ไข

<li><a href="#"><img src="',$settings['theme_url'],'/images/top_img_1.jpg" alt="picture" width="190" height="127" /><span>Ads.</span></a></li>

เป็นภาพที่ต้องการ และเท็กที่ต้องการ

Download คลิกที่นี่

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

เพราะในบางครั้งเราอุตส่าเขียนข้อความชี้แจงไว้ท้ายกล่องเท็กบ้อก ว่าให้ป้อนเฉพาะตัวเลข ไม่วายที่ยูสเซอร์จะใจดี ป้อนเครื่องหมายคั่นหลักพันมาให้ด้วย (25,000)

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

ฮ่วย….

ผมไปเจอปลักอินของ jquery มาตัวหนึ่ง ตัวนี้มันจะป้องกันไม่ให้ยูสเซอร์พิมพ์ตัวหนังสือลงไปในช่องเท็กบ้อก อนุญาตให้พิมพ์ได้เฉพาะตัวเลข 0-9 เท่านั้น

ปลักอินตัวนี้ alphanumeric

สำหรับวิธีการใช้งานนั้นก็ง่าย ตามสไตล์ jquery

Live Demo

Download Source

เขียนโค้ด
ก่อนอื่นต้องอินคลูดไฟล์ jquery กับ ปลักอิน alphanumeric เข้ามาก่อน

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.alphanumeric.js"></script>

ดูก่อนว่าช่องที่ให้ป้อนได้เฉพาะตัวเลข id อะไร

<input name="price" type="text" id="price" />

ทำให้มันป้อนได้เฉพาะตัวเลขซะ

<script type="text/javascript">
$(document).ready(function(){
	// เพียงสั้นๆแค่นี้แหละ
	$('#price').numeric();
 
});
</script>

โค้ดทั้งหมดเป็นดังนี้

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Allow Numeric</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.alphanumeric.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
	$('#price').numeric();
 
});
</script>
</head>
<body>
<input name="price" type="text" id="price" />
</body>
</html>

ง่ายจนเหลือเชื่อ ปลั๊กอินตัวนี้ไม่ใช่จะสามารถเพียงเท่านี้นะครับ ในกรณีนอกจากจะให้ป้อนได้เฉพาะตัวเลขแล้ว ยังอยากจะให้ป้อน dot(.) ได้ด้วย เพราะบางครั้งมันเป็นตัวเลขติดเศษ

ท่านก็เพียงแค่เซตเพิ่มเติมเล็กน้อย โดยเพิ่ม allow เข้าไป ในเครื่องหมาย “” ท่านอยากจะอนุญาตอักขระอะไรบ้างก็ใส่เข้าไป “.,” เป็นต้น

	$('#price').numeric({allow:"."});

ข้อมูลเพิ่มเติม : http://www.texotela.co.uk/code/jquery/

วันนี้มาถึงคำสั่งสุดท้ายในซีรี่ พิมพ์ข้อความลงในเอกสาร ของ fpdf เมื่อผมเริ่มซีรี่ด้วยคำสั่ง Text ซึ่งเป็นคำสั่งที่ง่ายๆที่สุดในบรรดา สี่พี่น้อง แล้วก็ตามมาด้วยคำสั่ง Write ซับซ้อนและมากความสามารถขึ้นมาอีกนิดนึง จนเมื่อวันก่อนลงเอยคำสั่ง Cell ซับซ้อนกว่าคำสั่ง Write อีก สามารถตีเส้นกรอบ และทำอย่างอื่นได้อีกหลายอย่าง แต่ดังที่ผมพูดไว้ในบทว่าด้วยเรื่อง Cell ว่าคำสั่งนี้จะไม่ปัดบรรทัดให้อัตโนมัติ เมื่อตัวอักษรยาวกว่ากรอบที่กำหนด

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

มาดูกัน เหยาะซ้อส (source) ก่อนเป็นอันดับแรก แล้วค่อยเอาผักใส่ตามหลัง

Live Demo

<?php
define('FPDF_FONTPATH','font/');
 
require('fpdf.php');
 
$pdf=new FPDF();
 
// เพิ่มฟ้อนต์ภาษาไทยเข้ามา ตัวธรรมดา กำหนด ชื่อ เป็น angsana
$pdf->AddFont('angsana','','angsa.php');
 
//สร้างหน้าเอกสาร
$pdf->AddPage();
 
// กำหนดฟ้อนต์ที่จะใช้  อังสนา ตัวธรรมดา ขนาด 14
$pdf->SetFont('angsana','',14);
 
// พิมพ์ข้อความลงเอกสาร  มีกรอบด้วย
$pdf->MultiCell( 20  , 5 , iconv( 'UTF-8','cp874' , 'นี่คือข้อความที่ตั้งใจให้ยาวเลยความกว้างของกรอบเซลล์' ) );
 
$pdf->Output();
?>

MultiCell(float w, float h, string txt [, mixed border [, string align [, boolean fill]]])

คำอธิบาย

สำหรับพิมพ์ข้อความลงในเอกสาร pdf

พารามิเตอร์

w : (ตัวเลข) ความกว้างของกล่องข้อความ ถ้าระบุเป็น 0 กล่องจะกว้างไปจนถึงกั้นขวาของกระดาษ
h : (ตัวเลข) ความสูงของกล่องข้อความ
txt : (ตัวหนังสือ) ข้อความที่ต้องการพิมพ์
border : เส้นขอบของกล่องข้อความ

ค่าที่เป็นไปได้
• 0 : ไม่มีขอบ (default)
• 1 : มีขอบ

นอกจากเป็น 0 1 แล้วเรายังระบุได้ด้วยว่าเอาเฉพาะกรอบด้านไหนได้ด้วย
• L: ขอบซ้าย
• T: ขอบบน
• R: ขอบขวา
• B: ขอบล่าง

align : (ตัวหนังสือ) จัดเรียงข้อความภายในกล่อง

ค่าที่เป็นไปได้
• L or ค่าว่าง : ชิดซ้าย (default value)
• C: จัดกึ่งกลาง
• R: ชิดขวา

fill : (true/false) แรเงากล่องข้อความหรือไม่หรือไม่ สำหรับสีที่จะใช้ในการแรเงานั้นกำหนดได้ด้วยคำสั่ง SetFillColor ซึ่งจะอธิบายในบทต่อๆ ไป

ค่าที่เป็นไปได้
• false : ไม่แรเงา (default)
• true : แรเงา

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

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

ผมได้แนะนำคำสั่งที่ใช้สำหรับพิมพ์ข้อความลงในเอกสาร pdf แล้ว 2 คำสั่ง คือ Text และ Write

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

สิ่งหนึ่งที่จะต้องจำไว้ในใจเลยก็คือว่า คำสั่ง Cell จะไม่ปัดบรรทัดให้อัตโนมัติ มันจะพิมพ์ยาวพรื้ดเลยขอบกระดาษด้านขวาออกทะเลไปโน่นเลย

ลองดูโค้ดกันก่อนตามมารยาท

Live Demo

<?php
define('FPDF_FONTPATH','font/');
 
require('fpdf.php');
 
$pdf=new FPDF();
 
// เพิ่มฟ้อนต์ภาษาไทยเข้ามา ตัวธรรมดา กำหนด ชื่อ เป็น angsana
$pdf->AddFont('angsana','','angsa.php');
 
//สร้างหน้าเอกสาร
$pdf->AddPage();
 
// กำหนดฟ้อนต์ที่จะใช้  อังสนา ตัวธรรมดา ขนาด 14
$pdf->SetFont('angsana','',14);
 
// พิมพ์ข้อความลงเอกสาร 
$pdf->Cell( 0  , 5 , iconv( 'UTF-8','cp874' , 'พิมพ์ให้อยู่ตรงกลาง' ) , 0 , 1 , 'C' );
 
// พิมพ์ข้อความลงเอกสาร  มีกรอบด้วย
$pdf->Cell( 50  , 5 , iconv( 'UTF-8','cp874' , 'พิมพ์ให้อยู่ตรงกลาง' ) , 1 );
 
// พิมพ์ข้อความลงเอกสาร  มีกรอบ พารามิเตอร์ระบุอย่างนี้ก็ได้
$pdf->Cell( 50  , 5 , iconv( 'UTF-8','cp874' , 'พิมพ์ให้อยู่ตรงกลาง' ) , 'TBR' );
 
 
$pdf->Output();
?>

ถ้าท่านได้คลิกดูที่ Live Demo ท่านจะสังเกตุเห็นอย่างหนึ่งว่า คำสั่ง Cell นี้ให้ผลลัพธ์ที่ค่อนข้างเหมาะจะำนำไปแสดงข้อมูลที่เป็นตาราง

Cell(float w [, float h [, string txt [, mixed border [, int ln [, string align [, boolean fill [, mixed link]]]]]]])

คำอธิบาย

สำหรับพิมพ์ข้อความลงในเอกสาร pdf

พารามิเตอร์

w : (ตัวเลข) ความกว้างของกล่องข้อความ ถ้าระบุเป็น 0 กล่องจะกว้างไปจนถึงกั้นขวาของกระดาษ
h : (ตัวเลข) ความสูงของกล่องข้อความ ค่าดีฟอลต์เป็น 0
txt : (ตัวหนังสือ) ข้อความที่ต้องการพิมพ์
border : เส้นขอบของกล่องข้อความ

ค่าที่เป็นไปได้
• 0 : ไม่มีขอบ
• 1 : มีขอบ

นอกจากเป็น 0 1 แล้วเรายังระบุได้ด้วยว่าเอาเฉพาะกรอบด้านไหนได้ด้วย
• L: ขอบซ้าย
• T: ขอบบน
• R: ขอบขวา
• B: ขอบล่าง

ln : (ตัวเลข) ระบุว่าหลังจากพิมพ์ข้อความในกล่องเสร็จแล้ว ให้เลื่อนเคอเซ่อร์ไปทางไหน

ค่าที่เป็นไปได้
• 0: ปล่อยไว้ที่เดิม
• 1: เลื่อนไปเริ่มต้นที่บรรทัดใหม่
• 2: เลื่อนลงไปด้านล่างของกล่องข้อความ

align : (ตัวหนังสือ) จัดเรียงข้อความภายในกล่อง

ค่าที่เป็นไปได้
• L or ค่าว่าง : ชิดซ้าย (default value)
• C: จัดกึ่งกลาง
• R: ชิดขวา

fill : (true/false) แรเงากล่องข้อความหรือไม่หรือไม่ สำหรับสีที่จะใช้ในการแรเงานั้นกำหนดได้ด้วยคำสั่ง SetFillColor ซึ่งจะอธิบายในบทต่อๆ ไป

ค่าที่เป็นไปได้
• false : ไม่แรเงา (default)
• true : แรเงา

link : (ตัวหนังสือ) URL เว็บไซต์ ในกรณีเราต้องการพิมพ์ข้อความนี้ให้เป็นไฮเปอร์ลิ้งก์

เวลาเราเขียนบล้อก หรือว่าทำเว็บใดๆก็ตาม ปริมาณของลิ้งก์มันจะเพิ่มขึ้นเรื่อยๆ เป็นเงาตามปริมาณของหน้าเว็บเพจ

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

และมันก็เป็นเรื่องลำบากที่เราจะทราบได้เอง เพราะเวลาชาวบ้านเขาเลิกทำเว็บเขาก็คงไม่ได้มาบอกเราหรอก เพราะฉะนั้น เราเองจึงต้องหาทางจัดการกับพวกลิ้งก์ตายเอาเอง

โดยวิธีการหนึ่งที่อยากแนะนำ ก็คือทำฟอร์มไว้ให้เพื่อนๆที่เข้ามาอ่านเว็บเรา ช่วยกันแจ้งลิ้งก์ที่ม่องแท่ง (ถ้าเช็กเองทั้งหมดคงรากแตก)

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

1. เข้าไปยัง google docs ของท่าน http://docs.google.com

2. Create New >Form

3. ป้อนค่าเหมือนดังภาพด้านล่าง

4. ลบแท็กบ้อกตัวที่ 2 ทิ้งเลย

5. ไปที่ More Actions > Edit confirmation เปลี่ยนคำพูดเสร็จแล้วก็ Save ซะ

เพียงเท่านี้ท่านก็มีฟอร์มไว้สำหรับรับแจ้งปัญหาแล้ว ทีนี้เวลาจะนำฟอร์มนี้ไปใช้ในเว็บไซต์ทำอย่างไร

ให้ท่านก้อปปี้ url ตรงที่เขาคาดดำๆไว้น่ะ ไปใช้ได้เลย

ตัวอย่างสดๆคลิกที่นี่ครับผม

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

Live Demo

<?php
define('FPDF_FONTPATH','font/');
 
require('fpdf.php');
 
$pdf=new FPDF();
 
// เพิ่มฟ้อนต์ภาษาไทยเข้ามา ตัวธรรมดา กำหนด ชื่อ เป็น angsana
$pdf->AddFont('angsana','','angsa.php');
 
//สร้างหน้าเอกสาร
$pdf->AddPage();
 
// กำหนดฟ้อนต์ที่จะใช้  อังสนา ตัวธรรมดา ขนาด 14
$pdf->SetFont('angsana','',14);
 
// พิมพ์ข้อความลงเอกสาร
$pdf->Write( 5  , iconv( 'UTF-8','cp874' , 'ครั้งแรกที่ผมศึกษาตัว fpdf ผมมองมันไม่ค่อยจะออกว่าจะพิมพ์ข้อความลงไปตรงนั้นตรงนี้ได้อย่างไร มันเหมือนเอกสารเวิร์ดมั้ย ที่ถ้าหากเราจะให้ข้อความมันเริ่มจากบรรทัดที่ 3 เราจะต้องเคาะขึ้นบรรทัดใหม่ 3 ครั้งก่อน แล้วค่อยพิมพ์  แล้วถ้าเราไม่ได้พิมพ์ไปทีละบรรทัดล่ะ เช่น อยากให้มันพิมพ์ตรงนั้นนิด ตรงนี้หน่อย ทำไง หลังจากพยายามทำความเข้าใจอยู่พักนึง ผมจึงได้ข้อสรุปว่า การพิมพ์ข้อความลงไปในเอกสาร pdf ด้วย fpdf นั้น เหมือนการใช้กล่องข้อความของเอกสารเวิร์ดมากกว่า ที่มีข้อความอยู่ในกล่อง แล้วลากไปลากมาให้ข้อความนั้นแสดงในตำแหน่งที่ต้องการ' ) );
 
//+ พิมพ์ hyper link ลงไปในเอกสาร
$pdf->Write( 5  , iconv( 'UTF-8','cp874' , ' www.select2web.com ' ) , 'http://www.select2web.com' );
 
$pdf->Output();
?>

Write(float h, string txt [, mixed link])

คำอธิบาย

สำหรับพิมพ์ข้อความลงในเอกสาร pdf

พารามิเตอร์

h : (ตัวเลข) ความสูงของบรรทัด
txt : (ตัวหนังสือ) ข้อความที่ต้องการพิมพ์
link : (ตัวหนังสือ) url ของเว็บไซต์

ในบรรดาคำสั่งในการพิมพ์ข้อความลงไปในเอกสาร pdf ที่ fpdf เตรียมไว้ให้ 4 คำสั่ง คือ Text , Write , Cell , MultiCell คำสั่ง Text เป็นคำสั่งที่เรียบง่ายที่สุด คำสั่งนี้เหมาะที่จะใช้ในการพิมพ์ข้อความสั้นๆ เพราะว่ามันจะไม่ขึ้นบรรทัดใหม่ให้อัตโนมัติ ลองดูวิธีการใช้งานครับ แล้วผมจะอธิบายคำสั่ง ตอนท้าย

Live Demo

<?php
define('FPDF_FONTPATH','font/');
 
require('fpdf.php');
 
$pdf=new FPDF();
 
// เพิ่มฟ้อนต์ภาษาไทยเข้ามา ตัวธรรมดา กำหนด ชื่อ เป็น angsana
$pdf->AddFont('angsana','','angsa.php');
 
//สร้างหน้าเอกสาร
$pdf->AddPage();
 
// กำหนดฟ้อนต์ที่จะใช้  อังสนา ตัวธรรมดา ขนาด 14
$pdf->SetFont('angsana','',14);
 
// พิมพ์ข้อความลงเอกสาร
$pdf->Text( 10  , 10 , iconv( 'UTF-8','cp874' , 'ครั้งแรกที่ผมศึกษาตัว fpdf ผมมองมันไม่ค่อยจะออกว่าจะพิมพ์ข้อความลงไปตรงนั้นตรงนี้ได้อย่างไร มันเหมือนเอกสารเวิร์ดมั้ย ที่ถ้าหากเราจะให้ข้อความมันเริ่มจากบรรทัดที่ 3 เราจะต้องเคาะขึ้นบรรทัดใหม่ 3 ครั้งก่อน แล้วค่อยพิมพ์  แล้วถ้าเราไม่ได้พิมพ์ไปทีละบรรทัดล่ะ เช่น อยากให้มันพิมพ์ตรงนั้นนิด ตรงนี้หน่อย ทำไง หลังจากพยายามทำความเข้าใจอยู่พักนึง ผมจึงได้ข้อสรุปว่า การพิมพ์ข้อความลงไปในเอกสาร pdf ด้วย fpdf นั้น เหมือนการใช้กล่องข้อความของเอกสารเวิร์ดมากกว่า ที่มีข้อความอยู่ในกล่อง แล้วลากไปลากมาให้ข้อความนั้นแสดงในตำแหน่งที่ต้องการ' ) );
 
$pdf->Output();
?>

สาเหตุที่ผมใช้ข้อความย้าวยาว ในคำสั่ง Text ก็เพื่อให้ท่านๆเห็นกับตาว่ามันไม่ปัดขึ้นบรรทัดใหม่ให้อัตโนมัติ

Text(float x, float y, string txt)

คำอธิบาย

สำหรับพิมพ์ข้อความลงในเอกสาร pdf คำสั่งนี้ จะไม่สนกั้นหน้า กั้นหลัง มุมซ้ายมือบน เป็นพิกัด 0,0

พารามิเตอร์

x : (ตัวเลข) พิกัดในแกน x แนวนอน
y : (ตัวเลข) พิกัดในแกน y แนวตั้ง
txt : (ตัวหนังสือ) ข้อความที่ต้องการพิมพ์

การพิมพ์ภาษาไทยลงไปในเอกสาร pdf ด้วย fpdf นั้น จำเป็นจะต้องสร้างฟอนต์ภาษาไทยขึ้นมาก่อน ซึ่งก็เอาฟอนต์จากวินโดวนี่แหละครับไปผ่านกระบวนการบางอย่าง ในเว็บเขาแนะนำวิธีสร้างไว้อย่างละเอียด

แต่อย่าเพิ่งตกใจนะครับ ผมมีฟอนต์ให้ท่านดาวน์โหลดไปใช้ได้เลย ผมได้รับมาจากน้องเด่นแห่ง minddesizn.com ต้องขอขอบคุณไว้ ณ ตรงนี้ครับ

ดาวน์โหลดฟอนต์

ไฟล์ที่ท่านดาวน์โหลดไปประกอบด้วยฟอนต์ angsana,cordia และอีกหลายฟอนต์ครับ ผมไม่ค่อยรู้จักเท่าไร เพราะใช้แต่ angsana ยันเต มี angsana ผมก็สบายใจแล้ว ท่านดาวน์โหลดไปแล้วแตกซิปออก ลองเอานะครับว่ามีฟอนต์อะไรบ้าง จากชื่อน่าจะเดาไม่ยาก หรือถ้าไม่รู้จักก็ลองใช้ครับ ถ้าสวยชอบใจ ก็ใช้ต่อ ถ้าไม่ถูกใจก็อย่าไปใช้ Try it by yourself

การเขียนโค้ดจะมีกระบวนการดังนี้

1. ต้องตั้งชื่อตัวแปร CONSTANT เพื่อชี้พาธที่อยู่ฟอนต์

2. เพิ่มฟอนต์เข้าไปใน fpdf

3. เรียกใช้

ดูโค้ดกันก่อนครับ ตอนท้ายผมจะอธิบายคำสั่งที่ใช้

Live Demo

<?php
define('FPDF_FONTPATH','fonts/');
 
require('fpdf.php');
 
$pdf=new FPDF();
 
// เพิ่มฟอนต์ภาษาไทยเข้ามา ตัวธรรมดา กำหนด ชื่อ เป็น angsana
$pdf->AddFont('angsana','','angsa.php');
 
// เพิ่มฟอนต์ภาษาไทยเข้ามา ตัวหนา  กำหนด ชื่อ เป็น angsana
$pdf->AddFont('angsana','B','angsab.php');
 
// เพิ่มฟอนต์ภาษาไทยเข้ามา ตัวหนา  กำหนด ชื่อ เป็น angsana
$pdf->AddFont('angsana','I','angsai.php');
 
// เพิ่มฟอนต์ภาษาไทยเข้ามา ตัวหนา  กำหนด ชื่อ เป็น angsana
$pdf->AddFont('angsana','BI','angsaz.php');
 
//สร้างหน้าเอกสาร
$pdf->AddPage();
 
// กำหนดฟอนต์ที่จะใช้  อังสนา ตัวธรรมดา ขนาด 12
$pdf->SetFont('angsana','',12);
// พิมพ์ข้อความลงเอกสาร
$pdf->setXY( 10, 10  );
$pdf->MultiCell( 0  , 0 , iconv( 'UTF-8','cp874' , 'อังสนา ตัวธรรมดา ขนาด 12' ) );
 
$pdf->SetFont('angsana','B',16);
$pdf->setXY( 10, 20  );
$pdf->MultiCell( 0  , 0 , iconv( 'UTF-8','cp874' , 'อังสนา ตัวหนา ขนาด 16' )  );
 
$pdf->SetFont('angsana','I',24);
$pdf->setXY( 10, 30  );
$pdf->MultiCell( 0  , 0 , iconv( 'UTF-8','cp874' , 'อังสนา ตัวเอียง ขนาด 24' )  );
 
$pdf->SetFont('angsana','BI',32);
$pdf->setXY( 10, 40  );
$pdf->MultiCell( 0  , 0 , iconv( 'UTF-8','cp874' , 'อังสนา ตัวหนาเอียง ขนาด 32' )  );
 
$pdf->Output();
?>

fpdf จะใช้ตัวแปร constant ชื่อ FPDF_FONTPATH เป็นตัวชี้ที่อยู่ฟอนต์ จำเป็นจะต้องประกาศและกำหนดพาธให้ถูกต้อง ปิดท้ายด้วยเครื่องหมาย slash( / )

define('FPDF_FONTPATH','fonts/');

AddFont(string family [, string style [, string file]])

คำอธิบาย

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

พารามิเตอร์ตัวที่ 3 เป็นชื่อไฟล์ที่ลงท้ายด้วย .php ถ้าท่านเปิดโฟลเดอร์ฟอนต์ที่ดาวน์โหลดไปตอนต้นบทความนี้ ท่านจะเห็น angsa.php (ตัวปกติ) angsab.php (ตัวหนา ลงท้ายด้วย b) angsai.php (ตัวเอียง ลงท้ายด้วย i) angsaz.php (ตัวหนาเอียง ลงท้ายด้วย z) และฟ้อนต์ชื่ออื่นในลักษณะนี้ ให้จำไว้ว่า ถ้าลงท้ายด้วย b มันเป็นฟอนต์ตัวหนา ลงท้ายด้วย i เป็นฟอนต์ตัวเอียง ลงท้ายด้วย z เป็นฟอนต์ตัวหนาเอียง

พารามิเตอร์

family : กำหนดชื่อ เราจะได้เรียกใช้ภายหลังง่ายๆ angsana ตัวปกติ ตัวหนา ตัวเอียง ตัวเอียงหนา จะใช้ชื่อ angsana เหมือนกัน
style : ลักษณะของฟอนต์

ค่าที่เป็นไปได้คือ
• empty string – ตัวอักษรปกติ empty string ก็คือ ‘’ ไม่มีอะไรเลยในฟันหนู
• B: ตัวหนา
• I: ตัวเอียง
• BI หรือ IB: ตัวหนาเอียง

file : ไฟล์ฟอนต์ ถ้าพารามิเตอร์แรกท่านใช้ angsana พารามิเตอร์ตัวที่ 2 เป็นตัวหนา พารามิเตอร์ตัวนี้ก็ต้องชี้ไปที่ไฟล์ angsab.php

SetFont(string family [, string style [, float size]])

คำอธิบาย

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

พารามิเตอร์

family : ชื่อฟอนต์ที่ใช้คำสั่ง AddFont กำหนดไว้
style : ลักษณะของฟอนต์

ค่าที่เป็นไปได้คือ
• empty string – ตัวอักษรปกติ
• B: ตัวหนา
• I: ตัวเอียง
• BI หรือ IB: ตัวหนาเอียง

size : ขนาดฟอนต์ที่จะพิมพ์ลงในเอกสาร

คำสั่ง AddFont กับ SetFont นั้นจะใช้งานควบคู่กัน และสัมพันธ์กันอยู่ ลองดูโค้ดด้านบนและหลับตาจินตนการดีๆ ก็จะเข้าใจ

fpdf นั้นมีข้อเสียเล็กๆอยู่ข้อหนึ่งคือ ยังไม่สนับสนุน utf-8 แต่ก็มีทางออกโดยใช้คำสั่ง iconv แปลงเอา ถึงจะมีความไม่สะดวกเล็กๆอยู่บ้าง แต่ผมเชื่อว่าสิ่งที่ได้จากการใช้ fpdf นั้นคุ้มครับ ยิ่งเมื่อนึกถึงความง่ายในการใช้งานแล้ว มันกลบความไม่สะดวกเล็กๆนี้ไปเลย

$pdf->MultiCell( 0  , 0 , iconv( 'UTF-8','cp874' , 'อังสนา ตัวหนาเอียง ขนาด 32' )  );

เป็นที่ทราบกันทั้งมือเก่า มือใหม่ และพวกมือไม่ล้าง ว่า extension ฮอตฮิตติดอันดับต้นๆของไฟฟ้อก ก็คือ ไฟบัก อันนี้ผมพูดเฉพาะท่านผู้เขียนเว็บนะครับ อาซิ้มอาซ้อไม่เกี่ยว

ไฟบัก เป็น extension ของไฟฟ้อกสารพัดความสามารถ ทั้งดูโครงสร้าง html ,โครงสร้าง css ,ทดลองแก้ไข css แล้วดูผลได้เลย (ซึ่งอันนี้ผมชอบมาก) และอีกความสามารถหนึ่งคือ ดูข้อมูลที่รับส่งผ่านฟอร์ม ระหว่างไคแอนท์กับเซิฟเวอร์ ความสามารถนี้มักเอามาดีบัก AJAX

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

ใช้มันไม่เป็นจริงๆให้ดิ้นตาย หาๆในกูเกิลดู ก็ไม่มีเว็บไหนบอกวิธีการใช้งาน บอกกันเพียงแต่ว่ามันทำได้เท่านั้น

เวลาผมเขียนโค้ด AJAX แล้วมันเออเร่อโค้ดฝั่งเซิฟเวอร์ ผมจะลำบากมาก (ท่านที่เคยเขียน AJAX จะทราบดีว่า ถ้ามันเออเร่อที่ฝั่งเซิฟเวอร์ มันไม่แสดงอาการใดๆให้เราเห็นเลย อาการเดียวที่เห็นคือเหมือนโค้ดเราไม่ยอมทำงาน)

ผมต้องนั่งไล่โค้ดตัวเอง ไปทีละบรรทัด กว่าจะเจอว่าลืมปิด ; หากันแทบเป็นริดสีดวงคาเก้าอี้ ใช้ไฟบักก็ไม่เป็น จนต้องเลิกเขียน AJAX ไปพักใหญ่ เดี๋ยวนี้ถึงจะเขียนบ้างก็แค่เล็กน้อย ขี้เกียจหาบัก

แล้วมาเมื่อวาน ผมอ่านเว็บไปเรื่อยเปื่อย จนเจอเข้าให้ว่า จะเอาไฟบักช่วยหาบัก ที่เกิดจากการเขียนโค้ดแนว AJAX ได้อย่างไร วิธีการก็ไม่ได้ยากอะไรเล้ย กระบืออยู่ตั้งนาน

คลิกแท็บ Net เลือก Enable

หลังจาก Enable แล้วท่านจะเห็นปุ่มโผล่มาอีกหลายปุ่ม ถ้าอยากรู้ว่าแต่ละปุ่มมันแสดงอะไรก็ลองๆคลิกเล่นๆดู

ถ้าไม่อยากซุกซน ผมก็แนะนำให้ดูที่ปุ่ม All นั่นแหละครับ ถ้าท่านลองรีเฟรชหน้าเพจดู ก็จะมีข้อมูลแสดงออกมา มีเครื่องหมาย + นำหน้าด้วย

แล้วมันช่วยดีบัก AJAX ได้อย่างไร ลองดูภาพนี้นะครับ

นี่เป็นภาพที่แสดงการทำงานของ AJAX ในขณะที่ผมกำลังเขียนบทความนี้ในเวิร์ดเพรส ( เวลาเราเขียนบทความ มันจะ Autosave อยู่เรื่อยๆ ซึ่งมันใช้ AJAX ทำงานอยู่เบื้องหลัง)

ถ้าคลิกที่เครื่องหมาย + ขยายออกมา เราจะเห็น แท็บ 3 แท็บ คือ

1. Headers แสดงส่วนของเฮดเดอร์ ในการรับส่งข้อมูล

2. Post แสดงข้อมูลที่ส่งไปยังเซิฟเวอร์

3. Response สิ่งที่ตอบกลับมาจากเซิฟเวอร์

ตรงแท็บ Response นี่แหละที่หากว่าโค้ดฝั่งเซิฟเวอร์ของท่านเออเร่อ ท่านก็จะเห็นจากตรงนี้ ทำให้การหาบักในการเขียน AJAX ง่ายขึ้น

ลองอ่านข้อมูลจากเว็บไซต์อื่นๆเพิ่มเติม :
Firebug 1.4.3
ชีวิตง่ายขึ้นด้วย Firebug
ว่าด้วยเรื่องของการ debug และการใช้ FireBug บน Browser ทุกตัว
รวมเทคนิค firebug