1. How to AJAX Programming with jQuery

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

AJAX = "Asynchoronous Javascript And XML" ความจริงแล้ว AJAX ไม่ได้เป็นอะไรใหม่อย่างที่หลายๆคนคิด แต่เป็นเพียงการนำ javascript มาใช้ในลักษณะของการทำ XMLHttpRequest Object รวมไปถึงการนำเทคนิคต่างๆ เช่น CSS, DHTML, Javascript, DOM, etc. มาผนวกเข้าด้วยกัน จนทำให้ Webpage สามารถทำงานต่างๆได้ใกล้เคียงกับ Windows Apps. นี่ยังไม่รวมไปถึง Performance โดยรวมของ website ที่เราพัฒนาที่สามารถทำงานได้เร็วขึ้น Call Data น้อยลง และสามารถทำงานได้จนเกือบจะถึงขั้น Realtime เลยทีเดียว

มาถึงพระเอกของงานนี้ คือเจ้า jQuery ซึ่งถ้าเราต้องมาจัดการ Module AJAX เราอาจต้องเขียนโค๊ดค่อนข้างมหาศาล ทั้งการสร้าง Object, DOM , XMLHttpRequest และอีกสารพัด Function เพื่อจัดการ Event ต่างๆ ของเว็ปเพจเรา แฮะๆ แค่คิดก็เซ็งแล้ว เวลางานทั้งหมดของเรา คงจะไม่พอแน่ๆ แต่ก็มีเจ้า jQuery เป็นพระเอกขี่ม้าขาวมาช่วย โดยที่ตัวของมัน เราจะเรียกได้ว่าเป็น AJAX Framework ก็คงจะไม่แปลกแต่อย่างใด

พล่ามมามากแล้ว เมื่อยมือ เรามาดูความสามารถของเจ้า jQuery กันเลยดีกว่า ก่อนอื่น ไปดาวน์โหลดเจ้าตัวนี้มาเป็นอันดับแรก โดย คลิกที่นี่ ซึ่ง ณ ตอนที่เขียนบล๊อคนี้ เจ้า jQuery จะอยู่ที่ Version release 1.3.2 จากนั้น Include ลงไปใน webpage ของเราในส่วนของ Tag Header ตามตัวอย่างโค๊ดข้างล่างนะ

<>
<>
<>Simple AJAX With deMODZA < /title >
< src="jscript/jquery-1.3.2.min.js" language="javascript">< /script>
< /head >
<>
<><>
< type="button" id="bttClickMe" value="ClickMe">
< /body>
< /html>

<>
$("#bttClickMe").click(function(){
alert("HELLO AJAX With jQuery!");
});
< /script >

จากตัวอย่างโค๊ด เราสามารถ Save เป็น .html ได้เลย โดยที่การทำงานของมันคือ เมื่อเราคลิกที่ปุ่ม ClickMe หน้าเพจของเราก็จะแสดง Message Box คำว่า "HELLO AJAX With jQuery!" ขึ้นมาทันที ซึ่งถ้าเราเขียนโค๊ดแบบ Javascript วิธีเดิมๆ เราต้องเขียนในลักษณะ < type="button" value="ClickMe" onclick="alertMessage();"> จากนั้นเราก็ต้องไปเขียน Function alertMessage() เพื่อให้แสดงข้อความ message box อีกรอบ

หากลองสังเกตดู ตัว Button ตัวแรก จะมี tag ID ไว้เพื่อระบุตัวตนของมัน เพื่อที่จะส่งค่าให้ jQuery จับ Event ได้

เอาล่ะ ลองเอาโค๊ดไปลองๆประยุกต์ดูก่อนนะ เดี๋ยวว่างๆจะมาอธิบายโค๊ดอีกที ตอนนี้ ง่วงละ ขอตัวไปนอนก่อนละกันน้าาาา......

ทำ Welcome Message ตอนบู๊ตเครื่องแบบง่ายๆ

