사전스터디 프로젝트(2)

항해99/출항 준비

사전스터디 프로젝트(2)

숲별 2022. 8. 19. 11:41

728x90

각자 해온 스타일을 보고 낫다 싶은 스타일을 결정해서 통일하기로 했다.

다혜님 스타일로 일단 맞추기로 했다.

https://yattong2.tistory.com/20

<!doctype html> 여행지 추천 | 겨울❄ 겨울(Winter) 작성하기 봄 여름 가을 겨울 사진 URL 이름 주소 맛집이름(추천메뉴)로 적어주세요 기록하기 닫기

yattong2.tistory.com

이것도 쉬운 작업이 아니였다..ㅎ

각자 db에 저장한 이름이 달랐고 db폴더명도 달랐다.

그 외에도 다양하게 class명들도 달랐는데 나중에 통일하려면 최대한 비슷한 게 낫겠다 싶어서

웬만하면 그대로 살렸다.

처음에 get, post 둘 다 안되서 바로잡는데 한참 걸렸다.

이것저것 넣고 빼고 바꿔서 결국 성공..!

|| : or(근데 이거 자판으로 어떻게 입력하나... 매번 복사해야하나?)

&& : and

! : not

빈칸시 알람뜨는 조건문을 보다가 연산자정리가 필요할 것 같아서 검색해봤다.

https://bebeya.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-AND-OR-NOT-%EB%85%BC%EB%A6%AC%EC%97%B0%EC%82%B0%EC%9E%90-%EC%A0%95%EB%A6%AC-%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84

자바스크립트 AND, OR, NOT 논리연산자 정리, 우선순위

1. 논리 연산자 종류 및 설명 OR (||) : 여러 개 중 한 개라도 true면 true를 반환합니다. 즉 모든 값이 false일 경우에만 false를 반환합니다. AND(&&) : 모든 값이 true면 treu를 반환합니..

bebeya.tistory.com

<!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=Gowun+Dodum&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
            }
        .mytitle {

            width: 100%;
            height: 250px;

            color: white;

            text-align: center;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FxUGnK%2FbtrJSmYYVQ0%2FwuctjLmh7hevnE4zOyHbl1%2Fimg.jpg");
            background-size: cover;
            background-position: center;
        }
        .head {
            position: sticky;
            top:0px;
            width: 100%;
            z-index:1;
        }
        .winter {
            height: 195px;
             display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
        }

        .winter > button {
            width: 200px;
            height: 50px;

            background-color: transparent;
            color: white;

            border-radius: 50px;
            border: 1px solid white;

            margin-top: 20px;

            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .winter > button:hover {
            border: 2px solid white;
        }
        .page {
            height: 30px;
            float: right;
            margin: 15px 20px 0px 0px;
        }


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

            margin: 20px auto 0 auto;

            box-shadow: 0px 0px 3px 0px gray;

            padding: 20px;

            display: none;
            background-color: white;
        }
        .mybtn {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

             margin-top: 10px;

        }
        .mybtn > button {
            margin-right: 10px;
        }
        .wrap {
            max-width : 1200px;
            margin: 20px auto 0px auto;
        }


    </style>
    <script>

        function open_box() {
            $('#post-box').show()
        }

        function close_box() {
            $('#post-box').hide()
        }

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

        function show_order() {
            $.ajax({
                type: 'GET',
                url: '/spring',
                data: {},
                success: function (response) {
                    let rows = response['springs']
                    for (let i = 0; i < rows.length; i++) {
                        let img = rows[i]['img']
                        let title = rows[i]['title']

                        let food = rows[i]['food']

                        let temp_html = ` <div class="col">
                                                <div class="card">
                                                    <img src="${img}" class="card-img-top" alt="..." style="height:230px;">
                                                    <div class="card-body">
                                                        <h5 class="card-title">${title}</h5>

${title}')">
                                                                정보
                                                            </button></p>
                                                                   <class="card-text", small class="text-muted">근처 맛집</small>
                                                        <p class="card-text"><small class="text-muted">${food}</small></p>
                                                    </div>
                                                </div>
                                            </div>`
                        $('#cards-box').append(temp_html)
                    }
                }
            });
        }

        function save_order() {
            let img = $('#img').val()
            let title = $('#title').val()

            let food = $('#food').val()

            if(img === '' || title === '' || address ==='' || food === '') {
                alert('빈칸을 입력해 주세요')
            } else {
                $.ajax({
                    type: 'POST',
                    url: '/spring',
                    data: {img_give: img, title_give: title, food_give: food},
                    success: function (response) {
                        alert(response['msg'])
                        window.location.reload()
                    }
                });
            }
        }
    </script>

