WEB应用程序开发实验指导书

实验一、Web页面设计（设计性实验）（3学时）

实验目的：

1.

2.

3.

4.

5.

6.

掌握使用 语言设置文木格式和列表格式的方法。

掌握使川 语言插入图像和创建表格的方法。

掌握使用 语言创建框架网页和超连接的方法。

掌握使用 语言创建表单和添加表单控件的方法。

掌握使用CSS方法，实现特殊效果的显示。

举握Visual Studio 2005集成开发环境的使用。

实验要求：

1. 使用Visual Studio2005设计网页。（也可以利用Drcamwavcr M贞制作工具设计网 页，或直接在圮事本中编写 代码），比较使用软件工具设计贝面生成的代码 量，能够读懂代码，删除不需要的信息。

2.

3.

4.

5.

通过框架、表格、表单和列表等元素，组织页而，实现静态页而的设计。

在页面上布置导航信息。

设计用户交互信怠的界面。

在页面中，通过使用CSS,控制页面的总体！示效果。

实验步骤：

使用Visual Studio2005设计静态M页，理解 语言语法规范，也可采用Dreamweaver 或记事本等编辑软件直接完成。

注意在设计中避免使用中文的目录及文件名称。（满足系统的兼容性问题，中文编码方 式多样性导致易出错》

1. 根据提供的北京联合人学写邮件图片信息（）,编写完成相应的网页。

1.

2.

3.

通过＜table〉元素亦局，设计页而，确定文捫中对应的 元素，将相应的表雄 元素进行合理的摆放。

加入文木元素、图像元素，完成相成的超级链接任务，注意图什等信息的路径问题。

阅读styl .css文件，理解其中给出的元素设定，将其与网贝连接。注意修改 css文件，保证阁片信息的位置是正确的。

通过设定docunent对象的Styl esheet, Ti tl e等属性，进行相应的设计。

4.

5.

6.

7.

8.

9.

发件人等栏目，艽风格设定采用css文件中的bgcolor2类设定。

发送等按钮，使用css文件中的but类设定。

浏览按钮，使川css文件中的butl类设定。

发邮件中的特殊符号N

。

表屮的边框显示，尝试使用css屮相应的类完成。

删除css文仲中不相关的设定，使css文件最简洁。

2. 根据提供的信息学院主页的图片信息（和），以及相关的图片素材， 完成相应网页的设计工作（构图，没时间不做）。

1.

2.

3.

4.

5.

创建网页，使用表格元素，完成相应的布局工作。

加入文木元素、阁像元素，完成相应的超级链接任务，注意阁片等信息的路径问题, 保证网页信息的正常显示。注意在设计中避免使用中文的鬥录及文件名称。

阅读理解文件内各，规范newpaperl和newpaper2的显示风格。

使用iFrame元素，在页面中显示相应信息。

当鼠标移过导航条屮的图片吋，改变显示的图片。

6. 阅读 源文档，册齡不必要的信息。

思考题：

1、 使川现奋的网页编辑软件,Dreamwaver或FrontPage，或Word等软件，都可巾成 文捫，其优点和缺陷何在？

2、 语言是什么语言，其如何在浏览器上显示？当改变浏览器的显示区域时，显示 的位置可能会发生变化，如何岡定元素显示的位置？

3、 现在网页上有很多动态效果，如浮动的广告信息，如何实现，通过学习的 标记， 可否完成？

4、 在网页设计屮，当鼠称移过阁片时，显示的阁片发生了变化，当鼠标移过超级链接时, 显示的文本也发生了相应的调整，两者之间在设计时冇何区别？

5、 网页中显示的当天时间信息是如何实现的，比较有效的方法是什么？

6、 CSS的主要用途是什么？如何设计CSS,使网站中超级链接无下划线，当鼠标移到上 而时，改变显示的颜色，点击后，以另一种颜色显示出来？

7、 CSS单独保存为文件合适，还是在文档屮，需要的位置直接编写CSS样式杏效？

8、 如何使川meta元素，实现客户端的动态页面切换效果？

实验二、使用JavaScript语言编程（设计性实验）（3学时）

实验目的：

1.

2.

3.

4.

掌握alert、prompt和confirm函数的使用方法。

掌握在＜script＞标记对中，直接编写脚本代码和编写函数，通过事件调用的方法。

