Webデザイン特別プログラム データベース実習編4 首相データベースの作成 静岡理工科大学 総合情報学部 幸谷智紀 http://na-inet.jp/ 本日の目標 • 首相データベース(名簿データベース)の作 成 – 見栄えの調整(HTML, CSSレベル) – ユーザフレンドリーな機能の追加 – PHPスクリプトの整理・統合 • Twitterもどきシステムの作成 システムの全体図 PHPからSQL文を使ってMySQLを操作する例 • PHPスクリプトは HTML内部に埋め 込んで作成する。 • mysql_connect関 数でMySQLに接 • mysql_close関数 で切断 • SQL文を実行する のはこの間。 作成手順 1. prime_ministerフォルダを作成→index.htmlを作ってリ ンクを順次追加していく。 2. template.phpを作成・・・「MySQLに接続→データベー スを開く→接続を切る」だけのスクリプトを作り,きちん と動作するかを確認 3. template.phpをコピーして下記の6つのスクリプトを順 に作成していく 1. 2. 3. 4. 5. show_all.php・・・全件表示 insert.php・・・データの追加 delete_update.php・・・データの削除・更新を選択 delete_exec.php・・・データの削除実行 update_input.php・・・データの更新入力・実行 template.php(1/4) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>首相データベース:テンプレート</title> </head> <body> <h1>首相データベース:テンプレート</h1> <hr> template.php(2/4) <?php // データベース,テーブル名 $database = "prime_minister"; $table = "japanese"; // DBに接続 if(!$con = mysql_connect("localhost", "root", "")) { echo "DB接続不可!¥n"; exit; } template.php(3/4) // DB選択 if(!mysql_select_db($database, $con)) { echo "DB選択エラー!¥n"; exit; } // ここから↓ この部分にSQL文を埋め込み,実行する echo "OK!<br />¥n"; // ここまで↑ // DB切断 mysql_close($con); ?> template.php(4/4) <hr> <a href="index.html">戻る</a> </body> </html> • まずはこれを実行して”OK!”という表示が出る ことを確認せよ! show_all.php // 全データ取得 $sql = "SELECT * FROM " . $table; // SQL文確認 echo $sql . “<br />¥n”; ←確認不要時にはコメントにしておく $result = mysql_query($sql); while($data = mysql_fetch_array($result, MYSQL_ASSOC)) { echo "id: " . $data['id'] . " name: " . $data['name'] . " yomigana: " . $data['yomigana'] . "<br>¥n"; } insert.php(1/2) SQL発行部分 if((isset($_POST['name'])) && (isset($_POST['yomigana']))) { $sql = "INSERT INTO " . $table . "(name, yomigana) VALUES( '" . $_POST['name'] . "', '" . $_POST['yomigana'] . "')"; if(!mysql_query($sql)){ echo "登録失敗!: " . $sql . "<br />¥n"; } else { echo "登録成功!: " . $sql . "<br />¥n"; } } insert.php (2/2) フォーム部分 // DB切断 mysql_close($con); ?> <form method="POST"> 名前: <input type="text" name="name" width="32"><br> 読みがな: <input type="text" name="yomigana" width="64"><br> <input type="submit" value="追加"> <input type="reset" value="消去"> </form> • PHPスクリプト部分とは独立に,静的HTMLとして作成 delete_update.phpのキモ • 各データごとに「削除」(delete_exec.phpへ)か「更 新」(update_exec.phpへ)を選択させる。 • ユーザに見せる必要は無いが,delete_exec.php, update_exec.phpに渡すべきデータは”hidden”タイ プにして隠しておく。 echo '<td><form action="delete_exec.php" method="POST"><input type="submit" value=" 削除"><input type="hidden" name="id" value="' . $data['id'] . '"></form></td>'; delete_exec.php • DELETE文を発行するだけなので,自分で SQL文を確認して作成してみよ! update_exec.phpのキモ • $_POST[‘update_exec’] == “on”の時のみ 更新(UPDATE文)を実行 • そうでなければ更新のためのフォームを表示 完成したら・・・ 可能ならば次の工夫を追加してみること 1. 見栄えの調整・・・HTML, CSSの工夫 2. delete_exec.php, update_exec.phpは,削 除・更新前に「これでよろしいですか?」とい う確認表示を入れる。 3. delete_exec.php, update_exec.phpの機 能を全てdelete_update.phpにまとめる。 次の課題 • Twitterもどき(Webチャット)システムを下記の 仕様で作れ – データベース名:twitter – テーブル名: sample – フィールド数:3 • INT id • VARCHAR(32) username • TEXT(256) message – PHPスクリプト・・・twitter.phpのみ 作成例 • この部分で,ユーザ名 (username)とメッセージ (message)を入力・追加。 • この部分で既存のメッセ ージをidの逆順で表示。 [SQL文] SELECT * FROM テーブ ル名 ORDER BY id DESC
© Copyright 2024 Paperzz