摘 要：隨著計算機與網(wǎng)絡(luò)科技的日益普及和發(fā)展，平板電腦，智能手機等移動設(shè)備逐漸進入尋常百姓家，移動學(xué)習(xí)成為當(dāng)前新的網(wǎng)絡(luò)教學(xué)模式，移動學(xué)習(xí)平臺實現(xiàn)技術(shù)也在原有網(wǎng)站技術(shù)的基礎(chǔ)上有了變革。本文就基于MVC的框架CAKEPHP實現(xiàn)移動學(xué)習(xí)平臺實現(xiàn)技術(shù)進行探究。

關(guān)鍵詞：MVC；CAKEPHP；CSS；移動學(xué)習(xí)平臺

中圖分類號：G434

隨著計算機與網(wǎng)絡(luò)科技的日益普及和發(fā)展，平板電腦，智能手機等移動設(shè)備逐漸進入尋常百姓家，具備任何學(xué)習(xí)者、任何地方學(xué)習(xí)、任何時間學(xué)習(xí)、學(xué)習(xí)任何信息特點的移動學(xué)習(xí)成為當(dāng)前新的教學(xué)模式，基于移動學(xué)習(xí)的平臺實現(xiàn)技術(shù)也在原有網(wǎng)站技術(shù)的基礎(chǔ)上有了變革。現(xiàn)就基于MVC的框架CAKEPHP移動學(xué)習(xí)平臺實現(xiàn)技術(shù)進行探究。

1 框架CAKEPHP及移動學(xué)習(xí)平臺模塊簡介

CAKEPHP是一個基于PHP開源的迅速開發(fā)框架，程序開發(fā)設(shè)計使用MVC結(jié)構(gòu)：模型（Model）：封裝數(shù)據(jù)和所有基于對這些數(shù)據(jù)的操作；視圖（View）：對數(shù)據(jù)顯示，即用戶界面；控制器（Control）：封裝外界作用于模型的操作和對數(shù)據(jù)流向的控制等。三者是CAKEPHP的特色，除此之外它也包含了一些附加的類和對象；組件、行為及助手，提供了可擴展、可重用、快速的新增功能到應(yīng)用中。

移動學(xué)習(xí)平臺動態(tài)實現(xiàn)模塊為：新聞公告、移動學(xué)習(xí)平臺概況、教務(wù)信息、教學(xué)動態(tài)、微課庫、教學(xué)資源和招生培訓(xùn)，這些模塊可用一文章管理系統(tǒng)實現(xiàn)。平臺中的一些頁面（內(nèi)容固定如移動學(xué)習(xí)平臺概況），可直接通過靜態(tài)頁面實現(xiàn)，在框架中，視圖中專設(shè)文件夾pages，所有靜態(tài)頁面放置于此，框架通過默認的頁面控制器自動實現(xiàn)這些內(nèi)容的調(diào)用。移動學(xué)習(xí)平臺重點模塊的實現(xiàn)為文章管理系統(tǒng)的設(shè)計。

2 兼容移動設(shè)備的網(wǎng)頁布局實現(xiàn)

2.1 頁面布局

（1）移動學(xué)習(xí)平臺主體網(wǎng)頁布局。主頁為三欄，二級頁面為兩欄，利用了DIV+CSS布局定位技術(shù)，主頁布局的實現(xiàn)：主頁布局包含七個層（DIV），前三層即標(biāo)題、公告欄和導(dǎo)航菜單組成頁眉區(qū)，內(nèi)容區(qū)由縱向三分欄組成，頁腳區(qū)包括版權(quán)信息等。

（2）網(wǎng)頁布局寬度的調(diào)整。布局時，各層寬度不同，其中公告欄、導(dǎo)航菜單、標(biāo)題和頁腳占據(jù)整頁寬度；內(nèi)容區(qū)為三列，左列和右列寬度固定值，中間列寬度使用百分比值，可隨瀏覽器大小變動，實現(xiàn)不同分辨率顯示設(shè)備適應(yīng)。

（3）DIV層實現(xiàn)頁面三列布局。內(nèi)容區(qū)左列在正常文檔流中，而中間列和右列用float屬性來把它們擠壓到瀏覽器窗口的中間和右側(cè)。為使各列由于在瀏覽器寬度變小情況下不重疊，中間列div的左側(cè)和右側(cè)的填充（padding）屬性等于右列和左列寬度，保證內(nèi)容安排在一個整齊的欄中，甚至當(dāng)它伸展到邊欄（左欄或者右欄）的底端也是這樣，中間列實際上占據(jù)了整個頁寬，中欄的內(nèi)容在左、右兩欄之間“流淌”。頁腳要占據(jù)整個頁寬，采用清除（clear）屬性BOTH值，希望前面三欄float（浮動）的元素不影響本元素。

2.2 針對移動設(shè)備的特殊布局設(shè)置

