Tạo một Ứng dụng Web từ đầu Sử dụng Python Flask và MySQL: Phần 4

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

Trong phần trước của loạt bài hướng dẫn này, chúng ta đã cài đặt các chức năng cần thiết cho người dùng đã đăng nhập thêm một mong ước. Chúng ta cũng đã tìm hiểu cách hiển thị mong ước được nhập bởi người dùng trên trang chủ của họ.

Trong phần này, chúng ta sẽ cài đặt chức năng chỉnh sửa và xóa những mong ước được nhập bởi người dùng.

Bắt đầu

Hãy bắt đầu bằng cách nhân bản mã nguồn từ phần trước của hướng dẫn trên GitHub.

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

Một khi mã nguồn đã được nhân bản, hãy chuyển đến thư mục dự án và khởi động máy chủ web.

1	cd PythonFlaskMySQLApp_Part3
2	python app.py

Trỏ trình duyệt của bạn đến http://localhost:5002/ và bạn sẽ thấy ứng dụng của bạn đang chạy.

Chỉnh sửa Danh sách Mong ước

Bước 1: Hiển thị Biểu tượng Chỉnh sửa

Chúng ta đã gắn dữ liệu nhận được vào HTML bằng jQuery. Chúng ta sẽ sửa đổi code đó và sử dụng các temlate jQuery để làm cho việc gắn dữ liệu trở nên dễ dàng hơn. Chúng ta cũng sẽ thêm một biểu tượng chỉnh sửa vào HTML để cho phép người dùng cập nhật mong ước. Mở userHome.html và bao gồm một tham chiếu đến các template jQuery.

1	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>

Xoá div list-group hiện tại và thay thế bằng code HTML sau:

<div class="row">
    <div class="col-md-12">

        <div class="panel-body">

            <ul id="ulist" class="list-group">



            </ul>
        </div>

    </div>
</div>

Bên trong UL với list-group, chúng ta sẽ gắn dữ liệu của chúng ta. Định nghĩa listTemplate như sau trong phần body của HTML:

<script id="listTemplate" type="text/x-jQuery-tmpl">
    <li class="list-group-item">
        <div class="checkbox">
            <label>
                ${Title}
            </label>
        </div>
        <div class="pull-right action-buttons">
            <a data-toggle="modal" data-target="#editModal"><span class="glyphicon glyphicon-pencil"></span></a>
           
        </div>
    </li>
</script>

Chỉnh sửa callback success của AJAX jQuery để gắn dữ liệu vào listTemplate.

<script>
    $(function() {
        $.ajax({
            url: '/getWish',
            type: 'GET',
            success: function(res) {

                // Parse the JSON response
                var wishObj = JSON.parse(res);
                
                // Append to the template
                $('#listTemplate').tmpl(wishObj).appendTo('#ulist');


            },
            error: function(error) {
                console.log(error);
            }
        });
    });
</script>

Ngoài ra, thêm một số phong cách trong userHome.html:

<style>
    .trash {
        color: rgb(209, 91, 71);
    }
    .panel-body .checkbox {
        display: inline-block;
        margin: 0px;
    }
    .list-group {
        margin-bottom: 0px;
    }
</style>

Lưu tất cả các thay đổi và khởi động lại máy chủ. Trỏ trình duyệt của bạn đến http://localhost:5002 và đăng nhập bằng một địa chỉ email và mật khẩu hợp lệ. Một khi đã đăng nhập, bạn sẽ có thể nhìn thấy những mong ước được tạo bởi người dùng.

Bước 2: Hiển thị Hộp thoại Chỉnh sửa

Chúng ta sẽ sử dụng Bootstrap để hiển thị hộp thoại nhằm cung cấp giao diện để chỉnh sửa các mong ước. Hãy bao gồm một tham chiếu đến Bootstrap trong userHome.html.

1	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Một khi tham chiếu đã được thêm vào, hãy thêm HTML sau vào userHome.html.

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="editModalLabel">Update Wish</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">Title:</label>
                        <input type="text" class="form-control" id="editTitle">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="control-label">Description:</label>
                        <textarea class="form-control" id="editDescription"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="btnUpdate" class="btn btn-primary">Update</button>
            </div>
        </div>
    </div>
</div>

