Templates
- Flask'a merhaba dedikten sonra bu bölümde biraz template'ler ile haşır neşir olacağız.
index()methodumuzu birazcık geliştirelim.
myapp/routes.py
xxxxxxxxxx# internalfrom myapp import app.route('/').route('/index')def index(): user = {'username': 'Adnan'} return ''' <html> <head> <title>Anasayfa- Blog</title> </head> <body bgcolor="#e0ebeb"> <h1>Selam '''+user['username']+'''!</h1> </body> </html> '''
index()methodumuz bize yine bir string dönüyor ancak bu string HTML kodları barındırıyor. Web browser'da görüntülediğimiz zaman da bu string yani HTML kodları yorumlanacak ve yukarıdaki görünüm elde edilecek.- Fark ettiyseniz
index()methodunun döndüğü HTML kodları içeren string işi bayağı yokuşa sürüyor. Eğer projeniz büyürse ve siz çeşitli html sayfalarına ihtiyaç duyacak olursanız, gerçekten takibi, yazımı eziyet veren bir durum halini alacaktır bu durum. - Yazılım geliştirmede clean code (temiz, anlaşılır kod), modularization (modülerlik) gibi prensipler projenin takibi, sürdürülebilirliği, test edilebilirliği vb. açısından çok önemlidir.
- Şimdi biz projemizi daha modüler hale getirelim ve şu eziyetten kurtulalım.
myapp/klasörü altındatemplatesadında bir klasör oluşturalım. HTML dosyalarımız burada duracak.
myapp/templates/index.html
xxxxxxxxxx<html><head> <title>{{title}}- Blog</title></head><body bgcolor="#e0ebeb"> <h1>Selam {{user.username}}! </h1></body></html>
myapp/routes.py
xxxxxxxxxx# externalfrom flask import render_template# internalfrom myapp import app.route('/').route('/index')def index(): user = { 'username': 'Adnan' } return render_template('index.html', title='Anasayfa', user=user)- Flask varsayılan olarak
myapp/altındakitemplatesklasörüne bakıyor veindex.htmlvar ise bizim için html sayfasınırender_templatemethodu yardımıyla işliyor(render ediyor). - Methoda verilen diğer parametreler ile de html sayfasına python tarafından veri göndermiş oluyoruz. Python tarafından title parametresine 'Anasayfa' stringini , user'a da dictionary tipindeki objeyi atadık.
- index.html'deki
{{ ... }}süslü parantezlerijinjatemplate engine'ın bize sunduğu template dilidir. - Kodlarınızda değişiklikleri yaptıktan sonra tekrar çalıştırdığınızda aynı sonucu alacaksınız.
Jinja2 template diline biraz daha bakalım.
index.htmldosyamızı düzenliyoruz.
xxxxxxxxxx<html><head> {% if title%} <title>{{title}}- Blog</title> {% else%} <title> Home- Blog</title> {%endif%}</head><body bgcolor="#e0ebeb"> <h1>Selam {{user.username}}! </h1> <ul><hr /> {% for post in posts %} <li> <h3>{{post.author}}</h3> <span>{{post.body}}</span> </li> <hr /> {%endfor%} </ul></body></html>
def index()methodumuzu da düzenleyelim.
xxxxxxxxxx#...def index(): user = { 'username': 'Adnan' } posts = [ {'author':'Mehmet', 'body':'Asp .NET ile MVC'}, {'author':'Hamit', 'body':'Java ile Android Programlama'} ] return render_template('index.html', title='Anasayfa', user=user, posts=posts)- Bu defa python tarafından dictionary objeleri içeren bir liste gönderdik.
- Eğer
titleboş değilse belirlenmiş title'ı yazacak boş ise 'Home' olacak. - index.html dosyasında
Jinjatemplate dilinde yazılan{% if %}, {% for ..%}kullanımlarını görüyorsunuz.{% endif %} ve {%endfor%}ile de if ve for statementlarını kapatıyoruz. postslistesini for dögüsüne alıp elemanlarına erişimi de javascript dilindeki gibinokta(.)ile yapıyoruz. (post.author, post.body).
Template Inheritance (Template Kalıtımı)
- Web sitelerinde her sayfada değişmeyen temel kodlar, menüler, navigation-bar.. gibi bölümler olur. Bunları tekrar tekrar yazmak zorunda değiliz.
- Jinja2'nın bize sunduğu template inheritance özelliğini kullanacağız.
myapp/templates/altında base.html dosyasını oluşturalım. Bu bizim temel template'imiz olacak.
xxxxxxxxxx<html><head> {% if title%} <title>{{title}}- Blog</title> {% else%} <title>Blog'a hoşgeldiniz.</title> {%endif%}</head><table> <tr> <td><a href="/index">Anasayfa</a></td> </tr></table><hr /> <!-- body olarak kullanılacak kısım -->{% block content %} {%endblock%}</html>
index.htmldosyası:
xxxxxxxxxx{% extends 'base.html' %}{%block content %}<h1>Selam {{user.username}}! </h1><ul> <hr /> {% for post in posts %} <li> <h3>{{post.author}}</h3> <span>{{post.body}}</span> </li> <hr /> {%endfor%}</ul>{% endblock %}extends 'base.html'diyerek temel template'ten kalıtım sağladık.- index.html'deki
{%block content%} .. {%endblock%}arasına yazacağımız html kodları artık base.html'deki block content ... endblock kodlarına karşılık gelecek. - Bundan sonra aynı kodları tekrar tekrar yazmak zorunda değiliz.
Yorumlar