2018/11/11 CGI程式設計進階 (for UNIX Perl) 國立中央大學電算中心 陳慶彥
主題 身份認證功能製作 檔案上傳功能製作 計數器製作 Perl+MySQL 國立中央大學電算中心 陳慶彥 2018/11/11 原始的HTML語言是設計用來展現靜態的資料，它讓人使用一種簡單的語法展現出豐富的多媒體資料，就像廣告看板一樣。由於WWW具有相當大的商業用途，因此推出後大受歡迎。可是單純的靜態展示好像缺少了什麼? 如果使用者需要的資料具有時效性，必需時常更新，這時該怎麼辦呢? 又或者你想留下使用者的資料，讓你的網頁能跟使用者達到互動的效果，這時又該如何? 由於上述種種需求，於是就誕生了CGI這東東。 CGI是Common Gateway Interface的縮寫，中文翻做『共通閘道介面』。它是一種標準介面程式，能讓你的網頁跟WWW server溝通，達到跟使用者互動的效果。而且透過CGI程式，可以讓你動態的產生網頁，秀出server上的最新資料。當你link到一個CGI物件時，你取回的文件並非是一份靜態資料，而是一個藉由程式動態產生的HTML資料流。傳回來的資料也許分分秒秒都在更改，或者針對使用者的特殊查詢而有不同的反應，例如股票市場行情等等。簡單來說，CGI程式就是能夠動態產生WWW網頁，並讓一般使用者經由WWW取用現存在傳統資訊系統內的資料。 首先，你得認清一個事實：如果資料是天天更新，你絕對不可能寫一個很大的HTML文件包含所有的這些更新資料。萬一放在WWW上的資料是分分秒秒都在變動的，那麼利用程式自動根據資料產生HTML文件顯然是你唯一的選擇。第二，CGI程式可以根據使用者輸入的要求自動產生HTML格式的資料。因為輸入資料是由WWW server負責接收，並非CGI程式本身，故得找出一個有效率的方法，來做使用者輸入參數和產生HTML文件程式間的溝通工作。 CGI本身制訂的標準有提到可以藉由環境變數來達成這個目的，而且CGI程式也有能力取得現存在各類資料庫裡的資料。這就是為什麼我們稱之為Common Gateway Interface，因為CGI程式通常就像橋樑或閘道一般，溝通著非WWW系統和WWW server (這和下面所說的Web server、HTTP server是一樣的，都是指一個架有HTTPd的伺服器)。 舉個例子來說，你是某家證券公司的大老闆，你的公司裡已經有一個相當完善的資料庫，裝滿了過去所有的股票價格資料，現在你想經由WWW提供這些資料給你的顧客們做參考，但是你的資料庫系統根本就不懂HTTP這種格式，這時你就需要一個閘道程式，當作股票價格資料庫和HTTP server間的橋樑通道，於是CGI程式就誕生了。它可以取得HTTP使用者送來的查詢指令，轉換成現存資料庫可以了解的指令，用以取得資料後，再將資料轉換為HTML格式，最後再經由HTTP server傳回給使用者，秀在使用者的瀏覽器上。 根據上述這些要求，CGI程式的確可以用任何程式語言來撰寫，只要該語言具有讀寫檔案的能力且該資料檔可被存取即可。不過這也表示寫程式時需要注意安全性的問題，以免資料被使用者有意無意的破壞，否則到時候就真的欲哭無淚了。 國立中央大學電算中心 陳慶彥
2018/11/11 身份認證功能製作 國立中央大學電算中心 陳慶彥
2018/11/11 身份認證功能製作 實作1- login.htm <HEAD><meta charset=big5><TITLE>CGI密碼登錄範例</TITLE></HEAD> <BODY bgcolor=white><p align="center"><br> <font size="+2">新增帳號</font> <FORM METHOD="POST" ACTION= "http://ccy.dd.ncu.edu.tw/~test/passwd.cgi?add"> <p align="center">帳號: <INPUT SIZE=30 NAME="username"><BR> 密碼 : <INPUT type=password SIZE=30 NAME="passwd"><BR> email : <INPUT SIZE=30 NAME="email"><BR> <INPUT TYPE="submit" VALUE="送出資料"> <INPUT TYPE="reset" VALUE="清除資料"> </FORM> 國立中央大學電算中心 陳慶彥
身份認證功能製作 實作1- login.htm (cont) <HR> 2018/11/11 身份認證功能製作 實作1- login.htm (cont) <HR> <p align="center"><font size="+2">系統登錄</font> <FORM METHOD="POST" ACTION="http://ccy.dd.ncu.edu.tw/~test/passwd.cgi"> <p align="center">帳號 : <INPUT SIZE=30 NAME="username"><BR> 密碼 : <INPUT type=password SIZE=30 NAME="passwd"><BR> <INPUT TYPE="submit" VALUE="送出資料"> <INPUT TYPE="reset" VALUE="清除資料"> </FORM> </BODY> 國立中央大學電算中心 陳慶彥
身份認證功能製作 實作1- passwd.cgi #!/usr/bin/perl 2018/11/11 身份認證功能製作 實作1- passwd.cgi #!/usr/bin/perl $passwdfile="/home/test/public_html/userpasswd"; &ReadForm(*FORM); if ($ENV{QUERY_STRING} eq "add") { &adduser; } else { &checkuser; } exit(0); #詳見次頁完整的原始碼 國立中央大學電算中心 陳慶彥
2018/11/11 身份認證功能製作 範例程式畫面 國立中央大學電算中心 陳慶彥
2018/11/11 身份認證功能製作 範例程式畫面 國立中央大學電算中心 陳慶彥
2018/11/11 檔案上傳功能製作 國立中央大學電算中心 陳慶彥
2018/11/11 檔案上傳功能製作 Form 的 參 考 寫 法 <FORM ENCTYPE="multipart/form-data" ACTION="upload.cgi" METHOD=POST> File to upload: <INPUT TYPE="file" NAME="filename"> <INPUT TYPE="submit" VALUE="SEND"> </FORM> 國立中央大學電算中心 陳慶彥
檔案上傳功能製作 Perl 的 CGI 程 式 參 考 寫 法 upload.cgi #!/usr/bin/perl use CGI; 2018/11/11 檔案上傳功能製作 Perl 的 CGI 程 式 參 考 寫 法 upload.cgi #!/usr/bin/perl use CGI; use Fcntl; $q = new CGI; print $q->header; my $uploaddir = "tmp"; if ($file = $q->param('filename')) { $fname = $file; $fname =~ s/\\/\//g; $fname =~ s/\.\.//g; if (($pos = rindex($fname, '/')) != -1) { $fname = substr($fname, $pos+1); } 國立中央大學電算中心 陳慶彥
檔案上傳功能製作 Perl 的 CGI 程 式 參 考 寫 法(cont) 2018/11/11 檔案上傳功能製作 Perl 的 CGI 程 式 參 考 寫 法(cont) print "<h2>File: $fname</h2>"; if (length($fname) > 0) { $fname = sprintf "%s/%s", $uploaddir, $fname; open (FN, "> $fname"); print "<pre>"; while (<$file>) { print; print FN $_; } print "</pre>"; close FN; } print $q->end_html; 國立中央大學電算中心 陳慶彥
2018/11/11 計數器製作 國立中央大學電算中心 陳慶彥
計數器製作-Form 的 參 考 寫 法 實作2- counter.htm <html><body> 2018/11/11 計數器製作-Form 的 參 考 寫 法 實作2- counter.htm <html><body> <script src="http:/ccy.dd.ncu.edu.tw/~test/counter.cgi"> </script> </body></html> 國立中央大學電算中心 陳慶彥
計數器製作- Perl 的 CGI 程 式 參 考 寫 法 2018/11/11 計數器製作- Perl 的 CGI 程 式 參 考 寫 法 實作2- counter.cgi #! /usr/bin/perl $cgiurl="http://ccy.dd.ncu.edu.tw/~test/counter.cgi"; #online.cgi的URL $imgurl="http://ccy.dd.ncu.edu.tw/~test"; #img目錄的URL $cntdir="/home/test/public_html"; $cntfile="counter.dat"; if ($ENV{'QUERY_STRING'} eq "") { } else { $cntfile=$ENV{'QUERY_STRING'}.".dat"; 國立中央大學電算中心 陳慶彥
計數器製作- Perl 的 CGI 程 式 參 考 寫 法 2018/11/11 計數器製作- Perl 的 CGI 程 式 參 考 寫 法 實作2- counter.cgi(cont) #讀取counter $FileName="< ".$cntdir."/".$cntfile; print "$FileName"; if (open (FILE,"$FileName")){ @LINES=<FILE>; close(FILE); $LINES[0]=~ s/\"|\s//g ; if (not ($LINES[0] eq "") ){ $people=$LINES[0]; } else { $people="0"; } $people++; } else{ $people=1;} 國立中央大學電算中心 陳慶彥
計數器製作- Perl 的 CGI 程 式 參 考 寫 法 2018/11/11 計數器製作- Perl 的 CGI 程 式 參 考 寫 法 實作2- counter.cgi(cont) #將資訊寫入檔案 $FileName="> ".$cntdir."/".$cntfile; open(OUTP, "$FileName") || die "記錄檔案開啟錯誤!!\n"; print OUTP "$people"; close OUTP; print "Content-type: text/html\n\n"; $text=$people; for($i=0;$i<=9;$i++){ $text =~ s/$i/<td><img src=\"$imgurl\/count_$i\.gif\"><\/td>/g; } 國立中央大學電算中心 陳慶彥
計數器製作- Perl 的 CGI 程 式 參 考 寫 法 2018/11/11 計數器製作- Perl 的 CGI 程 式 參 考 寫 法 實作2- counter.cgi(cont) $text="<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\"> <tr><td><img src=\"$imgurl\/count_left\.gif\"> </td>“.$text."<td><img src=\"$imgurl\/count_right\.gif\"></td> </tr></table>"; print "document.write(\'$text\');"; exit; 國立中央大學電算中心 陳慶彥
2018/11/11 計數器製作 範例畫面 國立中央大學電算中心 陳慶彥
2018/11/11 Perl+MySQL 安裝MySQL http://www.mysql.com/ 國立中央大學電算中心 陳慶彥
Perl+MySQL Install DBI-1.13 2018/11/11 Perl+MySQL Install DBI-1.13 [root@fax /tmp]# zcat dbi-1.13.tar.gz | tar xvf – [root@fax /tmp]# cd DBI-1.13 [root@fax DBI-1.13] perl Makefile.PL [root@fax DBI-1.13] make [root@fax DBI-1.13] make test [root@fax DBI-1.13] make install 國立中央大學電算中心 陳慶彥
Perl+MySQL Install msql-mysql-modules-1.2210 2018/11/11 Perl+MySQL Install msql-mysql-modules-1.2210 [root@fax /tmp]# zcat msql-mysql-modules-1.2210.tar.gz | tar xvf – [root@fax /tmp]# cd Msql-Mysql-modules-1.2210 [root@fax Msql-Mysql-modules-1.2210] perl Makefile.PL [root@fax Msql-Mysql-modules-1.2210]make [root@fax Msql-Mysql-modules-1.2210]make test [root@fax Msql-Mysql-modules-1.2210]make install 國立中央大學電算中心 陳慶彥
Perl+MySQL MySQL操作範例 [s8940@ccy public_html]$ mysql -u s8940 test 2018/11/11 Perl+MySQL MySQL操作範例 [s8940@ccy public_html]$ mysql -u s8940 test Reading table information for completion of table and column names You can turn off this feature to get a quicker startup with -A Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 742 to server version: 3.22.30 Type 'help' for help. mysql> 國立中央大學電算中心 陳慶彥
Perl+MySQL MySQL操作範例(cont) mysql> help; MySQL commands: 2018/11/11 Perl+MySQL MySQL操作範例(cont) mysql> help; MySQL commands: help (\h) Display this text ? (\h) Synonym for `help' clear (\c) Clear command connect (\r) Reconnect to the server. Optional arguments are db and host exit (\q) Exit mysql. Same as quit go (\g) Send command to mysql serverquit (\q) Quit mysql status (\s) Get status information from the server use (\u) Use another database. Takes database name as argument Connection id: 742 (Can be used with mysqladmin kill) 國立中央大學電算中心 陳慶彥
Perl+MySQL MySQL操作範例(cont) mysql> show tables; +----------------+ 2018/11/11 Perl+MySQL MySQL操作範例(cont) mysql> show tables; +----------------+ | Tables in test | | s8940 | | testac | 2 rows in set (0.00 sec) 國立中央大學電算中心 陳慶彥
Perl+MySQL MySQL操作範例(cont) mysql> CREATE TABLE s8941 2018/11/11 Perl+MySQL MySQL操作範例(cont) mysql> CREATE TABLE s8941 -> (CreateDate DATETIME , -> StudentName char(50) , -> StudentID char(10) , -> Address char(100) , -> Birthday DATE ); Query OK, 0 rows affected (0.01 sec) mysql> show tables; +----------------+ | Tables in test | | s8940 | | s8941 | | testac | 3 rows in set (0.01 sec) 國立中央大學電算中心 陳慶彥
Perl+MySQL MySQL操作範例(cont) 2018/11/11 Perl+MySQL MySQL操作範例(cont) mysql> insert into s8941 values('2000/07/18 15:12:01','陳慶彥','87001', -> '中壢市五權里上山座屋38號','1988/01/01'); Query OK, 1 row affected (0.00 sec) mysql> select * from s8941; +-------------------------+----------------+-------------+-----------------------------------+--------------+ | CreateDate | StudentName | StudentID | Address | Birthday | +-------------------------+-----------------+-----------+------------------------------------+--------------+ | 2000-07-18 15:12:01 | 陳慶彥 | 87001 | 中壢市五權里上山座屋38號 | 1988-01-01 | 1 row in set (0.01 sec) 國立中央大學電算中心 陳慶彥
Perl+MySQL MySQL操作範例(cont) 2018/11/11 Perl+MySQL MySQL操作範例(cont) mysql> insert into s8941 values('2000/07/18 15:19:01','陳二','87002', -> '中壢市五權里上山座屋38號','1977/01/01'); Query OK, 1 row affected (0.00 sec) mysql> select * from s8941; +-------------------------+----------------+-------------+-----------------------------------+--------------+ | CreateDate | StudentName | StudentID | Address | Birthday | +-------------------------+-----------------+-----------+------------------------------------+--------------+ | 2000-07-18 15:12:01 | 陳慶彥 | 87001 | 中壢市五權里上山座屋38號 | 1988-01-01 | | 2000-07-18 15:19:01 | 陳二 | 87002 | 中壢市五權里上山座屋38號 | 1977-01-01 | 國立中央大學電算中心 陳慶彥
Perl+MySQL MySQL操作範例(cont) 2018/11/11 Perl+MySQL MySQL操作範例(cont) mysql> update s8941 set Address='金門縣金沙鎮光前村陽翟1號' where StudentID='87002'; Query OK, 1 row affected (0.00 sec) mysql> select * from s8941; +-------------------------+----------------+-------------+-----------------------------------+--------------+ | CreateDate | StudentName | StudentID | Address | Birthday | +-------------------------+-----------------+-----------+------------------------------------+--------------+ | 2000-07-18 15:12:01 | 陳慶彥 | 87001 | 中壢市五權里上山座屋38號 | 1988-01-01 | | 2000-07-18 15:19:01 | 陳二 | 87002 |金門縣金沙鎮光前村陽翟1號| 1977-01-01 | 國立中央大學電算中心 陳慶彥
Perl+MySQL MySQL操作範例(cont) mysql> quit 2018/11/11 Perl+MySQL MySQL操作範例(cont) mysql> delete from s8941 where StudentID='87002'; Query OK, 1 row affected (0.00 sec) mysql> select * from s8941; +-------------------------+----------------+-------------+-----------------------------------+--------------+ | CreateDate | StudentName | StudentID | Address | Birthday | +-------------------------+-----------------+-----------+------------------------------------+--------------+ | 2000-07-18 15:12:01 | 陳慶彥 | 87001 | 中壢市五權里上山座屋38號 | 1988-01-01 | mysql> quit 國立中央大學電算中心 陳慶彥
Perl+MySQL Perl連結MySQL執行資料的存取 use DBI; use strict; 2018/11/11 Perl+MySQL Perl連結MySQL執行資料的存取 use DBI; use strict; $dbh = DBI->connect(“DBI:mysql:資料庫”,“帳號”,”密碼“); $sth = $dbh->prpare($statement); $sth->execute; $sth->finish; $dbh->disconnect; 國立中央大學電算中心 陳慶彥
Perl+MySQL 實作3 – create_table.cgi #!/usr/bin/perl use DBI; use strict; 2018/11/11 Perl+MySQL 實作3 – create_table.cgi #!/usr/bin/perl use DBI; use strict; my $dbh; if ($dbh=DBI->connect("DBI:mysql:test","s8940","") ){ print "連結資料庫:test OK!\n"; }else { print "無法連結資料庫:test!"; exit(0); } 國立中央大學電算中心 陳慶彥
Perl+MySQL 實作3 – create_table.cgi (cont) 2018/11/11 Perl+MySQL 實作3 – create_table.cgi (cont) my $sth=$dbh->prepare(" DROP TABLE s8940 "); if ($sth->execute ){ $sth->finish; print "表格:s8940存在資料庫:test之中,刪除表格:s8940 成功\!\n"; }else { print "表格:s8940不存在資料庫:test之中,刪除表格:s8940 失敗\!\n"; } 國立中央大學電算中心 陳慶彥
Perl+MySQL 實作 3– create_table.cgi (cont) 2018/11/11 Perl+MySQL 實作 3– create_table.cgi (cont) my $sth=$dbh->prepare("CREATE TABLE s8940 ( CreateDate DATETIME , StudentName char(50) , StudentID char(10) , Address char(100) , Birthday DATE) "); 國立中央大學電算中心 陳慶彥
Perl+MySQL 實作3 – create_table.cgi (cont) if ($sth->execute){ 2018/11/11 Perl+MySQL 實作3 – create_table.cgi (cont) if ($sth->execute){ print "表格:s8940在資料庫:test上create OK!\n"; } else{ print "表格:s8940在資料庫:test上create 失敗!: $dbh->errstr\n"; $sth->finish; 國立中央大學電算中心 陳慶彥
Perl+MySQL 實作3 – create_table.cgi (cont) 2018/11/11 Perl+MySQL 實作3 – create_table.cgi (cont) my $sth=$dbh->prepare("INSERT INTO s8940 VALUES (‘2000/07/18 15:12:01’,‘陳慶彥’,‘87001’,‘中壢市五權里上山 座屋38號','1988/01/01') "); if ($sth->execute){ print "表格:s8940新增資料 OK!\n"; }else{ print "表格:s8940新增資料失敗!: $dbh->errstr\n"; } $sth->finish; $dbh->disconnect; exit(0); 國立中央大學電算中心 陳慶彥
Perl+MySQL 實作4 – select_table.cgi #!/usr/bin/perl use DBI; use strict; 2018/11/11 Perl+MySQL 實作4 – select_table.cgi #!/usr/bin/perl use DBI; use strict; my $dbh; if ($dbh=DBI->connect("DBI:mysql:test","s8940","") ){ print "連結資料庫:test OK!\n"; } else { print "無法連結資料庫:test!"; exit(0); } 國立中央大學電算中心 陳慶彥
Perl+MySQL 實作4 – select_table.cgi (cont) 2018/11/11 Perl+MySQL 實作4 – select_table.cgi (cont) my $sth = $dbh->prepare("SELECT * FROM s8940"); if ($sth->execute ){ my $table = $sth->fetchall_arrayref; my($i, $j); for $i ( 0 .. $#{$table} ) { for $j ( 0 .. $#{$table->[$i]} ) { print "$table->[$i][$j]\t"; } print "\n"; } 國立中央大學電算中心 陳慶彥
Perl+MySQL 實作4 – select_table.cgi (cont) } else { 2018/11/11 Perl+MySQL 實作4 – select_table.cgi (cont) } else { print "表格:s8940查詢資料失敗\!\n"; $sth->finish; $dbh->disconnect; exit; 國立中央大學電算中心 陳慶彥
測驗-檔名(examsql.cgi) 請利用Perl+MySQL設計一個可供使用者登入資料與顯示資料的CGI程式 國立中央大學電算中心 陳慶彥