AkoMLib/index.html

## index.html
<!-- Create By AkoMSentani -->
<!DOCTYPE html>
<html>
  <head>
    <title>Form Unggah & TTE</title>
     <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        text-align: center;
      }

      button, input[type="submit"] {
        margin-top: 10px;
        padding: 10px 20px;
        font-size: 16px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
      }

      button:hover, input[type="submit"]:hover {
        background-color: #45a049;
      }

      button:active, input[type="submit"]:active {
        transform: scale(0.95);
      }

      form {
        margin: 20px auto;
        max-width: 400px;
        background: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        text-align: left;
      }

      label {
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
      }

      input, canvas {
        width: 100%;
        margin-bottom: 15px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }

      .tombol-container {
        text-align: center;
      }

      .tombol-clear {
        display: block;
        margin: 10px auto 0;
        background-color: #f44336;
      }

      .tombol-clear:hover {
        background-color: #e53935;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Form Unggah & TTE</h1>
      <form id="form" onsubmit="kirimForm(this); return false;">
        <label>Nama:</label>
        <input type="text" name="nama" required><br>

        <label>Nama Lengkap:</label>
        <input type="text" name="namaLengkap" required><br>

        <label>Unggah Foto:</label>
        <input type="file" id="foto" name="foto" accept="image/*" required><br>

        <label>Tanda Tangan:</label>
        <canvas id="tandaTangan" width="400" height="200" style="border:1px solid #000;"></canvas>
        <input type="hidden" id="tandaTangan-hidden" name="tandaTangan">
        <button type="button" class="tombol-clear" onclick="clearCanvas()">Clear Tanda Tangan</button>

        <input type="submit" value="Kirim">
      </form>

      <div class="footer">
        <p>© 2024 AkoMSentani</p>
      </div>
    </div>

    <script>
      var canvas = document.getElementById("tandaTangan");
      var ctx = canvas.getContext("2d");
      var isDrawing = false;

      canvas.addEventListener("mousedown", function() {
        isDrawing = true;
        ctx.beginPath();
      });

      canvas.addEventListener("mouseup", function() {
        isDrawing = false;
      });

      canvas.addEventListener("mousemove", function(e) {
        if (isDrawing) {
          ctx.lineTo(e.offsetX, e.offsetY);
          ctx.stroke();
        }
      });

      function kirimForm(form) {
        var foto = document.getElementById("foto").files[0];
        var reader = new FileReader();
        reader.onload = function(event) {
          var tandaTangan = canvas.toDataURL();
          var formData = {
            nama: form.nama.value,
            namaLengkap: form.namaLengkap.value,
            foto: event.target.result,
            tandaTangan: tandaTangan,
          };
         google.script.run
            .withSuccessHandler(function () {
              alert("Data berhasil dikirim!");
              form.reset();
              clearCanvas();
            })
            .prosesForm(formData);
        };
        reader.readAsDataURL(foto);
      }

       function clearCanvas() {
        // Hapus isi canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }

    </script>
  </body>
</html>

## kode.gs
/// Create By AkoMSentani -->
function doGet() {
  var html = HtmlService.createHtmlOutputFromFile("form");
  return html;
}

function onOpen() {
  var form = FormApp.getActiveForm();
}

function prosesForm(e) {
  try {
    if (!e.nama || !e.namaLengkap || !e.foto || !e.tandaTangan) {
      throw new Error("Data form tidak lengkap!");
    }

    var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Form");
    var folder = DriveApp.getFolderById("ID_FOLDER");

    // Ambil data
    var nama = e.nama;
    var namaLengkap = e.namaLengkap;
    var foto = e.foto;
    var tandaTangan = e.tandaTangan;

    // Konversi Base64 ke Blob
    var fotoBlob = Utilities.newBlob(Utilities.base64Decode(foto.split(",")[1]), "image/png");
    var tandaTanganBlob = Utilities.newBlob(Utilities.base64Decode(tandaTangan.split(",")[1]), "image/png");

    // Simpan File ke Google Drive dengan Nama Unik
    var fileFoto = folder.createFile(fotoBlob.setName(nama + "_Foto.png"));
    var fileTandaTangan = folder.createFile(tandaTanganBlob.setName(nama + "_TTE.png"));

    // Berikan izin akses publik
    fileFoto.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW);
    fileTandaTangan.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW);

    // Ambil URL unduhan langsung
    var fotoUrl = "https://drive.google.com/uc?id=" + fileFoto.getId();
    var tandaTanganUrl = "https://drive.google.com/uc?id=" + fileTandaTangan.getId();

    // Tambahkan Data ke Spreadsheet tanpa ukuran yang ditentukan
    sheet.appendRow([
      nama,
      namaLengkap,
      "=IMAGE(\"" + fotoUrl + "\")", // Set Ukuran Gambar
      "=IMAGE(\"" + tandaTanganUrl + "\")", // Set Ukuran Gambar
    ]);
  } catch (error) {
    Logger.log("Error: " + error.toString());
    throw error;
  }
}
	<!-- Create By AkoMSentani -->
	<!DOCTYPE html>
	<html>
	<head>
	<title>Form Unggah & TTE</title>
	<style>
	body {
	margin: 0;
	font-family: Arial, sans-serif;
	background-color: #f4f4f4;
	text-align: center;
	}

	button, input[type="submit"] {
	margin-top: 10px;
	padding: 10px 20px;
	font-size: 16px;
	background-color: #4CAF50;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s;
	}

	button:hover, input[type="submit"]:hover {
	background-color: #45a049;
	}

	button:active, input[type="submit"]:active {
	transform: scale(0.95);
	}

	form {
	margin: 20px auto;
	max-width: 400px;
	background: white;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	text-align: left;
	}

	label {
	font-weight: bold;
	display: block;
	margin-bottom: 5px;
	}

	input, canvas {
	width: 100%;
	margin-bottom: 15px;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 5px;
	}

	.tombol-container {
	text-align: center;
	}

	.tombol-clear {
	display: block;
	margin: 10px auto 0;
	background-color: #f44336;
	}

	.tombol-clear:hover {
	background-color: #e53935;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>Form Unggah & TTE</h1>
	<form id="form" onsubmit="kirimForm(this); return false;">
	<label>Nama:</label>
	<input type="text" name="nama" required><br>

	<label>Nama Lengkap:</label>
	<input type="text" name="namaLengkap" required><br>

	<label>Unggah Foto:</label>
	<input type="file" id="foto" name="foto" accept="image/*" required><br>

	<label>Tanda Tangan:</label>
	<canvas id="tandaTangan" width="400" height="200" style="border:1px solid #000;"></canvas>
	<input type="hidden" id="tandaTangan-hidden" name="tandaTangan">
	<button type="button" class="tombol-clear" onclick="clearCanvas()">Clear Tanda Tangan</button>

	<input type="submit" value="Kirim">
	</form>

	<div class="footer">
	<p>© 2024 AkoMSentani</p>
	</div>
	</div>

	<script>
	var canvas = document.getElementById("tandaTangan");
	var ctx = canvas.getContext("2d");
	var isDrawing = false;

	canvas.addEventListener("mousedown", function() {
	isDrawing = true;
	ctx.beginPath();
	});

	canvas.addEventListener("mouseup", function() {
	isDrawing = false;
	});

	canvas.addEventListener("mousemove", function(e) {
	if (isDrawing) {
	ctx.lineTo(e.offsetX, e.offsetY);
	ctx.stroke();
	}
	});

	function kirimForm(form) {
	var foto = document.getElementById("foto").files[0];
	var reader = new FileReader();
	reader.onload = function(event) {
	var tandaTangan = canvas.toDataURL();
	var formData = {
	nama: form.nama.value,
	namaLengkap: form.namaLengkap.value,
	foto: event.target.result,
	tandaTangan: tandaTangan,
	};
	google.script.run
	.withSuccessHandler(function () {
	alert("Data berhasil dikirim!");
	form.reset();
	clearCanvas();
	})
	.prosesForm(formData);
	};
	reader.readAsDataURL(foto);
	}

	function clearCanvas() {
	// Hapus isi canvas
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	}

	</script>
	</body>
	</html>
	/// Create By AkoMSentani -->
	function doGet() {
	var html = HtmlService.createHtmlOutputFromFile("form");
	return html;
	}

	function onOpen() {
	var form = FormApp.getActiveForm();
	}

	function prosesForm(e) {
	try {
	if (!e.nama \|\| !e.namaLengkap \|\| !e.foto \|\| !e.tandaTangan) {
	throw new Error("Data form tidak lengkap!");
	}

	var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Form");
	var folder = DriveApp.getFolderById("ID_FOLDER");

	// Ambil data
	var nama = e.nama;
	var namaLengkap = e.namaLengkap;
	var foto = e.foto;
	var tandaTangan = e.tandaTangan;

	// Konversi Base64 ke Blob
	var fotoBlob = Utilities.newBlob(Utilities.base64Decode(foto.split(",")[1]), "image/png");
	var tandaTanganBlob = Utilities.newBlob(Utilities.base64Decode(tandaTangan.split(",")[1]), "image/png");

	// Simpan File ke Google Drive dengan Nama Unik
	var fileFoto = folder.createFile(fotoBlob.setName(nama + "_Foto.png"));
	var fileTandaTangan = folder.createFile(tandaTanganBlob.setName(nama + "_TTE.png"));

	// Berikan izin akses publik
	fileFoto.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW);
	fileTandaTangan.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW);

	// Ambil URL unduhan langsung
	var fotoUrl = "https://drive.google.com/uc?id=" + fileFoto.getId();
	var tandaTanganUrl = "https://drive.google.com/uc?id=" + fileTandaTangan.getId();

	// Tambahkan Data ke Spreadsheet tanpa ukuran yang ditentukan
	sheet.appendRow([
	nama,
	namaLengkap,
	"=IMAGE(\"" + fotoUrl + "\")", // Set Ukuran Gambar
	"=IMAGE(\"" + tandaTanganUrl + "\")", // Set Ukuran Gambar
	]);
	} catch (error) {
	Logger.log("Error: " + error.toString());
	throw error;
	}
	}