網站設計-作品展示:Neil電子校刊模組開發

今天：	321
昨天：	694
本週：	5257
本月：	15885
總計：	30588
平均：	209

作品展示:Neil電子校刊模組開發-網站設計

:::

作品項目

模組開發客製模組開發公版模組開發模組程式修改

前往作品諮詢 0 作品諮詢紀錄 0

頁面QRcode

客製模組開發:Neil電子校刊模組開發

作品類型：展示作品作品編號：PTN-0032

本模組已完成除錯作業並正式交付客戶使用中。
未來將持續依使用回饋進行功能優化與擴充，
並計劃於模組穩定後，開放給使用 XOOPS 的各學校單位免費申請安裝，供客製化網站設計時使用。
作品項目：
無障礙AA

設計方案：

Xoops模組開發方案

CMS版本：

Xoops2.5.11
網站語言：
繁體中文

:::

Neil電子校刊模組由 桃園市南美國小 委託開發，目的在將傳統需透過實體編排製作的校刊流程全面數位化，打造一個整合投稿、審核與發佈的雲端平台。
透過此系統，不僅能有效精簡校刊製作的人力與流程，亦大幅提升互動參與度與作業效率，讓每位學生的心血作品得以無遠弗屆地傳遞分享，實現寓教於樂的初衷。
模組採用多人投稿協作架構，學生可線上申請投稿資格，經管理群組審核通過後即可發表作品；投稿內容需經審核核准才會公開顯示，未通過者可暫列為投稿候選，或由管理員直接核准。系統提供投稿者與管理群組雙介面，投稿者可管理個人作品與發佈狀態，管理群組則能統籌審核、編輯期別與項目內容，並內建 AJAX 長輪詢機制，即時同步審核狀態與統計資料，亦支援匯出 Excel 報表，全面提升管理效率。
資料結構採三級關聯式設計：頂層為校刊期別，其下為各期刊項目，最底層為投稿內容。未發佈的期別不會顯示任何投稿內容，管理員可設定定時發佈或手動發佈；已發佈的期別將鎖定無法再新增投稿（管理群組除外），但仍可持續審核既有作品，確保刊期流程的完整與有序。
首頁採用 AJAX 瀑布流動態載入，具備資料交叉查詢與輸出防抖機制，可有效降低大量資料載入時的延遲問題，並完整支援行動裝置瀏覽，提供流暢且直覺的操作體驗。目前模組已完成正式部署並穩定運作中，後續將持續依使用回饋進行功能優化與擴充，並計畫在成熟穩定後，開放予使用 XOOPS 的學校單位免費申請安裝，作為校園刊物數位化轉型的首選解決方案。

開發環境

php版本：php8.0.14
資料庫：5.5.5-10.4.21-MariaDB / mysql 8.0(嚴謹模式)
Xoops版本：Xoops2.5.11
模組名稱：neilperiodical
使用程式：AJAX，JQuery，php，smarty。
介面框架：bootstrap3 / html5 / 自行撰寫的css樣式

模組語系：中文語系，語系抽離樣板建立語系檔權限管理：

->管理員權限->可以管理模組全部前後台功能

->期刊管理群組權限

可以管理期別/項目/投稿會員/發佈投稿
可以審核投稿會員申請/審核投稿作品
可以使用內容管理總表全部功能

->期別管理群組權限

可以管理被指定期別中的->項目/發佈投稿
可以審核被指定管理期別中的投稿作品
可以使用內容管理總表被指定期別中的功能

->投稿會員權限

可以發佈投稿(未審核可編輯)
可以使用投稿紀錄功能查詢投稿狀態(審核/未審核/候選/編輯/查詢)
可以編輯投稿會員資料包含刪除(限投稿會員自己)

開發工時：90天(不含假日)，已完成測試除錯正式上線。

Neil電子校刊模組-功能說明-2022

後台功能

1、系統設定 settings.php

管理資料列表一次顯示幾則
期刊內容一次顯示幾則
期刊圖片寬度(大縮圖)
期刊圖片寬度(小縮圖)
自動刪除未審核投稿(包含候選投稿)及未審核申請投稿資格天數
預設投稿審核通過回覆內容
預設投稿審核不通過回覆內容
投稿須知說明
投稿資格說明
期刊管理群組
項目內容排列方式

2、班級管理 classadmin.php

可建立班級名稱及啟用選項(二級分類)
班級管理(可編輯/刪除/排序)

前台功能

1、期別管理periodadmin.php

