The Best Django Tutorial – How to Use Django 1.9 with PostgreSQL & Bootstrap

hey guys what up welcome to this new video and what I’m doing is I’m messing with Django 1.9 the latest version of Django as of the date of this video which is April 25th 2016 I’m going to go as quickly as I possibly can and this is just a showcase how I would go about actually creating a django website now I host my django websites in a Linux environment using the node which is a great company I recommend them but I develop on a Windows machine so there are two conflicting operating systems and working with those differences can sometimes be a little bit problematic but in this particular case we’re going to try to get a django out some website set up as quickly as possible in a Windows environment and not really worry about getting it to the Linux environment right now maybe I’ll add that in the future but let me know what you think so first things first guys you need to know where you’re going to put your project I put my projects in my projects folder and the name of the site that I’m going to be using is a new post I’m basically rewriting it I have it in flask but I want to do something a little bit more involved in what I’m doing currently so I’m just call this a new post so I have my folder there now any time you’re dealing with Python you need to have Python installed on your machine so if you don’t have Python then you need to get that installed so when you pull up a command prompt and windows you should be able type Python and it should pull up you know actual Python emulator here where it prints Python code so this is the emulator that comes with Python it actually runs Python so you can do quick scripting and stuff like that if you want to get out of that do control see what you want to make sure that that is there that it’s installed and added to your path so I plenty of videos on that if you actually search my name and how to install Python you’ll find plenty of that and then there’s also sources on the web but let’s go into that new folder that we just created which is new post now any time you deal with Python you probably want to do a virtual environment it’s really important if you’ve ever done note or any of this other stuff it’s all about basically encapsulating dependencies so that way you don’t have to projects that rely on the same plugin but then you go and maybe one relies on a more up-to-date version of that plugin and they’re both trying to share and it creates a major problem so every project should have its own plugins its own modules and things that it’s using and it should be isolated to just that project so that’s what virtual environment does for us it’s very easy to use if you have Python 3 installed or 3.5 or even 3.4 and probably earlier versions and that it comes with virtual environment so there’s no reason why you shouldn’t be using it at this point but all you have to do is virtual environment or virtual env I’m sorry and then you’re going to give it the name of the environment so we’re just going to call it env which is in your short for environment now I want to add two flags which is a hyphen and say no site packages so what this means is that if there is a package that two projects share or they’re the packages available in the global Python installation and to explain that when you install Python on your machine you’re going to have a Python 3.5 folder somewhere on your machine in that folder there’s going to be site packages that’s going to be there’s a folder name site packages in that that is all the modules you have installed 43.5 for your installation version of python what virtual environment does is it says ok I’m going to create a separate folder that’s going to have its own site packages just for that folder not for all python 3.5 but just for that project and what no site packages does it says hey if I’m using a module that is installed in your installation Python 35 folder don’t use that even if it’s already there because I said no site packages it’s going to go ahead and install that anyway in to my virtual environment so that’s what you want to do that’s what it’s for hopefully I explained that okay so this is going to go through and it actually reaches across the web to get the latest version of Python really you can see that’s actually running setup tools and pip and stuff like that so once we have this installed we’re going to need to activate the environment so you can see that it went ahead and installed pip and all this other stuff that we use to install modules in Python if I do a door on that directory you can see we now have an invite armen directory so I’ll go and CD into the environment our environment directory and then now I want to CD into the scripts directory and there’s this full this uh this activate and that’s actually what we want to run so on Windows you just have to say activate and now on the left hand side you can see the env environment is now activated so anything I run with PIP install is just going to be specifically for this one project folder so if I say pip install Django it’s going to grab the latest version of Django which is you can see one point nine point five and it’s going to go ahead and install it and only that Django is going to be used

