Tiny Star

🏕️내일배움캠프/📂팀원 소개 페이지 만들기(23.05.15)

팀원 소개 페이지 5일차-코드 발표 및 회고

청크 2023. 5. 19. 18:12

스파르타 코딩클럽_내일 배움 캠프 spring 트랙 6기

[프로젝트] 팀 소개페이지 미니 프로젝트

2023.05.15 ~ 2023.05.19

<프로젝트 정보>

개발도구 : Visual Studio Code

프로그래밍 언어 : Python

데이터베이스 : MongoDB

프레임워크 : Flask

라이브러리 : venv

와이어프레임 : Figma

 

<프로젝트 내용>

첫 프로젝트의 마지막 날.프로젝트 발표를 위해 코드를 최종으로 완성했다.

 

일주일간 좋은 팀원들과 같이 프로젝트를하면서 많은 걸 배웠다.

TIL에도 작성했던 내용을 정리해본다면 기술적으로는 git hub, figma, miro 등 다양한 툴을 배우게 되었는데,

새벽까지 공부하시면서 팀원들에게 git을 알려주신 팀원 한 분 덕분에 모두가 git hub를 어느정도 사용할 수 있게 되었다.

 

혼자 공부했다면 절대 몰랐던 경험들을 몸소 배울 수 있어서 너무 귀중한 시간이었고, 

일주일동안 함께 해준 우리 팀원들에게 너무 감사하다.

길지 않은 시간이었지만 그새 정이들어 또 다른 조가 되어야하는게 너무 아쉽지만이렇게 웃으면서 배울 수 있다면

우리 팀원 모두 좋은 개발자가 될 것이라고 믿는다.

제출 끝내고 폭주하는 해맑은 우리팀!

 

우리 팀의 KPT

· 개요

    - Project : E1I4 - 팀 소개, 팀원 소개 상세페이지 구현

    - Stack : Python Flask , Html, CSS, JavaScripts

· Keep

   - 같은 공간에서 아이디어를 와이어프레임을 통해 함께 구상하며 기획한 점

   - 피그마, 깃허브, 미로, 등등 잘하는 사람이 혼자하지 않고, 다함께 해보는 경험

   - 각자 의견을 존중하고 소통이 원활했던 점

   - 문제가 생기면 팀원 모두가 머리를 맞대 고민했던 점

·Problem

   - 문제

          1. github에서 sink fork 를 하지 않고 pull 시 권한 오류  ->git compare& pull request 버튼 발생하지 않아도 git pull request 등록하기

          2. git을 통한 협업

          3. MaC, Window 간 호환성

    - 원인

          1. Git 사용 경험 부족

          2.다양한 운영체제를 통한 협업 경험 전무

· Try

    - 깃허브 하나의 repo에 branch 들을 통해 체계적인 버전관리하기

    - 업무 우선순위를 매기고 실행하기

    - 기본 개념 숙지

        : HTML,CSS,GIT 등 그리고 앞으로 배울 자바까지 기본이 없으면 헤메는 시간이 길어짐.

          책, 공식문서 등 기본개념 정립 후 활용한다면 중요기능과 중  요하게 사용하는 기능은 대부분 구현 가능하고,

          퀄리티 있는 작업물을 제작할 수 있을 듯 숲을 보고, 나무를 보자

 

<index.html>

