كيفية إنشاء نموذج اتصال HTML5 / CSS3 يستند إلى Ajax
يعد نموذج الاتصال ضروريًا لأي قاتل لأي موقع ويب ، حيث أنه يعمل كرسول ينقل آراء أو استفسارات الزوار إلى مشرف الموقع. هناك عدد لا يحصى من نماذج الاتصال على شبكة الإنترنت ولكن للأسف معظمهم لا يشرحون لك أجزاء العمل الداخلية ، لذلك هنا يأتي برنامج تعليمي مفصل ليعلمك كيفية بناء نموذج اتصال متقدم من نقطة الصفر استنادًا إلى تقنية البوب ، HTML5 و CSS3.
بالنظر إلى طبيعة نموذج الاتصال بالبريد الإلكتروني المستند إلى الويب ، يتعين علينا أيضًا الغوص في حقلين منفصلين للتطبيق ، وهما رمز الواجهة الخلفية لـ PHP لإرسال وظائف البريد الإلكتروني و jQuery لواجهة المستخدم الغنية. في النهاية ، سنترك نموذج اتصال ديناميكيًا وعمليًا بالكامل مع كتابة التخصيص اللاحق في الاعتبار.
ابدأ الآن في إنشاء نموذج الاتصال المتقدم الخاص بك!
اختصار ل:
- عرض توضيحي - احصل على معاينة لما تقوم ببنائه
- تنزيل - تنزيل جميع الملفات (php + css)
هيكلة التطبيق
للبدء ، ستحتاج إلى نوع من خادم الويب للعمل. إذا كنت تقوم بتشغيل جهاز Windows ، فمن المحتمل أن يكون WAMP هو أفضل خيار لديك. لدى مستخدمي Mac برنامج مشابه يسمى MAMP وهو سهل التثبيت.
ستقوم هذه الحزم بإعداد خادم محلي على جهازك مع وصول كامل إلى PHP. بدلاً من ذلك ، إذا كنت تمتلك مساحة خادم أو لديك حق وصول كامل للخادم إلى موقع بعيد ، فيمكنك استخدام ذلك بدلاً من ذلك. لن نحتاج إلى أي قواعد بيانات MySQL ، والتي من شأنها تبسيط الأمور قليلاً.
بمجرد إعداد الخادم الخاص بك إنشاء مجلد جديد لإيواء التطبيق. يمكنك تسمية هذا ما تريد لأنه غير ضار أو حتى متعلق بالمنتج النهائي. سيتم استخدام بنية المجلد عند الوصول إلى ملفاتك في متصفح الويب. مثال بسيط سيكون HTTP: //localhost/ajaxcontact/contact.php
دعونا نبني ملفاتنا!
سوف نعمل فقط ضمن ملفين أساسيين. سنحتاج أولا نواة .فب ملف إلى منزل ليس فقط منطق التطبيق لدينا ، ولكن أيضا علامة HTML الواجهة الأمامية. أدناه هو رمز عينة مأخوذة من ملف البداية لدينا.
HTML5 / CSS Ajax نموذج الاتصال مع مسج
للبدء ، لقد كتبنا قسم عنوان بسيط إلى وثيقتنا. وهذا يشمل عامة إعلان Doctype لـ HTML5 وبعض عناصر وثيقة HTML / XML. هذه ليست مطلوبة بالضبط ، ولكنها ستسهل عملية العرض في المتصفحات القديمة (والأحدث). كما لا يؤلمك أبدًا تقديم المزيد من المعلومات.
مزيدًا من الانخفاض ، يمكننا أن نرى خطين قبل علامة عنوان الإغلاق. الأول يشمل لدينا البرنامج النصي jQuery من مستودع Google Code عبر الإنترنت. هذا مطلوب حتى تعمل أخطاء الصفحات الديناميكية لدينا. مباشرة أدناه هذا لدينا إدراج الأساسية وثيقة المغلق يحتوي على جميع أنماط صفحتنا.
داخل نص المستند لدينا لدينا عدد قليل تحتوي على الانقسامات حجب نموذج الاتصال الرئيسي. هذه المنازل 3 عناصر الإدخال ل اسم المستخدم, عنوان بريد الكتروني, و رسالة شخصية. ترميز HTML قياسي إلى حد ما ولا ينبغي أن يحير عقول أي مطور وسيط.
تم إرسال البريد الإلكتروني الخاص بك. هتاف ابتهاج!
هنا لدينا الأساسية PHP رمز الشرطي متداخلة داخل حاويات صفحات قليلة. هذا يتحقق من القيمة المحددة للمتغير المسمى
$ emailSentوإذا كانت مساوية لـ true ، فسوف تعرض رسالة نجاح.داخل نموذج HTML الخاص بنا
ال آخر العبارة هي ما سيتم تشغيله عند تحميل الصفحة الأولى لأنه لن يكون هناك أي محتوى لإرساله في البداية. داخل هنا سنقوم بتضمين مجموعة موجزة من عناصر النموذج و زر الإرسال.
خطأ في إرسال النموذج
ربما لاحظت وجود شيء آخر كتلة مشروطة مباشرة بعد بداية النموذج. هذا يتحقق من متغير اسمه $ hasError وسيتم عرض رسالة خطأ عند التأكيد. هذه الطريقة الاحتياطية هي يستخدم فقط إذا تم تعطيل JavaScript في المتصفح وبالتالي لا يمكن أن تولد أخطاء ديناميكية.
على طول الطريق يمكن أن نجد متغيرات PHP الفردية يجري فحصها. يتم تنظيم البيانات إذا كان النموذج قد تم تقديمه بالفعل مع وجود كميات جزئية فقط من البيانات التي تم ملؤها. هذا هو نظام احتياطي آخر يعرض محتويات الحقول التي تم ملؤها بالفعل - خدعة لطيفة لتجربة المستخدم المناسبة!
مباشرة بعد الانتهاء من النموذج لدينا هو القليل وظائف مسج لقد كتبنا. سنتحدث عن هذه أولاً لأنهم التنفيذ الافتراضي على pageload. ومع ذلك ، إذا لم يقبل المتصفح JavaScript ، فيمكننا بشكل افتراضي الاعتماد على رمز PHP الخاص بنا.
فتح إلى مسج
أسهل طريقة للبدء في التحدث حول هذا الموضوع هي الغوص مباشرة. سأقوم بتفكيك الكتل الفردية بسطر حتى تتمكن من رؤية ما يبحث عنه البرنامج النصي فعليًا..
ولكن إذا كنت تضيع فقط مراجعة ملفات رمز المشروع. جميع الكتل الكاملة مكتوبة مسبقًا وموثقة جيدًا في موقع الويب jQuery. للبدء ، نفتح الكود الخاص بنا على غرار أي شيء آخر:
إذا كنت معتادا الاسترجاعات قد تلاحظ بريد() وظيفة لديه المدمج في مجموعة من المعلمات. عمليات الاستدعاء هي وظائف أصغر تسمى بناء على استجابة البيانات من وظيفة أخرى.
لذلك على سبيل المثال ، عندما لدينا jQuery.post () تعمل الدالة على إطلاق رسالة بريد إلكتروني بنجاح ، وستستدعي وظيفتها الداخلية الخاصة بها لعرض الرسوم المتحركة المنزلقة. يمكن كتابة كل هذا الكود في كتلته الخاصة ونقله إلى مكان آخر. ولكن من أجل هذا البرنامج التعليمي ، من الأسهل بكثير كتابة رد الاتصال كدالة مضمّنة.
كسر الماضي لدينا PHP
العقبة الأخيرة التي نذكرها هي منطق وراء معالج PHP لدينا. هذا هو نظام الخلفية التي سوف في الواقع استدعاء وظيفة البريد و ارسل الرسالة. يمكن العثور على جميع الشفرات المستخدمة في الأمثلة أدناه مباشرة في الجزء العلوي من الرئيسية لدينا .فب الملف ، قبل أي إخراج HTML.
هناك أيضًا بعض الأنماط الداخلية التي تنشط الصفحة. لا يوجد شيء جديد هنا على وجه التحديد ، لذلك لن ندخل في أي من التفاصيل. ومع ذلك styles.css يتم تضمين المستند في رمز المشروع ويحتوي على تقنيات CSS3 بدائية.
للبدء ، نفتح بند PHP الخاص بنا ونتحقق منه إذا تم تقديم النموذج. ال بريد متغير “قدمت” كان في الواقع حقل إدخال مخفي المضافة في نهاية شكلنا. إنها وسيلة مفيدة ل تحقق مما إذا كان المستخدم قد قدم أي شيء حتى الآن نحن لا نضيع موارد الخادم.
بعد هذا لدينا 3 منفصلة لو غير هذا بيان التحقق لمعرفة إذا تم ملء كل حقل الإدخال. لن أدرج كل جزء من المنطق هنا لأنهم جميعا متكررون للغاية في الطبيعة. ومع ذلك ، لإعطائك مثالًا موجزًا ، قمت بتضمين بند التحقق من البريد الإلكتروني أدناه:
// بحاجة إلى بريد إلكتروني صالح إذا كان (trim ($ _ POST ['email']) === ") $ emailError = 'نسيت إدخال عنوان بريدك الإلكتروني.' ؛ $ hasError = true ؛ آخر إذا (! preg_match ("/ ^" ، مقطع ، رقم :alnum: ، تقرير صحفي ، - z0 - 9 - ، - ، - ، (، - - - - - - -) - ، (-) ، (تقليم ($ _POST ['email']))) $ emailError = 'لقد أدخلت عنوان بريد إلكتروني غير صالح.' ؛ $ hasError = true؛ آخر $ email = trim ($ _ POST ['email'])؛سيقوم PHP بقص كل المسافات البيضاء من القيمة والتحقق لمعرفة ما إذا كان هناك شيء متبقٍ. إذا كان الأمر كذلك لدينا مفصلة التعبير العادي (Regex) لمعرفة ما إذا كانت سلسلة الإدخال الخاصة بالمستخدم تتطابق مع نمط البريد الإلكتروني.
أنت بالتأكيد لا تحتاج إلى فهم كيف
preg_match ()يعمل لبناء هذا السيناريو. إنها وظيفة مفيدة ل تحديد القواعد والمتطلبات لنوع البيانات الناجح, ولكن أوامر معرفة البرمجة المتقدمة لفهم حقا. في هذا السيناريو ، نضمن للمستخدم فقط إدخال بعض الأحرف المحددة ، بما في ذلك @ رمز تليها 2-4 شخصيات يمثل أ نطاق المستوى الأعلى.بعد مرور كل منطقنا ولم نرجع أية أخطاء ، فقد حان الوقت لإرسال رسالتنا! ستقوم مجموعة التعليمات البرمجية هذه بتعيين المتغيرات الفردية لتخصيص رسالة البريد الإلكتروني وإعداد بعض رؤوس البريد لهذه العملية.
// على عدم وجود أخطاء فشل دعونا البريد الإلكتروني الآن! if (! isset ($ hasError)) $ emailTo = '[email protected]'؛ $ topic = 'تم إرسال رسالة من'. $ name؛ $ sendCopy = trim ($ _ POST ['sendCopy']) ؛ $ body = "الاسم: $ name \ n \ n البريد الإلكتروني: $ email \ n \ n التعليقات: $ comments"؛ رؤوس $ = 'من:'. ' <'.$emailTo.'>'. "\ r \ n". 'الرد على: ' . $ البريد الإلكتروني؛ mail ($ emailTo، $ topic، $ body، $ headers)؛ // عيّن قيمة إكمال منطقية إلى TRUE $ emailSent = true؛إذا كنت تتساءل عن الكيفية التي سيقوم بها الكود لمعرفة عنوان بريدك الإلكتروني ، فهذا هو الجزء الذي يجب ملؤه. عنوان المتغير الأول في مجموعتنا بعنوان
$ emailToويجب أن تحتوي على أيهما عنوان البريد الإلكتروني ، الذي سوف يتلقى الرسالة.داخل لدينا
$ الجسممتغير نستفيد من\ نمحدد لإضافة أسطر جديدة في الرسالة. هذا يضيف مواضع صغيرة ل اسم المرسل, عنوان بريد الكتروني, تليها استراحة ل محتوى الرسالة. بالطبع يمكنك قضاء بعض الوقت في إعداد الشاشة ، لكن هذا الهيكل يعمل بشكل جيد.استنتاج
هذا يغلق البرنامج التعليمي لدينا للحصول على نموذج الاتصال المتقدمة. إذا كنت ترغب في تصميم العناصر الخاصة بك فيما يتعلق بالعناصر الخاصة بي ، فيمكنك الاطلاع على مثالي styles.css داخل رمز المشروع. ومع ذلك ، تم تصميم الصفحة بشكل جيد بما فيه الكفاية بحيث يمكنك تصميم مظهرك الخاص والمظهر بسهولة شديدة.
لا تتردد في تنزيل التعليمات البرمجية المصدر وفحص ما قمت به أقرب قليلاً. من الجيد اتباع برنامج تعليمي ولكن الوصول المباشر إلى مصدر المشروع يمكن أن يكون لا يقدر بثمن. لقد قمت أيضًا بتضمين ورقة أنماط موجزة لجعل التخصيصات نسيمًا ، شكرًا على رأيك!
