资源描述
实验名称:实验二新闻网站管理页面动态网页实现
实验时间:2013年12月4号
内容介绍
Web技术是计算机专业学生的一门专业课程,着重讲述Web编程的技术方法。对于学生从事Web系统的研发、使用和维护有重要意义。本课程概念多、内容涉及面广、系统性强。通过本课程的学习,学生应能从软件、硬件功能分配的角度去了解、分析和研究Web系统,建立起对Web系统的全面认识,树立全面地、发展地看问题的观点,从而加深对各种类型Web系统的了解。
本课程的学习应注重理论与实践相结合,因此实验教学是教学环节中必不可少的重要内容。通过实验教学的学习,使学生熟练掌握有关Web编程的基本概念、基本原理和基本思想,掌握对Web系统进行设计、分析和计算的方法。
实验部分包括四个实验,包括实验目的、实验内容和实验所需环境等,介绍了每个实验所需的一些基础知识和技巧。在实验中给出的实验题,跟课堂教学的内容都有密切的关系,所以需要将课堂上讲授的例子程序融会贯通,掌握实验所需的一些基本方法和工具,并在吃透例子程序的基础上,积极独立思考设计和编写满足实验要求的程序。
实验二新闻网站管理页面动态网页实现
一、实验目的
1. 了解和掌握JSP基本概念和语法
2. 了解和掌握JSP内置对象request,response,out
3. 了解和掌握JDBC
二、实验开发环境和工具
可以在Linux或者Windows操作系统上搭建开发环境,所使用的开发工具包括Tomcat7 Web应用服务器,SQL Server 2000 SP4 数据库服务器,JSP集成开发环境采用Eclipse,使用Java语言,工具包使用JDK1.7。关于JSP开发环境和工具的详细细节见课件资料和相关文献。
三、实验内容
在掌握课堂讲授的新闻发布系统范例的基础上,参考课件和演示视频,搭建JSP开发环境,构建基于JSP的新闻发布系统管理页面,具体要求如下:
1. 参考课件中的相关视频,搭建基于Tomcat7 Web应用服务器,SQL Server 2000 SP4 数据库服务器,JDK1.7和Eclipse的JSP集成开发环境;
2. 使用老师提供的SQL脚本创建新闻系统数据库(详见课件“TP01创建新闻系统数据库”)
3. 完成从新闻网首页顶部快速登录系统(需要访问数据库的用户表)的操作,实现用管理员账号登录后进入管理页面的功能(具体流程详见课件“TP02管理员登陆”);
4. 完成转入管理页面后显示新闻列表的功能(需要从新闻信息表里读取数据来填充网页的内容,具体流程详见课件“TP03显示新闻列表”);
5. 完成在管理页面显示新闻主题列表的功能(需要从主题表里读取数据来填充网页的内容,具体流程详见课件“TP04显示新闻主题列表”,注意需要从帧或者锚链接实现在网页主题左部点击相应链接就可在网页主题右部在主题列表和新闻列表切换的功能);
6. 完成在管理页面添加新闻主题的功能(具体流程详见课件“TP05添加新闻主题”);
7. 完成在管理页面添加新闻的功能(具体流程详见课件“TP06实现发布新闻”)
四、实验步骤
1. JDK和Tomcat的下载、安装、配置与运行
下载运行jdk-7u45-windows-i586.exe
JDK安装完成界面
JDK安装成功了,但是目前还不能够使用控制台来编译和运行Java程序。要想使用控制台来编译和运行Java程序,还需要配置系统环境变量。配置系统环境变量的步骤如下。
环境变量的步骤如下。
通过前面的步骤,已经安装好了JDK,并配置好了环境变量
下载完成Tomcat服务器以后,就可以通过下载的压缩文件夹来安装Tomcat,步骤如下。
第一步:将下载好的“apache-tomcat-6.0.18.zip”解压。解压到某个目录下。
第二步:打开安装目录下的“bin”文件夹,找到其中的“startup.bat”,双击该批处理文件。
第三步:当控制台输出如“Server startup in 604 ms”的文本则表示Tomcat服务器启动成功。打开IE浏览器,在地址栏输入“http://localhost:8080”,打开页面如下图所示。
2.MyEclipse的下载、安装、配置及整合Tomcat
单纯的Eclipse只能进行Java桌面开发,如果要进行Java Web开发,还需要安装Eclipse插件。众多软件厂商和开源组织开发了相应的插件,其中以MyEclipse插件最为出名并常用。MyEclipse是一个由众多插件结合的插件集合,通过安装它可以很方便的进行Java Web开发。下面将详细介绍如何下载并安装MyEclipse。
按照如下步骤,即可从MyEclipse的官方网站获得试用版的MyEclipse,步骤如下。
第一步:打开MyEclipse的官方站点“
第二步:单击左边导航栏中的“Try/Download”链接。
第三步:该页面有两个下载项目,一个是“MyEclipse 6.5GA”,一个是
“MyEclipse blue”。单击其中的“MyEclipse 6.5GA”进入其下载页面。
第四步:MyEclipse 6.5GA的安装分为两种,一种是“All in ONE”版本
,一种是“pulse”版本。其中“All in ONE”版本包含MyEclipse安装的全
部文件,而“pulse”版本为插件安装版本,需要事先安装好了相应的
Eclipse。这里为了安装方便,选择下载其中的“All in ONE”版本
安装MyEclipse
下载完成MyEclipse以后,就可以通过下载的执行文件安装MyEclipse,步
骤如下。
第一步:双击下载下来的MyEclipse_6.5.1GA_E3.3.2_Installer.exe文件。
第二步:单击其中的【Next】按钮,进入安装的下一步。
第三步:在打开的许可证协议确认界面中选择“I accept the terms of the
license agreement”选项,单击【Next】按钮进入一下步。
第四步:单击其中的【Change】按钮即可选择自定义的安装目录,如“D:\MyEclipse 6.5”,选择完成后,单击其中的【Next】按钮进入下一步。
第五步:该界面为安装确认页,如果希望修改安装配置,可以单击其中的【Back】按钮;如果安装配置无误,则单击【Install】按钮进行安装。
第六步:等待数分钟后,MyEclipse安装完成,打开安装完成页面,单击其中的【Finish】按钮完成安装。
将myeclipse整合到eclipse中:
只需将myeclipse中的features和plugins文件夹复制覆盖到eclipse主文件夹中即可。
MyEclipse提供了对Web服务器很好的整合策略,通过MyEclipse整合Tomcat,
即可很方便的通过MyEclipse来调试或发布Web项目,整合步骤如下。
第一步:单击“Window”菜单。在弹出的菜单选项中选择【Rreference】菜单项。
第二步:在【Rreference】窗口中展开左边导航树中的【MyEclipse Enterprise Work】选项,再展开【Servers】子选项,选择当中的【Tomcat】。
第三步:在右边的窗口中选择Tomcat的版本,这里选择单击“Configure Tomcat7.x”来
配置Tomca7.x版本的服务器。
第四步:要整合Tomcat,显然应该选中【Enable】单选框,表示该Tomcat服务器为
可用。在【Tomcat base directory】文本框中输入Tomcat的安装目录,或者单击
【Browse】按钮来在本地磁盘中选择Tomcat的安装目录。指定正确的Tomcat安装目录
后,下面的两个文本框会自动进行输入,无需再设置。第五步:单击右边的【Apply
】按钮提交,单击【OK】按钮完成配置。
MyEclipse部署项目
通过MyEclipse可以非常方便的部署项目,步骤如下。
第一步:在Eclipse主界面中单击部署Web应用的工具按钮。
第二步:在该对话框的“Project”下拉列表中选择需要部署的Web应用。单击
右边的【Add】按钮,将打开用来选择Web服务器的对话框。
第三步:在【Server】下拉列表中选择开始配置好的【Tomcat 7.x】服务器
,其他选项采用默认配置。单击【Finish】按钮,完成服务器的配置,页面
回到Web应用部署对话框,单击【OK】按钮完成Web应用部署。
第四步:Web应用部署完成后,单击Eclipse主界面工具栏中的按钮旁的小三
角,出现下拉菜单。选择【Tomcat7.x】|【Start】菜单项。启动Tomcat服务
器。
第五步:打开浏览器,访问登录页地址“http://localhost:8080/Prj_test/First
JSP.jsp”。
3. 创建新闻系统数据库
使用老师给的sql脚本创建数据库:
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[users]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[users]
GO
CREATE TABLE [dbo].[users] (
[uid] [int] NOT NULL ,
[uname] [varchar] (50) COLLATE Chinese_PRC_CI_AS NOT NULL ,
[upwd] [varchar] (50) COLLATE Chinese_PRC_CI_AS NOT NULL
) ON [PRIMARY]
GO
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[comment]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[comment]
GO
CREATE TABLE [dbo].[comment] (
[cid] [int] NOT NULL ,
[cnid] [int] NOT NULL ,
[content] [varchar](3000) ,
[cdate] [datetime],
[cip] [varchar] (15),
[cauthor] [varchar] (50)
) ON [PRIMARY]
GO
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[newsinfo]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[newsinfo]
GO
CREATE TABLE [dbo].[newsinfo] (
[nid] [int] NOT NULL ,
[ntid] [int] NOT NULL ,
[ntitle] [varchar](500) NOT NULL,
[nauthor] [varchar] (50) NOT NULL,
[ncreatedate] [datetime],
[npicpath] [varchar](255) ,
[ncontent] [varchar](3000),
[nmodifydate] [datetime],
[nsummary] [varchar] (3000) NOT NULL,
) ON [PRIMARY]
GO
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[topic]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[topic]
GO
CREATE TABLE [dbo].[topic] (
[tid] [int] NOT NULL ,
[tname] [varchar] (100) NOT NULL
) ON [PRIMARY]
GO
4. 从新闻网首页顶部快速登录系统(需要访问数据库的用户表)的操作,实现用管理员账号登录后进入管理页面的功能
以管理员身份成功登陆,跳转到新闻管理页面,普通用户登陆,跳转到新闻首页,登陆不成功,输出出错信息。
5. 转入管理页面后显示新闻列表的功能
管理员登录后,显示新闻列表,使用集合保存新闻。
6. 在管理页面显示新闻主题列表的功能
当管理员单击“编辑主题”超链接时,将新闻主题以列表方式显示,显示新闻主题的名称,提供主题“修改”和“删除”超链接
7. 在管理页面添加新闻主题的功能
新闻主题添加页面,主题名称,业务处理页面,获取主题名称,将主题保存到数据库中,保存成功后返回主题列表表单提交至控制JSP页面,控制JSP页面,访问数据库确定用户输,主题是否已存在,主题已存在,提示用户并返回主题添加页面,主题不存在,保存主题到数据库,并提示用户保存成功,跳转至显示主题列表页面
8. 在管理页面添加新闻的功能
实现新闻的发布,将发布内容保存到数据库中,图片上传功能暂不实现。(此功能暂未实现)
五.实验部分源代码:
1.main.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ page language="java" import="java.util.*" import="java.sql.*" pageEncoding="GBK"%>
<%
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver "); //加载数据库驱动
//创建连接
Connection con=DriverManager.getConnection("jdbc:odbc:news", "sa", "123456");
//创建Statement对象
Statement stmt = con.createStatement();
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<title>新闻中国</title>
</head>
<body>
<div id="header">
<div id="top_login">
<form name="form1" method=post action="control.jsp">
<label> 登录名 </label>
<input type="text" name="uname" value="" class="login_input" />
<label> 密  码 </label>
<input type="password" name="upwd" value="" class="login_input" />
<input type="button" class="login_sub" value="登录" onclick="login()"/>
</form>
<label id="error"> </label>
<img src="Images/friend_logo.gif" alt="Google" id="friend_logo" />
</div>
<div id="nav">
<div id="logo"> <img src="Images/logo.jpg" alt="新闻中国" /> </div>
<div id="a_b01"> <img src="Images/a_b01.gif" alt="" /> </div>
<!--mainnav end-->
</div>
</div>
<div id="container">
<div class="sidebar">
<h1> <img src="Images/title_1.gif" alt="国内新闻" /> </h1>
<div class="side_list1">
<ul>
<li> <a href='#'><b> 重庆涉黑富豪黎强夫妇庭审答辩言辞相互矛盾 </b></a> </li>
<li> <a href='#'><b> 发改委:4万亿投资计划不会挤占民间投资空间 </b></a> </li>
<li> <a href='#'><b> 河南2个乡镇政绩报告内容完全一致引关注 </b></a> </li>
</ul>
</div>
<h1> <img src="Images/title_2.gif" alt="国际新闻" /> </h1>
<div class="side_list1">
<ul>
<li> <a href='#'><b> 日本首相鸠山首次阐述新政府外交政策 </b></a> </li>
<li> <a href='#'><b> 黎巴嫩以色列再次交火互射炮弹 </b></a> </li>
<li> <a href='#'><b> 伊朗将于30日前将于核燃料供应给予答复 </b></a> </li>
<li> <a href='#'><b> 与基地有关组织宣称对巴格达连环爆炸案负责 </b></a> </li>
</ul>
</div>
<h1> <img src="Images/title_3.gif" alt="娱乐新闻" /> </h1>
<div class="side_list1">
<ul>
<li> <a href='#'><b> 施瓦辛格恢复影视业力求经济大复苏 </b></a> </li>
<li> <a href='#'><b> 刘诗诗和吴奇隆恋情大曝光 </b></a> </li>
<li> <a href='#'><b> 毛线毛线毛线毛线毛线毛线 </b></a> </li>
</ul>
</div>
</div>
<div class="main">
<li> <a href="#"> <img src="Images/class_type.gif"/><a/><img src="Images/class_bg.gif" alt="分类新闻" width="792"/> </li>
<div class="content">
<ul>
<li> <a href="#">国内</a> </li>
<li> <a href="#">国际</a> </li>
<li> <a href="#">军事</a> </li>
<li> <a href="#">体育</a> </li>
<li> <a href="#">娱乐</a> </li>
<li> <a href="#">社会</a> </li>
<li> <a href="#">财经</a> </li>
<li> <a href="#">科技</a> </li>
<li> <a href="#">健康</a> </li>
<li> <a href="#">汽车</a> </li>
<li> <a href="#">教育</a> </li>
<li> <a href="#">房产</a> </li>
<li> <a href="#">家属</a> </li>
<li> <a href="#">旅游</a> </li>
<li> <a href="#">文化</a> </li>
<li> <a href="#">其他</a><br/> </li>
</ul>
<br/>
<br/>
<hr color="#000000" width="%68">
<table border="0" >
<tr>
<td> <a href="#">·数据帝:詹皇变身失误王 两大新秀同场送三双</a></td>
<td> 2013-12-09 01:03:51</td>
</tr>
<tr>
<td> <a href="#">·詹皇单节暴走难掩郁闷 关键丢球+6失误太尴尬</a></td>
<td> 2013-12-09 01:03:51</td>
</tr>
<tr>
<td> <a href="#">·遭颜扣+致命失误!波什郁闷 子弹停飞弊病尽显</a></td>
<td> 2013-12-09 01:03:51</td>
</tr>
<tr>
<td> <a href="#">·韦德休战詹皇23分难救主 热火负活塞止十连胜</a></td>
<td> 2013-12-09 01:03:51</td>
</tr>
<tr>
<td> <a href="#">·热火后卫遇枪击案遭打劫 冠军队一年三人被抢</a></td>
<td> 2013-12-09 01:03:51</td>
</tr>
</table>
<br/>
<br/>
<table border="0">
<tr>
<td> <a href="#">·夺冠赔率榜:热火居首步行者次席 火箭第六</a></td>
<td> 2013-12-09 01:03:51</td>
</tr>
<tr>
<td> <a href="#">·韦德膝盖疼痛缺战活塞 本赛季已四次停赛养伤</a></td>
<td> 2013-12-09 01:03:51</td>
</tr>
<tr>
<td> <a href="#">·MVP赔率榜:詹姆斯居首 杜兰特第二乔治第三</a></td>
<td> 2013-12-09 01:03:51</td>
</tr>
<tr>
<td> <a href="#">·热火表现助君子雷转型 斯帅:他上篮更有威胁</a></td>
<td> 2013-12-09 01:03:51</td>
</tr>
<tr>
<td> <a href="#">·詹皇一数据降至生涯新低 纠结!他盼出战更久</a></td>
<td> 2013-12-09 01:03:51</td>
</tr>
</table>
<br/>
<br/>
<table border="0">
<tr>
<td> <a href="#">·杨毅笑侃NBA:詹皇好心情是自HIGH不是车震!</a></td>
<td> 2013-12-09 01:03:51</td>
</tr>
<tr>
<td> <a href="#">·湖人控卫伤停后场告急 科比擒“王”救场?</a></td>
<td> 2013-12-09 01:03:51</td>
</tr>
<tr>
<td> <a href="#">·专家:加索尔已不可能复苏 湖人发傻才续约他</a></td>
<td> 2013-12-09 01:03:51</td>
</tr>
<tr>
<td> <a href="#">·科比全场训练细节曝光 个人进攻偏少传球第一</a></td>
<td> 2013-12-09 01:03:51</td>
</tr>
<tr>
<td> <a href="#">·腾讯专访单打王尼克-杨:我传球别人却不投篮</a></td>
<td> 2013-12-09 01:03:51</td>
</tr>
</table>
<br/>
<br/>
<table border="0">
<tr>
<td> <a href="#">·科比参加全场对抗大秀扣篮 纳什恢复不理想</a></td>
<td> 2013-12-09 01:03:51</td>
</tr>
<tr>
<td> <a href="#">·湖人召回菜鸟缓燃眉之急 他NBDL场均能砍25+8</a></td>
<td> 2013-12-09 01:03:51</td>
</tr>
<tr>
<td> <a href="#">·"老鱼"表示下赛季必定退役 生涯已无欲无求</a></td>
<td> 2013-12-09 01:03:51</td>
</tr>
<tr>
<td> <a href="#">·丹帅“点石成金” 当神奇早已成为一种习惯</a></td>
<td> 2013-12-09 01:03:51</td>
</tr>
<tr>
<td> <a href="#">·七场比赛七位得分王 气氛团结的湖人很可怕</a></td>
<td> 2013-12-09 01:03:51</td>
</tr>
</table>
</div>
<div class="pic_news">
<div class="pic_list">
<ul>
<li> <a href='#'><b> <img src="Images/Picture1.jpg"/> </b></a> </li>
<li> <a href='#'><b> <center> 幻想中穿越时空 <center/> </b></a> </li>
</ul>
</div>
<div class="pic_list">
<ul>
<li> <a href='#'><b> <img src="Images/Picture2.jpg"/> </b></a> </li>
<li> <a href='#'><b> <center> 国庆多变的发型 <center/> </b></a> </li>
</ul>
</div>
<div class="pic_list">
<ul>
<li> <a href='#'><b> <img src="Images/Picture3.jpg"/> </b></a> </li>
<li> <a href='#'><b> <center> 新技术照亮都市 <center/> </b><
展开阅读全文