526互联

[从0开始]PHP+phpstudy留言板项目搭建教程及报错详析

发布时间 2023-04-09 11:59:46作者: 秋说

[从0开始]PHP+phpstudy留言板项目搭建教程及报错详析

基础知识及工具准备

基础知识：四种语言

PHP

PHP是在服务器端执行的脚本语言，适用于Web开发并可嵌入HTML中。
学习网站：PHP教程 | 菜鸟教程

SQL

SQL是一种数据库查询和程序设计语言，用于存取数据以及查询、更新和管理关系数据库系统。
该留言板项目后端逻辑主要由PHP及SQL实现，读者掌握SQL增删改查语句即可。
学习网站：SQL教程 | 菜鸟教程

HTML

HTML是一种标记语言，它通过一系列标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
CSS语言常嵌入HTML中，为HTML文档添加样式。为突出本文的目的性，此项目不再添加CSS语言。读者可自行探索学习。
HTML学习网站：HTML教程 | 菜鸟教程
CSS学习网站：CSS教程 | 菜鸟教程

JavaScript

留言板是一个Web项目。HTML 定义了网页的内容，CSS 描述了网页的布局，而JavaScript 控制了网页的行为。此项目运用Javascript实现弹出对话框以回显注册、登录、留言进程。
JavaScript学习网站：JavaScript教程 | 菜鸟教程

工具准备：Vscode

常用的PHP开发工具有PhpStorm、SublimeText、Zend Studio、Vscode等，本文使用Vscode进行实例分析。
官网安装地址：Visual Studio Code
官方文档地址：Vscode Docs
Vscode教程：Vscode教程 | 菜鸟教程

工具准备：PhpStudy

PhpStudy是一个PHP调试环境的程序集成包，集成最新的Apache、PHP、MySQL、phpMyAdmin、ZendOptimizer，安装后无须配置即可使用。
官网安装地址：PhpStudy Download

配置PHP环境

  1. 打开PhpStudy，启动WAMP
    启动WAMP

  2. 点击左侧栏中的软件管理，安装一个较高版本的PHP
    安装PHP

  3. 安装完成后进入右侧的设置，进入扩展组件页面，打开XDebug调试组件，并记下端口
    PHP设置

  4. 点击左侧的网站，点击右侧管理，再打开根目录，接着返回上一级文件夹，打开Extensions文件夹，进入php文件夹，再进入安装的php所对应的文件夹，找到php.exe，记住该php.exe的路径PHP根目录php.exe

  5. 点击设置，搜索PHP，点击在settings.json中编辑
    settings.json在{}中添加如下代码并保存 注意：路径的\应替换为/

    "php.validate.executablePath":  "php.exe的路径",

    "php.executablePath": "php.exe的路径",   

   例如
   "php.validate.executablePath":  "D:/Software/PhpStudy/Extensions/php/php7.3.4nts/php.exe",
   "php.executablePath": "D:/Software/PhpStud/Extensions/php/php7.3.4nts/php.exe",
  1. 点击此电脑，右键打开属性，依次点击高级系统设置、环境变量，双击打开系统变量中的Path，点击新建，输入php.exe所在文件夹的路径，点击确定。
    系统变量Path
    路径举例：D:\Software\PHPStudy\phpstudy_pro\Extensions\php\php7.4.3nts
    路径
  2. 创建一个PHP文件，检验环境是否配置成功。
    代码如下：
<?php
echo"秋说";
?>

依次点击命令中心、运行、启动调试
环境配置若下方的调试控制台回显秋说，则说明PHP环境搭建成功。
环境搭建过程中若存在问题，可自行使用Google、百度寻找解决方案或在评论区留言。

项目搭建

留言板功能模块

注册功能：实现用户注册及注册验证
登录功能：实现用户登录及登录验证
留言功能：实现用户名、留言内容、留言时间在页面的输出
管理功能：实现数据的增删改查