<!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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Document</title>


    <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://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- 구글 폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Oswald:wght@500&family=Rampart+One&display=swap"
        rel="stylesheet">
    <title> E1I4 </title>

    <style>
        /* 구글 폰트 */
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Oswald:wght@500&display=swap');



        /* 전체 폰트 지정 */
        #nav,
        #bookmarkA,
        #bookmarkB,
        #bookmarkC,
        #bookmarkD {
            font-family: 'Noto Sans KR', sans-serif;
        }

        /* -------------------------------------- 시작 : OOO -------------------------------------- */
        /* 전체 바디 사이즈 1320px */
        .wrap {
            /* 웹종반 1-9 강의 참고 */
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 1320px;
            height: auto;
            /* 나중에 값 변경할 것 */
            margin: 0px auto 0px auto;
            text-align: center;
        }

        /* 메인 배너 전체 사이즈와 정렬 */
        #main_banner {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            width: 1320px;
            height: 300px;
        }

        /* 메인 타이틀 글자 설정 */
        #main_title {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            font-size: 120px;
            /* font-weight: bold; */
            letter-spacing: 4px;

            font-family: 'Rampart One', cursive;
            color: black;
            /* text-shadow: -1px 0 #000, 0 2.5px #000, 1.5px 0 #000, 0 -1px #000; */
        }

        /* 네비게이션바 크기, 색*/
        #nav {
            width: 1320px;
            height: 50px;
            background-color: #FF9494;

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding-top: 15px;
        }

        #nav>ol {
            display: flex;
            flex-direction: row;
            margin-right: 40px;
        }

        #nav>ol>li {
            display: flex;
            flex-direction: row;
            margin: 0px 53px 0px 53px;
            list-style: none;
            font-size: 28px;
        }

        #nav>ol>li>a {
            color: white;
            text-decoration: none;
        }

        #nav>ol>li>a:hover {
            text-decoration: none;
            color: black;
        }

        /* 백설이 탑으로 가는 버튼 */
        #top100 {
            width: 50px;
            height: 50px;
            border: 1px solid black;
            z-index: 10;
            display: flex;
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            width: 10px;
            height: 10px;
            border: 1px solid black;

            z-index: 10;

            display: flex;
            position: fixed;
            bottom: 110px;
            right: 200px;

            border: 0px;
        }

        #top100>img {
            width: 100px;
            height: 100px;
            border-radius: 15px;
        }

        #top100>p {
            font-size: 20px;
            text-decoration: none;
        }

        #top1 {
            text-decoration: none;
            color: black;
        }

        #top1>a:hover {
            color: black;
        }

        /* 백설이 애니메이션 관련코드(코딩네컷 완주보상) */
        @keyframes rtanee {
            0% {
                bottom: 0px;
            }

            100% {
                bottom: 100px;
            }
        }

        .white {
            position: fixed;
            /* right: 10px;
        bottom: 10px; */

            /* 아이콘 이동 애니메이션 관련 설정 */
            animation-name: rtanee;
            animation-duration: 2s;
            animation-duration: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-fill-mode: forwards;
        }

        .white {
            width: 150px;
            cursor: pointer;
        }

        /* -------------------------------------- 끝 : OOO -------------------------------------- */

        /* -------------------------------------- 시작 : OOO -------------------------------------- */
        .team-body {
            box-sizing: border-box;
            width: 920px;
            height: 209px;
            border: 2px solid #000000;
            margin: auto;

            justify-content: center;
            align-items: center;
            font-size: 20px;
            line-height: 24px;
            text-align: center;

            padding-top: 10px;
        }

        #imoji {
            font-size: 40px
        }

        .card-title {
            margin: 150px auto 30px auto;
        }

        .card-body {
            width: 400px;
            background-color: #FFF5E4;
            height: 467px;
            left: 760px;
            top: 1086px;

            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: 24px;

            line-height: 150%;
            text-align: left;
        }

        /* -------------------------------------- 끝 : OOO -------------------------------------- */

        #h150 {
            height: 300px;
        }

        /* -------------------------------------- 시작 : OOO님 -------------------------------------- */
        .title {
            padding: 30px;
        }

        .name {
            margin: auto;
        }

        .card {
            border-color: white;
        }

        .img {
            width: 200px;
            height: 200px;
            border-radius: 100%;
        }

        /* -------------------------------------- 끝 OOO님 -------------------------------------- */

        /* -------------------------------------- 시작 OOO님 -------------------------------------- */
        /* 방명록 작성 */
        .formA {
            width: 1280px;
            height: 640px;
            background: #FFE3E1;
            text-align: left;
            padding: 60px 50px 50px 50px;
            margin-right: 70px;
            margin-left: 70px;
        }

        label {
            font-size: 20px;
        }

        #inputbutton {
            background-color: white;
            border: 0.5px solid gainsboro;
            height: 60px;
            margin-left: 1000px;
            margin-top: 0px;
        }

        #name {
            width: 300px;
            height: 40px;
        }

        textarea {
            width: 100%;
            height: 250px;
            padding: 12px 20px;
            box-sizing: border-box;
            border: 2px solid white;
            border-radius: 4px;
            background-color: white;
            font-size: 16px;
            resize: none;
        }

        form {
            margin-left: 20px;
        }

        /* 방명록 출력 부분 */

        #comment-list {
            background-color: #FFE3E1;
            height: 200px;
        }

        .commentlist {
            width: 1280px;
            height: 150px;
            display: flex;
            flex-direction: row;
            background: #FFE3E1;
            padding-top: 0px 70px 0px 70px;
            
            
        }

        .commentname {
            background-color: white;
            width: 194px;
            height: 100px;
            margin: 5px 30px 5px 30px;
            overflow: scroll;
        }

        .commentname>p {
            padding: 40px;
        }

        .comment {
            background-color: white;
            margin: 5px 30px 5px 0px;
            height: 100px;
            width: 980px;
            overflow: scroll;
        }

        .comment>p {
            text-align: left;
            padding: 40px 0px 0px 40px;
            color: #FF9494;
        }
    </style>

    <script>
        /* -------------------------------------- 아래는 OOO님 : guset book --------------------------------------*/
        function save_comment() {
            let name = $('#name').val()
            let comment = $('textarea').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()
            });
        }

        $(document).ready(function () {
            show_comment();
        });

        function show_comment() {
            fetch('/guestbook').then((res) => res.json()).then((data) => {
                let rows = data['result']
                rows.forEach((a) => {
                    let name = a['name']
                    let comment = a['comment']
                    let temp_html = `
                                    <div class="commentlist" id ="linetest">
                                    <div class="commentname"><p>${name}</p></div>
                                    <div class="comment"><p>${comment}</p></div>
                                    </div>`
                    $('#comment-list').append(temp_html)
                })

            })
        }
        // -------------------------------------- 여기까지 OOO님 --------------------------------------
    </script>
