نوفمبر 162011
 

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

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

في Java, C و PHP، هناك 3 انواع من أوامر التكرار وهي:

  1. while
  2. do-while
  3. for

وتستخدم بالطريقة الآتية:

1. while

أولًا: تحديد متغير بقيمة أولية ولنفترض أنه i والقيمة الأولية هي 1.

ثانيًا: كتابة الكلمة المفتاحية while وبين قوسين كتابة “expression” أو تعبير رياضي من خلاله تحدد القيمة النهائية للتكرار، لنتفرض أننا نريد إيقاف التكرار عندما تبلغ قيمة i الرقم 10 مثلًا، فيمكن كتابة التعبير (i < 11) – اي المتغير أصغر من 11 أو (i <= 10) – أي المتغير اصغر أو يساوي 10.

ثالثًا: داخل كتلة التكرار “أي بين { و }” تضع ذات المتغير بشكل متزايد؛ مثلًا: i++ أو i= i+1 أو يمكن بطرق أخرى. عدم وضع التزايد قد يسبب حمل زائد على الذاكرة بالتالي إيقاف عمل البرنامج، وذلك يعتمد على المترجم.

2. do-while

أولًا: تحديد متغير بقيمة أولية ولنفترض أنه i والقيمة الأولية هي 1.

ثانيًا: كتابة الكلمة المفتاحية do ويتلوها قوسي الكتلة “أي { و }”.

ثالثًا: داخل كتلة التكرار “أي بين { و }” تضع ذات المتغير بشكل متزايد؛ مثلًا: i++ أو i= i+1 أو يمكن بطرق أخرى. عدم وضع التزايد قد يسبب حمل زائد على الذاكرة بالتالي إيقاف عمل البرنامج، وذلك يعتمد على المترجم.

رابعًا: كتابة الكلمة المفتاحية while وبين قوسين كتابة “expression” أو تعبير رياضي من خلاله تحدد القيمة النهائية للتكرار، لنتفرض أننا نريد إيقاف التكرار عندما تبلغ قيمة i الرقم 10 مثلًا، فيمكن كتابة التعبير (i < 11) – اي المتغير أصغر من 11 أو (i <= 10) – أي المتغير اصغر أو يساوي 10.

3. for

تلخص كافة الخطوات في while في سطر واحد ليكون كالتالي:

كلمة for المفتاحية وبين القوسين بالترتيب: نكتب قيمة المتغير الأولية ونضع “؛” (فاصلة منقوطة) وبعدها التعبير الرياضي (مثلا i<=10) ونضع “؛” وأخيرًا نضع امر التزايد ليكون مثلًا i++

 

الآن سأقوم بوضع الأمثلة لتصل المعلومة بشكل أفضل، أولًا: Java:

class testloop
{
public static void main(String[]args)
{
int i;

//type 1
i=1;
System.out.print("Type 1 (while): \n");
while(i <= 10)
{
System.out.print(i + "\n");
i++;
}

//type 2
i=1;
System.out.print("\nType 2 (do-while): \n");
do
{
System.out.print(i + "\n");
i++;
}
while(i <= 10);

//type 3
System.out.print("\nType 3 (for): \n");
for(i=1;i<=10;i++)
{
System.out.print(i + "\n");
}
}
}

ثانيًا: C:

#include <stdio.h>
main()
{
int i;

//type 1
i=1;
printf("Type 1 (while): \n");
while(i<=10)
{
printf("%d \n", i);
i++;
}

//type 2
i=1;
printf("\nType 2 (do-while): \n");
do
{
printf("%d \n", i);
i++;
}
while(i<=10);

//type 3
printf("\nType 3 (for): \n");
for(i=1;i<=10;i++)
{
printf("%d \n", i);
}

}

ثالثًا: PHP:

<?PHP
// Type 1
$i=1;
echo "type 1 (while):<br />\n";
while($i <= 10)
{
echo $i."<br />";
$i++;
}

// Type 2
$i=1;
echo "type 2 (do-while):<br />\n";
do
{
echo $i."<br />";
$i++;
}
while($i <= 10);

// Type 3
echo "type 3 (for):<br />\n";
for($i=1;$i<=10;$i++)
{
echo $i."<br />";
}
?>