注册功能前端

大体框架：用户名栏 密码栏 注册按钮 登录页面超链接
本文采用形式简单的前端页面以简化代码、降低阅读难度，读者可自行优化前端页面或采用前端框架。
打开phpstudy/WWW文件夹，新建registerfront.php，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
<div>
<h1>用户注册</h1>
<form  action="registerend.php" method="post" onsubmit="return check()">   <!--当用户离开输入字段时执行JavaScript-->
        用户名:<input type="text" name="name">  
        <br><br>
        密码:<input type="password" name="pass">
        <br><br>
        <input type="submit" value="提交">
        <br><br>
        <a href="loginfront.php">登录页面</a>
        </form>
    
    <script>
    function check()//用户验证
    {
        let name = document.getElementsByName('name')[0].value.trim();
        let pass = document.getElementsByName('pass')[0].value.trim();
        let nameReg = /^[a-zA-Z0-9\u2E80-\uF999]{1,20}$/;
        if(!nameReg.test(name))//检测name是否匹配nameReg
        {
            alert('用户名不能出现特殊字符！');
            return false;
        }
        let passreg = /^[a-zA-Z0-9]{6,20}$/;
        if(!passreg.test(pass))
        {
            alert('密码不能出现特殊字符，且不得少于六位数！');
            return false;}
        return true;   }
</script>
    </div>
        </body>
            </html>

实现页面打开功能： Open PHP/HTML/JS In Browser

  1. 在Vscode中搜索、安装扩展Open PHP/HTML/JS In Browser
    Open PHP/HTML/JS in Browser

  2. 在phpstudy/WWW文件夹中新建settings.json输入如下代码
    settings.json

{
    "open-php-html-js-in-browser.customHost": "127.0.0.1",  //本地域名
    "open-php-html-js-in-browser.customUrlToOpen": "http://${host}/${relativeDirnameDocumentRoot}/${fileBasename}",
    "open-php-html-js-in-browser.documentRootFolder": "D:/Software/PHPStudy/phpstudy_pro/WWW/"  //站点的绝对路径
}

文件保存后，点击设置，搜索@ext:PrimaFuture.open-php-html-js-in-browser，选择图示复选框中的custom即可。
custom回到registerfront.php页面，单击鼠标右键，点击Open PHP/HTML/JS In Browser
单击鼠标右键注册页面

注册功能后端

大体框架： 设置数据库参数 连接数据库 获取表单数据 注册验证 插入数据 跳转登录前端

PhpStudy设置数据库参数

设置数据库参数下述步骤以数据库名称：qiushuo，用户名：qiushuo， 密码：qiushuo 为例

PhpStudy数据库工具新建表及字段

在软件管理中安装phpMyAdmin
phpMyAdmin依次点击首页、数据库工具、phpMyAdmin
phpMyAdmin输入数据库用户名、密码后进入数据库操作页面，新建两张数据表。
具体方法参考管理功能模块或自行使用Google、百度学习探索。

  1. 一张为user，包含id，name，pass字段，与用户注册登录有关；
  2. 一张为content，包含id、name，text、createtime字段，与留言实现有关。
    user表：
    user表content表：
    content表

功能实现

第一次提交数据时，id默认为1；此后每插入一次数据，id自增。
步骤：

  1. 在右侧的更多复选框中点击主键
    主键
  2. 执行SQL语句
    输入ALTER TABLE user(表名) MODIFY COLUMN id INT AUTO_INCREMENT; 点击执行
    自增若页面回显如下图所示，则说明功能实现执行成功：
    回显
    功能实现步骤在content表中与user表一致，不再赘述。
    注意SQL语句不要写错对应的表名

连接数据库

在phpstudy/WWW文件夹中新建conn.php，代码如下：

