“433”學生成才管理系統(tǒng)設(shè)計與實現(xiàn)

趙曉凡 高天棟 李文迪 陳燕

摘 要：“433”學生成才工程是為匹配學院“聚焦智慧企業(yè)、聚力智慧服務(wù)、成就智慧人生”的人才培養(yǎng)定位所制定的方案。系統(tǒng)以我院“433”學生成才工程為研究內(nèi)容，以師生行為為研究對象，為我院“433”學生成才工程提供一個信息化、智能化的集收集、存儲、分析和匯總為一體的管理平臺。系統(tǒng)的開發(fā)，為我院“433”學生成才工程的順利實施添磚加瓦。

關(guān)鍵詞：智慧學工;“433”學生成才管理;智慧校園

一、引言

“433”學生成才工程方案緊貼學生成才需求，以促進學生更好地發(fā)展、更高質(zhì)量、更充分地就業(yè)創(chuàng)業(yè)為導(dǎo)向。2019年起，助力學生在校三年期間全部參與成才工程，并全方位全過程跟蹤、記錄、指導(dǎo)每名學生的成才過程。從該方案實施以來，學生成才信息主要每年定期利用離線Excel表格、騰訊在線文檔、問卷星小程序等方式進行收集、數(shù)據(jù)需要重復(fù)采集、學生不方便實時和自己的規(guī)劃進行比對、二級學院、職能部門數(shù)據(jù)統(tǒng)計工作量繁重，并且通過騰訊在線文檔等在線方式存在學生信息泄露安全風險。經(jīng)過前期需求調(diào)研，本系統(tǒng)確定以“433”學生成才工程為研究內(nèi)容，以師生行為為研究對象，采用PHP+Bootstrap+MySQL技術(shù)，實現(xiàn)全方位全過程跟蹤指導(dǎo)、隨時隨地記錄學生的成才過程，動態(tài)綜合生成學生成才錄，助力新時代學生有新作為。

二、系統(tǒng)功能結(jié)構(gòu)設(shè)計

“433”學生成才管理系統(tǒng)研究及建設(shè)緊密結(jié)合學院“433”成才工程。充分展現(xiàn)學院實施“433”學生成才工程的總體要求及目標、具體任務(wù)、實施路徑、活動與成果等;便于各職能部門跟蹤、分析、監(jiān)控、指導(dǎo)各二級學院以及各二級學院輔導(dǎo)員、導(dǎo)師指導(dǎo)每個學生“433”學生成才實施情況;為學生提供便捷的“433”成才記錄途徑和自我分析數(shù)據(jù)。系統(tǒng)根據(jù)應(yīng)用情境和用戶對象規(guī)劃系統(tǒng)的功能模塊，如下圖1所示。在系統(tǒng)頁面結(jié)構(gòu)上，采用Bootstrap技術(shù)，實現(xiàn)響應(yīng)式布局的“433”成才管理頁面布局，便于用戶在移動端、PC端等各種終端設(shè)備隨時隨地登錄并使用系統(tǒng)。在邏輯功能實現(xiàn)上，基于PHP+ MySQL技術(shù)實現(xiàn)業(yè)務(wù)流程處理和數(shù)據(jù)的交互，重點圍繞學生成才信息的采集、存儲、提交與分析匯總展開，并提出可行的解決方案。

三、系統(tǒng)功能模塊的實現(xiàn)

（一）公共入口的實現(xiàn)

系統(tǒng)為用戶提供統(tǒng)一的用戶登錄界面。由于系統(tǒng)的使用對象是本校學生和教師，為方便管理，系統(tǒng)共享學院教務(wù)系統(tǒng)學生教師用戶權(quán)限，無需用戶另外設(shè)置注冊功能，只要為用戶指定登錄賬號為學生學號或者教師工號，并且設(shè)置一個初始密碼，用戶根據(jù)權(quán)限進入系統(tǒng)更改密碼即可。

用戶輸入學號或工號以及初始密碼，通過POST方式請求服務(wù)器，服務(wù)器根據(jù)數(shù)據(jù)庫信息自動判斷用戶身份。如果輸入的是工號和初始密碼，系統(tǒng)判斷工號和密碼是否有誤，沒有錯誤自動跳轉(zhuǎn)到教師如圖端首頁面。如果輸入的是學號和初始密碼，系統(tǒng)判斷沒有錯誤則自動跳轉(zhuǎn)到學生端首頁面。為保證系統(tǒng)安全性，系統(tǒng)對用戶表單提交的密碼信息進行了MD5加密處理。學生和教師根據(jù)權(quán)限進入系統(tǒng)后立即更改密碼即可。

