#JP66 Membuat dan Print Invoice Setelah Input Data

byJavabitpro

Membuat dan Print Invoice Setelah Input Data Pada Form



1. Copy Spreadsheets (Klik Disini)

2. Pada Spreadsheets terdapat sheet Data pembayaran yang berisi kolom-kolom yang akan terisi dari form web apps script.


3. Buatlah lembar kerja Apps Script dengan klik Ektensi/Extensions lalu klik Apps Script.


4. Terdapat file default yaitu :
  1. Code.gs
  2. Index.html
  3. 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) 

// www.javabitpro.com

function doGet(e) {
  var template = HtmlService.createTemplateFromFile('Index')
  return  template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .addMetaTag('viewport', 'width=device-width , initial-scale=1')
}
function include(filename) {
   return HtmlService.createHtmlOutputFromFile(filename)
  .getContent();
}
function processForm(formData) {
  var nama = formData.nama;
  var alamat = formData.alamat;
  var rt = formData.rt;
  var rw = formData.rw;
  var jumlahPembayaran = formData.jumlahPembayaran;
  var tanggal = new Date();
  
  var spreadsheet = SpreadsheetApp.openById('ID Spreadhseets'); // Ganti dengan ID spreadsheet Anda
  
  var sheet = spreadsheet.getSheetByName('Nama sheet'); // Ganti dengan nama sheet Anda
  
  var newRow = [tanggal, nama,alamat, rt, rw, jumlahPembayaran];
  sheet.appendRow(newRow);
  
  var invoice = "Bukti Sumbangan\n <br>";
  invoice += "-----------------------\n<br>";
  invoice += "Nama: " + nama + "\n<br>";
  invoice += "Alamat: " + alamat + "\n<br>";
  invoice += "RT: " + rt + "\n<br>";
  invoice += "RW: " + rw + "\n<br>";
  invoice += "Telah menyumbang uang\n<br>";
  invoice += "Sebesar: Rp " + jumlahPembayaran + "\n<br>";
  invoice += "Tanggal: " + Utilities.formatDate(tanggal, Session.getScriptTimeZone(), "dd/MM/yyyy HH:mm:ss") + "\n<br>";
  invoice += "-----------------------\n<br>";
  invoice += "Terima Kasih\n<br>";
  invoice += "-----------------------\n<br>";
  invoice += "@Panitia\n<br>";
  
  return invoice;
}
function getURL(){
return ScriptApp.getService().getUrl()
}


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


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

<!DOCTYPE html>
<!-- Created By javabitpro.com -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Form Cetak Invoice | by javabitpro</title>
      <!-- Bootstrap CSS -->



   </head>
   <!-- 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>
    @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  background: #f2f2f2;
  /* background: linear-gradient(-135deg, #c850c0, #4158d0); */
}
::selection{
  background: #4158d0;
  color: #fff;
}
.wrapper{
  width: 380px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
}
.wrapper .title{
  font-size: 35px;
  font-weight: 600;
  text-align: center;
  line-height: 100px;
  color: #fff;
  user-select: none;
  border-radius: 15px 15px 0 0;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
}
.wrapper form{
  padding: 10px 30px 50px 30px;
}
.wrapper form .field{
  height: 50px;
  width: 100%;
  margin-top: 20px;
  position: relative;
}
.wrapper form .field input{
  height: 100%;
  width: 100%;
  outline: none;
  font-size: 17px;
  padding-left: 20px;
  border: 1px solid lightgrey;
  border-radius: 25px;
  transition: all 0.3s ease;
}
.wrapper form .field input:focus,
form .field input:valid{
  border-color: #4158d0;
}
.wrapper form .field label{
  position: absolute;
  top: 50%;
  left: 20px;
  color: #999999;
  font-weight: 400;
  font-size: 17px;
  pointer-events: none;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}
