29
2008521华东师范大学学士毕业论文答辩 Design and Implementation of a Teaching Website Based on the Ajax Technology

Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

  • Upload
    others

  • View
    5

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

2008年5月21日 华东师范大学学士毕业论文答辩

Design and Implementation of a Teaching Website Based on the Ajax Technology

Page 2: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

Page 3: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

n

n

n

传统的互联网年

Page 4: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

n

n

n聚合粘性

标签(“分众分类”,folksonomy)目录(分类)

维基内容管理系统

参与发布

网络服务(web services)屏幕抓取(screen scraping)

每次点击成本页面浏览数

搜索引擎优化域名投机

upcoming.org和EVDBevite

博客(blogging)个人网站

维基百科全书(Wikipedia)大英百科全书在线(Britannica Online)

Napster mp3.com

BitTorrentAkamai

FlickrOfoto

Google AdSenseDoubleClick

Web 2.0 Web 1.0

Page 5: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

Page 6: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

n 异步 与

n

n

n

n

Page 7: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

n

浏览器客户端

用户界面

服务器端

Web服务器

数据库服务器

HTTP请求

HTML+CSS

浏览器客户端

用户界面

Ajax引擎

JavaScript

HTML+CSS

HTTP请求

XML数据或纯文本

Page 8: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

n

n

n

n

n

Page 9: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

Page 10: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

n

Page 11: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

n

n

n

n

Page 12: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

n

n

Page 13: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

IE 5.0以上、Firefox、Opera浏览器

128MB以上内存

500MHZ以上处理器主频

Windows NT/2000/XP、Linux操作系统

phpMyAdmin 2.11.6数据库管理工具

Dreamweaver 8集成开发环境

Ajax核心技术

PHP 5.2.5程序开发语言

MySQL 5.0数据库

Apache 2.0.59Web服务器

值项目

开发环境及工具列表

IE 5.0以上、Firefox、Opera浏览器

128MB以上内存

500MHZ以上处理器主频

Windows NT/2000/XP、Linux操作系统

MySQL 5.0数据库

Apache 2.0.59Web服务器

值项目

运行环境及工具列表

Page 14: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

实现Ajax无刷新网站内容展开与收缩功能内容缩放模块

实现Ajax无刷新用户聊天和留言功能聊天室及留言簿模块

实现用户注册时的Ajax异步读取数据库校验功能用户注册验证模块

实现搜索时的Ajax建议提示和自动完成关键字输入的功能搜索提示和自动完成模块

实现网站主要功能的按类别划分功能顶部分栏显示模块

实现按照文章或资源标题关键字进行搜索的功能文章及资源搜索模块

实现用户的快速注册及登陆管理功能用户注册登陆管理模块

首页中主要提供以下信息:顶部分栏显示,热门新闻推荐界面,用户注册登陆管理界面,按关键字搜索对应文章界面

首页

功能说明栏目

Page 15: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

开始

客户端功能(用户填写网页表单)

确认验证成功

使用Ajax进行实时的异步服务器验证

验证成功?

表单提交后,执行服务器端验证

在错误域后面显示错误提示信息

服务器使用Ajax实时地将验证结果返回给客户端

当用户继续他们的活动时,异步执行后台服务器调用来验证表单域

Page 16: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

编译原理教学网站首页

用户注册管理页面 关键字搜索结果页面 聊天室页面 在线习题解答及评论页面

Page 17: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

用户登陆注册

文章及资料查询

参与聊天及留言

学习资料下载

习题练习及讨论

编译原理教学网站用例图

注册会员 普通游客

Page 18: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

config.phperror_handler.phpquery.phpreg_ini.phpsuggest.phpsuggest.class.phpchat.class.phpvalidate.phpvalidate.class.php

register.jscalendar.jschat.jssuggest.js

index.phpteacher.htmintro.htmgoal.htmcourse.phpregister.phpchat.phpcalendar.phptop.php

服务器端业务逻辑Ajax技术层PHP页面

控制处理层用户表示层

系统组成表

Page 19: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

Page 20: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

n

n

n

n

n

n

Page 21: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

会员表

id

usernamepasswordpassword2truenamegendergradeemail

PK

提示表

