[WIL] 웹개발 종합반 4주차

nikevapormax·2022년 4월 12일

Weekly I learned

WIL

목록 보기

4/8

🦧Flask 프레임워크

🔥개념

웹 애플리케이션 개발을 위한 파이썬 프레임워크로, 서버를 구동시켜주는 편한 코드 모음
최소한의 구성 요소와 요구 사항을 제공하기 때문에 쉽고 유연하며, 확장성이 있어 개발을 하는 입장에서는 본인이 필요한 도구와 라이브러리를 자유롭게 선택해서 적용 가능

🔥Flask 시작 코드

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

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

해당 코드를 app.py에 입력한 후 실행하고, 크롬을 통해 http://localhost:5000/으로 접속
- home()에서 정의되어 있는 This is Home! 이라는 메세지가 화면에 보인다면 성공적으로 연결된 것! (물론 내용을 바꿀 수 있으며, html을 렌더해서 사용가능)
다음과 같이 URL을 분리 가능 (이름은 다르게!)

@app.route('/')
def home():
   return 'This is Home!'

@app.route('/mypage')
def mypage():  
   return 'This is My Page!'

크롬에서 http://localhost:5000/mypage로 접속하면 This is My Page! 라는 메세지가 출력됨

🔥Flask 서버 생성 시 기본 폴더 구조

📁 project_folder
ㄴ📁 static
ㄴ📁 templates - 📃index.html
ㄴ📃 app.py

templates : HTML 파일을 담아두고 불러옴

index.html 예시 코드

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <title>Document</title>
</head>
<body>
 <h1>서버를 만들었다!</h1>
</body>
</html>

Flask 내장함수 render_templat를 이용해 위의 index.html 사용(app.py)

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

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

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

🦧 API 생성

🔥요청 방식

GET
- 통상적으로 데이터 조회(Read)를 요청할 때 사용
  ex) 영화목록 조회
- 데이터 전달은 URL 뒤에 물음표를 삽입해 key=value 로 전달
  ex) google.com?q=nike
POST
- 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 시 사용
  ex) 회원가입, 회원탈퇴, 비밀번호 수정
- 데이터 전달은 바로 보이지 않는 HTML body에 key=value 로 전달

🔥GET 요청 방식 코드

GET 요청 API 코드

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

GET 요청 확인 Ajax 코드

<head>
  <script>
	function prac() {
    	$.ajax({
    		type: "GET",
    		url: "/test?title_give=봄날은간다",
    		data: {},
    		success: function(response){
       		console.log(response)
    		}
  		})
    }
  </script>
</head>

🔥POST 요청 방식 코드

POST 요청 API 코드

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

POST 요청 확인 Ajax 코드

<head>
  <script>
	function prac() {
    	$.ajax({
    	type: "POST",
    	url: "/test",
    	data: { title_give:'봄날은간다' },
    	success: function(response){
       		console.log(response)
    		}
  		})
    }
  </script>
</head>

🦧 [모두의책리뷰] 프로젝트

🔥app.py

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

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta

## HTML을 주는 부분
@app.route('/')
def home():
    return render_template('index.html')

## API 역할을 하는 부분
@app.route('/review', methods=['POST'])
def write_review():
    title_receive = request.form['title_give']
    author_receive = request.form['author_give']
    review_receive = request.form['review_give']

    doc = {
        'title':title_receive,
        'author':author_receive,
        'review':review_receive
    }
    db.bookreview.insert_one(doc)

    return jsonify({'msg': '저장 완료!'})


@app.route('/review', methods=['GET'])
def read_reviews():
    reviews = list(db.bookreview.find({}, {'_id': False}))
    return jsonify({'all_reviews': reviews})


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

🔥index.html