form .field input:focus ~ label,
form .field input:valid ~ label{
  top: 0%;
  font-size: 16px;
  color: #4158d0;
  background: #fff;
  transform: translateY(-50%);
}
form .content{
  display: flex;
  width: 100%;
  height: 50px;
  font-size: 16px;
  align-items: center;
  justify-content: space-around;
}
form .content .checkbox{
  display: flex;
  align-items: center;
  justify-content: center;
}
form .content input{
  width: 15px;
  height: 15px;
  background: red;
}
form .content label{
  color: #262626;
  user-select: none;
  padding-left: 5px;
}
form .content .pass-link{
  color: "";
}
form .field input[type="button"]{
  color: #fff;
  border: none;
  padding-left: 0;
  margin-top: -10px;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  transition: all 0.3s ease;
}
form .field input[type="button"]:active{
  transform: scale(0.95);
}
form .signup-link{
  color: #262626;
  margin-top: 20px;
  text-align: center;
}
form .pass-link a,
form .signup-link a{
  color: #4158d0;
  text-decoration: none;
}
form .pass-link a:hover,
form .signup-link a:hover{
  text-decoration: underline;
}
/* CSS untuk popup */
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
}

.popup-content {
  background-color: #fff;
  width: 50%;
  margin: 20% auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  position: relative;
}

