浪潮实习第七天

今天接触了cms的开源工具，主要有drupal和Joomla,为了以后要做的在线文件管理，还看了extplorer和ajaxplorer这两个用php和extjs写的在线文件开源管理器，唉，外国人写的代码不是一般人能看得懂的，然后又重新配置了一下wordpress，充分体验了一把它的插件功能，然后就明白它能这么流行的原因了。为了以后要做的微薄在线编辑器，又下载了ckeditor，研究了一下它的用法。果然很强大。一下就要接触这么多东西，我觉得都吃不消了。然后从今天下午开始我就决定以后要做用word笔记。这一下午还是记了不少东西的。今天一天师傅都没给我安排任务，然后再晚上吃饭的时候对我说，我已经用phpwind搭建起了微薄的平台，我听后内牛满面，之前还以为要自己开发呢。。。，晚上下载了phpwind安装配置了一小下下，果然很好很强大。phpwind，我会记你一辈子的。下面就是我记得word笔记之一：

webdav

WebDAV （Web-based Distributed Authoring and Versioning） 一种基于 HTTP 1.1协议的通信协议.它扩展了HTTP 1.1，在GET、POST、HEAD等几个HTTP标准方法以外添加了一些新的方法，使应用程序可直接对Web Server直接读写，并支持写文件锁定(Locking)及解锁(Unlock)，还可以支持文件的版本控制。

对于需要大量发布内容的用户而言，应用WebDav可以降低对CMS系统的依赖，而且能够更自由的进行创作。上传、下载变得轻松自如。

Webdav的优势：

　· 改写保护。HTTP 1.1 无法确保客户端可以保护资源，并且可以在其他客户端同时编辑它们的情况下进行更改。 使用 WebDAV，可以通过多种方式来锁定资源，以便让其他客户端知道您对所讨论的资源感兴趣，或者防止其他客户端访问该资源。

　　·资源管理。HTTP 只能直接访问单个资源。 WebDAV 提供一种更有效地组织数据的方法。 WebDAV 引入了可包含资源 的集合（类似于文件系统文件夹）概念。 通过 WebDAV 进行的资源管理包括如下功能：创建、移动、复制和删除集合，以及集合中的资源或文件。

　　·文档属性。不同类型的数据具有唯一的属性，这有助于描述数据。 例如，在电子邮件中，这些属性可能是发件人的姓名和接收邮件的时间。 在协作文档中，这些属性可能是文档原始作者的姓名和最后一个编辑者的姓名。 因为人们使用的文档类型各不相同，所以可能的属性类型列表也变得无限大。 XML 是 WebDAV 所需的一种可扩展通讯工具。

Extjs

ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。

　　功能丰富，无人能出其右。

　　无论是界面之美，还是功能之强，ext的表格控件都高居榜首。

　　单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功能ExtJS轻量级实现。

　　自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。

　　再加上可编辑grid，添加新行，删除一或多行，提示多行数据，推拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件里实现了。

其实从ext3开始就支持各种方式的统计，且有控件支持excel导出。

。extjs的使用格式像jason。

使用ExtJS时需要解决如何服务端通信的问题。由于ExtJS只是一个客户端的框架，和服务端技术没有关系，也就没有相应的服务端的适配层，因此客户端如果要用ExtJS，则必须提供它需要的数据结构。ExtJS主要通过这几种方式和服务端进行通信：

· Ext.Ajax.request做普通的异步请求，服务端可以根据实际情况返回JSON形式数据或者HTML片段；

· Ext.tree.TreeLoader加载树形结构，服务端必须返回JSON形式数据，而且要符合Ext.tree.TreeNode的配置要求，否则自己做转换；

· Ext.data.Store及其派生类加载表格形式的数据，服务端可以根据实际情况返回JSON形式数据或者XML形式数据，如果没有特殊要求，推荐返回JSON格式的数据；

· Ext.Element.update局部更新，这个方法最总还是要调用Ext.Ajax.request方法，之所以把它单独列出来，是因为这种方式比较容易被忽视，但是在某些情况下还是挺有用的，比如调用Ext.Panel.body.update()对某个Ext.Panel的内容进行局部更新，如果使用这种方式，那么服务端只能相应的返回HTML片段了；

