[Web Application-개발] 2023-11-06 웹 어플리케이션 제작 프로젝트 : 로그인 페이지 만들기 #4

2023. 11. 6. 01:55Project/Web Application-개발

 

프로젝트 일지

 

지난번 작업에서는 단계별로 기능들이 정상적으로 작동하는지 테스트를 진행하였다. 이번에는 파일 분리 및 DB 연결, 그리고 세션 기능을 추가하여 정상 작동하는지 테스트를 진행할 예정이다.

 

  • 파일 분리
  • 세션 기능 추가

 

파일 분리

 

파일은 다음과 같이 분리하였다.

  • index.php : 웹 브라우저에 URL을 입력하면 가장 먼저 반겨주는 대문 페이지이다. 해당 파일에서는 인사말과 계정별 UI를 표시한다.
  • login.php : 로그인 페이지 역할을 담당하며 입력란에 ID와 Password를 입력하고 로그인 버튼을 누르면 데이터를 login_proc.php 파일로 전송한다. 만약 데이터베이스에 저장되어있지 않거나 공란 상태로 로그인 버튼을 누르게 되면 login.php로 다시 돌아오며 에러메시지가 표시된다.
  • login_proc.php : login.php에서 전송하는 데이터를 받아 로그인 처리를 진행하는 역할을 담당한다. 전달받은 데이터를 데이터베이스에 존재하는 데이터와 비교하여 일치하면 index.php로 페이지를 이동하고 불일치 시 login.php 페이지로 에러메시지를 함께 이동시킨다.
  • logout.php : 로그아웃 버튼을 누르면 현재 등록되어 있는 세션을 해제하는 역할을 담당한다. 

 

index.php

 

로그인 전
로그인 후

 

index.php 파일의 작동 순서는 다음과 같다.

  • 해당 파일이 요청되면 먼저 현재 세션 변수가 등록되어있는지 확인한다.
  • 세션 변수가 등록되어있지 않다면(로그인이 되어있지 않다면) 인사말과 로그인, 회원가입 버튼을 보여준다. 로그인 버튼을 누르면 login.php 페이지로 이동하고, 회원가입 버튼을 누르면 sign_up.php 페이지로 이동한다.
  • 세션 변수가 등록되어있다면(로그인이 되어있다면) 현재 계정의 이름을 포함한 인사말과 마이페이지, 로그아웃 버튼을 보여준다. 마이페이지 버튼을 누르면 my_page.php 페이지로 이동하고, 로그아웃 버튼을 누르면 logout.php 페이지로 이동한다.

 

login.php

 

초기 화면
에러메시지 화면

 

login.php 파일의 작동 순서는 다음과 같다.

  • 입력란에 ID, Password 데이터를 로그인 버튼을 누르게 되면 POST 메소드로 login_proc.php 페이지로 전송한다.
  • 만약 세션 변수 중 'login_error'에 데이터가 존재한다면(로그인 실패 처리) '아이디 혹은 비밀번호가 틀렸습니다 다시 입력 해주세요'라는 문자열을 출력하여 보여준다. 그리고 해당 세션 변수를 해제하여 다시 비어있는 상태로 만든다.

 

login_proc.php

 

 

login.php 파일의 작동 순서는 다음과 같다.

  • login.php 페이지에서 전달 받은 데이터를 각각 변수에 저장한다.
  • 조건문을 통해 공란을 판별한다. 모든 입력란이 공란이 아니면 else문을 실행한다.
  • DB를 연결하고 쿼리문을 작성하여 전달 받은 데이터와 일치하는 데이터가 DB에 저장되어 있는지 확인한다.
  • ID, Password의 값이 모두 일치하면 세션 변수에 일치한 ID를 저장 후에 index.php 페이지로 이동시키며 DB 연결을 해제하고 exit()를 호출한다.
  • ID, Password의 값이 하나라도 불일치 하면 세션 변수 'login_error'에 에러메시지를 저장 후 login.php 페이지로 이동시키며 DB 연결을 해제하고 exit()를 호출한다.

 

logout.php

 

logout.php 파일의 작동 순서는 다음과 같다.

  • 해당 페이지가 요청되면 등록된 세션을 해제하고 index.php 페이지로 이동시킨다.

 

앞으로 할 작업
  • 회원가입 페이지 및 마이 페이지 생성
  • 코드 리펙토링 및 디테일 작업