상세 컨텐츠

본문 제목

홈피 완료

카테고리 없음

by bumychoi 2023. 2. 25. 16:55

본문

초미니홈피 - 팬명록 (eba-pipcecea.ap-northeast-2.elasticbeanstalk.com)

 

pds 다이어리

pds 다이어리 응원 한마디

myweb.eba-pipcecea.ap-northeast-2.elasticbeanstalk.com

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient

client = MongoClient("mongodb+srv://sparta:test@cluster0.n70pon6.mongodb.net/?retryWrites=true&w=majority")
db = client.dbsparta


@app.route('/')
def home():
   return render_template('index.html')

@app.route("/guestbook", methods=["POST"])
def guestbook_post():
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']
    doc = {
        'name':name_receive,
        'comment': comment_receive
    }
    db.fen.insert_one(doc)

    return jsonify({'msg': '저장 완료!'})

@app.route("/guestbook", methods=["GET"])
def guestbook_get():
    all_comments = list(db.fen.find({},{'_id':False}))
    return jsonify({'result': all_comments})

if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <script
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>

    <title>초미니홈피 - 팬명록</title>
    <meta property="og:title" content="pds 다이어리" />
    <meta property="og:description" content="pds 다이어리 응원 한마디" />

    <link
      rel="stylesheet"
    />
    <style>
      * {
        font-family: "Noto Serif KR", serif;
      }
      .mypic {
        width: 100%;
        height: 300px;

        background-image: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.5)
          ),
          url("data:image/jpeg;base64,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");
        background-position: center 30%;
        background-size: cover;

        color: white;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .mypost {
        width: 95%;
        max-width: 500px;
        margin: 20px auto 20px auto;

        box-shadow: 0px 0px 3px 0px black;
        padding: 20px;
      }

      .mypost > button {
        margin-top: 15px;
      }

      .mycards {
        width: 95%;
        max-width: 500px;
        margin: auto;
      }

      .mycards > .card {
        margin-top: 10px;
        margin-bottom: 10px;
      }
    </style>
    <script>
      $(document).ready(function () {
        set_temp();
        show_comment();
      });
      function set_temp() {
        fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data) => {
            console.log(data['temp'])
                let temp =data['temp']
                $('#temp').text(temp)
          });
      }
      function save_comment() {
        let name = $('#name').val()
        let comment =$('#comment').val()

        let formData = new FormData();
        formData.append("name_give", name);
        formData.append("comment_give", comment);

        fetch('/guestbook', {method: "POST",body: formData,}).then((res) => res.json()).then((data) => {
   
            alert(data["msg"]);
            window.location.reload()
          });
      }
      function show_comment() {
        fetch('/guestbook').then((res) => res.json()).then((data) => {
                    let rows = data['result']
                    $("#comment-list").empty()
                    rows.forEach((a) => {
                        let name = a['name']
                        let comment = a['comment']
                        // console.log(name,comment)    
                        let temp_html =`
                                        <div class="card">
                                            <div class="card-body">
                                            <blockquote class="blockquote mb-0">
                                                <p>${comment}</p>
                                                <footer class="blockquote-footer">${name}</footer>
                                            </blockquote>
                                            </div>
                                        </div> `  
                        $("#comment-list").append(temp_html)
                    });
        })
      }
    </script>
  </head>
  <body>
    <div class="mypic">
      <h1>pds 다이어리 응원 메세지</h1>
      <p>현재기온: <span id="temp">36</span>도</p>
    </div>
    <div class="mypost">
      <div class="form-floating mb-3">
        <input type="text" class="form-control" id="name" placeholder="url" />
        <label for="floatingInput">닉네임</label>
      </div>
      <div class="form-floating">
        <textarea
          class="form-control"
          placeholder="Leave a comment here"
          id="comment"
          style="height: 100px"
        ></textarea>
        <label for="floatingTextarea2">응원댓글</label>
      </div>
      <button onclick="save_comment()" type="button" class="btn btn-dark">
        댓글 남기기
      </button>
    </div>
    <div class="mycards" id="comment-list">
      <div class="card">
        <div class="card-body">
          <blockquote class="blockquote mb-0">
            <p>새로운 앨범 너무 멋져요!</p>
            <footer class="blockquote-footer">호빵맨</footer>
          </blockquote>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <blockquote class="blockquote mb-0">
            <p>새로운 앨범 너무 멋져요!</p>
            <footer class="blockquote-footer">호빵맨</footer>
          </blockquote>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <blockquote class="blockquote mb-0">
            <p>새로운 앨범 너무 멋져요!</p>
            <footer class="blockquote-footer">호빵맨</footer>
          </blockquote>
        </div>
      </div>
    </div>
  </body>
</html>

티스토리툴바