世紀(jì)學(xué)院網(wǎng)站設(shè)計(jì)

靳亞東 鮑震杰 劉月 胡菁蕓

摘要：隨著科學(xué)技術(shù)的發(fā)展，網(wǎng)絡(luò)和人們的生活關(guān)系越來越密切，學(xué)校網(wǎng)站也成為學(xué)校與外界資源共享的平臺。世紀(jì)學(xué)院網(wǎng)站利用PHP語言、PHPstudy開發(fā)環(huán)境、dreamwear、Apache服務(wù)器和Mysql數(shù)據(jù)庫設(shè)計(jì)了網(wǎng)站的學(xué)院概況、學(xué)院專業(yè)、教育教學(xué)、師資隊(duì)伍等多個(gè)功能板塊。用戶可以瀏覽網(wǎng)站并留言;管理者可以登錄到后臺修改賬號密碼、網(wǎng)站內(nèi)容等。該系統(tǒng)界面友好、操作簡單、可以作為學(xué)院發(fā)布信息、對外宣傳、合作交流的窗口。

關(guān)鍵詞：PHP;dreamwear;Apache;數(shù)據(jù)庫;Mysql

中圖分類號：G642 ? ? ? ?文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2021）35-0150-03

1 引言

隨著計(jì)算機(jī)的普及和當(dāng)前網(wǎng)絡(luò)技術(shù)的不斷發(fā)展，網(wǎng)絡(luò)已經(jīng)漸漸融入人們的生活，尤其是國內(nèi)外教育方面，中國對高校的信息化做了比較深入的調(diào)研。近年來校園網(wǎng)站的建設(shè)發(fā)展迅速，它作為與外界的溝通平臺，能使人們隨時(shí)隨地地了解校園資訊和院系的動(dòng)態(tài)，院系也可以在網(wǎng)站上發(fā)布最新的教學(xué)信息以供外界和師生查看。目前，較多數(shù)的校園網(wǎng)站是用ASP代碼進(jìn)行編寫的，當(dāng)訪問數(shù)據(jù)庫時(shí)，運(yùn)行代碼用的是其他的COM對象，這些COM對象的使用降低了代碼的運(yùn)行速度。PHP有自己的內(nèi)存空間，不像ASP一樣面對的是COM對象，所以PHP（Personal Home Page）運(yùn)行代碼速度快。PHP和ASP都適用于中型網(wǎng)站的開發(fā)，但是相對于ASP來說PHP做動(dòng)態(tài)網(wǎng)站比較經(jīng)濟(jì)實(shí)惠。

2 系統(tǒng)設(shè)計(jì)綜述

2.1 系統(tǒng)設(shè)計(jì)目標(biāo)

系統(tǒng)設(shè)計(jì)的目標(biāo)。（1）為學(xué)校的教育發(fā)展、校園推廣等資源實(shí)現(xiàn)共享和信息交流提供場所，（2）方便管理者管理網(wǎng)站。具體有以下四個(gè)方面：

（1）保證網(wǎng)站界面要簡單、美觀。（2）訪問者可以正常地瀏覽各個(gè)模塊，例如：學(xué)院概況模塊、學(xué)院專業(yè)模塊、在線反饋留言模塊等，這里留言模塊要有更多的功能實(shí)現(xiàn)，以方便訪問者之間可以有更好的交流;（3）管理者可以從網(wǎng)站中登錄到后臺進(jìn)行網(wǎng)站內(nèi)容的修改;（4）系統(tǒng)之間的架構(gòu)和數(shù)據(jù)庫的設(shè)計(jì)便于以后的維護(hù)和更新。

2.2 網(wǎng)站開發(fā)工具簡介

網(wǎng)站開發(fā)工具包括PHP語言、dreamwear、Mysql數(shù)據(jù)庫。

PHP結(jié)合了很多開發(fā)語言的優(yōu)點(diǎn)，所以PHP成為目前社會(huì)比較流行的開發(fā)語言。PHP將HTML代碼和PHP指令組合成一個(gè)完整的服務(wù)器端動(dòng)態(tài)頁面，它比HTML標(biāo)記的CGI更有效[1]。PHP使代碼運(yùn)行得更快。在開發(fā)PHP時(shí)，通常與web服務(wù)器和Mysql數(shù)據(jù)庫相匹配。PHP的容易操作使它成為剛接觸網(wǎng)頁設(shè)計(jì)人群的首選語言。它幾乎兼容所有的服務(wù)器，支持很多數(shù)據(jù)庫，它的學(xué)習(xí)資料可以從官方網(wǎng)站上下載后自學(xué)， PHP注釋語言對程序不起任何作用，是一種解釋性語言[2]。