建立期別/編輯期別
- 期別名稱
- 期別說明
- 徵稿開始時間
- 徵稿結束時間
- 到期後自動發佈(是/否)
- 可管理群組
- 可觀看群組
- 內容啟用QRcode
期別管理總表
- 選擇期別狀態排列(已發佈/未發佈)
- 期別資料列表
- 期別管理(發佈&取消發佈/項目管理/編輯/刪除/首頁管理/ 自訂按鈕管理)
- 期別排序功能
- 建立期別首頁/編輯/關閉

2、項目管理periodadmin.php

建立項目/編輯項目(已發佈期別不可建立項目)：
- 項目名稱
- 選擇項目樣式(圖文式/圖片式/文字式)
- 徵稿數量
- 項目說明
- 投稿資格
- 可觀看群組
- 項目狀態(啟用/不啟用)
- 內容啟用QRcode
項目管理總表
- 選擇項目狀態排列(已啟用/未啟用)
- 選擇項目樣式排列(圖文式/圖片式/文字式)
- 項目資料列表(項目名稱/統計數據)
- 項目管理(內容管理/編輯/刪除)
- 項目排序功能

3、內容管理content.php(管理群使用介面)

查詢功能(資料交叉查詢)
- 選擇審核狀態(尚未審核/審核通過/投稿候選)
- 選擇校刊期別(ajax連動選單期別帶出項目)
- 選擇就讀年級(ajax連動選單年級帶出班級)
- 選擇投稿會員
- 選擇投稿審核者
- 選擇內容狀態(關閉/啟用)
- 輸入搜尋(可輸入作品名稱，投稿人姓名，家長及指導老師為搜尋目標)
- 內容資料顯示方式(按投稿時間排列/按審核時間排列/按瀏覽次數排列/按內容排序排列/按Excel內容排列->可匯出Excel報表)
內容總表
- 依照查詢項目顯示投稿資料列表
- 預設功能操作(刪除/關閉內容/編輯/觀看內容)
- 尚未審核操作(前往審核/加入候選/刪除/編輯/觀看內容)
- 審核通過操作(刪除-管理員權限/關閉內容/編輯/觀看內容)
- 審核功能(ajax查輪詢跨頁監控審核頁面更新總表數據內容)
- 內容排序功能
- 未審核及投稿候選提醒警示區塊

4、投稿會員管理content.php

查詢功能(資料交叉查詢)
- 選擇審核狀態(尚未審核/審核通過)
- 選擇就讀年級(ajax連動選單年級帶出班級)
- 輸入搜尋(可輸入投稿人姓名，家長及E-MAIL為搜尋目標)
- 投稿人資料顯示方式(按申請時間排列/按審核時間排列/按投稿次數排列)
會員管理總表
- 依照查詢項目顯示投稿會員資料列表
- 功能操作(審核通過/編輯/刪除/觀看內容)
- 投稿紀錄(前往會員投稿記錄管理)

5、投稿記錄管理content.php(投稿會員使用介面)

查詢功能(資料交叉查詢)
- 選擇審核狀態(尚未審核/審核通過/投稿候選)
- 選擇校刊期別(ajax連動選單期別帶出項目)
- 選擇內容狀態(關閉/啟用)
- 輸入搜尋(可輸入投稿作品名稱，投稿人姓名家長及指導老師及就讀班級為搜尋目標)
- 內容資料顯示方式(按投稿時間排列/按審核時間排列/按瀏覽次數排列)
內容總表
- 依照查詢項目顯示投稿資料列表
- 功能操作(編輯/觀看內容)

6、投稿會員資料管理content.php

選擇投稿會員(管理群權限-能切換投稿會員資料)
申請時間
審核狀態
審核時間
會員帳號(xoops會員帳號)
學生姓名
家長姓名
投稿成功次數(統計審核通過的投稿)
就讀班級
E-MAIL
功能操作：審核通過(管理群權限)/編輯資料/刪除資料/投稿紀錄

7、投稿資格申請表content.php

輸入欄位
學生姓名
選擇就讀年級(ajax連動選單年級帶出班級)
家長姓名
電子郵件(預設值帶入Xoops會員E-nail)->我不是機器人ajax表單驗證機制

8、發佈投稿內容content.php

