汪桂珍

摘 要：針對江蘇宿遷中等專業(yè)學(xué)校學(xué)生學(xué)習(xí)C語言存在教學(xué)資源、網(wǎng)絡(luò)學(xué)習(xí)資源整合需求，為學(xué)生提供課余C語言學(xué)習(xí)與交流平臺(tái)，提出開發(fā)基于Apache+PHP+MySQL框架的C語言在線學(xué)習(xí)系統(tǒng)。根據(jù)教師和學(xué)生需求介紹了該系統(tǒng)模塊設(shè)計(jì)與數(shù)據(jù)庫設(shè)計(jì)，并著重闡述了該系統(tǒng)實(shí)現(xiàn)的幾個(gè)關(guān)鍵技術(shù)。開發(fā)和運(yùn)行實(shí)踐結(jié)果表明，這些技術(shù)在WEB開發(fā)中具有一定的通用性，簡單而又實(shí)用，具有實(shí)踐意義。

關(guān)鍵詞：Apache PHP MySQL B/S 在線學(xué)習(xí)系統(tǒng)

中圖分類號：TP31 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號：1672-3791（2016）05（c）-0001-05

Abstract： For students in our school learning C language network teaching resources， learning needs to integrate resources， in order to provide after-school C language learning and communication platform， put forward development based on Apache +PHP+MySQL framework C language online learning system. According to the requirements of teachers and students， the system module design and database design are introduced， and some key technologies of the system are discussed emphatically. Development and operation of the results show that these technologies in the development of WEB has a certain universal， simple and practical， with practical significance.

Key Words： Apache； PHP； MySQL； B/S； Online learning system

對于中職生而言，C語言是一門令他們懼怕的課程，從該校歷年C語言的教學(xué)效果來看，每個(gè)班只有寥寥數(shù)人能將C語言學(xué)好。課堂學(xué)習(xí)是C語言學(xué)習(xí)的重要陣地，而課后的學(xué)習(xí)拓展也不可或缺。學(xué)生在課后鞏固知識(shí)、疑難解惑，必須要有學(xué)習(xí)資源，光教材是遠(yuǎn)遠(yuǎn)不夠的，而網(wǎng)絡(luò)上的眾多學(xué)習(xí)資源并不適用于中職學(xué)生，也不能與教學(xué)進(jìn)度相適應(yīng)。

為了豐富學(xué)生C語言知識(shí)的課余閱讀，并將課余閱讀與課堂內(nèi)容緊密結(jié)合，既能使學(xué)生鞏固課堂內(nèi)容，又能激發(fā)學(xué)生的C語言學(xué)習(xí)興趣，設(shè)計(jì)開發(fā)以該校C語言教學(xué)為背景的C語言在線學(xué)習(xí)系統(tǒng)，該系統(tǒng)以Apache、PHP、MySQL為框架進(jìn)行設(shè)計(jì)和開發(fā)。

1 系統(tǒng)體系結(jié)構(gòu)與開發(fā)環(huán)境

1.1 系統(tǒng)體系結(jié)構(gòu)

系統(tǒng)采用流行的B/S結(jié)構(gòu)，B/S結(jié)構(gòu)具有分布性特點(diǎn)，通過URL地址，客戶就可以進(jìn)行瀏覽，只要有瀏覽器即可；功能擴(kuò)展簡單方便，增加網(wǎng)頁就可以增加系統(tǒng)功能；B/S結(jié)構(gòu)已成為網(wǎng)絡(luò)軟件開發(fā)普遍使用的基本架構(gòu)[1]。

系統(tǒng)中的Apache Web服務(wù)器、PHP應(yīng)用服務(wù)器、MySQL數(shù)據(jù)庫安裝在同一臺(tái)計(jì)算機(jī)上。圖1為該系統(tǒng)體系結(jié)構(gòu)圖。

當(dāng)然，如果用戶訪問的頁面沒有PHP代碼，web服務(wù)器直接將頁面展現(xiàn)在客戶的瀏覽器中。

