WEB实验指导书 - 图文

Web应用开发技术

实验指导书

实验平台：Visual Studio 2005 + SQL Server 2000

运行环境：Windows XP + Microsoft Internet Explorer 8

实验方法：

1. 下载老师所给的网站实例，

2. 按照老师所给的步骤一步一步地来完成上机实验，不要直接复制老师所给的网站实例； 3. 在需要写代码的地方，不要直接复制老师给的代码，要按照老师的代码一个字母一个字

母的编写，体会VS2005编辑器的代码编写方法。因为：自己所写的每一个字母都是经过大脑思考的，如有不明白，可以向老师或者同学求教；如果自己直接复制一大块代码来看，细节之处是体会不到的。

4. 老师给的网站实例只是一个框架，在充分理解老师给的网站实例运行逻辑后，然后在其

基础上加入自己的代码，使得网站的功能更加完善，页面更加美观。

参考网址：

1. W3School在线教程：http://www.w3school.com.cn/

2. 微软MSDN库：http://msdn.microsoft.com/library/ms123401

实验一 客户端脚本编程

一、 实验目的

通过设计一个个人主页网站，理解CSS+DIV的页面布局，掌握JavaScript的语法和常用的浏览器对象，初步学会使用Visual Studio 2005创建网站和编辑网页的方法。 二、实验内容和要求 1. 自己设计CSS和网页布局，将所给的某个人网页改成展示自己的一个主页。要求展示的主要内容有：基本资料、学习经历、所得奖励、最新动态等。 2. 在网页的合适位置加入一些JavaScript特效，如显示当前时间、图片定时切换、文本自动滚屏等。 三、实验步骤：

1. 打开Microsoft Studio 2005程序。

2. 单击文件->新建->网站，打开如下图所示的窗口，选择ASP.NET模板，选择合适的存放位置，语言选择“Visual C#”，单击确定。

3. 可以看到窗口如下图所示，在Default.aspx文件上单击右键，选择“删除”，将Default.aspx

文件删除。

4. 在“解决方案资源管理器”小窗口的网站根目录上单击右键，选择“添加新项”。

5. 在打开的窗口中，选择HTML页，名称为Index.htm，单击“添加”。

6. 在“Index.htm”文件上单击右键，选择“设为起始页”，即将Index.htm文件设置成为新建

网站的起始页。

7.

单击窗口右边上的“工具箱”，单击工具栏的“自动隐藏”，使得该工具箱处于可见状态

8. 在“解决方案资源管理器”的网站根目录上单击右键，单击“新建文件夹”，输入Images，该文件夹存放本网站用到的图片。

9. 切换到“设计”视图，可以将工具箱中的“标记”拖到设计视图中，进行页面设计，也可以在“源”视图中，对网页源代码直接编辑。

10. 将老师提供的“实验一”文件夹下的“Index.htm”的代码复制到自己所建的网站的

Index.htm的“源”视图中， 将老师提供的Images文件夹中的图片复制到自己所建的网站的Images文件夹中。切换到“设计”视图。

11. 选中某一个标记，单击右键，选择“属性”，可以在VS2005的右下角看到属性窗口，对该标记的属性进行设置。

12. 单击工具栏中的绿色三角形，或者直接按F5，可以在IE窗口中进行预览。

13. 关闭IE窗口，可以回到VS2005继续进行编辑。

14. 理解老师所给的实验一的切换Tab页的JavaScript代码和相关CSS样式，将原有的个人主页改成展示自己的网页，同时增加Tab页。展示的主要Tab页有：基本资料、学习经历、所得奖励、最新动态等。并在网页的合适位置加入一些JavaScript特效，如显示当前时间、图片定时切换、文本自动滚屏等。

实验二 服务器端简单程序设计

一、 实验目的

通过使用ASP.NET设计一个聊天室，掌握Session，Request，Response，Application等对象的使用方法，掌握常用的服务器端控件，掌握JavaScript客户端验证方法，初步学习连接数据库，并使用C#编写后台代码。 二、实验内容和要求 1. 按照步骤实现所给的聊天室网站，理解该网站的运行机制； 2. 对聊天室的网站内容和功能进行扩充。 三、实验步骤：

1. 打开SQL Server 2000，新建一个数据库名为Chat。

2. 在Chat数据库中，新建一个数据库表名为Users，用于记录聊天室的所有注册用户。该表有两列： Username varchar(50) primary key Password varchar(50) not null 3. 使用VS2005新建一个ASP.NET网站“实验二”，语言选择Visual C#。

