هل تريد المشاركة معنا في تطوير هذه الأدوات ؟
يمكن للجميع المشاركه كالترجمه والأفكار والنصائح والبرمجة والتصميم وأنا سأقوم بمساعدة أي شخص في إنهاء الأداة الخاصه به
فمن يريد مثلا عمل سكريبت تقييم فليفكر بعمله كأداة ليستخدمة في موقعه ويمكن للآخرين إستخدامه
وكل أداة سيتم إدراج أسماء جميع المشاركين فيها
مقدمة : أداة إعلان زاوية
هذه الأداة نراها كثيرا عند تصفح المواقع ولا يمكننا إستخدامها إلا إذا كان لدينا خبرة في برنامج الفلاش والأكشين سكريبت وجافا سكريبت ... فمن يستطيع عمل هذه الأداة يمكنه إعتماد أحد مبرمجي البي أتش بي لتصبح في يد الجميع كما تم ...
1- تم أخذ الأداة من أحد المواقع كما هي ومن ثم قمت بعمل تحويل لملف الswf إلى السورس fla عن طريق برنامج sothink swf decompiler وتم تعديل بعض المتغيرات الموجوده لتتوافق مع عمل الأداة .
2- تم إنشاء ملف جافا سكريبت ووضع الكود الخاص بنشر الأداة داخل هذا الملف وبذلك يمكن إستدعاء الأداة فقط من خلال كود إستدعاء ملف الجافا سكريبت ... يعني من خلال سطر واحد فقط .
3- تم عمل سكريبت يقوم بعمل تحويل للصور وتصغيرها لتسهيل أمور المبتدئن للإستفادة من الأداة .
4- تخزين الصور في قاعدة البيانات لسهوله حذفها والتحكم بها .
5- عمل لوحة تحكم لهذه الأداة ... نموذج لرفع الصور وبيانات الرابط وإسم لسهوله تذكر الإعلان .
.......
كيف يمكنني المشاركة في إنشاء أول أداة خاصه بي ؟
في البداية يجب شرح آلية العمل ليتوافق مع مشروعنا
أولا : هناك عدة جداول مبنية في الموقع يتم إستخدامها كماهي وهذا تقسيم أحد هذه الجداول :
id int(20) NOT NULL AUTO_INCREMENT,
`type` int(20) NOT NULL DEFAULT ´0´,
number1 int(20) NOT NULL DEFAULT ´0´,
number2 int(20) NOT NULL DEFAULT ´0´,
number3 int(20) NOT NULL DEFAULT ´0´,
number4 int(20) NOT NULL DEFAULT ´0´,
number5 int(20) NOT NULL DEFAULT ´0´,
number6 int(20) NOT NULL DEFAULT ´0´,
number7 int(20) NOT NULL DEFAULT ´0´,
number8 int(20) NOT NULL DEFAULT ´0´,
number9 int(20) NOT NULL DEFAULT ´0´,
number10 int(20) NOT NULL DEFAULT ´0´,
string1 longtext NOT NULL,
string2 longtext NOT NULL,
string3 longtext NOT NULL,
string4 longtext NOT NULL,
string5 longtext NOT NULL,
string6 longtext NOT NULL,
string7 longtext NOT NULL,
string8 longtext NOT NULL,
string9 longtext NOT NULL,
string10 longtext NOT NULL,
date1 varchar(20) NOT NULL DEFAULT ´0000-00-00´,
date2 varchar(20) NOT NULL DEFAULT ´0000-00-00´,
date3 varchar(20) NOT NULL DEFAULT ´0000-00-00´,
date4 varchar(20) NOT NULL DEFAULT ´0000-00-00´,
date5 varchar(20) NOT NULL DEFAULT ´0000-00-00´,
bool1 int(1) NOT NULL DEFAULT ´0´,
bool2 int(1) NOT NULL DEFAULT ´0´,
bool3 int(1) NOT NULL DEFAULT ´0´,
bool4 int(1) NOT NULL DEFAULT ´0´,
bool5 int(1) NOT NULL DEFAULT ´0´,
file1 longblob NOT NULL,
file2 longblob NOT NULL,
file3 longblob NOT NULL,
file4 longblob NOT NULL,
file5 longblob NOT NULL,
PRIMARY KEY (id)
) ;
نفس هذا التقسيم للجداول الباقية ولكن إسم الجدول يصبح table2,table3,... وهكذا
لاحظ الجداول تحتوي على معظم الخيارات التي نحتاجها لإنجاز موقع وهنا نكون مقيدين في تسمية الحقول فقط.
بعد أن نقوم بعمل هذه الجداول على اللوكال هوست عندنا نبدأ في فكرة الأداة ...
الأداة التي طرحتها للنقاش هنا هي بانر يكون في أعلى الصفحة تقريبا ويبقى مكانه إذا تم تحريك السكرول للأسفل ومثل هذا البانر متوفر في معظم المنتديات كما ذكرت
نذهب إلى إحدى هذه المنتديات ونأخذ كود هذا البانر
هذا أفضل كود وجدته
فيه خيارات جيده ليصبح أداة فعاله
الكود يحتوي على جافا سكريبت وهتمل كما يلي :
var persistclose=1 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 40 //set y offset of bar in pixels
var verticalpos="frombottom" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<style type="text/css">#topbar{position:absolute;border: 0px solid;padding: 0px;visibility: hidden;z-index: 0;}</style>
<div id="topbar"><a href="url"> <img style="cursor: pointer" border="0" src="s_logo2.png" title="click here" /> </a></div>
الآن سنقوم بدراسة سريعه للإداة لنعرف ماهي المتغيرات التي نحتاجها
,,,,,,,,, file1
ثانيا : المكان (فوق أو تحت),,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, bool1
ثالثا : الموقع (x,y),,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
,,,,,,, string2
رابعا : طريقة الإغلاق (أوتوماتيك أو عادي),,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,bool2
خامسا : مدة الإغلاق إذا كان أوتوماتيك (العداد بالثواني),,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, number1
سادسا : الرابط (إذا قام بالضغط على الصورة),,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, string3
سابعا : الهنت (التعليق الذي يظهر إذا وضع المؤشر فوق الصورة),,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, string4
ثامنا : حفظ عملية الإغلاق وعدم ظهور البانر مرة أخرى. ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, bool3
أعتقد هذه هي المتغيرات التي يمكن إستخدامها حتى الآن
نبدأ العمل على برمجة إدخال المتغيرات
البرمجة عادية جدا مافيها اي شيء مميز... كما يلي ...
<?
$link = mysql_connect("localhost", "root", "")or die (´I cannot connect to the database because: ´ . mysql_error());
$db_selected = mysql_select_db("tools", $link);
if($bar_alt){
if (is_uploaded_file($F1)) {
$ImageT =time();
move_uploaded_file($F1, $ImageT);
$instr = fopen($ImageT,"rb");
$image = addslashes(fread($instr,filesize($ImageT)));
unlink("$ImageT");
if (strlen($instr) < 149000) { $OK_Y=1;}
}
if($OK_Y){
$time=time();
mysql_query("
INSERT INTO `table1` (
`id` ,
`file1` ,
`bool1` ,
`string2` ,
`number1` ,
`string3` ,
`string4` ,
`bool3`
)
VALUES (
NULL , ´$image´, ´$up_down´,´$x_y´, ´$close_time´, ´$url´, ´$bar_alt´,´$save_close´);"
);
$id_md5=md5(mysql_insert_id($link));
$body_x="<div class=´success´>تمت العمليه بنجاح <br/> Your code for new topbar is <br />".
htmlspecialchars(´<script type="text/javascript" src="http://www.urorbit-tools.com/tools/topbar/topbar.js.php?t=´.$id_md5.´"></script>´)."</div>
<div style=´ background-color: $colorx; text-align: center;width: 600px;height: 50px;´>
<script type=´text/javascript´ src=´http://www.urorbit-tools.com/tools/topbar/topbar.js.php?t=".$id_md5."´></script>
</div>
<hr/>";
}else{
$body_x="<div class=´error´>خطأ ,<br/>Please check and fill all feids <br /></div><hr/>";
}
}
for($i=1;$i<300;$i++){
$option_xy.="<option value=´$i´>$i</option>";
}
$body="$body_x
<div class=´post´ id=´post-12´ style=´width: 885px´>
<div class=´date´><span>Topbar V1.0Beta. / 23.04.2009 </span></div>
<h2><a rel=´bookmark´ title=´x´ href=´#´>بانر عائم ن1</a></h2>
<div class=´cover´>
<div class=´entry´>
<form name=´frm_topbar´ action=´?tool=topbar´ method=´POST´ enctype=´multipart/form-data´>
عنوان الإعلان <br/>
<input name=´bar_alt´ /><br /><br/>
الصورة<br />
<input name=´F1´ type=´file´ /><br /> <br />
حفظ عملية الإغلاق <input type=´checkbox´ name=´save_close´ value=´1´ checked=´checked´ /><br />
فوق <input type=´radio´ name=´up_down´ value=´1´ checked=´checked´ /> |
تحت <input type=´radio´ name=´up_down´ value=´0´/>
<br />
<br />
الرابط <br/>
<input name=´url´ /><br /><br/>
إغلاق بعد
<select name=´close_time´ size=´1´>
<option value=´0´ selected=´selected´>لاشيء</option>
<option value=´5´>5</option>
<option value=´10´>10</option>
<option value=´15´>15</option>
<option value=´30´>30</option>
</select>
<br /><br />
الموقع س ,ص
X <select name=´x´ size=´1´><option value=´0´ selected=´selected´>0</option>$option_xy</select>,
Y <select name=´y´ size=´1´><option value=´0´ selected=´selected´>0</option>$option_xy</select>
<br />
<br />
<input type=´submit´ name=´submit´ value=´أضف الآن´ />
</form>
</div>
</div>
<div class=´postmetadata´ style=´height: 50px´>
<div class=´p_comments´>
</div>
</div>
</div>";
echo $body;
?>
بعد أن قمنا بعمل ملف إدخل بيانات المتغيرات
الآن جاء دور تنسيق وضبط ملف الجافا سكريبت لتسهيل عملية تنصيب الأداة على أي موقع فقط من خلال سطر كود واحد
نفس كود صفحة الهتمل المرفقة نأخذة ونضعة في صفحة بي أتش بي
نحذف تاج الجافاسكريبت لآن الملف سيصبح أصلا ملف جافا سكريبت
وبعدها نقوم بجلب بيانات الإعدادات بناء على رقم الآي دي المشفر , كما يلي :
$result=mysql_query("Select * From table1 where MD5(id)=´".$t."´ LIMIT 1 ;");
$row = mysql_fetch_array($result, MYSQL_BOTH);
$image="image.php?t=$t";
if($row[´bool1´]=="1"){$up_down="fromtop";}else{$up_down="frombottom";} //up or down place
$x=$row[´number1´];
$y=$row[´number2´];
$close_time=$row[´number3´]*1000;
if($close_time){$close_time="setTimeout(´closebar();´,$close_time);";}
$url=$row[´string3´];
$bar_alt=$row[´string4´];
$save_close=$row[´bool3´];
الآن نضع المتغيرات في مكانها داخل كود الجافاسكريبت
var startX = <?=$x?> //set x offset of bar in pixels
var startY = <?=$y?> //set y offset of bar in pixels
var verticalpos="<?=$up_down?>" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
إلى الآن الأمر واضح ومافي غلبه إن شاء الله , يعني ملخص للي عملناه إلى الآن ..
1- أخذنا كود الأداة من هتمل وجافاسكريبت وصور وغيره وغيراته
2- عرفنا شو المتغيرات إللي بتلزمنا
3- عملنا صفحة لإدخال هذه المتغيرات داخل جدول معد مسبقا من قبل( أدوات مدارك )
4- عملنا صفحة ثانيه لعملية إسترجاع البيانات ووضع المتغيرات مكانها في كود الأداة
الآن سنقوم بتحويل كود الهتمل إلى داله تقوم بطباعته عن طريق نسف ملف الجافاسكريبت السابق
كمايلي :
function dwac_topbar(t) { document.write(t); }
theia_topbar.putObjects = function () {
dwac_topbar(´<style type="text/css">#topbar{position:absolute;border: 0px solid;padding: 0px;visibility: hidden;z-index: 0;}</style> ´);
dwac_topbar(´<div id="topbar"><a href="<?=$url?>"><img style="cursor: pointer" border="0" src="<?=$image?>" title="<?=$bar_alt?>" /> </a> </div>´);
<?=$close_time?>
};
theia_topbar.putObjects();
هاد الحكي خذه نسخ ولصق في الأداة إللي بدك تعملها بس عليك تعدل أسماء المتغيرات فيه للي بناسب الأداة والمتغيرات الي يفضل تغييرها هيه
dwac_topbar
theia_topbar
بدل topbar بتحط إسم الأداة إللي سويتها والباقي مثل ماهو إلا كود البي أتش بي <?=$close_time?> لآنو خاص بهاي الأداة وهذا الكود لإغلاق الأداة بعد فترة محدده
بقي هناك صفحتان الأولى لجلب الصورة من داخل قاعدة البيانات كما يلي :
if($t){
$gotten = @mysql_query("Select * From table1 where MD5(id)=´".$t."´ LIMIT 1 ;");
if ($row = @mysql_fetch_assoc($gotten)) {
$bytes = $row[file1];
}
}
header("Content-Type: image/jpeg");
echo $bytes;
والصفحة الأخيرة لعرض الأداة كما يلي :
<script type="http://localhost/tools/topbar.js.php?t=<?=$t?>"></script>
Code:<br/>
<textarea name="" rows="8" cols="70">
<script type="text/javascript" src="http://localhost/tools/topbar.js.php?t=<?=$t?>"></script>
</textarea>
الأداة تعمل على اللوكال هوست ويمكنك تجربتها والتعديل عليها من خلال هذا الرابط :
مرفق معها قاعدة البيانات
لتجربة الأداة أون لاين على موقع أدوات مدارك تفضل بزيارة هذه الصفحة :
http://urorbit-tools.com/?tool=topbar
