توزيع نموذج Django Crispy Forms إلى قسمين باستخدام Divs

يعتبر نموذج Django مثلاً قوياً في إدارة البيانات والتواصل مع المستخدمين، وقد شهدت الأدوات المساعدة مثل django-crispy-forms تطورًا ملحوظًا في تحسين واجهات المستخدم. يمكن لمطوري الويب الاستفادة من django-crispy-forms لتقسيم النماذج إلى مكونات متعددة، مما يسهل تفاعل المستخدم. في هذا المقال، سنناقش كيفية استخدام django-crispy-forms لتقسيم النموذج إلى قسمين باستخدام تخطيط يدعم التقسيم باستخدام خاصية CSS.

فهم django-crispy-forms

django-crispy-forms هو مكتبة تهدف إلى تحسين تصميم النماذج في Django. يسمح بتخصيص واجهات النموذج بسهولة ويسر. بفضل هذا الإطار، يمكنك تنظيم النموذج بحيث يتناسب مع تخطيط موقعك. العديد من المطورين يفضلون استخدامه لأنه يوفر تحكمًا مرنًا في كيفية عرض النماذج.

فوائد تقسيم النموذج إلى أقسام

تقسيم النموذج إلى قسمين divs يجلب العديد من الفوائد. أولاً، يساعد في تحسين تجربة المستخدم؛ حيث يمكن للمستخدمين التفاعل مع قسم واحد من النموذج في وقت واحد، مما يقلل من الارتباك. ثانياً، يوفر لك القدرة على تحديث قسم بناءً على الاختيار في القسم الآخر. على سبيل المثال، عند تغيير خيار معين في النموذج الأول، يمكن أن يتغير محتوى القسم الثاني وفقًا لذلك. هذه الطريقة تعزز التفاعلية وتجعل الواجهة أكثر سلاسة.

إنشاء نموذج باستخدام django-crispy-forms

لنفترض أنك ترغب في إنشاء نموذج يتكون من خيارين، أحدهما يتعلق ببيانات “pb_id” والآخر بتفاصيل “Closed_r” و”Closed_l”. يمكن تقسيم النموذج إلى قسمين باستخدام خصائص CSS. فيما يلي كيفية تنفيذ ذلك بطريقة منظمة:

“`python
from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div

class PBForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper(self)
self.layout = Layout(
Div(‘cc’, ‘pb_id’, css_id=”pbid”),
Div(‘closed_r’, ‘closed_l’, css_id=”pb-options”)
)

pb_id = forms.ChoiceField(label=”PB”, widget=forms.RadioSelect)
closed_l = forms.ChoiceField(label=”يسار مغلق”, widget=forms.RadioSelect, choices=BOOL_CHOICES)
closed_r = forms.ChoiceField(label=”Right Closed”, widget=forms.RadioSelect, choices=BOOL_CHOICES)

class Meta:
model = YourModel
fields = [‘cc’, ‘pb_id’, ‘closed_r’, ‘closed_l’] “`

تخصيص الأقسام باستخدام CSS

يمكنك استخدام خاصيات CSS لتعريف كيف سيظهر كل قسم. في هذا المثال، استخدمنا `css_id` لتحديد المعرف لكل قسم، مما يجعل من السهل تطبيق تنسيقات معينة على كل قسم بشكل منفصل. تأكد من أن لديك المعرفة المطلوبة في CSS لتعيين الأنماط داخل موقعك.

تفاعل الأقسام مع جافاسكريبت

لتعزيز التفاعل بين الأقسام، يمكنك استخدام جافاسكريبت لضبط محتويات القسم الثاني بناءً على الاختيار الناتج من القسم الأول. على سبيل المثال، إذا اختار المستخدم قيمة معينة في `pb_id`، يمكنك استخدام جافاسكريبت للتفاعل مع القسم الثاني وتحديث الخيارات المتاحة فيه.

“`javascript
document.getElementById(‘pbid’).addEventListener(‘change’, function() {
var selectedValue = this.value;
// قم بتحديث محتوى pb-options بناءً على selectedValue هنا
});
“`

التجارب العملية

تطبيق هذا النوع من التصميم يمكن أن يؤثر بشكل كبير على تجربة المستخدم. يمكنك أن تلاحظ كيف يسهل هذا الأسلوب التفاعل مع النموذج، مما يجعله أكثر فعالية وجاذبية. يعتبر تقسيم نموذج django-crispy-forms إلى قسمين علامة من علامات تصميم واجهة مستخدم حديثة.

استنتاج

باختصار، استخدام django-crispy-forms لتقسيم النموذج إلى قسمين باستخدام CSS يوفر لك المرونة والتخصيص المطلوبين لبناء واجهة مستخدم تفاعلية. هذه الطريقة ليست مفيدة فحسب، بل تعزز أيضًا من جودة تجربة المستخدم بشكل ملحوظ. إن استخدام عناصر التحكم الصحيحة يمكن أن يجعل النماذج أكثر تفاعلية وفعالية.

إذا كنت مطوراً ترغب في تحسين واجهة المستخدم الخاصة بمشاريعك، فإن اعتماد طريقة تقسيم النموذج إلى قسمين باستخدام django-crispy-forms يمكن أن يكون خيارًا مثاليًا لك.