Flask uygulama geliştirme iskeleti(framework) Python ile kodladığınız sunucu tarafı(backend) web geliştirme kodlarınızın, arayüz görünümü(frontend) işlemleri için Jinja2 şablon oluşturma dilini kullanır.

Böylece MVC(Model-View-Controller) yazılım mimarisine uygun bir yapıda kurulmuş olur. MVC(Model-View-Controller) uygulama geliştirirken verinin(model), kullanıcı arayüzü(view) ile sunucu tarafı geliştirme yapılan yazılım kodlarından(controller) ayrılması işlemidir. Bu sayede büyük projeler geliştirirken, birbirinden bağımsız geliştirilen bu bileşenlerden biri farklı bir teknolojiye geçtiğinde ya da güncellendiğinde diğerleri etkilenmeden çalışmaya devam edebilecektir. Örneğin projenizde sunucu tarafı geliştirme işlemlerinizi Python dili ile oluşturdunuz, veri(model) katmanını SQLite ile oluşturdunuz, kullanıcı arayüzünde ise HTML, CSS ile birlikte jQuery kullandınız. İlerleyen zamanlarda veri tarafında SQLite yetersiz gelmeye başladı ve MySQL ya da PostgreSQL gibi farklı bir veritabanına geçmeye karar verdiniz. Aynı zamanda kullanıcı arayüzünü de yeni bir uygulama geliştirme iskeleti(framework) olan React ile yeniden oluşturmak istediniz. Bu durumda, sunucu tarafı geliştirme için yazdığınız Python kodlarınızı(controller) hiç değiştirmeden, kullanıcı arayüzünü(React) ya da veritabanını(Model) bağımsız olarak değiştirebilir ya da güncelleyebilirsiniz. Bu yazılım mimarisi ile çalışmanın bir diğer avantajı da, her bir bölümü (Model, View,Controller) geliştiren yazılımcıların birbirinden bağımsız çalışabilme imkanına sahip olmasıdır.

İşte Jinja2 şablonları da Python kodlarınız için HTML sayfaları ile adapte olarak kullanıcı arayüzü oluşturmanıza imkan vererek MVC yazılım mimarisinin görünüm(View) katmanını oluşturmaktadır. Böylece tasarım ve kodun birbirinden ayrıştırılmasını, arayüz geliştirici ile sunucu tarafı geliştiricinin birbirinden bağımsız geliştirme yapabilmesini sağlar.

Jinja2 metin tabanlı bir tasarım dilidir. HTML içine verilerin bağlanmasını ve hatta fonksiyonların çağırılarak çalıştırılmasını sağlar.

Kullanım amacını açıkladığımız bu teknik bilgiden sonra uygulama örneklerimiz ile konunun daha net anlaşılmasını sağlayalım.

Bir önceki konuda, Flask modülünün Flask sınıfı ile Python fonksiyonları yazarak ilk web sayfalarımızı oluşturmuştuk ama bu sayfalar bize metin(string) döndürüyordu ve bu metinler de web tarayıcı içinde gösteriliyordu.

Ancak günümüzde web sayfaları metin görüntülemekten daha estetik tasarımlara ve işlevlere sahipler. Biz de Python kodumuzdan metin döndürmek yerine jinja2 ile oluşturulmuş HTML şablonları döndüreceğiz.

Ancak oluşturulan şablonun içerdiği kodların web tarayıcının anlayabileceği şekilde HTML kodlarına dönüştürülmesi(render) işlemi için flask modülünün render_template metodunu kodumuza eklemeliyiz.

Bu metod HTML şablonlarını varsayılan olarak templates isimli bir klasör içinde arayacaktır. Öyleyse proje klasörümüz içinde templates isimli bir klasör oluşturup, şablon dosyalarımızı bu klasör içine yerleştirerek ona kolaylık sağlayalım.

Daha sonra bu klasör içinde yeni bir dosya oluşturarak  jinja2 HTML şablonumuzun kodlarını bu dosyaya ekleyelim. Bu dosyamız bildiğimiz .html uzantılı bir dosyadır ve içinde HTML etiketleri ve CSS kullanabiliriz. Normal HTML sayfasından farklı olarak Python kodlarımızın nasıl eklendiğini de şimdi öğreneceğiz.

Dosyamıza index.html adını verelim ve içine standart HTML kodlarını ekleyelim;

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ana Sayfa</title>
</head>
<body>
    
</body>
</html>

HTML sayfamız içine bir miktar içerik ekleyelim.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ana Sayfa</title>
</head>
<body>
    <h2>Ana Sayfa</h2>
    <p>İlk Flask web sayfamıza Hoş Geldiniz!</p>
    <p>İlerleyen derslerde başarılar dilerim.</p>
    
</body>
</html>

