Flask başlangıç

Desenler

Bu derste html desenleri kullanarak nasıl etkileşimli web sayfaları oluşturabileceğimizden bahsediyoruz.

İlk dersimizde Flask'a bir başlangıç yapmış ve basit bir Flask uygulaması yazmıştık. Bu derste giriş düzeyinde html desenlerinden bahsetmek istiyorum.

Çalışma ortamımızı ayarlayalım

İlk önce bir dizin oluşturalım ve içine girelim.

$ mkdir merhaba
$ cd merhaba

Çalışma ortamı oluşturmak için şu komutu veriyoruz.

$ virtualenv venv -p python3

Eğer OSX ya da Linux kullanıyorsanız çalışma ortamını etkinleştirmek için şu komutu verin :

$ . venv/bin/activate

Eğer Windows kullanıcıysanız bunun yerine şu komutu kullanabilirsiniz :

$ venv\Scripts\activate

Son olarak da Flask kurulumunu yapıyoruz.

$ pip install Flask

Çalışma ortamı kurulumu ile ilgili adımları bir kere daha hatırlattım. İlerideki derslerde buraya bakabilirsiniz ya da oluşturduğunuz çalışma ortamında başka kaynak dosyalar oluşturarak devam edebilirsiniz.

Bir desen oluşturalım

Desen derken bir html desenini kasdediyoruz. Normal bir html dosyası da bir desen olabilir. İlkönce desenlerin tutulacağı templates isminde bir dizin oluşturalım. Bu dizinde de index.html isminde bir kütük oluşturalım. Burada nano yerine istediğiniz herhangi bir metin editörünü kullanabilirsiniz.

(venv) $ mkdir templates
(venv) $ nano templates/index.html

Kütüğün içine de bir selamlama ifadesi girelim.

<h1 style='color:green'>Selamün Aleyküm!</h1>

Bu kütüğü kaydedip kapattıktan sonra kaynak kütüğümüzü oluşturalım.

(venv) $ nano merhaba.py

İçine de şunları girelim.

from flask import render_template
from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

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

Kaynak kodu incelediğimizde ilk satırda desenleri işleyen render_template komutunu programa dahil ediyoruz. İkinci satırda Flask kütüphanesini programa dahil ediyoruz. Üçüncü satırda ise bir Flask nesnesi oluşturuyoruz.

Hatırlayabileceğiniz üzere route işlevine geçilen / internet uygulamamızın ana ya da kök dizinini belirtiyordu.

Alttaki işlev ise bu sefer bir deseni ekranda göstermesini söylüyor. Bu desende oluşturduğumuz index.html sayfası.

Programımızı şu şekide çalıştıralım :

(venv) $ python merhaba.py

Tarayıcınız ile http://localhost:5000 adresini açın.

Eğer her şey yolunda gittiyse şuna benzer bir ekran görüyor olmalısınız :

Flask ile Selamün Aleyküm

Merhaba Dünya

Eğer buraya geldiyseniz bunu normal bir html sayfası ile yapabiliyorduk. Desenlerin bize ne faydası oldu diye düşünebilirsiniz.

Desenlerin bize ne faydası olduğunu anlamak için gene templates dizininde merhaba.html isimnde bir kütük oluşturalım.

(venv) $ nano templates/merhaba.html

İçine de bunları girelim.

<!doctype html>
<title>Flask'dan merhaba</title>
{% if isim %}
<h1> Merhaba {{ isim }}!</h1>
{% else %}
<h1>Merhaba, Dünya!</h1>
{% endif %}

Desenin kaynak kodunu incelediğimizde {% if isim %} kısmı eğer isim isminde bir değişken tanımlanmışsa if ile else arası kısmın işletileceğini söylüyor. Eğer tanımlanmamışsa {% else %} ile {% endif %} arası kodlar işletilecek. Yani ekrana Merhaba, Dünya! yazacak. Ayrıca {% endif %} kod bloğunun bittiğini söylüyor.

Dikkat ederseniz if else gibi koşullu ifadeleri kullanırken bu ifadeleri {% %} arasına alıyoruz. {{ isim }} şeklindeki kullanımda ise değişkenin değerini ekrana basmak istediğimizi belirtiyoruz.

Tekrardan kaynak dosyamızı açalım.

(venv) $ nano merhaba.py

İçine şunları ekleyelim.

@app.route('/merhaba/')
@app.route('/merhaba/<isim>')
def merhaba(isim=None):
    return render_template('merhaba.html', isim=isim)

