基于WordPress的互聯網網站設計與開發(fā)

基于WordPress的互聯網網站設計與開發(fā)摘要隨著中國經濟的飛速發(fā)展，計算機已經越來越多地應用于社會生活的各個領域。同時，互聯網作為它的連接全球計算機網絡信息和網站之間的溝通橋梁，作為其主要的表現形式，同時還是互聯網信息的主要承載者，無可否認其在Internet的發(fā)展上發(fā)揮著極其重要的作用。外國的互聯網已經發(fā)展到一定程度了，有很多外國著名的設計師都設計出極具創(chuàng)意的個人網站，在網絡上塑造自己的形象。中國的互聯網雖然在逐漸成熟，與此同時網絡上也出現了大量的個人網站，但是這類網站有絕大部分都是雷同的，而且沒有新意，屬于原創(chuàng)的作品寥寥可數。本次設計是以個人興趣為出發(fā)點的，設計將運用當今最新的Html5+Css3+Jquery前端技術來實現個人主頁，同時基于外國流行的開源軟件Workpress來進行個人網站的二次開發(fā)的。還有會以Php+Ajax+Mysql+Jquery技術來搭建個人相冊系統，最后會把個人主頁、個人相冊和個人博客三個應用合并在一起來呈現個人網站的。在此實現過程中還會運用Sina云計算平臺來實現云端操作的。關鍵詞:個人網站；個人博客；個人相冊；云計算；SVN

ThePersonalWebsiteDesignAndDevelopmentBasedonWordPressAbstractWiththerapiddevelopmentofChineseeconomy,computersciencehasbeengraduallyappliedtoallfieldsofsociallife.ThereisnodenyingthefactthatwebsiteplaysanimportantroleinthedevelopmentofInternet.WhileInternetisregardedasthecommunicationbridgebetweeninformationtechnologyandcomputersaroundtheglobe,websiteasthemainformofnetworkinformationremainsthemaincarrierofInternetinformation.ForeignInternethasprogressedtoacertainadvancedlevel,andmanyforeignprestigiousdesignershavecreatedalotofhighlycreativepersonalwebsitestoshapetheirownimages.ChineseInternethasbecomemoremature,butpersonalwebsitesthatcrowdtheInternetaremostlythesame,unoriginalandnotcreative.Myownareinspiredbymyinterest.IamgoingtoapplythelatestHtml5+Css3+Jqueryfrontendsystemtobuildupmyownpage.BasedontheforeignpopularopensourcesoftwareWorkpressforseconddevelopment,Iwillfinallycombinemyhomepage,personalalbumandpersonalblogtopresentthecontentofmyownwebsite.Duringthedesignandimplementationprocess,IwillalsoapplySinacloudplatformtoperformcloudoperation.Keywords：PersonalWebsite;PersonalBlog;PersonalAlbum;Cloudcomputing;SVN

