论文部分内容阅读
摘 要：随着计算机与网络科技的日益普及和发展，平板电脑，智能手机等移动设备逐渐进入寻常百姓家，移动学习成为当前新的网络教学模式，移动学习平台实现技术也在原有网站技术的基础上有了变革。本文就基于MVC的框架CAKEPHP实现移动学习平台实现技术进行探究。
关键词：MVC；CAKEPHP；CSS；移动学习平台
中图分类号：G434
随着计算机与网络科技的日益普及和发展，平板电脑，智能手机等移动设备逐渐进入寻常百姓家，具备任何学习者、任何地方学习、任何时间学习、学习任何信息特点的移动学习成为当前新的教学模式，基于移动学习的平台实现技术也在原有网站技术的基础上有了变革。现就基于MVC的框架CAKEPHP移动学习平台实现技术进行探究。
1 框架CAKEPHP及移动学习平台模块简介
CAKEPHP是一个基于PHP开源的迅速开发框架，程序开发设计使用MVC结构：模型（Model）：封装数据和所有基于对这些数据的操作；视图（View）：对数据显示，即用户界面；控制器（Control）：封装外界作用于模型的操作和对数据流向的控制等。三者是CAKEPHP的特色，除此之外它也包含了一些附加的类和对象；组件、行为及助手，提供了可扩展、可重用、快速的新增功能到应用中。
移动学习平台动态实现模块为：新闻公告、移动学习平台概况、教务信息、教学动态、微课库、教学资源和招生培训，这些模块可用一文章管理系统实现。平台中的一些页面（内容固定如移动学习平台概况），可直接通过静态页面实现，在框架中，视图中专设文件夹pages，所有静态页面放置于此，框架通过默认的页面控制器自动实现这些内容的调用。移动学习平台重点模块的实现为文章管理系统的设计。
2 兼容移动设备的网页布局实现
2.1 页面布局
（1）移动学习平台主体网页布局。主页为三栏，二级页面为两栏，利用了DIV+CSS布局定位技术，主页布局的实现：主页布局包含七个层（DIV），前三层即标题、公告栏和导航菜单组成页眉区，内容区由纵向三分栏组成，页脚区包括版权信息等。
（2）网页布局宽度的调整。布局时，各层宽度不同，其中公告栏、导航菜单、标题和页脚占据整页宽度；内容区为三列，左列和右列宽度固定值，中间列宽度使用百分比值，可随浏览器大小变动，实现不同分辨率显示设备适应。
（3）DIV层实现页面三列布局。内容区左列在正常文档流中，而中间列和右列用float属性来把它们挤压到浏览器窗口的中间和右侧。为使各列由于在浏览器宽度变小情况下不重叠，中间列div的左侧和右侧的填充（padding）属性等于右列和左列宽度，保证内容安排在一个整齐的栏中，甚至当它伸展到边栏（左栏或者右栏）的底端也是这样，中间列实际上占据了整个页宽，中栏的内容在左、右两栏之间“流淌”。页脚要占据整个页宽，采用清除（clear）属性BOTH值，希望前面三栏float（浮动）的元素不影响本元素。
2.2 针对移动设备的特殊布局设置
虽然布局时中间列宽度值采用百分比值，使网页适合不同浏览器宽度，但实际在移动设备上我们还需做许多工作，如移动设备显示区域宽度就是设备宽度，而web浏览器显示区域实际小于设备宽度，就需要在媒体查询时判断设备宽度；由于移动设备屏幕较窄，多栏显示不太现实，一般在媒体查询时取消浮动，设定栏宽度100%，使整个移动学习平台单栏显示；针对大屏幕的图片、广告、标题、文本等也不适合在移动设备上显示，可通过媒体查询替换为小图片、文本等。当然除了以上技术还可通过其它脚本语言实现。
3 CAKEPHP框架在移动学习平台建设中关键技术实现
作为一个框架，除了将MVC结构事务与数据分离，其数据内容的CRUD及用户注册认证系统等已包含在框架之中，实现较为简单，难点在于与其它表示语言、第三方插件等融合。
3.1 CAKEPHP框架中布局的应用
由于框架实现了表现和内容的分离以及应用了模块化设计思想，具体布局放置在专用文件夹，页面视图都采用扩展名为.ctp文件，如Layouts布局文件夹中default.ctp为默认主页显示框架；页眉尾脚嵌入其中，内容区以变量形式由控制器决定显示主页还是二级页面；其他页面放置与视图文件夹中如index.ctp为主页，add.ctp为添加内容页面等。
3.2 CAKEPHP中整合可视化Html编辑器ckeditor
对移动学习平台数据信息内容的排版编辑可使用可视化Html编辑器，本移动学习平台使用ckeditor；将其作为助手供控制器调用。
（1）对解压后的ckeditor文件进行精简，放置于webroot/js/ckeditor文件，另将ckeditor中php文件复制到Vendor文件夹，便于控制器调用。
（2）编写Fck助手：在view/helper/目录下新建FckHelper.php文件其重点内容为实例化ckeditor类，如：$oFCKeditor=new CKEditor（），设置ckeditor对象在编辑页面的高度、宽度等外观显示方式，ckeditor数据接口与平台数据库接口对接如$oFCKeditor->editor（$editor_name，$content）。
（3）控制器中添加助手Fck；视图中调用代码，使用$this->Fck->fckeditor（array（'Article'，'content'），''，''）；article为模型（model），content为其内容对应字段，第二个参数指响应路径，第三个参数为一变量，添加数据内容时为空，编辑时为返回变量。
移动学习是移动通信技术、网络技术与现代教育思想、理论有机结合的必然结果，移动学习平台为实现移动学习的载体，其实现技术在传统计算机的基础上，更偏重与对移动或手持设备的支持；CAKEPHP框架的安全性、快捷性、DIV+CSS布局定位技术及其它脚本语言的结合使得移动学习平台搭建较易实现，必将有力推动移动学习的进行。
参考文献：
[1]（美）Ahsanul Bari.CAKEPHP Application Development[M].Packt Publishing Ltd，2012.
[2]何丽.精通DIV+CSS网页样式与布局[M].北京：清华大学出版社，2011（04）.
[3]（美）Bartosz Porebski.PHP框架高级编程[M].北京：华大学出版社，2012（02）.
[4]DeveloperWorks.使用CAKEPHP快速打造Web站点[OL].http：//www.ibm.com/developerworks/cn/opensource/os-php-cake/.
[5]CAKEPHP技术手册Cookbook2.x[OL].http：//book.CAKEPHP.org/2.0/en/index.html.
作者简介：吕爱萍（1978.10-），男，甘肃静宁人，职称中教二级，在职工程硕士，研究方向：计算机网络及应用。
作者单位：西北师范大学 计算机科学与工程学院，兰州 730070；甘肃华亭县中等专业学校，甘肃华亭 744100
基金项目：甘肃省教育科学“十二五”规划2013年度“利用新媒体提升农村中职生职业素养研究”课题（项目编号：GS[2013]GHB0388）。
关键词：MVC；CAKEPHP；CSS；移动学习平台
中图分类号：G434
随着计算机与网络科技的日益普及和发展，平板电脑，智能手机等移动设备逐渐进入寻常百姓家，具备任何学习者、任何地方学习、任何时间学习、学习任何信息特点的移动学习成为当前新的教学模式，基于移动学习的平台实现技术也在原有网站技术的基础上有了变革。现就基于MVC的框架CAKEPHP移动学习平台实现技术进行探究。
1 框架CAKEPHP及移动学习平台模块简介
CAKEPHP是一个基于PHP开源的迅速开发框架，程序开发设计使用MVC结构：模型（Model）：封装数据和所有基于对这些数据的操作；视图（View）：对数据显示，即用户界面；控制器（Control）：封装外界作用于模型的操作和对数据流向的控制等。三者是CAKEPHP的特色，除此之外它也包含了一些附加的类和对象；组件、行为及助手，提供了可扩展、可重用、快速的新增功能到应用中。
移动学习平台动态实现模块为：新闻公告、移动学习平台概况、教务信息、教学动态、微课库、教学资源和招生培训，这些模块可用一文章管理系统实现。平台中的一些页面（内容固定如移动学习平台概况），可直接通过静态页面实现，在框架中，视图中专设文件夹pages，所有静态页面放置于此，框架通过默认的页面控制器自动实现这些内容的调用。移动学习平台重点模块的实现为文章管理系统的设计。
2 兼容移动设备的网页布局实现
2.1 页面布局
（1）移动学习平台主体网页布局。主页为三栏，二级页面为两栏，利用了DIV+CSS布局定位技术，主页布局的实现：主页布局包含七个层（DIV），前三层即标题、公告栏和导航菜单组成页眉区，内容区由纵向三分栏组成，页脚区包括版权信息等。
（2）网页布局宽度的调整。布局时，各层宽度不同，其中公告栏、导航菜单、标题和页脚占据整页宽度；内容区为三列，左列和右列宽度固定值，中间列宽度使用百分比值，可随浏览器大小变动，实现不同分辨率显示设备适应。
（3）DIV层实现页面三列布局。内容区左列在正常文档流中，而中间列和右列用float属性来把它们挤压到浏览器窗口的中间和右侧。为使各列由于在浏览器宽度变小情况下不重叠，中间列div的左侧和右侧的填充（padding）属性等于右列和左列宽度，保证内容安排在一个整齐的栏中，甚至当它伸展到边栏（左栏或者右栏）的底端也是这样，中间列实际上占据了整个页宽，中栏的内容在左、右两栏之间“流淌”。页脚要占据整个页宽，采用清除（clear）属性BOTH值，希望前面三栏float（浮动）的元素不影响本元素。
2.2 针对移动设备的特殊布局设置
虽然布局时中间列宽度值采用百分比值，使网页适合不同浏览器宽度，但实际在移动设备上我们还需做许多工作，如移动设备显示区域宽度就是设备宽度，而web浏览器显示区域实际小于设备宽度，就需要在媒体查询时判断设备宽度；由于移动设备屏幕较窄，多栏显示不太现实，一般在媒体查询时取消浮动，设定栏宽度100%，使整个移动学习平台单栏显示；针对大屏幕的图片、广告、标题、文本等也不适合在移动设备上显示，可通过媒体查询替换为小图片、文本等。当然除了以上技术还可通过其它脚本语言实现。
3 CAKEPHP框架在移动学习平台建设中关键技术实现
作为一个框架，除了将MVC结构事务与数据分离，其数据内容的CRUD及用户注册认证系统等已包含在框架之中，实现较为简单，难点在于与其它表示语言、第三方插件等融合。
3.1 CAKEPHP框架中布局的应用
由于框架实现了表现和内容的分离以及应用了模块化设计思想，具体布局放置在专用文件夹，页面视图都采用扩展名为.ctp文件，如Layouts布局文件夹中default.ctp为默认主页显示框架；页眉尾脚嵌入其中，内容区以变量形式由控制器决定显示主页还是二级页面；其他页面放置与视图文件夹中如index.ctp为主页，add.ctp为添加内容页面等。
3.2 CAKEPHP中整合可视化Html编辑器ckeditor
对移动学习平台数据信息内容的排版编辑可使用可视化Html编辑器，本移动学习平台使用ckeditor；将其作为助手供控制器调用。
（1）对解压后的ckeditor文件进行精简，放置于webroot/js/ckeditor文件，另将ckeditor中php文件复制到Vendor文件夹，便于控制器调用。
（2）编写Fck助手：在view/helper/目录下新建FckHelper.php文件其重点内容为实例化ckeditor类，如：$oFCKeditor=new CKEditor（），设置ckeditor对象在编辑页面的高度、宽度等外观显示方式，ckeditor数据接口与平台数据库接口对接如$oFCKeditor->editor（$editor_name，$content）。
（3）控制器中添加助手Fck；视图中调用代码，使用$this->Fck->fckeditor（array（'Article'，'content'），''，''）；article为模型（model），content为其内容对应字段，第二个参数指响应路径，第三个参数为一变量，添加数据内容时为空，编辑时为返回变量。
移动学习是移动通信技术、网络技术与现代教育思想、理论有机结合的必然结果，移动学习平台为实现移动学习的载体，其实现技术在传统计算机的基础上，更偏重与对移动或手持设备的支持；CAKEPHP框架的安全性、快捷性、DIV+CSS布局定位技术及其它脚本语言的结合使得移动学习平台搭建较易实现，必将有力推动移动学习的进行。
参考文献：
[1]（美）Ahsanul Bari.CAKEPHP Application Development[M].Packt Publishing Ltd，2012.
[2]何丽.精通DIV+CSS网页样式与布局[M].北京：清华大学出版社，2011（04）.
[3]（美）Bartosz Porebski.PHP框架高级编程[M].北京：华大学出版社，2012（02）.
[4]DeveloperWorks.使用CAKEPHP快速打造Web站点[OL].http：//www.ibm.com/developerworks/cn/opensource/os-php-cake/.
[5]CAKEPHP技术手册Cookbook2.x[OL].http：//book.CAKEPHP.org/2.0/en/index.html.
作者简介：吕爱萍（1978.10-），男，甘肃静宁人，职称中教二级，在职工程硕士，研究方向：计算机网络及应用。
作者单位：西北师范大学 计算机科学与工程学院，兰州 730070；甘肃华亭县中等专业学校，甘肃华亭 744100
基金项目：甘肃省教育科学“十二五”规划2013年度“利用新媒体提升农村中职生职业素养研究”课题（项目编号：GS[2013]GHB0388）。