React JS + .NET Core Web API + Microsoft SQL | full stack app tutorial

in this tutorial you will learn to create a full stack web application from scratch using microsoft sql server for the database dot net core web api for the back end and react js for the front end we will first start with creating the necessary tables in microsoft sql server then create the web api project with the required rest api endpoints finally we will use react js for creating the front end you will learn how to add routing for our app [Music] create bootstrap table with custom sorting and filtering capabilities [Music] add modal pop-up windows with drop downs and date pickers we will also learn how to upload an image and store it in the backend server welcome to the course and happy learning let's install visual studio you can choose to install the community version which is free to download and use for educational purposes run the installer file i have already installed visual studio but if you are installing for the first time you will be presented with this screen you can choose a sp.net and web development dot net desktop development and net cross platform development and click on install button which appears in bottom right the installation will take quite some time as the ide is big let's install visual studio code visual studio code is a popular lightweight code editor from microsoft it is mostly used for front-end web development let's install postman we will be using postman to test our rest apis let's install sql server management studio which is used to work with sql server database run the installer file you can keep the default options and click on install it's asking me to restart the pc let me do it i am running the installer again after [Music] restarting the setup is now complete let me start sql server management studio i have already procured a microsoft sql server in a database using microsoft azure i will use the same you can also create a local server and database by installing the developer edition of sql server we are now ready to create the necessary database objects let's install node.js bye to verify the installation we can just check the npm version let's create the database tables required for our app we can see that currently we don't have any tables we need two tables for our app one to store department details and another one to store employee details let's start with department table this table will have two fields one to store an auto-generated table id and another one to store the department name let's insert some records using insert query now let's check the data in our table using select query let us similarly create table to store employee details we will be storing employee id employee name department to which the employee belongs to the date of joining and also the uploaded profile picture file name let's insert a record and check data using select query we have now successfully created the database objects needed for our app let's create the.net core web api project let's open up visual studio first click on create a new project choose asp.net web api core choose appropriate folder we might not need https for now now let's take a look at some of the important files all the dependencies and packages needed for our app can be found in the dependencies folder launch settings.json file contains the details of how the project should be started controllers folders contains controllers in which we write our api methods we generally keep the configuration details such as database details and app settings.json the program.cs contains the main program which is the entry point of our app also it creates web host which basically helps the app to listen to http requests the startup class configures all the services needed for our app services are basically reusable components that can be used across our app using dependency injection it also contains the configure method which creates our app's request processing pipeline we need to make a couple of changes in startup class one is to enable the course by default all web api projects come with a security which blocks requests coming from different domains we are basically writing instructions to disable that security and allow the requests to be served we are also making one more change to the serializer class to keep the json serializer as our default we might need to install a nuget package to do this let's import the namespace now let's simply run the project and check if everything works fine we see that the project works as expected and we see the json result from one of the sample controller method now let's create the models needed for our app let's create a folder to add our models let's add the department model department model has two fields department id and department name next let's add the employee model it has five fields employee id employee name department date of joining and photo file name let's start creating the api methods let me first add the sql server connection string in app settings json file now let's add an empty controller to write our api methods for department details screen to work with sql server we need to install a nuget package the package name is system.data.sqlclient let's also import the namespaces to read the connection strings from app settings file we need to make use of dependency injection now let's write an api method to get all data from department table i am writing raw queries here you can choose to write stored procedures or maybe use entity framework for this i will be getting the data into a data table object using the given sql connection and command we will execute our query and fill the data into data table using sql data reader finally we will return this data in json format let's test this api method this seems to work let's now add the post method to insert new record into department table we will be sending the department object to our post method in the form body let's also create the put method to update records and finally let's implement the delete method now let's test our api methods we will be using postman to test since we can test only get method in the browser the get method seems to be working let's add another department using post method looks like we are not sending success message after adding let's try again we see that the record is added successfully let's verify this now let's use the put method to update a record the put method also works as expected now let's check the delete method we need to make some changes to the delete method to accept the id and url we see that the delete method also works as expected let's implement the api methods for employee details screen let's add an empty api controller let's copy the contents from department controller and make changes accordingly now let's test our apis the get method works fine let's test the post method to insert a record post method works fine as expected now let's test the put method and update a record and finally let's test the delete method the delete method also works as expected let's now write an api to upload the photos let's create a folder to store photos to be able to use this folder to store and retrieve photos we need to add some instructions in the startup class now let's write the api method i am giving a custom root name for this method and this is a post method if there is any exception while saving file i will simply return the default anonymous picture file name we are going to extract the first file which is attached to form data we need to again use the dependency injection to get the application path to photos folder once the file is saved we will simply return the file name let's now test the api by uploading an image file we see that the upload was successful and we can see the image in the newly created path let's create our react js project open up command prompt in the desired folder and type the command npx create react app and the name of the app let's navigate inside the project and open up visual studio code let's simply run the project and see how it looks just type npm start what you see on the screen is the default template that gets added when we create new project index.html is the file that gets finally rendered on the screen observe that it has a div with id root in index js we can see that the contents of our app component is injected into the div with id root so app.js is our root component and what you see on the screen comes from this file let's delete the content and add an heading tag let's install bootstrap for styling copy the style sheet reference and add it in the head section the bundle reference can be added near the closing body tag we see that our heading with bootstrap styling is getting displayed let's start adding the routing for our app we need to install an npm package called react router dom to add routing for our react app now let's add the components or the pages for our app we will need three components one for home page one for department details and another one for employee details let's add contents in home component the html can be defined in render method let's add similar content for department and employee component now let's add the navigation menu with routing let's import all these components also let's import the modules needed for routing now let's add the navigation menu in the switch tag we can define the root paths slash home will be routed to home component slash department for department component and slash employee for employee component let's start the app and check if this works we see that the routing works as expected let's create a file to store our api endpoints let's import it in the department component let's create a constructor to define the state variables the super props is basically used to call the constructor of its parent class in state we will be defining an array called departments which will be populated with the department's data from api let's now add html to display departments data in a bootstrap table we will be using map method to iterate and display data along with department id and department name columns we will also have options column to edit or delete records let's add bootstrap icons for edit and delete now let's add the method to refresh the department's data from the get api method once the response is available we convert it to json and assign it our array we will call the refresh method once the component is mounted we need to also declare the state variables in render method to use it inside html we see that the table now displays data as expected let's add the modal pop-up window with form fields to add or edit departments let's define the variables that we are going to use in the modal window now let's add the html code for bootstrap modal window the title of the modal will come from variable we will have one text box to add or edit department name when the value of the text box changes we will execute a function and update the variable simultaneously we will have a button to create new department this will be visible when user wants to add new department the update button will be visible when the user wants to edit a department now let's add a button to open the modal window this will be to add new department similarly for editing department in the add click method we set the modal title to add department department id to 0 and department name will be empty in the edit click title will be edit department and department id and name will be based on the row data bye we see that the modal windows works as expected now let's add the methods to create new department by consuming the postdepartment method we are going to pass the new department name as jason in the method body once successful we display the message and also refresh the grid let's test the method by adding new department we see that adding new department works let's now add the update method by consuming the put api method let's test it by updating a record also let's implement the delete method we will be taking user confirmation before deletion let's now test the delete method the delete method also works as expected let's now complete the employee details screen we are going to copy the department component and make changes to it we will store the data in employees array in the form fields we need employee id employee name department of joining photo file name and the path to photos can be taken from variables file in refresh method we are going to refresh both employees and departments array we are going to use departments array and drop down bye in the modal window we need to display profile photo as well so let's use bootstrap flex bye the image source can be computed from the variables department field will be drop down the values for drop down will come from department's array date of joining will be a date field we see that the grid and pop-up window for employee screen works as expected now let's implement the method to upload photo let's add a button to choose the file input in the upload method we will create a form data and attach the first file which was chosen once uploaded we replace the photo file name variable now let's test our methods let's add a new employee this seems to work let's test the put method and update a record the put method also works let's now test the delete method we see that the delete method also works as expected let's implement the sorting and filtering feature to our grid we will implement it to the department details page let's first create variables to accept filter inputs from user also another variable array to store the backup or data without filter let's now implement the filter function we will be using the includes built-in function to check and filter the array let's add the text box to accept user inputs for filtering once the value and text box changes we update the filter variable and call the filter function we see that the filtering works as expected let's now implement the sorting function we will be sending the property name and a boolean value which indicates whether to sort by ascending or descending let's add icons for calling the sorting function bye let's test the feature we see that the sorting also works as expected

Channel: Art of Engineer

Views: 9,725

Rating: 4.9115043 out of 5

Keywords: .net core, web api, react js, react, full stack, microsoft sql server, backend, crud, crud app

Id: ON-Z1iD6Y-c

Length: 61min 17sec (3677 seconds)

Published: Sun Jul 11 2021