WEB開發(fā)技術(shù)實(shí)踐教程實(shí)驗(yàn)報(bào)告

1、 實(shí) 驗(yàn) 報(bào) 告實(shí)驗(yàn)課程： web開發(fā)技術(shù)實(shí)踐教程 學(xué)生姓名： 學(xué) 號(hào)： 專業(yè)班級(jí)： 2012年 12 月 20 日 目錄l 實(shí)驗(yàn)一 .l 實(shí)驗(yàn)二 .l 實(shí)驗(yàn)三 .l 實(shí)驗(yàn)四 .l 實(shí)驗(yàn)五 .l 實(shí)驗(yàn)六 .l 實(shí)驗(yàn)七 . 南昌大學(xué)實(shí)驗(yàn)報(bào)告學(xué)生姓名： 學(xué) 號(hào)： 專業(yè)班級(jí)： 實(shí)驗(yàn)類型： 驗(yàn)證 綜合 設(shè)計(jì) 創(chuàng)新 實(shí)驗(yàn)日期： 實(shí)驗(yàn)成績： 實(shí)驗(yàn)一 web編程環(huán)境一、 實(shí)驗(yàn)?zāi)康?. 搭建web編程環(huán)境，能正確安裝配置java運(yùn)行環(huán)境、web服務(wù)器和數(shù)據(jù)庫服務(wù)器2. 熟悉web編程集成環(huán)境myeclipse.3. 熟練掌握web工程的創(chuàng)建、發(fā)布、運(yùn)行流程。二、 實(shí)驗(yàn)內(nèi)容1. 安裝并配置java運(yùn)行環(huán)境jdk

2、和jre2. 安裝web服務(wù)器tomcat, 配置tomcat服務(wù)器3. 安裝并配置數(shù)據(jù)庫mysql.4. 安裝myeclispe，熟悉各項(xiàng)菜單項(xiàng)5. 為myeclispe集成配置jdk和tomcat6. 創(chuàng)建、發(fā)布、運(yùn)行一個(gè)web工程。三、 實(shí)驗(yàn)儀器及耗材計(jì)算機(jī)，jdk，tomcat, mysql, myeclipse等軟件。四、 實(shí)驗(yàn)步驟1、 安裝并配置jdk和jre2、 設(shè)置好classpath和path路徑3、 安裝tomcat5.54、 設(shè)置tomcat的配置屬性5、 安裝并配置mysql數(shù)據(jù)庫6、 安裝mysql administrator工具7、 安裝myeclipse8、 新建

3、并配置一個(gè)工程，運(yùn)行發(fā)布一個(gè)新的工程。五、 實(shí)驗(yàn)結(jié)果1、 jdk、jre安裝結(jié)果：2、 classpath和path設(shè)置3、 安裝并配置tomcat4、 安裝并配置mysql和mysql administrator 工具5、 安裝myeclipse6、 發(fā)布一個(gè)web工程。六、 實(shí)驗(yàn)心得 南昌大學(xué)實(shí)驗(yàn)報(bào)告學(xué)生姓名： 學(xué) 號(hào)： 專業(yè)班級(jí)： 實(shí)驗(yàn)類型： 驗(yàn)證 綜合 設(shè)計(jì) 創(chuàng)新 實(shí)驗(yàn)日期： 實(shí)驗(yàn)成績： 實(shí)驗(yàn)二 html和css編程技術(shù) 一、 實(shí)驗(yàn)?zāi)康?. 熟悉html靜態(tài)網(wǎng)頁編程技術(shù)，熟悉html各種標(biāo)記，特別是表單標(biāo)記2. 熟悉css編程技術(shù)，掌握css來格式化網(wǎng)頁、掌握css盒式模型3. 掌握d

4、iv+css布局和設(shè)計(jì)網(wǎng)頁，掌握css設(shè)計(jì)網(wǎng)頁的一般流程4. 熟悉dreamweaver的css設(shè)計(jì)器二、 實(shí)驗(yàn)內(nèi)容1. 構(gòu)思一個(gè)新聞發(fā)布網(wǎng)站，主題自選，設(shè)計(jì)好新聞?lì)悇e2. 制作主頁psd圖3. 用div+css布局主頁框架。（如可分成top, mid, foot, 其中mid再分兩大塊left和main）4. 分別細(xì)化設(shè)計(jì)每一大塊。5. 要中間部分的左邊或右邊要設(shè)計(jì)一個(gè)小登錄表單，并用css美化。三、 實(shí)驗(yàn)儀器及耗材計(jì)算機(jī)，dreamweaver 8，photoshop，myeclipse等軟件。四、 實(shí)驗(yàn)步驟1、 制作psd圖2、 使用div+css布局3、 細(xì)化每一塊4、 美化表單部分五

