Travel Maker - 평점시스템

평점 메기기

 

 

<div class="modal-content">
    <span class="close">&times;</span>
    <h2>평점 선택</h2>
    <input type="radio" name="rating" value="1">1
    <input type="radio" name="rating" value="2">2
    <input type="radio" name="rating" value="3">3
    <input type="radio" name="rating" value="4">4
    <input type="radio" name="rating" value="5">5
    <button id="submitRating">평가하기</button>
</div>




<script>
    $(document).ready(function () {
        // "평가하기" 버튼 클릭 이벤트를 추가합니다.
        $("#submitRating").click(function () {
            // 선택한 평점 값을 가져옵니다.
            const ratingValue = $("input[name='rating']:checked").val();

            // AJAX 요청 보내기
            $.ajax({
                type: "POST",
                url: "RatingCon", // RatingCon 서블릿 주소
                data: { rating: ratingValue, user_id: "<%=gosu_info.getUser_id()%>", rate_user_id: "<%=user_id%>" },
                success: function (response) {
                    // 평가 완료 알림창 띄우기
                    alert("평가가 완료되었습니다.");
                    location.reload();
                    // 고수 평점 매기기 버튼 비활성화
                    $("#rateButton").find("input, button").prop("disabled", true);
                },
                error: function (xhr, status, error) {
                    console.error("AJAX 요청 실패:", error);
                }
            });
        });
    });
</script>

 

 

RatingCon

 

package controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONObject;

import model.RatingDAO;
import model.RatingDTO;

@WebServlet("/RatingCon")
public class RatingCon extends HttpServlet {

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		System.out.println("레이팅콘 진입");
		
		response.setContentType("application/json"); // JSON 형식으로 응답을 설정
		
		RatingDAO radao = new RatingDAO();
		
		String user_id = request.getParameter("user_id");
		String rate_user_id = request.getParameter("rate_user_id");
		int rating = Integer.parseInt(request.getParameter("rating"));
		
		System.out.println("user_id : " + user_id);
		System.out.println("rate_user_id : " + rate_user_id);

		int row = radao.rateGosu(new RatingDTO(user_id, rating, rate_user_id));
		
		JSONObject jsonResponse = new JSONObject(); // 응답용 JSON 객체 생성
		
		if (row > 0) {
			System.out.println("평가완료");
			jsonResponse.put("response", "true"); // 중복된 아이디일 경우 status에 "duplicate" 추가
		} else {
			jsonResponse.put("status", "not_duplicate"); // 중복되지 않은 아이디일 경우 status에 "not_duplicate" 추가
		}
		
		response.getWriter().print(jsonResponse);
	}

}

 

 

 

DAO, Mapper

public int rateGosu(RatingDTO dto) {
	SqlSession session = sqlSessionFactory.openSession(true);
	int row = session.insert("rateGosu", dto);
	session.close();
    
    return row;
}


<insert id="rateGosu" parameterType="RatingDTO">
	insert into user_ratings values(rating_num_seq.nextval, #{user_id}, #{rating}, #{rate_user_id})
</insert>

 

 

 

 

평점 조회기능

 

<link rel="stylesheet" href="css/Star_style.css">

<p>고수 별점 : <%=radao.showRate(gosu_info.getUser_id())%></p>
<% Double teststar=radao.showRate(gosu_info.getUser_id()); teststar=Math.floor(teststar * 2) / 2.0; %>
<div class="review-stars" data-stars="<%=teststar%>"></div>

 

css

.review-stars {
  display: block;
  position: relative;
  width: 180px;
  height: 42px;
  left: 50%;
  transform : translate(-50%, 0);
  user-select: none;
  background: var(--stars);
  --stars: url("https://i.ibb.co/VphZ2h8/Star.png")
    right/auto 100% no-repeat;
}
.review-stars:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 0%;
  height: 100%;
  background: var(--stars);
  filter: grayscale(1);
}
.review-stars[data-stars="4.5"]:after {
  width: 10%;
}
.review-stars[data-stars="4.0"]:after {
  width: 20%;
}
.review-stars[data-stars="3.5"]:after {
  width: 30%;
}
.review-stars[data-stars="3.0"]:after {
  width: 40%;
}
.review-stars[data-stars="2.5"]:after {
  width: 50%;
}
.review-stars[data-stars="2.0"]:after {
  width: 60%;
}
.review-stars[data-stars="1.5"]:after {
  width: 70%;
}
.review-stars[data-stars="1.0"]:after {
  width: 80%;
}
.review-stars[data-stars="0.5"]:after {
  width: 90%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 100vh;
  margin: 0;
}