고정 헤더 영역
상세 컨텐츠
본문
생활코딩으로 html,css, javascript 공부하고
스파르타, 인프런, 유데미로 공부해서 이거만들었어요
연계하는게 힘드네요~~
qpp.py
from flask import Flask, render_template, request, redirect, url_for
app = Flask(__name__)
nextID = 4
topics = [
{"id": 1, "title": "html", "body": "html is ..."},
{"id": 2, "title": "css", "body": "css is ..."},
{"id": 3, "title": "javascript", "body": "javascript is ..."},
]
@app.route("/", methods=["GET"])
def home():
return render_template("index.html", topics=topics)
@app.route("/create/", methods=["GET", "POST"])
def create():
if request.method == "GET":
return render_template("create.html")
elif request.method == "POST":
global nextID
title = request.form["title"]
body = request.form["body"]
newtopic = {"id": nextID, "title": title, "body": body}
topics.append(newtopic)
url = "/read/" + str(nextID) + "/"
nextID = nextID + 1
return redirect(url)
@app.route("/read/<int:id>/")
def read(id):
title = ""
body = ""
for topic in topics:
if id == topic["id"]:
title = topic["title"]
body = topic["body"]
break
return render_template("read.html", id=id, title=title, body=body)
@app.route("/update/<int:id>/", methods=["GET", "POST"])
def update(id):
if request.method == "GET":
title = ""
body = ""
for topic in topics:
if id == topic["id"]:
title = topic["title"]
body = topic["body"]
break
return render_template("update.html", id=id, title=title, body=body)
elif request.method == "POST":
global nextID
title = request.form["title"]
body = request.form["body"]
for topic in topics:
if id == topic['id']:
topic['title']= title
topic['body'] = body
break
url = "/read/" +str(id)+ "/"
return redirect(url)
@app.route("/delete/<int:id>/", methods=["POST"])
def delete(id):
for topic in topics:
if id == topic['id']:
topics.remove(topic)
break
return redirect('/')
if __name__ == "__main__":
app.run(debug=True, port=5000)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>리스트 페이지</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<style>
table{
width: 400px;
}
</style>
</head>
<body>
<h1><a href="/">WEB</a></h1>
<table>
<thead>
<tr>
<td>번 호</td>
<td>제 목</td>
<td>내 용</td>
</tr>
<hr>
</thead>
<tbody>
{% for topic in topics %}
<tr>
<td>
<a href="/read/{{topic.id}}/">
{{topic.id}}
</a>
</td>
<td>
<a href="/read/{{topic.id}}/">
{{topic.title}}
</a>
</td>
<td>
{{topic.body}}
</td>
</tr>
{% endfor %}
</tbody>
</table>
<hr>
<h2>환영합니다.</h2>
HELLO, WEB
<br>
<a href="/create/"><button>등록하기</button></a>
</body>
</html>
create.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>입력창</title>
</head>
<body>
<h1> 등록페이지 </h1>
<table>
<tbody>
<form action="/create/" method="POST">
<p><input type="text" name="title" placeholder="title"></p>
<p><textarea name="body" placeholder="body"></textarea></p>
<p><input type="submit" value="create"></p>
</form>
</tbody>
</table>
<a href="/"><button>홈</button></a>
</body>
</html>
update.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>수정하기</title>
<style>
p{
background-color: burlywood;
width: 300px;
align-items: center;
}
</style>
</head>
<body>
<h1> 수정하기 </h1>
<table>
<tbody>
<form action="/update/{{id}}/" method="POST">
<p>{{id}}</p>
<p><input type="text" name="title" placeholder="title" value="{{title}}"></p>
<p><textarea name="body" placeholder="body">{{body}}</textarea></p>
<p><input type="submit" value="update"></p>
</form>
</tbody>
</table>
<a href="/"><button>홈</button></a>
</body>
</html>
read.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상세보기</title>
<style>
p{
background-color: aqua;
width: 300px;
align-items: center;
}
</style>
</head>
<body>
<h1> 상세내역 </h1>
<table>
<p>{{id}}</p>
<p>{{title}}</p>
<p>{{body}}</p>
</table>
<a href="/"><button>홈</button></a>
<a href="/update/{{id}}"><button>수정</button></a>
<p></p>
<form action="/delete/{{id}}/" method="POST"><input type="submit" value="삭제"></form>
</body>
</html>
