File Management and Editor Setup in WinSCP
what's going on everybody? Welcome to the third Python and Flask practical tutorial video. In this video we're going to be talking about building our kind of homepage using Bootstrap and stuff like that, so let's go ahead and get started.
So bringing WinSCP over here. When you first log into WinSCP, this is probably what you'll see. This is the directory for your root user, but we actually want to go to the root directory, which is all the way way back here. Then to find your actual files for Flask, you saved them in /var/www/flaskapp and then that's where we made the wsgi. We probably have not really changed anything there, but then here's where the main bits of our Flask app begin. This is our __init__.py file and you'll see that when we double click that, this comes up. And this is that file that we created initially, and we created it via SSH.
Now normally when you double click on a file, at least via WinSCP, it'll come up, I don't know, probably via Notepad++ if you have that installed, otherwise Notepad. Now this is kind of annoying. You want your Python files to come up with a Python editor. So to do that in WhenSCP, although in really any of these file transferring applications, you should be able to change the editor. So you might want to figure out how to do that. But anyways, for us, we'll go to Options, Preferences, come on down to Editors, and in here, basically mask is the file extension and you basically write these in the order that you want them to check. So the very first one is IDLE. Anything that ends in .py, try to open with IDLE. Otherwise, everything else open with Notepad++. So basically you're gonna modify two major types of file types. That's going to be HTML and .py, but also you might be editing JavaScript or CSS or whatever and everything will open in Notepad++ basically, except for .py files.
So I'm going to close out of this now and so yeah, now when I open up __init__.py, it's obviously in Python. Now I'm also going to make the font size here just a little bigger. Okay.
Creating a Base HTML Template
So now, what do we want to do? First, we mentioned that we're going to be using Bootstrap, so we know we want to go there. But first let's go ahead and get started with some templates. So we're going to come into templates. Before we go any, I'll explain static in a little bit actually, this video don't worry, but we'll get to that. So first let's go into templates and there's nothing here. Templates is where we're going to put all of our HTML files. So I right-click new, and now I'm going to call this main.html. That brings up this main file here. Let me move this here, this down.
And this will be our kind of like our—if you're familiar with old school kind of paradigms, this will be kind of like a header file. Only now, the header file contains both the header and the footer. And you don't really have to have like top and bottom. Don't worry about it if you don't know, but it is, it can be kind of confusing if you're coming from traditional PHP kind of styled paradigms. So this is our main file and now we're ready to build an HTML file.
So again, a lot of HTML is simply copy and paste. So for example, we can come over to Bootstrap, and let's just view the source. So to view a source of a website you can right-click, View Source, View Page Source, or if you're in Chrome you can do Control+U, and so on. So you see here they have all of this stuff and it's contained, at least all of this is contained within a pretty large head actually. We don't really want to do all of that, but basically all websites start with the following: they've got doctype, and then HTML. And then they begin with this head tag.
Again, you don't need to know a lot of HTML, but I hope that you understand the basics of tags and all this stuff. But you see they start with this head, some meta stuff, blah blah blah blah blah, some of this stuff here, meta names and stuff like that. So basically we want to do the same thing. So let's just copy that, at least those first three lines we want those. This just identifies this type as HTML. This identifies the HTML language as English. We begin the head, we'll go ahead and close the head now, and now we're going to put some stuff within the header tags. Now generally, I don't really see too many people indent the head, even though the head is within HTML, and in fact let's close off our HTML tags as well. I never really see people indent, but since we're all Python folk, you do want to maintain some degree of standards. Python automatically indents, you know, blocks of code for you. HTML doesn't. You could actually code HTML all on one line. So you could do something like this and have like all of your HTML code on, oops not deleted, but all on one line. That's totally fine, but it's just bad standards so you don't want to do that.
Generally, anyways, generally what you'll want to do is you'll want to indent over stuff that's contained. Generally, again, people don't do it between the HTML tags, but everything else they do.
So now we're going to do the, do that, char set. So we'll come back over here. I'm sure they, yeah, they defined charset. We'll just copy that, tab, paste. Basically this defines the encoding for your web page, it's utf-8. Enter.
And now we're ready to put some more stuff. Next thing is the page title. So this will just be, you know, what's the title of your page basically, and it'll appear in the tab, you know, up here. And we're going to call this Python Programming Tutorials.
And so that's our title, easy enough. Let's see if they did the viewport. They sure did, we'll copy their viewport as well. Let me zoom into this one as well. So this is the viewport. Basically let's just let's copy that first. Viewport is kind of, it's code specifically for your browser. Really all of this is, HTML is interpreted by everyone's browser. That's why HTML is so universal and it works on everything, you know? And that's why websites in general are very universal because they actually just interpret—at the end of the day, they spit out HTML that's interpreted by browsers on all the operating systems. So it's actually a really nice system I think. Anyways, this is some browser code basically. It encourages the browser to use the full size of the browser.
Okay, so the idea of Bootstrap is that it's very responsive and it works on multiple screens. So that's obviously something we want. So next we've got the viewport and now you're generally going to see CSS sheets. So let's see if they've got a CSS sheet anywhere that we can copy and paste. I'm not... here we go, here's one. So let's just say that this is, so this is a stylesheet, this is how you link to a stylesheet. Basically, the link href is the reference to where is that stylesheet stored and then you tell the browser, hey, by the way, this is a stylesheet. So we're going to do the same thing and our stylesheet is actually going to be called bootstrap.min.css.
Introduction to Jinja Templating and Dynamic URLs
But with Flask, in traditional, again, PHP, everything is stored and visited via the URL path identically. So the URL path to a file is exactly the path to the file on the server. Sometimes it's a local path, though, like if you're using shared hosting, or VPS is generally shared to, but it's the same path, right? With Flask, not the case. Say you're on a webpage that is like the following: let's say pythonprogramming.net/home/test and you told the browser that the stylesheet is located in, let's say, static/bootstrap.css, let's say. It's going to look for this file at the following location. It's going to look for it here, and with us, it's not going to find it there because that's not where the file is.
So Flask has a nice way to dynamically link to files, and here's how it works. You use the phrase url_for and it's a variable. And the way that we define variables in Flask is with these double curly braces. This is a variable. You also have logic, and logic is defined with the curly brace and then the percent sign. And this is logic. And anytime you have logic, you need to also have end logic because this is the templating code. So again, coming from Python, it's a very unfamiliar thing when you have to close off things, like, you know, you have start and end. And that's just not something that is done in Python. But here, this is actually called Jinja templating and it's required with Jinja templating. You do not need an end var, though. So anyway, that's logic.
So we're going to use a logic in variables. So we're going to use a variable code and the variable code is going to be a variable that is the result of this url_for, which is a Flask function. And it's going to be url_for, and then for what? Where is this item that we're looking for? Well, it's within the static directory, and then you'll do a comma and then you'll say, what's the file name within the static directory? And for us, static is the only directory that's like directly accessible by the user. So I'll show you that hopefully in a little bit. We don't have anything in static right now, so I can't show it to you right now, but that's the only directory where people will be able to access it because they'll be able to go to pythonprogramming.net/static and they'll find your stuff. And in fact, I can show you, because I can show you on pythonprogramming.net.
So let's do here, paste, and you can see all the stuff that's contained in pythonprogramming.net/static. But we also, there is also templates, right? Templates is in the same directory as static. So could we do templates to see all of pythonprogramming.net's templates? No, we can't. We get a 404 error with this lovely snake I've drawn. So anyways, so just so you know, static is the only directory viewable, but you don't necessarily, well nevermind. Anyways, we're going to get out of that. So static, and then within static...
Linking Static Assets (CSS & Favicon)
we're going to have a bunch of different files. So we did here as well. So you'll see, since this is the website we're building, within CSS, or I'm sorry, within static, we have different things. We got CSS documents, downloads, basically everything you want that user to be able to access directly, not just access but, is in static. If you want something hosted privately, you push it somewhere else and then you temporarily send it to the browser. And there's all kinds of fancy things you can do, but static is for public stuff. So again, in static, we've got the CSS directory, which stores CSS. We also have a js for JavaScript, videos, images, just all kinds of stuff in here.
Anyways, we want to have CSS and that's where we're going to store all of our CSS stuff. So coming back over here. So the URL for the static directory, and within the static directory, we're looking for the file name equal to css/bootstrap.min.css. That's what we're looking for. Okay. So next, actually let me just full screen this. No sense in leaving the other stuff on the screen.
Anyways, that's our CSS sheet, and then now we just have one more thing we want to reference, and that's going to be our shortcut icon. So that's the icon that appears, as soon as I, uh, is right here, right? It's your fave icon is what it's generally called. So we want to reference that as well. So we're going to say link and we're going to say relation is shortcut icon and href is equal and again we're going to use basically the same thing. So I'm going to copy and paste this url_for here, paste, and it's in static. It's not in its own directory and it is going to be called favicon.ico. We'll save that.
But of course, bootstrap.min.css and favicon.ico just don't exist yet, so we need to create those. So I'm going to move this over now and we're going to deal with getting those icons and the Bootstrap stuff.
Downloading and Adding Bootstrap Files
So for Python Programming specific files and stuff, really no reason for me to provide them to you in like a directory or something that you can download. They are all available on pythonprogramming.net. So for example, we do need the fave icon. So we'll come here and we'll take this fave icon here. Let me just drag and drop it to the desktop, I suppose. Last time I did this, yeah, it converted it to a PNG. I don't know why it's doing this. Let me save it. let's try saving it. Yeah, so it saves as a favicon.ico but if I take it from here to my desktop it just does not want to be, you know, good.
So anyway, oh no, looks like we still disconnected from, I guess it was too long for it to hold for me. That's okay anyway. Downloads, and there's my fave icon. So now, come to WinSCP. I'll go into the directory which was static, just flat static, and I'm going to click and drag this fave icon over. So we've at least done that.
And now we need to get Bootstrap. So let's go ahead and grab Bootstrap, move some stuff over. So here's my download directory, just fave icon in there. And then we're going to come to Bootstrap here and we just want to download Bootstrap. We don't want the source code, we want just Bootstrap that's, you need a compiler to use that and stuff. So once you have Bootstrap you get this, we'll right-click, extract all, extract. And now we've got bootstrap-dist, and then in here you got CSS, fonts, and JavaScript. So CSS is the stylesheets that we're going to use. Fonts, things like glyph icons, which we are going to use, and then JavaScript.
So now, again, we click and drag. We're going to click and drag that into the static directory. So do that and it might take a little bit. I don't, it shouldn't be too long, these files aren't really huge. And then once that's done, we should have everything. We'll go ahead and refresh just to make sure. main.html, did we actually save our our main.html? Yeah, we did. Let me minimize this.
Rendering the Template with Flask
Let's come over here and let's refresh and just see that, oh okay, right, there's one more thing, well, there's a couple more things we needed to do. Man, I'm really bummed that I got to reload this thing. All right, once we've made it this far, sorry I had to restart this and now it's telling me I need a system restart. I'm sure it's telling you guys the same thing so at the end of this series, or at the end of this tutorial rather, run a sudo reboot if I forget to tell you. so it should be totally fine to continue on at least for now but it might cause trouble later. So don't forget to do a reboot if you need it.
Let's see, okay so flask app, we've got our templates, main.html. Now we need to actually call upon main.html. So we go into flask app and we're going to open up __init__.py and for now we see that right now homepage just returns Hi there, how you doing? Now we're going to talk about how do we have it return a template. So what we're going to do is from flask import Flask, comma render_template. We'll add a space there just to be clean, and what render_template does is exactly what it sounds like: render a template.
So instead of returning a string, we return render_template and now you give the path to the template starting from the templates directory. So in our case, we go into templates directory and we see it's just straight main.html. So the path is main.html. But if you could, and you can and we will, or at least I do, I'm pretty sure I'll at least show you how I've done it. So there will be more directories in here, and you'll have various meanings for these directories and names and stuff. And then say you had another directory that was like, I don't know, footer, you might have something like this footer.html, and that would be acceptable as well. So anyways, we'll save that.
And once we've done that, anytime you make a change to the __init__.py or any of the Python files, whoops, I didn't mean to click on that link, you need to issue a service apache2 restart. So we'll restart Apache. You might get something like this, it does not matter.
Verifying the Setup and Conclusion
We'll come over here, refresh, and at least we see our fave icon works. We don't see anything else. But we can view the source and we see all this stuff. And remember that here's our main.html, right? This was a variable, right? It was a variable to our static stylesheets. But we come over here, and we see it's actually given, you know, the relative path basically to it. We can click it and we can see that yep, indeed we are actually getting there. Cool. I think that's really cool. I love the idea of variables in the HTML and then we can even do logic. That's just awesome.
Anyway, the next thing we can do, though, just to show you it works, is we can add some paragraph tags really quick and say like, Hi there, how you doing? Save that. We've modified the HTML, do we need to restart Apache? No. Refresh. Hi there, how you doing? Pretty cool. And you might even notice that the font is different. And the reason the font is different is because we've loaded in our stylesheet. So because of Bootstrap, we already have a better looking font. And and that's really it.
This is 20 minutes, so we'll cut that off now and then we'll continue on making our homepage and stuff in the next video. If you have any questions or comments, please feel free to leave them below. Otherwise, as always, thanks for watching, thanks for all the support and subscriptions, and until the next video.
