php データベースのデータを編集する
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

データベースのデータを編集する

php|2018年11月13日

2018年11月13日
  • このエントリーをはてなブックマークに追加

今回は、登録したデータを「編集」してみましょう。
作り方にもよりますが、編集するには、2つの仕組みが必要になります。

  1. データを呼び出す。
  2. 呼び出したデータを編集して保存し直す。

流れとしては、当たり前のことなのです。
しかし、これをphpにするとどうなるでしょう。

データは、投稿idを元に呼び出すことが可能です。
投稿一覧を作る時に、すでにidは呼び出されていますよね。

このIDを使って、URLリンクを作りましょう。
例えば、こんな感じです。

https://base91.net/mission/php/8/?edit=33

URLのあとに、?edit=33とついているのが分かるでしょうか。
こうした形のURLで提示される値を「URLパラメータ」と呼びます。
パラメータを通じて受け渡されたidが、投稿idとなります。
今回の場合33が投稿idにあたります。

この仕組を使えば、投稿を呼びだすことができます。
例えば「編集」ボタンをクリックした時。
パラメータつきのURLにリダイレクト(遷移)させます。
今回の場合、同じページにパラメータをつけて「再読み込み」する形です。

そして遷移先のページに

「もし?edit=がURLに存在したら、パラメータの値を取得する」

という処理を書きましょう。
先程の例であれば、33を取得します。
これで、パラメータつきのURLを開いた瞬間に投稿idを取得できます。

あとはidを元に投稿データを取得すればOKです。
33のidを持つデータを取得するのです。
これで、狙った投稿のデータは呼び出すことができますね。

次に取得したデータをフォームに入れなおします。
あとは、自由に編集して更新ボタンを押し、アップデートのSQL文で更新すればOKです。

  • 編集ボタンを押す
  • パラメータつきのURLで編集ページに遷移
  • URLパラメータを通じて、該当データのidを取得
  • 取得したidを元にデータを呼び出し
  • 呼び出したデータをフォームに入れ直す
  • 編集して保存

なんとなく、ご理解頂けたでしょうか。
流れとしては、そんなに難しくは無いように聞こえますよね。

ひとまず、以上の流れで編集機能は完成します。
さっそく、具体的な内容に入っていきましょう。

ミッションの内容

下記のファイルを再現してみてください。
基本的には、前回のファイルのアップデートです。

具体的な処理の流れは、先程ご説明した通り。
ソースコードの説明を参考にしながら、開発してみましょう。

まず、ソースコードの解説を読み、自分自信で実装してみてください。
どうしても分からない場合は回答ファイルを参考にしましょう。

ソースコードの説明を下記に記載します。
まず一通り目を通して、同時に自分のエディタで試してみてください。

ソースコードの解説

最初に全体のソースコードを確認します。
一行ずつ、ゆっくりと落ち着いて確認してみてください。
冷静に考えれば、それほど難しいものではありません。
データの流れを1つずつ確認してみましょう。

<?php
    require_once "functions/db.php";
         
    //URLパラメータを取得します。
    //URLの後ろに?edit=123のような感じでつくのがURLパラメータです。
    $editId = $_GET["edit"];
    //GETでパラメータを取得することができます。
    //urlから編集対象データのidを受け取ります。
         
    //受け取ったidに一致するデータをデータベースから呼び出して、、、
    $userdataEdit = "select * from userdata where id = '".$editId."' order by id DESC"; 
    $userdataEdit = mysqli_query($mysqli,$userdataEdit);
         
    //もしデータが存在していたら、変数に格納します。
    while ($userdataEditArray = mysqli_fetch_assoc($userdataEdit)) {
        $name = $userdataEditArray["name"];
        $age = $userdataEditArray["age"];
        $skill = $userdataEditArray["skill"];
    };
         
    //データの数を数えます。
    //もしデータが存在していれば1になります。
    //この変数は後で使います。
    $userCount = $userdataEdit->num_rows;
         
    //もし、フォームから投稿された(POSTされた)場合、、
    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
             
        //投稿されたデータを受け取ります。
        $name = htmlspecialchars($_POST['name'], ENT_QUOTES);
        $age = htmlspecialchars($_POST['age'], ENT_QUOTES);
        $skill = htmlspecialchars($_POST['skill'], ENT_QUOTES);
             
        //ここで、データの数をカウントした$userCountを使います。
        //もしデータがデータベースの中に存在したら(数が0じゃなければ)、、、
        if($userCount !== 0){
            //$editIdに一致したデータに上書きします。
            $result = mysqli_query($mysqli,"update userdata set name = '".$name."',age = '".$age."',skill = '".$skill."' where id = '".$editId."'");
        }elseif (!empty($name)||!empty($age)||!empty($skill)){
            //もしデータが0だったら新規で追加します。
            $result = mysqli_query($mysqli,"insert into userdata(name,age,skill) VALUES('$name','$age','$skill')");
           };
         
       };
             
