Connecting frontend of attendance system with backend

calenderwithevents

Hey guys if have followed previous tutorial and created the backend then now its time to understand connection of backend to frontend. Its a very easy task using ajax requests. You can git clone entire source code of this tutorials here
I made a couple of changes to frontend like exporting attendance code into a separate file and requiring it into main index.jsx file which can be done export keyword.
The steps are as followed:
1)Create eventlist as blank array in this.state(getinitialstate) method.

2)Create componentdidmount method and make ajax call to backend to retrieve all records from backend from previous session.To know about componentdidmount and other lifecycle methods refer this link

This call requires jquery so make sure to add appropriate script tag in index.html like this:
<script type="text/javascript" src="js/jquery.js"></script>
At line no 3 we initiate our ajax call using ajax keyword. type specifies the request type to server which is GET in this case.
dataType specifies the return type the client expects from the server which is json in our case.
success and error functions specify the code to execute on sucessfull completion and error condition of request respectively.
With setstate method we populate the initial data for app.

2)Now let us send data to backend when present or absent option is submitted.
The submit request is handled by timeclose function which is modified as follows:

If user select option as present we get state value as 1 else 2 for absent.Instead of pushing the data to event list array we make ajax post request to backend to save attendance records in mongodb attendancedb collection.
If the request is completed successfully then we push event to eventlist array.
Similar flow is followed for absent option.
This gets us done with basic attendance system.In the github repo I have included the code for generating monthly and periodic reports in report.js file which follows similar ajax call flow.
You can go through it at your own pace if you need to.That is all we need to create a basic attendance marking system.
In the next tutorials I will mostly cover how to make login system for this kind of apps.
Till then enjoy your life as a developer and happy coding.

Share post-
About Saurabh Mhatre 71 Articles
Currently working in web and hybrid application development