web应用程序开发实验指导书.doc

Web应用程序开发上机指导书（第1版）主编 迟增晓山东交通学院计算机应用教研室2010年11月目 录实验一 配置JSP环境与入门示例程序1实验二HTML语言3实验三 JSP和Web页面的交互4实验四 JSP的页面元素6实验五Request对象与Response对象9实验六Session对象与Application对象12实验七 JSP连接数据库15实验八JSP连接数据库（续）18实验九 使用JavaBean连接数据库19实验十 简易留言板程序21在第一题的基础上，添加如下要求，如有冲突，以下面的要求为准：21实验十一Servlet22实验十二 文件的上传与下载24实验十三 JSP分页26实验十四 综合应用实例29实验十五 综合应用实例（续）30实验一 配置JSP环境与入门示例程序一、实验目的1、掌握JSP运行环境的配置方法2、初步体验JSP程序二、实验内容1、安装tomcat我们以tomcat5.5.0为例，介绍如何安装Tomcat。在安装tomcat前确保已经正确安装了JDK（本实验中我们采用JDK 1.5.0）。和其他应用软件的安装相似，一路确定直到出现如图所示界面，在Connector Port 后输入你希望Tomcat 所使用的端口（特别注意：如果您机器上安装了oracle，应为Tomcat 指定8080以外的端口，否则二者将出现冲突，影响Tomcat的正常使用），根据需要设置您的User Name和Password（在使用manager对目录管理时需要输入此时设置的User Name和Password）Tomcat安装完成后，单击开始菜单中的“Apache Tomcat5.5”“Monitor Tomcat”启动Tomcat，在浏览器地址栏中输入地址：http:/localhost:8080，此时若出现Tomcat的欢迎界面，说明Tomcat安装成功。2、配置工作目录（1）在webapps目录下配置工作目录在Tomcat安装目录下的webapps目录下新建自己的程序目录myjsp。将webappsroot目录下的WEB-INF连同其下的文件一起拷至myjsp下。在myjsp下编写你的第一个JSP文件myfirst.jsp。内容如下：在浏览器地址栏中输入地址：http:/localhost:8080/myjsp/myfirst.jsp进行访问。（2）在其他位置配置工作目录在webapps目录外任何你需要的地方（如E盘根目录）新建自己的程序目录myjsp。将webappsroot目录下的WEB-INF连同其下的文件一起拷至myjsp下。将刚刚编写的myfirst.jsp文件拷至该目录下。打开webapps-conf目录下的server.xml在标记之间添加如下代码：注：上条语句一定要注意大小写，更改了配置文件server.xml后一定要重启tomcat服务。/test处可换成任意自己想要的名字，docBase后面跟的是你的程序目录的物理路径。在浏览器地址栏中输入地址：http:/localhost:8080/test/myfirst.jsp进行访问。实验二HTML语言一、实验目的1、熟悉使用HTML语言编写静态网页文件的步骤2、掌握以等HTML语言标记的用法3、了解JavaScript脚本语言的简单用法二、实验内容1、使用HTML语言制作一美化边框了的课程表关键代码： /black为表格边框的颜色 AB 第二节 2、利用JavaScript实现一个对客户端表单进行验证的页面。在该页面中，可以对需要输入的各种信息进行验证。如果客户忘记输入相关内容，该页面会给出相应的提示。关健知识：在中编写函数，在按钮的onClick方法中调用该函数。实验三 JSP和Web页面的交互一、实验目的1、熟悉文本框、列表框、复选框、单选按钮的使用。2、掌握request.getParameter和out.print的用法，以及利用它们实现JSP和Web页面之间交互的方法。3、掌握利用request.getParameter获取表单传值时的中文问题的解决办法4、掌握滚动文本框中的换行显示问题的解决办法。二、实验内容1、制作一个简单的HTML文件，其中包含一个表单，在表单中有两个文本框以及两个按钮。效果如图：在文本框中分别输入姓名和兴趣后单击“提交”按钮，在后台jsp文件中，使用request.getParameter(String value)获取客户端提交过来的信息。界面显示效果如图：关键代码：文件名称：03.htm请输入姓名：您的兴趣：文件名称：03.jsp%String nn = request.getParameter(myname); String vv = request.getParameter(love); out.println(Your name is: + nn + );out.println(Your love is: + vv);%2、在上题的基础上解决输入中文时的乱码问题。在03.jsp中加入如下两条代码：3、在第一题基础上添加一滚动文本框，添加后的效果图如下：此时如在滚动文本框中输入多行文本，点击“提交查询内容”后，这些信息会显示在一行，解决办法是将多行文本框中的换行符号（“n”）替换成HTML的换行符号“”。关键代码：%request.setCharacterEncoding(GBK);String memo=request.getParameter(“Memo”);memo.replaceAll(“n”,”);out.println(memo);%4、自己设计实现一个综合实例，其中的HTML文件包含文本框、列表框、单选按钮、复选框等多种HTML元素，并实现和后台JSP页面之间的交互。实验四 JSP的页面元素一、实验目的1、了解两种JSP代码的使用方法2、掌握page和include指令的用法3、掌握jsp:include、jsp:forward、jsp:param、jsp:useBean动作的使用方法二、实验内容1.编写jsp文件test.jsp，要求在中编写函数add(int x,int y)实现两个整数加法运算，并在中调用该函数。关键代码：2、使用include指令实现页面导航功能。3、编写select.htm文件，显示效果如图4-3-1。用户从下拉列表框中选择对应的选项后单击“提交查询内容”。当选择model1提交时，页面会自动跳转到j1.jsp，显示效果如图4-3-2所示。当用户选择model2提交时，页面会自动跳转到j2.jsp，同时传递“tom”给j2.jsp中的变量name，显示效果如图4-3-3所示。图4-3-1图4-3-2图4-3-3参考代码：共涉及四个文件,select.htm,，control.jsp，j1.jsp，j2.jsp。各文件的关键代码如下。文件名称：select.htm请选择模块：model1model2文件名称：control.jsp文件名称：j1.jspj1.jsp文件名称：j2.jspthis is j2.jsp,hello 实验五Request对象与Response对象一、实验目的1、进一步熟悉out对象的使用。2、掌握Request对象与Response对象的常用方法的使用。二、实验内容1、编写jsp文件，使用out对象输出一个特殊效果的表格。效果如图5-1-1：图5-1-12、编写文件formjsp1.jsp，当请求这个页面时，出现如图所示效果。用户输入了相应的信息后，单击“提交”按钮，信息便提交给页面本身进行处理。效果如图所示。关键代码：% request.setCharacterEncoding(GBK);if(request.getParameter(Send) = null) out.println(); out.println(); out.println(姓名：); out.println(兴趣：); out.println(); out.println();else out.println(); out.println(request.getParameter(Name) + 欢迎您，您喜欢的计算机学科是 ); out.println(request.getParameter(Love) + !); out.println();%注：也可把HTML中的固定标记都提取出来，只有需要动态生成的内容才放在JSP的“”标记中。关键代码如下： 姓名： 兴趣： 欢迎您，您喜欢的计算机学科是 !3、自行编写程序，验证request.form和request.queryString的使用，并使用response对象的write方法输出相关信息。实验六Session对象与Application对象一、实验目的1、掌握Session对象与Application对象的常用方法的使用。2、了解cookie对象的使用。二、实验内容1、编写文件session.jsp，使用session对象实现简易购物车。在session.jsp中，session对象使用属性“shop”和“price”保存了“主板”和“100”，首次访问时其页面显示效果如图6-1-1，单击session.jsp超链接，显示效果如图6-1-2所示。图6-1-2图6-1-1 关键代码：% / 初始化if(session.getAttribute(flag) = null) session.setAttribute(flag,ok);session.setAttribute(shop,);session.setAttribute(price,);session.setAttribute(shop,session.getAttribute(shop)+主板,);session.setAttribute(price,session.getAttribute(price)+100,);out.println(session.getAttribute(shop) + );out.println(session.getAttribute(price) + );%session.jsp2、请使用application对象编写一个简单的网页计数器。关键代码参考：您是第位来客3、编写jsp文件visittimes.jsp，使用cookie对象记录用户登录次数。当首次登陆时，界面上弹出一个小窗口，显示“欢迎首次光临”信息，如图6-3-1所示。当再次访问时，界面弹出同一个小窗口，提示“您已经光临了1次”的信息，如图6-3-2所示。图6-3-2图6-3-1 关键代码：%int Counter = 0;/ 得到所有的CookieCookie cookies = request.getCookies();if(cookies != null) for(int i=0; i注：cookies对象不能单独使用，cookie的读取必须和request对象结合，cookie的写入必须和response对象结合。%if(Counter = 0) out.println();out.println(alert(欢迎首次光临！);out.println();else out.println();out.println(alert(您已经光临了 + Counter + 次);out.println();%4、使用cookie对象时中文问题的解决办法。在课本cookie.jsp的基础上，做如下改动即可解决中文乱码问题。（1）引用包。将第一行代码改为：或在原来第一行代码后添加一行：（2）在写入cookie时用URLEncoder.encode进行编码操作。将Cookie c=new Cookie(“Name,”pNmae)中的pName改为URLEncoder.encode(pLove)。（3）在读取cookie时用URLDecoder.decode进行解码操作。将pName=cookiesi.getValue();改为pName=URLDecoder.decode(cookiesi.getValue();同上，对pLove变量做（2）、（3）步的操作。实验七 JSP连接数据库一、实验目的1、熟悉在JSP页面中连接数据库的基本方法2、掌握JSP中连接access数据库和sql server 2000数据库的具体操作。二、实验内容1、编写jsp文件，实现从Access数据表news中取出所有数据并在窗口中显示的功能。显示效果如下图：（1）使用jdbc-odbc访问access创建access数据库test.mdb,并在数据库中创建news表。表结构如下：创建成功后，在该表中插入几条测试数据。配置一个odbc数据源，操作步骤：单击“开始”-“设置”-“控制面板”-“管理工据”-“数据源（ODBC）”，选择“系统DSN选项卡”，然后单击“添加（D）”按钮，选择驱动程序类别为Microsoft Access Driver（*.mdb），单击“完成”。输入数据源名称（由程序设计者自己命名，此处我们输入jspdata），选择Access数据库所在的目录。编写jsp文件accessodbc.jsp。关键代码：数据表中记录如下编号标题内容作者日期（2）不用配置odbc数据源，使用jdbc-odbc访问access不用配置odbc数据源，将上述accesodbc.jsp中的代码Connection con = DriverManager.getConnection(jdbc:odbc:jspdata);改为下面的代码：String url=jdbc:odbc:driver=Microsoft Access Driver (*.mdb);DBQ=F:/jsp/test.mdb; /注意修改DBQ后的路径2、使用sql server数据库实现上题同样的效果。在sql server 2000中创建数据库testdb，在testdb数据库中创建news表。表结构参考上题。连接数据库的关键代码：注：上面使用的是没有配置ODBC数据源连接SQL Server的方法，此外还可以用配置ODBC数据源的方式实现对SQL Server数据库的访问。实验八JSP连接数据库（续）一、实验目的1、进一步熟悉JSP连接数据库的操作。2、熟悉JSP综合系统的实现流程。二、实验内容1、在JSP页面中连数据库实现用户管理系统。要求：（1）有管理员和普通用户两类用户（2）管理员登录后能够进行添加、审核、删除普通用户，重置用户密码等操作。（3）普通用户能够注册，修改个人信息。（4）普通用户注册后通过管理员审核方可登录。（5）用户在登录时需要有简单的表单验证功能。2、在JSP页面中连数据库实现其他自选小系统。功能自定。以上两题，自选其一实现。实验九 使用JavaBean连接数据库一、实验目的1、掌握JavaBean的基本使用方法2、掌握利用JavaBean连接数据库的方法二、实验内容1、使用JavaBean连接sql server数据库，实现上节实验的效果。（）编写conn.java，并编译生成conn.class。package sqlserver;import java.sql.*;public class sqlserString strDBDriver = sun.jdbc.odbc.JdbcOdbcDriver;String strConnStr = jdbc:odbc:Driver=SQL Server;Server=;Database=testdb;ResultSet rs = null;public sqlser()tryClass.forName(strDBDriver);catch(java.lang.ClassNotFoundException e)System.err.println(e.getMessage();public ResultSet executeQuery(String sql)tryConnection conn=DriverManager.getConnection(strConnStr,sa,); Statement stmt = conn.createStatement(); rs = stmt.executeQuery(sql);catch(SQLException ex)System.err.println(ex.getMessage(); return rs; （2）在工作目录下的WEB-INFclassess下新建sqlserver文件夹，之后将conn.class 拷贝至sqlserver中。注：若WEB-INF下没有classess文件夹，则新需建一个。 在classes下新建的文件夹名称需和conn.java中package后的包名保持一致。比如：若conn.java中的语句是package ，则需在classess下新建文件夹conn，在conn下再建sql文件夹，在sql下再建com文件夹，之后再将conn.class拷贝至com文件夹下。（3）编写访问javabean的jsp文件conn_sql.jsp。关键代码：2、使用JavaBean连接access数据库，实现上节实验的效果。（同上，略）3、拓展题：使用JavaBean保存用户购物信息。运行carts.html页面显示效果如图9-3-1，用户可以从列表框中选择自己感兴趣的CD，然后可单击add按钮进行添加，单击remove按钮进行删除操作。页面显示效果如图9-3-2。 图9-3-2图9-3-1实验十 简易留言板程序一、实验目的1、进一步熟悉使用JavaBean连接数据库的操作2、通过实例练习，锻炼学生调试Jsp文件的综合能力。二、实验内容1、使用JavaBean连接数据库，实现简易留言板程序。（1）后台数据库任选（2）访客也可以留言（3）留言后自动跳转到留言信息显示的页面。（4）界面尽量美观。（5）各页面之间跳转流畅。2、拓展要求（选做）。在第一题的基础上，添加如下要求，如有冲突，以下面的要求为准：（1）只有注册用户才可以留言。留言时可选择是公开留言还是悄悄话。（2）管理员通过密码登录后，可以对留言进行回复。（3）用户使用原来的用户名登录后可以看到管理员的回复。（4）访客可以查看普通注册用户的公开留言，但是不可以查看管理员的回复。（5）除留言人和管理员外，其他用户不能查看留言时选择为悄悄话的留言。（6）添加其他你认为是有必要的功能。实验十一Servlet一、实验目的1、掌握servlet的基本使用方法。2、掌握servlet与Web页面间信息的交互。二、实验内容1、编写一个简单的Servlet程序，程序运行结果如图11-1所示。图11-1（1）编写Servlet文件SimpleServlet.java。（2）将SimpleServlet.java编译生成SimpleServlet.class，并将其拷贝至你的工作目录WEB-INFclasses目录下。（2）配置Servlet运行环境。找到你的工作目录WEB-INFweb.xml，在其中添加如下代码后，重启tomcat服务。 Test Test A test Servlet SimpleServlet Test /Test /此处为在地址栏中访问该Servlet程序时需输入的路径（3）在地址栏输入http:/localhost:8080/jsp/Test（此处的Test应于上步中url-pattern后的名字保持一致），即可实现对该Servlet程序的正常访问。2、创建一个HTML页面，其显示效果如图11-2所示，编写与HTML页面交互的Servlet，显示从HTML页面中得到的用户名和兴趣。图11-2（1）编写TestServlet.htm文件。关键代码：/注意此处课本有误（2）编写TestServlet.java文件并编译生成TestServlet.class，并将其拷贝至classes下。（3）参照上题进行Servlet的配置。（4）在地址栏输入地址浏览TestServlet.htm，在图11-2所示的页面中输入信息后，点击“提交查询内容”以查看显示结果。3、拓展题：用Servlet实现上章所讲留言板。实验十二 文件的上传与下载一、实验目的1、掌握jspSmartUpload组件的基本使用方法。2、能够使用jspSmartUpload组件编程。二、实验内容1、使用jspSmartUpload组件编写一个简单的JSP页面，实现文件的上传与下载。主要类的介绍：File类：用于保存单个上传文件的相关信息，如上传文件的文件名、文件大小、文件数据等。Files类：存储了所有上传的文件，通过类中的方法可获得上传文件的数量和总长度等信息。Request类：因为当Form表单用来实现文件上传时，通过JSP的内置对象request的getParameter()方法无法获取其他表单项的值，所以提供了该类来获取。SmartUpload类：用于实现文件的上传与下载操作。（1）安装与配置：将准备好的jspSmartUpload JAR包复制到项目WebRoot根目录下的WEB-INF目录的lib目录中。如果是在myeclipse下，则将smartUpload包放到src下合适的位置。（2）为表单添加属性“enctype”，其属性值为“multipart/form-data”（3）在页面中编写调用类的相关方法。参考代码如下：在获取表单元素时需要使用SmartUpload对象的getParameter()方法，而不是直接直接通过request获得，如下所示：实验十三 JSP分页一、实验目的1、掌握JSP分页的原理。2、掌握JSP分页的实现。二、实验内容1、编写程序实现分页显示功能。（1）创建数据库及访问数据库的JavaBean，配置ODBC数据源，此处数据源起名为student。文件名称：conn.javapackage student;import java.sql.*;public class connString sDbDriver=sun.jdbc.odbc.JdbcOdbcDriver;String sConnStr=jdbc:odbc:student;Connection connect=null;Statement stmt=null;ResultSet rs=null;public conn()tryClass.forName(sDbDriver);catch(java.lang.ClassNotFoundException e)System.err.println(e.getMessage(); public ResultSet executeQuery(String sql)tryconnect=DriverManager.getConnection(sConnStr);Statement stmt=connect.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);rs=stmt.executeQuery(sql); catch(SQLException e)System.err.println(e.getMessage();return rs;注：stmt=connect.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);这条语名中createStatement的第一个参数一定得是ResultSet.TYPE_SCROLL_INSENSITIVE。否则下面将无法用absolute()进行记录的定位。（2）将编译后的conn.class拷至class