Tuesday, October 4, 2022

Sample html file to display in the ouput

 Instead of generating the html content on the run from python code, we can use existing html files also.


sample html file:

# USE WITH THE PYTHON FILE PROVIDED

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Home</title>
</head>
<body>
    <h1>Hello, Welcome Home...</h1>
    <h2>This is from the html file</h2>
</body>
</html>

And we can use the python code to use this and generate output.


# rendering templates
@app.route('/temp')
def using_templates():
    return render_template('hello.html')

We can use jinja templating to replace content in the html file with the data we pass at runtime

We can use variables inside them {{}} as place holders in template.

we can pass variables, lists,etc
{{ variable }}
{%  logic %} like if else, for loop,etc

sample template html:

<!-- HTML CODE FOR JINJA2: PART 1 -->
<!-- USE WITH THE PYTHON FILE PROVIDED -->

<!DOCTYPE html>
<html lang="en">
    <head>

        <meta charset="UTF-8">
        <title>Watchable</title>

    </head>
    <body>

        <h1> Movies to Watch </h1>
        <h2> This Collection Belongs to {{ name }} </h2>

        <h3> movies: {{ movies }} </h3>
        <h3> first: {{ movies[0] }} </h3>
        <h3> slicing: {{ movies[1:4] }} </h3>
        <hr>
       
        <ul>
            {% for item in movies %}
                <li> the movie is : {{ item }} </li>
            {% endfor %}
        </ul>
    </body>
</html>

python code to parse it.


# code for the lesson "jinja templating part 1"
# section 3: lecture 12
# USE THIS CODE IN CONJUNCTION WITH THE HTML PROVIDED

from flask import Flask, render_template, request

app = Flask(__name__)


@app.route('/index')
@app.route('/')
def hello_flask():
    return 'Hello Flask'


@app.route('/new/')
def query_string(greeting='hello'):
    query_val = request.args.get('greeting', greeting)
    return '<h1> the greeting is: {0} </h1>'.format(query_val)


@app.route('/user')
@app.route('/user/<name>')
def no_query_strings(name='mina'):
    return '<h1> hello there ! {} </>'.format(name)


# strings
@app.route('/text/<string:name>')
def working_with_strings(name):
    return '<h1> here is a string: ' + name + '</h1>'


# numbers
@app.route('/numbers/<int:num>')
def working_with_numbers(num):
    return '<h1> the number you picked is: ' + str(num) + '</h1>'


# add numbers
@app.route('/add/<int:num1>/<int:num2>')
def adding_integers(num1, num2):
    return '<h1> the sum is : {}'.format(num1 + num2) + '</h1>'


# floats
@app.route('/product/<float:num1>/<float:num2>')
def product_two_numbers(num1, num2):
    return '<h1> the product is : {}'.format(num1 * num2) + '</h1>'


# rendering templates
@app.route('/temp')
def using_templates():
    return render_template('hello.html')


# JINJA TEMPLATES
@app.route('/watch')
def top_movies():
    movie_list = ['autopsy of jane doe',
                  'neon demon',
                  'ghost in a shell',
                  'kong: skull island',
                  'john wick 2',
                  'spiderman - homecoming']

    return render_template('movies.html',
                           movies=movie_list,
                           name='Harry')


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

Display the data in the dictionary as a table and also show a new column based on a condition using if else.

tabular:


# code for the lesson "jinja templating part 1"
# section 3: lecture 12
# USE THIS CODE IN CONJUNCTION WITH THE HTML PROVIDED

from flask import Flask, render_template, request

app = Flask(__name__)


@app.route('/index')
@app.route('/')
def hello_flask():
    return 'Hello Flask'


@app.route('/new/')
def query_string(greeting='hello'):
    query_val = request.args.get('greeting', greeting)
    return '<h1> the greeting is: {0} </h1>'.format(query_val)


@app.route('/user')
@app.route('/user/<name>')
def no_query_strings(name='mina'):
    return '<h1> hello there ! {} </>'.format(name)


# strings
@app.route('/text/<string:name>')
def working_with_strings(name):
    return '<h1> here is a string: ' + name + '</h1>'


# numbers
@app.route('/numbers/<int:num>')
def working_with_numbers(num):
    return '<h1> the number you picked is: ' + str(num) + '</h1>'


# add numbers
@app.route('/add/<int:num1>/<int:num2>')
def adding_integers(num1, num2):
    return '<h1> the sum is : {}'.format(num1 + num2) + '</h1>'


# floats
@app.route('/product/<float:num1>/<float:num2>')
def product_two_numbers(num1, num2):
    return '<h1> the product is : {}'.format(num1 * num2) + '</h1>'


# rendering templates
@app.route('/temp')
def using_templates():
    return render_template('hello.html')


# JINJA TEMPLATES
@app.route('/watch')
def top_movies():
    movie_list = ['autopsy of jane doe',
                  'neon demon',
                  'ghost in a shell',
                  'kong: skull island',
                  'john wick 2',
                  'spiderman - homecoming']

    return render_template('movies.html',
                           movies=movie_list,
                           name='Harry')


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

table html

<!-- HTML FOR JINJA2 - PART 2 -->
<!-- USE WIHT THE PYTHON FILE PROVIDED -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>movie durations</title>
    </head>

    <body>
        <h2>This Collection Belongs to {{ name }} </h2>

        <table>
            <tr>
                <th> movie </th>
                <th> length </th>
                <th> comments </th>
            </tr>

            {% for movie, length in movies.items() %}
                <tr>
                    <td> {{ movie }} </td>
                    <td> {{ length }} </td>
                        {% if length <= 2 %}
                            <td> short </td>
                        {% elif length >= 2 and length <=3 %}
                            <td> medium </td>
                        {% else %}
                            <td style="color: red">long</td>
                        {% endif %}
                </tr>
            {% endfor %}
        </table>
    </body>
</html>
s

No comments:

Post a Comment