趙晶晶

中國氣象局公共氣象服務(wù)中心，北京 100081

?

Ajax和PHP技術(shù)在網(wǎng)絡(luò)攝影大賽系統(tǒng)中的應(yīng)用

趙晶晶

中國氣象局公共氣象服務(wù)中心，北京 100081

摘 要針對中國天氣網(wǎng)春、夏、秋、冬四季攝影大賽網(wǎng)絡(luò)專題活動的需求，提出基于Ajax和PHP技術(shù)的互聯(lián)網(wǎng)攝影大賽專題設(shè)計思路，在此基礎(chǔ)上搭建了網(wǎng)絡(luò)攝影大賽系統(tǒng)，滿足了用戶上傳圖片、管理員后臺圖片管理、網(wǎng)絡(luò)在線投票等功能，該系統(tǒng)具有運行高效、操作簡單的特點。

關(guān)鍵詞攝影大賽；Ajax和PHP技術(shù)；網(wǎng)絡(luò)在線投票

中國天氣網(wǎng)四季攝影大賽是由中國天氣網(wǎng)、《氣象知識》雜志主辦，全國專業(yè)報新聞攝影學(xué)會、騰訊圖片、中國網(wǎng)圖片中國共同協(xié)辦，活動內(nèi)容為面向公眾征集天氣新聞和天氣風(fēng)光兩大類優(yōu)秀攝影作品并開展評選，每年舉辦四期。據(jù)中國互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）發(fā)布的《第35次中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告》顯示，截至2015年6月，我國網(wǎng)民規(guī)模達6.68億，較2013年年底增加1 442萬人，呈現(xiàn)出逐年增長的態(tài)勢，因此，設(shè)計和開發(fā)網(wǎng)絡(luò)攝影大賽系統(tǒng)不但能夠大大地擴大投票的人群范圍，又能讓公眾了解此項活動，提升公眾參與的積極性，充分滿足了攝影作品評選的公開性、公平性、高效性需求。

1 技術(shù)背景

1.1 Ajax技術(shù)

Ajax全稱為“Asynchronous JavaScript and XML”，是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。Ajax應(yīng)用與傳統(tǒng)的Web應(yīng)用的區(qū)別主要在三個方面：1）不刷新整個頁面，在頁面內(nèi)與服務(wù)器通信；2）使用異步方式與服務(wù)器通信，不需要打斷用戶的操作，具有更加迅速的響應(yīng)能力；3）應(yīng)用僅由少量頁面組成。

1.2 PHP技術(shù)

PHP是一種服務(wù)器端解釋的腳本語言，其代碼一般嵌入在HTML頁面中，服務(wù)器端通過執(zhí)行PHP解釋程序，將其運行結(jié)果放入到HTML頁面中，傳送給客戶的瀏覽器中。PHP是跨平臺的腳本語言，功能強大，支持面向?qū)︻惥幊?，可完成?fù)雜的服務(wù)器端腳本運算，并且支持與Oracle、SQL-SERVER、MySQL等數(shù)據(jù)庫的連接。

2 需求分析

在攝影大賽期間通過網(wǎng)絡(luò)征集攝影作品，征集結(jié)束后，由工作人員對作品進行初選審核，之后針對攝影大賽期間網(wǎng)絡(luò)上傳的通過審核的作品，在網(wǎng)站上以專題的形式進行展示，作品投票系統(tǒng)將分為天氣新聞和天氣生活兩類。網(wǎng)友可為自己喜歡的攝影作品投票。每一個參賽作品可以是多張也可以是單張圖片，上傳時必須具有參賽人姓名、郵箱地址、電話、地址、郵編、作品名稱、作品介紹、上傳日期、參賽類別等屬性。

用戶角色劃分為管理員和參賽用戶兩類。管理員可進行圖片管理系統(tǒng)后臺操作，參賽用戶可通過本人姓名和聯(lián)系電話登錄指定頁面查看個人參賽作品是否審核通過等信息。

3 系統(tǒng)設(shè)計與實現(xiàn)

3.1 系統(tǒng)功能設(shè)計

前臺主要包括專題頁面、上傳作品頁面、作品展示頁面、作品投票頁面。其中專題頁面包括攝影大賽參賽舉辦情況和參賽說明等信息，并分別設(shè)置按鈕鏈接到其他前臺頁面。上傳作品頁面包括上傳作者個人信息填寫和上傳作品模塊，同一作者可同時上傳一張或者多張圖片。作品展示頁面主要對通過審核的攝影作品進行展示。作品投票頁面是在同一個頁面上展示不同類別的圖片信息，可實現(xiàn)對圖片的檢索和投票。

后臺主要包括作品管理、作品檢索、作品審核、作品投票統(tǒng)計和系統(tǒng)管理等功能。其中作品管理包括對作品的審核流程和圖片存儲的管理。作品檢索主要是通過作者信息、作品說明信息對圖片進行檢索。作品審核是對已上傳的作品進行初步審核，審核通過的作品將會展示到網(wǎng)站前臺的作品展示頁面。作品投票統(tǒng)計是對作品的公眾投票數(shù)實時統(tǒng)計更新并排序。系統(tǒng)管理是對作者信息、作品信息、用戶信息進行的綜合管理。

表1

3.2 數(shù)據(jù)庫設(shè)計

本系統(tǒng)采用Oracle數(shù)據(jù)庫，建立攝影大賽數(shù)據(jù)庫，負責(zé)記錄作者信息、上傳圖片信息、每張圖片投票信息。具體結(jié)構(gòu)如表1所示。

3.3 關(guān)鍵技術(shù)

系統(tǒng)采用Windows+Apache+PHP+Oracle的配置方案，需要安裝和配置PHPSmarty模板，運用Smarty模板技術(shù)實現(xiàn)了分離業(yè)務(wù)邏輯和表現(xiàn)邏輯，用戶能夠訪問到的所有頁面全部采用SMARTY 模板引擎實現(xiàn)。當(dāng)專題需要修改時，程序設(shè)計人員和頁面設(shè)計人員可同時獨立工作，提高開發(fā)效率。

運用Ajax技術(shù)，在不提交整個頁面的情況下，就能很快地和遠程服務(wù)器進行數(shù)據(jù)交互，采用Ajax無刷新翻頁技術(shù)實現(xiàn)翻頁勾選效果。

在html文件里每張參賽圖片下面設(shè)置check復(fù)選框

〈input type=”checkbox”;name=“pic”;value=“1”;id=“201501101131453”〉

〈input type=“checkbox”;name=“pic”;value=“2”;id=“201503231300349”〉

通過數(shù)組參數(shù)的方式傳遞多個checkbox選中值，選中值包括選框編號和圖片編號兩部分，中間用“-”連接，每一項之間使用“，”分隔，后臺使用Request[“info[]”]方式得到選中多選框“1-201501101131453,2-201503231300349，……”的值，使用Split(‘,’)分隔后，遍歷得到的數(shù)組，再用Split(‘-’)分隔處理即可。

var pic={‘info’:[]};

$.ajax({

type:“POST”,

url:”your_url”,

data:$msg,

success:function(msg){

$(“input[name=’pic’]:checked”).each(function(I,n))

{pic[‘info’].push(n.value+’-’+$(n).atrr(‘id’));}})；

4 結(jié)束語

本文基于對網(wǎng)絡(luò)攝影大賽的實際需求，提出了基于Ajax+PHP的技術(shù)通過網(wǎng)頁專題的形式建立了天氣攝影大賽系統(tǒng)，實現(xiàn)了網(wǎng)絡(luò)在線攝影作品征集、作品上傳、作品投票和作品評選等功能，為攝影大賽活動的開展提供了平臺。

參考文獻

[1]中國互聯(lián)網(wǎng)絡(luò)信息中心.第35次中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告[EB/OL].（2015-02-03）http://www.cnnic.net.cn/hlwfzyj/hlwxzbg/201502/P020150203551802054 676.pdf.

[2]曹紅.基于Ajax和Servlet實現(xiàn)無刷新動態(tài)Web應(yīng)用[J].福建電腦，2007（8）：86-87.

[3]扎卡斯，姆克皮克.Ajax高級程序設(shè)計[M].徐鋒，譯.北京：人民郵電出版社，2008．

[4]袁群峰，邵永年.Ajax技術(shù)在PHP開發(fā)中的應(yīng)用[J].計算機光盤軟件與應(yīng)用，2012（3）：205，214.

[5]郭紅霞，陳斌，潘斌，等.基于Smarty的學(xué)科信息管理平臺構(gòu)建[J].成都大學(xué)學(xué)報：自然科學(xué)版，2012，34 （4）：408-410.

[6]費冬冬.挑戰(zhàn)Javascript&Ajax應(yīng)用開發(fā)[M].北京：機械工業(yè)出版社，2008.

[7]伍孝金.基于PHP的新聞發(fā)布系統(tǒng)的研究與實現(xiàn)[J].計算機應(yīng)用與軟件，2006，23（10）：88，90.

[8]黃華勤.基于AJax與ASP在線投票系統(tǒng)的設(shè)計與實現(xiàn)[J].民營科技，2011（8）：33.

作者簡介：趙晶晶，工程師。

中圖分類號TP3

文獻標(biāo)識碼A

文章編號2096-0360（2016）04-0027-02