Membuat Website Flip Ebook Online dengan Apps Script

1. Copy Spreadsheet (Klik Disini)

2. Pada Spreadsheet yang telah copy di atas terdapat 1 sheet Page dengan 2 kolom :

Kolom A : Latar Belakang
Kolom B : URL gambar (URL gambar dari Google Drive)

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

4. Pada lembar kerja Apps Script terdapat 3 file default yaitu :

Code.gs
Album.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('Album').evaluate()
      .setTitle('Javabitpro')
      .addMetaTag('viewport','width=device-width , initial-scale=1')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
        .setFaviconUrl('https://i.imgur.com/thmO7Xv.png'); 
        
}
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

let linkImage = SpreadsheetApp.getActiveSpreadsheet()
.getSheetByName('Page')
.getDataRange()
.getDisplayValues()
.map(r => 'https://lh3.googleusercontent.com/d/'+r[1].split('/')[5])

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

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

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/blasten/turn.js/turn.js"></script>
  <!-- Tambahkan Bootstrap CSS -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="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')?>
  <style type="text/css">
    body{
      overflow: hidden;
      background-color: #c1bbbb; 
      padding-bottom: 100px; 
    }
    #album{
      width:900px;
      height: 540px;
      margin:3% auto; 
      transition: transform 0.3s ease; 
    }
    #footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #ffffff;
      box-shadow: 0px -11px 11px 0px rgba(0,0,0,0.2);
      padding: 10px;
      text-align: center;
    }
    
  </style>
</head>
<body>

<div id="album">
  <? for (var i = 1; i < linkImage.length; i++) { ?>
  <div style="background: url('<?= linkImage[i] ?>'); background-size:cover;"></div>
 <? } ?>
</div>

<div id="footer">
  <button id="zoom-out" class="btn btn-primary">-</button>
  <button id="reset-zoom" class="btn btn-primary">Reset</button>
  <button id="zoom-in" class="btn btn-primary">+</button>
  <button id="prev-page" class="btn btn-primary">Previous</button>
  <button id="next-page" class="btn btn-primary">Next</button>
</div>

<script>
  $('#album').turn({gradients: true, acceleration: true});
  // Menangani peristiwa tombol arah
  $(document).keydown(function(e) {
      // Menggerakkan halaman sesuai dengan tombol arah yang ditekan
      if (e.keyCode == 37) {
          $('#album').turn('previous');
      }
      else if (e.keyCode == 39) {
          $('#album').turn('next');
      }
  });

  // Menangani peristiwa tombol zoom
  $('#zoom-in').click(function() {
      zoomIn();
  });

  $('#zoom-out').click(function() {
      zoomOut();
  });

  // Menangani peristiwa klik reset zoom
  $('#reset-zoom').click(function() {
      resetZoom();
  });

  // Menangani peristiwa klik halaman sebelumnya
  $('#prev-page').click(function() {
      $('#album').turn('previous');
  });

  // Menangani peristiwa klik halaman selanjutnya
  $('#next-page').click(function() {
      $('#album').turn('next');
  });

  // Menangani peristiwa scroll mouse
  $('#album').on('wheel', function(e) {
      var mouseX = e.originalEvent.clientX;
      var mouseY = e.originalEvent.clientY;
      var offset = $('#album').offset();
      var albumX = mouseX - offset.left;
      var albumY = mouseY - offset.top;

      if (e.originalEvent.deltaY > 0) {
          zoomOut(albumX, albumY);
      } else {
          zoomIn(albumX, albumY);
      }
      e.preventDefault();
  });

  var scale = 1; // Skala awal

  function zoomIn(albumX, albumY) {
      scale += 0.1;
      $('#album').css('transform-origin', albumX + 'px ' + albumY + 'px');
      $('#album').css('transform', 'scale(' + scale + ')');
  }

  function zoomOut(albumX, albumY) {
      scale -= 0.1;
      $('#album').css('transform-origin', albumX + 'px ' + albumY + 'px');
      $('#album').css('transform', 'scale(' + scale + ')');
  }

  // Menangani peristiwa klik album
  $('#album').click(function() {
      resetZoom();
  });

  function resetZoom() {
      scale = 1;
      $('#album').css('transform-origin', 'center center');
      $('#album').css('transform', 'scale(' + scale + ')');
  }
</script>
</body>
</html>

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

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

<link href="https://cdn.jsdelivr.net/gh/javabitpro/css@main/javabitprovisit.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>