Custom 404 views with Slim 3
Playing
01. Custom 404 views with Slim 3

Episodes

0%
Your progress
  • Total: 8m
  • Played: 0m
  • Remaining: 8m
Join or sign in to track your progress

Transcript

00:00
Okay, so let's take a look at how we render a custom 404 page within Slim 3. Now you might be thinking, this is pretty basic stuff, but what we're going to be doing is taking the approach of looking at Slim's code and kind of working out from the inside
00:16
out how we might do this. So we're going to start off with a very simple Slim 3 project and we're going to start to look at how this all fits together. So first things first then, I have a really straightforward project set up.
00:32
Let's just very quickly go over this. I've got a bootstrap file. We're going to be writing our routes in here. I have one set up already.
00:38
I have Slim 3 views set up and you can find that all over in the Slim documentation. Of course, the code for this will be as part of the course download, so go ahead and download this and install the composer dependencies if you want to follow along. So apart from this, we have errors turned on just in case we get stuck anywhere and
01:00
over in my resources views folder, I just have a very simple view and we'll be creating another view in here for our 404 page. So let's take a look at what happens by default. Currently, I'm on the just forward slash route, but if we go over and just type something
01:16
in here, you can see we get page not found. So this is our 404 handler or our not found handler. Now if we pull up the console and go over to the network tab and just hit refresh, you can see that we do get a status of 404.
01:33
That's really important because we need to bear this in mind when we are setting up our custom 404. We want to make sure we return the same status. So over in Slim then, let's just start to have a look around.
01:48
So we know that Slim's main file is app.php. So if we head down here to the invoke method, this is where everything will get started. So if we go and find it, maybe just search for it here, so invoke, and I know that this is where the 404 or the not found is handled.
02:11
Now why would I know that? Well if we look at the top of the dependencies in here, you can see we have things like not found exception. So a not found exception does give a very good clue that this is something that's thrown
02:25
when a 404 occurs within your application. So let's just search this file for this. We can see here that this run method throws a not found exception. We can't see too much in here about the handling of this.
02:39
So if we just go and find again, we've got process and find again, eventually we end up at invoke. And what I would do is I'd scroll down here and the code kind of gives a clue. So you can see here we're dealing with routes and we're dealing with looking up routes.
02:55
And here we have an if statement. If this is found, so if this route is found. Now otherwise if the method is not allowed, so for example if you have a get route and you're trying to make a post request to it, that's not going to work.
03:09
So in this case this will throw a method not allowed exception. That's fine. We don't need to create a custom handler for that. But now after these checks, we come down here and we see throwing a not found exception,
03:23
passing in the request and the response which you will be familiar with within your route. So if we just head over to Bootstrap, you can see that we provide these here as well as arcs. So we know now that if this is the case, if there is no custom handler, we just throw
03:41
a not found exception. Now in this case, this is exactly what is happening here. Now otherwise we pull in a not found handler from our container, so that's really important. It gives us a clue as to how we can set this up.
03:56
And then we return that not found handler passing through the request and the response. So from this I can deduce that if I attach a not found handler to my container, this will be returned in this case rather than throwing an exception. So let's just set this up.
04:16
Over in Bootstrap we have our route just here which will obviously go in another file if you had some better structure. What I'm going to do is I'm going to set on my container, much like I've done with my view here, you can see that we're pulling in the container using the getContainer method
04:32
on Slim's app class. And here we just say not found handler. Great. So we know that this is going to be a closure because it's invoked.
04:42
And we know that we passed through request and response. So let's go and type in our request and our response that we get back. Okay. So in here let's just kill and just say 404 just so we can test that this is working.
04:56
Obviously we're not going to do this in reality. So you can see here that that does in fact change things. We're just killing the page and we're outputting the text 404. Now obviously if we head over to our network tab and refresh, we're getting a status of
05:09
200 okay which is not good. Obviously we've kind of achieved a custom 404 page technically but we're not sending the correct status. And that is really important that you send the correct status.
05:23
Otherwise something that's crawling your website isn't going to know that that page isn't found. Potentially it will get indexed by Google or whatever. Now let's just do a var dump on maybe response just to check that we've got that there. And you can see here we actually get an error.
05:42
Now I made a little bit of a mistake in passing these through to here because technically this is a container binding. So with container bindings we have our container through here. What we actually need to do is return a closure within here like so.
05:58
And then this will take in that request and that response like so. Now what we want to do is within here handle it. So we need our container because we're going to be using views to render our page. So here let's just do a die again and 404 and just make sure we're back to normal.
06:21
And I think I just forgot a semicolon. Okay so we're back to normal. We still have a status of 200 but we do have this 404 here. And now if we do a var dump perhaps on request for example or response we see that output
06:37
there. We have our slim HTTP response class or object. So now what we can do from this is we can use our other dependency, our other container binding, which is our view to render a view.
06:50
Of course we still need to handle the status which we'll do as well. So let's create a view for this. I'm going to structure this in a folder called errors and then I'm going to create a file called 404.twig and in here let's just say 404 not found.
07:07
And of course because this is a template you can then use twig templating to structure everything out properly and include maybe your site header and footer and however you want to do that. So now it's as simple as taking our container much like we do within a root so this view. This time we're directly accessing view from the container.
07:29
We're doing a render. We're passing in our response as we'd normally do and then of course our path to our template. So the reason that I've not returned this as we would usually see is because this method alone will actually render to the page.
07:46
So let's just take a look at that and you can see that this isn't actually working. So I can't really demonstrate this or at least I can't think of a really quick way to demonstrate this but either way all this is doing is it's going to output some kind of view. So in our case our custom 404.
08:03
So now what we want to do is actually return a response and we know that with Slim's response class we can use the with status method passing in a numeric status code. So in this case we can say return response with status 404. So now not only will our view be rendered but we will also respond with a 404 like so.
08:28
So now we have our custom 404 page which you can make look really pretty as an integrated part of your site and of course we now have the very essential 404 status code. So that's how quick and easy it is to get our custom 404 setup in the right way with Slim 3.

Episode summary

In this episode, we dive into customizing the 404 page for a Slim 3 application. Even though showing a pretty 404 page might seem simple, we go a bit deeper by actually looking at how Slim handles 404 responses under the hood. This way, you'll get a clearer understanding of what's happening when a page isn't found, and how you can take control.

We start with a basic Slim 3 setup and quickly review the project structure. You'll see where the default 404 comes from and how Slim decides when to trigger it. We poke around Slim's core code to uncover how the Not Found Handler works, which helps us figure out the right spot to add in our own handler.

Next, we set up a custom not found handler in our dependency container, showing the right way to return a response and send the correct HTTP status (which is super important for SEO and crawlers). You'll also see how to make a Twig template for your 404 page so your error page feels just like the rest of your site—header, footer, everything.

By the end, you'll have a custom-designed 404 page integrated into your Slim 3 project, complete with the proper status code. This process is super quick once you know where to look, and you'll finish up with a more professional and friendly error experience for your users.

Episode discussion

No comments, yet. Be the first!