هل توافقني على أنها متشابهة جدًا ؟ 😀

نوفمبر 102011
 

في الدرس السابق بعنوان مقدمة حول JavaScript ، تم شرح طريقة استدعاء JavaScript في صفحات الموقع، وفي هذا الدرس سيتم شرح طريقة التعامل مع JavaScript عن طريق الأحداث “Events” وكيفية صنع دوال JavaScript لاستدعاءها في حدث معيّن.

فما هي الأحداث في HTML؟

ببساطة هي تشبه الأوامر الشرطية، لكن تعاملها يشترط على احداث معينة، مثالًا؛ عند الضغط (OnClick) على الزر أ اظهر رسالة ترحيب. مثال أدق:

<input type="submit" name="button" id="button" value="Show Welcome" onClick="window.alert('Welcome to http://www.alrashdi.co');">

وهناك العديد من الأحداث منها:

onLoad: عند تحميل المحتوى، وينحصر هذا الحدث على الوسم body في html فقط.

onfocus: عند التركيز، يستخدم في الغالب لنماذج الادخال، ويقصد به عند الضغط على الحقل أو تركيز المؤشر عليه.

onBlur: عند إلغاء التركيز، يعكس الحدث السابق، أي بعد خروج المؤشر من نموذج ادخال معيّن.

onchange: في الغالب يرافق القوائم، ويقصد به عند تغيير القيمة..

وهناك العديد من الاحداث، يمكنك اكتشافها عبر الأمثلة لاحقًا..

وللاستعداد للجزء القادم من الدرس، سأدرج بعض دوال JavaScript مع الشرح أدناه:

– اظهار رسالة للمستخدم:

window.alert('الرسالة هنا');

– نافذة التأكيد:

confirm('رسالة التأكيد هنا');

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

– نافذة ادخال نص:

prompt('السؤال هنا', 'قيمة افتراضية');

ليس من الضروري أن تضع قيمة افتراضية لنوافذ الادخال

 

كيفية عمل دالة في JavaScript:

شكل الدالة يكون:

function name()
{

}

وتستبدل name باسم الدالة، ويمكن أيضًا ادراج متغيرات في الدالة، مثال:

function name(var1, var2)
{

}

أي أن الملخص في تكوين الدالة هو الكلمة المفتاحية function يتلوها اسم الدالة وقوسين بهما المتغيرات إن وجدت، وقوسين معكوفين بينها تضع محتوى الدالة 🙂

وسنقوم الآن بصنع دالة لعرض رسالة ترحيب:

function welcome_message()
{
window.alert('Welcome to http://www.alrashdi.co');
}

وسنضعها في الحدث onLoad في الوسم body، بحيث تظهر عند تحميل الصفحة، الشفرة كاملة:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript Example 4</title>

<script type="text/javascript">
function welcome_message()
{
window.alert('Welcome to http://www.alrashdi.co');
}
</script>

</head>

<body onLoad="welcome_message();">

</body>
</html>

هل تفكر بتطوير نفس الدالة بحيث يقوم المستخدم بكتابة اسمه؟ 

ليس هناك أي تعقيد، سنقوم بتخزين ما يكتبه المستخدم عبر نافذة الادخال في متغير معين، وثم نقوم بعرض رسالة تحتوي ذلك المتغير، المثال:

function welcome_message()
{
var name = prompt('What is your name?');
window.alert('Welcome ' + name + ' to http://www.alrashdi.co');
}

ويمكنك التجربة في نفس المثال السابق، قد تلاحظ تكرار علامة الجمع أكثر من مرة “+”، وللتوضيح، في JavaScript، نستخدم “+” لدمج أكثر من متغير أو نص مقتبس في نفس السطر.

وأخيرًا، سأضع مثال لرسالة التأكيد وكيفية استخدامها بشكل صحيح. لنفترض أن هناك وصلة للذهاب لموقع آخر غير موقعك، وترغب بتنبيه الزائر بذلك وتأكيد خروجه من موقعك؛ ستكون الدالة في الحدث onClick في الوصلة الخارجية، والدالة هي:

function leave_page()
{
var con = confirm('هل أنت متأكد من مغادرة هذه الصفحة؟\n http://www.alrashdi.co');
if(con)
return true;
else
return false;
}

