【正文】 班級(jí)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)畢業(yè)設(shè)計(jì) 目錄 引言 2 1 網(wǎng)站結(jié)構(gòu)設(shè)計(jì) 3 2 系統(tǒng)功能結(jié)構(gòu)圖 3 3 系統(tǒng) ER 圖設(shè)計(jì) 5 4 數(shù)據(jù)庫設(shè)計(jì) 7 5 系統(tǒng)詳細(xì)設(shè)計(jì) 8 51 網(wǎng)站布局和格式 8 52 注冊(cè)和登錄模塊設(shè)計(jì) 9 53 留言功能模塊的設(shè)計(jì) 11 54 資料修改功能模塊的設(shè)計(jì) 12 55 相片上傳與瀏覽的設(shè)計(jì) 12 56 相片的列表與顯示 12 總結(jié) 14 參考文獻(xiàn) 15 班級(jí)網(wǎng)站設(shè)計(jì) 引言 伴隨著網(wǎng)絡(luò)的出現(xiàn)網(wǎng)頁逐漸融入人們的生活快速及時(shí)的新聞瀏覽五彩繽紛的網(wǎng)上信息使網(wǎng)絡(luò) 與人們的生活息息相關(guān)于是世界上又出現(xiàn)了第三媒體Inter 它打破了地域限制真正使信息得以共享改變了人們的工作和生活方式制作網(wǎng)頁是企業(yè)和個(gè)人的宣傳自己的重要手段同時(shí)也是學(xué)習(xí)者獲取學(xué)習(xí)信息的重要手段尤其是在領(lǐng)域人們對(duì)信息的需求有了更新更高的要求而網(wǎng)頁由于本身所具有的信息量大傳遞快速?zèng)]有時(shí)空限制等特點(diǎn)恰好滿足這種要求所以網(wǎng)頁也逐漸成為一種新興的資源也正是由于網(wǎng)絡(luò)實(shí)現(xiàn)網(wǎng)站的數(shù)據(jù)信息能夠進(jìn)行實(shí)時(shí)交互保證網(wǎng)站數(shù)據(jù)的實(shí)時(shí)性隨著 Inter 的進(jìn)一步發(fā)展靜態(tài) Web 站點(diǎn)的開發(fā)與維護(hù)變得越來越困難一方面信息的不斷增加和變 化使站點(diǎn)維護(hù)人員不得不經(jīng)常修改他們的網(wǎng)頁特別是基于數(shù)據(jù)庫驅(qū)動(dòng)的 Web 站點(diǎn)更是如此隨著 Inter 上信息量的增多和交互性的加強(qiáng)使 6HTML 顯得越來越難以勝任另一方面靜態(tài)網(wǎng)頁由于不能與瀏覽者進(jìn)行有效交互使人們感到越來越乏味而不愿意再一次地進(jìn)入同一站點(diǎn)所以開發(fā)動(dòng)態(tài)網(wǎng)頁或動(dòng)態(tài)內(nèi)容成了越來越多的站點(diǎn)所追求目標(biāo)所謂動(dòng)態(tài)內(nèi)容是由每一個(gè)用戶按照自己的需求發(fā)出請(qǐng)求而特殊制作的 Web 網(wǎng)頁網(wǎng)絡(luò)發(fā)展前景無限及早與網(wǎng)絡(luò)結(jié)合與信息時(shí)代同步與高科技匯合定會(huì)給社會(huì)各行各業(yè)的發(fā)展注入新鮮的活力站在網(wǎng)絡(luò)時(shí)代的前夜我們清晰地聽到了網(wǎng)絡(luò)時(shí)代 的宣言誰掌握了網(wǎng)絡(luò)誰就掌握了未來網(wǎng)站主頁采用靜動(dòng)相結(jié)合的方式即靜態(tài)的主畫面和動(dòng)態(tài)的圖片相結(jié)合體現(xiàn)的勃勃生氣 圖 1 網(wǎng)站系統(tǒng)結(jié)構(gòu)圖 圖 2 前臺(tái)功能模塊結(jié)構(gòu)圖 圖 3 后臺(tái)功能模塊結(jié)構(gòu)圖 網(wǎng)站的具體結(jié)構(gòu)如圖 2所示在首頁上共有 7個(gè)大的功能菜單每個(gè)菜單鏈接一個(gè)功能頁面每個(gè)頁面實(shí)現(xiàn)不同功能 圖 4 充分利用 ASP 的強(qiáng)大功能在網(wǎng)站中提供留言簿公告欄等交流場所為同學(xué)們展開信息交流提供方便 3 系統(tǒng) ER 圖設(shè)計(jì) 登陸實(shí)體 ER 圖 圖 5 登陸實(shí)體 ER 圖 管理員信息實(shí)體 ER 圖 圖 6 管理員實(shí)體 ER 圖 同學(xué)信息實(shí)體 ER 圖 圖 7 同學(xué)實(shí)體 ER 圖 4 數(shù)據(jù)庫設(shè)計(jì)采用的數(shù)據(jù)庫是 Microsoft Access 建立庫文件包含如下幾個(gè)表文件信息表 Loginfo 來訪登陸時(shí)間信息表 mssg 留言信息表 photo 圖片內(nèi)容說明信息表 user 成員地址信息表 5 系統(tǒng)詳細(xì)設(shè)計(jì) 51 網(wǎng)站布局和格式 首先要規(guī)劃好網(wǎng)站的結(jié)構(gòu)對(duì)網(wǎng)站的網(wǎng)頁大體布局有一個(gè)具體的輪廓并且為網(wǎng)站的主頁及二級(jí)頁面確定一個(gè)共同的格式包括整個(gè)頁面的顏色寬度陰影背景字體的大小顏色這就需要我們制作一個(gè)超文本樣式表 css 文件以供每個(gè)網(wǎng)頁調(diào)用 為網(wǎng)站設(shè)計(jì)一個(gè)主頁面使用 DreameWeaver MX 來制作還要用到 HTML 語言VBScriptJavaScript 等將前面說到的功能和內(nèi)容以菜單的形式列出在主頁上級(jí)聯(lián)菜單上是一些具體的功能和內(nèi)容當(dāng)然這個(gè)菜單是用 JavaScript 編制出來的一個(gè)函數(shù)然后在每一個(gè)菜單文件的代碼中再調(diào)用這個(gè)函數(shù)其它的菜單也可以用同樣的代碼來實(shí)現(xiàn)同樣對(duì)于二級(jí)頁面的設(shè)計(jì)以及其它頁面的設(shè)計(jì)也是與主頁相同如果這些頁面的主要部分與先前設(shè)計(jì)的主頁主體部分風(fēng)格和布局以 及菜單都相同那么我們就可以先建立一個(gè)空的含菜單的文件作為模板以后每建立一個(gè)類似的頁面就可以調(diào)用此模板文件在此基礎(chǔ)上再進(jìn)行修改補(bǔ)充 [8] 52 注冊(cè)和登錄模塊設(shè)計(jì) 注冊(cè)登錄模塊是系統(tǒng)的門戶在整個(gè)系統(tǒng)中占有重要的地位它的主要功能是根據(jù)用戶的錄入信息進(jìn)行身份識(shí)別排除非法用戶對(duì)本系統(tǒng)的使用對(duì)合法用戶則按照不同的級(jí)別分類處理從而保證系統(tǒng)的運(yùn)行安全用戶進(jìn)入主頁面后要想法使用其他菜單的功能必須先進(jìn)行注冊(cè)在將表單提交后調(diào)用相應(yīng)的程序進(jìn)行處理處理程序首先與數(shù)據(jù)庫連接查看是否存在同名和同密碼的用戶若存在則顯示提示信息并重新返回注 冊(cè)表單用戶輸入新的信息進(jìn)行重新注冊(cè)若不存在同名且同密碼的用戶則將注冊(cè)信息寫入數(shù)據(jù)庫 如若用戶已經(jīng)注冊(cè)則可輸入名稱和密碼進(jìn)入在此過程中驗(yàn)證名稱和密碼是否相符以及在登錄過程中用戶的請(qǐng)求是否被允許從而顯示不同的提示頁面 用戶登錄的流程圖如圖 4 所示 通過在表單輸入用戶名和密碼后點(diǎn)擊登錄提交表單激活后臺(tái)登錄程序如果用戶名和密碼匹配就可以進(jìn)入反之顯示錯(cuò)誤提醒頁面若登錄成功登錄程序會(huì)把登錄用戶的信息寫進(jìn) Cookies 供以后各項(xiàng)功能實(shí)現(xiàn)時(shí)使用 如果成功登錄后將出現(xiàn)如圖 5 的界面 圖 5 53 留言功能模塊的設(shè)計(jì) Web留言板類似 于 BBS 但 BBS的版面過多不同的留言放在不同的主題中由于龐大的信息量影響到網(wǎng)頁信息搜索的速度不適合應(yīng)用于小型網(wǎng)站本文所設(shè)計(jì)的是用于一個(gè)班級(jí)同學(xué)之間進(jìn)行信息交流的場所規(guī)模小設(shè)計(jì)簡單的 Web 留言版就可以實(shí)現(xiàn)信息交流的功能而且它小巧簡單因此更易于實(shí)現(xiàn)在速度上比 BBS 也占優(yōu) 系統(tǒng)功能分析 1 登錄已經(jīng)注冊(cè)的用戶可以在登錄界面輸入正確的用戶名和密碼就能夠直接進(jìn)入到留言板頁面同時(shí)不相關(guān)的信息寫到 Cookies 數(shù)據(jù)集里供以后各項(xiàng)功能實(shí)現(xiàn)時(shí)使用 2 注冊(cè)如果是新用戶想進(jìn)入留言板就必須通過注冊(cè)得到批準(zhǔn)成為合法用戶而取得留言及 其權(quán)限 3 留言已經(jīng)取得合法權(quán)限的用戶可以在留言板里進(jìn)行留言或查看留言 動(dòng)態(tài)網(wǎng)頁要處理很多信息這些龐大的信息一般交給后臺(tái)數(shù)據(jù)庫去處理而Web 數(shù)據(jù)庫應(yīng)用系統(tǒng)則通過 Inter 平臺(tái)連接數(shù)據(jù)庫取得數(shù)據(jù)集對(duì)其進(jìn)行添加修改查詢刪除等操作對(duì)數(shù)據(jù)庫進(jìn)行的各種操作可以通過使用 SQL 語言來實(shí)現(xiàn)本文設(shè)計(jì)的留言板是以 Access 2021作為后臺(tái)數(shù)據(jù)庫以操作接口而論具備方便簡易的特性同時(shí)能完全利用 Windows資源 ASP通過使用 ADO所提供的對(duì)象及方法能幫助用戶建立各式各樣符合用戶需求的 Web 數(shù)據(jù)庫應(yīng)用系統(tǒng) OLEDBOLEDB 是連接數(shù)據(jù)庫的新低層界面它能處理任何類型的數(shù)據(jù)無論它們的格式和保存方式是什么程序開發(fā)者并不需要確切去了解其結(jié)構(gòu)只需要懂得如何利用它去連接數(shù)據(jù)庫即可 在本留言板中利用 Microsoft Access2021 建立了 1 個(gè) datamdb 數(shù)據(jù)庫而在其里面包含了 2個(gè)表 user和 mssg整個(gè)留言板的所有信息交流都以這 2個(gè)表為基礎(chǔ)所有數(shù)據(jù)的存取都通過對(duì)這 2 個(gè)表而進(jìn)行操作表 user 是用來存放注冊(cè)用戶的資料表 mssg 是用來存放所有留言的信息在完成數(shù)據(jù)庫制作后我們?cè)趯?duì)數(shù)據(jù)庫進(jìn)行存取前必須要進(jìn)行數(shù)據(jù)庫的連接工作進(jìn)行數(shù)據(jù)庫連接的方 式有幾種其中 1 種是通過控制面板→管理工具→數(shù)據(jù)源 ODBC 來設(shè)置系統(tǒng) DSN完成系統(tǒng) DSN設(shè)置后就可以通過 ADO 對(duì)象對(duì)數(shù)據(jù)庫進(jìn)行存取操作了 531 瀏覽留言 用戶可以在該頁面瀏覽全部的留言這些留言都存放在表 mssg 里頁面MSGBOARDASP 中的顯示留言可通過對(duì)表 mssg 操作而顯示到頁面上隨著留言的增多如果在一個(gè)頁面里留言全部的留言可想而知是非常不方便的因此本設(shè)計(jì)為留言板提供了分頁顯示功能通過 ASP 提供的 Recordset 的 AbsolutePage 就可以輕松的對(duì)數(shù)量繁多的留言進(jìn)行有條理的分頁顯示 532 發(fā)布留 言 任何的注冊(cè)用戶登錄后都擁有發(fā)布留言的權(quán)利在留言主頁面提供了用來發(fā)布留言的輸入框用戶可以通過表單發(fā)表留言并選擇留言主題的標(biāo)志發(fā)布留言是通過程序 MSGADDASP 來實(shí)現(xiàn)的 發(fā)布留言程序先以登錄后寫進(jìn) Cookies 數(shù)據(jù)集合中的用戶名作為發(fā)布者的姓名如果 Cookies 是空的話就轉(zhuǎn)到提示要先登錄的頁面確認(rèn)后接受表單提交來的信息寫進(jìn)表 mssg 中然后轉(zhuǎn)回到 MSGBOARDASP 留言頁面而 MSGBOARDASP 中的顯示留言程序根據(jù)更新后的表 mssg 而重新分頁顯示留言 54 資料修改功能模塊的設(shè)計(jì) 用戶在主頁面上點(diǎn)擊修改資 料進(jìn)入資料修改頁面 membereditASP 通過這個(gè)功能模塊來修改個(gè)人的注冊(cè)信息但用戶名不能修改修改之前用戶必須要輸入正確的密碼而修改密碼的時(shí)候 2 次輸入的密碼要相同修改資料功能是通過程序membereditASP 來實(shí)現(xiàn)如果資料修改成功就轉(zhuǎn)到提示修改成功的頁面并修改表user 的數(shù)據(jù)如果不成功便轉(zhuǎn)到相應(yīng)提示錯(cuò)誤的頁面 55 相片上傳與瀏覽的設(shè)計(jì) 用戶還可以將自己喜歡的相片上傳供其他用戶瀏覽用戶在主頁面上點(diǎn)擊班級(jí)相冊(cè)進(jìn)入頁面 photoASP相片的上傳由于 ASP使用基于開放設(shè)計(jì)環(huán)境的 ActiveＸ技術(shù)本留言板即利用 ActiveＸ組件 ASPSmartUpload來實(shí)現(xiàn)相片上傳功能該組件在下載并安裝后方可使用相片的上傳是通過文件 uploadASP 的上傳程序 up 來實(shí)現(xiàn)的并將上傳相片的所有信息都存放在表 upload 里包括相片的名稱說明上傳時(shí)間上傳人姓名等而且對(duì)于上傳的相片的類型和大小都有所限制只能上傳 jpg和 gif類型的相片而且相片大小不能超過 300Ｋ如果用戶上傳的相片不符合要求程序便進(jìn)行判斷并顯示錯(cuò)誤原因 56 相片的列表與顯示 該功能是把所有相片的相關(guān)信息如相片的說明上傳時(shí)間上傳人姓名等通過列表的方式顯示出來由于相片的數(shù)量 可能很多因此在這里也使用了分頁顯示并在每張相片的說明文字上添加鏈接用戶通過點(diǎn)擊鏈接就可以激活 photoASP 中的程序?qū)崿F(xiàn)瀏覽相片功能 總結(jié) 通過這次畢業(yè)設(shè)計(jì)我從中學(xué)到了許多新的知識(shí)而且通過這次畢業(yè)設(shè)計(jì)培養(yǎng)了我綜合多門學(xué)科中的知識(shí)迅速規(guī)劃并開發(fā)出目標(biāo)系統(tǒng)的能力以及編程能力也有了很大的提高另外也有許多心得體會(huì)所謂系統(tǒng)開發(fā)如人生百味酸甜苦辣皆有之 回顧這 3 個(gè)半月的系統(tǒng)開發(fā)工作總結(jié)起來那就是軟件的開發(fā)是相當(dāng)辛苦的但成功以后的喜悅也是非常美妙的而且我發(fā)現(xiàn)其中你投入的心血越多成功以后你所獲得的快樂與充實(shí)感也更多更強(qiáng) 參考文獻(xiàn) 1 肖金秀等 Dreamweaver 網(wǎng)頁實(shí)例大制作 [Ｍ ]北京冶金工業(yè)出版社 2021 2 肖金秀等 ASP 網(wǎng)絡(luò)編程技術(shù) [Ｍ ]北京清華大學(xué)出版社 2021 3 張大斌 Web 上基于 ASP 的數(shù)據(jù)庫應(yīng)用研究 [J ] 計(jì)算機(jī)工程與科學(xué) 2021 4 沈文智 Microsoft IIS 網(wǎng)頁技術(shù) [M] 北京 人民郵電出版社 1998 5 譚浩強(qiáng)網(wǎng)頁制作技術(shù) [M]北京清華大學(xué)出版社 2021 目錄 引言 2 1 網(wǎng)站結(jié)構(gòu)