基于HTML5的生活分享平臺開發(fā)與實(shí)現(xiàn)

摘要本項(xiàng)目是基于web端的一個(gè)生活分享平臺。生活分享是社交中的一種方式，隨著生活水平的逐漸提高，有許多用戶通過發(fā)表文字、圖片、視頻等來記錄自己在生活中的一點(diǎn)一滴及美好瞬間，在網(wǎng)絡(luò)平臺中通過這些方式去釋放自己的心情，并結(jié)識更多志同道合的網(wǎng)友，互相交流、了解對方。希望能通過本系統(tǒng)的開發(fā)使用戶更便捷地記錄發(fā)表自己生活中美好的瞬間。網(wǎng)站前端基于HTML5進(jìn)行設(shè)計(jì)，而后端則結(jié)合PHP技術(shù)加MYSQL數(shù)據(jù)庫進(jìn)行開發(fā)，便于記錄管理用戶信息。用戶能夠基于web端進(jìn)行信息的記錄，提高了現(xiàn)代網(wǎng)絡(luò)社交的便捷水平。而系統(tǒng)本身應(yīng)該具有實(shí)用性，可靠性，安全性；系統(tǒng)后臺選擇了MYSQL數(shù)據(jù)庫作為系統(tǒng)的數(shù)據(jù)庫記錄信息，管理者可以對用戶、用戶動態(tài)及用戶的評論進(jìn)行管理。本文主要描述了該社交網(wǎng)站的開發(fā)過程包括網(wǎng)頁設(shè)計(jì)、功能實(shí)現(xiàn)以及功能測試等等。本項(xiàng)目為這些熱愛記錄的用戶提供記錄的機(jī)會，還可以通過平臺中的話題促進(jìn)用戶與用戶之間進(jìn)一步的交流。根據(jù)美學(xué)設(shè)計(jì)理念，網(wǎng)站呈現(xiàn)簡約但不簡單的效果，頁面整體和諧。網(wǎng)站中各種功能界面更貼近現(xiàn)代社交平臺設(shè)計(jì)，便于用戶學(xué)習(xí)使用，簡易上手。希望能通過該網(wǎng)站平臺使用戶獲得在網(wǎng)絡(luò)社交方面的便利。關(guān)鍵詞：HTML5；網(wǎng)頁開發(fā)；PHP技術(shù)；MYSQL數(shù)據(jù)庫AbstractThisprojectisalifesharingplatformbasedontheweb.Lifesharingisawayofsocializing.Withthegradualimprovementoflivingstandards,manyusersrecordtheirbitbybitandbeautifulmomentsinlifebypostingtext,pictures,videos,etc.Waystoreleaseyourmoodandmeetmorelike-mindednetizenstocommunicatewitheachotherandunderstandeachother.Ihopethatthroughthedevelopmentofthissystem,userscanmoreconvenientlyrecordandpublishthebeautifulmomentsintheirlives.ThefrontendofthewebsiteisdesignedbasedonHTML5,andthebackendisdevelopedincombinationwithPHPtechnologyandMYSQLdatabase,whichisconvenientforrecordingandmanaginguserinformation.Userscanrecordinformationbasedontheweb,whichimprovestheconvenienceofmodernsocialnetworking.Thesystemitselfshouldhavepracticability,reliability,andsecurity;thesystembackgroundhasselectedtheMYSQLdatabaseasthesystem'sdatabaserecordinformation,andtheadministratorcanmanageusers,userdynamics,andusercomments.Thisarticlemainlydescribesthedevelopmentprocessofthesocialnetworkingsite,includingwebdesign,functionalimplementation,andfunctionaltesting.Thisprojectprovidestheopportunityfortheseuserswholovetorecord,andcanalsopromotefurthercommunicationbetweenusersthroughthetopicsintheplatform.Accordingtotheaestheticdesignconcept,thewebsitepresentsasimplebutnotsimpleeffect,andtheoverallpageisharmonious.Thevariousfunctionalinterfacesonthewebsiteareclosertothedesignofmodernsocialplatforms,makingiteasierforuserstolearnanduseandeasytouse.Itishopedthatthewebsiteplatformwillenableuserstogainconvenienceinsocialnetworking.Keywords：HTML5;WebDevelopment;PHPtechnology;MYSQLdatabase目錄TOC\o"1-3"\h\u第一章緒論 緒論選題的目的和意義隨著互聯(lián)網(wǎng)的發(fā)展，各種各樣的網(wǎng)絡(luò)社交平臺應(yīng)運(yùn)而生。它作為分享平臺，為大眾提供了記錄生活方式的機(jī)會，人們通過各種圖片文字來表達(dá)自己的想法，這對于記錄者來說記錄的是自己的故事，而對于觀看者來說這又是另一種體驗(yàn)。因此，通過HTML5設(shè)計(jì)開發(fā)一個(gè)分享平臺也是為大眾開拓了又一個(gè)便利的記錄平臺。隨著社交平臺不斷發(fā)展，越來越多的平臺出現(xiàn)了。通過宣傳運(yùn)營，不少社交平臺早已成為大眾日常生活中重要的工具。生活水平的提高促使人們更多地通過電腦，手機(jī)等發(fā)表記錄生活瞬間，記錄心情，因此此類社交生活記錄平臺才得以發(fā)展，更多不同設(shè)計(jì)不同種類不同動能的平臺被開發(fā)出來。而本次開發(fā)的主打生活方式分享網(wǎng)站，它的前端基于HTML5，后端基于PHP及數(shù)據(jù)庫，以此實(shí)現(xiàn)用戶在網(wǎng)上進(jìn)行社交的系統(tǒng)。該網(wǎng)站的開發(fā)也將貼合大眾使用社交網(wǎng)絡(luò)分享平臺的實(shí)際，能開闊社交范圍，提高人們社交效率，為人們的社交提供便利。國內(nèi)外研究現(xiàn)狀HTML5在當(dāng)代大放異彩與其一步步發(fā)展離不開關(guān)系?；厥譎TML5的發(fā)展歷程，在1999年W3C發(fā)布HTML4以后，網(wǎng)絡(luò)世界的發(fā)展速度開始加快，其進(jìn)步性與發(fā)展性一度使人們認(rèn)為HTML4已經(jīng)是HTML中發(fā)展的最高標(biāo)準(zhǔn)。而正當(dāng)人們在自我滿足時(shí)，W3C開始了發(fā)展HTML5的步伐，隨著年代科技的發(fā)展，用戶的需求在不斷的更新，在技術(shù)的推動以及商業(yè)的投資的基礎(chǔ)上，HTML5得到了不斷地完善與更新，而隨著其功能不斷地開發(fā)與完善，網(wǎng)絡(luò)世界的新興行業(yè)也不斷興起，HTML5的發(fā)展推動了這些行業(yè)的發(fā)展，用戶的需求得以滿足。而隨著科技的發(fā)展，我們相信，用戶的需求將會繼續(xù)更新，HTML也將會推出更多種多樣的新興版本。我國擁有十分龐大的互聯(lián)網(wǎng)群體，據(jù)統(tǒng)計(jì)，2019年中國就有超過8億的互聯(lián)網(wǎng)使用用戶，可以說，市場需求十分龐大。游戲、生活、才藝類等直播行業(yè)的興起也與HTML5強(qiáng)大的兼容性息息相關(guān)，因?yàn)镠TML5提供了前所未有的新穎的方式，即數(shù)據(jù)與應(yīng)用可以接入開放的接口，使外部硬件應(yīng)用等可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，如視頻影音等可以直接與麥克風(fēng)和攝像頭相關(guān)聯(lián)，而將內(nèi)容傳送到前端，用戶即可以作為觀眾與主播進(jìn)行互動等。而HTML5突出的特點(diǎn)就是強(qiáng)化了網(wǎng)頁的表現(xiàn)性，追加了本地?cái)?shù)據(jù)庫，可以用作離線應(yīng)用的開發(fā)，離線應(yīng)用就是把需要的資源先緩存到本地，下次再查看時(shí)無需聯(lián)網(wǎng)。HTML5還有更多的功能特點(diǎn)，其開發(fā)與發(fā)展對互聯(lián)網(wǎng)發(fā)展的促進(jìn)作用無可比擬。所以我國在HTML5開發(fā)方面的人才需求也是十分龐大的，我國作為HTML5的后起之國，其發(fā)展程度與完善程度還達(dá)不到國外HTML5發(fā)展的高度，畢竟國外作為HTML5的發(fā)源國家，其HTML在歷史上通過一步步不斷開發(fā)與完善，甚至擁有了自己的多年以來的經(jīng)驗(yàn)體系，是我國目前還不能達(dá)到的。課題研究內(nèi)容本次課題是基于HTML5的社交網(wǎng)站平臺，結(jié)合PHP技術(shù)和MYSQL數(shù)據(jù)庫等技術(shù)開發(fā)出由用戶自身管理個(gè)人專屬社交平臺的信息以及推出對應(yīng)的管理員管理端，用于管理全部用戶信息。正文開頭闡述了基于HTML5社交網(wǎng)站的功能特點(diǎn)及開發(fā)需要的相關(guān)技術(shù)知識。結(jié)合開發(fā)的功能特性，首先是基于HTML5結(jié)合CSS的網(wǎng)站前端設(shè)計(jì)，通過Bootstrap框架等輔助排版設(shè)計(jì)裝飾社交網(wǎng)站，使其能呈現(xiàn)更美觀的頁面效果與更簡約的用戶交互界面，結(jié)合市場上眾多社交類平臺的平面設(shè)計(jì)，設(shè)計(jì)出貼合社交用戶使用習(xí)慣直接簡約方便上手的社交記錄平臺，同時(shí)又應(yīng)該保持自身網(wǎng)站的設(shè)計(jì)風(fēng)格，設(shè)計(jì)出使用戶耳目一新的交互界面。其次是結(jié)合PHP技術(shù)和MYSQL數(shù)據(jù)庫，實(shí)現(xiàn)網(wǎng)站實(shí)時(shí)記錄用戶信息、用戶動態(tài)、用戶評論等功能，并將這些信息上傳至管理員管理端，管理員能實(shí)時(shí)發(fā)現(xiàn)刪除修改用戶不文明動態(tài)信息，做到保持文明美好的社交平臺環(huán)境?；贖TML5結(jié)合PHP技術(shù)+MYSQL數(shù)據(jù)庫開發(fā)出貼合用戶的功能性社交網(wǎng)站。系統(tǒng)開發(fā)環(huán)境2.1HTML概述HTML作為一種優(yōu)秀的超文本標(biāo)記語言，它在頁面內(nèi)可以包含包括文字、圖片、鏈接、視頻、音樂及程序等元素，實(shí)現(xiàn)在頁面與頁面之間跳轉(zhuǎn)。其中，HTML結(jié)構(gòu)包括頭部分（<head></head>）、和主體部分（<body></body>）。其中頭部<head>定義了網(wǎng)頁的頭部份，而在頭部中也包含了一些元素供開發(fā)者使用。例如可以在頭部中通過<link>引入想要用到的文件，以此定義HTML文檔與引入的外部資源關(guān)系。也可以通過<title>定義網(wǎng)頁的標(biāo)題，通過<base>去定義頁面的鏈接標(biāo)簽的鏈接地址，通過<meta>去定義HTML文檔中的數(shù)據(jù)，通過<script>去定義頁面的腳本，還可以通過<style>去定義HTML文檔中的樣式，如改變顏色、字體樣式、超鏈接樣式等網(wǎng)頁中眾多的樣式的設(shè)置。而主體部分<body>則提供了網(wǎng)頁的具體內(nèi)容，呈現(xiàn)由開發(fā)者編譯的內(nèi)容，是網(wǎng)頁實(shí)際展現(xiàn)的內(nèi)容部分。在<body></body>中通過不同的元素編寫網(wǎng)頁，如<b>元素則是代表加粗，<p>元素則是代表換行等等，而元素中又有不同的屬性如<pstyle=“”>中的“style”則是元素<p>的屬性，<ahref=“”>中的“href”則是元素<a>的屬性，<p>元素所沒有的屬性。在元素與元素期間也可以層層嵌套，如<p><h1>標(biāo)題</h1><p>，而“標(biāo)題”則可以實(shí)現(xiàn)兩個(gè)元素的效果。元素雖然可以層層嵌套，但是在結(jié)束標(biāo)簽時(shí)需要注意要分清結(jié)束標(biāo)簽的先后，做到先開頭后結(jié)束，層層對映的原則。而HTML的標(biāo)簽則是由一對尖括號及標(biāo)簽名組成，分為起始標(biāo)簽和結(jié)束標(biāo)簽，如<h5></h5>。HTML實(shí)際上只是文本，它還需要通過瀏覽器來解釋展現(xiàn)文本中編譯的內(nèi)容。首先，可以通過最簡單的文檔編輯軟件編輯，如使用微軟電腦中自帶的記事本即可實(shí)現(xiàn)，編寫結(jié)束時(shí)將文檔保存.html為拓展名則可以通過瀏覽器執(zhí)行。其次可以通過半所見即得軟件如SublimeText代碼編輯器等在線網(wǎng)頁編輯器。最后，還可以通過所見即得軟件如AdobeDreamweaver、WebStorm等專業(yè)網(wǎng)頁編輯器編輯，這些軟件上手更快，對于初學(xué)者來學(xué)習(xí)更適合。相對于SublimeText代碼編輯器等在線網(wǎng)頁編輯器它只需要刷新即可顯示修改過任何一小塊地方代碼的網(wǎng)頁，實(shí)時(shí)顯示錯(cuò)誤的地方提示，且用其開發(fā)網(wǎng)頁的效率更高，不論是在文件中編輯的代碼還是在網(wǎng)頁中展示其直觀表現(xiàn)性更強(qiáng)。