?>
     
<!--パラメータをつけたURLだと編集画面になります。パラメータ無しのURLが新規追加になります。-->
<div style="padding-bottom:15px;">
    <a href="https://base91.net/mission/php/8/">新規追加</a>
</div>
     
<h1>登録フォーム</h1>
<form method="post" action="">
    <!--$editIdがURLパラメータから取得された場合、該当のデータを予めvalueに入れておきます。-->
    <input type="text" name="name" placeholder="お名前" value="<?php echo $name; ?>" /><br/>
    <input type="text" name="age" placeholder="年齢" value="<?php echo $age; ?>" /><br/>
    <input type="text" name="skill" placeholder="スキル" value="<?php echo $skill; ?>" /><br/>
    <?php if($userCount == 0): ?>
    <!--もしidに該当するデータが1つもなければ登録ボタン-->
    <input type="submit" name="submitBtn" value="登録" />
    <?php else: ?>
    <!--もしidに該当するデータが存在していれば更新ボタン-->
    <input type="submit" name="submitBtn" value="更新" />
    <?php endif; ?>
</form>
     
     
<?php
         
    $userdata = "select * from userdata order by id DESC"; 
    $userdata = mysqli_query($mysqli,$userdata);
     
    while ($userdataArray = mysqli_fetch_assoc($userdata)) {
        echo $id = $userdataArray["id"];
        echo ",";
        echo $name = $userdataArray["name"];
        echo ",";
        echo $age = $userdataArray["age"];
        echo ",";
        echo $skill = $userdataArray["skill"];
        echo "|";
        echo "<button class='deleteBtn' data-id='".$id."'>削除する</button>";
        echo "|";
        //編集ボタンを追加。editBtnを押した時にjsでURLにパラメータを付与。
        echo "<button class='editBtn' data-id='".$id."'>編集する</button>";
        echo "<br>";
    };
         
?>
<script>
         
    $(".deleteBtn").click(function(){
        var btnid = $(this).data("id");
        deleteData(btnid);
    });
         
    //編集ボタン(editBtn)をクリックすると、、
    $(".editBtn").click(function(){
        //ボタンにセットされたdata-idを取得。
        var btnid = $(this).data("id");
        //URLにパラメータをつけて再読み込み。
        window.location.href = "./?edit="+btnid;
        //次の画面でURLパラメータをphpが受け取り、処理。
        //冒頭から読み返してみてください。
    });
         
    function deleteData(btnid){
        $.ajax({
                type: 'POST',
                dataType:'json',
                url:'functions/delete_func.php',
                data:{
                    btnid:btnid,
                },
                success:function(data) {
                    window.location.href = "./";
                },
                error:function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(errorThrown);
                }
        });
    };
         
</script>

少し長いソースコードになってきましたね。
順番に、内容をご説明させて頂きます。

<?php
         
$userdata = "select * from userdata order by id DESC"; 
$userdata = mysqli_query($mysqli,$userdata);
         
while ($userdataArray = mysqli_fetch_assoc($userdata)) {
    echo $id = $userdataArray["id"];
    echo ",";
    echo $name = $userdataArray["name"];
    echo ",";
    echo $age = $userdataArray["age"];
    echo ",";
    echo $skill = $userdataArray["skill"];
    echo "|";
    echo "<button class='deleteBtn' data-id='".$id."'>削除する</button>";
    echo "|";
    echo "<button class='editBtn' data-id='".$id."'>編集する</button>";
    echo "<br>";
};
         
