(항해 사전스터디) 웹개발종합반 5주차 정리

웹개발종합반

(항해 사전스터디) 웹개발종합반 5주차 정리

JAVABOZA 2023. 4. 12. 13:25

1주차 - html css javascript
2주차 - jquery , ajax ,api
3주차 - python , 크롤링 , mongoDB
4주차 - 미니프로젝트1, 미니프로젝트2
5주차 - 미니프로젝트3.4 , AWS

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

5주차 - 미니프로젝트3.4 , AWS

AWS를 통한 서버에 내 프로젝트 올리기

여기서 AWS란?

Amazon Web Service 의 앞글자만 따서 AWS 라 부른다
서버 네트워크 등 인프라를 전체적으로 빌려주는 서비스이다.
다양한 서비스를 제공하고 있어서 요즘은 AWS에서 제공하는 서비스로도 대부분 구축이 가능 ex) EC2, S3..

<미니프로젝트 3>

04.BUCKET -> app.py

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

from pymongo import MongoClient

client = MongoClient('mongodb+srv://sparta:test@cluster0.eam3qp6.mongodb.net/?retryWrites=true&w=majority')

db = client.dbsparta

@app.route('/')

def home():

return render_template('index.html')

#api만들기

@app.route("/bucket", methods=["POST"])

def bucket_post():

bucket_receive = request.form['bucket_give']

doc = {

'bucket': bucket_receive

}

db.bucket.insert_one(doc)

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

@app.route("/bucket", methods=["GET"])

def bucket_get():

all_buckets = list(db.bucket.find({},{'_id':False}))

return jsonify({'result': all_buckets})

if __name__ == '__main__':

app.run('0.0.0.0', port=5000, debug=True)

04.BUCKET -> templates -> index.html

<!DOCTYPE html>

<head>

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />

integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"

crossorigin="anonymous"></script>

<title>인생 버킷리스트</title>

<style>

* {

font-family: "Gowun Dodum", sans-serif;

}

