Uncategorized – Learn | Think | Code

Problem Set 7: CS50 Finance

Johnny — Thu, 02 Jan 2020 12:55:42 +0000

Building an app is a process that needs structure

I made an initial attempt that went very poorly. I read the CS50 assignment points and went through building the app page for page. Make all the code to register, then make all the code to get a quote, then buy, then sell. I started getting very picky about how the user got feedback when something was posted. I wanted nice banners to show things were successful or unsuccessful. I wanted javascript on the front end to update values. Everything became a big mess.

So i deleted it all. And pulled out some post-it notes, and a pencil.

I made 3 stacks:

Frontend
Database
Logic

Then I started writing down all the tasks as I read them on the CS50 assignment page. Each post was very simple and specific. On the top left corner of each post-it I put the first letter of what stack it would go on. On the top right I put the first letter for the webpage (register, buy, sell, quote etc).

A post-it might be “create view template register.html,” which would be a F on the top left.

another might be “create model for users,” which would be a D.

“create get_balance method for users,” another D.

What I found was the Frontend stack could be done very quickly because I noticed there were similar tasks. They weren’t directly connected the way a user thinks when reading about the app. They were literally the same task just for a different page of the app.

So my advice would be to write out as many tasks as possible, sort them in this way, and try to develop frontend -> database -> logic.

For the database I highly recommend creating a new file called models.py and creating a class for each part of your app. I created users, transactions and portfolio. Here is what that looks like:

View the code on Gist.

During the database phase I recommend using the python terminal REPL. If you go into the directory that holds application.py for the flask app, you can actually test out any function, class or method right in the terminal. Here is an example of me using the terminal to test some of the user database methods:

type python -i application.py. This is interactive mode and makes testing models easier so you don’t have to submit forms.

When you finish the database make sure to add some fake data to save time during the logic portion.

Logic is something like “if the user does not have enough cash to by stocks return apology.”

API changes

In the helpers file on line 42 I changed the url because the one given doesn’t work. Here is the actual api now https://iexcloud.io/docs/api/#quote

change to this on line 42:

        response = requests.get(f"https://cloud.iexapis.com/stable/stock/{urllib.parse.quote_plus(symbol)}/quote?token=YOUR_FREE_APITOKEN")

change your_free_api_token with your own token when you sign up.

Other quick notes

datetime: https://www.techonthenet.com/sqlite/functions/datetime.php

foreign keys: https://sqlite.org/foreignkeys.html

inner joins: https://www.sqlitetutorial.net/sqlite-inner-join/

Using the with keyword for opening and closing sqlite3

In python there is a way to open a sql connection and automatically close it using with.

Here would be the standard way of connecting to a database and closing it at the end.

import sqlite3
conn = sqlite3.connect('example.db')
c = conn.cursor()

c.execute('''CREATE TABLE stocks
             (date text, trans text, symbol text, qty real, price real)''')
c.execute("INSERT INTO stocks VALUES ('2006-01-05','BUY','RHAT',100,35.14)")

# Save (commit) the changes
conn.commit()

# close the connection if we are done with it.
conn.close()

Now using with:

import sqlite3
  with sqlite3.connect('example.db') as conn:
    c = conn.cursor()

    c.execute('''CREATE TABLE stocks
                 (date text, trans text, symbol text, qty real, price real)''')
    c.execute("INSERT INTO stocks VALUES ('2006-01-05','BUY','RHAT',100,35.14)")

    # Save (commit) the changes
    conn.commit()

    # connection automatically closed once we leave this indented section of code

Questions?

This was a much bigger project, so if you have any questions please let me know and i’ll do my best to answer. My code will be up on github:

View the code on Gist.

CS50 Week 8: Notes

Johnny — Sat, 30 Nov 2019 01:32:32 +0000

CS50 store demo

Cookies and sessions start off this weeks lecture notes. The important thing to remember is http protocol is a stateless protocol. This means traditionally you request a webpage, the server gives you the page data and nothing else happens. Similar to going to a store, buying an item and leaving. The cashier doesn’t remember you next time. That is what stateless means.

Cookies and sessions allow the experience to be more stateful, meaning when you request a webpage, a cookie is inside that request header giving the server some unique info about you. This returns a webpage made only for you. Back to the store analogy, if every Monday you bought eggs, and the store had a way of knowing it was you right when you walked in, someone would just bring you eggs or even have them ready for you in advance at the register.

Here is the store demo code for application.py

View the code on Gist.

