データベースS
第9回 PHPによるWebインターフェース
システム創成情報工学科 尾下 真樹
今日の内容
• PHP、Web のしくみ
• HTMLの基本
• PHP入門
• Webインターフェースの作成
演習に関する注意!
• データベースは、必ず、自分のアカウント名
で作成すること(数名、間違った名前で作成
している)
– psql で \l と入力すると、データベース・作成者の
一覧が表示される
– dropdb コマンドを使うと、createdb と逆に、作成
したデータベースを削除できる(作成者のみ可)
• 間違って作成した人は、削除して、新しく作
成すること(今回の演習問題の提出までに)
データベース作成(確認)
[email protected] > createdb dbname -h popura.ces.kyutech.ac.jp
CREATE DATABASE
[email protected] > psql dbname -h popura.ces.kyutech.ac.jp
Welcome to psql 7.3.2, the PostgreSQL interactive terminal.
Type: \copyright for distribution terms
\h for help with SQL commands
\? for help on internal slash commands
\g or terminate with semicolon to execute query
\q to quit
dbname=#
dbname には、必ず自分のアカウント名を入れること
データベースとWWW
• PostgreSQLによるデータベース
– psql によるコマンドラインからの操作
– 操作が面倒
• Webインターフェース
– データベースをWebインターフェースから操作
• データの挿入・修正・削除などの管理
• 検索結果の表示
– ユーザはデータベースを意識する必要はない
• 実際に多くのウェブページの裏ではデータベースが
動いている (ショッピング、各種予約など)
Webインターフェース
• Webページを経由してデータベースを操作
利用者
Webサーバ
データベースサーバ
操作
結果
SQLを使ったコマンド
ライン環境での操作
Webブラウザによる
GUI環境での操作
(データベースを意識
しなくても使える)
HTML
(+スクリプト)
HTML中にスクリプトを
記述することで、データ
ベースにアクセス
データを管理
コマンドラインインター
フェース
WWWの仕組み
• クライアントの要求に応じて、Webサーバが
HTMLファイルを返す
– URLによる表示対象(ファイル)の指定
• 例: http://www.cg.ces.kyutech.ac.jp/~oshita/index.html
プロトコル
サーバ名
ファイル名
– HTML(Hyper-Text Markup Language)
• ページの内容やレイアウトをテキストファイルで記述
• ブラウザはHTMLを解釈してページを表示
• 単純なHTMLでは、あらかじめ作成されたページしか
表示できない
– 掲示板のように内容が変化するページは実現できない
WWWの仕組み
ハードディスク
サーバー
HTML
指定されたファイルに
応じた処理を実行
要求
結果を返す
・・・
内容は固定
CGI
プログラム
・・・
内容をプログラム
により生成
クライアント
HTML
・・・
(スクリプト)
内容の一部のみ
をスクリプトによ
り変化
CGIとスクリプト言語
• CGI
– PerlやC/C++などのプログラミング言語を使って
動的にHTMLを生成する技術
– HTMLファイルの代わりに、プログラム名をURL
で指定し、プログラムの出力したテキストを表示
– プログラムには引数を指定することができる
• スクリプト
– HTMLの中にプログラムを記述しておき、そのプ
ログラムによってHTMLを動的に変化させる
– サーバサイドとクライアントサイドの2種類ある
クライアントサイド・スクリプト
• クライアント側のブラウザ上で動作するスクリプト
– JavaScript や VBScript など
– HTMLと混在したままクライアントに送られ、ブラウザ上
で実行される
• HTMLが表示された後も実行し続けることができるため、アニ
メーションや対話的操作を含む機能の実現に適している
– 最近は、AJAX (ブラウザ上でのインターフェスを実現す
る技術)の要素技術として、再び注目されている
• Google Map, Google Earth など
– Java や Flash もクライアント側で実行されるという点は同
じだが、HTML に Java や Flash のプログラムを埋め込
むという点でやや異なる
サーバサイド・スクリプト
• サーバ側で動作するスクリプト
– PHP や SSI など
– サーバ側で実行されて、HTMLテキストとしてク
ライアント側に送られる
• サーバの機能を使用できるので、データベース処理
などの高度な処理を行うのに適している
• CGIと同様にプログラムが見られる心配がない
機能の比較
• CGI
– 全てをプログラムで出力する必要があるので、
ウェブページに固定の部分と動的に生成される
部分が混在していると、固定部分の管理が面倒
• プログラムに全て埋め込み or 別ファイルから読み込
み、など
• サーバサイドスクリプト
– ウェブページの一部のみを動的に生成するのに
適している
• 固定部分と動的に生成される部分が同一ファイルで
管理される
PHP
• サーバーサイド・スクリプトの一種
– サーバ側で働くスクリプト
– HTMLとPHPスクリプトの混在したソースを記述
– サーバ側でPHPスクリプトを実行
• PHPスクリプトで出力したテキストがHTMLに追加さ
れる
– ブラウザには、最終的なHTMLが送られる
HTML + PHP 入門
HTMLの基礎
• テキスト+タグ
– タグで囲むことによって、テキストの属性を指定
する
• 例: <B>太字になります</B>
– ハイパーリンク(他のページへのリンク)などが
記述できる
– 基本的なタグ
• リンク、改行、テーブル、箇条書き
• 画像などのタグについて知りたい人は、各自、適当な
資料で勉強してください
HTMLの構成
• <HTML>
<HEAD>
ここには、ページに関する情報を記述
<TITLE>ページのタイトル</TITLE>
</HEAD>
<BODY>
ここに本文を書く。
</BODY>
</HTML>
HTMLの基本的なタグ
• <BR> 改行
• <HR> 水平線
• <A> 他のページへのリンク
<A HREF=“http://www.ces.kyutech.ac.jp”>学科のページへ</A>
<A HREF=“menu.html”>同一ディレクトリにある別のページへ</A>
<A HREF=“sub/test.html”>サブディレクトリにあるページへ</A>
<A HREF=“../index.html”>親ディレクトリにあるページへ</A>
• <TABLE>, <TR>, <TD> テーブル
• <!-- コメント -->
フォーム
• ウェブページに入力できる仕組み
– <FORM> ~ </FORM>
– 送信ボタンを押すと、指定したURLを呼び出し
– フォーム記入したデータをURLで指定したプログ
ラムに引数として送信できる
• 詳しくは、後で例を使って説明
PHPの記述
• HTML内へのPHPスクリプトの記述
– <?php ~ ?>
• 変数
– $で始まる文字列を変数とみなす
– 宣言せずに使って良い
– 型は指定しなくて良い(勝手に決まる)
PHPの記述
• 演算子
– 文字列の結合は「 . 」を使う
– +では数値型にキャストされるので注意
// 変数Xには、文字列型の ”12345678” が入る
$x = “1234” . “5678”;
// 変数Xには、整数型の (6912) が入る
$x = “1234” + “5678”;
PHPの記述
• テキスト出力
– PHPスクリプト中で文字列を出力すると、HTML
に書き出される
• ページの内容を動的に生成できる
– print( 文字列 );
• 文字列の出力 (文字列中に変数名を書くことで、変
数値を文字列に直接埋め込むことができる)
– printf( 書式付文字列, 値1, 値2, … );
• 文字列の一部に変数の値などを埋め込める
– sprintf(書式付文字列, 値1, 値2, … );
• printfと同様の出力結果を文字列として返す
PHPからPostgreSQLの操作
• 専用の関数が用意されている
– pg_ で始まる関数
– pg_connect( string option );
• データベースに接続
– pg_query( query );
• クエリーを実行
– pg_num_rows( result );
• クエリーの結果の行数を取得
– pg_fetch_result( result, i, j );
• クエリーの結果のテーブルから値を取得
– pg_close();
PHPでの引数の受け取り
• スーパーグローバル変数経由で取得
– フォーム側が GET で出力した場合
• $_GET[ 引数名 ]
– フォーム側が POST で出力した場合
• $_POST[ 引数名 ]
入力データ
が送られる
入力データを
引数として取得
SQL文を実行
入力フォーム
(html)
データ操作
(PHP)
SQL文の作成
• SQL文は文字列として扱える
– $sql = "select * from employee where id='001'";
• 注意: " はPHPの文字列の区切り、' はSQLの文字列の
区切り
• 文字列を埋め込むことで動的にSQL文を作成
できる
– $sql = "select * from employee where id='" . $id .
"'";
– $sql = "select * from employee where id='$id'";
– $sql = sprintf( "select * from employee where
id='%s'", $id );
SQL文の作成(続き)
• 引数として受け取った文字列をSQL文に埋
め込むときは、本来はサニタイズが必要
– 悪意のある利用者が $id にSQL文を記述して実
行すると、意図しない操作が実行されてしまう
• 例: $id=“ 001’; delete from employee; “ (全データが
削除される)
– 数値以外は取り除くなどの無害化処理(サニタ
イズ)が必要
– 今回の演習では、ここまでは行わない
PHPによるインターフェース作成演習
Webインターフェースの作成
• 従業員・部門のデータベースの操作
– 一覧表示、追加、削除、更新
• サンプルのHTML・PHPスクリプト
– 講義のウェブページに置いてある
http://www.cg.ces.kyutech.ac.jp/lecture/db/
• 各自ダウンロード、適宜修正して、実行して
みる
データベースの準備
• 前回の資料のやり方に従ってデータベース
を作成
– データは Moodle の講義のページに置いてある
– 自分で適当なデータを入力しても良い
• テーブルの利用権限の設定
– ウェブサーバのプロセスが実行されるときの
ユーザ webservd に、テーブルを読み書きする
権限を与える(psql の grant コマンドを使用)
– ※ このユーザ名は、サーバの設定により異なる
ターミナルでの操作
[email protected] > psql dbname -h popura.ces.kyutech.ac.jp
Welcome to psql 7.3.2, the PostgreSQL interactive
terminal.
・・・
dbname=# grant ALL on employee to webservd;
GRANT
dbname=# grant ALL on department to webservd;
GRANT
dbname には、必ず自分のアカウント名を入れること!
ウェブページの準備
• ウェブサーバ
– http://popura.ces.kyutech.ac.jp
– 今回はデータベースサーバと同じコンピュータ
※ 学科外からはアクセスできないので注意
• 以下のディレクトリにファイルを置く
– ホームディレクトリの public_html ディレクトリ
• 以下のURLでアクセスできる
– http://popura.ces.kyutech.ac.jp/~ユーザ名/
演習手順
• データベースの準備
– テーブルの作成、データの追加(前回終了)
– テーブルの利用権限の設定
• html(php) ファイルの作成
– 講義のページからダウンロードした menu.html
を適切な場所に置き、表示されることを確認
– 同じく employee_list.php を置き(一部修正が必
要)、従業員一覧が表示されることを確認
– 他のファイル(追加、更新、削除)についても、動
作を確認 → 演習問題
インターフェースの作成
• 作成する機能
–
–
–
–
–
従業員データの一覧表示
従業員データの追加
従業員データの追加(その2)
従業員データの削除
従業員データの更新
サンプルページの構成
• メニュー(menu.html)
→ 一覧表示(employee_list.php)
→ 追加フォーム(exmployee_add.html)
→ 追加処理(employee_add.php)
→ 追加フォーム(動的生成版)(exmployee_add_form.php)
→ 追加処理(employee_add.php)
→ 削除フォーム(employee_delete.html)
→ 削除処理(employee_delete.php)
→ 削除フォーム(動的生成版) (employee_delete_form.php)
→ 削除処理(employee_delete.php)
→ 更新フォーム(employee_update_form1.html)
→ 更新フォーム(employee_form2.php)
→ 更新処理(employee_update.php)
メニュー
• メニュー(menu.html)
– <HTML> <HEAD> <TITILE> <BYDY>
– <UL>~</UL> <LI> によるリスト
– 各機能のページへのリンク
<A HREF=“…”> ~ </A>
一覧表示
• 一覧表示(exmployee_list.php)
– PHPプログラムの開始 (12行目)
– データベースへの接続 (16行目)
• データベース名を、各自の名前に変更する必要があ
る (前回の資料の通りに作業していれば、自分のア
カウント名でデータベースを作成しているはず)
• 接続情報を $conn に記録
– SQL文を実行 (26, 29行目)
• 全従業員のデータを取得
• 検索結果が $result に格納される
一覧表示(続き)
• 一覧表示(exmployee_list.php)
– 検索結果の行数・列数を取得(37, 38行目)
• SQL文で4つの出力属性を指定しているため、列数は
必ず4になる
– テーブルを使って結果を表示(42~69行目)
• <TABLE> <TR> <TD>
– 各データ(検索結果の各行)の情報を表示
(53~65行目)
– 検索結果から属性値を順番に取得(59行目)
• pg_fetch_result( 結果, 行番号, 列番号 )
追加
• 追加フォーム(exmployee_add.html)
– HTMLのフォームを使ってデータを入力できるよ
うにする
– 各データの変数名を指定(次のページでデータ
を受け取るために必要)
• 追加処理(exmployee_add.php)
– 前のページで入力されたデータをもとに、データ
追加のためのSQL文を作成し、実行
追加
• 追加フォーム(exmployee_add.html)
– フォームの開始(9行目)
• <FORM ACTION=“~” METHOD=“~” >
– 各入力フィールド(12~28行目)
• <INPUT TYPE =“~” NAME=“変数名” >
追加
• 追加処理(exmployee_add.php)
– データベースへの接続などは、一覧表示と同じ
(省略)
– フォームから渡された引数を取得(11~14行目)
• $GET[ 変数名 ]
• 取得データを変数に格納 $id, $dept_no, $name, $age
– データ追加のためのSQL文を作成(28行目)
• ここでは、sprintf を使う方法を使用 (前のスライドで
説明した通り、別の方法を使っても構わない)
– メッセージを表示して終了
追加フォームの動的生成
• 全てのデータを入力するのは大変、また、一
部のデータは入力可能なデータが限られる
– 例えば、部門番号には、外部参照整合性制約
があるので、存在しない部門の部門番号は入力
できない
• 適切な初期値や選択肢を表示することで、
入力を簡便化したり、不適切なデータが入力
されることを防止したりできる
追加フォームの動的生成
• 追加フォーム2(exmployee_add_from.php)
– html ではなく php である点に注目
• phpスクリプトを使って動的にフォームを生成する
– 従業員番号の初期値を取得(26~48行目)
• 最大の従業員番号 +1
– 部門の選択肢を取得(62~75行目)
– 残りの項目には変更はないので、php スクリプト
が終わった後に html として記述(85~96行目)
削除
• 削除フォーム(exmployee_delete_form.html)
– 削除する従業員の従業員番号を入力
• 削除処理(exmployee_delete.php)
– 指定された従業員番号のデータを削除
(DELETE構文 → 各自記述)
• プログラムの中身は、これまでと同じなので、
説明は省略
削除フォームの動的生成
• 削除指定フォーム(動的生成版)
(exmployee_delete.php)
– 従業員の一覧表示 + 従業員の選択ボタンの表
示
• プログラムの実現方法は、これまの方法の
組み合わせなので、説明は省略
更新
• 更新指定(exmployee_update_form1.html)
– どの従業員のデータを更新するかを指定
• 更新フォーム(exmployee_update_form2.php)
– 指定された従業員の現在の属性値を表示し、修
正するためのフォームを表示
• 更新処理(exmployee_update.php)
– データを受け取って更新処理
(UPDATE構文 → 各自記述)
演習問題
1.一覧表示を行なうPHPプログラムを修正し、
従業員の一覧が、年齢の高い順に表示され
るようにせよ(exmployee_list.php)
2.削除処理を行なうPHPプログラムに削除処
理のためのSQLを追加し、削除が正しく動く
ようにせよ(exmployee_delete.php)
3.更新処理を行なうPHPプログラムに削除処
理のためのSQLを追加し、更新が正しく動く
ようにせよ(exmployee_update.php)
• 修正内容をファイルに記述して、提出
レポート課題
レポート課題
• データベースの作成
– 自分の好きなテーマを題材にして、データベースとWeb
インターフェースを作成
• 手順
– スキーマの設計
• データベースに格納するデータを決めて、思いつく属性を挙げる
→ 正規形を満たすように正規化
– テーブルの作成、適当なデータの追加
– Webインターフェースの作成
• なるべく実用的に使えるような検索機能などを追加
• レポートの提出方法は次回以降に連絡(約1ヶ月後
の締め切りを予定)
1. スキーマの設計
• 思いつく全ての属性を挙げて1つのリレー
ションとし、全ての関数従属性を列挙
– 従業員(従業員番号、氏名、年齢、部門番号、
部門名、部門代表、担当顧客番号1、担当顧客
番号2、・・・、住所、電話番号)
• ヒント: 属性値が複数ある場合は、上の例のよう
に ・・・ などとしておき、最初に、第1正規形を満たす
ように、複数のリレーションに分解する
– 候補キー
– 関数従属性
• 部門番号 → 部門名、 ・・・ → ・・・、 ・・・
1. スキーマの設計(続き)
• 各正規形を満たすかどうか順番に検証して、
分解
– ・・・より、第?正規形を満たす or
・・・より、第?正規形を満たさないので、分解
• 最終的に得られたスキーマを示す
• 必ず最初は1つのスキーマとして、段階的に
分解していくこと
– 正規化の練習なので、最初から正規化済みの
複数のスキーマを挙げているものは減点とする
2. データベースの作成
• テーブルの作成
– 設計したリレーションスキーマをもとに、複数の
テーブルを作成する
– テーブル名、属性名は、適当にアルファベットに
変更する
• データの追加
– インターフェースのテストに必要な最低限のデー
タを追加する(最低20個程度)
• レポートには、テーブルの作成に使用した
sql と、データの一覧を示す
3. Webインターフェースの作成
• Webインターフェースを作成する
– 一覧表示
– 追加 (フォームの動的生成に対応)
– 検索
• なるべく実用的な検索機能をつけること
– 削除、更新
• レポート
– 全体のページの構成、各ファイルの説明(フォームから
渡す引数、フォームの動的生成の方法、検索処理で使
用しているSQL文、など)を必ず書くこと
– どのようにしてインターフェースを実現しているかが分る
ようなレポートを作成する (インターフェースができてい
ても、説明が不十分であれば、大幅に減点となる)
次回予告
• 後半の講義に戻る
– データベースシステムの内部処理
• 物理的データ格納方式
– リレーションがどのようにハードディスクに記録さ
れるか
– どのような問題に気を付ける必要があるか
– アクセスを高速化するためのデータ構造
ダウンロード

ppt