目錄1緒論 11.1研究背景 11.2云計算簡介 11.3開發(fā)環(huán)境簡介 11.3.1Apache概述 21.3.2PHP概述 21.3.3Mysql概述 21.4SVN簡介 21.5Bootstrap簡介 31.6Workpress簡介 32需求分析 42.1系統需求 42.2需求分析 42.3系統功能分析圖 43總體設計 73.1系統結構圖 73.2總體功能設計 83.2.1系統設計目標 83.3數據庫設計 83.3.1系統數據分析 83.3.2系統E－R圖 93.4數據流圖 103.5數據字典 103.5.1文章評論額外信息表 103.5.2文章評論信息表 113.5.3鏈接信息表 123.5.4基本配置信息表 123.5.5文章額外數據表 133.5.6文章信息表 133.5.7文章分類表 153.5.8分類與文章關聯表 153.5.9分類信息表 153.5.10用戶額外信息表 163.5.11用戶基本信息表 164設計思想與實現 184.1個人主頁 184.2個人相冊 204.3個人博客 215系統測試與運行 235.1系統運行環(huán)境 235.1.1硬件環(huán)境 235.1.2軟件環(huán)境 236結束語 241緒論1.1研究背景20世紀90年代中期互聯網開始高速發(fā)展，很多IT人才利用自身的優(yōu)勢開發(fā)了許多風格迥異的網站。當時互聯網上幾乎全是個人網站，毫不夸張，個人網站掀開了互聯網的新篇章。在這批個人網站逐步上市并成功晉升為知名商業(yè)網站后，它們完成了自己的使命，慢慢退出歷史舞臺。由于當時的商業(yè)網站不論從技術還是從內容來看都很不成熟，所以個人網站才有機會存活并積極發(fā)展起來。在這種大環(huán)境下，當時產生了大量內容豐富、風格多樣的的個人網站，但是與其說它們是個人網站，不如說它們在為商業(yè)網站作著補充。不論是有意還是無意，這批個人網站走的完全是商業(yè)網站的套路，需要大量的投入。正是這種發(fā)展的先天性決定了個人網站必亡的命運。隨著商業(yè)網站的逐步成熟，這些個人網站的補充作用無疑是多余的，被取而代之是必然的。當下那種按照個人喜好設置的個人主頁無疑是個人網站中的翹楚，數量非常之多，其內容大多是關于站長的自我介紹，粘貼一些網絡熱文等等，其目的無非就是為個人提供一個展示自我的平臺，隨著互聯網的深度發(fā)展，這類個人網站將會越來越受歡迎，數量也會越來越多。1.2云計算簡介 云計算是一種按使用流量或者按使用時間付費的服務，這種服務提供方便的、快捷的、按需要的網絡接入。大量的分布式計算機合并資源來實現云計算，使得其互聯網與企業(yè)數據中心很類似。中國目前提供云計算服務比較好的平臺分別是百度云開放平臺和新浪SAE云計算平臺。1.3開發(fā)環(huán)境簡介我的網站是基于國外開源系統Wordpress設計的，而Wordpress是一個以PHP和MySQL為平臺的自由開源的博客軟件和內容管理系統。所以我的網站的最佳的開發(fā)環(huán)境是LAMP（Linux+Apache+Mysql+PHP），由于Linux服務器的搭建比較麻煩，出于方便原因，我最后在本地環(huán)境使用了WAMP（Windows+Apache+Mysql+PHP）環(huán)境進行開發(fā)。同時出于要把網站上傳到網絡上供用戶訪問，并且要更好地實現代碼的管理與減少網絡端服務器搭建的成本，我還選擇了新浪云計算平臺來開發(fā)我的程序。1.3.1Apache概述Apache是英文ApacheHTTPServer的縮寫，它幾乎支持所有計算機操作系統，是一個當今最流行的Web服務器端軟件。它的特點是操作簡單，響應速度快，性能穩(wěn)定，而且可以通過簡單的API擴展將Perl/Python等解釋器編譯到服務器中。Apache兼容性非常好，這點使它與PHP和MySQL結合起來是一個絕佳的PHP程序開發(fā)環(huán)境。由于Apache是一個免費的開源軟件，所以有很多人愿意使用它并為它開發(fā)新的功能，添加新的特性并且不斷地改進。1.3.2PHP概述PHP是一種腳本語言，其英文全稱為ypertextPreprocessor，譯為中文是超級文本預處理語言的意思。PHP是一種嵌入HTML文檔在服務器端執(zhí)行的腳本語言，它的語言風格和C語言相似。目前在社會上流行的PHP版本為PHP5，PHP6即將發(fā)布穩(wěn)定版。1.3.3Mysql概述目前世界上運行速度最快的SQL語言數據庫是MySQL。MySQL不單單具有很多其他數據庫不具有的設置和功能，而且重點還是一款可供用戶直接網上下載的完全不收取費用的產品，可以個人使用，也可以商業(yè)使用。MySQl的特點是功能強大、是跨平臺語言、執(zhí)行速度快、支持面向對象操作、維護成本低、內置函數強大、數據存儲量大、兼容各種腳本開發(fā)語言、安全性高。1.4SVN簡介 SVN是一個跨平臺軟件，基本上支持所有操作系統，它和CVS類似。SVN是一個開源的版本控制系統，它管理著隨時間改變的數據。SVN通過一個類似于普通文件服務器的檔案庫（中央資料檔案庫）來記錄每一次文件的變動。所以我們就可以隨時隨地地把檔案恢復到任何舊的版本，或是查看文件的歷史變動。Subversion可以用來管理任何類型的文件，包括程序源碼在內，它是一個通用的系統。 SVN的優(yōu)點如下：1.易于使用，邏輯清晰，符合大眾的操作習慣。2.管理容易，安全性高。3.代碼一致性非常高。4.適合普遍小型項目的開發(fā)。1.5Bootstrap簡介Bootstrap是現在比較流行的前端響應式框架，它是twitter公司旗下的產品。響應式框架的優(yōu)點：1.跨瀏覽器。2.設計上保持風格一致。3.快速開發(fā)。4.響應式：同時適用在移動設備上觀看。1.6Workpress簡介Wordpress是一個外國流行的基于PHP語言和Mysql數據庫的CMS（內容管理）系統。近些年來被引進中國，掀起了互聯網的一股熱潮。由于其代碼的規(guī)范性和系統易用性，Wordpress不單單可以用來做個人博客，而且還可以做公司網站，甚至電子商務網站。2需求分析2.1系統需求個人網站指的是團體或個人因某種興致、并且擁有某種專業(yè)技術、基于為用戶提供某種服務或展示自我的目的而產生具有獨立域名和空間的網站。建立個人網站的目的是為了在網絡上展示自己，塑造自己的個人形象的。為了讓別人更加直觀、清晰、詳細地了解我，我決定把我的網站由三個系統組合而成，分別是個人主頁，個人博客和個人相冊。同時為了提高系統的穩(wěn)定性、可維護性、擴充性、可移植性，我使用了新浪云計算平臺來作為我云端服務器運行的環(huán)境。運用SVN版本控制來減少系統維護的壓力。2.2需求分析根據系統分析，基于WordPress的個人網站的要求如下：網站需求分析：要有新穎的界面設計，布局應該簡潔大氣，讓人瀏覽時產生舒適的感覺，給用戶留下好的印象，好的心情，使其耐心瀏覽；操作簡單與方便，能適用于不同水平的使用者，并且讓用戶快速尋找到他們想要了解的信息；要有互動功能，給用戶與作者有交流的渠道，讓有興趣的用戶方便地聯系作者；代碼可重用性，可讀性，可維護性要好，方便后期維護與升級。網站性能要求：需要符合WEB2.0標準，w3c標準；響應速度要快，負載均衡；能處理多并發(fā)請求，功能穩(wěn)定；服務器穩(wěn)定工作時間長，容錯率高。2.3系統功能分析圖個人主頁功能分析圖，如圖2-1所示：圖2-1個人主頁功能分析圖個人主頁主要由三大內容部分組成，分別是個人信息簡要介紹部分，輪播圖片展示個人相冊部分，html5地圖展示旅行計劃部分。同時，個人主頁作為個人相冊和個人博客的入口。個人相冊功能分析圖，如圖2-2所示：圖2-2個人相冊功能分析圖個人相冊的功能是向用戶展示我喜愛或收藏的圖片，把圖片分為專輯來存放便于用戶瀏覽。在后臺利用php+ajax+js技術支持動態(tài)多線程無刷新地管理圖片。管理員可以對專輯和圖片進行增刪查改操作。還可以修改管理員密碼。

