《南昌大学WEB开发技术实践教程实验报告.docx》由会员分享，可在线阅读，更多相关《南昌大学WEB开发技术实践教程实验报告.docx（43页珍藏版）》请在三一办公上搜索。
1、实验报告实验课程：WEB开发技术实践教程学生姓名：学 号：专业班级：2012年12 月 20日目录实验一实验二实验三实验四实验五实验六 实验七学生姓名：学 号： 专业班级：实验类型：口验证综合设计口创新 实验日期：.实验成绩:实验一 Web编程环境一、实验目的1. 搭建Web编程环境，能正确安装配置java运行环境、WEB服务器和数据库服务器2. 熟悉WEB编程集成环境MYEclipse.3. 熟练掌握WEB工程的创建、发布、运行流程。二、实验内容1. 安装并配置java运行环境JDK和JRE2. 安装Web服务器tomcat，配置Tomcat服务器3. 安装并配置数据库MySQL.4. 安装
2、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 和 pat
3、h 设置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. xE
4、q Stopped6、发布一个Web工程。诘：；S-S-.Q-咨*言sssrcJT1E 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勺 EServer Tcmcat 5.
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布
6、局和设计网页，掌握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
7、图上边登家口统计中间部分统计统计2、使用DIV+CSS布局3、细化每一块4、美化表单部分六、实验心得学生姓名：学 号： 专业班级：实验类型：口验证综合设计口创新 实验日期：.实验成绩：实验三JavaScript编程技术一、实验目的1. 熟悉JavaScript语法2. 掌握JavaScript函数的创建和调用3. 熟悉JavaScript对象，特别是浏览器对象，了解DOM模型，知道文档对象的访问 方法。4. 会用JavaScript来对表单进行验证。二、实验内容1. 用JavaScript完成对登录表单的验证2. 设计一个新闻发布的页面，并用JavaScript对新闻发布表单进行验证。三、实验
8、仪器及耗材计算机，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
9、、设计和实现对新闻发布的验证过程代码如下：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
10、(return true;五、实验结果1、表单验证结果管理员用户名:2、文章发布页面验证管理员密码:文章题目：文章作者:六、实验心得学生姓名：学 号： 专业班级：实验类型：口验证综合设计口创新 实验日期：实验成绩:实验四Servlet编程技术一、实验目的1. 熟悉Servlet技术的创建和运行流程。2. 会在 web.xml 配置 Servlet 的 URL3. 熟悉请求request和响应response接口4. 熟悉请求转发接口 requestDispatcher接口5. 熟悉会话Session接口，掌握基于Session登录权限控制。二、实验内容完成一个基于Session的登录权限控制模
11、块。要求：a）主页登录表单提交后转到Servlet进行处理，根据用户类型转到不同的页面。如果 在用户名或密码不正确把登录表单包含进来b）对于某些页面必须登录才能访问，如新闻发布页面。如果没有登录则禁止访问，并 重定向到登录页面。三、实验仪器及耗材计算机，MyEclipse等软件。四、实验步骤1、设计和实现一个登录表单2、设计和实现实现验证的Servlet，然后进行验证五、实验结果1、表单验证效果登录失败：密码错误管理员用户名:管理员密码：登录重置登录失败：用户名不存在2、验证Servlet源代码public class LoginServlet extends HttpServlet (/*
12、Constructor of the object.*/public LoginServlet() (super();/* Destruction of the servlet, */public void destroy() (super.destroy(); / Just puts destroy string in log/ Put your code here/* The doGet method of the servlet, * This method is called when a form has its tag value method equals to get.* pa
13、ram 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 ServletEx
14、ception, IOException (response.setContentType(text/html);PrintWriter out = response.getWriter();out.println();out.println();out.println( A Servlet);out.println( );out.print( This is );out.print(this.getClass();out.println(, using the GET method);out.println( );out.println();out.flush();out.close();/
15、* The doPost method of the servlet. * 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
16、 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(usernam
17、e);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);se
18、ssion.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.
19、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 s
20、ervlet, * 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. 编写一个文
21、章类，用Myeclipse的工作自动产生getter和settet函数2. 修改前面编写过的管理员的新闻发布页面，改成JSP页面要求如下：1）撰写界面至少包括文件标题，所属栏目、作者、内容几项2）界面用CSS进行美化3）每个输入框均应有name属性。4）权限控制，必须是管理员用户才能访问，跟前面实验的登录权限控制关联起来。3. 编写一个Servlet来处理新闻发布页面提交的表单要求：1）读取表单各项内容，并把存入一个文章对象中。2）把文章对象绑定在request对象中，并转发到新闻显示页面。3, 编写一个新闻显示页面。要求：1）编写静态页面模板，页面用div+css设计2）设定文章对象已存在r
22、equest对象中，取出文章对象3）把静态页面的内容改成动态内容，如标题，作者，内容等。三、实验仪器及耗材计算机，Dreamweaver 8，Photoshop， MyEclipse 等软件。四、实验步骤1、设计和实现新闻发布系统的页面2、设计和实现后台的Servlet五、实验结果1、页面的实现管理员用户名：管理员密码：提交重置文章题目，文章作者艾章内容2、Servlet的实现public class ArticleServlet extends HttpServlet (private static final long serialVfersionUID = 1L;public Artic
23、leServlet() (super();public void destroy() (super.destroy(); / Just puts destroy string in log/ Put your code here/* The doGet method of the servlet, * 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 respons
24、e 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.setChar
25、acterEncoding(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
26、 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.pars
27、eInt(aid);catch(NumberFormatException e)id=1;Vector 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.pars
28、eInt(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. * This method is called when a form has its tag value method equals to post.* param request the request sen
29、d 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 (requ
30、est.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.getRequ
31、estDispatcher(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);
32、c.setContent(request.getParameter(content);new CommentBll().insert(c);request.getRequestDispatcher(article.jsp?articleId=+id).forward(request, response);/* Initialization of the servlet. * throws ServletException if an error occurs*/public void init() throws ServletException (/ Put your code here六、实
33、验心得学生姓名：学 号： 专业班级：实验类型：口验证综合设计口创新 实验日期实验成绩 实验六 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. 修改前面的封装新闻（文章
34、）的JavaBean，使其符合JavaBean规范2. 修改前面的新闻发表Serlvet，用来完成新闻发布表单的处理，要求利用映射机制 把新闻表单映射到新闻的JavaBean中，以便后继把这个JavaBean写入数据库。3. 编写一个封闭新闻管理的业务Bean.这里只需定义接口即可。4. 参考教材，编写一个上传下载模块（可选）5. 参考教材，实现登录动态验证（可选）三、实验仪器及耗材计算机，Dreamweaver 8，Photoshop， MyEclipse 等软件。四、实验步骤1、编写文章Bean2、编写业务Bean五、实验结果1、文章Bean源代码package article.entit
35、y;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 setTi
36、tle(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
37、 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) ( Administ
38、rator 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的实现p
39、ublic 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 Resu
40、ltSet 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 e
41、xecuteQueary(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