掌掘文档对象模型的层次概念，编写脚本代码，获取并妞示用户在表单屮输入的信 息。

编写脚本代码，判断川户输入信总的奋效性。

实验要求：

1.

2.

3.

通过不同的引用JavaScript脚木的方式，了解网页中使用脚木语言的方法。

编写JavaScript蚋数，了解函数参数的作用和调用方法。

编写JavaScript函数，熟悉和使用DOM文档对象模型中的对象。

实验步骤：

1. 编写一个网页，在其＜body〉中编写一段脚本代码，当加载页面时，显示一个输入 对诘框，提示访问者输入姓名，单击“确定”按钮，在另一对诘框中显示对访M者 的欢迎信息。

2. 编写一个网页，在M:＜head〉屮编写一段脚木代码，当加载页面时，通过事件调用的 方式，运行脚本代码，显示一个输入对话框，提示让访问者输入姓名，单击“确定” 按钮，在另一对话框中显示对访问者的欢迎信息。

（注意：1中是一段程序代码，2中使用函数调用的方式，事件为onload。）

3. 编写页面，在页面中显示一张图片（素材中提供的一个小负）和一个“交换图片” 的按钮，单击按钮吋，将素材中提供的两个小负|冬I像反复进行显示。（提示：通过 修改img的src值完成）

4. 利用如下的定时器功能，修改3中的显示，实现图形毎秒&动切换。

var timer 1 = setTimeout（“show（）”，1000）;//设定定吋器，每一秒调用一次

show（）函数 clearTimeOut（timerl）; //淸除定吋器

5. 编写一个页面，在浏览器的状态栏中，显示机器吋阅。（使用Date对象和 ）

（可不做）

6.

7.

修改3中的代码，编写相应的程序，实现当鼠标移到图八上时，改变显示的图八。

（可不做）

修改实验一中编写的写邮件页而，添加脚本代码，当单击“发送”按钮时，判断当 发件人、收件人和主题为空时，取消发送操作，同时用对话框给出相应的提示信息。

思考题：

1. 客户端的动态网页设计，脚本语言奋VBScript和JavaScript,选川哪一种语言较为 合适？

2. JavaScript语言在网页设计中，主要的用途是什么？

3. JavaScript语言在网災设计屮，和传统的语言编写代码有何主耍区別？

4. 通过JavaScript语言，完成在客户端的老用户登陆和新用广注册的功能。

实验三、服务器控件的使用（设计性实验）（4学时）

实验目的：

1. 掌握服务器控件的使用和相关事件处理。

2. 理解和掌握 服务器和Web服务器对象的使川。

3. 理解验证控件的使用特点，掌握其基木的操作方法。

4. 理解和掌握用户控件的使用。

实验要求：

1. 川服务器控件布S页面，并实现相应的事件处理功能。

2. 使用列表控件，编辑数据项，设置AutoPostBack属性，实现列表控件的事件响应 功能。

3. 在页而中加入验证控件，理会验证控件的处理事件方式。

4. 使用FileUpload、Panel、Wizard等复杂控件，完成较为完善的功能。

5. 实现邮件发送的功能。

6. 学＞』用户控件的设计，在Web窗体页面屮，使用用户控件。

实验步骤：

1. 使用服务器控件，编写用Z1注册页面（）。

1） 在该页面中加入一些服务器端的控件，考虑页面的布局。

2） 通过程序设计的方式，对未填写必填信息的怙况进行相应的错误信息进行事件 处理，外给出相应的显示（区别div、Span的服务器控件川法以及literal、label 控件用法的不同）。

3） 再添加一个控件，显示用户输入的所有信息内容。

4） 另外编写一个完全相同的页面，也可以添加新页面，将上个页面屮的所旮控件, 通过复制的方式，粘贴到新的页而中。添加验证控件，设定验证控件的属性, 确保用户名和密码不得为空，出生年份ft 1900〜2006年之间，刀份在1〜12 月之间，电子邮箱为有效的邮箱信息，并给出错误统计姑示。

如果上机为2学时，以下内容参考本手册，可自行完成，不做实验要求。

2. 使川FileUpload服务器控件，实现文件上传的功能。文件上传的页面如图

所示，选择文件上传V?，芥显示如图所示:，如果没有 选择文件，直接单4•上传按钮，则显示如图所不。