</head>

<body>
    <!-- OOO 시작-->
    <div class="wrap" id="top1">
        <div id="main_banner">
            <div>
                <div id="bookmarkA">
                    <h1 id="main_title">
                        <p>E1I4</p>
                    </h1>
                </div>
            </div>
        </div>
        <div id="nav">
            <ol>
                <li><a href="#bookmarkA">Intro</a></li>
                <li><a href="#bookmarkB">E1I4</a></li>
                <li><a href="#bookmarkC">멤버 소개</a></li>
                <li><a href="#bookmarkD">방명록</a></li>
            </ol>
        </div>
        <a href="#top1" id="top1">
            <div id="top100">
                <img src="\static\image\백설.png" class="white">
                <p>TOP</p>
            </div>
        </a>
        <!-- OOO 끝-->

        <!-- OOO 시작-->
        <div class="teamintro">
            <img src="/static/image/title1_2.png" style="margin: 109px 200px auto 200px">
            <div class="team-body">
                <p>안녕하세요
                    <br>저희는 E 1명과 I 4명으로 구성된 화목한 5남매(+1) 입니다
                <p id="imoji">🙋🏻‍♂️🧚🏻‍♂️👩🏻🐶👩🏻‍🦰👰🏻‍♀️</p>
                <br>모두 비전공자이고 나이도 다르지만, 프로젝트를 완성하고자
                <br>의기투합하여 한 마음 한 뜻으로 똘똘 뭉쳤습니다 V
                </p>
            </div>
        </div>
        <div class="teaminfo" id="bookmarkB">
            <div class="row row-cols-1 row-cols-md-3 g-4">
                <div class="col">
                    <div class="card h-100">
                        <h2 class="card-title">TMI / 우리팀의 특징</h2>
                        <div class="card-body">
                            <img src="/static/image/Frame 2.jpg" class="card-img-top" alt="...">
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100">
                        <h2 class="card-title">궁극적인 목표</h2>
                        <div class="card-body">
                            <br> ✔ Git 사용법 숙지하기
                            <br> ✔ 내일배움캠프 포기하지 않고 끝까지 수료하기!
                            <br> ✔ 프론트와 백의 연결관계 이해하기
                            <br> ✔ POST, GET 사용법 마스터하기
                            <br> ✔ ch1 미니 project 구조 정확히 이해하고 만들기
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100">
                        <h2 class="card-title">우리팀의 규칙</h2>
                        <div class="card-body">
                            <br> ✔ 건강이 제일 중요! 밥 세끼 꼬박꼬박 잘 챙겨먹기💕
                            <br> ✔ 막히는 부분이 있다면 혼자 머리싸매지 말고 팀원과 같이 해결!
                            <br> ✔ 13-14시 점심 시간, 18-19시 저녁 시간 🐷
                            <br> ✔ 20시 Git Merge 후 팀원들과 함께 코드리뷰 , 상세 피드백하기
                            <br> ✔ 20시 40분 개발 일지(TIL) 작성하고 퇴실시간 맞춰 퇴실하기
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- OOO 끝-->
        <div style="height: 200px;" id="bookmarkC">

        </div>
        <!-- OOO 시작-->
        <div class="title">
            <h2>MEMBER</h2>
        </div>
        <div class="member">
            <div class="row row-cols-1 row-cols-md-5 g-2">
                <div class="col">
                    <div class="card h-100">
                        <a href={{url_for('sub1')}}>
                            <img src="" class="img"
                                alt="..."></a>
                        <div class="name">
                            <h3>OOO</h3>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100">
                        <a href={{url_for('sub2')}}>
                            <img src="" class="img"
                                alt="..."></a>
                        <br>
                        <div class="name">
                            <h3>OOO</h3>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100">
                        <a href={{url_for('sub3')}}>
                            <img src="" class="img"
                                alt="..."></a>

                        <br>
                        <div class="name">
                            <h3>OOO</h3>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100">
                        <a href={{url_for('sub4')}}>
                            <img src="" class="img"
                                alt="..."></a>
                        <br>
                        <div class="name">
                            <h3>OOO</h3>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100">
                        <a href={{url_for('sub5')}}>
                            <img src="" class="img"
                                alt="..."></a>
                        <br>
                        <div class="name">
                            <h3>OOO</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- OOO -->

        <div id="h150">
            &nbsp;
        </div>

        <!-- OOO님  시작-->
        <div class="formA" id="bookmarkD">
            <h2> 방명록 작성 </h2>
            <br>
            <form>
                <label for="name">닉네임</label><br>
                <input type="text" id="name" value=""><br><br>

                <label for="comment" id="name11">내용을 입력하세요</label><br>
                <textarea id="name11" value=""></textarea>
                <input type="button" value="작성완료" onclick="save_comment()" id="inputbutton">

            </form>
        </div>
        <br>
        <br>

        <div id="comment-list">
            <h2>방명록</h2>
            <div>
                <div class="commentlist" id="linetest">
                    <div class="commentname">
                        <p>seed0335</p>
                    </div>
                    <div class="comment">
                        <p>모두 수고하셨습니다.</p>
                    </div>
                </div>
            </div>

            <div>
                <div class="commentlist" id="linetest">
                    <div class="commentname">
                        <p>kind0132</p>
                    </div>
                    <div class="comment">
                        <p>짧은 시간 동안 멋진 결과물을 만들었군요.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- OOO 끝 -->