Kaynak kodu incelediğimizde hatırlarsanız route ile bir yol belirliyorduk. İlk satırda kullanıcı sitemizin /merhaba dizinine geldiğinde bu kod çalışacak. İkinci satırda örneğin kullanıcı /merhaba/Ahmet yazdığında gene bu kısım çalışacak. Burada <> işaretlerinin bir değişken bildirimi için kullanıyoruz. Yani kullanıcı /merhaba/Ahmet girdiğinde isim değişkenimiz Ahmet olacak.

Bu isim değişkenini de def merhaba(isim= None) işlevine geçiyoruz. Eğer kullanıcı merhaba'dan sonra hiç bir şey girmezse isim değişkenin varsayılan değeri isim=None olacak. Ama eğer Ahmet gibi bir isim girerse isim değişkeni Ahmet değerini alacak.

render_template komutunu da html desenini ekranda göstermek için kullanıyorduk. Burada html desenine parametre olarak kullanıcının girdiği isim değişkenini geçiyoruz. Böylece html deseni de isim değişkenini kullanabilecek.

Uygulamayı test etmek için tekrar başlatalım.

(venv) $ python merhaba.py

Tarayıcınız ile ilkönce http://localhost:5000/merhaba/ adresini açın.

Flask html deseni ile merhaba dünya

Bu sefer tarayıcıdan merhaba'dan sonra bir isim girmeyi deneyelim.

http://localhost:5000/merhaba/Ahmet

Bu sefer şu şekilde bir ekran görüyor olmalısınız.

Flask html desenine değişken geçmek

Flask ile kullandığımız Jinja html desenleri gördüğünüz üzere normal html sayfalarından farklı ve bize sayfa tasarımını oluştururken esneklik sağlıyor.

Json veri gönderme

Buraya kadar bir html desenine bir değişken kullanarak nasıl veri gönderebileceğimizi öğrendik. Bu sefer de json formatında nasıl veri gönderebiliriz ona bakalım.

Tekrardan kaynak dosyayı açalım.

(venv) $ nano merhaba.py

Uygulamamızın içine şunları girelim :

@app.route('/kullanıcı')
def kullanıcıBilgiGonder():
    veri = {'kullaniciadi' : 'erdem', 'site' : 'programlama.tk'}
    return render_template('kullanici.html', veri = veri)

Burada ilk satırda gene /kullanıcı isminde bir yol belirtiyoruz. Kullanıcı uygulamamızın /kullanıcı dizinini açtığında bu kısım çalışacak. Üçüncü satırda veri isimli json türünde bir değişken tanımlıyoruz. Json türündeki değişkenlerde her anahtar bir değere karşılık geliyor. Örneğin kullaniciadi'nin değeri erdem site'nin değeri programlama.tk oluyor. Daha sonra bu json verisini kullanici.html ismindeki desene geçiyoruz.

Şimdi kullanici.html isimli deseni oluşturalım.

(venv) $ nano templates/kullanici.html

İçine şunları girelim.

<html>
    <head>
        <script type="text/javascript">
         var kullaniciadi = "{{ veri.kullaniciadi }}";
         var site = "{{ veri.site }}";
         alert("Merhaba " + kullaniciadi + " " + site +
         " sayfasına hoşgeldin");
        </script>
    </head>
</html>

Burada size ilginç bir şey göstermek istedim. O da Flask'tan Javascript'e veri geçmek. {{ ve }} kullanarak değişkeni ekrana basıyoruz.

Uygulamamızı tekrar başlatalım.

(venv) $ python merhaba.py

Bu sefer tarayıcı ile şu adresi açalım.

http://localhost:5000/kullanıcı

Bu sefer aşağıdaki gibi bir Javascript iletisi görüyor olmalısınız.

Flask ile javascript'e veri geçmek

Oluşturduğumuz programın tamamının kaynak kodunu aşağıda bulabilirsiniz.

from flask import render_template
from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/merhaba/')
@app.route('/merhaba/<isim>')
def merhaba(isim=None):
    return render_template('merhaba.html', isim=isim)

@app.route('/kullanıcı')
def kullanıcıBilgiGonder():
    veri = {'kullaniciadi' : 'erdem', 'site' : 'programlama.tk'}
    return render_template('kullanici.html', veri = veri)

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

Yorumlar

yorum yaz

Yorum yaz

Henüz yorum yok.