1) 按照罔中所示，添加相应的服务器控件。

2) 己知FileUpload控件的相关属性和方法如卜*:

方法：将上载的文件的内容保存到Web服务器上的指定路径。 属性

me：获取客户端上使用FileUpload控件上载的文件的名称。

e：获取一个值，该值抬承FileUpload校件是否含文件。

tLength：获取上载文件的人小(以字节力単位)。

tType：荻取客户端发送的文件的MIME

Filc .FilcNamc：获取客户端上的文件的完全限定名称。

阅读理解下面的程序代码，指出该程序实现的功能是什么。简化程序代码，实现实 验中文件上传的功能，满足图示的要求。

Sub SaveFile(ByVal file As HttpPostedFile)

Dim savePath As String =

nc:tempuploadsn

Dim

fileName As String = FileUpload 1 .FileName Dim

pathToChcck As String = savePath + fileName Dim

tempfileName As String

If ((pathToCheck)) Then Dim

counter As Integer = 2 While

((pathToCheck))

tempfileName = ngO + fileName

pathToCheck = savePath + tempfileName counter

= counter + 1

End While

fileName = tempfileName

= ‟‟Your file was saved as " + fileName

Else

= ‟‟Your file was uploaded successfully."

End If

savePath += fileName FileUpload 1 .SavcAs(savcFath)

End Sub

3. 使川Panel控件，充实川户注册部分的功能，如添加川户爱好等信息输入的部分， 将显示分为几个步骤，分为上一页或下一页方式操作。

提示：添加儿个Panel控件，将相应信怠分别布置在Panel十，通过事件代码，控制 Panel的visible值力false成true。保证不hi］部分的正常显乐。

4. 使用Wizard服务器控件，完成与3相同的功能。

5. 编程实现邮件的发送功能。

1) 发送邮件的页而，显示如阁所示。设计该页而，增加相应的验证 控件，保证邮箱地址正确、主题信息不可为空。

2) 在IIS 6.0上安装SMTP服务

默认情况下，不随1IS安装SMTP服务。必须使用“控制面板”安装SMTP服务。 安装SMTP服务将创建一个默认的SMTP配S,随后可以使川1IS管理器£1定义该配置。

a)

c)

单击“控制酣板”，双击“添加/删除程序”，然f单击“添加/删除Windows组件”。

在“应用程序服务器的了•组件”列表中，单击“Internet信息服务(1IS)”，然活单击

b) 在“组件”列表中，单击“应用程序服务器”，然后单击“详细信息”。

界类型。

“详细信息”。

d) 在"Internet信息服务(IIS)的子组件”列表中，选巾“SMTP服务”复选桐，然后单

击“确定”，按照说明操作。

安装SMTP服务时，将在C:InetpubMailroot屮创建一个具杏消息存储区的默认 SMTP服务器配置。US SMTP服务只是一个中继代理。电子邮件将转发到SMTP服务器 进行传递。

1) 在屮，参照以下方式，设定使用默认M络凭据发送电了•邮仲时所需 的适当SMTP参数。

〈configuration〉

<〉

〈network host="localhost” port=‟‟25n defaultCredentials=‟‟true”/〉

〈/mailSettings〉

〈/configuration〉

2) 参照以下程序，实现邮件发送的功能。保证程序中控件名称和页ifti中信息对应。

Imports

Sub SendMail()

Dim msg As MailMessage

Dim from As Mail Address = New MailAddress()

Dim to 1 As MailAddress = New MailAddress() msg =

New MailMcs$agc(from, tol)

t = = „If

FileUploadl .HasFile Then

Dim ar As Attachment

ar = New Attachment(ntcnt，tType) msg.

Attachments. Add(ar)

„End If

Dim client As SmtpClient = New SmtpClient (msg)

End Sub

7. 设计用户控件，并在Web窗体页面中，使用用户控件。

1) 在用户控件中，添加用户名和用户密码输入文本框。

2) 在Web窗体页面上，添加用户控件和一个按钮，单击按钮时，将用户输入的 信息，显示在Web窗体上。

思考题：

1. 控件和服务器控件的主耍差异是什么？

2.

3.

4.

5.

使用验证控件的主耍好处和弱点是什么？

实验中，年；!信息使用文木框和验证控件，还是使用下拉列表控件比较好？

