Sparta 웹개발 종합반 4주차 1~9강
01. 4주차 오늘 배울 것
컴퓨터는 한대
같은 컴퓨터에 서버도 만들고 요청도 한다.
클라이언트 = 서버
즉, 로컬 개발 환경이다.
js css html 갖다줄 파일을 미리 만들었다.
우리는 서버를 만들어서 요청을 받고 파일을 갖다주든지 db에다가 작업을 해야지 서버를 만들어야한다.
서버:컴퓨터에 돌아가고 있는 하나의 프로그램
내가 서버를 만들고 크롬 브러우저를 키고 접속을 해본다.
로컬 개발환경이라고 한다.
02. 폴더 세팅
- prac: "flask 연습 코드를 작성합니다."
- alonememo : "나홀로메모장" 관련 코드를 작성합니다.
- bookreview : "모두의책리뷰" 관련 코드를 작성합니다.
- moviestar : "마이페이보릿무비스타" 관련 코드를 작성합니다.
03. Flask시작하기 - 서버만들기
Flask 프레임워크: 서버를 구동시켜주는 편한 코드 모음
프레임워크:남이 짜준 규칙이나 틀안에서 내가 코딩을 자유롭게 쓴다.
통상적으로 프레임워크는 하나의 프레임워크 안에서 내가 짠다.
라이브러리:내가 내마음대로 짜르고 남이 만든것을 중간에 가져다가 쓴다.
그안의 라이브러리는 마음대로 가져다가 쓸수 있다.
통상적으로 flask 서버를 돌리는 파일은 app.py라고 이름 짓는다.
flask 시작 코드
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return 'This is Home!'
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
run하고 localhost:5000로 접속하면
서버도 돌리고 접속도 해본다.
port:5000 => 내가 만든 서버에 5000번 문으로 접속하겠다.
포트는 바꿀수 있지만 거의 정해진 번호를 가지고 있어 안바꾸는게 좋다.
mypage() 추가
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return '나의 첫 서버!!'
@app.route('/')
def mypage():
return 'mypage입니다.'
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)home(),mypage()가 달라야한다.
결과
home() 에 버튼으로 변경
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return '<button>나는버튼이다</button>'
@app.route('/mypage')
def mypage():
return 'This is My Page!'
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)결과
04. Flask시작하기 - HTML파일 주기
html를 다쓰면 힘들다.
프레임워크 쓸려면 정해진 규칙을 따라줘야한다.
flask는 정해진 폴더가 있다.
프로젝트 폴더 안에,
static 폴더 (이미지, css파일을 넣어둔다.)
templates 폴더 (html파일을 넣어둔다.)
app.py 파일
이 세개를 만들고 시작
templates 폴더의 역할
HTML 파일을 담아두고, 불러오는 역할
templates폴더에서 index.html 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
하나만 입력해봅시다.
</body>
</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)
render_template는 flask에서 이미 정해진 함수
자동으로 templates폴더안에 index.html 파일을 우리한테 갖다가 클라이언트한테 준다.
@app.route('/')
def home():
return render_template('index.html')app.route는 /가 들어온다.
return하면 브라우저가 받은대로 그려주기만 한다.
localhost:5000/
/는 숨겨져있다.
localhost:5000
index.html로 만들어둔거를 서버가 가져다준다.
index.html 예제코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h1>서버를 만들었다!</h1>
</body>
</html>제리쿼리 임포트를 미리 해놓음
05. Flask시작하기 - 본격 API 만들기
API : 서버도 클라이언트 요청을 받기 위해 만들어놓은 창구
규칙이 있고 그에 해당하는 주소가 존재한다.
API는 두가지 종류
GET → 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회
→ 데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달
→ 예: google.com?q=북극곰
POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정
→ 데이터 전달 : 바로 보이지 않는 HTML body에 key:value 형태로 전달
서버에 요청할때 Ajax로 콜
우리가 API를 만들고
클라이언트에서 Ajax로 콜해본다.
GET 요청 API코드
app.py
from flask import Flask, render_template,request,jsonify #request,jsonify 추가
app = Flask(__name__)
## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안됩니다.
@app.route('/')
def home():
return render_template('index.html')
@app.route('/test', methods=['GET']) #get 요청 API코드
def test_get():
title_receive = request.args.get('title_give')
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 GET!'})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)localhost:5000에 들어가 검사를 누르고 콘솔창(클라이언트 사이드)에
GET 요청 확인 Ajax코드
$.ajax({
type: "GET",
url: "/test?title_give=봄날은간다", #Get요청은 물음표로 뭔가를 데이터를 들고 간다. title_give라는 이름으로 봄날은 간다라는 값을 가져왔다.
data: {},
success: function(response){ #response는 서버가 내려준 값
console.log(response)
}
})
를 넣는다.
app.py 서버쪽을 보면
return jsonify({'result':'success', 'msg': '이 요청은 GET!'})
를 내려주는 것으로 알수 있다.
그것을 response에 담아서 찍힌다.
GET 요청 API코드
@app.route('/test', methods=['GET'])
def test_get():
title_receive = request.args.get('title_give') #title_give라는 값을 가져오기
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 GET!'}) #값을 내려줌
Ajax 콜 해서 Ajax 가지고 온것을 API에서 처리해가지고
response를 주고 그거를 이 고객이었던 Ajax가 response에서
console.log로 찍어서 볼수 있다.
POST 요청 확인 Ajax코드
$.ajax({
type: "POST",
url: "/test",
data: { title_give:'봄날은간다' }, #get하고 다르게 가져가고 있는 것을 알수 있다.
success: function(response){
console.log(response)
}
})
POST 요청 API코드
@app.route('/test', methods=['POST'])
def test_post():
title_receive = request.form['title_give'] #title_give라는 값을 가져오기
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 POST!'}) #return 해줘서 콘솔창에 찍힌다.
post창구 만듬
06. [모두의책리뷰] - 프로젝트 세팅
static, templates 폴더 +app.y
setting에서 flask,dbmongo 라이브러리를 따로 설치한다.
07. [모두의책리뷰] - 뼈대 준비하기
모두의책리뷰-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():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': '이 요청은 POST!'})
@app.route('/review', methods=['GET'])
def read_reviews():
sample_receive = request.args.get('sample_give')
print(sample_receive)
return jsonify({'msg': '이 요청은 GET!'})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
index.html 준비하기
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- Webpage Title -->
<title>모두의 책리뷰 | 스파르타코딩클럽</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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">
<!-- 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>
<!-- 구글폰트 -->
<link href="https://fonts.googleapis.com/css?family=Do+Hyeon&display=swap" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function () {
showReview();
});
function makeReview() {
$.ajax({
type: "POST",
url: "/review",
data: {sample_give:'샘플데이터'},
success: function (response) {
alert(response["msg"]);
window.location.reload();
}
})
}
function showReview() {
$.ajax({
type: "GET",
url: "/review?sample_give=샘플데이터",
data: {},
success: function (response) {
alert(response["msg"]);
}
})
}
</script>
<style type="text/css">
* {
font-family: "Do Hyeon", sans-serif;
}
h1,
h5 {
display: inline;
}
.info {
margin-top: 20px;
margin-bottom: 20px;
}
.review {
text-align: center;
}
.reviews {
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<img src="https://previews.123rf.com/images/maxxyustas/maxxyustas1511/maxxyustas151100002/47858355-education-concept-books-and-textbooks-on-the-bookshelf-3d.jpg"
class="img-fluid" alt="Responsive image">
<div class="info">
<h1>읽은 책에 대해 말씀해주세요.</h1>
<p>다른 사람을 위해 리뷰를 남겨주세요! 다 같이 좋은 책을 읽는다면 다 함께 행복해질 수 있지 않을까요?</p>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">제목</span>
</div>
<input type="text" class="form-control" id="title">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">저자</span>
</div>
<input type="text" class="form-control" id="author">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">리뷰</span>
</div>
<textarea class="form-control" id="bookReview"
cols="30"
rows="5" placeholder="140자까지 입력할 수 있습니다."></textarea>
</div>
<div class="review">
<button onclick="makeReview()" type="button" class="btn btn-primary">리뷰 작성하기</button>
</div>
</div>
<div class="reviews">
<table class="table">
<thead>
<tr>
<th scope="col">제목</th>
<th scope="col">저자</th>
<th scope="col">리뷰</th>
</tr>
</thead>
<tbody id="reviews-box">
<tr>
<td>왕초보 8주 코딩</td>
<td>김르탄</td>
<td>역시 왕초보 코딩교육의 명가답군요. 따라하다보니 눈 깜짝할 사이에 8주가 지났습니다.</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
08. [모두의책리뷰] - POST 연습(리뷰 저장)
1. 클라이언트와 서버 확인하기
만들어져 있는 API 정보 1. 요청 정보 : 요청 URL= /review , 요청 방식 = POST
2. 서버가 제공할 기능 : 클라이언트에게 정해진 메시지를 보냄
3. 응답 데이터 : (JSON 형식) 'result'= 'success', 'msg'= '리뷰가 성공적으로 작성되었습니다.'
서버쪽에 만들어 놓은 창고 확인
app.py
## API 역할을 하는 부분
@app.route('/review', methods=['POST']) #/review에 post
def write_review():
sample_receive = request.form['sample_give'] #sample_give에 뭔가 데이터를 받음
print(sample_receive)
return jsonify({'msg': '이 요청은 POST!'}) #메시지를 내려주고 있음
index.html
function makeReview()
{ $.ajax({ type: "POST" #Post고 /review의 샘플데이터
, url: "/review",
data: {sample_give:'샘플데이터'}
#sample_give로 해서 샘플데이터로 이렇게 데이터도 가저오고 있다.
, success: function (response) { #post하고 /review로 요청을 해서 sample_give도 갖고 갔고 다 잘 됐으면 response로 위에 msg가 넘어간다.
alert(response["msg"]);
window.location.reload();
}
})
}
리뷰작성하기 클릭하면 Ajax 콜이 된다.
2. 서버부터 만들기
서버는 제목,저자,리뷰를 받아다가 db에 저장한다.
따라서 API 기능은 다음 세 단계로 구성
1. 클라이언트가 준 title, author, review 가져오기.
2. DB에 정보 삽입하기
3. 성공 여부 & 성공 메시지 반환하기
만들 api 정보
A. 요청 정보 - 요청 URL= /review , 요청 방식 = POST - 요청 데이터 : 제목(title), 저자(author), 리뷰(review)
B. 서버가 제공할 기능 : 클라이언트에게 보낸 요청 데이터를 데이터베이스에 생성(Create)하고, 저장이 성공했다고 응답 데이터를 보냄
C. 응답 데이터 : (JSON 형식) 'msg'= '리뷰가 성공적으로 작성되었습니다.'
서버코드-app.py
db_prac를 참고해서 딕셔너리를 하나 만들고 insert한다는것을 알수 있다.
@app.route('/review', methods=['POST'])
def write_review():
# title_receive로 클라이언트가 준 title 가져오기
title_receive = request.form['title_give']
# author_receive로 클라이언트가 준 author 가져오기
author_receive = request.form['author_give']
# review_receive로 클라이언트가 준 review 가져오기
review_receive = request.form['review_give']
# DB에 삽입할 review 만들기
doc = {
'title': title_receive,
'author': author_receive,
'review': review_receive
}
# reviews에 review 저장하기
db.bookreview.insert_one(doc)
# 성공 여부 & 성공 메시지 반환
return jsonify({'msg': '리뷰가 성공적으로 작성되었습니다.'})
3. 클라이언트 만들기
클라이언트는 제목,저장,리뷰를 가져와서 보내준다.
따라서 클라이언트 코드는 다음 세 단계로 구성
1. input에서 title, author, review 가져오기
2. 입력값이 하나라도 없을 때 alert 띄우기.
3. Ajax로 서버에 저장 요청하고, 화면 다시 로딩하기
사용할 API정보
A. 요청 정보 - 요청 URL= /review , 요청 방식 = POST - 요청 데이터 : 제목(title), 저자(author), 리뷰(review)
B. 서버가 제공할 기능 : 클라이언트에게 보낸 요청 데이터를 데이터베이스에 생성(Create)하고, 저장이 성공했다고 응답 데이터를 보냄
C. 응답 데이터 : (JSON 형식) 'result'= 'success', 'msg'= '리뷰가 성공적으로 작성되었습니다.'
function makeReview() {
// 화면에 입력어 있는 제목, 저자, 리뷰 내용을 가져옵니다.
let title = $("#title").val();
let author = $("#author").val();
let review = $("#bookReview").val();
// POST /review 에 저장(Create)을 요청합니다.
$.ajax({
type: "POST",
url: "/review",
data: { title_give: title, author_give: author, review_give: review },
success: function (response) {
alert(response["msg"]);
window.location.reload();
}
})
}
동작 테스트 제목, 저자, 리뷰를 작성하고 '리뷰 작성하기' 버튼을 눌렀을 때, '리뷰가 성공적으로 작성되었습니다.'라는 alert가 뜨는지 확인합니다.
title,author,review가 다 잘 가져갔다면
app.py에서 db에 저장 끝내고
return jsonify({'msg': '리뷰가 성공적으로 작성되었습니다.'})
저장완료가 내려오면 responser가 'msg': '리뷰가 성공적으로 작성되었습니다.' 이만큼이니깐
그중에서 msg를 이렇게 alert로 띄어주고 reload한다.
09. [모두의책리뷰] - GET 연습(리뷰 보여주기)
1. 클라이언트와 서버 확인하기
만들어져 있는 API 정보
1. 요청 정보 : 요청 URL= /review , 요청 방식 = GET
2. 서버가 제공할 기능 : 클라이언트에게 정해진 메시지를 보냄
3. 응답 데이터 : (JSON 형식) {'msg': '이 요청은 GET!'}
서버쪽에서 만들어온 창구 확인
서버코드-app.py
@app.route('/review', methods=['GET']) #/review의 get
def read_reviews():
sample_receive = request.args.get('sample_give') #sample_give라는 이름으로 데이터를 받고 있다.
print(sample_receive)
return jsonify({'msg': '이 요청은 GET!'})
클라이언트코드-index.html
function showReview() {
// 서버의 데이터를 받아오기
$.ajax({
type: "GET",
url: "/review?sample_give=샘플데이터", #/review에 get요청,샘플데이터를 가져가고 있다.
data: {},
success: function (response) { #response로 잘 내려와서 msg를 찍어주라고 되어있다.
alert(response["msg"]);
}
})
}
동작 테스트 화면을 새로고침 했을 때, '리뷰를 받아왔습니다.' 라는 내용의 alert창이 뜨면 클라이언트 코드와 서버 코드가 연결 되어있는 것입니다.
2. 서버부터 만들기
서버는 클라이언트로부터 받을 데이터가 없다.
그냥 모든 리뷰를 db에서 가져와가지고
그대로 내려주기만 하면 된다.
db에서 리뷰 가지고 오는 거를 한다.
API 는 약속이라고 했습니다.
API를 먼저 만들어보죠!
API 기능은 다음 단계로 구성되어야 합니다.
1. DB에서 리뷰 정보 모두 가져오기
2. 성공 여부 & 리뷰 목록 반환하기
정리하면, 만들 API 정보.
A. 요청 정보 - 요청 URL= /review , 요청 방식 = GET - 요청 데이터 : 없음
B. 서버가 제공할 기능 : 데이터베이스에 리뷰 정보를 조회(Read)하고, 성공 메시지와 리뷰 정보를 응답 데이터를 보냄
C. 응답 데이터 : (JSON 형식) 'all_reviews'= 리뷰리스트
@app.route('/review', methods=['GET'])
def read_reviews():
# 1. DB에서 리뷰 정보 모두 가져오기
reviews = list(db.bookreview.find({}, {'_id': False})) #review 잠깐받는 변수
# 2. 성공 여부 & 리뷰 목록 반환하기
return jsonify({'all_reviews': reviews})
3. 클라이언트 만들기
클라이언트는 all_reviews가 잘 내려오면 그거를 가지고 for문을 돌면서 리뷰들을 붙여주면 된다.
API 는 약속이라고 했습니다.
API를 사용할 클라이언트를 만들어보죠!
리뷰를 작성하기 위해 필요한 정보는 다음 세 가지
- 제목(title) - 저자(author) - 리뷰(review) 따라서 클라이언트 코드는 다음 세 단계로 구성
1. 리뷰 목록을 서버에 요청하기
2. 요청 성공 여부 확인하기
3. 요청 성공했을 때 리뷰를 올바르게 화면에 나타내기
사용할 API 정보
A. 요청 정보 - 요청 URL= /review , 요청 방식 = GET - 요청 데이터 : 없음
B. 서버가 제공할 기능 : 데이터베이스에 리뷰 정보를 조회(Read)하고, 성공 메시지와 리뷰 정보를 응답 데이터를 보냄
C. 응답 데이터 : (JSON 형식) 'all_reviews'= 리뷰리스트
<tr>
<td>왕초보 8주 코딩</td>
<td>김르탄</td>
<td>역시 왕초보 코딩교육의 명가답군요. 따라하다보니 눈 깜짝할 사이에 8주가 지났습니다.</td>
</tr>
tr안에 정보들을 확인하며 코딩을 짠다.
function showReview() {
$.ajax({
type: "GET",
url: "/review",
data: {},
success: function (response) {
let reviews = response['all_reviews']
for (let i = 0; i < reviews.length; i++) {
let title = reviews[i]['title']
let author = reviews[i]['author']
let review = reviews[i]['review']
let temp_html = `<tr>
<td>${title}</td>
<td>${author}</td>
<td>${review}</td>
</tr>`
$('#reviews-box').append(temp_html)
}
}
})
}
동작 테스트 화면을 새로고침 했을 때, DB에 저장된 리뷰가 화면에 올바르게 나타나는지 확인
완성코드
프로젝트 API 정보는 아래와 같습니다.
[리뷰 저장하기(Create)]
A. 요청 정보 - 요청 URL= /review , 요청 방식 = POST - 요청 데이터 : 제목(title), 저자(author), 리뷰(review)
B. 서버가 제공할 기능 : 클라이언트에게 보낸 요청 데이터를 데이터베이스에 생성(Create)하고, 저장이 성공했다고 응답 데이터를 보냄
C. 응답 데이터 : (JSON 형식) 'result'= 'success', 'msg'= '리뷰가 성공적으로 작성되었습니다.'
[리뷰 보여주기(Read)]
A. 요청 정보 - 요청 URL= /review , 요청 방식 = GET - 요청 데이터 : 없음
B. 서버가 제공할 기능 : 데이터베이스에 리뷰 정보를 조회(Read)하고, 성공 메시지와 리뷰 정보를 응답 데이터를 보냄
C. 응답 데이터 : (JSON 형식) 'result'= 'success', 'reviews'= 리뷰리스트
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=5000, debug=True)index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- Webpage Title -->
<title>모두의 책리뷰 | 스파르타코딩클럽</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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">
<!-- 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>
<!-- 구글폰트 -->
<link href="https://fonts.googleapis.com/css?family=Do+Hyeon&display=swap" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function () {
showReview();
});
function makeReview() {
let title = $('#title').val()
let author = $('#author').val()
let review = $('#bookReview').val()
$.ajax({
type: "POST",
url: "/review",
data: {title_give:title,author_give:author,review_give:review},
success: function (response) {
alert(response["msg"]);
window.location.reload();
}
})
}
function showReview() {
$.ajax({
type: "GET",
url: "/review",
data: {},
success: function (response) {
let reviews = response['all_reviews']
for (let i = 0; i < reviews.length; i++) {
let title = reviews[i]['title']
let author = reviews[i]['author']
let review = reviews[i]['review']
let temp_html = `<tr>
<td>${title}</td>
<td>${author}</td>
<td>${review}</td>
</tr>`
$('#reviews-box').append(temp_html)
}
}
})
}
</script>
<style type="text/css">
* {
font-family: "Do Hyeon", sans-serif;
}
h1,
h5 {
display: inline;
}
.info {
margin-top: 20px;
margin-bottom: 20px;
}
.review {
text-align: center;
}
.reviews {
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container" style="max-width: 600px;">
<img src="https://image.freepik.com/free-vector/large-bookcase-with-books-library-book-shelf-interior_92863-357.jpg"
class="img-fluid" alt="Responsive image">
<div class="info">
<h1>읽은 책에 대해 말씀해주세요.</h1>
<p>다른 사람을 위해 리뷰를 남겨주세요! 다 같이 좋은 책을 읽는다면 다 함께 행복해질 수 있지 않을까요?</p>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">제목</span>
</div>
<input type="text" class="form-control" id="title">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">저자</span>
</div>
<input type="text" class="form-control" id="author">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">리뷰</span>
</div>
<textarea class="form-control" id="bookReview"
cols="30"
rows="5" placeholder="140자까지 입력할 수 있습니다."></textarea>
</div>
<div class="review">
<button onclick="makeReview()" type="button" class="btn btn-primary">리뷰 작성하기</button>
</div>
</div>
<div class="reviews">
<table class="table">
<thead>
<tr>
<th scope="col">제목</th>
<th scope="col">저자</th>
<th scope="col">리뷰</th>
</tr>
</thead>
<tbody id="reviews-box">
</tbody>
</table>
</div>
</div>
</body>
</html>
