#JP71 (PPDB ONLINE) Formulir Pendaftaran Siswa Baru Online (Maps, Deteksi Zonasi, Jarak, Upload Foto)

byJavabitpro

PPDB Formulir Pendataran Online Siswa Baru Lengkap Maps Tanpa API KEY, Deteksi Zonasi, Jarak dan Upload Foto



1. Copy Spreadsheets (Klik disini)

2. Pada Spreadsheets yang telah di copy di atas terdapat 2 sheet yaitu sheet DATA dan sheet Kec.

Pada sheet Data terdapat beberapa kolom data-data detail calon siswa baru yang akan terisi otomatis saat penginptan melalu Website Apps Script.


3. Pada sheet Kec terdapat kolom Kabupaten dan Kecamatan, yang dimana saat memilih salah satu kabupaten akan menampilkan kecamatan ada pada kabupaten tersebut.


4. Buatlah Folder baru pada Google Drive untuk menyimpan berkas foto.


5. Kembali pada halaman Spreadsheets. Buatlah lembar kerja Apps Script, dengan cara klik menu Ekstensi/Extensions lalu pilih Apps Script.


6. Pada lembar kerja Apps Script terdapat file default yaitu :
  • Code.gs
  • Index.html
  • JavaScript.html
  • visit.html


7. Copy dan pastekan script di bawah ini ke Code.gs
*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini* 

Masukkan Password Untuk Melihat Script (Password ada di dalam video) 

/**
 * PPDB Online
 * By www.javabitpro.com
 */


var folderID = "ID_Folder_Berkas"; //Ganti Dengan ID Folder Berkas
var sheetName = "Data"; 

function doGet(e) {
  var htmlOutput =  HtmlService.createTemplateFromFile('Index');
  var kabupatens = getKabupaten();
  htmlOutput.message = '';
  htmlOutput.kabupatens = kabupatens;
  return htmlOutput.evaluate();
}
function getKabupaten() { 
  var ss= SpreadsheetApp.getActiveSpreadsheet();
  var lovSheet = ss.getSheetByName("Kec"); 
  var getLastRow = lovSheet.getLastRow();
  var return_array = [];
  for(var i = 2; i <= getLastRow; i++)
  {
      if(return_array.indexOf(lovSheet.getRange(i, 1).getValue()) === -1) {
        return_array.push(lovSheet.getRange(i, 1).getValue());
      }
  }

  return return_array;  
}

function getKecamatan(kabupaten) { 
  var ss= SpreadsheetApp.getActiveSpreadsheet();
  var lovSheet = ss.getSheetByName("Kec"); 
  var getLastRow = lovSheet.getLastRow();
  var return_array = [];
  for(var i = 2; i <= getLastRow; i++)
  {
      if(lovSheet.getRange(i, 1).getValue() === kabupaten) {
        return_array.push(lovSheet.getRange(i, 2).getValue());
      }
  }


  return return_array;  
}
/* @Include JavaScript and CSS Files */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

function uploadFiles(formObject) {
  try {
    var folder = DriveApp.getFolderById(folderID);
    var sheet = SpreadsheetApp.getActive().getSheetByName(sheetName);
    var fileUrl = "";
    var fileName = "";

    //Upload file if exists and update the file url
    if (formObject.myFile.length > 0) {
      var blob = formObject.myFile;
      var file = folder.createFile(blob);
      file.setDescription("Uploaded by " + formObject.nik);
      fileUrl = file.getUrl();
      fileName = file.getName();
    } else{
      fileUrl = "Record saved without a file";
    }

    //Saving records to Google Sheet
    sheet.appendRow([
      formObject.nik,
      formObject.nama_lengkap,
      formObject.jenis_kelamin,
      formObject.tanggal_lahir,
      formObject.agama,
      formObject.kabupaten,
      formObject.kecamatan,
      formObject.alamat,
      formObject.email,
      formObject.phone,
      formObject.latitude,
      formObject.longitude,
      formObject.jarak,
      formObject.statusLokasi,
      fileName,
      fileUrl,
      Utilities.formatDate(new Date(), "GMT+5:30", "yyyy-MM-dd'T'HH:mm:ss'Z'")]);
    
    // Return the URL of the saved file
    return fileUrl;
    
  } catch (error) {
    return error.toString();
  }
}

Sesuaikan ID Folder dengan ID Folder Berkas yang tadi sudah dibuat.



8. Copy dan pastekan script di bawah ini ke Index.html

