自行車協(xié)會管理網(wǎng)站開發(fā)與設(shè)計

福 建 師 范 大 學(xué) 應(yīng) 用 科 技 學(xué) 院學(xué) 生 論 文論文題目：自行車協(xié)會網(wǎng)站系統(tǒng)開發(fā)與設(shè)計指導(dǎo)教師： 林國凱 學(xué) 號： 120352010047 姓 名： 陳開伙 年 級： 2010級 專 業(yè)： 電子信息工程 二0一四 年三 月 二十二 日23目錄一、開發(fā)背景4二、需求分析4三、系統(tǒng)設(shè)計41、系統(tǒng)目標(biāo)42、系統(tǒng)功能結(jié)構(gòu)4四、數(shù)據(jù)庫設(shè)計81、數(shù)據(jù)庫概念設(shè)計82、注冊用戶實(shí)體8五、前臺首頁設(shè)計91、前臺首頁概述92、前臺首頁技術(shù)分析93、前臺首頁實(shí)現(xiàn)過程10六、會員注冊模塊設(shè)計111、會員注冊模塊概述11七、注冊模塊技術(shù)分析13八、后臺首頁設(shè)計171、后臺首頁概述172、后臺首頁技術(shù)分析173、后臺首頁實(shí)現(xiàn)過程18九、開發(fā)技巧與技術(shù)難點(diǎn)21致謝22參考文獻(xiàn)23自行車協(xié)會網(wǎng)站系統(tǒng)開發(fā)與設(shè)計應(yīng)用科技學(xué)院 2010級電子工程120352010047陳開伙指導(dǎo)教師：林國凱摘要隨著網(wǎng)絡(luò)信息時代的來臨,互聯(lián)網(wǎng)應(yīng)用越來越廣泛,從網(wǎng)上獲 并且發(fā)布信息已成為現(xiàn)代計算機(jī)應(yīng)用的一大特色. 一個網(wǎng)站,是一個傳媒,也是一個窗口.普通人可以通過瀏覽各個網(wǎng)站,接觸到許多從書本上學(xué)不到的知識,還可以看看新聞之類當(dāng)作是一種消遣.而大到一個企業(yè),小到一個個體通過制作自己的網(wǎng)站,向全世界宣傳自己,提供各種關(guān)于自己的信息供顧客瀏覽.這時,網(wǎng)站也就成為對外交流的窗口.同時,網(wǎng)站上普遍都有一些免費(fèi)資源,從而達(dá)到資源共享,使得我們足不出戶都能得到想要的資料.現(xiàn)在很多企業(yè),學(xué)校,協(xié)會都有自己的網(wǎng)站.通過網(wǎng)站數(shù)據(jù)處理更方便快捷,人員訪問更方便.關(guān)鍵詞自行車協(xié)會網(wǎng)站管理系統(tǒng)、自行車協(xié)會、管理系統(tǒng)設(shè)計一、開發(fā)背景隨著市場競爭的日益激烈，單車行業(yè)的生存和發(fā)展之路更加具有挑戰(zhàn)，要想保持旺盛的生命力，我們必須要跟上時代發(fā)展的腳步，不斷的開發(fā)和創(chuàng)造新的營銷模式，為適應(yīng)市場的需求，增加喜德盛單車全國的影響力，將開發(fā)一個自行車協(xié)會網(wǎng)站。為廣大自行車愛好者提供一個交流的平臺，讓更多的車友認(rèn)識現(xiàn)在的單車文化，通過該網(wǎng)站分享的自行車賽事來推廣自行車文化，改變當(dāng)代人對自行車傳統(tǒng)的概念，使單車轉(zhuǎn)變成為一個健身的工具，并以此來推廣國內(nèi)自行車品牌！豐富自行車愛好者對單車運(yùn)動的知識！目前互聯(lián)網(wǎng)的用戶逐日增多，電子商務(wù)的流行，本地單車實(shí)體店面臨巨大沖擊。為了不受傳統(tǒng)方式的約束，我們通過自行車協(xié)會網(wǎng)站的建設(shè)，建立自己俱樂部和品牌的宣傳網(wǎng)絡(luò)，實(shí)現(xiàn)網(wǎng)絡(luò)宣傳，實(shí)體交易的目的，為消費(fèi)提供最新的活動信息、產(chǎn)品信息和單車促銷信息的等。我們要提供給自行車愛好者更多、更快、更好的服務(wù)。二、需求分析自行車愛好者越來越多，為了宣傳騎行文化，踐行低碳環(huán)保，創(chuàng)新品牌建設(shè)，助推產(chǎn)業(yè)升級，我們開發(fā)自行車協(xié)會網(wǎng)站。讓車友在有時間的情況下，提供給車友夜騎或者是周日騎行的活動，達(dá)到一個釋放壓力的方法，起到健身的這么一個目的，給車友更多的選擇?，F(xiàn)在大部分車友買了車子，卻因?yàn)闆]有一起騎車的伙伴選擇放棄或者減少外出騎行，希望通過這個平臺可以讓更多的人認(rèn)識其他的車友。三、系統(tǒng)設(shè)計1、系統(tǒng)目標(biāo)本網(wǎng)站設(shè)計時應(yīng)滿足以下功能：1 網(wǎng)站設(shè)計頁面要求整潔、大方、能夠展現(xiàn)自行車運(yùn)動的魅力2 網(wǎng)站主頁具有廣告位置，樹立良好品牌宣傳3 彰顯出品牌車最新推出的產(chǎn)品4 提供一個好的交友平臺5 做到讓車友喜歡這個網(wǎng)站，關(guān)注最新賽事和最新相冊6 系統(tǒng)運(yùn)行穩(wěn)定7 完善的管理系統(tǒng)，能夠及時的維護(hù)和更新消息2、系統(tǒng)功能結(jié)構(gòu)前臺管理系統(tǒng)的功能設(shè)計協(xié)會簡介協(xié)會章程 首頁 政策法規(guī)會員中心前臺會員申請 協(xié)會新聞 聯(lián)系我們 圖片展示 圖1 注冊會員管理 后臺管理系統(tǒng)的功能設(shè)計 協(xié)會公告管理 后臺行業(yè)動態(tài)管理 協(xié)會新聞管理 圖片展示管理前臺首頁如圖2，該頁面用于展示本系統(tǒng)的功能模塊，突出企業(yè)的形象，推廣喜德盛品牌。后臺首頁如圖3，主要用于對各個功能模塊內(nèi)進(jìn)行編輯和管理圖2圖3首頁功能模塊導(dǎo)航欄：實(shí)現(xiàn)首頁干凈、整潔、簡單化操作圖2-1圖片展示：最直觀展示自行車協(xié)會發(fā)展項目和活動項目圖2-3協(xié)會簡介：用于對向訪客說明福州自行車協(xié)會的文化和發(fā)展歷程 圖2-2協(xié)會公告管理，公布俱樂部最新賽事和活動如圖4圖4主要用于對品牌推廣，分享騎行知識，維修知識等一系列對騎行文化的宣傳如圖5圖5圖片管理，主要用于對活動和賽事的分享，讓更多的車友關(guān)注實(shí)時精彩賽事如圖6圖6會員管理，用于設(shè)置管理人員對本系統(tǒng)網(wǎng)站的操作，可新增和刪除管理人員如圖7圖7四、數(shù)據(jù)庫設(shè)計開發(fā)一個功能完善的網(wǎng)上社區(qū)離不開數(shù)據(jù)庫的支持，只有擁有了強(qiáng)大的數(shù)據(jù)庫，網(wǎng)上社區(qū)才能夠存儲大量的數(shù)據(jù)信息，實(shí)現(xiàn)更多、更好的功能來吸引更多的社區(qū)成員。91、數(shù)據(jù)庫概念設(shè)計根據(jù)上述對自行車協(xié)會的需求分析和系統(tǒng)設(shè)計，規(guī)劃處自行車協(xié)會網(wǎng)站的實(shí)體E-R圖。主要會員注冊用戶實(shí)體和其他一些輔助實(shí)體，這是只說明注冊用戶實(shí)體以及E-R圖進(jìn)行介紹。2、注冊用戶實(shí)體注冊用戶實(shí)體用于存儲用戶注冊信息，包括編號、用戶名、密碼、郵箱、電話、手機(jī)。 用戶名關(guān)系圖編號 密碼用戶 電話手機(jī) 郵箱注冊用戶實(shí)體E-R圖數(shù)據(jù)庫邏輯結(jié)構(gòu)設(shè)計會員表列名數(shù)據(jù)類型字段大小是否為空學(xué)號c姓名char20NotNull性別char2Null密碼char20NotNull聯(lián)系電話char20NullQQchar20Null管理員表字段名稱數(shù)據(jù)類型說明數(shù)據(jù)長度是否為空hyno管理員用戶名20NotNullpwd管理員密碼10NotNull五、前臺首頁設(shè)計1、前臺首頁概述如今，很多人都十分重視對事物的第一印象，第一印基本就決定對某個事物的看法和太對，在網(wǎng)絡(luò)中，網(wǎng)站給人的第一印象如果不好，那么就會有很多人因此而不去瀏覽我們的網(wǎng)站，可以說網(wǎng)站首頁的設(shè)計十分重要，能否設(shè)計成功直接影響這網(wǎng)站未來的發(fā)展！7要知道首頁的設(shè)計對一個成功的網(wǎng)站來說是極為重要的，它必須發(fā)展網(wǎng)站的特性。首頁設(shè)計的好壞將直接影響到車友對一個俱樂部的認(rèn)識和參加活動的欲望，在自行車協(xié)會網(wǎng)站中，首先必須突出俱樂部的風(fēng)采，最新的賽事公告和騎行活動公告，讓動態(tài)信息來吸引顧客對俱樂部文化的認(rèn)識。前臺首頁主要包含一下內(nèi)容：1 網(wǎng)站菜單導(dǎo)航：包括首頁、協(xié)會簡介、最新公告、會員注冊、政策法規(guī)、圖片展示、企業(yè)會員行業(yè)動態(tài)、會員申請、聯(lián)系我們。2 協(xié)會簡介：簡單說明該自行車協(xié)會成立和性質(zhì)3 最新公告：用于發(fā)布最新的賽事、活動4 會員注冊：實(shí)現(xiàn)會員登錄和會員申請5 圖片展示：展示俱樂部風(fēng)采和最新活動騎行照片6 行業(yè)動態(tài)：公布協(xié)會和行業(yè)最新的事跡7 政策法規(guī)：國家對自行車最新的法規(guī)和修改2、前臺首頁技術(shù)分析作為網(wǎng)站首頁，應(yīng)該是給訪問者一個簡潔、鮮明，突出協(xié)會形象，展示俱樂部魅力的功能，要能夠?qū)?nèi)容變得全面、完整。7在首頁設(shè)計中我們主要突出協(xié)會文化、最新賽事，其中圖片展示最為引人注目，完全起到了展示俱樂部魅力的要求。其實(shí)現(xiàn)原理是：創(chuàng)建一個div標(biāo)間然后再div標(biāo)簽中輸入展示的信息，最后通過JavaScript來對div表時間進(jìn)行操作，實(shí)現(xiàn)內(nèi)容滾動輸出。網(wǎng)站前臺首頁動態(tài)顯示設(shè)計3、前臺首頁實(shí)現(xiàn)過程由于代碼過多這里只給出首頁公告發(fā)布其中部分代碼，如下： /設(shè)置顯示位置，高度，寬度 /height：定義表格的高度，屬性值是數(shù)字/cellspacing：定義表格中單元格之間的距離 /cellpadding：定義單元格內(nèi)容與單元格邊框之間的距離，屬性值是數(shù)字/width：定義表格的寬度，屬性值是數(shù)字 100%是和頁面寬度一樣/align：定義表格的對齊方式，有三個屬性值center，left，right /居中/左/右/border：定義表格的邊框?qū)挾?，屬性值是?shù)字 最新公告/ 顯示內(nèi)容 /設(shè)置邊距邊框 /導(dǎo)入文件，顯示指定內(nèi)容 六、會員注冊模塊設(shè)計1、會員注冊模塊概述自行車協(xié)會網(wǎng)站系統(tǒng)為了更好的與廣大才何有進(jìn)行溝通和交流，創(chuàng)建了一個會員注冊模塊。通過該模塊，系統(tǒng)可以有效的對用戶的信息進(jìn)行采集，并將注冊的用戶信息保存到指定的數(shù)據(jù)表中了實(shí)現(xiàn)與用戶長期的交流。會員申請模塊界面如圖 注冊模塊圖用戶登入實(shí)現(xiàn)過程： /設(shè)置顯示位置，高度，寬度 /第一行/制作一個表格 / /代表第一行 / 第一格第二格 / / /代表第二行 / 第一格第二格%if session(username) then/if語句嵌套判斷用戶是否存在%歡迎您： 退出登陸 用戶名： 密  碼：/判斷密碼是否正確 / /語句結(jié)束 七、注冊模塊技術(shù)分析在新會員注冊模塊中，必不可少的就是對用戶輸入的信息進(jìn)行判斷，首先判斷用戶填寫的注冊信息中哪些是必須填寫的，哪些是可以不填寫的，然后進(jìn)一步判斷輸入的信息是否合理合法。系統(tǒng)主由三個界面組成：會員管理界面、注冊界面和管理員登錄界面，在會員管理界面中有登錄、注冊、管理。在會員管理系統(tǒng)界面下輸入正確的用戶名和密碼再點(diǎn)登錄，便可顯示登錄成功，如果輸入有誤會提示輸入錯誤，這樣便為用戶提供了安全性；如果點(diǎn)顯示信息則可顯示該會員在數(shù)據(jù)庫中的信息；如果想新注冊，則可以在會員管理界面中點(diǎn)注冊，在注冊界面中填入對應(yīng)的信息，確認(rèn)后即可把該信息加入數(shù)據(jù)庫中；如果是管理員，則點(diǎn)管理進(jìn)入管理員登錄界面，在該界面管理員輸入正確的用戶名和密碼就可修改數(shù)據(jù)庫中的信息。登錄：在會員管理的界面下輸入正確的學(xué)號和密碼，再點(diǎn)登錄，便可順利登錄查看自己存儲在數(shù)據(jù)庫中的相關(guān)信息。注冊：在會員管理界面中點(diǎn)注冊，在注冊界面中填入對應(yīng)的信息，確認(rèn)后即可把該信息加入數(shù)據(jù)庫中。管理：點(diǎn)管理進(jìn)入管理員登錄界面，在該界面管理員輸入正確的用戶名和密碼就可修改數(shù)據(jù)庫中的信息。會員注冊模塊以下是會員注冊模塊的代碼：/定義用于在瀏覽器中顯示頁內(nèi)容的代碼頁。代碼頁是字符集的數(shù)字值，不同的語言使用不同的代碼頁。/頭文件，將命令指示web服務(wù)器文件內(nèi)容插入網(wǎng)頁中/網(wǎng)站鏈接/設(shè)置寬度 首頁 會員申請 /網(wǎng)頁位置導(dǎo)航 % if request(action)ok then%/if 語句循環(huán) /FORM的意思是表格。NAME 名字 “表格1”。方法=發(fā)送， 動作 = 注冊。asp   用戶名：/該語句用于將用戶數(shù)據(jù)寫入數(shù)據(jù)庫,表格的單元格中加個輸入框   密  碼： 重復(fù)密碼：   地  址： 聯(lián)系電話：   手  機(jī)：   郵  箱： 密碼取回問題： 密碼取回答案： %else username=trim(request(username)/對用戶信息進(jìn)行存儲 password=trim(request(password) repassword=trim(request(repassword) address=trim(request(address) tel=trim(request(tel) phone=trim(request(phone) email=trim(request(email) question=trim(request(question) daan=trim(request(daan) if password then/對用戶名及密碼進(jìn)行判斷，重復(fù)則執(zhí)行下一條語句，否則結(jié)束if passwordrepassword then% alert(重復(fù)密碼錯誤); history.go(-1); /javascript腳本開始 alert(注冊成功); this.location.href=index.asp; alert(用戶名已存在); history.go(-1); 八、后臺首頁設(shè)計作為一個完整的協(xié)會網(wǎng)站管理系統(tǒng)，要想能夠及時地對網(wǎng)站進(jìn)行管理和維護(hù)，必須有一個強(qiáng)大的管理系統(tǒng)，對協(xié)會管理系統(tǒng)中的數(shù)據(jù)進(jìn)行維護(hù)和更新。由于后臺管理主要是針對管理員開放的，所以在頁面風(fēng)格的設(shè)計上相對網(wǎng)站的主頁要簡單的多，不需要絢麗的圖案和特效，主要干凈，整潔，給管理員簡便的操作實(shí)現(xiàn)簡單易懂的操作流程。1、后臺首頁概述 一個網(wǎng)站成功的重要標(biāo)志除了首頁的設(shè)計，更重要的是協(xié)會網(wǎng)站管理中數(shù)據(jù)的更新和系統(tǒng)維護(hù)都取決后臺的設(shè)計完善，功能是否強(qiáng)大，后臺越完美，系統(tǒng)就越成功。7后臺首頁主要功能如下：1. 后臺首頁導(dǎo)航欄：管理員名稱、關(guān)閉后臺管理功能、刷新、管理首頁等。2. 左側(cè)導(dǎo)航欄：各個管理模塊及功能。3. 網(wǎng)站信息管理模塊：主要用于對協(xié)會公告管理、注冊會員管理。4. 管理員權(quán)限管理模塊：對管理員進(jìn)行添加、刪除。5. 會員申請管理模塊：個人會員資料管理和查詢。6. 系統(tǒng)設(shè)置管理模塊：主要用于廣告模塊的修改和更新。后臺管理員管理首頁2、后臺首頁技術(shù)分析本系統(tǒng)的后臺首頁采用的布局是二分欄布局，左側(cè)導(dǎo)航欄清楚、明白地顯示了后臺管理員所能使用到的功能。當(dāng)單擊任意功能按鈕時，在主顯示器顯示對應(yīng)的操作界面和該功能模塊下的子功能，頁面簡潔、結(jié)構(gòu)清晰，管理員瀏覽方便，二分欄的主要特點(diǎn)被表現(xiàn)淋漓盡致。3、后臺首頁實(shí)現(xiàn)過程后臺首頁設(shè)計實(shí)現(xiàn)過程漏洞百出，通過Dreaweave對后臺首頁進(jìn)行設(shè)計，經(jīng)過不斷的修改和糾正，最終實(shí)現(xiàn)后臺首頁頁面的正常操作，其代碼如下：/導(dǎo)入文件/導(dǎo)入文件/導(dǎo)入文件/ 該META標(biāo)簽定義了HTML頁面所使用的字符集為GB2132小祥網(wǎng)絡(luò)-后臺管理/表示這是樣式表,在中間放入css內(nèi)容； type是它的類型屬性，text/css是它的值，/language和type 都表示指定腳本語言為javascriptvar displayBar=true; function switchBar(obj) if (displayBar)parent.GaobeiSysTem.cols=0,*;displayBar=false;/obj.src=open.gif;GaobeiSysTemSwitch.innerText=打開控制面板;obj.title=打開控制面板;elseparent.GaobeiSysTem.cols=180,*;displayBar=true;GaobeiSysTemSwitch.innerText=關(guān)閉控制面板;/obj.src=close.gif;obj.title=關(guān)閉控制面板;/body 網(wǎng)頁里顯示的內(nèi)容bgcolor是背景顏色,leftmargin頁面左邊的空白,topmargin離顯示最上面的空白,marginwidth內(nèi)容顯示區(qū)的寬,marginheight內(nèi)容顯示區(qū)的高/oncontextmenu= 當(dāng)單圾右鍵打開菜單時觸發(fā)事件self 獲得當(dāng)前窗口的引用event.returnValue=false 設(shè)置事件的返回值為false,即取消事件處理 管理員: 關(guān)閉控制面板 后 退 | 刷 新 | 前 進(jìn) | 管理首頁 | 使用幫助 | 退出管理 /設(shè)置邊框/循環(huán)/文檔的頭部由 標(biāo)簽定義/meta是html中的元標(biāo)簽，其中包含了對應(yīng)html的相關(guān)信息，服務(wù)器端的程序會根據(jù)這些信息進(jìn)行處理GaobeiSys_Bottom/鏈接/將基本鏈接的目標(biāo)框架都改為主頁打開/body 網(wǎng)頁里顯示的內(nèi)容,bgcolor是背景顏色,leftmargin頁面左邊的空白,topmargin離顯示最上面的空白,marginwidth內(nèi)容顯示區(qū)的寬,marginheight內(nèi)容顯示區(qū)的高/設(shè)置屬性 Copyright 2010-3000 WWW.   /過程結(jié)束九、開發(fā)技巧與技術(shù)難點(diǎn)為了在保證網(wǎng)站內(nèi)信息資源的安全，防止用戶以非法身份對網(wǎng)站內(nèi)部信息進(jìn)行非法操作，只有通過正確的途徑成功登入福州樂弛協(xié)會平臺，才可以對網(wǎng)站進(jìn)行管理和操作。首先用戶登陸時系統(tǒng)進(jìn)行判斷，在新會員注冊時檢測用戶名是否已經(jīng)注冊，在實(shí)現(xiàn)會員租車功能模塊時，要求不允許同時存兩個或者多個相同的用戶名。后臺管理經(jīng)過添加后，新的管理人員有權(quán)限對各個功能模塊進(jìn)行信息修改。其操作簡單，經(jīng)過不斷的完善使該網(wǎng)站不斷的修正細(xì)節(jié)。致謝在本篇論文完成的同時，首先要感謝我的導(dǎo)師林國凱。在林老師的悉心指導(dǎo)下，我的論文才能如此順利的完成。并且得到了其他老師的肯定。在本次論文設(shè)計過程中，老師從選題指導(dǎo)、論文框架到細(xì)節(jié)修改，都給予了細(xì)致的指導(dǎo)，提出了很多寶貴的意見與建議，老師以其嚴(yán)謹(jǐn)求實(shí)的治學(xué)態(tài)度、孜孜以求的工作作風(fēng)和大膽創(chuàng)新的進(jìn)取精神對我產(chǎn)生重要影響。這篇論文是在老師的精心指導(dǎo)和大力支持