Dreamwear是一種專業(yè)的HTML編輯器，它是用于站點(diǎn)、應(yīng)用程序而設(shè)定、編碼、開發(fā)的一種軟件。它既可以在可視化的編程環(huán)境中展開頁面的制作工作，也可以通過自身提供的HTML代碼編輯器手動(dòng)編寫HTML代碼。在編輯過程中提供了兩種視圖，分別是代碼視圖和設(shè)計(jì)視圖，編輯者可以一邊編寫代碼一邊查看網(wǎng)頁，這種新功能方便網(wǎng)頁設(shè)計(jì)者在編碼之后查看顯示內(nèi)容[3]。

Mysql，是動(dòng)態(tài)網(wǎng)站數(shù)據(jù)的一個(gè)處理者，在國內(nèi)外被廣泛開發(fā)利用。Mysql由于處理數(shù)據(jù)速度快、運(yùn)營費(fèi)用低等優(yōu)勢，成為企業(yè)首選的數(shù)據(jù)庫[4]。Mysql幾乎可以支持所有的操作系統(tǒng)，它其中的SQL語言是最流行的數(shù)據(jù)庫查詢語言，能使信息的儲存和更新更加容易。

2.3 開發(fā)環(huán)境選擇

網(wǎng)站采用的瀏覽服務(wù)器環(huán)境是wamp環(huán)境，包括Windows、Apache、Mysql、PHP。Windows是一個(gè)服務(wù)器操作系統(tǒng)，Apache是一個(gè)web服務(wù)器系統(tǒng)，Mysql是數(shù)據(jù)庫管理系統(tǒng)。Web服務(wù)器的作用是存儲文件、接收瀏覽器訪問請求、向?yàn)g覽器發(fā)送頁面內(nèi)容和下載文件。數(shù)據(jù)庫管理系統(tǒng)的作用是存儲管理數(shù)據(jù)、提供完整的結(jié)構(gòu)化查詢語言體系、根據(jù)程序解釋器的指令進(jìn)行數(shù)據(jù)的修改操作[5]。瀏覽器的作用是顯示由服務(wù)器端提供的文本內(nèi)容、解釋HTML、解釋CSS運(yùn)行、解釋JS腳本語言和展示圖片。

網(wǎng)站中的代碼編輯軟件是dreamwear，它需要在Phpstudy的開發(fā)環(huán)境下執(zhí)行代碼。首先，dreamwear中，“site”的意思是站點(diǎn)。dreamwear站點(diǎn)組織所有與網(wǎng)站相關(guān)的文檔，管理文件，共享文件，并將站點(diǎn)文件傳輸?shù)絎eb服務(wù)器[6]。其次，需要在網(wǎng)站上下載Phpstudy軟件安裝配置，引導(dǎo)程序自動(dòng)進(jìn)入到PHP開發(fā)環(huán)境。要訪問數(shù)據(jù)庫，需要在瀏覽器地址欄中輸入本地phpmyadmin，數(shù)據(jù)庫的初始用戶和密碼都是root，可以在connect.PHP文件中修改。

3系統(tǒng)設(shè)計(jì)

3.1系統(tǒng)框架設(shè)計(jì)

（1） 學(xué)院首頁：可以返回本網(wǎng)站的主頁。

（2） 學(xué)院概況：該模塊包含世紀(jì)學(xué)院的學(xué)院簡介、學(xué)院領(lǐng)導(dǎo)、通知公告、新聞資訊。

（3） 學(xué)院專業(yè)：該模塊包含數(shù)字媒體技術(shù)、數(shù)字媒體藝術(shù)、傳播學(xué)等專業(yè)介紹。

（4） 教育教學(xué)：學(xué)院的科學(xué)項(xiàng)目、實(shí)踐教學(xué)、科研課題。

（5） 師資隊(duì)伍：包含教學(xué)項(xiàng)目、師資概括和教學(xué)團(tuán)隊(duì)。

（6） 創(chuàng)意天地：此模塊包含有參賽作品、畢業(yè)設(shè)計(jì)和實(shí)踐作品。

