웹 개발 4주차

#프론트엔드 #FrontEnd #웹개발 #HTML #CSS #Javascript #ajax #Python #MongoDB #Flask #Server

 

4주차 강의를 마무리 지었다.

태그가 하나씩 늘어갈 때마다, 얕지만 지식의 폭이 넓어진 것 같아 뿌듯하다 (?)

다음 주차가 마지막인데, 내가 만든 웹페이지를 다른 사람들도 볼 수 있게 배포를 하는 것이니,
마지막 주차때는 배포한 인터넷 페이지 주소도 작성하며 나름의 완성폼도 찍어 올려야겠다.

 

1 ~ 3주차에서 배웠던 각각의 코드 작성법과 운영법을 서버와 연결하여
하나의 홈페이지로 운영하게끔 하는 강의였는데,
기존에 파이썬 파일 하나 만들고.. html 파일 하나 만들고.. 하는 것에서
프로젝트 내에 폴더를 만들어 같이 연결시켜 사용하는 것이다 보니 조금 더 난이도가 있었던 것 같다.

 

웹페이지를 만들기 위해선 만드는 순서에 대한 루틴화가 필요해보였다 (익숙해지기 위함)
1. 프로젝트 파일 생성 (폴더 만들고 새로운 프로젝트 파일 실행)

2. 하위 경로 폴더 생성 (templates, static)

3. app.py, 템플릿 폴더 내에 index.html 파일 생성하기

3. 인터프리터 다운로드

 - pymongo, dnspython : DB용 인터프리터

 - flask : 서버용 인터프리터

 - bs4, request : 크롤링용 인터프리터

4. 클라이언트, 앱 파일 각각에 코드를 작성하며 코딩 시작

 

요약하면 이정도?

코딩을 하다보면 문법에 대해서 외우려고 하는데, 외우기보단 계속해서 붙여넣기로 쓰면서라도
익숙해지는게 우선인 것 같았다. (주입식 교육 멈춰)
아직은 다 못외워서 전에 썼던 코드를 다시 가져다 쓰면서 익히고 있지만,

익숙해지면 보지 않고도 어떤 식으로 코드를 구성해야 하는지 기억이 날 것 같다.

 

이번주차도 잘 마무리했고, 작성했던 코드들을 남겨본다.
진행하면서 코드가 너무 길어지다보니, 핵심적으로 사용한 코드 부분만 올린다.
(나머지는 전에 쓴 글에 남겨져 있음)

 

## 서버 연결, bs4, DB와 연결하는 파이썬 코드

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

import requests
from bs4 import BeautifulSoup

from pymongo import MongoClient
client = MongoClient('mongodb+srv://znuki:znuki@cluster0.mo5ena6.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta

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

@app.route("/movie", methods=["POST"])
def movie_post():
    url_receive = request.form['url_give']
    star_receive = request.form['star_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,
        'star':star_receive,
        'comment':comment_receive
    }
    db.movies.insert_one(doc)
    return jsonify({'msg': '저장 완료!'})

@app.route("/movie", methods=["GET"])
def movie_get():
    movie_list = list(db.movies.find({}, {'_id': False}))
    return jsonify({'movies':movie_list})

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



## 영화 리뷰 크롤링해서 가져온 후 서버로 올리는 클라이언트 html 파일

<script>
        $(document).ready(function () {
            listing();
        });

        function listing() {
            $.ajax({
                type: 'GET',
                url: '/movie',
                data: {},
                success: function (response) {
                    let rows = response['movies']
                    for (let i = 0; i < rows.length; i++){
                        let comment = rows[i]['comment']
                        let title = rows[i]['title']
                        let star = rows[i]['star']
                        let desc = rows[i]['desc']
                        let image = rows[i]['image']

                        let star_image = '⭐'.repeat(star)

                        let temp_html =
                            `<div class="col">
                                <div class="card h-100">
                                    <img src="${image}"
                                         class="card-img-top">
                                    <div class="card-body">
                                        <h5 class="card-title">${title}</h5>
                                        <p class="card-text">${desc}</p>
                                        <p>${star_image}</p>
                                        <p class="mycomment">${comment}</p>
                                    </div>
                                </div>
                            </div>`

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

        function posting() {
            let url = $('#url').val()
            let star = $('#star').val()
            let comment = $('#comment').val()

            $.ajax({
                type: 'POST',
                url: '/movie',
                data: {url_give:url, star_give:star, comment_give:comment},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            });
        }

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

        function close_box() {
            $('#post-box').hide()
        }
    </script>

대충 이런식으로 페이지가 출력된다. 영화 기록하기를 눌려서 입력하면 더 추가 가능!

## 4주차 과제, 팬명록 만들기 파이썬 파일


from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('mongodb+srv://znuki:znuki@cluster0.mo5ena6.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta

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


@app.route("/homework", methods=["POST"])
def homework_post():
    name = request.form['name_give']
    comment = request.form['comment_give']

    doc = {
        'name' : name,
        'comment' : comment
    }
    db.homework.insert_one(doc)
    return jsonify({'msg': '저장 완료!'})


@app.route("/homework", methods=["GET"])
def homework_get():
    comment_list = list(db.homework.find({},{'_id':False}))
    return jsonify({'comments': comment_list})

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)
    
    
## 서버로 GET, POST 해오는 클라이언트 HTML 파일

    <script>
        $(document).ready(function () {
            set_temp()
            show_comment()
        });

        function set_temp() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response) {
                    $('#temp').text(response['temp'])
                }
            })
        }

        function save_comment() {
            let name = $('#name').val()
            let comment = $('#comment').val()
            $.ajax({
                type: 'POST',
                url: '/homework',
                data: {name_give: name, comment_give: comment},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            })
        }

        function show_comment() {
            $.ajax({
                type: "GET",
                url: "/homework",
                data: {},
                success: function (response) {
                    let rows = response['comments']
                    for (let i = 0; i < rows.length; i++) {
                        let name = rows[i]['name']
                        let comment = rows[i]['comment']

                        let temp_html = `<div class="card">
                                            <div class="card-body">
                                                <blockquote class="blockquote mb-0">
                                                    <p>${comment}</p>
                                                    <footer class="blockquote-footer">${name}</footer>
                                                </blockquote>
                                            </div>
                                        </div>`
                        $('#comment-list').append(temp_html)
                    }
                }
            });
        }
    </script>

이것도 대충 이런식으로 뽑힌다. 난 SG워너비를 좋아한다,