---
# System prepended metadata

title: 學生選課系統 (ASP.NET MVC)

---

# 學生選課系統 (ASP.NET MVC)
---



-   簡介
-   功能介紹
>




#  簡介
---
:::    success
本系統開發對象為提供某教育單位(例如:學校、補習班等…)的學生選課用途，搭配先前開發的WPF課程管理系統可更方便的進行課程管理
(WPF課程管理系統簡介: https://hackmd.io/@Adien/rJaIlCxRo)
- 開發工具使用微軟的**Visual Studio 2022**
- 程式語言 : **C#**
- 開發專案使用 ASP.NET MVC 
- 資料庫使用MSSQL
- UI介面套用Bootstrap 5.2.3版(使用RWD設計)
- 採三層式架構
- 套用Entity Framework Core(ORM框架)結合LINQ語法


:::

# 功能介紹
---
:::info


### 首頁


![](https://i.imgur.com/2fQCwuw.png)




:::

:::info


### 學生註冊
在首頁右上角按下**登入**進入登入畫面

![](https://i.imgur.com/vZaZKHp.png)



在下方按下註冊後進入註冊畫面

![](https://i.imgur.com/PMxRd4Y.png)


除了手機號碼，其他的物件屬性皆設定為[Required]

![](https://i.imgur.com/GrLpavq.png)
基本除錯

![](https://i.imgur.com/acz4jdp.png)


填寫完資料後按下**建立**後，網頁會自動跳轉到**登入頁面**

:::

:::info


### 學生登入
- 使用剛剛創建的帳號進行登入

![](https://i.imgur.com/YJdH09s.png)


- 登入後畫面會跳轉到首頁，並在header最右側顯示登入者名稱

![](https://i.imgur.com/cvbGZ63.jpg)




:::

:::info


###    查詢功能
- 首頁會從資料庫中拿取開課的資料並顯示畫面中
![](https://i.imgur.com/z9WVWNC.png)



- 可使用查詢功能進行查詢

![](https://i.imgur.com/TlHPFTW.jpg)





:::


:::info


###    選課
- 選擇想要購買的課程後按下**購買課程**，會跳出課程簡介，再按下**我要購買**

![](https://i.imgur.com/a2uqj6L.png)

- 待網頁提示購課成功，表示購課完成

![](https://i.imgur.com/YgqSw0K.jpg)




:::

:::warning
###    注意!!
- 若未登入，課程簡介中則不會顯示可購買課程的選項

![](https://i.imgur.com/H2Fxefo.png)



:::

:::info
###    刪除課程

- 在header右側點選下拉選單，選擇**我的課表**查看剛剛購買的課程

![](https://i.imgur.com/BFStwIz.png =70%x)

![](https://i.imgur.com/HvrPXSb.png)

- 選擇不想要的課程進行退課

![](https://i.imgur.com/RxXX4o3.png)





:::


:::info
###    編輯學生資訊

- 在header右側下拉選單中，選擇編輯個人資訊，進入個人資訊編輯頁面

![](https://i.imgur.com/4MnyfpJ.png =60%x)

![](https://i.imgur.com/vJWezTP.png)



- 修改個人資訊(此處修改手機號碼)，按下確認修改

![](https://i.imgur.com/WWRjmbF.png =70%x)

- 在頁面中確認剛剛修改的資料顯示在網頁資訊中表示修改完成

![](https://i.imgur.com/w06Yy1I.png =70%x)



:::

:::info
###    變更密碼
- 在header右側下拉選單中，選擇**變更密碼**，進入變更密碼頁面

![](https://i.imgur.com/dPsCj3m.png)
![](https://i.imgur.com/9kiiu6a.png)
- 基本除錯會顯示在上方黃色區塊中

![](https://i.imgur.com/RGYIHE4.png)

- 確認舊密碼與新密碼無誤後，按下**變更**

![](https://i.imgur.com/Y5uKbeI.png)

- 若密碼變更完成，網頁會自動將使用者登出並回到首頁

![](https://i.imgur.com/HsrkEmK.png)

- 在header右側選擇登入測試剛剛變更的新密碼是否可用

![](https://i.imgur.com/Gm7RGAQ.png)
- 使用者可使用新密碼登入表示密碼變更成功

![](https://i.imgur.com/PWDTqgj.jpg)




:::



:::   info


###    登出

- 在header右側下拉選單中，選擇**登出**

![](https://i.imgur.com/MCsh7Z6.png =60%x)
- 系統會將使用者登出，並回到首頁

![](https://i.imgur.com/UHZ5NQ4.png)



:::








