南昌大學(xué)WEB實驗報告.doc

精品文檔實 驗 報 告實驗課程： WEB編程 學(xué)生姓名： 學(xué) 號： 專業(yè)班級： 2010年 12 月 20 日 目錄l 實驗一 .l 實驗二 .l 實驗三 .l 實驗四 .l 實驗五 .l 實驗六 .l 實驗七 . 南昌大學(xué)實驗報告學(xué)生姓名： 學(xué) 號： 專業(yè)班級： 實驗類型： 驗證 綜合 設(shè)計 創(chuàng)新 實驗日期：2010年9月15 日 實驗成績： 實驗一 Web編程環(huán)境一、 實驗?zāi)康?. 搭建Web編程環(huán)境，能正確安裝配置java運行環(huán)境、WEB服務(wù)器和數(shù)據(jù)庫服務(wù)器2. 熟悉WEB編程集成環(huán)境MYEclipse.3. 熟練掌握WEB工程的創(chuàng)建、發(fā)布、運行流程。二、 實驗內(nèi)容1. 安裝并配置java運行環(huán)境JDK和JRE2. 安裝Web服務(wù)器tomcat, 配置Tomcat服務(wù)器3. 安裝并配置數(shù)據(jù)庫MySQL.4. 安裝MyEclispe，熟悉各項菜單項5. 為MyEclispe集成配置JDK和Tomcat6. 創(chuàng)建、發(fā)布、運行一個WEB工程。三、 實驗儀器及耗材計算機，JDK，TOMCAT, MySQL, MyEclipse等軟件。四、 實驗步驟1、 安裝并配置JDK和JRE2、 設(shè)置好classpath和path路徑3、 安裝Tomcat5.54、 設(shè)置Tomcat的配置屬性5、 安裝并配置MySQL數(shù)據(jù)庫6、 安裝MySqL Administrator工具7、 安裝MyEclipse8、 新建并配置一個工程，運行發(fā)布一個新的工程。五、 實驗結(jié)果1、 JDK、JRE安裝結(jié)果：2、 Classpath和path設(shè)置3、 安裝并配置Tomcat4、 安裝并配置MySqL和MySqL Administrator 工具5、 安裝MyEclipse6、 發(fā)布一個Web工程。六、 實驗心得 南昌大學(xué)實驗報告學(xué)生姓名： 學(xué) 號： 專業(yè)班級： 實驗類型： 驗證 綜合 設(shè)計 創(chuàng)新 實驗日期：2010年9月22 日 實驗成績： 實驗二 HTML和CSS編程技術(shù) 一、 實驗?zāi)康?. 熟悉HTML靜態(tài)網(wǎng)頁編程技術(shù)，熟悉HTML各種標(biāo)記，特別是表單標(biāo)記2. 熟悉CSS編程技術(shù)，掌握CSS來格式化網(wǎng)頁、掌握CSS盒式模型3. 掌握DIV+CSS布局和設(shè)計網(wǎng)頁，掌握CSS設(shè)計網(wǎng)頁的一般流程4. 熟悉Dreamweaver的CSS設(shè)計器二、 實驗內(nèi)容1. 構(gòu)思一個新聞發(fā)布網(wǎng)站，主題自選，設(shè)計好新聞類別2. 制作主頁PSD圖3. 用DIV+CSS布局主頁框架。（如可分成top, mid, foot, 其中mid再分兩大塊left和main）4. 分別細化設(shè)計每一大塊。5. 要中間部分的左邊或右邊要設(shè)計一個小登錄表單，并用CSS美化。三、 實驗儀器及耗材計算機，Dreamweaver 8，Photoshop，MyEclipse等軟件。四、 實驗步驟1、 制作PSD圖2、 使用DIV+CSS布局3、 細化每一塊4、 美化表單部分五、 實驗結(jié)果1、制作PSD圖2、使用DIV+CSS布局3、細化每一塊4、美化表單部分六、 實驗心得 南昌大學(xué)實驗報告學(xué)生姓名： 學(xué) 號： 專業(yè)班級： 實驗類型： 驗證 綜合 設(shè)計 創(chuàng)新 實驗日期：2010年9月15 日 實驗成績： 實驗三 JavaScript編程技術(shù)一、 實驗?zāi)康?. 熟悉JavaScript語法2. 掌握JavaScript函數(shù)的創(chuàng)建和調(diào)用3. 熟悉JavaScript對象，特別是瀏覽器對象，了解DOM模型，知道文檔對象的訪問方法。4. 會用JavaScript來對表單進行驗證。二、 實驗內(nèi)容1. 用JavaScript完成對登錄表單的驗證2. 設(shè)計一個新聞發(fā)布的頁面，并用JavaScript對新聞發(fā)布表單進行驗證。三、 實驗儀器及耗材計算機，Dreamweaver 8，Photoshop，MyEclipse等軟件。四、 實驗步驟1、 設(shè)計和實現(xiàn)對表單驗證的過程代碼如下：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;elsereturn true;2、 設(shè)計和實現(xiàn)對新聞發(fā)布的驗證過程代碼如下：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(請輸入的標(biāo)題);return false;else if(c=)alert(請輸入的內(nèi)容);return false;else return true;五、 實驗結(jié)果1、 表單驗證結(jié)果2、 文章發(fā)布頁面驗證六、 實驗心得 南昌大學(xué)實驗報告學(xué)生姓名： 學(xué) 號： 專業(yè)班級： 實驗類型： 驗證 綜合 設(shè)計 創(chuàng)新 實驗日期：2010年9月29 日 實驗成績： 實驗四 Servlet編程技術(shù)一、 實驗?zāi)康?. 熟悉Servlet技術(shù)的創(chuàng)建和運行流程。2. 會在web.xml配置Servlet的URL3. 熟悉請求request和響應(yīng)response接口4. 熟悉請求轉(zhuǎn)發(fā)接口requestDispatcher接口5. 熟悉會話Session接口，掌握基于Session登錄權(quán)限控制。二、 實驗內(nèi)容完成一個基于Session的登錄權(quán)限控制模塊。要求：a) 主頁登錄表單提交后轉(zhuǎn)到Servlet進行處理，根據(jù)用戶類型轉(zhuǎn)到不同的頁面。如果在用戶名或密碼不正確把登錄表單包含進來b) 對于某些頁面必須登錄才能訪問，如新聞發(fā)布頁面。如果沒有登錄則禁止訪問，并重定向到登錄頁面。三、 實驗儀器及耗材計算機， MyEclipse等軟件。四、 實驗步驟1、 設(shè)計和實現(xiàn)一個登錄表單2、 設(shè)計和實現(xiàn)實現(xiàn)驗證的Servlet，然后進行驗證五、 實驗結(jié)果1、 表單驗證效果2、 驗證Servlet源代碼public class LoginServlet extends HttpServlet /* * 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. * * 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();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();/* * 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 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. * * throws ServletException if an error occurs */public void init() throws ServletException / Put your code here六、 實驗心得 南昌大學(xué)實驗報告學(xué)生姓名： 學(xué) 號： 專業(yè)班級： 實驗類型： 驗證 綜合 設(shè)計 創(chuàng)新 實驗日期2010年10月13日 實驗成績： 實驗五 JSP編程技術(shù)一、 實驗?zāi)康?. 熟悉JSP編譯指令，動作標(biāo)記。7. 熟悉JSP的隱含對象8. 正確理解request、session、application三個對象的作用域9. 能正確處理漢字亂碼問題10. 能熟練使用JSP技術(shù)來編寫網(wǎng)頁二、 實驗內(nèi)容1. 編寫一個文章類，用Myeclipse的工作自動產(chǎn)生getter和settet函數(shù)2. 修改前面編寫過的管理員的新聞發(fā)布頁面，改成JSP頁面要求如下：1）撰寫界面至少包括文件標(biāo)題，所屬欄目、作者、內(nèi)容幾項2）界面用CSS進行美化3）每個輸入框均應(yīng)有name屬性。4）權(quán)限控制，必須是管理員用戶才能訪問，跟前面實驗的登錄權(quán)限控制關(guān)聯(lián)起來。 3. 編寫一個Servlet來處理新聞發(fā)布頁面提交的表單要求：1）讀取表單各項內(nèi)容，并把存入一個文章對象中。2）把文章對象綁定在request對象中，并轉(zhuǎn)發(fā)到新聞顯示頁面。3. 編寫一個新聞顯示頁面。 要求： 1) 編寫靜態(tài)頁面模板，頁面用div+css設(shè)計2）設(shè)定文章對象已存在request對象中，取出文章對象3）把靜態(tài)頁面的內(nèi)容改成動態(tài)內(nèi)容，如標(biāo)題，作者，內(nèi)容等。三、 實驗儀器及耗材計算機，Dreamweaver 8，Photoshop，MyEclipse等軟件。四、 實驗步驟1、 設(shè)計和實現(xiàn)新聞發(fā)布系統(tǒng)的頁面2、 、設(shè)計和實現(xiàn)后臺的Servlet五、 實驗結(jié)果1、 頁面的實現(xiàn)2、 Servlet的實現(xiàn)public class ArticleServlet extends HttpServlet private static final long serialVersionUID = 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. * * 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 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;try id=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;try id=Integer.parseInt(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;try id=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. * * 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;try id=Integer.parseInt(aid);catch(NumberFormatException e)id=1; request.getRequestDispatcher(article.jsp?articleId=+id).forward(request, response);else if(opType.equals(givecmt)/發(fā)表評論String aid=request.getParameter(articleId);int id=0;try id=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. * * throws ServletException if an error occurs */public void init() throws ServletException / Put your code here六、 實驗心得 南昌大學(xué)實驗報告學(xué)生姓名： 學(xué) 號： 專業(yè)班級： 實驗類型： 驗證 綜合 設(shè)計 創(chuàng)新 實驗日期2010年10月20 日 實驗成績： 實驗六 JavaBean編程技術(shù) 一、 實驗?zāi)康?. 熟悉JavaBean的規(guī)范2. 會編寫JavaBean; 會在JSP和Servlet中創(chuàng)建和使用JavaBean對象3. 掌握JSP的、的使用4. 掌握JSP中表單和表單Bean的映射5. 掌握Servlet中表單和表單Bean的映射6. 會編寫封裝業(yè)績邏輯的JavaBean7. 會使用上傳下載組件jspSmartUpload外部組件二、 實驗內(nèi)容1. 修改前面的封裝新聞（文章）的JavaBean，使其符合JavaBean規(guī)范2. 修改前面的新聞發(fā)表Serlvet，用來完成新聞發(fā)布表單的處理，要求利用映射機制把新聞表單映射到新聞的JavaBean中，以便后繼把這個JavaBean寫入數(shù)據(jù)庫。3. 編寫一個封閉新聞管理的業(yè)務(wù)Bean. 這里只需定義接口即可。4. 參考教材，編寫一個上傳下載模塊（可選）5. 參考教材，實現(xiàn)登錄動態(tài)驗證（可選）三、 實驗儀器及耗材計算機，Dreamweaver 8，Photoshop，MyEclipse等軟件。四、 實驗步驟1、 編寫文章Bean2、 編寫業(yè)務(wù)Bean五、 實驗結(jié)果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、 業(yè)務(wù)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、 數(shù)據(jù)庫連接Bean的實現(xiàn)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 e1) 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中發(fā)生了錯誤);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.executeUpdate(sql); catch (SQLException e) e.printStackTrace();return 0;return rows;public static void close()if(rs!=null)try rs.close(); catch (SQLException e) e.printStackTrace();if(stat!=null)try stat.close(); catch (SQLException e) e.printStackTrace();if(conn!=null)try conn.close(); catch (SQLException e) e.printStackTrace();六、 實驗心得 南昌大學(xué)實驗報告學(xué)生姓名： 學(xué) 號： 專業(yè)班級： 實驗類型： 驗證 綜合 設(shè)計 創(chuàng)新 實驗日期： 2010-12-12 實驗成績： 實驗七 JDBC數(shù)據(jù)庫編程技術(shù) （4課時）一、 實驗?zāi)康?. 掌握JDBC來訪問數(shù)據(jù)庫的一般步聚2. 掌握JDBC來連接各類數(shù)據(jù)庫3. 掌握Connection、Statement、PrepareStatement和ResultSet幾個類。4. 掌握JDBC事務(wù)處理機制。5. 會編寫使用JDBC訪問數(shù)據(jù)庫的JavaBean6. 掌握分頁顯示技術(shù)7. 掌握連接池技術(shù)二、 實驗內(nèi)容1. 創(chuàng)建一個數(shù)據(jù)庫，創(chuàng)建用戶信息表、新聞表（與前面的JavaBean對應(yīng)，注意類型的選擇）2. 創(chuàng)建一個訪問數(shù)據(jù)庫的JavaBean, 或把創(chuàng)建連接createConn(), 關(guān)閉連接closeConn()方法寫到新聞管理業(yè)務(wù)Bean中。3. 實現(xiàn)新聞管理業(yè)務(wù)Bean中的各個模塊，如登錄驗證、新聞發(fā)布、新聞列表、新聞閱讀等數(shù)據(jù)庫訪問。4. 配置Tomcat自帶的連接池，并修改訪問數(shù)據(jù)庫的Bean或新聞管理業(yè)務(wù)Bean中的創(chuàng)建連接方法createConn()，使之能調(diào)用連接池。5. 編寫新聞閱讀、新聞列表JSP頁面。三、 實驗儀器及耗材計算機，Dreamweaver 8，MyEclipse等軟件。四、 實驗步驟1、 創(chuàng)建數(shù)據(jù)庫2、 創(chuàng)建數(shù)據(jù)庫連接的類3、 設(shè)計和實現(xiàn)各個模塊的Javabean五、 實驗結(jié)果1、 數(shù)據(jù)庫2、 數(shù)據(jù)庫連接類3、 設(shè)計和實現(xiàn)各個模塊的Javabeanpublic class ArticleBll public Vector getPageOfArticles(int pageSize,int pageIndex,int increase)Vector as=new Vector();String sql=select * from article limit +(pageIndex-1)*pageSize+,+increase;ResultSet rs=DBAccess.executeQueary(sql);if(rs!=null)try doArticle a=new Article();a.setId(rs.getInt(1);a.setTitle(rs.getString(2);a.setAuthor(rs.getString(3);a.setContent(rs.getString(4);a.setCreated_time(rs.getDate(5);a.setUpdated_time(rs.getDate(6);as.add(a);while(rs.next(); catch (SQLException e) return as;finallyDBAccess.close();return as;public Article getArticle(int id)Article a=new Article();String sql=select * from article where id=+id;ResultSet rs=DBAccess.executeQueary(sql);if(rs!=null)try doa.setId(rs.getInt(1);a.setTitle(rs.getString(2);a.setAuthor(r