<!DOCTYPE html>
<html lang="ko">

    <head>
        <!-- Webpage Title -->
        <title>모두의 책리뷰 | 스파르타코딩클럽</title>

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

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

        <!-- 구글폰트 -->
        <link href="https://fonts.googleapis.com/css?family=Do+Hyeon&display=swap" rel="stylesheet">

        <script type="text/javascript">

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

            function makeReview() {
                let title = $('#title').val()
                let author = $('#author').val()
                let review = $('#bookReview').val()

                $.ajax({
                    type: "POST",
                    url: "/review",
                    data: {title_give:title, author_give:author, review_give:review},
                    success: function (response) {
                        alert(response["msg"]);
                        window.location.reload();
                    }
                })
            }

            function showReview() {
                $.ajax({
                    type: "GET",
                    url: "/review",
                    data: {},
                    success: function (response) {
                        let reviews = response['all_reviews']
                        for (let i = 0; i < reviews.length; i++) {
                            let title = reviews[i]['title']
                            let author = reviews[i]['author']
                            let review = reviews[i]['review']
                            let temp_html = `<tr>
                                                <td>${title}</td>
                                                <td>${author}</td>
                                                <td>${review}</td>
                                            </tr>`
                            $('#reviews-box').append(temp_html)
                        }
                    }
                })
            }
        </script>

        <style type="text/css">
            * {
                font-family: "Do Hyeon", sans-serif;
            }

            h1,
            h5 {
                display: inline;
            }

            .info {
                margin-top: 20px;
                margin-bottom: 20px;
            }

            .review {
                text-align: center;
            }

            .reviews {
                margin-top: 100px;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <img src="https://previews.123rf.com/images/maxxyustas/maxxyustas1511/maxxyustas151100002/47858355-education-concept-books-and-textbooks-on-the-bookshelf-3d.jpg"
                 class="img-fluid" alt="Responsive image">
            <div class="info">
                <h1>읽은 책에 대해 말씀해주세요.</h1>
                <p>다른 사람을 위해 리뷰를 남겨주세요! 다 같이 좋은 책을 읽는다면 다 함께 행복해질 수 있지 않을까요?</p>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">제목</span>
                    </div>
                    <input type="text" class="form-control" id="title">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">저자</span>
                    </div>
                    <input type="text" class="form-control" id="author">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">리뷰</span>
                    </div>
                    <textarea class="form-control" id="bookReview"
                              cols="30"
                              rows="5" placeholder="140자까지 입력할 수 있습니다."></textarea>
                </div>
                <div class="review">
                    <button onclick="makeReview()" type="button" class="btn btn-primary">리뷰 작성하기</button>
                </div>
            </div>
            <div class="reviews">
                <table class="table">
                    <thead>
                    <tr>
                        <th scope="col">제목</th>
                        <th scope="col">저자</th>
                        <th scope="col">리뷰</th>
                    </tr>
                    </thead>
                    <tbody id="reviews-box">
                    </tbody>
                </table>
            </div>
        </div>
    </body>

</html>

🔥 mongodb 확인

🔥 app.py 실행을 통한 웹사이트 확인

🦧 [나홀로메모장] 프로젝트

🔥 app.py

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

import requests
from bs4 import BeautifulSoup

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta

## HTML을 주는 부분
@app.route('/')
def home():
   return render_template('index.html')

@app.route('/memo', methods=['GET'])
def listing():
    articles = list(db.articles.find({}, {'_id':False})) # 잠시 값을 담기 위해 만든 변수일뿐
    return jsonify({'all_articles':articles})

## API 역할을 하는 부분
@app.route('/memo', methods=['POST'])
def saving():
    url_receive = request.form['url_give']
    comment_receive = request.form['comment_give']


    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_receive, headers=headers)

    soup = BeautifulSoup(data.text, 'html.parser')

    title = soup.select_one('meta[property="og:title"]')['content']
    image = soup.select_one('meta[property="og:image"]')['content']
    desc = soup.select_one('meta[property="og:description"]')['content']

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

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

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

🔥index.html

