畢業(yè)設(shè)計(jì)（論文）-基于Drupal框架的“重師青年”雜志管理系統(tǒng)開發(fā).docx

全日制本科生畢業(yè)論文題 目： 基于Drupal框架的“重師青年”雜志管理系統(tǒng)開發(fā) 學(xué) 院： 計(jì)算機(jī)與信息科學(xué)學(xué)院 專業(yè)年級(jí)： 計(jì)算機(jī)科學(xué)與技術(shù)（師范）2012級(jí) 學(xué)生姓名： 學(xué)號(hào)： 指導(dǎo)教師： 職稱： 2016 年 5 月 6 日 基于Drupal框架的“重師青年”雜志管理系統(tǒng)開發(fā) 摘 要：本畢業(yè)設(shè)計(jì)是基于Drapul框架進(jìn)行雜志管理系統(tǒng)的開發(fā)。該系統(tǒng)的主要功能包括發(fā)布文章、文章管理、人員管理、模板管理、外觀更改等。本系統(tǒng)的運(yùn)行環(huán)境是Apache+MySql，其主體部分是后臺(tái)管理系統(tǒng)，采用了Drupal、php等技術(shù)。同時(shí)也包含前臺(tái)頁面，采用html、Css、JavaScript、Bootstrap、Ajax等技術(shù)。此系統(tǒng)已經(jīng)開發(fā)成功，功能已達(dá)到設(shè)計(jì)要求，并可以正常運(yùn)行。關(guān)鍵詞：Drapul；php；JavaScript；管理后臺(tái)全套設(shè)計(jì)加扣3012250582 Abstract：Based on the Drapal framework, this Graduation design develop a journal management system. The conditions of the system run are Apache and MySql, this systems dominant part is the background management system, using Drupal ,PHP and other technologies; also includes the front-end page, using HTML, Css, JavaScript, Bootstrap, Ajax and so on. Through the above technologies, the system achieves the main functions including publishing articles, article management, personnel management, template management and changing the appearance. This system has been developed, the function has reached the design requirements, and can run normally.Key words：Drapul; php; JavaScript; Management system 隨著網(wǎng)絡(luò)的迅速發(fā)展，網(wǎng)上瀏覽信息早已成為大學(xué)生的一種習(xí)慣，通過網(wǎng)上雜志管理系統(tǒng)，雜志社管理員能及時(shí)將雜志社發(fā)布的活動(dòng)、文章等信息更新到線上，使得用戶可以隨時(shí)查看信息，使得管理員管理更方便、快捷。1 技術(shù)與工具概述1.1 開發(fā)工具及技術(shù)本系統(tǒng)使用開發(fā)工具有phpstorm編輯器，phpstudy環(huán)境集成包，photoshop圖像處理軟件等;開發(fā)中主要使用技術(shù)包含drupal、php、mysql、html、javascript、css.下面是對主要開發(fā)工具以及開發(fā)環(huán)境和Drupal框架的簡要介紹。1.1.1 PhpstormPhpstorm：一款輕量級(jí)的編輯器，可在Windows,Mac OS X,Linux上運(yùn)行，安裝簡單，支持zen編碼，相對DW而言，其優(yōu)勢在于可以跟蹤代碼。1.1.2 Phpstudy IDEphpstudy ：phpstudy 集成了最新的Apache、PHP、MySQL、phpMyAdmin。phpstudy無須配置即可使用，是非常方便、好用的虛擬服務(wù)器。該程序不僅包括PHP調(diào)試環(huán)境，還包括開發(fā)工具以及開發(fā)手冊等。Phpstudy支持多種版本，可以隨意進(jìn)行版本切換，也可以根據(jù)開發(fā)需求進(jìn)行路由配置。1.1.3 DrupalDrupal是用來構(gòu)建網(wǎng)站的，它是一個(gè)基于php語言編寫的CMF。它的特點(diǎn)有：可擴(kuò)展性強(qiáng)、安全性高、高度模塊化、追求代碼簡潔、內(nèi)核精煉。Drupal的設(shè)計(jì)目標(biāo)使得其既可在廉價(jià)web虛擬主機(jī)上運(yùn)行，也可以適應(yīng)高負(fù)載的分布式站點(diǎn)。所以可以選擇phpstudy IDE配合開發(fā)1。1.2 開發(fā)環(huán)境及搭建1.2.1 開發(fā)環(huán)境操作系統(tǒng)：win7操作系統(tǒng)瀏覽器：谷歌瀏覽器編輯器：Phpstorm服務(wù)器：Apache （采用phpstudy 集成環(huán)境包）開發(fā)語言：PHP、Javascript、html、css數(shù)據(jù)庫：MYSQL1.2.2 開發(fā)環(huán)境搭建以下是對本系統(tǒng)開發(fā)環(huán)境的搭建說明，在開發(fā)時(shí)，一定要先完成Phpstudy 環(huán)境搭建后完成Drupal環(huán)境搭建,否則會(huì)導(dǎo)致環(huán)境搭建不成功。（1）Phpstorm開發(fā)環(huán)境搭建下載Phpstorm最新版，然后按提示安裝。安裝完成后，為方便后期開發(fā)，打開整個(gè)項(xiàng)目，修改快捷鍵（File-setting-keymap）。Phpstorm的zen編碼快捷鍵是Tab。（2）Phpstudy 環(huán)境搭建下載Phpstudy最新版，然后按提示安裝，安裝時(shí)選擇安裝目錄為自己的站點(diǎn)運(yùn)行目錄，然后啟動(dòng)程序，左鍵單擊“php版本”（如圖1.1所示），選擇Apache+php版本并應(yīng)用。開發(fā)過程中若需要更改hosts,左鍵單擊“其他選項(xiàng)菜單”，選擇“打開hosts”（如圖1.2所示），然后對hosts進(jìn)行修改、保存。（注：修改完后一定要重啟phpstudy,否則修改無效。）圖1-1 php版本切換圖 圖1-2 hosts修改圖（3）數(shù)據(jù)庫環(huán)境搭建用Navicat或者phpstorm的mysql工具新建數(shù)據(jù)庫。注：記錄下數(shù)據(jù)庫名、用戶名、密碼，以便之后使用。（4）Drupal環(huán)境搭建下載drupal:打開drupal官網(wǎng)，下載drupal核心包7.43版。下載得到的其實(shí)就是drupal的核心。目前，drupal8相對drupal7而言，功能模塊數(shù)量較少，且整體性能不足7穩(wěn)定，而drupal7.43修復(fù)了之前版本的重大bug，故下載7.43版2。解壓drupal：將drupal核心包解壓至站點(diǎn)運(yùn)行目錄（d:/www）。下載語言包：打開/translate/languages/zh-hans頁面，下載相應(yīng)的語言包（.po文件）。安裝語言包：將下載的語言包放至d:/www/drupal7.43/profiles/standard/translations 目錄下。初始化:在瀏覽器中打開http:/localhost/drupal-7.43/，此時(shí)瀏覽器會(huì)運(yùn)行drupal的index.php。選擇“Standard”，然后點(diǎn)擊 Save and continue 執(zhí)行下一步。選擇語言：選擇簡體中文，點(diǎn)擊 Save and continue 執(zhí)行下一步。數(shù)據(jù)庫配置：按照提示填寫數(shù)據(jù)庫的配置信息，如數(shù)據(jù)庫名、數(shù)據(jù)庫用戶名以及數(shù)據(jù)庫用戶的密碼等，點(diǎn)擊下一步。安裝Drupal：此時(shí)系統(tǒng)執(zhí)行Drupal的安裝工作，并且系統(tǒng)自動(dòng)導(dǎo)入翻譯，然后進(jìn)入到Drupal站點(diǎn)配置頁面。Drupal站點(diǎn)設(shè)置：按照提示填寫相關(guān)站點(diǎn)信息，點(diǎn)擊Save and Continue，此時(shí)便完成了drupal的安裝。訪問站點(diǎn)：站點(diǎn)url為： http:/localhost/drupal-7.43/注：drupal環(huán)境搭建中第9步站點(diǎn)設(shè)置時(shí)設(shè)置的管理員賬戶擁有超級(jí)管理員權(quán)限。2 需求分析2.1 系統(tǒng)需求分析2.1.1 前臺(tái)頁面需求分析（1）前臺(tái)頁面應(yīng)包含首頁，學(xué)習(xí)、考研、校園、畢業(yè)季、樂活列表頁，最近更新，加入我們。訪問前臺(tái)頁面無需注冊與登錄。（2）首頁展示網(wǎng)站logo、導(dǎo)航欄、首頁大圖、推薦文章。（3）學(xué)習(xí)、考研、校園、畢業(yè)季、樂活為該分類下的對應(yīng)列表頁，點(diǎn)擊進(jìn)入相應(yīng)的詳情頁。（4）最近更新展示最近更新到網(wǎng)站的文章列表。（5）聯(lián)系我們簡要介紹雜志社。2.1.2 管理后臺(tái)需求分析（1）后臺(tái)包括內(nèi)容、結(jié)構(gòu)、外觀、人員、模塊、配置等，后臺(tái)頁面均需登錄、且有權(quán)限控制。（2）內(nèi)容：點(diǎn)擊進(jìn)入整個(gè)網(wǎng)站的全部內(nèi)容列表，列表中包含編輯、刪除按鈕，可以新增內(nèi)容。列表頁有權(quán)限控制。（3）結(jié)構(gòu)：點(diǎn)擊彈層，顯示管理內(nèi)容類型，分類，區(qū)塊，菜單，點(diǎn)擊分別進(jìn)入詳情頁，可進(jìn)行增、刪、改、查操作。（4）外觀：點(diǎn)擊后進(jìn)入主題列表頁，可在列表頁切換主題，點(diǎn)擊設(shè)置按鈕可以進(jìn)入主題設(shè)置頁面，對站點(diǎn)外觀進(jìn)行自定義設(shè)置。（5）人員：點(diǎn)擊進(jìn)入人員列表頁，可以對系統(tǒng)注冊人員（即后臺(tái)管理人員）進(jìn)行增、刪、改、查的操作，同時(shí)也可在這里對人員進(jìn)行禁用（邏輯刪除）。（6）模塊：點(diǎn)擊進(jìn)入模塊列表頁，點(diǎn)擊權(quán)限按鈕可以設(shè)置每個(gè)用戶登錄后查看模塊的權(quán)限，點(diǎn)擊配置按鈕可以修改模塊的顯示位置及顯示頁面。（7）配置：點(diǎn)擊進(jìn)入配置列表頁，列表頁包含可選配置項(xiàng)。如文本格式、文件系統(tǒng)，點(diǎn)擊分別進(jìn)入設(shè)置頁面，在設(shè)置頁面可以對系統(tǒng)的基本配置進(jìn)行修改。2.2 可行性分析在系統(tǒng)開發(fā)前，為降低資源和時(shí)間的浪費(fèi)和損失，從以下幾點(diǎn)對本次畢業(yè)設(shè)計(jì)做了可行性分析3。2.2.1 技術(shù)的可行性本次系統(tǒng)開發(fā)，技術(shù)重點(diǎn)為php，技術(shù)難點(diǎn)為Drupal框架的使用。Php難度不大，但Drupal初次接觸，難度稍大。為解決技術(shù)難點(diǎn)，參與了Drupal重慶分享會(huì)，也通過老師、同事獲取了更多的資料，并做了初步的使用實(shí)驗(yàn)，基本掌握本次系統(tǒng)所需相關(guān)知識(shí)，所以，技術(shù)上可行。2.2.2 經(jīng)濟(jì)的可行性Drupal框架是開源的，開發(fā)中部分軟件由實(shí)習(xí)公司免費(fèi)提供。部分學(xué)習(xí)資料自費(fèi)購買，但價(jià)格均在能力范圍內(nèi)，所以，經(jīng)濟(jì)上可行。2.2.3 時(shí)間的可行性此次畢業(yè)設(shè)計(jì)從2016年1月開始準(zhǔn)備資料和學(xué)習(xí)，并且已擬定相關(guān)時(shí)間安排表（見開題報(bào)告），所以，時(shí)間上可行。3 系統(tǒng)整體設(shè)計(jì)3.1 系統(tǒng)流程設(shè)計(jì)（1）前臺(tái)用戶無需登錄即可查看前臺(tái)頁面內(nèi)容，前臺(tái)頁面無權(quán)限控制。（2）進(jìn)入首頁后可以通過點(diǎn)擊首頁readmore打開文章（詳情頁），可以通過導(dǎo)航欄進(jìn)入文章題目列表（列表頁），點(diǎn)擊列表可以打開文章。（3）后臺(tái)管理員登錄成功后進(jìn)入后臺(tái)首頁，通過導(dǎo)航欄進(jìn)入文章題目列表。（4）用戶只能從后臺(tái)注冊，前臺(tái)沒有注冊界面。（5）后臺(tái)管理員可對人員、外觀、模塊、內(nèi)容等進(jìn)行管理，安裝Drupal時(shí)注冊的用戶具有超級(jí)權(quán)限，可以開發(fā)模塊4。如圖3-1是對系統(tǒng)功能進(jìn)行簡要說明。圖3-1 系統(tǒng)功能流圖登錄成功登錄失敗區(qū)塊模板登錄管理員用戶表后臺(tái)首頁語言表節(jié)點(diǎn)表節(jié)點(diǎn)模塊配置模塊人員用戶結(jié)構(gòu)節(jié)點(diǎn)模板外觀系統(tǒng)內(nèi)容節(jié)點(diǎn)表區(qū)塊模板菜單模塊節(jié)點(diǎn)詳情節(jié)點(diǎn)模板菜單模塊 數(shù)據(jù)庫節(jié)點(diǎn)表用戶首頁最近更新關(guān)于我們節(jié)點(diǎn)模板列表頁詳情頁導(dǎo)航導(dǎo)航3.2 數(shù)據(jù)庫的分析與設(shè)計(jì)3.2.1 數(shù)據(jù)庫的概念結(jié)構(gòu)設(shè)計(jì)數(shù)據(jù)庫的概念結(jié)構(gòu)設(shè)計(jì)采用實(shí)體聯(lián)系的模型設(shè)計(jì)方法。E-R模型法的組成元素有：實(shí)體、屬性、聯(lián)系，E-R模型用E-R圖表示，是提示用戶工作環(huán)境中所涉及的事物；屬性是對實(shí)體特性的描述。(1)實(shí)體(3)實(shí)體間關(guān)系(2)屬性圖3-2 圖標(biāo)示例圖（1）內(nèi)容實(shí)體E-R圖示例圖3-3 內(nèi)容E-R圖創(chuàng)建者 正文 權(quán)重內(nèi)容類型內(nèi)容 狀態(tài) 標(biāo)題創(chuàng)建日期所屬菜單菜單鏈接（2）用戶實(shí)體E-R圖示例用戶名 密碼 郵箱 角色 狀態(tài) 語言用戶圖3-4 用戶E-R圖（3）菜單實(shí)體E-R圖示例標(biāo)題 權(quán)重 所屬模塊鏈接路徑子鏈接父菜單菜單圖3-5 菜單E-R圖（4）內(nèi)容類型實(shí)體E-R圖示例圖3-6 內(nèi)容類型E-R圖 版本 語言內(nèi)容類型 狀態(tài) 標(biāo)題修改時(shí)間創(chuàng)建日期權(quán)限用戶（5）區(qū)塊實(shí)體E-R圖示例圖3-7 區(qū)塊E-R圖 標(biāo)題顯示頁面 權(quán)重 狀態(tài)緩存模式啟用主題所屬模塊區(qū)塊（6）外觀實(shí)體E-R圖示例圖3-8 外觀E-R圖 站點(diǎn)圖標(biāo) 主題站點(diǎn)名稱外觀（7）總體E-R圖圖3-9 總體E-R圖圖n內(nèi)容類型用戶區(qū)塊內(nèi)容創(chuàng)建屬于創(chuàng)建組成111n創(chuàng)建11nnn3.2.2 邏輯設(shè)計(jì)表3.1 系統(tǒng)數(shù)據(jù)庫表列表序號(hào)表文件名表名稱說明1node節(jié)點(diǎn)模塊表存儲(chǔ)節(jié)點(diǎn)節(jié)點(diǎn)基本信息2node_type節(jié)點(diǎn)版本表存儲(chǔ)了一個(gè)節(jié)點(diǎn)的類型信息3users用戶信息表存儲(chǔ)用戶數(shù)據(jù)4system系統(tǒng)信息表儲(chǔ)存系統(tǒng)信息5language語言信息表存儲(chǔ)系統(tǒng)中所有可用語言表6block區(qū)塊信息表存儲(chǔ)區(qū)塊設(shè)置、如區(qū)塊可見性，位置等7block_node_type區(qū)塊類型表儲(chǔ)存區(qū)塊類型信息8field_data_body內(nèi)容主體表存儲(chǔ)內(nèi)容主體信息9menu_links菜單鏈接表存儲(chǔ)菜單內(nèi)的單個(gè)鏈接10cache通用緩存表存儲(chǔ)緩存信息，包含第三方模塊的緩存信息表3.2 節(jié)點(diǎn)模塊表序號(hào)字段名類型長度默認(rèn)值主鍵外鍵允許為空說明1nidint10是節(jié)點(diǎn)id2vidint10用戶名3uidint11是權(quán)限用戶4languagevarchar12是語言5titlevarchar255標(biāo)題6createdint11創(chuàng)建時(shí)間戳7changedint11上次修改時(shí)間8promoteint11推薦到頁首9statusint11狀態(tài)10stickyint11是否置頂11tnidint10是節(jié)點(diǎn)類型id12translateint11是否翻譯備注：（1）uid：擁有權(quán)限的用戶id。 （2）sticky：0 不置頂，1 置頂。 （3）promote：0 不推薦，1 推薦。 （4）status：0 不啟用，1 啟用。 （5）translate：0 不翻譯，1 翻譯。表3.3 節(jié)點(diǎn)類型表序號(hào)字段名類型長度默認(rèn)值主鍵外鍵允許為空說明1typeint10是類型id2nameint10類型名3descriptionmediumtext描述4createdint11創(chuàng)建時(shí)間戳表3.4 用戶信息表序號(hào)字段名類型長度默認(rèn)值主鍵外鍵允許為空說明1uidint10是用戶id2namevarchar50用戶名3passvarchar32用戶密碼4mailchar64用戶郵箱5languagevarchar12默認(rèn)語言6themevarchar255是默認(rèn)主題7statustinyint40狀態(tài)8picturevarchar255頭像路徑9loginint11上次登錄時(shí)間戳表3.5 系統(tǒng)信息表序號(hào)字段名類型長度默認(rèn)值主鍵外鍵允許為空說明1filenameint10是項(xiàng)目路徑2namevarchar50項(xiàng)目名3typevarchar255類型（如module）4ownervarchar255父級(jí)5statusint110狀態(tài)6weightint110權(quán)重7bootstrapint110是否加載bootstrap備注：（1）Filename：項(xiàng)目相對drupal的相對路徑。 （2）name：項(xiàng)目的名稱，如：node。 （3）satus：0 不啟用；1 啟用。 （4）bootstrap：0 不加載bootstrap模塊，1 加載bootstrap模塊。表3.6 語言信息表序號(hào)字段名類型長度默認(rèn)值主鍵外鍵允許為空說明1languagevarchar12是機(jī)讀碼2namevarchar64語言名3directionint110讀寫方向4enabledint11是否啟用5weightint640權(quán)重6javascriptvarchar32Js翻譯文件位置備注：（1）direction：0 從左向右；1從右向左。 （2）enabled：0 不啟用；1 啟用。表3.7 區(qū)塊信息表序號(hào)字段名類型長度默認(rèn)值主鍵外鍵允許為空說明1bidint11是區(qū)塊id2modulevarchar64用戶名3themevarchar64是主題4visibilitytinyint4顯示方法5titlevarchar225區(qū)塊標(biāo)題6cachetinyint41緩存機(jī)制7statustinyint40狀態(tài)8weightint110權(quán)重備注：（1）visibility：0 除所列頁面外所有頁面，1 所列頁面顯示，2通過代碼控制 （2）cache：-1 不緩存，1 基于角色緩存，8 全局緩存區(qū)塊 （3）status：0 不啟用，1 啟用。表3.8 區(qū)塊類型表序號(hào)字段名類型長度默認(rèn)值主鍵外鍵允許為空說明1midvarchar64是區(qū)塊id2modulevarchar32區(qū)塊名3typevarchar32區(qū)塊類型表3.9 內(nèi)容主體表序號(hào)字段名類型長度默認(rèn)值主鍵外鍵允許為空說明1bundlevarchar128內(nèi)容類型2deletedtingyint40是否刪除3entity_idvarchar10是節(jié)點(diǎn)id4languagevarchar32是語言5body_valuelongtext0主體內(nèi)容6body_formatvarchar255主體編碼備注：（1）language：主體內(nèi)容使用語言。 （2）body_format：文本編碼格式（html/text）。 （3）deleted：0 不刪除，1 刪除（邏輯刪除）。表3.10 菜單鏈接表序號(hào)字段名類型長度默認(rèn)值主鍵外鍵允許為空說明1mlidint10是菜單鏈接id2menu_namevarchar50菜單名3plidvarchar100父級(jí)鏈接id4link_titlevarchar255鏈接標(biāo)題5modulevarchar255是模板6weightvarchar11權(quán)重備注：（1）plid：父級(jí)鏈接id。表3.11 緩存信息表序號(hào)字段名類型長度默認(rèn)值主鍵外鍵允許為空說明1cidint10是主鍵id2datavarchar255緩存數(shù)據(jù)3expireint11時(shí)效4createdint11創(chuàng)建時(shí)間戳備注：（1）expire：時(shí)間戳格式，用于表示緩存時(shí)效，0表示永不過期。 （2）body_format：文本編碼格式（html/text）。3.2.3多表聯(lián)結(jié)關(guān)系圖圖3-10 多表關(guān)聯(lián)圖4 系統(tǒng)實(shí)現(xiàn)4.1 數(shù)據(jù)渲染流程當(dāng)在瀏覽器輸入url后drupal就會(huì)調(diào)用index.php。但當(dāng)打開index.php后會(huì)發(fā)現(xiàn)其中只有如下幾行代碼5：define(DRUPAL_ROOT, getcwd();require_once DRUPAL_ROOT . /includes/bootstrap.inc;/加載include文件夾中的函數(shù)等drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);menu_execute_active_handler();看完代碼發(fā)現(xiàn)，drupal強(qiáng)大的功能就是基于以上四行代碼的，對index.php做一個(gè)代碼跟蹤后發(fā)現(xiàn)其渲染流程如下：（1）加載index.php，在此文件中調(diào)用drupal_bootstrap();以及menu_execute_active_handler();（2）drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL)函數(shù)：從 bootstrap.inc中可以找到 DRUPAL_BOOTSTRAP_FULL的值為7，對drupal_bootstrap($phase)函數(shù)進(jìn)行分析可得此處就是循環(huán)調(diào)用_drupal_bootstrap7次。什么意思呢？其實(shí)就是執(zhí)行以下函數(shù)： _drupal_bootstrap_configuration();/初始化配置 _drupal_bootstrap_page_cache();/試圖緩存頁面 _drupal_bootstrap_database(); /初始化數(shù)據(jù)庫層 _drupal_bootstrap_page_header();/設(shè)置頁眉 drupal_session_initialize();/初始化session _drupal_language_initialize();/初始化頁面語言 _drupal_bootstrap_full();/完全加載Drupal。驗(yàn)證和修正輸入數(shù)據(jù)綜上，drupal_bootstrap其實(shí)就是用來加載所有的系統(tǒng)必須包含的文件和模塊文件，并且運(yùn)行模塊函數(shù) hook_init.這就使得我們可以自由調(diào)用模塊6。menu_execute_active_handler（）：它的作用就是通過url,來調(diào)用數(shù)據(jù)庫中的相關(guān)函數(shù)，并且把頁面相關(guān)的inc文件加載進(jìn)來。此文件中的menu_get_item（）函數(shù)用來接收q的值,然后解析出對應(yīng)的模塊,并調(diào)用相關(guān)函數(shù)，加載頁面。4.2 功能模塊開發(fā)實(shí)例在drupal系統(tǒng)中，頁面是由多個(gè)模塊組合而成。Drupal強(qiáng)大的定制功能，使得開發(fā)者可以自由開發(fā)模塊，以滿足當(dāng)前業(yè)務(wù)需求7。以下，以實(shí)現(xiàn)最近更新列表頁為模板，對開發(fā)區(qū)塊過程做示例展示。（1） 創(chuàng)建模塊目錄和文件，如圖4-1所示：圖4-1 目錄圖（2） 編寫模塊描述文件如圖4-2所示：圖4-2 描述文件圖（3） 編寫第一個(gè)鉤子如圖4-3所示：圖4-3 幫助鉤子圖（4） 聲明區(qū)塊如圖4-4所示：圖4-4 區(qū)塊聲明圖（5）從數(shù)據(jù)庫獲取數(shù)據(jù)如圖4-5所示：圖4-5 獲取數(shù)據(jù)圖（6）數(shù)據(jù)渲染如圖4-6，4-7所示：圖4-6 數(shù)據(jù)渲染圖1圖4-7 數(shù)據(jù)渲染圖2 （7） 測試、調(diào)試如圖4-8所示：圖4-8 測試使用圖（8） 運(yùn)用至頁面，如圖4-9所示：圖4-9 頁面使用圖4.3 系統(tǒng)測試、調(diào)試前臺(tái)頁面,測試閱讀更多，列表頁、詳情頁的相關(guān)跳轉(zhuǎn)及樣式；對于后臺(tái)，重點(diǎn)測試登錄、區(qū)塊設(shè)置，站點(diǎn)信息更改等功能。對于頁面數(shù)據(jù)問題用t(“variable”)進(jìn)行調(diào)試，對于頁面樣式的調(diào)試則修改對應(yīng)的頁面css文件，對于一些特殊的元素則在*.tpl.php中修改對應(yīng)的樣式即可8。5 系統(tǒng)部分頁面展示圖5-2 “樂活”前臺(tái)列表頁圖5-1 前臺(tái)首頁圖圖5-4 后臺(tái)首頁圖圖5-3 “樂活”后臺(tái)列表頁圖5-6 后臺(tái)內(nèi)容管理頁圖5-5