Django İle Web Sitesi Yapımı – FaceMash

Merhabalar. Bu konumda Django derslerine ek olarak hazırladığım açık kaynak kodlu bir web – uygulamasını göstereceğim. Bu konu ile beraber Django İle Web Sitesi Yapımı adlı bir seri başlatmayı düşünüyorum.

Face Mash Nedir?

Face Mash , Facebook’un kurucusu Mark Zuckerberg’ün Facebook’u yapmadan önce yapıp okuldan uzaklaştırma aldığı bir web uygulamasıdır. Face Mash’in ana mantığı fotoğraf oylama sitesidir. Ana sayfanıza hazırda kayıtlı olan fotoğraflardan rastgele 2 tanesi gelir ve sizde en şık olanı seçersiniz.

Mark Zuckerbeg’ün ceza almasının sebebi öğrencilerin fotoğraflarını izinsiz bir şekilde kullanmasıdır. Yönetime gelen şikayetler yüzünden de ceza verilmiştir.

Bizim scriptimizde ise fotoğraf gönder bölümü bulunmakta ve kullanıcı sadece ismini yazarak fotoğraf gönderebilir. Bu fotoğraflar aynı anda sisteme kayıt olmakta ve başkalarının ana sayfasında gösterilmeye hazır oluyor.

Ayrıca scriptimizde aynı 2 fotoğrafın denk gelmemesini sağlayacak bir döngüde mevcut. Bu kadar laf yeter. Şimdi kodlara geçelim.

Django İle Web Sitesi Yapımı

Django Kullanarak FaceMash Tarzı Site Yapımı

Uyarı: Bu konuda sadece yapacağımız siteyi diğer django projelerinden ayıran kısımları göreceğiz. Tüm kodlara github sayfasından ulaşabilirsiniz.

Öncelikle en aşağıya bıraktığım github linkini açarak sistem dosyalarına erişebilirsiniz. Bu şekilde ben kodları açıklarken beni takip etmeniz çok daha kolay olacaktır. Ayrıca linkde bulunan dosyaları indirip direk bir sunucuya kurarak hazırladığım scripti direkt ücretsiz bir şekilde yayına alabilirsiniz. Sizde fark edersiniz ki front – end geliştirmede kötüyüm. Eğer siz benden daha iyi iseniz front – end ‘i kendinize göre değiştirerek daha şık bir site yapabilirsiniz.

Not: Scriptin masa üstünde boş görünmesinin nedeni kitlemin %90 -%95’inin mobil kullanıcı olduğunu düşündüğüm için mobil bazlı kodlama yaptığımdan dolayıdır.

APP Kısmı

Eğer django derslerinin 1. konusunu okuduysanız djangonun app’lerden oluştuğunu bilirseniz. Ben de burada kayit adında bir app oluşturdum. Başta sadece kullanıcıların fotoğrafını gönderebilmelerini sağlayan sistemi yapmak için kullanmıştım. Daha sonra fazla kod yazmak istemediğimden rastgele fotoğraf seçme işlemlerini de bu app içinde gerçekleştirerek siteyi tek app içinde toparladım.

Model Kısmı

Eğer Django Modelleri Nedir? Django’da Model Oluşturma adlı konumu okumadıysanız bu konuya geçmeden önce o konuma göz atmanızı tavsiye ederim.


from django.db import models

class Kayitlar(models.Model):
    Ad_Soyad = models.CharField(max_length=100)
    Fotograf = models.ImageField(verbose_name="Add File")

    def __str__(self):
        return self.Ad_Soyad

Öncelikle Kayitlar adında bir class açıp içinde Ad_Soyad adında bir char field bir de Fotograf adında fotoğraf gönderebilmemizi sağlayan Image field oluşturduk. () içindeki verbose_name kısmı olmasa da olur. Admin panelinde Add File isminde görünür. Sadece bu özelliği göstermek için koydurm.

Fotoğrafların Depolanması

Eklediğimiz kayıtlara admin panelinden baktığınızda isim ve fotoğraf çıkacaktır ama fotoğrafın linkine tıkladığımızda bulunamadı hatası ile karşılaşıyoruz. Bunun sebebi ImageField ve FileField ile gönderilen dosyaların veritabanında direk saklanamamısıdır. Bizde media adında bir klasör oluşturarak orada depolanmasını sağlayacağız.