編寫網(wǎng)頁時(shí)可根據(jù)開發(fā)者自己的情況去選擇適合自己，更方便簡易的編輯方式。2.2CSS概述CSS，又稱為層疊樣式表，對網(wǎng)頁的頁面設(shè)計(jì)效果、排版效果及最后在網(wǎng)頁中展示的頁面效果起到了無可比擬的作用。2001年W3C完成推出了CSS3的工作草案，為網(wǎng)站開發(fā)的頁面效果設(shè)計(jì)貢獻(xiàn)了巨大作用。在網(wǎng)頁中，若想要實(shí)現(xiàn)一個(gè)旋轉(zhuǎn)移動效果，可能需要在JavaScript中編寫大量代碼來實(shí)現(xiàn)，而正因?yàn)橛辛薈SS，只需要幾行代碼即可實(shí)現(xiàn)這個(gè)效果，這為網(wǎng)站開發(fā)者帶來了巨大便利。在CSS中，可以直接通過background-image設(shè)置網(wǎng)頁背景圖片，并且通過background-position、background-repeat等屬性直接調(diào)整背景圖片，直接避免因?yàn)轫撁娑鄬哟蔚膯栴}而要反復(fù)設(shè)計(jì)協(xié)同布局。還可以通過CSS文本對網(wǎng)頁中的文字效果進(jìn)行設(shè)計(jì)，如通過line-height設(shè)置文字行高，還可以通過文本陰影text-shadow為文字加上陰影效果。而在CSS3版本中，更添加了box-shadow為盒子添加陰影。在CSS中還可以設(shè)置鏈接在不同狀態(tài)如link、visted、hover、active時(shí)的效果，大大節(jié)省了在JavaScript中編寫代碼實(shí)現(xiàn)效果的時(shí)間，而對于超鏈接有下劃線的效果，更可以通過一句簡單的text-decoration：none;去掉，這些效果的實(shí)現(xiàn)都是十分便捷的。CSS列表與表格中的多個(gè)屬性更使原本在網(wǎng)頁中輸出的僵硬表格更生動，視覺效果更好。在瀏覽圖片網(wǎng)頁時(shí)，可以發(fā)現(xiàn)圖片都呈瀑布流布局排列，這也是CSS的作用之一，在CSS中可以通過幾句簡單的代碼實(shí)現(xiàn)圖片瀑布流效果布局，整個(gè)頁面就能讓人看起來更舒適，更整潔，在淘寶京東等購物網(wǎng)站中，都可以發(fā)現(xiàn)這種瀑布流的效果布局十分實(shí)用。而在CSS中極具亮點(diǎn)之一的便是其轉(zhuǎn)換過渡與動畫效果，通過位移函數(shù)translate()、縮放函數(shù)scale()、旋轉(zhuǎn)函數(shù)rotate()、傾斜函數(shù)skew()四個(gè)函數(shù)實(shí)現(xiàn)頁面中某些元素從靜到動的變化效果，更可以通過過渡效果，在元素從這到那變化過程中添加過渡的視覺效果，更能抓住用戶的眼球。同樣的，CSS中的動畫也是如此。通過CSS，開發(fā)者不用借助Adobe中的Flash、Photoshop等軟件實(shí)現(xiàn)復(fù)雜的頁面效果，也不需要冗長的JavaScript代碼實(shí)現(xiàn)一些交互效果。但CSS在兼容性問題上仍存在一些問題，實(shí)現(xiàn)某一些效果時(shí)我們需要針對不用的瀏覽器輸入不同的前綴如Chrome：-webkit-、Firefox：-moz-linear-gradient再加上想要實(shí)現(xiàn)的動畫效果，但這僅僅是針對CSS中動畫、瀑布流效果、過渡效果等，大部分CSS中的樣式仍正常受用，且僅僅面對兼容性問題僅僅是多加一句前綴，這對于網(wǎng)站開發(fā)者來說都是正?？梢越邮芊秶鷥?nèi)的。畢竟CSS所實(shí)現(xiàn)的頁面效果是無可比擬的。2.3Bootstrap概述Bootstrap作為前端開發(fā)框架，是由美國Twitter公司的設(shè)計(jì)師MarkOtto和JacobThornton合作開發(fā)的。Bootstrap包含了基本結(jié)構(gòu)、CSS、組件及部分JavaScript插件以及定制功能。通過CSS網(wǎng)站開發(fā)者可以輕易設(shè)計(jì)不同的頁面效果，但有一些效果是不同網(wǎng)站開發(fā)者普遍共同需要的，例如導(dǎo)航欄、頁面分塊、下拉菜單等，這些效果對于不同網(wǎng)站的開發(fā)者是重復(fù)的編寫，因此，Bootstrap就出現(xiàn)了。通過下載安裝包引入css、js文件，開發(fā)者在文本中通過在<divclass=“”>中的class屬性即可以標(biāo)識這個(gè)<div>在bootstrap中定義好的css部分，通過兩句簡單的代碼即可在里面開始編寫導(dǎo)航欄的內(nèi)容，所展現(xiàn)的導(dǎo)航欄頁面效果基本是當(dāng)代眾多網(wǎng)站的大體導(dǎo)航欄布局，正因?yàn)橐肓薭ootstrap，前端開發(fā)者不用自己再一次又一次編寫重復(fù)的CSS代碼，只需要簡單的代碼即可獲得想要的效果。在bootstrap官網(wǎng)中，官方給出了許多例子有關(guān)前端頁面排版等效果，這些都是十分實(shí)用的。還包含了一些在網(wǎng)頁中十分實(shí)用的圖標(biāo)，如聊天鬧鐘箭頭圖片等，這些圖標(biāo)在前端的引用中既簡潔又是用戶生活中所熟悉的。引用時(shí)十分方便，還可以根據(jù)自己的喜好設(shè)置其大小。最貼心的是，在bootstrap中還有定制功能。通過改變代碼前端開發(fā)者可以控制bootstrap生成自己想要的呈現(xiàn)的頁面效果，定制的功能細(xì)致到可以整體改變文字顏色甚至按鈕的顏色樣式等再生成壓縮包下載引用，開發(fā)效率更高，且前端開發(fā)者還能定制出屬于自己構(gòu)思獨(dú)一無二的頁面效果，布局統(tǒng)一和諧。2.4B/S結(jié)構(gòu)隨著HTML的發(fā)展，Web技術(shù)發(fā)展也在不斷地完善。相對于C/S架構(gòu)（客戶機(jī)/網(wǎng)絡(luò)/服務(wù)器）如騰訊QQ等，B/S架構(gòu)（瀏覽器/\t"/item/BS%E6%9E%B6%E6%9E%84/_blank"服務(wù)器）模式有更強(qiáng)地適應(yīng)范圍。其建立在廣域網(wǎng)之上，用戶只需要下載一個(gè)瀏覽器如\t"/item/BS%E6%9E%B6%E6%9E%84/_blank"InternetExplorer、firefox等，服務(wù)器安裝了\t"/item/BS%E6%9E%B6%E6%9E%84/_blank"SQLServer等數(shù)據(jù)庫就可以通過訪問web服務(wù)器實(shí)現(xiàn)數(shù)據(jù)交互，不需要像QQ、微信等C/S架構(gòu)安裝特定的軟件才能進(jìn)行訪問。這樣做大大簡化了用戶在使用客戶端時(shí)的過程，也降低了開發(fā)成本，節(jié)約資源。2.5PHP簡介PHP作為一種開源的腳本語言,在Web開發(fā)領(lǐng)域中扮演了至關(guān)重要的角色，其混合了C、Perl、Java和PHP本身自創(chuàng)的語法，有利于開發(fā)者的學(xué)習(xí)，在Web開發(fā)領(lǐng)域中使用十分廣泛，更是眾多實(shí)現(xiàn)動態(tài)網(wǎng)站開發(fā)中的首選。PHP技術(shù)加數(shù)據(jù)庫的結(jié)合是眾多初學(xué)者在開發(fā)動態(tài)網(wǎng)站的選擇。在Web開發(fā)中，PHP相對于其他腳本語言更具這幾點(diǎn)好處，首先，它作為一種開源的語言加上它的免費(fèi)性，這更有利于激勵(lì)更多想要學(xué)習(xí)的開發(fā)者去學(xué)習(xí)去使用，是一種非常容易學(xué)習(xí)并且上手的語言，而我國市場在這部分的需求也不斷地吸引激勵(lì)人才發(fā)展PHP技術(shù)，不斷去更新去完善；其次，PHP還可以直接通過代碼地編寫實(shí)現(xiàn)與數(shù)據(jù)庫相連接，如MySQL、Oracle等主流數(shù)據(jù)庫，使開發(fā)者可以通過代碼的編寫對數(shù)據(jù)庫中存儲的數(shù)據(jù)直接處理并輸出在網(wǎng)頁前端，處理效率更高，更簡化了處理步驟，執(zhí)行效率高。正如進(jìn)入網(wǎng)站時(shí)的登錄注冊步驟，通過PHP將用戶注冊的賬號與設(shè)定的密碼傳到數(shù)據(jù)庫中保存，在登錄的時(shí)候再通過調(diào)用數(shù)據(jù)庫中已注冊的數(shù)據(jù)對比用戶輸入的賬號密碼是否正確而允許用戶訪問進(jìn)入網(wǎng)站；最后，開發(fā)者在使用PHP語言時(shí)，可以同時(shí)將其面向過程及面向?qū)ο?，將二者一起混合使用，這也是PHP相較于其它一些編程語言的一個(gè)重要特點(diǎn)。它可植入性強(qiáng)，在拓展性方面也相對完善。2.6MYSQL數(shù)據(jù)庫MYSQL作為當(dāng)代數(shù)據(jù)庫管理系統(tǒng)主流之一，在存儲管理數(shù)據(jù)上受到了絕大多數(shù)開發(fā)者的青睞，它是開放源代碼的類型，方便任何開發(fā)者下載編寫，更方便初學(xué)者學(xué)習(xí)理解使用，簡易上手。它處理數(shù)據(jù)效率高，同時(shí)存放的信息可以很好歸類整理，可以根據(jù)存放數(shù)據(jù)的不同類型不同使用人群建立不同的數(shù)據(jù)庫，庫內(nèi)又可以建立不同的表格，表格中插入不同的標(biāo)志信息，這樣在存放數(shù)據(jù)時(shí)就能做到井然有序，而在查詢時(shí)又可以更根據(jù)關(guān)鍵字進(jìn)行查詢并且輸出結(jié)果，即使是面對大量數(shù)據(jù)儲存都可以輕易通過SQL語言進(jìn)行“增刪改查”，是數(shù)據(jù)的“文件柜”。PHP技術(shù)加上MYSQL數(shù)據(jù)庫的組合是絕大多數(shù)前端開發(fā)者的選擇，特別是作為前端開發(fā)初學(xué)者，其免費(fèi)性與開源兼容性都對開發(fā)者很友好，且處理數(shù)據(jù)高，節(jié)省了不必要的過程，節(jié)約成本，開發(fā)效率高等優(yōu)點(diǎn)。通過這兩個(gè)組合，為開發(fā)者營造了很好的開發(fā)環(huán)境。2.7總結(jié)綜上所述，網(wǎng)站以B/S為架構(gòu)，前端基于HTML5，加入了CSS樣式及框架的使用，后端則采用PHP技術(shù)結(jié)合MYSQL數(shù)據(jù)庫完成。系統(tǒng)分析3.1可行性分析本次開發(fā)的網(wǎng)站是基于HTML5的社交類網(wǎng)站，首先可以先通過現(xiàn)代各大社交類網(wǎng)站功能特性，結(jié)合用戶溝通調(diào)查而分析出的目標(biāo)需求初步確定本次網(wǎng)站開發(fā)的目標(biāo)及所要實(shí)現(xiàn)的用戶需求。通過上面兩步確立目標(biāo)后，接下來開始討論開發(fā)網(wǎng)站的可行性。3.1.1技術(shù)可行性本次開發(fā)的網(wǎng)站主要前端由HTML5加上后端由PHP技術(shù)+MYSQL數(shù)據(jù)庫實(shí)現(xiàn)，網(wǎng)站基于B/S架構(gòu)，即瀏覽器/服務(wù)器模式開發(fā)。開發(fā)中，在前端頁面部分借助HTML5結(jié)合CSS中的樣式進(jìn)行網(wǎng)站布局，還將引用Bootstrap框架利用它們結(jié)合設(shè)計(jì)出簡約美觀的用戶界面，并將PHP嵌入基于HTML5的前端開發(fā)中，實(shí)現(xiàn)簡單的動態(tài)交互網(wǎng)頁。后端通過PHP技術(shù)+MYSQL實(shí)現(xiàn)用戶管理員管理數(shù)據(jù)功能，能完整存儲所有數(shù)據(jù)并能對數(shù)據(jù)進(jìn)行操作。這幾者的結(jié)合，完全可以保證及實(shí)現(xiàn)本次網(wǎng)站開發(fā)的目標(biāo)，是本次網(wǎng)站開發(fā)不可或缺的。綜上所述，本次網(wǎng)頁的開發(fā)具備了技術(shù)的可行性。3.1.2操作可行性本次開發(fā)的網(wǎng)站基于B/S架構(gòu)前端由HTML5加上后端由PHP技術(shù)+MYSQL數(shù)據(jù)庫能基本實(shí)現(xiàn)網(wǎng)站的完整開發(fā)。而用戶在運(yùn)用該網(wǎng)站時(shí)不需要專業(yè)的代碼知識，只需要使用電腦進(jìn)行訪問即可快速上手。與用戶使用現(xiàn)代大多社交網(wǎng)站一樣，通過簡單的注冊登錄即可訪問頁面，瀏覽發(fā)布自己所想要發(fā)布的內(nèi)容。對于管理員來說，則需要熟悉社交網(wǎng)站用戶基本準(zhǔn)則，對部分發(fā)布敏感言論的用戶進(jìn)行言論管理及注銷用戶。本次開發(fā)的網(wǎng)站十分便于用戶及管理員操作，無需學(xué)習(xí)額外更多的操作知識，易于使用與管理。綜上所述，本次網(wǎng)頁的開發(fā)具備了操作的可行性。3.1.3經(jīng)濟(jì)可行性在本次開發(fā)的網(wǎng)站中，基于HTML5、PHP、MYSQL數(shù)據(jù)庫技術(shù)支持的開源性及免費(fèi)性，及開發(fā)所需要的設(shè)備軟件都是開發(fā)者日常生活中具備的，因此開發(fā)成本較低，綜上所述，本次網(wǎng)頁的開發(fā)具備了經(jīng)濟(jì)的可行性。3.1.4法律可行性在本次開發(fā)的網(wǎng)站中，基于HTML5、PHP、MYSQL數(shù)據(jù)庫技術(shù)支持都是開源性的，代碼可以供網(wǎng)站開發(fā)者隨意參考學(xué)習(xí)改寫使用，沒有觸犯任何法律，且網(wǎng)站思想內(nèi)容健康向上，網(wǎng)站皆由開發(fā)者構(gòu)思布局，不存在觸及法律等非法問題，綜上所述，本次網(wǎng)頁的開發(fā)具備了法律的可行性。3.2系統(tǒng)設(shè)計(jì)流程分析3.2.1系統(tǒng)開發(fā)流程分析本次開發(fā)的網(wǎng)站是基于HTML5的社交類網(wǎng)站，首先通過現(xiàn)代各大社交類網(wǎng)站功能特性，結(jié)合用戶溝通調(diào)查而分析出的目標(biāo)需求初步確定本次網(wǎng)站開發(fā)的目標(biāo)及所要實(shí)現(xiàn)的用戶需求，進(jìn)行開發(fā)最后開發(fā)者進(jìn)行網(wǎng)站測試，網(wǎng)站開發(fā)流程分析如圖所示：圖3-1系統(tǒng)開發(fā)流程分析圖3.2.2系統(tǒng)操作流程分析首先進(jìn)入網(wǎng)站時(shí)有登錄注冊步驟，網(wǎng)站通過PHP技術(shù)將用戶注冊的賬號與設(shè)定的密碼傳到數(shù)據(jù)庫中保存，在登錄的時(shí)候再通過調(diào)用數(shù)據(jù)庫中已注冊的數(shù)據(jù)對比用戶輸入的賬號密碼是否正確而允許用戶訪問進(jìn)入網(wǎng)站，操作流程如圖所示：圖3-2系統(tǒng)操作流程分析圖3.2.3系統(tǒng)用戶登錄流程分析在用戶進(jìn)入網(wǎng)站時(shí)首先要先登錄注冊步驟，用戶將自己注冊的賬號，賬號則是用戶的用戶名，用戶在正確輸入對應(yīng)注冊的賬號密碼時(shí)則可以訪問進(jìn)入網(wǎng)站，系統(tǒng)用戶登錄流程分析如圖所示：圖3-3系統(tǒng)用戶登錄流程分析圖3.3系統(tǒng)用例分析用戶進(jìn)入網(wǎng)站后，可以看到社交網(wǎng)站的首頁、公告、廣告、話題等內(nèi)容，還可以編輯刪除發(fā)布動態(tài)記錄，編輯發(fā)表刪除評論，用戶用例分析如圖所示：圖3-4系統(tǒng)用戶用例分析圖系統(tǒng)設(shè)計(jì)4.1系統(tǒng)概述本次開發(fā)的社交網(wǎng)站以B/S為架構(gòu)，所以用戶只需要下載Chrome、Firefox等其中一個(gè)瀏覽器，通過在服務(wù)器上配置數(shù)據(jù)庫連接，即可與網(wǎng)站進(jìn)行數(shù)據(jù)交互。系統(tǒng)的工作原理如圖：圖4-1系統(tǒng)工作原理圖4.2系統(tǒng)結(jié)構(gòu)設(shè)計(jì)在系統(tǒng)的設(shè)計(jì)開發(fā)中，首先針對了當(dāng)代眾多社交類網(wǎng)站的功能模塊對比，再根據(jù)調(diào)查的用戶需求，網(wǎng)站分為了首頁、話題兩大板塊，而網(wǎng)站的總體構(gòu)成又是由每一個(gè)小用戶塊通過使用他們作為用戶具有的特定功能以及用戶與用戶之間的交互、用戶與話題之間的互動構(gòu)成。所以在系統(tǒng)結(jié)構(gòu)設(shè)計(jì)中，用戶與用戶模塊、用戶與話題模塊、用戶自身模塊之間具有一定的聯(lián)系，這便將被保存在網(wǎng)站的數(shù)據(jù)庫中，并能實(shí)時(shí)進(jìn)行數(shù)據(jù)交換。在設(shè)計(jì)開發(fā)時(shí)，應(yīng)該先捋清這幾大板塊及它們之間的聯(lián)系，初步提出半完整的整體系統(tǒng)結(jié)構(gòu)設(shè)計(jì)，在后續(xù)的網(wǎng)站開發(fā)中能逐步完善整體結(jié)構(gòu)設(shè)計(jì)，使其能順利地進(jìn)行數(shù)據(jù)信息交互，信息的管理上也能細(xì)致化，高效率化，構(gòu)思出理想的系統(tǒng)構(gòu)造設(shè)計(jì)。基于HTML5社交網(wǎng)站系統(tǒng)架構(gòu)設(shè)計(jì)如圖所示：圖4-2系統(tǒng)結(jié)構(gòu)設(shè)計(jì)圖4.3數(shù)據(jù)庫結(jié)構(gòu)設(shè)計(jì)數(shù)據(jù)庫的開發(fā)首先需要分析用戶對系統(tǒng)的需求，然后根據(jù)用戶的需求對數(shù)據(jù)庫結(jié)構(gòu)進(jìn)行設(shè)計(jì)，最后運(yùn)行和管理數(shù)據(jù)庫[武法提，基于WEB的學(xué)習(xí)環(huán)境設(shè)計(jì)[J].電化教育研究，2000(4):33-38.黃華，網(wǎng)頁設(shè)計(jì)與制作[J].電腦編程技巧與維護(hù)，2009(10):101-102.溫謙.HTML+CSS網(wǎng)頁設(shè)計(jì)與布局從入門到精通[M].人民郵電出版社，2008.武法提，基于WEB的學(xué)習(xí)環(huán)境設(shè)計(jì)[J].電化教育研究，2000(4):33-38.黃華，網(wǎng)頁設(shè)計(jì)與制作[J].電腦編程技巧與維護(hù)，2009(10):101-102.溫謙.HTML+CSS網(wǎng)頁設(shè)計(jì)與布局從入門到精通[M].人民郵電出版社，2008.馬強(qiáng).Dreamweaver網(wǎng)頁設(shè)計(jì)課程教學(xué)方法探討[J].福建電腦，2008,24(4):208--208.[5]楊潔.數(shù)據(jù)庫技術(shù)在湖北省局在線暫態(tài)穩(wěn)定控制系統(tǒng)中的應(yīng)用研究[D].華中科技大學(xué),2006.[]趙揚(yáng)名.基于JavaEE的煙草質(zhì)量管理平臺的設(shè)計(jì)與實(shí)現(xiàn)[D].武漢科技大學(xué),2013.數(shù)據(jù)庫作為存儲網(wǎng)站交互數(shù)據(jù)的重要工具之一，所以在網(wǎng)站開發(fā)過程中需要先分清不同的人群使用的數(shù)據(jù)庫。這要求了網(wǎng)站在開發(fā)中不僅要有用戶自身使用對自己動態(tài)評論話題探討的數(shù)據(jù)庫，還要有管理員對管理網(wǎng)站中所有用戶動態(tài)評論話題探討的數(shù)據(jù)庫，用戶自身是沒有權(quán)利使用管理員的數(shù)據(jù)庫的，而管理員則可以管理用戶的數(shù)據(jù)庫，在用戶沒有違反網(wǎng)絡(luò)文明言論等原則下可以不插手用戶的數(shù)據(jù)庫。這樣的結(jié)構(gòu)設(shè)計(jì)，既可以讓用戶有自身管理的自由，提高自身自覺意識，充分為用戶營造了自己的“小天地”，也讓管理員有管理的權(quán)利，充分保證了社交網(wǎng)站的美好環(huán)境。4.3.1數(shù)據(jù)庫設(shè)計(jì)原則在設(shè)計(jì)數(shù)據(jù)庫的過程中，通常使用自上而下、自下而上、逐步擴(kuò)展、混合策略這四種方法[[]尹輝.基于PDM的發(fā)動機(jī)連桿產(chǎn)品結(jié)構(gòu)和配置管理系統(tǒng)研究[D].昆明理工大學(xué),2012.][]尹輝.基于PDM的發(fā)動機(jī)連桿產(chǎn)品結(jié)構(gòu)和配置管理系統(tǒng)研究[D].昆明理工大學(xué),2012.在物理結(jié)構(gòu)設(shè)計(jì)階段，分兩步進(jìn)行：確定物理結(jié)構(gòu)和評估物理結(jié)構(gòu)[[][]符石.畢業(yè)設(shè)計(jì)管理系統(tǒng)研究與開發(fā)[D].中山大學(xué),2014.4.3.2數(shù)據(jù)庫概念模型在設(shè)計(jì)數(shù)據(jù)庫的過程中，先分清不同的人群使用的數(shù)據(jù)庫，按照目前的開發(fā)學(xué)習(xí)，可以分為用戶塊及管理員塊。其次，整理網(wǎng)站所需要存儲實(shí)現(xiàn)交互的數(shù)據(jù)，將其根據(jù)共同特點(diǎn)分出大類小類。例如，在用戶的數(shù)據(jù)庫中建立一個(gè)評論模塊的表，在這部分則需要用到的字段是用戶的ID、評論的內(nèi)容及評論的時(shí)間，這些之間都是存在一定的聯(lián)系的。所以，通過對開發(fā)的網(wǎng)站的分析，我們可以繪制其概念數(shù)據(jù)模型以最大化地直觀地展現(xiàn)，更有利于開發(fā)時(shí)操作。動態(tài)評論信息E-R圖參考分析圖：圖4-3動態(tài)評論信息E-R圖話題評論信息E-R圖參考分析圖：圖4-4話題評論信息E-R圖4.3.3數(shù)據(jù)庫表設(shè)計(jì)在設(shè)計(jì)數(shù)據(jù)庫階段，通常使用現(xiàn)有的數(shù)據(jù)庫管理系統(tǒng)作為數(shù)據(jù)庫設(shè)計(jì)的基礎(chǔ)[[]王一鋒.基于B/S模式的網(wǎng)上書店交易平臺系統(tǒng)的設(shè)計(jì)[D].山東大學(xué)，2009.[]王一鋒.基于B/S模式的網(wǎng)上書店交易平臺系統(tǒng)的設(shè)計(jì)[D].山東大學(xué)，2009.表4-1comment評論信息表列名數(shù)據(jù)類型長度主鍵允許空說明idint11否否編號user_idint11否否用戶編號contentvarchar255否否評論內(nèi)容create_timetimestamp否否評論時(shí)間表4-2topic話題評論信息表列名數(shù)據(jù)類型長度主鍵允許空說明idint11否否編號user_idint11否否用戶編號contentvarchar255否否話題內(nèi)容create_timetimestamp否否發(fā)表時(shí)間表4-3weibo用戶動態(tài)信息表列名數(shù)據(jù)類型長度主鍵允許空說明idint11否否編號user_idint11否否用戶編號contentvarchar200否否動態(tài)內(nèi)容create_timetimestamp否否發(fā)表時(shí)間表4-4users用戶動態(tài)信息表列名數(shù)據(jù)類型長度主鍵允許空說明idint11否否編號usernamevarchar255否否用戶名passwordvarchar255否否密碼系統(tǒng)實(shí)現(xiàn)本章系統(tǒng)實(shí)現(xiàn)內(nèi)容主要分為前端界面功能的展示模塊、后臺數(shù)據(jù)庫管理端界面模塊及系統(tǒng)中一些核心代碼的實(shí)現(xiàn)模塊。5.1用戶首頁界面用戶輸入自己正確的賬號密碼后登錄訪問網(wǎng)頁，其界面如圖所示：圖5-1網(wǎng)站首頁界面5.1.1用戶注冊界面若用戶沒有自己的賬號登錄訪問網(wǎng)頁則先應(yīng)該進(jìn)行注冊，系統(tǒng)將錄入用戶注冊的信息傳送至數(shù)據(jù)庫保存，其界面如圖所示：圖5-2網(wǎng)站注冊界面5.1.2用戶登錄界面在用戶開始訪問網(wǎng)站時(shí)首先進(jìn)入的是登錄界面,登錄個(gè)人賬號以進(jìn)入網(wǎng)站，系統(tǒng)將對比用戶信息是否正確允許其進(jìn)入網(wǎng)站，其界面如圖所示：圖5-3網(wǎng)站登錄界面5.1.3用戶發(fā)表動態(tài)界面通過發(fā)表用戶可以發(fā)布自己想要發(fā)布的內(nèi)容，也可以刪除自己不想要的動態(tài)，其界面如圖所示：圖5-4用戶發(fā)表動態(tài)界面5.1.4用戶評論動態(tài)界面通過評論功能用戶可以評論別人的動態(tài)，其界面如圖所示： 圖5-5用戶發(fā)表評論界面5.1.5話題界面網(wǎng)站還引入了有關(guān)話題的討論，其界面如圖所示：圖5-6話題首頁界面5.1.6用戶話題評論界面用戶可以利用評論功能參與話題討論，其界面如圖所示：圖5-7話題討論界面5.1.7系統(tǒng)公告內(nèi)容界面系統(tǒng)中還放置了固定的公告，提醒用戶文明上網(wǎng)，其界面如圖所示：圖5-8公告內(nèi)容界面5.2系統(tǒng)后臺實(shí)現(xiàn)用戶在網(wǎng)站中即可以自己管理自己的數(shù)據(jù)信息等，而這些信息都會被存放在數(shù)據(jù)庫中由管理員來把控，可以對用戶的數(shù)據(jù)信息進(jìn)行刪除，修改等操作，營造一個(gè)良好的網(wǎng)絡(luò)環(huán)境。5.2.1數(shù)據(jù)庫實(shí)現(xiàn)系統(tǒng)管理者可進(jìn)入數(shù)據(jù)庫管理用戶數(shù)據(jù)信息。其界面如圖所示：圖5-9數(shù)據(jù)庫界面5.2.2后臺管理中心界面管理者還可通過網(wǎng)站后臺管理中心，管理用戶數(shù)據(jù)信息。其界面如圖所示：圖5-10后臺管理中心界面5.3核心代碼實(shí)現(xiàn)核心代碼的實(shí)現(xiàn)主要包括注冊登錄方面、發(fā)表評論動態(tài)方面、刪除動態(tài)評論方面。5.3.1注冊登錄實(shí)現(xiàn)注冊功能：1、首先確認(rèn)注冊網(wǎng)頁成功連接數(shù)據(jù)庫。2、判斷是否是post請求以及是否都填入了用戶名和密碼，否則報(bào)錯(cuò)。3、符合要求則將注冊的資料傳入數(shù)據(jù)庫保存。<?php

require

'conn.php';

if

('POST'

==

$_SERVER['REQUEST_METHOD'])

{

if

(!isset($_POST['username'])

||

''

==

$_POST['username'])

{

exit('賬號不能為空');

}

if

(!isset($_POST['password'])

||

''

==

$_POST['password'])

{

exit('密碼不能為空');

}

if

(!isset($_POST['confirm'])

||

$_POST['password']

!=

$_POST['confirm'])

{

exit('兩次輸入的密碼不一致');

}

$result

=

$conn->query("SELECT

*

FROM

`users`

WHERE

`username`

=

'{$_POST['username']}'

LIMIT

1");

if

($result->num_rows)

{

exit('該賬號已存在');

}

$conn->query("INSERT

INTO

`users`(`username`,

`password`)

VALUES

('{$_POST['username']}','{$_POST['password']}')");

exit('<script>alert("注冊成功");location.href

=

login.php;</script>');

}

else

{

require

'../html/register.html';

}

登錄功能：1、首先確認(rèn)登錄網(wǎng)頁成功連接數(shù)據(jù)庫。2、判斷是否是post請求以及輸入的賬號密碼是否與數(shù)據(jù)庫中存入的數(shù)據(jù)相 同，不同則報(bào)錯(cuò)。3、符合要求登錄成功跳轉(zhuǎn)至網(wǎng)站首頁。<?php

require

'conn.php';

if

('POST'

==

$_SERVER['REQUEST_METHOD'])

{

$result

=

$conn->query("SELECT

*

FROM

`users`

WHERE

`username`

=

'{$_POST['username']}'

AND

`password`

=

'{$_POST['password']}'

LIMIT

1");

if

(!$result->num_rows)

{

exit('賬號不存在或密碼錯(cuò)誤');

}

setcookie('username',

$_POST['username']);

setcookie('password',

$_POST['password']);

header('location:

homepage.php');

}

else

{

require

'../html/login.html';

}

5.3.2評論動態(tài)發(fā)表刪除實(shí)現(xiàn)發(fā)表動態(tài)功能：1、判斷文本框中是否輸入發(fā)布的內(nèi)容。2、將發(fā)布的內(nèi)容存入數(shù)據(jù)庫中。3、調(diào)出數(shù)據(jù)庫中保存的發(fā)布內(nèi)容顯示在網(wǎng)頁中。

$user

=

$result->fetch_assoc();

if

(!isset($_POST['content'])

||

''

==

$_POST['content'])

{

exit('請輸入要發(fā)布的內(nèi)容');

}

$conn->query("INSERT

INTO

`weibo`(`user_id`,

`content`)

VALUES

('{$user['id']}','{$_POST['content']}')");

exit('<script>alert("發(fā)布成功");location.href

=

document.referrer;</script>');

}

else

{

header('location:

login.php');

}

$user

=

$result->fetch_assoc();

$result

=

$conn->query("SELECT

`weibo`.*,`users`.`username`

FROM

`weibo`

LEFT

JOIN

`users`

ON

`weibo`.`user_id`

=

`users`.`id`

WHERE

`weibo`.`user_id`

=

'{$user['id']}'

ORDER

BY

`create_time`

DESC");

$weibo

=

array();

while

($res

=

$result->fetch_assoc())

{

$rows

=

$conn->query($sql

=

"SELECT

`comment`.*,`users`.`username`

FROM

`comment`

LEFT

JOIN

`users`

ON

`comment`.`user_id`

=

`users`.`id`

WHERE

`weibo_id`

=

'{$res['id']}'

ORDER

BY

`create_time`

DESC");

$comment

=

array();

while

($row

=

$rows->fetch_assoc())

{

$comment[]

=

$row;

}

$res['comment']

=

$comment;

$weibo[]

=

$res;

}

<?php

foreach($weibo

as

$wb)

{

?>

<div

class="media"

style="margin-top:20px;">

<a

class="media-left"

href="#">

<img

src="../images/u16.jpg"

height="62"

width="62"

class="img-circle"

alt=""/>

</a>

<div

class="media-body">

<h5

class="media-heading">

<b><?=$wb['username']?></b>

</h5>

<p

style="color:#999;font-size:12px;"><?=$wb['create_time']?></p>

<p><?=$wb['content']?>

刪除動態(tài)功能：1、判斷是否點(diǎn)擊刪除按鈕。2、刪除數(shù)據(jù)庫中對應(yīng)刪除的內(nèi)容。3、刪除顯示在網(wǎng)頁中對應(yīng)刪除的內(nèi)容。if

(isset($_COOKIE['username'],

$_COOKIE['password']))

{

$result

=

$conn->query("SELECT

*

FROM

`users`

WHERE

`username`

=

'{$_COOKIE['username']}'

AND

`password`

=

'{$_COOKIE['password']}'

LIMIT

1");

if

(!$result->num_rows)

{

header('location:

login.php');

}

$user

=

$result->fetch_assoc();

$conn->query("DELETE

FROM

`weibo`

WHERE

`id`

=

'{$_GET['id']}'");

exit('<script>alert("刪除成功");location.href

=

document.referrer;</script>');

發(fā)表評論功能：1、判斷是否輸入評論內(nèi)容及點(diǎn)擊評論按鈕。2、將評論內(nèi)容存入數(shù)據(jù)庫中。3、評論內(nèi)容顯示在網(wǎng)頁用戶動態(tài)下方。if

(!isset($_POST['content'])

||

''

==

$_POST['content'])

{

exit('<script>alert("請輸入要評論的內(nèi)容");history.back();</script>');

}

$conn->query("INSERT

INTO

`comment`(`user_id`,

`weibo_id`,

`content`)

VALUES

('{$user['id']}','{$_POST['weibo_id']}','{$_POST['content']}')");

exit('<script>alert("評論成功");location.href

=

document.referrer;</script>');

<form

action="comment.php"

method="post">

<input

type="hidden"

name="weibo_id"

value="<?=$wb['id']?>">

<div

class="input-group">

<input

type="text"

name="content"

class="form-control"

placeholder="請輸入評論內(nèi)容">

<span

class="input-group-btn"><button

class="btn

btn-default"

type="submit"

style="margin-right:

15px;">評論</button></span>

</div><!--

/input-group

-->

</form>

<div

class="list-group">

<?php

foreach($wb['comment']

as

$comment)

{

?>

<div

class="list-group-item"

style="margin-right:

15px;">

<h4

class="list-group-item-heading">

<?=$comment['username']?>

<small

class="text-muted"><?=$comment['create_time']?></small>

</h4>

<p

class="list-group-item-text"><?=$comment['content']?>

<a

href="comment-delete.php?id=<?=$comment['id']?>"

class="btn

btn-xs

btn-danger">刪除</a></p>

</div>

<?php

}

?>

刪除評論功能：1、判斷是否點(diǎn)擊刪除按鈕。2、將對應(yīng)的評論內(nèi)容從數(shù)據(jù)庫中刪除。3、刪除顯示在網(wǎng)頁用戶動態(tài)下方的對應(yīng)評論。if

(!isset($_GET['id'])

||

''

==

$_GET['id'])

{

exit('<script>alert("請選擇要?jiǎng)h除的評論");history.back();</script>');

}

$conn->query("DELETE

FROM

`comment`

WHERE

`id`

=

'{$_GET['id']}'");

exit('<script>alert("刪除成功");location.href

=

document.referrer;</script>');

系統(tǒng)測試6.1系統(tǒng)測試的意義網(wǎng)站開發(fā)的最后一步則是對系統(tǒng)進(jìn)行全面、詳細(xì)的測試。系統(tǒng)測試主要測試系統(tǒng)功能，安全，可用性，性能等方面是否滿足系統(tǒng)需求[[][]余海偉.手工藝品企業(yè)的管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].廈門大學(xué),2017.[11]張峻峰.機(jī)構(gòu)編制實(shí)名制管理系統(tǒng)的研發(fā)[D].華南理工大學(xué),2014.[12]陳書百.高?！坝?jì)算機(jī)基礎(chǔ)”專題學(xué)習(xí)網(wǎng)站設(shè)[D].華中師范大學(xué),2013.[13]李薇.醫(yī)藥費(fèi)報(bào)銷管理系統(tǒng)的實(shí)現(xiàn)及其數(shù)據(jù)分析[D].河北科技大學(xué),2009.[14]張聰一種復(fù)合模式的倉儲式物流配送管理系統(tǒng)設(shè)計(jì)[J].商場現(xiàn)代化.2006,(07):86-87.[15]賈沃斯基，JavaScript與JSript從入門到精通[M].電子工業(yè)出版社，1999.致謝本次網(wǎng)站開發(fā)的畢設(shè)到此已經(jīng)接近尾聲，跟著它一起將要告一段落的是我寶貴的大學(xué)生涯。在此，我要感謝大學(xué)四年中陪伴著我，當(dāng)我有困難時(shí)主動幫助我，與我一起學(xué)習(xí)一起進(jìn)步的大學(xué)舍友。同時(shí)，我也要感謝我的畢設(shè)導(dǎo)師吳志達(dá)老師，謝謝您耐心的指導(dǎo)教學(xué)，在課程中不斷地以有趣的例子引導(dǎo)我們學(xué)習(xí)，開闊我們的視野，大學(xué)生涯有您這樣一位老師我感到十分榮幸，在此深深地感謝您。為了讓用戶在使用時(shí)能得到很好的用戶體驗(yàn)，應(yīng)當(dāng)對網(wǎng)站進(jìn)行詳細(xì)的測試，測試是為了修改完善開發(fā)的網(wǎng)站中不足的地方，爭取為用戶提供良好的用戶體驗(yàn)。測試流程圖如下所示：圖6-1測試流程圖6.2測試結(jié)果本次對系統(tǒng)展開了詳細(xì)周全的測試，目的是讓用戶在使用本系統(tǒng)時(shí)能有更好的體驗(yàn)，它用于檢查系統(tǒng)的所有方面是否能滿足用戶需求，以確保用戶使用體驗(yàn)：（1）界面在不同瀏覽器上運(yùn)行無誤，正常顯示。（2）功能請求正常，無報(bào)錯(cuò)。（3）網(wǎng)站運(yùn)行正常，無延遲等情況。（4）在正常的網(wǎng)絡(luò)下，網(wǎng)站響應(yīng)時(shí)間符合正常平臺響應(yīng)時(shí)間。6.3測試結(jié)果分析本次開發(fā)的基于HTML5的社交類平臺兼容性強(qiáng)，用戶只需要下載一個(gè)瀏覽器，服務(wù)器安裝一個(gè)數(shù)據(jù)庫就可以訪問，無需安裝特定的軟件。進(jìn)入頁面后，具有個(gè)人設(shè)計(jì)特色的頁面能給用戶帶來視覺上的享受。使用網(wǎng)站時(shí)，操作簡單，用戶與Web服務(wù)器能實(shí)現(xiàn)高效率的數(shù)據(jù)交互。系統(tǒng)管理者管理網(wǎng)站時(shí)操作也能簡易上手，全面管理用戶的數(shù)據(jù)信息?？偨Y(jié)與展望7.1總結(jié)本次網(wǎng)站開發(fā)經(jīng)歷前期構(gòu)思開發(fā)類型—對比同類網(wǎng)站特點(diǎn)—調(diào)查同類用戶需求—設(shè)計(jì)功能模塊—設(shè)計(jì)網(wǎng)頁頁面排版—建立相關(guān)數(shù)據(jù)庫—完善網(wǎng)頁功能—測試改進(jìn)這幾個(gè)過程，雖然整個(gè)過程持續(xù)時(shí)間不長，但對我來說卻學(xué)習(xí)了不少的知識，通過一個(gè)網(wǎng)站的初步開發(fā)，鞏固了在大學(xué)中學(xué)習(xí)的相關(guān)知識包括HTML5、PHP及MYSQL數(shù)據(jù)庫等，加強(qiáng)了對這些知識面的操作運(yùn)用能力。經(jīng)過這段時(shí)間的學(xué)習(xí)到最后完成項(xiàng)目，我學(xué)習(xí)了很多知識也總結(jié)出了許多經(jīng)驗(yàn)，特作出一下總結(jié)：多學(xué)習(xí)多瀏覽相關(guān)優(yōu)秀作品。在開發(fā)過程中有時(shí)候可能想法比較單一，這個(gè)時(shí)候就可以通過學(xué)習(xí)瀏覽相關(guān)優(yōu)秀作品獲得靈感，在瀏覽學(xué)習(xí)時(shí)開發(fā)者的眼界也會被打開，這也是一個(gè)學(xué)習(xí)的過程。通過不斷地學(xué)習(xí)完善自己網(wǎng)站中的不足之處。規(guī)劃好網(wǎng)站功能需求的實(shí)現(xiàn)。一個(gè)網(wǎng)站的開發(fā)是一個(gè)不小的工程，在這之前，規(guī)劃好網(wǎng)站功能需求也是十分重要的。需要提前學(xué)習(xí)相關(guān)的知識，安裝搭建好開發(fā)環(huán)境，規(guī)劃好頁面設(shè)計(jì)、功能實(shí)現(xiàn)、數(shù)據(jù)庫的搭建等，將這一系列流程詳細(xì)編排好，這樣開發(fā)網(wǎng)站時(shí)才能有條不紊地進(jìn)行，對每一步的實(shí)行都了如指掌。養(yǎng)成良好的編碼習(xí)慣。在編寫代碼時(shí)，我們應(yīng)該做到代碼行行整潔，注釋清楚代碼中模糊或者尚待決定的地方，不同文件與文件之間建好文件夾歸類，命好名。盡管是個(gè)人項(xiàng)目，但這種好習(xí)慣能讓你在后期測試時(shí)更方便清晰地去修改代碼，完善項(xiàng)目。同時(shí)，代碼的整潔也讓人視覺不容易產(chǎn)生疲憊，從而厭倦。多動腦多動手。在開發(fā)的過程中，可能由于知識有限，對知識的不熟悉等問題我們可以通過學(xué)習(xí)網(wǎng)站、詢問老師同學(xué)、翻看學(xué)習(xí)書籍等學(xué)習(xí)借鑒，但這都要建立在自己多動手敲代碼的基礎(chǔ)上，特別是當(dāng)同一個(gè)方法運(yùn)用在自己的編寫的代碼中報(bào)錯(cuò)時(shí)，能積極主動解決便是最大的收獲。通過實(shí)戰(zhàn)式打代碼解決報(bào)錯(cuò)問題能更好地加深對方法的理解及應(yīng)用，是一個(gè)學(xué)習(xí)的好機(jī)會。整理總結(jié)筆記。通過本次網(wǎng)站項(xiàng)目的開發(fā)學(xué)習(xí)，我收獲了許多新知識與實(shí)現(xiàn)功能的方法，這些都是以往所學(xué)習(xí)的專業(yè)理論知識中沒有注意到的，是寶貴的經(jīng)驗(yàn)，不應(yīng)該隨著本次項(xiàng)目的結(jié)束而忘懷。所以我們應(yīng)該養(yǎng)成整理總結(jié)筆記的好習(xí)慣，這樣才能讓知識更好地銘記在心，靈活運(yùn)用。通過本次網(wǎng)站的開發(fā)，我學(xué)習(xí)到了許多新知識及獲得了許多實(shí)戰(zhàn)經(jīng)驗(yàn)。7.2展望本次基于HTML5的社交網(wǎng)站開發(fā)基本實(shí)現(xiàn)了用戶交互的一些功能，但由于個(gè)人能力問題等還有一些功能沒有實(shí)現(xiàn)，如前期計(jì)劃中的收藏用戶喜愛的微博、用戶與用戶之間實(shí)現(xiàn)實(shí)時(shí)聊天關(guān)注、屏蔽等功能，這些都需要超過個(gè)人能力知識層面去實(shí)現(xiàn)，有待今后進(jìn)一步研究。參考文獻(xiàn)

HYPERLINK如何給電腦重做系統(tǒng)給電腦重做系統(tǒng)，自己學(xué)學(xué)，可少花錢，哈哈[圖]

一、準(zhǔn)備工作:

如何重裝電腦系統(tǒng)

首先，在啟動電腦的時(shí)候按住DELETE鍵進(jìn)入BIOS，選擇AdvancedBIOSFeatures選項(xiàng)，按Enter鍵進(jìn)入設(shè)置程序。選擇FirstBootDevice選項(xiàng)，然后按鍵盤上的PageUp或PageDown鍵將該項(xiàng)設(shè)置為CD-ROM，這樣就可以把系統(tǒng)改為光盤啟動。

其次，退回到主菜單，保存BIOS設(shè)置。（保存方法是按下F10，然后再按Y鍵即可）

1.準(zhǔn)備好WindowsXPProfessional簡體中文版安裝光盤,并檢查光驅(qū)是否支持自啟動。

2.可能的情況下，在運(yùn)行安裝程序前用磁盤掃描程序掃描所有硬盤檢查硬盤錯(cuò)誤并進(jìn)行修復(fù)，否則安裝程序運(yùn)行時(shí)如檢查到有硬盤錯(cuò)誤即會很麻煩。

3.用紙張記錄安裝文件的產(chǎn)品密匙(安裝序列號)。

4.可能的情況下，用驅(qū)動程序備份工具(如:驅(qū)動精靈2004V1.9Beta.exe)將原WindowsXP下的所有驅(qū)動程序備份到硬盤上(如∶F:Drive)。最好能記下主板、網(wǎng)卡、顯卡等主要硬件的型號及生產(chǎn)廠家，預(yù)先下載驅(qū)動程序備用。

5.如果你想在安裝過程中格式化C盤或D盤(建議安裝過程中格式化C盤)，請備份C盤或D盤有用的數(shù)據(jù)。

二、用光盤啟動系統(tǒng):

(如果你已經(jīng)知道方法請轉(zhuǎn)到下一步),重新啟動系統(tǒng)并把光驅(qū)設(shè)為第一啟動盤,保存設(shè)置并重啟。將XP安裝光盤放入光驅(qū),重新啟動電腦。剛啟動時(shí)，當(dāng)出現(xiàn)如下圖所示時(shí)快速按下回車鍵，否則不能啟動XP系統(tǒng)光盤安裝。如果你不知道具體做法請參考與這相同的-->如何進(jìn)入純DOS系統(tǒng):

光盤自啟動后,如無意外即可見到安裝界面,將出現(xiàn)如下圖1所示

查看原圖

全中文提示,“要現(xiàn)在安裝WindowsXP,請按ENTER”，按回車鍵后,出現(xiàn)如下圖2所示

查看原圖

許可協(xié)議,這里沒有選擇的余地，按“F8”后如下圖3

HYPERLINK

查看原圖

這里用“向下或向上”方向鍵選擇安裝系統(tǒng)所用的分區(qū)，如果你已格式化C盤請選擇C分區(qū)，選擇好分區(qū)后按“Enter”鍵回車，出現(xiàn)下圖4所示

查看原圖

這里對所選分區(qū)可以進(jìn)行格式化,從而轉(zhuǎn)換文件系統(tǒng)格,或保存現(xiàn)有文件系統(tǒng),有多種選擇的余地,但要注意的是NTFS格式可節(jié)約磁盤空間提高安全性和減小磁盤碎片但同時(shí)存在很多問題MacOS和98/Me下看不到NTFS格式的分區(qū),在這里選“用FAT文件系統(tǒng)格式化磁盤分區(qū)(快),按“Enter”鍵回車，出現(xiàn)下圖5所示

查看原圖

格式化C盤的警告,按F鍵將準(zhǔn)備格式化c盤,出現(xiàn)下圖6所示

HYPERLINK

查看原圖

由于所選分區(qū)C的空間大于2048M(即2G),FAT文件系統(tǒng)不支持大于2048M的磁盤分區(qū),所以安裝程序會用FAT32文件系統(tǒng)格式對C盤進(jìn)行格式化,按“Enter”鍵回車，出現(xiàn)下圖7所示

查看原圖圖7中正在格式化C分區(qū);只有用光盤啟動或安裝啟動軟盤啟動XP安裝程序,才能在安裝過程中提供格式化分區(qū)選項(xiàng)；如果用MS-DOS啟動盤啟動進(jìn)入DOS下,運(yùn)行i386\winnt進(jìn)行安裝XP時(shí),安裝XP時(shí)沒有格式化分區(qū)選項(xiàng)。格式化C分區(qū)完成后,出現(xiàn)下圖8所示

被過濾廣告

查看原圖

圖8中開始復(fù)制文件,文件復(fù)制完后，安裝程序開始初始化Windows配置。然后系統(tǒng)將會自動在15秒后重新啟動。重新啟動后,出現(xiàn)下圖9所示

HYPERLINK

查看原圖

9

查看原圖

過5分鐘后，當(dāng)提示還需33分鐘時(shí)將出現(xiàn)如下圖10

HYPERLINK

查看原圖

區(qū)域和語言設(shè)置選用默認(rèn)值就可以了，直接點(diǎn)“下一步”按鈕，出現(xiàn)如下圖11

查看原圖

這里輸入你想好的姓名和單位，這里的姓名是你以后注冊的用戶名，點(diǎn)“下一步”按鈕，出現(xiàn)如下圖12

HYPERLINK

查看原圖

如果你沒有預(yù)先記下產(chǎn)品密鑰（安裝序列號）就大件事啦！這里輸入安裝序列號，點(diǎn)“下一步”按鈕，出現(xiàn)如下圖13

HYPERLINK

查看原圖

安裝程序自動為你創(chuàng)建又長又難看的計(jì)算機(jī)名稱,自己可任意更改，輸入兩次系統(tǒng)管理員密碼，請記住這個(gè)密碼，Administrator系統(tǒng)管理員在系統(tǒng)中具有最高權(quán)限，平時(shí)登陸系統(tǒng)不需要這個(gè)帳號。接著點(diǎn)“下一步”出現(xiàn)如下圖14

查看原圖

日期和時(shí)間設(shè)置不用講,選北京時(shí)間，點(diǎn)“下一步”出現(xiàn)如下圖15

HYPERLINK

查看原圖

開始安裝,復(fù)制系統(tǒng)文件、安裝網(wǎng)絡(luò)系統(tǒng)，很快出現(xiàn)如下圖16

查看原圖

讓你選擇網(wǎng)絡(luò)安裝所用的方式，選典型設(shè)置點(diǎn)“下一步”出現(xiàn)如下圖17

HYPERLINK

查看原圖

點(diǎn)“下一步”出現(xiàn)如下圖18

HYPERLINK

查看原圖

繼續(xù)安裝，到這里后就不用你參與了，安裝程序會自動完成全過程。安裝完成后自動重新啟動，出現(xiàn)啟動畫面，如下圖19

HYPERLINK

查看原圖

第一次啟動需要較長時(shí)間，請耐心等候，接下來是歡迎使用畫面，提示設(shè)置系統(tǒng)，如下圖20

查看原圖

點(diǎn)擊右下角的“下一步”按鈕，出現(xiàn)設(shè)置上網(wǎng)連接畫面，如下圖21所示

HYPERLINK

查看原圖

點(diǎn)擊右下角的“下一步”按鈕，出現(xiàn)設(shè)置上網(wǎng)連接畫面，如下圖21所示

查看原圖

這里建立的寬帶撥號連接,不會在桌面上建立撥號連接快捷方式,且默認(rèn)的撥號連接名稱為“我的ISP”(自定義除外);進(jìn)入桌面后通過連接向?qū)Ы⒌膶拵芴栠B接,在桌面上會建立撥號連接快捷方式,且默認(rèn)的撥號連接名稱為“寬帶連接”(自定義除外)。如果你不想在這里建立寬帶撥號連接,請點(diǎn)擊“跳過”按鈕。

在這里我先創(chuàng)建一個(gè)寬帶連接,選第一項(xiàng)“數(shù)字用戶線(ADSL)或電纜調(diào)制解調(diào)器”,點(diǎn)擊“下一步”按鈕，如下圖22所示

HYPERLINK

查看原圖

目前使用的電信或聯(lián)通(ADSL)住宅用戶都有帳號和密碼的,所以我選“是,我使用用戶名和密碼連接”,點(diǎn)擊“下一步”按鈕，如下圖23所示

查看原圖

輸入電信或聯(lián)通提供的帳號和密碼,在“你的ISP的服務(wù)名”處輸入你喜歡的名稱,該名稱作為撥號連接快捷菜單的名稱,如果留空系統(tǒng)會自動創(chuàng)建名為“我的ISP”作為該連接的名稱,點(diǎn)擊“下一步”按鈕，如下圖24所示

查看原圖

已經(jīng)建立了撥號連接,微軟當(dāng)然想你現(xiàn)在就激活XP啦,不過即使不激活也有30天的試用期,又何必急呢?選擇“否,請等候幾天提醒我”,點(diǎn)擊“下一步”按鈕，如下圖25所示

HYPERLINK

查看原圖

輸入一個(gè)你平時(shí)用來登陸計(jì)算機(jī)的用戶名，點(diǎn)下一步出現(xiàn)如下圖26

HYPERLINK

查看原圖

點(diǎn)擊完成，就結(jié)束安裝。系統(tǒng)將注銷并重新以新用戶身份登陸。登陸桌面后如下圖27

HYPERLINK

查看原圖

六、找回常見的圖標(biāo)

在桌面上點(diǎn)開始-->連接到-->寬帶連接，如下圖32

查看原圖

左鍵點(diǎn)“寬帶連接”不放手，將其拖到桌面空白處,可見到桌面上多了一個(gè)“寬帶連接”快捷方式。結(jié)果如下圖33

HYPERLINK

查看原圖

然后，右鍵在桌面空白處點(diǎn)擊，在彈出的菜單中選“屬性”，即打開顯示“屬性窗口”如下圖34

查看原圖

在圖中單擊“桌面”選項(xiàng)卡，出現(xiàn)如下圖35

HYPERLINK

查看原圖

在圖中的左下部點(diǎn)擊“自定義桌面”按鈕，出現(xiàn)如下圖36

查看原圖

在圖中的上部，將“我的文檔”、“我的電腦”、“網(wǎng)上鄰居”和“InternetExplorer”四個(gè)項(xiàng)目前面的空格上打鉤，然后點(diǎn)“確定”，再“確定”，你將會看到桌面上多了你想要的圖標(biāo)。如下圖37

鍵盤上每個(gè)鍵作用!!!

F1幫助

F2改名

F3搜索

F4地址

F5刷新

F6切換

F10菜單

CTRL+A全選

CTRL+C復(fù)制

CTRL+X剪切

CTRL+V粘貼

CTRL+Z撤消

CTRL+O打開

SHIFT+DELETE永久刪除

DELETE刪除

ALT+ENTER屬性

ALT+F4關(guān)閉

CTRL+F4關(guān)閉

ALT+TAB切換

ALT+ESC切換

ALT+空格鍵窗口菜單

CTRL+ESC開始菜單

拖動某一項(xiàng)時(shí)按CTRL復(fù)制所選項(xiàng)目

拖動某一項(xiàng)時(shí)按CTRL+SHIFT創(chuàng)建快捷方式

將光盤插入到CD-ROM驅(qū)動器時(shí)按SHIFT鍵阻止光盤自動播放

Ctrl+1,2,3...切換到從左邊數(shù)起第1,2,3...個(gè)標(biāo)簽

Ctrl+A全部選中當(dāng)前頁面內(nèi)容

Ctrl+C復(fù)制當(dāng)前選中內(nèi)容

Ctrl+D打開“添加收藏”面版(把當(dāng)前頁面添加到收藏夾中)

Ctrl+E打開或關(guān)閉“搜索”側(cè)邊欄(各種搜索引擎可選)

Ctrl+F打開“查找”面版

Ctrl+G打開或關(guān)閉“簡易收集”面板

Ctrl+H打開“歷史”側(cè)邊欄

Ctrl+I打開“收藏夾”側(cè)邊欄/另:將所有垂直平鋪或水平平鋪或?qū)盈B的窗口恢復(fù)

Ctrl+K關(guān)閉除當(dāng)前和鎖定標(biāo)簽外的所有標(biāo)簽

Ctrl+L打開“打開”面版(可以在當(dāng)前頁面打開Iternet地址或其他文件...)

Ctrl+N新建一個(gè)空白窗口(可更改,Maxthon選項(xiàng)→標(biāo)簽→新建)

Ctrl+O打開“打開”面版(可以在當(dāng)前頁面打開Iternet地址或其他文件...)

Ctrl+P打開“打印”面板(可以打印網(wǎng)頁,圖片什么的...)

Ctrl+Q打開“添加到過濾列表”面板(將當(dāng)前頁面地址發(fā)送到過濾列表)

Ctrl+R刷新當(dāng)前頁面

Ctrl+S打開“保存網(wǎng)頁”面板(可以將當(dāng)前頁面所有內(nèi)容保存下來)

Ctrl+T垂直平鋪所有窗口

Ctrl+V粘貼當(dāng)前剪貼板內(nèi)的內(nèi)容

Ctrl+W關(guān)閉當(dāng)前標(biāo)簽(窗口)

Ctrl+X剪切當(dāng)前選中內(nèi)容(一般只用于文本操作)

Ctrl+Y重做剛才動作(一般只用于文本操作)

Ctrl+Z撤消剛才動作(一般只用于文本操作)

Ctrl+F4關(guān)閉當(dāng)前標(biāo)簽(窗口)

Ctrl+F5刷新當(dāng)前頁面

Ctrl+F6按頁面打開的先后時(shí)間順序向前切換標(biāo)簽(窗口)

Ctrl+F11隱藏或顯示菜單欄

Ctrl+Tab以小菜單方式向下切換標(biāo)簽(窗口)

Ctrl+Enter域名自動完成[url=].**.com[/url](內(nèi)容可更改,Maxthon選項(xiàng)→地址欄→常規(guī))/另:當(dāng)輸入焦點(diǎn)在搜索欄中時(shí),為高亮關(guān)鍵字

Ctrl+拖曳保存該鏈接的地址或已選中的文本或指定的圖片到一個(gè)文件夾中(保存目錄可更改,Maxthon選項(xiàng)→保存)

Ctrl+小鍵盤'+'當(dāng)前頁面放大20%

Ctrl+小鍵盤'-'當(dāng)前頁面縮小20%

Ctrl+小鍵盤'*'恢復(fù)當(dāng)前頁面的縮放為原始大小

Ctrl+Alt+S自動保存當(dāng)前頁面所有內(nèi)容到指定文件夾(保存路徑可更改,Maxthon選項(xiàng)→保存)

Ctrl+Shift+小鍵盤'+'所有頁面放大20%

Ctrl+Shift+小鍵盤'-'所有頁面縮小20%

Ctrl+Shift+F輸入焦點(diǎn)移到搜索欄

Ctrl+Shift+G關(guān)閉“簡易收集”面板

Ctrl+Shift+H打開并激活到你設(shè)置的主頁

Ctrl+Shift+