Attendance Form | GEO Tag | Location Capture By HTML Form

In this blog we will tell you Location Capture By HTML Form so read the complete blog carefully and learn Location Capture By HTML Form according to given guidelines.

Google Sheet Copy :- Click to Google Sheet Copy With Source Code

Google Sheet Data show :- See Data

Practical -

Click to Practical

Step 1 :- Create 4 file Name Given Below

Location Capture.gs
index.html
js.html
css.html

Step 2 :- Copy of Location Capture.gs Code Given Below

function doGet(e)
{
    return HtmlService.createTemplateFromFile('index').evaluate().setTitle("Employee Attendance Form");
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}


function fetchEmailId()
{

  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("Master");
  
  var response ={};
  
  var emails = sheet.getRange(2, 1, sheet.getLastRow()).getValues();

  var pwds = sheet.getRange(2, 2, sheet.getLastRow()).getValues();
  
  response.status = "success";
  response.emailid=emails;
  response.pwd = pwds;
  
  return JSON.stringify(response);
  
}



function authenticateUser(userdata)
{
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("Master");
  var status = "fail";
  var userids = sheet.getRange(1, 1, sheet.getLastRow()).getValues();
  var userpass = sheet.getRange(1, 2, sheet.getLastRow()).getValues();
  
  var userDetails = JSON.parse(userdata);
  
  var useremail = userDetails.userid;
  var userpassword = userDetails.userpass;
  
  var found = 0;
  
  for(var i=0;i< userids.length;i++)
  {
    if(userids[i]==useremail && userpass[i]== userpassword)
    {
      found =1;
      status = "success";
      break;
    }
    
  }
  return status;
}


function saveToSheet(userdata)
{
  
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("Database");
  var lastrow = sheet.getLastRow()+1;
  var userdetails = JSON.parse(userdata);
  
  var curdate = Utilities.formatDate(new Date(), "IST", "dd/MM/YYYY");
  var useremail = userdetails.userid;
  var userattendancetype = userdetails.attendanceType;
  var username = userdetails.username;
  var curtime = userdetails.currentTime;
  var latlong = userdetails.latlong;
  var lat = latlong.split(",")[0];
  var long = latlong.split(",")[1];
  var mapLink = 'https://www.openstreetmap.org/?mlat=' + lat + '&mlon='+long+'#map=18/' + `${lat}\/${long}`;
  sheet.getRange(lastrow, 1).setValue(curdate);
  sheet.getRange(lastrow, 2).setValue(username);
  sheet.getRange(lastrow, 3).setValue(useremail);
  sheet.getRange(lastrow, 4).setValue(userattendancetype);
  sheet.getRange(lastrow, 5).setValue(curtime);
  
  sheet.getRange(lastrow, 6).setValue(latlong);
  sheet.getRange(lastrow, 7).setValue(mapLink);
  return "success";
  
  
}

Step 3 :- Copy of index.html Code Given Below

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
      <meta name="viewport" content="width=device-width, initial-scale=1. shrink-to-fit=no"> 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <?!= include('css'); ?>
  </head>
  <body onload="initialSetup();">
  <div class="container mb-3">
  <form>
  <div class="form-group mt-3 mb-3">
  <label for="userEmail" class="col-4 col-form-label mt-4"><b>EMAIL</b></label> 
  <div class="col-8">
  <select id="userEmail" name="userEmail" required="required" class="custom-select mt-4"></select>
  </div>
  </div>
  <div class="form-group mt-3 mb-3">
  <label for="userPassword" class="col-4 col-form-label mt-4"><b>PASSWORD</b></label> 
  <div class="col-8">
  <input id="userPassword" name="userPassword" placeholder="Enter your password" type="password" required="required" class="form-control mt-4">
  </div>
  </div>
  
  <div class="form-group mt-3 mb-3">
  <label for="userName" class="col-4 col-form-label mt-4"><b>USER NAME</b></label> 
  <div class="col-8">
  <input id="userName" name="userName" placeholder="Enter your name" type="text" required="required" class="form-control mt-4">
  </div>
  </div>
  
  <div class="form-group mt-3 mb-3">
  <label for="attendanceType" class="col-4 col-form-label mt-4"><b>ATTENDANCE TYPE</b></label> 
  <div class="col-8">
  <select id="attendanceType" name="attendanceType" required="required" class="custom-select mt-4">
  <option value="IN">IN</option>
  <option value="OUT">OUT</option>
  </select>
  </div>
  </div> 
  <div class="form-group mt-3 mb-3">
  <label for="userLatLong" class="col-4 col-form-label mt-4"><b>LAT LONG</b></label> 
  <div class="col-8">
  <input id="userLatLong" name="userLatLong" type="text" required="required" class="form-control mt-4" disabled>
  </div>
  </div>
  <div class="form-group mt-3 mb-3">
  <div class="offset-4 col-8">
  <button name="submit" type="button" class="btn btn-primary mb-4" onclick="checkUser();">Submit</button>
  </div>
  </div>
  </form>
  <?!= include('js'); ?>
  
  </div>
  </body>
