Flask WTF

جانب مهم من تطبيق الويب هو تقديم واجهة مستخدم للمستخدمين. يوفر HTML علامة <form> لتصميم واجهة. يمكن استخدام عناصر النموذج بشكل مناسب، مثل المدخلات النصية، الإذاعات، الخيارات، إلخ.

يتم تقديم بيانات إدخال المستخدم للمحرك الجانب الخلفي عبر رسالة طلب Http باستخدام طريقة GET أو POST.

يجب على سكربت الجانب الخلفي إعادة إنشاء عناصر النموذج من بيانات الطلب http. لذلك، يجب تعريف عناصر النموذج مرتين - مرة واحدة في HTML ومرة أخرى في سكربت الجانب الخلفي. من العيوب الأخرى لنموذج HTML هو أنه من الصعب (إذا لم يكن مستحيلًا) عرض عناصر النموذج بشكل ديناميكي. لا يمكن للHTML التحقق من إدخالات المستخدم.

هذا هو WTForms، مكان الراحة لقاعدة بيانات النماذج، التجميع والتحقق. يقدم توسعة Flask-WTF واجهة بسيطة لهذه مكتبة WTForms.

باستخدام Flask-WTF، يمكنك تعريف مجالات النموذج في سكربت Python واستخدام قالب HTML لعرضها. يمكنك أيضًا تطبيق التحقق على مجالات WTF.

دعنا نرى كيف يعمل هذا النموذج HTML المولد ديناميكياً.

أولاً، يجب تثبيت توسعة Flask-WTF.

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : ar.oldtoolbag.com
# Date : 2020-08-08
pip　install　flask-WTF

يحتوي الحزمة المثبتة على فئة Form، يجب استخدام هذه الفئة كأب نموذج التعريف المستخدم. يحتوي حزمة WTforms على تعريفات أنواع مختلفة من الحقول. إليك بعض الحقول القياسية لنموذج.

على سبيل المثال، يمكن تصميم نموذج يحتوي على حقل نصي كما يلي -

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : ar.oldtoolbag.com
# Date : 2020-08-08
من	flask_wtf	استيراد	Form
　من wtforms import TextField
　class ContactForm(Form):
　　　　　name = TextField("اسم الطالب")

إضافة إلى حقل name، سيتم إنشاء حقل مغطى لجلسة CSRF لتجنب هجمات forge attack.

عند الترميز، سيتم توليد سكربت HTML المماثل كما يلي.

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : ar.oldtoolbag.com
# Date : 2020-08-08
<input id = "csrf_token" name = "csrf_token" type = "hidden" />
　<label for = "name">اسم الطالب</label><br>
　<input id = "name" name = "name" type = "text" value = "" />

يُستخدم فئة النموذج المحددة من قبل المستخدم في تطبيق Flask، ويُعرض النموذج باستخدام النمذجة.

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : ar.oldtoolbag.com
# Date : 2020-08-08
من   flask   import   Flask,   render_template
　from forms import ContactForm
　app = Flask(__name__)
　app.secret_key = 'development key'
　@app.route('/contact')
　def contact():
　　　　　form = ContactForm()
　　　　　return render_template('contact.html', form = form)
　if __name__ == '__main__':
　　　　　app.run(debug = True)

تحتوي حزمة WTForms أيضًا على فئات التحقق وتكون مفيدة جدًا عند التحقق من مجالات النموذج. يظهر القائمة التالية القوائم الشائعة من فئات التحقق.

تطبيق قاعدة التحقق 'DataRequired' لحقل الاسم في استمارة الاتصال.

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : ar.oldtoolbag.com
# Date : 2020-08-08
name = TextField("اسم الطالب",[validators.Required("يرجى إدخال اسمك.")])

�数ونقوم بفحص بيانات الاستمارة باستخدام دالة validate() في كائن الاستمارة، ويتم إلقاء خطأ التحقق عند فشل الفحص. يتم إرسال رسالة الخطأ إلى النمذجة. يتم عرض رسائل الخطأ بشكليندي في نموذج HTML.

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : ar.oldtoolbag.com
# Date : 2020-08-08
{% for message in form.name.errors %}
　　　　{{ message }}
　{% endfor %}