1.2 開發(fā)環(huán)境

系統(tǒng)使用HTML5+CSS3構(gòu)建前端網(wǎng)頁，前端腳本使用JavaScript，使用Apache為WEB服務(wù)器，服務(wù)端使用PHP編程，數(shù)據(jù)庫使用MySQL。

開發(fā)平臺(tái)操作系統(tǒng)為Win10，開發(fā)工具為：AppServ 8、Dreamweaver CS6，AppServ 8.集成了Apache Web服務(wù)器，PHP 5、PHP 7應(yīng)用程序服務(wù)器，數(shù)據(jù)庫為MySQL5，系統(tǒng)使用的開發(fā)技術(shù)為HTML5、CSS3、PHP、AJAX、JavaScript，客戶端瀏覽器為Internet Exporer 8或更高版本。

2 模塊設(shè)計(jì)

系統(tǒng)實(shí)現(xiàn)的主要功能為學(xué)生的注冊、登錄，瀏覽文章，并在瀏覽文章下方留言，提出疑問；教師注冊，進(jìn)入教師后臺(tái)，在后臺(tái)添加（上傳）文章、修改文章和刪除文章；管理員通過特定的頁面進(jìn)入后臺(tái)，可以審核教師賬號，添加其他網(wǎng)站優(yōu)秀的文章供學(xué)生閱讀，擴(kuò)大視野。

根據(jù)系統(tǒng)需求分析，系統(tǒng)分為若干模塊開發(fā)：主頁頁面規(guī)劃布局、注冊登錄模塊、教師文章管理模塊、文章列表區(qū)模塊、文章顯示模塊、留言模塊、搜索模塊、管理員后臺(tái)管理模塊。

主頁頁面規(guī)劃如圖2所示，logo區(qū)、菜單區(qū)、搜索區(qū)是固定的。而文章列表區(qū)則需要搜索數(shù)據(jù)庫文章表，登錄區(qū)則根據(jù)用戶是否登錄，若未登錄顯示登錄表單，若已登錄則顯示某某已登錄，鏈接文章區(qū)也是需要搜索數(shù)據(jù)庫中的連接文章表，因此，文章列表區(qū)、登錄區(qū)、鏈接文章區(qū)需要PHP腳本實(shí)現(xiàn)。

教師文章管理模塊，教師通過首頁的登錄入口，進(jìn)入登錄頁面，輸入教師姓名和密碼進(jìn)入教師后臺(tái)管理頁面，在教師后臺(tái)管理頁面教師可以添加文章，修改、刪除文章以及退出。在添加文章頁面，需要教師選擇文章分類，輸入文章標(biāo)題及文章作者，教師可以在線編輯文章，為了使編輯所見即所得，使用ckeditor編輯，ckeditor支持常用的字體、段落設(shè)置，可以鏈接圖片、FLASH，完全滿足網(wǎng)頁文章編輯需要，如圖3所示。

在主頁的文章列表區(qū)，瀏覽者可以單擊文章標(biāo)題，文章標(biāo)題超級鏈接跳轉(zhuǎn)時(shí)通過get方式傳送文章編號給文章顯示模塊view.php，view.php接收到文章編號，按照文章編號搜索文章數(shù)據(jù)表，顯示文章相應(yīng)信息。

在文章的下方，是留言區(qū)，瀏覽者登錄后，在文本框中輸入評論內(nèi)容，點(diǎn)擊發(fā)布，不需要刷新整個(gè)頁面即可顯示留言，為了實(shí)現(xiàn)局部刷新，留言部分使用AJAX+PHP技術(shù)實(shí)現(xiàn)，搜索功能同樣使用AJAX+PHP技術(shù)實(shí)現(xiàn)[3]。

管理員后臺(tái)管理主要是審核教師賬號和添加鏈接文章。

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

