How to Create Facebook Notification System in PHP with Ajax

hello friends in this video tutorial we are going to learn how to create Facebook like had a notification by using PHP script with Ajax query and bootstrap framework Facebook type header notification is very useful feature in any web project by using this feature we can notify the user regarding latest alert like what happens in system we can display notification on header side of our web application so one user login to system then he can see notification on web page on header side so in this video tutorial we have make Facebook like notification system by using PHP programming with Ajax query and bootstrap on our websites and blog we have already published blog on this topic with source code and online demo if you want to get source code uncheck online demo of this video tutorial then you can follow link which we have put under video tutorial if you want to get more update regarding our video tutorial please subscribe our YouTube channel now let's start learn this things first we have show table structure for this feature this is our testing database and under this we have one table comments with four table column like commented comments subject comment text and comment status we will insert notification data under this table in comment status we will insert only two values 0 and 1 0 means notification is unread and one means notification has been read by user this is our index page on this page we have user JavaScript library query and bootstrap framework we will use their functionality of both framework to build header notification with PHP script make header so we have used bootstrap navigation bar code for make simple header on this page so for this we have go to this website and from this website we have copy this code and paste on our page now we want only right navigation part for displaying notifications so we have removed this code I'm here list tag we have add one class is equal to drop down this is bootstrap class and it will help us to make drop-down menu after this an anchor tag we have also add class name is equal to drop down toggle class and data variable toggle is equal to drop down this will use for drop-down menu open and close for display unread notification we have create wine label with class is equal to label label pill label danger and count between this label tag we will display number of unread notification with background red color below this anchor tag we have create an unordered list tag with class name is equal to drop down menu under this tag will display last five notification when we have click on above anchor tag with class is equal to drop down toggle class then by using Ajax we will fetch notification from table and display on to this tag so our bootstrap header is ready now we have create one form with attribute method is equal to poster and it is equal to comment form we will submit this form data for display notification on header side under this form first we have create text box format your subjects so we have write input type is equal to text with attribute name is equal to subject it is equal to subject after this we have create text area tag for enter comment so we have write text area tag with attribute name equal to comment it was equal to comment and rows is equal to five in form lastly we have create one submit button so far we have write input type is equal to submit with attribute name is equal to post it is equal to post and value is equal to post when we have clicked on the spot and inform data has been submitted to server now we have seen the output of this code friends you can seen that simple header with right-side notification link and below this we can seen one simple common form so we will fill this form and submit data to server after the state will become into header notification bar now we have moved to write query code for fetched notification from table so Ainge query first we have make one simple function with name like load and see notification with argument view is equal to blank this function will fetch notification from table and also fetch number of unseen notification also under this function we have write Ajax request and under Ajax request first we have write URL option set to fetch dot PHP page we have send requested to this page in second option we have right method set to post method we have used post method to send data to server in thirst option we have write data option in this post we have write which data we want to send to server here we have sent view argument value send to server and fourth option we have defined data type is equal to Jason that means when request has been completed then it will return data and JSON format lastly in Ajax we have write success callback function this function has been called if request has been completed and it will receive data from server which we can fetch from this data argument under this function we will write code after write in to fetch dot PHP file so we have go to fetch dot PHP file on this file first we have write of statement with condition like set function with argument like dollar post view variable this condition will check if value of this dollar post view variable is set then it will execute if block of code supposed value of dollar post variable is set then it will execute if block and under this block first we have make database connection so we have write dal or connect variable is equal to miss click connect function with for argument like host name said to locale lost username set to root password set to blank and database name set to testing after making database connection we have write dal or query variable is equal to select star from comments table ordered by in descending order with limit 5 this query will notification data from comments table now we want to execute this query so we have right dollar result variable as equal to miss click query function with two arguments like dollar connect variable and dollar query variable this function will execute query and store result into dollar result variable after this we have defined one variable dollar output is equal to blank in this variable we will store table data in HTML format then after we have right of statement and in condition we have right miss clean our rows function with dollar results variable greater than zero this function will return number of rows from query result and it will check it greater than zero or not if it returns zero then it will execute else block of code and under this block we have right dollar output variable and we have app and HTML code like list tag with anchor tag with the text like no notification found into this stall or output variable but supposed number of rows is greater than zero then it will execute if block of code and under this block we have write while loop with dollar row variable is equal to miss Lee fetch array function with dollar result variable argument this function will convert query result to array in store into dollar row variable under this while loop we have right dollar output variable and in this variable we have a pen table data in HTML format here we have write list tag and under list tag we have right anchor tag in between anchor tag we have right dollar row comments subject variable and dollar row comment text variable both variable fetch data from table and display under this list tag so we have fetched notification data from table and stored into this stall or output variable now we want to get number of unread notification from tables so we have write dollar query one variable is equal to query like select start from comments table where comment status is equal to 0 this condition will fetch data from table whose comment status is equal to 0 here 0 means unread and 1 means read notification now we want to execute this query so we have right dollar result one variable is equal to miss Lee query function with two arguments like dollar connect variable and dollar query one variable after this we have right dollar count variable is equal to miss clean AM rose function with argument like dollar resolved one variable this function will return number of rows from query results and store number of rows into this dollar count variable now we have right dollar data variable is equal to array with two key and two value in first we have right notification with value like dollar output variable in which we have store notification data and in second key we have right unseen notification with value dollar count variable in which we have store number of unseen notification now we want to send this data to Ajax request in JSON format so we have write echo statement with JSON encode function with argument like dollar date the variable this function will converter eight a JSON string and send to Ajax requests so now we have go to index page load unseen notification function under this function we have go to success function and under this function first we have write dollar with drop-down menu class with method and under this method we have write data dot notification it will display notification data under an order less with class drop-down menu then after we have right of statement and under condition we have write data dot unseen notification greater than zero this condition will check if value of this greater than zero then it will execute if block of code under this block we have right dollar count class with HTML method and under this method we have right data dot unseen notification it will display number of unseen notification under label with class count now we want to call this function when page has been load so we have simple write load unseen notification function so one page has been loading this function will be called knit will display notification under header notification after fetch notification we want to submit form data so we have write dollar with form mid comment form with unn method and under this method we have write submit event with event function so one form has been submitted then this event will be fired under this first we have right event dog preventdefault method this method will stomp the form submission to server side after this we have right if statement and under condition we have right dollar with a text box said subject with value method is not equal to blank and dollar with tax trail within comment with value method is not equal to blank this condition will check if both element has some value then it will execute if block otherwise it will execute else block of code suppose if both or one of the both variable is blank bandit will execute two else block and under this block we have write alert with message like both fields are required but suppose both field has some value then it will execute if block of code and under this block we have defined form data variable is equal to dollar this with serialized method this method creates a URL encoded text string by serializing form values after this we have defined ajax request and ajax request we have first write URL option set to insert dot PHP here we have send request to insert dot PHP page in Ajax request we have write second option method set to post method here we have used post method to send data to server in third option we have right data here we can define which state that we want send to server here we have write form data and lastly an ajax request we have write success callback function this function has been called after request has been completed and it will receive data from server under this function first we have write dollar with form mid comment form with index 0 dodge reset method this method will reset form value after inserting formed data into table we want to get notification at header side so we have called load on-scene notification function this function will fetch data from comments table and display under header notification now we have moved to write PHP code at insert dot PHP page and on this page first we have write statement and under condition we have rights at function with dollar posts subject variable as argument this condition will check if value of this dollar post subject variable is set then it will execute if block of code under if block first we have make database connection by right dollar connect variable is equal to misc Lee connect function with 4 argument like locale lost root blank password and testing database after making database we want to clean to form values so we have used misc Lee real escape string function for escape special character from string and store dollar post subject value in dollar subject variable and dollar post comment variable value into dollar comment variable after clean form data so now we have right dollar query variable is equal to insert into comments table with column like comment subject and comment text with values like dollars subject variable and dollar comment variable this is insert data query now we want to execute this query so we have right misclick query function with two arguments like database connections string dollar connect variable and dollar query variable this will execute insert query and form data will be inserted into table now our code is ready so we have saved this code uncheck output in browser your friends you can see that when page has been loaded then in header notification when we have click it display no notification found so we have go-to form and in subject we have type John Smith says and comment we have right how are you and click on post button after submitting form out head or notification we can see one and read label so when we have click on notification and under notification we can see which we have an AR inter form so this is simple notification but here when we have click on this notification link then then read label with one has been removed that means we have seen notification so for this we have go to its query code on index page and here we have write query code like dollar with document as selector with on method and under own method first we have right-click event notification class drop-down toggle class with function so when we have click on notification link then at that time this code will be execute under this first we have write dollar with label class count with HTML method with blank value so when we have click on notification link then unseen notification number has been removed from notification link we want to load notification from database so we have called load and scene notification with arguments view is equal to yes so it will fetch notification data from table display under notification drop-down menu but here we have defined view argument value yes so it will update comment status from 0 to 1 that means unread to read Sofer we have go to fetch dot PHP page and here we have write conditions like if statement and under condition we have write dollar Post view variable is not equal to blank then it will execute if block of code under this block we have right update query variable is equal to update comments table set comment status is equal to 1 where comment status is equal to 0 this is update query and this will change value of comment status column 0 to 1 where comment status is equal to 0 here 0 means unseen and one means seen now we want to execute this query so we have write misclick query function with two arguments like database connection string dollar connect variable and in second argument we have write dollar update query variable this function will execute query and it will change comment status now we have a game go to index page and here we want to check notification data on regular time interval without refreshing of page so we have write set interval method and under this method we have called load and scene notification function with time interval 5,000 Mille second this code will call load unseen function on every 5 second that means that we'll check notification data on every 5 second and update on header notification without refreshing of page so our code is ready and check out what in browser friends now we have refreshed browser and click on notification link when we have click on notification link then red label with one number has been removed and we can see notification same way we have again right in subject Peter Parker invites you in in comment we have right Peter Parker invite you to play game and click on post button after click on post button on header notification we can see one red label with one when we have click on notification link red label has been removed and we can see notification and drop down when we have checked able then here you can see that comment status has been changed to one so this is our video tutorial on how to make Facebook type header notification in PHP by using Ajax query and bootstrap framework on our websites and blog we have already published blog on this topic with source code and online demo if you want to get source code uncheck online demo of this video tutorial then you can follow link which we have put under video tutorial if you have any query regarding this video tutorial please comment your query under comment box if you like this video tutorial please share this video with your friends or even you can also share on social media also friends if you want to get more update of my video tutorial so you can subscribe my youtube channel friends you can also like my Facebook page or you can also follow webs listen on Twitter you

Channel: Webslesson

Views: 107,668

Keywords: facebook type notifications, notification in php demo, facebook like notification php mysql, facebook style notifications, php notification system like facebook, facebook like notification dropdown, facebook style notification popup using css and jquery, php notification alert when new record is inserted, facebook like header notification in php

Id: IvagmRhTG4w

Length: 21min 44sec (1304 seconds)

Published: Sat Mar 04 2017