2021-06-10 - Githubissues

Lichen5221 commented 3 years ago

PHP & MySQL 刪除資料

通常不用 GET 來刪除資料而是用 POST ，但 POST 比較複雜。

想說找一下用 POST 來刪除的教學，只找到一個會員登入機制的範例，滿有趣的。

如果有找到用 POST 刪除的資料再來貼上。

PHP & MySQL 編輯資料

主頁面：

<?php

require_once('conn.php');

$result = $conn -> query("select * from users;");

if (!$result) {
  die($conn -> error);
}

while ($row = $result -> fetch_assoc()) {
  echo "ID:" . $row['ID']. ' ';
  echo "<a href='delete.php?id=". $row['ID'] . "'>刪除</a>" . '<br>';
  echo "username:" . $row['username'] . '<br>';
}
?>

<h2>編輯 user</h2>
<form method = "POST" action = "update.php">
    ID: <input name = "ID" />
    username: <input name = "username" />
    <input type= "submit" />
</form>

<?php
  require_once('conn.php');

  if (empty($_POST['ID']) || empty($_POST['username'])) {
    die('請輸入 ID 與 username');
  }

  $ID = $_POST['ID'];
  $username = $_POST['username'];
  $sql = sprintf(
    "update users set username='%s' where ID=%d", // 特別注意是先找到 ID 條件才修正該 username ，如果顛倒的話就會悲劇。
    $username,
    $ID
  );

  echo $sql . '<br>';

  $result = $conn->query($sql);
  if (!$result) {
    die($conn->error);
  }

  header("Location: test.php");
?>

Lichen5221 commented 3 years ago

留言板實戰

規劃產品的路由與功能

第一步：

index.php 觀看所有留言 handle_add_post.php 新增留言

規劃資料結構以及建置資料庫

暱稱、留言內容、留言時間

實戰建置前端切版

index.php 檔：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>留言板</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header class="warning"> 
        <strong> 警告！有資安漏洞！ </strong>
    </header>
    <main class="board">
        <h1 class="board__title">Comments</h1>
        <form class="board__new-comment-form"method="POST" action="handle_add_comment.php">
            <div class="board__nickname">
                <span>暱稱：</span>
                <input type="text" name="nickname" />
            </div>
            <textarea name="content" rows="5"></textarea>
            <input class="board__submit-btn"type="submit" />
        </form>
        <div class="board__hr"></div>
        <section>
            <div class="card">
                <div class="card__avatar"></div>
                <div class="card__body">
                    <div class="card__info">
                        <span class="card__author">作者名字</span>
                        <span class="card__time">2021-06-10</span>
                    </div>
                    <p class="card__content">
                      文字留言內容，這樣的切版特別難，比起金魚真的好難。
                    </p>
                </div>
            </div>
            <div class="card">
                <div class="card__avatar"></div>
                <div class="card__body">
                    <div class="card__info">
                        <span class="card__author">作者名字</span>
                        <span class="card__time">2021-06-10</span>
                    </div>
                    <p class="card__content">
                      文字留言內容，這樣的切版特別難，比起金魚真的好難。
                    </p>
                </div>
            </div>
            <div class="card">
                <div class="card__avatar"></div>
                <div class="card__body">
                    <div class="card__info">
                        <span class="card__author">作者名字</span>
                        <span class="card__time">2021-06-10</span>
                    </div>
                    <p class="card__content">
                      文字留言內容，這樣的切版特別難，比起金魚真的好難。
                    </p>
                </div>
            </div>
        </section>
    </main>
</body>
</html>

CSS 檔：

body {
    margin: 0;
    background: #f7f7f7;
}

.warning {
    background: #ffc4c6;
    color: #a20606;
    padding: 10px;
    text-align: center;
}

.board {
    background: white;
    width: 100%;
    max-width: 700px;
    margin: 20px auto;
    padding: 10px 30px;
    box-shadow: 1px 1px 3px #e8e8e8;
    border-radius: 5px;
}

.board__new-comment-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #c2dffb;
    box-sizing: border-box;
}

