#JP89 Progres Input Data Ke Spreadsheet Berbeda Setiap Halaman

Progres Input Data Ke Spreadsheet Berbeda Setiap Halaman




1. Copy contoh spreadsheet  File Untuk Sekretariat Data (Klik Disini)


Pada contoh spreadsheet File Untuk Sekretariat Data diatas memiliki satu sheet yaitu sheet Data, dengan beberapa kolom rincian data pribadi. Sheet ini merupakan halaman pertama dari form input.

2. Copy contoh spreadsheet File Untuk Guru Bhs Indonesia (Klik Disini)


Pada contoh spreadsheet File Untuk Guru Bhs Indonesia diatas memilki satu sheet yaitu sheet Bhs Indonesia, dengan kolom rincian nilai-nilai pada pelajaran Bhs. Indonesia.

3. Copy contoh spreadsheet File Untuk Guru Bhs Inggris (Klik Disini)


Pada contoh spreadsheet File Untuk Guru Bhs Inggris diatas memilki satu sheet yaitu sheet Bhs Inggris, dengan kolom rincian nilai-nilai pada pelajaran Bhs. Inggris.

4. Copy contoh spreadsheet File Untuk Guru Matematika (Klik Disini)


Pada contoh spreadsheet File Untuk Guru Matematika diatas memilki satu sheet yaitu sheet Matematika, dengan kolom rincian nilai-nilai pada pelajaran Matematika.

5. Buatlah folder baru pada Google Drive untuk menyimpan berkas/foto (Status Shared)

6. Kembali ke Spreadsheet File Untuk Sekretariat Data, buatlah lembar kerja Apps Script dengan cara menu Ekstensi/Extensions lalu pilih Apps Script.


7. Pada lembar kerja Apps Script terdapat tujuh file default yaitu :
  • Beckend.gs
  • Page.html
  • PageInfo.html
  • ScriptJS.html
  • StyleCSS.html
  • StyleCSSPage.html
  • Visit.html

8. Copy dan pastekan script dibawah ke Beckend.gs

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

function doGet(e) {
  var htmlOutput = HtmlService.createTemplateFromFile('Page');
  htmlOutput.message = '';
  var output = htmlOutput.evaluate();
  output.setTitle('Javabitpro');
  output.addMetaTag('viewport', 'width=device-width, initial-scale=1');
  output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  output.setFaviconUrl('https://i.imgur.com/thmO7Xv.png');
  return output;
}


function doPost(e) {
  
  Logger.log(JSON.stringify(e));
  
  var destination_id = 'ID_FOLDER';  // ISI ID FOLDER;
  var destination = DriveApp.getFolderById(destination_id);
  var data = Utilities.base64Decode(e.parameter.fileData);
  var blob = Utilities.newBlob(data, e.parameter.mimeType, e.parameter.fileName);
  destination.createFile(blob);
  
  // Rincian Data Pribadi
  listRecord(e.parameter.namalengkap, e.parameter.kelas, e.parameter.noabsen, e.parameter.email, e.parameter.telp,  e.parameter.tanggallahir , e.parameter.fileName); 
  
  // Rincian Data Bahasa Indonesia
  listbhsindonesia(e.parameter.namalengkap, e.parameter.kelas, e.parameter.noabsen, e.parameter.nilaitugasindo, e.parameter.nilaiutsindo, e.parameter.nilaiuasindo,e.parameter.nilaimakalahindo);

  // Rincian Data Bahasa Inggris
  listbhsinggris(e.parameter.namalengkap, e.parameter.kelas, e.parameter.noabsen, e.parameter.nilaitugasinggris, e.parameter.nilaiutsinggris, e.parameter.nilaiuasinggris, e.parameter.nilaipraktekinggris);

  // Rincian Data Matematika
  listmatematika(e.parameter.namalengkap, e.parameter.kelas, e.parameter.noabsen, e.parameter.nilailatihansoalmtk, e.parameter.nilaitugasmtk, e.parameter.nilaiutsmtk, e.parameter.nilaiuasmtk);
  
  var htmlOutput =  HtmlService.createTemplateFromFile('PageInfo');
  htmlOutput.message = 'Data Berhasil Tersimpan';
  var output = htmlOutput.evaluate();
  output.setTitle('Javabitpro');
  output.addMetaTag('viewport', 'width=device-width, initial-scale=1');
  output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  output.setFaviconUrl('https://i.imgur.com/thmO7Xv.png');
  return output;
  
}
//Fungsi Menyimpan Data Pribadi
function listRecord( namalengkap, kelas, noabsen, email, telp, tanggallahir , filename)
{
  var url = 'URL_Spreadsheet_File_Untuk_Sekretariat_Data';  //URL DARI GOOGLE SHEET;
  var ss= SpreadsheetApp.openByUrl(url);
  var recordsSheet = ss.getSheetByName("Data"); //NAMA Data
  recordsSheet.appendRow([new Date(), namalengkap, kelas,noabsen,email,telp,tanggallahir , filename]);
}

