この記事は約11分で読めます。

プログラミング

【挫折させないWebアプリ開発講座⑩】Webアプリを使いやすく改造しよう

この記事は約 11 分で読めます。
YUMA
こんにちは。4年も挫折してたエンジニア社長のYUMAです。

第9回のデータベースからの取り出し編ではソースコードで取り出す番号を指定しましたね。

今回はもっとWebアプリっぽくするためにブラウザから数字を受け取って、番号に応じた名前を取り出すアプリに改造していきましょう！

動画解説はコチラ

【挫折させないWebアプリ講座⑨】MySQLからデータを取り出そう

2017.06.09

IDから調べる機能を追加

まずはID(数字)からレコードを調べる機能を作っていきますね。

レコードとはデータベースの行のこと。ID番号に対応する名前を取り出す。

ID = 1を指定するとUchidaが対応して、3を指定するとFrogが対応するイメージです。

スクリーンショット 2017 06 29 11 39 48

では、いつものごとくCloud9にログインします。

ID選択用ファイルを作成

何もないところで右クリック。ID選択用ファイル「select.php」を新規で作成します。

スクリーンショット 2017 06 27 14 43 45

select.phpを作成したら中身を書いていきます。

セッション部分をコピペ

ユーザーから受け取ったIDを別ページまで持ち越す必要があるので、セッションを使います。そのため、セッション部分をコピー
スクリーンショット 2017 06 29 14 58 55

コピーしたものをselect.phpにペースト
スクリーンショット 2017 06 29 14 58 19

HTMLのフォームも流用

実はHTML部分も使いわましができるんですよ。第8回でユーザーからデータを受け取るためにフォームを使用しましたね。これを流用します。

【挫折させないWebアプリ講座⑧】PHPとMySQLを連携してデータを保存してみよう

2017.06.04

index.phpのHTML部分をまるまるコピー。
スクリーンショット 2017 06 27 14 45 44

select.phpのphp閉じ(?>)の下へペースト。
スクリーンショット 2017 06 27 14 46 03

コピペしたフォームを修正(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に直してあげます。

intとは変数の数値型を表し、整数しか入らなくなる

さらに、今回はIDを受け取るので2行目を

<input type="int" name="id">

 

というふうに名前をidに変えてあげましょう。

スクリーンショット 2017 06 27 14 47 03

こんなコードになってたら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

このようになっていれば順調に進んでいます。

IDを受け取ったら名前表示ページへ移動

最後にview.phpに移動すればいいので、header関数を使って移動しましょう。

if(isset($_POST['datapost'])){
  $_SESSION[id] = $_POST['id'];
　header('Location: view.php');
}

 

スクリーンショット 2017 06 27 14 49 21

こうなっていればselect.phpは完成です！あと1/3がんばりましょう。

表示部分を仕組みを変更

ここまでをおさらいすると、

  1. select.phpでユーザーがIDを入力
  2. IDをセッションに保存
  3. IDを持ってview.phpに移動

では次にセッションに保存したIDをSQL文に組み込む処理をview.phpに作っていきましょう。

おさらい：SQL文とはデータベースを操作する文でしたね。

view.phpの9行目をご覧ください。

id = 1;

というように1行目を指定してあるはずです。今回はユーザーから受け取った値なので$_SESSION[‘id’]になりますね。

id = $_SESSION['id'];

に変更しましょう。これでユーザーから受け取った値でSQL文が組めるようになるます。

スクリーンショット 2017 06 27 14 52 44

トップページからのリンクを整理

さて最後、トップページのリンクを変更してあげましょうね。

ID検索リンクを作る

画像のようにhrefの中身とリンク文字列aタグに挟まれた部分を変更。

スクリーンショット 2017 06 27 14 49 54

保存してプレビュー画面を更新するとこうなっていますか？

スクリーンショット 2017 06 27 14 51 30

動作確認

いよいよ完成しましたね！では最後に動作確認を行いましょう！

登録した数より小さい数字を入力してみください。

プログラミング講座の都合上、登録されていない数字は入力しないでください。
スクリーンショット 2017 06 27 18 51 58 スクリーンショット 2017 06 27 18 52 03

この画面ならOK

このようにID番号と対応する名前が確認できればOKです！お疲れ様でしたm(_ _ )m

スクリーンショット 2017 06 27 18 52 34
今回作ったプログラムはわかりやすくするために’例外’を考慮していません。例えば、DBに存在しないIDが入力された場合など。

例外処理は今企画している作りながら覚える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>

 

ITスキルで人生の不安を軽くするメールマガジンやっています！

登録はこちらから

この記事をシェアする

RECOMMENDこちらの記事も人気です。