S21-App-9-Build-a-Data-Collector-Web-App-with-PostGreSQL-and-Flask.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# The Python Mega Course: Build 10 Real World Applications\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This notebook is a summary of [The Python Mega Course: Build 10 Real World Applciations](https://www.udemy.com/the-python-mega-course), a comprehensive online Python course taught by Ardit Sulce. Each lecture name is clickable and takes you to the video lecture in the course."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Section 21: Application 8: Build a Data Collector Web App with PostGreSQL and Flask\n",
    "***"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Program Demonstration](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This video lecture shows the finished version of the website running on a browser."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [PostGreSQL Database Web App with Flask: Steps](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The steps to build a wep app are roughly these:"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "1. Build the frontend with HTML and/or Javascript and CSS\n",
    "2. Build the structure of the backend with Python.\n",
    "3. Make sure the data sent by the frontend are being received correctly by Python.\n",
    "4. Create a database and a database table\n",
    "5. Send the data received by Python to the database table.\n",
    "6. Process the data with Python.\n",
    "7. Send processed data to the frontend."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Frontend: HTML Part](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "templates/index.html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "<!DOCTYPE html>\n",
    "<html lang=\"en\">\n",
    "  <title> Data Collector App</title>\n",
    "  <head>\n",
    "    <link href=\"../static/main.css\" rel=\"stylesheet\">\n",
    "  </head>\n",
    "    <body>\n",
    "      <div class=\"container\">\n",
    "        <h1>Collecting height</h1>\n",
    "        <h3>Please fill the entires to get population statistics on height</h3>\n",
    "        <form action=\"success.html\" method=\"POST\">\n",
    "          <input title=\"Your email will be safe with us\" placeholder=\"Enter your email address\" type=\"email\" name=\"email_name\" required> <br>\n",
    "          <input title=\"Your data will be safe with us\" placeholder=\"Enter your height in cm\" type=\"number\" min=\"50\", max=\"300\" name=\"height_name\" required> <br>\n",
    "          <button type=\"submit\"> Submit </button>\n",
    "        </form>\n",
    "      </div>\n",
    "    </body>\n",
    "</html>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "templates/success.html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "<!DOCTYPE html>\n",
    "<html lang=\"en\">\n",
    "  <title> Data Collector App</title>\n",
    "  <head>\n",
    "    <link href=\"../static/main.css\" rel=\"stylesheet\">\n",
    "  </head>\n",
    "    <body>\n",
    "      <div class=\"container\">\n",
    "        <p class=\"success-message\"> Thank you for your submission! <br>\n",
    "          You will receive an email with the survey results shortly.\n",
    "        </p>\n",
    "      </div>\n",
    "    </body>\n",
    "</html>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Frontend: CSS Part](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "static/main.css"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "html, body {\n",
    "  height: 100%;\n",
    "  margin: 0;\n",
    "}\n",
    "\n",
    ".container {\n",
    "  margin: 0 auto;\n",
    "  width: 100%;\n",
    "  height: 100%;\n",
    "  background-color: #006666;\n",
    "  color: #e6ffff;\n",
    "  overflow:hidden;\n",
    "  text-align: center;\n",
    "}\n",
    "\n",
    ".container h1 {\n",
    "  font-family: Arial, sans-serif;\n",
    "  font-size: 30px;\n",
    "  color: #e6ffff;\n",
    "  margin-top: 80px;\n",
    "}\n",
    "\n",
    ".container form {\n",
    "  margin: 20px;\n",
    "}\n",
    "\n",
    ".container input {\n",
    "  width: 350px;\n",
    "  height: 15px;\n",
    "  font-size: 15px;\n",
    "  margin: 2px;\n",
    "  padding: 20px;\n",
    "  transition: all 0.2s ease-in-out;\n",
    "}\n",
    "\n",
    ".container button {\n",
    "  width:70px;\n",
    "  height: 30px;\n",
    "  background-color: steelblue;\n",
    "  margin: 3px;\n",
    "}\n",
    "\n",
    ".success-message {\n",
    "  margin: 100px;\n",
    "}\n",
    "\n",
    ".email {\n",
    "  font-family: Arial, sans-serif;\n",
    "  font-size: 15px;\n",
    "  color:  #ff9999;\n",
    "  transition: all 0.2s ease-in-out;\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Backend: Getting User Input](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In this lecture we changed a line in `templates/index.html` from this:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "<form action=\"success.html\" method=\"POST\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To this:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "<form action=\"{{url_for('success')}}\" method=\"POST\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We also started building the `app.py` script:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from flask import Flask, render_template, request\n",
    "\n",
    "app = Flask(__name__)\n",
    "\n",
    "@app.route(\"/\")\n",
    "def index():\n",
    "    return render_template(\"index.html\")\n",
    "\n",
    "@app.route(\"/success\", methods=['POST'])\n",
    "def success():\n",
    "    if request.method == 'POST':\n",
    "        email = request.form[\"email_name\"]\n",
    "        height = request.form[\"height_name\"]\n",
    "        print(email, height)\n",
    "        return render_template(\"success.html\")\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.debug = True\n",
    "    app.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Backend: The PostGreSQL Database Model](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "app.py"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from flask import Flask, render_template, request\n",
    "from flask.ext.sqlalchemy import SQLAlchemy\n",
    "\n",
    "app = Flask(__name__)\n",
    "app.config['SQLALCHEMY_DATABASE_URI'] = 'postgresql://postgres:postgres123@localhost/height_collector'\n",
    "db = SQLAlchemy(app)\n",
    "\n",
    "class Data(db.Model):\n",
    "    __tablename__ = \"data\"\n",
    "    id = db.Column(db.Integer, primary_key=True)\n",
    "    email_ = db.Column(db.String(120), unique=True)\n",
    "    height_ = db.Column(db.Integer)\n",
    "\n",
    "    def __init__(self, email_, height_):\n",
    "        self.email_ = email_\n",
    "        self.height_ = height_\n",
    "\n",
    "@app.route(\"/\")\n",
    "def index():\n",
    "    return render_template(\"index.html\")\n",
    "\n",
    "@app.route(\"/success\", methods=['POST'])\n",
    "def success():\n",
    "    if request.method == 'POST':\n",
    "        email = request.form[\"email_name\"]\n",
    "        height = request.form[\"height_name\"]\n",
    "        print(email, height)\n",
    "        return render_template(\"success.html\")\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.debug = True\n",
    "    app.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Storing User Data to the Database](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Update your `templates/index.html` to this:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "<!DOCTYPE html>\n",
    "<html lang=\"en\">\n",
    "  <title> Data Collector App</title>\n",
    "  <head>\n",
    "    <link href=\"../static/main.css\" rel=\"stylesheet\">\n",
    "  </head>\n",
    "    <body>\n",
    "      <div class=\"container\">\n",
    "        <h1>Collecting height</h1>\n",
    "        <h3>Please fill the entires to get population statistics on height</h3>\n",
    "        <div class=\"email\"> {{text | safe}} </div>\n",
    "        <form action=\"{{url_for('success')}}\" method=\"POST\">\n",
    "          <input title=\"Your email will be safe with us\" placeholder=\"Enter your email address\" type=\"email\" name=\"email_name\" required> <br>\n",
    "          <input title=\"Your data will be safe with us\" placeholder=\"Enter your height in cm\" type=\"number\" min=\"50\", max=\"300\" name=\"height_name\" required> <br>\n",
    "          <button type=\"submit\"> Submit </button>\n",
    "        </form>\n",
    "      </div>\n",
    "    </body>\n",
    "</html>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Updated `app.py`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from flask import Flask, render_template, request\n",
    "from flask.ext.sqlalchemy import SQLAlchemy\n",
    "\n",
    "\n",
    "app = Flask(__name__)\n",
    "app.config['SQLALCHEMY_DATABASE_URI'] = 'postgresql://postgres:postgres123@localhost/height_collector'\n",
    "db = SQLAlchemy(app)\n",
    "\n",
    "class Data(db.Model):\n",
    "    __tablename__ = \"data\"\n",
    "    id = db.Column(db.Integer, primary_key=True)\n",
    "    email_ = db.Column(db.String(120), unique=True)\n",
    "    height_ = db.Column(db.Integer)\n",
    "\n",
    "    def __init__(self, email_, height_):\n",
    "        self.email_ = email_\n",
    "        self.height_ = height_\n",
    "\n",
    "@app.route(\"/\")\n",
    "def index():\n",
    "    return render_template(\"index.html\")\n",
    "\n",
    "@app.route(\"/success\", methods=['POST'])\n",
    "def success():\n",
    "    if request.method == 'POST':\n",
    "        email = request.form[\"email_name\"]\n",
    "        height = request.form[\"height_name\"]\n",
    "        print(email, height)\n",
    "        if db.session.query(Data).filter(Data.email_ == email).count() == 0:\n",
    "            data = Data(email, height)\n",
    "            db.session.add(data)\n",
    "            db.session.commit()\n",
    "            return render_template(\"success.html\")\n",
    "    return render_template('index.html', text=\"Seems like we got something from that email once!\")\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.debug = True\n",
    "    app.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Emailing Database Values Back to the User](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In this lecture we create a send_email.py modules which will be imported from app.py. This module will send an email to the user."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "send_email.py"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from email.mime.text import MIMEText\n",
    "import smtplib\n",
    "\n",
    "def send_email(email, height, average_height, count):\n",
    "    from_email = \"john@gmail.com\"\n",
    "    from_password = \"password\"\n",
    "    to_email = email\n",
    "\n",
    "    subject = \"Height data\"\n",
    "    message = \"Hey there, your height is <strong>%s</strong>. <br> Average height of all is <strong>%s</strong> and that is calculated out of <strong>%s</strong> people. <br> Thanks!\" % (height, average_height, count)\n",
    "\n",
    "    msg = MIMEText(message, 'html')\n",
    "    msg['Subject'] = subject\n",
    "    msg['To'] = to_email\n",
    "    msg['From'] = from_email\n",
    "\n",
    "    gmail = smtplib.SMTP('smtp.gmail.com', 587)\n",
    "    gmail.ehlo()\n",
    "    gmail.starttls()\n",
    "    gmail.login(from_email, from_password)\n",
    "    gmail.send_message(msg)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Emailing Statistics to the User](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In this lecture we finally complete the code for application. For the code please see the last lecture down below titled \"Final Code for Application 9\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Deploying the Web Application to a Live Server](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This video lecture covers the steps needed to deploy a database web app to Heroku."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Bonus Lecture: Implementing Download and Upload in your Web App](https://www.udemy.com/the-python-mega-course/learn/v4/t/lecture/9439078?start=0)\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "app.py"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from flask import Flask, render_template, request, send_file\n",
    "from flask.ext.sqlalchemy import SQLAlchemy\n",
    "from send_email import send_email\n",
    "from sqlalchemy.sql import func\n",
    "from werkzeug import secure_filename\n",
    "\n",
    "\n",
    "app=Flask(__name__)\n",
    "app.config['SQLALCHEMY_DATABASE_URI'] = 'postgresql://postgres:postgres123@localhost/height_collector'\n",
    "db=SQLAlchemy(app)\n",
    "\n",
    "class Data(db.Model):\n",
    "    __tablename__=\"data\"\n",
    "    id = db.Column(db.Integer, primary_key=True)\n",
    "    email_ = db.Column(db.String(120), unique=True)\n",
    "    height_ = db.Column(db.Integer)\n",
    "\n",
    "    def __init__(self, email_, height_):\n",
    "        self.email_ = email_\n",
    "        self.height_ = height_\n",
    "\n",
    "@app.route(\"/\")\n",
    "def index():\n",
    "    return render_template(\"index.html\")\n",
    "\n",
    "@app.route(\"/success\", methods=['POST'])\n",
    "def success():\n",
    "    global file\n",
    "    if request.method == 'POST':\n",
    "        file = request.files[\"file\"]\n",
    "        file.save(secure_filename(\"uploaded\"+file.filename))\n",
    "        with open(\"uploaded\" + file.filename,\"a\") as f:\n",
    "            f.write(\"This was added later!\")\n",
    "        print(file)\n",
    "        print(type(file))\n",
    "        return render_template(\"index.html\", btn=\"download.html\")\n",
    "\n",
    "@app.route(\"/download\")\n",
    "def download():\n",
    "    return send_file(\"uploaded\" + file.filename, attachment_filename=\"yourfile.csv\", as_attachment=True)\n",
    "\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.debug = True\n",
    "    app.run()\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "templates/index.html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "<!DOCTYPE html>\n",
    "<html lang=\"en\">\n",
    "  <title> Data Collector App</title>\n",
    "  <head>\n",
    "    <link href=\"../static/main.css\" rel=\"stylesheet\">\n",
    "  </head>\n",
    "    <body>\n",
    "      <div class=\"container\">\n",
    "        <h1>Collecting height</h1>\n",
    "        <h3>Please fill the entires to get population statistics on height</h3>\n",
    "        <div class=\"message\">\n",
    "          {{text | safe}}\n",
    "        </div>\n",
    "        <form action=\"{{url_for('success')}}\" method=\"POST\" enctype=\"multipart/form-data\">\n",
    "          <input type=\"file\" name=\"file\" > <br>\n",
    "          <button type=\"submit\"> Submit </button>\n",
    "        </form>\n",
    "        {% include btn ignore missing %}\n",
    "      </div>\n",
    "    </body>\n",
    "</html>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "templates/download.html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "<!DOCTYPE html>\n",
    "<html lang=\"en\">\n",
    "<div class=\"download\">\n",
    "<a href={{url_for('download')}} target=\"blank\"> <button class=\"btn\">  Download </button></a>\n",
    "</div>\n",
    "</html>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "templates/success.html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "<!DOCTYPE html>\n",
    "<html lang=\"en\">\n",
    "  <title> Data Collector App</title>\n",
    "  <head>\n",
    "    <link href=\"../static/main.css\" rel=\"stylesheet\">\n",
    "  </head>\n",
    "    <body>\n",
    "      <div class=\"container\">\n",
    "        <p> Thank you for your submission! <br>\n",
    "          You will receive an email with the survey results shortly.\n",
    "        </p>\n",
    "      </div>\n",
    "    </body>\n",
    "</html>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "static/main.css"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "html, body {\n",
    "  height: 100%;\n",
    "  margin: 0;\n",
    "}\n",
    "\n",
    ".container {\n",
    "  margin: 0 auto;\n",
    "  width: 100%;\n",
    "  height: 100%;\n",
    "  background-color: #006666;\n",
    "  color: #e6ffff;\n",
    "  overflow:hidden;\n",
    "  text-align: center;\n",
    "}\n",
    "\n",
    ".container h1 {\n",
    "  font-family: Arial, sans-serif;\n",
    "  font-size: 30px;\n",
    "  color: #DDCCEE;\n",
    "  margin-top: 80px;\n",
    "}\n",
    "\n",
    ".container form {\n",
    "  margin: 20px;\n",
    "}\n",
    "\n",
    ".container input {\n",
    "  width: 350px;\n",
    "  height: 15px;\n",
    "  font-size: 15px;\n",
    "  margin: 2px;\n",
    "  padding: 20px;\n",
    "  transition: all 0.2s ease-in-out;\n",
    "}\n",
    "\n",
    ".container button {\n",
    "  width:70px;\n",
    "  height: 30px;\n",
    "  background-color: steelblue;\n",
    "  margin: 3px;\n",
    "}\n",
    "\n",
    ".container p {\n",
    "  margin: 100px;\n",
    "}\n",
    "\n",
    ".message {\n",
    "  font-family: Arial, sans-serif;\n",
    "  font-size: 15px;\n",
    "  color: #ff9999\n",
    "}\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Lecture:** [Final Code for Application 9]()\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Here's the final code for the data collector web app. To run it, execute `python app.py` and go to `localhost:5000`."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Project directory tree:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "templates\n",
    "  index.html\n",
    "  success.html\n",
    "static\n",
    "  main.css\n",
    "app.py\n",
    "send_email.py\n",
    "Procfile\n",
    "requirements.txt\n",
    "runtime.txt"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "app.py"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from flask import Flask, render_template, request\n",
    "from flask.ext.sqlalchemy import SQLAlchemy\n",
    "from send_email import send_email\n",
    "from sqlalchemy.sql import func\n",
    "\n",
    "app = Flask(__name__)\n",
    "app.config['SQLALCHEMY_DATABASE_URI'] = 'postgresql://postgres:postgres123@localhost/height_collector'\n",
    "db = SQLAlchemy(app)\n",
    "\n",
    "class Data(db.Model):\n",
    "    __tablename__ = \"data\"\n",
    "    id = db.Column(db.Integer, primary_key=True)\n",
    "    email_ = db.Column(db.String(120), unique=True)\n",
    "    height_ = db.Column(db.Integer)\n",
    "\n",
    "    def __init__(self, email_, height_):\n",
    "        self.email_ = email_\n",
    "        self.height_ = height_\n",
    "\n",
    "@app.route(\"/\")\n",
    "def index():\n",
    "    return render_template(\"index.html\")\n",
    "\n",
    "@app.route(\"/success\", methods=['POST'])\n",
    "def success():\n",
    "    if request.method == 'POST':\n",
    "        email = request.form[\"email_name\"]\n",
    "        height = request.form[\"height_name\"]\n",
    "        print(email, height)\n",
    "        if db.session.query(Data).filter(Data.email_ == email).count() == 0:\n",
    "            data = Data(email,height)\n",
    "            db.session.add(data)\n",
    "            db.session.commit()\n",
    "            average_height = db.session.query(func.avg(Data.height_)).scalar()\n",
    "            average_height = round(average_height, 1)\n",
    "            count = db.session.query(Data.height_).count()\n",
    "            send_email(email, height, average_height, count)\n",
    "            print(average_height)\n",
    "            return render_template(\"success.html\")\n",
    "    return render_template('index.html', text=\"Seems like we got something from that email once!\")\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.debug = True\n",
    "    app.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "send_email.py"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from email.mime.text import MIMEText\n",
    "import smtplib\n",
    "\n",
    "def send_email(email, height, average_height, count):\n",
    "    from_email = \"john@gmail.com\"\n",
    "    from_password = \"password\"\n",
    "    to_email = email\n",
    "\n",
    "    subject = \"Height data\"\n",
    "    message = \"Hey there, your height is <strong>%s</strong>. <br> Average height of all is <strong>%s</strong> and that is calculated out of <strong>%s</strong> people. <br> Thanks!\" % (height, average_height, count)\n",
    "\n",
    "    msg = MIMEText(message, 'html')\n",
    "    msg['Subject'] = subject\n",
    "    msg['To'] = to_email\n",
    "    msg['From'] = from_email\n",
    "\n",
    "    gmail = smtplib.SMTP('smtp.gmail.com', 587)\n",
    "    gmail.ehlo()\n",
    "    gmail.starttls()\n",
    "    gmail.login(from_email, from_password)\n",
    "    gmail.send_message(msg)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "templates/index.html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "<!DOCTYPE html>\n",
    "<html lang=\"en\">\n",
    "  <title> Data Collector App</title>\n",
    "  <head>\n",
    "    <link href=\"../static/main.css\" rel=\"stylesheet\">\n",
    "  </head>\n",
    "    <body>\n",
    "      <div class=\"container\">\n",
    "        <h1>Collecting height</h1>\n",
    "        <h3>Please fill the entires to get population statistics on height</h3>\n",
    "        <div class=\"email\"> {{text | safe}} </div>\n",
    "        <form action=\"{{url_for('success')}}\" method=\"POST\">\n",
    "          <input title=\"Your email will be safe with us\" placeholder=\"Enter your email address\" type=\"email\" name=\"email_name\" required> <br>\n",
    "          <input title=\"Your data will be safe with us\" placeholder=\"Enter your height in cm\" type=\"number\" min=\"50\", max=\"300\" name=\"height_name\" required> <br>\n",
    "          <button type=\"submit\"> Submit </button>\n",
    "        </form>\n",
    "      </div>\n",
    "    </body>\n",
    "</html>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "templates/success.html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "<!DOCTYPE html>\n",
    "<html lang=\"en\">\n",
    "  <title> Data Collector App</title>\n",
    "  <head>\n",
    "    <link href=\"../static/main.css\" rel=\"stylesheet\">\n",
    "  </head>\n",
    "    <body>\n",
    "      <div class=\"container\">\n",
    "        <p class=\"success-message\"> Thank you for your submission! <br>\n",
    "          You will receive an email with the survey results shortly.\n",
    "        </p>\n",
    "      </div>\n",
    "    </body>\n",
    "</html>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "static/main.css"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "html, body {\n",
    "  height: 100%;\n",
    "  margin: 0;\n",
    "}\n",
    "\n",
    ".container {\n",
    "  margin: 0 auto;\n",
    "  width: 100%;\n",
    "  height: 100%;\n",
    "  background-color: #006666;\n",
    "  color: #e6ffff;\n",
    "  overflow:hidden;\n",
    "  text-align: center;\n",
    "}\n",
    "\n",
    ".container h1 {\n",
    "  font-family: Arial, sans-serif;\n",
    "  font-size: 30px;\n",
    "  color: #e6ffff;\n",
    "  margin-top: 80px;\n",
    "}\n",
    "\n",
    ".container form {\n",
    "  margin: 20px;\n",
    "}\n",
    "\n",
    ".container input {\n",
    "  width: 350px;\n",
    "  height: 15px;\n",
    "  font-size: 15px;\n",
    "  margin: 2px;\n",
    "  padding: 20px;\n",
    "  transition: all 0.2s ease-in-out;\n",
    "}\n",
    "\n",
    ".container button {\n",
    "  width:70px;\n",
    "  height: 30px;\n",
    "  background-color: steelblue;\n",
    "  margin: 3px;\n",
    "}\n",
    "\n",
    ".success-message {\n",
    "  margin: 100px;\n",
    "}\n",
    "\n",
    ".email {\n",
    "  font-family: Arial, sans-serif;\n",
    "  font-size: 15px;\n",
    "  color:  #ff9999;\n",
    "  transition: all 0.2s ease-in-out;\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The following files are only necessary if you deploy your app on Heroku"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Procfile"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "`web: gunicorn app:app`1"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "requirements.txt"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "`Flask==0.10.1\n",
    "gunicorn==19.6.0\n",
    "itsdangerous==0.24\n",
    "Jinja2==2.8\n",
    "MarkupSafe==0.23\n",
    "Werkzeug==0.11.10`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "runtime.txt (Go to the [Heroku Python runtime webpage](https://devcenter.heroku.com/articles/python-runtimes#supported-python-runtimes) to see the latest version of Python used by Heroku and put that version in runtime.txt instead of the one below)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "`python-3.5.1`"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}