在經過了整個第三章的系統分析及製定表格後，開始製作整個系 統，首先，由於我們是一個租屋的網站，因此首頁便放了一些相關的 圖片，再設計一些超連結讓每個使用者依各自的需求去點選所要的路 徑，而我們系統的首頁如下：
圖4.1 租屋系統首頁
4.1 會員子系統實作
會員子系統主要功能是讓使用者以加入會員的方式在本站行使他 的權利，管理員也方便管理整個系統的運作。
1. 會員登入動作
A、輸入畫面
當使用者按下了首頁會員登入的超連結後，便會進入以下會員登入 的選單，而在輸入完帳號及密碼後，按下登入鈕，便可以得到輸出畫 面。
圖4.2 登入畫面
B、演算法
Key In 會員帳號及密碼 Click 登入
{
If 資料正確 Then Display 成功畫面 Else
Display 錯誤畫面 End If
}
C、輸出畫面
圖4.3 登入成功畫面
2. 註冊會員資料
若在會員登入的選單中，點選加入會員的超連結，便會進入此 頁面，而且輸入完此表單後，便可得到輸出畫面，但倘若此表單中打*
號(也就是必埴)的欄位沒有輸入資料，便會出現輸出畫面中的錯誤訊 息。
A、輸入畫面
圖4.4 註冊會員資料之輸入畫面 B、演算法
Key In 個人資料 Click 加入會員 {
If 輸入資料正確 Then
將此筆資料寫入會員資料表 Display 加入成功畫面
Else
Display 錯誤訊息 End If
}
C、輸出畫面 (1) 註冊成功畫面
圖4.5 註冊成功畫面
(2) 錯誤訊息畫面
圖4.6 錯誤訊息畫面
3. 修改會員資料
而在登入成功的頁面中，點選修改會員資料的超連結，便可以進入 以下修改會員資料的表單，在修改完所要的資料後，按下修改資料 的按鈕，便可得到輸出畫面。
A、輸入畫面
圖4.7 輸入修改會員資料畫面
B、演算法
Key In 欲修改之資料 Click 修改資料 {
If 更改正確 Then
將更改過的資料覆蓋至原資料 Display 修改成功介面
End If }
C、輸出畫面
圖4.8 會員資料修改成功畫面
4. 查詢登入密碼
在會員登入的頁面中，若點選查詢密碼的超連結，會出現下列畫面，
在使用者輸入姓名或是E-mail 帳號，按下傳送按鈕後，就可以得到 輸出畫面。
A、輸入畫面
圖4.9 查詢登入密碼輸入畫面 B、演算法
Key In 會員姓名或電子信箱，並選擇顯示方式 Click 傳送
{
If 資料正確 Then Display 正確結果 Else
Display 錯誤畫面 End If
}
C、輸出畫面
圖4.10 查詢結果畫面
4.2 租屋刊登子系統實作
在房東完成了註冊動作成了會員後，便可以進入此子系統，此子系
統提供了房屋資料的新增、修改或是若已出租後的確認動作，讓會員 能夠在簡單的動作下完成出租的動作。
1. 新增房屋資料
在登入成功後的畫面中，點選新增房屋資料的超連結，就可進入以 下的表單畫面，而在正確填完新增的資料後，按下新增的按鈕後，
就可以得到輸出畫面。
A、輸入畫面
圖4.11 新增房屋資料輸入畫面
B、演算法
Key In 欲新增之房屋資料 Click 新增
{
If 輸入資料正確 Then
將此筆資料寫入房屋資料表內 Display 新增成功畫面
Else
Display 錯誤訊息 End If
}
C、輸出畫面
圖4.12 新增房屋資料成功畫面
2. 查詢、修改、上傳地圖及確認出租房屋資料 (1) 查詢房屋資料
在登入成功的畫面中，點選您的租屋資訊，便可以得到輸出畫面。
A、輸入畫面
圖4.13 查詢房屋資料畫面
B、演算法
Click 您的租屋資訊 Then
將您的帳號與房屋資料表內的帳號欄位比較 Display 您所有的房屋資訊
C、輸出畫面
圖4.14 查詢房屋資料結果
(2) 修改房屋資料
而在查詢房屋的結果畫面中，若點選修改房屋資料，便可以得到下 面的表單，在正確填妥資料後，按下修改資料按鈕，就可得到輸出 畫面。
A、 輸入畫面
圖4.15 修改房屋資料輸入畫面 B、 演算法
Key In 欲修改之資料 Click 修改
{
If 輸入資料正確 Then
將更改過的資料覆蓋至原資料上 Display 修改成功畫面
End If }
C、 輸出畫面
圖4.16 修改房屋資料完成畫面
(3) 確認出租房屋
在查詢房屋的結果畫面中，若點選確認出租資料的超連結，就可以 得到下列輸入畫面，在按下確定已出租的按鈕後，就會出現輸出的 畫面。
A、 輸入畫面
圖4.17 確認房屋資料畫面
B、 演算法
Click 確認出租 Then
Display 已將出租訊息告知管理員 C、輸出畫面
圖4.18 確認成功畫面
(4) 上傳地圖
在查詢房屋的結果畫面中，若點選上傳地圖的超連結，就可以得 到下列輸入畫面，在選好要上傳之圖片後，按下上傳的按鈕後，就會 出現輸出的畫面。
A、輸入畫面
圖4.19 上傳地圖輸入畫面 B、演算法
Key In 欲上傳之圖片檔名 Click 上傳
{
將上傳之圖片寫入資料庫 }
Display 上傳成功畫面
C、輸出畫面
圖4.20 上傳地圖輸出畫面
4.3 租屋查詢子系統實作
這個子系統主要是給使用者依照型態、大小、租金等，來選擇自已 想要的房屋，再依照查詢的結果自行與房東(會員)聯絡，完成租屋的交 易。
1. 租屋查詢管理
使用者可在選擇自已的需求後，查詢本站的出租資料，為了讓使 用者更了解附近的地理狀況，我們也提供了地圖的功能。
在首頁中，點選詳細租屋查詢的超連結後，使用者就可以進入以下 的輸入畫面，而在以下拉式選單選擇完所需要的房屋後，按下查詢鈕 就可以得到多筆查詢結果，而在按下每筆後方的詳細資料超連結後，
就可以得到它的詳細資料，並且在詳細資料中還有一地圖的連結可供 使用者查詢。
A、輸入畫面
圖4.21 租屋查詢輸入畫面
B、演算法
選擇欲查詢之租屋條件 Click 查詢
{
將所選的項目與房屋資料表做比較 Display 所查詢後的結果
}
C、 輸出畫面
圖4.22 查詢結果畫面 按下詳細情況後之頁面如下：
圖4.23 詳細情況輸出畫面
在按下詳細情況後，可點選地圖之超連結查看該地址之位址：
圖 4.24 查詢結果之地圖畫面
4.4 討論區子系統實作
討論區的目的是讓會員與使用者可以互相提供建議、批評，以增加
我們租屋系統租賃房屋的品質，也可讓每個使用者了解每個房東的優 與劣。
1. 討論區管理
在首頁中按下討論區之超連結後，便可進入以下輸入畫面，若要回 覆他人所發表的主題，只需點選「閱讀留言及加入討論」之超連結，
若要發表新文章，則點選「發表新文章」之超連結便可進入其頁面。
A、輸入畫面
圖 4.25 討論區首頁畫面
B、演算法
選擇所要加入的討論區或發表新的文章 輸入欲發表之主題、作者、內容
Click 發表 {
將所發表之內容寫入討論區資料表 }
C、輸出畫面
圖4.26 發表文章完成畫面
4.5 網管子系統實作
此之系統之目的為方便系統管理員可在線上直接管理，不必在資料
庫內找詢要處理的資料，只要輸入幾個特定的項目，就可以依管理員 的需求找到符合的項目。
1. 管理員登入動作
在首面按下管理員登入的超連結後，就可進入以下輸入畫面，在填 妥管理員帳號及密碼後，就可以進入輸出之畫面。
A、輸入畫面
圖 4.27 管理員登入畫面
B、演算法
Key In 管理員帳號及密碼 Click 登入
{
If 資料正確 Then Display 成功畫面 End If
}
C、輸出畫面
圖4.28 登入成功畫面
2. 查詢及刪除房屋或會員資料
(1) 查詢所有會員資料
管理員登入成功後，可以點選「查詢所有會員資料」超連結，便可 得到所有會員資料的結果，也就是輸出畫面。
A、輸入畫面
圖4.29 選擇欲查詢之資料畫面 B、演算法
Click 查詢所有會員資料 Then Display 所有的會員資料 C、輸出畫面
圖4.30 查詢所有會員資料結果
(2) 查詢所有房屋資料
管理員登入成功後，可以點選「查詢所有房屋資料」超連結，便可得 到所有房屋資料的結果，也就是輸出畫面。
A、輸入畫面 如圖 4.28 B、演算法
Click 查詢所有房屋資料 Then Display 所有的房屋資料
C、輸出畫面
圖4.31 查詢所有房屋資料結果
(3) 依輸入帳號或日期查詢資料
管理員登入成功後，可以在「輸入會員帳號」或「以登錄日期查 詢」的欄位中輸入欲查詢之帳號或是日期，便可以得到輸出畫面。
A、輸入畫面 如圖 4.28 B、演算法
Key In 所要查詢之帳號或日期 Click 查詢
{
If 輸入之帳號正確 Then
Display 該會員之房屋資料或該日期所新增之房屋資料 Else
Display 錯誤畫面 End If
}
C、輸出畫面
圖 4.32 依輸入帳號查詢結果
圖 4.33 依輸入登錄日期查詢結果
第五章 系統評估