by this this project new post and by the way this project that I’m going to be trying to create is actually going to be a video to kind of supplement my YouTube videos I’ve been kind of bouncing around different ideas and stuff like that but ultimately my flask website that I have currently is just not it’s not cutting it and Django makes a lot of things so much easier so I’m just going to go back to doing Django with that and what we’ll see how how it goes but ultimately what this project is going to consist of is that it needs to use some of the latest web standards like bootstrap and stuff like that so I want it to be a relatively plain site but I’ll show you guys how to get all that set up so now that we have Django installed here you see let’s go ahead and one of the things with my Django websites you need to have a database so I have a website or a video out there that is how to install Postgres the database – free and open source database that you can install on your Windows machine or Linux or Mac or whatever you’re using and my video though explains how to actually set it up on Windows but once you actually install Postgres to your machine if you run PG admin you’re going to see this PG admin 3 which is like this helpful little console application that allows you to interact with your database a lot easier so if I double click on this and I type in my password I now have connection to this database server and you can see all these are like test databases that I have inside here and you can see I already have a new post database I’m actually going to delete that and drop the whole thing I don’t want it but then I’m going to go ahead and create a new one so I’ll say new database and then I can say a new post and then I want to give it a database owner and you create an owner by default the default owner is Postgres so I’ll just say ok and what this is going to do is is going to go ahead and create the database for me and it’s a lot easier than having to go into the Postgres command line and do like raw commands and stuff like that so now we have a database now let’s go ahead and create our Django project so I’m going to get out of the environment directory and go into the main new post directory and I’m going to go ahead and create a project called we’re going to call it post okay so we’re going to say Django admin dot py which is um this is a file that’s going to be ax accessible now that we’ve installed Django and we’re going to say start project host I’ll just call it post and now if we do end of the directory you can see we now have a an actual Django application set up which is a this post so now what i use is visual studio you can use any sort of editor that you want but i like Visual Studio so I’m going to say a new project or solution if I go down to other languages here I can go down I can go to North Python there’s Python and I’ll just say from existing Python code and I need to give the project a name and let me give it the right folder too so I’m going to go down to my new post folder that we just created so I’ll select that and then we’ll just call this post click OK go next and now this is going to say global or default so I want to instead of doing a global installation I wanted to detect the virtual environment and it looks like so I actually want to customize this to a Django web project and then we’ll say finish all right so now what I need to do with Visual Studio is I need to right-click on this and say set as my startup file so my manage that people I should always be my startup file if I right-click on the project and I go to properties in Visual Studio I can go to my debug panel here and I can actually give it the port number that I want it to be set up under so so every time it runs it will use port 8000 now the application I don’t think is going to work but let’s go ahead and try it so if I just play it from my visual studio editor it may run it may not we’ll find out okay so all right no module name new post he needs to be my

I see so for some reason the project name here is named new post and it thinks that the actual app name is going to be called new post as well so I actually need to rename this to post as the name of the project and that should work so if I go ahead and run it from the editor so this is why the editors are a lot easier to deal with just because you can just click of a button and run it and it just it’s easier I guess so this will actually fire up a Django site normally it’s quicker than this okay so now it’s listening on port 8000 so the local host address port 8000 if we look at it we can see that we do have a Django powered application running now here’s a gotcha which is a term that means something that’s going to trip you up with Python 3.5 in the latest version of Django especially using Postgres let’s go into our settings file real quick and we’re going to do our database settings so if you want let’s see so we want to change this to use our Postgres data so what I need to do is I actually need to remove this Django DB all the way to back ends here and then I’m going to do dot Postgres will underscore psy CEO PG two and then we need to give our database a name so it’s called new post we need to assign a user and the user is going to be the Postgres user or whoever you have as the the user of the database that we created earlier so here’s password and I’ll give you guys my password for this test database it’s a hard one to remember test one two three and it’s not live so I’m not worried about being hacked or anything in fact I created the database just for demonstration purposes so you can see test one two three now post Postgres is not going to work without an actual plugin and what we need to do in order for this to actually work on a Windows machine at least it was for relatively recently you need to download this psy CEO PG to the basically the latest version of this psy CEO PG to module which is the Python module that makes Postgres work with Python and the reason why at least as of a couple weeks ago the latest version of Python was not working on Windows environment so I had to manually like basically I couldn’t do pip install and reach across the web and grab it like for some reason it couldn’t compile or something like that but ultimately it’s easy enough to just be able to take that that Weil file and then we’re going to put it in our own environment so here’s the new post folder we created inside environment is our virtual environment inside live is the site packages folder and this is what I was telling you guys about before this is all for your virtual environments so this is any sort of Python module that your project is going to use so this is the wheel file so this is the hard core way of just installing something manually so now let’s go into the environment folder go into live site packages basically where we just pasted that full of that file which is right here this wheel file and I’m going to say pip install and make sure you’re in your virtual environment pip install psy Co PG p sy Co PG 2 – 2 dot 6.1 – CP 35 – none – win32 WHL so if you’ve ever had to or if you ever need to manually install a module that’s how you do it now we need to go to our main root directory of our folder we’re going to go into the post folder which is basically the name of our Django application and what Django does whenever you create a new application there’s going to be a post module so if I go into this next post folder in fact let me show you guys through the through the editor it’s easier so you can see that we have this this post directory and inside that it contains a post older but it also has when you’re in this sequel we don’t need that but it also has this manage that py files so anything you did with Django whenever you’re doing database updates and stuff like that you’re going to use this manage py file inside the post is basically the settings file and the URLs and the whiskey file and stuff that the

Django needs so that said let’s go ahead and we need to run a command one of the gotchas with python weight especially with Django is that the database migrations need to actually take place before I could create a super user so I’ll explain that now what I need to do is say python managed that py and I’m going to say migrate I had to do migrate first before I could actually create my super users and now that I’ve done that I can say python managed dot py create a super user all one word and then here so I can create like a some sort of username you can provide your email now you need to make sure you pet and type your password right both times and now I created a super user so now that that has been done if I go ahead and I play the project again so here’s the file if I go to forward slash admin Django has this awesome built-in admin so I can log in with my user that I just created and this is actually logging into my database so you can see under users it created the super user who has staff status and this ultimately this user has authority to change basically anything in the website it can create new users and all other stuff it’s just it’s so helpful having this just work out of the box I mean when you compare Django to flask or MVC or or any of that other stuff or node this is even after years and years of developing this is just such a beautiful thing all right guys so now the next thing we needed to we need to download bootstrap ok actually before we even do that let’s go to the I’m going to stop the server I’m going to go to the directory where the project is installed inside this post folder I’m going to create a folder called static and then I’m also going to create another folder called templates inside of our templates we’re going to create actually we’ll worry about that later alright so now with bootstrap I can say just download this joint this is going to download it into a zipped up directory so we’re going to unzip the entire contents of bootstrap which is fonts CSS and all this stuff we’re extract it and we’re going to put it into projects new post post static I think that’s where it is right alright so if everything went well and we pull up our folder inside static we now have the CSS and all this other stuff so that’s good now we need to tell Jango where our templates can be found so and Django 1.9 there’s this templates list which contains key value dictionaries so in in here they have a directory key and then the value is actually a list of different directories on where your templates can be found so this is just going to be straight directory to your templates folder so new post-post templates that I think is where it is I down at the bottom we also need to add our static files directory shorthand and this is going to help us some if you just copy and paste this is going to actually be able to link to our CSS and everything that we’re going to be using during development that also means that we need to update our static URL so we’re going to actually give this is going to be the actual drawn out path to where we put our static folder so it’s

post static okay I think this is good so now let’s go ahead and since I’m using Visual Studio this is something that you don’t have to do it but I included in my project next I’m going to create a folder inside my templates which is going to be for layouts and now let’s go ahead and create a new item there’s just going to be just a simple HTML page and I don’t want to call it webpage HTML but we’re going to rename this layout on the table layout and then under the templates folder itself we’re going to go ahead and create an HTML page for index and then I’m inside my index right now we’re going to do this is template Django’s template language so we’ll say extends layout layout dot HTML so what this does this points to that layout folder and it basically says hey use that main layout so that way I only have to define a complicated layout file one time so you can see mostly a new post in fact you what we’ll do this block title and block so Django has the ability to allow us to use these templates and make use of of these template tags to just fill them in so like since index is extending the layout I can just say block title and then here I’ll just say home and then any sort of block you always have to have an in block statement and then we’re going to do another block for content and blocking in here we’ll just say it’s just a standard message so since we’re going block content let’s go ahead and put that in here all right so now the the main in depth the layout file can have all the complicated CSS and JavaScript and everything and then all you have to do is do block tags for any sort of page that implements that master page and that implementation is being done there I’m actually missing an apostrophe that should be in there should be two apostrophes ER all right so let’s see that should be good let’s go ahead and go to our post our main app here and we’re going to do a URL for the index so we need to say are I um you know I think I can just say something like that that should work and then here we can say host use dot index so I think that’ll work so what this does is a regular expression it means match anything so if it matches a basically the root directory of your your application then it’s going to point it to the index view and right now we don’t even have an index in our post app so let’s go ahead and add a a Python file so we’ll say empty Python file we’ll called views dot py now inside our view is at the top we’re going to say from Django dot shortcuts import render and this is just a easy way of being able to render a template to the user when they request it so anything in Django this is um your views file so it’s just a Python method that returns a template and this request object is actually the user’s information it will contain things like the user’s IP address and all this other stuff and that’s that’s it so we’re going to have this empty dictionary that we’re passing back but we’ll get more into that later but for now let’s just go ahead and and do this and I want to go to run we made a lot of changes let’s see if I’ve tripped up on anything here because I’m just going off the cuff here oh here’s my yeah as I referenced a variable here that I didn’t define

because I copied and pasted that from another project I forgot to actually define it but let’s just go ahead and um we’re just gonna get there straight path to our application here so just go just like we did before there’s going to go right to the static folder and really crap really it can be this same path to our static folder just put it here I don’t need that comma either alright sorry about that so let’s go ahead and stop this and rerun it all right so now you can see we actually have our web page being rendered to our templates and all that stuff is working so that’s good now if you’re on Windows and especially if you’re using Visual Studio and you notice this weird gap in chrome it’s a weird issue and I’m probably going to save you a ton of time if you’ve ever had this problem but all you have to do is go over to file for the layout page and go file the advanced state of options I feel like that wasn’t just showing okay and then go all the way down to the bottom and just a Unicode without signature it’s so weird you have to do that and now if I save it if I went back to this you can see the weird gap the freaking sites not running out I stopped it we all see that that gap has gone away that took forever to figure out in fact I posted a question on Stack Overflow even at a video like demonstrating the problem as far as I know nobody else really runs into this situation and that’s the solution so I ended up figuring that out for myself that was a long time ago and I think I just got lucky kind of guessing but now if I am if I inspect element you’ll see that that weird gap issue isn’t there anymore see how it’s gone so that said all right so now our templates are working everything so let’s go ahead and make use of our see um let’s make use of our bootstrap stuff and just make sure that that is working so if I say link href equal and then here’s what it’s nice to be able to use the static keyword that comes with Django so I can say CSS and basically there’s just a shortcut that jumps right to the static folder and the reason why this is nice is because you just have to define where that static folder is in your settings file and you can change you can move this Django project somewhere else some other machine some other operating system and just update that that value and ideally everything should be able to work so you don’t have all these absolute hard-coded paths all over the place you have to update manually anytime you change stuff around alright so now that we have this is standard bootstrap Styles here and class names and everything so if I give a div class container this should like Center the content in the middle all right let’s see if this works I really need to just keep the site running okay so we have a new error here this is it says did you forget the static tag so this actually trips up a lot of people too but anytime you’re using that static keyboard that I was telling you about the first thing you need to do at the top of your page is say load static files all right so let’s say so for some reason though so you can see our bootstrap is not loading so let’s take a look here so let’s see if that’s even where the

file is oh yes you have a typo boo trap okay how does that say why is that not working so you can see it’s there’s a typo right there some bootstrap still a typo big typo all right all right so now you can see the different bootstrap style centered content all that stuff so anyway guys um we now have a pretty good website going in Django so that’s pretty sweet and this Django 1.9 Python 3.5 and thanks for watching please subscribe bye