책소개 페이지를 만들때 글 작성 버튼을 누르면 새로운 팝업이 뜨고 거기에 내용을 입력하고 작성완료 버튼을 누르면 저장이 되면서 팝업창이 닫히고 메인페이지에 글이 자동으로 올라오는걸 원했다.
먼저 이렇게 되려면
1. 작성하기 버튼을 눌렀을때 팝업창이 떠야하고
2. 팝업창에 글을 적으면 그 글이 DB에 저장이 되어야하며
3. 저장과 동시에 창이 닫히고
4. 부모창이 새로고침되어야 한다.
팝업창 띄우기
작성하기 버튼을 누르면 페이지가 이동하는건 구현이 가능했는데 팝업창으로 띄우는건 어려웠다. 일단 버튼에 onclick함수를 두고 클릭을 했을때 함수가 실행되게끔 해야한다.
function popupOpen() {
window.open("/writepage", "a", "width=1000, height=800, left=100, top=50");
}천천히 코드를 살펴보자.
먼저 버튼을 클릭하면 onclick에 지정해 두었던 popupOpen()을 실행하고 새 창을 오픈한다. 그 창은 서버에 만들어둔 writepage라는 창구로 이동한뒤 write.html 이라는 글작성 페이지로 이동하게 만들었다.
@app.route('/writepage')
def writepage():
return render_template('write.html')그리고 'a'태그로 가로 1000 세로 800인 팝업창으로 열게 한 것이다.
DB연결
우리는 db를 mongoDB로 연결하였는데 따로 카테고리를 정하지 않고 그때그때 더 추가할 수 있는 noSQL로 선택하였다.
input값에 내용을 적으면 그 input의 id값을 불러와서 POST로 데이터를 전달하고 서버에서 그 데이터를 받아서 db에 저장하면 된다.
단, 여기서 추가하고 싶었던 기능이 내용이 빈칸이면 alert으로 '내용을 입력하세요'라고 띄우고 그게 아니라면 db에 저장하는 방식으로 코드를 작성하였다.
@app.route("/write", methods=["POST"])
def write():
nicname = request.form['nicname']
comment = request.form['comment']
image = request.form['image']
title = request.form['title']
author = request.form['author']
if nicname == '' or comment == '':
return jsonify({'msgnot': '내용을 입력해주세요'})
else:
doc = {
'image':image,
'comment':comment,
'nicname':nicname,
'title':title,
'author':author,
}
db.write.insert_one(doc)
return jsonify({'msg': '작성완료'})창 닫힘
이 창닫힘 코드는 잘 몰라서 구글링을 했다
window.open('','_self').close();
아하! 현재 웹페이지를(_self) 닫는 것(.close) 매우 직관적이네!
이 방법 말고도 parent.window.close() 라는 함수도 있다.
여기서 window는 현재 보고있는 창을 의미하고 parent는 이름 그대로 부모창을 의미한다.
부모창 새로고침
먼저 단순하게 window.location.relode()를 창 닫는 코드 밑에 넣어보았다. 결과는 실패.. 단순하게 생각했던 문제라 원인도 단순했다 바로 부모창이 아닌 팝업창을 새로고침하는 코드였던 것.
그러면 현재 보고있는 창의 부모창이니까 parent.window.close()를 작성해 보았다. 결과는 당연히 실패ㅎㅎ..
opener.parent.location.reload();결국 구글링을 통해서 해결한 코드는 이것이다.
