النماذج

 

الدرس السابع النماذج

أولاً : ماهي النماذج ؟ وما هي فائدتها ؟

النماذج هي عبارة عن مجموعة من الحقول والاختيارات يقوم الزائر بتعبئة واختيار ما يريد منها ثم يضغط زر ارسال ( 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 .. من أسفل البرنامج يمكنك تحديد هذه الهيئة .


وأخيراً أرسل الصفحة التي بها الفورم البريدي لموقعك وقم بتجربتها …. مبروك لقد اصبح لديك فورم بريدي خاص بموقعك ومن صنعك .

الدرس السابع النماذج

أولاً : ماهي النماذج ؟ وما هي فائدتها ؟

النماذج هي عبارة عن مجموعة من الحقول والاختيارات يقوم الزائر بتعبئة واختيار ما يريد منها ثم يضغط زر ارسال ( 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 .. من أسفل البرنامج يمكنك تحديد هذه الهيئة .

وأخيراً أرسل الصفحة التي بها الفورم البريدي لموقعك وقم بتجربتها …. مبروك لقد اصبح لديك فورم بريدي خاص بموقعك ومن صنعك .

اقرأ ايضاً!

x

‎قد يُعجبك أيضاً

المجلدات

  الدرس الخامس  المجلدات إذا كنت ممن يملكون موقعاً كبيراً نسبياً على شبكة الإنترنت ، ...