تابعنا :

السبت، 16 فبراير 2013

استخدام النماذج فى php

تعليم php الجزء الخامس

النماذج  

النماذج في الويب أو صفحات الانترنت عبارة عن استمارات تقوم بتعبئتها ثم عند إرسالها لخادم الويب (السيرفر) يتلقاها برنامج يقوم بإجراء العمليات عليها مثل JavaScript  أو 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;OPTIONS:DELETE: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 مع الأحرف العربية أو اللغات الأخري غير الإنجليزية في كتابة الحرف .
 
URL Encoding 
هناك بعض  الأحرف لايستطيع المتصفح إضافتها لعنوان الصفحة  بصيغتها الحقيقية بل يستخدم لغة التشفير في التعريف عنها  وهذه جداول بالرموز الذي يستخدم المتصفح  كود بدلا من عرضها بصيغتها الحقيقية 
 
الحرف
شفرته
الحرف
شفرته
الحرف
شفرته
Tab
%09
(
%28
;
%3B
Space
%20
)
%29
< 
%3C
!
%21
+
%2B
> 
%3E
%22
،
%2C
=
%3D
#
%23
.
%2E
?
%3F
@
%40
/
%2F
%
%25
\
%5C
:
%3A
&
%26
 
لاتقلق فليس عليك أن تحفظ كل هذه العلامات وتشفيراتها بل سيقوم المتصفح بالعمليه كلها بدلا عنك .
 
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=%CC%C8%E4%C9+%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 = alaavalue= علاء checked>
 
نقوم بتحديد نوع الأداة بأنها مربع علامة في هذا الجزء 
TYPE = ”CHECKBOX”
نقوم بتحديد اسم المتغير  في هذا الجزء
NAME = “alaa”
ونقوم بتحديد  القيمه التي يتم وضعها في المتغير اذا قام المستخدم باختيار مربع العلامه في هذا الجزء : 
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-    النتيجه 
 
 
ازرار الراديو(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”
<?
قم بنقل الملفين الى مجلد السيرفر لديك
قم بتشغيل البرنامج ولاحظ النتيجه .


2 التعليقات:

غير معرف يقول...

السلام عليكم
بسم الله ما شاء الله عليك استاذ علاء
بجد تسلم ايديك شرح رائع
نتمنى المزيد
شكرا

غير معرف يقول...

السلام عليكم
اذا ممكن اشرح كيف اعمل هذا المربع الذي عن طريقه اترك تعليق وكيف يعرض التعليق في نفس الصفحه اي لا يتم الارسال
الى صفحه ثانيه

إرسال تعليق

ما هو رايكم فى المدونة ؟ او يتم الاقتراح لاضافة اشياء اخرى ؟

Related Posts Plugin for WordPress, Blogger...