//Fungsi Menyimpan Nilai Bahasa Indoensia
function listbhsindonesia(namalengkap, kelas, noabsen, nilaitugasindo, nilaiutsindo, nilaiuasindo,nilaimakalahindo) {
  var url = 'URL_Spreadsheet_File_Untuk_Guru_Bhs_Indonesia';  // URL DARI GOOGLE SHEET;
  var ss = SpreadsheetApp.openByUrl(url);
  var addressSheet = ss.getSheetByName("Bhs Indonesia"); // NAMA SHEET Bhs Indonesia
  addressSheet.appendRow([new Date(),namalengkap, kelas, noabsen, nilaitugasindo, nilaiutsindo, nilaiuasindo,nilaimakalahindo]);
}

//Fungsi Menyimpan Nilai Bahasa Inggris
function listbhsinggris(namalengkap, kelas, noabsen, nilaitugasinggris, nilaiutsinggris, nilaiuasinggris, nilaipraktekinggris) {
  var url = 'URL_Spreadsheet_File_Untuk_Guru_Bhs_Inggris';  // URL DARI GOOGLE SHEET;
  var ss = SpreadsheetApp.openByUrl(url);
  var addressSheet = ss.getSheetByName("Bhs Inggris"); // NAMA SHEET Bhs Inggris
  addressSheet.appendRow([new Date(),namalengkap, kelas, noabsen, nilaitugasinggris, nilaiutsinggris, nilaiuasinggris, nilaipraktekinggris]);
}

//Fungsi Menyimpan Nilai Matematika
function listmatematika(namalengkap, kelas, noabsen, nilailatihansoalmtk, nilaitugasmtk, nilaiutsmtk, nilaiuasmtk) {
  var url = 'URL_Spreadsheet_File_Untuk_Guru_Matematika';  // URL DARI GOOGLE SHEET;
  var ss = SpreadsheetApp.openByUrl(url);
  var addressSheet = ss.getSheetByName("Matematika"); // NAMA SHEET Matematika
  addressSheet.appendRow([new Date(),namalengkap, kelas, noabsen, nilailatihansoalmtk, nilaitugasmtk, nilaiutsmtk, nilaiuasmtk]);
}

function getUrl() {
 var url = ScriptApp.getService().getUrl();
 return url;
}
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

Pada point 17 pada script di atas silahkan sesuaikan ID_FOLDER dengan ID Folder yang telah dibuat.




Pada point 48 pada script di atas silahkan sesuaikan URL Spreadsheet File Untuk Sekretariat Data.




Pada point 56 pada script di atas silahkan sesuaikan dengan URL Spreadsheet File Untuk Guru Bhs Indonesia.




Pada point 64 pada script di atas silahkan sesuaikan dengan URL Spreadsheet File Untuk Guru Bhs Inggris.



Pada point 72 pada script di atas silahkan sesuaikan dengan URL Spreadsheet File Untuk Guru Matematika.



