파이썬 플라스크와 MySQL을 이용한 웹 앱 개발: 7부

() translation by (you can also view the original English article)

이 연재 기사의 6부에서는 희망사항을 추가할 때 사용자가 이미지를 업로드하는 기능을 구현했습니다. 또한 희망사항 추가 페이지에서 사용자의 희망사항과 관련된 몇 가지 옵션을 추가했습니다. 이번 튜토리얼에서는 특정 희망사항에 '좋아요'를 표시하는 기능을 구현하는 것으로 다음 단계로 넘어가겠습니다.

시작하기

먼저 깃허브(GitHub)에서 튜토리얼의 이전 내용을 복제합니다.

1	git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part6.git

소스코드가 복제되면 프로젝트 디렉터리로 이동한 후 웹 서버를 구동합니다.

1	cd PythonFlaskMySQLApp_Part6
2	python app.py

브라우저에서 http://localhost:5002/로 이동하면 실행 중인 애플리케이션을 볼 수 있을 것입니다.

대시보드 UI 만들기

이번에는 다른 사용자의 모든 희망사항이 표시되는 dashboard라는 새로운 페이지를 만들겠습니다. 모든 사용자는 대시보드에 표시된 희망사항에 '좋아요'를 표시하거나 댓글을 달 수 있습니다. 그럼 템플릿 폴더로 이동한 후 dashboard.html이라는 파일을 만듭니다. dashboard.html을 열고 다음 HTML 코드를 추가합니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Python Flask Bucket List App</title>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">

  

</head>

<body>

    <div class="container">
        <div class="header">
            <nav>
                <ul class="nav nav-pills pull-right">
                    <li role="presentation" class="active"><a href="#">Dashboard</a></li>
                    <li role="presentation"><a href="/userHome">My List</a></li>
                    <li role="presentation"><a href="/showAddWish">Add Item</a></li>
                    <li role="presentation"><a href="/logout">Logout</a></li>
                </ul>
            </nav>
            <h3 class="text-muted">Python Flask App</h3>
        </div>

        <div class="well">
            <div class="row">
                <div class="col-sm-4 col-md-4">
                    <div class="thumbnail">
                        <img alt="100%x200" src="static/Uploads/bucketList.png" data-holder-rendered="true" style="height: 150px; width: 150px; display: block;">
                        <div class="caption">
                            <h3>Bungee Jumping</h3>
                            <p>vehicula ut id elit.</p>
                            <p>
                                <button type="button" class="btn btn-danger btn-sm">
                                    <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
                                </button>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 col-md-4">
                    <div class="thumbnail">
                        <img alt="100%x200" src="static/Uploads/bucketList.png" data-holder-rendered="true" style="height: 150px; width: 150px; display: block;">
                        <div class="caption">
                            <h3>Bungee Jumping</h3>
                            <p>vehicula ut id elit.</p>
                            <p>
                                <button type="button" class="btn btn-danger btn-sm">
                                    <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
                                </button>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 col-md-4">
                    <div class="thumbnail">
                        <img alt="100%x200" src="static/Uploads/bucketList.png" data-holder-rendered="true" style="height: 150px; width: 150px; display: block;">
                        <div class="caption">
                            <h3>Bungee Jumping</h3>
                            <p>vehicula ut id elit.</p>
                            <p>
                                <button type="button" class="btn btn-danger btn-sm">
                                    <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
                                </button>
                            </p>
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="col-sm-4 col-md-4">
                        <div class="thumbnail">
                            <img alt="100%x200" src="static/Uploads/bucketList.png" data-holder-rendered="true" style="height: 150px; width: 150px; display: block;">
                            <div class="caption">
                                <h3>Bungee Jumping</h3>
                                <p>vehicula ut id elit.</p>
                                <p>
                                    <button type="button" class="btn btn-danger btn-sm">
                                        <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
                                    </button>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-md-4">
                        <div class="thumbnail">
                            <img alt="100%x200" src="static/Uploads/bucketList.png" data-holder-rendered="true" style="height: 150px; width: 150px; display: block;">
                            <div class="caption">
                                <h3>Bungee Jumping</h3>
                                <p>vehicula ut id elit.</p>
                                <p>
                                    <button type="button" class="btn btn-danger btn-sm">
                                        <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
                                    </button>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-md-4">
                        <div class="thumbnail">
                            <img alt="100%x200" src="static/Uploads/bucketList.png" data-holder-rendered="true" style="height: 150px; width: 150px; display: block;">
                            <div class="caption">
                                <h3>Bungee Jumping</h3>
                                <p>vehicula ut id elit.</p>
                                <p>
                                    <button type="button" class="btn btn-danger btn-sm">
                                        <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
                                    </button>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <footer class="footer">
                <p>&copy; Company 2015</p>
            </footer>

        </div>
