サイバーセキュリティ演習 ― Webセキュリティ基礎＆実践―

サイバーセキュリティ演習 ― Webセキュリティ基礎＆実践―
２. Webサイトの仕組みとWebプログラミング基礎

講義内容 1. 2*. Webサイトの仕組みとWebプログラミング基礎 3.4.5*. 不正スクリプトの実行対策 6.7*. データベースの不正操作対策 8*. システムの不正操作対策とHTTPレスポンスの改竄対策 9*. 偽リクエストによるサービスの不正利用対策 10*. セッションIDの不正取得対策 11. 総合演習（１） 12*. 公開ディレクトリの不正横断対策と認証認可制御の欠落による不正アクセス対策とエラーメッセージからの情報漏えい対策 13. 総合演習（２） 14. 総合演習（３） 15. 学期末試験 ※＊はレポートがある回になります。

講義資料講義ホームページ

本日の講義の目標と内容 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から取得します。
?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から入力値を取得する。必要な情報だけを抽出する。抽出した情報を表示する。スクリプトのプログラム練習テーマにつながる事例

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に適当な値を入れて、投稿してください。スクリプトのプログラム練習テーマにつながる事例

動作確認をしてみよう 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>

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 suzuki Suzuki Jiro 3f858c accountテーブルログインID （id:文字列）口座番号（account_id:数値）残高（balance:数値） yamada 100,000 200,000 suzuki 300,000 関係を持った複数のテーブルに分けて管理

RDBMSのイメージとデータベースの用語
検索機能抽出機能追加削除機能データベーステーブル２ accountテーブルテーブル１ userテーブルレコード（行）カラム（列）

実装の前にデータベースを準備しましょう。データベース接続用パッケージのインストールデータベースの設定ファイルの編集
データベースサービスの起動データベースサービスの自動起動設定データベースのrootのパスワード設定データベースの構築

１．データベース接続用パッケージのインストール
仮想サーバのコンソール上で以下のコマンドを入力しましょう。 ~]# yum –y install php-mysql

データベース接続用パッケージの有効化仮想サーバのコンソール上で以下のコマンドを入力しましょう。
~]# /etc/init.d/httpd restart

２．データベースの設定ファイルの編集以下のフォルダに移動しましょう。 /etc/

２．データベースの設定ファイルの編集 my.cnfファイルを選択し、編集ボタンをクリックしましょう。 /etc/

my.cnfの編集以下の内容を追記してください。 7行目：character-set-server = utf8

３．データベースサービスの起動仮想サーバのコンソール上で以下のコマンドを入力しましょう。
~]# /etc/init.d/mysqld start

４．データベースサービスの自動起動設定仮想サーバのコンソール上で以下のコマンドを入力しましょう。
~]# chkconfig mysqld on

５．データベースのrootのパスワード設定
仮想サーバのコンソール上で以下のコマンドを入力しましょう。 ~]# 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

６．データベースの構築データベースの作成テーブルとカラムの作成

データベースへログイン仮想サーバのコンソール上で以下のコマンドを入力してログインしましょう。
~]# 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

<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>

<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文を作成する。

１．データベースサーバに接続する。 <?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>

<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>

<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> ４つの表に対して処理を行います。

４つの表男女別の興味の有無男女別の経験の有無年代別の興味の有無年代別の経験の有無スクリプトのプログラム練習テーマにつながる事例

３．集計結果を抽出する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取得

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列の表の中に、男女別・年代別の表を入れる。見栄えを良くするやり方の一つ

６．抽出した集計結果を表に出力する。 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が想定通りに動作しているか確認しましょう。

演習環境構築脆弱性体験学習ツール AppGoat（ウェブアプリケーション版）
利用許諾合意書を一読し、同意の上、ダウンロードしてください。

AppGoat動作環境 Windows OS上のみ動作 Macの方はWindows OS環境を次回までに用意してください。

AppGoatインストール手順 /を参考にインストールしてください。ダウンロードしたzipファイルの解凍先にこだわりが無ければ、解凍先は、C:\としてください。 AppGoat01フォルダ配下のIPAToolフォルダにある「start.bat」バッチファイルをダブルクリックし、AppGoatを起動してください。ランタイムがインストールされていない場合は、指示に従いインストールしてください。ファイアウォールの警告が表示された場合は、ブロックを選択してください。

課題本講義を受講した理由を書いてください。
Webサイトの開発の経験があれば、書いてください。無い場合は、今回の演習を通じて学んだことや大変だったことを書いてください。 Webサーバやデータベースの構築・運用の経験があれば、書いてください。無い場合は、今回の演習を通じて学んだことや大変だったことを書いてください。プログラミングの経験があれば、書いてください。無い場合は、今回の演習を通じて学んだことや大変だったことを書いてください。本講義の感想、要望、質問などあれば、書いてください。

サイバーセキュリティ演習 ― Webセキュリティ基礎＆実践―

Similar presentations

Presentation on theme: "サイバーセキュリティ演習 ― Webセキュリティ基礎＆実践―"— Presentation transcript:

Similar presentations

About project

フィードバック

ログインする

Auth with social network:

サイバーセキュリティ演習 ― Webセキュリティ基礎＆実践―

Similar presentations

Presentation on theme: "サイバーセキュリティ演習 ― Webセキュリティ基礎＆実践―"— Presentation transcript:

Similar presentations

About project

フィードバック