ساخت سیستم نوتیفیکیشن با php و Ajax

تاحالا دقت کردید که چطور سایت های شبکه اجتماعی مثل فیسبوک یا دیسکورد برای هر عملیاتی که اتفاق می افتد یک نوتیفیکیشن (notification) بصورت آنی ارسال می کنند؟

سیستم نوتیفیکیشن real-time هر عملیاتی که شما و دوستان شما در این شبکه های اجتماعی انجام میدید را را دنبال می کند. حتی اگر آنلاین نباشید باز هم میتونید از این نوتیفیکیشن ها دریافت کنید.

در این آموزش php قصد داریم نحوه پیاده سازی و ساخت سیستم نوتیفیکیشن با php و Ajax تحت وب رو برای نمایش Real-time عملیاتی مثل ثبت سفارش، ثبت نام کاربر، درخواست ها و… را پیاده سازی کنیم.

چندی پیش برای یک پروژه وب سایت فروشگاهی نیاز به ارسال نوتیفیکیشن برای مدیریت سایت و پخش یک آهنگ اطلاع رسانی هنگام ثبت سفارش بودم که در ادامه نحوه اجرای آن را به شما آموزش میدم.

پس با آموزش ساخت سیستم نوتیفیکیشن با php و Ajax همراه باشید.

ایمپورت جداول دیتابیس

