今回は、登録したデータを「編集」してみましょう。
作り方にもよりますが、編集するには、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)です。
多少書き方が異なりますので、比べてみてください。
これで、一通りデータを編集する処理が完成しました。
今回の仕組みを応用すれば「簡単なブログ」も作れてしまうでしょう。
ご自身で改良して、簡単なブログ機能も作ってみると、楽しいかもしれません。