2024秋軟體工程結對作業（第二次之程式實現）

軟體工程	https://edu.cnblogs.com/campus/fzu/SE2024
這個作業要求在哪裡	https://edu.cnblogs.com/campus/fzu/SE2024/homework/13281
這個作業的目標	站在程式設計師的角度，給出這個產品的核心模組的編碼的原型。
學號	102201315
Github專案地址	https://github.com/KeepUpIce/102201313-102201315
本作業部落格地址	https://www.cnblogs.com/Kkclt
隊友部落格地址	https://www.cnblogs.com/qiushuo/p/18436079

1.專案簡介

1.1專案背景

在大學內，部分學生希望透過發起或參與跨專業的專案（如創業或學術研究）來提升個人綜合能力、拓寬知識面並積累人脈。

然而，大學生在實現這些跨學科合作時面臨諸多困擾，主要體現為：

1、跨學科合作的機會主要依賴於個人積累的有限人脈資源或透過導師的引薦，方式過於侷限，導致許多潛在的合作機會未能實現。

2、不同專業的學生在課程安排、專案目標和溝通方式上存在顯著差異，這增加了合作過程中的溝通與磨合成本，給跨學科合作帶來了挑戰。

3、目前，學校缺乏專門用於促進學生跨學科合作的工具或平臺。現有的合作方式多依賴於群聊、校園公告牆等渠道，其效果有限，難以滿足學生之間有效交流與合作的需求。

1.2專案需求

基於此，需開發一套跨專業合作平臺，為大學生提供發起和參與跨學科專案的渠道。

該平臺具備但不限於以下功能和特點：

1、系統支援不同角色使用者的註冊和認證。學生可以自主發起或加入專案，教師也可發起專案，並上傳和分享相關資源。

2、使用者可以在平臺上釋出需要多學科支援的專案併為其新增標籤，使用者可透過點選標籤檢視對應專案。

3、系統提供預定格式，使用者需按格式填寫表單內容，包括個人專業、課程安排、專案目標、個人能力、聯絡方式和招募需求等。申請者需提交相同的表單以申請參與專案。

4、平臺需具備高頻率使用場景，並確保操作簡便。從使用頻率、便捷性和合作有效性三方面出發，設計易用的介面和簡化的操作流程，以提升使用者體驗。

5、平臺內的專案合作應保持相對封閉，僅限已認證使用者檢視和參與，以防止專案核心內容外洩。

專案原型設計及設計理念具體參考：https://www.cnblogs.com/Kkclt/p/18436117

2.開發語言及環境

開發語言：PHP+MySQL+HTML+JS+CSS

開發環境：Apache2.4.39 / Nginx1.15.11、MySQL5.7.26

3.資料庫構建

3.1資料庫配置

資料庫：project_management，配置如下：

3.2資料庫表格

1、users表，儲存學號/工號、姓名、密碼、專業、郵箱。

2、projects表，儲存專案編號、發起者ID、專案名稱、專案目標、課程安排、個人能力、招募需求、建立時間、專案標籤。

3、applications表，儲存專案編號、學號/工號、課程安排、個人能力、外來鍵。

4、pending_users表，儲存待稽核使用者ID、學號/工號、姓名、密碼、專業、郵箱、身份證明照片、稽核狀態、建立時間。

5、admin表，儲存管理員的使用者名稱和密碼。

4.專案結構

uploads資料夾包含使用者上傳的資原始檔，user_images資料夾包含使用者註冊時上傳的身份證件照片，其它為功能檔案，實現前後端功能：

5.程式碼實現思路

5.1設計流程圖

該應用程式分為使用者視窗和管理員視窗。設計流程圖如下：

5.2使用者和管理員視窗介紹

使用者視窗包括：

1.使用者註冊介面 (register.php)：實現使用者註冊功能，並提供跳轉至登入介面的連結。

2.使用者登入介面 (login.php)：支援使用者登入，並提供跳轉至註冊介面的功能。

3.專案大廳介面 (project_hall.php)：顯示所有專案，使用者可以透過點選標籤進行專案過濾。左側提供標籤欄，可導航至個人中心、資源中心等介面。

4.標籤詳情介面 (tag_detail.php)：展示所有包含特定標籤的專案。

5.專案詳情介面 (project_detail.php)：顯示專案發起人資訊、招募需求、專案目標等資訊。申請人可以在此頁面點選“點選此處申請此專案”來提交申請。