</html>

Step 4 :- Copy of js.html Code Given Below

<script>

function initialSetup(){

google.script.run.withSuccessHandler(returnedServerResponse).fetchEmailId();

}


function returnedServerResponse(response){

  var serverresponse = JSON.parse(response);
  
  if(serverresponse.status =="success")
  {
     for(var i=0;i<serverresponse.emailid.length-1;i++)
     {
        $("#userEmail").append('<option value="' + serverresponse.emailid[i] + '">' + serverresponse.emailid[i] + '</option>');
     }
  }

}


function checkUser()
{

if($("#userName").val()=="" || $("#userEmail").val()=="" || $("#userPassword").val()=="" || $("#attendanceType").val()=="")
{
getLocation();
alert("Please complete the required details and enable location permission...");
}
else{
$("#submitattendance").prop("disabled", true);

getLocation();
var userDetails={};

userDetails.userid = $("#userEmail").val();
userDetails.userpass = $("#userPassword").val();

google.script.run.withSuccessHandler(authenticationResponse).authenticateUser(JSON.stringify(userDetails));
}
}


function authenticationResponse(response){
if(response=="success"){
var userDetails={};
userDetails.username = $("#userName").val();
userDetails.userid = $("#userEmail").val();
userDetails.userpass = $("#userPassword").val();
userDetails.attendanceType = $("#attendanceType").val();
userDetails.currentTime = new Date().getHours()+":"+new Date().getMinutes() + ":" + new Date().getSeconds();

getLocation();
userDetails.latlong = $("#userLatLong").val();
if($("#userName").val()=="" || $("#userEmail").val()=="" || $("#userPassword").val()=="" || $("#attendanceType").val()=="" || ($("#userLatLong").val()=="")){
alert("Please complete the required details and enable location permission...");
$("#submitattendance").removeAttr('disabled');
}
else{
google.script.run.withSuccessHandler(afterDataSaved).saveToSheet(JSON.stringify(userDetails));
}
}

else{

alert("Email or Password Incorrect. Please try again...");
$("#submitattendance").removeAttr('disabled');
}
}

function afterDataSaved(response){

if(response =="success"){
$("#userName").val("");
$("#userPassword").val("");
alert("Attendance submitted successfully...");

}

else{

alert("Server Error.. Please try again...");
}
$("#submitattendance").removeAttr('disabled');
}

function getLocation() {
var x = document.getElementById("userLatLong");
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
    
function showPosition(position) {

   $("#userLatLong").val(position.coords.latitude + "," + position.coords.longitude);
}



</script>

Step 5 :- Copy of css.html Code Given Below

<style>
.container{

  box-shadow: 2px 2px 50px;
  margin-top:10px;
  width; auto;
  margin-bottom:10px;
  border-radius:10px;
  background-color:white;
  border:2px solid #f5c6cb;
  box-shadow: 1px 1px 30px;
}

</style>

Attendance Form | GEO Tag | Location Capture By HTML Form

Attendance Form | GEO Tag | Location Capture By HTML Form

In this blog we will tell you Location Capture By HTML Form so read the complete blog carefully and learn Location Capture By HTML Form according to given guidelines.

Google Sheet Copy :- Click to Google Sheet Copy With Source Code

Practical -

Click to Practical

Step 1 :- Create 4 file Name Given Below

Location Capture.gs
index.html
js.html
css.html

Step 2 :- Copy of Location Capture.gs Code Given Below

Step 6 :- Click here to >> Deploy >> New Deployment >>

More Detail See Video :-

Post a Comment

Donation and Support

Contact Form

Attendance Form | GEO Tag | Location Capture By HTML Form

Attendance Form | GEO Tag | Location Capture By HTML Form

In this blog we will tell you Location Capture By HTML Form so read the complete blog carefully and learn Location Capture By HTML Form according to given guidelines.

Google Sheet Copy :- Click to Google Sheet Copy With Source Code

Practical -

Step 1 :- Create 4 file Name Given Below

Location Capture.gsindex.htmljs.htmlcss.htmlStep 2 :- Copy of Location Capture.gs Code Given Below

Step 6 :- Click here to >> Deploy >> New Deployment >>

More Detail See Video :-

Post a Comment

Contact Form

Location Capture.gs
index.html
js.html
css.html

Step 2 :- Copy of Location Capture.gs Code Given Below