هذا المثال يعرض المفاهيم المقدمة أعلاه. كود استمارة الاتصال كالتالي: forms.py)

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : ar.oldtoolbag.com
# Date : 2020-08-08
من	flask_wtf	استيراد	Form
　من	wtforms	استيراد	TextField, IntegerField, TextAreaField, SubmitField, RadioField, SelectField
　من	wtforms	استيراد	validators, ValidationError
　class ContactForm(Form):
　　　　　name = TextField("اسم الطالب",[validators.Required("يرجى إدخال اسمك.")])
　　　　　Gender = RadioField('الجنس', choices = [('M','ذكر'),('F','أنثى')])
　　　　　Address = TextAreaField("عنوان")
　　　　　email = TextField("البريد الإلكتروني",[validators.Required("يرجى إدخال عنوان بريدك الإلكتروني.")])
　　　　　　　validators.Email("يرجى إدخال عنوان بريدك الإلكتروني.")])
　　　　　Age = IntegerField("العمر")
　　　　　language = SelectField('اللغة', choices = [('cpp', 'C++'), ('py', 'Python')])
　　　　　submit = SubmitField("تقديم")

المؤكدinator يطبق على حقل الاسم وبريد الالكتروني. يليه سكربت تطبيق Flask: formexample.py)

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : ar.oldtoolbag.com
# Date : 2020-08-08
من	flask	استيراد	Flask, render_template, request, flash
　from forms import ContactForm
　app = Flask(__name__)
　app.secret_key = 'development key'
　@app.route('/contact', methods = ['GET', 'POST'])
　def contact():
　　　　　form = ContactForm()
　　　　　if request.method == 'POST':
　　　　　　　　if form.validate() == False:
　　　　　　　　　　　flash('All fields are required.')
　　　　　　　　　　　return render_template('contact.html', form = form)
　　　　　　　　else:
　　　　　　　　　　　return render_template('success.html')
　　　　　elif request.method == 'GET':
　　　　　　　　　　　return render_template('contact.html', form = form)
　if __name__ == '__main__':
　　　　　app.run(debug = True)

سكربت النموذج contact.html) كما يلي -

# Filename : example.py
# Copyright : 2020 By w3codebox
# Author by : ar.oldtoolbag.com
# Date : 2020-08-08
<html>
　<head>
　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
　<title>مثال Flask</title>
　</head>
　　　　<body>
　　　　　　<h2 style = "text-align: center;">مكتبة الاتصال</h2>
　　　　　　　{% for message in form.name.errors %}
　　　　　　　　　　<div>{{ message }}</div>
　　　　　　　{% endfor %}
　　　　　　　{% for message in form.email.errors %}
　　　　　　　　　　<div>{{ message }}</div>
　　　　　　　{% endfor %}
　　　　　　　<form action = "http://localhost:5000/contact" method = "post">
　　　　　　　　　　<fieldset>
　　　　　　　　　　　　　<legend>النماذج التي يجب ملئها</legend>
　　　　　　　　　　　　　{{　form.hidden_tag()　}}
　　　　　　　　　　　　　<div　style　=　font-size:20px;　font-weight:bold;　margin-left:150px;>
　　　　　　　　　　　　　　　　{{　form.name.label　}}<br>
　　　　　　　　　　　　　　　　{{　form.name　}}
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　{{　form.Gender.label　}}　{{　form.Gender　}}
　　　　　　　　　　　　　　　　{{　form.Address.label　}}<br>
　　　　　　　　　　　　　　　　{{　form.Address　}}
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　{{　form.email.label　}}<br>
　　　　　　　　　　　　　　　　{{　form.email　}}
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　{{　form.Age.label　}}<br>
　　　　　　　　　　　　　　　　{{　form.Age　}}
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　{{　form.language.label　}}<br>
　　　　　　　　　　　　　　　　{{　form.language　}}
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　{{　form.submit　}}
　　　　　　　　　　　　　</div>
　　　　　　　　　　</fieldset>
　　　　　　　</form>
　　　　</body>
　</html>

التنفيذ في محطة Python formexample.py، واستكشاف URL => http://localhost:5000/contact. نموذج الاتصال سيكون كما يلي.

إذا كان هناك معلومات خطأ، سيكون الصفحة كما يلي -

إذا لم يكن هناك أخطاء، سيتم عرض success.htmlمحتويات الصفحة، مثلما يلي -