南昌大学WEB编程实验报告.docx

《南昌大学WEB编程实验报告.docx》由会员分享，可在线阅读，更多相关《南昌大学WEB编程实验报告.docx（31页珍藏版）》请在冰豆网上搜索。

南昌大学WEB编程实验报告

南昌大学实验报告

学生姓名：

学号：

专业班级：

实验类型：

□验证□综合■设计□创新实验日期：

实验成绩：

一、实验项目Web编程环境

二、实验目的

第1章搭建Web编程环境，能正确安装配置java运行环境、WEB服务器和数据库服务器

第2章熟悉WEB编程集成环境MYEclipse.

第3章熟练掌握WEB工程的创建、发布、运行流程。

三、实验内容

1.安装并配置java运行环境JDK和JRE

2.安装Web服务器tomcat,配置Tomcat服务器

3.安装并配置数据库MySQL.

4.安装MyEclispe，熟悉各项菜单项

5.为MyEclispe集成配置JDK和Tomcat

6.创建、发布、运行一个WEB工程。

四、实验仪器及耗材

计算机，JDK，TOMCAT,MySQL,MyEclipse等软件。

五、实验步骤

1.先安装jdk1.6，选择自定义安装，安装到C：

\JDK

2.配置环境变量，class：

.;C:

\JDK\bin,classpath:

.;C:

\JDK\lib，java_home：

C:

\JDK

安装tomcat，安装在C:

\Tomcat下，配置tomcat_home环境变量，CATALINA_HOME:

C:

\Tomcat，CATALINA_BASE:

C:

\Tomcat，TOMCAT_HOME:

C:

\Tomcat

然后修改环境变量中的classpath，把tomat安装目录下的common\lib下的servlet.jar追加到classpath中去，修改后的classpath如下：

classpath=.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;%CATALINA_HOME%\common\lib\servlet.jar;

3.运行toncat的bin文件夹下的tomcat6..exe。

在浏览器内输入http:

//localhost:

8080，会出现tomcat的管理窗口。

4.暗转SQL2000企业版，选择安装数据库服务器，接下来都选择缺省值，知道服务器配置界面选择使用本地系统账户，进入身份验证模式，选择混合模式。

5.下载安装SDK。

6.安装MyEclispe到C：

\Eclipse。

7.配置eclipse，在preference中展开java元素，选择installJRE.

8.在tomcat的webapps目录下建立一个firstapp文件子目录，然后使用文本编辑器编辑一下代码：

welcometoyou

9、保存到firstapp目录下面。

六、实验结果

一、浏览器输入：

htte:

//localhost:

8080,出现tomcat管理窗口。

二、在tomcat的manager目录下面选择firstapp，运行html文档，会显示welcome。

七、实验心得

对jsp程序的编写流程和工作环境有了大致了解，并学会了如何配置环境，发布基本的web服务的流程。

南昌大学实验报告

学生姓名：

学号：

专业班级：

实验类型：

□验证□综合■设计□创新实验日期：

实验成绩：

1）实验项目HTML和CSS编程技术

2）实验目的

熟悉HTML静态网页编程技术，熟悉HTML各种标记，特别是表单标记

熟悉CSS编程技术，掌握CSS来格式化网页、掌握CSS盒式模型

掌握DIV+CSS布局和设计网页，掌握CSS设计网页的一般流程

熟悉Dreamweaver的CSS设计器

3）实验内容

1.构思一个新闻发布网站，主题自选，设计好新闻类别

2.制作主页PSD图

3.用DIV+CSS布局主页框架。

（如可分成top,mid,foot,其中mid再分两大块left和main）

4.分别细化设计每一大块。

5.要中间部分的左边或右边要设计一个小登录表单，并用CSS美化。

4）实验仪器及耗材

计算机，Dreamweaver8，Photoshop，MyEclipse等软件。

5）实验步骤

1、打开Dreamweaver8，使用其DIV层的功能将主页分为top、left、right、三块，top主要来放置网站的logo、标题、登录信息，left来存放新闻网站的分类，right来存放内容。

这样设计简单直观，浏览者很方便可以查询到所需新闻。

2、用ps编辑一些图片作为网站的素材

3、用Dreamweaver的css样式表编辑各个层的样式

4、在top的左上角设置一个登录表单，登录后用户可以发布新闻信息。

6）实验结果

7）

1通过此次试验了解了网站的基本设计，熟悉了HTML静态网页编程技术，熟悉HTML各种标记，特别是表单标记

2熟悉CSS编程技术，掌握CSS来格式化网页

3掌握了一些基本的DIV+CSS布局和设计网页

4熟悉了Dreamweaver的CSS设计器

