Skip to content

Login, Register ve Logout Sayfalarının Yapımı

Login, Register ve Logout Sayfalarının Yapımı

Bu yazımda sayfaların tasarımı için css yazmak yerine Uikit adında front-end framework’u kullanacağım ve bu yazımda kullandığım kodlar Eatingword adında Django bilgimi taze tutmak ve yeni şeyler öğrenmek amacı ile geliştirmekte olduğum projemden alıyorum, şuan için proje gizli durumda, hazır olduğu zaman MIT lisansı ile paylaşacağım.

Form

form_mixin.py

class UikitFormMixin:
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for field_name in self.fields:
            widget = self.fields[field_name].widget
            while hasattr(widget, "widget"):
                widget = widget.widget
            if "nouikit" in widget.attrs:
                continue
            class_names = [widget.attrs.get("class", "")]
            if isinstance(widget, forms.Select):
                widget.attrs["title"] = (
                    "Select " + field_name.replace("_", " ").title()
                )
                class_names.extend(["uk-select"])
            elif isinstance(widget, forms.Textarea):
                class_names.extend(["uk-textarea"])
            class_names.extend(["uk-input", "uk-form-width-large"])
            widget.attrs["class"] = " ".join(class_names)
            widget.attrs.setdefault("autocomplete", "off")
            widget.attrs.setdefault(
                "placeholder", field_name.replace("_", " ").title()
            )
            uk_icons = {
                "username": "user",
                "password": "lock",
                "password1": "lock",
                "password2": "lock",
                "source": "arrow-right",
                "target": "pencil",
            }
            widget.uk_icon = uk_icons.get(field_name, None)
            widget.label_classes = ("uk-form-label",)

UikitFormMixin mixinine şöyle bir baktığınızda aslında ne amaç ile yazıldığını anlayabilirsiniz, ben yinede kısaca bahsedeyim.

Bir form sınıfımıza bu sınıfı miras aldığınız zaman, önce form’u çalıştırıyor, sonra bu çalışıyor ve bir önceki formda oluşan alanları for döngüsü ile alıp her birinin widget inin tipine bakıyor daha sonra gelen tiplere uygun uikit sınıf atamalarını yapıyor ve alan isimlerine göre de icon isimlerini atıyor daha sonra bu atamaları __form.html şablonumuzu kullanarak gelen her formu uikit tasarımına sahip bir forma dönüştürmüş olacağız.

forms.py

from django.contrib.auth import forms as auth_forms
from django.contrib.auth import get_user_model

from .form_mixin import UikitFormMixin

UserModel = get_user_model()


class RegisterForm(UikitFormMixin, auth_forms.UserCreationForm):
    class Meta(auth_forms.UserCreationForm.Meta):
        model = UserModel


class AuthenticationForm(UikitFormMixin, auth_forms.AuthenticationForm):
    pass

Bakın bu form classlarımda tanımlarken UikitFormMixin class’ımı miras aldım, o classs oto bir şekilde form alanlarımı uikit için hazır hale getiriyor.

Burada neden direkt from django.contrib.auth import User böyle yapıp User modelini almak yerine from django.contrib.auth import get_user_model get_user_model ‘ını alıp, onu kullandım ?

sebebi şu arkadaşlar User Modelini Genişletmek adında bir yazı yazmıştım size bu yazımda bahsettiğim yöntemlerden biri olan AbstractBaseUser sınıfını miras alıp kullanıcı modelinizi bu şekilde oluşturduysanız o modeli dönderir , oluşturmadıysanız zaten varsayılan olan User modelini dönderiyor. Bu sayede user modeliniz nasıl olursa olsun uyumlu bir form çıkartmış oluyorsunuz.

Daha sonra zaten Django’da UserCreationForm hazır bir halde var, bu formu Django admin sayfasında siz bir kullanıcı oluşturduğunuzda kullanıyor, bizde kendi kayıt ol sayfamızı yazarken kullanacağız. Bu formun kodlarını inceleyin mutlaka ben sizlere link bırakayım UserCreationForm