（7） 學(xué)院風(fēng)采：此模塊中包含活動(dòng)風(fēng)采和組織結(jié)構(gòu)，主要展示學(xué)院學(xué)生參加的一些社會(huì)和校園活動(dòng)。

（8） 交流天地：可以瀏覽院系老師和同學(xué)的交流圖片。

（9） 在線反饋留言：訪問者可以在這個(gè)模塊中留下寶貴的意見。

（11） 管理登錄：管理者可以通過賬號密碼進(jìn)入后臺管理操作。

本系統(tǒng)框架圖如圖1所示。

3.2數(shù)據(jù)庫設(shè)計(jì)

3.2.1數(shù)據(jù)庫的操作流程

Web數(shù)據(jù)庫體系結(jié)構(gòu)圖如圖2所示。

Web數(shù)據(jù)庫查詢數(shù)據(jù)的基本步驟如下：

首先：建立適當(dāng)?shù)臄?shù)據(jù)庫鏈接;

第二：查詢數(shù)據(jù)庫;

第三：獲取查詢結(jié)構(gòu);

第四：將結(jié)果顯示給用戶并關(guān)閉數(shù)據(jù)庫。

3.2.2 數(shù)據(jù)表單的建立

首先需要登錄localhost/phpmyadmin地址，之后Mysql服務(wù)器里面建立一個(gè)數(shù)據(jù)庫，創(chuàng)建表單。登錄的賬號密碼可以在connec.php目錄下或Mysql服務(wù)器里面進(jìn)行修改，但是數(shù)據(jù)庫是創(chuàng)建者建立的他人沒有辦法進(jìn)入，而且數(shù)據(jù)庫建立之后名稱沒有辦法改變。數(shù)據(jù)庫中有三個(gè)表單，分別是登錄賬號密碼表單、留言表單和網(wǎng)頁內(nèi)容表單。id的作用是向頁面?zhèn)鬟f參數(shù)。留言表單中包括數(shù)據(jù)類型約束函數(shù)tinyint（）、varchar（）可變長度的數(shù)據(jù)類型和顯示留言時(shí)間的timestamp（）。內(nèi)容修改表單中class表示的是菜單。三個(gè)表單如表1、表2和表3所示。

4系統(tǒng)實(shí)現(xiàn)

4.1前臺設(shè)計(jì)

首頁設(shè)計(jì)是用dreamwear軟件進(jìn)行編寫多個(gè)靜態(tài)的網(wǎng)頁，然后用超鏈接把這些網(wǎng)頁鏈接起來，其中最重要的部分是網(wǎng)頁布局。靜態(tài)網(wǎng)頁的布局影響到網(wǎng)站的整體顯示效果，所以布局中把首頁分成了六個(gè)部分，包括導(dǎo)航欄、學(xué)院圖片展示、學(xué)院簡介、在線反饋留言、學(xué)院風(fēng)采、版權(quán)。

主頁面主要采用div+CSS樣式進(jìn)行結(jié)構(gòu)設(shè)計(jì)，網(wǎng)站所有的盒子和CSS樣式都放在admin.css文件中，需要的時(shí)候直接調(diào)用此文件。網(wǎng)站利用PHP語言實(shí)現(xiàn)對數(shù)據(jù)庫的訪問，使用JS語言來實(shí)現(xiàn)圖滾動(dòng)的功能。主頁面圖如圖3所示。

4.2后臺設(shè)計(jì)

后臺管理操作主要分為三個(gè)部分，對應(yīng)上面講過的三個(gè)表單內(nèi)容，分別包括登錄賬號密碼表單、留言表單、網(wǎng)頁內(nèi)容表單。

4.2.1后臺管理登錄

后臺管理登錄管理器可以登錄后臺網(wǎng)站修改網(wǎng)站內(nèi)容。后臺管理登錄界面如圖4所示。

后臺管理登錄的實(shí)現(xiàn)步驟如下：

首先，先寫出登錄后臺的靜態(tài)主頁面，其中主要是表單的應(yīng)用<td>、<tr>。之后把登錄賬號密碼存放進(jìn)session中，放到模板頁面，然后編寫登錄的后臺操作，鏈接到數(shù)據(jù)庫的代碼如下：$con=mysq_connectl（“l(fā)o

calhost””root”，”root”）。