یک دیتابیس بسازید و داخل phpmyadmin این کوئری SQL را اجرا کنید تا جدول comments ایجاد شود

    SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
    SET time_zone = "+00:00";
    CREATE TABLE `comments` (
     `comment_id` int(11) NOT NULL,
     `comment_subject` varchar(250) NOT NULL,
     `comment_text` text NOT NULL,
     `comment_status` int(1) NOT NULL
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
    ALTER TABLE `comments`
     ADD PRIMARY KEY (`comment_id`);
    ALTER TABLE `comments`
     MODIFY `comment_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=14;

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET time_zone = "+00:00";

CREATE TABLE `comments` (

`comment_id` int(11) NOT NULL,

`comment_subject` varchar(250) NOT NULL,

`comment_text` text NOT NULL,

`comment_status` int(1) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `comments`

ADD PRIMARY KEY (`comment_id`);

ALTER TABLE `comments`

MODIFY `comment_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=14;

جدول comments چهار ستون ‘comment_id’ ‘comment_subject’ ‘comment_text’ ‘comment_status’ دارد و تمام کامنت های کاربران در این جدول ذخیره و بعد نوتیفیکیشن براش ساخته میشه.

ساخت فرم برای نمایش realtime نوتیفیکیشن

من از فرم های بوت استرپ با CDN برای ساخت چنین ظاهر ساده ای استفاده می کنیم

کدها را داخل فایل index.php قرار بدید

    <!DOCTYPE html>
    <html>
    <head>
     <title>Notification using PHP Ajax Bootstrap</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
     <br /><br />
     <div class="container">
      <nav class="navbar navbar-inverse">
       <div class="container-fluid">
        <div class="navbar-header">
         <a class="navbar-brand" href="#">PHP Notification Tutorial</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
         <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="label label-pill label-danger count" style="border-radius:10px;"></span> <span class="glyphicon glyphicon-bell" style="font-size:18px;"></span></a>
          <ul class="dropdown-menu"></ul>
         </li>
        </ul>
       </div>
      </nav>
      <br />
      <form method="post" id="comment_form">
       <div class="form-group">
        <label>Enter Subject</label>
        <input type="text" name="subject" id="subject" class="form-control">
       </div>
       <div class="form-group">
        <label>Enter Comment</label>
        <textarea name="comment" id="comment" class="form-control" rows="5"></textarea>
       </div>
       <div class="form-group">
        <input type="submit" name="post" id="post" class="btn btn-info" value="Post" />
       </div>
      </form>
     </div>
    </body>
    </html>

<!DOCTYPE html>

<html>

<head>

<title>Notification using PHP Ajax Bootstrap</title>

</head>

<body>

<a class="navbar-brand" href="#">PHP Notification Tutorial</a>

</div>

</li>

</ul>

</div>

</nav>

<br />

<label>Enter Subject</label>

</div>

<label>Enter Comment</label>

</div>

</div>

</form>

</div>

</body>

</html>

افزودن سطر جدید در دیتابیس

یک فایل connect.php بسازید و اتصال دیتابیس را برقرار کنید :

    <?php
    $con = mysqli_connect("localhost", "root", "", "notif");
    ?>

<?php

$con = mysqli_connect("localhost", "root", "", "notif");

بعد از آن یک فایل insert.php می سازیم و به سادگی با کد زیر کامنت جدیدی داخل دیتابیس MySQL قرار میدیم

    <?php
    if(isset($_POST["subject"]))
    {
    include("connect.php");
    $subject = mysqli_real_escape_string($con, $_POST["subject"]);
    $comment = mysqli_real_escape_string($con, $_POST["comment"]);
    $query = "INSERT INTO comments(comment_subject, comment_text)VALUES ('$subject', '$comment')";
    mysqli_query($con, $query);
    }
    ?>

<?php

if(isset($_POST["subject"]))

{

include("connect.php");

$subject = mysqli_real_escape_string($con, $_POST["subject"]);

$comment = mysqli_real_escape_string($con, $_POST["comment"]);

$query = "INSERT INTO comments(comment_subject, comment_text)VALUES ('$subject', '$comment')";

mysqli_query($con, $query);

}

کدهای این بخش از ساخت سیستم نوتیفیکیشن با php و Ajax بسیار ساده هستند و نیاز به توضیح نیست چرا که فقط مقادیر را از طریق متد POST دریافت و داخل دیتابیس اضافه می کند.

خواندن سطر و ارسال آن به دستور AJAX

در این بخش، یک فایل به نام fetch.php می سازیم تا با آن چک کنیم بخش ناوبری با کامنت های جدیدی آپدیت شده یا نه.

اگر ثبت نشده بود، کامنت های یکتا را انتخاب و در بخش ناوبری (navigation یا همان نوار بالا) نمایش میدیم. وقتی کاربر این بخش از نوتیفیکیشن ها را دید مقدار status آن نیز آپدیت می شود. اینجا ما آرایه $data را بصورت ajax برای آپدیت بخش نوتیفیکیشن ارسال می کینم.

کد fetch.php

<?php

include('connect.php');

if(isset($_POST['view'])){

// $con = mysqli_connect("localhost", "root", "", "notif");

if($_POST["view"] != '')

{
   $update_query = "UPDATE comments SET comment_status = 1 WHERE comment_status=0";
   mysqli_query($con, $update_query);
}

$query = "SELECT * FROM comments ORDER BY comment_id DESC LIMIT 5";
$result = mysqli_query($con, $query);
$output = '';

if(mysqli_num_rows($result) > 0)
{

while($row = mysqli_fetch_array($result))

{

  $output .= '
  <li>
  <a href="#">
  <strong>'.$row["comment_subject"].'</strong><br />
  <small><em>'.$row["comment_text"].'</em></small>
  </a>
  </li>

  ';
}
}

else{
    $output .= '<li><a href="#" class="text-bold text-italic">No Noti Found</a></li>';
}

$status_query = "SELECT * FROM comments WHERE comment_status=0";
$result_query = mysqli_query($con, $status_query);
$count = mysqli_num_rows($result_query);

$data = array(
   'notification' => $output,
   'unseen_notification'  => $count
);

echo json_encode($data);
}
?>

<?php

include('connect.php');

if(isset($_POST['view'])){

// $con = mysqli_connect("localhost", "root", "", "notif");

if($_POST["view"] != '')

{

$update_query = "UPDATE comments SET comment_status = 1 WHERE comment_status=0";

mysqli_query($con, $update_query);

}

$query = "SELECT * FROM comments ORDER BY comment_id DESC LIMIT 5";

$result = mysqli_query($con, $query);

$output = '';

if(mysqli_num_rows($result) > 0)

{

while($row = mysqli_fetch_array($result))

{

$output .= '

<li>

<strong>'.$row["comment_subject"].'</strong><br />

<small><em>'.$row["comment_text"].'</em></small>

</a>

</li>

}

else{

$output .= '<li><a href="#" class="text-bold text-italic">No Noti Found</a></li>';

}

$status_query = "SELECT * FROM comments WHERE comment_status=0";

$result_query = mysqli_query($con, $status_query);

$count = mysqli_num_rows($result_query);

$data = array(

'notification' => $output,

'unseen_notification' => $count

);

echo json_encode($data);

}

سابمیت فرم و آپدیت HTML با AJAX

بخش جذاب آموزش ساخت سیستم نوتیفیکیشن با php و Ajax اینجاست!

در قدم های قبلی، من داده آرایه را به سمت AJAX ارسال کردم تا نوار بالا در کد HTML با پاسخی که از ایجکس دریافت میشه آپدیت کنیم.

حالا، متد submit را در jQuery ایجاد می کنیم تا مقادیر فرم را اعتبارسنجی و آخرین نوتیفیکیشن را که در فایل insert.php به دیتابیس اضافه کردیم را انتخاب کنیم.

در ادامه با تابع onclick تعداد را در دایره قرمز رنگ نمایش میدیم.

کد کامل index.php

    <script>
    $(document).ready(function(){
    // updating the view with notifications using ajax
    function load_unseen_notification(view = '')
    {
     $.ajax({
      url:"fetch.php",
      method:"POST",
      data:{view:view},
      dataType:"json",
      success:function(data)
      {
       $('.dropdown-menu').html(data.notification);
       if(data.unseen_notification > 0)
       {
        $('.count').html(data.unseen_notification);
       }
      }
     });
    }
    load_unseen_notification();
    // submit form and get new records
    $('#comment_form').on('submit', function(event){
     event.preventDefault();
     if($('#subject').val() != '' && $('#comment').val() != '')
     {
      var form_data = $(this).serialize();
      $.ajax({
       url:"insert.php",
       method:"POST",
       data:form_data,
       success:function(data)
       {
        $('#comment_form')[0].reset();
        load_unseen_notification();
       }
      });
     }
     else
     {
      alert("Both Fields are Required");
     }
    });
    // load new notifications
    $(document).on('click', '.dropdown-toggle', function(){
     $('.count').html('');
     load_unseen_notification('yes');
    });
    setInterval(function(){
     load_unseen_notification();;
    }, 5000);
    });
    </script>

$(document).ready(function(){

// updating the view with notifications using ajax

function load_unseen_notification(view = '')

{

$.ajax({

url:"fetch.php",

method:"POST",

data:{view:view},

dataType:"json",

success:function(data)

{

$('.dropdown-menu').html(data.notification);

if(data.unseen_notification > 0)

{

$('.count').html(data.unseen_notification);

}

});

}

load_unseen_notification();

// submit form and get new records

$('#comment_form').on('submit', function(event){

event.preventDefault();

if($('#subject').val() != '' && $('#comment').val() != '')

{

var form_data = $(this).serialize();

$.ajax({

url:"insert.php",

method:"POST",

data:form_data,

success:function(data)

{

$('#comment_form')[0].reset();

load_unseen_notification();

}

});

}

else

{

alert("Both Fields are Required");

}

});

// load new notifications

$(document).on('click', '.dropdown-toggle', function(){

$('.count').html('');

load_unseen_notification('yes');

});

setInterval(function(){

load_unseen_notification();;

}, 5000);

});

</script>

همچنین اینجا در خط ۱۶ می تونید با اضافه کردن کد زیر یک آهنگ کوتاه یکی دو ثانیه نوتیفیکیشن پخش کنید تا کار جذاب تر بشه

const audio = new Audio('https://proxy.notificationsounds.com/notification-sounds/my-work-is-done-message-tone/download/file-sounds-1229-my-work-is-done.mp3');
            audio.play();

1 2	const audio = new Audio('https://proxy.notificationsounds.com/notification-sounds/my-work-is-done-message-tone/download/file-sounds-1229-my-work-is-done.mp3'); audio.play();

تست سیستم نوتیفیکیشن با php و Ajax

حالا وقت اینه که ساخت سیستم نوتیفیکیشن که با php و Ajax ساختیم را تست کنیم.

کافیه عنوان و متن نظر را در این فرم ارسال کنید و بعد یک نوتیفیکیشن جدید که در تصویر زیر مشخص هست را میتونید ببینید :

جمع بندی آموزش سیستم نوتیفیکیشن با php و Ajax

اعلان ها (notification) نمای سریعی از تمام اقدامات انجام شده در وب سایت ارائه می دهند. شما می توانید به سادگی روی لیست بازشو کلیک کنید و به صورت اختیاری اقدامات بعدی را انجام دهید.

یکی از مزیت های این سیستم UX بهتر و سرعت بالاتر کاربر در استفاده از محیط کاربری است. شاید نکته منفی از لحاظ فنی، سرعت لود mysql در سرور هست که باید با تنظیمات و ابزارهای سرور آن را بهینه کرد.

این آموزش سیستم نوتیفیکیشن با php و Ajax بصورت realtime را می توانید حتی توسعه بدید و در پروژه های بعدی خود استفاده کنید.

امیدوارم از آموزش ساخت سیستم نوتیفیکیشن با php و Ajax نهایت استفاده را برده باشید.

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

هر سوالی داشتید، از قسمت نظرات ارسال کنید. سریعا، پاسخگوی سوالات شما هستیم.

موفق و پیروز باشید.

لغو پاسخ

پوریا ۲۲ آذر ۱۴۰۱

سلام
این آموزش انجام دادم اما پس از اجرای کامل طبق آموزش، در مرورگر هیچ پیامی نمایش داده نمیشود
آیا نیاز به فعال سازی extenstion خاصی از php می باشد ؟ همینطور روی php 8 هم میشود از آن استفاده کرد؟
متشکزرم

پاسخ

حسن شفیعی ۲۲ آذر ۱۴۰۱

سلام.
نه نیاز به اسکتنشن خاصی نیست. برای این نوع نوتیف نیاز است که تب مربوطه روی مرورگر بسته نشود.
تست های من روی نسخه ۷ php هست

پاسخ

حامد ۲۶ بهمن ۱۴۰۰

سلام.من یک سوال برام پیش اومده من می‌خوام یه سایت درست کنم که کاربر بتونه با یک فرم لاگین کنه و وارد سایت بشه با استفاده از ایمیل و رمز عبوری که قبلاً در سایت عضو شده ولی می‌خوام یه محدودیتی ایجاد کنم که فقط با همون سیستمی که موقع ثبت نام از اون استفاده کرده بتونه وارد بشه یعنی کاری کنم که نتونه اطلاعاتش و به کس دیگه ای بده که اون بجاش بتونه وارد سایت بشه … شما کدی نداری؟

پاسخ

حسن شفیعی ۲۷ بهمن ۱۴۰۰

سلام. آیپی یا کوکی رو باید ذخیره و هنگام لاگین چک کنید کاره دیگه ای نمیشه کرد

پاسخ

ساخت سیستم نوتیفیکیشن با php و Ajax

ایمپورت جداول دیتابیس

ساخت فرم برای نمایش realtime نوتیفیکیشن

افزودن سطر جدید در دیتابیس

خواندن سطر و ارسال آن به دستور AJAX

کد fetch.php

سابمیت فرم و آپدیت HTML با AJAX

کد کامل index.php

تست سیستم نوتیفیکیشن با php و Ajax

جمع بندی آموزش سیستم نوتیفیکیشن با php و Ajax

دانـلود باکــس

آموزش تبدیل JSON به آرایه در php

آموزش شی گرایی در PHP – اعتبارسنجی داده های ورودی type hinting

آموزش شی گرایی در PHP – چندریختی (polymorphism)

آموزش شی گرایی در PHP – اینترفیس interface

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه