به احتمال زیاد وقتی وارد یک وب سایت می‌شوید شاهد یک چت باکس خواهید بود که در پایین و کناره‌ی سایت‌ها وجود دارد و وقتی بر روی آن کلیک می‌کنید می‌توانید به سریع‌ترین روش با مدیر یا پشتیبان آن وب سایت مکالمه داشته باشید تا اگر سوالی داشتید بدون نیاز به ثبت نام کردن به جواب‌های خود برسید. در این مقاله قصد داریم به آموزش ساخت چت روم با PHP بپردازیم که به shoutbox نیز معروف است.
فهرست محتوای این مقاله
کدهای HTML پروژه ساخت چت روم با PHP
ابتدا نیاز است فایلی به اسم index.html بسازیم تا کدهای html خود را درون آن قرار دهیم.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>آموزش ساخت shoutbox با php و ajax</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div id="loading"></div>
<ul id="content"></ul>
<form action="shoutbox.php" method="post" name="action" id="form">
<input id="name" type="text" maxlength="25" placeholder="نام شما">
<input id="message" type="text" maxlength="255" placeholder="پیام شما">
<input id="submit" type="submit" value="ارسال">
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>در کدهای html بالا یک فرم با دو فیلد داریم که یکی از آن‌ها برای نام کاربری و دیگری هم برای پیام است، در div با شناسه‌ی loading تصویر در حال لود بودن پیام و در ul با شناسه‌ی content که هیچ li درونی ندارد، متن پیام با ایجکس قرار داده می‌شود.
کدهای CSS پروژه ساخت چت روم با PHP
برای اینکه php shoutbox ظاهری مناسب داشته باشد. یک فایل به نام style.css ایجاد می‌کنیم و کدهای css را در آن قرار می‌دهیم.
html, body, input, * {
direction: rtl;
font: 12px/1.5em tahoma;
margin: 0;
padding: 0;
}
.container {
width: 200px;
margin: 50px auto;
padding: 10px;
border: 1px solid #ccc;
}
ul {
list-style: none;
}
#loading {
margin: 0 auto;
width: 55px;
}
#content {
padding-bottom: 5px;
border-bottom: 1px dotted #ccc;
}
input {
padding: 5px;
margin: 10px auto 0;
display: block;
width: 180px;
}
دیتابیس پروژه ساخت چت روم با PHP
در این بخش ما به یک دیتابیس ساده نیازمند هستیم تا پیام‌هایی که ارسال می‌شوند را ذخیره‌سازی کنیم، دیتابیس مورد نیاز ما در این پروژه دارای سه فیلد id، user و message است. یک دیتابیس با نام دلخواه ایجاد کنید و بعد از ایجاد کردن دیتابیس کد SQL زیر را در بخش SQL پنل phpmyadmin خود قرار دهید.
CREATE TABLE IF NOT EXISTS `shoutbox` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(25) COLLATE utf8_persian_ci NOT NULL DEFAULT 'ناشناس', `message` varchar(255) COLLATE utf8_persian_ci NOT NULL DEFAULT '', PRIMARY KEY (`ID`) )
در کد SQL بالا ما یک جدول (table) به نام shoutbox ایجاد کرده‌ایم که درون آن سه فیلدی که در بالا نام بردیم را تعریف کرده‌ایم.
کدهای جاوا اسکریپت پروژه ساخت چت روم با PHP
ابتدا کدهای جاوا اسکریپت را قرار می‌دهیم و در ادامه به توضیحات آن می‌پردازیم. ابتدا یک فایل به نام script.js ایجاد کنید، در این بخش قرار است یاد بگیریم که چگونه داده‌های فرم خود را با متد POST و از طریق ajax به سرور ارسال کنیم.
$(document).ready(function(){
var inputName = $("#name");
var inputMessage = $("#message");
var loading = $("#loading");
var content = $("#content");
function show() {
loading.html('<img src="ajax-loader.gif">');
$.ajax({
type: "POST",
url: "shoutbox.php",
data: "action=show",
success: function(data){
loading.hide();
content.html(data.responseText);
}
});
}
show();
setInterval(function(){show();}, 5000);
$("#form").submit(function(e){
e.preventDefault();
if(inputName.val() && inputMessage.val())
{
var name = inputName.val();
var message = inputMessage.val();
$("#submit").attr({ disabled:true, value:"در حال ارسال..." });
$.ajax({
type: "POST",
url: "shoutbox.php",
data: {action:'insert',name: name,message: message},
success: function(data){
show();
$("#submit").attr({ disabled:false, value:"ارسال" });
inputMessage.val('');
}
});
}
else alert('تمامی فیلدها را وارد کنید.');
});
});در بخش اول کدهای جاواسکریپت چندین متغیر تعریف کرده‌ایم و سلکتورهای jQuery که قرار است از آن‌ها استفاده کنیم را در این متغیرها ذخیره کرده‌ایم.
در ادامه یک تابع به اسم show تعریف کرده‌ایم که در این تابع تا وقتی که با استفاده از php در حال دریافت داده‌ها از جدول دیتابیس هستیم یک تصویر را نشان می‌دهد که مشخص کننده در حال لود بودن پیام‌ها است.
درون تابع show با استفاده از ای جکس (Ajax) داده‌ی "action=show" را به صفحه‌ی shoutbox.php با استفاده از متد POST ارسال می‌کنیم. یعنی در این حالت داریم POST['action']=show را ارسال می‌کنیم. در نهایت وقتی درخواست کامل شد، تصویر loading را پنهان می‌کنیم و داده‌های جدید را در المنت‌های (element) انتخابی‌مان که همان content# بود ریخته‌ایم، در ادامه تابع show را استفاده کردیم و در خط بعدی هم هر 5 ثانیه یک بار تابع show را اجرا می‌کنیم.
در ادامه با تابعی در jquery به نام submit ( submit زمانی اجرا می‌شود که فرم ارسال شود) یک تابع بی نام فراخوانی کرده‌ایم که به عنوانی ورودی e را داده‌ایم، در حقیقت e همان المان صدا زده شده می‌باشد که در اینجا فرم ما است. در خط بعدی بررسی کرده‌ایم که کاربر فیلد نام و پیام را پر کرده باشد، اگر این دو فیلد را پر کرده باشد دستورات داخل بلاک شرطی‌مان اجرا می‌شود ولی اگر این دو فیلد خالی باشد از بلاک if خارج می‌شود و خطای "تمامی فیلدها را پر کنید" را به کاربر نمایش می‌دهد.
درون بلاک if مقدار دو فیلد نام و پیام را داخل دو متغیر ذخیره کرده‌ایم که در ادامه استفاده از آن‌ها راحت‌تر باشد. در خط بعدی هم دکمه را غیر فعال کرده‌ایم و value دکمه را هم تغییر داده‌ایم. در خط بعدی شما شاهد ساختار Ajax خواهید بود که با استفاده از آن و متد POST داده‌‌هایمان را به صفحه shoutbox.php ارسال می‌کنیم.
در ایندکس data درون تابع Ajax ما باید داده‌هایی را قرار دهیم که به سمت سرور ارسال خواهد شد. که باید این داده‌ها را به صورت JSON داشته باشیم. success هم زمانی اجرا می‌شود که داده با موفقیت ارسال شده است و به ما خروجی داده است، برای success یک تابع بی نام باز کرده‌ایم و به عنوان ورودی تابع به آن یک متغیر با نام دلخواه داده‌ایم که در این جا data است.
زمانی که عملیات با موفقیت انجام شود در این حالت تابع بی نام success اجرا می‌شود و درون آن دوباره تابع show را اجرا می‌کنیم، بعد از آن هم دکمه‌ای که غیرفعال کرده بودیم و مقدارش را عوض کرده بودیم را به حالت اولش بر می‌گردانیم، در ادامه مقدار فیلد پیام را هم خالی کرده‌ایم.
کدهای PHP پروژه ساخت چت روم با PHP
حالا که کدهای جاوا اسکریپت را نوشته‌ایم وقت آن رسیده است که کدهای PHP را نیز بنویسیم تا درخواست‌های ارسالی از جاوا اسکریپت را مدیریت کنیم. در کدهای PHP خود به سه تابع احتیاج داریم تا پروژه آموزش ساخت چت روم ساده را به اتمام برسانیم.
تابع connect() : که برای اتصال به دیتابیس هست.
تابع showContent() : که آخرین پیام‌ها را از دیتابیس دریافت می‌کند.
تابع insertContent() : که پیام جدید را در دیتابیس ذخیره می‌کند.
قبل از شروع کار فایلی با اسم shoutbox.php ایجاد کنید تا کدهای PHP خود را درون آن قرار دهیم.
<?php
function connect(){
$mysqli = new mysqli("localhost","root","","project");
if ($mysqli -> connect_errno) {
echo "Failed to connect to MySQL: " . $mysqli -> connect_error;
exit();
}
return $mysqli;
}
function showContent($connection, $num) {
$query = "SELECT * FROM shoutbox ORDER BY id DESC LIMIT {$num}";
$result = $connection->query($query);
return $result;
}
function insertContent($connection, $user, $message) {
$query = "INSERT INTO shoutbox(name, message) VALUES('$user', '$message')";
$connection->query($query) or die(mysqli_errno($connection));;
return true;
}همان‌طور که قبل‌تر گفتیم تابع connect به دیتابیس متصل می‌شود و منبعی را که به آن متصل شده است را بر می‌گرداند که ما بعدا مقدار بازگشتی از این تابع را داخل یک متغیر قرار می‌دهیم و آن را به عنوان پارامتر اول به تابع‌های showContent و insertContent ارسال می‌کنیم.
تابع showContent یک پارامتر دوم دارد که این پارامتر تعداد رکوردهای بازگشتی را مشخص می‌کند و در نهایت کار این تابع دریافت اطلاعات از دیتابیس است. در واقع اطلاعات را بر اساس مقدار id که دارد به صورت نزولی مرتب می‌کند و تعدادی از آن‌ها را دریافت می‌کند. (پارامتر دوم تابع مشخص می‌کند که چه تعداد از اطلاعات باید دریافت شود)
تابع insertContent دارای سه پارامتر است، همان‌طور که گفتیم پارامتر اول همان ارتباط ما با دیتابیس می‌باشد، پارامتر دوم نام کاربر و پارامتر سوم هم پیام کاربر است. و در نهایت در بدنه‌ی این تابع یک کوئری Insert زده‌ایم تا اطلاعات داده شده به تابع را به سمت دیتابیس ببرد و اطلاعات را درون جدول shoutbox قرار دهد.
اگر به یاد داشته باشید داده‌هایی که با ایجکس (Ajax) ارسال می‌کردیم یک بار action=show بود و یکبار هم action=insert بود. پس حالا می‌توانیم یک switch برای action قرار دهیم و با توجه به مقداری که دارد تصمیم بگیریم که عملیات درج یا دریافت اطلاعات را انجام دهد.
در ادامه کدهای فایل shoutbox.php کدهای زیر را قرار دهید تا توضیح دهیم که قرار است این کدها چه کار کنند.
if(!$_POST['action']) {
header("Location: index.html");
exit;
} else {
$connection = connect();
switch ($_POST['action']) {
case 'show':
$result = showContent($connection, 10);
$messages = [];
while($row = $result->fetch_assoc()) {
$id = $row['id'];
$messages[$id] = '<li><strong>' . $row['name'] . '</strong>: ' . $row['message'] . '</li>';
}
ksort($messages);
foreach ($messages as $message) {
echo $message;
}
break;
case 'insert':
insertContent($src, $_POST['name'], $_POST['message']);
break;
}
mysqli_close($connection);
}در کد بالا بررسی کردیم که اگر $_POST['action'] ارسال نشده بود کاربر را به صفحه index.html ارسال کند. این کار برای زمانی مناسب است که کاربر سعی دارد فایل shoutbox.php رو به طور مستقیم باز کند.
ولی در صورتی که $_POST['action'] ارسال شده باشد اول تابع connect را اجرا می‌کنیم و همان‌طور که گفتیم مقدار بازگشتی این تابع را داخل متغیر ریخته‌ایم تا بعدا در دو تابع دیگر از آن استفاده کنیم. بعد مقدار $_POST['action'] را switch کرده‌ایم که اگر برابر با show بود از تابع showContent استفاده کند و اطلاعات را از دیتابیس واکشی و چاپ کند. اگر هم مقدارش برابر با insert بود با استفاده از تابع insertContent اطلاعات را در دیتابیس ذخیره کند و در نهایت اتصال به دیتابیس را بسته‌ایم.
برای کسب اطلاعات بیشتر در زمینه PHP مطالعه‌ی مقاله‌های زیر را پیشنهاد می‌کنیم:
جمع‌بندی:
در این مقاله به آموزش ساخت چت روم با PHP و Ajax در jQuery پرداختیم، با shoutboxها آشنا شدیم که در سطح وب بسیار محبوب هستند، در پیاده سازی این پروژه با Ajax درک کردیم که این تکنولوژی جذاب چگونه کار می‌کند. اگر در مورد این مقاله سوال یا نظری داشتید خوشحال می‌شویم که با ما و کاربران سون لرن به اشتراک بگذارید.
اگر به یادگیری بیشتر در زمینه‌ی PHP علاقه داری، با شرکت در دوره‌ی آموزشی متخصص PHP در کمتر از یک سال به یک متخصص PHP تبدیل می‌شوی که آماده‌ی استخدام، دریافت پروژه، کسب درآمد و یادگیری مباحثی مثل لاراول هستی.
واقعا عالی بود از توضیح کاملتون خیلی ممنون در مورد ویدویو چت یا ویس چت هم مطلب بزار
درود.
حتما در آینده یه مقاله رو درمورد ویدیو چت یا وویس چت اختصاص میدیم.
ممنون که با ما همراه هستید.