[Web Application-개발] 2023-11-14 웹 어플리케이션 제작 프로젝트 : 코드 리펙토링 및 추가 기능 구현 #7
2023. 11. 14. 01:01ㆍProject/Web Application-개발
프로젝트 일지
지난 코드 리펙토링 작업을 어느 정도 마무리하고 회원가입 시 아이디 중복 검사 기능을 구현한다.
앞으로 진행할 작업 예정 리스트는 다음과 같다.
- 회원가입 시 아이디 중복 검사 기능 구현
- 마이 페이지 생성 및 정보 수정 기능 구현
- 게시판 생성
회원가입 시 아이디 중복 검사 기능 구현
추가한 아이디 중복 검사 기능이 어떻게 작동하는지에 대해 간단하게 설명하자면
- 회원가입 시 아이디 입력은 '아이디 중복 검사' 버튼을 통해서만 가능하다.
- 아이디 중복 검사 버튼을 누르게 되면 check_id.php 페이지를 팝업창으로 띄우게 되며 해당 페이지에서 가입에 쓰일 아이디를 입력하고 중복여부를 판별한다.
- 중복되지 않는 경우 사용가능하다는 코멘트가 출력됨과 동시에 해당 아이디를 사용하기 버튼이 출력된다. 버튼을 누르게 되면 sign_up.php 페이지의 아이디 입력칸에 가입에 쓰일 아이디 값이 입력된다.
- 중복되는 경우 이미 중복되었다는 코멘트가 출력되고 아무런 버튼도 출력되지 않는다.
이제 코드들과 함께 자세한 작동 순서 및 작동 영상을 알아보자.
1) sign_up.php
sign_up.php 페이지에서 추가된 코드는 다음과 같다.
- 아이디 입력창의 속성으로 readonly를 부여하여 중복 검사 없이 아이디 변경을 방지한다.
- 아이디 중복 검사 버튼을 추가하여 버튼 클릭 시 발생하는 onclick 이벤트를 부여한다. 이벤트가 작동하면 일반적으로 자바스크립트 함수를 호출하도록 한다. 여기서는 check_id()라는 자바스크립트 함수를 호출한다.
- check_id() 함수는 호출 시 check_id.php 페이지를 팝업창으로 열어준다.
2) check_id.php
각 기능별 코드에 대해 알아보자.
- 아이디를 입력하는 화면을 나타낸다. 데이터 전달 방식은 POST 메소드를 사용하며 submit 시 해당 페이지로 데이터를 전달하도록 action 속성의 값을 ""으로 나타내었다.
- 또한 onsubmit 이벤트를 장치하여 empty_id() 함수를 호출한다. 해당 함수는 아이디 입력창이 비어있는 상태에서 '조회' 버튼을 클릭 시 아이디를 입력하라는 경고 팝업창을 발생시킨다.
- 아이디를 입력하여 조회버튼을 클릭 시 해당 페이지로 데이터를 전달한다. 전달된 데이터는 $user_id 변수에 저장하고 해당 변수와 같은 값을 가진 데이터를 DB에서 조회한다.
- 아이디 입력창이 비어있는 상태에서는 해당 페이지로의 데이터 전달은 불가하다. if문의 조건은 단순히 초기화면에서 다른 코멘트의 출력을 방지하는 장치일 뿐이다.
- if문에 진입하게 되면 DB 조회 결과로 인한 변수 저장 여부를 판별한다.
- 전달된 데이터(입력된 아이디)가 존재하는 경우는 아이디가 중복되므로 이미 등록되었다는 코멘트가 출력된다.
- 전달된 데이터가 존재하지 않는 경우는 사용이 가능하다는 코멘트가 출력됨가 동시에 '이 ID 사용'이라는 버튼도 같이 출력된다.
- 해당 버튼을 클릭하면 입력한 아이디의 값이 sign_up.php 페이지의 아이디 입력창으로 값이 전달된다.
아래의 그림들은 팝업창에서 볼 수 있는 각 분기별 화면이다.
- 이벤트 발생 시 호출되는 자바스크립트 함수을 선언한 구역이다.
- '이 ID 사용' 버튼 클릭 시 발생하는 onclick 이벤트로 sendValue()라는 함수가 호출된다. 해당 함수는 팝업창의 입력된 아이디를 sign_up.php 페이지 아이디 입력창으로 전달하는 기능이다.
- empty_id() 함수는 아이디 입력창이 비어있는 상태에서 조회 버튼을 클릭하면 호출되는 함수이다. 호출 시 아이디를 입력하라는 경고 팝업창이 발생한다.
앞으로 할 작업
- 마이 페이지 생성 및 정보 수정 기능 구현
- 게시판 생성