<!Doctype html>
<html lang="ko">

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

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

        <!-- 구글폰트 -->
        <link href="https://fonts.googleapis.com/css?family=Stylish&display=swap" rel="stylesheet">


        <title>스파르타코딩클럽 | 나홀로 메모장</title>

        <!-- style -->
        <style type="text/css">
            * {
                font-family: "Stylish", sans-serif;
            }

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

            .comment {
                color: blue;
                font-weight: bold;
            }

            #post-box {
                width: 500px;
                margin: 20px auto;
                padding: 50px;
                border: black solid;
                border-radius: 5px;
            }
        </style>
        <script>
            $(document).ready(function () {
                showArticles();
            });

            function openClose() {
                if ($("#post-box").css("display") == "block") {
                    $("#post-box").hide();
                    $("#btn-post-box").text("포스팅 박스 열기");
                } else {
                    $("#post-box").show();
                    $("#btn-post-box").text("포스팅 박스 닫기");
                }
            }

            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() // 새로고침!!!!!!!!!!!
                    }
                })
            }

            function showArticles() {
                $.ajax({
                    type: "GET",
                    url: "/memo",
                    data: {},
                    success: function (response) {
                        let articles = response['all_articles']
                        for (let i = 0; i < articles.length; i++) {
                            let title = articles[i]['title']
                            let image = articles[i]['image']
                            let url = articles[i]['url']
                            let desc = articles[i]['desc']
                            let comment = articles[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>
                                            </div>`
                            $('#cards-box').append(temp_html)
                        }
                    }
                })
            }
        </script>

    </head>

    <body>
        <div class="wrap">
            <div class="jumbotron">
                <h1 class="display-4">나홀로 링크 메모장!</h1>
                <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
                <hr class="my-4">
                <p class="lead">
                    <button onclick="openClose()" id="btn-post-box" type="button" class="btn btn-primary">포스팅 박스 열기
                    </button>
                </p>
            </div>
            <div id="post-box" class="form-post" style="display:none">
                <div>
                    <div class="form-group">
                        <label for="post-url">아티클 URL</label>
                        <input id="post-url" class="form-control" placeholder="">
                    </div>
                    <div class="form-group">
                        <label for="post-comment">간단 코멘트</label>
                        <textarea id="post-comment" class="form-control" rows="2"></textarea>
                    </div>
                    <button type="button" class="btn btn-primary" onclick="postArticle()">기사저장</button>
                </div>
            </div>
            <div id="cards-box" class="card-columns"></div>
        </div>
    </body>

</html>

🔥mongodb 확인

🔥app.py 실행을 통한 웹사이트 확인

🦧 4주차 숙제

🔥app.py

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']
    model_receive = request.form['model_give']
    color_receive = request.form['color_give']
    count_receive = request.form['count_give']
    addr_receive = request.form['addr_give']
    phone_receive = request.form['phone_give']

    doc = {
        'name': name_receive,
        'model': model_receive,
        'color': color_receive,
        'count': count_receive,
        'addr': addr_receive,
        'phone': phone_receive
    }
    db.iphone13.insert_one(doc)
    return jsonify({'result':'success','msg': '주문 완료!'})


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


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

🔥index.html

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

<head>
    <!-- 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>homework 1주차</title>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@700&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Nanum Gothic', sans-serif;
        }
        .item-pic{
            width: 500px;
            height: 300px;

            background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDJ9IcNAjp1CdDaPnNoL7xzzCjHz_uYS6GhA&usqp=CAU");
            background-position: center;
            background-size: cover;
        }
        .item-des {
            width: 500px;
            margin : 20px 0px 20px 0px;
        }
        .paraColor {
            color: blue;
            font-size: 13px;
        }
        .ordering {
            width: 500px;
        }
        .price-tag {
            font-size: 15px;
        }
        .location {
            width: 500px;
            margin: auto;
        }
        .btn_loc {
            margin: auto;
            display: block;
        }
        .table {
            margin-top: 20px;
        }
        .trWidth {
            margin: auto;
            width: 500px;
        }
    </style>
    <script>
        $(document).ready(function () {
            dollar_won();
            stacker();
        });
        function stacker() {
            $.ajax({
                type: 'GET',
                url: '/order',
                data: {},
                success: function (response) {
                    if (response["result"] == "success") {
                        let orders = response['orders']
                        for (let i = 0; i < orders.length; i++) {
                            let name = orders[i]['name'];
                            let model = orders[i]['model'];
                            let color = orders[i]['color'];
                            let count = orders[i]['count'];
                            let addr = orders[i]['addr'];
                            let phone = orders[i]['phone'];

                            let temp_html = `<tr>
                                                <th scope="row">${name}</th>
                                                <td>${model}</td>
                                                <td>${color}</td>
                                                <td>${count}</td>
                                                <td>${addr}</td>
                                                <td>${phone}</td>
                                            </tr>`
                            $('#order-info').append(temp_html)
                        }
                    }
                }
            })
        }
        function dollar_won() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                    let rate = response['rate']
                    $('#rating').text(rate)
                }
            })
        }
        function ordering() {
            let name = $('#userName').val()
            let model = $('#modelName').val()
            let color = $('#colorName').val()
            let count = $('#counting').val()
            let addr = $('#address').val()
            let phone = $('#phoneNum').val()

            $.ajax({
                type: "POST",
                url: "/order",
                data: {name_give: name, model_give: model, color_give: color, count_give: count, addr_give: addr, phone_give: phone},
                success: function (response) {
                    alert(response["msg"]);
                    window.location.reload();
                    }
                })
        }
    </script>
</head>

<body>
    <div class="location">
        <div class="item-pic"></div>
        <div class="item-des">
            <h1>아이폰 13 시리즈 <span class="price-tag">가격 : 950,000원부터</span></h1>
            <p>애플의 최신 핸드폰으로 그린 색상이 추가적으로 발매되었다.</p>
            <p class="paraColor" id="dollar_won">달러-원 환율 : <span id="rating">1200.0</span></p>
        </div>
        <div class="ordering">
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">주문자 이름</span>
                </div>
                <input id="userName" type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon1">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <label class="input-group-text" for="modelName">모델</label>
                </div>
                <select class="custom-select" id="modelName">
                    <option selected>-- 모델을 선택하세요 --</option>
                    <option value="1.아이폰 13 mini">아이폰 13 mini</option>
                    <option value="2.아이폰 13">아이폰 13</option>
                    <option value="3.아이폰 13 pro">아이폰 13 pro</option>
                    <option value="4.아이폰 13 pro max">아이폰 13 pro max</option>
                </select>
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <label class="input-group-text" for="colorName">색상</label>
                </div>
                <select class="custom-select" id="colorName">
                    <option selected>-- 모델을 선택하세요 --</option>
                    <option value="1.스타라이트">스타라이트</option>
                    <option value="2.미드나이트">미드나이트</option>
                    <option value="3.블루">블루</option>
                    <option value="4.핑크">핑크</option>
                    <option value="5.그린">그린</option>
                    <option value="6.레드">레드</option>
                </select>
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <label class="input-group-text" for="counting">수량</label>
                </div>
                <select class="custom-select" id="counting">
                    <option selected>-- 수량을 선택하세요 --</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">주소</span>
                </div>
                <input type="text" class="form-control" id="address" aria-label="Username" aria-describedby="basic-addon1">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">전화번호</span>
                </div>
                <input type="text" class="form-control" id="phoneNum" aria-label="Username" aria-describedby="basic-addon1">
            </div>
            <input onclick="ordering()" class="btn btn-primary btn_loc" type="button" value="주문하기">
        </div>
    </div>
    <table class="table">
        <thead>
        <tr class="trWidth">
            <th scope="col">이름</th>
            <th scope="col">모델</th>
            <th scope="col">색상</th>
            <th scope="col">수량</th>
            <th scope="col">주소</th>
            <th scope="col">전화번호</th>
        </tr>
        </thead>
        <tbody id="order-info"></tbody>
    </table>
</body>

</html>