.close {
  color: #000;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}
/* Aturan CSS khusus untuk cetakan */
  @media print {
    body {
      font-size: 5pt; /* Mengatur ukuran font untuk cetakan */
      margin: 0; /* Menghapus margin default dari browser */
      }
    .invoice {
      padding: 1px; /* Memberi padding agar invoice terlihat rapi */
      page-break-after: always; /* Pindah ke halaman baru setelah cetakan invoice */
    }
    /* Aturan tambahan untuk elemen lainnya */
  }
</style>
   <body>
      <div class="wrapper">
         <div class="title">
            Form Cetak Invoice
         </div>
         <form>
            <div class="field">
               <input type="text" id="nama" required>
               <label>Nama</label>
            </div>
            <div class="field">
               <input type="text" id="alamat" required>
               <label>Alamat</label>
            </div>
             <div class="field">
               <input type="text" id="rt" required>
               <label>RT</label>
            </div>
             <div class="field">
               <input type="text" id="rw" required>
               <label>RW</label>
            </div>
            <div class="field">
               <input type="text" id="jumlahPembayaran" required>
               <label>Jumlah Sumbangan</label>
            </div>
            
            <div class="field">
               <input type="button" value="Kirim" onclick="submitForm()">
            </div>
            <div id="output"></div>
         </form>
<script>
  function submitForm() {
    var nama = document.getElementById('nama').value;
    var alamat = document.getElementById('alamat').value;
    var rt = document.getElementById('rt').value;
    var rw = document.getElementById('rw').value;
    var jumlahPembayaran = document.getElementById('jumlahPembayaran').value;
        
    google.script.run
    .withSuccessHandler(function(invoice) {
      displayInvoice(invoice);
      openPopup(); // Menampilkan popup
    })
    .processForm({nama: nama, alamat: alamat, rt: rt, rw: rw, jumlahPembayaran: jumlahPembayaran});
      
  }
  function openPopup() {
  var popup = document.getElementById('popup');
  popup.style.display = 'block';
  nama.value="";
      alamat.value="";
      rt.value="";
      rw.value="";
      jumlahPembayaran.value="";
 
}

  function closePopup() {
  var popup = document.getElementById('popup');
  popup.style.display = 'none';
  }
   setTimeout(function() {
  document.getElementById('success-message').style.display = 'none'; // Menghilangkan pesan sukses setelah beberapa detik
}, 5000); // Hilangkan pesan sukses setelah 5 detik (5000 milidetik)

    function displayInvoice(invoice) {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = '<div class="invoice">' + invoice + '</div>';
  closePopup(); // Menutup popup saat invoice ditampilkan
  // Menambahkan tombol cetak
  outputDiv.innerHTML += '<button onclick="printInvoice()" class="field">Cetak Invoice</button>';

}
// www.javabitpro.com
function printInvoice() {
  var printWindow = window.open('', '', 'width=600,height=600');
  var invoiceContent = document.querySelector('.invoice').innerHTML;

  printWindow.document.open();
  printWindow.document.write('<html><head><title>Cetak Invoice</title></head><body>');

  // Mengatur ukuran kertas secara otomatis ke 58mm x 80mm dalam media query cetakan
  printWindow.document.write('<style type="text/css">');
  printWindow.document.write('@page { size: 58mm 80mm; }'); // Mengatur ukuran kertas secara otomatis
  printWindow.document.write('@media print {');
  printWindow.document.write('body { font-size: 8pt; }'); // Misalnya, mengatur ukuran font untuk seluruh dokumen cetakan
  printWindow.document.write('.invoice { font-size: 5pt; text-align: left; }'); // Mengatur ukuran font dan teks rata kiri untuk elemen dengan kelas "invoice"
  printWindow.document.write('p { font-size: 5pt; text-align: left; }'); // Mengatur ukuran font dan teks rata kiri untuk elemen <p>
  printWindow.document.write('}');
  printWindow.document.write('</style>');

  printWindow.document.write(invoiceContent);
  printWindow.document.write('</body></html>');
  printWindow.document.close();

  printWindow.print();
  printWindow.close();
}
</script>
<div id="success-message" style="display: none;">
  <p>Pembayaran berhasil disimpan!</p>
</div>
<div id="popup" class="popup">
  <div class="popup-content">
    <span class="close" onclick="closePopup()">&times;</span>
    <p>Pembayaran berhasil disimpan!</p>
  </div>
</div>
  </body>
      </div>
   </body>
</html>


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


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

 <style>


 .fab-container2 {
	position: fixed;
	bottom: 80px;
	right: 1px;
	z-index: 999;
	cursor: pointer;
}

.fab-label2 {
    padding: 2px 5px;
    align-self: center;
    user-select: none;
    white-space: nowrap;
    border-radius: 3px;
    font-size: 16px;
    background: #666666;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    /* margin-right: 10px; */
}

 .fab-container {
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 999;
	cursor: pointer;
}

.fab-icon-holder {
	width: 50px;
	height: 50px;
	border-radius: 100%;
	background: #6dd4fc;

	box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.fab-icon-holder:hover{
	opacity: 0.8;
}

.fab-icon-holder i {
	display: flex;
	align-items: center;
	justify-content: center;

	height: 100%;
	font-size: 25px;
	color: #000000;
}

.fab {
	width: 56px;
	height: 56px;
	background: #6dd4fc;
}

.fab-options {
	list-style-type: none;
	margin: 0;

	position: absolute;
	bottom: 70px;
	right: 0;

	opacity: 0;

	transition: all 0.3s ease;
	transform: scale(0);
	transform-origin: 85% bottom;
}

.fab:hover + .fab-options, .fab-options:hover {
	opacity: 1;
	transform: scale(1);
}

.fab-options li {
	display: flex;
	justify-content: flex-end;
	padding: 5px;
}

.fab-label {
	padding: 2px 5px;
	align-self: center;
	user-select: none;
	white-space: nowrap;
	border-radius: 3px;
	font-size: 16px;
	background: #666666;
	color: #ffffff;
	box-shadow: 0 6px 20px rgba(0,0,0,0.2);
	margin-right: 10px;
} 

a {
  color: inherit;
  text-decoration: none;
}
</style>

  <!-- ------------------------------ Visit ------------------------------- -->
	<div class="fab-container2">
    <p class="fab-label2">Visit</p>
  </div>
	<div class="fab-container">
		<div class="fab fab-icon-holder">
			<i><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC7hb7GJ4v4IwapVwZJJyvGsG5WF4RxsmEb0va1X0t-6urm1PGPDA2IEsETeLCuiyfJkUWhOOIUg9FN_Dr3gJJQmQUe2-AnYI3-R05TC6PbMRSnaljamNC9lQMOeE2q4Dr29jkfEaYwpadAjraVGgIgC_wGGp596Uh6tLX_ClrfbqK3wdhz4jE7i16/s1600/PNG%20JP.png" style="width: 75px;"></i>
		</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/@Javabitpro/videos"><i class="fa-brands fa-youtube"></i></i></a>
				</div>
			</li>
			<li style="margin-bottom: 60px;">
				<span class="fab-label">Website</span>
				<div class="fab-icon-holder">
					<a target="_blank" href="https://www.javabitpro.com/"><i class="fa-solid fa-globe"></i></a>
				</div>
			</li>
			
				
		</ul>
	</div>


8. Klik ikon Save.


9. Klik tombol biru Terapkan/Deploy lalu pilih Deployment baru/New Deployment.


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


11. Klik atau Salin URL yang sudah di Deploy.


SELESAI!!
























Tags:
Previous Post Next Post

Promo