[Q&A] UPDATE機能を実装したいです。

UPDATE機能を実装したいです。

解決したいこと

今、制作しているものの事ですが、list.phpに書いているユーザー名とメールアドレスをupdate_form.phpに送りたいのですが、うまくいきません。

list.phpからupdate_form.phpへ送れるようにしたいです。
また、最後に更新するときに、「更新をしてよろしいですか？」と表示できるようにしたいです。

追記：こういうものと分かるようにcssファイルと共通用ファイル、index.phpも書いときます。

list.php

<?php

require_once("common.php");

$sql = "SELECT * FROM users ORDER BY id ASC;";
$stmt = $pdo->query($sql);
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="CSS/reset.css">
        <link rel="stylesheet" href="CSS/style.css">
        <link rel="stylesheet" href="CSS/responsive.css">
        <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- fontawesome -->
        <link href="https://use.fontawesome.com/releases/v6.4.0/css/all.css" rel="stylesheet">
    <!-- jQuery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="js/base.js"></script>

        <title>CRUD実装</title>
    </head>

    <body>
        <header>

        <h1>リストの表示<br><span class="sub">-list-</span></h1>

        </header>

        <div id="content">

        <div class="create_btn">
            <button>
                <a href="create_form.php"><i class="fas fa-plus-circle">新規登録はこちら</i></a>
            </button>
        </div>

        <table style="border-collapse: separate">
         <tr>

         <th class="id">ID</th>

         <th class="name">NAME</th>

         <th class="mail">MAIL</th>

         <th class="up">EDIT</th>

         <th class="dele">DELETE</th>

         </tr>

        <?php foreach ($result as $list) {?>
         <tr>

         <td class="id"><?php echo htmlspecialchars($list["id"]); ?></td>

         <td class="name"><?php echo htmlspecialchars($list["username"]); ?></td>

         <td class="mail"><?php echo htmlspecialchars($list["mail"]); ?></td>

         <td class="up">
            <a href="update_form.php">
                <i class="fas fa-file-alt"></i>
            </a>

         </td>

         <td class="dele">
            <a href="delete.php?id=<?php echo htmlspecialchars($list["id"]); ?>"onclick="return confirm('このレコードを削除します。よろしいでしょうか？')">
                <i class="fas fa-trash-alt"></i>
            </a>
         </td>
         </tr>
        <?php } ?>
    </table>
        </div>


    </body>

</html>

<!-- <?php
$dawn = "デバック対応を使用してみましょう";
var_dump($dawn);
echo "<br>";
print_r($dawn);
?> -->

<?php 
$dawn = 2020;
if($dawn === 2019) {
    var_dump("値が間違っている");
}else{
    echo $dawn;
}

?>

<?php

 
echo "<h1>XSS攻撃対策</h1><br>";

 
echo htmlspecialchars("<h1>XSS攻撃対策</h1><br>");

 
?>

update_form.php

<?php

require_once("common.php");


try {

    $sql = "UPDATE users SET username = :username, email = :email WHERE id = :id";


} catch (Exception $e) {
          echo 'エラーが発生しました。:' . $e->getMessage();
}

 
?>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="CSS/reset.css">

 
            <link rel="stylesheet" href="CSS/style.css">

 
            <link rel="stylesheet" href="CSS/responsive.css">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CRUD実装</title>

</head>

<body>

<header>

<h1>更新<br><span class="sub">-update-</span></h1>

</header>

<div id="content">

<form action="create.php" method="post" onsubmit="return check()" id="content">

<h2>「ID:<span class="strong orange">2</span>」の登録情報を以下の内容に更新します。</h2>

<div class="form_input">

<div class="username">

<label for="name">ユーザー名</label>

<input type="text" id="name" name="username">

</div>

<div class="mail">

<label for="email">メールアドレス</label>

<input type="email" id="email" name="mail">

</div>

</div>

<div class="form_btn">

<div class="form_return_btn">

<p class="return"><a href="list.php">リスト表に戻る</a></p>

</div>

<div class="form_create_btn">

<input type="submit" value="更新する">

</div>

</form>

</div>

<script type="text/javascript">

function check() {

if (window.confirm('更新をしてよろしいですか？')) { 

return true;

}

}

</script>

</body>
</html>

common.php

<?php

header("X-FRAME-OPTIONS: DENY");

define("HOST", "localhost");

 
define("DB_NAME", "task02");

 
define("USER", "root");

 
define("PASS", "");

 
 

 

 
$options = array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET CHARACTER SET 'utf8'");

 
 

 
$pdo = new PDO("mysql:host=" . HOST . ";dbname=" . DB_NAME, USER, PASS, $options);

 
 

 
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

 
$pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

 ?>

例）index.php

<?php

header("X-FRAME-OPTIONS: DENY");

?>

