Jinja Esprimoj kaj Logiko

Unue iom sintakso

Jinja estas sufiĉe facile legi kaj skribi. La logiko estas tre simila al Python, sed la maniero skribi estas iom malsama.

Estas du manieroj skribi kodon en Jinja, kaj ambaŭ faras malsamajn aferojn. Ni nun pli zorge rigardu kiel ni uzas ilin.

Esprimoj

La unua estas por kodo nomata “Esprima” kodo. Ĉi tiu elmontos la rezulton de la skriptokodo al HTML.

Ĉi tiu estas skribata per uzo de duoblaj krampoj {{ kodo iras ĉi tie }}.

Ni komencu kun iom da ekzemplokodo.

Tasko 1 - Sendi variablojn al ŝablono

Antaŭ ol ni povu skribi iun Jinja-kodon, ni devas havi iom da datumoj por uzi en la ŝablono.

Ekfunkciigu novan Flask-projekton (aŭ daŭrigu la antaŭan), kaj enmetu variablon por konservi nomon.

return render_template("index.html", variable_name=variable_value)

from flask import Flask, render_template

app = Flask(__name__)

name = "John Doe"

@app.route("/")
def index():
    return render_template("index.html", name=name)

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

Tasko 2 - Uzi variablojn en ŝablono

Nun kiam ni sendas variablon al la ŝablono, ni povas uzi ĝin per Jinja en nia ŝablono.

Kreu alineon (<p>) en index.html kie vi skribas Mia nomo estas sekvita de la nomo kiun vi sendis en la ŝablono. Ĉi tie oni uzas la sintakson {{ variable_name }}.

<p>Mia nomo estas {{ name }}</p>

Tasko 3 - Kontakto por kontaktlisto

Ŝanĝu la variablon name al variablo contact. Tio devus esti vortaro {} kiu tenas spuron de ĉiuj informoj pri persono.

Enmetu la jenajn informojn:

• Antaŭnomo
• Familinomo
• Telefonnumero
• Retpoŝto
• Adreso

Se vi bezonas rekapti informojn pri vortaroj, vi povas iri tien Python Dictionaries.

... # resten av koden

contact = {
    'name': 'John',
    'surname': 'Doe',
    'phone': '990-99-099',
    'email': 'john@example.com',
    'address': '99 Main St, Somewhere, USA',
}

@app.route("/")
def index():
    return render_template("index.html", contact_info=contact)

... # resten av koden

Tasko 4 - Uzi la kontakton en ŝablono

Por uzi leksikonon en Jinja, ĝi estas tute same kiel vi faras tion en Python. Ĉion vi bezonas estas skribi variable_name.variable_value, kompreneble, anstataŭigu variable_name kaj variable_value per la valoro kiun vi sendis.

Kreu <div> kun taŭgaj etikedoj kiuj eldonas ĉiujn kontaktoinformojn.

<div>
  <p>Nomo: {{ contact.name }} {{ contact.surname}}</p>
  <p>Telefono: {{ contact.phone }}</p>
  <p>Retpoŝto: {{ contact.email }}</p>
  <p>Adreso: {{ contact.address }}</p>
</div>

Logiko

La dua strukturo en Jinja estas por logiko kaj speciala funkcialeco. Ĉi tiuj estas skribitaj per la sekva sintakso: {% %}.

Tasko 5 - Kontaktlisto

Modifu la kodon por konservi unu kontakton kiel liston, kiu tenas spuron de pluraj kontaktoj. Vi povas uzi liston [] kun vortaroj {} ene por testado.

Eble vi ankaŭ povas konservi la datumojn en .json-dosieron kaj poste legi ĝin de python.

from flask import Flask, render_template

app = Flask(__name__)

contact_info = [
    {
        'name': 'John',
        'surname': 'Doe',
        'phone': '990-99-099',
        'email': 'john@example.com',
        'address': '99 Main St, Somewhere, USA',
    },
    {
        'name': 'Jane',
        'surname': 'Smith',
        'phone': '111-11-111',
        'email': 'jane@email.com',
        'address': '99 Not-so-main St, Nowhere, Canada', 
    },
    # legg til flere { } blokker nedover for flere kontakter
]

@app.route("/")
def index():
    return render_template("index.html", contacts=contact_info)

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

Tasko 6 - for-loop en Jinja.

Nun venas nia unua “logika bloko” en Jinja, do pretigu vin: la for-loop! 😎