9. Copy dan pastekan script dibawah ini ke Page.html


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

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Multi Step Form with Progress Bar Example </title>
      <!-- Normalize CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
      <!-- Bootstrap 4 CSS -->
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
      <!-- Telephone Input CSS -->
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.2/css/intlTelInput.css'>
      <!-- Icons CSS -->
    <link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
      <!-- Nice Select CSS -->
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.min.css'>
     <!-- Style CSS -->
            <?!= include('StyleCSS')?>
	<!-- Demo CSS -->
	<?!= include('StyleCSSPage')?>
     <!-- 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')?>
   
  <script>
  function LoadFile(event)
  {
    var file = event.target.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
      console.log(e.target.result);
      var fileData = e.target.result.substr(e.target.result.indexOf(",")+1);
      var mimeTypeStart = e.target.result.indexOf("data:") + 5;
      var mimeTypeEnd = e.target.result.indexOf(";");
      var mimeType = e.target.result.substr(mimeTypeStart, mimeTypeEnd - mimeTypeStart);
      var fileName = file.name;
      document.getElementById("fileData").value = fileData;
      document.getElementById("mimeType").value = mimeType;
      document.getElementById("fileName").value = fileName;
    };    
    reader.readAsDataURL(file);
  }
  
  </script>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    function previewFile(input){
        var file = $("input[type=file]").get(0).files[0];
 
        if(file){
            var reader = new FileReader();
 
            reader.onload = function(){
                $("#previewImg").attr("src", reader.result);
            }
 
            reader.readAsDataURL(file);
        }
    }
</script>
  </head>

<main>
  <article>

      <!-- Start Multiform HTML -->
  <section class="multi_step_form">  
        <?var url = getUrl();?>
  <form id="msform" method="post" action="<?= url ?>" > 
    <!-- Tittle -->
    <div class="tittle">
      <h1>PROGRES INPUT DATA NILAI</h1>
    </div>
    <!-- progressbar -->
    <ul id="progressbar">
      <li class="active">Input Data Pribadi</li>  
      <li>Input Nilai Bhs Indonesia</li> 
      <li>Input Nilai Bhs Inggris</li>
      <li>Input Nilai Matematika</li>
      <li>Upload Berkas</li>
    </ul>
    <!-- fieldsets -->
   <fieldset>
		<h3>DATA PRIBADI</h3>
		<div class="form-row">
			<div class="form-group col-md-6">
				<input class="form-control" name="namalengkap" placeholder="Nama Lengkap" type="text"><br>
				<input class="form-control" name="noabsen" placeholder="No. Absen" type="text"><br>
				<input class="form-control" id="phone" name="telp" placeholder="+880" type="text"><br>
			</div>
			<div class="form-group col-md-6">
				<input class="form-control" name="kelas" placeholder="Kelas" type="text"><br>
				<input class="form-control" name="email" placeholder="Email" type="email"><br>
				<input class="form-control" name="tanggallahir" type="date"><br>
			</div>
		</div><button class="next action-button" type="button">Lanjut</button>
	</fieldset>
	<fieldset>
		<h3>DATA NILAI BHS. INDONESIA</h3>
		<div class="form-row">
			<div class="form-group col-md-6">
				<input class="form-control" name="nilaitugasindo" placeholder="Nilai Tugas Bhs.Indonesia" type="text"><br>
				<input class="form-control" name="nilaiutsindo" placeholder="Nilai UTS Bhs.Indonesia" type="text"><br>
			</div>
			<div class="form-group col-md-6">
				<input class="form-control" name="nilaiuasindo" placeholder="Nilai UAS Bhs. Indonesia" type="text"><br>
				<input class="form-control" name="nilaimakalahindo" placeholder="Nilai Makalah Bhs.Indonesia" type="text"><br>
			</div>
		</div><button class="action-button previous previous_button" type="button">Kembali</button> <button class="next action-button" type="button">Lanjut</button>
	</fieldset>
	<fieldset>
		<h3>DATA NILAI BHS. INGGRIS</h3>
		<div class="form-row">
			<div class="form-group col-md-6">
				<input class="form-control" name="nilaitugasinggris" placeholder="Nilai Tugas Bhs.Inggris" type="text"><br>
				<input class="form-control" name="nilaiutsinggris" placeholder="Nilai UTS Bhs.Inggris" type="text"><br>
			</div>
			<div class="form-group col-md-6">
				<input class="form-control" name="nilaiuasinggris" placeholder="Nilai UAS Bhs.Inggris" type="text"><br>
				<input class="form-control" name="nilaipraktekinggris" placeholder="Nilai Praktek Speaking" type="text"><br>
			</div>
		</div><button class="action-button previous previous_button" type="button">Kembali</button> <button class="next action-button" type="button">Lanjut</button>
	</fieldset>
	<fieldset>
		<h3>DATA NILAI MATEMATIKA</h3>
		<div class="form-row">
			<div class="form-group col-md-6">
				<input class="form-control" name="nilailatihansoalmtk" placeholder="Nilai Latihan Soal Matematika" type="text"><br>
				<input class="form-control" name="nilaitugasmtk" placeholder="Nilai Tugas Matematika" type="text"><br>
			</div>
			<div class="form-group col-md-6">
				<input class="form-control" name="nilaiutsmtk" placeholder="Nilai UTS Matematika" type="text"><br>
				<input class="form-control" name="nilaiuasmtk" placeholder="Nilai UAS Matematika" type="text"><br>
			</div>
		</div><button class="action-button previous previous_button" type="button">Kembali</button> <button class="next action-button" type="button">Lanjut</button>
	</fieldset>
	<fieldset>
		<div class="passport">
			<h4>Pas Foto 3x4<br>
			Pas Foto 4x6</h4><a class="don_icon" href=""><i class="ion-android-done"></i></a>
		</div>
		<div class="input-group1">
			<div class="custom-file">
				<input accept="image/*" class="custom-file-input" id="upload" name="file" onchange="{LoadFile(event),previewFile(this)}" style="margin-left: 50px;color: #000000;font-weight: bold;font-size: .82em;" type="file"> <label class="custom-file-label" for="upload"><i class="ion-android-cloud-outline"></i> Pilih Gambar</label><br>
			</div>
		</div><img alt="" id="previewImg" src="" style="max-width: 250px;"><br>
		<br>
		<input id="fileData" name="fileData" type="hidden"> <input id="mimeType" name="mimeType" type="hidden"> <input id="fileName" name="fileName" type="hidden"> <button class="action-button previous previous_button" type="button">Kembali</button> <input class="action-button" type="submit" value="Simpan">
	</fieldset>
  </form>  
