中国矿业大学计算机学院2012 级本科生课程报告课程名称Web技术学生姓名周鹏学号08123336专业计科13-5班任课教师赵莹报告时间2015.11.12任课教师评语实验成果评价各实验成果评分成绩：任课教师签字：年月日目录实验一、静态web页面设计实验 (1)1.1、实验要求 (1)1.2、实验目的 (1)1.3、详细设计 (1)1.3.1、实验内容 (1)1.3.2、设计步骤 (1)1.4、设计心得 (2)实验二、动态web页面设计实验 (3)2.1、实验要求 (3)2.2、实验目的 (3)2.3、详细设计与编码 (3)2.3.1、实验内容 (3)2.3.2、设计步骤 (3)2.4、设计心得 (5)实验三、Web数据库实验 (6)3.1、实验要求 (6)3.2、实验目的 (6)3.3.1、实验内容 (6)3.3.2、设计步骤 (6)3.4、设计心得 (12)实验一、静态web页面设计实验1.1、实验要求1、使用HTML 5 开发Web静态页面。
按照HTML 5的规范设计与开发网站。
2、练习HTML 5的新HTML5新特性和效果。
3、练习使用Web页面开发工具。
（MyEclipse、Dreamwear、或其它）4、完成实验报告和实验成果。
1.2、实验目的1.配置Web(TOMCAT)服务器，了解Web工作原理。
2.熟悉常用HTML 5标记的含义，能够熟练使用这些标记设计静态Web页面，实现Web页面上的各种元素的合理布局，如表单、表格、图片以及框架等标记的使用。
3.了解 CSS样式表的定义和使用方法，能够使用CSS美化和布局Web页面。
4.掌握JavaSript脚本语言的基本语法。
5.能够使用JavaScript 与浏览器对象进行交互。
6.能够使用JavaSript处理表单和表单元素事件。
1.3、详细设计1.3.1、实验内容1.能够独立安装Web服务器,TOMCAT，理解Web服务器的常用配置，并利用其搭建网站，设计一组静态的网页，至少5个页面，其中包括1个注册页面。
2.利用CSS技术布局并美化页面。
3.使用JavaScript脚本对注册页面进行验证，防止错误数据输入。
4.使用一些JavaScript脚本实现网面部分内容的动态显示，加入时钟等（不限于此）。
1.3.2、设计步骤（1）搭建平台在搭建平台过程中，由于自己开始用Eclipse开发过简单的JSP，自己就首选了Eclipse，自己的Tomcat在开始是也都配置完成了，主要就是主题选用。
（2）主题选择在着手写网页之前，自己先构思一下，具体要以什么为主题，写一个什么风格的网页，最终决定写一个以矿大考研为主题的网页。
（3）网页搭建在开发中，因为开始开发JSP时只是很简单的功能，自己对HTML语法并不熟悉，在同学帮助下先，然后通过百度以及课件知识，一步一步往框架中添加各个元素，图片、链接、文本框等等，最终形成现在这个页面。
依照自己做实验过程，根据老师给的实验要求，将自己的这一流程记录而成。
1.4、设计心得在去年的课程里就接触过Eclipse，而通过本次实验，我对Eclipse又有了进一步的认识。
做了这次实验之后，我对各个网页的大体结构和HTML语法有了一定的了解，对于网页的页面的整体规划上也比开始好了很多。
实验二、动态web页面设计实验2.1、实验要求1.实验之前认真查阅相关资料，准备好实验方案。
2.认真实验，对实验过程、结果进行分析，注意验证实验效果。
3.完成实验报告和实验成果2.2、实验目的1、熟悉JSP的开发工具，掌握服务器端Web程序的工作原理2、熟悉JSP编译指令，动作标记3、熟悉JSP的隐含对象，正确理解request、session、application三个对象的作用域。
4、掌握编写JavaBean的方法，使用JSP <jsp:useBean>、<jsp:set Property>、<jsp:getProperty>3个动作指令。
5、掌握JSP中表单和表单Bean的映射。
2.3、详细设计与编码2.3.1、实验内容1、修改实验1中的静态页面，改为JSP页面。
2、依据注册页面，设计1个JavaBean并实现服务器端的验证，防止错误数据的录入。
3、使用session对象，实现登录、注销功能。
4、练习使用客户端跳转、服务器端跳转。
2.3.2、设计步骤（1）修改实验1中的静态页面，改为JSP页面。
（2）使用JSP技术设计Web页面，至少有5个页面，一定要能够体现JSP内置对象不同的作用域可在此页面进行多个页面的跳转了，例如跳转到注册页面用户注册和登录都是两个jsp跳转页面。
（3）在“实验一”的基础上，设计1个JavaBean实现注册页面服务器端的验证，防止错误数据的录入。
（4）使用session对象，实现登录、注销功能。
练习使用客户端跳转、服务器端跳转。
通过这次实验反复页面的跳转都是没有问题，可以容易实现客户端与服务器的跳转。
2.4、设计心得虽然对Eclipse有一定程度的了解，但是实验过程中还是遇到了很多困难，第二次实验用到了之前没接触过的tomcat，因此配置过程中遇到了不少麻烦。
实验期间，我经过学霸同学的帮助，好不容易完成了这个作业。
实验三、Web数据库实验3.1、实验要求1、实验之前认真查阅相关资料，准备好实验方案。
2、完成实验报告和实验成果3.2、实验目的1、掌握Servlet的开发、配置2、掌握Filter的开发与配置3、熟悉JDBC以及DAO的概念及工作原理4、能够熟练运用JDBC以及DAO模式对数据库进行访问，实现数据查询、添加、修改等常用操作。
3.3、详细设计与编码3.3.1、实验内容1、登录页面表单提交后转到Servlet进行处理，根据用户类型转到不同的页面。
2、请设计一种过滤器实现权限控制机制。
如果用户进入Web应用没有登录时，要求用户必须进行登录页面。
3、使用JDBC技术进行数据库的连接与访问。
4、采用DAO设计模式开发。
使用自己熟悉的网络数据库，设计一个小的系统（可以在之间的页面上实现），要求如下：至少包括2张数据表（字段数不少于4）；实现对2张表格的增、删、改、查操作。
具有不同类型用户的登录控制页面。
要求每一项操作对应与一张页面。
3.3.2、设计步骤（1）登录页面表单提交后转到Servlet进行处理，根据用户类型转到不同的页面。
当选择用户登录时，跳转到如下login.jsp页面：而选择管理员时，跳转到manage.jsp页面：其中的判断在servlet.java文件中实现，如下所示：（type是login.html中单选按钮的名称。
）Servlet.java中doGet方法跟doPost方法一样，实现功能是一样的。
Servlet 的配置如下所示：（并且实现了服务器中的编写代码的隐藏。
）（2）请设计一种过滤器实现权限控制机制。
如果用户进入Web应用没有登录时，要求用户必须进行登录页面。
以上是使用的过滤器中实现的doFilter方法，从该方法中可以看到，当传过来的type值为空时，就跳转到error.jsp中去，显示如下：并在7秒后重新跳到选择用户类型的界面。
（3）使用JDBC技术进行数据库的连接与访问由于用DAO模式开发，所以与数据库的连接放在DBC包下的DataBaseConnection 类下面。
如下面截图所示。
而访问则放在名叫DAO的包下的一个UserDao接口中，如下截图：并通过DAOimple包中的DAOimple类实现其具体的各个函数。
此处由于函数较多，就不截代码图了。
（4）采用DAO设计模式开发。
使用自己熟悉的网络数据库，设计一个小的系统（可以在之间的页面上实现），要求如下：至少包括2张数据表（字段数不少于4）。
以上是数据库现有的内容，接下来通过操作登录界面的增、删、改、查等操作，实现对数据库的修改。
实现对2张表格的增、删、改、查操作。
注册，也就是新增数据项的界面如下所示：以下是注册成功之后的提示界面：当看到上面提示界面后，在从控制台查看数据库中的内容，可以看到刚刚注册的数据已经被完整写入数据库中了。
如下面截图所示：至于查找、删除、修改等内容都是一样的效果，下面简单演示一下查找的显示情况：（从登陆界面中点击“查询某个账户信息”）跳转到如下界面，输入liaozhen 点击查询即可。
说明：常识性要求不要轻易将用户密码显示出来，所以以上信息屏蔽了密码的显示。
更新以及删除就不再一一演示了，需要说明的是，更新的时候，输入的用户名必须要是数据库中已经存在的，不然就会报错。
因为数据库中没有该项，何来的更新呢，所以，更新操作是无法完成更新用户名的，也是因为数据库中主码是用户名，要是用户名都改了，那就相当于新建了一个新的用户了。
具有不同类型用户的登录控制页面。
该项要求已经实现，详细见以上3.1 servlet的介绍。
要求每一项操作对应与一张页面。
该项要求从以下文件列表中即可看出，每个不同的操作，大致是先有一个html 文件做导航，之后一个jsp文件做实际操作。
3.4、设计心得做完这第三次也是最后一次实验，我对基本的web开发有了更深的理解，也更加熟悉了servlet和filter的用法，从而使编程内容更加简洁。
而这次实验通过DAO模式进行了代码的归一编写，我也更加了解了数据库的整体结构。