الدرس الرابع:النمــــــــــاذج...

النماذج

النماذج في الويب أو صفحات الانترنت عبارة عن استمارات تقوم بتعبئتها ثم عند إرسالها لخادم الويب (السيرفر) يتلقاها برنامج يقوم بإجراء العمليات عليها مثل ********** أو ASP أو php (في حالتنا ) .

فائدة النماذج

لنقل أنك مثلاً أردت شراء كتاب من الانترنت فإنك في الواقع تحتاج إلى تعبئة استمارة ببياناتك ورقم بطاقة الائتمان وغير ذلك من المعلومات ويتم ذلك عن طريق نموذج (فورم) .

في الواقع أنت تقوم بإختيار الكتاب الذي تريد وتكتب اسمك ورقم هاتفك وصندوق بريدك (ربما) في فراغات أو عن طريق الإشارة الى مجموعة من الخيارات .

يتم تخزين هذه القيم في المتغيرات التي يتم كتابتها في الخاصيه name (نتكلم عنها في هذا الدرس) ويتم ارسالها عند ضغط زر - ارسال البيانات - (submit) الى (البرنامج ) الصفحة التي سوف تقوم بمعالجة هذه البيانات (والتي يتم تحديدها في الخاصية ACTION) وإجراء العمليات عليها مثل تخزينها مثلاً في قاعدة البيانات أو ارسالها إلى البريد الالكتروني وذلك عن طريق الـphp .

ماذا يعمل العميل في النماذج ؟

إنه باختصار يقوم بتعبئة مربعات نصوص (textBox) ويقوم بوضع علامة صح في مربعات الاختيار (check boxes) أو يقوم بالتصويت أحيانا لشي معين فيختار زر اختيار (ازرار الراديو) .

هذه الأشياء كلها يتم انشاءها بواسطة الـhtml ودرسنا لهذا اليوم يناقش كيفيه انشاءها وكيفيه التعامل والحصول على البيانات منها ، بقي علينا كبداية أن نعرف أن هذه الأدوات تنشأ في الواقع بين وسمين من وسوم لغه الـhtml وهي الوسمين

<form>

</form>

خصائص النماذج

يجمع النموذج جميع خصائص المضيف لكننا هنا سنتطرق الى اثنين منهما وهما ACTION و METHOD التي تستخدم بكثرة و مهمة لنا في دروسنا القادمة

اما (ID;ClASS;NAME) فيلزمها تعمق في HTML خاصة عندما ندخل في ACCEPT-CHAR و ENCTYPE وستكون خارج نطاق موضوعنا حالياً وقد نفصلها في دروس قادمة إن شاء الله .

ACTION

وظيفة هذه الخاصية أن تخبر السيرفر مكان الصفحة التي يقوم بارسال معلومات النموذج إليها أوعنوانها أيا كان نوعها , وطبعاً في حالتنا ستكون الصفحة الثانية هي الصفحة التي تحتوي على سكربت الـphp .

ليس مهما أن تكون الصفحة php فقد تكون html ولكنها تحتوي على كود يختص بالتعامل مع برنامج تفاعلى لصفحات الويب مثل الجافا .

ولانريد أن نخرج عن نطاق الموضوع فدعنا نعطي مثالاً على هذه الخاصية :

<FORM ACTION =”TEST.PHP”>

…..

</FORM>

METHOD

هذه الخاصية تقوم بإخبار النموذج طريقة ارسال المعلومات الى الصفحة الهدف وفي الواقع هناك طريقيتين مشهورتين ومعروفتين لارسال المعلومات هما GET وPOST .

<FORM ACTION =”test.php” METHOD = “GET”>

أو

<FORM ACTIN = “test.php” METHOD =”POST”>

ملاحظه /في الواقع يوجد اكثر من هذه الطريقيتن لارسال المعلومات وهي

(CONNECT;HEAD;OPTIONSELETE:TRACE) وغيرها ولكن لاتستخدم الا بشكل نادر .

دعنا الآن نفصل هاتين الطريقتين بشكل أوسع :

GET

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

1- كتابه عنوان الصفحه المصدر .

2- اتباعها بعلامة استفهام .

3- كتابة العناوين والقيم .

http://localhost/test.html?name=value

قد تكون النقطيتن الأخيرتين غير مفهومتين بشكل جيد بسبب أنك لم تتعامل مع النماذج من قبل .

لكن الحقيقة أن النموذج يتكون من عناصر (مربع علامة , مربع نص , زر اختيار) ولكل من هذه العناصر عنوان خاص بها (name) ولكل منها قيمه خاصه بها (value) .