常见用法

· 查询ID为container的DIV下所有的checkbox，可以使用：Ext.fly(‘container’).select(‘input[type=checkbox]’);

· 在ID为container的DIV内创建一个按钮，可以使用：Ext.fly(‘container’).createChild({ tag: ‘input’, type: ‘button’});

· 为ID为container的DIV的click事件注册处理函数，使用：Ext.fly(‘container’).on(‘click’, handlerFn, scope);

由ID获取一个Ext Element 的相应代码如下：

Ext.onReady(function() {

 var myDiv = Ext.get('myDiv');

});

获取多个DOM的节点

通常情况下，想获取多个DOM的节点，难以依靠ID的方式来获取。有可能因为没设置ID,或者你不知道ID,又或者直接用ID方式引用有太多元素了。这种情况下，你就会不用ID来作为获取元素的依据，可能会用属性（attribute）或CSS Classname代替。基于以上的原因，Ext引入了一个异常强大的Dom Selector库，叫做DomQuery。

DomQuery可作为单独的库使用，但常用于Ext，你可以在上下文环境中（Context）获取多个元素，然后通过Element接口调用。令人欣喜的是，Element对象本身便有Element.select的方法来实现查询，即内部调用DomQuery选取元素。这个简单的例子中，ExtStart.htm包含若干段落（<p>标签），没有一个是有ID的，而你想轻松地通过一次操作马上获取每一段，全体执行它们的动作，可以这样做：

// 每段高亮显示

Ext.select('p').highlight();

Element.select在这个例子中的方便性显露无疑。它返回一个复合元素，能通过元素接口（Element interface）访问每个元素。这样做的好处是可不用循环和不分别访问每一个元素。

DomQuery的选取参数可以是一段较长的数组，其中包括W3C CSS3 Dom选取器、基本XPatch、HTML属性和更多，请参阅DomQuery API文档以了解这功能强大的库个中细节。

响应事件

Ext.onReady(function() {

 Ext.get('myButton').on('click', function(){

 alert("你单击了按钮");

 });

});

一般来说，Element.select也能做同样的事情，即作用在获取一组元素上。下一例中，演示了页面中的某一段落被单击后，便有弹出窗口：

Ext.onReady(function() {

 Ext.select('p').on('click', function() {

 alert("你单击了一段落;");

 });

});

这两个例子中，事件处理的function均是简单几句，没有函数的名称，这种类型函数称为“匿名函数（anonymous function）”，即是没有名的的函数。你也可以分配一个有名字的event handler,这对于代码的重用或多个事件很有用。下一例等效于上一例：

Ext.onReady(function() {

 var paragraphClicked = function() {

 alert("你单击了一段落;");

 }

 Ext.select('p').on('click', paragraphClicked);

});

MessageBox

比起略为沉闷的“HelloWolrd”消息窗口，我们做少许变化，前面我们写的代码是，单击某个段落便会高亮显示，现在是单击段落，在消息窗口中显示段落内容出来。
在上面的paragraphClicked的function中，将这行代码：

Ext.get(e.target).highlight();

替换为：

var paragraph = Ext.get(e.target);

paragraph.highlight();

Ext.MessageBox.show({

 title: 'Paragraph Clicked',

 msg: paragraph.dom.innerHTML,

 width:400,

 buttons: Ext.MessageBox.OK,

 animEl: paragraph

});

Grid

Grid是Ext中人们最想先睹为快的和最为流行Widgets之一。好，让我们看看怎么轻松地创建一个Grid并运行。用下列代码替换ExtStart.js中全部语句：

