التعامل بين الـ Php و Ajax و قاعدة البيانات

مُجَاهِد · #1 14-08-2007, 02:24 مساء

السلام عليكم ...

التعامل بين الـ PHP و AJAX و قاعدة البيانات

يمكن لنا إستخدام الـ AJAX لغرض الاتصال التفاعلي مع قاعدة البيانات ، دون الحاجة لإعادة فتح الصفحة ...

نحتاج في درسنا هذا إلى أربعة أشياء :

- قاعدة بيانات
- صفحة HTML
- ملف جافا سكريبت
- صفحة PHP

أولا: قاعدة البيانات ...

ننشأ قاعدة بيانات باسم " ajax " ، يمكننا إستخدام كمثال هذا الجدول باسم " users " ... على الترتيب

id = 1 . 2 . 3 . 4
name = ali . ahmed . amine . mahmoud
age = 40 . 24 . 33 . 28
learn = sql . asp . ajax . php

تحميل ملف الـ sql لوحده ...

ثانيا: صفحة الـ HTML ...

سوف نعتمد على هذه الصفحة في مثالنا فهي تفي بالغرض

كود بلغة HTML:

<html dir=rtl> <head> <script src="selectuser.js"></script> </head> <body> <div align=center> <form> 
إختر المستخدم
<select name="users" onchange="showUser(this.value)"> <option value="1">ali</option> <option value="2">ahmed</option> <option value="3">amine</option> <option value="4">mahmoud</option> </select> </form><div> <p> <div id="txtHint" align=center><b>معلومات المستخدم سوف تظهر هنا</b></div> </p> </body> </html>

شرح الصفحة:

كما ترون فهي صفحة HTML بسيطة مع صندوق إختيارات ( DropDownBox ) يسمى " users " و مع كل اسم مستخدم ، قيمة الـ id المصاحب له في قاعدة البيانات ...

أما الفقرة في الأسفل المحصورة بـالوسم <div> المسمى " txtHint " ، تعمل على إستقبال المعلومات المرسلة من الخادم ...

و عند الإختيار ، تنفذ العملية " showUser() " ... هذه العملية مرتبطة بوقوع الحدث " onchange " ...

ثالثا: ملف الجافا سكريبت ...

نحفظ ملف الجافا سكريبت باسم " selectuser.js " و هو نفس الاسم الذي استدعيناه في صفحة الـ HTML ، و هذا ما يحتويه ...

كود:

var xmlHttp

function showUser(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="getuser.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}
}

شرح الملف:

في عملية showUser()

إذا تم الإختيار تقوم العملية بفعل التالي ...

- الطلب من عملية GetXmlHttpObject إنشاء الكائن XMLHTTP
- نحدد رابط ( اسم الملف ) للإرسال للخادم
- نضيف البارامتر " q " للرابط مع محتوى صندوق الإختيارات ( DropDownBox )
- نضيف عدد عشوائي لمنع استخدام خدمة الملف المخبأ ( cached file )
- طلب stateChanged عند حدوث التغيير
- فتح كائن XMLHTTP مع الرابط المعطى
- إرسال طلب HTTP إلى الخادم

رابعا: صفحة الـ PHP ...

نسمي هذه الصفحة " getuser.php " ...

في هذه الصفحة نستخدم الـ PHP إضافة إلى قاعدة البيانات ...

الكود يطلب قاعدة البيانات و يعيد النتيجة لجدول HTML

كود PHP:

  <?php

$q=$_GET["q"];

 
$con = mysql_connect('localhost', 'root', '');

if (!$con)

 {

 die('Could not connect: ' . mysql_error());

 }

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

mysql_select_db("ajax", $con);

// اختيار الجدول

$sql="SELECT * FROM users WHERE id = '".$q."'";

 
$result = mysql_query($sql);

 
echo "<table border='1'>

<tr>

<th>الاسم</th>

<th>العمر</th>

<th>يدرس حاليا</th>

</tr>";

 
while($row = mysql_fetch_array($result))

 {

 echo "<tr>";

 echo "<td>" . $row['name'] . "</td>";

 echo "<td>" . $row['age'] . "</td>";

 echo "<td>" . $row['learn'] . "</td>";

 echo "</tr>";

 }

echo "</table>";

 
mysql_close($con);

?>

توضيح الملف:

- نتصل بقاعدة البيانات
- إستخراج البيانات من الجدول المحدد بحيث المتغير q هو شرط الإستخراج ( و q هو المرسل من طرف ملف الجافا سكريبت و يحمل id الإختيار )
- و يرسل جدول الـ HTML مكان الـ div ذو الاسم " txtHint "

يمكنك تحميل ملفات الدرس من المرفقات مع ملف SQL لقاعدة البيانات ( إذا حملت ملفات الدرس ، لن تحتاج لتحميل الملف sql ، فستجده معه ) ، و تشغيل ملف " db.html " على الخادم ...

ملاحظة هامة : يسمح نقل الدرس و لكن بشرط كتابة التالي في النهاية و بخط واضح " المصدر : منتدى بي اتش بي ... montadaphp.net "

تحياتي ...

rkabd · #2 19-03-2008, 01:06 صباحا

مشكور جدا على هذا الجهد

فتاة الثقة · #3 29-06-2008, 12:58 مساء

و عليكم السلام

seamaan · #4 25-09-2008, 10:12 مساء

شكرااااااااااااا

المواضيع المتشابهه
الموضوع / كاتب الموضوع
إيجابيات وسلبيات الـ Ajax (كاتب الموضوع : مُجَاهِد)
بان يدعو لشحذ الهمم في التعامل مع التغير المناخي (كاتب الموضوع : مُجَاهِد)
[ شرح ] تنفيذ أمر في قاعدة البيانات من لوحة التحكم + بعض الأوامر المهمة (كاتب الموضوع : مُجَاهِد)
التصويت عن طريق Php و Ajax (كاتب الموضوع : مُجَاهِد)
[تعريب] صفحة (أخطاء قاعدة البيانات) .. (كاتب الموضوع : مُجَاهِد)

باب الحارة	الإتصال بنا	الإتصال بنا	الإتصال بنا	الإتصال بنا
الإتصال بنا	الإتصال بنا	الإتصال بنا	الإتصال بنا	الإتصال بنا

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق