How to display Toast alert using Keyframes in CSS in a PHP login form | CSS animation | Snackbar

Hello friends in this video I will show you how you can display a toast message in a PHP login form I will have a login form and when the user logs in successfully it will display post notification saying login is successful toast message is a kind of message which appears on the screen for a few seconds and then it disappears I have already developed a simple login form using PHP and MySQL I'll show that first and then I will show how to add code in it to display the login successful message as a toast notification so let me show the login form first so in the browser I enter localhost cost so it gives me the home page click here it shows the login form so let me login so I am giving email ID and password to login it logs in successfully and displays the username email ID and a logout option so far I have not added code to display the toast message but I want to add code to this project so that there will be a message like post message which will appear from the right like this or from the left like this or from the top or from the bottom so this is the toast message I want to display in this project so that as soon as user logs in successfully in the home page this message will be displayed so let us see how we can do that so I have created a toast folder under hddocs and these are the files and folders I am using so let me open this in Visual Studio code I have a CFG folder and I have kept dbconnect.php in this folder I am using a database demo and using mysqli connect to connect to the database so let me show you the database here so this is the demo database which I am using and there is a table users this is the table I am using so if you see here I have the creatable script for the users table so email name and password these are the columns and I have inserted one row in this table just for login purpose is test at test.com email ID and this is the name and this is the md5 hash of password123 so I have just inserted this Row in the table so if you see the table here this is the structure of the table and this is one row in the table let us see the other programs I have a style under CSS folder this is the style so far I have used for the login form header.php I am using bootstrap 5 and included my custom style.css and jQuery Library I am using here also I am starting session here index.php is my home page so in the home page I am just checking if user is logged in then I am displaying the username and email ID by checking the session variable and also a logout option if user is not logged in then I am just displaying the login option here if you see here this is the home page where it is displaying the username email ID and logout and if I log out then then it gives me the login option this is the login form let me just show you this is a very simple login form which I am using this is the form and I have used the email ID password and submit and cancel button so if you see here after the form is submitted I am just getting the email ID and password generating md5 hash of the password and then selecting the data from the users table and if there is a successful login I am setting two session variables here name and email which are being displayed in the home page and then redirecting the user to the home page this is the logout.php I'm just unsetting the variables and deleting the session so this is a simple login form I have developed so far but we need to add the toast notification as soon as user logs in successfully so let us do that step one add a placeholder for the message if you see that after successful login user is redirected to home page and then the message appears so that means message is appearing actually on the home page so let us add a div in index.php for the message you can add this div in anywhere in this index.php within the body so I have added here with ID equal to show MSG Step 2 in login.php add a session variable for the message so we have added a session variable called toast MSG after the successful login so it will display login successful now in index.php we want to display this message when user is logged in so here we have added if session variable is set for the message then we are displaying the message here so let us see so far how this message is displayed so you can see login successful message is coming here I could not capture the entire screen and that is why the full message is not coming but we need to display this for few seconds so we need to add some jQuery scripts here so let's do that step 3 add jQuery script in index.php to display the message for few seconds so let us write the jQuery script in index.php we will use a set timeout function to display the message for let's say 5 Seconds also we'll check whether the session variable is set for the message or not so here we are adding a new class called display for the so message where we are displaying the so much if you see the show message here we are adding a new class here and we'll add the CSS for that class so we are adding here and then we are using set timeout function so let's say five seconds we are we want to give delay so here so you want to give D left five seconds which means that message will be displayed for five seconds and then it will be disappeared so that means we are removing this class after 5 Seconds and then let us unset the session variable now let us add some little bit style here for the display and also for the show message ID show message we are going to add some style so here initially we are hiding this ID so message ID we are initially hiding and then in the display we are making it visible so let us now run and see how it is working log out so the message is appearing and it should disappear after five seconds let's see okay so it's disappearing now so our code is working so now we will add some style and animation to this message so let's do that now so here we have given the position fixed and top 50 percent which that means it will come from The Middle and then write 30px message will come from the right side color background and padding radius so now let us see how it is working log out login again so the message is appearing from the right and there is a better style now and it is disappearing after 5 Seconds so so far it is working fine so now the last step is to add some animation so let's do that we want to add the animation for the message so we'll be adding that in the display class so we are adding fading and Fade Out for one second and delay 4 second now let us add the animation for fading and Fade Out now we have to see that since we are displaying the message from the right so we'll give a from N2 and from would be 0 to write it will be 30 PX so let's write that we are going to add opacity also here we have to make 30 PX and opacity 1. so let's do that for fade out also for Fade Out it will be opposite from 30px to 0 let's now run that and see how the animation is working log out and log in again message is coming looks like there is some problem here it is not appearing properly so let's see where is the problem so here we have to use 30 rest looks fine so let's now run it okay now it's looks working fine so let's see yes so animation is working fine so now we want the message to be appeared from the left side so replace right with left here change the position here left so we have made changes we just replace right with left and let's see message is coming from the left side and we can do the same thing for the top and the bottom Also let's do that let's do for the top now so for the top we have to change the position so here we'll change it to left and this is top and replace all the left with top so let's see now log out and login yes it's coming from the top now let's do the same thing for the bottom we want the message to appear from the bottom so all we have to do just replace the top with bottom let's see that now yes message is coming from the bottom also so this way we can display the post notification on a PHP page in this case I have displayed that for login form you can do that for any other action where you want to show the toast notification on the screen so I hope I could explain it properly if you find it useful please give a like And subscribe the channel same topic is discussed in the website called howto.com you can go there I have given the URL in the description of this video you can see the step by step instruction given in the web page you can download the code also free you don't need to sign up hope it will be useful for you thank you for watching the video foreign

Channel: Codehow2

Views: 855

Keywords: php, mysql, keyframes in css, css keyframes, settimeout javascript, toast notification, php toast message, toast alert, settimeout function, settimeout, settimeout jquery, toast html css, css animation, html toast, php login form, php logout, php session, login, logout, toast message, html css, html, css, login message

Id: vDH2aC6Tql8

Length: 15min 37sec (937 seconds)

Published: Mon Jun 12 2023