الصفحة الرئيسية الفهرس للدروس الدرس الأول

الدرس الثاني

الدرس الثالث

الدرس الرابع

مواقع تعلم الفرونت بيج

لأصحاب المواقع
الدرس الخامس الدرس السادس الدرس السابع الدرس الثامن

الدرس السادس: النماذج

ما هي النماذج؟ وما هي فائدتها؟
النماذج هي عبارة عن مجموعة من الحقول والاختيارات يقوم الزائر بتعبئة واختيار ما يريد منها ثم يضغط زر إرسال لتظهر النتيجة في صفحة في موقعك أو ترسل لبريدك مباشرة .  ويشترط أن يكون الموقع المستضيف يدعم لغة PHP أو CGI لتشغيل النموذج في موقعك، ويفضل دعم لغة PHP لأن أكثر النماذج تتعامل معها. ويفضل أن يكون لديك بريد بامتداد نطاق موقعك كمثل admin@alshroq1.com (الذي تحته خط هو نطاق الموقع)
 


كيفية عمل نموذج:
لعمل نموذج اذهب إلى إدراج ثم نموذج ومن ثم ستظهر قائمة  وستلاحظ أنها تحتوي على عدة مهام ولتعامل مع هذه المهام للنموذج اتجه للمثال
صور توضيحة للنماذج


مثال للنموذج:

1- يمكنك عمل النموذج داخل جدول وهذا أفضل > إدرج جدول وضع المؤشر بداخله، ويمكنك بدون جدول ووضع المؤشر حيث تريد وضع نموذجك
2-اذهب إلى إدراج > نموذج > نموذج وسيظهر مثل هذا مستطيل به حد متقطع به زران إرسال وإعادة تعيين، وهذا الحد المتقطع لا يظهر في المعاينة أو في المتصفح بل في الوضع العادي(عملت على إظهاره هنا في المتصفح للتوضيح لك فقط )


3- اضغط Enter في لوحة التحكم بشرط أن يكون المؤشر في المستطيل، ثم اذهب إلى إدراج > نموذج > مربع نص
4- يمكنك إدراج جدول ويمكن بدون جدول وسنأخذ بدون جدول كمثال
5- أكتب البيانات التالية كما بالأسفل
أ - في هذا الجدول البيانات المراد وضعها في النموذج وكيفية ذلك

البيانات

إدراج المناسب للنموذج

التعامل مع النموذج

الاسم

إدراج > نموذج > مربع نص ثم انقر عليه ضغطه مزدوجة وفي خانة الاسم اكتب تعريف باسم أخر أو اتركه كما هو ، وقبل أن تضغط OK حدد خيارات العنوان كالتالي :
أ
- إذا أردت البيانات مطلوبة وتظهر رسالة إذا نسيه الزائر اضغط زر تحقق > مطلوب
ب- يمكنك عمل أدنى حروف مطلوبة وأقصاها من خلا أدنى طول وأقصى طول
ج- يمكنك اختيار نوع البيانات فالزائر إذا كتب غير ذلك تظهر له رسالة وذلك من خلال نوع البيانات
د- اسم العرض لكتابة الرسالة التي تظهر للزائر الخاصة بهذا الحقل
موقعك إدراج > نموذج > مربع نص ثم انقر عليه ضغطه مزدوجة وفي خانة الاسم اكتب تعريف باسم أخر أو اتركه كما هو ، وسنكتب في القيمة الأولية    http://   ونخنار اتجاه النص من اليسار لليمين وقبل أن تضغط OK حدد خيارات العنوان كالتالي :
أ --- د   نفس السابق باللون الأحمر
هـ- اضغط زر التحقيق >  قيمة البيانات > يجب أن يكون الحقل > أكبر من > القيمة اكتب     http://  
قيِّم الموقع إدراج > نموذج > زر خيار والكتبة بجانبه ثم تكرار العملية نفسها
ونلاحظ أن الزر الأول محدد تلقائياً والباقي غير محدد ويمكن التحكم في ذلك من خلال ضغطه مزدوجة وتغير الحالة الأولية ولا يمكن تحديد أكثر من زر، ويمكن عدم تحديد كل الأزرار
ثم انقر عليه ضغطه مزدوجة وفي خانة الاسم اكتب تعريف باسم أخر أو اتركه كما هو ، وقبل أن تضغط OK حدد خيارات العنوان كالتالي :
ثم اضغط زر التحقق ونضغط البيانات المطلوبة وفي اسم العرض نكتب مثلا الرجاء كيف عرفت الموقع ليظهر للزائر إذا نسيه وإن كان غير إلزامي تمليته نحذف علامة صح من البيانات المطلوبة
كيف عرفت الموقع إدراج > نموذج > مربع منسدِل ثم انقر عليه ضغطه مزدوجة وفي خانة الاسم اكتب تعريف باسم أخر أو اتركه كما هو ، وقبل أن تضغط OK حدد خيارات العنوان كالتالي :
أ- اضغط على زر إضافة وفي خانة الاختيار اكتب مثلا" اختر  من القائمة " ثم اضغط OK .
ب- مرة أخرى إضافة وفي خانة الاختيار اكتب مثلا من صديق ثم اضغط OK
ج- وبنفس الطريقة أضف جميع العناوين التي تريدها
د- ثم اضغط زر التحقق ونضغط البيانات المطلوبة وعدم السماح بالخيار الأول وفي اسم العرض نكتب مثلا الرجاء كيف عرفت الموقع ليظهر للزائر إذا نسيه وإن كان غير إلزامي تمليته نحذف علامة صح من البيانات المطلوبة
ملاحظات إدراج > نموذج > ناحية النص ثم انقر عليه ضغطه مزدوجة وفي خانة الاسم اكتب تعريف باسم أخر أو اتركه كما هو ، وقبل أن تضغط OK حدد خيارات العنوان كالتالي :
أ --- د   نفس السابق باللون الأحمر
مرفقات إدراج > نموذج > إيداع الملف ثم انقر عليه ضغطه مزدوجة وفي خانة الاسم اكتب تعريف باسم أخر أو اتركه كما هو

ب - هذا هو النموذج وقد وضعت فيه البيانات (هذا النموذج لا يعمل وإنما للتوضيح وسيكون النموذج الذي تصممه يعمل إن شاء الله بإتباع جميع الخطوات صحيحة)

الاسم:

موقعك:

قيِّم الموقع:ممتاز       جيد جداً      جيد      حسن

كيف عرفت الموقع

ملاحظاتك:

مرفقات:

 


ربط النموذج بالفورم البريدي  Formmail(للمواقع التي تدعم PHP)
1- ضع المؤشر داخل النموذج واضغط بيمين الفارة واختر خصائص النموذج
2- اختر إرسال إلى غير ذلك واختر الخيار الأول

3- اضغط خيارات وأكتب form/formmail.php  في خانة الإجراءات، وفي خانة الترميز أكتب
  multipart/form-data  ، أما الطريقة فأختر الأولى وهي
POST

4- اضغط خيارا ت متقدمة > إضافة
واكتب recipient في خانة الاسم ، ثم اكتب في خانة القيمة عنوان البريد الإلكتروني مثل admin@alshroq1.com ثم اضغط موافق
5- اضغط  إضافة واكتب path_to_file  في خانة الاسم، ثم اكتب في خانة القيمة  مجلد حفظ المرفقات في موقعك /home/alshroq1/form/upload  وهنا غير اللون الأحمر لعنوان موقعك بدون كتابة com أو net
6-اضغط  إضافة واكتب redirect  في خانة الاسم، ثم اكتب thanks.htm في خانة القيمة
وهذا لإضافة رسالة أو صفحة شكر في حالة نجاح الإرسال وتُصمم بالفرونت بيج مثلها مثل الصفحات الأخرى وتكتب فيها ما تريد
7- اضغط  إضافة واكتب missing_fields_redirect  في خانة الاسم، ثم اكتب error.htm في خانة القيمة وهذا لإضافة رسالة أو صفحة الخطأ في حالة ترك بيانات مطلوبة  وتُصمم بالفرونت بيج مثلها مثل الصفحات الأخرى وتكتب فيها ما تريد
8- اضغط  إضافة واكتب  required  في خانة الاسم، ثم اكتب
في خانة القيمة أسماء الخانات التي ترى ضرورة ملأها مفصولة بفاصلة مثل name,email بحيث تظهر رسالة أو صفحة الخطأ إذا لم يكملها الزائر


