基于Web前端与MySQL数据库的自然灾害应急信息共享平台设计与实现

苏佳旭 白燕 温晓东

关键词：Web前端；MySQL数据库；自然灾害；信息共享

0 引言

各类自然灾害对人类经济生活乃至生命安全有着重大影响，关系到社会的有序健康发展。当灾害发生时，及时收集、发布灾害数据尤为重要，不但能最大限度地减少灾害对人们经济和生命的损害程度[1]，还能安定民心，最大程度减少因灾情导致的秩序混乱。在灾害发生之初，绝大部分人还可以发布信息，分享灾情。但在灾害过程中，一些地区的基站受到影响，信号质量下降。在消息正常流动的情况下，可以见到大量的分散信息源。但此类消息存在迟滞、重复或虚假的可能，会消耗精力、耽误重要信息传播，导致重要信息被淹没。国内最早的灾害信息传递工作站是驿站，到1987年，任伏虎提出灾害信息系统的构建，不仅道出了信息平台的重要性和可行性，并且将系统进行结构化分析，为后续研究者进行相关系统的建立提供了理论和实验支持[2]。王彩平等人对当前我国重大自然灾害应对中信息沟通存在的问题进行了细致的分析[3]，并给出了较为详细的建议，包括：加强重大自然灾害应对信息沟通意识、理顺信息沟通机制、建立信息沟通制度。在互联网时代，民政部成立了国家减灾中心，为国家救灾减灾提供信息服务。同时，也诞生了灾害信息员这种全新的国家认证职业[4]。日本由于其特殊的地理位置灾害连年频发，人们在灾难期间用社交媒体来发布信息，受灾的大部分人都是通过发布的帖子获救的[5]。然而，这类方式存在信息发布与获取滞后、信息不对称等缺点。因此，本文提出一种基于Web前端与MySQL数据库的自然灾害应急信息共享平台，以此来增大信息传播效率、传播范围和救援实效性。自然灾害发生时本平台在信息共享与互助方面具有非常重要的实用价值。

1 系统设计

通过分析灾害中映射出的各类问题，本文着重研究了搭建信息共享平台在自然灾害中的应用。灾难下，假消息和舆论的影响颇大，但限制消息传播反而会形成负面效应，尤其是正在受灾的人，必然会有急需信息被忽略的情况。除两个极端外，可以选择第三条途径：不干涉现有信息传播渠道，但加入一个更实用的平台，且支持现有渠道调取平台内的信息，同时推动人们在该平台发布、整理、追踪、验证与更新这些灾害信息。自然灾害应急信息共享平台的主要功能是寻人引擎和急需物资，可以使不同的人根据自己的需求去选择功能，筛选信息。在场的人可以发布寻人信息找寻亲人朋友，不在场的人可以为受灾者提供急需物资。基于以上分析，建立适合解决此类问题的信息平台，其系统架构如图1所示。

1） 数据库：采用MySQL数据库创建，实现用户注册登录、寻人寻物等信息数据的新增、删除、修改和查询等。

2） 信息处理层：对数据库进行操作，为功能处理层提供访问用户信息、寻人信息、物资信息等数据的服务。

3） 功能处理层：编写平台系统所要实现的包括上传资料、新增、删除、修改和查询数据等功能的算法、逻辑和计算过程，并与上下层进行交互。

4） 显示层：利用HTML、CSS、JavaScript 进行HTML前端设计，创建Web前端网页，用户可基于此前端进行信息的发布与查看等交互行为，包括注册登录、发布与查看寻人信息，发布与查看急需物资信息。

2 平台系统实现

平台搭建分为HTML前端设计，MySQL数据库创建和PHP后端连接三部分，分析其在自然灾害中的应用以及功能优势，证明了信息共享平台的可行性。

2.1 HTML 前端设计

HTML 前端设计主要涉及了三种语言HTML、CSS、JavaScript。其中，HTML是超文本标记语言，可用来结构化标题、段落和列表等信息，也可用来描述网页界面。CSS是层叠样式表，可用来描述HTML文档样式，可与各种脚本语言相配合从而实现对动态网页的修饰。JavaScript（JS） ，这种语言具有轻量级、解释性的特点，不仅可以创建对象，也能使用现有对象，且可以在程序运行时同时解释。

平台首页分为三部分，头部，内容，尾部。前端首页最终的实现效果如图2所示。头部为主页logo，后布置三个超链接：首页、寻人引擎、急需物资。平台界面应用animation动画特效，实现动态效果，且置有轮播图特效，鼠标经过实现渐变。内容部分插入轮播图特效，美化页面，并布置灾害介绍卡片。功能设置为寻人引擎和急需物资两项功能。

