4주차 웹개발 종합반 마무리

# 4주차 웹개발 마무리

 

4주차 배울 내용

 

4주차에서는 서버를 이용해서 나만의 홈페이지를 만들었습니다. 기존에는 html과 오픈API 그리고 URL을 이용해서 홈페이지를 만들었다면 이번에는 서버를 이용해서 파일을 불러오는 방식의 수업을 진행했습니다. Flask라는 프레임워크를 이용하여 홈페이지에서 직접 서버에게 요청 및 불어오는 방식이었습니다. 직접 서버를 만드는 개념이 아니라 나만 보는 방식으로 서버 = 클라이언트의 방식이었습니다. 

 

Flask 시작하기

시작 하기에 앞서 (맥 : 좌상단Pycharm → Preference → Python Interpreter) Flask를 다운받아 주고 나머지 필요한 requests, bs4, mongodb도 같이 다운 받았습니다.

 

from flask import Flask
app = Flask(__name__)

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

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

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

 

기본적인 틀은 이렇게 되어있고 강사님께서 하나하나 이해하지 말고 만든사람이 이렇게 하기로 정의하기로 했다라고 생각하면 조금 났다고 하셨습니다. ㅋㅋㅋㅋ 그래도 기본적으로 ('/') << 첫화면이 되고 ('/mypage') mypage라는 경로로 들어간다 생각하면 될 것 같습니다.

또한, Flask를 사용할 때에는 기본적으로 static폴더(이미지, css파일), templates(html파일), app.py를 만들어 주어야 한다고 했습니다.

 

Flask의 내장 함수 reder_template를 사용하여 index.html를 불러옵니다.

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

## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안됩니다.

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

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

간단한 명령으로 templates안의 index.html(이미 만들어진 파일)를 바로 불러올 수 있습니다.

우리는 예전에 ajax에서 배운 GET, POST방식을 사용해서 클라이언트에서 서버로 다시 서버가 클라이언트로 주고 받는 방식을 사용 할 것입니다.

 

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

GET은 서버에 저장된 내용을 조회(Read)할 때 사용합니다.

POST는 클라이언트가 서버에 변경된 내용(Create, Update, Delete) 요청 할 때 사용합니다.

저희는 mongodb에 내용을 저장했기에 여기서는 mongodb가 서버라고 볼 수 있습니다.

모두의 책리뷰 Quiz 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=5001, debug=True)

 

나홀로 메모 Quiz 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=5001,debug=True)

meta라는 함수를 처음 사용해봤습니다. 기존에는 검사를 눌러 copy selector를 사용해서 각 요소들을 가져왔지만 이번에 할 퀴즈에서는 url에 저장된 각 요소 하나하나를 가져와야하기 때문에 copy selector만으로는 내용이 너무 길어집니다. 그래서 meta 태그를 이용하여 url를 불러오고 url에 저장된 내용을 바로바로 불러 올 수 있게 하는 명령어가 meta라고 합니다.

 

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


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


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

    doc = {
        'name':name_receive,
        'count':count_receive,
        'address':address_receive,
        'phone':phone_receive
    }
    db.orders.insert_one(doc)

    return jsonify({'msg': '주문이 완료 됐습니다.'})


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


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

 

4주차 숙제 index.html

<head>
....
    <script>
        function order_listing() {

            $.ajax({
                type: "GET",
                url: "/order",
                data: {},
                success: function (response) {
                    let orders = response['orders']
                    for (let i = 0; i < orders.length; i++) {
                        let name = orders[i]['name']
                        let count = orders[i]['count']
                        let address = orders[i]['address']
                        let phone = orders[i]['phone']

                        let temp_html = `<tr>
                                            <th scope="row">${name}</th>
                                            <td>${count}</td>
                                            <td>${address}</td>
                                            <td>${phone}</td>
                                         </tr>`

                        $('#orders-box').append(temp_html)
                    }
                }
            })
        }

        function save_order() {

            let name = $('#order-name').val()
            let count = $('#order-count').val()
            let address = $('#order-address').val()
            let phone = $('#order-phone').val()

            $.ajax({
                type: "POST",
                url: "/order",
                data: {name_give: name, count_give: count, address_give: address, phone_give: phone},
                success: function (response) { // 성공하면
                    alert(response["msg"])
                    window.location.reload()
                }
            })
        }
    </script>
</head>

<body>
....
<div class="wrap">
    <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="orders-box">
        </tbody>
    </table>
</div>
</body>

app.py에 대해서는 크게 설명할게 없습니다. 기존에 quiz내용에서 한 두줄 만 추가된 내용이라.. 하지만 오늘 가장 시간을 많이 낭비한 곳은 바로 index.html에서 id=orders-box와 app.py에 db = client.dbhomework에 대한 부분이었습니다. 첫 번째 dbhomework는 로보 3t에 아무리 찾아봐도 저장이 안된 것 같아서 로보 3t를 열심히 찾은 결과 dbsparta 쉘만 찾고 dbhomework가 생성된지 몰라서 한참을 찾았고 두 번째는 db에 저장된 것을 확인하고 아무리 post를 했지만 홈페이지에 생성이 되지 않아서 한참을 찾은 결과 html 맨아래 <tbody> 박스란에 id값을 안줘서 생성이 안됐었습니다. .....

 

1

 

2

 

3

4