您的位置：首页 > Web前端

WEB前端利用XAMPP套件实现一个简单的表单与数据库交互

2016-11-02 09:47 861 查看

一、开发项目示例：

功能介绍：做一个学生成绩录入的项目，在表单中输入相应的信息和成绩并保存，在MySQL控制台下可以查看到刚才输入的数据，并且可以输入某学生的学号，删除相应学生的全部信息












二、开发前的准备:

1.开发环境：windows系统

2.使用的语言技术：html/php/mysql

3.使用的工具：代码编写工具--hbuilder/DW/EditPlus..   

  服务器与服务器集成套件--XAMPP/WAMPSERVER..  

4.必须禁用的2项服务：

web 部署代理服务与Windows Firewall ---->可能会导致下面XAMPP的端口号被占用





本示例使用：Editplus + XAMPP 

XAMPP下载地址：

https://www.apachefriends.org/zh_cn/index.html

下载安装后，打开XAMPP软件，点击Netstat按钮查看端口号



确保以下三个端口号未被占用：

80,443---apachea服务器端口

3306--Mysql数据库端口

如果被占用，可能是上面说的两项服务没有关闭或者端口号被其他应用占用--->需要手动修改端口号或者强行启动任务管理器关闭占用该端口的程序（大多数情况下，80端口被System占用）



回到主窗口启动apache与mysql



成功启动后，应该如下图所示



再次点击Netstat按钮，如果80，443端口被httpd.exe占用，3306被mysqld.exe占用说明成功启动了apachea与mysql



测试是否完成XAMPP以及apachea的安装和启动，在浏览器地址输入http://127.0.0.1,如果出现如图结果说明能共成功访问服务器



完成以上操作即可开始开发项目！！！

三、创建项目:
打开本机服务器文件夹C:/XAMPP/htdocs 创建三个项目所需的HTML文件，数据库sql文件，php文件，名字建议用英文，因为htdocs文件夹下起中文名字不利于外界访问，可能出现乱码的现象。

注意：项目一定要放在htdocs文件夹下，并且在127.0.0.1地址下打开，否则无法实现交互功能！！！

下面是我起的的项目文件名字：



创建好后，用你们的代码编辑软件打开开始编写代码

HTML文件代码：

<!DOCTYPE html>
<html>
<head>
<title>成绩录入系统</title>
<meta charset="utf-8">
<style>
table{
margin-bottom:20px;
}
</style>
</head>
<body>
<h1>成绩录入系统</h1>
<form action="score_add.php">
<table width=200px;>
<tr>
<td>请输入学号:<input type="text" name="sid"></td>
</tr>
<tr>
<td>请输入姓名:<input type="text" name="stuName"></td>
</tr>
<tr>
<td>请输入语文成绩:<input type="text" name="chinese"></td>
</tr>
<tr>
<td>请输入数学成绩:<input type="text" name="math"></td>
</tr>
<tr>
<td><input type="submit" value="保存成绩"><td>
</tr>
</table>
</form>
<form action="score_delete.php">
<table width=200px;>
<tr>
<td>请输入要删除的成绩编号:<input type="text" name="sid"></td>
</tr>
<tr>
<td><input type="submit" value="删除成绩"></td>
</tr>
</table>
</form>
</body>
</html>

数据库sql文件代码：

SET NAMES UTF8;//设置编码模式

DROP DATABASE IF EXISTS tarena;//删除数据库如果存在的话

CREATE DATABASE tarena CHARSET=UTF8;//创建数据库并设置其编码模式为UTF8

USE tarena; //使用数据库

CREATE TABLE score(    //创建表
sid INT PRIMARY KEY AUTO_INCREMENT,
stuName VARCHAR(32),
chinese FLOAT(3,1),
math FLOAT(3,1)
);


保存成绩功能php文件代码：

<?php
$sid=$_REQUEST['sid'];
$stuName=$_REQUEST['stuName'];
$chinese=$_REQUEST['chinese'];
$math=$_REQUEST['math'];

$conn=mysqli_connect('127.0.0.1','root','','tarena',3306);

$sql="SET NAMES UTF8";
mysqli_query($conn,$sql);

$sql="INSERT INTO score VALUES($sid,'$stuName','$chinese','$math');";

$result=mysqli_query($c<ol></ol>onn,$sql);

if($result===true){
echo  "<script type='text/javascript'>alert('学生成绩保存成功');</script>";
}else{
echo "<script type='text/javascript'>alert('学生成绩保存失败');</script>".$sql;
}

mysqli_close($conn);

?>


删除功能php文件代码：

<?php
$sid=$_REQUEST['sid'];

$conn=mysqli_connect('127.0.0.1','root','','tarena',3306);

$sql="SET NAMES UTF8";
mysqli_query($conn,$sql);

$sql="DELETE FROM score WHERE sid=$sid;";

$result=mysqli_query($conn,$sql);

if($result===true){
echo "<script type='text/javascript'>alert('学生成绩删除成功');</script>";
}else{
echo "<script type='text/javascript'>alert('学生成绩删除失败');</script>".$sql;
}

mysqli_close($conn);
?>


四、运行结果：










可以在mysql控制台下查看表的数据变化

查看数据库 ---show databases;
查看表-- show tables;
查看表的字段-select * from score(你的表名);

总结：
以上是个人总结的一些经验，能够实现简单的表单与数据库交互，将HTML&MySQL&PHP理论混合起来理解，加深对这些功能的了解和认识，希望能够帮助到你！！！！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  HTML mysql php XAMPP 数据库
相关文章推荐
新的分享
章节导航