• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

ساخت جعبه چت کاربران با PHP و Ajax در jQuery

19 7676 ۱۹ اردیبهشت ۹۳

سلام دوستان.

همونطور که از عنوان مطلب پیداست میخوایم یه shoutbox با استفاده از PHP و MySQL و تابع Ajax در جی کوئری بسازیم.

اگر نمیدونید شات باکس چی هست باید بگم که شات باکس یه باکس کوچیک چت کنار سایت ها هستش که به کاربران اجازه میده پیام هاشون رو فورا روی سایت بنویسند بدون اینکه نیاز به ثبت نام داشته باشند یا منتظر تایید پیامشون از سوی مدیران سایت ها بشند.

شروع میکنیم.

اول کدهای html مورد نیازمون رو داخل فایل index.html مینویسیم:

یه فرم با دوتا فیلد داریم که یکیش برای نام کاربر هست و دیگریش هم برای پیام.

یه div با آیدی loading داریم که قراره تصویری که نشون دهنده درحال لود بودن پیام ها هست اینجا نشون داده بشه.

یه ul هم با آیدی content داریم که هیچ المنت li ی نداره چون متن پیام ها بعدا با ایجکس لود میشه و اینجا قرار میگیره.

یکمی هم کد css رو در فایل style.css مینویسیم تا شات باکسمون ظاهر بهتری داشته باشه:

حالا یه دیتابیس لازم داریم که پیام هارو اونجا ذخیره کنیم و بعد هم با استفاده از php این پیام ها رو از دیتابیس بگیریم. پس فقط یه جدول با سه ستون id، user و message لازم داریم:

تنها چیزی که باید بدونیم اینه که چطوری یه درخواست POST رو از جاوا اسکریپت به سمت سرور بفرستیم. اول کدهای جاوااسکریپت رو داخل فایل script.js مینویسیم:

حالا توضیح کدها.

خط 2 تا 5، چندتا متغیر تعریف کردیم و سلکتور های jQuery که قراره ازشون استفاده کنیم رو در این متغیرها ذخیره کردیم.

خط 7 تا 20، یه تابع به اسم show() تعریف کردیم که تو این تابع تا وقتی که داریم با استفاده از php داده ها رو از جدول دیتابیسمون دریافت میکنیم، یه تصویر نشون دهنده در حال لود بودن پیام ها نشون داده میشه. بعد هم با استفاده از ای جکس، داده ی "action=show" رو به صفحه ی shoutbox.php و با استفاده از متد POST ارسال کردیم. یعنی در این حالت داریم $_POST['action']="show" رو ارسال میکنیم. نهایتا وقتی درخواست کامل شد، تصویر loading رو پنهان کردیم و داده های جدید رو در المنت انتخابیمون که همون #content بود ریختیم.

خط 23 تابع show رو استفاده کردیم و خط 24 هم هر 5ثانیه یک بار تابع show رو اجرا میکنیم.

خط 26 تا 47 هم زمانی اجرا میشه که فرم با آیدی #form ارسال بشه. خط 27 چک کردیم کاربر فیلد نام و پیام رو پر کرده باشه، اگر این دو تا فیلد رو پر کرده بود که دستورات داخل بلاک شرطیمون اجرا میشه ولی اگر این دو تا فیلد خالی باشه خط 45 هشدار میده که تمامی فیلدها را پر کنید. خط 46 هم واسه اینه که وقتی فرم submit شد دیگه صفحه refresh نشه. خط 29 و 30 مقدار دو تا فیلد نام و پیام رو داخل دو تا متغیر ذخیره کردیم که بعدا استفاده ازشون راحت تر باشه. خط 32 هم دکمه رو غیرفعال کردیم و value دکمه رو هم تغییر دادیم. از خط 34 تا 43 با استفاده از ای جکس و متد POST داریم داده هامون رو به صفحه shoutbox.php ارسال میکنیم. دقت کنید که اینبار داده هایی که داریم ارسال میکنیم بیشتر هست و مهم هست که بدونید وقتی بیشتر از یک متغیر در پارامتر data داریم باید با علامت & اونهارو از هم جدا کنیم. خط 38 تا 42 هم مال زمانیه که درخواستمون کامل شد. در این حالت دوباره تابع show رو اجرا میکنیم، بعدش هم دکمه ای که غیرفعال کرده بودیم و مقدارش رو عوض کرده بودیم به حالت اولش برش گردوندیم و بعد هم مقدار فیلد پیام رو خالی کردیم.

