- 了解 Flask 框架連結資料庫的用法！
- 實作網站CRUD功能！
Flask 框架連結資料庫
- 修改 app/router.py 內容，在檔尾增加下列程式內容：
(前方略過....) # 導向查詢菜單內容的網頁 @app.route("/showmenu") def showmenu(): menulists = connectDB.showallMenu() return render_template("menu.html", menulist=menulists) - 新增 app/templates/menu.html 檔案，內容如下：
{% extends "base.html" %}
{% block title %}大學麵店菜單系統{% endblock %}
{% block main %}
<div class="container my-5 py-5">
<div class="row">
<div class="rol">
<h1>菜單列表</h1>
</div>
</div>
{% for menu in menulist %}
<div class="row">
{% for item in menu %}
<div class="col">
<p>{{ item }}</p>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
{% endblock %} - 推送上 Heroku 專案！利用瀏覽器查看站台: https://你的app.herokuapp.com/showmenu
- 修改 app/templates/menu.html 檔案，增加巨集內容(macro)如下：
{% extends "base.html" %}
{% block title %}大學麵店菜單系統{% endblock %}
{% block main %}
<!-- 宣告巨集 -->
{% macro show_row(data, tag) -%}
{% for menu in data %}
<div class="row">
{% for item in menu %}
<div class="col">
<{{ tag }}>{{ item }}</{{ tag }}>
</div>
{% endfor %}
</div>
{% endfor %}
{%- endmacro %}
<!-- 宣告結束 -->
<div class="container my-5 py-5">
<div class="row">
<div class="rol">
<h1>菜單列表</h1>
</div>
</div>
<!-- 顯示菜單用 -->
{% set cols = (("菜單項次","菜單名稱","價錢/每碗"),)%}
{{ show_row(cols, "h2") }}
<hr class="my-4">
{{ show_row(menulist,"p") }}
</div>
{% endblock %} - 推送上 Heroku 專案！利用瀏覽器查看站台: https://你的app.herokuapp.com/showmenu
實作 CRUD 連結資料庫
- 新增 app/templates/addmenu.html 檔案，內容如下：
<form action="/addmenu" method="post">
<label for="menuname">菜單名稱</label>
<input type="text" id="menuname" placeholder="請輸入菜單名稱" name="menuname">
<br>
<label for="menuprize">菜單價錢</label>
<input type="text" id="menuprize" placeholder="請輸入價格" name="menuprize">
<br>
<input type="submit" value="送出">
</form> - 修改 app/router.py 內容，在檔尾增加下列程式內容：
(前方略過....) # 新增菜單內容的網頁 @app.route("/addmenu", methods=['GET', 'POST']) def addmenu(): if request.method == 'POST': data = "" for key, value in request.form.items(): print(value) data += value data += ',' data = data[:-1] connectDB.addMenu(data) print(data) menulists = connectDB.showallMenu() return render_template("menu.html", menulist=menulists) else: return render_template("addmenu.html") - 推送上 Heroku 專案！利用瀏覽器查看站台: https://你的app.herokuapp.com/showmenu
- 修改 app/router.py 內容，在檔尾增加下列程式內容：
(前方略過....) # 刪除菜單內容的網頁 @app.route("/delmenu", methods=['GET', 'POST']) def delmenu(): if request.method == 'POST': print(request.form) data = "" data1 = "" for key, value in request.form.items(): data = eval(''.join(value)) data1 = str(data[0])+','+str(data[1]) print(data1) connectDB.deleteMenu(data1) menulists = connectDB.showallMenu() return render_template("menu.html", menulist=menulists) - 修改 app/templates/menu.html 檔案，內容如下：
{% extends "base.html" %}
{% block title %}大學麵店菜單系統{% endblock %}
{% block main %}
<!-- 宣告巨集 -->
{% macro show_row(data, tag) -%}
{% for menu in data %}
<div class="row">
{% if menu[3] == 'Action' %}
{% for item in menu %}
<div class="col">
<{{ tag }}>{{ item }}</{{ tag }}>
</div>
{% endfor %}
{% else %}
{% for item in menu %}
<div class="col">
<{{ tag }}>{{ item }}</{{ tag }}>
</div>
{% endfor %}
<div class="col">
<button type="submit" value="{{ menu[1],menu[2] }}" name="deldata">刪除</button>
</div>
{% endif %}
</div>
{% endfor %}
{%- endmacro %}
<!-- 宣告結束 -->
<div class="container my-5 py-5">
<div class="row">
<div class="rol">
<h1>菜單列表</h1>
</div>
</div>
<!-- 顯示菜單用 -->
{% set cols = (("菜單項次","菜單名稱","價錢/每碗","Action"),)%}
{{ show_row(cols, "h2") }}
<hr class="my-4">
<form action="/delmenu" method="post">
{{ show_row(menulist,"p") }}
</form>
<form action="/addmenu" method="get">
<input type="submit" value="新增菜單">
</form>
</div>
{% endblock %} - 推送上 Heroku 專案！利用瀏覽器查看站台: https://你的app.herokuapp.com/showmenu
