Hướng dẫn python and mysql project

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong loạt bài này, chúng ta sẽ sử dụng Python, Flask và MySQL để tạo ra một ứng dụng web đơn giản từ đầu. Nó sẽ là một ứng dụng danh sách điều ước đơn giản, nơi người dùng có thể đăng ký, đăng nhập và tạo danh sách điều ước của họ.

Hướng dẫn này giả định rằng bạn có một số kiến thức cơ bản về ngôn ngữ lập trình Python. Chúng ta sẽ sử dụng Flask, một framework Python cho ứng dụng web, để tạo ra ứng dụng của chúng ta, với MySQL là back-end.

Giới thiệu Python Flask

Flask là một framework Python để tạo các ứng dụng web. Theo trang web chính thức,

Flask là một microframework cho Python dựa trên Werkzeug, Jinja 2 và các ý tưởng tốt.

Khi chúng ta nghĩ về Python, theo thói quen, framework thật sự mà chúng ta nghĩ đến là framework Django. Nhưng từ góc độ của người mới bắt đầu đến với Python, Flask dễ dàng để làm quen hơn, so với Django.

Thiết lập Flask

Thiết lập Flask là khá đơn giản và nhanh chóng. Với trình quản lí gói pip, tất cả những gì chúng ta cần làm là:

pip install flask

Một khi bạn hoàn tất cài đặt Flask, hãy tạo một thư mục được gọi là FlaskApp. Điều hướng đến thư mục FlaskApp và tạo một tập tin gọi là app.py. Nhập mô-đun flask và tạo ra một ứng dụng bằng cách sử dụng Flask như ở dưới đây:

from flask import Flask
app = Flask(__name__)

Bây giờ xác định tuyến (route) cơ bản / và trình điều khiển (handler) yêu cầu tương ứng của nó:

@app.route("/")
def main():
    return "Welcome!"

Tiếp theo, kiểm tra xem tập tin thực thi có là chương trình chính hay không và chạy ứng dụng:

if __name__ == "__main__":
    app.run()

Lưu các thay đổi và thực thi app.py:

python app.py

Trỏ trình duyệt của bạn đến http://localhost:5000/ và bạn sẽ thấy thông điệp chào mừng.

Tạo một Trang chủ

Đầu tiên, khi ứng dụng chạy chúng ta nên hiển thị một trang chủ với các phần tử trong danh sách mong ước mới nhất được thêm vào bởi người dùng. Vì vậy, hãy thêm trang chủ của chúng ta vào thư mục application.

Flask tìm kiếm các tập tin template bên trong thư mục templates. Do đó, hãy tìm đến thư mục PythonApp và tạo một thư mục gọi là templates. Bên trong templates, tạo một tập tin gọi là index.html. Mở index.html và thêm code HTML sau đây:

    


    

    






    

        

            
            
Python Flask App
        

        

            
Bucket List App
            

            
Sign up today
            
        

        

            

                
Bucket List
                
Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.

                
Bucket List
                
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

                
Bucket List
                
Maecenas sed diam eget risus varius blandit sit amet non magna.
            

            

                
Bucket List
                
Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.

                
Bucket List
                
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

                
Bucket List
                
Maecenas sed diam eget risus varius blandit sit amet non magna.
            
        

        

    

Mở app.py và import render_template, cái mà chúng ta sẽ sử dụng để kết xuất các tập tin template.

from flask import Flask, render_template

Sửa đổi phương thức chính để trả về tập tin template đã được kết xuất.

def main():
    return render_template('index.html')

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:5000/ và bạn sẽ thấy màn hình dưới đây:

Tạo một Trang đăng ký

Bước 1: Thiết lập Cơ sở Dữ liệu

Chúng ta sẽ sử dụng MySQL làm back-end. Do đó hãy đăng nhập vào MySQL từ dòng lệnh, hoặc nếu bạn thích một giao diện như MySQL Work Bench, bạn cũng có thể sử dụng nó. Đầu tiên, tạo một cơ sở dữ liệu được gọi là BucketList. Từ giao diện dòng lệnh:

mysql -u  -p

Nhập mật khẩu cần thiết và khi đã đăng nhập, thực thi lệnh sau để tạo ra cơ sở dữ liệu:

CREATE DATABASE BucketList;

Một khi cơ sở dữ liệu đã được tạo ra, tạo ra một bảng gọi là tbl_user như dưới đây:

CREATE TABLE `BucketList`.`tbl_user` (
  `user_id` BIGINT NULL AUTO_INCREMENT,
  `user_name` VARCHAR(45) NULL,
  `user_username` VARCHAR(45) NULL,
  `user_password` VARCHAR(45) NULL,
  PRIMARY KEY (`user_id`));

Chúng ta sẽ sử dụng các thủ tục lưu trữ để cho ứng dụng Python tương tác với cơ sở dữ liệu MySQL. Vì vậy, một khi bảng tbl_user đã được tạo ra, hãy tạo ra một thủ tục được lưu trữ được gọi là sp_createUser để đăng ký một người dùng.

Khi tạo một thủ tục lưu trữ để tạo người dùng trong bảng tbl_user, trước tiên chúng ta cần kiểm tra xem người dùng với username đã tồn tại hay chưa. Nếu nó đã tồn tại chúng ta cần phải đưa ra một lỗi cho người dùng, nếu không chúng ta sẽ tạo người dùng trong bảng người dùng. Thủ tục lưu trữ sp_createUser sẽ trông giống như sau:

DELIMITER $$
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_createUser`(
    IN p_name VARCHAR(20),
  IN p_username VARCHAR(20),
	IN p_password VARCHAR(20)
)
BEGIN
	if ( select exists (select 1 from tbl_user where user_username = p_username) ) THEN
	
		select 'Username Exists !!';
	
	ELSE
	
		insert into tbl_user
		(
			user_name,
			user_username,
			user_password
		)
		values
		(
			p_name,
			p_username,
			p_password
		);
	
	END IF;
END$$
DELIMITER ;

Bước 2: Tạo một Giao diện Đăng ký

Điều hướng đến thư mục PythonApp/templates và tạo ra một tập tin HTML được gọi là signup.html. Thêm code HTML sau đây vào signup.html:

  
    

   
    

    
    
   
  

  

    

      

        
        
Python Flask App
      

      

        
Bucket List App
        

        Name
        
        Email address
        
        Password
        
        
        Sign up
      
      

      

      

    
  

Đồng thời thêm CSS sau đây như là signup.css vào thư mục static bên trong PythonApp.

body {
  padding-top: 40px;
  padding-bottom: 40px;
}

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

Trong app.py thêm một phương thức được gọi là showSignUp để kết xuất trang đăng ký một khi một yêu cầu gởi đến /showSignUp:

@app.route('/showSignUp')
def showSignUp():
    return render_template('signup.html')

Lưu các thay đổi và khởi động lại máy chủ. Bấm vào nút Sign Up trên trang chủ và bạn sẽ có trang đăng ký như dưới đây:

Bước 3: Cài đặt một Phương thức Đăng ký

Tiếp theo, chúng ta cần một phương thức bên phía máy chủ để cho giao diện người dùng tương tác với cơ sở dữ liệu MySQL. Vì vậy, hãy chuyển đến PythonApp và mở app.py. Tạo ra một phương thức mới gọi là signUp và đồng thời thêm một tuyến /signUp. Nó sẽ trông giống như dưới đây:

@app.route('/signUp')
def signUp():
    # create user code will be here !!

Chúng ta sẽ sử dụng jQuery AJAX để gửi dữ liệu đăng ký của phương thức signUp, do đó chúng ta sẽ chỉ định phương thức trong định nghĩa tuyến (route).

@app.route('/signUp',methods=['POST'])
def signUp():
    # create user code will be here !!

Để đọc các giá trị gởi đi chúng ta cần import request từ Flask.

from flask import Flask, render_template, request

Sử dụng request chúng ta có thể đọc các giá trị được gởi như dưới đây:

@app.route('/signUp',methods=['POST'])
def signUp():

    # read the posted values from the UI
    _name = request.form['inputName']
    _email = request.form['inputEmail']
    _password = request.form['inputPassword']

Sau khi các giá trị đã được đọc, chúng ta sẽ chỉ cần kiểm tra xem chúng có hợp lệ hay không và lúc này chỉ cần trả về một thông điệp đơn giản:

@app.route('/signUp',methods=['POST'])
def signUp():

    # read the posted values from the UI
    _name = request.form['inputName']
    _email = request.form['inputEmail']
    _password = request.form['inputPassword']

    # validate the received values
    if _name and _email and _password:
        return json.dumps({'html':'All fields good !!'})
    else:
        return json.dumps({'html':'Enter the required fields'})

Đồng thời import json từ Flask, vì chúng ta đang sử dụng nó trong code ở trên để trả về dữ liệu json.

from flask import Flask, render_template, json, request

Bước 4: Tạo một Yêu cầu Đăng ký

Chúng ta sẽ sử dụng jQuery AJAX để gửi yêu cầu đăng ký đến phương thức của Python. Tải về và đặt jQuery bên trong PythonApp/static/js và thêm một liên kết đến nó từ trang đăng ký. Một khi jQuery đã được thêm vào, chúng ta sẽ thêm một yêu cầu POST jQuery khi người dùng nhấp vào nút Sign Up.

Vì vậy, hãy gắn sự kiện click vào nút Sign Up như sau:

$(function() {
    $('#btnSignUp').click(function() {

        $.ajax({
            url: '/signUp',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

Lưu tất cả các thay đổi và khởi động lại máy chủ. Từ trang Sign Up, điền các chi tiết và nhấp vào Sign Up. Kiểm tra giao diện console của trình duyệt và bạn sẽ có được thông điệp sau đây:

{"html": "All fields good !!"} 

Bước 5: Gọi Thủ tục Lưu trữ của MySQL

Một khi chúng ta có name, email và passwork, chúng ta chỉ cần gọi thủ tục lưu trữ của MySQL để tạo người dùng mới.

Để kết nối với MySQL, chúng ta sẽ sử dụng Flask-MySQL, nó là một extension (chức năng mở rộng) của Flask. Để bắt đầu với Flask-MySQL, hãy cài đặt nó bằng cách sử dụng trình quản lý gói pip:

pip install flask-mysql

Import MySQL bên trong app.py:

from flask.ext.mysql import MySQL

Trước đó, chúng ta đã định nghĩa ứng dụng của chúng ta như sau:

app = Flask(__name__)

Cùng với đó hãy bao gồm các cấu hình MySQL sau đây:

mysql = MySQL()

# MySQL configurations
app.config['MYSQL_DATABASE_USER'] = 'jay'
app.config['MYSQL_DATABASE_PASSWORD'] = 'jay'
app.config['MYSQL_DATABASE_DB'] = 'BucketList'
app.config['MYSQL_DATABASE_HOST'] = 'localhost'
mysql.init_app(app)

Trước tiên, hãy tạo kết nối MySQL:

conn = mysql.connect()

Sau khi kết nối được tạo ra, chúng ta sẽ yêu cầu một cursor để truy vấn thủ tục được lưu trữ của chúng ta. Do đó, sử dụng kết nối conn, tạo ra một cursor.

cursor = conn.cursor()

Trước khi gọi thủ tục lưu trữ, hãy làm cho mật khẩu của chúng ta an toàn bằng cách sử dụng một helper được cung cấp bởi Werkzeug. Import mô-đun vào app.py:

from werkzeug import generate_password_hash, check_password_hash

Sử dụng mô-đun salting để tạo mật khẩu băm.

_hashed_password = generate_password_hash(_password)

Bây giờ, hãy gọi thủ tục sp_createUser:

cursor.callproc('sp_createUser',(_name,_email,_hashed_password))

Nếu thủ tục được thực thi thành công, thì chúng ta sẽ áp dụng các thay đổi và trả về thông điệp thành công.

data = cursor.fetchall()

if len(data) is 0:
    conn.commit()
    return json.dumps({'message':'User created successfully !'})
else:
    return json.dumps({'error':str(data[0])})

Lưu các thay đổi và khởi động lại máy chủ. Đi đến trang đăng ký và nhập name, email và password và nhấp vào nút Sign Up. Khi tạo thành công người dùng, bạn sẽ có thể thấy một thông báo trong giao diện console của trình duyệt.

{"message": "User created successfully !"}

Tóm tắt

Trong hướng dẫn này, chúng ta đã được làm quen với việc tạo ra một ứng dụng web bằng Python Flask, MySQL và extension Flask-MySQL. Chúng ta tạo ra và thiết kế các bảng cơ sở dữ liệu và thủ tục lưu trữ, và cài đặt chức năng đăng ký. Trong hướng dẫn tiếp theo, chúng ta sẽ chuyển loạt bài này lên cấp độ tiếp theo bằng cách cài đặt chức năng đăng nhập và một số tính năng khác.

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