Clearing floats

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

سوف نتكلم اليوم عن خدعه من خدع css عن شئ مهم يدعي الـ clearing floats
لمن لا يعرف الـ clearing floats
ببساطه عندما يكون لدينا Box1 بداخلهBox2 له قيمه float سواء كانت right أو left فإن حدود Box1 أو الخلفيه له لن تتمد حتي تحتوي Box2 كما نتوقع
قد يبدو الكلام أصعب من الواقع إذن تابع معي المثال التالي  :

<div id="box1">
	box1 !!!
<div id="box2">box2 !!</div>
</div>

div#box1 {
	border: 3px solid blue;
	width: 300px;
	background-color: #C1C1FF;
	padding: 5px;
}

div#box2 {
	float: right;
	margin: 0;
	border: 3px solid red;
	width: 150px;
	height: 140px;
	background: #FFC6B3;
}

عند تنفيذ الأكواد ينتج الشكل التالي :

أعتقد الأن أن المشكله قد وضحت وهي أن Box1 لا يتمدد ويحوي Box2
معظم المطورين يتغلبون علي هذه المشكله ببساطه بإضافه divفارغ مع إعطائه القيمه clear:both  ليصبح الكود بالشكل التالي :

<div id="box1">
	box1 !!!
<div id="box2">box2 !!</div>
<div style="clear:both"></div>
</div>

لكن يعيب هذه الطريقه أنها تجعل التصميم غير نظيف ويحتوي علي أكواد XHTML لافائده منها علاوه علي ذلك يوجد طريقه أسهل وأكثرإحترافيه
تقوم هذه الطريقه علي إستخدام خاصيه after وهي خاصيه قياسيه في css2 ومدعومه من كافه المتصفحات الحديثه تستطيع من خلالها إضافه محتوي للصفحه عن طريق css إذن جرب الأن هذا الكود :

<div id="box1" class="clearfix">
	box1 !!!
<div id="box2">box2 !!</div>
</div>

div#box1 {
	border: 3px solid blue;
	width: 300px;
	background-color: #C1C1FF;
	padding: 5px;
}

div#box2 {
	float: right;
	margin: 0;
	border: 3px solid red;
	width: 150px;
	height: 140px;
	background: #FFC6B3;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

هذا الكود يعمل علي كافه المتصفحات القياسيه IE8 FF2 FF3 FF3.5 safari chrome لكن ماذا عن IE6 و IE7 ؟
أساساً IE6 IE7 لديهم خاصيه إزاله الـ float تلقائياً لكن يجب أن تكون قيمه zoom تساوي 1
لذلك وللتأكد من أن الخدعه سوف تعمل علي جميع المتصفحات حتي المتصفح التاريخي IE5.5 نضيف الكود التالي :

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;
    display: block;
 </style>
<![endif]-->

الأن الكود يعمل علي جميع المتصفحات بدون زياده حرف في أكواد XHTML

حمايه لوحه التحكم

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

هنتعرف اليوم علي كيفيه حمايه لوحه التحكم بدون إستخدام أي داله لحمايه المدخلات من SQL injection لكن الأول نعرف المشكله

لو عندنا لوحه تحكم بسيطه ولانريد لأي أحد الدخول لها إلا مدير الموقع مثلاً هانعمل جدول بسيط أسمه admin مثلاً في ثلاث حقول هم id و name و password وهانعمل فورم بسيط HTML لإدخال المعلومات اللي هي الأسم وكلمه المرور

طبعاً موضوعنا ليس الفورم ولكن صفحه معالجه البيانات الأتيه منه 

غالباً ماتكون بالشكل التالي

<?php
$name = $_GET['name'];
$password = $_GET['password'];

$sql = "SELECT * FROM admin WHERE name='" .$name. " and password='" . $password."'";
if (mysql_num_rows(mysql_query($sql)) > 0) {
	 // Redirect to controll panel
}

die('خطأ في تسجيل الدخول');
?>

طبعاً تستطيع إسخدام أي داله لعد النتائج أو أستخراج النتائج لكن أين المشكله ؟ المشكله هو لو قام أحد الصبيه بإدخال المعلومات التاليه في الفورم
الأسم : heacker
كلمه المرور : pass’ or 1=1
فيصبح شكل الأستعلام كالتالي

SELECT * FROM admin WHERE name='hacker' and password='pass' or 1=1

طبعا سوف يدخله الأسكربت بكل سرور إلي لوحه التحكم وبعد تكرار هذه الحالات تنتشرالسمعه بأن لغه PHP ضعيفه من الناحيه الأمنيه 
إذن سأثبت لك أنك تستطيع حمايه لوحه التحكم بدون إستخدام ولا داله للحمايه سواء مبنيه في داخل PHP أو أحد الدوال الموجوده في أي Framework
غير الكود للشكل التالي

<?php
$name = $_GET['name'];
$password = $_GET['password'];

$sql = 'SELECT * FROM admin WHERE name='.$name;
$result = mysql_query($sql);
if (mysql_num_rows($result)) > 0) {
	while($row = mysql_fetch_assoc($result)) {
		if ($row['password'] === $password) {
			 // Redirect to controll panel
		}
	}

}
?>

ماذا لو أدخل الصبي نفس البيانات السابقه أو أي أكواد أخري ؟ ببساطه لن يستطيع الدخول لماذا ؟ لأن المقارنه أصبحت تتم علي مستوي لغه البرمجه وليس علي مستوي قاعده البيانات
لكن ماذا لو أراد أدخال إستعلامات أخري لقاعده البيانات ؟ علي الرغم من أن mysql_query لا تدعم الأستعلامات المتعدده نريد أن نمنعه  من مجرد إحتمال إدخال أي شئ لقاعده البيانات
غير الكود للشكل التالي :

<?php
$name = $_GET['name'];
$password = $_GET['password'];

$sql = 'SELECT * FROM admin';
$result = mysql_query($sql);
if (mysql_num_rows($result)) > 0) {
	while($row = mysql_fetch_assoc($result)) {
		if ($row['password'] === $password && $row['name'] === $name) {
			 // Redirect to controll panel
		}
	}
}

die('خطأ في تسجيل الدخول');
?>

إذن سوف لن يحلم بمجرد وجود فرصه لإدخال أيه أكواد للوحه التحكم

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