การเขียน Option เรียกเว็บมารวมกัน

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

บทเรียน ONLINE : การเขียนภาษา PERL
[ การเขียน Option เรียกเว็บมารวมกัน ]
บทเรียนนี้เหมาะกับ เว็บที่มีหัวเรื่องมาก และต้องการให้ผู้ใช้เลือกหลายหัวเรื่องมาแสดง ในหน้าเว็บเดียวกัน
ถ้างงกับคำอธิบายของผม ก็ดูตัวอย่างล่ะกันครับ เข้าใจง่ายกว่าเยอะ ดังสุภาษิต "10 ปากว่าไม่เท่าตาเห็น"
http://www.thaiall.com/thai/ (รวมข้อมูล วัฒนธรรม ประเพณี สังคม และประวัติศาสตร์ ของไทย)

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

ข้อควรทราบ
  1. โปรแกรมชุดนี้เขียนง่าย ขอเพียงสั่ง ให้โปรแกรม perl ประมวลผลได้ อย่างอื่นไม่น่ามีปัญหา เพราะการทำงานของโปรแกรม เป็นการอ่านข้อมูลมาแสดงเพียงอย่างเดียว
  2. มีแฟ้มที่เกี่ยวข้อง 3 แฟ้มสำหรับตัวอย่างนี้ คือ แฟ้มเว็บ plclopt.htm คือแฟ้มนี้เพื่อเลือกหัวข้อที่ต้องการ แฟ้มเก็บข้อมูล plclopt.dat และโปรแกรมเลือกหัวข้อ plclopt.pl
  3. ขั้นตอนการทำงาน จะเริ่มจากการสั่งให้ perl ทำงานพร้อมส่งค่าจากคำสั่ง form ในหน้าเว็บ แล้วโปรแกรม perl จะนำค่าที่ได้ไปค้นหาในแฟ้มข้อมูล เมื่อตรงตามเงื่อนไข จะนำข้อมูลนั้นมาแสดงทันที
  4. ปัญหาที่อาจเกิดขึ้น คือ ถ้าแฟ้มทั้งสามอยู่ห้องเดียวกัน ควรกำหนด chmod 755 ให้กับห้องนั้น และตัวโปรแกรม perl แต่ถ้า server ของท่านอยู่ในระบบอื่นก็อาจต้องเก็บโปรแกรม perl ในห้อง cgi หรือ cgi-bin แต่ถ้าเป็นที่ hypermart ล่ะก็ เก็บห้องไหนก็ run perl ได้หมด
  5. บทเรียนนี้จะง่าย และไม่น่าเกิดปัญหาจุกจิก เพราะเป็นการอ่านข้อมูลมาแสดง ไม่มีการปรับปรุงข้อมูล ซึ่งมักเกิดปัญหาเล็กน้อยอยู่เสมอ (โปรแกรมชุดนี้ง่าย ขอให้ทำให้ได้ ด้วยความสนุกนะครับ)

การสร้างแฟ้มข้อมูล และตัวอย่างข้อมูล
ให้ใช้ text editor สร้างแฟ้มข้อมูลต่อไปนี้
เพื่อเป็นฐานข้อมูลให้โปรแกรม perl มาสืบค้นข้อมูลไปแสดง
โดยแต่ละบรรทัดประกอบด้วย 2 ส่วน คือ ส่วน 3 ตัวอักษรและ และส่วนข้อมูล
3 ตัวอักษรแรกถือเป็น รหัสประจำข้อมูล ดูเอานะครับ น่าจะไม่ยาก
ตัวอย่างชุดนี้ มี 3 หัวข้อคือ ประวัติหนูฝนดาว สัตว์เลี้ยงในบ้าน และของเล่นของหนู
สังเกตุได้ว่า หัวข้อแรก ขึ้นต้นด้วย A01
หัวข้อที่สอง ขึ้นต้นด้วย A02
หัวข้อสุดท้าย ขึ้นต้นด้วย A03
ถ้าท่านนำไปใช้จริงจะขึ้นต้นด้วยอะไรก็ได้ แต่จัดให้เป็นระเบียบก็แล้วกัน
ข้างล่างนี้เป็นข้อมูลที่เก็บอยู่ในแฟ้ม plclopt.dat
A01หนูชื่อฝนดาว เป็นพี่ใหญ่ มีน้องอีก 2 คนชื่อพีพี กับมาหยา
A01โตขึ้นหนูอยากเป็นคนดี มีครอบครับที่ดี และอยากให้พ่อแม่เห็นลูก ๆ ของหนู
A02สัตว์ในบ้านของหนูมีหลายชนิด แต่หนูไม่ค่อยได้ให้อาหารพวกเขา
A02ที่หนูคุ้นเคยก็มี จิ้งจก ยุง แมลงวัน พวกนี้หนูเห็นตัวบ่อย ๆ
A02ที่หนูไม่เห็นตัวก็มีหนู เพราะหนูจะวิ่งบนเพดานเกือบทุกคืน
A02ไม่รู้ว่าพวกเขาวิ่งจับอะไรกัน เสียงดังลั่นเลย ถ้าปะป๊ะ กับมะม๊ะ ก็บอกให้ทำใจ
A02ส่วนไก่ ตาเขาก็ชอบเลี้ยง เห็นว่าเอาไปชนกัน แต่มักจะเปลี่ยนหน้าบ่อย ๆ
A02เห็นว่าตัวไหนแพ้ก็ไม่ได้กลับมา ตัวไหนชนะ ก็จะอยู่กับหนูนานหน่อย
A02หนูไม่ค่อยกล้าเข้าใกล้ เพราะหน้าตาไก่ เขาดูดุดุ นะคะ
A03ของเล่นหนูมีไม่เยอะค่ะ มีแค่ตะกร้าเดียว ปะป๊ะ ได้ของแถมจาก 7-11 หรือ KFC
A03ก็จะมาหย่อนลงตะกร้าให้หนู แต่หนูยังเล่นไม่ค่อยเป็นส่วนใหญ่หนูชอบที่อมได้
A03เพราะหนูเล่นเป็นไม่กี่อย่างเช่น ซ่อนหา กับอมของเล่นเท่านั้นเอง


