How to create Facebook type Live Notifications in Joomla using Fabrik

How to create Facebook type Live Notifications in Joomla using Fabrik

If you are a developer, you may have always wished to have live notifications system like Facebook on your web application or website. As of now, while writing this tutorial there is no extension available to add such notifications in your Joomla website.

Such guides, to create FB like notifications are available as standalone (without Joomla and not so feature-rich) on the internet, but sometimes, developers find it very tedious to integrate in your Joomla website, due to database integration and script running restrictions in Joomla website. Here, I will guide you to add Facebook style live notifications using jQuery, Ajax and database in your web application.

For creating this notification, It is presumed that you are using Fabrik extension that is made for creating applications in Joomla. This Facebook style notification system has been successfully integrated and tested in Protostar Template of Joomla. I have not tested this code in other templates as of now at time of writing this tutorial. The following code, configuration, module and files are needed to make this notification system:

  1. We will use this extention to create notification table to record the notifications per user basis and send them to specific users in real-time when any activity happens related to those users.
  2. Secondy, jQuery in template is also required, however, today most of Joomla templates are using jQuery and it is considered an unavoidable Javascript Library to make the feature-reach templates.
  3. Third, you will also need a separate responsive menu other than existing Mega menu (provided by your existing template). You may download free DJ-MegaMenu Free Edition to display the notification dropdown.
  4. Fourth, you will need a Flexi Custom Code module (free to download) to add jQuery code.
  5. Fifth, add CSS and JS custom code to your template.
  6. Fifth, in the last, you will need to upload a PHP file in the root of your website e.g. public_html to connect the database table and fetch the new records in specified time interval.

By following the above steps one-by-one, I will explain each step in detail as below:

A. Create a table in Fabrik

Just create a table in Fabrik naming "User Notifications", as you do normally and create the following Elements in that table's form:

Sn Element Element Type
1 date_time date (already created by fabrik)
2 id internalid (already created by fabrik)
3 Subject field
4 Details textarea
5 Link field
6 Userid user
7 Status field
8 Go_link field
9 Notify_code field

 

As you know that this table has no data. You must first ensure, what type of data you want to display in notification for your users. For simplification and testing purpose of the data, you may add the Successful message code in other Fabrik forms through PHP form plugin to insert the data in this User Notification table, where your users interact with those forms. You can test, whether the data is inserted in this User Notification table or not. If inserted successfully, then your 25% task has been completed.

B. Check jQuery Libirary in template

 Before adding jQuery library into your template (for point B), please check, if your Joomla template is loading jQuery by using Network tab in developer tools in your browser by activating F12 button in your keyboard. In exceptional cases, if jQuery not available in your template then integrate the jQuery through CDN link in your index.php template file in the head section.

C. Download and install DJ-Mega Menu Free Edition

For separate responsive menu (for Point C), to be used in your dashboard horizontally in top position for displaying Notification Icon and dropdown menu, please download DJ-MegaMenu Free Edition. Create the custom menu at header position, like Position-1 in Protostar template and display it at Menu items, where you require it. Don't create any items in this menu as of now.

D. Download and install Flexi Custom Code Module

You may already familiar with Flexi Custome Code Module, if not, download and install it in your Joomla website. This will run the custom jQuery script on specified time interval and will refresh the dropdown menu. Insert the below code in code section in the module. Please mind to replace yourdomain/anyname.php in Ajax section in following code with your website domain after placing below code in the module. The below code will fetch live data after every 10 minutes to reduce load on server, however you may set it to lower time by changing the miliseconds at the bottom of the code.

 

<!DOCTYPE html>
<html>
 <body>
<ul style="list-style:none;">
<li class="dropdown-notify">
       <a href="#" class="dropdown-toggle notify" data-toggle="dropdown"> <span class="label label-pill label-danger count" style="border-radius:2px;  margin-left: 10px;  text-decoration: none;"></span><span class="far fa-bell" style="font-size:22px; margin-top: 16px; text-decoration: none;"></span></a>
      <ul  id="ps-container" class="dropdown-menu-notify scroll-pane" role="menu"></ul>
       </li>
      </ul>
 </body>