Masukkan Password Untuk Melihat Script (Password sama dengan di atas) 

<html>
<head>
<base target="_top">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
<script src="https://unpkg.com/leaflet/dist/leaflet-locallang.js"></script>
  <!-- font-awesome@6.2.0 icon Visit -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">

   <?!= include('visit')?>
<script>
      // Atur bahasa ke Indonesia
      L.setLocale('id');
    </script>
    <script>
    function GetKecamatan1(kabupaten) 
    {
    
    google.script.run.withSuccessHandler(function(ar) 
    {

    console.log(ar);
    
    kecamatan.length = 0;
    
    let option = document.createElement("option");
    option.value = "";
    option.text = "";
    kecamatan.appendChild(option);
    
    ar.forEach(function(item, index) 
    {    
      let option = document.createElement("option");
      option.value = item;
      option.text = item;
      kecamatan.appendChild(option);    
    });
    
    }).getKecamatan(kabupaten);
    
    };
  </script>  
  <?!= include('JavaScript'); ?>

<div class="container my-5 py-5 z-depth-1 border-top rounded-top">

 <form id="myForm" onsubmit="handleFormSubmit(this)">
  <!--Section: Content-->
  <section class="px-md-5 mx-md-5 text-center text-lg-left dark-grey-text">

    <style>
       .border-top {
      border-top: 10px solid #33b5e5 !important;
         border-image:   linear-gradient(to right, blue 25%, orange 25%, orange 50%,red 50%, red 75%, teal 75%) 5;

    }
    .rounded-top {
    border-top-left-radius: 0.25rem!important;
    border-top-right-radius: 0.25rem!important;
}
      .map-container {
        height: 230px;
        position: relative;
      }
.z-depth-1, .card.gradient-card:focus-within .card-image {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12) !important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12) !important;
}
      .map-container iframe {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
      }
       #map {
        height: 400px;
        width: 100%;
      }
      .loading-spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top: 4px solid #3498db;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 10px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

    </style>

    <!--Grid row-->
    <div class="row d-flex justify-content-center">

      <!--Grid column-->
      <div class="col-md-6 text-center">

        <h3 class="font-weight-bold">FORMULIR PENDAFTARAN</h3>
        <h4 class="font-weight-bold">CALON SISWA BARU (Deteksi Zonasi)</h4>
        <p class="text-muted">source Code by : Jabaitpro</p>

      </div>
      <!--Grid column-->

    </div>
    <!--Grid row-->
 <div id="map"></div>
    <!--Grid row-->
    <div class="row">

      <!--Grid column-->
      <div class="col-lg-6 col-md-12 mb-4 mb-md-0">

<!------ NIK ---------->
<div class="md-form md-outline mt-3">
  <label for="nik">NIK</label>
  <input type="number" class="form-control"  name="nik"  placeholder="Masukkan NIK 16 Digit"  required>
</div>

<!------ Nama Lengksp ---------->
<div class="md-form md-outline mt-3">
  <label for="nama_lengkap">Nama Lengkap</label>
  <input type="text" class="form-control" id="nama_lengkap"  name="nama_lengkap"  placeholder="Masukkan Nama Lengkap" required>
</div>


<!------ Jenis Kelamin ---------->
<div class="md-form md-outline mt-3">
 <label for="jenis_kelamin">Jenis Kelamin</label>
  <select id="jenis_kelamin" name="jenis_kelamin" class="form-control">
    <option value="">Pilih Jenis Kelamin..</option>
    <option value="Laki-Laki">Laki-Laki</option>
    <option value="Perempuan">Perempuan</option>
  </select>
</div>

<!------ Tanggal Lahir ---------->
<div class="md-form md-outline mt-3">
  <label for="tanggal_lahir">Tanggal Lahir</label>
  <input type="date" class="form-control"  id="tanggal_lahir" name="tanggal_lahir" required>
</div>

<!------ Agama ---------->
<div class="md-form md-outline mt-3">
 <label for="agama">Agama</label>
  <select id="agama" name="agama" class="form-control">
    <option value="">Pilih Agama...</option>
    <option value="Islam">Islam</option>
    <option value="Kristen">Kristen</option>
    <option value="Katolik">Katolik</option>
    <option value="Hindu">Hindu</option>
    <option value="Buddha ">Buddha</option>
    <option value="Khonghucu ">Khonghucu</option>
  </select>
</div>


