Cha's Record

10.18.연수 페이지

—

제공

min gyung Cha
안

문의: 차민경 chamingyung@outlook.com

웹앱 보기

그동안 제작한 웹앱 목록

강의 PPT 보기

강의 PPT 보러 가기

강의 원고 보러 가기

백업 코드

코드1(13쪽)

이제 전송 버튼을 누르면 데이터를 시트의 적절한 셀에 담는 작업을 할거야. 전송 버튼을 누르면 아래와 같이 처리해 줘.
1. 3번 항목을 통해 입력받은 시간이 19:00-20:00이면
1) 2번 항목을 통해 입력받은 날짜가 9.15.(월)인 경우, 1번 항목을 통해 입력받은 텍스트(학생명)를 시트의 B3셀에, 4번 항목을 통해 입력받은 텍스트를 B4셀에 입력
2) 2번 항목을 통해 입력받은 날짜가 9.16.(화)인 경우, 1번 항목을 통해 입력받은 텍스트(학생명)를 시트의 C3셀에, 4번 항목을 통해 입력받은 텍스트를 C4셀에 입력
3) 2번 항목을 통해 입력받은 날짜가 9.17.(수)인 경우, 1번 항목을 통해 입력받은 텍스트(학생명)를 시트의 D3셀에, 4번 항목을 통해 입력받은 텍스트를 D4셀에 입력
4) 2번 항목을 통해 입력받은 날짜가 9.18.(목)인 경우, 1번 항목을 통해 입력받은 텍스트(학생명)를 시트의 E3셀에, 4번 항목을 통해 입력받은 텍스트를 E4셀에 입력
5) 2번 항목을 통해 입력받은 날짜가 9.19.(금)인 경우, 1번 항목을 통해 입력받은 텍스트(학생명)를 시트의 F3셀에, 4번 항목을 통해 입력받은 텍스트를 F4셀에 입력
2. 3번 항목을 통해 입력받은 시간이 20:00-21:00이면
1) 2번 항목을 통해 입력받은 날짜가 9.15.(월)인 경우, 1번 항목을 통해 입력받은 텍스트(학생명)를 시트의 B5셀에, 4번 항목을 통해 입력받은 텍스트를 B6셀에 입력
2) 2번 항목을 통해 입력받은 날짜가 9.16.(화)인 경우, 1번 항목을 통해 입력받은 텍스트(학생명)를 시트의 C5셀에, 4번 항목을 통해 입력받은 텍스트를 C6셀에 입력
3) 2번 항목을 통해 입력받은 날짜가 9.17.(수)인 경우, 1번 항목을 통해 입력받은 텍스트(학생명)를 시트의 D5셀에, 4번 항목을 통해 입력받은 텍스트를 D6셀에 입력
4) 2번 항목을 통해 입력받은 날짜가 9.18.(목)인 경우, 1번 항목을 통해 입력받은 텍스트(학생명)를 시트의 E5셀에, 4번 항목을 통해 입력받은 텍스트를 E6셀에 입력
5) 2번 항목을 통해 입력받은 날짜가 9.19.(금)인 경우, 1번 항목을 통해 입력받은 텍스트(학생명)를 시트의 F5셀에, 4번 항목을 통해 입력받은 텍스트를 F6셀에 입력

코드2(쪽) 
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

// 예시: 시트에 데이터 쓰기
function writeData(data) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); // 활성 시트 유지
  sheet.appendRow([new Date(), data]);
  return '데이터가 성공적으로 저장되었습니다.';
}

// 예시: 시트에서 데이터 읽기
function readData() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = sheet.getDataRange().getValues();
  return data;
}

function writeData(data) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  sheet.appendRow([
    new Date(),
    data.name,
    data.date,
    data.time,
    data.notes
  ]);
  return '저장 완료';
}


<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title>아이좋아고등학교 3학년 1반 학부모 상담 예약</title>
    <style>
      body {
        font-family: 'Noto Sans KR', sans-serif;
        margin: 40px;
        background-color: #f9f9f9;
      }

      h1, h2 {
        text-align: center;
        color: #333;
      }

      .greeting-box {
        background-color: #fff;
        border-left: 5px solid #4CAF50;
        padding: 16px 20px;
        margin: 30px auto;
        width: 80%;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      }

      table {
        border-collapse: collapse;
        margin: 40px auto;
        width: 80%;
        background-color: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      }

      th, td {
        border: 1px solid #ccc;
        padding: 10px;
        text-align: center;
      }

      th {
        background-color: #e9f5e9;
      }

      td:first-child, th:first-child {
        background-color: #f4f4f4;
        font-weight: bold;
      }

      /* 상담 신청 섹션 */
      .form-section {
        width: 80%;
        background-color: #fff;
        margin: 50px auto;
        padding: 30px 40px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        border-radius: 10px;
      }

      label {
        display: block;
        margin-top: 20px;
        font-weight: bold;
      }

      input[type="text"],
      select,
      textarea {
        width: 100%;
        padding: 8px;
        margin-top: 8px;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 15px;
        font-family: inherit;
      }

      textarea {
        resize: vertical;
        height: 80px;
      }

      .radio-group {
        margin-top: 8px;
      }

      .radio-group label {
        margin-right: 20px;
        font-weight: normal;
      }

      button {
        margin-top: 25px;
        padding: 10px 20px;
        font-size: 16px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: background-color 0.3s ease;
      }

      button:hover {
        background-color: #45a049;
      }
    </style>
  </head>
  <body>
    <h1>아이좋아고등학교 3학년 1반 학부모 상담 예약</h1>

    <div class="greeting-box">
      안녕하십니까. 아이좋아고등학교 3학년 1반 담임교사입니다.<br>
      학부모님과의 상담 일정을 아래 표에서 확인하신 후 상담 신청을 진행해 주시기 바랍니다.
    </div>

    <table>
      <tr>
        <th></th>
        <th>월</th>
        <th>화</th>
        <th>수</th>
        <th>목</th>
        <th>금</th>
      </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>

    <!-- 상담 신청 섹션 -->
    <div class="form-section">
      <h2>상담 신청</h2>

      <label for="studentName">1. 학생의 이름을 입력해주세요</label>
      <input type="text" id="studentName" placeholder="예: 홍길동">

      <label for="dateSelect">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>

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

      <label for="notes">4. 참고사항이 있다면 적어주세요</label>
      <textarea id="notes" placeholder="예: 전화상담 희망, 일정 변경 가능 등"></textarea>

      <button id="submitBtn" onclick="submitForm()">전송</button>
    </div>

    <script>
      function submitForm() {
        const btn = document.getElementById('submitBtn');
        btn.textContent = '전송 중...';
        btn.disabled = true;

        // 입력값 수집
        const data = {
          name: document.getElementById('studentName').value,
          date: document.getElementById('dateSelect').value,
          time: document.querySelector('input[name="timeSlot"]:checked')?.value || '',
          notes: document.getElementById('notes').value
        };

        // 서버 전송
        google.script.run
          .withSuccessHandler(() => {
            btn.textContent = '전송 완료';
            btn.style.backgroundColor = '#999';
          })
          .writeData(data);
      }
    </script>
  </body>
</html>
코드3(쪽)

완성본

완성본 웹앱

완성본 코드

이론 강의

1강. html 코드 톺아보기
2강. gs 코드 톺아보기
3강. 교사가 프로그래밍을 배우려면? 현실적 로드맵

만족도 조사

코멘트

댓글 남기기

Cha's Record에서 더 알아보기

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

계속 읽기