Ajax和PHP技術在網絡攝影大賽系統中的應用

趙晶晶

中國氣象局公共氣象服務中心，北京 100081

?

Ajax和PHP技術在網絡攝影大賽系統中的應用

趙晶晶

中國氣象局公共氣象服務中心，北京 100081

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

關鍵詞攝影大賽；Ajax和PHP技術；網絡在線投票

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

1 技術背景

1.1 Ajax技術

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

1.2 PHP技術

PHP是一種服務器端解釋的腳本語言，其代碼一般嵌入在HTML頁面中，服務器端通過執行PHP解釋程序，將其運行結果放入到HTML頁面中，傳送給客戶的瀏覽器中。PHP是跨平臺的腳本語言，功能強大，支持面向對類編程，可完成復雜的服務器端腳本運算，并且支持與Oracle、SQL-SERVER、MySQL等數據庫的連接。

2 需求分析

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

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

3 系統設計與實現

3.1 系統功能設計

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

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

表1

3.2 數據庫設計

本系統采用Oracle數據庫，建立攝影大賽數據庫，負責記錄作者信息、上傳圖片信息、每張圖片投票信息。具體結構如表1所示。

3.3 關鍵技術

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

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

在html文件里每張參賽圖片下面設置check復選框

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

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

通過數組參數的方式傳遞多個checkbox選中值，選中值包括選框編號和圖片編號兩部分，中間用“-”連接，每一項之間使用“，”分隔，后臺使用Request[“info[]”]方式得到選中多選框“1-201501101131453,2-201503231300349，……”的值，使用Split(‘,’)分隔后，遍歷得到的數組，再用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 結束語

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

參考文獻

[1]中國互聯網絡信息中心.第35次中國互聯網絡發展狀況統計報告[EB/OL].（2015-02-03）http://www.cnnic.net.cn/hlwfzyj/hlwxzbg/201502/P020150203551802054 676.pdf.

[2]曹紅.基于Ajax和Servlet實現無刷新動態Web應用[J].福建電腦，2007（8）：86-87.

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

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

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

[6]費冬冬.挑戰Javascript&Ajax應用開發[M].北京：機械工業出版社，2008.

[7]伍孝金.基于PHP的新聞發布系統的研究與實現[J].計算機應用與軟件，2006，23（10）：88，90.

[8]黃華勤.基于AJax與ASP在線投票系統的設計與實現[J].民營科技，2011（8）：33.

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

中圖分類號TP3

文獻標識碼A

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