5在这次的实验中我懂得了dreamweaver表单和DIV的基本应用，并且掌握了如何用css美化网页。

南昌大学实验报告

学生姓名：

学号：

专业班级：

实验类型：

□验证□综合■设计□创新实验日期：

实验成绩：

1）实验项目JavaScript编程技术

2）实验目的

●熟悉JavaScript语法

●掌握JavaScript函数的创建和调用

●熟悉JavaScript对象，特别是浏览器对象，了解DOM模型，知道文档对象的访问方法。

●会用JavaScript来对表单进行验证。

3）实验内容

1）用JavaScript完成对登录表单的验证

2）设计一个新闻发布的页面，并用JavaScript对新闻发布表单进行验证。

4）实验仪器及耗材

计算机，Dreamweaver8，Photoshop，MyEclipse等软件。

5）实验步骤

1、

functioncheck（Form_Add）

{

if（document.Form_Add.UserName.value==""）

  {alert（"请输入用户名"）;

  document.Form_Add.UserName.focus（）;

  returnfalse;

  }

if（document.Form_Add.UserName.value.length<2）

  {alert（"输入的用户名太短"）;

  document.Form_Add.UserName.focus（）;

  returnfalse;

  }

if（document.Form_Add.UserName.value.length>12）

  {alert（"输入的用户名太长"）;

  document.Form_Add.UserName.focus（）;

  returnfalse;

  }

if（document.Form_Add.PWS.value.length<5）

  {alert（"请您输入密码，有效长度范围为：

5～20！

"）;

  document.Form_Add.PWS.focus（）;

  returnfalse;

  }

if（document.Form_Add.ConfirmPassword.value.length<1）

  {alert（"请您再输入验证密码！

"）;

  document.Form_Add.ConfirmPassword.focus（）;

  returnfalse;

  }

if（document.Form_Add.ConfirmPassword.value!

=

document.Form_Add.PWS.value）

  {alert（"确认密码与密码不一致！

"）;

  document.Form_Add.ConfirmPassword.focus（）;

  returnfalse;

  }

onsubmit="returncheck（this）">

Username:

　　用户名不得小于二个字节

Password:

Rpassword:

（只需要在上面的if语句中修改条件，就可以更改登录的条件，可以增加用户名和密码的数据库）

2、将此页面保存到tomcatwebapps下的firstapp文件夹中，在tomcat控制窗口运行即可。

六、实验结果

这是一个注册验证系统，必须输入符合条件的用户名和密码才能登录。

6）实验心得

熟悉了JavaScript语法，掌握了JavaScript函数的创建和调用，javascript的基本语法和代码，可以用其编写一些基本的jsp页面

南昌大学实验报告

学生姓名：

学号：

专业班级：

实验类型：

□验证□综合■设计□创新实验日期：

实验成绩：

1.实验项目Servlet编程技术

2.实验目的

1.熟悉Servlet技术的创建和运行流程。

2.会在web.xml配置Servlet的URL

3.熟悉请求request和响应response接口

4.熟悉请求转发接口requestDispatcher接口

5.熟悉会话Session接口，掌握基于Session登录权限控制。

3.实验内容

完成一个基于Session的登录权限控制模块。

要求：

a）主页登录表单提交后转到Servlet进行处理，根据用户类型转到不同的页面。

如果在用户名或密码不正确把登录表单包含进来

b）对于某些页面必须登录才能访问，如新闻发布页面。

如果没有登录则禁止访问，并重定向到登录页面。

4.实验仪器及耗材

计算机，MyEclipse等软件。

5.实验步骤（页面内容自己加）

一、编写index.jsp页面:

基于实验一的页面设置，以下是登录表单部分的代码

用户名:

密码:

保存为index.jsp

二、ServeletA编写：

package app.user.action;  

import java.io.IOException;  

import java.io.PrintWriter;    

import javax.servlet.ServletException;  

import javax.servlet.http.HttpServlet;  

import javax.servlet.http.HttpServletRequest;  

import javax.servlet.http.HttpServletResponse;  

import app.user.service.UserService;   

importjavax.servlet.http.HttpSession;

public class A extends HttpServlet {  

    private UserService userService=new UserService（）;  

    private String userName;  

    private String passWord;  

    public void doPost（HttpServletRequest request, HttpServletResponse response）   throws ServletException, IOException { 

 userName=request.getParameter（"UserName"）;  

        passWord=request.getParameter（"PassWord"）;  

        PrintWriter out=response.getWriter（）;    

        if（passWord.equals（“1234”）&&username.equals（“xufangzheng”）{  

session.setAttribute（“index”,”OK”）;

response.sendRrdirect（“B.jsp”）;//跳转到目标页面B.jsp

}

Else{

Response.sendRedirect（“index.jsp”）;//返回主页

Return;

}

}  

若用户名为xufangzheng,密码为1234，则会跳转到B.jsp页面进行处理。

B.JSP是一个新闻发布页面

三、B.jsp编写

所属栏目:

作者：

内容:

四、xml的配置

x,;versopm=”1/0”encoding=”ISO-8859-1”?

>

hello

UserRegisterAction

6.实验结果

在登入表单输入用户名和密码，如果用户名是xufangzheng，密码是1234则跳转到B.jsp页面，否则重新定位到主页。

7.实验心得

本次实验我了解了servlet的基本原理和如何运用servlet完成用户的认证，对掌握web技术有了更深一步的认识。

南昌大学实验报告

学生姓名：

学号：

专业班级：

实验类型：

□验证□综合■设计□创新实验日期：

实验成绩：

1）实验项目JSP编程技术

2）实验目的

6.熟悉JSP编译指令，动作标记。

7.熟悉JSP的隐含对象

8.正确理解request、session、application三个对象的作用域

9.能正确处理汉字乱码问题

10.能熟练使用JSP技术来编写网页

3）实验内容

1.编写一个文章类，用Myeclipse的工作自动产生getter和settet函数

2.修改前面编写过的管理员的新闻发布页面，改成JSP页面

要求如下：

1）撰写界面至少包括文件标题，所属栏目、作者、内容几项

2）界面用CSS进行美化

3）每个输入框均应有name属性。

4）权限控制，必须是管理员用户才能访问，跟前面实验的登录权限控制关联起来。

3.编写一个Servlet来处理新闻发布页面提交的表单

要求：

1）读取表单各项内容，并把存入一个文章对象中。

2）把文章对象绑定在request对象中，并转发到新闻显示页面。

3.编写一个新闻显示页面。

要求：

1）编写静态页面模板，页面用div+css设计

2）设定文章对象已存在request对象中，取出文章对象

3）把静态页面的内容改成动态内容，如标题，作者，内容等。

4）实验仪器及耗材

计算机，Dreamweaver8，Photoshop，MyEclipse等软件。

5）实验步骤

1、题意不明确

2、管理员权限控制servlet代码：

package app.user.action;  

import java.io.IOException;  

import java.io.PrintWriter;    

import javax.servlet.ServletException;  

import javax.servlet.http.HttpServlet;  

import javax.servlet.http.HttpServletRequest;  

import javax.servlet.http.HttpServletResponse;  

import app.user.service.UserService;   

importjavax.servlet.http.HttpSession;

public class A extends HttpServlet {  

    private UserService userService=new UserService（）;  

    private String userName;  

    private String passWord;  

    public void doPost（HttpServletRequest request, HttpServletResponse response）   throws ServletException, IOException { 

 userName=request.getParameter（"UserName"）;  

        passWord=request.getParameter（"PassWord"）;  

        PrintWriter out=response.getWriter（）;    

        if（passWord.equals（“1234”）&&username.equals（“xufangzheng”）{  

session.setAttribute（“index”,”OK”）;

response.sendRrdirect（“news.jsp”）;//跳转到目标页面news.jsp

}

Else{

Response.sendRedirect（“index.jsp”）;//返回主页

Return;

}

}  

若用户名为xufangzheng,密码为1234，则会跳转到news.jsp页面进行处理。

news.JSP是一个新闻发布页面

3、修改新闻发布页面，news.jsp代码如下

所属栏目:

题目：

作者：

内容:

4、编写新闻处理servlet，命名为chuli，目的是在新闻DIV中将提交的新闻和作者内容写到DIV中

importjava.io.IOException;

importjava.io.PrintWriter;

importjavax.servlet.ServletException;

importjavax.servlet.http.HttpServlet;

importjavax.servlet.http.HttpServletRequest;

importjavax.servlet.http.HttpServletResponse;

importadmin.manageBean.NewsAddBean;

publicclasschuliextendsHttpServlet{

publicchulit（）{

super（）;

}

publicvoiddestroy（）{

super.destroy（）;//Justputs"destroy"stringinlog

//Putyourcodehere

}

publicvoiddoGet（HttpServletRequestrequest,HttpServletResponseresponse）

throwsServletException,IOException{

response.setContentType（"text/html"）;

PrintWriterout=response.getWriter（）;

out.println（"

DOCTYPEHTMLPUBLIC\"-//W3C//DTDHTML4.01Transitional//EN\">"）;

out.println（""）;

out.println（""）;

out.println（""）;

out.print（"Thisis"）;

out.print（this.getClass（））;

out.println（",usingtheGETmethod"）;

out.println（""）;

out.println（""）;

out.flush（）;

out.close（）;

}

publicvoiddoPost（HttpServletRequestre