選擇校刊期別(ajax連動選單期別帶出項目)
投稿人資料
- 帶出投稿會員基本資料(可修改欄位內容)
- 管理群可選擇投稿會員帶出資料
- 更新儲存投稿人資料
填寫投稿資料(按項目配置表格內容)
圖文式頁面
- 內容標題
- 內容說明(ck編輯器)
- 上傳圖檔
- 圖檔位置(靠左內文縮圖/靠右內文縮圖/內文上方顯示大圖)
- 投稿須知說明
- 投稿資格說明
- 我符合以上投稿資格
圖片式頁面
- 內容標題
- 內容說明(ck編輯器)
- 上傳圖檔
- 投稿須知說明
- 投稿資格說明
- 我符合以上投稿資格
文字式頁面
- 內容標題
- 內容說明(ck編輯器)
- 上傳圖檔
- 投稿須知說明
- 投稿資格說明
- 我符合以上投稿資格
管理群組投稿不須審核
- js前台欄位必填表單驗證
- php後台欄位必填表單驗證
- ajax非同步表單切換
- 投稿權限驗證機制

9、電子校刊首頁index.php(期別/項目)

系統自動帶出已發佈的最新期別(若全無發佈則顯示徵稿中期別)
上方功能bar(針對權限及對應內容顯示功能)
- 選單(徵稿中期刊/已發佈期刊)->ajax帶出對應期別選單
- 申請投稿資格/我要投稿 (按照權限自動更替按鈕)
- 投稿管理(投稿紀錄/資料管理)
- 校刊管理(投稿會員管理/期別管理/項目管理/內容管理/建立投稿/電子校刊管理)
- 搜尋內容
徵稿中期刊介面-期別/項目
- 期別項目列表(項目名稱/投稿數據統計)
- 頁面QRcode
- 社群分享功能(fb/line)
- 自訂按鈕顯示區塊
- 投稿未審核通知顯示區塊(管理群組權限)
- 投稿候選未審核通知顯示區塊(管理群組權限)
- 徵稿開始時間/徵稿結束時間
- 期別說明區塊(期別內容顯示)
- 項目說明區塊(項目內容顯示)
- 投稿資格說明區塊(項目內容顯示)
- 我要投稿按鈕(項目內容顯示)
已發佈期刊介面-期別/項目
- 期別項目列表(項目名稱/投稿數據統計/瀏覽統計)
- 頁面QRcode
- 瀏覽次數(該期別項目投稿內容瀏覽加總)
- 期別首頁(如有建立顯示首頁，若無則顯示項目列表)
- 資料排列方式(熱門瀏覽排列/發佈時間排列)
- 項目列表(按照項目樣式區塊顯示投稿資訊，使用ajax瀑布流)
- 功能操作(關閉內容/編輯內容)-管理群組權

10、電子校刊內容頁content.php

上方功能bar(同期別首頁)
期別項目列表(同期別首頁)
頁面QRcode
編輯內容按鈕(已審核內容不可編輯，管理群除外)
關閉內容按鈕(管理群權限)
投稿內容(圖文式)
- 內容標題
- 發佈時間(審核通過後改顯示審核時間)
- 流覽次數
- 資訊導覽bar(期別/項目/審核狀態/內容狀態)
- 投稿內容(圖文並茂圖片按照投稿選項配置/靠左內文縮圖/靠右內文縮圖/內文上方顯示大圖) (燈箱放大效果)
- 投稿人資料(學生姓名/就讀班級/指導老師/家長姓名)
- 前往上一頁/下一頁
投稿內容(圖片式)
- 內容標題
- 發佈時間(審核通過後改顯示審核時間)
- 流覽次數
- 資訊導覽bar(期別/項目/審核狀態/內容狀態)
- 投稿圖片區塊(燈箱放大效果)
- 投稿作品說明(文字區塊)
- 投稿人資料(學生姓名/就讀班級/指導老師/家長姓名)
- 前往上一頁/下一頁
投稿內容(文字式)
- 內容標題
- 發佈時間(審核通過後改顯示審核時間)
- 流覽次數
- 資訊導覽bar(期別/項目/審核狀態/內容狀態)
- 作品說明(文字區塊)
- 投稿人資料(學生姓名/就讀班級/指導老師/家長姓名)
- 前往上一頁/下一頁

區塊功能

電子校刊項目列表

後台介面
- 顯示項目數量
- 項目顯示方式(按照最新建立/按照自訂排列/項目隨機排列)
前台區塊(按照後台設定顯示區塊內容)
- 只顯示已發佈期別，除非全無發佈期別則顯示徵稿中期別
- 期別選單(ajax切換期別與項目列表)
- 項目列表(項目名稱/投稿統計資訊/瀏覽數)
- 套用電子校刊模組各項權限與狀態判斷顯示

電子校刊列表