php设计一个新春祝福墙

Evaporator Core

于 2023-02-19 17:00:00 发布

阅读量761

点赞数 1

分类专栏： php程序设计经验文章标签： php java 开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/u010986241/article/details/128992609

版权

php程序设计经验专栏收录该内容

42 篇文章 3 订阅

订阅专栏

记得十几年前的时候，每到春节，各大网站都会建一个祝福墙，上面挂满网友的新年寄语。这些年随着移动互联网的高速发展，web的新春祝福墙越来越少了。今天，咱们就来考考古，用快速原型法进行设计。

原型设计

采用MySQL数据库。

创建数据库

CREATE DATABASE new_year_wall;

创建表

CREATE TABLE greetings (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  message TEXT NOT NULL,
  date_posted TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

创建前端PHP页面

<!DOCTYPE html>
<html>
<head>
  <title>New Year Greeting Wall</title>
  <style>
    .greeting {
      margin: 10px;
      padding: 10px;
      border: 1px solid #ccc;
      background-color: #f9f9f9;
    }
  </style>
</head>
<body>
  <h1>New Year Greeting Wall</h1>
  <form action="add_greeting.php" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>

    <input type="submit" value="Post">
  </form>

  <?php
  $conn = mysqli_connect("localhost", "username", "password", "new_year_wall");
  $result = mysqli_query($conn, "SELECT * FROM greetings ORDER BY date_posted DESC");

  while ($row = mysqli_fetch_assoc($result)) {
    echo "<div class='greeting'>";
    echo "<p><strong>" . $row['name'] . "</strong> posted:</p>";
    echo "<p>" . $row['message'] . "</p>";
    echo "<p>Date posted: " . $row['date_posted'] . "</p>";
    echo "</div>";
  }
  ?>
</body>
</html>

创建后端PHP页面

<?php
$conn = mysqli_connect("localhost", "username", "password", "new_year_wall");
$name = mysqli_real_escape_string($conn, $_POST['name']);
$message = mysqli_real_escape_string($conn, $_POST['message']);
$sql = "INSERT INTO greetings (name, message) VALUES ('$name', '$message')";
mysqli_query($conn, $sql);
header("Location: index.php");
?>

好了，一个支持任何人直接提交祝福的祝福墙已经完成了。

但是，有经验的程序员一眼就看出来了，有两个很大的漏洞：一是用户不需要登录就可以直接发送祝福，且没有过滤用户提交的内容；而是没有管理功能，无法实现增删查改。

提高数据安全性

后端逻辑增加用户登录的判断

<?php
session_start();
if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) {
  // 用户未登录，跳转到登录页面
  header('Location: login.php');
  exit;
}

// 用户已登录，处理祝福数据
$blessing = htmlspecialchars(trim($_POST['blessing']));

// 连接数据库
$db = mysqli_connect('host', 'username', 'password', 'database');

// 插入数据
$query = "INSERT INTO blessings (blessing) VALUES ('$blessing')";
$result = mysqli_query($db, $query);

// 检查是否插入成功
if ($result) {
  echo '祝福发送成功！';
} else {
  echo '祝福发送失败，请重试。';
}

mysqli_close($db);
?>

可以看到，上面的代码增加了用户登录状态的判断，同时对$blessing进行了过滤。

设计登录页面

这是一个简单的login.php的代码示例：

<?php
session_start();
$errorMessage = '';

if (isset($_POST['submit'])) {
  $username = $_POST['username'];
  $password = $_POST['password'];
  
  // 验证用户名和密码是否正确
  if ($username === 'admin' && $password === 'password') {
    $_SESSION['logged_in'] = true;
    header('Location: new_year_wishes_wall.php');
    exit;
  } else {
    $errorMessage = '用户名或密码错误！';
  }
}
?>
<html>
  <head>
    <title>登录</title>
  </head>
  <body>
    <form action="" method="post">
      <fieldset>
        <legend>登录</legend>
        <?php if (!empty($errorMessage)) { echo $errorMessage . '<br><br>'; } ?>
        用户名：<input type="text" name="username"><br>
        密码：<input type="password" name="password"><br>
        <input type="submit" name="submit" value="登录">
      </fieldset>
    </form>
  </body>
</html>

