درس سنتناول فيه إنشاء نموذج ملاحظات في CMF MODX Revolution باستخدام مكونات AjaxForm وFormIt.
FormIt هو مكون (مقتطف) لـ MODX Revolution مصمم لمعالجة النماذج على جانب الخادم. يمكنه التحقق من حقول النموذج (التحقق من صحتها) قبل اتخاذ إجراءات أخرى، وحماية الموقع من تلقي البريد العشوائي، وإرسال بيانات النموذج عبر البريد الإلكتروني، وتخزين نسخ من النماذج المكتملة، وإعادة التوجيه إلى صفحة أخرى (على سبيل المثال، بعد إرسال نموذج بنجاح عبر البريد الإلكتروني)، وإجراء وظيفة الرد الآلي وأكثر من ذلك بكثير.
ولكن للعمل مع FormIt عبر AJAX، تحتاج إلى استخدام مكون AjaxForm الإضافي.
قبل الانتقال إلى تطوير نموذج الملاحظات في MODX Revolution، دعونا نفكر في الخوارزمية الأساسية لتشغيله.
بعد فتح صفحة تحتوي على نموذج (مأخوذ من القطعة المحددة في معلمة &form لاستدعاء مقتطف AjaxForm عند إنشاء الصفحة على الخادم)، يتابع المستخدم ملئه. بمجرد الانتهاء، يقوم المستخدم بالنقر فوق الزر "إرسال" ومكون AjaxForm ( كود جافا سكريبت) يرسله إلى الخادم عبر AJAX. على الخادم، يقوم هذا المكون بتشغيل مقتطف FormIt ويمرر بيانات النموذج إليه. بعد معالجة هذه البيانات، يقوم مقتطف FormIt بإنشاء استجابة يتم إرسالها إلى العميل من خلال مكون AjaxForm وعرضها على الصفحة للمستخدم. يمكن أن تكون الإجابة إيجابية (وهذا يعني أنه تم التحقق من صحة النموذج، وعلى سبيل المثال، تم إرسال البيانات بنجاح عبر البريد الإلكتروني) أو سلبية (على سبيل المثال، ارتكب المستخدم بعض الأخطاء عند ملء النموذج).
لإنشاء نموذج ملاحظات في MODX Revolution، عليك اتباع الخطوات الأساسية التالية:
دعونا نلقي نظرة على الخطوتين 2 و 4 بمزيد من التفاصيل.
الخلق نماذج HTMLيمكن تقديم التعليقات عن طريق نسخ قالب tpl.AjaxForm.example. على سبيل المثال، دعنا نسمي القطعة المنسوخة tpl.AjaxForm . تحتوي هذه القطعة بالفعل على نموذج HTML جاهز يتكون من 3 حقول: الاسم والبريد الإلكتروني والرسالة. الإجراءات الرئيسية التي يجب تنفيذها باستخدام النموذج ستتلخص بشكل أساسي في إضافة فئات جديدة أو حذف الفئات الموجودة. نعني بالفئة مجموعة من العناصر المترابطة: تسمية، وعنصر نموذج (الإدخال، التحديد، منطقة النص) وعنصر الامتداد (يستخدم لعرض خطأ التحقق من الصحة).
أبرز النقاط:
تنبيه: استخدام العنصر النائب [[+fi.name]] كقيمة سمة القيمة لعنصر النموذج والعنصر النائب [[+fi.error.name]] كمحتوى عنصر الامتداد مناسب فقط للعمل الكلاسيكي مع FormIt، أي. بدون أجاكس. يتم استخدامها لملء النموذج عند إعادة تقديمه لحفظ القيم التي أدخلها المستخدم وعرض أخطاء التحقق من الصحة.
على سبيل المثال، دعونا نضيف حقل إدخال إلى نموذج HTML رقم الهاتف:
ونتيجة لذلك، ستحتوي هذه القطعة على كود HTML التالي:
نفتح القالب الذي سيستخدم المورد وندخل الكود الذي سينفذ كل هذا.
[[!أياكسفورم؟ &form=`tpl.AjaxForm` &snippet=`FormIt` &hooks=`FormItSaveForm,email` &emailSubject=`رسالة اختبارية` &emailTo=`[البريد الإلكتروني محمي] &form=`tpl.AjaxForm` &snippet=`FormIt` &hooks=`FormItSaveForm,email` &emailSubject=`رسالة اختبارية` &emailTo=``&البريد الإلكتروني من=`
` &emailTpl=`tpl.email` &validate=`name:minLength=^2^,email:email:required,message:minLength=^10^` &validationErrorMessage=`يحتوي النموذج على أخطاء!` &successMessage=`تم إرسال الرسالة بنجاح` ] ]
كل ما تبقى هو إنشاء قطعة tpl.email، والتي ستحتوي على قالب الرسالة.
من: [[+الاسم]]
البريد الإلكتروني: [[+البريد الإلكتروني]]
الهاتف: [[+هاتف]]
الرسالة: [[+رسالة]]
MODX - قطعة tpl.emailتنبيه: لعرض قيم حقول النموذج، يتم استخدام العناصر النائبة.
سنوضح النقاط الرئيسية عند العمل مع نموذج الملاحظات الموجود على الصفحة باستخدام الصور التالية.
يتمتع MODX بميزة مثيرة للاهتمام - حيث يمكنك تغيير مظهر نموذج تحرير الموارد بأي طريقة تريدها تقريبًا. علاوة على ذلك، يمكنك إنشاء نماذج مختلفة لمجموعات مستخدمين مختلفة، وحتى لموارد مختلفة. يمكنك تحديد ملفات تعريف نماذج مختلفة لمورد معين اعتمادًا على القالب أو الأصل أو الخصائص الأخرى.
ولهذا ليس علينا كتابة سطر واحد من التعليمات البرمجية!
دعونا نرى، على سبيل المثال، ما يمكنك القيام به مع النماذج:
أولا، دعونا إزالة نقاط اضافيةالقائمة العلوية في عنصر عام واحد - "المطور". للقيام بذلك، انتقل إلى قسم "النظام" -> "الإجراءات"، وقم بإنشاء عنصر قائمة جديد في الجذر واسحب جميع العناصر غير الضرورية هناك:
بعد ذلك، انتقل إلى قسم "الأمان" -> "إعدادات النموذج" وقم بإنشاء ملف تعريف جديد، على سبيل المثال، "إدارة المحتوى". ثم انقر بزر الماوس الأيمن عليها وحدد "تحرير"، وانتقل إلى علامة التبويب "مجموعات المستخدمين" وأضف مجموعة سيتم تطبيق القواعد الجديدة عليها.
بعد ذلك نقوم بإنشاء مجموعة جديدة من القواعد. هناك نوعان منها - أحدهما لشكل إنشاء المورد، والثاني - لشكل تحريره (إنشاء وتحديث، على التوالي). يمكن أن يكون هناك العديد من هذه القواعد - قاعدة واحدة على الأقل لكل مورد.
بعد إنشاء القاعدة، ستظهر لك صفحة الإعدادات - هناك ثلاث علامات تبويب: معلومات مجموعة القواعد، المناطق، الحقول الإضافية.
تسرد علامة التبويب الأولى حقول الموارد القياسية. ويمكن تعطيلها أو إعادة تسميتها. المناطق هي علامات تبويب على أحد الموارد. يمكنك إنشاء منطقة جديدة ووضع بعض معلمات التلفزيون هناك، ثم لن يضعها المورد في علامة التبويب "حقول إضافية"، ولكن في علامة تبويب جديدة - والتي تحددها. هنا يمكنك تعطيل علامات التبويب القياسية، على سبيل المثال، "مجموعات الموارد".
في علامة التبويب الثالثة، تشير إلى موقع معلمة تلفزيون معينة.
لقد قمت بإعداد ورقة غش صغيرة في المناطق القياسية:
لذلك، دعونا نزيل على الفور جميع علامات التبويب للمستخدم باستثناء العلامة الأولى. قم بإلغاء تحديد المناطق: modx-page-settings، modx-panel-resource-tv، modx-resource-access-permissions. بعد ذلك، من الحقول القياسية، سنترك فقط عنوان الصفحة والاسم المستعار. نقوم بإزالة مربعات الاختيار من الباقي. حدد اسمًا جديدًا لحقل عنوان الصفحة: "عنوان الأخبار" والاسم المستعار: "عنوان الصفحة".
بعد ذلك، انتقل إلى علامة التبويب "حقول إضافية" وأشر إلى أن معلمات التلفزيون يجب أن تكون في منطقة أو أخرى من النموذج (وفقًا لورقة الغش).
كل ما تبقى هو الإشارة إلى الموارد التي تنطبق عليها هذه القاعدة - في عنصر "القالب"، نشير إلى الموارد التي يجب تطبيق القاعدة عليها. إذا كانت القاعدة لجميع القوالب، فإننا لا نحدد أي شيء. وهناك عنصران آخران: "حقل الحد" و"قيمة الحد". يمكنك تحديد حقول أخرى هنا.
ولنشير إلى أن هذه القاعدة تنطبق على الموارد الموجودة في "الأخبار" - في عنصر "الحقل المحدود" الذي نكتبه الوالدين، وفي "القيمة المحددة" معرف مورد "الأخبار"، على سبيل المثال، 22 .
06-08-2014 22:30:00 3886 تعليق olserg و MaxWeb من أجلك
عننقوم بسرعة كبيرة بإنشاء نموذج ملاحظات على موقع ويب يقوم بتشغيل CMF MODX revo باستخدام حزمة FormIt.
لن أصف عملية تثبيت الحزم على MODX revo بالتفصيل في هذا المنشور نظرًا لبساطتها و كمية كبيرةالمواد حول هذا الموضوع على شبكة الإنترنت. اسمحوا لي فقط أن أذكركم بتسلسل الإجراءات:
<Система> - <Управление пакетами> - <Загрузить дополнения> - <Поиск>(أدخل - فورميت)
نيضعط<Загрузить>وثم<Установить>
دبعد ذلك، دعونا ننشئ قطعة جديدة ونسميها
من:
الهاتف:
رسالة:
هنا:
- اسم المرسل
- رقم هاتف المرسل
- البريد الإلكتروني للمرسل
- رسالة يكتبها المرسل على الموقع
دبعد ذلك، سنقوم بإنشاء صفحة تحتوي على رسالة حول الإرسال الناجح ونشكرك على إرسال المستخدم رسالة من خلال نموذج التعليقات.
على سبيل المثال:
شكرا لك على إرسال رسالتك!
لقد تم إرسال رسالتك بنجاح.
سيقوم متخصصنا بالرد عليك في أقرب وقت ممكن.
نوقم بإعداد إعادة توجيه لهذه الصفحة بواسطة معرفها.
لاننسى تغيير قيمة المعلمة &redirectTo=`178` في المكان الذي يتم فيه استدعاء مقتطف FormIt (في كود القطعة
إجابة
تم الرد على olserg في الجمعة 17/04/2015 - 11:07
رمز نموذج الملاحظات هذا لا يمكن أن يعمل!
هذا ليس التكيف! لقد قمت بإزالة كافة الوظائف! أعد قراءة المقال بعناية وسوف تفهم.
لقد وصفت هنا كل شيء بالتفصيل، ولكن إذا لم ينجح الأمر بعد، فيمكنك الاتصال بنا من خلال نموذج "الطلب" الموجود على هذا الموقع.
إجابة
رد دينيس يوم الاثنين 20/04/2015 - الساعة 17:56
تهيئة النافذة المنبثقة
شكرًا لك! أحسب ذلك!
هل لديك درس حول كيفية القيام بذلك بحيث تظهر رسالة الإرسال الناجح في نافذة منبثقة، وليس في صفحة جديدة، عند النقر فوق الزر "إرسال".
إجابة
تم الرد على olserg في الخميس، 23/04/2015 - 14:56
نافذة مشروطة
استخدمها كنافذة منبثقة على موقع الويب الخاص بك. هناك طرق عديدة للتنفيذ، مثال واحد:
افتح النافذة 1
حسنا، CSS لهذا الرمز.
إجابة
أجاب أليكسي يوم الأحد 31/05/2015 - الساعة 16:09
نافذة مشروطة
يحتاج للتسجيل في قالب أتش تي أم أللكن قيمة #win1 غير معروفة له؟ هل يجب أن أسأله في مكان ما؟
شكرًا لك.
إجابة
أجاب أليكسي يوم الأحد 31/05/2015 - الساعة 16:17
نافذة مشروطة
يرجى توضيح أين يجب كتابة المعلمة #win1 في مقطع النموذج بحيث يفهم الرابط في قالب html ما يجب تسميته بالضبط؟ ربما أسأت فهم شيء ما، ولكن الخط
يحتاج إلى كتابته في قالب html، ولكن قيمة win1 غير معروفة له؟ هل يجب أن أسأله في مكان ما؟
لقد تعرفت على modx لمدة 3 أيام فقط، يرجى، مثل كل ما هو موضح أعلاه، شرحه بطريقة بسيطة.
شكرًا لك.
إجابة
تم الرد على olserg في الإثنين 01/06/2015 - 12:28
رمز HTML للنافذة المشروطة
إجابة
أجاب أليكس في الثلاثاء 07/07/2015 - 10:18
لا رسالة
عملت لك، وصلت الرسالة.
لقد غيرت الحقول إلى تلك المطلوبة، وللأسف، توقفت الرسالة عن الوصول.
هنا هو الرمز
إجابة
تم الرد على ollserg في الأربعاء 08/07/2015 - 13:09
س! فورم؟ وصف النص والبريد الإلكتروني
في!FormIt؟ أنت بحاجة إلى وصف النوع - &validate=`email:email:required,text:required:stripTags`
إجابة
رد فيكتور في الإثنين 19/10/2015 - 14:03
موضوع الرسالة في نموذج التعليقات
يوم جيد.
أستخدم "&emailSubject=`Letter from the site https://site/" - لم يتم إرسال الرسالة، ويعود النموذج إلى الحالة التي يوجد بها خطأ في الحقل.
.
ومن الواضح أنه لا يفهم الترميز السيريلي، ولكن أن ننظر فيها؟
من فضلك قل لي ما يمكن أن يكون. سبب.
شكرًا لك.
إجابة
تم الرد على ollserg في الثلاثاء، 20/10/2015 - الساعة 22:47
إصدارات أباتشي وPHP
أول شيء أعتقد أنه يجب عليك الانتباه إليه في حالتك هو إصدارات Apache وPHP الموجودة على الخادم الخاص بك.
إجابة
تم الرد بواسطة AlexP في الخميس، 29/10/2015 - 14:15
عنصر نائب
تم قطع العنصر النائب..
كنت أرغب في إنشاء "اسمك" داخل الإدخال وتصميم ملف CSS ولكن لسبب ما، تم قطع الكود الموجود بعد القيمة = "" العنصر النائب = "(! LANG: اسمك)" - обрезается!}
شكرًا لك
إجابة
تم الرد على olserg في الخميس، 29/10/2015 - 20:01
يجب التحقق من جميع CSS المتصلة
يحدث قطع "العنصر النائب" على وجه التحديد بسبب التخطيط
إجابة
رد رومان يوم الجمعة 27/11/2015 - 13:43
الفورميت والمشاكل
هناك عيب كبير في Fornit أو وثائقها. لدي هنا نافذة منبثقة جميلة للتعليقات، ولكن لم يتم إنشاؤها بواسطة مستند منفصل، ولكنها تنبثق عندما مساعدة مسج! لذلك Formit لا يعمل معه.. ولا أستطيع معرفة كيفية إعداده! ربما واجهت شيئًا مشابهًا.
إجابة
تم الرد على ollserg في الثلاثاء 12/01/2015 - الساعة 23:23
استخدام AJAXFORM للتعليقات المنبثقة
FormIt لا يعرف كيفية إنشاء اياكس خارج الصندوق... إليه، أي. يجب كتابة FormIt كوظيفة إضافية... أو استخدام AjaxForm، وهو ما سيكون عليه الأمر الحل الأفضلللحصول على ردود الفعل المنبثقة.
إجابة
تم الرد على andreev888 في السبت 12/05/2015 - 22:26
شيء ما ليس على ما يرام
أيها الناس، أخبروني، يبدو أن التعليمات هي الأكثر سهولة في الوصول إليها من بين كل ما رأيته، لقد فعلت كل شيء وفقًا للتعليمات، لكنني لا أرى النموذج الموجود على الموقع على الإطلاق... لا خطاف ولا خطاف فاصلة... لا تظهر... أين يمكنني البحث؟
إجابة
تم الرد على olserg في الأحد 12/06/2015 - الساعة 23:37
ثورة MODX - مسح ذاكرة التخزين المؤقت
وإذا كان في القائمة - موقع الويب وتحديث موقع الويب (مسح ذاكرة التخزين المؤقت لموقع الويب) فهذا هو أول ما يتبادر إلى ذهنك. حسنًا، كل شيء بسيط، أعد قراءة المنشور مرة أو مرتين وسوف تنجح!!!
إجابة
رد الشر يوم الجمعة 18/12/2015 - 07:00
الغضب
لقد سئمت من نسخ نفس المقالات! ابتكر شيئًا خاصًا بك أو على الأقل قم بتغيير الكود الموجود في المقالة!
إجابة
تم الرد على olserg يوم الجمعة، 18/12/2015 - 14:28
لقد حاول القراء بالفعل تغيير رمز هذا النموذج
كانت لديهم أسئلة تتعلق بعدم قابلية تشغيل هذا الرمز.
يمكنك قراءتها في التعليقات أعلاه.
سؤال آخر هو أن الكثيرين (لا توجد إحصائيات دقيقة) يقومون بنسخ ولصق كود هذه المقالة دون تفكير على مواقعهم الإلكترونية دون قراءتها بعناية. لقد قمت عمدًا بنسخ رمز نموذج التعليقات من موقع الويب الخاص بي وأشرت في المقالة إلى الأماكن الموجودة في الكود التي يجب تغييرها إلى الأماكن الخاصة بي. وكم رسالة من المواقع أرسلت إلى بريدي الإلكتروني حتى قمت بتصحيح العنوان في الكود؟! لم يكن هناك المئات منهم، بل العشرات فقط.
إجابة
تم الرد على svbel في الخميس، 02/06/2016 - 10:11
حدث خطأ عند إرسال البريد
ماذا تعني الرسالة "حدث خطأ أثناء محاولة إرسال البريد. لا يمكن بدء وظيفة البريد."؟
إجابة
تم الرد على ollserg في الخميس، 02/06/2016 - 10:54
لا يمكن بدء وظيفة البريد.
يمكن أن يكون هناك العديد من الأسباب. انظر إلى السجلات، هل مجال البريد والبريد المحدد في FormIt موجودان ويعملان بشكل طبيعي؟
اطرح سؤالاً على دعم مزود الاستضافة الخاص بك. على العموم ليس هناك إجابة واضحة لسؤالك.
إجابة
رد دينيس يوم الأربعاء 15/06/2016 - 15:53
الرسائل لا تصل عبر البريد الإلكتروني
مساء الخير لقد قمت بعمل نموذج حسب وصفك، كل شيء يعمل، ينتقل إلى صفحة الشكر، لكن لا شيء يصل عبر البريد الإلكتروني.
موقع مستضاف. من الناحية النظرية، كل شيء طبيعي في التعليمات البرمجية
قل لي، ما هي المشكلة؟ شكرًا لك!
إجابة
تم الرد على olserg في الجمعة 17/06/2016 - 12:17
نموذج تعليقات MODX صحيح بنسبة 100%. اتبع التعليمات.
يرجى قراءة المقال بعناية. انتبه إلى القطعة
[[+fi.message]]
تحليل الكود من الأعلى إلى الأسفل: &الخطافات - تمت إضافة خطافات مختلفة هنا، بما في ذلك الخطافات المكتوبة ذاتيًا: في حالتنا، خطافان قياسيان: النطاق - حماية بسيطة ضد البريد العشوائي والبريد الإلكتروني - إلزامي لإرسال البيانات إلىصندوق البريد
. وأتحدث عن باقي الخطافات بتفاصيل كافية في الفيديو.
من: [[+الاسم]]
الهاتف: [[+هاتف]]
البريد الإلكتروني: [[+البريد الإلكتروني]]
الرسالة: [[+رسالة]]
&emailTpl - قطعة بتصميم حرف، تحتوي على الكود التالي: &emailTo - عنوان البريد الإلكتروني الذي يتم إرسال النماذج إليهفي هذه الحالة
إعداد النظام المحدد (المفتاح) ++emailsender
&emailSubject - موضوع البريد الإلكتروني الذي يتم إرساله
&التحقق من الصحة - نحدد الحقول الإلزامية لملءها وغالبًا ما نحدد الحقول للحماية من البريد العشوائي
&successMessage - رسالة بعد الإرسال الناجح
إرفاق الملفات إلى النموذج
لتتمكن من إرفاق المرفقات وإرسالها، يجب عليك الكتابة في علامة النموذج
Enctype = "متعدد الأجزاء/بيانات النموذج"
معالجة مربعات الاختيار والخيارات
فقط اكتب في مكالمات كل نموذج
&submitVar=`اسم النموذج باللغة الإنجليزية`
كل نموذج له اسمه الخاص.
أيًا كان ما تقوله، فمن المؤكد أنك ستواجه بريدًا عشوائيًا - والطريقة الأكثر فعالية لمكافحته هي أنه يمكنك أيضًا تجربتها.