본문 바로가기
내일배움캠프/TIL

22.11.15 TIL

by 노믹 2022. 11. 15.

오늘 한 일

  • 개인 소개 페이지 만들기
  • 발생문제에 대한 해결

내일 할 일

  • 9시에 개인 페이지 회의
  • 9시30분에 튜터님 리뷰
  • 공동페이지 업무분담 후 코딩

회고

개인 페이지에 대한 생각을 못하고 있다가 어제 밤늦게 인지하게 되어서 급하게 진행했다.

디자인은 심플이즈베스트로 가고, 방명록에 대한 CRUD를 중점으로 했다.

예상치 못한 곳에서 오류가 나서 시간을 많이 잡아먹었다.

 

11.15 결과물

index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>김정민 소개 페이지</title>
    <!--구글 폰트 -->
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
    <!--css 링크-->
    <link href="../static/jm_style.css" type="text/css" rel="stylesheet">


</head>

<body>
<header>
</header>
<div class="jm_menu">
    <nav class="jm_menu-bar">
        <!--프로필 이미지-->
        <div class="jm_index">
            <div class="jm_profile">
                <img class="jm_img" src="https://teamsparta.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F9a26e8f4-c939-48ca-b9b1-026b81000c89%2FKakaoTalk_Photo_2022-10-20-16-12-39_001.jpeg?table=block&id=c109cab9-42ad-4d0a-a4bd-fc8264338ece&spaceId=83c75a39-3aba-4ba4-a792-7aefe4b07895&width=2000&userId=&cache=v2" style="max-width: 100%; max-height: 100%">
            </div>
            <br>
        </div>
    </nav>
</div>
<!--about-->
<div>
    <section class="jm_about">
        <header class="jm_name">
            <p>JungMin Kim</p>
        </header>
        <div class="jm_card">
            <div class="card text-white bg-dark mb-3" style="max-width: 18rem; width: 95%;">
                <div class="card-header">About Me</div>
                <div class="card-body">
                    <p class="card-title">상황에 따라 유연하게 업무</p>
                    <p class="card-title">MBTI: ISTJ</p>
                    <p class="card-title">집중력이 높음</p>
                    <a class="hyper" href="https://nomik.tistory.com/">나의 블로그</a>
                </div>
            </div>
            <div class="card text-white bg-dark mb-3" style="max-width: 18rem; width: 95%;">
                <div class="card-header">I Learning</div>
                <div class="card-body">
                    <p class="card-title">JavaScript</p>
                    <p class="card-title">Python</p>
                    <p class="card-title">Node.js</p>
                    <p class="card-title">Express.js</p>
                    <p class="card-title">Nest.js</p>
                </div>
            </div>
            <div class="card text-white bg-dark mb-3" style="max-width: 18rem; width: 95%;">
                <div class="card-header">TodoList</div>
                <div class="card-body">
                    <p class="card-title">개발자로 취업하기</p>
                    <p class="card-title">다이어트 성공하기</p>
                    <p class="card-title">내일배움캠프 수료하기</p>
                </div>
            </div>
        </div>
    </section>
</div>
<!--guestbook-->
<div>
    <section class="jm_guest-book">
        <div class="mypost" id="post-box">
            <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>
    </section>
</div>
<script type="text/javascript" src="../static/jm_main.js"></script>
</body>
</html>

 

style.css

body {
    background-color: aqua;
}

.jm_profile {
    max-width: 280px;
    width: 95%;
    height: 500px;
    border: 1px solid black;
}