通過對C語言在線學(xué)習(xí)系統(tǒng)需求分析，建立系統(tǒng)數(shù)據(jù)庫cstudydb，包括管理員信息表，學(xué)生信息表，教師信息表，文章信息表，資源信息表，留言信息表，鏈接文章信息表等等。其中文章信息表和資源信息表是1∶n的關(guān)系。文章信息表和留言信息表是1∶n關(guān)系。

4 關(guān)鍵技術(shù)的實(shí)現(xiàn)

4.1 HTM5+CSS3頁面布局與美化

B/S體系結(jié)構(gòu)的系統(tǒng)，不僅要實(shí)現(xiàn)功能，更要關(guān)注瀏覽者的瀏覽體驗(yàn)，即既要做到頁面美觀、大方，又要實(shí)現(xiàn)既定的功能。

HTML標(biāo)準(zhǔn)從HTML4到XHTML再向HTML5過渡，HTML5是為今天的多媒體互聯(lián)網(wǎng)而生的，因此它提供了一整套API，支持視頻、音頻、圖形、地理定位、數(shù)據(jù)存儲(chǔ)等等。HTML5還為結(jié)構(gòu)化文檔提供了很多新的元素如section、article、nav、header、aside、footer等等，而在此之前，沒有語義的div外加標(biāo)識(shí)性的類名和ID，曾經(jīng)頂替過這些新元素的角色。

HTML負(fù)責(zé)構(gòu)建內(nèi)容，CSS則負(fù)責(zé)內(nèi)容的顯示美化。經(jīng)過長久的等待，如今，終于可以使用CSS3的新功能了，諸如漸變、過渡、變換、陰影、圓角等等，各種人性化的結(jié)構(gòu)化偽類更是讓大家不斷驚喜。

完成的界面如圖4所示，整個(gè)網(wǎng)站的顯示都是同一個(gè)主題。

頁面中用到了CSS3的圓角邊框、陰影，使頁面更美觀、立體，圓角邊框的代碼為“border-radius：10px 0px 10px 0px；”，陰影的代碼為“box-shadow：0 12px 8px -9px #555；”，另外還使用了CSS3中的特殊的上下文選擇符如緊鄰?fù)x擇符“+”，結(jié)構(gòu)化偽類before，屬性值選擇符，UI偽類等。

如：.search input： focus{ width：140px；}實(shí)現(xiàn)搜索框input當(dāng)獲得焦點(diǎn)時(shí)寬度變?yōu)?40px，該input原來的寬度是70px，當(dāng)單擊該input時(shí)，就寬度增加，使用戶體驗(yàn)更美妙。

4.2 數(shù)據(jù)庫連接

數(shù)據(jù)庫連接使用PDO技術(shù)實(shí)現(xiàn)，PDO是一個(gè)數(shù)據(jù)庫訪問接口，不同數(shù)據(jù)庫的訪問只要遵循接口規(guī)范即可，屏蔽了不同數(shù)據(jù)庫訪問的差異性，因此能夠簡單、迅速地切換不同數(shù)據(jù)庫，使得數(shù)據(jù)庫間的移植容易實(shí)現(xiàn)[4]。只要發(fā)生數(shù)據(jù)的存取，就需要連接數(shù)據(jù)庫，因此，將數(shù)據(jù)庫連接代碼寫在一個(gè)文件中，如果以后需要使用這段代碼，只要使用require語句包含即可。

4.3 頁面之間的信息傳遞

在文章列表區(qū)，單擊文章后即可調(diào)用文章顯示模塊顯示數(shù)據(jù)庫中的文章，在教師后臺(tái)中，單擊需要修改、刪除文章，即可完成對指定文章的修改和刪除工作，因此需要在不同的頁面之間傳遞信息，該系統(tǒng)使用get方式，將需要顯示、修改和刪除文章的文章編號傳遞給下一個(gè)處理模塊，如：

