Flask Tutorial #1 - How to Make Websites with Python

Key Takeaways

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 d Jango 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 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 in side some directories called flask tutorial then I've created one blank python file here I just called it tutorial 1. piy and now we're ready to go and start creating the web page 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 equals flask and then in here we're just going to put _ maincore 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 I believe it's uncore name uncore equals uncore maincore uncore then app.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 going to do is actually Define the pages that will be on on our website 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 and 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. root so put the at sign then app. root 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 Tech with.net and then you say slash and then whatever the page is that you want to go to in this case if we put slash that will mean that whenever we go 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 slome and when we do something like that then that means if we type slome 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 tutorial 1. Pi give it a second ohore 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 saycore uncore name underscore uncore 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 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 put just notice though if I try to go to you know slome we do get an error we saying not found this is just our default 404 you know like not found page because we haven't defined a rout for where slome 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 uh 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 hello name and just note if you're not using python 36 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. root 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 beside 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 um our web page and you guys will see how this works so let's restart this you can stop this by hitting contrl 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 slome 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 going to start by doing is importing up here called redirect pretty straightforward and I'm also going to import another function called URL 4 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 administ 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. root we'll put a decorator here we'll just start from the top this time and I'll put slash admin that's going to be our route and then here what I'm going to do is say Define 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 UR URL 4 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 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 but I'll just show you that if I do this and I spin my server up again so Python tutorial one go here we'll refresh this page at SL 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 um actually well 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 than 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 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