현재 진행 중인 이화 마켓 웹어플리케이션 개발 과정에서 다양한 화면 및 기능들을 구상하고, 구현하고 있다. 우리만의 특색있는 기능을 구현하기 위해 기본적으로 마켓이 갖추어야 할 기능외에도 경매 기능을 추가하였다.
내가 맡은 부분은 리뷰/ 판매 내역 화면이다. 보통의 마켓 사이트들에서는 리뷰가 한 상품에 대한 리뷰일 것이다. 그러나 우리 마켓의 경우 사용자가 중고 물품을 팔거나 경매에 내놓는 경우가 대다수이기 때문에 사용자 한명에 대한 리뷰를 모아볼 수 있는 것으로 설정했다.
다른 사용자들이 특정 사용자 A에 대해 리뷰를 등록하면 그 리뷰들을 모아볼 수 있는 화면이다.
아래 코드는 리뷰 등록 시 데이터 베이스에 등록되는 코드이다. 리뷰 제목, 내용, 그리고 별점 등의 내용들을 입력받고 db에 저장된다.
# 리뷰 데이터베이스에 등록하기
def reg_review(self, data, img_path, buyerId, sellerId):
review_info = {
"sellerId": sellerId,
"buyerId": buyerId,
"reviewTitle": data["reviewTitle"],
"reviewContents": data["reviewContents"],
"starsVariable": data["starsVariable"],
"img_path": img_path
}
review_data = self.db.child("users").child(
sellerId).child("user_reviews").push(review_info)
review_key = review_data['name']
return review_key
여기서 데이터 베이스에 등록된 정보들 중, 특정 아이디의 리뷰들을 불러오는 것이 유저리뷰 화면의 기능이다. 따라서 sellerId의 리뷰를 불러오는 코드는 다음과 같다.
# 특정 아이디의 리뷰들을 데이터베이스에서 불러오기
def get_reviews(self, sellerId):
items = self.db.child("users").child(
sellerId).child("user_reviews").get().val()
return items
불러온 리뷰들을 특정 형식으로 화면에 띄우고자 한다. 1열 5행의 형태로 불러오기 위해서는 per_page와 per_row를 다음과 같이 설정한다. 또한 get_reviews() 함수를 통해 리뷰들을 읽어온다. 페이지네이션 기능을 구현하기 위한 코드도 포함되어 있다.
@application.route("/user_reviews/<id>/")
def view_user_reviews(id):
page = request.args.get("page", 0, type=int)
per_page = 5 # item count to display per page
per_row = 1 # item count to display per row
row_count = int(per_page/per_row)
start_idx = per_page*page
end_idx = per_page*(page+1) # 페이지 인덱스로 start_idx, end_idx 생성
data = DB.get_reviews(id) # read the table
if not data:
data = {}
item_counts = 0
else:
item_counts = len(data)
# 한 페이지에 start_idx, end_idx 만큼 읽어오기
data = dict(list(data.items())[start_idx:end_idx])
tot_count = len(data)
for i in range(row_count): # last row
if (i == row_count-1) and (tot_count % per_row != 0):
locals()['data_{}'.format(i)] = dict(
list(data.items())[i*per_row:])
else:
locals()['data_{}'.format(i)] = dict(
list(data.items())[i*per_row:(i+1)*per_row])
return render_template(
"user_reviews.html",
datas=data.items(),
row1=locals()['data_0'].items(),
row2=locals()['data_1'].items(),
row3=locals()['data_2'].items(),
row4=locals()['data_3'].items(),
row5=locals()['data_4'].items(),
limit=per_page,
page=page, # 현재 페이지 인덱스
page_count=int((item_counts/per_page) + 1), # 페이지 개수
total=item_counts,
id=id
)
유저 리뷰 화면에 대한 html 코드는 다음과 같다. 세부적인 디자인은 css 파일에서 정의하면 되고, row2,3,4,5에 대한 코드는 1과 동일해 생략하였다. 페이지네이션 기능에 대한 코드도 포함되어 있다. 리뷰가 없으면 등록된 리뷰가 없다고 표시되고 리뷰가 있으면 개수를 계산해 표시한다. 이 부분에서 중요한 것은, 이미지 파일의 경로 설정과 리뷰 클릭시 리뷰 세부 화면으로 넘어가는 경로 설정이다.
user_reviews.html
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/static/user_reviews.css">
</head>
<body>
{% extends "index.html" %}
{% block section %}
<div class="wrapper">
<div class="text">{{id}} 리뷰</div>
<hr>
<div class="topnav">
<a href="/user_list/{{id}}/">판매내역</a>
<a href="/user_reviews/{{id}}/">리뷰</a>
</div>
<hr>
{% if total > 0 %}
<p class="count_review">
{{total}}개의 리뷰
</p>
<div class="review">
{% for key, value in row1 %}
<table>
<td onclick="location.href='/details_of_review/{{value.sellerId}}/{{key}}/';" style="cursor:pointer;">
<div class="review-content">
<img src="/static/images/reviews/{{value.img_path}}">
<div>
<p><b>{{value.buyerId}}</b></p>
<p>{{value.reviewTitle}}</p>
<div class="rating">
{% for i in range(0, 5) %}
{% if i <= value.starsVariable|default(0)|int %} <span class="filled-star">★</span>
{% else %}
<span class="empty-star">☆</span>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</td>
</table>
{% endfor %}
</div>
<div class="page-wrap">
<div class="page-nation">
<ul>
<li>
{% for i in range(page_count) %}
<a href="{{url_for('view_user_reviews', id=id, page=i)}}" color="black">{{i+1}}</a>
{% endfor %}
</li>
</ul>
</div>
</div>
{% else %}
<p>
등록된 리뷰가 없습니다.
</p>
{% endif %}
<button onclick="location.href='/reg_review/{{id}}/';" style="width: 100px; height: auto;">리뷰등록</button>
</div>
{% endblock section %}
</body>
유저 리뷰 조회 화면과 구현 방법은 비슷하다.
그러나 유저 판매 내역을 받아오는 화면에서과 유저 리뷰 조회 화면은 데이터 베이스 코드가 차이가 있다. get_lists() 함수의 기능은 다음과 같다.