在處理模塊使用$artid=$_GET['artid']；獲取文章編號，使用文章編號查詢文章數(shù)據(jù)表，獲取文章的其他信息。

4.4 局部刷新技術(shù)

在留言頁面，當(dāng)用戶輸入留言內(nèi)容點(diǎn)擊發(fā)布即可顯示留言內(nèi)容，不需要刷新整個(gè)頁面；在搜索表單里輸入關(guān)鍵字，即可在下方顯示符合關(guān)鍵字的文章，同樣不需要刷新整個(gè)頁面，為了實(shí)現(xiàn)這種良好用戶體驗(yàn)的局部刷新技術(shù)，該系統(tǒng)中使用AJAX技術(shù)實(shí)現(xiàn)。

在系統(tǒng)留言頁面，當(dāng)單擊“發(fā)布”時(shí)，執(zhí)行l(wèi)iuyan（）函數(shù)："；

搜索表單文本框：，同樣適用AJAX技術(shù)實(shí)現(xiàn)局部刷新，首先進(jìn)行XmlHttpRequest初始化，獲取表單中的關(guān)鍵字，使用POST方式傳送給搜索腳本search.php，該腳本將關(guān)鍵字提取后，搜索所有文章表中的文章，將文章中的內(nèi)容與關(guān)鍵字進(jìn)行匹配，若找到，則將文章信息在name為searchresult的div中顯示。

5 系統(tǒng)安全處理

該系統(tǒng)中有3種用戶，學(xué)生用戶、教師用戶、管理員。學(xué)生用戶主要是瀏覽文章和留言；教師用戶則有添加、修改和刪除文章的權(quán)利，因此要對教師用戶進(jìn)行嚴(yán)格的審核，當(dāng)教師注冊后由管理員審核通過才能登錄系統(tǒng)，管理員用戶的后臺(tái)登錄通過特定的頁面才能進(jìn)入，在主頁中并沒有管理員登錄入口，提高系統(tǒng)安全性。

另外為了防止未授權(quán)用戶繞過登錄頁面進(jìn)入后臺(tái)頁面，在該系統(tǒng)中使用SESSION實(shí)現(xiàn)用戶驗(yàn)證，在登錄頁面，當(dāng)指定用戶名的密碼與用戶表中的密碼一致則注冊SESSION。

在需要驗(yàn)證用戶的頁面開啟SESSION，首先判斷$_SESSION["username"]及$_SESSION["islogin"]是否為真，若為真則已登錄，否則跳轉(zhuǎn)到登錄頁面。

6 結(jié)語

基于Apache+PHP+MySQL框架的C語言在線系統(tǒng)，通過教師對網(wǎng)站文章的管理，使學(xué)生課余學(xué)習(xí)資源更適合中職學(xué)生，內(nèi)容也更有針對性，同時(shí)，也方便鏈接其他網(wǎng)站技術(shù)文章拓寬視野，是教師課堂的延伸，是學(xué)生重要的學(xué)習(xí)資源。

參考文獻(xiàn)

[1] 陶天鳴，陳光.基于組件及Web技術(shù)的蜂窩移動(dòng)通信虛擬實(shí)驗(yàn)方案設(shè)計(jì)[J].計(jì)算機(jī)時(shí)代，2010（9）：18-19.

[2] 王鳳玲.基于PHP_MYSQL的新聞發(fā)布系統(tǒng)的研究與實(shí)現(xiàn)[J].計(jì)算機(jī)應(yīng)用與軟件，2012（2）：234-236.

[3] 元謀人.AJax_實(shí)現(xiàn)類似百度搜索欄的功能[EB/OL].[2012-08-20].http：//blog.sina.com.cn/s/blog_68b4ec9b01014ihc.html.

[4] ruxingli.PHP中使用PDO[EB/OL].（2012-01-04） http：//blog.csdn.net/liruxing1715/article/details/7175527.

[5] 寇令宇.沈陽政研信息網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)[D].北京：電子科技大學(xué)，2011.