5、、 實(shí)驗(yàn)結(jié)果1、制作psd圖2、使用div+css布局3、細(xì)化每一塊4、美化表單部分六、 實(shí)驗(yàn)心得 南昌大學(xué)實(shí)驗(yàn)報(bào)告學(xué)生姓名： 學(xué) 號(hào)： 專業(yè)班級(jí)： 實(shí)驗(yàn)類型： 驗(yàn)證 綜合 設(shè)計(jì) 創(chuàng)新 實(shí)驗(yàn)日期： 實(shí)驗(yàn)成績： 實(shí)驗(yàn)三 javascript編程技術(shù)一、 實(shí)驗(yàn)?zāi)康?. 熟悉javascript語法2. 掌握javascript函數(shù)的創(chuàng)建和調(diào)用3. 熟悉javascript對(duì)象，特別是瀏覽器對(duì)象，了解dom模型，知道文檔對(duì)象的訪問方法。4. 會(huì)用javascript來對(duì)表單進(jìn)行驗(yàn)證。二、 實(shí)驗(yàn)內(nèi)容1. 用javascript完成對(duì)登錄表單的驗(yàn)證2. 設(shè)計(jì)一個(gè)新聞發(fā)布的頁面，并用javascript對(duì)

6、新聞發(fā)布表單進(jìn)行驗(yàn)證。三、 實(shí)驗(yàn)儀器及耗材計(jì)算機(jī)，dreamweaver 8，photoshop，myeclipse等軟件。四、 實(shí)驗(yàn)步驟1、 設(shè)計(jì)和實(shí)現(xiàn)對(duì)表單驗(yàn)證的過程代碼如下：function checklogin()var user=document.getelementsbyname(username)0.value;var pass=document.getelementsbyname(password)0.value;if(user=)alert(請(qǐng)輸入用戶名);return false;else if(pass=)alert(請(qǐng)輸入密碼);return false;elseret

7、urn true;2、 設(shè)計(jì)和實(shí)現(xiàn)對(duì)新聞發(fā)布的驗(yàn)證過程代碼如下：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(請(qǐng)輸入的作者);return false;if(t=)alert(請(qǐng)輸入的標(biāo)題);return false;else if(c=)alert(請(qǐng)輸入的內(nèi)容);return fal

8、se;else return true;五、 實(shí)驗(yàn)結(jié)果1、 表單驗(yàn)證結(jié)果2、 文章發(fā)布頁面驗(yàn)證六、 實(shí)驗(yàn)心得 南昌大學(xué)實(shí)驗(yàn)報(bào)告學(xué)生姓名： 學(xué) 號(hào)： 專業(yè)班級(jí)： 實(shí)驗(yàn)類型： 驗(yàn)證 綜合 設(shè)計(jì) 創(chuàng)新 實(shí)驗(yàn)日期： 實(shí)驗(yàn)成績： 實(shí)驗(yàn)四 servlet編程技術(shù)一、 實(shí)驗(yàn)?zāi)康?. 熟悉servlet技術(shù)的創(chuàng)建和運(yùn)行流程。2. 會(huì)在web.xml配置servlet的url3. 熟悉請(qǐng)求request和響應(yīng)response接口4. 熟悉請(qǐng)求轉(zhuǎn)發(fā)接口requestdispatcher接口5. 熟悉會(huì)話session接口，掌握基于session登錄權(quán)限控制。二、 實(shí)驗(yàn)內(nèi)容完成一個(gè)基于session的登錄權(quán)限控制模