namePK

聊天表

idnamemsgiptimes

PK

留言表

id

parentthreadnameemailsubjecttimeipemoticon

PK

留言内容表

idmessage

PK

数据库结构关系图

Page 22: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

注册成功,自动跳转到首页,并显示欢迎字幕

编译原理教学网站页面基本流程图

Page 23: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

首页

index.phptop.phpcourse.phpcalendar.phpcalendar.js

用户注册管理页面

register.phpreg_ini.phpvalidate.phpvalidate.class.phpconfig.phperror_handler.phpquery.phpregister.jsregister.cssregisterOK.php

关键字搜索结果页面

suggest.phpsuggest.class.phpconfig.phperror_handler.phpquery.phpsuggest.jssuggest.css

聊天室页面

chat.phpchat.class.phpchatdom.phpchat.jschat.css

在线习题解答及评论页面

message.phpmessage.class.phpadmin.phppost.phpview.phpthread.phpflat.phpconfig.phpmessage.css

编译原理教学网站程序文件关系图

Page 24: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

n 在软件设计越来越讲究人性化的今天,传统的 应用带来的刻板的用户体验在与这种原则背道而驰。现在,除了程序设计优化、代码优化和服务器优化之外,还可以采用 技术来改善这种局面。例如在传统 模式下需要让用户等待服务器的响应而获取数据, 可以减少用户等待的时间。

n 另外,传统的教学网站多以静态页面为主,缺乏用户的交互性,用户往往只能被动的接受网站上的信息,而不能自主参与信息的创建,共享自己的思想。而且,这种网站的用户体验也往往较差,通常会给用户带来使用效果不佳的印象,从而影响网站的访问量,达不到到教学辅助的效果。

n 因此,我们需要的是一种用户体验丰富,交互性强,使用便捷的教学网站平台,这样才能达到教学资源最大化的目的。正是处于这种考虑,基于 技术的编译原理教学网站应运而生了。

n 编译原理教学网站是一个用户交互性较强的中大型教学辅助交流平台,运用开发,在继承了传统教学网站的优点的前提下加

入了一些动态的元素,使得网站的用户体验大大增强,更好的发挥了远程教育的特点,起到了更佳的教学辅助效果。

Page 25: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

n

Page 26: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

n

Page 27: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

n

Page 28: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日

n [1] Tim O’Reilly, What Is Web 2.0—Design Patterns and Business Models for the Next Generation of Software, http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html, 2005-09-30.

n [2] Jesse James Garrett, Ajax: A New Approach to Web Applications, http://www.adaptivepath.com/ideas/essays/archives/000385.php, 2005-02-18.

n [3] Brad Neuberg, Ajax: How to Handle Bookmarks and Back Buttons, http://onjava.com/lpt/a/6293, 2005-10-26.

n [4] Mike Stenhouse, Fixing the Back Button and Enabling Bookmarking for Ajax Apps, http://www.contentwithstyle.co.uk/Articles/38/, 2005-06-13.

n [5] Cristian Darie,等著. Ajax与PHP Web开发. 王德民,等译. 北京:人民邮电出版社,2007.n [6] Lee Babin著. Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007.n [7] Jeremy Keith著. Bulletproof Ajax中文版. 刘申,宋薇译. 北京:人民邮电出版社,2007.n [8] 汤代禄,等著. 互联网的变革--Web 2.0理念与设计. 北京:电子工业出版社,2007.n [9] 张桂元,等著. 征服Ajax--Web 2.0快速入门与项目实践(Java). 北京:人民邮电出版社,2006.n [10] 柯自聪著. Ajax开发精要--概念、案例与框架. 北京:电子工业出版社,2006.n [11] 徐保民著. PHP编程基础及应用实例集锦. 北京:人民邮电出版社,2001.n [12] 张枭著. 新一代PHP+MySQL+Dreamweaver网站建设典型案例. 北京:清华大学出版社,2006.

Page 29: Design and Implementation of a Teaching Website Based on ...ltan003/Publications/BSThesisSlides.pdf · Ajax与PHP基础教程. 徐锋,陈绍继译. 北京:人民邮电出版社,2007

华东师范大学学士毕业论文答辩2008年5月21日