5- Web Sayfaları Oluşturmak 

Flask ile temel şablon yapımızı oluşturduk, menümüzü hazırladık, ama henüz menüdeki sayfalar mevcut değiller. Şimdi bu sayfaları oluşturalım.

İlk önce hakkımızda sayfasının oluşturalım. Proje klasörümüz içinde oluşturduğumuz standart şablon klasörü templates altında hakkimizda.html isimli bir dosya oluşturalım ve bu sayfa da temel.html şablonundan miras alsın.

{% extends "temel.html" %}

Menümüzün içinde yer aldığı baslik.html dosyasını açalım ve menüdeki “Hakkımızda” elemanının bağlantısını /hakkimizda.html olarak değiştirelim.

<li class="nav-item">
    <a class="nav-link"href="/hakkimizda">Hakkımızda</a>
</li>

Tabii bu kadarla bitmiyor. Daha önceki konulardan hatırlayacağınız üzere main.py python dosyamızda kullanıcı bu adresi talep ettiğinde çalıştırılacak bir fonksiyon oluşturmalıyız;

from flask import Flask, render_template

ilkproje = Flask(__name__)

@ilkproje.route("/")
def anasayfa():
    return render_template("index.html")

@ilkproje.route("/hakkimizda")
def hakkimizda():
    return render_template("hakkimizda.html")
 
if __name__ == '__main__':
    ilkproje.run(debug=True)

Şimdi web tarayıcısında http://127.0.0.1:5000/ adresine gidelim ve hakkımızda linkine tıklayalım;

Web adresinden anladığımız kadarıyla hakkımızda sayfasını başarılı bir şekilde oluşturmuş ve ziyaret etmiş durumdayız. Çünkü, şu anda ana sayfa gibi hakkımızda sayfası da temel.html dosyasından miras alarak oluşturulduğu için içerikleri henüz aynı.

Ancak doğal olarak her web sayfasının içeriği diğerinden farklı olmalıdır. Dolayısıyla içerik kısmını ziyaret edilen sayfaya göre değiştirecek dinamik bir yapıya sahip olmalıyız. Bu da Flask’ın Blok yapısıyla mümkündür. Şablon dosyaları içinde;

{% block blokadı %}

{% endblock %}

formatında dinamik içerik alanları üretebilirsiniz. Bu alanlar ile nesne tabanlı programlamanın miras kavramını kullanarak dinamik içerikler üretebilirsiniz. Bildiğiniz gibi miras kavramında alt sınıf içinde miras alınan üst sınıf ile aynı isme sahip bir metod oluşturduğunuzda üzerine yazma(overriding) sayesinde alt sınıf kendi metodunu kullanabiliyordu. Benzer şekilde miras alınan HTML şablonu içinde oluşturduğunuz blok adı ile aynı olan blokları alt sayfalarda kullandığınızda her sayfa kendi içeriğine sahip olacaktır.

Örneğin, sayfaları miras aldığımız ana şablon dosyamız olan temel.html sayfamız içinde

{% block icerik %}

{% endblock %}

{% include "baslik.html" %}
{% include "icerik.html" %}

<div class="row">
    <div class="col-8">
        {% block icerik %}
        {% endblock %}
    </div>
    <div class="col-4">
        {% include "yansutun.html" %}
    </div>
</div>

{% include "altalan.html" %}

{% extends "temel.html" %}

{% block icerik %}

    <p>Bu içerik ana sayfaya aittir.</p>

{% endblock %}

{% extends "temel.html" %}

{% block icerik %}
<h2>Hakkımızda</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
{% endblock %}