Adding Notifications & LaraFlash Package (Ep 25) - Build an Advanced Blog & CMS

[Music] hey everybody welcome back to the devil marketer channel today we're gonna focus on part 25 of our advanced vlog and CMS series now the goal of today's video is to set up our lera flash notifications our flash notifications for label we're gonna set those up so we basically never have to worry about it again we can blaze forward with our application using flash notifications and knowing that they're gonna display to the user as we intend them to so that's kind of the goal of today's video is just to set it up so you don't have to worry about it again now to do this we're going to be using a plug-in called lair flash is a package that I've created you guys can find this at dev marketer slash lair flash I believe if you just google it it'll pop up to lera flash should pop-up dev marketer slash lair flash so what we want to do here is we want to install this package now what this package does is this improves significantly on the default flash notifications that come in level so by default level doesn't actually have very good support for flash messages you can set messages or flash messages to you know to the requests but you really can't if they're not really designed in the way that we actually use notifications there aren't really any properties you can set for it there's no priorities or titles or anything like that even types like whether it's a success message or an error message it's difficult to add that kind of stuff to the session also it's hard to add multiple items to the session as well without making things too complicated and so this aims to improve on all of those aspects you can add multiple you can just make multiple calls to create multiple messages all of them will be stored in the session and grouped as a collection which is really cool so the idea here is I built layer flash to make it easy so easy to manage notifications in a way that we already understand which is basically working with database objects so layer flash actually uses the built in collections it actually extends collections that are built into level so when you just like how when you query your model and get back a bunch of records from your database they are returned to you as a collection you have access to all these methods here these label methods for collections such as intersect is empty keys shift shuffle slice random diff there's almost a hundred of them here that you can basically use to manipulate and find and sort and filter your collection you have access to all of those in Larra flash because you're all your notifications are actually returned to you as a collections object and then each of these each item in there is its own object its own notification object that has its own properties as well like the type of property you want like success or info or snack bar or something like that there's also the priority the title you can set a title if you want or not don't worry about it you can set you know the message everything like that there's some other values coming some new properties coming in version 2 you'll have the duration that you want the message to display the location if you want it to be the top center top right whatever will have those all be additional properties and so it makes it really powerful because you can filter and group and loop through them as a native collection just like you would with your you know with eloquent to sort through your response from eloquent which comes in as a collection it works in exactly the same way and then inside of that collection just like with eloquent is a bunch of objects so you can just query certain columns like you would with eloquent here you'll just query you'll do notification type notification priority just like you would with your eloquent models where you grab the column name or whatever so it makes it just like working with eloquent models that's why I love it it's feels very natural and native to me now there's a lot of stuff in here and I'm not gonna go through all of it but that's kind of the introduction to what layer flash is to show you guys how it works we can set new notifications like this there's a helper function called flash you can just say flash something went wrong that is all it takes to create a flash message really really easy and now it's gonna be stored in there if you make another call in that same request it'll just group them together as a collection that you could have as many of those as you want and you can have tons of messages and just play all of them to the user however you want there's another way you can add a new layer flash ad using the facade works exactly the same way there's also a fluent syntax if you want to add more property information of course these ones can act you can change the properties as well like title and and type and priority you just need to pass in an options object to the second argument but if you want to do a fluent syntax like this you can see Larra flash new and then the contents hello world the title is welcome the type is info and the priority is five you can configure it like that with a fluent syntax and then you can make another call right after that or wherever and you can add an error message as well and display all those to the user and it'll be grouped as a collection so really cool stuff let's go ahead and install that and get this set up now that I think I've explained what it does and why it's cool so we're gonna do composer required F marketer slash layer flash was pulled in with composer so here we are inside a composer let's go ahead and set it up alright so here we go we've gone ahead and updated or installed the package layer flash so we have we now have access to it now just want to note as of this video I'm using 1.3.1 just in case this changes in the future you may want to specify the version number so you to do that here when you're doing composer require you can just do colon 1.3.1 or you could do what I would recommend actually is to do a carrot here so just do a carrot and then 1.3 or 1.1 that'll mean anything it's compatible with 1.3.1 just to make sure it's the same in this video it is possible this package is changing so I'm adding to it all the time so it's possible it changes by the time you're watching it depending on when you're watching this exactly okay so that's yeah that's everything we need for that so now we should have access to that here let's close these files and yeah we have access to it now you can see if you look in over here the dev marketer slash layer flash was automatically discovered so you don't have to worry about anything if we go over to Google Chrome here when we're setting up the installation you don't have to worry about the providers or the aliases if you using 5.5 the one thing we do have to do is come publish a config file so let's go ahead and click here and just let's publish that configuration file now if we go into the config file you can see it's config layer flash there's a few settings in here the the really the important thing you need to worry about is this right here just set your defaults whatever you want the defaults to be free with your application so the default type is info default priority is five default title is notice and the default content which you really should never use is your last request experienced a problem alright so this means that if you haven't set any of your you know if you don't set any of these properties these will be the default properties that are given now you are welcome to put null for one of them if you guys want to deal with null values but that's that's how you customize what lera flash uses if it if you don't set it so if you don't set a priority it'll use whatever priority is in there okay so now that we have that done let's go ahead and add the actual visual elements to our Flash notifications to display those to the users so the way we can do that here is we're gonna want to add it to our layout file our template file to both of these files actually so that we can just kind of set it once and forget it and we know that it's gonna grab everything that's in the layer flash flat and request object it's gonna grab it and display those to the user upon every request that way we don't need to worry about it going forward we can screen it'll just automatically display to the users so we're going to create something here that's visible in both of these and of course the most logical way to do that is to create a a partial file or an includes file so let's go ahead and create a new folder called notifications and then inside of there let's create a new file called toast blade PHP so what I'm gonna do in here is we're gonna we're working with the toast notification system I'm gonna basically create a view instance wrapper around the toast notification system that's why I like to call it toast blade PHP is to kind of just explain what that does now let's head back over to chrome and the other thing I want to show you guys is this gist file this is something I've created and been working on across many projects layer Bowl projects that I currently have I use this same template okay so I always just copy this so I'm not going to rewrite the wheel here I'm just gonna use what I always use which is this here so you guys can come here I'll have this linked down in the description and you guys can go ahead and be it no this top parts just a comments you don't need to worry about it but if you copied it it's not the end of the world so anyway all of this here is going to manage our notifications alright so you guys can see this link down the description if you guys want to check it out just copy the code from here and put it into this toast blade dot PHP file okay go ahead and save that file and now we will have access to that I'm gonna fly through what this does really briefly again this is something I've been working on I guess I've built I don't know how long ago so this isn't something I built today this is just something I reuse across many of my applications so I literally generally do copy and paste it and eventually I'm gonna put this into the layer flash so you don't have to do anything that that's just part of layer flash I'm gonna do that eventually here okay so really quick just to explain what's going on we create a div here that's empty has a display of none and it's called toast notifications now what I'm the reason I make this is so that we can create a new view instance and we are tying it to we are binding it to that that div we just created okay so that way we have a second view instance the just manages our notifications which is going to be cool now instead of here we have our data objects we have first our session which is everything in this current session or request all of the layer flash notifications for this request so we have layer flash all by type what this means it gets all of the notifications that layer flash has in this request and it sorts it by type so by default what that means is it's going to sort like danger notifications first and then warning info and success so kind of like highest priority to lowest priority danger warning info success it's gonna sort them in that order so if we have it'll show all the danger notifications first before it shows the success notifications all right so it's sorting them in that way now if you don't want to do it like that you can actually just do all and then that will just give it to you in the exact way they were added so if you whichever one you added first we'll get displayed first to the user whichever one you added second will get displayed second the other thing you can do is you can also if you're using the priority you can also do all by priority and it's gonna sort the highest priority to the lowest priority in that order okay so if you had multiple priorities defined you could do it that way as well so it really just comes down to what you want and each of these have different options so you can sort in ascending order or descending order which is the default there's options for all these you can also configure the order that it displays in so if you want info first and then you want success second and then danger third or something you can configure that as well but we're just gonna leave it like in the defaults okay all right so then all of those get put into this data this session object now after now we down here we create a bunch of methods these methods are just ways to work with they're basically just wrappers around this toast method so we're using this toast open this comes with beautify and then we're just extending it basically alright so we've created a method called general which has a bunch of parameters here you can pass in these parameters the only ones required is message and then it just goes ahead and sets it and runs the notification we have deep some basic ones for primary success info warning danger and then the snack bar at the bottom and a generic one at the bottom for as well okay so there's lots of things here and then those are always available in our application now using the notifications namespace that's why I like to create a separate instance last but not least under mounted here this is where we actually are going to loop through everything that's in this session object it's going to loop through them all and then it's going to run the appropriate method and pass in the content to actually run it so when we load the page it's going to load anything that's currently in the session it's gonna go ahead and display all those to the user but then it's also going to be ready for new notifications if we want to issue new notifications at any time all right so this is all it takes there's no real setup here other than creating this we do need to make sure that this partial file is available in our template so now that we have it let's go here to our I'm gonna just keep it open actually we're gonna keep that file open and then let's go to our layouts file and add it here so down here at the bottom we need to add it after our view and beautify have been installed so down here we're going to include and we'll just say includes dot notifications notifications dot toast we're just gonna go ahead and add that and let's go ahead and copy this oops copy that and then we're gonna paste it into the app file as well so now it's available in all of our files ok and that's it so now it's available so now we go ahead and test it but it should work and it's ready to go so to test it let's go ahead and start using lera flash let's start adding layer flash to a few items to do that let's just create it in our home web or our home route so here we have a home route home controller at index let's go over here we'll create some messages there just to test it out so let's go over to our home controller home controller here here's our index file let's go and just add our layer flash messages here so we would do layer flash to create a new layer flash message you can make it fluent so you could do add content hello world priority six type is success and or maybe info and whatever that's fine okay you could set a title if you wanted to or it'll just these defaults you can also there's some easier methods like if you just want to do shortcuts there's also you could just do danger or you could just do success so you can do those as well so like success yeah it worked and then you could also do lera flash danger oops something went wrong okay so there we go so now we've had three notifications let's go see how that looks let's go to this index page and looks in the browser so over here let's go to home oh we do need to import layer flash my bad up here at the top let's go through and just say use layer flash there we go let's go back refresh and here we go so now we get our danger message oops something went wrong it should last five seconds by default then we get our hello world message which is an info message and then we should get our success message after this yay it worked now notice it was in slightly different order than we did here just because if you remember over here in toast when we imported them we said sort them by type so it's by default grabbing it sorts them from danger warning info success so it sorts them in that order so all the danger messages will be first then all the info are warning then all the info and then success so here that's what it does is it it shows that danger message first there's no warning messages so that you'll skip over that and then it shows all the info messages and then it will show the success message and then if you had a different type that wasn't one of those it would show that last so for example if we wanted to create another message let's go to our home controller it's create another one we can create it here just to show that it doesn't follow this order we can say lera flash snackbar and we'll just say click to continue okay so now we created a snack bar message and now that is considered a other message it's not one of the primary four so what it's going to do is it's going to create it it'll be last after all the other ones so now it's refresh unfortunately we ran to wait 15 seconds but it'll loop through all of them and the snack bar message will be last okay so hello world let's get our success message cool and then we'll get our snack bar the snack bar will be down here in the corner there we go click to continue okay okay so there we get our snack bar there you go ok so that's been created a couple of things if you wanted to play with it you could sort it by priority so this will sort highest priority first lowest priority last now the default is priority so if we look over here these don't have priorities set so all these are gonna have priority five that means that this one has a priority is six so it's gonna show first and then it will show these three and it's gonna show them in the order they were created so basically it'll show this one then this one this one in this one now if we added the priority let's make this one only a priority of three now it'll show this one first which is our info message then it will show the success message the danger message and then the snack bar just because this is the lowest priority this one's the highest priority these two both have a priority of five because that's the default which is config in our config file if we go to config here the default priority is five so these are since these don't have a priority to find that means they're going to use the default which is five and because these both have the same priority then it the tiebreaker is basically whichever one is created first so this one is created first so it's gonna get displayed first then this one and then it will go to the next priority which is three so if we test that real quick we'll get that top priority which is the info then we should get the next one which is the success yay it worked then because as a five this one also as a five so that could show next because it was created next and then our snack bar is the last one because they have the lowest priority okay and then of the other option is to just you could just do all and it's simply just gonna do them in the order you created them so we'll get that info first it's just gonna just create it in in this order okay so snack bar is second because it was the second one to create then we'll get our success and then our danger okay so anyway the point is though it's set and ready to go so now whenever we create messages it'll be available on any page and we'll see those notifications popping up so now we'll have access to our flash messages all we have to use is use this layer flash helper which is pretty cool okay and then the other thing I'll mention is if you wanted you could just do flash that helper if you don't want to pull in the layer flash thing you just do flash then there is also you can pass in an array here as the second parameter you could do priority is a hundred you could do title is whatever or type or what-have-you okay so you can pass in an array of properties that's just another way to do it lots of ways to do the same thing so just to play with that yeah so anyway that's how you have access to that well it doesn't end there because we actually do have access to now this so here we get our yeah it worked that you chooses this helper so oh what we wanted to do is sort it by priority because then this would show first toast so now we get that yay it worked because it's priority one one hundred then we'll get the priority six one which is hello world right and then we'll get the danger one which is lot priority five and then we'll get the snack bar which is priority three okay so that's kind of the way that that works so you can see how flexible it is there's the snack bar all right I'm gonna go back to all by type and then or let's just keep it by all by prayer types fine for now and there we go so now it's available everywhere now let me just last thing that I want to do here is let's um all right guys so I decided we're going to add one more notification we set up our client side or sorry no our client side our server side notifications so you know when notifications are added on the server side through layer flash we go ahead and we loop through those and show them all to the user every time we load the page up so that's good to go now we're set I decided to also be kind of cool to set to show you guys how we're going to be using client side and notifications so we can also trigger these notifications on the client side when something happens without the page refresh so a perfect example of that is when we copy the slug to the clipboard now let me just show you guys what happened unfortunately this I actually filmed this part when we were going through and adding some of these features to the to the slug widget the slug VJ s component and unfortunately it got corrupted and the it it got corrupted and unfortunately she couldn't recover it so the video for this guy corrupted but I did add a few minor features to this now when you create a notification so let's something cool alright so it creates this like normal I do have this new actions drop-down which allows you to copy the URL copy the slug or to actually visit the URL on the page see when you visit the or on the page it goes over to that URL when you copy the URL it'll copy there just the slug or the full URL okay everything else is basically the same I did change some of these words so like here if we haven't made a change it just says cancel as soon as we make a change then it says save just to kind of notify what's going on but if there's no change in the slug then it just changes just a cancel button to indicate that you're canceling instead of it previously was saved just some minor stuff like that just some little tiny changes just to kind of optimize this so what we're going to do is I want to go ahead and create a notification that when we copy the full URL right now if I click this I clicked it and there's no no nothing to like show you that it was on your clipboard but now if I paste it I get that full URL let's copy just the slug and paste that now I get just the slug so it's in my clipboard it does work and I do trigger an event when this when you copy it's the copied event and so what I want to do is tie into when that event is triggered we go ahead and pass a notification to let the user know that something was copied to the clipboard so what we're going to do is we're going to use our notifications view object and we're going to combine that with that event that is triggered in our view GS component so we're gonna go to this post create page and ty didn't tie it in here so here we've got our slug widget you can see we tie in to this event right here we run this update slug method so what we're going to be doing here is we're going to also tie into the copied method so now when we run the copied myth or sorry the copied event so now when the copied event triggers it's going to run a certain method so we'll just say slug copied and we'll say it runs this method whenever that copied event is triggered so now we need to go down and create this real fast let's come down here to methods and let's create that oops what I call it slug copied and then we're gonna go ahead and set this up now there are some some arguments passed and I can't remember what they all are so let's go look at slug widget here let's find that event so down here at the bottom here it is copied clipboard okay we created this and let's see here we omit the event for copied we pass in the response which will either be success or warning depending on the type and notification we want so really this should be type fact we could change this to type change that to type there we go and then we've got the message which will either say copied to clipboard with the what was actually copied or it'll say copy failed if it didn't work and then last is the value it should just be that's passed in that's actually what gets passed in so that's the actual either the URL there slug it's actually what was the element that was copied to the clipboard so you have these three arguments type message value so let's go ahead and set that up so now back over here and create let's set that up we'll say type message and value although I don't think we're gonna use value but that's okay we can pass it in anyway and then from here we can go ahead and trigger that notification so we're gonna say notifications dot toast dot well nothing we don't I think we just run notifications toast so if we go back to that notifications we can actually see it just kind of showing you guys how this works let's see where is that includes notifications toast so basically we want to run this method down here this is just a generic toast method whereas these are kind of like there's a danger these are just shortcuts so this is a generic one so if we run toast we just pass in the message of the first argument and then we pass in an options per am an options object is the second per argument okay so this options argument contains position duration and type so everything we can basically stay a default the one thing will change is we will pass in the type and we'll set it equal to whatever the type is in our slug widget this type that gets passed in it'll either be success or warning okay so now let's set that up over here we got type message value so now when we set up tests we can set up the message first and then the second is going to be our options object which will be type and we'll set that equal to type but we actually have to have like is warning is success stuff like that so let's go ahead and just set that up here like that we'll just use the JavaScript template template syntax alright so there we go suppose it'll be like is success is warning that's basically what it'll be that's it I think that's it at least let's go ahead and test it out in the browser to see how this works so I'm gonna refresh real quick doesn't appear that we have any errors that's a good sign let's say something sweet we should get our little thing here we can edit it that's great so now if we copy to here there we go we get our copy to clipboard and you can see it has that full URL up there and if I paste it down here I should get that full thing let's go ahead now and just copy the normal just the slug only you can see copy to clipboard something sweet that's just the value of the slug and so now we only have the value of the slug in our clipboard so there we go so we can keep doing that it's going to trigger those on demand all right so that's basically everything we need to work on in this video we've got our notifications set up so in future videos we can just take advantage of using them because now they're set up so it's kind of one of those things you set it up once and now we're going to be good throughout the rest of the application now we have the ability to trigger events on the client side like we did here so if we ever need to do anything client-side let a user know that something happened an ajax request is successful came back with an error any of that stuff we can just tie into that notifications view object and create notification on the client side as they happen and then also if we pass an or create any objects with lera flash those will automatically be displayed to the user we never have to worry about it again so I'm pretty excited with what we did here a lot of explaining but I think this is actually this is really really successful for our project because notifications now are done we really don't need to worry about them anymore they should be ready to go as we continue to work all right so that's everything I got for today's video thanks so much for tuning in I'll see you guys in the next

Channel: DevMarketer

Views: 34,701

Keywords: code, tutorial, best, easy, cms, notifications, laraflash, laravel, vue, javascript

Id: 649FIe_SD-o

Length: 29min 49sec (1789 seconds)

Published: Mon Nov 20 2017