أولاً
: ماهي النماذج ؟ وما هي فائدتها ؟
النماذج هي عبارة عن
مجموعة من الحقول والاختيارات يقوم
الزائر بتعبئة واختيار ما يريد منها ثم
يضغط زر ارسال ( Submit ) لتظهر النتيجة في
صفحة في موقعك أو ترسل لبريدك مباشرة .
|
|
ثانياً
: معلومات حول النموذج :
-يبدأ
النموذج بوسم <FORM>
وينتهي بوسم </FORM>
.
- يقوم
بإدارة النموذج نيابة عنك برنامج مكتوب
بإحدى لغات الإنترنت مثل perl ، php ، asp .
-
لكي يعمل النموذج في موقعك يجب أن يعمل
البرنامج الذي تربط به هذا النموذج بشكل
سليم . وهذا يتطلب أن يدعم السيرفر
المستضيف لموقعك تشغيل هذا البرنامج .
-
قبل البدء في إنشاء نموذج في موقعك يجب أن
يكون لديك معرفة ولو بسيطة بطريقة تركيب
هذه البرامج ، والتي سنذكر في هذا الدرس
مثال على تركيب أحدها وهو برنامج سي جي آي "
Cgi
"
.
|
|
ثالثاً
: التعريف بالحقول والاختيارات المستخدمة
في النماذج :
لإدراج
نموذج في صفحتك بما يحتويه من خانات ، اذهب
إلى قائمة Insert ثم أشر على Form ، ستفتح لك
قائمة بها ما يلي :
الأمـــر
|
الشــــــرح
|
Form |
يدرج
منطقة نموذج في الصفحة تحتوي فقط على
زرين ، أحدهما للارسال ( Submit ) والآخر
للمسح ( Reset ) . |
On-Line
Text Box |
يدرج
مربع نص بسطر واحد . |
Scrolling
Text Box |
يدرج
مربع نص متعدد الأسطر ، به شريط تمرير
. |
Check
Box |
يدرج
مربع تدقيق يمكن للزائر اختيار أكثر
من واحد منها . |
Radio
Button |
يدرج
زر اختيار ، بحيث لا يستطيع الزائر أن
يختار منها إلا واحد فقط . |
Drop-Down
Menu |
لإدراج
قائمة منسدلة للأسفل ، وهي مناسبة
للاختيارات الكثيرة . |
Push
Button |
لإدراج
الأزرار ... لا تحتاجه فالأزرار ستدرج
تلقائياً مع الفورم الفارغ . |
Picture |
يدرج
صورة يمكنك استخدامها بدل الزر . |
|
رابعاً : مثال لإنشاء فورم بريدي في موقعك :
**
ماذا نعني
بالفورم البريدي ؟
الفورم البريدي هو نموذج يستطيع الزائر من
خلاله أن يرسل لك رسالة لبريدك مباشرة من
موقعك دون الحاجة لاستخدام بريده للارسال
... وهو كما تلاحظ يسهل على الزائر عملية
الارسال ويشجعه عليها .
##
والآن لنبدأ
معاً إنشاء هذا الفورم خطوة خطوة :
من خلال هذا الفورم يستطيع الزائر أن :
-
يرسل لك اسمه الحقيقي أو المستعار .
-
يدرج بريده الإلكتروني للتمكن من الرد
عليه .
-
يحدد عنوان لرسالته .
- يكتب
رسالة لك كما يريد .
*
الخطـــــــــــوات :
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 .
|
|
خامساً
: تطوير أداء هذا النموذج ( الفورم البريدي
) :
**
سنشرح هنا
كيف نخصص صفحة شكر لمن يرسل بريد و صفحة
خطأ لمن يترك خانات مطلوبة وذلك كالتالي :
أ-
صمم صفحة شكر وليكن اسمها thanks.htm وأخرى خطأ
وليكن اسمها error.htm بواسطة الفرونت بيج
واكتب فيها ما تريد من عبارات وارسلها
لموقعك في الشبكة .
ب-
ضع الكود الخاص بكل من صفحة الشكر والخطأ
والذي ستدرج فيه عنوان الصفحتين في موقعك
في الشبكة وذلك بواسطة الفرونت بيج
كالتالي :
1-
إضافة صفحة الشكر thanks.htm :
-
ضع المؤشر داخل الفورم واضغط بيمين الفأرة
واختر Form Properties .
-
اضغط على زر Advanced في الأسفل سيفتح لك مربع
جديد .
-
اضغط على زر Add واكتب redirect
في خانة Name ، ثم اكتب في خانة Value عنوان
صفحة الشكر في موقعك مثل
http://www.des4arab.com/thanks.htm واضغط OK .
2-
إضافة صفحة الخطأ error.htm :
بنفس الطريقة السابقة اضغط Add واكتب missing_fields_redirect
في خانة Name ، ثم اكتب عنوان صفحة الخطأ في
موقعك كالسابق .
* ولكي تظهر
رسالة الخطأ عند ترك الخانات الضرورية قم
بالآتي :
- ضع
المؤشر داخل الفورم واضغط بيمين الفأرة
واختر Form Properties .
- اضغط على زر Advanced في
الأسفل سيفتح لك مربع جديد .
- اضغط على زر Add واكتب required
في خانة Name ، ثم اكتب في خانة Value أسماء
الخانات التي ترى ضرورة ملأها مفصولة
بفاصلة مثل name,email ثم اضغط
OK ثلاث مرات .
|
|
سادساً
: تحويل الرسائل على بريدك الخاص وربط
الفورم البريدي بالبرنامج:
أ-
يجب كتابة عنوان البريد الذي تريد أن
تستقبل عليه الرسائل وذلك باتباع التالي :
- ضع المؤشر
داخل الفورم واضغط بيمين الفأرة واختر Form
Properties .
-
اضغط على زر Advanced في الأسفل سيفتح لك مربع
جديد .
-
اضغط على زر Add واكتب recipient في خانة Name ، ثم
اكتب في خانة Value عنوان البريد الإلكتروني
مثل webmaster@des4arab.com ثم اضغط OK ثلاث مرات .
ب-
يجب أن تربط هذا الفورم ببرنامج كما ذكرنا
في " ثانياً " والبرنامج الذي
سنستخدمه هنا اسمه FormMail.cgi
وسنضعه داخل مجلد cgi-bin
في الموقع في الشبكة ، وسنقوم بعملية
الربط كالتالي :
-
ضع المؤشر داخل الفورم واضغط بيمين الفأرة
واختر Form Properties .
-
أشر على مربع الاختيار Send to other وتأكد من
اختيار الخيار الأول في القائمة المنسدلة
بجانبه .
-
اضغط على زر Options في الأسفل سيفتح مربع
جديد .
-
اكتب في خانة Action عنوان البرنامج في موقعك
مثل http://www.des4arab.com/cgi-bin/FormMail.cgi ثم اضغط OK
مرتين .
|
|
سابعاً
: تركيب البرنامج في موقعك في الشبكة :
1-
احصل على البرنامج بالضغط
هنا
2-
فك ضغط البرنامج وافتحه في الدفتر المرفق
بويندوز "WordPad"
.
3-
غير des4arab.com إلى عنوان موقعك ( لاحظ أنها
مكررة مرتين ) .
4-
احفظ التغيير بهيئة Text
Document .
5-
أرسل البرنامج إلى مجلد cgi-bin
في موقعك بواسطة برنامج
FTP بهيئة ASCII
.. من أسفل البرنامج يمكنك تحديد هذه
الهيئة .
|
|
وأخيراً
أرسل الصفحة التي بها الفورم البريدي
لموقعك وقم بتجربتها .... مبروك لقد اصبح
لديك فورم بريدي خاص بموقعك ومن صنعك .
|