Biểu mẫu python và html
|
Kéo và thả là một tính năng rất phổ biến. Đó là khi bạn "chộp lấy" một đối tượng và kéo nó đến một vị trí khác Show Hỗ trợ trình duyệtCác số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ Kéo và Thả đầy đủ APIDrag và Drop4. 09. 03. 56. 012. 0Ví dụ Kéo và Thả HTMLVí dụ dưới đây là một ví dụ kéo và thả đơn giản Thí dụNó có vẻ phức tạp, nhưng chúng ta hãy đi qua tất cả các phần khác nhau của sự kiện kéo và thả Tạo một phần tử có thể kéo đượcĐầu tiên. Để làm cho một phần tử có thể kéo được, hãy đặt thuộc tính Kéo cái gì - ondragstart và setData()Sau đó, chỉ định điều gì sẽ xảy ra khi phần tử được kéo Trong ví dụ trên, thuộc tính Phương thức chức năng kéo (ev) { Trong trường hợp này, kiểu dữ liệu là "văn bản" và giá trị là id của phần tử có thể kéo được ("drag1") Thả ở đâu - ondragoverSự kiện Theo mặc định, không thể bỏ dữ liệu/phần tử vào các phần tử khác. Để cho phép giảm, chúng ta phải ngăn việc xử lý phần tử mặc định Tìm hiểu từ hơn 300 ví dụ. Với trình chỉnh sửa của chúng tôi, bạn có thể chỉnh sửa CSS và nhấp vào nút để xem kết quả Chuyển đến ví dụ về CSS Sử dụng thực đơnChúng tôi khuyên bạn nên đọc hướng dẫn này, theo trình tự được liệt kê trong menu Nếu bạn có màn hình lớn, menu sẽ luôn ở bên trái Nếu bạn có màn hình nhỏ, hãy mở menu bằng cách nhấp vào ký hiệu menu trên cùng ☰ Mẫu CSSChúng tôi đã tạo một số W3 đáp ứng. Các mẫu CSS để bạn sử dụng Bạn có thể tự do sửa đổi, lưu, chia sẻ và sử dụng chúng trong tất cả các dự án của mình Mẫu CSS miễn phí bài tập cssKiểm tra bản thân với các bài tậpCâu đố về CSSKiểm tra kỹ năng CSS của bạn bằng một bài kiểm tra Bắt đầu bài kiểm tra CSS Việc học của tôiTheo dõi tiến trình của bạn với chương trình "Học tập của tôi" miễn phí tại W3Schools Đăng nhập vào tài khoản của bạn và bắt đầu kiếm điểm Đây là một tính năng tùy chọn. Bạn có thể học W3Schools mà không cần sử dụng My Learning Tài liệu tham khảo CSSTại W3Schools, bạn sẽ tìm thấy các tham chiếu CSS hoàn chỉnh của tất cả các thuộc tính và bộ chọn với cú pháp, ví dụ, hỗ trợ trình duyệt, v.v. Trong phần này, chúng ta sẽ cùng tìm hiểu về khái niệm Web Form và cách sử dụng Web Form trong Flask Để giúp các bạn dễ theo dõi, sau đây là danh sách các bài viết trong chuỗi bài hướng dẫn này
Bạn có thể truy cập mã nguồn cho phần này tại GitHub Trong Phần 2, chúng tôi đã tạo ra một mẫu đơn giản cho trang chủ của ứng dụng và sử dụng các đối tượng giả lập cho các thành phần mà chúng tôi chưa xây dựng như đối tượng người dùng, bài viết. Trong chương trình này, chúng ta sẽ tìm hiểu kỹ hơn về các điểm yếu của ứng dụng cho đến thời điểm này, đặt biệt là vấn đề tiếp nhận và xử lý các yêu cầu của người sử dụng xử lý thông tin qua biểu mẫu Web Một cách tổng hợp, Web form (đừng nhầm lẫn với khái niệm Web form trong các ứng dụng ASP/ASP. NET truyền thống nhé, chúng không liên quan gì đến nhau mặc dù có cùng tên gọi) là một trong những thành phần cơ bản của bất kỳ ứng dụng Web nào. Chúng ta sẽ sử dụng biểu mẫu Web để người sử dụng có thể gửi dữ liệu như bài viết, thông tin đăng nhập từ trình duyệt đến ứng dụng của chúng ta Trước khi bắt đầu phần mới, hãy đảm bảo rằng ứng dụng myblog mà chúng tôi đã xây dựng đã được thiết lập và chạy thành công Flask-WTF giới thiệuĐể xử lý Web form trong ứng dụng, chúng ta sẽ sử dụng thư viện mở rộng (extension) Flask-WTF. Đây là một giao diện cho gói WTForms được tích hợp với Flask. Đây là thư viện mở rộng đầu tiên mà chúng tôi sử dụng, nhưng sẽ không phải là cuối cùng. Các thư viện mở rộng là một thành phần quan trọng trong hệ sinh thái của Flask bởi vì họ cung cấp các giải pháp mà Flask không có (dù là cố tình hay vô ý) Các thư viện mở rộng của Flask là các gói thư viện Python tiêu chuẩn được cài đặt bằng cách sử dụng 1 (myenv) $ pip3 install flask-wtf Config settingCho đến thời điểm này, ứng dụng của chúng ta vẫn còn rất sơ khai, và do đó, chúng ta không cần phải đề cập đến nhiều vấn đề về cấu hình (configuration). Nhưng đối với bất kỳ ứng dụng nào ngoại trừ các ứng dụng rất đơn giản, chúng ta sẽ thấy rằng Flask (và có thể bao gồm các thư viện mở rộng của Flask mà bạn sử dụng) cho phép chúng ta tự làm trong quá trình thực hiện . Và khi bạn cần quyết định bất kỳ điều gì đó, bạn sẽ cho Flask biết thông qua một danh sách các tham số cấu hình Có một số định dạng khác nhau trong việc cung cấp cấu hình cho ứng dụng. Giải pháp cơ bản nhất là định nghĩa các tham số cấu hình của bạn thông qua các từ khóa (key) trong tệp 1 2 3 app = Flask(__name__) ứng dụng. config['SECRET_KEY'] = 'khong-doan-noi-dau' .. . c á c th ô ng số cần thiết khác Dù cấu trúc trên đây là đầy đủ việc định nghĩa cấu hình cho Flask, chúng ta vẫn phải tuân theo nguyên tắc phân chia các mối quan tâm (tách các mối quan tâm). Cụ thể hơn, thay vì đặt tất cả các thông số cấu hình vào mã khởi động của ứng dụng, chúng ta sẽ đặt nó vào một tệp cấu hình riêng rẽ Trong khuôn khổ của loạt bài này, chúng ta sẽ tuân theo quy ước là sử dụng một lớp để chứa tất cả các thông số cấu hình của ứng dụng. Để giữ cho cấu trúc chung của ứng dụng được gọn gàng, chúng ta sẽ tạo ra các lớp cấu hình trong một mô-đun Python riêng biệt. Sau đây là các khai báo trong lớp cấu hình cho ứng dụng trong tệp cấu hình. py mà chúng ta sẽ lưu ở thư mục bên ngoài cùng của ứng dụng cấu hình. py. Configure to key code 1 2 3 4 nhập os
lớp Cấu hình(đối tượng): SECRET_KEY = os. môi trường. lấy('SECRET_KEY') or 'khong-doan-noi-dau' Rất đơn giản phải không? . Nếu chúng ta cần khai báo các tham số mới, chúng ta sẽ thêm các biến mới vào lớp này. Thậm chí nếu sau này chúng ta cần nhiều bộ tham số, chúng ta có thể tạo ra các lớp con của lớp này. Nhưng bây giờ tạm thời chúng ta không cần đi sâu Tham số cấu hình Giá trị của khóa bí mật này là một biểu thức với hai mệnh đề được ghép lại với nhau thông qua toán tử HOẶC. Mệnh đề thức nhất sẽ tìm ra giá trị của một biến môi trường còn được gọi là Sau khi đã có file cấu hình, chúng ta cần chọn Flask know to get information from that and used for application. Chúng ta làm điều này bằng cách cập nhật tệp __init__. py và thêm một dòng lệnh sử dụng hàm ứng dụng/__init__. py. cấu hình Flask 1 2 3 4 5 6 7 từ bình nhập Bình từ config nhập Cấu hình
app = Flask(__name__) ứng dụng. config. from_object(Cấu hình)
từ ứng dụng nhập tuyến đường T liếc nhìn thì cách tham chiếu đến lớp Như đã nói ở trên, các tham số cấu hình sẽ được truy cập thông qua từ điển trong 1 2 3 >>> từ blog của tôi nhập ứng dụngnhậpứng dụngnhậpứng dụng >>> ứng dụng. config['SECRET_KEY'] 'khong-doan-noi-dau' Form đăng nhập (form đăng nhập)Thư viện mở rộng (Flask-WTF) sử dụng các lớp trong Python để đại diện cho các biểu mẫu Web. Các lớp này – gọi tắt là lớp biểu mẫu) sẽ định nghĩa các trường (trường) có trên biểu mẫu thông qua các biến thành viên Theo đúng nguyên tắc phân chia các mối quan tâm đã được đề cập ở trên, chúng ta sẽ tạo ra một mô-đun mới trong thư mục ứng dụng có tên là biểu mẫu. py để chứa các thông tin về form đăng nhập của chúng tôi. Chúng ta bắt đầu với một biểu mẫu đơn giản bao gồm hai khung nhập văn bản (hộp văn bản) để người dùng có thể nhập tên người dùng và mật khẩu (tên người dùng và mật khẩu). Biểu mẫu này cũng có thêm một dấu đánh dấu (hộp kiểm) có tên là “Ghi nhớ tôi” và một lần nhấn nút để gửi thông tin đăng nhập từ trình duyệt của người sử dụng về ứng dụng trên máy chủ (nút gửi) ứng dụng/biểu mẫu. py. đăng nhập mẫu 1 2 3 4 5 6 7 8 9 từ flask_wtf nhập FlaskForm từ wtforms nhập StringField, PasswordField, BooleanField, SubmitField từ wtforms. trình xác thực nhập Dữ liệu bắt buộc
class LoginForm(FlaskForm): tên người dùng = StringField('Username', validators=[DataRequired()]) mật khẩu = Trường mật khẩu('Password', validators=[DataRequired()]) remember_me = BooleanField('Remember me') gửi = Trường gửi('Sign In') Đa số thư viện mở rộng của Flask sử dụng quy ước Ứng dụng của chúng tôi cũng sử dụng bốn lớp khác nhau từ gói WTForms để đại diện cho các trường nhập dữ liệu tương ứng. Mỗi trường sẽ được đại diện bởi một biến trong lớp Bước tiếp theo là tạo một mẫu HTML sử dụng biểu mẫu của chúng tôi. Việc tạo mẫu này không quá phức tạp vì các trường được định nghĩa trong Lớp LoginForm biết cách tạo mã HTML cho chính chúng. Sau đây là đoạn mã để tạo mẫu đăng nhập, chúng ta sẽ đặt mã này vào tệp app/templates/login. html ứng dụng/mẫu/đăng nhập. html. mẫu cho mẫu đăng nhập 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 {% mở rộng "cơ sở. html" %}
{% chặn nội dung %} Đăng nhập
{{ hình thức. hidden_tag() }}
{{ biểu mẫu. tên tài khoản. nhãn }} {{ hình thức. tên người dùng(size=32) }}
{{ biểu mẫu. mật khẩu mở khóa. nhãn }} {{ hình thức. mật khẩu(size=32) }}
{{ biểu mẫu. memory_me() }} {{ biểu mẫu. nhớ_tôi. nhãn }} {{ biểu mẫu. gửi() }}
{% chặn kết thúc %} Trong mẫu này, chúng tôi sẽ sử dụng lại cơ sở mẫu. html được giới thiệu trong Phần 2 bằng cách sử dụng lệnh Mẫu này cần có một tham số là một thực thể đã được khởi tạo của lớp Thẻ HTML Tham số Nếu bạn đã từng viết biểu mẫu Web HTML, có thể bạn sẽ thấy lạ vì không có thẻ HTML nào trong mẫu này. Lý do là vì đối tượng biểu mẫu mà chúng ta khai báo trong biểu mẫu. py biết cách tạo mã HTML cho các trường tương ứng. Việc chúng ta cần làm là đặt tuyên bố Chúng ta đã làm hầu hết các bước để tạo ra biểu mẫu đăng nhập (đăng nhập). Tuy nhiên, để hiển thị biểu mẫu này trong trình duyệt, chúng ta cần tạo ra hàm hiển thị tương ứng và ánh xạ hàm này vào một URL – cụ thể là ứng dụng/tuyến đường. py. Hàm hiển thị cho form Đăng nhập 1 2 3 4 5 6 7 8 9 10 từ flask nhập render_template từ ứng dụng nhập ứng dụng từ ứng dụng. biểu mẫu nhập LoginForm
.. .
@ứng dụng. tuyến đường('/đăng nhập') def đăng nhập(). biểu mẫu = Biểu mẫu đăng nhập() return render_template('đăng nhập. html', tiêu đề='Đăng nhập', form=form) Ở đây, chúng ta thêm tham chiếu đến lớp Để giúp việc truy cập biểu mẫu Đăng nhập dễ dàng hơn, chúng ta sẽ thay đổi một chút thanh định hướng ở cơ sở mẫu. html ứng dụng/mẫu/cơ sở. html. Liên kết đến trang Đăng nhập trong thanh định hướng 1 2 3 4 5 Đến đây, bạn có thể chạy thử ứng dụng một lần nữa và kiểm tra biểu mẫu mà chúng tôi đã tạo ra. Sau khi ứng dụng được kích hoạt, hãy nhập địa chỉ Đến đây, chúng ta đã có một biểu mẫu đăng nhập thực sự hấp dẫn. Tuy nhiên, nếu bạn thử bấm vào nút “Đăng nhập”, chúng ta sẽ thấy một thông báo lỗi không mấy dễ chịu. “Phương pháp không được phép”. Chuyện gì xảy ra ở đây? . nó hiển thị biểu mẫu nhưng hoàn toàn không có bất kỳ mã lệnh nào để thực hiện công việc xử lý dữ liệu nhận được khi người dùng nhấn nút gửi (gửi) dữ liệu – nút “Đăng nhập” trên biểu mẫu của chúng tôi. Tiếp theo, chúng ta sẽ cập nhật chức năng hiển thị để nhận và kiểm tra dữ liệu do người dùng nhập vào biểu mẫu như sau ứng dụng/tuyến đường. py. Nhận thông tin người sử dụng 1 2 3 4 5 6 7 8 9 10 từ flask nhập render_template, flash, redirect
@ứng dụng. tuyến đường('/đăng nhập', methods=['GET', 'POST']) def đăng nhập(). biểu mẫu = Biểu mẫu đăng nhập() nếu biểu mẫu. validate_on_submit(). flash('Yeu cau dang nhap tu user {}, memory_me={}'< . .định dạng( biểu mẫu. tên người dùng. dữ liệu, biểu mẫu. nhớ_tôi. dữ liệu)) trả lại chuyển hướng('/index') return render_template('đăng nhập. html', tiêu đề='Đăng nhập', form=form) Điểm mới được thấy đầu tiên trong đoạn mã trên là tham số Hàm Nếu người sử dụng nhấn nút “Đăng nhập”, trình duyệt sẽ gửi yêu cầu dưới dạng Tiếp theo, khi hàm Hàm thứ hai được gọi trong hàm hiển thị là Khi bạn gọi hàm ứng dụng/mẫu/cơ sở. html. Hiển thị thông báo được truyền vào hàm flash() 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
{% nếu tiêu đề %} {% khác %} {% endif %}
{% có tin nhắn = get_flashed_messages() %} {% nếu tin nhắn %} {% cho tin nhắn trong tin nhắn %} {{ message }} {% endfor %}
{% endif %} {% kết thúc với %} {% khối nội dung %}{% khối cuối %}
Ở đây chúng ta sử dụng mệnh đề để gán giá trị trả về từ hàm Một điểm đáng lưu ý ở đây là các thông điệp được lưu lại bằng hàm Đến đây, bạn có thể thử chạy chương trình một lần nữa để tìm hiểu cách làm việc của biểu mẫu nếu bạn cảm thấy chưa hiểu rõ. Khi chạy chương trình, bạn hãy thử nhấn nút “Đăng nhập” để gửi dữ liệu về máy chủ nhưng bỏ trống trường “tên người dùng” hoặc “mật khẩu”, làm như vậy bạn sẽ thấy cách hoạt động của các biến kiểm tra dữ liệu Các biến kiểm tra dữ liệu (validator) mà chúng ta đã liên kết với các trường dữ liệu sẽ không cho phép các dữ liệu bất hợp lệ được gửi về ứng dụng trên máy chủ. Khi dữ liệu không hợp lệ, ứng dụng sẽ hiển thị lại biểu mẫu để người dùng nhập lại dữ liệu Nếu bạn cố gắng gửi dữ liệu không hợp lệ với biểu mẫu đăng nhập của chúng tôi, có thể bạn sẽ lưu ý rằng dù biểu mẫu hoạt động không đúng theo ý đồ của chúng tôi (hiển thị lại biểu mẫu với dữ liệu nhập để bạn sửa đổi) . Vì vậy chúng ta có thể cải tiến tiến trình mã của chúng ta để đưa ra các thông báo lỗi thích hợp và giúp người dùng dễ dàng nhận ra dữ liệu không hợp lệ Thật ra thì khi dữ liệu không hợp lệ, các biến kiểm tra dữ liệu đã sinh ra các thông báo lỗi rồi, điều chúng ta cần làm là thêm một vài dòng lệnh để hiển thị các thông báo lỗi này theo thời gian Sau đây là phiên bản mới của đăng nhập mẫu với thông báo lỗi cho tên người dùng và mật khẩu của trường ứng dụng/mẫu/đăng nhập. html. Thông báo lỗi nhập dữ liệu trong mẫu Đăng nhập 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 {% mở rộng "cơ sở. html" %}
{% chặn nội dung %} Đăng nhập
{{ hình thức. hidden_tag() }}
{{ biểu mẫu. tên tài khoản. nhãn }} {{ biểu mẫu. tên người dùng(size=32) }} {% cho lỗi trong biểu mẫu. tên tài khoản. lỗi %} kiểu="color. đỏ;">[{{ error }}] {% endfor %}
{{ biểu mẫu. mật khẩu mở khóa. nhãn }} {{ biểu mẫu. mật khẩu(size=32) }} {% cho lỗi trong biểu mẫu. mật khẩu mở khóa. lỗi %} kiểu="color. đỏ;">[{{ error }}] {% endfor %}
{{ biểu mẫu. memory_me() }} {{ biểu mẫu. nhớ_tôi. nhãn }} {{ biểu mẫu. gửi() }}
{% chặn kết thúc %} Thay đổi duy nhất mà chúng tôi đã làm ở đây là thêm một vòng lặp ngay sau mã cho tên người dùng và mật khẩu của trường để hiển thị các thông báo lỗi được sinh ra bởi biến kiểm tra bằng màu đỏ. Theo quy ước, các thông báo lỗi cho các trường có liên kết với biến kiểm tra dữ liệu sẽ được bổ sung vào biến Đến đây thì form đăng nhập gần như hoàn tất. Nhưng trước khi kết thúc phần này, chúng ta sẽ nói qua một chút về cách đặt các liên kết (link) và chuyển trang (redirect). Cho đến giờ, bạn đã thấy một số trường hợp chúng ta đặt các liên kết vào ứng dụng. Ví dụ như trong thanh định hướng ở cơ sở mẫu. html 1 2 3 4 5
Hàm hiển thị cho trang đăng nhập cũng có một liên kết dưới dạng tham số cho hàm 1 2 3 4 5 6 7 @ứng dụng. tuyến đường('/đăng nhập', methods=['GET', 'POST']) def đăng nhập(). biểu mẫu = Biểu mẫu đăng nhập() nếu biểu mẫu. validate_on_submit(). . . . trả lại chuyển hướng('/index') . . . Tạm dừng các liên kết này vẫn hoạt động bình thường. Tuy nhiên, nếu vì lý do nào đó mà bạn thay đổi địa chỉ (URL) cho các mẫu này thì bạn sẽ phải tìm và thay đổi các liên kết này trong mã của bạn bằng địa chỉ mới Để tránh tình trạng này, Flask cung cấp một chức năng rất hữu ích là Bạn có thể thắc mắc tại sao sử dụng tên hàm hiển thị lại tốt hơn là sử dụng địa chỉ trực tiếp. Lý do chính là các URL thường có xu hướng dễ bị thay đổi hơn là các tên hàm hiển thị vì các hàm hiển thị thuộc lớp trong ứng dụng của ứng dụng và ít khi bị thay đổi. Một lý do nữa mà bạn sẽ thấy sau đây là một số URL có các thành phần không cố định. Vì vậy, việc sử dụng các URL một cách thủ công sẽ yêu cầu bạn cắt ghép nhiều phần lại với nhau – một quá trình rất mất công và dễ gây ra sai sót. Chúng ta hoàn toàn có thể tránh được công việc này bằng cách sử dụng hàm Vì thế, từ bây giờ chúng ta sẽ làm quen với tập tin bằng cách sử dụng hàm ứng dụng/mẫu/cơ sở. html. Sử dụng hàm 1 2 3 4 5
Và cuối cùng là hàm hiển thị login() sử dụng hàm url_for ứng dụng/tuyến đường. py. Sử dụng hàm 1 2 3 4 5 6 7 8 9 10 11 từ flask nhập render_template, flash, redirect, url_for
#
@ứng dụng. tuyến đường('/đăng nhập', methods=['GET', 'POST']) def đăng nhập(). biểu mẫu = Biểu mẫu đăng nhập() nếu biểu mẫu. validate_on_submit(). . . . trả lại chuyển hướng(url_for('index')) . . . Đến đây, chúng ta có thể chạy thử lần nữa và lần này, bạn hãy thử nhập đầy đủ tên người dùng, mật khẩu và sau cùng, nhấn nút “Đăng nhập“. Bạn sẽ thấy kết quả tương tự như sau |
