تطوير نظام دردشة باستخدام AJAX

عندما تقوم بتطوير نظام تسجيل الدخول والتسجيل باستخدام PHP وHTML وMySQL وما إلى ذلك، فإنك قد تواجه بعض التحديات في تنفيذ الدردشة! ترغب في الحصول على البيانات من مربع النص (textarea)، وعندما يتم النقر على الزر، يجب أن يتم إفراغ مربع النص، وإرسال النص إلى قاعدة البيانات دون تحديث الصفحة! لديك نظام يقوم بتحديث البيانات من قاعدة البيانات وتحديث div “chat” في ملف index.php!

لتحقيق هذا، يمكنك استخدام تقنية AJAX (Asynchronous JavaScript and XML) التي تسمح بتحميل البيانات دون إعادة تحميل الصفحة. إليك كيفية القيام بذلك:

1. إضافة الكود HTML وJavaScript:

   قم بإنشاء نموذج HTML يحتوي على textarea وزر إرسال، ثم استخدم JavaScript للتقاط النص من textarea وإرساله باستخدام AJAX دون إعادة تحميل الصفحة. على سبيل المثال:

   htmlCopy code
   <form id="chatForm">
       <textarea id="message" name="message">textarea>
       <button type="submit">إرسالbutton>
   form>
   
   <div id="chat">div>
   
   <script>
       document.getElementById("chatForm").addEventListener("submit", function(event) {
           event.preventDefault();
           var message = document.getElementById("message").value;
           sendMessage(message);
       });
   
       function sendMessage(message) {
           var xhr = new XMLHttpRequest();
           xhr.open("POST", "save_message.php", true);
           xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
           xhr.onreadystatechange = function() {
               if (xhr.readyState === 4 && xhr.status === 200) {
                   document.getElementById("message").value = ""; // Empty textarea
                   updateChat(); // Update chat after sending message
               }
           };
           xhr.send("message=" + encodeURIComponent(message));
       }
   
       function updateChat() {
           var xhr = new XMLHttpRequest();
           xhr.open("GET", "get_messages.php", true);
           xhr.onreadystatechange = function() {
               if (xhr.readyState === 4 && xhr.status === 200) {
                   document.getElementById("chat").innerHTML = xhr.responseText;
               }
           };
           xhr.send();
       }
   
       // Call updateChat initially to load existing messages
       updateChat();
   script>
   

2. إنشاء ملف PHP لحفظ الرسائل:

   قم بإنشاء ملف PHP يُسمى save_message.php لاستقبال الرسائل وحفظها في قاعدة البيانات. على سبيل المثال:

   phpCopy code
   
   // اتصال بقاعدة البيانات
   
   if ($_SERVER["REQUEST_METHOD"] == "POST") {
       $message = $_POST["message"];
       // قم بإدراج رسالة في جدول الدردشة في قاعدة البيانات
   }
   ?>
   

3. إنشاء ملف PHP لاسترجاع الرسائل:

   قم بإنشاء ملف PHP آخر يُسمى get_messages.php لاسترجاع الرسائل من قاعدة البيانات وإرجاعها كاستجابة AJAX. على سبيل المثال:

   phpCopy code
   
   // اتصال بقاعدة البيانات
   // استعلام SQL لاسترجاع الرسائل من جدول الدردشة
   // استرجاع البيانات وتنسيقها بشكل HTML
   echo $formatted_messages;
   ?>
   

باستخدام هذه الخطوات، ستتمكن من إضافة الرسائل إلى قاعدة البيانات بدون إعادة تحميل الصفحة وتحديث div “chat” بشكل مستمر دون تدخل المستخدم.

بالطبع، إليك المزيد من المعلومات لتوضيح العملية بشكل أكبر:

4. تحضير جدول قاعدة البيانات:

   قبل أن تتمكن من حفظ الرسائل في قاعدة البيانات، يجب أن تقوم بإنشاء جدول لتخزين الرسائل. يمكنك استخدام SQL لإنشاء جدول بسيط لهذا الغرض. على سبيل المثال:

   sqlCopy code
   CREATE TABLE messages (
       id INT AUTO_INCREMENT PRIMARY KEY,
       message TEXT,
       created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
   );
   

   في هذا المثال، تحتوي الجدول على حقلين: id و message و created_at. حيث يتم استخدام id كمفتاح أساسي وتلقائي للرسائل، و message يحتوي على نص الرسالة، و created_at يحتوي على تاريخ ووقت إرسال الرسالة.

5. إدراج الرسائل في قاعدة البيانات:

   في ملف save_message.php، بمجرد استقبال الرسالة من العميل، يمكنك استخدام SQL لإدراج الرسالة في قاعدة البيانات. هذا مثال لكيفية القيام بذلك:

   phpCopy code
   
   // اتصال بقاعدة البيانات
   
   if ($_SERVER["REQUEST_METHOD"] == "POST") {
       $message = $_POST["message"];
       $sql = "INSERT INTO messages (message) VALUES ('$message')";
       // تنفيذ الاستعلام
   }
   ?>
   

   يجب عليك أيضًا التأكد من تحقق من صحة وتنظيف البيانات المدخلة قبل إدراجها في قاعدة البيانات لتفادي هجمات الحقن.

6. استرجاع الرسائل من قاعدة البيانات:

   في ملف get_messages.php، يجب استخدام SQL لاسترجاع الرسائل من قاعدة البيانات. يمكنك استخدام استعلام SELECT لاسترجاع الرسائل بترتيب زمني عكسي (أحدث الرسائل أولاً). هذا مثال لاسترجاع الرسائل:

   phpCopy code
   
   // اتصال بقاعدة البيانات
   $sql = "SELECT * FROM messages ORDER BY created_at DESC";
   // تنفيذ الاستعلام واسترجاع النتائج
   // تنسيق الرسائل كاستجابة HTML
   echo $formatted_messages;
   ?>
   

   يمكنك تنسيق الرسائل كما تشاء، على سبيل المثال باستخدام علامات HTML مثل

   أو

   لعرض كل رسالة بشكل منفصل.

7. التحقق من الأمان:

   يجب دائمًا أن تتخذ إجراءات الأمان المناسبة عند التعامل مع قواعد البيانات والبيانات المُدخلة من المستخدمين. ينبغي عليك استخدام استعلامات معقولة وتنقية البيانات المُدخلة لتجنب هجمات الحقن، مثل هجمات SQL Injection. يمكن استخدام تقنيات مثل استخدام تعليمة معلمة (Prepared Statements) لتجنب هذه المشاكل.

باستخدام هذه الخطوات، يمكنك تنفيذ نظام الدردشة الخاص بك بسلاسة، مع الحفاظ على الأمان ودون الحاجة إلى إعادة تحميل الصفحة.