PHPMYSQL物联网监控系统Web端

软件课程设计合作中负责物联网系统的web端开发，在这里贴一下报告的部分内容及思路``。

一、设计方法、设计思路
考虑到web端可以在电脑端，手机端等一切支持http协议的移动设备上查看。为了实现物联网的远程操作的基本要求，我们本次设计采用了web来实现这一功能。
本次设计任务中我负责该系统web端的设计与实现，我们采用了最为常用的开源关系型数据库——MYSQL,为了方便数据库的远程连接及提高可用性，我们租用了一个云数据库。相应地，我在另一台租用的弹性云服务器上配置了Apache服务器以及PHP开发环境（也可以将数据库和服务器放在一台电脑上）。PHP作为当下最流行的web开发语言，语法简洁，易于上手，对于MYSQL数据库的支持非常优良，通过它可以实现MYSQL数据库与前端界面的交互。
同时，考虑到移动端web的流行趋势，普通网页在手机端需要拉伸才能看清，我在前端界面的样式上采用了JQuery Moblile框架，加强了对手机端界面的支持。同时通过web界面APP打包工具，例如PhoneGap，可将移动端界面打造成安卓和ios的app,大大拓展了web端的使用面，降低了开发成本。通过PHP可以将数据库的数据读取以表格形式显示出来，也可以使用GD绘图以统计图形式来展现。但本次实验为了简便，采用了百度开源绘图框架ECharts,来绘制各种统计图。web端界面的缺点就是刷新慢，往往为了更新，需要将整个页面刷新一次，影响体验，也不适合用作动态监控。而异步刷新技术（ajax)可以一定程度上解决这个问题。在数据库数据发生改变的时候，ajax可以只传送发生变化的少量数据，而不会发生闪动。

二、具体实现方式
1.租用一个云服务器，安装CentOS 7.3操作系统，配置服务器。
由于配置过程极其繁琐，且容易出错，为了简便，直接采用XAMPP的PHP编程套件，集成了MySQL，PHP和Apache。
（1）首先使用root账号登陆云服务器
（2）下载Xampp,依次使用如下命令
A)wget http://sourceforge.net/projects/xampp/files/XAMPP%20Linux/7.3.04/xampp-linux-x64-7.3.0-0-installer.run
B)chmod 777 xampp-linux-x64-7.3.0-0-installer.run
C)./xampp-linux-x64-7.3.0-0-installer.run
D)/opt/lampp/lampp start
（3）使用wincp工具将编好的程序放到opt/lampp/htdocs/目录下
2.编写PHP程序连接MySQL和Apache服务器。并实现通过sql语言对数据库进行增删改查操作。将其封装成一个函数，以便接下来使用

<?php
function create_connection()
{
$link = mysqli_connect("cdb-c9d14vev.gz.tencentcdb.com:10052", "root", "****（此处是密码")
or die("无法建立连接: " . mysqli_connect_error());mysqli_query($link, "SET NAMES utf8");return $link;
}function execute_sql($link, $database, $sql)
{
mysqli_select_db($link, $database)
or die("开启数据库失败: " . mysqli_error($link));$result = mysqli_query($link, $sql);return $result;
}
?>

3.创建一个简单的会员管理系统，实现会员的登陆注册修改账号。
首页代码（inex.htm)如下，注册界面以及修改资料界面等代码见源文件（join.htm(注册界面）, logout.php（退出登陆）, search.php（找回密码）, addmember.php（注册函数）, checkpwd.php（验证账号密码）, delete.php（注销账号） , modify.php（修改账号资料）, update.php（更新账号资料）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"><title>农田监控系统</title>
<script type="text/javascript">
function check_data()
{
if (document.myForm.account.value.length == 0)
alert("账号不可以空白哦！");
else if (document.myForm.password.value.length == 0)
alert("密码不可以空白哦！");
else
myForm.submit();
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>农田监控系统</h1>
</div>
<div data-role="content">
<p align="left"><img src="member.jpg"></p>
<p>欢迎来到农田监控系统，您必须注册成用户，才有权限使用本站的功能。若您已经
拥有账号，请输入您的账号及密码，然后按 [登录] 钮；若尚未成为本站会员，请点
按 [注册] 超链接；若您忘记自己的账号及密码，请点击 [查询密码] 超链接。</p>
<form action="checkpwd.php" method="post" name="myForm">
<table width="40%" align="center">
<tr>
<td align="center">
<font color="#3333FF">账号：</font>
<input name="account" type="text" size="15">
</td>
</tr>
<tr>
<td align="center">
<font color="#3333FF">密码：</font>
<input name="password" type="password" size="15">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="登录" onClick="check_data()"> 　
<input type="reset" value="重填">
</td>
</tr>
</table>
</form>
<p align="center">
<a href="join.htm">注册</a>　
<a href="search_pwd.htm">查询密码</a></p>
</div>
</body>
</html>

4.创建主程序（main.php)
该程序检查了cookie里面的账号密码，若无误则进入，若有误则进入首页。同时也通过之前的数据库连接函数将数据库数据提取出来以表格形式显示

<?php
$passed = $_COOKIE["passed"];
if ($passed != "TRUE")
{
header("location:index.htm");
exit();
}
?>
<!doctype html>
<html>
<head>
<title>农田管理</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="echarts.js"></script><meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="a">
<h1 align="center">农田监测系统</h1>
</div><div data-role="content">
<div data-role="navbar"data-postion="fixed" data-role="b">
<ul>
<li><a href="Introduction.html" data-role="button" data-icon="arrow-r",data-iconpos="left"class="ui-btn-active ui-state-persist">介绍页面（暂未开放，敬请期待）</a></li>
<li><a href="barshow.html"data-role="button" data-icon="arrow-r",data-iconpos="left"class="ui-btn-active ui-state-persist">动态图形化显示</a></li><li><a href="modify.php"data-role="button" data-icon="edit",data-iconpos="left"class="ui-btn-active ui-state-persist">修改账号资料</a></li>
<li><a href="delete.php"data-role="button" data-icon="delete",data-iconpos="left"class="ui-btn-active ui-state-persist">删除账号资料</a></li>
<li><a href="control2.html"data-role="button" data-icon="arrow-r",data-iconpos="left"class="ui-btn-active ui-state-persist">手动控制</a></li>
<li><a href="control_auto_set.php"data-role="button" data-icon="arrow-r",data-iconpos="left"class="ui-btn-active ui-state-persist">自动控制</a></li>
<li><a href="logout.php"data-role="button" data-icon="arrow-l",data-iconpos="left"class="ui-btn-active ui-state-persist">从网站退出</a></li>
</ul></div><p align="center"><img src="management.jpg" ></p>
<p>
<?php
require_once("dbtools.inc2.php");//指定每页显示几笔记录
$records_per_page = 5;//读取要显示第几页的记录
if (isset($_GET["page"]))
$page = $_GET["page"];
else
$page = 1;//建立数据连接
$link = create_connection();//执行 SQL 命令
$sql = "SELECT id AS '地点编号', time AS '时间', envir_tem AS
'环境温度', envir_hum AS '环境湿度', soil_PH AS '土壤PH值' ,soil_tem as '土壤温度',soil_hum as '土壤湿度',illum as '光照强度'FROM farm";
$result = execute_sql($link, "iot", $sql);//获取字段数目
$total_fields = mysqli_num_fields($result);//获取记录数目
$total_records = mysqli_num_rows($result);//计算总页数
$total_pages = ceil($total_records / $records_per_page);//计算本页第一笔记录的序号
$started_record = $records_per_page * ($page - 1);//将记录指针移至本页第一笔记录的序号
mysqli_data_seek($result, $started_record);//显示字段名
echo "<table border='1' align='center' width='300'>";
echo "<tr align='center'>";
for ($i = 0; $i < $total_fields; $i++)
echo "<td>" . mysqli_fetch_field_direct($result, $i)->name . "</td>";
echo "</tr>";//显示记录
$j = 1;
while ($row = mysqli_fetch_row($result) and $j <= $records_per_page)
{
echo "<tr>";
for($i = 0; $i < $total_fields; $i++)
echo "<td>$row[$i]</td>"; $j++;
echo "</tr>";
}
echo "</table>" ;//产生导航条
echo "<p align='center'>";
if ($page > 1)
echo "<a href='show_record.php?page=". ($page - 1) . "'>上一页</a> ";for ($i = 1; $i <= $total_pages; $i++)
{
if ($i == $page)
echo "$i ";
else
echo "<a href='show_record.php?page=$i'>$i</a> ";
}if ($page < $total_pages)
echo "<a href='show_record.php?page=". ($page + 1) . "'>下一页</a> ";  echo "</p>";//释放内存空间
mysqli_free_result($result);
mysqli_close($link);
?> </p>
</div>
<div data-role="footer">
<div data-role="navbar"data-postion="fixed" data-role="b">
</body>
</html>

主程序运行截图：

5.设计绘图模块：
使用百度的echarts绘图框架，实现异步刷新加载数据
通过barshow.php将数据提取出来，并转换成json格式传送至图表显示界面barshow.html.(具体细节见相应源代码）
实现效果：

6.设计手动控制模块：control2.php control2.html
接收到用户发出的相应的开关指令，使用update函数实现控制表相应开关状态的更新
6.设计自动控制模块：control_auto.php（自动控制界面）, control_auto_set.php（自动控制参数设置） control_auto_confirm.php（参数确认界面）
实现思路：先将个人设置好的开关状态变化阈值更新至数据库，再分别从数据库中取出阈值和最后一个时间点的实时参数，通过它们两个做比较，程序来决定开关的状态。

(项目demo(账号234，密码：234)（注意：统计图界面barshow.html的末尾添加了刷新代码的部分，10分钟刷新一次，可能会影响观察）:demo
(源码参考：https://download.csdn.net/download/qq_36309884/11012620 )

PHPMYSQL物联网监控系统Web端相关推荐

医药/医疗/互联网医疗服务平台/问诊/挂号/开药/处方/医生/医院/问诊订单管理/移动端问诊医疗系统/医生端处方开药系统/web端医药服务平台管理/axure原型/rp源文件/健康咨询/视频问诊/统计
医药/医疗/互联网医疗服务平台/问诊/挂号/开药/处方/医生/医院/问诊订单管理/移动端问诊医疗系统/医生端处方开药系统/web端医药服务平台管理/处方管理/axure原型/rp源文件/健康咨询/视频 ...
智慧、智能图书馆管理平台系统+web端业务数据管理平台+Axure通用web端高保真交互业务数据管理平台+铭牌管理+设备监控+系统管理+内容管理+机构列表管理+用户权限管理+专题管理+服务包管理
作品介绍:智慧.智能图书馆管理平台系统+web端业务数据管理平台+Axure通用web端高保真交互业务数据管理平台+铭牌管理+设备监控+系统管理+内容管理+机构列表管理+用户权限管理+专题管理+服务包 ...
Java毕设项目校园外卖系统Web端计算机（附源码+系统+数据库+LW）
Java毕设项目校园外卖系统Web端计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ ...
基于Java毕业设计校园外卖系统Web端源码+系统+mysql+lw文档+部署软件
基于Java毕业设计校园外卖系统Web端源码+系统+mysql+lw文档+部署软件基于Java毕业设计校园外卖系统Web端源码+系统+mysql+lw文档+部署软件本源码技术栈: 项目架构:B/S ...
网易七鱼在线客服系统web端对接
网易七鱼在线客服系统web端对接文档:http://docs.qiyukf.com/?page_id=28 具体接入代码 function get_WYQY_info(){/*--------七鱼配 ...
基于JAVA校园外卖系统Web端计算机毕业设计源码+系统+数据库+lw文档+部署
基于JAVA校园外卖系统Web端计算机毕业设计源码+系统+数据库+lw文档+部署基于JAVA校园外卖系统Web端计算机毕业设计源码+系统+数据库+lw文档+部署本源码技术栈: 项目架构:B/S架构 ...
基于 HTML5 WebGL 的计量站三维可视化监控系统 Web 组态工控应用
前言得益于 HTML5 WebGL 技术的成熟,从技术上对工控管理的可视化,数据可视化变得简单易行!完成对工控设备的管理效率,资源管理,风险管理等的大幅度提高,同时也对国家工业4.0计划作出有力响应 ...
基于 HTML5 的计量站三维可视化监控系统 Web 组态工控应用
得益于 HTML5 WebGL 技术的成熟,从技术上对工控管理的可视化,数据可视化变得简单易行!完成对工控设备的管理效率,资源管理,风险管理等的大幅度提高,同时也对国家工业4.0计划作出有力响应! 如 ...
前端怎么加粗字体_to B 中后台系统 | Web 端 | UI Style Guideline amp; 前端交付文档...
本文总结近期 to B 中后台系统 UI 组件设计规范及相关经验.欢迎大家勘别甄误. 不懂 UI 的交互不是好前端,特别鸣谢松若章在设计稿落地过程中的严谨与指点. 组件规范 Components ...

PHPMYSQL物联网监控系统Web端

软件课程设计合作中负责物联网系统的web端开发，在这里贴一下报告的部分内容及思路``。

PHPMYSQL物联网监控系统Web端相关推荐

最新文章

热门文章