結對第二次作業

這個作業屬於哪個課程	<2021軟件工程實踐>
這個作業要求在哪里	<結對作業二>
結隊學號	221801430 221801438
這個作業的目標	團隊協作、熟悉前后端編程
其他參考文獻	w3school PHP教程

---

git倉庫鏈接和代碼規范鏈接

git倉庫

codestyle

網站部署鏈接

PSP表格

PSP2.1	PersonalSoftware Process Stages	預估耗時(min)	實際耗時(min)
Planning	計划
• Estimate	• 估計這個任務需要多少時間	24h	24h
Development	開發
• Analysis	• 需求分析（包括學習新技術）	60	80
• Design Spec	• 生成設計文檔	30	40
• Design Review	• 設計復審	20	20
• Coding Standard	• 代碼規范 (為目前的開發制定合適的規范)	30	15
• Design	• 具體設計	30	40
• Coding	• 具體編碼	240	300
• Code Review	• 代碼復審	20	30
• Test	• 測試（自我測試，修改代碼，提交修改)	30	60
Reporting	報告
• Test Report	• 測試報告	10	15
• Size Measurement	• 計算工作量	10	5
• Postmortem & Process Improvement Plan	• 事后總結, 並提出過程改進計划	20	15
	合計	500	620

成品展示

• 登錄（用戶名：test 密碼：123456）
  
• 搜索
  
• 導入用戶文章列表
  
• 從用戶文章列表中刪除
  
• 根據條件排序
  
  
• 根據關鍵詞搜索
  
• 數據分析
  

結對討論過程描述

• 我們小組大多數時間都是線下討論，一起開發，以下是我們線上討論的一些記錄：
• 
• 
• 

設計實現過程

• 采用HTML+CSS+javascript實現前端界面

• 采用php + Wampserver

• 功能圖：
  

• 前端分為五個界面，有登錄、搜索、搜素結果、用戶文章列表和數據分析。使用php前后端結合方式實現功能，數據使用助教已爬下來的數據。

• 數據庫表結構
  
  
  

• paper表用於存儲所有已爬取的文章，用戶在這個表中搜索
  
  
  

• paper_user表用於存儲用於已導入的文章，在文章列表中顯示全部用戶已導入的文章
  
  
  

代碼說明

• Login.html 登錄跳轉
  起初在實現表單提交的界面跳轉的時候一直無法成功跳轉，頁面效果是刷新了一下當前頁面但是跳轉失敗，后來查詢了資料才知道點擊form的submit 按鈕后，如果不阻止表單跳轉，那么最后會跳轉到指定form的action方法的頁面，也就是當前頁，相當於其實跳轉了兩次，最后回到了當前頁，所以呈現的效果是刷新了界面。

function change1() {
    //防止表單跳轉
    event.returnValue = false;
    window.location.href = "sinplesearch.php";
}

• paper_list.php
  用戶文章列表排序和搜索功能的主要邏輯如下：
  實現的具體思路主要是排序和搜索按鈕是以表單形式實現，所以在提交表單的時候可以通過$_GET來獲取表單中元素的value值，從而可以判斷表單按鈕有無被選中或者輸入，進而根據按鈕不同的情況來創建不同的數據庫查詢語句。

//查看有沒有排過序或者搜索
$select = isset($_GET['sort'])?$_GET['sort']:'';
$search1 = isset($_GET['s_title'])?$_GET['s_title']:'';
$search2 = isset($_GET['s_meeting'])?$_GET['s_meeting']:'';
$search3 = isset($_GET['s_key'])?$_GET['s_key']:'';
//用戶選擇按照標題排序
if($select == "selected1") {
    $sql = "SELECT * FROM paper_user order by post_title";
    $result = $conn->query($sql);
}
//用戶選擇按照時間排序
else if($select == "selected2") {
    $sql = "SELECT * FROM paper_user order by meeting_date";
    $result = $conn->query($sql);
}
//用戶輸入搜索關鍵詞進行模糊查詢
else if($search1!= "" && $search2!= "" && $search3!= "") {
    $sql = "SELECT * FROM paper_user where post_title like '%".$search1."%' and meeting_date like '%".$search2."%' and keywords like '%".$search3."%'";
    $result = $conn->query($sql);
    //搜索后按鈕value改變
    echo "<script> document.getElementById('ensure').value = '查看全部文章';</script>";
}
//沒有操作，則輸出全部的用戶列表信息
else {
    $sql = "SELECT * FROM paper_user";
    $result = $conn->query($sql);
}
            
//顯示
if ($result->num_rows > 0) {
    // 輸出數據
    while($row = $result->fetch_assoc()) {
        echo '...';
    }
}

• paper_list.php
  用戶列表刪除的具體邏輯如下：
  每一個列表項都有一個刪除按鈕，按鈕是通過<a>實現，這樣可以通過href傳遞一個隱藏的參數，實現列表項的定位（即獲取選中的表項的title的值），接下來再通過$_GET["title"]來獲取選中的表項的title的值來刪除數據庫里面的數據，最后還要刷新一下當前的頁面使得數據進行更新呈現。
  此處主要容易有問題的地方在於$_GET需要先判斷是否被設置了值，否則容易出錯。

<a href="paper_list.php?title='.$row["post_title"].'" class="in_bt_one" id="bt_in_one" action="paper_list.php">刪除</a>

...

