2021-06-21 - Githubissues

新增留言板功能

編輯暱稱、編輯留言、刪除留言、分頁功能

編輯暱稱功能

index.php

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

$username = NULL;
$user = NULL;
if(!empty($_SESSION['username'])) {
    $username = $_SESSION['username'];
    $user = getUserFromUsername($username);
}

$stmt = $conn -> prepare('SELECT * FROM comments order by id desc');
$result = $stmt -> execute();
  if(!$result) {
    die('Error:' . $conn -> error);
  }
$result = $stmt -> get_result();

?>

<!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">
        <div>
            <?php if (!$username) { ?>
              <a class="board__btn" href="register.php">註冊</a>
              <a class="board__btn" href="login.php">登入</a>
            <?php } else { ?> 
              <a class="board__btn" href="logout.php">登出</a>
              <span class="board__btn update-nickname">編輯暱稱</span>
              <form class="hide board__nickname-form board__new-comment-form" method="POST" action="update_user.php">
                <div class="board__nickname">
                  <span>新增暱稱：</span>
                  <input type="text" name="nickname"/>
                </div>
                <input class="board__submit-btn" type="submit"/>
              </form>
              <h3>歡迎！<?php echo $user['nickname']; ?></h3>
            <?php } ?>
        </div>
        <h1 class="board__title">Comments</h1>
        <?php 
          if(!empty($_GET['errCode'])) {
            $code = $_GET['errCode'];
            $msg = 'Error';
            if ($code === '1') {
                $msg = '錯誤：資料不齊全';
            }
            echo '<h2 class="error">' . $msg . '</h2>';
          }
        ?>
        <?php if ($username) { ?>
        <form class="board__new-comment-form" method="POST" action="handle_add_comment.php">
            <textarea name="content" rows="5"></textarea>
            <input class="board__submit-btn"type="submit" />
        </form>
        <?php } else { ?>
            <h3>請登入發布留言</h3>
        <?php } ?>
        <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 escape($row['nickname']);?>
                        </span>
                        <span class="card__time">
                            <?php echo $row['created_at'];?>
                        </span>
                    </div>
                    <p class="card__content"><?php echo escape($row['content']); ?></p>
                </div>
            </div>
            <?php } ?>
        </section>
    </main>
    <script>
        var btn = document.querySelector('.update-nickname')
        btn.addEventListener('click', function() {
            var form = document.querySelector('.board__nickname-form')
            form.classList.toggle('hide')
        })
    </script>
</body>
</html>

style.css

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

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

.error {
    color: red;
}

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

.board__btn {
    padding: 10px 30px;
    border: 1px solid #c2dffb;
    border-radius: 5px;
    color: black;
    min-width: 20px;
    font-size: 16px;
    background: white;
    text-decoration: none;
    display: inline-block;
}

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

.board__nickname {
    margin-bottom: 10px;
    margin-top: 15px;
}

.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;
    white-space: pre-line; /* 換行效果 */
}

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

.card__time {
    color: #a0a0a0;
}

.hide {
    display: none;
}

update_user.php

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

   if (
     empty($_POST['nickname'])
   ) {
     header('Location: login.php?errCode=1');
     die('資料不齊全');
   }

   $username = $_SESSION['username'];
   $nickname = $_POST['nickname'];

   $sql = "update users set nickname=? where username=?";
   $stmt = $conn -> prepare($sql);
   $stmt -> bind_param("ss", $nickname, $username);
   $result = $stmt -> execute();
   if (!$result) {
    die($conn -> error);
   }

   header("Location: index.php")
 ?>

修正

Visual Join ，解釋 Join 語法的好網站。

SELECT * FROM comments left join users on comments.username = users.username

index.php

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

$username = NULL;
$user = NULL;
if(!empty($_SESSION['username'])) {
    $username = $_SESSION['username'];
    $user = getUserFromUsername($username);
}

  $stmt = $conn->prepare(
     'select '.
       'C.id as id, C.content as content, '.
       'C.created_at as created_at, U.nickname as nickname, U.username as username '.
     'from comments as C ' .
     'left join users as U on C.username = U.username '.
     'order by C.id desc'
   );

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

?>

<!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">
        <div>
            <?php if (!$username) { ?>
              <a class="board__btn" href="register.php">註冊</a>
              <a class="board__btn" href="login.php">登入</a>
            <?php } else { ?> 
              <a class="board__btn" href="logout.php">登出</a>
              <span class="board__btn update-nickname">編輯暱稱</span>
              <form class="hide board__nickname-form board__new-comment-form" method="POST" action="update_user.php">
                <div class="board__nickname">
                  <span>新增暱稱：</span>
                  <input type="text" name="nickname"/>
                </div>
                <input class="board__submit-btn" type="submit"/>
              </form>
              <h3>歡迎！<?php echo $user['nickname']; ?></h3>
            <?php } ?>
        </div>
        <h1 class="board__title">Comments</h1>
        <?php 
          if(!empty($_GET['errCode'])) {
            $code = $_GET['errCode'];
            $msg = 'Error';
            if ($code === '1') {
                $msg = '錯誤：資料不齊全';
            }
            echo '<h2 class="error">' . $msg . '</h2>';
          }
        ?>
        <?php if ($username) { ?>
        <form class="board__new-comment-form" method="POST" action="handle_add_comment.php">
            <textarea name="content" rows="5"></textarea>
            <input class="board__submit-btn"type="submit" />
        </form>
        <?php } else { ?>
            <h3>請登入發布留言</h3>
        <?php } ?>
        <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 escape($row['nickname']);?>
                            (@<?php echo escape($row['username']); ?>)
                        </span>
                        <span class="card__time">
                            <?php echo $row['created_at'];?>
                        </span>
                    </div>
                    <p class="card__content"><?php echo escape($row['content']); ?></p>
                </div>
            </div>
            <?php } ?>
        </section>
    </main>
    <script>
        var btn = document.querySelector('.update-nickname')
        btn.addEventListener('click', function() {
            var form = document.querySelector('.board__nickname-form')
            form.classList.toggle('hide')
        })
    </script>
</body>
</html>

handle_add_comments.php

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

   if (
     empty($_POST['content'])
   ) {
     header('Location: index.php?errCode=1');
     die('資料不齊全');
   }

   $username = $_SESSION['username'];
   $content = $_POST['content'];

   $sql = "insert into comments(username, content)
    values(?, ?)";

   $stmt = $conn -> prepare($sql);
   $stmt -> bind_param('ss', $username, $content);

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

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

Lichen5221 / Report-Daily

2021-06-21 #57

新增留言板功能

編輯暱稱功能

修正