주뇽's 저장소

6. AccountApp - Sign Up ⇒ Create View 본문

웹개발/Django

6. AccountApp - Sign Up ⇒ Create View

뎁쭌 2023. 8. 25. 22:15
728x90
반응형

PreView

1

Sign Up ⇒ Create View

View Info ⇒ Read View(Detail View)

Change Info ⇒ Update View

Quit ⇒ Delete View

Authentication

Sign Up → Create view

Sign Up → Create view

  • accountapp/views.py 코드 수정
from django.shortcuts import render
from django.http import HttpResponse, HttpResponseRedirect
**from django.urls import reverse, reverse_lazy
from django.views.generic import CreateView
from django.contrib.auth.models import User
from django.contrib.auth.forms import UserCreationForm**

from accountapp.models import HelloWorld

# Create your views here.
def hello_world(request):
    if request.method == "POST":
        temp = request.POST.get("account_input")
        newModel = HelloWorld()
        newModel.text = temp
        newModel.save()
        HelloWorldList = HelloWorld.objects.all()
        return HttpResponseRedirect(reverse("accountapp:hello_world"))
    else:
        HelloWorldList = HelloWorld.objects.all()
        return render(request, "accountapp/hello_world.html", context={"HelloWorldList" : HelloWorldList})

**class AccountCreateView(CreateView): #-- 장고에서 제공해주는 CreateView 상송
    model = User #-- 장고에서 제공해주는 user에대한 model import
    form_class = UserCreationForm  #-- 회원가입을 위한 장고에서 제공해주는 form
    success_url = reverse_lazy("accountapp:hello_world") #-- 성공한 경우 되돌아갈 페이지 지정 함수형 view -> reverse
        template_name = 'accountapp/create.html'**
  • accountapp/urls.py 코드 수정
from django.urls import path
from .views import hello_world
**from .views import AccountCreateView**

app_name = "accountapp"
urlpatterns = [
    path('hello_world/', hello_world, name = "hello_world"),

    **path('create/', AccountCreateView.as_view(), name = "create")**
]
  • accountapp/templates/accountapp/cretate.html 파일 생성
{% extends 'base.html' %}

{%block content%}

<div style="text-align:center">
        <form action = "{%url 'accountapp:create'%}", method="post">
                {%csrf_token%}
                {{ form }}
                <input type="submit", class="btn btn-primary">
        </form>
</div>

{% endblock %}

1

  • username과 pw, pw확인을 입력하여 회원가입

Sign In, Sign Out(Login View, Logout View)

Sign In, Sign Out(Login View, Logout View)

장고에서 기본적으로 제공해주는 Login View, Logout View를 이용

  • accountapp/urls.py에서 view 바로 연결
from django.urls import path
from .views import hello_world
from .views import AccountCreateView
**from django.contrib.auth.views import LoginView, LogoutView**

app_name = "accountapp"
urlpatterns = [
    path('hello_world/', hello_world, name = "hello_world"),

    **path('login/', LoginView.as_view(template_name = "accountapp/login.html"), name = "login"),
    path('logout/', LogoutView.as_view(), name = "logout"),**

    path('create/', AccountCreateView.as_view(), name = "create")
]
  • accountapp/templates/accountapp/login.html 파일 생성
{% extends 'base.html' %}

{%block content%}

<div style="text-align:center">
    <div>
        <h4>Login</h4>
    </div>
    <div>
        <form action = "", method="post">
                {%csrf_token%}
                {{ form }}
                <input type="submit", class="btn btn-primary">
        </form>
</div>

</div>

{% endblock %}
  • 로그인 후 원하는 페이지로 Redirect하기 위한 설정
    • next가 가장 먼저 실행 없을 경우 Login_REDIRECT_URL → Default순으로 실행된다.

1

  • templates/header.html 코드 수정해서 nexr 설정
