Made withFlaskClip

Flask Tutorial #1 - How to Make Websites with Python

T

Tech With Tim

Creator on the Flask channel

Watch on YouTube ↗

1.3M viewsOct 27, 201910:36 runtime

Learn the fundamentals of web development with Python using Flask, a powerful micro web framework. This tutorial provides a step-by-step guide to building your first website, from installation and project setup to creating and running a basic web application. Discover how to…

Chapters

#flask#clip#backend

Introduction to Flask

Flask is a micro web framework for Python. It is designed to be simple, lightweight, and easy to get started with, making it a great choice for beginners or for building smaller applications and APIs.

vs. Django: Flask is more minimalistic than a full-fledged framework like Django. It doesn't include built-in features like a user authentication system or a database ORM, but this also means less boilerplate and more flexibility.

Project Setup

Install Flask: Open your terminal or command prompt and run the following command:
```
pip install flask
```
Project Structure: Create a dedicated folder for your project and a single Python file to start (e.g., app.py).

Tip
It's a best practice to run your Flask projects inside a virtual environment to manage dependencies specific to that project.

Core Application Structure

The minimal code required to get a Flask application running involves three key steps: importing Flask, creating an application instance, and defining the run condition.

from flask import Flask

# 1. Create an application instance
app = Flask(__name__)

# 2. Define a route and view function
@app.route("/")
def home():
    return "<h1>Hello, World!</h1>"

# 3. Run the application
if __name__ == "__main__":
    app.run()

Note
The development server runs by default at http://127.0.0.1:5000. The warning about not using it in production is because it's not built for performance or security under high load.

Routing and View Functions

Routing: The @app.route("/path") decorator is used to bind a URL path to a specific Python function.
View Functions: A view function is the Python function that is executed when its associated route is requested. It must return a response, which can be a simple string or HTML.

Dynamic Routing

You can create dynamic URLs by adding variable sections to the path. This allows one view function to handle multiple pages.

Syntax: Use angle brackets to define a variable in the route: @app.route("/user/<name>").
Usage: The variable (e.g., name) is passed as a keyword argument to the view function.

@app.route("/<name>")
def user(name):
    return f"<h1>Hello, {name}!</h1>"

Page Redirection

To programmatically send a user from one page to another, you use the redirect and url_for functions.

Import: from flask import redirect, url_for
Usage: The redirect() function takes the destination URL as an argument. It's best practice to generate this URL using url_for().

Important
When using url_for(), you pass the name of the view function (as a string), not the URL path. For example, use url_for('home') instead of url_for('/').

@app.route("/admin")
def admin():
    # This will redirect the user to the page handled by the 'home' function.
    return redirect(url_for("home"))

What is Flask?

Hello everyone and welcome to a brand new series on flask in Python. Now for those of you that aren't aware, flask is a microweb framework for building websites with python. It's actually typically used as kind of a back end and then another front end is connected to it using something called a restful API.

But in this video, in this series, what we're going to do is just go through the basics of flask, understand how to use it, how to make websites, and how to quickly kind of do development on the web. If you're comparing this to something like Django, then you're going to notice quickly that a lot of things that happen in Flash are much more simple and make a lot more sense, especially if you're not an expert in python or with Jango and flask itself. So this is more of a micro framework rather than a full-fledged web framework, and that also means that it doesn't include a lot of the nice tools that come with Django like user authentication and database connectivity and all those kind of things. So just want to give you guys a quick preface here. You guys will understand as we go through this and you'll see how quickly we can actually develop applications with flask.

Project Setup and Installation

All right, so let's actually go ahead and start building our first web page or website with flask. You're going to notice this is going to go very quickly and what I'm going to do is just kind of build out the page and then walk you through exactly how all of these different things actually operate, although I'm sure most of you guys will be able to figure it out on your own.

So what we're going to do is just start by creating some folder. Now I'm in my command prompt window here. We do need to actually get into this, so just open up CMD from wherever you're going to open that from if you're on Windows. If you're on Mac, you're going to go terminal, Linux terminal as well. What we're going to start by doing, sorry, is actually installing flask. So we can install this with a very basic pip command, just pip install flask. If for some reason your pip isn't working, I do have a video I'll try to leave a card to it, someone remind me if I forget, in one of the corners that kind of goes through how you can actually fix this and get it working.

Another Point here: I usually recommend that you install this in a virtual environment. Now you don't need to do this, and if you don't understand what this is, don't worry about it, but it's just good practice so I figured I'd mention it. And next, you probably going to want to put all your python files for this specific website in their own folder. So I've just created one on my desktop or not desktop, inside some directories called flask_tutorial. Then I've created one blank python file here, I just called it tutorial1.py, and now we're ready to go and start creating the web page.

Basic Application Structure

So the first thing we're going to do is actually just import flask from flask and I'll zoom in here. So what am I saying? From flask, from flask import Flask. So from flask import Flask. The next thing we're going to do is actually create an instance of a flask web application. Now to do this, we're going to say app = Flask() and then in here we're just going to put __name__.

Now what we're going to do is actually run this app, so I'll show you how to do that. We're going to say if __name__ == "__main__": then app.run(). Now this is pretty much all we need to do with the exception of one thing to actually start a website.

Creating and Running a Homepage

So the first page I'm going to create is a homepage. Now to do this, you're going to make a function and this function is going to return what's going to be displayed on the page. So I'm going to Define this as home. You can call this whatever you want but usually I like to name my function something that represent what I'm actually going to be displaying, so in this case the homepage. And then from inside these functions you're just going to return for our simple cases right now, and we'll get more advanced later with HTML files, we're going to return some inline HTML. Now all that means is you can literally just write HTML in this string or you can just write some text and that will be displayed as well. So I could write the text, you know, "Hello, this is the main page," like that. But I can also add in you know stuff like I could add a link, I could add like an H1 tag. So let's actually do that and I'll show you what that looks like. I'll just put HELLO in all capital so we can separate that. And we can add inline HTML when we're returning it from a function.

Now what we need to do next, and this is actually the last step, is define how we can access this specific page. So so right now flask actually doesn't know where we should be going to get to this page, so we need to give it a root. Now to do this, we're actually going to decorate this function with app.route. So put the @ sign then app.route() and inside here we're going to define the path that we want to use to get to this function. So you guys know in the URLs when you have you know the whatever the domain name is, so for example techwithtim.net, and then you say slash and then whatever the page is that you want to go to. In this case if we put / that will mean that whenever we go to our default domain whatever that might be, it will automatically send us to this homepage. Although we can also you know put something like /home and when we do something like that then that means if we type /home we will go to the homepage.

So in this case I'm just going to leave it as slash for now and now I'm going to show you how to run the application and we'll have a look at what we've actually just made. So from our Command prop window or whatever kind of interpreter you want to use to run this, I mean if you're doing this in idle you can just press F5, but I'm just going to run python tutorial1.py. Give it a second. Oh, main is not defined. What is this? Oops, I believe this should actually be name up here. My apologies guys. So up here this has to say __name__. Silly mistake. Let me make sure I actually save this. Uh, and now run that and we should be good to go. Sweet. So now we get this output here. We're saying serving flask app tutorial one, lazy loading, environment production, um and then it's giving us a little warning here saying don't use the development server in a production environment. That's fine, we don't need to worry about that for right now.

Creating Dynamic Routes

So what we're going to do is copy the URL that's here. It should be the same for you, so 127.0.0.1 at Port 5000. That's just the default Port that this runs on. We're going to copy that, we're going to go to a web browser, then we're going to paste that URL in there and hit enter. Now we get this output that says "Hello this is the main page" and then we get HELLO. So you can see that that inline HTML that I wrote here saying, you know, H1 HELLO actually is working and it's serving us this page that's giving us that kind of output. Just notice though if I try to go to, you know, /home, we do get an error we're saying not found. This is just our default 404, you know, like not found page because we haven't defined a rout for where /home should go.