個人博客功能分析圖，如圖2-3所示：圖2-3個人博客主頁功能分析圖個人博客的評論與留言功能給用戶提供了與我互動的地方，增加相冊api和播放音樂功能是為了增加網站的趣味性，頁面和文章的功能是博客的主要功能。管理員在后臺擁有管理所有信息和系統設定的權限，包括文章、頁面、評論、留言、用戶的管理，系統、主題和插件的設置等。3總體設計3.1系統結構圖基于WordPress的個人網站系統結構圖，如圖3-1所示：圖3-1基于Wordpress的個人網站系統結構圖3.2總體功能設計3.2.1系統設計目標系統總的設計是為了達到以下目標：提高網站的代碼的規(guī)范性，可讀性，可重用性和可維護性，減少插件使用，簡化系統框架，利于搜索引擎收錄。以用戶體驗為優(yōu)先設計原則，注重網站的整體的美觀性與協調性，簡化操作，提高互動性，增強網站內容的可讀性。增強網站的負載能力與加快網站響應速度。3.3數據庫設計3.3.1系統數據分析通過對個人網站系統的分析，可以得出該系統涉及兩類類實體：用戶和管理員。這些實體涉及的數據項如下圖3-2至圖3-3所示：圖3-2用戶實體圖圖3-3管理員實體圖3.3.2系統E－R圖通過對系統實體數據關系的分析，可以畫出如下E-R圖，如圖3-4所示:圖3-4基于Wordpress的個人網站系統E-R圖

