Homework answers / question archive / Week 6 Deliverables Overview: In this week, you have studied additional Python language syntax for rendering HTML templates using the Python Flask module

Week 6 Deliverables Overview: In this week, you have studied additional Python language syntax for rendering HTML templates using the Python Flask module

Computer Science

Share With

Week 6 Deliverables Overview: In this week, you have studied additional Python language syntax for rendering HTML templates using the Python Flask module. The Lab for this week demonstrates your knowledge of this additional Python functionality. Be sure to use the examples in the textbook and readings along with the associate libraries, functions and processes when completing the assignments for this week. Submission requirements for this project includes multiple 2 files. (Zipping them into one file is acceptable and encouraged): ? ? Python Web Page Code (Python code, Templates, CSS and other associated files) Word or PDF file containing your test and pylint results Python Applications for this lab: (total 100 points): This lab consists of two parts. 1. (80 points) This exercise (80 points) uses your programming environment to generate a simple Web site using Python flask. The site should be unique, include at least 3 routes (e.g. 3 pages one can navigate), each route should render the HTML pages by using the render_template() functionality. A style sheet should be included that is used by all Web pages. Proper organization should take place of the web site including the location of templates and static pages. Keep in the basic HTML form for a function web page includes the following components: Page Title ...your page content... In addition to the requirements list above the following functionality should be found within your web site on one or more web pages. ? ? ? ? ? ? ? Use at least 3 different heading styles (e.g. , , ) Paragraph () Comments ) Ordered list Unordered list At least 3 Links to other External Web Sites Display the Date and Time on a Web page (Hint: Just use the Python datetime functions) 1 The content and topic of the Web site is up to you. Consider an information web site about a topic you are interested. It should be unique and something you want to create. Hints: 1. 2. 3. 4. 5. Be sure to end tags that are started (e.g. ) Start early. This will take you longer than you think. Use comments to document your code Test with many combinations. Use pylint to verify the code style – the goal is a 10! 2. (20 points) Document your testing results using your programming environment. You should also include and discuss your pylint results for the application. The test document should include a test table that includes the input values, the expected results and the actual results. A screen capture should be included that shows the actual test results of running each test case found in the test table. Be sure to include multiple test cases to provide full coverage for all code and for each function you develop and test. Any submissions that do not represent work originating from the student will be submitted to the Dean’s office and evaluated for possible academic integrity violations and sanctions. 2 Using Python Flask Overview: This document provides configuration details and some sample code that takes advantage of the Flask micro web framework. For this course, we will use Flask to develop secure Web applications using Python. Be aware additional functionality is available in other full stacks. Background: According to the Flask web site, “Flask is a microframework for Python based on Werkzeug, Jinja 2 and good intentions” (Flask, 2019). Frameworks are typically a bundle of libraries providing significant functionality. A microframework contains a smaller subset of functionality when compared to a full stack. Django is considered a full stack framework whereas Flask is a microframework. Your readings for this week provided an overview of HTML with specific HTML code for creating lists and links. Since we will be using Flask, there are some configurations needed to be successful. In addition, we won’t be using specific flask tag generations and modules such as flask-table. We will be using Flask templates allowing creating of HTML pages outside of the Python code then rendering the template from within Python. Installing Flask To install Flask, open up your command prompt, and type: pip install flask You will receive an installation complete message upon success. As before, if you receive a message about updating pip, you should ignore this. As shown in figure 1, you can list the modules currently installed by starting python and typing: help('modules') Note, your list of packages will look different than the ones below and is based on the previous and default module python installations. 1 Figure 1 Running help('modules') within Python You can also list help on specific modules using help('module_name'). For example, help('flask') as shown in figure 2. 2 Figure 2 Running help('flask') within Python Once you have successfully installed the module, you can use it by properly importing it within your code and calling the available functions. Hello World Example: After installing Flask, it makes sense to test a simple hello world program. To do this, create a folder for you to experiment with Flask applications. For example, you could create a folder structure such as c:\courses\SDEV300\Flaskprojects\hello. Then create a file named hello_sdev.py and place in the folder you just created. The contents of hello_sdev.py are listed below: from flask import Flask app = Flask(__name__) @app.route('/') def index(): return show_hello() # Can call functions as part of the returns def show_hello(): return 'Hello, UMGC SDEV Students!' To run the code, you need to set an environmental variable aligned with the file we just created with the Flask app, and then run flask. The following commands entered from the command prompt, will satisfy these requirements resulting in an output similar to figure 3. 3 set FLASK_APP=hello_sdev.py flask run Figure 3 Setting Flask Variable and Run Flask To test the results, open your favorite browser and type the following URL: localhost:5000 The results are shown in figure 4. Figure 4 Testing the Hello Web Page 4 Flask and web application code will look a little different than some of the Python code you have created previously. Here are a few comments about the code and environment: 1. The Web server is running locally on your desktop. This is why you used localhost as the URL. Using 127.0.0.0.1:5000 will yield similar results. If you need to deploy the code to another server at some point, you would provide the URL of the production server. 2. The default port of Flask is 5000. Be sure to use URL:port to run the application. Keep in mind, the default URL port is port 80. This is where most HTTP web applications run. The secure version of HTTP is HTTPS and would run on port 443. For testing, running on port 5000 will suffice. 3. app = Flask(__name__) creates an instance of the class. This is an important objectoriented concept allowing us to call and use other methods and functions associated with Flask. 4. The route() decorator helps us align and route the URL to invoke the corresponding function. In this case, ‘/’ is the default landing page. We could, and will soon, add more URL routes such as /home, /about, /login and others. Routes are virtual locations. Once we add more routes they are invoked by just adding the route to the URL. For example: localhost:5000/home Stopping the Flask Web Application: Assuming there are no errors in your code, the Flask app will run on your desktop until you quit the application. To quit the application just use CTRL+C. Sometimes you may need to enter CTRL+C a few times before the application will exit. While running, some debug and information is available and displayed directly in the console where the Flask application was launched. As shown in figure 7, the information is updated each time a user accesses the URL. The command line prompt will return once the application has been stopped. 5 Figure 5 Stopping the Web Application Templates and Functions: As you add more routes and functionality to the Web page, it makes sense to use Flask templates to separate the Python code from the HTML. A simple HTML template is shown below: Hello UMGC SDEV Student! {% if name %} Hello {{ name }}! {% else %} Hello, World! {% endif %} This template has some logic in it as well as standard HTML tags. Notice the “if else” structure embedded with the {% %} braces. All templates should be stored in a “templates” folder in the same folder as your main application Python file. A static folder is used for CSS files, Images and other static content. Figure 6 shows a representative folder structure with these folders in place. In this case, the Python application is named hello.py. 6 Figure 6 Flask folder structure To call a template, you need to import the render_templates module and then embed the function as shown in the following code: from flask import Flask from flask import render_template app = Flask(__name__) @app.route('/') def index(): return show_hello() # Can call functions as part of the returns def show_hello(): return 'Hello, UMGC SDEV Students!' # Can provide multiple route versions # And can render template - found in /template folder @app.route('/hello/') @app.route('/hello/') def hello(name=None): return render_template('hello.html', name=name) This Python file is similar to the hello world but uses the render_template() method to refer to the ‘hello.html’ file. The routes can be overloaded such that multiple URLs are possible In this case /hello/ as well as hello/name will invoke two different results. Figure 7 shows the hello/name option with the name of “jim” was added to the URL. Figure 8 shows the results if you just hello/ without the name was entered. 7 Figure 7 Using the Overloaded hello/name URL Figure 8 Calling the render_template with hello.html Continuing to add routes that use the render_templates() call, you can provide forms, tables and most any other HTML tag functionality you need to create an interesting web site. The following code is a snippet from an app that includes a user registration form: @app.route('/register', methods=['GET','POST']) def register(): if request.method == "POST": username = request.form["username"] password = request.form["password"] error = None if not username: error = "Username is required." 8 elif not password: error = "Password is required." flash(error) # TODO: Encrypt and Store credentials if error == None: return redirect(url_for("hello")) return render_template('register.html') There is much more functionality happening here including GET/POST methods, requests, error processing, and redirects. More complex functionality will be introduced and described over the next couple of weeks. However, note the concept and resulting functionality is similar. You have a specific route, in this case register, which by default will display the register.html form but if the form is submitted via POST method, the data will be processed and eventually encrypted and stored in a database system for authentication on future logins. The representative register.html template is shown below: Register for the Application Register Username Password Notice the template is a form embedded within a table using standard HTML5 tags and syntax. Here are some summary notes and suggestions about this process and Flask code and project: 1. Use the @route decorators and HTML templates. This way you can test your HTML outside of the Flask application if needed. 2. Use the simple hello_sdev.py examples as a starting point 9 3. Code a little and test a lot to avoid having to track multiple errors in your application. 4. Use the Flask, HTML and other references provided in this week’s readings to expand from the simple examples I provided to much more complex web applications. 10