Sonra aynı şekilde kullanıcı giriş formu yine Django’da var biz aynı formu kullanacağız ama uikit tasarımına uygun olması gerekiyor bu yüzden sadece UikitFormMixin‘ i miras aldık ve bu kadar, formlarımız hazır. Yine aynı şekilde AuthenticationForm’un kodlarını incelemeniz için link bırakıyorum AuthenticationForm

View

view_mixin.py

from django.contrib import messages
from django.contrib.messages.views import SuccessMessageMixin


class MessageMixin(SuccessMessageMixin):
    success_message = "Successfully Created/Updated"

    def form_invalid(self, form):
        messages.error(self.request, "Form Invalid")
        return super().form_invalid(form)

Bu sınıfımız ile de form işlemleri sonrası form başarılı şekilde geçerli olursa başarılı mesajını, geçersiz olursa form geçersiz mesajını, vermek için kullanacağız.

Bu view’i kullanmak için ilgili sınıf tabanlı view’imize miras almamız yeterli olacaktır, eğer isterseniz success_message niteliği ile başarılı mesajını kendiniz belirleyebilirsiniz.

Djangoda başarılı mesajı için zaten SuccessMessageMixin adlı bir sınıf var ben yukarıda bunu miras alarak hem onu hemde form geçersiz oldugunda mesaj iletsin diye böyle bir sınıf yazdım.

views.py

from django.contrib import messages
from django.contrib.auth import authenticate, login
from django.contrib.auth import views as auth_views
from django.urls import reverse_lazy
from django.views import generic

from .forms import AuthenticationForm, RegisterForm
from .view_mixin import MessageMixin


class RegisterView(MessageMixin, generic.CreateView):
    template_name = "registration/register.html" # get isteği sonrası render edilecek olan şablonumuz
    success_url = reverse_lazy("wordapp:index") # form geçerli olur ve herhangi bir sıkıntı çıkmaz ise bu adrese yönlenecek
    form_class = RegisterForm # form sınıfımız
    success_message = "You have successfully registered %(username)s" # form geçerli olursa tanımlı olan success_url'e yönlenmeden önce messages ile gönderilecek olan mesaj

    def form_valid(self, form):
        # tanımlı form_class'ımız post isteği sonrası geçerli olduğu zaman çalışacak olan fonksiyon
        response = super().form_valid(form) # formu kayıt edip yukarıda tanımlı olan success_url'e yönlenecek olan responsu alıyoruz.
        if user := authenticate( # self.object si super().form_valid(form) sırasında kayıt olan formun dönderdiği nesnedir yanı kayıt olan kullanıcımızdır.
            self.request,
            username=self.object.username,
            password=self.object.password,
        ): # burada başarılı bir kullanıcı girişi var ise bize o kullanıcıyı döndürecek, python 3.8 ile gelen := walrus operatürü ile bunu alıyoruz.
            login(self.request, user) # burada dönen kullanıcının giriş yapmasını sağlıyoruz.
        else:
            messages.error(self.request, "Could not login") # user false dönerse, mesaj gönderiyoruz
        return response # yukarıda bize dönen cevabı döndüyoruz, bu sayede kullanıcı success_url tanımlı adrese yönleniyor.


class LoginView(MessageMixin, auth_views.LoginView):
    form_class = AuthenticationForm
    success_message = "You have successfully logged in %(username)s"

Geldik viewlerimize

Kayıt olmak ve giriş yapmamızı sağlayan viewlerimiz yukarıda da gördüğünüz gibi oldukça kısa, bir şeyler gereksizce uzun ise bir çok şeyi yanlış yapıyorsunuzdur.

Register view’imizın amacı yeni bir kullanıcı kayıt etmek olduğu için bunun generic.CreateView kullanarak hızlı bir şekilde yapabiliriz.

Burada generic.FormView, generic.View veya fonksiyonel bazlı yazarakta yapabiliriz ama bu yöntemlerden biri ile yazmayı tercih edersek gereksizce kod uzun, anlaşılması zor olacaktır bu yüzden en doğru şekilde yapmaya çalışmak her zaman iyidir.

RegisterView’ı yorum satırları ile anlattım, kodlardan kontrol edebilirsiniz.

