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

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

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

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

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

データベースのデータを削除する

php|2018年11月11日

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

登録するだけじゃなく、削除まで出来るようにしていきましょう。
今回は、前回作ったデータをそのまま流用してください。

では、さっそく具体的なアップデート内容をご説明します。

データを登録すると、登録したデータの右側に削除ボタンが現れます。
削除ボタンをクリックすると、登録したデータが削除されます。

また、前回のソースコードから、もう1つ更新箇所があります。

データベース(DB)と接続する処理についてです。
データを扱う処理は、通常、複数のページで行います。
ページが変わる度、何度も長ったらしいDB接続のコードを書いていては、非効率ですよね。

なので、DBと接続するソースコードを「db.php」として外部ファイル化しました。
必要なタイミングで呼び出せば、データベースと接続できます。
結果、ソースコードが短くなるということです。

これらの変化を踏まえながら、今回のミッションについて見ていきましょう。

ミッションの内容

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

注意するのは「削除ボタン」が増えていること。
そして、データベースとの接続処理が外部ファイルになりました。
これにより、呼び出して使い回し可能になったことです。

以上、2つの機能についてアップデートを加えてみましょう。

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

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

ソースコードの解説

まず、index.phpの全体のソースコードを見てみましょう。
前回のソースコードも流用しています。
同じ箇所については、コメントを省いていきます。

index.php

<?php
         
    //データベースの接続を外部ファイルに。
    //require_onceは1度だけ該当ファイルを読み込むという意味です。
    require_once "functions/db.php";
         
    $name = htmlspecialchars($_POST['name'], ENT_QUOTES);
    $age = htmlspecialchars($_POST['age'], ENT_QUOTES);
    $skill = htmlspecialchars($_POST['skill'], ENT_QUOTES);
         
    if (!empty($name)||!empty($age)||!empty($skill)){
        $result = mysqli_query($mysqli,"insert into userdata(name,age,skill) VALUES('$name','$age','$skill')");
    };
             
?>
     
<h1>登録フォーム</h1>
<form method="post" action="">
    <input type="text" name="name" placeholder="お名前" /><br/>
    <input type="text" name="age" placeholder="年齢" /><br/>
    <input type="text" name="skill" placeholder="スキル" /><br/>
    <input type="submit" name="submitBtn" value="登録" />
</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で削除ボタンを一緒に出力しています。
        //data-idに$idを入れることで対象データとつなぎ合わせます。
        //削除ボタンを押した時、data-idのidに該当するデータを削除する流れです。
        echo "<button class='deleteBtn' data-id='".$id."'>削除する</button>";
        echo "<br>";
    };
         
?>
<script>
         
    //deleteBtn(削除ボタン)をクリックした時。
    $(".deleteBtn").click(function(){
        //data-idをbtnidで取得
        var btnid = $(this).data("id");
        //関数deleteData()を呼び出します。
        //btnidをidを通して削除するデータを渡します。
        deleteData(btnid);
    });
         
    //関数deleteData()にbtnid(削除するデータのid)が渡されます。
    function deleteData(btnid){
        //Ajaxを使って、delete_func.phpに削除するidを投げます。
        //削除の処理自体はdelete_func.phpが行います。
        //jsだけではサーバーサイドを扱うことはできません。
        $.ajax({
                type: 'POST',
                dataType:'json',
                //データを投げる先のphpを指定。
                url:'functions/delete_func.php',
                data:{
                    //送信するデータを設定。
                    //ひとまず右辺と左辺btnidにしてください。
                    btnid:btnid,
                },
                success:function(data) {
                    //削除が成功したら、結果がdataで受け取れます。
                    //何を結果として送信するかはphp側で決められます。
                    //今回は特に受けとらず、画面を再読み込みします。
                    window.location.href = "./";
                },
                error:function(XMLHttpRequest, textStatus, errorThrown) {
                    //何かエラーが起きた時、エラーを表示させます。
                    alert(errorThrown);
                }
        });
    };
</script>

全体の流れは、以上のようになっています。

次は、それぞれのソースコードについて詳しくみていきます。
まず、前回からの変更点から進めていきましょう。

データベースを接続するソースコードを外部化しました。

functionsというフォルダを作り、db.phpというファイルを作成します。
db.phpにデータベースを接続するソースコードを移動させました。

内容は、前回のデータベース接続の記述と変わりはありません。

