تبسيط البرمجة ب JavaScript باستخدام jQuery


الدرس: TP : دردشة في jQuery


الصفحة السابقة
أقترح مشروعًا طموحًا: كتابة دردشة في jQuery . إذا كنت تعتقد أنك لن تصل إلى هناك أبدًا ، فاقرأ عناوين الفصول التي قرأتها حتى الآن وتراجع. اترك خيالك واسأل نفسك ما هو برنامج الدردشة وما يتضمنه وما تحتاج إلى إعداده في jQuery .
بمجرد قضاء هذا الوقت في التفكير ، تابع القراءة وسأعطيك كل التعليمات لكتابة هذا البرنامج.

تعليمات لتنفيذ TP


من لم يدردش مطلقا مع أصدقائه أو أحبائه باستخدام تطبيق للدردشة؟ يسمح لك هذا النوع من البرامج بإدخال رسائل نصية قصيرة سيتم عرضها لكل شخص يتبع المحادثة. إذا أرسل أحدهم إجابة ، فسيتم عرضها أيضًا في كل شخص يتبع المحادثة. مبدأ الدردشة التي يتم طرحها ، سوف تجد في الصورة التالية مثالًا على تنفيذ برنامج الدردشة الذي ستقوم بتطويره.
jQuery web
بسيط بشكل مزعج ، وهذا البرنامج هو أيضا فعال جدا
فيما يلي بعض الملاحظات لاعطائك بداية جيدة:
  • يمكنك اختبار هذا البرنامج محليًا باستخدام خادم Apache ، لكنني أنصحك بتحميله إلى خادم ويب حتى يتمكن جميع أصدقائك من استخدامه.
  • عندما يرسل المستخدم رسالة ، يجب إرسال بيانات النموذج إلى البرنامج chat.php . يقوم هذا البرنامج بتحديث الملف ac.htm الذي ستستخدمه لتحديث محتوى منطقة المحادثة.
  • يجب أن يتم تحديث المحادثة كل 4 ثوانٍ. يمكنك تقليل هذه الفترة ، لكن الخادم الذي سيتم وضع البرنامج عليه قد لا يقدر إذا بدأ كثير من الأشخاص محادثة.

كود PHP


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

<?php
$nom = $_POST['nom'];                                                             
$message = $_POST['message'];                                                  
$ligne = $nom.' > '.$message.'<br>';     
$leFichier = file('ac.htm');            
array_unshift($leFichier, $ligne);       
file_put_contents('ac.htm', $leFichier); 
?>
أعتقد أنني قلت كل شيء. لذلك ، الأمر متروك لك للعب. التقدم خطوة بخطوة. لا تكتب الكثير من التعليمات في وقت واحد و خاصة قم بالاختبار قدر الإمكان للتحقق من صحة ما كتبته.

الاصلاح


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

<html>
  <head>
    <meta charset="UTF-8">
    <title>Chat jQuery</title>
      <style type="text/css">
      #conversation {
        width: 300px;
        height: 400px;
        border: black 1px solid;
        background-color: #efecca;
        overflow-x: hidden;
        overflow-y: scroll; 
        padding: 5px;
        margin-left: 10px;
      }
      fieldset {
        width: 330px;
        background-color: #e6e2af;
        border: black 1px solid;
      }    
    </style>
  </head>

 
  <body dir="rtl">
   <fieldset>
     <legend>دردشة في jQuery</legend>
      <div id="conversation" dir="rtl"></div><br />
      <form action="#" method="post">
        <input type="text" id="nom" value="pseudo" size="6">
        <input type="text" id="message" size="27">
        <button type="button" id="envoyer" title="Envoyer"><img style="width:30px" src="envoyer.gif"></button>
      </form>
    </fieldset>
	<script src="jquery.js"></script>
<script>
	$(function() {
    afficheConversation();
      
    $('#envoyer').click(function() {
        var nom = $('#nom').val();
        var message = $('#message').val();
        $.post('chat.php', {
            'nom': nom,
            'message': message
        }, afficheConversation);
    });

    function afficheConversation() {
      $('#conversation').load('ac.htm');
      $('#message').val('');
      $('#message').focus();
    }
      
    setInterval(afficheConversation, 4000);
  });
</script>
  </body>
</html>
كتابة رمز JQUERY
يبقى فقط إحياء هذه الصفحة من خلال إدراج تعليمات jQuery . أدخل الكود التالي بعد العلامة </fieldset> :

  $(function() {
    afficheConversation();
      
    $('#envoyer').click(function() {
        var nom = $('#nom').val();
        var message = $('#message').val();
        $.post('chat.php', {
            'nom': nom,
            'message': message
        }, afficheConversation);
    });

    function afficheConversation() {
      $('#conversation').load('ac.htm');
      $('#message').val('');
      $('#message').focus();
    }
      
    setInterval(afficheConversation, 4000);
  });
