基于Web前端與MySQL數(shù)據(jù)庫的自然災(zāi)害應(yīng)急信息共享平臺設(shè)計與實現(xiàn)

蘇佳旭 白燕 溫曉東

關(guān)鍵詞：Web前端；MySQL數(shù)據(jù)庫；自然災(zāi)害；信息共享

0 引言

各類自然災(zāi)害對人類經(jīng)濟生活乃至生命安全有著重大影響，關(guān)系到社會的有序健康發(fā)展。當(dāng)災(zāi)害發(fā)生時，及時收集、發(fā)布災(zāi)害數(shù)據(jù)尤為重要，不但能最大限度地減少災(zāi)害對人們經(jīng)濟和生命的損害程度[1]，還能安定民心，最大程度減少因災(zāi)情導(dǎo)致的秩序混亂。在災(zāi)害發(fā)生之初，絕大部分人還可以發(fā)布信息，分享災(zāi)情。但在災(zāi)害過程中，一些地區(qū)的基站受到影響，信號質(zhì)量下降。在消息正常流動的情況下，可以見到大量的分散信息源。但此類消息存在遲滯、重復(fù)或虛假的可能，會消耗精力、耽誤重要信息傳播，導(dǎo)致重要信息被淹沒。國內(nèi)最早的災(zāi)害信息傳遞工作站是驛站，到1987年，任伏虎提出災(zāi)害信息系統(tǒng)的構(gòu)建，不僅道出了信息平臺的重要性和可行性，并且將系統(tǒng)進行結(jié)構(gòu)化分析，為后續(xù)研究者進行相關(guān)系統(tǒng)的建立提供了理論和實驗支持[2]。王彩平等人對當(dāng)前我國重大自然災(zāi)害應(yīng)對中信息溝通存在的問題進行了細致的分析[3]，并給出了較為詳細的建議，包括：加強重大自然災(zāi)害應(yīng)對信息溝通意識、理順信息溝通機制、建立信息溝通制度。在互聯(lián)網(wǎng)時代，民政部成立了國家減災(zāi)中心，為國家救災(zāi)減災(zāi)提供信息服務(wù)。同時，也誕生了災(zāi)害信息員這種全新的國家認證職業(yè)[4]。日本由于其特殊的地理位置災(zāi)害連年頻發(fā)，人們在災(zāi)難期間用社交媒體來發(fā)布信息，受災(zāi)的大部分人都是通過發(fā)布的帖子獲救的[5]。然而，這類方式存在信息發(fā)布與獲取滯后、信息不對稱等缺點。因此，本文提出一種基于Web前端與MySQL數(shù)據(jù)庫的自然災(zāi)害應(yīng)急信息共享平臺，以此來增大信息傳播效率、傳播范圍和救援實效性。自然災(zāi)害發(fā)生時本平臺在信息共享與互助方面具有非常重要的實用價值。

1 系統(tǒng)設(shè)計

通過分析災(zāi)害中映射出的各類問題，本文著重研究了搭建信息共享平臺在自然災(zāi)害中的應(yīng)用。災(zāi)難下，假消息和輿論的影響頗大，但限制消息傳播反而會形成負面效應(yīng)，尤其是正在受災(zāi)的人，必然會有急需信息被忽略的情況。除兩個極端外，可以選擇第三條途徑：不干涉現(xiàn)有信息傳播渠道，但加入一個更實用的平臺，且支持現(xiàn)有渠道調(diào)取平臺內(nèi)的信息，同時推動人們在該平臺發(fā)布、整理、追蹤、驗證與更新這些災(zāi)害信息。自然災(zāi)害應(yīng)急信息共享平臺的主要功能是尋人引擎和急需物資，可以使不同的人根據(jù)自己的需求去選擇功能，篩選信息。在場的人可以發(fā)布尋人信息找尋親人朋友，不在場的人可以為受災(zāi)者提供急需物資?；谝陨戏治?，建立適合解決此類問題的信息平臺，其系統(tǒng)架構(gòu)如圖1所示。

1） 數(shù)據(jù)庫：采用MySQL數(shù)據(jù)庫創(chuàng)建，實現(xiàn)用戶注冊登錄、尋人尋物等信息數(shù)據(jù)的新增、刪除、修改和查詢等。

2） 信息處理層：對數(shù)據(jù)庫進行操作，為功能處理層提供訪問用戶信息、尋人信息、物資信息等數(shù)據(jù)的服務(wù)。

