Cara Membagikan Sheet Tertentu Saja Dari Spreadsheet (Bisa Mengedit Realtime)

1. Buatlah Spreadsheet atau gunakan spreadsheet yang sudah ada.

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

3. Buatlah file seperti di bawah ini dengan klik tanda "+".
Nama File harus sama persis dengan contoh di bawah ini.

4. Copy dan pastekan script di bawaj 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 Javabitpro.com
 // Youtube : Javabitpro
 
 function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate()
      .setTitle('Javabitpro')
      .addMetaTag('viewport','width=device-width , initial-scale=1')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}
function getSheetData() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data'); // Ubah sesuai dengan nama sheet
  var range = sheet.getRange('A1:G100'); // Ubah sesuai dengan rentang sel yang diinginkan
  var data = range.getValues();
  return JSON.stringify(data);
}

function updateSheetData(newData) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data'); // Ubah sesuai dengan nama sheet
  var range = sheet.getRange('A1:G100'); // Ubah sesuai dengan rentang sel yang diinginkan
  var parsedData = JSON.parse(newData);
  range.setValues(parsedData);
  
}

Silahkan sesuaikan nama Sheet dan rentang yang akan di share.

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

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

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <?!= include('Stylesheet'); ?>
  <!-- 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')?>
</head>
<body>
  <h1>Spreadsheet Editor</h1>
  <table id="dataTable"></table>

  <script>
    var originalData; // Untuk menyimpan data asli

    // Ambil data lembar kerja saat halaman dimuat
    google.script.run.withSuccessHandler(displayData).getSheetData();

    function displayData(data) {
      var table = document.getElementById('dataTable');
      originalData = JSON.parse(data);

      // Tampilkan baris header
      var headerRow = table.insertRow(0);
      for (var h = 0; h < originalData[0].length; h++) {
        var headerCell = headerRow.insertCell(h);
        headerCell.innerHTML = '<b>' + originalData[0][h] + '</b>';
      }

      // Tampilkan data di dalam tabel HTML (mulai dari baris kedua)
      for (var i = 1; i < originalData.length; i++) {
        var row = table.insertRow(i);
        for (var j = 0; j < originalData[i].length; j++) {
          var cell = row.insertCell(j);
          cell.innerHTML = '<input type="text" style="border: 1px solid white" value="' + originalData[i][j] + '" onchange="updateCell(this, ' + i + ', ' + j + ')">';
        }
      }
    }

    // Fungsi untuk mengupdate data di lembar kerja dan menyimpan perubahan
    function updateCell(element, row, col) {
      originalData[row][col] = element.value;
      saveChanges();
    }

    // Fungsi untuk menyimpan perubahan ke spreadsheet
    function saveChanges() {
      var newData = JSON.stringify(originalData);
      google.script.run.updateSheetData(newData);
      
    }
    // javabitpro.com
  </script>
  
</body>
</html>

6. Copy dan pastekan script di bawah ini ke Stylesheet.html

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

<style>
  body {
    font-family: Arial, sans-serif;
    margin: 20px;
  }

  h1 {
    color: #1a0dab;
    text-align: center;
  }

  table {
    border-collapse: collapse;
    width: 100%;
    margin-right: 20px;
  margin-left: 10px;
  }

  th, td {
    border: 1px solid #384647;
    padding: 8px;
    text-align: left;
  }

  input {
    width: 100%;
  }
</style>

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