#JP79 Scan QRCode Barcode Unlimited Web Apps Script (Responsive)

byJavabitpro

Membuat Scan QR Code atau Barcode Unlimited Menggunakan Web Apps Script (Responsive)

1. Copy Spreadsheet (Klik Disini)

2. Pada Spreadsheet di atas terdapat 1 sheet Data dengan beberapa kolom data yang akan terisi pada saat memasukkan data pada Scan QRCode.

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

4. Pada lembar kerja Apps Script terdapat beberapa file deafult yaitu :

Code.gs
Index.html
JavaScript.html
CSS.html
Form.html
QrReaderJS.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 by : www.javabitpro
 */

const DATASHEET = "Data";

function doGet() {
  let template = HtmlService.createTemplateFromFile('Index');
  let html = template.evaluate().setTitle('QR Code Scanner - by Javabitpro');

  html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  html.addMetaTag('viewport', 'width=device-width, initial-scale=1');
  html.setFaviconUrl('https://i.imgur.com/thmO7Xv.png');

  return html;
}

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

function processForm(formObject) {
  const ss = SpreadsheetApp.getActive();
  const dataSheet = ss.getSheetByName(DATASHEET);
  
  dataSheet.appendRow([
    new Date().toLocaleString(),
    formObject.nama_produk,
    formObject.kategori_produk,
    formObject.kuantitas,
    formObject.harga_produk,
    formObject.harga_jual,
    formObject.keuntungan,
    formObject.productCode
  ]);
}

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

*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

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

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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'); ?>
<!-- See CSS.html file --></head>
<body class="bg-primary bg-darken-xl text-light">
<nav class="navbar sticky-top navbar-dark bg-dark shadow p-3 mb-5">
<div class="container-fluid ">
	<div class="header">
		<img src="https://i.imgur.com/Ox9DC3r.gif" alt="Logo"/>
	</div>
	<div class="text-right">
		<h7 id="clock"></h7>
	</div>
</div>
</nav>
<div class="container">
	<div class="card border-danger mb-3" style="mx-auto">
		<div class="card-header bg-transparent border-primary">Scan Barcode</div>
		<div class="card-body text-success">
			<?!= include('Form'); ?>
			<!-- See Form.html file --></div>
		<div class="card-footer bg-transparent border-success">Footer</div>
	</div>
</div>
<?!= include('JavaScript'); ?>
<!-- JavaScript.html  -->
<?!= include('QrReaderJS'); ?>
<!--  QrReaderJS.html  --></body>
</html>

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

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

<script>
  window.addEventListener("load", functionInit, true); 
  function functionInit(){
    preventFormSubmit();
  };

  function preventFormSubmit() {
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
      event.preventDefault();
      });
    }
  } 

  function handleFormSubmit(formObject) {
    google.script.run.processForm(formObject);
    const resultContainer = document.getElementById('qr-reader-results');
    resultContainer.innerHTML = '';
    showPopup(`DATA BERHASIL TERSIMPAN`);
    document.getElementById("InventoryForm").reset();
  }
function hitungKeuntungan() {
            // Mendapatkan nilai dari field harga_beli dan harga_jual
            var hargaProduk = document.getElementById('harga_produk').value;
            var hargaJual = document.getElementById('harga_jual').value;
            // Menghitung keuntungan
            var keuntungan = hargaJual - hargaProduk;
            // Menetapkan nilai keuntungan ke field keuntungan
            document.getElementById('keuntungan').value = keuntungan;
        }
        // www.javabitpro.com
 function updateClock() {
      var now = new Date();
      var options = {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: 'numeric',
        minute: 'numeric',
        second: 'numeric',
        hour12: false, // Menggunakan format 24 jam
        timeZone: 'Asia/Jakarta'
      };
      var clockString = now.toLocaleTimeString('id-ID', options);
      // Ganti tanda titik dengan tanda titik dua
      clockString = clockString.replace(/\./g, ':');
      document.getElementById('clock').innerHTML = clockString;
    }
    // Update the clock every second
    setInterval(updateClock, 1000);
    // Initial call to display the clock immediately
    updateClock();
    
</script>

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

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

<style>

#qr-reader {
	/* Default width for all devices */
	width:500px;
	box-sizing:border-box;
	border-radius:15px;
	margin:auto;
	/* Include padding and border in width calculation */
}
@media only screen and (max-width:600px) {
	#qr-reader {
		width:100%;
	}
}
#popup {
	display:none;
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	padding:20px;
	background-color:#fff;
	border:1px solid #ccc;
	border-radius:15px;
	box-shadow:rgba(0,0,0,0.25) 0px 14px 28px,rgba(0,0,0,0.22) 0px 10px 10px;
	z-index: 9999;
}
.header img {
  float: left;
  width: 40px;
  height: 40px;
  background: #555;
}

