Explore how to link Flask app routes and build simple navigation between pages. Learn step-by-step how to create new routes and connect them using HTML links.
Key Insights
- Create a new Flask route called "/about" by defining a function that returns a custom message displayed in the browser, illustrating the process of adding multiple routes within a Flask application.
- Implement basic HTML navigation by embedding an HTML anchor tag (
<a href='/about'>) on the homepage, enabling users to click through to the newly created About route. - Troubleshoot common Flask errors, such as server interruptions and route misconfigurations, by stopping and restarting the Flask server appropriately using terminal commands like Control+C.
Note: These materials offer prospective students a preview of how our classes are structured. Students enrolled in this course will receive access to the full set of materials, including video lectures, project-based assignments, and instructor feedback.
This is a lesson preview only. For the full lesson, purchase the course here.
Next up, Lab 00. So in some cases, after most files, after most exercises, I'm going to give you a little lab. So a thing to try to do on your own, just to see if you can do it.
And then you come back and I explain it to you. So what I would like you to do right now is read through these steps from server 00 pi to a save as and call the new file. Call the new file server 00 lab py.
We're going to define a new route. And we're going to have the route function return a message instead of hello world. And then we're going to go to the home route, the one with the slash and link to the about routes that when you load the home page, you'll have a link to click to take you to the about me page to hit the about route.
Nothing we talked about before, so it's going to be a little challenging. And if you don't want to tackle the challenge, that's perfectly OK because maybe you don't feel comfortable with HTML or you don't even know what a link you know, to write a link or anything like that. You can just let the let the recording continue and I will walk you right through it.
Otherwise, you can pause now and try to do these steps on your own. I would encourage you to give it a go because even if you stumble and struggle and can't do it. When you do see the solution, I think it'll click a little bit better if you've been wrestling with it yourself first.
OK, so let's do the solution now to lab00. So from server00.py do a save as and call the new file server00-lab.py. OK. We're not going to write the file from scratch, like this kind of thing.
We'll just leave and the index routes already set up and the importation of Flask is already done as is the instantiation of the Flask module. We're just going to add the new stuff for this about route that we're trying to do in the lab. We're going to say save as server00-lab.py. Boom.
Remove unusual line terminators. Like what? Detected. OK, fine.
Take them out. I don't know what they are. There's some like stray character here or something.
OK, cool. In server00-lab.py, the file we just made, let's make a new route called about as slash about. So it's basically a copy paste of index, except we're calling the route about.
And we're going to have a different function name. We're going to call our function about as well instead of index. Now you could copy paste it, but I would suggest at this stage of the game, probably better to type it.
We'll say at app.route slash about def about. And by the way, you don't have to name your functions the same as your route. It's just considered a good convention.
This could be called most anything. That could be the about one could be called whatever. But the route name and its function don't need to match, although quite often they will.
And it makes sense that they do, and it's less confusing if they do. But just know that it's not an error if you don't have them being the same name. We're going to have the function return a message.
Cool. We'll say return. Hi, my name is Brian McLean.
I am teaching you AI for Python. Cool. That's all.
Just text in the browser. I mean, we can make an h1 out of it, but we don't need to. Now we're going to link to the about route from the home route by adding the following little code snippet to the string, which is returned by the index function.
What that means is we have our h1. Now we're going to say a href equals slash about. This is a local URL.
We've got double quotes wrapping, so we should have single quotes inside for the href. Okay. So you have that, and then double quotes.
It doesn't want me to. Let me close that. Okay.
So here is our ... I'm going to put the link in an h2. It's going to be really small otherwise. Slash h2.
About. About me. Let's shorten this.
Hello world from Flask app home page. About me. We have an h1, and under it an h2, which is a slightly smaller header with an a tag, a link tag inside with an href, a destination address being slash about, which is this route.
When you go to the home route, you'll see a message, and under that a link, which when you click will hit this route, which will return an output. Let's make that an h2 also. This message.
Now we need to switch servers because we're in a lab file now, right? The server 00lab. So the server is 00, which is currently running. We have to stop it.
So the way to stop your server is control C in the terminal. Not command on a Mac. Control on a Mac.
And then you start the other server that you do want, which in our case is a lab server, by typing Python and then server 00-lab, the name of the file. And you should get that same success message with the same URL, which since it's the same destination, all you'll have to do is go to the website and refresh. And you don't have to go to another web page, right? It's a different server file, but the destination for the home is the same.
So you just have to refresh the server homepage where you should see an about me link, which when click should take you to the about route where you should see the about me message. And when you look at the browser URL at about me, when you get there, it should have this additional path information, right? That the homepage doesn't have the slash about part. Now let's stop the server.
Whoa. What is this? Oh, I think I threw the error when I was hitting enter and stuff. Okay.
Let's... Whoa. Control C. Ooh. Keyboard interrupt.
What's going on here? Okay. It doesn't like that. Return outside the function.
Oh, there's an error. Shouldn't be, though. Looks fine.
I'm not returning outside the function. Where's my return outside the function? Return outside the function. Line one.
What are you doing? What do you mean return outside the function? No. Not really. Huh.
Close the file. You know what I'm going to do? I'm going to delete... I'm going to trash this terminal. Just kill terminal.
Okay. I'm going to do control C. There we go. Okay.
I quit. Fine. I quit the app and now we should be okay.
If you have the same problem as me, you can click that little thing over there and just get rid of the terminal that was going. Okay. So what we need to do now is run server lab.
So remember up arrow to repeat your last command. You can't just come and click. We have to add the word lab after the zero.
We can't just click the cursor. We have to move the cursor, left arrow, over dash, whoops, dash lab. Lab.
Let's move over like that. Hit ENTER. Boom.
Okay. See little hiccups and hurdles. There you go.
Hello from Flask app homepage about me. Click and we made it. Oh, wow.
No, we didn't make it. The requested URL was not found on the server. Oh, sure.
Absolutely. Because I turned it off. There we go.
Let's turn it back on. Let's go back. There we go.
We're good. All right. Yay.
Yeah, made it. We made it. Pat on back.
High five, everybody. Boom. We're going here.
So that's the end of the lab.