3. การรับข้อมูลเข้า CGI
คุณจะได้เรียนรู้
- การรับข้อมูลเข้าโปรแกรม CGI โดยใช้แบบฟอร์มและลิ้งค์
- การดำเนินการกับข้อมูลที่ได้จากแบบฟอร์มและลิ้งค์
การให้แบบฟอร์มคู่กับ CGI เป็นของคู่กันเหมือนนมข้นหวานกับปลาท่องโก๋ เพราะเป็นวิธีการ ที่จะทำให้ได้ข้อมูล มาดำเนินการในโปรแกรม นอกจากนั้น ก็สามารถใช้ลิ้งค์ ใช้ cookies ใช้ session ก็ได้เช่นกัน แต่ในบทเรียนนี้ จะแสดงวิธีการใช้แบบฟอร์มและลิ้งค์เท่านั้น ด้วยถือว่าเป็นวิธีมาตรฐานสากล
ข้อมูลที่ถูกส่งมาที่ CGI โดยใช้ลิ้งค์ หรือแบบฟอร์มที่ใช้ method=get จะมีลักษณะมาเป็นสายของข้อความ
เช่น name=suwat&email=webmaster@thaitop.com&age=98&city=Bangkok ซึ่งสายข้อความนี้เรียกว่า Querystring
ดังนั้นการที่จะนำข้อมูลออกมาใช้จะต้องทำการแยกข้อมูลออกจากกัน แล้วจะใช้อะไรแยก ? เนื่องจากงานเหล่านี้มีการเรียกใช้บ่อยๆ จึงมีผู้คิดค้นและเขียนโปรแกรมไว้ให้ เอาเป็นว่าเราสบายไม่ต้องมาเขียนโปรแกรมเอง โปรแกรมที่เขาเขียนไว้นี้จะเรียกว่า ไลบราลี่ (library) ซึ่งตัว library นี้ก็จะเป็นไฟล์ธรรมดานี่แหล่ะครับโดยทั่วไปที่นิยมจะตั้งชื่อว่า cgi-lib.pl แค่ code ที่อยู่ภายใน จะแบ่งการทำงานไว้หลายๆอย่าง ซึ่งงานแต่ละอย่าง (Routines) มักจะมีผู้เขียนโปรแกรมด้วย Perl ใช้กันบ่อยๆเช่นการ อ่านข้อมูลจากแบบฟอร์มหรือลิ้งค์ การพิมพ์ </body></html> เป็นต้น เวลาใช้งานก็เรียก library ขึ้นมาก่อน จากนั้นก็เรียกชื่อของงานที่ต้องการขึ้นมา รายละเอียดการใช้ library จะมีสอน แต่ตอนนี้เราตัด code เอามาเฉพาะงานที่ทำการแยกสายข้อมูลที่ถูกส่ง มาด้วยลิ้งค์หรือแบบฟอร์ม code ที่ตัดมาจะมีลักษณะดังนี้ครับ
sub FormInput
{
local (*qs) = @_ if @_;
if ($ENV{'REQUEST_METHOD'} eq "GET") # อ่านตัวแปรระบบว่าข้อมูลถูกส่งมาด้วยวิธี GET หรือ POST
{
$qs = $ENV{'QUERY_STRING'}; #ถ้าส่งมาด้วย GET ตั้งตัวแปรเก็บไว้ว่านี่คือข้อมูลที่ต้องนำไปแยก
}
elsif ($ENV{'REQUEST_METHOD'} eq "POST") #แต่ถ้าส่งมาด้วย POST
{
read(STDIN,$qs,$ENV{'CONTENT_LENGTH'}); # ตั้งตัวแปรเก็บไว้ว่านี่คือข้อมูลที่ต้องนำไปแยก
}
@qs = split(/&/,$qs); #จากบันทัดต่อไปนี้เริ่มทำการแยกโดยใช้คำสั่ง foreach และสร้างตัวแปรในการเรียกใช้
foreach $i (0 .. $#qs)
{
$qs[$i] =~ s/\+/ /g;
$qs[$i] =~ s/%(..)/pack("c",hex($1))/ge;
($name,$value) = split(/=/,$qs[$i],2);
if($qs{$name} ne "")
{
$qs{$name} = "$qs{$name}:$value";
}
else
{
$qs{$name} = $value;
}
}
}
การใช้งานคุณต้อง copy code ดังกล่าว ทั้งหมดไปใส่ไว้ในโปรแกรมที่คุณต้องการ จากนั้นทำการเรียกชื่อ ซึ่งชื่อคือ FormInput แล้วจึงใช้งาน การอ่านข้อมูลต่อไป ดังตัวอย่างนี้ ผมตั้งชื่อว่า readinput.pl ซึ่งการใช้จะใช้คู่กับแบบฟอร์มคุณสามารถ download ทั้งสองไฟล์นี้มาทดลองในเครื่องของคุณได้เลย โดยให้เรียกแบบฟอร์มขึ้นมาก่อน แล้วกรอกข้อมูลให้ครบ คลิ้กส่งดูนะครับ
ไฟล์ readinput.pl มี code และคำอธิบายดังนี้ครับ
print "Content-type:text/html\n\n";
print "<html><body>";
&FormInput(*input); #เรียกใช้ก่อนการทำงานใดๆ ต้องเรียกชื่อให้ถูกด้วยนะครับ(ดูส่วนที่เป็นสีแดง)
$whoami = $input{'name'}; # ตั้งตัวแปรก่อนการนำค่าออกมาใช้ก็ได้ครับ
print "ชื่อ - $whoami<br>";
print "อีเมล์ - $input{'email'}<br>"; #หรือจะนำค่ามาใช้โดยตรงแบบนี้ก็ได้ครับ
print "อายุ - $input{'age'}<br>";
print "จังหวัด - $input{'city'}<br>";
print "<hr>";
print "</body></html>";
# อ่านข้อมูลจากฟอร์มหรือ querystring จากลิ้งค์
sub FormInput
{
local (*qs) = @_ if @_;
if ($ENV{'REQUEST_METHOD'} eq "GET")
{
$qs = $ENV{'QUERY_STRING'};
}
elsif ($ENV{'REQUEST_METHOD'} eq "POST")
{
read(STDIN,$qs,$ENV{'CONTENT_LENGTH'});
}
@qs = split(/&/,$qs);
foreach $i (0 .. $#qs)
{
$qs[$i] =~ s/\+/ /g;
$qs[$i] =~ s/%(..)/pack("c",hex($1))/ge;
($name,$value) = split(/=/,$qs[$i],2);
if($qs{$name} ne "")
{
$qs{$name} = "$qs{$name}:$value";
}
else
{
$qs{$name} = $value;
}
}
}
4.
ฟอร์มขั้นสูงและการใช้ Sub
คุณจะได้เรียนรู้
- การใช้ และการจัดการข้อมูลที่ได้จากแบบฟอร์ม
- การใช้
sub หรืองานย่อยในโปรแกรม
เมื่อเรารับข้อมูลจากแบบฟอร์มมาแล้วปรากฎว่าคนกรอกส่งแบบฟอร์มว่างๆมาให้เรา
คงหัวเสียน่าดู ในบทนี้ผมจะสอนวิธีตรวจสอบและบังคับให้ผู้กรอกข้อมูลต้องกรอกแบบฟอร์ม
ตามที่เราต้องการ ถึงจะทำอย่างอื่นต่อไปได้ โดยก็ยังใช้พื้นฐานความรู้เดิมคือการ
ใช้คำสั่งพื้นฐาน if-else บวกกับเงื่อนไขต่างๆ เรามาดูกันเลยนะครับ
if ($input{'name'} eq "") { #ในนี้กำหนดว่าถ้าไม่กรอกชื่อในแบบฟอร์มให้แจ้งเตือนผู้กรอก
print "<h2>Error!</h2>\n";
print "กลับไปกรอกชื่อซะดีๆ";
}
ถ้ามีต้องการตรวจสอบหลายๆอย่างให้ทำแบบนี้ครับ
if ($input{'name'} eq "" || $input{'email'}
eq "" || $input{'age'} eq "") { #ใช้เครื่องหมาย || แทนหรือ
print "<h2>Error!</h2>\n";
print "ยังไม่ได้กรอกช่องใหนรีบกลับไปกรอกเลยนะ";
}
จะเห็นว่าการตรวจสอบดังตัวอย่างด้านบนผู้กรอกจะต้องย้อนกลับไปกรอกแบบฟอร์มใหม่
เรามาทำใหม่โดยใช้คำสั่ง sub ซึ่งเป็นคำสั่งของ perl ซึ่งจะทำให้ผู้ใช้ไม่ต้องย้อยกลับไปกรอกอีก
การใช้ sub จะเหมือนกับการแทรก โปรแกรมหรือหน้าย่อยใส่ไว้ในโปรแกรมหลัก มาดูกันเลยครับ
ทั้งวิธีการตั้ง sub และการเรียกใช้
validate.pl
&FormInput(*input); #เปิดการเรียก sub ชื่อ FormInput เพื่ออ่านข้อมูลเข้าโปรแกรม
&NeedForm
unless $input{'form'}; #
ถ้าไม่มี form ให้โปรแกรมวิ่งไปแปลคำสั่งใน sub ชื่อ NeedForm
&NeedName
unless $input{'name'}; #
ถ้าไม่มี name ให้โปรแกรมวิ่งไปแปลคำสั่งใน sub ชื่อ NeedName
&NeedEmail
unless $input{'email'}; #
ถ้าไม่มี email ให้โปรแกรมวิ่งไปแปลคำสั่งใน sub ชื่อ NeedEmail
#=====================
ถ้าเรียกใช้ครั้งแรกให้แสดงหน้าที่อยู่ใน sub นี้
sub
NeedForm
{
print "Content-type:text/html\n\n";
print <<Form;
<HTML>
<HEAD>
<TITLE>กรอกข้อมูลให้ด้วยครับ</TITLE>
</HEAD>
<body>
กรอกข้อมูลให้ด้วยครับ<br>
<form action=\"/cgi-bin/validate.pl\" method=\"POST\">
ชื่อ: <input type=\"text\" name=\"name\"><br>
อีเมล์: <input type=\"text\" name=\"email\"><br><br>
<input type=\"HIDDEN\" name=\"form\" value=\"form\">
<input type=\"SUBMIT\" value=\" ส่ง \">
</form>
</body></html>
Form
exit;
#คำสั่งนี้จะทำให้โปรแกรมไม่สนใจสิ่งที่อยู่ด้านล่างนี้
ง่ายๆคือไม่แปลโปรแกรมต่อ
}
#=====================
ถ้าไม่กรอกชื่อให้แสดงหน้าที่อยู่ใน sub นี้
sub
NeedName {
print "Content-type:text/html\n\n";
print <<Name;
<HTML>
<HEAD>
<TITLE>ใส่ชื่อด้วยครับ</TITLE>
</HEAD>
<body>
ใส่ชื่อด้วยครับ<br>
<form action=\"/cgi-bin/validate.pl\" method=\"POST\">
ชื่อ: <input type=\"text\" name=\"name\"><br>
อีเมล์: <input type=\"text\" name=\"email\" value=\"$input{'email'}\"><br><br>
<input type=\"HIDDEN\" name=\"form\" value=\"form\">
<input type=\"SUBMIT\" value=\" ส่ง \">
</form>
</body></html>
Name
exit;
}
#=====================
ถ้าไม่กรอกอีเมล์ให้แสดงหน้าที่อยู่ใน sub นี้
sub
NeedEmail
{
print "Content-type:text/html\n\n";
print <<Email;
<HTML>
<HEAD>
<TITLE>ใส่อีเมล์ด้วยครับ</TITLE>
</HEAD>
<body>
ใส่อีเมล์ด้วยครับ<br>
<form action=\"/cgi-bin/validate.pl\" method=\"POST\">
ชื่อ: <input type=\"text\" name=\"name\" value=\"$input{'name'}\"><br>
อีเมล์: <input type=\"text\" name=\"email\" value=\"$input{'email'}\"><br><br>
<input type=\"HIDDEN\" name=\"form\" value=\"form\">
<input type=\"SUBMIT\" value=\" ส่ง \">
</form>
</body></html>
Email
exit;
}
#=====================
ถ้ากรอกครบตามที่ต้องการให้แสดงหน้าต่อไปนี้
print "Content-type:text/html\n\n";
print "<html><body>";
$whoami = $input{'name'};
print "ขอบคุณที่กรอกครบทุกช่องในฟอร์ม<br>";
print "ชื่อ - $whoami<br>";
print "อีเมล์ - $input{'email'}<br>";
print "<hr>";
print "</body></html>";
exit;
#=====================
อ่านข้อมูลจากฟอร์มหรือ querystring จากลิ้งค์
sub
FormInput
{
local (*qs) = @_ if @_;
if ($ENV{'REQUEST_METHOD'} eq "GET")
{
$qs = $ENV{'QUERY_STRING'};
}
elsif ($ENV{'REQUEST_METHOD'} eq "POST")
{
read(STDIN,$qs,$ENV{'CONTENT_LENGTH'});
}
@qs = split(/&/,$qs);
foreach $i (0 .. $#qs)
{
$qs[$i] =~ s/\+/ /g;
$qs[$i] =~ s/%(..)/pack("c",hex($1))/ge;
($name,$value) = split(/=/,$qs[$i],2);
if($qs{$name} ne "")
{
$qs{$name} = "$qs{$name}:$value";
}
else
{
$qs{$name} = $value;
}
}
}
หมายเหตุ ใน code
ของไฟล์นี้ผมจะใส่ sub ที่แสดงวันและเวลาลงไปด้วย ที่ไม่ใส่ให้ดูในนี้เนื่องจากมันจะยาวเกินไป
ลองดูเองนะครับ
ถ้าคุณดูแล้วก็ต้องเข้าใจแน่ๆผมเชื่ออย่างนั้น ถ้าจะให้ดีก็ต้องลองแก้ลองใส่อย่างอื่นเพิ่มเติมลงไป
การใช้ sub ไม่ได้ยากเย็นอะไร ถ้าคุณถูกใจ sub อันใหนคุณก็เพียงนำไปวางให้ถูกที่ถูกทางหน่อย
เดี๋ยวก็ใช้ได้เอง อย่างเช่น sub ที่แสดงวันและเวลา ถ้าคุณชอบก็สามารถ copy
ไปแปะในโปรแกรมของคุณได้เลย ส่วนการเรียกก็ดูได้จากตัวอย่างที่ผมทำไว้ให้ดู
ถ้าในแบบฟอร์มของคุณใช้ checkbox
ด้วยคุณสามารถถอดค่าที่ผู้ใช้เลือกออกมาได้ด้วย code ตัวอย่างนี้
<input type="checkbox" name="red" value=1> Red<br>
<input type="checkbox" name="green" value=1>
Green<br>
<input type="checkbox" name="blue" value=1>
Blue<br>
<input type="checkbox" name="gold" value=1>
Gold<br>
@colors = ("red","green","blue","gold");
foreach $x (@colors) {
if ($FORM{$x} == 1) {
print "คุณเลือกสี $x.\n";
}
}
เช่นเดียวกันถ้าใช้ radio คุณสามารถลองถอดออกมาได้ด้วย
code นี้
<input type="radio" name="color" value="red">
Red<br>
<input type="radio" name="color" value="green">
Green<br>
<input type="radio" name="color" value="blue">
Blue<br>
<input type="radio" name="color" value="gold">
Gold<br>
print "คุณเลือกสี: $input{'color'}<br>\n";
หรือจะประยุกต์เล่นให้เป็นแบบนี้ก็ได้ จะทำให้สามารถเปลี่ยนสีพื้นหลังของหน้าเว็บเพจได้
%colors = ("red","ff0000",
"green","00ff00",
"blue","0000ff",
"gold","ffcc00");
print "<html><head><title>เปลี่ยนสีได้ด้วย</title></head>\n";
print "<body bgcolor=$colors{$input{'color'}}>\n";
print "<h2>คุณเลือกส: $FORM{'color'}</h2><br>\n";
print "</body></html>";
by thaitop.com