구글에 해당되는 글 4건

[楞嚴] 생각 나누기/[情] 사회복지정보화 2024. 9. 30. 21:52
,

구글 Apps Script로 후원신청서 만들기

반응형

구글 Apps Script로 입력폼을 만들고, 입력된 데이터들이 구글 스프레드 시트에 저장되도록 하는 스크립트를 구현해 보았습니다.

 

Apps Script는 두 개의 파일로 작동합니다.

Code.gs라는 이름의 스크립트 파일과 웹화면을 통해 보여질 index.html이 그것입니다.

 

※ 이 스크립트는 기본적으로 구글 스프레드 시트의 Apps Script를 다룰 줄 아는 사람을 대상으로 하기 때문에 스크립트 적용 이전단계에 대해서는 설명하지 않습니다.

 

Code.gs

 
// 스프레드시트 ID와 시트 이름, 서명이미지 저장 폴더 ID를 변수로 선언
var SPREADSHEET_ID = ' YOUR_SPREADSHEET_ID';
var SHEET_NAME = '시트1';
var FOLDER_ID = ' YOUR_FOLDER_ID';

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function sendUserData(name, gender, ssn_a, ssn_b, cphone_n, phone_n, address, e_mail, s_term, s_type, s_money, s_how, s_item, s_item_q, s_unit, s_sector, s_why, s_path, receipt1, receipt2, a_date, signature) {
  var sheet = SpreadsheetApp.openById(SPREADSHEET_ID).getSheetByName(SHEET_NAME);
  var imageUrl = saveSignatureToDrive(signature, name);
  sheet.appendRow([
    name, gender, ssn_a, ssn_b,
    "'" + cphone_n, // 앞에 작은 따옴표 추가
    "'" + phone_n,  // 앞에 작은 따옴표 추가
    address, e_mail, s_term, s_type, s_money, s_how,
    s_item, s_item_q, s_unit, s_sector, s_why, s_path,
    receipt1, receipt2, a_date, '=IMAGE("' + imageUrl + '")'
  ]);
}

function saveSignatureToDrive(signature, name) {
  var folder = DriveApp.getFolderById(FOLDER_ID);
  var blob = Utilities.newBlob(Utilities.base64Decode(signature.split(',')[1]), 'image/png', name + '_signature.png');
  var file = folder.createFile(blob);
  var fileId = file.getId();
}

 

index.html

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <title>부민노인복지관 후원신청서</title>
  <style>
    #sig {
      background-color: #e0e0e0;
      border: 1px solid black;
      width: 500px;
      height: 300px;
    }

    #s_item_q, #ssn_a {
      width: 6em;
    }

    #ssn_b {
      width: 7em;
    }

    #savingMessage {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      border: 1px solid black;
      padding: 20px;
      z-index: 1000;
    }

  </style>
