2015 年 度 Webシステムプログラミング a PHPの 基 礎 (2)
講 義 内 容 前 回 の 提 出 課 題 の 解 答 例 復 習 データを 送 信 するための HTML (フォーム) PHPによるフォームデータの 処 理 2
( 前 回 ) 提 出 課 題 課 題 1: 1から100までの 乱 数 で 作 成 した2つの 整 数 の 足 し 算 を 表 示 するWebページを 作 成 しましょう. 乱 数 を 作 成 する 関 数 : rand( 範 囲 の 最 小 値, 範 囲 の 最 大 値 ) ファイル 名 : add.php アクセスURL: http://localhost/php01/add.php 備 考 : ブラウザ 再 読 み 込 み( F5キー)をするたびに 式 と 結 果 が 変 わる ことを 確 認 しましょう.
<!DOCTYPE html> <html lang="ja"> <head> <meta "charset=utf-8"> <title> 課 題 1</title> </head> <body> <h2> 課 題 1</h2> <?php $val1 = rand(1,100); $val2 = rand(1,100); echo $val1. "+". $val2. "=". ($val1+$val2);?> </body> </html> add.php
( 前 回 ) 提 出 課 題 課 題 2: 九 九 の 表 において 3の 付 く 数 字 太 は 字 ( 例 :3 13 23 ) 4の 倍 数 は 赤 字 ( 例 :4 8 12 ) 3の 付 く 数 字 で,かつ,4の 倍 赤 数 字 はで 太 字 になるようなWebページを 作 成 してみましょう. 実 習 2で 作 成 した kuku.php ファイルをコピーして 名 前 を 変 更,および 内 容 を 少 し 変 更 する. ファイル 名 : kuku2.php アクセスURL: http://localhost/php01/kuku2.php
( 略 ) for( $i=1; $i<=9; $i++ ){ // 繰 り 返 し 処 理 echo "<tr><td bgcolor='#99ff99'>". $i. "</td>"; for( $j=1; $j<=9; $j++ ){ // 繰 り 返 し 処 理 (2 重 ループ) $atai = $i * $j; // かけ 算 を 結 果 を 計 算 し 変 数 $ataiに 代 入 echo "<td>"; if( $atai % ){ 4 == 0 echo "<font color='red'>"; } else { echo "<font color='black'>"; } if($atai%10 == 3) ($atai>=30 ){ && $atai<=39) echo "<b>". $atai. "</b>"; } else { echo $atai; } もしくは echo "</font></td>"; } echo "</tr> n"; } // ここまでがPHPのプログラムです?> ( 略 ) if( strpos($atai,"3") ){!== fal kuku2.php
( 前 回 ) 提 出 課 題 課 題 3: 課 題 1を 改 造 し,1から100までの 乱 数 で 作 成 した2 の 整 数 の 四 則 演 算 のどれか(これも 乱 数 を 使 う)の 式 と 結 果 を1 0 個 表 示 するWebページを 作 成 しましょう. ファイル 名 : arithmetic.php アクセスURL: http://localhost/php01/arithmetic.php 備 考 : ブラウザ 再 読 み 込 み(F5キー)をするたびに 式 と 結 果 が 変 わる ことを 確 認 しましょう.
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title> 課 題 3</title> </head> <body> <h2> 課 題 3</h2> <?php for($i=0;$i<10;$i++){ echo "<p>"; $val1 = rand(1,100); $val2 = rand(1,100); $ope = rand(1,4); if( $ope == 1 ){ echo $val1. "+". $val2. "=". ($val1+$val2); }elseif( $ope == 2){ echo $val1. "-". $val2. "=". ($val1-$val2); }elseif( $ope == 3){ echo $val1 ".. $val2 ". "=". ($val1*$val2); }else{ echo $val1 ".. $val2 ". "=". ($val1/$val2); } echo "</p>"; }?> </body> </html> arithmetic.php
( 前 回 ) 提 出 課 題 課 題 4( 上 級 問 題 ): 現 在 の 月 のカレンダーを 表 示 Web する ページを 作 成 しましょう. 次 ページのプログラムの???を 考 える. ファイル 名 : calendar.php アクセスURL: http://localhost/php01/calendar.php
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title> 課 題 4</title> </head> <body> 前 回 のプログラムでは <h2> 課 題 4</h2> <p> <?php $year = date("y"); 現 在 の 年 を 取 得 // $month = date("n"); 現 在 の 月 を 取 得 // $ndays = date("t"); 現 在 の 月 の 日 数 を 取 // 得 前 回 のプログラムから 変 更 ( 前 回 の 課 題 内 容 だと,どちらでも 動 くが, 今 回 の 後 半 にある 提 出 課 題 でも 使 うので 変 更 しておきます) // 現 在 月 の 始 めの 日 の 曜 日 を 整 数 で 取 得 (0: 日 曜 6: 土 曜 ) $first_dweek = date("w", mktime(0,0,0,$month,1,$year)) $ndays = date("t", mktime(0,0,0,$month,1,$year)); // 現 在 の 月 の 日 数 を 取 得 echo "<table border='1'><tr>"; echo "<tr><td colspan='7'>" 年 ". $month 月. </td></tr>"; $year. ". " echo "<td> 日 </td><td> 月 </td><td> 火 </td><td> 水 </td><td> 木 </td><td> 金 </td><td> 土 </td></tr><tr>"; 次 ページに 続 く calendar.php
// 最 初 の 週 の 処 理 ( 始 めの 日 の 曜 日 まで 空 白 セルにする) for($i=0;$i<$first_dweek;$i++){ echo "<td> </td>"; } $current_dweek 表 示 する = 日 $i; にちの 曜 日 // ( 整 数.0: 日 曜 6: 土 曜 ) $day 1; = 表 // 示 する 日 にちの 初 期 化 while($day<= $ndays ){ 日 // にち 表 示 の 繰 り 返 し if($current_dweek> 6){ 土 // 曜 を 超 えたら 改 行 echo "</tr> n"; echo "<tr>"; $current_dweek = 0; } echo "<td>" day. "</td>";. $ 日 にちを 表 // 示 $day++; $current_dweek++; } echo "</tr></table>";?> </p> </body> </html> calendar.php
データを 送 信 するためのHTML(1) フォームデータの 送 信 ユーザからデータを 入 力 し,そのデータを PHPプログラムに 送 信 するためのWebページの 作 り 方 <form action=" 送 信 先 ページURL" method=" 送 信 方 式 "> この 間 にフォームアイテムを 記 述 する </form> 送 信 先 ページURL はフォームデータを 処 理 する PHPプログラムのURL(ファイル 名 ) フォームデータの 送 信 方 式 は2 種 類 GETメソッド <form action=" " method=" GET"> URLにフォームデータが 付 加 されて 送 信 される(ブラウザのアドレス 欄 で フォームデータが 見 れる). フォームデータを 含 めてブックマークできる. 送 信 できるデータ 量 は 少 くない. POST メソッド <form action=" " method=" POST "> HTTP リクエストのボディ 部 に 付 加 されるて 送 信 される(ユーザは 直 接 フォー ムデータは 見 れない). 12 大 量 データを 送 信 できる.
データを 送 信 するためのHTML(2) フォームコントロールの 種 類 送 信 ボタン テキスト 入 力 エリア(1 or 行 複 数 行 ) メニュー ラジオボタン チェックボックス など 13
データを 送 信 するためのHTML(3) 送 信 ボタン(フォームコントロールその1 ) <input submit type=' ' value=' ボタンに 表 示 する 文 字 列 '> このボタンを 押 すとフォームデータが PHPプログラムに 送 られ, 同 時 にそのプログラ ムが 実 行 される 1 行 テキスト 入 力 エリア( フォームコントロールその2 ) <input text type=" " name=" フォーム 名 "> ややや フォーム 名 はフォームデータを 処 理 する PHPプログラムで 必 要 になる. フォーム 名 は 自 分 で 自 由 につけられる. 属 性 size の 指 定 で 入 力 の 幅 を 指 定 できる. <input type='text' フォーム 名 ' size='2' name=' > 他 のフォームアイテムも 同 様 や
データを 送 信 するためのHTML(4) ) メニュー(フォームコントロールその3 <select フォーム name=' 名 '> <option フォームデータ'> value=' 表 示 文 字 列 </option> </select> 属 性 value で 指 定 したフォームデータが 送 られる(= 表 示 文 字 列 が 送 信 されるわけでない). value=" " は 省 略 可 能 (その 場 合 は 表 示 文 字 列 がそのままフォームデータとして 送 信 される) デフォルトで 選 択 しておく 場 合 はselected をつける. <option フォームデータ' value=' selected > 表 示 文 字 列 </option> 選 択 肢 にPHP のプログラム 使 った 例 <select name="summer"> <option value="yama"> 山 </option> <option value="kawa"> 川 </option> <option value="umi"> 海 </option> </select> 15 購 入 する 個 数 を 入 力 してください: <select name='quantity'> <?php for($i=1;$i<=15;$i++){ echo <option " value='{$i}'>{$i} 個 </option> "; }?> </select> 購 入 する 個 数 を 入 力 してください: <select name='quantity'> <option value='1'>1 個 </option> <option value='2'>2 個 </option> ( 略 ) <option value='15'>15 個 </option> </select>
データを 送 信 するためのHTML(5) ラジオボタン(フォームコントロールその4 ) <input radio type=' ' name=' フォーム 名 ' value=' フォームデータ'> 表 示 文 字 列 ひとまとめにしたいラジオボタンは name=" " を 同 じにする 必 要 がある デフォルトで 選 択 しておく 場 合 はchecked をつける. <input type='radio' フォーム 名 ' value=' name=' フォームデータ' checked > <input type="radio" name="age" 代 <input type="radio" name="age" 代 <input type="radio" name="age" 代 16
データを 送 信 するためのHTML(6) チェックボックス( フォームコントロールその5 ) <input checkbox type=' ' name=' フォーム 名 ' value=' フォームデータ'> 表 示 文 字 列 ひとまとめにしたいチェックボックスは name=" " を 同 じにする 必 要 がある. デフォルトで 選 択 しておく 場 合 はchecked をつける. <input type='checkbox' フォーム 名 ' value=' name=' フォームデータ' checked > <input type="checkbox" name="hobby" ラジコン v <input type="checkbox" name="hobby" ゲーム v <input type="checkbox" name="hobby" 料 理 v 17
データを 送 信 するためのHTML(7) 複 数 行 テキスト 入 力 エリア( フォームコントロールその6) <textarea フォーム name=' 名 ' rows=' 行 数 ' cols=' 列 数 '> 表 示 文 字 列 </textarea> 表 示 文 字 列 は 省 略 可 能. <textarea name="opinion"> 何 か 入 力 してください</textarea> 18
データを 送 信 するためのHTML(8) 隠 しデータ(フォームコントロールその7) <input hidden type=" " name=' フォーム 名 ' value=' フォームデータ'> ブラウザ 上 には 表 示 されないデータを 送 信 (=ユーザが 入 力 選 択 するフォームで はない). ページ 間 でデータを 引 き 継 ぐ 場 合 に 使 用. PHP 等 プログラムと 組 み 合 わせて 使 う(= HTML 単 独 では 使 うことはない). ブラウザのソース 表 示 でユーザに 内 容 を 見 られてしまうので 注 意 が 必 要 (=セキュ リティホールになり 得 る). <?php $val = rand(1,100); echo "<input type='hidden' name='hoge' valu?> ブラウザ 上 のソース 表 示 (PHP 実 行 後 ) <input type='hidden' name='hoge' val
PHPによるフォームデータの 処 理 (1) フォームデータの 受 取 り $ 変 数 名 = $_GET[" フォーム 名 "] $ 変 数 名 = $_POST[" フォーム 名 "] フォームデータの 送 信 方 式 により $_GET と $_POST を 使 い 分 ける <form action=" " method="get"> の 場 合 は $_GET <form action=" " method="post"> の 場 合 は $_POST <html> <form action="xxx.php" GET "> <?php medhot=" $atai $_GET = ["number "]; <input type="text" number "> name=" $foo $_GET = ["hoge "]; <input </form> type="text" hoge "> name="?> </html> 20 xxx.php
PHPによるフォームデータの 処 理 (2) フォームデータの 受 取 り( 配 列 としてまとめて 受 け 取 る 方 法 ) for 文 等 の 繰 り 返 し 処 理 を 使 って 効 率 化 できる. フォーム 側 まとめて 送 りたいフォームは name 属 性 を フォーム 名 [] として 同 じにする. 処 理 側 配 列 として 処 理 する. []をつけないことに 注 意!! フォーム 側 処 理 側 <html> <?php <form action="xxx.php" action="get"> $atai = hoge $_GET[" "]; 氏 名 1:<input type="text" hoge[] "> name=" echo $atai[0] ; もちろん 氏 名 2:<input type="text" hoge[] "> name=" echo $atai[1] ; for 文 を 使 ってもOK 氏 名 3:<input type="text" hoge[] "> name=" echo $atai[2] ; $i]; 21 } </html>?> for($i=0;$i<3;$i+ echo $atai[
演 習 の 準 備 実 習 0: 本 日 の 演 習 用 作 業 フォルダを 作 成 しましょう. 手 順 1: 以 下 のフォルダの 中 に, 新 規 フォルダ php02 を 作 成 する. Z: xampp htdocs 以 下, 本 日 の 演 習 でのファイルはすべてこの php02 フォルダに 作 成 する こと.
PHPによるフォームデータの 処 理 (3) 実 習 1:ユーザからの 入 力 により 異 なる 動 きをする 動 的 なWeb ページを 作 成 しましょう. ユーザから 名 前 と 生 まれた 年 を 入 力 してもらい,そのデータで Web ページを 表 示 する. 手 順 1: 以 下 input_you.html)のhtmlのファイル( ( 入 力 Webページ)を input_you.html という 名 前 で 作 業 フォルダに 作 成 する. 手 順 2: 以 下 you.php)のphpプログラムのファイルを ( you.php という 名 前 で 作 業 フォルダに 作 成 する. 手 順 3:Webブラウザで 手 順 1で 作 成 したページにアクセスし 確 認 する. http://localhost/php02/input_you.html 23
PHPによるフォームデータの 処 理 (4) 情 報 太 郎 shimei 1974 umare フォームデータ input_you.html 24 you.php
<!DOCTYPE html> <html lang="ja"> <head> <meta "charset=utf-8"> <title> 実 習 1</title> </head> <body> <h2> 実 習 1</h2> <form????? ="you.php " method="get"> 送 信 ボタンを 押 すとyou.php ページにジャンプする (=you.php ページに 以 下 のフォームデータが 送 られる) <h2> あなたのお 名 前 は?</h2> shimei という 名 前 でyou.php ページに 入 力 され <p> たデータ(=フォームデータ)が 送 られる 氏 名 :<input type="text" shimei "> name=" </p> <h2> あなたの 生 まれた 年 は?</h2> <p> 西 暦 ( 半 角 で 入 力 ): <input type="text" umare "> 年 name=" </p> <p> <input type="submit" 送 信 "> value=" umare という 名 前 でyou.php ページに 入 力 された </p> データ(=フォームデータ)が 送 られる </form> </body> </html> input_you.html 25
<!DOCTYPE html> <html lang="ja"> <head> <meta "charset=utf-8"> <title> 実 習 1</title> </head> <body> <h2> 実 習 1</h2> <?php // 氏 名 用 フォームデータの 取 得 $namae = shimei $_GET[" "];// フォームデータ shimei の 値 を 変 数 $namae に 代 入 // 生 まれ 年 用 フォームデータの 取 得 $year =????? $_GET[" "]; // フォームデータ umare の 値 を 変 数 $year に 代 入 // 結 果 表 示 echo ようこそ" "??????.. "さん!<BR> n"; echo あなたはだいたい" ". ( date("y")-$year) 歳 ぐらいですね. n";. " この. は 文 字 列 と 文 字 列 (もしくは 変 数 に 入 ってい るデータなど)を 結 合 するという 意 味?> </body> </html> 関 数 date("y") は 現 時 点 での 西 暦 4 桁 の 数 字 を 返 す.この 値 から から 変 数 $year に 入 っている 数 字 ( 入 力 された 生 まれ 年 )を 引 く. この 結 果 が 年 齢 である. you.php
PHPによるフォームデータの 処 理 (5) 実 習 2:ユーザからの 入 力 により 異 なる 動 きをする 動 的 なWeb ページを 作 成 しましょう(ユーザから 背 景 の 色 と 文 字 の 色, 表 示 する 文 字 列 を 入 力 してもらい,そのデータで Webページ を 表 示 する.ちなみに 色 はRGB(=Red, Green, Blue)の 強 さで 入 力 してもらう). 手 順 1: 以 下 input_color.html)のhtmlのファイル( ( 色 入 力 Webペー ジ)を input_color.html という 名 前 で 作 業 フォルダに 作 成 する. 手 順 2: 以 下 (リスト3)の PHPプログラムのファイルを color.php という 名 前 で 作 業 フォルダに 作 成 する. 手 順 3:Webブラウザで 手 順 1で 作 成 したページにアクセスし 確 認 する. http://localhost/php02/input_color.html 27
PHPによるフォームデータの 処 理 (6) input_color.html 255 back_r 20 back_g 120 フォームデータ back_b 30 moji_r 100 moji_g 255 moji_b 腹 減 った moji 28 color.php
<!DOCTYPE html> <html lang="ja"> <head> <meta "charset=utf-8"> <title> 実 習 2</title> </head> <body> <h2> 実 習 2</h2> <form action="???????? " method="get"> <h3> 背 景 の 色 ( 各 0~255)</h3> 赤 :<input type="text"?????? "><BR> name=" 緑 :<input type="text"?????? "><BR> name=" 青 :<input type="text"?????? "><BR> name=" <h3> 文 字 の 色 ( 各 0~255)</h3> 赤 :<input type="text" moji_r "><BR> name=" 緑 :<input type="text" moji_g "><BR> name=" 青 :<input type="text" moji_b "><BR> name=" <h3> 表 示 する 文 字 列 </h3> <input type="text" moji "> name=" 送 信 ボタンを 押 すとcolor.php ページにジャンプする (=color.php ページに 以 下 のフォームデータが 送 られる) <p> <input type="submit" value=" 送 信 "> </p> </form> </body> </html> back_r という 名 前 でcolor.php ページに 入 力 さ れたデータ(=フォームデータ)が 送 られる ( 以 下 同 様 ) input_color.php
<!DOCTYPE html> <html lang="ja"> <head> <meta "charset=utf-8"> <title> 実 習 2</title> </head> <body> <h2> 実 習 2</h2> <?php // 背 景 色 用 フォームデータの 取 得 $b_r = back_r $_GET[" "];// フォームデータ back_r の 値 を 変 数 $b_r に 代 入 $b_g = $_GET[" back_g "]; $b_b = $_GET[" back_b "]; // 文 字 色 用 フォームデータの 取 得 $m_r =???"]; $_GET[" $m_g =???"]; $_GET[" $m_b =???"]; $_GET[" // 文 字 列 フォームデータの 取 得 $moji =???"]; $_GET[" // 背 景 の 設 定 printf( "<body %02x%02x%02x bgcolor='# '> n", $b_r, $b_g, $b_b); // 指 定 された 文 字 の 色 で 文 字 列 を 表 示 printf( "<h1><font %02x%02x%02x color='# '>%s</font></h1> n", $m_r, $m_g, $m_b, $moji );?> </body> </html> color.php
提 出 課 題 課 題 1: 九 九 の 表 においてサイズ( 行 数 と 列 数 )を 入 力 し 送 信 ボタ ン を 押 すと,そのサイズの 九 九 の もう 表 九 ( 九 とは 呼 べないが )を 表 示 する 動 的 な Webページを 作 りましょう. 手 順 1:HTMLのファイル( 行 数 列 数 Webページ)を 入 力 input_kuku.html という 名 前 で 作 業 フォルダに 作 成 する. 手 順 2:PHPプログラムのファイルを kuku.php という 名 前 で 作 業 フォルダに 作 成 する( 前 回 の 資 料 を 参 考 にすること). 手 順 3:Webブラウザで 手 順 1で 作 成 したページにアクセスし 確 認 する. http://localhost/php02/input_kuku.html 5 gyo 14 retsu
提 出 課 題 課 題 2: 身 長 (m) と 体 重 (kg) を 入 力 し 送 信 ボタン を 押 すと,BMI 値 を 表 示 する 動 的 なWebページを 作 りましょう. BMI 値 は 体 格 指 数 で, 計 算 式 は BMI= 体 重 (kg) ( 身 長 (m) 身 長 (m)) である( 単 位 に 注 意!).また, 以 下 の 表 を 参 考 に 判 定 ( 例 あなたは 肥 満 ( 肥 満 体 重 )です. )と 表 示 させて みましょう. 手 順 1:HTMLのファイル( 身 長 体 重 Webページ)を 入 力 input_bmi.html と いう 名 前 で 作 業 フォルダに 作 成 する. 手 順 2:PHPプログラムのファイルを bmi.php という 名 前 で 作 業 フォルダに 作 成 する. 手 順 3:Webブラウザで 手 順 1で 作 成 したページにアクセスし 確 認 する. http://localhost/php02/input_bmi.html 32
提 出 課 題 1.75 shincho 87 taiju フォームデータ input_bmi.html bmi.php
提 出 課 題 課 題 3: 年 と 月 を 入 力 して, 指 定 したカレンダーを 表 示 Webペー する ジを 作 りましょう. 年 と 月 はメニュー(リストボックス)を 使 PHPプログラムで う,および, 作 成 すること. 年 1900から2099 月 1から12 手 順 1:PHPのファイル( 年 月 Webページ)を 入 力 input_calendar.php とい う 名 前 で 作 業 フォルダに 作 成 する. 手 順 2:PHPプログラムのファイルを calendar.php という 名 前 で 作 業 フォルダに 作 成 する( 本 資 料 における 前 回 課 題 の 解 答 をコピペして 改 造 する). 手 順 3:Webブラウザで 手 順 1で 作 成 したページにアクセスし 確 認 する. http://localhost/php02/input_calendar.php 2018 nen 10 tsuki
提 出 課 題 課 題 4: 1から100までの 乱 数 による2つ 整 数 の 足 し 算 の 問 題 を 表 示, 解 答 を 入 力 して 送 信 ボタン を 押 すと, 正 解 か 不 正 解 か( 不 正 解 の 場 合 は 正 しい 答 え)を 表 示 するWebページを 作 りましょう. 手 順 1:PHPのファイル( 問 題 の 表 示 と 解 答 の 入 力 Webページ)を exam.php と いう 名 前 で 作 業 フォルダに 作 成 する(フォームデータは POSTで 送 ること!!). 手 順 2:PHPプログラムのファイルを answer.php という 名 前 で 作 業 フォルダに 作 成 する(フォームデータは POSTで 受 け 取 ること!!). 手 順 3:Webブラウザで 手 順 1で 作 成 したページにアクセスし 確 認 する( 何 回 か 試 すこと). http://localhost/php02/exam.php 6 val1 この2つはhidden で 送 る 46 val2 52 ans 不 正 解 の 場 合
提 出 課 題 課 題 5( 上 級 問 題 ): 課 題 4を 拡 張 し, 演 算 も3つの 演 算 ( 加 算 減 算 乗 算 )からランダムになるような 合 計 10 問 の 試 験 を 作 成 してみましょう.さら 成 績 (1 問 10 点 の 合 計 点 )を 表 示 してみましょう. 除 算 (= 割 り 算 )は 今 回 対 象 外 ( 割 り 切 れない 答 えになる 可 能 性 があるので). 手 順 1:PHPのファイル( 問 題 の 表 示 と 解 答 の 入 力 Webページ)を exam10.php という 名 前 で 作 業 フォルダに 作 成 する(フォームデータは POSTで 送 ること!!). 手 順 2:PHPプログラムのファイルを answer10.php という 名 前 で 作 業 フォルダ に 作 成 する(フォームデータは POSTで 受 け 取 ること!!). 手 順 3:Webブラウザで 手 順 1で 作 成 したページにアクセスし 確 認 する( 何 回 か 試 すこと). http://localhost/php02/exam10.php [25,85,, 51] val1[] この3つはhidden で 送 る (かつ,それぞれ 配 列 で) [77,12,,55] val2[] [0,1,,1] ope[] [102,73,,106] ans[]