雖然布局時中間列寬度值采用百分比值，使網(wǎng)頁適合不同瀏覽器寬度，但實際在移動設(shè)備上我們還需做許多工作，如移動設(shè)備顯示區(qū)域?qū)挾染褪窃O(shè)備寬度，而web瀏覽器顯示區(qū)域?qū)嶋H小于設(shè)備寬度，就需要在媒體查詢時判斷設(shè)備寬度；由于移動設(shè)備屏幕較窄，多欄顯示不太現(xiàn)實，一般在媒體查詢時取消浮動，設(shè)定欄寬度100%，使整個移動學(xué)習(xí)平臺單欄顯示；針對大屏幕的圖片、廣告、標(biāo)題、文本等也不適合在移動設(shè)備上顯示，可通過媒體查詢替換為小圖片、文本等。當(dāng)然除了以上技術(shù)還可通過其它腳本語言實現(xiàn)。

3 CAKEPHP框架在移動學(xué)習(xí)平臺建設(shè)中關(guān)鍵技術(shù)實現(xiàn)

作為一個框架，除了將MVC結(jié)構(gòu)事務(wù)與數(shù)據(jù)分離，其數(shù)據(jù)內(nèi)容的CRUD及用戶注冊認證系統(tǒng)等已包含在框架之中，實現(xiàn)較為簡單，難點在于與其它表示語言、第三方插件等融合。

3.1 CAKEPHP框架中布局的應(yīng)用

由于框架實現(xiàn)了表現(xiàn)和內(nèi)容的分離以及應(yīng)用了模塊化設(shè)計思想，具體布局放置在專用文件夾，頁面視圖都采用擴展名為.ctp文件，如Layouts布局文件夾中default.ctp為默認主頁顯示框架；頁眉尾腳嵌入其中，內(nèi)容區(qū)以變量形式由控制器決定顯示主頁還是二級頁面；其他頁面放置與視圖文件夾中如index.ctp為主頁，add.ctp為添加內(nèi)容頁面等。

3.2 CAKEPHP中整合可視化Html編輯器ckeditor

對移動學(xué)習(xí)平臺數(shù)據(jù)信息內(nèi)容的排版編輯可使用可視化Html編輯器，本移動學(xué)習(xí)平臺使用ckeditor；將其作為助手供控制器調(diào)用。

（1）對解壓后的ckeditor文件進行精簡，放置于webroot/js/ckeditor文件，另將ckeditor中php文件復(fù)制到Vendor文件夾，便于控制器調(diào)用。

（2）編寫Fck助手：在view/helper/目錄下新建FckHelper.php文件其重點內(nèi)容為實例化ckeditor類，如：$oFCKeditor=new CKEditor（），設(shè)置ckeditor對象在編輯頁面的高度、寬度等外觀顯示方式，ckeditor數(shù)據(jù)接口與平臺數(shù)據(jù)庫接口對接如$oFCKeditor->editor（$editor_name，$content）。

（3）控制器中添加助手Fck；視圖中調(diào)用代碼，使用$this->Fck->fckeditor（array（'Article'，'content'），''，''）；article為模型（model），content為其內(nèi)容對應(yīng)字段，第二個參數(shù)指響應(yīng)路徑，第三個參數(shù)為一變量，添加數(shù)據(jù)內(nèi)容時為空，編輯時為返回變量。

移動學(xué)習(xí)是移動通信技術(shù)、網(wǎng)絡(luò)技術(shù)與現(xiàn)代教育思想、理論有機結(jié)合的必然結(jié)果，移動學(xué)習(xí)平臺為實現(xiàn)移動學(xué)習(xí)的載體，其實現(xiàn)技術(shù)在傳統(tǒng)計算機的基礎(chǔ)上，更偏重與對移動或手持設(shè)備的支持；CAKEPHP框架的安全性、快捷性、DIV+CSS布局定位技術(shù)及其它腳本語言的結(jié)合使得移動學(xué)習(xí)平臺搭建較易實現(xiàn)，必將有力推動移動學(xué)習(xí)的進行。

參考文獻：

[1]（美）Ahsanul Bari.CAKEPHP Application Development[M].Packt Publishing Ltd，2012.

[2]何麗.精通DIV+CSS網(wǎng)頁樣式與布局[M].北京：清華大學(xué)出版社，2011（04）.

[3]（美）Bartosz Porebski.PHP框架高級編程[M].北京：華大學(xué)出版社，2012（02）.

[4]DeveloperWorks.使用CAKEPHP快速打造Web站點[OL].http：//www.ibm.com/developerworks/cn/opensource/os-php-cake/.

[5]CAKEPHP技術(shù)手冊Cookbook2.x[OL].http：//book.CAKEPHP.org/2.0/en/index.html.

作者簡介：呂愛萍（1978.10-），男，甘肅靜寧人，職稱中教二級，在職工程碩士，研究方向：計算機網(wǎng)絡(luò)及應(yīng)用。

作者單位：西北師范大學(xué) 計算機科學(xué)與工程學(xué)院，蘭州 730070；甘肅華亭縣中等專業(yè)學(xué)校，甘肅華亭 744100

基金項目：甘肅省教育科學(xué)“十二五”規(guī)劃2013年度“利用新媒體提升農(nóng)村中職生職業(yè)素養(yǎng)研究”課題（項目編號：GS[2013]GHB0388）。