サイバーセキュリティ演習 ― Webセキュリティ基礎＆実践― ２. Webサイトの仕組みとWebプログラミング基礎
講義内容 1. 2*. Webサイトの仕組みとWebプログラミング基礎 3.4.5*. 不正スクリプトの実行対策 6.7*. データベースの不正操作対策 8*. システムの不正操作対策とHTTPレスポンスの改竄対策 9*. 偽リクエストによるサービスの不正利用対策 10*. セッションIDの 不正取得対策 11. 総合演習（１） 12*. 公開ディレクトリの不正横断対策と認証認可制御の欠落 による不正アクセス対策とエラーメッセージからの情報 漏えい対策 13. 総合演習（２） 14. 総合演習（３） 15. 学期末試験 ※＊はレポートがある回になります。
講義資料 講義ホームページ http://www.cs.kyushu-u.ac.jp/lectures/csr/2015B/
本日の講義の目標と内容 Webの仕組みを理解する。 JavaScript PHP 演習環境構築 AppGoat
JavaScriptとは クライアントのWebブラウザ上で処理を実行するスクリプ ト言語 スクリプト言語とは、プログラムの記述や実行を比較的簡易 に行うことができるプログラム言語の総称。スクリプトは、 台本・脚本を意味する。 マウスやキーボードなどユーザからのアクションをきっかけ に特定の動作をする動的Webページを作成できる。 Webサーバソフトウェア スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script> Webブラウザ HTTPリクエスト クリック スクリプト処理 HTTPレスポンス HTML <script> クライアント Webサーバ
JavaScriptの特徴 特別な環境は不要でHTML文書に書き込む（埋め込 む）だけで、 JavaScriptに対応したWebブラウザ に処理を実行させることができる。 Webサーバに負荷をかけることなくWeb上で動的 な表現をすることが可能。 コンパイル（コードをコンピュータが実行可能な形 式に変換する作業）が不要のため実行処理の手間が かからない。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
本日の実施テーマ Javascript survey.htmlの入力値を動的にcheck.htmlに反映す る。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
画面遷移イメージ survey.html result.html 入力値を反映 check.html 入力ページ 集計ページ 確認ページ スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script> 入力値を反映 確認ページ check.html
まずは準備 仮想Webサーバの起動 リモートアクセス フォルダの移動 Cloudplatformから起動してください。 Cyberduckを用いて仮想Webサーバにログイ ンしてください。 フォルダの移動 /var/www/html/
HTML文書を修正してみよう check.htmlファイルの修正 Cyberduckでcheck.htmlファイルを選択し、 編集を開始
①ここにscriptを追加します。 ②“?”の箇所を修正します。 check.html <html> <head> <title> サイバーセキュリティ演習に関するアンケート </title> </head> <body> <h1 align="center"> サイバーセキュリティ演習に関するアンケート </h1> <hr size="4" width=90% align="center" color="blue"> <center> <div>以下の内容でよろしければ送信ボタンを押してください。</div><br> <form action="result.html" method="get"><input type="submit" value="送信" /></form> <table border> <tr><td>名前</td><td>?</td></tr> <tr><td>性別</td><td>?</td></tr> <tr><td>年齢</td><td>?</td></tr> <tr><td>Webセキュリティに興味がありますか？</td><td>?</td></tr> <tr><td>興味をもった理由</td><td>?</td></tr> <tr><td>Webプログラミングの経験がありますか？</td><td>?</td></tr> <tr><td>これまでの経験</td><td>?</td></tr> </table> <form action="survey.html" method="get"><input type="submit" value="戻る" /></form> </center> </body> </html> ①ここにscriptを追加します。 ②“?”の箇所を修正します。 check.html
<html> <head> <title> サイバーセキュリティ演習に関するアンケート </title> </head> <body> <h1 align="center"> サイバーセキュリティ演習に関するアンケート </h1> <hr size="4" width=90% align="center" color="blue"> <script type="text/javascript"> var name=new Array(7); var value = new Array(7); var query = decodeURIComponent(location.search.substring(1)); var parameters = query.split('&'); for(var i=0; i<parameters.length; i++){ var element = parameters[i].split('='); name[i] = element[0]; value[i] = element[1]; } </script> <center> <div>以下の内容でよろしければ送信ボタンを押してください。</div><br> <form action="result.html" method="get"><input type="submit" value="送信" /></form> <table border> <tr><td>名前</td><td><script type"text/javascript">document.write(value[0]);</script></td></tr> <tr><td>性別</td><td><script type"text/javascript">document.write(value[1]);</script></td></tr> <tr><td>年齢</td><td><script type"text/javascript">document.write(value[2]);</script></td></tr> <tr><td>Webセキュリティに興味がありますか？</td><td><script type"text/javascript">document.write(value[3]);</script></td></tr> <tr><td>興味をもった理由</td><td><script type"text/javascript">document.write(value[4]);</script></td></tr> <tr><td>Webプログラミングの経験がありますか？</td><td><script type"text/javascript">document.write(value[5]);</script></td></tr> <tr><td>これまでの経験</td><td><script type"text/javascript">document.write(value[6]);</script></td></tr> </table> <form action="survey.html" method="get"><input type="submit" value="戻る" /></form> </center> </body> </html> 修正後check.html
入力値はどこから取得する？ 入力値は投稿後のURLから取得します。 http://example.jp/check.html ?name=yamada &gender=%E7%94%B7 &age=20 &interest=%E3%81%AF%E3%81%84 &content1=%E5%B0%86%E6%9D%A5%E3%80%81%E3%8 2%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86% E3%82%A3%E4%BC%9A%E7%A4%BE%E3%81%AB%E5%8B %A4%E3%82%81%E3%81%9F%E3%81%84%E3%81%9F%E3 %82%81 &experience=%E3%81%84%E3%81%84%E3%81%88 &content2= スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
考え方 URLから入力値を取得する。 必要な情報だけを抽出する。 抽出した情報を表示する。 スクリプトのプログラム練習 テーマにつながる事例 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
JavaScriptの組み込み方法 JavaScriptの利用は、スクリプトタグを使います。 記述のルール <script type=“text/javascript”>～</script>：javascript 利用の宣言 記述のルール 命令の最後にセミコロン（；）を必ず付けます。 大文字・小文字をキチント区別します。 単語の途中での改行は行ってはいけません。 全角は使用できません。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
１．URLから入力値を取得する 入力値を格納するための配列を生成します。 var name=new Array(7)； 変数名nameを7つの要素を格納できる配列として生成する var value = new Array(7)； 変数名valueを7つの要素を格納できる配列として生成する スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script> name[0] name[1] name[2] name[3] name[4] name[5] name[6] name value[0] value[1] value[2] value[3] value[4] value[5] value[6] value
１．URLから入力値を取得する JavaScriptでは、location.search()メソッドが用意さ れています。 var query = decodeURIComponent(location.search.substring(1)); location.search.substring(1)は、？以降の文字列を取得す る decodeURIComponent()は、日本語など符号化された文 字を複合する var queryは、queryという名前の変数を宣言する URLの？以降の文字列を日本語に複合化しqueryに代入してい ることを表す。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
２．必要な情報だけを抽出する。 JavaScriptでは、split()メソッドが用意されています。 var parameters = query.split('&'); split(‘&’)は、&で連結している部分を分割する。データは配 列で渡す。 queryに代入済みの文字列の&の部分で分割し、変数 parametersに配列として代入していることを表す。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script> parameters[0] parameters[1] parameters[2] name=yamada gender=男 age=20
繰り返し処理 For文は指定回数の繰り返し処理をさせるときに使います。 for(初期値; 繰り返し条件; 変化){ //繰り返し処理 } var i=0; 変数iに0の値を代入 繰り返し条件 i<parameters.length; iの値がparametersの配列数未満 変化 i++; 1単位の刻み スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
要素の抽出 for(var i=0; i<parameters.length; i++){ var element = parameters[i].split('='); name[i] = element[0]; value[i] = element[1]; } var element = parameters[i].split(‘=’); parameters配列に ある文字列の=で連結している部分を分割し、変数elementに 配列として代入 name[i] = element[0]; パラメータ名を変数名nameの配列 に代入 value[i] = element[1]; パラメータ値を変数名valueの配列に 代入 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
要素の抽出のイメージ name yamada name[0] value[0] element[0] element[1] gender 男 for(i=0) age 20 name[2] value[2] element[0] element[1] スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script> for(i=1) for(i=2)
３．抽出した情報を表示する。 JavaScriptでは、document.write()メソッドが用意されて います。 <script type"text/javascript">document.write(value[0]); </script> document.write(value[0]); 変数valueの配列0番目の値を表示することを表す。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script> value[0] value[1] value[2] yamada 男 20 value[3] value[4] value[5] value[6] はい 将来、… いいえ
動作確認をしてみよう survey.htmlに適当な値を入れて、投稿してください。 スクリプトのプログラム練習 テーマにつながる事例 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
動作確認をしてみよう check.htmlに入力値が反映しているか確認してくだ さい。 右クリックでソースを表示を選択し、ソースを見て みましょう。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
本日の講義の目標と内容 Webの仕組みを理解する。 JavaScript PHP 演習環境構築 AppGoat
PHP（PHP Hypertext Preprocessor）とは 動的にHTMLデータを生成することによって、動的な ウェブページを実現することを主な目的としたサー バサイドのスクリプト言語。 PHPは個人的なホームページを意味するPersonal Home Pageに由来 Webサーバソフトウェア データベース スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script> Webブラウザ HTTPリクエスト クリック 検索 HTTPレスポンス HTML <結果> スクリプト処理 クライアント Webサーバ
クライアントサイド／サーバサイドスクリプト クライアントサイドスクリプト ブラウザの種類、バージョン、設定状態などクライア ントの環境によって動作に違いが出る ブラウザとしての機能に限定され、パソコン内のファ イルアクセスやサーバ側の操作ができない仕様 サーバサイドスクリプト クライアントの環境に依存しない動作を提供 データベースなどデータに対する高度かつ柔軟な操 作・管理が可能 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
PHPの特徴 Webアプリケーションのサーバーサイド・スクリプト に専門化している。 C言語やJava言語に似た、平易な文法。 データベースへの容易なアクセス（組み込み関数、およ び、標準ライブラリPDOによる）。 クラスベースオブジェクト指向のサポート。 例外処理 (try, catch, throw) のサポート。 多くのオープンソースのフレームワークやライブラリが 利用可能である。 ASP, JSPと似たHTML埋め込み型の構文をとる。 (Wikipediaより) スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
本日の実施テーマ PHP survey.htmlの入力値を動的に反映するcheck.php を実装する。 check.phpで送信された値をデータベースに書き込 むwrite.phpを実装する。 データベースの登録内容を表示するshow.phpを実 装する。 アンケートの収集結果を動的に表示するresult.php を実装する。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
画面遷移イメージ survey.html show.php write.php result.php check.php 入力ページ DB内容ページ write.php スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script> 登録ページ 集計ページ 確認ページ result.php check.php
データベースとは 特定のテーマに沿ったデータを集めて管理し、 容易に検索・抽出などの再利用をできるよう にしたもの。 データベースをコンピュータ上で管理するた めのシステムをデータベース管理システ ム (Database Management System, DBMS) という。 （Wikipediaより）
リレーショナルデータベース管理システム（RDBMS） データを表に似た構造で管理するデータベース。複 数のデータ群が関係と呼ばれる構造で相互連結可能 userテーブル ログインID （id:文字列） ユーザ名 （name:文字列） パスワード （password:文字列） yamada Yamada Taro P@ssword suzuki Suzuki Jiro 3f858c accountテーブル ログインID （id:文字列） 口座番号 （account_id:数値） 残高 （balance:数値） yamada 1000001 100,000 1000002 200,000 suzuki 1000003 300,000 関係を持った複数のテーブルに分けて管理
RDBMSのイメージとデータベースの用語 検索機能 抽出機能 追加削除機能 データベース テーブル２ accountテーブル テーブル１ userテーブル レコード （行） カラム（列）
実装の前に データベースを準備しましょう。 データベース接続用パッケージのインストール データベースの設定ファイルの編集 データベースサービスの起動 データベースサービスの自動起動設定 データベースのrootのパスワード設定 データベースの構築
１．データベース接続用パッケージのインストール 仮想サーバのコンソール上で以下のコマンドを 入力しましょう。 [root@csr2015 ~]# yum –y install php-mysql
データベース接続用パッケージの有効化 仮想サーバのコンソール上で以下のコマンドを 入力しましょう。 [root@csr2015 ~]# /etc/init.d/httpd restart
２．データベースの設定ファイルの編集 以下のフォルダに移動しましょう。 /etc/
２．データベースの設定ファイルの編集 my.cnfファイルを選択し、編集ボタンをク リックしましょう。 /etc/
my.cnfの編集 以下の内容を追記してください。 7行目：character-set-server = utf8
３．データベースサービスの起動 仮想サーバのコンソール上で以下のコマンドを 入力しましょう。 [root@csr2015 ~]# /etc/init.d/mysqld start
４．データベースサービスの自動起動設定 仮想サーバのコンソール上で以下のコマンドを 入力しましょう。 [root@csr2015 ~]# chkconfig mysqld on
５．データベースのrootのパスワード設定 仮想サーバのコンソール上で以下のコマンドを 入力しましょう。 [root@csr2015 ~]# mysql_secure_installation
rootのパスワード設定 New password: Enter current password for root (enter for none): Set root password? [Y/n] New password: Re-enter new password: Remove anonymous users? [Y/n] Disallow root login remotely? [Y/n] Remove test database and access to it? [Y/n] Reload privilege tables now? [Y/n] 空Enter 空Enter csr2015 csr2015 空Enter 空Enter 空Enter 空Enter
６．データベースの構築 データベースの作成 テーブルとカラムの作成
データベースへログイン 仮想サーバのコンソール上で以下のコマンドを 入力してログインしましょう。 [root@csr2015 ~]# mysql -u root -p
データベースの作成 mysqlのコンソール上で以下のコマンドを入力 しましょう。 以下のコマンドで、作成したデータベースを確 認しましょう。 mysql> create database exampleDB; 「exampleDB」という名前のデータベースを作 成する 以下のコマンドで、作成したデータベースを確 認しましょう。 mysql> show databases;
「exampleDB」を操作することを宣言 テーブルとカラムの作成 mysqlのコンソール上で以下のコマンドを入力 しましょう。 mysql> use exampleDB; 「exampleDB」を操作することを宣言
「exampleTable」という名前のテーブルを作成する テーブルとカラムの作成 mysqlのコンソール上で以下のコマンドを入力しましょう。 mysql> create table exampleTable ( -> id INT AUTO_INCREMENT, -> name varchar(30), -> gender varchar(10), -> age int(3), -> interest varchar(10), -> content1 varchar(100), -> experience varchar(10), -> content2 varchar(100), -> time timestamp, -> primary key (id) -> ); 「exampleTable」という名前のテーブルを作成する
テーブルとカラムの作成 id INT AUTO_INCREMENT, name varchar(30), age int(3), gender,content1,experience,content2も意味は同じ age int(3), 「age」という名前で3桁の整数値型とするカラムを指定 time timestamp, 「time」という名前でレコード追加時の時刻（タイムスタ ンプ）をつけるカラムを指定 primary key (id) 「id」を主キーとして指定（一意レコードであること宣言）
テーブルとカラムの作成 以下のコマンドで、作成したテーブルを確認し ましょう。 以下のコマンドで、カラムについても確認しま しょう。 mysql> show tables from exampleDB; 以下のコマンドで、カラムについても確認しま しょう。 mysql> show columns from exampleTable;
データベースのログアウト mysqlのコンソール上で以下のコマンドを入力 してログアウトしましょう。 mysql> exit
PHPを作成してみよう HTMLファイルの編集 PHPファイルの作成 survey.htmlを編集 右クリックして、New Fileを選択 ファイル名は、以下としてください。 check.php write.php show.php result.php
本日の実施テーマ PHP survey.htmlの入力値を動的に反映するcheck.php を実装する。 check.phpで送信された値をデータベースに書き込 むwrite.phpを実装する。 データベースの登録内容を表示するshow.phpを実 装する。 アンケートの収集結果を動的に表示するresult.php を実装する。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
<html> <head><title> サイバーセキュリティ演習に関するアンケート </title></head> <body> <h1 align="center"> サイバーセキュリティ演習に関するアンケート </h1> <hr size="4" width=90% align="center" color="blue"> <div><span style="color:red">*</span>の項目は必ず入力してください。 </div><br> <form action="check.php" method=“post"> （省略） </form> <div align="center"><font size="5" color="blue"><a href="result.php"> アンケート結果</a></font></div><br> </body> </html> 修正箇所 修正箇所 修正後survey.html
GET送信とPOST送信 GET送信 POST送信 URLに入力値を含めてデータを送信する 送信できるデータはテキストのみ 送信できるデータはテキストとバイナリが可能 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
<html> <head> <title> サイバーセキュリティ演習に関するアンケート </title> </head> <body> <h1 align="center"> サイバーセキュリティ演習に関するアンケート </h1> <hr size="4" width=90% align="center" color="blue"> <center><div>以下の内容でよろしければ送信ボタンを押してください。</div><br> <?php $name = $_POST["name"]; $gender = $_POST["gender"]; $age = $_POST["age"]; $interest = $_POST["interest"]; $content1 = $_POST["content1"]; $experience = $_POST["experience"]; $content2 = $_POST["content2"]; ?> <form action="write.php" method="post"> <input type="hidden" name="name" value=<?php print $name; ?> > <input type="hidden" name="gender" value=<?php print $gender; ?> > <input type="hidden" name="age" value=<?php print $age; ?> > <input type="hidden" name="interest" value=<?php print $interest; ?> > <input type="hidden" name="content1" value=<?php print $content1; ?> > <input type="hidden" name="experience" value=<?php print $experience; ?> > <input type="hidden" name="content2" value=<?php print $content2; ?> > <input type="submit" value="送信" /> </form> <table border> <tr><td>名前</td><td><?php print $name; ?></td></tr> <tr><td>性別</td><td><?php print $gender; ?></td></tr> <tr><td>年齢</td><td><?php print $age; ?></td></tr> <tr><td>Webセキュリティに興味がありますか？</td><td><?php print $interest; ?></td></tr> <tr><td>興味をもった理由</td><td><?php print $content1; ?></td></tr> <tr><td>Webプログラミングの経験がありますか？</td><td><?php print $experience; ?></td></tr> <tr><td>これまでの経験</td><td><?php print $content2; ?></td></tr> </table> <form action="survey.html" method="get"><input type="submit" value="戻る" /></form> </center> </body> </html> check.php
考え方 POST送信されたデータを受け取る。 データベースに登録するデータのPOST送信の準備をす る。 受け取ったデータを表に出力する。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
PHPスクリプトの記述規則 <?php～?>でphpスクリプトを宣言する 行の最後は「;（セミコロン）」をつける 文字列は””（ダブルクォーテーション）か’’（シ ングルクォーテーション）で囲む 文字列の連結は、.（ドット）を間につける 変数は最初に「$」をつける スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
１．POST送信されたデータを受け取る。 <?php $name = $_POST["name"]; $gender = $_POST["gender"]; $age = $_POST["age"]; $interest = $_POST["interest"]; $content1 = $_POST["content1"]; $experience = $_POST["experience"]; $content2 = $_POST["content2"]; ?> $_POST[“データ名”] POST送信されたデータをデータ名を指定して受け取る スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
２．データベースに登録するデータのPOST送信の準備をする。 <form action="write.php" method="post"> <input type="hidden" name="name" value=<?php print $name; ?> > <input type=“hidden” name=“name” value=“デー タ”> URLに入力値を含めず、ブラウザにも表示せず、write.php にデータを送信する <?php print $name; ?> 変数nameの値を表示する スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
３．受け取ったデータを表に出力する。 <table border> 7行2列の表として表示する。 <tr><td>名前</td><td><?php print $name; ?></td></tr> <tr><td>性別</td><td><?php print $gender; ?></td></tr> <tr><td>年齢</td><td><?php print $age; ?></td></tr> <tr><td>Webセキュリティに興味がありますか？</td><td><?php print $interest; ?></td></tr> <tr><td>興味をもった理由</td><td><?php print $content1; ?></td></tr> <tr><td>Webプログラミングの経験がありますか？</td><td><?php print $experience; ?></td></tr> <tr><td>これまでの経験</td><td><?php print $content2; ?></td></tr> </table> 7行2列の表として表示する。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
本日の実施テーマ PHP survey.htmlの入力値を動的に反映するcheck.php を実装する。 check.phpで送信された値をデータベースに書き込 むwrite.phpを実装する。 データベースの登録内容を表示するshow.phpを実 装する。 アンケートの収集結果を動的に表示するresult.php を実装する。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
<html> <head> <title> サイバーセキュリティ演習に関するアンケート </title> </head> <body> <h1 align="center"> サイバーセキュリティ演習に関するアンケート </h1> <hr size="4" width=90% align="center" color="blue"> <center><div>データをデータベースに送信しました。</div><br></center> <?php $db = mysql_connect("localhost","root","csr2015") or die("データベースの接続に失敗しました。".mysql_error()); mysql_select_db('exampleDB',$db) or die("DBがありません".mysql_error()); $name = $_POST["name"]; $gender = $_POST["gender"]; $age = $_POST["age"]; $interest = $_POST["interest"]; $content1 = $_POST["content1"]; $experience = $_POST["experience"]; $content2 = $_POST["content2"]; $sql = "insert into exampleTable (name,gender,age,interest,content1,experience,content2) values ('$name','$gender','$age','$interest','$content1','$experience','$content2')"; mysql_query($sql,$db) or die("データ追加失敗".mysql_error()); mysql_close($db); ?> <div align="center"><font size="5" color="blue"><a href="show.php">データベース登録結果</a></font></div><br> <div align="center"><font size="5" color="blue"><a href="result.php">アンケート結果</a></font></div><br> </body> </html> write.php
考え方 データベースサーバに接続する。 データベースを選択する。 データを登録するSQL文を作成する。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
１．データベースサーバに接続する。 <?php $db = mysql_connect("localhost","root","csr2015") or die("データベースの接続に失敗しました。".mysql_error()); mysql_select_db('exampleDB',$db) or die("DBがありま せん".mysql_error()); $db = mysql_connect("localhost","root","csr2015") 引数のサーバ名、ユーザ名、パスワードを使ってmysqlサーバ に接続する die() 引数の内容を表示してスクリプトの実行を中止する mysql_error() データベースに関するエラーメッセージを表示する スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
２．データベースを選択する。 mysql_select_db('exampleDB',$db) or die("DBがあ りません".mysql_error()); mysql_select_db('exampleDB',$db) 引数のデータベース名、データベース接続フラグ値を使っ て、利用するデータベースを指定する die() 引数の内容を表示してスクリプトの実行を中止する mysql_error() データベースに関するエラーメッセージを表示する スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
３．データを登録するSQL文を作成する。 $name = $_POST["name"]; $gender = $_POST["gender"]; $age = $_POST["age"]; $interest = $_POST["interest"]; $content1 = $_POST["content1"]; $experience = $_POST["experience"]; $content2 = $_POST["content2"]; $_POST[“データ名”] POST送信されたデータをデータ名を指定して受け取る スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
３．データを登録するSQL文を作成する。 $sql = "insert into exampleTable (name,gender,age,interest,content1,experience,c ontent2) values ('$name','$gender','$age','$interest','$content1','$ex perience','$content2')"; $sql = “<SQL文>”; SQL文をsqlという名前の変数に代入する。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
SQL（Structured Query Language）とは SQLは、リレーショナルデータベース管理シ ステム (RDBMS) において、データの操作や 定義を行うためのデータベース言語（問い合 わせ言語）である。 SQLの文法の種類は、以下の３つに大別され る。 データ定義言語 データ操作言語 データ制御言語 （Wikipediaより）
代表的なデータ操作言語 INSERT INTO テーブル名(カラム1、カラム 2) VALUES(値1、値2); カラムにレコードとなるデータを挿入する SELECT カラム１、カラム２ FROM テーブ ル名; テーブルからカラムのデータを表示する
４．SQL文をデータベースサーバに送信する。 mysql_query($sql,$db) or die("データ追加失敗 ".mysql_error()); mysql_close($db); mysql_query($sql,$db) 引数のSQL文、データベース接続値を使って、データベー スにデータ登録の問い合わせをする 引数のデータベース接続値のデータベースとの接続を切断 する スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
本日の実施テーマ PHP survey.htmlの入力値を動的に反映するcheck.php を実装する。 check.phpで送信された値をデータベースに書き込 むwrite.phpを実装する。 データベースの登録内容を表示するshow.phpを実 装する。 アンケートの収集結果を動的に表示するresult.php を実装する。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
<html> <head> <title> サイバーセキュリティ演習に関するアンケート </title> </head> <body> <h1 align="center"> サイバーセキュリティ演習に関するアンケート </h1> <hr size="4" width=90% align="center" color="blue"> <center><div>データベースの登録内容は以下の通りです。</div><br></center> <?php $db = mysql_connect("localhost","root","csr2015") or die("データベースの接続に失敗しました。".mysql_error()); mysql_select_db('exampleDB',$db) or die("DBがありません".mysql_error()); $sql = "select * from exampleTable"; $reply = mysql_query($sql,$db) or die("データ検索失敗".mysql_error());; print "<center>"; print "<table border>"; print "<tr><td>id</td><td>名前</td><td>性別</td><td>年齢</td><td>Webセキュリティに興味がありますか？</td><td>理由 </td><td>Webプログラミングの経験がありますか？</td><td>これまでの経験</td><td>日時</td></tr>"; while ($r = mysql_fetch_array($reply)) { print "<tr><td>".$r[0]."</td><td>".$r[1]."</td><td>".$r[2]."</td><td>".$r[3]."</td><td>".$r[4]."</td><td>".$r[5]."</td><td>".$r[6]."</td><td>".$ r[7]."</td><td>".$r[8]."</td></tr>"; } print "</table>"; print "</center>"; mysql_close($db); ?> <div align="center"><font size="5" color="blue"><a href="result.php">アンケート結果</a></font></div><br> </body> </html> show.php
考え方 データベースサーバに接続する。 データベースを選択する。 データベース内容を表示するSQL文を作成し、SQL 文をデータベースサーバに送信する。 データベースの情報を取得する。 データベースの情報を表に出力する。 説明は省略します。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
３．データベース内容を表示するSQL文を作成し、SQL文をデータベースサーバに送信する。 $sql = "select * from exampleTable"; $reply = mysql_query($sql,$db) or die("データ検索 失敗".mysql_error());; $sql = “select * from exampleTable”; exampleTableの全情報を表示するというSQL文をsqlとい う名前の変数に代入する。 mysql_query($sql,$db) 引数のSQL文、データベース接続値を使って、データベー スに登録の問い合わせをして、その結果値をreplyという名 前の変数に代入する。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
４．データベースの情報を取得する。 While文は条件を満たすまで繰り返し処理をさせるときに 使います。 while( 繰り返し条件){ //繰り返し処理 } while文の繰り返し条件 $r = mysql_fetch_array($reply) 引数の問い合わせ結果値を使い、レコードの単位で内容 を取ってきて、rという名前の配列に代入できるまでとい う条件となる。 fetchは取ってくるという意味。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
５．データベースの情報を表に出力する。 9列の表として表示する。 print "<table border>"; print "<tr><td>id</td><td>名前</td><td>性別</td><td>年齢 </td><td>Webセキュリティに興味がありますか？</td><td>理由 </td><td>Webプログラミングの経験がありますか？</td><td>これ までの経験</td><td>日時</td></tr>"; print "<tr><td>".$r[0]."</td><td>".$r[1]."</td><td>".$r[2]."</td><td>".$r[ 3]."</td><td>".$r[4]."</td><td>".$r[5]."</td><td>".$r[6]."</td><td>" .$r[7]."</td><td>".$r[8]."</td></tr>"; print "</table>"; 9列の表として表示する。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
本日の実施テーマ PHP survey.htmlの入力値を動的に反映するcheck.php を実装する。 check.phpで送信された値をデータベースに書き込 むwrite.phpを実装する。 データベースの登録内容を表示するshow.phpを実 装する。 アンケートの収集結果を動的に表示するresult.php を実装する。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
<html> <head><title> サイバーセキュリティ演習に関するアンケート結果 </title></head> <body> <h1 align="center"> サイバーセキュリティ演習に関するアンケート結果 </h1> <hr size="4" width=90% align="center" color="blue"> <?php $db = mysql_connect("localhost","root","csr2015") or die("データベースの接続に失敗しました。".mysql_error()); mysql_select_db('exampleDB',$db) or die("DBがありません".mysql_error()); $sql1 = "select gender,interest,count(*) from exampleTable group by gender,interest"; $reply1 = mysql_query($sql1,$db); $sql2 = "select truncate(age/10,0) as age,interest,count(*) from exampleTable group by truncate(age/10,0),interest"; $reply2 = mysql_query($sql2,$db); $sql3 = "select gender,experience,count(*) from exampleTable group by gender,experience"; $reply3 = mysql_query($sql3,$db); $sql4 = "select truncate(age/10,0) as age,experience,count(*) from exampleTable group by truncate(age/10,0),experience"; $reply4 = mysql_query($sql4,$db); function showCount1($reply){ $num = array_fill(0,4,0); while ($r = mysql_fetch_array($reply)) { if($r[0] == '男' and $r[1] == 'はい'){ $num[0] = $r[2]; }elseif($r[0] == '男' and $r[1] == 'いいえ'){ $num[1] = $r[2]; }elseif($r[0] == '女' and $r[1] == 'はい'){ $num[2] = $r[2]; }elseif($r[0] == '女' and $r[1] == 'いいえ'){ $num[3] = $r[2]; } print "<td><table border><caption>男女別</caption>"; print "<tr><td> </td><td>男</td><td>女</td></tr>"; print "<tr><td>はい</td><td>".$num[0]."</td><td>".$num[2]."</td></tr>"; print "<tr><td>いいえ</td><td>".$num[1]."</td><td>".$num[3]."</td></tr>"; print "</table></td>"; result.php
function showCount2($reply){ $num = array_fill(0,12,0); while ($r = mysql_fetch_array($reply)) { switch($r[0]){ case 1: if($r[1] == 'はい'){ $num[0] = $r[2]; }else{ $num[1] = $r[2]; } break; case 2: $num[2] = $r[2]; $num[3] = $r[2]; case 3: $num[4] = $r[2]; $num[5] = $r[2]; case 4: $num[6] = $r[2]; $num[7] = $r[2]; case 5: $num[8] = $r[2]; $num[9] = $r[2]; result.php（続き）
case 6: if($r[1] == 'はい'){ $num[10] = $r[2]; }else{ $num[11] = $r[2]; } break; default: print "<td><table border><caption>年代別</caption>"; print "<tr><td> </td><td>10代</td><td>20代</td><td>30代</td><td>40代</td><td>50代</td><td>60代</td></tr>"; print "<tr><td>はい</td><td>".$num[0]."</td><td>".$num[2]."</td><td>".$num[4]."</td><td>".$num[6]."</td><td>".$num[8]."</td><td>".$num[10]."</td></tr>"; print "<tr><td>いいえ</td><td>".$num[1]."</td><td>".$num[3]."</td><td>".$num[5]."</td><td>".$num[7]."</td><td>".$num[9]."</td><td>".$num[11]."</td></tr>"; print "</table></td>"; print "<center>"; print "<table ><caption>Webセキュリティへの興味の有無</caption><tr>"; showCount1($reply1); showCount2($reply2); print "</tr></table>"; print "<table ><caption>Webプログラミングの経験の有無</caption><tr>"; showCount1($reply3); showCount2($reply4); print "</center>"; mysql_close($db); ?> <div align="center"><font size="5" color="blue"><a href="survey.html">アンケートページに戻る</a></font></div><br> </body> </html> result.php（終わり）
考え方 データベースサーバに接続する。 データベースを選択する。 集計結果を抽出するSQL文を作成する。 表を準備する。 抽出した集計結果を表に出力する。 説明は省略します。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script> ４つの表に対して処理を行います。
４つの表 男女別の興味の有無 男女別の経験の有無 年代別の興味の有無 年代別の経験の有無 スクリプトのプログラム練習 テーマにつながる事例 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
３．集計結果を抽出するSQL文を作成する。 例えば、以下のテーブルがあった場合、 gender age interest experience 男 20 はい いいえ 30 女 18 22 40 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
男女別に興味の有無の情報を抽出する。 group by カラム１,カラム２：カラムのデータをグルー プ化する gender 女 男 $sql1 = "select gender from exampleTable group by gender; $sql1 = "select gender,interest from exampleTable group by gender,interest; スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script> gender interest 女 はい いいえ 男
男女別に興味の有無の情報を抽出する。 count(*)：全てのレコードの件数を集計する $sql1 = "select gender,interest,count(*) from exampleTable group by gender,interest; gender interest count(*) 女 はい 2 いいえ 1 男 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
年齢を10で割って少数点第1位を切り捨てることで年代を抽出する 年代別に興味の有無の情報を抽出する。 truncate(カラム、桁数)：カラムの桁数部分を切り捨て る。 $sql3 = "select truncate(age/10,0), interest from exampleTable; 年齢を10で割って少数点第1位を切り捨てることで年代を抽出する truncate(10/,0) interest 2 はい 3 1 いいえ 4 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
年代別に興味の有無の情報を抽出する。 カラム as 別名：カラムを別名に指定する。 $sql3 = "select truncate(age/10,0) as age,interest from exampleTable group by truncate(age/10,0), interest; age interest 1 はい 2 いいえ 3 4 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
年代別に興味の有無の情報を抽出する。 レコード数を集計すると、以下の表の結果になります。 $sql2 = "select truncate(age/10,0) as age,interest,count(*) from exampleTable group by truncate(age/10,0), interest; age interest count(*) 1 はい 2 いいえ 3 4 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
男女別/年代別に経験の有無の情報を抽出した場合 $sql3 = "select gender,experience,count(* ) from exampleTable group by gender,experience; $sql4 = "select truncate(age/10,0) as age,experience,count(*) from exampleTable group by truncate(age/10,0),experience; age experience count(*) 1 いいえ 2 はい 3 4 gender experience count(*) 女 はい 1 いいえ 2 男 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
５．表を準備する。 男女別・年代別のそれぞれの表を準備する。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
PHPの関数 関数とは、ある一定の処理をまとめたもの。 何度も繰り返し行われる一連の作業を関数としてまとめ ておき、必要に応じて呼び出して使う。 組み込み関数 PHPであらかじめ用意されている関数 文字列関数、配列関数、日付・時刻関数など ユーザ定義関数 ユーザが定義する関数。 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
関数の定義と呼び出し 関数の定義 関数の呼び出し function 関数名(引数１,引数2,){ //処理１ //処理2 } 関数名(引数1,引数2); 例 <?php function name($n){ print $n.”さん”; } print “こんにちは”; name(山田); print “さようなら”; ?> スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
男女別の集計結果を表に出力する関数 showCount1() function showCount1($reply){ $num = array_fill(0,4,0); while ($r = mysql_fetch_array($reply)) { if($r[0] == '男' and $r[1] == 'はい'){ $num[0] = $r[2]; }elseif($r[0] == '男' and $r[1] == 'いいえ'){ $num[1] = $r[2]; }elseif($r[0] == '女' and $r[1] == 'はい'){ $num[2] = $r[2]; }elseif($r[0] == '女' and $r[1] == 'いいえ'){ $num[3] = $r[2]; } print "<td><table border><caption>男女別</caption>"; print "<tr><td> </td><td>男</td><td>女</td></tr>"; print "<tr><td>はい</td><td>".$num[0]."</td><td>".$num[2]."</td></tr>"; print "<tr><td>いいえ</td><td>".$num[1]."</td><td>".$num[3]."</td></tr>"; print "</table></td>"; カウント数を抽出 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script> 表にカウント数を出力
array_fill関数 array_fill(開始番号、個数、値) $num = array_fill(0,4,0); スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script> num[0] num[1] num[2] num[3]
カウント数の抽出 if($r[0] == '男' and $r[1] == 'はい'){ $num[0] = $r[2]; }elseif($r[0] == '男' and $r[1] == 'いいえ'){ $num[1] = $r[2]; }elseif($r[0] == '女' and $r[1] == 'はい'){ $num[2] = $r[2]; }elseif($r[0] == '女' and $r[1] == 'いいえ'){ $num[3] = $r[2]; } スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script> gender interest count(*) 女 はい 2 いいえ 1 男 if文を使って「男/女」お よび「はい/いいえ」を 判断して、該当のカウン ト数を配列numに代入
表にカウント数を表示 print "<td><table border><caption>男女別</caption>"; print "<tr><td> </td><td>男</td><td>女 </td></tr>"; print "<tr><td>はい </td><td>".$num[0]."</td><td>".$num[2]."</td></tr>"; print "<tr><td>いいえ </td><td>".$num[1]."</td><td>".$num[3]."</td></tr>"; print "</table></td>"; スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script> 3行3列の表で結果を表示 男 女 はい 2 いいえ 1
年代別の集計結果を表に出力する関数 showCount2() function showCount2($reply){ $num = array_fill(0,12,0); while ($r = mysql_fetch_array($reply)) { switch($r[0]){ case 1: if($r[1] == 'はい'){ $num[0] = $r[2]; }else{ $num[1] = $r[2]; } break; （省略） print "<td><table border><caption>年代別</caption>"; print "<tr><td> </td><td>10代</td><td>20代</td><td>30代</td><td>40代</td><td>50代</td><td>60代 </td></tr>"; print "<tr><td>はい </td><td>".$num[0]."</td><td>".$num[2]."</td><td>".$num[4]."</td><td>".$num[6]."</td><td>".$num[8]."</td><td>".$num [10]."</td></tr>"; print "<tr><td>いいえ </td><td>".$num[1]."</td><td>".$num[3]."</td><td>".$num[5]."</td><td>".$num[7]."</td><td>".$num[9]."</td><td>".$num [11]."</td></tr>"; print "</table></td>"; カウント数を抽出 表にカウント数を出力 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
複数条件分岐 } switch(条件){ case 値１: 条件が値１と等しい時の処理; break; case 値２: 条件が値２と等しい時の処理; （・・・） default : 条件がいずれの値とも等しくない時の処理; } スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
カウント数の抽出 switch($r[0]){ case 1: if($r[1] == 'はい'){ $num[0] = $r[2]; }else{ $num[1] = $r[2]; } break; case 2: （省略） switch文を使って「年代」 および「はい/いいえ」を判 断して、該当のカウント数 を配列numに代入 10代の場合 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script> age interest count(*) 1 はい 2 いいえ 3 4 20代の場合
表にカウント数を表示 3行７列の表で結果を表示 print "<td><table border><caption>年代別</caption>"; print "<tr><td> </td><td>10代</td><td>20代 </td><td>30代</td><td>40代</td><td>50代</td><td>60代 </td></tr>"; print "<tr><td>はい </td><td>".$num[0]."</td><td>".$num[2]."</td><td>".$num[4]." </td><td>".$num[6]."</td><td>".$num[8]."</td><td>".$num[10] ."</td></tr>"; print "<tr><td>いいえ </td><td>".$num[1]."</td><td>".$num[3]."</td><td>".$num[5]." </td><td>".$num[7]."</td><td>".$num[9]."</td><td>".$num[11] ."</td></tr>"; print "</table></td>"; スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script> 3行７列の表で結果を表示 10代 20代 30代 40代 50代 60代 はい 1 いいえ 2
６．抽出した集計結果を表に出力する。 1行2列の表の中に、男女別・年代別の表を入れる。 見栄えを良くするやり方の一つ スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script>
６．抽出した集計結果を表に出力する。 print "<table ><caption>Webセキュリティへの興味 の有無</caption><tr>"; showCount1($reply1); showCount2($reply2); print "</tr></table>"; print "<table ><caption>Webプログラミングの経 験の有無</caption><tr>"; showCount1($reply3); showCount2($reply4); ※男女別の興味の有無 ※年代別の興味の有無 スクリプトのプログラム練習 テーマにつながる事例 偽ページ Cookie取得 Cookie保存 JavaScript事例説明済み <script type="text/javascript"> enquete_elements = new Array(); function addOriginal(id) { var obj = document.getElementById(id); enquete_elements[id] = obj.innerHTML; } </script> ※男女別の経験の有無 ※年代別の経験の有無
動作を確認してみよう ブラウザでexample.jp/survey.htmlにアク セスしてみてください。
動作を確認してみよう example.jp/check.phpが想定通りに動作し ているか確認しましょう。 右クリックでソースを表示を選択し、ソース を見てみましょう。
動作を確認してみよう example.jp/write.phpが想定通りに動作して いるか確認しましょう。 右クリックでソースを表示を選択し、ソース を見てみましょう。
動作を確認してみよう example.jp/show.phpが想定通りに動作し ているか確認しましょう。 右クリックでソースを表示を選択し、ソース を見てみましょう。
動作を確認してみよう example.jp/result.phpが想定通りに動作し ているか確認しましょう。 右クリックでソースを表示を選択し、ソース を見てみましょう。
本日の講義の目標と内容 Webの仕組みを理解する。 JavaScript PHP 演習環境構築 AppGoat
演習環境構築 脆弱性体験学習ツール AppGoat（ウェブアプリケー ション版） https://www.ipa.go.jp/security/vuln/appgoat/ 利用許諾合意書を一読し、同意の上、ダウンロードしてください。
AppGoat動作環境 Windows OS上のみ動作 Macの方はWindows OS環境を次回までに用意し てください。
AppGoatインストール手順 https://www.ipa.go.jp/security/vuln/appgoat /を参考にインストールしてください。 ダウンロードしたzipファイルの解凍先にこだわ りが無ければ、解凍先は、C:\としてください。 AppGoat01フォルダ配下のIPAToolフォルダにあ る「start.bat」バッチファイルをダブルクリック し、AppGoatを起動してください。 ランタイムがインストールされていない場合は、 指示に従いインストールしてください。 ファイアウォールの警告が表示された場合は、ブ ロックを選択してください。
課題 本講義を受講した理由を書いてください。 Webサイトの開発の経験があれば、書いてください。 無い場合は、今回の演習を通じて学んだことや大変だっ たことを書いてください。 Webサーバやデータベースの構築・運用の経験があれ ば、書いてください。無い場合は、今回の演習を通じて 学んだことや大変だったことを書いてください。 プログラミングの経験があれば、書いてください。無い 場合は、今回の演習を通じて学んだことや大変だったこ とを書いてください。 本講義の感想、要望、質問などあれば、書いてください。 https://moodle.artsci.kyushu-u.ac.jp/course/view.php?id=2661