<div class="full_stack_project_header_navn">
    <div>
        <h1 class="full_stack_project_logo">Full Stack Project</h1>
    </div>
    <div>
        <span> nav1 </span>
        <span> nav2 </span>
        <span> nav3 </span>
        {%if not user.is_authenticated%}
        **<a href="{%url 'accountapp:login'%}?next={{request.path}}">**
            <span> Login </span>
        </a>
        {% else %}
        **<a href="{%url 'accountapp:logout'%}?next={{request.path}}">**
            <span> Logout </span>
        </a>
        {% endif %}

    </div>
</div>
  • fullstackproject/settings.py에서 LOGIN_REDIRECT_URL 설정
**LOGIN_REDIRECT_URL = reverse_lazy("accountapp:hello_world")
LOGOUT_REDIRECT_URL = reverse_lazy("accountapp:login")**

이전에 생성했던 아이디로 로그인

  • 로그인 페이지

2)3

  • 로그아웃 페이지

4

Form 스타일링(부트스트랩)

pip install django-bootstrap4
  • fullstackproject/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'accountapp',
    'bootstrap4',
]
  • accountapp/templates/accountapp/login.html에 부트스트랩 폼 적용
{% extends 'base.html' %}
{% load bootstrap4 %}

{%block content%}

<div style="text-align:center; max-width: 500px; margin: 4rem auto">
    <div>
        <h4>Login</h4>
    </div>
    <div>
        <form action = "", method="post">
                {%csrf_token%}
                <!-- {{ form }} -->
                **{%bootstrap_form form%}**

                <input type="submit", class="btn btn-dark rounded-pill col-6 mt-3">
        </form>
</div>

</div>

{% endblock %}

1

  • 회원가입 form도 변경
{% extends 'base.html' %}
{% load bootstrap4 %}

{%block content%}

<div style="text-align:center; max-width: 500px; margin: 4rem auto">
        <div class="mb-4">
                <h4>회원가입</h4>

        </div>
        <form action = "{%url 'accountapp:create'%}", method="post">
                {%csrf_token%}
                <!-- {{ form }} -->
                {%bootstrap_form form%}
                <input type="submit", class="btn btn-dark rounded-pill col-6 mt-3">
        </form>
</div>

{% endblock %}

2

폰트 수정

네이버 글꼴 모음

  • static/fonts폴더 생성 후 폰트 삽입
  • templates/head.html에서 font 불러오기
{% load static %}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Full Stack Project With Django</title>

    <!-- 부트스트랩  -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
    crossorigin="anonymous">

    <!-- 구글 폰트  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Batang&family=Indie+Flower&family=Maven+Pro&family=Nanum+Pen+Script&family=Noto+Sans+KR:wght@300;700&family=Unna&display=swap" rel="stylesheet">

    <!--  CSS Link  -->
    <link rel = "stylesheet" type = "text/css" href="{% static 'base.css' %}">

    **<style>
        @font-face {
            font-family: '나눔손글씨 진주 박경아체';
            src: local('나눔손글씨 진주 박경아체'),
            url("{%static 'fonts/나눔손글씨 진주 박경아체.ttf'%}") format("opentype");
        }

        @font-face {
            font-family: '나눔손글씨 칼국수';
            src: local('나눔손글씨 칼국수'),
            url("{%static 'fonts/나눔손글씨 칼국수.ttf'%}") format("opentype");
        }
    </style>**
</head>
  • templates/base.html에서 기본 폰트 설정
<!DOCTYPE html>
<html lang="ko">
{%include  'head.html'%}

**<body style="font-family: '나눔손글씨 진주 박경아체' ;">**

    {%include  'header.html'%}
    <hr>
    {%block content%}
    {%endblock%}
    <hr>
    {%include  'footer.html'%}

</body>
</html>

3

저작자표시

'웹개발 > Django' 카테고리의 다른 글

5. DB 연동  (0) 2023.08.25
4. CSS 개념 및 설정  (0) 2023.08.19
3. Style, 구글 폰트를 통해 Header, Footer 꾸미기  (0) 2023.08.19
'웹개발/Django' Related Articles more