第5章 CGIアプリケーションへデータを渡す


  1. データを渡す方式とGET,POST

    データを渡す方式・METHOD
    例えば,ネットショップで買い物をするときを考えましょう。

    まず購入したい商品を選びます。ページ上に用意されたチェックボックスにチェックなどを入れます。

    次に送信ボタンまたは,購入ボタンをクリックします。(実際には,支払方法や商品の最終確認のページが途中に入ります。)

    購入したい商品情報や購入者の情報などが,サーバに送られます。

    実際にはサーバ側に用意したCGIアプリケーションに,購入したい商品の情報などが渡されます。

    ここで,この購入したい商品の情報などをデータと呼ぶことにします。

    このデータの渡し方にはいくつか方法があり,それ(運び方)をMETHODと呼びます。

    代表的なMETHODに,GETPOSTの2つがあります。

    ここでは,GETを利用したデータの受け渡しを実践します。

    1. まずは,次のように以前作成した L:\cgi-bin\index.html ファイルをxyzzyで開き,赤字の部分のように訂正しましょう。
      <html>
      <head>
      <title>
      アンケートフォーム
      </title>
      </head>
      <body bgcolor="skyblue">
      アンケートに答えてください。<br>
      <form action="getDATA.cgi" method="GET">   @
      Your Name<input type="text" size="10" name="uname"><br>  A
      Your Country<select name="ucountry">  B
      <option value="Tochigi">栃木県
      <option value="Gunma">群馬県
      <option value="Ibaraki">茨城県
      <option value="Saitama">埼玉県
      <option value="Chiba">千葉県
      <option value="Tokyo">東京都
      <option value="Kanagawa">神奈川県
      <option value="Yamanashi">山梨県
      </select><br>
      Your Sex<input type="radio" name="usex" value="male">男 <input type="radio" name="usex" value="female">女<br>  C
      <input type="submit" value="送信">
      </form>



      </body>
      </html>

      @ <form>タグのmethodオプションで,METHODGET(特に指定しない場合はGETが初期値)に指定しています。

      A,B,C 入力フィールドには,必ずnameオプションを使用し,適当な名前を付けなければいけません

    2. 次に,このデータを受け取る getDATA.cgi というCGIアプリケーションを作成します。

      このgetDATA.cgiの処理内容は,
      1. GET METHODでデータを受け取る。
      2. 受け取ったデータを,特に何も処理せずにそのまま画面にHTTPコンテンツとして出力する。

      の2つだけです。

      以下の手順で進めてください。

      1. xyzzyを起動し,次のソースを入力します。


      2. 入力したら,getDATA.cgiという名前で L:\cgi-bin に保存します。
        (※保存の際に,改行コードをUNIXに合わせ,LFに指定することを忘れてはいけません。)

      3. インターネットエクスプローラから,511で作成した各自のcgi-binフォルダのindex.htmlのアドレスを指定して開きます。

      4. ここで名前等の情報を適当に入力し,送信ボタンをクリックします。
        (※日本語の処理機能を持たせていないので日本語は入力しないようにします。)

      5. 開いたページで,つぎのような形式でデータが送られていることが確認できました。
        変数名@=データ@&変数名A=データA&変数B=データB....

    このようにインターネット上に渡される情報は,&を区切り文字として一度に複数の情報を渡すことができます。

    ですので,一度に送られた複数の情報は,区切り文字の&で切り分けて,変数名をキーワードにした連想配列変数に整理する手法がよく用いられます。

    GETとPOSTの違い
    ここでは,2つMETHOD GETとPOSTの違いを表で説明します。

    GET POST
    一度に送ることができるデータ長(文字数)の制限 あり(環境に依存。半角で256文字程度) なし
    データを送る手法 アドレス(URL)に続けて,?マークの後に引数として渡す。ホームページ上のフォームを利用しなくても,直接URLにベタ打ちすることで,データを送信できる。 formタグの入力フィールドを通じて渡す。要するに,ホームページ上のフォーム以外からは送ることが困難。
    格納される場所 環境変数のQUERY_STRINGに格納される。 標準入力STDIN変数に格納される。
    メリットとデメリット 簡単にデータを渡すことができるが,送れるデータ長に制限があるため,大きなデータを送れない。 データ長に制限がないため,大きなデータを送れるが,逆に気をつけないと悪意のあるユーザから大量のデータを送りつけられることで,サーバに大きな負担を与えられる危険がある。

  2. データを処理する

    取得したデータを&で切り離す
    Perlの組み込み関数,splitとforeach関数を利用して,区切り文字&でデータを切り分けて,見やすく改良しましょう。

    split関数とforeach関数については,昨年度のperlの授業で学んでいます。


    perlのテキスト10ページで復習しましょう。 

【演習1】正方形の1辺の長さを入力し、その面積を求めるシステムを作る。
作成手順
  1. ユーザーから1辺の長さを入力させるHTMLページを用意。>> menseki.html
    データを渡す方式(Method)はGET。L:\web_local\cgi-bin に保存。
    menseki.html 中の?????の部分が問題になる。


  2. データを受け取り、正方形の面積を求めるプログラムを用意。>> square.cgi
    square.cgi 中の?????の部分が問題になる。

【演習2】半径を入力し、円の面積を求めるシステムを作る。
作成手順
  1. ユーザーから半径の長さを入力させるHTMLページを用意。>> circle.html
    データを渡す方式(Method)はGET。L:\web_local\cgi-bin に保存。
    circle.html 中の?????の部分が問題になる。


  2. データを受け取り、円の面積を求めるプログラムを用意。>> circle_area.cgi
    circle_area.cgi 中の?????の部分が問題になる。

【演習3】円すいの体積を求めるシステムを作る。
作成手順
  1. ユーザーから底面の円の半径の長さと円すいの高さを入力させるHTMLページを用意。>> drill.html
    データを渡す方式(Method)はGET。L:\web_local\cgi-bin に保存。
    drill.html 中の?????の部分が問題になる。


  2. データを受け取り、円すいの体積を求めるプログラムを用意。>> drill.cgi
    drill.cgi 中の?????の部分が問題になる。