لاحظ وجود الكلمة المفتاحية return، وتستخدم لتأكيد العملية ما بعد الحدث، أو الحركة القادمة، أي أنه في حالة التأكيد، يواصل المتصفح العملية باتجاهه للصفحة الخارجية، وفي حالة عدم التأكيد، يحبط المتصفح الانتقال للصفحة الخارجية. الشفرة كاملة:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript Example 2</title>

<script type="text/javascript">
function leave_page()
{
var con = confirm('هل أنت متأكد من مغادرة هذه الصفحة؟\n http://www.alrashdi.co');
if(con)
return true;
else
return false;
}
</script>

</head>

<body>
<div align="center"><a href="http://www.hct.me" onClick="return leave_page();">Go to HCT Community Site</a></div>
</body>
</html>

هنا نصل لختام هذا الدرس، إن كانت هناك أسئلة، يرجى طرحها في التعليقات أسفل الدرس 🙂

 

نوفمبر 032011
 

قد لا تصنف JavaScript كلغة برمجة عند البعض، لأن خواصها تقتصر على جهة المتصفح دون خادم الموقع. فما هي JavaScript؟

جافا سكريبت (بالإنجليزية: JavaScript‏) هي لغة برمجة وتأتي كلمة جافا من الإنجليزية وتعني جزيرة جاوة وهي جزيرة إندونيسية، ولا علاقة لمنشأ اللغة باسمها. طورت جافاسكريبت من قبل شركة نيتسكيب (Netscape) وصن مايكروسيستمز (Sun Micro systems). تختلف الجافا سكريبت عن لغة الجافا من شركة صن مايكروسيستمز والتشابه في الاسم لا يرجع لأنهما مثل بعضهما، وفائدة هذه اللغة هي بثّ الحياة إلى شبكة الإنترنت، حيث تستخدم لإنشاء صفحات إنترنت أكثر تفاعلية (ديناميكية).

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

من الأمثلة على JavaScript:

– النوافذ التنبيهية، صورة:

– نوافذ التأكيد، صورة:

– نوافذ ادخال النصوص، صورة:

– استبدال عنوان الصفحة

– التأكد من الحقول المدخلة

– تقنية Ajax، ومكتبة jQuery

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

 

كيفية إضافة JavaScript إلى صفحة معينة:

هناك طريقتان، الأولى داخلية وتكون بإضافة شفرة JS في ذات الصفحة ضمن وسم <script>، للتوضيح:

<script type="text/javascript">
window.alert('Welcome to my blog \n http://www.alrashdi.co');
</script>

في أي مكان في الصفحة لكن يفضل أن يكونا من ضمن محتوى الوسم <head>، مثال:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript Example 1</title>

<script type="text/javascript">
window.alert('Welcome to my blog \n http://www.alrashdi.co');
</script>

</head>

<body>
</body>
</html>

والطريقة الثانية بربط JavaScript بملف خارجي (الامتداد .js) بالصفحة والمثال:

<script type="text/javascript" src="http://www.alrashdi.co/file.js"></script>

أو كاملًا:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript Example 1</title>

<script type="text/javascript" src="http://www.alrashdi.co/file.js"></script>
</head>

<body>
</body>
</html>

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

أغسطس 282011
 

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

الدوال التي سنستخدمها في الدرس:

# دوال قواعد البيانات #
mysql_connect(); // لفتح اتصال مع خادم قواعد البيانات
mysql_select_db(); // لتحديد قاعدة البيانات
mysql_query(); // للاستعلام من قاعدة البيانات
mysql_close(); // لإغلاق اتصال مع خادم قواعد البيانات

# دوال أساسية للتعامل مع الملفات #
fopen(); // فتح ملف
fread(); // قراءة ملف
fclose(); // إغلاق ملف

# دوال أخرى #
strrchr(); // دالة لاقتطاع آخر جزء في اليمين من نقطة يتم تحديدها
in_array(); // دالة للتأكد من توافر قيمة داخل مصفوفة
time(); // دالة الوقت أو الطابع الزمني ليونكس
move_uploaded_file(); // دالة رفع/ نقل ملف
addslashe(); // دالة إضافة علامة الشرطة