<?php
$servername="localhost";
$username="qiushuo";//替换为具体的数据库用户名
$password="qiushuo";//替换为具体的数据库密码
$dbname="qiushuo";//替换为具体的数据库名称
$conn=mysqli_connect($servername,$username,$password,$dbname);//连接数据库
mysqli_query($conn, "SET NAMES UTF-8");//设置字符集
?>

在phpstudy/WWW文件夹中新建registerend.php，代码如下：

<?php

$name=$_POST['name'];  
$pass=$_POST['pass'];   //获取表单数据

    include_once "conn.php";   //运行conn文件，即连接数据库
    $sql="SELECT FROM user WHERE name='$name'";
    $result=mysqli_query($conn,$sql);//注册时$result若能在数据库中匹配到结果，则回显用户名存在
    $num=mysqli_num_rows($result);
    if($num)
    {
    echo "<script>alert('输入的用户名已经存在,请重新输入。'); history.back();</script>";//history.back用于返回到上一个页面
    exit;
    }
    else{
    $sql="INSERT INTO user(name,pass) values('$name','$pass')";
    $result=mysqli_query($conn,$sql);
    }
    if($result)
{
    echo "<script>alert('注册成功，请登陆');location.href='loginfront.php';</script>";
    //若注册成功，则跳转到loginfront.php页面。
}
else{
    printf("Error: %s\n", mysqli_error($conn));
}

查看是否成功连接数据库

在conn.php中添加如下代码即可在提交后通过页面回显查看是否成功连接数据库

if($conn)
{
    echo"<script>alert('连接数据库成功');</script>";
}
else{
    echo"<script>alert('连接数据库失败');</script>";
}

回显连接数据库由下图前端回显可知，数据库连接成功：数据库连接成功至此，注册功能告一段落。

登录功能前端

大体框架：用户名栏 密码栏 登录按钮 注册页面超链接
本文采用形式简单的前端页面以简化代码、降低阅读难度，读者可自行优化前端页面或采用前端框架。
在phpstudy/WWW文件夹中新建loginfront.php，代码如下：

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>

<body>
    <div>
        <h1>用户登录</h1>
    <form action="loginend.php" method="post" >  //提交表单至loginend.php
    用户名：<input type="text" name="name" >
    密码：<input type="password" name="pass">
    <input type="submit" value="登录">
    <br><br>
    <a href=registerfront.php><h2>返回注册页面</h2></a>
</form>               
    </div>
        </body>
            </html>

登录页面前端

登录功能后端

大体框架：连接数据库 获取表单数据 登录验证 跳转留言页面前端
在phpstudy/WWW文件夹中新建loginend.php，代码如下：

<?php
    include_once "conn.php";
if($_SERVER["REQUEST_METHOD"] == "POST") { //规定传参方式
    $name=$_POST["name"];
    $pass=$_POST["pass"];
    $sql="SELECT * FROM user WHERE name='$name' AND pass='$pass'";
    //使用SQL语句将参数与数据库进行匹配
    $result=mysqli_query($conn, $sql);
    if (mysqli_num_rows($result) == 1) {
    //如果匹配成功，mysqli_num_rows被赋值为1
        echo"<script>alert('登录成功');location.href='messagefront.php';</script>";  
        //若登录成功，则跳转到留言前端页面
    } else {
        //验证失败
        echo"<script>alert('登录失败,用户名或密码错误！');history.back();</script>";
    }
}
?>

登录成功

留言功能前端

大体框架：输入框 提交按钮
本文采用形式简单的前端页面以简化代码、降低阅读难度，读者可自行优化前端页面或采用前端框架。
在phpstudy/WWW文件夹中新建messagefront.php，代码如下：

<?php
session_start();  //开启会话
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>留言</title>
</head>

<body>
    <div>
    <form action="messageend.php" method="post" >        
    <textarea name="text" cols="30" rows="10"></textarea>
    <input type="submit" value="提交" >
        </form>
    </div>
</body>
    </html>

留言页面

留言功能后端

大体框架：session检测 获取表单数据 插入数据 遍历数据 留言输出
在phpstudy/WWW文件夹中新建messageend.php，代码如下：

<?php
include 'conn.php';    
session_start();// 检查用户是否已登录
if (!isset($_SESSION['name'])) {
    echo "<script>alert('请先登录');</script>";
    exit();
}

    $name=$_SESSION['name'];  //获取已登录的用户名
    $text=$_POST['text'];     //获取已提交的留言内容
    $createtime=date('Y-m-d H:i:s');      //设置留言时间
    if(!strlen($text))
{
    echo "<script>alert('留言不可为空');</script>";
    exit;
}

$sql="INSERT INTO content(name,text,createtime) VALUES ('$name','$text', '$createtime')";  
//插入用户名、留言内容、留言时间到数据库
$result=mysqli_query($conn,$sql);
if($result){
$query = "SELECT * FROM content ORDER BY id DESC";
$result = mysqli_query($conn, $query);        
// 如果插入数据成功，则遍历留言列表并在前端输出
while ($row = mysqli_fetch_array($result)) {
    echo "<div>";   //PHP与HTML包含
    echo "<p>" . $row['text'] . "</p>";
    echo "<p>" . $row['name'] . " 发表于 " . $row['createtime'] . "</p>";
    //在"发表于"左右添加空格 使回显的页面内容清晰
    echo "<br><br>";//起留言页面的分割作用
    echo "</div>";
       }
    }
else {
echo "<script>alert('留言失败');history.back();</script>";
    }
?>

留言显示要使时间后的000000消失，可以将createtime字段中的DATETIME长度/值更改为0
DATETIME时间长度修改

管理功能

该项目基于Phpstudy的数据库工具phpMyAdmin，可使用该工具以Web 图形模式直接管理 MySQL 数据库。

  1. 管理已知数据库中的数据表
  • 新建数据表
    新建数据表
  • 定义数据表中字段字段
  • 更改数据表结构
    更改数据表结构
  • 插入数据
    插入数据
  • 执行SQL语句
    执行SQL语句

以上功能服务于该项目的搭建，其它功能读者可自行探索。

至此，PHP+phpstudy留言板项目搭建教学完成，希望读者躬行实践。

报错详析

为了更好地定位问题，可以在执行SQL语句之前加入mysqli_ error()函数来查看错误信息，例如：

$result = mysqli_query($conn, $sql);
if (!$result) {
    printf("Error: %s\n", mysqli_error($conn));
    exit();
}

报错实例：

  1. Error: Field 'ID' doesn't have a default value
    报错原因：将ID设置为主键，但未设置为自增，导致增加数据后不能获取生成新的主键。
    解决方法：参考本文功能实现模块

  2. Error: Duplicate entry '1' for key 'PRIMARY'
    报错原因：id已设置为主键，在注册模块中试图将第一个数据的id赋值为1，从而实现从1开始的自增，但该SQL插入语句存在逻辑错误。
    如图：
    逻辑错误第16行的语句使得程序在每次注册插入新的数据后，都会让该用户的id变为1，导致出现重复键。
    解决方法：删除该语句中的id及1，程序默认从id=1开始自增。

  3. 注册不同的用户，但在phpMyAdmin中增加的都是同一个管理员账号数据
    报错原因：后端文件包含了conn.php，conn.php代码如下：
    conn.php

若前端文件中定义的用户名也为username：

include_once "conn.php";
$sql="INSERT INTO user(username,password) values('$username','$password')";

在包含运行conn.php文件后，通过POST提交的username会被conn.php中的username覆盖，password同理。若注册后端逻辑不严谨，会造成管理员账号密码被多次提交至数据库。

总结

以上为PHP+phpstudy留言板项目搭建教程及报错详析实例。读者可以通过此留言板项目教程更好地认识前端与后端的区别与联系。

我是秋说，我们下次见。