LoginView de ise çok bir şey yok, Djangoda zaten LoginView var bende onu kullanarak kendi view’imi yazdım form_class’ımı verdim, birde mesajı verdim bu kadar, kodları incelemek isterseniz LoginView

Urls

urls.py

from django.contrib.auth.views import LogoutView
from django.urls import path

from apps.account.views import LoginView, RegisterView

urlpatterns = [
    path("register/", RegisterView.as_view(), name="register"),
    path("login/", LoginView.as_view(), name="login"),
    path("logout/", LogoutView.as_view(), name="logout"),
]

Daha sonra urllerimiz tanımladık, çıkış işlemi için tekrardan bir view yazmadık cunku Django’da var zaten, LogoutView

Templates

Şimdi sıra geldi son adımlarımıza, templateler.

Form işlemleri sonrası Django messages framework’u ile mesaj yolluyorduk yukarıda, ben o mesajları daha güzel göstermek adına toastr adında bir JS lib’i kullanıyorum, Django ile dönen mesajları base.html template’imin head etiketi içine basıp daha sonra js ile çekip mesaj var ise gösteriyorum, ilgili kodları aşağıda göreceksiniz.

custom.js

document.addEventListener(
  "DOMContentLoaded",
  function () {
    /* toasatr */
    toastr.options = {
      closeButton: true,
      debug: false,
      newestOnTop: true,
      progressBar: true,
      positionClass: "toast-bottom-right",
      preventDuplicates: false,
      onclick: null,
      showDuration: "300",
      hideDuration: "1000",
      timeOut: "5000",
      extendedTimeOut: "1000",
      showEasing: "swing",
      hideEasing: "linear",
      showMethod: "fadeIn",
      hideMethod: "fadeOut",
    };
    let messages = document.head.querySelectorAll("meta[name=message]");
    for (let message of messages) {
      let tagName = message.dataset["tag"];
      let content = message.content;
      eval(`toastr.${tagName}`)(content);
    }
  },
  false
);

Yukarıdaki kod ile DOM yüklendiği zaman toastr ayarlarını yapıp meta etiketine bakıyor eğer Django mesaj basmış ise dönen uyarı tipine ( error, warning, vs ) göre bildirim üretiyor.

templates/base.html

{% load static %}
<!DOCTYPE html>
<html class="uk-background-muted">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <title>Learn Words</title>
    <meta name="description" content="Learn Word" />
    <meta name="keywords" content="english, turkish, word, learn" />
    <link rel="icon" href="{% static 'media/eating-word.svg' %}" />
    <!-- messages meta -->
    {% for message in messages %}
    <meta name="message" data-tag="{{message.tags}}" content="{{ message }}" />
    {% endfor %}
    <!-- jquery -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.min.js"
      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
      crossorigin="anonymous"
    ></script>
    <!-- UIkit CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/uikit@3.5.6/dist/css/uikit.min.css"
    />
    <!-- UIkit JS -->
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.5.6/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.5.6/dist/js/uikit-icons.min.js"></script>
    <!-- toastr -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"
    />
    <!-- custome js -->
    <script src="{% static 'custom.js' %}"></script>
  </head>
  <body class="uk-animation-scale-up uk-background-default">
    <!-- start:: header -->
    <nav class="uk-navbar-container uk-margin" uk-navbar>
      <div class="uk-navbar-left">
        <a class="uk-navbar-item uk-logo" href="#">
          <img width="60" src="{% static 'media/eating-word.svg' %}" />
        </a>
      </div>
      <div class="uk-navbar-right">
        <ul class="uk-navbar-nav">
          {% if user.is_authenticated %}
          <li class="uk-active"><a href="{% url 'logout' %}">Logout</a></li>
          {% endif %}
        </ul>
      </div>
    </nav>
    <!-- end:: header -->
    <!-- start:: body -->
    <div class="uk-card">
      <div class="uk-card-header">
        <h3 class="uk-card-title">{% block title %}{% endblock title %}</h3>
      </div>
      <div class="uk-card-body">{% block content %}{% endblock content %}</div>
      <div class="uk-card-footer">{% block footer %}{% endblock footer %}</div>
    </div>
    <!-- end:: body -->
    <!-- start:: footer -->
    <!-- end:: footer -->
  </body>