</section> 
      <!-- END Multiform HTML -->
  </article>
 </main>

   <footer class="credit">Author: Google Apps Script by : <a title="Awesome web design code & scripts" href="https://www.javabitpro.com" target="_blank">Javabitpro</a></footer>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.2/js/intlTelInput.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js'></script>
        <?!= include('ScriptJS')?>
</body>
</html>


10. Copy dan pastekan script dibawah ini ke PageInfo.html

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

<!DOCTYPE html>
<html>
  <head>
<base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Multi Step Form with Progress Bar Example </title>
      <!-- Normalize CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
      <!-- Bootstrap 4 CSS -->
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
      <!-- Telephone Input CSS -->
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.2/css/intlTelInput.css'>
      <!-- Icons CSS -->
    <link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
      <!-- Nice Select CSS -->
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.min.css'>
     <!-- Style CSS -->
            <?!= include('StyleCSS')?>
	<!-- Demo CSS -->
	<?!= include('StyleCSSPage')?>
     <!-- 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>
    <main>
      <article>
        <div class="tittle">
    <center>
      <br><br>
    <div style="box-shadow: rgba(2,16,118) 0px 2px 4px 0px, rgba(2,16,118) 0px 2px 16px 0px;width: 280px;padding: 15px 20px 20px 20px;border-radius: 20px;"><br><br>
      <i class="fa fa-check" style="font-size:43px;color:#021076;"> </i> <br><br>
      <b style="font-size:20px;color: #021076;"><span><?= message ?></span></b><br><br>
      
    </div>
    </center>  
        </div>
      </article>
       <footer class="credit">Author: Google Apps Script by : <a title="Awesome web design code & scripts" href="https://www.javabitpro.com" target="_blank">Javabitpro</a></footer>
       <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.2/js/intlTelInput.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js'></script>
        <?!= include('ScriptJS')?>
    </main>
  </body>
</html>


11. Copy dan pastekan script dibawah ini ke ScriptJS.html

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

