How to create a website using python as fast as possible

Dev

So in today’s topic, 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.

Environment Setup

I have Python installed. Any version of Python three 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, have two videos on my channel showing you how to fix it. Quickly, though, you can try a python hyphen and PIP install flask or python hyphen moppet three install flask.

And then finally, if that doesn’t work, you can try Python three hyphen and 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 amped up python.

Flask Setup

We’re going to make another file called Views of 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 apt up py file. This will be the entry point for our Python Web site. And we’re going to initialize flask. So I’m going to say from a 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 I going to square name underscore underscore equals main, then app and run debug equals true. And this is actually all you need to start running at 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 will go with 8000.

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 routes 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 rerunning 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. All right. So now that we have initialize the app, we need to start creating some views or some routes.

Creating Views/Routes

Now, routes are kind of the endpoint of the URLs or something like, say, slash home that we can actually visit on our website so we can go to use the API. You 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 dot 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 notices says this is the home page. So that is how you set up a route. However, I like to set up my roots in a separate file such that it doesn’t clutter the kind of main initialization script. So 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 were 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 roots. I’m going to do slash and then I’m going to say define home. And here I will just return home page like that. OK, 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 root 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 to this abuse 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 roots in here from Slash. Now, if I did something like slash of use, this would mean we would access this root 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 of use 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 arrow is 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 homepage. 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.

Rendering HTML

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 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 dot 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, not Django. HTML, I have a Django except extensions or else that’s why it’s doing that. So now if I type HTML code five 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 pitch. All right. So now let me show you how we actually render this page.

The way that we do this is we go to used Arpi. 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 dot 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.

Template Variables

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 dot 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 dot 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 squiggles like this, I call them squiggles, but, you know, squiggly brackets.

And I write name. You 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. OK, so now let’s go here and let’s refresh and notice says hello, Tim. If I go and I change this to say Joe and we rerun it says hello, Joe, that is how you passed values. You can also pass multiple values. I could say, you know, age equals twenty one.

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 roots.

URL Parameters

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 routier, let’s say at Vieuxtemps Root. Let’s call this slash profile and maybe the profiles for a specific person. So maybe we actually want to go to slash profiles, slash them, whatever the name or the user name 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, dot 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 study HTML. Let me just remove age. Just would says hello name now. Let me rerun the 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 to whatever it is that you want. There you go. That is how you can access parameters in your 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 the name equals. So we’re going to pass a query parameter. Well, how do we accept those? The way that we accept those as we import something called request from flask. And then we say that our arguments are equal to request dot args.

Query Parameters

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 arget 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. Or now it’s just slash profile. So I don’t need to pass a name. Let’s rerun this script and let’s refresh. OK, so now we’re going to go to profile questionmark.

Returning JSON

Now I’m going to show you how you can return JSON from this, because we’re turning HTML is great, but a lot of times you want to return JSON. So I’m going to say at Vieuxtemps Root, I’m going to say slash JSON and say define JSON. Actually, I 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 JSON a file. So what we need to do is import JSON, AFI like that. And I’ll kind of show you how this works. So we’re going to return JSON a file 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. Let’s go coolness 10,

OK? 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. It’s going to actually show it to us as JSON or like show it to us on the page. But if we’re calling this from. Say JavaScript’s, it would give us an actual JSON object that we could access. All right, so now we know how to get query parameters, you know, 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 Vieuxtemps Root, let’s go slash data. So someone’s going to send us some data in a JSON format to this root and 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 JSON, a five 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. OK. So if JSON data is sent to a specific root, this is how you can access it. All right. 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. I’ve used a route. Let’s just go. Go to home. And let’s go slash. Let’s call this function defined. Go to home. OK. 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 force.

You need to import redirect a new URL for for this to work. And you’re going to return the redirect you URL for. And then you 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 what do you call it, templates or is abuse. 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’ll go Vieuxtemps at home. If I want to go to Profilet go Vieuxtemps profile, whatever the function name is. So don’t 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, use, 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 spelled out 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, not HTML page, and you can in the bottom of the body, but really anywhere, say script slash script like you normally would in 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 squiggles like this. I’m going to say your URL underscore for you’re going to put static inside of a string, although this needs to be a single coded 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 dot gia. 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 called is Index Gorgias. 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. OK, 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 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.

OK. Finally, the last thing I’ll mention is that the templating engine that is used for Flask is called Jinga. So JNJ, 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, Ukrain, HTML page, they 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 %s sine. Quigley bracket, you write block and then you write with the name of the block, it’s then you need to end the block. So I’m going to go here and go and block like this.

So now this is my content block. And this can be overridden from any template that inherits from index dot html. Let me show you what I mean. I make a new template and I call this let’s just go profile dot 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 extend. 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.

It already did that for me. OK, 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 each one and slash each one. And we’ll say this is the profile page. Exclamation point. OK, so now if I go to views, let’s make a new view actually for profile. Let’s just render the template profile dot 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 that 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 on as fast as I possibly could. Hopefully this was somewhat helpful and gave you a very quick introduction to Flask.

Avatar of Biên tập Viên

About: Biên tập Viên

A guy who love writing and inspire message.