篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[从0开始]PHP+phpstudy留言板项目搭建教程及报错详析相关的知识,希望对你有一定的参考价值。
[从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环境
-
打开PhpStudy,启动WAMP
-
点击左侧栏中的软件管理,安装一个较高版本的PHP
-
安装完成后进入右侧的设置,进入扩展组件页面,打开XDebug调试组件,并记下端口
-
点击左侧的网站,点击右侧管理,再打开根目录,接着返回上一级文件夹,打开Extensions文件夹,进入php文件夹,再进入安装的php所对应的文件夹,找到php.exe,记住该php.exe的路径
-
点击设置,搜索PHP,点击在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",
- 点击此电脑,右键打开属性,依次点击高级系统设置、环境变量,双击打开系统变量中的Path,点击新建,输入php.exe所在文件夹的路径,点击确定。
路径举例:D:\\Software\\PHPStudy\\phpstudy_pro\\Extensions\\php\\php7.4.3nts
- 创建一个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
-
在Vscode中搜索、安装扩展Open PHP/HTML/JS In Browser
-
在phpstudy/WWW文件夹中新建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即可。
回到registerfront.php页面,单击鼠标右键,点击Open PHP/HTML/JS In Browser
注册功能后端
大体框架: 设置数据库参数 连接数据库 获取表单数据 注册验证 插入数据 跳转登录前端
PhpStudy设置数据库参数
下述步骤以数据库名称:qiushuo,用户名:qiushuo, 密码:qiushuo 为例
PhpStudy数据库工具新建表及字段
在软件管理中安装phpMyAdmin
依次点击首页、数据库工具、phpMyAdmin
输入数据库用户名、密码后进入数据库操作页面,新建两张数据表。
具体方法参考管理功能模块或自行使用Google、百度学习探索。
- 一张为user,包含id,name,pass字段,与用户注册登录有关;
- 一张为content,包含id、name,text、createtime字段,与留言实现有关。
user表:
content表:
功能实现
第一次提交数据时,id默认为1;此后每插入一次数据,id自增。
步骤:
- 在右侧的更多复选框中点击主键
- 执行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
管理功能
该项目基于Phpstudy的数据库工具phpMyAdmin,可使用该工具以Web 图形模式直接管理 MySQL 数据库。
- 管理已知数据库中的数据表
- 新建数据表
- 定义数据表中字段
- 更改数据表结构
- 插入数据
- 执行SQL语句
以上功能服务于该项目的搭建,其它功能读者可自行探索。
至此,PHP+phpstudy留言板项目搭建教学完成,希望读者躬行实践。
报错详析
为了更好地定位问题,可以在执行SQL语句之前加入mysqli_ error()函数来查看错误信息,例如:
$result = mysqli_query($conn, $sql);
if (!$result)
printf("Error: %s\\n", mysqli_error($conn));
exit();
报错实例:
-
Error: Field \'ID\' doesn\'t have a default value
报错原因:将ID设置为主键,但未设置为自增,导致增加数据后不能获取生成新的主键。
解决方法:参考本文功能实现模块
-
Error: Duplicate entry \'1\' for key \'PRIMARY\'
报错原因:id已设置为主键,在注册模块中试图将第一个数据的id赋值为1,从而实现从1开始的自增,但该SQL插入语句存在逻辑错误。
如图:
第16行的语句使得程序在每次注册插入新的数据后,都会让该用户的id变为1,导致出现重复键。
解决方法:删除该语句中的id
及1
,程序默认从id=1开始自增。
-
注册不同的用户,但在phpMyAdmin中增加的都是同一个管理员账号数据
报错原因:后端文件包含了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留言板项目搭建教程及报错详析实例。读者可以通过此留言板项目教程更好地认识前端与后端的区别与联系。
我是秋说,我们下次见。