實作 Flask 框架連結資料庫的網站

學習目標：

• 了解 Flask 框架連結資料庫的用法！
• 實作網站CRUD功能！

Flask 框架連結資料庫

1. 修改 app/router.py 內容，在檔尾增加下列程式內容：

   (前方略過....)
   # 導向查詢菜單內容的網頁
   @app.route("/showmenu")
   def showmenu():
       menulists = connectDB.showallMenu()
       return render_template("menu.html", menulist=menulists)
   

2. 新增 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 %}
   

3. 推送上 Heroku 專案！利用瀏覽器查看站台: https://你的app.herokuapp.com/showmenu
4. 修改 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 %}
   

5. 推送上 Heroku 專案！利用瀏覽器查看站台: https://你的app.herokuapp.com/showmenu

實作 CRUD 連結資料庫

1. 新增 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>
   

2. 修改 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")
   

3. 推送上 Heroku 專案！利用瀏覽器查看站台: https://你的app.herokuapp.com/showmenu
4. 修改 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)
   

5. 修改 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 %}
   

6. 推送上 Heroku 專案！利用瀏覽器查看站台: https://你的app.herokuapp.com/showmenu