All right, welcome back. So now I wanna take some time to talk about flash messaging, notifications, and also a little bit of interactivity using alpine js. So I'm on the login form and we know that when I submit it, it'll hit the store action of the sessions controller. And assuming everything went as expected, I flash this key success to the session that contains you are now logged in.

I flash this key success to the session that contains you are now logged in. However, at the moment, we're not doing anything with that. So here's what we could do in my layout file at the bottom, within a div, here's what I might do. Let's say, well, if we have anything in the session for success, then within a diviv, let's display it and we can use value in this case. Okay, so now if I were to come back, let's log in, submit it, and there we go.

Okay, so now if I were to come back, let's log in, submit it, and there we go. So we have an uns styled flash message. And remember, it only exists for the next request. So as soon as I refresh the page, it's gonna be gone because it's, it's a one time thing. Alright, so now let's just style this a little bit better. I'm gonna add a class here and I'll paste in a few things. Let's set background color, a little bit of padding, and we're gonna position it in the bottom right corner,

Let's set background color, a little bit of padding, and we're gonna position it in the bottom right corner, pretty common, right? And then we'll make the, uh, the edges rounded. All right? I think that's gonna look a lot nicer. So one more time, sign in, password, sign in. And there you go. The, the typical flash message you see all the time. But notice it's never gonna go away at this point because we're not using JavaScript.

But notice it's never gonna go away at this point because we're not using JavaScript. So yeah, at this point we gotta figure out how do we wanna handle the JavaScript angle of any typical application? Do we cover it in this course? Do we skip it? Do we pull in view? Do we pull in react? Here's my thinking. Um, if you're not familiar with those tools, it can quickly become overwhelming and it's not the core focus

it can quickly become overwhelming and it's not the core focus of a Laravel from scratch course. And yet these things are kind of necessary to building applications. So what we're gonna do is we're gonna take a light touch and I'm gonna pull in sort of like the modern equivalence to something like jQuery in my opinion. And that's called alpine js. It'll, it will allow me to inline add some behavior

And that's called alpine js. It'll, it will allow me to inline add some behavior and transitions and, and, um, data binding, but it's not gonna be overwhelming for you. So I think that's the way we should go here. Let's start, Let's boot up the terminal and I'm gonna run NPM install Alpine js. Alright, next from my sidebar, within the JavaScript directory, uh, this imports bootstrap. So here we import Axios. Now let's do alpine.

within the JavaScript directory, uh, this imports bootstrap. So here we import Axios. Now let's do alpine. So let's import, uh, alpine from alpine js. All right. And then I can say window do alpine equals and alpine, and then alpine dots start. And that's it. That should do the trick. So let me show you how we can quickly use this. It's very simple, which is why we are reaching for it. A very simple but super powerful. I can define a, an alpine component by using X data

A very simple but super powerful. I can define a, an alpine component by using X data and I can optionally pass some data here. So for example, if I said greeting, uh, if I type right, hello, well then I can bind to that. I can say, all right, x um, text bind to the text of this paragraph tag to that piece of data. Okay, so now if I switch back to the browser, sure enough, I see hello, um, very quickly, this is just the 32nd primer. I can have an input and I can say X model equals greeting.

I see hello, um, very quickly, this is just the 32nd primer. I can have an input and I can say X model equals greeting. So I'm gonna bind, uh, the greeting property to this input. And that way I have two way binding. So think about it. If I change the input value, that will update this greeting, and then that will trigger a re-render of this, uh, paragraph. If you've ever used any kind of, uh, data binding framework, this will be very familiar to you.

If you've ever used any kind of, uh, data binding framework, this will be very familiar to you. So now, uh, you can't tell, but this is our input here, and if I change it, notice we are updating the paragraph as well as the input because we have a single source of truth, right? Uh, I'll show you another one. What if we bind to a Boolean like show? All right? So we could have something like this. Uh, if show is set to true, you can see me.

So we could have something like this. Uh, if show is set to true, you can see me. So if I come back to the browser, sure enough, you can see me. But if I were to instead change this to false, then this does not, uh, return true and I can't see it anymore, right? You could then maybe say, uh, true, but let's add a button here, toggle. And we can say, when you click on me, show equals false.

but let's add a button here, toggle. And we can say, when you click on me, show equals false. You see all of it is, is almost exactly what you would expect to be, and that's why I chose it. Uh, even if you don't understand the framework, you can basically figure it out pretty quickly, come back, I can see it. If I hit this toggle button now I don't see it anymore. You get the idea and now we can get to work. Okay, so now we have this. Think about it.

You get the idea and now we can get to work. Okay, so now we have this. Think about it. Why don't we just say if we display a flash message, uh, let's just wait a few seconds and then hide it. Great, let's do that. And then I will declare this as an alpine component and we're gonna use that show technique. So by default, we wanna show this. So I can say X show if show is truthy, but I'm gonna say when the component initializes,

So I can say X show if show is truthy, but I'm gonna say when the component initializes, basically once it mounts, let's set a timeout and let's set show to false. And I'm gonna do that after three seconds or 3000 milliseconds. All right? So think about it. We render this. All right? And then 1, 2, 3. This callback function runs show is set to false. Uh, this gets updated, this is bound

This callback function runs show is set to false. Uh, this gets updated, this is bound to that, so it re-render. And this will effectively set style display none on the tag itself after three seconds. Alright, so here's how we'll test this out. I don't wanna submit that form over and over. So we'll just say testing for now. And yeah, watch if I refresh the page 1, 2, 3 and it disappears.

And yeah, watch if I refresh the page 1, 2, 3 and it disappears. And yeah, what's cool with Alpine is it even has good support for transitions and such. So what I could do is say, alright, let's also, when it shows and hides, let's add some transitions to the opacity. And I'm gonna set the duration to 300 milliseconds, or let's do it much longer just so you can see it. Alright, one more time. 1, 2, 3. And now it's gonna start.

or let's do it much longer just so you can see it. Alright, one more time. 1, 2, 3. And now it's gonna start. There we go. Now it starts fading out. Generally I find 300 milliseconds is pretty good. You get the idea. And you know what, everything we covered here is like 85% of what you need to know. Uh, super powerful and super easy to know. So let's bring back our session wrapper, return our transition, and now we have our flash component.

So let's bring back our session wrapper, return our transition, and now we have our flash component. Cool, nice and easy, just how I like it. Alright, so in the next episode we'll keep going.