Şimdi de daha önce kullanıcının web tarayıcısına metin döndürdüğümüz Python fonksiyonumuzdan bu HTML sayfasını nasıl döndüreceğimizi görelim. Tabii ilk işimiz render_template modülünü de Python kodumuza eklemek. Daha sonra da basit bir şekilde ana sayfayı oluşturan fonksiyonumuz içinde render_template() metoduna parametre olarak oluşturduğumuz HTML sayfasını vereceğiz;

from flask import Flask, render_template

ilkproje = Flask(__name__)

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

@ilkproje.route("/iletisim")
def iletisim():
    metin = """
    İletişim<br/>
    <p>
    Oben SEVEN<br/>
    Tel: 0 555 555 55 55<br/>
    E-mail: obenseven@obenseven.com.tr</p>
    """
    return metin

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

Dosyalarımız kaydedip web tarayıcımızda http://127.0.0.1:5000/ adresini ziyaret ettiğimizde;

2- HTML Şablon Dosyaları 1

HTML sayfamızın içeriğinin yer aldığını görüyoruz.

Şu ana kadar Flask’ın nasıl çalıştığı ve web sayfalarını nasıl görüntülediğini öğrendik. Ama görüntülediğimiz sayfa statik, yani içeriği sabit bir sayfadır. Oysa Python programlama dilini kullanarak web sayfaları oluşturmadaki amacımız dinamik web sayfaları elde etmek. Öyleyse bir sonraki adımda, bu web sayfasında Python kodlarını nasıl kullanabileceğimize bakalım.

Şimdi web sayfamıza bir Python verisi gönderelim. Bir değişken oluşturalım ve içinde iki sayının toplamının değerini depolayalım. Bu veriyi HTML şablonu içine göndermemiz için render_template() metoduna anahtar = değişkenadı şeklinde bir parametre olarak eklememiz gerekiyor;

from flask import Flask, render_template

ilkproje = Flask(__name__)

@ilkproje.route("/")
def anasayfa():
    toplam = 34 + 87
    return render_template("index.html", sonuc = toplam)

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

Daha sonra HTML şablonu içine bu anahtarı çift süslü parantez arasında yerleştirmeliyiz;

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ana Sayfa</title>
</head>
<body>
    <h2>Ana Sayfa</h2>
    <p>İlk Flask web sayfamıza Hoş Geldiniz!</p>
    <p>İlerleyen derslerde başarılar dilerim.</p>
    <p><br/></p>
    <p>Basit bir toplama işleminin sonucunu Python'dan alalım:</p>
    <p>34 + 87 = {{ sonuc }}</p>
</body>
</html>

Web sayfamıza göz attığımızda Python kodumuz içindeki verinin karşımıza geldiğini görüyoruz;

2- HTML Şablon Dosyaları 2

 

Bildiğiniz gibi Python’da en çok kullanılan veri türleri listeler, sözlükler gibi birden çok veriyi içinde barındırabilen yapılardır. Peki bu veri türleriyle çalışırken HTML şablonlarını nasıl kullanabiliriz?

Basit şekliyle sözlüklerin içindeki verilere eriştiğimiz şekilde HTML şablonu içinde de aynı şekilde sözlük verilerine erişebiliriz;

from flask import Flask, render_template

ilkproje = Flask(__name__)

@ilkproje.route("/")
def anasayfa():
    toplam = 34 + 87
    makale ={
        "baslik":"Python’da Veri Koleksiyonları – Sözlükler",
        "icerik":"Python veri koleksiyonlarından son olarak inceleyeceğimiz Sözlükler(Dictionaries)dir. Yapı olarak diğer programlama dillerindeki nesne veri türüne benzerdir. Süslü parantez içinde anahtar-değer ikilileri şeklinde depolanır. Sözlükler; sıra numarasına sahip olmayan ve  her anahtarın küme içinde yalnızca bir kez bulunabildiği tekrar etmeyen veri koleksiyonlarıdır. İçindeki veriler anahtar olarak da ifade edilen değişken isimleri ile indekslenmiş olup, depoladıkları değerler değiştirilebilir.",
        "yazar": "Oben Seven"
    }

    return render_template("index.html", sonuc = toplam, makale = makale) 

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

HTML şablonumuzda da standart sözlük verilerine erişim formatında yazarak erişebiliriz;

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ana Sayfa</title>
</head>
<body>
    <h2>Ana Sayfa</h2>
    <p>İlk Flask web sayfamıza Hoş Geldiniz!</p>
    <p>İlerleyen derslerde başarılar dilerim.</p>
    <p><br/></p>
    <p>Basit bir toplama işleminin sonucunu Python'dan alalım:</p>
    <p>34 + 87 = {{ sonuc }}</p>
    <p><br/></p>
    <h3>{{ makale["baslik"] }}</h3>
    <p>{{ makale["icerik"] }}</p>
    <p><b>Yazar:</b> {{ makale.yazar }}</p>
</body>
</html>

Burada her iki farklı erişim şeklini görmeniz için yazar değişkeni değerine nokta operatörü aracılığıyla ulaştığımıza dikkat ediniz. Bu değişikliklerden sonra web sayfamız ise;

flask python