9:00 ~ 회의 (상세 계획 세우기)
전 날 밤에 늦게까지 남아서 작업을 해 주신 우리 팀원분... 진짜 리스펙
진행사항을 확인하고 오늘, 남은 날짜 계획을 상세하게 세웠다.
계획!
화요일 - API, 자바스크립트 완성하기 , CSS 넣기
수요일 - 취합하고 API 보완하기, CSS 완성하기
목요일 - 수정,보완하는 날, 최종 완성 + 발표 준비
개인 오전 코딩!
만들어주신 html 기본 틀이랑 방명록 입력 API를 넘겨받았다. 뭐야 저번 미니 팀과제가 처음이라면서요 왜 이렇게 잘 해?
기만자들 이 아니라 우리 팀원 분들 ^-^
상세페이지(멤버별 개인 소개 페이지) 넘어가는 함수
함수 이름은 go_detail_page(name) 겁나 직관적임. 각각 멤버들 사진에 링크를 걸게 했으므로 매개변수를 받아오게 했다.
홈 프로필 사진 들어갈 자리에 만들어주신 링크에 onclick = function()속성을 넣어주고, 각각 이름을 인자로 넣어주었다.
//index.html
function go_detail_page(name) {
//창 크기 지정
let width = 1200;
let height = 900;
//pc화면기준 가운데 정렬
let left = (window.screen.width / 2) - (width / 2);
let top = (window.screen.height / 4);
//윈도우 속성
let windowStatus = 'width=' + width + ', height=' + height + ', left=' + left + ', top=' + top + ', scrollbars=yes, status=yes, resizable=yes, titlebar=yes';
//연결하고싶은url / 무슨 아이디값을 넣을 것인가?
const url = `${name}`;
//등록된 url 및 window 속성 기준으로 팝업창을 연다.
window.open(url, "hello popup", windowStatus);
}처음엔 새 탭으로 띄울까 하다가, 팝업으로 해 보는 것도 괜찮을 것 같아서 했다.
다음은 파이썬 차례! 어떻게 할까 좀 고민하다가 나온 결과
# app.py
# ===================== 프로필사진 클릭 시 각 멤버 상세페이지로 이동 =====================
@app.route('/<name>')
def go_detail(name): # ex) name = jk
html = ".html"
target_html = name + html # ==> ex) jk.html
return render_template(target_html)자바스크립트에서 인자를 이니셜로 넣었기 때문에, 루트도 이니셜로 나오게 된다.
따라서 각각 페이지 이름을 이니셜.html로 만들고 app.route에 매개변수를 받도록 하면 그 인자가 자바스크립트에서 가져온 이니셜이 되는 거다!
그리고 .html문자열을 저장해서 문자열끼리 합치면
내가 원하는 이니셜.html을 render_template으로 불러올 수 있다.
방명록 쓰기, 불러오기
만들어주신 API를 가져다가 홈 화면에 방명록을 만들었다.
// index.js
// 방명록 작성
function save_comment() {
let nickname = $('#nickname').val();
let comment = $('#comment').val();
let pw = $('#pwds').val();
let formData = new FormData();
formData.append("nickname_give", nickname);
formData.append("comment_give", comment);
formData.append("pw_give", pw);
fetch('/writegb', { method: "POST", body: formData, })
.then((res) => res.json())
.then((data) => {
alert(data["msg"]);
window.location.reload()
});
}// index.js
// =================== 방명록 조회 ===================
function show_all_comment() {
fetch('/guestbook', {})
.then((res) => res.json())
.then((data) => {
let rows = data['result']
$('#comment-list').empty()
rows.forEach((a) => {
let nickname = a['nickname']
let comment = a['comment']
let temp_html = `
<div class="card" id = "home_card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p style="font-weight: bold; font-size: 20px;">${comment}</p>
<footer class="blockquote-footer">${nickname}</footer>
</blockquote>
</div>
</div>
`
$('#comment-all-list').append(temp_html)
})
})
}# app.py
# ===================== 방명록 작성 =====================
@app.route("/writegb", methods=["POST"])
def guestbook_post():
nickname_receive = request.form['nickname_give']
comment_receive = request.form['comment_give']
doc = {
'nickname':nickname_receive,
'comment' :comment_receive,
}
db.IE9.insert_one(doc)
return jsonify({'msg': '저장완료!'})# ===================== 방명록 조회 =====================
@app.route("/guestbook")
def guestbook_all():
all_comments = list(db.IE9.find({},{'_id':False}))
return jsonify({'result': all_comments})여기까지 했는데 벌써 점심 시간... 시간 짱 빠르다.
오후 코딩 시간
개인 페이지 방명록 만들기
점심 먹고 커피 사 오니까 드는 생각
와이어프레임 짤 때 생각했던 것 처럼 멤버마다 방명록을 만들까?
그래서 개인 페이지에서 작성하기 버튼을 누르면 실행하는 자바스크립트 함수에 매개변수를 넣기로 했다.
DB 저장 함수를 save_comment(name)이라 해 주고, 각 페이지 html 속 작성하기 버튼에 onclick="save_comment('멤버이름')" 속성 주기!
// index.js
// =================== 개인 방명록 작성 ===================
function save_comment(name) {
let nickname = $('#nickname').val()
let comment = $('#comment').val()
let formData = new FormData();
formData.append("nickname_give", nickname);
formData.append("comment_give", comment);
// 받아온 인자
formData.append("member_name_give", name);
fetch('/writegb', { method: "POST", body: formData,})
.then((res) => res.json())
.then((data) => {
alert(data["msg"]);
window.location.reload()
});
}
}그리고 DB에 이름도 같이 저장해준다.
# ===================== 방명록 작성 =====================
@app.route("/writegb", methods=["POST"])
def guestbook_post():
nickname_receive = request.form['nickname_give']
comment_receive = request.form['comment_give']
member_name_receive = request.form['member_name_give']
doc = {
'idx' : idx,
'nickname':nickname_receive,
'comment' :comment_receive,
'member_name' :member_name_receive,
}
db.IE9.insert_one(doc)
return jsonify({'msg': '저장완료!'})이러면 멤버별로 불러오기도 가능!
# ===================== 멤버 방명록 조회 =====================
@app.route("/guestbookmem", methods=["POST"])
def guestbook_get():
member_name = request.form['member_name_give']
all_comments = list(db.IE9.find({'member_name':member_name},{'_id':False})) # 해당하는 이름
return jsonify({'result': all_comments})끝내고 보니 이러면 전체 방명록 작성은 필요없지 않을까 싶어 없앴다.
전체 방명록을 불러오는 부분도 어떤 팀원에게 썼는지 알 수 있게 수정했다.
// =================== 전체 방명록 조회 ===================
function show_all_comment() {
fetch('/guestbook', {})
.then((res) => res.json())
.then((data) => {
let rows = data['result']
$('#comment-list').empty()
rows.forEach((a) => {
let nickname = a['nickname']
let comment = a['comment']
let name = a['member_name']
let temp_html = `
<div class="card" id = "home_card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>To. ${name}</p>
<p style="font-weight: bold; font-size: 20px;">${comment}</p>
<footer class="blockquote-footer">${nickname}</footer>
</blockquote>
</div>
</div>
`
$('#comment-all-list').append(temp_html)
})
})
}그러면 이렇게 뜬다!
그리고 화면 중간 팀 소개 부분을 만들어야 하는데, 열고닫는 폼이 생각보다 예쁘게 안 나온다.
이부분!
닫아놓으려는데 열리고, 아이콘 추가하니까 또 이상해지고...
팀원분이 만들어주셨는데 아무래도 이것저것 요구사항이 많아지니까 점점 이상해져!
다 같이 꾸며보기
우선 제쳐두고 CSS를 조금 넣어보기로 했다. 아무리 미완성이어도 못생긴건 못 참아
상세페이지 레이아웃이랑 타이틀, 팀 로고 등을 상의하면서 꾸몄다.
CSS 진짜 시간 많이 쓴다...
하다보니 머리도 아프고 다들 좀 지쳐서 쉬는시간을 좀 갖고 다시 했다.
둘째날이 되니 분위기도 많이 풀리고 금새 좀 친해져서 분위기가 너무 좋았다. 헤헹
그리고 팀 소개 부분은 자바스크립트대신 부트스트랩으로 대체!
예뻐져서 기분이 조아따
마무리
꾸미는데 하루종일 걸린 것 같다... 그래도 좀 더 예뻐졌다
그리고 하다보니 삭제 기능을 만들고 싶어졌다. 그러려면 방명록 작성할 때 비밀번호를 입력받도록 해야할 것 같다.
내일 할 일
1. 프로필 사진 크기 키우기
2. 타이틀 변경
3. 푸터 꾸미기
4. 상세페이지 꾸미기
5. 비밀번호 입력받고 삭제 기능 구현하기
GitHub 댓글