制作技術ー３ 双方向通信 ： CGIシステムと環境変数 情報スキル活用 第９週 制作技術ー３ 双方向通信 ： CGIシステムと環境変数
ｸﾗｲｱﾝﾄとｻｰﾊﾞｰとの間の双方向通信の考え方 クライアント サーバー 閲覧ソフトから URLを送信して <html>から</html>までを取出し Webページとして表示 HTML文書返信 この中に入力要求があれば データ入力 データ送信(cgi) データ受取 処理 Perl 言語 PHP言語 処理結果 (ＨＴＭＬ文書) 応答内容表示 入力に対する応答
サーバーの中に双方向通信のプログラムを保存しておきWebページから支持があったときに動作させます。 作業手順 双方向通信の体験 サーバーの中に双方向通信のプログラムを保存しておきWebページから支持があったときに動作させます。 作業手順 ① 双方向通信のプログラムを起動させるWebページ作成 ファイル名は cgi_test.html とし サーバー内の /pj16***/seisaku/ にアップロードする。 ② 起動の対象となる双方向通信のプログラムを作成 ファイル名は cgi_test.cgi とし、 フォルダcgiを作り、その中に保存し、 フォルダcgiをサーバーの /pj16***/ にアップロードする。 ③ 双方向通信のプログラムを起動させるWebページへのリンク リンクボタンは、index.html内の左ウインドウに作る。
cgiプログラムを起動するHTML文書 ファイル名 ： cgi_test.html 保存場所 ： フォルダ seisaku の中 <!DOCTYPE html> <html> <head> <title>cgiプログラム起動テスト</title> </head> <body> <form action="../cgi/cgi_test.cgi"> <input type="submit" name="button" value="起動確認" /> </form> </body> </html>
起動確認のメッセージを出力するcgiのプログラム ファイル名 ： cgi_test.cgi をフォルダcgiの中に保存 フォルダ cgi は www.isc.chubu.ac.jp/pj16***/ にロード ロードしたら、 cgi_test.cgi に実行権（他人）を設定 #!/usr/bin/perl # print "Content-type: text/html\n\n"; print "<html>\n"; print "<head>\n"; print "<title>test_cgi</title>\n"; print "<</head>\n"; print "<body>\n"; print "プログラムが起動されました。\n"; print "</body>\n"; print "</html>\n"; exit(0);
index.html にcgi_test.html (cgi起動HTML文書)へのリンクを追加 <div class="left"> <h3>大学・学部・学科紹介</h3> <a href="CU.html">中部大学</a><br /> <a href=" P.html">現代教育学部</a><br /> <a href="PJ.html">児童教育学科</a><br /><br /> <h4>双方向通信</h4> <a href="cgi_test.html">cgi起動テスト</a><br /> </div>
index.html にcgi_test.html へのリンクが追加された画面
cgiプログラムを起動するページが開かれたとき pj16***/seisaku/cgi_test.html ・クリックすれば、フォルダcgiの中のプログラムcgi_test.cgi が起動される。
起動確認のメッセージを出力するcgiのプログラムが起動されたとき pj16***/cgi/cgi_test.cgi?button=%8BN%93%AE%8Am%94F cgi_test.html で タグ <input type="submit" name="button" value="起動確認" /> で button という名前に「起動確認」をデータとしてわたす。 起動確認 ： %8BN%93%AE%8Am%94F と変換されている。