文件上传可以使川FileUpload服务器控件完成，如何实现文件卜载的功能？

文件上传中，直接设定文件实际存储的物理位置有何缺陷？如何将文件保存在网 站可管理的存储空间内？

6.

7.

aspx文件的工作机理是什么？访问.aspx文件和访问. 文件，那个快？

邮件发送的功能是如何实现的？

实验四、使用内置对象（设计性实验）（2学时）

实验0的：

1.

2.

3.

4.

5.

6.

7.

掌掘和文件的作用和编写。

理解常用的页W指令作用。

掌握Response对象的使川方法。

掌握Request对象的使用方法。

掌握Session对象的使用方法。

掌掘Application对象的使用方法。

掌握Server对象的使用方注。

实验要求：

1.

2.

3.

添加 文件。

用开发一个表单服务程序，要求包含Request、Response内置对象。

了解各内置对象的特点和使用场合，用Application、Session和Server等开发和应 功能的程序。

实验步骤：

1. 根据实验一中的用户发送邮件災面，设计文件，使用Request对象获 取信思，再通过Response对象将信息反馈到客户端。

要实现客户端信息内容的提交，必须通过Form表单元素将所有HTM元素信息封 装，将所有信息通过form元素中acti on属性指定的*.

aspx ,将内容提交到服务

oa XUJ

W而。

Format素的net hod属性，可指定提交信息的方式。有post和get两种。通过Post

提交的，*. aspx页面通过request, form获取。通过get提交的，*. aspx页面通 过

request,

querystri ng

获取。

服务器端获取htnk元素的内容，通过元素的nan®属性获取指定元素的信息。

Wb服务器控件基本取代了

request和response的功能，但在网页设计中，此信 息传输的方式，仍有一定的实用价值。

2.

3.

4.

5.

炙验三巾的注朋■:奴面，当用Z1雄击返回按钮，贝面换到文件。（使 用按钮厲性、er 和 ct 方法）

编写ASPX动态页面，显示关于客户机和服务器的信息（不做）。

编写文件，将其部署在虚拟站点的根目录下，设计新页面，用于显示 目前的在线人数。

编写一个ASPX页面，该页面只有合法的用户方可访W。即判断session中的用户 信息，当用户未登陆时，将页而重定叫到登陆页而。当session中有用户姓名时，

显示用户信息，并给出具体的问候，如“下午好”等。

思考题：

1. 在表单巾，POST和GET方式的主要区别是什么？使用在什么场合？

2. 显示网站至开通始，用户登陆的次数，通过何方式完成较佳？

3. 显示特定用户登陆本网站的次数，用何方式比较理想？

4. 如果用户填写的信息巾，仅含”<”和“〉”等符号，如何正确显示？

5. JavaScript语言小，更换页面的方式如何实现？服务器端更换页面的方式如何实 现？其主要区别是什么？

实验五、使用对象（设计性实验）（4学时）

实验FI的：

1. 掌握的工作方式。

2.

3.

4.

掌握SqlDataSource数据源和各种数据绑定控件的使川。

掌握数据倌息的添加、修改和删除等的操作。

掌握数裾多种显示方式的设计方法。

实验要求：

1. 设计一个简易的图书信息管理数据库，至少包拈川户、图书和借阅等信息。

2. 用SqlDataSource控件连接Web数椐库。

3. 实现数裾显示、分页显示、编辑修改、显示细节数裾，以及数裾求和的功能。

实验步骤：

1. 设计一个阁书管理数据库，至少包栝用户（学号、姓名、性别、住址、email.电话 等）、图书（书名、I割书类别、 、出版社、出版日期、价格、数置等）和借阅（用 户号、图书号、借出日期、归还H期、足否归还等）等信息，设计用户、图书和借 阅数裾表，给岀相应的主外键约束。添加相应的数裾信息，以备浏览和更新。

2. 添加和应的动态网奴，使川SqlDataSource校件连接Web数据库，使用GridView控 件绑定到sqlDataSource控件，分别显示出川户信息，图书信息。

从功能管理的角度考虑，应该一个页面至多包含一个功能，从上面分析可看出，至 少包含用户管理页面、图书管理页面和借阅管理页面。

