항해99/출항 준비

사전 스터디 프로젝트 (3)-참고

숲별 2022. 8. 24. 12:28
728x90

수정하기 서식을 최종적으로는 다혜님 코드로 하기로 했지만 민섭님 코드도 배울 점이 있어서 기록

<!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("http://www.travelnbike.com/news/photo/201708/44292_44437_1317.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;
        }

        .main-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;
        }
        .main-button {
            border: 2px solid white;
        }
        .page {
            height: 30px;
            float: right;
            margin: 15px 20px 0px 0px;
        }


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

            background-color: white;

            margin: 20px auto 0 auto;

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

            padding: 20px;

            display: none;
        }
        .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;
        }
        .patch {
            display: flex;
            flex-direction: row;
        }
        .patch > button {
            margin-left: auto;
        }
        .num {
            display: flex;
            flex-direction: row;
        }
        .card-title1 {
            display: none;
        }
        .mypost_patch {
            display: none;
        }
        .mypost_patch {
            max-width: 500px;
            width: 95%;

            background-color: white;

            margin: 20px auto 0 auto;

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

            padding: 20px;

            display: none;
        }
        .main-btns {
            display: flex;
            flex-direction: row;
        }
        .main-btns > button {
            margin-left: 10px;
        }
    </style>
    <script>

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

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

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

        function show_order() {
            $.ajax({
                type: 'GET',
                url: '/mars',
                data: {},
                success: function (response) {
                    let rows = response['info']
                    for (let i = 0; i < rows.length; i++) {
                        let num = rows[i]["num"]
                        let img = rows[i]['img']
                        let title = rows[i]['place']
                        let food = rows[i]['comment']
                        console.log(img, title, food, num)
                        let temp_html = ` <div class="col">
                                                <div class="card">
                                                    <img src="${img}" class="card-img-top" alt="..." style="height:230px;">
                                                    <div class="card-body">
                                                        <div class="patch">
                                                            <h5 class="card-title">${title}</h5>
                                                            <h5 class="card-title1" id="num1">${num}</h5>

                                                        </div>

                                                        <div class="num">
                                                            <p class="card-text"><button onclick="window.open('https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=${title}')" type="button" class="btn btn-outline-danger"">
                                                            정보
                                                            </button></p>

                                                        </div>
                                                       <class="card-text", small class="text-muted">근처 맛집</small>
                                                        <p class="card-text"><small class="text-muted">${food}</small></p>
                                                    </div>

                                                </div>
                                            </div>`
                        $('#trip').append(temp_html)
                    }
                }
            });
        }

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

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

        function patch_order() {
            let img1 = $('#img1').val()
            let place1 = $('#title1').val()
            let comment1 = $('#food1').val()
            let name = $('#name').val()
            if (img1 === '' || title1 === '' || food1 === '') {
                alert('빈칸을 입력해 주세요⛄')
            } else {
                $.ajax({
                    type: 'PATCH',
                    url: '/mars',
                    data: {img1_give: img1, title1_give: place1, food1_give: comment1, name_give: name},
                    // processData: false,
                    // contentType: false,
                    success: function (response) {
                        alert(response['msg'])
                        window.location.reload()
                    }
                });
            }
        }

    </script>

</head>

<body>
    <div class="head">
        <div class="mytitle">
            <div class="winter">
                <h1>가을(FALL)</h1>
                <div class="main-btns">
                    <button class="main-button" onclick="open_box()">작성하기</button>
                    <button type="button" class="btn btn-outline-light btn-sm" onclick="box_patch()">
                        수정하기
                    </button>
                </div>
            </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 class="mypost_patch" id="box_patch">
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="name" placeholder="name@example.com">
                <label for="img1">교체할 카드의 이름을 적어주세요.</label>
            </div>
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="img1" placeholder="name@example.com">
                <label for="img1">사진 URL</label>
            </div>
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="title1" placeholder="name@example.com">
                <label for="title1">이름</label>
            </div>
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="food1" placeholder="name@example.com">
                <label for="food1">맛집이름(추천메뉴)로 적어주세요</label>
            </div>

            <div class="mybtn">
                <button onclick="patch_order()" type="button" class="btn btn-dark">수정하기</button>
                <button onclick="patch_close()" 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="trip">

        </div>
    </div>

@app.route("/mars", methods=["PATCH"])
def web_mars_patch():
   name_receive = request.form['name_give']
   img1_receive = request.form['img1_give']
   place1_receive = request.form['title1_give']
   comment1_receive = request.form['food1_give']

   if img1_receive == "":
      del img1_receive

   if place1_receive == "":
      del place1_receive

   if comment1_receive == "":
      del comment1_receive

   try:
      db.trip_fall.update_one({'place': name_receive}, {'$set': {'img': img1_receive}})
   except:
      pass

   try:
      db.trip_fall.update_one({'place': name_receive}, {'$set': {'comment': comment1_receive}})
   except:
      pass
   try:
      db.trip_fall.update_one({'place': name_receive}, {'$set': {'place': place1_receive}})
   except:
      pass
   
   return jsonify({"msg": '수정 완료!'})

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

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

항해99 입학 시험과 언어 선택  (0) 2022.09.15
사전 스터디 프로젝트 (4)  (0) 2022.09.05
사전 스터디 프로젝트(3)  (0) 2022.08.24
사전스터디 프로젝트(2)  (0) 2022.08.19
사전스터디 프로젝트 내 파트 페이지  (0) 2022.08.17

'항해99/출항 준비'의 다른글

  • 현재글사전 스터디 프로젝트 (3)-참고

관련글

티스토리툴바