第二，從數(shù)據(jù)庫中提取用戶名密碼：$username=$-request[“username”];$password=$-request[“Passward”]。再用判斷語句if來判斷輸入的賬號密碼是否與數(shù)據(jù)庫中的相對應(yīng)，數(shù)據(jù)對應(yīng)正確則進(jìn)入后臺管理頁面admin.php，并賦予用戶一個(gè)session變量，錯(cuò)誤則顯示失敗。

第三，登錄賬號密碼的修改可以在后臺進(jìn)行操作，也可以在數(shù)據(jù)庫后臺登錄表單中進(jìn)行修改。

4.2.2在線留言反饋

用戶可在此模塊中留下消息，管理員可以瀏覽和刪除訪問者的信息。在線反饋留言界面如圖5所示。該模塊功能實(shí)現(xiàn)步驟如下：

第一步，做出靜態(tài)留言表，這里主要用到表單<table>，<tr>，<td>。留言管理主要用到數(shù)據(jù)類型約束函數(shù)、可變長度的數(shù)據(jù)類型和顯示留言時(shí)間，之后把留言的作者、標(biāo)題、內(nèi)容等存入到建立好的數(shù)據(jù)表單中就可以在網(wǎng)頁上顯示出來。動(dòng)態(tài)部分主要用到三個(gè)PHP文件，它們分別是：（1）connect.php：鏈接數(shù)據(jù)庫;（2）addmsg.php：從頁面讀取留言相關(guān)內(nèi)容，之后把它存放在頁面上;（3）addmsg.PHP：從數(shù)據(jù)庫中讀取信息，PHP連接到Mysql數(shù)據(jù)庫。Mysql_connect（“l(fā)ocalhost”，”root”，”root”）參數(shù)分別代表Mysql地址、用戶名、密碼，然后需要鏈接到數(shù)據(jù)庫中的對應(yīng)表單：MySql_select_db（表單，$conn）。參數(shù)表示：第一個(gè)是數(shù)據(jù)庫名稱，第二個(gè)是鏈接標(biāo)識，可以將返回值放在系統(tǒng)數(shù)據(jù)庫，返回值false指示連鏈接失敗，true表示鏈接成功。主要代碼是Mysql_qery（connection），其中query表示希望Mysql執(zhí)行的語句，connection表示可選內(nèi)容，其中MySQL_query（）只返回用于選擇、顯示、解釋或描述語句的資源標(biāo)識符。

5總結(jié)

系統(tǒng)采用B/S結(jié)構(gòu)，基于PHP模板的網(wǎng)站設(shè)計(jì)，它是高效、經(jīng)濟(jì)的處理方式。

網(wǎng)站的創(chuàng)立是在PHPstudy開發(fā)環(huán)境下用dreamweaver軟件進(jìn)行編寫。網(wǎng)站的設(shè)計(jì)分為兩大部分，一部分是靜態(tài)網(wǎng)頁之間的鏈接，結(jié)合div+css進(jìn)行頁面的展示。另一部分是將網(wǎng)頁鏈接到數(shù)據(jù)庫，這里數(shù)據(jù)庫采用Mysql，在鏈接到數(shù)據(jù)庫的時(shí)候需要把網(wǎng)站的內(nèi)容保存到數(shù)據(jù)庫中，然后再把表單中的內(nèi)容放在結(jié)果集中，最后把結(jié)果集里面的內(nèi)容用其他變量保存，以方便后面的使用。該系統(tǒng)界面友好、操作簡單，可以作為學(xué)院發(fā)布信息、對外宣傳、合作交流的窗口。

參考文獻(xiàn)：

[1] 唐四薪.PHP動(dòng)態(tài)網(wǎng)站開發(fā)[M].北京：清華大學(xué)出版社，2014：1-10.

[2] 郭澤民. 動(dòng)態(tài)網(wǎng)頁技術(shù)PHP、ASP與JSP的比較分析[J]. 煤炭技術(shù)， 2007， 35（47）：29-31.

[3] 胡崧. HTML從入門到精通[M]. 北京：中國青年出版社， 2007：25-38.

[4] 楊凱. 基于MySQL數(shù)據(jù)庫結(jié)構(gòu)設(shè)計(jì)[J].科技展望， 2015， 25（36）：105-107.

[5] Michael kofler.MySQL權(quán)威指南[M].北京：人民郵電出版社， 2006：85-90.

[6] 黃斯偉.HTML完全使用詳解[M].北京：人民郵電出版社， 2006：59-61.

【通聯(lián)編輯：王力】