안녕하세요 문쑹입니다 :)
오늘은 Flask를 활용하여 예쁜 웹페이지를 만들어 보겠습니다.
Flask, HTML, CSS, Javascript를 이용한 웹페이지 만들기
기본 폴더 구성은 아래와 같습니다.
Webapps
- ch06
- home
- static
- templates
아래와 같이 코드를 작성해주세요.
~/webapps/ch06/home/index.py
from flask import Flask, request
from flask import render_template
import RPi.GPIO as GPIO
app = Flask(__name__)
GPIO.setmode(GPIO.BCM)
GPIO.setup(21, GPIO.OUT, initial = GPIO.LOW)
@app.route("/")
def home():
return render_template("index.html")
@app.route("/led/on")
def led_on():
try:
GPIO.output(21, GPIO.HIGH)
return "OK"
except expression as indentifier:
return "FAIL"
@app.route("/led/off")
def led_off():
try:
GPIO.output(21, GPIO.LOW)
return "OK"
except expression as indentifier:
return "FAIL"
if __name__ == "__main__":
app.run(host = "0.0.0.0")
~/webapps/ch06/home/templates/index.html
<!DOCTYPE htmml>
<html>
<head>
<meta charset="utf-8">
<title>HOME NETWORK</title>
<link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
</head>
<body>
<div class="container">
<div class="heder">
<h2>HOM IoT</h2>
</div>
<div class="main">
<div>
<button onclick="led_on()">LED ON</button>
</div>
<div>
<button onclick="led_off()">LED OFF</button>
</div>
</div>
<div id="result">
</div>
</div>
<script>
function led_on() {
fetch("/led/on")
.then(response => response.text())
.then(data => {
console.log(data);
let result = document.querySelector("#result");
if (data == "OK") {
result.innerHTML = "<h1>LED is running</h1>";
}
else {
result.innerHTML = "<h1>Error</h1>;"
}
});
}
function led_off() {
fetch("/led/off")
.then(response => response.text())
.then(data => {
console.log(data);
let result = document.querySelector("#result");
if (data == "OK") {
result.innerHTML = "<h1>LED is stopping</h1>";
}
else {
result.innerHTML = "<h1>Error</h1>;"
}
});
}
</script>
</body>
</html>
~/webapps/ch06/home/static/style.css
body
{
background-color : antiquewhite;
}
.container
{
width : 700px;
margin : 0 auto;
text-align : center;
}
.main
{
display:flex;
}
.main div
{
flex:1;
}
.main div button
{
background-color : rgb(192,114,114);
width:150px;
height:80px;
border-radius:10px;
}
파이썬을 실행 시켜주세요 :)
python index.py
<자신의 ip주소>:5000
LED ON 버튼을 눌렀을 때
LED OFF 버튼을 눌렀을 때
이만 웹페이지에 관한 포스팅을 마치겠습니다! 감사합니다.
Hasta Luego~!
'Python' 카테고리의 다른 글
| Python #8 (공공데이터 활용하기) (1) | 2020.07.29 |
|---|---|
| Python #7 (IP, Port, Process) (0) | 2020.07.29 |
| Python #5 (Flask 세팅 & 웹 서버 구축) (0) | 2020.07.27 |
| Python #4 (GPIO 제어 및 테스트) (0) | 2020.07.24 |
| Python #3 (기본 문법 - 제어문) (0) | 2020.07.24 |