（二）學生端功能模塊的實現(xiàn)

1.學生端導(dǎo)航菜單的實現(xiàn)

學生按照學號、密碼成功登錄，進入“433”學生成才系統(tǒng)學生端首頁面，系統(tǒng)為學生提供的導(dǎo)航菜單包括“433”簡介、“433”典范、“433”信息、我的“433”、個人中心和退出，助力學生全方位了解、實施、完成“433”學生成才工程。

為滿足學生群體不受時空限制，隨時隨地記錄自己成長信息，系統(tǒng)采用Bootstrap前端開發(fā)工具包，Bootstrap基于HTML、CSS、JavaScript等前端技術(shù)，提供了功能強大的內(nèi)置組件和基于Web的定制功能，為開發(fā)人員創(chuàng)建接口提供了一個簡潔、統(tǒng)一的解決方案，支持主流的Chrome、IE、Firefox、Safari等瀏覽器，Bootstrap的響應(yīng)式CSS能夠適用于PC機、平板電腦和手機等屏幕大小分辨率，為系統(tǒng)的跨平臺應(yīng)用提供了較好的技術(shù)服務(wù)。

系統(tǒng)使用Bootstrap包中的.container類和.container-fluid類。.container類用于固定寬度并支持響應(yīng)式布局容器，.container-fluid類用于設(shè)置界面100%寬度，占據(jù)全部視口（viewport）的容器。先在容器中添加<nav>標簽，然后采用Bootstrap的.navbar類和.navbar-default類制作導(dǎo)航欄，并且為<nav>標簽添加role=”navigation”屬性值，可以增加可訪問性。然后在<nav>標簽中添加類為.navbar-header的div標簽，用于設(shè)置導(dǎo)航菜單的標題。添加類為.nav 和.navbar-nav的ul標簽用于設(shè)置界面導(dǎo)航菜單即可實現(xiàn)系統(tǒng)響應(yīng)式的界面布局方式，用戶不僅可以在PC端，還可以在平板電腦或手機端隨時隨地使用系統(tǒng)，滿足用戶更好的需求和體驗。下圖2分別為系統(tǒng)在手機端和PC端的頁面展示效果圖。

2.我的“433”的實現(xiàn)

學生提交“433”成才數(shù)據(jù)到服務(wù)器后，各職能部門、二級學院以及各導(dǎo)師、輔導(dǎo)員按照權(quán)限不同依次審核，并提出具有針對性的反饋或者指導(dǎo)意見。在我的“433”模塊，以學期為單位，為學生生成“433”數(shù)據(jù)畫像，最終生成“433”成才錄。此模塊用于為學生隨時提交“433”成才信息，等待導(dǎo)師審核認證通過后反饋的詳細成才信息，以便學生了解并掌握“433”任務(wù)完成的進度以及導(dǎo)師給予的指導(dǎo)性意見。技術(shù)實現(xiàn)上，學生端通過POST請求服務(wù)器，請求成功，系統(tǒng)使用數(shù)據(jù)庫的state字段識別信息審核狀態(tài)，“0”代表未審核，“1”代表審核未通過，“2”代表審核通過。當學生隨機提交一條成才記錄，數(shù)據(jù)庫中的state會自動更新為“0”。當導(dǎo)師執(zhí)行審核操作后，系統(tǒng)根據(jù)學生提交記錄信息的正確與否，state字段動態(tài)更新為“1”或“2”。審核完成，動態(tài)拼接“433”學生成才積分表，將添加的記錄存儲數(shù)據(jù)庫，并通過JSON格式傳送到學生端，根據(jù)數(shù)據(jù)狀態(tài)，動態(tài)更新學生端顯示效果。下圖3為學生某一學期完成“433”的進度狀態(tài)圖。

（三）教師端功能模塊的實現(xiàn)

1.教師端導(dǎo)航菜單的實現(xiàn)

教師按照教師工號、密碼成功登錄，進入“433”學生成才系統(tǒng)教師端首頁面，系統(tǒng)為教師（以導(dǎo)師權(quán)限為例）提供的導(dǎo)航菜單包括工作臺、學生管理、成才信息、消息通知、個人中心和退出系統(tǒng)6個部分。

為教師用戶可以不受時間空間限制，為系統(tǒng)適配不同終端設(shè)備是本系統(tǒng)設(shè)計的重點。由于目前終端設(shè)備的屏幕分辨率不一致，系統(tǒng)采用Bootstrap開發(fā)的響應(yīng)式布局調(diào)整內(nèi)容樣式大小達到預(yù)期效果。技術(shù)手段上與學生端首頁導(dǎo)航菜單實現(xiàn)方法類似，主要使用Bootstrap包中的.container類和.container-fluid類，結(jié)合<nav>、<ul>和<li>標簽實現(xiàn)系統(tǒng)的響應(yīng)式界面布局方式以適配不同瀏覽器、不同分辨率終端設(shè)備的正常顯示。下圖4分別為系統(tǒng)在手機端和PC端的頁面展示效果圖。