<!DOCTYPE html>

 
<html>

 
    <head>

 
        <meta charset="utf-8">

 
            <link rel="stylesheet" href="CSS/reset.css">

 
            <link rel="stylesheet" href="CSS/style.css">

 
            <link rel="stylesheet" href="CSS/responsive.css">

 
        <meta name="viewport" content="width=device-width,initial-scale=1">

 
        <title>CRUD実装</title>

 
    </head>

 
 

 
    <body>

 
        <header>

 
            <div class="icon">

 
                <a href="list.php">

 
                    <img src="./img/DAWN_icon.png" alt="icon">

 
                </a>

 
            </div>

 
            <h1>新規登録<br><span class="sub">-create-</span></h1>

 
        </header>

 
        <div id="content">

 
            <form action="create.php" method="post" onsubmit="return check()" id="content">

 
                <h2><span class="strong orange">新しく登録する</span>ユーザーを<br class="sp">作成しましょう。</h2>

 
                <div class="form_input">

 
                    <div class="username">

 
                        <label for="name">ユーザー名</label>

 
                        <input type="text" id="name" name="username">

 
                    </div>

 
                    <div class="mail">

 
                        <label for="email">メールアドレス</label>

 
                        <input type="email" id="email" name="mail">

 
                    </div>

 
                </div>

 
                <div class="form_btn">

 
                    <div class="form_return_btn">

 
                        <p class="return"><a href="list.php">リスト表に戻る</a></p>

 
                    </div>

 
                    <div class="form_create_btn">

 
                        <input type="submit" value="新規登録">

 
                    </div>

 
                </div>

 
            </form>

 
        </div>

 
        <script type="text/javascript">

 
        function check() {

 
            if (window.confirm('登録をしてよろしいですか？')) { 

 
               
 
                return true;

 
            } else { 

 
                window.alert('登録がキャンセルされました'); 

 
                

 
                return false;

 
            }

 
        }

 
        </script>

 
    </body>

 
</html>

cssファイル

@charset "utf-8";
body {
    background: #d5ecfc;
    color: rgb(80, 80, 80);
}

h1 {
    text-align: center;
    font-size: 24px;
    color: #fff;
    background: #04489b;
    padding: 15px;
    line-height: 1rem;
}

a {
    text-decoration: none;
}

input {
    padding-left: 3px;
    border: 0.5px solid rgb(146, 146, 146);
    border-radius: 3px;
    display: block;
}

#content {
    margin: 15px auto !important;
    overflow: hidden;
}

table {
    max-width: 520px;
}

td {
    padding: 5px;
    font-size: 14px;
    text-align: center;
    margin: 0;
}

.name {
    width: 150px;
}

.pass {
    width: 150px;
}

.up {
    width: 100px;
}

.dele {
    width: 100px;
}

.var_dump {
    padding: 15px;
    background: rgb(224, 255, 224);
    font-size: 16px;
}

.return {
    width: 800px;
    text-align: left;
    margin: 30px auto 0;
    display: block;
}

h2 {
    margin-bottom: 30px;
    ;
}


/* ==============================================
                  Design Plus
================================================*/


/* ===================common====================== */

header .icon:hover {
    opacity: 0.8;
}

body {
    background: url(../img/bg.jpg) no-repeat;
    background-color: rgba(255, 255, 255, 0.7);
    background-blend-mode: lighten;
    background-size: cover;
}

#content {
    max-width: 900px;
}

form h2 {
    padding: 60px 0;
    font-size: 1.2rem;
    text-align: center;
}

.return {
    width: 100%;
    margin: 0;
}

span.strong {
    font-size: 1.3em;
}

span.orange {
    color: #e2563b;
}


/*heder*/

header {
    background: -moz-linear-gradient(to bottom, #7b9bc7, #e9cfd4);
    background: -webkit-linear-gradient(to bottom, #7b9bc7, #e9cfd4);
    background: linear-gradient(to bottom, #7b9bc7, #e9cfd4);
    display: flex;
    flex-direction: row;
    position: relative;
}

header .icon {
    width: 100px;
    margin: 19px 19px 0;
    text-align: center;
    position: absolute;
}

header .icon img {
    width: 100%;
}

header h1 {
    width: 100%;
    background: none;
    line-height: 1.1;
}

header h1 span.sub {
    font-size: 0.7em;
}


/* ===================list====================== */


/*create_btn*/

.create_btn {
    margin: 0 auto 20px;
    padding-top: 20px;
    font-size: 14pt;
}

.create_btn button {
    margin: 0;
    position: relative;
}

.create_btn a {
    font-weight: bold;
    color: #e2563b;
}

.create_btn a:hover {
    opacity: 0.7;
}


/*!empty_return*/

p.return_empty a {
    font-weight: bold;
    color: #e2563b;
}

p.return_empty {
    padding-bottom: 30px;
}


/*search*/

#search {
    float: right;
    width: 30%;
    border-radius: 3px;
    font-size: 18px;
}

#search form {
    position: relative;
    background: #fff;
}

#search form input {
    width: 100%;
    border-color: #e2563b;
}

#search form input::placeholder {
    font-size: 12pt;
}

#search button {
    height: 100%;
    width: 50px;
    background: #e2563b;
    color: #fff;
    top: 0;
    right: 0;
    position: absolute;
}

#search button:hover {
    background: #f0907f;
}


/*btn*/

#search button {
    border-radius: 0 3px 3px 0;
}


