8일차 (실습)

김건우·2021년 10월 5일
0

스파르타코딩클럽 - 웹 개발 종합반

목록 보기
15/20

@app.route('/memo', methods=['POST'])
def saving():
    url_receive = request.form['url_give']
    comment_receive = request.form['comment_give']

    url = url_receive

    headers = {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
    data = requests.get(url, headers=headers)

    soup = BeautifulSoup(data.text, 'html.parser')
    image = soup.select_one('meta[property="og:image"]')['content']
    title = soup.select_one('meta[property="og:title"]')['content']
    desc = soup.select_one('meta[property="og:description"]')['content']

    doc = {
        'image':image,
        'title':title,
        'desc':desc,
        'comment':comment_receive,
        'url':url
    }
    db.alone.insert_one(doc)

    return jsonify({'msg':'POST 연결되었습니다!'})

function postArticle() {
    let url = $('#post-url').val()
    let comment = $('#post-comment').val()

    $.ajax({
        type: "POST",
        url: "/memo",
        data: {url_give:url,comment_give:comment},
        success: function (response) { // 성공하면
            alert(response["msg"]);
            window.location.reload()
        }
    })
}

@app.route('/memo', methods=['GET'])
def listing():
    review_receive = list(db.alone.find({},{'_id':False}))
    return jsonify({'review':review_receive})

function showArticles() {
    $.ajax({
        type: "GET",
        url: "/memo?sample_give=샘플데이터",
        data: {},
        success: function (response) {
            let review = response['review']

            for (let i = 0 ; i < review.length ; i ++)
            {
                let title = review[i]['title']
                let url = review[i]['url']
                let desc = review[i]['desc']
                let image = review[i]['image']
                let comment = review[i]['comment']

                let temp_html = ` <div class="card">
        <img class="card-img-top"
             src=${image}
             alt="Card image cap">
        <div class="card-body">
            <a target="_blank" href=${url} class="card-title">${title}</a>
            <p class="card-text">${desc}</p>
            <p class="card-text comment">${comment}</p>
        </div>`
                $('#cards-box').append(temp_html)


            }
        }
    })
}


from flask import Flask, render_template, jsonify, request

app = Flask(__name__)

from pymongo import MongoClient

client = MongoClient('localhost', 27017)
db = client.dbhomework


## HTML 화면 보여주기
@app.route('/')
def homework():
    return render_template('index.html')


# 주문하기(POST) API
@app.route('/order', methods=['POST'])
def save_order():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': '이 요청은 POST!'})


# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
    sample_receive = request.args.get('sample_give')
    print(sample_receive)
    return jsonify({'msg': '이 요청은 GET!'})


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


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <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=Yeon+Sung&display=swap" rel="stylesheet">
    <meta charset="UTF-8">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
    <title>스파르타코딩클럽 | 원페이지 쇼핑몰</title>
    <style>
        * {
            font-family: 'Yeon Sung', cursive;
        }

        .top_margin {
            margin: 35px;
        }

        .wrap {
            width: 500px;
            margin: auto;
        }

        .item_info {
            width: 500px;
            margin-top: 20px;
            margin-bottom: 10px;
        }

        .price {
            font-size: 20px;
        }

        .item_order {
            width: 450px;
            margin-top: 10px;
            margin-bottom: 20px;
        }

        .order {
            width: 100px;
            margin: auto;
            display: block;
        }

        .rate {
            color: blue;
            font-size: small;
        }
    </style>
    <script>
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                    let date = response['date']
                    let rate = response['rate']
                    let rate_text = `<p>${date}자 달러-원 환율 : ${rate}</p>`
                    $('#rate').append(rate_text)
                }
            })
        })

        function order() {
            alert('예약이 완료되었습니다.');
        }
    </script>
</head>

<body>
<div class="top_margin"></div>
<div class="wrap">

    <div class="card border-dark mb-3" style="max-width: 25rem;">
        <div class="card-header">유럽여행 4박 6일 패키지</div>
        <img class="card-img-top"
             src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSWKv4nuXL-ya4NdYocUTVHtF5uXgOVKCHF2Q&usqp=CAU"
             alt="Card image cap">
    </div>
    <div class="item_info">
        <h2>유럽여행 5박 6일 패키지 <span class="price">가격 : 600,000원 / 일</span></h2>
        <p>북유럽 4박 6일 패키지 / 온라인 특별가 / 왕복 항공권포함 / TAX및 유류할증료 변경가능 / 카드사별 무이자 / 성인 1인 1박기준</p>
    </div>
    <span class="rate" id=rate></span>
    <div class="item_order">
        <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-sm">주문자 이름</span>
            </div>
            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <button class="btn btn-outline-secondary" type="button">인수</button>
            </div>
            <select class="custom-select" id="inputGroupSelect03">
                <option selected></option>
                <option value="1">1명</option>
                <option value="2">2명</option>
                <option value="3">3명</option>
                <option value="3">4명</option>
            </select>
        </div>
        <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-sm">주소</span>
            </div>
            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
        </div>
        <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-sm">연락처</span>
            </div>
            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
        </div>
    </div>
    <div class="order">
        <button type="button" class="btn btn-primary" onclick="order()">예약하기</button>
<table class="table">
    <thead>
    <tr>
        <th scope="col">이름</th>
        <th scope="col">수량</th>
        <th scope="col">주소</th>
        <th scope="col">전화번호</th>
    </tr>
    </thead>
    <tbody id="order_table">

    </tbody>
</table>

    </div>
</div>

</body>
</html>

@app.route('/order', methods=['POST'])
def save_order():
    name_receive = request.form['name_give']
    person_receive = request.form['person_give']
    address_receive = request.form['address_give']
    phone_receive = request.form['phone_give']

    doc = {
        'name':name_receive,
        'person':person_receive,
        'address':address_receive,
        'phone':phone_receive
    }

    print(doc)
    db.orders.insert_one(doc)

    return jsonify({'msg': '주문이 완료되었습니다!'})

function order() {
    let name = $('#name').val();
    let person = $('#person').val();
    let address = $('#address').val();
    let phone = $('#phone').val();

    $.ajax({
        type: "POST",
        url: "/order",
        data: {name_give: name, person_give: person, address_give: address, phone_give: phone},
        success: function (response) {
            alert(response["msg"]);

        }
    })
}


@app.route('/order', methods=['GET'])
def view_orders():
    order = list(db.orders.find({},{'_id':False}))
    return jsonify({'orders': order})


function order_listing() {
    $.ajax({
        type: "GET",
        url: "/order",
        data: {},
        success: function (response) {
            let order = response['orders']
            for (let i = 0; i < order.length; i++) {
                let name = order[i]['name'];
                let person = order[i]['person'];
                let address = order[i]['address'];
                let phone = order[i]['phone'];
                let temp_html = `<tr>
                             <th scope="row">${name}</th>
                             <td>${person}</td>
                             <td>${address}</td>
                             <td>${phone}</td>
                             </tr>`
                console.log(temp_html)
                $('#order_table').append(temp_html)
            }
        }
    })
}

from flask import Flask, render_template, jsonify, request

app = Flask(__name__)

from pymongo import MongoClient

client = MongoClient('localhost', 27017)
db = client.dbhomework


## HTML 화면 보여주기
@app.route('/')
def homework():
    return render_template('index.html')


# 주문하기(POST) API
@app.route('/order', methods=['POST'])
def save_order():
    name_receive = request.form['name_give']
    person_receive = request.form['person_give']
    address_receive = request.form['address_give']
    phone_receive = request.form['phone_give']

    doc = {
        'name':name_receive,
        'person':person_receive,
        'address':address_receive,
        'phone':phone_receive
    }

    print(doc)
    db.orders.insert_one(doc)

    return jsonify({'msg': '주문이 완료되었습니다!'})


# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
    order = list(db.orders.find({},{'_id':False}))
    return jsonify({'orders': order})


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

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <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=Yeon+Sung&display=swap" rel="stylesheet">
    <meta charset="UTF-8">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
    <title>스파르타코딩클럽 | 원페이지 쇼핑몰</title>
    <style>
        * {
            font-family: 'Yeon Sung', cursive;
        }

        .top_margin {
            margin: 35px;
        }

        .wrap {
            width: 500px;
            margin: auto;
        }

        .item_info {
            width: 500px;
            margin-top: 20px;
            margin-bottom: 10px;
        }

        .price {
            font-size: 20px;
        }

        .item_order {
            width: 450px;
            margin-top: 10px;
            margin-bottom: 20px;
        }

        .order {
            width: 100px;
            margin: auto;
            display: block;
        }

        .rate {
            color: blue;
            font-size: small;
        }
    </style>
    <script>
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                    let date = response['date']
                    let rate = response['rate']
                    let rate_text = `<p>${date}자 달러-원 환율 : ${rate}</p>`
                    $('#rate').append(rate_text)
                }
            })
            order_listing();
        });

        function order_listing() {
            $.ajax({
                type: "GET",
                url: "/order",
                data: {},
                success: function (response) {
                    let order = response['orders']
                    for (let i = 0; i < order.length; i++) {
                        let name = order[i]['name'];
                        let person = order[i]['person'];
                        let address = order[i]['address'];
                        let phone = order[i]['phone'];
                        let temp_html = `<tr>
                                     <th scope="row">${name}</th>
                                     <td>${person}</td>
                                     <td>${address}</td>
                                     <td>${phone}</td>
                                     </tr>`
                        console.log(temp_html)
                        $('#order_table').append(temp_html)
                    }
                }
            })
        }

        function order() {
            let name = $('#name').val();
            let person = $('#person').val();
            let address = $('#address').val();
            let phone = $('#phone').val();

            $.ajax({
                type: "POST",
                url: "/order",
                data: {name_give: name, person_give: person, address_give: address, phone_give: phone},
                success: function (response) {
                    alert(response["msg"]);
                    window.location.reload()

                }
            })
        }


    </script>
</head>

<body>
<div class="top_margin"></div>
<div class="wrap">

    <div class="card border-dark mb-3" style="max-width: 25rem;">
        <div class="card-header">유럽여행 4박 6일 패키지</div>
        <img class="card-img-top"
             src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSWKv4nuXL-ya4NdYocUTVHtF5uXgOVKCHF2Q&usqp=CAU"
             alt="Card image cap">
    </div>
    <div class="item_info">
        <h2>유럽여행 5박 6일 패키지 <span class="price">가격 : 600,000원 / 일</span></h2>
        <p>북유럽 4박 6일 패키지 / 온라인 특별가 / 왕복 항공권포함 / TAX및 유류할증료 변경가능 / 카드사별 무이자 / 성인 1인 1박기준</p>
    </div>
    <span class="rate" id=rate></span>
    <div class="item_order">
        <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">주문자 이름</span>
            </div>
            <input type="text" class="form-control" id="name" aria-label="Small"
                   aria-describedby="inputGroup-sizing-sm">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <button class="btn btn-outline-secondary" type="button">인수</button>
            </div>
            <select class="custom-select" id="person">
                <option selected></option>
                <option value="1">1명</option>
                <option value="2">2명</option>
                <option value="3">3명</option>
                <option value="3">4명</option>
            </select>
        </div>
        <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">주소</span>
            </div>
            <input type="text" class="form-control" id="address" aria-label="Small"
                   aria-describedby="inputGroup-sizing-sm">
        </div>
        <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id=>연락처</span>
            </div>
            <input type="text" class="form-control" id="phone" aria-label="Small"
                   aria-describedby="inputGroup-sizing-sm">
        </div>
    </div>
    <div class="order">
        <button type="button" class="btn btn-primary" onclick="order()">예약하기</button>
    </div>
</div>
    <table class="table">
        <thead>
        <tr>
            <th scope="col">이름</th>
            <th scope="col">수량</th>
            <th scope="col">주소</th>
            <th scope="col">전화번호</th>
        </tr>
        </thead>
        <tbody id="order_table">

        </tbody>
    </table>


</body>
</html>

from flask import Flask, render_template, jsonify, request

app = Flask(__name__)

from pymongo import MongoClient

client = MongoClient('localhost', 27017)
db = client.dbhomework


## HTML 화면 보여주기
@app.route('/')
def homework():
    return render_template('index.html')


# 주문하기(POST) API
@app.route('/order', methods=['POST'])
def save_order():
    name_receive = request.form['name_give']
    person_receive = request.form['person_give']
    address_receive = request.form['address_give']
    phone_receive = request.form['phone_give']

    doc = {
        'name':name_receive,
        'person':person_receive,
        'address':address_receive,
        'phone':phone_receive
    }

    print(doc)
    db.orders.insert_one(doc)

    return jsonify({'msg': '주문이 완료되었습니다!'})


# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
    order = list(db.orders.find({},{'_id':False}))
    return jsonify({'orders': order})


if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)```
profile
김건우
공부하는 개발자가 목표입니다.
이전 포스트

7일차 (실습)

다음 포스트

9일차 (이론)

0개의 댓글