Learn Angular 10, Python Django & SQLite by creating a full stack app from scratch

hello everyone and welcome to this course on python django and angular 10 for full stack web development in this course you will learn how to develop a web application from scratch using popular technologies such as sqlite for database python django for back-end web development and the latest angular 10 for front-end web development we will first start with installing and setting up the environment needed for development then start creating models and tables needed for our app then develop api endpoints using django res framework finally we will be using angular 10 to design the front end part of our app you will learn how to create the navigation menu and tables using bootstrap add routing to our angular app and model pop-up windows with drop downs and date pickers and also add upload profile picture functionality and store it in our app we will also learn how to add custom filtering and sorting features without using any third-party packages i am sure that this course will definitely help you in your journey as a full stack web developer i thank you for watching welcome to the course and happy learning now let's install visual studio code visual studio code is a popular lightweight open source code editor developed by microsoft we will be using it mainly to work with both django project as well as angular project just type visual studio code and follow the official website download and install it with default settings we have successfully installed visual studio code now let's install postman which we will be using to test the api methods just type install postman and go to official link download and install it with default settings you don't have to create an account just click on skip we have now successfully installed postman now let's install node.js which we will be using to create and run the angular project just type node.js and go to official link download and install it with default settings bye you can open node.js command prompt to check the version and verify the installation we have now successfully installed node.js in this video let's learn how to install angular cli angular cli is a command line utility which we will be using to create and run angular projects although angular can be installed only to a specific project it is recommended to install it globally let's open node.js command prompt and type this command npm install hyphen g angular slash cli angular cli is now installed let's just verify the version of it just type ng space dash dash version we can see that we have installed version 10 of angular let's install python before installing django what you see on the screen is the official django documentation website what they suggest here is to install python from official site python.org so let's follow the same download and install the appropriate version also check the check box to add python 3.8 to the path let's verify the installation open command prompt and just type python you can see the version of python installed let's write a simple code to print hello world on screen we see that it works and we have successfully installed python before installing django let's try to understand why creating virtual environments is needed let's assume you're working on two django websites on your machine one website is developed using version 1.0 of django and another one developed with version 2.0 also you are instructed not to update the versions of any of this django website projects so considering this in mind if you install django at your system level you can install only one version of django so you can work only on one django project in your machine to solve such problems we can make use of something called as virtual environments so using virtual environments instead of installing one version of django globally or at system level we can install different versions to each virtual environment so that we can work on both the django projects in a single machine now let's see how to create a virtual environment of for our django project i am creating a new folder for this tutorial just open command prompt for this path and type this command python space minusim space v e and v space the name of the virtual environment once the command is executed a new folder with the given name will be created so whenever we are working with our django project we need to activate this virtual environment first and also install any modules needed for our project to this virtual environment only to activate the virtual environment just type the environment name slash scripts slash activate you can verify that the environment is activated by looking at the environment name at the left side let's install django first open command prompt and activate the virtual environment to install latest version of django just type pip install django to create the api endpoints we also need to install one more module called as django rs framework so let's install it we have now successfully installed django and django-rest framework let's now create the django project to create one just type django admin start project and the name of the project i am going to name this project as django api once the command is executed a new folder with the project name will be created let's navigate inside the project and open visual studio code editor in that path by typing code space dot before taking a look at the project files let's simply run the project and see how the output looks like in the browser just type python space manage dot p by space run server the app is now running at port 8000 just copy the url and open it in the browser we see that our project is created successfully and what you see on the screen is the default template which gets created for every new django project now let's take a look at some of the important files in the project manage.py is a command line utility that helps us in interacting with our django project we had just now used it to serve our app db.sqlite3 is the database file that we will be using to store data we will explore it more later init.py is just an empty file that tells python that this directory should be considered as python project or a python module settings dot py file consists of all the settings or configurations needed for this project urls.py file contains all the url declarations for this django project asgi.py is the entry point for asgi compatible web servers to serve the project and wsgy dot py is the entry point for wsgi compatible web servers let's see how to explore the default sqlite db file that comes along with creation of our django project to check what is there inside the database we can make use of something called as sqlite studio so let's download the software you don't have to install the software to use it you can directly use it with the help of the executable file that comes along with the download just double click on the executable file to open or launch it click on database and add database now we need to load the sqlite database file which is present in our django project now it's easier for us to visualize what's inside our database file currently we see that it does not have any tables in it we will be creating tables here by creating models in our django project which we will be seeing in the upcoming tutorials also you can open sqli sql editor to write sql queries on our database in this video let's see how to enable cars in our django project the full form of course is cross origin resource sharing by default all django projects come with a security feature which blocks the api requests coming from different domains this obviously is an essential feature because you don't want everyone to consume your api methods and access or modify your data you need to have some kind of control to authorize only specific domains or apps to consume your api endpoints we will now see how to do that first install django cores headers package using pip install now let's open settings.py and register the course module by adding an entry in the installed apps section and also in middleware section finally we need to specify which domains we need to be we need to whitelist for this tutorial i am allowing all the domains to access the apis but we need to we need to be careful and whitelist only the specific domains to do that we just need to type course origin whitelist and specify the domain names for example google.com since i'm already allowing all domains let me delete this let's create an app in our jungle project quick difference between projects and apps the folder structure that you currently see on the screen we call this as project now a project may have multiple apps currently this project does not have any app you can basically have multiple apps in your project for example you can have one app which acts like a blog you can have another app which acts like a survey form for now let's create our first app to add the api methods to manage employee data to create an app we just need to type this command python manage dot py start app and the name of our app we will be naming our app as employee app next we need to register our app in the settings dot py file also let's register rest framework package because we are writing the api methods using django res framework module let's create the models needed for our app we basically need two models one model which helps us to store department data and another one to store employee data department model will will have two fields one field is auto increment id field another one to store department name this is a care field with maximum length of 100 characters employee model will have five fields one store the employee id which is an auto increment field then we have employee name next we have department name next we have date of joining which is a date field finally we have a field to store the uploaded image file name now we need to run a couple of commands to create these tables in sqlite database file the first command is python space manage.py space make migrations space employee app looks like we have made a syntax error so let's correct it what this command does is it creates an intermediate file in the migrations folder which will have the details of what are the changes that will go to the database file if things look fine we need to run one more command to actually commit these changes to our database file python space manage dot py space my grade space employee app the command is executed let's refresh our database to check we see that our two tables are created successfully let's write a select query on them we see that currently we don't have any data in them now let's create serializers for our models serializers basically help us in converting our complex types or model instances to native python data types data types that can then be rendered easily into json or xml or other content types they also help in deserialization which is nothing but converting the parsed data back to complex types add a new file with name serializer dot py and import serializers from rest framework module also import our complex types or models now we need to write serialize serializer classes for both our models we have now added the serializers needed for our app now let's write our api methods for departments screen we are importing csrf exam decorator so that we can use it to allow other domains to easily access our api methods by other domains i mean our front-end project we also need something called json parser to pass the incoming data into data model let's import both the models and also the corresponding serializer classes let's write our api methods for departments screen the method will receive an optional id which we will be using in delete method to delete a record based on id let's first write get method which will simply return all the data from department table in json format we are making use of serializer class to help convert int into json format the parameter safe equal to false is basically used to inform django that what we are trying to convert to json format is actually a valid format to be converted and we are fine if there are still any issues next let's write the post method which will be used to insert new record into department table first we need to parse it as a json format and then use serializer to convert int into model type finally we check if the model is valid if model is valid we save it into database and return a success message if not return failure message next let's come complete the put method which will be used to update an existing record first we need to capture the existing record in the database using the department id next map it with new values using the serializer class finally if model is valid we save it and return success message if not send a failure message finally let's complete the delete method for the delete method we will be sending the department id in the url so we will make use of it to extract the record from database based on the past id and then delete it from database now let's run the django project copy the url let's test the api methods in postman we have forgotten to route our api methods to a particular url let's do that first create a new file in the employee app folder and name it as urls.by let's define our url patterns and map it to our api method if url starts with text department and then ends we need to map it to department api method and for delete method we will be passing the id in the url so we need to route those requests also to the department api method next we need to include these urls in the main urls.py file of our django project now let's first test the get method since we don't have any data yet we get an empty array let's insert a record using post method we need to add json input in the body the schema should match exactly as the column names of our model let's add one department with name id we see that it was added successfully we can run a select query to verify it in the sqlite studio let's add another department we can also verify it by calling the get api method we can see we have two records now let's now verify the put method by changing the name of the second department we see that put method also works as expected let's finally test the delete method all the api methods for department screen works as expected now let's write the api methods for employee screen since we have already written api methods for department screen we just reuse them let's make a copy of all the methods now we just need to replace the variable names from department to employee now let's add the routing for our employee api methods finally let's test the methods in postman we forgot to map the methods let's do it the get method works as expected let's try post method post method also works as expected now let's use the put method and change the employee name put method also works let's add one more employee using post method before using delete finally let's test the delete method all the api methods work as expected finally we need to write one api method to save the uploaded profile picture but before that we need to store our image files in a folder so let's create one in our project let's name it as media also we need to add some keys in the settings dot py file regarding the new folder now let's add the method we are extracting the uploaded file from the request the key name should be added as uploaded file now we need to save it in the folder we will make use of module called default storage to do this after saving let's simply return back the file name we need to add a static path to our app url so that we can access media files through url now we need to map a route path for the api methods now let's test it by uploading an image looks like we need to add a slash in media url key it should be a post request choose body form data and add key name as uploaded file upload the file in the value attribute we see that we made a syntax error let's try again upload api method works as expected let me give some basic introduction to angular project that we are going to create let's take example of the app that we are going to build it basically has two main screens one to show department's data and another one to show employees data also we will be adding pop-up screens to add or edit the departments or employees traditionally if you if we would like to build this just using html css and javascript as a single page application we would have to write all the features in one html file this would get complicated to maintain with angular we can make use of something called as components so that each component contains only the html needed for this specific feature for example for our app we will create two main components department component and employee component again inside each of these components we can add child components one child component to show or delete records another child component to add or update records and this is how the component folders actually looks like this is how the architecture of our angular project looks like we have something called as shared service whose main function is to send and receive data from the api all the components that we are going to create will make use of this shared service file to send or receive data from api let's create the angular project i am creating a new folder called ui in which i will create the angular project open command prompt in this path let's check the angular version installed we currently have angular 10 installed to create a project just type ngspace new space the app name which i am giving as angular10 let's keep the routing feature we can also add it later in case we select no at this point let's keep default styling once the command is completed a new folder with project name will be created with some files let's view them in visual studio code first navigate inside the project folder which in our case is called as angular10 type codespace dot we can see all the files in this project in the left side pane before viewing them let's simply run the project and see how the output looks like in the browser just type ngspace server servspace dash open this command will serve our application in the default browser we see that this angular project already has some content let's see where it is coming from just open source folder in this we have a file named index.html this is the final file which gets rendered from angular project inside body we have a custom html tag we can we call them as selectors this particular selector is inside app folder open appcomponent.ts we can find the selector here the corresponding html content behind the selector can be found in appcomponent.html what you currently see on the screen is coming from this html file let's delete everything in this file and write hello world in h2 tag after saving the files the angular cli automatically reloads the view in browser now let's take a look at some of the important files package.json contains all the packages or modules or dependencies that currently are being used for this project angular.json contains configuration options for serving testing and building this project index.html is the final file which gets rendered when running the app app module contains an entry of all the modules new components and services that we create in this angular project app component is the root component we can add any number of child components all of them will reside inside the app folder appcomponent.html is the html content of root component and appcomponent.ts is the file which contains all the functionalities written in either javascript or typescript language these functionalities will be used by app component html appcomponent.css contains all the styling needed for our app component html if you need to add styling globally and not specifically to one component we can add them inside styles.css let's create the components and services needed for our app as already discussed previously we need two main components one for department and and another for employee again each of these components will have two child components one to show or delete and another one to add or update also we need one service file to consume the apis let's create the components first just type ngspace generate space component space the name of the component we can see that the department component has been created in the app folder let's create the child components for departments one for showing the department data or deleting it another one to add new department or edit next let's create the employee component [Music] and the child components of employee component now let's create the service file just type ngspace generate space the name of the service if we just open app module we can see that an entry has been made for all the components that we just created we also need to add an entry for the service file else we may not be able to use it in other components just add service name in providers section as well now we have successfully created all the components and services needed for our app let's complete adding the logic to consume all the api methods in shared service file first let's register the http client module in app module also let's import couple of other modules relate to related to forms which we will be using in other components let's import the http client module and observables module observables are basically used to handle asynchronous requests and responses let's add the api url before that let's run the api project to get the api url let's add the api url also let's add photo url which we will be using to display profile pictures in our angular app let's instantiate the http client in constructor let's first add the method to consume the gate get department data api similarly let's add method to consume the post department api to add new department put department api to update the department details and finally delete to delete a department we will pass the id in the url let's make a copy of all these methods to replicate for employee apis let's also add method to save profile pictures also one more method to get all department names we have now added all the methods to consume all the apis we have in our api project let's add routing to our app routing is basically the ability to navigate to a particular screen of an app by just using the url for example if we type department in the url we should be able to navigate to department screen and if we type employee we should be able to navigate to employee screen currently the department screen consists only this text department works same with the employee screen to add routing just open the app.routing.ts file import the employee and department components let's now add the routes in the routes array if user types employee we should show employee screen if they type department they should see department screen also add this selector in app component html now let's test the app we have successfully added routing feature to our app let's add bootstrap to our application bootstrap help us to build and style our web pages much faster there are basically two ways we can add bootstrap one is the traditional approach which you can see on the screen bootstrap also has a version of it designed exclusively for angular projects to install that we need to just run the command that you see on the screen we are going with traditional approach first copy the style sheet link open index.html and paste it in the head section next copy the scripts tag and paste them just before the closing body tag have now added bootstrap to our application let's add navigation menu to our application our navigation menu will basically have two options one to navigate to department screen and another one to navigate to employee screen first open appcomponent.html let's add a div with class container before adding navigation menu let's add some heading to our application i am using bootstrap class names for styling purposes now let's add the navigation menu inside the list item i am adding buttons which on click will activate the corresponding route which is mentioned in the route router link attribute now let's test the navigation menu we can see that we are able to navigate to corresponding screens based on selection in navigation menu let's create the table to show departments data in department screen open show showdepartment.ts file inside department component let's declare a variable to store department list and assign empty array as of now we need to use the api method written in shared service file to fill department list array let's import the shared service file in our component also instantiate it in the constructor now let's write the method to refresh the department list variable from api method subscribe method makes sure that to wait till the response is received from api call and then only assign value to the department list variable this is an asynchronous operation also we need to call the refresh method in ng on init function ngoninit is the first method that gets executed when this component is in scope now let's add the table in html file i am adding bootstrap styling for table we will have department id column department name column and also one more column called as options in which we will add feature to edit or delete the record now let's add the table body ng4 is one of the directives in angular which which can be used to replicate html elements based on array data you can think of it just like a for loop for example if we have two records in department list we will have two tr's the two curly braces you see is called as string interpolation we generally write variable name inside this it displays the corresponding values also for time being let's add two buttons to edit and delete records we shall complete their functionalities later we need to do one last thing just copy the selector from show department dot ts file and paste it in the parent department component html file we can see that we have successfully populated the table with department data now let's add model pop-up window which we are going to use to add new department or edit existing department i am using the model design with that we can see on this official bootstrap website let's copy the code and paste it in show department html we need to make some changes to it first we need to call our custom method to on button click so that we can activate our add edit department component let's change the name of our button make it float on the right side of the screen the additional attributes data backdrop and data keyboard will make sure that user cannot click outside the model window to close it next instead of the default title we will set the title using a variable that we will populate in typescript file because we need to use the same model window for both add and edit next we will call custom function on close so that we can deactivate the add edit component let's create get rid of the model footer and inside the body we need to copy and paste the selector of add edit department component we need to pass department object to our add edit component so that it knows whether to add new department or edit existing department and we are writing ngif directive so that we can activate the component only on click of add or edit button now let's complete the add edit add click function inside it we will set the title department object and variable for ngf let's declare the three variables to be set when adding new department we set department id to 0 to indicate the add edit component that we are trying to add new department also set the model title to add department and set activate add edit department component to true now let's complete the close function we just need to deactivate the add edit component and refresh the department list so that in case new department is added we can see it without refreshing the page let's finish the add and edit functionality for department screen we need to copy attributes from add button to edit button as well so that we can activate the pop-up on edit button click as well we need to pass the department item object which contains the details of the record to be edited on click of edit button we should send the department object details to add edit screen set the title to edit department and also activate the add edit department component since we are passing department object as input to the component we need to capture the same in the add edit component so we need to make use of input directive also when the add edit department component is activated the ngoninit function will be called inside which we will initialize the department id and department name variables now let's add the controls needed for department add edit screen we just need one text box to capture department name since department id is non-editable ng model is used for two-way data binding for example if we enter some text in this text box the variable department name will be updated automatically with the text box text value we need to create two buttons one for add and one for update add button will be visible when department id is equal to zero and update button will be visible when department id is not equal to zero now let's complete the add and update methods we need to import the shared service file to call the add and update api methods we need to create the department object in json format let's also instantiate this shared service we just need to call the add department api method and pass the new department object update will be implemented in a similar way only difference is the department id will not be zero we need to make the model window align align to center and also make it look bigger let's make some changes in the model window class now let's test the add and edit functionality we see that add and edit functionalities are working as expected the feature to delete the department but first instead of these text buttons let's use the bootstrap icons just copy the code of required button design and paste it inside the button tag now let's implement the delete function we need to call the delete department api method and pass just the department id once successful let's display the message also refresh the table let's test by deleting one record we see that the delete feature works as expected let's complete the show employee table screen we just need to replicate the functionality of show department screen and the minor difference would be to simply change the variable names to employee instead of department let's copy the show department html first just change the department variable names to employee also the add edit component will now point to employee add edit component and we will have column names of employee table now let's copy the typescript file first copy the import statements next all codes starting from the constructor line the employee object will have a photo file name by default if no profile picture is uploaded we will show a default anonymous profile picture change the api to employee methods now let's test the show employee screen we see that show employee screen works let's complete the add and edit feature for employee screen and also upload profile picture functionality for employee screen first let's copy the typescript file content from add edit department screen and make changes to it accordingly let's declare the variables needed photo file path will be the final part of a photo that we use in the image tag to display it on the screen also we have an option to select department name from drop down let's declare an array to store the names and use it in the drop down in ngon init we need to first populate the department names variable and then assign the other employee record data to variables the photo url path is declared in service file we are going to make use of it to compute the final photo path let's complete the add and update methods for employee finally we are going to write method to save the uploaded profile picture we are going to create a form data and assign the file name and the file to it and then send this form data to api method let's now complete the add edit employee html file we need to show both employee details and profile picture in the screen so let's give 60 percent of space to employee details and 40 percent space for profile picture the picture will also have upload button below it so that users can upload new pictures now let's add the text box for employee name drop down to select department name the values for drop down will be loaded using the variable that we are populating in ngoninit method also let's add date field to choose date of joining let's make changes to the add and update buttons as well now let's test the functionality let's add new employee let's enter details and upload our profile picture we see that new employees saved successfully now let's edit it let's change the name and try to save update also works as expected let's finally test delete we see that all functionality of employee screen works as expected let's add a custom sorting and filtering option to department table let's start with filtering we will add a text box at the top of each column let's declare variables to capture user input to filter text boxes also let's add another variable which will have backup of department data now let's write the filter function which will apply the filter on backup data and assign it to the department list variable we are making use of includes method which will check if record contains the filter text input now let's add the text boxes to capture filter text let's test the feature we see that filtering feature works as expected now let's add sorting feature we need to add two buttons for each column the sorting method will accept two parameters one is column name and another one is boolean which indicates whether to sort in ascending or descending we will have two buttons one to sort in ascending and another one to sort in descending for buttons let's use bootstrap icons now let's complete the sorting method we will apply the sort on backup data and assign it back to the department list variable we will have separate logic for ascending and descending now let's test the feature we see that sorting works as expected

Channel: Art of Engineer

Views: 58,875

Rating: 4.8973451 out of 5

Keywords: python django, django, angular, angular 10, full stack app, sqlite, python, crud, crud using python django angular

Id: 1Hc7KlLiU9w

Length: 89min 11sec (5351 seconds)

Published: Wed Sep 16 2020