</head>

<body>
    <div class="head">
        <div class="mytitle">
            <div class="winter">
                <h1>봄(spring)</h1>
                <button onclick="open_box()">기록하기</button>
            </div>

            <div class="page">
                <button onclick="location.href='http://forestar.shop/'" type="button" class="btn btn-outline-light btn-sm">
                    봄
                </button>
                <button onclick="location.href='http://sels-es.shop/'" type="button" class="btn btn-outline-light btn-sm">
                    여름
                </button>
                <button onclick="location.href='http://alstjq-prac.shop/'" type="button"
                        class="btn btn-outline-light btn-sm">
                    가을
                </button>
                <button onclick="location.href='http://sparta4.shop/'" type="button" class="btn btn-outline-light btn-sm">
                    겨울
                </button>
            </div>
        </div>

        <div class="mypost" id="post-box">
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="img" placeholder="name@example.com">
                <label for="img">사진 URL</label>
            </div>
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="title" placeholder="name@example.com">
                <label for="title">이름</label>
            </div>

            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="food" placeholder="name@example.com">
                <label for="food">맛집이름(추천메뉴)로 적어주세요</label>
            </div>

            <div class="mybtn">
                <button onclick="save_order()" type="button" class="btn btn-dark">기록하기</button>
                <button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
            </div>
        </div>
    </div>

    <div class="wrap">
        <div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">

        </div>
    </div>
</body>
</html>

CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인

Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말이다.

수정하기

db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

지우기

db.users.delete_one({'name':'bobby'})

기능... 나 추가할 수 있을까..?

https://stackoverflow.com/questions/70221729/how-to-update-mongodb-using-button-in-html-pymongo

how to update mongodb using button in html, pymongo

I have a base.html that has items, and button for user to click. <p class="card-text">{{data[0].name}}</p> <...

stackoverflow.com

홈화면 만들어보는데 버튼에 이미지를 넣는 법을 모르겠어서 검색!

참고:https://ethank.tistory.com/entry/%EC%88%98%EB%8F%99%EC%9C%BC%EB%A1%9C-%EB%B2%84%ED%8A%BC%EC%97%90-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%84%A3%EA%B8%B0

웹페이지 버튼에 이미지 넣기

