#JP14 Membuat Search Data Semua Kategori Dengan Appscript

Menampilkan Data Membuat Search Data Semua Kategori Dengan Appscript

*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

1.Siapkan data spreadsheet

(atau bisa copy spreadsheet klik disini)

2. Klik "Make a copy".

3. Di dalam Spreadsheet ada 1 sheet bernama "Barang"

4. Buka lembar kerja AppScript dengan cara klik menu "Ekstensi" - pilih "Apps Script"

5. Klik tanda "+" dan buat lah file Code.gs, Index.html, dan JavaScript.html

6. Copy kan script dibawah ini ke Code.gs

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

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

//GET DATA FROM GOOGLE SHEET AND RETURN AS AN ARRAY
function getData() {
  var spreadSheetId = "1OEwwArttqojwb7dvl3dHdxSm_nY-qDwTaG78w-EDpNs"; //CHANGE
  var dataRange = "Barang!A2:E"; //CHANGE

  var range = Sheets.Spreadsheets.Values.get(spreadSheetId, dataRange);
  var values = range.values;

  return values;
}


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

7. Edit Spreadsheet id dengan spreadsheet id kalian

8. Edit dan sesuaikan nama sheet dan rangenya sesuai data di spreadsheet

9. Copy kan script dibawah ini ke Index.html

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

<!DOCTYPE html>
<html>

<head>
	<base target="_top">
	<!--INCLUDE REQUIRED EXTERNAL JAVASCRIPT AND CSS LIBRARIES-->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/select/1.4.0/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/datetime/1.1.2/js/dataTables.dateTime.min.js"></script>
              
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.4.0/css/select.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.2/css/dataTables.dateTime.min.css">

	<?!= include('JavaScript'); ?><!--INCLUDE JavaScript.html FILE-->
</head>

<body>
	<div class="container">
		<br>
		<div class="row">
		<table id="example" class="table table-striped" cellspacing="0" width="100%">
				<!-- TABLE DATA IS ADDED BY THE showData() JAVASCRIPT FUNCTION ABOVE -->
			</table>
		</div>
	</div>
</body>
</html>
<!-- Script by www.javabitpro.com ------------------------------------------------ -->
<style>.footer,.generic-footer{margin-bottom:98px}@media (min-width:374px){.footer,.generic-footer{margin-bottom:78px}}@media (min-width:546px){.footer,.generic-footer{margin-bottom:56px}}@media (min-width:1055px){.footer,.generic-footer{margin-bottom:0}}.disclaimer{position:fixed;z-index:9999999;bottom:0;right:0;border-top:2px solid #ff5c62;text-align:center;font-size:14px;font-weight:400;background-color:#fff;padding:5px 10px 5px 10px}.disclaimer a:hover{text-decoration:underline}@media (min-width:1052px){.disclaimer{text-align:right;border-left:2px solid red;border-top-left-radius:10px}}@media (min-width:1920px){.disclaimer{width:60%}}</style><div class="disclaimer">@Copyright <a title="https://www.javabitpro.com/" target="_blank" href="https://www.javabitpro.com/" style="color: black;"><b>www.javabitpro.com</b></a></div>

10. Copy kan script dibawah ini ke JavaScript.html

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

<script>
	/*
  *THIS FUNCTION CALL THE getData() FUNCTION IN THE Code.gs FILE, 
  *AND PASS RETURNED DATA TO showData() FUNCTION
  */
  google.script.run.withSuccessHandler(showData).getData();

  //THIS FUNCTION GENERATE THE DATA TABLE FROM THE DATA ARRAY
  function showData(dataArray){
    $(document).ready(function(){
      $('#example').DataTable({
        data: dataArray,
        //CHANGE THE TABLE HEADINGS BELOW TO MATCH WITH YOUR SELECTED DATA RANGE
        columns: [
          {"title":"No"},
          {"title":"Id Barang"},
          {"title":"Nama Barang"},
          {"title":"Satuan"},
          {"title":"Harga"},
        ]
      });
    });
  }
</script>