<script>
 (function($) {
    "use strict";  
    
    //* Form js
    function verificationForm(){
        //jQuery time
        var current_fs, next_fs, previous_fs; //fieldsets
        var left, opacity, scale; //fieldset properties which we will animate
        var animating; //flag to prevent quick multi-click glitches

        $(".next").click(function () {
            if (animating) return false;
            animating = true;

            current_fs = $(this).parent();
            next_fs = $(this).parent().next();

            //activate next step on progressbar using the index of next_fs
            $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

            //show the next fieldset
            next_fs.show();
            //hide the current fieldset with style
            current_fs.animate({
                opacity: 0
            }, {
                step: function (now, mx) {
                    //as the opacity of current_fs reduces to 0 - stored in "now"
                    //1. scale current_fs down to 80%
                    scale = 1 - (1 - now) * 0.2;
                    //2. bring next_fs from the right(50%)
                    left = (now * 50) + "%";
                    //3. increase opacity of next_fs to 1 as it moves in
                    opacity = 1 - now;
                    current_fs.css({
                        'transform': 'scale(' + scale + ')',
                        'position': 'absolute'
                    });
                    next_fs.css({
                        'left': left,
                        'opacity': opacity
                    });
                },
                duration: 800,
                complete: function () {
                    current_fs.hide();
                    animating = false;
                },
                //this comes from the custom easing plugin
                easing: 'easeInOutBack'
            });
        });

        $(".previous").click(function () {
            if (animating) return false;
            animating = true;

            current_fs = $(this).parent();
            previous_fs = $(this).parent().prev();

            //de-activate current step on progressbar
            $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

            //show the previous fieldset
            previous_fs.show();
            //hide the current fieldset with style
            current_fs.animate({
                opacity: 0
            }, {
                step: function (now, mx) {
                    //as the opacity of current_fs reduces to 0 - stored in "now"
                    //1. scale previous_fs from 80% to 100%
                    scale = 0.8 + (1 - now) * 0.2;
                    //2. take current_fs to the right(50%) - from 0%
                    left = ((1 - now) * 50) + "%";
                    //3. increase opacity of previous_fs to 1 as it moves in
                    opacity = 1 - now;
                    current_fs.css({
                        'left': left
                    });
                    previous_fs.css({
                        'transform': 'scale(' + scale + ')',
                        'opacity': opacity
                    });
                },
                duration: 800,
                complete: function () {
                    current_fs.hide();
                    animating = false;
                },
                //this comes from the custom easing plugin
                easing: 'easeInOutBack'
            });
        });

        $(".submit").click(function () {
            return false;
        })
    }; 
    
    //* Add Phone no select
    function phoneNoselect(){
        if ( $('#msform').length ){   
            $("#phone").intlTelInput(); 
            $("#phone").intlTelInput("setNumber", "+62"); 
        };
    }; 
    //* Select js
    function nice_Select(){
        if ( $('.product_select').length ){ 
            $('select').niceSelect();
        };
    }; 
    /*Function Calls*/  
    verificationForm ();
    phoneNoselect ();
    nice_Select ();
})(jQuery);
  </script>


12. Copy dan pastekan script dibawah ini ke StyleCSS.html

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

<style>
 /*font Variables*/
