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