9、塊。要求：a) 主頁登錄表單提交后轉(zhuǎn)到servlet進(jìn)行處理，根據(jù)用戶類型轉(zhuǎn)到不同的頁面。如果在用戶名或密碼不正確把登錄表單包含進(jìn)來b) 對(duì)于某些頁面必須登錄才能訪問，如新聞發(fā)布頁面。如果沒有登錄則禁止訪問，并重定向到登錄頁面。三、 實(shí)驗(yàn)儀器及耗材計(jì)算機(jī)， myeclipse等軟件。四、 實(shí)驗(yàn)步驟1、 設(shè)計(jì)和實(shí)現(xiàn)一個(gè)登錄表單2、 設(shè)計(jì)和實(shí)現(xiàn)實(shí)現(xiàn)驗(yàn)證的servlet，然后進(jìn)行驗(yàn)證五、 實(shí)驗(yàn)結(jié)果1、 表單驗(yàn)證效果2、 驗(yàn)證servlet源代碼public class loginservlet extends httpservlet /* * constructor of the object. *

10、/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 requ

11、est 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, ioexcepti

12、on 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 meth

13、od 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 er

14、ror 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.ou

15、t.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.setatt

16、ribute(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

17、(backpage).forward(request, response);elserequest.setattribute(loginresult,密碼錯(cuò)誤);request.getrequestdispatcher(member.jsp).forward(request, response);elserequest.setattribute(loginresult,用戶名不存在);request.getrequestdispatcher(login.jsp).forward(request, response);/* * initialization of the servlet. * *

18、 throws servletexception if an error occurs */public void init() throws servletexception / put your code here六、 實(shí)驗(yàn)心得 南昌大學(xué)實(shí)驗(yàn)報(bào)告學(xué)生姓名： 學(xué) 號(hào)： 專業(yè)班級(jí)： 實(shí)驗(yàn)類型： 驗(yàn)證 綜合 設(shè)計(jì) 創(chuàng)新 實(shí)驗(yàn)日期 實(shí)驗(yàn)成績 實(shí)驗(yàn)五 jsp編程技術(shù)一、 實(shí)驗(yàn)?zāi)康?. 熟悉jsp編譯指令，動(dòng)作標(biāo)記。7. 熟悉jsp的隱含對(duì)象8. 正確理解request、session、application三個(gè)對(duì)象的作用域9. 能正確處理漢字亂碼問題10. 能熟練使用jsp技術(shù)來編寫網(wǎng)頁二、 實(shí)驗(yàn)內(nèi)

19、容1. 編寫一個(gè)文章類，用myeclipse的工作自動(dòng)產(chǎn)生getter和settet函數(shù)2. 修改前面編寫過的管理員的新聞發(fā)布頁面，改成jsp頁面要求如下：1）撰寫界面至少包括文件標(biāo)題，所屬欄目、作者、內(nèi)容幾項(xiàng)2）界面用css進(jìn)行美化3）每個(gè)輸入框均應(yīng)有name屬性。4）權(quán)限控制，必須是管理員用戶才能訪問，跟前面實(shí)驗(yàn)的登錄權(quán)限控制關(guān)聯(lián)起來。 3. 編寫一個(gè)servlet來處理新聞發(fā)布頁面提交的表單要求：1）讀取表單各項(xiàng)內(nèi)容，并把存入一個(gè)文章對(duì)象中。2）把文章對(duì)象綁定在request對(duì)象中，并轉(zhuǎn)發(fā)到新聞顯示頁面。3. 編寫一個(gè)新聞顯示頁面。 要求： 1) 編寫靜態(tài)頁面模板，頁面用div+css設(shè)

20、計(jì)2）設(shè)定文章對(duì)象已存在request對(duì)象中，取出文章對(duì)象3）把靜態(tài)頁面的內(nèi)容改成動(dòng)態(tài)內(nèi)容，如標(biāo)題，作者，內(nèi)容等。三、 實(shí)驗(yàn)儀器及耗材計(jì)算機(jī)，dreamweaver 8，photoshop，myeclipse等軟件。四、 實(shí)驗(yàn)步驟1、 設(shè)計(jì)和實(shí)現(xiàn)新聞發(fā)布系統(tǒng)的頁面2、 、設(shè)計(jì)和實(shí)現(xiàn)后臺(tái)的servlet五、 實(shí)驗(yàn)結(jié)果1、 頁面的實(shí)現(xiàn)2、 servlet的實(shí)現(xiàn)public class articleservlet extends httpservlet private static final long serialversionuid = 1l;public articleservlet() s

21、uper();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 r

22、esponse 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.setcharactere

