في هذا المقال سيتم انشاء برنامج محادثه بسيط في صفحة ويب باستخدام PHP و jQuer
هذا الاداة يمكن استخدامها كنوع من الدعم الفني في موقعك.
برمجة سكربت دردشة بالعربى
صورة البرنامج بعد الانتهاء من برمجتة سيكون مثل الذي في الصورة اعلاه. سيحتوي على تسجيل الدخول والخروج, خصائص اجاكس
وسيدعم تعدد المستخدمين.
الخطوة الاولى صفحة الهوتميل:
اولا نقوم بانشاء صفحة جديدة باسم index.php
ونكتب الشفرة التالية به
قمنا باضافة عناون الصفحة ورابطكود HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>المحادثة - الدعم الفني</title> <link type="text/css" rel="stylesheet" href="style.css" /> </head> <body> <div id="wrap"> <div id="menu"> <p>اهلا, <b></b></p> <p><a id="exit" href="#">خروج</a></p> <div style="clear:both"></div> </div> <div id="chatbox"></div> <form name="message" action=""> <input name="usermsg" type="text" id="usermsg" size="63" /> <input name="submitmsg" type="submit" id="submitmsg" value="Send" /> </form> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> // jQuery Document $(document).ready(function(){ }); </script> </body> </html>
الى ملف ال css (style.css).
- داخل body قمنا بكتابة الشكل العام لصندوق المحادثة داخل div #wrapper. سيكون لدينا 3 اقسام بالصفحة: قسم القائمة, وصندوق المحادثة
وحقل ادخال الرسالة حسب الترتيب التالي:
* ال #menu div سحتوي على عنصرين الفقرة. الاول عباره عن رساله ترحيبية للمستخدم والتي ستكون على اليمين والفقرة الثانية
عباره عن رابط الخروج واغلاق صندوق المحادثة
* ال #chatbox سحتوي على نص الرسائل في الصندوق. وسيتم تحميل النصوص بعد النقر على زر ارسال من ملف خارجي باستخدام
الاجاكس.
* العنصر الاخير في #wrapper سيكون نموذج ارسال الرسائل والذي سيحتوي على حقل نصي وزر الارسال.
- قمنا بكتابة السكربت اسفل الصفحة من اجل تسريع عملة فتح الصفحة. اولا عملنا رابط الى ملف ال jQuery ثم قمنا بتجهيز السكربت للعمل
وهذا هو المكان الذي سيتم فيه كتابة شفرة الاجاكس. الخطوة الثانية: تنسق الصفحة CSS
سنقوم الان بتنسيق صفحة المحادثة لكي يظهر بشكل افضل من الشكل الحالي. قم بنسخ والصاق الكود التالي في ملف style.css
لا يوجد هناك الشي الكبير مجرد تنسيق صندق المحادثة لكي يظهر بالشكل التالي:كود HTML:#chatbox { text-align:left; margin:0 auto; margin-bottom:25px; padding:10px; background:#fff; height:270px; width:430px; border:1px solid #ACD8F0; overflow:auto; } #usermsg { width:395px; border:1px solid #ACD8F0; } #submit { width: 60px; } .error { color: #ff0000; } #menu { padding:12.5px 25px 12.5px 25px; } .welcome { float:left; } .logout { float:right; } .msgln { margin:0 0 2px 0; }
برمجة سكربت دردشة بالعربى
كما ترى بالصورة بالاعلى لقد انتهينا من تنسيق وانشاء صفحة المحادثة والتي يتظهر للمستخدم.
الخطوة الثالثة: استخدام PHP لانشاء نموذج تسجيل الدخول:
الان سنقوم بانشاء نموذج بسيط لكي نطلب من المستخدم كتابة اسمه قبل الاستمرار والكتابة في صندوق المحادثة
التي تم انشاءها ستسأل المستخدم عن اسم \ اسمها وعند كتابة الاسم نقوم بالتأكد من كتابة المستخدم اسمه.كود HTML:session_start(); function loginForm(){ echo' <div id="loginform"> <form action="index.php" method="post"> Please enter your name to continue: <label for="name">Name:</label> <input id="name" name="name" type="text" /> <input id="enter" name="enter" type="submit" value="Enter" /> </form></div> '; } if(isset($_POST['enter'])){ if($_POST['name'] != ""){ $_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name'])); } else{ echo '<span>Please type in a name</span>'; } } ?>
اذا كان قام الشخص بادخال اسم سنقوم بتخزين الاسم في $_SESSION['name']. بما اننا سنستخدم الكوكيز لتخزين الاسم يجب تفعيله اولا
باستخدام session_start() قبل عرض اي شي في الصفحة. يجب ان تلاحظ استخدام الدالة htmlspecialchars() والتي تقوم بتحويل الرموز الى رموز هوتميل وبالتالي حماية متغير الاسم من جعله ضحية
بكتابة شفرات تدمر الصفحة كنوع من الحماية.
اظهار نموذج تسجيل الدخول:
لكي نظهر نموذج تسجيل الدخول للمستخدم الذي لم يسجل دخوله, ولا يوجد كوكيز باسمه نقوم باستخدام دالة شرطية اخرى حول #wrapper
وفي حالة ان الستخدم قد تم تسجيل دخوله مسبقا سيتم اخفاء صندوق الدخول وسيتم اظهار صندوق المحادثة بدلا منه.
قائمة الترحيب وتسجيل الخروج:كود HTML:if(!isset($_SESSION['name'])){ loginForm(); } else{ ?> <div id="wrapper"> <div id="menu"> Welcome, <strong> </strong> <a id="exit" href="#">Exit Chat</a></div> <form> <input id="usermsg" name="usermsg" size="63" type="text" /> <input id="submitmsg" name="submitmsg" type="submit" value="Send" /> </form></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript">// <![CDATA[ // jQuery Document $(document).ready(function(){ }); // ]]></script> } ?>
لم ننتهي من نظام تسجيل الدخول لصندوق المحادثة بعد نحتاج ايضا الى تمكين المستخدم من تسجيل الخروج وانهاء الكوكيز.
اذا تذكر صفحتنا الهوتميل تحتوي على قائمة بسيطة. دعنا ننظر لها ونظيف شفرة php لاعطاء القائمة اكثر فعاليه.
اولا دعنا نضيف اسم المستخدم الى قائمة الترحيب عن طريق طباعة اسمه من الكوكيز كالتالي
الشفرة اعلاه ببساطة تظهر رسالة تأكيد انهاء المحادثة وعند قيام المستخدم بتأكيد الانهاء نقوم بتحويله الى الصفحة الرئيسية مع تمريركود HTML:<script type="text/javascript"> // jQuery Document $(document).ready(function(){ //If user wants to end session $("#exit").click(function(){ var exit = confirm("Are you sure you want to end the session?"); if(exit==true){window.location = 'index.php?logout=true';} }); }); </script>
قيمة نعرف عن طريقها بالانهاء وهي كالتالي index.php?logout=true. هذا ببساطه يشنأ لنا متغير باسم logout يحتوي على القيمة true
نحتاج الى استلام هذا المتغير باستخدام ال PHP
اذا تم تمرير المتغير عبر رابط الصفحة واحتواءه على القيمة true نقومكود HTML:if(isset($_GET['logout'])){ //Simple exit message $fp = fopen("log.html", 'a'); fwrite($fp, " <div class="msgln"><em>User ". $_SESSION['name'] ." has left the chat session.</em></div> "); fclose($fp); session_destroy(); header("Location: index.php"); //Redirect the user }
بحذف جميع ملفات الكوكيز لهذا المستخدم.
قبل انهاء كوكيز المستخدم باستخدام الدالة destroy_session() نقوم بكتابة قيمة تدل على خروجه من المحادثة مثلا ك لقد قام المستخدم بانهاء
المحادثة. نستخدم في هذه الحالة الدالة fopen() لكي نفتح ملف للكتابه عليه باستخدام fwrite() ثم اغلاق الملف باستخدام الدالة fclose() للملف
log.html والذي بنراه لاحقا.
بعد ذلك نقوم بانهاء وحذف الكوكيز لهذا المستخدم ونعيد توجيه الصفحة الى صفحة تسجيل الدخول للمحادثة وسيتم اظهاء نموذج تسجيل الدخول.
الخطوة الرابعة: التفاعل مع مدخلات المستخدم:
بعد ارسال المستخدم رساله بالنقر على زر ارسال نريد ان نحصل على النص وكتابته في ملف log.html. ولكي نعمل ذلك يجب استخدام jQuery و
PHP لكي يعمل تزامنيا بدوت اعادة تحديث الصفحة على كل رساله.
jQuery:
تقريبا كل العمل اللي سنقوم به سيعتمد على اداة ال jQuery للتعامل مع البيانات المرسلة من قبل المستخدم.
قبل عمل اي شي يجب الحصول على الرساله التي قام المستخدم بكتابتها. ويمكن الحصول عليها باستخدام الدالة val() والتي تستخرج القميةكود HTML://If user submits the form $("#submitmsg").click(function(){ var clientmsg = $("#usermsg").val(); $.post("post.php", {text: clientmsg}); $("#usermsg").attr("value", ""); return false; });
من قبل الرسالة. بعد ذلك نقوم بحفظ هذه القيمة في متغير من لدينا clientmsg.
2- هنا يأتي القسم المهم: دالة ارساله الرساله باستخدام jQuery. مهمة الدالة هي ارسال طلب لصفحة معينة باستخدام POST وهذه الصفحة هي
post.php والتي بنقوم بانشاءها لاحقا.
3- اخيرا نقوم بتفريغ حقل الرسالة بعد الارسال. PHP – post.php
في لحظة استقبال الرسالة من POST كل مره يقوم المستخدم بالنقر على زر ارسال يحب الحصول على البيانات المرسلة وكتابتها في ملف المحادثة
لكي يسمح لنا بالحصول على اسم المستخدم من الكوكيز ولكي نتأكدكود HTML:session_start(); if(isset($_SESSION['name'])){ $text = $_POST['text']; $fp = fopen("log.html", 'a'); fwrite($fp, " <div class="msgln">(".date("g:i A").") <strong>".$_SESSION['name']."</strong>: ".stripslashes(htmlspecialchars($text))."</div> "); fclose($fp); } ?>
من دخوله غرفة المحادثة
2- يجب التاكد من دخول المستخدم اولا باستخدام الدالة isset().
3- الخطوة التالية هي الحصول على القيم التي تم تمريرها الى هذه الصفحة باستخدام jQuer4- y. ونحفظ هذا النص في المتغير $text.
4- هذه البيانات المرسلة والتي سيتم ارسالها لاحقا من قبل المستخدم ايضا سنقوم بحفظها في ملف المحادثة log.html. ولكي نعمل ذلك
نقوم بفتح الملف ثم كتابة البيانات عليه بعد اضافة بعض المعلومات لها مثل وقت الاضافة ومن ثم نقوم باغلاق الملف. من الملاحظ هنا ايضا
استخدام بعض الدوال مثل دالة htmlspecialchars() لكي نحمي انفسنا من الاكواد المضرة بالموقع. الخطوة الخامسة: اظهار نص المحادثة:
كل ما ارسلة المستخدم تعاملنا معه باستخدام jQuery وقمنا بكتابته في ملف المحادثة باستخدام PHP. الشي الوحيد الذي بقى هو اضهار نص
المحادثة في صندوق المحادثة والقيام بعملية التحديث كل مره يتم فيها ارسال رساله.
لكي نوفر بعض الوقت لانفسنا سنقوم بتحميل المحادثة في مربع
استخدمنا نفس الاسلوب المتبع في ملف post.php مع اختلاف بسيط وهو اننا نقوم بالقراءة هذه المره من الملف وعرض المحتويات فقط.كود HTML:<div id="chatbox">if(file_exists("log.html") && filesize("log.html") > 0){ $handle = fopen("log.html", "r"); $contents = fread($handle, filesize("log.html")); fclose($handle); echo $contents; } ?></div>
طلب jQuery.ajax :
طلب الاجاكس هو نواة كل ما قمنا بعمله حتى الان. هذا الطلب لا يسمح فقط بارسال واستقبال البيانات عبر النموذج بدون اعادة تحديث الصفحة,
ولكن ايضا يسمح لنا بالسيطره على اي طلب للبيانات
لقد قمنا بكتابة كود الاجاكس داخل دالة loadLog() وقمنا باستخدام ثلاث اومر من الاجاكس فقط وهي:كود HTML:// load the file containing the chat log function loadLog(){ $.ajax({ url: "log.html", cache: false, success: function(html){ $("#chatbox").html(html); // insert chat log into the #chatbox div }, }); }
url: عباره عن نص الرابط المطلوب. استخدمنا هنا رابط ملف المحادثة log.html
cache: هذا سيحمي ملف المحادثة من الكاش وذلك للتأكد باننا نحصل على كل تغيير في الملف.
success: سيسمح لنا باستدعاء دالة والتي سنمرر لها البيانات المرسله والمستقبلة.
وكما ترى قمنا بكتابة البيانات في صندوق المحادثة #chatbox
شريط التمرير Auto-scrolling:
كما هو ملاحظ في برامج المحادثة هو وجود شريط تمرير عند زيادة النص ويتحرك هذا الشريط اليا الى الاسفل عند ارسال رساله جديدة.
سنقوم بعمل خاصيه بسيطة تؤدي نفس الغرض والتي ستقارن ارتفاع صندوق المحادثة قبل وبعد استدعاء الاجاكس. اذا كان ارتفاع الشريط
اكثر بعد الاستدعاء سنستخدم دالة الحركة في jQuery وهي الدالة animate لتحريط الشريط.
في البداية حصلنا على ارتفاع الصندوق الحالي وقمنا بحفظ القيمة في متغير $oldscrollHeight قبل ارسال الرسالة.كود HTML://Load the file containing the chat log function loadLog(){ var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request $.ajax({ url: "log.html", cache: false, success: function(html){ $("#chatbox").html(html); //Insert chat log into the #chatbox div //Auto-scroll var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request if(newscrollHeight > oldscrollHeight){ $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div } }, }); }
بعد نجاح ارسال الرسالة قمنا ايضا بتخزين ارتفاع الصندوق في متغير جديد باسم $newscrollHeight.
وعند مقارنة المتغيرين باستخدام الدالة الشرطية, اذا كان newscrollHeight اكبر من oldscrollHeight نستخدم الدالة animate() لتحريك الشريط
الى الاسفل.
استمرار تحديث ملف المحادثة:
سؤال سيطرح نفسه وهو كيف سيتم ارسال البيانات الى ومن المستخدمين؟ او كيف سيتم استمرار ارسال طلبات تحديث البيانات؟
الجواب هو استخدام الدالة setInterval() والتي ستعمل على استدعاء دالة الاجاكس loadLog() كل 2.5 ثانية وستقوم دالة loadLog بتحميلكود HTML:setInterval(loadLog, 2500); // reload file every 2500 ms
الملف من جديد وقراءة ماهو جديد.
الى هنا وصلنا الى نهاية المقال وان شاء الله نكون تعلمنا كيفية انشاء صندوق محادثة مبسط يمكن استخدامه في موقعك الشخصي او موقع
الشركة كبرنامج دعم فني على سبيل المثال. بامكانك ايضا اضافة خصائص اخرى له مثل الابتسامات وغيرها.
اتمنى ان ينال المقال اعجابكم وترقبوا مقالات اخرى ان شاء الله.
******************************
ملااااحظه : الدرس منقول
رد مع اقتباس
المشاركة الأصلية كتبت بواسطة احمد الكرعاوي
