WEB实验指导书

Web应用开发技术实验指导书实验平台：VisualStudio2005+SQLServer2000运行环境：WindowsXP+MicrosoftInternetExplorer8实验方法：1.下载老师所给的网站实例，2.按照老师所给的步骤一步一步地来完成上机实验，不要直接复制老师所给的网站实例；3.在需要写代码的地方，不要直接复制老师给的代码，要按照老师的代码一个字母一个字母的编写，体会VS2005编辑器的代码编写方法。因为：自己所写的每一个字母都是经过大脑思考的，如有不明白，可以向老师或者同学求教；如果自己直接复制一大块代码来看，细节之处是体会不到的。4.老师给的网站实例只是一个框架，在充分理解老师给的网站实例运行逻辑后，然后在其基础上加入自己的代码，使得网站的功能更加完善，页面更加美观。参考网址：1.W3School在线教程：微软MSDN库：实验一客户端脚本编程一、实验目的通过设计一个个人主页网站，理解CSS+DIV的页面布局，掌握JavaScript的语法和常用的浏览器对象，初步学会使用VisualStudio2005创建网站和编辑网页的方法。二、实验内容和要求1.自己设计CSS和网页布局，将所给的某个人网页改成展示自己的一个主页。要求展示的主要内容有：基本资料、学习经历、所得奖励、最新动态等。2.在网页的合适位置加入一些JavaScript特效，如显示当前时间、图片定时切换、文本自动滚屏等。三、实验步骤：1.打开MicrosoftStudio2005程序。2.单击文件-新建-网站，打开如下图所示的窗口，选择ASP.NET模板，选择合适的存放位置，语言选择“VisualC#”，单击确定。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.打开SQLServer2000，新建一个数据库名为Chat。2.在Chat数据库中，新建一个数据库表名为Users，用于记录聊天室的所有注册用户。该表有两列：Usernamevarchar(50)primarykeyPasswordvarchar(50)notnull3.使用VS2005新建一个ASP.NET网站“实验二”，语言选择VisualC#。4.在“解决方案资源管理器”中，在网站根目录下添加新项，选择“Web配置文件”。5.在新生成的Web.Config文件中，加入数据库的连接字符串。方法为：将connectionStrings/改为connectionStringsaddname=ChatconnectionString=DataSource=127.0.0.1;InitialCatalog=Chat;uid=sa;pwd=sa//connectionStrings6.在“解决方案资源管理器”中，在网站根目录下添加新项，选择“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文件，加入sessionStatetimeout=1mode=InProc/sessionState15.添加Web窗体，名为ChatContent.aspx。在其头文件中加入：metahttp-equiv=refreshcontent=3/效果是该页面每3秒钟刷新一次。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.打开SQLServer2000，新建一个数据库名为student。2.在Chat数据库中，新建一个数据库表名为Users，用于记录聊天室的所有管理员用户。该表有两列：Usernamevarchar(50)primarykeyPasswordvarchar(50)notnull3.新建一个数据库表名为Student，用于记录所有学生的学号，姓名和密码。Snochar(8)primarykeyNamevarchar(50)notnullPasswordvarchar(50)notnull4.新建一个数据库表名为Course，用于记录所有的课程编号和课程名称。Cnochar(4)primarykeyCnamevarchar(50)notnull5.新建一个数据库表名为SC，用于记录某个学生某门课程的成绩。Snochar(8)ForeignKey参照Student(Sno)Cnochar(4)ForeignKey参照Course(Cno)Gradeintnotnull注：primarykey为(Sno,Cno)6.在student数据库中，运行如下语句，插入一些数据：insertintousersvalues('admin','admin');insertintostudentvalues('20110001','张三','1');insertintostudentvalues('20110002','李四','1');insertintostudentvalues('20110003','王五','1');insertintoCoursevalues('0001','高等数学');insertintoCoursevalues('0002','Web应用开发技术');insertintoCoursevalues('0003','计算机网络');insertintoSCvalues('20110001','0001',85);insertintoSCvalues('20110001','0002',90);insertintoSCvalues('20110001','0003',95);insertintoSCvalues('20110002','0001',70);insertintoSCvalues('20110002','0002',65);insertintoSCvalues('20110002','0003',80);insertintoSCvalues('20110003','0001',55);insertintoSCvalues('20110003','0002',45);insertinto