6.發起招募介面 (recruit.php)：實現發起新專案的功能，供使用者填寫相關資訊。

7.申請專案介面 (apply.php)：提供申請專案的介面，使用者可以在此提交申請

8.個人中心介面 (personal_center.php)：展示使用者的個人資訊以及發起或申請的專案列表。

9.資源中心介面 (resource_center.php)：顯示已上傳的資源，並支援資源的搜尋功能。
管理員視窗包括：

1.管理員登入介面 (admin_login.php)**：僅供管理員登入的介面。

2.管理員稽核介面 (admin.php)**：用於稽核使用者註冊資訊，確保使用者的合規性。

6.專案介紹與展示

6.1使用者註冊介面

demo如下所示：

使用者需要填寫學號/工號、姓名、密碼、專業和郵箱，並上傳身份證明照片(工作證/學生證)。提交後，系統會驗證輸入資料，確保所有欄位均已填寫且照片格式正確。

註冊資訊將被插入到pending_users資料庫表中，使用者在提交後會收到成功訊息，提示其申請正在等待管理員稽核。

身份證明照片將被儲存至plateform\user_images，用於之後管理員稽核時呈現到前端：

此外，介面提供了連結以便已註冊使用者登入，確保了註冊和登入的順暢體驗。

6.2使用者登入介面

demo如下所示：

該介面實現使用者登入功能。使用者需輸入學號/工號和密碼進行身份驗證。系統透過查詢users資料庫表確認輸入的憑據是否有效。如果驗證成功，使用者將被重定向至project_hall.php頁面；若失敗，將顯示錯誤訊息，提示使用者檢查輸入的學號/工號或密碼。
介面還提供了連結，方便使用者進行註冊和聯絡管理員以解決密碼問題(admin@plateform.com)，確保了使用者體驗的完整性和流暢性。整體設計聚焦於簡化登入流程，提高使用者便捷性。

6.3專案大廳介面

介面如下所示：

該頁面實現專案大廳的功能。使用者必須登入後才能訪問，若未登入，將被重定向至註冊頁面。

功能包括：

1、分頁顯示專案：每頁顯示10個專案，支援前後翻頁。

2、標籤過濾：從資料庫中獲取並顯示所有獨特的專案標籤，使用者可透過標籤檢視相關專案。

3、專案列表展示：顯示專案名稱和連結，使用者點選可檢視專案詳情。

4、使用者導航：側邊欄提供快速訪問連結到其他頁面，如發起招募和個人中心。

專案細節：

為避免使用者在專案存量較大時尋找專案浪費時間，將專案按時間順序排列，最新的專案置於最上方。對應的SQL語句如下：
// 專案列表
$sql = "SELECT * FROM projects ORDER BY created_at DESC LIMIT $items_per_page OFFSET $offset";
$result = $conn->query($sql);

if ($result && $result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "

<a href='project_detail.php?id=" . $row['id'] . "'>" . $row['id'] . " - " . htmlspecialchars($row['name']) . "

";
}
} else {
echo "

沒有專案可顯示

";
}

6.4標籤詳情介面

demo如下所示：

該頁面實現了標籤頁面的功能，使用者在選擇標籤後，可以檢視與該標籤相關的專案。使用者必須登入後才能訪問，若未登入，將被重定向至註冊頁面。

功能包括：

1、標籤展示：頁面標題顯示當前選擇的標籤。

2、專案列表：根據使用者選擇的標籤，從資料庫中檢索並顯示相關專案，使用者可以點選專案連結檢視詳情。

3、側邊欄導航：提供快捷連結到其他主要功能頁面，如專案大廳和個人中心。

專案細節：

動態獲取與特定標籤相關的專案(使用%進行模糊查詢)，並按時間順序呈現，便於使用者檢視最新的相關專案。對應的SQL語句如下：
// 根據標籤獲取相關專案
$sql = "SELECT * FROM projects WHERE tags LIKE '%" . $conn->real_escape_string($tag) . "%' ORDER BY created_at DESC";
$result = $conn->query($sql);

6.5專案詳情介面

介面如下所示：

該頁面展示了特定專案的詳細資訊，包括髮起人及申請人資訊。使用者必須登入後才能訪問，若未登入，將被重定向至註冊頁面。

主要功能包括：

1、專案資訊展示：顯示專案名稱、發起人姓名、專業、郵箱及專案目標等。

2、申請人資訊：列出所有申請該專案的學生資訊，如學號、姓名和專業等。

