زیباسازی فرم ها با Bootstrap

جنگو

سلام

برای کار با کتابخانه‌های Front-End مثل Bootstrap لازم است تا از پکیچِ django-widget-tweaks در جنگو استفاده کنیم. اول باید آن را نصب کنیم:

مثل همیشه باید به لیست برنامه‌ها اضافه شود:

myproject/settings.py

حالا در برنامۀ خود از آن استفاده می کنیم:

templates/new_topic.html

در ابتدا باید آن را در برنامه لود کنیم . این کار با استفاده از تگِ قالبِ  {% load widget_tweaks %}  انجام می شود. نحوۀ بکارگیری از آن نیز به این شکل است:

تگِ render_field  بخشی از جنگو نبوده و داخل پکیجی است که آن را نصب کرده‌ایم.

برای استفاده از این تگ باید دو پارامتر را تنظیم کنیم. اولین پارامتر  مربوط به فیلدهای یک فرم و دومین پارامتر مربوط به تنظیم ویژگی‌های آن در HTML است. برخی از مثال های تگ render_field  را در زیر  می بینیم.

سپس برای استفاده از تگ‌های مربوط به اعتبارسنجی در بوت استرپ باید فایل html را ویرایش کنیم.

templates/new_topic.html

که در این حالت خروجی به شکل زیر تغییر می کند:

برای فرم بالا سه حالت در زمان rendering وجود دارد:

  • Initial state: حالت اولیه بوده و درون فرم هیچ دیتایی وجود ندارد.
  • Invalid: زمانی که داده ها معتبر نباشند از کلاس .is-invalid در CSS استفاده و پیام خطای مربوط به آن نیز در کلاس .invalid-feedback پیاده سازی شده و کادر مربوط به آن به رنگ قرمز در می‌آید.
  • Valid: در حالت معتبر بودن ورودی‌ها، از کلاس .is-valid در CSS استفاده شده و کادر مربوط به آن فیلد به رنگ سبز در می آید.

ترجمۀ اختصاصی توسط تمدن

 

مطلب بعدی:قالب‌های فرم با قابلیت استفادۀ مجدد یا Reusable Forms Templates

مطلب قبلی:پیاده‌سازی فرم ها به شیوۀ استاندارد

بدون دیدگاه

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

جنگو
ثبت نام یا Sign Up

سلام به عنوان اولین گام باید یک Url برای صفحۀ ثبت نام تعریف کنیم. myproject/urls.py from django.conf.urls import url from django.contrib import admin from accounts import views as accounts_views from boards import views urlpatterns = [ url(r’^$’, views.home, name=’home’), url(r’^signup/$’, accounts_views.signup, name=’signup’), url(r’^boards/(?P<pk>\d+)/$’, views.board_topics, name=’board_topics’), url(r’^boards/(?P<pk>\d+)/new/$’, views.new_topic, name=’new_topic’), url(r’^admin/’, admin.site.urls), …

جنگو
تنظیمات اولیه

سلام برای تمام این کارها لازم است تا برنامۀ جدیدی را ایجاد کنیم. برای انجام این کار وارد فولدری می شویم که فایل py قرار دارد و دستور زیر را وارد می کنیم: django-admin startapp accounts ساختار پروژه‌ بعد از این دستور به شکل زیر می شود. myproject/ |– myproject/ …

جنگو
شمای کلی از اعتبارسنجی برنامه در جنگو

سلام در این فصل قصد داریم به مباحث اعتبارسنجی مثل ثبت نام، ورود به سیستم، خروج از سیستم، بازیابی پسورد و تغییر پسورد بپردازیم. همینطور چگونگی تعیین سطح دسترسی برای کاربران سایت از سایر افراد مطرح می شود. تا به این لحظه یک پروژه به نام Libogram تعریف کردیم که …

هرگونه استفادۀ از این آموزش به صورت رایگان و با ارجاع به تمدن جایز است.