# مصفوفات #
$_GET[]; // مصفوفة جلب المدخلات عن طريق حقل المتصفح
$_FILES[]; // مصفوفة جلب تفاصيل ملف مرفوع
/*
examples:
$_FILES['field']['name']; // جلب اسم الملف المرفوع
$_FILES['field']['tmp_name']; // جلب الاسم المؤقت للملف على خادم الموقع
$_FILES['field']['type']; // جلب نوع الملف
$_FILES['field']['size']; // جلب حجم الملف بالبايت
$_FILES['field']['error']; // رقم الخطأ في حالة حدوثه
*/

مواضيع سابقة قد تفيد في هذا الدرس: المتغيرات والمصفوفات ، تسجيل عضو جديد، وتسجيل الدخول ، مكتبة الدوال والكائنات الذكية

أولًا: نموذج رفع الملفات:

للشرح سنستخدم النموذج التالي:

<p align="center"><b><span lang="ar-om">رفع ملف</span></b></p>
<form method="POST" enctype="multipart/form-data" action="upload.php">
<p align="center"><input type="file" name="file" size="20"><span lang="ar-om">
</span><input type="submit" value="رفع" name="B1"></p>
</form>
</pre>

لاحظ أن اسم حقل الملف هو “file” والنموذج يتوجه للملف upload.php بعد اعتماده.

ثانيًا: عملية رفع الملف:

الطريقة الأولى: استخدام نظام الملفات الاعتيادي

محتوى الملف upload.php مع الشرح:

<?PHP
# المتغيرات #
$setting = array();
$setting['upload_directory'] = 'upload'; //مسار رفع الملف
$setting['blocked_types'] = array('.php', '.html', '.asp', '.aspx'); //الامتدادات المحظورة

if(!empty($_FILES['file']['name'])) // التأكد من وجود ملف عبر التحقق من وجود اسمه
{
$file_extension = strrchr($_FILES['file']['name'], '.'); //اقتطاع امتداد الملف من الاسم
if(!in_array($file_extension, $setting['blocked_types'])) //التحقق إن كان امتداد الملف محجوب
{
#بدأ عملية الرفع هنا#
$new_file = time().$file_extension; //اسم الملف الجديد، هنا سيكون الوقت وامتداد الملف
$uploading = move_uploaded_file($_FILES['file']['tmp_name'], 'upload/'.$new_file); //دالة رفع الملف، في الشطر الأول نضع الملف المرفوع والشطر الثاني الوجهة الجديدة للملف
if($uploading) //التحقق من رفع الملف
{
echo '<p align="center">تم رفع الملف بنجاح ولله الحمد</p>'."\n";
echo '<p align="center" dir="ltr"><a href="upload/'.$new_file.'">Download file</a></p>'."\n";
}
else
echo '<p align="center">خطأ غير متوقع أثناء الرفع .. </p>'."\n";
}
else
echo '<p align="center">لا يمكن رفع هذا الامتداد من الملفات</p>'."\n";
}
else
echo '<p align="center">يجب اختيار ملف</p>'."\n";
?>

الطريقة الثانية: رفع الملفات إلى قاعدة البيانات:

بنية قاعدة البيانات:

CREATE TABLE `file` (
`fid` int(11) NOT NULL auto_increment,
`name` VARCHAR( 255 ) NOT NULL ,
`type` VARCHAR( 255 ) NOT NULL ,
`data` longblob NOT NULL ,
PRIMARY KEY ( `fid` )
) ENGINE = MYISAM

بعد زراعة قاعدة البيانات في خادم الموقع ننتقل للملف upload.php من جديد لكن بطريقة مختلفة عن السابقة نوعًا ما:

<?PHP
# المتغيرات #
$database = array();
$database['server'] = 'localhost'; // خادم قواعد البيانات
$database['username'] = 'root'; // اسم المستخدم
$database['password'] = ''; // كلمة المرور
$database['dbname'] = 'upload'; // اسم قاعدة البيانات

$setting = array();
$setting['upload_directory'] = 'upload'; //مسار رفع الملف
$setting['blocked_types'] = array('.php', '.html', '.asp', '.aspx'); //الامتدادات المحظورة