حالا که کدهای جاوااسکریپت رو نوشتیم وقت اینه که کدهای PHP رو بنویسیم تا درخواست های ارسالی از جاوااسکریپت رو مدیریت کنیم. سه تابع احتیاج داریم:

تابع connect() : که برای اتصال به دیتابیس هست.

تابع showContent() : که آخرین پیام ها رو از دیتابیس میگیره.

تابع insertContent() : که پیام جدید رو در دیتابیس ذخیره میکنه.

کد های زیر همگی داخل فایل shoutbox.php قرار میگیرند.

تابع connect که گفتیم به دیتابیس متصل میشه و منبعی که بهش متصل شده رو بر میگردونه که ما بعدا مقدار برگشتی از این تابع رو داخل یه متغیر میریزیم و اون رو به عنوان پارامتر اول به تابع های showContent و insertContent ارسال میکنیم.

تابع showContent یه پارامتر دوم هم داره که این پارامتر تعداد رکوردهای برگشتی رو مشخص میکنه و نهایتا کار این تابع دریافت اطلاعات از دیتابیس هست. در واقع اطلاعات رو بر اساس مقدار id که دارند به صورت نزولی مرتب میکنه و تعدادی از اونها رو دریافت میکنه. (پارامتر دوم تابع مشخص میکنه چه تعداد از اطلاعات باید دریافت بشه)

تابع insertContent سه پارامتر داره. پارامتر اول که گفتیم چی هست. پارامتر دوم نام کاربر هست. پارامتر سوم هم پیام کاربر هست. داخل این تابع برای اینکه از حمله ی sql injection جلوگیری کنیم از mysql_real_escape_string استفاده کردیم. strip_tags هم برای اینه که اگر کاربر احیانا میخواست از تگ های html و php استفاده کنه، اون تگ رو حذف کنه. بعد هم که نام و پیام کاربر رو تو جدول دیتابیسمون ذخیره میکنیم.

اگر یادتون باشه که حتما هست، داده هایی که با ایجکس داشتیم ارسال میکردیم یک بار action=show بود و یکبار هم action=insert بود. پس حالا میتونیم یه switch برای action بزنیم و با توجه به مقداری که داره تصمیم بگیریم که عملیات درج اطلاعات رو انجام بده یا عملیات دریافت.

بررسی کردیم که اگر $_POST['action'] ارسال نشده بود کاربر رو به صفحه index.html ارسال کنه. این کار برای وقتی خوبه که کاربر سعی داره فایل shoutbox.php رو مستقیما باز کنه.

ولی در صورتی که $_POST['action'] ارسال شده باشه اول تابع connect رو اجرا کردیم و همونطور که گفتم مقدار برگشتی این تابع رو داخل متغیر ریختیم تا بعدا در دو تابع دیگه ازش استفاده کنیم. بعد مقدار $_POST['action'] رو switch کردیم که اگر مقدارش برابر با show بود از تابع showContent استفاده کنه و اطلاعات رو از دیتابیس واکشی و چاپ کنه. اگر هم مقدارش برابر با insert بود با استفاده از تابع insertContent اطلاعات رو در دیتابیس ذخیره کنه. نهایتا اتصالمون به دیتابیس رو هم بستیم.

همین :)

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 19 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    پکیج آماده وب(۱ اردیبهشت ۱۳۹۴)

    سلام ممنون فقط چرا دمو نذاشتین؟

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram