WEBVTT 00:00.140 --> 00:03.800 Now let's go back to this contact post php file. 00:03.800 --> 00:10.280 That's a route handler that handles the submission of this form on the right. 00:10.850 --> 00:15.170 Let's see how does it look like when we submit the form. 00:15.200 --> 00:20.240 So I'm typing anything and I'm gonna just zoom in. 00:20.330 --> 00:22.010 So you see this message. 00:22.010 --> 00:27.980 And we have to say and agree that that's not the best user experience. 00:27.980 --> 00:31.910 We are basically leaving the user in a limbo. 00:31.940 --> 00:34.910 He has no clue what to do next. 00:34.910 --> 00:36.470 There is no button. 00:36.470 --> 00:38.660 The page looks different. 00:38.750 --> 00:41.450 This is not how you do things. 00:41.840 --> 00:49.250 This should either be a button to redirect to another page or automatic redirect. 00:49.250 --> 00:59.210 Or even better, we should just redirect to the page which displays this messages so they can see their 00:59.210 --> 01:00.800 message right away. 01:00.820 --> 01:10.300 Plus, there should be some message that is clearly visible, and it can be distinct from the rest of 01:10.300 --> 01:19.840 the page that either something was successful like this case right here, or that there was an error. 01:20.110 --> 01:25.480 There is no point in having a separate page with a message. 01:25.480 --> 01:29.650 So this is sometimes called flash messages. 01:29.680 --> 01:37.270 It's a message that you display only once for the next request on the next page, and after it is being 01:37.270 --> 01:40.960 read by the user, it just disappears forever. 01:41.650 --> 01:50.530 We're going to be implementing flash messages in this video using sessions, and let's get to it right 01:50.530 --> 01:51.280 away. 01:52.300 --> 01:59.080 So first let's maximize the coding space because first we need to implement some logic. 01:59.140 --> 02:06.160 I think we can just add another file inside the includes folder and call it flash. 02:07.300 --> 02:11.470 I don't think it belongs to any of the other categories. 02:12.100 --> 02:14.500 This would be a PHP file. 02:15.460 --> 02:21.940 So first let's add a function that will add a flash message. 02:23.320 --> 02:30.970 And let's keep the type we need to separate between the success messages and errors, because later 02:30.970 --> 02:36.070 on we need proper colors to display those messages. 02:36.070 --> 02:39.850 And it needs to be clear to the user what has happened. 02:40.930 --> 02:48.790 Then another argument here is the actual message that void nothing to return from it. 02:48.790 --> 02:54.970 And remember this super global session variable. 02:55.750 --> 03:00.010 So we're going to add a flash entry into it. 03:00.220 --> 03:07.050 Then another type and we're gonna add the message. 03:11.790 --> 03:16.230 Now, you might want to add more than one message of a specific type. 03:16.260 --> 03:21.000 I just think that for this app, it doesn't make any sense. 03:21.180 --> 03:27.750 So after we add a flash message, next up we need a way to read those flash messages. 03:27.750 --> 03:31.650 This would be called get flash messages. 03:31.680 --> 03:33.810 It returns an array. 03:34.770 --> 03:44.100 So we are fetching those messages from the super global dot session flash. 03:45.060 --> 03:48.900 If there are none, we return an empty array. 03:49.650 --> 03:51.720 Next, an important part. 03:51.720 --> 03:58.890 If you read the flash messages and you do when you call this function, and we assume that they were 03:58.890 --> 04:01.310 displayed someplace, we remove removed them. 04:01.310 --> 04:09.890 For that, we use unset to remove an element from the session array that is under the flash key. 04:10.130 --> 04:19.430 It's important that we will remove all the messages as in here in this file, we have no way to verify 04:19.430 --> 04:21.200 if they were read or not. 04:21.200 --> 04:25.490 And finally we just return the messages variable. 04:26.480 --> 04:28.790 Now at this point let's jump to bootstrap. 04:28.790 --> 04:30.680 We need to include this file. 04:30.680 --> 04:34.910 So let's add an include for flash PHP. 04:37.100 --> 04:44.960 And another thing that we have to do is obviously those messages need to be displayed someplace. 04:44.960 --> 04:48.170 I think the best place is in the header. 04:49.580 --> 04:59.600 Let me scroll all the way to the bottom, and I think we should display them right after the navigation 04:59.600 --> 05:00.590 menu. 05:00.680 --> 05:05.120 So right below the menu before the H1 element. 05:05.120 --> 05:09.470 So this is right here right under the main element. 05:09.470 --> 05:13.640 But I think that we shouldn't do that inside the header. 05:13.670 --> 05:17.660 The better way is to create a partial template. 05:17.720 --> 05:27.500 We can create another file called just Flashfxp and UN convention in many frameworks where you have 05:27.500 --> 05:29.090 partial templates. 05:29.090 --> 05:37.970 So templates that are not rendered for a root but are reused in other views is to start the file name 05:37.970 --> 05:39.440 with underscore. 05:39.470 --> 05:44.600 That way we know this is not something that should be used on its own. 05:44.600 --> 05:47.750 It's always part of something else. 05:48.500 --> 05:53.570 Now in the header I can just require this file. 05:53.570 --> 06:07.690 So I do PHP require once And since those files are in the same directory, I can do it this way. 06:08.410 --> 06:09.370 That's it. 06:09.400 --> 06:14.890 Now another thing in this file the header is some styles. 06:14.890 --> 06:22.540 So we're not going to be writing CSS styles I'm gonna just paste them and you can grab them from the 06:22.540 --> 06:26.620 link under this video with all the code changes. 06:28.990 --> 06:33.430 So we've got four CSS classes that need to be added. 06:33.460 --> 06:36.820 I'm just gonna reformat that and that's it. 06:36.850 --> 06:37.480 Okay. 06:37.510 --> 06:43.090 Now we can close this file and let's go back to displaying the messages. 06:44.860 --> 06:50.890 The first thing to do in this flash partial template is to grab the messages. 06:52.870 --> 07:00.550 We will create a messages variable and call the Get flash messages function, which as you can remember, 07:00.550 --> 07:04.810 will also remove the messages from session if there are any. 07:05.680 --> 07:13.390 Next up, we only want to display those messages if messages variable is not empty. 07:13.600 --> 07:22.420 That's why we add an if statement that checks if empty returns false, which means it's not empty for 07:22.450 --> 07:24.460 messages variable. 07:25.150 --> 07:29.440 We will display this specific block. 07:31.630 --> 07:37.570 And inside I'm adding a div element that's a container for the messages. 07:37.570 --> 07:42.760 And the class here we're going to use flash messages. 07:42.850 --> 07:49.810 So this is coming from from the list of those CSS classes that I've asked you to paste. 07:49.810 --> 07:52.900 And you don't really have to do that. 07:52.900 --> 07:59.020 This is just styling those flash messages the way that we can distinguish them visually. 07:59.020 --> 08:01.570 So you don't really have to worry about that. 08:02.230 --> 08:09.190 And now we just need to go over every single message. 08:09.190 --> 08:12.790 That's why we do for each messages us. 08:12.790 --> 08:14.620 And we've got a key here. 08:14.620 --> 08:17.890 Remember that there is always a type. 08:19.630 --> 08:25.090 So we do type and message colon. 08:26.590 --> 08:28.060 We need to close this. 08:28.060 --> 08:30.400 So we do end for each. 08:33.820 --> 08:41.740 And then inside let's add a div element with another class. 08:41.740 --> 08:44.920 This is flash message. 08:50.200 --> 08:54.640 And additional class that is of the specific type. 08:54.640 --> 08:58.870 So here we need to output something from PHP. 08:58.900 --> 09:06.260 We're gonna use HTML Special chars to output the type now inside it. 09:06.290 --> 09:10.400 We are just left with outputting the actual message. 09:10.730 --> 09:17.750 Also escaping it with HTML special chars just to be safe. 09:18.200 --> 09:22.160 So this is a message. 09:24.650 --> 09:26.720 And we also want to escape quotes. 09:26.720 --> 09:28.700 And we are using Unicode. 09:31.760 --> 09:36.080 And also I am missing a hyphen here in the class name. 09:36.080 --> 09:38.570 So this is flash hyphen. 09:38.570 --> 09:43.640 And then whatever is being outputted as a type of the flash message. 09:43.670 --> 09:48.620 Now also notice that this is rendered very strangely in my editor. 09:48.650 --> 09:51.170 This is actually a hyphen. 09:51.650 --> 09:58.460 And this character more than or start of the PHP tag. 09:58.640 --> 10:00.740 So just place together. 10:00.770 --> 10:02.870 This is how my editor renders it. 10:02.870 --> 10:06.140 That's not what you should be looking for. 10:06.620 --> 10:14.840 Anyway, save the changes and we should move out of this file because we need to add some messages to 10:14.870 --> 10:15.920 be displayed. 10:17.090 --> 10:29.030 That means we need to jump back here and to this contact post file and instead call add flash message. 10:30.650 --> 10:33.380 So the type would be success. 10:33.380 --> 10:40.070 And I'm just gonna move this message into a flash message. 10:40.580 --> 10:45.530 We can remove this and this as well. 10:47.780 --> 10:58.100 Now in case of an error, I think we can also add a flash message saying exactly the same as whatever 10:58.100 --> 10:59.030 was here. 10:59.120 --> 11:04.090 So the same server error just displayed as a flash message. 11:04.090 --> 11:06.910 Just make sure the type is error. 11:07.270 --> 11:13.060 Now in both cases we should redirect to another place. 11:13.090 --> 11:23.410 Now in PHP to redirect the user, you're gonna be sending a header called location with some URL. 11:23.440 --> 11:27.370 In our case, this is probably guestbook. 11:27.370 --> 11:29.680 That would be the best idea. 11:31.420 --> 11:33.100 So this is how it's done. 11:33.100 --> 11:39.340 You just return a header HTTP header that's called location with the value of the URL. 11:39.370 --> 11:43.540 And you stop the execution at this point. 11:43.630 --> 11:47.350 And I also think that this should be a function. 11:47.350 --> 11:51.850 So let's move it to router because because it is about routing. 11:52.180 --> 12:01.000 And let's just call it redirect because this would be a handy little function. 12:01.020 --> 12:08.190 And let's just accept the URI and it is void. 12:08.430 --> 12:10.410 Doesn't return anything. 12:13.980 --> 12:18.660 And let's make sure we use this URI right here. 12:19.350 --> 12:19.620 Okay. 12:19.620 --> 12:28.650 Going back and let's do redirect to forward slash guest book. 12:30.300 --> 12:31.320 You know what? 12:31.320 --> 12:33.630 This is actually not correct. 12:33.660 --> 12:38.250 We need to redirect here as well if there is a success. 12:38.250 --> 12:44.220 Because otherwise this flash message the error one would be always added. 12:44.340 --> 12:44.880 Okay. 12:44.910 --> 12:47.880 So we need to call redirect in two places. 12:47.880 --> 12:48.990 No big deal. 12:49.470 --> 12:56.640 And one more thing that I've noticed I haven't closed this attribute. 12:56.640 --> 12:59.580 So we need double quotes here as well. 12:59.940 --> 13:02.340 Now it should be fine. 13:02.340 --> 13:03.720 Let's close that. 13:03.720 --> 13:05.640 Let's jump to the form. 13:05.700 --> 13:10.830 Let me add any message and send it. 13:10.950 --> 13:14.340 Here's how the flash message looks like. 13:14.340 --> 13:17.130 It's inserted on the guest book. 13:17.160 --> 13:20.550 I can see here that there is my message. 13:20.550 --> 13:26.400 This confirms that it was successful, but if I go to any other page, it disappears. 13:26.670 --> 13:32.460 This is a one time flash message only available for the next request. 13:32.850 --> 13:36.780 So how do we test the case when something goes wrong? 13:36.780 --> 13:37.620 It's easy. 13:37.620 --> 13:38.400 Temporary. 13:38.400 --> 13:40.320 Let me just add a false here. 13:40.320 --> 13:42.630 So this never runs. 13:42.630 --> 13:46.560 So we are forced to run this code. 13:47.850 --> 13:51.360 Now let me type anything send a message. 13:51.360 --> 13:51.930 There it is. 13:51.930 --> 13:58.320 It's also a one time message that will disappear next time we do another request okay. 13:58.350 --> 14:02.340 So let's bring back the functionality and we are done.