</html>

Yukarıda base.html dosyasını görüyorsunuz, anlatacak çok bir şey yok aslında, title, content, footer adında 3 blogum var, base.html dosyamı genişleteceğim zaman onları kullanarak bir tasarım çıkartıyorum, JS, CSS linkleri vs var o kadar.

templates/include/__form.html

<!-- {% comment %}
        {% include 'analyst/include/__form.html' with form_url_name='' form_id="formId" method="post" form=form' %}
    {% endcomment %}
 -->
{% with button_id=form_id|add:'Button'|default:'formSubmitButton' %}
<form {% if url_name %}action="{% url form_url_name %}" {% endif %} method="{{ method|default:'POST' }}" id="{{ form_id|default:'formSubmitButton' }}" class="uk-form-horizontal">
  {{ form.media }}
  {% if method|lower != "get" %} {% csrf_token %} {% endif %}
  {{ form.non_field_errors }} {% for hidden_field in form.hidden_fields %} {{ hidden_field.errors }}
  {{ hidden_field }} {% endfor %} {% for field in form.visible_fields %}
  <div class="field" id="group_{{ field.html_name }}">
    {% if field.errors %}
    <ol>
      {% for error in field.errors %}
      <li><strong>{{ error|escape }}</strong></li>
      {% endfor %}
    </ol>
    {% endif %}
    <label class="{% for class in field.field.widget.label_classes %}{{ class }}{% endfor %}" for="{{ field.auto_id }}">
      {{ field.label }}
    </label>
    <div class="uk-inline">
      {% if field.field.widget.uk_icon %}
      <span class="uk-form-icon" uk-icon="{{ field.field.widget.uk_icon }}"></span>
      {% endif %} {{ field }}
    </div>
    <small class="uk-text-meta uk-text-background" id="{{ field.id_for_label }}Help">
    {{ field.help_text|safe }}
    </small>
  </div>
  {% endfor %}
  <button id="{{button_id}}" type="submit" class="uk-button uk-button-primary">
    {{ buttonText|default:"Submit" }}
  </button>
</form>
{% endwith %}

Geldik sevdiğim bir kısma __form.html şablona bu şablon bütün formlarda kullanacağım ortak bir şablondur, uikit’e göre biraz düzenledim.

Kullanımınıda en yukarıya yazmışım

{% include 'analyst/include/__form.html' with form_url_name='' form_id="formId" method="post" form=form' %}

Kullanımda da gördüğünüz gibi formun method’unu ( post, get ) varsayılan post, değiştirebiliyorsunuz, varsayılan form olan form nesnenizi değiştirebiliyorsunuz, form id’nizide değiştirebiliyorsunuz ve son olarak varsayılan olarak bulunduğunuz sayfa olan form action’ı form_url_name ile belirleyebiliyorsunuz.

templates/registration/register.html

{% extends "base.html" %} {% block title %} Register {% endblock title %}
{% block content %}
  {% include 'include/__form.html' with buttonText="Register" %}
{% endblock content %}
{% block footer %}
<div class="ui bottom attached warning message">
  <i class="icon help"></i>
  Already signed up? <a href="{% url 'login' %}">Login here</a> instead.
</div>
{% endblock footer %}

Kayıt ol şablonumuz burada base’i genişletip content kısmına form’u verip footer kısmında eğer hesabı varsa login yapmasını söylemişim.

templates/registration/login.html

{% extends "base.html" %} {% block title %} Login {% endblock title %}
{% block content %}
  {% include 'include/__form.html' with buttonText="Login" %}
{% endblock content %}
{% block footer %}
<div class="ui bottom attached warning message">
  <i class="icon help"></i>
  Do not have an account?
  <a href="{% url 'register' %}">Register Now</a>
</div>
{% endblock footer %}

Login sayfasıda aynı şekilde.

Bu konuda anlatacaklarım bu kadar, anlaşılmayan bir bölüm var ise bana telegramdan yazabilirsiniz bende bu yazıyı güncelleyerek o başlığı daha detaycı anlatmaya çalışırım, okuduğunuz için teşekkürler.


Last update: January 1, 2022
Created: January 1, 2022