</html>
<script>
    var ps = new PerfectScrollbar('#ps-container');

    function updateSize() {
      var width = parseInt( jQuery('#width').value, 10);
      var height = parseInt( jQuery('#height').value, 10);

      jQuery('#ps-container').style.width = width + 'px';
       jQuery('#ps-container').style.height = height + 'px';

      ps.update();
    }

jQuery(document).ready(function(){
 
 function load_unseen_notification(view = '')
 {
  jQuery.ajax({
   url:"https://yourdomain/anyname.php",
   method:"POST",
   data:{view:view},
   dataType:"json",
   success:function(data)
   {
    jQuery('.dropdown-menu-notify').html(data.notification);
    if(data.unseen_notification > 0)
    {
     jQuery('.count').html(data.unseen_notification);
     jQuery('a.notify > span:nth-child(2)').removeClass('grey-bell').addClass('blue-bell');
    } 
   }
  });
 }
 
 load_unseen_notification();
  
 jQuery(document).on('click', '.dropdown-toggle', function(){
  jQuery('.count').html('');
  load_unseen_notification('yes');
 });
 
 setInterval(function(){ 
  load_unseen_notification();
 }, 600000);
 
});

</script>

After pasting this code in the Flexi custom code module, give it a custom position like notify by typing and entering in the position field, give the assignment to this module, where you want to show this module (in top menu) and save it. Now, create a top menu under menu manager and create a menu item like notify, select Add menu title to No in Link type. Go to DJ-Menga-menu options in under same menu item, scroll to module position and type the module position notify as you created custom module position in Flexi custom code module. Save this menu item.

 E. Add CSS and JS code in your Template

Add the below CSS code in user.css (if using protostar template, create the user.css, if not found in css folder. It is already configured to use in this template.) or in custom.css (if using shaper_helixultimate or Joomlart template):

 

.dropdown-menu-notify {
	position: absolute;
	top: 100%;
	right: 5px;
	z-index: 1000;
	display: none;
	float: right;
	min-width: 340px;
	max-width: 360px;
/*	height: 500px; */
	padding: 5px 0;
	margin: 2px 0 0;
	list-style: none;
/*	overflow: auto; */
	background-color: #FFFFFF;
	border: 1px solid #ccc;
	border: 1px solid rgba(0,0,0,0.2);
	*border-right-width: 2px;
	*border-bottom-width: 2px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 4px;
	-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
	box-shadow: 0 5px 10px rgba(0,0,0,0.2);
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
}

#ps-container {
/*   position: absolute; */
      margin: 5px -30px;
      padding: 0px;
      width: 100%; 
      height: 500px;
      overflow: auto;
    }

.dropdown-menu-notify.pull-right {
	right: 0;
	left: auto;
}

.dropdown-menu-notify > li > a {
	color: #6c7293;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 1.1rem 1.1rem;
	border-bottom: 1px solid #f7f8fa;
	-webkit-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
}

.dropdown-menu-notify > li > a:hover,
.dropdown-menu-notify > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
	text-decoration: none;
	color: #334152;
	background-color: rgba(233,235,243,0.3);
	transition: background-color 0.3s ease;
}

.dropdown-menu-notify > .active > a,
.dropdown-menu-notify > .active > a:hover,
.dropdown-menu-notify > .active > a:focus {
	color: #334152;
	text-decoration: none;
	outline: 0;
	background-color: rgba(233,235,243,0.5);
        width: 292px;
}

.dropdown-menu-notify > .disabled > a,
.dropdown-menu-notify > .disabled > a:hover,
.dropdown-menu-notify > .disabled > a:focus {
	color: #999;
}
.dropdown-menu-notify > .disabled > a:hover,
.dropdown-menu-notify > .disabled > a:focus {
	text-decoration: none;
	background-color: transparent;
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
	cursor: default;
}
.open {
	*z-index: 1000;
}

.open > .dropdown-menu-notify {
	display: block;
	-webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}

.dropdown-backdrop {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	z-index: 990;
}

.pull-right > .dropdown-menu-notify {
	right: 0;
	left: auto;
}
.dropup .caret,
.navbar-fixed-bottom .dropdown-notify .caret {
	border-top: 0;
	border-bottom: 4px solid #000;
	content: "";
}
.dropup .dropdown-menu-notify,
.navbar-fixed-bottom .dropdown-notify .dropdown-menu-notify {
	top: auto;
	bottom: 100%;
	margin-bottom: 1px;
}
.dropdown-submenu {
	position: relative;
}
.dropdown-submenu > .dropdown-menu-notify {
	top: 0;
	left: 100%;
	margin-top: -6px;
	margin-left: -1px;
	-webkit-border-radius: 6px 6px 6px 6px;
	-moz-border-radius: 6px 6px 6px 6px;
	border-radius: 6px 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu-notify {
	display: block;
}
.dropup .dropdown-submenu > .dropdown-menu-notify {
	top: auto;
	bottom: 0;
	margin-top: 0;
	margin-bottom: -2px;
	-webkit-border-radius: 5px 5px 5px 0;
	-moz-border-radius: 5px 5px 5px 0;
	border-radius: 5px 5px 5px 0;
}
.dropdown-submenu > a:after {
	display: block;
	content: " ";
	float: right;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	border-left-color: #cccccc;
	margin-top: 5px;
	margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
	border-left-color: #fff;
}
.dropdown-submenu.pull-left {
	float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu-notify {
	left: -100%;
	margin-left: 10px;
	-webkit-border-radius: 6px 0 6px 6px;
	-moz-border-radius: 6px 0 6px 6px;
	border-radius: 6px 0 6px 6px;
}
.dropdown-notify .dropdown-menu-notify .nav-header {
	padding-left: 20px;
	padding-right: 20px;
}

a.notify {
	margin-left: -30px; 
	text-decoration: none;
	color:rgba(108, 114, 147, 0.5);
}

.label-pill {
  display: inline;
    padding: .2em .4em .2em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
.label-danger {
	background-color: #d9534f;
	
}

.title-notify a { 
color: #1B4BC1;
 }
 
.notify-column {
  float: left;
/*  padding: 10px; */
} 
.notify-row::after {
  content: "";
  display: table;
  clear: both;
}

.blue-bell {
	color:#2c77f4;
}

.grey-bell {
	color:rgba(108, 114, 147, 0.5);
}

.title-notify {
	color:#303A46;
	font-size: 14px;
    
}

.desc-notify {
	font-size: 11px;
	font-style: italic;
}

a.notify-item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 1.1rem 1.5rem;
	border-bottom: 1px solid #f7f8fa;
	-webkit-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
}

.notify-item-icon-before {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 2rem;
	flex: 0 0 2rem;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	font-size: 1.1rem;
}

.notify-item-time {
	font-size: 10px;
	color: rgba(108, 114, 147, 0.6);
	padding-top: 5px;
}

.notify-item-icon-after {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 1.1rem;
	flex: 0 0 1.1rem;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	color: #a7abc3;
	font-size: 1.4rem;
}

Now Go to: https://www.npmjs.com/package/perfect-scrollbar#install

Download perfect-scrollbar.css and put this file in templates\protostar\css\pscroll folder (create pscroll directory in css folder).

Download perfect-scrollbar.js and put this file in templates\protostar\js\pscroll folder (create pscroll directory in js folder).

Link the above both files in your Protostar index.php file just near, where user.css linking code is found, by following code:

JHtml::_('script', 'pscroll/perfect-scrollbar.min.js', array('version' => 'auto', 'relative' => true));

JHtml::_('stylesheet', 'pscroll/perfect-scrollbar.css', array('version' => 'auto', 'relative' => true));

 F. Add PHP file in the root of website

Create a PHP file anyname.php (give any name) in root of your website through editor and copy the below code in this anyname.php file. Change the connection settings in mysqli according to your database connection:

<?php

define( '_JEXEC', 1 );
define( 'JPATH_BASE', realpath(dirname(__FILE__).'/' )); 
require_once ( JPATH_BASE .'/includes/defines.php' );
require_once ( JPATH_BASE .'/includes/framework.php' );
$app = JFactory::getApplication('site');
$user = JFactory::getUser();
$userid = $user->get('id');

/* for live server */
$mysqli = new mysqli('localhost', 'user', 'password', 'dbname');

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

 if($_POST["view"] != '')
 {
 $update_query = "UPDATE xxxx_user_notifications SET status=1 WHERE status=0 AND user_id=".$userid."";

   $mysqli -> query($update_query);
 }
 $query = "SELECT * FROM xxxx_user_notifications WHERE user_id=".$userid." ORDER BY id DESC LIMIT 100";

$result = $mysqli -> query($query);
 $output = '';
 
 if(mysqli_num_rows($result) > 0)
 {
  while($row = mysqli_fetch_array($result))
  {
   $output .= '
   <li class="box-notify">
   <a class="notify-item" href="'.$row["link"].'">
	<div class="notify-item-icon-before">
<i class="fa '
.(($row["notify_code"] == 1)? "fa-your-icon" : (
$row["notify_code"] == 2)? "fa-your-icon" : (
($row["notify_code"] == 3)? "fa-your-icon" : (
($row["notify_code"] == 4)? "fa-your-icon" : (
($row["notify_code"] == 5)? "fa-your-icon" : (
($row["notify_code"] == 6)? "fa-your-icon" : (
($row["notify_code"] == 7)? "fa-your-icon" : (
($row["notify_code"] == 8)? "fa-your-icon" : 0
))))))).
'"></i>
	</div>
	<div class="notify-item-details">
	<div class="title-notify">'.$row["subject"].'</div>
	<div class="desc-notify">'.$row["details"].'</div>
	<div class="notify-item-time">'.JHtml::date($row["date_time"], 'd-m-Y H:i:s').'</div>
	</div>
	<div class="notify-item-icon-after">
	<i class="fa fa-angle-right"></i>
	</div>
	</a>
   </li>
   <li class="divider"></li>
   ';
  }
 }
 else
 {
  $output .= '<li><a href="#" class="text-bold text-italic">All caught up!</br>No new notifications.</a></li>';
 }
 
 $query_1 = "SELECT * FROM xxxx_user_notifications WHERE user_id=".$userid." and status=0";
/* $result_1 = mysqli_query($connect, $query_1); */
$result_1 = $mysqli -> query($query_1);
 $count = mysqli_num_rows($result_1);
 
  $query_2 = "SELECT * FROM xxxx_user_notifications WHERE user_id=".$userid."";
/* $result_1 = mysqli_query($connect, $query_1); */
$result_2 = $mysqli -> query($query_2);
 $count_all = mysqli_num_rows($result_2);
 
 $heading = '<div class="notify-head">Notifications&nbsp;&nbsp;<span class="notify-label">'.$count_all.' New</span></div>'.$output;
 
 $data = array(
  'notification'   => $heading,
  'unseen_notification' => $count
 );
 echo json_encode($data);
}
?>

 Some Points to note regarding above PHP code:

  1. In the above code, check notify_code. There are eight type of codes from 1 to 8. This means that User Notification table is getting data from 8 type of forms and these are identification codes for the forms. You can reduce it for the number of forms from where the data will be inserted in this User Notification Table and assign appropriate code, from 1 upto any number as per your forms.
  2. I have used my icons according to the appropriate usage. You can assign your own Font Awesome Free icon, replace the fa-your-icon and modify color size in the user.css file.

 If you have any questions, please post in the Comment section, below of this post.

 

 

Pin It

Add comment


Security code
Refresh

Comments  

+1 # here July 14, 2020, 6:42 am
Hi! I know this is kinda off topic but I was wondering which blog platform are you using for this website?
I'm getting fed up of Wordpress because I've had issues with hackers and
I'm looking at options for another platform.
I would be fantastic if you could point me in the direction of a good platform.
Reply | Reply with quote | Quote
# sunitlive July 14, 2020, 9:18 am
Quoting here:
Hi! I know this is kinda off topic but I was wondering which blog platform are you using for this website?
I'm getting fed up of Wordpress because I've had issues with hackers and
I'm looking at options for another platform.
I would be fantastic if you could point me in the direction of a good platform.


Hi,

I always used Joomla, because of its numerous application building and programming capabilities. Would love to help, if you need some tips.

Thanks
Sunit
Reply | Reply with quote | Quote
+1 # google snake July 16, 2020, 3:23 pm
My family every time say that I am killing my time here at web, however I know I am
getting experience all the time by reading thes fastidious content.
Reply | Reply with quote | Quote
# sunitlive July 16, 2020, 7:06 pm
Quoting google snake:
My family every time say that I am killing my time here at web, however I know I am
getting experience all the time by reading these fastidious content.


Thanks, I think learning and sharing of knowledge is not a waste of time. I was too confronted with such situation previously. At least, we are not wasting our time wandering on streets.

Keep posting..
Sunit
Reply | Reply with quote | Quote
+1 # wormate io July 16, 2020, 4:21 pm
I'm extremely impressed with your writing skills as well as with the layout on your blog.
Is this a paid theme or did you modify it yourself? Anyway keep up the
excellent quality writing, it's rare to see a great blog like this one
today.
Reply | Reply with quote | Quote
+1 # sunitlive July 16, 2020, 7:43 pm
Quoting wormate io:
I'm extremely impressed with your writing skills as well as with the layout on your blog.
Is this a paid theme or did you modify it yourself? Anyway keep up the
excellent quality writing, it's rare to see a great blog like this one
today.


Thank you friend. Such comments motivate me to share, what I am learning.

This not a paid theme. It is Joomla Shaper Helix- ultimate theme armed with bootstrap 4.0. I just changed the layout through template manager, added some CSS code in custom.css. No paid modules and components have been used to display the blog.

Thanks for writing compliment, I always try to explain the users in writing as much as I can.
Reply | Reply with quote | Quote
+1 # short life 2 July 16, 2020, 9:37 pm
Hi to all, the contents present at this web page are really amazing for people experience, well,
keep up the good work fellows.
Reply | Reply with quote | Quote
# sunitlive July 16, 2020, 10:21 pm
Thanks brother!

I will try to cover all web development topics mainly Joomla.
Reply | Reply with quote | Quote
+2 # her July 16, 2020, 11:00 pm
This site was... how do you say it? Relevant!! Finally I've found something which helped me. Appreciate it!
Reply | Reply with quote | Quote
# sunitlive July 18, 2020, 2:11 am
Thanks for appreciation.
Reply | Reply with quote | Quote
+1 # io games July 25, 2020, 3:57 pm
Hey there! This is my first visit to your blog!
We are a collection of volunteers and starting a new project in a community in the same niche.
Your blog provided us useful information to work on. You
have done a wonderful job!
Reply | Reply with quote | Quote
# sunitlive July 25, 2020, 10:51 pm
Thanks for the visit. I would be glad to help for the community applications and blogs. You can drop the email through contact form.

Keep visiting!
Reply | Reply with quote | Quote
+1 # msn games July 26, 2020, 3:32 am
Excellent blog here! Also your site loads up very fast!

What web host are you using? Can I get your affiliate link to your host?
I wish my website loaded up as fast as yours lol
Reply | Reply with quote | Quote
# sunitlive July 26, 2020, 8:05 am
Quoting msn games:
Excellent blog here! Also your site loads up very fast!

I don't use shared hosting. I use only VPS hosting. Here is the link: https://cutt.ly/ksoezp3

Secondly, I use Ubuntu + VestaCP on VPS server. If you need a detailed guide how to install VestaCP on Ubuntu and configure it for Joomla, I can publish tutorial on this website.

Thanks for visiting!
Reply | Reply with quote | Quote
# Heart Praise October 25, 2020, 4:10 pm
Hello sir, your tutorial has been very helpful for me who is voluntarily building an app project for the medical sector in Africa. I have been able to get my user notification table to show in the notification area to whom I want to but how can I make the text inside the notification box to show "You have no new notification" to the user if the notification has been opened before.
Please note that the number of new notification that shows on the icon shows correctly and doesn't show again when the notification box is open. But the text inside the notification box that says "You have 1 new notification" doesn't reset if the notification is read.
Reply | Reply with quote | Quote

Related Articles