Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 |
Tags
- REST란
- spring서버
- JPA주의사항
- 스프링부트오류
- 1차캐시
- 최종 프로젝트
- @IdClass
- Error creating bean with name
- jpa회원가입
- Q 클래스
- ERD 작성
- Unsatisfied dependency
- 스프링 부트 공식 문서
- jpa에러
- queryDSL
- JoinColumn
- json
- github
- JPA
- 스프링 부트 기능
- git
- 빈생성안됨
- uncheck Exception
- Spring Spring boot 차이
- 복합키
- Filter
- REST API 규칙
- jwt메서드
- json gson 차이
- 인텔리제이
Archives
- Today
- Total
Everyday Dev System
웹개발 종합반 5일차 본문
20230513 01:03 am -
실습 2개, OG 태그 활용법,
Flask를 통해 웹사이트 2개 구축 및 인터넷에 배포
1. 버킷 리스트 실습
[app.py]
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@limchaeyoung.boi4rwj.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
@app.route('/')
def home():
return render_template('index.html')
@app.route("/bucket", methods=["POST"])
def bucket_post():
bucket_receive = request.form['bucket_give']
doc = {
'bucket' : bucket_receive
}
db.buckets.insert_one(doc)
return jsonify({'msg': '저장 완료!'})
@app.route("/bucket", methods=["GET"])
def bucket_get():
all_buckets = list(db.buckets.find({},{'_id':False}))
return jsonify({'result': all_buckets})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<link
href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap"
rel="stylesheet"
/>
<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>
<script>
$(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>
<div class="mypic">
<h1>나의 버킷리스트</h1>
</div>
<div class="mybox">
<div class="mybucket">
<input
id="bucket"
class="form-control"
type="text"
placeholder="이루고 싶은 것을 입력하세요"
/>
<button onclick="save_bucket()" type="button" class="btn btn-outline-primary">기록하기</button>
</div>
</div>
<div class="mybox" id="bucket-list">
<li>
<h2>✅ 호주에서 스카이다이빙 하기</h2>
</li>
</div>
</body>
</html>결과 :
1) 파일 구조 아래와 같이 생성.
2) 가상환경 구성 및 이동.
터미널에 python -m venv venv 입력 후 이동한 후 터미널 새로 열고 아래처럼 (venv) 확인
3) 패키지 설치 - pip install flask pymongo dnspython
2. 팬명록 페이지
[app.py]
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@limchaeyoung.boi4rwj.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.fans.insert_one(doc)
return jsonify({'msg': '저장 완료!'})
@app.route("/guestbook", methods=["GET"])
def guestbook_get():
all_fans = list(db.fans.find({},{'_id':False}))
return jsonify({'result': all_fans})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>초미니홈피 - 팬명록</title>
<meta property="og:title" content="너드커넥션 팬명록" />
<meta property="og:description" content="아티스트에게 응원 한마디" />
<meta property="og:image" content="data:image/jpeg;base64,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" />
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap"
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("data:image/jpeg;base64,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");
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>
<script>
$(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']
console.log(rows)
$('#comment-list').empty()
rows.forEach((a) => {
let name = a['name']
let comment = a['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>
</head>
<body>
<div class="mypic">
<h1>너드커넥션 팬명록</h1>
<p>현재기온: <span id="temp">36</span>도</p>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="name" placeholder="url" />
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="comment"
style="height: 100px"></textarea>
<label for="floatingTextarea2">응원댓글</label>
</div>
<button onclick="save_comment()" type="button" class="btn btn-dark">
댓글 남기기
</button>
</div>
<div class="mycards" id="comment-list">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨</footer>
</blockquote>
</div>
</div>
</div>
</body>
</html>결과 :
OG 태그 입력하기
og 태그는 html에서 title 태그 바로 다음에 입력
<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="이미지URL" />
3. 배포하기
웹서비스 런칭의 의미.
내 컴퓨터 대신 켜놓을 컴퓨터를 서버라고 부른다.
인터넷 환경에서 컴퓨터를 대여하고 해당 컴퓨터에 업로드 (이를 클라우드 환경이라고 부름)
AWS Elastic Beanstalk
쉬운 AWS의 배포 서비스임. 다른건 번거롭게 서버에 세팅하고 해당 파일을 올려서 실행해야 함.
이는 간편함.
'내배캠 초기 학습 > 웹개발 종합반' 카테고리의 다른 글
| 웹개발 종합반 4일차 -2 (1) | 2023.05.12 |
|---|---|
| 웹개발 종합반 4일차 -1 (0) | 2023.05.12 |
| 웹개발 종합반 3일차 -2 (0) | 2023.05.10 |
| 웹개발 종합반 3일차 -1 (1) | 2023.05.10 |
| 웹개발 종합반 2일차 - 2 (2) | 2023.05.09 |
'내배캠 초기 학습/웹개발 종합반' Related Articles
more
