南昌大学WEB开发技术实践教程实验报告.docx
实验报告实验课程：WEB开发技术实践教程学生姓名：学 号：专业班级：2012年12 月 20日目录实验一实验二实验三实验四实验五实验六 实验七学生姓名：学 号： 专业班级：实验类型：口验证综合设计口创新 实验日期：.实验成绩:实验一 Web编程环境一、实验目的1. 搭建Web编程环境，能正确安装配置java运行环境、WEB服务器和数据库服务器2. 熟悉WEB编程集成环境MYEclipse.3. 熟练掌握WEB工程的创建、发布、运行流程。二、实验内容1. 安装并配置java运行环境JDK和JRE2. 安装Web服务器tomcat，配置Tomcat服务器3. 安装并配置数据库MySQL.4. 安装MyEclispe，熟悉各项菜单项5. 为 MyEclispe 集成配置 JDK 和 Tomcat6. 创建、发布、运行一个WEB工程。三、实验仪器及耗材计算机，JDK，TOMCAT, MySQL, MyEclipse 等软件。四、实验步骤1、安装并配置JDK和JRE2、设置好classpath和path路径3、安装 Tomcat5.54、设置Tomcat的配置属性5、安装并配置MySQL数据库6、安装 MySqL Administrator 工具7、安装 MyEclipse8、新建并配置一个工程，运行发布一个新的工程。五、实验结果1、JDK、JRE安装结果：2、Classpath 和 path 设置3、安装并配置Tomcat4、安装并配置 MySqL 和 MySqL Administrator 工具5、安装 MyEclipseJava - lyEclipse Enterprise TorkbenchFile Edi t Navi gate Se：=Lt_ch Froj ect MyEclipse Rutl Window Help：3, H伊H笛Save (Ctrl+S)曰 ConsoleServerS+atiisModeLocationMyEclipse DerbyEs st(jpped忑.：MyE *-l ipse Turn catEq StoppedSTdmcat 5. xEq Stopped6、发布一个Web工程。诘"：；S-S-.Q-咨*言s's'srcJT1E System Libr：±ry MyEclipEeG. 0J2EE 1.4 LibrariesW ebRcot& META-I1TFB WEB-IM1j* index, j spD e e i gri Frevi ewPrublemsTasks_S3 曰 ConsoleServer| Status| ModeMyEclipse Derbyfg StoppedMyE cl ipse T omcat岳 StoppedO 优妥 Tomcat 5. x岳 Stopped/ OK勺 E>Server Tcmcat 5. mM：dXL：±ge El epl q jin ent eEleploy and iirnlepl oy J2EE proj e c t e .Froj ectTgLocation/ Tas + llewExplodedD:TomcatTomcat 5. 5webappeTwDeployments六、实验心得学生姓名：学 号：专业班级：实验类型：口验证综合设计口创新 实验日期：.实验成绩:实验二 HTML和CSS编程技术一、实验目的1. 熟悉HTML静态网页编程技术，熟悉HTML各种标记，特别是表单标记2, 熟悉CSS编程技术，掌握CSS来格式化网页、掌握CSS盒式模型3. 掌握DIV+CSS布局和设计网页，掌握CSS设计网页的一般流程4, 熟悉Dreamweaver的CSS设计器二、实验内容1. 构思一个新闻发布网站，主题自选，设计好新闻类别2. 制作主页PSD图3. 用DIV+CSS布局主页框架。（如可分成top, mid, foot,其中mid再分两大块left和 main）4. 分别细化设计每一大块。5. 要中间部分的左边或右边要设计一个小登录表单，并用CSS美化。三、实验仪器及耗材计算机，Dreamweaver 8，Photoshop， MyEclipse 等软件。四、实验步骤1、制作PSD图2、使用DIV+CSS布局3、细化每一块4、美化表单部分五、实验结果1、制作PSD图上边登家口统计中间部分统计统计2、使用DIV+CSS布局3、细化每一块4、美化表单部分六、实验心得学生姓名：学 号： 专业班级：实验类型：口验证综合设计口创新 实验日期：.实验成绩：实验三JavaScript编程技术一、实验目的1. 熟悉JavaScript语法2. 掌握JavaScript函数的创建和调用3. 熟悉JavaScript对象，特别是浏览器对象，了解DOM模型，知道文档对象的访问 方法。4. 会用JavaScript来对表单进行验证。二、实验内容1. 用JavaScript完成对登录表单的验证2. 设计一个新闻发布的页面，并用JavaScript对新闻发布表单进行验证。三、实验仪器及耗材计算机，Dreamweaver 8， Photoshop， MyEclipse 等软件。四、实验步骤1、设计和实现对表单验证的过程代码如下：function checklogin()(var user二document.getElementsByName(username)0.value;var pass二document.getElementsByName(password)0.value;if(user=)(alert('请输入用户名)；return false;else if(pass=)(alert( 请输入密码)；return false;else(return true;2、设计和实现对新闻发布的验证过程代码如下：function checkarticle()(var a=document.getElementsByName("author")0.value;var t=document.getElementsByName("title")0.value;var c=document.getElementsByName("content")0.value;if(a=)(alert('请输入的作者')；return false;if(t=)(alert('请输入的标题')；return false;else if(c=)(alert('请输入的内容')；return false;else(return true;五、实验结果1、表单验证结果管理员用户名:2、文章发布页面验证管理员密码:文章题目：文章作者:六、实验心得学生姓名：学 号： 专业班级：实验类型：口验证综合设计口创新 实验日期：实验成绩:实验四Servlet编程技术一、实验目的1. 熟悉Servlet技术的创建和运行流程。2. 会在 web.xml 配置 Servlet 的 URL3. 熟悉请求request和响应response接口4. 熟悉请求转发接口 requestDispatcher接口5. 熟悉会话Session接口，掌握基于Session登录权限控制。二、实验内容完成一个基于Session的登录权限控制模块。要求：a）主页登录表单提交后转到Servlet进行处理，根据用户类型转到不同的页面。如果 在用户名或密码不正确把登录表单包含进来b）对于某些页面必须登录才能访问，如新闻发布页面。如果没有登录则禁止访问，并 重定向到登录页面。三、实验仪器及耗材计算机，MyEclipse等软件。四、实验步骤1、设计和实现一个登录表单2、设计和实现实现验证的Servlet，然后进行验证五、实验结果1、表单验证效果登录失败：密码错误管理员用户名:管理员密码：登录重置登录失败：用户名不存在2、验证Servlet源代码public class LoginServlet extends HttpServlet (/* Constructor of the object.*/public LoginServlet() (super();/* Destruction of the servlet, <br>*/public void destroy() (super.destroy(); / Just puts "destroy" string in log/ Put your code here/* The doGet method of the servlet, <br>* This method is called when a form has its tag value method equals to get.* param request the request send by the client to the server* param response the response send by the server to the client* throws ServletException if an error occurred* throws IOException if an error occurred */public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException (response.setContentType("text/html");PrintWriter out = response.getWriter();out.println("<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN">");out.println("<HTML>");out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>");out.println(" <BODY>");out.print(" This is ");out.print(this.getClass();out.println(", using the GET method");out.println(" </BODY>");out.println("</HTML>");out.flush();out.close();/* The doPost method of the servlet. <br>* This method is called when a form has its tag value method equals to post.* param request the request send by the client to the server* param response the response send by the server to the client* throws ServletException if an error occurred* throws IOException if an error occurred */public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException (request.setCharacterEncoding("GBK");response.setContentType("text/html;charset=GBK"); response.setCharacterEncoding("GBK");String username=request.getParameter("username");System.out.println("用户名："+username);MemberProcess mp=new MemberProcess();if(mp.isExisted(username)String password=request.getParameter("password");System.out.println("输入的密码："+password);if(mp.validate(username,password)HttpSession session=request.getSession(true);Member m=mp.getMemberByName(username);session.setAttribute("userinfo", m);session.setAttribute("login", "true");session.setAttribute("memberId", username);session.setAttribute("loginusername", username);if(request.getParameter("backpage")=null)request.getRequestDispatcher("index.jsp").forward(request, response);elserequest.getRequestDispatcher(request.getParameter("backpage").forward(request, response);elserequest.setAttribute("loginresult”,"密码错误");request.getRequestDispatcher("member.jsp").forward(request, response);elserequest.setAttribute("loginresult","用户名不存在");request.getRequestDispatcher("login.jsp").forward(request, response);/* Initialization of the servlet, <br>* throws ServletException if an error occurs */public void init() throws ServletException (/ Put your code here六、实验心得学生姓名：学 号： 专业班级：实验类型：口验证综合设计口创新 实验日期实验成 实验五JSP编程技术一、实验目的6. 熟悉JSP编译指令，动作标记。7. 熟悉JSP的隐含对象8. 正确理解request、session、application三个对象的作用域9. 能正确处理汉字乱码问题10. 能熟练使用JSP技术来编写网页二、实验内容1. 编写一个文章类，用Myeclipse的工作自动产生getter和settet函数2. 修改前面编写过的管理员的新闻发布页面，改成JSP页面要求如下：1）撰写界面至少包括文件标题，所属栏目、作者、内容几项2）界面用CSS进行美化3）每个输入框均应有name属性。4）权限控制，必须是管理员用户才能访问，跟前面实验的登录权限控制关联起来。3. 编写一个Servlet来处理新闻发布页面提交的表单要求：1）读取表单各项内容，并把存入一个文章对象中。2）把文章对象绑定在request对象中，并转发到新闻显示页面。3, 编写一个新闻显示页面。要求：1）编写静态页面模板，页面用div+css设计2）设定文章对象已存在request对象中，取出文章对象3）把静态页面的内容改成动态内容，如标题，作者，内容等。三、实验仪器及耗材计算机，Dreamweaver 8，Photoshop， MyEclipse 等软件。四、实验步骤1、设计和实现新闻发布系统的页面2、设计和实现后台的Servlet五、实验结果1、页面的实现管理员用户名：管理员密码：提交重置文章题目，文章作者艾章内容2、Servlet的实现public class ArticleServlet extends HttpServlet (private static final long serialVfersionUID = 1L;public ArticleServlet() (super();public void destroy() (super.destroy(); / Just puts "destroy" string in log/ Put your code here/* The doGet method of the servlet, <br>* This method is called when a form has its tag value method equals to get.* param request the request send by the client to the server* param response the response send by the server to the client* throws ServletException if an error occurred* throws lOException if an error occurred*/public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, lOException (request.setCharacterEncoding("GBK");response.setCharacterEncoding("GBK");response.setContentType("text/html;charset=GBK");ArticleBll ab=new ArticleBll();String opType=request.getParameter("opType");if(opType=null)request.getRequestDispatcher("articlelist.jsp").forward(request, response);else if(opType.equals("see")String aid=request.getParameter("articleId");int id=0;tryid=Integer.parseInt(aid);catch(NumberFormatException e)id=1;Article a=ab.getArticle(id);request.setAttribute("article”, a);request.getRequestDispatcher("article.jsp").forward(request, response);else if(opType.equals("seecmts")String aid=request.getParameter("articleId");int id=0;tryid=Integer.parseInt(aid);catch(NumberFormatException e)id=1;Vector<Comment> cmts=ab.getComments(id);request.setAttribute("comments”, cmts);request.getRequestDispatcher("allcomments.jsp?articleId="+id).forward(request, response);else if(opType.equals("remove")String aid=request.getParameter("articleId");int id=0;tryid=Integer.parseInt(aid);catch(NumberFormatException e)id=1;new ArticleBll().remove(id);request.getRequestDispatcher("article.jsp?articleId="+id).forward(request, response);/* The doPost method of the servlet. <br>* This method is called when a form has its tag value method equals to post.* param request the request send by the client to the server* param response the response send by the server to the client* throws ServletException if an error occurred* throws IOException if an error occurred */public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException (request.setCharacterEncoding("GBK");response.setCharacterEncoding("GBK");response.setContentType("text/html;charset=GBK");String opType=request.getParameter("opType");if(opType=null)String aid=request.getParameter("articleId");int id=0;tryid=Integer.parseInt(aid);catch(NumberFormatException e)id=1;request.getRequestDispatcher("article.jsp?articleId="+id).forward(request, response);else if(opType.equals("givecmt")发表评论String aid=request.getParameter("articleId");int id=0;tryid=Integer.parseInt(aid);catch(NumberFormatException e)id=1;Comment c=new Comment();c.setArticle_id(id);c.setTitle(request.getParameter("title");c.setContent(request.getParameter("content");new CommentBll().insert(c);request.getRequestDispatcher("article.jsp?articleId="+id).forward(request, response);/* Initialization of the servlet. <br>* throws ServletException if an error occurs*/public void init() throws ServletException (/ Put your code here六、实验心得学生姓名：学 号： 专业班级：实验类型：口验证综合设计口创新 实验日期实验成绩 实验六 JavaBean编程技术一、实验目的1. 熟悉JavaBean的规范2. 会编写JavaBean;会在JSP和Servlet中创建和使用JavaBean对象3. 掌握 JSP 的jsp:useBean、jsp:setProperty、jsp:getProperty的使用4. 掌握JSP中表单和表单Bean的映射5. 掌握Servlet中表单和表单Bean的映射6. 会编写封装业绩逻辑的JavaBean7. 会使用上传下载组件jspSmartUpload外部组件二、实验内容1. 修改前面的封装新闻（文章）的JavaBean，使其符合JavaBean规范2. 修改前面的新闻发表Serlvet，用来完成新闻发布表单的处理，要求利用映射机制 把新闻表单映射到新闻的JavaBean中，以便后继把这个JavaBean写入数据库。3. 编写一个封闭新闻管理的业务Bean.这里只需定义接口即可。4. 参考教材，编写一个上传下载模块（可选）5. 参考教材，实现登录动态验证（可选）三、实验仪器及耗材计算机，Dreamweaver 8，Photoshop， MyEclipse 等软件。四、实验步骤1、编写文章Bean2、编写业务Bean五、实验结果1、文章Bean源代码package article.entity;import java.sql.Date;public class Article private int id;private String title;private String author;private String content;private Date created_time;private Date updated_time;public int getId() return id;public void setId(int id) this.id = id;public String getTitle() return title;public void setTitle(String title) this.title = title;public String getAuthor() return author;public void setAuthor(String author) this.author = author;public String getContent() return content;public void setContent(String content) this.content = content;public Date getCreated_time() return created_time;public void setCreated_time(Date created_time) this.created_time = created_time;public Date getUpdated_time() return updated_time;public void setUpdated_time(Date updated_time) this.updated_time = updated_time;2、业务Bean源代码public class AdminProcess (public Administrator getAdminByName(String username) ( Administrator a=null;String sql="select * from admin where username=""+username+""”;ResultSet rs=DBAccess.executeQueary(sql);if(rs!=null)try a=new Administrator();a.setId(rs.getInt(1);a.setUsername(rs.getString(2);a.setPassword(rs.getString(3);return a; catch (SQLException e) return null;return a;3、数据库连接Bean的实现public class DBAccess private static String driver="com.mysql.jdbc.Driver”;private static String dbUrl="jdbc:mysql:/localhost:3306/article_db”;private static String user="root”;private static String password="root”;private static Connection conn=null;private static Statement stat=null;private static ResultSet rs=null;public static Connection getConnection()try Class.forName(driver);conn=DriverManager.getConnection(dbUrl, user, password); catch (ClassNotFoundException el) ( e1.printStackTrace();return null;catch (SQLException e) ( e.printStackTrace();return null;return conn;public static ResultSet executeQueary(String sql)System.out.println(sql);conn=getConnection();try stat=conn.createStatement();rs=stat.executeQuery(sql); catch (SQLException e) e.printStackTrace();return null;try return rs.next()?rs:null; catch (SQLException e) System.out.println("DBAccess 中发生了错误”); e.printStackTrace();return null;public static int executeUpdate(String sql)System.out.println("DB update:"+sql);conn=getConnection();int rows=0;try stat=conn.createStatement();rows=stat.executeU