ผมเชื่อว่า พี่ๆ น้องๆ หลายๆ คนคงอยากมีข้อความต้อนรับแบบเก๋ๆ ไม่เหมือนใครเช่น พอเราเปิดเครื่องปุ๊บ ก็เจอ messagebox แสดงข้อความว่า สวัสดีคุณ สยาม
สำหรับ Tips นี้เป็น VB Script ง่ายๆ ไม่ต้องไปยุ่งกับ Register ใดๆของระบบเลย ลองดูนะครับ อาจจะเป็นก้าวแรกของน้องๆ ที่ฝันอยากเป็นโปรแกรมเมอร์ก็ได้ ใครจะรู้

สิ่งที่ต้องมี
1. มันสมอง กับ 2 มือ(มีกันทุกคนอยู่แล้ว)

ขั้นตอนการทำ
1. เปิด NotePad แล้วพิมพ์โค๊ดข้างล่างนี้ลงไป


Rem Welcome Message by Duke

Dim tmpString

tmpString = "Hello Duke" & vbCrlf & "Welcome to my system."

MsgBox tmpString ,vbInformation, "System Info."


2. ทำการบันทึกให้เป็นไฟล์ VBScript โดย คลิกที่ Menu File ของ NotePad เลือกคำสั่ง save as แล้วพิมพ์ชื่อไฟล์ว่า "WellcomeMSG.vbs" บันทึกไว้ที่ ไหนก็ได้แต่ขอให้จำ path ให้ได้ก็พอ
- ต้องใส่เครื่องหมาย " คล่อมหัว ท้าย ด้วยนะครับ ไม่อย่างนั้นเราจะได้ไฟล์ชื่อ WellcomeMSG.vbs.txt แทน
- ตรงชื่อไฟล์เราสามารถตั้งชื่ออื่นก็ได้นะครับ ขอให้เป็นนามสกุล .vbs ก็พอ

3. ทดสอบการทำงานโดย ดับเบิลคลิกที่ไฟล์ของเราเมื่อกี้ ถ้าไม่มีอะไรผิดพลาด เราจะเห็น Message Box แสดงข้อความของเรา

4.คลิกขวาที่ไฟล์ของเราเลือกคำสั่ง Send To > Desktop (Create Shortcut)
5.ไปที่หน้าจอ DeskTop
6.ลาก Shortcut ของไฟล์ที่เราสร้างไปวางที่ Start menu > all Programes > Start Up
- สำหรับคนที่ใช้ Start menu แบบ Classic ให้ไปวางที่ Start menu > Program files > Start Up
(วิธีการวางคือ ลาง ไอคอนไปชี้ที่บริเวณ start menu ตัวเมนูก็จะเด้งขึ้นมา แล้วเราก็ลางต่อไปที่คำสั่ง All Programs แล้วก็ไปที่ Start Up)

เสร็จสิ้นขั้นตอน เพียงเท่านี้ ทุกครั้งที่เราบู๊ตเครื่อง เราก็จะเห็น Message Box ต้อนรับในแบบที่เราต้องการ (หรือจะทำไปอำใครก็คิดดูดีๆนะครับ)
วิธีการเอาออกก็ง่ายๆ เพียงแต่ไปลบ Shortcut ไฟล์ของเราใน Start Up เท่านั้นเอง

อธิบายโค๊ด
1. บรรทัดแรก คำสั่ง Rem คือ การประกาศว่า บรรทัดนี้ ไม่ต้องทำการประมวลผล หรือ ภาษาโปรแกรมเมอร์เรียก Comment นั่นเอง
2. ประกาศตัวแปรเพื่อเก็บคำที่ต้องการแสดงใร Message Box ให้ชื่อว่า tmpString
3. กำหนดค่าให้ตัวแปร (ตรงนี้ อยากให้แสดงข้อความว่าอะไรก็ใส่ได้เลยนะครับ)
- ในกรณีที่ต้องการให้ขึ้นบรรทัดใหม่ ให้เราใส่คำสั่ง & vbCrlf ต่อท้ายข้อความที่เราต้องการ ตามด้วยเครื่องหมาย & แล้วก็ข้อความที่เราต้องการต่อ
4. คำสั่งแสดง MessageBox โดยกำหนดพารามิเตอร์ให้มัน 3 ตัวคือ
- tmpString คือ ข้อความที่เราต้องการแสดง
- รูปแบบ Icon ของ Message Box ในที่นี้ให้แสดงเครื่องหมาย i (Inforamation)
- ข้อความที่เราต้องการให้แสดงที่ Title Bar ของตัว Message Box

