Django로 회원가입/로그인 페이지 만들기 (Python)

728x90

오늘 수강한 내용은 장고를 활용한 회원가입과 로그인 페이지를 만드는 것이다!

오전에는 파이쉘 커맨드를 사용해서 vagrant 가상환경을 연결하는 것을 했지만, 어떤 이유에서인지 오류가 아주 심하게 났다.

그래서 멘탈이 아주 탈탈 털리고 오후 수업 장고로 넘어왔는데 여기서도 처음에 전혀 다르게 한게 없는데 갑자기 오류가 나서 오늘은 정말 날이 아닌가보다 아주 힘든 월요일이다.. 라고 생각하면서 모든분들이 기다려주는 가운데 혼자 새로했고, 시간이 남들보단 오래 걸렸지만 결과적으론 성공했다!

서론이 길었는데 지금부터 오늘 배운 내용을 복기하며 시작해보자

참고)) 이번 포스팅 역시 Django 한그릇 뚝딱의 내용을 기반으로 하며, 코드가 업데이트 될 부분이 있어 포스팅으로 공부 기록겸 작성함을 알린다.

자세한 설명과 기록은 교재를 구입해 참고하면 큰 도움을 받을 수 있다!

1. 기본 세팅하기

github 에서 레포 하나를 만들고, git bash 를 사용해서 clone 상태로 만든다.

그리고 vs code 를 실행해 가상환경을 설정해주자

여기까지의 내용은 굳이 캡쳐와 코드를 올리지 않겠다.

앞의 블로그의 포스팅에서도 다뤘고 이정도는 이제 자동암기된 상태니까.

가상환경까지 완료된 상태에서 사용할 때 필요한 파일들을 먼저 다운해줘야 한다.

파일은 새파일 만들기에서 텍스트 파일로 만들고 우리가 사용할 다음 4가지를 작성해 터미널 창을 통해 다운받자

$ pip install -r requirements.txt

다음으론 장고에서 프로젝트를 생성하고 우리가 사용할 앱 3개를 다운해주자

코드는 아래 순서대로 작성한다. 이 때, 사진을 보며 경로에 유의하자

django-admin startproject ExcelCalculate
ls
cd ExcelCalculate/
python manage.py startapp main
python manage.py startapp sendEmail
python manage.py startapp calculate
ls
python manage.py runserver

2. main에 html 파일 구성하기

html 파일을 미리 구성하는것이 좋다.

main 앱 폴더 안에 템플릿 폴더를 만들고 그 안에 main 폴더를 다시 만들어 그 안에 html 파일들을 넣어주자

1. index.html

<html lang="ko">
<head>
    <meta charset="UTF-8">

    <!-- Boot strap -->
    <!-- 합쳐지고 최소화된 최신 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <!-- 부가적인 테마 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <style>
        .content{
            height: 75%;
        }
        .messageDiv{
            margin-top: 20px;
            margin-bottom: 50px;
        }
        .custom-btn{
            font-size: 10px;
        }
        .panel-footer{
            height:10%;
            color:gray;
        }
    </style>

    <title>Excel Calculate</title>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="page-header">
                <h1>Excel Calculate <small>with Django</small><a href="logout" class="btn btn-danger btn-xs" style="margin-left: 30px">로그아웃</a></h1>
            </div>
        </div>
        <div class="content">
            <div class="fileInputDiv">
                <form action="" method="POST">{% csrf_token %}
                    <div class="input-group">
                        하단 버튼을 통해 파일을 업로드 해주세요.(.xls 확장자의 파일만 가능합니다.)<br>
                        <input id="fileInput" name="fileInput" type="file" class="form-control">
                        <input type="submit" class="btn btn-success btn-lg" value="파일 제출">
                    </div>
                </form>
            </div>
        </div>
        <div class="panel-footer">
            실전예제로 배우는 Django. Project3-ExcelCalculate
        </div>
    </div>
</body>
</html>

2. result.html

