VJC Chapter 8 Web Applications (Jinja) Part 2

Chapter 8: Web applications (Jinja) Part 2 Contents 1 What is jinja? 2 Jinja Syntax 3 Using url_for 4 Filters 5 Conditional statements 5.1 If statements 5.2 For statements 6 External Cascading Style Sheet 7 Handling file and image upload Syllabus Learning Outcomes 4.2 Web Applications Understand the concepts and techniques for developing web applications. 4.2.3 Use HTML, CSS (for clients) and Python (for the server) to create a web application that is able to: – accept user input (text and image file uploads) – process the input on the local server – store and retrieve data using an SQL database – display the output (as formatted text/images/table). 4.2.4 Test a web application on a local server. 1

1 What is jinja? Jinja is a popular and powerful template engine for Python web development. It is designed to be easy to use and flexible, allowing developers to build complex and dynamic web applications with ease. Jinja provides a simple syntax for creating templates, which can be used to generate HTML, XML, and other markup languages. With Jinja, developers can separate the presentation layer from the business logic, making it easier to maintain and update their web applications. Jinja is also extensible, allowing developers to create their own custom filters and extensions to further enhance their templates. 2 Jinja Syntax Jinja has been introduced in Web Applications (Flask) part 1. Now, let's delve deeper into the various elements that make up the Jinja syntax, which are utilized for defining and manipulating templates. Type Syntax Description Variables {{ }} Variables in Jinja are defined using the {{ }} tags. They are used to output dynamic content in the template. Example: {{ name }} in greet.html Control Structures {% if condition %} …… {% else %} …… {% endif %} In each of these examples, the control structure is defined using opening and closing tags, such as {% if %} and {% endif %} for if/else statements, and {% for %} and {% endfor %} for loops. The content to be executed within the control structure is then placed between these tags. {% for item in items %} … {% endfor %} Comments {# #} Comments in Jinja are define using the {# #} tags. They are used to add comments to the template that are ignored during rendering. Inheritance {% extends %} Inheritance in Jinja allows templates to inherit content from a base template. This is done using the {% extends %} tag. Example: {% extends "layout.html" %} Filters | Filters in Jinja are used to modify the output of a variable. They are defined using the | character. 2

Exercise 1 The exercise1.py application is designed to receive a name as a parameter from the URL and display a greeting in the browser with the format "Hello, [name]!". Complete the code in hello.html file and run the application to view the output in the browser. exercise1.py 01 02 03 04 05 06 07 08 09 10 from flask import Flask, render_template app = Flask(__name__) @app.route('/<my_name>') def index(my_name): return render_template('hello.html', name=my_name) if __name__ == '__main__': app.run() hello.html 01 02 03 04 05 06 07 08 09 10 <!DOCTYPE HTML> <html> <head> <title> {{ ________ }} </title> </head> <body> <h1>Hello, {{ ________ }}!</h1> </body> </html> 3

3 Using url_for In Flask, url_for() is a built-in function that is used to generate URLs based on the Python function name and its arguments. It takes the name of a function as its first argument, followed by any arguments required by that function. The url_for() function then returns a URL that corresponds to the specified function and arguments. Using url_for() in your Flask application is recommended over hardcoding URLs in your templates, because it allows you to change the URL routes in your application without having to update every template that references them. Additionally, url_for() can automatically handle URL encoding of arguments, making it easier to pass special characters or non-ASCII text in URLs. Let’s take a look at how we can implement url_for in index.html from the previous notes. app.py from flask import Flask, render_template, request app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') @app.route('/greet', methods=['POST']) def greet(): name = request.form["name"] return render_template("greet.html", name=name) if __name__ == '__main__': app.run() index.html referencing using decorator <!DOCTYPE html> <html> <head> <title>hello</title> </head> <body> <form action="/greet" method="post"> <input name="name" placeholder="Name" type="text"> <button type="submit">Greet</button> </form> </body> </html> 4

When using Flask, a function decorated with the @app.route() decorator maps to a URL route and returns a response that is sent to the client. Flask uses the URL path of an incoming request to determine which function should handle the request, and that function then generates a response which is returned to the client. In the above index.html file, the URL route /greet is mapped to a response, in app.py, that retrieves input from the user, renders the greet.html template, and passes the input name as an argument to be displayed in the browser. index.html using url_for() <!DOCTYPE html> <html> <head> <title>hello</title> </head> <body> <form action="{{ url_for("greet") }}" method="post"> <input name="name" placeholder="Name" type="text"> <button type="submit">Greet</button> </form> </body> </html> However, to avoid hardcoding, we can use the url_for() function to generate the appropriate URL. In order to use url_for() in our HTML form, we need to set the action attribute to action="{{ url_for("function_name") }}" , where function_name is the name of the Flask function that we want to submit the form data to. For example, if we have a function named greet() that we want to submit the form data to, we will set the form's action attribute to action="{{ url_for("greet") }}". This will generate the appropriate URL for the greet function, which will be used when the form is submitted. 5

Exercise 2 Complete the code for links.html using url_for(). links.py 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 from flask import Flask, render_template app = Flask(__name__) @app.route('/') def home(): return render_template('links.html') @app.route('/greeting') def hello(): return '<b>Hello World!</b>' @app.route('/<year>') def which_year(year): return 'The year is {}.'.format(year) if __name__ == '__ma