在这个代码示例中，首先使用session_start()启动会话。然后，如果表单被提交，它将检查用户提供的用户名和密码是否与预定义的用户名和密码匹配。如果匹配，则将$ _SESSION ['logged_in']设置为true，并重定向到新年祝福墙页面。如果用户名和密码不匹配，则显示错误消息。

上面的登录只设计了单用户登录，后面可以修改成从MySQL用户表查找用户信息。

支持多用户登录

以下是一个简单的用户登录系统的代码，用户信息存储在MySQL数据库中。注意到，现在存储的是明文密码，如需要增强安全性，可以增加md5()函数。

<?php
// 连接数据库
$conn = mysqli_connect("host", "username", "password", "database");

// 判断连接是否成功
if (!$conn) {
    die("连接数据库失败：" . mysqli_connect_error());
}

// 获取用户名和密码
$username = mysqli_real_escape_string($conn, $_POST['username']);
$password = mysqli_real_escape_string($conn, $_POST['password']);

// 判断用户名和密码是否为空
if (!empty($username) && !empty($password)) {
    // 构造查询语句
    $sql = "SELECT * FROM users WHERE username='$username' AND password='$password'";
    $result = mysqli_query($conn, $sql);

    // 判断查询结果是否存在
    if (mysqli_num_rows($result) > 0) {
        // 设置登录状态
        $_SESSION['logged_in'] = true;
        $_SESSION['username'] = $username;

        // 跳转到祝福墙页面
        header('Location: wall.php');
        exit;
    } else {
        // 登录失败，显示错误信息
        echo "用户名或密码错误，请重试。";
    }
} else {
    // 用户名和密码为空，显示错误信息
    echo "请输入用户名和密码。";
}

// 关闭数据库连接
mysqli_close($conn);
?>

前端部分未作修改。

管理功能的实现

祝福管理

下面是一种实现管理功能的方法，实现对祝福的增删查改：

数据库设计：首先需要为祝福数据创建一张数据表，表中包含祝福内容、发送者、发送时间等字段。

增加祝福：使用 insert 语句将新的祝福插入数据库中。

删除祝福：使用 delete 语句删除指定的祝福。

查询祝福：使用 select 语句查询祝福，可以根据需要设置查询条件。

修改祝福：使用 update 语句修改指定的祝福。

需要注意的是，为了保证数据的安全性，对于对数据库的操作，需要使用 prepared statements 避免 SQL 注入攻击。

以下是简单的代码示例：

增加祝福：

$conn = mysqli_connect("localhost", "username", "password", "database");
$blessing = "祝大家新春快乐！";

$stmt = mysqli_prepare($conn, "INSERT INTO blessings (blessing) VALUES (?)");
mysqli_stmt_bind_param($stmt, "s", $blessing);
mysqli_stmt_execute($stmt);

mysqli_stmt_close($stmt);
mysqli_close($conn);

删除祝福：

$conn = mysqli_connect("localhost", "username", "password", "database");
$id = 1;

$stmt = mysqli_prepare($conn, "DELETE FROM blessings WHERE id = ?");
mysqli_stmt_bind_param($stmt, "i", $id);
mysqli_stmt_execute($stmt);

mysqli_stmt_close($stmt);
mysqli_close($conn);

查询祝福：

$conn = mysqli_connect("localhost", "username", "password", "database");

$stmt = mysqli_prepare($conn, "SELECT id, blessing FROM blessings");
mysqli_stmt_execute($stmt);

mysqli_stmt_bind_result($stmt, $id, $blessing);
while (mysqli_stmt_fetch($stmt)) {
    printf("%d, %s\n", $id, $blessing);
}

mysqli_stmt_close($stmt);
mysqli_close($conn);

修改祝福：

$conn = mysqli_connect("localhost", "username", "password", "database");
$id = 1;
$blessing = "祝大家新春快乐！";

$stmt = mysqli_prepare($conn, "UPDATE blessings SET blessing = ? WHERE id = ?");
mysqli_stmt_bind_param($stmt, "si", $blessing, $id);
mysqli_stmt_execute($stmt);

mysqli_stmt_close($stmt);
mysqli_close($conn);

