2463

Python ile Sıfırdan İleri Seviye Python Programlama

Django Dinamik Veriyle Çalışma

Django dersleri serimizin bu bölümünde dinamik veriyle nasıl çalışırız, öğrenelim.

Django Dinamik Veriyle Çalışma

Python django bir web programlama çatısıdır. Dolayısıyla django kullanmamızdaki amacımız dinamik bir veriyle içeriklerimizi oluşturmaktır. Dinamik veri view içerisinde oluşturacağımız bir veri listesi ya da bir veri tabanı olabilir. Bu aşamada henüz veri tabanı kullanımı bilmediğimizden dolayı verilerimizi bir liste içerisinde saklayalım. Zaten veri tabanı işlerine girdiğimizde değişen çok şey olmayacak.

 

Gelin şimdi bir veri listesi oluşturalım. Bu liste basit bir python list verisi olsun. Eğer python list konusunu tekrar etmek isterseniz linke tıklayınız.

Blog uygulaması altındaki views.py dosyasında bir kategori listesi tanımlayalım ve listeyi index.html sayfasına gönderelim.

** database bir python dict verisidir. Python dict için tıklayınız.

kategori_listesi = ["Web Geliştirme","Mobile Uygulama","Veri Analizi"]

def index(request):
    database = {
        "kategoriler": kategori_listesi
    }
    return render(request, "blog/index.html", database)

Burada database ismindeki veriyi index.html sayfasına 3.parametre olarak gönderdik. Artık index.html sayfası "kategoriler" listesine ulaşabilir. Dolayısıyla liste verisini html sayfasında dinamik bir html içeriği üretmek için kolaylıkla kullanabiliriz.

** index.html sayfasındaki partial view de bu veriye ulaşabilir. Dolayısıyla dinamik kategoriler listesini _categories.html sayfasında da kullanabiliriz.

<div class="list-group">
    {% for kategori in kategoriler %}
      <a href="#" class="list-group-item list-group-item-action">
        {{ kategori }}  
      </a>
    {% endfor %}   
</div>

Bir döngü kurarak kategoriler listesindeki her elemana ulaşıp ekrana yazdırıyoruz.

Döngü için {% ... %} kod blokları kullanılır. Ekrana değer yazdırmak için {{ ... }} kullanılır.

Liste elemanlarını güncellediğinizde bu güncellemeyi anında sayfa üzerinde göreceksiniz. Örneğin listeye bir kategori ismi daha ekleyebilirsiniz.

Dinamik Blog Listesi

Şimdi ise öğrendiklerimizi bir örnek üzerinden tekrar edelim.

Gene aynı şekilde bir blog listesi oluşturalım.

kategori_listesi = ["Web Geliştirme","Mobile Uygulama","Veri Analizi"]

blog_listesi = [
    {
        "id": 1,
        "baslik": "blog başlığı 1",
        "resim": "https://picsum.photos/500/500?random=1"
    }, 
    {
        "id": 2,
        "baslik": "blog başlığı 2",
        "resim": "https://picsum.photos/500/500?random=2"
    },
    {
        "id": 3,
        "baslik": "blog başlığı 3",
        "resim": "https://picsum.photos/500/500?random=3"
    }
]

blog_listesi gene bir python list verisi ancak her bir eleman python dict verisi. 3 tane blog bilgisinin id, baslık ve resim bilgisini içeriyor. Resim için random image kullanıyorum.

blog_listesi bilgisini gene index.html sayfasına gönderelim.

def index(request):
    database = {
        "kategoriler": kategori_listesi,
        "bloglar": blog_listesi
    }
    return render(request, "blog/index.html", database)

blog_listesi verisini kullanarak index.html sayfasının sağ kolonda blog listesini oluşturalım.

<div class="container mt-3">
    <div class="row">
        <div class="col-3">
            {% include 'blog/partials/_categories.html' %}
        </div>
        <div class="col-9">
            <div class="row">
                
                {% for blog in bloglar %}
                
                    <div class="card mb-3">
                        <div class="row">
                            <div class="col-md-3">
                                <img src="{{ blog.resim }}" class="img-fluid rounded-start">
                            </div>
                            <div class="col-md-9">
                                <div class="card-body">
                                <h5 class="card-title">{{ blog.baslik }}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                
                {% endfor %}
                
            </div>
        </div>
    </div>
</div>

bloglar listesi içerisinde 3 veri olduğundan dolayı card div' i alt alta 3 kere tekrarlayacaktır. Ekran görüntümüz şu şekildedir;

 

Eğer blog_listesi bilgilerini güncellerseniz html üzerinde bu güncellemeyi gözlemleyebilirsiniz.


Kurs Sayfasına Git  
Paylaş