Sql CBtaSource控件绑定时，如果数据表中没有设定主键的话，Sql CetaSource将 不能自动生成Iodate、Del ete和Insert等高级功能。

3. 实现添加、修改和删除川户、图书等信息。（奋借阅状况的川户和图书不得删除）

如果设计良好的数据库结构，主外键约束自动制约用户和图书的删除功能实现。但 网页给出的错误提示，容易让人产生设计错误的错觉。

4. 实现借阅图书的功能。（借出图书的数景不得超出现有数量）

5. 编写相应的网页，实现查询用P信思，根据用户信息，显示川户借阅图书情况的内 容。

&idVi ew实现数据表内容的显示，可通过简单设定，实现更新、删除等功能。

Detai I sVi ew实现单个记录内容显示的功能，可通过简单的设定，实现信息的添加、修 改的功能。

思考题:

1.

2.

数据源和数据控件的关系是什么？在中，如何实现数据库中数据妞示 的功能？

SqlDataSource、AccessDataSource、ObjectDataSource和XmlDataSource主要区 别是什么？各有什么用途？

3.

4.

理会WEB应用服务器、数裾库服务器和客户浏览部分三者之间工作流的方式, 充分理解应用程序三层架构的实现机制，画出三者的关系图。

WEB程序设计的特点是什么？

实验六、综合网站功能实现（综合性实验）（4学时）

实验目的：

1. 掌握综合网站功能开发与实现的方法。

2. 掌掘web服务器控件、数据妞示控件和数据绑定控件在功能实现上的不M作用。

3. 掌握数裾多种显示方式的设计方法。

4. 掌握控件的尚级应用和错误处理。

实验要求：

1. 在实验五的图15信息管理系统ffi础上，实现Web服务器控件勾用户交互获取信息，

通过SqlDataSource控件绑定数据序，实现用P登陆信患验证的功能。

2. 通过DetailsView的校板和验证控件，实现派加新川户的功能。

3. 通过GridView的模板和验证控件，实现数据更新和删除的功能。

4. 通过GridView属性设定，实现数裾信息主从W.示和不同页Ifii间信息传递的功能。

5. 实现数据添加、更新、删除时的错误处理功能。

实验步骤：

1. 设计用户登陆页面。

1） 在页面屮添加W个TextBox控件，一个输入登陆名，一个输入密码，修改密码 文本框的TextMode力密码。添加两个Button投件，力登陆和重填。

2） 添加 SqlDataSource 校件，设定 DataSourceMode 为 DataReader。在配置数据源 吋，设定 where 信息,SelectCommand 类似"SELECT ［用户号］，［密码］，［level 1］

FROM丨用户1 WHERE （（［用户号］=@用户号）AND （［密码卜@密码））"，将 select中的变量绑定为controlo

3） 登陆按钮对应的事件过程屮，添加如下语句：

Dim r As aReader

r = SqlDataSource I .Select（）

If s Then

（）

....‘此处进行登陆成功处理丼转到登陆成功后的显示页

er（""）

Else

... ‘此处进行登陆失败处理

End If

2. 设计添加用户页面。

1） 在页面中添加DetailsView校件，修改DefaultMode为Tnsert。

2） 在DetailsView的Itemlnserted事件过程中，添加如下语句，实现错误处理。

If Not e. Exception Is Nothing Then

Label 1. Text = e. message e.

Exceptionllandled = True

End If

Iteninserted事件过程在什么情况下被调用？如果用户输入信息不合理，在什么 事件过程中，通过程序加以处理？

3）第:新添加一个新的页曲，在页面中添加Detai lsView控件，修改Defaul tMode 为Insert。在DetailsView十，通过编輯字段，添加模板项，具体规划信、0、 输入和显示的格忒，通过验证控件约束信息采集的合理性。

3. 设计更新和删除用户的页而。（有借阅状况的用户和图书不得删除）

1） 添加GridView控件，通过编辑列，添加模板项，通过控件与数据源的绑定和 验证控件设置，设定数据获取和妞示的格式。

2） 编辑列中，添加ButtonField或CommandField,设计编辑按钮。

3） 编憐列屮，添加役板项，添加表示删險的控件，没定控件的onclientclick屈性， 提供客户端确汄功能。

4. 设计多页，实现页间信息传递功能。

1） 设讨•一个页面，添加GridView控件，通过编辑列，添加HyperLinkField,设 定