On line 8 setting the SESSION_PERMANENT value to False means we do not store the session after the browser has been closed. If you quit the browser program and re-open it, the cart values will not be saved. However if the browser is still open and you close just the window, or tab, the cart values will persist. The SESSION_TYPE we are using is filesystem, which means our session values are stored on the server (in a folder called flask_session).

MVC – Model View Controller

MVC is a way of organizing pieces of a web application. The model is where all the database calls are made (variables being used in SQL statements most of the time). The View is for templating, like jinja2, the look of your pages. The controller is usually a main routes page like application.py, where decisions are made based on what the user is doing.

A Simple Example

I downloaded the lecture.db file from the notes and put it in the same directory as this script:

from cs50 import SQL

db = SQL("sqlite:///lecture.db")

# Query database for all albums
rows = db.execute("SELECT * FROM Album")

# For each album in database
for row in rows:
	# Print title of album
	print(row["Title"])

In my terminal I got this result:

Using sys.argv[1] we can pass variables into the command line which get substituted.

like this:

rows = db.execute("SELECT * FROM Album WHERE Title = :t", t=sys.argv[1])

Its important to remember we don’t use the normal formatting syntax f”my string {variable}” in this case. Because the variables are sanitized, meaning the removal of potentially harmful characters. SQL injection is a thing attacks can use to get into our databases, so it’s important to just know we need this sanitization before running our sql statements.

Adding Flask to the mix

So with a flask application we will use the lecture.db file to show album titles on a webpage:

from flask import Flask, render_template, request

from cs50 import SQL

app = Flask(__name__)

db = SQL("sqlite:///lecture.db")

@app.route("/")
def index():
    rows = db.execute("SELECT * FROM Album")
    return render_template("index.html", albums=rows)

running this (I had to remove eprint) will show a block of text on the browser, which is all the album titles. But the cool thing is we’re using a database. So we have state, which means we can save things for later =).

Query arguments

We can also pass query arguments from the URL using a GET request type:

@app.route("/")
def index():
    query = request.args.get("q")
    rows = db.execute("SELECT * FROM Album WHERE Title LIKE :q", q=query+"%")
    return render_template("index.html", albums=rows)

Above is a modified version of the example code. Using LIKE and a % symbol which is a wildcard, you can just use a single letter and it will return whatever starts with it.

So this URL: http://127.0.0.1:5000/?q=f

returns this:

So this is apparently enough for us poor online learning only souls to create an app for buying and selling stocks!

See you in the next one.

CS50 Week 7: Walkthroughs

Johnny — Sat, 23 Nov 2019 21:54:38 +0000

Hello name in python to start it off:

print(f"Hello {input('name: ')}")

