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

Posted 秋说

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[从0开始]PHP+phpstudy留言板项目搭建教程及报错详析相关的知识,希望对你有一定的参考价值。

[从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环境

  1. 打开PhpStudy,启动WAMP

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

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

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

  5. 点击设置搜索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",
  1. 点击此电脑,右键打开属性,依次点击高级系统设置环境变量,双击打开系统变量中的Path,点击新建,输入php.exe所在文件夹的路径,点击确定

    路径举例: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

  2. 在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、百度学习探索。

  1. 一张为user,包含id,name,pass字段,与用户注册登录有关;
  2. 一张为content,包含id、name,text、createtime字段,与留言实现有关。
    user表:
    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

管理功能

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

  1. 管理已知数据库中的数据表
  • 新建数据表
  • 定义数据表中字段
  • 更改数据表结构
  • 插入数据
  • 执行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,导致出现重复键。
    解决方法:删除该语句中的id1,程序默认从id=1开始自增。

  3. 注册不同的用户,但在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留言板项目搭建教程及报错详析实例。读者可以通过此留言板项目教程更好地认识前端与后端的区别与联系。

我是秋说,我们下次见。

转载:超详细搭建PhpStorm+PhpStudy开发环境

转载:http://blog.csdn.net/u012861467/article/details/54692236

 

刚开始接触PHP开发,搭建开发环境是第一步,网上下载PhpStorm和PhpStudy软件,怎样安装和激活就不详细说了,我们重点来看一看怎样搭配这两个开发环境。

 

前提:现在假设你已经安装完PhpStorm和PhpStudy软件。

我的PhpStorm使用的是默认安装目录,这个没什么疑问的,PhpStudy软件我选择解压的目录是G:\Program Files\ 。

技术分享图片

 

在PhpStudy软件的解压目录下的www文件夹就是我们的网站根目录。

技术分享图片

现在我们使用PhpStorm新建一个新工程。

第一步:打开PhpStorm软件,点击创建新项目,在输入框填写项目名称,项目存放地址,项目类型信息。

技术分享图片

这里我的配置信息看上图。填写完点击确定。

 

第二步:设置PHP项目的版本信息

技术分享图片

这里我选择的level是PHP5.6

技术分享图片

Interpreter现在默认是没有的,我们要先配置一下。

点击在Interpreter的选择框旁边的技术分享图片按钮,跳转到的界面如下图:

技术分享图片

默认没配置过的左手边的框里面是空白的,我已经配置过了,所以现在左手边有了两个Interpreter版本,现在我们要新建一个Interpreter,点击1位置的按钮添加Interpreter,在2的位置填写这个Interpreter的名称,位置3是我们要设置的php.exe文件位置,点击右手边的"...",在弹出的对话框中选择我们Phpstudy的php.exe文件位置(Phpstudy帮我们集成了php)。

技术分享图片

配置完成之后点击确定。现在我们回到前一个界面,点击下拉就可以看到我们刚才配置的Interpreter。

技术分享图片

这里选上其中一个,看你要使用什么版本咯。再点击确定,这时候创建新工程就完成了。

 

第三步:新建php文件

现在我们的工程是没有文件的,需要我们新建网页文件。选中项目文件右键-->新建,可以看到有好几种文件格式:

技术分享图片

我新建了两个文件如下图:

技术分享图片

文件的内容如下:

form.html

 

[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>PHP处理表单2</title>  
  6. </head>  
  7. <body>  
  8. <form action="welcome.php" method="post">  
  9.     名字: <input type="text" name="fname">  
  10.     年龄: <input type="text" name="age">  
  11.     <input type="submit" value="提交">  
  12. </form>  
  13. </body>  

welcome.php

 

 

[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>$_POST获取表单post信息</title>  
  6. </head>  
  7. <body>  
  8. <?php  
  9. echo "欢迎".$_POST["fname"]."!<br/>";  
  10. echo "你的年龄是".$_POST["age"]."岁。";  
  11. ?>  
  12. </body>  
  13. </html>  

 

现在打开form.html文件,鼠标点击文件内容的任意地方,会有个悬浮框出现:

技术分享图片

 

这个是可以选择打开form.html文件的浏览器,我们选择其中一个可以看看form.html文件的显示效果,其实只是一个简单的表单:

技术分享图片

 

重点来了,也是我写这篇博客的目的,我们填写表单信息之后点击“提交”按钮,我们要实现的效果是跳转到welcome.php页面,并显示form.html页面我们填写的名字和年龄信息 。问题来了,跳转之后浏览器显示“文件找不到”。这就郁闷了,为什么form.html文件也可以打开,而welcome.php文件跟form.html文件都是放同一级目录下的啊,怎么会找不到呢,折腾了一天,终于发现问题了,原来我编辑的只是本地文件,至于form.html文件能打开是因为Phpstorm软件自动帮我们把文件使用本地服务器打开所以能找到,而welcome.php文件我们并没有提交到本地服务器上。

 

下面是解决方式(主要是配置本地服务器);

步骤一:配置本地服务器

选择:工具-->Deployment-->Configuration

技术分享图片

初次是没有任何配置信息的:

技术分享图片

我们点击“+”添加服务器配置,在弹出框中选择“Local or mounted folder”:

技术分享图片

下面的配置很重要,关乎文件能否正常被找到,添加完服务器之后我们就要配置文件的位置了:

技术分享图片

选择 “Connection”,位置3就是刚才我们选择的服务器类型,关键是位置4和5。

“Upload/download project files”意思是上传或下载的文件目录 ,这里很关键,因为我们使用的是PhpStudy,PhpStudy有自己的网站目录,这里我设置的是PhpStudy的网站根目录,就是我们之前PhpStudy解压的位置G:\Program Files\phpStudy\WWW,待会就知道这个目录位置有什么用了。

"Browse files on server" 意思是服务器项目的访问地址(就是用浏览器可以打开项目页面的链接地址),这里可以写成PhpStudy的根地址“http://localhost/”,后面可以再指定具体的文件位置。

选择“Mappings”,如下图配置:

技术分享图片

这里注意位置2是被选上的,成灰色不可点击。

位置3就是项目源文件的地址,我的项目文件是放在“G:\Php-workspace\MyTest”目录下。

位置4是项目在本地服务器的详细文件夹位置(相对于我们在 “Connection”设置的“Upload/download project files”位置,就是我们待会把源代码上传部署到服务器的文件位置),这里我指定为“/phpStudyTest”,待会工程上传的时候就会上传到“G:\Program Files\phpStudy\WWW\phpStudyTest”这个phpStudyTest文件夹下。

位置5是相对于我们在 “Connection”设置的"Browse files on server"的位置,我们的项目现在放到了“localhost”的根位置phpStudyTest文件夹下了,所以设置为“/phpStudyTest”。

位置6就是我们可以用浏览器打开项目的链接地址预览。

关键是要理解清楚这几个文件夹的意思,不然是访问不到网页文件的。

配置完之后点击“确定”,现在我们还是没有把工程上传到服务器的,下一步就是设置上传工程的配置。

 

步骤二:配置运行调试环境

点击编辑结构:

技术分享图片

展开 Default -> PHP Web Application,现在是<no server>状态,如下图:

技术分享图片

点击“...”按钮,在弹出框中点击“+”添加服务器信息

技术分享图片

技术分享图片

位置1 填写配置的名称,位置2填写我们本地服务器的地址,这里是“localhost”,端口默认是80,Debugger默认就好了,也可以去配置Xdebug,这里不重点讲。填写完成之后点击:应用->确定。

回到上一个页面,在Server下拉就可以看到我们配置名称:

技术分享图片

位置2是我们默认的链接开始位置,这里填“/”就好了。

位置3是我们用于调试的默认浏览器类型。

现在一切都配置好了。OK!!!!!!!!!!!!!!

 

部署工程到服务器

点击工程右键也可以的,我们选择点击工具栏,点击位置如下图:

技术分享图片

上传成功之后,控制台输出;

技术分享图片

如果不想每次都手动上传,可以设置自动模式,自动模式下当我们修改了文件并保存之后,软件自动把修改的文件上传到服务器。设置如下:

技术分享图片

现在我们来看看效果:

技术分享图片

 

点击运行form.html

技术分享图片

 

再点击提交,现在能正常跳转了:

技术分享图片

 

工程源码:

http://download.csdn.net/detail/u012861467/9743767

 

好了,本文结束了,希望能帮到还在寻找解决方法的同学。这也是本人通过实践得出来的总结,希望尊重别人的劳动成果,写这么长不容易的,转载记得要标上原文链接地址。

如果有什么写得不好的地方欢迎指出,谢谢。

 

以上是关于[从0开始]PHP+phpstudy留言板项目搭建教程及报错详析的主要内容,如果未能解决你的问题,请参考以下文章

如何在Windows下配置搭建PHP环境

用phpstudy 2016搭建环境访问thinkphp出现403 急!!!

[经验技巧] “php+mysql+apache”环境搭建及"手动SQL注入",20180527-0

.net转PHP从零开始-环境的搭建

新手 虚拟机2003搭建PHP环境 PHPstudy错误?

写PHP 用phpStudy搭建了本地服务器 但是 用浏览器打开php文件时只显示代码!请问怎么解决