WEB程序设计实验指导书.docx
- 文档编号:30700479
- 上传时间:2023-08-19
- 格式:DOCX
- 页数:37
- 大小:335.14KB
WEB程序设计实验指导书.docx
《WEB程序设计实验指导书.docx》由会员分享,可在线阅读,更多相关《WEB程序设计实验指导书.docx(37页珍藏版)》请在冰豆网上搜索。
WEB程序设计实验指导书
WEB程序设计
实验指导
南昌大学计算机科学与技术系
2009年7月
前言
WEB程序设计是计算机专业的一门指导性选修课,主要介绍WEB程序设计的方法和技术。
使学生掌握页面设计与制作、WEB编程以及建立动态网站所需的多项技术。
WEB程序设计是一门实践性非常强的课程。
该实验指导从大纲出发,并结合当前WEB程序设计技术的发展形势,依据循序渐进、由浅入深的规律,指导学生进行实践和操作。
通过实践操作环节,让学生巩固并掌握本课程所讲述的程序设计方法和技术,并最终达到能够独立编写WEB程序的能力。
通过上机实验,并在实验后完成实验报告,又能进一步加深和拓宽所学知识。
本实验指导书指导学生的实践环境为Windows2000,所选的WEB程序开发语言为JSP。
本书所提供的参考程序均在以上环境通过调试运行。
目录
实验1WEB程序运行环境配置
实验2页面设计与HTML的使用
实验3层叠样式表CSS的应用
实验4客户端脚本语言的使用
实验5WEB编程语言语法基础
实验6内置对象的应用
实验7数据库编程技术
实验8JavaBean的应用
实验9JSP和Servlet
实验10JSP和XML
实验1WEB程序运行环境配置
一、实验目的
1、掌握JSP程序运行环境的配置过程;
2、理解JSP程序的运行原理。
二、实验内容
1、JSP程序运行环境配置。
本实验采用Windows2000Server+JDK+Tomcat。
2、修改WEB服务端口和网站的根路径。
三、实验要求
1、掌握JSP程序运行环境配置的基本要求。
四、实验环境
硬件环境:
PC微机
软件环境:
WindowsXP或者Windows2000操作系统
五、实验步骤
1、进入网址,下载windows版本的JDK程序j2sdk-1_4_2_03-windows-i586-p.exe。
2、安装下载的JDK程序。
注意其安装路径,这里假定安装路径为C:
\j2sdk1.4.2。
3、接下来需要配置一些环境变量。
右键单击“我的电脑”,在弹出菜单中选择“属性”,进入“高级”中的“环境变量”;新建一个系统变量JAVA_HOME,其值设为C:
\j2sdk1.4.2;又新建一个系统变量CLASSPATH,其值设为.;%JAVA_HOME%\lib;修改系统变量PATH的值,在原值基础上加上%JAVA_HOME%\bin;。
4、接下来简单地测试一下JDK的安装与环境变量设置是否正确。
先编写一个简单的Java程序存放在C:
\下,然后运行cmd命令,进入系统的命令行方式,在命令行C:
\>下,用java和javac两个命令编译和运行所编写的Java程序,如果成功运行,说明整个Java运行环境配置正确。
附:
简单的Java程序Hello.java
importjava.io.*;
publicclassHello{
publicstaticvoidmain(Stringargs[]){
System.out.println("HelloWorld");
}
}
5、进入网址http:
//jakarta.apache.org/tomcat/index.html,下载其最新的Tomcat程序jakarta-tomcat-5.0.16.exe。
6、安装下载的TomcatV5.0.16程序。
选择一个安装路径,这里假定安装路径为C:
\Tomcat5.0,其他设置可用安装程序的默认设置。
7、安装完后启动tomcat。
启动成功后,任务栏的托盘处可见一含有绿色三角标记的ApacheTomcat图标。
8、在浏览器地址栏输入http:
//localhost:
8080,如果看见图1-1的界面,说明JSP运行环境配置成功。
9、准备修改服务端口和网站的根路径。
在实际应用中,一般需要更改这两个基本配置,修改这两个配置均在Tomcat安装目录下的conf子目录下的server.xml文件中。
修改前请备份好server.xml文件。
10、修改服务端口。
用记事本或其他文本编辑器打开server.xml文件,定位到93行,将94行的“8080”修改为需要的端口号,如“8090”。
重新启动Tomcat,在浏览器地址栏输入http:
//localhost:
8090,可见类似图1-1的界面,说明端口修改成功。
图1-1Tomcat的欢迎界面
11、修改网站的根路径。
首先在C盘创建站点目录jsproot,并在其下创建ROOT子目录,在ROOT目录之下创建WEB-INF子目录,注意,JSP对目录是区分大小写的。
12、然后打开server.xml,找到第215行的根目录的配置信息,其中appBase属性设置了当前的网站目录对应服务器物理路径地址,如图1-2所示。
图1-2根路径的配置信息
13、将215行的appBase修改成所需的网站根路径,如“C:
\jsproot”,修改完后如图1-3所示。
图1-3修改后的根路径信息
14、接下来创建一个1.jsp程序,存放在C:
\jsproot\ROOT目录下,其代码如下:
<%
out.print(“Hello,JSPWorld!
”);
%>
15、重新启动Tomcat服务器,在浏览器中输入http:
//localhost:
8090,将看到如图1-4所示界面。
图1-4更改根路径信息后的目录浏览
16、在浏览器中输入http:
//localhost:
8090/1.jsp,将看到如图1-5所示界面。
图1-5程序运行结果
17、为以后的实验能顺利进行,恢复备份的server.xml。
六、实验报告要求
1、需要提供安装过程中设置的数据,如安装路径等。
2、安装后修改数据后运行的若干截图。
七、思考题
1、输入http:
//localhost:
8080时所看见的页面是哪个程序?
输入http:
//localhost:
8090地址时,访问的又是哪个物理地址的页面?
2、除了目前这种运行环境可以满足JSP程序运行需求,还有什么其它的运行环境?
简要地介绍一二。
实验2页面设计与HTML的使用
一、实验目的
1、掌握页面设计的基本技巧;
2、掌握使用HTML语言制作静态页面的技术;
3、了解网站的基本建立过程;
4、掌握使用Frontpage或者Dreamweaver制作网页的基本技术。
二、实验内容
1、简易静态网站页面设计与制作。
围绕某一主题设计站点页面,并使用HTML制作。
2、框架网页制作(可选)。
创建一个目录页面和一个目录型框架页面,该目录框架能够装载上面制作的所有页面。
三、实验要求
1、了解站点风格的概念;
2、理解主页、栏目页、导航条、目录框架等术语;
3、熟悉HTML的常用标记使用以及框架网页的制作;
4、掌握使用Frontpage或者Dreamweaver制作网页的基本技术;
5、实验前应该先选定所要创建网站的主题(如:
个人网站、自我推荐网站、班级网站、某种专题网站等)和风格;
6、围绕主题和风格,设计站点的主页、栏目及其内容,并且设计出主页和栏目页面的布局;
7、准备好网页制作时所需的资料以及图片等素材。
四、实验环境
硬件环境:
PC微机
软件环境:
Windows操作系统、文本编辑器(UltraEdit、EditPlus、Notepad等)或者Frontpage或者Dreamweaver
五、实验步骤
1、选定简易网站的主题和风格,围绕主题和风格,设计好站点主页和栏目页面的布局,准备所需资料和素材。
2、创建目录XXX_yy作为该站点目录(其中XXX为学号,yy为站点主题名字),并在其中创建一个images子目录,且将准备好的图片等素材拷贝到images里。
注意,所有目录、页面、素材等名称均不要用中文命名,可采用英文单词或者拼音的命名方式。
3、在XXX_yy站点目录下,按照事先的设计,制作出站点主页index.htm(注:
主页中必须有站点的导航条),以及若干个栏目页面(至少两个子栏目),要求所制作的页面,综合起来后必须使用到标题、表格、列表、图片、段落、超链接这些HTML的常用标记。
4、浏览index.htm,点击导航条中的超链接,观察结果。
5、在XXX_yy站点目录下,制作一个目录页面catalog.htm(注:
把导航条置于目录页面中)。
6、接下来再制作一个目录型的框架页面main.htm,该框架页面可采用上下结构,也可采用左右结构,并且该框架页面必须能够装载目录页面、主页和所有的栏目页面。
7、浏览main.htm,点击目录页面中的超链接,观察结果。
六、实验报告要求
1、描述站点主题、风格以及栏目设计思想。
2、主页面index.htm、框架页面main.htm(可选)的源码清单。
3、页面浏览的若干截图。
七、思考题
1、理解站点风格对页面设计有没有帮助?
为什么?
2、制作页面时,按照设计对页面进行布局可以采用什么方法?
实验3层叠样式表CSS的应用
一、实验目的
1、掌握页面加载CSS的三种方式;
2、掌握CSS美化页面的技巧;
3、了解运用CSS统一站点风格的技巧;
4、掌握使用Frontpage或者Dreamweaver制作以及应用CSS的技术。
二、实验内容
1、页面加载CSS的三种方式。
通过制作一个网页,其中用到三种CSS的加载方式,来掌握页面应用CSS的技术。
2、应用CSS美化网页统一站点风格。
制作两种风格的样式表,一种应用到站点主页,一种应用到站点栏目页面。
三、实验要求
1、实验前简单设计出网站页面的色彩风格,要求主页使用一种风格,其它子栏目使用另一种风格,并围绕所设定的风格,准备所需的素材;
2、理解外部样式表、嵌入式样式表以及内联式样式的概念;
3、本实验建立在实验二的基础上,必须事先将实验二制作的站点页面准备妥当。
四、实验环境
硬件环境:
PC微机
软件环境:
Windows操作系统、文本编辑器(Notepad、editplus等)或者Frontpage或者Dreamweaver
五、实验步骤
1、进入XXX_yy站点目录,创建test子目录。
2、在test子目录下,新建一个页面css3.htm,在该页面中插入一个3行1列的表格,其中表格的第一行输入文字“应用外部样式”,第二行输入文字“应用嵌入式样式”,第三行输入文字“应用内联式样式”。
3、在test子目录下,新建一个外部样式表文件style.css,该样式表中定义一个名为firststyle的类选择符,其样式为字体黑体、24磅、色彩#CC0000、段落格式居中、背景色#ECECEC。
将css3.htm页面中表格第一行单元格应用style.css外部样式表中的样式firststyle。
4、接下来在css3.htm页面中加入嵌入式样式表,该样式表中定义一个名为secondstyle的类选择符,其样式可以参照firststyle来自行设计,但注意不能一样。
将css3.htm页面中表格第二行的单元格应用嵌入式样式表中的样式secondstyle;
5、最后,对于css3.htm页面中表格第三行的单元格应用内联式样式,其样式参照前面自行设计,但注意不能一样。
图3-1css3.htm参考效果图
6、在XXX_yy站点目录下,将准备好的素材拷贝到images子目录。
7、打开站点主页index.htm,在页面中加入嵌入式样式表,样式表中定义的内容必须包括网页的背景色、背景图片(可选)和前景色,表格单元格的各种样式定义,超链接不同状态时的样式,其它样式(如滚动条)依据自己喜好选择,所定义的样式则依据所设计的主页风格,最后根据需要修改部分页面代码,使得页面能够应用这些样式。
8、新建一个外部样式表文件cata.css,该样式表将依据所设计的栏目页面风格来定义样式,样式表所要定义的内容参照上一条中的规定,并最终将该样式应用于各个栏目页面。
9、浏览主页、栏目页面,观察结果。
六、实验报告要求
1、描述站点色彩风格的设计思想。
2、style.css,css3.htm,cata.css,index.htm中的嵌入式样式表的源码清单。
3、应用样式表后页面浏览的若干截图。
七、思考题
1、如何统一站点的风格?
2、如果外部样式表和嵌入式样式表对某一元素都有样式定义,那么该元素该应用哪种样式?
实验4客户端脚本语言的使用
一、实验目的
1、掌握客户端脚本编程的方法;
2、熟悉JavaScript脚本语言的语法;
3、理解事件、浏览器对象层次和DOM模型。
二、实验内容
1、验证表单的有效性。
制作一个表单,在表单数据提交给服务器之前,由客户端脚本程序来验证用户数据输入的有效性。
2、给主页添加系统当前日期时间显示(可选)。
显示的时间可以按秒跳动。
三、实验要求
1、熟悉JavaScript脚本语言语法;
2、理解事件、浏览器对象层次和DOM模型。
四、实验环境
硬件环境:
PC微机
软件环境:
Windows操作系统、文本编辑器(Notepad、editplus等)或者Frontpage或者Dreamweaver
五、实验步骤
1、进入XXX_yy目录下的test子目录,创建一个form.htm网页,在该网页中制作一个用户注册表单,表单内容包括用户名、密码、确认密码、电子邮件地址等表单项。
2、在该网页中编写JavaScript脚本程序。
该脚本在用户提交表单时运行,用来验证以下内容:
①用户提交的用户名、密码和电子邮件地址表单项不得为空,②用户名长度不能小于6个字符以及大于20个字符,③密码和确认密码必须相同,④电子邮件地址中应该包含’@’字符。
如果出现不满足上述条件的错误,则弹出对话框告知错误信息,否则跳转到表单提交成功的页面。
3、创建表单提交成功的页面success.htm。
4、浏览form.htm页面,往表单输入正确数据以及有错误的数据,观察不同的运行结果。
5、进入XXX_yy目录下,打开index.htm网页,设计在网页的适当位置显示系统当前日期时间。
日期星期和时间要求以指定格式显示,如“2005年9月2日星期五02:
30:
06”。
根据上述设定和要求在页面中编写JavaScript脚本程序以及修改页面。
注意时间是按秒跳动的。
6、浏览index.htm页面,观察结果。
六、实验报告要求
1、form.htm源码,index.htm主页中显示时间的脚本源码清单(可选)。
2、页面浏览的若干截图。
七、思考题
1、客户端脚本程序的运行机制是怎样的?
2、网页嵌入脚本语言的方式有哪三种?
并举例说明。
实验5WEB编程语言语法基础
一、实验目的
1、理解JSP程序的运行机制;
2、掌握JSP注释、JSP指令、JSP动作和JSP脚本元素等基本语法。
二、实验内容
1、显示服务器端和客户端时间。
2、根据提供的代码调试程序。
理解JSP各种元素的使用。
三、实验要求
1、理解JSP程序的运行机制;
2、重点掌握以下JSP元素:
●HTML注释、隐藏注释、Java注释
●page指令、include指令
● include>动作、 forward>动作、 param>动作 ●声明、表达式、Scriptlet 四、实验环境 硬件环境: PC微机 软件环境: Windows操作系统、JDK1.3+Tomcat、文本编辑器(Notepad、editplus等)或者Frontpage或者Dreamweaver 五、实验步骤 1、在Tomcat安装目录下的webapps子目录下,创建一个jsp子目录,并在jsp子目录下创建一个WEB-INF子目录(注意大小写)。 2、进入jsp子目录,编写一个简单的JSP程序cstime.jsp,要求程序中既能显示服务器端时间,也能显示客户端时间。 3、在jsp子目录下,输入下面所附的login.jsp、login_check.jsp、footer.jsp、welcome.jsp四个文件的源码,然后在浏览器地址栏中输入http: //localhost: 8080/jsp/login.jsp,观察浏览页面的结果,并分析login.jsp和login_check.jsp两个程序。 六、实验报告要求 1、给出cstime.jsp程序代码清单。 2、给出login.jsp和login_check.jsp两个程序的分析结果。 3、程序运行后的若干截图。 七、思考题 1、请解释<%@pageinclude%>、<%@include%>、 include>三者之间的本质区别。 2、观察成功登陆后,welcome.jsp页面中是否有乱码,如果有,试着用多种方法解决这个问题,并解释出现乱码的原因以及解决乱码问题的道理。 附: 程序源代码 ===程序(login.jsp)=== DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"> <%@pagelanguage="java"contentType="text/html;charset=gb2312"%> <%@pageinfo="一个简单的登陆程序"%> <%--登陆界面--%> 用户登录
Pleaseinputyourname | |
Pleaseinputpassword |
includepage="footer.jsp"/> ===程序(login_check.jsp)=== <%@pagecontentType="text/html;charset=gb2312"%> <%! StringgetDate() {returnnewjava.util.Date().toLocaleString(); } %>
--这是是一个典型的JSP,它包含了JSP中常用的各种元素-->
<%--进行登陆检查--%>
<%
Stringname=request.getParameter("name");
Stringpassword=request.getParameter("password");
//if验证通过,forward-->welcome.jsp
//elseforward-->login.jsp
if(password.equals("jspuser"))
{
%>
forwardpage="welcome.jsp"> paramname="user"value="<%=name%>"/> paramname="time"value="<%=getDate()%>"/> forward> <% }else{ %> forwardpage="login.jsp"> paramname="user"value="<%=name%>"/> forward> <%}%> ===程序(welcome.jsp)=== <%@pagecontentType="text/html;charset=gb2312"language="java"%> 恭喜你于<%=request.getParameter("time")%>时刻登陆成功! 欢迎你,<%=request.getParameter("name")%>! <%@includefile="footer.jsp"%> ===程序(footer.jsp)=== 《WEB程序设计实验指导》 --pageend--> 实验6内置对象的应用 一、实验目的 1、掌握request、response、session、application、out等内置对象的使用。 二、实验内容 1、制作简易聊天室。 能够实现简单的聊天功能。 2、制作网页计数器。 要求相同的窗口内刷新页面访问次数并不增加,并且用图片来显示数字。 (注: 以上内容1、2中任选一题) 3、制作简易购物车。 要求有两个购物页面,可以查看购物车,选购的物品自行定义。 三、实验要求 1、熟悉request、response、session、application、out等内置对象; 2、选择制作网页计数器程序需准备数字图片; 3、理解购物车概念。 四、实验环境 硬件环境: PC微机 软件环境: Windows操作系统、JDK1.3+Tomcat、文本编辑器(Notepad、editplus等)或者Frontpage或者Dreamweaver 五、实验步骤 1、进入jsp子目录,编写简易聊天室的JSP程序,聊天室的需要实现的基本功能参照下图6-1、图6-2。 图6-1用户一聊天界面 图6-2用户二聊天界面 2、进入jsp子目录,按照实验内容编写一个网页计数器的JSP程序,计数次数可以用图片来显示。 效果参照图6-3。 图6-3页面计数器 3、进入jsp子目录,按照实验内容编写一个简易购物车程序,需要实现的功能参考图6-4、图6-5、图6-6。 图6-4购物页面一 图6-5购物页面二 图6-6查看购物车 六、实验报告要求 1、给出编写程序的源代码以及代码注释。 2、程序运行后的若干截图,要求截图不能和实验指导书中一样。 七、思考题 1、要在不同页面之间共享数据,可以使用什么方法? 2、要在不同用户之间共享数据,可以使用什么方法? 实验7数据库编程技术 一、实验目的 1、掌握JDBC数据库编程技术; 2、掌握JDBC常用接口使用。 二、实验内容 1、将表单提交的数据写入数据库。 2、从数据库中读取数据,并在页面中显示。 3、从数据库中读取数据,并在页面中分页显示。 三、实验要求 1、实验前需要安装好数据库程序,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- WEB 程序设计 实验 指导书
![提示](https://static.bdocx.com/images/bang_tan.gif)