การเขียน counter อย่างง่ายด้วยภาพ

ปรับปรุง : 2548-02-12 ()

บทเรียน ONLINE : การเขียนภาษา PERL
[ การเขียน counter อย่างง่ายด้วยภาพ ]

  1. ข้อควรทราบ
  2. การใส่ tag ในหน้าเว็บที่ต้องการนับ (คล้ายกับ การเขียน counter อย่างง่ายที่สุด แต่ปรับปรุงนิดหน่อย)
  3. โปรแกรมสำหรับนับ เขียนอย่างไร
  4. สั่งให้เริ่มนับใหม่ (เหมือนกับ การเขียน counter อย่างง่ายที่สุด เพราะใช้แฟ้มข้อมูลชุดเดียวกัน)
  5. แบบฝึกหัด

ตัวอย่างผลลัพธ์(Reload จะเพิ่มแต้มให้) (Click here เพื่อทดสอบการเริ่มนับใหม่)

ภาพเลข ชุด na_.gif หรือ แยกภาพเพื่อcopyง่าย
ภาพเลข ชุด nb_.gif หรือ
ภาพเลข ชุด nc_.gif หรือ
ข้อควรทราบ
  1. วิธีการส่วนใหญ่ เหมือนกับ การเขียน counter อย่างง่ายที่สุด แต่แตกต่างกันที่ การแสดงผลเป็นภาพเท่านั้น
  2. วิธีทำ counter แบบนี้ใช้แฟ้ม 4 แฟ้ม คือโปรแกรมนับ plcnt02p.pl แฟ้มเก็บเลขสุดท้าย plcnt01d.dat โปรแกรมล้างค่าเดิม plcnt01c.pl และหน้าเว็บที่ต้องการนับ เช่น plcnt02.htm หรือหน้านี้นั่นเอง
  3. สังเกตุได้ว่า โปรแกรมล้างค่าเดิม และแฟ้มเก็บเลขสุดท้าย ผมยังใช้จาก บทเรียน การเขียน counter อย่างง่ายที่สุด
  4. ทั้งสี่แฟ้มให้อยู่ ในห้องเดียวกัน ตัวอย่างนี้ให้อยู่ในห้อง perl แต่การใช้งานจริง จะขึ้นอยู่กับผู้เขียนในการจัดสรร
  5. ห้อง perl ควรกำหนดสิทธิไว้เป็น chmod 777 perl จะได้ไม่มีปัญหากวนใจภายหลัง เรื่อง update แล้วไม่เกิดผล ซึ่งผมเจอปัญหานี้บ่อยมาก
  6. แฟ้ม plcnt01d.dat ใช้เก็บเลขสุดท้าย และเป็นแฟ้มที่ไม่ต้องสร้างขึ้น แต่โปรแกรม plcnt01p.pl จะสร้างให้ ถ้ายังไม่ถูกสร้างในครั้งแรก
  7. ผลการนับจะเป็นภาพ ไม่ใช่ตัวอักษร นะครับ ถ้าเป็นตัวอักษรจะอยู่ในบทก่อนหน้านี้
  8. ในตัวอย่างนี้การอ้างอิงภาพจะอ้างจากห้อง /num เพราะเก็บภาพตัวเลขทั้งหมดในห้องนั้น

การใส่ tag ในหน้าเว็บที่ต้องการนับ
คำสั่งที่เขียนลงไปในหน้าเว็บนี้
เพื่อสั่งประมวลผล plcnt02p.pl จะแสดงเลขออกมา
ใส่บรรทัดข้างล่างนี้ในหน้าเว็บใดจะนับ หน้าเว็บนั้น
เขียนสั้น ๆ ง่าย ๆ แต่ได้ใจความ
<!--#exec cgi="/perl/plcnt02p.pl"-->

สังเกตุได้ว่าถ้ากด refresh หรือ reload เลขจะเปลี่ยนไป

โปรแกรมสำหรับนับ เขียนอย่างไร
ตัวอย่าง perl นี้ผมใช้ชื่อ plcnt02p.pl เก็บในห้อง /perl
ถ้านำไปทดสอบจะใช้ชื่ออะไรก็ได้นะครับ แต่ต้องสัมพันธ์กับที่มีใน plcnt01.htm
หลักการของโปรแกรม คือ
- เปิดแฟ้ม plcnt01d.dat
- อ่านค่ามาบวกอีก 1
- เขียนค่าใหม่ลงใน plcnt01d.dat
- สั่ง print ค่าใหม่ แต่เป็นการดึงรูปภาพ ไปแสดงผลบนจอภาพ
- เรียบร้อย
copy โปรแกรมข้างล่างนี้ไปใส่ใน notepad แล้ว save ในชื่อ plcnt01p.pl
#!/usr/local/bin/perl
$filename = join '',"/data1/hm/thaiall.com","/perl/plcnt01d.dat";
# read last value
open(fn,"$filename");
$cntlast = <fn>;
close(fn);
$cntlast++;
# update plcnt01d.dat
unlink("$filename");
open(fn,">$filename");
print fn $cntlast;
close(fn);
# print on webpage
print "Content-type: text/html\n\n";
$lencnt = length($cntlast);
print "<img src=/num/naa.gif>";
for $i (0 .. $lencnt-1) {
print "<img src=/num/na",substr($cntlast,$i,1),".gif>";
}
print "<img src=/num/nab.gif>";

สั่งให้เริ่มนับใหม่
สั่งให้เริ่มนับใหม่ในความหมายของผม คือการลบแฟ้ม plcnt01d.dat
เพียงแต่สั่ง run โปรแกรมนี้ก็เป็นอันเรียยร้อย
plcnt01d.dat จะหายไป และจะถูกสร้างใหม่เมื่อเปิดเว็บ plcnt01.htm
ซึ่งโปรแกรมที่ใช้สร้างก็คือ plcnt01p.pl นั่นเอง
โปรแกรม plcnt01c.pl มีเพียง 5 บรรทัดเท่านั้น
copy โปรแกรมข้างล่างนี้ไปใส่ใน notepad แล้ว save ในชื่อ plcnt01c.pl
#!/usr/local/bin/perl
$filename = join '',"/data1/hm/thaiall.com","/perl/plcnt01d.dat";
unlink("$filename");
print"Content-type:text/html\n\n";
print"clear ok";
Click here เพื่อทดสอบการเริ่มนับใหม่

แบบฝึกหัด
    ให้ทำตามโจทย์ต่อไปนี้
  1. ให้ทำ counter เหมือนตัวอย่างเลยนะครับ
  2. ให้ปรับปรุงไปใช้กับหน้าเว็บที่ท่านต้องการ
  3. ให้ใช้ photoshop สร้างตัวเลขใหม่ และนำไปใช้ในหน้าเว็บของท่าน
ผู้สนับสนุน + ผู้สนับสนุน
+ รับผู้สนับสนุน

แนะนำเว็บใหม่ : ผลการจัดอันดับ
รักลำปาง : thcity.com : korattown.com : topsiam.com : มหาวิทยาลัยโยนก
ศูนย์สอบ : รวมบทความ : ไอทีในชีวิตประจำวัน : ดาวน์โหลด : yourname@thaiall.com
ติดต่อ ทีมงาน ชาวลำปาง มีฝันเพื่อการศึกษา Tel.08-1992-7223