5.1 App Screen 2 (UI + Backend integration)
Jul 22, 2017 · 2 min read
Function of App screen 2:
To retrieve result of a student whose id is entered.
Sections where I used Hasura APIs:
Hasura Data API To retrieve the result of students from Result table of database.
Additional library used
1. Bootstrap
2. Sweet Alert
Web app Screens
Home Screen

Student login page

Marks Display (Second major screen of my web app)

When your result is not prepared by admin

When student Id do not belong to registered student

Backend Integration
I have used AJAX -XMLHttpRequest to fetch marks from result table, the basic ajax request I used is shown below:
function pulluser(){ var request= new XMLHttpRequest();
var x = document.getElementById("displayMarksTable").rows[1].cells;
request.onreadystatechange= function(){
if(request.readyState===XMLHttpRequest.DONE && request.status===200){
var response=JSON.parse(this.responseText);
x[2].innerHTML = Number(response[0].physics);
x = document.getElementById("displayMarksTable").rows[2].cells;
x[2].innerHTML = Number(response[0].chemistry);
x = document.getElementById("displayMarksTable").rows[3].cells;
x[2].innerHTML = Number(response[0].mathematics);
x = document.getElementById("displayMarksTable").rows[4].cells;
x[2].innerHTML = Number(response[0].biology);
x = document.getElementById("displayMarksTable").rows[5].cells;
x[2].innerHTML = Number(response[0].english);
x = document.getElementById("displayMarksTable").rows[6].cells;
x[2].innerHTML = Number(response[0].computer_science);
document.getElementById("id").innerHTML=id;
document.getElementById("remarks").innerHTML=response[0].remarks;
pulluserinfo();
}
} request.open('POST', "https://data.cockerel94.hasura-app.io/v1/query", true);
request.withCredentials=true;
request.setRequestHeader('Content-type','application/json');
request.send(JSON.stringify({ type:"select", args:{ table:"Result", columns:[ "*" ] , where:{"id":id}}}));
};
function pulluserinfo(){
var request= new XMLHttpRequest();
request.onreadystatechange= function(){
if(request.readyState===XMLHttpRequest.DONE && request.status===200){
var response=JSON.parse(this.responseText);
document.getElementById("name").innerHTML=response[0].name;
}
}
request.open('POST', "https://data.cockerel94.hasura-app.io/v1/query", true);
request.withCredentials=true;
request.setRequestHeader('Content-type','application/json');
request.send(JSON.stringify({ type:"select", args:{ table:"User_Info", columns:[ "*" ] , where:{"id":id}}}));
};
Links to my webapp:
