ساخت یک چت روم ساده با php و MySQL

ساخت یک چت روم ساده با php و MySQL

در این آموزش، ما قصد داریم یک سیستم چت روم ساده را با php و MySQL درست کنیم. این آموزش برای کسانی که تازه، کار با پی اچ پی را شروع کرده اند، و می خواهند با پایگاه داده کار کنند مفید است.

 

  دانلود [fa type=”download”]

مقدمه

این آموزش راهنمایی می کند تا یک چت روم ساده را با php ایجاد کنید، و با استفاده از MySQL نوشته های خود را در پایگاه داده ذخیره کنید و در آخر با مقداری CSS برنامه را زیبا جلوه می دهیم. در این پست فرض شده است که آشنایی قبلی با HTML و CSS دارید، چون در حال توسعه دادن php از آنها استفاده می شود.

پس از پایان این پست، شما به خوبی اصول اولیه php و ارتباط آن با پایگاه داده درک خواهید کرد.

 

شروع

قبل از شروع شما باید موارد خواسته شده را آماده سازی کنید:

  • Server برای اجرا پی اچ پی نیاز به یک سرور داریم، که می توانیم از سرورهای مجازی Xampp یــا Wamp یــا Mamp استفاده کنیم، یکی از این ها را دانلود و نصب کنید. پیشنهاد می کنم Xampp را نصب کنید.
  • Editor هر توسعه دهنده ای احتیاج به یک ویرایشگر خوب دارد، البته مهم نیست از چه ویرایشگر استفاده می کنید ولی پیشنهاد می کنم از Sublime Text استفاده کنید.

 

بانک اطلاعاتی (Database)

قبل از شروع، باید یک دیتابیس ایجاد کرد. در این آموزش من از خط فرمان (cmd) ویندوز استفاده کرده ام.

نرم افزار xampp هنگام نصب، MySQL را نیز نصب میکند. خط فرمان ویندوز خود را باز کرده و این دستور mysql -u root را وارد کنید، ولی اگر برای دیتابیس خود رمز عبور تعیین کرده باشید، باید از این mysql -u root -p  دستور استفاده کنید این دستورها باعث می شوند که وارد mysql خود شوید:

mysql-login

حال به قسمت خوب آموزش می رسیم! برای ایجاد دیتابیس از دستور

;CREATE DATABASE IF NOT EXISTS db_chatroom

استفاده می کنیم، این دستور باعث می شود دیتابیس db_chatroom را بسازد، به شرطی که از قبل وجود نداشته باشد. برای دیدن لیست دیتابیس ها می توانید از دستور ;SHOW DATABASES استفده کنید. این دستور تمام دیتابیس های موجود در mysql را نشان می دهد، به صورت زیر:

 

ساخت جدول (Table) در دیتابیس (Database)

حال که دیتابیس خود را با موفقیت ایجاد کردید، نوبت به ساخت جدول برای دیتابیس db_chatroom می رسد، قبل از ایجاد جدول ابتدا باید به mysql بگویید که با کدام یک از دیتابیس های موجود در لیست بالا می خواهید کار کنید. دستور:

;USE db_chatroom

را در خط فرمان وارد کنید که باعث می شود دیتابیس انتخاب شود.

جدول ما شامل فیلدهای (field) زیر می باشد:

  • id
  • name
  • email
  • post
  • ipaddress

برای ساختن این فیلدها باید دستورات زیر را وارد کنید:

  •  INTEGER UNSIGNED یعنی فیلد مورد نظر از نوع عدد صحیح بدون علامت باشد
  • NOT NULL یعنی فیلد نباید خالی باشد، باید مقدار وارد شود
  • AUTO_INCREMENT یعنی فیلد id به صورت خودکار شماره گذاری می شود
  • VARCHAR یعنی فیلد از نوع کاراکتری می باشد
  • TEXT یعنی فیلد از نوع رشته با اندازه بزرگ
  • PRIMARY_KEY مشخص می کند که کدام فیلد باید کلید اصلی باشد، این کار باعث می شود تا دو رکورد شماره id یکسانی نداشته باشند

برای اینکه مطمئن شوید جدول شما به درستی ایجاد شده است می توانید دستور DESCRIBE info را وارد کنید که جدولی همانند زیر نمایش می دهد:

 

ساخت فایل ها

ما برای سیستم خود، نیاز به ساخت فایل ها در پروژه خود داریم:

  • index.php
  • style.css
  • config.php

همچنین به پوشه ای برای نگهداری عکس های خود لازم است.

 

اتصال به Database

فایل config.php اطلاعات دیتابیس را نگهداری می کند، آن را با ویرایشگر خود باز کرده و متغیرهای زیر را وارد کنید:

توجه داشته باشید که اطلاعات بالا را به توجه به اطلاعات mysql خود وارد کنید.

چون از سرور مجازی استفاده می کنیم مقدار متغیر server$ را localhost قرار می دهیم.

 

