Korean (한국어) translation by Dae-yeop Lee (you can also view the original English article)
이번 시리즈에서 우리는 파이썬 플라스크와 MySQL을 사용해 간단한 웹앱을 만들어 보겠습니다. 여기서 만들 웹 앱은 사용자가 등록하고 로그인하고 버킷 리스트를 만들 수 있는 간단한 버킷 리스트 애플리케이션입니다.
이번 글에서는 여러분이 파이썬(Python) 프로그래밍 언어에 대한 기본적인 지식이 있다고 가정합니다. 또한 파이썬 웹 애플리케이션 프레임워크인 플라스크를 사용해 MySQL을 백엔드로 사용하는 애플리케이션을 만들 것입니다.
파이썬 플라스크 소개
플라스크는 웹 애플리케이션을 만들기 위한 파이썬 프레임워크입니다. 공식 사이트에서는 플라스크를 다음과 같이 소개하고 있습니다.
플라스크는 Werkzeug, Jinja 2, 그리고 좋은 의도를 기반으로 한 파이썬용 마이크로프레임워크입니다.
파이썬에 대해 생각할 때 사실 우리의 머릿속에 떠오르는 업계 표준 프레임워크는 장고(Django) 프레임워크입니다. 그러나 파이썬 초보자의 관점에서 플라스크는 장고와 비교했을 때 시작하기가 더 쉽습니다.
플라스크 설치
플라스크를 설치하는 것은 매우 간단하고 빠릅니다. pip 패키지 관리자를 이용하면 다음과 같이 하면 됩니다.
pip install flask
플라스크를 설치하고 나면 FlaskApp이라는 폴더를 만듭니다. 그런 다음 FlaskApp 폴더로 이동한 후 app.py라는 파일을 만듭니다. flask 모듈을 임포트한 후 다음과 같이 플라스크를 사용해 앱을 만듭니다.
from flask import Flask app = Flask(__name__)
이제 기본 라우트인 /와 해당 라우트의 요청 핸들러를 정의합니다.
@app.route("/")
def main():
return "Welcome!"
이어서 실행된 파일이 메인(main) 프로그램인지 확인하고 앱을 실행합니다.
if __name__ == "__main__":
app.run()
변경 사항을 저장하고 app.py를 실행합니다.
python app.py
브라우저에서 http://localhost:5000/로 이동하면 환영 메시지가 나타날 것입니다.
홈 페이지 만들기
먼저 애플리케이션이 실행되면 사용자가 추가한 최신 버킷 리스트 항목이 포함된 홈 페이지를 표시해야 합니다. 그럼 애플리케이션 폴더에 홈 페이지를 추가해 봅시다.
플라스크는 templates 폴더 안에서 템플릿 파일을 찾습니다. 따라서 PythonApp 폴더로 이동한 후 templates라는 폴더를 만듭니다. templates 안에 index.html이라는 파일을 만듭니다. index.html을 열고 다음 HTML을 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Python Flask Bucket List App</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active"><a href="#">Home</a>
</li>
<li role="presentation"><a href="#">Sign In</a>
</li>
<li role="presentation"><a href="showSignUp">Sign Up</a>
</li>
</ul>
</nav>
<h3 class="text-muted">Python Flask App</h3>
</div>
<div class="jumbotron">
<h1>Bucket List App</h1>
<p class="lead"></p>
<p><a class="btn btn-lg btn-success" href="showSignUp" role="button">Sign up today</a>
</p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>Bucket List</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Bucket List</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Bucket List</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<div class="col-lg-6">
<h4>Bucket List</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Bucket List</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Bucket List</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
</div>
<footer class="footer">
<p>© Company 2015</p>
</footer>
</div>
</body>
</html>
app.py를 열고 템플릿 파일을 렌더링하는 데 사용할 render_template을 임포트합니다.
from flask import Flask, render_template
main 메서드를 수정해서 렌더링된 템플릿 파일을 반환합니다.
def main():
return render_template('index.html')
변경 사항을 저장하고 서버를 다시 시작합니다. 브라우저에서 http://localhost:5000/으로 이동하면 다음과 같은 화면이 나타납니다.
등록 페이지 만들기
1단계: 데이터베이스 설정
여기서는 MySQL을 백엔드로 사용할 것입니다. 그럼 명령줄에서 MySQL에 로그인하거나, MySQL 작업 벤치와 같은 GUI를 선호한다면 그것을 사용하면 됩니다. 먼저 BucketList라는 데이터베이스를 만듭니다. 명령줄에서 다음을 입력합니다.
mysql -u <username> -p
비밀번호를 입력해서 로그인되고 나면 다음 명령을 실행해 데이터베이스를 생성합니다.
CREATE DATABASE BucketList;
데이터베이스가 만들어지면 다음과 같이 tbl_user라는 테이블을 만듭니다.
CREATE TABLE `BucketList`.`tbl_user` ( `user_id` BIGINT NULL AUTO_INCREMENT, `user_name` VARCHAR(45) NULL, `user_username` VARCHAR(45) NULL, `user_password` VARCHAR(45) NULL, PRIMARY KEY (`user_id`));
여기서는 MySQL 데이터베이스와 파이썬 애플리케이션이 상호작용하는 데 저장 프로시저(Stored procedure)를 사용할 것입니다. 따라서 tbl_user 테이블이 만들어지면 사용자를 등록하는 sp_createUser라는 저장 프로시저를 만듭니다.
tbl_user 테이블에 사용자를 생성하는 저장 프로시저를 만들 때는 먼저 동일한 username을 가진 사용자가 있는지 확인해야 합니다. 그러한 사용자가 존재하는 경우 사용자에게 오류를 던져야 합니다. 그렇지 않을 경우 사용자 테이블에 사용자를 생성합니다. 다음은 sp_createUser 저장 프로시저입니다.
DELIMITER $$
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_createUser`(
IN p_name VARCHAR(20),
IN p_username VARCHAR(20),
IN p_password VARCHAR(20)
)
BEGIN
if ( select exists (select 1 from tbl_user where user_username = p_username) ) THEN
select 'Username Exists !!';
ELSE
insert into tbl_user
(
user_name,
user_username,
user_password
)
values
(
p_name,
p_username,
p_password
);
END IF;
END$$
DELIMITER ;
2단계: 등록 인터페이스 제작
PythonApp/templates 디렉터리로 이동한 후 signup.html이라는 HTML 파일을 만듭니다. signup.html에 다음 HTML 코드를 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Python Flask Bucket List App</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
<link href="../static/signup.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" ><a href="main">Home</a></li>
<li role="presentation"><a href="#">Sign In</a></li>
<li role="presentation" class="active"><a href="#">Sign Up</a></li>
</ul>
</nav>
<h3 class="text-muted">Python Flask App</h3>
</div>
<div class="jumbotron">
<h1>Bucket List App</h1>
<form class="form-signin">
<label for="inputName" class="sr-only">Name</label>
<input type="name" name="inputName" id="inputName" class="form-control" placeholder="Name" required autofocus>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" name="inputEmail" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" name="inputPassword" id="inputPassword" class="form-control" placeholder="Password" required>
<button id="btnSignUp" class="btn btn-lg btn-primary btn-block" type="button">Sign up</button>
</form>
</div>
<footer class="footer">
<p>© Company 2015</p>
</footer>
</div>
</body>
</html>
또한 다음과 같은 CSS를 signup.css 파일에 담아 PythonApp 안의 정적 폴더에 추가합니다.
body {
padding-top: 40px;
padding-bottom: 40px;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
app.py에서는 showSignUp이라는 또 다른 메서드를 추가해서 요청이 /showSignUp에 도착하면 등록 페이지를 렌더링합니다.
@app.route('/showSignUp')
def showSignUp():
return render_template('signup.html')
변경 사항을 저장하고 서버를 재시작합니다. 홈 페이지에서 등록(Sign Up) 버튼을 클릭하면 다음과 같이 등록 페이지가 나타납니다.
3단계: 등록 메서드 구현
다음으로 UI가 MySQL 데이터베이스와 상호작용할 수 있는 서버 측 메서드가 필요합니다. 따라서 PythonApp로 가서 app.py를 엽니다. signUp이라는 새 메서드를 만들고 /signUp 라우트를 추가합니다. 코드는 다음과 같습니다.
@app.route('/signUp')
def signUp():
# create user code will be here !!
여기서는 signUp 메서드에 등록 데이터를 전송하는 데 jQuery AJAX를 사용할 것이므로 라우트 정의에 메서드를 지정합니다.
@app.route('/signUp',methods=['POST'])
def signUp():
# create user code will be here !!
전송된 값을 읽으려면 플라스크에서 request를 임포트해야 합니다.
from flask import Flask, render_template, request
request를 이용하면 다음과 같이 전송된 값을 읽을 수 있습니다.
@app.route('/signUp',methods=['POST'])
def signUp():
# read the posted values from the UI
_name = request.form['inputName']
_email = request.form['inputEmail']
_password = request.form['inputPassword']
값을 읽고 나면 잠시 동안 값이 유효한지 여부를 간단히 확인하고 간단한 메시지를 반환합니다.
@app.route('/signUp',methods=['POST'])
def signUp():
# read the posted values from the UI
_name = request.form['inputName']
_email = request.form['inputEmail']
_password = request.form['inputPassword']
# validate the received values
if _name and _email and _password:
return json.dumps({'html':'<span>All fields good !!</span>'})
else:
return json.dumps({'html':'<span>Enter the required fields</span>'})
또한 위 코드에서 json 데이터를 반환하는 데 사용하고 있듯이 플라스크에서 json을 임포트합니다.
from flask import Flask, render_template, json, request
4단계: 등록 요청 생성
여기서는 jQuery AJAX를 이용해 등록 요청을 파이썬 메서드에 전송하겠습니다. PythonApp/static/js 안에 jQuery를 내려받은 다음 등록 페이지에서 해당 링크를 추가합니다. jQuery를 포함하고 나면 사용자가 등록(Sign Up) 버튼을 클릭했을 때 jQuery POST 요청이 추가됩니다.
그럼 다음과 같이 등록 버튼에 클릭 이벤트를 첨부합니다.
$(function() {
$('#btnSignUp').click(function() {
$.ajax({
url: '/signUp',
data: $('form').serialize(),
type: 'POST',
success: function(response) {
console.log(response);
},
error: function(error) {
console.log(error);
}
});
});
});
변경 사항을 모두 저장하고 서버를 재시작합니다. 등록(Sign Up) 페이지에서 세부 정보를 입력하고 등록(Sign Up)을 클릭합니다. 브라우저 콘솔을 확인하면 다음과 같은 메시지가 표시될 것입니다.
{"html": "<span>All fields good !!</span>"}
5단계: MySQL 저장 프로시저 호출
이름, 이메일 주소, 비밀번호가 있으면 MySQL 저장 프로시저를 호출해서 새 사용자를 만들 수 있습니다.
여기서는 MySQL과 연결하기 위해 플라스크 확장인 Flask-MySQL을 사용하겠습니다. Flask-MySQL을 시작하기 위해 pip 패키지 관리자를 이용해 설치합니다.
pip install flask-mysql
app.py에서 MySQL를 임포트합니다.
from flask.ext.mysql import MySQL
앞에서는 앱을 다음과 같이 정의했습니다.
app = Flask(__name__)
이와 함께 다음과 같은 MySQL 구성을 포함합니다.
mysql = MySQL() # MySQL configurations app.config['MYSQL_DATABASE_USER'] = 'jay' app.config['MYSQL_DATABASE_PASSWORD'] = 'jay' app.config['MYSQL_DATABASE_DB'] = 'BucketList' app.config['MYSQL_DATABASE_HOST'] = 'localhost' mysql.init_app(app)
먼저 MySQL 연결을 생성해 보겠습니다.
conn = mysql.connect()
연결이 생성되면 저장 프로시저를 쿼리하기 위해 cursor가 필요합니다. 따라서 conn 연결을 이용해 커서를 만듭니다.
cursor = conn.cursor()
사용자 생성 저장 프로시저를 호출하기에 앞서 Werkzeug가 제공하는 도우미를 이용해 비밀번호에 솔트(salt)를 적용해 봅시다. 관련 모듈을 app.py로 임포트합니다.
from werkzeug import generate_password_hash, check_password_hash
솔트 모듈을 사용해 해시된 비밀번호를 생성합니다.
_hashed_password = generate_password_hash(_password)
이제 sp_createUser 프로시저를 호출해 보겠습니다.
cursor.callproc('sp_createUser',(_name,_email,_hashed_password))
프로시저가 성공적으로 실행되면 변경 사항을 반영하고 성공 메시지를 반환합니다.
data = cursor.fetchall()
if len(data) is 0:
conn.commit()
return json.dumps({'message':'User created successfully !'})
else:
return json.dumps({'error':str(data[0])})
변경 사항을 저장하고 서버를 재시작합니다. 등록 페이지로 이동해서 이름, 이메일 주소, 비밀번호를 입력하고 등록(Sign Up) 버튼을 클릭합니다. 사용자 생성이 성공하면 브라우저 콘솔에서 메시지를 볼 수 있을 것입니다.
{"message": "User created successfully !"}
정리
이번 튜토리얼에서는 파이썬 플라스크, MySQL, Flask-MySQL 확장을 이용해 웹 애플리케이션을 작성하는 방법을 알아봤습니다. 또한 데이터베이스 테이블과 저장 프로시저를 만들고 설계하고 사용자 등록 기능을 구현했습니다. 다음 튜토리얼에서는 로그인 및 기타 기능을 구현해 보면서 이번 연재 기사의 다음 단계로 넘어가겠습니다.
이 튜토리얼의 소스코드는 깃허브(GitHub)에서 확인할 수 있습니다.
아래 댓글로 여러분의 생각을 알려주세요!