So let me show you a few more things with this rooting and then we'll actually kind of end the video there and get into some more stuff. So I want to create another page now. In this case, what I'm going to do is actually define a page and we'll just call this like user or something like that. Now in here what we're going to do is simply return... I'm actually going to add a parameter in here called name. We're going to return, and I'll just do an F string here, f"Hello {name}". And just note, if you're not using python 3.6 you won't be able to do that, but I'm sure you can figure out how to actually get name in this string. So we'll do Hello {name}. And then what I'm going to do is decorate this again with @app.route() and this time I'm going to do something that's a little bit different to show you some cool things we can do here. If I actually decide to put some things in between tags like this, this means that whenever I type something it's actually grab that value and pass it to my function as a parameter, which means I can do something like <name> inside of here. And what's actually going to happen is when I type something, I don't have to type name, I can type anything I want, it will pass that string of text to this parameter user. So for this function and then we'll actually display whatever name it is I typed in this URL bar as our web page and you guys will see how this works.

So let's restart this. You can stop this by hitting control C, we might have to hit it a few times. It's usually what happens to me. I'm going to run this now, give it a second, go back to my web page and now when I type /home and refresh we can see we get Hello home. So the basic principle of this is, you know, if you put little tags like this, so the greater than sign and the less than sign, and you put some variable name inside there, you can actually pass it as a parameter which allows you to display you know different information on the screen or get for example maybe a post ID or something like that.

Redirecting Users with `url_for`

All right, so I'm just going to show you guys one last thing, and this is how we can actually redirect different pages from our code. So right now if we want to get to a different page, what we need to do is type that actual page. But maybe sometimes you know user goes to a page, maybe they're not supposed to be there, they're not authenticated, we need to redirect them. Well how do we do that?

Well what I'm actually going to start by doing is importing up here called redirect, pretty straightforward, and I'm also going to import another function called url_for. Now these two are going to allow me to actually return a redirect from a specific function. So let's do a quick example here, and maybe we have an administrator page that can only be accessed by someone who's signed in and an admin. What I'm going to do is say, you know, @app.route(), we'll put a decorator here, we'll just start from the top this time and I'll put /admin. That's going to be our route. And then here what I'm going to do is say def admin():, I'll just put uh there, don't need to be anything there. What I'm going to return is actually a redirect. Now what a redirect does is just redirect you to a different page. So this is pretty easy to do. All you're going to do is literally type redirect once you have it imported and then type url_for. And inside here you're going to put the name of your function inside of strings. So you might think that it would make sense to do something like / as your redirect, but what we actually want to do is put the name of the function that we're going to be redirecting to. So rather than putting something just like /, which you know would usually represent home, we actually need to define the function and put the name of it, which is home. Same thing goes for user. I could put user as well, but actually there might be an issue with user because we don't have a name tag, so I won't talk about that for right now. But I'll just show you that if I do this and I spin my server up again, so python tutorial1.py, go here, we'll refresh this page at /admin, you can see it redirects us directly back to that homepage and we don't ever get anything from the admin page like that. Now this is great because you could technically return different things like you could create a variable up here that says you know admin... actually well, we'll just call it like a = False, and then you could say something like if a, so if that's true, maybe we return a different response than if, you know, we're not the administrative user.

Conclusion and What's Next

So that's kind of all I'm going to show you guys for right now. I just wanted to give you an idea of how basic this is to actually get something up and running and how you can create, you know, basic kind of user interfaces and web based stuff with flask for now. So we've kind of shown you know how to redirect, how to get some pages up, how to start the server, how to install flask. In the next videos we'll obviously get into some more complicated things, talk about how to render full HTML templates and how to do some more advanced things like that.

If you guys have anything that you specifically want to see for this tutorial, leave a comment down below and I'll try my best to incorporate it into the series. And with that being said, I will see you guys in the next video.