登録するだけじゃなく、削除まで出来るようにしていきましょう。
今回は、前回作ったデータをそのまま流用してください。
また、前回はPDOについてもご説明しましたが、今回以降、記述しません。
mysqliの書き方から自分で調べ、PDOに直してみましょう。
調べて繰り返し試行錯誤する回数が「思考力」を向上させます。
ここまで乗り越えてきた皆さんなら可能なはずです。
では、さっそく具体的なアップデート内容をご説明します。
データを登録すると、登録したデータの右側に削除ボタンが現れます。
削除ボタンをクリックすると、登録したデータが削除されます。
また、前回のソースコードから、もう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を３行追加しました。
これで削除ボタンが追加されました。
以下、新出の削除用ソースコードになります。
<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を投げます。
ここでAjaｘが登場します。
下記の関数内「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サービスには必須の処理になりますので、ぜひ覚えておいてください。