Complete Django CRUD Operations

quick demo of this video inside this Python Django tutorial we will implement complete django crate operations inside a form containing select control or drop-down so here we have the final output of this tutorial first of all let me show you how you can insert a new record here if you submit this record corresponding record will be inserted into the table if you want to update this record you can click on this pencil icon here let me change this position to senior developer submit this record in order to delete an employee you can click on this trash icon here so here we have deleted the record so basically inside this tutorial we will discuss how to design a form using form model and bootstrap and then we will discuss how to show this drop down using foreign key relation and most important we will discuss how to implement all of these complete credit cooperations so I hope you will find this tutorial helpful for your upcoming Django projects if you find this video helpful please thumbs up the video and for more hours and videos like this please be subscribe to this channel called affection what's up YouTube welcome to Cod affection in this Python Django tutorial we will discuss how to implement complete Django crate operations inside a form we have included a drop down inside the form into that control we have populated a course from a foreign key table before getting into the topic I would like to thank for your paypal donations for my previous books 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 force command and video description so here is my visual studio code editor I will be using this IDE for the app development as the first step we have to create the Django project for that here is the folder directory we want to create the project inside this folder so as a first step we have to open the command prompt from this same folder directory so you can use this shortcut hold shift then right-click and click on this open window here so here we have open the command prompt from the same folder dev tree so here is the command django - admin then start project the name of the project for this tutorial we will work with employee details so I will name this project as employee project hit and off as a result of the command execution here we have the project folder with the same name now let's navigate inside the new folder using CD command in order to open this project folder inside vs core editor you can use this command code space period hip and off so here we have opened the vs core data from the same project folder directory first of all let's look how this fresh Django project looks like for that we have to execute few django commands so here is the terminal from the IDE in order to run this server you can use this command Python and we have to mention this file managed or py managed or py then run server hit enter as you can see here this website is already started from this port number 8000 in order to open this URL you can use the shortcut hold control then click on this URL here so this is how the fresh Django project looks like now back to the IDE inside a single Django project we can have multiple applications for different purpose for this video tutorial we want to implement code operations or employee records for that purpose I'm going to create a single app called employee register for that let me create one more terminal here in order to create the app you can execute this command Python manage dot py then start app and we have to name the app here I will leave it as employee register so here you can see the folder for new app employee or lister before continuing with this project development let me show you the structure of the app that we want to build for that I will create an extra txt file here app structure I have already prepared the Django project structure so let me paste that structure here so here we have the project folder the parent folder and here we have the project specific folder employee project that is here inside that we have two main files for the configuration of project we have setting dot PI and for the sorry it is Settings dot PI and for the routing for the under project we have URLs dot PI and here we have the app folder employee register we can discuss rest of the folders and Python files in various stages of the app development now let's continue with the project development since we have created a new application employee register we have to mention that inside this project settings dot PI file here now you can see this array installed apps so let's mention that here employee underscore register now let's work with database part of this project as we have already mentioned for this Jango crud operations we will be using Postgres DB so first of all we have to create the DB in my system I have already installed database management tool for Postgres which is here PG admin so let me open this now let's create the BB I will name this database as employee dB newly created database can be seen here employee dB now back to the IDE we also have to mention the database connection details inside this same project settings file here which can be done inside this database object default property instead of SQLite we are going to use Postgres so Postgres SQL and here we have to provide the name of the database which is employee DB then followed by the credentials to access that DB first of all we have you so I have said it as Postgres then we have password which is also pause brace and finally we have to set the host since we have the database inside the same system we can set it as localhost host is equal to localhost so these are the configurations which is to be given to later to database connection details now we have to do the migration as you know Django framework already has an aura which helps the developer to work with database we just have to define Python class inside the model and then the ORM will create a physical tab will corresponding to that python class for that will be using Django migration so let's look how we can do that inside any Django project there are some default applications which you can see inside these installed apps are here other than this employer register app you can see there are few apps which already comes with a default Django project inside these default apps there are some Python models associated with our user registration user authentication etc so forth therefore we have to do the migration in order to create the physical DB corresponding to these default app models for that we just need to execute this Python managed or py then just execute this migrate so here we have successfully executed the migration command now let's look what happened inside the post list DB so here we have the database inside schemas inside that you can see these ten tablets from our default chanko applications all of these tablets are related to user authentication registration etc inside this tutorial we are not going to touch any of these tablets from our default apps let's create few models for our app develop we can define those model classes inside this models dot pi file here for this app development we need two models one for employee and one for position so first of all let's create the model for employee we have to create the class employee and we will inherit this class from model class from models namespace we have to inherit this model class in order to have the Jango IRM or model features here we can define class properties corresponding to table column which we need for employee table we have to have full name and let's specify the type of this column for that we can do this models dot can feel instance can be used so inside this full name column we can store strings we can specify the maximum number of characters using this max length I will set it as 100 like this we have to create three more properties so let me copy this and paste it below that after full name we have EMP code then we have mobile number and finally we have the position and we have to modify the max length property here for this position property we have to depend on another tablet which is position table so let's create the corresponding model class so class position and we have to inherit the corresponding class model inside this we only have a single property title is equal to models dot calf field and max length will be something 50 okay so here we have the position model and here we have the employee model for any model there will be a primary key which is automatically created by these Arum itself it will be ID it will start from one and incremented by 1 upon new record insertion it is managed by the Django forum itself now we are going to specify the position property inside the employee model with this position tablet for that we can use the foreign key relation foreign key and first of all we have to specify the model for foreign key so which is position and finally we have to specify this on delete is equal to models dot cascade since we have said on delete as cascade whenever we delete a record from this position table employee table of course will also be deleted with that particular position ID so here we have defined the model for this project now let's do the migration that back to the terminal first of all we have to do this Python manage dot py and then we have to execute this command make migrations and then we have to provide the name of the app which is employee underscore register hit enter as a result of this make migrations command you can see a new folder here migrations inside that you can see this Python file inside that you can see the Python representation of modifications with respect to previous models now we have to execute another command Python managed or py and then we have to execute this command SQL migrate then we have to specify the name of this file as a result of this make migrations command so it will be 0 0 1 and then provide the app name employee register hit enter sorry here we have an incorrect order first of all we have to provide the name of the app then after that we can provide the file migration name he panda as a result of the command execution here you can see the corresponding sequel command to apply those modifications so first of all here we have the sequel quarry to create the position table and then followed by the employee table also now in order to execute this sequel script you just need to execute this command Python managed or py and migrate okay so this is the final step for the migration for default models we just need to execute these commands when we when we create models we have to execute these commands first of all make my creations then SQL migrate then followed by migrate now hit enter my division command is executed successfully let's check that in refresh this tabs node you can see we have two extra Tablas position table and employee tab first of all we have the position table then employee table both of these tablets are empty for now as we have discussed you can see the automatically created primary key ID inside these two tables first of the model properties are converted into column tablets here for the foreign key which we have mentioned here position we have position ID column so inside this application we will have an employee form for position we will have a drop down inside that position drop down we will display all of the positions from the position table here and corresponding selected position ID will be saved inside this position ID core now back to the IDE in order to implement all of the Django cred operations we have to have view functions to handle each of the current requests which can be done inside this views by file here first of all I will define a view function to retrieve and display all of the employer course so here is the view function employee list and this view function has a single parameter request for now I will just add this return statement here like this we need two more view functions so let me copy paste this two times and the second function will be employee form inside this view function we will deal with get and post requests for insert and update operation and here we have the final view function for deleting an employee record inside the employee form view function we will deal with insert and update operation and for delete operation we have the final view function employee delete now let's configure routing for the application for that inside this project folder you can see this urs dot PI file that you can see this are a URL patterns inside that you can see this URL mapping for admin for slash if you navigate inside this URL forward slash admin we will be redirected to login page so all of these URLs which starts with admin forward slash is handled inside the default application admin inside that we have the file URL start by so all of the requests will be handled or configured or mapped inside this URL s dot PI file like that we have to configure routing for the employee register application for that we can do this path and the path will be employee four slash and all of the request which starts with employee forward slash must be handled inside a file you are as dot PI inside the app folder employee register for now we don't have any such file so let's create the file here URLs dot pi now in order to mention the newly created URL dot PI file first of all we have to add this include import statement and we can do this include inside this we have to specify the namespace employee register dot URLs now all of the requests which starts with employee four slash will be handled inside the newly created urs dot PI file here and the code will be exactly similar to this pattern URL stored by file here so let me copy all of these file and then I will paste that here you don't need this admin import for now I will just add two routes one for the form and one for the list of employees so here is the routes so in order to access this first route we have to make the request into this URL localhost then port number four slash employee which is the primary route for the app and in order to access this route here we just need to do this employee for slash list okay and when we make a request into this empty route here we have to call this view function here employee form so first of all we will add the impulse tainment for the view here we have to import all of them from abuse so everything from the view namespace is imported into the file here now we just need to do this views dot employee form and for this list out here I will call this employee list view function views dot employee list that's it now let's update the view functions accordingly in order to show employee form and employee list we will be using Django templates in order to work with templates in Django first of all we will create a templates folder inside the app folder in this case we have the app folder employee register inside that we have to create another folder with same name a set of the application in this case employee register so let's create those two files templates inside that we have to create another folder with thee with the same name as that of the app which is employee register so in this application we'll be creating three templates file first of all we will have the base HTML inside that we will have the basic HTML declaration then HTML head and body part and etc we will show the employee form inside this template file employee underscore form and in order to show the tablet to list all of the inserted employees we will use this file employee list dot HTML they will discuss how this pattern and HTML templates works together so first of all let's create these files first of all we have the base dot HTML file and then you will have another file employee underscore form dot HTML and then we will have another file employee underscore list dot HTML inside this base dot HTML file we have to have the HTML declaration first of all so here we have the HTML declaration head and body part let me update this title I will set it as employee register first of all inside this pattern HTML file we have to provide a space where child can place can be rented for that we can make use of the block inside the template so I will do this block content and let's add an end for this block and block content now inside the child template we can do this first of all we have to mention that this base HTML is the parent template for this template here so we can do this extends and let's specify the path of this piece HTML employee underscore register forward slash base dot HTML now we have to create the same block that we have mentioned here so let me copy these two lines here then I will paste that here now inside this block we can add whatever HTML element and the same HTML elements will be rendered in place of this block in pan and HTML for now I will just add a paragraph here for now I will add a sample text here we will show Django form to implement cred operations we have to do the same inside this list HTML also so let me paste that here inside this template will show a list of employees from the tablet so here we have the pattern HTML and here we have the child templates now let's look how it can be displayed inside the application first of all we have the Employee List inside that we will list this HTML employee underscore list we can do this render as a first parameter we can pass the request parameter as a second parameter we will pass the HTML path so it will be employee underscore register for slash employee underscore list dot HTML and in case of the employee form view function here you want to show this HTML employee form for that let me copy this and we can paste that here instead of this list we have employee underscore for now let me save all of these modifications and let's try to access these two routes here for slash employee for slash with this URL this URL mapping is used inside the view function we have rendered this HTML employee for now let's try to access this list route employee for slash list that's it he will show the list of employee from the table so this is how we can work with parent and child template in django applications now for this application development I will be using bootstrap friend and style sheets so go to the official website get bootstrap calm and this application will be using bootstrap for now click on this get started here we have to add these CSS and JavaScript files so let me copy this CSS reference back to the IDE now let's paste that here finally we have to copy paste the JavaScript reference also inside this application we will be using for our some icons so let's add corresponding CD and reference also phone or some CDN now go to this website here CD nsj calm now let me copy this CSS reference for all dot mean dot CSS now let's create a link for the CSS and let's paste the copied or friends here that's it now let's start designing this application with bootstrap so first of all we will have this deal with class container inside that we want to use the grid system so do so you will have called md-10 and we need an offset of column 1 so offset md 1 we want to set a top margin so we can use this class margin top-of-the-range 5 that's it now we want to show the end their application inside jumbotron component inside the bootstrap that you can see here let's search for Jumbotron I will copy the force jumbotron HTML and I will paste that here first of all we want to show the application heading we can set it as employee register and inside this paragraph we will just show this Python Django project for implementing cred operations now I want to show the paragraph text in italic so we can add this class font italic so here we have the heading part of Jumbotron just below that we have the horizontal line below that we can show the body of Jumbotron actually we want to render child template HTML here so I will move this block into that place and we can paste that here now all of the child template will be rendered here let's check if it is working or not let me save all of this back to the application here let's reload this boooooo so here we have the application title employer register Python Django project for implementing current operations just below the horizontal line we have the HTML from child templates we will show the list of employee from the table now let's try to access the route for the form so here we have the paragraph from the corresponding template Django form to implement quite operations now let's look how to design this Django form to implement correct operations first of all we have to create a model form class for that back to the IDE let me create a new file for the form forms dot py inside that let's create a class I will name it as employee Fork we want to inherit this class from model form so first of all we have to add the import statement from Django import forms now let's mention the base class here forms dot model forms basically with this class employee form we are going to design a form with required HTML controls actually we already mentioned those properties here full name employee code mobile and position so we can reuse this class to create this model form class here for that we just need to mention this inner class meta class meta and here we just need to mention the model as the employee model that we have created here so that first of all let's add the corresponding import statement from morrel's import let's assign that here employee now if we want all of these properties as a field inside the form here we can do this fields is equal to underscore underscore all underscore underscore now let me save this and back to the view function here we are going to work with employee form so we have to update this view function accordingly first of all we will create an object form we will assign an instance of the model form that we have just created here so let me copy this and I will create an instance with that here now let's add the corresponding import statement from dot forms import employee for now we have to pass this object form into this template that we can do here we will create a new object and we can pass that with this form form now back to the HTML file here now in order to show form controls according to this model form class here first of all let me remove this para from here and then we can use the double curlies index here inside that we just need to provide that form okay let me save this let me reload this so that's it guys inside this form you can see the controls corresponding to the properties that we have inside this here you can also customize the model here if you want to remove any of them you can mention that using a couple like this for now I will provide the fields like this first of all we will have the full name and we will have the employee code then mobile and finally position save and then reload this so you can see all of them as it is now I want to show this mobile before this EMP code I will just move this before the EMP code let me save this let's below this as you can see the order is changed the Django framework will decide what type of form controls to be displayed for each of the properties that we have provided inside the model here for full name EMP code and mobile it shows this text box okay and for this position we have a foreign key with this position tablet so in that case it will show this drop down here we can discuss how this position drop down is to be populated for now let me inspect this HTML which is printed as a result of the syntax here for so right click then inspect as you can see here for each property we have a labelled text box pair so first of all we want to enclose these labelled text box pair inside a form control I will do this we will have this form tag and with this form tag we will enclose this form syntax with this form we want to post data into the server so we can provide the method as post also I want to prevent from showing autocomplete from previously posted datas so we have to set this attribute autocomplete and I will set it ask off as a security for this form we have to add CSRF token meaning outside the Django servo anyone can make a post requests if anyone going to make a post request similar to this form here they can also pretend to be an insider in that way hackers or anyone can make problems inside the system in order to avoid this problem we will use CSS our of token which is a unique value which is provided by the Django server itself and when we make a post request we will append this same token to that posted form data in that way Django server can identify whether this post request is from a trusted source or not for that we just need to do this C as RF underscore token rest of the procedures will be handled by the Django framework itself it will create the unique CSRF token while rendering this form and when we post this form same token will be appended to the form data sorry we are not going to use the double curly brace instead we use the brace percentage symbol let me save this and back to the application let's reload this now let's inspect this here you can see a hidden field to store the CSRF token when we post the form this token will be sent to the server and the server will validate this token okay that's all about the csr of security now let's look how we can make this form more appealing of course we can do that with bootstrap front-end free book like we have done in previous to-do app but if we are going to do that we have to hard code each of these liable textbox pair instead of this single line here so without hard coding we can make this form more appealing using different and framework bootstrap with the help of apip a package called crispy forms okay so first of all let's install the package crispy forms let's open one more terminal here and here is the corresponding command p IP in store Django - crispy - forms hit end oh sorry here we have a type of it Django lets a baby command so here we have successfully install the package now we have to add the package inside the installed apps in settings dot PI file so let's add that here crispy forms this package crispy forms easier to customize the forms or form controls using friend and stat sheet like bootstrap uniforms then foundation etc so we have to specify which friend instantiate framework we are going to use you can specify that here crispy underscore template underscore pack currently we have the latest version of bootstrap for so we can specify bootstrap for here in order to apply this crispy forms you just need to do this we will use the filter like this crispy in order to load the package into the template we can do this load crispy underscore forms underscore tags now let me save all of these modifications and back to the app here let's reload this boom so this form is customized with bootstrap stand sheet and you can see if you inspect this form control here and you can see here the package is already added few bootstrap classes into these form controls ok now I want to change some of these labelled Tex here this full name and employee code in order to do that we just have to update this form model class here we can use this labels inside that we can provide an object first of all we have full name and I want to update the corresponding level text to full name and after that have employee code so we'll do that here and we want to show that like this EMP code back to the website reload this so that's it here we have updated the label text now I want to make few more modifications here here we have a label text box pair vertically aligned like we have seen in normal bootstrap forms instead of that I want to show am P code and position controls in a single line so let's look how we can do that inside this HTML instead of single line here we have to do this forms dot full name now we want to apply the package krispies forms so we can do this as underscore krispies underscore field so it will show all of the controller code for different name this below that we have to show controls for mobile so let me copy this and paste in here instead of full name we have mobile and we have to show remaining two controls in a single line so we can use this bootstrap grid system with these Dave's wrote you and and with call MD divs so do call MD for let me copy this and paste him below that four plus eight in total we have 12 bootstrap columns and inside the first div here we have to show the controls for EMP code so let me copy this and paste in here we have to do the same for the last field position also so let me copy this and paste in here and this is for EMP code and this is for position let me save this back to the app let's look how it works that's it here we have shown both of these controls in a single line now let's look how this position drop-down is populated currently inside this control only have an empty level because we don't have any record inside the position table let's add fuel of course inside this table here okay finally we have to save this if you execute this select a statement again you should see all of those records now let's reload this page here inside this position drop-down we have all of those for our course that we have added here but we have a problem instead of showing this position title it is showing position object in order to show those titles we have to update the model for position for that we just need to define the function underscore underscore STR which is the function for any Python class so here it is underscore underscore STR for this we will have the parameter itself inside that we just need to return this return self dot title so whenever this position is retrieved instead of showing the position object it will show the title since we have this STR function here now let me save this back to the app reload this see inside this position control we have the position title often instead of these sequences of dashes I use select text so let's look how we can change this force empty label text to select inside these model forms we have to define the Python class function underscore underscore image so here it is underscore underscore in it and for this we have few parameters first of all we will have self parameter followed by arguments parameter with a single star and then keyword arguments with double star and inside this furcifer we have to call the parent class constructor so we can do this super as a first parameter we have to pass this employee form class itself this is the Ken parameter we can pass cell from that we will call the underscore underscore init:function into that we just need to pass these two parameters for arguments so let me copy this I am doing this by just selecting the text and then I will hold the control then I will drag the text that's it now just below that we can do the customization self dot fields and here we can specify the control position and we want to change the empty label text so MT underscore label is equal to select let me save all of these modifications back to the app we wrote this now let's add a submit button so back to the HTML we will have this button of the type submit' we have to apply few more subclasses DTN then BTN - success and this button text will be submit now inside this button I want to show the phone our some icon so go to this website for our some.com four slash icons usually for submit button I will search for save icons for a change I will look for that our base icons and I will select this and let's copy the corresponding icon HTML and I will paste that here inside the button let me save this back to the app we load this we will customize this button later for now keep it NASA DS now let's talk about the Django form validation here all of these controllables ends with suffice a streak marks it indicates all of these controls or fields are mandatory to submit this form for example if you submit this we can see this validation error please fill out this field if you want to exclude any of these fields from this required validation inside this underscore underscore init function we can do this self dot fields for now we have EMP code required and I will set it as false let me save this we lured this that's it we have removed the required violations from this control EMP code now let's talk about form submission see inside this form attribute action we have not yet provided URL to submit this form if we keep this action URL as empty this form will be submitted to the same URL from which we have loaded this form in this case we have retained this form from this URL for slash employee so here is the view function corresponding to the URL so the same form will be posted to this URL here so we have to deal both get and post because inside this same view function for that I will do this we will have this if close and then we can check whether we have a get or post request by taking this attribute method of request parameter if it is equal to get we will do these operations so if it is a gap request we have to execute these two lines so let's add the corresponding internation now we have to deal with the else part if it is a post request we have to save the post data that we have sent from this form here for them we will do the same it will create an instance of employee form so let me copy this so hold ctrl then drag that's it now into this class instance we have to provide the form data and we can't retrieve from this request parameter dot post dictionary finally we have to save the course before that let's check whether this form is valid or not you can do that by calling this function is valid okay if it is valid we can call the save function from the object form after the save operation we have to redirect the user into the route for showing all of the employee records that we have inserted so far they will list all of the employees inside this route list for slash so we can redirect the user here return redirect function can be called in order to use this function we have to inherit that from each angkor shortcuts redirect now let's provide the route employee for slash list let me save all of these modifications here and back to the app now let's insert a new employee James Thomas mobile number will be a tuple five two five one two three four EMP code will be something JT then position will be senior developer submit before since we are redirected to employee four slash lists hope we have saved your code successfully let's check that inside the table employee let's execute this select statement boom so here we have the newly inserted employee record for James Thomas all of the details are same as per the form data inside this position ID you can see the ID corresponding to the selected position here we have selected the senior developer so corresponding ID to is saved inside the column now back to the application after a successful insert operation the user will be redirected to this route employee for slash list so here we have to list all of the employees that we have inserted so far so let's look how we can do that as you know when this route is navigated this view function employee list is invoked so here we have to return all of those inserter we can do this first of all we have to create an object context which is to be passed as a third parameter here context and inside this object we have to pass list of employees so I will pass like this employee underscore list and here we have to assign the list of employees that we have inserted we can make use of this model class employee here so first of all let's import that here from dot models we have to import employee class here we just need to do this employee dot objects dot all function can be called so inside this property and blowy underscore list we will have all of the records that we have inserted into employee tab and we have saved that inside this context variable the same is passed as a third parameter here now we have to render those of course inside this HTML file Employee List so instead of this paragraph we need a tab and let's add few classes from bootstrap double then tab board or less we don't need a boarder for this so we will have this class borderless tab borderless inside that let's add the tea head pot in order to add a bottom border we have to add this class border dash bottom and we have to highlight the tags inside this tea head so we have to add this class font-weight:bold now let's add the tea element now let's add the header columns first of all we have full name mobile number and then we have position so here we have the tea head part now let's add the tea body here we have to show all of the employees from this tab here for that we can make use of the for loops index so here it is four for each employee accord inside the list employee underscore list we have past this list inside this view here employee underscore list let's add and unfold this for loop and four for each employee record we have to add a single TR element inside the first column we have to show the full name so we can do this employee dot full name and then we have mobile number and finally we have the position now let me save all of these modifications here and back to the app let's reload this something went wrong so back to the application in order to see the exact error back to the terminal where we ran our server so here it is here we have the error here we have a typo related to equal to symbol instead of equal symbol we need to use : let me save this and back to the terminal let's check whether we have any are not left so that's it back to the application we load this boom so here we have shown the employee record that we have just inserted so far we have implemented Django crack operations inside and retrieve now let's look how we can implement update or edit cooperation for that first of all we will add a button for each row here when user click on the button first whenever code details will be populated inside the form and from the onwards user can make the changes and submit a form so let's look how we can use the same form for update operation also so back to the list HTML here first of all we will add first of all we will add a column for action so here we keep it as empty and inside this body we have to add a TV with required edit and delete operations for now let's add a button for edit operation so here we have the anchor element and for this we have to add few classes from bootstrap BTN then text - secondary in order to remove horizontal padding we can use this class px0 inside this button we want to show a for our some icon so here is the ID tag with corresponding classes far then for edit to enlarge this button we can add this far LG class also back to the application let's reload this so here we have the button now inside the anger HR of attribute we have to provide the corresponding route for now we have only two routes one for the insert operation and here is the list route to display all of the inserted records now for update operation we have to add one more route we can we can use this same route with one modification so let me copy this and paste in here we only have to append ID into this URL so we can do this end here is the ID parameter ID okay we will call the same function employee form we will discuss how we can handle both insert and update operation inside this view function and HR of attribute for this edit operation here in order to do that it would be better to provide a third argument name is equal to employee update now we can provide the URL like this URL and here we have to provide the name of the URL and which is employee update for this route we have a parameter ID so we can pass that here after this route knee and he can access the ID using this employee here so employee dot ID so it would be helpful to provide a name for each route so that we can easily provide the corresponding URL for HR of attribute like this so we don't have to change the HR of attribute value since we use URL name here instead of you are a part so it would be better to set name for each of the URL here so name is equal to employee insert and for this list URL name is equal to employee list if you are confused this first route here is for the get and post requests for insert operation and this one for get and post requests for update operation and this final list out is for the get request to retrieve and display all records here we have the update route we will call the same view function employee form inside this view function we already implemented get and post requests for insert operation now let's do the get and post requests for update operation get requests will be handled inside this if closed here and post requests will be handled inside this else block here first of all in order to accommodate update operation inside this view function we have to add this parameter URL parameter ID so here is the ID by default I will set it as zero so in case of insert operation we have not provided an ID so in that case ID will be zero okay otherwise if the ID property is not zero then the request will be related to update operation inside this if closed we will deal with get request inside this else block will deal with post request inside this gab request in order to identify whether we have an insert or update operation we will add one more if close if the ID is equal to zero then we can say we have an insert operation now let's add the intent ation here if it is an update operation we have to deal that inside this else block here first of all we have to retrieve the details of employ using the given ID for that we can do this employee is equal to and here we have the employee model from that we can retrieve the correspond record with given ID like this objects dot get function can be called we have to filter the record with the primary key so primary key is equal to ID we will rotate the corresponding record into this employee object here now we have to create an object of model form and we have to populate this record inside that so here's the method form is equal to employee form and inside this constructor we have to set this for that we can do this instance is equal to employee that's it so with this if as block here we will populate the object form if it is an insert operation we will have an empty form if it is an update operation we will populate the form with corresponding record details and finally with this return statement we will return the form object based on that this form is printed in case of update equation corresponding populated value will be shown inside the controls so let's look if it is working or not so first of all we have to save all of the modifications and back to the application let's reload this now click on this pencil icon here boom so here we have shown the form by populating corresponding employee details and you can see the URL here employee 4/1 so we have populated employee with ID 1 inside this form here now you sir can make the required changes inside the form and they can submit the form also and this form will be submitted to the same URL here since we have kept the action as empty so inside the same view function we have to handle the post requests for update operation post requests will be handled inside this else part here and we can decide whether we have an insert or update operation using this if goes here if ID is equal to 0 we can say this is an insert operation otherwise it would be an update operation now let's add the intent here inside this else block we have to deal with update operation so first of all we have to retrieve the current details of employee from database for that we can copy/paste this line here so hold ctrl and drag that here that's it and also finally we have to create the form model object like we have created here so form is equal to employee form it's the first parameter we have to pass the data from the form here that we can retrieve like this request dot post dictionary can be passed here as a second parameter we can pass the employee object here so inside this object we have the details from the database so inside this object we have the data from DB and which is to be updated with the data from this object and these two lines are common for both insert and update operation first of all we will validate the form if the validation is successful we will submit the operation whether it is inside or update and finally we will be redirected this employee /list sorry we have to pass this employee as an instance so instance is equal to employee now let me save all of these modifications so here we have the form which is to be updated you can see the same employee details inside this employee tab here now let's update this employee code to something JT s and then I will check this position to junior developer let's submit this record so here we have redirector to employee list route and here you can see the position change from senior developer to junior developer now you can check the same inside this table here let's execute the select style statement again so here we have updated the employee code and we have updated the position ID to one previously it was two for senior developer and one for junior developer finally we have to implement delete operation before that let me add a navigation from this list Route two formed out and then formed route to Lee sprout also so inside this action column header I will add a button for navigation to form route so back to the HTML here so here we have the anger element with few bootstrap process BTN then BTN outline success and here we have to provide the URL like we have done here so let me copy this here we have to provide the corresponding URL name inside this HR of attribute we have to provide the URL for the form so here it is corresponding URL name is employee insert so instead of update we have insert you don't have to provide the employee ID here now inside this anger element we have to add the four hours of icon so here is the I tagged with classes first then four - place and here is the anger texts had new back to the app reload this so here is the button if you click on this button we can navigate the form route now from this form we have to navigate least open corresponding HTML form HTML and here is the button so first of all I'm going to add a div with class row here we are going to use the bootstrap grid system called MD 8 into that we can move this submit button along with these classes we have to add few more classes BTN block so that this button will take we enter space allotted inside this column and finally in order to enlarge this button we can add this class BTN LG now let's add the second you call md 4 so we need an anger element with process BTN then VT and secondary in order to take the end of column we can add this class BTN block and in order to enlarge this button we can use this cause bt MLG inside this HR of attribute you have to provide the corresponding URL so here it is please forward slash corresponding name is employee list so we can do this employee underscore list also we have to provide this tag URL here inside this and we will have a phone out some icon with corresponding classes then for - stream after that we will show this text back to list let me save this back to the app you know this so here we have the submit button along with the navigation tool it's proud if you click on this back to list here we are inside the list route so we can navigate back and forth now finally let's implement the final Janko correct operation delete for that back to the list HTML here along with this element we will have a form because for delete operation post request is most appropriate so we can make the post because for delete operation using a form so here is the form and inside this action we have to provide the corresponding URL so first of all let's create an URL for delete operation so pause and the path will be delete forward slash and here we have to provide the ID in ID I hope we orderly created a demi view function for delete operation employee delete so we can mention that here we use dot employee deed now let's provide the name for this URL name is equal to employee underscore delete so we can use this URL inside this action attribute so URL employee underscore delete and here we have to provide the ID that we can access from the employee object here employee dot ID and here we have to set the method as post inside this form we only have a single submit button so button of the type submit for this button we only have a single bootstrap cross BTN inside this button we will have a phone or some icon let's add the corresponding classes for then for - crash - alt in order to allows this button we can add this for algae close and then we can change the color with and finally in order to align this button to write we can use this class fraud - right so that's it now let's update the corresponding View Function currently we have this dummy function employee delete now let's update the corresponding view function employee delete here as you can see for this delete URL we have a single parameter ID so we have to add that parameter inside this function also ID inside this function we just need to delete the employee with given ID so first of all we will retrieve the record we'll give an ID we have done the same with this line so let me copy this now we can delete that by just calling the function delete from this employee object delete and finally we have to redirect to the list route so let me copy this okay let me save all of these modifications and back to the application here sorry we have an alignment issue here so back to the HTML list for the inline proper alignment of this form we can add the bootstrap class here class is equal to D in line this class will set display as inline let me save this let's reload this that's it now if you click on this trash icon corresponding record will be deleted sorry here we have a problem with CS our of token we forgot to add the token inside this form so let's add the corresponding token CS our f underscore token we have to add this token to every Django for save then back to the application now let's try to delete this record again boo so here we have deleted the corresponding record you can see the same inside this table also let's execute the select statement that's it we have deleted the corresponding code from our table also if you want to add new of course you can use this add new button here after the form submission we will be redirected to this list out here here we will show all of their course that we have inserted so far so that's it guys in this Python Django tutorial we have discussed complete full credit operations with Postgres DB you can download this same project from the github link given below in video description in order to make more helpful and quality tutorials you can also support me through PayPal donation I have given the donation link in first comment and inside the video description also if you found this video helpful 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: 157,047

Rating: 4.9276338 out of 5

Keywords: django CRUD example, django CRUD with postgres, django CRUD + postgreSQL, CRUD operations in django, python CRUD operations, Full CRUD Operations in Django, django form with dropdown, django form + foreign key, django form with bootstrap, django + crispy forms, django form validation, CodAffection

Id: N6jzspc2kds

Length: 71min 53sec (4313 seconds)

Published: Mon Nov 04 2019