🐍 파이썬 (Python)/-- 플라스크 (Flask)

플라스크 (Flask) - 회원가입 기능 만들기 (MVC 패턴 )

*Flask 회원가입기능 만들기

*구조 (Structure)

Flask폴더
│   ├── templates (폴더)
│          ├── register.html
│
│
├── app.py (실행파일)
├── db.sqlite (이건 자동으로 생성됨)
├── models.py

* app.py

from flask import Flask, render_template, request, redirect #render_template으로 html파일 렌더링
from models import db
import os
from models import Fcuser
app = Flask(__name__)

@app.route('/')
def hello():
    return render_template("hello.html")
#GET = 페이지가 나오도록 요청. POST = 버튼을 눌렀을때 데이터를 가지고오는 요청/ 요청정보확인하려면 request 임포트 필요
@app.route('/register', methods=['GET','POST'])
def register():
    if request.method == 'GET':
        return render_template("register.html")
    else:
        #회원정보 생성
        userid = request.form.get('userid') 
        username = request.form.get('username')
        password = request.form.get('password')
        re_password = request.form.get('re_password')
        print(password) # 들어오나 확인해볼 수 있다. 


        if not (userid and username and password and re_password) :
            return "모두 입력해주세요"
        elif password != re_password:
            return "비밀번호를 확인해주세요"
        else: #모두 입력이 정상적으로 되었다면 밑에명령실행(DB에 입력됨)
            fcuser = Fcuser()         
            fcuser.password = password           #models의 FCuser 클래스를 이용해 db에 입력한다.
            fcuser.userid = userid
            fcuser.username = username      
            db.session.add(fcuser)
            db.session.commit()
            return "회원가입 완료"

        return redirect('/')

if __name__ == "__main__":
    basedir = os.path.abspath(os.path.dirname(__file__))  # database 경로를 절대경로로 설정함
    dbfile = os.path.join(basedir, 'db.sqlite') # 데이터베이스 이름과 경로
    app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///' + dbfile
    app.config['SQLALCHEMY_COMMIT_ON_TEARDOWN'] = True     # 사용자에게 원하는 정보를 전달완료했을때가 TEARDOWN, 그 순간마다 COMMIT을 하도록 한다.라는 설정
    #여러가지 쌓아져있던 동작들을 Commit을 해주어야 데이터베이스에 반영됨. 이러한 단위들은 트렌젝션이라고함.
    app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False   # True하면 warrnig메시지 유발, 

    db.init_app(app) #초기화 후 db.app에 app으로 명시적으로 넣어줌
    db.app = app
    db.create_all()   # 이 명령이 있어야 생성됨. DB가


    app.run(host='127.0.0.1', port=5000, debug=True)

return render_template('xxxx.html') - template 폴더 안의 html파일을 렌더링합니다.

@app.route('/register', methods=['GET','POST']) - GET 와 POST 두가지 메서드를 허용합니다.

허용하지 않으면 아래 그림처럼 Method Not Allowed 메시지가 발생합니다.

추가로 POST, GET은 둘다 정보를 서버로 전달하기위한 기능입니다.

차이점은 GET : 저장된 정보를 단순히 요청할때 사용되며, url에 정보의 이름이 노출됩니다.

POST : url에 쿼리가 노출되지 않으며, 요청시 데이터 양에 제한이 없습니다.

POST는 한마디로 데이터에 수정이 있는경우 (게시글 작성, 회원가입 정보 받기)

GET은 단순히 정보를 보기위한 용도? (게시글 읽기, 회원가입창 보기)

*register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
    <div class = "container">
        <div class="row mt-5">
            <h1>회원가입</h1>
        </div>
        <div class="row mt-5">
        <div class="col-12">
            <form method="POST" >
                <div class="form-group">
                    <label for="userid">아이디</label>
                    <input type="text" class="form-control" id="userid" placeholder="아이디" name="userid"/>
                    <!-- id는 삭제해도 되더라. 마지막에 name과 app.py의 get 메소드 사용하는 부분이 일치해야 상응한다 -->
                </div>
                <div class="form-group">
                    <label for="username">사용자 이름</label>
                    <input type="text" class="form-control" id="username" placeholder="사용자 이름" name="username"/>

                </div>
                <div class="form-group">
                    <label for="password">비밀번호</label>
                    <input type="password" class="form-control" id="password" placeholder="비밀번호" name="password"/>
                </div>
                <div class="form-group">
                    <label for="re_password">비밀번호확인</label>
                    <input type="password" class="form-control" id="re_password" placeholder="비밀번호확인" name="re_password"/>
                </div>
                <button type="submit" class="btn btn-primary">등록</button>
            </form>
        </div>
        </div>
</body>
</html>

form은 부트스트랩(bootstrap)을 이용했습니다.

<form method="POST" >: input을 감싸는 태그에 메소드를 표시해줘야 합니다.

<input type="text" class="form-control" id="userid" placeholder="아이디" name="userid"/>

*Models.py (데이터 베이스)

from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()           #SQLAlchemy를 사용해 데이터베이스 저장

class Fcuser(db.Model): 
    __tablename__ = 'fcuser'   #테이블 이름 : fcuser
    id = db.Column(db.Integer, primary_key = True)   #id를 프라이머리키로 설정
    password = db.Column(db.String(64))     #패스워드를 받아올 문자열길이 
    userid = db.Column(db.String(32))       #이하 위와 동일
    username = db.Column(db.String(8))

여기까지 만들고 app.py를 파이썬상에서 실행시키면

여기까지하면 완성입니다. 아이디, 이름, 비밀번호를 입력한 후, 제출버튼을 누르면 db.sqlite 데이터베이스에 입력됩니다.

*DB로 잘 넘어가는지 확인하기

(비밀번호는 input type='password' 라서 동그라미로 표시되었으나, 1234로 입력하였습니다.)

제출을 누른뒤 db.sqlite를 열어보겠습니다.

잘 들어간 모습입니다.

'🐍 파이썬 (Python) > -- 플라스크 (Flask)' 카테고리의 다른 글

플라스크 (Flask) 로그인 , 로그아웃 기능 만들기 (session 활용) (20)	2020.02.08
플라스크 (Flask) Static 파일 적용하기. (CSS, JS) url_for (0)	2020.02.07
플라스크 (Flask) - 회원가입 기능 만들기 2 (flask - WTF 이용하기) (0)	2020.02.05
CSV 파일 읽어들여서 highcharts + Flask 그래프 구현하기. (0)	2019.11.16
데이터 베이스 시간 표시방법 - Timestamp (unix time) (0)	2019.11.13

Contents

새소식

인기 검색어