얼음꽃의 일지

영화 사진, 제목, 설명을 가져오는 주제로 GET, POST 이용하기 본문

웹개발 개발일지/4주차

영화 사진, 제목, 설명을 가져오는 주제로 GET, POST 이용하기

얼음꽃 2022. 9. 2. 14:29
728x90

이 주제를 하기 전 미리 말씀드립니다. html 형태는 1주차 내용처럼 부트스트랩을 이용하면 충분히 만들수 있는 부분이고 이전 코드들이 다른 게시물에 다 있기때문에 GET, POST 중점으로만 하겠습니다.

 

먼저 POST 부분 부터 보여드리겠습니다.

 

받아오는 값을 보여주기 위한 사진

일단 넣어지는 값은 URL(url), 별점(star), 코멘트(comment), 기록하기 버튼(함수 posting()) 임을 미리 말씀드립니다.

 

POST Ajax 코드
POST API 코드

URL, 별점, 코멘트를 입력을 하게되면 POST Ajax 코드에서 그걸 받아오게 됩니다. 그 받아온 값을 _give 에 넣게 됩니다.

 

url_give: url, star_give: star, star_give: star -> POST API로 보냅니다.

 

그럼 API는 그 값을 받아서 변수 선언을 하고 url에 있는 사진, 제목, 설명도 같이 가져와야하기 때문에 이전 게시물에서 사용했던 meta-tag 를 가져오는 방식을 써서 변수 선언을 해주고 총 5개의 값을 MongoDB에 넣기 위해 Dictionary 형태로 넣어줍니다. 그리고 완료가 되었으면 jsonify 코드를 POST Ajax코드로 보내서 success 에 메시지가 뜨도록 해주고, 새로고침을 해줍니다. 간단한 순서로 보면

 

Ajax 값 받고, API한테 넘겨주기 -> 넘겨받은 값을 DB에 저장후 API는 Ajax에게 메세지 보내기 -> Ajax는 메세지 출력

 

MongoDB에 들어간 데이터

 

그 다음은 GET 부분을 보겠습니다.

 

넣어준 값을 보여주기 위한 사진

 

GET Ajax 코드
GET API 코드

GET부분을 보시면 먼저 DB값을 가져와야 하기 때문에 API코드에서 값을 다 꺼내오고 movies라는 값에 실어서 Ajax 코드에게 보내게 됩니다. 그럼 그 값을 받은 Ajax 코드는 movies값을 꺼내기 위해 rows라는 변수에 대입이 되고 rows 길이 만큼 돌면서 총 5가지인 제목, 사진, 설명, 별점, 코멘트를 꺼내와 각각의 값에 대입하고 카드 형태였던 것을 들고와 그 안에 값들을 대입한 후, card-box에 첨부하게 됩니다.

 

웹페이지에 나오는 결과
MongoDB에 저장된 값

POST, GET을 이용한 두번째 주제여서 처음했을때 보다는 조금 더 코딩을 하는데 편해졌을꺼라 생각이 듭니다.

 

py파일 코드만 올려놓겠습니다.

 

py 전체 코드

 

728x90