Chào mọi người , thì sau khi ra phần 1 thì mình đã làm xong phần 2 của web tra cứu độ may mắn python và hướng dẫn các bạn đây! Trong phần 2 này mình sẽ đi làm web trên localhost sử dụng Flask và thêm một chút Html nữa. Để xem và hiểu phần 2 thì các bạn nên xem lại phần 1 một chút nhé! Sau đây mình sẽ hướng dẫn các bạn cách tạo một trang web bằng flask trên máy tính. Hôm nay chúng ta sẽ đến bước 2 của project tra cứu độ may mắn python.

I. Chuẩn Bị

Để làm được thì các bạn cần cài Python và môi trường Anaconda nhé !

Cách cài python các bạn tham khảo tại: https://hongtin.net/laptrinh/laptrinh-python/bai-1-cai-dat-moi-truong-lap-trinh-python-tren-win-10/

Để cài Anaconda các bạn tham khảotại: https://hongtin.net/laptrinh/laptrinh-python/anaconda-la-gi-cach-cai-dat-va-su-dung-tren-win10/

Clone github phần 1 , bây giờ mình đã push lên thêm 1 thư mục templates và 1 file html trong đó. Bây giờ các bạn clone về giúp mình nhé! Và di chuyển đến thư mục vừa tải về!

git clone https://github.com/sonrasa2k/web_lucky.git
cd web_lucky

Để chạy được các bạn cần cài thư viện và môi trường bằng cách chạy những lệnh sau trên CMD nhé :

conda create --name web_lucky python==3.7.7
conda activate web_lucky
conda install pandas
conda install numpy
conda install flask

Như vậy là chuẩn bị xong nhé! Bạn nào còn chưa nắm rõ về flask có thể tham khảo tại đây

II . Tiến Hành

Để chạy được web đơn giản các bạn chỉ cần dùng cmd đã làm sẵn ở phần chuẩn bị và gõ lệnh : python app.py

Sau đó , các bạn mở trình duyệt lên và gõ : localhost:5000

Bây giờ để tìm hiểu project này có gì, các bạn mở thư mục web_lucky trong Visual Studio Code. Các bạn chú ý file app.py nhé! Đây chính là file của project này.

Đầu tiên ta cần 1 hàm đọc dữ liệu từ file csv đã lấy đc ở phần 1:

def get_data(path_csv):
    global day_in_data
    global moth_in_data
    global rank_in_data
    data = pd.read_csv(path_csv)
    day_in_data = data[['day']].values
    moth_in_data = data[['month']].values
    rank_in_data = data[['rank']].values
    print(rank_in_data[0])

Hàm này có tác dụng truyền dữ liệu cho 3 biến day_in_data,month_in_data,rank_in_data.

Tiếp đến mình sẽ có 1 hàm mà khi người dùng truy cập vào server sẻ trả về giao diện:

@app.route('/')
def upload_form():
    return render_template('index.html')

File index.html nằm trong thư mục templates và tên thư mục ở đây là bắt buộc theo cấu trúc của flask.

Hoặc nếu bạn đặt tên thư mục khác phải khai báo lúc khởi tạo app. Thay templates thành tên thư mục bạn tạo.

app = Flask(__name__,template_folder='templates')

Tiêp đến là hàm xử lý khi người dùng gửi dữ liệu theo giao thức Post lên server. Chúng ta sẽ nhận dữ liệu là ngày tháng năm sinh sau đó xử lý và trả về 1 chuỗi bao gồm mức rank của ngày sinh đó. Để cuối cùng giao diện hiển thị lên.

Cuối cùng để chạy ta dùng hàm main của python. Không cần cũng được nhưng mình sài cho nghiêm túc.

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

Bên cạnh đó là file index.html :

ở đây mình dùng phương thức post và gửi dữ liệu về. Để hiển thị mức rank từ server gửi xuống chỉ đơn giản là {{tên biến mà server trả về}}.

Tổng thể bạn thực hiện xong chương trình và chạy thành công nó sẽ như này :

Như vậy là xong app rồi nhé !

III.Kết Luận

Thật dễ đề làm 1 web vừa frontend vừa backend với flask phải không nào! Mình thực ra không mạnh frontend nên giao diện mình chỉ được như vậy thôi. Mong mọi người thông cảm cho mình.Để biết thêm về project hay ho có thể tham gia group của mình :https://www.facebook.com/groups/164371998723215

Có câu hỏi hay có đề tài hay muốn mình làm liên hệ qua fanpage hoặc facebook cá nhân : https://www.facebook.com/sonnguyen16032000/

Hoặc tham khảo các bài viết khác tại Hóng Tin

Trong bài sau mình sẽ deloy app này lên heroky mong mọi người đón nhận nhé ! Thank you và hẹn gặp lại trong bài viết kế tiếp !