Öncelikle BASE_DIR yani ana dizinde media diye bir klasör oluşturdum ardından settings bu klasörün media klasörü olduğunu django’ya anllattım.

Settings.py Dosyasının En Alt Kısmı

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Media url kısmı ile fotoğrafların sıralanacağı url ön ekini ayarlıyoruz. Örneğin media/foto1.png.

Media Root kısmında ise media dosyalarının nerede depolanacağını belirtiyoruz.

secbakalim/urls.py Dosyasının En Alt Kısmı

from django.conf.urls.static import static


if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Öncelikle dosyanın en üstüne static’i import etmeyi unutmayın. Ardından en sona eklediğimiz if döngümüzle url yapısındaki media ön ekinden sonraki kısmı ayarlıyoruz.

Forms.py ( Kullanıcıların Fotoğraflarını Gönderebileceği Forumun Hazırlanması )


from django import forms
from .models import Kayitlar

class KayitlarForm(forms.ModelForm):

    class Meta:
        model = Kayitlar
        fields = ('Ad_Soyad','Fotograf',)

Kayit App’in de oluşturduğumuz forms.py dosyasının içinde bulunan kodlar bunlar. Öncelikle class ile KayitlarForm diye bir class oluşturdum ve içine Meta tanımlamalımı yapmaya başladım. Modelimin Kayitlar olduğunu belirttim ve kullanacağım field’leri belirledim.

Formu Front End’de Gösterme

<form method="POST"  enctype="multipart/form-data">
           {% csrf_token %}
         <div class="row">
           <div class="col">
               <label class="label">İsminiz:</label>
               {{ form.Ad_Soyad }}
           </div>
         </div>
         <br>
         <div class="form-group">
           <label class="label">Fotoğrafınızı Seçiniz</label>
           {{ form.Fotograf }}
         </div>
         <button type="submit" class="btn btn-lg btn-danger">Gönder</button>
       </form>

Öncelikle form takımızda methodumuzu POST olarak belirtiyoruz ve dosyaları kayıt edebilmek için enctype giriyoruz. Ardından django’nun en beğendiğim yanlarından biri olan güvenlik problemini çözmek için csrf_token yerleştiriyoruz. Django güvenliğe çok önem veren bir dildir. Siber güvenlikten anlamasanız bile Django ile güvenlikli bir site yapabilirsiniz

Csrf_token post metodunu kullanarak gönderdiğiniz verilere şifrelemeye yarar. Siz şifreleme bilmenize gerek kalmaz. Django sizin yerinize şifreler. Ayrıca csrf_token eklemeyi unutmanız halinde sitenizin güvenilir olması için csrf_token eklemenizi aksi taktirde sitenizi çalıştırmayacağını söyler.

Ardından gerekli yerlere {{ form.Ad_Soyad }} gibi ifadeler yazarak back – end ve front – end arasında bağlantı kuruyoruz. {{ form.Fiel_İsminiz }} htm de yazdığınız input komutunun aynısıdır. Django burda da kolaylık sağlayarak direk back – end den bağlantılı bir şekilde formu getirmekte.

Views.py Dosyası

Kayit Kısmı

def kayit(request):
    if request.method == "POST":
        form = KayitlarForm(request.POST,request.FILES)
        if form.is_valid():
            form.save()
            return redirect('index')
    else:
        form = KayitlarForm()
    return render(request,"kayit/form.html",{"form":form})

formun post metoduyla gönderilip gönderilmediğini kontrol ediyoruz.

KayitlarForm’u ve requst ayarlarını kısaca form adında bir değişkene atıyoruz. form’un geçerli olup olmadığını sorguluyoruz ve eğer geçerli(doğru bir şekilde girilmiş) ise form.save() metedu ile formu kaydediyoruz. return redirect(‘index’) yazarak kayıt eklendiktek sonra index sayfasına gitmesini söylüyoruz.

Not: Redirect’i kullanabilmek için shortcuts kısmınının sonuna ” , redirect ” yazmanız gerekmektedir.

Rastgele Fotoğraf Almak

def index(request):

    fotolar = list(Kayitlar.objects.values_list('Fotograf', flat=True))

    photo1 = random.sample(fotolar,1)
    print(photo1)
    photo2 = random.sample(fotolar,1)
    print(photo2)

    while photo1 == photo2:
        photo2 = random.sample(fotolar, 1)
    context = {'photo1':photo1,'photo2':photo2}
    return render(request, 'kayit/index.html',context)

