회원가입 페이지 개설

 

• 프로젝트 개요
  • DB 및 로그인 페이지 간 연결 개요
  • 회원가입 데이터 DB 저장 및 로그인 기능 개설
• Step 1: 회원가입 페이지 구성
  • register.html 파일 생성 및 기본 입력란 추가 (user_id, email, password)
  • register_proc.php로 DB와의 상호작용 설계
• Step 2: DB 연결 설정
  • DB 연결 설정 ($db_conn = mysqli_connect(...))
  • DB 중복 확인 SQL 쿼리 작성
    • 이메일 및 아이디 중복 확인
    • 데이터베이스 연결 및 실행 절차
• Step 3: 회원가입 데이터 삽입
  • 중복 확인 후, register_1 테이블에 회원가입 데이터 저장
  • 성공 시 메시지 출력 및 로그인 페이지 이동 처리
  • 실패 시 오류 메시지 출력
• Step 4: 작동 확인
  • 페이지 정상 동작 확인 및 CSS 추가 준비
• 번외: DB 설정 이슈와 문제 해결
  • id 필드 설정 오류 (int → varchar) 및 데이터 손실 문제
  • 문제 해결 및 작업 백업 관련 조언
• Step 5: 회원가입 페이지 CSS 적용
  • 로그인 페이지 디자인 활용하여 회원가입 페이지 디자인 적용
  • register_proc.php에 HTML 및 스크립트 추가
  • 페이지 구조 간단화 및 오류 메시지 표시
• Step 6: 비밀번호 재확인 기능 추가
  • html 재확인 칸 추가
  • php에서 비밀번호 일치 확인 코드 추가
  • 틀린 비밀번호 시 재입력 요청 스크립트 구현

 

이제 DB를 수박 겉핥기식으로 대충 배웠으니, 이전에 만들어 놓은 로그인 페이지에 적용해보도록 합시다.

우선, 회원가입을 받은 내용을 DB에 저장하고, 저장된 데이터를 이용해서 로그인이 가능하도록 만들어 보죠.

 

먼저, 회원가입 페이지를 개설해 보겠습니다. 처음엔 간단하게 만들고, DB 연결이 잘 되면 CSS로 꾸며줄 예정입니다.

 

Step 1: register.html 파일 생성

• user_id, email, password 입력란을 추가하여 회원가입을 할 수 있도록 구성했습니다.
• register_proc.php 파일을 통해 입력 받은 데이터를 DB와 상호작용하도록 설계할 것입니다.

Step 2: DB 연결 설정

가장 위쪽에 DB 연결을 설정합니다.

$db_conn = mysqli_connect('localhost', 'admin', 'student1234', 'register');

 

• 이메일과 아이디가 이미 있는지 확인하는 쿼리
• load 값 + 사용할 DB=> stmt
• stmt 함수안에 user_id, email,를 묶음 [문자열("SS")]
• mysqli_stmt_bind_param을 실행시킬 발사대
• 실행 후, 결과 조회 => result
• 숫자 확인 ($result)가 0보다 크면 스크립트로 해당 메시지 출력 

 

• 비밀번호 해쉬화
• SQL언어로 받은 값을 user_id, email, password 칸에 삽입
• load 값 + 사용할 DB=> stmt
• stmt 함수안에 user_id, email, password를 묶음 [문자열("SSS")]
• mySQL_stmt_execute 통과되면 회원가입 성공
• DB와 연결이 끊기거나, 네트워크 문제시 회원가입 실패

이제 이 코드가 잘 작동이 되는지 확인 해봅시다.

아주 잘 동작하는 것을 확인 할 수 있다 이제 회원가입 페이지에 CSS를 입혀보죠.

 

Step 5: 회원가입 페이지 CSS 적용

기존 로그인 페이지의 디자인을 참고하여 회원가입 페이지 CSS를 꾸몄습니다.

기존에 쓰던 폰트 디자인을 끌어왔습니다

 

register_proc.php로 와서 echo 코드에 html코드인 div와 스크립트 섹터를 추가했습니다.

 

그리고 div와 script를 적용시키기 위해서는 최상단에 html 스켈레톤을 적용하였습니다.

크게 많은 것을 하지 않을거라 body부분에 다 우겨 넣도록 하겠습니다

 

기존 로그인 페이지 코드와 거의 동일하게 맞췄습니다.

 

이번에 새롭게 추가된 성공 부분도 기존 코드의 스타일과 거의 동일하게 맞췄습니다.

 

오류 메시지도 잘 출력되는 것을 볼 수 있습니다.

 

Step 6: 비밀번호 재확인 기능 추가

오타로 인해 비밀번호가 틀리면 안되니 비밀번호 재확인 하는 기능을 추가해 보도록 하겠습니다

html에 재확인 칸을 넣어주고

 

php파일에 다음 값을 넣어주겠습니다.

$pass_reconfirm = $_POST['pass_reconfirm']

if ($pass !== $pass_reconfirm) {
    echo "<script>alert('비밀번호를 다시 입력해주세요'); history.back();</script>";
    exit;
}

해당 데이터를 넣으면 틀린 비밀번호  일시 다시 입력하라는 스크립트가 나옵니다.

이로써 아주 기초적인 회원가입 페이지를 만들어 보았습니다.

 

 

 

여담

페이지 꾸미기는 초반 DB연결에 비하면 아무것도 아니였다
근데 php파일에 html 스켈레톤을 입혀서 스크립트를 적용하는게 좀 불편하고 거슬려서 따로 스크립트 폴더에 넣고 관리 하려고 하니 더 복잡해지고 머리 아파서 그냥 해당 파일에 적용시켰다
그로인해 파일 자체는 가독성이 많이 떨어지고 복잡해 보인다 어디서 무엇을 더 깍고 다듬어야할지 감이 1도 안잡힌다
모듈 형식으로 파일을 관리하는 버릇을 길러야 나중에 정말 파일 관리하는 방법이 쉬워지는데....
조만간 싹다 모듈식으러 파일을 분류해야겠다