.board__nickname {
    margin-bottom: 10px;
}

.board__nickname input {
    border: 1px solid #c2dffb;
    padding: 5px;
}

.board__submit-btn {
    padding: 10px;
    border: 1px solid #c2dffb;
    border-radius: 5px;
    color: #583c63;
    width: 100px;
    font-size: 16px;
    background: white;
}

.board__hr {
    margin: 10px auto;
    height: 2px;
    background-color: #e8e8e8;
    max-width: 95%;
}

.card {
    margin: 20px 0;
    min-height: 70px;
    box-sizing: border-box;
    display: flex;
}

.card__avatar {
    min-width: 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #e4f0fb;
}

.card__body {
    margin-left: 10px;
}

.card__content {
    margin-top: 8px;
    max-width: 100%;
}

.card__author {
    color: #5c9edc;
    font-weight: bold;
}

.card__time {
    color: #a0a0a0;
}

Lichen5221 commented 3 years ago

串接後端資料庫顯示留言

index.php 檔：

<?php
  require_once("conn.php");

  $result = $conn -> query("SELECT * FROM comments order by id desc");

  if(!$result) {
    die('Error:' . $conn -> error);
  }

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>留言板</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header class="warning"> 
        <strong> 警告！有資安漏洞！ </strong>
    </header>
    <main class="board">
        <h1 class="board__title">Comments</h1>
        <form class="board__new-comment-form"method="POST" action="handle_add_comment.php">
            <div class="board__nickname">
                <span>暱稱：</span>
                <input type="text" name="nickname" />
            </div>
            <textarea name="content" rows="5"></textarea>
            <input class="board__submit-btn"type="submit" />
        </form>
        <div class="board__hr"></div>
        <section>
            <?php 
              while($row = $result -> fetch_assoc()) {
            ?>
            <div class="card">
                <div class="card__avatar">
                </div>
                <div class="card__body">
                    <div class="card__info">
                        <span class="card__author">
                            <?php echo $row['nickname'];?>
                        </span>
                        <span class="card__time">
                            <?php echo $row['created_at'];?>
                        </span>
                    </div>
                    <p class="card__content">
                        <?php echo $row['content']?>
                    </p>
                </div>
            </div>
            <?php } ?>
        </section>
    </main>
</body>
</html>

CSS 檔：

body {
    margin: 0;
    background: #f7f7f7;
}

.warning {
    background: #ffc4c6;
    color: #a20606;
    padding: 10px;
    text-align: center;
}

.board {
    background: white;
    width: 100%;
    max-width: 700px;
    margin: 20px auto;
    padding: 10px 30px;
    box-shadow: 1px 1px 3px #e8e8e8;
    border-radius: 5px;
}

.board__new-comment-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #c2dffb;
    box-sizing: border-box;
}

.board__nickname {
    margin-bottom: 10px;
}

.board__nickname input {
    border: 1px solid #c2dffb;
    padding: 5px;
}

.board__submit-btn {
    padding: 10px;
    border: 1px solid #c2dffb;
    border-radius: 5px;
    color: #583c63;
    width: 100px;
    font-size: 16px;
    background: white;
}

.board__hr {
    margin: 10px auto;
    height: 2px;
    background-color: #e8e8e8;
    max-width: 95%;
}

.card {
    margin: 20px 0;
    min-height: 70px;
    box-sizing: border-box;
    display: flex;
}

.card__avatar {
    min-width: 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #e4f0fb;
}

.card__body {
    margin-left: 10px;
}

.card__content {
    margin-top: 8px;
    max-width: 100%;
    word-break: break-all;
}

.card__author {
    color: #5c9edc;
    font-weight: bold;
}

.card__time {
    color: #a0a0a0;
}

Lichen5221 / Report-Daily

2021-06-10 #52

PHP & MySQL 刪除資料

PHP & MySQL 編輯資料

留言板實戰

規劃產品的路由與功能

規劃資料結構以及建置資料庫

實戰建置前端切版

串接後端資料庫顯示留言