</body>

</html>

<sub.html>

<!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 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>

    <link href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap" rel="stylesheet" />

    <title>상세페이지</title>

    <style>
        ::selection {
            user-select: none
                /* 드래그 못하게 */
        }

        ::-webkit-scrollbar {
            width: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #2f3542;
            border-radius: 10px;
            background-clip: padding-box;
            border: 2px solid transparent;
        }

        .container::-webkit-scrollbar-track {
            background-color: grey;
            border-radius: 10px;
            box-shadow: inset 0px 0px 5px white;
        }

        .container {
            /* position: absolute;  OOO 주석처리*/
            width: 1140px;
            height: 890px;
            left: 390px;
            top: 29px;
        }

        .imoge {
            position: absolute;
            width: 49px;
            height: 41px;
            left: 835px;
            top: 37px;

            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: 40px;
            line-height: 85px;
            /* background-color: red; */
            text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        }

        .photo {
            position: absolute;
            width: 213px;
            height: 219px;
            left: 527px;
            top: 29px;
            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
            border-radius: 50px;
            background-image: url('https://ca.slack-edge.com/T043597JK8V-U053UK80VR8-cbc4d9e1783b-512');
            background-repeat: no-repeat;
            background-position: center; 
        }

        .address {
            position: absolute;
            left: 527px;
            top: 250px;
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 567;
            font-size: 20px;
            line-height: 56px;
        }

        a:link {
            color: black;
            text-decoration: none;
        }

        a:visited {
            color: black;
        }

        a:hover {
            color: red;
        }

        .name {
            position: absolute;
            width: 250px;
            height: 77px;
            left: 890px;
            top: 50px;
            font-family: 'Inter';
            font-weight: 600;
            font-size: 60px;
            line-height: 77px;
        }

        .about_me_area {
            position: absolute;
            width: 288px;
            height: 158px;
            left: 905px;
            top: 130px;
            background: transparent;
        }

        .about_me_text {
            font-style: normal;
            font-weight: 400;
            font-size: 25px;
            line-height: 20px;
        }

        #tmi_area {
            box-sizing: border-box;
            position: absolute;
            width: 1140px;
            height: 449px;
            left: 390px;
            top: 320px;
            background: #FFF5E4;
            border: 1px solid #FFF5E4;
            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
            border-radius: 80px;
        }

        .profile {
            position: absolute;
            left: 80px;
            top: 40px;
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 567;
            font-size: 48px;
            line-height: 56px;
            font-variant: small-caps;
        }

        .text {
            background-color: transparent;
            position: absolute;
            left: 100px;
            top: 100px;
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: 25px;
        }

        .text:hover {
            outline: none;
            cursor: pointer
        }

        details {
            color: gray;
        }

        summary {
            color: black;
        }

        summary::marker {
            content: "+ ";
            font-family: monospace;
            font-size: 16px;
            font-weight: bolder;
        }

        details[open] summary::marker {
            content: "- ";
        }

        .button {
            border: none;
            position: absolute;
            width: 90px;
            height: 90px;
            left: 1383px;
            top: 791px;

            background: #FFD1D1;
            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
            border-radius: 35px;
        }

        .button:hover {
            background: #e6a1a1;
        }

        .button:active {
            transform: scale(0.95);
        }
    </style>

    <script>
        window.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('details').forEach(function (item) {
                item.addEventListener("toggle", event => {
                    let toggled = event.target;
                    if (toggled.attributes.open) {
                        document.querySelectorAll('details[open]').forEach(function (opened) {
                            if (toggled != opened)
                                opened.removeAttribute('open');
                        });
                    }
                })
            });
        });

        $(document).ready(function () {
            show_profiles();
            console.log("ready")
        });
        function show_profiles() {
            fetch('subA1').then(res => res.json()).then(data => {
                let rows = data['result']
                $('#container').empty();
                rows.forEach((a) => {  
                    let imoge = a['imoge']
                    let blog1 = a['blog1']
                    let blog2 = a['blog2']
                    let name = a['name']
                    let about_me = a['about_me']
                    let q1 = a['Q1']
                    let q2 = a['Q2']
                    let q3 = a['Q3']
                    let q4 = a['Q4']

                    let temp_html = `<div>
                                        <!-- 각자 상징 이모티콘으로 바꾸시면 될 듯함 -->
                                        <text class="imoge">${imoge}</text>
                                    </div>
                                    <!-- 사진은 .photo에서 백그라운드 값 바꾸시면 돼요 -->
                                    <div class="photo"></div> 
                                    <!-- 주소는 하이퍼링크 입니다 -->
                                    <a class="address" href="${blog1}">${blog2}</a>
                                    <div>
                                        <text class="name">${name}</text>
                                    </div>
                                    <div id="test" class="about_me_area">
                                        <text class="about_me_text">${about_me}</text>
                                    </div>

                                    <div id="tmi_area">
                                        <text class="profile">Profile</text>
                                        <div class="text">
                                            <details>
                                                <summary>사용할 수 있는 언어</summary>
                                                <li>${q1}</li>
                                            </details>

                                            <details>
                                                <summary>자신의 장점</summary>
                                                <li>${q2}</li>
                                            </details>

                                            <details>
                                                <summary>나의 MBTI</summary>
                                                <li>${q3}</li>
                                            </details>

                                            <details>
                                                <summary>TMI</summary>
                                                <li>${q4}</li
                                                </details>
                                            </div>
                                        </div>
                                        <button type="button" onclick="location.href='http://localhost:5000/' " class="button">뒤로가기</button>
                                    </div>`
                    $('#container').append(temp_html)
                })
            })
        }

    </script>
