Cha's Record

강의원고 속 코드(완성)

—

제공

min gyung Cha
안
code.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}

function saveReservation(name, date, time, note) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");

  let targetCellName, targetCellNote;

  // 시간별 분기
  if (time === "19:00-20:00") {
    switch (date) {
      case "9.15.(월)": targetCellName = "B3"; targetCellNote = "B4"; break;
      case "9.16.(화)": targetCellName = "C3"; targetCellNote = "C4"; break;
      case "9.17.(수)": targetCellName = "D3"; targetCellNote = "D4"; break;
      case "9.18.(목)": targetCellName = "E3"; targetCellNote = "E4"; break;
      case "9.19.(금)": targetCellName = "F3"; targetCellNote = "F4"; break;
    }
  } else if (time === "20:00-21:00") {
    switch (date) {
      case "9.15.(월)": targetCellName = "B5"; targetCellNote = "B6"; break;
      case "9.16.(화)": targetCellName = "C5"; targetCellNote = "C6"; break;
      case "9.17.(수)": targetCellName = "D5"; targetCellNote = "D6"; break;
      case "9.18.(목)": targetCellName = "E5"; targetCellNote = "E6"; break;
      case "9.19.(금)": targetCellName = "F5"; targetCellNote = "F6"; break;
    }
  }

  if (targetCellName && targetCellNote) {
    const existingName = sheet.getRange(targetCellName).getValue();
    if (existingName) {
      return "duplicate";
    } else {
      sheet.getRange(targetCellName).setValue(name);
      sheet.getRange(targetCellNote).setValue(note);
      return "success";
    }
  }
  return "error";
}