23、ncoding(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;

24、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(

25、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

26、(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

27、 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

28、 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.

29、getrequestdispatcher(article.jsp?articleid=+id).forward(request, response);else if(optype.equals(givecmt)/發(fā)表評(píng)論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.getparamet

30、er(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 you

31、r code here六、 實(shí)驗(yàn)心得 南昌大學(xué)實(shí)驗(yàn)報(bào)告學(xué)生姓名： 學(xué) 號(hào)： 專業(yè)班級(jí)： 實(shí)驗(yàn)類型： 驗(yàn)證 綜合 設(shè)計(jì) 創(chuàng)新 實(shí)驗(yàn)日期 實(shí)驗(yàn)成績 實(shí)驗(yàn)六 javabean編程技術(shù) 一、 實(shí)驗(yàn)?zāi)康?. 熟悉javabean的規(guī)范2. 會(huì)編寫javabean; 會(huì)在jsp和servlet中創(chuàng)建和使用javabean對(duì)象3. 掌握jsp的、的使用4. 掌握jsp中表單和表單bean的映射5. 掌握servlet中表單和表單bean的映射6. 會(huì)編寫封裝業(yè)績邏輯的javabean7. 會(huì)使用上傳下載組件jspsmartupload外部組件二、 實(shí)驗(yàn)內(nèi)容1. 修改前面的封裝新聞（文章）的javabean，

32、使其符合javabean規(guī)范2. 修改前面的新聞發(fā)表serlvet，用來完成新聞發(fā)布表單的處理，要求利用映射機(jī)制把新聞表單映射到新聞的javabean中，以便后繼把這個(gè)javabean寫入數(shù)據(jù)庫。3. 編寫一個(gè)封閉新聞管理的業(yè)務(wù)bean. 這里只需定義接口即可。4. 參考教材，編寫一個(gè)上傳下載模塊（可選）5. 參考教材，實(shí)現(xiàn)登錄動(dòng)態(tài)驗(yàn)證（可選）三、 實(shí)驗(yàn)儀器及耗材計(jì)算機(jī)，dreamweaver 8，photoshop，myeclipse等軟件。四、 實(shí)驗(yàn)步驟1、 編寫文章bean2、 編寫業(yè)務(wù)bean五、 實(shí)驗(yàn)結(jié)果1、 文章bean源代碼package article.entity;impor

33、t 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(str

34、ing 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 setcre

35、ated_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=n

36、ull;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的實(shí)現(xiàn)public cla

37、ss 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

38、;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(stri

39、ng 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ā)生了錯(cuò)誤);e.printstacktrace();return null;public static

40、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

41、.printstacktrace();if(stat!=null)try stat.close(); catch (sqlexception e) e.printstacktrace();if(conn!=null)try conn.close(); catch (sqlexception e) e.printstacktrace();六、 實(shí)驗(yàn)心得 南昌大學(xué)實(shí)驗(yàn)報(bào)告學(xué)生姓名： 學(xué) 號(hào)： 專業(yè)班級(jí)： 實(shí)驗(yàn)類型： 驗(yàn)證 綜合 設(shè)計(jì) 創(chuàng)新 實(shí)驗(yàn)日期： 實(shí)驗(yàn)成績 實(shí)驗(yàn)七 jdbc數(shù)據(jù)庫編程技術(shù) （4課時(shí)）一、 實(shí)驗(yàn)?zāi)康?. 掌握jdbc來訪問數(shù)據(jù)庫的一般步聚2. 掌握jdbc來連接各類數(shù)據(jù)庫3. 掌

42、握connection、statement、preparestatement和resultset幾個(gè)類。4. 掌握jdbc事務(wù)處理機(jī)制。5. 會(huì)編寫使用jdbc訪問數(shù)據(jù)庫的javabean6. 掌握分頁顯示技術(shù)7. 掌握連接池技術(shù)二、 實(shí)驗(yàn)內(nèi)容1. 創(chuàng)建一個(gè)數(shù)據(jù)庫，創(chuàng)建用戶信息表、新聞表（與前面的javabean對(duì)應(yīng)，注意類型的選擇）2. 創(chuàng)建一個(gè)訪問數(shù)據(jù)庫的javabean, 或把創(chuàng)建連接createconn(), 關(guān)閉連接closeconn()方法寫到新聞管理業(yè)務(wù)bean中。3. 實(shí)現(xiàn)新聞管理業(yè)務(wù)bean中的各個(gè)模塊，如登錄驗(yàn)證、新聞發(fā)布、新聞列表、新聞閱讀等數(shù)據(jù)庫訪問。4. 配置tomc

43、at自帶的連接池，并修改訪問數(shù)據(jù)庫的bean或新聞管理業(yè)務(wù)bean中的創(chuàng)建連接方法createconn()，使之能調(diào)用連接池。5. 編寫新聞閱讀、新聞列表jsp頁面。三、 實(shí)驗(yàn)儀器及耗材計(jì)算機(jī)，dreamweaver 8，myeclipse等軟件。四、 實(shí)驗(yàn)步驟1、 創(chuàng)建數(shù)據(jù)庫2、 創(chuàng)建數(shù)據(jù)庫連接的類3、 設(shè)計(jì)和實(shí)現(xiàn)各個(gè)模塊的javabean五、 實(shí)驗(yàn)結(jié)果1、 數(shù)據(jù)庫2、 數(shù)據(jù)庫連接類3、 設(shè)計(jì)和實(shí)現(xiàn)各個(gè)模塊的javabeanpublic class articlebll public vector getpageofarticles(int pagesize,int pageindex,in

44、t 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.se

45、tcreated_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(rs.ge