웹프로그래밍 심화_나홀로일기장 LV1

1. 심화 과정

-클라이언트(브라우저,핸드폰) - API(창구) - 서버(컴퓨터의 역할, 하나의 "프로그램")

 

-JQuery : 자바 스크립트의 라이브러리, HTML 조작을 쉽게 해줌

 

-AJAX : 서버 통신 위함. 클라이언트가 코드 단에서 계속 요청하고 받아옴

 

-아래 4가지를 파이참 프로젝트에서 패키지 설치함

Flask : 파이썬으로 서버 만드는 프레임 워크(templates,static 폴더 만들기)

pymongo : DB와 연결

bs4

requests 

 

-app.py와 index.html에 코드 스니펫 붙여넣어주고,

포스팅 : 게시글 작성

리스팅 : 서버에서 긁어오기

2개의 API를 만들 것이다!

 

1단계 : 생김새 만들기 (HTML & CSS)

2단계 : 만들 기능 파악(포스팅/리스팅 API 2개)

3단계 : 서버-클라이언트 연결 코드

4단계 : 포스팅 API

5단계 : 리스팅 API

 

1단계 ) 부트스트랩 : 다른 사람들이 만들어놓은 CSS

아래 코드들을 통해 부트스트랩이 사사삭 들어온다

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

 

-플라스크 기본 코드

from flask import Flask, render_template, jsonify, request
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)

 

3단계 ) 리스팅 역할 : 로딩이 완료된 후, 서버한테 어떤 카드 받아와야하냐고 묻고 붙여주는 작업

로딩이 완료됐을 때 listing 실행하게 하는 코드 (GET 요청 AJAX 코드)

        $(document).ready(function () {
            listing()
        })

        function listing() {
            $.ajax({
                type: "GET",
                url: "/diary?sample_give=샘플데이터",
                data: {},
                success: function (response) {
                    alert(response['msg'])
                }
            })
        }

 

 

GET 요청 API 코드

@app.route('/diary', methods=['GET'])
def show_diary():
    sample_receive = request.args.get('sample_give')
    print(sample_receive)
    return jsonify({'msg': 'GET 연결 완료!'})

---

4단계) 서버가 클라이언트한테서 title과 comment를 받아와야하죠??

받아오고 DB에 저장해야 하죠?? DB쓰려면?

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta_plus_week1 #DB 이름 설정

 

서버에서 클라이언트한테 받아온 것을 DB에 저장하기

@app.route('/diary', methods=['POST'])
def save_diary():
    title_receive = request.form['title_give']
    content_receive = request.form['content_give']
    print(title_receive,content_receive)
    doc = {
        'title': title_receive,
        'content': content_receive
    }
    db.diary.insert_one(doc)
    return jsonify({'msg': '저장 완료!'})

 

이제 클라이언트쪽에선

AJAX라는 차로 데이터 넘겨줘야하니까 인풋박스 두개에 ID 줌

data라는 트렁크에 데이터 넣음

        function posting() {
            let title=$('#title').val()
            let content=$('#content').val()
            $.ajax({
                type: "POST",
                url: "/diary",
                data: {title_give:title,content_give:content},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload() //새로고침 코드
                }
            })
        }

---

5단계)리스팅 만들기

서버 먼저 만든다

클라이언트한테 받을 데이터 없고

클라이언트한테 내 DB에 있는 정보를 다 주면 된다

@app.route('/diary', methods=['GET'])
def show_diary():
    diaries = list(db.diary.find({}, {'_id': False}))
    return jsonify({'all_diary':diaries })

 

diaries가 all_diary로 가져오고 있으니,

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

 

얘를 이제 for문으로 돌리고,

카드 형식으로 붙여주자

        function listing() {
            $.ajax({
                type: "GET",
                url: "/diary",
                data: {},
                success: function (response) {
                    let diaries = response['all_diary']
                    for (let i = 0; i < diaries.length; i++) {
                        let title = diaries[i]['title']
                        let content = diaries[i]['content']

                        let temp_html = `<div class="card">
                            <div class="card-body">
                            <h5 class="card-title">${title}</h5>
                            <p class="card-text">${content}</p>
                            </div>
                         </div>`
                        $('#cards-box').append(temp_html)
                    }
                }
            })
        }