</head>
<body>
  <p>부민노인복지관 후원신청서</p>
  <form id="donationForm">
    <label>이름</label>
    <input type="text" id="name" name="name" placeholder="이름" required><br>

    <label>성별</label>
    <input type="radio" name="gender" value="남">남자
    <input type="radio" name="gender" value="여">여자<br>

    <label>주민등록번호</label>
    <input type="text" id="ssn_a" name="ssn_a" size="6" maxlength="6" required>-
    <input type="password" id="ssn_b" name="ssn_b" size="7" maxlength="7" required><br>

    <label>휴대전화</label>
    <input type="text" id="cphone_n" name="cphone_n" size="11" maxlength="11"> ※ 숫자만 입력<br>

    <label>일반전화</label>
    <input type="text" id="phone_n" name="phone_n" size="11" maxlength="11"> ※ 숫자만 입력<br>

    <label>주소</label>
    <input type="text" id="address" name="address" size="30"><br>

    <label>이메일</label>
    <input type="text" id="e_mail" name="e_mail" size="30"><br>

    <label>후원방식</label>
    <input type="radio" name="s_term" value="정기">정기
    <input type="radio" name="s_term" value="비정기">비정기<br>

    <label>후원구분</label>
    <input type="radio" name="s_type" value="지정">지정
    <input type="radio" name="s_type" value="비지정">비지정<br>

    <label>후원금</label>
    <input type="text" id="s_money" name="s_money">원<br>

    <label>후원방법</label>
    <input type="radio" name="s_how" value="자동이체">자동이체
    <input type="radio" name="s_how" value="현금납부">현금납부
    <input type="radio" name="s_how" value="CMS">CMS 이체
    <input type="radio" name="s_how" value="기타">기타<br>

    <label>후원품</label>
    (품명) <input type="text" id="s_item" name="s_item"> /
    (수량) <input type="number" id="s_item_q" name="s_item_q" size="4"> /
    (단위) <select id="s_unit" name="s_unit">
            <option value="">---</option>
            <option value="개">개</option>
            <option value="세트">세트</option>
            <option value="Box">Box</option>  
            <option value="건">건</option>  
            <option value="Kg">Kg</option>  
            <option value="명">명</option>  
            <option value="포">포</option>  
            <option value="g">g(그램)</option>  
            <option value="리터">리터</option>  
            <option value="대">대</option>  
            <option value="장">장</option>  
            <option value="통">통</option>  
            <option value="판">판</option>  
            <option value="병">병</option>  
            <option value="마리">마리</option>  
            <option value="봉지">봉지</option>  
            <option value="팩">팩</option>  
            <option value="묶음">묶음</option>  
            <option value="그루">그루</option>  
            <option value="송이">송이</option>  
            <option value="포기">포기</option>  
            <option value="자루">자루</option>  
            <option value="인분">인분</option>  
            <option value="짝">짝</option>  
            <option value="포대">포대</option>  
            <option value="기타">기타</option>  
    </select><br>

    <label>후원분야</label>
    <select id="s_sector" name="s_sector">
      <option value="">---------</option>
      <option value="밑반찬지원">밑반찬지원</option>
      <option value="저소득노인 무료급식사업">저소득노인 무료급식사업</option>
      <option value="위기 및 취약노인 사업">위기 및 취약노인 사업</option>
      <option value="지역복지 연계사업">지역복지 연계사업</option>
      <option value="명절 정나눔 행사">명절 정나눔 행사</option>
      <option value="기타">기타</option>
    </select><br>

    <label>참여동기</label>
    <select id="s_why" name="s_why">
      <option value="">---------</option>
      <option value="경제적 여유가 있어서">경제적 여유가 있어서</option>
      <option value="불우한 이웃을 돕기위해">불우한 이웃을 돕기위해</option>
      <option value="지역사회복지를 위해">지역사회복지를 위해</option>
      <option value="종교적 신념으로">종교적 신념으로</option>
      <option value="기타">기타</option>
    </select><br>

    <label>참여경로</label>
    <select id="s_path" name="s_path">
      <option value="">---------</option>
      <option value="기존 후원자/자원봉사자 소개를 통해">기존 후원자/자원봉사자 소개를 통해</option>
      <option value="복지관 소식지나 안내물을 통해">복지관 소식지나 안내물을 통해</option>
      <option value="언론매체를 통해">언론매체를 통해(TV, 라디오, 신문 등)</option>
      <option value="특정 행사 및 기념일 축하">특정 행사 및 기념일 축하</option>
      <option value="기타">기타</option>
    </select><br>

    <label>후원금영수증 발급</label><br>
      <input type="checkbox" name="receipt1" value="후원금영수증 필요">후원금 영수증 필요<br>
      <input type="checkbox" name="receipt2" value="국세청 연말정산 간소화 후원내역 제공 동의">국세청 연말정산 간소화 후원내역 제공 동의 <br>

    <label>신청일자</label>
    <input type="date" id="a_date" name="a_date"><br>

    <label>서명</label><br>
    <canvas id="sig"></canvas><br>
    <button type="button" id="clearSig">서명 지우기</button><br><br>

    <button type="button" onclick="submitData()">제출</button>
  </form>

  <div id="savingMessage">저장 중입니다...</div>

  <script>
    var signaturePad;

    function setupSignatureBox() {
      var canvas = document.getElementById("sig");
      canvas.width = 500;  // 명시적으로 크기 설정
      canvas.height = 300; // 명시적으로 크기 설정
      signaturePad = new SignaturePad(canvas);
    }

    function clearSignature() {
      signaturePad.clear();
    }

    function submitData() {
      const form = document.getElementById('donationForm');
      const formData = new FormData(form);

      // 필수 입력 필드 확인
      if (!formData.get('name') || !formData.get('ssn_a') || !formData.get('ssn_b') || !formData.get('cphone_n') || signaturePad.isEmpty()) {
        alert('성명, 주민등록번호, 서명은 필수 입력 항목입니다.');
        return;
      }

      const data = {
        name: formData.get('name'),
        gender: formData.get('gender'),
        ssn_a: formData.get('ssn_a'),
        ssn_b: formData.get('ssn_b'),
        cphone_n: formData.get('cphone_n'),
        phone_n: formData.get('phone_n'),
        address: formData.get('address'),
        e_mail: formData.get('e_mail'),
        s_term: formData.get('s_term'),
        s_type: formData.get('s_type'),
        s_money: formData.get('s_money'),
        s_how: formData.get('s_how'),
        s_item: formData.get('s_item'),
        s_item_q: formData.get('s_item_q'),
        s_unit: formData.get('s_unit'),
        s_sector: formData.get('s_sector'),
        s_why: formData.get('s_why'),
        s_path: formData.get('s_path'),
        receipt1: formData.get('receipt1') ? '필요' : '불필요',
        receipt2: formData.get('receipt2') ? '동의' : '미동의',
        a_date: formData.get('a_date'),
        signature: signaturePad.toDataURL()
      };

      document.getElementById('savingMessage').style.display = 'block'; // 저장 중 메시지 표시

      google.script.run.withSuccessHandler(() => {
        document.getElementById('savingMessage').style.display = 'none'; // 저장 중 메시지 숨기기
        alert('데이터가 성공적으로 저장되었습니다.');
      }).withFailureHandler(error => {
        document.getElementById('savingMessage').style.display = 'none'; // 저장 중 메시지 숨기기
        console.error('Error:', error);
        alert('데이터 저장 중 오류가 발생했습니다. 다시 입력해주세요.');
      }).sendUserData(
        data.name, data.gender, data.ssn_a, data.ssn_b, data.cphone_n, data.phone_n,
        data.address, data.e_mail, data.s_term, data.s_type, data.s_money, data.s_how,
        data.s_item, data.s_item_q, data.s_unit, data.s_sector, data.s_why, data.s_path,
        data.receipt1, data.receipt2, data.a_date, data.signature
      );
    }

    document.getElementById("clearSig").addEventListener("click", clearSignature);
    document.addEventListener("DOMContentLoaded", setupSignatureBox);
  </script>
