---
# System prepended metadata

title: 專題製作
tags: [study]

---

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


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

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

可用
```
帳號1234 
密碼1234
```
做測試



# **主頁**
# 大標題都是一個頁面
![](https://hackmd.io/_uploads/Bk5AYrzY3.png)

https://freefrontend.com/tailwind-sliders/
點右上角
![](https://hackmd.io/_uploads/HJHZcBzK2.png)


# **會員/登入登出/註冊**
樣板 : https://codepen.io/mamislimen/pen/jOwwLvy
![](https://hackmd.io/_uploads/rJyvI2s_2.png)
![](https://hackmd.io/_uploads/By7O83ouh.png)
登入成功跳回主頁


---


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

**範例 :**![](https://hackmd.io/_uploads/SkOVL2sd3.png)
會員登入功能已看過清單/已評分清單
click watchlist 跳轉已評分清單頁面




---

# **已看過清單**
**範例 :**![](https://hackmd.io/_uploads/Hk09wnjO3.png)
樣板:
電影圖片: https://codepen.io/gayane-gasparyan/pen/wvxewXO


---


click ratinglist 跳轉已評分清單頁面
# **已評分清單**
**範例 :**![](https://hackmd.io/_uploads/rkQAw3o_2.png)
樣板:
電影圖片: https://codepen.io/gayane-gasparyan/pen/wvxewXO


---

# **排行榜**  待新增



---



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



---

# **電影資料頁面**

![](https://hackmd.io/_uploads/rkaVkIMK2.png)







電影基本介紹
**範例 :**![](https://hackmd.io/_uploads/S1bc3njuh.png)
![](https://hackmd.io/_uploads/r1ton3jd2.png)

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


---

評分電影(0-10)

**範例 :**![](https://hackmd.io/_uploads/H1i2pnj_n.png)
樣板:https://codepen.io/LukyVj/pen/bGxwWVv



---

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

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

**範例 :**![](https://hackmd.io/_uploads/r1A6Chi_h.png)
樣板: (只有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(電影分級制度) 請自行轉成英文字母**
  ![](https://hackmd.io/_uploads/Hyf91Qnuh.png)
1. **movie_long自行轉成分鐘數**
4.  找**Romance Comedy  Drama Action**
   ![](https://hackmd.io/_uploads/B1bYBWT_2.png)
   盡量讓資料量有的只有一個分類 有的有2個分類以上
   3個分類 :![](https://hackmd.io/_uploads/SJd0SbTd3.png)
   2個分類 :![](https://hackmd.io/_uploads/Syne8-a_3.png)   
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檔案**

最後成品
# 主頁
![](https://hackmd.io/_uploads/SyoMnUko3.png)

主頁有網站排行榜
![](https://hackmd.io/_uploads/HJ8PewJon.png)
會排名網站評分前5名 點圖片會跳轉電影頁面

主頁有評論排行榜
![](https://hackmd.io/_uploads/B1Mclvysn.png)
會排名網站評論最多前5名 點圖片會跳轉電影頁面


![](https://hackmd.io/_uploads/H1aqzw1s2.png)
主頁的中間會隨機從資料庫撈出9筆電影資料 點圖片會跳轉電影頁面

右上角有按鈕清單
![](https://hackmd.io/_uploads/ByZSmDkin.png)

點開後 
![](https://hackmd.io/_uploads/HJyDQvks2.png)






# 訪客模式
## 功能

#### 搜尋
輸入關鍵字或跑出符合字串的電影
![](https://hackmd.io/_uploads/BkEZ6L1ih.png)
點擊go 跳出
![](https://hackmd.io/_uploads/B1jPaI1in.png)
點擊名字 跳轉電影詳細頁面
![](https://hackmd.io/_uploads/H19ia81in.png)
可以看到網站使用者平均評分
![](https://hackmd.io/_uploads/rJkZyPki2.png)
可以看到網站使用者的評論
![](https://hackmd.io/_uploads/SkorGPJsn.png)


#### 近期瀏覽
![](https://hackmd.io/_uploads/S1TWCUks2.png)
你所有點擊過的電影頁面都會記錄在主頁

clear all 可以清掉所有紀錄
![](https://hackmd.io/_uploads/SJg80L1i2.png)

#### 從分類找尋電影

電影頁面中電影的類型
![](https://hackmd.io/_uploads/H18iEF1o3.png)

點擊電影的類型(Action) 跳轉到電影類型頁面
![](https://hackmd.io/_uploads/S1QlSKJi2.png)
畫面上是所有屬於Action的電影 總共65筆結果 點擊圖片會跳到電影頁面


在點擊drama按鈕後，會顯示同時屬於action drama分類的電影 總共25筆結果 點擊圖片會跳到電影頁面
![](https://hackmd.io/_uploads/r1UtHF1s2.png)

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








---


# 會員模式

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

![](https://hackmd.io/_uploads/rktbVvJjh.png)
點擊回到首頁會回到主頁

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

![](https://hackmd.io/_uploads/SJd9Ev1i3.png)

點擊sign up

![](https://hackmd.io/_uploads/HkB24vkoh.png)

點擊Login切換到login介面

![](https://hackmd.io/_uploads/ryCCNvyih.png)

點擊Login按鈕後跳轉到主頁

![](https://hackmd.io/_uploads/BkP2BwJi3.png)


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

#### 你的觀看清單

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

![](https://hackmd.io/_uploads/H193Ovyj2.png)

跳轉到觀看清單頁面

![](https://hackmd.io/_uploads/r1m1FP1j2.png)

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

![](https://hackmd.io/_uploads/H1JFYvysn.png)

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

點擊remove

![](https://hackmd.io/_uploads/B1GhYD1in.png)

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

![](https://hackmd.io/_uploads/H1LQqw1j3.png)

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


#### 你的評論清單


頁面會顯示你評論過的電影
![](https://hackmd.io/_uploads/rJpA8FJsn.png)


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


一樣跳轉到電影頁面

![](https://hackmd.io/_uploads/r1jaqD1s2.png)

網站無人評分
你並未對此電影評分
![](https://hackmd.io/_uploads/rJIKsvJih.png)

滑鼠滑到星星上打4分

![](https://hackmd.io/_uploads/S1tpoPJjn.png)

點擊後會reload頁面變成

![](https://hackmd.io/_uploads/Sylf2P1on.png)

點擊新增/修改評論


![](https://hackmd.io/_uploads/ryUU3wys2.png)

點擊OK後會再電影頁面下方顯示評論(修改也是一樣的方法)
![](https://hackmd.io/_uploads/SkiCnPyi3.png)


