2.2 MySQL 数据库搭建

MySQL 是关系型数据库管理系统，本系统利用MySQL创建三个数据库，分别为用户数据库、寻人数据库以及急需物资数据库。用户数据库内有一个表格五个字段名：用户ID、用户账号、用户名、用户密码和用户电话。寻人数据库的数据表中有七个字段：用户id、用户姓名、用户性别、用户年龄、失踪地点、联系人和联系电话。急需物资数据库的数据表中有六个字段：用户ID、所需物资、物资数量、联系人、电话和地点。

2.3 PHP 前后端连接

前端，数据库构建完成后，需在页面实现寻人，提供物资的功能并收集数据，这必然会用到后端语言。通过PHP实现两者相连，完成功能实现。

PHP是超文本预处理器，适用于Web网站开发。PHP工作原理如图3所示。

当用户发出一个HTTP请求特定的Web页面，触发form表单提交给PHP脚本文件处理。Web服务器接收到页面请求后，开始检索文件并传递给PHP引擎，PHP引擎解析脚本。PHP启动了对MySQL服务器的连接请求。MySQL服务器接收到请求后对之进行处理，并将结果返回给PHP引擎。PHP引擎完成脚本的运行后，将该请求结构返回到HTML文件，再返回到Web服務器。

登录注册页面以及寻人引擎和急需物资都需要连接创建的MySQL数据库，且在前端页面实现对信息的增加、删除、更改和查询。平台主要使用的是连接数据库，对数据库中数据的增删改查，部分代码如下：

2.4 平台功能实现效果

1） 注册登录功能

登录前需注册账户，注册页面如图4所示。当输入注册信息如下：账户“1234”、昵称“用户1”、密码“123456”、手机号“11223344551”，用户数据库将新增数据，数据如图5中红色方框中所示。

登录页面如图6所示。登录页面有验证功能，即为对用户输入账户密码的检验，应用对数据库查询功能的实现。若输入的账户曾注册，输入正确账户和密码，经数据库检索，若与数据库中数据对应，则成功登录网站；若输入的账户或密码存在错误，系统会弹出“账户或密码输入有误！”的提示框，如图7所示。

2） 寻人引擎功能

成功登录页面即可进入平台首页，进入寻人引擎，界面如图8所示

寻人引擎内共4项，也就是对数据库的增删改查全部实现，进入“新增”页面，如图9所示。当在此界面输入信息如下：姓名“失踪人员1”、性别“男”、年龄“18”、失踪地点“失踪地点1”、联系人“失踪人亲人”、联系电话“00000000000”，数据库新增数据如图10所示。

寻人引擎同时具备修改功能，点击“修改”按钮，将联系人更改为“親人”，前端页面显示效果及数据库页面分别如图11和图12所示。

寻人引擎同时具备删除功能，用来删除误操作录入的错误信息或者过期失效信息。点击图11中的“删除”按钮，发送命令到后端PHP文件，PHP文件解析，执行对数据库操作，前端页面显示效果如图13所示。

寻人引擎具备搜索功能，即对数据库中存储的信息进行查找，用户输入有关的失踪人员，失踪地点或者联系人，点击“搜索”按钮，即可显示有关的数据库信息。例如当搜索“小明”时，寻人引擎页面会显示关于“小明”的数据库收纳的寻人信息，如图14所示。

3） 急需物资功能

返回首页点击急需物资功能，急需物资界面如图15所示。

急需物资功能同样完成对数据库增、删、改、查四项功能的实现，需输入所需物资、数量、联系人，电话和地点，新增数据后，数据将会存入物资数据库，前端页面也可修改，删除并查询数据。因急需物资功能与寻人引擎实现效果基本相同，这里不再大篇幅介绍。

4） 其他功能

首页还有二维码显示效果，当鼠标经过设置的联系图标，二维码将会渐变出现，如图16所示。当有虚假信息时，发现者可通过扫描二维码联系管理员，举报管理信息。如果有更好的建设方案，同样可联系管理员共同商议。

3 结论

本文提出并实现了一种新型自然灾害应急信息共享系统。该系统通过前端页面设计、数据库搭建和前后端连接，完成最终搭建。通过受灾者或不在场人员收集一二手灾害信息或对已有信息进行补充和查验，反映在平台页面上并实现信息共享。系统具备注册登录、寻人引擎和急需物资三大功能。本平台系统具有成本低、影响范围大、信息流动速度快等优势，且仅需要简单操作即可提交灾害信息，提高灾害发生后的救援效率，减少伤亡和损失。