[팁/디버깅 3] 랭킹시스템 구현

오레오·2023년 12월 14일

오픈SW플랫폼

목록 보기

4/8

db에서 대학별로 내림차순 정렬된 랭킹을 받아올 수 있는 랭킹시스템 html, css, js 코드를 구현하고자 한다.
초록색 체크박스 다음의 html, css, js는 코드의 위치를 나타냈다.

1. 대학 정렬 버튼

✅ HTML file

대학을 선택하면 대학별로 정렬된 랭킹이 보일 수 있도록 onclick = "location.href = '{{url_for('ranking', page=i, college='')}}'" 코드를 포함하고 있는 대학 선택 button을 만들어준다.

<!--btn-->
        <br>
        <div class="padding">
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='all')}}'">전체</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='인문과학대학')}}'">인문과학대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='사회과학대학')}}'">사회과학대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='자연과학대학')}}'">자연과학대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='엘텍공과대학')}}'">엘텍공과대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='음악대학')}}'">음악대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='조형예술대학')}}'">조형예술대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='사범대학')}}'">사범대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='경영대학')}}'">경영대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='신산업융합대학')}}'">신산업융합대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='의과대학')}}'">의과대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='간호대학')}}'">간호대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='약학대학')}}'">약학대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='스크랜튼대학')}}'">스크랜튼대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='호크마교양대학')}}'">호크마교양대학</button> 
        </div>
        <br>

✅ CSS

버튼이 hover되고 active 되었을 때 색상이 변경될 수 있도록 css를 추가해준다.

.btn10 {
    width: 110px;
    border: none;
    /*border-color: var(--default-blue);*/
    border-radius: 10px;
    transition: all 0.3s ease; /* 변경 효과를 주기 위한 transition 속성 추가 */
}

.btn10:hover {
    width: 110px;
    color: white;
    background-color: var(--default-blue);
    border:none;
    border-radius: 10px;
}

.btn10-active {
    width: 110px;
    color: white;
    background-color: var(--default-blue);
    border:none;
    border-radius: 10px;
}

✅ js

추가한 css가 js의 이벤트리스너 함수로 적용되었을 때, 페이지가 리로드 되어도 css가 유지될 수 있도록 상태를 local storage에 저장해주는 함수를 추가한다.

<!--버튼 hover, active 속성 변경 js 추가-->
<!--js 유지하기 위해 브라우저 local storage에 저장하는 코드 포함-->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var buttons = document.querySelectorAll('.btn10');

        // 눌러진 버튼 local storage set
        var activeButtonIndex = localStorage.getItem('activeButtonIndex');
        if (activeButtonIndex !== null) {
            buttons[activeButtonIndex].classList.add('btn10-active');
        }

        // click
        buttons.forEach(function (button, index) {
            button.addEventListener('click', function () {
                buttons.forEach(function (btn) {
                    btn.classList.remove('btn10-active');
                });
                button.classList.add('btn10-active');

                // 눌러진 버튼의 인덱스 local storage에 저장
                localStorage.setItem('activeButtonIndex', index);
            });


            // hover
            button.addEventListener('mouseover', function () {
                button.classList.add('btn10-hover');
            });

            button.addEventListener('mouseout', function () {
                button.classList.remove('btn10-hover');
            });
        });
    });
</script>

2. 바차트 만들기

✅ HTML file

디비와 연동할 수 있는 변수를 테이블에 채워 넣어 한 블록의 랭킹을 만들고 데이터에 유저가 존재하는 동안 반복할 수 있도록 한다.

<div class="ranking-inner">
            <p class="warning-msg">*총 거래 포인트(판매포인트+구매포인트)를 기준으로 한 순위입니다.</p>
            {% if session['id'] %}           
            <p>{{session['id']}}님의 랭킹포인트는 {{ user_rankingpoint }}p입니다.</p>  
            {% else%}
            <p>랭킹포인트 확인을 위해 로그인을 해주세요.</p>
            {% endif %}

            <table style="width:100%; margin: 0 auto;">
                {% for rank, user_data in datas %}
                    <tr>
                        <td> {{ loop.index }} </td>
                        <td><img src="/static/img/profile.jpg"></td>
                        <td> {{ user_data['nickname'] }} </td>
                        <td>
                            <div class="bar-container">
                                <div class="bar" id="bar{{ rank }}"></div>
                            </div>
                        </td>
                        <td>{{ user_data['rankingpoint'] }}</td>
                    </tr>
                {% endfor %}
            </table>
        </div>

✅ CSS

페이지가 로드되면 바가 차오를 수 있도록 transition: width 1s; 코드를 포함하는 style.css를 추가해준다.

.bar-container {
    width: 300px;
    height: 40px;
    background-color: #f0f0f0;
    position: relative;
    margin-bottom: 10px;
}

.bar {
    height: 100%;
    background-color: var(--default-blue);
    width: 0;
    position: absolute;
    transition: width 1s;
}

✅ js

마지막으로 버튼으로 선택된 대학에 따라 bar를 채워주는 script를 추가한다.

<script>
    $(document).ready(function () {
    // alert("{{college}}");
    $('#college option:contains("{{college}}")').prop("selected", true);
    });
    </script>

<!-- 선택된 college에 따라 상위 10위 랭킹 동적으로 구현하기 -->
{% for rank, user_data in datas %}
<script>
    document.addEventListener("DOMContentLoaded", function() {
        setBarWidth('bar{{ rank }}', {{ user_data['rankingpoint'] }});
    });

    function setBarWidth(barId, value) {
        const bar = document.getElementById(barId);
        {% if max is defined %}
            const width = (value / {{ max }}) * 100;
            bar.style.width = width + '%';
        {% endif %}
    }
</script>
{% endfor %}