#JP80 Website Pengumuman Hasil Kelulusan dan Print Menggunakan Web Apps Script (Responsive)

byJavabitpro

Website Pengumuman Hasil Kelulusan dan Print Menggunakan Web Apps Script (Responsive)




1. Copy Spreadsheet (Klik Disini)

2. Pada Spreadsheet yang telah di copy di atas terdapat 1 sheet Data dengan beberapa kolom yaitu :

  • No Peserta
  • ID Registrasi
  • Nama
  • Alamat
  • Status (LULUS atau TIDAK-LULUS)

3. Buatlah lembar kerja Apps Script dengan cara klik menu Ektensi/Extensions lalu pilih Apps Script.


4. Pada lembar kerja Apps Script terdapat 4 file default yaitu :
  • Code.gs
  • Index.html
  • Css.html
  • Visit.html

5.  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) 

//Source Code www.javabitpro.com


function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate()
      .setTitle('Javabitpro')
      .addMetaTag('viewport','width=device-width , initial-scale=1')
        .setFaviconUrl('https://i.imgur.com/thmO7Xv.png'); 
        
}

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

function searchDataById(id) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data');
  var data = sheet.getDataRange().getValues();
  var result = [];

  for (var i = 1; i < data.length; i++) {
    if (data[i][1] == id) {
      result.push({
        No: data[i][0],
        ID: data[i][1],
        Nama: data[i][2],
        Alamat: data[i][3],
        Status: data[i][4]
        // Tambahkan data sesuai kebutuhan
      });
    }
  }

  return result;
}



6. Copy dan pastekan script di bawah ini Index.html

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

<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!-- Tambahkan referensi Bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 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')?>
<?!= include('Css'); ?></head>
<body class="container" style="background-color: #351c75;">
<img src="https://www.kemdikbud.go.id/main/files/large/83790f2b43f00be" width="100" height="100">
<h1>PENGUMUMAN KELULUSAN</h1>
<h3>Akademi Javabitpro</h3>
<h4>Tahun 2024/2025</h4>
<!-- Menambahkan modal spinner -->
<div class="modal" id="loadingModal" tabindex="-1" role="dialog">
	<div class="loader">
		<div class="loader-inner">
			<div class="loader-line-wrap">
				<div class="loader-line"></div>
			</div>
			<div class="loader-line-wrap">
				<div class="loader-line"></div>
			</div>
			<div class="loader-line-wrap">
				<div class="loader-line"></div>
			</div>
			<div class="loader-line-wrap">
				<div class="loader-line"></div>
			</div>
			<div class="loader-line-wrap">
				<div class="loader-line"></div>
			</div>
		</div>
	</div>
</div>
<form id="searchForm" class="example">
	<div class="form-group">
		<input type="text" id="id" name="id" placeholder="Masukkan ID Registrasi.."></div>
	<button type="button" onclick="searchData()"><i class="fa fa-search"></i></button>
</form>
<div id="result" class="mt-4"></div>
<!-- Menambahkan tombol Print -->
<script>
      function searchData() {
        // Menampilkan modal spinner saat tombol "Search" diklik
        $('#loadingModal').modal('show');
        var id = document.getElementById('id').value;
        google.script.run.withSuccessHandler(function(result) {
          displayResult(result);
          // Menyembunyikan modal spinner setelah hasil pencarian ditampilkan
          $('#loadingModal').modal('hide');
        }).searchDataById(id);
        // Sembunyikan formulir setelah tombol "Search" diklik
        document.getElementById('searchForm').style.display = 'none';
      }
function displayResult(result) {
  var resultDiv = document.getElementById('result');
  resultDiv.innerHTML = '';
 if (result.length > 0) {
    var htmlContent = '<h2 class="mt-4"></h2>';
    htmlContent += '<table class="custom-table">';
    htmlContent += '<tbody>';
    for (var i = 0; i < result.length; i++) {
      var statusClass = result[i].Status.toUpperCase() === 'LULUS' ? 'LULUS' : 'TIDAK-LULUS';
    //Baris Nama
      htmlContent += '<tr>';
      htmlContent += '<td class="title-column">Nama</td>';
      htmlContent += '<td>' + result[i].Nama + '</td>';
      htmlContent += '</tr>';
    //Baris No
      htmlContent += '<tr>';
      htmlContent += '<td class="title-column">No Peserta</td>';
      htmlContent += '<td>' + result[i].No + '</td>';
      htmlContent += '</tr>';
    //Baris ID
      htmlContent += '<tr>';
      htmlContent += '<td class="title-column">ID Registrasi</td>';
      htmlContent += '<td>' + result[i].ID + '</td>';
      htmlContent += '</tr>';
    //Baris Alamat
      htmlContent += '<tr>';
      htmlContent += '<td class="title-column">Alamat</td>';
      htmlContent += '<td>' + result[i].Alamat + '</td>';
      htmlContent += '</tr>';
    //Baris Kosong
      htmlContent += '<tr style="background-color: #351c75; text-align: center;">';
      htmlContent += '<td colspan="2"></td>';
      htmlContent += '</tr>';
    //Baris Judul Status
      htmlContent += '<tr style="background-color: #d1d1d1; text-align: center;">';
      htmlContent += '<td colspan="2"><b>STATUS KELULUSAN DI NYATAKAN</b></td>';
      htmlContent += '</tr>';
    //Baris Status
      htmlContent += '<tr>';
      htmlContent += '<td colspan="2" class="' + statusClass + '"><b>' + result[i].Status + '</b></td>';
      htmlContent += '</tr>';
    //Baris Kosong
      htmlContent += '<tr>';
      htmlContent += '<td colspan="2"></td>';
      htmlContent += '</tr>';
    }
      htmlContent += '</tbody>';
      htmlContent += '</table>';
    resultDiv.innerHTML = htmlContent;
    //Tombol Pront dan Kembali
    resultDiv.innerHTML += '<div class="text-center"><button type="button" id="printButton" class="btn btn-success mt-3" onclick="printResult()">Print</button> <button type="button" id="backButton" class="btn btn-secondary mt-3" onclick="reloadPage()">Kembali</button></div>';
  } else {
    resultDiv.innerHTML = '<h1><span class="⚠"></span><br><br>DATA TIDAK DITEMUKAN</h1>';
    resultDiv.innerHTML += '<div class="text-center"><button type="button" id="backButton" class="btn btn-secondary mt-3" onclick="reloadPage()">Kembali</button></div>';
  }
}
            function printResult() {
        // Mencetak hasil pencarian
        window.print();
      }
      function reloadPage() {
        // Menampilkan kembali formulir pencarian
        document.getElementById('searchForm').style.display = 'block';
        // Sembunyikan hasil pencarian dan tombol Kembali
        document.getElementById('result').innerHTML = '';
        document.getElementById('id').value = '';
        document.getElementById('backButton').classList.add('hidden');
      }
    </script>
