(공유용 page) 2차 소스코드 공유(최종)

Folder Tree

Code

Code.gs 파일

function doGet(e) {
  Logger.log(e);
  //console.log(e);
  Logger.log(e.parameter);
  if(e.parameter.page == 'index'){
    return HtmlService.createTemplateFromFile('index').evaluate();
  } else if(e.parameter.page == 'blog'){
    return HtmlService.createTemplateFromFile('blog').evaluate();
  } else if(e.parameter.page == 'write'){
    return HtmlService.createTemplateFromFile('write').evaluate();
  } else if(e.parameter.page == 'contact'){
    return HtmlService.createTemplateFromFile('contact').evaluate();
  } else {
    return HtmlService.createTemplateFromFile('index').evaluate();
  }
}

function writeData(contents){
  const url = '여러분 스프레드 시트 URL';
  const ss = SpreadsheetApp.openByUrl(url);
  const ws = ss.getSheetByName('data');

  //Logger.log(title, content);
  ws.appendRow([contents.title, contents.content, new Date(), contents.section, contents.writer]);
}

function loadData(){
    const url = '여러분 스프레드 시트 URL';
    const ss = SpreadsheetApp.openByUrl(url);
    const ws = ss.getSheetByName('data');
  
    let data = ws.getRange(1, 1, ws.getLastRow(), 5).getValues();
    console.log(data);

    returnData = [];
    for (let index = 0; index < data.length; index++) {
        returnData.push([data[index][0], data[index][1], String(data[index][2]), data[index][3], data[index][4]]);
    }
    return returnData;
}

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

index.html 파일

<!DOCTYPE html>
<html lang="en">
    <head>
        <base target="_top">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>Clean Blog - Start Bootstrap Theme</title>
        <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
        <!-- Font Awesome icons (free version)-->
        <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
        <!-- Google fonts-->
        <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
        <!-- Core theme CSS (includes Bootstrap)-->
        <?!= include('customCSS'); ?>
    </head>
    <body>
        <!-- Navigation-->
        <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
            <div class="container">
                <a class="navbar-brand" href="index.html">Start Bootstrap</a>
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    Menu
                    <i class="fas fa-bars"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=index">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=blog">Blog</a></li>
                        <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=contact">Contact</a></li>
                        <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=write">Write</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Page Header-->
        <header class="masthead" style="background-image: url('http://gdurl.com/guHs')">
            <div class="overlay"></div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-md-10 mx-auto">
                        <div class="site-heading">
                            <h1>Clean Blog</h1>
                            <span class="subheading">A Blog Theme by Start Bootstrap</span>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- Main Content-->
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-md-10 mx-auto">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius praesentium recusandae illo eaque architecto error, repellendus iusto reprehenderit, doloribus, minus sunt. Numquam at quae voluptatum in officia voluptas voluptatibus, minus!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consequuntur magnam, excepturi aliquid ex itaque esse est vero natus quae optio aperiam soluta voluptatibus corporis atque iste neque sit tempora!</p>
                </div>
            </div>
        </div>
        <hr />
        <!-- Footer-->
        <footer>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-md-10 mx-auto">
                        <ul class="list-inline text-center">
                            <li class="list-inline-item">
                                <a href="#!">
                                    <span class="fa-stack fa-lg">
                                        <i class="fas fa-circle fa-stack-2x"></i>
                                        <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                                    </span>
                                </a>
                            </li>
                            <li class="list-inline-item">
                                <a href="#!">
                                    <span class="fa-stack fa-lg">
                                        <i class="fas fa-circle fa-stack-2x"></i>
                                        <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
                                    </span>
                                </a>
                            </li>
                            <li class="list-inline-item">
                                <a href="#!">
                                    <span class="fa-stack fa-lg">
                                        <i class="fas fa-circle fa-stack-2x"></i>
                                        <i class="fab fa-github fa-stack-1x fa-inverse"></i>
                                    </span>
                                </a>
                            </li>
                        </ul>
                        <p class="copyright text-muted">Copyright &copy; Your Website 2021</p>
                    </div>
                </div>
            </div>
        </footer>
        <!-- Bootstrap core JS-->
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
        <!-- Core theme JS-->
        <?!= include('customJS'); ?>
    </body>
