معرفی
فرمهای وب، مانند فیلدهای متنی و قسمتهای متنی، به کاربران این امکان را میدهند که دادهها را به برنامه شما ارسال کنند، خواه این یک کشویی باشد یا یک دکمه رادیویی که برنامه از آن برای انجام یک عمل استفاده میکند، یا برای ارسال مناطق بزرگ متن به برنامه شما. پردازش یا نمایش داده شود. به عنوان مثال، در یک برنامه رسانه اجتماعی، ممکن است به کاربران کادری بدهید تا بتوانند محتوای جدیدی را به صفحات خود اضافه کنند.
Flask یک چارچوب وب سبک وزن پایتون است که ابزارها و ویژگی های مفیدی را برای ایجاد برنامه های کاربردی وب در زبان پایتون ارائه می دهد. برای رندر و اعتبارسنجی فرمهای وب به روشی ایمن و انعطافپذیر در Flask، از Flask-WTF استفاده خواهید کرد، که یک پسوند Flask است که به شما کمک میکند از کتابخانه WTForms در برنامه Flask خود استفاده کنید.
WTForms یک کتابخانه پایتون است که ارائه فرم های وب انعطاف پذیر را ارائه می دهد. می توانید از آن برای رندر فیلدهای متنی، قسمت های متنی، فیلدهای رمز عبور، دکمه های رادیویی و موارد دیگر استفاده کنید. WTForms همچنین اعتبارسنجی داده قدرتمندی را با استفاده از اعتبارسنجیهای مختلف ارائه میکند، که تأیید میکند دادههایی که کاربر ارسال میکند با معیارهای خاصی مطابقت دارد که شما تعریف میکنید. به عنوان مثال، اگر یک فیلد الزامی دارید، می توانید اطمینان حاصل کنید که داده هایی که کاربر ارسال می کند ارائه شده است یا دارای طول مشخصی است.
WTForms همچنین از یک توکن CSRF برای محافظت در برابر حملات CSRF استفاده می کند، حملاتی که به مهاجم اجازه می دهد تا اقدامات ناخواسته را روی یک برنامه وب که در آن کاربر احراز هویت شده است، انجام دهد. یک حمله موفق CSRF میتواند کاربر را مجبور به انجام درخواستهای تغییر حالت مانند انتقال وجه به حساب بانکی مهاجم در یک برنامه بانکی، تغییر آدرس ایمیل کاربر و غیره کند. اگر قربانی یک حساب کاربری مدیریتی باشد، CSRF می تواند کل برنامه وب را در معرض خطر قرار دهد.
در این آموزش، یک برنامه وب کوچک می سازید که نحوه رندر و اعتبارسنجی فرم های وب با استفاده از Flask-WTF را نشان می دهد. برنامه دارای صفحه ای برای نمایش دوره هایی است که در لیست پایتون ذخیره شده اند و صفحه فهرست دارای فرمی برای وارد کردن عنوان دوره، توضیحات، قیمت، در دسترس بودن و سطح آن (مبتدی، متوسط یا پیشرفته) خواهد بود.
پیش نیازها
- یک محیط برنامه نویسی محلی Python 3.
- درک مفاهیم پایه فلاسک، مانند مسیرها، توابع مشاهده، و الگوها.
- درک مفاهیم اولیه HTML برای آگاهی از پیشینه،
- (اختیاری) درک استفاده از فرم های وب اولیه در Flask.
مرحله 1 – نصب Flask و Flask-WTF
در این مرحله، Flask و Flask-WTF را نصب میکنید که کتابخانه WTForms را نیز به صورت خودکار نصب میکند.
با فعال شدن محیط مجازی، از pip برای نصب Flask و Flask-WTF استفاده کنید:
pip install Flask Flask-WTF
پس از اتمام نصب با موفقیت، در انتهای خروجی خطی مشابه شکل زیر مشاهده خواهید کرد:
Successfully installed Flask-2.0.2 Flask-WTF-1.0.0 Jinja2-3.0.3 MarkupSafe-2.0.1 WTForms-3.0.0 Werkzeug-2.0.2 click-8.0.3 itsdangerous-2.0.1
همانطور که می بینید، کتابخانه WTForms نیز به عنوان وابستگی بسته Flask-WTF نصب شده است. بقیه بسته ها وابسته به Flask هستند.
اکنون که بستههای پایتون مورد نیاز را نصب کردهاید، در مرحله بعد یک فرم وب راهاندازی میکنید.
مرحله 2 – تنظیم فرم ها
در این مرحله، با استفاده از فیلدها و اعتبار سنجی هایی که از کتابخانه WTForms وارد می کنید، یک فرم وب راه اندازی می کنید.
شما فیلدهای زیر را تنظیم خواهید کرد:
- عنوان: یک فیلد ورودی متن برای عنوان دوره.
- توضیحات: یک قسمت متنی برای توضیحات دوره.
- قیمت: یک فیلد عدد صحیح برای قیمت دوره.
- سطح: یک رشته رادیویی برای سطح دوره با سه گزینه: مبتدی، متوسط و پیشرفته.
- موجود: یک فیلد چک باکس که نشان می دهد که آیا دوره در حال حاضر در دسترس است یا خیر.
ابتدا یک فایل جدید به نام forms.py در پوشه flask_app خود باز کنید. این فایل دارای فرم هایی است که در برنامه شما نیاز دارید:
nano forms.py
این فایل دارای کلاسی است که فرم وب شما را نشان می دهد. واردات زیر را در بالا اضافه کنید:
برای ساخت یک فرم وب، یک زیر کلاس از کلاس پایه FlaskForm ایجاد می کنید که آن را از بسته flask_wtf وارد می کنید. همچنین باید فیلدهایی را که در فرم خود استفاده می کنید، که از بسته wtforms وارد می کنید، مشخص کنید.
شما فیلدهای زیر را از کتابخانه WTForms وارد می کنید:
- StringField: یک ورودی متن.
- TextAreaField: یک قسمت متنی.
- IntegerField: فیلدی برای اعداد صحیح.
- BooleanField: یک فیلد چک باکس.
- RadioField: فیلدی برای نمایش لیستی از دکمه های رادیویی برای انتخاب کاربر.
در خط از wtforms.validators import InputRequired، Length، اعتبارسنجیها را وارد میکنید تا در فیلدها استفاده کنید تا مطمئن شوید که کاربر دادههای معتبری را ارسال میکند. InputRequired اعتبارسنجی است که از آن برای اطمینان از ارائه ورودی استفاده می کنید، و Length برای اعتبارسنجی طول یک رشته است تا اطمینان حاصل شود که دارای حداقل تعداد کاراکتر است یا اینکه از طول خاصی تجاوز نمی کند.
بعد، کلاس زیر را بعد از دستور import اضافه کنید:
ذخیره کنید و فایل را ببندید.
در این کلاس CourseForm، شما از کلاس پایه FlaskForm که قبلا وارد کرده بودید، ارث می برید. شما با استفاده از فیلدهای فرمی که از کتابخانه WTForms وارد کرده اید، مجموعه ای از فیلدهای فرم را به عنوان متغیرهای کلاس تعریف می کنید. وقتی یک فیلد را نمونهسازی میکنید، اولین آرگومان برچسب فیلد است.
شما اعتباردهندهها را برای هر فیلد با ارسال فهرستی از اعتبارسنجیهایی که از ماژول wtforms.validators وارد میکنید، تعریف میکنید. فیلد عنوان، به عنوان مثال، دارای رشته «عنوان» به عنوان یک برچسب، و دو اعتباردهنده است:
- InputRequired: برای نشان دادن اینکه فیلد نباید خالی باشد.
- Length: دو آرگومان می گیرد. دقیقه روی 10 تنظیم شده است تا مطمئن شوید که عنوان حداقل 10 کاراکتر است و حداکثر روی 100 تنظیم شده است تا مطمئن شوید که از 100 کاراکتر تجاوز نمی کند.
فیلد ناحیه متن توضیحات دارای یک اعتبارسنجی InputRequired و یک اعتبار سنج طول با حداکثر پارامتر تنظیم شده روی 200 است، بدون مقدار برای پارامتر min، به این معنی که تنها شرط این است که از 200 کاراکتر تجاوز نکند.
به طور مشابه شما یک فیلد عدد صحیح ضروری برای قیمت دوره به نام قیمت تعریف می کنید.
فیلد سطح یک میدان رادیویی با چندین گزینه است. شما انتخاب ها را در لیست پایتون تعریف می کنید و آن را به پارامتر گزینه ها ارسال می کنید. همچنین با استفاده از اعتبارسنجی InputRequired، فیلد مورد نیاز را تعریف کنید.
فیلد موجود یک فیلد چک باکس است. شما با ارسال آن به پارامتر پیشفرض، یک مقدار «بررسی» پیشفرض تنظیم میکنید. این به این معنی است که در هنگام افزودن دوره های جدید، علامت علامت زده می شود، مگر اینکه کاربر علامت آن را بردارید، به این معنی که دوره ها به طور پیش فرض در دسترس هستند.
برای اطلاعات بیشتر در مورد نحوه استفاده از کتابخانه WTForms، به صفحه Crash Course در مستندات WTForms مراجعه کنید. برای بررسی فیلدهای بیشتر به صفحه فیلدها و برای اعتبارسنجی دادههای فرم به صفحه اعتبارسنجیها برای اعتبارسنجی بیشتر مراجعه کنید.
شما فرم وب خود را در یک فایل forms.py پیکربندی کرده اید. بعد، یک برنامه Flask ایجاد میکنید، این فرم را وارد میکنید و فیلدهای آن را در صفحه فهرست نمایش میدهید. همچنین فهرستی از دوره ها را در صفحه دیگری نمایش خواهید داد.
مرحله 3 – نمایش فرم وب و دوره ها
در این مرحله یک اپلیکیشن Flask ایجاد میکنید، فرم وب که در مرحله قبل ایجاد کردهاید را در صفحه فهرست نمایش میدهید و همچنین فهرستی از دورهها و صفحهای برای نمایش دورهها در آن ایجاد میکنید.
با فعال شدن محیط برنامه نویسی و نصب Flask، فایلی به نام app.py را برای ویرایش در دایرکتوری flask_app خود باز کنید:
nano app.py
این فایل کلاس و راهنماهای لازم را از Flask و CourseForm را از فایل forms.py وارد می کند. شما فهرستی از دوره ها را می سازید، سپس فرم را نمونه سازی می کنید و آن را به یک فایل الگو منتقل می کنید. کد زیر را به app.py اضافه کنید:
ذخیره کنید و فایل را ببندید.
در اینجا شما موارد زیر را از Flask وارد می کنید:
- کلاس Flask برای ایجاد یک نمونه برنامه Flask.
- تابع render_template() برای رندر کردن قالب ایندکس.
- تابع redirect() برای هدایت کاربر به صفحه دوره ها پس از اضافه شدن یک دوره جدید.
- تابع url_for() برای ساخت URL.
ابتدا کلاس CourseForm() را از فایل forms.py وارد می کنید، سپس یک نمونه برنامه Flask به نام app ایجاد می کنید.
شما یک پیکربندی کلید مخفی را برای WTForms تنظیم می کنید تا از آن هنگام تولید یک نشانه CSRF برای ایمن سازی فرم های وب خود استفاده کنید. کلید مخفی باید یک رشته تصادفی طولانی باشد. برای اطلاعات بیشتر در مورد نحوه به دست آوردن یک کلید مخفی، مرحله 3 نحوه استفاده از فرم های وب در یک برنامه Flask را ببینید.
سپس فهرستی از دیکشنری ها به نام courses_list را ایجاد می کنید که در حال حاضر دارای یک فرهنگ لغت با نمونه دوره ای به نام Python 101 است. در اینجا، شما از یک لیست پایتون به عنوان ذخیرهسازی داده برای اهداف نمایشی استفاده میکنید. در یک سناریوی دنیای واقعی، از پایگاه داده ای مانند SQLite استفاده خواهید کرد. نحوه استفاده از پایگاه داده SQLite در یک برنامه Flask را ببینید تا نحوه استفاده از پایگاه داده برای ذخیره داده های دوره های خود را بیاموزید.
شما با استفاده از decorator ()app.route در تابع view index() یک مسیر / اصلی ایجاد می کنید. هر دو روش GET و POST HTTP را در پارامتر متدها می پذیرد. روشهای GET برای بازیابی دادهها هستند و درخواستهای POST برای ارسال دادهها به سرور، برای مثال از طریق یک فرم وب هستند. برای اطلاعات بیشتر، نحوه استفاده از فرم های وب در یک برنامه فلاسک را ببینید.
شما کلاس CourseForm() را که فرم وب را نشان می دهد نمونه سازی می کنید و نمونه را در متغیری به نام فرم ذخیره می کنید. سپس یک فراخوانی به تابع render_template() برمیگردانید و یک فایل الگو به نام index.html و نمونه فرم را ارسال میکنید.
برای نمایش فرم وب در صفحه فهرست، ابتدا یک الگوی پایه ایجاد میکنید که دارای تمام کدهای HTML اولیه است که سایر قالبها نیز برای جلوگیری از تکرار کد استفاده میکنند. سپس فایل قالب index.html را که در تابع index() خود رندر کرده اید ایجاد می کنید. برای کسب اطلاعات بیشتر در مورد الگوها، به نحوه استفاده از الگوها در یک برنامه فلاسک مراجعه کنید.
یک پوشه templates در پوشه flask_app خود ایجاد کنید که در آن Flask الگوها را جستجو می کند، سپس یک فایل الگو به نام base.html را باز کنید، که الگوی پایه برای سایر الگوها خواهد بود:
mkdir templates
nano templates/base.html
کد زیر را در فایل base.html اضافه کنید تا الگوی پایه را با یک نوار ناوبری و یک بلوک محتوا ایجاد کنید:
این الگوی پایه دارای تمام صفحه بخاری HTML است که برای استفاده مجدد در قالب های دیگر خود نیاز دارید. بلوک عنوان برای تعیین عنوان برای هر صفحه جایگزین می شود و بلوک محتوا با محتوای هر صفحه جایگزین می شود. نوار پیمایش دارای دو پیوند است، یکی برای صفحه فهرست که در آن از تابع کمکی url_for() برای پیوند به تابع view index() استفاده می کنید، و دیگری برای صفحه About در صورتی که یکی را در برنامه خود قرار دهید.
ذخیره کنید و فایل را ببندید.
سپس یک قالب به نام index.html باز کنید. این الگوی است که در فایل app.py به آن اشاره کردید:
nano templates/index.html
این فایل دارای فرم وب است که از طریق متغیر فرم به قالب index.html ارسال کرده اید. کد زیر را به آن اضافه کنید:
ذخیره کنید و فایل را ببندید.
شما قالب پایه را گسترش می دهید و عنوانی را در تگ <h1> تنظیم می کنید. سپس فیلدهای فرم وب را در داخل تگ <form> رندر میدهید، روش آن را روی POST و عمل را روی مسیر اصلی / که صفحه فهرست است، تنظیم میکنید. ابتدا توکن CSRF را که WTForms برای محافظت از فرم شما در برابر حملات CSRF استفاده می کند با استفاده از خط {{ form.csrf_token }} رندر می کنید. این توکن با بقیه داده های فرم به سرور ارسال می شود. به خاطر داشته باشید که همیشه این نشانه را برای ایمن سازی فرم های خود رندر کنید.
شما هر فیلد را با استفاده از syntax form.field() و برچسب آن را با استفاده از syntax form.field.label رندر میدهید. می توانید آرگومان هایی را به فیلد ارسال کنید تا نحوه نمایش آن را کنترل کنید. به عنوان مثال، اندازه فیلد ورودی عنوان را در {{ form.title(size=20) }} تنظیم میکنید، و تعداد ردیفها و ستونها را برای ناحیه متن توضیحات از طریق ردیفها و ستونهای پارامترها به همان شیوه تنظیم میکنید. به طور معمول در HTML انجام می شود. می توانید از همین روش برای ارسال ویژگی های اضافی HTML به فیلدی مانند ویژگی class برای تنظیم یک کلاس CSS استفاده کنید.
خطاهای اعتبارسنجی را با استفاده از نحو if form.field.errors بررسی می کنید. اگر فیلدی دارای خطا باشد، آنها را با یک حلقه for حلقه زده و در لیستی در زیر فیلد نمایش می دهید.
در حالی که در دایرکتوری flask_app خود با محیط مجازی فعال هستید، با استفاده از متغیر محیطی FLASK_APP به Flask در مورد برنامه (در این مورد app.py) بگویید. سپس متغیر محیطی FLASK_ENV را روی توسعه تنظیم کنید تا برنامه در حالت توسعه اجرا شود و به دیباگر دسترسی پیدا کنید. برای اطلاعات بیشتر در مورد اشکال زدا Flask، به نحوه رسیدگی به خطاها در یک برنامه فلاسک مراجعه کنید. برای انجام این کار از دستورات زیر استفاده کنید (در ویندوز به جای صادرات از set استفاده کنید):
export FLASK_APP=app
export FLASK_ENV=development
بعد، برنامه را اجرا کنید:
flask run
با اجرای سرور توسعه، با استفاده از مرورگر خود از URL زیر دیدن کنید:
http://127.0.0.1:5000/
فرم وب را در صفحه فهرست نمایش داده میشوید:
سعی کنید فرم را بدون پر کردن عنوان ارسال کنید. یک پیغام خطایی خواهید دید که به شما اطلاع می دهد که عنوان مورد نیاز است. با ارسال دادههای نامعتبر (مانند عنوان کوتاه کمتر از 10 کاراکتر یا توضیحی بیش از 200 نویسه) فرم را آزمایش کنید تا پیامهای خطای دیگر را مشاهده کنید.
پر کردن فرم با داده های معتبر تا کنون هیچ کاری انجام نمی دهد زیرا کدی ندارید که ارسال فرم را مدیریت کند. بعداً کد آن را اضافه خواهید کرد.
در حال حاضر به صفحه ای نیاز دارید تا دوره هایی را که در لیست خود دارید نمایش دهد. بعداً، مدیریت دادههای فرم وب، دوره جدیدی را به لیست اضافه میکند و کاربر را به صفحه دورهها هدایت میکند تا دوره جدید اضافه شده به آن را ببیند.
سرور توسعه را در حال اجرا بگذارید و پنجره ترمینال دیگری را باز کنید.
سپس، app.py را باز کنید تا مسیر دوره ها را اضافه کنید:
nano app.py
مسیر زیر را در انتهای فایل اضافه کنید:
ذخیره کنید و فایل را ببندید.
این مسیر الگویی به نام courses.html را ارائه می کند و آن را در لیست courses_list قرار می دهد.
سپس قالب courses.html را برای نمایش دوره ها ایجاد کنید:
nano templates/courses.html
کد زیر را به آن اضافه کنید:
ذخیره کنید و فایل را ببندید.
شما یک عنوان و حلقه را از طریق آیتم های لیست courses_list تنظیم می کنید. عنوان را در تگ <h2>، توضیحات را در تگ <h4> و قیمت و سطح دوره را در تگ <p> نمایش می دهید.
شما بررسی می کنید که آیا دوره با استفاده از شرط اگر دوره[‘available’] در دسترس است یا خیر. اگر دوره در دسترس باشد، متن «در دسترس» و اگر دوره در دسترس نباشد، متن «در دسترس نیست» را نمایش میدهید.
برای رفتن به صفحه دوره ها از مرورگر خود استفاده کنید:
http://127.0.0.1:5000/courses/
صفحه ای را مشاهده می کنید که یک دوره در آن نمایش داده می شود، زیرا تا کنون فقط یک دوره در لیست دوره های خود دارید:
سپس، base.html را باز کنید تا پیوندی به صفحه دوره ها در نوار پیمایش اضافه کنید:
nano templates/base.html
آن را به شکل زیر ویرایش کنید:
ذخیره کنید و فایل را ببندید.
صفحه فهرست را بازخوانی کنید و پیوند دوره های جدید را در نوار پیمایش خواهید دید.
شما صفحاتی را که برای برنامه خود نیاز دارید ایجاد کرده اید: یک صفحه فهرست با یک فرم وب برای افزودن دوره های جدید و صفحه ای برای نمایش دوره هایی که در لیست خود دارید.
برای کاربردی کردن برنامه، باید دادههای فرم وب را زمانی که کاربر ارسال میکند، با اعتبارسنجی و افزودن آن به فهرست دورهها مدیریت کنید. در ادامه این کار را انجام خواهید داد
مرحله 4 – دسترسی به داده های فرم
در این مرحله، به دادههایی که کاربر ارسال میکند دسترسی خواهید داشت، آنها را تأیید میکنید و به لیست دورهها اضافه میکنید.
برای اضافه کردن کد برای مدیریت دادههای فرم وب در داخل تابع index() app.py را باز کنید:
nano app.py
تابع index() را به شکل زیر ویرایش کنید:
ذخیره کنید و فایل را ببندید.
در اینجا، متد ()validate_on_submit را روی شی فرم فراخوانی میکنید، که بررسی میکند که درخواست یک درخواست POST است و اعتبارسنجیهایی را که برای هر فیلد پیکربندی کردهاید اجرا میکند. اگر حداقل یکی از اعتباردهنده ها خطا را برگرداند، شرط False خواهد بود و هر خطا در زیر فیلدی که باعث آن شده است نمایش داده می شود.
اگر داده های فرم ارسالی معتبر باشد، شرط True است و کد زیر عبارت if اجرا می شود. شما یک فرهنگ لغت دوره می سازید و از روش append برای اضافه کردن دوره جدید به لیست courses_list استفاده می کنید. شما با استفاده از syntax form.field.data به مقدار هر فیلد دسترسی دارید. پس از افزودن فرهنگ لغت دوره جدید به لیست دوره ها، کاربر را به صفحه دوره ها هدایت می کنید.
با اجرای سرور توسعه، از صفحه فهرست بازدید کنید:
http://127.0.0.1:5000/
فرم را با اطلاعات معتبر پر کرده و ارسال کنید. به صفحه دوره ها هدایت می شوید و دوره جدید را در آن خواهید دید.
نتیجه
شما یک برنامه Flask ساخته اید که دارای فرم وب است که با استفاده از پسوند Flask-WTF و کتابخانه WTForms ساخته اید. این فرم دارای چندین نوع فیلد برای دریافت داده ها از کاربر، تأیید اعتبار با استفاده از اعتبار سنجی های ویژه WTForms و افزودن آن به یک فروشگاه داده است.
https://vpsgol.net/product/vps-germany/
https://vpsgol.net/product/vps-usa/
https://vpsgol.net/product/vps-france/
https://vpsgol.net/product/vps-canada/
https://vpsgol.net/product/vps-poland/
https://vpsgol.net/product/vps-netherlands/
https://vpsgol.net/product/vps-england/