본문 바로가기
코딩/파이썬

파이썬 웹서버에 MySQL 데이터 표로 출력하기

by DIYver 2021. 8. 20.

파이썬의 Flask를 이용하면 손쉽게 웹서버를 만들 수 있다.

당연히 MySQL을 사용할 수 있는데,

오늘은 MySQL에 저장되어 있는 데이터를 웹서버에 출력하는 것을 다뤄보도록 하겠다.

 

필자의 앞선 포스팅들을 보고와야 이해가 쉬울 수 있으므로, 주소를 남겨놓으니 필요하다면 참고하시기 바란다.

https://diyver.tistory.com/166

 

파이썬으로 간단하게 웹서버 구축하는 방법 - Flask 이용

파이썬으로 간편하게 웹서버를 구축할 수 있다. Flask 라는 웹 프레임워크를 이용하면 된다. 장점으로는 가볍고 코드가 단순하며, 다양한 확장 기능들이 많다는 것이다. 그래서 API서버를 만드는

diyver.tistory.com

https://diyver.tistory.com/167

 

파이썬에서 MySQL 사용하기

파이썬에서 Flask 를 사용한다면 sqlalchemy 라는 sql이 기본 사용이겠지만, 많은 사람들이 MySQL 을 이용하므로 Flask 에서 MySQL 을 사용하는 방법을 정리해본다. 파이썬에 PyMySQL 설치 우선 파이썬에서 My

diyver.tistory.com

 

 

 

HTML 코드

파이썬을 통해 MySQL 데이터를 웹페이지에 출력하고 싶다면 html과 파이썬 코드에 집중해야 한다.

우선 html을 통해서 데이터를 어떻게 나타낼 것인지 설계해야한다.

출력하고 싶은 내용은 무엇이며,

디자인은 어떻게 할 것인지를 정해야 한다.

 

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IC부품 재고정리 사이트</title>
    <H1> IC-sensor DB</H1> 
</head>
<body>



<br>
<br>
	<table class="table table-hover table-striped text-center" style=" width: 50%; border: 1px  solid #111114;">
		<thead>
			<tr>
				<center>
				<th>번호</th>
				<th>부품</th>
				<th>개수</th>
				<th>타입</th>
				<th>가격</th>
				</center>
			</tr>
		</thead>
	    
	    <tbody>
			{% for i in data_list %}
			<tr>
				

				<td><center>{{ i[0] }}</center></td>
				<td><center>{{ i[1] }}</center></td>
				<td><center>{{ i[2] }}</center></td>
				<td><center>{{ i[3] }}</center></td>
				<td><center>{{ i[4] }}</center></td>

			</tr>
			{% endfor %}
		</tbody>
		
	</table>



</body>
</html>

필자의 경우 간단하게만 레이아웃을 구성하였고,

핵심만 출력되게 했다.

 

괄호 안에 변수 또는 명령어 같은 것들이 보일텐데

나중에 파이썬 코드에서 변수를 받아서 사용되는 것이기 때문에 잘못기입된 것이 아니니 걱정할 필요없다.

 

 

코드를 조금 해석해보자면

<body> 에서

테이플(표)를 만들고

 

데이터 베이스의 데이터만큼 반복해서 데이터를 출력하라는 코드이다.

 

파이썬에서 튜플 형태로 데이터를 제공하면

데이터베이스의 데이터는 차례로 제공이 되기때문에 위의 코드처럼 사용하면 된다.

 

 

 

Python 코드

이제 파이썬 코드를 살펴보자.

import pymysql
from flask import Flask, render_template, request
import timer

sensor_db = pymysql.connect(
    user='root', 
    passwd='password', 
    host='127.0.0.1', 
    db='sensor_check', 
    charset='utf8'
)

#cursor = sensor_db.cursor(pymysql.cursors.DictCursor)
cursor = sensor_db.cursor()

#sql = "DELETE FROM sensor WHERE _id = 2;"
sql = "SELECT * FROM sensor"


cursor.execute(sql)


data_list = cursor.fetchall()


#Flask 객체 인스턴스 생성
app = Flask(__name__)

@app.route('/') # 접속하는 url
def index():
    
    sql = "SELECT * from sensor"
    cursor.execute(sql)
    data_list = cursor.fetchall()
    
    
    return render_template('index2.html',data_list=data_list)
    
if __name__=="__main__":
    #app.run(debug=True)
    # host 등을 직접 지정하고 싶다면
    app.run(host="0.0.0.0", port="8080", debug=True)

 

위의 코드에서 중요한 부분은

 

def index() : 

에서  return 쪽이 중요하겠다.

 

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

라는 명령을 자세히 보면

 

return ender_template(' html파일 ', html에서 사용할 data_list = 파이썬코드에서의 data_list 변수)

가 된다.

 

아까 작성한 html 코드에서 data_list 라는 변수가 있었는데

그 변수에 파이썬에서 사용하던 변수 정보를 반환한다는 것이다.

쉽게 말하자면 파이썬 코드에서의 변수 정보를 html 코드 변수에 넘긴다는 것이다.

 

 

 

구동 확인

웹서버를 실행시키고 주소를 입력해서 확인해보자.

정보가 옳게 출력되었는지 MySQL에서 데이터를 확인해보자.

 

옳게 출력된 것을 확인할 수 있다.

 

 

그러면 이제 MySQL을 통해 데이터를 추가해보고

웹사이트에도 그대로 출력되는지 확인해보자.

 

'아두이노 나노' 라는 항목을 추가해주었다.

 

다시 웹서버를 실행시켜서 웹페이지에 어떻게 나오는지 확인해보자.

MySQL 데이터와 동일하게 출력되는 것을 확인할 수 있다.

 

데이터 베이스 개수가 몇개든 출력할 수 있는데,

그 양이 너무 많다면 골치아파질 수 있다.

그럴 때에는 출력할 수 있는 개수를 정하고 페이지를 나누어서 출력하면 되는 것이다.

 

 

 

 

 

 

 

 

 

 

도움이 되었거나, 문제가 있는 경우 댓글로 알려주세요~!

감사의 댓글은 작성자에게 큰 힘이 됩니다 ^^

댓글