Cahit İşleyenMerhaba arkadaşlar,
Mobilhanem.com da Flask Dersleri eğitim serisine, Flask Inheritance Block yazısı ile devam ediyoruz. Bu yazı da Flask ile web uygulama geliştirirken işimizi hızlandıracak ve pratikleştirecek flask da inheritance ve block ifadelerini öğreneceğiz.
Bu ifadeleri Flask ile web uygulaması geliştirirken sıkça kullanacağız. Eğer bir önceki derse bakmadıysanız ilk önce o derse bakmanızı tavsiye ederim. Buradan ulaşabilirsiniz. Inheritance kavramını anlatmadan flask da başka bir ifade olan include ifadesine ilk önce bakalım.
Flask Include
Bir önceki dersimizde biz web sayfamıza navbar kısmını eklemiştik. Kodu olduğu gibi sayfaya eklemiştik. Şimdi başka bir html sayfası yani navbar.html sayfasını ana sayfaya ekleyelim. Bu sayede kodlarımız daha anlaşılır ve okunabilir olacaktır. Bu kavram belki size çok tanıdık geldi. Evet bu kavram html sayfasına; css,js vb. sayfaları html sayfasına eklemek gibidir.
Onun için navbar.html sayfasını oluşturalım.
<nav class="navbar navbar-expand-md bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Mobilhanem.com</a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Hakkımızda</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Yazılar</a> </li> <li class="nav-item"> <a class="nav-link" href="#">İletişim</a> </li> </ul> </div> </nav>
Genel kullanım şekli;
{% include “sayfa_adi.html” %}
Şimdi kodumuzu ekleyelim.
index.html
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<title>Hakkında</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
{% include "navbar.html" %}
<h2>Mobilhanem.com</h2>
<p>
Ücretsiz Yazılım Eğitimlerin Yayınladığı Mobilhanem.com Hoş Geldiniz
</p>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
flask_app.py
from flask import Flask,render_template
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
if __name__ =="__main__":
app.run(debug =True)
Projemizi çalıştıralım.
Bu şekilde başka bir html sayfasını html dosyası içinde kullanmayı da öğrenmiş olduk.
Flask Inheritance
Inheritance Türkçe karşılığı kalıtım veya miras alma olan bu kavram nesne tabanlı programlama(OOP) ile gelen bir kavramdır. Eğer nesne tabanlı programlama mantığını bilmiyorsanız buraya bakabilirsiniz. Python derslerini anlatırken biz inheritance ile sınıfları miras alıyorduk. Burada ise biz html sayfalarını miras alacağız. Bu ifadeyi kullanmamızın sebebi ise artık her sayfa için ayrı kod yazmak yerine biz bir sayfa oluşturup diğer sayfaları bu sayfadan miras alacağız. Böylelikle artık işimizi pratikleştirmiş ve hızlandırmış olacağız.
Inheritance Nasıl Kullanılır?
Kullanımı çok basittir ve genel kullanım şekli şöyledir;
{% extends “miras_alinacak_dosyaAdi.html” %}
Bizde bir örnekle gösterelim. Bunun için ben layout.html sayfasını oluşturacağım ve bütün sayfalarımı bu sayfadan türeteceğim.
layout.html
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<title>Mobilhanem</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
{% include "navbar.html" %}
<h2>Mobilhanem.com</h2>
<p>
Ücretsiz Yazılım Eğitimlerin Yayınladığı Mobilhanem.com Hoş Geldiniz
</p>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Şimdi anasayfa yani index.html sayfamızı oluşturalım ve layout.html sayfasını miras alalım.
index.html
{% extends "layout.html" %}
flask_app.py
from flask import Flask,render_template
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
if __name__ =="__main__":
app.run(debug =True)
Şimdi projemizi çalıştıralım
Bu şekilde diğer sayfaları da layout.html sayfasından türetebiliriz burada fark etmemiz gereken bir şey var. Biz layout.html sayfasından türettik(miras aldık) ama sayfalar tamamen aynı olmayacak örneğin en basiti sayfa ismi farklı olacak.
O zaman yeni bir başlık atalım.
Flask Block
Blocklar miras aldığımız bir sayfa üzerinde değişiklik yapmak istediğimiz zaman kullanacağımız ifadedir. Kafanız karıştıysa hiç merak etmeyin örnekle çok daha iyi anlayacaksınız. Hemen hakkımızda sayfası oluşturalım ve bunun için layout.html sayfasını miras alalım.
about.html
{% extends "layout.html" %}
Block Nasıl Kullanılır?
Genel yapısı şu şekildedir.
{% block block_adi %}
……….
{% endblock %}
Fark ettiğiniz gibi layout.html sayfasıyla tamamen aynı şimdi biz bunu değiştirelim. Gördüğünüz gibi hakkımızda sayfasının başlığı da mobilhanem önce onu değiştirelim.
İlk önce miras alacağımız sayfada block oluşturuyoruz.
layout.html
{% block title %}
<title>Mobilhanem</title>
{% endblock %}
Şimdi değiştirmek istediğimiz sayfada aynı şekilde block oluşturalım.
about.html
{% block title %}
<title>Hakkımızda</title>
{% endblock %}
Ve projemizi çalıştıralım.
Gördüğünüz gibi sayfanın ismini değiştirmiş olduk. Aynı şeyi sayfanın içeriği yani <body></body> elementlleri için de yapalım.
{% block body %}
<body>
{% include "navbar.html" %}
<h2>Mobilhanem.com</h2>
<p>
Ücretsiz Yazılım Eğitimlerin Yayınladığı Mobilhanem.com Hoş Geldiniz
</p>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
{% endblock %}
Şimdi about.html sayfamıza block kısmını ekleyelim;
{% block body %}
<body>
<h2>Hakkımızda</h2>
<h3>Biz Kimiz?</h3>
<p>Mobilhanem yazılım alanında kendinizi geliştirmeniz ve yeni beceriler edinmeniz için size yardımcı<br>
olan bir platformdur. Gelenekselleşen eğitim anlayışından sıyrılıp lokasyon bağımsız eğitim<br>
alma imkanı verir ve böylece insanlara eşit şartlarda, sınırlarını kendileri belirleyebildikleri<br>
bir eğitim imkanı sunar. Mobilhanem dinamik bir yapıya sahiptir ve kendini sürekli geliştiren,
büyüyen bir platformdur. Güncel bilgileri,<br>sorularınızın cevaplarını, işinize yarayacak ipucu ve çözümleri burada bulabilirsiniz.</p>
</body>
{% endblock %}
Sayfamızı görüntüleyelim;
Böylece Flask block ifadesini de öğrenmiş olduk. Ben ufak bir uygulama yaptım buradan ulaşabilirsiniz. Ayrıca her dersin kodlarını github’a ekleyeceğim.
Mobilhanem.com da Python ile Flask Framework serisinin bu dersinde Flask inheritance ve block dersinin sonuna geldik. Bir sonraki yazımızda Flask Static Dosya yapısını göreceğiz. Eksik ya da yanlış gördüğünüz ve ya anlamadığınız yerler için çekinmeden ulaşabilirsiniz. Bir sonraki yazıda görüşmek üzere.
Tüm Derslere Buradan Ulaşabilirsiniz.
13
Slack Grubumuza Üye Oldunuz mu ?
Yorum Yaz