<!------ Email ---------->
<div class="md-form md-outline mt-3">
  <label for="email">Email</label>
  <input type="email" class="form-control"  id="email" name="email" placeholder="Masukkan Email" required>
</div>

<!------ Telp ---------->
<div class="md-form md-outline mt-3">
  <label for="phone">Telp</label>
  <input type="tel" class="form-control"  id="phone" name="phone" placeholder="Masukkan Nomer Telp" required>
</div>
<br>
 <!------ Upload Foto ---------->
<div class="form-group">
<label for="FormControlFile">Foto (JPG/JPEG/PNG)</label> 
<input name="myFile" class="form-control-file" type="file" accept="image/*" id="FormControlFile" required />
</div>       
<br>
        
        

      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-lg-6 col-md-12 mb-0 mb-md-0">

<!------ latitude ---------->
<div class="md-form md-outline mt-3">
  <label for="latitude">Latitude</label>
  <input type="text" class="form-control"  id="latitude" name="latitude" placeholder="Latitude Otomatis" readonly>
</div>

<!------ longitude ---------->
<div class="md-form md-outline mt-3">
  <label for="longitude">Longitude</label>
  <input type="text" class="form-control"  id="longitude" name="longitude" placeholder="Longitude Otomatis" readonly>
</div>

<!------ jarak ---------->
<div class="md-form md-outline mt-3">
  <label for="jarak">Jarak Ke Sekolah (KM)</label>
  <input type="text" class="form-control"  id="jarak" name="jarak" placeholder="Jarak Otomatis" readonly>
</div>

<!------ statusLokasi ---------->
<div class="md-form md-outline mt-3">
  <label for="statusLokasi">Deteksi Zonazi </label>
  <input type="text" class="form-control"  id="statusLokasi" name="statusLokasi" placeholder="Deteksi Zonazi Otomatis" readonly>
</div>

<!------ kab ---------->
<div class="md-form md-outline mt-3">
<div class="form-group">
<label for="kabupaten">Kabupaten </label>
<select name="kabupaten" class="form-control"   required onchange="GetKecamatan1(this.value)" >
<option selected disabled value="">Pilih Kabupaten</option>
<? for(var i = 0; i < kabupatens.length; i++) { ?>      
<option value="<?= kabupatens[i] ?>" ><?= kabupatens[i] ?></option>
<? } ?>
</select>
</div>        

<!------ kecamatan ---------->
<div class="md-form md-outline mt-3">
<div class="form-group">
<label for="kecamatan">Kecamatan </label>
<select name="kecamatan" id="kecamatan" class="form-control" required ></select>
</div>

<!--Alamat-->
<div class="md-form md-outline mb-3">
<label for="alamat">Alamat</label>
<textarea id="alamat" name="alamat" placeholder="Masukkan Alamat" class="md-textarea form-control" rows="3" required></textarea>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
<div id="output"></div>
<div id="loading-spinner" class="loading-spinner" style="display:none;"></div>
</section>
</div>

</form>

 

</div>

<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap"></script>
</body>
</html>


9. Copy dan pastekan script di bawah ini ke JavaScript.html

Masukkan Password Untuk Melihat Script (Password sama dengan di atas) 

