مايو 06

درس انشاء صوره لتاكيد التسجيل

برمجة PHP أضف تعليق

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

اذا لم ترى ذلك من قبل او لم تفهم قصدي تفضل هنا .

بالتاكيد سالت نفسك كيف يتم تكوين هذه الصورة وهل هي صور متعددة موجودة اساسا بالموقع ؟

وكيف يتم تمييز الحروف التى تظهر على الصورة بينما تقوم انت بادخالها من لوحة المفاتيح ؟

الان سوف اقوم بشرح كيفية عمل ذلك بواسطة php ، ولكن لا تتعجل ، سوف اقوم بشرح الاكواد خطوة خطوة ثم وضع الكود كاملا ، وسوف اضع ملفاً مرفقاً يحتوى البرنامج كاملاً
، مع ملاحظة أننا سوف نستخدم الجلسات (session) في هذا السكربت البسيط .

في البداية سنقوم بعملية تكوين الصورة مع تحديد نوع الصورة
، ويكون ذلك كالتالي :

Code ..

<?php 
 /*ارسال الهيدر*/ 
Header("Content-Type: image/png"); 
?>

اذا اردت استخدام الامتداد jpg فقط غير png في الكود بالاعلى الى jpg ، وهكذا مع بقية انواع الصور .

الان تريد ان تعرف كيف سنقوم بتكوين الصورة ! ولكن مهلا في البداية يجب وضع كود السيشن او الجلسة كما يلي :

Code ..

<?php 
/* بداية الجلسة.
*/ 
session_start(); 

/*سوف نقوم بتعريف هذا المتغير لاحقا.*/ 
$new_string; 

/*تسجيل المتغير الخاص بالجلسة لكى نتمكن
من استخدامه بعد ذلك. */ 
session_register(‘new_string’); 
?>

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

الان نبدأ الكود الخاص بانشاء الصورة :

Code ..

<?php 
/* انشاءالصورة*/ 
/*الرقم الاول هو عرض الصورة والرقم
الثانى هو الارتفاع*/ 
$im = ImageCreate(200, 40);   
?>

الان وضعت المتغير im كرمز سوف اقوم باستخدامه للتعبير عن الصورة طوال الدرس ، وحددنا ابعاد الصورة باستخدام الدالة image create .

لكن هل هي صورة بلا الوان ! لا الان سوف نجعلها اكثر حيوية وحركة :

Code ..

<?php 
/*نقوم بتعين لونين
مختلفين للاستخدام في الصورة */ 
$white = ImageColorAllocate($im, 255, 255, 255); 
$black = ImageColorAllocate($im, 0, 0, 0); 
?>

استخدمنا اللونين white و black ، ويمكن تغيير الالوان بتغيير قيم الارقام في الكود .

حالياً لدينا صورة im تحتوى على لونين white و black وابعادها 200×40 ، دعونا ننتقل لمرحلة اخرى وهي عمل الكود العشوائي للارقام والحروف التي ستظهر على الصورة باستخدام نظام md5 للتشفير ولكن لن نتطرق لكيفية عمل نظام التشفير لانه خارج الموضوع ، ستجد شرح الدالة في قسم الدوال .

Code ..

<?php 
/*توليد الكود العشوائى.*/ 
srand((double)microtime()*1000000);  

/*تشفير الكود وتحويله لارقام وحروف */ 
$string = md5(rand(0,9999));  

/*الان نحدد ثلاث خيارات
المتغير – عدد الخانات التى يتم جلبها من المتغير – عدد
الحروف والارقام التي ستظهر وتضمن داخل المتغير الجديد
وهي هنا رقم 5.*/ 
$new_string = substr($string, 17, 5);  
?>

الان تعالوا نعيد تنظيم الالوان والاكود داخل الصورة :

Code ..

<?php 
 /*fill image with
black*/ 
ImageFill($im, 0, 0, $black); 
?>

قمنا بتلويين الصورة بالكامل باللون الاسود كلون خلفية للصورة .

الان اين سنكتب على الصورة ؟
هل نبدأ من المنتصف ام من اليسار ؟

ابعاد الصورة هي 200×40 ، اذاً احداثي الركن السفلي الايمن هو 200,40 ، لذلك علينا بتحديد المنتصف بشكل تقريبي ، النقطتين 80 و 10 مثلاً :

Code ..

