GPT 활용 웹개발 - 카드 삭제 기능 추가

카드 삭제 기능 추가 - Music.HTML & app.py

HTML 파일 수정 - 웹 구조 파일

• card-body에 삭제 버튼 코드 추가

<!-- 기존 코드 -->
<div class="row row-cols-1 row-cols-md-4 g-4 mx-auto w-75 pb-5">
            {% for song in data %}
            <div class="col">
                <div class="card h-100">
                    <img src="{{ song.image_url }}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">{{ song.title }}</h5>
                        <p class="card-text">{{ song.artist }}</p>
                        <p class="card-text">추천 by {{ song.username }}</p>
                    </div>
                </div>
            </div>        
            {% endfor %}            
        </div>
        
        
<!-- 삭제 버튼 추가 -->
<div class="row row-cols-1 row-cols-md-4 g-4 mx-auto w-75 pb-5">
            {% for song in data %}
            <div class="col">
                <div class="card h-100">
                    <img src="{{ song.image_url }}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">{{ song.title }}</h5>
                        <p class="card-text">{{ song.artist }}</p>
                        <p class="card-text">추천 by {{ song.username }}</p>
                        <button class="btn btn-danger delete-btn" data-song-id="{{ song.id }}">삭제</button>
                    </div>
                </div>
            </div>        
            {% endfor %}
        </div>

• Card에 footer를 만들고 footer 위치에 삭제 버튼을 추가하는 것도 가능
• <style> 태그에서 삭제 버튼 스타일 수정 가능

<!-- 삭제 버튼 스타일 관련 코드 -->
.delete-btn {
        background-color: #dc3545; /* 삭제 버튼의 배경색 */
        color: white; /* 삭제 버튼의 텍스트 색상 */
        border: none; /* 테두리 없음 */
        border-radius: 5px; /* 라운드된 모서리 */
        padding: 8px 16px; /* 내부 여백 */
        cursor: pointer; /* 커서를 포인터로 변경하여 클릭 가능함을 나타냄 */
        transition: background-color 0.3s; /* 배경색 변경 시 부드러운 전환 효과 */
        width: 100%; /* 버튼 넓이 설정 100% : 카드의 크기에 맞춘 최대 넓이 */       
    }

    .delete-btn:hover {
        background-color: #c82333; /* 마우스 호버 시 배경색 변경 */
    }

• <script> 태그에 DB에 삭제 요청을 보내는 JavaScript 코드 추가

<!-- 기존 script 태그 아래에 추가 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function(){
        $('.delete-btn').on('click', function(){
            var songId = $(this).data('song-id');
            // 서버로 DELETE 요청을 보내서 해당 노래를 삭제하는 함수 호출
            deleteSong(songId);
        });
        
        function deleteSong(songId) {
            $.ajax({
                url: '/delete-song/' + songId,
                type: 'DELETE',
                success: function(result) {
                    // 성공적으로 삭제되면 화면에서 카드를 제거합니다.
                    $('[data-song-id="' + songId + '"]').closest('.col').remove();
                },
                error: function(xhr, status, error) {
                    alert("삭제 실패: " + error); // 오류 메시지를 표시합니다.
                }
            });
        }
    });
</script>

 

 

app.py 파일 수정 - 웹 서버 구동 파일

• 삭제 요청을 받은 db 데이터 삭제 코드 추가

# app.py 파일의 @app.route 코드 맨 아래 쪽에 추가
# if __name__ == "__main__": 코드 위에 추가
# flask 의 jsonify import

@app.route("/delete-song/<int:song_id>", methods=["DELETE"])
def delete_song(song_id):
    song_to_delete = Song.query.get(song_id)
    if song_to_delete:
        db.session.delete(song_to_delete)
        db.session.commit()
        return jsonify({"message": "Song deleted successfully"})
    else:
        return jsonify({"message": "Song not found"}), 404

 

 

삭제 기능 구현 테스트

1. 프로젝트를 만든 가상환경에서 python app.py로 웹 서버를 열어서 삭제 기능이 제대로 작동하는지 확인
   • 웹 화면에서 삭제 시 DB에서도 해당 내용이 삭제되었는지 확인
2. pythonanywhere를 통해 배포 후에도 정상적으로 삭제 기능이 작동하는지 확인

 

삭제 기능 구현 완료 웹 화면

 

 

기능 구현 간 아쉬운 점

• 삭제 버튼을 카드의 크기에 맞춰서 넓이 조정을 못한 것
  • 카드에 footer를 추가하고 style 태그에서 버튼 넓이를 카드에 맞춰 수정했을 때 카드 1개의 세로 길이가 비정상적으로 길게 나오고 나머지 카드의 정렬이 깨지는 문제 발생
  • 추후 삭제 버튼의 넓이 및 위치 통일하는 작업이 필요함

 

카드 별 삭제 기능이 추가된 Project.zip 파일

Project.zip

0.01MB