وهي مشابهة للمتغيرات ويمكن أن يحتوي عنوان الصفحة على أكثر من عنوان (name)واكثر من قيمة (value) ويقوم بالتعريف عنهما باستخدام المعامل (&) .

مثال :

http://localhost/test.html?animal=cat&age=30

تسمى الإضافة التي تظهر بعد علامة الاستفهام (query String) نتيجه الاستعلام الحرفية.

العنوان دائما يكون باللغه الانجليزيه (name) ونعامله كانه اسم متغير من المفترض تعريفه في الصفحه الهدف (التي سنكتبها بالـPHP).

قد تحتوي القيم على فراغات او معاملات مثل (+،-،\،#،%)

يقوم المتصفح باستخدام لغه تشفير الصفحات URL ENCODING .

أيضا يستخدم الـURL ENCODING مع الأحرف العربية أو اللغات الأخري غير الإنجليزية في كتابة الحرف .

POST

في الواقع وظيفتها هي نفس وظيفة الـget ولكنها لاترسل المعلومات في عنوان صفحة الانترنت بل تقوم وضعها في الـbody التابع لـhttp response .

بالإضافه إلى أنه يستطيع ارسال البيانات بكمية أكبر من الـGET .

أيهما تستخدم GET أم POST ؟

قد يكون العيب في الخاصية GET عدم سرية المعلومات التي تقوم بكاتبتها ومن الممكن أن تظهر للشخص الذي يجلس الى جوارك ... خاصة عندما تريد الحفاظ على سرية معلوماتك .

أضف إلى ذلك أنها غير مفيدة في النصوص الكبيرة الحجم .

ولكنها مفيدة في أشياء كثيرة فمثلاً محركات البحث يجب أن تستخدم هذه الخاصية لكي يستطيع المستخدم أن يستخدم عنوان البحث ويحتفظ به لوقت آخر ولا يقوم من جديد بكتابة الكلمة التي يبحث عنها .

أيضا الـPOST مفيدة في إخفاء المعلومات وإحتواء كميات كبيرة من البيانات ولكن لايمكن الاحتفاظ بعنوان الصفحة .... مع ذلك فإنها أيضا ليست جيدة في الحماية بحيث أن أي هاكر خبير يمكنه الحصول على المعلومات إذا لم يكن لها تشفير معين في نقلها ..لكن اذا اردت فعلاً ان تجعلها محمية فيجب عليك استخدام اتصال محمي الى سيرفر محمي .... او مايسمونه (SCURE CONNECTION TO SCURE SERVER) .

أدوات التحكم في النماذج :

في الواقع أن أدوات التحكم عبارة عن مربعات النصوص العاديه (التي يدخل فيها المستخدم اسمه وعنوانه ) وازرار الراديو ( والتي يقوم المستخدم فيها باختيا شي معين (مثل الوجبه المفضلة لديه او المشروب المفضل اليه ) ومربعات الاختيار (التي تتيح للمستخدم أن يختار مايشتهي ويحب من الخيارات المعروضة )

وأيضا القوائم التي تساعدك على اختيار أكثر من شي أو شي واحد .

في أغلب هذه الاشياء يتم استعمال الوسم

<INPUT>

وتلخيص تفصيله كالتالي :

<INPUT TYPE= type NAME= name VALUE= value other attribute>

الشرح :

1 - TYPE= type

نحدد نوع الكائن إذا كان زر راديو أو مربع نص عادي أو مربعات الاختيار .

2 - NAME= name

تقوم فيها بإعطاء اسم لمتغير يتم حفظ القيمة فيه .

3 - VALUE= value

سيتضح وظيفته أكثر عندما ندرج عليه أمثله إذ أن عمله يختلف من أداة إلى أخرى .

تطبيقات عمليه

سنقوم في هذه التطبيقات بصنع برامج بسيطة تتكون من ملفين ، الملف الاول يحتوي على كود HTML يقوم بتكوين النموذج والملف الثاني يقوم بإستقبال النتائج وطباعتها .

مربعات النصوص (TEXT Box) :

نقوم بعمل ذلك كالتالى :

1 - قم بتشغيل محرر النصوص لديك .

2 - اكتب الكود التالي :

<html dir =”rtl”>

<FORM METHOD = “GET” ACTION = “textbox.php”>

ماهي وجبتك المفضلة في الصباح ؟

<br>

<INPUT TYPE =”text” NAME = “food” value=”جبنة ومربي”>

<br>

<INPUT TYPE= submit VALUE=”إرسال”>

<INPUT TYPE= reset VALUE=”مسح”>

</form>

</html>

3 - قم بحفظ الملف كصفحة HTML . وقم بتسميته (textbox.html) .

4 - افتح محرر النصوص إذا كنت أغلقته .

5 - اكتب الكود التالي :

<?

Echo “وجبتك المفضله والى تموت في حبها هي” . “ “ . $food ;

?>

6 - قم بحفظ الملف كـ php . وقم بتسميته textbox.php .

7 - الآن قم بأخذ الملفين وضعهما في مجلد السيرفر لديك .

8-قم بتشغيل السيرفر واكتب في مستعرض الانترنت لديك

http://localhost/textbox.html

9 - قم بكتابة وجبتك المفضلة واضغط زر إرسال .

10- ستظهر النتيجة .

لاحظ كيف ظهر العنوان :

http://localhost/textbox.php?food=%C...E6%E3%D1%C8%ED

الشرح

لقد قمنا في البداية بعمل صفحة تتكون من نص و مربع نص وزر يقوم بعملية إرسال البيانات

قمنا بصناعة بداية النموذج بواسطة الوسم <FORM> وقمنا بتحديد المكان الذي سيتم ارسال البيانات إليه بواسطة

ACTION=”textbox.php”

وقمنا بصنع مربع النص بواسطه الوسم INPUT واخترنا الـ

TYPE=”text”

كما قمنا بوضع القيمة الإفتراضية فيه بواسطة القيمة

Value= “جبنه ومربي”

وقمنا بوضع الناتج الذي يضعه المستخدم في مربع النص في المتغير food .

(لاحظ ان تسميه المتغيرات حساسه لحاله الاحرف في PHP واننا لم نقم بوضع $ في صفحه المتغير في كود الـhtml ).

وأيضا لقد قمنا بإضافه زر بواسطة

TYPE=SUBMIT

وقمنا بوضع كلمة على الزر وهي كلمة (إرسال)

VALUE = “إرسال”

أيضا قمنا بصنع زر آخر

Type =reset

وقمنا بجعل العبارة التي عليه (مسح)

Value=”مسح”

هناك نوعين من الازرار هي SUBMIT وRESET

1- الـsubmit يقوم بإرسال المعلومات .

2- الـreset يقوم بمسح البيانات في جميع الأدوات في النموذج لإعاده إدخالها من جديد .

بعد ماقمنا بادخال البيانات وضغط زر الارسال قام النموذج بارسال البيانات إلى الصفحة المحددة في الخاصية ACTION وقامت الصفحة المحددة بإستقبال النتائج الموجودة في النموذج وهي نتيجة واحدة في مربع نصوص تم حفظ قيمته في المتغير food .

وقامت بطباعتها بواسطة الدالة echo .

نظرا لاننا استخدمنا الاسلوب GET فقد تم اعطاءنا عنوان الصفحه بالاضافه الى (?) وايضا المعلومات المسجله في المتغيرات والتي تم استخدام الURL ENCODING فيها لانها تستخدم حروف عربيه .

مربعات النصوص الكبيره (text area) طلبات اكبر للطعام الشهي !

إذا كنت تريد أن تكتب رسالة متعددة الأسطر فإنك تحتاج إلى أداة تحكم تختلف تماماً عن مربع النص العادي وهي مربعات النصوص الكبيرة التي يمكنك فيها من إدخال نصوص كبيرة الحجم ومتعددة الاسطر .

تستخدم هذه الأداة وسم فتح ووسم إغلاق

<TEXTAREA>

</TEXTAREA>

ويمكنك تحديد حجمها بواسطه تحديد الصفوف بالخاصية rows والأعمدة بالخاصية cols .

تمرين عملي

1- قم بفتح محرر النصوص لديك

2- قم بكتابة الكود التالي :

<html dir=”rtl” >

<FORM ACTION = “TAREA.PHP” METHOD=”POST”>

ما هي وجبتك المفضلة ؟

<br>

<TEXTAREA NAME = “food” ROWS=”10” COLS =”50” >

جبنة

مربي

مكرونة

بيف برغر

سمبوسة

معصوب

مطبق

ماشادونا

ماخلص لو قعدت اكتب هاها

</TEXTAREA>

<br>

<INPUT TYPE = SUBMIT VALUE =”قم بإرسال الطلبات إلى الجرسون”>

</FORM>

</html>

3- قم بحفظ الملف باسم TAREA.html .

4- الآن قم بفتح ملف جديد في محرر النصوص .

5- قم بكتابة الكود التالي :

<html dir=”rtl”>

وجبتك المفضلة هي :

<br>

<?

Echo $food;

?>

</html>

6- قم بحفظ الملف باسم tarea.php

7- قم بوضعهما في مجلد السيرفر لديك .

8- قم بتشغيل البرنامج .

http://localhost/tarea.html

9- قم بضغط الزر لارسال البيانات .

10- شاهد النتيجه.

الشرح

لانضيف شيئاً على قولنا هنا سوى أننا نريدك أن تلاحظ كيف جهزنا القيمة الإفتراضية بكتابة نصوص بين وسومات الـtextarea وأيضا أننا استخدمنا الأسلوب POST في ارسال البيانات مما جعلها لاتظهر في شريط العنوان .

وأن الـNAME تحدد اسم المتغير التي ستذهب إليه القيمة واسم المتغير في الكود لايحتوى على $ لأنه كود HTML وليس PHP .

مربعات الاختيار (Check Box) اكثر من خيار في وقت واحد !

في الواقع قد نرى مربعات الاختيار في صفحات الويب عندما نريد الاشتراك في موقع معين لرؤيه محتوياته أو عندما نريد تسجيل بريد إلكتروني أو حجز مساحة عند موقع .

وفائدتها هي إتاحه فرصة للمستخدم لتحديد أنواع الأشياء التي يريد أن يشترك فيها مثلاً أو إتاحه فرصة له لقبول إتفاقية أو غير ذلك أو رفض الجميع أو قبول الجميع .

يمكننا صنع مربع العلامة بواسطه الوسم INPUT

<INPUT TYPE = ”CHECKBOX” NAME = “swalif” value= ”سوالف” checked>

نقوم بتحديد نوع الأداة بأنها مربع علامة في هذا الجزء

TYPE = ”CHECKBOX”

نقوم بتحديد اسم المتغير في هذا الجزء

NAME = “swalif”

ونقوم بتحديد القيمه التي يتم وضعها في المتغير اذا قام المستخدم باختيار مربع العلامه في هذا الجزء :

value= ”سوالف”

اذا لم تقم بوضع الخيار value فستكون القيمه الافتراضيه هي on عند اختيار المستخدم مربع العلامه وستكون فراغ اذا لم يقم المستخدم باختيار المربع.

ونقوم بوضع القيمه الإفتراضية بإضافه الكلمة checked فإذا تم وضع هذه الكلمة يكون مربع العلامة مختار تلقائياً أما إذا لم نتكبها فسيكون بدون علامة الاختيار .

Checked

تطبيق عملي (1) :

1- قم بفتح المفكرة وقم بكتابة الكود التالي :

<html dir=”rtl”>

<FORM ACTION=”CHECK.PHP” METHOD = “POST”>

مالذي تريد أن تفعله في الحياة ؟ (يمكنك اختيار أكثر من إجابه )

<br>

<INPUT TYPE=”CHECKBOX” NAME = “WIFE” CHECKED>

الذي أريد أن أفعله في الحياة هو أني أتزوج وأخلص وافتك من الزهق.

<br>

<input type= submit value = “إرسال”>

</FORM>

</html>

2- قم بحفظ الملف باسم check.html .

3- قم بفتح ملف جديد في المفكرة وقم بكتابة التالى :

<?

Echo $WIFE ;

?>

4- قم بحفظ الملف باسم check.php .

5- قم بنقل الملفين الى مجلد السيرفر .

6- اكتب في المتصفح

http://localhost/check.html

7- النتيجه

تطبيق عملي (2) :

1- افتح المفكرة واكتب الكود التالي وقم بحفظه في ملف جديد باسم check2.html

<html dir=”rtl”>

<FORM ACTION=”CHECK2.PHP” METHOD = “POST”>

مالذي تريد أن تفعله في الحياة ؟ (يمكنك إختيار أكثر من إجابة )

<br>

<INPUT TYPE=”CHECKBOX” NAME = “WIFE” value= “زوجة” CHECKED>

الذي أريد أن أفعله في الحياة هو أني أتزوج وأخلص وافتك من الزهق.

<br>

<INPUT TYPE=”CHECKBOX” NAME = “jihad” value= “جهاد” >

أبغى أروح الجهاد واخمع رؤوس الكفرة والمشركين

<br>

<INPUT TYPE=”CHECKBOX” NAME = “qran” value= “قران” CHECKED>

والله لو ألتحق بتحفيظ قرآن واحفظ القران كامل وأطبقه في عملي وحياتي حرتاح في حياتي كثير

<br>

<input type= submit value = “إرسال”>

</FORM>

</html>

2- قم بفتح ملف جديد وقم بوضع الكود التالى فيه :

<html dir = “rtl”>

<?

Echo $WIFE . “ “ . $jihad . “ “ . $qran ;

?>

</html>

3- قم بحفظه باسم check2.php

4- قم بتشغيل الملف .

5- النتيجه

تطبيق عملي (3)

1- افتح محرر النصوص واكتب الكود التالي :

<html dir=”rtl”>

<FORM ACTION=”CHECK3.PHP” METHOD = “POST”>

مالذي تريد أن تفعله في الحياة ؟ (يمكنك إختيار أكثر من إجابة )

<br>

<INPUT TYPE=”CHECKBOX” NAME = “alswalif[]” value= “زوجة” CHECKED>

الذي أريد أن أفعله في الحياة هو أني أتزوج وأخلص وافتك من الزهق.

<br>

<INPUT TYPE=”CHECKBOX” NAME = “alswalif[]” value= “جهاد” >

أبغى أروح الجهاد واخمع رؤوس الكفرة والمشركين

<br>

<INPUT TYPE=”CHECKBOX” NAME = “alswalif[]” value= “قران” CHECKED>

والله لو ألتحق بتحفيظ قرآن واحفظ القران كامل وأطبقه في عملي وحياتي حرتاح في حياتي كثير

<br>

<input type= submit value = “إرسال”>

</FORM>

</html>

2- قم بحفظه باسم check3.html وافتح محرر النصوص من جديد واكتب الكود التالي :

<html dir=”rtl”>

<?

Echo “$alswalif[0] <br>” ;

Echo “$alswalif[1] <br>” ;

Echo “$alswalif[2] <br>” ;

?>

</html>

3- قم بحفظه باسم check3.php وقم بنقلهما الى ملف السيرفر .

4- قم بتشغيل البرنامج

http://localhost/check.html

5- قم بضغط زر ارسال وانظر للنتيجه

الشرح

في الواقع لقد قمنا بتطبيق ثلاث تمارين التمرين الاول أردنا لفت النظر إلى أننا قمنا بعدم استخدام value للمتغير وتم إعطاء القيمة on عند اختيار المستخدم مربع العلامة بالإضافة أن مربع العلامة كان مختاراً بسبب وضعنا الخاصية CHECKED ولكن التمرين غير عملي وغير جيد بدون وضع قيم VALUE عند وضعنا لأكثر من مربع اختيار لذلك فقد قمنا باضافه قيم يتم وضعها في المتغيرات عند اختيار المستخدم لها كما في التمرين الثاني وأردنا لفت النظر في التمرين الى شي يسمي بالمصفوفات فإذا أردنا مثلا أن نجعل اسم المتغير متشابها واجراء عمليات تكون أسرع عليه نستخدم المصفوفات ولن نتطرق إلى المصفوفات حالياً ولكن أردنا لفت نظرك فقط وسنقوم بالتكلم عن المصفوفات بالتفصيل في الدروس القادمه باذن الله هي والتكرارات بعد التكلم عن العبارات الشرطية في الـPHP .

ازرار الراديو(RADIO BUTTONS) (اختر المشروب المفضل !)

ماهو اختيارك المفضل ؟ علما بانه لايمكنك اختيار اكثر من خيار واحد !!

في الواقع إن زر الراديو يتيح لك أن تختار شي واحد من بين عدة اختيارات ونراه كثيراً عند اتفاقيات البرامج حيث يعطيك فرصه إما بقبول الإتفاقية أو رفضها ويكون واحد من الاختيارين محددا (وهو خيار الرفض!) .

يتم استخدام ازرار الراديو باستخدام العبارة <INPUT> كالتالى :

<INPUT TYPE = ”radio” NAME = “name” value= ”value” checked>

نقوم بتحديد نوع الكائن بانه زر راديو في هذا الجزء :

TYPE = ”radio”

نقوم بتحديد اسم المتغير في هذا الجزء :

NAME = “name”

نقوم بتحديد القيمة التي ستكون في المتغير هنا :

value= ”value”

في الواقع مع ازار الراديو نقوم بجعل اسم المتغير name هو نفسه والقيم مختلفة value

لكل سؤال . وإذا لم نقم بوضع قيمة فسيقوم PHP بوضع القيمة on للمتغير .

تطبيق عملي :

1- قم بتشغيل محرر النصوص لديك واكتب الكود التالي وقم بحفظه في ملف اسمه radio.html .

<html dir=”rtl”>

<form action = radio.php method = “post”>

ماهو مشروبك المفضل ؟

<br>

<br>

<INPUT TYPE = ”radio” NAME = “mshroob” value= ”شاي” checked>

شاي

<br>

<INPUT TYPE = ”radio” NAME = “mshroob” value= ”قهوة” >

قهوة

<br>

<INPUT TYPE = submit value= ”إرسال” >

</form>

</html>

2- قم بفتح محرر النصوص واكتب الكود التالي وقم بخفظه باسم radio.php

<html dir = "rtl">

<?

echo "مشروبك المفضل هو :" . " " . $mshroob;

?>

</html>

3 - قم باختيار المشروب المفضل واختر إرسال .

الشرح :

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

<INPUT TYPE = ”radio” NAME = “mshroob” value= ”شاي” checked>

شاي

العبارة هي الملونة باللون الأحمر .

وأيضا لاحظ أننا استخدمنا متغيراً واحداً فقط لجميع الإختيارات بحيث أن جميع الأزرار قيمتها تعود إلى هذا المتغير .

القوائم (Lists Or drop down menus) اختر مواصفات زوجتك للمستقبل واسمها :

تستخدم القوائم في الـhtml بشكل مختلف قليلاً عن الأداوت السابقة إذ أننا نستخدم وسمين من وسوم لغة html وهما :

<select> لنقوم بإنشاء القائمة و <OPTION> ونستخدم الخاصية MULTIPLE إذا كنا نريد إتاحه الفرصه للمستخدم أن يختار أكثر من قيمة ونقوم بوضع القيمة التي يختارها المستخدم في متغير بواسطه الخاصية NAME أو في مصفوفة متغيرات (وسيتضح مفهوم المصفوفات لديك جيدا في درس المصفوفات باذن الله .

تطبيق عملي :

1- قم بفتح محرر النصوص لديك واكتب الكود التالي واحفظه في ملف باسم lists.html :

<html dir=”rtl”>

<form action = “lists.php” method = “post”>

ماذا تريد ان يكون اسم زوجة المستقبل(لغير المتزوجين ) ؟

<br>

<select name = “wife” >

<option> هناء </option>

<option>جمانة </option>

<option>رزان </option>

<option>سحـــر </option>

<option>سارة </option>

<option>سمية </option>

<option>روان </option>

<option>دلال </option>

<option>اسم اخر </option>

</select>

<BR>

ماذا تريد أن تكون مواصفاتها ؟

<Br>

<select name=”dis[]” multiple>

<option>جميلة</option>

<option>متدينة</option>

<option>شقراء </option>

<option>جعداء الشعر</option>

<option>سوداء </option>

<option>سمراء </option>

<option>بيضاء </option>

</select>

<br>

<INPUT TYPE=SUBMIT VALUE=”إرســال”>

</html>

2- قم بفتح ملف جديد واكتب فيه الكود التالي وقم بحفظه باسم lists.php :

<html dir=”rtl”>

<?

Echo “لقد أردت أن يكون اسم زوجتك ” . “ “ . $wife ;

Echo “<br><br>”;

Echo “ولقد أردت أن تكون مواصفاتها “;

Echo “<br><br>”;

Echo “$dis[0] <br>”;

Echo “$dis[1] <br>”;

Echo “$dis[2] <br>”;

Echo “$dis[3] <br>”;

Echo “$dis[4] <br>” ;

Echo “$dis[5] <br>”;

Echo “$dis[6] <br>”;

?>

</html>

قم بتشغيل البرنامج

http://localhost/lists.html

واختر ماتريد ثم اضغط زر ارسال

الشرح :

لقد قمنا بصناعة قائمة تسمح بإختيار قيمة واحدة منها ثم تذهب هذه القيمة الى المتغير wife وصنعنا قائمة ثانيه تسمح بإختيار أكثر من عنصر واحد وقمنا بوضع هذه القيم في مصفوفه متغيرات (سيتضح معني المصفوفات في دروس قادمه ان شاء الله ) .

الاداة الخفيه (والمعلومات السريه!) (hidden control)

هناك بعض الأوقات تحتاج فيها إلى إرسال بعض المعلومات من صفحة ويب الى صفحة ويب اخرى عن طريق النماذج وفي نفس الوقت أنت لاتريد المستخدم أن يقوم برؤية هذه المعلومات .

في الواقع هناك أداة تساعدك على اخفاء هذه المعلومات على المستخدم يسمونها بحقل النموذج المخفي أو الأداة الخفية (hidden form field or hidden control) .

هذه الأداة تلعب دوراً مختلفاً ومتميزاً عن بقية الأدوات وهي اخفاء المعلومات التي تم ادخالها كما شرحنا في السابق وهي مفيدة جدا مع النماذج المصنوع بواسطة الـPHP إذ أنها تسمح لنا أيضا بان تكون المعلومات المخفيه هي متغيرات PHP .

يتم صنع هذه الحقول المخفية كالتالى :

<INPUT TYPE=HIDDEN NAME =hidden1 VALUE=”الرسالة السرية”>

نقوم بوضع HIDDEN لكي يعرف المتصفح أن هذه المعلومات خفية (لاتظهر للمستخدم) ونضع اسما للمتغير الذي يقوم بالاحتفاظ بالمعلومات والذي يتخزن اسمه في الـNAME ونقوم بوضع المعلومات التي نريد اخفاءها في الـVALUE .

نستطيع الاستفاده أيضا منها عن طريق الـphp وذلك عن طريق كتابة كود الـHTML بواسطة الأمر echo() في الـPHP كما في المثال التالى :

<?

$msg1= “هذه العبارة لن تظهر ”;

Echo “<form>” ;

Echo “<input type=hidden name =secret value= ‘$msg1’>”;

Echo “<input type=submit>”;

Echo “</form>”;

?>

هذا الكود الذي تراه عبارة عن كود HTML تم كتابته بالـPHP عن طريق الامر echo() ولقد استطعنا تخزين قيمة متغير php ($msg) في متغير html (secret) .

تطبيق عملي :

1 - افتح محرر النصوص واكتب الكود التالي واحفظه باسم hid.php :

<html dir=”rtl”>

<head></head>

<body>

<?

$car1= “لكزس”;

$car2= “ماكسيما”;

$car3=”لاندكرزور”;

Echo “<form method =get action=’hid2.php’>”;

Echo “ماهي السيارة التي تتمنى أن تشتريها أو تحظي بها ؟”;

Echo “

<select name= ‘favcar’>

<option>$car1</option>

<option>$car2</option>

<option>$car3</option>

</select><br><br>

<input type =hidden name = hid1 value=’$car1’>

<input type =hidden name = hid2 value=’$car2’>

<input type =hidden name = hid3 value=’$car3’>

<input type = submit value=’إرسال’>

</form>”;

?>

</body>

</html>

3- افتح محرر النصوص واكتب الكود التالي واحفظه باسم hid2.php

<html dir=”rtl”>

<head></head>

<body>

<?

Echo “لقد قمنا بعرض السيارات التالية عليك :<br>”;

Echo “$hid1<br>”;

Echo “$hid2<br>”;

Echo “$hid3<br>”;

Echo “<br>ولقد قمت باختيار:<br>”;

Echo $favcar;

?>

</body>

</html>

3- قمت بنقل الملفين الى مجلد السيرفر ثم قم بتشغيل السكربت :

http://localhost/hid.php

الشرح :

لقد قمنا بعمل نموذج بسكربت الـphp لاحظ أننا استخدمنا الـ(‘) بدلاً من (“) كما كنا نعمل في الـ html وذلك لاننا قلنا سابق أن القيم الحرفية ....... (راجع درس المتغيرات) ولقد قمنا بإدراج قيم متغيرات الـphp في كود الـhtml مما يوفر علينا الكثير من إعاده الكتابة (في حال كان النص المستخدم طويلاً ) .

اقرا المثال أكثر من مر وسيتضح لك المقال أكثر باذن الله .

استخدام حقل كلمات السر (Password fields)

لكي تجعل المعلومات أكثر حماية من التعرض إلى السرقة أو غير ذلك يمكنك استخدام حقول كلمات السر الذي هو عبارة عن مربع نص بسيط يقوم بإظهار النص على شكل نجوم **** في حال كان الجهاز يستخدم على يد أكثر من شخص فان هذه الطريقة جيدة قليلاً في أن لايري شخص معلومات الآخر السرية .

في الواقع مع ذلك فإنك لاتكون قد اديت حماية إذا كان الاسلوب المستخدم في ارسال بيانات المستخدم هو الاسلوب get إلا إذا كنت تستخدم تشفير البيانات ويكون أكثر جودة اذا استخدمت الاسلوب post وايضا لن يكون محمياً من الهاكر إذا لم تكن تستخدم SSL (Secure Socket Layer) لكي تقوم بتنشيط تشفير البيانات .

تطبيق عملي

قم بفتح محرر النصوص لديك واكتب الكود التالي واحفظه باسم pass.php

<html dir=”rtl”>

<body>

<form method=post action=”pass1.php”>

اسم المستخدم

<br>

<input type="text" name ="user">

<br>

كلمة المرور

<input type="password" name ="pass">

<br>

<input type = submit value=’إرسال’>

</form>

<body>

</html>

قم بفتح محرر النصوص لديك واكتب الكود التالي واحفظه باسم pass1.php

<?

Echo “اسم المستخدم هو : ”;

Echo “<br>$user<br>”;

Echo “وكلمه المرور هي :”;

Echo “<br><br>$pass”

<?

قم بنقل الملفين الى مجلد السيرفر لديك

قم بتشغيل البرنامج ولاحظ النتيجه .

ارسال البريد الالكتروني بواسطه الـphp :

البريد الإلكتروني هو الحياة التي تنبض بها السكربتات فمثلاً هناك سكربتات ارسال بريد الى صاحب الموقع تخبره بشي معين أو ملحوظة أو غير ذلك ويمكن استخدامها في أكثر من مجال .

والدالة التي تستخدم في ذلك هي الدالة mail()

mail("$to", "$sub", "$msg”,”From:$you”);

وتقوم بوضع بريد الذي ستصله الرسالة في الخانة $to وموضوع الرسالة في الخانة $sub والرسالة في الخانة $msg وبريدك أنت أو بريد المرسل في الخانة $you .

تطبيق عملي

قم بكتابة الكود التالي واحفظه في ملف باسم mail.html

<html dir=rtl>

<head>

<title>برنامج إرسال بريد</title>

</head>

<body>

<form action="mail.php" method="post">

عنوان المرسل

<br>

<input type="text" name = "you">

<br>

عنوان المستقبل

<br>

<input type="text" name = "to">

<br>

موضوع الرسالة

<input type="text" name = "sub">

<br>

الرساله

<textarea rows=10 cols=20 name = "msg" >

</textarea>

<input type="submit" value = "إرسال البريد الالكتروني">

</form>

</body>

</html>

قم بانشاء ملف اخر وقم بكتابة الكود التالي وقم بإعطاءه الاسم mail.php .

<?

mail("$to", "$sub", "$msg”,”From:$you”);

?>

قم بوضع الملفين في مجلد السيرفر وقم بتشغيل البرنامج واملا البيانات واضغط زر الارسال وستري ان الرساله تم ارسالها بنجاح .

برامج عمليه

برنامج او سكربت ارسال بطاقات بسيط

يحتوي من ملفين الملف الأول به البطاقات وعنوان البريد الإلكتروني والملف الثاني هو الذي يقوم بعملية الإرسال

الملف الأول هو chcard.php وكوده كالتالى :

<html dir=”rtl”>

<form action =card.php method = “post”>

اختر البطاقة التي تريد ارسالها

<br>

<br>

<INPUT TYPE = ”radio” NAME = “card” value= ” http://www.khalaad.f2s.com/MADINA9_small.JPG” checked>

البطاقه الاولى

<br>

<br>

<img src="http://www.khalaad.f2s.com/MADINA9_small.JPG" width="100" height="100" alt="" border=0>

<br>

<br>

<INPUT TYPE = ”radio” NAME = “card” value= ” http://www.khalaad.f2s.com/Haram3.jpg” >

البطاقه الثانيه

<br>

<img src="http://www.khalaad.f2s.com/Haram3.jpg" width="100" height="100" alt="" border=0>

<br>

اسمك

<br>

<input type="text" name = "myname">

<br>

بريدك الالكتروني

<br>

<input type="text" name = "you">

<br>

بريد صديقك

<br>

<input type="text" name = "to">

<br>

موضوع التهنئه

<input type="text" name = "sub">

<br>

الرساله

<br><br>

<textarea rows=10 cols=20 name = "msg" >

</textarea>

<br>

<INPUT TYPE = submit value= ”إرسال البطاقة” >

</form>

</html>

الملف الثاني يقوم بعملية ارسال البطاقة وتقوم بكتابة الكود التالي واحفظه في ملف باسم card.php

<?

$message = “لقد قام $myname بارسال بطاقه اليك ” . “\n”. “وهو يقول في نص رسالته لك :\n$msg”.”وتجدها على الرابط التالى” .”\n”. “$card” .”\n”;

mail("$to", "$sub", "$message”,”From:$you”);

echo “<center>مبارك ،،،لقد تم ارسال الرساله بنجاح </center>”;

?>

ملاحظة :

الدالة \n تقوم فقط ببدا سطر جديد لاننا لانستطيع استخدام <br> في نص الرسالة

» الدرس الرابع عشر : العمليات الرياضية
» الدرس الثالث عشر : الدوال ( Function )
» الدرس السابع عشر : المتغيرات
» الدرس العشرون : طرف التخزين
» الدرس الحادي عشر : شرح عبارات اللغة ....