</head>

<body>
    <div class="container" id="container">
        <div>
            <!-- 각자 상징 이모티콘으로 바꾸시면 될 듯함 -->
            <text class="imoge">🐶</text>
        </div>
        <!-- 사진은 .photo에서 백그라운드 값 바꾸시면 돼요 -->
        <div class="photo"></div> 
        <!-- 주소는 하이퍼링크 입니다 -->
        <a class="address" href="https://velog.io/@hoy503007">www.naver.com</a>
        <div>
            <text class="name">홍길동</text>
        </div>
        <div id="test" class="about_me_area">
            <text class="about_me_text">자기소개</text>
        </div>

        <div id="tmi_area">
            <text class="profile">Profile</text>
            <div class="text">
                <details>
                    <summary>사용할 수 있는 언어</summary>
                    <li></li>
                </details>

                <details>
                    <summary>자신의 장점</summary>
                    <li></li>
                    <li></li>
                </details>

                <details>
                    <summary>나의 MBTI</summary>
                    <li>AAAA</li>
                </details>

                <details>
                    <summary>TMI</summary>
                    <li></li>
                    <li></li>
                </details>
            </div>
        </div>
        <button type="button" onclick="location.href='http://localhost:5000/' " class="button">뒤로가기</button>
    </div>
</body>