<!-- Tambahkan referensi Bootstrap JS dan jQuery (jika diperlukan) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>


7. Copy dan pastekan script di bawah ini ke Css.html


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

<style>
      /* Menambahkan gaya khusus untuk menempatkan elemen di tengah layar */
@charset "UTF-8"
@import url(http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono);
.⚠ {
    position: relative; /* So we can position the content as absolute */
    /* Using the borders to create a triangle  */
    border-left: 0.80em solid transparent;
    border-right: 0.80em solid transparent;
    border-bottom: 1.50em solid yellow;
    top: -1em;          /* Correction because of the CSS Triangle trick*/
}
    .⚠::before {
        content: "⚠";
        /* Position the character over the triangle */
        top: 0.45em;
        left: -0.45em;
        position: absolute;
        color: black;
        font-size: 2em;
        line-height: 1em;
    }
/* Additional style to tart up the page */
body {
  font-family: Arial;
  margin-bottom: 10%;
}
* {
  box-sizing: border-box;
}
h1, h3, h4 {
  color: white;
  text-align: center;
}
      /* Menambahkan gaya untuk menyembunyikan elemen */
      .hidden {
        display: none;
      }
      .loader {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
}
.loader-inner {
    bottom: 0;
    height: 60px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}
.loader-line-wrap {
    animation: 
		spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite
	;
    box-sizing: border-box;
    height: 50px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform-origin: 50% 100%;
    width: 100px;
}
.loader-line {
    border: 4px solid transparent;
    border-radius: 100%;
    box-sizing: border-box;
    height: 100px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}
.loader-line-wrap:nth-child(1) { animation-delay: -50ms; }
.loader-line-wrap:nth-child(2) { animation-delay: -100ms; }
.loader-line-wrap:nth-child(3) { animation-delay: -150ms; }
.loader-line-wrap:nth-child(4) { animation-delay: -200ms; }
.loader-line-wrap:nth-child(5) { animation-delay: -250ms; }
.loader-line-wrap:nth-child(1) .loader-line {
    border-color: hsl(0, 80%, 60%);
    height: 90px;
    width: 90px;
    top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
    border-color: hsl(60, 80%, 60%);
    height: 76px;
    width: 76px;
    top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
    border-color: hsl(120, 80%, 60%);
    height: 62px;
    width: 62px;
    top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
    border-color: hsl(180, 80%, 60%);
    height: 48px;
    width: 48px;
    top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
    border-color: hsl(240, 80%, 60%);
    height: 34px;
    width: 34px;
    top: 35px;
}
@keyframes spin {
    0%, 15% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}
 @media print {
    #printButton {
      display: none !important;
    }
    #backButton {
      display: none !important;
    }
  }
  img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}
form.example input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;
}
form.example button {
  float: left;
  width: 20%;
  padding: 10px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}
form.example button:hover {
  background: #0b7dda;
}
form.example::after {
  content: "";
  clear: both;
  display: table;
}
.custom-table {
            width: 100%;
            border-collapse: collapse;
            background-color: white;
            border-radius: 10px 10px 10px 10px;
        }
        .custom-table th, .custom-table td {
            border: 1px solid;
            padding: 8px;
        }
        .custom-table th {
            width: 50%;
        }
        .custom-table td {
            width: 50%;
        }
.LULUS { 
background-color: #00FF00; 
text-align: center;
} /* Warna hijau untuk "Lulus" */
.TIDAK-LULUS {
  background-color: #FF0000; 
  text-align: center;
      } /* Warna merah untuk "Tidak Lulus" */
</style>


8. 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 target="_blank" href="https://www.youtube.com/watch?v=s9jDQXGsnDU&list=PLDeNeiwBHjwYg7_gz2vDA1D6QfBiMgIj6&index=70"><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 target="_blank" href="https://s.id/javabitpro"><i class="fa-solid fa-globe"></i></a>
				</div>
			</li>			
		</ul>
	</div>


9. Klik ikon Save.


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


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


12. Klik atau salin URL yang sudah di Deploy.


SELESAI !!!







Tags:
Previous Post Next Post

Promo