Let’s quickly run through the “tougher” Déjà vu walkthroughs ( and then go deeper into the final similarities web app. Let’s start with the Mario challenge:

mario.py

So let’s build a pyramid shape in the terminal:

height = int(input("enter a number for your mario pyramid: "))
for i in range(2, height+2):
    print(('#'*i).rjust(height+1), end=" ")
    print('#' * i)

4 lines.

Google range() and it’s arguments, then google rjust() and it’s arguments. Use print statements to figure out what I did. If you have any questions try to say what this is doing out loud with a small number (like 2 for the user input). Comment below if you have any questions.

cash.py

cash = float(input("please enter cash amount to break down into coins (example 1.25): "))
coins = {"quarters": .25,"dimes":.10,"nickels":.05,"pennies":.01}
for key, coin in coins.items():
	(coins[key], cash) = (divmod(cash,coin)[0], round(divmod(cash,coin)[1],2))
print(coins)

Short but not impossible to read. Pull apart the packed variables and google divmod(), which is a very handy function in this case. Go back to my python article that goes through packing and unpacking if you need a refresher.

Caesar.py

import sys

if len(sys.argv) != 2: 
  print("Usage: python3 caesar.py key")
  sys.exit(0)
key = int(sys.argv[1])

message = input("enter a secret message: ")

def cipher(letter, key):
	if not letter.isalpha():
		return letter
	offset = 65 if letter.isupper() else 97
	return chr(((ord(letter) - offset) + key) % 26 + offset)

print(f"userinput: {message}")
print("decoded_text: " + ''.join([cipher(letter, key * -1) for letter in message]))
print("coded_text: " + ''.join([cipher(letter, key) for letter in message]))

Similarities (from scratch)

I’m going to do one from scratch then i’ll make it again using the CS50 instructions.

Here is the example image from the CS50 website:

Here was my result. You can check out the github repo as well. I styled the pages differently and added a number input for the substring page:

application.py:

from flask import Flask, render_template, redirect, request
from compare import compare_lines, compare_sentences, compare_substrings

app = Flask(__name__)

@app.route("/", methods=["GET","POST"])
def index():
    if request.method == "POST":
        file_one = request.files["file_one"]
        file_two = request.files["file_two"]
        return render_template("index.html", results=compare_lines(file_one,file_two))
    return render_template("index.html", results=None)



@app.route("/sentences", methods=["GET","POST"])
def sentences():
    if request.method == "POST":
        file_one = request.files["file_one"]
        file_two = request.files["file_two"]
        return render_template("sentences.html", results=compare_sentences(file_one,file_two))
    return render_template("sentences.html", results=None)



@app.route("/substrings", methods=["GET","POST"])
def substrings():
    if request.method == "POST":
        file_one = request.files["file_one"]
        file_two = request.files["file_two"]
        return render_template("substrings.html", results=compare_substrings(file_one,file_two, int(request.form.get('length'))))
    return render_template("substrings.html", results=None)


if __name__ == '__main__':
    app.run

The index route goes straight to the matching lines page. All forms send a POST request to the same URL, so i’m checking for the request type using the IF statement. At the top i’ve imported my own file compare, which has the functions I need to process the files that are being uploaded. Also notice to get the files I use request.files and then pass in the form’s name value. This will return what flask calls a filestorage object. This thin wrapper allows us to call read() which is still in a format that is not decoded because it doesn’t assume the file is text.

Here is the compare.py file so you can see the function I use to get the text from each file:

from nltk.tokenize import sent_tokenize, word_tokenize

def get_file_data(file_one, file_two):
    #takes filestorage type of bytes and turns file data it into a string
    data = [file_one.read().decode('utf-8'), file_two.read().decode('utf-8')]
    data = [file.replace('<', '<').replace('>', '>') for file in data]
    return data


def get_similarities(file_one, file_two):
    return set(file_one).intersection(file_two)


def format_html(file_one, file_two, similarities):
    #adds span tags and \n re-added if identical lines otherwise just the line with \n re-added
    similarities = list(similarities)
    files = []
    for item in similarities:
        file_one = file_one.replace(item, f"{item}", 1)
        file_two = file_two.replace(item, f"{item}", 1)
    files.append(file_one)
    files.append(file_two)
    return files

def set_files_as_list_of_strings(formatted_files):
    return [''.join(formatted_files[0]), ''.join(formatted_files[1])]


def compare_lines(file_one, file_two):
    data = get_file_data(file_one, file_two)

    #split string into list of strings wherever a linebreak is found
    file_one = data[0].split('\n')
    file_two = data[1].split('\n')

    #set intersection returns a set of all identical lines between the lists
    similarities = get_similarities(file_one, file_two)

    #adds span tags and \n re-added if identical lines otherwise just the line with \n re-added
    formatted_files = format_html(data[0], data[1], similarities)

    #return as a list of 2 strings
    return set_files_as_list_of_strings(formatted_files)




def compare_sentences(file_one, file_two):
    data = get_file_data(file_one, file_two)

    #TO DO splits data up into sentences
    file_one = sent_tokenize(data[0])
    file_two = sent_tokenize(data[1])

    #set intersection returns a set of all identical sentences between the lists
    similarities = get_similarities(file_one, file_two)

    #adds span tags and \n re-added if identical sentence otherwise just the sentence with \n re-added
    formatted_files = format_html(data[0], data[1], similarities)

    #return as a list of 2 strings
    return set_files_as_list_of_strings(formatted_files)




def compare_substrings(file_one, file_two, length):
    data = get_file_data(file_one, file_two)

    #split string into list of substrings based on user input
    file_one = [char for item in word_tokenize(data[0]) for char in item]
    file_two = [char for item in word_tokenize(data[1]) for char in item]

    slices_one = []
    for i in range(0,len(file_one), length):
        if len(file_one[i:i+length]) == length and ''.join(file_one[i:i+length]).isalpha():
            slices_one.append(''.join(file_one[i:i+length]))

    slices_two = []
    for i in range(0,len(file_two), length):
        if len(file_two[i:i+length]) == length and ''.join(file_one[i:i+length]).isalpha():
            slices_two.append(''.join(file_two[i:i+length]))


    #set intersection returns a set of all identical substrings between the lists
    similarities = get_similarities(slices_one, slices_two)

    print(similarities)

    list_of_substrings = ['\n'.join(similarities), '\n'.join(similarities)]

    #return as a list of 2 strings
    return set_files_as_list_of_strings(list_of_substrings)

On line 5 you can see where I call read() then decode(‘utf-8’) to get the files actual text.

When the user posts the data we’re not able to immediately get to the text inside the submitted files. My goal is for our data variable to just hold the file text as a string.

Using read() with no argument, I save all the form data to memory until EOF. This goes back to the days we were messing with file handlers in C. That returns a byte object. In python a byte object represents sequences of integers which are usually ascii characters. We can use the decode method to get back a string. I’ve passed ‘utf-8’ as an argument, however it actually decodes to this by default too, so decode() would work just as well.

Once I get the files as strings I can start working on formatting the data. If you look at where it ends up in html you can see i’ve wrapped the text in

tags. Let’s look at templates/base.html on line 110:




    {% block head %}
	Similarities{% block title %}{% endblock %}
	
    {% endblock %}


    
    
        Similar Lines
        Similar Sentences
        Similar Substrings
    

    {% block content %}
    
      Upload two files to highlight similarities{% block h1 %}{% endblock %}
      

      

      {% block numberInput %}{% endblock %}
      
    
    
        
            
                Code Group One
            
            
                Code Group Two
            
        

            
{% block results_one %}{% endblock %}

            
            
{% block results_two %}{% endblock %}

            
        
    
{% endblock %}

Code Group One	Code Group Two
{% block results_one %}{% endblock %}	{% block results_two %}{% endblock %}

Using jinja2 templating I can create a block that holds results_one and on line 116 I have another

with results_two inside. Now let’s look at index.html which is the first page of the website, where I compare lines:

{% extends "base.html" %}

    {% block title %} - Lines{% endblock %}
    {% block background %}
        body{
            background-image: linear-gradient(to right, #ab7272 0%, GRAY 280%);
        }
    {% endblock %}
{% block head %}
    {{ super() }}
{% endblock %}

    {% block h1 %} - matching lines{% endblock %}
    {% block results_one %}{{results[0]|safe}}{% endblock %}
    {% block results_two %}{{results[1]|safe}}{% endblock %}
{% block content %}
    {{ super() }}
{% endblock %}

This is why jinja2 is so powerful. My base.html is 123 lines of code. My index.html, sentences.html and substrings.html pages are less than 20! If I have to make a change on all the webpages, base.html will be the one place to make it.

Using {% extends “base.html” %} allows me to reuse all the code and slip in custom variables by defining their values on each individual page. Look at line 14:

{% block results_two %}{{results[1]|safe}}{% endblock %}

I pass in the results from my compare function in application.py. Let me make a diagram so it’s easier to understand the flow:

This is generally what is happening. Things are being passed to do some processing work, but always end up back in application.py so the flask framework can do the rest for us.

I’m still learning as I go, and the tough part of this is all the different languages working together…the html, css, server calls, url requests and python code. Each is a journey on it’s own and don’t be discouraged if this made little sense. CS50 doesn’t cover html, or css very much so if you’re up to it check out teamtreehouse for video courses you can take on those topics.

Finishing the actual challenges

Back to similaries less, which is a much simpler challenge. We don’t have to make the flask app from scratch. Just update the helpers.py and index.html files with functions and a form. Here is what I ended up doing:

View the code on Gist.

My drop down has a nifty javascript function inside it that will hide or show the numbers field if substring is selected. Also when the user hits the back button it resets the form using the script at the bottom.

So remember, a lot of these features i’ve added is not because i’m some all powerful genius. I am just not afraid to ask myself “what do I want this to do?” followed by googling it and not being too proud to use code from online. In these cases, if it works, great! The script at the bottom is straight from a stack overflow answer. I also forgot how to inline javascript in html so a quick google and you can see onchange on line 14 that goes into my javascript for changing the style of an element (which I also googled because I forgot for the 100th time, which is OK)

There is too much to remember, and too much changing in the world of programming, be a hunter of code examples and understand fundamentals to get things done and not get stuck with half finished projects.

Moving on to week 8!

CS50 Week 7

Johnny — Wed, 13 Nov 2019 13:02:34 +0000

Web Programming

So with a brief overview of html, css and python it is time to put everything together.

If you’ve never programmed something for the web just remember:

THE INTERNET IS JUST A BUNCH OF COMPUTERS ALL TALKING TO EACH OTHER

There is no special “cloud” machine or “server.” These are all just words that describe COMPUTERS. It’s not much different from sending a hand written letter from one house to another house. The mailman is just your internet cable and some electricity.

We have to command our computer to send information (think hand written letter) using a request called GET. So if you go inside your browser like safari, edge, chrome, firefox, whatever, that bar at the top for web addresses is where you send GET requests. You are saying “go GET me the information from google.com.” When you google cats the bar changes to some funky address that is saying “GET me cats.” (https://www.google.com/search?q=cats&oq=cats&aqs=chrome.0.69i59j0l4j69i61.3015j0j8&sourceid=chrome&ie=UTF-8)

On our computer we might have a word document locally. If we open it we get the information on the screen so we can read it. It is easy in our case to write more stuff onto the document and save it. How do we do this on the web?

There are a few different commands besides GET but the next one you should know is called POST. If I have data somewhere on the internet, meaning not on my computer but on the web, I can add data to it by using a POST type request. It is still a web address but it has some data tied to it that will be saved on the other end. You can also get a response from a POST request. Usually it will be a message that your data was either saved, or something went wrong.

Web requests have headers. I’m on Firefox so if I make a GET request, I can inspect by right clicking and choosing inspect. This is similar on a lot of browsers. Here is how I found the headers:

This took a while to find

So we can see in my case we’re using HTTP/2.0 the response code was 200 which means all is good and our content type is text/html; charset=UTF-8.

UTF stands for Unicode Transformation Format and after spending the past hour looking this up I think I get how it works. I’m probably not 100% but this is the gist. Please leave a comment if you have any additional info on the topic that would help others. Here is an image I put together to help visualize what is happening:

Photo by Melinda Gimpel on Unsplash

utf-8 is the encoding lookup table that turns a character code into binary for a computer to read or pass back out to Unicode. Unicode (a character set) takes the character code and maps it to a lookup table that has the actual character we display on the page using a typeface or font.

I hope that made sense. If it doesn’t please let me know in the comments.

HTML

HTML holds 2 types of info. Info we see and info we don’t see. Here is a sample from the CS50 lecture notes:




    
        hello, title
    
    
        hello, body

The browser program is going to interpret this starting at the top. The first line lets the browser know we are dealing with HTML5, the current standard. Next we have which starts and ends all the info we’re going to have on our page.

is where the browser gets info regarding the title of our page, scripts we want to run, and CSS.

is where we hold the material that can be viewed on the screen by our user. Inside the body we can have website titles, images, text, links and anything else you’ve ever seen on a webpage.

Notice how everything has a closing tag and has a nested structure.

CSS

CSS to style our page. We can change the character font, color, add borders, background images and even animations. When you hover your mouse over a button, and the button on the page looks slightly different when you hover over it, that is CSS. Here is some example code:

View the code on Gist.

You can put css in the section of your html file, or reference a separate .css file. The example file above can be opened using your browser without any other files. Try hovering over the button and last list item.

In CSS the first letter stands for cascading. It’s important you know that in css the rule closest to the bottom will always been the final say.

Notice on line 21 of my example I set the font to 1000000000px! Then on the following lines I change the font. So if a css rule is targeting the exact same element in the html, the last rule will win. Remember I wrote exact. If one rule is li and the next rule is li:first-child THEY ARE NOT EXACTLY THE SAME. So the cascading rule of last is not true.

To learn more I recommend W3Schools CSS tutorials, they are excellent.

Dynamic content with python

This look complicated but lets try to break this down. I was stumped at first but after posting some questions on reddit I figured it out:

# Implements a web server

from http.server import BaseHTTPRequestHandler, HTTPServer


# HTTPRequestHandler class
class HTTPServer_RequestHandler(BaseHTTPRequestHandler):

    # GET
    def do_GET(self):

        # send response status code
        self.send_response(200)

        # send headers
        self.send_header("Content-type", "text/html")
        self.end_headers()

        # write message
        self.wfile.write(bytes("hello, world", "utf8"))


# configure server
port = 8080
server_address = ("0.0.0.0", port)
httpd = HTTPServer(server_address, HTTPServer_RequestHandler)

# run server
httpd.serve_forever()

Ok after going through the notes I understand what is happening. Seeing a class with a do_GET method and not finding it being called in the program was really confusing at first.

do_GET gets called when the user goes to the browser and loads that webpage (makes a GET request).

wfile was confusing at first too, but it’s a file handler used by the HTTPServer class. It requires a bytes object so python has a helpful function that takes in a string and an encoding (utf-8). So we have above the example of ‘hello world’ but we can also create our own file handler, insert it into the bytes function with the read() method and serve up our text file to the webpage.

Here is that version:

# Implements a web server

from http.server import BaseHTTPRequestHandler, HTTPServer


# HTTPRequestHandler class
class HTTPServer_RequestHandler(BaseHTTPRequestHandler):

    # GET
    def do_GET(self):

        # send response status code
        self.send_response(200)

        # send headers
        self.send_header("Content-type", "text/html")
        self.end_headers()

        # write message
        # file handler gives us a stream. bytes turns it into a bytes object
        # we can pass the file handler, a string of text
        # just remember to pass the encoding type utf8!
        f = open("test.txt")
        self.wfile.write(bytes(f.read(), 'utf8'))
        f.close()


# configure server
port = 8080
server_address = ("0.0.0.0", port)
httpd = HTTPServer(server_address, HTTPServer_RequestHandler)

# run server
httpd.serve_forever()

I created a file called test.txt in the same directory for this test. Next I’ll try an html file:

# Implements a web server

from http.server import BaseHTTPRequestHandler, HTTPServer


# HTTPRequestHandler class
class HTTPServer_RequestHandler(BaseHTTPRequestHandler):

    # GET
    def do_GET(self):

        # send response status code
        self.send_response(200)

        # send headers
        self.send_header("Content-type", "text/html")
        self.end_headers()

        # write message
        # file handler gives us a stream. bytes turns it into a bytes object
        # we can pass the file handler, a string of text
        # just remember to pass the encoding type utf8!
        f = open("test.html")
        self.wfile.write(bytes(f.read(), 'utf8'))
        f.close()


# configure server
port = 8080
server_address = ("0.0.0.0", port)
httpd = HTTPServer(server_address, HTTPServer_RequestHandler)

# run server
httpd.serve_forever()

Here is my html file:

Wow CATS

CATS ARE AWESOME!!!

Hello world this is my cats page please subscribe for lots of cats

The result:

So far we’ve created a static page but now we have to go even deeper and build dynamic pages. This is a pretty dense topic and we’ll soon see the differences. Here is a quick read that explains the differences well.

Flask – a python web framework

Make sure to type pip install flask in the terminal before getting started.

Let’s start with a simple example, straight from the Flask website, which you can find here.

I’ve made a folder called flask_example, and inside a file called mysite.py. Inside that file are a few lines of code:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_world():
	return 'Hello, CS50!'

If I tried to run this in the terminal by typing flask run, I will most likely get this message:

 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
Usage: flask run [OPTIONS]

Error: Could not locate a Flask application. You did not provide the "FLASK_APP" environment variable, and a "wsgi.py" or "app.py" module was not found in the current directory.

It wants us to create an environment variable, which is a variable our operating system holds (not our program). Flask reaches to the OS for this variable to reference our file.

We can create environment variables by using the export command in the terminal.

So lets create the FLASK_APP environment variable that is the name of our program. In this example the file i’m working in is called mysite.py

Now when I run the command flask run I get this:

If I hover of the website address and click open I get this:

Now that we’ve created this simple example lets follow the lecture notes.

Flask continued (lecture notes)

I’m going to rename mysite.py to application.py so it matches up with the notes. Then i’m going to create a folder called templates. The notes are a little confusing here but to clear it up here is the directory structure:

flask_example
- application.py
- templates

So flask_example is the main folder, which has application.py and the templates folder inside of it.

first we have to make sure to reset our environment variable!!!!

In the terminal type export FLASK_APP=application.py

Next, inside the templates folder i’ll create a new file called index.html that has this html:




    
        hello, title
    
    
        hello, body

I’m going to replace the code in application.py with this:

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/zuck")
def zuck():
    return render_template("zuck.html")

@app.route("/login")
def login():
    return render_template("login.html")

Next i’ll run the flask run command in the terminal:

Now inside of templates create a zuck.html file with this html:




    
        hello, title
    
    
        hello, this is the zuck page!

Enter flask run in the terminal again and open the website URL. Then add “/zuck” to the end of the url and you will get this result:

Error handling and tracebacks with flask

You can skip this and just run these commands:

touch ~/.bash_profile && echo export FLASK_DEBUG=1 > .bash_profile

Then restart the terminal for it to work. Click here for the next section of text.

This was a huge pain to get working with CS50 IDE. I spent about an hour on this because I really wanted that nice traceback feature right in the browser. Turns out there is another environment variable that needs to be set similar to FLASK_APP. I found this in the flask documentation:

To enable all development features (including debug mode) you can export the FLASK_ENV environment variable and set it to development before running the server:

$ export FLASK_ENV=development
$ flask run

(On Windows you need to use set instead of export.)

This does the following things:

it activates the debugger
it activates the automatic reloader
it enables the debug mode on the Flask application.

You can also control debug mode separately from the environment by exporting FLASK_DEBUG=1.

It turns out FLASK_ENV wasn’t the answer, I just needed that last little part FLASK_DEBUG=1. Or to be exact export FLASK_DEBUG=1

To make it more frustrating I had to do this every time I opened a new terminal. To fix this I wrote this in the terminal:

touch ~/.bash_profile && echo export FLASK_DEBUG=1 > .bash_profile

I’ve run into .bash_profile in the past and I recommend doing a quick google how it works when you get a chance.

Now open a fresh new terminal, close the old one, and try to go to the login.html (make sure in the templates folder you delete login.html so it is not there since we’re trying to mock an error situation). You should get that awesome jinja2 traceback!

Frosh IMs – what it means

I have no idea what Frosh is let me look that up…

Ok google tells me it is a slang word for a first year student (like a freshman).

Ok… fine.

IM’s stands for intramurals which are sports organized within an institution. Fun fact, the word is derived from the Latin intra muros which means “within walls.” Now that i’ve unpacked the heading of this section let’s get down to the programming part:

File structure is similar to the previous example:

froshims0/
- application.py
- templates/
  - failure.html
  - index.html
  - layout.html
  - success.html

If we go through each file in the link provided here, we can go into each file, copy the code and run it to get the form:

Next I would like you to open the inspector in your browser by right clicking and choosing inspect. This is a little different for each browser. I’m using chrome in this case:

Next I want you to click on the “Network” tab:

A post request means the form values are sent in the HTTP body data. What does that mean? Even if we can’t see the body data doesn’t mean the other end doesn’t receive and read it. Lets think of it this way:

Photo by sue hughes on Unsplash

When I open my browser it’s like walking into a post office, where I get my mail. When I go to the counter, the clerk asks for information necessary to retrieve my mail. On my computer, when I type google.com it’s like asking the post office worker “please get me google.com.” Once that post office worker brings me an envelope let’s imagine it like this for google.com:

Now if I take this same idea and fill out a form on a webpage. I can use a GET request or a POST request. Using GET I pass in the form values right into the URL address. When filling out the frosh form using the method GET, and hitting submit the url will change to this:

https://792cdab9-edb1-4a25-a6df-87b8146cafcf-ide.cs50.xyz:8080/register?name=john+smith&dorm=Canaday

Notice the last part: ?name=john+smith&dorm=Apley+Court

So if we look back at the envelope image it might look like this:

This is usually ok for quick and dirty apps that don’t need to be secure with data. A form about if you like cats or not might be ok for the GET method.

Otherwise we have to use POST. So if i change my code back so I use the POST method, which is how it was written by default, my url looks like this after submitting:

https://792cdab9-edb1-4a25-a6df-87b8146cafcf-ide.cs50.xyz:8080/register

So where did my form values end up?

THE SAME PLACE WHERE YOUR BROWSER STORES PAGE DATA. Like LITERALLY THE SAME PLACE. I had no idea for the longest time, because you can’t see what the computer (server) sees on the other side. It uses that space because you can store tons more data. Think about how many images, videos, text you view on the webpage body. That allows forms to take advantage of all that space to then store things to the computer on the other end of the form submission.

So here is what a post request looks like:

Flask routes and more

Let’s look at the application.py file in our lecture notes:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/")
def index():
	return render_template("index.html")

@app.route("/register", methods=["POST"])
def register():
	if not request.form.get("name") or not request.form.get("dorm"):
		return render_template("failure.html")
	return render_template("success.html")

When we use from flask we’re saying from the flask file, give me access to the Flask class. Python classes by convention start with a capital letter. We are also importing the render_template function, and the request object, which has methods we can use to GET and POST things.

Next we have this funky @app.route(“/”), followed by a function def.

@app.route("/")
def index():
	return render_template("index.html")

This is called a decorator. Let’s break down what that means.

A quick peak at decorators, factories and wrapping functions.

Let’s jump right into this magic™

def returnPositiveNumber(number):
	if number > 0:
		return number
	else:
		return 1

Here we have a simple function. It will always return a positive number. If it’s zero or a negative number it will return 1. Easy. Our function takes in one arguement num as it’s only argument.

Python treats functions as first-class-objects, which means you can put them just about anywhere, including as arguments to other functions.

Check this next piece out:

def plusNineThousandDecorator(function):
	def wrapper(number):
		return function(number) + 9000
	return wrapper

PlusNineThousand takes a function as its argument. So we’re going to pass our returnPositiveNumber function into it. How does this look if we try to print something out?

SUPER IMPORTANT! When we use a function as an argument we are NOT calling the function, we reference it as an object which is super strange at first sight. NO () are used!

test = plusNineThousand(returnPositiveNumber)

Look back to our plusNineThousand definition and check out the last line. It returns decorator. So what is decorator? It’s a function. So test is a function. What does it do? How does it work? Take a look at it’s definition:

return function(number) + 9000

It takes the same argument as our original function. So we need to run it as test(num). But now it adds 9000 to the returned result.

Let’s try it out:

print(test(42))
#result is 9042

print(test(-1))
#result is 9001

test is now a function that takes our original function which returned num and added a piece of new functionality, which is adding 9000 to it and returning it back.

When using decorators it is common to modify the original function like this:

returnPositiveNumber = plusNineThousandDecorator(returnPositiveNumber)

Now our original function is what it used to be plus it adds 9000 to everything.

print(returnPositiveNumber(42))
#result is 9042

We can use some syntax sugar to make our ugly:

returnPositiveNumber = plusNineThousandDecorator(returnPositiveNumber)

Into this:

@plusNineThousandDecorator
def returnPositiveNumber(number):
	if number > 0:
		return number
	else:
		return 1

Make sure the decorator function is before the function you modify. Also the decorator @ has to be placed on the line before the function like shown above.

Here is the entire program:

View the code on Gist.

Going deeper, we can assign arguments to our @plusNineThousandDecorator. We can only modify before and after our modified function so let’s try to add some html tags to the front and back of our number.

So we can not pass arbitrary arguments to our decorator. The decorator returns our original function wrapped in some other stuff.

Now we need a “factory” that returns a decorator while passing some arguments in the process.

So let’s “wrap” our decorator function in a decorator factory:

def decoratorFactory(htmlTag):
	def plusNineThousandDecorator(function):
		def wrapper(number):
			return f"<{htmlTag}>{function(number) + 9000}"
		return wrapper
	return plusNineThousandDecorator


@decoratorFactory("h1")
def returnPositiveNumber(number):
	if number > 0:
		return number
	else:
		return 1


print(returnPositiveNumber(42))


# results
# 9042

Now we can modify our factory argument, get back a decorator, which then wraps our function, and finally modifies it’s behavior.

This keeps our program dry, or without repetitive code that is difficult to keep track of. If one thing changes in our program we only want to go fix it in one and only one place. Here is a great article on this topic. Decorators help us achieve this goal when creating software.

Back to our flask app

So now that we know a little bit about decorators let’s look again at a basic flask application:

app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World!"

The example above is from ains.co, and I highly recommend coding through both part 1 and 2 articles here.

What is happening behind the scenes is this (basically):

#credit goes to ains.co 
#please read the article on his site it's fantastic
#https://ains.co/blog/things-which-arent-magic-flask-part-1.html

class Flask():
    def __init__(self):
        self.routes = {}

    def route(self, route_str):
        def decorator(f):
            self.routes[route_str] = f
            return f

        return decorator

    def serve(self, path):
        view_function = self.routes.get(path)
        if view_function:
            return view_function()
        else:
            raise ValueError('Route "{}"" has not been registered'.format(path))


app = Flask()

@app.route("/")
def hello():
    return "Hello World!"

We haven’t used decorators in classes, but it’s basically the same except here we call a method inside of the Flask class.

The cool part is the self.routes{}.

Flask is storing each path (“/”) as a key, while the value is the decorator function itself.

It doesn’t go that final level deep to wrapper. In our example we used our modified function right away, but flask is saving this function to be used later in the serve method.

Once we make a request in our browser to the main domain (“/”), flask is going to check if that is in it’s self.routes dictionary. If it is it will return the function that is stored, which is hello().

If this is confusing do not worry. It is ok to just understand the results of the code and get a feel for how flask operates. This is just a look under the hood of the flask engine. Again here is the link if you want to learn (most of) the inner workings.

Getting form values from flask

Since our form action in the index.html

is we have to let flask know about this url, otherwise known to flask as a route, and what we should do when the user submits our form to it. So we are sending our form message to that url using the POST method as shown below:

@app.route("/register", methods=["POST"]) def register(): if not request.form.get("name") or not request.form.get("dorm"): return render_template("failure.html") return render_template("success.html")

Our function has some logic that guards against the user not submitting the correct values, and finally if the guard is passed we just return the success.html page found in our templates folder.

Some cool is the request object we have access to. This allows us to work with the form values that are specified in the index.html element. These are

…

and