Publish student result using google sheet, apps script, javascript and html form and get result By student ID

STUDENT RESULT | GET STUDENT RESULT BY ID NO | doPost(e)

An example of results publishing in apps script.| School Project.

Here we all try to create a web app and publish it as a Anonimous, that student easly can check their result by putting their id no. For this work, we have to publish result first then set up the form to check out the result by student Id. In this Project some different type function we'll use.

Let's first see the data sheet. This project getting data from this example sheet. You have also make a sheet like this or according to your requirement.

Example spreadsheet

Below are the functions that use this example sheet by id.

First for submit data or result entry. This will be protected. and only school staff can access to modify the data or make any type of changes like new entry, read, edit, delete and update.

Second for the student where student can put their roll no. in input, select the class and submit it to the sever. And get their result.
Let's moving to the point and get done. (Example on doPost(e) for silent side server click here).

First Step...

Here we need to move to google project page and create a new project. In this project file name 'Code.gs', write following type code (or copy and paste the following code and rearrange as your need or requirment).

In above code has three functions to get the project run. First function is doGet(e) to launch the page that has option to select the Class, input to fill out the id number and submit it to server.

Full doGet(e) function is bellow that launch the home.html page file.

Code.gs

function doGet(e) {
   var htmlOutput =  HtmlService.createTemplateFromFile('home');
   htmlOutput.result = 'Home';
   return htmlOutput.evaluate();
    }

home.html page file that has contain, class selection, Id input and submit button.

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <style>
select,input{
padding:5px;
width:100%;
border:1px dashed black;
margin:1px;
font-family:times}
input:hover{
background:yellow;}
</style>
</head>
<body>
<table border="0" width='200px' cellspacing="0" >
<tr>
<td width=20% align=center>
<?var url = getUrl();?>
<form method="post" action="<?= url ?>" > 
  <select name='cl'>
     <option value="0">Select Class:</option>
     <option value="I">I</option>
     <option value="II">II</option>
     <option value="III">III</option>
     <option value="IV">IV</option>
     <option value="V">V</option>
  </select>
<input type="number"name="rl" placeholder="ID Number">
<input type="submit" value="Get Result" name="Submit">
</form>
</td>
</tr><tr>
<td align=center>
<span><?= result ?></span><br>
</td>
</tr>
</table>
</body>
</html>

LIVE DEMO  

Second function is doPost(e). In this function has parameter to check and return the result. I have used the parameter to check out the result in google sheet. If result get, function launch the result page with result value else it returned to home page with error.

Full doPost(e) function is bellow that launch the result.html file and home.html

Code.gs

function doGet(e) {
   var htmlOutput =  HtmlService.createTemplateFromFile('home');
   htmlOutput.result = 'Home';
   return htmlOutput.evaluate();
    }

  function doPost(e){
   Logger.log(JSON.stringify(e));
       if(e.parameter.Submit  == 'Get Result'){ 
   var cls  = e.parameter.cl;
   var roll = e.parameter.rl;
   var ss   = SpreadsheetApp.openById('1CfXZzj-IIQzX_CgxmL8qOsFzQ5LD2lBZVmfqF90xv6A');
   var ws   = ss.getSheetByName(cls)
   var lr = ws.getLastRow();
   for(var i = 1;i <= lr;i++){
   var val = ws.getRange(i, 1).getValue();
       if(val == "E"+roll) {
   var v1 = ws.getRange(i, 2).getValue();
   var v2 = ws.getRange(i, 3).getValue();
   var v3 = ws.getRange(i, 4).getValue();
   }}
   var htmlOutput =  HtmlService.createTemplateFromFile('result');
    htmlOutput.cl = cls;
    htmlOutput.id = "E"+roll;
    htmlOutput.stn = v1;
    htmlOutput.tm = v2;
    htmlOutput.re = v3;
    return htmlOutput.evaluate();
   }else{
    var htmlOutput =  HtmlService.createTemplateFromFile('home');
    htmlOutput.result = ''; 
    return htmlOutput.evaluate();
    }}; 

   function getUrl() {
 var url = ScriptApp.getService().getUrl();
 return url;
} 

result.html file

<html>
<head>
  <base target="_top">
  <style>
input{
width:15%;
border:1px dashed black;
margin:1px;}
input:hover{
background:yellow;}
table {
  font-family: times;
  border-collapse:collapse;
  width: 30%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;border:1px solid green;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>
<table border="0" width=100% cellspacing="0" >
 <tr>
 <td>Class:</td>
 <td><?= cl ?></td>
 </tr><tr>
 <th>ID No:</th>
 <th><?= id ?></th> 
 </tr><tr>
 <td>Student name:</td>
 <td><?= stn ?></td>
 </tr><tr>
 <td>Total Marks:</td>
 <td><?= tm ?></td>
 </tr><tr>
 <td>Grade:</td>
 <td><?= re ?></td>
 </tr>
<tr>
<td colspan=2 align=center>
 <?var url = getUrl();?>
<form method="post" action="<?= url ?>"> Back to
<input type="submit" value="Home" name="back"></form></td>
</tr>
</table>
</body>
</html>

LIVE DEMO

>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.

I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.

THANKS FOR VISITING CodyLab

Have a nice day!

-------------------------- -------------------------

CodyLab

Publish student result using google sheet, apps script, javascript and html form and get result By student ID | School Project - CodyLab

STUDENT RESULT | GET STUDENT RESULT BY ID NO | doPost(e)

An example of results publishing in apps script.| School Project.

First Step...

Post a Comment

Login system - google Apps script - CodyLab

School Management Software || Manage Classes

Create School Management System || Student list

School Management Software using Apps script, JavaScript and Google sheet for free

CRUD WEB APP | GOOGLE APPS SCRIPT | READ, WRITE, UPDATE AND DELETE DATA | GOOGLE SPREADSHEET AND APPSSCRIPT - CodyLab