基于 PHP和 Ajax技術的個人博客設計

陳于揚,尚秋峰

(華北電力大學電子與通信工程系,河北保定 071003)

基于 PHP和 Ajax技術的個人博客設計

陳于揚,尚秋峰

(華北電力大學電子與通信工程系,河北保定 071003)

隨著Web2.0技術發(fā)展,PHP以其開源、面向?qū)ο笤O計、安全性、輕巧、跨平臺等優(yōu)點已成為當前最為流行的Web開發(fā)語言.Ajax動態(tài)交互技術能將笨拙的Web界面轉(zhuǎn)化為互動性平臺,能夠更好地改善用戶體驗.基于 PHP和 Ajax技術組合,筆者以MYSQL為后臺數(shù)據(jù)庫設計了個人博客系統(tǒng).

PHP;Ajax;MYSQL;個人博客

隨著互聯(lián)網(wǎng)技術發(fā)展和網(wǎng)民的快速增長,個人網(wǎng)站的異軍突起改變了整個互聯(lián)網(wǎng)的舊格局,這更加推進了互聯(lián)網(wǎng)的發(fā)展.Asp,Asp.net,Perl,PHP,JSP等都可作為Web開發(fā)語言,但 PHP和 JSP的跨平臺部署和輕巧精簡越來越吸引更多的用戶群體,而免費開源的 PHP技術作為一門快速開發(fā)語言且擁有廣闊的技術論壇社區(qū)作為后盾,已成為中小企業(yè)和個人網(wǎng)站系統(tǒng)的首要選擇.PHP和MYSQL的“黃金組合”更加推動了它的發(fā)展.由 HT ML,JavaScript,DHT ML和 DOM組合而成的一種“新的技術”—Ajax,使高效率的Web開發(fā)成為現(xiàn)實,更加貼近桌面系統(tǒng),也日益被Web開發(fā)人員所熱捧.基于 PHP和 Ajax組合,筆者以MYSQL為后臺數(shù)據(jù)庫,設計了個人博客系統(tǒng),并闡述了基于這種組合構(gòu)建Web應用系統(tǒng)的功能框架及設計細節(jié).

1 技術原理

1.1 AjaxAjax即 Asynchronous JavaScriptAnd XML的縮寫,中文譯為異步 JavaScript和 XML,是指一種融合了 HT ML/XHT ML,DOM(文檔對象模型),JavaScript,XML和 XMLHttpRequest對象等多項成熟技術的技術集合,通過聯(lián)合上述幾種技術,采用 Ajax可以實現(xiàn)瀏覽器與服務器之間的異步通訊,從而實現(xiàn)Web頁面的按需加載和局部更新,加快其響應速度,降低前臺程序與服務器之間的通信流量并增強Web應用程序的可操作性,以改善用戶體驗.Ajax技術的核心對象是 XMLHttpRequest對象,只有少量的幾種屬性和方法,但是,當將其同后臺代碼,數(shù)據(jù)庫以及動態(tài)前臺結(jié)合起來時,它們將具有非常強大的力量.XMLHttpRequest對象的屬性及其定義如表 1所示;XMLHttpRequest對象的方法及其作用如表 2所示.

表1 XMLHttpRequest對象的屬性及其定義

表2 XMLHttpRequest對象的方法及其作用

1.2 Ajax處理流程

1)初始化對象,并發(fā)出 XMLHttpRequest請求.由于瀏覽器發(fā)展歷史和各版本瀏覽器競爭原因,需編寫不同代碼以初始化 XMLHttpRequest對象.

3)發(fā)出 Http請求 通過 XMLHttpRequest對象的 open方法異步傳輸數(shù)據(jù),與服務器端交互.該方法有 3個參數(shù):第 1個參數(shù)用于指定發(fā)送請求的方法,可以是 GET,POST或 PUT;第 2個參數(shù)表示所請求的URL字符串,可以是文本文件、XML文件、JSON文件或者返回任意一種格式的服務器端語言;第 3個參數(shù)指定請求的方式,默認方式為 true,即表示異步傳輸.

4)調(diào)用 send方法發(fā)送請求并接收指定格式響應的方法.

1.3 MYSQL數(shù)據(jù)庫同樣作為開源產(chǎn)品的MYSQL數(shù)據(jù)庫已成為最受歡迎的開源 SQL數(shù)據(jù)庫管理系統(tǒng).MYSQL是一個小型關系型數(shù)據(jù)庫管理系統(tǒng),原開發(fā)者為瑞典MySQL AB公司,現(xiàn)已被甲骨文公司收購.MYSQL由于其體積小、速度快、使用者多、跨平臺、總體擁有成本低且功能強大,尤其是開放源碼這一特性,已被廣泛應用在 Internet的中小型網(wǎng)站中,而其免費版更為個人站點的數(shù)據(jù)庫管理系統(tǒng)首要選擇.PHP本身提供操作 MYSQL數(shù)據(jù)庫各種函數(shù),以進行數(shù)據(jù)管理,而且 PhpMyAdmin是由 PHP寫成的MYSQL資料庫系統(tǒng)管理程序,管理者可以通過Web界面方式更為方便地在線管理資料庫.LAMP(Linux+Apache+MYSQL+PHP)被稱為網(wǎng)站建設的黃金組合,Linux以其安全、穩(wěn)定性稱霸服務器市場,而 PHP和MYSQL組合也以其輕巧、快速、低成本、易上手而成為中小型站點首要選擇.本文中的博客系統(tǒng)便是采用了MYSQL作為后臺數(shù)據(jù)庫,通過 PhpMyAdmin的Web方式在線管理資料.

2 界面布局

為了更好地規(guī)劃網(wǎng)頁布局,本文中的博客系統(tǒng)采用 CSS+D IV技術進行網(wǎng)頁布局,大到各大門戶網(wǎng)站,小到不計其數(shù)的個人網(wǎng)站,且越來越關注 D IV+CSS的標準化設計,并逐漸地拋棄傳統(tǒng)的表格布局方式.CSS是 Cascading Style Sheets的簡稱,中文譯作“層疊樣式表單”.CSS網(wǎng)頁布局有以下幾大優(yōu)點

1)大大縮減頁面代碼,提高頁面瀏覽速度,縮減帶寬成本.

2)結(jié)構(gòu)清晰,優(yōu)化了 SEO,提高搜索引擎排名.

3)優(yōu)化網(wǎng)頁布局,精確定位,容易控制網(wǎng)頁排版.

4)可以一次設計,隨處發(fā)布.不僅用于 PC機的Web瀏覽器,也可發(fā)布在其他設備上,如手機瀏覽器、MAC OS X系統(tǒng)的屏幕閱讀器等.

5)實現(xiàn)了表現(xiàn)和內(nèi)容相分離.

6)跨瀏覽器使用,在幾乎所有的瀏覽器上都可以使用.

7)方便更新網(wǎng)頁布局和風格.

在 HT ML中常用以下 3種方式定義 CSS:Embedding(嵌入式)、Linking(外部引入式或稱引用式)和 inline(內(nèi)聯(lián)式).

代碼格式如下:

2)外部引用式,可以動態(tài)地加載外部 CSS文件來定義 HT ML文檔的表現(xiàn)形式,有利于網(wǎng)站風格的維護,減少頁面代碼.如:

3)內(nèi)聯(lián)式,每一個 HT ML元素都包含一個 style屬性,使用該屬性可以制定樣式,例如

CSS技術進行網(wǎng)頁布局,雖然優(yōu)點很多,但由于瀏覽器發(fā)展歷史和競爭的原因,在各個瀏覽器上部分效果可能支持效果不同,近年來開源瀏覽器發(fā)展迅猛,如 Firefox,Google Chrome等,所以網(wǎng)頁制作完成后應在各大主流瀏覽器上測試之后再發(fā)布.

3 主要板塊設計

3.1 個人日志通過PHP連接MYSQL數(shù)據(jù)庫,并提取日志信息以列表的形式將主要信息如標題、發(fā)表時間、發(fā)表作者等顯示出來,點擊日志標題則進入相應的日志內(nèi)容頁面,并提供在線評論功能,采用國內(nèi)開源 KindEditor在線編輯器,豐富了文本域 textarea功能和界面.代碼中采用 Ajax技術,在不刷新頁面情況下連接數(shù)據(jù)庫并提交用戶評論,極大地改善了用戶體驗.評論系統(tǒng)界面如圖 1所示.部分代碼如下

圖1 PHP+Ajax日志評論系統(tǒng)

3.2 在線留言同樣采用開源 KindEditor在線編輯器和Ajax交互技術,實時驗證表單以改善用戶體驗,在線留言界面板如圖 2所示.

圖2 PHP+Ajax在線留言板

除了上述板塊還包括在線投票系統(tǒng)、網(wǎng)站后臺管理系統(tǒng)等頁面.

4 小 結(jié)

本文以一輕量級博客為例,分析了Web應用開發(fā)流程,采用 CSS和 D IV技術精確布局,優(yōu)化網(wǎng)頁排版;采用當前流行的 PHP語言和 Ajax技術組合開發(fā)Web前臺,改善用戶體驗;以輕巧、快速、強大的開源MYSQL作為后臺數(shù)據(jù)庫管理系統(tǒng),降低成本.隨著Web技術發(fā)展,其應用必將越來越廣泛.

[1]田原.基于 Ajax的教學Web應用[J].遼寧工程技術大學:自然科學版,2007(5):737-739.[2]張銀鵬,肖新峰,崔程.PHP+Ajax網(wǎng)站開發(fā)典型實例[M].北京:電子工業(yè)出版社,2008.

[3]張亞飛.CSS開發(fā)王[M].北京:電子工業(yè)出版社,2008.

Personal Blog Designing Based on Ajax and PHP Skills

CHEN Yu-yang,SHANG Qiu-feng
(Department of Electronic and Telecommunication Engineering,North China Electric PowerUniversity,Baoding 071003,China)

In recent years,with theWeb2.0 technology development,because of its open-source,object-oriented design,safety,lightweight,cross-platform advantages,PHP has become the most popularWeb development language.Ajax dynamic interactive technology can change a clumsyWeb interface to a interactive platfor m and improve the user experience.In our report,based on PHP and Ajax technology portfolio,a personal blog was designed withMYSQL as back-end database.

PHP;Ajax;MYSQL;personal blog

TP 311 < class="emphasis_bold">文獻標志碼:A

A

1004-1729(2010)04-0338-05

2010-05-20

河北省研究生教育創(chuàng)新的探索與實踐項目 (13301004);華北電力大學教改項目(2010060310)

陳于揚 (1986-),男,安徽蚌埠人,華北電力大學電子與通信工程系 2008級碩士研究生.

尚秋峰 (1968-),女,河南周口人,華北電力大學電子與通信工程系教授,碩士生導師.