3） 功能處理層：編寫平臺系統(tǒng)所要實現(xiàn)的包括上傳資料、新增、刪除、修改和查詢數(shù)據(jù)等功能的算法、邏輯和計算過程，并與上下層進行交互。

4） 顯示層：利用HTML、CSS、JavaScript 進行HTML前端設(shè)計，創(chuàng)建Web前端網(wǎng)頁，用戶可基于此前端進行信息的發(fā)布與查看等交互行為，包括注冊登錄、發(fā)布與查看尋人信息，發(fā)布與查看急需物資信息。

2 平臺系統(tǒng)實現(xiàn)

平臺搭建分為HTML前端設(shè)計，MySQL數(shù)據(jù)庫創(chuàng)建和PHP后端連接三部分，分析其在自然災(zāi)害中的應(yīng)用以及功能優(yōu)勢，證明了信息共享平臺的可行性。

2.1 HTML 前端設(shè)計

HTML 前端設(shè)計主要涉及了三種語言HTML、CSS、JavaScript。其中，HTML是超文本標(biāo)記語言，可用來結(jié)構(gòu)化標(biāo)題、段落和列表等信息，也可用來描述網(wǎng)頁界面。CSS是層疊樣式表，可用來描述HTML文檔樣式，可與各種腳本語言相配合從而實現(xiàn)對動態(tài)網(wǎng)頁的修飾。JavaScript（JS） ，這種語言具有輕量級、解釋性的特點，不僅可以創(chuàng)建對象，也能使用現(xiàn)有對象，且可以在程序運行時同時解釋。

平臺首頁分為三部分，頭部，內(nèi)容，尾部。前端首頁最終的實現(xiàn)效果如圖2所示。頭部為主頁logo，后布置三個超鏈接：首頁、尋人引擎、急需物資。平臺界面應(yīng)用animation動畫特效，實現(xiàn)動態(tài)效果，且置有輪播圖特效，鼠標(biāo)經(jīng)過實現(xiàn)漸變。內(nèi)容部分插入輪播圖特效，美化頁面，并布置災(zāi)害介紹卡片。功能設(shè)置為尋人引擎和急需物資兩項功能。

2.2 MySQL 數(shù)據(jù)庫搭建

MySQL 是關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，本系統(tǒng)利用MySQL創(chuàng)建三個數(shù)據(jù)庫，分別為用戶數(shù)據(jù)庫、尋人數(shù)據(jù)庫以及急需物資數(shù)據(jù)庫。用戶數(shù)據(jù)庫內(nèi)有一個表格五個字段名：用戶ID、用戶賬號、用戶名、用戶密碼和用戶電話。尋人數(shù)據(jù)庫的數(shù)據(jù)表中有七個字段：用戶id、用戶姓名、用戶性別、用戶年齡、失蹤地點、聯(lián)系人和聯(lián)系電話。急需物資數(shù)據(jù)庫的數(shù)據(jù)表中有六個字段：用戶ID、所需物資、物資數(shù)量、聯(lián)系人、電話和地點。

2.3 PHP 前后端連接

前端，數(shù)據(jù)庫構(gòu)建完成后，需在頁面實現(xiàn)尋人，提供物資的功能并收集數(shù)據(jù)，這必然會用到后端語言。通過PHP實現(xiàn)兩者相連，完成功能實現(xiàn)。

PHP是超文本預(yù)處理器，適用于Web網(wǎng)站開發(fā)。PHP工作原理如圖3所示。

當(dāng)用戶發(fā)出一個HTTP請求特定的Web頁面，觸發(fā)form表單提交給PHP腳本文件處理。Web服務(wù)器接收到頁面請求后，開始檢索文件并傳遞給PHP引擎，PHP引擎解析腳本。PHP啟動了對MySQL服務(wù)器的連接請求。MySQL服務(wù)器接收到請求后對之進行處理，并將結(jié)果返回給PHP引擎。PHP引擎完成腳本的運行后，將該請求結(jié)構(gòu)返回到HTML文件，再返回到Web服務(wù)器。

登錄注冊頁面以及尋人引擎和急需物資都需要連接創(chuàng)建的MySQL數(shù)據(jù)庫，且在前端頁面實現(xiàn)對信息的增加、刪除、更改和查詢。平臺主要使用的是連接數(shù)據(jù)庫，對數(shù)據(jù)庫中數(shù)據(jù)的增刪改查，部分代碼如下：

2.4 平臺功能實現(xiàn)效果

1） 注冊登錄功能

登錄前需注冊賬戶，注冊頁面如圖4所示。當(dāng)輸入注冊信息如下：賬戶“1234”、昵稱“用戶1”、密碼“123456”、手機號“11223344551”，用戶數(shù)據(jù)庫將新增數(shù)據(jù)，數(shù)據(jù)如圖5中紅色方框中所示。

登錄頁面如圖6所示。登錄頁面有驗證功能，即為對用戶輸入賬戶密碼的檢驗，應(yīng)用對數(shù)據(jù)庫查詢功能的實現(xiàn)。若輸入的賬戶曾注冊，輸入正確賬戶和密碼，經(jīng)數(shù)據(jù)庫檢索，若與數(shù)據(jù)庫中數(shù)據(jù)對應(yīng)，則成功登錄網(wǎng)站；若輸入的賬戶或密碼存在錯誤，系統(tǒng)會彈出“賬戶或密碼輸入有誤！”的提示框，如圖7所示。

2） 尋人引擎功能

成功登錄頁面即可進入平臺首頁，進入尋人引擎，界面如圖8所示

尋人引擎內(nèi)共4項，也就是對數(shù)據(jù)庫的增刪改查全部實現(xiàn)，進入“新增”頁面，如圖9所示。當(dāng)在此界面輸入信息如下：姓名“失蹤人員1”、性別“男”、年齡“18”、失蹤地點“失蹤地點1”、聯(lián)系人“失蹤人親人”、聯(lián)系電話“00000000000”，數(shù)據(jù)庫新增數(shù)據(jù)如圖10所示。

尋人引擎同時具備修改功能，點擊“修改”按鈕，將聯(lián)系人更改為“親人”，前端頁面顯示效果及數(shù)據(jù)庫頁面分別如圖11和圖12所示。

尋人引擎同時具備刪除功能，用來刪除誤操作錄入的錯誤信息或者過期失效信息。點擊圖11中的“刪除”按鈕，發(fā)送命令到后端PHP文件，PHP文件解析，執(zhí)行對數(shù)據(jù)庫操作，前端頁面顯示效果如圖13所示。

尋人引擎具備搜索功能，即對數(shù)據(jù)庫中存儲的信息進行查找，用戶輸入有關(guān)的失蹤人員，失蹤地點或者聯(lián)系人，點擊“搜索”按鈕，即可顯示有關(guān)的數(shù)據(jù)庫信息。例如當(dāng)搜索“小明”時，尋人引擎頁面會顯示關(guān)于“小明”的數(shù)據(jù)庫收納的尋人信息，如圖14所示。

3） 急需物資功能

返回首頁點擊急需物資功能，急需物資界面如圖15所示。

急需物資功能同樣完成對數(shù)據(jù)庫增、刪、改、查四項功能的實現(xiàn)，需輸入所需物資、數(shù)量、聯(lián)系人，電話和地點，新增數(shù)據(jù)后，數(shù)據(jù)將會存入物資數(shù)據(jù)庫，前端頁面也可修改，刪除并查詢數(shù)據(jù)。因急需物資功能與尋人引擎實現(xiàn)效果基本相同，這里不再大篇幅介紹。

4） 其他功能

首頁還有二維碼顯示效果，當(dāng)鼠標(biāo)經(jīng)過設(shè)置的聯(lián)系圖標(biāo)，二維碼將會漸變出現(xiàn)，如圖16所示。當(dāng)有虛假信息時，發(fā)現(xiàn)者可通過掃描二維碼聯(lián)系管理員，舉報管理信息。如果有更好的建設(shè)方案，同樣可聯(lián)系管理員共同商議。

3 結(jié)論

本文提出并實現(xiàn)了一種新型自然災(zāi)害應(yīng)急信息共享系統(tǒng)。該系統(tǒng)通過前端頁面設(shè)計、數(shù)據(jù)庫搭建和前后端連接，完成最終搭建。通過受災(zāi)者或不在場人員收集一二手災(zāi)害信息或?qū)σ延行畔⑦M行補充和查驗，反映在平臺頁面上并實現(xiàn)信息共享。系統(tǒng)具備注冊登錄、尋人引擎和急需物資三大功能。本平臺系統(tǒng)具有成本低、影響范圍大、信息流動速度快等優(yōu)勢，且僅需要簡單操作即可提交災(zāi)害信息，提高災(zāi)害發(fā)生后的救援效率，減少傷亡和損失。