İşlemlerimiz ana sayfa(index)’de gerçekleştirileceğinden views’de de index fonksiyonunun içinde yazıyoruz. Öncelikle fotolar adında bir liste oluşturup, listenin içeriğini Kayitlar’ın nesnelerinden Fotograf fieldini yapmasını istiyoruz.

photo1 ve photo2 olarak 2 tane değişken tanımlıyoruz. Bu değişkenlerin içeriğini ise random.sample kullanarak fotolar listesinden rastgele 1 nesne çekmesini istiyoruz.

Not: print yazan kısımlar olmasa da olur. Scripti kodlarken hata ayıklaması yaparken oluşturmştum. Ayrıca random.sample ‘ı kullanabilmek için randomu , import random yazarak import etmeniz gerekmektedir.

while döngüsünü de kullanarak aynı 2 fotoğrafın gelmemesini sağlıyoruz. Kodu açıklamak gerekirse photo1 == photo2 yani photo1 , photo 2’ye eşit ise : photo2 için tekrardan rastgele fotoğraf seçtiriyoruz. Ta ki photo1 , photo2 ye eşit olmayana kadar.

Bu randomları front end de görüntülemek için bir context oluşturuyoruz ve bu context’i renderin en sonuna virgül ile ayırarak ekliyoruz.

Rastegele fotoğraf seçme aşamalarımız bu kadardı şimdi bu seçilen fotoğrafların front – end’de istediğimiz yerlerde gösterilmesini sağlayalım.

Uyarı: Front – end ‘de gösterme aşamasına geçmeden önce admin panelinden bir kaç tane kayıt yükleyin. Yoksa rastgele alınacak fotoğraf olmadığından program hata verir.

Rastgele Seçilen Fotoğrafları Template Kısmında Göstermek

Index template’imizi açıyoruz ve fotoğrafları koymak istediğimiz yerleri belirtiyoruz.

<img src="/media/{{ photo1.0 }}" alt="foto1" class="img-fluid" style="width: 410px; height: 330px; background-color: red;">

img src kullanarak resimlerin url’sini belirttim bunu da, fotoğraflar media klasöründe saklandığından yukarıda hazırladığımız ön eki yani /media/ kullanarak yaptım. Ardından rastgele seçilen fotoğrafımızı ekledim. Bunu da {{ photo1.0 }} ile yaptım. 2. fotoğraf içinde aynı şekilde photo2.0 olacaktı. Peki bu 0 lar nereden geliyor derseniz?

Yukarıda random.sample in liste içinden rastgele bir değer aldığını söylemiştik. Ayrıca aldığı rastgele değerleri de liste şekilinde saklamakta. Hatırlarsanız yukarıda fotolar listesinden 1 tane al demiştik. Photo1’de random.sample sayesinde 1 liste olduğundan 0’ı seçtik. Çünkü listelerdeki değerler sayısal anlada 0’dan başlar. Listenin içinde de 1 tane veri koyduğumuz için 0’dan başka hiç bir sayısal değer alamaz.

Eğer bu kısmı pek anlamadıysanız Python veri tiplerine ve Random kullanımına göz atmanızı öneririm.

Bunları yaptıktan sonra kendi istediğim fotoğrafın css ve diğer değerlerini giriyorum bu kısım size kalmış.

Diğer fotoğraf alanına da aynı işlemi yaparak bitiriyoruz.

Yazdığım scriptin nasıl yazıldığını az çok açıklamaya çalıştım. Umarım yararlı olmuştur. Buraya kadar okuduyasanız bir de burayı açmadan tüm kodları bi baştan sona okuyup anlamaya çalışmanızı öneririm.

GitHub Linki: TIKLA

Django İle Web Sitesi Yapımı (Face Mash Tarzında) adlı konumuzun sonuna geldik. İleride Django kullanarak daha çok site scripti yapacağız. Bir sonraki konuda görüşmek üzere.

Yazılarımızdan Anında Haberdar Olmak İçin Telegram Kanalımıza katılabilir veya Instagram Hesabımızı Takip Edebilirsiniz.

Python İçin En İyi Kod Editörleri Nelerdir

Leave a Reply