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

趙曉凡 高天棟 李文迪 陳燕

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

關鍵詞：智慧學工;“433”學生成才管理;智慧校園

一、引言

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

二、系統(tǒng)功能結構設計

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

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

（一）公共入口的實現

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

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

（二）學生端功能模塊的實現

1.學生端導航菜單的實現

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

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

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

2.我的“433”的實現

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

（三）教師端功能模塊的實現

1.教師端導航菜單的實現

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

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

2.成才信息的實現

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

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

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

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

四、小結

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

參考文獻：

[1]吳旻瑜，劉歡，任友群.“互聯網+”校園：高校智慧校園建設的新階段[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].現代教育技術， 2018.

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

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