Navigate
X

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

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

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

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

動画解説はコチラ

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

2017.06.09

IDから調べる機能を追加

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

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

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

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

ID選択用ファイルを作成

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

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

セッション部分をコピペ

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

コピーしたものをselect.phpにペースト

HTMLのフォームも流用

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

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

2017.06.04

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に直してあげます。

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

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

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

 

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

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

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

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

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

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

 

こうなっていれば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文が組めるようになるます。

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

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

ID検索リンクを作る

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

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

動作確認

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

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

プログラミング講座の都合上、登録されていない数字は入力しないでください。

この画面ならOK

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

今回作ったプログラムはわかりやすくするために’例外’を考慮していません。例えば、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>

 
Related Post
  1. 【初心者必見】データベースの基礎〜初心者が学ぶべきデータベースとは？〜

    この記事では、データベースの基…

  2. 【初心者がpythonでWebアプリ開発 】メリットとデメリットを知ると流行りに惑わされない〜

    この記事では初心者がPytho…

  3. 【Webアプリ開発の勉強方法】独学者に勉強方法を迷わせないコツを紹介

    この記事では、Webアプリ開発…