<script>

      var map;
  var schoolMarker;
  var userMarker;
  var schoolLocation = L.latLng(-8.169039508673189, 113.7025241772047); // Sesuaikan dengan lokasi sekolah
  var schoolRadius = 10000; // Radius dalam meter (10 kilometer)
  var routingControl;

  

  function initMap() {
    map = L.map('map').setView([-8.169039508673189, 113.7025241772047], 11); // Samakan dengan lokasi sekolah di atas

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    // Samakan dengan lokasi sekolah di atas
    schoolMarker = L.marker([-8.169039508673189, 113.7025241772047], { draggable: false }).addTo(map); 

    // Samakan dengan lokasi sekolah di atas
    userMarker = L.marker([-8.169039508673189, 113.7025241772047], { draggable: false }).addTo(map);

    // Tambahkan area lingkaran di sekitar sekolah
    var schoolCircle = L.circle(schoolLocation, {
      color: 'blue',
      fillColor: 'blue',
      fillOpacity: 0.3,
      radius: schoolRadius
    }).addTo(map);

    map.on('click', function(event) {
      var latLng = event.latlng;
      userMarker.setLatLng(latLng);
      document.getElementById('latitude').value = latLng.lat;
      document.getElementById('longitude').value = latLng.lng;

      calculateDistanceAndStatus(latLng, schoolCircle);
    });

  }



  function calculateDistanceAndStatus(location, schoolCircle) {
    // Hapus rute sebelumnya jika ada
    if (routingControl) {
      map.removeControl(routingControl);
    }

    // Hitung rute dan jarak
    routingControl = L.Routing.control({
      waypoints: [
        L.latLng(location.lat, location.lng),
        schoolLocation
      ],
      routeWhileDragging: true
    }).addTo(map);

    routingControl.on('routesfound', function(event) {
      var distance = event.routes[0].summary.totalDistance / 1000; // Dalam kilometer
      document.getElementById('jarak').value = distance.toFixed(2);

      // Cek apakah lokasi di dalam atau di luar area lingkaran
      var isInsideZone = isLocationInsideZone(location, schoolCircle);
      var statusLokasi = isInsideZone ? 'Dalam Zonasi' : 'Diluar Zonasi';
      document.getElementById('statusLokasi').value = statusLokasi;
    });
  }

  function isLocationInsideZone(location, zone) {
    // Gunakan metode Leaflet untuk menentukan apakah lokasi di dalam area lingkaran
    return zone.getBounds().contains(location);
  }





  function preventFormSubmit() {
        var forms = document.querySelectorAll('form');

        for (var i = 0; i < forms.length; i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
            var spinner = document.getElementById('loading-spinner');
spinner.style.display = 'block';
          });
        }
      }
  window.addEventListener('load', preventFormSubmit);

  function handleFormSubmit(formObject){
    google.script.run.withSuccessHandler(updateUrl).withFailureHandler(onFailure).uploadFiles(formObject);
  }

  function updateUrl(url) {
    var div = document.getElementById('output');

    if(isValidURL(url)){
      div.innerHTML = '<div class="alert alert-success" role="alert"><a href="' + url + '">Peyimpanan Berhasil! <br>Klik Untuk Lihat Berkas Foto </a></div>';
      document.getElementById("myForm").reset();
      document.getElementById("alamat").value = '';
var spinner = document.getElementById('loading-spinner');
spinner.style.display = 'none';
      // Sembunyikan spinner setelah selesai (beri sedikit penundaan untuk efek visual)
  
        if (userMarker) {
      map.removeLayer(userMarker);
      
    }

    // Hapus rute jika ada
    if (routingControl) {
      map.removeControl(routingControl);
      routingControl = null;
    }

    // Kembali ke lokasi sekolah
    map.setView(schoolMarker.getLatLng(), 11);
    }else{
      //Show warning message if file is not uploaded or provided
      div.innerHTML = '<div class="alert alert-danger" role="alert">'+ url +'!</div>';
    }
  }

  function onFailure(error) {
    var div = document.getElementById('output');
    div.innerHTML = '<div class="alert alert-danger" role="alert">'+ error.message +'!</div>';
  }

  function isValidURL(string) {
    var res = string.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
    return (res !== null);
  }
   function openYTByMethod(){
    window.open("http://link.javabitpro.com/videolibrary")
   }
 function openSiteByMethod(){
    window.open("http://link.javabitpro.com/library")
   }
</script>


10. Copy dan pastekan script di bawah ini ke visit.html

Masukkan Password Untuk Melihat Script (Password sama dengan di atas) 

<link href="https://raw.githack.com/javabitpro/css/main/javabitprocssloginjp70.css" rel="stylesheet">
	<div class="fab-container2">

  </div>
	<div class="fab-container">
		<div class="fab fab-icon-holder">
			
		</div>
		<ul class="fab-options">
			<li>
				<span class="fab-label">Youtube</span>
				<div class="fab-icon-holder">
					<a  onclick= "openYTByMethod()"><i class="fa-brands fa-youtube"></i></i></a>
				</div>
			</li>
			<li style="margin-bottom: 10px;">
				<span class="fab-label">Website</span>
				<div class="fab-icon-holder">
					<a onclick= "openSiteByMethod()"><i class="fa-solid fa-globe"></i></a>
				</div>
			</li>			
		</ul>
	</div>


11. Klik ikon Save.


12. Klik tombol Terapkan/Deploy lalu pilih Deployment baru/New deployment.


13. Pastikan jenisnya adalah Aplikasi web, hak aksesnya adalah Siapa saja/Anyone lalu klik Terapkan/Deploy.


14. Salin atau Klik URL yang sudah di Deploy.


SELESAI !!!





Tags:
Previous Post Next Post

Promo