Home>>Django>>Python Django Serisi #4 | Jinja2 & Tasarım & Veritabanından Veri Alma
DjangoPython

Python Django Serisi #4 | Jinja2 & Tasarım & Veritabanından Veri Alma

Artık Django da tasarıma geçme vakti geldi.

Kullandığım tasarımı buradan indirebilirsiniz.

Jinja2 Nedir?

Jinja’dan kısaca bahsedelim.

Jinja, Python programlama dili için oluşturulmuş bir tasarım motorudur. Django şablon motoruna benzer ancak, Python’a benzer ifadeler kullanır.

Kullanımı hakkında detaylı bilgiyi başka yazıda paylaşacağım. Bu yazıda genel yapıdan biraz bahsedip, veritabanından verileri almayı göstereceğim.

Şablon dosyasında kod satırları fazla olduğu için sadece ilgili satırları paylaşacağım. Tüm kodları github’da bulabilirsiniz.

views.py & Statik Dosyalar

Views dosyasını özetlersek, GET-POST gibi işlemleri yönettiğimiz dosya diyebiliriz. Yani, bir web sayfasında hangi işlemlerin yapılmasını istiyorsak, bunları belirttiğimiz dosyadır.

views.py dosyasını açalım ve gerekli fonksiyonu yazalım.

from django.shortcuts import render
from .models import Galeri         # Model

def index(request):
    DATA = {
        "yer": Galeri.objects.filter(kategori=0),
        "gok": Galeri.objects.filter(kategori=1),
        "derya": Galeri.objects.filter(kategori=2),
    }
    return render(request, "index.html", DATA)

Yukarıdaki kodu özetlersek;

Her kategoriye(yer, gok, derya) ayrı ayrı sorgu yaptırdık ve sözlük yapısında bu verileri tuttuk. DATA adlı sözlüğü index.html dosyasına return yapıp gönderdik. Artık index.html dosyasında bu verilerimizi kontrol edebiliriz.

Şablonlara geçmeden önce urls.py dosyasına dönmemiz gerekiyor.

Hatırlarsanız settings.py dosyamızda statik dosya yolunu belirtmiştik. Şimdi o yolu urls.py dosyasında kullanacağız.

from django.contrib import admin
from django.urls import path, include
from . import views
from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
    path("", views.index, name="index"),
    path("admin/", admin.site.urls),

] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) \
  + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Yukarıdaki kodu inceleyelim;

urlpatterns’a yeni bir path ekledik. Bu path’e herhangi bir yol belirtmedik, çünkü sadece anasayfada olmasını istiyoruz. Az önce yukarıda views dosyasına yazdığımız index adlı fonksiyonu bu path içerisinde çalıştırıyoruz. Artık localhost:8000/ adresine girdiğimizde index fonksiyonu ile ilgili HTML dosyası çalışacaktır. Bununla birlikte name parametresine “index” isimli değer verdik. (Burada verdiğimiz isimlerin fonksiyon adıyla aynı olmasına gerek yok) Bu isim, şablon(html) dosyamızda bir butona anasayfa urlsi vereceğimiz zaman kullandığımız isimdir.

HTML’de Jinja Kullanımı ve Partial Templates(Bölünmüş Şablonlar)

‘Jinja’nın bir güzel yanı da dosyaları bölüp, birbirine bağlama imkanı vermesidir. Örneğin; base dosyasında head/meta etiketleri, navbar’da üst menü bar ve footer’da alt bar bulunmaktadır. Birden çok sayfamız olsaydı tüm sayfada değişiklik yapmak zorunda kalacaktık. Jinja işimizi burada kolaylaştırıyor. Partial yöntemi ile kodları bölüp, istediğiniz sayfalarda kullanabilirsiniz.

Şimdi base.html dosyasında statik dosyalar nasıl kullanılmış inceleyelim.

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Web Galerim</title>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600">  
    <link rel="stylesheet" href="{% static 'Font-Awesome-4.7/css/font-awesome.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <script src="{% static 'js/jquery-1.11.3.min.js' %}"></script>
    <script>
            var tm_gray_site = false;
            if(tm_gray_site) {
                $('html').addClass('gray');
            }
            else {
                $('html').removeClass('gray');   
            }
        </script>
</head>

İlk satırda “{% load static %}” kodu ile statik dosyalar yüklenir.

Statik dosyası içerisinden “css/style.css” gibi dosyalara ulaşabilmek için aşağıdaki metot kullanılır.

href="{% static 'css/bootstrap.min.css' %}"

Statik dosyasında bulunan tüm dosyalar bu yöntemle eklenir.

Şimdi navbar.html’i inceleyelim(Sadece ilgili bölümü göstereceğim)

<a class="navbar-brand text-uppercase" href="{% url 'index' %}"><i class="fa fa-picture-o tm-brand-icon"></i>Web Galerim</a>

href olarak url dosyasından name’i, index olan fonksiyona yönlendirdik. Yani az önce yukarıda urls.py için bahsettiğim olay burada geçerlidir.

Şimdi index.html’i inceleyelim.

Statik dosyaları kullanacağımız tüm yerlerde load static yapmalıyız. base.html’de header/meta olduğunu söylemiştik. Bu yüzden o dosyayı da dahil etmemiz gerekiyor. Daha sonra navbar’ı body etiketinin içerisinde dahil ediyoruz.

{% load static %}{% include "base.html" %}<body>    {% include "navbar.html" %}

Jinja’daki for döngüsü, Python’da olduğu gibi kolaydır. Sadece endfor diyerek bitirmemiz gerekiyor.

views’den render yaparken DATA adlı dict yapısını göndermiştik. İçerisinde anahtar kelime olarak yer, gok, derya kullanmıştık. Şimdi o anahtar kelimelerin içindeki tüm ORM SQL sorgu sonuçlarını for döngüsü ile HTML etiketlerine yansıtalım.

{% for i in yer %}
    <div class="grid-item">
        <figure class="effect-sadie">
            <img src="{{ i.resim.url }}" alt="Image" class="img-fluid tm-img">
            <figcaption>
                <h2 class="tm-figure-title"><span><strong>{{i.bolge}}</strong></span></h2>
                <p class="tm-figure-description">{{i.aciklama}}</p>
                <a href="{{ i.resim.url }}">View more</a>
            </figcaption>
        </figure>
    </div>
{% endfor %}

Tüm düzenlemeleri yaptıktan sonra sunucuyu çalıştırıp test edebiliriz.

python manage.py runserver

Yukarıda gördüğünüz gibi web sitenin sorunsuz bir şekilde çalışması gerekiyor.

Proje kodlarını github hesabımdan ulaşabilirsiniz.

Django ile alakalı yazıları okumak için tıklayabilirsiniz.

Adblock Detected

Lütfen reklam engelleyicinizi devre dışı bırakarak bizi destekleyin.

Refresh Page