</body>
</html>

 

입력 폼은 아래 링크와 같이 보여지게 됩니다.

https://script.google.com/a/macros/bmsenior.org/s/AKfycbxOwy1AJqVZypRUhlJtNl3xzWDSm4mUWhKxtBwI0_FrT66QLX_6ruxFn0h0WR4JUYrA3w/exec

 

https://script.google.com/a/macros/bmsenior.org/s/AKfycbxOwy1AJqVZypRUhlJtNl3xzWDSm4mUWhKxtBwI0_FrT66QLX_6ruxFn0h0WR4JUYrA3w/exec

 

script.google.com

 

반응형
저작자표시 비영리 동일조건

'[楞嚴] 생각 나누기 > [情] 사회복지정보화' 카테고리의 다른 글

Apps Script를 활용해 스프레드 시트로 데이터 전송하기  (0) 2024.09.23
폰트 저작권 이슈에 대한 점검  (0) 2020.08.12
코로나19 상황에 대한 전화설문조사 결과  (0) 2020.07.08
QR코드를 활용한 출입자 관리 - 노인복지관용  (3) 2020.06.24
ⓝ세대 가족을 위한 사이버복지관의 설립과 역할  (0) 2017.01.05
[楞嚴] 생각 나누기/[情] 사회복지정보화 2024. 9. 23. 13:22
,

Apps Script를 활용해 스프레드 시트로 데이터 전송하기