2.成才信息的實現(xiàn)

“成才信息”模塊包括“433”成才典范和“433”成才信息管理兩個子模塊。其中，“433”成才典范模塊可以為教師群體查詢或者添加滿足成才典范條件的學生信息。技術(shù)實現(xiàn)上與學生信息的添加和查詢功能類似。

以查詢功能為例，通過查詢數(shù)據(jù)庫，將符合條件的數(shù)據(jù)信息以JSON數(shù)據(jù)格式返回，然后使用AJAX將讀取到的符合條件的數(shù)據(jù)信息展示到前端頁面。教師也可以根據(jù)所帶學生“433”完成進度及質(zhì)量情況，將符合條件的學生信息添加到“433”成才典范庫。在“433”成才信息管理模塊，教師可以查詢所帶學生的成才進度信息，也可以按照個人、年級或者專業(yè)分類匯總各項成才數(shù)據(jù)信息，以便給予精準的指導(dǎo)與反饋。在功能實現(xiàn)上，除了直接將后端返回的數(shù)據(jù)展示到前端界面外，還使用了可視化的圖表展示，讓數(shù)據(jù)信息變得更加直觀。

開發(fā)時使用了開源免費，功能豐富的Echarts數(shù)據(jù)可視化圖表組件，Echarts是一個純JavaScript開源可視化庫，具有豐富的可視化類型，支持交互式數(shù)據(jù)、跨平臺應(yīng)用。系統(tǒng)使用加載異步數(shù)據(jù)的方式生成可視化圖表。

實現(xiàn)步驟具體如下：1、首先在系統(tǒng)中引入Echarts的JavaScript文件，<script src=”echarts.js”></script>;2、設(shè)置一個具有寬高的DOM容器，<div id=”box” style=”width：400px;height：300px”></div>用于放置圖表;3、基于準備好的DOM容器（必須使用JavaScript代碼獲?。┏跏蓟疎charts對象;4、使用Echarts對象調(diào)用setOption（）方法設(shè)置圖標的顯示標題、圖例以及數(shù)據(jù)的坐標軸相關(guān)參數(shù);5、加載異步數(shù)據(jù)，通過$.post（）方法將后端返回的JSON數(shù)據(jù)顯示到圖表中。下圖5分別使用柱狀圖和餅圖展示了2018級學生個人完成“433”工程任務(wù)的進度和2018級學生積分得分總體分布情況。通過多層次、多維度獲得的匯總數(shù)據(jù)信息，可以幫助教師更加精準、更加有效的為學生提供指導(dǎo)和幫助。

四、小結(jié)

本系統(tǒng)是在“互聯(lián)網(wǎng)+”智慧學工建設(shè)的背景下，根據(jù)我院“433”學生成才工程的實施需求而開發(fā)。系統(tǒng)兼顧PC端和移動終端，包括學生端和教師端。充分展現(xiàn)學院實施“433”學生成才工程的總體要求及目標，具體任務(wù)，實施路徑，活動與成果等;便于各職能部門、二級學院、各導(dǎo)師跟蹤、分析、監(jiān)控、指導(dǎo)每個學生的“433”實施情況;為學生提供便捷的“433”成才記錄途徑和自我分析數(shù)據(jù)。本系統(tǒng)是我院高效實施“433”學生成才工程的重要工具，也是我院學生全生命周期管理系統(tǒng)中的重要組成部分。

參考文獻：

[1]吳旻瑜，劉歡，任友群.“互聯(lián)網(wǎng)+”校園：高校智慧校園建設(shè)的新階段[J].遠程教育雜志， 2015， 7（4）：8-15.

[2]NMC. The NMC horizon report： 2017 higher education edition[EB/OL]. 2017-03-10.

[3]李超，周涵.學習管理系統(tǒng)綜述和發(fā)展趨勢展望[J].現(xiàn)代教育技術(shù)， 2018.

[4]張偉遠，段承貴，封晨.香港大學“互聯(lián)網(wǎng)+”繼續(xù)教育系統(tǒng)模式的實踐思考[J].現(xiàn)代遠程教育研究， 2016（01）：11-18+26.

[5]蔣東興，付小龍，袁芳，蔣磊宏.高校智慧校園技術(shù)參考模型設(shè)計[J].中國電化教育，2016（09）：108-114.