Ĉi tie ni uzos la {% %} blok-sintakson.

Tasko 6a - for-ciklo

Kreu for-ciklon skribante {% for value in values %}.

{% for contact in contacts %}
  <div class="contact" style="border: 1px solid black;">
    Kontaktinformasjon aperas ĉi tie!
  </div>
{% endfor %}

Tasko 6b - Enmetu la datenon

Nun Jinja trairas kontakton post kontakto. Enmetu la kodon el pli frue por elprinti ĉiujn kontaktoinformojn en la ciklo.

{% for contact in contacts %}
  <div class="contact" style="border: 1px solid black;">
    <p class="contact-field">Nomo: {{ contact.name }} {{ contact.surname}}</p>
    <p class="contact-field">Telefono: {{ contact.phone }}</p>
    <p class="contact-field">Retpoŝto: {{ contact.email }}</p>
    <p class="contact-field">Adreso: {{ contact.address }}</p>
  </div>
{% endfor %}

Tasko 7 - if kaj else

Pli alia logika bloko kiu ekzistas estas la if kaj else bloko. Al kelkaj el la kontaktoj en via listo, aldonu novan kampon nomatan job kun valoro.

Poste, en la contact <div>, enmetu {% if %} kiu kontrolas ĉu la kontakto havas laboron. Se ili havas laboron, enmetu novan alineon kiu enhavas la laborinformojn. Ne forgesu la finan etikedon!

{% for contact in contacts %}
  <div class="contact" style="border: 1px solid black;">
    <p class="contact-field">Nomo: {{ contact.name }} {{ contact.surname}}</p>
    <p class="contact-field">Telefono: {{ contact.phone }}</p>
    <p class="contact-field">Retpoŝto: {{ contact.email }}</p>
    <p class="contact-field">Adreso: {{ contact.address }}</p>
    {% if contact.job %}
      <p class="contact-field">Laboro: {{ contact.job }}</p>
    {% endif %}
  </div>
{% endfor %}

Ekstra Taskoj

Jen kelkaj pliaj taskoj!

Tasko E1 - Nun fariĝos bele!

Enmetu stilfolion en vian ŝablonon uzante url_for. Tio estis menciita en Nivelulo 2, sed, se vi bezonas refreŝigon, vidu sube.

<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

Uzu poste la stilarkon por “stiligi” la kontakto-skatolojn.

Tasko E2 - Profilbildoj!

Aldonu kampon en la kontaktlisto kiu tenas spuron pri profilbildo por kontakto.

Uzu poste url_for por ligi ĉi tiun bildon. Kreu ŝajne dosierujon en static kiu nomiĝas img.

'img/' + contact.image

Tasko E3 - Ĉu vi riĉa aŭ malriĉa?

• Aldonu kampon salary al la kontaktoj.
• Poste uzu if, elif kaj else por ŝanĝi la koloron de la teksto bazite sur salajro.
• Verda se la salajro estas super 1 000 000
• Flava se la salajro estas super 500 000
• Oranĝa se la salajro estas sub 500 000

... # resten av koden
contact_info = 
[
    {
        'name': 'John',
        'surname': 'Doe',
        'phone': '990-99-099',
        'email': 'john@example.com',
        'address': '99 Main St, Somewhere, USA',
        'job': 'Office work',
        'salary': 750000,
    },
    ...
]
...

{% for contact in contacts %}
  <div class="contact" style="border: 1px solid black;">
    <p class="contact-field">Name: {{ contact.name }} {{ contact.surname}}</p>
    <p class="contact-field">Phone: {{ contact.phone }}</p>
    <p class="contact-field">Email: {{ contact.email }}</p>
    <p class="contact-field">Address: {{ contact.address }}</p>
    {% if contact.job %}
      <p class="contact-field">Job: {{ contact.job }}</p>
      {% if contact.salary %}
        <p class="contact-field salary-
        {% if contact.salary > 1000000 %}
          high
        {% elif contact.salary > 500000 %}
          medium
        {% else %}
          low
        {% endif %}
        ">{{contact.salary}}</p>
      {% endif %}
    {% endif %}
  </div>
{% endfor %}

Tasko E4 - Neniu Bildo? Neniu Problemo!

Uzu Jinja if por kontroli ĉu la kontakto havas profilbildon. Se ne, donu al la uzanto “default” profilbildon.