WEB开发试验指导

Web技术与应用实验报告实验题目： Web开发技术及其应用 院 系： 计算机科学与工程学院 专 业： 班级： 学 号： 姓 名： 指导教师： 设计地点： 开课时间： 2011 至 2012学年第 2 学期实验一 熟悉Visual Studio和HTML开发环境【实验目的】 1、熟悉Visual Studio开发环境。2、掌握项目的创建方法。4、掌握常用控件的设置与处理。5、掌握.NET程序的调试运行。6、掌握基本HTML代码。7、在Visual Studio开发环境中使用 HTML代码制作页面。【实验内容】 1、运行Visual S，观察并熟悉集成开发环境。2、新建一个项目：我们选择 web应用程序项目起个名称,位置：选择一个目录用于存放项目文件。点击确定，会给自动生成一个default.aspx的文件。3、使用控件，在default.aspx网页中添加一个label一个button:4、查看并设置控件的属性以下是default.aspx代码片段：5、实现点击按钮要改变label1中的文本：在default.aspx页面中双击Button1,在出现的default.aspx.cs中写入以下代码以下是default.aspx.cs代码片段： protected void Button1_Click(object sender, EventArgs e) Label1.Text = 你一定会成功！; 好了，CTRL+F5运行一下，看到效果了吧。6、观察.NET的调试工具，并使用调试工具调试已创建的程序。7、在Visual Studio集成环境中创建Web应用程序，。8、使用标签制作出如下页面：9、使用HTML控件制作用户注册10、调试运行已创建的Web应用程序。【实验要求】1、实验前根据实验内容复习相关章节。2、编写相应的程序，写出完整的程序代码，包括注释，注意书写的层次结构。3、调试程序，完成程序。4、整理实验步骤，总结经验和体会。5、上交实验报告和源程序。1： 无标题页 2： 无标题页 第一讲 Internet 概述 Internet 工作原理 Internet 发展史 Internet 提供的服务 网页浏览 www发展 www结构 www特点 文件传输 电子邮件 远程登陆 电子公告 第二讲 HTML相关术语 UPL HTML 超文本标记语言HTML(Hypertext Markup Language) 是网页文档的主要编辑语言 HTTP 实验二 服务器控件【实验目的】 1、掌握文件上传方法2、掌握常用HTML服务器控件3、掌握常用A 服务器控件。4、掌握常用验证控件： 必须字段验证控件RequiredFieldValidator 范围验证控件RangeValidator 正则表达式验证控件RegularExpressionValidator 自定义验证控件CustomValidator 验证总结控件ValidationSummary【实验内容】 1、实现文件上传功能，限定只能上传图片（.jpg .gif .bmp .png），上传成功后在页面自动显示上传的图片。2、在页面中显示当前时间：格式如：2010年4月12日 11点58分18秒 星期一。 3、在页面中显示动态时间： !-document.write()setInterval(time.innerText=new Date().toLocaleString(),1000)/-4、实现通过下拉列表控制图片显示，如图5、在注册页面使用日历控件：6、使用必须字段验证控件RequiredFieldValidator验证用户名字段7、使用范围验证控件RangeValidator验证文本框的输入是否是一个1-5之间的整数8、使用正则表达式验证控件RegularExpressionValidator验证用户输入的邮政编码是否合法9、使用自定义验证控件验证用户的输入是否是偶数10、使用验证总结控件ValidationSummary，完成如下验证【实验要求】1、实验前根据实验内容复习相关章节。2、编写相应的程序，写出完整的程序代码，包括注释，注意书写的层次结构。3、调试程序，完成程序。4、整理实验步骤，总结经验和体会。5、上交实验报告和源程序。 实验三 表单和A内置对象【实验目的】 1、掌握控件、HTML的综合运用。2、掌握表单数据的提交和获取。3、掌握Request对象的常用方法。4、掌握Response对象的作用和常用方法5、掌握Application对象【实验内容】 1、创建WEB应用程序。2、制作用户注册页面，并实现验证功能。 用户名字段为必填，并且只能以字母开头，长度在618之间，只能包含字符、数字和下划线，正则表达式：a-zA-Zw5,17$ 密码，确认密码字段为必填，且必须一致，其它可根据需要设置一些规则，以下是常用密码验证正则表达式： (?=.7,)(?=(.*W)1,)(?=(.*d)1,)(?!(.*W)2,)(?!.20,)(?!.*s)a-zA-Z0-9!#$%&*-_=+?/;:.,*$(1)大于6且小于20个字符(2)必须包含一个特殊字符(3)至少包含一个数字(4)不能包含空格3、用户点击注册按钮后，在页面下方显示用户的注册信息4、Request对象获得浏览器信息： 你浏览器的版本是 操作平台是： 支持背景音乐？ 支持ActiveXControls吗？ 支持JavaApplets吗？5、Request对象获得机器信息 客户端浏览器信息： 客户端ip地址： 数据取得方式： MIME类型： 服务器的数据流量 客户端支持的字符编码方式： 网页在服务器的相对地址： 网页在服务器端的相对路径： 网页在服务器端的完整路径：6、Response对象向客户端输出数据（文本、HTML标签、客户端脚本）protected void Page_Load(object sender, EventArgs e) Response.Write(姓名：); Response.Write(input type=button value=欢迎点击！ onclick=alert(你好！); ); 7、Response.Redirect实现页面跳转8、制作网页计数器9、使用Application对象制作简单聊天室，并配置IIS服务器，在局域网中测试聊天室功能。参考：/show.asp?id=1544 【实验要求】1、实验前根据实验内容复习相关章节。2、编写相应的程序，写出完整的程序代码，包括注释，注意书写的层次结构。3、调试程序，完成程序。4、整理实验步骤，总结经验和体会。5、上交实验报告和源程序。实验四 ADO.NET应用基础【实验目的】1.掌握ADO.NET的基本技术。2.掌握ADO.NET的开发方法。 【实验内容】在集成环境中创建Web应用程序，综合数据存储技术和.NET技术，实现一个小型员工管理系统，并在Web服务器上进行配置和部署，要求考虑全面，能够充分考虑系统的特点。数据库软件可以使用ACCESS或SQL Server等。数据库设计参考部门表：部门编号、部门名称、成立时间科室表：科室编号、科室名称、部门编号员工表：编号、员工姓名、性别、电话、地址、科室编号查询页面实现运行效果：后台管理页面login.aspx员工信息管理页面【实验要求】实验前根据实验内容复习相关章节，设计出程序框架。编写相应的程序，写出完整的程序代码，包括注释，注意书写的层次结构。调试程序，完成程序。整理实验步骤，给出流程图，主要代码分析，总结经验和体会，以及其它必要说明。上交实验报告和源程序。实验五 Web数据库应用编程【实验目的】1、掌握SQL语句。2、掌握数据绑定技术3、掌握常用数据库编程相关控件：DataGrid、Repeater、DataList 等Web服务器控件。【实验内容】1、添加AccessDataSource控件,配置数据源，高级生成insert update delete语句以便实现增加，修改，删除功能。数据库字段参考：2、读取数据库中的数据并显示：添加GridView控件，选择数据源，以通过-编辑列或在代码中直接修改HeaderText的值，如HeaderText=“stu_id”为HeaderText=“学号”。修改后运行如下图所示：3、使用GridView控件实现分页功能：选中GridView控件启用分页。或设置GridView控件的属性AllowPaging=True“，默认每页显示10条数据，我们可以通过改变属性PageSize的值来改变每页显示的数据条数。分页效果如图所示：4、GridView控件实现修改功能：选中GridView控件启用编辑。 编辑列：5、GridView控件实现删除功能：选中GridView控件启用删除。改进：添加删除确认功能编辑列可用字段中选择TemplateField-添加-确定。在代码 中添加以下代码： 6、DetailsView控件实现添加功能添加DetailsView控件，选择数据源，设置DefaultMode=“Insert”，启用插入。可以通过-编辑字段或在代码中直接修改HeaderText的值为对应的中文。运行如图所示：改进：插入后显示在第一条修改AccessDataSource1中的语句SelectCommand=SELECT * FROM stu_info 为SelectCommand=SELECT * FROM stu_info order by stu_id desc 7、实现选中GridView时DetailsView显示值连动操作 GridView控件实现选定功能：选中GridView控件启用选定内容，或-编辑列-添加CommandField-选择-确定。 双击GridView控件，在GridView1_SelectedIndexChanged 方法中添加以下代码： DetailsView1.PageIndex = GridView1.SelectedRow.DataItemIndex; DetailsView控件设置属性DefaultMode=“ReadOnly”，启用分页，插入，编辑，删除。功能演示。注意：主键id的插入。【实验要求】1、实验前根据实验内容复习相关章节。2、编写相应的程序，写出完整的程序代码，包括注释，注意书写的层次结构。3、调试程序，完成程序。4、整理实验步骤，总结经验和体会。5、上交实验报告和源程序。实验六 基于Ajax的用户注册【实验目的】1.了解Ajax的开发模式2掌握Ajax的使用技巧【实验内容】1. 建立数据库和表；2. 实现Ajax重构；3. 设计用户注册页面（参看实验一）；4. 验证输入的有效性；5. 保存用户提交的组册信息；【实验要求】实验前根据实验内容复习相关章节，设计出程序框架。编写相应的程序，写出完整的程序代码，包括注释，注意书写的层次结构。调试程序，完成程序。整理实验步骤，给出流程图，主要代码分析，总结经验和体会，以及其它必要说明。上交实验报告和源程序。3实验七 制作留言本【实验目的】1.综合运用所学知识开发留言本程序。2.掌握实际项目的开发调试。3.掌握ASP.NET的配置和部署