항해99 웹개발 강의 개발일지(4) 서버연결 - Flask 활용

항해99 웹개발 강의 개발일지(4) 서버연결 - Flask 활용

이번에는 강의를 통해 브라우저에 입력한 값을 서버와 연결해 실제 데이터를 저장해 보고 그 값을 다시 불러와 화면에 보여지게 하는 방법에 대해 공부하였다. 파이썬에서는 Flask라는 프레임워크를 가지고 있어 이를 통해 간단하게 서버를 구동시켜 줄 수 있다는 사실을 알았다. pycharm을 사용한다면 setting이나 preference에서 Python interpreter 경로를 통해 간단하게 Flask 패키지를 검색하여 설치할 수 있다.

우선 아래의 사진과 같이 주문하기 버튼을 누르면 서버에 요청해 입력한 값을 데이터베이스에 저장 되도록 하고 저장된 데이터는 다시 서버의 요청으로 데이터베이스에서 불려와 아래와 같이 정보가 추가되어 지는 방식을 구현해 보았다.

구현된 화면

우선 위의 사진에서 주문자 이름, 수량, 주소, 전화번호의 값을 입력하고 주문하기 버튼을 누르면 값을 저장시키기 위해 order라는 함수를 통해 서버에 요청을 하도록 하였다. 정보를 저장 할 4가지 입력값에는 value값을 가져오기 위해 id를 지정해주고, ajax를 통해 값이 보여지지 않도록 POST방식으로 요청을 하였다.

html 본문 페이지에서 주문하기 버튼을 눌렀을 경우 불러지는 함수

서버 요청을 처리하는 페이지에서는 html본문 페이지에서 /order라는 url경로로 적힌 save_order함수가 동작하여 요청된 data들이 데이터베이스에 저장될 수 있도록 처리하였다.(나는 MongoDB를 활용하였다.)

서버요청을 처리하는 페이지(저장)

저장을 하게 되면 아래 사진과 같이 데이터베이스에 데이터가 잘 저장돼 있는 것을 확인 할 수 있다.(MongoDB로는 저장된 데이터를 눈으로 확인 할 수 없기 때문에 Robo 3T를 활용하였다.)

데이터베이스에 저장된 값들

그리고, 저장된 데이터가 화면에 바로 나타나게 하기 위해 order_listing()이라는 함수를 불러 처리요청을 하였다. 이번에는 그냥 데이터를 가져오는 것이기에 GET방식을 활용하였고, 서버요청을 처리하는 페이지에서 저장하기 위해 붙혀준 값을 가져와 반복문을 통해 모든 데이터를 가져올 수 있도록 하였다.

html 본문 페이지에서 저장된 데이터가 화면에 바로 보이게 하기 위해 요청하는 함수

위에서 데이터를 저장하기 위해서 insert를 적었다면, 데이터베이스로부터 저장된 모든 데이터를 가져오기 위해서는 find를 활용해 list를 앞에 적어주면 쉽게 가져올 수 있게 되고, 맨 위 첫번째 사진과 같이 입력한 값들이 주문하기 버튼 아래로 적혀지게 된다.

서버요청을 처리하는 페이지(불러오기)

오늘 배운 것의 원리를 잘 이해 하고 흐름을 잘 익힌다면, 여러가지 기능을 구현하는 데 잘 활용할 수 있을것 같다.

from http://8dreams.tistory.com/7 by ccl(A) rewrite - 2021-10-15 22:00:46