if(!empty($_FILES['file']['name'])) // التأكد من وجود ملف عبر التحقق من وجود اسمه
{
$file_extension = strrchr($_FILES['file']['name'], '.'); //اقتطاع امتداد الملف من الاسم
if(!in_array($file_extension, $setting['blocked_types'])) //التحقق إن كان امتداد الملف محجوب
{
#بدأ عملية الرفع هنا#
$handle = fopen($_FILES['file']['tmp_name'], r); //فتح الملف
$data = fread($handle, $_FILES['file']['size']); //قراءة الملف
$filedata = addslashes($data); //إضافة علامات سلاش للتمكين من تخزين الملف في قاعدة البيانات بدون اخطاء
fclose($handle); //إغلاق الملف
/*
يمكن اختصار الخطوات السابقة في سطر واحد، لكن للتسهيل تم تقسيمها على عدة أسطر
الخطوة التالية هي إضافة المتغير
filedata
إلى قاعدة البيانات
*/
$connection = mysql_connect($database['server'], $database['username'], $database['password']); //الاتصال بخادم قواعد البيانات
mysql_select_db($database['dbname'], $connection) or die(mysql_error()); //نحديد قاعدة البيانات
$insert_data = mysql_query("insert into file set name='".$_FILES['file']['name']."', type='".$_FILES['file']['type']."', data='".$filedata."'") or die(mysql_error()); //إدراج الملف في قاعدة البيانات
if($insert_data) //التحقق من إضافة الملف لقاعدة البيانات
{
echo '<p align="center">تم رفع الملف بنجاح ولله الحمد</p>'."\n";
echo '<p align="center" dir="ltr"><a href="index.php?op=view&fid='.mysql_insert_id().'">Download file</a></p>'."\n";
}
else
echo '<p align="center">خطأ غير متوقع أثناء الرفع .. </p>'."\n";
mysql_close($connection); //إغلاق الاتصال بخادم قواعد البيانات
}
else
echo '<p align="center">لا يمكن رفع هذا الامتداد من الملفات</p>'."\n";
?>

يمكنك تنزيل تطبيق للدرس من هنا مع بعض الاختلافات البسيطة ويمكن فهم المثال بسهولة إن كنت متابع للمواضيع السابقة التي سبق ادراج روابطها في هذا الدرس.
لتجربة المثال تذكر تحرير البيانات في الملف config.php وزارعة ملف قاعدة البيانات

للمزيد حول الدرس أو الاستفسارات اضغط هنا للتوجه لصفحة الدرس في المنتدى

نوفمبر 242010
 

بسم الله الرحمن الرحيم

درس بسيط حول إنشاء نموذج تسجيل لعضو جديد، ونموذج لتسجيل الدخول للوحة تحكم العضو

بدايةً، نقوم بإنشاء قاعدة بيانات لتخزين بيانات الأعضاء بها، لنفترض ان بنية قاعدة البيانات هي كالتالي:

CREATE TABLE `user` (
`uid` INT( 11 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 20 ) NOT NULL ,
`password` VARCHAR( 40 ) NOT NULL ,
`email` VARCHAR( 50 ) NOT NULL
) ENGINE = MYISAM ;

الجدول احتوى على 4 حقول، بالترتيب (حقل رقم العضو، اسم العضو، كلمة المرور، والبريد الالكتروني)
ولأمان أكثر، سنقوم بتشفير كلمة المرور عند إضافتها.

الخطوة التالية، هي إنشاء ملف الإعدادات ولنفترض ان اسمه config.php
ليس من الواجب التقيد بنفس المحتوى، يمكنك تغييره مع مراعاة تغييره في الاماكن الاخرى إن تطلب الأمر

<?PHP
$database = array();
$database['server'] = 'localhost';
$database['username'] = 'root';
$database['password'] = 'root';
$database['name'] = 'login_lesson';

// الاتصال بخادم قواعد البيانات:
mysql_connect($database['server'], $database['username'], $database['password']);
// تحديد قاعدة البيانات:
mysql_select_db($database['name']) or die(mysql_error());
?>

للملاحظة، قمت بتخزين معلومات الاتصال بقاعدة البيانات في مصفوفة، للمزيد حول المصفوفات يمكنك الرجوع للدرس السابق:
[PHP] المتغيرات والمصفوفات.

الآن سنقوم بإنشاء بقية الصفحات، حسب الطريقة التي استخدمتها، قمت بوضع كافة الصفحات في ملف واحد باستخدام switch، شرح تطبيقي بسيط لها:
رابط الصفحة الرئيسية: index.php
رابط صفحة التسجيل: index.php?do=register
رابط صفحة الدخول: index.php?do=login
رابط صفحة تسجيل الخروج: index.php?do=logout
لاحظ استخدامي للمتغير “do” في كافة الصفحات السابقة، التطبيق:

<?PHP
switch($_GET['do'])
{
default:
//الصفحة الرئيسية
break;
case 'register':
//صفحة التسجيل
break;
case 'login':
// صفحة تسجيل الدخول
break;
case 'logout':
// صفحة تسجيل الخروج
break;
?>

ملاحظة: default يقصد بها أي متغير لـ”do” إن لم يكن من ضمن المتغيرات المعرفة.

الآن لنعد لمحور الدرس، الملف index.php كاملا مع الشرح بين السطور:

<?PHP
ob_start(); ## لتفادي مشاكل رأس الصفحة مع بعض المتصفحات
include('config.php'); ## استيراد ملف الإعدادات
echo '<title>Test Login Page</title>'."\n";
header('Content-type: text/html; charset=utf-8'); ## تحديد الترميز إلى الترميز الموحد
echo '<script language="JavaScript" src="javascript.js"></script>'; ## جلب ملف جافاسكربت لبعض الأشياء الغير ضرورية
switch ($_GET['do'])
{
default: ## الصفحة الرئيسية

/*
* نموذج تسجيل الدخول
* يمكنك عمل التالي عبر أي محرر html
* لكن تأكد من أسماء الحقول هنا وفي الشطر الثاني من الملف عند تنفيذ تسجيل الدخول
*/
echo '<b>Login Form:</b><br /><br />'."\n";
echo '<form action="'.$_SERVER['PHP_SELF'].'?do=login" method="POST">'."\n";
echo  '<label for="username"><b>Username:</b>&nbsp;<input type="text" name="username" id="username" /></label> <br />'."\n";
echo  '<label for="password"><b>Password:</b>&nbsp;&nbsp;<input type="password" name="password" id="password" /></label> <br />'."\n";
echo  '<input type="submit" name="s1" value="Login" /><br />'."\n";
echo '</form>'."\n";
echo '<br /><br />'."\n";

/*
* نموذج تسجيل عضوية جديدة
* لقد تم ربط الحقل بشفرة جافا سكربت للتاكد من عدم ترك الحقول فارغة وأيضًا للتأكد من تطابق حقول كلمة المرور
*/
echo '<b>Register Form:</b><br /><br />'."\n";
echo '<form action="'.$_SERVER['PHP_SELF'].'?do=register" method="POST" onsubmit="return check_fields();">'."\n";
echo  '<label for="rg_username"><b>Username:</b>&nbsp;<input type="text" name="username" id="rg_username" /></label> <br />'."\n";
echo  '<label for="rg_password"><b>Password:</b>&nbsp;&nbsp;<input type="password" name="password" id="rg_password" /></label> <br />'."\n";
echo  '<label for="repassword"><b>Re-password:</b>&nbsp;&nbsp;<input type="password" name="repassword" id="repassword" onblur="check_passwords(\'rg_password\', \'repassword\');" /></label> <br />'."\n";
echo  '<label for="email"><b>Email:</b>&nbsp;&nbsp;<input type="text" name="email" id="email" /></label> <br />'."\n";
echo  '<input type="submit" name="s2" value="Register" /><br />'."\n";
echo '</form>'."\n";

break;
case 'login': ## صفحة التحقق من تسجيل الحقول
/*
* الاستعلام في قاعدة البيانات عن اسم العضو وكلمة المرور المطابقة لما ادخل المستخدم في حقلي الدخول
* لاحظ ان هناك تشفير لقاعدة البيانات أثناء البحث، تفسير ذلك اننا سنقوم بتشفيرها أيضًا عند تسجيل عضو جديد لأمان أكثر
*/
$query = mysql_query("select * from user where username='".$_POST['username']."' and password='".md5($_POST['password'])."'");
/*
* السطر الآتي
* mysql_num_rows($query)
* هو لحساب عدد التسجيلات في قاعدة البيانات حسب الاستعلام اعلاه
* فمنطقيًا، إن كان الناتج يساوي صفرًا فهذا يعني أن هناك خطأ في بيانات الدخول وعدم توافق البيانات
*/
if (mysql_num_rows($query) == 0) ## في حالة عدم العثور على أي نتيجة حسب الاستعلام
{
echo '<script>
window.alert(\'Incorrect login information!\');
history.back(-1);
</script>'; ## يمكنك استخدام اي طريقة، وضعت شفرات جافا سكربت لتسريع العملية لي
}
else ## إن كان هناك نتائج
{
/*
* تخزين اسم العضو في ملف استرجاع
* المتغير الأول في الدالة هو اسم ملف الاسترجاع
* المتغير الثاني هو قيمة ملف الاسترجاع
* المتغير الثالث هو  تاريخ انتهاء ملف الاسترجاع، بالتالي قمت بإضافة 900 ثانية إلى الوقت الحالي
*/
setcookie('username',$_POST['username'],time()+900);
echo '<script>
window.alert(\'Thank you ['.$_POST['username'].'], \n Welcome to my script!\');
window.location = \'index.php?do=usercp\';
</script>'; ## رسالة تفيد تسجيل الدخول وإعادة توجيه للوحة تحكم العضو
}

break;
case 'logout': ## صفحة تسجيل الخروج
/*
* في تسجيل الخروج، استخدمت نفس الدالة، لكن قمت بوضع قيمة فارغة وأيضًا تاريخ انتهاء قديم
* توجد أكثر من طريقة لتسجيل الخروج ومسح ملف الاسترجاع
*/
setcookie('username','',time()-900);
echo '<script>
window.alert(\':)!\');
window.location = \'index.php\';
</script>';
break;
case 'register': ## صفحة تنفيذ التسجيل
/*
* ادراج البيانات في قاعدة البيانات
* يجب أن يكون ترتيب الحقول في قاعدة البيانات هو ذات الترتيب عند الادخال
* لاحظ تشفير كلمة المرور
*/
mysql_query("insert into user (username, password, email) values ('".$_POST['username']."', '".md5($_POST['password'])."', '".$_POST['email']."')") or die(mysql_error());
echo "<script>
window.alert('تمت إضافة العضوية بنجاح والحمد لله');
window.location = 'index.php';
</script>"; ## رسالة تمام التسجيل
break;

case 'usercp': ## صفحة لوحة تحكم العضو
if (!empty($_COOKIE['username'])) ## هذا السطر للتأكد من أن المتصفح عضو فعلًا
{
/*
* محتوى لوحة تحكم العضو بعد التأكد
*/
echo '<h2>Welcome ['.$_COOKIE['username'].']</h2>';
echo 'Text1 <br /> Text2 <br /> Text3 </br>';
echo '<a href="index.php?do=logout">Logout</a>';
}
else ## إن كان المتصفح ليس عضوًا
{
echo '<script>
window.alert(\'You should login first!\');
window.location = \'index.php\';
</script>'; ## رسالة تنبيه وإعادة توجيه
}
break;
}
?>

التطبيق يعمل الآن، لكن لم نقم بوضع ملف الـ”javascript” للتأكد من اكمال الحقول حسبما ذُكر في الشرح أعلاه، التالي ليس مهمًا ويمكن استبداله بشفرات PHP في ذات التطبيق:

function check_passwords(field1, field2)
{
if (document.getElementById(field1).value != document.getElementById(field2).value)
{
window.alert('Password fields are not same');
document.getElementById(field1).focus();
}
}

function check_fields()
{
if (!document.getElementById('rg_username').value || !document.getElementById('rg_password').value || !document.getElementById('repassword').value || !document.getElementById('email').value)
{
window.alert('There are missing fields!');
return false;
}
else
return true;
}

تنزيل ملفات التطبيق لمن أراد التجربة مباشرة