Tài liệu Xây dựng ứng dụng web python dream list app

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI VIỆN CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ──────── * ─────── BÀI TẬP LỚN MÔN: PROJECT 1 Tên đề tài XÂY DỰNG ỨNG DỤNG WEB PYTHON DREAM LIST APP Sinh viên thực hiện: Vũ Đức Anh Tuấn MSSV: 20154153 Lớp: CNTT 2.4 - K60 Giáo viên hướng dẫn: TS. Nguyễn Hữu Đức Hà Nội, tháng 12 năm 2017 Python Dream List App MỤC LỤC LỜI NÓI ĐẦU ..................................................................................................................... 3 CHƯƠNG 1: GIỚI THIỆU CÁC CÔNG NGHỆ SỬ DỤNG............................................. 4 1.1. Python ....................................................................................................................... 4 1.2. Flask .......................................................................................................................... 5 1.3. MySQL ..................................................................................................................... 5 CHƯƠNG 2: CẤU TRÚC MÃ NGUỒN ............................................................................ 6 2.1. Thư mục chính WebApp .......................................................................................... 6 2.2. Thư mục static .......................................................................................................... 7 2.3. Thư mục templates ................................................................................................... 7 CHƯƠNG 3: CƠ SỞ DỮ LIỆU .......................................................................................... 8 3.1. Các bảng (Tables) ..................................................................................................... 8 3.2. Các thủ tục lưu trữ (Stored Procedures) ................................................................... 8 CHƯƠNG 4: GIAO DIỆN VÀ CHỨC NĂNG .................................................................. 9 4.1. Trang chủ của ứng dụng ........................................................................................... 9 4.2. Đăng ký tài khoản..................................................................................................... 9 4.3. Đăng nhập và Đăng xuất ........................................................................................ 11 4.4. Thêm, xóa và cập nhật điều ước ............................................................................. 13 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN......................................................................... 17 TÀI LIỆU THAM KHẢO ................................................................................................. 18 2 Python Dream List App LỜI NÓI ĐẦU Trong kỹ thuật phần mềm, một Ứng dụng web hay WebApp là một trình ứng dụng mà có thể tiếp cận qua web thông qua mạng như Internet hay Intranet. Ứng dụng web phổ biến nhờ vào sự có mặt vào bất cứ nơi đâu của một chương trình. Khả năng cập nhật và bảo trì ứng dụng Web mà không phải phân phối và cài đặt phần mềm trên hàng ngàn máy tính là lý do chính cho sự phổ biến của nó. Và không phải ngẫu nhiên mà các nhà lập trình web đều thích chọn Python để thiết kế những ứng dụng web của họ, bởi vì Python giúp cho việc lập trình một cách nhanh chóng và đạt hiệu quả cao với cú pháp ngắn gọn dễ học. Trong bài tập này, em sẽ sử dụng Python, Flask và MySQL để tạo ra một ứng dụng web đơn giản. Đây là một ứng dụng danh sách điều ước, 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ọ. Để hoàn thành được bài tập lớn này, em xin được gửi lời cảm ơn chân thành đến: ✓ Thầy giáo Nguyễn Hữu Đức - đã giúp đỡ, hướng dẫn, chỉ dạy tận tình để em hoàn thành được đề tài này. 3 Python Dream List App CHƯƠNG 1: GIỚI THIỆU CÁC CÔNG NGHỆ SỬ DỤNG 1.1. Python Python là một ngôn ngữ lập trình bậc cao, thông dịch, hướng đối tượng, đa mục đích và cũng là một ngôn ngữ lập trình động. Cú pháp của Python là khá dễ dàng để học và ngôn ngữ này cũng mạnh mẽ và linh hoạt không kém các ngôn ngữ khác trong việc phát triển các ứng dụng. Python hỗ trợ mẫu đa lập trình, bao gồm lập trình hướng đối tượng, lập trình hàm và mệnh lệnh hoặc là các phong cách lập trình theo thủ tục. Python không chỉ làm việc trên lĩnh vực đặc biệt như lập trình web, và đó là tại sao ngôn ngữ này là đa mục đích bởi vì nó có thể được sử dụng với web, enterprise, 3D CAD, … Dưới đây là một số đặc điểm chính của Python: o Dễ dàng để sử dụng: Python là một ngôn ngữ bậc cao rất dễ dàng để sử dụng. Python có một số lượng từ khóa ít hơn, cấu trúc của Python đơn giản hơn và cú pháp của Python được định nghĩa khá rõ ràng, … Tất cả các điều này là Python thực sự trở thành một ngôn ngữ thân thiện với lập trình viên. o Python có một thư viện chuẩn khá rộng lớn. Thư viện này dễ dàng tương thích và tích hợp với UNIX, Windows, và Macintosh. o Python là một ngôn ngữ thông dịch. Trình thông dịch thực thi code theo từng dòng, điều này giúp cho quá trình debug trở nên dễ dàng hơn và đây cũng là yếu tố khá quan trọng giúp Python thu hút được nhiều người học và trở nên khá phổ biến. o Python cũng là một ngôn ngữ lập trình hướng đối tượng. Ngoài ra, Python còn hỗ trợ các phương thức lập trình theo hàm và theo cấu trúc. Ngoài các đặc điểm trên, Python còn khá nhiều đặc điểm khác như hỗ trợ lập trình GUI, mã nguồn mở, có thể tích hợp với các ngôn ngữ lập trình khác, … 4 Python Dream List App 1.2. Flask Flask là một microframework của Python, rất thích hợp với những người mới bắt đầu tìm hiểu viết web app bằng ngôn ngữ này. 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. Trang chủ của Flask cũng nói rằng: "micro" ở đây không có nghĩa là toàn bộ code của ứng dụng mà người dùng viết phải nằm gọn trong một file Python duy nhất, "micro" cũng không có nghĩa là Flask thiếu một vài tính năng nào đó. "Micro" nghĩa là phần core của Flask rất gọn nhẹ, nhưng lại có khả năng mở rộng tốt. Flask sẽ không ép buộc dùng cái gì trong quá trình phát triển. Ví dụ người dùng có thể tùy ý chọn database nào mà họ thích và quen dùng. 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ì cần làm là nhập vào cmd: pip install flask 1.3. MySQL MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất thế giới và được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng. Vì MySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển, hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh. Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trên internet. MySQL miễn phí hoàn toàn cho nên người dùng có thể tải về MySQL từ trang chủ với nhiều phiên bản cho các hệ điều hành khác nhau như: Windows, Linux, Mac OS X, Unix, FreeBSD, NetBSD, SGI Irix, Solaris, … MySQL là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu quan hệ sử dụng Ngôn ngữ truy vấn có cấu trúc (SQL). MySQL được sử dụng cho việc bổ trợ PHP, Perl, Python và nhiều ngôn ngữ khác, nó làm nơi lưu trữ những thông tin trên các trang web viết bằng những ngôn ngữ trên. 5 Python Dream List App CHƯƠNG 2: CẤU TRÚC MÃ NGUỒN 2.1. Thư mục chính WebApp Thư mục trên bao gồm các thư mục và file sau: o Thư mục static: đây là folder chứa toàn bộ những static file của project như .js, .css, ... o Thư mục templates: khi render các template, Flask sẽ tự động tìm kiếm template trong thư mục templates. Nếu như không có folder này thì Flask sẽ báo lỗi. Đây là folder chứa toàn bộ file HTML của ứng dụng. o File app.py: đây là file chứa toàn bộ code python để chạy ứng dụng. Vì ứng dụng này được xây dựng dựa trên Flask nên từ flask sẽ import một số hàm và lớp sau: • Flask: Instance của lớp này chính là ứng dụng sẽ được xây dựng. Sau đó tạo một instance tên là app của lớp Flask vừa được import: app = Flask(__name__) Tham số name được truyền vào chính là tên của module hoặc package của ứng dụng. Tham số này giúp Flask biết sẽ tìm template và các file static của ứng dụng ở đâu. • render_template: Để kết xuất một template từ file HTML, ngoài ra còn cho phép đưa vào các tham số khác giúp template có thể hiển thị tùy biến dựa vào một điều kiện hoặc biến được đưa vào. • request: Đọc các giá trị gửi đi khi người dùng nhập thông tin tương ứng. • json: Trả giá trị về kiểu dữ liệu json. • session: Tạo 1 biến session khi người dùng đăng nhập thành công. Ngoài ra cũng cần phải thiết lập một khóa bí mật cho session. Vì vậy, trong app.py, sau khi ứng dụng đã được khởi tạo, khóa bí mật được thiết lập như sau: app.secret_key = 'my secret key' • redirect: Để điều hướng trang. 6 Python Dream List App 2.2. Thư mục static Thư mục này bao gồm 2 thư mục: o Thư mục css: chứa file signup.css để định dạng trang đăng ký người dùng. o Thư mục js: chứa các file: • File cài đặt jQuery: jquery-1.11.2 và jquery-1.11.2.min.map • signUp.js: sử dụng jQuery AJAX để gửi yêu cầu đăng ký đến phương thức của Python. • signIn.js: sử dụng jQuery AJAX để gửi yêu cầu đăng nhập đến phương thức của Python. 2.3. Thư mục templates Thư mục này chứa tất cả các file HTML của ứng dụng: o index.html: trang chủ của ứng dụng o signup.html: trang đăng ký người dùng o signin.html: trang đăng nhập o userHome.html: trang chủ người dùng o success.html: trang thông báo người dùng đăng ký tài khoản thành công o error.html: trang thông báo lỗi tương ứng trong quá trình sử dụng o addWish.html: trang cho phép người dùng thêm các điều ước của họ 7 Python Dream List App CHƯƠNG 3: CƠ SỞ DỮ LIỆU 3.1. Các bảng (Tables) Cơ sở dữ liệu của ứng dụng bao gồm các bảng sau: o tbl_user: Bảng này lưu trữ thông tin tài khoản đăng nhập của người dùng, bao gồm các thuộc tính: • • • • user_id: Id của người dùng user_name: Tên người dùng user_username: Địa chỉ email của người dùng (dùng để đăng nhập) user_password: Mật khẩu tài khoản của người dùng o tbl_wish: Bảng này lưu trữ danh sách những điều ước của người dùng, bao gồm các thuộc tính: • • • • • wish_id: Id của điều ước wish_title: Tiêu đề, mô tả ngắn gọn điều ước wish_description: Nội dung điều ước wish_user_id: Id của người dùng tương ứng wish_date: Ngày cập nhật điều ước 3.2. Các thủ tục lưu trữ (Stored Procedures) Các thủ tục lưu trữ sau được tạo ra để cho ứng dụng Python tương tác với cơ sở dữ liệu MySQL: o sp_createUser: Đăng ký một người dùng o sp_validateLogin: Kiểm tra một phiên đăng nhập bởi người dùng o sp_addWish: Thêm các phần tử vào bảng tbl_wish o sp_GetWishByUser: Lấy những mong ước được tạo ra bởi người dùng có ID tương ứng o sp_GetWishById: 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 o sp_updateWish: Cập nhật các chi tiết điều ước trong cơ sở dữ liệu o sp_deleteWish: 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 8 Python Dream List App CHƯƠNG 4: GIAO DIỆN VÀ CHỨC NĂNG 4.1. Trang chủ của ứng dụng Sau khi cấu hình MySQL trong app.py, khởi chạy MySQL Sever và chạy file app.py rồi truy cập địa chỉ http://localhost:5000/ trong trình duyệt web bất kì, giao diện chính của ứng dụng sẽ hiện ra: 4.2. Đăng ký tài khoản Bấm vào nút Sign Up trên trang chủ sẽ hiện ra trang đăng ký: 9 Python Dream List App Sau khi điền các thông tin cần thiết, nếu tài khoản email dùng để đăng ký đã tồn tại, người dùng sẽ nhận được thông báo: Và khi người dùng đăng ký thành công: 10 Python Dream List App 4.3. Đăng nhập và Đăng xuất Sau khi đăng ký thành công, người dùng bấm vào Sign in now hoặc nếu đã có tài khoản bấm vào nút Sign In trên trang chủ để đăng nhập vào tài khoản của mình: 11 Python Dream List App Nếu đăng nhập thành công, trang chủ người dùng sẽ hiện ra: (ví dụ) Tuy nhiên, một người dùng trái phép cũng có thể xem trang chủ chỉ đơn giản bằng cách truy cập địa chỉ http://localhost:5002/userHome. Vì vậy, nếu người dùng chưa đăng nhập mà truy cập vào địa chỉ trên sẽ được chuyển hướng đến trang lỗi: 12 Python Dream List App Và để đăng xuất khỏi ứng dụng, người dùng chỉ cần bấm vào nút Logout sẽ được chuyển hướng đến trang chủ. 4.4. Thêm, xóa và cập nhật điều ước Tại trang chủ người dùng bấm vào nút Add Wish để chuẩn bị tạo điều ước mới: Sau khi viết điều ước, người dùng bấm vào nút Add và sẽ thấy điều ước vừa tạo hiện lên ở trang chủ của họ: 13 Python Dream List App Để chỉnh sửa hay xóa một điều ước nào đó, người dùng chỉ cần bấm vào biểu tượng tương ứng cạnh bên: o Chỉnh sửa: Thực hiện sửa nội dung new Wish: 14 Python Dream List App Sau khi nhấn Update: o Xóa: Thực hiện xóa new Wish: 15 Python Dream List App Và sau khi nhấn Delete: 16 Python Dream List App KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Trên đây là báo cáo về bài tập lớn của em về đề tài Xây dựng ứng dụng Web Python đơn giản: Dream List App. Sau khi thực hiện xong bài tập, em mong muốn trong tương lai có thể phát triển ứng dụng thêm nữa với các chức năng mới như: tải hình ảnh đại diện cho người dùng, hiển thị những mong ước đã được tạo ra bởi người dùng trên trang chủ của ứng dụng, tương tác giữa những người sử dụng app bằng cách like điều ước của nhau, … Mặc dù đã cố gắng thực hiện đề tài một cách hoàn chỉnh nhất, song do những kiến thức về ngôn ngữ Python là tương đối mới nên sản phẩm của em không thể tránh khỏi những thiếu sót nhất định mà bản thân em chưa thấy được. Em rất mong nhận được ý kiến phê bình, đóng góp của thầy để bài tập được hoàn chỉnh hơn. 17 Python Dream List App TÀI LIỆU THAM KHẢO [1] https://code.tutsplus.com/ [2] https://www.tutorialspoint.com/python/ [3] https://phocode.com/python/ [4] http://vietjack.com/python/ 18