บทที่ 4 CGI เบื้องต้น
CGI สคริปต์
การเขียน CGI ด้วยภาษา Perl เราสามารถทําได้ โดยการเพิ่มรายละเอียดลงไปในโปรแกรม
เพื่อทําให้โปรแกรมสามารถทํางานเป็น CGI ได้ สิ่งแรกที่คุณจะต้องใส่ไว้ในบรรทัดที่
2 ของการเขียนโปรแกรม CGI คือ การบอกรูปแบบของเอกสาร ดังนี้
#!/usr/bin/perl
print "Content-type:text/html\n\n";
ในข้างต้น จะเห็นว่า เราได้ใส่บรรทัด "Content-type:text/html\n\n"
เป็นการกําหนด MINE Header เพื่อบอกให้บราวเซอร์ทราบว่า ไฟล์นี้เป็นไฟล์แบบใด
และในการเขียน CGI ด้วยภาษา C บนยูนิกส์ คุณก็สามารถทําได้โดยใช้ลักษณะเดียวกัน
แต่คุณไม่ต้องเขียน #!/usr/bin/perl ไว้ในบรรทัดแรก เพราะภาษา C จะต้องถูกคอมไพล์เพื่อนําไปใช้
ไม่เหมือนกับภาษา Perl ที่สามารถนําไปใช้ได้ทันที ตัวอย่างนี้ เป็น CGI ที่เขียนด้วยภาษา
C บนยูนิกส์
#include<stdio.h>
void main(){
printf("Content-type:text/html\n\n");
}
การรัน CGI ใน account
ในที่นี้ต้องขอยกตัวอย่าง account ที่เป็นแบบ shell
หรือยูนิกส์ เพราะ server ที่ comsc2 นี้ เป็นยูนิกส์
เมื่อคุณล็อกอินมาที่ account ของคุณแล้ว (เช่นการ
telnet) ให้คุณตรวจสอบดูก่อนว่า มีตัวแปลภาษา Perl อยู่ในระบบหรือเปล่า โดยพิมพ์คําสั่ง
whereis perl ที่เชลล์
หากในระบบมีตัวแปลภาษา Perl ระบบจะแสดงพาธออกมาให้
(ถ้าไม่มีคุณควรถามไปยังผู้คุมระบบ) จากนั้น ให้คุณถามไปยังผู้ดูแลระบบของคุณก่อนว่า
คุณจะสามารถใช้ CGI บน Server นี้ได้อย่างไร นามสกุลของไฟล์จะต้องเป็นอะไร
และจะเก็บไว้ในไดเร็กทอรี่ใด
ที่ Comsc2 ที่ devman เก็บโฮมเพจนี้อยู่ เป็น RedHat
5.0 และสามารถใช้ CGI ภายใน Account ตนเองได้ โดยการเปลี่ยนนามสกุลของไฟล์ให้เป็น
.cgi และเปลี่ยนโหมดของไฟล์ให้เป็น 755 ไม่ต้องนําไปเก็บไว้ใน cgi-bin
โปรแกรมแรกที่เราจะทดลองกัน ให้คุณพิมพ์โปรแกรมต่อไปนี้
โดยใช้โปรแกรม vi บนยูนิกส์ และเซฟในชื่อ easy.cgi ลงใน account
ของคุณเอง ในไดเร็คทอรี่ public_html หรือไดเร็กทอรี่ที่ผู้คุมระบบกําหนด
จากนั้น ให้คุณเปลี่ยนโหมดของไฟล์นี้ ให้เป็๋น 755
โดยใช้คําสั่งดังนี้
จากนั้นให้คุณทดลองใช้บราวเซอร์ ชี้ไปที่ URL ของโฮมเพจของคุณ
เช่น http://domain.edu/~account/easy.cgi เป็นต้น
ลองดูผลการรันโปรแกรม easy.cgi ที่ http://203.155.93.40/devman/easy.cgi
หากคุณใช้วิธีการดังที่ผมได้เสนอไปในบทที่ 2 คือ
การจําลองเครื่องตัวเองให้เป็น Web Server ก็ให้คุณพิมพ์โปรแกรม easy.cgi
ในข้างต้นเหมือนกัน แต่ให้คุณเซฟเป็น .pl แทน .cgi และเก็บไว้ในไดเร็กทอรี่
c:\httpd\cgi-bin เวลาคุณต้องการจะรัน cgi คุณก็พิมพ์ URL โดยใช้ IP Address
ของตนเอง หรือ Computer Name เช่น http://1.1.1.1/cgi-bin/easy.pl และในตัวอย่างอื่น
ๆ ก็เช่นเดียวกัน
ฟอร์มและการ Submit
เมื่อคุณสร้างฟอร์มขึ้นมา 1 ฟอร์ม การ Submit ฟอร์มก็คือการส่งข้อมูลที่อยู่ภายในฟอร์มนั้น
ไปประมวลผลโดยโปรแกรมบน Server ด้วยโปรแกรม CGI ซึ่งคุณจะต้องกําหนดชื่อโปรแกรม
CGI ลงใน action และกําหนด method ให้เป็น POST เพราะเป็นการส่งข้อมูลไปให้กับโปรแกรม
CGI ดังนี้
<form method=POST action="easy.cgi">
เมื่อมีการ Submit ข้อมูลที่อยู่ภายในฟอร์มจะ ถูกนําไปเก็บไว้ในตัวแปรที่ชื่อ
CONTENT_LENGTH ซึ่งเป็นตัวแปรตัวหนึ่งบน Server ดังตัวอย่างของโปรแกรม CGI
ต่อไปนี้
โปรแกรม easy1.cgi
#!/usr/bin/perl
print "Content-type : text/html\n\n";
print "<body bgcolor='white'>\n";
print "<h4>read data from
CONTENT_LENGTH</h4><p>";
read( STDIN , $buffer , $ENV{'CONTENT_LENGTH'}
);
print "<h4>data is $buffer</h4><p>";
จากโปรแกรมข้างต้น บรรทัดที่ 5 เป็นการอ่านข้อมูลจากตัวแปร
CONTENT_LENGTH มาเก็บไว้ในตัวแปร $buffer โดยใช้คําสั่ง read โดยจะอ่านจาก
Standard Input (STDIN) จากตัวแปรระบบ CONTENT_LENGTH เราจะเขียนคําสั่ง read
ดังนี้
read(
STDIN , ตัวแปรที่จะเก็บค่าเอาไว้ , $ENV{ ตัวแปรระบบ } );
ให้คุณเข้าใจว่า บรรทัดนี้จะอ่านข้อมูลที่ได้จากการ
Submit มาเก็บไว้ในตัวแปรที่ต้องการ และบรรทัดที่ 6 เป็นการแสดงข้อมูลภายในตัวแปร
CONTENT_LENGTH ฟอร์มต่อไปนี้ เป็นการทดสอบ easy1.cgi
<form method=POST action="easy1.cgi">
จากฟอร์มในข้างต้น ให้คุณลองใส่ข้อความใด ๆ ลงในช่องและกดปุ่ม
Submit ดูสิครับ.....
เมื่อคุณกดปุ่ม Submit ข้อความที่คุณพิมพ์ลงไปนั้น
จะถูกนําไปเก็บไว้ในตัวแปร CONTENT_LENGTH ที่อยู่ใน Server โดยข้อความที่คุณพิมพ์ลงไปในช่อง
โปรแกรม CGI จะแสดงออกมาในรูป
ชื่อของอุปกรณ์ในฟอร์ม=ข้อความที่พิมพ์เข้าไป
จากในตัวอย่าง จะเห็นว่าชื่อของช่องรับข้อความ (name)
ก็คือ "text" เพราะฉะนั้น เมื่อคุณกดปุ่ม Submit ข้อความภายในตัวแปร CONTENT_LENGTH
ก็จะเก็บ
จะเห็นได้ว่า ข้อความที่อยู่ในตัวแปร CONTENT_LENGTH
จะแบ่งออกเป็น 2 ส่วนใหญ่ ๆ คือ ส่วนที่เป็นชื่อและส่วนที่เป็นข้อมูล โดยส่วนที่เป็นเครื่องหมายบวก
(+) ก็คือ การเว้นวรรคนั่นเอง ถ้ามีอุปกรณ์ภายในฟอร์มมากกว่า 1 ตัวเช่น มีช่องรับข้อความ
2 ช่อง ข้อมูลภายในตัวแปร CONTENT_LENGTH จะถูกแบ่งด้วยเครื่องหมาย &
เข่น
<form method=POST action="easy1.cgi">
ให้คุณทําความเข้าใจ โดยการทดลองพิมพ์ข้อความลงในช่องรับข้อความและ
Submit ดู หากคุณมีอุปกรณ์ในฟอร์มมาก มันก็จะเรีงต่อ ๆ กันไปด้วยเครื่องหมาย
& และตรงไหนที่เป็นช่องว่าง มันก็จะแทนด้วยเครื่องหมาย + นั่นเอง
การผ่านข้อมูลที่ได้จากฟอร์มลงในตัวแปร
เราสามารถเก็บข้อมูลที่ได้จากการ Submit ฟอร์ม
มาเก็บไว้ในตัวแปรแบบ Associative Array เพื่อให้ง่ายต่อการใช้งาน เราจะใช้โค๊ดโปรแกรมดังนี้
sub pasteform {
read(STDIN,$buffer,$ENV{'CONTENT_LENGTH'});
@pairs = split(/&/,$buffer);
foreach $pair (@pairs){
($name,$value) = split(/=/,$pair);
$value =~ tr/+/ /;
$value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C",hex($1))/eg;
$value =~ s/~!/~!/g; $FORM{$name}=$value;
}
}
เราจะเขียนโค๊ดโปรแกรมนี้ ไว้ที่ส่วนท้ายของโปรเแกรม
CGI เป็น procedure หนึ่ง ซึ่งจะต้องเรียกเพื่ออ่านข้อมูลจาก CONTENT_LENGTH
มาเก็บไว้ในตัวแปร @FORM
โปรแกรม form.cgi ต่อไปนี้ ใช้สําหรับแสดงผลข้อมูลภายในฟอร์ม
โปรแกรม form.cgi
#!/usr/bin/perl
print "Content-type:text/html\n\n";
&pasteform;
print "name is $FORM{'name'}<p>";
print "email is $FORM{'email'}<p>";
sub pasteform {
read(STDIN,$buffer,$ENV{'CONTENT_LENGTH'});
@pairs = split(/&/,$buffer);
foreach $pair (@pairs){
($name,$value) = split(/=/,$pair);
$value =~ tr/+/ /;
$value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C",hex($1))/eg;
$value =~ s/~!/~!/g; $FORM{$name}=$value;
}
}
ดังตัวอย่างต่อไปนี้
<form method=POST action="form.cgi">
เมื่อคุณกดปุ่ม Submit คุณก็จะได้ข้อความที่อยู่ในช่อง
name และ email เก็บอยู่ในตัวแปร $FORM{'name'} และ $FORM{'email'} ตามลําดับ
คุณสามารถนําเอาวิธีการนี้ไปใช้งานในโปรแกรม CGI ของคุณได้ โดยให้คุณก๊อปปี้
sub pasteform นี้ลงไปในโปรแกรม CGI ของคุณ จากนั้น คุณก็เรียก &pasteform
ก่อน ข้อมูลก็จะถูกนํามาเก็บไว้ในตัวแปร $FORM{"ชื่อของอุปกรณ์"} โดยอัตโนมัติ
ดังเช่นโปรแกรม form.cgi นั้นเอง