تعامل

تگهای ساده اچ تی ام ال زیر را در فایل index.php وارد کنید:

 

ایجاد یک اتصال

قبل از اینکه بتوانیم کاری با دیتابیس انجام دهیم، باید با دیتابیس ارتباط برقرار کنیم، ابتدا کد پی اچ پی زیر را در بالاترین قسمت فایل index.php قرار دهید:

که به صورت زیر باید باشد:

این کار باعث می شود متغیرهایی که در فایل config.php تعریف کرده ایم را وارد فایل Index.php کنیم، یعنی index.php بتواند متغیرها را شناسایی کند.

حال کدهای زیر را بعد از فایل config.php قرار دهید:

که به صورت زیر باید باشد:

خط دوم نام فایل و خط سوم آی پی بازدیدکننده را نگه می دارد. از این دو متغیر در ادامه استفاده خواهد شد.

  • connect$ تابعی است که با گرفتن پارامتر یک اتصال به بانک ایجاد می کند، اگر با شکست مواجه شود با تابع ()die پیغام خطا نمایش می دهد

در نهایت، ما به بانک متصل شدیم

 

آیا چیزی ارسال شده است؟

قدم بعدی که ما باید بررسی کنیم این است که، آیا کسی پیغامی با استفاده از فرم (که در ادامه اضافه می کنیم)، ارسال کرده است یا نه. دستورات زیر را در فایل index.php بعد از تگ <h1>Welcome</h1> قرار دهید:

دستور بالا را را تابع ()if شروع کرده ایم، که بررسی می کند آیتمی به نام send ارسال شده است یا نه. اگر ارسال شده، از تابع ()empty برای بررسی کردن، که آیا name، email و post مقدار دارند یا نه. اگر نداشته باشند، خطا رخ می دهد. اگر این فیلدها مقدار داشته باشند آنگاه دستورات بعد از else اجرا می شوند:

  • ()htmlspecialchars تابعی برای جلوگیری از وارد کردن تگهای html به طور مستقیم در فیلد. اگر این کار را نکنیم، شاید کسی تگی را وارد دیتابیس کند و اطلاعات دیگر کاربران را به دست آورد. یا بدتر از آن اگر کسی جاوا اسکریپت وارد کند، آن سایت تبدیل به یک سایت مخرب می شود!
  • ()mysql_real_escape_string این تابع همانند تابع قبلی است، به جز این که این تابع تمام فعالیت های وارد کردن SQL به دیتابیس را متوقف می کند. اگر این کار را انجام ندهیم، شاید کسی بتواند کدهایش را در دیتابیس اجرا کند، و اطلاعات درکورد ها را حذف یا ویرایش کند.با استفاده از اطلاعات جدید، ما دستوری به زبان SQL می نویسیم تا پیغام را وارد دیتابیس کند. در تگ ()if، ما دستور SQL را اجرا می کنیم. اگر دستور با موفقیت اجرا شد، و پیغام در دیتابیس ذخیره شد، پیغامی چاپ می شود که با موفقیت دستور اجرا شد.

 

بازیابی نوشته ها

ما اکنون 8 پیغام آخر را از دیتابیس بازیابی می کنیم، تا برای کاربر نمایش داده شود. ابتدا دستورات زیر را بین تگ <div class="content"></div> قرار دهید:

در خط اول، ما با دستور SQL تمام رکوردهای موجود در جدول info را بازیابی می کنیم، و آنها را بر حسب id مرتب می کنیم، ولی فقط 8 تا پست پیغام نمایش داده می شود.

در خط دوم این دستورات (query) را اجرا و در متغیر result$ قرار می دهیم. در ادامه:

تا وقتی که رکوردی در داخل $result وجود دارد، آنها را نمایش بده.

()stripslashes تمام اسلش هایی را که ممکن است کاربر وارد کرده باشد را پاک می کند.

gravatar_url$ گراواتار هر کاربر را نشان می دهد

 

 فرم (Form)

آخرین مرحله، اضافه کردن فرم برای وارد اطلاعات کاربر می باشد. تگهای زیر را در ادامه دستورات بالا به index.php اضافه کنید:

توجه داشته باشید که متغیر self$ آدرسی را به فرم انتقال می دهد تا فرم به کجا ارسال شود.

 

CSS

حال برنامه را اجرا کنید، شما تمام کدهای php را تکمیل کردید حال می توانید با وارد کردن اطلاعات، پیغام ها را مشاهده کنید:

twitte

با  این حال یک مشکلی است،بدون آرایش کمی زشت به نظر می رسد، پس شروع کنیم مقداری CSS به آن اضافه کنیم، البته چون این آموزش CSS نیست، پس فقط CSSهــا را وارد می کنم، همان طور که گفتم باید از قبل کمی آشنایی با HTML و CSS داشته باشید. حال CSSهـای زیر را در فایل style.css انتقال دهید:

chat-box