<html lang="ko">
<head>
    <meta charset="UTF-8">

    <!-- Boot strap -->
    <!-- 합쳐지고 최소화된 최신 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <!-- 부가적인 테마 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <style>
        .content{
            height: 75%;
        }
        .messageDiv{
            margin-top: 20px;
            margin-bottom: 50px;
        }
        .custom-btn{
            font-size: 10px;
        }
        .panel-footer{
            height:10%;
            color:gray;
        }
    </style>

    <title>Excel Calculate</title>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="page-header">
                <a href="/" class="btn btn-default btn-xs" style="margin: 10px">메인화면</a>
                <h1>Excel Calculate <small>with Django</small></h1>
            </div>
        </div>
        <div class='body'>
            <div class="resultDiv">
                <h3> * Excel 결과 확인 *</h3>
            </div>
            <hr>
        </div>
        <div class="panel-footer">
            실전예제로 배우는 Django. Project3-ExcelCalculate
        </div>
    </div>
</body>
</html>

3. signin.html

<html lang="ko">
<head>
    <meta charset="UTF-8">

    <!-- Boot strap -->
    <!-- 합쳐지고 최소화된 최신 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <!-- 부가적인 테마 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <style>
        .content{
            height: 75%;
        }
        .messageDiv{
            margin-top: 20px;
            margin-bottom: 50px;
        }
        .custom-btn{
            font-size: 10px;
        }
        .panel-footer{
            height:10%;
            color:gray;
        }
    </style>

    <title>Excel Calculate</title>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="page-header">
                <h1>
                    <a href="/" class="btn btn-default btn-xs" style="margin: 10px">메인화면</a>
                    Excel Calculate <small>with Django</small>
                </h1>
            </div>
        </div>
        <div class="content">
            <div class="mainDiv">
                <h3>안녕하세요. 로그인을 진행해주세요.</h3><br>
                <form action="" method="POST">{% csrf_token %}
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1">이메일</span>
                        <input type="email" name='loginEmail' class="form-control" placeholder="이메일을 적어주세요." aria-describedby="basic-addon1">
                    </div><br>
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1">비밀번호</span>
                        <input type="password" name='loginPW' class="form-control" placeholder="비밀번호를 적어주세요." aria-describedby="basic-addon1">
                    </div><br>
                    <input type="submit" class="btn btn-success btn-lg" value="로그인">
                </form>
                <a href="signup">회원가입하기</a>
            </div>
        </div>
        <div class="panel-footer">
            실전예제로 배우는 Django. Project3-ExcelCalculate
        </div>
    </div>
</body>
</html>

4. signup.html

<html lang="ko">
<head>
    <meta charset="UTF-8">

    <!-- Boot strap -->
    <!-- 합쳐지고 최소화된 최신 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <!-- 부가적인 테마 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <style>
        .content{
            height: 75%;
        }
        .messageDiv{
            margin-top: 20px;
            margin-bottom: 50px;
        }
        .custom-btn{
            font-size: 10px;
        }
        .panel-footer{
            height:10%;
            color:gray;
        }
        .userInfoInputDiv{
            text-align: center;
        }

    </style>
    <script>
        function submit_click(){
            var pw = document.getElementById('signupPW').value
            var pwcheck = document.getElementById('signupPWcheck').value
            if(pw == pwcheck){
                document.getElementById('signup-form').submit();
            }else{
                alert("비밀번호가 일치하지 않습니다.")
                document.getElementById('signupPWcheck').focus()
            }
        }
    </script>
    <title>Excel Calculate</title>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="page-header">
                <a href="/" class="btn btn-default btn-xs" style="margin: 10px">메인화면</a>
                <h1>Excel Calculate <small>with Django</small>
                    
                </h1>
            </div>
        </div>
        <div class="content">
            <div class="userInfoInputDiv">
                <h1> 회원가입 하기 </h1><br>
                <form action="signup/join" method="POST" id="signup-form">{% csrf_token %}
                    <div class="input-group">
                        <span class="input-group-addon">이름</span>
                        <input id="signupName" name='signupName' type="text" class="form-control" placeholder="이름을 적어주세요." aria-describedby="basic-addon1">
                    </div><br>
                    <div class="input-group">
                        <span class="input-group-addon">이메일</span>
                        <input id="signupEmail" name='signupEmail' type="email" class="form-control" placeholder="이메일을 적어주세요." aria-describedby="basic-addon1">
                    </div><br>
                    <div class="input-group">
                        <span class="input-group-addon">비밀번호</span>
                        <input id="signupPW" name='signupPW' type="password" class="form-control" placeholder="비밀번호를 적어주세요." aria-describedby="basic-addon1">
                    </div><br>
                    <div class="input-group">
                        <span class="input-group-addon">비밀번호 확인</span>
                        <input id="signupPWcheck"  name='signupPWcheck' type="password" class="form-control" placeholder="비밀번호 적어주세요." aria-describedby="basic-addon1">
                    </div><br>
                    <input type="button" class="btn btn-primary btn-lg" id="btn-submit" onclick="submit_click();" value="회원가입하기">
                </form>
                    
                
            </div>
        </div>
        <div class="panel-footer">
            실전예제로 배우는 Django. Project3-ExcelCalculate
        </div>
    </div>