/*Color Variables*/
@import url("https://fonts.googleapis.com/css?family=Roboto:300i,400,400i,500,700,900");
.multi_step_form {
  background: #f6f9fb;
  display: block;
  overflow-x: hidden;
}
.multi_step_form #msform {
  text-align: center;
  position: relative;
  padding-top: 50px;
  min-height: 820px;
    height: auto;
  max-width: 820px;
  margin: 0 auto;
  background: #ffffff;
  z-index: 1;
}
.multi_step_form #msform .tittle {
  text-align: center;
  padding-bottom: 55px;
}
.multi_step_form #msform .tittle h2 {
  font: 500 24px/35px "Roboto", sans-serif;
  color: #3f4553;
  padding-bottom: 5px;
}
.multi_step_form #msform .tittle p {
  font: 400 16px/28px "Roboto", sans-serif;
  color: #5f6771;
}
.multi_step_form #msform fieldset {
  border: 0;
  padding: 20px 105px 0;
  position: relative;
  width: 100%;
  left: 0;
  right: 0;
}
.multi_step_form #msform fieldset:not(:first-of-type) {
  display: none;
}
.multi_step_form #msform fieldset h3 {
  font: 500 18px/35px "Roboto", sans-serif;
  color: #3f4553;
}
.multi_step_form #msform fieldset h6 {
  font: 400 15px/28px "Roboto", sans-serif;
  color: #5f6771;
  padding-bottom: 30px;
}
.multi_step_form #msform fieldset .intl-tel-input {
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
}
.multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag {
  padding: 0 20px;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
  width: 65px;
}
.multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag .iti-arrow {
  border: 0;
}
.multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag .iti-arrow:after {
  content: "\f35f";
  position: absolute;
  top: 0;
  right: 0;
  font: normal normal normal 24px/7px Ionicons;
  color: #5f6771;
}
.multi_step_form #msform fieldset #phone {
  padding-left: 80px;
}
.multi_step_form #msform fieldset .form-group {
  padding: 0 10px;
}
.multi_step_form #msform fieldset .fg_2, .multi_step_form #msform fieldset .fg_3 {
  padding-top: 10px;
  display: block;
  overflow: hidden;
}
.multi_step_form #msform fieldset .fg_3 {
  padding-bottom: 70px;
}
.multi_step_form #msform fieldset .form-control, .multi_step_form #msform fieldset .product_select {
  border-radius: 3px;
  border: 1px solid #d8e1e7;
  padding: 0 20px;
  height: auto;
  font: 400 15px/48px "Roboto", sans-serif;
  color: #5f6771;
  box-shadow: none;
  outline: none;
  width: 100%;
}
.multi_step_form #msform fieldset .form-control.placeholder, .multi_step_form #msform fieldset .product_select.placeholder {
  color: #5f6771;
}
.multi_step_form #msform fieldset .form-control:-moz-placeholder, .multi_step_form #msform fieldset .product_select:-moz-placeholder {
  color: #5f6771;
}
.multi_step_form #msform fieldset .form-control::-moz-placeholder, .multi_step_form #msform fieldset .product_select::-moz-placeholder {
  color: #5f6771;
}
.multi_step_form #msform fieldset .form-control::-webkit-input-placeholder, .multi_step_form #msform fieldset .product_select::-webkit-input-placeholder {
  color: #5f6771;
}
.multi_step_form #msform fieldset .form-control:hover, .multi_step_form #msform fieldset .form-control:focus, .multi_step_form #msform fieldset .product_select:hover, .multi_step_form #msform fieldset .product_select:focus {
  border-color: #021076;
}
.multi_step_form #msform fieldset .form-control:focus.placeholder, .multi_step_form #msform fieldset .product_select:focus.placeholder {
  color: transparent;
}
.multi_step_form #msform fieldset .form-control:focus:-moz-placeholder, .multi_step_form #msform fieldset .product_select:focus:-moz-placeholder {
  color: transparent;
}
.multi_step_form #msform fieldset .form-control:focus::-moz-placeholder, .multi_step_form #msform fieldset .product_select:focus::-moz-placeholder {
  color: transparent;
}
.multi_step_form #msform fieldset .form-control:focus::-webkit-input-placeholder, .multi_step_form #msform fieldset .product_select:focus::-webkit-input-placeholder {
  color: transparent;
}
.multi_step_form #msform fieldset .product_select:after {
  display: none;
}
.multi_step_form #msform fieldset .product_select:before {
  content: "\f35f";
  position: absolute;
  top: 0;
  right: 20px;
  font: normal normal normal 24px/48px Ionicons;
  color: #5f6771;
}
.multi_step_form #msform fieldset .product_select .list {
  width: 100%;
}
.multi_step_form #msform fieldset .done_text {
  padding-top: 40px;
}
.multi_step_form #msform fieldset .done_text .don_icon {
  height: 36px;
  width: 36px;
  line-height: 36px;
  font-size: 22px;
  margin-bottom: 10px;
  background: #021076;
  display: inline-block;
  border-radius: 50%;
  color: #ffffff;
  text-align: center;
}
.multi_step_form #msform fieldset .done_text h6 {
  line-height: 23px;
}
.multi_step_form #msform fieldset .code_group {
  margin-bottom: 60px;
}
.multi_step_form #msform fieldset .code_group .form-control {
  border: 0;
  border-bottom: 1px solid #a1a7ac;
  border-radius: 0;
  display: inline-block;
  width: 30px;
  font-size: 30px;
  color: #5f6771;
  padding: 0;
  margin-right: 7px;
  text-align: center;
  line-height: 1;
}
.multi_step_form #msform fieldset .passport {
  margin-top: -10px;
  padding-bottom: 30px;
  position: relative;
}
.multi_step_form #msform fieldset .passport .don_icon {
  height: 36px;
  width: 36px;
  line-height: 36px;
  font-size: 22px;
  position: absolute;
  top: 4px;
  right: 0;
  background: #021076;
  display: inline-block;
  border-radius: 50%;
  color: #ffffff;
  text-align: center;
}
.multi_step_form #msform fieldset .passport h4 {
  font: 500 15px/23px "Roboto", sans-serif;
  color: #5f6771;
  padding: 0;
}
.multi_step_form #msform fieldset .input-group {
  padding-bottom: 40px;
}
.multi_step_form #msform fieldset .input-group .custom-file {
  width: 100%;
  height: auto;
}
.multi_step_form #msform fieldset .input-group .custom-file .custom-file-label {
  width: 168px;
  border-radius: 5px;
  cursor: pointer;
  font: 700 14px/40px "Roboto", sans-serif;
  border: 1px solid #99a2a8;
  text-align: center;
  transition: all 300ms linear 0s;
  color: #5f6771;
}
.multi_step_form #msform fieldset .input-group .custom-file .custom-file-label i {
  font-size: 20px;
  padding-right: 10px;
}
.multi_step_form #msform fieldset .input-group .custom-file .custom-file-label:hover, .multi_step_form #msform fieldset .input-group .custom-file .custom-file-label:focus {
  background: #021076;
  border-color: #021076;
  color: #fff;
}
.multi_step_form #msform fieldset .input-group .custom-file input {
  display: none;
}
.multi_step_form #msform fieldset .file_added {
  text-align: left;
  padding-left: 190px;
  padding-bottom: 60px;
}
.multi_step_form #msform fieldset .file_added li {
  font: 400 15px/28px "Roboto", sans-serif;
  color: #5f6771;
}
.multi_step_form #msform fieldset .file_added li a {
  color: #021076;
  font-weight: 500;
  display: inline-block;
  position: relative;
  padding-left: 15px;
}
.multi_step_form #msform fieldset .file_added li a i {
  font-size: 22px;
  padding-right: 8px;
  position: absolute;
  left: 0;
  transform: rotate(20deg);
}
.multi_step_form #msform #progressbar {
  margin-bottom: 30px;
  overflow: hidden;
}
.multi_step_form #msform #progressbar li {
  list-style-type: none;
  color: #99a2a8;
  font-size: 9px;
  width: calc(100%/5);
  float: left;
  position: relative;
  font: 500 13px/1 "Roboto", sans-serif;
}
.multi_step_form #msform #progressbar li:nth-child(2):before {
  content: "\f471";
}
.multi_step_form #msform #progressbar li:nth-child(3):before {
  content: "\f3e9";
}
.multi_step_form #msform #progressbar li:nth-child(4):before {
  content: "\f483";
}
.multi_step_form #msform #progressbar li:before {
  content: "\f12f";
  font: normal normal normal 30px/50px Ionicons;
  width: 50px;
  height: 50px;
  line-height: 50px;
  display: block;
  background: #eaf0f4;
  border-radius: 50%;
  margin: 0 auto 10px auto;
}
.multi_step_form #msform #progressbar li:after {
  content: '';
  width: 100%;
  height: 10px;
  background: #eaf0f4;
  position: absolute;
  left: -50%;
  top: 21px;
  z-index: -1;
}
.multi_step_form #msform #progressbar li:last-child:after {
  width: 150%;
}
.multi_step_form #msform #progressbar li.active {
  color: #021076;
}
.multi_step_form #msform #progressbar li.active:before, .multi_step_form #msform #progressbar li.active:after {
  background: #021076;
  color: white;
}
.multi_step_form #msform .action-button {
  background: #021076;
  color: white;
  border: 0 none;
  border-radius: 5px;
  cursor: pointer;
  min-width: 130px;
  font: 700 14px/40px "Roboto", sans-serif;
  border: 1px solid #021076;
  margin: 0 5px;
  text-transform: uppercase;
  display: inline-block;
}
.multi_step_form #msform .action-button:hover, .multi_step_form #msform .action-button:focus {
  background: #405867;
  border-color: #405867;
}
.multi_step_form #msform .previous_button {
  background: transparent;
  color: #99a2a8;
  border-color: #99a2a8;
}
.multi_step_form #msform .previous_button:hover, .multi_step_form #msform .previous_button:focus {
  background: #405867;
  border-color: #405867;
  color: #fff;
}
  </style>