3、申請連結：提供申請該專案的連結，方便使用者直接跳轉。

專案細節：

若目前沒有申請人，表示專案尚未吸引任何申請，同時介面輸出提示。

程式碼如下：
if ($applications_result->num_rows > 0) {
while ($application = $applications_result->fetch_assoc()) {
// 顯示申請人資訊
}
} else {
echo "

目前沒有申請人。

";
}

示例介面：

6.6發起招募介面

demo如下所示：

該頁面允許使用者建立新的專案併發起招募。使用者必須登入後才能訪問，若未登入，將被重定向至註冊頁面。

主要功能包括：

1、專案基本資訊輸入：使用者可以填寫專案名稱、課程安排、專案目標、個人能力、招募需求和標籤等資訊。

2、表單驗證：所有欄位均為必填項，確保使用者提供必要的資訊。

3、提交功能：透過提交按鈕，將輸入的資訊儲存到資料庫中，並在成功後重定向到個人中心。

6.7申請專案介面

demo如下所示：
該頁面允許使用者申請特定專案，並展示所申請專案的基本資訊。使用者必須登入後才能訪問，若未登入，將被重定向至註冊頁面。

主要功能包括：

1、專案標識展示：清晰顯示使用者申請的專案ID，幫助使用者確認所申請的專案。

2、課程安排與個人能力輸入：使用者可以填寫課程安排和個人能力的詳細資訊。

3、表單提交：提供提交申請的功能，使用者填寫完資訊後，可以透過提交按鈕將申請傳送到伺服器。

6.8個人中心介面

介面如下所示：

該頁面允許使用者檢視個人資訊及相關專案。使用者必須登入後才能訪問，若未登入，將被重定向至註冊頁面。

主要功能包括：

1、使用者資訊展示：使用者的學號、姓名、專業和郵箱等基本資訊會在頁面上顯示，方便使用者檢視。

2、專案列表展示：使用者參與或發起的專案以列表形式呈現，專案名稱為連結，使用者可以點選檢視專案詳情。

專案細節：

將專案按時間順序排列，最新的專案顯示在最上方，以便與使用者當前的活動保持一致，因為時間較早的專案可能已經結束。對應的SQL語句如下：
$sql_projects = "SELECT * FROM projects WHERE creator_id='$student_id' OR id IN (SELECT project_id FROM applications WHERE student_id='$student_id') ORDER BY id DESC";
$projects = $conn->query($sql_projects);

6.9資源中心介面

demo如下所示：

該頁面提供檔案上傳和搜尋功能，方便使用者管理和訪問上傳的資源。

主要功能包括：

1、檔案上傳：使用者可以選擇檔案進行上傳，支援多種檔案型別（如圖片、文件、影片等）。上傳成功後，檔案將儲存在指定目錄中。

2、檔案型別驗證：在上傳過程中，系統會檢查檔案型別，確保只允許特定格式的檔案上傳，避免不必要的安全風險。

3、檔案搜尋：使用者可以輸入關鍵字搜尋已上傳的檔案，支援不區分大小寫的搜尋功能。

$files = array_filter($files, function($file) use ($search_query) {
return stripos($file, $search_query) !== false && $file !== '.' && $file !== '..';
});
4、展示已上傳檔案列表：頁面展示所有已上傳檔案的列表，使用者可以點選檔名以在新標籤頁中檢視或下載檔案。

6.10管理員登入介面

demo如下所示：

該頁面允許管理員進行登入以訪問管理功能。

主要功能包括：

1、登入資訊輸入：使用者可以填寫使用者名稱和密碼，進行身份驗證。

2、身份驗證：系統會檢查輸入的使用者名稱和密碼是否與資料庫中的記錄匹配，確保使用者身份的合法性。

3、錯誤提示：如果使用者名稱或密碼不正確，頁面會顯示相應的錯誤資訊，指導使用者重新輸入。

4、會話管理：成功登入後，系統會設定會話變數，保持使用者的登入狀態，以便訪問後續管理頁面。

專案細節：

在本系統中，只有在 admin 表中的使用者才能訪問管理員稽核功能。若當前使用者不屬於管理員，則系統將重定向至登入頁面。經過稽核的使用者資訊將被插入至 users 表中，成為普通使用者。這樣可以確保不同使用者角色的許可權明確區分。

例如，普通使用者輸入正確的使用者名稱及密碼，也不可進入管理員稽核介面：

6.11管理員稽核介面

介面如下所示：