5. verifyCode.html

<html lang="ko">
<head>
    <meta charset="UTF-8">

    <!-- Boot strap -->
    <!-- 합쳐지고 최소화된 최신 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <!-- 부가적인 테마 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <style>
        .content{
            height: 75%;
        }
        .messageDiv{
            margin-top: 20px;
            margin-bottom: 50px;
        }
        .custom-btn{
            font-size: 10px;
        }
        .panel-footer{
            height:10%;
            color:gray;
        }
    </style>

    <title>Excel Calculate</title>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="page-header">
                <h1>
                    <a href="/" class="btn btn-default btn-xs" style="margin: 10px">메인화면</a>
                    Excel Calculate <small>with Django</small>
                </h1>
            </div>
        </div>
        <div class="content">
            <div class="mainDiv">
                <h4>회원가입을 위해 입력하신 이메일로 인증코드를 보냈습니다.</h4>
                <h3>이메일로 전송된 메일의 인증코드를 입력해주세요.</h3><br>
                <form action="" method="POST">{% csrf_token %}
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1">인증코드</span>
                        <input name='verifyCode' type="text" class="form-control" placeholder="인증코드를 적어주세요." aria-describedby="basic-addon1">
                    </div><br>
                    <input type="submit" class="btn btn-success btn-lg" value="인증하기">
                </form>
            </div>
        </div>
        <div class="panel-footer">
            실전예제로 배우는 Django. Project3-ExcelCalculate
        </div>
    </div>
</body>
</html>

3. ExcelCalculate 설정하기

여기서 말하는 ExcelCalculate는 장고 프로젝트로 실행한 폴더를 말한다.

우리가 위에서 세팅할 때, 앱 3개를 설치했다. 그래서 이 앱을 사용하기 위해 등록을 먼저 해주자.

ExcelCalculate > ExcelCalculate > settings 에서 앱 등록 후, 저장을 한다.

그러면 이 앱을 사용하기 위해서는 urls.py로 연결을 해야한다.

다음과 같이 import 부터 path 지정까지 해주자.

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('main.urls'), name="main"),
    path('calculate/', include('calculate.urls'), name="calculate"),
    path('email/', include('sendEmail.urls'), name="email")
]

4. urls.py 설정하기

위의 코드를 보며 드는 생각이 있을 것이다. path 에는 각 앱마다 urls와 이름을 설정했는데, 우리는 앱에 urls 파일을 만든적이 없어 파일이 없다. 이 프로젝트의 urls 파일에서 실행할 각 앱의 urls 파일을 만들고 코드를 작성하자.

from django.urls import path
from . import views

urlpatterns = [
    path('', views.calculate, name="calculate_do")
]

from django.urls import path
from . import views

urlpatterns = [
    path('send', views.send, name="email_send")
]

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name="main_index"), 
    path('signup', views.signup, name="main_signup"),
    path('signup/join', views.join, name="main_join"), 
    path('signin', views.signin, name="main_signin"),
    path('verifyCode', views.verifyCode, name="main_verifyCode"),
    path('verify', views.verify, name="main_verify"), 
    path('result', views.result, name="main_result")
]

각각 맞는 파일을 설정해주자

5. views.py 설정하기

앞에서 urls 세팅까지 완료하면 views 파일을 설정해줘야 한다.

왜 그런지 의문이라면 앞의 MVC에 대한 포스팅을 참고하자

2023.07.26 - [python] - Django - MTV? MVC?

Django - MTV? MVC?