Ext.onReady(function() {

 var myData = [

 ['Apple',29.89,0.24,0.81,'9/1 12:00am'],

 ['Ext',83.81,0.28,0.34,'9/12 12:00am'],

 ['Google',71.72,0.02,0.03,'10/1 12:00am'],

 ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],

 ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']

 ];

 var myReader = new Ext.data.ArrayReader({}, [

 {name: 'company'},

 {name: 'price', type: 'float'},

 {name: 'change', type: 'float'},

 {name: 'pctChange', type: 'float'},

 {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}

 ]);

 var grid = new Ext.grid.GridPanel({

 store: new Ext.data.Store({

 data: myData,

 reader: myReader

 }),

 columns: [

 {header: "Company", width: 120, sortable: true, dataIndex: 'company'},

 {header: "Price", width: 90, sortable: true, dataIndex: 'price'},

 {header: "Change", width: 90, sortable: true, dataIndex: 'change'},

 {header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},

 {header: "Last Updated", width: 120, sortable: true, 

 renderer: Ext.util.Format.dateRenderer('m/d/Y'), 

 dataIndex: 'lastChange'}

 ],

 viewConfig: {

 forceFit: true

 },

 renderTo: 'content',

 title: 'My First Grid',

 width: 500,

 frame: true

 });

 grid.getSelectionModel().selectFirstRow();

});

这看上去很复杂，但实际上加起来，只有四行代码（不包含测试数据的代码）。

§ 第一行创建数组并作为数据源。实际案例中，你很可能从数据库、或者WebService那里得到动态的数据。

§ 接着，我们创建并加载data store， data store将会告诉Ext的底层库接手处理和格式化这些数据。不同的数据类型须在类Reader中指明。

§ 接着，我们创建一个Grid的组件，传入各种的配置值，有：

§ 新的data store, 配置好测试数据和reader

§ 列模型column model定义了列columns的配置

§ 其他的选择指定了Grid所需的功能

§ 最后，通过SelectionModel告诉Grid高亮显示第一行。

不是太困难吧？如果一切顺利，完成之后你会看到像这样的：

使用Ajax

在弄好一些页面后，你已经懂得在页面和脚本之间的交互（interact）原理。接下来，你应该掌握的是，怎样与远程服务器（remote server）交换数据，常见的是从数据库加载数据（load）或是保存数据（save）到数据库中。通过JavaScript异步无刷新交换数据的这种方式，就是所谓的Ajax。Ext内建卓越的Ajax支持，例如，一个普遍的用户操作就是，异步发送一些东西到服务器，然后，UI元素根据回应（Response）作出更新。这是一个包含text input的表单，一个div用于显示消息（注意，你可以在ExtStart.html中加入下列代码，但这必须要访问服务器）：

<div id="msg"></div>

<div>

 Name: <input type="text" id="name" />

 <input type="button" id="okButton" value="OK" />

</div>

<div id="msg"></div>

接着，我们加入这些处理交换数据的JavaScript代码到文件ExtStart.js中(用下面的代码覆盖)：

Ext.onReady(function(){

 Ext.get('okButton').on('click', function(){

 var msg = Ext.get('msg');

 msg.load({

 url: 'ajax-example.php', // <-- 按实际改动

 params: 'name=' + Ext.get('name').dom.value,

 text: 'Updating...'

 });

 msg.show();

 });

});

WordPress

WordPress是一个注重美学、易用性和网络标准的个人信息发布平台。WordPress是一种使用PHP语言开发的博客平台，用户可以用WordPress来架设个人博客，也可当作一个内容管理系统（CMS）来使用。WordPress 是一个免费的开源项目，但其价值无法用金钱来衡量。

插件安装方法是以管理员身份登陆，然后选择插件栏目，然后选择不同的插件进行安装

开源js编辑框fckeditor

1.This sample shows how to automatically replace all<textarea>elements of a given class with a CKEditor instance.

To replace a<textarea>element, simply assign it theckeditorclass, as in the code below:

<textarea class="ckeditor" name="editor1"></textarea>

Note that other<textarea>attributes (likeidorname) need to be adjusted to your document.

2. This sample shows how to automatically replace all<textarea>elements with a CKEditor instance by using a JavaScript call.

To replace a<textarea>element, place the following call at any point after the<textarea>element or inside a<script>element located in the<head>section of the page, in awindow.onloadevent handler:

CKEDITOR.replace( 'textarea_id' );

Note thattextarea_idin the code above is theidattribute of the<textarea>element to be replaced.

3.动态生成编辑框

var editor, html = '';

function createEditor()

{

if ( editor )

return;

// Create a new editor inside the <div id="editor">, setting its value to html

var config = {};

editor = CKEDITOR.appendTo( 'editor', config, html );

}