طريقة تركيب النموذج في الموقع
1- لابد من تركيب برنامج ليعمل النموذج، واحصل على البرنامج بالضغط هنا .
2- فك ضغط الملف وافتح ملف formmail.php  عن طريق الدفتر المرفق مع ويندوز ( Wordpad ) وغير عنوان موقعنا
( alshroq1.com
) إلى عنوان موقعك   .. لاحظ أنه مكرر مرتين. وأحفظ الملف بصيغة Text Document
3- انشئ  مجلد في موقعك  باسم  form  ثم انشئ  بداخله مجلد باسم upload وامنح الأخير تصريح 777 ليتم حفظ المرفقات به ، وطريقة منح التصريح بأن تضغط مرة واحدة فقط بزر الفارة الأيسر على المجلد upload  ثم اضغط زر الفارة الأيمن واختر(chmod(UNIX وأكتب التصريح في خانة Numeric Valua والصور توضح ذلك وإذا كان البرنامج الذي تملكه لا يدعم التصريح فحمل برنامج FTP الذي يدعم  التصريح من موقع المصمم العربي بالضغط هنا ws-ftp-pro  


4- عن طريق برنامج FTP الآن انقل formmail.php  من جهازك إلى مجلد form بموقعك وبهيئة ASCII  ، التي تجدها في أسفل برنامج FTP
5- انقل صفحة الشكر والخطأ التي صممتها إلى  مجلد form بموقعك
5- انقل الصفحة التي صممت بها النموذج إلى موقعك


أسئلة شائعة للنموذج:

1- لماذا أفضل وضع النموذج في جدول؟
عن طريق  الجدول  يمكنك إعطاء النموذج لون مختلف وتميزه في الصفحة.
2- هل وضع خلايا في الجدول ووضع تقسيمات للخلايا  يؤثر على النموذج؟
لا، حيث يمكنك وضع الاسم وحقل النموذج التابع له في خلية، ووضع موقعك وحقل النموذج التابع له في خلية أخرى بشرط في نفس الجدول، وهكذا.
3- ما المقصود العرض بالأحرف، والترتيب، وحقل كلمة المرور، واتجاه النص أو الاتجاه؟
العرض بالأحرف: يقصد به عرض الحقل مقدر بعدد الحروف تكتبها، فإذا كتبت 20 سيكون العرض لـ 20 حرف أو رقم تقريباً.
الترتيب:  يستخدم في حالة ضغط
Tab  من قبل الزائر يتم الانتقال حسب ترقيمك للترتيب ويمكنك استخدامه في وجود بيانات مطلوبة وبيانات اختيارية وتريد من الزائر إكمال البيانات المطلوبة فقط ولا يلزم تكملة البيانات الاختيارية إلا إذا أراد.
حقل كلمة المرور: في حالة اختيار نعم ستظهر الكتابة على شكل نجوم للزائر وهذا يستخدم في كلمة السر، وفي حالة اختيار لا فيظهر ما يكتبه الزائر واضح.
اتجاه النص أو الاتجاه: وهو اتجاه سير الحروف من اليمين إلى اليسار أو العكس من اليسار إلى اليمين ولتوضيح ذلك راجع مثال للنموذج في الأعلى وانظر كيفية عمل موقعك.

4- ما المقصود بعدد الأسطر في حقل ناحية النص؟
المقصود بها ارتفاع ناحية النص وتقاس هنا بعدد الأسطر، فعند كتابة 2 يعني ظهور الكتابة في سطرين ثم يرتفع الكلام وظهور أشرطة التمرير.
 6- ما الفرق بين صفحة شكر لمن يرسل النموذج وصفحة خطأ لمن يترك خانات مطلوبة التي كتبتها في خصائص النموذج > خيارات متقدمة وبين  إذا أردت البيانات مطلوبة وتظهر رسالة إذا نسيه الزائر اضغط ضغطه مزدوجة على حقل النموذج > زر تحقق > مطلوب؟
الفرق أن صفحة الشكر والخطأ تظهر بعد ضغط الإرسال ونلاحظ أن صفحة الخطأ تسرد ما كتبته - اقصد المصمم- بدون تحديد الناقص الذي تركه الزائر بينما رسالة البيانات المطلوبة تظهر عند الضغط على إرسال ولا ترسل النموذج إلا بعد تكملة المطلوب ويخبرك بالحقل الناقص وهذا أفضل.
7- هل يمكن تغير مسمى زر( إرسال وإعادة تعيين) إلى زر( إرسال ومسح)؟
نعم، اضغط على الزر الذي تريد  تغيره ضغطه مزدوجة ثم أكتب في خانة القيمة/التسمية > المسمى الذي تريده.
8- كيف يمكنني تغير الخط، ووضع حدود لحقل النموذج، أقصد كيف يمكنني التحكم في تنسيق حقل النموذج
؟
يمكنك التحكم في تنسيق حقل النموذج بأن تضغط عليه ضغطه مزدوجة > نمط > تنسيق > اختر ما تريد تنسيقه( خط، فقرة، حدود، ترقيم، الموضع).
9- هل يوجد نموذج جاهز ويمكن أن أضيف ما أريد بنفسي؟
نعم يوجد في هذا الرابط اضغط هنا، ولكن لأبد من أن تكون لديك خلفية في عمل النماذج حتى تضيف ، وأنصحك بقراءة هذا الدرس جيداً
 ولكن بعد التحميل ماذا أفعل؟
انقل الملفات من داخل المجلد الذي حملته إلى داخل البرنامج وذلك بأن تذهب إلى المستندات >
MyWeb > الصق فيه الملفات، والآن افتحها كما تفتح أي صفحة للتعديل عليها، وعدِّل ما تريد بما يناسبك ويناسب موقعك
 

تم بحمد الله الانتهاء من الدرس السادس

 الحقوق محفوظة © ل  alshroq1.com  الشروق 2001-2003م