## 專題選題
選擇題目：電影評分網站
參考外國IMDB網站
製作一個類似網站

# github
https://github.com/rapidglight/Moive_project.git

# 使用goole cloud架設網站
目前電影只有一百五十筆資料
使用goole cloud free server
藉由linux 系統
架設測試網站
http://34.27.206.227/

可用

帳號1234 
密碼1234

做測試

# **主頁**
# 大標題都是一個頁面

https://freefrontend.com/tailwind-sliders/
點右上角

# **會員/登入登出/註冊**
樣板 : https://codepen.io/mamislimen/pen/jOwwLvy
登入成功跳回主頁

---

樣板: https://codepen.io/yuhomyan/pen/ExKvNVa

**範例 :**
會員登入功能已看過清單/已評分清單
click watchlist 跳轉已評分清單頁面

---

# **已看過清單**
**範例 :**
樣板:
電影圖片: https://codepen.io/gayane-gasparyan/pen/wvxewXO

---

click ratinglist 跳轉已評分清單頁面
# **已評分清單**
**範例 :**
樣板:
電影圖片: https://codepen.io/gayane-gasparyan/pen/wvxewXO

---

# **排行榜** 待新增

---

# **搜尋 (在主頁面)**
打入你的關鍵字(電影名稱)
**範例 :**
滑鼠點電影跳轉頁面
樣板:https://codepen.io/liamj/pen/vYYLGZj

---

# **電影資料頁面**


電影基本介紹
**範例 :**

樣板:
https://freefrontend.com/css-movie-cards/

---

評分電影(0-10)

**範例 :**
樣板:https://codepen.io/LukyVj/pen/bGxwWVv

---

(網站平均評分/你是否評過分)

沒有評過分的話click評分，彈出視窗

**範例 :**
樣板: (只有code)
https://codepen.io/GeoffreyCrofte/pen/ALOggg
https://freefrontend.com/css-star-ratings/

---

會員是否評論過?

1.沒有的話撰寫評論(50以內)，

2.有的話可以修改評論
樣板: 待新增

---

# **資料庫內容**

# diagram : https://dbdiagram.io/d/64a3940602bd1c4a5e72612b

# 注意事項(記得詳讀)

1. **記得movie_name 用英文**
1. **age(電影分級制度) 請自行轉成英文字母**
1. **movie_long自行轉成分鐘數**
4. 找**Romance Comedy Drama Action**
盡量讓資料量有的只有一個分類 有的有2個分類以上
3個分類 :
2個分類 :
4. **斜體是欄位名字 粗體是型態**
5. 圖片盡量找 .jpg .png
6. 建立 table : movie

---

* `Table :` movie **(依照上圖舉例)**
* `column :`
* 1. *movie_id* **int**
舉例 : 1、2、3...(第一筆、第二筆...)
* 2. *movie_name* **varchar(100)**
舉例 : top gun
* 3. *image_url* **varchar(999)**
舉例 : https://upload.wikimedia.org/wikipedia/zh/thumb/1/1d/Top_Gun_poster.jpg/220px-Top_Gun_poster.jpg 從維基找來的
* 4. *year* **int**
舉例 : 1986
* 5. *age* **varchar(10)**
舉例 : **12+** 根據電影分級制度 **PG-13**
* 6. *movie_long* **varchar(10)**
舉例 : 1h49m = 109m
* 7. *movie_category_Romance* **tinyint(1)**
* 8. *movie_category_Comedy* **tinyint(1)**
* 9. *movie_category_Drama* **tinyint(1)**
* 10. *movie_category_Action* **tinyint(1)**
舉例 : 分類有 drama 跟 action 所以 drama action設定成1 其他設定成0
* 11. *movie_description* **varchar(999)**
舉例 : As students at the United States Navy's elite fighter weapons school compete to be best in the class, one daring young pilot learns a few things from a civilian instructor that are not taught in the classroom.
* 12. *movie_director* **varchar(50)**
舉例 : Tony Scott
* 13. *movie_cast* **varchar(200)**
舉例 : Tom Cruise、Tim Robbins、Kelly McGillis

* `Constraints(限制) :` **Primary key(movie_id)**

---

* `Table` : user_watch_list **(不用建立資料)**
* `column` :
* 1. *watch_list_id* **int**
* 2. *user_account* **varchar(20)**
* 3. *user_watch_movie_name* **varchar(100)**
* ` Constraints(限制)` : **Primary watch_list_id**

---

* ` Table` : user_rating_list **(不用建立資料)**
* `column` :
* 1. *rating_list_id* **int**
* 2. *user_account* **varchar(20)**
* 3. *user_rating_movie_name* **varchar(100)**
* `Constraints(限制)` : **Primary key(rating_list_id)**

---

**最後記得匯出sql檔案**

最後成品
# 主頁

主頁有網站排行榜
會排名網站評分前5名 點圖片會跳轉電影頁面

主頁有評論排行榜
會排名網站評論最多前5名 點圖片會跳轉電影頁面

主頁的中間會隨機從資料庫撈出9筆電影資料 點圖片會跳轉電影頁面

右上角有按鈕清單

點開後

# 訪客模式
## 功能

#### 搜尋
輸入關鍵字或跑出符合字串的電影
點擊go 跳出
點擊名字 跳轉電影詳細頁面
可以看到網站使用者平均評分
可以看到網站使用者的評論

#### 近期瀏覽
你所有點擊過的電影頁面都會記錄在主頁

clear all 可以清掉所有紀錄

#### 從分類找尋電影

電影頁面中電影的類型

點擊電影的類型(Action) 跳轉到電影類型頁面
畫面上是所有屬於Action的電影 總共65筆結果 點擊圖片會跳到電影頁面

在點擊drama按鈕後，會顯示同時屬於action drama分類的電影 總共25筆結果 點擊圖片會跳到電影頁面

在點擊drama一次，會還原成只有action 分類電影的資料

---

# 會員模式

從按鈕清單點擊登入後或跳轉登入頁面

點擊回到首頁會回到主頁

如果沒有帳號密碼就註冊帳號密碼並填寫mail


點擊sign up


點擊Login切換到login介面


點擊Login按鈕後跳轉到主頁


## 功能(包含訪客功能)

#### 你的觀看清單

登入後 點擊右上角按鈕清單裡的觀看清單


跳轉到觀看清單頁面


裡面紀錄你觀看的電影 點擊電影圖片可以跳轉到電影頁面


左上角的remove按鈕可以把電影從觀看清單移除

點擊remove


在從右上角按鈕清單跳轉觀看清單頁面


可以看到剛剛的電影已經從清單裡移除

#### 你的評論清單

頁面會顯示你評論過的電影

#### 電影評分/撰寫評論

一樣跳轉到電影頁面


網站無人評分
你並未對此電影評分

滑鼠滑到星星上打4分


點擊後會reload頁面變成


點擊新增/修改評論


點擊OK後會再電影頁面下方顯示評論(修改也是一樣的方法)