function removeEditor()

{

if ( !editor )

return;

// Retrieve the editor contents. In an Ajax application, this data would be

// sent to the server or used in any other way.

document.getElementById( 'editorcontents' ).innerHTML = html = editor.getData();

document.getElementById( 'contents' ).style.display = '';

// Destroy the editor.

editor.destroy();

editor = null;

}

开源php文件管理器extplorer

1. 现在还不清楚如何与数据库结合。用户资料保存在config/.htaccess文件下
2. 它是由extjs+php编写的

开源CMS系统Joomla，drupal（对中文支持不太好）

Jquery

Query is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.jQuery is designed to change the way that you write JavaScript.

Hello jQuery

在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:

$(document).ready(function() {

 // do stuff when DOM is ready

});

放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert.

$(document).ready(function() {

 $("a").click(function() {

 alert("Hello world!");

 });

});

这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。

(译者Keel注:请照此代码修改custom.js并保存,然后用浏览器打开starterkit.html观察效果。)

让我们看一下这些修改是什么含义。$("a") 是一个jQuery选择器(selector),在这里，它选择所有的a标签（译者Keel注：即<a></a>），$号是 jQuery “类”(jQuery "class")的一个别称，因此$()构造了一个新的jQuery 对象(jQuery object)。函数 click() 是这个jQuery对象的一个方法，它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法.

Jquery更像面向过程，它用$代表全局，而extjs更像面向对象，它有专门的类Ext(另解，在jquery中,$貌似就为Jquery)

上面这个代码选择了所有的"form"元素，并在其中的第一个上call了一个reset()。如果你有一个以上的form，你可以这样做：

$(document).ready(function() {

 // use this to reset several forms at once

 $("#reset").click(function() {

 $("form").each(function() {

 this.reset();

 });

 });

});

使用ajax，关键函数（$.get,$.post）

Index.html

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>HelloJq</title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<scriptlanguage="javascript"src="js/jquery-1.3.2.js"></script>
<scriptlanguage="javascript">
functionGetUserNameValues(strValue)
{
$.get("ajax.php",{value:strValue},function(text){
alert(text);
});
}
</script>
</head>
<body>
<formname="form"method="POST">
<divstyle="text-align:center;margin-top:20%;">
<table>
<tbody>
<tr>
<td><inputtype="text"id="txtName"name="txtName"value=""onblur="returnGetUserNameValues(this.value);"/></td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>

ajax.php

<?php
echo$_GET['value'];
?>

JSON，轻量级数据交换格式

Json是较为理想的数据交换语言

1. functionshowJSON() {
2. varuser =
3. {
4. "username":"andy",
5. "age":20,
6. "info": {"tel":"123456","cellphone":"98765"},
7. "address":
8. [
9. {"city":"beijing","postcode":"222333"},
10. {"city":"newyork","postcode":"555666"}
11. ]
12. }
14. alert(user.username);
15. alert(user.age);
16. alert(user.info.cellphone);
17. alert(user.address[0].city);
18. alert(user.address[0].postcode);
19. }

JSON提供了json.js包，下载http://www.json.org/json.js后，将其引入然后就可以简单的使用object.toJSONString()转换成JSON数据。

js 代码

1. functionshowCar() {
2. varcarr =newCar("Dodge","Coronet R/T", 1968,"yellow");
3. alert(carr.toJSONString());
4. }
6. functionCar(make, model, year, color) {
7. this.make = make;
8. this.model = model;
9. this.year = year;
10. this.color = color;
11. }

可以使用eval来转换JSON字符到Object

js 代码

1. functionmyEval() {
2. varstr = '{"name":"Violet","occupation":"character"}';
3. varobj = eval('(' + str + ')');
4. alert(obj.toJSONString());
5. }

或者使用parseJSON()方法

js 代码

1. functionmyEval() {
2. varstr = '{"name":"Violet","occupation":"character"}';
3. varobj = str.parseJSON();
4. alert(obj.toJSONString());
5. }

当json格式已知时，可以用服务器端脚本语言填充json的属性。

Php有个功能强大的工具PHPWind，这个工具可以快速的建立一个类似人人网的博客