HTML, CSS, JavaScript를 사용하는 Django의 로그인 + 등록 페이지(1부)

웹사이트에서 발견되는 가장 일반적인 페이지 중 일부는 로그인 및 등록 페이지입니다. 선택할 수 있는 템플릿이 많이 있습니다. 사실, 너무 많습니다. 그러나 자주 제기되는 한 가지 질문은 이러한 템플릿/파일(HTML, CSS 및 JS)을 Django(Python 기반 웹 프레임워크)에 통합하는 방법입니다.

나는 디자인 더미에 추가할 템플릿을 직접 만들기로 결정했습니다. 이 디자인은 매우 간단하고 간단합니다. 또한 스타일을 지정하기 위해 CSS를 추가하고 작업을 수행하도록 JavaScript를 추가했습니다.

템플릿을 생성하고 Django와 통합하기 전에 몇 가지 초기 설정을 수행해야 합니다.

속도를 높이려면 다음 게시물을 확인하십시오.

Chapter 1 - Django Web App Setup
(필수 - 이 게시물에는 이 자습서를 완료하는 데 필요한 모든 정보가 있습니다.)

Chapter 2 - Django Basics
(선택 과목)

Chapter 3 - Homepage
(선택 사항 - 로그인 및 등록 페이지를 만드는 데 유사한 프로세스를 따를 것이므로 이 게시물 옆에 열어 두는 것이 좋습니다)

Django 설정 게시물을 확인하고 간단한 웹 앱을 만드는 방법을 배운 후 여기에서 선택할 수 있습니다.

프로젝트 - urls.py

프로젝트 폴더에서 urls.py를 엽니다(Django 설정 게시물에서와 같이 example이라는 폴더).



프로젝트 폴더에 있는 기본 urls.py 파일에서 찾을 수 있도록 우리가 만든 앱의 URL을 포함해야 합니다. 새 앱을 만들 때마다 이 작업을 수행합니다.

앱의 URL 경로를 포함하려면 다음 코드를 추가하세요.

# path -> example/urls.py
# "listings" is the name of my app (same name as in the Django setup post) 

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('listings.urls')),
]


#baltlogs.com

앱 - urls.py

이제 프로젝트의 urls.py에 설정된 경로와 일치하는 앱(목록)의 디렉토리에 urls.py 파일을 만들어야 합니다.

새 urls.py 파일을 생성한 후 목록 앱 디렉토리는 다음과 같이 표시됩니다.



앱 폴더에서 새로 생성된 urls.py를 열고 다음 코드를 추가합니다. 로그인/등록 페이지의 경로입니다.

# path -> listings/urls.py

from django.urls import path 
from .import views

app_name = 'listings'

urlpatterns = [
    path('login_page/', views.login_page, name='login_page'), 
]


#baltlogs.com 

이제 로그인/등록 페이지에 대한 뷰와 템플릿을 생성하기만 하면 됩니다.

우리가 "로그인/등록"을 만들고 있는 페이지를 계속 호출하고 있음을 주목하십시오. 두 가지 양식을 모두 포함했기 때문입니다. 로그인 및 등록 양식이 한 페이지에 있습니다. 그러나 토글 효과를 사용하여 별도로 표시됩니다.

로그인/등록 페이지 보기

앱 디렉토리에서 views.py를 열고 다음 코드를 추가합니다.

# path -> listings/views.py

from django.shortcuts import render

def login_page(request):

    return render(request, 'listings/login_page.html')


#baltlogs.com

로그인/등록 페이지 템플릿

사용자에게 표시될 템플릿을 만들어야 합니다. 그러나 먼저 몇 가지 설정 작업을 수행해야 합니다.

앱의 디렉터리 안에 템플릿이라는 폴더를 만든 다음 템플릿 폴더 안에 앱 이름(목록)으로 폴더를 만듭니다. 이를 통해 Django는 모호성 없이 앱의 템플릿을 해석하고 찾을 수 있습니다. 마지막으로 생성된 폴더 안에 login_page.html이라는 파일을 생성해 보겠습니다.

앱의 디렉터리가 아래 이미지와 같은지 확인하세요.



login_page.html을 열고 다음 코드를 추가합니다.

<!-- Login/Registration Page - HTML -->

<div class="login">
    <div class="form">
        <form class="registration-form">
            <input type="text" placeholder="name" />
            <input type="password" placeholder="password" />
            <input type="text" placeholder="email" />
            <button>create</button>
            <p><a href="#">Log In</a></p>
        </form>
        <form class="login-form">
            <input type="text" placeholder="username" />
            <input type="password" placeholder="password" />
            <button>Login</button>
            <p><a href="#">Register</a></p>
        </form>
    </div>
</div>

<!-- baltlogs.com -->

div 태그

이 태그는 HTML 문서를 섹션으로 나눕니다. div 태그는 컨테이너 역할을 하므로 이 태그 안에 다른 HTML 요소를 넣고 싶을 것입니다.

양식 태그

이름은 그것을 멀리 제공합니다. 이러한 태그는 사용자가 데이터를 입력할 수 있는 HTML 양식을 만드는 데 사용됩니다. 입력, 버튼, 레이블 등과 같이 이러한 태그 안에 들어갈 수 있는 다른 요소가 있습니다.

위에서 설명한 태그는 이 예에서 사용되는 주요 태그이며, 다른 태그에 대해 더 알고 싶다면 Google에서 검색할 수 있습니다.

우리는 두 가지 양식을 만들었습니다. 하나는 등록용이고 다른 하나는 로그인용입니다.

마지막으로 python manage.py runserver 명령을 실행하고 http://127.0.0.1:8000/으로 이동하여 로그인/등록 페이지를 확인합니다.

아래 이미지와 비슷한 것을 얻어야 합니다.



이 시점에서 페이지는 보기 흉하고 매력적이지 않습니다. CSS를 추가하여 보기 좋게 만들어 보겠습니다.

글의 길이를 위해 여기서 마치겠습니다만, 곧 2부가 나옵니다.

장고에 대해 자세히 알아보기:

Django 3..2..1..Takeoff Book

Personal Website