4. 在“解决方案资源管理器”中，在网站根目录下添加新项，选择“Web配置文件”。 5. 在新生成的Web.Config文件中，加入数据库的连接字符串。方法为：将

< connectionStrings /> 改为

6. 在“解决方案资源管理器”中，在网站根目录下添加新项，选择“Web窗体”，命名为Register.aspx，在其中加入两个asp:TextBox控件、一个asp:Button控件、一个asp:Label控件和一个asp:HyperLink控件。

7. 在“设计”视图中，双击“注册”按钮，进入该Web窗体对应的后台控制程序Register.aspx.cs。 8. 在Register.aspx.cs的顶部引入System.Data.SqlClient命名空间。

9. 在btnRegister_Click添加代码，在服务器端验证用户的输入，如果用户输入没有问题，且数据库中不存在重名用户，则允许用户注册。

10. 在在“解决方案资源管理器”中，在网站根目录下添加新项，选择“HTML文件”，命名为Login.htm。将其“设为起始页”。在其中加入表单中，表单中加入一个HTML文本域、一个HTML密码域和一个提交按钮，并在客户端提交时利用JavaScript进行验证，体会客户端验

证和服务器验证的区别。

11. 在网站根目录下新建一个Web窗体，命名为Login.aspx，用来接收Login.htm表单的信息，并查询数据库，看该用户是否为合法登录。在“Login.aspx”中添加一个asp:Label对象，如用户登录失败，则进行提示。用户登录成功，设置Session和Application，转入Main.aspx。 12. 在网站根目录上单击右键，选择“添加ASP.NET文件夹”->“App_Code”，在该文件夹下添加“类”，命名为“Sentence.cs”，用此类来做用户发言的数据类的存储。 13. 在网站根目录上单击右键，选择“添加新项”，选择“全局应用程序类”命名为“Global.asax”。在文件第二行引入System.Collections.Generic命名控件，该命名控件包含List类。

14. 在Global.asax文件中加入相应的程序，同时要修改Web.Config文件，加入

15. 添加Web窗体，名为ChatContent.aspx。在其头文件中加入：

16. 在ChatContent.aspx文件中，加入一个div层。并在ChatContent.aspx文件的Page_Load事件处理程序中加入从Application中读取聊天记录的代码。 17. 添加Web窗体，名为“Main.aspx”，在其中加入三个层，分别显示聊天内容、在线用户列表和发言文本框。在“聊天内容”层中，加入一个iframe标记，src为ChatContent.aspx主要显示用户聊天内容。在其他两个层中添加合适的asp控件，并在后台的代码中加入代码，加载页面时初始化在线用户列表，当用户发送一条消息时，将该消息加入Application对象，并刷新在线用户列表。

18. 将网站搭建好之后，按“F5”调试该网站。

19. 在调试过程中，可以尝试用多个浏览器窗口访问网站网址，分别登录注册，进入聊天室。 20. 对该聊天室网站的内容进行扩充： a. 用户注册过程中，加入性别，地址，邮箱等信息并在客户端验证其格式。

b. 在用户聊天内容中，显示发送消息的时间。 c. 用户发送消息时，指定“公聊”还是“私聊”，公聊内容显示给所有用户，私聊内容只有自己和消息接收用户可以看到。 d. 消息内容中，自己说的话和自己给别人说的话加上底色。 e. 美化页面。 f. 加入其他一些需要的内容。

21. 调试成功后，请其他同学访问自己的网站，并提出意见。方法是：在“调试”模式下，请其他同学使用浏览器，输入自己网站的网址。

实验三 Web数据库程序设计

一、 实验目的

通过使用ASP.NET设计一个学生成绩管理系统，了解前台页面和后台编辑页面的区别，掌握Web服务器与数据库的连接和数据库操作的方法，进一步掌握常用的服务器端控件，掌握使用C#编写后台代码的方法。 二、实验内容和要求 1. 按照步骤实现所给的学生成绩管理网站，理解该网站的运行机制； 2. 对聊天室的网站内容和功能进行扩充。 三、实验步骤：

1. 打开SQL Server 2000，新建一个数据库名为student。

2. 在Chat数据库中，新建一个数据库表名为Users，用于记录聊天室的所有管理员用户。该表有两列： Username varchar(50) primary key Password varchar(50) not null 3. 新建一个数据库表名为Student，用于记录所有学生的学号，姓名和密码。 Sno char(8) primary key Name varchar(50) not null Password varchar(50) not null

