Python - Jinja2

class: split-30 nopadding
background-image: url(https://cloud.githubusercontent.com/assets/4231611/11557577/f6c9918e-99df-11e5-9c63-0bb70768fadf.jpg)

.column_t2.center[.vmiddle[
.fgtransparent[
# <i class="icon-python fa-4x"></i>
]
]]
.column_t2[.vmiddle.nopadding[
.shadelight[.boxtitle1[
# Python - Jinja2

### [Eueung Mulyana](https://github.com/eueung)
### http://eueung.github.io/python/jinja2
#### Python CodeLabs | [Attribution-ShareAlike CC BY-SA](https://creativecommons.org/licenses/by-sa/4.0/)
#### 
]]
]]

---
class: column_t1 middle

---
class: split-30 nopadding
background-image: url(https://cloud.githubusercontent.com/assets/4231611/11557577/f6c9918e-99df-11e5-9c63-0bb70768fadf.jpg)

.column_t2.center[.vmiddle[
.fgtransparent[
# <i class="icon-python fa-4x"></i>
]
]]
.column_t2[.vmiddle.nopadding[
.shadelight[.boxtitle1[
# Jinja Basics
#### 
]]
]]

---
class: split-50 nopadding

.column_t2[.vmiddle[
# Example #1/1-2

```
from jinja2 import Template

template = Template('Hello {{ name }}!')
*print template.render(name='John Doe')

t = Template("My favorite numbers: {% for n in range(1,10) %}{{n}} " "{% endfor %}")
*print t.render()
```

```
Hello John Doe!
My favorite numbers: 1 2 3 4 5 6 7 8 9 
```

]]
.column_t1[.vmiddle[

```
from jinja2 import Template

template = Template('''
<title>{% block title %}{% endblock %}</title>
<ul>
*{% for user in users -%}
  <li><a href="{{ user.url }}">{{ user.username }}</a></li>
*{% endfor -%}
</ul>''')

print template.render(title='title string', users=[{'username':'abc', 'url':'abc@gmail.com'},{'username':'123', 'url':'123@gmail.com'}])
```

```html
<title></title>
<ul>
<li><a href="abc@gmail.com">abc</a></li>
<li><a href="123@gmail.com">123</a></li>
</ul>
```

]]

---
class: split-50 nopadding

.column_t1[.vmiddle[
## Example #1/3

]]
.column_t2[.vmiddle[

```
*from jinja2 import Environment

HTML = """
<html><head> <title>{{ title }}</title> </head>
<body>Hello.</body>
</html>
"""

def print_html():
*   print Environment().from_string(HTML).render(title='Hello Title')

print_html()
```

```html
<html><head> <title>Hello Title</title> </head>
<body>Hello.</body>
</html>
```

]]

---
class: split-50 nopadding

.column_t2[.vmiddle[
# Example #2/1

```
from jinja2 import Environment, FileSystemLoader

THIS_DIR = 'templates'

def print_html():
*   j2_env = Environment(loader=FileSystemLoader(THIS_DIR), trim_blocks=True)
    
*   print j2_env.get_template('basic-1.html').render(
        title='Hello Title'
    )

print_html()
```

```html
<html>
<head>
*  <title>{{ title }}</title>
</head>
<body>
   Hello.
</body>
</html>
```
.center[basic-1.html]

]]
.column_t1[.vmiddle[

```html
<html>
<head>
*  <title>Hello Title</title>
</head>
<body>
   Hello.
</body>
</html>
```

]]

---
class: split-50 nopadding

.column_t2[.vmiddle[
## Example #2/2

```
import jinja2

templateLoader = jinja2.FileSystemLoader( searchpath="templates" )
templateEnv = jinja2.Environment( loader=templateLoader )

TEMPLATE_FILE = "basic-2.html"
*template = templateEnv.get_template( TEMPLATE_FILE )

FAVORITES = [ "chocolates", "lunar eclipses", "rabbits" ]

*templateVars = { "title" : "Test Example",
                 "description" : "A simple inquiry of function.",
                 "favorites" : FAVORITES }

*print template.render( templateVars )

```

]]
.column_t1[.vmiddle[

```html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
* <title>{{ title }}</title>
* <meta name="description" content="{{ description }}" />
</head>

<body>
<div id="content">
  <p>My Favorite Things:</p>

<ul>
* {% for item in favorites -%}
*   <li>{{ item }}</li>
* {% endfor -%}
  </ul>
</div>
</body>
</html>
```
.center[basic-2.html]

]]

---
class: split-50 nopadding

.column_t1[.vmiddle[
## Example #2/2

```html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
* <title>Test Example</title>
* <meta name="description" content="A simple inquiry of function." />
</head>

<body>
<div id="content">
  <p>My Favorite Things:</p>

<ul>
* <li>chocolates</li>
* <li>lunar eclipses</li>
* <li>rabbits</li>
  </ul>
</div>
</body>
</html>
```
]]
.column_t2[.vmiddle[

]]
---
class: split-50 nopadding

.column_t1[.vmiddle[
## Example #2/3

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Test Jinja2</title>
</head>
<body>
<center>
    <h1>Hello Jinja2</h1>
*   <p>Builtin Filters - {{ urls|length }} links</p>
</center>
<ol align="left">
*{% set counter = 0 -%}
*{% for url in urls -%}
*  {% set counter = counter + 1 -%}
*  <li><a href="{{ url }}">{{ url }}</a> | counter inside: {{ counter }} </li>
*{% endfor -%}
</ol>
*   <p>counter outside: {{ counter }}</p>
</body>
</html>
```
.center[basic-3.html]

]]
.column_t2[.vmiddle[

```
import os
from jinja2 import Environment, FileSystemLoader
 
PATH = '.'
TEMPLATE_ENVIRONMENT = Environment(
    autoescape=False,
    loader=FileSystemLoader(os.path.join(PATH, 'templates')),
    trim_blocks=False)
 
*def render_template(template_filename, context):
    return TEMPLATE_ENVIRONMENT.get_template(template_filename).render(context)
 
*def create_index_html():
*   fname = "results/output-basic-3.html"
    urls = ['http://example.com/1', 'http://example.com/2', 'http://example.com/3']
    context = {
        'urls': urls
    }
    with open(fname, 'w') as f:
*       html = render_template('basic-3.html', context)
        f.write(html)

create_index_html()
```

]]

---
class: column_t1 middle center

.figstyle1[
![](images/fig01.jpg)
]
### output-basic-3.html

---
class: split-30 nopadding
background-image: url(https://cloud.githubusercontent.com/assets/4231611/11557577/f6c9918e-99df-11e5-9c63-0bb70768fadf.jpg)

.column_t2.center[.vmiddle[
.fgtransparent[
# <i class="icon-python fa-4x"></i>
]
]]
.column_t2[.vmiddle.nopadding[
.shadelight[.boxtitle1[
# Rendering to Files
#### Based on the Codes by @[mjhea0](https://github.com/mjhea0) (Michael Herman/Real Python)
#### 
]]
]]

---
class: split-50 nopadding

.column_t2[.vmiddle[

*def create_index_html():
*   fname = "results/output-t-0.html"
    
    my_string="Hello!" 
    my_list=[0,1,2,3,4,5]

*   context = {
        'title' : 'title t-0',
        'my_string': my_string,
        'my_list': my_list
    }
*   with open(fname, 'w') as f:
*       html = render_template('t-0.html', context)
        f.write(html)

create_index_html()
```

]]
.column_t1[.vmiddle[
# Example t-0

```html
<div class="container">

* <p>My string: {{my_string}}</p>
* <p>Value from the list: {{my_list[3]}}</p>
  <p>Loop through the list:</p>
  <ul>
*   {% for n in my_list %}
*   <li>{{n}}</li>
*   {% endfor %}
  </ul>

</div>
```
.center[t-0.html (partial)]

]]

---
class: column_t1 middle center

.figstyle1[
![](images/fig02.jpg)
]
### output-t-0.html

---
class: split-50 nopadding

.column_t1[.vmiddle[
# Example t-1

```html
*{% extends "t-layout-1.html" %}
*{% block content %}
  <h3> This is the start of my child template</h3>
  <br>
  <p>My string: {{my_string}}</p>
  <p>Value from the list: {{my_list[3]}}</p>
  <p>Loop through the list:</p>
  <ul>
    {% for n in my_list %}
    <li>{{n}}</li>
    {% endfor %}
  </ul>
  <h3> This is the end of my child template</h3>
*{% endblock %}
```
.center[t-1.html]

]]
.column_t2[.vmiddle[

```
<div class="container">

<h2>This is part of my base template</h2>
  <br>
* {% block content %}{% endblock %}
  <br>
  <h2>This is part of my base template</h2>

</div>
```
.center[t-layout-1.html (partial)]

]]

---
class: column_t1 middle center

.figstyle1[
![](images/fig03.jpg)
]
### output-t-1.html

---
class: split-50 nopadding

.column_t2[.vmiddle[
# Example t-2

```html
{% extends "t-layout-2.html" %}

*{% block page %}Home{% endblock %}
*{% block heading %}
*  {{ super() }}
*{% endblock %}

{% block content %}
  <h3> This is the start of my child template</h3>
  <br>
  <p>My string: {{my_string}}</p>
  <p>Value from the list: {{my_list[3]}}</p>
  <p>Loop through the list:</p>
  <ul>
    {% for n in my_list %}
    <li>{{n}}</li>
    {% endfor %}
  </ul>
  <h3> This is the end of my child template</h3>
{% endblock %}

```
.center[t-2.html]

]]
.column_t1[.vmiddle[

```html
<div class="container">
* {% block heading %}
*   <h1>{% block page %}{% endblock %} - Flask Super Example</h1>
* {% endblock %}

<h2>This is part of my base template</h2>
  <br>
  {% block content %}{% endblock %}
  <br>
  <h2>This is part of my base template</h2>

</div>
```
.center[t-layout-2.html (partial)]

]]

---
class: column_t1 middle center

.figstyle1[
![](images/fig04.jpg)
]
### output-t-2.html

---
class: split-50 nopadding

.column_t2[.vmiddle[
# Example t-3

```html
{% extends "t-layout-3.html" %}

*{% block title %}{{title}}{% endblock %}
*{% block head %}
* {{ super() }}
*{% endblock %}

{% block page %}{{title}}{% endblock %}
{% block heading %} {{ super() }} {% endblock %}

{% block content %}
  <h3> This is the start of my child template</h3><br><br>
  <p>My string: {{my_string}}</p>
  <p>Value from the list: {{my_list[3]}}</p>
  <p>Loop through the list:</p>
  <ul> {% for n in my_list %}
    <li>{{n}}</li>
    {% endfor %} </ul>
  <br><p>Same list with a filter: {{ my_list|join(', ') }}</p>
  <h3> This is the end of my child template</h3>

* {% block trailer %} {{super()}} {% endblock %}

{% endblock %}
```
.center[t-3.html]

]]
.column_t1[.vmiddle[

```html
<div class="container">
  {% block heading %}
    <h1>{% block page %}{% endblock %} - Flask Super Example</h1>
  {% endblock %}
  <h2>This is part of my base template</h2>
  <br>
  {% block content %}{% endblock %}
  <br>
  <h2>This is part of my base template</h2>
  <br>
  <div class="trailer">
*   {% block trailer %}
*     Watch! This will be added to my base and child templates using the super powerful super block!
*     <br><br><br>
*   {% endblock %}
  </div>

```
.center[t-layout-3.html (partial)]

]]

---
class: split-50 nopadding

.column_t2[.vmiddle[
# Example t-3

```html
{% macro nav_link(endpoint, name) %}
  <li><a href="#{{ endpoint }}">{{name}}</a></li>
{% endmacro %}
```
.center[t-macro-3.html]

]]
.column_t1[.vmiddle[

```html
*{% from "t-macro-3.html" import nav_link with context %}
<!DOCTYPE html>
...
*{% block head %}
* <title>{% block title %}{% endblock %} - Flask Super Example</title>
*{% endblock %}
...

<div id="navbar" class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
*   {{ nav_link('home', 'Home') }}
*   {{ nav_link('about', 'About') }}
*   {{ nav_link('contact', 'Contact Us') }}

<li class="dropdown">
    ...</li>
  </ul>
</div>  
```
.center[t-layout-3.html (partial)]

]]

---
class: column_t1 middle center

.figstyle1[
![](images/fig05.jpg)
]
### output-t-3.html

---
class: split-30 nopadding
background-image: url(https://cloud.githubusercontent.com/assets/4231611/11557577/f6c9918e-99df-11e5-9c63-0bb70768fadf.jpg)

.column_t2.center[.vmiddle[
.fgtransparent[
# <i class="icon-python fa-4x"></i>
]
]]
.column_t2[.vmiddle.nopadding[
.shadelight[.boxtitle1[
# Jinja + Flask
#### 
]]
]]

---
class: split-50 nopadding

.column_t2[.vmiddle[

```
from flask import Flask, render_template
import datetime

app = Flask(__name__)
#---------------------------------------------
*@app.template_filter()
*def datetimefilter(value, format='%Y/%m/%d %H:%M'):
    return value.strftime(format)

*app.jinja_env.filters['datetimefilter'] = datetimefilter
#---------------------------------------------
*@app.route("/")
def template_test():
    return render_template('f-template.html', my_string="Wheeeee!", my_list=[0,1,2,3,4,5], title="Index", current_time=datetime.datetime.now())

*@app.route("/home")
def home():
    return render_template('f-template.html', my_string="Foo", my_list=[6,7,8,9,10,11], title="Home", current_time=datetime.datetime.now())

*@app.route("/about")
def about():
    return render_template('f-template.html', my_string="Bar", my_list=[12,13,14,15,16,17], title="About", current_time=datetime.datetime.now())

*@app.route("/contact")
def contact():
    return render_template('f-template.html', my_string="FooBar", my_list=[18,19,20,21,22,23], title="Contact Us", current_time=datetime.datetime.now())
#---------------------------------------------
if __name__ == '__main__':
    app.run(host='0.0.0.0',debug=True)
```

]]
.column_t1[.vmiddle[
# Example #4

```html
{% macro nav_link(endpoint, name) %}
*{% if request.endpoint.endswith(endpoint) %}
  <li class="active"><a href="{{ url_for(endpoint) }}">{{name}}</a></li>
*{% else %}
  <li><a href="{{ url_for(endpoint) }}">{{name}}</a></li>
*{% endif %}
{% endmacro %}
```
.center[f-macro.html]

]]

---
class: split-50 nopadding

.column_t1[.vmiddle[
# Example #4

]]
.column_t2[.vmiddle[

```html
{% extends "f-layout.html" %}

*{% block title %}{{title}}{% endblock %}
*{% block head %} {{ super() }} {% endblock %}

*{% block page %}{{title}}{% endblock %}
*{% block heading %} {{ super() }} {% endblock %}

{% block content %}
  <h3> This is the start of my child template</h3>
  <br>
* <h4>Current date/time: {{ current_time | datetimefilter }}</h4>
  <br>
  <p>My string: {{my_string}}</p>
  <p>Value from the list: {{my_list[3]}}</p>
  <p>Loop through the list:</p>
  <ul>
*   {% for n in my_list %}
    <li>{{n}}</li>
*   {% endfor %}
  </ul>
  <br>
* <p>Same list with a filter: {{ my_list|join(', ') }}</p>
  <h3> This is the end of my child template</h3>

* {% block trailer %} {{super()}} {% endblock %}

{% endblock %}
```
.center[f-template.html]

]]

---
class: column_t1 middle center

.figstyle1[
![](images/fig06.jpg)
]
### http://localhost:5000

---
class: column_t1 middle center

.figstyle1[
![](images/fig07.jpg)
]
### http://localhost:5000/about

---
# References

1. [Welcome to Jinja2 — Jinja2 Documentation](http://jinja.pocoo.org/docs/dev/)
1. [Introduction](http://jinja.pocoo.org/docs/dev/intro/)
1. [Tips and Tricks](http://jinja.pocoo.org/docs/dev/tricks/)
1. [Template Designer](http://jinja.pocoo.org/docs/dev/templates/)
1. [Primer on Jinja Templating - Real Python](https://realpython.com/blog/python/primer-on-jinja-templating/)

# Other Readings
1. [Jinja2 Example | Python Adventures](https://pythonadventures.wordpress.com/2014/02/25/jinja2-example-for-generating-a-local-file-using-a-template/)
1. [Jinja2 Examples](https://gist.github.com/wrunk/1317933)
1. [Quickstart Guide to Using Jinja2](http://kagerato.net/articles/software/libraries/jinja-quickstart.html)

---
class: split-30 nopadding
background-image: url(https://cloud.githubusercontent.com/assets/4231611/11557577/f6c9918e-99df-11e5-9c63-0bb70768fadf.jpg)

.column_t2.center[.vmiddle[
.fgtransparent[
# <i class="icon-python fa-4x"></i>
]
]]
.column_t2[.vmiddle.nopadding[
.shadelight[.boxtitle1[
# END