基于Apache+PHP+MySQL的C語言學習系統(tǒng)的實現(xiàn)

汪桂珍

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

關鍵詞：Apache PHP MySQL B/S 在線學習系統(tǒng)

中圖分類號：TP31 文獻標識碼：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語言的教學效果來看，每個班只有寥寥數(shù)人能將C語言學好。課堂學習是C語言學習的重要陣地，而課后的學習拓展也不可或缺。學生在課后鞏固知識、疑難解惑，必須要有學習資源，光教材是遠遠不夠的，而網絡上的眾多學習資源并不適用于中職學生，也不能與教學進度相適應。

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

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

1.1 系統(tǒng)體系結構

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

系統(tǒng)中的Apache Web服務器、PHP應用服務器、MySQL數(shù)據(jù)庫安裝在同一臺計算機上。圖1為該系統(tǒng)體系結構圖。

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

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

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

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

2 模塊設計

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

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

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

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

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

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

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

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

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

4 關鍵技術的實現(xiàn)

4.1 HTM5+CSS3頁面布局與美化

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

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

HTML負責構建內容，CSS則負責內容的顯示美化。經過長久的等待，如今，終于可以使用CSS3的新功能了，諸如漸變、過渡、變換、陰影、圓角等等，各種人性化的結構化偽類更是讓大家不斷驚喜。

完成的界面如圖4所示，整個網站的顯示都是同一個主題。

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

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

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

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

4.3 頁面之間的信息傳遞

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

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

4.4 局部刷新技術

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

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

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

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

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

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

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

6 結語

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

參考文獻

[1] 陶天鳴，陳光.基于組件及Web技術的蜂窩移動通信虛擬實驗方案設計[J].計算機時代，2010（9）：18-19.

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

[3] 元謀人.AJax_實現(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] 寇令宇.沈陽政研信息網站的設計與實現(xiàn)[D].北京：電子科技大學，2011.