</body>

</html>

app.py를 열고 /showDashboard라는 새로운 라우트를 만듭니다. 이 라우트를 이용해 대시보드 페이지를 렌더링하겠습니다.

1	@app.route('/showDashboard')
2	def showDashboard():
3	return render_template('dashboard.html')

/validateLogin 메서드를 수정해서 사용자가 로그인에 성공햇을 때 사용자 홈 페이지 대신 대시보드 페이지로 리디렉션하도록 만들겠습니다.

1	return redirect('/showDashboard')

위 변경 사항을 저장하고 서버를 다시 시작합니다. 브라우저에서 http://localhost:5002/로 이동한 후 유효한 이메일 주소와 비밀번호를 이용해 로그인합니다. 로그인하고 나면 대시보드 페이지를 볼 수 있을 것입니다.

위의 이미지에서 볼 수 있듯이 다른 사용자가 만든 모든 희망사항을 볼 수 있고 다른 사용자가 '좋아요'를 표시하게 할 수 있습니다.

대시보드 채우기

먼저 대시보드를 채우기 위해 데이터베이스에서 데이터를 가져와야 합니다. 따라서 사용자가 만든 희망사항을 가져오는 저장 프로시저를 만들겠습니다.

USE `BucketList`;
DROP procedure IF EXISTS `sp_GetAllWishes`;

