오늘 이름값만 받아와 서브페이지 하나만 사용하는것을 튜터님이 알려주셨습니다.
그걸 가지고 팀원분들과 얘기를 했는데 한별님이 이런식으로 부르면 두번 부르는거라고 jinja를 이용한 방법을 알려주셨습니다.
그래서 일단 튜터님이 알려주신 방법으로 최종완성본을 올렸고, jinja방식으로는 따로 연습해봤습니다.
한별님이 직접 보여주며 알려주셔서 혼자 해보는데 좀 햇갈렸지만 다행히 금방 찾아서 해볼 수 있었습니다.
그리고 점심시간전 튜터님이 오셔서 페이지가 너무 간단하니 기능들을 추가해보라고 하셨습니다.
일단 팀 목표나 소갯말을 추가해주고, 할 수 있으면 팀원정보를 추가하면 버튼도 같이 추가되는것과 팀원정보 수정, 팀원정보 삭제 그리고 댓글 수정 삭제를 해보라고 하셨습니다.
처음에 댓글 수정 삭제를 하려는데 도저히 갈피가 잡히지 않아 고민하고 찾아 보던중 갑자기 웹개발 수업때 만들었던 dbprac.py 파일이 생각나서 보니 응용가능하겠다고 생각해 사용했습니다.
다행히 응용에 성공해 아래와 같이 작성했습니다.
그래서 일단 아래 코드는 app.py에 있는 댓글 삭제 부분입니다.
#데이터 삭제
@app.route("/comment", methods=["DELETE"])
def testc_delete():
id_delete = request.form['id_delete']
db.comment.delete_one({'id':id_delete})
return jsonify({'msg':'1'})그리고 이건 서브페이지에 있는 스크립트 부분입니다.
$(document).ready(function () {
show_comment({{ info.name | tojson }});
commentbtn();
delete_btn();
update_btn();
box_btn();
});
function delete_btn() {
if ($('#delete-form').css("display") == "none") {
$('#delete-form').show();
$('#comment-form').hide();
$('#update-form').hide();
} else {
$('#delete-form').hide();
}
}
function delete_comment() {
let id = $('#id_delete').val()
console.log(id)
let formData = new FormData();
formData.append('id_delete', id);
fetch("/comment", { method: "DELETE", body: formData }).then((response) => response.json()).then((data) => {
alert(data.msg);
location.reload();
}).catch((error) => console.error(error));
}그리고 html body에서 답글달기 버튼 밑에 넣어줬습니다.
<button type="button" class="btn btn-secondary" onclick="delete_btn()">삭제하기</button>
이렇게 댓글 삭제가 가능해졌고, 이번에는 댓글 수정도 부분은 아래와 같습니다.
마찬가지로 먼저 app.py부분입니다.
#데이터 수정
@app.route("/comment", methods=["UPDATE"])
def testc_update():
id_update = request.form['id_update']
comment_update = request.form['comment_update']
db.comment.update_one({'id':id_update},{'$set':{'comment':comment_update}})
return jsonify({'msg':'1'})이건 서브페이지에있는 댓글 수정 부분입니다.
$(document).ready(function () {
show_comment({{ info.name | tojson }});
commentbtn();
delete_btn();
update_btn();
box_btn();
});
function update_btn() {
if ($('#update-form').css("display") == "none") {
$('#update-form').show();
$('#comment-form').hide();
$('#delete-form').hide();
} else {
$('#update-form').hide();
}
}
function update_comment() {
let id = $('#id_update').val()
let comment = $('#comment_update').val()
let formData = new FormData();
formData.append("id_update", id);
formData.append("comment_update", comment);
fetch("/comment", { method: "UPDATE", body: formData }).then((response) => response.json()).then((data) => {
alert(data.msg);
location.reload();
}).catch((error) => console.error(error));
}그리고 html body부분에서 삭제하기 버튼 밑에 추가해줬습다.
<button type="button" class="btn btn-secondary" onclick="update_btn()">수정하기</button>
이렇게 댓글 수정, 삭제하기를 아이디가 같은것을 비교해 id값이 맞은것을 수정 삭제하게 했습니다.
아래 사진과 같이 생겼습니다.
아래 사진은 수정하고 삭제했습니다.
그리고 유저정보를 수정 삭제 버튼 추가하기를 했는데 좀 고민이있었습니다.
수정을 할때 앞서 jinja로 바꿨기 때문에 다시 수정 페이지에 또 값을 줘야하는데 안들어가져서 고민하다가 수정하기 버튼을 누를때 name값을 {{ info.name }} 으로 이름값을 받아 넘겨줬습니다.
먼저 삭제하기 app.py부분 입니다.
#유저데이터 삭제
@app.route("/user", methods=["DELETE"])
def user_delete():
name_delete = request.form['name_delete']
db.users.delete_one({'name':name_delete})
db.comment.delete_many({'name':name_delete})
return jsonify({'msg':'1'})삭제하는 스크립트 부분입니다.
$(document).ready(function () {
show_btn();
userDeleteBtn();
});
function userDelete() {
let name = $('#name_delete').val()
let formData = new FormData();
formData.append('name_delete', name);
fetch("/user", { method: "DELETE", body: formData }).then((response) => response.json()).then((data) => {
alert(data.msg);
location.reload();
}).catch((error) => console.error(error));
}
function userDeleteBtn(){
if ($('#delete-form').css("display") == "none") {
$('#delete-form').show();
$('.img').hide();
$('.name').hide();
} else {
$('#delete-form').hide();
$('.img').show();
$('.name').show();
}
}html body부분입니다.
<!-- body부분에서 버튼들밑에 넣어줌 -->
<button class='button' onclick="userDeleteBtn()">-</button>
<!-- body부분에서 제일 밑에 넣어줌 -->
<div class="comment-form" id="delete-form">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="name_delete" placeholder="url" />
<label for="floatingInput">이름</label>
</div>
<button onclick="userDelete()" type="button" class="btn btn-dark">
삭제하기
</button>
</div>이걸 메인페이지인 파일과 서브페이지인 파일에 넣어줬습니다.
그리고 버튼을 추가하는 부분은 메인페이지 파일에 만들어줬습니다.
스크립트 부분입니다.
$(document).ready(function () {
show_btn(); //버튼출력
userDeleteBtn();
});
//버튼 출력
function show_btn() {
fetch('/user').then((res) => res.json()).then((data) => {
let column = data['result']
$('.box').empty()
column.forEach((a) => {
let name = a['name']
let temp_html = `<button class="button" onclick="window.location.href='/serve?name=${name}'">${name}</button>`
$('.box').append(temp_html);
})
let temp2_html =`<button class="button" onclick="window.location.href='/create'">+</button>
<button class='button' onclick="userDeleteBtn()">-</button>`
$('.box').append(temp2_html);
})
}이렇게 해서 저장된 유저정보들을 반복문을 돌려 버튼들을 붙여줬습니다.
이번에는 유저정보를 수정하는 부분입니다.
수정은 서브페이지에 넣어줬습니다.
app.py부분입니다.
#유저데이터 수정
@app.route("/user", methods=["UPDATE"])
def user_update():
name_update = request.form['name_update']
oneLine_update = request.form['oneLine_update']
photoUrl_update = request.form['photoUrl_update']
blogUrl_update = request.form['blogUrl_update']
email_update = request.form['email_update']
db.u.update_one({'name':name_update},{'$set':{'oneLine':oneLine_update,'email':email_update,'blogUrl':blogUrl_update,'photoUrl':photoUrl_update}})
return jsonify({'msg':'1'})서브페이지에서 버튼 부분입니다.
<button class="btn btn-dark" onclick="window.location.href='/update?name={{info.name}}'" >수정하기</button>그리고 update.html 파일입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>B반 6조</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
crossorigin="anonymous"></script>
</head>
<style>
.box {
background-color: goldenrod;
padding: 50px 30px;
font-size: 50px;
margin: 0px;
text-align: center;
}
.inputline {
width: 500px;
text-align: center;
margin: auto;
margin-top: 30px;
}
.name {
text-align: center;
font-style: oblique;
padding: 50px;
margin: 100px auto 30px auto;
font-size: 30px;
}
.button {
background-color: moccasin;
border-radius: 10%;
color: black;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 6px 4px;
cursor: pointer;
}
</style>
<script>
$(document).ready(function () {
$('#addbtn').click(function () {
update_comment();
});
});
function update_comment() {
let name = $('#userName').val()
let email = $('#userEmail').val()
let photoUrl = $('#photoUrl').val()
let blogUrl = $('#blogUrl').val()
let oneLine = $('#oneLine').val()
let formData = new FormData();
formData.append("name_update", name);
formData.append("email_update", email);
formData.append("photoUrl_update", photoUrl);
formData.append("blogUrl_update", blogUrl);
formData.append("oneLine_update", oneLine);
fetch("/user", { method: "UPDATE", body: formData }).then((response) => response.json()).then((data) => {
alert(data.msg);
location.reload();
}).catch((error) => console.error(error));
}
</script>
<body>
<DIV class="box">
<button class="button" onclick="window.location.href='/'">뒤로가기</button>
</DIV>
<div class="inputline">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="photoUrl" placeholder="-" value="{{info.photoUrl}}">
<label for="floatingInput">프로필 사진 URL</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="userName" placeholder="-" value="{{info.name}}">
<label for="floatingInput">이름</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="userEmail" placeholder="-" value="{{info.email}}">
<label for="floatingInput">이메일 주소</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="blogUrl" placeholder="-" value="{{info.blogUrl}}">
<label for="floatingInput">블로그 URL</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="oneLine" placeholder="-" value="{{info.oneLine}}">
<label for="floatingInput">한줄 소개</label>
</div>
<div class="d-grid gap-2 form-floating mb-3"><button type="button" class="btn btn-warning" id="addbtn">정보
수정</button>
</div>
</div>
</body>
</html>
이렇게 유저정보를 삭제하고 버튼을 추가하고 유저정보를 수정해봤습니다.
유저정보들도 이름으로 값을 주고받았기 때문에 아직 이름값이 변경되거나 이름이 겹치게 되면 오류가 나지는 않으나 구현이 되지 않습니다.
처음에 너무 안돼고 어떻게 안돼는지 말을 못해서 갑갑하고 설명이 안돼니 검색하기도 힘들어서 멘탈이 나갈뻔했지만 부여잡고 왜 해보라고했는지 말을 곱씹어보다 생각나서 응용하게 된것입니다.
하지만 아직 저희 팀원분들껜 댓글수정삭제만 말해놓은 상태입니다. 유저정보쪽은 9시지나고 완성된거라 말을 못해놨습니다.
'TIL > 1주차' 카테고리의 다른 글
| b-6, 삐그덕 팀프로젝트를 마치며 (0) | 2023.05.19 |
|---|---|
| 6조 삐그덕 KPTF (0) | 2023.05.19 |
| 서브페이지 수정, 댓글 데이터 입출력, 정보 입력 (0) | 2023.05.17 |
| git/github 공부 및 서브페이지 작성 (0) | 2023.05.16 |
| B-6조, 삐그덕 팀 TMI작성 밑 S.A작성 aws배포오류 (1) | 2023.05.15 |