เหมือนเดิมครับ: ถ้าใครมีอะไรแนะนำก็ยินดีเสมอนะครับ หรืออยากได้ Tips ที่เกี่ยวกับอะไรก็แนะนำมาได้เลยครับ ถ้าผมรู้ ก็จะเสนอเลย ถ้าไม่รู้ ก็จะไปหาวิธี หรือ แนวทางให้นะคร้าาาาบบบบ....

[Tip by: deMODZA]


[Submit to Zickr!]

เปลี่ยน Handy Drive Icon แบบเก๋ๆ

เชื่อว่าพี่ๆ น้องๆ เกือบทุกคนต้องมี Handy Drive (หลายๆคนเรียก Flash Drive, Thump Drive แต่ที่ผมถูกใจที่สุด ก็รุ่นพี่ของผมคนนึงแหละ พี่แกเรียก "ตั้ม" ไดรฟ์)

คราวนี้ ตัว Handy Drive ก็เป็นอุปกรณ์ตัวนึงที่สามารถในการทำ Auto Run ได้ เราก็ใช้ความสามารถตัวนี้แหละ มาทำการเปลี่ยน Icon ให้กับมัน โดยสิ่งที่เราต้องมี คือ
1. Script AutoRun
2. ไฟล์ Icon (.ico) เท่ห์ๆ แบบที่เราต้องการ

ขั้นตอนการทำ
1. เปิด NotePad ขึ้นมา
2. พิมพ์โค๊ดคำสั่งข้างล่างลงไป 2 บรรทัด

[AutoRun]
ICON=myIcon.ico

*โดยแทนที่ myIcon.ico ด้วยชื่อไฟล์ Icon ของเรา อย่าลืม .ico ด้วยนา*

3. เซฟไฟล์ โดยตั้งชื่อไฟล์ว่า AutoRun.inf (วิธีการตั้งชื่อไฟล์ตามที่เราต้องการ ก็ให้ใส่ (" ") คล่อมหัวท้ายไว้ เช่น
"AutoRun.inf" )
4. ก๊อปปี้ ไฟล์ทั้ง 2 ตัวไปไว้ใน Handy Drive ของเรา (ไม่ต้องไปใส่ใน Folder ไหนเลยนะครับ)
5. ถอด Handy Drive ออก แล้วเสียบเข้าไปใหม่ เป็นอันเสร็จขั้นตอนการทำ

คราวนี้เราก็จะมี Icon Handy Drive แบบเก๋ๆ ไว้ใช้บอกความเป็นตัวเองซะที
ปล. วิธีการนี้ ยังใช้ได้กับ Drive อื่นๆในเครื่องได้เหมือนกันนะครับ เพียงแต่ บางครั้งเราต้อง Restart เพื่อที่จะได้เห็นผลของมัน...

[Tip by: deMODZA]


[Submit to Zickr!]

สร้าง Link แบบ Roll Over Image โดยใช้ CSS

เมื่อวันก่อน ผมต้องทำการแก้ไข Link ให้เว็ปเพจนึง โดยที่นี่ เค้าใช้ RollOver แบบ JavaScript โดยที่สร้างจาก DreamWeaver ข้อดีคือง่าย เร็ว สะดวก(คนทำ แต่ลำบากคนแก้) แล้วที่สำคัญมีเกือบ 20 หน้า แล้วพี่แกไม่ได้ Include ผลก็เลยผมต้องมานั่งแก้ทีละหน้า เล่นเอาตาลายเลย (โค๊ดยาวมากกก)

