データベース設計 第９回 Webインタフェースの作成（１） 2010.12.08 データベース設計 第９回 Webインタフェースの作成（１） 坂口利裕
Webサーバーとの連携によるDB操作 必要なもの（サーバー側） 学習順序 DBサーバー Webサーバー CGIを構成するためのプログラミング言語～PHP DBサーバーの操作を行える（ように拡張機能を持たせた）もの CGIによるデータを処理できる（ように拡張機能を持たせた）もの 学習順序 Webページ作成の基本（１）～HTMLによるWebページ作成 PHPの基本（１）～プログラミングの基本 PHPの基本（２）～PHPによるDB操作 Webページ作成の基本（２）～フォームによるデータ送信 PHPの基本（３）～フォームによるデータ受信 2010.12.08 データベース設計
Webサーバー上のファイル構成（１） Webページを生成するファイルを用意 ユーザー領域のWebページ HTMLによるもの フォルダ public_html 各ユーザーのホームディレクトリ上に用意 ファイル名の最後（拡張子）が .html のもの （PHPの）インライン機能によるもの ファイル名の最後（拡張子）が .php のもの 2010.12.08 データベース設計
Webサーバー上のファイル構成（２） HTML ホームディレクトリ public_html これらのファイルが直接公開される PHP その他のファイルやフォルダ その他 公開用 これらは直接には公開できない 公開時のURL http://orion.yokohama-cu.ac.jp/～ユーザ名/ファイル名 2010.12.08 データベース設計
Webページ作成の基本（１） ～HTMLによるWebページ作成 HTML（Hyper Text Mark-up Language） ファイルの内容は，タグ<機能名 【オプション=“…” 】>による装飾やアンカー指示を伴ったテキスト文書 ファイル名の最後は必ず ~.html とする 内容の一般的構成 <html> <head><title>文書タイトル</title></head> <body> 文書内容 </body> </html> 2010.12.08 データベース設計
PHPの基本（０）～PHPとは Webサーバーと協調動作する補助言語 クライアントと協調動作する補助言語の代表 JavaScriptなど 一般のHTMLはそのままクライアントへ転送 PHPによるものは，プログラム表現されたものを“送信前に（サーバー側で）”処理を施し，その結果をHTMLにしてクライアント側へ転送 動的なWebページを生成するのに有効な手段 HTML PHP （＋HTML) Webサーバー PHP拡張 HTML 具体例：動的ページと静的ページの比較 クライアントへ 2010.12.08 データベース設計
PHPの基本（１）～プログラミングの基本 文 定数 変数 表示 演算 条件判断 反復 関数呼び出し プログラムの先頭：<?PHP プログラムの末尾：?> 文の最後はセミコロン； // は行末まで注釈 定数 数字： 0123456789 +- . 文字列： “ … “ または ‘ … ‘ 変数 単純： $英数字 配列： $英数字[数字] $英数字[文字列] 表示 print 対象 ; 演算 四則演算： ＋－＊／ 剰余： ％ インクリメント：＋＋（１つ増やす） デクリメント：－－（１つ減らす） 条件判断 if( … ) { … } 【else { … } 】 反復 条件付： while(…) {…} 回数： for(;;) {…} 関数呼び出し 演算式の中などで使用 関数名（【引数（引数）】 2010.12.08 データベース設計
PHPの基本（２）～PHPによるDB操作 データベースの接続 SQL文の実行 フィールド内容の順次取り出し データベース処理の終了 $db = pg_connect(“host=localhost dbname=ユーザ名 user=ユーザ名”) ; SQL文の実行 $rows = pg_exec($db, “SQL文”) ; select文の結果は配列変数として返される フィールド内容の順次取り出し while ( $row = pg_fetch_assoc($rows) ) { $row[“フィールド名”] で参照 } データベース処理の終了 pg_close( $db ) ; 2010.12.08 データベース設計
Webページ作成の基本（２） ～フォームによるクライアントからのデータ送信 <form>タグを使用 <form method=“post” action=“送信先URL”> フォームの内容 </form> フォームの内容（今回使用するもの） 入力欄 <textarea name=“識別名” rows=“行数” cols=“列数”>初期内容</textarea> 送信ボタン <input type=“submit” value=“名前”> クリアボタン <input type=“clear” value=“名前”> 2010.12.08 データベース設計
PHPの基本（３） ～フォームによるサーバー上でのデータ受信 送信されたデータを格納した配列変数 特殊な変数名で格納 $_POST 値の参照 $_POST[“識別名”] 送信前の状態では $_POST は無効 送信前の処理（フォームの表示など）と送信後の処理（DBへのアクセス）の切替が可能 if( $_POST ) { 送信後の処理} else { 送信前の処理 } 2010.12.08 データベース設計
サーバーへのファイル群の作成手順 方法１（サーバー上で直接作業） 方法２（クライアント側での作業結果をサーバーに転送） TeraTermを使って接続 エディタコマンド vi などを使用して直接作業 UNIXやLinuxに慣れていないと困難 方法２（クライアント側での作業結果をサーバーに転送） Windows側でファイルを作成 FTPでサーバーに送信 ファイル修正のたびにサーバーへの送信が必要 方法３（サーバー上のファイルをクライアント側で操作） サーバーのフォルダをWindowsのドライブに結合（ファイル共有）して使用 Windows側のエディタでサーバー内のファイルを直接編集 実習室で行うには一番現実的 2010.12.08 データベース設計
サーバー上のフォルダの作成 ［マイコンピュータ］アイコンを使用 公開Webページのためのフォルダを作成 データベース設計 2010.12.08 サーバー上のフォルダの作成 ［マイコンピュータ］アイコンを使用 Windowsの X:ドライブのフォルダ unix → Windowsからアクセスして利用可能 公開Webページのためのフォルダを作成 ［ファイル］［新規作成］［フォルダ］ public_html に名前変更（すべて半角・小文字，アンダースコア“_”を抜かさぬように注意） 2010.12.08 データベース設計 坂口利裕
Webページ用ファイルの作成手順 いきなりゼロから作るのは難しいので．．． ファイルの修正 データベース設計 2010.12.08 Webページ用ファイルの作成手順 いきなりゼロから作るのは難しいので．．． 授業のホームページからダウンロードした見本を利用 ZIP圧縮したファイルを展開 展開されたファイルを x:ドライブの unix/public_html にコピー ファイルの修正 EmEditorを起動して x:ドライブのファイルをドラッグ＆ドロップ ファイルを右クリックして「EmEditor」を選択してもよい エンコードのエラー（文字化け）がある場合は，エンコードを「日本語（EUC）」などに指定して読み直し 保存時には エンコード：日本語EUC 改行方法：UNIX（LFのみ） であることを確認（必要なら変更） 2010.12.08 データベース設計 坂口利裕