ازرار الراديو(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>
قم بتشغيل البرنامج
[فقط الاعضاء المسجلين هم من يمكنهم رؤية الروابط. اضغط هنا للتسجيل]
واختر ماتريد ثم اضغط زر ارسال
الشرح :
لقد قمنا بصناعة قائمة تسمح بإختيار قيمة واحدة منها ثم تذهب هذه القيمة الى المتغير 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- قمت بنقل الملفين الى مجلد السيرفر ثم قم بتشغيل السكربت :
[فقط الاعضاء المسجلين هم من يمكنهم رؤية الروابط. اضغط هنا للتسجيل]
الشرح :
لقد قمنا بعمل نموذج بسكربت الـ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”
<?
قم بنقل الملفين الى مجلد السيرفر لديك
قم بتشغيل البرنامج ولاحظ النتيجه .