3.4數據流圖數據流圖如3-5所示：圖3-5基于Wordpress的個人網站系統數據流圖3.5數據字典3.5.1文章評論額外信息表描述：保存文章評論額外信息，例如metakey等。表3-1文章評論額外信息表字段類型空默認說明meta_idbigint(20)否自增唯一IDcomment_idbigint(20)否0對應評論IDmeta_keyvarchar(255)是NULL鍵名meta_valuelongtext是NULL鍵值3.5.2文章評論信息表描述：保存文章評論信息。表3-2文章評論信息表字段類型空默認說明comment_IDbigint(20)否自增唯一IDcomment_post_IDbigint(20)否0對應文章IDcomment_authortinytext否評論者comment_author_emailvarchar(100)否評論者郵箱comment_author_urlvarchar(200)否評論者網址comment_author_IPvarchar(100)否評論者IPcomment_datedatetime否0000-00-0000:00:00評論時間comment_date_gmtdatetime否0000-00-0000:00:00評論時間（GMT+0時間）comment_contenttext否評論正文comment_karmaint(11)否0未知comment_approvedvarchar(20)否1評論是否被批準comment_agentvarchar(255)否評論者的USERAGENTcomment_typevarchar(20)否評論類型(pingback/普通)comment_parentbigint(20)否0父評論IDuser_idbigint(20)否0評論者用戶ID（不一定存在）3.5.3鏈接信息表描述：保存鏈接信息表。表3-3鏈接信息表字段類型空默認說明link_idbigint(20)否自增唯一IDlink_urlvarchar(255)否鏈接URLlink_namevarchar(255)否鏈接標題link_imagevarchar(255)否鏈接圖片link_targetvarchar(25)否鏈接打開方式link_descriptionvarchar(255)否鏈接描述link_visiblevarchar(20)否Y是否可見（Y/N）link_ownerbigint(20)否1添加者用戶IDlink_ratingint(11)否0評分等級link_updateddatetime否0000-00-0000:00:00未知link_relvarchar(255)否XFN關系link_notesmediumtext否XFN注釋link_rssvarchar(255)否鏈接RSS地址3.5.4基本配置信息表描述：通常通過get_option來操作，該表通常作為插件存儲數據的一個地方。表3-4基本配置信息表字段類型空默認說明option_idbigint(20)否自增唯一IDoption_namevarchar(64)否鍵名option_valuelongtext否鍵值autoloadvarchar(20)否yesWordPress載入時自動載入（yes/no）3.5.5文章額外數據表描述：保存文章額外數據，例如文章瀏覽次數，文章的自定義字段等都存儲在這里。表3-5文章額外數據表字段類型空默認說明meta_idbigint(20)否自增唯一IDpost_idbigint(20)否0對應文章IDmeta_keyvarchar(255)是NULL鍵名meta_valuelongtext是NULL鍵值3.5.6文章信息表描述：保存文章信息，包括了日志、附件、頁面等等信息。是WordPress最重要的一個數據表。表3-6文章信息表字段類型空默認說明IDbigint(20)否自增唯一IDpost_authorbigint(20)否0對應作者IDpost_datedatetime否0000-00-0000:00:00發(fā)布時間post_date_gmtdatetime否0000-00-0000:00:00發(fā)布時間（GMT+0時間）post_contentlongtext否正文post_titletext否標題post_excerpttext否摘錄post_statusvarchar(20)否publish文章狀態(tài)（publish/auto-draft/inherit等）comment_statusvarchar(20)否open評論狀態(tài)（open/closed）ping_statusvarchar(20)否openPING狀態(tài)（open/closed）post_passwordvarchar(20)否文章密碼post_namevarchar(200)否文章縮略名to_pingtext否未知pingedtext否已經PING過的鏈接post_modifieddatetime否0000-00-0000:00:00修改時間post_modified_gmtdatetime否0000-00-0000:00:00修改時間（GMT+0時間）post_content_filteredlongtext否未知post_parentbigint(20)否0父文章，主要用于PAGEguidvarchar(255)否未知menu_orderint(11)否0排序IDpost_typevarchar(20)否post文章類型（post/page等）post_mime_typevarchar(100)否MIME類型comment_countbigint(20)否0評論總數3.5.7文章分類表描述：保存文章分類、鏈接分類、標簽的信息表。表3-7文章分類表字段類型空默認說明term_idbigint(20)否分類IDnamevarchar(200)否分類名slugvarchar(200)否縮略名term_groupbigint(10)否0未知3.5.8分類與文章關聯表描述：分類與文章信息表（wp_posts）、鏈接表(wp_links)的關聯表。表3-8分類與文章關聯表字段類型空默認說明object_idbigint(20)否0對應文章ID/鏈接IDterm_taxonomy_idbigint(20)否0對應分類方法IDterm_orderint(11)否0排序3.5.9分類信息表描述：區(qū)分wp_terms信息的分類類型，有category、link_category和tag三種分類類型。表3-9分類信息表字段類型空默認說明term_taxonomy_idbigint(20)否分類方法IDterm_idbigint(20)否0taxonomyvarchar(32)否分類方法(category/post_tag)descriptionlongtext否未知parentbigint(20)否0所屬父分類方法IDcountbigint(20)否0文章數統計3.5.10用戶額外信息表描述：保存用戶額外信息表。表3-10用戶額外信息表字段類型空默認說明umeta_idbigint(20)否自增唯一IDuser_idbigint(20)否0對應用戶IDmeta_keyvarchar(255)是NULL鍵名meta_valuelongtext是NULL鍵值3.5.11用戶基本信息表描述：存放系統所有用戶基本信息。表3-11用戶基本信息表字段類型空默認說明IDbigint(20)否自增唯一IDuser_loginvarchar(60)否登錄名user_passvarchar(64)否密碼user_nicenamevarchar(50)否昵稱user_emailvarchar(100)否Emailuser_urlvarchar(100)否網址user_registereddatetime否0000-00-0000:00:00注冊時間user_activation_keyvarchar(60)否激活碼user_statusint(11)否0用戶狀態(tài)display_namevarchar(250)否顯示名稱4設計思想與實現我的基于WordPress的個人網站由三部分組成，分別是個人主頁，個人博客和個人相冊，相面分別介紹這三部分的設計思想和展示界面效果。4.1個人主頁個人主頁界面如圖4-1：圖4-1個人主頁界面主界面的設計使用了網絡新興前端技術Html5+Css3+Jquery來實現的，運用Html5實現地圖信息獲取功能；運用Css3來實現文字傾斜，旋轉等文字特效；運用Jquery來實現歡迎頁面特效和圖片相冊輪播。主頁風格簡單大氣，直觀明了，頭部制作了導航欄，讓用戶一進網站就能迅速獲取到他們想了解的信息。由于頁面比較長，我特意在底部做了回到頭部按鈕，提高用戶體驗。4.2個人相冊個人相冊主界面如圖4-2和圖4-3所示：圖4-2個人相冊主界面圖4-3個人相冊主界面?zhèn)€人相冊后臺界面如圖4-4：圖4-4個人相冊后臺界面我的個人相冊系統是運用Php+Ajax+Jquery制作的。個人相冊界面設計走英倫路線，以黑白為主調營造炫酷的的氛圍。為了滿足用戶瀏覽的需要，我的相冊是分專輯展示的。而且在每個專輯里面都有兩種展示圖片的形式，一種是幻燈片形式，可以看到每張圖片的標題和描述文字，另一種是自動播放相冊展示形式，可以高清地欣賞圖片。和普通的相冊展示軟件不同的是，我的個人相冊系統是帶有后臺管理的。在后臺里我可以任意增刪改專輯和圖片，并且能夠多線程地上傳圖片。4.3