/*list_table*/

table {
    border-spacing: 0px 2px;
    max-width: 65%;
}


/*id_color*/

tr:nth-child(n+2) .id {
    background-color: #0083ab;
    color: #fff;
}


/*Record odd*/

tr:nth-child(odd) .name,
tr:nth-child(odd) .mail,
tr:nth-child(odd) .up,
tr:nth-child(odd) .dele {
    background-color: #f5f8fb;
}


/*Record even*/

tr:nth-child(even) .name,
tr:nth-child(even) .mail,
tr:nth-child(even) .up,
tr:nth-child(even) .dele {
    background-color: #fff;
}


/*category*/

tr:first-child .id,
tr:first-child .name,
tr:first-child .mail,
tr:first-child .up,
tr:first-child .dele {
    height: 40px;
    background: #016079;
    color: #fff;
    font-size: 0.5em;
    position: relative;
}

tr:first-child .id,
tr:first-child .up,
tr:first-child .dele {
    width: 10%;
}

tr:first-child .mail {
    width: 40%;
}

tr:first-child td.id:after,
tr:first-child td.name:after,
tr:first-child td.mail:after,
tr:first-child td.up:after {
    height: 80%;
    width: 1px;
    content: "";
    top: 10%;
    right: 0;
    position: absolute;
    background-color: #fff;
}


/*EDIT DELETE_iconColor*/

tr:nth-child(n+2) .up a,
tr:nth-child(n+2) .dele a {
    color: #e2563b;
    font-size: 1.3em;
}

tr:nth-child(n+2) .up a:hover,
tr:nth-child(n+2) .dele a:hover {
    color: #f0907f;
    font-size: 1.3em;
}

tr {
    margin-bottom: 5px;
    overflow: hidden;
}


/* ===================form====================== */


/*form_input*/

.form_input input {
    width: 300px;
    background: #fff;
    border: solid 2px #e2563b;
    border-radius: 3px;
}


/*username*/

.form_input .username label {
    padding-left: 25px;
    font-weight: bold;
    color: #0e1d44;
    position: relative;
}

.form_input .username label:before {
    content: "";
    width: 20px;
    height: 30px;
    bottom: -5px;
    left: 3px;
    background: url(../img/icon_man.png) no-repeat;
    position: absolute;
}


/*mail*/

.form_input .mail label {
    padding-left: 35px;
    font-weight: bold;
    color: #0e1d44;
    position: relative;
}

.form_input .mail label:before {
    content: "";
    width: 30px;
    height: 30px;
    bottom: -8px;
    left: 3px;
    background: url(../img/icon_mail.png) no-repeat;
    position: absolute;
}

.form_input {
    display: flex;
    justify-content: center;
}

.form_input .username,
.form_input .mail {
    margin: 0 20px;
}

.form_btn {
    padding-top: 60px;
    display: flex;
    justify-content: center;
}

.form_create_btn,
.form_return_btn {
    margin: 0 20px;
}

.form_create_btn:hover,
.form_return_btn:hover {
    opacity: 0.7;
}

.form_create_btn:active,
.form_return_btn:active {
    transform: scale(0.95);
}


/*return_btn*/

p.return {
    position: relative;
    background: #b0b4c2;
    border-radius: 3px;
}

p.return a {
    padding: 10px;
    padding-left: 50px;
    padding-right: 25px;
    color: #0e1d44;
    font-weight: bold;
    display: block;
}

p.return a:before {
    content: "";
    width: 30px;
    height: 25px;
    background-image: url(../img/arrow_return.png);
    top: 55%;
    left: 10%;
    transform: translate(0, -55%);
    position: absolute;
}


/*create_btn*/

.form_create_btn input {
    border: none;
    padding: 10px 68px;
    background-color: #e2563b;
    color: #fff;
}

.var_dump{
    padding: 15px;
    background: #cef;
    font-size: 16px;
}

2Answer

@changkejun posted at 2023-11-14

これは間違っています。

<form action="create.php" method="post" onsubmit="return check()" id="content">

ただしい書き方はreturn不要です。

<form action="create.php" method="post" onsubmit="check()" id="content">

0Like

@blue32a posted at 2023-11-14

やりたいことはわかるのですが、具体的に何が「うまくいかない」のでしょうか？
何らかの手段を試していて、エラーなどがでているのでしょうか？
それとも全く見当もつかない状況なのでしょうか？

list.phpからupdate_form.phpへ送れるようにしたいです。

ユーザー情報はデータベースに格納されているもののようですから、ユーザーを特定するためのidをパラメータとして渡すことができれば、ユーザー名やメールアドレスもデータベースから取得できると思います。

削除でそれをやっているように見受けられますが、それだと問題があるのでしょうか？

<a href="delete.php?id=<?php echo htmlspecialchars($list["id"]); ?>"

最後に更新するときに、「更新をしてよろしいですか？」と表示できるようにしたいです。

方法は２つあります。
ひとつは、リンクやボタンをクリックした時にJavaScriptで表示する方法です。
もうひとつは、フォームへの入力から更新処理の間に、確認画面を挟む方法です。