การเขียนหน้าเว็บสำหรับเลือกข้อมูล
การเขียนคำสั่ง form ในแฟ้ม html มีตัวอย่างการเขียนดังนี้
ซึ่งตัวอย่างนี้จะใช้แฟ้ม 3 แฟ้มเก็บไว้ใน directory perl ทั้งหมด
แฟ้ม 3 แฟ้มที่ต้องใช้คือ plclopt.htm plclopt.dat plclopt.pl
<form name=calldata action="/perl/plclopt.pl" method=post>
<input type=checkbox name=A01>ประวัติหนูฝนดาว<br>
<input type=checkbox name=A02>สัตว์เลี้ยงในบ้าน<br>
<input type=checkbox name=A03>ของเล่นของหนู<br>
<input type=submit name=calldata value=CallData>
<input type=reset value=Cancel>
</form>

นำคำสั่งข้างบนนี้มาเขียนใช้งาน ได้ผลดังนี้ และใช้งานได้จริง (ทดลองดูก็ได้นะครับ)
ประวัติหนูฝนดาว
สัตว์เลี้ยงในบ้าน
ของเล่นของหนู

โปรแกรมที่ใช้เลือกข้อมูล
ตัวอย่าง perl นี้ผมใช้ชื่อ plclopt.pl เก็บในห้อง /perl
ถ้านำไปทดสอบจะใช้ชื่ออะไรก็ได้นะครับ แต่ต้องสัมพันธ์กับที่มีในส่วนของ form ที่เขียนใน html
หลักการของโปรแกรม คือ
- เปิดแฟ้ม plclopt.dat
- อ่านทีละบรรทัด
- นำแต่ละบรรทัดไปตรวจกับที่รับมาจาก form
- ถ้าตรงกัน และเป็นตัวแรก ก็พิมพ์บรรทัดแรกให้เข้ม
- ถ้าตรงกัน และเป็นไม่เป็นตัวแรก ก็พิมพ์ธรรมดา
- หมดข้อมูล ก็ถือว่าเรียบร้อย
copy โปรแกรมข้างล่างนี้ไปใส่ใน notepad แล้ว save ในชื่อ plclopt.pl
#!/usr/local/bin/perl
$filename = join '',"/data1/hm/thaiall.com","/perl/plclopt.dat";
print "Content-type: text/html\n\n";
print'<html><head><title>ผลการเรียกข้อมูล</title></head>',"\n";
print'<body><font face="microsoft sans serif" size=0>';
open(FNST,"<$filename");
@keepr = <FNST>;
close(FNST);
$cntr = @keepr;
$gsys = <STDIN>;
@pairs = split(/&/, $gsys);
$h = 0;
$nkeep = "none";
foreach $pair (@pairs) {
   	@n = split /=/,$pair;
   	if ($n[0] ne $nkeep)  {
   		$h = 0;
		$nkeep = $n[0];
	}
   for $i (0 .. $cntr-1) {
   	if ($n[0] eq substr($keepr[$i],0,3)) {
	   if ($h eq 0)
	   {print "<hr><b>",substr($keepr[$i],3,length($keepr[$i])),"</b><br>";}
	   else
	   {print substr($keepr[$i],3,length($keepr[$i])),"<br>";}
	   $h = 1;
	}
   }
}
print'</font></body></html>';

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

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