HTML ở trên sẽ đóng vai trò như là hộp thoại. Khi người dùng nhấp vào biểu tượng chỉnh sửa, hộp thoại sẽ bật lên. Chúng ta đã thêm thuộc tính data-target và data-toggle để kích hoạt hộp thoại.

1	<a data-toggle="modal" data-target="#editModal"><span class="glyphicon glyphicon-pencil"></span></a>

Lưu các thay đổi ở trên và khởi động lại ứng dụng. Sau khi đã đăng nhập vào ứng dụng, hãy nhấp vào biểu tượng chỉnh sửa và bạn sẽ có thể thấy hộp thoại.

Bước 3: Điền vào Hộp thoại Chỉnh sửa

Khi người dùng nhấp vào biểu tượng chỉnh sửa, chúng ta sẽ hiển thị hộp thoại cập nhật với title và description. Để bắt đầu, trước tiên chúng ta cần ID của mong ước để lấy các chi tiết của mong ước cụ thể khi người dùng nhấp vào biểu tượng chỉnh sửa. Vì vậy, hãy chỉnh sửa code template jQuery để bao gồm một thuộc tính data-id bổ sung trên phần tử liên kết chỉnh sửa.

1	<a data-id=${Id} onclick="Edit(this)" ><span class="glyphicon glyphicon-pencil"></span></a>

Chúng ta cũng ràng buộc một sự kiện onclick để gọi phương thức Edit. Bên trong hàm Edit, chúng ta sẽ làm cho AJAX gọi đến một phương thức python có tên là getWishById và sẽ trả về các chi tiết của mong ước.

function Edit(elm) {
    $.ajax({
        url: '/getWishById',
        data: {
            id: $(elm).attr('data-id')
        },
        type: 'POST',
        success: function(res) {
            console.log(res);
        },
        error: function(error) {
            console.log(error);
        }
    });
}

Tiếp theo, mở app.py và tạo ra một phương thức gọi là getWishById. Sử dụng phương thức này, chúng ta sẽ lấy được các chi tiết của mong ước cụ thể từ cơ sở dữ liệu.

@app.route('/getWishById',methods=['POST'])
def getWishById():
    try:
        if session.get('user'):

            _id = request.form['id']
            _user = session.get('user')

            conn = mysql.connect()
            cursor = conn.cursor()
            cursor.callproc('sp_GetWishById',(_id,_user))
            result = cursor.fetchall()

            wish = []
            wish.append({'Id':result[0][0],'Title':result[0][1],'Description':result[0][2]})

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

Như bạn có thể thấy trong phương thức ở trên, chúng ta đã truyền ID của mong ước vào phương thức này và nó sẽ lấy dữ liệu từ cơ sở dữ liệu bằng ID của người dùng và ID của mong ước. Một khi đã lấy được dữ liệu, nó sẽ chuyển đổi dữ liệu đó thành một danh sách và sau đó trả về nó như là dữ liệu JSON.

Tiếp theo, hãy tạo ra thủ tục lưu trữ trong MySQL cần thiết để lấy dữ liệu từ cơ sở dữ liệu.

DELIMITER $$

CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_GetWishById`(
IN p_wish_id bigint,
In p_user_id bigint
)
BEGIN
select * from tbl_wish where wish_id = p_wish_id and wish_user_id = p_user_id;
END

Code được hiển thị ở trên là thủ tục lưu trữ để lấy các chi tiết của mong ước cụ thể sử dụng ID của mong ước và ID của người dùng.

Lưu các thay đổi và khởi động lại máy chủ. Sau khi đã đăng nhập vào ứng dụng, nhấp vào biểu tượng chỉnh sửa và bạn sẽ thấy các thông tin được log trong giao diện console của trình duyệt.

Để gắn dữ liệu đã nhận vào hộp thoại HTML, trước tiên hãy xóa thuộc tính data-target và thuộc tính data-toggle khỏi thẻ liên kết chỉnh sửa. Sau đó, thêm code sau vào hàm Edit trong JavaScript để điền vào hộp thoại và bật nó lên.

// Parse the received JSON string
var data = JSON.parse(res);

//Populate the Pop up
$('#editTitle').val(data[0]['Title']);
$('#editDescription').val(data[0]['Description']);

// Trigger the Pop Up
$('#editModal').modal();

Lưu các thay đổi và khởi động lại máy chủ. Một khi đã đăng nhập vào ứng dụng, hãy thử nhấp vào biểu tượng chỉnh sửa và bạn sẽ thấy cửa sổ bật lên với title và description.

Bước 4: Cập nhật các Chi tiết của Mong ước

Để cài đặt tính năng cập nhật, hãy tạo một thủ tục lưu trữ trong MySQL.

DELIMITER $$
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_updateWish`(
IN p_title varchar(45),
IN p_description varchar(1000),
IN p_wish_id bigint,
In p_user_id bigint
)
BEGIN
update tbl_wish set wish_title = p_title,wish_description = p_description
    where wish_id = p_wish_id and wish_user_id = p_user_id;
