![](/wp-content/uploads/2017/05/uchida.jpg)
第9回のデータベースからの取り出し編ではソースコードで取り出す番号を指定しましたね。
今回はもっとWebアプリっぽくするためにブラウザから数字を受け取って、番号に応じた名前を取り出すアプリに改造していきましょう!
目次
動画解説はコチラ
IDから調べる機能を追加
まずはID(数字)からレコードを調べる機能を作っていきますね。
ID = 1を指定するとUchidaが対応して、3を指定するとFrogが対応するイメージです。
![スクリーンショット 2017 06 29 11 39 48](/wp-content/uploads/2017/06/60d48e7350468aa3b41218f4b8be472e.png)
では、いつものごとくCloud9にログインします。
ID選択用ファイルを作成
何もないところで右クリック。ID選択用ファイル「select.php」を新規で作成します。
![スクリーンショット 2017 06 27 14 43 45](/wp-content/uploads/2017/06/421f0cf6f866348edd1530b6a1a582ee.png)
select.phpを作成したら中身を書いていきます。
セッション部分をコピペ
ユーザーから受け取ったIDを別ページまで持ち越す必要があるので、セッションを使います。そのため、セッション部分をコピー
コピーしたものをselect.phpにペースト
HTMLのフォームも流用
実はHTML部分も使いわましができるんですよ。第8回でユーザーからデータを受け取るためにフォームを使用しましたね。これを流用します。
index.phpのHTML部分をまるまるコピー。
select.phpのphp閉じ(?>)の下へペースト。
コピペしたフォームを修正(select.php)
さて今のselect.phpは↓のようになっていますか?
<?php session_start(); ?> <html lang="ja"> <head> <meta charset="UTF-8"> <title>PHP_TEST</title> </head> <body> <h1>ID選択画面</h1> <p>IDを入力してください</p> <form action="" method="post"> <input type="text" name="name"> <input type="submit" name="datapost"> </form> </body> </html>
もし合っていなかったら修正してみてくださいね。
ここまでできたら↓のフォームの中身を修正しましょう。
<form action="" method="post"> <input type="text" name="name"> <input type="submit" name="datapost"> </form>
このコードは名前登録システムからコピーしたものなので、2行目がtype=”text”、name=”name”となっていますね。
名前を受け取る時のtypeはtextでしたが、IDは数字なのでintに直してあげます。
さらに、今回はIDを受け取るので2行目を
<input type="int" name="id">
というふうに名前をidに変えてあげましょう。
![スクリーンショット 2017 06 27 14 47 03](/wp-content/uploads/2017/06/ec9aceb80e742c810a313132c8d4bc27.png)
こんなコードになってたらOK!
select.phpにID受け取りコードを追記
ここまでで半分終わりましたよ。残り半分もサクサクいきましょう!
では次に送信ボタンを押すとユーザーからもらったIDを持ってviwe.phpに移動する処理を書いていきますよ。
if文を使って「もしボタンが押されたら」という条件を作ります。
if(isset($_POST['datapost'])){ //ボタンが押された後の処理を書く }
これでボタンが押された場合のみifの中身が実行されるのは覚えていますか?
送信ボタンの名前が”datapost”なので、$_POST[‘datapost’]に値がセットされるのは送信ボタンが押された時だけなのです。
次はユーザーからもらったIDをセッションに入れればいいので
if(isset($_POST['datapost'])){ $_SESSION[id] = $_POST['id']; }
これでOKですね!
![スクリーンショット 2017 06 29 15 25 03](/wp-content/uploads/2017/06/4c7c9adac15a1f409412ce09bf0e28f3.png)
このようになっていれば順調に進んでいます。
IDを受け取ったら名前表示ページへ移動
最後にview.phpに移動すればいいので、header関数を使って移動しましょう。
if(isset($_POST['datapost'])){ $_SESSION[id] = $_POST['id']; header('Location: view.php'); }
![スクリーンショット 2017 06 27 14 49 21](/wp-content/uploads/2017/06/f1f94a3a42c9f1f3caca65ddb800c21b.png)
こうなっていればselect.phpは完成です!あと1/3がんばりましょう。
表示部分を仕組みを変更
ここまでをおさらいすると、
- select.phpでユーザーがIDを入力
- IDをセッションに保存
- IDを持ってview.phpに移動
では次にセッションに保存したIDをSQL文に組み込む処理をview.phpに作っていきましょう。
view.phpの9行目をご覧ください。
id = 1;
というように1行目を指定してあるはずです。今回はユーザーから受け取った値なので$_SESSION[‘id’]になりますね。
id = $_SESSION['id'];
に変更しましょう。これでユーザーから受け取った値でSQL文が組めるようになるます。
![スクリーンショット 2017 06 27 14 52 44](/wp-content/uploads/2017/06/6dd4f795d47e7890a0df3e2f3a266f9a.png)
トップページからのリンクを整理
さて最後、トップページのリンクを変更してあげましょうね。
ID検索リンクを作る
画像のようにhrefの中身とリンク文字列aタグに挟まれた部分を変更。
![スクリーンショット 2017 06 27 14 49 54](/wp-content/uploads/2017/06/5bb46574da6beef39b59d0d98d39fa4f.png)
保存してプレビュー画面を更新するとこうなっていますか?
![スクリーンショット 2017 06 27 14 51 30](/wp-content/uploads/2017/06/2ef3748f03fcd7e0946fe7e891b40fe2.png)
動作確認
いよいよ完成しましたね!では最後に動作確認を行いましょう!
登録した数より小さい数字を入力してみください。
![スクリーンショット 2017 06 27 18 51 58](/wp-content/uploads/2017/06/d5980dce9835d78df0698fcd929d8d9e.png)
![スクリーンショット 2017 06 27 18 52 03](/wp-content/uploads/2017/06/6f71217bf5ef559762564ee6eef726c4.png)
この画面ならOK
このようにID番号と対応する名前が確認できればOKです!お疲れ様でしたm(_ _ )m
![スクリーンショット 2017 06 27 18 52 34](/wp-content/uploads/2017/06/6ec2f016d5c4ea48037da07695835cf9.png)
例外処理は今企画している作りながら覚えるWebアプリ開発講座でじっくり勉強していきます。
まとめ、次回予告
phpを学ぶと同時にHTMLにも慣れてきましたか?WebアプリというのはHTMLとの連携が重要なので是非ともHTMLも書けるようになってくださいね!
いよいよ次回は最終回。セキュリティに考慮したプログラムへと修正して初級編を完了したいと思います。
最後までお楽しみに!
完成コード
index.php
<?php session_start(); if(isset($_POST['datapost'])){ $_SESSION['name'] = $_POST['name']; header('Location: regist.php'); } ?> <html lang="ja"> <head> <meta charset="UTF-8"> <title>PHP_TEST</title> </head> <body> <h1>お名前プログラム</h1> <p>お名前を入力してください</p> <form action="" method="post"> <input type="text" name="name"> <input type="submit" name="datapost"> </form> <a href="select.php">IDから探す</a> </body> </html>
regist.php
<?php session_start(); try{ $pdo = new PDO('mysql:host=localhost;dbname=test;charset=utf8','kaeru3','',array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION)); } catch (PDOException $e) { exit('データベース接続失敗。'.$e -> getMessage()); } $name = $_SESSION['name'];//ユーザーから受け取った値を変数に入れる $stmt = $pdo -> prepare("INSERT INTO name(uname) VALUES(:name)");//登録準備 $stmt -> bindValue(':name', $name, PDO::PARAM_STR);//登録する文字の型を固定 $stmt -> execute();//データベースの登録を実行 $pdo = NULL;//データベース接続を解除 ?>
view.php
<?php session_start(); try{ $pdo = new PDO('mysql:host=localhost;dbname=test;charset=utf8','kaeru3','',array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION)); } catch (PDOException $e) { exit('データベース接続失敗。'.$e -> getMessage()); } $id = $_SESSION['id']; $stmt = $pdo -> prepare("SELECT * FROM name WHERE id=:id"); $stmt -> bindValue(':id', $id, PDO::PARAM_INT); $stmt -> execute(); $data = $stmt -> fetch(); $pdo = NULL; ?> <html lang="ja"> <head> <meta charset="UTF-8"> <title>PHP_TEST</title> </head> <body> <h1>名前表示</h1> <p>通し番号:<?php echo $data['id']; ?></p> <p>お名前:<?php echo $data['uname']; ?></p> </body> </html>
select.php
<?php session_start(); if(isset($_POST['datapost'])){ $_SESSION[id] = $_POST['id']; header('Location: view.php'); } ?> <html lang="ja"> <head> <meta charset="UTF-8"> <title>PHP_TEST</title> </head> <body> <h1>ID選択画面</h1> <p>IDを入力してください</p> <form action="" method="post"> <input type="int" name="id"> <input type="submit" name="datapost"> </form> </body> </html>