[Web] 게시판 만들기_02.Python Flask, Mysql 연동

 

저번시간에 이어서 이번엔 메인 페이지를 Python Flask에서 서버를 구동시켜보겠습니다.

 

(부트스트랩 연동 포스팅 : https://cha4ser.tistory.com/entry/Web-%EB%B6%80%ED%8A%B8%EC%8A%A4%ED%8A%B8%EB%9E%A9%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%9B%B9-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EB%A7%8C%EB%93%A4%EA%B8%B0)

 

 

 

Pycharm을 키고 정말 간단한 코드를 작성해봅시다.

 

Pycharm 프로젝트는 이전 포스팅에서 작성한 html과 같은 폴더로 설정하는 것이 좋습니다.

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run()

우선 첫줄에는 Flask와 render_template을 import 한 다음 객체를 만듭니다.

 

다음 @app.route('/') 부분은 라우트를 설정하는 것으로, URL을 설정한다 라고 생각하셔도 될것 같습니다.

 

('/')는 가장 기본인 메인 페이지라고 생각하시면 되고, 바로 def index 함수가 실행이 되어 
render_template('index.html')이 반환됩니다. 여기서 render_template 안에 있는 'index.html'이 바로 이전 포스팅에서 
제작한 게시판 html 코드 입니다. 

 

즉, 각 함수별로 render_template으로 반환해주는 html을 화면에 띄우는 것이죠.

 

위에 있는 코드를 돌리면 일단 아무 동작도 하지 않고 메인 페이지만 띄워주는 동작을 할 것 입니다. 

 

코드를 한번 돌려보면

 

 

html 코드는 작동되지 않고 에러가 납니다. 이유는 index.html의 위치 때문입니다.

 

flask를 사용할 때 html과 css, js는 각각 정해진 폴더에 위치해야 제대로 동작이 됩니다. 하지만 현재 디렉토리는 

 

index.py와 index.html이 같은 디렉토리에 존재하기 때문에 동작이 제대로 되지 않은 것입니다.

 

제대로 작동시키기 위해서는 

 

html -> [templates]

css   -> [static]  -> [css]

js     -> [static]  -> [js]

 

이렇게 폴더를 만들어 주셔야 합니다.

 

 

이런식으로 templates 폴더에 index.html을 넣고, static 폴더 아래 css와 js 폴더를 만들어 주면 됩니다. css와 js는 
부트스트랩 CDN을 이용했기 때문에 아직 쓸일이 있을지는 모르겠지만 혹시 모르니 만들어줬습니다.

 

다시한번 돌려봅시당

 

 

화면이 제대로 출력되었습니다! 

 

다음은 Mysql과 연동하는 작업을 해보도록 하겠습니다.

 

Mysql 설치 방법은 다른 좋은 글들이 많기 때문에 생략하고, 바로 DB 만드는 것부터 진행하겠습니다.

 

CREATE DATABASE `free_board` CHARACTER SET utf8 COLLATE utf8_general_ci;
USE free_board;


CREATE TABLE `board` (
    -> `num` int NOT NULL,
    -> `title` varchar(50) NOT NULL,
    -> `writer` varchar(50) NOT NULL,
    -> `views` int NOT NULL,
    -> `context` varchar(200) NOT NULL);

 

`free_board` 라는 DB를 만들고 use 명령어로 DB 선택 후에 `board` 라는 테이블을 만들었습니다.

 

간단하게 번호, 제목, 글쓴이, 조회수, 내용 으로 작성하였습니다. 

 

원래는 글쓰기 화면에서 글을 쓴 다음 자동으로 DB에 저장되어야 하지만 아직 글쓰기 페이지를 구현하지 않았기
때문에 임의로 3개정도 데이터를 넣어보겠습니당

 

INSERT INTO `board` (`num`, `title`, `writer`, `views`, `context`) VALUES ('1', 'title_1', 'Cha4SEr', '10', '안녕하세용');
INSERT INTO `board` (`num`, `title`, `writer`, `views`, `context`) VALUES ('2', 'title_2', 'abcde', '7', '테스트!');
INSERT INTO `board` (`num`, `title`, `writer`, `views`, `context`) VALUES ('3', 'title_333', 'Cha4SEr', '17', '하위');

SELECT * FROM `board`

 

INSERT 명령어로 3가지의 데이터를 입력했습니다. SELECT 명령어로 조회를 해보면

 

 

정상적으로 잘 들어간 것을 볼 수 있습니다.

 

이제 Python 코드에서 html에 작성한 임의의 데이터가 아닌 디비에 있는 정보를 가져와서 출력해보도록 하겠습니다.

 

import pymysql

db = pymysql.connect(host="localhost", user="root", passwd="1234", db="free_board", charset="utf8")
cur = db.cursor()

 

python에서 mysql을 연동하려면 pymysql을 import 해야합니다. 그 다음 객체를 만들어 줄때

로컬호스트와 mysql에 접속한 계정과 비밀번호, 데이터베이스 이름, utf8을 설정해주면 됩니다.

 

그 다음 쿼리문의 결과를 가져오게 할 커서를 만들어 줍니다.

 

sql = "SELECT * from board"
cur.execute(sql)

data_list = cur.fetchall()

print(data_list[0])
print(data_list[1])
print(data_list[2])

 

이제 실행할 쿼리문을 스트링 형식으로 선언해준 다음

cur.execute로 쿼리문을 실행해주고

data_list라는 리스트에 실행된 쿼리문으로 인해 나온 결과를 저장합니다.

 

cur.fetchall()을 사용하면 2차원 배열 형태로 저장되기 때문에 각 행별로 결과를 보려면 각각의 인덱스로 
접근하시면 됩니다.  그래서 위의 print 문의 결과는

 

이런식으로 행별로 나오게 됩니다.

 

이제 저장된 data_list를 html 코드에 던져서 화면에 띄워주는 일만 남았습니다. 우선 data_list를 코드에 던져주는 것은

 

return render_template('index.html', data_list=data_list)

render_template으로 html로 접근을 할 때, 매개변수를 하나 추가해주면 됩니다. 

왼쪽에 있는 data_list는 html 코드에서 사용할 변수 명이고

오른쪽에 있는 data_list는 현재 python 코드에서 사용하는 변수 명 입니다. 

 

저는 헷갈리지 않게 같은 이름으로 지정해주었습니다.

 

다음 html코드를 수정하러 가봅시당

 

우선 html 코드에서 테이블을 지정해 주는 곳을 다시 봅시다.

 

<table class="table table-hover table-striped text-center" style="border: 1px solid;">
	<thead>
		<tr>
			<th>번호</th>
			<th>제목</th>
			<th>글쓴이</th>
			<th>조회수</th>

		</tr>
	</thead>
    
	<tbody>
    	<tr>
			<td>1</td>
			<td>Title_1</td>
			<td>Cha4ser</td>
			<td>1</td>
		</tr>

		<tr>
			<td>2</td>
			<td>Title_2</td>
			<td>Cha4ser</td>
			<td>10</td>
		</tr>

		<tr>
			<td>3</td>
			<td>Title_3!</td>
			<td>Cha4ser</td>
			<td>12</td>
		</tr>

	</tbody>
</table>

 

<thead> 에 있는 코드들은 고칠게 없는것으로 보이고 <tbody>에 있는 데이터를 python에서 받은 
data_list 에 있는 데이터들로 바꿔줘야 될 것 같습니다. 

 

우선 여기서 알아야 할 것은 html에서 Python Script를 사용하는 방법입니다. 

사용하는 방법은 크게 두가지 입니다

 

1. 변수만 사용하는 경우

2. 반복문 등 명령어를 사용하는 경우

 

1번의 경우는 간단하게 {{ var_name }} 로 중괄호 두개로 감싸주면 되고

2번의 경우는 {% for i in var %} 처럼 중괄호와 %를 이용합니다.

 

여기서 중요한 점은 html에서 python 변수를 사용하기 위해서는 위의 return  render_template에서 
data_list = data_list 처럼 사용할 변수를 던져줘야 한다는 점 입니다.

 

우리는 data_list를 던져줬으니 리스트를 그대로 사용할 수 있습니다.

 

<tbody>
	{% for i in data_list %}
	<tr>
		<td>{{ i[0] }}</td>
		<td>{{ i[1] }}</td>
		<td>{{ i[2] }}</td>
		<td>{{ i[3] }}</td>
	</tr>
	{% endfor %}
</tbody>

 

<tbody> 부분의 코드는 위와 같습니다.

 

테에블에서 행의 갯수는 <tr> 태그로 결정됩니다. 따라서 <tr> 태그를 for문으로 감싸줘야 합니다. 

여기서 i에 들어가 있는 데이터는 쿼리문을 실행한 하나의 행이 됩니다. 

 

따라서 data_list에 있는 행의 개수만큼 <tr>태그가 만들어 지고, 데이터가 출력이 되는것이죠

 

for문으로 감싼 다음 각각의 <td>는 i[0], i[1], i[2], i[3]

순서대로 번호, 제목, 글쓴이, 조회수 가 들어가게 됩니다.

 

그리고 여기서 또 중요한 점은 for문을 시작했을 때 endfor 으로 끝을 지정해주어야 정상적으로 

for문이 돌아가게 됩니다. 돌려봅시당

 

 

DB에 있는 데이터가 정상적으로 출력이 되었습니다! 제대로 작동하는지 행 하나를 추가해서 확인해봅시다.

 

 

DB에서 한줄 추가한 다음 새로고침을 해보면

 

바로 잘 들어간 것을 확인할 수 있습니당

 

 

이번 포스팅은 여기까지 하고 다음 시간에는 글쓰기 화면과 게시글 조회 화면까지 구현해서 기본적인 게시판을
완성시키도록 하겠습니다.