5.1 App Screen 2 (UI + Backend integration)

Ankur Pandey
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

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)

Tabular representation of Result

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 web app

Next: 6.1 App Screen 3 (UI + Backend integration)

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