الدرس الرابع عشر: تصميم صفحة التوقيع في سجل الزوار (صفحة sign_book.asp

الدرس الرابع عشر: تصميم صفحة التوقيع في سجل الزوار (صفحة sign_book.asp

صفحة sign_book.asp لن يكون بها أي Code بلغة ASP . فستكون كاملة بلغة HTML ويمكنك تصميمها بالفرونت بيج (Microsoft Frontpage) بسهولة.
افتح صفحة guest.asp واحفظها باسم sign_book.asp حيث سنجري عليها التغييرات اللازمة. وإليك الـ Code لهذه الصفحة، وسنقوم بشرح أهم النقاط فيه بعد ذلك.

<%@ Language=VBScript CodePage = “1256”%>

<html dir=rtl><!–#include file=”pageheader.txt” –><p align=”center“><font face=”Simplified Arabic“>مرحبا بكم في
سجل الزوار.. وملاحظاتكم تسعدنا
</font></p>
<form method=”POST” action=”add_to_book.asp“>
<b>
الحقول التي أمامها علامة (<font color=”#C11111“>*</font>) مطلوبة.</b><p>
<b>
الاسم: <font color=”#C11111“>*</font> <input type=”text” name=”name” size=”20“></b></p>
<p><b>
البريد الالكتروني: <input type=”text” name=”email” size=”20“></b></p>
<p><b>
الموقع الشخصي (URL):
<input type=”
text” name=”website” size=”20“></b></p>
<p><b>
طريقة الاستدلال على الموقع: <select size=”1” name=”link“>
<option>
محرك بحث</option>
<option>
رابط من موقع آخر</option>
<option>
وسائل الإعلام</option>
<option>
صديق</option>
<option>
أخرى</option>
</select></b></p>
<p><b>
تقييم الموقع: <input type=”radio” value=”ممتاز” checked name=”ranking“>
ممتاز&nbsp;&nbsp;&nbsp;&nbsp; <input type=”radio” name=”ranking” value=”جيد“>
جيد&nbsp;&nbsp;&nbsp;&nbsp; <input type=”radio” name=”ranking” value=”ضعيف“>
ضعيف</b></p>
<p><b>
التعليق: <font color=”#C11111“>*</font></b></p>
<p><textarea rows=”
5” name=”comment” cols=”25“></textarea></p>
<p><input type=”
submit” value=”إضافة التوقيع” name=”B1“></p>
</form>

<!–#include file=”pagefooter.txt” –>

ستكون الصفحة بالشكل التالي:

الاسم: البريد الالكتروني:
الموقع الشخصي (URL):
طريقة الاستدلال على الموقع: محرك بحث رابط من موقع آخر وسائل الإعلام صديق أخرى
تقييم الموقع: ممتاز جيد ضعيف
التعليق:

والآن ليكم بعض الملاحظات حول هذه الصفحة:

  • طريفة إدراج الـ Forms تحدثنا عنها في الدرس الحادي عشر (تصميم صفحة البحث). وباختصار يمكنكم إدراجها من قائمة Insert وبعدها Form . وهنالك عدة أسماء وأشكال لها.

    • في: الاسم، والبريد، والموقع الشخصي، تم استخدام الحقل الذي باسم Textbox .
    • في: طريقة الاستدلال على الموقع، تم استخدام Drop-Down Box .
    • في: تقييم الموقع، تم استخدام Option Button (ثلاث مرات).
    • في: التعليق، تم استخدام Text Area .
  • يجب علينا تحديد اسم لكل حقل، وذلك بالضغط بزر الفأرة الأيمن على الحقل المراد تحديد اسمه، واختيار Form Field Properties من القائمة. وكتابة الاسم في خانة Name .
  • الأسماء للحقول هي كالتالي:
الحقل
الاسم

الاسم name البريد الالكتروني email الموقع الشخصي website طريقة الاستدلال على الموقع link التقييم (الاختيارات الثلاثة لها نفس الاسم) ranking التعليق comment

  • لكتابة الاختيارات في قائمة (طريقة الاستدلال على الموقع)، اضغط على القائمة بالزر اليمين، واختر Form Field Properties . من الشاشة التي ستظهر اضغط Add وأضف خياراتك واحدة تلو الأخرى.
  • وضعنا اسما واحدا لجميع الاختيارات في (التقييم) وللتميز بين هذه الخيارات، اضغط على الاختيار الأول بالزر اليمين، واختر Form Field Properties . ومنه حدد القيمة في خانة Value بكتابة ممتاز. وكرر العملية بالنسبة للخيارات الأخرى.
  • لتغيير كلمة Submit المكتوبة على الزر، اضغط عليه بالزر الأيمن واختر Form Field Properties . واكتب الكلمة التي تريد أن تظهر على الزر مكان Submit .

أخيرا، لإرسال هذه القيم لصفحة المعالجة والإضافة لقاعدة البيانات، اضغط على أي حقل بالزر اليمين، واختر Form Properties ، ستظهر لك الشاشة التالية: 

اختر Send to Other ثم اضغط على زر Options . وفي الشاشة التالية اكتب اسم الصفحة التي تود إرسال هذه المدخلات إليها في خانة Action (اكتب هذا الاسم add_to_book.asp) واترك الحقل Method كما هو (لا تغير كلمة POST ).
في الدرس التالي، سنصمم صفحة إضافة هذه المدخلات إلى قاعدة البيانات.

  • يمكنك مشاهدة الصفحة التي قمنا بتصميمها في هذا الدرس من خلال هذا الرابط: سجل الزوار
  • سيتم توفير الصفحات في الدرس التالي.

إعداد: خالد الحر

الكاتب ayman

ayman

مواضيع متعلقة

التعليقات مغلقة