</html>

write.html 파일

<!DOCTYPE html>
<html lang="en">
    <head>
        <base target="_top">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>Clean Blog - Start Bootstrap Theme</title>
        <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
        <!-- Font Awesome icons (free version)-->
        <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
        <!-- Google fonts-->
        <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
        <!-- Core theme CSS (includes Bootstrap)-->
        <?!= include('customCSS'); ?>
    </head>
    <body>
        <!-- Navigation-->
        <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
            <div class="container">
                <a class="navbar-brand" href="index.html">Start Bootstrap</a>
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    Menu
                    <i class="fas fa-bars"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=index">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=blog">Blog</a></li>
                        <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=contact">Contact</a></li>
                        <li class="nav-item"><a class="nav-link" href="<?= ScriptApp.getService().getUrl() ?>?page=write">Write</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Page Header-->
        <header class="masthead" style="background-image: url('http://gdurl.com/guHs')">
            <div class="overlay"></div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-md-10 mx-auto">
                        <div class="page-heading">
                            <h1>About Me</h1>
                            <span class="subheading">This is what I do.</span>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- Main Content-->
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="input-group mb-3">
                        <span class="input-group-text" id="basic-addon1">제목</span>
                        <input type="text" id="title" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                    </div>
                    <div class="input-group">
                        <span class="input-group-text">내용</span>
                        <textarea id="content" class="form-control" aria-label="With textarea"></textarea>
                    </div>
                    <br>
                    <label for="section">분류</label>
                    <select id="section" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
                        <option value="technology">기술</option>
                        <option value="idea">생각</option>
                    </select>
                    <div class="d-grid gap-2">
                        <button id="write" class="btn btn-primary" type="button">작성</button>
                    </div>
                </div>
            </div>
        </div>
        <hr />
        <!-- Footer-->
        <footer>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-md-10 mx-auto">
                        <ul class="list-inline text-center">
                            <li class="list-inline-item">
                                <a href="#!">
                                    <span class="fa-stack fa-lg">
                                        <i class="fas fa-circle fa-stack-2x"></i>
                                        <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                                    </span>
                                </a>
                            </li>
                            <li class="list-inline-item">
                                <a href="#!">
                                    <span class="fa-stack fa-lg">
                                        <i class="fas fa-circle fa-stack-2x"></i>
                                        <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
                                    </span>
                                </a>
                            </li>
                            <li class="list-inline-item">
                                <a href="#!">
                                    <span class="fa-stack fa-lg">
                                        <i class="fas fa-circle fa-stack-2x"></i>
                                        <i class="fab fa-github fa-stack-1x fa-inverse"></i>
                                    </span>
                                </a>
                            </li>
                        </ul>
                        <p class="copyright text-muted">Copyright &copy; Your Website 2021</p>
                    </div>
                </div>
            </div>
        </footer>
        <!-- Bootstrap core JS-->
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
        <!-- Core theme JS-->
        <?!= include('customJS'); ?>
        <script>
            document.getElementById('write').addEventListener('click', googleSheetWrite);

            function googleSheetWrite(){
                let contents = {};

                contents.title = document.getElementById('title').value;
                contents.content = document.getElementById('content').value;
                contents.section = document.getElementById('section').value;
                contents.writer = 'weniv'

                //console.log(contents);

                google.script.run.writeData(contents);

                document.getElementById('title').value = '';
                document.getElementById('content').value = '';
                document.getElementById('section').value = '';

            }
        </script>
    </body>
</html>

Folder Tree

Code

Code.gs 파일

index.html 파일

write.html 파일

blog.html