Flask Tutorial #1 - How to Make Websites with Python

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 micro web 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 gonna 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 gonna notice quickly that a lot of things that happen in flask are much more simple and make a lot more sense especially if you're not an expert in Python or with Django 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 of 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 all right so let's actually go ahead to start building our first web page or website with flask you're gonna notice this is gonna go very quickly and what I'm gonna 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 would be able to figure it out on your own so what we're gonna do is just start by creating some folder now I'm ink up my command prompt window here we do need to actually get into this so just open up CMD from wherever you're gonna open that from if you're on Windows if you're on Mac you're gonna go terminal Linux terminal as well what we're gonna 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 try to leave a card to it someone remind me if I forget in one of the corners it 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 that's just good practice so I figured I'd mention it and next you probably are gonna 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 this tutorial 1 dot PI and now we're ready to go and start creating the web page so the first thing we're gonna do is actually just import flask from flask and I'll zoom in here so what am I saying from flask from + import flask so from flask import flask the next thing we're gonna do is actually create an instance of a flask web application now to do this we're gonna say app equals flask and then in here we're just gonna put underscore underscore main underscore underscore now what we're gonna do is actually run this app so I'll show you how to do that we're gonna say if I believe it's under scratch for a name underscore underscore equals underscore main underscore underscore then app dot run now this is pretty much all we need to do with the exception of one thing to actually start a website so this is how easy it really is to create a new project and get a website running now what we're gonna do is actually define the pages that will be on our website so the first page that I'm gonna create is a home page now to do this you're gonna make a function and this function is gonna return what's gonna be displayed on the page so I'm going to fine 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 home page 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 gonna 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 and 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 it below in all capitals 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 right now flask actually doesn't know where we should be going to get to this page so we need to give it a route now to do this we're actually gonna decorate this function with app dot root so put the @ sign then app dot root and inside here we're gonna 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 tech with Tim net and then you say slash and then whatever the page is the you want to go to in this case if we put slash that will mean that whenever we go to our default domain whatever that might be it will automatically send us this home page although we can also you know put something like slash home and when we do something like that then that means if we type slash home we will go to the home page so in this case I'm just gonna leave it as slash for now and now I'm gonna show you how to run the application and we'll have a look at what we've actually just made so from our command prompt window or whatever kind of interpreter you want to use to run this I mean if you're doing this an ideally you can just press f5 but I'm just gonna run Python tutorial 1 dot pi give it a second o underscore R square main is not defined what is this oops I believe this would actually be named up here my apologies guys so up here this has to say underscore underscore name underscore underscore silly mistake let me make sure I actually save this 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 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 so what we're gonna do is copy the URL that's here it should be the same for you so 127.0.0.1 at port 5,000 that's just the default port that this runs on we're gonna copy that we're gonna 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 in line 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 slash home we do get an error we're saying not found is just our default 404 you know like not found page because we haven't defined a route for where slash home should go so let me show you a few more things with this routing 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 gonna do is simply return I'm actually gonna add a parameter in here called name we're gonna return and I'll just do an F string here 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 gonna do is decorate the scan with app dot root and this time I'm gonna 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 beside in between tags like this this means that whenever I type something it's actually gonna 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 gonna 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 will actually display whatever name it is I typed in this URL bar as our webpage and you guys will see how this works so let's restart this you can stop this by hitting ctrl C we might have to hit it a few times it's usually what happens to me I'm gonna run this now give it a second go back to my webpage and now when I type slash 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 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 gonna 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 gonna do is say you know app dog root will put a decorator here we'll just start from the top this time and I'll put slash admin that's gonna be our root and then here what I'm gonna do is say define admin I'll just put you know anything there what I'm gonna 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 gonna do is literally type redirect once you have it imported and then type URL for and inside here you're gonna put the name of your function inside of strings so you might think that it would make sense to do something like slash right 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 slash 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 I'll just show you that if I do this and I spin my server up again so python tutorial 1 go here we'll refresh this page at slash admin you can see it redirects us directly back to that home page 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 we'll just call it like a equals false and then you could say something like if a so if that's true maybe we return a different response then if you know we're not the administrative user 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 you 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 will 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 because 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

Channel: Tech With Tim

Views: 1,107,703

Keywords: tech with tim, flask python, flask tutorial web development with python, flask python tutorial, flask python web app, how to make websites with python, flask tutorial python, python flask tutorial, python flask tutorial for beginners

Id: mqhxxeeTbu0

Length: 10min 36sec (636 seconds)

Published: Sun Oct 27 2019