ماذا؟ هذا كل شيئ ؟ هذه الأسطر القليلة ستجعل الدردشة تعمل؟
حسنا ... نعم ! تذكر شعار jQuery : " اكتب أقل ، افعل أكثر " ، مما يعني "الكتابة أقل لعمل المزيد". مرة أخرى ، تُظهر jQuery قوتها عبر هذه الأسطر القليلة من التعليمات البرمجية.
السطر 1 ، لاحظ الإشارة إلى الإصدار المصغر من jQuery على Google CDN . يشغل كود jQuery الأسطر من 3 إلى 19. عندما يكون DOM متاحًا ( $(function() {) ، يتم استدعاء الطريقة afficheConversation() . يتم تعريفها بين السطور 14 و 16. تعرض هذه الطريقة ببساطة محتويات الملف ac.htm في العلامة <div id="conversation"> :

$('#conversation').load('ac.htm'); 
هذه التعليمات البسيطة مسؤولة عن كل ما يتم عرضه في العلامة <div> . شكرا لك jQuery !
تمثل الخطوط من 5 إلى 11 طريقة إدارة الأحداث للنقرات على زر الأمر. عند النقر على الزر، محتويات مربعات النص كلمة المرور #nom و #message تخزينها في المتغيرات nom و message :

var nom = $('#nom').val();
var message = $('#message').val();
يستخدم البيان التالي وظيفة jQuery post() لنشر هذه البيانات في البرنامج chat.php . عند إرسال البيانات ، يتم تنفيذ وظيفة الإرجاع afficheConversation()، مما يؤدي إلى ظهور الرسالة التي تم نشرها للتو في منطقة المحادثة:

$.post('chat.php', {'nom':nom, 'message': message }, afficheConversation); 
لجعل الحياة أسهل للمستخدم ، تحذف العبارة التالية محتويات مربع النص #message ، لكنها تحتفظ بمربع النص #pseudo . من المحتمل أنه يريد مواصلة المحادثة عن طريق الاحتفاظ بنفس اللقب ولكن ليس الرسالة التي كتبها للتو. لتجنب الاضطرار إلى حذف منطقة إدخال الرسائل في كل مرة يريد فيها التدخل ، يكون إرشادات jQuery كافية:

$('#message').val(''); 
التعليمة الثالثة للدالة afficheConversation() تعطي التركيز على منطقة إدخال الرسالة. لذلك يكفي للمستخدم إدخال رسالة والنقر فوق زر الأمر لإرسالها:

$('#message').focus();
لم يتبق سوى تعليمة واحدة لإكمال TP . هذه التعليمات مهمة للغاية لأنها هي التي ستعمل على تشغيل الأسلوب على فترات منتظمة afficheConversation() وبالتالي تحديث منطقة المحادثة عندما يقوم أشخاص آخرون غيرك بنشر رسالة. بالطبع ، تستخدم هذه الإرشادات وظيفة JavaScript setInterval() عن طريق تحديد اسم الوظيفة المراد تنفيذها ، دون قوسين أو علامات اقتباس ، التأخير بين تنفيذين يتم التعبير عنها بالمللي ثانية:

setInterval(afficheConversation, 4000); 
قد يتساءل البعض منكم عن سبب استدعاء الوظيفة afficheConversation() مرتين (الخطان 4 و 9) ، في حين أن الوظيفة setInterval() تؤديها بانتظام كل 4 ثوان. هذه المكالمات هما فقط من أجل راحة المستخدم:
  • السطر 4 ، يتم ملء منطقة المحادثة بمجرد توفر DOM ؛
  • السطر 9 ، يتم تحديث منطقة المحادثة فور نشر الرسالة.
آمل أن تستمتع بهذا TP . الأمر متروك لك لتحسينه. على سبيل المثال ، يمكنك:
  • السماح للمحادثة باستخدام الصورة الرمزية للرسومات ؛
  • السماح للرسائل على أسطر متعددة
  • تحسين تنسيق الرسائل المنشورة عن طريق تعيين لون خلفية مختلف لكل رسالة أخرى ؛
  • حدد مجموعات محادثة متعددة (هنا chat.htm يشارك كل من يعرض الصفحة مساحة المحادثة نفسها) .
هذه مجرد اقتراحات ، وهي رهان آمن ستجد الكثير من التحسينات الأخرى لهذا البرنامج.