Web程序设计实验指导书
《Web程序设计》实验指导书(适合计算机科学与技术专业)
计算机与信息工程系
2011年7月
目录
实验概述 (1)
实验项目一运用XHTML标记进行网页设计 (5)
实验项目二运用https://www.wendangku.net/doc/767728369.html,内置对象完成Web程序设计（一） (7)
实验项目三运用https://www.wendangku.net/doc/767728369.html,内置对象完成Web程序设计（二） (10)
实验项目四运用服务器控件完成页面设计 (12)
实验项目五采用页面切换与导航技术完成网页设计 (14)
实验项目七使用https://www.wendangku.net/doc/767728369.html,进行数据库程序设计（二） (17)
实验项目八熟悉与运用https://www.wendangku.net/doc/767728369.html, AJAX基本控件 (18)
实验项目九 Web综合程序设计 (19)
实验概述
一、课程实验概况
学习Web程序设计课程的目的是能够开发基于Web的应用软件，是在了解Web程序基本原理和技术的基础上，进行Web程序的编程能力学习和训练，要熟练地掌握Web程序设计的全过程，包括：开发环境的构建、开发工具的使用、独立编写程序、各种调试技术、程序运行结果分析。
上机实验的目的，不仅仅是为了验证教材和讲课的内容，或者验证自己所编写的程序的正确与否。Web程序设计课程上机实验的目的是：
1．加深对讲授内容的理解，尤其是各种Web技术的应用。
2．熟练掌握常用的开发工具。
3．学会上机调试程序。通过上机练习掌握根据出错信息判断错误位置和错误原因，掌握各种调试技术的灵活应用。
4．掌握根据功能要求进行程序分析和设计的能力。
二、实验前的准备工作
1．熟悉所用的开发工具和环境。本指导书所用开发环境为：
操作系统：Windows XP
开发工具：Visual Studio 2008
数据库管理系统：SQL Server 2005 或SQL Server 2005 Express
WWW服务器：IIS 6.0 或VS2008内置WWW服务
2．复习和掌握与实验有关的教学内容。
3．准备好上机所需的程序，切忌不预先设计好程序或抄别人的程序去上机。
4．对程序中可能出现的问题应事先有估计有对策，对程序中自己有疑问的地方应先作上标记，以便上机时特别给予注意。
5．准备好调试程序和运行程序所需的数据。
三、实验的步骤
1．创建网站
（1）打开Visual Studio 2008，如图1所示。
（2）点击图1中新建网站标识用于创建新网站，打开图2所示新建网站对话框。
若打开现有网站，则单击图1中打开网站标识。
也可以通过图3所示“文件”菜单的相应菜单项新建网站（或打开网站）。
（3）在新建网站对话框中，模板选择“https://www.wendangku.net/doc/767728369.html, 网站”，位置选择“文件系统”，并通过“浏览”按钮确定网站对应文件夹的位置，语言选择“Visual C#”，.NET 架构保持“.NET Framework 3.5”不变，然后点击“确定”按钮，则创建网站成功。
图
1
图
2
图 3
新建网站
2．创建网页
（1）点击“网站”菜单中的“添加新项”菜单项，或在“解决方案资源管理器”窗口中项目的快捷菜单项中选择“添加新项”菜单项，打开“添加新项”对话框如图4所示。
图4
（2）在“添加新项”对话框中，模板选择“Web窗体”，名称中给网页命名，语言选择“Visual C#”，选中“将代码放在单独的文件中”，然后点击“添加”按钮，则创建新的网页如图5所示。
图5
（3）在图5中，可以选择“源”、“设计”或“拆分”不同界面进行网页设计。
（4）设计完成后，可以点击工具栏“在浏览器中查看”按钮，或选择设计页面的快捷菜单中“在浏览器中查看”项，浏览页面效果。
（5）设计完成（或设计过程中）选择“文件”菜单的“全部保存”项保存项目。
四、实验报告
实验报告应包括以下内容：实验目的、实验内容、程序清单、运行结果、对运行结果的分析以及本次调试程序所取得的经验。
五、实验任务与时间安排
注：实验类型为选做和必做；实验类别为综合性、设计性、创新性、验证性、演示性等。
六、参考教材
[1] 石志国https://www.wendangku.net/doc/767728369.html, 程序设计实用教程.北京:电子工业出版社,2006.
[2] 郭洪涛https://www.wendangku.net/doc/767728369.html,(C#)大学实用教程.北京:电子工业出版社,2007.
实验项目一运用XHTML标记进行网页设计
一、实验目的
1．掌握开发工具VS2008开发网站的基本步骤。
2．掌握一个静态网页的设计步骤。
3．通过几个网页的设计掌握XHTML标记的作用。
二、实验内容
1．创建一个XHTML页面rumengling.aspx，输出结果如图1-1所示。
图1-1
2．练习列表标记songci.aspx，输出结果如图1-2所示：
图1-2
3．用XHTML语言编写符合以下要求的页面：标题为“An example of image”，在浏览器窗口中显示一个图像。图像的宽度为200个像素点，高度为150个像素点，边
框宽度为10个像素点
4．在网页中做一张课程表，要求所有的文字均居中，背景为黄色，表格居中，宽度为500像素。单元格间距与单元格边距为20像素。
5．创建一个网页，通过链接可以跳转到(1)创建的rumengling.aspx上。
三、实验步骤
1．创建网站“XHTMLDemo”。
2．在此网站中分别创建实验内容中的5个网页。
3．保存网站。
实验项目二运用https://www.wendangku.net/doc/767728369.html,内置对象完成Web程序设计（一）一、实验目的
通过编写简单Web程序，掌握Session、Application和Server等内置对象的使用方法。
二、实验内容
1．设计一个简易网上聊天室
用户访问网站时首先打开登录页面（Default.aspx）。在输入了用户名和相应的密码后，进入聊天页面（chat.htm）。页面通过框架分为上下两部分，上方显示聊天文字信息，下方显示一个输入聊天信息的表单，用户在输入了信息后单击[提交]按钮即可将信息发布到上方窗口。当用户进入聊天页面时，屏幕上显示“***进入聊天室”（***为用户昵称）的信息。若用户在登录时忘记输入用户名或密码是弹出出错提示，如图2-2所示；若输入的用户名或密码不正确，弹出出错信息，如图2-3所示。
图2-1 登录聊天室
图2-2忘记输入用户名或密码是时的提示图2-3用户名或密码出错时的提示
图2-4聊天页面
2．设计一个站点计数器
要求：使用Session对象设计一个站点计数器，将来访人数存放在放在站点内的counter.txt文件中，该数字不会因服务器或网站的重新启动而丢失；程序运行时要将当前会话的ID值显示到页面中，注意比较SessionID值的变化。
三、实验步骤
以简易网上聊天室为例。
1.设计登录页面（Default.aspx）
新建一个https://www.wendangku.net/doc/767728369.html,网站，向页面中添加一个用于布局的HTML表格，向表格中添加必要的说明文字。添加两个文本框TestBox1和TestBox2，添加一个连接按钮控件LinkButton1。适当调整各控件的大小及位置，页面设计效果如图5-1 所示。
2.设置Defalt.aspx中控件的属性
设置用户名文本框TestBox1的ID属性为txtUsername；设置密码文本框的ID性为txtPassword ，TextMode属性为Password（将文本框设为密码框）；设置连接按钮LinkButton1的ID属性为lbtnLogin，Text属性为“进入聊天室”。
3.编写Default.aspx中包含的程序代码
4.添加并配置全局配置文件（Global.aspx）
在解决方案资源管理器中，右键单击网站名称，在弹出的快捷菜单中执行“添加命令，然后选择“全局应用程序类”模板，单击[添加]按钮。
5.添加用于显示聊天信息的页面（main.aspx）
通过解决方案资料管理器向网站中添加一个新Web窗体，将其命名为main.aspx。切换到设计视图，向页面中添加一个用于显示聊天信息的标签控件。将标签的ID属性设置为lblMsg,Text属性设置为空。
6.设置发送聊天信息的页面（send.aspx）
向网站中添加一个新的Web窗体，向页面中添加一个用于显示用户名的标签控件Label1，添加一个用于输入聊天文字的文本框控件TextBox1和一个按钮控件Button1如图2-1所示。
设置标签控件Label1的ID属性为lblName，Text属性为空；设置文本框TextBox1的ID属性为txtMsg，TextMode属性为MultiLine（能显示多行文本）；设置按钮控件Button1的ID属性为btnSubmit，Text属性为“提交”。
7. 编写send.aspx中包含的程序代码
8. 设计框架网页chat.htm
在Windows附件中的“记事本”程序中输入如下HTML代码，并以chat.htm为文件名进行保存，设计完毕的网页必须保存到站点文件夹中。
实验项目三运用https://www.wendangku.net/doc/767728369.html,内置对象完成Web程序设计（二）
一、实验目的
通过编写简单Web程序，掌握Request、Response、Cookies和ViewState等内置对象的使用方法。
二、实验内容
设计一个简易网上聊天室。用户访问网站时首先打开登录页面（Default.aspx），如图3-1所示。在输入了用户名和相应的密码后，进入聊天页面（chat.htm），如图3-2所示。页面通过框架分为上下两部分，上方显示聊天文字信息，下方显示一个输入聊天信息的表单，用户在输入了信息后单击[提交]按钮即可将信息发布到上方窗口。当用户进入聊天页面时，屏幕上显示“***进入聊天室”（***为用户昵称）的信息。
要求：如果用户在5分钟内登录页面，则直接进入聊天界面，显示用户登录信息。
图3-1 登录聊天室
图3-2 聊天页面
实验项目四运用服务器控件完成页面设计
一、实验目的
1.掌握网页切换和导航的方法；
2.掌握网页布局的基本语法和方法。
二、实验内容
1．新建名字为“ServerControlExperiment”网站，在此网站中创建实现以下功能的网页。
2．在default.aspx页面中，添加1个TextBox控件、2个Button控件、一个ListBox控件，如图4-1所示。将2个Button控件的Text属性分别改为“增加”和“删除”。当单击【增加】按钮时，将TextBox文本框中的输入值添加到ListBox中，但单击【删除】按钮时，删除ListBox中当前选定项。
图4-1
图4-2
3．添加一个网页，要求将Label控件、LinkButton控件、HyperLink控件放在Panel 控件中，当单击一组Button按钮时改变Panel控件的背景色，单击另一组Button控件时改变Panel控件中文字的大小。单击LinkButton和HyperLink控件时分别导航到新的网页或网站。单击RadioButton控件时隐藏Panel控件，单击另一个RadioButton控件时显示Panel控件。如图4-2所示。
4．添加一个网页，在MultiView控件添加3个View控件，在每个View控件中各添加Image控件，再添加3个RadioButton控件切换各个View视图，每个View视图显示不同的图像。
5．添加一个网页，在页面中添加AdRotator控件，链接XML广告数据源，实现广告图像显示，当单击广告图像时导航到相应的网页。
6．添加一个网页，在页面中添加CheckBoxList控件，单击Button按钮时将CheckBoxList的选项写到ListBox中。
7．添加一个网页，在页面中添加RadioButtonList控件，单击Button按钮时将CheckBoxList的选项写到ListBox中。
8．添加一个网页，选择DropDownList控件的选项时导航到相应的网站。
9．添加一个网页，在页面中添加AdRotator控件，链接XML广告数据源，实现广告图像显示，当单击广告图像时导航到相应的网页。
10．添加一个网页，在页面中添加CheckBoxList控件，单击Button按钮时将CheckBoxList的选项写到ListBox中。
11．添加一个网页，在页面中添加RadioButtonList控件，单击Button按钮时将CheckBoxList的选项写到ListBox中。
12．添加一个网页，选择DropDownList控件的选项时导航到相应的网站。
13．添加一个网页，在页面中添加TextBox、RequiredFieldValidator和CompareValidator控件，实现CompareValidator控件的Operator行为的Equal、GreaterThan等属性值的验证。
实验项目五采用页面切换与导航技术完成网页设计
一、实验目的
1.掌握网页切换和导航的方法；
2.掌握网页布局的基本语法和方法。
二、实验内容
（1）设计一个登录界面，在其中输入登录信息后，在同一页面给出反馈结果。要求使用Request和Response对象操作完成。操作界面截图如下：
图5-1 图5-2
（2）设计如下图所示的数据输入界面：
图5-3
当用户填写并选择完相应的信息，并单击“提交”按钮后，在另一界面返回用户输入的信息。如下图：
图5-4
实验项目六使用https://www.wendangku.net/doc/767728369.html,进行数据库程序设计（一）
一、实验目的
1．熟悉https://www.wendangku.net/doc/767728369.html,数据库访问技术。
2．掌握Connection、Command对象的使用。
3．掌握DataReader、DataAdapter对象操作数据库数据的方法。
4．掌握VS2008中创建数据库的方法。
二、实验内容
1. 新建名字为“Accessdatabase_ Exercise”的网站。
2. 在网站的App_Data文件夹中，建立数据库“MyDatabase_ Exercise.mdf”。
3. 在该数据库中建立一张职工表，并且添加一些模拟的职工记录。其关系模式如下：
Employees（ID，NAME，SEX，AGE，Date of work，Filename of Photo）
4. 在web.config配置文件中，修改“
5. 添加一个网页，利用Command对象实现新职工的录入。
6. 添加一个网页，利用Command对象实现删除指定编号的职工记录。
7. 添加一个网页，利用Command对象实现修改指定编号的职工信息。
8. 添加一个网页，利用DataAdapter对象实现查询职工信息，并显示到网页的Label控件上。
实验项目七使用https://www.wendangku.net/doc/767728369.html,进行数据库程序设计（二）
一、实验目的
1．熟悉https://www.wendangku.net/doc/767728369.html,中的数据绑定技术
2．掌握列表控件的数据绑定方法。
3．掌握GridView、DataList、FormView控件进行数据显示和处理的方法。二、实验内容
1．新建名字为“DataBinding_ Exercise”的网站。
2．将实验六中的数据库复制到此网站的App_Data文件夹中，在web.config配置文件中创建此数据库的连接串。
3．添加一个网页，通过编程方式利用GridView控件实现数据的分页显示。
4．添加一个网页，通过编程方式利用GridView控件数据的编辑和删除。
5．添加一个网页，通过数据源控件方式利用DataList控件实现数据的显示。
6．添加一个网页，通过数据源控件方式利用FormView实现数据的插入、修改和删除操作。
实验项目八熟悉与运用https://www.wendangku.net/doc/767728369.html, AJAX基本控件
一、实验目的
1．掌握AJAX常用控件的使用方法。
2．理解异步更新。
二、实验内容
使用AJAX的UpdatePanel控件、Timer控件设计如图8-1所示的AJAX页面，在页面右下角异步更新时间。
三、实验步骤
1．创建一个编程语言为C#的网站AJAX_Exercise。
2．添加一个AJAX Web窗体页面（含有ScriptManager控件）。
3．使用表格或DIV+CSS技术实现图8-1所示的页面布局。
4．在页面合适位置添加一个UpdatePanel控件。
5．在UpdatePanel控件中依次添加一个Label和一个Timer控件。
6．选中Timer控件，在属性窗口中，将其Interval属性值改为1000。
7．双击Timer控件，进入Default.aspx.cs文件中，在Timer1_Tick事件中编写如下语句。
Label1.Text = DateTime.Now.ToString();
8．运行，结果如图所示。成功实现了电子表的效果，每隔一秒钟页面上的时间都在变化。
9．观察整个页面是否刷新。
Web应用程序设计综合实验报告材料
Web应用程序设计综合实验报告题目：网上购物系统 学生姓名： XXX 学号： XXXXXXXXXXX 院（系）： XXXXXXX 专业： XXXXXXXXXX 指导教师： XXXXXXXXXX 2014 年 7月 6 日
1、选题背景 随着计算机技术的发展和网络人口的增加，网络世界也越来越广播，也越来越来越丰富，网上商城已经成为网上购物的一股潮流。互联网的跨地域性和可交互性使其在与传统媒体行业和传统贸易行业的竞争中是具有不可抗拒的优势。在忙碌丰富的社会生活中，人们开始追求足不出户就能买到心仪的商品，是越来越多的上网爱好者实现购物的一种方式，对于企业来说，网络交易能大大提高交易速度、节约成本。在这种形势下，传统的依靠管理人员人工传递信息和数据的管理方式就无法满足企业日益增长的业务需求，因而开发了这样一个具有前台后台的网上商城系统，以满足购物者和企业的需求。 因此这次毕业设计题目就以目前现有的网上商城系统为研究对象，研究一般的网上商城的业务流程，猜测其各个功能模块及其组合、连接方式，并分析其具体的实现方式，最后使用Java加web服务器和数据库完成一个网上商城系统的主要功能模块。通过这样一个设计，可以提高自己Java编程的水准，也练习了怎样构建一个完整的系统，从系统的需求分析到设计，直至编码、测试并运行，熟悉并掌握一个完整的Web开发流程，为今后工作打下基础。 1.1设计任务 从以下几个方面实现网络商城的基本功能： 1、用户部分： （1）用户的登录和注册，用户必须注册才能购物，注册时系统会对注册信息进行验证，进入系统或是结账时，用户可以进行登录，登录时，如果密码错误，系统会进行验证并提示错误。 （2）浏览商品，实现用户可以在网络商店中随意浏览商品，商品按类别分类，方便用户查找不同类别的商品 （3）购物车管理，能实现添加商品、删除商品、更新商品的功能。 （4）生成订单，查看购物车后单击下一步则生成订单信息表，一旦提交订单，则购物车就不能被改变。 2、管理员部分：
Web程序设计实验报告
Web程序设计实验报告 姓名：冯刚 学号：200905030324 班级：计科3班
Html代码： 1.首页代码