الدرس الثالث فى الاجاكس
استخدام المصفوفات مع الاجاكس
مثال:
فى هذا المثال سنوف نقوم بعمل مصفوفة ونضع بدخلها مجموعة من الداتا بحيث يستطيع المستخدم البحث عن معلومات او بيانات من هذة المصفوفة وكل ما علي المستخدم هو ادخال الداتا وعن طريق تقنية الاجاكس تقوم الصفحة بترشيح مجموعة من الداتا قريبة من احرف النص الذى قام بادخالة المستخدم دون اعادة تحميل الصفحة كما نراة عند البحث على موقع جوجل كالتالى:
اولا صفحة (index) الخاص باكواد الاجاكس:
<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById(“txtHint”).innerHTML=””;
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”page2.php?q=”+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
ثانيا صفحة (page2) الخاصة بالسرفر
<?php
// Fill up array with names
$a[]=”Abdalla”;
$a[]=”Basem”;
$a[]=”Cazem”;
$a[]=”Dalia”;
$a[]=”Ecco”;
$a[]=”Fozya”;
$a[]=”Gunda”;
$a[]=”Hege”;
$a[]=”Inga”;
$a[]=”Johanna”;
$a[]=”Kitty”;
$a[]=”Linda”;
$a[]=”Nina”;
$a[]=”Omr”;
$a[]=”Petunia”;
$a[]=”Amanda”;
$a[]=”Rady”;
$a[]=”Cindy”;
$a[]=”Doris”;
$a[]=”Eve”;
$a[]=”Evita”;
$a[]=”Sunniva”;
$a[]=”Tove”;
$a[]=”Unni”;
$a[]=”Violet”;
$a[]=”Liza”;
$a[]=”Elizabeth”;
$a[]=”Ellen”;
$a[]=”Wenche”;
$a[]=”Vicky”;
//get the q parameter from URL
$q=$_GET[“q”];
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint=””;
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint==””)
{
$hint=$a[$i];
}
else
{
$hint=$hint.” , “.$a[$i];
}
}
}
}
// Set output to “no suggestion” if no hint were found
// or to the correct values
if ($hint == “”)
{
$response=”no suggestion”;
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>
جرب المثال بنفسك.
الدرس الثانى فى الاجاكس
بعد ان قمنا بشرح اكواد الاجاكس فى الدرس السابق سوف نتناول فى هذا الدرس مثال عملي كامل باستخدام الاجاكس:
مثال:
اولا صفحة (index) الخاصة بكود الاجاكس:
<html dir=”rtl”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>
<title>New Page 1</title>
<script>
function loadXMLDoc(str)
{
if(str.length==0)
{
document.getElementById(“myDiv”).innerHTML=””;
return;
}
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”page1.php?n=”+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action=”page1.php” method=”get”>
<input type=”text” name=”n” onKeyUp=”loadXMLDoc(this.value)”/ >
</form>
<div id=”myDiv” ></div>
</body>
</html>
ثانيا صفحة (page1) الخاصة بالسرفر:
<?php
if(isset($_GET[‘n’]))
{
echo “Hello”.’ ‘.$_GET[‘n’];
}
else echo “please enter your name”;
?>
مع العلم ان امتداد الصفحتين (.php) لاننا نتعامل مع كود السرفر بالبى اتش بى اما فى حالة التعامل مع (asp) فيتم كتابة اكواد (asp) فى الصفحة الثانية وجعل الصفحتين بامتداد (.asp) وهذا المثال هو عبارة عن حقل نصوص ياخذ من المستخدم اى نص وليكن اسمة ويكتب لة اسفل حقل النصوص كلمة هالو بالاضافة الى الاسم الذى ادخلة وذلك دون الانتقال الى صفحة جديدة اى فى نفس الصفحة والان جرب المثال بنفسك ولكن لاحظ انة بعد ان تكتب نص داخل حقل النصوص اضغط (enter) لينتقل الى صفحة السرفر.
ملاحظة:
فى المثال السابق استخدامنا دالة (GET) حيث يمكن استبدالها بدالة (POST) والفرق بين الدالتين ان دالة (GET) اسرع من دالة (POST) لكن دالة (POST) تستخدم فى حالة ارسال كميات كبيرة من الداتا للسرفر حيث ان دالة (GET) لا تستطيع ارسال كميات كبيرة من الداتا فسعتها محدودة اما (POST) فغير محدودة كما ان دالة (POST) ذو (security) اعلى من دالة (GET) لان الداتا التى يتم ارسالها عبر دالة (GET) تظهر مع الرابط باعلى الصفحة اما فى حالة الدالة (POST) فان الداتا لا تظهر مع الرابط حيث تنتقل عبر بروتوكول (http).
الدرس الاول فى الاجاكس
يعتمد تطبيق تقنية الاجاكس على جزئين او صفحتين الاول هو عبارة عن الجزء الخاص بالمستخدم وهو الذى يستلم طلبات المستخدم والجزء الاخر يتعامل مع السرفر اى يقوم باستلام الطلبات وارسالها للسرفر ثم العودة مرة اخرى بالنتائج سواء كانت بالقبول او الرفض وهذا الجزء لة مجموعة من الادوات او الاكواد الثابتة عند استخدام تقنية الاجاكس وسنتناولها بالشرح فى هذا الدرس:
(1)XMLHttpRequest Object or ActiveXObject Object:
وهو عبارة عن اوبجيكت يقوم بعملية استقبال طلبات المستخدم ولة نوعين الاول (XMLHttpRequest) وهذا النوع يتعامل مع الاصدارات الحديثة من المتصفحات والنوع الاخر (ActiveXObject) وهذا النوع يتعامل مع الاصدارات القديمة من المتصفحات ولا بد من استخدام النوعين لضمان تنفيذ طلبات المستخدمين مع كافة انواع المتصفحات.
مثال عملى على استخدامها:
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
(2)Send a Request To a Server:
وفى هذا الجزء نقوم بتفيذ عملية ارسال طلبات المستخدم الى السرفر وذلك عن طريق الكود التالى:
xmlhttp.open(method, url,true);
xmlhttp.send();
حيث ان الدالة (open) لها ثلاث بارمترات البارمتر الاول عبارة عن نوع الميثود وهما نوعين (GET,POST) والبارمتر الثانى يتم فية تحديد موقع الملف الموجود على السرفر والبارمتر الثالث يفضل تركة (true) .ثم بعد ذلك نستخدم دالة (send) لتنفيذ عملية الارسال الى السرفر.
مثال عملى على استخدامها:
xmlhttp.open(“GET”,”firstpage.php”,true);
xmlhttp.send();
او فى حالة التعامل مع (asp)
xmlhttp.open(“GET”,”firstpage.asp”,true);
xmlhttp.send();
(3)Server Response:
بعد ان قمنا باستقبال الداتا من المستخدم وارسالها الى السرفر يكون قد حان الوقت لتلقى الرد على الداتا التى تم ارسالها الى السرفر ويتم ذلك عن طريق خاصية (responseText).
(4)onreadystatechange event:
بعد ان تم ارسال طلب المستخدم الى السرفر يتم تنفيذ بعض الاجراءات على اساس الاستجابة عن طريق حدث يسمى
(onreadystatechange) ومع هذا الحدث يتم استخدام خاصيتين هما:
(1)readyState:
وهذة الخاصية تعبر عن حالة الطلب المرسل الى السرفر ولها خمس قيم تتدرج من (0) الى (4) كالتالى:
(0)يدل على ان الطلب الذى يتم ارسالة الى السرفر لا يعمل.
(1)يدل على ان هناك وصلة تم عملها لطلب المستخدم الى السرفر.
(2)تدل على ان السرفر استلم طلب المستخدم بالفعل.
(3)تدل على ان السرفر يقوم بمعالجة طلب المستخدم المرسل الية.
(4) يدل على ان السرفر قام بمعالجة طلب المستخدم وجاهز للاستجابة.
(2)Status:
ولها قيمتين كالتالى:
(200)تدل على انة توجد صفحة على السرفر.
(404)تدل على انة لا توجد صفحة على السرفر.
مثال عملى على استخدامها:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“tag_html”).innerHTML=xmlhttp.responseText;
}
}
مقدمة عن الاجاكس
ظهر مصطلح الاجاكس لاول مرة عام 2005 على يد كاتب امريكى والاجاكس ليست لغة برمجية مستقلة ولكنها تقنية متقدمة تتكون من عدة تقنيات وهى عبارة عن كلمة تتكون من اربعة احرف (AJAX) وهى اختصار لى:
(Asynchronous JavaScript and XML)
اى اتحاد بين لغتى (XML – JavaScript) فتقنية الاجاكس تتكون من دمج بين اكواد الجافا سكريبت والاكس ام ال.
تعتبر تقنية الاجاكس من اكثر التقنيات التى لقت رواجا فى الفترة الاخيرة خاصة على مواقع التواصل الاجتماعى فزر الليك (like) وزر الشير (share) المعروفان على موقع الفيس بوك وموقع اليوتيوب وغيرهما من المواقع قد تم عملهما عن طريقة تقنية الاجاكس فالمستخدم يمكن ان يقوم بعمل لايك لصفحة ما مثلا على الفيس بوك دون تحميل الصفحة مرة اخرى وايضا يمكن ان يقوم بعمل شير لاى صورة او فيديو من صفحتة دون الانتقال الى الصفحة مصدر الصورة و الفيديو وبالتالى فان المستخدم يمكنة من عمل مئات الايك او الشير بسهولة جدا ودون تضييع وقت طويل ومن هنا يمكن ان نلخص تقنية الاجاكس على انها تقنية تمكن مستخدم الموقع من القيام بحدث معين من صفحتة دون الحاجة الى اعادة تحميل صفحات اخرى.
الادوات اللازمة لتعلم الاجاكس:
1- الالمام بلغة HTML.
2- الالمام بلغة JavaScript.
3- الالمام بلغة XML.
الدرس العاشر فى الجافا سكريبت
Dates
وفى هذا الدرس سوف نتناول بالشرح كيفية التعامل مع التواريخ والاوقات باستخدام لغة الجافا سكريبت.
ويتم كتابة او اظهار التاريخ داخل صفحة الويب عن طريق لغة الجافا سكريبت باستخدام الكود التالى:
new Date()
وهذا الكود يقوم باظهار تاريخ اليوم لمستخدم الموقع ويعتمد على التاريخ الموجود بجهاز المستخدم او فى حالة رفع الموقع فيعتمد على التاريخ الموجود على السرفر.
ويمكن كتابة التاريخ باكثر من صيغة كالتالى:
(1)
var day = new Date()
var day1 = new Date(“December 22, 1999 12:17:01”)
(2)
var day = new Date()
var day2 = new Date(1977,8,20)
حيث فى هذة الحالة فالاقواس تمثل (year,month,day).
(3)
var day = new Date()
var day3 = new Date(1978,5,24,12,33,0)
اما فى هذة الحالة فالاقواس تمثل (hours,minutes,seconds,year,month,day).
HTML5 الدرس السادس فى
Graphics In HTML5
Canvas Tag:-
يستخدم تاج (canvas) فى عملية الجرافيك او الرسم وهو عبارة عن اللوحة التى يتم بها الرسم حيث يمكن رسم مستطيل او دائرة او نصوص او غيرة داخل هذة اللوحة والشكل العام لهذا التاج كالتالى:
<canvas> </canvas>
وبهذا التاج يتم انشاء اللوحة التى يتم الرسم بها وهى عبارة عن مستطيل يتم تحديد طولها وعرضها وايضا يمكن عمل استايل لها من حيث اللون والاطار وغيرة وبين هذا التاج يتم كتابة تاجات الرسم والتى تعتمد على لغة الجافا سكريبت.
مثال:
<!DOCTYPE html>
<html>
<body>
<canvas id=”myCanvas” width=”250″ height=”80″ style=”border:2px solid # CCCCFF;”>
</canvas>
<script>
var h=document.getElementById(“myCanvas”);
var ht=h.getContext(“2d”);
ht.fillStyle=”#0066FF”;
ht.fillRect(10,10,170,80);
</script>
</body>
</html>
وكما فى المثال فان تاج <canvas> قمنا باعطائة id وهو (myCanvas) لكى نستطيع جلبة داخل الاسكريبت عن طريق دالة (document.getElementById).ثم بعد ذلك استخدمنا دالة (getContext) والتى لابد من تمرير (2d) اليها كما هو موضح وهذة الدالة يوجد داخلها العديد من الخصائص التى نستطيع بها الرسم ومن هذة الخصائص خاصية (fillStyle) والتى تتحكم بلون الرسم وخاصية (fillRect) والتى تستطيع بها رسم مستطيل ولها اربع بارمترات البارمتر الاول والثانى هما بعد المستطيل من الاعلى ومن جهة الشمال مع اللوحة اما البارمتر الثالث والرابع فهما عرض وطول المستطيل.
مثال:
<!DOCTYPE html>
<html>
<body>
<canvas id=”myCanvas” width=”250″ height=”80″ style=”border:1px solid # CCCCFF;”>
</canvas>
<script>
var h=document.getElementById(“myCanvas”);
var ht=h.getContext(“2d”);
ht.font=”25px Arial”;
ht.fillText(“Wellcome”,12,52);
</script>
</body>
</html>
والمثال السابق تستطيع عن طريقة رسم النصوص حيث دالة (fillText) يتم كتابة النص بها ويكون النص سميك ويمكن استبدالها بدالة (strokeText) ويكون النص عن طريقها مفرغ او غير سميك ودالة (font) لتحديد نوع الخط وحجمة.
مثال:
<!DOCTYPE html>
<html>
<body>
<canvas id=”myCanvas” width=”250″ height=”80″ style=”border:1px solid # CCCCFF;”></canvas>
<script>
var h=document.getElementById(“myCanvas”);
var ht=c.getContext(“2d”);
ctx.moveTo(0,0);
ctx.lineTo(150,100);
ctx.stroke();
</script>
</body>
</html>
هذا المثال لرسم الخطوط حيث تحدد لة نقطة بداية الخط عن طريق الدالة (moveTo) ونقطة نهاية الخط عن طريق الدالة (lineTo) وفى النهاية نستخدم دالة (stroke) لتنفيذ الخط وبالمثل يمكن رسم دائرة كالتالى:
مثال:
<!DOCTYPE html>
<html>
<body>
<canvas id=”myCanvas” width=”250″ height=”80″ style=”border:1px solid # CCCCFF;”></canvas>
<script>
var h=document.getElementById(“myCanvas”);
var ht=h.getContext(“2d”);
ctx.beginPath();
ctx.arc(80,50,35,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
هذا المثال لرسم دائرة حيث الدالة (beginPath) لتحديد مسار الدائرة والدالة (arc) تحدد ابعاد ونقاط الدائرة وتاخذ خمس بارمترات البارمتر الاول والثانى يعبر عن البعد الافقى والراسى والبامتر الثالث يعبر عن نصف قطر الدائرة والبارمتر الرابع والخامس هما يحددان نقطة بداية المسار الدائرى وهو الصفر ونقطة نهاية المسار والتى هى عبارة عن محيط الدائرة
(2*Math.PI).
HTML5 الدرس الخامس فى
HTML5 New Attributes For Form And Input
(1)Autocomplete:
وهى عبارة عن خاصية تقوم بحفظ معلومات مستخدم الموقع التى قام بادخالها سابقا فى حقول النصوص للتيسير على المستخدم عند دخولة الموقع مرة اخرى ولها قيمتان الاولى (on) لتشغيل الخاصية والاخرى (off) لغلق الخاصية كالتالى:
<form action=”myform.php” autocomplete=”on”>
First name:<input type=”text” name=”firname”><br>
Last name: <input type=”text” name=”lasname” autocomplete=”off”><br>
<input type=”submit”>
</form>
(2)novalidate && formnovalidate && required:
حيث الخاصية الاولى تقوم بتمرير بيانات المستخدم دون مراجعة صيغتها ومثال على ذلك اذا ادخل المستخدم ايميل بشكل خاطىء اى بدون صيغة الايميل المعروفة (example@anymail.domaine) وتعمل هذة الخاصية مع تاج (form) والخاصية الثانية تقوم بنفس المهمة مع الفرق انها تعمل مع تاج (input) اما الخاصية الثالثة فهى تجبر المستخدم على ادخال بيانات فى الحقل النصى اى عدم تركها فارغة كالتالى:
(a)novalidate:
<form action=”myform.php” novalidate>
E-mail: <input type=”email” name=”mail”>
<input type=”submit”>
</form>
(b)formnovalidate:
<form action=”myform.php” novalidate>
E-mail: <input type=”email” name=”mail”>
<input type=”submit” formnovalidate>
</form>
(c)required:
<form action=”myform.php”>
Fullname: <input type=”text” name=”funame” required>
<input type=”submit”>
</form>
(3)Autofocus:
وهى عبارة عن خاصية تعمل على تركيز الماوس على حقل نصى مثلا عند تحميل الصفحة كالتالى:
First name:<input type=”text” name=”firname” autofocus><br>
(4)placeholder:
وهى عبارة عن خاصية تظهر نص داخل الحقول لتعرف مستخدم الموقع بنوع البيانات التى يدخلها كالتالى:
<input type=”text” name=”firname” >
(5)Height and Weight Of Input Tag:
عن طريق هذة الخاصية يمكن ضبط طول وعرض تاج (input) كالتالى:
<input type=”image” src=”imgname.extention” width=”30″ height=”40″>
(6)Pattern:
عن طريق هذة الخاصية يتم وضع قيد للمستخدم لادخال حروف وارقام معينة فى حقل النص لا يتعداها وذلك كنوع من حماية حسابات المستخدمين:
<input type=”text” pattern=”[A-Za-z]”>
حيث [A-Za-z] هى عبارة عن (regular expressions) وهنا يتم وضع قيد على مستخدم الموقع لادخال بيانات عن طريق الحروف الكابتل والسمول بداية من ِaA الى zZ فقط ولمعرفة المزيد عن (regular expressions) عن طريق اللينك التالى:
HTML5 الدرس الرابع فى
New Input Types(part 2)
(5)color:
وهو عبارة عن حقل يسمح للمستخدم بختيار لون معين من مجموعة من الالوان.
مثال:
Select your favorite color: <input type=”color” name=”mycolor”>
وهذا النوع يعمل مع متصفحات كالكروم والاوبرا.
(6)search:
وهو عبارة عن حقل يسمح للمستخدم بالبحث كما فى موقع جوجل.
مثال:
Search Google: <input type=”search” name=”gosearch”>
وهذا النوع يعمل مع متصفحات كالكروم والسفارى.
(7)number:
وهو عبارة عن حقل يسمح للمستخدم باختيار رقم واحد من مجموعة من الارقام يتم تحديدها عن طريق اقل قيمة واعلى قيمة:
مثال:
<input type=”number” name=”num” min=”1″ max=”5″>
وهذا النوع يعمل مع متصفحات كالكروم والسفارى والاوبرا والانترنت اكسبلور.
(8)range:
وهو عبارة عن حقل يسمح للمستخدم باختيار قيمة من التدريج:
مثال:
<input type=”range” name=”myrange” min=”1″ max=”10″>
وهذا النوع يعمل مع متصفحات كالكروم والسفارى والاوبرا والانترنت اكسبلور.
New Form Elements
(1)datalist:
وهو عبارة عن حقل نصى عند عمل دبل كليك علية تخرج قائمة للمستخدم للاختيار من متعدد.
مثال:
<form action=”myform.php” method=”get”>
<input list=”browsers” name=”mybrowser”>
<datalist id=”browsers”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
</datalist>
<input type=”submit”>
</form>
وهذا النوع يعمل مع متصفحات كالكروم والفيرفوكس والاوبرا والانترنت اكسبلور.
(2)keygen:
والكيجن هو طريقة امنة لحماية حسابات مستخدمين المواقع من حيث اسم المستخدم والباسورد .
مثال:
<form action=”mykeygen.php” method=”get”>
Passwowd: <input type=”text” name=”pass”>
Encryption: <keygen name=”mykegen”>
<input type=”submit”>
</form>
وهذا النوع يعمل مع متصفحات كالكروم والفيرفوكس والاوبرا والسفارى.
HTML5 الدرس الثالث فى
New Input Types(part 1)
يوجد العديد من الانواع الجديدة التى تم اضافتها الى تاج <input> من اجل عمل تحكم علية وتحسين الحماية ولكن هناك مشكلة فى ان هذة الاضافات الجديدة تعمل فقط على بعض المتصفحات وليس كلها وهى كالتالى:
(1)Email:
وهوعبارة عن حقل يسمح للمستخدم بادخال ايميلة بصورة صحيحة واذا كان الايميل غير صحيح فلا يقبل وتخرج رسالة تحذيرية.
مثال:
<form action=”myform.php”>
Email: <input type=”email” name=”mail”>
<input type=”submit”>
</form>
وهذا النوع يعمل مع متصفحات كجوجل كروم والفيرفوكس والانترنت اكسبلور وايضا متصفح اوبرا.
(2)URL:
وهو عبارة عن حقل يسمح للمستخدم بادخال اسم موقعة بصورة صحيحة واذا كان اسم الموقع غير صحيح فلا يقبل وتخرج رسالة تحذيرية.
مثال:
<form action=”myform.php”>
Name of yoursite: <input type=”url” name=”mysite”>
<input type=”submit”>
</form>
وهذا النوع يعمل مع متصفحات كجوجل كروم والفيرفوكس والانترنت اكسبلور وايضا متصفح اوبرا.
(3)Date && time && datetime-local:
حيث الحالة الاولى عبارة عن حقل يسمح للمستخدم بادخال التاريخ بصورة سهلة والحالة الثانية فتسمح للمستخدم بادخال الوقت اما الحالة الثالثة فتسمح بادخال التاريخ والوقت معا.
مثال على الحالة الاولى:
Enter your birthday: <input type=”date” name=”mydate”>
<input type=”submit”>
</form>
مثال على الحالة الثانية:
Enter the time: <input type=”time” name=”mytime”>
<input type=”submit”></form>
مثال على الحالة الثالثة:
Enter your birthday with time : <input type=”datetime-local” name=”mydatetime”>
<input type=”submit”>
</form>
وهذا النوع يعمل مع متصفحات كجوجل كروم والاوبرا والسفارى.
(4)Month && Week:
حيث الحالة الاولى عبارة عن حقل يسمح للمستخدم بادخال الشهر والسنة والحالة الثانية فتسمح للمستخدم بادخال الاسبوع والسنة.
مثال على الحالة الاولى:
Enter your Birthday (month and year): <input type=”month” name=”mymonth”>
<input type=”submit”>
</form>
مثال على الحالة الثانية:
Enter Week: <input type=”week” name=”myweek”>
<input type=”submit”></form>
وهذا النوع يعمل مع متصفحات كجوجل كروم والاوبرا والسفارى.
HTML5 الدرس الثانى فى
Video and Audio
من المعروف انة لتشغيل فيديوهات او صوتيات على مواقع الانترنت فذلك يتطلب منا ان نقوم بتسطيب برنامج كالفلاش لتشغيل الفيديوهات او الصوتيات لكن مع هذا الاصدار من لغة (HTML) نستطيع مشاهدة الفيديوهات او سماع الصوتيات مباشرة بدون الحاجة الى تسطيب برامج.
(1)Video:
التاج المستخدم فى اداج فيديو فى صفحة الويب هو <video></video> كالتالى:
<!DOCTYPE html>
<html>
<body>
<video width=”290″ height=”180″ controls>
<source src=”videoname.mp4″ type=”video/mp4″>
</video>
</body>
</html>
حيث يتم تحديد عرض وطول الفيديو داخل تاج (video) وايضا يمكن استخدام كلمة (controls) للتحكم فى تشغيل وتوقيف الفيديو وايضا التحكم فى درجة الصوت.ويستخدم مع تاج (video) تاج (source) وهو المسئول عن تحديد مسار الفيديو من الجهاز وايضا تحديد صيغة الفيديو ومن امثلتها (MP4,WebM,Ogg) حيث (MP4) تعمل مع متصفحات (Firefox, Explorer,Chrome,Safar) اما (Ogg,WebM) فتعمل مع متصفحات (Firefox,Opera,Chrome) ولا بد ان تسبق اسم صيغة الفيديو كلمة (video) كما فى المثال السابق.
(2) Audio:
مثال:
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src=”audioname.ogg” type=”audio/ogg”>
</audio>
</body>
</html>
وبالمثل كما ذكرنا سابقا فان صيغ الاوديو هى (Ogg,Wav,MP3) حيث (MP3) تعمل مع متصفحات (Safari, Explorer ,Chrome) اما (Wav) فتعمل مع متصفحات(Firefox,Opera,Safari, Chrome) كما ان (Ogg) فتعمل مع متصفحات(Chrome, Firefox,Opera).
– فى الحالتين السابقتين الخاصة بالفيديوهات والصوتيات يمكن تكرار تاج (source) لضمان تشغيل الفيديوهات او الصوتيات على كل المتصفحات كالتالى:
<video width=”320″ height=”240″ controls>
<source src=”videoname.mp4″ type=”video/mp4″>
<source src=”videpname.ogg” type=”video/ogg”>
<source src=”videpname.webm ” type=”video/webm “>
</video>
وبالمثل مع الاوديو.
HTML5 الدرس الاول فى
New Elements in HTML5
ظهرت عناصر جديدة فى لغة (HTML5) لتسهيل وتوفير الوقت على مصممى المواقع فى كتابة وتنظيم الكود فمن المعروف ان مصممى المواقع عند قيامهم بتصميم موقع فانهم يقسمون اكواد الموقع الى عدة اجزاء هى كالتالى:
<“div id=”nav”>,<div id=”content”>,<div id=”header”>, <div id=”footer>
لكن مع اصدار (HTML5) ظهرت عناصر افضل لتنظيم كود الموقع وهذة العناصر هى:
(1)Header:
وداخل هذا التاج توضع الاكواد الخاصة براس الموقع كالتالى:
<header>
The code of header put here………..
</header>
(2)Navigation Bar:
وداخل هذا التاج توضع الاكواد الخاصة بالشريط الموجود اسفل راس الموقع كالتالى:
<nav>
<a href=”/h/”>HTML</a> |
<a href=”/c/”>CSS</a> |
<a href=”/js/”>JavaScript</a> |
<a href=”/p/”>PHP</a>
</nav>
وتظهر بصفحة الويب كالتالى:
HTML | CSS | JavaScript | jQuery
(3)Footer:
وداخل هذا التاج توضع الاكواد الخاصة بذيل الموقع كالتالى:
<footer>
The code of footer put here………..
</footer>
(4)Section:
عن طريق هذا التاج يمكن ان نقسم محتوى الموقع الى مجموعة من الاقسام كالتالى:
<section>
<h1>HTML</h1>
<p>HTML or HyperText Markup Language is the main markup language for creating web pages and other information that can be displayed in a web browser..</p>
</section>
<section>
<h1>JavaScript</h1>
<p>JavaScript (JS) is a dynamic computer programming language.[5] It is most commonly used as part of web browsers.</p>
</section>
<section>
<h1>CSS</h1>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.</p>
</section>
(5)Article:
يستخدم هذا التاج فى العديد من المهام من اهمها عمل التعليقات فى الموقع او لوضع اعلانات داخل الموقع كالتالى:
<article>
<h1>Put your comment</h1>
<p>Comments at least 10 letter</p>
</article>
(6)Aside:
يستخدم هذا التاج لوضع محتوى بجانب الصفحة ولابد ان يكون ذو صلة بالمحتوى المحيط بة كالتالى:
<aside>
<h4>PHP</h4>
<p> PHP is a server-side scripting language designed for web development.</p>
</aside>
ويمكن ان نلخص التاجات السابقة فى الصورة التالية:
ملاحظة:
متصفحات الويب التى تدعم الاكواد السابقة هى:
(Internet Explorer 9+, Firefox, Chrome, Safari, Opera) فقط.
HTML5 مقدمة فى
لغة (HTML5) هى الاصدار الاخير من لغة (HTML) وفى هذا الاصدار ظهرت مجموعة من العناصر الجديدة التى ستاثر بشكل كبير على مستقبل الويب وتطبيقاتة فاصبحت لغة (HTML5) تضم مجموعة متميزة من الواجهات البرمجية (API) ومنها على سبيل المثال اصبح يمكن ادراج ملفات الصوت والفيديو داخل صفحات الويب والتى تغنى مستخدمين المواقع من تسطيب برنامج الفلاش لتشغيل الفيديوهات على المواقع فمع لغة (HTML5) يمكن تشغيل الفيديوهات على المواقع مباشرة دون الحاجة الى برامج تشغيل الفيديوهات.ايضا فان لغة (HTML5) توفر أدوات لا حصر لها للرسم و تحريك العناصر سنتعلمها بالتفصيل فى الدروس القادمة.كما ان لغة (HTML5) وفرت المزيد من الوسوم (tags) مثل:
(section ,calendar, date, time, email, url, search,article, footer, header, nav)
بهدف تنظيم الكود بشكل أكبر و تبسيطه لمصممى المواقع وتيسير للمبرمج ببناء تطبيقات تفاعلية متميزة .ومميزات كثيرة داخل هذا الاصدار من اللغة سنتعلمها باذن اللة فى الدروس القادمة.
JQuery الدرس السادس فى
jQuery Effects
الجزء الخامس والاخير
Chaining:
يمكن جمع اكثر من (effect) فى سطر واحد كالتالى:
مثال:
<!DOCTYPE html>
<html>
<head>
<script src=”jquery-1.10.2.min.js”>
$(document).ready(function()
{
$(“button”).click(function(){
$(“#p1”). slideUp(1000).slideDown(3000);
});
});
</script>
</head>
<body>
<p id=”p1″>jQuery chaining</p>
<button>Click here</button>
</body>
</html>
استخدام لغة (CSS) مع (JQuery)
يمكن استخدام لغة (CSS)مع الجى كويرى وذلك لتغيير الاستايل الخاص باكواد (HTML) كالتالى:
مثال:
<!DOCTYPE html>
<html>
<head>
<script src=”jquery-1.10.2.min.js”>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).css(“background-color”,”blue”);
});
});
</script>
</head>
<body>
<p style=”background-color:#ff0000″>Hello.</p>
<button>click here</button>
</body>
</html>
وفى حالة كتابة اكثر من خاصية داخل الاستايل فتكون كالتالى:
$(“p”).css({“background-color”:”blue”,”font-size”:”16px”});
JQuery الدرس الخامس فى
jQuery Effects
الجزء الرابع
(5)Animate effects:
وهى دالة تقوم بعمل تاثير حركة جزء معين من صفحة الويب عند الضغط عليها كالتالى:
مثال:
<!DOCTYPE html>
<html>
<head>
<script src=”jquery-1.10.2.min.js” >
$(document).ready(function(){
$(“button”).click(function(){
$(“div”).animate({left:’300px’});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<div style=”background:blue;height:120px;width:100px;position:absolute;”>
</div>
</body>
</html>
حيث عند الضغط على (button) يتحرك الصندوق الناتج من كود( div) ناحية اليمين على بعد (300px) من جهة اليسار ويمكن تغير اتجاة حركتة عن طريق تغيير كلمة (left) الى (right).
(6)stop effects:
وهى دالة تقوم بايقاف تاثير اى حدث من الاحداث السابقة التى تعلمناها قبل ان ينتهى كالتالى:
مثال:
<!DOCTYPE html>
<html>
<head>
<script src=”jquery-1.10.2.min.js” >
$(document).ready(function(){
$(“#start”).click(function(){
$(“#panel”).slideDown(5000);
});
$(“#stop”).click(function(){
$(“#panel”).stop();
});
});
</script>
<style type=”text/css”>
panel#
{
padding:5px;
background-color:blue;
}
</style>
</head>
<body>
<button id=”start”>start sliding</button>
<button id=”stop”>Stop sliding</button>
<div id=”panel”> sliding </div>
</body>
</html>
حيث عند الضغط على (button) الاول يتم تنفيذ حدث (slide down) وعند الضغط على (button) الثانى يتوقف حدث (slide down) فى ذلك الوقت الذى يتم فية الضغط على (button) وبالمثل يمكن استخدام دالة (stop) مع باقى الاحداث.
JQuery الدرس الرابع فى
jQuery Effects
الجزء الثالث
(4)Sliding effects:
وهى دالة تقوم بعمل تاثير انزلاق لجزء معين من صفحة الويب عند الضغط عليها ولها ثلاث انواع كالتالى:
|
Sliding type |
الشرح |
| slideDown() |
تقوم بعمل انزلاق لاسفل |
| slideUp() |
تقوم بعمل انزلاق لاعلى |
| slideToggle() |
تقوم بدمج الحالتين السابقتين معا |
(a)slideDown effects:
مثال:
<!DOCTYPE html>
<html>
<head>
<script src=”jquery-1.10.2.min.js”>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div”).slideDown();
});
});
</script>
</head>
<body>
<button>Click to see slideDown effect</button>
<br><br>
<div id=”div” style=”width:80px;height:80px;display:none;background-color:red;”></div><br>
</body>
</html>
(b)slideUp effects:
مثال:
<!DOCTYPE html>
<html>
<head>
<script src=”jquery-1.10.2.min.js”>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div”).slideUp();
});
});
</script>
</head>
<body>
<button>Click to see slideUp effect</button>
<br><br>
<div id=”div” style=”width:80px;height:80px;display:none;background-color:red;”></div><br>
</body>
</html>
(c)slideToggle effects:
مثال:
<!DOCTYPE html>
<html>
<head>
<script src=”jquery-1.10.2.min.js”>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div”).slideToggle();
});
});
</script>
</head>
<body>
<button>Click to see slideToggle effect</button>
<br><br>
<div id=”div” style=”width:80px;height:80px;display:none;background-color:red;”></div><br>
</body>
</html>
jQuery الدرس الثالث فى
jQuery Effects
الجزء الثانى
(3)Fading effects:
وهى دالة تقوم بعمل تاثير اخفاء او اظهار جزء معين من صفحة الويب ولكن بصورة تدريجية ولها اربع انواع كالتالى:
|
Fading type |
الشرح |
|
fadeIn() |
تقوم باظهار كود معين بصورة تدريجية |
|
fadeOut() |
تقوم باخفاء كود معين بصورة تدريجية |
|
fadeToggle() |
تقوم بعمليتى الاظهار والاخفاء معا |
|
fadeTo() |
تتحكم فى درجة الشفافية او اللون لكود معين فى الصفحة |
(a)fadeIn effects:
مثال:
<!DOCTYPE html>
<html>
<head>
<script src=”jquery-1.10.2.min.js”>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div”).fadeIn();
});
});
</script>
</head>
<body>
<button>Click to see fade in effect</button>
<br><br>
<div id=”div” style=”width:70px;height:70px;display:none;background-color:blue;”></div><br>
</body>
</html>
ويمكن استخدام بارمتر مع هذة الدالة لتحديد سرعة الظهور وهما ثلاث انواع (slow,fast) او النوع الثالث عن طريق الثوانى والتى تم شرحها بالدرس السابق كالتالى:
<!DOCTYPE html>
<html>
<head>
<script src=”jquery-1.10.2.min.js”>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeIn(“slow”);
$(“#div2”).fadeIn(3000);
});
});
</script>
</head>
<body>
<button>Click to see fade in effect</button>
<br><br>
<div id=”div1″ style=”width:70px;height:70px;display:none;background-color:red;”></div><br>
<div id=”div2″ style=”width:70px;height:70px;display:none;background-color:blue;”></div><br>
</body>
</html>
(b)fadeOut effects:
مثال:
<!DOCTYPE html>
<html>
<head>
<script src=”jquery-1.10.2.min.js”>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeOut();
$(“#div2”).fadeOut(“slow”);
$(“#div3”).fadeOut(3000);
});
});
</script>
</head>
<body>
<button>Click to see fade out effect</button>
<br><br>
<div id=”div1″ style=”width:70px;height:70px;background-color:green;”></div><br>
<div id=”div2″ style=”width:70px;height:70px;background-color:red;”></div><br>
<div id=”div3″ style=”width:70px;height:70px;background-color:blue;”></div>
</body>
</html>
(c)fadeOut effects:
مثال:
<!DOCTYPE html>
<html>
<head>
<script src=”jquery-1.10.2.min.js”>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeToggle();
$(“#div2”).fadeToggle(“slow”);
$(“#div3”).fadeToggle(3000);
});
});
</script>
</head>
<body>
<button>Click to see fade in/out effect</button>
<br><br>
<div id=”div1″ style=”width:70px;height:70px;background-color:red;”></div>
<br>
<div id=”div2″ style=”width:70px;height:70px;background-color:green;”></div>
<br>
<div id=”div3″ style=”width:70px;height:70px;background-color:blue;”></div>
</body>
</html>
(d)fadeTo effects:
وهذة الدالة تاخذ بارمترين الاول عبارة عن تحديد سرعة الظهور (slow,fast,millisecond) والثانى عبارة عن تحديد درجة الشفافية للون والتى يكون قيمتها محصورة بين (0,1) كالتالى:
مثال:
<!DOCTYPE html>
<html>
<head>
<script src=”jquery-1.10.2.min.js”>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).fadeTo(“slow”,0.25);
$(“#div2”).fadeTo(“slow”,0.3);
});
});
</script>
</head>
<body>
<button>Click to see fade to effect</button>
<br><br>
<div id=”div1″ style=”width:70px;height:70px;background-color:blue;”></div><br>
<div id=”div2″ style=”width:70px;height:70px;background-color:red;”></div><br>
</body>
</html>
JQuery الدرس الثانى فى
jQuery Effects
الجزء الاول
وهى عبارة عن دوال تستخدم لعمل تاثيرات على جزء معين فى صفحة الويب كالاخفاء والاظهار والانيميشن وغيرها كالتالى:
(1)hide,show effects:
وهى دوال تقوم بعمل تاثير اخفاء (hide) جزء معين من صفحة الويب او اظهارة (show) كالتالى:
<!DOCTYPE html>
<html>
<head>
< src=”jquery-1.10.2.min.js” script>
$(document).ready(function(){
$(“#hide”).click(function(){
$(“p”).hide();
});
$(“#show”).click(function(){
$(“p”).show();
});
});
</script>
</head>
<body>
<p> click on the “Hide” button to disappear me.</p>
<button id=”hide”>Hide</button>
<button id=”show”>Show</button>
</body>
</html>
حيث الكود السابق عبارة عن (button) الاول عند الضغط علية يقوم باخفاء النص الموجود فى كود البارجراف اما (button) الثانى عند الضغط علية يقوم بعرض النص مرة اخرى.
ايضا يمكن التحكم بسرعة اخفاء النص عن طريق استخدام بارمتر مع دالة (hide) يتم فية تحديد سرعة اخفاء النص كالتالى:
<!DOCTYPE html>
<html>
<head>
<script src=” jquery-1.10.2.min.js “>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).hide(1000);
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>the text will disappear after one second.</p>
</body>
</html>
حيث البارمتر (1000) يقوم باخفاء النص بعد ثانية واحدة وبالمثل (2000) بعد ثانيتين وهكذا.
(2)toggle effects:
هذة الدالة تقوم بعمل مهمة (hide,show) معا كالتالى:
<!DOCTYPE html>
<html>
<head>
<script src=” jquery-1.10.2.min.js “>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<p>toggle effects can hide and show together.</p>
</body>
</html>
JQuery الدرس الاول فى
Syntax
كما قلنا سابقا ان الجى كويرى هى اطار عمل للغة الجافا سكريبت لذلك تكتب اكوادها بين اكواد الجافا سكريبت ولابد من تعريف مكتبة الجى كويرى كما تعلمنا سابقا والشكل العام لكتابة اكواد الجى كويرى كالتالى:
$(selector).action()
حيث نستخدم علامة الدولار ($) فى بداية السطر للتعريف باننا نكتب اكواد جى كويرى ثم بعد ذلك (selector) وهى عبارة عن اكواد (HTML) ثم (action) وهى عبارة عن الحدث الذى يتم تنفيذة.
selector
|
مثال |
Selector |
|
$(“p”) |
Tag of HTML |
|
$(“#test”) |
#id Selector |
|
$(“.test”) |
.class Selector |
|
$(this) |
Selector of the current HTML element |
|
$(“*”) |
Selector of all HTML elements |
actions or events
|
مثال |
الشرح |
Events |
|
$(“p”).click() |
حدث الضغط على الماوس |
click |
|
$(“p”). dblclick() |
حدث الضغط مرتين على الماوس |
dblclick |
|
$(“#p”). mouseenter() |
حدث اثناء وضع الماوس على جزء معين بالصفحة |
mouseenter |
|
$(“#p”). mouseleave() |
حدث اثناء رفع الضغط على الماوس |
mouseleave |
|
$(“#p”). keypress() |
حدث الضغط على زر من ازرار الكيبورد |
keypress |
|
$(“#p”). keydown() |
حدث اثناء الضغط لاسفل على زر من ازرار الكيبورد |
keydown |
|
$(“#p”). keyup() |
حدث اثناء رفع الضغط على زر من ازرار الكيبورد |
keyup |
|
$(“.div”). submit() |
حدث الضغط على زر submit |
submit |
|
$(“.div”). focus() |
حدث اثناء التركيز بالماوس على شىء معين فى صفحة الويب |
focus |
|
$(“.div”). blur() |
حدث اثناء ابعاد التركيز بالماوس على شىء معين فى صفحة الويب |
blur |
|
$(“h1”). load() |
حدث عند تحميل الصفحة |
load |
|
$(“h1”). unload() |
حدث فى حالة عدم تحميل الصفحة |
unload |
The Document Ready Event:
يفضل وضع اكواد الجى كويرى بين حدث (document ready) لتجنب حدوث مشاكل عند كتابة الاكواد كالتالى:
$(document).ready(function(){
// jQuery code here
});
امثلة:
(1)
<!DOCTYPE html>
<html>
<head>
< src=”jquery-1.10.2.min.js” script>
$(document).ready(function(){
$(“p”).click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Click me </p>
<p>Click me too</p>
</body>
</html>
حيث عند تنفيذ حدث الضغط على كود البارجراف (p) يختفى النص المكتوب بداخلة.
(2)
<!DOCTYPE html>
<html>
<head>
< src=”jquery-1.10.2.min.js” script>
$(document).ready(function(){
$(“#p1”).mouseleave(function(){
alert(“bye now!”);
});
});
</script>
</head>
<body>
<p id=”p1″>move mouse</p>
</body>
</html>
حيث عند ابعاد الماوس من على النص (move mouse) تخرج رسالة تحذيرية.
(3)
<!DOCTYPE html>
<html>
<head>
< src=”jquery-1.10.2.min.js” script>
$(document).ready(function(){
$(“.p1”).mouseenter(function(){
alert(“bye now!”);
});
});
</script>
</head>
<body>
<p>move mouse</p>
</body>
</html>
حيث عند الوقوف بالماوس على النص (move mouse) تخرج رسالة تحذيرية.
OOP الدرس الرابع فى
Encapsulation
هى عمليه إخفاء لكود معين لان فى هذه الحالة المبرمج المستخدم لا يهمه فى المقام الأول معرفة هذاالكود ولكن يهمه ماذا يفعل بهذا الكود وهى عملية تعتبر مبنى عليها اغلبية الفريمورك كالكوداجنيتر والكيك بى اتش بى وغيرها الكثير حيث يكون فيها اكواد جاهزة يستخدمها المبرمج بدون الحاجة لمعرفة طريقة كتابتها ككلاسات الايميل و(pagnation)وغيرها فالمبرمج ليس بحاجة مثلا لكتابة كود ارسال الايميلات بنفسة فهى عبارة عن كلاسة جاهزة بالفريم ورك يستخدمها مباشرة وذلك يوفر على المبرمج الوقت والجهد فى كتابة اكواد كثيرة.
مثال:
يتم عمل (Encapsulation) عن طريق عمل دالة يكون مستوى وصولها هى (private) ثم نقوم بعمل دالة اخرى فى كلاس جديد يكون مستوى وصولها (public) بحيث ان هذة الدالة الجديدة يمكن استدعاء الدالة القديمة عن طريقها كالتالى:
(1)In PHP:
<?php
class Animal
{
private function getName($name)
{
echo “This is the “.$name.” Class”;
}
}
class Cow extends Animal
{
public function sayName()
{
$this->getName(get_class($this));
}
}
?>
(2)In C#:
class Animal
{
private getName(string name)
{
Console.WriteLine(“This is the nameproperty”);
}
}
class Cow : Animal
{
public sayName()
{
this.getName(get_class(this));
}
}
OOPالدرس الثالث فى
1-Overloading:
هو عبارة عن كتابة أكثر من دالة او (Method) بنفس الاسم مع اختلاف في الباراميتر من حيث ترتبهم أو أنواعهم وبالتالى تصبح هذة الدالة لها اكثر من استخدام اى متعددة الاستخدام كالتالى:
(1)In PHP:
class A
{
public function func1($var1)
{
echo “hello from func1 with parameter as var1”;
}
public function func1($var1,$var2)
{
echo “hello from func1 with parameter as var1 and var2”;
}
}
وكما هو ملاحظ فان الدالة (func1) يمكن ان تاخذ بارمتر واحد او بارمترين ويمكن ايضا تكرار هذة الدالة مع زيادة عدد البارمترات للقيام بمهام متعددة.
(2)In C#:
class A
{
public int func1(int num1,int num2)
{
return num1 + num2;
}
public int func1(int num1, int num2, int num3)
{
return num1 + num2 + num3;
}
}
وكما هو ملاحظ فان الدالة (func1) يمكن ان تاخذ بارمترين عبارة عن عددين صحيحين وترجع بمجموعهم او ثلاث بارمترات عبارة عن اعداد صحيحة وترجع بمجموعهم ويمكن ايضا تكرارهذة الدالة مع زيادة عدد البارمترات للقيام بمهام متعددة.
2-Inheritance:
يعتبر مفهوم الوراثة من اهم المفاهيم فى (OOP) ولفهم مبدا الوراثة ببساطة لو اعتبرنا أن شركة (NISSAN) للسيارات هي الأب و هذه الشركة لها أبناء هم :سيارة (sunny) وسيارة (Maxima) بحيث أن هؤلاء الأبناء يرثون جميع صفات الأب ” شركة ” (NISSAN) بالإضافة إلى ذلك فكل ابن منهما يتفرد بصفات خاصة به
فهذا بكل بساطة مبدأ الوراثة.وبالتالى لو فرضنا اننا لدينا كلاس (A) هذا الكلاس بة مجموعة من الدوال فيمكن ان نقوم بعمل كلاس اخر وليكن كلاس (B) هذا الكلاس يمكن ان يرث كل الخصائص الموجودة فى كلاس (A) سواء كانت (Method,Attribute) ومعنى ان كلاس (B) يرث كلاس (A) اى ان كل (Method,Attribute) الموجودة فى كلاس (A) تصبح موجودة فى كلاس (B) كالتلى:
(1)In PHP:
class A
{
public function printItem($string)
{
echo ‘A: ‘ . $string ;
}
public function printPHP()
{
echo ‘PHP is great.’ ;
}
}
class B extends A
{
public function printItem($string)
{
echo ‘B: ‘ . $string ;
}
}
ويتم عمل الوارثة عن طريق استخدام كلمة (extends) حيث كلاس (B) يرث من كلاس (A) ومن هنا يمكن الوصول لاى دالة من كلاس (A) عن طريق كلاس (B) كالتالى:
$B = new B();
$B->printPHP();
(2)In C#:
class A
{
public int func1(int num1,int num2)
{
return num1 + num2;
}
public int func1(int num1, int num2, int num3)
{
return num1 + num2 + num3;
}
}
class B:A
{
public function func2(float num1,float num2)
{
return num1 + num2;
}
}
ويتم عمل الوارثة عن طريق استخدام (:) حيث كلاس (B) يرث من كلاس (A) ومن هنا يمكن الوصول لاى دالة من كلاس (A) عن طريق كلاس (B) كالتالى:
B b1= new B() ;
b1.fun1();
3-Overrides:
وهذ المفهوم هو مرتبط بمبدا الوراثة وهو عبارة عن أننا تقوم بتعريف دالة لها نفس الاسم والباراميترات من الدالة التى تم توريثها من خلال الكلاس الأب مع تغيير مهمة هذة الدالة الجديدة كالتالى:
(1)In PHP:
class A {
public function test($param) {
echo “the parameter value is $param”;
}
}
class B extends A {
public function test($param) {
echo “the new parameter value is $param”;
}
}
وللوصول لهذة الدالة بقيمتيها المختلفة كالتالى:
$objA = new A;
$objB = new B;
$objA->test(‘class A’);
$objB->test(‘class B’);
(2)In C#:
class A
{
public virtual test()
{
Console.WriteLine(“test”);
}
}
class B : A
{
public override test()
{
Console.WriteLine(“new test”);
}
}
فى حالة عمل (Override) فى لغة السى شارب لابد من وضع كلمة (virtual) مع الدالة فى الكلاس الاول ووضع كلمة (override) مع هذة الدالة فى الكلاس الذى يرث من الكلاس السابق.
SQL الدرس السادس فى
JOINS
تستخدم (JOINS) فى جلب الصفوف من جدولين او اكثر فى نفس الوقت معتمدة على حقل مشترك بين الجداول ولها اربع انواع كالتالى:
|
الوظيفة |
النوع |
|
تقوم بجلب الصفوف من جدولين او اكثر فى نفس الوقت معتمدة على حقل مشترك بين الجداول. |
INNER JOIN |
|
تقوم بجلب الصفوف من الجدول الاول(LEFT) فقط والمتطابقة مع الجدول الثانى(RIGHT). |
LEFT JOIN |
|
تقوم بجلب الصفوف من الجدول الثانى(RIGHT) فقط والمتطابقة مع الجدول الاول(LEFT). |
RIGHT JOIN |
|
تقوم بجلب الصفوف من كلتى الجدولين اى تجمع الحالتين السابقتين. |
FULL OUTER JOIN |
والان نفرض ان لدينا جدولين كالتالى:
(1)table1(Goods):
|
GoodsID |
ClientID |
|
234 |
2 |
|
853 |
70 |
|
920 |
56 |
(2)table2(Clients):
|
ClientID |
ClientName |
Country |
|
1 |
Ali hamada |
Egypt |
|
2 |
Ahmed mostafa |
Qatar |
|
3 |
Omar leli |
Ardan |
لاحظ انة: يوجد حقل مشترك بين الجدولين وهو(ClientID) لانة فى حالة استخدام جمل استعلام (Joins) لابد ان يكون هناك حقل مشترك.
امثلة:
1-INNER JOIN:
FROM Goods
INNER JOIN Clients
ON Goods.ClientsID=Clients.ClientsID;
ويكون الناتج كالتالى:
|
ClientID |
ClientName |
Country |
|
2 |
Ahmed mostafa |
Qatar |
2-LEFT JOIN:
FROM Goods
LEFT JOIN Clients
ON Goods.ClientsID=Clients.ClientsID;
ويكون الناتج كالتالى:
|
ClientID |
|
2 |
3-RIGHR JOIN:
FROM Clients
RIGHT JOIN Goods
ON Clients.ClientsID= Goods.ClientsID;
ويكون الناتج كالتالى:
|
ClientName |
Country |
GoodsID |
|
Ahmed mostafa |
Qatar |
234 |
4-FULL OUTER JOIN:
FROM Goods
FULL OUTER JOIN Clients
ON Goods.ClientsID=Clients.ClientsID;
ويكون الناتج كالتالى:
|
ClientID |
ClientName |
Country |
|
2 |
Ahmed mostafa |
Qatar |
ملاحظة:بالنسبة للحالة الاولى(INNER JOIN) يمكن كتابتها اختصارا (JOIN) اى يمكن اهمال كلمة (INNER).
sql الدرس الخامس فى
الجزء الثالث
(9)FIRST() Function && LAST() Function:
دالة (first) تقوم بجلب العنصر الاول من عمود معين داخل الجدول بقاعدة البيانات وعلى العكس دالة (last) تقوم بجلب العنصر الاخير والشكل العام لاستخدامهما كالتالى:
SELECT FIRST(column_name) FROM table_name;
SELECT LAST(column_name) FROM table_name;
حيث(column_name)هو اسم العمود بالجدول ,( (table_nameهو اسم الجدول.
مثال:
SELECT FIRST(ProductName) FROM products;
ويكون الناتج كالتالى:
shoes
SELECT LAST(ProductName) FROM products;
ويكون الناتج كالتالى:
jacket
(10)UCASE() Function && LCASE() Function:
دالة (ucase) تقوم بتحويل شكل النص من احرف سمول الى احرف كابتل وعلى العكس دالة (lcase) تقوم بتحويل شكل النص من احرف كابتل الى احرف سمول والشكل العام لاستخدامهما كالتالى:
SELECT UCASE(column_name)FROM table_name;
SELECT LCASE(column_name)FROM table_name;
حيث(column_name)هو اسم العمود بالجدول ,( (table_nameهو اسم الجدول.
مثال:
SELECT UCASE(ProductName) FROM products;
ويكون الناتج كالتالى:
SHOES
T-SHIRT
JACKET
php الدرس السابع عشر فى
PHP Database(part3)
(3)Update:
وهذا النوع من الاستعلام يستخدم فى التعديل على الداتا داخل قاعدة البيانات والشكل العام لاستخدامها كالتالى:
UPDATE table_name
SET column1=value, column2=value2,…
WHERE some_column=some_value
حيث (table_name) هو اسم الجدول بقاعدة البيانات.اما جملة (SET) فهى المسئولة عن عملية تعديل الداتا حيث (column1,colume2,…) هى اسماء الحقول داخل الجدول , (value,value2,…) هى عبارة عن القيم الجديدة التى تم تعديلها. ولا بد من استخدام كلمة (where) مع جملة تعديل الداتا وذلك لمعرفة على اى صف سيتم تعديل بياناتة داخل الجدول بقاعدة البيانات والا سيتم التعديل على كل صفوف الجدول لذلك لا بد من الحظر اثناء التعامل مع هذا الاستعلام.
مثال:
<?php
$con=mysqli_connect(“localhost”,””,””,”product”);
mysqli_query($con,”UPDATE products SET name=’oil’ AND type=’tin’
WHERE id=’1′”);
mysqli_close($con);
?>
بحيث انة تم التعديل على جدول (products) على العنصر رقم 1 فتم تعديل الاسم من (sugar) الى (oil) وايضا تم تعديل النوع من (packet) الى (tin).
(4)Delete:
وهذا النوع من الاستعلام يستخدم فى اجراء عملية حذف داتا من قاعدة البيانات والشكل العام لاستخدامها كالتالى:
DELETE FROM table_name
WHERE some_column = some_value
ويتم استخدام كلمة (WHERE) مع هذا النوع من الاستعلام لتحيد اى صف سيتم حذفة من قاعدة البيانات واذا لم يتم استخدامها فسوف تقوم جملة الاستعلام بحذف الجدول بكاملة لذلك كن حذرا فى التعامل مع هذان النوعان من الاستعلام (UPDATE,DELETE).
مثال:
<?php
$con=mysqli_connect(“localhost”,””,””,”product”);
mysqli_query($con,”DELETE FROM products WHERE name=’sugar’ “);
mysqli_close($con);
?>
php الدرس السادس عشر فى
PHP Database(part2)
(2)Select:
وهذا النوع من الاستعلام يستخدم فى تحديد وجلب الداتا من قاعدة البيانات والشكل العام لاستخدامها كالتالى:
SELECT column_name FROM table_name
حيث (column_name) هو اسم حقل داخل الجدول بقاعدة البيانات. اما (table_name) فهو اسم الجدول.
ويمكن جلب كل الداتا داخل الجدول بقاعدة البيانات عن طريق استخدام علامة ستار (*) كالتالى:
SELECT * FROM table_name
مثال:
<?php
$con=mysqli_connect(“localhost”,””,””,”product”);
mysqli_query($con,”SELECT * FROM table1″);
mysqli_close($con);
?>
بالمثال السابق نكون قد استطعنا جلب كل الداتا الموجودة داخل الجدول (table1) لكن فى حالة استخدام الاستعلام (select) فلا بد من عمل شيئين اضافيين وهما اولا استخدام دالة (mysqli_fetch_array) وعن طريق هذة الدالة يمكن تنظيم الداتا على شكل مصفوفة والشىء الاخر هو عمل تكرار على هذة الدالة لجلب كل الداتا من قاعدة البيانات كالتالى:
<?php
$con=mysqli_connect(“localhost”,””,””,”product”);
$result =mysqli_query($con,”SELECT * FROM table1″);
while($row = mysqli_fetch_array($result))
{
echo $row[id];
echo “<br>”;
echo $row[‘name’];
echo “<br>”;
echo $row[‘type’];
}
mysqli_close($con);
?>
ويمكن اثناء جلب الداتا من قاعدة البيانات ان نقوم بوضعها داخل جدول فى صفحة الويب كعملية تنظيمية كالتالى:
<?php
$con=mysqli_connect(“localhost”,””,””,”product”);
$result =mysqli_query($con,”SELECT * FROM table1″);
echo “<table border=’1′>
<tr>
<th>ID</th>
<th>Name</th>
<th>Type</th>
</tr>”;
while($row = mysqli_fetch_array($result))
{
echo “<tr>”;
echo “<td>” . $row[id] . “</td>”;
echo “<td>” . $row[‘name’] . “</td>”;
echo “<td>” . $row[‘type’] . “</td>”;
echo “</tr>”;
}
echo “</table>”;
mysqli_close($con);
?>
WHERE clause:
يمكن استخدام كلمة(where) مع الاستعلام وذلك لوضع شرط على الداتا التى تجلب من قاعدة البيانات فمثلا اذا كان لدينا قاعدة بيانات لطلاب بحيث ان هذة القاعدة تحتوى على اسم الطلاب وجميع بيانتهم ونريد ان نحصل على جميع الداتا الخاصة بطالب اسمة (ali mansour) وليكن اسم الجدول الموجود بقاعدة البيانات (student) فتكون جملة الاستعلام كالتالى:
SELECT * FROM student WHERE name=’ali mansour’
php الدرس الخامس عشر فى
PHP Database(part1)
سنشرح باذن اللة فى هذا الجزء عمل قاعدة بيانات والاتصال بيها عن طريق لغة البى اتش بى وانشاء استعلامات على قاعدة البيانات كجلب داتا من قاعدة البيانات او تعديل على الداتا داخل قاعدة البيانات او حذف من قاعدة البيانات وهذا الجزء هو من اهم الاجزاء فى لغة البى اتش بى لان مبرمج او مطور لغة البى اتش بى يعتبر انشاء قواعد البيانات وتنفيذ الاستعلامات عليها هو اساس عملة.ولغة البى اتش بى يمكن لها ان تتصل بمختلف قواعد البيانات كالاوركل والاسكيوال سرفر وغيرها لكنها تعمل بشكل متكامل مع قاعدة بيانات (mysql) وهى من اشهر قواعد البيانات واقواها كما انها من المصادر المفتوحة(open source) اى مجانية الاستخدام وقاعدة البيانات (mysql) هى مدمجة مع السرفر كالاباتشى سرفر او الومب سرفر وللوصول اليها عن طريق اللينك التالى:
Localhost/mysql
اولا نقوم بانشاء قاعدة بيانات واليك الرابط التالى لتعليم كيفية انشاء قاعدة بيانات داخل (mysql):
ثانيا بعد انشاء قاعدة البيانات نقوم بعمل وصلة بلغة البى اتش بى للاتصال بهذة القاعدة كالتالى:
mysqli_connect(host,username,password,dbname);
حيث ان هذة الدالة لها اربع بارمترات كالتالى
البارمتر الاول(host):عبارة عن اسم الاستضافة الموجود عليها الموقع ونظرا لاننا نعمل على سرفر محلى فسنكتب اسم الاستضافة المحلية وهي (localhost).
البارمتر الثانى(username):هو عبارة عن اسم المستخدم لقاعدة البيانات.
البارمتر الثالث(password): هو عبارة عن باسورد قاعدة البيانات.
البارمتر الرابع(dbname):هو عبارة عن اسم قاعدة البيانات.
ملاحظة مهمة جدا:ليس من الضرورى عمل اسم مستخدم وباسورد لقاعدة البيانات لذلك فى حالة عدم عمل اسم مستخدم وباسورد للقاعدة فيترك مكانها فارغ.
مثال عملى على الاتصال بقاعدة بيانات اسمها(product):
<?php
mysqli_connect(“localhost”,””,””,”product”);
?>
الاستعلامات داخل لغة البى اتش بى:
وهما عبارة عن اربع حالات من الاستعلامات (insert,select,update,delete) ولكن قبل ان نقوم بشرحهم لابد من انشاء جدول داخل قاعدة البيانات والتى اطلقنا عليها(product) وليكن اسمى هذا الجدول (table1) ونقوم بعمل ثلاث حقول داخل هذا الجدول وهما (id,name,type).
(1)Insert:
ويستخدم هذا الاستعلام فى ادخال صف جديد فى الجدول داخل قاعدة البيانات والشكل العام لاستخدام هذا النوع من الاستعلام كالتالى:
INSERT INTO table_name (column1, column2, column3,…)
VALUES (value1, value2, value3,…)
حيث(table_name) هو اسم الجدول داخل قاعدة البيانات.
كما ان (column1, column2, column3,…) هى عبارة عن الحقول الموجودة داخل الجدول.
وايضا (value1, value2, value3,…)عبارة عن الصف الجديد من الداتا الذى يتم ادخالة فى الجدول.
والان نريد مثلا ان ندخل هذة الداتا (1,sugar,packet) فى جدول (table1) فتكون كالتالى:
INSERT INTO table1(id, name, type)
VALUES (1,sugar,packet)
لكن عملية تنفيذ اى استعلام تمر بمجموعة من المراحل فاذا اردنا تطبيق الاستعلام السابق لكى ندخل داتا فى قاعدة البيانات فلابد ان تتبع الخطوات فى المثال التالى:
مثال:
<?php
$con=mysqli_connect(“localhost”,””,””,”product”);
mysqli_query($con,”INSERT INTO table1 (id, name, type)
VALUES (1,’sugar’,’packet’)”);
mysqli_close($con);
?>
حيث فى البداية نقوم بعمل وصلة الاتصال بقاعدة البيانات ووضعها فى متغير ثم نقوم بعمل الاستعلام ولتنفيذ هذا الاستعلام او اى استعلام اخر سندرسة لابد من استخدام دالة تنفيذ الاستعلامات وهى(mysqli_query) وهى دالة تاخذ بارمترين الاول هو عبارة عن وصلة الاتصال بقاعدة البيانات والثانى هو عبارة عن جملة الاستعلام وفى النهاية نستخدم دالة اغلاق الاتصال بقاعدة البيانات بعد الانتهاء من تنفيذ الاستعلام (mysqli_close).
يمكن عمل المثال السابق بطريقة اخرى تمكن مستخدم الموقع من القيام بادخال داتا الى قاعدة البيانات بنفسة:
اولا نقوم بعمل صفحة بلغة(html) لكى يستطيع المستخدم ادخال الداتا عن طريقها كالتالى:
<html>
<body>
<form action=”insert.php” method=”post”>
Id: <input type=”text” name=”id”>
Name: <input type=”text” name=”name”>
Type: <input type=”text” name=”type”>
<input type=”submit”>
</form>
</body>
</html>
ثانيا صفحة بلغة(php) باسم (insert) مسئولة عن عملية ادخال الداتا من المستخدم الى قاعدة البيانات كالتالى:
<?php
$con=mysqli_connect(“localhost”,””,””,”product”);
mysqli_query($con,”INSERT INTO table1 (id, name, type)
VALUES (‘$_POST[id]’, ‘$_POST[name]’, ‘$_POST[type]’)”);
mysqli_close($con);
?>
php الدرس الرابع عشر فى
Error Handling
سنتعلم فى هذا الدرس كيفية معالجة الاخطاء الناتجة عند كتابة الكود فمثلا كود فتح الملفات والتى قد درسنا سابقا كالتالى:
<?php
$file=fopen(“welcome.txt”,”r”);
?>
هذا الكود يستخدم لفتح ملف نصى اسمة(welcome).ولكن ماذا يحدث اذا لم يكن هذا الملف موجود على الجهاز؟ فى هذة الحالة تخرج رسالة خطا كالتالى:
No such file or directory in C:\webfolder\test.php on line 2
ولتجنب هذة المشكلة فاننا نستخدم كلمة(die) كالتالى:
<?php
if(!file_exists(“welcome.txt”))
{
die(“File not found”);
}
else
{
$file=fopen(“welcome.txt”,”r”);
}
?>
وكلمة (die) معناها انة فى حالة لم يكن الملف النصى موجود على الجهاز تخرج بجملة نصية (File not found) تخبر فيها المستخدم ان هذا الملف غير موجود اما فى حالة انة موجود على الجهاز فهذة الحالة الثانية فانة يفتح الملف ويقرا منة.
-الطريقة العامة لعلاج وتجنب الوقوع فى الاخطاء (Try and catch):
الشكل العام لاستخدامها:
try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}
حيث يتم وضع الكود مابين قوسى كلمة(try) ويتم علاج او تجنب اى اخطاء قد تحدث بين قوسى كلمة(catch) والمثال التالى يشرح ذلك:
{
$file=fopen(“welcome.txt”,”r”);
}
catch(Exception $e)
{
echo $e->getMessage();}
php الدرس الثالث عشر فى
Sending E-mails
وهو عبارة عن موضوع ارسال الايميلات من داخل لغة البى اتش بى ويتم ارسال الايميلات عن طريق الدالة التالية والتى لها خمس بارمترات:
حيث البارمتر الاول يتم فية تحديد مستلم الايميل والبارمتر الثانى يتم فية تحديد عنوان للموضوع الذى يرسل اما البارمتر الثالث فيتم فية تحديد نص الرسالة والبارمتر الرابع والخامس هما اختياريين فيمكن عدم استخدامهما نظرا لعدم اهميتهم.
مثال:
<?php
$to = “someone@example.com”;
$subject = “Test mail”;
$message = “Hello! This is a simple email message.”;
$from = “someonelse@example.com”;
$headers = “From:” . $from;
mail($to,$subject,$message,$headers);
echo “Mail Sent.”;
?>
php الدرس الثانى عشر فى
Sessions
يعتبر (Session) من المواضيع البالغة الاهمية فى لغة البى اتش بى وذلك لانة تم عملها لعلاج مشكلة كانت موجودة على الانترنت والمشكلة كانت تكمن فى ان سرفرات الانترنت لا تستطيع ان تمييز بين مستخدمى الموقع حيث ان سرفرات الانترنت تتعامل مع مستخدمى الموقع على انة شخص واحد يزور الموقع وبالتالى كان لايمكن ان يكون لكل مستخدم حسابة الشخصى على الموقع ويعرف ال (session) على انة متغير سوبر جلوبل تخزن فية داتا عن مستخدمى الموقع من حيث مثلا اسم المستخدم او ايميلة اوغيرة وكل مستخدم لة (unique id) او مفتاح خاص بة للتمييز بين مستخدمى الموقع وبعضهم.
كيف يتم عمل (session):
اولا عند التعامل مع (session) لا بد من تشغيلها ويتم تشغيلها عن طريق السطر التالى:
session_start();
ثانيا يتم عمل (session) عن طريق المتغير السوبر جلوبل التالى:
$_SESSION[‘user1’]=1;
حيث (user1) عبارة عن اسم ال (session).
اما (1) فهى عبارة عن القيمة المخزنة داخل ال (session).
مثال:
<?php
session_start();
$_SESSION[‘userid’] = 1;
$_SESSION[‘username’] = “Ali”;
$_SESSION[‘password’] = “abcdef”;
?>
كيف يتم حذف (session):
لحذف ال (session) كل ما عليك فعلة ان تستخدم الجملة التالية فقط:
session_destroy();
php الدرس الحادى عشر فى
Cookies
تعتبر الكوكيز من المواضيع المهمة فى لغة البى اتش بى ولفهم ماهية الكوكيز فهى ببساطة عندما تدخل على موقع الفيس بوك مثلا لاول مرة فانة يتطلب منك ادخال ايميلك وباسوردك لكى تستطيع ان تدخل الى صفحتك ولكن مع تكرار الدخول على موقعك من جهازك فلن يتطلب منك ادخال الايميل والباسورد بل يدخل على صفحتك مباشرة بمجرد ان تكتب لينك موقع الفيس بوك اذا لماذا يحدث ذلك ؟ ذلك لان ايميلك وباسوردك قد حفظ فى ملف على جهازك يستطيع المتصفح ان يقرا هذا الملف ويدخل مباشرة على صفحتك وهذا الملف يسمى الكوكيز.
كيف يتم أنشاء الكوكيز:
يتم عمل الكوكيز عن طريق الدالة التالية والتى لها خمس بارمترات:
حيث البارمتر الاول(name):هو عبارة عن اسم ملف الكوكيز.
البارمتر الثانى(value):هو عبارة عن الداتا التى تحفظ فى ملف الكوكيز كاسم مستخدم الموقع وايميلة وباسوردة.
البارمتر الثالث(expire):هو عبارة عن مدة عمر ملف الكوكيز فمثلا يمكن ان تجعلة يوم او اكثر او اقل.
البارمتر الرابع(path):يستخدم لتحديد لينك الكوكيز.
البارمتر الخامس(domain):يستخدم لتحديد اسم دومين الموقع وهذا البارمتر والبارمتر السابق اختيارى حيث يمكن عدم استخدامهم نظرا لعدم اهميتهم.
مثال:
<?php
setcookie(“user”, “Ali zizo”, time()+3600);
?>
حيث اسم ملف الكوكيز هو (user) والداتا المخزنة فى هذا الملف هى (Ali zizo) وفترة عمرة هى ساعة واحدة (time()+3600).
مثال اخر لتوضيح فترة عمر الكوكيز:
<?php
setcookie(“user”, “Ali zizo”, time()+60*60*24*30);
?>
حيث بالترتيب من الشمال (60) بالثوانى (60) بالدقائق (24) بالساعات (30) بالايام وبالتالى فان فترة عمر هذا الكوكيز هى شهر كالتالى:
60 sec * 60 min * 24 hours * 30 days=1month
-ويمكن ان نطبع الداتا المخزنة داخل الكوكيز فى صفحة الويب وذلك عن طريق متغير سوبر جلوبل اسمة ($_COOKIE[” “]) فاذا اردنا ان نطبع (Ali zizo) فى المثال السابق من داخل الكوكيز فتكون كالتالى:
<?php
echo $_COOKIE[“user”];
?>
كيف يتم حذف الكوكيز:
لحذف ملف الكوكيز الذى قومنا بعملة كل ما علينا هو ان نضع فترة عمر ملف الكوكيز او تاريخة فى الماضى كالتالى:
setcookie(“user”, “Ali zizo”, time()-3600);
?>
php الدرس العاشر فى
File Handling
عن طريق لغة البى اتش بى يمكن فتح ملف نصى موجود على الجهاز والقراءة منة او التعديل علية عن طريق دالة اسمها (fopen) وهذة الدالة تاخذ بارمترين الاول هو اسم الملف النصى الموجود على الجهاز والبارمتر الثانى عبارة عن طريقة التعامل مع هذا الملف سواء القراءة منة او التعديل علية كالتالى:
<?php
$file=fopen(“welcome.txt”,”r”);
?>
حيث البارمتر الاول (welcome.txt) هو ملف نصى ولابد من اضافة امتداد النصوص معة (txt) اما البارمتر الثانى فلة اكثر من نوع كالتالى:
|
Modes |
الشرح |
|
r |
يستخدم للقراءة فقط من الملف. |
|
r+ |
يستخدم للقراءة والكتابة فى الملف. |
|
w |
يستخدم للكتابة فقط فى الملف ولة خيارين اما ان يفتح الملف ويزيل محتوياتة ويقوم بالكتابة من جديد او ان يقوم بعمل ملف جديد اذا لم يوجد القديم. |
|
w+ |
بالمثل مع الحالة السابقة لكن يزيد علية عملية القراءة. |
|
a |
يستخدم للكتابة ولكن فى نهاية الملف اى يكمل على القديم. |
|
a+ |
يستخدم للقراءة والكتابة ولكن فى نهاية الملف اى يحافظ على المحتوى القديم |
File Upload
عن طريق لغة البى اتش بى يمكن ان تسمح لمستخدمى موقعك برفع ملفات سواء كانت صور او فيديوهات اوغيرة من على اجهزتهم الشخصية الى الموقع .
مثال:
يتطلب مننا عمل ثلاث اشياء لعمل ملف رفع وهى انشاء صفحة بلغة (HTML) للمستخدم لكى يستطيع رفع ملفاتة وصفحة اخرى بلغة (PHP) لتنفيذ عملية رفع الملفات وفولدر يتم رفع الملفات فية كالتالى:
اولا صفحة (HTML):
<html>
<body>
<form action=”upload_file.php” method=”post”
enctype=”multipart/form-data”>
<label for=”file”>Filename:</label>
<input type=”file” name=”file” id=”file”><br>
<input type=”submit” name=”submit” value=”Submit”>
</form>
</body>
</html>
حيث لا بد من اسخدام البارمتر(enctype=”multipart/form-data”) فى حالة التعامل مع رفع ملفات اما (“input type=”file) فهو زر جاهز فى لغة (HTML) عند الضغط علية يقوم بعرض الملفات الموجودة على جهاز المستخدم .
ثانيا صفحة (PHP):
<?php
$name=$_FILES[“file”][“name”];
$tmp_name=$_FILES[“file”][“tmp_name”];
$location=’uploads/’;
move_uploaded_file($tmp_name,$location.$name);
?>
حيث
السطر الاول: هو عبارة عن اسم الملف الذى يتم رفعة.
السطر الثانى :هو عن اسم ملف مؤقت موجود على السرفر.
السطر الثالث :هو عبارة عن متغير يخزن فية اسم الفولدر الذى تتم الية عملية الرفع وكما اعطينا لة اسم (uploads) او اى اسم تحددة انت ثم تقوم بعمل فولدر بهذاالاسم على السرفر
السطر الرابع :هو عبارة عن الدالة (move_uploaded_file) التى تقوم بعملية رفع الملفات ولها بارمترين الاول هو اسم الملف المؤقت والثانى هو اسم الفولدر الذى يتم الية عملية الرفع.
php الدرس التاسع فى
Form Handling
لقد درسنا قبل ذلك فى كورس (HTML) موضوع ال (form) وقلنا انة عبارة عن حقول يستطيع المستخدم ادخال بياناتة عن طريقة ومثال على ذلك عند انشاء حساب لاى مستخدم على موقع الفيس بوك فانة يتطلب منك ادخال بياناتك كالاسم والايميل ورقم التليفون والعنوان وغيرة كالتالى:
(1)index.html
<html>
<body>
<form action=”welcome.php” method=”get”>
Name: <input type=”text” name=”name”><br>
E-mail: <input type=”text” name=”email”><br>
<input type=”submit”>
</form>
</body>
</html>
وهو عبارة عن حقلين لاخذ الاسم والايميل من المستخدم والان نريد ان ناخذ الاسم والايميل من المستخدم ثم نظهرهم فى صفحة الويب كالتالى:
welcome.php(2)
<html>
<body>
Welcome <?php echo $_GET [“name”]; ?><br>
Your email address is: <?php echo $_GET[“email”]; ?>
</body>
</html>
حيث ان المستخدم يدخل اسمة وايميلة فى الحقلين فى صفحة (index.html) ويضغط على الزر فتتوجة الصفحة عن طريق كلمة (action) الى صفحة (welcome.php) فيجد اسمة وايميلة مكتوب. والمسئول عن اخذ بيانات المستخدم (الاسم,الايميل) ونقلها من صفحة (index) الى صفحة (wellcome) هو المتغير السوبر جلوبل ([” “]GET_$) ولكن لاحظ انة فى حالة استخدام هذا المتغير فلابد ان نجعل ال (method) فى صفحة (index) ان تكون من النوع (get).وهناك سوبر جلوبل اخر يعادل ($_ GET[” “]) وهو ($_POST[” “]) ولكن فى هذة الحالة لابد ان ان تكون (method) من النوع (post).
– الفرق بين (GET , $_POST_$):
بالنسبة لل (GET_$) فانها عبارة عن مصفوفة من المتغيرات تحمل اقصى حد لها من الداتا 2000 حرف وتنتقل هذة الداتا عبر (URL parameters) اى تكون مرئية اما بالنسبة لل (POST_$) فهى ايضا عبارة عن مصفوفة من المتغيرات وليس لها حد اقصى من الداتا اى تخزن كميات كبيرة من الداتا وتنتقل هذة الداتا عبر (HTTP POST method) اى تكون مخفية.
حاول ان تتعرف على الفرق بينهم بنفسك عن طريق مثالين احدهما بة (GET) والاخر بة (POST)
php الدرس الثامن فى
include and require
عن طريق (include,require) يمكن ادارج او وضع ملف بى اتش بى فى ملف بى اتش بى اخر والشكل العام لاستخدامهما كالتالى:
include ‘filename‘;
require ‘filename‘;
حيث (filename) هو اسم الملف الذى يتم ادراجة.
مثال:
لو فرضنا ان هناك ملف اسمة (header.php) ونريد ادراجة فى ملف اخر اسمة (site.php) فيكون كالتالى:
اولا ملف (header.php):
<?php
echo ” I am header file”;
?>
ثانيا ملف (site.php):
<?php
include ‘header.php’;
?>
ويمكن كتابة ملف (site.php) بين تاجات (HTML) بهذة الطريقة:
<html>
<body>
<?php include ‘header.php’; ?>
</body>
</html>
ويمكن استبدال (include) فى المثال السابق بال (require) فالاثنان يقومان بنفس المهمة لكن الفرق بينهم انة فى حالة ادارج ملف بى اتش بى بة خطا فى جزء معين من اكوادة فى ملف اخر فان (require) لن يقرا هذ الخطا ويتوقف الملف اما فى حالة (include) فانة يقرا الملف كامل.
php الدرس السابع فى
Array
تستخدم المصفوفة فى تخزين العديد من القيم او الداتا ووضعها فى متغير واحد بدلا من وضع مجموعة من القيم فى مجموعة من المتغيرات فمثلا اذا كان لدينا ثلاث قيم مخزنة فى ثلاث متغيرات كالتالى:
$car1=”Saab”; $car2=”Volvo”; $car3=”BMW”;
فيمكن عمل مصفوفة ووضع القيم الثلاثة داخلها ولكن فى سطر واحد فقط كالتالى:
$Cars= array(“Saab”,”Volvo”,”BMW”);
اذا فالمصفوفة توفر فى كتابة الكود مما يؤدى الى توفير الوقت و تسريع صفحات موقعك.
-المصفوفة لها ثلاث طرق لكتابتها كالتالى:
1-Indexed arrays:
$cars=array(“Volvo”,”BMW”,”Toyota”);
ويمكن كتابة عناصر هذة المصفوفة كلا على حدة كالتالى:
$cars[0]=”Volvo”;
$cars[1]=”BMW”;
$cars[2]=”Toyota”;
ولاحظ ان ترتيب عناصر المصفوفة يبدا من الصفر وليس الواحد وهكذا يمكن كتابة العديد من العناصر او تجميعهم فى سطر واحد فالطريقتين متساويتين.
مثال:
$cars=array(“Volvo”,”BMW”,”Toyota”); echo ” $cars[0]”;
حيث المثال السابق يطبع العنصر الاول من المصفوفة فى صفحة الويب وبالمثل اذا اردنا طباعة اى عنصر فى المصفوفة نحدد ترتيبة.
ولمعرفة عدد عناصر المصفوفة نستخدم كلمة (count) كما فى المثال التالى:
<?php
$cars=array(“Volvo”,”BMW”,”Toyota”);
echo count($cars);
?>
ويكون الناتج فى صفحة الويب كالتالى:
3
مثال على عمل تكرار على المصفوفة لطباعة جميع عناصرها:
<?php
$cars=array(“Volvo”,”BMW”,”Toyota”);
$arrlength=count($cars);
for($x=0;$x<$arrlength;$x++)
{
echo $cars[$x];
echo “<br>”;
}
?>
ويكون الناتج بصفحة الويب كما يلى:
Volvo
BMW
Toyota
2- Associative Arrays:
$age=array(“Peter”=>”35″,”Ben”=>”37″,”Joe”=>”43”);
ويمكن كتابة عناصر هذة المصفوفة كلا على حدة كالتالى:
$age[‘Peter’]=”35″;
$age[‘Ben’]=”37″;
$age[‘Joe’]=”43″;
مثال:
<?php
$age=array(“Peter”=>”35″,”Ben”=>”37″,”Joe”=>”43″);
echo ” $age[‘Peter’] “;
?>
مثال على عمل تكرار على المصفوفة لطباعة جميع عناصرها:
<?php
age=array(“Peter”=>”35″,”Ben”=>”37″,”Joe”=>”43”)$
foreach($age as $x=>$x_value)
{
echo “name:” . $x . “, age:” . $x_value;
;”<echo “<br
{
?>
3-Multidimensional Arrays:
سوف يتم شرحها لاحقا
php الدرس السادس فى
Functions
– وهى عبارة عن كود او مجموعة من الاكواد يتم وضعها داخل دالة بشكل معين سنتعرف عليه للقيام بمهمة معينة عند استدعائها والشكل العام لها كما يلى :
function functionname()
{
code
}
حيث (functioname) هو اسم الدالة التى تسميها انت كما ان (code) هو الكود او مجموعة الاكواد التى تكتبها وتوضع بين القوسين { } والمثال التالى يوضح استخدامها:
<?php
function writeMsg()
{
echo “Hello world!”;
}
writeMsg(); // call the function
?>
حيث يتم استدعاء الدالة او تشغيلها كما فى السطر الاخير(writeMsg).
-Calling a Function with parameters:
ويمكن عند عمل الدالة ان نمرر لها قيم حيث يطلق على هذة القيم البارمترات وتستخدم داخل الدالة وتكون كالتالى:
function myFunction(var1,var2)
{
code
}
ويمكن استخدم بارمتر واحد او اكثر من بارمتر لكن المهم ان تضع فاصلة فى حالة استخدمت اكثر من بارمتر.
والمثال التالى يوضح استخدامها:
<?php
function familyName($name,$year)
{
echo “name is $name. Born in $year <br>”;
}
familyName(“ali”,”1975″);
familyName(“said”,”1978″);
familyName(“mena”,”1983″);
?>
حيث لهذة الدالة بارمترين هما الاسم وسنة الميلاد ويتم تمرير قيم لهما من الدالة هكذا
familyName (‘ali’,’1975′)
ثم تخرج بنص فيه الاسم والوظيفة التى ادخلتها للدالة وهى كما فى المثال
-Functions With a Return Value:
يمكن تخزين داتا داخل الدالة واستخدامها عن طريق كلمة(return)كالتالى:
<?php
function sum($x,$y)
{
$z=$x+$y;
return $z;
}
echo sum(5,10);
?>
وهى عبارة عن دالة تاخذ رقمين وترجع بمجموعهم.
ملاحظة هامة:المتغير الموجود داخل الدالة لا يمكن استخدامة الا على مستوى هذة الدالة ويعرف بالمتغير المحلى (local) اما المتغير الموجود خارج الدالة فيمكن ان تستخدمة اى دالة قمت بانشائها ويسمى بالمتغير العام (global)
php الدرس الخامس فى
Loops
-تستخدم (loops) فى عمل تكرار على الكود عدد من المرات حيث توفر لك الوقت فى كتابة كود معين بدلا من تكرارة فى اكثر من سطر تستبدلة بسطر واحد عن طريق (loops) وايضا سرعة موقعك فكتابة اكواد كثيرة يؤدى الى بطىء الموقع ولها اكثر من طريقة فى كتابتها كالتالى:
الشكل العام |
الاستخدام |
Loops |
|
for (initial value; condition; increament or decreament statement) |
تقوم بعمل تكرار على الكود عدد من المرات. |
for |
|
foreach ($array as $value) |
تقوم بعمل تكرار على كل عنصر داخل المصفوفة والمصفوفات سندرسها فيما بعد. |
foreach |
|
while (condition) |
تقوم بعمل تكرار على الكود لكن فى وجود شرط فاذا تحقق هذا الشرط يتم التكرار واذا لم يتحقق لا يتم التكرار. |
while |
|
do |
تقوم بعمل تكرار على الكود فى وجود شرط ايضا لكن فى هذة الحالة يتم التكرار اولا ثم بعد ذلك يختبر الشرط. |
do/while |
(1)for:
مثال:
<?php
for ($x=0; $x<=10; $x++)
{
echo “The number is: $x <br>”;
}
?>
(2)foreach:
مثال:
<?php
$colors = array(“red”,”green”,”blue”,”yellow”);
foreach ($colors as $value)
{
echo “$value <br>”;
}
?>
(3)while:
مثال:
<?php
$x=1;
while($x<=5)
{
echo “The number is: $x <br>”;
$x++;
}
?>
(4)do/while :
مثال:
$x=1;
do
{
echo “The number is: $x <br>”;
$x++;
}
while ($x<=5)
?>
php الدرس الرابع فى
Conditions
-وهى عبارة عن جمل الشرط داخل لغة البى اتش بى وجمل الشرط تستخدم لتنفيذ اجراء معين فى حالة تحقق شرط معين وجمل الشرط لها اربعة طرق لكل طريقة وظيفتها كما درسناها سابقا فى لغة الجافا سكريبت كالتالى:
|
الشكل العام |
استخدامها |
جملة الشرط |
|
if (condition) { Code if condition is true } |
تستخدم لتنفيذ كود فى حالة كان الشرط صحيح فقط. |
if |
|
if (condition) { Code if condition is true } else { Code if condition is not true } |
تستخدم لتنفيذ كود فى حالة كان الشرط صحيح او تنفيذ كود اخر فى حالة كان الشرط خاطىء |
if…else |
|
if (condition1) { Code if condition1 is true } else if(condition2) { Code if condition2 is true } else { Code if condition1 and condition2 not true } |
تستخدم لعمل اكثر من شرط لوجود مجموعة عديدة من الاكواد |
if…else if….else |
|
switch (n) |
ايضا تستخدم لعمل اكثر من شرط لوجود مجموعة عديدة من الاكواد |
switch |
امثلة توضح الحالات السابقة
(1)if:
<?php$a=2;
$b=1;
if ($a > $b)
{
echo “a is bigger than b”;
}
?>
(2)if…else:
<?php$a=2;
$b=3;
if ($a > $b)
{
echo “a is bigger than b”;
}
else
{
echo ” b is bigger than a”;
}
?>
(3)if…else if….else:
<?php$a=2;
$b=2;
if ($a > $b)
{
echo “a is bigger than b”;
}
else if ($b > $a)
{
echo ” b is bigger than a”;
}
else
{
echo ” b is equal a”;
}
?>
(4)switch:
<?php
$favcolor=”red”;
switch ($favcolor)
{
case “red”:
echo “Your favorite color is red!”;
break;
case “blue”:
echo “Your favorite color is blue!”;
break;
case “green”:
echo “Your favorite color is green!”;
break;
default:
echo “Your favorite color is neither red, blue, or green!”;
}
?>
php الدرس الثالث فى
Operators
-والمقصود بال(operators)هى العمليات الحسابية فى لغة الجافا سكريبت كالجمع والطرح والضرب والقسمة وايضا عمليات الزيادة والنقصان وغيرة وكلها موضحة بالجدول التالى:
Let y=5
(1)Arithmetic Operators |
||||||||
|
Operator |
الشرح |
مثال |
Result of x |
|||||
|
+ |
عملية الجمع |
x=y+2 |
7 |
|||||
|
– |
عملية الطرح |
x=y-2 |
3 |
|||||
|
* |
عملية الطرح |
x=y*2 |
10 |
|||||
|
/ |
عملية القسمة |
x=y/2 |
2.5 |
|||||
|
% |
Modulus (الباقى) |
x=y%2 |
1 |
|||||
(2)Assignment Operators |
||||||||
|
Operator |
الشرح |
طريقة اخرى لكتابتها |
||||||
|
x = y |
عملية التساوى |
x = y |
||||||
|
x = x + y |
عملية الجمع |
x += y |
||||||
|
x = x – y |
عملية الطرح |
x -= y |
||||||
|
x = x * y |
عملية الضرب |
x *= y |
||||||
|
x = x / y |
عملية القسمة |
x /= y |
||||||
(3)String operators |
||||||||
|
Operator |
الشرح |
|||||||
|
. |
تستخدم لاضافة نصوص الى المتغيرات اوغيرة |
|||||||
|
.= |
ايضا تقوم بنفس المهمة والامثلة ستوضح استخدامهم |
|||||||
(4)Increment / Decrement Operators |
||||||||
|
Operator |
الشرح |
|||||||
|
++$x |
يزود المتغير واحد ثم يرجع بقيمتة |
|||||||
|
$x++ |
فى هذة الحالة يحدث العكس يرجع المتغير بقيمتة ثم يزيد واحد وتستخدم هذة الحالة فى عمل التكرار والذى سندرسة فيما بعد |
|||||||
|
–$x |
يقلل من المتغير واحد ثم يرجع بقيمتة |
|||||||
|
$x– |
بالمثل كما فى الحالة الثانية ولكن بالنقصان |
|||||||
(5)Comparison Operators |
||||||||
|
Operator |
الشرح |
مثال |
||||||
|
== |
تستخدم للمقارنة بالتساوى |
$x==$y |
||||||
|
!= |
لا يساوى |
$x!=$y |
||||||
|
> |
اقل من |
$x>$y |
||||||
|
< |
اكبر من |
$x<$y |
||||||
|
>= |
اكبر من او يساوى |
$x>=$y |
||||||
|
<= |
اقل من او يساوى |
$x<=$y |
||||||
(6)Logical Operators |
||||||||
|
Operator |
الشرح |
طريقة اخرى لكتابتها |
||||||
|
and |
و |
&& |
||||||
|
or |
او |
|| |
||||||
|
! |
لا(للنفى) |
لا يوجد |
||||||
– مثال على العمليات الحسابية (Arithmetic Operators):
<?php
$x=10;
$y=6;
echo ($x + $y);
echo “<br>”;
echo ($x – $y);
echo “<br>”;
echo ($x * $y);
echo “<br>”;
echo ($x / $y);
echo “<br>”;
echo ($x % $y);
?>
وتكون النتيجة بصفحة الويب هى :
16
4
60
1.6666666666667
4
– مثال على العمليات (Assignment Operators):
<?php
$x=10;
echo $x;
echo “<br>”;
$y=20;
$y += 100;
echo $y;
echo “<br>”;
$z=50;
$z -= 25;
echo $z;
echo “<br>”;
$i=5;
$i *= 6;
echo $i;
echo “<br>”;
$j=10;
$j /= 5;
echo $j;
echo “<br>”;
$k=15;
$k %= 4;
echo $k;
?>
وتظهر بصفحة الويب كما يلى :
10
120
25
30
2
3
– مثال على العمليات (String Operators):
<?php
$a = “Hello”;
$b = $a . ” world!”;
echo $b;
echo “<br>”;
$x=”Hello”;
$x .= ” world!”;
echo $x;
?>
وتظهر بصفحة الويب كالتالى:
Hello world!
Hello world!
– مثال على العمليات (Increment/Decrement Operators):
<?php
$x=10;
echo ++$x;
echo “<br>”;
$y=10;
echo $y++;
echo “<br>”;
$z=5;
echo –$z;
echo “<br>”;
$i=5;
echo $i–;
?>
ويكون الناتج بصفحة الويب كالتالى:
11
10
4
5
php الدرس الثانى فى
Variables
كما قلنا سابقا فى لغة الجافا سكريبت ان المتغيرات هى عبارة عن وعاء لتخزين القيم او الداتا والمتغيرات فى لغة البى اتش بى تتكون من جزئين الجزء الاول هو علامة الدولار($) والجزء التانى هو اسم المتغير ويتكون من حروف وارقام او حروف فقط ويمكن استخدم علامة الاندرسكول ( _ ) فى اسماء المتغيرات ولا بد ان يبدا اسم المتغير بحرف كالتالى:
$txt=”Hello world!”;
$x=5;
$y=10.5;echo $txt;
echo “<br>”;
echo $x;
echo “<br>”;
echo $y;
?>
والمتغيرات فى لغة البى اتش بى هى حساسة لحالة الاحرف حيث هناك فرق كبير بين (x,$X$) والكود السابق يظهر بصفحة الويب كالتالى:
Hello world!
5
10.5
Constants
تستخدم الثوابت فى لغة البى اتش بى فى تخزين قيم او داتا كالمتغيرات لكن الفرق بينهما ان الثوابت لايمكن تغير قيمتها اما المتغيرات يمكن تغير قيمتها ويتم عمل الثوابت عن طريق كلمة (define) وتاخذ بارمترين حيث البارمتر الاول عبارة عن اسم المتغير والبارمتر الثانى عبارة عن القيمة المخزنة بة كالتالى:
<?php
define(“greeting”, “Welcome to w3s4arb.com!”);
echo greeting;
?>
وتظهر بصفحة الويب كالتالى:
Welcome to w3s4arb.com!
php الدرس الاول فى
Syntax
لغة البى اتش بى ليست كاللغات التى درسناها سابقا كا (HTML,CSS,javascript) وذلك لان لغة البى اتش بى لن يتم تنفيذ اكوادها الا فى وجود سرفر كال
(wamp server , apache server ,..) وتوضع اكواد البى اتش بى بين تاج بداية ونهاية كالتالى :
<?php // PHP code here ?>
ولابد ان تحفظ صفحات البى اتش بى بامتداد (php.) وتوضع صفحات البى اتش بى داخل فولدر ثم يوضع هذا الفولدر داخل فولدر (www) فى برنامج (wamp server) واول كود سنتعلمة فى لغة البى اتش بى هو كود طباعة النصوص ويتم طباعة النصوص فى لغة البى اتش بى عن طريق كلمة (echo) كالتالى:
<?php echo “Hello World!”; ?>
ويكون الناتج فى صفحة الويب كالتالى:
Hello World!
ويمكن وضع كود البى اتش بى بين تاجات (HTML) كالتالى:
<!DOCTYPE html> <html> <body>
<h1>My first PHP page</h1> <?php echo “Hello World!”; ?> </body> </html>
ويكون الناتج فى صفحة الويب كالتالى:
My first PHP page
Hello World!
ولكى ترى نتيجة الكود السابق اولا لا بد ان تشغل برنامج (wamp) ثم افتح اى متصفح للانترنت واكتب فية الامتداد التالى:
Localhost/name of folder/name of php page
حيث(name of folder) هو اسم الفولد الذى انشاتة , ( name of php page) هو اسم صفحة البى اتش بى الذى انشاتها ايضا.
ملاحظة: اكواد او جمل البى اتش بى لا بد ان تنتهى بفصلة منقوطة (;)
Comments
– التعليقات فى لغة البى اتش بى لها ثلاث طرق لكتابتها كالتالى:
<!DOCTYPE html> <html> <body>
<?php // for single line # also for single line /* for a multiple lines */ ?> </body> </html>
حيث(//,#) مع جملة او كود واحد اما(/* */) للعديد من الجمل او الاكواد.
php مقدمة عن
لغة البى اتش بى هى لغة برمجة تم تصميمها على يد (Rasmus Lerdorf) من اجل تطوير وبرمجة صفحات الويب وذلك فى عام 1995وهى لغة برمجة مفتوحة المصدر يقوم على تطويرها مبرمجين من مختلف انحاء العالم وتعتبر لغة البى اتش بى من اقوى واسرع لغات برمجة الويب كما انها تعمل على جميع انظمة التشغيل كالويندوز واللينكس واليونكس وغيرة.
– ولغة php هى اختصار لى Hypertext Preprocessor.
– وللغة php العديد من الاصدارات واليك اصدارتها وتاريخ اصدارها:
|
الإصدار |
تاريخ الاصدار |
|
PHP 1.0 |
8 يونيو1995 |
|
PHP2.0 |
16 أبريل1996 |
|
PHP 3.0 |
6 يونيو1998 |
|
PHP 4.0 |
22 مايو،2000 |
|
PHP 4.1 |
10 ديسمبر2001 |
|
PHP 4.2 |
22 أبريل2002 |
|
PHP 4.3 |
27 ديسمبر2002 |
|
PHP 4.4 |
11 يوليو2005 |
|
PHP 5.0 |
13 يوليو2004 |
|
PHP 5.1 |
25 نوفمبر2005 |
|
PHP 5.2 |
2 نوفمبر2006 |
|
PHP 5.3 |
21 يونيو2009 |
الادوات اللازمة لتعليمphp :
1-محرر نصوص كال notepad او word او اى محرر نصوص اخر او باستخدام برنامج الدريم ويفر.
2-نحتاج الى سرفر وليكن Wamp server واليك رابط التحميل.
http://sourceforge.net/projects/wampserver/
3-الالمام باللغات التالية HTML,CSS,javascript .
الدرس التاسع فى الجافا سكريبت
Form Validation
وهى عبارة عن قيود توضع على الحقول الخاصة بملىء البيانات وهذة القيود لها العديد من الانواع فمثلا يمكن عمل قيد على حقل يلزم المستخدم بكتابة اى نص فية اى لا يتركة فارغ او عمل قيد على حقل يلزم المستخدم بادخال ايميل صحيح لاكمال عملية التسجيل فى الموقع وهكذا:
مثال(1):
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm()
{
var x=document.forms[“myForm”][“fname”].value;
if (x==null || x==””)
{
alert(“First name must be filled out”);
return false;
}
}
</script>
</head>
<body>
<form name=”myForm” action=”form.php” onsubmit=”return validateForm()” method=”post”>
First name: <input type=”text” name=”fname”>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
مثال(2):
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm()
{
var x=document.forms[“myForm”][“email”].value;
var atpos=x.indexOf(“@”);
var dotpos=x.lastIndexOf(“.”);
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert(“Not a valid e-mail address”);
return false;
}
}
</script>
</head>
<body>
<form name=”myForm” action=”form.php” onsubmit=”return validateForm();” method=”post”>
Email: <input type=”text” name=”email”>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
الدرس الثامن فى الجافا سكريبت
Errors
-سوف ندرس فى هذا الدرس الاخطاء وكيفية معالجتها والاخطاء هى اما اخطاء لغوية ناتجة عن كتابة كود الجافا سكريبت بصورة خاطئة او اخطاء ناتجة من المبرمج او اخطاء ناتجة عن مستخدم الموقع ولتفادى مثل هذة الاخطاء فان لغة الجافا سكريبت توفر لك الكود التالى لمعالجة الاخطاء:
try
{
//code here
}
catch(err)
{
//Handle errors here
}
حيث يوضع الكود المراد عمل اختبار علية بين اقواس كلمة (try) وتتم معالجة الاخطاء بين اقواس كلمة (catch) ولفهم كيفية معالجة الاخطاء فسناخذ مثال لا يوجد بة اخطاء ثم نعيد هذا المثال ولكن بوجود خطا ثم نطبق علية القاعدة السابقة لكى نتعلم كيفية معالجة الاخطاء:
مثال(1):
<!DOCTYPE html>
<html>
<head>
<script>
var txt=””;
function message()
{
try
{
alert(“Welcome guest!”);
}
catch(err)
{
txt=”Error description:” + err.message;
alert(txt);
}
}
</script>
</head>
<body>
<input type=”button” value=”View message” onclick=”message()”>
</body>
</html>
والمثال السابق هو مثال لايوجد بة اخطاء لذلك قام بتنفيذ الكود الموجود بين قوسى كلمة (try).
مثال(2):
<!DOCTYPE html>
<html>
<head>
<script>
var txt=””;
function message()
{
try
{
alertt(“Welcome guest!”);
}
catch(err)
{
txt=”Error description:” + err.message;
alert(txt);
}
}
</script>
</head>
<body>
<input type=”button” value=”View message” onclick=”message()”>
</body>
</html>
وهنا يوجد خطا موجود فى الكود وهو كتابة الرسالة التحذيرية بصورة خاطئة (alertt) لذلك فانة فى هذة الحالة لا ينفذ الكود الاول وينفذ الكود الثانى الموجود بين قوسى كلمة (catch) والكود الثانى هو عبارة عن رسالة تخبرك بانك كتبت الكود بشكل خاطىء حيث (err) هو متغير يكون ملازم (catch) ونستخدم (err.message) والتى تخرج لك نوع الخطا الموجود تلقائيا من داخل لغة الجافا سكريبت لذلك فملخص الكلام انة فى حالة كتابة الكود بشكل صحيح دون وجود خطا فان كلمة (try) هى التى تعمل فى هذة اللحظة اما اذا وجد خطا فانة فى هذة الحالة تعمل كلمة (catch).
-فى المثال السابق فان رسالة الخطا التى تخبرك بنوع الخطا هى رسالة تلقائية من داخل لغة الجافا سكريبت ولكن يمكنك ان تقوم بعمل رسالة او رسائل الخطا بنفسك دون استخدام رسائل الخطا الموجودة داخل لغة الجافا سكريبت وتتم عمل رسالة الخطا عن طريق استخدام كلمة (throw) وهذة الرسائل التى تقوم انت بنفسك بعملها لها اهمية كبيرة فى مساعدة زوار موقعك والمثال التالى يشرح عملها:
<!DOCTYPE html>
<html>
<body>
<script>
function myFunction()
{
var y=document.getElementById(“mess”);
y.innerHTML=””;
try
{
var x=document.getElementById(“demo”).value;
if(x==””) throw “empty”;
if(isNaN(x)) throw “not a number”;
if(x>10) throw “too high”;
if(x<5) throw “too low”;
}
catch(err)
{
y.innerHTML=”Error: ” + err + “.”;
}
}
</script>
<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id=”demo” type=”text”>
<button type=”button” onclick=”myFunction()”>Test Input</button>
<p id=”mess”></p>
</body>
</html>
الدرس السابع فى الجافا سكريبت
Array
تستخدم المصفوفة فى تخزين العديد من القيم او الداتا ووضعها فى متغير واحد بدلا من وضع مجموعة من القيم فى مجموعة من المتغيرات فمثلا اذا كان لدينا ثلاث قيم مخزنة فى ثلاث متغيرات كالتالى:
var car2=”Volvo”;
var car3=”BMW”;
فيمكن عمل مصفوفة ووضع القيم الثلاثة داخلها ولكن فى سطر واحد فقط كالتالى:
اذا فالمصفوفة توفر فى كتابة الكود مما يؤدى الى توفير الوقت و تسريع صفحات موقعك.
-المصفوفة لها ثلاث طرق لكتابتها كالتالى:
1-Regular:
myCars[0]=”Saab”;
myCars[1]=”Volvo”;
myCars[2]=”BMW”;
حيث يتم تعريف المصفوفة كما فى السطر الاول ثم ادارج عناصر المصفوفة كما فى السطور التى تليها ولكن لاحظ ان اول عنصر فى المصفوفة ياخذ الترتيب صفر لان المصفوفة يبدا العد فيها من الصفر وليس الواحد.
2-Condensed:
3-Literal:
– مثال على استخدام المصفوفة وطباعة قيم منها:
<!DOCTYPE html>
<html>
<body>
<script>
var i;
var mycars = new Array();
mycars[0] = “Saab”;
mycars[1] = “Volvo”;
mycars[2] = “BMW”;
document.write(mycars[0]);
</script>
</body>
</html>
ويكون الناتج بصفحة الويب كما يلى:
Saab
والمثال السابق يمكن استخدام التكرار معة لطباعة جميع قيم المصفوفة كالتالى:
<!DOCTYPE html>
<html>
<body>
<script>
var i;
var mycars = new Array();
mycars[0] = “Saab”;
mycars[1] = “Volvo”;
mycars[2] = “BMW”;
for (i=0;i<mycars.length;i++)
{
document.write(mycars[i] + “<br>”);
}
</script>
</body>
</html>
حيث(myCars.length) تشير الى عدد عناصر المصفوفة ويكون الناتج بصفحة الويب كما يلى:
Volvo
BMW
الدرس السادس فى الجافا سكريبت
Objects
يعتبر جزء (objects) من اهم الاجزاء فى لغة الجافا سكريبت بل فى كل لغات البرمجة الاخرى كالجافا والسى شارب والسى بلس بلس وغيرها من لغات البرمجة حيث هى مدخل لعلم (oop) والتى هى اختصار لى(object oriented programming) فتقريبا يعتبر كل شىء فى لغة الجافا سكريبت درسناها او سندرسها كا(Strings, Functions, Arrays,…) كلها تعتبر(object) ويعرف ال (object) على انة داتا لها شيئين هما(properties , methods) حيث (properties) هى عبارة عن قيمة او قيم لل (object) اما ال (methods) فهى عبارة عن حدث يقوم بة ال (object) وللتوضيح اكثر فمثلا السيارة هى عبارة عن (object) لها (object) كاسم العربية وموديلها ووزنها ولونها مثلا ولها (methods) كحركة السيارة او سواقت السيارة او ايقافها والجدول التالى يوضح المثال:
|
Object |
Properties |
Methods |
|
car |
car.name =Fiat car.model = 500 car.weight = 850kg car.color = white |
car.start() car.drive() car.brake() |
فكل سيارة لها هذة ال(properties)لكنها تختلف من سيارة الى اخرى وايضا كل سيارة لها هذة ال(methods)ولكنها تختلف من وقت لاخر او مثلا من سرعة لاخرى.والان كيف يتم انشاء ال(Object)؟ اولا لابد من تعريف ال(object)فى متغير كما يلى:
var car=new Object();
ثم نضيف لة بعد ذلك (properties,methods) والان ننفذ مثال السيارة عملى بال(object):
<!DOCTYPE html>
<html>
<body>
<script>
var car=new Object();
car.name=”fiat”;
car.model=”500″;
car.weight =850kg;
car.color=”white”;
document.write(person.name + ” is ” + person.model +”is”.”);
</script>
</body>
</html>
مثال اخر:
<!DOCTYPE html>
<html>
<body>
<script>
var person=new Object();
person.firstname=”ali”;
person.lastname=”ahmed”;
person.age=40;
person.eyecolor=”blue”;
document.write(person.firstname + ” is ” + person.age + ” years old.”);
</script>
</body>
</html>
ويكون الناتج بصفحة الويب:
ali is 40 years old.
والمثال السابق يمكن كتابتة بطريقة اخرى كالتالى:
<!DOCTYPE html>
<html>
<body>
<script>
person={firstname:”ali”,lastname:”ahmed”,age:40,eyecolor:”blue”}
document.write(person.firstname + ” is ” + person.age + ” years old.”);
</script>
</body>
</html>
ملاحظة:
كما فى الامثلة السابقة فانة لكى تصل لاى(properties) خاصة بال(object) فانها تتبع القاعدة التالية:
objectName.propertyName
والوصول لاى (method)خاصة بال(object)تتبع القاعدة التالية:
objectName.methodName()
فمثلا اذا كان لدينا نص ونريد ان نعرف عدد حروفة فيكون كالتالى:
var message=”Hello World!”;
var x=message.length;
ويكون الناتج هو 12 حرف وذلك لان المسافة الموجودة بين كلمتى Hello,World تحسب بحرف.
واذا اردنا ان نحول نص من حروف صغيرة الى حروف كبيرة فيكون كالتالى:
var message=”Hello world!”;
var x=message.toUpperCase();
ويكون الناتج هو:
HELLO WORLD!
w3s4arb 