.mypic {

width: 100%;

height: 200px;

background-image: linear-gradient(0deg,

rgba(0, 0, 0, 0.5),

rgba(0, 0, 0, 0.5)),

url("https://images.unsplash.com/photo-1601024445121-e5b82f020549?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80");

background-position: center;

background-size: cover;

color: white;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

.mypic>h1 {

font-size: 30px;

}

.mybox {

width: 95%;

max-width: 700px;

padding: 20px;

box-shadow: 0px 0px 10px 0px lightblue;

margin: 20px auto;

}

.mybucket {

display: flex;

flex-direction: row;

align-items: center;

justify-content: space-between;

}

.mybucket>input {

width: 70%;

}

.mybox>li {

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;

margin-bottom: 10px;

min-height: 48px;

}

.mybox>li>h2 {

max-width: 75%;

font-size: 20px;

font-weight: 500;

margin-right: auto;

margin-bottom: 0px;

}

.mybox>li>h2.done {

text-decoration: line-through;

}

</style>

$(document).ready(function () {

show_bucket();

});

function show_bucket() {

fetch('/bucket').then(res => res.json()).then(data => {

let rows = data['result']

$('#bucket-list').empty()

rows.forEach((a) => {

let bucket = a['bucket']

let temp_html = `<li>

<h2>✅ ${bucket}</h2>

</li>`

$('#bucket-list').append(temp_html)

})

}

function save_bucket() {

let bucket = $('#bucket').val()

let formData = new FormData();

formData.append("bucket_give", bucket);

fetch('/bucket', { method: "POST", body: formData, }).then((response) => response.json()).then((data) => {

alert(data["msg"]);

window.location.reload();

});

}

</script>

</head>

<body>

<h1>나의 버킷리스트</h1>

</div>

</div>

<li>

<h2>✅ 호주에서 스카이다이빙 하기</h2>

</li>

</div>

</body>

</html>

제일 먼저 서버 데이터베이스를 연결 (사전에 터미널에 pip install pymongo 설치함 )

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

후에 서버작업 진행

@app.route("/bucket", methods=["POST"])
def bucket_post():
    bucket_receive = request.form['bucket_give']
    doc = {
        'bucket': bucket_receive
    }
    db.bucket.insert_one(doc)

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

프론트단 작업 진행

- let bucket = $('#bucket').val() 로 bucket 값 보내주기

- formData.append("bucket_give", bucket); 로 데이터를 넣고 fetch 로 데이터 보내기

- window.location.reload(); 는 클라이언트가 원하는 정보를 넣고 저장이되면 새로고침이 되서 보여주는 기능

    function save_bucket() {
      let bucket = $('#bucket').val()

      let formData = new FormData();

      formData.append("bucket_give", bucket);

      fetch('/bucket', { method: "POST", body: formData, }).then((response) => response.json()).then((data) => {
        alert(data["msg"]);
        window.location.reload();
      });

다음은 API를 조회(GET)

<백엔드 작업>

all_buckets = list(db.bucket.find({},{'_id' : False})) // all_buckets에 bucket 디비에 있는 값을 찾아 리스트해서 담기

result는 담은 all_buckets를 json 타입으로 리턴

@app.route("/bucket", methods=["GET"])
def bucket_get():
    all_buckets = list(db.bucket.find({},{'_id':False}))
    return jsonify({'result': all_buckets})

<프론트작업>

서버에서 가져온 result값을 rows 변수에 담아

forEach문으로 반복해서 돌려 원하는 값가져오기

temp_html로 가져온 html 틀에 jquery로 담아 append() 사용

   function show_bucket() {
      fetch('/bucket').then(res => res.json()).then(data => {
        let rows = data['result']
        $('#bucket-list').empty()
        rows.forEach((a) => {
          let bucket = a['bucket']

          let temp_html = `<li>
                            <h2>✅ ${bucket}</h2>
                           </li>`
          $('#bucket-list').append(temp_html)
        })

      })
    }

append() 후에 기존 html 코드는 지워지는 걸 구현하기 위한 empty() 사용

05.FAN -> app.py

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

from pymongo import MongoClient

client = MongoClient('mongodb+srv://sparta:test@cluster0.eam3qp6.mongodb.net/?retryWrites=true&w=majority')

db = client.dbsparta

@app.route('/')

def home():

return render_template('index.html')

@app.route("/guestbook", methods=["POST"])

def guestbook_post():

name_receive = request.form['name_give']

comment_receive = request.form['comment_give']

doc = {

'name' : name_receive,

'comment' : comment_receive

}

db.fan.insert_one(doc)

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

@app.route("/guestbook", methods=["GET"])

def guestbook_get():

all_comments = list(db.fan.find({},{'_id':False}))

return jsonify({'result': all_comments})

if __name__ == '__main__':

app.run('0.0.0.0', port=5000, debug=True)

05.FAN -> templates -> index.html

<!DOCTYPE html>

<head>

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />

integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"

crossorigin="anonymous"></script>

<title>초미니홈피 - 팬명록</title>

rel="stylesheet" />

<style>

* {

font-family: "Noto Serif KR", serif;

}

.mypic {

width: 100%;

height: 300px;

background-image: linear-gradient(0deg,

rgba(0, 0, 0, 0.5),

rgba(0, 0, 0, 0.5)),

url("https://ichef.bbci.co.uk/news/640/cpsprodpb/110F8/production/_125408896_f9fa9184-bdc3-4e62-b57a-9195062fd4b0.jpg");

background-position: center 30%;

background-size: cover;

color: white;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

.mypost {

width: 95%;

max-width: 500px;

margin: 20px auto 20px auto;

box-shadow: 0px 0px 3px 0px black;

padding: 20px;

}

.mypost>button {

margin-top: 15px;

}

.mycards {

width: 95%;

max-width: 500px;

margin: auto;

}

.mycards>.card {

margin-top: 10px;

margin-bottom: 10px;

}

</style>

$(document).ready(function () {

set_temp();

show_comment();

});

function set_temp() {

fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data) => {

let temp = data['temp']

$('#temp').text(temp)

});

}

function save_comment() {

let name = $('#name').val()

let comment = $('#comment').val()

let formData = new FormData();

formData.append("name_give", name);

formData.append("comment_give", comment);

fetch('/guestbook', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {

alert(data["msg"]);

window.location.reload()

});

}

function show_comment() {

fetch('/guestbook').then((res) => res.json()).then((data) => {

let rows = data['result']

$('#comment-list').empty()

rows.forEach((a) => {

let name = a['name']

let comment = a['comment']

let temp_html = `<div class="card">

<p>${comment}</p>

</blockquote>

</div>

</div>`

$('#comment-list').append(temp_html)

})

}

</script>

</head>

<body>

</div>

</div>

</div>

'웹개발종합반' 카테고리의 다른 글

(항해 사전스터디) 웹개발종합반 4주차 정리 (0)	2023.04.11
(항해 사전스터디) 웹개발종합반 3주차 정리 (0)	2023.04.10
(항해 사전스터디) 웹개발종합반 2주차 정리 (0)	2023.04.07
(항해 사전스터디) 웹개발종합반 1주차 정리 (0)	2023.04.06

현재글(항해 사전스터디) 웹개발종합반 5주차 정리

JAVABOZA

ORM, 매개변수, HTTP, for문, wil, 자바스크립트, 항해99, CSS, 자바개발자, 자바, jvm, SpringBoot, 쿼리문, html, Python, 파이썬, Java, 스프링, mysql, 스프링부트,

Today :
Yesterday :

JAVABOZA