<?php 
ImageString($im, 5, 80, 10, $new_string, $white); 
?>

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

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

Code ..

<?php 
 /*الاعداد النهائي للصورة*/ 
ImagePNG($im, "verify.png"); 
ImageDestroy($im);  
?>

اعطينا الصورة اسم verify.png ، فقط قمنا بتحويل كافة المعلومات التي قمنا بادخالها للمتغير im الى صورة وسميناها اسم جديد ، ثم استخدمنا دالة image destroy ، وهذه الخطوة فائدتها تحرير ذاكرة السرفر من البيانات المدخلة .

الان الكود النهائي بعد تجميع كل هذه الخطوات :

Code ..

<?php 
 /*ارسال الهيدر*/ 
Header("Content-Type: image/png"); 

/* بداية الجلسة. */ 
session_start(); 

/*سوف نقوم بتحديد المتغير لاحقا.*/ 
$new_string; 

/*ربط المتغير. */ 
session_register(‘new_string’); 

/*كود تعريف صفحة اتش تى ام ال عادية .*/ 
echo "<html><head><title>v
erify</title></head>"; 
echo "<body>"; 
/* تجهيز الصورة*/ 
$im = ImageCreate(200, 40);  

/*تحديد الوان الصورة*/ 
$white = ImageColorAllocate($im, 255, 255, 255); 
$black = ImageColorAllocate($im, 0, 0, 0); 

/*انشاء الكود العشوائي.*/ 
srand((double)microtime()*1000000);  

/*تشفير المتغير او الكود*/ 
$string = md5(rand(0,9999));  

/*انشاء المتغير الجديد.*/ 
$new_string = substr($string, 17, 5); 

 /*تلوين خلفية
الصورة باللون الاسود*/ 
ImageFill($im, 0, 0, $black); 

 /*تحديد حجم الخط
واحداثي نقطة بدء الكتابه ولون الخط */ 
ImageString($im, 5, 80, 10, $new_string, $white); 

/* اعداد الصورة النهائية لكى تكون جاهزة
للعرض في المتصفح*/ 
ImagePNG($im, "verify.png"); 
ImageDestroy($im);  
?>

الجزء الثاني
     
الان كيف استخدم هذا كله ؟
او كيف اضمنه ضمن برنامج او صفحة او سكربت ؟

حسناً ..
1-قم بعمل ملف جديد بي اتش بي .
2-ضع في الملف الكود السابق كاملاً .
3-ضع كود النموذج التالي اسفل الكود السابق في نفس الملف :

Code ..

<?php 
/*نقوم بتضمين الصورة
مثلها مثل أي صورة عادية.*/ 
echo "<img src=\"verify.png\">"; 
echo "<br><br>"; 
echo " من فضلك ادخل الكود الموجود في الصورة
ولاحظ حساسية الارقام والحروف من حيث كبيرة او
صغيرة  "; 
echo " <form action=\"formhandler.php\"
method=post>"; 
echo "<input name=\"random\"
type=\"text\" value=\"\">"; 
echo "<input
type=\"submit\">"; 
echo "</form>"; 
echo "</body>"; 
echo "</html>"; 
?>

الان نحتاج لملف اخر
وقد اسميناه في الكود بالاعلى formhandler.php

وضع الكود التالي في الملف الجديد

Code ..

<?php 
/*بدء الجلسه التى قمنا
بعملها في الملف الاول*/ 
session_start();   
$random = trim($random); 

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

/*الان نقوم باستدعاء الممتغير نيو سترينج والذي
قمنا بتسجيله داخل الجلسه او السيشن في الصفحة السابقه
ويعود هنا بنفس قيمته ثم نقوم بمقارنتة بالمتغير راندوم
.*/ 
if ($new_string == $random){ 
echo "شكرا لك الكود الذي ادخلته صحيح
"; 
} 
else{ 
echo "الكود خطأ فضلا ارجع للخلف واعد
المحاولة."; 
} 
?>

انتهى بحمد الله ..

ملحوظة :
اذا ظهرت رساله خطأ :

Code ..

can`t open verify.png for writing

قم برفع اي صورة لديك في نفس مجلد السكربت واعد تسميتها الى نفس الاسم واجعل تصريحها 777

أضف تعليق.



اعلانات Google

التدويناتRSS | التعليقاتRSS | تسجيل الدخول