5.1 App Screen 2 (UI + Backend integration)
Jul 10, 2017 · 2 min read
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:
Direct link to second screen my webapp
Next: App Screen 3