該頁面允許管理員稽核待處理的使用者註冊申請，並進行管理操作。必須登入且身份為管理員才能訪問，否則將被重定向至admin_login.php頁面。

主要功能包括：

1、使用者登入驗證：檢查使用者是否已登入，並確保使用者具有管理員許可權，未登入或許可權不足時重定向到登入頁面。

2、待稽核使用者列表：顯示所有待稽核使用者的資訊，包括學號/工號、姓名、專業、郵箱及身份證明照片。

3、稽核操作：管理員可以對每個待稽核使用者進行稽核，稽核透過，則將其新增到正式使用者表中，再從待稽核表中刪除其資訊。

透過GET傳參實現稽核操作：

專案細節：

插入使用者資料到 users 表並在 pending_users 表刪除待稽核使用者（存在先後關係）。SQL語句如下：

7.專案細節

7.1許可權劃分防止未授權訪問

專案內的介面保持相對封閉，除登入介面、註冊介面外的所有介面、介面均作許可權劃分處理，僅限已認證使用者檢視和參與，以防止專案核心內容外洩。

相關程式碼：
session_start();
if (!isset($_SESSION['student_id'])) {
header("Location: register.php"); // 重定向到註冊頁面
exit();
}
如圖，未登入狀態下，訪問專案詳情介面、申請專案介面時均被重定向至註冊介面：


同時，管理員稽核介面僅允許管理員身份訪問，已登入使用者不得訪問管理員稽核介面。

7.2 DESC實現時間逆序排列

在專案大廳、個人中心和標籤詳情介面的專案列表中，使用SQL中的DESC命令實現時間逆序排列。這是因為較久遠的專案通常已完成，因此優先展示最新專案能夠更好地滿足使用者需求。

7.3 多處呼叫htmlspecialchars函式

在專案程式碼中，使用htmlspecialchars() 函式將一些預定義的字元轉換為 HTML 實體，防止潛在的XSS攻擊。

7.4功能最佳化與使用者友好性

在使用者發起招募或申請專案時，無需重複輸入姓名、學號、專業、郵箱等資訊。提交表單後，系統會自動從資料庫中查詢使用者的相關資訊，並將其與提交的資料結合後，直接回顯到瀏覽器頁面。這一最佳化提高了使用者體驗，減少了不必要的輸入步驟。

7.5互動性與響應式效果

對於點選此處申請此專案按鈕處，加入了顏色和縮放過渡效果，按鈕在使用者懸停時輕微放大，明確告知使用者該元素是可點選的，讓使用者在點選或懸停時獲得流暢的視覺反饋，增強了互動體驗。

8.單元測試

8.1測試工具

在測試中使用PHP的內建函式（如 ob_start() 和 include）來模擬頁面訪問，這種方法適用於測試PHP應用中的頁面邏輯。此外，還使用 curl 、Burp工具測試API端點，從而有效地驗證後端邏輯的正確性和穩定性。

8.2測試過程

1、編寫測試用例，以使用者會話模擬訪問 apply.php 頁面，並檢查頁面是否按照預期顯示了專案名稱和表單欄位：
//試apply.php頁面
function testApplyPage() {
// 模擬登入狀態
session_start();
$_SESSION['student_id'] = 1;
$_GET['id'] = 1;
ob_start();
include 'apply.php';
$output = ob_get_clean();

//檢查輸出內容是否包含專案名稱
if (strpos($output, '你申請的專案為') !== false) {
echo "測試透過: 專案名稱顯示成功\n";
} else {
echo "測試失敗: 專案名稱未顯示\n";
}

//檢查表單欄位是否存在
if (strpos($output, '<textarea name="schedule"') !== false && strpos($output, '<textarea name="abilities"') !== false) {
echo "測試透過: 表單欄位正確渲染\n";
} else {
echo "測試失敗: 表單欄位渲染不正確\n";
}
}
//執行測試
testApplyPage();

如圖，回顯如下，說明測試透過：

2、使用curl工具測試管理員登入邏輯

新增測試回顯，登入成功時輸出success：

終端執行如下命令，其中使用者名稱密碼均正確：
curl -X POST http://127.0.0.1/plateform/admin_login.php -d "username=admin" -d "password=passwd"

回顯如下，成功回顯測試字串：

3、使用Burp測試檔案上傳功能點，檢視檔案是否被上傳至預期目錄：

如圖所示，檔案被上傳至uploads/下，說明程式碼預期功能實現成功。
4、由於檔案功能點中使用者可以輸入關鍵字搜尋已上傳的檔案，支援不區分大小寫的搜尋功能，故使用Burp測試如下。