// 시트 데이터를 읽어 HTML 표에 반환
function getReservationData() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  
  // 시간/날짜별 예약 현황을 객체로 반환
  const data = {
    "19:00-20:00": {
      "9.15.(월)": sheet.getRange("B3").getValue(),
      "9.16.(화)": sheet.getRange("C3").getValue(),
      "9.17.(수)": sheet.getRange("D3").getValue(),
      "9.18.(목)": sheet.getRange("E3").getValue(),
      "9.19.(금)": sheet.getRange("F3").getValue()
    },
    "20:00-21:00": {
      "9.15.(월)": sheet.getRange("B5").getValue(),
      "9.16.(화)": sheet.getRange("C5").getValue(),
      "9.17.(수)": sheet.getRange("D5").getValue(),
      "9.18.(목)": sheet.getRange("E5").getValue(),
      "9.19.(금)": sheet.getRange("F5").getValue()
    }
  };
  return data;
}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      body { font-family: "맑은 고딕", sans-serif; margin: 20px; }
      h2, h3 { text-align: center; margin-bottom: 20px; }
      .greeting-box { border: 1px solid #ccc; border-radius: 8px; padding: 15px; background-color: #f9f9f9; margin-bottom: 20px; line-height: 1.6; }
      table { border-collapse: collapse; width: 100%; max-width: 800px; margin: 0 auto 30px auto; text-align: center; }
      table, th, td { border: 1px solid #999; }
      th, td { padding: 10px; }
      th { background-color: #f0f0f0; }
      .form-section { max-width: 600px; margin: 0 auto; }
      .form-group { margin-bottom: 15px; }
      label { display: block; margin-bottom: 5px; font-weight: bold; }
      input[type="text"], select, textarea { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; }
      textarea { height: 80px; resize: vertical; }
      .radio-group { display: flex; gap: 20px; }
      .submit-btn { display: inline-block; background-color: #4CAF50; color: white; padding: 10px 20px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.3s ease; }
      .submit-btn:hover { background-color: #45a049; }
    </style>
    <script>
      function submitForm() {
        const name = document.getElementById("studentName").value.trim();
        const date = document.getElementById("dateSelect").value;
        const time = document.querySelector("input[name='time']:checked")?.value || "";
        const note = document.getElementById("note").value.trim();

        if (!name || !date || !time) {
          alert("학생 이름, 날짜, 시간을 모두 입력해주세요.");
          return;
        }

        google.script.run
          .withSuccessHandler(function(response) {
            const btn = document.getElementById("submitBtn");
            if (response === "success") {
              btn.innerText = "전송 완료";
              btn.disabled = true;
              btn.style.backgroundColor = "#999";
              alert("상담 예약이 완료되었습니다.");
              loadReservationData(); // 저장 후 표 갱신
            } else if (response === "duplicate") {
              alert("이미 예약이 존재합니다. 다른 날짜 또는 시간을 택해주세요.");
            } else {
              alert("예약 중 오류가 발생했습니다. 다시 시도해주세요.");
            }
          })
          .saveReservation(name, date, time, note);
      }

      // 서버에서 시트 데이터 읽어와 표에 표시
      function loadReservationData() {
        google.script.run.withSuccessHandler(function(data) {
          const times = ["19:00-20:00","20:00-21:00"];
          const dates = ["9.15.(월)","9.16.(화)","9.17.(수)","9.18.(목)","9.19.(금)"];
          
          times.forEach((time, rowIdx) => {
            dates.forEach((date, colIdx) => {
              const cell = document.querySelectorAll("table tr")[rowIdx + 2].cells[colIdx + 1];
              cell.textContent = data[time][date] || "";
            });
          });
        }).getReservationData();
      }

      window.onload = function() {
        loadReservationData(); // 페이지 로드 시 예약 현황 표시
      };
    </script>
  </head>
  <body>
    <h2>아이좋아고등학교 3학년 1반 학부모 상담 예약</h2>
    <div class="greeting-box">
      안녕하십니까. 3학년 1반 학부모님. 학기초 상담주간을 맞이하여 학부모 상담을 실시하고자 합니다. 
      바쁘시겠지만 시간을 내시어, 자녀의 학교 생활 및 교우 관계, 진로진학과 관련하여 알찬 시간이 될 수 있도록 많은 참석 부탁드립니다. 
      원하는 날짜와 시간을 선택하셔서 상담 예약을 부탁드립니다.
    </div>

    <table>
      <tr>
        <td></td>
        <td>월</td>
        <td>화</td>
        <td>수</td>
        <td>목</td>
        <td>금</td>
      </tr>
      <tr>
        <td></td>
        <td>9.15.</td>
        <td>9.16.</td>
        <td>9.17.</td>
        <td>9.18.</td>
        <td>9.19.</td>
      </tr>
      <tr>
        <td>19:00-20:00</td>
        <td></td><td></td><td></td><td></td><td></td>
      </tr>
      <tr>
        <td>20:00-21:00</td>
        <td></td><td></td><td></td><td></td><td></td>
      </tr>
    </table>

    <h3>상담 신청</h3>
    <div class="form-section">
      <div class="form-group">
        <label>1. 학생의 이름을 적어주세요</label>
        <input type="text" id="studentName" placeholder="예: 홍길동">
      </div>

      <div class="form-group">
        <label>2. 원하시는 날짜를 택해주세요</label>
        <select id="dateSelect">
          <option value="">-- 선택하세요 --</option>
          <option value="9.15.(월)">9.15.(월)</option>
          <option value="9.16.(화)">9.16.(화)</option>
          <option value="9.17.(수)">9.17.(수)</option>
          <option value="9.18.(목)">9.18.(목)</option>
          <option value="9.19.(금)">9.19.(금)</option>
        </select>
      </div>

      <div class="form-group">
        <label>3. 원하시는 시간을 택해주세요</label>
        <div class="radio-group">
          <label><input type="radio" name="time" value="19:00-20:00"> 19:00-20:00</label>
          <label><input type="radio" name="time" value="20:00-21:00"> 20:00-21:00</label>
        </div>
      </div>

      <div class="form-group">
        <label>4. 참고사항이 있다면 적어주세요.</label>
        <textarea id="note" placeholder="예: 아이의 성향, 특별히 상담하고 싶은 내용 등"></textarea>
      </div>

      <button id="submitBtn" class="submit-btn" onclick="submitForm()">전송</button>
    </div>
  </body>
</html>

코멘트

One response to “강의원고 속 코드(완성)”

  1. 10.18.연수 페이지 – Cha's Record

    […] 코드 완성본 […]

    응답

10.18.연수 페이지 – Cha's Record 에 응답 남기기응답 취소

Cha's Record에서 더 알아보기

지금 구독하여 계속 읽고 전체 아카이브에 액세스하세요.

계속 읽기