第九週習題(/week08, /week09, /week10)
還原現場 .. ( 04/19 上課過程 )
( 可以按滑鼠右鍵選檢視網頁原始碼看看網頁內容 )
注意, 用 <font size=8 或 比 8 大的都被看作 7,
如要更大的字必須用 CSS 例如 In Line CSS 的 style="font-size:88px;" 取代 font 的 size= 參數 !
本週的練習題請用之前最後版的網頁(例如 w6.py)來修改, 可以改為 w9.py 或自己喜歡的名稱 !
這次要增加三個網頁, 放在 /static 之下, 但要用轉址方式變方便使用,
注意這裡說的 /static 其實是在我們 Web Root 目錄(這次上課我們用 ggyy 目錄做 Web Root)之下;
在 /static 目錄之下的各子目錄名稱可以自取, 為了方便解說,
以下我在 /static 之下建立三個子目錄: 08, money, 和 wk10 用來放這三個網頁
: 1.) /week08 轉址到 /static/08/index.html
說明: 這網頁要放與第八週上課主題有關, 就是和辦公室用的軟體相關的,
你可以看看 Syllabus 內第八週的各項目, 選一些當 Keyword 搜尋別人寫的教學網頁來整理成自己的網頁!
2.) /week09 轉址到 /static/money/index.html
說明: 這網頁要放與第九週上課主題有關, 就是和利用 Google 來賺錢有關的,
你可以看看 Syllabus 內第九週的各項目, 選一些當 Keyword 搜尋別人寫的教學網頁來整理成自己的網頁!
3.) /week10 轉址到 /static/wk10/index.html
說明: 這網頁要放與第十週上課主題有關, 就是和 Web 應用以及網路有關的,
你可以看看 Syllabus 內第十週的各項目, 選一些當 Keyword 搜尋別人寫的教學網頁來整理成自己的網頁!
以下是上課操作Demo 本週要做的習題之大略過程:
(1)開啟一個 CMD 命令視窗, 建立一個目錄 ggyy 當作網站根目錄 (Web Root)
(2)進入(cd)該 ggyy 目錄, 在 ggyy 目錄內建立 templates 和 static 子目錄備用;
以前只用到 templates 子目錄, 這次主要是要用到 static 子目錄 !
(3)參考 w3.py 建立一個檔案 w9.py (注意, 做習題則要用你上次的版本來改)
(上課為了方便, 我只複製 w3.py 內一部份來用)
C:\User\user>mkdir ggyy
C:\User\user>cd ggyy
C:\User\user\ggyy>mkdir templates
C:\User\user\ggyy>mkdir static
C:\User\user\ggyy>copy con w9.py
from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route("/")
def webRoot( ):
return '<font color=Red size=7>Hello World! 這是網站喔 !'
if __name__ == "__main__":
app.run( '0.0.0.0' , port=33888) # <== 注意這改用 33888 喔!
^Z # <== 注意這是敲 CTRL_Z 表示 w9.py 到此結束
C:\User\user\ggyy>python w9.py
|
(4)執行 python w9.py 後出現錯誤, 說發現說有怪字, 那表示我們檔案的編碼不是 UTF-8
怎辦?
很簡單, 用記事本(notepad) 開啟 w9.py 然後另存新檔, 選擇編碼 UTF-8 存檔即可 !
(注意看是否存回原檔案喔! 因有時它會改存到 文件(Documents)資料夾內 !!!)
(5)利用 notepad 把 w9.py 的編碼改為 UTF-8 之後, 重新執行 python w9.py
又說有錯誤 !? 仔細看發現事說缺了 flask
太簡單了, 阿就立馬用 pip install 把 flask 安裝進去囉 ..
C:\User\user\ggyy>pip install flask
. . . (出現安裝 Flask 的信息)
. . .
. . .
C:\User\user\ggyy>python w9.py
|
(6)可以了ㄟ
趕快開瀏覽器打入 127.0.0.1:3388
奇怪 !? 怎說沒網頁 !?
仔細看, 靠餐ㄟ.. 發現要打 33888 才對啦
趕快重新打入 127.0.0.1:33888
喔 ! Yeah ! 有網頁了ㄟ !
(7)接下來, 修改 w9.py, 先加入給 /week08 用的:
@app.route("/week08")
@app.route("/week08/") # 理論上後面有 / 和沒 / 該一樣, 但 Flask 似乎有 Bug
def webPage_08( ):
return redirect "/static/08/index.html"
### 注意要加入在 w9.py 中間, 不要加到最後喔 !
|
(8)到 CMD 命令窗敲 CTRL_C 砍死 python 併重新執行 python w9.py
又出現錯誤, 說 return redirect 那句有錯 !?
(9)上網問 Google, 查詢 python + flask + redirect 找範例
發現原來我們少了刮號 ( ), 趕快修改並存檔重新執行
return redirect("/static/08/index.html")
|
(10)重新執行 python w9.py 發現又有錯, 說不認識 redirect
這也簡單, 要在 w9.py 檔案內很前面處加入以下這句即可:
from flask import redirect
|
(11)改好 w9.py 後重新執行 python w9.py
喔 ! Yeah ! 成功執行了,趕快測試網頁 !
(12)先測原先的網頁, 用瀏覽器打入 127.0.0.1
奇怪, 怎沒出現網頁 !?
仔細看, 發現漏掉了 :33888 啦 ! 重新打入 127.0.0.1:33888
果然好了, 又出現網頁了, 接著來測試 /week08
(13)改打入 127.0.0.1:33888/week08
出現 404 錯誤說找不到網頁ㄟ !?
這是因為我們還沒建立檔案 /static/08/index.html
注意瀏覽器的網址列, 有沒發現變了 !?
變成 127.0.0.1:33888/static/08/index.html
所以, 知道 redirect 的功用了吧, 就是轉址啦 !
幹嘛要轉址 !?
廢話, 當然是讓使用者不必打那麼長的網址啊 !
(14)趕快在 ggyy/static/08/ 這子目錄下建立一個網頁 index.html 即可,
要注意, 檔案編碼也要選 UTF-8
你可以把 w9.py 複製到 static/08/index.html 然後再修改其內容,
因為剛剛 w9.py 已經改為 UTF-8, 複製過去當然還是 UTF-8
先把該 static/08/index.html 內容改為簡單如下:
<html>
<font color=red style="font-size:68px;">這是 Week08
關於辦公室軟體
</font>
<hr style="border-top: 2px solid blue;">
<font color=blue size=6>
<a target=_blank href="http://www.nthu.edu.tw">點這會連到清華大學</a>
</font>
<br>
<img src="abc.jpg">
|
(15)把 ggyy/static/08/index.html 存檔之後, 回到網頁 127.0.0.1:33888/week08
按 F5 刷新網頁
喔 ! Yeah ! 有網頁了ㄟ ！
但怎網頁中有個怪怪的圖 !?
因為在 ggyy/static/08/ 子目錄下沒有 abc.jpg 啊 !?
到網路上用 google 找一張林志玲的圖片另存新檔選擇存到該子目錄且黨名指定 abc.jpg
再測試看看, 真的有林志玲了喔 !
＊好了, 其他 /week09 和 /week10 也可以依樣畫葫蘆做出來 !
只是要注意, 三個網頁要各自與該週上課主題相關 !
原則上就自己蒐尋相關網頁來略作整理成自己的網頁,
在自己的網頁內必要時讓讀者可以點了連過去原先你找來參考的網頁看更詳細內容 !
＊至於網頁相關語法, 其實只要懂大約七句左右就很夠用了,
請
點這裡看 簡單網頁設計教學 by tsaiwn@cs.nctu.edu.tw(在 Syllabus 的第一週就給過了)
(先仔細看過該簡單教學, 其他的就偶爾用滑鼠右鍵點選檢視網頁原始碼 偷看別人網頁 !)
或是在我們主要講義內也列了很多可學習網頁製作的連結
Q: 如果希望網址列打 /money 和 打 /week09 有相同效果那要如何改 w9.py ?
就是說, 希望
127.0.0.1:33888/money 和 打 127.0.0.1:33888/week09 相同 !
Hint: 很簡單, 只要加入一列喔 ! (若考慮最後可能打斜線 / 則再多加入一列 !)
Google 有 GMail, GoogleDrive, Googol Doc, 到底還有哪些服務 ?
G Suite vs Gmail Comparison Chart
國立交通大學G Suite 及 o365 帳號申請系統
您的身分為: 教職員
您的G Suite帳號為 tsaiwn@nctu.edu.tw
您的o365帳號為 tsaiwn@o365.nctu.edu.tw
|
Google G Suite Login
MicroSoft MS o365 Login
The Benefits of G Suite...
|