HCI Web Applications 4 - Using Flask

Web Applications Name: __________________________ ( ) Class:_________ Date: _________ Lesson 4: Using Flask Instructional Objectives: By the end of this task, you should be able to: ● Use theflask.Flask()constructor to create a Flaskapplication ● Usetheflask.Flask.route()decoratortoassociatefunctionswitheithera static path or a path containing one or more variable sections ● Useflask.Flask.run()to start a Flask application ● Useflask.render_template()to simplify sending oflong HTML responses ● Useflask.redirect()tosendaHTTP302(Found)statuscodeandhave the browser request a different address ● Use theflask.request.formdictionary to retrievedecoded form data ● Usethe Jinja2templatelanguageandflask.url_for()to dynamically generate links and URLs in HTML responses Part 1: Dynamic Web Pages AlthoughwecanusethewebtosimplyrequestforandretrievestaticHTMLandCSSdocuments,the webbecomesmuchmoreusefulif thewebservercancustomiseitsresponsetoeachHTTPrequest.Forexample,thefollowingprogramuseswhatwehavelearntsofaraboutsockets,HTTP, HTMLandCSStogenerateaweb page with random colours and text every time it is requested. Program 1:p01_server_without_flask.py 1234567 import randomimport socket # HTTP uses \r\n to end lines instead of \n.EOL = b'\r\n' # List of possible colours. CPDD Computer Education Unit Version: Nov 20181

Web Applications 891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 COLOURS = ['red', 'orange', 'blue', 'purple','#C0C000', # dark yellow'#00C000' # dark green] # List of possible messages.MESSAGES = ['Hello, World!', 'Computing is Fun', 'Alamak!'] # Start listening for web browser requests on port 8000.listen_socket = socket.socket()listen_socket.bind(('127.0.0.1', 8000))listen_socket.listen() def handle_request(new_socket):# Keep loading request until end of first line (\r\n).request = b''while EOL not in request:received = new_socket.recv(1024)if received == b'':new_socket.close()returnrequest += received # Extract first line and split it into three.# Requested path is always the second part.index = request.index(EOL)first_line = request[:index].decode()path = first_line.split()[1] # Start response with standard HTTP status line.response = b'HTTP/1.1 200 OK' + EOL # Generate CSS document for response if path is '/css'.# Otherwise, generate HTML document for response.if path == '/css':# Generate CSS document.border_colour = random.choice(COLOURS)text_colour = random.choice(COLOURS)body = 'p {{ border: 5px solid {0}; color: {1};'body += 'font-size: 72px; padding: 20px; }}'body = body.format(border_colour, text_colour)body = body.encode() # Append HTTP header fields to response.response += b'Content-Type: text/css' + EOLresponse += b'Content-Length: 'response += str(len(body)).encode() + EOL CPDD Computer Education Unit Version: Nov 20182

Web Applications 5758596061626364656667686970717273747576777879808182838485 else:# Generate HTML document.msg = random.choice(MESSAGES)body = '<!DOCTYPE