DELIMITER $$
USE `BucketList`$$
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_GetAllWishes`()
BEGIN
    select wish_id,wish_title,wish_description,wish_file_path from tbl_wish where wish_private = 0;
END$$

DELIMITER ;


위의 저장 프로시저는 비공개로 표시되지 않은 모든 희망사항을 tbl_wish에서 가져옵니다.

다음으로 sp_GetAllWishes 저장 프로시저를 호출하는 새로운 파이썬 메서드를 작성하겠습니다. app.py를 열고 getAllWishes 메서드에 다음 코드를 추가합니다.

@app.route('/getAllWishes')
def getAllWishes():
    try:
        if session.get('user'):
            
            conn = mysql.connect()
            cursor = conn.cursor()
            cursor.callproc('sp_GetAllWishes')
            result = cursor.fetchall()
        

      
            wishes_dict = []
            for wish in result:
                wish_dict = {
                        'Id': wish[0],
                        'Title': wish[1],
                        'Description': wish[2],
                        'FilePath': wish[3]}
                wishes_dict.append(wish_dict)		

           

            return json.dumps(wishes_dict)
        else:
            return render_template('error.html', error = 'Unauthorized Access')
    except Exception as e:
        return render_template('error.html',error = str(e))

위 메서드에서는 먼저 유효한 사용자 세션을 확인한 다음 MySQL 연결을 생성합니다. MySQL 연결인 conn을 생성한 후 커서를 통해 필요한 데이터를 가져오는 sp_GetAllWishes 저장 프로시저를 호출했습니다. 데이터를 가져온 후 결과를 파싱하고 적절한 JSON 문자열을 반환했습니다.

대시보드 페이지가 로드될 때 앞에서 작성한 /getAllWishes 메서드를 호출할 것입니다. dashboard.html을 열고 jQuery AJAX를 사용해 document.ready에서 /getAllWishes를 호출합니다.

$(function() {
    $.ajax({
        url: '/getAllWishes',
        type: 'GET',
        success: function(response) {
            console.log(response);
        },
        error: function(error) {
            console.log(error);
        }
    });
})

위의 변경 사항을 저장하고 서버를 다시 시작합니다. 애플리케이션에 로그인한 후 브라우저 콘솔을 확인하면 데이터베이스에서 가져온 데이터를 볼 수 있을 것입니다.

[{
    "Description": "Bungee Jumping",
    "FilePath": "static/Uploads/de5f8a10-54ea-49f4-80ce-35626277047e.jpg",
    "Id": 10,
    "Title": "Bungee Jumping"
}, {
    "Description": "Mount Everest climb",
    "FilePath": "static/Uploads/e3e8f7fa-6cb9-4cc3-9989-a80e5089546f.png",
    "Id": 11,
    "Title": "Mount Everest climb"
}, {
    "Description": "River Rafting",
    "FilePath": "static/Uploads/dff3a64c-5193-42b5-9cdb-9d67a7bbacab.png",
    "Id": 14,
    "Title": "River Rafting"
}, {
    "Description": "Deep Sea Diving",
    "FilePath": "static/Uploads/b0656759-c038-46b4-9529-c208aaa6bfb7.png",
    "Id": 15,
    "Title": "Deep Sea Diving"
}]

이번에는 응답에 담긴 데이터를 사용해 대시보드 페이지를 채우겠습니다. 먼저, dashboard.html에서 .well 클래스가 지정된 div 사이의 HTML 코드를 제거합니다.

<div class="well">

<!-- We'll populate this dynamically -->

</div>

AJAX 호출의 성공 콜백에서는 response를 자바스크립트 객체로 파싱합니다.

1	var data = JSON.parse(response);

여기서는 각 행마다 세 가지 희망사항 각각에 대해 jQuery를 사용해 동적으로 섬네일 HTML 코드를 생성해야 합니다. 그럼 먼저 HTML 코드를 동적으로 작성하는 자바스크립트 함수를 작성해 봅시다. 다음은 jQuery를 사용해 동적으로 생성할 HTML 코드입니다.

<div class="col-sm-4 col-md-4">
    <div class="thumbnail"><img src="static/Uploads/de5f8a10-54ea-49f4-80ce-35626277047e.jpg" data-holder-rendered="true" style="height: 150px; width: 150px; display: block">
        <div class="caption">
            <h3>Testing App</h3>
            <p>hello</p>
            <p>
                <button type="button" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></button>
            </p>
        </div>
    </div>
</div>

자바스크립트 함수의 이름은 CreateThumb로 명명하겠습니다. 이 함수에서는 HTML 요소를 만들고 해당 요소를 부모 요소에 추가해서 위에 표시된 HTML 코드를 만들겠습니다.

function CreateThumb(id,title, desc, filepath) {
  
    var mainDiv = $('<div>').attr('class', 'col-sm-4 col-md-4');
  
    var thumbNail = $('<div>').attr('class', 'thumbnail');
                                    
    var img = $('<img>').attr({
        'src': filepath,
        'data-holder-rendered': true,
        'style': 'height: 150px; width: 150px; display: block'
    });
  
    var caption = $('<div>').attr('class', 'caption');
  
    var title = $('<h3>').text(title);
  
    var desc = $('<p>').text(desc);


    var p = $('<p>');
  
    var btn = $('<button>').attr({
        'id': 'btn_' + id, 
        'type': 'button',
        'class': 'btn btn-danger btn-sm'
    });
  
    var span = $('<span>').attr({
        'class': 'glyphicon glyphicon-thumbs-up',
        'aria-hidden': 'true'
    });

    p.append(btn.append(span));



    caption.append(title);
    caption.append(desc);
    caption.append(p);

    thumbNail.append(img);
    thumbNail.append(caption);
    mainDiv.append(thumbNail);
    return mainDiv;


}

위의 코드는 상당히 직관적이므로 자세한 내용은 다루지 않겠습니다.

다음 단계로는 파싱된 JSON 응답을 순회하고, 그 과정에서 CreateThumb 함수를 통해 HTML을 생성하겠습니다. 여기서는 각 행마다 세 가지 희망사항을 표시할 계획입니다. 그럼 이를 확인하고 세 개의 희망사항마다 새로운 행을 하나씩 만들겠습니다. dashboard.html에서 AJAX 호출의 success 콜백에 다음 코드를 추가합니다.

var itemsPerRow = 0;
var div = $('<div>').attr('class', 'row');
for (var i = 0; i < data.length; i++) {
    

    if (itemsPerRow < 3) {
      
        if (i == data.length - 1) {
            div.append(CreateThumb(data[i].Id,data[i].Title, data[i].Description, data[i].FilePath));
            $('.well').append(div);
        } else {
            div.append(CreateThumb(data[i].Id,data[i].Title, data[i].Description, data[i].FilePath));
            itemsPerRow++;
        }
    } else {
        $('.well').append(div);
        div = $('<div>').attr('class', 'row');
        div.append(CreateThumb(data[i].Id,data[i].Title, data[i].Description, data[i].FilePath));
        if (i == data.length - 1) {
            $('.well').append(div);
        }
        itemsPerRow = 1;
    }
    
}

변경 사항을 저장하고 서버를 다시 시작합니다. 애플리케이션에 로그인한 후 대시보드 페이지로 이동하면 다른 사용자가 추가한 희망사항을 비롯해 각 희망사항에 '좋아요' 표시를 할 수 있는 화면을 볼 수 있을 것입니다.

다음으로, 희망사항 섬네일 아래의 '좋아요' 버튼에 click 이벤트를 추가해 보겠습니다. 앞에서 버튼을 동적으로 생성했으므로 jQuery on 메서드를 사용해 버튼에 클릭 이벤트를 첨부해야 할 것입니다.

1	$(document).on('click', '[id^="btn_"]', function() {
2	// Event function can be added here
3	});

'좋아요' 기능 구현하기

특정 희망사항이 받은 '좋아요'를 추적하는 테이블을 만드는 것으로 시작하겠습니다. tbl_likes라는 테이블을 만듭니다.

CREATE TABLE `BucketList`.`tbl_likes` (
  `wish_id` INT NOT NULL,
  `like_id` INT NOT NULL AUTO_INCREMENT,
  `user_id` INT NULL,
  `wish_like` INT NULL DEFAULT 0 ;
  PRIMARY KEY (`like_id`));

이제 사용자가 특정 희망사항에 '좋아요'를 표시하거나 표시를 취소할 때마다 이 테이블을 업데이트하겠습니다. 위 테이블을 업데이트하는 MySQL 저장 프로시저를 만들어 봅시다.

DELIMITER $$

CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_AddUpdateLikes`(
    p_wish_id int,
	p_user_id int,
	p_like int
)
BEGIN
	if (select exists (select 1 from tbl_likes where wish_id = p_wish_id and user_id = p_user_id)) then

		update tbl_likes set wish_like = p_like where wish_id = p_wish_id and user_id = p_user_id;
		
	else
		
		insert into tbl_likes(
			wish_id,
			user_id,
			wish_like
		)
		values(
			p_wish_id,
			p_user_id,
			p_like
		);

	end if;
END

이 저장 프로시저에서는 어떤 사용자가 이미 희망사항에 '좋아요'를 표시했는지 여부를 간단히 확인했습니다. 해당 사용자가 이미 '좋아요'를 표시했다면 해당 '좋아요' 항목을 업데이트하거나 새로운 '좋아요'를 추가합니다.

이번에는 위의 저장 프로시저를 호출하는 파이썬 메서드를 만들어 봅시다.

@app.route('/addUpdateLike',methods=['POST'])
def addUpdateLike():
    try:
        if session.get('user'):
            _wishId = request.form['wish']
            _like = request.form['like']
            _user = session.get('user')
           

            conn = mysql.connect()
            cursor = conn.cursor()
            cursor.callproc('sp_AddUpdateLikes',(_wishId,_user,_like))
            data = cursor.fetchall()

            if len(data) is 0:
                conn.commit()
                return json.dumps({'status':'OK'})
            else:
                return render_template('error.html',error = 'An error occurred!')

        else:
            return render_template('error.html',error = 'Unauthorized Access')
    except Exception as e:
        return render_template('error.html',error = str(e))
    finally:
        cursor.close()
        conn.close()

이것은 sp_AddUpdateLikes 저장 프로시저를 호출하는 파이썬 메서드입니다. 이 메서드에서는 유효한 사용자 세션을 확인한 다음 희망사항 ID와 like 상태를 업데이트하는 저장 프로시저에 전달합니다. 사용자가 '좋아요' 버튼을 클릭하면 /addUpdateLike 파이썬 메서드를 호출해야 합니다. 따라서 dashboard.html의 like 버튼 클릭 이벤트 함수에 다음 코드를 추가합니다.

$(document).on('click', '[id^="btn_"]', function() {
    $.ajax({
        url: '/addUpdateLike',
        method: 'POST',
        data: {
            wish: $(this).attr('id').split('_')[1],
            like: 1
        },
        success: function(response) {
            console.log(response);
        },
        error: function(error) {
            console.log(error);
        }
    });
});

당분간 위의 함수 호출처럼 값을 하드코딩하겠습니다. 그럼 변경 사항을 저장하고 서버를 다시 시작합니다. 애플리케이션에 로그인하고 아무 희망사항 섬네일 아래에 있는 '좋아요' 버튼을 클릭합니다. 이제 tbl_likes를 확인해 보면 해당 항목을 볼 수 있을 것입니다.

정리

이번 연재 기사에서는 다양한 사용자가 작성한 희망사항이 담긴 애플리케이션의 대시보드 페이지를 채웠습니다. 또한 사용자가 특정 희망사항에 '좋아요'를 표시할 수 있도록 각각에 '좋아요' 버튼을 추가했습니다. 다음 8부에서는 '좋아요' 표시를 바꾸는 방법을 살펴보고 특정 희망사항이 받은 전체 '좋아요' 개수를 표시하는 방법을 살펴보겠습니다.

제안사항 또는 정정해야 할 오류가 있다면 아래 댓글로 알려주세요. 이 튜토리얼의 소스코드는 깃허브에서 확인하실 수 있습니다.