?>

まず、編集ボタンの設置からです。
編集ボタンは、URLに?edit=をつけて、同じページにリンクするだけです。

クリックされたら、data-idの値を取得し、URLにくっつけてリンクします。
以下、編集ボタンをクリックした時の、JavaScriptです。

$(".editBtn").click(function(){
    var btnid = $(this).data("id");
    window.location.href = "./?edit="+btnid;
});

.editBtnをクリックしたら、data-idからidが取得されます。
そしてidをURLパラメータに渡します。
window.location.hrefで?edit=を追記したURLに飛ばします。
飛ばすと言っても、同じページのURLに?edit=をつけて飛ばしているだけなので、実質、再読み込みです。

以下、URLパラメータがある場合の処理を、書いていきます。

<?php
    require_once "functions/db.php";
    $editId = $_GET["edit"];
         
    $userdataEdit = "select * from userdata where id = '".$editId."' order by id DESC"; 
    $userdataEdit = mysqli_query($mysqli,$userdataEdit);
         
    while ($userdataEditArray = mysqli_fetch_assoc($userdataEdit)) {
        $name = $userdataEditArray["name"];
        $age = $userdataEditArray["age"];
        $skill = $userdataEditArray["skill"];
    };
         
    $userCount = $userdataEdit->num_rows;
?>

まず、データベースを開きます。
これは前回通りですね。

次に、$editId = $_GET[“edit”];で、URLからパラメータを取得します。
$_GETを使うことで、?edit=の値を取得することができます。
なお「edit」の文字列は、自由に変更することが可能です。
変更した場合はGETも合わせてください。

そして、取得したidを元に、データを呼び出し、変数にいれます。

同時に、該当ユーザーの有無を確かめています。
$userCountという変数がありますね。
これは、URLから取得したIDに該当するデータの数を調べているのです。
0なら無いということで、1であれば、あるということです。

idは連番で自動的に与えられるため、重複がありません。
なので、理論上1以上にはなりません。

ひとまず、これで、ユーザーの有無が判別できます。

<h1>登録フォーム</h1>
<form method="post" action="">
    <input type="text" name="name" placeholder="お名前" value="<?php echo $name; ?>" /><br/>
    <input type="text" name="age" placeholder="年齢" value="<?php echo $age; ?>" /><br/>
    <input type="text" name="skill" placeholder="スキル" value="<?php echo $skill; ?>" /><br/>
    <?php if($userCount == 0): ?>
    <input type="submit" name="submitBtn" value="登録" />
    <?php else: ?>
    <input type="submit" name="submitBtn" value="更新" />
    <?php endif; ?>
</form>

次はhtmlです。

それぞれのフォームに先程取得したデータを入れていきます。
phpで各エリアにデータがechoされているのがおわかりでしょうか。
これで、データを呼び出すことができました。

もう1つ「更新」というボタンが追加してあります。
先程のuserCountが0の場合は「登録」、それ以外の場合は「更新」というように、if文で出し分けます。

if($userCount !== 0){
    $result = mysqli_query($mysqli,"update userdata set name = '".$name."',age = '".$age."',skill = '".$skill."' where id = '".$editId."'");
}elseif (!empty($name)||!empty($age)||!empty($skill)){
    $result = mysqli_query($mysqli,"insert into userdata(name,age,skill) VALUES('$name','$age','$skill')");
};

あと一歩です。

ポストされたデータを投稿する処理に、1つ、新しい処理が加わっています。
「更新」の場合は上書き(update)。
「新規登録」の場合は新規でデータを挿入(insert)。
更新か新規登録かをif文で出し分けます。

if文でもしidにユーザー数が1以上であれば「更新(update)」になります。

ユーザーがいた場合のSQL文はupdateで、いなかった場合は(insert)です。
多少書き方が異なりますので、比べてみてください。

これで、一通りデータを編集する処理が完成しました。

今回の仕組みを応用すれば「簡単なブログ」も作れてしまうでしょう。
ご自身で改良して、簡単なブログ機能も作ってみると、楽しいかもしれません。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら