Python Django Tutorial - Build A Todo App

Key Takeaways

hey guys in this video I'm going to show you how to get started with d Jango which is a python framework and yes I'm finally doing a a tutorial on python a lot of you guys have been asking for it I do plan on doing a very basic python for beginners looking into the core language and the syntax and so on um but I wanted to do a project based tutorial on Django first I know it's kind of backwards but uh this is going to be more of a demo than a structured tutorial just to let you know um I'll explain what I can but I'm not going to go in depth excuse me on every piece of code that I write um we're going to build a to-do list with the Django Administration panel so that we can log into the admin and add todos um now you can follow along with this tutorial and and build pretty much any kind of crud application I just chose to do a to-do list because it's simple and every it's something that everyone understands so before we get into it let's talk a little bit about what D Jango is it's a highle python framework that encourages rapid development and pragmatic design all right so it's supposed to take all the hassle out of web development and it relies heavily on the command line to help us do things really quickly um Jango is a little different than let's say Ruby on Rails or other MVC Frameworks it actually follows the mvt design pattern which is model view template all right so basically we create our models we link to a database and we put our logic inside of a view file and then display play the UI with templates um so the view file essentially works like the controller does in MVC uh it's a little weird at first but it makes a lot of sense when you actually start to work with it all right now I'm I'm relatively new to jeno so if you're a season jeno developer and you see me do something wrong or something where there could be a better way just go ahead and let me know in the comments but don't be an all right so let's get started I'm going to go ahead and open up my terminal I'm using terminal but you can use any terminal program and first thing we want to do just make this a little bigger we want to install pip which is the python package manager so to do that we're going to do a pseudo let's do app get update let that update and by the way if you're on Windows you you want to go to I think it's python.org and just go ahead and download Python and you can install it as an exe if you're using a bunch to it's already installed if you say python D capital V uh whoops I spelled that wrong you can see I'm using version 2.7 uh but you can also use version I think 3.6 is the late latest version um but a lot of people prefer 2.7 but um what I'm doing in this tutorial is the same no matter what version you're using all right so now that we updated our package manager let's do pseudo uh pseudo apt get install and then we want to do um python Das pip yes all right and once that's done we can install D Jango using pip all right so now let's do pseudo uh pip install Django okay now it's telling us we're using pip version 8.1 um ver version 9.0.1 is available all right now we want to check um check the installation by saying Jango uh- admin and then we're going to do dash dash excuse me Das Das version and you can see we're using Django 1.10.4 which is the latest at this time yours may be different depending on when you're watching this now there is something called uh virtual environment that you can install so that you can manage multiple D Jango applications I'm sorry python applications or not applications but different environments so that that's something you may want to look into if you plan on doing a lot of python development uh but I'm not going to do that in this video all right so now what we want to do is um let's going to create a folder or a directory sorry we're in Linux a directory called apps okay this is pretty much a brand new uh buntu install I did install Atom and Terminator and chrome but aside from that it's pretty much a default installation all right so uh let's go into Apps and we're going to create ajango application okay so we can do that with that D Jango admin and then we'll say start project and let's call this to-do list all right so now if we go CD into to-do list and we can see that there's a manage.py file and then there's a to-do list folder now what I'm going to do is open up my text editor which I'm using adom and I'm going to open that to-do list folder as a project all right so let's go ahead and say add project to folder let's see it's an apps to-do list all right let me just close this stuff up okay so we have manage.py which we don't really we don't need to look at this file this is just this is a a tool that we use in the command line to do stuff with all right then we have our to-do list which has settings URL and this uh wsgi which I'm not even sure what that is uh but settings we can change we can uh edit our settings here we can change the template directories things like that uh if we use middleware that goes here installed apps so by default D Jango comes with an admin uh an au an authentication app um sessions messages static files uh this is where we put our database information now we're going to be using SQL so we're going to need to install that as well um and then we have our static URL folder this is basically where we want to put our CSS files things like that all right so it's just the main settings for um for python it doesn't use XML files or anything like that everything is in the python file and then this URLs is kind of like our routes okay you can see here the the admin route is set up it uses regular Expressions uh but we'll get into that later all right so next thing we want to do now what we want to do is we need to create an app okay python has these things called apps and I think that's kind of a stupid word for it because I look at the whole thing as an app but I I would I would personally rather call them modules so basically have different modules um so if we have a Blog we're going to have a Blog module if we have um a store we'll have a store module so what we're going to do is create a to-dos module or app whatever you want to call it all right now to do that we use that manage.py file so what we can do is we can say Python and we could say manage.py and then start app and then let's call it to-dos all right now if we look in our folder structure here you can see it created a to-dos folder with a bunch of stuff in it okay we have our admin.py apps models that's where we put all of our models tests and then views we also have migrations okay because we can perform database actions through migrations just like we can with Ruby on Rails if you've ever used that so next thing I want to do is I want to try and run the server so it's I cleared out my console here and what we can do is we can say Python manage.py and then run server all right and you're going to get this um 13 unapplied migrations you can ignore that for now but you can see it's on Local Host Port 8000 so let's go to that and you should see a page like this this is just the welcome page letting you know that everything is okay and up and running all right so now we're going to start to work on our to-dos app so we want to be able to go to slash todos and that's going to be our index page for our to-dos so what we can do is go to um our to-do list URLs dop Pi file and this is basically the routes okay and it uses regular Expressions so this right here is for the admin side which we'll get to in a little bit but basically this this carrot symbol here means that it this is where it starts okay so we're saying any route that starts with this word admin all right now we want to take todos so I'm just going to copy this right oops and then what want to do is just take that and say todos and then anything that goes to to-dos we want to send to the to-dos URL file which we're going to create in a second so right here we can say include uh we say include and we want to use the todos do URLs file okay so if we go to to-do SL add then all we have to put in our to-dos URL file is ADD now this include right here we actually have to bring in so right here we're going to just say include comma all right so we'll save that now let's go into our to-dos folder and create a URLs file so we'll say urls.py and then in here we want to bring in the url's package so we'll say from Django docon do URLs and we want to import URL we also want to import the views so we're going to say from dot which is the current folder import the views file and then just like we have in this url's file this URL patterns we're going to just grab that okay and then let's get rid of that one and then the route we want to match here so we'll say carrot and then uh money sign so this means start with and end with so whatever we put in the middle here is what it's going to match now this is going to be just the root of to-dos so just slash todos so we're not going to put anything in there uh and then we want it to go to views and then the index function all right and then we're also going to give this a name of index so it's going to look for a function in the views file called index all right so let's save that and it's not going to work yet because there's no index uh let's see to-do is is not defined um oh I think I messed up something here yeah this should actually be in quotes it's looking at it as a variable module object has no attribute index let's see um oh actually that's right because we have no index function and it's looking for it so now let's go into our views.py and we're going to go right here we're going to say def Define Index this is how you create a function in Python and it's going to take a parameter of request because every request is going to have a bunch of stuff with it it's going to have any form submission data it's going to have the user's IP address and a whole bunch of stuff and that all goes in that uh that request file um request object so we need to decide what we want to happen when the index view is loaded so what I'm going to do is just return HTTP response uh HTTP response and then we'll just send some text so we'll just say hello worlds a world all right now in order to use this HTTP response we need to bring it in so we're going to say from uh Django HTTP and import uh we want to import HTTP response so let's save that and let's see invalid syntax uh def index request oh we need the um forgot the colon okay so now we get hello world at SL toos now I also want the the homepage to go to the to-dos so what we can do is in our to-do list and then urls.py I'm just going to copy this and let's paste that in there and then just get rid of the to-dos or what we'll do is just put a a money sign so that matches the root and that'll go to to-dos as well so if we go and just go to Local Host 8000 we we get Hello World all right so so far so good now what I want to do is I'm going to close these out I want to connect our database so if we go to settings.py and go down to databases you'll see that by default it uses SQL light SQL light is um it's a file-based database it's very simple it's really good for prototyping and and uh development but it's not something you would want to use in production unless it's a really really small site with with you know not that much data but what I would suggest is that you use either postgres or MySQL so for this tutorial we're going to use MySQL and we have to install it so if you already have MySQL installed whether you're in Linux or you're on Windows using xamp or something um you won't have to take these steps but what we're going to do is just install MySQL real quick all right so I'm going to um just split this and let me make this bigger so to install MySQL let's first do uh pseudo aptg update oops it's wrong and then we want to go do pseudo appt get install and we want to install MySQL Das server yes okay so um we're going to set a password for our root user okay let's say service MySQL status okay so it's running um now what we're going to do is we need to install the python MySQL uh module so let's go ahead and do that we're going to say pseudo um what is it pseudo app get install and I think it's python python Das MySQL d uh or not or is it DB let me try that yeah it's DB okay so now that we've done that um we need to create a database so we're going to log into MySQL by saying uh pseudo MySQL and we want dasu we're logging in as the root user oops root and then we want to enter a password okay I'm going to enter the password I just chose earlier and now we're in MySQL so let's say create database to-do list wh forgot to semicolon all right so now if I say show databases I always forget that damn semicolon um and there it is to-do list okay so we have MySQL set up and if you're using Windows and uh you can go into something like PHP my admin and just create a database called to-do list so now what we want to do is go back into our settings and we want to change up this database field here so instead of SQL light we're going to say dot MySQL and for name let's get rid of this we're going to put in our database name which is to-do list okay um let's see we're going to put in the user which is root and we want to put in the password you want to put in whatever you used and let's see we'll say host host we're going to leave blank cuz the default is your local host and then Port we'll also leave that blank for the default Port all right so now that we have that let's save it and now we want to run a migration now this next command is going to create uh all the tables we need for our admin for off and all that kind of stuff all right so let's go back up here and I'm just going to quit the server and we're going to do Python manage.py and then migrate all right so it's applying all those migrations and it's applied it's created those tables or it should have so let's go back down here and let's say wh down here in MySQL and we'll say use to-do list and let's say show tables all right and you can see that it's created all those tables for us so next thing we want to do is we want to create our model for our to-dos so we want to go into our to-dos folder and then models.py and we create a class for our model so we're going to say class too uh and then we'll just going to pass in here models. model okay make sure you put that coal in there and we're going to create our Fields so we just want to have a title so we'll set that to models Dot and this is going to be a Char field all right so anything that is going to be text or or anything really any kind of um characters and uh you want you need to set a max length for charfield so let's say max length and we'll set that equal to 200 all right then we also want a text say models and then this is going to be a text field because it's going to be longer you want this for like blog post bodies things like that and then we'll also do a created at and we'll set that to models Dot and let's say uh date time field like that and I want this to be automatically inserted so uh basically I want it to just be the the current date and time so I'm going to use a package up here I'm going to import a package from date time which is a python package and we just want to import date time and then let's see in here we just want to say default I'm going to set a default to date time. now okay we're also going to set blank to true all right so that'll do it for now let's go ahead and save this file and it hasn't done anything in the database yet we need to run a migration we'll clear that out and then we're going to say uh not pseudo we're going to say python manage.py and then let's do make migrations to Do's um oh we're getting some errors here so app Todo could is it an installed app so we have to go to our settings file settings.py and we need to add it to our installed apps right here uh so let's see we're going to put in to-dos to too. apps. todos config save that and then for this URL message I think that pertains to our URLs file this right here so I'm just going to comment that out for now and let's let's run that again okay so it created a migration with this 00001 so now what we want to do is we want to say python manage. pi and we're going to say SQL migrate to do's and 00001 okay so that created it now we need to run just migrate so python m not migrate uh manage.py migrate all right so now let's go down here to SQL and let's say show tables and now we have this to-dos unor too table so now what we're going to do is create a user so that we can use the admin panel so up here let's clear that out and we're going to say python manage.py and then we're going to do create super user and we'll do dash dash username uh username equals let's say Ad actually I'll say Brad and then we want email so D- email equals and I'm just going to put a fake email in here and then we're going to do actually that's it so we'll click enter it's going to ask us to create a password I think it has to be eight characters so I'm doing 1 through eight oh it's too common um all right so let's do I'll do uppercase P password one and then exclamation they didn't match password one okay so super user created successfully so now we should be able to log into the back end so if we say slash admin oh we need to run the server so python manage.py run server reload so let's see username was Brad password and there we go so now we're logged into the back end and from here we can add more users if we want okay we can add a username and password we can add groups and put users inside of these groups um okay and we can choose permissions so things different things they can do can they add a group can they add logs can they change permissions so this is some really cool functionality right off the bat which is really nice now notice we can't we have no uh to-dos anywhere so so to add that we're going to go let me just close these out we're going to go to um to-dos and then admin.py and from here we're going to bring in our model so let's say from models we're going to import to do okay and then we're going to say admin. site. register and then just pass in to-do so let's save that and we're going to reload our admin panel and then if you look here we have a to-do section so those couple lines of code allowed us to give us all this functionality so we can now add them them so let's say my to-do one this is my first to-do in this awesome application okay and then notice that the the date is pre-filled with right now and the time and we're going to click save all right now notice that right here it just says to do object okay now what I want to have is the title here so what we we need to do is go into our models file and we just need to say right here we'll say def double uncore St double underscore and pass in here self and then we just want to return self. tile all right so that'll actually use the title as kind of the the main field here so if we reload you'll see now we have the title if we want to add another to-do we'll say my to-do 2 and save now we have two of them all right so now we want to work in our front end we want let's just go to slash todos we want to list our to-dos here so right now we're just sending out text if we go to our views file we're just doing this HTTP response and we don't want to do that we want to render a template so instead of this we're going to say return render pass in the request and then the template we want to use so we'll say index.html all right now let's save that and then in our to-dos folder we're going to create a folder called templates okay and then sit in there we're going to say new file index.html and let's just say hello from index and we'll save okay and now you can see that it's actually loading that file now if we want to pass in variables that's really simple what we can do is just add in uh an object as a third parameter now what I usually do is create a variable called like context and if we were to say like name actually that has to have quotes So name uh Brad and then down here we'll just pass in context so now if we save that and we go to our index and let's say hello from and we use our double curly braces and we'll say name save that and we get hello from Brad okay so we can pass in values just like that um which is very similar to Express and Ruby on Rails now instead of just sending a name I want to send our to-dos so let's make a query to get those to-dos so first thing we need to do is bring in the model so from. models oops from do models we want to import to do and then inside of our index function let's say to-dos actually we'll give that'll be lowercase todos equals too do objects. all all right and then we can Define how many we want right here by putting some brackets and we'll say 10 okay now we want to pass that into our template as todos to-dos okay so now we should have access in our template so let's go to our template and what we want to do is Loop through our todos so let's put let's do a ul and by the way I'm not going to work on the front end inter um UI I'm not going to use bootstrap or anything I just want to focus on python uh the design isn't important all right you guys can do that afterwards so what we'll do is put in d uh curly braces with percent signs oops and we can say four to do in to do's and then down here we're going to say end4 okay and then here what we want to do with them is display An Li tag and let's put too. tile and then we'll just put a colon and then we'll do too. text so let's save that reload and there we go we're pulling out our to-dos now I just want to put some kind of header here so let's go up here and just say header actually you know what we need to put in all our HTML tags and everything so let's see I'm going to just take this put it in here and then inside the body let's say header and I'm just going to put an H1 and then we'll just put an HR all right so there's our header what we want to do next is we want to have a details or a show page for each to-do so let's wrap the title in a link and we want this to go to slash uh to-dos SL details slash and then we want to put the ID right here so too. we'll wrap that around the title and let's reload and if I click on that it goes to details one for that one this one will go to details 2 so now we need to make it so that that actually works so we're going to go back to our to-dos urls.py file and we're going to create a new route here so let's say URL and then we're going to do R and let's say start with with the c the carrot symbol and then details slash and then what we want to do is um we want to say we want parentheses and then question mark p and this parameter is going to be an ID and then we're going to say slw and let's say 0 comma 50 all right and then after the parentheses we'll do slash money sign which means that's where it ends and then for that route we want that to go to view. details which we need we still need to create all right so this here is what's needed if you want it to to go if you want it to to accept an ID parameter all right or yeah an ID parameter so let's save that and then we're going to go to views and we're going to create a new function here called details now for this it's going to take in a request but it's also going to take in a to-do ID okay because that's how we set up the route um let's see now we want to just grab a single to-do so let's say to-do equals and remember we have our model so we can say to-do doobs doget and then we want to pass in oops doget and we want to say ID equals Tod doore ID okay or whatever you put right here so now we need a context and we're going to return a template okay so context is going to be just a single to-do so we're going to set it to this and we want to render a template called details. HTML so we'll save that and we'll create details HTML and and let's put in an H1 and we should have access to too. tile so let's save that and try it out okay looks like we have an issue view is not defined all right um let's see let's go to URLs and it should be views not view okay so if I click on one of these details got an unexpected keyword argument ID oh you know what since we used ID here we want to use that here as well not to do ID okay and then we also have to change it here so let's try that and there we go so now we have a Details page if we click on my to-do two that's what we get good so that's exactly what we want now let's go back to details HTML and let's put uh paragraph tag and that's where we'll put the text to do. text and let's see we'll do a line break and then we'll say created uh created on Todo do created at okay save it and there we go now notice if we look at the source code this doesn't have the HTML tags and all that and we could put it in here but that's that's um that's not going to work out especially if we have a lot of templates we want to basically we can create a partial and we can include those in our templates so in the templates folder let's create a file called partials and I'm going to create a file called header. py I'm sorry not Pi that should be header. HTML and then also a file called footer. HTML and then let's grab from the index the dock type down to where the header ends we'll cut that put that in our header file save that close it up and then we'll grab the body in HTML the bottom cut that put that in footer save it close it and go back to index and then what we'll do is just throw in our tags here and we'll say include from the partials folder we want header. HTML and then we'll do the same with the footer like that and let's go back to the index uh let's see template does not exist this partials oh that should be a DOT okay and let's see let's look at the source good let's give it a title in the header file just say to-do list okay so now in the details we want to do the same thing we want to just grab the includes and put those in the det details this will be footer all right and now you can see that it has the header in it let's let's put a go back in the details as well okay so we'll say a hre and let's set that to go to slash todos we'll say go back and you guys can style this however you'd like so we have a complete crud application now with a backend with uh an admin um admin login so if you want to create resources from the front end you can do that as well so what I'll do is in our header file let's create a link uh let's see we'll put it um actually you know what before we do that I want to show you how to load CSS files and and static resources so you need to create a file or I'm sorry a folder inside to-dos called Static and let's say new file um actually no I want to do new folder CSS and new file style. CS s and let's just take the links and we'll say color green and save now we're going to go to our header file where we have our head tags and let's see we're going to go right here and we're going to do put in some tags sorry if you guys can hear that banging upstairs and we're going to say load static okay and then right under it let's put a link we'll say real stylesheet and that's going to go to go like that and say [Music] static uh static Style no CSS SL style.css all right so let's see if that works reload and now we have green links so you know that that stylesheets connected okay so now let's put our add Todo link I'm just going to go right under the header and that's going to go to slash toos slad save that okay now that's obviously not going to work yet we're going to just close all this stuff out and let's go to our to-dos URLs file and I'm just going to copy this make sure there's a comma there oh okay and then we're going to change details to ad and we want this to load the ad view so right here we'll just change this to add as well all right so let's create inside templates we'll create a file called add. HTML and let's put our uh includes here so that we get the header and footer and I think there is a way to use layouts as well um you can do that instead of partials if you want now in here I'm going to paste this in okay so basically we have a form the action we're setting uh to URL ad we're going to call the ad function uh we're making a post request and this right here csrf is going to prevent uh cross-site forgeries so you want to have that then we have an input with the name of title and the ID of title and then a text area with the name of text and ID of text and then I just put a submit button and a go back so let's save that and now uh let's see module object has no attribute add views. add oh we didn't create the function in the view so let's go to views.py okay we'll say def add requ all right now since we're we're going to use the add function to load our view to load the the form and we're also submitting to it as a post request so what we can do is Let's test to see if it's a post whoops that's not right to see if it's a um post request or a get request so we're going to say if request. method is equal to post then we're going to do so something else then we're going to do something else so if it's not if it's a or not a post request we're going to just return render request and we want to load the ad. HTML template okay so let's save that and let's see expected and indented block um it's probably talking about this let's just do return page not found to do slash add um oh I have the I have the parameter here stupid this should just be add like that uh let's see is that still wrong yeah we don't want the slash so just add well it's not working either uh let's see what if do we need a name maybe there we go okay so now we have our form and since it's a get request we're just going to the URL it's loading up our view now when we submit it it's going to make the post request so let's go back to our add function here and see what we need to do so we want to grab the form Fields or the values and put those in variables so we can get that from the request object and we're going to say dot post and in here a title and then we want to get text post text and then what we can do is say uh Todo equals and then our model and then we're going to pass in title equals title and text equals text and then finally we'll say uh too Dove all right and then after that let's just redirect by saying return redirect and let's just go to slash toos all right so let's save that and reload and then let's say test too this is a test to-do submit uh Global name redirect is oh you know what we need to bring in redirect so uh up here at the top that comes from the shortcuts so just want to put that in there all right now would probably still worked it just didn't redirect so let's go back to to-dos and there it is let's try it again and submit and there we go another test okay so we can now submit Tod dos from the front end and if we were to go to our admin area and go to to-dos you'll see that those are all listed here okay so um that's about it guys oh one more thing if you want to customize your admin panel if you want to create basically create your own template you can go in templates and create a new folder called admin and let's create a new file here called uh what do we call it basore site. HTML all right so now if we go back and reload it's completely blank and um basically we're overwriting it with this now you can change certain parts of it so let's put here block uh branding and this is all in the documentation that out of there and then we'll say end block actually that's all one word and then this is this is basically um the H1 at the top that says site Administration so we're going to give this an ID oops give this an ID of site name and let's put in here to-do list Administration and let's save that and reload okay so there's our title now um you could build this whole thing out with these blocks and if you look in the documentation it'll show you how to do all that but if you just want to kind of just change one thing like I am here you can extend the core template so up here we can [Music] say extends admin SL base. HTML and save and then reload and you'll see it's back and we've changed the title okay uh me there's all different types of blocks that you can use to change all different kinds of um elements on the in this template all right so that's going to do it guys I I hope you enjoyed this I know that there were some um mishaps but um again I'm I'm pretty new to D Jango but as I learn more I see that it is a really nice system to work with and it's great for getting things up and running really quickly all right so that's it hopefully you eny enjoyed it if you did please subscribe please leave a like and I will see you next time