5.1 App Screen 2 (UI + Backend integration)

Paras Kumar
Jul 10, 2017 · 2 min read

Web app Screens

Home Screen

click on View Result to go to student login page

Student login page

Just fill the your student ID to view your score

Marks Display (Second major screen of my web app)

When your result is not prepared by admin

Result of Student id 35 is not prepared

When student Id do not belong to registered student

Student id 100 is not registered

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:

Link to my webapp

Direct link to second screen my webapp

Next: App Screen 3

Paras Kumar

Written by

C.S.E Undergraduate, IIT Ropar

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade