Make A Python Website As Fast As Possible!

[Music] hello everybody and welcome to another youtube video so in today's video i'm going to show you how to make a website in python as fast as possible now we're going to be using the flask module which is a lightweight web framework for python this will show you pretty much everything you need to know to set up a relatively simple website however if you are looking for something more advanced specifically something that has a database integration i have a ton of other tutorials on this channel i'll throw them up on the screen and link them in the description so if you're feel free to check out those after i am going to talk extremely fast and with that said the first thing that you need to do is head over as fast as possible to check out our sponsor before we dive in i need to thank ltm designer for sponsoring this video ltm designer is the world's most trusted pcb design system that enables engineers to effortlessly connect with every facet of the electronics design process ltm designer has used 35 years of innovation and development to create a truly unifying design environment that makes it the most used pcb design solution on the market ltm designer provides an intuitive and powerful interface that lets you design pcbs rapidly while interacting and collaborating with your mechanical designers the interface provides a photo realistic 3d environment collaboration and synchronization with tools including solidworks ptc creo and autodesk inventor realistic rigid flex designs multi-board assembly and much more ltm designer is the most popular ecad tool and electronics design software and you can get started with it today for free by pressing the link in the description and registering for a free trial thanks again to ltm designer for sponsoring this video and now let's dive in alright so let's get going as i warned you before i'm going to go quite quickly so feel free to slow down the video or pause if i'm going too fast for you anyways i'm here in vs code i have python installed any version of python 3 will work for this and the first thing i'm going to do is pip install flask now if this command does not work for you i have two videos on my channel showing you how to fix it quickly though you can try python hyphen m pip install flask or python hyphen m pip3 install flask and then finally if that doesn't work you can try python 3 hyphen m pip install flask regardless i already have flask installed so now we can start setting up our directory structure so as i mentioned flask is a lightweight web framework for python this allows you to very quickly spin up a python website and it's super easy to do this so the first thing that we're going to do is create a file this file is going to be called app.pi let me just zoom in a bit here so you guys can see this we're then going to make another file called views.pi we're then going to make a folder called templates i'm going to make another folder not inside of there called static and then that's all we need for right now now we're going to go inside of our app.pi file this will be the entry point for our python website and we're going to initialize flask so i'm going to say from flask import flask with a capital f and then what i'm going to do is create my flask application whenever you create a flask app you say app equals flask and then underscore underscore name underscore underscore this initializes the application and then what you can do after this is run your app so i can say if underscore underscore name underscore underscore equals main then app.run debug equals true and this is actually all you need to start running your flask website now there is an optional argument here called port you can tell flask what port you want to run the website on by default it is port 8000 but you can change it to whatever you want or sorry by default it is port 5000 but you can change it to whatever in this case we'll go with 8 thousand now let's just see what happens if we run this so if i run my script notice that if we give it a second here it is running my flask application this is the url that we would go to to access the website we don't have any roots right now so we won't see anything but this is where the website will be live now the reason i put debug equals true here because this will make it so that whenever you change any files inside of your flask application it will automatically refresh the app so you don't have to keep re-running this script unless you have any syntax errors or for some reason the script crashes but regardless if we make any changes like if i just go like this and save notice says detected change restarts and we're good to go alright so now that we have initialized the app we need to start creating some views or some routes now roots are kind of the end point of the url so something like say slash home that we can actually visit on our website so i'm going to go to views.pi i'm going to say from flask import with a capital blueprint and what we need to do is define a view blueprint now we could very easily inside of this script say app.root give the route that we want and then say define and let's just call this home and then inside of here we can return whatever it is that we want so let's just say this is the home page and this needs to be an at sign my bad so it's a decorator so you say at app.root you define the root you return whatever it is you want to return from here usually this is html in this case i'm just returning a string and now if i rerun my script here and i go to slash we will see this so let's go ahead and do that i'm going to go to port 8000 and now notice it says this is the home page so that is how you set up a route however i like to set up my routes in a separate file such that it doesn't clutter the kind of main initialization script so what we do instead is we create a blueprint so we can put all of our roots in this file instead of this file anyways the way you do this is the following you say whatever the name of your file is really you can name this whatever you want is equal to blueprint then you're going to put the name of this blueprint i just make it so it matches this variable name it makes it easier and then actually that's all you need to initialize the blueprint then what you can do is say at and this will be views dot root and inside of here you can define your route so i'm gonna do slash and then i'm gonna say define home and here i will just return home page like that okay so now that we have created this blueprint we need to link to the blueprint or register the blueprint from our flask application so i'm going to delete this route right here and now right after i create my flask app i'm going to say app dot register blueprint and i'm going to put the name of my blueprint which is going to be views and then the url underscore prefix which is the prefix to access any of the views in this route i'll explain that in a second first we need to import this views python file so we're going to say from views import views what this will do is import this variable right here from our views file so now we can register this blueprint and we say the url prefix is slash that means we are going to access all of the routes in here from slash now if i did something like slash views this would mean we would access this route here by typing slash views now to make this a bit more intuitive if i said slash home and we'll just go home to here the way i would access this route if the url prefix is views is slash views slash home hopefully that makes sense but that's what the url prefix means let's just delete this for now let's rerun the script and we are missing one required positional argument name all right so the error i was having is i forgot to add an argument here underscore underscore name underscore underscore this is the first argument you have to pass to blueprint and then the name of the blueprint my apologies about this don't worry about exactly how this works but this is just how you define the blueprint anyways now what i'm going to do is run this now remember that our url prefix is slash views so if i want to access this route i have to go to slash views so i'm going to go here and go to slash views and then notice it brings me to the home page so that is the very basics of defining a route now clearly you probably want to return something that looks a little bit nicer than just a string from your roots so i'm going to show you how you can actually return an html document so we need to go inside of our templates folder it's very important you name this folder templates and this is where you put all of your html templates so just the html you want to render onto the screen so go inside of this folder again it has to be named templates and then what you're going to do is make a new file i'm going to call mine index.html you can call yours whatever you want so since i'm in vs code here there's actually a little shortcut i can use to generate a boilerplate html template first i need to make sure my language is changed to html uh not django html i have a django extension sorry so that's why it's doing that so now if i type html colon 5 and hit tab it will actually generate a boilerplate template for me anyways i'm just going to change this to say home inside of the body i'll put a div and inside of the div i'll put an h1 tag that just says home page alright so now let me show you how we actually render this page the way that we do this is we go to views.pi we need to import from flask render template and now instead of returning a string we return the render template and we put the name of our template so i just put index.html and now it will render this html template to the page when we go to this root so if i go here and i refresh notice now our html page is being rendered and we see home page there you go that is the basics of rendering html now while we're talking about render template the reason why this is called a template is because you can actually pass variables and values to the template that can then be rendered by it for example what i can do is the following i can pass a keyword argument let's say name is equal to tim right after i write index.html you can write as many of these as you want and i can actually access this variable inside of my template so if i go to index.html i can do let's go with like a p tag here and i can say hello comma and then if i use two squigglies like this i call them squigglies but you know squiggly brackets and i write name it will actually render name to the screen so whatever the name is that i passed to this template that is what will show up here whenever you're accessing a variable in the template you use double squiggly brackets okay so now let's go here and let's refresh and notice it says hello tim if i go and i change this to say joe and we rerun it says hello joe that is how you pass values you can also pass multiple values so i could say you know age equals 21 and then if i go here and say hello you are and then age we need another set of these years old and now if i run this we get the age as well all right so i showed you how we can pass variables to the templates now again you access them with double squiggly brackets now i'm going to talk to you about a few different things you can do with the routes so a lot of times when you go to a page the page is going to change based on what you type into the actual url for example let's create a new route here let's say at views.root let's call this slash profile and maybe the profile is for a specific person so maybe we actually want to go to slash profile slash then whatever the name or the username of the profile is that we want to access if i want to do that i want to have kind of like a dynamic url i can put inside of angled brackets the parameter for this url so in this case i want this to be a username so i can say profile slash username then i'm going to say define and we'll go profile the parameter is going to be username it needs to match the name that you put here and now what i can do is return render template let's just render index.html instead of username let's just say name is equal to username so now what's going to happen is we will actually just display whatever the person's username is if we go to this root otherwise we will display joe from this now let's go to index.html let me just remove age just so it says hello name now let me rerun this script and i'll explain this again in one second just want to refresh go to slash views slash profile slash tim and now notice this is going to change and show me whatever i type in here so if i change this now to be billy it shows billy so the way you access a parameter that is in the url is use the angle brackets you put it as a parameter for the function that is going to return whatever it is that you want there you go that is how you can access parameters in url now what about query parameters so let's say maybe what we wanted to do is change it so rather than profile slash billy we're going to go profile question mark and then name equals so we're going to pass a query parameter well how do we accept those the way that we accept those is we import something called request from flask and then we say that our arguments are equal to request dot args so now what we can do is use this as a dictionary to access any query parameters so let's say we want to actually get the name i will say name is equal to args.get name like that and this will give me access to the value of that query parameter if it exists so now rather than name equals username i can say name equals name let me just remove this so now it's just slash profile so i don't need to pass a name let's rerun this script and let's refresh okay so now we're going to go to profile question mark name equals tim and now notice it says hello tim again if we change this to billy then we get hello billy so that is how you access query parameters uh if you want to access multiple query parameters you just repeat this with whatever the name of those parameters are all right now i'm going to show you how you can return json from this because returning html is great but a lot of times you want to return json so i'm going to say at views dot root i'm going to say slash json i'm going to say define json i actually probably shouldn't call it that let's call it get json and now if you want to return json you can simply return a python dictionary but first you need to jsonify it so what we need to do is import jsonify like that and i'll kind of show you how this works so we're going to return jsonify and then whatever data you want to return just put inside of a python dictionary as you normally would it will convert it to json and return it so for example i go name tim uh let's go coolness 10 okay and now if i rerun this and i access the slash json endpoint we'll see that this is returned to us so let's go here let's go to views slash json and then it actually gives us this json now since we're doing it from the web uh it's going to actually show it to us as json or like show it to us on the page but if we were calling this from say javascript it would give us an actual json object that we could access all right so now we know how to get query parameters we know how to send json we know how to return html finally i will show you how we can actually get data from a request that's incoming and then i will show you how to redirect and a few other small things so let's say at views dot root let's go slash data so someone's going to send us some data in a json format to this root we're going to say define get underscore data and the way that we get this is we say that our data is equal to request dot json so now what i can actually do is just return the jsonify of the data so what's going to happen when you go to this root is whatever you send it it will just return now i'm not going to write anything that will actually send this root json but this is how you access json from a root okay so if json data is sent to a specific root this is how you can access it all right so the last thing i want to show you is how to redirect so a lot of times you want to redirect to a different page the way you can do that is the following so let's set up a new route at views.root let's just go [Music] go to home and let's go slash let's call this function define go to home okay and all we're going to do here is return we need to import two things the first thing is redirect and the next thing is url underscore four so you need to import redirect and url4 for this to work and you're going to return the redirect url for and then you're going to put the name of the route that you want to redirect to so notice i'm prefixing this with views the reason for that is the name of our uh what do you call it uh template sorry is views so i want to put views and then whatever the function name is that i want to redirect to so if i want to redirect to say home i would go views.home if i want to go to profile it would go views.profile whatever the function name is so dot get get underscore json it would bring me there so let's go to get underscore json so now when you go to this url it will actually bring you to get json now i know i said home but whatever let's just see how this works so i'm going to go here and i'm going to go slash view slash go to home and then notice it brings me to the json now if i change this to be views dot home which is what it really should be and we go to go to home if i spell that correctly it brings me to the home page so that is how you can redirect hopefully that helps all right finally last thing i will show you is how to actually add javascript to this so obviously i've just gone through very simple examples but javascript is pretty important so the way that you can add javascript is you can go into your index.html page and you can in the bottom of the body but really anywhere say script slash script like you normally would you can say your type is equal to text slash javascript and then your source is going to be equal to the following you're going to do two squigglys like this you're going to say url underscore four you're going to put static inside of a string although this needs to be a single quoted string and then you're going to say that the file name is equal to whatever the name of your javascript file is which in this case i'm going to say is index.js so hopefully you guys can read that all right this is our source and then i'm going to go in my static folder make sure it's called static create a new file call this index.js and just to prove to you that this is running i will say console.log and run so as soon as this script is loaded it should just say you know i am let's go running okay so now what i need to do if i want the javascript to be loaded is i need to refresh the page and clear the cache so the way you do this on chrome is you right click press inspect then right click on this little button here the refresh button press empty cache and hard reload then you can go look at the console so if you go here to console notice it says i am running the javascript is indeed running not going to explain any more than that you guys can mess around with the javascript as you please okay finally the last thing i'll mention is that the templating engine that is used for flask is called jenga so j-i-n-j-a i'll put it up on the screen so you can see what i'm talking about but it's very powerful and it allows you to do something called template inheritance so a lot of times you create an html page that kind of is the theme of your website and then you want other pages to be slightly different but to keep the same theme so what you can do is inherit all of the html from one page and override certain aspects of it let me show you what i mean so here i'm going to create what's known as a block now you can create as many blocks as you want and you can call them whatever you want but the syntax for creating them is sorry squiggly bracket percent sign and then percent sign squiggly bracket you write block and then you write what the name of the block is then you need to end the block so i'm going to go here and go end block like this so now this is my content block and this can be overridden from any template that inherits from index.html let me show you what i mean if i make a new template and i call this let's just go profile.html now if i want to use this template but override what's in the content block this is how i do it i go percent percent extends and then this is going to be the name of the template i want to extend so index dot html and then i'm going to redefine my block so i'm going to say block content and then i need to end the block oh it already did that for me okay nice and then inside of here i put whatever i want to appear where this block is so we'll override what's inside of this block so for now let's just say h1 and slash h1 and we'll say this is the profile page exclamation point okay so now if i go to views let's make a new view actually for profile let's just render the template profile.html we can remove all of these query parameters and stuff we don't need this anymore so now we're just going to render profile.html when we go to this page let's make sure this is running it is so now i'm going to go to slash views slash profile brings me to the profile page all right with that said i think i am done i am officially out of breath i went as fast as i possibly could hopefully this was somewhat helpful and gave you a very quick introduction to flask showed you how to very quickly start up a website again if you want more in-depth explanations for all of these things i went too fast for you i lost you in this video i have many other much slower much more in-depth tutorials on flask again you can find those from the link in the description regardless i hope you enjoyed if you did make sure to leave a like subscribe to the channel and i will see you in another one [Music]

Channel: Tech With Tim

Views: 171,988

Keywords: tech with tim, python, tutorial, python website, flask, vscode, html, json, variables, parameters, data, redirect, javascript, template inheritance, altium, website tutorial, creating a website, building a website, flask template inheritance, javascript functions, vscode python, vscode setup, python in vscode, python flask, flask python, flask app, json python, using json, simple, quick, api, rest api, web api, python programming, html coding, python project, python functions, web

Id: kng-mJJby8g

Length: 22min 21sec (1341 seconds)

Published: Mon Sep 13 2021