title: Flask HTML Template to fill in MySQL records
body: <p>How can I fill in {{ }} in HTML with values from a MySQL DB. The app is written in Flask, Python version 2.7.13.  Flask 0.12.2</p>
  <p>when browsing to <a href="http://127.0.0.1:5000/emp" rel="nofollow noreferrer">http://127.0.0.1:5000/emp</a> I only get the hard coded HTML   tags.</p>
  <p><strong>I would like to display employees ID, First Name and Last Name in HTML Table via the Flask framework</strong></p>
  <p><strong>Please see Python code below:</strong></p>
  <pre><code>from flask import Flask,  request, render_template
  import MySQLdb
  
  app = Flask(__name__)
  
  
  def db():
      db = MySQLdb.connect(host=&quot;localhost&quot;,
                           user=&quot;someone&quot;,
                           passwd=&quot;something&quot;,
                           db=&quot;inventory&quot; )
  
      cursor = db.cursor()
  
      cursor.execute(&quot;SELECT ID, First_Name, Last_Name from employees&quot;)
  
      rows = cursor.fetchall()
  
      db.close()
  
      return rows
      
  
  rows = db()
  
  for row in rows:
      #print(row)
      print str(row[0]) + &quot; - &quot; + row[1] + &quot; &quot; + row[2]
  
  @app.route('/emp', methods=['GET'])
  def emp():
          
      return render_template ('inventory.html')
  
  
  if __name__ == '__main__':
      app.run(debug = True)
  </code></pre>
  <p><strong>Here is the HTML Template</strong></p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset = &quot;utf-8&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css&quot; /&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css&quot; /&gt;
      &lt;title&gt;Inventory Database&lt;/title&gt;
      &lt;style type=&quot;text/css&quot;&gt;
          body { background-color: white; }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body class=&quot;body&quot;&gt;
      &lt;div class=&quot;jumbotron text-center&quot;&gt;
          &lt;div class=&quot;page-header&quot;&gt;
              &lt;h3 class=&quot;text-primary&quot;&gt;Inventory Management Database: All Employees &lt;/h3&gt;
          &lt;/div&gt;
          &lt;table class=&quot;table table-striped table-bordered table-hover&quot;&gt;
              &lt;tr&gt;
                  &lt;th&gt;ID&lt;/th&gt; 
                  &lt;th&gt;First Name&lt;/th&gt;
                  &lt;th&gt;Last Name&lt;/th&gt;              
              &lt;/tr&gt;
              
              &lt;tr&gt;
                  &lt;th&gt;1&lt;/th&gt; 
                  &lt;th&gt;Alex&lt;/th&gt;
                  &lt;th&gt;Smith&lt;/th&gt;      
              &lt;/tr&gt;
          
              {% for emp in employees %}
                  &lt;tr&gt;
                      &lt;td&gt;{{ID}}&lt;/td&gt;
                      &lt;td&gt;{{First_Name}}&lt;/td&gt;
                      &lt;td&gt;{{Last_Name}}&lt;/td&gt;
                  &lt;/tr&gt;
              {% endfor %}
          
              
                                      
                    
          &lt;/table&gt;
          
      &lt;/div&gt;  
     
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>