13. Copy dan pastekan script dibawah ini ke StyleCSSPage.html

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

<style>
  @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
*{ margin: 0; padding: 0;}
body{
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
  font-size: 15px;
  background: #eee;
}
.intro{
   background: #fff;
   padding: 60px 30px;
   color: #333;
   margin-bottom: 15px;
   line-height: 1.5;
   text-align: center;
}
.intro h1 {
   font-size: 18pt;
   padding-bottom: 15px;

}
.intro p{
   font-size: 14px;
}

.action{
   text-align: center;
   display: block;
   margin-top: 20px;
}

a.btn {
  text-decoration: none;
  color: #666;
   border: 2px solid #666;
   padding: 10px 15px;
   display: inline-block;
   margin-left: 5px;
}
a.btn:hover{
   background: #666;
   color: #fff;
    transition: .3s;
-webkit-transition: .3s;
}
.btn:before{
  font-family: FontAwesome;
  font-weight: normal;
  margin-right: 10px;
}
.github:before{content: "\f09b"}
.down:before{content: "\f019"}
.back:before{content:"\f112"}
.credit{
    background: #fff;
    padding: 12px;
    font-size: 9pt;
    text-align: center;
    color: #333;
    margin-top: 40px;

}
.credit span:before{
   font-family: FontAwesome;
   color: #e41b17;
   content: "\f004";


}
.credit a{
   color: #333;
   text-decoration: none;
}
.credit a:hover{
   color: #1DBF73; 
}
.credit a:hover:after{
    font-family: FontAwesome;
    content: "\f08e";
    font-size: 9pt;
    position: absolute;
    margin: 3px;
}
main{
  background: #fff;
  padding:: 20px;
  
}

