Creating Routes in Flask

Next up, Lab 00. So in some cases, after most files and exercises, I'm going to give you a little lab—something to try 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 server00.py, do a "Save As, " and call the new file server00-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." Then we're going to go to the home route—the one with the slash—and link to the about route so that when you load the home page, you'll have a link to click that takes you to the About Me page and hits 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—maybe you don't feel comfortable with HTML or don't even know how to write a link or anything like that. You can just 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, struggle, and can't do it, when you do see the solution, I think it'll click a little better if you've been wrestling with it yourself first.

OK, so let's do the solution now to Lab 00. So from server00.py, do a Save As and call the new file server00-lab.py. We're not going to write the file from scratch—we’ll just leave the index route already set up, and the import of Flask is already done, as is the instantiation of the Flask app. 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 stray character here or something.

OK, cool. In server00-lab.py, the file we just made, let's make a new route called about at /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 and paste it, but I would suggest at this stage of the game it's probably better to type it.

We'll say @app.route('/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. The about function 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 they don’t have 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 it an <h1>, 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='/about'>. This is a local URL.

We’ve got double quotes wrapping, so we should use 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. </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 /about, which is this route.

When you go to the home route, you'll see a message, and under that a link, which, when clicked, 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 server00-lab.py. The server is server00.py, 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 the lab server, by typing Python server00-lab.py, 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 have to do is go to the website and refresh. You don't have to go to another webpage, 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 clicked, 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 that the homepage doesn't have—the /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 close this terminal—just kill the 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 the server lab.

So remember—up arrow to repeat your last command. You can't just 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, wait—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, we made it. Pat on the back.

High five, everybody. Boom. We’re going here.

So that’s the end of the lab.