Tugas 10

Nama : Irsyad Fikriansyah Ramadhan

NRP : 5025211149

Kelas : Pemrograman Berbasis Kerangka Kerja - A

Tahun : 2023

Di pertemuan ke-15 ini, kami ditugaskan untuk membuat aplikasi yang memanfaatkan framework dari google Framework Google

Link Repository: Github
Link Deployment: Web

Link Spreadsheet: Sheet

Berikut adalah langkah-langkahnya:

1. Buat SpreadSheet pada Google Drive yang diberi nama "Regristasi Peserta". Kemudian buat baris yang dibutuhkan

2. Lalu, klik "Extensions" dan pilih "Apps Script".

3. Tambahkan Kode berikut kemudian save:

const sheetName = 'Sheet1'
const scriptProp = PropertiesService.getScriptProperties()

function initialSetup () {
  const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
  const lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    const sheet = doc.getSheetByName(sheetName)

    const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    const nextRow = sheet.getLastRow() + 1

    const newRow = headers.map(function(header) {
      return header === 'Date' ? new Date() : e.parameter[header]
    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}

4. Tekan tombol "Add Triger" untuk menambahkan Trigger baru kemudian kemudian pilih doPost, lalu klik save

5. Jalankan Code sebelumnya

6. Lakukan "Deploy" Web App dengan klik tombol Deploy > New deployment. Pilih Select Type sebagai Web App. Isi deskripsi sesuai dengan web app yang dibuat dan ubah akses menjadi Anyone.

7. Setelah dilakukan deploy, kita akan mendapatkan URL dari Web App kita.

8. Kemudian kita bisa membuat tampilan form menggunakan HTML, CSS, dan Java Script. Pada file JavaScript, kita perlu meng-connect-kan Web dengan URL yang telah didapatkan pada langkah sebelumnya

script.js

// script.js

const form = document.getElementById("registrationForm");

form.addEventListener("submit", async (e) => {
  e.preventDefault();

  try {
    const response = await fetch(
      "https://script.google.com/macros/s/AKfycbyErSe3uAq0Fmz_JOrZzeAxaiYcFmi6rcmiM4wdODoBIlyhTpLLJdAK9bleA4tIexJk/exec",
      {
        method: "POST",
        body: new FormData(form),
      }
    );

    const data = await response.json();

    if (data.result === "success") {
      alert("Registrasi berhasil. Terima kasih sudah mendaftar.");
      window.location.reload();
    } else {
      throw new Error(data.error);
    }
  } catch (error) {
    console.error("Error! Something's wrong", error.message);
    alert("Registrasi Gagal!! Silahkan coba lagi.");
  }
});

index.html

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Registrasi Peserta</title>
  </head>
  <body>
    <h1 class="text-center py-4">Registrasi Peserta</h1>
    <form id="registrationForm" class="container">
      <div class="mb-3">
        <label for="Nama" class="form-label">Nama</label>
        <input type="text" class="form-control" id="Nama" name="Nama" />
      </div>
      <div class="mb-3">
        <label for="Jenis_Kelamin" class="form-label">Jenis Kelamin</label>
        <select class="form-select" id="Jenis_Kelamin" name="Jenis_Kelamin">
          <option value="Laki-laki">Laki-Laki</option>
          <option value="Perempuan">Perempuan</option>
        </select>
      </div>
      <div class="mb-3">
        <label for="Tanggal_Lahir" class="form-label">Tanggal Lahir</label>
        <input
          type="date"
          class="form-control"
          id="Tanggal_Lahir"
          name="Tanggal_Lahir"
        />
      </div>
      <div class="mb-3">
        <label for="No_HP" class="form-label">No HP</label>
        <input type="tel" class="form-control" id="No_HP" name="No_HP" />
      </div>
      <div class="mb-3">
        <label for="Alamat" class="form-label">Alamat</label>
        <textarea class="form-control" id="Alamat" name="Alamat"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>

    <script src="script.js"></script>
  </body>
</html>

style.css

/* style.css */

body {
    background-color: #f8f9fa;
  }
  
  .container {
    max-width: 500px;
    margin: auto;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 50px;
  }
  
  .form-label {
    font-weight: bold;
    color: #495057;
  }
  
  .form-control {
    border-radius: 4px;
  }
  
  .btn-primary {
    background-color: #28a745; /* Warna hijau */
    border-color: #28a745;
    padding: 10px 20px;
    display: block;
    margin: auto; /* Tombol di tengah */
  }
  
  .btn-primary:hover {
    background-color: #218838; /* Warna hijau lebih gelap saat hover */
    border-color: #218838;
  }