<?php
    $db_host = "localhost";
    $db_username = "root";
    $db_password = "";
    $db_database = "paperdb";
    /*創建連接*/
    $conn = new mysqli($db_host, $db_username, $db_password, $db_database);
    if (mysqli_connect_errno()) {
        echo '錯誤: 無法連接到數據庫. 請稍后再次重試.';
        exit;
    }
    $conn->query("SET NAMES utf8");
    //刪除當前選擇列表
    $title = isset($_GET['title'])?$_GET['title']:'';
    $sql = "delete from paper_user where post_title='".$title."'";
    $result = $conn->query($sql);
    $conn->close();
    //刷新本頁
    echo "<script>
          function jump() {
            //防止表單跳轉
            event.returnValue = false;
            window.location.href = 'paper_list.php';
         }</script>";
?>

• search_result.php + singlesearch.php 搜索結果
  該界面主要是實現對文章的搜索和導入用戶列表的功能，在搜索功能的具體邏輯實現主要是要將前一頁singlesearch.php用戶輸入的要搜索的內容傳遞到該界面進行搜索並展示出來，這里主要運用到了SESSION傳值機制，在singlesearch.php中為$_SESSION["input"]賦值，再在該界面上讀出，並進行模糊查詢。
  其次由於搜索結果界面也是可以直接查詢（此處設計理念主要是結合了百度搜索的設計想法），所以需要在賦值$_SESSION["input"]后unset($_SESSION["input"]);，保證后續的文本框輸入的結果可以被正確的賦值。

// singlesearch.php
<?php
@session_start();
    $get = isset($_GET["in"])?$_GET["in"]:"";
    $_SESSION["input"] = $get;
    if($get != "") {
        echo "<script>
        window.location.href = 'search_result.php';</script>";
    }
?>

//數據庫鏈接
...

//查詢數據 session傳上一頁輸入框的值
@session_start();
$in = isset($_SESSION["input"]) ? $_SESSION["input"] : '';
//有傳來session的值
if ($in != "" ) {
    $search_key = $_SESSION["input"];
    unset($_SESSION["input"]);
}
    else {
        $search_key = isset($_GET["search_key"]) ? $_GET["search_key"] : "";
    }
                   
//查找
$sql = "SELECT * FROM paper where post_title like '%".$search_key."%' or keywords like '%".$search_key."%'";
$result = $conn->query($sql);
echo "<script> document.getElementById('search_key').value = '".$search_key."';</script>";
//顯示
if ($result->num_rows > 0) {
    // 輸出數據
    while($row = $result->fetch_assoc()) {
        echo '...';
    }
}
    

• search_result.php 導入文章到用戶列表
  和刪除用戶列表類似，也是利用<a>標簽進行傳值，這里主要要處理的是用戶列表中是否已經存在該數據，如果存在則不需要再次插入。

//標簽
<a href="search_result.php?title='.$row["post_title"].'" class="in_bt_one" id="bt_in_one" action="search_result.php"  onclick="insert_user()">導入</a>

...

//導入當前選擇文章
$title = isset($_GET['title'])?$_GET['title']:'';
$sql = "select * from paper where post_title = '".$title."'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$sql1 = "select * from paper_user where post_title = '".$title."'";
$result1 = $conn->query($sql1);
//判斷用戶列表中是否已經存在
if (mysqli_num_rows($result1) == 0){
    $sql2 = "insert into paper_user values ('".$row['post_title']."','".$row['post_content']."','".$row['release_date']."','".$row['keywords']."','".$row['release_date']."','".$row['link']."')";
    $result2 = $conn->query($sql2);
}

心路歷程和收獲

• 最開始實現前端時，對html標記和css屬性都不太熟悉，進度比較慢，寫時意識到設計原型時也要考慮能否用技術實現出來。后來通過教程學習和不斷實踐進階，熟練掌握了前端界面實現的技術。不過總體來說前端界面實現得結對成員都覺得很滿意！看着代碼寫出來的界面覺得很有成就感！
• 由於對技術不熟悉，在后端實現前考慮了很多方法，嘗試過純前端開發，使用sqlit存儲數據，但在數據導入數據庫時出現問題，javascript不能讀取本地文件，掙扎了很久最后還是決定放棄這個方法，后采用php前后端結合，實現數據處理。
• 后端實現時，出現很多bug，兩個人一起改bug的過程比較歡樂，結對作業就是隊友之間可以互相促進，思考問題比較全面，對bug的解決也有多種解決方案，最后總有一種方法可以解決問題，（實在解決不了的問題也求助了其他同學）。
• 大概總結一下就是開始比較難，中間比較難，結束比較難，但是過程比較開心，收獲很多。

評價結對隊友

• 余蘭同學對林楚婷同學的評價
  楚婷同學代碼經驗比較豐富，編寫代碼能力比較強，能夠給我很多正面的指導和建議，兩個人一起編程的好處就是可以一起討論解決一個bug，一起討論編碼思路，不用一個人抓破腦袋的想。和之前一次結對一樣，結對隊友之間能夠互補，結對過程很開心，很不錯！

• 林楚婷同學對余蘭同學的評價
  余蘭同學非常有耐心，能有很多好的思路和點子，在結對過程中能夠提出很多好的建議，使得我們在這個過程中可以很好的互幫互助，促進項目更好的推動，兩個人的合作很順利！