4.西电web工程课件_Web应用建模
Web技术应用基础(第一章)精品PPT课件
● IP地址的表示方法
IPv4地址采用“点分十进制”表示法。 按照TCP/IP协议规定，IP地址用二进制来表示，每个IP 地 例如：一个采用二进制形式的IP地址是“1110101000”， 为了方便记忆和使用，IP地址经常被写成十进制的形式， 中间使用符号“.”分开不同的字节。
计算机网络 ●
Web环境
通过通信线路和通信设备，将分布在不同地理位置、 具有独立功能的计算机系统连接起来，在网络协议 和网络管理软件的支持下，实现彼此之间数据通信 和资源共享的系统。
计算机网络为网络用户提供了两个主要功能：
连通和共享
连通功能共把享网功上能计使上算网用户可 机连接起以来使，用使网人上所们有公享资 可了以地交域换的源软、信遥件游，息远、戏例，。如硬等忘信件等、息记娱、乐文节档、目
在因特网上与其他用户通信或查找资源，先要找 到用户或资源所在的主机，然后才可以进行通信 或查询存储于该主机上的资源。 在因特网上使用IP地址或域名标识网上的主机或 者设备，使用URL来定位网上的资源。
国家级精品课程 —Web技术应用基础
● IP地址
Internet是网络的网络，连接了海量主机（或设 备），为了识别网上主机（或设备），人们为每 台主机（或设备），分配了一个在Internet唯一 的32位的二进制数，即主机的IP地址。
国家级精品课程 —《Web技术应用基础》
第1章 Web技术概述
本章主要内容
Web应用的基础知识和基本概念，主要包括计算 机网络、Internet、 Web基本概念， Web开发技 术和Web方式访问数据库技术等。 学习目标：
– 掌握Web开发的基本知识、主要技术和工作原理 – 理解Web开发常用架构，会画B/S三层结构图 – 熟练应用IP地址、域名和URL网上查找资源 – 理解JSP访问数据库技术
【VIP专享】西电web工程课件_实验任务汇总
12
Project Task：Task9
• Web应用运维
– 内容维护 – SEO策略分析与应用
SSXDU 2017
13
Project Task：Task10
• 组建团队 • 组长——leader • 计划（一个Sprint）
• 代码review
– 组内：相互review – 组间：课代表协调
• 1-1 review 2-1; 2-1 review 1-10 • 3-1 review 4-1; 4-1 review 3-10
– 结合本章内容，完成Web应用设计
• 展示的内容之一
– ~2 slides
SSXDU 2017
10
Project Task：Task7
SSXDU 2017
• Web应用构建
– 选择适当的技术，完成Web应用（部分功能）构 建。
• 至少有5个页面, 包括主页; • 尽量让每个页面有不同点。
– 部分功能要包含架构的各种组件。如：架构中包含 数据库，就需要实现访问数据库存储的功能。
• Web应用部署
– 在Web应用构建过程中，选择适当粒度进行部署。 最低要求：上述构建内容部署可用。
11
Project Task: Task8
SSXDU 2017
• Web应用测试
– 对构建的Web应用（部分功能）进行测试。
• 单元测试：TestNG、Junit 或Rspec等与构建技术匹配 • 功能测试：设计测试用例进行功能测试 • 性能测试：LoadRunner、HTTPUnit等 • 安全性测试：测试XSS、SQL注入等 • WebUI测试：Selenium等
– 最不喜欢的 » From those you need to use » Why do you need to use it? » What can you do to change the site?
第14章 Web建模
在表单中添加各种版型的HTML交互控件元素：右击 交互控件元素： ⑥ 在表单中添加各种版型的 交互控件元素 右击Form， ， ），对 选Web Modeler→New→HTML Input（Select, Textarea），对 （ ）， 每个交互元素设置相应属性： ），name ID等； 每个交互元素设置相应属性：如type（控件名）， （控件名）， 等 元素拖入类图窗口， 自动建立关联关系（ ⑦ 将Web元素拖入类图窗口，Rose自动建立关联关系（可修改 元素拖入类图窗口 自动建立关联关系 确定这些关联关系），形成类图； ），形成类图 确定这些关联关系），形成类图； 根据类图，可做正向工程，产生代码框架，操作如下 如下： ⑧ 根据类图，可做正向工程，产生代码框架，操作如下： Web Modeler→Generate Code
8.2 Web建模的扩展方法 建模的扩展方法WAE 建模的扩展方法 Rose采用了 采用了WAE的部分建模符号（WAE2-UML.exe 的部分建模符号（ 采用了 的部分建模符号 ） ） 8.2.1 Rose中的预定义常用版型 中的预定义常用版型 常用的类版型： 常用的类版型： 服务器页类/对象 ①<<Server Page>>服务器页类 对象，处理业务逻辑、创建动 服务器页类 对象，处理业务逻辑、 页面； 态Web页面； 页面 ② <<Client Page>>客户页类 对象，处理表示逻辑（HTML 客户页类/对象，处理表示逻辑（ 客户页类 对象 页面）生成的html文件； 文件； 页面）生成的 文件 表单类/对象 ③ <<HTML Form>>表单类 对象，负责与用户的交互，表单 表单类 对象，负责与用户的交互， 的属性可以是各种输入控件，接收用户输入。 的属性可以是各种输入控件，接收用户输入。
Web技术应用基础_第二章+web运用环境构建技术
Web平台
站点的服务对象 人们创建了Web站点，为特定的用户提供服务。在创 建站点时，必须明确这个站点是为谁服务的，其次是谁会 来访问它？站点的规划必须尽可能地满足这些人的需求。 而后推测出Web站点上的信息流量，由此预测出站点的资 源需求(硬软见的购置和配置、网络的带宽等)。 网站的构架 一个可持续发展的网站应是可扩展的，站点规模的扩 大不会对现有设备与技术产生太大的冲击。当网站需要升 级时，底层所用的设备与技术不必进行大的变更，只需添 加设备改变上层应用即可。为使站点可扩展，应尽可能地 将网页内容、应用程序与后台数据库分开，按三层结构的 构架规划网站。
6
Web平台
规划站点的位置及网络连接形式 用户可以创建自己的独立站点、可以使用托管服务器， 虚拟主机类，也可以租用空间甚至于免费空间建立站点。 开发技术平台 一旦技术方案确定后，就可以确定开发平台以及创建 此平台。数据库的选择、数据库的结构、服务器应用程序 采用的语言和技术等。 实施操作 网页的表现形式、采用的技术方案、人员配备和分工、 项目周期以及有关项目的推介等。
4
Web平台
Web环境的规划 在创建一个Web站点时，首先要明确它的服务对象是 谁？为什么要创建这个站点？用它来做什么和预期目标？ 根据需求可以确定站点的规模和服务内容、本地平台，软 硬件的配置、网站的域名、带宽等技术问题、主页设计风 格和应用开发策略等以及设计制作平台搭建。 建立Web站点的目的 每一个Web站点都有它的用途。不管是信息提供或查 询、集团或企业需为自己进行企业宣传，建立外界形象、 或内部员工提供信息与服务，进行各种调度管理，发布技 术档案和技术信息等、或为产品用户提供技术支持，与客 户进行交流，进行电子商务，电子政务活动等。总之，在 建立一个新站点之前必须要明确这个站点的目标是什么。
第1章Web开发技术概述精品PPT课件
• 将动态内容的生成和显示进行分离 • JSP使用简便 • JSP扩展方便 • JSP容易和其他技术集成 • 可靠且移植方便
西安邮电学院计算机系
1-15
联系方式：
1.5.2 ASP技术
Microsoft ASP（Active Server Pages，动态服务器页面）是微 软公司IIS3.0以上版本中的一个可以动态产生网页内容组件，由嵌 入在IIS里的一个脚本解释器构成，实际上是一个服务器端的脚本 环境。
第1章 Web应用基础编程
1.1 Web应用的兴起 1.2 Web应用需求
• 1.2.1 业务逻辑 • 1.2.2 数据管理 • 1.2.3 接口 1.3 抽象Web应用体系结构 • 客户/服务器结构 • 浏览器/服务器结构 • C/S与B/S的比较
西安邮电学院计算机系
1-4
联系方式：
1.1 Web应用的兴起
联系方式：
1.7 小结
概述Web开发技术的历史背景，技术发展前景。
西安邮电学院计算机系
1-20
联系方式：
课件下载后可自由编辑，使用上如有不理 解之处可根据本节内容进行提问
Thank you for coming and listening,you can ask questions according to this section and this courseware can be downloaded and edited freely
Web开发技术
教师：陈有为 邮箱：
西安邮电学院计算机系
1-1
联系方式：
一、教学内容
第1章 Web开发技术概述 第2章 HTML4.0语法 第3章 搭建开发环境 第4章 JSP的基础语法 第5章 JSP指令元素 第6章 JSP动作元素 第7章 JSP内置对象 第8章 数据库操作 第9章 JSP和JavaBean 第10章 Servlet开发基础 第11章 MVC设计模式 第12章 JSP数据库开发综合实例剖析
4.Web应用建模
26
WebE(SSXDU)
MDD的好处
• • • • 更好地指导Web应用的开发 提高Web应用开发的效率 提升Web应用的质量 灵活性，即当Web技术演化而引入新技术时 它的灵活性。
15
WebE(SSXDU)
方面
• 采用OO方法, 对每一层进行结构和行为建模 • 结构和行为模型之间的关联,和要实现的Web 应用的类型有关
– 主要是静态(static)信息的Web应用需要比较少的 行为建模 – 高交互性(interactive)的Web应用,如ecommerce应用提供search engine、订购等功 能, 需要更多的行为建模
– 静态和动态 – 内容、超文本、展示、以及个性化适应性
2
WebE(SSXDU)
Web应用建模
• • • • • • • • • Web应用建模特性 模型驱动开发 Web应用建模方法与工具 功能需求建模 内容建模 超文本建模 展示建模 适应性建模 总结与展望
3
WebE(SSXDU)
WEB应用建模特性
WebE(SSXDU)
23
WebE(SSXDU)
Technological Obsolescence(荒废、退化)
24
Model-Driven Architecture (MDA) -模型驱动架构
WebE(SSXDU)
25
WebE(SSXDU)
敏捷模型驱动开发（Agile MDD, AMDD）
第1章Web应用开发简介.ppt
用途 实现不同应用程序之间的数据交互 对一种数据实现多种样式 实现数据的分布式处理
样式1 XML文件 样式2
交换数据
应用程序2
显示效果2 操作2 显示效果 操作3 3 显示效果 操作4 4
显示效果1 操作1
DOM 样式3
样式4
Web 服务器 Web 服务器
显示
1.2.3 XML、CSS的应用
<body> <script type="text/javascript"> <!-document.write("你好，JavaScript"); // JavaScript结束--> </script> </body>
语言特点
引用外部文件： <head> <title>问候页面</title> <script type="text/javascript" src="hello.js"></script> </head>
1.1.2 Web应用程序
Web应用程序介绍 概念
Web应用程序是一种使用HTTP作为核心通信协议、通过互联网让 Web浏览器和服务器通讯的计算机程序。
技术组成 客户端开发技术 ：HTML 、CSS 、DOM 、ActiveX 、 JavaScript 、VBScript 、Applet等 。 服务器端开发技术 ：JSP/Servlet 、PHP 、ASP 、CGI、Perl、 ISAPI等。 层次结构 表示层：采用Web浏览器实现。 业务逻辑层：由位于Web服务器上的各种服务器端程序实现。 数据服务层：由数据库服务器提供，数据库服务器例如MySQL、 SQL Server等。
WEB应用程序开发PPT课件
1.2.3 OSI参考模型 网络协议（Protocol) ：计算机之间的数据通信必须
遵守某种约定和规程，这些约定和规程就是网络通信 协议（翻译官）。协议三要素：
➢语法(syntax)：数据和控制信息的结构或格式 （“如何讲”） ➢语义(semantics)：需要发出何种控制信息，完成 何种动作和做出何种响应。 （“讲什么”） ➢时序(timing)：实体通信实现顺序的详细说明。 国际标准化组织(ISO)提出的“开放系统互连模型” 是计算机网络通信的基本协议。TCP/IP是Internet
FAX#...
尊 敬 的 John: 由 于 ...方 面
的原因
我们希望 退货
18
图 2-1 协 议 层 次 实 例
数据的实际传送过程
交换数据 单元名称
APDU
发送进程 应用层
PPDU
表示层
SPDU
会话层
TPDU
数据分组 (NPDU)
数据帧 (DPDU)
比特 (PPDU)
传输层
网络层 数据链路
层 物理层
– 网络病毒、保密、黑客(Huckman)
噢!
14
路由器 路由器
R
校园网子网
Internet体系结构
校园网
电子商务网站
R R
R
路由器 路由器
路由器
路由器
Internet
具有上网功能的手机 PDA掌上电脑 卫星接收系统
路由器
路由器
ISP网络
R R
路由器
路由器
企业子网
路由器
路由器
R
企业网
R
个人电脑
15
是一门宽范围技术应用课，以学会应用某一种 或几种技术完成实际应用开发为主
web工程ppt概要终极版本
=============================================================================== 注：1.此word文档由自己根据上课课件整理，如有错误或者未涉及任何考点概不负责，看前请三思。
2.加粗的字很重要，特别是红色加粗的3.红字部分为往年考试考点4.绿色的字为注释说明===============================================================================1.Web工程概述：⏹web特性：◆导航性●通过链接在页面和站点之间的跳转◆平台无关性●访问web对用户的系统平台没有任何限制◆分布式●物理上分布逻辑一体化◆动态性●信息的及时更新◆交互性●信息传播：信息的交互、互动和反馈●web动态的特性表现在web是交互的⏹web应用分类：(需求、开发和部署的角度)◆以文档为中心的web应用●web应用的先驱●静态的HTML文档●优点：简单、稳定，响应时间短●缺点：需求经常变更或者大量的页面需要修改，导致耗资巨大，信息经常过时甚至不一致◆交互式web应用●简单交互：下拉框等控件●动态产生页面●内容更新->事务处理⏹去中心化⏹数据库连接⏹复杂度提高◆事务型web应用●简单交互：下拉框等控件●动态产生页面●内容更新->事务处理⏹去中心化⏹数据库连接⏹复杂度提高◆基于工作流的web应用●处理不同公司、公众人物、私人之间的工作流●自动化处理和操作的结构●web服务保证交互性：互操作、低耦合、基于标准◆协作型的web应用●非结构化的操作◆面向门户的web应用◆普适web应用◆社会网络（Social web）◆语义web●信息不仅是提供给人理解阅读，也可以提供给机器阅读理解⏹web应用分类：创建的特征◆shallow web：静态web，交互性低◆deep web：动态web，交互性低◆web2.0：web的新面孔，是一系列技术、业务策略和社会趋势的集合，具有高交互型，动态性◆移动web●Web应用支持移动和无线访问●提供对用户特性方面的支持◆语义web●计算机理解自然语言⏹web产品特性：◆内容方面：●以文档为中心和多媒体特性●用户对内容质量的高要求◆超文本方面●非线性特性●易产生迷失或感知负担◆展示方面●艺术特性●自我解释性⏹web使用特性：◆社会上下文：主要指用户特定的方面●自发访问●不同的文化背景◆技术上下文：●网络连接：服务质量●特定的设备：多平台支付◆自然上下文：位置和时间●全球性●可用性⏹web开发特性：◆开发团队●社团开发、多学科专业技能方面比传统的软件开发所需要的更加广泛，人员类型更多◆技术基础结构●异构性和不成熟性◆开发过程●灵活性●并行性◆集成●内部集成●外部集成⏹web应用与传统软件开发的区别：◆web应用本身处于持续变更中，不完全适合螺旋模型等软件生存期模型描述◆web应用开发的需求分析比传统软件开发的需求分析更困难◆web页面属于一类特殊的人机界面2.Web应用开发过程与方法：⏹web应用开发过程的特点◆开发周期短◆需求变更频繁◆开发技术不断演化◆并行开发不同版本◆重用和集成◆适应web应用的复杂性程度⏹好的web应用开发方法的主要特征：◆易于掌握◆对复杂系统建模的能力◆展示层建模的能力◆系统定制的支持◆模型集成和连通的能力◆工具和文档化支持⏹RUP（统一软件开发过程）：◆是一套软件工程方法，主要包含：用于成功开发软件的一组核心概念和做法；过程模型和相关联内容库；以及底层过程定义语言⏹RUP（统一软件开发过程）生命周期：◆在时间上被分为四个连续的阶段：●初始：目标是为系统建立商业案例并确定项目的边界，建立项目的软件规模和边界条件；结束时是第一个重要的里程碑：生命周期目标●细化：目标是分析问题领域，建立健全的架构基础，编制项目计划，淘汰项目中最高风险的元素；结束时是第二个里程碑：生命周期架构●构建：所有剩余的构件和应用程序功能被开发并集成为产品，所有的功能被详细测试；结束时是第三个重要的里程碑：初始功能里程碑●交付：重点是确保软件对最终用户是可用的；终点是第四个里程碑：产品发布里程碑⏹XP（Extreme Programming，极限编程）：◆源于快速响应问题域变化的需求，是敏捷过程的一种具体形式，提供敏捷方法最一般的原则的指导方针。
《Web程序设计》课件
HTML链接
HTML链接用于在网页中创 建超链接，指向其他网页或
资源。
链接由`<a>`标签定义，通 过`href`属性指定链接的目
标地址。
链接可以是外部链接（指向 其他网站的地址），也可以 是内部链接（指向同一网站
内的页面）。
链接可以使用相对路径或绝 对路径来指定目标地址。
01
02
03
04
05
03
HTML表单
HTML表单用于收集用户输入的数据，如 文本框、单选框、复选框、下拉列表等 。
表单元素包括`<form>`标签、输入元素 （如`<input>`）、选择元素（如 `<select>`和`<option>`）等。
表单数据可以通过POST或GET方法发送 到服务器进行处理。
表单在Web应用程序中有着广泛的应用 ，如在线调查、在线注册等。
于Web开发。
02
它最初被设计用于给网页添 加交互性，但现在已经广泛 用于构建复杂的单页应用和
后端服务器端开发。
03
JavaScript是ECMAScript标 准的一门实现，最新的
ECMAScript标准是ES2023 。
JavaScript语法
01
JavaScript语法基于ECMAScript规范，由关键字、
04
属性选择器
属性选择器用于选择具有特定 属性或属性值的元素。例如， `[target="_blank"]`选择器将 选择所有具有“target”属性 且值为“_blank”的元素。
CSS样式属性
01
字体属性
02
字体属性用于设置文本的字体 、大小、粗细、行高等。例如 ，`font-family`用于设置字体， `font-size`用于设置字体大小， `font-weight`用于设置字体粗 细等。
《Web应用系统》PPT课件
处理，并将处理结果包装成HTTP回应。 •4. Web服务器将HTTP回应传送至客户端。
1.1: HTTP请求/回应的运作流程
1.1: FTP通讯协定 v.s HTTP通讯协定
Web 应用系统
Web应用系统的逻辑架构
软件 硬件
应用
服务器端
客户端 浏览器
系统软件
web服务器 中间件 数据库 操作系统
服务器
网络链路
Web应用系统的物理架构
Web应用程序的逻辑架构
三层架构(3-tier application) 通常意义上的三层架构就是将整个业务应 用划分为：表现层（UI）、业务逻辑层（BLL）、数据访问层（DAL）。区分 层次的目的即为了“高内聚，低耦合”的思想。
• 17.Байду номын сангаас
out.println("</html>");
• 18.
}
• 19. }
1.3.2: Servlet + JSP 的Web应用程序
•目前大部分的Java Web应用程序都是以Servlet搭配 JSP: • 商业逻辑(business logic)是以Servlet所控制 • 展示逻辑(presentation logic)方式则由JSP来实现
• 9.
throws ServletException, IOException {
• 10.
response.setContentType("text/html");
• 11.
PrintWriter out = response.getWriter();
第1章Web应用基础ppt课件-PPT精品文档
浏览器
浏览器是一个用于文档检索和显示的客户应
用程序，并通过超文本传输协议HTTP（ HyperText Transfer Protocol）与Web服 务器相连 常见的浏览器有：
IE Netscape Mozilla Firefox Opera 其他IE核心浏览器 ，如Maxthon 、
微软Web应用解决方案
Web应用
B/S和C/S结构定义
B/S和C/S的应用场景 Web应用的定义
Web应用相关技术发展历史
客户端技术的发展历史
服务器端技术的成熟与发展
客户端技术的发展历史
HTML的诞生
动态HTML的出现让Web应用变得多姿多彩 客户端脚本语言的产生让Web应用具有人机
交互能力 XML的迅速发展让网页具有信息自我描述的 能力
服务端技术的成熟与发展
静态信息的发布
CGI的诞生 多种服务端脚本技术的出现让服务端应用的
开发变得更轻松 XML的迅速发展催生了Web Service技术 Web 2.0让Web应用变得更精彩
Web浏览器和服务器
浏览器
演示和练习：使用ASP建立一个简 单的网页
多媒体演示
1.X
是运行在服务器端的编译后的CLR代码 利用提前绑定、即时编译、本地优化和缓
存服务来提高性能 在Visual Studio .NET的集成开发环境（IDE）中 ，框架由丰富的工具箱和设计器组成 由于是基于CLR的，因此整个.NET平台功 能强大且富有弹性，同样可以应用于Web应用程序 开发者 使常见工作的执行变得很容易，包括从简 单的表单提交、客户端验证，到部署和站点配置
微软Web应用解决方案
Web应用开发.ppt
</LI>
</OL>
<UL>
<P>英语新书</P> <LI>外经贸英语</LI>
<LI>实用英语翻译</LI>
<LI>朗文英语语法</LI>
:// w<3/sUcLh>ool .cn/html/html_lists.asp
</BODY></HTML>
❖自定义列表
▪ 格式：
建立列表
Web应用开发
<DL> <DT>…</DT> <DD>…</DD> <DT>…</DT> <DD>…</DD> …
功能 设置表格边框大小 设置表格的宽度 设置表格的高度 设置单元格间距 设置单元格的填充距 设置表格背景图片 设置表格背景色 设置对齐方式 设置表格的列数
Web应用开发
定制表格
Web应用开发
❖ <TABLE>定义空表格，还需要定义行 ❖ 格式：<TR>…</TR> ❖ 功能：定义表格的一行 ❖ 主要属性：
color=colorvalue 设置文字的颜色
:// w3school .cn/tags/tag_font.asp
HTML格式化
Web应用开发
❖标题标记
▪ 格式：<H1>…</H1>，<H2>…</H2>…<H6>…</H6> ▪ 功能：设置各种大小不同标题的标记
❖段落标记
西电软院WEB工程复习总结最全版
W E B工程复习总结1.试题结构三：建模题（1）UML：功能需求建模（用例图、活动图）；内容建模（类图、状态图）；超文本建模（结构模型）（2）应用架构、应用测试：架构优缺点；测试吞吐率=吞吐量/时间github冲突：在同步代码的过程中，git会自动检查冲突，并尝试进行自动合并。
最好的情况应该是大家同时修改一个文件，但是大家修改的地方不同。
在这样的情况下，git会进行非冲突合并。
而在合并过程中有冲突的时候，git 会把修改记录直接保存在文件中，让开发者判断文件如何解决合并。
如何防止SQL注入1.使用编程语言中的内部库来实现对外部程序的访问2.仔细验证外部调用的输入数据3.将所有数据当做参数，使用存储过程或预处理语句进行数据处理4.保证WEB应用只在它需要的特权下运行SEO优化的原则网站结构扁平化页面静态化页面简单化制作网站地图页面差异化web特性Web需求工程软件需求包括业务需求、用户需求、功能需求三个层次Web需求工程的活动一般分为需求获取、需求表示、需求分析、需求确认与验证四部分Web应用建模Web应用架构Web应用开发过程和方法Web应用开发过程的特点? 开发周期短? 需求变更频繁? 开发技术不断演化? 并行开发不同版本? 重用和集成? 适应Web应用的复杂性程度Web应用开发过程的特性? 基于迭代思想，重视系统的快速开发和不断演化，降低在一个增量上的开发风险? 强调原型开发，并作为开发过程模型的重要组成部分? 强调开发过程中各个阶段的追溯、调整和反馈常见的软件工程模型–线性模型–渐增式模型–螺旋模型–快速原型模型–形式化描述模型好的Web应用开发方法的主要特征–易于掌握–对复杂系统建模的能力–展示层建模的能力–系统定制的支持–模型集成和连通的能力–工具和文档化支持? 软件开发过程–RUP（Rational Unified Process，统一软件开发过程）是一套软件工程方法，主要包含：用于成功开发软件的一组核心概念和做法；过程模型和相关联内容库；以及底层过程定义语言。
WEB应用程序设计课程教学大纲
《WEB应用程序设计》课程教学大纲一、课程基本信息（四号黑体）二、课程目标（一）总体目标：作为电子商务专业的学生，掌握静动态网页设计是基本技能。
通过本课程的学习，学生可以结合远程服务器实践，迅速掌握网页开发的基础代码，提升网页设计的实战能力，并最终在服务器上成功开发出一个小型PHP网站。
（二）课程目标：PHP是一种易于学习和使用的后台开发技术，用户只需具备很少的编程知识，就可以使用 PHP 建立一个具有交互功能的 Web 站点。
MySQL是一个广受欢迎的中型关系数据库管理系统，它免费、快速、并且支持多线程、多用户、重负载的性能要求。
使用SQL进行Web应用系统开发是一种非常理想的选择，这在当前各大网站服务商是常见的基本标配课程目标1：通过授课与实验，掌握设计与制作1．1 基本静态网页语句1．2 CSS应用1．3 使用CSS实现静态网页的布局与美观设计课程目标2：通过授课与实验，掌握MYSQL数据库应用2．1 数据库的创建与设计2．2 数据库的访问与基本操作课程目标3：通过授课与实验，掌握PHP程序的开发3．1 PHP基础语法和命令3．2 PHP访问MYSQL数据库的实现操作（三）课程目标与毕业要求、课程内容的对应关系表1：课程目标与课程内容、毕业要求的对应关系表三、教学内容第一章 HTML基础1.教学目标：（1）掌握HTML文档的代码编写；（2）熟练使用CSS进行网页优化；（3）掌握用CSS达成网页美化的预期效果。
2.教学重难点：（1）不同标签在HTML代码中的用途；（2）CSS在不同的使用环境如何选择方式；（3）网页布局的CSS实现。
3.教学内容：（1）HTML文档结构与基本标记的使用；（2）CSS的使用；（3）实例结合，用CSS进行网页的美化。
4.教学方法：讲授、讨论、比较、案例分析。
5.教学评价：CSS对网页内容与网页设计分离的价值。
第二章 JavaScript客户端脚本语言1.教学目标：（1）熟练使用JavaScript对网页对象及标签进行控制；（2）掌握用JavaScript进行表单的验证。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
WebE(SSXDU)
分层的优点
• 降低复杂性 • 模型演化 • 分层的模型栈
– 不同的超文本结构位于相同内容之上 – 不同展示模型位于相同超文本模型之上
• 不同的建模目标
– 内容模型:展示信息结构，无冗余 – 超文本建模:适当的冗余，如：通过多条路径访问 到信息 – 展示层建模:统一的展示结构
MDD的好处
• • • • 更好地指导Web应用的开发 提高Web应用开发的效率 提升Web应用的质量 灵活性，即当Web技术演化而引入新技术时 它的灵活性。
11
WebE(SSXDU)
WEB应用建模特性
12
WebE(SSXDU)
软件建模
Levels
用户界面 应用逻辑 结构(Structure) 行为(Behavior) 分析 设计 实现
22
WebE(SSXDU)
适应性
23
WebE(SSXDU)
适应性
• Web应用针对个性化和移动计算需求进行自 适应 • 影响着Web应用建模的其它三维 • 处理上下文信息看作是独立的第四维特性—— 适应性 • 主要处理为什么和何时进行适应 • 特定属性的具体化 • 描述应用的环境和应用自身的一些方面
• UWE是一个面向对象的、迭代的建模方法，关 注系统化、个性化的开发和生成Web应用
30
WebE(SSXDU)
UWE模型
• 模型：需求、内容、导航、过程、展示 • 扩展的链接：导航链接（« navigation link» ）、过程 链接（« process link» ）和外部链接（« external link» ）
Web应用建模
Qiuyan Huo 霍秋艳 qyhuo@ Software Engineering Institute
WebE(SSXDU)
Web应用建模
• • • • • • • • • 模型驱动开发 Web应用建模特性 Web应用建模方法与工具: UWE, WebML, … 功能需求建模 内容建模 超文本建模 展示建模 适应性建模 总结与展望
28
WebE(SSXDU)
UWE (UML-based Web Engineering)
• UWE: 基于UML的Web工程 • UWE扩展了UHDM • UWE符号
– 与UML兼容 – 综合建模工具 – http://uwe.pst.ifi.lmu.de/index.html
29
WebE(SSXDU)
33
WebE(SSXDU)
需求模型—活动(Activities)
• a process flow
– « user Action»stereotype is used to indicate user interactions on the web page initiating a process or responding to an explicit requirement of information. – « system Action»describes actions, which are executed by the system.
Phases
• 计算机科学:范围跨越如下三维（orthogonal dimensions）
– 层( Levels): 封装了“什么”和“如何”实现应用 – 方面 (Aspects): 对象及其属性以及与其它对象的相互关系, 函数和加工 – 阶段 (Phases): 开发周期
13
Aspects
WebE(SSXDU)
发现领域中的对象
• 表达领域软件模型的方式应该与物理模型尽量 相似 • 发现关键对象类
– 如果有已存在的模型，重用 – 分类列表
• People, places, things • Transactions • Events
– 识别名词短语
• 使用领域中常用词语来命名
– i.e., 用户理解的术语
17
– The UML does not prescribe(指定) a method for developing systems—only a notation that is now widely accepted as a standard for object modeling.
15
WebE(SSXDU)
OO(object-oriented)原则
• 对象是软件实体—— 类似现实世界中的实 体 —— 具有状态(states)和行为(behaviors) • OO 分析和设计
– 分析: 发现领域中的对象/概念 – 设计: 定义对象并确定对象如何交互以完成需求
• 关键: 为对象分配职责
16
WebE(SSXDU)
24
WebE(SSXDU)
Web应用建模
• 建模内容、超文本和展示的静态和动态方面
– – – – – 更好地理解系统 满足协同开发项目的需要 满足用户需求 开发过程可控 系统可持续性发展
25
WebE(SSXDU)
WEB应用建模方法与工具
26
WebE(SSXDU)
建模Web应用的方法
底层建 模语言
推荐用统一的建模形式对结构和行为进行建模，以使不同 层之间可以进行映射。 (i.e., 依赖一种CASE工具)
21
WebE(SSXDU)
阶段
• 与Web应用的类型有关:
– 信息驱动方法（如，从内容建模开始） – 展示驱动方法（如，从建模应用的展示开始）
• Web工程中基于模型的开发方法
– 有时候和Web项目的实践需求有些冲突 – 能确保解决方案的持久性 – 更好地进行沟通
32
WebE(SSXDU)
address book
• the user should be able to search in the address book and delete contacts from it. In addition, contacts can be created and updated and these changes may be saved or cancelled.
2
WebE(SSXDU)
模型驱动开发
(MODEL DRIVEN DEVELOPMENT, MDD)
3
WebE(SSXDU)
模型
• 现实世界的抽象表达
– 发现领域中的对象/概念 – 给对象分配职责
• 思维工具
– 降低复杂性 – 文档化设计决策
• 沟通手段
WebE(SSXDU)
建模的目的
• 足够详细的规格说明
UWE Methodology(方法学)
• UWE强调“分而治之”
– 内容、导航结构、业务过程、展现
• UWE关注
– 系统化 (Systematization) – 个性化 (Personalization) – 半自动化Web应用生成 (Semi-automatic generation )
• UWE通过定义不同类型之间的模型转换，以从PIM产生 PSM和生成可运行程序，从而实现模型驱动开发过程
20
WebE(SSXDU)
方面
• 采用OO方法, 对每一层进行结构和行为建模 • 结构和行为模型之间的关联,和要实现的Web 应用的类型有关
– 主要是静态(static)信息的Web应用需要比较少的 行为建模 – 高交互性(interactive)的Web应用,如ecommerce应用提供search engine、订购等功 能, 需要更多的行为建模
• data is presented where and when
– « display Pin»and « interaction Pin»are used to model the output and input elements – « navigation Action»can be used to model the navigation options and the associated presentation elements
Customization
Phases
Aspects
• 层 (Levels )– 信息,结点以及相互之间的链接结构, UI & 页面布局 • 方面 (Aspects ) – 和软件一样：结构和行为 • 阶段 (Phases ) – 和应用类型有关的开发方法 • 适应性 (个性化、定制，Customization )– 上下文(Context)
• 对象知道什么?
– Private, encapsulated(封装的) data – Its related objects – Items it can derive or calculate
18
WebE(SSXDU)
Web应用建模
Levels
展示(Presentation) 超文本(Hypertext) 内容(Content) 结构(Structure) 行为(Behavior) 分析 设计 实现
UML的统一
14
WebE(SSXDU)
UML的统一
• UML (Unified Modeling Language): a set of modeling conventions that is used to specify or describe a software system in terms of objects.
ER
OMT
UML
1993 1994 1995 1996 1997 1998 1999
HDM
RMM HDM-lite WSDM WAE OOHDM
WebML
2000 2001 2002 2003 2004 2005