<TABLE id=AutoNumber1 style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width="100%" border=0><TBODY><TR><TD align=middle width="100%" height=21>أولاً : ماهي النماذج ؟ وما هي فائدتها ؟
النماذج هي عبارة عن مجموعة من الحقول والاختيارات يقوم الزائر بتعبئة واختيار ما يريد منها ثم يضغط زر ارسال ( Submit ) لتظهر النتيجة في صفحة في موقعك أو ترسل لبريدك مباشرة .
</TD></TR><TR><TD align=middle width="100%" height=20><HR color=#ff9900 SIZE=1></TD></TR><TR><TD align=middle width="100%" height=20>ثانياً : معلومات حول النموذج :
-يبدأ النموذج بوسم <FORM> وينتهي بوسم </FORM> .
- يقوم بإدارة النموذج نيابة عنك برنامج مكتوب بإحدى لغات الإنترنت مثل perl ، php ، asp .
- لكي يعمل النموذج في موقعك يجب أن يعمل البرنامج الذي تربط به هذا النموذج بشكل سليم . وهذا يتطلب أن يدعم السيرفر المستضيف لموقعك تشغيل هذا البرنامج .
- قبل البدء في إنشاء نموذج في موقعك يجب أن يكون لديك معرفة ولو بسيطة بطريقة تركيب هذه البرامج ، والتي سنذكر في هذا الدرس مثال على تركيب أحدها وهو برنامج سي جي آي "Cgi" .
</TD></TR><TR><TD align=middle width="100%" height=21><HR color=#ff9900 SIZE=1></TD></TR><TR><TD align=middle width="100%" height=21>ثالثاً : التعريف بالحقول والاختيارات المستخدمة في النماذج :
لإدراج نموذج في صفحتك بما يحتويه من خانات ، اذهب إلى قائمة Insert ثم أشر على Form ، ستفتح لك قائمة بها ما يلي :
<TABLE cellSpacing=1 cellPadding=0 width="100%" border=0><TBODY><TR><TD width="28%" bgColor=#adad5a>الأمـــر
</TD><TD width="72%" bgColor=#adad5a>الشــــــرح
</TD></TR><TR><TD align=middle width="28%" bgColor=#e1e1c1>Form</TD><TD align=right width="72%" bgColor=#f5f5eb>يدرج منطقة نموذج في الصفحة تحتوي فقط على زرين ، أحدهما للارسال ( Submit ) والآخر للمسح ( Reset ) .</TD></TR><TR><TD align=middle width="28%" bgColor=#e1e1c1>On-Line Text Box</TD><TD align=right width="72%" bgColor=#f5f5eb>يدرج مربع نص بسطر واحد .</TD></TR><TR><TD align=middle width="28%" bgColor=#e1e1c1>Scrolling Text Box</TD><TD align=right width="72%" bgColor=#f5f5eb>يدرج مربع نص متعدد الأسطر ، به شريط تمرير .</TD></TR><TR><TD align=middle width="28%" bgColor=#e1e1c1>Check Box</TD><TD align=right width="72%" bgColor=#f5f5eb>يدرج مربع تدقيق يمكن للزائر اختيار أكثر من واحد منها .</TD></TR><TR><TD align=middle width="28%" bgColor=#e1e1c1>Radio Button</TD><TD align=right width="72%" bgColor=#f5f5eb>يدرج زر اختيار ، بحيث لا يستطيع الزائر أن يختار منها إلا واحد فقط .</TD></TR><TR><TD align=middle width="28%" bgColor=#e1e1c1>Drop-Down Menu</TD><TD align=right width="72%" bgColor=#f5f5eb>لإدراج قائمة منسدلة للأسفل ، وهي مناسبة للاختيارات الكثيرة .</TD></TR><TR><TD align=middle width="28%" bgColor=#e1e1c1>Push Button</TD><TD align=right width="72%" bgColor=#f5f5eb>لإدراج الأزرار ... لا تحتاجه فالأزرار ستدرج تلقائياً مع الفورم الفارغ .</TD></TR><TR><TD align=middle width="28%" bgColor=#e1e1c1>Picture</TD><TD align=right width="72%" bgColor=#f5f5eb>يدرج صورة يمكنك استخدامها بدل الزر .</TD></TR></TBODY></TABLE></TD></TR><TR><TD align=middle width="100%" height=21>
رابعاً : مثال لإنشاء فورم بريدي في موقعك :
**ماذا نعني بالفورم البريدي ؟
الفورم البريدي هو نموذج يستطيع الزائر من خلاله أن يرسل لك رسالة لبريدك مباشرة من موقعك دون الحاجة لاستخدام بريده للارسال ... وهو كما تلاحظ يسهل على الزائر عملية الارسال ويشجعه عليها .
##والآن لنبدأ معاً إنشاء هذا الفورم خطوة خطوة :
من خلال هذا الفورم يستطيع الزائر أن :
- يرسل لك اسمه الحقيقي أو المستعار .
- يدرج بريده الإلكتروني للتمكن من الرد عليه .
- يحدد عنوان لرسالته .
- يكتب رسالة لك كما يريد .
* الخطـــــــــــوات :
1- افتح قائمة Insert وأشر على Form ستفتح قائمة ، اختر منها Form .
كما تلاحظ تم إدراج مستطيل بحد أسود متقطع به زران ، أحدهما Submit للارسال والآخر Reset للمسح والكتابة من جديد .هذا هو الفورم ولكنه لا يزال فارغ .
* لتغيير Submit و Reset إلى ارسال ومسح على التوالي ، انقر نقرة مزدوجة على زر Submit واستبدل هذه الكلمة بـ ارسال ، وبنفس الطريقة غير Reset إلى مسح .
2- اترك المؤشر داخل الفورم وادرج جدول بأربعة صفوف وعمودين .
3- اكتب في العمود الأيمن بالترتيب من أعلى لأسفل :
- الاســــم :
- عنوان بريدك الإلكتروني :
- عنوان رسالتك :
- اكتب رسالتك :
4- في الخلية الأولى من العمود الأيسر أدرج مربع نص وحيد السطر كالتالي :
Insert>Form>On-Line Text Box
ثم انقر عليه نقرة مزدوجة ، وفي خانة Name اكتب name ثم اضغط OK .
5- في الخلية الثانية كما في الخلية الأولى مع تغيير الاسم في خانة Name إلى email .
6- في الخلية الثالثة أضف قائمة منسدلة بها عدة خيارات لعنوان الرسالة وذلك كالتالي :
Insert>Form>Drop-Down Menu
ثم انقر عليه نقرة مزدوجة وفي خانة Name اكتب subject ، وقبل أن تضغط OK حدد خيارات العنوان كالتالي :
أ- اضغط على زر Add وفي خانة Choice اكتب " اختر عنوان لرسالتك " ثم اضغط OK .
ب- مرة أخرى اضغط Add واكتب في خانة Choice شكر وتهنئة ثم اضغط OK .
ج- وبنفس الطريقة أضف جميع العناوين التي تريدها ، ثم اضغط OK لإغلاق مربع حوار Drop-Down Menu Properties .
7- في الخلية الرابعة أضف مربع نص نتعدد الأسطر كالتالي :
Insert>Form>Scrolling Text Box
ثم انقر عليه نقرة مزدوجة وفي خانة Name اكتب massage ثم اضغط Ok .
</TD></TR><TR><TD align=middle width="100%" height=21><HR color=#ff9900 SIZE=1></TD></TR><TR><TD align=middle width="100%" height=21>خامساً : تطوير أداء هذا النموذج ( الفورم البريدي ) :
**سنشرح هنا كيف نخصص صفحة شكر لمن يرسل بريد و صفحة خطأ لمن يترك خانات مطلوبة وذلك كالتالي :
أ- صمم صفحة شكر وليكن اسمها thanks.htm وأخرى خطأ وليكن اسمها error.htm بواسطة الفرونت بيج واكتب فيها ما تريد من عبارات وارسلها لموقعك في الشبكة .
ب- ضع الكود الخاص بكل من صفحة الشكر والخطأ والذي ستدرج فيه عنوان الصفحتين في موقعك في الشبكة وذلك بواسطة الفرونت بيج كالتالي :
1- إضافة صفحة الشكر thanks.htm :
- ضع المؤشر داخل الفورم واضغط بيمين الفأرة واختر Form Properties .
- اضغط على زر Advanced في الأسفل سيفتح لك مربع جديد .
- اضغط على زر Add واكتب redirect في خانة Name ، ثم اكتب في خانة Value عنوان صفحة الشكر في موقعك واضغط OK .
2- إضافة صفحة الخطأ error.htm :
بنفس الطريقة السابقة اضغط Add واكتب missing_fields_redirect في خانة Name ، ثم اكتب عنوان صفحة الخطأ في موقعك كالسابق .
* ولكي تظهر رسالة الخطأ عند ترك الخانات الضرورية قم بالآتي :
- ضع المؤشر داخل الفورم واضغط بيمين الفأرة واختر Form Properties .
- اضغط على زر Advanced في الأسفل سيفتح لك مربع جديد .
- اضغط على زر Add واكتب required في خانة Name ، ثم اكتب في خانة Value أسماء الخانات التي ترى ضرورة ملأها مفصولة بفاصلة مثل name,email ثم اضغط OK ثلاث مرات .
</TD></TR><TR><TD align=middle width="100%" height=21><HR color=#ff9900 SIZE=1></TD></TR><TR><TD align=middle width="100%" height=21>سادساً : تحويل الرسائل على بريدك الخاص وربط الفورم البريدي بالبرنامج:
أ- يجب كتابة عنوان البريد الذي تريد أن تستقبل عليه الرسائل وذلك باتباع التالي :
- ضع المؤشر داخل الفورم واضغط بيمين الفأرة واختر Form Properties .
- اضغط على زر Advanced في الأسفل سيفتح لك مربع جديد .
- اضغط على زر Add واكتب recipient في خانة Name ، ثم اكتب في خانة Value عنوان البريد الإلكتروني ثم اضغط OK ثلاث مرات .
ب- يجب أن تربط هذا الفورم ببرنامج كما ذكرنا في " ثانياً " والبرنامج الذي سنستخدمه هنا اسمه FormMail.cgi وسنضعه داخل مجلد cgi-bin في الموقع في الشبكة ، وسنقوم بعملية الربط كالتالي :
- ضع المؤشر داخل الفورم واضغط بيمين الفأرة واختر Form Properties .
- أشر على مربع الاختيار Send to other وتأكد من اختيار الخيار الأول في القائمة المنسدلة بجانبه .
- اضغط على زر Options في الأسفل سيفتح مربع جديد .
- اكتب في خانة Action عنوان البرنامج في موقعك ثم اضغط OK مرتين .
</TD></TR><TR><TD align=middle width="100%" height=21><HR color=#ff9900 SIZE=1></TD></TR><TR><TD align=middle width="100%" height=21>سابعاً : تركيب البرنامج في موقعك في الشبكة :
1- احصل على البرنامج بالضغط هنا
2- فك ضغط البرنامج وافتحه في الدفتر المرفق بويندوز "WordPad" .
3- غير des4arab.com إلى عنوان موقعك ( لاحظ أنها مكررة مرتين ) .
4- احفظ التغيير بهيئة Text Document .
5- أرسل البرنامج إلى مجلد cgi-bin في موقعك بواسطة برنامج FTP بهيئة ASCII .. من أسفل البرنامج يمكنك تحديد هذه الهيئة .
</TD></TR><TR><TD align=middle width="100%" height=21><HR color=#ff9900 SIZE=1></TD></TR><TR><TD align=middle width="100%" height=21>وأخيراً أرسل الصفحة التي بها الفورم البريدي لموقعك وقم بتجربتها .... مبروك لقد اصبح لديك فورم بريدي خاص بموقعك ومن صنعك
</TD></TR></TBODY></TABLE>