首先確保僅存在以下兩份檔案：

搜尋APPLICATION，若功能點邏輯正確，則將回顯electirc application.png，測試結果如圖：

回顯搜尋的檔名及列出的檔名，說明成功實現不區分大小寫的搜尋功能。
5、使用curl工具測試使用者登入邏輯

新增測試回顯，登入成功時輸出success，失敗時輸出false：

終端執行如下命令，其中密碼為錯誤密碼：
curl -X POST http://127.0.0.1/plateform/login.php -d "username=01001" -d "password=01002"

回顯如下，成功回顯測試字串：

學習單元測試的方法：

1.閱讀線上資源瞭解單元測試的基本概念和最佳實踐，學習如何編寫高效的測試用例。

2.分析優秀的測試用例，學習其測試結構和用例設計。

3.在實際專案中編寫和執行測試用例，逐步積累經驗，並不斷最佳化測試程式碼。

4.合理運用 AIGC 工具，提高測試質量。

以PHP為例，簡易教程如下：

1、配置PHP環境，建立一個用於測試的目錄，包含要測試的PHP檔案。

2、編寫測試用例時，使用條件語句檢查輸出內容是否符合預期，使用內建的 ob_start() 和 ob_get_clean() 函式來捕獲輸出。

3、程式碼示例：
function IceTest() {
ob_start();
include 'example.php';
$output = ob_get_clean();

if (strpos($output, '預期內容字串') !== false) {
    echo "測試透過\n";
} else {
    echo "測試失敗\n";
}

}

4、瀏覽器開啟測試檔案或命令列執行測試檔案，檢視測試結果，驗證功能是否如預期工作，並進行調整。

構造測試資料的思路：

1.基本功能測試

建立有效的測試資料以測試核心功能，例如使用者登入、檔案上傳等。確保至少有一個有效的使用者和檔案供測試使用。

2.邊界測試

考慮各種邊界條件，例如空輸入、超長輸入和無效格式等。確保系統能夠處理這些異常情況。

3.錯誤處理測試

模擬錯誤場景，例如錯誤的使用者名稱和密碼，確保系統能給出正確的錯誤提示。

考慮將來測試人員的困難：

在設計測試時，考慮到測試人員可能嘗試進行不常規的操作，例如輸入意外的格式或進行大量請求。因此，可以將各種測試方法寫入備忘錄，在專案開發時進行測試。同時可以設計自動化測試指令碼，進行壓力測試和負載測試，以確認系統在高併發下的穩定性。

9.PSP表格

以下為 PSP 表格，包含任務階段、預估耗時及實際耗時（估算）：

任務階段(PSP)	預估耗時（min）	實際耗時（min）
環境、資料庫配置	10	15
使用者註冊介面開發	15	10
使用者登入介面開發	20	15
專案大廳介面開發	40	60
標籤詳情介面開發	40	50
專案詳情介面開發	40	55
發起招募介面開發	40	40
申請專案介面開發	30	35
個人中心介面開發	30	25
管理員登入介面開發	15	15
管理員稽核介面開發	30	25
資源中心介面開發	35	30
專案整體最佳化	20	25
細節完善	25	35
需求點測試+程式碼除錯	30	40
事後總結、提出最佳化方案	15	15
總計	435	490

10.分工情況

我所負責：使用者註冊介面、使用者登入介面、管理員登入介面、管理員稽核介面和資源中心介面的開發工作
隊友負責：專案大廳介面、標籤詳情介面、專案詳情介面、發起招募介面、申請專案介面以及個人中心介面的開發

11.隊友評價

隊友積極參與專案開發，且善於分析問題與分享主要的思路，並且十分有責任心，認真準時負責。在專案開發過程中，我們配合積極解決問題，也收穫了深厚的友誼。

12.Github程式碼簽入記錄

13.程式碼模組異常及解決方法

在實現簡單的檔案上傳和搜尋功能時，遇到搜尋功能偶爾無法準確匹配檔名的問題，導致查詢不到檔案。

為了排查問題，使用 var_dump($files) 檢查了檔案列表，同時對搜尋功能進行了多種檔名的除錯。

經排查，當使用者輸入的搜尋關鍵字包含大小寫敏感的字元時，可能會導致搜尋不到匹配項。於是我使用不區分大小寫的匹配方法（stripos()）進行搜尋，成功解決了該問題。