article h1,
article h2,
article h3,
article h4,
article p{
   padding: 14px;
   color: #333;
}
article p{
   font-size: 15px;
    line-height: 1.5;
}
 
@media only screen and (min-width: 820px){
    main{
      max-width: 820px;
      margin-left: auto;
      margin-right: auto; 
      padding: 24px;
    }


}

.set-overlayer,
.set-glass,
.set-sticky {
	cursor: pointer;
	height: 45px;
	line-height: 45px;
	padding: 0 15px;
	color: #333;
	font-size: 16px;
}
.set-overlayer:after,
.set-glass:after,
.to-active:after,
.set-sticky:after {
	font-family: FontAwesome;
	font-size: 18pt;
	position: relative;
	float: right;
}
.set-overlayer:after,
.set-glass:after,
.set-sticky:after {
	content: "\f204";
	transition: .6s;
}

.to-active:after {
	content: "\f205";
	color: #008080;
	transition: .6s;
}
.set-overlayer,
.set-glass,
.set-sticky,
.source,
.theme-tray {
	margin: 10px;
	background: #f2f2f2;
	border-radius: 5px;
	border: 2px solid #f1f1f1;
	box-sizing: border-box;
}
/* Syntax Highlighter*/

pre.prettyprint {
	padding: 15px !important;
   margin: 10px;
	border: 0 !important;
  background: #f2f2f2;
  overflow: auto;
}

.source {
	white-space: pre;
	overflow: auto;
	max-height: 400px;
}
code{
    border:1px solid #ddd;
    padding: 2px;
    border-radius: 2px;
}

  </style>


14. Copy dan pastekan script dibawah 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=yEiExdVc-6U&list=PLDeNeiwBHjwYg7_gz2vDA1D6QfBiMgIj6&index=86"><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>


15. Klik ikon Save.



16. Klik tombol Terapkan/Deploy lalu pilih Deployment baru/New deployment.


17. Pastikan jenisnya adalah Aplikasi web, hak aksesnya adalah Siapa saja/Anyone lalu pilih Terapkan/Deploy.


18. Lakukan Autorisasi perizinan (Jika diminta)

19. Klik atau salin URL yang sudah di Deploy.


SELESAI !!!
















Previous Post Next Post

Promo