Debug Mode

Run the app in debug mode to auto-reload

if __name__ == "__main__":
    app.run(debug=True)

After changing, hit ctrl + save (S), then it will auto reload the server too.

When error sign on your website, it shows you possible errors, click on the black button on the right hand side.
type pin number to debug

Parsing URLs

• parsing a URL: what the user typed in to the url

• path
  /post is a path in this example url below
  https://www.example.com/post
  We wanna be ale to get hold of it and render something specific based on that URL.

@app.route('/bye')
def bye_world():
    return 'Bye!'

-route() function is a decorator function which lives inside app object, from Flask class

Variable rules in Route

Docs

• angle bracket syntax < >
  -add variable sections to a URL by marking it with <variable_name> and function will receive the variable
  -we can add path before and after the variable too

@app.route("/username/<name>/1")
def greet(name):
    return f"Hello there {name + '1'}!"

-note that '1' is a string not int

<converter:variable_name> + Datatype

For example, if you wanted to keep slash with string. (in default, it only accepts text without slash)

e.g.1 path data type
Notice, we used converter 'path' which accepts string with slashes

@app.route("/username/<path:name>")
def greet(name):
    return f"Hello there {name}!"

e.g.2 mixed: string + int

@app.route("/username/<name>/<int:number>")
def greet(name, number):
    return f"Hello there {name}, you are {number} years old"

Rendering HTML elements

Flask accepts HTML in the return
enter inside single/double quote for line break

@app.route('/')
def hello_world():
    return '<h1 style="text-align: center">Hello, World!</h1>' \
           '<p> This is amazing!</p>' \
           '<img src="https://i.pinimg.com
           /originals/2b/16/7e/2b167eed611f4a8216be57e1dd2a2bd4.jpg">' \
           '<img src="https://media.giphy.com/
           media/zpisCRDjcmvU4/giphy.gif">'

Note: if you have single quote inside, use double quote on the outside, otherwise it will crash

# From Flask class, to create Flask app, and in order to initialize one required input is 'import name'

# print(__name__) #->__main__ what is current class function method's name? it is run as a script

from flask import Flask
app = Flask(__name__)


#when the user hit the home route, / is home.
"""
Python Decorators

bunch of functions in your module.
if you want to add functionalities
Decorator function, give additonal functionaly to existing function.

"""

@app.route('/')
def hello_world():
    return '<h1 style="text-align: center">Hello, World!</h1>' \
           '<p> This is amazing!</p>' \
           '<img src="https://i.pinimg.com/originals/2b/16/7e/2b167eed611f4a8216be57e1dd2a2bd4.jpg">' \
           '<img src="https://media.giphy.com/media/zpisCRDjcmvU4/giphy.gif">'

""""
Flask accepts HTML in the return
"""

# route() function is a decorator function which lives inside app Object, from Flask class
@app.route('/bye')

def bye_world():
    return '<u><em><b>Bye!</b><em><u/>'

"""add variable sections to a URL by marking it with <variable_name> and function will receives the varialbe"""

@app.route("/username/<name>/<int:number>")
def greet(name, number):
    return f"Hello there {name}, you are {number} years old"


if __name__ == "__main__":
    app.run(debug=True)

Advanced Decorators

tbc

Project: Higher Lower web game

Goal: use URL to make a number guessing game

num_of_my_choice = random.randint(0, 9)


@app.route('/')
def home():
    return '<h1 style="text-align: center"> Guess a number between 0 and 9 </h1>' \
           '<img src="https://media.giphy.com/media/zpisCRDjcmvU4/giphy.gif">'


@app.route("/<int:number>")
def correct(number):

    if number == num_of_my_choice:
        return f'<h1 style="text-align: center"> {number} is correct. </h1>' \
               f'<img src="https://media.giphy.com/media/zpisCRDjcmvU4/giphy.gif">'

    elif number > num_of_my_choice:
        return '<u><em><b>Too high, </b><em><u/>' \
               '<img src="https://media.giphy.com/media/3o6ZtaO9BZHcOjmErm/giphy.gif">'
    else:
        return '<u><em><b>Too low, </b><em><u/>' \
               '<img src="https://media.giphy.com/media/jD4DwBtqPXRXa/giphy.gif">'