1 00:00:00,380 --> 00:00:04,259 When a user navigates to a page that doesn't exist on your website, 2 00:00:04,259 --> 00:00:07,740 they're typically shown an error page, 404 not found. 3 00:00:09,580 --> 00:00:11,730 Here's a few great 404 pages. 4 00:00:12,740 --> 00:00:14,901 This is also a popular area for 5 00:00:14,901 --> 00:00:19,141 a website to show off their personality and have some fun. 6 00:00:19,141 --> 00:00:24,534 On our website when you navigate to a page that doesn't exist, 7 00:00:24,534 --> 00:00:29,300 you get this plain black and white Not Found page. 8 00:00:29,300 --> 00:00:33,767 It lets the user know what happened, but it's not the most friendly of pages, and 9 00:00:33,767 --> 00:00:35,790 it doesn't match our color scheme. 10 00:00:36,830 --> 00:00:41,548 Instead, let's create our own 404 page to show the user. 11 00:00:41,548 --> 00:00:46,706 In app.py, scroll down here to the bottom, 12 00:00:46,706 --> 00:00:51,460 and let's add an @app.errorhandler, 13 00:00:51,460 --> 00:00:55,960 and inside we're gonna parse 404. 14 00:00:55,960 --> 00:00:59,940 And let's create a function and let's call it not_found. 15 00:01:01,840 --> 00:01:04,740 We're going to get an error message when this happens. 16 00:01:06,560 --> 00:01:10,930 And inside, we're going to return a render_template. 17 00:01:10,930 --> 00:01:15,655 And we're gonna create this template here in a second 404.html. 18 00:01:15,655 --> 00:01:18,960 And let's pass in the error as a message. 19 00:01:18,960 --> 00:01:23,374 And then here at the end, outside of this render template, 20 00:01:23,374 --> 00:01:28,143 we're also going to send comma 404 to make sure the browser knows 21 00:01:28,143 --> 00:01:31,610 this is a 404 error that we're sending in. 22 00:01:31,610 --> 00:01:33,710 Now we need to create the 404 template. 23 00:01:36,390 --> 00:01:40,353 New File 404.html. 24 00:01:40,353 --> 00:01:44,864 It should essentially have the same pieces as the beginning of our pet.html. 25 00:01:44,864 --> 00:01:51,570 So I'm going to copy these out, paste and let me save app.py before I forget. 26 00:01:52,820 --> 00:01:54,113 And then we'll need end. 27 00:01:57,631 --> 00:02:00,780 Endblock, awesome. 28 00:02:00,780 --> 00:02:05,084 And then in the teacher's notes flow is actually the code that goes inside of this 29 00:02:05,084 --> 00:02:06,450 block content. 30 00:02:06,450 --> 00:02:07,938 Go ahead and copy and paste it now. 31 00:02:11,368 --> 00:02:16,680 I'm also going to tab it over and hit Save. 32 00:02:18,350 --> 00:02:22,660 Okay, open up our website and let's give it a hard refresh. 33 00:02:24,220 --> 00:02:26,580 And there's our 404 error page. 34 00:02:28,030 --> 00:02:34,979 I want you to use this page as your guinea pig, if you're up for the challenge. 35 00:02:34,979 --> 00:02:37,971 Remove my ID tag, open up the CSS file and 36 00:02:37,971 --> 00:02:42,818 scroll all the way to the bottom and start adding your own styles. 37 00:02:42,818 --> 00:02:45,266 Practice adding IDs and classes, and 38 00:02:45,266 --> 00:02:48,490 then access them in the CSS file to style the page. 39 00:02:49,580 --> 00:02:52,750 You can also change out the HTML of the page as well. 40 00:02:52,750 --> 00:02:54,840 This is a great way to practice your skills. 41 00:02:55,970 --> 00:02:59,660 Now that we have a 404 page, let's put it to use. 42 00:02:59,660 --> 00:03:03,345 If a user tries to access a pet that doesn't exist, 43 00:03:03,345 --> 00:03:07,160 we need to use our new 404 error page. 44 00:03:07,160 --> 00:03:08,410 Let's take a look at the docs. 45 00:03:10,370 --> 00:03:16,754 You can see we can use instead of get, we can use get_or_404. 46 00:03:16,754 --> 00:03:19,775 So anytime we use get if it doesn't find a pet, 47 00:03:19,775 --> 00:03:22,650 it will automatically send a 404 error. 48 00:03:23,680 --> 00:03:24,680 So let's try that out. 49 00:03:24,680 --> 00:03:30,703 Let's switch out our delete to get_or_404. 50 00:03:30,703 --> 00:03:38,265 And let's scroll up, get_or_404. 51 00:03:42,443 --> 00:03:46,379 And then that is a different one, it's Pet.query.all, 52 00:03:46,379 --> 00:03:48,987 so we'll leave that one for right now. 53 00:03:52,721 --> 00:03:55,810 Okay, now let's test this out in our browser. 54 00:03:57,030 --> 00:04:01,690 So if we go to Blanca, Blanca is pet two, and we find it. 55 00:04:04,160 --> 00:04:08,720 If I try to do pet 20, I get the error page, perfect. 56 00:04:10,930 --> 00:04:14,005 Now, let's also try it with the edit page. 57 00:04:16,301 --> 00:04:20,626 Edit, let's do edit 20, 404 and 58 00:04:20,626 --> 00:04:24,830 let's try delete, 404 awesome. 59 00:04:27,330 --> 00:04:29,340 You've learned a lot in this course. 60 00:04:29,340 --> 00:04:31,800 So now it's time to practice on your own. 61 00:04:31,800 --> 00:04:36,180 Check the teacher's notes for some ideas for taking this website further. 62 00:04:36,180 --> 00:04:40,428 And some ideas for other websites you could create on your own. 63 00:04:40,428 --> 00:04:44,430 Way to tackle flask was SQLAlchemy basics Pythonistas.