サーバサイドプログラミング 1. Form 処 理 コンテンツメディアプログラミング 演 習 Ⅱ 2014 年 菊 池, 斉 藤
1. URL (Uniform Resource Locator) n http://www.asahi.com:80/politics/index.html 1 2 3 4 5 1. プロトコル (http, https, ftp, mailto) 2. ドメイン 名 (FQDN) ホストの 識 別 子,IPアドレスも 可 能, 大 小 文 字 区 別 なし 3. ポート 番 号 (ディフォルトは 80 番 ) 4. パス 名 (ドキュメントルートからの 相 対 パス) 5. ファイル 名 ( 省 略 したら index.html ) n 次 の 二 つのURLは 同 じ 結 果 となる q http://news.yahoo.co.jp/flash q http://182.22.63.189/flash
2. HTTP Request n GETコマンド q Htmlファイルの 要 求 q 1. リクエスト» パス 名» バージョン q 2. オプション» 日 付» 利 用 可 能 なオブジェク ト,コード, 符 号 化 q 3. CR LF (オプションの 終 わりを 示 す 空 行 ) GET /politics/index.html HTTP/1.1 Accept: text/html,application/xhtml +xml,application/ xml;q=0.9,image/webp,*/*;q=0.8 Referer: http://windy. meiji.ac.jp/ ~kikn/index.html Accept-Language: ja Accept-Encoding: gzip, deflate User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) Host: www.asahi.com:80 Connection: Keep-Alive (CR LF)
3. HTMLファイルデータベース n http://www.asahi.com/politics/index.html q ファイルシステム(フォルダ)の 階 層 構 造 / ドキュメントルート a.php こちらは 外 部 (ウェブ)から 見 えない httpd.conf aa.gif politics Index.html updates 01.html 02.html
4. HTTP Response n レスポンス 1. ステータス Ver Status Message 2. オプション MIMEタイプ, 日 付 など 3. CRLF ( 空 行 ) 4. エンティティボディ HTMLデータ HTTP/1.1 200 OK Date: Mon, 24 Jun 2012 10:16:41 GMT Server: Apache/2.2.15 (CentOS) Last-Modified: Mon, 24 Jun 2012 10:16:19 GMT ETag: "1eb6c4-44-3d16f173" Accept-Ranges: bytes Content-Length: 68 Connection: close Content-Type: text/html <html> <head> </head> <body> <h1> Hello World </h1> </body></html>
演 習 1. webサーバの 起 動 n PC 上 に,ウェブサーバを 起 動 して, 自 己 紹 介 ページ cv.html をウェブサーバ 経 由 で 読 めるようにせよ. q 自 分 のPC q 人 のサーバにアクセスせよ. q 別 紙 サーバの 設 定 方 法 参 照
ウェブサーバの 起 動 n 1. 次 のフォルダを 用 意 せよ. q X: \webserver (マイドキュメント 下 ) q X: \webserver\htdocs (ドキュメントルート) q X: \webserver\conf\httpd.donf (webからdlする) q X: \webserver\conf\php.ini q X: \webserver\conf\startup.bat webserver htdocs cv.html style.css conf httpd.conf php.ini startup.bat
ブラウザでのアクセス n アクセスするURL q http://localhost:8080/cv.html» localhost は 常 に 自 分 のPCを 指 す. q http://127.0.0.1:8080/cv.html q http://133.26.xx.yy:8080/cv.html» 133.26.XX.YY はPCのIPアドレス.
動 的 なページを 作 る
PHPの 基 礎 n PHP q 動 的 なHTMLの 生 成 用 に 設 計 されたスクリプト 言 語.( 詳 しくは 来 週 学 ぶ) q 拡 張 子 は.php q HTMLの 中 で,タグ <?php ~?> を 埋 め 込 み,~(phpプログラム)を 実 行 できる. q 文 法 はJava (processing)に 近 い.
動 的 なページの 例 n rand.php <?php print "<h1>". rand(1,6). "</h1>";?> q コマンドプロンプトから 実 行.» X:\webserver\htdocs> php rand.php q ブラウザから 実 行 http://localhost:8080/ rand.php» 何 度 かリロードしてみよ q PHPの 文 法 詳 細 は 来 週 学 ぶ.» print 文 字 列 ; 文 字 列 の 出 力.» rand( 初 期 値, 最 終 値 ) [1,6]の 乱 数» 文 字 1. 文 字 2 文 字 列 の 連 結
サーバ 側 で 実 行 する 仕 組 み n CGI (Common Gateway Interface) q JSP, Servlet (Java) q PHP, Perl, Python, Ruby rand.php http://localhost/rand.php localhost PHP 実 行 結 果 (HTML) rand.php 入 力 ファイル
ブラウザからデータを 送 る n 1. HTMLファイル q form.html <html><head> <meta charset='utf- 8'> </head> <body> 入 力 して <form action="form.php" method = "get"> <input type = "text" name = "a" value="ここに"/> <br> </form> </body></html> n 2. 実 行 ファイル PHP q form.php <?php $b = $_GET["a"]; print "Input is (". $b. ")<br>";?>
Formタグの 形 式 n Formタグ q <Form method="get" または "post" 送 信 形 式 action= 実 行 するCGIスクリプト /> q <input type="text", "radio", "checkbox", "submit" などの 入 力 形 式 name=ラベル. value=ディフォルト 値. size = 入 力 幅 など />» それ 以 外 の 形 式 に,<select>, <textarea> など q </form>
情 報 の 入 力 と 出 力 n 情 報 の 受 け 取 り q GETの 場 合 $_GET[ラベル];» POSTの 場 合 $_POST[ラベル]; q それぞれフォームの 入 力 値 が 入 る.$_GETな どは 連 想 配 列 ( 次 週 で 学 ぶ) n 出 力 q ブラウザで 表 示 可 能 な HTML 文 を 標 準 出 力 に 出 力 する.(phpを 直 接 実 行 すると 画 面 に 出 る)
Submitボタン n Text Formが 一 つしかない 時 q 入 力 して Enterキーを 押 すとサーバにデータ が 送 信 される. n Text Formが 複 数 ある 時 q 明 示 的 に 送 信 を 引 き 起 こすためのボタン <input type="submit" value = " 送 信 "> q 入 力 をすべて 初 期 化 するボタン <input type="reset" value = "クリア">
指 定 されたサイズに 拡 大 する (1/2) n 1. HTMLファイル q iruka.html ( 送 信 側 ) <!DOCTYPE html> <html lang="jp"> <head> <meta charset='utf- 8'> <title> イルカ </title> </head> <body> <img src="iruka.gif"> <br> <form action="iruka.php" method = "get"> サイズ <input type = "text" name = "a" value="300" > <input type = "submit" value = " 拡 大 "> </form> </body> </html>
指 定 されたサイズに 拡 大 する (2/2) n 2. PHPファイル q iruka.php ( 受 信 側 ) <html lang="jp"> <head> <meta charset='utf- 8'> <title> イルカ </title> </head> <body> <img width= <?php print $_GET["a"]?> src="iruka.gif"> <br> サイズ = <?php print $_GET["a"]?> </body> </html>
繰 返 し 入 力 する 例 ( 参 考 ) n iruka2.php <?php $size = $_GET["a"]; echo <<<_END <html lang="jp"> <head> <meta charset='utf- 8'> <title> イルカ </title> </head> <body> <img width=$size src="iruka.gif"> <br> <form action="iruka2.php" method = "get"> サイズ <input type = "text" name = "a" value="300" /> <br> </form> </body> </html> _END;?> <<<マーク マーク が 来 るまでの 行 を 出 力 する (ヒアドキュメント)
実 行 例 のページ n http://www.isc.meiji.ac.jp/~kikn/cmp/
演 習 2 n iruka.php をもとにして, 幅 と 高 さを 指 定 で きる iruka3.htmlと iruka3.php を 書 け. q iruka3.php 単 体 でhtmlを 省 略 してもよい q %で 倍 率 を 指 定 するにはどうしたらよいか.
様 々なスタイル
GETとPOST n GET q URLの 中 に 埋 め 込 み GET /form.php?a=gettext HTTP/1.1 n POST q 独 立 したhttpヘッダー POST /form- post.php HTTP/1.1 ( 空 行 ) b=post+message
様 々な 入 力 1 n テキストエリア textarea q 複 数 行 にまたがる 文 書. <html> <head> <meta charset='utf- 8'> </head> <body> <form action="form- post.php" method = "post"> <textarea name = "b" cols="40" rows="5"> Here is an area to be filled in. </textarea><br> <input type="submit" value="go"> </form> </body> </html>
受 け 取 るPHPスクリプト n form-get.php q ラベル "b"で 指 定 された 値 を 括 弧 の 中 に 表 示. <html> <head> <meta charset='utf- 8'> <title> Form Tag </title> </head> <body> <H1> Formタグのテスト </h1> 入 力 文 字 ( <?php print $_GET["b"]?> ) </body> </html> q ( 以 降 の 例 (radioなど) でも 利 用 )
様 々な 入 力 2 n ラジオボタン radio q 複 数 の 選 択 肢 を 切 替 える. <html> <head> <meta charset='utf- 8'> </head> <body> <pre> <form action="form- get.php" method = "get"> 現 象 数 理 <input type="radio" name="b" value="ms"> 先 端 メディアサイエンス <input type="radio" name="b" value="fms" checked="checked"> ネットワークデザイン <input type="radio" name="b" value="nd" > <input type="submit" value=" 申 請 "> </form> </pre> </body> </html>
様 々な 入 力 3 ( 参 考 ) n チェックボックス checkbox q 重 複 を 許 した 選 択 ( 今 日 は 略 ) <html> <head> <meta charset='utf- 8'> </head> <body><pre> <form action="form- post2.php" method = "post"> 現 象 数 理 <input type="checkbox" name="b[]" value="ms"> 先 端 メディアサイエンス <input type="checkbox" name="b[]" value="fms" checked="checked"> ネットワークデザイン <input type="checkbox" name="b[]" value="nd" > <input type="submit" value=" 申 請 "> </form> </body> </html>
演 習 3 n form-textarea.htmlなどを 参 考 にして, 履 歴 書 情 報 を 入 力 すると 表 形 式 にしてくれる mycv.html と mycv.php を 書 け. q 新 たなラジオボタン( 例, 性 別 )と 新 たな textarea ( 例, 私 の 弱 点 )を1つづつ 追 加 せよ.
例 外 処 理 (1/2) n 空 の 入 力 を 処 理 する 例 form2.html <html><head> <meta charset='utf- 8'> </head> <body> <form action="form2.php" method = "get"> 氏 名 住 所 </form> </body> </html> <input type = "text" name = "a" /> <br> <input type = "text" name = "b" /> <br> <input type="submit" value=" 送 信 ">
例 外 処 理 (2/2) n form2.php ( 受 信 側 ) <html> <head> <meta charset='utf- 8'> <title> Form Tag </title> </head> <body> <H1> Formタグのテスト </h1> 氏 名 ( <?php if($_get["a"] === "" ){ print "No Name"; }else{ print $_GET["a"]; }?> ) <br> $a === $b は 変 数 $aと$b の 値 と 型 が 等 しいか 検 査. (== は 値 のみ) 住 所 ( <?php print ($_GET["b"]? $_GET["b"] : "No Address")?> ) <br> </body> </html> 三 項 演 算 子? ( 式 )? 真 の 返 値 : 偽 の 返 値
演 習 4. n 米 ドルと 日 本 円 を 換 算 するページ convert.html と convert.php を 作 れ. q 1USD = 109.27 円 (2014 年 9 月 )とする. q 例 ) 100USD を 日 本 円 に. print "100ドルは". 100 * 109.27. " 円 です"
まとめ n ウェブサーバ Apache httpd を 起 動 し,そこに 配 置 するhtmlファイルの 最 上 位 フォルダを ( )という. n サーバ 側 でプログラムを 実 行 する 仕 組 みを ( )といい,PHPはその 代 表 的 なツールで ある. n クライアントからサーバへデータを 送 るhtmlの タグを( )といい,text, checkboxなど 様 々なスタイルがある.