<app.py>

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

# 맥 사용자는 풀어서 사용하세요 - 본인 mongoDB로 변경하기
# import certifi
# ca = certifi.where()

# mongoDB는 OOO - 본인 mongoDB로 변경하기
from pymongo import MongoClient
# OOOmongoDB
client = MongoClient('')
# OOOmongoDB
client = MongoClient('')
# OOOmongoDB
client = MongoClient('')
# OOOmongoDB
client = MongoClient('')
# OOOmongoDB
client = MongoClient('')
db = client.dbsparta

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

# OOO 서브 페이지 동작 관련 코드
@app.route("/myprofile/new", methods=["GET"])
def post_profile():
    return render_template('sub.html', member_id = id)

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

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

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

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

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

# 1
# 데이터 보내기
@app.route("/subA1", methods=["GET"])
def subA1():
    profiles_data = list(db.profiles.find({'name':""},{'_id':False}))
    return jsonify({'result': profiles_data})

# 2
# 데이터 보내기
@app.route("/subA2", methods=["GET"])
def subA2():
    profiles_data = list(db.profiles.find({'name':""},{'_id':False}))
    return jsonify({'result': profiles_data})

# 3
# 데이터 보내기
@app.route("/subA3", methods=["GET"])
def subA3():
    profiles_data = list(db.profiles.find({'name':""},{'_id':False}))
    return jsonify({'result': profiles_data})

# 4
# 데이터 보내기
@app.route("/subA4", methods=["GET"])
def subA4():
    profiles_data = list(db.profiles.find({'name':""},{'_id':False}))
    return jsonify({'result': profiles_data})

# 5
# 데이터 보내기
@app.route("/subA5", methods=["GET"])
def subA5():
    profiles_data = list(db.profiles.find({'name':""},{'_id':False}))
    return jsonify({'result': profiles_data})

# OOO -----------------------------------------------------------------
# 방명록 저장하는 곳(OOO)
@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.guestbook_comments.insert_one(doc)
   return jsonify({'msg': '방명록이 등록되었습니다!'})

# 방명록 mongDB에서 index.html로 데이터 전송(OOO)
@app.route("/guestbook", methods=["GET"])
def guestbook_get():
    all_comments = list(db.guestbook_comments.find({},{'_id':False}))
    #db.user.find 에서 users 바꿔야한다 일단 강의대로 fan으로 저장함
    #fan -> guestbool_comments 로 변경
    return jsonify({'result': all_comments})

# mac 사용자는 포트5001로 변경하세요.
if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

<write.py>

from pymongo import MongoClient

import certifi
ca = certifi.where()

#client = MongoClient('')
client = MongoClient('')

db = client.dbsparta

doc = {
    'imoge':'🖥',                           
    'blog1' : 'n',
    'blog2' : 'n',
    'name' : 'n',
    'about_me':'n',
    'Q1':'n',
    'Q2':'n',
    'Q3':'n',
    'Q4':'n'
}
db.profiles.insert_one(doc) 

# OOO님 본인 데이터 저장해주세요. (위에 주소 본인DB로 변경 한 후 테스트하기)
# DB에 profiles가 없어서 오류가 나면 이 코드 주석 풀고 터미널 실행하기 (더미데이터)
저작자표시 비영리 변경금지

'🏕️내일배움캠프 > 📂팀원 소개 페이지 만들기(23.05.15)' 카테고리의 다른 글

귀여운 Spring A반 5조 모음 :)  (0) 2023.05.19
팀원 소개 페이지 4일차-몽고 DB에 개인 데이터 저장하고 연결해보기+멤버 이미지 연결 코드 수정(git 사용)  (0) 2023.05.18
팀원 소개 페이지 3일차-멤버 소개 git으로 코드 합치기  (0) 2023.05.17
팀원 소개 페이지 2일차-멤버 소개 html/css/onclick  (2) 2023.05.16
팀원 소개 페이지 1일차_S.A.와 와이어프레임 제작  (0) 2023.05.15

'🏕️내일배움캠프/📂팀원 소개 페이지 만들기(23.05.15)'의 다른글

  • 현재글팀원 소개 페이지 5일차-코드 발표 및 회고

관련글

티스토리툴바