.jm_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jm_menu {
    position: fixed;
    border: 0;
    background-color: beige;
    display: block;
    max-width: 300px;
    width: 95%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jm_index {
    margin: -50px auto 0px auto;

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

/*ABOUT*/
.jm_about {
    padding-left: 300px;
}
.jm_name {
    padding-top: 150px;
    font-size: 100px;
    font-weight: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.jm_card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.card {
    margin: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 300px;
    width: 95%;
    height: 250px;
    border-radius: 10%;
}
.card-header {
    font-size: 30px;
}
.card-title {
    font-size: 17px;
}
.hyper {
    text-decoration-line: none;
    font-size: 17px;
}
a:link {
    color: pink;
}
a:visited {
    color: gray;
}
a:hover {
    color: beige;
}
a:active {
    color: green;
}


/*guest-book*/
.jm_guest-book {
    padding-left: 300px;
}

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

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

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

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

.mycards > .card {
    margin-top: 10px;
    margin-bottom: 10px;
}
.guest-book-card {
    width: 95%;
    max-width: 500px;
    margin: 20px auto 20px auto;

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

.jm_btn {
    margin: auto 2px 4px 2px;
    float: right;
}

 

main.js

/*guest book*/
$(document).ready(function () {
    show_comment()
});

/*댓글 추가 기능*/
function save_comment() {
    let name = $('#name').val()
    let comment = $('#comment').val()

    if (name === "" || comment === "") {
        alert("이름 또는 내용을 작성해주세요.")
    } else {
        $.ajax({
            type: 'POST',
            url: '/jungmin',
            data: {
                name_give: name,
                comment_give: comment
            },
            success: function (response) {
                alert(response['msg'])
                window.location.reload()
            }
        })
    }
}

/*댓글 조회 기능*/
function show_comment() {
    $.ajax({
        type: "GET",
        url: "/jungmin",
        data: {},
        success: function (response) {
            let rows = response['jmguestbook']
            for (let i = 0; i < rows.length; i++) {
                let name = rows[i]['name']
                let comment = rows[i]['comment']
                let num = rows[i]['num']
                let done = rows[i]['done']

                let temp_html = ``
                if (done === 0) {
                    temp_html = `<div class="guest-book-card">
                                            <div class="card-body">
                                                <blockquote class="blockquote mb-0">
                                                    <p>${comment}</p>
                                                    <footer class="blockquote-footer">${name}</footer>
                                                    <button type="button" onclick="delete_comment(${num})" class="jm_btn btn-secondary btn-sm">삭제</button>
                                                    <button type="button" onclick="update_comment(${num})" class="jm_btn btn-secondary btn-sm">수정</button>
                                                </blockquote>
                                            </div>
                                        </div>`
                } else {
                    temp_html = ``
                }
                $('#comment-list').append(temp_html)
            }
        }
    });
}

/*댓글 삭제 기능*/
function delete_comment(num) {
    $.ajax({
        type: "POST",
        url: "/jungmin/done",
        data: {
            num_give: num
        },
        success: function (response) {
             if (confirm("정말 삭제하시겠습니까??") === true){
                 alert(response["msg"])
                 window.location.reload()

     document.delete_comment.submit();

 }else{   //취소

     return false;

 }
        }
    });
}

/*댓글 수정 기능*/
function update_comment(num) {
    let comment = $('#comment').val()
    let name = $('#name').val()

    $.ajax({
        type: "POST",
        url: "/jungmin/update",
        data: {
            num_give: num,
            name_give: name,
            comment_give: comment
        },
        success: function (response) {
            alert(response["msg"])
            window.location.reload()
        }
    })
}

 

app.py

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

import certifi

ca = certifi.where()
from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@Cluster0.p5ctwmd.mongodb.net/Cluster0?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.dbsparta

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

# 댓글 추가 기능
@app.route("/jungmin", methods=["POST"])
def jungmin_post():
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']

    comment_list = list(db.jungmin.find({}, {'_id': False}))
    count = len(comment_list) + 1

    doc = {
        'name':name_receive,
        'comment':comment_receive,
        'num':count,
        'done':0
    }
    db.jungmin.insert_one(doc)

    return jsonify({'msg': '댓글 달기 완료!'})

# 댓글 조회 기능
@app.route("/jungmin", methods=["GET"])
def jungmin_get():
    comment_list = list(db.jungmin.find({}, {'_id': False}))
    return jsonify({'jmguestbook': comment_list})

# 댓글 삭제 기능
@app.route("/jungmin/done", methods=["POST"])
def delete_comment():
    num_receive = request.form['num_give']
    db.jungmin.update_one({'num':int(num_receive)},{'$set':{'done':1}})
    return jsonify({'msg': '댓글 삭제 완료'})


# 댓글 수정 기능
@app.route("/jungmin/update", methods=["POST"])
def member_update():
    num_receive = request.form['num_give']
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']
    db.jungmin.update_one({'num': int(num_receive)}, {'$set': {'name': name_receive}})
    db.jungmin.update_one({'num': int(num_receive)}, {'$set': {'comment': comment_receive}})
    return jsonify({'msg': '수정 완료!'})

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

'내일배움캠프 > TIL' 카테고리의 다른 글

22.11.21 TIL  (0) 2022.11.21
22.11.18 TIL  (0) 2022.11.18
22.11.17 TIL  (0) 2022.11.18
22.11.16 TIL  (0) 2022.11.16
22.11.14 TIL  (0) 2022.11.14

관련글

티스토리툴바