.header h5 {
  position: fixed;
  top: 25px;
  left: 80px;
}

.text-right {
  text-align: right;
}
</style>

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

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

<div id="qr-reader" class="mt-4" style="position: relative; border: none;"></div>
<div id="qr-reader-results"></div>
<br>
<form id="InventoryForm" onsubmit="handleFormSubmit(this)">
	<div class="mb-3 input-group">
		<span class="input-group-text bg-primary text-white"><i class="bi bi-qr-code-scan"></i></span>
		<input type="text" class="form-control" id="productCode" name="productCode" placeholder="Scan QR/Bar Code" readonly>
	</div>
	<div class="mb-3 input-group">
		<span class="input-group-text bg-primary text-white"><i class="bi bi-box-fill"></i></span>
		<input type="text" class="form-control" id="NamaProduk" name="nama_produk" placeholder="Masukkan Nama Produk"></div>
	<div class="mb-3 input-group">
		<!-- <label for="productCategory" class="form-label">Product Category:</label> -->
		<span class="input-group-text bg-primary text-white"><i class="bi bi-tags-fill"></i></span>
		<select class="form-select" id="KategoriProduk" name="kategori_produk">
			<option disabled selected>Pilih Kategori...</option>
			<option value="Elektronik">Elektronik</option>
			<option value="Makanan">Makanan</option>
			<option value="ATK">ATK</option>
			<option value="Pecah Belah">Pecah Belah</option>
		</select>
	</div>
	<div class="mb-3 input-group">
		<span class="input-group-text bg-primary text-white"><i class="bi bi-123"></i></span>
		<input type="number" class="form-control" id="kuantitas" name="kuantitas" placeholder="Jumlah Produk"></div>
	<div class="mb-3 input-group">
		<span class="input-group-text bg-primary text-white"><i class="fa-solid fa-rupiah-sign"></i></span>
		<input type="number" step="0.01" class="form-control" id="harga_produk" oninput="hitungKeuntungan()" name="harga_produk" placeholder="Harga Produk"></div>
	<div class="mb-3 input-group">
		<span class="input-group-text bg-primary text-white"><i class="fa-solid fa-money-bill-trend-up"></i></span>
		<input type="number" step="0.01" class="form-control" id="harga_jual" oninput="hitungKeuntungan()" name="harga_jual" placeholder="Markup Harga Jual"></div>
	<div class="mb-3 input-group">
		<span class="input-group-text bg-primary text-white"><i class="fa-solid fa-coins"></i></span>
		<input type="number" step="0.01" class="form-control" id="keuntungan" readonly name="keuntungan" placeholder="Margin Keuntungan"></div>
	<button type="submit" class="btn btn-primary mb-3 w-100">Submit</button>
</form>
<div id="popup">
	<!-- Konten pop-up -->
	<p id="popupContent"></p>
</div>

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

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

<script src="https://raw.githack.com/javabitpro/scanner/main/javabitpro-jp79-qrcode.min.js" type="text/javascript"></script>
<script>
  function docReady(fn) {
    if (document.readyState === "complete" || document.readyState === "interactive") {
        setTimeout(fn, 1);
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
  } 
  docReady(function() {
      var resultContainer = document.getElementById('qr-reader-results');
      var lastResult, countResults = 0;
      var html5QrcodeScanner = new Html5QrcodeScanner(
          "qr-reader", { fps: 10, qrbox: 250 });
      function onScanSuccess(decodedText, decodedResult) {
          if (decodedText !== lastResult) {
              ++countResults;
              lastResult = decodedText;
              console.log(`Scan result = ${decodedText}`, decodedResult);
              resultContainer.innerHTML += `<div class="p-3 mb-2 bg-success text-white">[${countResults}] - ${decodedText}</div>`;
              const productCode = document.getElementById("productCode");
              productCode.value = decodedText;
              showPopup(`Scanned product code: ${decodedText}`);
          }
      }
      function onScanError(qrCodeError) {
      }
      html5QrcodeScanner.render(onScanSuccess, onScanError);
  });
  function showPopup(content) {
            const popup = document.getElementById("popup");
            const popupContent = document.getElementById("popupContent");
            // Set content and display pop-up
            popupContent.innerText = content;
            popup.style.display = "block";
            // Hide pop-up after 3 seconds (adjust as needed)
            setTimeout(() => {
                popup.style.display = "none";
            }, 3000);
        }
</script>

11. 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>

12. Klik ikon Save.

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

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

15. Klik atau salin URL yang sudah di Deploy.

SELESAI !!!

Tags: APP SCRIPT GOOGLE SCRIPT HTML JAVASCRIPT PROJECT Spreadsheet