เมื่อเกิดเหตุการณ์อย่างนี้ขึ้น โดยนิสัยโปแกรมเมอร์(ขี้เกียจ)อย่างผม ก็เลยแนะนำพวกพี่ๆเค้าให้ใช้ RollOver Image Link แบบ CSS แทน

สิ่งที่ต้องมี
1.รูปภาพที่ต้องการมาทำ RollOver 2 รูป คือ รูปสถานะปกติ กับ รูป สถานะ Mouse Over (อันนี้แล้วแต่ Idea ใคร Idea มันนะคับ)
2.โค๊ด CSS

ตัวอย่างโค๊ด
<!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=windows-874" />
<title>.. Roll Over Button sample....by deMODZA. </title>

<style type="text/css">
<!--
.link a { /* <-- Class สำหรับ Link สถานะปกติ */
background: #D9E1E5 url(imgActive.gif); /* ภาพพื้นหลัง */
font: bold 12px tahoma; /* กำหนด Font */
color: #FFFFFF; /* สี Font */
height: 25px; /* ความสูงของ Link */
display: block; /* กำหนดให้มีการแสดงผลเป็น Block ตามความกว้่าง * ยาว ที่เรากำหนด */
line-height: 22px; /* ตำแหน่งตัวอักษร ค่าต้องไม่เกินความสูงของ Link ค่ายิ่งมาก ตัวอักษรยิ่งใกล้เส้นขอบด้านล่าง */
text-decoration: none; /* กำหนดให้ Link ไม่มีเส้นใต้ */
}

.link_2 a:hover {/* <-- Class สำหรับ Link สถานะเม้าท์ชี้ */
background: #D9E1E5 url(imgActive.gif);
font:12 tahoma;
color:#000000;
display: block;
text-decoration: none;
}

/* -- กรณีมีการแสดงผลหลายรูปแบบ เราก็กำหนดชื่อ class ต่างกัน property ตามที่เราต้องการ ในที่นี้ กำหนดสลับสีกับตัวอย่างแรก --*/

.link_2 a {
background: #D9E1E5 url(imgInActive.gif);
font: bold 12px tahoma;
color: #FFFFFF;
height: 25px;
display: block;
line-height: 22px;
text-decoration: none;
}
.link a:hover {
background: #D9E1E5 url(imgInActive.gif);
font:12 tahoma;
color:#000000;
display: block;
text-decoration: none;
}

.link3 a{
font-family: tahoma;
font-size: 12px;
font-weight: bold;
color: #333333;
text-decoration: none;
background-image: url(imgActive.gif);
display: block;
height: 25px;
line-height: 25px;
}
.link3 a:hover{
font-family: tahoma;
font-size: 12px;
font-weight: bold;
color: #333333;
text-decoration: none;
background-image: url(imgInActive.gif);
display: block;
height: 25px;
line-height: 25px;
}
-->
</style>
</head>
<body>
<table width="150">
<tr>
<td align="center" >CSS Class <STRONG>link </STRONG> </td>
</tr> <tr>
<td align="center" class="link"> <a href=# >LINK 1 </a> </td>
</tr> <tr>
<td align="center" class="link"> <a href=# >LINK 2 </a> </td>
</tr> <tr>
<td align="center" >CSS Class <STRONG>link_2 </STRONG> </td>
</tr> <tr>
<td align="center" class="link_2"> <a href=# >LINK 3 </a> </td>
</tr> <tr>
<td align="center" class="link_2"> <a href=# >LINK 4 </a> </td>
</tr> <tr>
<td align="center" class="link3"> <a href=# >LINK 5 </a> </td>
</tr>
</table>
</body>
</html>

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

Tip by deMODZA

[Submit to Zickr!]

เปิดตัว My blog My X' Change...

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