DataNavigateURLFormatFields> DataNavigateURLFormatString 属性值。

2） 没计一个页面，添加Details View控件，添加SqlDataSource控件，没定Where 位，获取上一页传递的信息。

5. 设计主从数据表显示页曲*。

1）设计一个页血，添加两个GridView控件，添加两个数据源绑定控件，其屮一 个SqlDataSource掠件的Where值满足其•中弟一个GridView控件的选择项。

思考题：

1. DataSet和DataReader分别足什么？宥何区别？

2. 如何在程序中实现数据库操作中的错误预防和处理？

3. 学习和理会Try ... Catch .... End Try错促处理机制，如何在程序中加以应用和处 理？

4. 管理信息系统屮的页而之叫的先厂；•调用顺序，在Web机制的系统屮，如何实现？

实验七、基于多层架构的综合网站功能实现（综合性实验）（4学时）

实验目的：

1. 掌握多层架构Web程序设计的方法。

2. 掌握ObjectDataSource数掘源功能和使用。

3. 掌握服务器控件和ObjectDataSource配☆使用A法。

4. 掌握母版页和主题的使用方法。

实验要求：

1. 在实验五的图V信息管理系统葙础上，实现多层架构综合M站的功能。

2. 网站中添加xml架构，实现内存中保存数据库信息的功能。

3. 学>1 xml架构文件巾，dataadapter对象的fill和get的SQL配置。

4. 用ObjectDataSource校件选接xml®构文件中的dataAdapter对象。

5. 实现付版奴和主题的功能。

实验步骤：

1.

2.

3.

4.

5.

6.

思考题：添加一架构文件。

1） 在文件中添加用户的dataAdapter对象。添加SQL查询，设计insert、通过用 户名查找的select、通过用户名和密码查找的select.根据用户名删除的delete、 根据用广名修改的update等方'法。即在用人1的dataAdapter对象巾，设计所卉 可能使川到和川户有关的数据库操作方法。

2） 在文件中添加阁书的dataAdapter对象，设计所有可能使用到和阉书有关的数 裾庳操作方法。（不做）

3） 在文件屮添加借阅的dataAdapter对象，设计所奋可能使川到和借阅奋关的数 据库操作方法。（不做）

添加一个+.aspx页則，实现用户登陆功能。

1） 在页面屮添加两个TextBox控件，一个输入登陆名，一个输入密码，修改密码 文本框的TextMode为密码。添加两个Button控件，为登陆和秉填。

2） 添加ObjectDataSource控件，在配置数据源时，指定与用户dataAdapter对象 中的getData方法，该方法通过用户名和密码查找用户表。

3） 登陆按钮对应的事件过程中，添加如下语句：（按设计中命名的对象，进行相 关的代码修改）

Dim rs As tsDataTable = ust一Pwd（name，pwd）

If <> 0 Then

.... ‘此处进行登陆成功处理并转到登陆成功后的显示页

中进行了身份验证模式等没置，可使用此方法跳转页而

Else

...‘此处进行登陆失败处理

End If

设计添加用户页面。

1） 在页面中添加DetailsView控件，修改DefaultMode为Insert。

2） 在DetailsView的编辑列的配置屮，进行相应的数裾绑定。

3） 在Detai lsView的Itemlnserted事件过程中，添加如下语句，实现错误处理。

If Not e. Exception Is Nothing Then Label

1. Text = e. Exception, message e.

Exceptionllandled = True

End If

4） 3E新添加一个新的贞iftf，在贞iftf中添加Detai lsView投件，修改Defaul tMode 为Insert。在DetailsView中，通过编辑字段，添加模板项，具体规划信息 输入和显示的格式，通过验证控件约朿信息采集的合理性。

设计更新和删除用户的页面。

添加母版页，设计页而的导航和目录树等信息。

添加主题，美化页谢显示。

‘如果

1.

2.

3.

4.

5.

SqlDataSource、AccessDataSource、ObjectDataSource和XmlDataSource主要区别是

什么？各有什么用途？

xml架构文件的作用是什么？其中保存的信息是什么？

DataAdapter对象，DataTable对象是什么？其层次关系足什么？

母版页的主要作用足什么？在巾，如何将*.aspx和母版页关联起來?

主题和CSS冇什么异同？