장고를 접하게 되면서 장고의 디자인 패턴에 대해 공부하며 작성해보려 한다. 1. MTV 패턴 (Model - Template - View) 3가지로 영역을 나눠 독립적으로 프로그램을 개발하는 패턴이다. Java의 MVC 패턴의 단

forky-develop.tistory.com

from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.
def calculate(request):
    return HttpResponse("calculate, calculate function!")

from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.
def send(receiverEmail, verifyCode):
    return HttpResponse("sendEmail, send function!")

verify 함수에서는 redirect를 사용해 인증이 완료되면 메인화면으로 돌아가도록 우회했기에 결과적으로 메인화면이 뜬다.

from django.shortcuts import render, redirect
from .models import *

# Create your views here.
def index(request):
    return render(request, "main/index.html")

def signup(request):
    return render(request, "main/signup.html")

def join(request):
    print(request)

    name = request.POST['signupName']
    email = request.POST['signupEmail']
    pw = request.POST['signupPW']
    user = User(user_name = name, user_email = email, user_password = pw)
    user.save()

    print("사용자 정보 저장 완료됨!!")

    return redirect("main_verifyCode")

def signin(request):
    return render(request, "main/signin.html")

def verifyCode(request):
    return render(request, "main/verifyCode.html")

def verify(request):
    return redirect("main_index") # 인증이 완료되면 메인화면으로 보내라

def result(request):
    return render(request, "main/result.html")

6. models.py 설정하기

main > models.py 을 설정해줘야 한다.

from django.db import models

# Create your models here.
class User(models.Model):
    user_name = models.CharField(max_length=20)
    user_email = models.EmailField(unique=True)
    user_password = models.CharField(max_length=100)
    user_validate = models.BooleanField(default=False)

7. admin.py 설정하기

from django.contrib import admin
from .models import *

# Register your models here.
admin.site.register(User)

8. migrations 해주기

다음 과정을 먼저 해준다.

$ python manage.py makemigrations
$ python manage.py migrate

9. superuser 생성하기

우리는 사이트를 최종적으로 관리할 수 있는 관리자 계정을 생성해야한다.

$ python manage.py createsuperuser

그리고 다시한번 runserver를 실행해서 홈페이지 상황을 둘러보자

위에 signup.html 코드의 action을 미리 변경해줬기 때문에 장고 서버가 정상적으로 열렸을 것이다.

그러면 1차적으로 장고 프로젝트는 완성되었다!

내일 뒷 부분 내용을 배우면 추가로 작성하겠다.

대망의 마지막!! 관리자 페이지(원주소/admin)에 회원가입을 한 아직 인증은 되지 않은, 계정생성이 되었는지 확인하자

오류로 다사다난했던 오늘의 복기가 끝났다.👏👏👏

728x90

저작자표시 비영리 변경금지

'python' 카테고리의 다른 글

Django로 회원가입/로그인 페이지 만들기 (Python) - 2탄 (0)	2023.08.01
가상환경 jupyter lab을 이용해 selenium 세팅하기 (Python) (0)	2023.08.01
streamlit 꾸미기를 해보자 - 위젯 활용편 (0)	2023.07.28
streamlit 꾸미기를 해보자 - seaborn X matplotlib 활용편 (0)	2023.07.28
streamlit 꾸미기를 해보자 - 데이터 프레임 활용편 (0)	2023.07.28

포키의 개발 공부

Django로 회원가입/로그인 페이지 만들기 (Python) - 1탄

1. 기본 세팅하기

2. main에 html 파일 구성하기

1. index.html

2. result.html

3. signin.html

4. signup.html

5. verifyCode.html

3. ExcelCalculate 설정하기

4. urls.py 설정하기

5. views.py 설정하기

6. models.py 설정하기

7. admin.py 설정하기

8. migrations 해주기

9. superuser 생성하기

'python' 카테고리의 다른 글

티스토리툴바

Django로 회원가입/로그인 페이지 만들기 (Python) - 1탄

1. 기본 세팅하기

2. main에 html 파일 구성하기

1. index.html

2. result.html

3. signin.html

4. signup.html

5. verifyCode.html

3. ExcelCalculate 설정하기

4. urls.py 설정하기

5. views.py 설정하기

6. models.py 설정하기

7. admin.py 설정하기

8. migrations 해주기

9. superuser 생성하기

'python' 카테고리의 다른 글

관련글

티스토리툴바