以下是基于HTML, CSS 和 JavaScript 的简单的祝福管理界面的前端代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>祝福管理界面</title>
    <style>
      /* 样式定义 */
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th, td {
        border: 1px solid #dddddd;
        padding: 8px;
        text-align: left;
      }
      th {
        background-color: #dddddd;
      }
      .btn {
        background-color: #dddddd;
        border: none;
        padding: 8px 16px;
        text-align: center;
        cursor: pointer;
      }
      .add-btn {
        background-color: green;
        color: white;
      }
      .edit-btn {
        background-color: blue;
        color: white;
      }
      .delete-btn {
        background-color: red;
        color: white;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>ID</th>
        <th>祝福内容</th>
        <th>操作</th>
      </tr>
      <!-- 表格数据加载 -->
      <tr>
        <td>1</td>
        <td>新春快乐！</td>
        <td>
          <button class="btn edit-btn">编辑</button>
          <button class="btn delete-btn">删除</button>
        </td>
      </tr>
      <!-- 新增祝福按钮 -->
      <tr>
        <td colspan="3">
          <button class="btn add-btn">新增祝福</button>
        </td>
      </tr>
    </table>
  </body>
</html>

用户管理

下面是一份用 PHP 实现的用户管理的代码：

<?php

// 连接数据库
$conn = mysqli_connect('localhost', 'username', 'password', 'database');

// 查询所有用户
$query = "SELECT * FROM users";
$result = mysqli_query($conn, $query);

// 输出所有用户
while ($row = mysqli_fetch_assoc($result)) {
    echo $row['id'] . ' ' . $row['username'] . ' ' . $row['email'] . '<br>';
}

// 添加新用户
if (isset($_POST['submit'])) {
    $username = $_POST['username'];
    $email = $_POST['email'];
    $query = "INSERT INTO users (username, email) VALUES ('$username', '$email')";
    mysqli_query($conn, $query);
}

// 修改用户信息
if (isset($_POST['update'])) {
    $id = $_POST['id'];
    $username = $_POST['username'];
    $email = $_POST['email'];
    $query = "UPDATE users SET username='$username', email='$email' WHERE id=$id";
    mysqli_query($conn, $query);
}

// 删除用户
if (isset($_GET['delete'])) {
    $id = $_GET['delete'];
    $query = "DELETE FROM users WHERE id=$id";
    mysqli_query($conn, $query);
}

// 关闭数据库连接
mysqli_close($conn);

?>

这段代码实现了从数据库中查询所有用户、添加新用户、修改用户信息和删除用户的功能。使用者可以根据实际情况对代码进行修改，以达到最终的需求。

以下是一个用户管理界面的示例代码：

HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>用户管理</title>
  </head>
  <body>
    <h1>用户管理</h1>
    <table>
      <thead>
        <tr>
          <th>用户名</th>
          <th>密码</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="user-list">
      </tbody>
    </table>
    <button id="add-user-btn">添加用户</button>
    <div id="add-user-modal" style="display:none;">
      <h2>添加用户</h2>
      <form id="add-user-form">
        <label>
          用户名：
          <input type="text" name="username" required>
        </label>
        <label>
          密码：
          <input type="password" name="password" required>
        </label>
        <button type="submit">提交</button>
        <button id="close-add-user-modal">取消</button>
      </form>
    </div>
    <div id="edit-user-modal" style="display:none;">
      <h2>编辑用户</h2>
      <form id="edit-user-form">
        <input type="hidden" name="id">
        <label>
          用户名：
          <input type="text" name="username" required>
        </label>
        <label>
          密码：
          <input type="password" name="password" required>
        </label>
        <button type="submit">提交</button>
        <button id="close-edit-user-modal">取消</button>
      </form>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(function() {
      function loadUsers() {
  $.ajax({
    url: 'api/get_users.php',
    type: 'GET',
    dataType: 'json',
    success: function (data) {
      var html = '';
      data.forEach(function (user) {
        html +=
          "<tr>" +
          "<td>" + user.id + "</td>" +
          "<td>" + user.username + "</td>" +
          "<td>" + user.email + "</td>" +
          "<td>" +
          "<button class='edit-user-btn' data-id='" + user.id + "'>Edit</button>" +
          "<button class='delete-user-btn' data-id='" + user.id + "'>Delete</button>" +
          "</td>" +
          "</tr>";
      });
      $('#users-table tbody').html(html);
    }
  });
}
</script>
  </body>
</html>