파이썬 Flask 기반 웹프로그래밍 프로젝트 1/3
본 과정은 파이썬 Flask 를 기반으로 웹진 사이트를 제작하고 관리페이지에서 콘텐츠 및 회원을 관리하는 프로젝트 실습 중심의 과정 입니다.
하나씩 따라해서 실습해 보시기 바랍니다.
프로젝트 1/3 과정 – 관리페이지(DeshBoard) 만들기 1단계 – 로그인 페이지 만들기
1. pythonanywhere 새로운 계정으로 회원가입 및 로그인 https://www.pythonanywhere.com/pricing/ 저는 기존 아이디 aiclub -> 이번 수업용은 aiclub2로 만들었어어 (당연히 사용안한 다른 이메일로) 회원가입 후에는 이메일로 가셔서 승인 메일 확인하시는거 잊지 마시구요. 저의 경우 해외에서 수신된 메일이라 스팸 메일함으로 빠졌더군요 ㅜㅜ
2. Flask 개발환경 빠르게 구축하기 1) Console 상단 메뉴 클릭 > Bash 클릭
2) 가상환경 만들기명령어 :
3) Flask 설치명령어 :
4) 상단 메뉴에서 Web 클릭 (새창) – Add a new web app 클릭 – Next 클릭 – Flask 클릭 – Python 3.6 클릭 (이번에는 최신버전으로 해봅시다) – Next 클릭 – 다시 Web 메뉴 클릭 > Vitualenv : 항목에 Enter path …. 이곳에
입력 후 V 클릭- Reload 클릭후 사이트 접속 확인
3. 데이터베이스 회원 테이블 만들기 1) pymysql 설치를 위해 가상환경 콘솔 실행명령어 :
2) 상단 메뉴에 DataBase 클릭데이터베이스 비밀번호 입력후 생성 * 2분정도 기다려도 반응이 없으면 그냥 상단 메뉴에 DataBase를 클릭 하시면 됩니다. * 회원가입 후 이메일 인증 안하고 데이터베이스 생성하면 꼬일수 있으니 꼭 인증을 먼저 하세요!
3) Start a console on 클릭
4) 회원 테이블 만들기
5) 관리자 회원 추가 – 프로필로 사용할 이미지를 /static/upload 폴더를 만들어서 member.png 파일로 업로드 https://www.iconfinder.com/ 영어로 face 검색 후 free 이미지 하나 받아서 사용
– 쿼리 실행
4. BootStrap 로그인 테마 활용하기 1) 관리 페이지 로그인 템플릿 적용 https://colorlib.com/wp/template/login-form-v18/
* 해당 템플릿을 사용해서 적용첨부파일 : Login_v18.zip (템플릿 원본)적용결과 : http://aiclub2.pythonanywhere.com/admin (아이디 : admin / 비밀번호 : 1234)
2) 로그인 테마 스테틱 파일 업로드 – mysite에 static 폴더 만들기 – static 폴더에 login 폴더 만들기 – login 폴더에 로그인 테마 스테틱 관련 파일들을 login.zip으로 압축해서 파일 업로드하기 – 가상환경에 접속해서
– 실행 (압축 풀고 나면 zip파일 삭제 해도 됨) – css 파일 중에 경로 수정하기 /static 절대 경로로 적용 (바꾸기 단축키 Ctrl + H)
3) 템플릿 파일 만들기 /templates/admin/login.html 로그인 폼 페이지 – css, js, img 파일 경로를 /static/login 으로 수정 (Ctrl + H)
4) /template/admin/base.html 템플릿 파일 만들기
5) /templates/admin/main.html 관리자 페이지 만들기
6) /flask_app.py 수정
/login : 로그인 처리 (템플릿 없음) /logout : 로그아웃 처리 (템플릿 없음) /admim : 관리페이지
6. 최종 결과물 http://aiclub2.pythonanywhere.com/login
해당 게시글에서 코드가 보기 힘들면 네이버 카페에 올려 놓은 내용을 보시면 됩니다. 단, PC에 최적화 되어 있으니 PC에서 접속해서 보시기 바랍니다.
https://cafe.naver.com/aiclubcafe
게시글 사진
