Learn React JS, Python Django by Creating a Full-Stack Web App from Scratch

welcome to this course on full stack web development using react js for front end python django for backend and sqlite for the database you will learn how to add navigation menu with routing in react display data in bootstrap table add modal pop-up window with dropdowns and datepickers also learn how to upload photo and store it in the backend server now let's install visual studio code visual studio code as a popular lightweight open source code editor developed by microsoft just type install 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 will be used 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 just type install node.js and go to official link download and install it with default settings you can open node.js command prompt to check the version and verify the installation we have now successfully installed node.js 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 the official site python.org so let's follow the same download and install the appropriate version also check the checkbox 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 the screen we see that it works and we have successfully installed python before installing django let's try to understand why creating virtual environments as needed let's assume you are 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 these 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 projects in a single machine now let's see how to create a virtual environment 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 hyphen mvenv 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 and also install any modules needed for our project to this virtual environment only to activate the virtual environment just type the environment name script 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 the command prompt and activate the virtual environment to install the 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 rest 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 the 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 in the browser just type python manage.py 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 in what you see on the screen as the default template which gets created for every new django projects 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 server our app dbsq lite3 is the database file which 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 a python project or a python module settings.py files consists of all the settings or configurations needed for this django project url.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 wsgi.py is the entry point for wsgi compatible web servers let's see how to explore the default sqlitedb file that comes along with the creation of our django project to check what this database has we can use something called 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 executable file that comes along with the download just double-click on the executable file to 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 upcoming tutorials also you can open sql editor to write sql queries on our database let's see how to enable the cores 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 every 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 let's first install the django course headers package using pip install now let's open settings.py and register the cores module by adding an entry in the installed apps and middleware sections finally we need to specify which domains needs to be whitelisted for this tutorial i am allowing all the domains to access the apis but we need to be careful and whitelist only the specific domains to do that we just need to type coors origin whitelist and specify the domain names for example google.com since i am already allowing all domains let me delete this let's create an app in our django 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 the 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.py startapp space the name of our app we will be naming it as employee app next we need to register our app in the setting.py file also let's register rest framework package because we are writing the api methods using django rest framework module now 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 have two fields one field is auto increment in field another one to store department name this is a char field with max length of 100 character employee model will have five fields one to 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 the sqlite database file the first command is python manage.py make migrations employee app looks like we have made a syntax error 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 manage.py migrate 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 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.p and import serializers from rest framework module also import our complex types or models now we need to write serializer classes for both our models we have now added the serializers needed for our app now let's write our api methods for department screen we are importing csrf exempt decorator so that we can use it to allow other domains to easily access our api methods by other domains i mean our frontend project we also need something called jsonparser to parse the incoming data into the data model let's import both the models and also the corresponding serializer classes let's write our api methods for department 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 the 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 it into json format the parameter safe equals 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 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 json and then use serializer to convert it 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 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 method to a particular url let's do that first create a new file in the employee app folder and name it as earls.py 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 root those requests also to the department api method next we need to include these urls in the main urlpy 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 our model let's add one department with name it 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 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 bye 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 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 works 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 setting.py file regarding the new folder now let's add the method we are extracting the uploaded file from the request now we need to save it in the folder we will make use of a 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 root path for the api method now let's test it by uploading an image it should be a post request upload api method now works as expected let's now start creating the front end part using react js open up command prompt in the folder that you would like to create the project type npx create react app space the name of the app once command is executed it creates a folder with the given project name let's see the contents using visual studio code the package.json file contains details of all the packages being used by this project the node module folders is where all the packages are installed index.html file is the final file that gets rendered we see that it only has one div tag with id root let's see where this id is being used if we open index js file we see that the contents of app component is being injected into the div with id root now let's see what are the contents of app component let's just run the project and check how it looks just type the command npm start let's delete all the contents of app component and just add an h3 tag we see the h3 tag text but the styling is not reflecting this is because we have not installed react bootstrap let's install it just copy and run the install command also we need to copy the style stylesheet link reference and paste it in index.html looks like the installation failed let's try again it's now successfully installed let's check if it works we see that the styling works as expected now now let's create the basic landing pages and navigation component create a new file and let name it home.js we need to import couple of modules to create a react component we are creating a class which returns the html view let's write a simple div tag with a simple text similarly let's create a department component and also employee component let's also create a navigation component and add the navigation menu we will have three menus in navigation bar one for home one for department and one for employee component now let's add our navigation component and other landing pages in the root component we need to import all those components here we need to import couple of modules from react router dom to configure the routing settings let's add the navigation menu we need to define the routing configurations inside the switch tag looks like we need to install the module react router dom let's install it we see that the navigation menu now works as expected now let's add our api url create a file with name.env let's store the api url with a variable name let's also store the photos url also add the file name in git ignore let's add a constructor to our component we need to write super props so that the component's constructor may get called we can define our variables inside the state of this component we are creating a variable to store department table data let's write a function to refresh department's array we are writing fetch method to get data from the department api once the data is available we update the department's array using setstate method we need to call the refresh method on a lifecycle method called as componentdidmount we will also refresh the array on component did update lifecycle method as well now let's add the bootstrap table to display all departments we display department id and department name columns also one more column for edit and delete options we now see department data in bootstrap table now let's create a screen to add department this screen will be a modal pop-up window now let's add form with text box for department name let's add a button to save the department the footer will have a close button to close the modal window we will define the on hide function in department landing page let's define the handle submit method to save the department name using api the body will have department name in json format once saved we will display the message in alert box if failed we will display failed message in alert box now let's make changes in department landing screen to show or hide the modal pop-up window let's define a variable to show or hide the modal now let's add button toolbar for showing add department modal window we need to also bind the handle submit function in the constructor now let's add new department we see that we are now able to add new department let's complete edit department screen let's copy the contents of add department screen and make changes to it the api will be put instead of post we need to send the department id for update let's add one disabled form to display department id also we need to send the value from first screen and bind it using default value attribute let's add one variable to display or hide edit modal window let's add edit button and pass the department id and department name to the modal window we see that the update method works as expected let's finally add delete method as well delete department will be a function which calls the delete api with the department id we will ask for confirmation before delete we see that delete method also works as expected now let's complete the employee screens we need to change api from department to employee we may need additional variables for department photo file name and date of joining we see that landing screen for employee details is working fine as expected now let's complete the add new employee screen we need to declare departments array to show values in drop down we may need some variables to store profile picture details and photo paths let's populate the drop-down array value and component didmount lifecycle method bye let's add a method to save the uploaded photo we make use of form data and append the uploaded file to it then send this photo to the save file api method once successful we update the image source the department field will be a drop down we will be mapping the department names using the array the date of joining will be a date picker we may also need to display the uploaded profile picture and also a button to upload new photo which we'll call the save file api also we need to bind the upload method and constructor let's try adding a new employee we see that add new employee works as expected let's now complete the edit employee screen let's change the post method to put let's display read-only employee id we need to pass the default values from employee landing screen bye we see that update works as expected with this we have completed all the basic functionalities of our employee management app

Channel: Art of Engineer

Views: 34,932

Rating: 4.8562875 out of 5

Keywords: react js python django, full stack, sqlite

Id: f5ygXQKF6M8

Length: 63min 33sec (3813 seconds)

Published: Tue Dec 29 2020