第二十天--留言板畫面

2023 iThome 鐵人賽

DAY 20

自我挑戰組

基礎前端+後端網站分享之留言板製作系列第 20 篇

15th鐵人賽

aliecele

2023-10-04 07:01:17

416 瀏覽

分享至

今天來撰寫留言板畫面。
新增php檔(Home.php)在screen裡，用來撰寫今天的留言板畫面。

Home.php程式碼

<!DOCTYPE html>
<html lang="en">
<?php

?>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
    <title>留言板</title>
</head>

<body>
    <ul class="nav nav-tabs justify-content-center">
        <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="Home.php">留言板</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="register.php">註冊</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="../php/sign_out.php">登出</a>
        </li>
    </ul>

    <div class="mb-5 pb-5">
        <h1 class="text-center">留言板</h1>

        <div class="mx-5 mt-5">
            <form method="POST" action="../php/create_comment.php">
                <div class="">
                    <div class="input-group-prepend">
                        <span class="input-group-text text-light bg-dark">暱稱: </span>
                    </div>
                    <textarea class="form-control" name="user_name" required="required" cols="40" rows="1"></textarea>
                </div>
                <div class="">
                    <div class="input-group-prepend">
                        <span class="input-group-text text-light bg-dark">評論: </span>
                    </div>
                    <textarea class="form-control" name="comment" required="required" cols="40" rows="5" placeholder="輸入評論"></textarea>
                </div>
                <input type="hidden" name="id" value="id">
                <input type="submit" name="submit" class="btn btn-dark" value="新增資料" style="float:left">
            </form>



        </div>

    </div>

    <div>
        <h2 class="mt-4 text-center">留言:</h2>
        <div class="mx-3 my-3">
            <h5 class="mx-3 mt-2">未知留言者</h5>
            <p class="mx-3">未知留言</p>

            <div>
                <a href="">
                    <input type="submit" value="修改" class="btn btn-dark mx-3" style="float:right">
                </a>
                <form method="POST" action="">
                    <input type="hidden" name="id" value="<?php echo $row['id'] ?>">
                    <input type="submit" value="刪除" class="btn btn-danger" style="float:right">
                </form>


            </div>

        </div>
    </div>
</body>

</html>

先來介紹
留言板的設計，分為切換頁面、新增留言和留言板三個區塊，由前至後，如圖從上而下所示，以紅筆為大致的分界線。

新增留言的區塊中，有輸入名稱的文字框，那部分之後會和登入系統連動，要等留言版功能用好，所以暫時這樣寫。
留言板的區塊我先撰寫一個用html的留言，之後會與新增留言互動成動態網頁，這是明天(或者後幾天)的內容。

先來介紹沒看過的html，
textarea能讓使用者輸入多行文本，cols和rows代表textarea能讓使用者可見的寬度和長度，required用於控制是否必填入文字

還有畫面隱藏的input，就是程式碼裡的input type="hidden"，這和之後撰寫的新增留言php有關係。

題外話:
註冊bug:
Fatal error: Uncaught PDOException: SQLSTATE[23000]: Integrity constraint violation: 1062 Duplicate entry 'test' for key 'PRIMARY' in C:\xampp\htdocs\30days...
如圖所示

如果你看到這個錯誤在註冊帳戶時，代表你資料庫有相同名稱，這是和資料庫上的主鍵('PRIMARY)有關。