HTML에서 수동으로 이미지 버튼을 넣기 위한 방법을 이해하기 위한 Snippet 이다. CSS 의 background-image 기능을 이용해서 집어 삽입한다. HTML 1 cs CSS 1 2 3 4 5 6 7 8 9 10 11 input.button-add { ..

ethank.tistory.com

오류메세지 - AssertionError: View function mapping is overwriting an existing endpoint function

하나의 파이썬 파일에 동일한 함수가 선언되어있어서 발생함.

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

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

ㅎㅎ 밑에 home을 spring으로 바꿨어야 했는데 깜박함.

...spring은 밑에 get, post로 사용해서

spring trip으로 부랴부랴 바꿈..ㅎ

출처:https://m.blog.naver.com/imcjpak1k/221626800909

AssertionError: View function mapping is overwriting an existing endpoint function: user.logout

오류메세지 : AssertionError: View function mapping is overwriting an existing endpoint function ...

blog.naver.com

박스에 그림자 효과 주기

https://www.codingfactory.net/10628

CSS / box-shadow / 박스에 그림자 효과 만드는 속성

개요 box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 box-shadow: none | x-position y-position blur spread color | inset | initial | inhe

www.codingfactory.net

css에

input.spring이나 .spring이나 같은 거였구나..ㅎ

        html::after {
            width: 100%;
            height: 100%;

            content: "";
            background: url("https://content.presspage.com/uploads/685/1920_paragliding3-779643.jpg?10000");
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            opacity: 0.5;
            background-size: cover;

        }

배경이미지 넣고 투명하게

https://codingbroker.tistory.com/58

[HTML, CSS] opacity로 요소, 배경화면 투명하게(흐리게)하는 방법, 자식 요소에 같이 적용되는 문제

CSS의 opacity를 이용하여 HTML의 요소를 투명하게 만드는 방법과 자식 요소는 제외하고 배경화면만 투명하게 만드는 방법에 대해서 살펴보겠습니다. div와 그 자식 요소 h1이 있습니다. <!DOCTYPE html> H

codingbroker.tistory.com

배경이미지 꽉차게

https://happycgi.tistory.com/984

[해피CGI][cgimall] 하나의 배경이미지를 전체화면에 맞게 출력하기

한개의 배경이미지로 브라우저 화면의 크기에 맞게 꽉차서 출력이 되는 css 입니다. html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-si..

happycgi.tistory.com

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>여행지 추천</title>
    <style>

        html::after {
            width: 100%;
            height: 100%;
            content: "";
            background: url("https://content.presspage.com/uploads/685/1920_paragliding3-779643.jpg?10000");
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            opacity: 0.7;
            background-size: cover;

        }


        .title{
            display: flex;
            justify-content: center;
        }
        .buttons{
            margin-top: 80px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        input{
            font-size: 30px;
            text-shadow: 2px 2px 2px gray;
            color : white;
            border:none;
            cursor:pointer;
            width: 300px;
            height: 300px;
            margin-left:16px;
            vertical-align:middle;
            border-radius: 10px;
            box-shadow: 5px 5px 5px 1px gray
        }



        .spring{
            background-image:url(https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FxUGnK%2FbtrJSmYYVQ0%2FwuctjLmh7hevnE4zOyHbl1%2Fimg.jpg);
            background-size: cover;

        }
        .spring:hover{
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FxUGnK%2FbtrJSmYYVQ0%2FwuctjLmh7hevnE4zOyHbl1%2Fimg.jpg");

        }


        .summer{
            background-image:url(https://gscaltexmediahub.com/wp-content/uploads/2022/04/220420_%EB%B9%84%EC%B9%98%EC%BD%94%EB%B0%8D_2.jpg);
            background-size: cover;

        }
        .summer:hover{
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://gscaltexmediahub.com/wp-content/uploads/2022/04/220420_%EB%B9%84%EC%B9%98%EC%BD%94%EB%B0%8D_2.jpg");
        }

        .fall{
            background-image:url(https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg);
            background-size: cover;
        }
        .fall:hover{
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg");
        }

        .winter{
            background-image:url(https://img1.daumcdn.net/thumb/R1280x0.fjpg/?fname=http://t1.daumcdn.net/brunch/service/user/7Zdv/image/UjeUHSNbPXGWHOiBh_3bJJflcpw.jpeg);
            background-size: cover;
            background-position: left;
        }
        .winter:hover{
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://img1.daumcdn.net/thumb/R1280x0.fjpg/?fname=http://t1.daumcdn.net/brunch/service/user/7Zdv/image/UjeUHSNbPXGWHOiBh_3bJJflcpw.jpeg");
        }

    </style>

</head>
<body class="container">
<div>
    <div class="title">

        <h1>이번 계절 어디로 떠나볼까?</h1>
    </div>
    <div class="buttons">
        <input type="button" value="봄" class="spring" onclick="location.href='/springtrip'"/>
        <input type="button" value="여름" class="summer" onclick="location.href='http://sels-es.shop/'"/>
        <input type="button" value="가을" class="fall" onclick="location.href='http://alstjq-prac.shop/'"/>
        <input type="button" value="겨울" class="winter" onclick="location.href='http://sparta4.shop/'"/>
    </div>
</div>
</body>
</html>

회원가입 페이지 만들기

https://scribblinganything.tistory.com/196

flask와 mongodb를 사용해서 회원가입페이지 간단히 만들어보기(signup)

회원 가입 페이지 만들기 이번예제의 목표는 flask와 mongodb를 연동해서 사용하는 것이다. 구성은 가입할수 있는 html 페이지를 만들고 가입 신청을 하면 mongodb에 저장하고 저장한 값을 print로 읽어

scribblinganything.tistory.com

만들면서 느끼는 점은 개발 능력이란 얼마나 많이 검색해보고 적용해보느냐로 늘어나는 것 같다.

'항해99 > 출항 준비' 카테고리의 다른 글

사전 스터디 프로젝트 (4) (0)	2022.09.05
사전 스터디 프로젝트 (3)-참고 (0)	2022.08.24
사전 스터디 프로젝트(3) (0)	2022.08.24
사전스터디 프로젝트 내 파트 페이지 (0)	2022.08.17
여행 사진 (0)	2022.08.17

현재글사전스터디 프로젝트(2)

숲

Java, 패스트캠퍼스, 백엔드, 스파르타코딩클럽 #밤샘코딩 #스파르톤 #제3회스파르톤 #코딩공부, 직장인 자기계발, 강의 추천, AWS #EC2 #JAVA #설치, 스파르타코딩클럽 후기, 스파르타 스터디 수강 후기,

Today :
Yesterday :

숲