使う時は下記のようにrequire_onceを使って呼び出します。

require_once "functions/db.php";

ダブルクオーテーションの中に、呼び出すファイルの相対パスを書くだけで呼び出せます。

なおrequire_onceは1つのページで1回しか呼び出せません。
1ページ内で何度も呼び出したい場合は、requireを使います。

<?php
    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 "<br>";
    };
?>

また、上記ソースコードにて、末尾にechoを3行追加しました。
これで削除ボタンが追加されました。

以下、新出の削除用ソースコードになります。

<script>
    $(".deleteBtn").click(function(){
        var btnid = $(this).data("id");
        deleteData(btnid);
    });
    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と言いつつ、JavaScriptなんですよね。
でも基本的にJavaScriptでは、データベースは扱えません。
これは、Ajaxと呼ばれる技術で、JavaScriptからphpファイルにデータを送る処理が書けます。

では、どのような流れでjsからphpにデータを送り、データベースからデータを削除するのでしょうか。
流れとしては、そんなに難しいものではありません。

削除ボタンを押すと、htmlファイル中のJavaScriptが削除するデータのidを受け取ります。
ボタンには「deleteBtn」というクラスの他にデータ属性を加えています。
data-id=””という表記です。
ボタンそのものにdata-idでIDの番号をもたせているんですね。
ここからidを取得して、消すデータを判別します。

$(".deleteBtn").click(function(){
    var btnid = $(this).data("id");
    deleteData(btnid);
});

次にjavascriptから、あるphpファイルに、受け取ったidを投げます。

ここでAjaxが登場します。

下記の関数内「url」と書かれた場所に「データを渡すファイルのパス」を書きましょう。
また「data」と書かれた場所に「送信」するデータを入力します。
今回は、送るデータがidのみなので「data」内に「btnid」1つしか書かれていません。
ただカンマ区切りで改行することで、何個でも送信できます。

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);
        }
    });
};

delete_func.phpには、データベースを削除する処理が書かれています。
そして、送信されてきた、idと等しいデータを削除します。

functions/delete_func.php

では、次にdelete_func.phpのソースコードをみてみましょう。
delete_func.phpは、Ajaxでデータをポストする先のファイルです。
データを受け取り、データベースから削除する機能一式を担っています。

<?php
    //データベースを呼び出します。
    require_once "db.php";
     
    //jsから受け取ったデータのidを取得します。
    $jsondata = $_POST['btnid'];
     
    //MySqlで該当データを削除します。
    //データベース内でidが一致したデータを削除します。
    $resultcontents = mysqli_query($mysqli,"delete from userdata where id = '".$jsondata."'");
     
    //完了したら、結果をjsに返します。
    //今回はid($jsondata)をそのまま返していますが、特に深い意味はないです。
    header('Content-type: application/json');
    echo json_encode( $jsondata );
?>

POSTでidを受け取り、変数$jsondataに入れます。
その後、$resultcontentsで削除しています。
さらに、json_encodeで変数$jsondataをhtmlに戻します。

ちなみに、ここで返すデータは$jsondataに限らずなんでも返せます。
ダブルクオーテーションで囲んで”成功”なんて文字列を送り返しても良いでしょう。
$jsondataを送り返している意味は、今回は特にありません。

そして、結果をhtmlファイル(JavaScript)に戻します。
先程と同じソースコードです。

index.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);
        }
    });
};

エラーが起きて無ければ、一旦、画面を自動で更新します。

上記のsuccess:function部分で成功後の処理を実行。
引数のdataでphpから返されたデータを受け取っています。
alert(data)とすれば、返されたデータがアラートされるでしょう。

また、error:function部分でエラーが有った時の処理を実行します。

今回の処理はシンプル。
success部分で画面をもう一度、画面を読み込み直しているだけです。
データベースから削除されたので、一旦、画面を再読込すれば表示に反映されます。

以上の流れで、データの削除が完了します。

phpだけでもデータの削除は可能です。
しかし、無駄に何度か画面遷移が発生したりとスマートではありません。
だからこそ、今はAjaxからphpにデータを渡し、削除する方法が一般的になっています。

これで、データベースに限らず、JavaScriptとphpが連携できるようになりました。
WEBサービスには必須の処理になりますので、ぜひ覚えておいてください。

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

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

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

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

ウエヤマ ショウタ

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

ウエヤマ ショウタ

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

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

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

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

 詳しくはこちら