Build Django To-Do App with PostgreSQL

quick demo of this Django business tutorial in this video we will discuss how to build Django to-do app with PostgreSQL so here is the final output of the Django project now let's insert a new task click on the submit button here so here you can see the newly inserted to route tasks for Anna's birthday if you want to delete a task you just need to click on this trash icon here that's it inside the video first of a we'll discuss the basics of Django framework and how we can work with database like PostgreSQL also we will implement crate operations insert retrieve and delete so I strongly recommend you to watch this video if you are getting started with Django framework what's up YouTube welcome to code affection in this Python Django tutorial we will discuss how to build django to do app with PostgreSQL before starting this video tutorial i would like to thank paypal donations for my previous works in order to make more helpful and quality tutorials like this you can also support me through PayPal donation I have given the donation link in video description and inside the first comment of this video first of all I hope we already have a development environment in favor of creating this django application it includes installation of Python itself and then we need Python package manager P IP o people in latest versions of Python P IP is already there if you have an older version of Python you have to install p IP in your system once you install p IP you can use this package manager to install the stuff the Python packages next we need to have Django framework installed on your system we will install the Django framework itself using p IP command here and when it comes to database for this application we will be using PostgreSQL or Postgres also you have to download the appropriate installation file according to your OS and then as a database management tool we'll be using PG admin for PostgreSQL and finally in order to interact with PostgreSQL from django applications of Python applications we will be using a package called P psycho PG to in order to install this package you can use this command here p IP installed p psycho PG to so that's all about the brief description on django basic dev environment for this AB development I will be using Visual Studio code editor although you can use whatever nd you wish we can create the Django project inside this folder directly using some Django commands from our command prompt so first of all we have two open command prompt from this for the directory for that you can use this shortcut hold shift then right click here then select this option open command window here so here we have open the command prompt from the same folder directory here in order to create a Django project you can use this django command django - OH - admin then start project the name of the project I will name it as to do project as a result of this command X execution here we have created a folder with project name now let's navigate inside the project folder to do project now we have to open this project folder inside our IDE for that you can do this right click on this project folder then select this option open with code or you can use this command code space period symbol so we will open this folder directory inside we should studio code editor hit enter so here we have open vs code editor from the same folder directory of the project now let's run this Django project for that you can use the internal terminal from this via score editor itself so go to terminal the new terminal then you can use this command Python and we have to mention this python file managed or py managed dot py and use this command ran so walk hit end off as you can see development server is already started from this URL here now in order to navigate inside this URL you can hold ctrl and click on this URL here boom so this is how the default Django project looks like now before getting into the further development of this application let me show you the structure of the application that we want to build for that I'm going to create a new txt file here I will name it as app structure dot txt now I will paste the structure of the application here so this application structure is something that I have manually prepared for better understanding of this project so first of all here we have the for dog with project name to do project inside that we have another folder with the same name to do project you can see the same inside this is Explorer of the IDE you can see the parent folder to do project inside then we have another folder with the same name of project inside this to do project folder we have two main paths on files settings dot PI and urs dot PI inside this setting don't PI we will deal with details of project configurations and inside this URLs Python file we will deal with routing or URL mapping for the project so that's all about the project we have the parent folder to the project and inside that we have another folder bit same name to do project containing these two main Python file now inside a Django project as much as applications we need in this project we are going to create a new application to lose inside the project so this application to dos will be specific to do operations as you can see inside this application structure we have to discuss various files Python files and folders people discuss them in various stages cause the app development so first of all let's create this app to lose for that I'm going to create one more terminal inside this IDE here in order to create a new Django application you can do this Python manage dot py then here is the command start app the name of the application so it will be to dos now let's execute this command here as a result of the command execution here we have the new folder to dos now as now every time when we create an application we have to tell this project we have created an application called so and so we can mention that inside the settings dot py in this project folder here so here is the file settings dot py so you can see this array installed so we can see some default applications which already added by Django framework itself we will discuss them in a bit now let's add the new application that we just created to loose now let's discuss about the database part of the project for this jungle to-do app we will be using PostgreSQL in order to implement the database part of the we will be using object relational mapping abbreviated as O R M for example in dotnet technology they have entity framework in case of PHP applications they have CakePHP it also includes an iro in case of Django framework it already includes a no arrow basically this forum allows us to define the structure of a table with Python classes usually such classes are usually called as models and inside the class we will define some properties and this class will be to represent a table and properties inside this class will represent the column inside the table okay once we define this Python class or model we will do a process called migration during this process our Python class will be converted into corresponding physical tab in our TB so that is one of the basic advantage of using ir other than that we are on provides if we're to access or manipulate data in our DB previously we have done those operations with our sequel script nowadays with the help of Oya ROM we can do that inside our Python code itself now let's look how we can use this wire of inside our application so first of all we have to create a Python model class for that inside this app folder to loose we have this file models dot py now let's create a model cross here so class and I will name this class as to do and for this class we have to inherit a class from this namespace here models so we can do this models dot model class can be inherited here actually inside this base class model we will inherit the features that we want to work with wire so for this class model to do we have a single property content here we have to specify the behavior of the property when it actually converts into tap will call them during migration for now I will define the data type of the corresponding column here for that I will do this models dot text field Clause can be used here text field so by defining this model class here we will have a table called to do with a column content inside this column we will store the actual to do tasks other than this column by default this theorem will already insert a primary key column ID so let's look how it is converted into actual physical dB so first of all let me open the database management tool for this PostgreSQL so it will be PG add me so here we are inside the database management tool PG at me now let's create a database for the app for that I pick on this databases note here and create database I will name this DB as to do dB let's save this now back to the editor here here inside this project we have to mention newly created database connection details that we can do inside the project settings taught by file here inside the file you can see this object default inside this databases object first of all we have to update the engine instead of SQL light we have four square SQL so josue SQL and here we have to provide the name of the database which is to do dB after that we can provide the credentials to connect the DB like user name and password so first of all we have user name user is equal to post press is the name and password is same for the BB sub just copy this and pasting below that password finally we have to mention the host since we have the BB inside the same system here I will set it as local host so here we have the connection leaders to the newly created db2 do DB as the next step we can go for migration during migration these models Python models will be converted to corresponding objects or tables in our prosperous dB even though we only created a single model to do inside this application there are some other models which already comes with default applications in this project when we create a new Jiang core project we can see there are few default applications which is mentioned inside this settings don't buy file here installed apps here we have added our newly created app to us before that we have these default applications inside these apps Django has few models to bring some default features into the project for example with these default applications we can have the witches like user registration user authentication authorization including drawer authorization etc so in order to implement those default features into the application it has few models also so when we do the migration it will also create the tablets for these default models which is included inside these applications now let's see what are the steps involved in a Django migration mainly it consists of three command execution so first of all we have to execute this command Python or manage dot py and here is the command make migrations and the name of the application in this case we have to loose actually with this command make migration we will let the project know there are some modifications in our model as a result of this command execution it will create the folder here migrations with a single Python file for a single migration suppose that file name created as a result of this command execution is something X X X after that we have to execute another command like this SQL migrate and name of the application which is to dos and the name of the file which is created as a result of this command execution so it will be something X X X okay as a result of this command execution SQL my did actually generate the sequel script for the BB based on the Python file which is created as a result of the force command execution so it will be something like create trouble or create a procedure or whatever or update command whatever it may be whatever the changes we made in our model corresponding sequel script will be generated with this command here and finally in order to execute the a sequel script we have to execute one more final command so let me copy this and pasting below that and that particular command is here migrate that's it with this command the sequel script which is created as a result of the second command here will be executed in our actual DB as a result of that corresponding physical changes will be made in our DB so this is the three steps involved in a django migration okay for now I want to do the migration step by step meaning if we do these three steps now it will create the table for our newly created model to do and also for the morals which is inside the default application here instead of that forceful I will do the migration for this default model and then we will do the migration for the newly created model here that would be better to track the error if something happens so first of all let's do the migration for the default models in our default application so first of all we have to comment this newly created model here so you can use the shortcut hold control then forward slash that's it let me save this now we have to do the migration for these default models here for that we don't have to execute all of these three commands we just need to execute this class command here so let me copy this and here we can do this Python managed PI then migrate command let's execute this so here we have executed the command successfully as a result of that you can see the newly created folder migrations with with corresponding Python files we can see the corresponding default moral tables in our DB here let's open this DB here and inside schemas you can see the newly created tab so these are the ten tables from our default application now let's do the migration for new models let me uncomment the model here you can do that with the same shortcut hold ctrl then forward slash let's save this and back to the terminal here we have to do these three steps here for our custom model of manually created model so let me copy this make migrations command here and back to the terminal I will paste that here hit enter so as a result of this command we can see a new file inside this migrations folder with this name 0 0 0 1 underscore initial dot P 1 and B 0 0 0 1 that we have to provide inside the next command here so it would be 0 0 0 1 so let me copy this and pasting that here hit enter you can directly see the sequel script for the model that we have here have you can see here create double traduce underscore to do and here we have the default column ID for primary key and here we have the content column and finally we can execute this command here to create the corresponding table in our physical dB let's see what happened in our DB so you can see we have one additional table to lose underscore to do right click on it and you can execute this command here first of all we have the primary key column ID and the column for content which is used to store the tubu tasks you don't have to insert values into this ID column it will start from 1 and incremented by 1 upon new record in session it is actually managed by Postgres DB itself and we only have to provide the value for this content column let's look how we can work with this Postgres DB from our Django project as a next step we are going to configure routing for the app for that you can see this file URLs dot PI inside the project folder here inside this urs dot pi we have an array URL patterns it already has a path for had been for slash so every request with path admin for slash will be handled inside half file URL or pi inside this default app add me this default app is already mentioned inside the settings not pi file here inside this array installed app like we discussed this app is specific to some default features for you so indication authorization including lord authorization also so we can access those user authentication or login page using this admin /and you can test here for slash admin so here we are redirected to the user authentication page using this login form we can authenticate into the application for now this is a different topic for now let's look how we can configure routing for our to do application so that back to the file you are restored by here like this URL mapping requests with URL pattern of the type to loose forward slash should be handled inside this app folder here for that we will create the same folder urs dot pi inside this app folder here so let me create the file here URLs dot pi and inside this parent project urs dot pi file we can do this path then request off the guide to lose for slash will be handled inside this file here URLs dot bye inside the app folder to dos for that first of all we have to use the function include and then we just need to do this include and we will mention the file you are us from our app folder to dos o 2dos dot URLs so every request of the type to rules for slash will be handled inside the file URL start by inside the app folder to loose here first of all inside this file also we have to have this import statement so let me copy this and inside that we just need to have the same array URL patterns and we copy this and pissing here for now I will just add a single route here path and the URL path will be something like this list /and we have to map this URL into a view function inside the app for that here we have the file used by here we have to define views functions for newly created URL paths I will define a view function like this list to do items for this function we have a single parameter request for now from this function we will just return a response so return in order to return a response we have to import the class response saw from Django HTTP import HTTP response and we can use the same Clause here inside that we will just return this from and then name of the view function so let me copy this and pissing here let me save this and back to the URL start by file here first of all we have to add the import statement so from we have to import all the functions from views so we have to use this period symbol import views now we can mention that newly created view function here views dot list to do items let's check this new part before that let me save all of these modifications and back to the app here we can access the URL pattern here like this to ruse for slash list so here we have the text from our view list to do items basically with this URL here we want to list all of the to do tasks that we are going to insert into the table for that we have to update the view that we have just created here history of just returning a text from this we are going to entertain and as tml from you hear such htmls are called templates in Django projects in order to work with Django templates we have to follow some patterns for example we have to add templates inside this through loop app so inside this to-do app we have to create a folder templates again inside this folder we have to create another folder with the same name as that of this app here so which is to dos can see the same inside this app structure here application folder tools we have a four door template inside that we have another folder with the same name as that of the app now inside this folder we have to create an HTML file with this name so let me copy this file name from here now let's create the HTML file inside the folder first of all we have to add the basic document type of HTML and then you can use the abbreviation here exclamation mark then hit tab here we have the basic how to HTML tags it includes basic document type for HTML and HTML tag with head and body tags first of all I will change this HTML title as to dos for this app development we will be using bootstrap so we have to add corresponding stat sheet and JavaScript files so let's go to the official website get bootstrap calm now click on get started so here we have these so here we have the required start sheet and JavaScript files so first of all let me copy the CSS reference and then back to the app here I will paste that just about this head end tag after that I will copy the CSS reference and I will paste that about this body end tag here along with bootstrap we will be using for our some icons so let's add curls morning CDN reference so let's search for CDN for for our song I will go to this website here CD nsj calm and let's copy this all dot min dot CSS reference back to the app let's add a link for the stylesheet I will paste the reference here so this is how we can add external stat sheet or JavaScript file into a giant core template file now let's start designing this app first of all I will add a background color so I will use the bootstrap class BG light now inside the body I will have another div with class container inside that we will work with bootstrap grid system so we will have this div with class draw and in order to add a top margin we can use this class empty of the arrange file so it will add some margin at the top and inside this day we can use the Eclipse system div with class called MD 8 and we have to add and offset so we can use this offset MD 2 inside this we can show the actual content for that I will use the bootstrap card so we can have this div with class card inside that we can have basically to do first of all we can't head oh god head or in order to add some shadow we can have this class shadow - or - SM and we have to apply the background has white we can have this class BG - white and for the body of this card he can have another day with cross card - or - body inside this card body we will work with to do tasks for now inside this car had though I want to show a title for this app so that I will use the h1 header with few Moosa places display - five and in order to apply a text color I will use this class text info inside this I want to show a phone hours some icons so I will have this I tagged with few classes for the icon so fast then far - check double to show a double check after this for Eichorn have assured this happening to deuce so here we have the template HTML for the view that we have just created here now in order to invoke this or render this new HTML file inside this view we have to make few modifications here insert of this HTTP response we have to we have to call this function render as a first parameter to this function we will pass the request itself as a second parameter we have to mention the path for the file we just created which is here to lose underscore list so corresponding path will be something like this - duze for slash to do underscore list dot HTML okay so when we mentioned the path reference for template file we can start with this file - duze inside the template folder okay - duze inside that we have the file to do underscore list that's it now let me save all of these modifications here back to the app let's reload this page here boo so here we have the updated view of the application as a result of adding django template with for now some icons and bootstrap CSS style sheet now for this app development we are entirely depending on the bootstrap starchy if you want to add some custom style sheet we have to add an extra stash it inside the app for that you can do this like we have this template folder we can add another folder called static inside that folder also we have to create a folder with the same name as that of the app to loose inside that we can add this style sheet with some name stars dot CSS inside the style sheet you can have the custom styles for the app and in order to reference this statute inside the template here you just need to do this here we can add the link inside this HOF we have to mention the part of the statute here for that we can use the ginger template here so I do start with this curly brace and with a percentage symbol and it also ends with percentage and with a closing curly brace inside this you can do this static means we are going to refer a file from this static folder here and here we have to mention the path to dos for / styles dot CSS other than this when we want to load static content into our app we have to add one more thing using dinger syntax we have to mention that we are going to load a static content so Lord static and we will cross this so this is how we can add custom starch it into our Django project for this app development we are not going to use this chart sheet I just want you to know how to work with custom style sheet or JavaScript files if you need basically with this URL for slash to root for slash list begin then to list all of the to root tasks that we are going to insert into post cristobal so first of all let's look we can insert or add to route us into post cristobal from django application first of all we have to have a form to add to do tasks that we can add inside this card body here so we need a form before now I will keep this action as empty in order to prevent showing autocomplete from previously posted form that as I want to set this property autocomplete as off so that we autocomplete for input controls inside this form will be disabled inside this form we will have the input control with last form - control now for every form control we should have a name so that we can identify the data at this our side so I will just name it as content but along with this input control we have to show a submit button also I want to show them like input blue in bootstrap and you can see here let's search for input group here I want to show the text box and button submit button like this one here something like this one okay a button which is attached to the button submit button for that we can do this first of all we will enclose all of these with a deal having this class input - Jew and we want to move this input control intuitive here now we have to show the submit button that we can do inside another deal here with class input - drew - append and I want to apply the text color so I will use this bootstrap class text - info inside that we will have a span with clause input glue text you want to apply the background as white so we will have this class vigie vigie white along with that i want to remove all of the vertical padding so I will have this class py - zero inside this pan we will have a submit button off the type submit' add few classes from bootstrap bt n then BTN - sm then we have to apply the text color with this class text - info okay so here we have the submit button and for this submit button I will use phone over some icon so we will have the I tak with classes far than far - less - circle in order to allows this button more we will have this class for - LG let me save this and back to the application let's look how it works let me rewrite this page here okay that's it so here we have the text box along with the submit button now let's look how to submit before so back to the editor here first of all inside every django form we have to add a special tag for see as our f first of all let me add the token here CS f underscore token so basically so basically CSRF token is a value which is used by the server to identify whether the post request or response is from a trusted source or not means anyone can make a post because similar to the form here with the exact data format and the server can only identify whether this form submission is from a trusted or non trusted source only using this CSRF token it includes a unique value for CS RF and validation at the server side when they post because received so all of this procedure is made simple in Django frameworks using this CSRF token so using C as our F we can prevent post requests from malicious sources okay now let's look how to post this form here first of all we have to set this attribute method as post now inside this action we have to mention a relative URL to which we can post these form datas for now we don't have any such URL or route so let it be to those basic URL pattern for our app to dos followed by something like insert underscore to do now let's add this URL inside the application URL file here that we can do this part this time we have insert underscore to do for this URL we need a new view function so function will be something like this insert to-do item for this function we only have a single parameter request now we'll set the type as HTTP request now let's add this class import here for now I will just copy this same line here we can modify that in a let me save this and back to the URLs here now we have to mention the newly created function here view function we use dot insert to-do item now back to the view function here as we have mentioned we have to insert the two root tasks that we have posted from the form here so the datas will be entered into this text box that you can see here and we have to save that into post press tab to loose so let's look how we can do that first of all we have to retrieve the data content from the request parameter here for that we can do this content is equal to request from that you can access this dictionary post and we have to mention the name of the control we have namely control as content so let me copy this and we have to provide that here now inside this variable we will have the text from this input control that we have seen here okay now we have to insert that into Postgres DB for that we have the Django or Arum you don't have to write the direct sequel query so we will just do this first of all we will create an object of the model which we have inside the models file here to do so here we have the object to do and we have to create the object of the clause to do that we have to use the namespace models so we can do this from dot models import to do class inside this class constructor we can pass the value of content so let me cut this and pissing here so here we have the to do model object now in order to save the function we just need to call the function save from our object model finally we have to read it into the route here so we will do this return and we have to import this shortcut redirect redirect here we can provide the URL for slash to dispose Lashley's for we list all of the to do tasks that we have inserted so far I want to make one change for this form action attribute here instead of directly providing me you are like this we can use another method which is mostly recommended so I do be something like this curly brace and we can use this URL and here we have to provide a name for the URL that we can discuss in a bit actually we want to post the form data into the new route that we have just created here so instead of providing the exact URL like to lose four slash insert to do we can use another method like this we will provide a name for this route here something like insert underscore to-do item now we can use the name inside the action here so by using this method you don't have to worry and btv URL pattern here as long as the name of the URL remains same so this is a recommended way of referring URL patterns in django applications so let me save all of these modifications here now let's try to insert a new task go to gym now let's submit this we have submitted the form and we have redirected back to the same route now let's check whether the record is inserted into post Chris DB or not let's execute this select style statement again boo so here we have the new record for the content or the task go to gym along with that you can see the primary key as one which is automatically created by Postgres DB now let's look how to retrieve and display all the inserter to route us just below this form here for that we just need to update the view function here list to-do items for that we can do this we will have this variable X and we can retrieve those records into the variable here like this to do model from that we have this objects and from that we can call this all function now inside this property X we will have all of those to route us that we have inserted now we have to pass these lists off to do tasks into the template HTML inside the template we will list all of them so first of all in order to pass these lists we have to do this first of all we will make use of the variable context and we can assign that here like this it is an object it is used to pass that is from view functions into our template and we will pass this inside a property something to do underscore list now we can pass this context as a third parameter to this render function here so the insert of equals we have to use : now let's look how to display all of these list of to dos inside the template here first of all in order to do that I will use an unordered list with a class from bootstrap list - or - group now inside this list we can I trade through the list that we have passed from our views function here to do list for that we can make it of the gingers index for for loop like this for to do in to-do list that we have passed here to do list let me copy that and paste in here and for this for loop we have to have an end and for inside the for loop we can show the task for that we will have this Ally element with bootstrap class list do - item inside that we can show the content to do dot content so this is how we can display the data from the variable to do and inside that we have the content that we have passed from our view function also I want to display this form as an ally element inside this please here copy this la element I want to have analyte element for thee for just about this for loop and inside this la element we can show this form so let me cut this and paste in here let me save all of these modifications and back to the application let's reload this page do so here we have the unordered list as a first element here we have deform for inserting new to do task below that it will list all of the tools that we have inserted so far now inside this template for loop here we can do one more thing we can show an empty notification for that we can make use of this empty and now when the to-do list is empty we can show and item similar to this one now instead of this content we have to show something else saying this list is empty so over that we can have this span with a class from bootstrap font - italic inside that we can show this no to-do item found so in this baby can show the warning for the user when this list is empty now let me insert one more item here now let's submit this so you can see the newly inserted item here finally inside this application let's check how to delete a to-do item so back to the template HTML here for delete operation it is better to use a post request rather than get requests so for this delete operation we have to make a form here for now I will just keep this action as it is so method will be post we need to align this Delete on to the right of the content so you can add this class from bootstrap fraud right and we have to set the display as inland so we can use this class D - in line like we have done for the in third form here we have to use this CSRF token so let me copy this and pissing here and we only have a single button so button which is of the type submit' for this button we only have a single class BTN inside this button we can't have this I tagged for for our seconds so we can add these classes for then for - trash - alt in order to allows this button more we can add this for algae class and in order to change the text color we can use this class text - danger we can also add this class plot right here - right so that's it let me save this and back to the application here let's reload this so real here we have something went wrong sorry here we have a typo after this class fraud right we have to have a space let me save this back to the app here below this that's it here we have the delete button now let's create a view function for delete operation so back to the view let's create a new function for delete operation function name will be something like this delete to-do item for this function we have two parameter requests also we need the ID of to do which is to be deleted so to do underscore ID in order to delete an item first of all we have to find the record to be deleted so I will define the property to do to delete is equal to you can make use of the model class to do and we can access these objects from you can call this function get into that we just need to pause the value of ID so we have the function parameter to do ID in order to delete this we just need to call the function delete from the object delete after all we have to redirect to the list route so let me copy this and paste in here now let's create a route for this delete view now let's create one more path so let me copy this and paste it below that URL will be something like this delete underscore to do through this route we have to pass the value of this to do ID parameter that we can do this we will have an integer value to do and let's go ID that's it and corresponding view function will be delete to-do item and we have to name this route as something delete to-do item okay now we have to mention this URL inside this form here I began do like we have done here so let me copy this and paste in here instead of insert we have delete along with this we have to pass the value for this ID parameter to do ID that we can retrieve from this property to do so we just need to do this to do dot ID that's it let me save all of these modifications here and back to the application inside the tablet here to dos we can see all of those two records now let me try to believe this to do task it is not working let's set what is happening okay we have to provide the full slash at the end of URL mapping let me save this let me try to delete this record again do so here we have deleted the record from troduce let's take that inside the table here so that's it guys here we have successfully deleted the to do tasks we can now load this project source code from the github link given below in video description so this is a basic Python Django tutorial for bigness with Postgres DB in order to make more helpful and quality tutorials like this you can support me through PayPal donation I have given the link enforced comment and video description please like and share this video with your friends and colleagues so that they can benefit from this have a nice day bye

Channel: CodAffection

Views: 37,444

Keywords: create To-Do app with django, django To-Do app with postgreSQL, python django To-Do app, to do list in python, build a To-Do app, make To-Do app with django, postgres django To-Do app, To-Do app for django beginners, django beginners tutorial, python django tutorial, postgres + django tutorial, CodAffection

Id: Nnoxz9JGdLU

Length: 55min 42sec (3342 seconds)

Published: Tue Oct 22 2019