반응형

우리가 입력하는 데이터를 구글 스프레드 시트에 저장되게 하려면 어떻게 해야할까요?

기본적으로 구글 설문지 폼을 사용하면 스프레드 시트에 저장되는 것을 확인할 수 있습니다.

이걸 내가 원하는 대로 할 수는 없을까요?

 

일반적으로 생각했을 때 2개의 서식이 필요하단 사실은 떠올릴 수 있을 것입니다.

첫번째로 데이터를 입력하는 서식이며, 이는 웹 화면을 통해 보여질 것입니다.

구글 스프레드시트의 Apps Script에서는 기본값으로 index.html을 설정해두고 있습니다.

두번째로 입력된 데이터가 스프레드 시트에 차곡차곡 쌓여야할 것입니다. 

이를 위한 스프레드 시트 파일(SpreadSheet)이 필요합니다.

 

그런데 하나가 더 필요합니다. 

이 두 파일을 연결할 연결고리, 그것이 Apps Script 입니다.

Code.gs가 바로 그것입니다.

 

자, 정리하자면, 데이터입력을 담당하는 index.html, 데이터를 받아서 저장할 SpreadSheet, 마지막으로 이 둘을 연결하는 Code.gs가 필요합니다.

 

이때 필요한 가장 기본적인 코드를 정리해보겠습니다.

 

  1. index.html

 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">


    <!-- 아래 스크립트를 통해 구글 스프레드 시트에 저장하게 됩니다. -->
    <script>
      function onSuccess(){
        alert("저장완료");
      }


      function resister() {
        let inputEl = document.getElementsByTagName("input");
        let inputData = [];
        for(element of inputEl) {
          inputData.push(element.value);
        }


        google.script.run.withSuccessHandler(onSuccess).sendUserData(inputData);
      }
    </script>
    <!-- 여기까지 -->
  </head>


  <body>
    <p>데이터 입력</p>
    <!-- 아래 input 태그를 통해 데이터가 입력되며, resister()를 통해 등록됩니다. -->
    <label>종류</label>
    <input type="text" name="type"><br>


    <label>수량</label>
    <input type="number" name="number"><br>


    <label>유효기간</label>
    <input type="date" name="deadline"><br>


    <button onclick="resister()">등록</button>
    <!-- 여기까지. 위에 input은 더 많이 추가해도 됩니다. -->
  </body>
 
</html>



  1. Code.gs
  • index.html과 소통하기 위해 필요한 함수
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

 

  • 아래 3개 중 필요에 따라 선택
function sendUserData(inputData) {
  let ss = SpreadsheetApp.getActiveSheet();
  ss.appendRow(inputData);
}
▲ 구글 스프레드 시트에서 바로 App Script를 만든 경우로 시트가 하나 뿐인 경우.
  별도의 지정없이 바로 작동합니다.
function sendUserData(inputData) {
  let sheetName = '시트1'; // 시트 이름을 변수로 선언
  let ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);
  ss.appendRow(inputData);
}
▲ 시트가 여러개인 경우 시트명을 변수로 지정토록 하였습니다.
  ’시트1’을 수정하세요.
function sendUserData(inputData) {
  // 스프레드시트 파일 ID 및 시트 이름 설정
  const spreadsheetId = 'YOUR_SPREADSHEET_ID'; // 여기에 스프레드시트 파일 ID를 입력
  const sheetName = '시트1';


  // 스프레드시트 및 시트 가져오기
  const spreadsheet = SpreadsheetApp.openById(spreadsheetId);
  const sheet = spreadsheet.getSheetByName(sheetName);


  // 데이터 추가
  sheet.appendRow(inputData);
}
▲ 파일명(고유ID)와 시트명을 모두 변수로 설정합니다.
  ’YOUR_SPREADSHEET_ID’에 스프레드 시트 파일의 ID를 직접 입력합니다.
  ’시트1’에 시트명을 직접 입력합니다.



여기까지가 기본적인 처리방법입니다.

index.html을 수정함으로써 입력화면을 좀더 다양하게 꾸밀 수 있으며, 스프레드 시트로 보낼 데이터도 추가할 수 있을 것입니다.



