Membuat notifikasi dengan php

Toasts Bootstrap 4 – Setelah sebelumnya pada tutorial bootstrap dasar untuk pemula, Dibahas tentang spinners bootstrap 4, maka pada tutorial ini akan dibahas lanjutannya, yaitu ...

Diki Alfarabi Hadi

Laravel

Tutorial Laravel #33 : Notifikasi Dengan Session Laravel – Selamat datang kembali di tutorial laravel terlengkap sejagat raya :D. setelah pada tutorial sebelumnya di malasngoding.com kita belajar tentang session ...

Pernah bertanya-tanya bagaimana situs web media sosial memunculkan pemberitahuan untuk setiap tindakan yang terjadi pada timeline Anda?

Sistem pemberitahuan waktu nyata ini melacak setiap tindakan yang Anda dan teman Anda lakukan di saluran sosial ini. Pemberitahuan membentuk sebagian besar fitur keterlibatan waktu nyata dari platform ini. Meskipun Anda tidak online, Anda masih dapat menerima pemberitahuan ini. Sistem notifikasi PHP dapat dibuat dengan mudah menggunakan PHP dan JavaScript. Sistem ini menyediakan notifikasi waktu nyata dalam aplikasi bertenaga PHP.

Pada artikel ini saya akan menunjukkan kepada Anda cara membuat sistem notifikasi sederhana dengan menggunakan PHP dan AJAX. Saya juga akan menggunakan jQuery dan Bootstrap. Untuk tujuan artikel ini,

Mari kita mulai langkah - langkahnya

Membuat Database

Buat sebuah database bernama notify, kemudian jalan kan sql nya untuk membuat tabel comments, disini saya menggunakan mysql sebagai DBMS pengelola database, kemudian masukkan script query dibawah ini.

/*
 Author Kharisma Maulana Pasaribu

 Source Server         : Localhost
 Source Server Type    : MySQL
 Source Server Version : 100140
 Source Host           : localhost:3307
 Source Schema         : notif

 Target Server Type    : MySQL
 Target Server Version : 100140
 File Encoding         : 65001

 Date: 30/04/2020 08:50:48
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for comments
-- ----------------------------
DROP TABLE IF EXISTS `comments`;
CREATE TABLE `comments`  (
  `comment_id` int(11) UNSIGNED NOT NULL AUTO_INCREMENT,
  `comment_subject` varchar(250) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `comment_text` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `comment_status` int(1) NOT NULL,
  PRIMARY KEY (`comment_id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 2 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Compact;
-- ----------------------------
-- Records of comments
-- ----------------------------
SET FOREIGN_KEY_CHECKS = 1;

Kueri ini akan membuat tabel komentar dan empat kolomnya ‘comment_id’ comment_subject ’‘ comment_text ’dan comment_status. Semua komentar pengguna akan dimasukkan dalam database ini dan kemudian pemberitahuan akan dihasilkan.

Buat Navigasi dan Formulir Untuk Menampilkan Pemberitahuan Realtime

Saya akan menggunakan navigasi dasar dan Form Bootstrap dengan mendeklarasikan CDN. Salin dan tempel kode ke file 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 Real Time 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>
<script type="text/javascript">
$(document).ready(function(){
// updating the view with notifications using ajax
function load_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_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_notification();
   }
  });
 }
 else
 {
  alert("Subject & Comments Harus Diisi");
 }
});
// load new notifications
$(document).on('click', '.dropdown-toggle', function(){
 $('.count').html('');
 load_notification('yes');
});
setInterval(function(){
 load_notification();
}, 5000);
});
</script>
</html>

Membuat Koneksi Ke Database

Buat sebuah file connect.php untuk menghubungkan ke database notify lalu copy kan code dibawah ini.

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

Berhubung disini saya menggunakan port 3307, maka saya deklarasikan menjadi localhost:3307, yang dimana seharusnya hanya localhost saja untuk port defaultnya.

Selanjutnya, buat satu file dengan nama insert.php yang berguna untuk memasukkan komentar baru di Mysql melalui code dibawah ini.

<?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);
}
?>

Cuplikan code ini cukup jelas. Ini mendapatkan nilai formulir dan kemudian mengirimnya ke tabel pada database notify.

Ambil Catatan dan Kirim ke AJAX

Untuk tindakan ini, buat file baru bernama fetch.php. Ini akan memeriksa apakah tampilan AJAX diperbarui dengan komentar baru. Jika tidak, itu akan memilih komentar unik dan menunjukkannya di jendela notifikasi. Setelah pengguna melihat pemberitahuan ini, status akan diperbarui untuk mencerminkan bahwa pemberitahuan ini telah ditinjau. Di sini, saya akan mengirim $data array ke panggilan AJAX untuk memperbarui tampilan.

Salin code dibawah ini dengan nama fetch.php

<?php
include('connect.php');
if(isset($_POST['view'])){
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 Notif 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);
}
?>

Testing Sistem Notifikasi Di PHP

Sekarang waktunya untuk mengetes sistem notifikasi ini, anda bisa melihat pada gambar dibawah ini,

Ini gambar awal sebelum melakukan inputan comentar, mari kita coba menginput commentar dan tampak terlihat pada gambar dibawah ini.

Untuk file nya anda bisa mengunjungi Github : https://github.com/matadeveloper/php-notification-realtime

Kesimpulan

Pemberitahuan menawarkan tampilan cepat untuk semua tindakan yang dilakukan di situs web. Anda dapat dengan mudah mengkliknya di daftar dropdown dan secara opsional melakukan tindakan lebih lanjut. Artikel ini menyajikan sistem pemberitahuan waktu nyata dasar dalam PHP yang dapat diperpanjang sesuai dengan kebutuhan Anda.

Jika Anda menemukan pertanyaan dan pertanyaan, jangan ragu untuk berkomentar di bawah ini.dan selamat mencoba, terima kasih ...