END$$
DELIMITER ;

Như đã thấy trong thủ tục được lưu trữ ở trên, chúng ta sẽ truyền vào title và description đã chỉnh sửa cùng với ID của mong ước và người dùng để cập nhật các chi tiết trong cơ sở dữ liệu.

Tiếp theo, hãy tạo ra một phương thức mới được gọi là updateWish để cập nhật các chi tiết. Dưới đây là phương thức updateWish:

@app.route('/updateWish', methods=['POST'])
def updateWish():
    try:
        if session.get('user'):
            _user = session.get('user')
            _title = request.form['title']
            _description = request.form['description']
            _wish_id = request.form['id']



            conn = mysql.connect()
            cursor = conn.cursor()
            cursor.callproc('sp_updateWish',(_title,_description,_wish_id,_user))
            data = cursor.fetchall()

            if len(data) is 0:
                conn.commit()
                return json.dumps({'status':'OK'})
            else:
                return json.dumps({'status':'ERROR'})
    except Exception as e:
        return json.dumps({'status':'Unauthorized access'})
    finally:
        cursor.close()
        conn.close()

Như đã thấy trong đoạn code ở trên, sau khi xác nhận một session hợp lệ, chúng ta đã thu thập dữ liệu được post và gọi thủ tục lưu trữ sp_updateWish để cập nhật các chi tiết.

Để gọi phương thức updateWish, chúng ta cần phải đính kèm một sự kiện click trên button Update. Vì vậy, hãy đặt tên cho button Update là btnUpdate và gắn vào một sự kiện onclick như sau:

$('#btnUpdate').click(function() {
    $.ajax({
        url: '/updateWish',
        data: {
            title: $('#editTitle').val(),
            description: $('#editDescription').val(),
            id: localStorage.getItem('editId')
        },
        type: 'POST',
        success: function(res) {
            $('#editModal').modal('hide');
            // Re populate the grid
        },
        error: function(error) {
            console.log(error);
        }
    })
});

Như đã thấy trong đoạn code ở trên, chúng ta lấy editId từ localStorage, vì vậy, bên trong hàm Edit lưu ID vào localStorage.

1	localStorage.setItem('editId',$(elm).attr('data-id'));

Gom việc gọi getWish trong AJAX thành một hàm, từ đó chúng ta có thể gọi nó một lần nữa khi dữ liệu đã được cập nhật.

function GetWishes() {
    $.ajax({
        url: '/getWish',
        type: 'GET',
        success: function(res) {
            var wishObj = JSON.parse(res);
            $('#ulist').empty();
            $('#listTemplate').tmpl(wishObj).appendTo('#ulist');
        },
        error: function(error) {
            console.log(error);
        }
    });
}

Gọi hàm getWishes trong callback success của update trong AJAX.

$('#btnUpdate').click(function() {
    $.ajax({
        url: '/updateWish',
        data: {
            title: $('#editTitle').val(),
            description: $('#editDescription').val(),
            id: localStorage.getItem('editId')
        },
        type: 'POST',
        success: function(res) {
            $('#editModal').modal('hide');
            
            // Re populate the grid
            GetWishes();
        },
        error: function(error) {
            console.log(error);
        }
    })
});

Lưu tất cả các thay đổi và khởi động lại máy chủ. Một khi đã đăng nhập vào ứng dụng, hãy thử chỉnh sửa các mong ước có sẵn do người dùng tạo.

Xóa một Mong ước

Bước 1: Hiển thị Hộp thoại Xác nhận

Thêm code HTML sau đây vào userHome.html.

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="text-align:center;">
                <h4 class="modal-title" style="color:red;" id="deleteModalLabel">You are going to Delete this forever !!</h4>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Delete</button>
            </div>
        </div>
    </div>
</div>

Thêm biểu tượng xóa bên trong listTemplate bằng cách thêm code HTML sau:

1	<a data-id=${Id} onclick="ConfirmDelete(this)" ><span class="glyphicon glyphicon-trash"></span></a>

Khi nhấp vào biểu tượng xóa ở trên, chúng ta sẽ gọi hàm JavaScript có tên là confirmDelete nơi chúng ta sẽ kích hoạt cửa sổ hộp thoại xác nhận.

1	function ConfirmDelete(elem) {
2	localStorage.setItem('deleteId', $(elem).attr('data-id'));
3	$('#deleteModal').modal();
4	}

Lưu các thay đổi và khởi động lại máy chủ. Một khi đã đăng nhập, hãy nhấp vào biểu tượng xóa trong danh sách mong ước và bạn sẽ có thể thấy hộp thoại xác nhận bật lên.

Bước 2: Xóa một Mong ước

Để cài đặt tính năng Xóa mong ước, trước tiên chúng ta hãy tạo ra thủ tục lưu trữ MySQL.

DELIMITER $$
USE `BucketList`$$
CREATE PROCEDURE `sp_deleteWish` (
IN p_wish_id bigint,
IN p_user_id bigint
)
BEGIN
delete from tbl_wish where wish_id = p_wish_id and wish_user_id = p_user_id;
END$$

DELIMITER ;

Thủ tục ở trên nhận ID của mong ước và ID của người dùng và xóa mong ước tương ứng khỏi cơ sở dữ liệu.

Tiếp theo, hãy tạo ra một phương thức bên trong app.py để gọi thủ tục sp_deleteWish.

Chúng ta sẽ tạo ra một phương thức gọi là deleteWish để xóa mong ước.

@app.route('/deleteWish',methods=['POST'])
def deleteWish():
    try:
        if session.get('user'):
            _id = request.form['id']
            _user = session.get('user')

            conn = mysql.connect()
            cursor = conn.cursor()
            cursor.callproc('sp_deleteWish',(_id,_user))
            result = cursor.fetchall()

            if len(result) is 0:
                conn.commit()
                return json.dumps({'status':'OK'})
            else:
                return json.dumps({'status':'An Error occured'})
        else:
            return render_template('error.html',error = 'Unauthorized Access')
    except Exception as e:
        return json.dumps({'status':str(e)})
    finally:
        cursor.close()
        conn.close()

Trong phương thức ở trên, chúng ta trước tiên xác minh session. Một khi chúng ta đã xác minh session user, sử dụng ID của mong ước và ID của người dùng, chúng ta gọi thủ tục lưu trữ sp_deleteWish.

Để gọi phương thức deleteWish ở trên, hãy thêm một sự kiện onclick vào button Delete trong cửa sổ hộp thoại xác nhận.

1	<button type="button" class="btn btn-primary" onclick="Delete()">Delete</button>

Tạo một hàm JavaScript được gọi là Delete, và bên trong Delete làm cho AJAX gọi phương thức deleteWish của python.

function Delete() {
    $.ajax({
        url: '/deleteWish',
        data: {
            id: localStorage.getItem('deleteId')
        },
        type: 'POST',
        success: function(res) {
            var result = JSON.parse(res);
            if (result.status == 'OK') {
                $('#deleteModal').modal('hide');
                GetWishes();
            } else {
                alert(result.status);
            }
        },
        error: function(error) {
            console.log(error);
        }
    });
}

Trong hàm callback success của hàm Delete ở trên, chúng ta sẽ kiểm tra trạng thái trả về và nếu OK, chúng ta sẽ ẩn hộp thoại và tải lại các mong ước.

Lưu các thay đổi và khởi động lại máy chủ. Một khi đăng nhập vào ứng dụng, hãy thử xóa một mong ước khỏi trang chủ của người dùng.

Phần tóm tắt

Trong phần này, chúng ta đã tìm hiểu cách cài đặt chức năng Chỉnh sửa và Xoá mong ước cho Ứng dụng Danh sách Mong ước của chúng ta. Trong phần tiếp theo của loạt bài này, chúng ta sẽ cài đặt phân trang cho danh sách trên trang chủ của người dùng và đồng thời cài đặt thêm một vài tính năng nữa.

Mã nguồn từ hướng dẫn này có sẵn trên GitHub.

Hãy cho chúng tôi biết những suy nghĩ của bạn trong phần bình luận dưới đây nhé!