4. 新建一个数据库表名为Course，用于记录所有的课程编号和课程名称。 Cno char(4) primary key Cname varchar(50) not null

5. 新建一个数据库表名为SC，用于记录某个学生某门课程的成绩。

Sno char(8) Foreign Key 参照 Student(Sno) Cno char(4) Foreign Key 参照 Course(Cno) Grade int not null 注：primary key为(Sno, Cno)

6. 在student数据库中，运行如下语句，插入一些数据： insert into users values('admin', 'admin');

insert into student values('20110001', '张三', '1'); insert into student values('20110002', '李四', '1'); insert into student values('20110003', '王五', '1'); insert into Course values('0001', '高等数学');

insert into Course values('0002', 'Web应用开发技术'); insert into Course values('0003', '计算机网络'); insert into SC values('20110001','0001',85); insert into SC values('20110001','0002',90); insert into SC values('20110001','0003',95); insert into SC values('20110002','0001',70); insert into SC values('20110002','0002',65); insert into SC values('20110002','0003',80); insert into SC values('20110003','0001',55); insert into SC values('20110003','0002',45); insert into SC values('20110003','0003',60);

7. 使用VS2005新建一个ASP.NET网站“实验三”，语言选择Visual C#，删除生成的“Defaulat.aspx”文件。

8. 在“解决方案资源管理器”中，在网站根目录下添加新项，选择“Web配置文件”，。 9. 在新生成的Web.Config文件中，加入数据库的连接字符串。方法为：将

< connectionStrings /> 改为

connectionString=\Source=127.0.0.1;Initial

10. 在“解决方案资源管理器”中，在网站根目录下添加新项，选择“Web窗体”，命名为Login.aspx，在其中加入两个asp:TextBox控件、一个asp:Label控件和一个asp:Button控件。编写后台逻辑代码，验证用户的输入，如登录成功，设置Session变量的值，并根据用户的输入得到用户的身份（管理员或者学生）重定位到相应的文件。 11. 在网站根目录下添加“Web窗体”，命名为Student.aspx。在Student.aspx主页中增加1个asp:Label控件和一个asp:GridView控件，ID分别为Welcome和Grade。

12. 点击“自动套用格式”，设置自己喜欢的数据显示格式。点击“确定”。

13. 在“GridView任务”工具栏中，单击“编辑列”，在打开的“字段”窗口中，清除“自动生成字段”选项，在“可用字段”列表中选中“BoundField”，单击“添加”。在“BoundField

属性”中将DataField的文本域的值改为“Name”，HeaderText的文本域的值改为“姓名”。

14. 类似添加两个BoundField，DataField域的值分别为Cname和Grade，HeaderText域的值分别为课程名称和分数。

15. 单击确定，“设计”视图如下。

16. 在Login.aspx.cs文件的Page_Load中加入相应的代码，加载数据。 17. 在网站根目录下添加“Web窗体”，名为“StudentEdit.aspx”，用于对学生进行管理。 18. 在StudentEdit.aspx中增加一个asp:GridView控件，id属性为”GridView1”，DataKeyNames属性的值为Sno。点击GridView的“自动套用格式”，设置自己喜欢的数据显示格式。点击“确定”。再增加一个错误显示的asp:Label，id为Message。 19. 在“GridView任务”工具栏中，单击“编辑列”，在打开的“字段”窗口中，清除“自动生成字段”选项，在“可用字段”列表中选中“CommandField”，单击“添加”。在“CommandField属性”中将ShowDeleteButton和ShowEditButton的文本域的值改为“True”。

20. 再添加一个BoundField，在“BoundField属性”中将DataField的文本域的值改为“Name”，HeaderText的文本域的值改为“姓名”，ReadOnly属性为true。

21. 再添加两个BoundField，DataField域的值分别为Name和Password，HeaderText域的值分别为姓名和密码。（不要设置ReadOnly属性）

22. 在“StudentEdit.aspx.cs”中增加一个私有变量:

string ConnectionString = ConfigurationManager.ConnectionStrings[\23. 增加一个私有方法BindGridView，检索数据并绑定数据源。

24. 在“StudentEdit.aspx”的“设计”视图中，选中GridView1，点击属性栏的

图标，可

以显示当前的事件处理程序。在RowEditing的文本域中双击左键，可以进入”StudentEdit.aspx.cs”页面的GridView1_RowEditing事件处理程序中，编写当用户单击“编辑”按钮时所作的操作。

25. 类似的添加RowUpdating，RowDeleting，RowCancelingEdit的事件处理程序，分别处理保存更新，删除，和取消更新时所作的操作。

26. 在StudentEdit.aspx页面中，增加新增学生的文本域，按钮和错误显示Label。

27. 在StudentEdit.aspx.cs中添加新增学生数据的事件处理程序。 28. 在网站根目录下添加“Web窗体”，名为“CourseEdit.aspx”，参照StudentEdit.aspx自己编写实现新建课程，修改课程，删除课程的代码。 29. 在网站根目录下添加“Web窗体”，名为“GradeEdit.aspx”，在设计视图中，加入一个asp:DropDownList和一个GridView，Id分别为Course和GridView1。 30. 设置GridView1的DataKeyNames属性的值为“Sno, Cno”在GridView1中，添加四个Field。第一个是CommandField下面的“编辑、更新、取消”，采用默认属性。另外三个是姓名，课程名和分数。

31. 按照上述方法，为GradeEdit.aspx.cs中添加代码，对课程表下拉列表中初始化数据，编写GridView1的更新，取消更新等事件处理程序。

32. 在网站根目录下添加“Web窗体”，名为“Admin.aspx”。在Admin.aspx中增加三个链接和一个iframe标记。在链接中，添加三个链接，并添加javascript代码，使得单击不同的链接iframe标记的src属性发生变化。

33. 将Login.aspx设为起始页，调试整个网站。 34. 对整个网站的界面进行美化，功能进行完善。

实验四 Web综合应用程序设计

一、 实验目的

通过使用ASP.NET设计并开发一个Web学习论坛，进一步掌握ADO.NET操作数据库的机制，掌握ASP.NET验证控件的用法，理解服务器端对象的功能和用法，学习开发一个综合的Web综合应用系统。 二、实验内容和要求 1. 按照步骤实现所给的Web学习论坛，理解该网站的运行机制； 2. 对Web学习论坛的网站内容和功能进行扩充。 三、实验步骤：

1. 打开SQL Server 2000，新建一个数据库名为Forum。

2. 打开老师给的“实验四”文件夹下的Forum.sql文件，在SQL Server中执行该文件，生成三个表，分别是Users，Poster和Reply。分别记录注册用户记录，帖子记录和回复记录。三个表之间存在三个外码，找到并思考为什么建立这三个外码。

3. 使用VS2005新建一个ASP.NET网站“实验四”，语言选择Visual C#，删除生成的“Defaulat.aspx”文件。

4. 在“解决方案资源管理器”中，在网站根目录下添加新项，选择“Web配置文件”。 5. 在新生成的Web.Config文件中，加入数据库的连接字符串。方法为：将

< connectionStrings /> 改为

6. 在“解决方案资源管理器”中，在网站根目录下添加新项，选择“Web窗体”，命名为Register.aspx，在其中加入四个asp:TextBox控件和一个asp:Button控件。四个asp:TextBox的id分别为：UserName，Password，ConfirmPassword和Email，分别代表用户输入的用户名，密码，确认密码，邮箱。Asp:Button控件的id为btnSubmit，Text属性为注册。

7．本例中，我们采用ASP.NET自带的Validator控件进行数据验证，如下图。我们用到的三种控件为：RequiredFieldValidator验证非空输入框，CompareValidator验证两个输入框是否相等，RegularExpressionValidator验证输入框是否符合某种格式。

8. 从“工具箱”->“验证”组中拖一个RequiredFieldValidator控件到UserName的右部，设

置其属性：ControlToValidate为UserName，ErrorMessage为“用户名不能为空”。

9. 从“工具箱”->“验证”组中拖一个RequiredFieldValidator控件到Password的右部，设置其属性：ControlToValidate为Password，ErrorMessage为“密码不能为空”。

10. 从“工具箱”->“验证”组中拖一个CompareValidator控件到ConfirmPassword的右部，设置其属性：ControlToValidate为ConfirmPassword，ControlToCompare为Password，ErrorMessage为“两次密码输入不一致”。

11. 从“工具箱”->“验证”组中拖一个RequiredFieldValidator控件到Emai的附近，设置其属性：ControlToValidate为Email，ErrorMessage为“邮箱格式不正确”，在ValidationExpression

属性中，点击”…”，在弹出的“正则表达式编辑器”中选择“Internet电子邮件地址”，单击“确定”。

12. 将“Register.aspx”设为起始页，按F5调试运行，故意输入不符合要求的数据，查看源代码，体会ASP.NET的Validation控件的运行机制。

13. 在”Register.aspx”中，加入一个asp:Label控件，id为Message，用来显示一些信息。 14. 在“设计”视图中，双击btnSubmit按钮，在“Register.aspx.cs”文件的” btnSubmit_Click”添加代码，将用户注册信息插入数据库的Users表中。用户注册后，系统向用户注册的邮箱发送一份邮件，其中包含一个确认字符串，用户点击某个链接后，才能完成注册。

15. 调试运行Register.aspx，用自己的邮箱进行注册，然后去邮箱里查看服务器发送的邮件。再将系统中设置的发件人邮箱设为自己的邮箱进行测试，理解Mail对象发送邮件的方法。 16. 新建一个“Web窗体”，名为“Validation.aspx”，用来验证用户的注册。在其中加入一个asp:Label控件，id为Message，用来显示信息。在”Page_Load”事件处理程序中添加代码，对注册用户进行确认。

17．进入自己在第15步注册的邮箱，点击链接地址，完成注册确认。此时，一定要注意链接地址的端口是否和自己的ASP.NET调试运行的端口一致。如不一致，手动改正。 18. 在网站根目录下添加“Web窗体”，命名为Main.aspx，不编写任何代码。 19. 在网站根目录下添加“Web窗体”，命名为Login.aspx，在其中增加用户名输入框，密码输入框和错误信息输入框。另外从工具箱拖一个“RadioButtonList”控件，id为ReserveTime。用于设置客户端Cookie保留的事件。再加一个asp:HyperLink控件，链接到“Login.aspx”。 20．点击该控件上的三角形，在“RadioButtonList任务”对话框中选择“编辑项”，打开“ListItem集合编辑器”对话框。

21.在编辑器中添加一项，Text属性为永久，Value为Forever。

22. 类似的再添加三项，Text属性分别为：一个月，一天，一小时。Value属性分别为：OneMonth，OneDay，OneHour。对于“一个月”项目，设置Selected为True。

23. 双击“登录”按钮，进入后台代码程序。在btnLogin_Click事件处理程序中编写用户登录的代码。如果登录失败，则进行提示。登录成功，设置Session和Cookie，客户端进入Main.aspx。

24. 打开“Main.aspx”，将其设为起始页，在其右上角加一个id为Welcome的asp:Label控件、一个id为btnLogout的asp:Button控件。并在后台的Page_Load和btnLogout_Click事件处理程序中加入相应代码，完成登录和注销等程序。

25. 在Main.aspx页面的下部增加两个asp:TextBox、一个asp:Label和一个asp:Button。点击“发表”按钮，在后台编写用户发布新贴的代码，即在数据库的Poster表中增加一条记录。

26. 在Main.aspx的页面中部增加一个GridView控件，设置其id为GVPoster，AutoPaging为true，PageSize为10。

27. 打开GVPoster的“编辑列”对话框，增加一个BoundField列，设置其DataField属性为Title，HeaderText属性为标题，ItemStyle属性组的width属性为400px；增加一个BoundField列，设置其DataField属性为UserName，HeaderText属性为发布人，ItemStyle属性组的width属性为100px；增加一个BoundField列，设置其DataField属性为PostTime，HeaderText属性为发布时间，ItemStyle属性组的width属性为200px。 28. 增加一个HyperLinkField列，Text属性为查看回复，DataNavigateUrlFields属性为PosterID，DataNavigateUrlFormateString为Reply.aspx?PosterId={0}，ItemStyle属性组的width属性为75px，Tareget为_blank。

29. 在后台的Page_Load事件中，添加事件处理程序，装载页面时读入论坛中所有的帖子主题，显示给用户。

30. 新建一个Web窗体，名为Reply.aspx。在Reply.aspx中增加两个DataList控件。由于DataList控件操作相对较复杂，可以直接将老师给的代码复制过去，并思考其含义。 31. 在Reply.aspx页面的下部增加“回复帖子”内容。 32. 在后台增加相应代码。

33. 将Main.aspx设为起始页，运行本网站。 34. 对整个网站进行美化。

35. 增加后台帖子管理功能，增加“删除回复”和“删除帖子”功能。

本文来源：https://www.bwwdw.com/article/x1w8.html