반응형
저작자표시 비영리 동일조건

'[楞嚴] 생각 나누기 > [情] 사회복지정보화' 카테고리의 다른 글

구글 Apps Script로 후원신청서 만들기  (2) 2024.09.30
폰트 저작권 이슈에 대한 점검  (0) 2020.08.12
코로나19 상황에 대한 전화설문조사 결과  (0) 2020.07.08
QR코드를 활용한 출입자 관리 - 노인복지관용  (3) 2020.06.24
ⓝ세대 가족을 위한 사이버복지관의 설립과 역할  (0) 2017.01.05
[하루] 일상과 독백 2021. 1. 26. 18:30
,

구글 애드센스 계좌입금

반응형



오늘 오후 뜬금없이 울린 입금 알림...

뭐지 싶어 들어가보니 ILT로 시작하는 입금 내역...


뭘까 한참 생각하다가 문득 떠오른 것이 구글 애드센스였다.

저번에 $140가 넘어가는 것을 보았는데.. 혹시?


수표로 받았던 1차분은 아직 입금처리도 못하고 있어.. 귀찮기도 해서 카카오뱅크를 지급계좌로 지정했던게 떠오른 것이다.


애드센스에 들어가보니 지급된 내역을 확인...

$142.09를 환율 계산해보니, 대략 156,900원 상당.. 여기에 입금된 것이 139,412원이니 대략 2만원 정도가 수수료로 차감되었나 보다.


처음 지급받는데 1년 6개월이 걸린 반면, 이번엔 11개월만에 정산되었으니 조금 더 빨라지긴 했나보다.


뜬금없이 용돈받은거 같아서 기분좋네...

수표도 얼른 입금해야할텐데...

반응형
저작자표시 비영리

'[하루] 일상과 독백' 카테고리의 다른 글

코로나19, 사회복지시설의 일상회복? 거리두기 강화!  (0) 2021.11.23
플레이톡(playtalk.net)  (0) 2021.07.06
구글 애드센스 수표 도착  (0) 2020.09.22
도전! 思 + 悟  (0) 2019.03.19
부산 여중생 사건을 바라보며...  (0) 2017.09.08
[하루] 일상과 독백 2020. 9. 22. 12:05
,

구글 애드센스 수표 도착

반응형

2019년 2월 21일에 처음 이 블로그에 애드센스 광고를 연동한지 1년 8개월 정도 지났다.

그리고 그 광고수입에 따른 수표가 어제 도착하였다.

지난 7월 22일에 수표가 발송되었다 했으니, 꼭 두달이 걸린 것이다.

100달러를 만드는데 꼬박 1년 6개월이 걸린 셈~

 

발행신청 당시 설정했던 주소가 이사하기 전 주소로 되어 있어 걱정이었는데, 신기하게도 어제 새주소로 수표가 잘도착했다.

구글에서 보내온 우편봉투

여기 우편봉투의 표지에는 이사한 새주소가 찍혀있었다.

수표 상단 : 주소 부분

하지만 봉투를 열어보니 보여지는 새주소 외에 이사 전 옛주소로 나온다.

이사했던 시기가 수표 발급시기와 겹쳐 있어서 조정된 것인지 어떤지 확실치는 않다.

수표

위 이미지가 구글에서 발급한 수표이다. $105.19로 이걸 환전하면 되는 것으로 알고 있다.

수수료 등이 세고, 앞서 언급했듯이 수표가 도착하기까지 걸리는 시간 등을 고려했을 때는 그냥 은행 계좌로 받는 것이 훨신 낫다고 생각된다.

난... 그냥 이걸 실물로 한번 받아보고 싶었을 뿐...

반응형

'[하루] 일상과 독백' 카테고리의 다른 글

플레이톡(playtalk.net)  (0) 2021.07.06
구글 애드센스 계좌입금  (0) 2021.01.26
도전! 思 + 悟  (0) 2019.03.19
부산 여중생 사건을 바라보며...  (0) 2017.09.08
무슨 생각을 하고 계신가요?  (0) 2015.06.18

티스토리툴바