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

Vietnamese (Tiếng Việt) translation by Dai Phong (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 chức năng đăng nhập và đăng xuất cho ứng dụng Danh sách Mong ước của chúng ta. Trong phần này, chúng ta sẽ cài đặt back-end và front-end cần thiết để cho người dùng thêm và hiển thị các phần tử trong danh sách.

Bắt đầu

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

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

Khi mã nguồn đã được nhân bản, điều hướng đến thư mục dự án và khởi động máy chủ web.

1	cd PythonFlaskMySQLApp_Part2
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 đang chạy.

Thêm Phần tử vào Danh sách

Bước 1: Tạo một Giao diện để Thêm Phần tử

Chúng ta sẽ bắt đầu bằng cách tạo giao diện để cho người dùng đã đăng nhập thêm các phần tử trong danh sách. Điều hướng đến thư mục templates bên trong thư mục dự án và tạo tập tin có tên addWish.html. Mở addWish.html và thêm code HTML sau:

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

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


    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

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

    <script src="../static/js/jquery-1.11.2.js"></script>


</head>

<body>

    <div class="container">
        <div class="header">
            <nav>
                <ul class="nav nav-pills pull-right">
                    <li role="presentation" class="active"><a href="#">Add Item</a>
                    </li>
                    <li role="presentation"><a href="/logout">Logout</a>
                    </li>
                </ul>
            </nav>
            <h3 class="text-muted">Python Flask App</h3>
        </div>
        <section>
            <form class="form-horizontal" method="post" action="/addWish">
                <fieldset>

                    <!-- Form Name -->
                    <legend>Create Your Wish</legend>

                    <!-- Text input-->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="txtTitle">Title</label>
                        <div class="col-md-4">
                            <input id="txtTitle" name="inputTitle" type="text" placeholder="placeholder" class="form-control input-md">
                        </div>
                    </div>

                    <!-- Textarea -->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="txtPost">Post</label>
                        <div class="col-md-4">
                            <textarea class="form-control" id="txtPost" name="inputDescription"></textarea>
                        </div>
                    </div>

                    <!-- Button -->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="singlebutton"></label>
                        <div class="col-md-4">
                            <input id="singlebutton" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" />
                        </div>
                    </div>

                </fieldset>
            </form>

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

    </div>
</body>

</html>

Mở app.py và thêm một tuyến và phương thức mới để hiển thị trang Add Wish.

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

Mở userHome.html và thêm một phần tử menu mới để liên kết đến trang Add Wish.

1	<li role="presentation"><a href="/showAddWish">Add Wish</a></li>

Lưu 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 địa chỉ email và mật khẩu hợp lệ. Sau khi đăng nhập, nhấp chuột vào liên kết Add Wish và bạn sẽ thấy trang Add Wish.

Bước 2: Cài đặt Cơ sở dữ liệu

Để thêm các phần tử vào danh sách, chúng ta cần tạo một bảng có tên là tbl_wish.

CREATE TABLE `tbl_wish` (
  `wish_id` int(11) NOT NULL AUTO_INCREMENT,
  `wish_title` varchar(45) DEFAULT NULL,
  `wish_description` varchar(5000) DEFAULT NULL,
  `wish_user_id` int(11) DEFAULT NULL,
  `wish_date` datetime DEFAULT NULL,
  PRIMARY KEY (`wish_id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;

tbl_wish sẽ có title, description và ID của người dùng đã tạo ra mong ước.

Tiếp theo, chúng ta cần phải tạo một thủ tục lưu trữ MySQL để thêm các phần tử vào bảng tbl_wish.

USE `BucketList`;
DROP procedure IF EXISTS `BucketList`.`sp_addWish`;

DELIMITER $$
USE `BucketList`$$
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_addWish`(
    IN p_title varchar(45),
  IN p_description varchar(1000),
	IN p_user_id bigint
)
BEGIN
	insert into tbl_wish(
		wish_title,
		wish_description,
		wish_user_id,
		wish_date
	)
	values
	(
		p_title,
		p_description,
		p_user_id,
		NOW()
	);
END$$

DELIMITER ;
;

Bước 3: Tạo một Phương thức Python để gọi Thủ tục Lưu trữ MySQL

Hãy tạo một phương thức gọi là addWish trong app.py.

1	@app.route('/addWish',methods=['POST'])
2	def addWish():
3	# Code will be here

Vì chúng ta sẽ post dữ liệu lên phương thức này, nên chúng ta định nghĩa nó một cách rõ ràng trong tuyến (route) đã định nghĩa.

Khi gọi phương thức addWish, chúng ta cần xác minh nó có hợp lệ hay không bằng cách kiểm tra biến session user có tồn tại hay không. Một khi chúng ta đã xác minh session, chúng ta sẽ đọc title và description được post lên.

1	_title = request.form['inputTitle']
2	_description = request.form['inputDescription']
3	_user = session.get('user')

Một khi chúng ta có các giá trị input cần thiết, chúng ta sẽ mở một kết nối MySQL và gọi thủ tục lưu trữ sp_addWish.

1	conn = mysql.connect()
2	cursor = conn.cursor()
3	cursor.callproc('sp_addWish',(_title,_description,_user))
4	data = cursor.fetchall()

Sau khi chúng ta đã thực thi thủ tục lưu trữ, chúng ta cần phải commit những thay đổi vào cơ sở dữ liệu.

if len(data) is 0:
    conn.commit()
    return redirect('/userHome')
else:
    return render_template('error.html',error = 'An error occurred!')

Dưới đây là phương thức addWish hoàn chỉnh.

@app.route('/addWish',methods=['POST'])
def addWish():
    try:
        if session.get('user'):
            _title = request.form['inputTitle']
            _description = request.form['inputDescription']
            _user = session.get('user')

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

            if len(data) is 0:
                conn.commit()
                return redirect('/userHome')
            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()

Lưu tất cả mã nguồn và khởi động lại máy chủ. Trỏ trình duyệt đến http://localhost:5002 và đăng nhập bằng địa chỉ email và mật khẩu hợp lệ. Khi đã đăng nhập, hãy nhấp vào liên kết Add Wish. Nhập title và description cho mong ước của bạn và nhấp vào Publish. Khi thêm thành công mong ước, nó sẽ chuyển hướng đến trang chủ của người dùng. Đăng nhập vào cơ sở dữ liệu MySQL và mong ước của bạn sẽ được lưu trong bảng tbl_wish.

Hiển thị một Phần tử trong Danh sách Mong ước

Bước 1: Tạo một Thủ tục Lưu trữ để lấy một Mong ước

Hãy tạo ra một thủ tục lưu trữ MySQL sẽ lấy những mong ước được tạo ra bởi người dùng. Nó sẽ nhận ID của người dùng như một tham số và trả về một tập hợp các mong ước được tạo bởi người dùng có ID đó.

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

DELIMITER $$
USE `BucketList`$$
CREATE PROCEDURE `sp_GetWishByUser` (
IN p_user_id bigint
)
BEGIN
    select * from tbl_wish where wish_user_id = p_user_id;
END$$

DELIMITER ;


Bước 2: Tạo một Phương thức Python để Truy vấn Dữ liệu

Tiếp theo, hãy tạo ra một phương thức Python sẽ gọi thủ tục lưu trữ sp_GetWishByUser để lấy những mong ước được tạo ra bởi người dùng. Thêm một phương thức được gọi là getWish trong app.py.

@app.route('/getWish')
def getWish():
    try:
        if session.get('user'):
            _user = session.get('user')
        else:
            return render_template('error.html', error = 'Unauthorized Access')
    except Exception as e:
        return render_template('error.html', error = str(e))

Như đã thấy trong đoạn code ở trên, phương thức này chỉ có thể được gọi với session user hợp lệ. Một khi chúng ta đã xác nhận một session user hợp lệ, chúng ta sẽ tạo một kết nối đến cơ sở dữ liệu MySQL và gọi thủ tục lưu trữ sp_GetWishByUser.

 _user = session.get('user')

# Connect to MySQL and fetch data
con = mysql.connect()
cursor = con.cursor()
cursor.callproc('sp_GetWishByUser',(_user,))
wishes = cursor.fetchall()

Một khi chúng ta lấy được dữ liệu từ MySQL, chúng ta sẽ phân tích dữ liệu và chuyển đổi nó thành một dictionary sao cho nó dễ dàng trả về JSON.

wishes_dict = []
for wish in wishes:
    wish_dict = {
        'Id': wish[0],
        'Title': wish[1],
        'Description': wish[2],
        'Date': wish[4]}
wishes_dict.append(wish_dict)

Sau khi chuyển đổi dữ liệu thành dictionary, chúng ta sẽ chuyển dữ liệu sang JSON và trả dữ liệu về.

1	return json.dumps(wishes_dict)

Dưới đây là phương thức getWish đầy đủ.

@app.route('/getWish')
def getWish():
    try:
        if session.get('user'):
            _user = session.get('user')

            con = mysql.connect()
            cursor = con.cursor()
            cursor.callproc('sp_GetWishByUser',(_user,))
            wishes = cursor.fetchall()

            wishes_dict = []
            for wish in wishes:
                wish_dict = {
                        'Id': wish[0],
                        'Title': wish[1],
                        'Description': wish[2],
                        'Date': wish[4]}
                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))

Bước 3: Gắn dữ liệu JSON vào HTML

Khi trang chủ của người dùng được nạp, chúng ta sẽ gọi phương thức getWish bằng AJAX của jQuery và gắn dữ liệu đã nhận vào HTML của chúng ta. Trong userHome.html thêm script AJAX bằng jQuery sau đây:

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

Lưu các thay đổi ở trên và khởi động lại máy chủ. Một khi đã đăng nhập bằng địa chỉ email và mật khẩu hợp lệ, hãy kiểm tra giao diện console trong trình duyệt của bạn và bạn sẽ có danh sách mong ước lấy được từ cơ sở dữ liệu như sau:

[{
    "Date": "Fri, 23 Jan 2015 23:26:05 GMT",
    "Description": "I want to climb Mount Everest",
    "Id": 1,
    "Title": "Climb Everest"
}, {
    "Date": "Fri, 23 Jan 2015 23:27:05 GMT",
    "Description": "I want to jump from top of a mountain",
    "Id": 2,
    "Title": "Bungee Jump"
}]

Bây giờ, chúng ta cần lặp qua dữ liệu JSON và gắn nó vào HTML. Chúng ta sẽ sử dụng list-group của bootstrap để hiển thị các phần tử trong danh sách mong ước của chúng ta. Dưới đây là template list-group cơ bản:

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">Wish Title</h4>
    <p class="list-group-item-text">Wish Description</p>
  </a>
</div>

Thêm code HTML ở trên vào div jumbotron trong userHome.html. Nó sẽ trông giống như sau:

Bây giờ, những gì chúng ta sẽ làm là tạo nhóm div list-group như ở trên cho mỗi mong ước trong danh sách và thêm nó vào div jumbotron. Bên trong callback success của hàm getWish, tạo một div như sau:

var div = $('<div>')
    .attr('class', 'list-group')
    .append($('<a>')
        .attr('class', 'list-group-item active')
        .append($('<h4>')
            .attr('class', 'list-group-item-heading'),
            $('<p>')
            .attr('class', 'list-group-item-text')));

Chúng ta sẽ nhân bản div ở trên để tạo div list-group cho mỗi phần tử mong ước. Tiếp theo, phân tích cú pháp JSON trả về thành một đối tượng JavaScript.

1	var wishObj = JSON.parse(res);

Bây giờ, lặp qua wishObj và đối với mỗi phần tử mong ước, nhân bản một div mới và thêm nó vào div jumbotron.

var wish = '';

$.each(wishObj, function(index, value) {
    wish = $(div).clone();
    $(wish).find('h4').text(value.Title);
    $(wish).find('p').text(value.Description);
    $('.jumbotron').append(wish);
});

Lưu các thay đổi ở trên và khởi động lại máy chủ. Đăng nhập bằng địa chỉ email và mật khẩu hợp lệ và bạn sẽ có thể xem danh sách mong ước được tạo bởi người dùng cụ thể.

Phần tóm tắt

Trong hướng dẫn này, chúng ta đã cài đặt một giao diện cho người dùng đã đăng nhập để tạo ra một mong ước. Chúng ta cũng đã cài đặt các phương thức cần thiết và thủ tục lưu trữ trong cơ sở dữ liệu để lấy và hiển thị các mong ước được tạo ra lên trên trang chủ của người dùng.

Trong phần tiếp theo của loạt bài này, chúng tôi sẽ giới thiệu cách cài đặt chức năng Chỉnh sửa và Xoá cho danh sách mong ước được hiển thị trong trang chủ của người dùng.

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é!